@swisspost/design-system-components 9.0.0-next.8 → 9.0.0

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

@@ -1,191 +0,0 @@
-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.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();
-        return (h(Host, { key: '0a80e062fecb20c7277b89f49a4d774fda80a18e', "data-version": version, role: "listitem" }, this.url ? (h("a", { "aria-current": this.active ? 'page' : undefined, "aria-label": this.name, href: this.url, hrefLang: lang, lang: lang, onClick: () => this.emitChange() }, h("slot", null))) : (h("button", { "aria-current": this.active ? 'true' : undefined, "aria-label": this.name, lang: lang, onClick: () => this.emitChange() }, h("slot", null)))));
-    }
-    static get is() { return "post-language-option"; }
-    static get encapsulation() { return "shadow"; }
-    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
-            },
-            "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-list/post-list.css

@@ -1,3 +0,0 @@
-/*!
- * Copyright 2021 by Swiss Post, Information Technology
- */post-list{display:flex;gap:var(--post-list-title-gap);flex-direction:column;align-items:flex-start}post-list>div[role=list]{flex-direction:column;display:flex;gap:var(--post-list-item-gap)}post-list[horizontal]:not([horizontal=false]){flex-direction:row;align-items:baseline}post-list[horizontal]:not([horizontal=false])>div[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}

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

@@ -1,87 +0,0 @@
-import { Host, h } from "@stencil/core";
-import { version } from "../../../../package";
-/**
- * @slot default - Slot for placing the list title.
- * @slot post-list-item - Slot for placing post-list-item components.
- */
-export class PostList {
-    constructor() {
-        this.titleId = undefined;
-        this.titleHidden = false;
-        this.horizontal = false;
-    }
-    componentWillLoad() {
-        /**
-         * Get the id set on the host element or use a random id by default
-         */
-        this.titleId = `list-${crypto.randomUUID()}`;
-    }
-    componentDidLoad() {
-        this.checkTitle();
-    }
-    checkTitle() {
-        if (!this.titleEl.textContent.trim()) {
-            throw new Error('Please provide a title to the list component. Title is mandatory for accessibility purposes.');
-        }
-    }
-    render() {
-        return (h(Host, { key: '017f05c43fa95bb93c856bbeddd5d26cbc2f4cfa', "data-version": version }, h("div", { key: '71fd7d32c761cecf7b4d5d5f39cedb3bf668a0cb', ref: el => (this.titleEl = el), id: this.titleId, class: `list-title${this.titleHidden ? ' visually-hidden' : ''}` }, h("slot", { key: 'fe0e03d5d25f6a975e04be00549facae49a0970b' })), h("div", { key: 'bb717e4338396c86fa28dbf8236f5f185823f9be', role: "list", "aria-labelledby": this.titleId }, h("slot", { key: '7fd25cab433f5fbbafaa7ca01f42774823cbf579', name: "post-list-item" }))));
-    }
-    static get is() { return "post-list"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["post-list.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["post-list.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "titleHidden": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true`, the list title will be hidden. Otherwise, it will be displayed.`"
-                },
-                "attribute": "title-hidden",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "horizontal": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The list can become horizontal by setting `horizontal=\"true\"` or just `horizontal`"
-                },
-                "attribute": "horizontal",
-                "reflect": false,
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "titleId": {}
-        };
-    }
-    static get elementRef() { return "host"; }
-}

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

@@ -1 +0,0 @@
-:host{display:flex}

package/dist/collection/components/post-list-item/post-list-item.js

@@ -1,25 +0,0 @@
-import { Host, h } from "@stencil/core";
-/**
- * @slot default- Slot for placing the content of the list item.
- */
-export class PostListItem {
-    connectedCallback() {
-        this.host.setAttribute('slot', 'post-list-item');
-    }
-    render() {
-        return (h(Host, { key: 'bbf12424f2997b7d2e7cd9e272def0bf2838f94f', role: "listitem" }, h("slot", { key: '2ce4e71879485f16ad90dfddbd1b79512107bdb0' })));
-    }
-    static get is() { return "post-list-item"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["post-list-item.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["post-list-item.css"]
-        };
-    }
-    static get elementRef() { return "host"; }
-}

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

@@ -1 +0,0 @@
-*,::before,::after{box-sizing:border-box}@media screen and (min-width: 1024px){slot[name=back-button],[slot=back-button]{display:none}}@media screen and (min-width: 1024px){h2{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}}post-mainnavigation{height:100%}:host{height:100%;display:block}.main-navigation{margin-block:0;list-style:none;display:flex;padding-left:0;gap:1rem}@media screen and (max-width: 1023.99px){.main-navigation{flex-direction:column}}.main-navigation>post-list{display:flex;align-items:stretch;gap:1rem;height:100%}@media screen and (max-width: 1023.99px){.main-navigation>post-list{flex-direction:column}}.main-navigation a,.main-navigation post-megadropdown-toggle{height:100%;display:flex;align-items:center}

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

@@ -1,61 +0,0 @@
-import { Host, h } from "@stencil/core";
-export class PostMainnavigation {
-    handleMegadropdownToggled(event) {
-        // Find next element sibling
-        let megalodon;
-        let target = event.target;
-        while (target !== null) {
-            if (target.tagName === 'POST-MEGADROPDOWN') {
-                megalodon = target;
-                break;
-            }
-            target = target.nextElementSibling;
-        }
-        if (megalodon)
-            megalodon.toggle(event.target);
-    }
-    handleBackButtonClick() {
-        this.postToggle.emit();
-    }
-    render() {
-        return (h(Host, { key: '7179d087e93ab9e14dc21e16b52beaf965c53cd3', slot: "post-mainnavigation" }, h("div", { key: '2aede886c29972bf1dfebbe4513c4acf2e47c6ea', onClick: () => this.handleBackButtonClick(), class: "back-button" }, h("slot", { key: '4697ec520be78fccee832a358b349f68081b2f54', name: "back-button" })), h("nav", { key: '5bae57025152af07b9d68a19a07b61d0149d31dc', class: "main-navigation" }, h("slot", { key: 'e2a73a4b814a39a7cb1f7733f87c3c588f484006' }))));
-    }
-    static get is() { return "post-mainnavigation"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["./post-mainnavigation.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["post-mainnavigation.css"]
-        };
-    }
-    static get events() {
-        return [{
-                "method": "postToggle",
-                "name": "postToggle",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Gets emitted when a user closes the main navigation on mobile"
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
-            }];
-    }
-    static get listeners() {
-        return [{
-                "name": "postToggle",
-                "method": "handleMegadropdownToggled",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }];
-    }
-}

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

@@ -1 +0,0 @@
-*,::before,::after{box-sizing:border-box}post-popovercontainer{background-color:#fafafa;width:100%;border-bottom:1px solid #000}@media screen and (max-width: 1023.99px){post-popovercontainer{position:absolute;top:var(--header-height) !important;bottom:0;left:0;width:100%;height:auto}}.megadropdown{display:flex;gap:1rem;padding:1.5rem;border-radius:0 0 3px 3px}@media screen and (max-width: 1023.99px){.megadropdown{flex-direction:column}}.megadropdown post-list{display:flex;flex-direction:column;gap:.5rem}.megadropdown post-list-item{border-bottom:1px solid gray}.megadropdown post-list-item>a{padding-block:.25rem;display:block;text-decoration:none}.back-button{display:none}@media screen and (max-width: 1023.99px){.back-button{display:block}}post-closebutton{margin-left:auto}@media screen and (max-width: 1023.99px){post-closebutton{display:none}}h3{font-size:20px}

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

@@ -1,137 +0,0 @@
-import { Host, h } from "@stencil/core";
-export class PostMegadropdown {
-    /**
-     * Show megadropdown
-     * @param element HTMLElement
-     * @returns boolean
-     */
-    async show(element) {
-        return this.popoverRef.show(element);
-    }
-    /**
-     * Hide megadropdown
-     * @returns boolean
-     */
-    async hide() {
-        return this.popoverRef.hide();
-    }
-    /**
-     * Toggle megadropdown
-     * @param element HTMLElement
-     * @param force boolean
-     * @returns boolean
-     */
-    async toggle(element, force) {
-        return this.popoverRef.toggle(element, force !== null && force !== void 0 ? force : undefined);
-    }
-    handleBackButtonClick() {
-        this.hide();
-    }
-    render() {
-        return (h(Host, { key: '9b8e17f4120259f55ed3dbce4780559cb8876540', slot: "post-mainnavigation" }, h("post-popovercontainer", { key: 'ac48d1fffbcdff5aa20d9f2f6fed9beb4dd3be23', placement: "bottom", "edge-gap": "0", ref: el => (this.popoverRef = el) }, h("div", { key: 'af02d9fd35973b6d889b639f1d856dd3d9921ae1', class: "megadropdown" }, h("div", { key: '445aa9b1a04e63c0d2b17466c610a30662f3db0e', onClick: () => this.handleBackButtonClick(), class: "back-button" }, h("slot", { key: '8d8f4cad3d5860fdfc1c615e7122ab5dd2ca5ed3', name: "back-button" })), h("slot", { key: 'c9ba8c0941f86fd29a44153e186cd679bcd678f5' })))));
-    }
-    static get is() { return "post-megadropdown"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["./post-megadropdown.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["post-megadropdown.css"]
-        };
-    }
-    static get methods() {
-        return {
-            "show": {
-                "complexType": {
-                    "signature": "(element: HTMLElement) => Promise<void>",
-                    "parameters": [{
-                            "name": "element",
-                            "type": "HTMLElement",
-                            "docs": "HTMLElement"
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "HTMLElement": {
-                            "location": "global",
-                            "id": "global::HTMLElement"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Show megadropdown",
-                    "tags": [{
-                            "name": "param",
-                            "text": "element HTMLElement"
-                        }, {
-                            "name": "returns",
-                            "text": "boolean"
-                        }]
-                }
-            },
-            "hide": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Hide megadropdown",
-                    "tags": [{
-                            "name": "returns",
-                            "text": "boolean"
-                        }]
-                }
-            },
-            "toggle": {
-                "complexType": {
-                    "signature": "(element: HTMLElement, force?: boolean) => Promise<boolean>",
-                    "parameters": [{
-                            "name": "element",
-                            "type": "HTMLElement",
-                            "docs": "HTMLElement"
-                        }, {
-                            "name": "force",
-                            "type": "boolean",
-                            "docs": "boolean"
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "HTMLElement": {
-                            "location": "global",
-                            "id": "global::HTMLElement"
-                        }
-                    },
-                    "return": "Promise<boolean>"
-                },
-                "docs": {
-                    "text": "Toggle megadropdown",
-                    "tags": [{
-                            "name": "param",
-                            "text": "element HTMLElement"
-                        }, {
-                            "name": "param",
-                            "text": "force boolean"
-                        }, {
-                            "name": "returns",
-                            "text": "boolean"
-                        }]
-                }
-            }
-        };
-    }
-}

package/dist/collection/components/post-megadropdown-trigger/post-megadropdown-trigger.css

@@ -1 +0,0 @@
-:host{display:inline-block}

package/dist/collection/components/post-megadropdown-trigger/post-megadropdown-trigger.js

@@ -1,48 +0,0 @@
-import { Host, h } from "@stencil/core";
-export class PostMegadropdownTrigger {
-    constructor() {
-        this.toggled = false;
-    }
-    handleClick() {
-        this.toggled = !this.toggled;
-        this.postToggle.emit();
-    }
-    render() {
-        return (h(Host, { key: 'd139b405fe28c7334c01eec4846a6f8b5bf1e261', slot: "post-megadropdown-trigger" }, h("button", { key: 'd3aee53488359a79764974d440d7a058d5d96873', "aria-expanded": this.toggled, onClick: () => this.handleClick() }, h("slot", { key: '7012055defbb7c8058481db5c4129919847010c6' }))));
-    }
-    static get is() { return "post-megadropdown-trigger"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["./post-megadropdown-trigger.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["post-megadropdown-trigger.css"]
-        };
-    }
-    static get states() {
-        return {
-            "toggled": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "postToggle",
-                "name": "postToggle",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emits after each toggle"
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
-            }];
-    }
-}

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

@@ -1,3 +0,0 @@
-/*!
- * Copyright 2021 by Swiss Post, Information Technology
- */:host{display:block}post-popovercontainer{padding:var(--post-menu-padding);background-color:var(--post-menu-bg, #ffffff);border-color:var(--post-menu-bg, #ffffff)}