wcs-core 7.1.0 → 7.2.0

package/dist/wcs/p-dfb52a1c.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as o,H as i,g as e}from"./p-32e583ea.js";import{p as s}from"./p-52d77e1f.js";const a="@keyframes slide-in-bottom{from{transform:translateY(100%)}to{transform:translateY(0%)}}@keyframes slide-out{from{opacity:1}to{opacity:0}}@keyframes slide-in-top{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0%)}}:host{--wcs-alert-drawer-gap:var(--wcs-semantic-spacing-base);--wcs-alert-drawer-margin-horizontal:var(--wcs-semantic-spacing-base);--wcs-alert-drawer-margin-vertical:var(--wcs-semantic-spacing-base);--wcs-alert-drawer-min-width:400px;--wcs-alert-drawer-hide-alert-animation-duration:var(--wcs-semantic-motion-duration-feedback-slow);position:fixed;z-index:99999;width:fit-content}:host wcs-alert{--wcs-alert-min-width:var(--wcs-alert-drawer-min-width)}:host wcs-alert:not([show]){animation-duration:var(--wcs-alert-drawer-hide-alert-animation-duration);animation-timing-function:ease;animation-name:slide-out;animation-fill-mode:forwards}@media (prefers-reduced-motion: reduce){:host wcs-alert:not([show]){animation:none}}:host #alerts-container{display:flex;flex-direction:column;gap:var(--wcs-alert-drawer-gap)}@media (max-width: 575px){:host{left:50% !important;transform:translate(-50%, 0);width:calc(100% - 2 * var(--wcs-alert-drawer-margin-horizontal))}:host wcs-alert{--wcs-alert-min-width:100%}}:host([position=top]),:host([position=top-left]),:host([position=top-right]){top:var(--wcs-alert-drawer-margin-vertical);flex-direction:column-reverse}:host([position=top]) wcs-alert[show],:host([position=top-left]) wcs-alert[show],:host([position=top-right]) wcs-alert[show]{animation:slide-in-top var(--wcs-alert-drawer-hide-alert-animation-duration) ease}@media (prefers-reduced-motion: reduce){:host([position=top]) wcs-alert[show],:host([position=top-left]) wcs-alert[show],:host([position=top-right]) wcs-alert[show]{animation:none}}:host([position=bottom]),:host([position=bottom-left]),:host([position=bottom-right]){bottom:var(--wcs-alert-drawer-margin-vertical)}:host([position=bottom]) wcs-alert[show],:host([position=bottom-left]) wcs-alert[show],:host([position=bottom-right]) wcs-alert[show]{animation:slide-in-bottom var(--wcs-alert-drawer-hide-alert-animation-duration) ease}@media (prefers-reduced-motion: reduce){:host([position=bottom]) wcs-alert[show],:host([position=bottom-left]) wcs-alert[show],:host([position=bottom-right]) wcs-alert[show]{animation:none}}:host([position=top-right]),:host([position=bottom-right]){right:var(--wcs-alert-drawer-margin-horizontal)}:host([position=top-left]),:host([position=bottom-left]){left:var(--wcs-alert-drawer-margin-horizontal)}:host([position=bottom]),:host([position=top]){left:50%;transform:translate(-50%, 0)}";const r=a;const n=class{constructor(o){t(this,o);this.alertEventListeners=new WeakMap;this.timeoutId=undefined;this.userPrefersReducedMotion=window.matchMedia("(prefers-reduced-motion: reduce)").matches;this.close=t=>{if(!this.userPrefersReducedMotion){this.timeoutId=setTimeout((()=>{t.remove();this.alertEventListeners.delete(t)}),s(window.getComputedStyle(this.el).getPropertyValue("--wcs-alert-drawer-hide-alert-animation-duration"))||300)}else{t.remove();this.alertEventListeners.delete(t)}};this.position="bottom-right";this.timeout=5e3;this.showProgressBar=false}async show(t){this.alertsContainer.appendChild(this.renderToast(t))}renderToast(t){var o,i;const e=document.createElement("wcs-alert");e.setAttribute("intent",t.intent);if((o=t.showProgressBar)!==null&&o!==void 0?o:this.showProgressBar){e.setAttribute("show-progress-bar","")}e.setAttribute("timeout",String((i=t.timeout)!==null&&i!==void 0?i:this.timeout));const s=()=>this.close(e);this.alertEventListeners.set(e,s);e.addEventListener("wcsAlertDismiss",s);const a=document.createElement("span");a.setAttribute("slot","title");a.textContent=t.title;e.appendChild(a);const r=document.createElement("span");r.setAttribute("slot","subtitle");r.textContent=t.subtitle;e.appendChild(r);return e}render(){return o(i,{key:"18a68f9f7727b29da85e0852dc87de30d79581ed",role:"region","aria-label":"Informations","aria-live":"polite","aria-atomic":"true"},o("div",{key:"ee0d30077439b991e5ff6eb02b24873f015dce5e",ref:t=>this.alertsContainer=t,id:"alerts-container"}))}disconnectedCallback(){this.alertEventListeners=new WeakMap;clearTimeout(this.timeoutId)}get el(){return e(this)}};n.style=r;export{n as wcs_alert_drawer};
+//# sourceMappingURL=p-dfb52a1c.entry.js.map

package/dist/wcs/p-dfb52a1c.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["alertDrawerCss","WcsAlertDrawerStyle0","AlertDrawer","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":"6FAAA,MAAMA,EAAiB,okFACvB,MAAAC,EAAeD,E,MCgDFE,EAAW,M,yBAsBZC,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/dist/wcs/{p-6f5d570a.entry.js → p-dff8641e.entry.js}

@@ -1,2 +1,2 @@
-import{r as a,h as e,H as i,g as o}from"./p-32e583ea.js";import{d as t}from"./p-52d77e1f.js";const r='wcs-nav-item{--wcs-nav-item-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-nav-item-height-desktop:calc(10 * var(--wcs-semantic-size-base));--wcs-nav-item-height-mobile:calc(6 * var(--wcs-semantic-size-base));--wcs-nav-item-gap-desktop:var(--wcs-semantic-spacing-base);--wcs-nav-item-gap-mobile:0;--wcs-nav-item-font-size-desktop:var(--wcs-semantic-font-size-label-3);--wcs-nav-item-font-size-mobile:calc(var(--wcs-semantic-font-size-body-1) / 2);--wcs-nav-item-background-color-default:var(--wcs-semantic-color-background-action-primary-default);--wcs-nav-item-background-color-hover:var(--wcs-semantic-color-background-action-primary-hover);--wcs-nav-item-background-color-press:var(--wcs-semantic-color-background-action-primary-press);--wcs-nav-item-background-color-active:var(--wcs-semantic-color-background-action-primary-selected-default);--wcs-nav-item-color-default:var(--wcs-semantic-color-foreground-action-primary-default);--wcs-nav-item-color-active:var(--wcs-semantic-color-foreground-action-primary-default);--wcs-nav-item-color-hover:var(--wcs-semantic-color-foreground-action-primary-default);--wcs-nav-item-color-press:var(--wcs-semantic-color-foreground-action-primary-default);--wcs-nav-item-border-color-focus:var(--wcs-semantic-color-border-focus-base-on-secondary);--wcs-nav-item-border-width-focus:var(--wcs-semantic-border-width-large);--wcs-nav-item-indicator-background-color:var(--wcs-semantic-color-background-surface-accent-light);--wcs-nav-item-indicator-width-desktop:calc(0.5 * var(--wcs-semantic-size-base));--wcs-nav-item-indicator-width-mobile:calc(3 * var(--wcs-semantic-size-base));--wcs-nav-item-indicator-height-desktop:calc(3 * var(--wcs-semantic-size-base));--wcs-nav-item-indicator-height-mobile:calc(0.5 * var(--wcs-semantic-size-base));--wcs-nav-item-indicator-border-radius-desktop:var(--wcs-semantic-border-radius-base) 0 0 var(--wcs-semantic-border-radius-base);--wcs-nav-item-indicator-border-radius-mobile:var(--wcs-semantic-border-radius-base) var(--wcs-semantic-border-radius-base) 0 0;--wcs-nav-item-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);display:block;cursor:pointer;font-weight:var(--wcs-nav-item-font-weight);transition-property:color, background-color, border-color, box-shadow, backdrop-filter;transition-duration:var(--wcs-nav-item-transition-duration);transition-timing-function:ease-in-out;background-color:var(--wcs-nav-item-background-color-default)}wcs-nav-item a,wcs-nav-item button{display:flex;position:relative;flex-direction:column;align-items:center;justify-content:center;text-align:center;background-color:transparent;border:none;text-decoration:none;height:var(--wcs-nav-item-height-desktop);gap:var(--wcs-nav-item-gap-desktop);font-size:var(--wcs-nav-item-font-size-desktop);color:var(--wcs-nav-item-color-default)}@media (max-width: 1199px){wcs-nav-item a,wcs-nav-item button{display:flex;flex:1;height:var(--wcs-nav-item-height-mobile);gap:var(--wcs-nav-item-gap-mobile);font-size:var(--wcs-nav-item-font-size-mobile)}}wcs-nav-item button{width:100%;cursor:inherit}wcs-nav-item a:focus,wcs-nav-item button:focus{outline:none}@media (max-width: 1199px){wcs-nav-item:has(a:focus-visible),wcs-nav-item:has(button:focus-visible){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-nav-item-border-color-focus);outline-offset:-2px;border-radius:var(--wcs-nav-item-border-width-focus)}@supports not selector(&:has(a:focus-visible)){wcs-nav-item:focus-within{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-nav-item-border-color-focus);outline-offset:-2px;border-radius:var(--wcs-nav-item-border-width-focus)}}@supports not selector(&:has(button:focus-visible)){wcs-nav-item:focus-within{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-nav-item-border-color-focus);outline-offset:-2px;border-radius:var(--wcs-nav-item-border-width-focus)}}}@media (min-width: 1200px){wcs-nav-item:has(a:focus-visible),wcs-nav-item:has(button:focus-visible){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-nav-item-border-color-focus);outline-offset:-2px;border-radius:var(--wcs-nav-item-border-width-focus)}@supports not selector(&:has(a:focus-visible)){wcs-nav-item:focus-within{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-nav-item-border-color-focus);outline-offset:-2px;border-radius:var(--wcs-nav-item-border-width-focus)}}@supports not selector(&:has(button:focus-visible)){wcs-nav-item:focus-within{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-nav-item-border-color-focus);outline-offset:-2px;border-radius:var(--wcs-nav-item-border-width-focus)}}}wcs-nav-item i{margin-bottom:0.5rem;display:inline-block}@media (max-width: 1199px){wcs-nav-item i{margin-bottom:0.25rem;display:inline-block}}@media (min-width: 1200px){wcs-nav-item[slot=bottom] a{border-top:var(--wcs-nav-item-border-horizontal-width) solid var(--wcs-nav-item-border-horizontal-color);border-bottom:none !important}}wcs-nav-item:hover{background-color:var(--wcs-nav-item-background-color-hover)}wcs-nav-item:hover a{color:var(--wcs-nav-item-color-hover)}wcs-nav-item:active{background-color:var(--wcs-nav-item-background-color-press)}wcs-nav-item:active a{color:var(--wcs-nav-item-color-press)}wcs-nav-item.active,wcs-nav-item:has(>.active){background-color:var(--wcs-nav-item-background-color-active)}wcs-nav-item.active a,wcs-nav-item:has(>.active) a{color:var(--wcs-nav-item-color-active)}wcs-nav-item.active a::after,wcs-nav-item:has(>.active) a::after{position:absolute;right:0;width:var(--wcs-nav-item-indicator-width-desktop);height:var(--wcs-nav-item-indicator-height-desktop);content:"";background-color:var(--wcs-nav-item-indicator-background-color);border-radius:var(--wcs-nav-item-indicator-border-radius-desktop)}@media (max-width: 1199px){wcs-nav-item.active a::after,wcs-nav-item:has(>.active) a::after{right:auto;bottom:0;width:var(--wcs-nav-item-indicator-width-mobile);height:var(--wcs-nav-item-indicator-height-mobile);border-radius:var(--wcs-nav-item-indicator-border-radius-mobile)}}';const c=r;const s=class{constructor(e){a(this,e)}onKeyDown(a){if(t(a)){this.el.click()}}render(){return e(i,{key:"8a21ba03aacff1aa94ae552a0f76f0e551df6e67",role:"listitem"},e("slot",{key:"75d250a220a1eaba9cb8dd68adbe267379afb915"}))}get el(){return o(this)}};s.style=c;export{s as wcs_nav_item};
-//# sourceMappingURL=p-6f5d570a.entry.js.map
+import{r as a,h as e,H as i,g as o}from"./p-32e583ea.js";import{d as t}from"./p-52d77e1f.js";const r='wcs-nav-item{--wcs-nav-item-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-nav-item-height-desktop:calc(10 * var(--wcs-semantic-size-base));--wcs-nav-item-height-mobile:calc(6 * var(--wcs-semantic-size-base));--wcs-nav-item-gap-desktop:var(--wcs-semantic-spacing-base);--wcs-nav-item-gap-mobile:0;--wcs-nav-item-font-size-desktop:var(--wcs-semantic-font-size-label-3);--wcs-nav-item-font-size-mobile:calc(var(--wcs-semantic-font-size-body-1) / 2);--wcs-nav-item-background-color-default:var(--wcs-semantic-color-background-action-primary-default);--wcs-nav-item-background-color-hover:var(--wcs-semantic-color-background-action-primary-hover);--wcs-nav-item-background-color-press:var(--wcs-semantic-color-background-action-primary-press);--wcs-nav-item-background-color-active:var(--wcs-semantic-color-background-action-primary-selected-default);--wcs-nav-item-color-default:var(--wcs-semantic-color-foreground-action-primary-default);--wcs-nav-item-color-active:var(--wcs-semantic-color-foreground-action-primary-default);--wcs-nav-item-color-hover:var(--wcs-semantic-color-foreground-action-primary-default);--wcs-nav-item-color-press:var(--wcs-semantic-color-foreground-action-primary-default);--wcs-nav-item-border-color-focus:var(--wcs-semantic-color-border-focus-base-on-secondary);--wcs-nav-item-border-width-focus:var(--wcs-semantic-border-width-large);--wcs-nav-item-indicator-background-color:var(--wcs-semantic-color-background-surface-accent-light);--wcs-nav-item-indicator-width-desktop:calc(0.5 * var(--wcs-semantic-size-base));--wcs-nav-item-indicator-width-mobile:calc(3 * var(--wcs-semantic-size-base));--wcs-nav-item-indicator-height-desktop:calc(3 * var(--wcs-semantic-size-base));--wcs-nav-item-indicator-height-mobile:calc(0.5 * var(--wcs-semantic-size-base));--wcs-nav-item-indicator-border-radius-desktop:var(--wcs-semantic-border-radius-base) 0 0 var(--wcs-semantic-border-radius-base);--wcs-nav-item-indicator-border-radius-mobile:var(--wcs-semantic-border-radius-base) var(--wcs-semantic-border-radius-base) 0 0;--wcs-nav-item-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);display:block;cursor:pointer;font-weight:var(--wcs-nav-item-font-weight);transition-property:color, background-color, border-color, box-shadow, backdrop-filter;transition-duration:var(--wcs-nav-item-transition-duration);transition-timing-function:ease-in-out;background-color:var(--wcs-nav-item-background-color-default)}wcs-nav-item a,wcs-nav-item button{display:flex;position:relative;flex-direction:column;align-items:center;justify-content:center;text-align:center;background-color:transparent;border:none;text-decoration:none;height:var(--wcs-nav-item-height-desktop);gap:var(--wcs-nav-item-gap-desktop);font-size:var(--wcs-nav-item-font-size-desktop);color:var(--wcs-nav-item-color-default)}@media (max-width: 1199px){wcs-nav-item a,wcs-nav-item button{display:flex;flex:1;height:var(--wcs-nav-item-height-mobile);gap:var(--wcs-nav-item-gap-mobile);font-size:var(--wcs-nav-item-font-size-mobile)}}wcs-nav-item button{width:100%;cursor:inherit}wcs-nav-item a:focus,wcs-nav-item button:focus{outline:none}@media (max-width: 1199px){wcs-nav-item:has(a:focus-visible),wcs-nav-item:has(button:focus-visible){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-nav-item-border-color-focus);outline-offset:-2px;border-radius:var(--wcs-nav-item-border-width-focus)}@supports not selector(&:has(a:focus-visible)){wcs-nav-item:focus-within{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-nav-item-border-color-focus);outline-offset:-2px;border-radius:var(--wcs-nav-item-border-width-focus)}}@supports not selector(&:has(button:focus-visible)){wcs-nav-item:focus-within{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-nav-item-border-color-focus);outline-offset:-2px;border-radius:var(--wcs-nav-item-border-width-focus)}}}@media (min-width: 1200px){wcs-nav-item:has(a:focus-visible),wcs-nav-item:has(button:focus-visible){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-nav-item-border-color-focus);outline-offset:-2px;border-radius:var(--wcs-nav-item-border-width-focus)}@supports not selector(&:has(a:focus-visible)){wcs-nav-item:focus-within{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-nav-item-border-color-focus);outline-offset:-2px;border-radius:var(--wcs-nav-item-border-width-focus)}}@supports not selector(&:has(button:focus-visible)){wcs-nav-item:focus-within{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-nav-item-border-color-focus);outline-offset:-2px;border-radius:var(--wcs-nav-item-border-width-focus)}}}wcs-nav-item i{margin-bottom:0.5rem;display:inline-block}@media (max-width: 1199px){wcs-nav-item i{margin-bottom:0.25rem;display:inline-block}}@media (min-width: 1200px){wcs-nav-item[slot=bottom] a{border-top:var(--wcs-nav-item-border-horizontal-width) solid var(--wcs-nav-item-border-horizontal-color);border-bottom:none !important}}wcs-nav-item:hover{background-color:var(--wcs-nav-item-background-color-hover)}wcs-nav-item:hover a{color:var(--wcs-nav-item-color-hover)}wcs-nav-item:active{background-color:var(--wcs-nav-item-background-color-press)}wcs-nav-item:active a{color:var(--wcs-nav-item-color-press)}wcs-nav-item.active,wcs-nav-item:has(>.active){background-color:var(--wcs-nav-item-background-color-active)}wcs-nav-item.active a,wcs-nav-item:has(>.active) a{color:var(--wcs-nav-item-color-active)}wcs-nav-item.active a::after,wcs-nav-item:has(>.active) a::after{position:absolute;right:0;width:var(--wcs-nav-item-indicator-width-desktop);height:var(--wcs-nav-item-indicator-height-desktop);content:"";background-color:var(--wcs-nav-item-indicator-background-color);border-radius:var(--wcs-nav-item-indicator-border-radius-desktop)}@media (max-width: 1199px){wcs-nav-item.active a::after,wcs-nav-item:has(>.active) a::after{right:auto;bottom:0;width:var(--wcs-nav-item-indicator-width-mobile);height:var(--wcs-nav-item-indicator-height-mobile);border-radius:var(--wcs-nav-item-indicator-border-radius-mobile)}}';const c=r;const s=class{constructor(e){a(this,e)}onKeyDown(a){if(t(a)){this.el.click()}}render(){return e(i,{key:"79abea50c0964fd39358ecf7ed23030f9096b1fd",role:"listitem"},e("slot",{key:"dad7099b9fb08309052b2c35f2bc3a97c40b3ecb"}))}get el(){return o(this)}};s.style=c;export{s as wcs_nav_item};
+//# sourceMappingURL=p-dff8641e.entry.js.map

package/dist/wcs/p-e26c19e5.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as c,H as t}from"./p-32e583ea.js";const s=class{constructor(c){e(this,c)}render(){return c(t,{key:"251b9ccc1b13766b287f356dfc51d6a953ad0a5e",slot:"content"},c("slot",{key:"ee7d55bf47c0f468829e99a26a0fe340fbafcc9f"}))}};export{s as wcs_field_content};
+//# sourceMappingURL=p-e26c19e5.entry.js.map

package/dist/wcs/{p-d9525519.entry.js → p-e56b9ce2.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as e,H as i}from"./p-32e583ea.js";const a=":host{--wcs-list-item-padding:var(--wcs-semantic-spacing-large);--wcs-list-item-border-width:var(--wcs-semantic-border-width-default);--wcs-list-item-border-color:var(--wcs-semantic-color-border-secondary);--wcs-list-item-background-color-default:var(--wcs-semantic-color-background-action-secondary-default);--wcs-list-item-background-color-hover:var(--wcs-semantic-color-background-action-secondary-hover);--wcs-list-item-background-color-active:var(--wcs-semantic-color-background-action-secondary-selected-default);--wcs-list-item-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);--wcs-list-item-title-color:var(--wcs-semantic-color-text-primary);--wcs-list-item-title-font-weight:var(--wcs-semantic-font-weight-heavy);--wcs-list-item-title-line-height:var(--wcs-semantic-font-line-height-medium);--wcs-list-item-title-margin-bottom:var(--wcs-semantic-spacing-base);--wcs-list-item-icon-color:var(--wcs-semantic-color-text-secondary);--wcs-list-item-icon-margin-right:var(--wcs-semantic-spacing-large);--wcs-list-item-actions-margin-left:var(--wcs-semantic-spacing-base);display:flex;padding:var(--wcs-list-item-padding);border:solid var(--wcs-list-item-border-width) var(--wcs-list-item-border-color);margin-bottom:calc(-1 * var(--wcs-list-item-border-width));background-color:var(--wcs-list-item-background-color-default)}:host(:hover){background-color:var(--wcs-list-item-background-color-hover);transition:var(--wcs-list-item-transition-duration)}:host([activated]){background-color:var(--wcs-list-item-background-color-active)}::slotted([slot=title]){color:var(--wcs-list-item-title-color);margin-bottom:var(--wcs-list-item-title-margin-bottom);line-height:var(--wcs-list-item-title-line-height);font-weight:var(--wcs-list-item-title-font-weight);font-family:inherit}::slotted([slot=icon]){color:var(--wcs-list-item-icon-color);margin-right:var(--wcs-list-item-icon-margin-right)}::slotted([slot=actions]){margin-left:var(--wcs-list-item-actions-margin-left)}.content{display:flex;flex-direction:column;flex-grow:1}.header{display:flex;justify-content:space-between}";const c=a;const s=class{constructor(e){t(this,e);this.activated=false}render(){return e(i,{key:"fc01923b2eb3b33d6258718a81455ab790e2dcf4"},e("slot",{key:"6748668e355f3aec9245110299def03ac8783f1e",name:"icon"}),e("div",{key:"46a944966bd87168ad909d7ff9046362a4adf2e2",class:"content"},e("div",{key:"d9d9e1d7bdcc5c1eb947e088b86a7308fd21f9af",class:"header"},e("div",{key:"5dfb072ab048e89a4afe42e2e94b5299f455d889"},e("slot",{key:"ed261613330757d84b1f5f252b32ddf58270b4e8",name:"title"}),e("slot",{key:"ed9f95eaddf982a4aaa07e7b41ae3b9e091c4c85",name:"properties"})),e("slot",{key:"c0aae152b37a42ffb57fcd7fb70f44f83ddf8d3e",name:"actions"})),e("slot",{key:"c7a6b166b7c6e0c160a758640e38feeb5dfcd55d",name:"description"})))}};s.style=c;export{s as wcs_list_item};
-//# sourceMappingURL=p-d9525519.entry.js.map
+import{r as t,h as e,H as i}from"./p-32e583ea.js";const c=":host{--wcs-list-item-padding:var(--wcs-semantic-spacing-large);--wcs-list-item-border-width:var(--wcs-semantic-border-width-default);--wcs-list-item-border-color:var(--wcs-semantic-color-border-secondary);--wcs-list-item-background-color-default:var(--wcs-semantic-color-background-action-secondary-default);--wcs-list-item-background-color-hover:var(--wcs-semantic-color-background-action-secondary-hover);--wcs-list-item-background-color-active:var(--wcs-semantic-color-background-action-secondary-selected-default);--wcs-list-item-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);--wcs-list-item-title-color:var(--wcs-semantic-color-text-primary);--wcs-list-item-title-font-weight:var(--wcs-semantic-font-weight-heavy);--wcs-list-item-title-line-height:var(--wcs-semantic-font-line-height-medium);--wcs-list-item-title-margin-bottom:var(--wcs-semantic-spacing-base);--wcs-list-item-icon-color:var(--wcs-semantic-color-text-secondary);--wcs-list-item-icon-margin-right:var(--wcs-semantic-spacing-large);--wcs-list-item-actions-margin-left:var(--wcs-semantic-spacing-base);display:flex;padding:var(--wcs-list-item-padding);border:solid var(--wcs-list-item-border-width) var(--wcs-list-item-border-color);margin-bottom:calc(-1 * var(--wcs-list-item-border-width));background-color:var(--wcs-list-item-background-color-default)}:host(:hover){background-color:var(--wcs-list-item-background-color-hover);transition:var(--wcs-list-item-transition-duration)}:host([activated]){background-color:var(--wcs-list-item-background-color-active)}::slotted([slot=title]){color:var(--wcs-list-item-title-color);margin-bottom:var(--wcs-list-item-title-margin-bottom);line-height:var(--wcs-list-item-title-line-height);font-weight:var(--wcs-list-item-title-font-weight);font-family:inherit}::slotted([slot=icon]){color:var(--wcs-list-item-icon-color);margin-right:var(--wcs-list-item-icon-margin-right)}::slotted([slot=actions]){margin-left:var(--wcs-list-item-actions-margin-left)}.content{display:flex;flex-direction:column;flex-grow:1}.header{display:flex;justify-content:space-between}";const a=c;const s=class{constructor(e){t(this,e);this.activated=false}render(){return e(i,{key:"12f53246cdb5922136d782f186573f3558bebbed"},e("slot",{key:"e03247aafa44501292b6c86d58455dc91240151c",name:"icon"}),e("div",{key:"24b4b6b485457e2c37001360f55ce1f4e843366e",class:"content"},e("div",{key:"736464f3f43ccbdd2a204c3a7b54b78f8ef79c4e",class:"header"},e("div",{key:"13da0ca922bf545f5610326f5abfc135b66389c5"},e("slot",{key:"1eb08b7d5aa3bef934f39527204f2633f51325df",name:"title"}),e("slot",{key:"3d506707345797e7e40246b18dc0aac557726d3c",name:"properties"})),e("slot",{key:"1a2afea410fe835bc8570e10e5f72a044d7a0218",name:"actions"})),e("slot",{key:"b0e4e3ed4cb20abb4d80ac7ff8893cd7b6311aec",name:"description"})))}};s.style=a;export{s as wcs_list_item};
+//# sourceMappingURL=p-e56b9ce2.entry.js.map

package/dist/wcs/p-ec383729.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as r,H as s,g as o}from"./p-32e583ea.js";import{i as t}from"./p-a0f32ead.js";import{z as i,i as c,a,s as l}from"./p-52d77e1f.js";import{i as d}from"./p-a7468a3a.js";const n=":host{--wcs-error-color:var(--wcs-semantic-color-text-critical);--wcs-error-font-size:var(--wcs-semantic-font-size-caption-2);--wcs-error-font-weight:var(--wcs-semantic-font-weight-book);color:var(--wcs-error-color);font-size:var(--wcs-error-font-size);font-weight:var(--wcs-error-font-weight)}";const f=n;const u=class{constructor(r){e(this,r)}render(){return r(s,{key:"7dffcb3487f7210c5c9a45af709fc942a1410679",role:"alert",slot:"error"},r("slot",{key:"251fbdc26fe58be4296328c4ebaed77329c6c507"}))}};u.style=f;const w=":host{--wcs-form-field-gap:var(--wcs-semantic-spacing-small);--wcs-form-field-prefix-suffix-border-radius:var(--wcs-semantic-border-radius-base);--wcs-form-field-prefix-icon-color:var(--wcs-semantic-color-foreground-primary);--wcs-form-field-prefix-value-color:var(--wcs-semantic-color-text-inverse);--wcs-form-field-prefix-placeholder-color:var(--wcs-semantic-color-text-inverse);display:flex;flex-direction:column;gap:var(--wcs-form-field-gap);}:host .input-container{display:flex}:host ::slotted([slot=prefix]){--wcs-select-value-color:var(--wcs-semantic-color-text-inverse);--wcs-select-placeholder-color:var(--wcs-semantic-color-text-inverse);--wcs-select-control-background-color:var(--wcs-semantic-color-background-action-primary-default);--wcs-select-control-arrow-color:var(--wcs-form-field-prefix-icon-color);--wcs-select-control-border-radius:var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);--wcs-select-control-border-width-default:0;--wcs-select-control-border-style-focus:dashed;--wcs-select-control-border-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-native-select-value-color:var(--wcs-semantic-color-text-inverse);--wcs-native-select-placeholder-color:var(--wcs-semantic-color-text-inverse);--wcs-native-select-arrow-color:var(--wcs-form-field-prefix-icon-color);--wcs-native-select-background-color:var(--wcs-semantic-color-background-action-primary-default);--wcs-native-select-border-width:0;--wcs-native-select-border-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-native-select-border-style-focus:dashed;--wcs-native-select-border-radius:var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);--wcs-native-select-option-color:var(--wcs-semantic-color-text-inverse);--wcs-button-border-radius:var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius)}:host ::slotted([slot=suffix]){--wcs-button-border-radius:0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;--wcs-select-control-border-radius:0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;--wcs-native-select-border-radius:0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0}::slotted([slot=prefix][disabled]),::slotted([slot=prefix]:disabled),::slotted([slot=prefix][aria-disabled=true]),::slotted([slot=prefix][data-disabled]){--wcs-semantic-color-background-control-disabled:var(--wcs-semantic-color-background-action-primary-disabled);--wcs-semantic-color-text-disabled:var(--wcs-semantic-color-foreground-disabled);--wcs-select-control-background-color:var(--wcs-semantic-color-background-action-primary-disabled);--wcs-select-value-color:var(--wcs-semantic-color-text-disabled);--wcs-select-placeholder-color:var(--wcs-semantic-color-text-disabled);--wcs-native-select-background-color:var(--wcs-semantic-color-background-action-primary-disabled);--wcs-native-select-placeholder-color:var(--wcs-semantic-color-text-disabled);--wcs-native-select-value-color:var(--wcs-semantic-color-text-disabled)}::slotted([slot=prefix]:hover:not([disabled]):not([data-disabled])){--wcs-select-control-background-color:var(--wcs-semantic-color-background-action-primary-hover);--wcs-native-select-background-color:var(--wcs-semantic-color-background-action-primary-hover)}::slotted([slot=prefix]:active:not([disabled]):not([data-disabled])){--wcs-select-control-background-color:var(--wcs-semantic-color-background-action-primary-press);--wcs-native-select-background-color:var(--wcs-semantic-color-background-action-primary-press)}.input-container{display:flex}::slotted(wcs-select:not([slot=prefix])){width:100%}::slotted(wcs-native-select:not([slot=prefix])){width:100%}:host(.has-prefix) ::slotted(:not([slot=prefix])){--wcs-input-border-radius-left:0;--wcs-select-control-border-radius:0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;--wcs-native-select-border-radius:0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0}:host(.has-suffix) ::slotted(:not([slot=suffix])){--wcs-input-border-radius-right:0;--wcs-select-control-border-radius:var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);--wcs-native-select-border-radius:var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius)}:host(.has-prefix.has-suffix) ::slotted(:not([slot=prefix]):not([slot=suffix])){--wcs-input-border-radius-left:0;--wcs-input-border-radius-right:0;--wcs-select-control-border-radius:0;--wcs-native-select-border-radius:0}";const b=w;const v=class{constructor(r){e(this,r);this.isError=false;this.hasPrefix=false;this.hasSuffix=false;this.spiedElement=undefined}componentWillLoad(){this.hasSuffix=this.el.querySelector("[slot=suffix]")!==null;this.hasPrefix=this.el.querySelector("[slot=prefix]")!==null}componentDidLoad(){this.initSpiedElement();this.addRequiredMarkerToLabel();this.updateErrorStateOnInput(this.isError)}isErrorChange(e){this.updateErrorStateOnInput(e);this.updateAriaAttributes()}updateErrorStateOnInput(e){if(this.spiedElementIsOfType("wcs-input","wcs-textarea")){if(e){this.spiedElement.setAttribute("state","error")}else{this.spiedElement.setAttribute("state","initial")}}}spiedElementIsOfType(...e){var r;for(const s of e){if(((r=this.spiedElement)===null||r===void 0?void 0:r.tagName)===s.toUpperCase())return true}return false}addRequiredMarkerToLabel(){var e;const r=this.el.querySelector("wcs-label");this.observer=new MutationObserver((e=>{var s;const o=e.filter((e=>e.attributeName==="required"))[0];if(o){this.updateLabelRequiredFlag((s=this.spiedElement)===null||s===void 0?void 0:s.hasAttribute("required"),r)}}));if(this.spiedElement){this.observer.observe(this.spiedElement,{attributes:true})}const s=(e=this.spiedElement)===null||e===void 0?void 0:e.hasAttribute("required");this.updateLabelRequiredFlag(s,r)}initSpiedElement(){var e,r;const s=["wcs-input","wcs-select","wcs-native-select","wcs-textarea","wcs-radio-group","wcs-switch","wcs-checkbox","wcs-native-select","wcs-counter"];this.spiedElement=(e=this.el.shadowRoot.querySelector("slot:not([name])"))===null||e===void 0?void 0:e.assignedElements().filter((e=>[...s,"SLOT"].map((e=>e.toUpperCase())).indexOf(e.nodeName)!==-1))[0];if(((r=this.spiedElement)===null||r===void 0?void 0:r.tagName)==="SLOT"){this.spiedElement=this.spiedElement.assignedElements().filter((e=>s.map((e=>e.toUpperCase())).indexOf(e.nodeName)!==-1))[0]}if(!this.spiedElement){console.warn("Form-field component support only "+s.toString()+". Some features may not work with the provided component.");return}}async updateAriaAttributes(){if(t(this.spiedElement)){const e=[];if(d(this.spiedElement)){const r=await this.spiedElement.getLabel();const s=`${this.label||""} ${r||""}`.trim();if(s){e.push(i(s))}}else{if(this.label){e.push(i(this.label))}}if(this.description){e.push(i(this.description))}if(this.isError){this.spiedElement.setAriaAttribute("aria-invalid","true");if(this.error){e.push(i(this.error))}}else{this.spiedElement.setAriaAttribute("aria-invalid","false")}this.spiedElement.setAriaAttribute("aria-label",e.length>0?e.join(" "):null)}}get label(){var e;return((e=this.el.querySelector("wcs-label"))===null||e===void 0?void 0:e.textContent)||null}get description(){var e;return((e=this.el.querySelector("wcs-hint"))===null||e===void 0?void 0:e.textContent)||null}get error(){var e;return((e=this.el.querySelector("wcs-error"))===null||e===void 0?void 0:e.textContent)||null}updateLabelRequiredFlag(e,r){if(e&&r){r.setAttribute("required","true")}else if(!e&&r){r.removeAttribute("required")}}disconnectedCallback(){var e;(e=this.observer)===null||e===void 0?void 0:e.disconnect()}render(){let e="";const o=this.isError;if(this.hasSuffix){e+=" has-suffix"}if(this.hasPrefix){e+=" has-prefix"}return r(s,{key:"d8a5d2023add393b0a31173351a3d16d9fa0b1a6",class:e},r("slot",{key:"3f347f4dce239c0106fbbe52bdc217fa37c05d01",name:"label"}),r("div",{key:"d6cb92104d72530059ecb9a383ff832afb0c2141",class:"input-container"},r("slot",{key:"8be28f721ff351d41dced80c97c0e34337703d0e",name:"prefix"}),r("slot",{key:"cc58d463877a1e8513736a987286e965870e096d",onSlotchange:()=>this.onFormInputSlotChange()}),r("slot",{key:"898709cfcf0ae1cd43dabd55547d62199d6230c9",name:"suffix"})),o?r("slot",{name:"error"}):"",r("slot",{key:"aaf2d35dfbdfda47b440f96d7f9aa22cb09f6a06",name:"messages"}))}onFormInputSlotChange(){this.initSpiedElement();this.updateAriaAttributes();this.addRequiredMarkerToLabel();this.updateErrorStateOnInput(this.isError)}get el(){return o(this)}static get watchers(){return{isError:["isErrorChange"]}}};v.style=b;const h=':host{--wcs-label-font-weight:var(--wcs-semantic-font-weight-book);--wcs-label-color:var(--wcs-semantic-color-text-primary);--wcs-label-required-marker-color:var(--wcs-semantic-color-text-critical);--wcs-label-gap:var(--wcs-semantic-spacing-small);font-weight:var(--wcs-label-font-weight)}:host([required])>label::after{font-weight:var(--wcs-label-font-weight);color:var(--wcs-label-required-marker-color);content:" *"}label{display:inline-block;color:var(--wcs-label-color);font-weight:var(--wcs-label-font-weight)}label ::slotted(wcs-mat-icon){display:inline;vertical-align:middle;margin-left:var(--wcs-label-gap)}';const p=h;const m=["title"];const x=class{constructor(r){e(this,r);this.inheritedAttributes={};this.required=false}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},c(this.el)),a(this.el,m))}async setAriaAttribute(e,r){l(this.nativeLabel,e,r)}render(){return r(s,{key:"62f8ca37637cc792483f24476dbbd63ff3c077e5",slot:"label"},r("label",Object.assign({key:"3cef9a517d57652b75af3157d2c96a34693b258f",ref:e=>this.nativeLabel=e},this.inheritedAttributes),r("slot",{key:"a614b379b45ac3d4cc1d58c45d39b64c0312c1d7"})))}get el(){return o(this)}};x.style=p;export{u as wcs_error,v as wcs_form_field,x as wcs_label};
+//# sourceMappingURL=p-ec383729.entry.js.map

package/dist/wcs/p-ec383729.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["errorCss","WcsErrorStyle0","Label","render","h","Host","key","role","slot","formFieldCss","WcsFormFieldStyle0","FormField","componentWillLoad","this","hasSuffix","el","querySelector","hasPrefix","componentDidLoad","initSpiedElement","addRequiredMarkerToLabel","updateErrorStateOnInput","isError","isErrorChange","newValue","updateAriaAttributes","spiedElementIsOfType","spiedElement","setAttribute","types","type","_a","tagName","toUpperCase","label","observer","MutationObserver","mutations","requiredAttMutation","filter","m","attributeName","updateLabelRequiredFlag","hasAttribute","observe","attributes","isRequired","SUPPORTED_COMPONENTS","shadowRoot","assignedElements","n","map","x","indexOf","nodeName","_b","console","warn","toString","isMutableAriaAttribute","ariaLabelParts","isControlComponentWithLabel","innerLabel","getLabel","combinedLabel","trim","push","normalizeWhitespace","description","setAriaAttribute","error","length","join","textContent","removeAttribute","disconnectedCallback","disconnect","classes","class","name","onSlotchange","onFormInputSlotChange","labelCss","WcsLabelStyle0","LABEL_INHERITED_ATTRS","inheritedAttributes","Object","assign","inheritAriaAttributes","inheritAttributes","attr","value","setOrRemoveAttribute","nativeLabel","ref"],"sources":["src/components/error/error.scss?tag=wcs-error&encapsulation=shadow","src/components/error/error.tsx","src/components/form-field/form-field.scss?tag=wcs-form-field&encapsulation=shadow","src/components/form-field/form-field.tsx","src/components/label/label.scss?tag=wcs-label&encapsulation=shadow","src/components/label/label.tsx"],"sourcesContent":[":host {\n    --wcs-error-color: var(--wcs-semantic-color-text-critical);\n    --wcs-error-font-size: var(--wcs-semantic-font-size-caption-2);\n    --wcs-error-font-weight: var(--wcs-semantic-font-weight-book);\n\n    color: var(--wcs-error-color);\n    font-size: var(--wcs-error-font-size);\n    font-weight: var(--wcs-error-font-weight);\n}\n","import { Component, ComponentInterface, h, Host } from '@stencil/core';\n\n/**\n * The `wcs-error` should always be wrapped in a `wcs-form-field`.\n * It is used to display a red message under the field indicating an incorrect user input.\n * \n * ## Accessibility guidelines 💡\n * - Provide a relevant error message to inform the users what they should change to make the field valid\n * - Always add the error icon, to ensure the visual indication of the error state other than the color\n * - `aria-description` will be automatically added to the field for screen readers\n * - `aria-invalid=\"true\"` will be automatically added to the field for screen readers\n * \n * @cssprop --wcs-error-color - Color of the text\n * @cssprop --wcs-error-font-size - Font size\n * @cssprop --wcs-error-font-weight - Font weight\n */\n@Component({\n    tag: 'wcs-error',\n    styleUrl: 'error.scss',\n    shadow: true,\n})\nexport class Label implements ComponentInterface {\n    render() {\n        return (\n            <Host role=\"alert\" slot=\"error\">\n                <slot />\n            </Host>\n        );\n    }\n}\n",":host {\n    --wcs-form-field-gap: var(--wcs-semantic-spacing-small);\n\n    --wcs-form-field-prefix-suffix-border-radius: var(--wcs-semantic-border-radius-base);\n\n    --wcs-form-field-prefix-icon-color: var(--wcs-semantic-color-foreground-primary);\n    --wcs-form-field-prefix-value-color: var(--wcs-semantic-color-text-inverse);\n    --wcs-form-field-prefix-placeholder-color: var(--wcs-semantic-color-text-inverse);\n\n    display: flex;\n    flex-direction: column;\n    gap: var(--wcs-form-field-gap);\n\n    .input-container {\n        display: flex;\n    }\n\n    /* Components in the prefix slot */\n    ::slotted([slot=prefix]) {\n        /* Select */\n        --wcs-select-value-color: var(--wcs-semantic-color-text-inverse);\n        --wcs-select-placeholder-color: var(--wcs-semantic-color-text-inverse);\n        --wcs-select-control-background-color: var(--wcs-semantic-color-background-action-primary-default);\n        --wcs-select-control-arrow-color: var(--wcs-form-field-prefix-icon-color);\n        --wcs-select-control-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);\n        --wcs-select-control-border-width-default: 0;\n        --wcs-select-control-border-style-focus: dashed;\n        --wcs-select-control-border-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n        /* Native select */\n        --wcs-native-select-value-color: var(--wcs-semantic-color-text-inverse);\n        --wcs-native-select-placeholder-color: var(--wcs-semantic-color-text-inverse);\n        --wcs-native-select-arrow-color: var(--wcs-form-field-prefix-icon-color);\n        --wcs-native-select-background-color: var(--wcs-semantic-color-background-action-primary-default);\n        --wcs-native-select-border-width: 0;\n        --wcs-native-select-border-color-focus: var(--wcs-semantic-color-border-focus-base);\n        --wcs-native-select-border-style-focus: dashed;\n        --wcs-native-select-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);\n        --wcs-native-select-option-color: var(--wcs-semantic-color-text-inverse);\n\n        /* Button */\n        --wcs-button-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);\n    }\n\n    /* Components in the suffix slot */\n    ::slotted([slot=suffix]) {\n        --wcs-button-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;\n        --wcs-select-control-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;\n        --wcs-native-select-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;\n    }\n}\n\n/* Disabled components in the prefix slot */\n::slotted([slot=prefix][disabled]),\n::slotted([slot=prefix]:disabled),\n::slotted([slot=prefix][aria-disabled=true]),\n::slotted([slot=prefix][data-disabled]) {\n    --wcs-semantic-color-background-control-disabled: var(--wcs-semantic-color-background-action-primary-disabled);\n    --wcs-semantic-color-text-disabled: var(--wcs-semantic-color-foreground-disabled);\n\n    --wcs-select-control-background-color: var(--wcs-semantic-color-background-action-primary-disabled);\n    --wcs-select-value-color: var(--wcs-semantic-color-text-disabled);\n    --wcs-select-placeholder-color: var(--wcs-semantic-color-text-disabled);\n\n    --wcs-native-select-background-color: var(--wcs-semantic-color-background-action-primary-disabled);\n    --wcs-native-select-placeholder-color: var(--wcs-semantic-color-text-disabled);\n    --wcs-native-select-value-color: var(--wcs-semantic-color-text-disabled);\n}\n\n/* Hover and press states */\n::slotted([slot=prefix]:hover:not([disabled]):not([data-disabled])) {\n    --wcs-select-control-background-color: var(--wcs-semantic-color-background-action-primary-hover);\n    --wcs-native-select-background-color: var(--wcs-semantic-color-background-action-primary-hover);\n}\n\n::slotted([slot=prefix]:active:not([disabled]):not([data-disabled])) {\n    --wcs-select-control-background-color: var(--wcs-semantic-color-background-action-primary-press);\n    --wcs-native-select-background-color: var(--wcs-semantic-color-background-action-primary-press);\n}\n\n.input-container {\n    display: flex;\n}\n\n::slotted(wcs-select:not([slot=prefix])) {\n    width: 100%;\n}\n\n::slotted(wcs-native-select:not([slot=prefix])) {\n    width: 100%;\n}\n\n/* Components in the center that are prefixed */\n:host(.has-prefix) {\n    ::slotted(:not([slot=prefix])) {\n        --wcs-input-border-radius-left: 0;\n        --wcs-select-control-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;\n        --wcs-native-select-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;\n    }\n}\n\n/* Components in the center that are suffixed */\n:host(.has-suffix) {\n    ::slotted(:not([slot=suffix])) {\n        --wcs-input-border-radius-right: 0;\n        --wcs-select-control-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);\n        --wcs-native-select-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);\n    }\n\n}\n\n/* Components in the center that are prefixed AND suffixed */\n:host(.has-prefix.has-suffix) {\n    ::slotted(:not([slot=prefix]):not([slot=suffix])) {\n        --wcs-input-border-radius-left: 0;\n        --wcs-input-border-radius-right: 0;\n        --wcs-select-control-border-radius: 0;\n        --wcs-native-select-border-radius: 0;\n    }\n}\n","import { Component, ComponentInterface, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { isMutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { normalizeWhitespace } from '../../utils/helpers';\nimport { isControlComponentWithLabel } from \"../../utils/control-component-interface\";\n\n/**\n * Form field component wraps the native input element and add some more functionality on top of it.\n *\n * You can use the `wcs-form-field` to wrap any of these components :\n * - `wcs-input`\n * - `wcs-textarea`\n * - `wcs-radio-group`\n * - `wcs-switch`\n * - `wcs-checkbox`\n * - `wcs-native-select`\n * - `wcs-select`\n * - `wcs-counter`\n *\n * For non-supported slotted component, you can use the `required` attribute on the wrapped component to tell the\n * form-field that it is required. It will add a red star after the label of the form field.\n * \n * ## Accessibility guidelines 💡\n * - Each form control should be identified with a unique `wcs-label`\n * - Don't forget to add form validation to make sure the data is correctly formatted\n * - If the `wcs-label` is required, the form control must have the `required` HTML attribute and vice-versa (this is normally automatically set)\n * - The form should not be submittable if at least one required form control is not filled\n * - Hints are optional and should only be used to add extra information\n * - Additional aria attributes put on `<wcs-form-field>` won't inherit onto the native component : you must use the `setAriaAttribute` method.\n * \n * @slot label - Automatically filled when a `wcs-label` is provided\n * @slot <no-name> - The main slot containing the wrapped component\n * @slot prefix - (Optional) Display a component as prefix. See \"Prefix Suffix Group\" story for more info.\n * @slot suffix - (Optional) Display a component as suffix. See \"Prefix Suffix Group\" story for more info.\n * @slot error - Automatically filled when a `wcs-error` is provided\n * @slot messages - Automatically filled when a `wcs-hint` is provided\n *\n * @cssprop --wcs-form-field-gap - Defines the spacing between the label, input control, and hint messages.\n * @cssprop --wcs-form-field-prefix-suffix-border-radius - Sets the border radius for both prefix and suffix elements.\n * \n * @cssprop --wcs-form-field-prefix-background-color-default - Background color default for prefix elements\n * @cssprop --wcs-form-field-prefix-background-color-disabled - Background color for prefix elements when disabled\n * @cssprop --wcs-form-field-prefix-background-color-hover - Background color for prefix elements when hovered\n * @cssprop --wcs-form-field-prefix-border-color-default - Defines the default border color for prefix\n * @cssprop --wcs-form-field-prefix-border-color-focus - Sets the border color for prefix elements when focused.\n * @cssprop --wcs-form-field-prefix-border-color-disabled - Determines the border color for prefix elements when disabled.\n * \n * @cssprop --wcs-form-field-prefix-icon-color - Specifies the color of icons within prefix elements.\n * @cssprop --wcs-form-field-prefix-value-color - Sets the color of values within prefix elements.\n * @cssprop --wcs-form-field-prefix-placeholder-color - Defines the placeholder text color within prefix elements.\n * @cssprop --wcs-form-field-prefix-color-disabled - Determines the text color for prefix elements when disabled.\n */\n@Component({\n    tag: 'wcs-form-field',\n    styleUrl: 'form-field.scss',\n    shadow: true,\n})\nexport class FormField implements ComponentInterface {\n    @Element() private el!: HTMLWcsFormFieldElement;\n\n    /**\n     * Specifies whether the form field is in an error state. Displays the field border in red and the message contained in the wcs-error component\n     */\n    @Prop({mutable: true, reflect: true}) isError: boolean = false;\n\n    @State() private hasPrefix: boolean = false;\n    @State() private hasSuffix: boolean = false;\n    @State() private spiedElement: Element;\n\n    private observer: MutationObserver;\n\n    componentWillLoad() {\n        this.hasSuffix = this.el.querySelector('[slot=suffix]') !== null;\n        this.hasPrefix = this.el.querySelector('[slot=prefix]') !== null;\n    }\n\n    componentDidLoad() {\n        this.initSpiedElement();\n        this.addRequiredMarkerToLabel();\n        this.updateErrorStateOnInput(this.isError);\n    }\n\n    @Watch('isError')\n    // @ts-ignore\n    private isErrorChange(newValue: boolean) {\n        this.updateErrorStateOnInput(newValue);\n        this.updateAriaAttributes();\n    }\n\n    private updateErrorStateOnInput(newValue: boolean) {\n        if (this.spiedElementIsOfType('wcs-input', 'wcs-textarea')) {\n            if (newValue) {\n                this.spiedElement.setAttribute('state', 'error');\n            } else {\n                this.spiedElement.setAttribute('state', 'initial');\n            }\n        }\n    }\n\n    /**\n     * This function return true if the form field contains an element with tagName matches a value of the types param\n     * @param types\n     * @private\n     */\n    private spiedElementIsOfType(...types: string[]): boolean {\n        for (const type of types) {\n            if (this.spiedElement?.tagName === type.toUpperCase()) return true;\n        }\n        return false\n    }\n\n\n    private addRequiredMarkerToLabel() {\n        // TODO: deprecate this in favor of the 'required' component attribute\n        const label = this.el.querySelector('wcs-label');\n        this.observer = new MutationObserver(mutations => {\n            const requiredAttMutation = mutations.filter(m => m.attributeName === 'required')[0];\n            if (requiredAttMutation) {\n                this.updateLabelRequiredFlag(this.spiedElement?.hasAttribute('required'), label);\n            }\n        });\n        if (this.spiedElement) {\n            this.observer.observe(this.spiedElement, {attributes: true});\n        }\n\n        const isRequired = this.spiedElement?.hasAttribute('required');\n        this.updateLabelRequiredFlag(isRequired, label);\n    }\n\n\n    private initSpiedElement() {\n        const SUPPORTED_COMPONENTS = ['wcs-input', 'wcs-select', 'wcs-native-select', 'wcs-textarea', 'wcs-radio-group', 'wcs-switch', 'wcs-checkbox', 'wcs-native-select', 'wcs-counter'];\n\n        this.spiedElement = (this.el.shadowRoot.querySelector('slot:not([name])') as HTMLSlotElement)\n            ?.assignedElements()\n            .filter(n => [...SUPPORTED_COMPONENTS, 'SLOT'].map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0];\n\n        // If the component is used in another web component\n        if (this.spiedElement?.tagName === 'SLOT') {\n            this.spiedElement = ((this.spiedElement as HTMLSlotElement)\n                .assignedElements()\n                .filter(n => SUPPORTED_COMPONENTS.map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0]) as HTMLElement;\n        }\n\n        if (!this.spiedElement) {\n            // tslint:disable-next-line:no-console\n            console.warn('Form-field component support only ' + SUPPORTED_COMPONENTS.toString() + '. Some features may not work with the provided component.');\n            return;\n        }\n    }\n    \n    private async updateAriaAttributes(): Promise<void> {\n        if (isMutableAriaAttribute(this.spiedElement)) {\n            const ariaLabelParts: string[] = [];\n            if (isControlComponentWithLabel(this.spiedElement)) {\n                const innerLabel = await this.spiedElement.getLabel();\n                const combinedLabel = `${this.label || ''} ${innerLabel || ''}`.trim();\n                if(combinedLabel) {\n                    ariaLabelParts.push(normalizeWhitespace(combinedLabel));\n                }\n            } else {\n                if(this.label) {\n                    ariaLabelParts.push(normalizeWhitespace(this.label));\n                }\n            }\n\n            if(this.description) {\n                ariaLabelParts.push(normalizeWhitespace(this.description));\n            }\n            \n            // Sur les autres DS, généralement seul l'erreur est affichée et pas avec la description\n            if(this.isError) {\n                this.spiedElement.setAriaAttribute('aria-invalid', 'true');\n                if(this.error) {\n                    ariaLabelParts.push(normalizeWhitespace(this.error));\n                }\n            } else {\n                this.spiedElement.setAriaAttribute('aria-invalid', 'false');\n            }\n\n            this.spiedElement.setAriaAttribute('aria-label', ariaLabelParts.length > 0 ? ariaLabelParts.join(' ') : null);\n        }\n    }\n    \n    private get label(): string | null {\n        return this.el.querySelector('wcs-label')?.textContent || null;\n    }\n    \n    private get description(): string | null {\n        return this.el.querySelector('wcs-hint')?.textContent || null;\n    }\n    \n    private get error(): string | null {\n        return this.el.querySelector('wcs-error')?.textContent || null;\n    }\n\n    private updateLabelRequiredFlag(isRequired: boolean, label: Element) {\n        if (isRequired && label) {\n            label.setAttribute('required', 'true');\n        } else if (!isRequired && label) {\n            label.removeAttribute('required');\n        }\n    }\n\n    disconnectedCallback() {\n        this.observer?.disconnect();\n    }\n\n    render() {\n        let classes = '';\n        const isError = this.isError;\n\n        if (this.hasSuffix) {\n            classes += ' has-suffix';\n        }\n        if (this.hasPrefix) {\n            classes += ' has-prefix';\n        }\n        return (\n            <Host class={classes}>\n                <slot name=\"label\"/>\n                <div class=\"input-container\">\n                    <slot name=\"prefix\"/>\n                    <slot onSlotchange={() => this.onFormInputSlotChange()}/>\n                    <slot name=\"suffix\"/>\n                </div>\n                {\n                    isError ? (<slot name=\"error\"/>) : ''\n                }\n                <slot name=\"messages\"/>\n            </Host>\n        );\n    }\n\n    private onFormInputSlotChange() {\n        this.initSpiedElement();\n        this.updateAriaAttributes()\n        this.addRequiredMarkerToLabel();\n        this.updateErrorStateOnInput(this.isError);\n    }\n}\n",":host {\n    --wcs-label-font-weight: var(--wcs-semantic-font-weight-book);\n    --wcs-label-color: var(--wcs-semantic-color-text-primary);\n    --wcs-label-required-marker-color: var(--wcs-semantic-color-text-critical);\n\n    --wcs-label-gap: var(--wcs-semantic-spacing-small);\n\n    font-weight: var(--wcs-label-font-weight);\n}\n\n:host([required]) > label::after {\n    font-weight: var(--wcs-label-font-weight);\n    color: var(--wcs-label-required-marker-color);\n    content: ' *';\n}\n\nlabel {\n    display: inline-block;\n    color: var(--wcs-label-color);\n    font-weight: var(--wcs-label-font-weight);\n\n    // Add margin before tooltip icon\n    ::slotted(wcs-mat-icon) {\n        display: inline;\n        vertical-align: middle;\n        margin-left: var(--wcs-label-gap);\n    }\n}\n","import { Component, ComponentInterface, h, Host, Method, Prop, Element } from '@stencil/core';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst LABEL_INHERITED_ATTRS = ['title'];\n\n/**\n * The `wcs-label` should always be wrapped in a `wcs-form-field`.\n * It is used to caption a form control component.\n *\n * ## Accessibility guidelines 💡\n * - Use concise name for the label. If you want to describe more your form control, add a `wcs-hint`\n * - Use the required flag only as an indication to inform users that the form control is required\n * \n * @cssprop --wcs-label-color - Color of the text\n * @cssprop --wcs-label-font-weight - Font weight of the text\n * \n * @cssprop --wcs-label-required-marker-color - Color of the required marker\n * \n * @cssprop --wcs-label-gap - Gap between text and required marker\n */\n@Component({\n    tag: 'wcs-label',\n    styleUrl: 'label.scss',\n    shadow: true,\n})\nexport class Label implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeLabel?: HTMLLabelElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    /**\n     * If `true`, marks the label with a red star.\n     * Automatically added if the wrapped component inside the `wcs-form-field` already has the `required` attribute. \n     */\n    @Prop({ reflect: true }) required: boolean = false;\n\n    componentWillLoad() {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, LABEL_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeLabel, attr, value);\n    }\n\n    render() {\n        return (\n            <Host slot=\"label\">\n                <label ref={(el) => this.nativeLabel = el} {...this.inheritedAttributes}>\n                    <slot />\n                </label>\n            </Host>\n        );\n    }\n}\n"],"mappings":"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"}

package/dist/wcs/p-f929b66f.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as a,H as t}from"./p-32e583ea.js";const c=":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 s=c;const r=class{constructor(a){e(this,a)}render(){return a(t,{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"})))}};r.style=s;export{r as wcs_card_header};
+//# sourceMappingURL=p-f929b66f.entry.js.map

package/dist/wcs/p-f929b66f.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cardHeaderCss","WcsCardHeaderStyle0","CardHeader","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":"kDAAA,MAAMA,EAAgB,6rBACtB,MAAAC,EAAeD,E,MCmBFE,EAAU,M,yBACnB,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/dist/wcs/{p-da4636fa.entry.js → p-fd187bce.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as o,h as i,H as n}from"./p-32e583ea.js";const t=":host{--wcs-com-nav-item-gap:var(--wcs-semantic-spacing-base);--wcs-com-nav-item-font-size:var(--wcs-semantic-font-size-label-1);--wcs-com-nav-item-arrow-icon-color:var(--wcs-semantic-color-foreground-action-neutral-default);--wcs-com-nav-item-arrow-icon-font-size:0.6rem;--wcs-com-nav-item-arrow-icon-font-family:icons;--wcs-com-nav-item-arrow-icon-line-height:1;--wcs-com-nav-item-focus-outline-color:var(--wcs-semantic-color-border-focus-base);position:relative;display:inline-flex;align-items:center;gap:var(--wcs-com-nav-item-gap);height:fit-content;padding:0 8px;font:inherit;}:host ::slotted(a){user-select:none;cursor:pointer;text-decoration:none;font-size:var(--wcs-com-nav-item-font-size);color:inherit;font-weight:inherit;display:flex;align-items:center}:host .arrow-icon{display:inline-block;font-family:icons;color:var(--wcs-com-nav-item-arrow-icon-color);font-size:var(--wcs-com-nav-item-arrow-icon-font-size);line-height:var(--wcs-com-nav-item-arrow-icon-line-height);box-sizing:border-box}:host .arrow-container{display:unset}:host ::slotted(a:focus-visible){outline:none}:host(:focus-within){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-item-focus-outline-color);outline-offset:0.5rem;border-radius:2px}@media screen and (min-width: 576px){:host ::slotted(a){display:flex;align-items:center;height:100%;padding-top:unset;padding-bottom:unset;padding-left:unset}}";const a=t;const s=class{constructor(i){e(this,i);this.wcsClickOnFinalAction=o(this,"wcsClickOnFinalAction",7)}onClick(){this.wcsClickOnFinalAction.emit()}render(){return i(n,{key:"ebafe8ee7fa4dfb839095a00119b1fb60ec9f61f",role:"listitem"},i("slot",{key:"4dd33801a76cd03665c107afb6a1640f2843d3cd"}),i("span",{key:"a9fe68e0e7b0e4221ba6b1a6b3e6802876082ce4",class:"arrow-container"},i("span",{key:"b0d3aa7fbfb967e7910ea6f446e1dd0489d39265","aria-hidden":"true",class:"arrow-icon"},"")))}};s.style=a;export{s as wcs_com_nav_item};
-//# sourceMappingURL=p-da4636fa.entry.js.map
+import{r as e,c as o,h as i,H as n}from"./p-32e583ea.js";const t=":host{--wcs-com-nav-item-gap:var(--wcs-semantic-spacing-base);--wcs-com-nav-item-font-size:var(--wcs-semantic-font-size-label-1);--wcs-com-nav-item-arrow-icon-color:var(--wcs-semantic-color-foreground-action-neutral-default);--wcs-com-nav-item-arrow-icon-font-size:0.6rem;--wcs-com-nav-item-arrow-icon-font-family:icons;--wcs-com-nav-item-arrow-icon-line-height:1;--wcs-com-nav-item-focus-outline-color:var(--wcs-semantic-color-border-focus-base);position:relative;display:inline-flex;align-items:center;gap:var(--wcs-com-nav-item-gap);height:fit-content;padding:0 8px;font:inherit;}:host ::slotted(a){user-select:none;cursor:pointer;text-decoration:none;font-size:var(--wcs-com-nav-item-font-size);color:inherit;font-weight:inherit;display:flex;align-items:center}:host .arrow-icon{display:inline-block;font-family:icons;color:var(--wcs-com-nav-item-arrow-icon-color);font-size:var(--wcs-com-nav-item-arrow-icon-font-size);line-height:var(--wcs-com-nav-item-arrow-icon-line-height);box-sizing:border-box}:host .arrow-container{display:unset}:host ::slotted(a:focus-visible){outline:none}:host(:focus-within){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-item-focus-outline-color);outline-offset:0.5rem;border-radius:2px}@media screen and (min-width: 576px){:host ::slotted(a){display:flex;align-items:center;height:100%;padding-top:unset;padding-bottom:unset;padding-left:unset}}";const a=t;const s=class{constructor(i){e(this,i);this.wcsClickOnFinalAction=o(this,"wcsClickOnFinalAction",7)}onClick(){this.wcsClickOnFinalAction.emit()}render(){return i(n,{key:"25690c3eecac76d2b29b0aeda90f5e1bf5fd0b22",role:"listitem"},i("slot",{key:"236d67ffd9fefb7650d2b67cee685852030adb4b"}),i("span",{key:"2ef478d77dc28d169817500145c8d9df525bd439",class:"arrow-container"},i("span",{key:"0fafbba11e817663ad7e18ff6947cdbd07494f69","aria-hidden":"true",class:"arrow-icon"},"")))}};s.style=a;export{s as wcs_com_nav_item};
+//# sourceMappingURL=p-fd187bce.entry.js.map

package/dist/wcs/{p-b96f4921.entry.js → p-fdeae83e.entry.js}

@@ -1,2 +1,2 @@
-import{r as o,c as a,h as s,H as i,g as t}from"./p-32e583ea.js";import{s as e,c as r,d as n,u as d,v as c,w as p,x as l,n as h}from"./p-52d77e1f.js";const g=":host{display:flex;--wcs-radio-group-gap:var(--wcs-semantic-spacing-base);--wcs-radio-group-option-height:var(--wcs-semantic-size-m);--wcs-radio-group-option-gap:var(--wcs-semantic-spacing-small);--wcs-radio-group-option-padding:var(--wcs-semantic-spacing-small) var(--wcs-semantic-spacing-small);--wcs-radio-group-option-border-radius:var(--wcs-semantic-border-radius-base);--wcs-radio-group-option-background-color:var(--wcs-semantic-color-background-surface-accent-lightest)}:host([mode=radio]){flex-direction:column;gap:var(--wcs-radio-group-gap)}:host([mode=option]){box-sizing:border-box;height:var(--wcs-radio-group-option-height);display:inline-flex;flex-direction:row;align-items:center;gap:var(--wcs-radio-group-option-gap);padding:var(--wcs-radio-group-option-padding);background-color:var(--wcs-radio-group-option-background-color);border-radius:var(--wcs-radio-group-option-border-radius)}:host([mode=horizontal]){justify-content:space-between}";const u=g;const m=class{constructor(s){o(this,s);this.wcsChange=a(this,"wcsChange",7);this.value=undefined;this.name=undefined;this.mode="radio"}onValueChangeHandler(o){this.updateRadioTabIndex(o);this.updateAllRadioState()}async setAriaAttribute(o,a){e(this.el,o,a)}componentDidLoad(){this.onValueChangeHandler(this.value);this.updateAllRadioModeAndName()}onSlotChange(){this.updateRadioTabIndex(this.value);this.updateAllRadioModeAndName()}updateAllRadioState(){this.getSlottedRadios().forEach((o=>o.updateState()))}updateAllRadioModeAndName(){this.getSlottedRadios().forEach((o=>{o.mode=this.mode;o.name=this.name}))}updateRadioTabIndex(o){const a=this.getSlottedRadios();const s=a.find((o=>!o.disabled));const i=a.find((a=>a.value===o&&!a.disabled));if(!s&&!i){return}const t=i||s;for(const o of a){const a=o===t?0:-1;o.setTabIndex(a)}}getSlottedRadios(){return Array.from(this.el.querySelectorAll("wcs-radio"))}getSlottedRadiosNotDisabled(){return Array.from(this.getSlottedRadios().filter((o=>!o.disabled)))}handleRadioClick(o){this.value=o.detail.value;this.wcsChange.emit({value:o.detail.value})}async handleKeyDown(o){const a=this.getSlottedRadiosNotDisabled();const s=a.findIndex((a=>a===o.target));let i;if(r(o)||n(o)){o.preventDefault();i=s}else if(d(o)||c(o)){o.preventDefault();i=(s+1)%a.length}else if(p(o)||l(o)){o.preventDefault();i=(s-1+a.length)%a.length}else if(h(o)){return}const t=a[i];if(t){t.focus();if(this.value!==t.value){this.wcsChange.emit({value:t.value})}this.value=t.value}}render(){return s(i,{key:"7e9a6c9412d6ababef068d5766d79a790c3e531f",role:"radiogroup"},s("slot",{key:"6163831fbd131047a6f3556c76b1628f41453b6b",name:"option",onSlotchange:this.onSlotChange.bind(this)}))}get el(){return t(this)}static get watchers(){return{value:["onValueChangeHandler"],name:["updateAllRadioModeAndName"],mode:["updateAllRadioModeAndName"]}}};m.style=u;export{m as wcs_radio_group};
-//# sourceMappingURL=p-b96f4921.entry.js.map
+import{r as o,c as a,h as s,H as i,g as t}from"./p-32e583ea.js";import{s as e,c as r,d as n,u as d,v as c,w as p,x as l,n as h}from"./p-52d77e1f.js";const g=":host{display:flex;--wcs-radio-group-gap:var(--wcs-semantic-spacing-base);--wcs-radio-group-option-height:var(--wcs-semantic-size-m);--wcs-radio-group-option-gap:var(--wcs-semantic-spacing-small);--wcs-radio-group-option-padding:var(--wcs-semantic-spacing-small) var(--wcs-semantic-spacing-small);--wcs-radio-group-option-border-radius:var(--wcs-semantic-border-radius-base);--wcs-radio-group-option-background-color:var(--wcs-semantic-color-background-surface-accent-lightest)}:host([mode=radio]){flex-direction:column;gap:var(--wcs-radio-group-gap)}:host([mode=option]){box-sizing:border-box;height:var(--wcs-radio-group-option-height);display:inline-flex;flex-direction:row;align-items:center;gap:var(--wcs-radio-group-option-gap);padding:var(--wcs-radio-group-option-padding);background-color:var(--wcs-radio-group-option-background-color);border-radius:var(--wcs-radio-group-option-border-radius)}:host([mode=horizontal]){justify-content:space-between}";const u=g;const f=class{constructor(s){o(this,s);this.wcsChange=a(this,"wcsChange",7);this.value=undefined;this.name=undefined;this.mode="radio"}onValueChangeHandler(o){this.updateRadioTabIndex(o);this.updateAllRadioState()}async setAriaAttribute(o,a){e(this.el,o,a)}componentDidLoad(){this.onValueChangeHandler(this.value);this.updateAllRadioModeAndName()}onSlotChange(){this.updateRadioTabIndex(this.value);this.updateAllRadioModeAndName()}updateAllRadioState(){this.getSlottedRadios().forEach((o=>o.updateState()))}updateAllRadioModeAndName(){this.getSlottedRadios().forEach((o=>{o.mode=this.mode;o.name=this.name}))}updateRadioTabIndex(o){const a=this.getSlottedRadios();const s=a.find((o=>!o.disabled));const i=a.find((a=>a.value===o&&!a.disabled));if(!s&&!i){return}const t=i||s;for(const o of a){const a=o===t?0:-1;o.setTabIndex(a)}}getSlottedRadios(){return Array.from(this.el.querySelectorAll("wcs-radio"))}getSlottedRadiosNotDisabled(){return Array.from(this.getSlottedRadios().filter((o=>!o.disabled)))}handleRadioClick(o){this.value=o.detail.value;this.wcsChange.emit({value:o.detail.value})}async handleKeyDown(o){const a=this.getSlottedRadiosNotDisabled();const s=a.findIndex((a=>a===o.target));let i;if(r(o)||n(o)){o.preventDefault();i=s}else if(d(o)||c(o)){o.preventDefault();i=(s+1)%a.length}else if(p(o)||l(o)){o.preventDefault();i=(s-1+a.length)%a.length}else if(h(o)){return}const t=a[i];if(t){t.focus();if(this.value!==t.value){this.wcsChange.emit({value:t.value})}this.value=t.value}}render(){return s(i,{key:"3179704d2f1ed56f940941c1777b90a49ecd0ffa",role:"radiogroup"},s("slot",{key:"f01213b0c89bc04622601447005e24df07fea376",name:"option",onSlotchange:this.onSlotChange.bind(this)}))}get el(){return t(this)}static get watchers(){return{value:["onValueChangeHandler"],name:["updateAllRadioModeAndName"],mode:["updateAllRadioModeAndName"]}}};f.style=u;export{f as wcs_radio_group};
+//# sourceMappingURL=p-fdeae83e.entry.js.map

package/dist/wcs/wcs.esm.js

@@ -1,2 +1,2 @@
-import{p as e,b as t}from"./p-32e583ea.js";export{s as setNonce}from"./p-32e583ea.js";import{g as a}from"./p-e1255160.js";var n=()=>{const t=import.meta.url;const a={};if(t!==""){a.resourcesUrl=new URL(".",t).href}return e(a)};n().then((async e=>{await a();return t(JSON.parse('[["p-94aa269f",[[1,"wcs-editable-field",{"type":[1],"label":[1],"readonly":[516],"value":[1032],"validateFn":[16],"formatFn":[16],"errorMsg":[1,"error-msg"],"size":[513],"currentState":[32],"isError":[32]},[[8,"click","onWindowClickEvent"]],{"value":["onValueChange"]}]]],["p-e36b2ad1",[[1,"wcs-grid-pagination",{"availablePageSizes":[16],"currentPage":[1026,"current-page"],"pageSize":[2,"page-size"],"itemsCount":[2,"items-count"],"pageCount":[2,"page-count"],"setAriaAttribute":[64]}]]],["p-4dc52a25",[[1,"wcs-horizontal-stepper",{"currentStep":[1026,"current-step"],"steps":[16],"mode":[1],"checkOnComplete":[4,"check-on-complete"],"internalCurrentStepIndex":[32],"previous":[64],"next":[64]},null,{"currentStep":["onCurrentStepChange"]}]]],["p-16dd21cf",[[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]},null,{"maxItems":["handleCollapsePropsChange"],"itemsBeforeCollapse":["handleCollapsePropsChange"],"itemsAfterCollapse":["handleCollapsePropsChange"],"ariaLabelExpandButton":["handleAriaLabelExpandBtnChange"]}]]],["p-9dc3f9a5",[[17,"wcs-counter",{"size":[513],"label":[1],"disabled":[516],"min":[1026],"max":[1026],"step":[1026],"value":[1026],"displayedValue":[32],"setAriaAttribute":[64]},null,{"value":["valueChange"]}]]],["p-7d665a7e",[[1,"wcs-grid",{"serverMode":[4,"server-mode"],"data":[16],"loading":[4],"selectionConfig":[1,"selection-config"],"selectedItems":[8,"selected-items"],"wcsGridPaginationId":[1,"wcs-grid-pagination-id"],"rowIdPath":[1,"row-id-path"],"rowCssPartsFn":[16],"columns":[32],"paginationEl":[32],"rows":[32],"cursorPosition":[32],"setAriaAttribute":[64]},[[0,"focus","onFocus"],[0,"blur","onBlur"],[0,"wcsHiddenChange","onHiddenColumnChange"],[0,"keydown","onKeyDown"],[1,"mousedown","onClick"],[0,"wcsSortChange","sortChangeEventHandler"],[0,"wcsGridPaginationChange","paginationChangeEventHandler"],[8,"wcsGridPaginationChange","paginationChangeEventHandlerOutside"]],{"cursorPosition":["onCursorPositionChange"],"data":["onDataChange"],"selectedItems":["onSelectedItemsPropertyChange"]}]]],["p-f87636f6",[[4,"wcs-modal",{"withoutBackdrop":[516,"without-backdrop"],"show":[1540],"showCloseButton":[516,"show-close-button"],"closeButtonAriaLabel":[1,"close-button-aria-label"],"size":[1],"hideActions":[516,"hide-actions"],"modalTriggerControlsId":[1,"modal-trigger-controls-id"],"initialFocusElementId":[1,"initial-focus-element-id"],"disableAutoFocus":[4,"disable-auto-focus"],"setAriaAttribute":[64]},[[4,"keydown","onKeyDown"]],{"show":["onShowChange"]}]]],["p-5de993d7",[[17,"wcs-dropdown",{"noArrow":[4,"no-arrow"],"mode":[1],"shape":[1],"size":[1],"disabled":[516],"placement":[1],"expanded":[32],"setAriaAttribute":[64]},[[0,"blur","onBlur"],[8,"click","onWindowClickEvent"],[0,"wcsDropdownItemClick","dropdownItemClick"],[0,"keydown","onKeyDown"]],{"placement":["placementChange"]}]]],["p-dddcd685",[[1,"wcs-galactic-menu",{"text":[1],"showPopoverMenu":[32],"setAriaAttribute":[64]},[[8,"click","onWindowClickEvent"],[0,"keydown","onKeyDown"]]]]],["p-5974be61",[[17,"wcs-input",{"fireFocusEvents":[4,"fire-focus-events"],"accept":[1],"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"autofocus":[4],"debounce":[2],"prefixLabel":[1,"prefix-label"],"suffixLabel":[1,"suffix-label"],"disabled":[516],"enterkeyhint":[1],"size":[513],"icon":[1],"inputmode":[1],"max":[1],"maxlength":[2],"min":[1],"minlength":[2],"multiple":[4],"name":[1],"hidePasswordButtonAriaLabel":[1,"hide-password-button-aria-label"],"showPasswordButtonAriaLabel":[1,"show-password-button-aria-label"],"pattern":[1],"placeholder":[1],"readonly":[516],"required":[4],"spellcheck":[4],"state":[513],"step":[1],"type":[1],"value":[1032],"passwordReveal":[32],"setBlur":[64],"getInputElement":[64],"setAriaAttribute":[64]},null,{"debounce":["debounceChanged"],"passwordReveal":["onPasswordRevealChange"]}]]],["p-206c01d5",[[17,"wcs-textarea",{"fireFocusEvents":[4,"fire-focus-events"],"autocapitalize":[1],"autofocus":[4],"debounce":[2],"disabled":[516],"icon":[1],"inputmode":[1],"enterkeyhint":[1],"maxlength":[2],"minlength":[2],"name":[1],"placeholder":[1],"readonly":[516],"required":[4],"spellcheck":[4],"state":[513],"cols":[2],"rows":[2],"wrap":[1],"autoGrow":[4,"auto-grow"],"value":[1025],"resize":[513],"setAriaAttribute":[64],"fitContent":[64],"setBlur":[64],"getInputElement":[64]},null,{"debounce":["debounceChanged"],"value":["valueChanged"]}]]],["p-02f31010",[[1,"wcs-accordion",{"hideActionText":[516,"hide-action-text"],"highlight":[516],"groupContentWithHeader":[516,"group-content-with-header"]},[[0,"wcsOpenChange","wcsOpenChangeHandler"]],{"hideActionText":["updateHideActiontextOnPanel"],"highlight":["updateHighlightOnPanel"],"groupContentWithHeader":["updateGroupContentWithHeader"]}]]],["p-61592f91",[[1,"wcs-accordion-content"]]],["p-439804b0",[[1,"wcs-accordion-header"]]],["p-76c92e22",[[1,"wcs-accordion-panel",{"open":[1540],"hideActionText":[516,"hide-action-text"],"highlight":[516],"groupContentWithHeader":[516,"group-content-with-header"],"setAriaAttribute":[64],"close":[64]},null,{"open":["openChange"]}]]],["p-4661290b",[[1,"wcs-action-bar",{"gutter":[516],"hasTabs":[32]}]]],["p-e5c057c4",[[1,"wcs-app"]]],["p-1438530e",[[1,"wcs-badge",{"shape":[1],"color":[1],"size":[513]}]]],["p-ca8f3677",[[1,"wcs-breadcrumb-item",{"last":[4]}]]],["p-96195d9a",[[1,"wcs-card",{"mode":[1537]}]]],["p-ab49926d",[[1,"wcs-card-body"]]],["p-9554196c",[[1,"wcs-com-nav",{"appName":[1,"app-name"],"mobileMenuOpen":[32],"currentActiveSizing":[32],"setAriaAttribute":[64]},[[0,"wcsClickOnFinalAction","onClickOnFinalAction"],[8,"keydown","exitMobileMenuOnKeyDown"]]]]],["p-6b06d2e7",[[1,"wcs-com-nav-category",{"label":[1],"categoryOpen":[32],"currentActiveSizing":[32],"setAriaAttribute":[64],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsCategoryOpened","onSubmenuOpened"]]]]],["p-da4636fa",[[1,"wcs-com-nav-item",null,[[0,"click","onClick"]]]]],["p-294732f7",[[1,"wcs-com-nav-submenu",{"label":[1],"panelTitle":[1,"panel-title"],"panelDescription":[1,"panel-description"],"menuOpen":[32],"currentActiveSizing":[32],"setAriaAttribute":[64],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsSubmenuOpened","onSubmenuOpened"],[8,"keydown","onEscapeKeyDown"],[0,"wcsClickOnFinalAction","wcsCategoryItemClickedHandler"]]]]],["p-d443d419",[[1,"wcs-divider"]]],["p-550012c2",[[1,"wcs-dropdown-divider"]]],["p-3cfa1c4b",[[1,"wcs-dropdown-header"]]],["p-13e50077",[[4,"wcs-dropdown-item",null,[[1,"mouseup","onMouseUp"],[0,"keydown","onKeyDown"]]]]],["p-a7891233",[[1,"wcs-field"]]],["p-71db0ed5",[[1,"wcs-field-content"]]],["p-9eb66fa9",[[1,"wcs-field-label"]]],["p-50523b53",[[1,"wcs-footer"]]],["p-9c012aae",[[1,"wcs-galactic",{"text":[1],"show":[32]}]]],["p-96bff8fe",[[1,"wcs-grid-column",{"path":[1],"name":[1],"sort":[4],"sortFn":[16],"formatter":[16],"sortOrder":[1025,"sort-order"],"width":[1],"customCells":[4,"custom-cells"],"hidden":[516],"cursorPosition":[16],"columnPosition":[2,"column-position"],"setAriaAttribute":[64]},null,{"hidden":["parseMyObjectProp"],"sortOrder":["sortOrderChange"]}]]],["p-c752b85a",[[1,"wcs-grid-custom-cell",{"columnId":[1,"column-id"],"rowId":[8,"row-id"]}]]],["p-388e6d75",[[1,"wcs-header",{"setAriaAttribute":[64]}]]],["p-619e1110",[[1,"wcs-hint",{"small":[1540]}]]],["p-b2080509",[[0,"wcs-icon",{"icon":[1],"size":[1],"setAriaAttribute":[64]}]]],["p-d9525519",[[1,"wcs-list-item",{"activated":[1540]}]]],["p-5d5f50ed",[[1,"wcs-list-item-properties"]]],["p-37800935",[[1,"wcs-list-item-property"]]],["p-43d70995",[[1,"wcs-native-select",{"size":[513],"required":[4],"expanded":[32],"disabled":[32],"setAriaAttribute":[64],"updateStyles":[64]},null,{"required":["requiredChanged"]}]]],["p-258855a1",[[1,"wcs-nav",{"setAriaAttribute":[64]}]]],["p-6f5d570a",[[4,"wcs-nav-item",null,[[0,"keydown","onKeyDown"]]]]],["p-29f5b974",[[1,"wcs-progress-radial",{"size":[2],"showLabel":[4,"show-label"],"value":[2],"setAriaAttribute":[64]}]]],["p-796e690d",[[17,"wcs-radio",{"value":[1544],"label":[1537],"disabled":[1540],"name":[1025],"mode":[513],"checked":[32],"radioTabIndex":[32],"updateState":[64],"setTabIndex":[64],"setAriaAttribute":[64]}]]],["p-b96f4921",[[1,"wcs-radio-group",{"value":[1032],"name":[520],"mode":[513],"setAriaAttribute":[64]},[[0,"wcsRadioClick","handleRadioClick"],[0,"keydown","handleKeyDown"]],{"value":["onValueChangeHandler"],"name":["updateAllRadioModeAndName"],"mode":["updateAllRadioModeAndName"]}]]],["p-0ffdfc10",[[1,"wcs-skeleton-circle",{"animation":[513],"radius":[514]}]]],["p-694724a2",[[1,"wcs-skeleton-rectangle",{"animation":[513],"rounded":[516],"height":[513],"width":[513]}]]],["p-d895ffb4",[[1,"wcs-skeleton-text",{"animation":[513],"height":[1]}]]],["p-dd60a6db",[[17,"wcs-switch",{"name":[1],"checked":[516],"labelAlignment":[513,"label-alignment"],"disabled":[516],"setAriaAttribute":[64],"getLabel":[64]},[[0,"click","handleHostClick"]]]]],["p-fc115de4",[[1,"wcs-tab",{"header":[513],"itemKey":[8,"item-key"]}]]],["p-2adf00be",[[1,"wcs-tabs",{"align":[513],"selectedIndex":[2,"selected-index"],"selectedKey":[8,"selected-key"],"headersOnly":[4,"headers-only"],"gutter":[516],"description":[1],"headers":[32],"currentActiveTabIndex":[32],"setAriaAttribute":[64]},[[0,"tabLoaded","onTabLoaded"]],{"selectedIndex":["selectedIndexChanged"],"selectedKey":["selectedTabkeyChanged"]}]]],["p-5bf73e05",[[1,"wcs-tooltip",{"for":[1],"position":[513],"interactive":[4],"maxWidth":[8,"max-width"],"delay":[2],"duration":[2],"trigger":[1],"theme":[1],"content":[1],"appendTo":[1,"append-to"],"hide":[64],"show":[64],"disable":[64],"enable":[64]},[[8,"keydown","handleKeyDown"]],{"interactive":["updateProps"],"position":["updateProps"],"maxWidth":["updateProps"],"theme":["updateProps"],"delay":["updateProps"],"duration":["updateProps"],"trigger":["updateProps"],"content":["updateTippyContent"]}]]],["p-13090618",[[1,"wcs-progress-bar",{"size":[1],"showLabel":[4,"show-label"],"value":[2],"setAriaAttribute":[64]}]]],["p-21b964cd",[[4,"wcs-select-option",{"disabled":[1540],"selected":[1540],"highlighted":[1540],"value":[8],"chipColor":[1,"chip-color"],"chipBackgroundColor":[1,"chip-background-color"],"multiple":[1540]},[[1,"mouseup","onMouseUp"],[0,"keydown","handleKeydown"]]],[1,"wcs-select",{"size":[513],"value":[1032],"placeholder":[1537],"disabled":[1540],"required":[4],"multiple":[516],"autocomplete":[516],"serverMode":[516,"server-mode"],"filterFn":[16],"chips":[516],"name":[1],"compareWith":[16],"expanded":[32],"displayText":[32],"focused":[32],"showNoResultFoundLabel":[32],"autocompleteValue":[32],"overlayDirection":[32],"open":[64],"close":[64],"setAriaAttribute":[64]},[[1,"mouseup","onMouseUp"],[8,"click","onWindowClickEvent"],[0,"keydown","onKeyDown"],[0,"wcsSelectOptionClick","selectedOptionChanged"],[0,"focus","onFocus"],[2,"blur","onBlur"]],{"value":["onValueChangeHandler"]}]]],["p-21d2f06f",[[1,"wcs-error"],[1,"wcs-form-field",{"isError":[1540,"is-error"],"hasPrefix":[32],"hasSuffix":[32],"spiedElement":[32]},null,{"isError":["isErrorChange"]}],[1,"wcs-label",{"required":[516],"setAriaAttribute":[64]}]]],["p-9243a323",[[17,"wcs-checkbox",{"name":[1],"indeterminate":[1540],"checked":[1540],"labelAlignment":[1537,"label-alignment"],"disabled":[516],"setAriaAttribute":[64],"getLabel":[64]},[[0,"click","handleHostClick"]]]]],["p-9ad23e83",[[1,"wcs-mat-icon",{"icon":[1],"size":[1],"family":[1],"setAriaAttribute":[64]}]]],["p-c2d35aa6",[[17,"wcs-button",{"type":[1025],"href":[1],"target":[1],"disabled":[516],"ripple":[4],"size":[513],"shape":[513],"mode":[513],"loading":[1540],"setAriaAttribute":[64]},[[0,"click","onClick"]],{"ripple":["onRippleChange"]}],[1,"wcs-spinner",{"mode":[513]}]]]]'),e)}));
+import{p as e,b as t}from"./p-32e583ea.js";export{s as setNonce}from"./p-32e583ea.js";import{g as a}from"./p-e1255160.js";var o=()=>{const t=import.meta.url;const a={};if(t!==""){a.resourcesUrl=new URL(".",t).href}return e(a)};o().then((async e=>{await a();return t(JSON.parse('[["p-a0f6ef30",[[1,"wcs-editable-field",{"type":[1],"label":[1],"readonly":[516],"value":[1032],"validateFn":[16],"formatFn":[16],"errorMsg":[1,"error-msg"],"size":[513],"currentState":[32],"isError":[32]},[[8,"click","onWindowClickEvent"]],{"value":["onValueChange"]}]]],["p-0b8157e7",[[1,"wcs-grid-pagination",{"availablePageSizes":[16],"currentPage":[1026,"current-page"],"pageSize":[2,"page-size"],"itemsCount":[2,"items-count"],"pageCount":[2,"page-count"],"setAriaAttribute":[64]}]]],["p-dfb52a1c",[[1,"wcs-alert-drawer",{"position":[513],"timeout":[2],"showProgressBar":[4,"show-progress-bar"],"show":[64]}]]],["p-1fbe0328",[[1,"wcs-horizontal-stepper",{"currentStep":[1026,"current-step"],"steps":[16],"mode":[1],"checkOnComplete":[516,"check-on-complete"],"internalCurrentStepIndex":[32],"previous":[64],"next":[64]},null,{"currentStep":["onCurrentStepChange"]}]]],["p-8e9bd0f1",[[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]},null,{"maxItems":["handleCollapsePropsChange"],"itemsBeforeCollapse":["handleCollapsePropsChange"],"itemsAfterCollapse":["handleCollapsePropsChange"],"ariaLabelExpandButton":["handleAriaLabelExpandBtnChange"]}]]],["p-1ba616c2",[[17,"wcs-counter",{"size":[513],"label":[1],"disabled":[516],"min":[1026],"max":[1026],"step":[1026],"value":[1026],"displayedValue":[32],"setAriaAttribute":[64]},null,{"value":["valueChange"]}]]],["p-a956dc84",[[1,"wcs-grid",{"serverMode":[516,"server-mode"],"data":[16],"loading":[516],"selectionConfig":[1,"selection-config"],"selectedItems":[8,"selected-items"],"wcsGridPaginationId":[1,"wcs-grid-pagination-id"],"rowIdPath":[1,"row-id-path"],"rowCssPartsFn":[16],"columns":[32],"paginationEl":[32],"rows":[32],"cursorPosition":[32],"focusFirstCell":[64],"setAriaAttribute":[64]},[[0,"focus","onFocus"],[0,"blur","onBlur"],[0,"wcsHiddenChange","onHiddenColumnChange"],[0,"keydown","onKeyDown"],[1,"mousedown","onClick"],[0,"wcsSortChange","sortChangeEventHandler"],[0,"wcsGridPaginationChange","paginationChangeEventHandler"],[8,"wcsGridPaginationChange","paginationChangeEventHandlerOutside"]],{"cursorPosition":["onCursorPositionChange"],"data":["onDataChange"],"selectedItems":["onSelectedItemsPropertyChange"]}]]],["p-0dd07842",[[4,"wcs-modal",{"withoutBackdrop":[516,"without-backdrop"],"show":[1540],"showCloseButton":[516,"show-close-button"],"closeButtonAriaLabel":[1,"close-button-aria-label"],"size":[1],"hideActions":[516,"hide-actions"],"modalTriggerControlsId":[1,"modal-trigger-controls-id"],"initialFocusElementId":[1,"initial-focus-element-id"],"disableAutoFocus":[516,"disable-auto-focus"],"setAriaAttribute":[64]},[[4,"keydown","onKeyDown"]],{"show":["onShowChange"]}]]],["p-8c2605fd",[[17,"wcs-dropdown",{"noArrow":[516,"no-arrow"],"mode":[1],"shape":[1],"size":[1],"disabled":[516],"placement":[1],"expanded":[32],"setAriaAttribute":[64]},[[0,"blur","onBlur"],[8,"click","onWindowClickEvent"],[0,"wcsDropdownItemClick","dropdownItemClick"],[0,"keydown","onKeyDown"]],{"placement":["placementChange"]}]]],["p-622f7403",[[1,"wcs-galactic-menu",{"text":[1],"showPopoverMenu":[32],"setAriaAttribute":[64]},[[8,"click","onWindowClickEvent"],[0,"keydown","onKeyDown"]]]]],["p-5da0534f",[[17,"wcs-input",{"fireFocusEvents":[4,"fire-focus-events"],"accept":[1],"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"autofocus":[4],"debounce":[2],"prefixLabel":[1,"prefix-label"],"suffixLabel":[1,"suffix-label"],"disabled":[516],"enterkeyhint":[1],"size":[513],"icon":[1],"inputmode":[1],"max":[1],"maxlength":[2],"min":[1],"minlength":[2],"multiple":[516],"name":[1],"hidePasswordButtonAriaLabel":[1,"hide-password-button-aria-label"],"showPasswordButtonAriaLabel":[1,"show-password-button-aria-label"],"pattern":[1],"placeholder":[1],"readonly":[516],"required":[516],"spellcheck":[4],"state":[513],"step":[1],"type":[1],"value":[1032],"passwordReveal":[32],"setBlur":[64],"getInputElement":[64],"setAriaAttribute":[64]},null,{"debounce":["debounceChanged"],"passwordReveal":["onPasswordRevealChange"]}]]],["p-c261eaf9",[[17,"wcs-textarea",{"fireFocusEvents":[4,"fire-focus-events"],"autocapitalize":[1],"autofocus":[4],"debounce":[2],"disabled":[516],"icon":[1],"inputmode":[1],"enterkeyhint":[1],"maxlength":[2],"minlength":[2],"name":[1],"placeholder":[1],"readonly":[516],"required":[516],"spellcheck":[4],"state":[513],"cols":[2],"rows":[2],"wrap":[1],"autoGrow":[516,"auto-grow"],"value":[1025],"resize":[513],"setAriaAttribute":[64],"fitContent":[64],"setBlur":[64],"getInputElement":[64]},null,{"debounce":["debounceChanged"],"value":["valueChanged"]}]]],["p-02f31010",[[1,"wcs-accordion",{"hideActionText":[516,"hide-action-text"],"highlight":[516],"groupContentWithHeader":[516,"group-content-with-header"]},[[0,"wcsOpenChange","wcsOpenChangeHandler"]],{"hideActionText":["updateHideActiontextOnPanel"],"highlight":["updateHighlightOnPanel"],"groupContentWithHeader":["updateGroupContentWithHeader"]}]]],["p-61592f91",[[1,"wcs-accordion-content"]]],["p-439804b0",[[1,"wcs-accordion-header"]]],["p-6c6079ee",[[1,"wcs-accordion-panel",{"open":[1540],"hideActionText":[516,"hide-action-text"],"highlight":[516],"groupContentWithHeader":[516,"group-content-with-header"],"setAriaAttribute":[64],"close":[64]},null,{"open":["openChange"]}]]],["p-496115a5",[[1,"wcs-action-bar",{"gutter":[516],"hasTabs":[32]}]]],["p-781a956e",[[1,"wcs-app"]]],["p-41b946b2",[[1,"wcs-badge",{"shape":[1],"color":[1],"size":[513]}]]],["p-53a395a9",[[1,"wcs-breadcrumb-item",{"last":[4]}]]],["p-637ec45a",[[1,"wcs-card",{"mode":[1537],"orientation":[513]},null,{"orientation":["orientationChanged"]}]]],["p-5607246c",[[1,"wcs-card-body",{"orientation":[32],"setOrientation":[64]}]]],["p-98a8b806",[[1,"wcs-card-content"]]],["p-6aededc6",[[1,"wcs-card-footer"]]],["p-f929b66f",[[1,"wcs-card-header"]]],["p-cbbca016",[[1,"wcs-card-media",{"orientation":[32],"setOrientation":[64]}]]],["p-1244daa0",[[1,"wcs-com-nav",{"appName":[1,"app-name"],"mobileMenuOpen":[32],"currentActiveSizing":[32],"setAriaAttribute":[64]},[[0,"wcsClickOnFinalAction","onClickOnFinalAction"],[8,"keydown","exitMobileMenuOnKeyDown"]]]]],["p-ad286030",[[1,"wcs-com-nav-category",{"label":[1],"categoryOpen":[32],"currentActiveSizing":[32],"setAriaAttribute":[64],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsCategoryOpened","onSubmenuOpened"]]]]],["p-fd187bce",[[1,"wcs-com-nav-item",null,[[0,"click","onClick"]]]]],["p-850fa9c9",[[1,"wcs-com-nav-submenu",{"label":[1],"panelTitle":[1,"panel-title"],"panelDescription":[1,"panel-description"],"menuOpen":[32],"currentActiveSizing":[32],"setAriaAttribute":[64],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsSubmenuOpened","onSubmenuOpened"],[8,"keydown","onEscapeKeyDown"],[0,"wcsClickOnFinalAction","wcsCategoryItemClickedHandler"]]]]],["p-c7812760",[[1,"wcs-divider"]]],["p-7de847e0",[[1,"wcs-dropdown-divider"]]],["p-367946fe",[[1,"wcs-dropdown-header"]]],["p-cad10435",[[4,"wcs-dropdown-item",null,[[1,"mouseup","onMouseUp"],[0,"keydown","onKeyDown"]]]]],["p-3a18535f",[[1,"wcs-field"]]],["p-e26c19e5",[[1,"wcs-field-content"]]],["p-c211a5d1",[[1,"wcs-field-label"]]],["p-0758d22e",[[1,"wcs-footer"]]],["p-0424e545",[[1,"wcs-galactic",{"text":[1],"show":[32]}]]],["p-18fa39f4",[[1,"wcs-grid-column",{"path":[1],"name":[1],"sort":[516],"sortFn":[16],"formatter":[16],"sortOrder":[1025,"sort-order"],"width":[1],"customCells":[516,"custom-cells"],"hidden":[516],"cursorPosition":[16],"columnPosition":[2,"column-position"],"setAriaAttribute":[64]},null,{"hidden":["parseMyObjectProp"],"sortOrder":["sortOrderChange"]}]]],["p-3823f54e",[[1,"wcs-grid-custom-cell",{"columnId":[1,"column-id"],"rowId":[8,"row-id"]}]]],["p-1e7ea63c",[[1,"wcs-header",{"setAriaAttribute":[64]}]]],["p-cbda74f6",[[1,"wcs-hint",{"small":[1540]}]]],["p-580b3142",[[0,"wcs-icon",{"icon":[1],"size":[1],"setAriaAttribute":[64]}]]],["p-e56b9ce2",[[1,"wcs-list-item",{"activated":[1540]}]]],["p-aadf37e7",[[1,"wcs-list-item-properties"]]],["p-27b438c0",[[1,"wcs-list-item-property"]]],["p-5e8fff73",[[1,"wcs-native-select",{"size":[513],"required":[516],"expanded":[32],"disabled":[32],"setAriaAttribute":[64],"updateStyles":[64]},null,{"required":["requiredChanged"]}]]],["p-9c73744c",[[1,"wcs-nav",{"setAriaAttribute":[64]}]]],["p-dff8641e",[[4,"wcs-nav-item",null,[[0,"keydown","onKeyDown"]]]]],["p-bc009574",[[1,"wcs-progress-radial",{"size":[2],"showLabel":[516,"show-label"],"value":[2],"setAriaAttribute":[64]}]]],["p-86ec9ead",[[17,"wcs-radio",{"value":[1544],"label":[1537],"disabled":[1540],"name":[1025],"mode":[513],"checked":[32],"radioTabIndex":[32],"updateState":[64],"setTabIndex":[64],"setAriaAttribute":[64]}]]],["p-fdeae83e",[[1,"wcs-radio-group",{"value":[1032],"name":[520],"mode":[513],"setAriaAttribute":[64]},[[0,"wcsRadioClick","handleRadioClick"],[0,"keydown","handleKeyDown"]],{"value":["onValueChangeHandler"],"name":["updateAllRadioModeAndName"],"mode":["updateAllRadioModeAndName"]}]]],["p-352e1f99",[[1,"wcs-skeleton-circle",{"animation":[513],"radius":[514]}]]],["p-c84ae00d",[[1,"wcs-skeleton-rectangle",{"animation":[513],"rounded":[516],"height":[513],"width":[513]}]]],["p-5202b323",[[1,"wcs-skeleton-text",{"animation":[513],"height":[1]}]]],["p-b0a6eec6",[[17,"wcs-switch",{"name":[1],"checked":[516],"labelAlignment":[513,"label-alignment"],"disabled":[516],"setAriaAttribute":[64],"getLabel":[64]},[[0,"click","handleHostClick"]]]]],["p-ad5192cd",[[1,"wcs-tab",{"header":[513],"itemKey":[8,"item-key"]}]]],["p-1f593d06",[[1,"wcs-tabs",{"align":[513],"selectedIndex":[2,"selected-index"],"selectedKey":[8,"selected-key"],"headersOnly":[516,"headers-only"],"gutter":[516],"description":[1],"mobileOverlayExpanded":[32],"mobile":[32],"headers":[32],"currentActiveTabIndex":[32],"setAriaAttribute":[64]},[[0,"tabLoaded","onTabLoaded"],[8,"click","onWindowClickEvent"]],{"selectedIndex":["selectedIndexChanged"],"selectedKey":["selectedTabkeyChanged"],"mobile":["onMobileChange"]}]]],["p-a94e685c",[[1,"wcs-tooltip",{"for":[1],"position":[513],"interactive":[516],"maxWidth":[8,"max-width"],"delay":[2],"duration":[2],"trigger":[1],"theme":[1],"content":[1],"appendTo":[1,"append-to"],"hide":[64],"show":[64],"disable":[64],"enable":[64]},[[8,"keydown","handleKeyDown"]],{"interactive":["updateProps"],"position":["updateProps"],"maxWidth":["updateProps"],"theme":["updateProps"],"delay":["updateProps"],"duration":["updateProps"],"trigger":["updateProps"],"content":["updateTippyContent"]}]]],["p-8152d360",[[1,"wcs-alert",{"show":[1540],"intent":[513],"timeout":[2],"showProgressBar":[4,"show-progress-bar"]},[[1,"mouseover","mouseOverHandler"],[1,"mouseout","mouseOutHandler"]]]]],["p-9fd3366c",[[1,"wcs-progress-bar",{"size":[1],"showLabel":[516,"show-label"],"value":[2],"setAriaAttribute":[64]}]]],["p-d27d4a53",[[4,"wcs-select-option",{"disabled":[1540],"selected":[1540],"highlighted":[1540],"value":[8],"chipColor":[1,"chip-color"],"chipBackgroundColor":[1,"chip-background-color"],"multiple":[1540]},[[1,"mouseup","onMouseUp"],[0,"keydown","handleKeydown"]]],[1,"wcs-select",{"size":[513],"value":[1032],"placeholder":[1537],"disabled":[1540],"required":[516],"multiple":[516],"autocomplete":[516],"serverMode":[516,"server-mode"],"filterFn":[16],"chips":[516],"name":[1],"compareWith":[16],"expanded":[32],"displayText":[32],"focused":[32],"showNoResultFoundLabel":[32],"autocompleteValue":[32],"overlayDirection":[32],"open":[64],"close":[64],"setAriaAttribute":[64]},[[1,"mouseup","onMouseUp"],[8,"click","onWindowClickEvent"],[0,"keydown","onKeyDown"],[0,"wcsSelectOptionClick","selectedOptionChanged"],[0,"focus","onFocus"],[2,"blur","onBlur"]],{"value":["onValueChangeHandler"]}]]],["p-ec383729",[[1,"wcs-error"],[1,"wcs-form-field",{"isError":[1540,"is-error"],"hasPrefix":[32],"hasSuffix":[32],"spiedElement":[32]},null,{"isError":["isErrorChange"]}],[1,"wcs-label",{"required":[516],"setAriaAttribute":[64]}]]],["p-4fb2d985",[[17,"wcs-checkbox",{"name":[1],"indeterminate":[1540],"checked":[1540],"labelAlignment":[1537,"label-alignment"],"disabled":[516],"setAriaAttribute":[64],"getLabel":[64]},[[0,"click","handleHostClick"]]]]],["p-b28b2fba",[[1,"wcs-mat-icon",{"icon":[1],"size":[1],"family":[1],"setAriaAttribute":[64]}]]],["p-204f2722",[[17,"wcs-button",{"type":[1025],"href":[1],"target":[1],"disabled":[516],"ripple":[4],"size":[513],"shape":[513],"mode":[513],"loading":[1540],"setAriaAttribute":[64]},[[0,"click","onClick"]],{"ripple":["onRippleChange"]}],[1,"wcs-spinner",{"mode":[513]}]]]]'),e)}));
 //# sourceMappingURL=wcs.esm.js.map

package/dist/wcs/wcs.esm.js.map

@@ -1 +1 @@
-{"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","async","options","globalScripts","bootstrapLazy","JSON","parse"],"sources":["node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.17.2 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, doc, H, promiseResolve } from \"@stencil/core\";\nvar patchBrowser = () => {\n  if (BUILD.isDev && !BUILD.isTesting) {\n    consoleDevInfo(\"Running in development mode.\");\n  }\n  if (BUILD.cloneNodeFix) {\n    patchCloneNodeFix(H.prototype);\n  }\n  const scriptElm = BUILD.scriptDataOpts ? Array.from(doc.querySelectorAll(\"script\")).find(\n    (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n  ) : null;\n  const importMeta = import.meta.url;\n  const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n  if (importMeta !== \"\") {\n    opts.resourcesUrl = new URL(\".\", importMeta).href;\n  }\n  return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n  const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n  HTMLElementPrototype.cloneNode = function(deep) {\n    if (this.nodeName === \"TEMPLATE\") {\n      return nativeCloneNodeFn.call(this, deep);\n    }\n    const clonedNode = nativeCloneNodeFn.call(this, false);\n    const srcChildNodes = this.childNodes;\n    if (deep) {\n      for (let i = 0; i < srcChildNodes.length; i++) {\n        if (srcChildNodes[i].nodeType !== 2) {\n          clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n        }\n      }\n    }\n    return clonedNode;\n  };\n};\nexport {\n  patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"0HAOA,IAAIA,EAAe,KAUjB,MAAMC,cAAyBC,IAC/B,MAAMC,EAAqE,GAC3E,GAAIF,IAAe,GAAI,CACrBE,EAAKC,aAAe,IAAIC,IAAI,IAAKJ,GAAYK,IACjD,CACE,OAAOC,EAAeJ,EAAK,EClB7BH,IAAeQ,MAAKC,MAAOC,UACnBC,IACN,OAAOC,EAAcC,KAAAC,MAAA,+mXAAuCJ,EAAA"}
+{"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","async","options","globalScripts","bootstrapLazy","JSON","parse"],"sources":["node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.17.2 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, doc, H, promiseResolve } from \"@stencil/core\";\nvar patchBrowser = () => {\n  if (BUILD.isDev && !BUILD.isTesting) {\n    consoleDevInfo(\"Running in development mode.\");\n  }\n  if (BUILD.cloneNodeFix) {\n    patchCloneNodeFix(H.prototype);\n  }\n  const scriptElm = BUILD.scriptDataOpts ? Array.from(doc.querySelectorAll(\"script\")).find(\n    (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n  ) : null;\n  const importMeta = import.meta.url;\n  const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n  if (importMeta !== \"\") {\n    opts.resourcesUrl = new URL(\".\", importMeta).href;\n  }\n  return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n  const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n  HTMLElementPrototype.cloneNode = function(deep) {\n    if (this.nodeName === \"TEMPLATE\") {\n      return nativeCloneNodeFn.call(this, deep);\n    }\n    const clonedNode = nativeCloneNodeFn.call(this, false);\n    const srcChildNodes = this.childNodes;\n    if (deep) {\n      for (let i = 0; i < srcChildNodes.length; i++) {\n        if (srcChildNodes[i].nodeType !== 2) {\n          clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n        }\n      }\n    }\n    return clonedNode;\n  };\n};\nexport {\n  patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"0HAOA,IAAIA,EAAe,KAUjB,MAAMC,cAAyBC,IAC/B,MAAMC,EAAqE,GAC3E,GAAIF,IAAe,GAAI,CACrBE,EAAKC,aAAe,IAAIC,IAAI,IAAKJ,GAAYK,IACjD,CACE,OAAOC,EAAeJ,EAAK,EClB7BH,IAAeQ,MAAKC,MAAOC,UACnBC,IACN,OAAOC,EAAcC,KAAAC,MAAA,83YAAuCJ,EAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "wcs-core",
-    "version": "7.1.0",
+    "version": "7.2.0",
     "description": "Web Components SNCF",
     "main": "dist/index.cjs.js",
     "module": "dist/index.js",
@@ -20,6 +20,7 @@
         "generate-custom-element-manifest": "cd src && custom-elements-manifest analyze --stencil --outdir ../",
         "generate-docs-json": "stencil build --docs-json ./stories/documentation/generated/docs.json",
         "build": "npm run generate-design-tokens && stencil build && npm run generate-custom-element-manifest && npm run build-storybook",
+        "json-to-dtf": "node design-tokens/json-to-dtf/index.mjs",
         "generate-design-tokens": "node design-tokens/index.mjs ",
         "watch:stencil": "stencil build --dev --watch",
         "start": "npm run generate-design-tokens && concurrently --names \"Stencil,Storybook\" -c \"bgBlue.bold,bgMagenta.bold\" \"stencil build --dev --watch\" \"npm run storybook\"",
@@ -68,6 +69,7 @@
         "jest": "^29.7.0",
         "jest-cli": "^29.7.0",
         "lit-html": "^2.6.1",
+        "mdx-mermaid": "^2.0.3",
         "puppeteer": "21.11.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -75,7 +77,8 @@
         "tslib": "2.5.0",
         "typescript": "4.9.5",
         "webpack-watch-files-plugin": "^1.2.0",
-        "style-dictionary": "^4.0.1"
+        "style-dictionary": "^4.0.1",
+        "@tokens-studio/sd-transforms": "^1.3.0"
     },
     "dependencies": {
         "@popperjs/core": "^2.9.3",

package/dist/cjs/button-interface-629f3563.js

@@ -1,12 +0,0 @@
-'use strict';
-
-const WcsButtonSizeValues = ['s', 'm', 'l']; // as const keyword is used to infer and preserve the exact literal values of an array or object.
-function isWcsButtonSize(size) {
-    // @ts-ignore : ignore size type, as it is checked with WcsButtonSizeValues
-    return WcsButtonSizeValues.includes(size);
-}
-
-exports.WcsButtonSizeValues = WcsButtonSizeValues;
-exports.isWcsButtonSize = isWcsButtonSize;
-
-//# sourceMappingURL=button-interface-629f3563.js.map

package/dist/cjs/button-interface-629f3563.js.map

@@ -1 +0,0 @@
-{"file":"button-interface-629f3563.js","mappings":";;MAQa,mBAAmB,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAW;SAI5C,eAAe,CAAC,IAAY;;IAExC,OAAO,mBAAmB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;AAC9C;;;;;","names":[],"sources":["src/components/button/button-interface.ts"],"sourcesContent":["import { WcsSize } from '../../shared-types';\n\nexport type WcsButtonType = 'button' | 'submit';\n\nexport type WcsButtonShape = 'normal' | 'round' | 'square';\n\nexport type WcsButtonMode = 'plain' | 'stroked' | 'clear';\n\nexport const WcsButtonSizeValues = ['s', 'm', 'l'] as const; // as const keyword is used to infer and preserve the exact literal values of an array or object.\n\nexport type WcsButtonSize = Extract<WcsSize, typeof WcsButtonSizeValues[number]>;\n\nexport function isWcsButtonSize(size: string): size is WcsButtonSize {\n    // @ts-ignore : ignore size type, as it is checked with WcsButtonSizeValues\n    return WcsButtonSizeValues.includes(size);\n}\n"],"version":3}

package/dist/cjs/grid-pagination-e4f29c78.js.map

@@ -1 +0,0 @@
-{"file":"grid-pagination-e4f29c78.js","mappings":"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","names":["h","inheritAriaAttributes","inheritAttributes","setOrRemoveAttribute","Host"],"sources":["src/components/grid-pagination/grid-pagination-arrow.tsx","src/components/grid-pagination/grid-pagination.scss?tag=wcs-grid-pagination&encapsulation=shadow","src/components/grid-pagination/grid-pagination.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\ninterface GridPaginationArrowProps {\n  active: boolean;\n  order: 'next' | 'previous';\n  double?: boolean;\n}\n\nconst getAccessibleName = (order: GridPaginationArrowProps['order'], double: GridPaginationArrowProps['double']): string => {\n  switch (order) {\n    case 'next':\n      return double ? 'Last page' : 'Next page';\n    case 'previous':\n    default:\n      return double ? 'First page' : 'Previous page';\n  }\n}\n\nexport const GridPaginationArrow: FunctionalComponent<GridPaginationArrowProps> = ({active, order, double = false}) => (\n  <wcs-button mode=\"clear\"\n              shape=\"square\"\n              size=\"s\"\n              disabled={!active}\n              title={getAccessibleName(order, double)}>\n    <svg style={{cursor: 'pointer'}}\n         aria-hidden=\"true\"\n         xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\">\n      <style type=\"text/css\">{`\n              .arrow-group {\n                  transform-origin: 50% 51%;\n                  transition: transform 175ms ease-in-out;\n              }\n              .arrow {\n                  transition: fill 175ms ease-in-out;\n                  fill: var(--wcs-grid-pagination-arrow-color-inactive, var(--wcs-button-color));\n              }\n              .second-arrow {\n                  transform: translateY(-8px);\n              }\n              .next {\n                  transform: rotate(90deg);\n              }\n              .previous {\n                  transform: rotate(-90deg);\n              }\n              .active {\n                  fill: var(--wcs-grid-pagination-arrow-color-active, var(--wcs-button-color));\n              }\n          `}</style>\n      <g fill=\"none\" class={order + ' arrow-group'}>\n        <path class={(active ? 'active' : '') + ' arrow'} d=\"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z\"/>\n        <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\n      </g>\n      {\n        double ?\n          <g fill=\"none\" class={order + ' arrow-group'}>\n            <path class={(active ? 'active' : '') + ' arrow second-arrow'}\n                  d=\"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z\"/>\n            <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\n          </g>\n          : ''\n      }\n    </svg>\n  </wcs-button>\n);\n","@import '../../style/focus-outline.scss';\n\n:host {\n    display: block;\n    margin-top: var(--wcs-grid-pagination-margin-top);\n\n    --wcs-grid-pagination-color: var(--wcs-semantic-color-text-primary);\n    --wcs-grid-pagination-font-size: var(--wcs-semantic-font-size-label-2);\n    --wcs-grid-pagination-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-grid-pagination-gap: var(--wcs-semantic-spacing-base);\n    --wcs-grid-pagination-page-size-gap: var(--wcs-semantic-spacing-base);\n    --wcs-grid-pagination-counter-gap: var(--wcs-semantic-spacing-small);\n    --wcs-grid-pagination-margin-top: var(--wcs-semantic-spacing-large);\n\n    --wcs-grid-pagination-arrow-color-inactive: unset; /* Optional : Overrides the fill property of the grid-pagination-arrow */\n    --wcs-grid-pagination-arrow-color-active: unset; /* Optional : Overrides the fill property of the grid-pagination-arrow */\n}\n\n.container {\n    display: grid;\n    gap: var(--wcs-grid-pagination-gap);\n    grid-template-columns: auto auto auto;\n    justify-content: space-between;\n    align-items: center;\n    color: var(--wcs-grid-pagination-color);\n    font-size: var(--wcs-grid-pagination-font-size);\n    font-weight: var(--wcs-grid-pagination-font-weight);\n}\n\n.available-page-sizes {\n    width: auto;\n}\n\n.page-management, .page-size, .items-count {\n    display: flex;\n    align-items: center;\n}\n\n.page-size {\n    gap: var(--wcs-grid-pagination-page-size-gap);\n}\n\n.page-management {\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n}\n\n.pagination-arrow {\n    display: flex;\n}\n\n.pagination-counter {\n    padding: 0 var(--wcs-grid-pagination-counter-gap);\n\n    span {\n        white-space: nowrap;\n    }\n}\n\n/* TODO : Remove this when the select component will be able to handle the size S */\nwcs-select.available-page-sizes {\n    --wcs-select-control-height: var(--wcs-semantic-size-s);\n}\n","import {\n    Component,\n    ComponentInterface, Element,\n    Event, EventEmitter,\n    h,\n    Host, Method,\n    Prop\n} from '@stencil/core';\nimport {\n    WcsGridPaginationChangeEventDetails\n} from '../grid/grid-interface';\nimport { SelectChangeEventDetail } from '../select/select-interface';\nimport { GridPaginationArrow } from './grid-pagination-arrow';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst GRID_PAGINATION_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The grid pagination is a subcomponent of `wcs-grid`, slotted in `grid-pagination` under the `<table>` element.\n * \n * @cssprop --wcs-grid-pagination-color - Text color of the grid pagination\n * @cssprop --wcs-grid-pagination-font-size - Font-size of the grid pagination\n * @cssprop --wcs-grid-pagination-font-weight - Font-weight of the grid pagination\n * @cssprop --wcs-grid-pagination-gap - Gap between the page size, number of elements and page management\n * @cssprop --wcs-grid-pagination-page-size-gap - Gap between the select and the text within the page size container\n * @cssprop --wcs-grid-pagination-counter-gap - Gap within the page management counter\n * @cssprop --wcs-grid-pagination-margin-top - Margin between the grid and the pagination\n * @cssprop --wcs-grid-pagination-arrow-color-inactive - Color of the inactive arrow\n * @cssprop --wcs-grid-pagination-arrow-color-active - Color of the active arrow\n */\n@Component({\n    tag: 'wcs-grid-pagination',\n    styleUrl: 'grid-pagination.scss',\n    shadow: true\n})\nexport class GridPagination implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeNav!: HTMLElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    static readonly INDEX_FIRST_PAGE: number = 0;\n    /**\n     * Set the available page sizes in the pagination dropdown on the left.\n     */\n    @Prop() availablePageSizes: number[] = [10, 20, 50];\n    /**\n     * The current page of the pagination. First page starts at index 0.\n     */\n    @Prop({mutable: true}) currentPage: number = GridPagination.INDEX_FIRST_PAGE;\n    /**\n     * Maximum number of elements shown per page.  \n     * Default is the first value of `availablePageSizes`.\n     */\n    @Prop() pageSize: number = this.availablePageSizes[0];\n    /**\n     * Total elements in the grid.  \n     * - **Grid in `Server mode`** : You have to set `itemsCount` = your total data length.  \n     * - **Grid not in Server mode** : Do not set it manually : itemsCount is set and updated every pagination refresh.\n     */\n    @Prop() itemsCount: number = 0;\n    /**\n     * Max number of pages.  \n     * - **Grid in `Server mode`** : You have to set `pageCount` = `itemsCount` divided by `pageSize`.  \n     * - **Grid not in Server mode** : Do not set it manually : pageCount is set and updated every pagination refresh.\n     */\n    @Prop() pageCount: number = 1;\n    /**\n     * Event emitted when the pagination changes.\n     */\n    @Event() wcsGridPaginationChange!: EventEmitter<WcsGridPaginationChangeEventDetails>;\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, GRID_PAGINATION_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeNav, attr, value);\n    }\n\n    private lastPage(): void {\n        this.currentPage = this.pageCount - 1;\n        this.emitPaginationChange();\n    }\n\n    private nextPage(): void {\n        if (this.canGoToNextPage()) {\n            this.currentPage++;\n            this.emitPaginationChange();\n        }\n    }\n\n    private canGoToNextPage(): boolean {\n        return this.currentPage + 1 < this.pageCount;\n    }\n\n    private previousPage(): void {\n        if (this.canGoToPreviousPage()) {\n            this.currentPage--;\n            this.emitPaginationChange();\n        }\n    }\n\n    private canGoToPreviousPage(): boolean {\n        return this.currentPage > 0;\n    }\n\n    private firstPage(): void {\n        this.currentPage = 0;\n        this.emitPaginationChange();\n    }\n\n    private onChangePagesize(event: CustomEvent<SelectChangeEventDetail>): void {\n        this.pageSize = event.detail.value;\n        if (this.currentPage + 1 > this.pageSize) {\n            this.currentPage = 0;\n        }\n        this.emitPaginationChange();\n    }\n\n    private emitPaginationChange(): void {\n        this.wcsGridPaginationChange.emit({\n            pagination: {\n                currentPage: this.currentPage,\n                pageSize: this.pageSize,\n                itemsCount: this.itemsCount,\n                pageCount: this.pageCount\n            }\n        });\n    }\n\n    render(): any {\n        return (<Host slot=\"grid-pagination\">\n            <div class=\"container\">\n                <div class=\"page-size\">\n                    <wcs-select placeholder=\"Eléments par page\"\n                                class=\"available-page-sizes\"\n                                aria-labelledby=\"elements-per-page-number elements-per-page-text\"\n                                value={this.pageSize}\n                                onWcsChange={this.onChangePagesize.bind(this)}>\n                        {\n                            this.availablePageSizes.map((pageSize) =>\n                                <wcs-select-option value={pageSize}>{pageSize}</wcs-select-option>\n                            )\n                        }\n                    </wcs-select>\n                    <span id=\"elements-per-page-number\" hidden>{this.pageSize}</span>\n                    <span id=\"elements-per-page-text\">éléments par page</span>\n                </div>\n\n                <div class=\"items-count\">\n                    <span>{this.itemsCount} éléments</span>\n                </div>\n\n                <nav aria-label=\"pagination\" ref={(el) => (this.nativeNav = el)} {...this.inheritedAttributes}>\n                    <ul class=\"page-management\">\n                        <li class=\"pagination-arrow\" onClick={this.firstPage.bind(this)}>\n                            <GridPaginationArrow active={this.canGoToPreviousPage()} order=\"previous\" double></GridPaginationArrow>\n                        </li>\n                        <li class=\"pagination-arrow\" onClick={this.previousPage.bind(this)}>\n                            <GridPaginationArrow active={this.canGoToPreviousPage()} order=\"previous\"></GridPaginationArrow>\n                        </li>\n    \n                        <li class=\"pagination-counter\">\n                            <span aria-label={`Page ${this.currentPage + 1} sur ${this.pageCount}`} aria-current=\"page\">\n                                {this.currentPage + 1} / {this.pageCount}\n                            </span>\n                        </li>\n    \n                        <li class=\"pagination-arrow\" onClick={this.nextPage.bind(this)}>\n                            <GridPaginationArrow active={this.canGoToNextPage()} order=\"next\"></GridPaginationArrow>\n                        </li>\n                        <li class=\"pagination-arrow\" onClick={this.lastPage.bind(this)}>\n                            <GridPaginationArrow active={this.canGoToNextPage()} order=\"next\" double></GridPaginationArrow>\n                        </li>\n                    </ul>\n                </nav>\n            </div>\n        </Host>)\n    }\n}\n"],"version":3}

package/dist/esm/button-interface-dc5ddd51.js

@@ -1,9 +0,0 @@
-const WcsButtonSizeValues = ['s', 'm', 'l']; // as const keyword is used to infer and preserve the exact literal values of an array or object.
-function isWcsButtonSize(size) {
-    // @ts-ignore : ignore size type, as it is checked with WcsButtonSizeValues
-    return WcsButtonSizeValues.includes(size);
-}
-
-export { WcsButtonSizeValues as W, isWcsButtonSize as i };
-
-//# sourceMappingURL=button-interface-dc5ddd51.js.map

package/dist/esm/button-interface-dc5ddd51.js.map

@@ -1 +0,0 @@
-{"file":"button-interface-dc5ddd51.js","mappings":"MAQa,mBAAmB,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAW;SAI5C,eAAe,CAAC,IAAY;;IAExC,OAAO,mBAAmB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;AAC9C;;;;","names":[],"sources":["src/components/button/button-interface.ts"],"sourcesContent":["import { WcsSize } from '../../shared-types';\n\nexport type WcsButtonType = 'button' | 'submit';\n\nexport type WcsButtonShape = 'normal' | 'round' | 'square';\n\nexport type WcsButtonMode = 'plain' | 'stroked' | 'clear';\n\nexport const WcsButtonSizeValues = ['s', 'm', 'l'] as const; // as const keyword is used to infer and preserve the exact literal values of an array or object.\n\nexport type WcsButtonSize = Extract<WcsSize, typeof WcsButtonSizeValues[number]>;\n\nexport function isWcsButtonSize(size: string): size is WcsButtonSize {\n    // @ts-ignore : ignore size type, as it is checked with WcsButtonSizeValues\n    return WcsButtonSizeValues.includes(size);\n}\n"],"version":3}

package/dist/esm/grid-pagination-976a86e9.js.map

@@ -1 +0,0 @@
-{"file":"grid-pagination-976a86e9.js","mappings":"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","names":[],"sources":["src/components/grid-pagination/grid-pagination-arrow.tsx","src/components/grid-pagination/grid-pagination.scss?tag=wcs-grid-pagination&encapsulation=shadow","src/components/grid-pagination/grid-pagination.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\ninterface GridPaginationArrowProps {\n  active: boolean;\n  order: 'next' | 'previous';\n  double?: boolean;\n}\n\nconst getAccessibleName = (order: GridPaginationArrowProps['order'], double: GridPaginationArrowProps['double']): string => {\n  switch (order) {\n    case 'next':\n      return double ? 'Last page' : 'Next page';\n    case 'previous':\n    default:\n      return double ? 'First page' : 'Previous page';\n  }\n}\n\nexport const GridPaginationArrow: FunctionalComponent<GridPaginationArrowProps> = ({active, order, double = false}) => (\n  <wcs-button mode=\"clear\"\n              shape=\"square\"\n              size=\"s\"\n              disabled={!active}\n              title={getAccessibleName(order, double)}>\n    <svg style={{cursor: 'pointer'}}\n         aria-hidden=\"true\"\n         xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\">\n      <style type=\"text/css\">{`\n              .arrow-group {\n                  transform-origin: 50% 51%;\n                  transition: transform 175ms ease-in-out;\n              }\n              .arrow {\n                  transition: fill 175ms ease-in-out;\n                  fill: var(--wcs-grid-pagination-arrow-color-inactive, var(--wcs-button-color));\n              }\n              .second-arrow {\n                  transform: translateY(-8px);\n              }\n              .next {\n                  transform: rotate(90deg);\n              }\n              .previous {\n                  transform: rotate(-90deg);\n              }\n              .active {\n                  fill: var(--wcs-grid-pagination-arrow-color-active, var(--wcs-button-color));\n              }\n          `}</style>\n      <g fill=\"none\" class={order + ' arrow-group'}>\n        <path class={(active ? 'active' : '') + ' arrow'} d=\"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z\"/>\n        <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\n      </g>\n      {\n        double ?\n          <g fill=\"none\" class={order + ' arrow-group'}>\n            <path class={(active ? 'active' : '') + ' arrow second-arrow'}\n                  d=\"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z\"/>\n            <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\n          </g>\n          : ''\n      }\n    </svg>\n  </wcs-button>\n);\n","@import '../../style/focus-outline.scss';\n\n:host {\n    display: block;\n    margin-top: var(--wcs-grid-pagination-margin-top);\n\n    --wcs-grid-pagination-color: var(--wcs-semantic-color-text-primary);\n    --wcs-grid-pagination-font-size: var(--wcs-semantic-font-size-label-2);\n    --wcs-grid-pagination-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-grid-pagination-gap: var(--wcs-semantic-spacing-base);\n    --wcs-grid-pagination-page-size-gap: var(--wcs-semantic-spacing-base);\n    --wcs-grid-pagination-counter-gap: var(--wcs-semantic-spacing-small);\n    --wcs-grid-pagination-margin-top: var(--wcs-semantic-spacing-large);\n\n    --wcs-grid-pagination-arrow-color-inactive: unset; /* Optional : Overrides the fill property of the grid-pagination-arrow */\n    --wcs-grid-pagination-arrow-color-active: unset; /* Optional : Overrides the fill property of the grid-pagination-arrow */\n}\n\n.container {\n    display: grid;\n    gap: var(--wcs-grid-pagination-gap);\n    grid-template-columns: auto auto auto;\n    justify-content: space-between;\n    align-items: center;\n    color: var(--wcs-grid-pagination-color);\n    font-size: var(--wcs-grid-pagination-font-size);\n    font-weight: var(--wcs-grid-pagination-font-weight);\n}\n\n.available-page-sizes {\n    width: auto;\n}\n\n.page-management, .page-size, .items-count {\n    display: flex;\n    align-items: center;\n}\n\n.page-size {\n    gap: var(--wcs-grid-pagination-page-size-gap);\n}\n\n.page-management {\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n}\n\n.pagination-arrow {\n    display: flex;\n}\n\n.pagination-counter {\n    padding: 0 var(--wcs-grid-pagination-counter-gap);\n\n    span {\n        white-space: nowrap;\n    }\n}\n\n/* TODO : Remove this when the select component will be able to handle the size S */\nwcs-select.available-page-sizes {\n    --wcs-select-control-height: var(--wcs-semantic-size-s);\n}\n","import {\n    Component,\n    ComponentInterface, Element,\n    Event, EventEmitter,\n    h,\n    Host, Method,\n    Prop\n} from '@stencil/core';\nimport {\n    WcsGridPaginationChangeEventDetails\n} from '../grid/grid-interface';\nimport { SelectChangeEventDetail } from '../select/select-interface';\nimport { GridPaginationArrow } from './grid-pagination-arrow';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst GRID_PAGINATION_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The grid pagination is a subcomponent of `wcs-grid`, slotted in `grid-pagination` under the `<table>` element.\n * \n * @cssprop --wcs-grid-pagination-color - Text color of the grid pagination\n * @cssprop --wcs-grid-pagination-font-size - Font-size of the grid pagination\n * @cssprop --wcs-grid-pagination-font-weight - Font-weight of the grid pagination\n * @cssprop --wcs-grid-pagination-gap - Gap between the page size, number of elements and page management\n * @cssprop --wcs-grid-pagination-page-size-gap - Gap between the select and the text within the page size container\n * @cssprop --wcs-grid-pagination-counter-gap - Gap within the page management counter\n * @cssprop --wcs-grid-pagination-margin-top - Margin between the grid and the pagination\n * @cssprop --wcs-grid-pagination-arrow-color-inactive - Color of the inactive arrow\n * @cssprop --wcs-grid-pagination-arrow-color-active - Color of the active arrow\n */\n@Component({\n    tag: 'wcs-grid-pagination',\n    styleUrl: 'grid-pagination.scss',\n    shadow: true\n})\nexport class GridPagination implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeNav!: HTMLElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    static readonly INDEX_FIRST_PAGE: number = 0;\n    /**\n     * Set the available page sizes in the pagination dropdown on the left.\n     */\n    @Prop() availablePageSizes: number[] = [10, 20, 50];\n    /**\n     * The current page of the pagination. First page starts at index 0.\n     */\n    @Prop({mutable: true}) currentPage: number = GridPagination.INDEX_FIRST_PAGE;\n    /**\n     * Maximum number of elements shown per page.  \n     * Default is the first value of `availablePageSizes`.\n     */\n    @Prop() pageSize: number = this.availablePageSizes[0];\n    /**\n     * Total elements in the grid.  \n     * - **Grid in `Server mode`** : You have to set `itemsCount` = your total data length.  \n     * - **Grid not in Server mode** : Do not set it manually : itemsCount is set and updated every pagination refresh.\n     */\n    @Prop() itemsCount: number = 0;\n    /**\n     * Max number of pages.  \n     * - **Grid in `Server mode`** : You have to set `pageCount` = `itemsCount` divided by `pageSize`.  \n     * - **Grid not in Server mode** : Do not set it manually : pageCount is set and updated every pagination refresh.\n     */\n    @Prop() pageCount: number = 1;\n    /**\n     * Event emitted when the pagination changes.\n     */\n    @Event() wcsGridPaginationChange!: EventEmitter<WcsGridPaginationChangeEventDetails>;\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, GRID_PAGINATION_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeNav, attr, value);\n    }\n\n    private lastPage(): void {\n        this.currentPage = this.pageCount - 1;\n        this.emitPaginationChange();\n    }\n\n    private nextPage(): void {\n        if (this.canGoToNextPage()) {\n            this.currentPage++;\n            this.emitPaginationChange();\n        }\n    }\n\n    private canGoToNextPage(): boolean {\n        return this.currentPage + 1 < this.pageCount;\n    }\n\n    private previousPage(): void {\n        if (this.canGoToPreviousPage()) {\n            this.currentPage--;\n            this.emitPaginationChange();\n        }\n    }\n\n    private canGoToPreviousPage(): boolean {\n        return this.currentPage > 0;\n    }\n\n    private firstPage(): void {\n        this.currentPage = 0;\n        this.emitPaginationChange();\n    }\n\n    private onChangePagesize(event: CustomEvent<SelectChangeEventDetail>): void {\n        this.pageSize = event.detail.value;\n        if (this.currentPage + 1 > this.pageSize) {\n            this.currentPage = 0;\n        }\n        this.emitPaginationChange();\n    }\n\n    private emitPaginationChange(): void {\n        this.wcsGridPaginationChange.emit({\n            pagination: {\n                currentPage: this.currentPage,\n                pageSize: this.pageSize,\n                itemsCount: this.itemsCount,\n                pageCount: this.pageCount\n            }\n        });\n    }\n\n    render(): any {\n        return (<Host slot=\"grid-pagination\">\n            <div class=\"container\">\n                <div class=\"page-size\">\n                    <wcs-select placeholder=\"Eléments par page\"\n                                class=\"available-page-sizes\"\n                                aria-labelledby=\"elements-per-page-number elements-per-page-text\"\n                                value={this.pageSize}\n                                onWcsChange={this.onChangePagesize.bind(this)}>\n                        {\n                            this.availablePageSizes.map((pageSize) =>\n                                <wcs-select-option value={pageSize}>{pageSize}</wcs-select-option>\n                            )\n                        }\n                    </wcs-select>\n                    <span id=\"elements-per-page-number\" hidden>{this.pageSize}</span>\n                    <span id=\"elements-per-page-text\">éléments par page</span>\n                </div>\n\n                <div class=\"items-count\">\n                    <span>{this.itemsCount} éléments</span>\n                </div>\n\n                <nav aria-label=\"pagination\" ref={(el) => (this.nativeNav = el)} {...this.inheritedAttributes}>\n                    <ul class=\"page-management\">\n                        <li class=\"pagination-arrow\" onClick={this.firstPage.bind(this)}>\n                            <GridPaginationArrow active={this.canGoToPreviousPage()} order=\"previous\" double></GridPaginationArrow>\n                        </li>\n                        <li class=\"pagination-arrow\" onClick={this.previousPage.bind(this)}>\n                            <GridPaginationArrow active={this.canGoToPreviousPage()} order=\"previous\"></GridPaginationArrow>\n                        </li>\n    \n                        <li class=\"pagination-counter\">\n                            <span aria-label={`Page ${this.currentPage + 1} sur ${this.pageCount}`} aria-current=\"page\">\n                                {this.currentPage + 1} / {this.pageCount}\n                            </span>\n                        </li>\n    \n                        <li class=\"pagination-arrow\" onClick={this.nextPage.bind(this)}>\n                            <GridPaginationArrow active={this.canGoToNextPage()} order=\"next\"></GridPaginationArrow>\n                        </li>\n                        <li class=\"pagination-arrow\" onClick={this.lastPage.bind(this)}>\n                            <GridPaginationArrow active={this.canGoToNextPage()} order=\"next\" double></GridPaginationArrow>\n                        </li>\n                    </ul>\n                </nav>\n            </div>\n        </Host>)\n    }\n}\n"],"version":3}

package/dist/wcs/p-13090618.entry.js

@@ -1,2 +0,0 @@
-import{r as s,h as r,g as a}from"./p-32e583ea.js";import{i as e,a as o,s as c}from"./p-52d77e1f.js";const t=":host{--wcs-progress-bar-border-radius:var(--wcs-semantic-border-radius-full);--wcs-progress-bar-border-radius-small:var(--wcs-semantic-border-radius-small);--wcs-progress-bar-animation-duration:var(--wcs-semantic-motion-duration-feedback-slower);--wcs-progress-bar-height-m:calc(var(--wcs-semantic-size-m) / 4);--wcs-progress-bar-height-s:calc(var(--wcs-semantic-size-s) / 6);--wcs-progress-bar-background-color:transparent;--wcs-progress-bar-rail-color:var(--wcs-semantic-color-background-surface-tertiary);--wcs-progress-bar-rail-spacing:var(--wcs-semantic-spacing-small);--wcs-progress-bar-gap-s:var(--wcs-semantic-spacing-small);--wcs-progress-bar-gap-m:var(--wcs-semantic-spacing-base);--wcs-progress-bar-indicator-color:var(--wcs-semantic-color-background-surface-brand);--wcs-progress-bar-label-color:var(--wcs-semantic-color-text-primary);--wcs-progress-bar-label-font-size-s:var(--wcs-semantic-font-size-s);--wcs-progress-bar-label-font-size-m:calc(1.5 * var(--wcs-semantic-font-size-m));--wcs-progress-bar-label-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-progress-bar-label-percentage-font-size-s:calc(var(--wcs-semantic-font-size-s) * 0.7);--wcs-progress-bar-label-percentage-font-size-m:calc(var(--wcs-semantic-font-size-m) * 0.7);--wcs-progress-bar-label-top-space:var(--wcs-semantic-spacing-large)}:host([size=s]) .progress{height:var(--wcs-progress-bar-height-s);background-color:var(--wcs-progress-bar-background-color);background-image:none;background-size:auto;border-radius:var(--wcs-progress-bar-border-radius-small)}:host([size=s]) .progress .progress-label{font-size:var(--wcs-progress-bar-label-font-size-s);bottom:calc(100% + var(--wcs-progress-bar-gap-s))}:host([size=s]) .progress .progress-label sup{font-size:var(--wcs-progress-bar-label-percentage-font-size-s)}.progress{display:flex;height:var(--wcs-progress-bar-height-m);color:var(--wcs-progress-bar-label-color);background-color:var(--wcs-progress-bar-background-color);background-image:linear-gradient(90deg, var(--wcs-progress-bar-rail-color), 50%, transparent 50%);background-size:var(--wcs-progress-bar-rail-spacing) var(--wcs-progress-bar-height-m);border-radius:var(--wcs-progress-bar-border-radius)}.progress.has-label{margin-top:var(--wcs-progress-bar-label-top-space)}.progress.value-zero>.progress-bar>.progress-label{right:unset}.progress-bar{position:relative;display:flex;flex-direction:column;justify-content:center;color:var(--wcs-progress-bar-label-color);text-align:center;background-color:var(--wcs-progress-bar-indicator-color);border-radius:var(--wcs-progress-bar-border-radius);transition:width var(--wcs-progress-bar-animation-duration) ease-out}.progress-label{line-height:1;position:absolute;right:0;bottom:calc(100% + var(--wcs-progress-bar-gap-m));display:flex;flex-direction:row;align-items:flex-start;font-size:var(--wcs-progress-bar-label-font-size-m);font-weight:var(--wcs-progress-bar-label-font-weight)}.progress-label sup{font-size:var(--wcs-progress-bar-label-percentage-font-size-m)}";const i=t;const l=["title"];const b=class{constructor(r){s(this,r);this.inheritedAttributes={};this.size="m";this.showLabel=false;this.value=0}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},e(this.el)),o(this.el,l))}async setAriaAttribute(s,r){c(this.nativeProgress,s,r)}render(){const s={width:this.value+"%"};return r("div",Object.assign({key:"9339cb3c4ef89618cb45119495d3601ce2110d3d",class:this.rootClasses(),role:"progressbar","aria-valuemin":"0","aria-valuemax":"100","aria-valuenow":this.value,"aria-valuetext":this.value+"%",ref:s=>this.nativeProgress=s},this.inheritedAttributes),r("div",{key:"8b54ef388bcd4e2bff826a18374c4732f7d0e384",class:"progress-bar",style:s},this.showLabel&&r("span",{key:"f50f5879441f22db9552f6bbaaca3ede6f23a678",class:"progress-label"},this.value,r("sup",{key:"b10471901b5d3efc0ae95d3a1de822ead1720b87"},"%"))))}rootClasses(){let s="progress";if(this.showLabel)s+=" has-label";if(this.value===0)s+=" value-zero";return s}get el(){return a(this)}};b.style=i;export{b as wcs_progress_bar};
-//# sourceMappingURL=p-13090618.entry.js.map

package/dist/wcs/p-13090618.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["progressBarCss","WcsProgressBarStyle0","PROGRESS_BAR_ARIA_INHERITED_ATTRS","ProgressBar","this","inheritedAttributes","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","setAriaAttribute","attr","value","setOrRemoveAttribute","nativeProgress","render","style","width","h","key","class","rootClasses","role","ref","showLabel","classes"],"sources":["src/components/progress-bar/progress-bar.scss?tag=wcs-progress-bar&encapsulation=shadow","src/components/progress-bar/progress-bar.tsx"],"sourcesContent":[":host {\n    --wcs-progress-bar-border-radius: var(--wcs-semantic-border-radius-full);\n    --wcs-progress-bar-border-radius-small: var(--wcs-semantic-border-radius-small);\n    --wcs-progress-bar-animation-duration: var(--wcs-semantic-motion-duration-feedback-slower);\n\n    --wcs-progress-bar-height-m: calc(var(--wcs-semantic-size-m) / 4);\n    --wcs-progress-bar-height-s: calc(var(--wcs-semantic-size-s) / 6);\n    --wcs-progress-bar-background-color: transparent;\n\n    --wcs-progress-bar-rail-color: var(--wcs-semantic-color-background-surface-tertiary);\n    --wcs-progress-bar-rail-spacing: var(--wcs-semantic-spacing-small);\n\n    --wcs-progress-bar-gap-s: var(--wcs-semantic-spacing-small);\n    --wcs-progress-bar-gap-m: var(--wcs-semantic-spacing-base);\n\n    --wcs-progress-bar-indicator-color: var(--wcs-semantic-color-background-surface-brand);\n    --wcs-progress-bar-label-color: var(--wcs-semantic-color-text-primary);\n    --wcs-progress-bar-label-font-size-s: var(--wcs-semantic-font-size-s);\n    --wcs-progress-bar-label-font-size-m: calc(1.5 * var(--wcs-semantic-font-size-m));\n    --wcs-progress-bar-label-font-weight: var(--wcs-semantic-font-weight-medium);\n    --wcs-progress-bar-label-percentage-font-size-s: calc(var(--wcs-semantic-font-size-s) * 0.7);\n    --wcs-progress-bar-label-percentage-font-size-m: calc(var(--wcs-semantic-font-size-m) * 0.7);\n    --wcs-progress-bar-label-top-space: var(--wcs-semantic-spacing-large);\n}\n\n:host([size=s]) {\n    .progress {\n        height: var(--wcs-progress-bar-height-s);\n        background-color: var(--wcs-progress-bar-background-color);\n        background-image: none;\n        background-size: auto;\n        border-radius: var(--wcs-progress-bar-border-radius-small);\n\n        .progress-label {\n            font-size: var(--wcs-progress-bar-label-font-size-s);\n            bottom: calc(100% + var(--wcs-progress-bar-gap-s));\n\n            sup {\n                font-size: var(--wcs-progress-bar-label-percentage-font-size-s);\n            }\n        }\n    }\n}\n\n.progress {\n    display: flex;\n    height: var(--wcs-progress-bar-height-m);\n    color: var(--wcs-progress-bar-label-color);\n    background-color: var(--wcs-progress-bar-background-color);\n    background-image: linear-gradient(90deg, var(--wcs-progress-bar-rail-color), 50%, transparent 50%);\n    background-size: var(--wcs-progress-bar-rail-spacing) var(--wcs-progress-bar-height-m);\n    border-radius: var(--wcs-progress-bar-border-radius);\n\n    &.has-label {\n        margin-top: var(--wcs-progress-bar-label-top-space);\n    }\n\n    // FIXME: Temporary fix so the label doesn't appear before the bar\n    &.value-zero > .progress-bar > .progress-label {\n        right: unset;\n    }\n}\n\n.progress-bar {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    color: var(--wcs-progress-bar-label-color);\n    text-align: center;\n    background-color: var(--wcs-progress-bar-indicator-color);\n    border-radius: var(--wcs-progress-bar-border-radius);\n    transition: width var(--wcs-progress-bar-animation-duration) ease-out;\n}\n\n.progress-label {\n    line-height: 1; // to remove extra-space (https://www.reddit.com/r/css/comments/z5zazq/mysterious_spacing_around_all_text_not_padding_or/\n    position: absolute;\n    right: 0;\n    bottom: calc(100% + var(--wcs-progress-bar-gap-m));\n\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n\n    font-size: var(--wcs-progress-bar-label-font-size-m);\n    font-weight: var(--wcs-progress-bar-label-font-weight);\n\n    sup {\n        font-size: var(--wcs-progress-bar-label-percentage-font-size-m);\n    }\n}\n","import { Component, ComponentInterface, Element, h, Method, Prop } from '@stencil/core';\nimport { WcsSize } from \"../../shared-types\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\n\nconst PROGRESS_BAR_ARIA_INHERITED_ATTRS = ['title'];\n\n/**\n * The progress-bar component is a horizontal bar that indicates the current completion of a task.\n *\n * ## Accessibility guidelines 💡\n * > Aria attributes and how to display the progress-bar depend on the use case in your application :\n * >\n * > - **Case 1 : decorative**\n * > If the progress-bar is used as a decoration _(if removed, the user doesn't lose any relevant information)_ or in the\n * > context of another component _(such as progress-bar in a card, stepper, ...)_ => **you don't need to show the label nor add an aria-label**.\n * >\n * > - **Case 2 : informative**\n * > If the progress-bar is used to convey important information _(e.g., form completion status, dashboard KPI)_, you need to :\n * >   - **Provide a visible label** that describes the purpose of the progress-bar.\n * >   - **Set the `showLabel` property to `true`** to show the percentage above the progress-bar.\n * >   - Optionally, use aria-label to provide an accessible name if a visible label is not present.\n *\n * @cssprop --wcs-progress-bar-border-radius - Border radius\n * @cssprop --wcs-progress-bar-border-radius-small - Border radius for size small\n * @cssprop --wcs-progress-bar-animation-duration - Animation duration\n * \n * @cssprop --wcs-progress-bar-height-m - Height for size medium\n * @cssprop --wcs-progress-bar-height-s - Height for size small\n * @cssprop --wcs-progress-bar-background-color - Background color of the progress bar\n * @cssprop --wcs-progress-bar-rail-color - Rail color (dashed line)\n * @cssprop --wcs-progress-bar-rail-spacing - Space between the rail dashes\n * @cssprop --wcs-progress-bar-gap-s - Gap between the progress bar and the label for size small\n * @cssprop --wcs-progress-bar-gap-m - Gap between the progress bar and the label for size medium\n * @cssprop --wcs-progress-bar-indicator-color - Color of the progress bar indicator (bar on top of the rail)\n * @cssprop --wcs-progress-bar-label-color - Color of the label\n * @cssprop --wcs-progress-bar-label-font-size-s - Font size of the label for size small\n * @cssprop --wcs-progress-bar-label-font-size-m - Font size of the label for size medium\n * @cssprop --wcs-progress-bar-label-font-weight - Font weight of the label\n * @cssprop --wcs-progress-bar-label-percentage-font-size-s - Font size of the percentage for size small\n * @cssprop --wcs-progress-bar-label-percentage-font-size-m - Font size of the percentage for size medium\n * @cssprop --wcs-progress-bar-label-top-space - Space on top of the progress bar when label is displayed\n */\n@Component({\n    tag: 'wcs-progress-bar',\n    styleUrl: 'progress-bar.scss',\n    shadow: true\n})\nexport class ProgressBar implements ComponentInterface, MutableAriaAttribute {\n\n    @Element() private el!: HTMLWcsProgressBarElement;\n    private nativeProgress!: HTMLDivElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n\n    /**\n     * Specify the size of the progress bar.\n     * m = default, s = smaller\n     */\n    @Prop() size: Extract<WcsSize, 'm' | 's'> = 'm';\n\n    /**\n     * Whether it displays a label indicating the percentage of progress above the bar.\n     */\n    @Prop() showLabel: boolean = false;\n\n    /**\n     * The actual value of the progress.\n     * Ranging from 0 to 100.\n     */\n    @Prop() value: number = 0;\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, PROGRESS_BAR_ARIA_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeProgress, attr, value);\n    }\n\n    render() {\n        const style = {\n            width: this.value + '%'\n        };\n\n        return (\n            <div class={this.rootClasses()}\n                 role=\"progressbar\"\n                 aria-valuemin=\"0\"\n                 aria-valuemax=\"100\"\n                 aria-valuenow={this.value}\n                 aria-valuetext={this.value + '%'}\n                 ref={(el) => (this.nativeProgress = el)}\n                 {...this.inheritedAttributes}>\n                <div class=\"progress-bar\" style={style}>\n                    {this.showLabel &&\n                        <span class=\"progress-label\">\n              {this.value}<sup>%</sup>\n            </span>\n                    }\n                </div>\n            </div>\n        );\n    }\n\n    rootClasses(): string {\n        let classes = 'progress';\n        if (this.showLabel) classes += ' has-label';\n        // FIXME: Temporary fix so the label doesn't appear before the bar.\n        if (this.value === 0) classes += ' value-zero';\n        return classes;\n    }\n}\n"],"mappings":"oGAAA,MAAMA,EAAiB,28FACvB,MAAAC,EAAeD,ECKf,MAAME,EAAoC,CAAC,S,MA2C9BC,EAAW,M,yBAIZC,KAAAC,oBAA4C,G,UAOR,I,eAKf,M,WAML,C,CAExB,iBAAAC,GACIF,KAAKC,oBAAmBE,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsBL,KAAKM,KAC3BC,EAAkBP,KAAKM,GAAIR,G,CAKtC,sBAAMU,CAAiBC,EAAyBC,GAC5CC,EAAqBX,KAAKY,eAAgBH,EAAMC,E,CAGpD,MAAAG,GACI,MAAMC,EAAQ,CACVC,MAAOf,KAAKU,MAAQ,KAGxB,OACIM,EAAA,MAAAb,OAAAC,OAAA,CAAAa,IAAA,2CAAKC,MAAOlB,KAAKmB,cACZC,KAAK,cAAa,gBACJ,IAAG,gBACH,MAAK,gBACJpB,KAAKU,MAAK,iBACTV,KAAKU,MAAQ,IAC7BW,IAAMf,GAAQN,KAAKY,eAAiBN,GAChCN,KAAKC,qBACVe,EAAA,OAAAC,IAAA,2CAAKC,MAAM,eAAeJ,MAAOA,GAC5Bd,KAAKsB,WACFN,EAAA,QAAAC,IAAA,2CAAMC,MAAM,kBACrBlB,KAAKU,MAAMM,EAAA,OAAAC,IAAA,mD,CAQtB,WAAAE,GACI,IAAII,EAAU,WACd,GAAIvB,KAAKsB,UAAWC,GAAW,aAE/B,GAAIvB,KAAKU,QAAU,EAAGa,GAAW,cACjC,OAAOA,C"}

package/dist/wcs/p-13e50077.entry.js

@@ -1,2 +0,0 @@
-import{r as o,c as r,h as e,H as t}from"./p-32e583ea.js";import{c,d}from"./p-52d77e1f.js";const s="wcs-dropdown-item{--wcs-dropdown-item-height:var(--wcs-semantic-size-m);--wcs-dropdown-item-padding-horizontal:var(--wcs-semantic-spacing-base);--wcs-dropdown-item-padding-vertical:0;--wcs-dropdown-item-text-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-dropdown-item-text-color-default:var(--wcs-semantic-color-foreground-action-neutral-default);--wcs-dropdown-item-text-color-hover:var(--wcs-semantic-color-foreground-action-neutral-hover);--wcs-dropdown-item-text-color-press:var(--wcs-semantic-color-foreground-action-neutral-press);--wcs-dropdown-item-background-color-default:var(--wcs-semantic-color-background-action-neutral-default);--wcs-dropdown-item-background-color-hover:var(--wcs-semantic-color-background-action-neutral-hover);--wcs-dropdown-item-background-color-press:var(--wcs-semantic-color-background-action-neutral-press);--wcs-dropdown-item-border-width-focus:var(--wcs-semantic-border-width-large);--wcs-dropdown-item-border-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-dropdown-item-border-radius:var(--wcs-semantic-border-radius-base);--wcs-dropdown-item-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);padding:0 var(--wcs-dropdown-item-padding-horizontal);font-weight:var(--wcs-dropdown-item-text-font-weight);cursor:pointer;color:var(--wcs-dropdown-item-text-color-default);height:var(--wcs-dropdown-item-height);display:flex;flex-direction:row;align-items:center;border-radius:var(--wcs-dropdown-item-border-radius);transition:background-color var(--wcs-dropdown-item-transition-duration) ease-in-out}wcs-dropdown-item:hover{color:var(--wcs-dropdown-item-text-color-hover);background-color:var(--wcs-dropdown-item-background-color-hover)}wcs-dropdown-item:active{color:var(--wcs-dropdown-item-text-color-press);background-color:var(--wcs-dropdown-item-background-color-press)}wcs-dropdown-item:focus-visible{outline:dashed var(--wcs-dropdown-item-border-width-focus) var(--wcs-dropdown-item-border-color-focus);outline-offset:calc(-1 * var(--wcs-dropdown-item-border-width-focus))}@supports not selector(wcs-dropdown-item:focus-visible){wcs-dropdown-item:focus-within{outline:dashed var(--wcs-dropdown-item-border-width-focus) var(--wcs-dropdown-item-border-color-focus);outline-offset:calc(-1 * var(--wcs-dropdown-item-border-width-focus))}}";const i=s;const n=class{constructor(e){o(this,e);this.wcsDropdownItemClick=r(this,"wcsDropdownItemClick",7)}onMouseUp(o){this.wcsDropdownItemClick.emit()}onKeyDown(o){if(c(o)||d(o)){o.preventDefault();o.stopImmediatePropagation();this.wcsDropdownItemClick.emit()}}render(){return e(t,{key:"42948ba23a57e020d496f17bf667e976ce7768d2",slot:"item",role:"menuitem",tabindex:"-1"},e("slot",{key:"6f5ac6bf76bc964f5a28ca5d6ee3bd43c3213e50"}))}};n.style=i;export{n as wcs_dropdown_item};
-//# sourceMappingURL=p-13e50077.entry.js.map