wcs-core 7.4.0 → 7.4.1

package/bundle/wcs-alert-drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["alertDrawerCss","WcsAlertDrawerStyle0","AlertDrawer","proxyCustomElement","H","this","alertEventListeners","WeakMap","timeoutId","undefined","userPrefersReducedMotion","window","matchMedia","matches","close","alert","setTimeout","remove","delete","parseCssTimeValueToMilliseconds","getComputedStyle","el","getPropertyValue","show","alertsContainer","appendChild","renderToast","alertElement","document","createElement","setAttribute","intent","_a","showProgressBar","String","_b","timeout","listener","set","addEventListener","title","textContent","subtitle","render","h","Host","key","role","ref","id","disconnectedCallback","clearTimeout"],"sources":["src/components/alert-drawer/alert-drawer.scss?tag=wcs-alert-drawer&encapsulation=shadow","src/components/alert-drawer/alert-drawer.tsx"],"sourcesContent":["@import '../../style/breakpoints';\n@import './alert-drawer-keyframes';\n\n:host {\n    --wcs-alert-drawer-gap: var(--wcs-semantic-spacing-base);\n    --wcs-alert-drawer-margin-horizontal: var(--wcs-semantic-spacing-base);\n    --wcs-alert-drawer-margin-vertical: var(--wcs-semantic-spacing-base);\n    --wcs-alert-drawer-min-width: 400px;\n\n    --wcs-alert-drawer-hide-alert-animation-duration: var(--wcs-semantic-motion-duration-feedback-slow);\n\n    position: fixed;\n    z-index: 99999;\n    width: fit-content;\n\n    wcs-alert {\n        --wcs-alert-min-width: var(--wcs-alert-drawer-min-width);\n    }\n\n    wcs-alert:not([show]) {\n        animation-duration: var(--wcs-alert-drawer-hide-alert-animation-duration);\n        animation-timing-function: ease;\n        animation-name: slide-out;\n\n        animation-fill-mode: forwards; // forwards = keep the last keyframe state => that keeps the alert with the opacity 0 at the end of the animation\n\n        @media (prefers-reduced-motion: reduce) {\n            animation: none;\n        }\n    }\n\n    #alerts-container {\n        display: flex;\n        flex-direction: column;\n        gap: var(--wcs-alert-drawer-gap);\n    }\n}\n\n@include for-phone-only {\n    :host {\n        left: 50% !important; // !important => to override the left applied by the :host([position=left]) selector\n        transform: translate(-50%, 0);\n        width: calc(100% - 2 * var(--wcs-alert-drawer-margin-horizontal)); // 1 * margin for the left and 1 * margin for the right\n\n        wcs-alert {\n            --wcs-alert-min-width: 100%;\n        }\n    }\n}\n\n:host([position=top]), :host([position=top-left]), :host([position=top-right]) {\n    top: var(--wcs-alert-drawer-margin-vertical);\n    flex-direction: column-reverse;\n\n    wcs-alert[show] {\n        animation: slide-in-top var(--wcs-alert-drawer-hide-alert-animation-duration) ease;\n\n        @media (prefers-reduced-motion: reduce) {\n            animation: none;\n        }\n    }\n}\n\n:host([position=bottom]), :host([position=bottom-left]), :host([position=bottom-right]) {\n    bottom: var(--wcs-alert-drawer-margin-vertical);\n\n    wcs-alert[show] {\n        animation: slide-in-bottom var(--wcs-alert-drawer-hide-alert-animation-duration) ease;\n\n        @media (prefers-reduced-motion: reduce) {\n            animation: none;\n        }\n    }\n}\n\n:host([position=top-right]), :host([position=bottom-right]) {\n    right: var(--wcs-alert-drawer-margin-horizontal);\n}\n\n:host([position=top-left]), :host([position=bottom-left]) {\n    left: var(--wcs-alert-drawer-margin-horizontal);\n}\n\n:host([position=bottom]), :host([position=top]) {\n    left: 50%;\n    transform: translate(-50%, 0);\n}\n","import { Component, Element, h, Host, Method, Prop } from '@stencil/core';\nimport { parseCssTimeValueToMilliseconds } from '../../utils/helpers';\nimport { WcsAlertDrawerPosition } from \"./alert-drawer-interface\";\nimport { WcsAlertConfig } from \"../alert/alert-interface\";\n\n/**\n * Serve as a container for displaying `wcs-alert` components. Directly use this component to display alerts in your applications.\n * \n * ## Usage\n * \n * You can place the `wcs-alert-drawer` component anywhere in your application. It will be used to display alerts.\n * You need to set `position` property to define where the alert drawer will be displayed on the screen.\n * \n * About alerts order:\n * - alerts are ordered up-bottom if the position is `top` and bottom-up if the position is `bottom`\n * \n * ## Accessibility guidelines 💡\n * \n * - The component has `aria-live=\"polite\"` and `aria-atomic=\"true\"` attributes to announce the new alerts to screen readers\n * \n * ## Configuration (on the web component)\n *\n * Per default, the `wcs-alert-drawer` is configured with:\n * - `position: 'top-right'`\n * - `showProgressBar: false`\n * - `timeout: 5000`\n *\n * When using the `WcsAlertDrawer::show(alert: WcsAlertConfig)` method, you can override the default configuration by \n * overriding it through the argument.\n * You can also set them in the `wcs-alert-drawer` component directly as attributes\n * \n * ```html\n * <wcs-alert-drawer position=\"top-right\" show-progress-bar timeout=\"10000\">\n * ```\n * With this configuration, all alerts will be displayed with a progress bar and a timeout of 10 seconds.\n * \n * @slot - the alert drawer content, where alerts you put as children will be displayed\n * \n * @cssprop --wcs-alert-drawer-gap - Gap between alerts\n * @cssprop --wcs-alert-drawer-margin-horizontal - Margin horizontal of the alert drawer\n * @cssprop --wcs-alert-drawer-margin-vertical - Margin vertical of the alert drawer\n * @cssprop --wcs-alert-drawer-hide-alert-animation-duration - Duration of the hide alert animation\n * @cssprop --wcs-alert-drawer-min-width - Minimum width of the alert drawer => define the width of the alerts\n */\n@Component({\n    tag: 'wcs-alert-drawer',\n    styleUrl: 'alert-drawer.scss',\n    shadow: true,\n})\nexport class AlertDrawer {\n    @Element()\n    private el!: HTMLWcsAlertDrawerElement;\n\n    /**\n     * Position of the alert drawer on the screen\n     */\n    @Prop({ reflect: true }) position: WcsAlertDrawerPosition = 'bottom-right';\n\n    /**\n     * Timeout for the alert to be dismissed automatically\n     */\n    @Prop() timeout: number = 5000;\n    /**\n     * Whether to show the progress bar or not\n     */\n    @Prop() showProgressBar: boolean = false;\n\n    /*\n     https://www.reddit.com/r/Frontend/comments/1ato11w/comment/kqz4gt8/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button\n     https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakRef\n     */\n    private alertEventListeners = new WeakMap<HTMLElement, (evt: AnimationEvent) => void>();\n    private timeoutId = undefined;\n\n    private userPrefersReducedMotion: boolean = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n    private alertsContainer: HTMLDivElement;\n\n    /**\n     * Handles the dismissal of an alert\n     * @param alert The alert element\n     */\n    private close = (alert: HTMLWcsAlertElement): void => {\n        if (!this.userPrefersReducedMotion) {\n            this.timeoutId = setTimeout(() => {\n                alert.remove();\n                // Cleanup the event listener reference\n                this.alertEventListeners.delete(alert);\n            }, parseCssTimeValueToMilliseconds(window.getComputedStyle(this.el).getPropertyValue(\"--wcs-alert-drawer-hide-alert-animation-duration\")) || 300);\n        } else {\n            // If the user has reduced motion preference, remove the alert immediately\n            alert.remove();\n            // Cleanup the event listener reference\n            this.alertEventListeners.delete(alert);\n        }\n    };\n\n    /**\n     * Method exposed on `wcs-alert-drawer` to show an alert programmatically via the JS API\n     * @example\n     * Plain javascript (example inside a script tag):\n     * ```javascript\n     *  document.querySelector('wcs-alert-drawer').show({\n     *      title: 'Alert title',\n     *      subtitle: 'Alert subtitle',\n     *      intent: 'info',\n     *      showProgressBar: true,\n     *      timeout: 5000\n     *  });\n     * @param alert The alert to show\n     */\n    @Method()\n    async show(alert: WcsAlertConfig): Promise<void> {\n        this.alertsContainer.appendChild(this.renderToast(alert));\n    }\n\n    private renderToast(alert: WcsAlertConfig): HTMLWcsAlertElement {\n        const alertElement = document.createElement('wcs-alert') as HTMLWcsAlertElement;\n        alertElement.setAttribute('intent', alert.intent);\n\n        // Uses the alert config if defined, otherwise falls back to the drawer default\n        // as the showProgressBar is a boolean attribute, we need to set it to an empty string only if true\n        if ((alert.showProgressBar ?? this.showProgressBar)) {\n            alertElement.setAttribute('show-progress-bar', '');\n        }\n        \n        // Uses the alert config if defined, otherwise falls back to the drawer default\n        alertElement.setAttribute('timeout', String(alert.timeout ?? this.timeout));\n\n        const listener = () => this.close(alertElement);\n        this.alertEventListeners.set(alertElement, listener);\n        alertElement.addEventListener(\"wcsAlertDismiss\", listener);\n        \n        const title = document.createElement('span') as HTMLSpanElement;\n        title.setAttribute('slot', 'title');\n        title.textContent = alert.title;\n        alertElement.appendChild(title);\n\n        const subtitle = document.createElement('span') as HTMLSpanElement;\n        subtitle.setAttribute('slot', 'subtitle');\n        subtitle.textContent = alert.subtitle;\n        alertElement.appendChild(subtitle);\n\n        return alertElement;\n    }\n\n    render() {\n        // https://www.clever-cloud.com/doc/clever-components/?path=/docs/%F0%9F%9B%A0-toast-cc-toaster--docs#about-accessibility\n        return (\n            <Host role=\"region\" aria-label=\"Informations\" aria-live=\"polite\" aria-atomic=\"true\">\n                <div ref={(el) => this.alertsContainer = el} id=\"alerts-container\">\n                </div>\n            </Host>\n        );\n    }\n\n    disconnectedCallback() {\n        this.alertEventListeners = new WeakMap(); // Clear the event listeners, weakmap is not iterable\n        clearTimeout(this.timeoutId);\n    }\n}\n"],"mappings":"6OAAA,MAAMA,EAAiB,okFACvB,MAAAC,EAAeD,E,MCgDFE,EAAWC,EAAA,MAAAD,UAAAE,E,kEAsBZC,KAAAC,oBAAsB,IAAIC,QAC1BF,KAAAG,UAAYC,UAEZJ,KAAAK,yBAAoCC,OAAOC,WAAW,oCAAoCC,QAO1FR,KAAAS,MAASC,IACb,IAAKV,KAAKK,yBAA0B,CAChCL,KAAKG,UAAYQ,YAAW,KACxBD,EAAME,SAENZ,KAAKC,oBAAoBY,OAAOH,EAAM,GACvCI,EAAgCR,OAAOS,iBAAiBf,KAAKgB,IAAIC,iBAAiB,sDAAwD,I,KAC1I,CAEHP,EAAME,SAENZ,KAAKC,oBAAoBY,OAAOH,E,iBApCoB,e,aAKlC,I,qBAIS,K,CA8CnC,UAAMQ,CAAKR,GACPV,KAAKmB,gBAAgBC,YAAYpB,KAAKqB,YAAYX,G,CAG9C,WAAAW,CAAYX,G,QAChB,MAAMY,EAAeC,SAASC,cAAc,aAC5CF,EAAaG,aAAa,SAAUf,EAAMgB,QAI1C,IAAKC,EAAAjB,EAAMkB,mBAAe,MAAAD,SAAA,EAAAA,EAAI3B,KAAK4B,gBAAkB,CACjDN,EAAaG,aAAa,oBAAqB,G,CAInDH,EAAaG,aAAa,UAAWI,QAAOC,EAAApB,EAAMqB,WAAO,MAAAD,SAAA,EAAAA,EAAI9B,KAAK+B,UAElE,MAAMC,EAAW,IAAMhC,KAAKS,MAAMa,GAClCtB,KAAKC,oBAAoBgC,IAAIX,EAAcU,GAC3CV,EAAaY,iBAAiB,kBAAmBF,GAEjD,MAAMG,EAAQZ,SAASC,cAAc,QACrCW,EAAMV,aAAa,OAAQ,SAC3BU,EAAMC,YAAc1B,EAAMyB,MAC1Bb,EAAaF,YAAYe,GAEzB,MAAME,EAAWd,SAASC,cAAc,QACxCa,EAASZ,aAAa,OAAQ,YAC9BY,EAASD,YAAc1B,EAAM2B,SAC7Bf,EAAaF,YAAYiB,GAEzB,OAAOf,C,CAGX,MAAAgB,GAEI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,SAAQ,aAAY,eAAc,YAAW,SAAQ,cAAa,QACzEH,EAAA,OAAAE,IAAA,2CAAKE,IAAM3B,GAAOhB,KAAKmB,gBAAkBH,EAAI4B,GAAG,qB,CAM5D,oBAAAC,GACI7C,KAAKC,oBAAsB,IAAIC,QAC/B4C,aAAa9C,KAAKG,U"}

package/bundle/wcs-alert.d.ts

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

package/bundle/wcs-alert.js

@@ -0,0 +1,2 @@
+import{A as o,d as s}from"./p-8bfdf6f6.js";const f=o;const t=s;export{f as WcsAlert,t as defineCustomElement};
+//# sourceMappingURL=wcs-alert.js.map

package/bundle/wcs-alert.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":[],"mappings":""}

package/bundle/wcs-app.d.ts

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

package/bundle/wcs-app.js

@@ -0,0 +1,2 @@
+import{p as e,H as t,h as a}from"./p-2bef72c7.js";const s=':host{background-color:var(--wcs-semantic-color-background-surface-secondary);margin:0;display:grid;grid-template-areas:"header header" "sidebar content";grid-template-columns:min-content auto;overflow-y:hidden}::slotted(main){padding:8px;grid-area:content;overflow-y:scroll;height:calc(100vh - 64px)}::slotted(wcs-header){grid-area:header}@media screen and (max-width: 768px){:host{grid-template-areas:"header" "sidebar" "content";grid-template-columns:auto}::slotted(header){position:relative}::slotted(main){overflow-y:visible;height:initial}}';const o=s;const r=e(class e extends t{constructor(){super();this.__registerHost();this.__attachShadow()}render(){return[a("slot",{key:"615427e4b1e7219b1b78fbca36f8385f64119314",name:"header"}),a("slot",{key:"da5fbe3b8d0eb3963d9e42a9e3396f9bf3d49c0d",name:"sidebar"}),a("slot",{key:"3227284afd347f4af0c47ad0f9b46712502df225",name:"content"})]}static get style(){return o}},[1,"wcs-app"]);function n(){if(typeof customElements==="undefined"){return}const e=["wcs-app"];e.forEach((e=>{switch(e){case"wcs-app":if(!customElements.get(e)){customElements.define(e,r)}break}}))}const d=r;const c=n;export{d as WcsApp,c as defineCustomElement};
+//# sourceMappingURL=wcs-app.js.map

package/bundle/wcs-app.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["appCss","WcsAppStyle0","App","proxyCustomElement","H","render","h","key","name"],"sources":["src/components/app/app.scss?tag=wcs-app&encapsulation=shadow","src/components/app/app.tsx"],"sourcesContent":[":host {\n    background-color: var(--wcs-semantic-color-background-surface-secondary);\n    margin: 0;\n    display: grid;\n    grid-template-areas:\n        \"header header\"\n        \"sidebar content\";\n    grid-template-columns: min-content auto;\n    overflow-y: hidden;\n}\n\n::slotted(main) {\n    padding: 8px;\n    grid-area: content;\n    overflow-y: scroll;\n    height: calc(100vh - 64px);\n}\n\n::slotted(wcs-header) {\n    grid-area: header;\n}\n\n@media screen and (max-width: 768px) {\n    :host {\n        grid-template-areas:\n            \"header\"\n            \"sidebar\"\n            \"content\";\n        grid-template-columns: auto;\n    }\n\n    ::slotted(header) {\n        position: relative;\n    }\n\n    ::slotted(main) {\n        overflow-y: visible;\n        height: initial;\n    }\n}\n","import { Component, ComponentInterface, h } from '@stencil/core';\n\n\n@Component({\n    tag: 'wcs-app',\n    styleUrl: 'app.scss',\n    shadow: true\n})\nexport class App implements ComponentInterface {\n\n    render() {\n        return [\n            <slot name=\"header\"/>,\n            <slot name=\"sidebar\"/>,\n            <slot name=\"content\"/>\n        ];\n    }\n}\n"],"mappings":"kDAAA,MAAMA,EAAS,qiBACf,MAAAC,EAAeD,E,MCOFE,EAAGC,EAAA,MAAAD,UAAAE,E,kEAEZ,MAAAC,GACI,MAAO,CACHC,EAAA,QAAAC,IAAA,2CAAMC,KAAK,WACXF,EAAA,QAAAC,IAAA,2CAAMC,KAAK,YACXF,EAAA,QAAAC,IAAA,2CAAMC,KAAK,Y"}

package/bundle/wcs-badge.d.ts

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

package/bundle/wcs-badge.js

@@ -0,0 +1,2 @@
+import{p as a,H as c,h as e}from"./p-2bef72c7.js";const r=":host{--wcs-badge-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-badge-height-l:calc(4 * var(--wcs-semantic-size-base));--wcs-badge-font-size-l:var(--wcs-semantic-font-size-label-1);--wcs-badge-height-m:calc(3 * var(--wcs-semantic-size-base));--wcs-badge-font-size-m:var(--wcs-semantic-font-size-label-2);--wcs-badge-height-s:calc(2.5 * var(--wcs-semantic-size-base));--wcs-badge-font-size-s:var(--wcs-semantic-font-size-label-3);--wcs-badge-border-radius-default:var(--wcs-semantic-border-radius-base);--wcs-badge-border-radius-circular:var(--wcs-semantic-border-radius-full);--wcs-badge-background-color:var(--wcs-semantic-color-background-surface-brand);--wcs-badge-background-color-lighter:var(--wcs-semantic-color-background-surface-accent-lighter);--wcs-badge-color:var(--wcs-semantic-color-foreground-primary);--wcs-badge-color-lighter:var(--wcs-semantic-color-foreground-inverse);--wcs-badge-padding-horizontal-l:var(--wcs-semantic-spacing-base);--wcs-badge-padding-horizontal-m:var(--wcs-semantic-spacing-base);--wcs-badge-padding-horizontal-s:calc(0.75 * var(--wcs-semantic-spacing-base));--wcs-badge-height:var(--wcs-badge-height-m);--wcs-badge-gap:calc(var(--wcs-semantic-spacing-base) / 2);--wcs-badge-font-size:var(--wcs-badge-font-size-m);--wcs-badge-padding-horizontal:var(--wcs-badge-padding-horizontal-m);display:inline-flex;gap:var(--wcs-badge-gap);padding:0 var(--wcs-badge-padding-horizontal);height:var(--wcs-badge-height);inline-size:fit-content;font-size:var(--wcs-badge-font-size);box-sizing:border-box;font-weight:var(--wcs-badge-font-weight);line-height:1;text-align:center;align-content:center;align-items:center;white-space:nowrap;vertical-align:baseline;border-radius:var(--wcs-badge-border-radius-default);color:var(--wcs-badge-color);background-color:var(--wcs-badge-background-color)}:host([color=lighter]){--wcs-badge-color:var(--wcs-badge-color-lighter) !important;--wcs-badge-background-color:var(--wcs-badge-background-color-lighter) !important}:host([shape=rounded]){border-radius:var(--wcs-badge-border-radius-circular)}:host([size=l]){--wcs-badge-height:var(--wcs-badge-height-l);--wcs-badge-gap:calc(var(--wcs-semantic-spacing-large) / 2);--wcs-badge-font-size:var(--wcs-badge-font-size-l);--wcs-badge-padding-horizontal:var(--wcs-badge-padding-horizontal-l)}:host([size=m]){--wcs-badge-height:var(--wcs-badge-height-m);--wcs-badge-gap:calc(var(--wcs-semantic-spacing-base) / 2);--wcs-badge-font-size:var(--wcs-badge-font-size-m);--wcs-badge-padding-horizontal:var(--wcs-badge-padding-horizontal-m)}:host([size=s]){--wcs-badge-height:var(--wcs-badge-height-s);--wcs-badge-gap:calc(var(--wcs-semantic-spacing-small) / 2);--wcs-badge-font-size:var(--wcs-badge-font-size-s);--wcs-badge-padding-horizontal:var(--wcs-badge-padding-horizontal-s)}:host(.wcs-secondary){--wcs-badge-background-color:var(--wcs-semantic-color-background-surface-inverse);--wcs-badge-background-color-lighter:var(--wcs-semantic-color-background-surface-secondary);--wcs-badge-color:var(--wcs-semantic-color-foreground-primary);--wcs-badge-color-lighter:var(--wcs-semantic-color-foreground-inverse)}:host(.wcs-success){--wcs-badge-background-color:var(--wcs-semantic-color-background-surface-success-default);--wcs-badge-background-color-lighter:var(--wcs-semantic-color-background-surface-success-lighter);--wcs-badge-color:var(--wcs-semantic-color-foreground-primary);--wcs-badge-color-lighter:var(--wcs-semantic-color-foreground-inverse)}:host(.wcs-info){--wcs-badge-background-color:var(--wcs-semantic-color-background-surface-information-default);--wcs-badge-background-color-lighter:var(--wcs-semantic-color-background-surface-information-lighter);--wcs-badge-color:var(--wcs-semantic-color-foreground-primary);--wcs-badge-color-lighter:var(--wcs-semantic-color-foreground-inverse)}:host(.wcs-warning){--wcs-badge-background-color:var(--wcs-semantic-color-background-surface-warning-default);--wcs-badge-background-color-lighter:var(--wcs-semantic-color-background-surface-warning-lighter);--wcs-badge-color:var(--wcs-semantic-color-foreground-inverse);--wcs-badge-color-lighter:var(--wcs-semantic-color-foreground-inverse)}:host(.wcs-critical),:host(.wcs-danger){--wcs-badge-background-color:var(--wcs-semantic-color-background-surface-critical-default);--wcs-badge-background-color-lighter:var(--wcs-semantic-color-background-surface-critical-lightest);--wcs-badge-color:var(--wcs-semantic-color-foreground-primary);--wcs-badge-color-lighter:var(--wcs-semantic-color-foreground-critical)}";const s=r;const o=a(class a extends c{constructor(){super();this.__registerHost();this.__attachShadow();this.shape="normal";this.color="initial";this.size="m"}render(){return e("slot",{key:"6d9646b28344f4d1f05a3efaf798a6273252a8bf"})}static get style(){return s}},[1,"wcs-badge",{shape:[1],color:[1],size:[513]}]);function i(){if(typeof customElements==="undefined"){return}const a=["wcs-badge"];a.forEach((a=>{switch(a){case"wcs-badge":if(!customElements.get(a)){customElements.define(a,o)}break}}))}const n=o;const g=i;export{n as WcsBadge,g as defineCustomElement};
+//# sourceMappingURL=wcs-badge.js.map

package/bundle/wcs-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["badgeCss","WcsBadgeStyle0","Badge","proxyCustomElement","H","render","h","key"],"sources":["src/components/badge/badge.scss?tag=wcs-badge&encapsulation=shadow","src/components/badge/badge.tsx"],"sourcesContent":[":host {\n    --wcs-badge-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-badge-height-l: calc(4 * var(--wcs-semantic-size-base));\n    --wcs-badge-font-size-l: var(--wcs-semantic-font-size-label-1);\n    --wcs-badge-height-m: calc(3 * var(--wcs-semantic-size-base));\n    --wcs-badge-font-size-m: var(--wcs-semantic-font-size-label-2);\n    --wcs-badge-height-s: calc(2.5 * var(--wcs-semantic-size-base));\n    --wcs-badge-font-size-s: var(--wcs-semantic-font-size-label-3);\n\n    --wcs-badge-border-radius-default: var(--wcs-semantic-border-radius-base);\n    --wcs-badge-border-radius-circular: var(--wcs-semantic-border-radius-full);\n    --wcs-badge-background-color: var(--wcs-semantic-color-background-surface-brand);\n    --wcs-badge-background-color-lighter: var(--wcs-semantic-color-background-surface-accent-lighter);\n    --wcs-badge-color: var(--wcs-semantic-color-foreground-primary);\n    --wcs-badge-color-lighter: var(--wcs-semantic-color-foreground-inverse);\n    --wcs-badge-padding-horizontal-l: var(--wcs-semantic-spacing-base);\n    --wcs-badge-padding-horizontal-m: var(--wcs-semantic-spacing-base);\n    --wcs-badge-padding-horizontal-s: calc(0.75 * var(--wcs-semantic-spacing-base));\n\n    // Default\n    --wcs-badge-height: var(--wcs-badge-height-m);\n    --wcs-badge-gap: calc(var(--wcs-semantic-spacing-base) / 2);\n    --wcs-badge-font-size: var(--wcs-badge-font-size-m);\n    --wcs-badge-padding-horizontal: var(--wcs-badge-padding-horizontal-m);\n\n    display: inline-flex;\n    gap: var(--wcs-badge-gap);\n    padding: 0 var(--wcs-badge-padding-horizontal);\n    height: var(--wcs-badge-height);\n    inline-size: fit-content;\n    font-size: var(--wcs-badge-font-size);\n    box-sizing: border-box;\n    font-weight: var(--wcs-badge-font-weight);\n    line-height: 1;\n    text-align: center;\n    align-content: center;\n    align-items: center;\n    white-space: nowrap;\n    vertical-align: baseline;\n    border-radius: var(--wcs-badge-border-radius-default);\n    color: var(--wcs-badge-color);\n    background-color: var(--wcs-badge-background-color);\n}\n\n:host([color=lighter]) {\n    --wcs-badge-color: var(--wcs-badge-color-lighter) !important;\n    --wcs-badge-background-color: var(--wcs-badge-background-color-lighter) !important;\n}\n\n:host([shape=rounded]){\n    border-radius: var(--wcs-badge-border-radius-circular);\n}\n\n:host([size=l]) {\n    --wcs-badge-height: var(--wcs-badge-height-l);\n    --wcs-badge-gap: calc(var(--wcs-semantic-spacing-large) / 2);\n    --wcs-badge-font-size: var(--wcs-badge-font-size-l);\n    --wcs-badge-padding-horizontal: var(--wcs-badge-padding-horizontal-l);\n}\n\n:host([size=m]) { // Default\n    --wcs-badge-height: var(--wcs-badge-height-m);\n    --wcs-badge-gap: calc(var(--wcs-semantic-spacing-base) / 2);\n    --wcs-badge-font-size: var(--wcs-badge-font-size-m);\n    --wcs-badge-padding-horizontal: var(--wcs-badge-padding-horizontal-m);\n}\n\n:host([size=s]) {\n    --wcs-badge-height: var(--wcs-badge-height-s);\n    --wcs-badge-gap: calc(var(--wcs-semantic-spacing-small) / 2);\n    --wcs-badge-font-size: var(--wcs-badge-font-size-s);\n    --wcs-badge-padding-horizontal: var(--wcs-badge-padding-horizontal-s);\n}\n\n\n/* Color variants */\n\n:host(.wcs-secondary) {\n    --wcs-badge-background-color: var(--wcs-semantic-color-background-surface-inverse);\n    --wcs-badge-background-color-lighter: var(--wcs-semantic-color-background-surface-secondary);\n    --wcs-badge-color: var(--wcs-semantic-color-foreground-primary);\n    --wcs-badge-color-lighter: var(--wcs-semantic-color-foreground-inverse);\n}\n\n:host(.wcs-success) {\n    --wcs-badge-background-color: var(--wcs-semantic-color-background-surface-success-default);\n    --wcs-badge-background-color-lighter: var(--wcs-semantic-color-background-surface-success-lighter);\n    --wcs-badge-color: var(--wcs-semantic-color-foreground-primary);\n    --wcs-badge-color-lighter: var(--wcs-semantic-color-foreground-inverse);\n}\n\n:host(.wcs-info) {\n    --wcs-badge-background-color: var(--wcs-semantic-color-background-surface-information-default);\n    --wcs-badge-background-color-lighter: var(--wcs-semantic-color-background-surface-information-lighter);\n    --wcs-badge-color: var(--wcs-semantic-color-foreground-primary);\n    --wcs-badge-color-lighter: var(--wcs-semantic-color-foreground-inverse);\n}\n\n:host(.wcs-warning) {\n    --wcs-badge-background-color: var(--wcs-semantic-color-background-surface-warning-default);\n    --wcs-badge-background-color-lighter: var(--wcs-semantic-color-background-surface-warning-lighter);\n    --wcs-badge-color: var(--wcs-semantic-color-foreground-inverse);\n    --wcs-badge-color-lighter: var(--wcs-semantic-color-foreground-inverse);\n}\n\n:host(.wcs-critical), :host(.wcs-danger) {\n    --wcs-badge-background-color: var(--wcs-semantic-color-background-surface-critical-default);\n    --wcs-badge-background-color-lighter: var(--wcs-semantic-color-background-surface-critical-lightest);\n    --wcs-badge-color: var(--wcs-semantic-color-foreground-primary);\n    --wcs-badge-color-lighter: var(--wcs-semantic-color-foreground-critical);\n}\n","import { Component, ComponentInterface, h, Prop } from '@stencil/core';\nimport { BadgeColor, BadgeShape, BadgeSize } from './badge-interface';\n\n/**\n * The badge component is a small label, generally appearing inside or in proximity to another larger interface component,\n * representing a status, property, or some other metadata.  \n *\n * @cssprop --wcs-badge-font-weight - Define the font weight of the badge\n * @cssprop --wcs-badge-height-l - Large height of the badge\n * @cssprop --wcs-badge-font-size-l - Large font size of the badge\n * @cssprop --wcs-badge-height-m - Medium height of the badge\n * @cssprop --wcs-badge-font-size-m - Font size of the badge\n * @cssprop --wcs-badge-height-s - Small height of the badge\n * @cssprop --wcs-badge-font-size-s - Small font size of the badge\n * @cssprop --wcs-badge-border-radius-default - Default border radius of the badge\n * @cssprop --wcs-badge-border-radius-circular - Circular border radius of the badge\n * \n * @cssprop --wcs-badge-background-color - Background color of the badge\n * @cssprop --wcs-badge-background-color-lighter - Background color of the lighter badge\n * @cssprop --wcs-badge-color - Text color of the badge\n * @cssprop --wcs-badge-color-lighter - Text color of the lighter badge\n * @cssporp --wcs-badge-gap - The gap inside the badge\n * \n * @cssprop --wcs-badge-padding-horizontal-l - Horizontal padding of the size L badge\n * @cssprop --wcs-badge-padding-horizontal-m - Horizontal padding of the size M badge\n * @cssprop --wcs-badge-padding-horizontal-s - Horizontal padding of the size S badge\n */\n@Component({\n    tag: 'wcs-badge',\n    styleUrl: 'badge.scss',\n    shadow: true\n})\nexport class Badge implements ComponentInterface {\n    /**\n     * Define the shape of the badge\n     */\n    @Prop() shape: BadgeShape = 'normal';\n    /**\n     * Allows you to change the color of the badge to make it less bright (based on the color chosen by the CSS class).\n     */\n    @Prop() color: BadgeColor = 'initial';\n\n    /**\n     * Specify the size of the badge.\n     */\n    @Prop({ reflect: true }) size: BadgeSize = 'm';\n\n    render() {\n        return (\n            <slot/>\n        );\n    }\n}\n"],"mappings":"kDAAA,MAAMA,EAAW,y6IACjB,MAAAC,EAAeD,E,MC+BFE,EAAKC,EAAA,MAAAD,UAAAE,E,6EAIc,S,WAIA,U,UAKe,G,CAE3C,MAAAC,GACI,OACIC,EAAA,QAAAC,IAAA,4C"}

package/bundle/wcs-breadcrumb-item.d.ts

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

package/bundle/wcs-breadcrumb-item.js

@@ -0,0 +1,2 @@
+import{p as e,H as r,h as c,c as t}from"./p-2bef72c7.js";import{I as s}from"./p-3abf8a42.js";const i=':host{--wcs-breadcrumb-item-max-height:var(--wcs-semantic-size-s);--wcs-breadcrumb-item-line-height:var(--wcs-semantic-font-line-height-large);--wcs-breadcrumb-item-font-size:var(--wcs-semantic-font-size-body-3);--wcs-breadcrumb-item-icon-color:var(--wcs-semantic-color-foreground-brand);--wcs-breadcrumb-item-icon-font-size:0.5rem;--wcs-breadcrumb-item-gap:var(--wcs-semantic-spacing-base);--wcs-breadcrumb-item-link-color:var(--wcs-semantic-color-text-link-default);--wcs-breadcrumb-item-link-color-hover:var(--wcs-semantic-color-text-link-hover);--wcs-breadcrumb-item-link-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-breadcrumb-item-border-width-focus:var(--wcs-semantic-border-width-large);--wcs-breadcrumb-item-border-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-breadcrumb-item-active-color:var(--wcs-semantic-color-text-primary);display:flex;align-items:baseline;max-height:var(--wcs-breadcrumb-item-max-height);font-size:var(--wcs-breadcrumb-item-font-size);color:var(--wcs-breadcrumb-item-active-color);line-height:var(--wcs-breadcrumb-item-line-height)}:host ::slotted(a){display:block;height:100%;padding:1px 2px;font-weight:var(--wcs-breadcrumb-item-link-font-weight);color:var(--wcs-breadcrumb-item-link-color);text-decoration:none;border-radius:var(--wcs-breadcrumb-item-border-width-focus)}:host ::slotted(a:focus-visible){outline:var(--wcs-breadcrumb-item-border-width-focus) dashed var(--wcs-breadcrumb-item-border-color-focus);outline-offset:0;border-radius:0.1rem}:host ::slotted(a:hover){text-decoration:underline;color:var(--wcs-breadcrumb-item-link-color-hover)}:host .item-icon{margin-left:calc(var(--wcs-breadcrumb-item-gap) - 2px);font-family:"icons";font-size:var(--wcs-breadcrumb-item-icon-font-size);color:var(--wcs-breadcrumb-item-icon-color)}';const o=i;const a=e(class e extends r{constructor(){super();this.__registerHost();this.__attachShadow();this.last=false}render(){return c(t,{key:"56e9780cd4ef4603b3a7364384222ffbc69bd4a5",role:"listitem"},c("slot",{key:"d3b484440c71efc646b2de9cb5f6ff8154887207"}),!this.last&&c("span",{key:"47eb0cbd394d31e46b0d919ab77d2f61d1d0aeef",class:"item-icon","aria-hidden":"true"},s))}static get style(){return o}},[1,"wcs-breadcrumb-item",{last:[4]}]);function m(){if(typeof customElements==="undefined"){return}const e=["wcs-breadcrumb-item"];e.forEach((e=>{switch(e){case"wcs-breadcrumb-item":if(!customElements.get(e)){customElements.define(e,a)}break}}))}const b=a;const n=m;export{b as WcsBreadcrumbItem,n as defineCustomElement};
+//# sourceMappingURL=wcs-breadcrumb-item.js.map

package/bundle/wcs-breadcrumb-item.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["breadcrumbItemCss","WcsBreadcrumbItemStyle0","BreadcrumbItem","proxyCustomElement","H","render","h","Host","key","role","this","last","class","ICONS_FONT_CHEVRON_UNICODE"],"sources":["src/components/breadcrumb-item/breadcrumb-item.scss?tag=wcs-breadcrumb-item&encapsulation=shadow","src/components/breadcrumb-item/breadcrumb-item.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    --wcs-breadcrumb-item-max-height: var(--wcs-semantic-size-s);\n    --wcs-breadcrumb-item-line-height: var(--wcs-semantic-font-line-height-large);\n    --wcs-breadcrumb-item-font-size: var(--wcs-semantic-font-size-body-3);\n\n    --wcs-breadcrumb-item-icon-color: var(--wcs-semantic-color-foreground-brand);\n    --wcs-breadcrumb-item-icon-font-size: 0.5rem;\n    --wcs-breadcrumb-item-gap: var(--wcs-semantic-spacing-base);\n\n    --wcs-breadcrumb-item-link-color: var(--wcs-semantic-color-text-link-default);\n    --wcs-breadcrumb-item-link-color-hover: var(--wcs-semantic-color-text-link-hover);\n    --wcs-breadcrumb-item-link-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-breadcrumb-item-border-width-focus: var(--wcs-semantic-border-width-large);\n\n    --wcs-breadcrumb-item-border-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n    --wcs-breadcrumb-item-active-color: var(--wcs-semantic-color-text-primary);\n\n    display: flex;\n    align-items: baseline;\n    max-height: var(--wcs-breadcrumb-item-max-height);\n    font-size: var(--wcs-breadcrumb-item-font-size);\n    color: var(--wcs-breadcrumb-item-active-color);\n    line-height: var(--wcs-breadcrumb-item-line-height);\n\n    ::slotted(a) {\n        display: block;\n        height: 100%;\n        padding: 1px 2px;\n        font-weight: var(--wcs-breadcrumb-item-link-font-weight);\n        color: var(--wcs-breadcrumb-item-link-color);\n        text-decoration: none;\n        border-radius: var(--wcs-breadcrumb-item-border-width-focus);\n    }\n    ::slotted(a:focus-visible ) {\n        @include focus-outline($outline-color: var(--wcs-breadcrumb-item-border-color-focus), $outline-offset: 0, $border-width: var(--wcs-breadcrumb-item-border-width-focus));\n    }\n    ::slotted(a:hover) {\n        text-decoration: underline;\n        color: var(--wcs-breadcrumb-item-link-color-hover);\n    }\n\n    .item-icon {\n        margin-left: calc(var(--wcs-breadcrumb-item-gap) - 2px);\n        font-family: \"icons\";\n        font-size: var(--wcs-breadcrumb-item-icon-font-size);\n        color: var(--wcs-breadcrumb-item-icon-color);\n    }\n}\n","import { Component, ComponentInterface, h, Host, Prop } from '@stencil/core';\n\nimport { ICONS_FONT_CHEVRON_UNICODE } from '../breadcrumb/breadcrumb-constants';\n\n/**\n * The breadcrumb item represents a link inside a breadcrumb.\n * \n * @slot <no-name> Main container slot\n * \n * @cssprop --wcs-breadcrumb-item-max-height - Maximum height of the breadcrumb item\n * @cssprop --wcs-breadcrumb-item-line-height - Line height of the breadcrumb item\n * @cssprop --wcs-breadcrumb-item-font-size - Font size of the breadcrumb item\n * \n * @cssprop --wcs-breadcrumb-item-icon-color - Color of the breadcrumb item icon\n * @cssprop --wcs-breadcrumb-item-icon-font-size - Font size of the breadcrumb item icon\n * \n * @cssprop --wcs-breadcrumb-item-gap - Gap between text and chevron icon\n * @cssprop --wcs-breadcrumb-item-link-color - Color of the breadcrumb item link\n * @cssprop --wcs-breadcrumb-item-link-color-hover - Color of the breadcrumb item link when hovered\n * @cssprop --wcs-breadcrumb-item-link-font-weight - Font weight of the breadcrumb item link\n * \n * @cssprop --wcs-breadcrumb-item-border-width-focus - Border width of the breadcrumb item when focused\n * @cssprop --wcs-breadcrumb-item-border-color-focus - Border color of the breadcrumb item when focused\n * \n * @cssprop --wcs-breadcrumb-item-active-color - Color of the breadcrumb item when the link is active\n */\n@Component({\n    tag: 'wcs-breadcrumb-item',\n    styleUrl: 'breadcrumb-item.scss',\n    shadow: true,\n})\nexport class BreadcrumbItem implements ComponentInterface {\n    /**\n     * Automatically set by the parent breadcrumb.\n     * True if it is the last breadcrumb item.\n     * (You shouldn't set this prop by yourself) \n     * @internal\n     * @ignore\n     */\n    @Prop() last: boolean = false;\n\n    render() {\n        return (\n            <Host role=\"listitem\">\n                <slot />\n                {!this.last && (\n                    <span class=\"item-icon\" aria-hidden=\"true\">\n                        {ICONS_FONT_CHEVRON_UNICODE}\n                    </span>\n                )}\n            </Host>\n        );\n    }\n}\n"],"mappings":"6FAAA,MAAMA,EAAoB,6wDAC1B,MAAAC,EAAeD,E,MC8BFE,EAAcC,EAAA,MAAAD,UAAAE,E,4EAQC,K,CAExB,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,YACPH,EAAA,QAAAE,IAAA,8CACEE,KAAKC,MACHL,EAAA,QAAAE,IAAA,2CAAMI,MAAM,YAAW,cAAa,QAC/BC,G"}

package/bundle/wcs-breadcrumb.d.ts

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

package/bundle/wcs-breadcrumb.js

@@ -0,0 +1,2 @@
+import{p as e,H as s,f as t,h as a,c as i}from"./p-2bef72c7.js";import{i as n,a as r,s as o}from"./p-2e9b9605.js";import{E as c,I as l,N as d}from"./p-3abf8a42.js";import{d as m}from"./p-6bc981dd.js";import{d as b}from"./p-98bd8a96.js";import{d as h}from"./p-c8b73e93.js";const p=':host{--wcs-breadcrumb-icon-color:var(--wcs-semantic-color-foreground-brand);--wcs-breadcrumb-icon-font-size:0.5rem;--wcs-breadcrumb-gap:var(--wcs-semantic-spacing-base)}nav.wcs-breadcrumb-container slot[name=hidden-items]{display:none}nav.wcs-breadcrumb-container.show-hidden-items slot[name=hidden-items]{display:contents}nav.wcs-breadcrumb-container div[role=list]{display:flex;flex-wrap:wrap;align-items:center;margin:0;padding:0;list-style:none}nav.wcs-breadcrumb-container div[role=list] ::slotted(wcs-breadcrumb-item){margin-right:var(--wcs-breadcrumb-gap)}nav.wcs-breadcrumb-container div[role=list] ::slotted(wcs-breadcrumb-item:last-child){margin-right:0}nav.wcs-breadcrumb-container div[role=list] .item-not-slotted{display:flex;align-items:center;margin-right:var(--wcs-breadcrumb-gap)}nav.wcs-breadcrumb-container div[role=list] .item-not-slotted wcs-button[size=s]{--wcs-button-min-width:24px;--wcs-button-height:20px;--wcs-button-border-radius:2px;transform:translateY(2px)}nav.wcs-breadcrumb-container div[role=list] .item-not-slotted .item-icon{margin-left:calc(var(--wcs-breadcrumb-gap) - 1px);font-family:"icons";font-size:var(--wcs-breadcrumb-icon-font-size);color:var(--wcs-breadcrumb-icon-color);transform:translateY(1px)}';const f=p;const u=[];const w=e(class e extends s{constructor(){super();this.__registerHost();this.__attachShadow();this.inheritedAttributes={};this.maxItems=undefined;this.itemsBeforeCollapse=1;this.itemsAfterCollapse=2;this.ariaLabelExpandButton=c;this.showHiddenItems=false}handleCollapsePropsChange(){this.updateCollapsedViewMode()}handleAriaLabelExpandBtnChange(e){var s;(s=this.expandBtnEl)===null||s===void 0?void 0:s.setAriaAttribute("aria-label",e)}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},n(this.el)),r(this.el,u));this.updateCollapsedViewMode()}componentDidLoad(){var e;(e=this.expandBtnEl)===null||e===void 0?void 0:e.setAriaAttribute("aria-label",this.ariaLabelExpandButton)}async setAriaAttribute(e,s){o(this.navEl,e,s)}getBreadcrumbItems(){return Array.from(this.el.querySelectorAll("wcs-breadcrumb-item"))}shouldCollapseItems(){return!!this.maxItems&&this.getBreadcrumbItems().length>this.maxItems&&this.itemsBeforeCollapse+this.itemsAfterCollapse<=this.maxItems}updateCollapsedViewMode(){if(this.shouldCollapseItems()){this.assignSlotNamesForCollapsedViewMode()}else{this.assignSlotNamesForNonCollapsedViewMode()}}assignSlotNamesForCollapsedViewMode(){const e=this.getBreadcrumbItems();const s=this.itemsBeforeCollapse-1;const t=e.length-this.itemsAfterCollapse;e.forEach(((a,i)=>{if(i<=s){a.slot="items-before-expand-btn";a.last=false}else if(i>s&&i<t){a.slot="hidden-items";a.last=false}else{a.slot="items-after-expand-btn";a.last=i===e.length-1}}))}assignSlotNamesForNonCollapsedViewMode(){const e=this.getBreadcrumbItems();e.forEach(((s,t)=>{s.slot="non-collapsed";s.last=t===e.length-1}))}handleSlotChange(){this.updateCollapsedViewMode();this.showHiddenItems=false;t(this)}handleOnExpandBtnClick(){this.showHiddenItems=true;requestAnimationFrame((()=>this.setFocusToFirstHiddenItem()))}setFocusToFirstHiddenItem(){const e=this.getBreadcrumbItems();const s=this.itemsBeforeCollapse;const t=e[s];const a=t.shadowRoot.querySelector("slot");const i=a.assignedElements()[0];i===null||i===void 0?void 0:i.focus()}renderExpandAllButton(){const e=this.itemsAfterCollapse===0;return a("div",{role:"listitem",class:"item-not-slotted"},a("wcs-button",{mode:"clear",shape:"square",size:"s",onClick:this.handleOnExpandBtnClick.bind(this),ref:e=>this.expandBtnEl=e},a("wcs-mat-icon",{icon:"more_horiz"})),!e&&a("span",{class:"item-icon","aria-hidden":"true"},l))}render(){const e=this.shouldCollapseItems()&&!this.showHiddenItems;return a(i,{key:"1707e6c3ee0cc621c75f85f927b543dea1af4342"},a("nav",Object.assign({key:"b326c58b86feed5092f8a6c5d46c3cf2dd06a783",class:`wcs-breadcrumb-container${this.showHiddenItems?" show-hidden-items":""}`,"aria-label":d},this.inheritedAttributes,{ref:e=>this.navEl=e}),a("div",{key:"9a4395f63e0895bca1918d7236a01dd9d0437f26",role:"list"},a("slot",{key:"b74aa1fc77ddfc892f0ba79bceffceab10e49c1f",onSlotchange:this.handleSlotChange.bind(this)}),a("slot",{key:"c616f6281282a7088073ceb131f12f93d1126c8b",name:"non-collapsed"}),a("slot",{key:"0db22f440bc3956219c343e4dac60bfe09581d73",name:"items-before-expand-btn"}),a("slot",{key:"a29809c5122d539d11c1e53e591ed4342c338810",name:"hidden-items"}),e&&this.renderExpandAllButton(),a("slot",{key:"aa906ec3b5805f78136b39e5d56937cdca7a7f38",name:"items-after-expand-btn"}))))}get el(){return this}static get watchers(){return{maxItems:["handleCollapsePropsChange"],itemsBeforeCollapse:["handleCollapsePropsChange"],itemsAfterCollapse:["handleCollapsePropsChange"],ariaLabelExpandButton:["handleAriaLabelExpandBtnChange"]}}static get style(){return f}},[1,"wcs-breadcrumb",{maxItems:[2,"max-items"],itemsBeforeCollapse:[2,"items-before-collapse"],itemsAfterCollapse:[2,"items-after-collapse"],ariaLabelExpandButton:[1,"aria-label-expand-button"],showHiddenItems:[32],setAriaAttribute:[64]},undefined,{maxItems:["handleCollapsePropsChange"],itemsBeforeCollapse:["handleCollapsePropsChange"],itemsAfterCollapse:["handleCollapsePropsChange"],ariaLabelExpandButton:["handleAriaLabelExpandBtnChange"]}]);function g(){if(typeof customElements==="undefined"){return}const e=["wcs-breadcrumb","wcs-button","wcs-mat-icon","wcs-spinner"];e.forEach((e=>{switch(e){case"wcs-breadcrumb":if(!customElements.get(e)){customElements.define(e,w)}break;case"wcs-button":if(!customElements.get(e)){m()}break;case"wcs-mat-icon":if(!customElements.get(e)){b()}break;case"wcs-spinner":if(!customElements.get(e)){h()}break}}))}const v=w;const C=g;export{v as WcsBreadcrumb,C as defineCustomElement};
+//# sourceMappingURL=wcs-breadcrumb.js.map

package/bundle/wcs-breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["breadcrumbCss","WcsBreadcrumbStyle0","BREADCRUMB_INHERITED_ATTRS","Breadcrumb","proxyCustomElement","H","this","inheritedAttributes","EXPAND_BTN_ARIA_LABEL_DEFAULT","handleCollapsePropsChange","updateCollapsedViewMode","handleAriaLabelExpandBtnChange","newValue","_a","expandBtnEl","setAriaAttribute","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","componentDidLoad","ariaLabelExpandButton","attr","value","setOrRemoveAttribute","navEl","getBreadcrumbItems","Array","from","querySelectorAll","shouldCollapseItems","maxItems","length","itemsBeforeCollapse","itemsAfterCollapse","assignSlotNamesForCollapsedViewMode","assignSlotNamesForNonCollapsedViewMode","breadcrumbItems","itemBeforeExpandBtnIndex","itemAfterExpandBtnIndex","forEach","breadcrumbItem","index","slot","last","handleSlotChange","showHiddenItems","forceUpdate","handleOnExpandBtnClick","requestAnimationFrame","setFocusToFirstHiddenItem","firstHiddenItemIndex","firstHiddenItem","firstHiddenItemSlot","shadowRoot","querySelector","breadcrumbItemLinkToFocus","assignedElements","focus","renderExpandAllButton","expandBtnIsLastItem","h","role","class","mode","shape","size","onClick","bind","ref","icon","ICONS_FONT_CHEVRON_UNICODE","render","showExpandBtn","Host","key","NAV_ARIA_LABEL_DEFAULT","onSlotchange","name"],"sources":["src/components/breadcrumb/breadcrumb.scss?tag=wcs-breadcrumb&encapsulation=shadow","src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":[":host {\n    --wcs-breadcrumb-icon-color: var(--wcs-semantic-color-foreground-brand);\n    --wcs-breadcrumb-icon-font-size: 0.5rem;\n    --wcs-breadcrumb-gap: var(--wcs-semantic-spacing-base);\n}\n\nnav.wcs-breadcrumb-container {\n    slot[name=\"hidden-items\"] {\n        display: none;\n    }\n    &.show-hidden-items {\n        slot[name=\"hidden-items\"] {\n            display: contents;\n        }\n    }\n\n    div[role=\"list\"] {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        margin: 0;\n        padding: 0;\n        list-style: none;\n\n        ::slotted(wcs-breadcrumb-item) {\n            margin-right: var(--wcs-breadcrumb-gap);\n        }\n\n        ::slotted(wcs-breadcrumb-item:last-child) {\n            margin-right: 0;\n        }\n\n        .item-not-slotted {\n            display: flex;\n            align-items: center;\n            margin-right: var(--wcs-breadcrumb-gap);\n\n            wcs-button[size=\"s\"] {\n                --wcs-button-min-width: 24px;\n                --wcs-button-height: 20px;\n                --wcs-button-border-radius: 2px;\n                transform: translateY(2px);\n            }\n\n            .item-icon {\n                margin-left: calc(var(--wcs-breadcrumb-gap) - 1px);\n                font-family: \"icons\";\n                font-size: var(--wcs-breadcrumb-icon-font-size);\n                color: var(--wcs-breadcrumb-icon-color);\n                transform: translateY(1px);\n            }\n        }\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element, forceUpdate,\n    h,\n    Host,\n    Method,\n    Prop,\n    State,\n    Watch\n} from '@stencil/core';\n\nimport { inheritAttributes, inheritAriaAttributes, setOrRemoveAttribute } from '../../utils/helpers';\nimport { AriaAttributeName, MutableAriaAttribute } from '../../utils/mutable-aria-attribute';\nimport {\n    ICONS_FONT_CHEVRON_UNICODE,\n    NAV_ARIA_LABEL_DEFAULT,\n    EXPAND_BTN_ARIA_LABEL_DEFAULT\n} from './breadcrumb-constants';\n\nconst BREADCRUMB_INHERITED_ATTRS = [];\n\n/**\n * A breadcrumb trail consists of a list of links to the parent pages of the current page in hierarchical order.  \n * It helps users find their place within a website or web application. Breadcrumbs are often placed horizontally before a page's main content.\n *\n * ## Accessibility guidelines 💡\n * > - If the last item is a link to the current page, you must set the `aria-current` attribute to `page` on `wcs-breadcrumb-item`.\n * > - If the element representing the current page is not a link, `aria-current` is optional.\n * > - You can set the attribute `aria-label` on `wcs-breadcrumb`, it will be passed to the native `nav` element located inside its shadow DOM. \n * >   You can find the `aria-label` default value in the table below. If your application is in English, you can set it to `Breadcrumb`.\n * > - You can do the same thing for the `aria-label` of the expand button when the breadcrumb is collapsed. You can find its default value\n * >   in the table below too.  \n * > - If you need to **dynamically change the `aria-label` attribute of `wcs-breadcrumb` after the first render**, you can use the \n * >   `setAriaAttribute` JS method (example below). For the expand button however, you can update the prop `ariaLabelExpandButton`.  \n * >   Note: we're working on updating the component automatically when attributes change. \n *\n * > ```javascript\n * > const wcsButton = document.querySelector('wcs-button');\n * > await wcsButton.setAriaAttribute('aria-label', 'new label');\n * > ```\n * \n * @cssprop --wcs-breadcrumb-icon-color - Icon color\n * @cssprop --wcs-breadcrumb-icon-font-size - Icon font size\n * @cssprop --wcs-breadcrumb-gap - Gap between breadcrumb items\n */\n@Component({\n    tag: 'wcs-breadcrumb',\n    styleUrl: 'breadcrumb.scss',\n    shadow: true,\n})\nexport class Breadcrumb implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el: HTMLElement;\n    private navEl?: HTMLElement;\n    private expandBtnEl: HTMLWcsButtonElement;\n\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /**\n     * If the number of breadcrumb items exceeds this maximum,\n     * the breadcrumb will collapse and show an expand button.  \n     * If this prop is `undefined`, breadcrumb items will never collapse.\n     */\n    @Prop() maxItems?: number;\n    /**\n     * The number of breadcrumb items to show before the expand button.\n     * If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,\n     * the breadcrumb will not be collapsed.\n     */\n    @Prop() itemsBeforeCollapse: number = 1;\n    /**\n     * The number of breadcrumb items to show after the expand button.\n     * If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,\n     * the breadcrumb will not be collapsed.\n     */\n    @Prop() itemsAfterCollapse: number = 2;\n    /** Set `aria-label` for the expand button when the breadcrumb is collapsed. */\n    @Prop() ariaLabelExpandButton?: string = EXPAND_BTN_ARIA_LABEL_DEFAULT;\n\n    /**\n     * Show breadcrumb items that are inside the hidden-items slot.\n     */\n    @State() private showHiddenItems: boolean = false;\n\n    @Watch('maxItems')\n    @Watch('itemsBeforeCollapse')\n    @Watch('itemsAfterCollapse')\n    handleCollapsePropsChange() {\n        this.updateCollapsedViewMode();\n    }\n\n    @Watch('ariaLabelExpandButton')\n    handleAriaLabelExpandBtnChange(newValue: string) {\n        this.expandBtnEl?.setAriaAttribute('aria-label', newValue);\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, BREADCRUMB_INHERITED_ATTRS),\n        };\n        this.updateCollapsedViewMode();\n    }\n\n    componentDidLoad(): void {\n        this.expandBtnEl?.setAriaAttribute('aria-label', this.ariaLabelExpandButton);\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.navEl, attr, value);\n    }\n\n    private getBreadcrumbItems(): HTMLWcsBreadcrumbItemElement[] {\n        return Array.from(this.el.querySelectorAll('wcs-breadcrumb-item'));\n    }\n\n    private shouldCollapseItems(): boolean {\n        return (\n            !!this.maxItems &&\n            this.getBreadcrumbItems().length > this.maxItems &&\n            this.itemsBeforeCollapse + this.itemsAfterCollapse <= this.maxItems\n        );\n    }\n\n    private updateCollapsedViewMode(): void {\n        if (this.shouldCollapseItems()) {\n            this.assignSlotNamesForCollapsedViewMode();\n        } else {\n            this.assignSlotNamesForNonCollapsedViewMode();\n        }\n    }\n\n    /**\n     * Setting slot names on breadcrumb items allows to leverage JSX in the render method.\n     */\n    private assignSlotNamesForCollapsedViewMode(): void {\n        const breadcrumbItems = this.getBreadcrumbItems();\n        const itemBeforeExpandBtnIndex = this.itemsBeforeCollapse - 1;\n        const itemAfterExpandBtnIndex = breadcrumbItems.length - this.itemsAfterCollapse;\n\n        breadcrumbItems.forEach((breadcrumbItem, index) => {\n            if (index <= itemBeforeExpandBtnIndex) {\n                breadcrumbItem.slot = 'items-before-expand-btn';\n                breadcrumbItem.last = false;\n            } else if (index > itemBeforeExpandBtnIndex && index < itemAfterExpandBtnIndex) {\n                breadcrumbItem.slot = 'hidden-items';\n                breadcrumbItem.last = false;\n            } else {\n                breadcrumbItem.slot = 'items-after-expand-btn';\n                breadcrumbItem.last = index === breadcrumbItems.length - 1;\n            }\n        });\n    }\n    \n    private assignSlotNamesForNonCollapsedViewMode(): void {\n        const breadcrumbItems = this.getBreadcrumbItems();\n        breadcrumbItems.forEach((breadcrumbItem, index) => {\n            breadcrumbItem.slot = 'non-collapsed';\n            breadcrumbItem.last = index === breadcrumbItems.length - 1;\n        });\n    }\n\n    private handleSlotChange(): void {\n        this.updateCollapsedViewMode();\n        this.showHiddenItems = false;\n        forceUpdate(this);\n    }\n\n    private handleOnExpandBtnClick(): void {\n        // We leave the breadcrumb items in the hidden-items slot, without passing them to\n        // the non-collapsed slot, so that we know which items to hide again later if needed.\n        // For future implementations, the expand button could show or hide hidden items on click,\n        // with a wcs-dropdown for example.\n        this.showHiddenItems = true;\n        // We wait for the first hidden item to be visible in the DOM again\n        // to be able to focus it.\n        requestAnimationFrame(() => this.setFocusToFirstHiddenItem());\n    }\n\n    /**\n     * Avoid losing focus after clicking the expand button.\n     * We need to give focus back to the first breadcrumb item link that was hidden before.\n     */\n    private setFocusToFirstHiddenItem(): void {\n        const breadcrumbItems = this.getBreadcrumbItems();\n        const firstHiddenItemIndex = this.itemsBeforeCollapse;\n        const firstHiddenItem = breadcrumbItems[firstHiddenItemIndex];\n        const firstHiddenItemSlot =\n            firstHiddenItem.shadowRoot.querySelector('slot') as HTMLSlotElement;\n        const breadcrumbItemLinkToFocus =\n            firstHiddenItemSlot.assignedElements()[0] as HTMLAnchorElement;\n        breadcrumbItemLinkToFocus?.focus();\n    }\n\n    private renderExpandAllButton() {\n        const expandBtnIsLastItem = this.itemsAfterCollapse === 0;\n        return (\n            <div role=\"listitem\" class=\"item-not-slotted\">\n                <wcs-button\n                    mode=\"clear\"\n                    shape=\"square\"\n                    size=\"s\"\n                    onClick={this.handleOnExpandBtnClick.bind(this)}\n                    ref={(el) => this.expandBtnEl = el}\n                >\n                    <wcs-mat-icon icon=\"more_horiz\" />\n                </wcs-button>\n                {!expandBtnIsLastItem && (\n                    <span class=\"item-icon\" aria-hidden=\"true\">\n                        {ICONS_FONT_CHEVRON_UNICODE}\n                    </span>\n                )}\n            </div>\n        );\n    }\n\n    render() {\n        const showExpandBtn = this.shouldCollapseItems() && !this.showHiddenItems;\n        return (\n            <Host>\n                <nav\n                    class={`wcs-breadcrumb-container${this.showHiddenItems ? ' show-hidden-items' : ''}`}\n                    aria-label={NAV_ARIA_LABEL_DEFAULT}\n                    {...this.inheritedAttributes}\n                    ref={(el) => this.navEl = el}\n                >\n                    {/*\n                    * We use aria roles here instead of an <ol> tag\n                    * so that the list can be browsed correctly on Firefox with screen readers.\n                    * There seems to be an issue with Firefox and the Shadow DOM.\n                    */}\n                    <div role=\"list\">\n                        {/* Only the main slot shoud be used by consumers. */}\n                        <slot onSlotchange={this.handleSlotChange.bind(this)} />\n                        {/* Non collapsed view mode */}\n                        <slot name=\"non-collapsed\"></slot>\n                        {/* Collapsed view mode */}\n                        <slot name=\"items-before-expand-btn\" />\n                        <slot name=\"hidden-items\" />\n                        {showExpandBtn && this.renderExpandAllButton()}\n                        <slot name=\"items-after-expand-btn\" />\n                    </div>\n                </nav>\n            </Host>\n        );\n    }\n}\n"],"mappings":"gRAAA,MAAMA,EAAgB,+tCACtB,MAAAC,EAAeD,ECmBf,MAAME,EAA6B,G,MA+BtBC,EAAUC,EAAA,MAAAD,UAAAE,E,kEAKXC,KAAAC,oBAA4C,G,iDAad,E,wBAMD,E,2BAEIC,E,qBAKG,K,CAK5C,yBAAAC,GACIH,KAAKI,yB,CAIT,8BAAAC,CAA+BC,G,OAC3BC,EAAAP,KAAKQ,eAAW,MAAAD,SAAA,SAAAA,EAAEE,iBAAiB,aAAcH,E,CAGrD,iBAAAI,GACIV,KAAKC,oBAAmBU,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsBb,KAAKc,KAC3BC,EAAkBf,KAAKc,GAAIlB,IAElCI,KAAKI,yB,CAGT,gBAAAY,G,OACIT,EAAAP,KAAKQ,eAAW,MAAAD,SAAA,SAAAA,EAAEE,iBAAiB,aAAcT,KAAKiB,sB,CAI1D,sBAAMR,CAAiBS,EAAyBC,GAC5CC,EAAqBpB,KAAKqB,MAAOH,EAAMC,E,CAGnC,kBAAAG,GACJ,OAAOC,MAAMC,KAAKxB,KAAKc,GAAGW,iBAAiB,uB,CAGvC,mBAAAC,GACJ,QACM1B,KAAK2B,UACP3B,KAAKsB,qBAAqBM,OAAS5B,KAAK2B,UACxC3B,KAAK6B,oBAAsB7B,KAAK8B,oBAAsB9B,KAAK2B,Q,CAI3D,uBAAAvB,GACJ,GAAIJ,KAAK0B,sBAAuB,CAC5B1B,KAAK+B,qC,KACF,CACH/B,KAAKgC,wC,EAOL,mCAAAD,GACJ,MAAME,EAAkBjC,KAAKsB,qBAC7B,MAAMY,EAA2BlC,KAAK6B,oBAAsB,EAC5D,MAAMM,EAA0BF,EAAgBL,OAAS5B,KAAK8B,mBAE9DG,EAAgBG,SAAQ,CAACC,EAAgBC,KACrC,GAAIA,GAASJ,EAA0B,CACnCG,EAAeE,KAAO,0BACtBF,EAAeG,KAAO,K,MACnB,GAAIF,EAAQJ,GAA4BI,EAAQH,EAAyB,CAC5EE,EAAeE,KAAO,eACtBF,EAAeG,KAAO,K,KACnB,CACHH,EAAeE,KAAO,yBACtBF,EAAeG,KAAOF,IAAUL,EAAgBL,OAAS,C,KAK7D,sCAAAI,GACJ,MAAMC,EAAkBjC,KAAKsB,qBAC7BW,EAAgBG,SAAQ,CAACC,EAAgBC,KACrCD,EAAeE,KAAO,gBACtBF,EAAeG,KAAOF,IAAUL,EAAgBL,OAAS,CAAC,G,CAI1D,gBAAAa,GACJzC,KAAKI,0BACLJ,KAAK0C,gBAAkB,MACvBC,EAAY3C,K,CAGR,sBAAA4C,GAKJ5C,KAAK0C,gBAAkB,KAGvBG,uBAAsB,IAAM7C,KAAK8C,6B,CAO7B,yBAAAA,GACJ,MAAMb,EAAkBjC,KAAKsB,qBAC7B,MAAMyB,EAAuB/C,KAAK6B,oBAClC,MAAMmB,EAAkBf,EAAgBc,GACxC,MAAME,EACFD,EAAgBE,WAAWC,cAAc,QAC7C,MAAMC,EACFH,EAAoBI,mBAAmB,GAC3CD,IAAyB,MAAzBA,SAAyB,SAAzBA,EAA2BE,O,CAGvB,qBAAAC,GACJ,MAAMC,EAAsBxD,KAAK8B,qBAAuB,EACxD,OACI2B,EAAA,OAAKC,KAAK,WAAWC,MAAM,oBACvBF,EAAA,cACIG,KAAK,QACLC,MAAM,SACNC,KAAK,IACLC,QAAS/D,KAAK4C,uBAAuBoB,KAAKhE,MAC1CiE,IAAMnD,GAAOd,KAAKQ,YAAcM,GAEhC2C,EAAA,gBAAcS,KAAK,iBAErBV,GACEC,EAAA,QAAME,MAAM,YAAW,cAAa,QAC/BQ,G,CAOrB,MAAAC,GACI,MAAMC,EAAgBrE,KAAK0B,wBAA0B1B,KAAK0C,gBAC1D,OACIe,EAACa,EAAI,CAAAC,IAAA,4CACDd,EAAA,MAAA9C,OAAAC,OAAA,CAAA2D,IAAA,2CACIZ,MAAO,2BAA2B3D,KAAK0C,gBAAkB,qBAAuB,KAAI,aACxE8B,GACRxE,KAAKC,oBAAmB,CAC5BgE,IAAMnD,GAAOd,KAAKqB,MAAQP,IAO1B2C,EAAA,OAAAc,IAAA,2CAAKb,KAAK,QAEND,EAAA,QAAAc,IAAA,2CAAME,aAAczE,KAAKyC,iBAAiBuB,KAAKhE,QAE/CyD,EAAA,QAAAc,IAAA,2CAAMG,KAAK,kBAEXjB,EAAA,QAAAc,IAAA,2CAAMG,KAAK,4BACXjB,EAAA,QAAAc,IAAA,2CAAMG,KAAK,iBACVL,GAAiBrE,KAAKuD,wBACvBE,EAAA,QAAAc,IAAA,2CAAMG,KAAK,6B"}

package/bundle/wcs-button.d.ts

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

package/bundle/wcs-button.js

@@ -0,0 +1,2 @@
+import{B as o,d as s}from"./p-6bc981dd.js";const t=o;const c=s;export{t as WcsButton,c as defineCustomElement};
+//# sourceMappingURL=wcs-button.js.map

package/bundle/wcs-button.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":[],"mappings":""}

package/bundle/wcs-card-body.d.ts

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

package/bundle/wcs-card-body.js

@@ -0,0 +1,2 @@
+import{p as s,H as t,h as c,c as a}from"./p-2bef72c7.js";const e=":host{--wcs-card-body-padding:var(--wcs-semantic-spacing-base-300);--wcs-card-body-gap:var(--wcs-semantic-spacing-base);flex:1 1 auto;padding:var(--wcs-card-body-padding)}:host(.horizontal),:host(.vertical){display:flex;flex-direction:column;gap:var(--wcs-card-body-gap)}::slotted(p){margin:0}";const n=e;const o=s(class s extends t{constructor(){super();this.__registerHost();this.__attachShadow();this.orientation=null}async setOrientation(s){this.orientation=s}render(){return c(a,{key:"27547ebfbab0737a4947baf9ff4086d37b494155",class:this.orientation},c("slot",{key:"f9444717438f9981b479b39575c03297b04a5847"}))}static get style(){return n}},[1,"wcs-card-body",{orientation:[32],setOrientation:[64]}]);function r(){if(typeof customElements==="undefined"){return}const s=["wcs-card-body"];s.forEach((s=>{switch(s){case"wcs-card-body":if(!customElements.get(s)){customElements.define(s,o)}break}}))}const i=o;const d=r;export{i as WcsCardBody,d as defineCustomElement};
+//# sourceMappingURL=wcs-card-body.js.map

package/bundle/wcs-card-body.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cardBodyCss","WcsCardBodyStyle0","CardBody","proxyCustomElement","H","setOrientation","orientation","this","render","h","Host","key","class"],"sources":["src/components/card-body/card-body.scss?tag=wcs-card-body&encapsulation=shadow","src/components/card-body/card-body.tsx"],"sourcesContent":[":host {\n    --wcs-card-body-padding: var(--wcs-semantic-spacing-base-300);\n    --wcs-card-body-gap: var(--wcs-semantic-spacing-base);\n\n    flex: 1 1 auto;\n    padding: var(--wcs-card-body-padding);\n}\n\n:host(.horizontal), :host(.vertical) {\n    display: flex;\n    flex-direction: column;\n    gap: var(--wcs-card-body-gap);\n}\n\n::slotted(p) {\n    margin: 0;\n}\n","import { Component, ComponentInterface, h, Host, Method, State } from '@stencil/core';\nimport { CardOrientation } from '../card/card-interface';\n\n/**\n * The card-body is a subcomponent of `wcs-card`. It represents content of the card with an extra padding around.\n *\n * @slot default - Default slot for the card body content. You can put anything you want. If you want a structured card, you can use `wcs-card-header`, `wcs-card-content`, and `wcs-card-footer` as slot\n *\n * @cssprop --wcs-card-body-padding - Padding of the card body\n * @cssprop --wcs-card-body-gap - Gap between each element in the card body\n */\n@Component({\n    tag: 'wcs-card-body',\n    styleUrl: 'card-body.scss',\n    shadow: true\n})\nexport class CardBody implements ComponentInterface {\n    @State() private orientation: CardOrientation = null;\n\n    /**\n     * @internal this method is not intended to be used by the user\n     */\n    @Method()\n    async setOrientation(orientation: CardOrientation) {\n        this.orientation = orientation;\n    }\n\n    render() {\n        return (\n            <Host class={this.orientation}>\n                <slot></slot>\n            </Host>\n        );\n    }\n}\n"],"mappings":"yDAAA,MAAMA,EAAc,wSACpB,MAAAC,EAAeD,E,MCeFE,EAAQC,EAAA,MAAAD,UAAAE,E,mFAC+B,I,CAMhD,oBAAMC,CAAeC,GACjBC,KAAKD,YAAcA,C,CAGvB,MAAAE,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAOL,KAAKD,aACdG,EAAA,QAAAE,IAAA,6C"}

package/bundle/wcs-card-content.d.ts

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

package/bundle/wcs-card-content.js

@@ -0,0 +1,2 @@
+import{p as t,H as c,h as e,c as s}from"./p-2bef72c7.js";const o=":host{--wcs-card-content-color:var(--wcs-semantic-color-text-tertiary);--wcs-card-content-font-size:var(--wcs-semantic-font-size-body-3);display:block;overflow:hidden}::slotted(*){color:var(--wcs-card-content-color);font-size:var(--wcs-card-content-font-size);margin:0}";const n=o;const r=t(class t extends c{constructor(){super();this.__registerHost();this.__attachShadow()}render(){return e(s,{key:"970e45353d35495c5a4500e168f6b9fda970c7a0"},e("slot",{key:"26f30084a71090b8894593f8c57f35a7e9f60f65"}))}static get style(){return n}},[1,"wcs-card-content"]);function a(){if(typeof customElements==="undefined"){return}const t=["wcs-card-content"];t.forEach((t=>{switch(t){case"wcs-card-content":if(!customElements.get(t)){customElements.define(t,r)}break}}))}const f=r;const i=a;export{f as WcsCardContent,i as defineCustomElement};
+//# sourceMappingURL=wcs-card-content.js.map

package/bundle/wcs-card-content.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cardContentCss","WcsCardContentStyle0","CardContent","proxyCustomElement","H","render","h","Host","key"],"sources":["src/components/card-content/card-content.scss?tag=wcs-card-content&encapsulation=shadow","src/components/card-content/card-content.tsx"],"sourcesContent":[":host {\n    --wcs-card-content-color: var(--wcs-semantic-color-text-tertiary);\n    --wcs-card-content-font-size: var(--wcs-semantic-font-size-body-3);\n\n    display: block;\n    overflow: hidden;\n}\n\n::slotted(*) {\n    color: var(--wcs-card-content-color);\n    font-size: var(--wcs-card-content-font-size);\n    margin: 0;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n/**\n * A content for a card inside card-body. Commonly used to provide more details about the card content. \n * The information provided should be concise and easy to read.\n * \n * By default, the margin is removed from the top and bottom of the card description.\n * \n * @slot - The content of the card description.\n * \n * @cssprop --wcs-card-content-color - The color of the card description.\n * @cssprop --wcs-card-content-font-size - The font size of the card description.\n */\n@Component({\n  tag: 'wcs-card-content',\n  styleUrl: 'card-content.scss',\n  shadow: true,\n})\nexport class CardContent {\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n\n}\n"],"mappings":"yDAAA,MAAMA,EAAiB,gRACvB,MAAAC,EAAeD,E,MCiBFE,EAAWC,EAAA,MAAAD,UAAAE,E,kEAEtB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,QAAAE,IAAA,6C"}

package/bundle/wcs-card-footer.d.ts

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

package/bundle/wcs-card-footer.js

@@ -0,0 +1,2 @@
+import{p as e,H as c,h as t,c as s}from"./p-2bef72c7.js";const o=":host{--wcs-card-footer-gap:var(--wcs-semantic-spacing-base);display:flex;flex-direction:row;align-items:center;gap:var(--wcs-card-footer-gap)}";const r=o;const a=e(class e extends c{constructor(){super();this.__registerHost();this.__attachShadow()}render(){return t(s,{key:"8b600e63a3178bbf9c3d577053b927ff6ea9a48f"},t("slot",{key:"1ce0728f66cd296c44dcc4d85c9e9d9dcbae853a"}))}static get style(){return r}},[1,"wcs-card-footer"]);function n(){if(typeof customElements==="undefined"){return}const e=["wcs-card-footer"];e.forEach((e=>{switch(e){case"wcs-card-footer":if(!customElements.get(e)){customElements.define(e,a)}break}}))}const f=a;const d=n;export{f as WcsCardFooter,d as defineCustomElement};
+//# sourceMappingURL=wcs-card-footer.js.map

package/bundle/wcs-card-footer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cardFooterCss","WcsCardFooterStyle0","CardFooter","proxyCustomElement","H","render","h","Host","key"],"sources":["src/components/card-footer/card-footer.scss?tag=wcs-card-footer&encapsulation=shadow","src/components/card-footer/card-footer.tsx"],"sourcesContent":[":host {\n    --wcs-card-footer-gap: var(--wcs-semantic-spacing-base);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--wcs-card-footer-gap);\n}\n","import { Component, Host, h } from '@stencil/core';\n\n/**\n * The card footer component is a container that display content at the bottom of the card.\n * It uses a flex layout to organize actions the user can take with a card\n * \n * @cssprop --wcs-card-footer-gap - Gap of the card footer\n */\n@Component({\n    tag: 'wcs-card-footer',\n    styleUrl: 'card-footer.scss',\n    shadow: true,\n})\nexport class CardFooter {\n\n    render() {\n        return (\n            <Host>\n                <slot></slot>\n            </Host>\n        );\n    }\n\n}\n"],"mappings":"yDAAA,MAAMA,EAAgB,kJACtB,MAAAC,EAAeD,E,MCYFE,EAAUC,EAAA,MAAAD,UAAAE,E,kEAEnB,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,4CACDF,EAAA,QAAAE,IAAA,6C"}

package/bundle/wcs-card-header.d.ts

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

package/bundle/wcs-card-header.js

@@ -0,0 +1,2 @@
+import{p as e,H as t,h as a,c}from"./p-2bef72c7.js";const s=":host{--wcs-card-header-title-color:var(--wcs-semantic-color-text-primary);--wcs-card-header-title-font-size:var(--wcs-semantic-font-size-heading-5);--wcs-card-header-title-font-weight:var(--wcs-semantic-font-weight-heavy);--wcs-card-header-gap:var(--wcs-semantic-spacing-base-150);display:flex;flex-direction:column;align-items:flex-start;gap:var(--wcs-card-header-gap)}:host wcs-badge{align-self:flex-start}:host .header-content{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%}h3{font-size:var(--wcs-card-header-title-font-size);font-weight:var(--wcs-card-header-title-font-weight);color:var(--wcs-card-header-title-color);margin-top:0;margin-bottom:0}";const r=s;const d=e(class e extends t{constructor(){super();this.__registerHost();this.__attachShadow()}render(){return a(c,{key:"6a79563b6c56b7c7262e447ea5946d094590afb6"},a("slot",{key:"74b2f0d43ee991ebee97c0d9d7f6620e30dc9881",name:"badges"}),a("div",{key:"71f110c0e5360352a059d84235c1a1d513c83c0a",class:"header-content"},a("h3",{key:"4b4763ae375f4b96e0018772df7f9af0a4fd20fe"},a("slot",{key:"c2925912655cbca5e351067e42f6a9c67de07083"})),a("slot",{key:"37b2f523adaf2685de1d76dde3942dba5c2379c1",name:"actions"})))}static get style(){return r}},[1,"wcs-card-header"]);function n(){if(typeof customElements==="undefined"){return}const e=["wcs-card-header"];e.forEach((e=>{switch(e){case"wcs-card-header":if(!customElements.get(e)){customElements.define(e,d)}break}}))}const o=d;const i=n;export{o as WcsCardHeader,i as defineCustomElement};
+//# sourceMappingURL=wcs-card-header.js.map

package/bundle/wcs-card-header.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cardHeaderCss","WcsCardHeaderStyle0","CardHeader","proxyCustomElement","H","render","h","Host","key","name","class"],"sources":["src/components/card-header/card-header.scss?tag=wcs-card-header&encapsulation=shadow","src/components/card-header/card-header.tsx"],"sourcesContent":[":host {\n    --wcs-card-header-title-color: var(--wcs-semantic-color-text-primary);\n    --wcs-card-header-title-font-size: var(--wcs-semantic-font-size-heading-5);\n    --wcs-card-header-title-font-weight: var(--wcs-semantic-font-weight-heavy);\n    --wcs-card-header-gap: var(--wcs-semantic-spacing-base-150);\n\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: var(--wcs-card-header-gap);\n\n    wcs-badge {\n        align-self: flex-start;\n    }\n\n    .header-content {\n        display: flex;\n        flex-direction: row;\n        justify-content: space-between;\n        align-items: center;\n        width: 100%;\n    }\n}\n\nh3 {\n    font-size: var(--wcs-card-header-title-font-size);\n    font-weight: var(--wcs-card-header-title-font-weight);\n    color: var(--wcs-card-header-title-color);\n    margin-top: 0;\n    margin-bottom: 0;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n/**\n * The card header component is a container that display a title and an action, it can also display a label as a `<wcs-badge>` component.\n * \n * The default slotted element is displayed as a `<h3>` element\n *\n * @slot badges - Content for the badge label\n * @slot actions - Button or any action to display on the right of the title\n *\n * @cssprop --wcs-card-header-title-color - Color of the title\n * @cssprop --wcs-card-header-title-font-size - Font size of the title\n * @cssprop --wcs-card-header-title-font-weight - Font weight of the title\n * @cssprop --wcs-card-header-gap - Gap between the title and the badge\n */\n@Component({\n    tag: 'wcs-card-header',\n    styleUrl: 'card-header.scss',\n    shadow: true,\n})\nexport class CardHeader {\n    render() {\n        return (\n            <Host>\n                <slot name=\"badges\"></slot>\n                <div class=\"header-content\">\n                    <h3><slot></slot></h3>\n                    <slot name=\"actions\"></slot>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"mappings":"oDAAA,MAAMA,EAAgB,6rBACtB,MAAAC,EAAeD,E,MCmBFE,EAAUC,EAAA,MAAAD,UAAAE,E,kEACnB,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,4CACDF,EAAA,QAAAE,IAAA,2CAAMC,KAAK,WACXH,EAAA,OAAAE,IAAA,2CAAKE,MAAM,kBACPJ,EAAA,MAAAE,IAAA,4CAAIF,EAAA,QAAAE,IAAA,8CACJF,EAAA,QAAAE,IAAA,2CAAMC,KAAK,a"}

package/bundle/wcs-card-media.d.ts

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

package/bundle/wcs-card-media.js

@@ -0,0 +1,2 @@
+import{p as t,H as s,h as o,c as r}from"./p-2bef72c7.js";const a=":host{display:block;--wcs-card-media-max-width-horizontal:160px}:host ::slotted(*),:host ::slotted([slot=horizontal]),:host ::slotted([slot=vertical]){display:block;object-fit:cover;width:100%;height:100%}:host(.vertical) ::slotted(*),:host(.vertical) ::slotted([slot=vertical]){border-radius:var(--wcs-card-border-radius) var(--wcs-card-border-radius) 0 0;aspect-ratio:16/9}:host(.horizontal) ::slotted(*),:host(.horizontal) ::slotted([slot=horizontal]){width:var(--wcs-card-media-max-width-horizontal);aspect-ratio:1/1;border-radius:var(--wcs-card-border-radius) 0 0 var(--wcs-card-border-radius)}";const e=a;const c=t(class t extends s{constructor(){super();this.__registerHost();this.__attachShadow();this.orientation="vertical"}async setOrientation(t){this.orientation=t}render(){return o(r,{key:"8b54a791a4d1c8bfdc772cb5cd16f3a3dfec0682",class:this.orientation},o("slot",{key:"a7f5751e8e1f3ef3b1b18af34384cb598a80b690"}),this.orientation==="vertical"?o("slot",{name:"vertical"}):o("slot",{name:"horizontal"}))}static get style(){return e}},[1,"wcs-card-media",{orientation:[32],setOrientation:[64]}]);function i(){if(typeof customElements==="undefined"){return}const t=["wcs-card-media"];t.forEach((t=>{switch(t){case"wcs-card-media":if(!customElements.get(t)){customElements.define(t,c)}break}}))}const d=c;const l=i;export{d as WcsCardMedia,l as defineCustomElement};
+//# sourceMappingURL=wcs-card-media.js.map

package/bundle/wcs-card-media.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cardMediaCss","WcsCardMediaStyle0","CardMedia","proxyCustomElement","H","setOrientation","orientation","this","render","h","Host","key","class","name"],"sources":["src/components/card-media/card-media.scss?tag=wcs-card-media&encapsulation=shadow","src/components/card-media/card-media.tsx"],"sourcesContent":[":host {\n    display: block;\n\n    --wcs-card-media-max-width-horizontal: 160px;\n\n    ::slotted(*), ::slotted([slot=\"horizontal\"]), ::slotted([slot=\"vertical\"]) {\n        display: block;\n        object-fit: cover; // object position = 50% 50%\n\n        width: 100%;\n        height: 100%;\n    }\n}\n\n:host(.vertical) {\n    ::slotted(*), ::slotted([slot=\"vertical\"]) {\n        border-radius: var(--wcs-card-border-radius) var(--wcs-card-border-radius) 0 0;\n        aspect-ratio: 16 / 9;\n    }\n}\n\n:host(.horizontal) {\n    ::slotted(*), ::slotted([slot=\"horizontal\"]) {\n        width: var(--wcs-card-media-max-width-horizontal);\n        aspect-ratio: 1 / 1;\n        border-radius: var(--wcs-card-border-radius) 0 0 var(--wcs-card-border-radius);\n    }\n}\n","import { Component, Host, h, Method, State } from '@stencil/core';\nimport { CardOrientation } from \"../card/card-interface\";\n\n/**\n * The card media component is a container that display an image/icon inside a card. \n * On horizontal orientation, the image/icon has an aspect ratio of 1/1\n * On vertical orientation, the image/icon has an aspect ratio of 16/9.\n * \n * @slot - The default slot where the image/icon is displayed\n * @slot vertical - The slot where the image/icon is displayed when the card is vertical\n * @slot horizontal - The slot where the image/icon is displayed when the card is horizontal\n * \n * @cssprop --wcs-card-media-max-width-horizontal - Max width of the image when the card is horizontal\n */\n@Component({\n    tag: 'wcs-card-media',\n    styleUrl: 'card-media.scss',\n    shadow: true,\n})\nexport class CardMedia {\n    @State() private orientation: CardOrientation = 'vertical';\n\n    /**\n     * @internal this method is not intended to be used by the user\n     */\n    @Method()\n    async setOrientation(orientation: CardOrientation) {\n        this.orientation = orientation;\n    }\n\n    render() {\n        return (\n            <Host class={this.orientation}>\n                <slot></slot>\n                {this.orientation === 'vertical' ? <slot name=\"vertical\"></slot> : <slot name=\"horizontal\"></slot>}\n            </Host>\n        );\n    }\n\n}\n"],"mappings":"yDAAA,MAAMA,EAAe,0lBACrB,MAAAC,EAAeD,E,MCkBFE,EAASC,EAAA,MAAAD,UAAAE,E,mFAC8B,U,CAMhD,oBAAMC,CAAeC,GACjBC,KAAKD,YAAcA,C,CAGvB,MAAAE,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAOL,KAAKD,aACdG,EAAA,QAAAE,IAAA,6CACCJ,KAAKD,cAAgB,WAAaG,EAAA,QAAMI,KAAK,aAAqBJ,EAAA,QAAMI,KAAK,e"}

package/bundle/wcs-card.d.ts

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

package/bundle/wcs-card.js

@@ -0,0 +1,2 @@
+import{p as r,H as o,h as t}from"./p-2bef72c7.js";const a=":host{--wcs-card-border-color:var(--wcs-semantic-color-border-secondary);--wcs-card-border-radius:var(--wcs-semantic-border-radius-base);--wcs-card-border-width:var(--wcs-semantic-border-width-default);--wcs-card-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-card-text-color:var(--wcs-semantic-color-text-primary);--wcs-card-horizontal-min-height:160px;position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-clip:border-box;border-radius:var(--wcs-card-border-radius);background-color:var(--wcs-card-background-color);color:var(--wcs-card-text-color)}:host([mode=raised]){box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2)}:host([mode=flat]){border:solid var(--wcs-card-border-width) var(--wcs-card-border-color)}:host([orientation=horizontal]){flex-direction:row;min-height:var(--wcs-card-horizontal-height)}:host([orientation=vertical]){flex-direction:column}";const e=a;const c=r(class r extends o{constructor(){super();this.__registerHost();this.__attachShadow();this.mode="flat";this.orientation=null}orientationChanged(){this.updateWcsCardImageOrientation()}onSlotChange(){if(this.orientation){this.updateWcsCardBodyOrientation();this.updateWcsCardImageOrientation()}}updateWcsCardImageOrientation(){var r;(r=this.findWcsCardMedia())===null||r===void 0?void 0:r.setOrientation(this.orientation)}updateWcsCardBodyOrientation(){var r;(r=this.findWcsCardBody())===null||r===void 0?void 0:r.setOrientation(this.orientation)}findWcsCardMedia(){return this.el.querySelector("wcs-card-media")}findWcsCardBody(){return this.el.querySelector("wcs-card-body")}render(){return t("slot",{key:"20a57cf8fc64155e65a98bdb69618ec013ea5a7f",onSlotchange:()=>this.onSlotChange()})}get el(){return this}static get watchers(){return{orientation:["orientationChanged"]}}static get style(){return e}},[1,"wcs-card",{mode:[1537],orientation:[513]},undefined,{orientation:["orientationChanged"]}]);function i(){if(typeof customElements==="undefined"){return}const r=["wcs-card"];r.forEach((r=>{switch(r){case"wcs-card":if(!customElements.get(r)){customElements.define(r,c)}break}}))}const s=c;const d=i;export{s as WcsCard,d as defineCustomElement};
+//# sourceMappingURL=wcs-card.js.map

package/bundle/wcs-card.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cardCss","WcsCardStyle0","Card","proxyCustomElement","H","orientationChanged","this","updateWcsCardImageOrientation","onSlotChange","orientation","updateWcsCardBodyOrientation","_a","findWcsCardMedia","setOrientation","findWcsCardBody","el","querySelector","render","h","key","onSlotchange"],"sources":["src/components/card/card.scss?tag=wcs-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":[":host {\n    --wcs-card-border-color: var(--wcs-semantic-color-border-secondary);\n    --wcs-card-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-card-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-card-background-color: var(--wcs-semantic-color-background-surface-primary);\n    --wcs-card-text-color: var(--wcs-semantic-color-text-primary);\n\n    --wcs-card-horizontal-min-height: 160px;\n\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    word-wrap: break-word;\n    background-clip: border-box;\n    border-radius: var(--wcs-card-border-radius);\n    background-color: var(--wcs-card-background-color);\n    color: var(--wcs-card-text-color);\n}\n\n:host([mode=\"raised\"]) {\n    /* Card mode raised is deprecated in the new design system */\n    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .20)\n}\n\n:host([mode=\"flat\"]) {\n    border: solid var(--wcs-card-border-width) var(--wcs-card-border-color);\n}\n\n:host([orientation=\"horizontal\"]) {\n    flex-direction: row;\n    min-height: var(--wcs-card-horizontal-height);\n}\n\n:host([orientation=\"vertical\"]) {\n    flex-direction: column;\n}\n","import { Component, ComponentInterface, h, Prop, Element, Watch } from '@stencil/core';\nimport { CardMode, CardOrientation } from './card-interface';\n\n/**\n * The card component is a container that display content such as text, images, buttons, and lists.  \n * A card can be a single component, but is often made up of a header, title, subtitle, and content.\n * \n * While they're very flexible, it's important to use them consistently. You may use `wcs-card-media` outside `wcs-card-body`\n * and `wcs-card-header` `wcs-card-content` `wcs-card-footer` within `wcs-card-body` to make sure the card is well-designed.\n *\n * @slot - Default slot for the card content\n * \n * @cssprop --wcs-card-border-color - Border color of the card\n * @cssprop --wcs-card-border-radius - Border radius of the card\n * @cssprop --wcs-card-border-width - Border width of the card\n * @cssprop --wcs-card-background-color - Background color of the card\n * @cssprop --wcs-card-text-color - Text color of the card\n * @cssprop --wcs-card-horizontal-min-height - Min height of the card when horizontal\n */\n@Component({\n    tag: 'wcs-card',\n    styleUrl: 'card.scss',\n    shadow: true\n})\nexport class Card implements ComponentInterface {\n    @Element() private el!: HTMLElement;\n    @Prop({reflect: true, mutable: true})\n    mode: CardMode = 'flat';\n    /**\n     * The orientation of the card, can be horizontal or vertical\n     */\n    @Prop({reflect: true})\n    orientation: CardOrientation = null;\n\n    @Watch('orientation')\n    orientationChanged() {\n        this.updateWcsCardImageOrientation();\n    }\n\n    private onSlotChange() {\n        if(this.orientation) {\n            this.updateWcsCardBodyOrientation();\n            this.updateWcsCardImageOrientation();\n        }\n    }\n\n    private updateWcsCardImageOrientation() {\n        this.findWcsCardMedia()?.setOrientation(this.orientation);\n    }\n\n    private updateWcsCardBodyOrientation() {\n        this.findWcsCardBody()?.setOrientation(this.orientation);\n    }\n\n    private findWcsCardMedia(): HTMLWcsCardMediaElement {\n        return this.el.querySelector('wcs-card-media');\n    }\n\n    private findWcsCardBody(): HTMLWcsCardBodyElement {\n        return this.el.querySelector('wcs-card-body');\n    }\n\n    render() {\n        return (\n            <slot onSlotchange={() => this.onSlotChange()}/>\n        );\n    }\n}\n"],"mappings":"kDAAA,MAAMA,EAAU,o+BAChB,MAAAC,EAAeD,E,MCuBFE,EAAIC,EAAA,MAAAD,UAAAE,E,4EAGI,O,iBAKc,I,CAG/B,kBAAAC,GACIC,KAAKC,+B,CAGD,YAAAC,GACJ,GAAGF,KAAKG,YAAa,CACjBH,KAAKI,+BACLJ,KAAKC,+B,EAIL,6BAAAA,G,OACJI,EAAAL,KAAKM,sBAAkB,MAAAD,SAAA,SAAAA,EAAEE,eAAeP,KAAKG,Y,CAGzC,4BAAAC,G,OACJC,EAAAL,KAAKQ,qBAAiB,MAAAH,SAAA,SAAAA,EAAEE,eAAeP,KAAKG,Y,CAGxC,gBAAAG,GACJ,OAAON,KAAKS,GAAGC,cAAc,iB,CAGzB,eAAAF,GACJ,OAAOR,KAAKS,GAAGC,cAAc,gB,CAGjC,MAAAC,GACI,OACIC,EAAA,QAAAC,IAAA,2CAAMC,aAAc,IAAMd,KAAKE,gB"}

package/bundle/wcs-checkbox.d.ts

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

package/bundle/wcs-checkbox.js

@@ -0,0 +1,2 @@
+import{C as o,d as s}from"./p-44a3b0b9.js";const t=o;const a=s;export{t as WcsCheckbox,a as defineCustomElement};
+//# sourceMappingURL=wcs-checkbox.js.map

package/bundle/wcs-checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":[],"mappings":""}

package/bundle/wcs-chip.d.ts

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

package/bundle/wcs-chip.js

@@ -0,0 +1,2 @@
+import{p as s,H as e,d as o,h as c,c as i}from"./p-2bef72c7.js";const r=":host{--wcs-chip-height:var(--wcs-semantic-size-s);--wcs-chip-font-size:var(--wcs-semantic-font-size-base);--wcs-chip-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-chip-focus-outline-border-width:var(--wcs-semantic-border-width-large);--wcs-chip-padding-vertical:var(--wcs-semantic-spacing-base);--wcs-chip-padding-horizontal:var(--wcs-semantic-spacing-base-150);--wcs-chip-padding-horizontal-dismissible:var(--wcs-semantic-spacing-base);--wcs-chip-selectable-background-color:var(--wcs-semantic-color-background-action-secondary-default);--wcs-chip-selectable-background-color-pressed:var(--wcs-semantic-color-background-action-secondary-press);--wcs-chip-selectable-background-color-hover:var(--wcs-semantic-color-background-action-secondary-hover);--wcs-chip-selectable-background-color-selected:var(--wcs-semantic-color-background-action-primary-default);--wcs-chip-selectable-background-color-selected-hover:var(--wcs-semantic-color-background-action-primary-hover);--wcs-chip-selectable-background-color-selected-pressed:var(--wcs-semantic-color-background-action-primary-press);--wcs-chip-selectable-background-color-selected-disabled:var(--wcs-semantic-color-background-action-primary-disabled);--wcs-chip-selectable-color:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-chip-selectable-color-hover:var(--wcs-semantic-color-foreground-action-secondary-hover);--wcs-chip-selectable-color-pressed:var(--wcs-semantic-color-foreground-action-secondary-press);--wcs-chip-selectable-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-chip-selectable-color-selected:var(--wcs-semantic-color-foreground-action-primary-default);--wcs-chip-selectable-color-selected-hover:var(--wcs-semantic-color-foreground-action-primary-hover);--wcs-chip-selectable-color-selected-pressed:var(--wcs-semantic-color-foreground-action-primary-press);--wcs-chip-border-radius:var(--wcs-semantic-border-radius-base);--wcs-chip-border-line-width:var(--wcs-semantic-border-width-default);--wcs-chip-selectable-border-color:var(--wcs-semantic-color-border-action-secondary-default);--wcs-chip-selectable-border-color-hover:var(--wcs-semantic-color-border-control-indicator-hover);--wcs-chip-selectable-border-color-pressed:var(--wcs-semantic-color-border-action-secondary-press);--wcs-chip-selectable-border-color-disabled:var(--wcs-semantic-color-border-action-secondary-disabled);--wcs-chip-selectable-content-gap:var(--wcs-semantic-spacing-base);--wcs-chip-selectable-focus-outline-color:var(--wcs-semantic-color-border-focus-base);--wcs-chip-dismissible-content-gap:var(--wcs-semantic-spacing-base-05);--wcs-chip-dismissible-padding-right:var(--wcs-semantic-spacing-base-05);--wcs-chip-dismissible-button-outline-radius:var(--wcs-semantic-border-radius-full);--wcs-chip-dismissible-primary-focus-outline-color:var(--wcs-semantic-color-border-focus-base-on-secondary);--wcs-chip-dismissible-primary-border-color:var(--wcs-semantic-color-background-action-primary-default);--wcs-chip-dismissible-primary-border-color-disabled:var(--wcs-semantic-color-background-action-primary-disabled);--wcs-chip-dismissible-primary-color:var(--wcs-semantic-color-foreground-action-primary-default);--wcs-chip-dismissible-primary-color-hover:var(--wcs-semantic-color-foreground-action-primary-hover);--wcs-chip-dismissible-primary-color-pressed:var(--wcs-semantic-color-foreground-action-primary-press);--wcs-chip-dismissible-primary-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-chip-dismissible-primary-background-color:var(--wcs-semantic-color-background-action-primary-default);--wcs-chip-dismissible-primary-background-color-hover:var(--wcs-semantic-color-background-action-primary-hover);--wcs-chip-dismissible-primary-background-color-pressed:var(--wcs-semantic-color-background-action-primary-press);--wcs-chip-dismissible-primary-background-color-disabled:var(--wcs-semantic-color-background-action-primary-disabled);--wcs-chip-dismissible-secondary-button-focus-outline-color:var(--wcs-semantic-color-border-focus-base);--wcs-chip-dismissible-secondary-border-color:var(--wcs-semantic-color-border-action-secondary-default);--wcs-chip-dismissible-secondary-border-color-disabled:var(--wcs-semantic-color-border-action-secondary-disabled);--wcs-chip-dismissible-secondary-color:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-chip-dismissible-secondary-color-disabled:var(--wcs-semantic-color-foreground-disabled);--wcs-chip-dismissible-secondary-background-color:var(--wcs-semantic-color-background-action-secondary-default);--wcs-chip-dismissible-secondary-button-background-color:var(--wcs-semantic-color-background-action-secondary-default);--wcs-chip-dismissible-secondary-button-background-color-hover:var(--wcs-semantic-color-background-surface-accent-lighter);--wcs-chip-dismissible-secondary-button-background-color-pressed:var(--wcs-semantic-color-background-surface-accent-light);--wcs-chip-dismissible-secondary-button-background-color-disabled:var(--wcs-semantic-color-background-action-secondary-disabled);display:inline-flex;align-items:center;vertical-align:middle;overflow:hidden;box-sizing:border-box;height:var(--wcs-chip-height);border-radius:var(--wcs-chip-border-radius);font-size:var(--wcs-chip-font-size);font-weight:var(--wcs-chip-font-weight);padding:var(--wcs-chip-padding-vertical) var(--wcs-chip-padding-horizontal);cursor:pointer;user-select:none;transition-property:color, background-color;transition-duration:var(--wcs-semantic-motion-duration-feedback-base);transition-timing-function:ease-out}:host([mode=selectable]){gap:var(--wcs-chip-selectable-content-gap);border:solid var(--wcs-chip-border-line-width) var(--wcs-chip-selectable-border-color);background-color:var(--wcs-chip-selectable-background-color);color:var(--wcs-chip-selectable-color)}:host([mode=selectable]):host(:focus-visible){outline:var(--wcs-chip-focus-outline-border-width) dashed var(--wcs-chip-selectable-focus-outline-color);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-chip-border-radius)}:host([mode=selectable]):host(:not([disabled])):host(:not([selected])):host(:hover){background-color:var(--wcs-chip-selectable-background-color-hover);color:var(--wcs-chip-selectable-color-hover);border-color:var(--wcs-chip-selectable-border-color-hover)}:host([mode=selectable]):host(:not([disabled])):host(:not([selected])):host(:active){background-color:var(--wcs-chip-selectable-background-color-pressed);color:var(--wcs-chip-selectable-color-pressed);border-color:var(--wcs-chip-selectable-border-color-pressed)}:host([mode=selectable]):host(:not([disabled])):host([selected]){color:var(--wcs-chip-selectable-color-selected);background-color:var(--wcs-chip-selectable-background-color-selected);border-color:transparent}:host([mode=selectable]):host(:not([disabled])):host([selected]) svg path{fill:var(--wcs-chip-selectable-color-selected);transform:translateY(-1.5px)}:host([mode=selectable]):host(:not([disabled])):host([selected]):host(:hover){background-color:var(--wcs-chip-selectable-background-color-selected-hover);color:var(--wcs-chip-selectable-color-selected-hover)}:host([mode=selectable]):host(:not([disabled])):host([selected]):host(:hover) svg path{fill:var(--wcs-chip-selectable-color-selected-hover)}:host([mode=selectable]):host(:not([disabled])):host([selected]):host(:active){background-color:var(--wcs-chip-selectable-background-color-selected-pressed);color:var(--wcs-chip-selectable-color-selected-pressed)}:host([mode=selectable]):host(:not([disabled])):host([selected]):host(:active) svg path{fill:var(--wcs-chip-selectable-color-selected-pressed)}:host([mode=selectable]):host([disabled]){color:var(--wcs-chip-selectable-color-disabled);cursor:not-allowed}:host([mode=selectable]):host([disabled]) svg path{fill:var(--wcs-chip-selectable-color-disabled)}:host([mode=selectable]):host([disabled]):host(:not([selected])){border-color:var(--wcs-chip-selectable-border-color-disabled)}:host([mode=selectable]):host([disabled]):host([selected]){background-color:var(--wcs-chip-selectable-background-color-selected-disabled);border:0}:host([mode=dismissible]){cursor:initial;border:solid var(--wcs-chip-border-line-width) var(--wcs-chip-dismissible-primary-border-color);color:var(--wcs-chip-dismissible-primary-color);background-color:var(--wcs-chip-dismissible-primary-background-color);gap:var(--wcs-chip-dismissible-content-gap);padding-right:var(--wcs-chip-dismissible-padding-right)}:host([mode=dismissible]) button{background:transparent;border:none;margin:0;padding:0;border-radius:var(--wcs-semantic-border-radius-full);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:inherit;width:var(--wcs-semantic-size-xs);height:var(--wcs-semantic-size-xs)}:host([mode=dismissible]) button:focus{outline:none}:host([mode=dismissible]) button:focus svg{outline:var(--wcs-chip-focus-outline-border-width) dashed var(--wcs-chip-dismissible-primary-focus-outline-color);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-chip-dismissible-button-outline-radius)}:host([mode=dismissible]):host(:not([open])){display:none;margin:0}:host([mode=dismissible]):host(:not([disabled])) button:hover{background-color:var(--wcs-chip-dismissible-primary-background-color-hover);color:var(--wcs-chip-dismissible-primary-color-hover)}:host([mode=dismissible]):host(:not([disabled])) button:active{background-color:var(--wcs-chip-dismissible-primary-background-color-pressed);color:var(--wcs-chip-dismissible-primary-color-pressed)}:host([mode=dismissible]):host([disabled]){color:var(--wcs-chip-dismissible-primary-color-disabled);background-color:var(--wcs-chip-dismissible-primary-background-color-disabled);cursor:not-allowed;border:solid var(--wcs-chip-border-line-width) var(--wcs-chip-dismissible-primary-border-color-disabled)}:host([mode=dismissible]):host([disabled]) svg{cursor:not-allowed}:host([mode=dismissible]):host([disabled]) svg path{fill:var(--wcs-chip-dismissible-primary-color-disabled)}:host([mode=dismissible]):host([variant=secondary]){color:var(--wcs-chip-dismissible-secondary-color);background-color:var(--wcs-chip-dismissible-secondary-background-color);border:solid var(--wcs-chip-border-line-width) var(--wcs-chip-dismissible-secondary-border-color)}:host([mode=dismissible]):host([variant=secondary]) button{background:var(--wcs-chip-dismissible-secondary-button-background-color)}:host([mode=dismissible]):host([variant=secondary]) button:focus{outline:none}:host([mode=dismissible]):host([variant=secondary]) button:focus svg{outline:var(--wcs-chip-focus-outline-border-width) dashed var(--wcs-chip-dismissible-secondary-button-focus-outline-color);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-chip-dismissible-button-outline-radius)}:host([mode=dismissible]):host([variant=secondary]):host(:not([disabled])) button:hover{background-color:var(--wcs-chip-dismissible-secondary-button-background-color-hover);color:var(--wcs-chip-dismissible-secondary-button-color-hover)}:host([mode=dismissible]):host([variant=secondary]):host(:not([disabled])) button:active{background-color:var(--wcs-chip-dismissible-secondary-button-background-color-pressed);color:var(--wcs-chip-dismissible-secondary-button-color-pressed)}:host([mode=dismissible]):host([variant=secondary]):host([disabled]){color:var(--wcs-chip-dismissible-secondary-color-disabled);background-color:var(--wcs-chip-dismissible-secondary-background-color-disabled);border:solid var(--wcs-chip-border-line-width) var(--wcs-chip-dismissible-secondary-border-color-disabled)}:host([mode=dismissible]):host([variant=secondary]):host([disabled]) svg path{fill:var(--wcs-chip-dismissible-secondary-color-disabled)}";const a=r;const l=s(class s extends e{constructor(){super();this.__registerHost();this.__attachShadow();this.wcsChipSelectChange=o(this,"wcsChipSelectChange",7);this.wcsChipDismiss=o(this,"wcsChipDismiss",7);this.handleDismiss=s=>{if(this.disabled||this.mode!=="dismissible"){return}s.stopPropagation();this.dismiss()};this.value=undefined;this.label=undefined;this.selected=false;this.open=true;this.disabled=false;this.variant="primary";this.mode="selectable"}select(){this.selected=!this.selected;this.wcsChipSelectChange.emit({value:this.value,selected:this.selected})}dismiss(){this.open=false;this.wcsChipDismiss.emit({value:this.value});this.focusNextChip()}focusNextChip(){let s=this.el.nextElementSibling;while(s){if(this.isActionableChip(s)){this.focusChip(s);return}s=s.nextElementSibling}}isActionableChip(s){return s instanceof e&&s.tagName==="WCS-CHIP"&&!s.disabled}focusChip(s){var e,o;if(s.mode==="selectable"){s.focus()}else if(s.mode==="dismissible"){(o=(e=s.shadowRoot)===null||e===void 0?void 0:e.querySelector("button"))===null||o===void 0?void 0:o.focus()}}handleClick(){if(this.disabled||this.mode!=="selectable"){return}this.select()}handleKeydown(s){if(this.disabled){return}if(this.mode==="selectable"){if(s.key==="Enter"||s.key===" "){this.select()}}else if(this.mode==="dismissible"){if(s.key==="Delete"||s.key==="Backspace"){this.dismiss()}}}render(){const s={"aria-disabled":this.disabled?"true":null};if(this.mode==="selectable"){return c(i,Object.assign({},s,{role:"checkbox","aria-checked":this.selected?"true":"false",tabindex:this.disabled?-1:0,onClick:this.handleClick.bind(this),onKeyDown:this.handleKeydown.bind(this)}),this.selected&&c("svg",{class:"check-icon","aria-hidden":"true",width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},c("path",{d:"M23.712 8.3011L8.0292 23.7157C7.6356 24.095 6.9984 24.095 6.6264 23.7157L0.288 17.4955C-0.096 17.1226 -0.096 16.496 0.288 16.1192L2.1552 14.2739C2.5536 13.9036 3.1776 13.9036 3.5532 14.2739L6.6264 17.2764C6.9984 17.6583 7.6356 17.6583 8.0292 17.2764L20.4384 5.08081C20.8236 4.70662 21.4536 4.70662 21.8364 5.08081L23.712 6.91841C24.096 7.29516 24.096 7.91923 23.712 8.3011Z",fill:"white"})),c("span",null,this.label))}else{return c(i,Object.assign({},s),c("span",null,this.label),c("button",{"aria-label":`Supprimer ${this.label}`,disabled:this.disabled,onClick:this.handleDismiss.bind(this),onKeyDown:this.handleKeydown.bind(this)},c("svg",{class:"dismiss-icon","aria-hidden":"true",width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},c("path",{d:"M14.2656 12.0298L19.588 6.72176C20.1908 6.12119 20.1061 5.05213 19.5034 4.45043C18.9006 3.84986 17.914 3.84986 17.3112 4.45043L11.9887 9.7596L6.66743 4.45043C6.06351 3.84986 5.07691 3.84986 4.47412 4.45043C3.87132 5.05213 3.82843 6.07942 4.43122 6.68112L9.75365 11.9892L4.43122 17.2983C3.82843 17.8989 3.87132 18.9262 4.47412 19.5279C5.07691 20.1296 6.10527 20.1702 6.70807 19.5685L12.0305 14.2605L17.3112 19.5279C17.914 20.1296 18.9006 20.1296 19.5034 19.5279C20.1061 18.9262 20.149 17.8989 19.5462 17.2983L14.2656 12.0298Z",fill:"currentColor"}))))}}get el(){return this}static get style(){return a}},[1,"wcs-chip",{value:[1],label:[1],selected:[516],open:[516],disabled:[516],variant:[513],mode:[513]}]);function t(){if(typeof customElements==="undefined"){return}const s=["wcs-chip"];s.forEach((s=>{switch(s){case"wcs-chip":if(!customElements.get(s)){customElements.define(s,l)}break}}))}const d=l;const n=t;export{d as WcsChip,n as defineCustomElement};
+//# sourceMappingURL=wcs-chip.js.map

package/bundle/wcs-chip.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["chipCss","WcsChipStyle0","Chip","proxyCustomElement","H","this","handleDismiss","event","disabled","mode","stopPropagation","dismiss","select","selected","wcsChipSelectChange","emit","value","open","wcsChipDismiss","focusNextChip","currentElement","el","nextElementSibling","isActionableChip","focusChip","element","HTMLElement","tagName","chip","focus","_b","_a","shadowRoot","querySelector","handleClick","handleKeydown","ev","key","render","commonProps","h","Host","Object","assign","role","tabindex","onClick","bind","onKeyDown","class","width","height","viewBox","fill","xmlns","d","label"],"sources":["src/components/chip/chip.scss?tag=wcs-chip&encapsulation=shadow","src/components/chip/chip.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    // #region CSS Variables\n    --wcs-chip-height: var(--wcs-semantic-size-s);\n    --wcs-chip-font-size: var(--wcs-semantic-font-size-base);\n    --wcs-chip-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-chip-focus-outline-border-width: var(--wcs-semantic-border-width-large);\n\n    --wcs-chip-padding-vertical: var(--wcs-semantic-spacing-base);\n    --wcs-chip-padding-horizontal: var(--wcs-semantic-spacing-base-150);\n    --wcs-chip-padding-horizontal-dismissible: var(--wcs-semantic-spacing-base);\n\n    --wcs-chip-selectable-background-color: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-chip-selectable-background-color-pressed: var(--wcs-semantic-color-background-action-secondary-press);\n    --wcs-chip-selectable-background-color-hover: var(--wcs-semantic-color-background-action-secondary-hover);\n    --wcs-chip-selectable-background-color-selected: var(--wcs-semantic-color-background-action-primary-default);\n    --wcs-chip-selectable-background-color-selected-hover: var(--wcs-semantic-color-background-action-primary-hover);\n    --wcs-chip-selectable-background-color-selected-pressed: var(--wcs-semantic-color-background-action-primary-press);\n    --wcs-chip-selectable-background-color-selected-disabled: var(--wcs-semantic-color-background-action-primary-disabled);\n\n    --wcs-chip-selectable-color: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-chip-selectable-color-hover: var(--wcs-semantic-color-foreground-action-secondary-hover);\n    --wcs-chip-selectable-color-pressed: var(--wcs-semantic-color-foreground-action-secondary-press);\n    --wcs-chip-selectable-color-disabled: var(--wcs-semantic-color-text-disabled);\n    --wcs-chip-selectable-color-selected: var(--wcs-semantic-color-foreground-action-primary-default);\n    --wcs-chip-selectable-color-selected-hover: var(--wcs-semantic-color-foreground-action-primary-hover);\n    --wcs-chip-selectable-color-selected-pressed: var(--wcs-semantic-color-foreground-action-primary-press);\n\n    --wcs-chip-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-chip-border-line-width: var(--wcs-semantic-border-width-default);\n    --wcs-chip-selectable-border-color: var(--wcs-semantic-color-border-action-secondary-default);\n    --wcs-chip-selectable-border-color-hover: var(--wcs-semantic-color-border-control-indicator-hover);\n    --wcs-chip-selectable-border-color-pressed: var(--wcs-semantic-color-border-action-secondary-press);\n    --wcs-chip-selectable-border-color-disabled: var(--wcs-semantic-color-border-action-secondary-disabled);\n\n    --wcs-chip-selectable-content-gap: var(--wcs-semantic-spacing-base);\n    --wcs-chip-selectable-focus-outline-color: var(--wcs-semantic-color-border-focus-base);\n\n    --wcs-chip-dismissible-content-gap: var(--wcs-semantic-spacing-base-05);\n    --wcs-chip-dismissible-padding-right: var(--wcs-semantic-spacing-base-05);\n    --wcs-chip-dismissible-button-outline-radius: var(--wcs-semantic-border-radius-full);\n\n    --wcs-chip-dismissible-primary-focus-outline-color: var(--wcs-semantic-color-border-focus-base-on-secondary);\n    --wcs-chip-dismissible-primary-border-color: var(--wcs-semantic-color-background-action-primary-default);\n    --wcs-chip-dismissible-primary-border-color-disabled: var(--wcs-semantic-color-background-action-primary-disabled);\n    --wcs-chip-dismissible-primary-color: var(--wcs-semantic-color-foreground-action-primary-default);\n    --wcs-chip-dismissible-primary-color-hover: var(--wcs-semantic-color-foreground-action-primary-hover);\n    --wcs-chip-dismissible-primary-color-pressed: var(--wcs-semantic-color-foreground-action-primary-press);\n    --wcs-chip-dismissible-primary-color-disabled: var(--wcs-semantic-color-text-disabled);\n    --wcs-chip-dismissible-primary-background-color: var(--wcs-semantic-color-background-action-primary-default);\n    --wcs-chip-dismissible-primary-background-color-hover: var(--wcs-semantic-color-background-action-primary-hover);\n    --wcs-chip-dismissible-primary-background-color-pressed: var(--wcs-semantic-color-background-action-primary-press);\n    --wcs-chip-dismissible-primary-background-color-disabled: var(--wcs-semantic-color-background-action-primary-disabled);\n\n    --wcs-chip-dismissible-secondary-button-focus-outline-color: var(--wcs-semantic-color-border-focus-base);\n    --wcs-chip-dismissible-secondary-border-color: var(--wcs-semantic-color-border-action-secondary-default);\n    --wcs-chip-dismissible-secondary-border-color-disabled: var(--wcs-semantic-color-border-action-secondary-disabled);\n    --wcs-chip-dismissible-secondary-color: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-chip-dismissible-secondary-color-disabled: var(--wcs-semantic-color-foreground-disabled);\n    --wcs-chip-dismissible-secondary-background-color: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-chip-dismissible-secondary-button-background-color: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-chip-dismissible-secondary-button-background-color-hover: var(--wcs-semantic-color-background-surface-accent-lighter);\n    --wcs-chip-dismissible-secondary-button-background-color-pressed: var(--wcs-semantic-color-background-surface-accent-light);\n    --wcs-chip-dismissible-secondary-button-background-color-disabled: var(--wcs-semantic-color-background-action-secondary-disabled);\n\n    // #endregion\n\n    display: inline-flex;\n    // we set a 100% line-height to center the children text vertically\n    align-items: center;\n    // Prevents extra space below the line caused by baseline alignment of inline-flex elements when a component contains an inline SVG\n    vertical-align: middle;\n    overflow: hidden;\n    box-sizing: border-box;\n    height: var(--wcs-chip-height);\n    border-radius: var(--wcs-chip-border-radius);\n    font-size: var(--wcs-chip-font-size);\n    font-weight: var(--wcs-chip-font-weight);\n\n    // Default styles (selectable, not selected, not disabled)\n    padding: var(--wcs-chip-padding-vertical) var(--wcs-chip-padding-horizontal);\n    cursor: pointer;\n    user-select: none;\n\n    transition-property: color, background-color;\n    transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n    transition-timing-function: ease-out;\n}\n\n// SELECTABLE MODE\n:host([mode=selectable]) {\n    gap: var(--wcs-chip-selectable-content-gap);\n    border: solid var(--wcs-chip-border-line-width) var(--wcs-chip-selectable-border-color);\n    background-color: var(--wcs-chip-selectable-background-color);\n    color: var(--wcs-chip-selectable-color);\n\n    &:host(:focus-visible) {\n        @include focus-outline(\n            $outline-color: var(--wcs-chip-selectable-focus-outline-color),\n            $border-radius: var(--wcs-chip-border-radius),\n            $border-width: var(--wcs-chip-focus-outline-border-width)\n        );\n    }\n\n    &:host(:not([disabled])) {\n        &:host(:not([selected])) {\n            &:host(:hover) {\n                background-color: var(--wcs-chip-selectable-background-color-hover);\n                color: var(--wcs-chip-selectable-color-hover);\n                border-color: var(--wcs-chip-selectable-border-color-hover);\n            }\n\n            &:host(:active) {\n                background-color: var(--wcs-chip-selectable-background-color-pressed);\n                color: var(--wcs-chip-selectable-color-pressed);\n                border-color: var(--wcs-chip-selectable-border-color-pressed);\n            }\n        }\n\n        &:host([selected]) {\n            color: var(--wcs-chip-selectable-color-selected);\n            background-color: var(--wcs-chip-selectable-background-color-selected);\n            border-color: transparent;\n\n            svg path {\n                fill: var(--wcs-chip-selectable-color-selected);\n                // todo: check this issue with designers\n                // We optically lift the check icon a bit to center it better\n                transform: translateY(-1.5px);\n            }\n\n            &:host(:hover) {\n                background-color: var(--wcs-chip-selectable-background-color-selected-hover);\n                color: var(--wcs-chip-selectable-color-selected-hover);\n\n                svg path {\n                    fill: var(--wcs-chip-selectable-color-selected-hover);\n                }\n            }\n\n            &:host(:active) {\n                background-color: var(--wcs-chip-selectable-background-color-selected-pressed);\n                color: var(--wcs-chip-selectable-color-selected-pressed);\n\n                svg path {\n                    fill: var(--wcs-chip-selectable-color-selected-pressed);\n                }\n            }\n        }\n    }\n\n    &:host([disabled]) {\n        color: var(--wcs-chip-selectable-color-disabled);\n        cursor: not-allowed;\n\n        svg {\n            path {\n                fill: var(--wcs-chip-selectable-color-disabled);\n            }\n        }\n\n        &:host(:not([selected])) {\n            border-color: var(--wcs-chip-selectable-border-color-disabled);\n        }\n\n        &:host([selected]) {\n            background-color: var(--wcs-chip-selectable-background-color-selected-disabled);\n            border: 0;\n        }\n    }\n}\n\n// DISMISSIBLE MODE\n:host([mode=dismissible]) {\n    cursor: initial;\n    border: solid var(--wcs-chip-border-line-width) var(--wcs-chip-dismissible-primary-border-color);\n    color: var(--wcs-chip-dismissible-primary-color);\n    background-color: var(--wcs-chip-dismissible-primary-background-color);\n    gap: var(--wcs-chip-dismissible-content-gap);\n    padding-right: var(--wcs-chip-dismissible-padding-right);\n\n    button {\n        background: transparent;\n        border: none;\n        margin: 0;\n        padding: 0;\n        border-radius: var(--wcs-semantic-border-radius-full);\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        color: inherit;\n        width: var(--wcs-semantic-size-xs);\n        height: var(--wcs-semantic-size-xs);\n\n        &:focus {\n            outline: none;\n\n            svg {\n                @include focus-outline(\n                    $outline-color: var(--wcs-chip-dismissible-primary-focus-outline-color),\n                    $border-radius: var(--wcs-chip-dismissible-button-outline-radius),\n                    $border-width: var(--wcs-chip-focus-outline-border-width)\n                );\n            }\n        }\n    }\n\n    &:host(:not([open])) {\n        display: none;\n        margin: 0;\n    }\n\n    &:host(:not([disabled])) {\n        button:hover {\n            background-color: var(--wcs-chip-dismissible-primary-background-color-hover);\n            color: var(--wcs-chip-dismissible-primary-color-hover);\n        }\n\n        button:active {\n            background-color: var(--wcs-chip-dismissible-primary-background-color-pressed);\n            color: var(--wcs-chip-dismissible-primary-color-pressed);\n        }\n    }\n\n    &:host([disabled]) {\n        color: var(--wcs-chip-dismissible-primary-color-disabled);\n        background-color: var(--wcs-chip-dismissible-primary-background-color-disabled);\n        cursor: not-allowed;\n        border: solid var(--wcs-chip-border-line-width) var(--wcs-chip-dismissible-primary-border-color-disabled);\n\n        svg {\n            cursor: not-allowed;\n\n            path {\n                fill: var(--wcs-chip-dismissible-primary-color-disabled);\n            }\n        }\n    }\n\n    // secondary override (colors only), based on the code above for the primary variant\n    &:host([variant=secondary]) {\n        color: var(--wcs-chip-dismissible-secondary-color);\n        background-color: var(--wcs-chip-dismissible-secondary-background-color);\n        border: solid var(--wcs-chip-border-line-width) var(--wcs-chip-dismissible-secondary-border-color);\n\n        button {\n            background: var(--wcs-chip-dismissible-secondary-button-background-color);\n\n            &:focus {\n                outline: none;\n\n                svg {\n                    @include focus-outline(\n                        $outline-color: var(--wcs-chip-dismissible-secondary-button-focus-outline-color),\n                        $border-radius: var(--wcs-chip-dismissible-button-outline-radius),\n                        $border-width: var(--wcs-chip-focus-outline-border-width)\n                    );\n                }\n            }\n        }\n\n        &:host(:not([disabled])) {\n            button:hover {\n                background-color: var(--wcs-chip-dismissible-secondary-button-background-color-hover);\n                color: var(--wcs-chip-dismissible-secondary-button-color-hover);\n            }\n\n            button:active {\n                background-color: var(--wcs-chip-dismissible-secondary-button-background-color-pressed);\n                color: var(--wcs-chip-dismissible-secondary-button-color-pressed);\n            }\n        }\n\n        &:host([disabled]) {\n            color: var(--wcs-chip-dismissible-secondary-color-disabled);\n            background-color: var(--wcs-chip-dismissible-secondary-background-color-disabled);\n            border: solid var(--wcs-chip-border-line-width) var(--wcs-chip-dismissible-secondary-border-color-disabled);\n\n            svg {\n                path {\n                    fill: var(--wcs-chip-dismissible-secondary-color-disabled);\n                }\n            }\n        }\n    }\n}\n","import { Component, ComponentInterface, EventEmitter, Prop, Event, Element, Host, h } from '@stencil/core';\nimport { WcsChipMode, WcsChipVariant } from './chip-interface';\n\n/**\n * The chip component is a small, interactive element that can be used to represent an input, filter, or tag.\n * It can be in one of two modes: 'selectable' or 'dismissible'.\n * - In 'selectable' mode, the chip can be selected or deselected, and emits an event when clicked.\n * - In 'dismissible' mode, the chip can be dismissed (removed) by clicking a dismiss icon, and emits an event when the dismiss icon is clicked.\n *\n * @cssprop --wcs-chip-height - Height of the chip\n * @cssprop --wcs-chip-font-size - Font size of the chip text\n * @cssprop --wcs-chip-font-weight - Font weight of the chip text\n *\n * @cssprop --wcs-chip-focus-outline-border-width - Border width of the chip focus outline\n *\n * @cssprop --wcs-chip-padding-vertical - Vertical padding (top - bottom) of the chip\n * @cssprop --wcs-chip-padding-horizontal - Horizontal padding (left - right) of the chip\n * @cssprop --wcs-chip-padding-horizontal-dismissible - Horizontal padding (left - right) of the chip with 'dismissible' mode\n *\n * @cssprop --wcs-chip-selectable-background-color - Background color of the chip with 'selectable' mode in default state\n * @cssprop --wcs-chip-selectable-background-color-pressed - Background color of the chip with 'selectable' mode when pressed\n * @cssprop --wcs-chip-selectable-background-color-hover - Background color of the chip with 'selectable' mode when hovered\n * @cssprop --wcs-chip-selectable-background-color-selected - Background color of the chip with 'selectable' mode when selected\n * @cssprop --wcs-chip-selectable-background-color-selected-hover - Background color of the chip with 'selectable' mode when selected and hovered\n * @cssprop --wcs-chip-selectable-background-color-selected-pressed - Background color of the chip with 'selectable' mode when selected and pressed\n * @cssprop --wcs-chip-selectable-background-color-selected-disabled - Background color of the chip with 'selectable' mode when selected and disabled\n *\n * @cssprop --wcs-chip-selectable-color - Text color of the chip with 'selectable' mode in default state\n * @cssprop --wcs-chip-selectable-color-hover - Text color of the chip with 'selectable' mode when hovered\n * @cssprop --wcs-chip-selectable-color-pressed - Text color of the chip with 'selectable' mode when pressed\n * @cssprop --wcs-chip-selectable-color-disabled - Text color of the chip with 'selectable' mode when disabled\n * @cssprop --wcs-chip-selectable-color-selected - Text color of the chip with 'selectable' mode when selected\n * @cssprop --wcs-chip-selectable-color-selected-hover - Text color of the chip with 'selectable' mode when selected and hovered\n * @cssprop --wcs-chip-selectable-color-selected-pressed - Text color of the chip with 'selectable' mode when selected and pressed\n *\n * @cssprop --wcs-chip-border-radius - Border radius of the chip\n * @cssprop --wcs-chip-border-line-width - Border line width of the chip\n * @cssprop --wcs-chip-selectable-border-color - Border color of the chip with 'selectable' mode in default state\n * @cssprop --wcs-chip-selectable-border-color-hover - Border color of the chip with 'selectable' mode when hovered\n * @cssprop --wcs-chip-selectable-border-color-pressed - Border color of the chip with 'selectable' mode when pressed\n * @cssprop --wcs-chip-selectable-border-color-disabled - Border color of the chip with 'selectable' mode when disabled\n *\n * @cssprop --wcs-chip-selectable-content-gap - Gap between content elements in chip with 'selectable' mode\n * @cssprop --wcs-chip-selectable-focus-outline-color - Focus outline color of the chip with 'selectable' mode\n *\n * @cssprop --wcs-chip-dismissible-content-gap - Gap between content elements in chip with 'dismissible' mode\n * @cssprop --wcs-chip-dismissible-padding-right - Right padding of the chip with 'dismissible' mode\n * @cssprop --wcs-chip-dismissible-button-outline-radius - Outline radius of the button for the chip with 'dismissible' mode\n *\n * @cssprop --wcs-chip-dismissible-primary-focus-outline-color - Focus outline color of the chip with 'dismissible' mode and 'primary' variant\n * @cssprop --wcs-chip-dismissible-primary-border-color - Border color of the chip with 'dismissible' mode and 'primary' variant\n * @cssprop --wcs-chip-dismissible-primary-border-color-disabled - Border color of the chip with 'dismissible' mode and 'primary' variant when disabled\n * @cssprop --wcs-chip-dismissible-primary-color - Text color of the chip with 'dismissible' mode and 'primary' variant\n * @cssprop --wcs-chip-dismissible-primary-color-hover - Text color of the chip with 'dismissible' mode and 'primary' variant when hovered\n * @cssprop --wcs-chip-dismissible-primary-color-pressed - Text color of the chip with 'dismissible' mode and 'primary' variant when pressed\n * @cssprop --wcs-chip-dismissible-primary-color-disabled - Text color of the chip with 'dismissible' mode and 'primary' variant when disabled\n * @cssprop --wcs-chip-dismissible-primary-background-color - Background color of the chip with 'dismissible' mode and 'primary' variant\n * @cssprop --wcs-chip-dismissible-primary-background-color-hover - Background color of the chip with 'dismissible' mode and 'primary' variant when hovered\n * @cssprop --wcs-chip-dismissible-primary-background-color-pressed - Background color of the chip with 'dismissible' mode and 'primary' variant when pressed\n * @cssprop --wcs-chip-dismissible-primary-background-color-disabled - Background color of the chip with 'dismissible' mode and 'primary' variant when disabled\n *\n * @cssprop --wcs-chip-dismissible-secondary-button-focus-outline-color - Button focus outline color of the chip with 'dismissible' mode and 'secondary' variant\n * @cssprop --wcs-chip-dismissible-secondary-border-color - Border color of the chip with 'dismissible' mode and 'secondary' variant\n * @cssprop --wcs-chip-dismissible-secondary-border-color-disabled - Border color of the chip with 'dismissible' mode and 'secondary' variant when disabled\n * @cssprop --wcs-chip-dismissible-secondary-color - Text color of the chip with 'dismissible' mode and 'secondary' variant\n * @cssprop --wcs-chip-dismissible-secondary-color-disabled - Text color of the chip with 'dismissible' mode and 'secondary' variant when disabled\n * @cssprop --wcs-chip-dismissible-secondary-background-color - Background color of the chip with 'dismissible' mode and 'secondary' variant\n * @cssprop --wcs-chip-dismissible-secondary-button-background-color - Button background color of the chip with 'dismissible' mode and 'secondary' variant\n * @cssprop --wcs-chip-dismissible-secondary-button-background-color-hover - Button background color of the chip with 'dismissible' mode and 'secondary' variant when hovered\n * @cssprop --wcs-chip-dismissible-secondary-button-background-color-pressed - Button background color of the chip with 'dismissible' mode and 'secondary' variant when pressed\n * @cssprop --wcs-chip-dismissible-secondary-button-background-color-disabled - Button background color of the chip with 'dismissible' mode and 'secondary' variant when disabled\n */\n@Component({\n    tag: 'wcs-chip',\n    styleUrl: 'chip.scss',\n    shadow: true\n})\nexport class Chip implements ComponentInterface {\n    @Element() el!: HTMLWcsChipElement;\n    /**\n     * Unique value representing the chip identifier in events.\n     */\n    @Prop() value: string;\n\n    /**\n     * Text label displayed on the chip.\n     */\n    @Prop() label: string;\n\n    /**\n     * If `true`, the chip is selected.\n     * This property is only used in 'selectable' mode.\n     */\n    @Prop({ reflect: true }) selected = false;\n\n    /**\n     * If `true`, the chip is open.\n     * This property is used to control the visibility of the chip in the dismissible mode.\n     * When the user clicks the dismiss icon, this property automatically becomes `false`, hiding the chip.\n     */\n    @Prop({ reflect: true }) open = true;\n\n    /**\n     * If `true`, the chip is disabled.\n     * The chip will not respond to click events and will not emit any events.\n     * This property is used in both 'selectable' and 'dismissible' modes.\n     */\n    @Prop({ reflect: true }) disabled = false;\n\n    /**\n     * Defines the visual style of the chip for the dismissible mode.\n     */\n    @Prop({ reflect: true }) variant: WcsChipVariant = 'primary';\n\n    /**\n     * Defines the mode of the chip.\n     * Can be 'selectable' or 'dismissible'.\n     * - 'selectable': The chip can be selected and emits an event when clicked.\n     * - 'dismissible': The chip can be dismissed (removed) and emits an event when the dismiss icon is clicked.\n     */\n    @Prop({ reflect: true }) mode: WcsChipMode = 'selectable';\n\n    /**\n     * Emitted when the chip is clicked in 'selectable' mode.\n     */\n    @Event() wcsChipSelectChange: EventEmitter<{ value: string; selected: boolean }>;\n\n    /**\n     * Emitted when the dismiss icon is clicked in 'dismissible' mode.\n     */\n    @Event() wcsChipDismiss: EventEmitter<{ value: string }>;\n\n\n    private select() {\n        this.selected = !this.selected; // Toggle the selected state\n        this.wcsChipSelectChange.emit({ value: this.value, selected: this.selected });\n    }\n\n    private dismiss() {\n        this.open = false;\n        this.wcsChipDismiss.emit({ value: this.value });\n        this.focusNextChip();\n    }\n\n    private focusNextChip(): void {\n        let currentElement = this.el.nextElementSibling;\n\n        while (currentElement) {\n            if (this.isActionableChip(currentElement)) {\n                this.focusChip(currentElement as HTMLWcsChipElement);\n                return;\n            }\n            currentElement = currentElement.nextElementSibling;\n        }\n    }\n\n    private isActionableChip(element: Element | null): element is HTMLWcsChipElement {\n        return element instanceof HTMLElement\n            && element.tagName === 'WCS-CHIP'\n            && !(element as HTMLWcsChipElement).disabled;\n    }\n\n    private focusChip(chip: HTMLWcsChipElement): void {\n        if (chip.mode === 'selectable') {\n            chip.focus();\n        } else if (chip.mode === 'dismissible') {\n            chip.shadowRoot?.querySelector('button')?.focus();\n        }\n    }\n\n    private handleClick() {\n        if (this.disabled || this.mode !== 'selectable') {\n            return;\n        }\n        this.select();\n    };\n\n    private handleDismiss = (event: Event) => {\n        if (this.disabled || this.mode !== 'dismissible') {\n            return;\n        }\n        event.stopPropagation(); // Prevent the click event from bubbling up to the chip click handler\n        this.dismiss();\n    };\n\n    private handleKeydown(ev) {\n        if (this.disabled) {\n            return;\n        }\n        if (this.mode === 'selectable') {\n            if (ev.key === 'Enter' || ev.key === ' ') {\n                this.select();\n            }\n        } else if (this.mode === 'dismissible') {\n            if (ev.key === 'Delete' || ev.key === 'Backspace') {\n                this.dismiss();\n            }\n        }\n    }\n\n    render() {\n        const commonProps = {\n            'aria-disabled': this.disabled ? 'true' : null\n        };\n\n        if (this.mode === 'selectable') {\n            return (\n                <Host\n                    {...commonProps}\n                    role=\"checkbox\"\n                    aria-checked={this.selected ? 'true' : 'false'}\n                    tabindex={this.disabled ? -1 : 0}\n                    onClick={this.handleClick.bind(this)}\n                    onKeyDown={this.handleKeydown.bind(this)}\n                >\n                    {this.selected && (\n                        <svg class=\"check-icon\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\"\n                             fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                                d=\"M23.712 8.3011L8.0292 23.7157C7.6356 24.095 6.9984 24.095 6.6264 23.7157L0.288 17.4955C-0.096 17.1226 -0.096 16.496 0.288 16.1192L2.1552 14.2739C2.5536 13.9036 3.1776 13.9036 3.5532 14.2739L6.6264 17.2764C6.9984 17.6583 7.6356 17.6583 8.0292 17.2764L20.4384 5.08081C20.8236 4.70662 21.4536 4.70662 21.8364 5.08081L23.712 6.91841C24.096 7.29516 24.096 7.91923 23.712 8.3011Z\"\n                                fill=\"white\" />\n                        </svg>\n                    )}\n                    <span>{this.label}</span>\n                </Host>\n            );\n        } else {\n            return (\n                <Host\n                    {...commonProps}\n                >\n                    <span>{this.label}</span>\n                    <button\n                        aria-label={`Supprimer ${this.label}`}\n                        disabled={this.disabled}\n                        onClick={this.handleDismiss.bind(this)}\n                        onKeyDown={this.handleKeydown.bind(this)}\n                    >\n                        <svg class=\"dismiss-icon\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\"\n                             fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                                d=\"M14.2656 12.0298L19.588 6.72176C20.1908 6.12119 20.1061 5.05213 19.5034 4.45043C18.9006 3.84986 17.914 3.84986 17.3112 4.45043L11.9887 9.7596L6.66743 4.45043C6.06351 3.84986 5.07691 3.84986 4.47412 4.45043C3.87132 5.05213 3.82843 6.07942 4.43122 6.68112L9.75365 11.9892L4.43122 17.2983C3.82843 17.8989 3.87132 18.9262 4.47412 19.5279C5.07691 20.1296 6.10527 20.1702 6.70807 19.5685L12.0305 14.2605L17.3112 19.5279C17.914 20.1296 18.9006 20.1296 19.5034 19.5279C20.1061 18.9262 20.149 17.8989 19.5462 17.2983L14.2656 12.0298Z\"\n                                fill=\"currentColor\" />\n                        </svg>\n                    </button>\n                </Host>\n            );\n        }\n    }\n}\n\n"],"mappings":"gEAAA,MAAMA,EAAU,m/WAChB,MAAAC,EAAeD,E,MC4EFE,EAAIC,EAAA,MAAAD,UAAAE,E,0KAoGLC,KAAAC,cAAiBC,IACrB,GAAIF,KAAKG,UAAYH,KAAKI,OAAS,cAAe,CAC9C,M,CAEJF,EAAMG,kBACNL,KAAKM,SAAS,E,wDAzFkB,M,UAOJ,K,cAOI,M,aAKe,U,UAQN,Y,CAarC,MAAAC,GACJP,KAAKQ,UAAYR,KAAKQ,SACtBR,KAAKS,oBAAoBC,KAAK,CAAEC,MAAOX,KAAKW,MAAOH,SAAUR,KAAKQ,U,CAG9D,OAAAF,GACJN,KAAKY,KAAO,MACZZ,KAAKa,eAAeH,KAAK,CAAEC,MAAOX,KAAKW,QACvCX,KAAKc,e,CAGD,aAAAA,GACJ,IAAIC,EAAiBf,KAAKgB,GAAGC,mBAE7B,MAAOF,EAAgB,CACnB,GAAIf,KAAKkB,iBAAiBH,GAAiB,CACvCf,KAAKmB,UAAUJ,GACf,M,CAEJA,EAAiBA,EAAeE,kB,EAIhC,gBAAAC,CAAiBE,GACrB,OAAOA,aAAmBC,GACnBD,EAAQE,UAAY,aAClBF,EAA+BjB,Q,CAGpC,SAAAgB,CAAUI,G,QACd,GAAIA,EAAKnB,OAAS,aAAc,CAC5BmB,EAAKC,O,MACF,GAAID,EAAKnB,OAAS,cAAe,EACpCqB,GAAAC,EAAAH,EAAKI,cAAU,MAAAD,SAAA,SAAAA,EAAEE,cAAc,aAAS,MAAAH,SAAA,SAAAA,EAAED,O,EAI1C,WAAAK,GACJ,GAAI7B,KAAKG,UAAYH,KAAKI,OAAS,aAAc,CAC7C,M,CAEJJ,KAAKO,Q,CAWD,aAAAuB,CAAcC,GAClB,GAAI/B,KAAKG,SAAU,CACf,M,CAEJ,GAAIH,KAAKI,OAAS,aAAc,CAC5B,GAAI2B,EAAGC,MAAQ,SAAWD,EAAGC,MAAQ,IAAK,CACtChC,KAAKO,Q,OAEN,GAAIP,KAAKI,OAAS,cAAe,CACpC,GAAI2B,EAAGC,MAAQ,UAAYD,EAAGC,MAAQ,YAAa,CAC/ChC,KAAKM,S,GAKjB,MAAA2B,GACI,MAAMC,EAAc,CAChB,gBAAiBlC,KAAKG,SAAW,OAAS,MAG9C,GAAIH,KAAKI,OAAS,aAAc,CAC5B,OACI+B,EAACC,EAAIC,OAAAC,OAAA,GACGJ,EAAW,CACfK,KAAK,WAAU,eACDvC,KAAKQ,SAAW,OAAS,QACvCgC,SAAUxC,KAAKG,UAAY,EAAI,EAC/BsC,QAASzC,KAAK6B,YAAYa,KAAK1C,MAC/B2C,UAAW3C,KAAK8B,cAAcY,KAAK1C,QAElCA,KAAKQ,UACF2B,EAAA,OAAKS,MAAM,aAAY,cAAa,OAAOC,MAAM,KAAKC,OAAO,KAAKC,QAAQ,YACrEC,KAAK,OAAOC,MAAM,8BACnBd,EAAA,QACIe,EAAE,wXACFF,KAAK,WAGjBb,EAAA,YAAOnC,KAAKmD,O,KAGjB,CACH,OACIhB,EAACC,EAAIC,OAAAC,OAAA,GACGJ,GAEJC,EAAA,YAAOnC,KAAKmD,OACZhB,EAAA,uBACgB,aAAanC,KAAKmD,QAC9BhD,SAAUH,KAAKG,SACfsC,QAASzC,KAAKC,cAAcyC,KAAK1C,MACjC2C,UAAW3C,KAAK8B,cAAcY,KAAK1C,OAEnCmC,EAAA,OAAKS,MAAM,eAAc,cAAa,OAAOC,MAAM,KAAKC,OAAO,KAAKC,QAAQ,YACvEC,KAAK,OAAOC,MAAM,8BACnBd,EAAA,QACIe,EAAE,+gBACFF,KAAK,mB"}