@swisspost/design-system-components 10.0.0-next.40 → 10.0.0-next.42

package/dist/esm/post-tab-panel-c19b5e30.js

@@ -1,34 +0,0 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-f4d19816.js';
-import { v as version } from './package-9374eb90.js';
-import { n as nanoid } from './index.browser-ff103197.js';
-import { b as checkRequiredAndType } from './index-ffccd040.js';
-import './breakpoints-7812702e.js';
-
-const postTabPanelCss = ":host{display:none}";
-const PostTabPanelStyle0 = postTabPanelCss;
-
-const PostTabPanel = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.panelId = undefined;
-        this.name = undefined;
-    }
-    validateName() {
-        checkRequiredAndType(this, 'name', 'string');
-    }
-    componentWillLoad() {
-        this.validateName();
-        // get the id set on the host element or use a random id by default
-        this.panelId = `panel-${this.host.id || nanoid(6)}`;
-    }
-    render() {
-        return (h(Host, { key: '366d1b6074bf4212e7fc56500680ed12d8d83599', "data-version": version, id: this.panelId, role: "tabpanel" }, h("slot", { key: '940f8dcf9e1302dfdd1c859e356799a2f2c7fe54' })));
-    }
-    get host() { return getElement(this); }
-    static get watchers() { return {
-        "name": ["validateName"]
-    }; }
-};
-PostTabPanel.style = PostTabPanelStyle0;
-
-export { PostTabPanel as P };

package/dist/esm/post-tabs-0dadedf2.js

@@ -1,171 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-f4d19816.js';
-import { v as version } from './package-9374eb90.js';
-import { f as fadeOut, a as fadeIn } from './fade-1f3cacf4.js';
-import './breakpoints-7812702e.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}";
-const PostTabsStyle0 = postTabsCss;
-
-const PostTabs = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.postChange = createEvent(this, "postChange", 7);
-        this.isLoaded = false;
-        this.activePanel = undefined;
-    }
-    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: '621652f2abeb8162e2d67261c57000a9d6e7b4ca', "data-version": version }, h("div", { key: '9cf2693b826588d3f099d30157886f70c34aa8b7', class: "tabs-wrapper", part: "tabs" }, h("div", { key: '4d4a0f242a30ec484c4557880b4c184b47d74612', class: "tabs", role: "tablist" }, h("slot", { key: '44df627213090710a6171fae2b1b8698e1f68fa5', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: 'ec23dfe409569899a3b95cf3e2cd6fe2deae8c9b', class: "tab-content", part: "content" }, h("slot", { key: '16374ab8fae907d5d2c7229069dd7511f118c3ac', onSlotchange: () => this.moveMisplacedTabs() }))));
-    }
-    get host() { return getElement(this); }
-};
-PostTabs.style = PostTabsStyle0;
-
-export { PostTabs as P };

package/dist/esm/post-tag-b8be3b0c.js

@@ -1,58 +0,0 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-f4d19816.js';
-import { v as version } from './package-9374eb90.js';
-import { a as checkEmptyOrOneOf, d as checkEmptyOrType } from './index-ffccd040.js';
-import './breakpoints-7812702e.js';
-
-const postTagCss = "@keyframes popIn{from{transform:scale(0.9);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--post-transition-duration, 0.35s);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}to{opacity:1;transform:scale(1)}}.tag,.tag:where(:has(:not(pre))){--post-tag-bg:hsl(0, 0%, 90%);--post-tag-fg:#000;display:inline-flex;align-items:center;gap:var(--post-core-dimension-4);padding:0 var(--post-core-dimension-8);max-width:100%;background-color:var(--post-tag-bg);border:var(--post-core-dimension-1) solid rgba(0,0,0,0);border-radius:var(--post-core-dimension-4);font-size:1rem;line-height:calc(var(--post-core-dimension-32) - var(--post-core-dimension-1)*2);white-space:nowrap;color:var(--post-tag-fg)}.tag post-icon,.tag:where(:has(:not(pre))) post-icon{flex:0 0 auto;width:1.25rem;height:1.25rem}.tag .tag-text,.tag:where(:has(:not(pre))) .tag-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tag .tag-text svg,.tag .tag-text img,.tag:where(:has(:not(pre))) .tag-text svg,.tag:where(:has(:not(pre))) .tag-text img{display:inline-block;height:1.25rem !important;vertical-align:text-top}.tag.tag-sm,.tag:where(:has(:not(pre))).tag-sm{line-height:var(--post-core-dimension-24)}.tag.tag-sm .tag-icon,.tag:where(:has(:not(pre))).tag-sm .tag-icon{width:1rem;height:1rem}.tag.tag-white,.tag:where(:has(:not(pre))).tag-white{--post-tag-bg:#fff;--post-tag-fg:#000}.tag.tag-yellow,.tag:where(:has(:not(pre))).tag-yellow{--post-tag-bg:#fc0;--post-tag-fg:#000}.tag.tag-success,.tag:where(:has(:not(pre))).tag-success{--post-tag-bg:#2c871d;--post-tag-fg:#fff}.tag.tag-warning,.tag:where(:has(:not(pre))).tag-warning{--post-tag-bg:#f49e00;--post-tag-fg:#000}.tag.tag-danger,.tag:where(:has(:not(pre))).tag-danger{--post-tag-bg:#a51728;--post-tag-fg:#fff}.tag.tag-info,.tag:where(:has(:not(pre))).tag-info{--post-tag-bg:#cce4ee;--post-tag-fg:#000}.tag.tag-white,.tag:where(:has(:not(pre))).tag-white{border-color:#000}pre .tag,pre .tag:where(:has(:not(pre))){display:inline;padding:initial;max-width:initial;background:initial;border:initial;border-radius:initial;font-size:inherit;line-height:inherit;white-space:unset}*,*:before,*:after{box-sizing:border-box}.tag-text ::slotted(svg),.tag-text ::slotted(img){display:inline-block !important;height:1.25rem !important;vertical-align:text-top !important}";
-const PostTagStyle0 = postTagCss;
-
-const PostTag = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.classes = undefined;
-        this.variant = undefined;
-        this.size = undefined;
-        this.icon = undefined;
-        this.setClasses = this.setClasses.bind(this);
-    }
-    variantChanged() {
-        checkEmptyOrOneOf(this, 'variant', ['white', 'info', 'success', 'error', 'warning', 'yellow']);
-        this.setClasses();
-    }
-    sizeChanged() {
-        checkEmptyOrOneOf(this, 'size', ['sm']);
-        this.setClasses();
-    }
-    validateName() {
-        checkEmptyOrType(this, 'icon', 'string');
-    }
-    setClasses() {
-        this.classes = [
-            'tag',
-            this.size ? `tag-${this.size}` : null,
-            this.variant ? `tag-${this.variant}` : null,
-        ]
-            .filter(c => c !== null)
-            .join(' ');
-    }
-    componentWillLoad() {
-        this.validateName();
-        this.variantChanged();
-        this.sizeChanged();
-    }
-    connectedCallback() {
-        this.setClasses();
-    }
-    render() {
-        return (h(Host, { key: '42743d0a7f87680223eef33ff9295827f3c80d4c', "data-version": version }, h("div", { key: '392ad72b23f638d7fdefe7acb20f45c9dcf2d630', class: this.classes }, this.icon ? h("post-icon", { name: this.icon }) : null, h("div", { key: '71b7dc696dd392dc9b195b363cd79a1fc0e0a708', class: "tag-text" }, h("slot", { key: '91610aff7550df9891fb617d2d9e5bcbcffbe256' })))));
-    }
-    get host() { return getElement(this); }
-    static get watchers() { return {
-        "variant": ["variantChanged"],
-        "size": ["sizeChanged"],
-        "icon": ["validateName"]
-    }; }
-};
-PostTag.style = PostTagStyle0;
-
-export { PostTag as P };