@swisspost/design-system-components 9.0.0-next.1 → 9.0.0-next.10

package/dist/collection/components/post-header/post-header.js

@@ -0,0 +1,172 @@
+import { h, Host } from "@stencil/core";
+import { throttle } from "throttle-debounce";
+import { version } from "../../../../package";
+import { slideDown, slideUp } from "../../animations/slide";
+/**
+ * @slot post-logo - Should be used together with the `<post-logo>` component.
+ * @slot meta-navigation - Holds an `<ul>` with meta navigation links.
+ * @slot post-togglebutton - Holds the mobile menu toggler.
+ * @slot post-language-switch - Should be used with the `<post-language-switch>` component.
+ * @slot title - Holds the application title.
+ * @slot default - Custom controls or content, right aligned in the local header.
+ * @slot post-mainnavigation - Has a default slot because it's only meant to be used in the `<post-header>`.
+ */
+export class PostHeader {
+    constructor() {
+        this.scrollParent = null;
+        this.throttledScroll = () => this.handleScrollEvent();
+        this.throttledResize = throttle(50, () => this.handleResize());
+        this.device = null;
+        this.mobileMenuExtended = false;
+    }
+    componentWillRender() {
+        this.scrollParent = this.getScrollParent(this.host);
+        this.scrollParent.addEventListener('scroll', this.throttledScroll, { passive: true });
+        window.addEventListener('resize', this.throttledResize, { passive: true });
+        this.handleResize();
+        this.handleScrollEvent();
+    }
+    frozeBody(isMobileMenuExtended) {
+        document.body.style.overflow = isMobileMenuExtended ? 'hidden' : '';
+    }
+    /**
+     * Toggles the mobile navigation.
+     */
+    async toggleMobileMenu() {
+        if (this.device === 'desktop')
+            return;
+        this.mobileMenuAnimation = this.mobileMenuExtended
+            ? slideUp(this.mobileMenu)
+            : slideDown(this.mobileMenu);
+        // Update the state of the toggle button
+        const menuButton = this.host.querySelector('post-togglebutton');
+        menuButton.toggled = !this.mobileMenuExtended;
+        // Toggle menu visibility before it slides down and after it slides back up
+        if (this.mobileMenuExtended)
+            await this.mobileMenuAnimation.finished;
+        this.mobileMenuExtended = !this.mobileMenuExtended;
+        if (!this.mobileMenuExtended)
+            await this.mobileMenuAnimation.finished;
+    }
+    handleScrollEvent() {
+        // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
+        const st = Math.max(0, this.scrollParent instanceof Document
+            ? this.scrollParent.documentElement.scrollTop
+            : this.scrollParent.scrollTop);
+        this.host.style.setProperty('--header-scroll-top', `${st}px`);
+    }
+    getScrollParent(node) {
+        let currentParent = node.parentElement;
+        while (currentParent) {
+            if (currentParent.nodeName === 'BODY') {
+                return document;
+            }
+            if (this.isScrollable(currentParent)) {
+                return currentParent;
+            }
+            currentParent = currentParent.parentElement;
+        }
+        return document;
+    }
+    isScrollable(node) {
+        if (!(node instanceof HTMLElement || node instanceof SVGElement)) {
+            return false;
+        }
+        const style = getComputedStyle(node);
+        return ['overflow', 'overflow-x', 'overflow-y'].some(propertyName => {
+            const value = style.getPropertyValue(propertyName);
+            return value === 'auto' || value === 'scroll';
+        });
+    }
+    handleResize() {
+        var _a;
+        const previousDevice = this.device;
+        let newDevice;
+        const width = window === null || window === void 0 ? void 0 : window.innerWidth;
+        if (width >= 1024) {
+            newDevice = 'desktop';
+        }
+        else if (width >= 600) {
+            newDevice = 'tablet';
+        }
+        else {
+            newDevice = 'mobile';
+        }
+        // Close any open mobile menu
+        if (newDevice === 'desktop' && this.mobileMenuExtended) {
+            this.toggleMobileMenu();
+            this.mobileMenuAnimation.finish(); // no animation
+        }
+        const mhh = (_a = this.host.shadowRoot.querySelector('.title-header')) === null || _a === void 0 ? void 0 : _a.clientHeight;
+        this.host.style.setProperty('--main-header-height', `${mhh}px`);
+        // Apply only on change for doing work only when necessary
+        if (newDevice !== previousDevice) {
+            this.device = newDevice;
+            window.requestAnimationFrame(() => {
+                this.switchLanguageSwitchMode();
+            });
+        }
+    }
+    switchLanguageSwitchMode() {
+        var _a;
+        const variant = this.device === 'desktop' ? 'menu' : 'list';
+        (_a = this.host.querySelector('post-language-switch')) === null || _a === void 0 ? void 0 : _a.setAttribute('variant', variant);
+    }
+    render() {
+        const navigationClasses = ['navigation'];
+        if (this.mobileMenuExtended) {
+            navigationClasses.push('extended');
+        }
+        return (h(Host, { key: '008e84568ce41249365d93169b2f94cd988601d0', version: version }, h("div", { key: 'f6415c30b3bfacd01a65166c7f0a3afc37676cc8', class: "global-header" }, h("div", { key: 'dc1465a3a68ce8c66c7da644d992c37d8d09ccc4', class: "global-sub" }, h("div", { key: '490b4afe502465bc20ccc41149533929987f2fab', class: "logo" }, h("slot", { key: '28ee1cdb2804f6315fffa2c319a1e2fa1e54ad08', name: "post-logo" }))), h("div", { key: '777d715f4718bb6738665f3d65c9ee4729a977de', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: 'c1ddbfdecc96fe3a6efb930d8475ee880059d372', name: "meta-navigation" }), h("slot", { key: 'df1ccf5c36ea4a05812c3983961389c42c42ddb9', name: "global-controls" }), this.device === 'desktop' && h("slot", { key: 'ace2dda9a3f3d898934c7d47c84e2475fb555e5d', name: "post-language-switch" }), h("div", { key: '3e8d94d9534d5daaa2f8e6ca5cc0833e78a49224', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, h("slot", { key: '58e3637f103411f5e577dba931caf884f46a6e47', name: "post-togglebutton" })))), h("div", { key: 'f90ff065ed795fc780c90768e5c0ab5a431bec8d', class: 'title-header ' + (this.mobileMenuExtended ? 'title-header-mobile-extended' : '') }, h("slot", { key: 'a1aaaf02da073b9e7de82e84c93745afa6a8c4e9', name: "title" }), h("div", { key: '84ae2f8b846536130967362de160e054049c8489', class: "global-sub" }, h("slot", { key: '8a845cd7f87b3a2c2fba7ffc1ace31e87f6329d9', name: "local-controls" }), h("slot", { key: 'f3822b883fc88436a84d3ca7f840946af992417e' }))), h("div", { key: '8e0390c6c2b9a71488eea73c9207d0c336c9b75d', ref: el => (this.mobileMenu = el), class: navigationClasses.join(' ') }, h("slot", { key: '5fc2db060eb962c313fc4c9ab67032e990ff54c6', name: "post-mainnavigation" }), (this.device === 'mobile' || this.device === 'tablet') && (h("div", { key: '7b9147dcf5de01865785d417c8d1966efb891ace', class: "navigation-footer" }, h("slot", { key: '6e163a7dad7b0b0fc02493cd15152179d4242980', name: "meta-navigation" }), h("slot", { key: 'e8fd19eeed8a99d69ccd8635e36cd0256ed4424b', name: "post-language-switch" }))))));
+    }
+    static get is() { return "post-header"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["./post-header.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["post-header.css"]
+        };
+    }
+    static get states() {
+        return {
+            "device": {},
+            "mobileMenuExtended": {}
+        };
+    }
+    static get methods() {
+        return {
+            "toggleMobileMenu": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLPostTogglebuttonElement": {
+                            "location": "global",
+                            "id": "global::HTMLPostTogglebuttonElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggles the mobile navigation.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "mobileMenuExtended",
+                "methodName": "frozeBody"
+            }];
+    }
+}

package/dist/collection/components/post-icon/post-icon.js

@@ -16,8 +16,6 @@ const ANIMATION_KEYS = [...ANIMATION_NAMES];
  */
 export class PostIcon {
     constructor() {
-        this.svgStyles = undefined;
-        this.svgOutput = undefined;
         this.animation = null;
         this.base = null;
         this.flipH = false;
@@ -49,39 +47,39 @@ export class PostIcon {
     validateScale(newValue = this.scale) {
         checkEmptyOrType(newValue, 'number', 'The post-icon "scale" prop should be a number.');
     }
-    componentWillLoad() {
-        this.validateBase();
-        this.validateName();
-        this.validateFlipH();
-        this.validateFlipV();
-        this.validateScale();
-        this.validateRotate();
-        this.validateAnimation();
-    }
-    componentWillRender() {
-        this.setPath();
-    }
-    setPath() {
-        var _a, _b, _c, _d;
+    getPath() {
+        var _a, _b, _c, _d, _e, _f;
         // Construct icon path from different possible sources
         const metaBase = (_b = (_a = document.head
             .querySelector('meta[name="design-system-settings"][data-post-icon-base]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-post-icon-base')) !== null && _b !== void 0 ? _b : null;
-        const fileBase = `${(_d = (_c = this.base) !== null && _c !== void 0 ? _c : metaBase) !== null && _d !== void 0 ? _d : CDN_URL}/`.replace(/\/\/$/, '/');
+        const baseHref = (_c = document.getElementsByTagName('base')[0]) === null || _c === void 0 ? void 0 : _c.href;
+        const fileBase = `${(_f = (_e = (_d = this.base) !== null && _d !== void 0 ? _d : metaBase) !== null && _e !== void 0 ? _e : baseHref) !== null && _f !== void 0 ? _f : CDN_URL}/`.replace(/\/\/$/, '/');
         const fileName = `${this.name}.svg`;
         const filePath = `${fileBase}${fileName}`;
-        this.path = new URL(filePath, window.location.origin).toString();
+        return new URL(filePath, window.location.origin).toString();
     }
-    render() {
-        // create inline styles for some properties
-        const svgStyles = Object.entries({
-            '-webkit-mask-image': `url('${this.path}')`,
-            'mask-image': `url('${this.path}')`,
+    getStyles() {
+        const path = this.getPath();
+        return Object.entries({
+            '-webkit-mask-image': `url(${path})`,
+            'mask-image': `url('${path}')`,
             'transform': (this.scale && !isNaN(Number(this.scale)) ? 'scale(' + this.scale + ')' : '') +
                 (this.rotate && !isNaN(Number(this.rotate)) ? ' rotate(' + this.rotate + 'deg)' : ''),
         })
             .filter(([_key, value]) => value !== null)
             .reduce((styles, [key, value]) => Object.assign(styles, { [key]: value }), {});
-        return (h(Host, { key: '95fa0f7a09d3430bb5d621e01b57188742920eb4', "data-version": version }, h("span", { key: 'c824e3705dc83665bb6f7649381654e6d1e07dfb', style: svgStyles })));
+    }
+    componentDidLoad() {
+        this.validateBase();
+        this.validateName();
+        this.validateFlipH();
+        this.validateFlipV();
+        this.validateScale();
+        this.validateRotate();
+        this.validateAnimation();
+    }
+    render() {
+        return (h(Host, { key: '70e13e357929d2601de3b61f46f9a717ba491fd5', "data-version": version }, h("span", { key: 'a0c40175bfa6bd06f3498dc056685c8396b6e706', style: this.getStyles() })));
     }
     static get is() { return "post-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -229,12 +227,6 @@ export class PostIcon {
             }
         };
     }
-    static get states() {
-        return {
-            "svgStyles": {},
-            "svgOutput": {}
-        };
-    }
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{

package/dist/collection/components/post-language-option/post-language-option.css

@@ -0,0 +1,3 @@
+/*!
+ * Copyright 2021 by Swiss Post, Information Technology
+ */post-language-option{display:inline-block}post-language-option button{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button}post-language-option a{color:inherit;text-decoration:none}post-language-option :is(a,button){cursor:pointer;display:flex;align-items:center;justify-content:center;height:100%;width:100%;padding:var(--post-language-option-padding);border-radius:2px}post-language-option :is(a,button){outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}post-language-option :is(a,button):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-option :is(a,button):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){post-language-option :is(a,button):is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-option :is(a,button):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}post-language-option:where([variant=list]) :is(a,button){width:40px;height:40px}post-language-option:where([variant=list]) :is(a,button):hover{color:#504f4b}post-language-option:where([variant=list]) :is(a,button)[aria-current=true],post-language-option:where([variant=list]) :is(a,button)[aria-current=page]{background-color:#050400;color:#fff}post-language-option:where([variant=list]) :is(a,button)[aria-current=true]:hover,post-language-option:where([variant=list]) :is(a,button)[aria-current=page]:hover{background-color:#504f4b}post-language-option:where([variant=menu]){width:100%}post-language-option:where([variant=menu]) :is(a,button){padding-block:13px;padding-inline:24px;box-sizing:border-box;position:relative;left:-1px;width:calc(100% + 2px)}post-language-option:where([variant=menu]) :is(a,button)[aria-current=true]::after,post-language-option:where([variant=menu]) :is(a,button)[aria-current=page]::after{content:"";left:0;height:3px;background-color:#050400;width:100%;display:block;position:absolute;bottom:3px}post-language-option:where([variant=menu]) :is(a,button)[aria-current=true]:hover::after,post-language-option:where([variant=menu]) :is(a,button)[aria-current=page]:hover::after{background-color:#504f4b}post-language-option:where([variant=menu]) :is(a,button):hover{color:#504f4b}

package/dist/collection/components/post-language-option/post-language-option.js

@@ -0,0 +1,219 @@
+import { Host, h, } from "@stencil/core";
+import { checkEmptyOrType, checkType } from "../../utils/index";
+import { version } from "../../../../package";
+/**
+ * @slot default - Slot for placing the content inside the anchor or button.
+ */
+export class PostLanguageOption {
+    constructor() {
+        this.code = undefined;
+        this.active = undefined;
+        this.variant = undefined;
+        this.name = undefined;
+        this.url = undefined;
+    }
+    validateCode(value = this.code) {
+        checkType(value, 'string', 'The "code" property of the post-language-option component must be a string.');
+    }
+    validateActiveProp(value = this.active) {
+        checkEmptyOrType(value, 'boolean', 'The "active" property of the post-language-option component must be a boolean value.');
+    }
+    validateName(value = this.name) {
+        checkEmptyOrType(value, 'string', 'The "name" property of the post-language-option component must be a string.');
+    }
+    validateUrl(value = this.url) {
+        checkEmptyOrType(value, 'string', 'The "url" property of the post-language-option component must be a valid URL.');
+    }
+    componentDidLoad() {
+        this.validateCode();
+        this.validateActiveProp();
+        this.validateName();
+        this.validateUrl();
+        if (!this.name && this.isNameRequired()) {
+            throw new Error('The "name" property of the post-language-option component is required when the full language name is not displayed.');
+        }
+    }
+    /**
+     * Selects the language option programmatically.
+     */
+    async select() {
+        this.active = true;
+        this.emitChange();
+    }
+    emitChange() {
+        this.postChange.emit(this.code);
+    }
+    isNameRequired() {
+        return this.host.textContent.toLowerCase() === this.code.toLowerCase();
+    }
+    render() {
+        const lang = this.code.toLowerCase();
+        const emitOnKeyDown = (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                this.emitChange();
+            }
+        };
+        return (h(Host, { key: '6a7c4af5ab0a953cc2c70621efc6fff905638900', "data-version": version, role: this.variant ? `${this.variant}item` : null }, this.url ? (h("a", { "aria-current": this.active ? 'page' : undefined, "aria-label": this.name, href: this.url, hrefLang: lang, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null))) : (h("button", { "aria-current": this.active ? 'true' : undefined, "aria-label": this.name, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null)))));
+    }
+    static get is() { return "post-language-option"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["post-language-option.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["post-language-option.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "code": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The ISO 639 language code, formatted according to [RFC 5646 (also known as BCP 47)](https://datatracker.ietf.org/doc/html/rfc5646). For example, \"de\"."
+                },
+                "attribute": "code",
+                "reflect": false
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If set to `true`, the language option is considered the current language for the page."
+                },
+                "attribute": "active",
+                "reflect": true
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwitchVariant | null",
+                    "resolved": "\"list\" | \"menu\"",
+                    "references": {
+                        "SwitchVariant": {
+                            "location": "import",
+                            "path": "../post-language-switch/switch-variants",
+                            "id": "src/components/post-language-switch/switch-variants.ts::SwitchVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The variant of the post-language-switch parent (dynamically set by the parent)"
+                },
+                "attribute": "variant",
+                "reflect": false
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The full name of the language. For example, \"Deutsch\"."
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "url": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The URL used for the href attribute of the internal anchor.\nThis field is optional; if not provided, a button will be used internally instead of an anchor."
+                },
+                "attribute": "url",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "postChange",
+                "name": "postChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "An event emitted when the language option is clicked. The payload is the ISO 639 code of the language."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "select": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Selects the language option programmatically.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "code",
+                "methodName": "validateCode"
+            }, {
+                "propName": "active",
+                "methodName": "validateActiveProp"
+            }, {
+                "propName": "name",
+                "methodName": "validateName"
+            }, {
+                "propName": "url",
+                "methodName": "validateUrl"
+            }];
+    }
+}

package/dist/collection/components/post-language-switch/post-language-switch.css

@@ -0,0 +1 @@
+:host{display:block}@media screen and (max-width: 1023.99px){:host{display:flex !important;gap:.5rem}}.post-language-switch-dropdown-container{display:flex;flex-direction:column}.post-language-switch-dropdown-container>*{width:100%}.post-language-switch-trigger{cursor:pointer;padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button;text-decoration:none;display:inline-flex;align-items:center;gap:var(--post-core-dimension-6);border-radius:var(--post-core-dimension-24);font-size:var(--post-core-font-size-16);padding:var(--post-core-dimension-3) var(--post-core-dimension-10)}.post-language-switch-trigger{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.post-language-switch-trigger:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-switch-trigger:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.post-language-switch-trigger:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-switch-trigger:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.post-language-switch-trigger:not(:disabled):hover,.post-language-switch-trigger.pretend-hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}.post-language-switch-trigger post-icon{height:var(--post-core-dimension-16);width:var(--post-core-dimension-16)}

package/dist/collection/components/post-language-switch/post-language-switch.js

@@ -0,0 +1,163 @@
+import { Host, h } from "@stencil/core";
+import { checkEmptyOrOneOf, checkType } from "../../utils/index";
+import { version } from "../../../../package";
+import { SWITCH_VARIANTS } from "./switch-variants";
+import { nanoid } from "nanoid";
+export class PostLanguageSwitch {
+    constructor() {
+        this.menuId = `p${nanoid(11)}`;
+        this.caption = undefined;
+        this.description = undefined;
+        this.variant = 'list';
+        this.activeLang = undefined;
+    }
+    validateCaption(value = this.caption) {
+        checkType(value, 'string', 'The "caption" property of the post-language-switch component must be a string.');
+    }
+    validateDescription(value = this.description) {
+        checkType(value, 'string', 'The "description" property of the post-language-switch component must be a string.');
+    }
+    validateVariant(value = this.variant) {
+        checkEmptyOrOneOf(value, SWITCH_VARIANTS, `The "variant" property of the post-language-switch component must be:  ${SWITCH_VARIANTS.join(', ')}`);
+    }
+    connectedCallback() {
+        this.updateChildrenVariant();
+        // Get the active language based on children's active state
+        this.activeLang = Array.from(this.host.querySelectorAll('post-language-option'))
+            .find(el => el.getAttribute('active') == 'true')
+            .getAttribute('code');
+    }
+    // Update post-language-option variant to have the correct style
+    updateChildrenVariant() {
+        this.host.querySelectorAll('post-language-option').forEach(el => {
+            el.setAttribute('variant', this.variant);
+        });
+    }
+    componentWillUpdate() {
+        this.updateChildrenVariant();
+    }
+    componentDidLoad() {
+        this.validateCaption();
+        this.validateDescription();
+        this.validateVariant();
+        // Detects a change in the active language
+        this.host.addEventListener('postChange', (el) => {
+            this.activeLang = el.detail;
+            // Update the active state in the children post-language-option components
+            this.host.querySelectorAll('post-language-option').forEach(lang => {
+                if (lang.code && lang.code === this.activeLang) {
+                    lang.setAttribute('active', 'true');
+                }
+                else {
+                    lang.setAttribute('active', 'false');
+                }
+            });
+            // Hides the dropdown when an option has been clicked
+            if (this.variant === 'menu') {
+                const menu = this.host.shadowRoot.querySelector('post-menu');
+                menu.toggle(menu);
+            }
+        });
+    }
+    renderList() {
+        return (h(Host, { "data-version": version, "aria-label": `${this.caption}, ${this.description}`, "aria-role": "list" }, h("slot", null)));
+    }
+    renderDropdown() {
+        return (h(Host, { "data-version": version }, h("post-menu-trigger", { for: this.menuId }, h("button", { class: "post-language-switch-trigger", "aria-label": `${this.caption}, ${this.description}` }, this.activeLang.toUpperCase(), h("post-icon", { "aria-hidden": "true", name: "chevrondown" }))), h("post-menu", { id: this.menuId, class: "post-language-switch-dropdown-container" }, h("slot", null))));
+    }
+    render() {
+        return this.variant === 'list' ? this.renderList() : this.renderDropdown();
+    }
+    static get is() { return "post-language-switch"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["post-language-switch.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["post-language-switch.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "caption": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A title for the list of language options"
+                },
+                "attribute": "caption",
+                "reflect": false
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A descriptive text for the list of language options"
+                },
+                "attribute": "description",
+                "reflect": false
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwitchVariant",
+                    "resolved": "\"list\" | \"menu\"",
+                    "references": {
+                        "SwitchVariant": {
+                            "location": "import",
+                            "path": "./switch-variants",
+                            "id": "src/components/post-language-switch/switch-variants.ts::SwitchVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Variant that determines the rendering of the language switch either as a list (used on mobile in the header) or a dropdown (used on desktop in the header)"
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'list'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "activeLang": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "caption",
+                "methodName": "validateCaption"
+            }, {
+                "propName": "description",
+                "methodName": "validateDescription"
+            }, {
+                "propName": "variant",
+                "methodName": "validateVariant"
+            }];
+    }
+}

package/dist/collection/components/post-language-switch/switch-variants.js

@@ -0,0 +1 @@
+export const SWITCH_VARIANTS = ['list', 'menu'];

package/dist/collection/components/post-list/post-list.css

@@ -0,0 +1,3 @@
+/*!
+ * Copyright 2021 by Swiss Post, Information Technology
+ */post-list{display:flex;flex-direction:column;gap:var(--post-list-title-gap, 0)}post-list>[role=list]{display:flex;flex-direction:column;gap:var(--post-list-item-gap, 0)}post-list:where([horizontal]:not([horizontal=false])){flex-direction:row;align-items:center}post-list:where([horizontal]:not([horizontal=false]))>[role=list]{flex-direction:row;align-items:center}post-list>.list-title.visually-hidden{width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}post-list>.list-title.visually-hidden:not(caption){position:absolute !important}