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

package/dist/types/components/post-avatar/post-avatar.d.ts

@@ -1,51 +0,0 @@
-declare enum AvatarType {
-    Slotted = "slotted",
-    Image = "image",
-    Initials = "initials",
-    Null
-}
-/**
- * @slot default - Slot for inserting a custom image as avatar.
- */
-export declare class PostAvatar {
-    private static INTERNAL_USERID_IMAGE_SRC;
-    host: HTMLPostAvatarElement;
-    /**
-     * Defines the users firstname.
-     */
-    readonly firstname: string;
-    /**
-     * Defines the users lastname.
-     */
-    readonly lastname?: string;
-    /**
-     * Defines the company internal userId.<div className="mb-1 banner banner-warning banner-sm">Can only be used on post.ch domains!</div>
-     */
-    readonly userid?: string;
-    /**
-     * Defines the users email address associated with a gravatar profile picture.
-     */
-    readonly email?: string;
-    slottedImage: HTMLImageElement;
-    avatarType: AvatarType;
-    imageUrl: string;
-    imageAlt: string;
-    initials: string;
-    validateFirstname(): void;
-    private getAvatar;
-    private getImageByProp;
-    private fetchImageByUserId;
-    private fetchImageByEmail;
-    private getAvatarByInitials;
-    private getNames;
-    private getInitials;
-    private getStorageItem;
-    private setStorageItem;
-    private removeStorageItem;
-    private cryptify;
-    private onSlotDefaultChange;
-    componentWillRender(): void;
-    componentDidLoad(): void;
-    render(): any;
-}
-export {};

package/dist/types/components/post-back-to-top/post-back-to-top.d.ts

@@ -1,19 +0,0 @@
-export declare class PostBackToTop {
-    el: HTMLPostBackToTopElement;
-    /**
-     * The label of the back-to-top button, intended solely for accessibility purposes.
-     * This label is always hidden from view.
-     **/
-    label: string;
-    belowFold: boolean;
-    private translateY;
-    isBelowFold(): boolean;
-    handleScroll: () => void;
-    watchBelowFold(newValue: boolean): void;
-    scrollToTop(): void;
-    validateLabel(): void;
-    componentWillLoad(): void;
-    componentDidLoad(): void;
-    disconnectedCallback(): void;
-    render(): any;
-}

package/dist/types/components/post-banner/banner-types.d.ts

@@ -1,2 +0,0 @@
-export declare const BANNER_TYPES: readonly ["neutral", "success", "warning", "danger", "info"];
-export type BannerType = (typeof BANNER_TYPES)[number];

package/dist/types/components/post-banner/post-banner.d.ts

@@ -1,49 +0,0 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-import { BannerType } from './banner-types';
-/**
- * @slot heading - Slot for placing custom content within the banner's heading.
- * @slot actions - Slot for placing custom actions (buttons, links, etc.) within the banner.
- * @slot default - Slot for placing the main content/message of the banner.
- */
-export declare class PostBanner {
-    host: HTMLPostBannerElement;
-    bannerId: `${string}-${string}-${string}-${string}-${string}`;
-    classes: string;
-    hasActions: boolean;
-    hasHeading: boolean;
-    onDismissButtonClick: () => Promise<void>;
-    /**
-     * If `true`, a close button (×) is displayed and the banner can be dismissed by the user.
-     */
-    readonly dismissible: boolean;
-    validateDismissible(isDismissible?: boolean): void;
-    /**
-     * The label to use for the close button of a dismissible banner.
-     */
-    readonly dismissLabel: string;
-    validateDismissLabel(dismissLabel?: string): void;
-    /**
-     * The icon to display in the banner. By default, the icon depends on the banner type.
-     *
-     * If `none`, no icon is displayed.
-     */
-    readonly icon: string;
-    validateIcon(icon?: string): void;
-    /**
-     * The type of the banner.
-     */
-    readonly type: BannerType;
-    validateType(type?: "neutral" | "success" | "warning" | "danger" | "info"): void;
-    /**
-     * An event emitted when the banner element is dismissed, after the transition.
-     * It has no payload and only relevant for dismissible banners.
-     */
-    postDismissed: EventEmitter<void>;
-    componentDidLoad(): void;
-    componentWillRender(): void;
-    /**
-     * Triggers banner dismissal programmatically (same as clicking on the close button (×)).
-     */
-    dismiss(): Promise<void>;
-    render(): any;
-}

package/dist/types/components/post-breadcrumb-item/post-breadcrumb-item.d.ts

@@ -1,15 +0,0 @@
-/**
- * @slot default - Slot for placing the text inside the breadcrumb item.
- */
-export declare class PostBreadcrumbItem {
-    host: HTMLPostBreadcrumbItemElement;
-    /**
-     * The optional URL to which the breadcrumb item will link.
-     */
-    url?: string | URL;
-    private validUrl?;
-    validateUrl(): void;
-    private constructUrl;
-    connectedCallback(): void;
-    render(): any;
-}

package/dist/types/components/post-closebutton/post-closebutton.d.ts

@@ -1,7 +0,0 @@
-/**
- * @slot default - Slot for placing visually hidden label in the close button.
- */
-export declare class PostClosebutton {
-    host: HTMLPostClosebuttonElement;
-    render(): any;
-}

package/dist/types/components/post-header/post-header.d.ts

@@ -1,16 +0,0 @@
-export declare class PostHeader {
-    host: HTMLPostHeaderElement;
-    device: 'mobile' | 'tablet' | 'desktop';
-    mobileMenuExtended: boolean;
-    private scrollParent;
-    private throttledScroll;
-    private throttledResize;
-    componentWillRender(): void;
-    handlePostMainNavigationClosed(): void;
-    private handleScrollEvent;
-    private getScrollParent;
-    private isScrollable;
-    private handleResize;
-    private handleMobileMenuToggle;
-    render(): any;
-}

package/dist/types/components/post-language-option/post-language-option.d.ts

@@ -1,40 +0,0 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-/**
- * @slot default - Slot for placing the content inside the anchor or button.
- */
-export declare class PostLanguageOption {
-    host: HTMLPostLanguageOptionElement;
-    /**
-     *  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".
-     */
-    code: string;
-    validateCode(value?: string): void;
-    /**
-     * If set to `true`, the language option is considered the current language for the page.
-     */
-    active: boolean;
-    validateActiveProp(value?: boolean): void;
-    /**
-     * The full name of the language. For example, "Deutsch".
-     */
-    name: string;
-    validateName(value?: string): void;
-    /**
-     * The URL used for the href attribute of the internal anchor.
-     * This field is optional; if not provided, a button will be used internally instead of an anchor.
-     */
-    url: string;
-    validateUrl(value?: string): void;
-    componentDidLoad(): void;
-    /**
-     * An event emitted when the language option is clicked. The payload is the ISO 639 code of the language.
-     */
-    postChange: EventEmitter<string>;
-    /**
-     * Selects the language option programmatically.
-     */
-    select(): Promise<void>;
-    private emitChange;
-    private isNameRequired;
-    render(): any;
-}

package/dist/types/components/post-list/post-list.d.ts

@@ -1,24 +0,0 @@
-/**
- * @slot default - Slot for placing the list title.
- * @slot post-list-item - Slot for placing post-list-item components.
- */
-export declare class PostList {
-    host: HTMLPostListElement;
-    /**
-     * The unique title of the list that is also referenced in the labelledby
-     */
-    titleId: string;
-    /**
-     * If `true`, the list title will be hidden. Otherwise, it will be displayed.`
-     */
-    readonly titleHidden: boolean;
-    /**
-     * The list can become horizontal by setting `horizontal="true"` or just `horizontal`
-     */
-    readonly horizontal: boolean;
-    private titleEl;
-    componentWillLoad(): void;
-    componentDidLoad(): void;
-    private checkTitle;
-    render(): any;
-}

package/dist/types/components/post-list-item/post-list-item.d.ts

@@ -1,8 +0,0 @@
-/**
- * @slot default- Slot for placing the content of the list item.
- */
-export declare class PostListItem {
-    host: HTMLPostListItemElement;
-    connectedCallback(): void;
-    render(): any;
-}

package/dist/types/components/post-mainnavigation/post-mainnavigation.d.ts

@@ -1,10 +0,0 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-export declare class PostMainnavigation {
-    /**
-     * Gets emitted when a user closes the main navigation on mobile
-     */
-    postToggle: EventEmitter;
-    handleMegadropdownToggled(event: any): void;
-    private handleBackButtonClick;
-    render(): any;
-}

package/dist/types/components/post-megadropdown/post-megadropdown.d.ts

@@ -1,23 +0,0 @@
-export declare class PostMegadropdown {
-    private popoverRef;
-    /**
-     * Show megadropdown
-     * @param element HTMLElement
-     * @returns boolean
-     */
-    show(element: HTMLElement): Promise<void>;
-    /**
-     * Hide megadropdown
-     * @returns boolean
-     */
-    hide(): Promise<void>;
-    /**
-     * Toggle megadropdown
-     * @param element HTMLElement
-     * @param force boolean
-     * @returns boolean
-     */
-    toggle(element: HTMLElement, force?: boolean): Promise<boolean>;
-    private handleBackButtonClick;
-    render(): any;
-}

package/dist/types/components/post-megadropdown-trigger/post-megadropdown-trigger.d.ts

@@ -1,10 +0,0 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-export declare class PostMegadropdownTrigger {
-    /**
-     * Emits after each toggle
-     */
-    postToggle: EventEmitter;
-    toggled: boolean;
-    private handleClick;
-    render(): any;
-}

package/dist/types/components/post-menu/post-menu.d.ts

@@ -1,47 +0,0 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-import { Placement } from '@floating-ui/dom';
-export declare class PostMenu {
-    private popoverRef;
-    private lastFocusedElement;
-    private readonly KEYCODES;
-    host: HTMLPostMenuElement;
-    /**
-     * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.
-     * Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted
-     * towards the viewport if they would overlap edge boundaries.
-     */
-    readonly placement?: Placement;
-    /**
-     * Holds the current visibility state of the menu.
-     * This state is internally managed to track whether the menu is open (`true`) or closed (`false`),
-     * and updates automatically when the menu is toggled.
-     */
-    isVisible: boolean;
-    /**
-     * Emits when the menu is shown or hidden.
-     * The event payload is a boolean: `true` when the menu was opened, `false` when it was closed.
-     **/
-    toggleMenu: EventEmitter<boolean>;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    componentDidLoad(): void;
-    /**
-     * Toggles the menu visibility based on its current state.
-     */
-    toggle(target: HTMLElement): Promise<void>;
-    /**
-     * Displays the popover menu, focusing the first menu item.
-     *
-     * @param target - The HTML element relative to which the popover menu should be displayed.
-     */
-    show(target: HTMLElement): Promise<void>;
-    /**
-     * Hides the popover menu and restores focus to the previously focused element.
-     */
-    hide(): Promise<void>;
-    private handleKeyDown;
-    private handleClick;
-    private controlKeyDownHandler;
-    private getSlottedItems;
-    render(): any;
-}

package/dist/types/components/post-menu-item/post-menu-item.d.ts

@@ -1,4 +0,0 @@
-export declare class PostMenuItem {
-    host: HTMLPostMenuItemElement;
-    render(): any;
-}

package/dist/types/components/post-menu-trigger/post-menu-trigger.d.ts

@@ -1,27 +0,0 @@
-export declare class PostMenuTrigger {
-    /**
-     * ID of the menu element that this trigger is linked to. Used to open and close the specified menu.
-     */
-    for: string;
-    host: HTMLPostMenuTriggerElement;
-    /**
-     * Manages the accessibility attribute `aria-expanded` to indicate whether the associated menu is expanded or collapsed.
-     */
-    ariaExpanded: boolean;
-    /**
-     * Reference to the slotted button within the trigger, if present.
-     * Used to manage click and key events for menu control.
-     */
-    private slottedButton;
-    private root?;
-    /**
-     * Watch for changes to the `for` property to validate its type and ensure it is a string.
-     * @param forValue - The new value of the `for` property.
-     */
-    validateControlFor(forValue?: string): void;
-    private get menu();
-    private handleToggle;
-    private handleKeyDown;
-    componentDidLoad(): void;
-    render(): any;
-}

package/dist/types/components/post-togglebutton/post-togglebutton.d.ts

@@ -1,13 +0,0 @@
-/**
- * @slot toggled - Slot for content displayed when the button is in the "on" state.
- * @slot untoggled - Slot for content displayed when the button is in the "off" state.
- */
-export declare class PostTogglebutton {
-    /**
-     * If `true`, the button is in the "on" state, otherwise it is in the "off" state.
-     */
-    toggled: boolean;
-    private handleClick;
-    private handleKeydown;
-    render(): any;
-}

package/dist/types/utils/is-focusable.d.ts

@@ -1 +0,0 @@
-export declare const isFocusable: (element: Element) => boolean;

package/loaders/attribute-observer.js

@@ -1,25 +0,0 @@
-const getAttributeObserver = (attribute, handler) => {
-    /**
-     * Handle attribute changes and childList changes from the observer
-     * @param {MutationRecord[]} mutationList
-     */
-    const observerHandler = (mutationList) => {
-        mutationList.forEach(mutation => {
-            if (mutation.type === 'attributes' && mutation.attributeName === attribute) {
-                handler(mutation.target);
-            }
-            if (mutation.type === 'childList') {
-                mutation.addedNodes.forEach(node => {
-                    if (node.nodeType === Node.ELEMENT_NODE &&
-                        node.hasAttribute(attribute)) {
-                        handler(node);
-                    }
-                });
-            }
-        });
-    };
-    // Initialize a mutation observer for patching accessibility features
-    return new MutationObserver(observerHandler);
-};
-
-export { getAttributeObserver as g };

package/loaders/get-root.js

@@ -1,9 +0,0 @@
-function getRoot(element) {
-    const root = element.getRootNode();
-    if (root instanceof Document || root instanceof ShadowRoot) {
-        return root;
-    }
-    throw new Error('Attempting to access root node before the element is attached to the document or shadow tree.');
-}
-
-export { getRoot as g };

package/loaders/post-avatar.js

@@ -1,176 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { c as checkNonEmpty } from './check-non-empty.js';
-
-const postAvatarCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */:host{--post-avatar-bg:var(--post-scheme-color-interactive-primary-enabled-bg2);--post-avatar-fg:var(--post-scheme-color-interactive-primary-enabled-fg3);display:inline-flex;position:relative;width:var(--post-device-sizing-interactive-icon-size3);height:var(--post-device-sizing-interactive-icon-size3);background-color:var(--post-scheme-color-interactive-primary-enabled-stroke3);border:var(--post-device-border-width-default) solid var(--post-scheme-color-interactive-primary-enabled-stroke3);border-radius:var(--post-device-border-radius-round);font-size:var(--post-device-font-size-8);vertical-align:top;line-height:1}:host::after{display:block;content:\"\";position:absolute;inset:0;z-index:1;border-radius:inherit}*,*::before,*::after{box-sizing:border-box}slot,img,::slotted(img){display:block;width:100%;height:100%}img,::slotted(img){border-radius:var(--post-device-border-radius-round)}::slotted(:not(img)){display:none !important}.initials{display:flex;justify-content:center;align-items:center;position:relative;z-index:2;width:100%;height:100%;background-color:var(--post-avatar-bg);border-radius:var(--post-device-border-radius-round);color:var(--post-avatar-fg);text-transform:uppercase}.initials span{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}.initials span:not(caption){position:absolute !important}";
-const PostAvatarStyle0 = postAvatarCss;
-
-// https://docs.gravatar.com/api/avatars/images/
-const GRAVATAR_DEFAULT = '404';
-const GRAVATAR_RATING = 'g';
-const GRAVATAR_SIZE = 80;
-const GRAVATAR_BASE_URL = `https://www.gravatar.com/avatar/{email}?s=${GRAVATAR_SIZE}&d=${GRAVATAR_DEFAULT}&r=${GRAVATAR_RATING}`;
-var AvatarType;
-(function (AvatarType) {
-    AvatarType["Slotted"] = "slotted";
-    AvatarType["Image"] = "image";
-    AvatarType["Initials"] = "initials";
-    AvatarType[AvatarType["Null"] = null] = "Null";
-})(AvatarType || (AvatarType = {}));
-const PostAvatar$1 = /*@__PURE__*/ proxyCustomElement(class PostAvatar extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.firstname = undefined;
-        this.lastname = undefined;
-        this.userid = undefined;
-        this.email = undefined;
-        this.slottedImage = undefined;
-        this.avatarType = null;
-        this.imageUrl = '';
-        this.imageAlt = '';
-        this.initials = '';
-    }
-    validateFirstname() {
-        checkNonEmpty(this.firstname, 'The `firstname` property of the `post-avatar` is required!');
-    }
-    async getAvatar() {
-        if (this.slottedImage !== null) {
-            this.avatarType = AvatarType.Slotted;
-        }
-        else {
-            let imageLoaded = false;
-            if (!imageLoaded && this.userid)
-                imageLoaded = await this.getImageByProp(this.userid, this.fetchImageByUserId.bind(this));
-            if (!imageLoaded && this.email)
-                imageLoaded = await this.getImageByProp(this.email, this.fetchImageByEmail.bind(this));
-            if (!imageLoaded)
-                this.getAvatarByInitials();
-        }
-    }
-    async getImageByProp(prop, fetchImage) {
-        var _a;
-        if (!prop)
-            return false;
-        const imageResponse = (_a = (await this.getStorageItem(prop))) !== null && _a !== void 0 ? _a : { ok: false, url: '' };
-        if (!imageResponse.ok) {
-            try {
-                const r = await fetchImage();
-                imageResponse.ok = r.ok;
-                imageResponse.url = r.url;
-                this.imageUrl = imageResponse.url;
-                this.imageAlt = `${this.firstname} ${this.lastname} avatar`;
-                this.avatarType = AvatarType.Image;
-                this.setStorageItem(this.userid, JSON.stringify(imageResponse));
-            }
-            catch (error) {
-                this.removeStorageItem(prop);
-                console.info(`Loading avatar by type "${AvatarType.Image}" failed.`);
-            }
-        }
-        return imageResponse.ok;
-    }
-    async fetchImageByUserId() {
-        return await fetch(PostAvatar.INTERNAL_USERID_IMAGE_SRC.replace('{userid}', encodeURIComponent(this.userid)));
-    }
-    async fetchImageByEmail() {
-        const email = await this.cryptify(this.email);
-        const imageUrl = GRAVATAR_BASE_URL.replace('{email}', email);
-        return await fetch(imageUrl);
-    }
-    getAvatarByInitials() {
-        this.initials = this.getInitials();
-        this.avatarType = AvatarType.Initials;
-    }
-    getNames() {
-        return [this.firstname, this.lastname].filter(n => n);
-    }
-    getInitials() {
-        return this.getNames()
-            .map(n => n.charAt(0))
-            .join('')
-            .trim();
-    }
-    async getStorageItem(keyToken) {
-        var _a;
-        const key = await this.cryptify(keyToken);
-        const value = (_a = window === null || window === void 0 ? void 0 : window.sessionStorage) === null || _a === void 0 ? void 0 : _a.getItem(key);
-        return value ? JSON.parse(value) : null;
-    }
-    async setStorageItem(keyToken, value) {
-        var _a;
-        const key = await this.cryptify(keyToken);
-        (_a = window === null || window === void 0 ? void 0 : window.sessionStorage) === null || _a === void 0 ? void 0 : _a.setItem(key, value);
-    }
-    async removeStorageItem(keyToken) {
-        var _a;
-        const key = await this.cryptify(keyToken);
-        (_a = window === null || window === void 0 ? void 0 : window.sessionStorage) === null || _a === void 0 ? void 0 : _a.removeItem(key);
-    }
-    async cryptify(key) {
-        return await crypto.subtle.digest('SHA-256', new TextEncoder().encode(key)).then(buffer => {
-            return Array.from(new Uint8Array(buffer))
-                .map(bytes => bytes.toString(16).padStart(2, '0'))
-                .join('');
-        });
-    }
-    onSlotDefaultChange() {
-        this.slottedImage = this.host.querySelector('img');
-        this.getAvatar();
-    }
-    componentWillRender() {
-        this.slottedImage = this.host.querySelector('img');
-        this.getAvatar();
-    }
-    componentDidLoad() {
-        this.validateFirstname();
-    }
-    render() {
-        const initials = this.getNames().reduce((acc, n, i) => {
-            if (i > 0)
-                acc.push(h("span", null, " "));
-            acc.push(n.charAt(0));
-            acc.push(h("span", null, n.slice(1)));
-            // eslint-disable-next-line @stencil-community/render-returns-host
-            return acc;
-        }, []);
-        return (h(Host, { "data-version": version }, h("slot", { onSlotchange: this.onSlotDefaultChange.bind(this) }, this.avatarType === 'image' && h("img", { src: this.imageUrl, alt: this.imageAlt }), this.avatarType === 'initials' && h("div", { class: "initials" }, initials))));
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "firstname": ["validateFirstname"]
-    }; }
-    static get style() { return PostAvatarStyle0; }
-}, [1, "post-avatar", {
-        "firstname": [1],
-        "lastname": [1],
-        "userid": [1],
-        "email": [1],
-        "slottedImage": [32],
-        "avatarType": [32],
-        "imageUrl": [32],
-        "imageAlt": [32],
-        "initials": [32]
-    }, undefined, {
-        "firstname": ["validateFirstname"]
-    }]);
-PostAvatar$1.INTERNAL_USERID_IMAGE_SRC = 'https://web.post.ch/UserProfileImage/{userid}.png';
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["post-avatar"];
-    components.forEach(tagName => { switch (tagName) {
-        case "post-avatar":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PostAvatar$1);
-            }
-            break;
-    } });
-}
-
-const PostAvatar = PostAvatar$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PostAvatar, defineCustomElement };

package/loaders/post-back-to-top.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../dist/types/components";
-
-interface PostBackToTop extends Components.PostBackToTop, HTMLElement {}
-export const PostBackToTop: {
-    prototype: PostBackToTop;
-    new (): PostBackToTop;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;