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

package/dist/components/post-tag2.js

@@ -1,88 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { a as checkEmptyOrOneOf, d as checkEmptyOrType } from './index2.js';
-import './breakpoints.js';
-import { d as defineCustomElement$1 } from './post-icon2.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 = /*@__PURE__*/ proxyCustomElement(class PostTag extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        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 this; }
-    static get watchers() { return {
-        "variant": ["variantChanged"],
-        "size": ["sizeChanged"],
-        "icon": ["validateName"]
-    }; }
-    static get style() { return PostTagStyle0; }
-}, [1, "post-tag", {
-        "variant": [1],
-        "size": [1],
-        "icon": [1],
-        "classes": [32]
-    }, undefined, {
-        "variant": ["variantChanged"],
-        "size": ["sizeChanged"],
-        "icon": ["validateName"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["post-tag", "post-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "post-tag":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PostTag);
-            }
-            break;
-        case "post-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { PostTag as P, defineCustomElement as d };

package/dist/components/post-togglebutton2.js

@@ -1,51 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.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 PostTogglebuttonStyle0 = postTogglebuttonCss;
-
-const PostTogglebutton = /*@__PURE__*/ proxyCustomElement(class PostTogglebutton extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        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();
-            }
-        };
-        this.toggled = false;
-    }
-    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: '1025fb988460e85c92e49241889363e1bcc840eb', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: '20d3eb9415685fb9a00a5613474c432f6638692e' })));
-    }
-    get host() { return this; }
-    static get style() { return PostTogglebuttonStyle0; }
-}, [1, "post-togglebutton", {
-        "toggled": [1028]
-    }]);
-function defineCustomElement() {
-    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);
-            }
-            break;
-    } });
-}
-
-export { PostTogglebutton as P, defineCustomElement as d };