@swisspost/design-system-components 9.0.0-next.3 → 9.0.0-next.31

package/loaders/post-breadcrumb-item2.js

@@ -0,0 +1,82 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { v as version } from './package.js';
+import { e as checkEmptyOrUrl } from './index2.js';
+import { d as defineCustomElement$1 } from './post-icon2.js';
+
+const postBreadcrumbItemCss = ":host{display:flex;align-items:center;justify-content:start;gap:var(--post-device-spacing-gap-inline-5)}:host post-icon{box-sizing:border-box;height:var(--post-core-dimension-24);width:var(--post-core-dimension-24);padding-block:var(--post-core-dimension-4);padding-inline:var(--post-core-dimension-4)}.breadcrumb-item{white-space:nowrap;line-height:150%;padding-block:var(--post-device-spacing-padding-block-7);color:var(--post-scheme-color-interactive-primary-enabled-fg1);text-decoration:var(--post-core-text-decoration-none)}.breadcrumb-item{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}.breadcrumb-item: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){.breadcrumb-item:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.breadcrumb-item: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){.breadcrumb-item:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.breadcrumb-item:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1);text-decoration:var(--post-core-text-decoration-underline)}.breadcrumb-item:focus-visible{border-radius:var(--post-device-border-radius-focus)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.breadcrumb-item,.breadcrumb-item:focus,.breadcrumb-item:hover{color:LinkText !important}.breadcrumb-item:visited{color:VisitedText !important}}";
+const PostBreadcrumbItemStyle0 = postBreadcrumbItemCss;
+
+const PostBreadcrumbItem = /*@__PURE__*/ proxyCustomElement(class PostBreadcrumbItem extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.url = undefined;
+        this.fullUrl = undefined;
+    }
+    get host() { return this; }
+    validUrl;
+    validateUrl() {
+        try {
+            this.validUrl = this.constructUrl(this.url);
+        }
+        catch (error) {
+            this.validUrl = undefined;
+        }
+    }
+    // Helper to construct a valid URL string or return undefined
+    constructUrl(value) {
+        const hasBaseURL = /^https?:\/\//.test(String(this.url));
+        if (typeof value === 'string') {
+            this.fullUrl = hasBaseURL ? value : `${window.location.origin}${value}`;
+            checkEmptyOrUrl(this, 'fullUrl');
+            return this.fullUrl;
+        }
+        return undefined;
+    }
+    connectedCallback() {
+        this.validateUrl();
+    }
+    handleKeyDown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            const linkElement = this.host.shadowRoot?.querySelector('a');
+            if (linkElement) {
+                event.preventDefault();
+                linkElement.click();
+            }
+        }
+    }
+    render() {
+        const BreadcrumbTag = this.validUrl ? 'a' : 'span';
+        return (h(Host, { key: 'd0444118aa031f4cf6f5161d7aa21900e9768348', "data-version": version }, h("post-icon", { key: '719a76e6e86bbb02526c4610acefb3ad253454af', name: "2111", class: "breadcrumb-item-icon" }), h(BreadcrumbTag, { key: '3f5ffb9c77567dba35efa7938029cd519de55474', class: "breadcrumb-item", ...(this.validUrl ? { href: this.validUrl } : {}), onKeyDown: event => this.handleKeyDown(event) }, h("slot", { key: 'bb1be29905c1533f2238a47a346fb35d6a7645fd' }))));
+    }
+    static get watchers() { return {
+        "url": ["validateUrl"]
+    }; }
+    static get style() { return PostBreadcrumbItemStyle0; }
+}, [1, "post-breadcrumb-item", {
+        "url": [1],
+        "fullUrl": [32]
+    }, undefined, {
+        "url": ["validateUrl"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-breadcrumb-item", "post-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-breadcrumb-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostBreadcrumbItem);
+            }
+            break;
+        case "post-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { PostBreadcrumbItem as P, defineCustomElement as d };

package/loaders/post-breadcrumb.d.ts

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

package/loaders/post-breadcrumb.js

@@ -0,0 +1,172 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { v as version } from './package.js';
+import { d as checkUrl } from './index2.js';
+import { d as debounce } from './debounce.js';
+import { d as defineCustomElement$7 } from './post-breadcrumb-item2.js';
+import { d as defineCustomElement$6 } from './post-icon2.js';
+import { d as defineCustomElement$5 } from './post-menu2.js';
+import { d as defineCustomElement$4 } from './post-menu-item2.js';
+import { d as defineCustomElement$3 } from './post-menu-trigger2.js';
+import { d as defineCustomElement$2 } from './post-popovercontainer2.js';
+
+const postBreadcrumbCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */:host{display:flex;align-items:center}.breadcrumbs-nav{display:flex;align-items:center}.hidden-items{gap:var(--post-device-spacing-gap-inline-4);position:absolute;height:0;overflow:hidden;white-space:nowrap}.breadcrumbs-list{display:flex;flex-wrap:nowrap;position:relative;margin:0;padding:0;list-style:none;align-items:center;height:100%;gap:var(--post-device-spacing-gap-inline-4)}post-icon{display:inline-block;box-sizing:border-box;color:var(--post-scheme-color-interactive-primary-enabled-fg1);height:var(--post-core-dimension-24);width:var(--post-core-dimension-24)}.breadcrumb-item-icon{padding-block:var(--post-core-dimension-4);padding-inline:var(--post-core-dimension-4)}li a{display:flex;align-items:center}li a{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}li a: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){li a:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){li a: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){li a:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}li a:focus{border-radius:var(--post-device-border-radius-focus)}li a .home-icon{padding-block:var(--post-device-spacing-padding-4);padding-inline:var(--post-device-spacing-padding-4)}li a .home-icon:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){li a .home-icon a,li a .home-icon:focus,li a .home-icon:hover{color:CanvasText !important}}.menu-trigger-wrapper{display:flex;align-items:center;gap:var(--post-device-spacing-gap-inline-5)}.actual-menu{display:flex;align-items:center}post-menu-trigger{display:flex;align-items:center;padding-block:var(--post-device-spacing-padding-block-7)}post-menu-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-menu-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-menu-trigger:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){post-menu-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-menu-trigger:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}post-menu-trigger:focus{border-radius:var(--post-device-border-radius-focus)}post-menu-trigger button{background:none;border:none;line-height:150%;font-size:var(--post-device-font-size-6);cursor:pointer;padding:0;color:var(--post-scheme-color-interactive-primary-enabled-fg1)}post-menu-trigger button:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-menu-trigger button a,post-menu-trigger button:focus,post-menu-trigger button:hover{color:LinkText !important}}post-menu::part(popover-container){display:flex;flex-direction:column;align-items:start;padding:.6rem;gap:var(--post-device-spacing-gap-inline-4)}post-menu::part(popover-container) ::slotted(post-menu-item:not(:last-child)){margin-block-end:var(--post-device-spacing-gap-inline-4)}.breadcrumb-item{display:flex;align-items:center;justify-content:center;gap:var(--post-device-spacing-gap-inline-5)}.breadcrumb-item a{text-decoration:none;color:var(--post-scheme-color-surface-default-fg);line-height:150%;padding-block:var(--post-device-spacing-padding-block-7);font-size:var(--post-device-font-size-6)}.breadcrumb-item a{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}.breadcrumb-item a: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){.breadcrumb-item a:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.breadcrumb-item a: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){.breadcrumb-item a:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.breadcrumb-item a:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1);text-decoration:var(--post-core-text-decoration-underline)}.breadcrumb-item a:focus-visible{border-radius:var(--post-device-border-radius-focus)}.breadcrumb-item span:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1);text-decoration:var(--post-core-text-decoration-underline)}.breadcrumb-item span:focus-visible{border-radius:var(--post-device-border-radius-focus)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.breadcrumb-item a,.breadcrumb-item:focus,.breadcrumb-item:hover{color:LinkText !important}.breadcrumb-item:visited{color:VisitedText !important}}post-breadcrumb-item:last-of-type{pointer-events:none;color:var(--post-scheme-color-interactive-primary-selected-fg1);font-weight:var(--post-device-font-weight-bold);text-decoration:var(--post-core-text-decoration-none)}post-breadcrumb-item:last-of-type:hover{color:var(--post-scheme-color-interactive-primary-selected-fg1);text-decoration:none}.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}.visually-hidden:not(caption){position:absolute !important}";
+const PostBreadcrumbStyle0 = postBreadcrumbCss;
+
+const PostBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class PostBreadcrumb extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.homeUrl = undefined;
+        this.homeText = 'Home';
+        this.breadcrumbItems = [];
+        this.isConcatenated = undefined;
+        this.lastWindowWidth = undefined;
+    }
+    get host() { return this; }
+    breadcrumbNavRef;
+    lastItem;
+    validateUrl() {
+        checkUrl(this, 'homeUrl');
+    }
+    componentWillLoad() {
+        this.updateBreadcrumbItems();
+    }
+    componentDidLoad() {
+        window.addEventListener('resize', this.handleResize);
+        this.waitForBreadcrumbRef();
+    }
+    disconnectedCallback() {
+        window.removeEventListener('resize', this.handleResize);
+    }
+    // Waits for breadcrumb navigation reference to be available
+    waitForBreadcrumbRef = debounce(() => {
+        if (this.breadcrumbNavRef?.clientWidth > 0) {
+            this.checkConcatenation();
+        }
+        else {
+            this.waitForBreadcrumbRef();
+        }
+    }, 50);
+    // Updates breadcrumb items and sets the last item
+    updateBreadcrumbItems() {
+        this.breadcrumbItems = Array.from(this.host.querySelectorAll('post-breadcrumb-item')).map(item => ({
+            text: item.textContent || '',
+            url: item.getAttribute('url') || '',
+        }));
+        this.lastItem = this.breadcrumbItems[this.breadcrumbItems.length - 1];
+    }
+    // Handles resizing to check concatenation
+    handleResize = () => {
+        if (window.innerWidth === this.lastWindowWidth)
+            return;
+        this.lastWindowWidth = window.innerWidth;
+        this.checkConcatenation();
+    };
+    // Determines parent width for concatenation logic
+    getParentWidth() {
+        let parent = this.host.parentNode;
+        while (parent && !(parent instanceof HTMLElement)) {
+            parent = parent.parentNode;
+        }
+        return parent instanceof HTMLElement ? parent.clientWidth : window.innerWidth;
+    }
+    checkConcatenation() {
+        if (!this.breadcrumbNavRef)
+            return;
+        const visibleWidth = this.getParentWidth();
+        // Measure all hidden breadcrumb items
+        const hiddenItems = Array.from(this.host.shadowRoot?.querySelectorAll('.hidden-breadcrumb-item') || []);
+        const totalWidth = hiddenItems.reduce((accum, element) => {
+            const rect = element.getBoundingClientRect();
+            return accum + rect.width;
+        }, 0);
+        this.isConcatenated = totalWidth > visibleWidth;
+    }
+    // Handles breadcrumb item click to open the menu
+    handleBreadcrumbItemClick() {
+        if (this.host.shadowRoot) {
+            const menuTrigger = this.host.shadowRoot
+                ?.querySelector('.menu-trigger-wrapper')
+                ?.querySelector('button');
+            if (menuTrigger) {
+                menuTrigger.click();
+            }
+        }
+    }
+    render() {
+        const visibleItems = this.breadcrumbItems.slice(0, -1);
+        return (h(Host, { key: 'd2fd5b6f8319124fa17649c8c5e479e727fc069a', "data-version": version }, h("nav", { key: 'a5f9b38fa054ad46d8972c28d175f864bed3c365', "aria-label": "Breadcrumb", class: "breadcrumbs-nav", ref: el => (this.breadcrumbNavRef = el) }, h("ol", { key: 'ac7ca9a80315ce6ba70e1aaaae6202fbb1a6933e', class: "no-list breadcrumbs-list" }, h("li", { key: '9927b293673f16bbe837419baf7d4a8f97885bc0' }, h("a", { key: '2b2de9924472a3da00f843c7b569358b60d43539', href: this.homeUrl, class: "breadcrumb-link" }, h("span", { key: '540a16d9673e9c423493597468a3db00b7d75cef', class: "visually-hidden" }, this.homeText), h("post-icon", { key: '73fad27cd72f18bb5ea281c88ff2c184d7d8187d', name: "home", class: "home-icon" }))), this.isConcatenated ? (h("div", { class: "menu-trigger-wrapper", "aria-label": "More breadcrumbs", onKeyDown: e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    this.handleBreadcrumbItemClick();
+                }
+            } }, h("post-icon", { name: "2111", class: "breadcrumb-item-icon" }), h("div", { class: "actual-menu" }, h("post-menu-trigger", { for: "breadcrumb-menu", tabIndex: 0 }, h("button", { class: "btn test", tabIndex: -1 }, "...")), h("post-menu", { id: "breadcrumb-menu" }, visibleItems.map(item => (h("post-menu-item", { key: item.url || item.text, class: "breadcrumb-item", onKeyDown: e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    const linkElement = e.currentTarget.querySelector('a');
+                    linkElement?.click();
+                    e.preventDefault();
+                }
+            } }, item.url ? h("a", { href: item.url }, item.text) : h("span", null, item.text)))))))) : (visibleItems.map(item => (h("post-breadcrumb-item", { url: item.url, key: item.url || item.text }, item.text)))), this.lastItem && (h("post-breadcrumb-item", { key: '31d86d933720b5f6f6928ccfd251443261e9479e', url: this.lastItem.url, "aria-current": "page", tabindex: -1 }, this.lastItem.text))), h("div", { key: '3248d32aa6a73c97c3071be85174fb8634d4e722', class: "hidden-items" }, h("a", { key: '05b0231d3a5793588aa9ede628a7b1e6d2e2faf0', href: this.homeUrl, class: "hidden-breadcrumb-item" }, h("span", { key: '15a63a894124717cfb2be61779c3971772c38397', class: "visually-hidden" }, this.homeText), h("post-icon", { key: '6c893c56b6a34f311fa66d71c4cb523b00535458', name: "home", class: "home-icon" })), this.breadcrumbItems.map(item => (h("post-breadcrumb-item", { url: item.url, key: `hidden-${item.url || item.text}`, class: "hidden-breadcrumb-item" }, item.text)))))));
+    }
+    static get watchers() { return {
+        "homeUrl": ["validateUrl"]
+    }; }
+    static get style() { return PostBreadcrumbStyle0; }
+}, [1, "post-breadcrumb", {
+        "homeUrl": [1, "home-url"],
+        "homeText": [1, "home-text"],
+        "breadcrumbItems": [32],
+        "isConcatenated": [32],
+        "lastWindowWidth": [32]
+    }, undefined, {
+        "homeUrl": ["validateUrl"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-breadcrumb", "post-breadcrumb-item", "post-icon", "post-menu", "post-menu-item", "post-menu-trigger", "post-popovercontainer"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-breadcrumb":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostBreadcrumb$1);
+            }
+            break;
+        case "post-breadcrumb-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "post-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "post-menu":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "post-menu-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "post-menu-trigger":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "post-popovercontainer":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const PostBreadcrumb = PostBreadcrumb$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostBreadcrumb, defineCustomElement };