GyN&&^&Qa!x2pThFlvq?$=(AC<}Ei
zP=53$La=jLYw{7yckbVfSSE>%?kP6Gw*!ezb@B4o$p}0NF)bg7s}F)GoipbNlfbN^
zZXwp}3HOV#uWT#rC($2*Tm!88ueS+|F6Y2|jd6n0$reX&ihr3+d>O;%1UJKpO@eDh
z+oovvPvrfG>GxyW#Y=pp5MN>^G|2+d_+NkeBwiBS8tNBfH_uT9h-Kf|_LoW0OiBp;
zn
+ {% block content %}{% endblock %}
+
+
+ {% block footer %}{% endblock %}
+
+ {% endapply %}
+
+
+ {{ bsi_cx_js_module_missing_chunks_import() }}
+
+
diff --git a/templates/website/design.hbs.twig b/templates/website/design.hbs.twig
new file mode 100644
index 0000000..afbe56c
--- /dev/null
+++ b/templates/website/design.hbs.twig
@@ -0,0 +1,21 @@
+{% extends '_layout.twig' %}
+
+{% block navigation %}
+
+ {% block header %}
+ {% include './../../../shared/content-elements/header-image/template.twig' %}
+ {% endblock %}
+
+{% endapply %}
\ No newline at end of file
diff --git a/templates/website/includes/logo/index.js b/templates/website/includes/logo/index.js
new file mode 100644
index 0000000..c532682
--- /dev/null
+++ b/templates/website/includes/logo/index.js
@@ -0,0 +1,15 @@
+const {cx, Include} = require('@bsi-cx/design-build');
+
+/**
+ * @type {Include}
+ */
+module.exports = cx.include
+ .withIdentifier('logo-XeW2mK')
+ .withName('Logo')
+ .withEditable(true)
+ .withFile(require('./template.twig'))
+ .withDropzones(
+ cx.dropzone
+ .withDropzone('logo-dropzone-vBnV9R')
+ .withMaxAllowedElements(1)
+ .withAllowedElements(require('./../../../shared/content-elements/logo')));
\ No newline at end of file
diff --git a/templates/website/includes/logo/template.twig b/templates/website/includes/logo/template.twig
new file mode 100644
index 0000000..b5bc66f
--- /dev/null
+++ b/templates/website/includes/logo/template.twig
@@ -0,0 +1,7 @@
+{% apply spaceless %}
+ {% set dropzoneId = dropzoneId ?: 'logo-dropzone-vBnV9R' %}
+
+
+ {% include './../../../shared/content-elements/logo/template.twig' %}
+
+{% endapply %}
\ No newline at end of file
diff --git a/templates/website/includes/navigation/index.js b/templates/website/includes/navigation/index.js
new file mode 100644
index 0000000..cbfefe3
--- /dev/null
+++ b/templates/website/includes/navigation/index.js
@@ -0,0 +1,10 @@
+const {cx, Include} = require('@bsi-cx/design-build');
+
+/**
+ * @type {Include}
+ */
+module.exports = cx.include
+ .withIdentifier('navigation-Vp05IU')
+ .withName('Navigation')
+ .withEditable(false)
+ .withFile(require('./template.hbs'));
\ No newline at end of file
diff --git a/templates/website/includes/navigation/languageSwitch.js b/templates/website/includes/navigation/languageSwitch.js
new file mode 100644
index 0000000..498a035
--- /dev/null
+++ b/templates/website/includes/navigation/languageSwitch.js
@@ -0,0 +1,52 @@
+document.addEventListener('alpine:init', () => {
+ window.Alpine.data('languageSwitch', () => ({
+ rootEl: null,
+ activeLanguageElement: null,
+ availableLanguageElements: null,
+ availableLanguages: null,
+
+ init() {
+ this.rootEl = this.$root;
+ this.activeLanguageElement = this.$root.querySelector('.active-language');
+ this.availableLanguageElements = this.$root.querySelectorAll('.available-language');
+
+ if (!this.activeLanguageElement || this.availableLanguageElements.length <= 1) {
+ this.rootEl.classList.add('d-none'); // hide language panel
+ } else {
+ this.availableLanguages = {};
+ this.availableLanguageElements.forEach(el => {
+ let key = this._formatLanguage(el.innerText);
+
+ // check if language already exists (e.g. 'de' in case the two locales de-CH and de-DE exist), if so change key to locale
+ if (this.availableLanguages[key]) {
+ let locale = this.availableLanguages[key];
+ this.availableLanguages[locale.toUpperCase()] = locale;
+ delete this.availableLanguages[key];
+ this.availableLanguages[el.innerText.toUpperCase()] = el.innerText;
+ } else {
+ this.availableLanguages[key] = el.innerText;
+ }
+ });
+
+ this.availableLanguageElements.forEach(el => {
+ let language = null;
+ for (let key in this.availableLanguages) {
+ if (el.innerText === this.availableLanguages[key]) {
+ el.innerText = key;
+ language = this.availableLanguages[key];
+ }
+ }
+ el.setAttribute('aria-label', "Switch to language " + el.innerText);
+ if (language === this.activeLanguageElement.innerText) {
+ el.classList.add('current-active');
+ this.activeLanguageElement.innerText = el.innerText;
+ }
+ });
+ }
+ },
+
+ _formatLanguage(language) {
+ return language.slice(0,2).toUpperCase();
+ }
+ }))
+})
\ No newline at end of file
diff --git a/templates/website/includes/navigation/template.hbs b/templates/website/includes/navigation/template.hbs
new file mode 100644
index 0000000..8752a8d
--- /dev/null
+++ b/templates/website/includes/navigation/template.hbs
@@ -0,0 +1,32 @@
+
diff --git a/templates/website/includes/page/index.js b/templates/website/includes/page/index.js
new file mode 100644
index 0000000..948f2e4
--- /dev/null
+++ b/templates/website/includes/page/index.js
@@ -0,0 +1,21 @@
+const {cx, PageInclude} = require('@bsi-cx/design-build');
+const {layoutElements} = require('@bsi-cx/design-standard-library-web/content-elements/layout/');
+
+/**
+ * @type {PageInclude}
+ */
+module.exports = cx.pageInclude
+ .withName('Content page template')
+ .withEditable(true)
+ .withFile(require('./template.twig'))
+ .withDropzones(
+ cx.dropzone
+ .withDropzone('page-header-dropzone-TgF6e2')
+ .withMaxAllowedElements(1)
+ .withAllowedElements(
+ require('./../../../shared/content-elements/header-image')),
+ cx.dropzone
+ .withDropzone('page-content-dropzone-JPzHJO')
+ .withAllowedElements(
+ require('@bsi-cx/design-standard-library-web/content-elements/base/html'),
+ ...layoutElements));
\ No newline at end of file
diff --git a/templates/website/includes/page/template.twig b/templates/website/includes/page/template.twig
new file mode 100644
index 0000000..c25e6f6
--- /dev/null
+++ b/templates/website/includes/page/template.twig
@@ -0,0 +1,11 @@
+{% apply spaceless %}
+ {% set dropzoneContentId = dropzoneContentId ?: 'page-content-dropzone-JPzHJO' %}
+
+
+
+{% endapply %}
\ No newline at end of file
diff --git a/templates/website/modules/main.js b/templates/website/modules/main.js
new file mode 100644
index 0000000..ce0007a
--- /dev/null
+++ b/templates/website/modules/main.js
@@ -0,0 +1,3 @@
+import '../includes/navigation/languageSwitch';
+
+import '@bsi-cx/design-standard-library-web/core/main/index';
\ No newline at end of file
diff --git a/templates/website/preview.hbs.twig b/templates/website/preview.hbs.twig
new file mode 100644
index 0000000..188a099
--- /dev/null
+++ b/templates/website/preview.hbs.twig
@@ -0,0 +1,146 @@
+{% extends '_layout.twig' %}
+
+{% set colTwoLeftContentElements = [ 'base/h1', 'base/h2', 'base/h3', 'base/text', 'base/button'] %}
+{% set colTwoRightContentElements = [ 'base/figure'] %}
+{% set colOneContentElements = [ 'base/table', 'layout/spacer', 'base/accordion', 'base/news-snippet', 'layout/spacer', 'base/video', 'layout/spacer', 'base/social-media-share'] %}
+{% set formElements = [ 'base/h2', 'form/multi-column', 'form/form-field-tel', 'form/text-area', 'form/select', 'form/checkbox', 'form/radio'] %}
+{% set colThreeContentElements = [ 'base/card'] %}
+{% set colFourContentElements = [ 'base/figure'] %}
+
+
+{% block navigation %}
+ {{ source('./includes/navigation/template.hbs')|raw }}
+{% endblock %}
+
+{% block logo %}
+ {% include './includes/logo/template.twig' %}
+{% endblock %}
+
+{% block header %}
+ {% include './includes/header/template.twig' %}
+{% endblock %}
+
+{% block content %}
+ {% include './includes/page/template.twig' %}
+
+ {% block main %}
+
+ {% embed '@bsi-cx/design-standard-library-web/content-elements/layout/col-two/template.twig' %}
+ {% block col_two_dropzone_1 %}
+
+ {% for element in colTwoLeftContentElements %}
+ {% include '@bsi-cx/design-standard-library-web/content-elements/' ~ element ~ '/template.twig' %}
+ {% endfor %}
+
+ {% endblock %}
+ {% block col_two_dropzone_2 %}
+
+ {% for element in colTwoRightContentElements %}
+ {% include '@bsi-cx/design-standard-library-web/content-elements/' ~ element ~ '/template.twig' %}
+ {% endfor %}
+
+ {% endblock %}
+ {% endembed %}
+
+ {% include '@bsi-cx/design-standard-library-web/content-elements/layout/spacer/template.twig' %}
+
+ {% embed '@bsi-cx/design-standard-library-web/content-elements/layout/col-one/template.twig' %}
+ {% block col_one_dropzone %}
+
+ {% for element in colOneContentElements %}
+ {% include '@bsi-cx/design-standard-library-web/content-elements/' ~ element ~ '/template.twig' %}
+ {% endfor %}
+
+ {% include '@bsi-cx/design-standard-library-web/content-elements/layout/spacer/template.twig' %}
+
+ {% embed '@bsi-cx/design-standard-library-web/content-elements/form/form-container/template.twig' %}
+ {% block form_container_dropzone %}
+
+ {% for element in formElements %}
+ {% include '@bsi-cx/design-standard-library-web/content-elements/' ~ element ~ '/template.twig' %}
+ {% endfor %}
+
+ {% endblock %}
+ {% endembed %}
+
+ {% endblock %}
+ {% endembed %}
+
+ {% include '@bsi-cx/design-standard-library-web/content-elements/layout/spacer/template.twig' %}
+
+ {% embed '@bsi-cx/design-standard-library-web/content-elements/layout/col-three/template.twig' %}
+ {% block col_three_dropzone_1 %}
+
+ {% for element in colThreeContentElements %}
+ {% include '@bsi-cx/design-standard-library-web/content-elements/' ~ element ~ '/template.twig' %}
+ {% endfor %}
+
+ {% endblock %}
+ {% block col_three_dropzone_2 %}
+
+ {% for element in colThreeContentElements %}
+ {% include '@bsi-cx/design-standard-library-web/content-elements/' ~ element ~ '/template.twig' %}
+ {% endfor %}
+
+ {% endblock %}
+ {% block col_three_dropzone_3 %}
+
+ {% for element in colThreeContentElements %}
+ {% include '@bsi-cx/design-standard-library-web/content-elements/' ~ element ~ '/template.twig' %}
+ {% endfor %}
+
+ {% endblock %}
+ {% endembed %}
+
+ {% include '@bsi-cx/design-standard-library-web/content-elements/layout/spacer/template.twig' %}
+
+ {% embed '@bsi-cx/design-standard-library-web/content-elements/layout/col-four/template.twig' %}
+ {% block col_four_dropzone_1 %}
+
+ {% for element in colFourContentElements %}
+ {% include '@bsi-cx/design-standard-library-web/content-elements/' ~ element ~ '/template.twig' %}
+ {% endfor %}
+
+ {% endblock %}
+ {% block col_four_dropzone_2 %}
+
+ {% for element in colFourContentElements %}
+ {% include '@bsi-cx/design-standard-library-web/content-elements/' ~ element ~ '/template.twig' %}
+ {% endfor %}
+
+ {% endblock %}
+ {% block col_four_dropzone_3 %}
+
+ {% for element in colFourContentElements %}
+ {% include '@bsi-cx/design-standard-library-web/content-elements/' ~ element ~ '/template.twig' %}
+ {% endfor %}
+
+ {% endblock %}
+ {% block col_four_dropzone_4 %}
+
+ {% for element in colFourContentElements %}
+ {% include '@bsi-cx/design-standard-library-web/content-elements/' ~ element ~ '/template.twig' %}
+ {% endfor %}
+
+ {% endblock %}
+ {% endembed %}
+
+ {% endblock %}
+
+{% endblock %}
+
+{% block footer %}
+ {% embed './includes/footer/template.twig' %}
+ {% block footer_element %}
+ {% embed '@bsi-cx/design-standard-library-web/content-elements/layout/col-one/template.twig' with {
+ colOneAlignment: 'bsi-col-align-center'
+ } %}
+ {% block col_one_dropzone %}
+ {% include '@bsi-cx/design-standard-library-web/content-elements/base/social-media-follow/template.twig' with {
+ iconColor: 'bsi-icon-color-light'
+ } only %}
+ {% endblock %}
+ {% endembed %}
+ {% endblock %}
+ {% endembed %}
+{% endblock %}
\ No newline at end of file
diff --git a/templates/website/styles/styles.scss b/templates/website/styles/styles.scss
new file mode 100644
index 0000000..7dffd90
--- /dev/null
+++ b/templates/website/styles/styles.scss
@@ -0,0 +1,87 @@
+@import '~@bsi-cx/design-standard-library-web/styles/styles.scss';
+
+$logoWidth: bsiProperty('logoWidth', 60px);
+$lg: bsiProperty('gridBreakpointLG', 940px);
+
+/*
+ * Global styles that are independent from a specific content element
+ */
+
+.navbar {
+ .navbar-brand {
+ width: $logoWidth;
+ .logo {
+ width: $logoWidth;
+ }
+ figure {
+ margin: 0;
+ img {
+ margin: 0;
+ }
+ }
+ }
+
+ .container.bsi-logo-align-right {
+ justify-content: flex-end !important;
+ .navbar-brand {
+ margin-right: 0 !important;
+ }
+ }
+
+ .navbar-nav .nav-item.dropdown:hover {
+ .dropdown-menu {
+ display: block;
+ margin: 0;
+ }
+ }
+
+ @media (max-width: $lg - 1px) {
+ .navbar-nav .nav-item.dropdown .dropdown-menu {
+ display: block;
+ border: none;
+ padding: 0;
+ a.dropdown-item {
+ color: var(--bs-nav-link-color);
+ }
+ }
+ }
+
+ &.navbar-expand-lg .navbar-collapse {
+ justify-content: space-between;
+ }
+
+ .language-switch {
+ .current-active {
+ display: none;
+ }
+ .dropdown-language-switch {
+ min-width: 54px;
+ }
+ }
+}
+
+.nav-center + .navigation {
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.navigation {
+ margin-left: 0;
+ margin-right: auto;
+ @include media-breakpoint-down(lg) {
+ margin-left: auto;
+ margin-right: 0;
+ }
+}
+
+// content editor specific CSS
+.bsi-ce-edit-mode .nav-item.dropdown.language-switch {
+ &:hover {
+ .dropdown-menu {
+ display: none;
+ }
+ }
+ .active-language {
+ text-transform: uppercase;
+ }
+}
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000..fe27693
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,68 @@
+const path = require('path');
+const package = require('./package.json');
+
+const {BuildConfig, WebpackConfigBuilder, Version, DesignType, ModuleConfig} = require('@bsi-cx/design-build');
+
+const landingpageBuildConfig = new BuildConfig()
+ .withName('master-template-cx-22.0-landingpage')
+ .withVersion(package.version)
+ .withDesignType(DesignType.LANDINGPAGE)
+ .withTargetVersion(Version.CX_22_0)
+ .withRootPath(path.resolve(__dirname, 'templates', 'landingpage'))
+ .withAssetResourceRuleFilename('static/[name][ext]')
+ .withPropertiesFilePath(path.resolve(__dirname, 'properties.js'))
+ .withModulesRootPath('modules')
+ .withModules(
+ new ModuleConfig()
+ .withName('main')
+ .withPath('main.js'))
+ .withAdditionalFilesToCopy({
+ from: path.resolve(__dirname, 'templates', 'shared', 'static', 'header.png'),
+ to: 'static/header.png',
+ });
+
+
+const websiteBuildConfig = new BuildConfig()
+ .withName('master-template-cx-22.0-website')
+ .withVersion(package.version)
+ .withDesignType(DesignType.WEBSITE)
+ .withTargetVersion(Version.CX_22_0)
+ .withRootPath(path.resolve(__dirname, 'templates', 'website'))
+ .withAssetResourceRuleFilename('static/[name][ext]')
+ .withPropertiesFilePath(path.resolve(__dirname, 'properties.js'))
+ .withModulesRootPath('modules')
+ .withModules(
+ new ModuleConfig()
+ .withName('main')
+ .withPath('main.js'))
+ .withAdditionalFilesToCopy({
+ from: path.resolve(__dirname, 'templates', 'shared', 'static', 'header.png'),
+ to: 'static/header.png',
+ });
+
+module.exports = WebpackConfigBuilder.fromConfigs(
+ websiteBuildConfig.clone()
+ .withName('master-template-cx-1.3-website')
+ .withTargetVersion(Version.CX_1_3)
+ .withPropertiesFilePath(path.resolve(__dirname, 'properties-de.js')),
+ websiteBuildConfig.clone()
+ .withName('master-template-cx-22.0-website')
+ .withPropertiesFilePath(path.resolve(__dirname, 'properties-de.js')),
+ websiteBuildConfig.clone()
+ .withName('master-template-cx-23.2-website')
+ .withTargetVersion(Version.CX_23_2)
+ .withPropertiesFilePath(path.resolve(__dirname, 'properties-de.js')),
+ landingpageBuildConfig.clone()
+ .withName('master-template-cx-1.3-landingpage-de')
+ .withTargetVersion(Version.CX_1_3)
+ .withPropertiesFilePath(path.resolve(__dirname, 'properties-de.js')),
+ landingpageBuildConfig.clone()
+ .withName('master-template-cx-22.0-landingpage-de')
+ .withPropertiesFilePath(path.resolve(__dirname, 'properties-de.js')),
+ landingpageBuildConfig.clone()
+ .withName('master-template-cx-23.2-landingpage-de')
+ .withTargetVersion(Version.CX_23_2)
+ .withPropertiesFilePath(path.resolve(__dirname, 'properties-de.js'))
+ /*landingpageBuildConfig.clone()
+ .withName('master-template-cx-22.0-landingpage-en')
+ .withPropertiesFilePath(path.resolve(__dirname, 'properties-en.js'))*/);
\ No newline at end of file
+ {% block main %}
+ {% include '@bsi-cx/design-standard-library-web/content-elements/layout/col-one/template.twig' %}
+ {% endblock %}
+
+