@swisspost/design-system-components 9.0.0-next.12 → 9.0.0-next.14

package/dist/cjs/{post-tabs-ea94b243.js → post-tabs-b6fa39c3.js}

@@ -1,14 +1,14 @@
 'use strict';
 
-const index = require('./index-f1b08cdb.js');
-const _package = require('./package-0bd6fb0d.js');
-const fade = require('./fade-35a3633a.js');
+const index = require('./index-0ee3ab4a.js');
+const _package = require('./package-7d11b6ea.js');
+const fade = require('./fade-72d5ef55.js');
 
 /**
  * Invoke the `componentOnReady` method if it is available, simulate it otherwise
  * @see https://stenciljs.com/docs/api#componentonready
  */
-const componentOnReady = (el) => {
+function componentOnReady(el) {
     if (typeof el.componentOnReady === 'function') {
         return el.componentOnReady();
     }
@@ -17,32 +17,46 @@ const componentOnReady = (el) => {
             resolve(el);
         }));
     }
-};
-const customOnReady = (callback) => {
+}
+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(var(--post-contrast-color-rgb), 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 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) {
         index.registerInstance(this, hostRef);
         this.postChange = index.createEvent(this, "postChange", 7);
-        this.isLoaded = false;
-        this.activePanel = undefined;
     }
+    activeTab;
+    showing;
+    hiding;
+    isLoaded = false;
     get tabs() {
         return Array.from(this.host.querySelectorAll('post-tab-header')).filter(tab => tab.closest('post-tabs') === this.host);
     }
+    get host() { return index.getElement(this); }
+    /**
+     * The name of the panel that is initially shown.
+     * If not specified, it defaults to the panel associated with the first tab.
+     *
+     * **Changing this value after initialization has no effect.**
+     */
+    activePanel;
+    /**
+     * An event emitted after the active tab changes, when the fade in transition of its associated panel is finished.
+     * The payload is the name of the newly shown panel.
+     */
+    postChange;
     componentDidLoad() {
-        var _a;
         this.moveMisplacedTabs();
         this.enableTabs();
-        const initiallyActivePanel = this.activePanel || ((_a = this.tabs[0]) === null || _a === void 0 ? void 0 : _a.panel);
+        const initiallyActivePanel = this.activePanel || this.tabs[0]?.panel;
         void this.show(initiallyActivePanel);
         this.isLoaded = true;
     }
@@ -51,9 +65,8 @@ const PostTabs = class {
      * Any other panel that was previously shown becomes hidden and its associated tab is unselected.
      */
     async show(panelName) {
-        var _a;
         // do nothing if the tab is already active
-        if (panelName === ((_a = this.activeTab) === null || _a === void 0 ? void 0 : _a.panel)) {
+        if (panelName === this.activeTab?.panel) {
             return;
         }
         const previousTab = this.activeTab;
@@ -87,7 +100,6 @@ const PostTabs = class {
         });
     }
     enableTabs() {
-        var _a;
         if (!this.tabs)
             return;
         this.tabs.forEach(async (tab) => {
@@ -114,7 +126,7 @@ const PostTabs = class {
         });
         // if the currently active tab was removed from the DOM then select the first one
         if (this.activeTab && !this.activeTab.isConnected) {
-            void this.show((_a = this.tabs[0]) === null || _a === void 0 ? void 0 : _a.panel);
+            void this.show(this.tabs[0]?.panel);
         }
     }
     activateTab(tab) {
@@ -166,9 +178,8 @@ const PostTabs = class {
         nextTab.focus();
     }
     render() {
-        return (index.h(index.Host, { key: '27b5f90f8b6d8f0d3688b3c965fa666df5f8edab', "data-version": _package.version }, index.h("div", { key: '4d811e26c2bed4abc63e89517dca0f6fd9f701c3', class: "tabs-wrapper", part: "tabs" }, index.h("div", { key: 'd740301189c1335c3d76520d6a5bfe3e75789d4a', class: "tabs", role: "tablist" }, index.h("slot", { key: '9b3dc7e7d05b8577dfb480d684cf423a8adc2a23', name: "tabs", onSlotchange: () => this.enableTabs() }))), index.h("div", { key: 'fe219c0eaad3c67bea5a47f0690a8bdda0c739aa', class: "tab-content", part: "content" }, index.h("slot", { key: '80d8eb9fe9292e4c2486fded48928ffc9c5219bf', onSlotchange: () => this.moveMisplacedTabs() }))));
+        return (index.h(index.Host, { key: '7c81cd091603a01d960ecc2aed9653d0031dd16e', "data-version": _package.version }, index.h("div", { key: '716a9f1e05a7ffeca8459e6a88ce4b56364b50ec', class: "tabs-wrapper", part: "tabs" }, index.h("div", { key: 'b41b35b26e0e1ef1e285719975841aefbdc4a8e1', class: "tabs", role: "tablist" }, index.h("slot", { key: '065b3a6ecfba2710a344b44cc6d5e73beb0655df', name: "tabs", onSlotchange: () => this.enableTabs() }))), index.h("div", { key: 'f30ce2c568071c8f144ba50e62b48a1294207c63', class: "tab-content", part: "content" }, index.h("slot", { key: 'c71155abdf95343990b2ee85592e7a995f58d05e', onSlotchange: () => this.moveMisplacedTabs() }))));
     }
-    get host() { return index.getElement(this); }
 };
 PostTabs.style = PostTabsStyle0;
 

package/dist/cjs/post-tabs.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const postTabs = require('./post-tabs-ea94b243.js');
-require('./index-f1b08cdb.js');
-require('./package-0bd6fb0d.js');
-require('./fade-35a3633a.js');
+const postTabs = require('./post-tabs-b6fa39c3.js');
+require('./index-0ee3ab4a.js');
+require('./package-7d11b6ea.js');
+require('./fade-72d5ef55.js');
 
 
 

package/dist/cjs/{post-tag-1d75024b.js → post-tag-9c366519.js}

@@ -1,18 +1,30 @@
 'use strict';
 
-const index = require('./index-f1b08cdb.js');
-const _package = require('./package-0bd6fb0d.js');
+const index = require('./index-0ee3ab4a.js');
+const _package = require('./package-7d11b6ea.js');
 
-const postTagCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */.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:var(--post-contrast-color)}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 postTagCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */.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 {
+    get host() { return index.getElement(this); }
+    classes;
+    /**
+     * Defines the color variant of the component.
+     */
+    variant;
+    /**
+     * Defines the size of the component.
+     */
+    size = null;
+    /**
+     * Defines the icon `name` inside of the component.
+     * <span className="banner banner-sm banner-info">If not set the icon will not show up.</span>
+     * To learn which icons are available, please visit our <a href="/?path=/docs/5704bdc4-c5b5-45e6-b123-c54d01fce2f1--docs">icon library</a>.
+     */
+    icon = null;
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.classes = undefined;
-        this.variant = undefined;
-        this.size = null;
-        this.icon = null;
         this.setClasses = this.setClasses.bind(this);
     }
     variantChanged() {
@@ -34,9 +46,8 @@ const PostTag = class {
         this.setClasses();
     }
     render() {
-        return (index.h(index.Host, { key: 'cda93c397ec81e289c843eaae7694bbba6f3c297', "data-version": _package.version }, index.h("div", { key: '7fa71d9c0ca5393bc188e5e09107ec931943ed66', class: this.classes }, this.icon ? index.h("post-icon", { name: this.icon }) : null, index.h("div", { key: '8d36933c00910e9f36759d101f43b628c0fbf185', class: "tag-text" }, index.h("slot", { key: '49e2e9dd66cb85df4615c512d8dc0d7cad6606b8' })))));
+        return (index.h(index.Host, { key: 'fd03781bfdcfaa3776677f8d95e8b1a74de24c1e', "data-version": _package.version }, index.h("div", { key: '0a22b98ea9c75d4a09680e2abe980bd0e4935172', class: this.classes }, this.icon ? index.h("post-icon", { name: this.icon }) : null, index.h("div", { key: 'ddda0c15ce644e311b8061283d83619667264ec4', class: "tag-text" }, index.h("slot", { key: '30fb04c5e80f46e7cb560f9489791d8bcd7b45b0' })))));
     }
-    get host() { return index.getElement(this); }
     static get watchers() { return {
         "variant": ["variantChanged"],
         "size": ["sizeChanged"]

package/dist/cjs/post-tag.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const postTag = require('./post-tag-1d75024b.js');
-require('./index-f1b08cdb.js');
-require('./package-0bd6fb0d.js');
+const postTag = require('./post-tag-9c366519.js');
+require('./index-0ee3ab4a.js');
+require('./package-7d11b6ea.js');