@swisspost/design-system-components 10.0.0-next.46 → 10.0.0-next.48

package/dist/components/react/post-tabs.js

@@ -0,0 +1,197 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+import { v as version } from './p-0Ltezq5O.js';
+import { f as fadeOut, a as fadeIn } from './p-SbIC4aZX.js';
+import './p-CJ80BZ06.js';
+
+/**
+ * Invoke the `componentOnReady` method if it is available, simulate it otherwise
+ * @see https://stenciljs.com/docs/api#componentonready
+ */
+function componentOnReady(el) {
+    if (typeof el.componentOnReady === 'function') {
+        return el.componentOnReady();
+    }
+    else {
+        return new Promise(resolve => customOnReady(() => {
+            resolve(el);
+        }));
+    }
+}
+function customOnReady(callback) {
+    if (typeof requestAnimationFrame === 'function') {
+        return requestAnimationFrame(callback);
+    }
+    return setTimeout(callback);
+}
+
+const postTabsCss = ".tabs-wrapper{position:relative;padding-top:1rem;border:0;background-color:rgba(0,0,0,.02)}.tabs-wrapper::after{content:\"\";position:absolute;bottom:0;width:100%;height:1px;background-color:#ccc}.tabs-wrapper .tabs{background-color:rgba(0,0,0,0) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tabs-wrapper::after{background-color:ButtonBorder}}.tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;white-space:nowrap;margin-block:0;padding-inline-start:0;list-style:none}.tabs::after{content:\"\";display:block;flex:1 0 auto;width:1rem}.tab-content{padding-top:1rem}:host{display:block}:host([full-width=true]) .tabs-wrapper{margin-inline:calc(-1*var(--post-container-offset))}:host([full-width=true]) .tabs-wrapper .tabs{padding-inline:var(--post-container-offset)}";
+
+const PostTabs$1 = /*@__PURE__*/ proxyCustomElement(class PostTabs extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.postChange = createEvent(this, "postChange");
+        this.isLoaded = false;
+        /**
+         * When set to true, this property allows the tabs container to span the
+         * full width of the screen, from edge to edge.
+         */
+        this.fullWidth = false;
+    }
+    get tabs() {
+        return Array.from(this.host.querySelectorAll('post-tab-header')).filter(tab => tab.closest('post-tabs') === this.host);
+    }
+    componentDidLoad() {
+        this.moveMisplacedTabs();
+        this.enableTabs();
+        const initiallyActivePanel = this.activePanel || this.tabs[0]?.panel;
+        void this.show(initiallyActivePanel);
+        this.isLoaded = true;
+    }
+    /**
+     * Shows the panel with the given name and selects its associated tab.
+     * Any other panel that was previously shown becomes hidden and its associated tab is unselected.
+     */
+    async show(panelName) {
+        // do nothing if the tab is already active
+        if (panelName === this.activeTab?.panel) {
+            return;
+        }
+        const previousTab = this.activeTab;
+        const newTab = this.host.querySelector(`post-tab-header[panel=${panelName}]`);
+        this.activateTab(newTab);
+        // if a panel is currently being displayed, remove it from the view and complete the associated animation
+        if (this.showing) {
+            this.showing.effect['target'].style.display = 'none';
+            this.showing.finish();
+        }
+        // hide the currently visible panel only if no other animation is running
+        if (previousTab && !this.showing && !this.hiding)
+            this.hidePanel(previousTab.panel);
+        // wait for any hiding animation to complete before showing the selected tab
+        if (this.hiding)
+            await this.hiding.finished;
+        this.showSelectedPanel();
+        // wait for any display animation to complete for the returned promise to fully resolve
+        if (this.showing)
+            await this.showing.finished;
+        if (this.isLoaded)
+            this.postChange.emit(this.activeTab.panel);
+    }
+    moveMisplacedTabs() {
+        if (!this.tabs)
+            return;
+        this.tabs.forEach(tab => {
+            if (tab.getAttribute('slot') === 'tabs')
+                return;
+            tab.setAttribute('slot', 'tabs');
+        });
+    }
+    enableTabs() {
+        if (!this.tabs)
+            return;
+        this.tabs.forEach(async (tab) => {
+            await componentOnReady(tab);
+            // if the tab has an "aria-controls" attribute it was already linked to its panel: do nothing
+            if (tab.getAttribute('aria-controls'))
+                return;
+            const tabPanel = this.getPanel(tab.panel);
+            tab.setAttribute('aria-controls', tabPanel.id);
+            tabPanel.setAttribute('aria-labelledby', tab.id);
+            tab.addEventListener('click', () => {
+                void this.show(tab.panel);
+            });
+            tab.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    void this.show(tab.panel);
+                }
+            });
+            tab.addEventListener('keydown', (e) => {
+                if (e.key === 'ArrowRight' || e.key === 'ArrowLeft')
+                    this.navigateTabs(tab, e.key);
+            });
+        });
+        // if the currently active tab was removed from the DOM then select the first one
+        if (this.activeTab && !this.activeTab.isConnected) {
+            void this.show(this.tabs[0]?.panel);
+        }
+    }
+    activateTab(tab) {
+        if (this.activeTab) {
+            this.activeTab.setAttribute('aria-selected', 'false');
+            this.activeTab.setAttribute('tabindex', '-1');
+            this.activeTab.classList.remove('active');
+        }
+        tab.setAttribute('aria-selected', 'true');
+        tab.setAttribute('tabindex', '0');
+        tab.classList.add('active');
+        this.activeTab = tab;
+    }
+    hidePanel(panelName) {
+        const previousPanel = this.getPanel(panelName);
+        if (!previousPanel)
+            return;
+        this.hiding = fadeOut(previousPanel);
+        this.hiding.onfinish = () => {
+            previousPanel.style.display = 'none';
+            this.hiding = null;
+        };
+    }
+    showSelectedPanel() {
+        const panel = this.getPanel(this.activeTab.panel);
+        panel.style.display = 'block';
+        // prevent the initially selected panel from fading in
+        if (!this.isLoaded)
+            return;
+        this.showing = fadeIn(panel);
+        this.showing.onfinish = () => {
+            this.showing = null;
+        };
+    }
+    getPanel(name) {
+        return this.host.querySelector(`post-tab-panel[name=${name}]`);
+    }
+    navigateTabs(tab, key) {
+        const activeTabIndex = Array.from(this.tabs).indexOf(tab);
+        let nextTab;
+        if (key === 'ArrowRight') {
+            nextTab = this.tabs[activeTabIndex + 1] || this.tabs[0];
+        }
+        else {
+            nextTab = this.tabs[activeTabIndex - 1] || this.tabs[this.tabs.length - 1];
+        }
+        if (!nextTab)
+            return;
+        nextTab.focus();
+    }
+    render() {
+        return (h(Host, { key: 'dc7228c840d65e3546e0d13e5bcaa78819b5aeb9', "data-version": version }, h("div", { key: '377d592f7c00f3ec0c7aba2a4a8ca2b88cd37927', class: "tabs-wrapper", part: "tabs" }, h("div", { key: '6e79f33d6cd82d55ba9fad2f09f6163ce7e0a372', class: "tabs", role: "tablist" }, h("slot", { key: '65fbf3cb6525f2f2ae97eb60dad313811db4c585', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: '675a59a27e79bad06ea2b70c4fc7b0a6f4b020ff', class: "tab-content", part: "content" }, h("slot", { key: 'b559af0fa652e352673fbabb6829a62a5630e809', onSlotchange: () => this.moveMisplacedTabs() }))));
+    }
+    get host() { return this; }
+    static get style() { return postTabsCss; }
+}, [1, "post-tabs", {
+        "activePanel": [1, "active-panel"],
+        "fullWidth": [516, "full-width"],
+        "show": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-tabs"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-tabs":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostTabs$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const PostTabs = PostTabs$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostTabs, defineCustomElement };

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

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

package/dist/components/react/post-togglebutton.js

@@ -0,0 +1,57 @@
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { v as version } from './p-0Ltezq5O.js';
+
+const postTogglebuttonCss = ":host{cursor:pointer;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}:host(:focus-visible){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(:focus-visible){outline-color:Highlight !important}}:host([aria-pressed=true]) ::slotted([data-showwhen=untoggled]){display:none}:host([aria-pressed=false]) ::slotted([data-showwhen=toggled]){display:none}";
+
+const PostTogglebutton$1 = /*@__PURE__*/ proxyCustomElement(class PostTogglebutton extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /**
+         * If `true`, the button is in the "on" state, otherwise it is in the "off" state.
+         */
+        this.toggled = false;
+        this.handleClick = () => {
+            this.toggled = !this.toggled;
+        };
+        this.handleKeydown = (event) => {
+            // perform a click when enter or spaced are pressed to mimic the button behavior
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault(); // prevents the page from scrolling when space is pressed
+                this.host.click();
+            }
+        };
+    }
+    componentWillLoad() {
+        // add event listener to not override listener that might be set on the host
+        this.host.addEventListener('click', () => this.handleClick());
+        this.host.addEventListener('keydown', (e) => this.handleKeydown(e));
+    }
+    render() {
+        return (h(Host, { key: '1cebe1d1314e2c89f141869e07521e7f30e58617', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: '8b8c33befde8e93eca73a6239170c3786e2cf2f2' })));
+    }
+    get host() { return this; }
+    static get style() { return postTogglebuttonCss; }
+}, [1, "post-togglebutton", {
+        "toggled": [1028]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-togglebutton"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-togglebutton":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostTogglebutton$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const PostTogglebutton = PostTogglebutton$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostTogglebutton, defineCustomElement };

package/dist/components/react/post-tooltip-trigger.d.ts

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