wcs-core 7.0.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-dff8641e.entry.js

@@ -0,0 +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:"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-dff8641e.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["navItemCss","WcsNavItemStyle0","NavItem","onKeyDown","_event","isEnterKey","this","el","click","render","h","Host","key","role"],"sources":["src/components/nav-item/nav-item.scss?tag=wcs-nav-item","src/components/nav-item/nav-item.tsx"],"sourcesContent":["@import '../../style/breakpoints';\n@import '../../style/focus-outline.scss';\n\nwcs-nav-item {\n    --wcs-nav-item-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-nav-item-height-desktop: calc(10 * var(--wcs-semantic-size-base));\n    --wcs-nav-item-height-mobile: calc(6 * var(--wcs-semantic-size-base));\n    --wcs-nav-item-gap-desktop: var(--wcs-semantic-spacing-base);\n    --wcs-nav-item-gap-mobile: 0;\n\n    --wcs-nav-item-font-size-desktop: var(--wcs-semantic-font-size-label-3);\n    --wcs-nav-item-font-size-mobile: calc(var(--wcs-semantic-font-size-body-1) / 2);\n\n    --wcs-nav-item-background-color-default: var(--wcs-semantic-color-background-action-primary-default);\n    --wcs-nav-item-background-color-hover: var(--wcs-semantic-color-background-action-primary-hover);\n    --wcs-nav-item-background-color-press: var(--wcs-semantic-color-background-action-primary-press);\n    --wcs-nav-item-background-color-active: var(--wcs-semantic-color-background-action-primary-selected-default);\n\n    --wcs-nav-item-color-default: var(--wcs-semantic-color-foreground-action-primary-default);\n    --wcs-nav-item-color-active: var(--wcs-semantic-color-foreground-action-primary-default);\n    --wcs-nav-item-color-hover: var(--wcs-semantic-color-foreground-action-primary-default);\n    --wcs-nav-item-color-press: var(--wcs-semantic-color-foreground-action-primary-default);\n\n    --wcs-nav-item-border-color-focus: var(--wcs-semantic-color-border-focus-base-on-secondary);\n    --wcs-nav-item-border-width-focus: var(--wcs-semantic-border-width-large);\n\n    --wcs-nav-item-indicator-background-color: var(--wcs-semantic-color-background-surface-accent-light);\n    --wcs-nav-item-indicator-width-desktop: calc(0.5 * var(--wcs-semantic-size-base));\n    --wcs-nav-item-indicator-width-mobile: calc(3 * var(--wcs-semantic-size-base));\n    --wcs-nav-item-indicator-height-desktop: calc(3 * var(--wcs-semantic-size-base));\n    --wcs-nav-item-indicator-height-mobile: calc(0.5 * var(--wcs-semantic-size-base));\n    --wcs-nav-item-indicator-border-radius-desktop: var(--wcs-semantic-border-radius-base) 0 0 var(--wcs-semantic-border-radius-base);\n    --wcs-nav-item-indicator-border-radius-mobile: var(--wcs-semantic-border-radius-base) var(--wcs-semantic-border-radius-base) 0 0;\n\n    --wcs-nav-item-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    display: block;\n    cursor: pointer;\n    font-weight: var(--wcs-nav-item-font-weight);\n\n    transition-property: color, background-color, border-color, box-shadow, backdrop-filter;\n    transition-duration: var(--wcs-nav-item-transition-duration);\n    transition-timing-function: ease-in-out;\n    background-color: var(--wcs-nav-item-background-color-default);\n\n    a, button {\n        display: flex;\n        position: relative;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        text-align: center;\n        background-color: transparent;\n        border: none;\n        text-decoration: none;\n        height: var(--wcs-nav-item-height-desktop);\n        gap: var(--wcs-nav-item-gap-desktop);\n        font-size: var(--wcs-nav-item-font-size-desktop);\n        color: var(--wcs-nav-item-color-default);\n\n        @include for-tablet-landscape-down {\n            display: flex;\n            flex: 1;\n            height: var(--wcs-nav-item-height-mobile);\n            gap: var(--wcs-nav-item-gap-mobile);\n            font-size: var(--wcs-nav-item-font-size-mobile);\n        }\n    }\n\n    button {\n        width: 100%;\n        cursor: inherit;\n    }\n\n    a:focus, button:focus {\n        outline: none;\n    }\n\n    @include for-tablet-landscape-down {\n        &:has(a:focus-visible), &:has(button:focus-visible) {\n            @include focus-outline(var(--wcs-nav-item-border-color-focus), var(--wcs-nav-item-border-width-focus), -2px);\n        }\n\n        @supports not selector(&:has(a:focus-visible)) {\n            &:focus-within {\n                @include focus-outline(var(--wcs-nav-item-border-color-focus), var(--wcs-nav-item-border-width-focus), -2px);\n            }\n        }\n\n        @supports not selector(&:has(button:focus-visible)) {\n            &:focus-within {\n                @include focus-outline(var(--wcs-nav-item-border-color-focus), var(--wcs-nav-item-border-width-focus), -2px);\n            }\n        }\n    }\n\n    @include for-desktop-up {\n        &:has(a:focus-visible), &:has(button:focus-visible) {\n            @include focus-outline(var(--wcs-nav-item-border-color-focus), var(--wcs-nav-item-border-width-focus), -2px);\n        }\n\n        @supports not selector(&:has(a:focus-visible)) {\n            &:focus-within {\n                @include focus-outline(var(--wcs-nav-item-border-color-focus), var(--wcs-nav-item-border-width-focus), -2px);\n            }\n        }\n\n        @supports not selector(&:has(button:focus-visible)) {\n            &:focus-within {\n                @include focus-outline(var(--wcs-nav-item-border-color-focus), var(--wcs-nav-item-border-width-focus), -2px);\n            }\n        }\n    }\n\n    i {\n        margin-bottom: 0.5rem;\n        display: inline-block;\n        @include for-tablet-landscape-down {\n            margin-bottom: 0.25rem;\n            display: inline-block;\n        }\n    }\n}\n\nwcs-nav-item[slot=bottom] {\n    a {\n        @include for-desktop-up {\n            border-top: var(--wcs-nav-item-border-horizontal-width) solid var(--wcs-nav-item-border-horizontal-color);\n            border-bottom: none !important;\n        }\n    }\n}\n\nwcs-nav-item:hover {\n    a {\n        color: var(--wcs-nav-item-color-hover);\n    }\n\n    background-color: var(--wcs-nav-item-background-color-hover);\n}\n\n/* This selector is for the press state, not to be confused with the active state (.active) */\nwcs-nav-item:active {\n    a {\n        color: var(--wcs-nav-item-color-press);\n    }\n\n    background-color: var(--wcs-nav-item-background-color-press);\n}\n\n\nwcs-nav-item.active,\nwcs-nav-item:has(> .active) {\n    //background-blend-mode: multiply;\n    background-color: var(--wcs-nav-item-background-color-active);\n\n    a {\n        color: var(--wcs-nav-item-color-active);\n    }\n}\n\n// For the indicator on the active nav-item :\nwcs-nav-item.active, wcs-nav-item:has(> .active) {\n    a::after {\n        position: absolute;\n        right: 0;\n        width: var(--wcs-nav-item-indicator-width-desktop);\n        height: var(--wcs-nav-item-indicator-height-desktop);\n        content: \"\";\n        background-color: var(--wcs-nav-item-indicator-background-color);\n        border-radius: var(--wcs-nav-item-indicator-border-radius-desktop);\n    }\n\n    @include for-tablet-landscape-down {\n        a::after {\n            right: auto;\n            bottom: 0;\n            width: var(--wcs-nav-item-indicator-width-mobile);\n            height: var(--wcs-nav-item-indicator-height-mobile);\n            border-radius: var(--wcs-nav-item-indicator-border-radius-mobile);\n        }\n    }\n}\n","import { Element, Component, ComponentInterface, h, Listen, Host } from '@stencil/core';\nimport { isEnterKey } from \"../../utils/helpers\";\n\n/**\n * The nav-item component is a subcomponent of `wcs-nav` and should always be used inside it.  \n * They contain links to navigate to other pages of the website.\n * \n * @cssprop --wcs-nav-item-font-weight - Font weight of the nav item\n * \n * @cssprop --wcs-nav-item-height-desktop - Height of the nav item on desktop\n * @cssprop --wcs-nav-item-height-mobile - Height of the nav item on mobile\n * @cssprop --wcs-nav-item-gap-desktop - Gap between items in nav-item on desktop (e.g. icon and label)\n * @cssprop --wcs-nav-item-gap-mobile - Gap between items in nav-item on mobile (e.g. icon and label)\n * \n * \n * @cssprop --wcs-nav-item-font-size-desktop - Font size of the nav item on desktop\n * @cssprop --wcs-nav-item-font-size-mobile - Font size of the nav item on mobile\n * \n * @cssprop --wcs-nav-item-background-color-default - Default background color of the nav item\n * @cssprop --wcs-nav-item-background-color-hover - Background color of the nav item when hovered\n * @cssprop --wcs-nav-item-background-color-press - Background color of the nav item when pressed\n * @cssprop --wcs-nav-item-background-color-active - Background color of the nav item when active\n * \n * @cssprop --wcs-nav-item-color-default - Color of the nav item when default\n * @cssprop --wcs-nav-item-color-active - Color of the nav item when active\n * @cssprop --wcs-nav-item-color-hover - Color of the nav item when hovered\n * @cssprop --wcs-nav-item-color-press - Color of the nav item when pressed\n * \n * @cssprop --wcs-nav-item-border-color-focus - Border color of the nav item when focused\n * @cssprop --wcs-nav-item-border-width-focus - Border width of the nav item when focused\n * \n * @cssprop --wcs-nav-item-indicator-background-color - Background color of the nav item indicator\n * @cssprop --wcs-nav-item-indicator-width-desktop - Width of the nav item indicator on desktop\n * @cssprop --wcs-nav-item-indicator-width-mobile - Width of the nav item indicator on mobile\n * @cssprop --wcs-nav-item-indicator-height-desktop - Height of the nav item indicator on desktop\n * @cssprop --wcs-nav-item-indicator-height-mobile - Height of the nav item indicator on mobile\n * @cssprop --wcs-nav-item-indicator-border-radius-desktop - Border radius of the nav item indicator on desktop\n * @cssprop --wcs-nav-item-indicator-border-radius-mobile - Border radius of the nav item indicator on mobile\n * \n * @cssprop --wcs-nav-item-transition-duration - Transition duration of the nav item\n */\n@Component({\n    tag: 'wcs-nav-item',\n    styleUrl: 'nav-item.scss'\n})\nexport class NavItem implements ComponentInterface {\n    @Element() private el: HTMLElement;\n    \n    @Listen('keydown')\n    onKeyDown(_event: KeyboardEvent) {\n        if (isEnterKey(_event)) {\n            this.el.click();\n        }\n    }\n\n    render() {\n        return (\n            <Host role=\"listitem\">\n                <slot/>\n            </Host>\n        );\n    }\n}\n"],"mappings":"6FAAA,MAAMA,EAAa,w7LACnB,MAAAC,EAAeD,E,MC4CFE,EAAO,M,yBAIhB,SAAAC,CAAUC,GACN,GAAIC,EAAWD,GAAS,CACpBE,KAAKC,GAAGC,O,EAIhB,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,YACPH,EAAA,QAAAE,IAAA,6C"}

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-1e5aa960.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 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:"e75a5557308e593cd9372a408f2fbacdbc246567"},e("slot",{key:"ae222ab991d7e1a3f174064a4d64abdfb1f446e8",name:"icon"}),e("div",{key:"723cdff320aba9e2e9261187a8daa6653692dbbc",class:"content"},e("div",{key:"d99bec4b10581d94ab91209411af4bc16aefbe89",class:"header"},e("div",{key:"2addbe14990ed7129a6dd91b663dc2c44fc1be9f"},e("slot",{key:"ca003d5854722825677b29de6356c700c754e9fe",name:"title"}),e("slot",{key:"2bec2ea9dfef61f5d24194900e5304c7ef4dbe42",name:"properties"})),e("slot",{key:"f26bee976fefd75b494c861255d11c301dcab9a4",name:"actions"})),e("slot",{key:"2f5201aa33857b078724f8552dbf4bfcf6f350ed",name:"description"})))}};s.style=a;export{s as wcs_list_item};
-//# sourceMappingURL=p-1e5aa960.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-e56b9ce2.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["listItemCss","WcsListItemStyle0","ListItem","render","h","Host","key","name","class"],"sources":["src/components/list-item/list-item.scss?tag=wcs-list-item&encapsulation=shadow","src/components/list-item/list-item.tsx"],"sourcesContent":[":host {\n    --wcs-list-item-padding: var(--wcs-semantic-spacing-large);\n    --wcs-list-item-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-list-item-border-color: var(--wcs-semantic-color-border-secondary);\n\n    --wcs-list-item-background-color-default: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-list-item-background-color-hover: var(--wcs-semantic-color-background-action-secondary-hover);\n    --wcs-list-item-background-color-active: var(--wcs-semantic-color-background-action-secondary-selected-default);\n    --wcs-list-item-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    --wcs-list-item-title-color: var(--wcs-semantic-color-text-primary);\n    --wcs-list-item-title-font-weight: var(--wcs-semantic-font-weight-heavy);\n    --wcs-list-item-title-line-height: var(--wcs-semantic-font-line-height-medium);\n    --wcs-list-item-title-margin-bottom: var(--wcs-semantic-spacing-base);\n\n    --wcs-list-item-icon-color: var(--wcs-semantic-color-text-secondary);\n    --wcs-list-item-icon-margin-right: var(--wcs-semantic-spacing-large);\n\n    --wcs-list-item-actions-margin-left: var(--wcs-semantic-spacing-base);\n\n\n    display: flex;\n    padding: var(--wcs-list-item-padding);\n    border: solid var(--wcs-list-item-border-width) var(--wcs-list-item-border-color);\n    margin-bottom: calc(-1 * var(--wcs-list-item-border-width));\n    background-color: var(--wcs-list-item-background-color-default);\n}\n\n:host(:hover) {\n    background-color: var(--wcs-list-item-background-color-hover);\n    transition: var(--wcs-list-item-transition-duration);\n}\n\n:host([activated]) {\n    background-color: var(--wcs-list-item-background-color-active);\n}\n\n::slotted([slot=title]) {\n    color: var(--wcs-list-item-title-color);\n    margin-bottom: var(--wcs-list-item-title-margin-bottom);\n    line-height: var(--wcs-list-item-title-line-height);\n    font-weight: var(--wcs-list-item-title-font-weight);\n    font-family: inherit;\n}\n\n::slotted([slot=icon]) {\n    color: var(--wcs-list-item-icon-color);\n    margin-right: var(--wcs-list-item-icon-margin-right);\n}\n\n::slotted([slot=actions]) {\n    margin-left: var(--wcs-list-item-actions-margin-left);\n}\n\n.content {\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n}\n\n.header {\n    display: flex;\n    justify-content: space-between;\n}\n","import { Component, ComponentInterface, h, Host, Prop } from '@stencil/core';\n\n/**\n * Lists are used for grouping a collection of related items.\n * \n * Standard lists can be used either with or without icons. Depending on the context, the list can have one or more\n * actions (favourite, download, delete, etc.). Use standard lists with a unique action when each line has an action. \n * \n * ## Accessibility guidelines 💡\n * > - You should wrap your list-items inside a container with a `role` attribute set to `list`. On each `wcs-list-item`, \n *   you should set a `role` attribute to `listitem`. See the code below.\n * actions (favourite, download, delete, etc.). Use standard lists with a unique action when each line has an action.\n *\n * @slot title - Slot containing the title of the list item\n * @slot properties - Slot containing the `<wcs-list-item-properties>` element\n * @slot actions - Slot containing the actions of the list item, prefer using some `<wcs-button>` inside\n * @slot description - Slot containing the description of the list item\n * \n * @cssprop --wcs-list-item-padding - Padding of the list item\n * @cssprop --wcs-list-item-border-width - Border width of the list item\n * @cssprop --wcs-list-item-border-color - Border color of the list item\n * @cssprop --wcs-list-item-background-color-default - Background color of the list item\n * @cssprop --wcs-list-item-background-color-hover - Background color of the list item when hovered\n * @cssprop --wcs-list-item-background-color-active - Background color of the list item when active\n * @cssprop --wcs-list-item-transition-duration - Transition duration of the list item\n * @cssprop --wcs-list-item-title-color - Color of the title of the list item\n * @cssprop --wcs-list-item-title-font-weight - Font weight of the title of the list item\n * @cssprop --wcs-list-item-title-line-height - Line height of the title of the list item\n * @cssprop --wcs-list-item-title-margin-bottom - Margin bottom of the title of the list item\n * @cssprop --wcs-list-item-icon-color - Color of the icon of the list item\n * @cssprop --wcs-list-item-icon-margin-right - Margin right of the icon of the list item\n * @cssprop --wcs-list-item-actions-margin-left - Margin left of the actions of the list item\n */\n@Component({\n    tag: 'wcs-list-item',\n    styleUrl: 'list-item.scss',\n    shadow: true\n})\nexport class ListItem implements ComponentInterface {\n    /**\n     * True if the item is active. Adds a background color that highlights it.\n     */\n    @Prop({ reflect: true, mutable: true }) activated: boolean = false;\n\n    render() {\n        return (\n            <Host>\n                <slot name=\"icon\"/>\n                <div class=\"content\">\n                    <div class=\"header\">\n                        <div>\n                            <slot name=\"title\"/>\n                            <slot name=\"properties\"/>\n                        </div>\n                        <slot name=\"actions\"/>\n                    </div>\n                    <slot name=\"description\"/>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"mappings":"kDAAA,MAAMA,EAAc,mjEACpB,MAAAC,EAAeD,E,MCqCFE,EAAQ,M,wCAI4C,K,CAE7D,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,4CACDF,EAAA,QAAAE,IAAA,2CAAMC,KAAK,SACXH,EAAA,OAAAE,IAAA,2CAAKE,MAAM,WACPJ,EAAA,OAAAE,IAAA,2CAAKE,MAAM,UACPJ,EAAA,OAAAE,IAAA,4CACIF,EAAA,QAAAE,IAAA,2CAAMC,KAAK,UACXH,EAAA,QAAAE,IAAA,2CAAMC,KAAK,gBAEfH,EAAA,QAAAE,IAAA,2CAAMC,KAAK,aAEfH,EAAA,QAAAE,IAAA,2CAAMC,KAAK,iB"}

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-db81b74f.entry.js → p-fd187bce.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as o,h as i,H as t}from"./p-32e583ea.js";const n=":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 :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=n;const s=class{constructor(i){e(this,i);this.wcsClickOnFinalAction=o(this,"wcsClickOnFinalAction",7)}onClick(){this.wcsClickOnFinalAction.emit()}render(){return i(t,{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-db81b74f.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-fd187bce.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["comNavItemCss","WcsComNavItemStyle0","ComNavItem","onClick","this","wcsClickOnFinalAction","emit","render","h","Host","key","role","class"],"sources":["src/components/com-nav-item/com-nav-item.scss?tag=wcs-com-nav-item&encapsulation=shadow","src/components/com-nav-item/com-nav-item.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n@import '../com-nav/com-nav-focus.scss';\n\n/* Default style and mobile behaviour */\n:host {\n    --wcs-com-nav-item-gap: var(--wcs-semantic-spacing-base);\n    --wcs-com-nav-item-font-size: var(--wcs-semantic-font-size-label-1);\n    --wcs-com-nav-item-arrow-icon-color: var(--wcs-semantic-color-foreground-action-neutral-default);\n    --wcs-com-nav-item-arrow-icon-font-size: 0.6rem;\n    --wcs-com-nav-item-arrow-icon-font-family: icons;\n    --wcs-com-nav-item-arrow-icon-line-height: 1;\n\n    --wcs-com-nav-item-focus-outline-color: var(--wcs-semantic-color-border-focus-base);\n\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    gap: var(--wcs-com-nav-item-gap);\n    height: fit-content;\n    padding: 0 8px;\n\n    font: inherit;\n\n    ::slotted(a) {\n        /* Default */\n        user-select: none;\n        cursor: pointer;\n        text-decoration: none;\n        font-size: var(--wcs-com-nav-item-font-size);\n        color: inherit;\n        font-weight: inherit;\n\n        display: flex;\n        align-items: center;\n    }\n\n    /* Common behaviour between Large Screen and Small Screens */\n    .arrow-icon {\n        display: inline-block;\n        font-family: icons;\n        color: var(--wcs-com-nav-item-arrow-icon-color);\n        font-size: var(--wcs-com-nav-item-arrow-icon-font-size);\n        line-height: var(--wcs-com-nav-item-arrow-icon-line-height);\n        box-sizing: border-box;\n    }\n\n    .arrow-container {\n        display: unset;\n    }\n\n    /**For mobile*/\n    ::slotted(a:focus-visible) {\n        outline: none;\n    }\n}\n\n:host(:focus-within) {\n    @include com-nav-item-mobile-focus-outline(var(--wcs-com-nav-item-focus-outline-color));\n}\n\n/* Large screen, specific behaviour */\n@media screen and (min-width: 576px) {\n    :host {\n        ::slotted(a) {\n            display: flex;\n            align-items: center;\n            height: 100%;\n\n            /* Reset for pc */\n            padding-top: unset;\n            padding-bottom: unset;\n            padding-left: unset;\n        }\n\n        // Focus outline style is handling by com-nav, com-nav-submenu and com-nav-category in desktop mode\n    }\n}\n","import { Component, Host, h, Event, EventEmitter, Listen } from '@stencil/core';\n\n/**\n * The com-nav-item is a subcomponent of `wcs-com-nav`. It represents a list-item wrapper around a link.\n * \n * @cssprop --wcs-com-nav-item-gap - Gap between text and arrow\n * @cssprop --wcs-com-nav-item-font-weight - Font-weight of item\n * @cssprop --wcs-com-nav-item-arrow-icon-font-size - Arrow size\n * @cssprop --wcs-com-nav-item-focus-outline-color - Focus outline color\n */\n@Component({\n    tag: 'wcs-com-nav-item',\n    styleUrl: './com-nav-item.scss',\n    shadow: true\n})\nexport class ComNavItem {\n    /**\n     * Emitted when a user click on a final navigation action.\n     *\n     * Used by the com-nav component to close the mobile menu overlay when a user click on a final action.\n     */\n    @Event() private wcsClickOnFinalAction: EventEmitter<void>;\n    \n    @Listen('click')\n    onClick() {\n        this.wcsClickOnFinalAction.emit();\n    }\n    \n    render() {\n        return (\n            <Host role=\"listitem\">\n                <slot></slot>\n                <span class=\"arrow-container\">\n                        <span aria-hidden=\"true\" class=\"arrow-icon\">&#xf107;</span>\n                </span>\n            </Host>\n        );\n    }\n\n}\n"],"mappings":"yDAAA,MAAMA,EAAgB,i4CACtB,MAAAC,EAAeD,E,MCcFE,EAAU,M,sFASnB,OAAAC,GACIC,KAAKC,sBAAsBC,M,CAG/B,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,YACPH,EAAA,QAAAE,IAAA,6CACAF,EAAA,QAAAE,IAAA,2CAAME,MAAM,mBACJJ,EAAA,QAAAE,IAAA,yDAAkB,OAAOE,MAAM,cAAY,M"}

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

@@ -0,0 +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 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/p-fdeae83e.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["radioGroupCss","WcsRadioGroupStyle0","RadioGroup","onValueChangeHandler","value","this","updateRadioTabIndex","updateAllRadioState","setAriaAttribute","attr","setOrRemoveAttribute","el","componentDidLoad","updateAllRadioModeAndName","onSlotChange","getSlottedRadios","forEach","r","updateState","mode","name","radios","first","find","radio","disabled","checked","focusable","tabindex","setTabIndex","Array","from","querySelectorAll","getSlottedRadiosNotDisabled","filter","handleRadioClick","event","detail","wcsChange","emit","handleKeyDown","ev","radiosNotDisabled","previousSelected","findIndex","target","indexToSelect","isSpaceKey","isEnterKey","preventDefault","isDownArrowKey","isRightArrowKey","length","isUpArrowKey","isLeftArrowKey","isTabKey","radioToSelect","focus","render","h","Host","key","role","onSlotchange","bind"],"sources":["src/components/radio-group/radio-group.scss?tag=wcs-radio-group&encapsulation=shadow","src/components/radio-group/radio-group.tsx"],"sourcesContent":[":host {\n    display: flex;\n\n    // region Radio\n    --wcs-radio-group-gap: var(--wcs-semantic-spacing-base);\n    // endregion\n\n    // region Option\n    --wcs-radio-group-option-height: var(--wcs-semantic-size-m);\n    --wcs-radio-group-option-gap: var(--wcs-semantic-spacing-small);\n    --wcs-radio-group-option-padding: var(--wcs-semantic-spacing-small) var(--wcs-semantic-spacing-small);\n    --wcs-radio-group-option-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-radio-group-option-background-color: var(--wcs-semantic-color-background-surface-accent-lightest);\n    // endregion\n}\n\n:host([mode=radio]) {\n    flex-direction: column;\n    gap: var(--wcs-radio-group-gap);\n}\n\n:host([mode=option]) {\n    box-sizing: border-box;\n    height: var(--wcs-radio-group-option-height);\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--wcs-radio-group-option-gap);\n    padding: var(--wcs-radio-group-option-padding);\n    background-color: var(--wcs-radio-group-option-background-color);\n    border-radius: var(--wcs-radio-group-option-border-radius);\n}\n\n:host([mode=horizontal]) {\n    justify-content: space-between;\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen,\n    Method,\n    Prop,\n    Watch\n} from '@stencil/core';\nimport { RadioGroupChangeEventDetail, RadioGroupMode } from './radio-group-interface';\nimport { RadioChosedEvent } from '../radio/radio-interface';\nimport {\n    isDownArrowKey, isEnterKey,\n    isLeftArrowKey,\n    isRightArrowKey,\n    isSpaceKey,\n    isTabKey,\n    isUpArrowKey,\n    setOrRemoveAttribute\n} from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from '../../utils/mutable-aria-attribute';\n\n/**\n * @cssprop --wcs-radio-group-gap - Gap between each radio (checkmark + label) in horizontal mode\n * \n *\n * @cssprop --wcs-radio-group-option-background-color - Background color of the radio group option\n * \n * @cssprop --wcs-radio-group-option-height - Height of the radio group option\n * @cssprop --wcs-radio-group-option-padding - Padding of the radio group option\n *  \n * @cssprop --wcs-radio-group-option-border-radius - Border radius of the radio group option\n * \n * @cssprop --wcs-radio-group-option-gap - Gap between each radio option\n */\n@Component({\n    tag: 'wcs-radio-group',\n    styleUrl: 'radio-group.scss',\n    shadow: true\n})\nexport class RadioGroup implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLWcsRadioGroupElement;\n    \n    /**\n     * The value of the radio-group. Automatically reflects which radio button is selected.\n     */\n    @Prop({ mutable: true }) value: any | any[] | undefined | null;\n\n    /**\n     * The name of the control to be set on all radio button children\n     */\n    @Prop({ reflect: true }) name;\n\n    /**\n     * The display mode of the control to be set on all radio button children\n     */\n    @Prop({ reflect: true }) mode: RadioGroupMode = 'radio';\n\n    /** Emitted when the value has changed. */\n    @Event() wcsChange!: EventEmitter<RadioGroupChangeEventDetail>;\n\n    @Watch('value')\n    onValueChangeHandler(value: any | undefined) {\n        this.updateRadioTabIndex(value);\n        this.updateAllRadioState();\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.el, attr, value);\n    }\n\n    componentDidLoad() {\n       this.onValueChangeHandler(this.value);\n       this.updateAllRadioModeAndName();\n    }\n    \n    onSlotChange() {\n        this.updateRadioTabIndex(this.value);\n        this.updateAllRadioModeAndName();\n    }\n    \n    updateAllRadioState() {\n        this.getSlottedRadios().forEach(r => r.updateState());\n    }\n    \n    @Watch('name')\n    @Watch('mode')\n    updateAllRadioModeAndName() {\n        this.getSlottedRadios().forEach(r => {\n            r.mode = this.mode;\n            r.name = this.name;\n        });\n    }\n    \n    updateRadioTabIndex(value: any | undefined) {\n        const radios = this.getSlottedRadios();\n\n        // Get the first radio that is not disabled and the checked one\n        const first = radios.find((radio) => !radio.disabled);\n        const checked = radios.find((radio) => radio.value === value && !radio.disabled);\n\n        if (!first && !checked) {\n            return;\n        }\n\n        // If an enabled checked radio exists, set it to be the focusable radio\n        // otherwise we default to focus the first radio\n        const focusable = checked || first;\n\n        for (const radio of radios) {\n            const tabindex = radio === focusable ? 0 : -1;\n            radio.setTabIndex(tabindex);\n        }\n    }\n\n    private getSlottedRadios(): HTMLWcsRadioElement[] {\n        return Array.from(this.el.querySelectorAll('wcs-radio'));\n    }\n\n    private getSlottedRadiosNotDisabled(): HTMLWcsRadioElement[] {\n        return Array.from(this.getSlottedRadios().filter(radio => !radio.disabled));\n    }\n\n    @Listen('wcsRadioClick')\n    handleRadioClick(event: CustomEvent<RadioChosedEvent>) {\n        this.value = event.detail.value;\n        this.wcsChange.emit({\n            value: event.detail.value\n        });\n    }\n\n    @Listen('keydown')\n    async handleKeyDown(ev: KeyboardEvent) {\n        const radiosNotDisabled = this.getSlottedRadiosNotDisabled();\n        const previousSelected = radiosNotDisabled.findIndex(r => r === ev.target);\n        let indexToSelect: number;\n\n        if ((isSpaceKey(ev) || isEnterKey(ev))) {\n            ev.preventDefault();\n            indexToSelect = previousSelected;\n        } else if (isDownArrowKey(ev) || isRightArrowKey(ev)) {\n            ev.preventDefault();\n            // Check the next wcs-radio from the previous selected\n            indexToSelect = (previousSelected + 1) % radiosNotDisabled.length;  // to return at the beginning on the list when we are on the last index\n        } else if (isUpArrowKey(ev) || isLeftArrowKey(ev)) {\n            ev.preventDefault();\n            // Check the previous wcs-radio from the previous selected\n            indexToSelect = (previousSelected - 1 + radiosNotDisabled.length) % radiosNotDisabled.length; // To return at the end of the list when we are on index=0\n        } else if (isTabKey(ev)) {\n            return;\n        }\n        \n        const radioToSelect = radiosNotDisabled[indexToSelect]\n        if (radioToSelect) {\n            radioToSelect.focus();\n            \n            if (this.value !== radioToSelect.value) {\n                this.wcsChange.emit({\n                    value: radioToSelect.value\n                })\n            }\n            \n            this.value = radioToSelect.value;\n        }\n    }\n\n    render() {\n        return (\n            <Host role=\"radiogroup\">\n                <slot name=\"option\" onSlotchange={this.onSlotChange.bind(this)}/>\n            </Host>\n        );\n    }\n\n}\n"],"mappings":"qJAAA,MAAMA,EAAgB,g8BACtB,MAAAC,EAAeD,E,MC2CFE,EAAU,M,iHAgB6B,O,CAMhD,oBAAAC,CAAqBC,GACjBC,KAAKC,oBAAoBF,GACzBC,KAAKE,qB,CAIT,sBAAMC,CAAiBC,EAAyBL,GAC5CM,EAAqBL,KAAKM,GAAIF,EAAML,E,CAGxC,gBAAAQ,GACGP,KAAKF,qBAAqBE,KAAKD,OAC/BC,KAAKQ,2B,CAGR,YAAAC,GACIT,KAAKC,oBAAoBD,KAAKD,OAC9BC,KAAKQ,2B,CAGT,mBAAAN,GACIF,KAAKU,mBAAmBC,SAAQC,GAAKA,EAAEC,e,CAK3C,yBAAAL,GACIR,KAAKU,mBAAmBC,SAAQC,IAC5BA,EAAEE,KAAOd,KAAKc,KACdF,EAAEG,KAAOf,KAAKe,IAAI,G,CAI1B,mBAAAd,CAAoBF,GAChB,MAAMiB,EAAShB,KAAKU,mBAGpB,MAAMO,EAAQD,EAAOE,MAAMC,IAAWA,EAAMC,WAC5C,MAAMC,EAAUL,EAAOE,MAAMC,GAAUA,EAAMpB,QAAUA,IAAUoB,EAAMC,WAEvE,IAAKH,IAAUI,EAAS,CACpB,M,CAKJ,MAAMC,EAAYD,GAAWJ,EAE7B,IAAK,MAAME,KAASH,EAAQ,CACxB,MAAMO,EAAWJ,IAAUG,EAAY,GAAK,EAC5CH,EAAMK,YAAYD,E,EAIlB,gBAAAb,GACJ,OAAOe,MAAMC,KAAK1B,KAAKM,GAAGqB,iBAAiB,a,CAGvC,2BAAAC,GACJ,OAAOH,MAAMC,KAAK1B,KAAKU,mBAAmBmB,QAAOV,IAAUA,EAAMC,W,CAIrE,gBAAAU,CAAiBC,GACb/B,KAAKD,MAAQgC,EAAMC,OAAOjC,MAC1BC,KAAKiC,UAAUC,KAAK,CAChBnC,MAAOgC,EAAMC,OAAOjC,O,CAK5B,mBAAMoC,CAAcC,GAChB,MAAMC,EAAoBrC,KAAK4B,8BAC/B,MAAMU,EAAmBD,EAAkBE,WAAU3B,GAAKA,IAAMwB,EAAGI,SACnE,IAAIC,EAEJ,GAAKC,EAAWN,IAAOO,EAAWP,GAAM,CACpCA,EAAGQ,iBACHH,EAAgBH,C,MACb,GAAIO,EAAeT,IAAOU,EAAgBV,GAAK,CAClDA,EAAGQ,iBAEHH,GAAiBH,EAAmB,GAAKD,EAAkBU,M,MACxD,GAAIC,EAAaZ,IAAOa,EAAeb,GAAK,CAC/CA,EAAGQ,iBAEHH,GAAiBH,EAAmB,EAAID,EAAkBU,QAAUV,EAAkBU,M,MACnF,GAAIG,EAASd,GAAK,CACrB,M,CAGJ,MAAMe,EAAgBd,EAAkBI,GACxC,GAAIU,EAAe,CACfA,EAAcC,QAEd,GAAIpD,KAAKD,QAAUoD,EAAcpD,MAAO,CACpCC,KAAKiC,UAAUC,KAAK,CAChBnC,MAAOoD,EAAcpD,O,CAI7BC,KAAKD,MAAQoD,EAAcpD,K,EAInC,MAAAsD,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,cACPH,EAAA,QAAAE,IAAA,2CAAMzC,KAAK,SAAS2C,aAAc1D,KAAKS,aAAakD,KAAK3D,Q"}

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-f264d46f",[[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-dbbf0980",[[1,"wcs-editable-field",{"type":[1],"label":[1],"readonly":[4],"value":[1032],"validateFn":[16],"formatFn":[16],"errorMsg":[1,"error-msg"],"size":[513],"currentState":[32],"isError":[32]},[[8,"click","onWindowClickEvent"]],{"value":["onValueChange"]}]]],["p-d2a4f609",[[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-2305f257",[[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-985c4cf2",[[17,"wcs-counter",{"size":[513],"label":[1],"disabled":[4],"min":[1026],"max":[1026],"step":[1026],"value":[1026],"displayedValue":[32],"setAriaAttribute":[64]},null,{"value":["valueChange"]}]]],["p-97cbbcfc",[[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-08e86d69",[[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"],"setAriaAttribute":[64]},[[4,"keydown","onKeyDown"]],{"show":["onShowChange"]}]]],["p-94ff8939",[[17,"wcs-dropdown",{"noArrow":[4,"no-arrow"],"mode":[1],"shape":[1],"size":[1],"disabled":[4],"placement":[1],"expanded":[32],"setAriaAttribute":[64]},[[0,"blur","onBlur"],[8,"click","onWindowClickEvent"],[0,"wcsDropdownItemClick","dropdownItemClick"],[0,"keydown","onKeyDown"]],{"placement":["placementChange"]}]]],["p-8780a429",[[1,"wcs-galactic-menu",{"text":[1],"showPopoverMenu":[32],"setAriaAttribute":[64]},[[8,"click","onWindowClickEvent"],[0,"keydown","onKeyDown"]]]]],["p-52cd0abb",[[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":[4],"enterkeyhint":[1],"size":[513],"icon":[1],"inputmode":[1],"max":[1],"maxlength":[2],"min":[1],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"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-85a5bbb7",[[17,"wcs-textarea",{"fireFocusEvents":[4,"fire-focus-events"],"autocapitalize":[1],"autofocus":[4],"debounce":[2],"disabled":[4],"icon":[1],"inputmode":[1],"enterkeyhint":[1],"maxlength":[2],"minlength":[2],"name":[1],"placeholder":[1],"readonly":[4],"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-209145de",[[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-9553d60e",[[1,"wcs-action-bar",{"gutter":[4],"hasTabs":[32]}]]],["p-e5c057c4",[[1,"wcs-app"]]],["p-e86575d3",[[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-87b69cac",[[1,"wcs-com-nav",{"appName":[1,"app-name"],"mobileMenuOpen":[32],"currentActiveSizing":[32],"setAriaAttribute":[64]},[[0,"wcsClickOnFinalAction","onClickOnFinalAction"],[8,"keydown","exitMobileMenuOnKeyDown"]]]]],["p-f8d2be83",[[1,"wcs-com-nav-category",{"label":[1],"categoryOpen":[32],"currentActiveSizing":[32],"setAriaAttribute":[64],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsCategoryOpened","onSubmenuOpened"]]]]],["p-db81b74f",[[1,"wcs-com-nav-item",null,[[0,"click","onClick"]]]]],["p-2c9e20c1",[[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-8f0e093f",[[4,"wcs-dropdown-item",null,[[1,"mouseup","onMouseUp"],[0,"keydown","onKeyDown"]]]]],["p-4982f96c",[[1,"wcs-field"]]],["p-5f517eb5",[[1,"wcs-field-content"]]],["p-19c77b5c",[[1,"wcs-field-label"]]],["p-25b96cde",[[1,"wcs-footer"]]],["p-5ea2aba5",[[1,"wcs-galactic",{"text":[1],"show":[32]}]]],["p-80a23f9c",[[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":[4],"cursorPosition":[16],"columnPosition":[2,"column-position"],"setAriaAttribute":[64]},null,{"hidden":["parseMyObjectProp"],"sortOrder":["sortOrderChange"]}]]],["p-400a71d7",[[1,"wcs-grid-custom-cell",{"columnId":[1,"column-id"],"rowId":[8,"row-id"]}]]],["p-76f07dbd",[[1,"wcs-header",{"setAriaAttribute":[64]}]]],["p-a788b5bd",[[1,"wcs-hint",{"small":[1540]}]]],["p-806315e6",[[0,"wcs-icon",{"icon":[1],"size":[1],"setAriaAttribute":[64]}]]],["p-d42831b2",[[1,"wcs-label",{"required":[516],"setAriaAttribute":[64]}]]],["p-1e5aa960",[[1,"wcs-list-item",{"activated":[1028]}]]],["p-e19308cf",[[1,"wcs-list-item-properties"]]],["p-e64d7437",[[1,"wcs-list-item-property"]]],["p-8bd1b9ce",[[1,"wcs-native-select",{"size":[513],"required":[4],"expanded":[32],"disabled":[32],"setAriaAttribute":[64],"updateStyles":[64]},null,{"required":["requiredChanged"]}]]],["p-2add4d4d",[[1,"wcs-nav",{"setAriaAttribute":[64]}]]],["p-4ca7c59f",[[4,"wcs-nav-item",null,[[0,"keydown","onKeyDown"]]]]],["p-15ff9f93",[[1,"wcs-progress-radial",{"size":[2],"showLabel":[4,"show-label"],"value":[2],"setAriaAttribute":[64]}]]],["p-f06aa79d",[[17,"wcs-radio",{"value":[1544],"label":[1537],"disabled":[1028],"name":[1025],"mode":[513],"checked":[32],"radioTabIndex":[32],"updateState":[64],"setTabIndex":[64],"setAriaAttribute":[64]}]]],["p-0fdaec9e",[[1,"wcs-radio-group",{"value":[1032],"name":[520],"mode":[513]},[[0,"wcsRadioClick","handleRadioClick"],[0,"keydown","handleKeyDown"]],{"value":["onValueChangeHandler"],"name":["updateAllRadioModeAndName"],"mode":["updateAllRadioModeAndName"]}]]],["p-45a6934d",[[1,"wcs-skeleton-circle",{"animation":[513],"radius":[514]}]]],["p-9e03b379",[[1,"wcs-skeleton-rectangle",{"animation":[513],"rounded":[516],"height":[513],"width":[513]}]]],["p-b0f8190f",[[1,"wcs-skeleton-text",{"animation":[513],"height":[1]}]]],["p-fd9e731d",[[17,"wcs-switch",{"name":[1],"checked":[516],"labelAlignment":[513,"label-alignment"],"disabled":[4],"setAriaAttribute":[64]},[[0,"click","handleHostClick"]]]]],["p-a66a4289",[[1,"wcs-tab",{"header":[513],"itemKey":[8,"item-key"]}]]],["p-1ab0d13b",[[1,"wcs-tabs",{"align":[513],"selectedIndex":[2,"selected-index"],"selectedKey":[8,"selected-key"],"headersOnly":[4,"headers-only"],"gutter":[4],"description":[1],"headers":[32],"currentActiveTabIndex":[32],"setAriaAttribute":[64]},[[0,"tabLoaded","onTabLoaded"]],{"selectedIndex":["selectedIndexChanged"],"selectedKey":["selectedTabkeyChanged"]}]]],["p-0fa370d7",[[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-9f23c49e",[[1,"wcs-progress-bar",{"size":[1],"showLabel":[4,"show-label"],"value":[2],"setAriaAttribute":[64]}]]],["p-09d0a296",[[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":[1028],"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-bf31245c",[[1,"wcs-error"],[1,"wcs-form-field",{"isError":[1540,"is-error"],"hasPrefix":[32],"hasSuffix":[32],"spiedElement":[32]},null,{"isError":["isErrorChange"]}]]],["p-cd592a00",[[17,"wcs-checkbox",{"name":[1],"indeterminate":[1540],"checked":[1540],"labelAlignment":[1537,"label-alignment"],"disabled":[516],"setAriaAttribute":[64]},[[0,"click","handleHostClick"]]]]],["p-fa507e06",[[1,"wcs-mat-icon",{"icon":[1],"size":[1],"family":[1],"setAriaAttribute":[64]}]]],["p-276b8125",[[17,"wcs-button",{"type":[1025],"href":[1],"target":[1],"disabled":[516],"ripple":[4],"size":[513],"shape":[513],"mode":[513],"loading":[1028],"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,wzWAAuCJ,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.0.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-2c752b22.js.map

@@ -1 +0,0 @@
-{"file":"grid-pagination-2c752b22.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/cjs/helpers-871f5a3d.js.map

@@ -1 +0,0 @@
-{"file":"helpers-871f5a3d.js","mappings":"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","names":[],"sources":["src/utils/helpers.ts"],"sourcesContent":["import { EventEmitter } from '@stencil/core';\n\nexport function isElement(element: any): element is Element {\n    return 'clientWidth' in element\n        && 'clientHeight' in element;\n}\n\nexport function hasShadowDom(el: HTMLElement) {\n    return !!el.shadowRoot && !!(el as any).attachShadow;\n}\n\nexport const debounceEvent = (event: EventEmitter, wait: number): EventEmitter => {\n    const original = (event as any)._original || event;\n    return {\n        _original: event,\n        emit: debounce(original.emit.bind(original), wait)\n    } as EventEmitter;\n};\n\nexport const debounce = (func: (...args: any[]) => void, wait = 0) => {\n    let timer: any;\n    return (...args: any[]): any => {\n        clearTimeout(timer);\n        timer = setTimeout(func, wait, ...args);\n    };\n};\n\n/**\n * Elements inside of web components sometimes need to inherit global attributes\n * set on the host. For example, the inner input in `wcs-input` should inherit\n * the `title` attribute that developers set directly on `wcs-input`. This\n * helper function should be called in componentWillLoad and assigned to a variable\n * that is later used in the render function.\n *\n * This does not need to be reactive as changing attributes on the host element\n * does not trigger a re-render.\n */\nexport const inheritAttributes = (el: HTMLElement, attributes: string[] = []) => {\n    const attributeObject: { [k: string]: any } = {};\n\n    attributes.forEach(attr => {\n        if (el.hasAttribute(attr)) {\n            const value = el.getAttribute(attr);\n            if (value !== null) {\n                attributeObject[attr] = el.getAttribute(attr);\n            }\n            el.removeAttribute(attr);\n        }\n    });\n\n    return attributeObject;\n}\n\n/**\n * List of available ARIA attributes + `role`.\n * Removed deprecated attributes.\n * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes\n */\nconst ariaAttributes = [\n    'role',\n    'aria-activedescendant',\n    'aria-atomic',\n    'aria-autocomplete',\n    'aria-braillelabel',\n    'aria-brailleroledescription',\n    'aria-busy',\n    'aria-checked',\n    'aria-colcount',\n    'aria-colindex',\n    'aria-colindextext',\n    'aria-colspan',\n    'aria-controls',\n    'aria-current',\n    'aria-describedby',\n    'aria-description',\n    'aria-details',\n    'aria-disabled',\n    'aria-errormessage',\n    'aria-expanded',\n    'aria-flowto',\n    'aria-haspopup',\n    'aria-hidden',\n    'aria-invalid',\n    'aria-keyshortcuts',\n    'aria-label',\n    'aria-labelledby',\n    'aria-level',\n    'aria-live',\n    'aria-multiline',\n    'aria-multiselectable',\n    'aria-orientation',\n    'aria-owns',\n    'aria-placeholder',\n    'aria-posinset',\n    'aria-pressed',\n    'aria-readonly',\n    'aria-relevant',\n    'aria-required',\n    'aria-roledescription',\n    'aria-rowcount',\n    'aria-rowindex',\n    'aria-rowindextext',\n    'aria-rowspan',\n    'aria-selected',\n    'aria-setsize',\n    'aria-sort',\n    'aria-valuemax',\n    'aria-valuemin',\n    'aria-valuenow',\n    'aria-valuetext',\n];\n\n/**\n * Returns an array of aria attributes that should be copied from\n * the shadow host element to a target within the light DOM.\n * @param el The element that the attributes should be copied from.\n * @param ignoreList The list of aria-attributes to ignore reflecting and removing from the host.\n * Use this in instances where we manually specify aria attributes on the `<Host>` element.\n */\nexport const inheritAriaAttributes = (el: HTMLElement, ignoreList?: string[]) => {\n    let attributesToInherit = ariaAttributes;\n    if (ignoreList && ignoreList.length > 0) {\n        attributesToInherit = attributesToInherit.filter((attr) => !ignoreList.includes(attr));\n    }\n    return inheritAttributes(el, attributesToInherit);\n};\n\n/**\n * Dynamically add or remove an attribute on the element.\n * If the value of the attribute is null or undefined, the attribute is removed.\n *\n * @param el - The HTMLElement\n * @param attr - The attribute to be added or removed\n * @param value - The value of the attribute\n */\nexport function setOrRemoveAttribute(el: HTMLElement, attr: string, value: string | null | undefined) {\n    if (el) {\n        if (value === undefined || value === null) {\n            el.removeAttribute(attr);\n        } else {\n            el.setAttribute(attr, value);\n        }\n    }\n}\n\nexport const findItemLabel = (componentEl: HTMLElement): HTMLWcsLabelElement | null => {\n    const itemEl = componentEl.closest('wcs-form-field');\n    if (itemEl) {\n        return itemEl.querySelector('wcs-label');\n    }\n    return null;\n};\n\n/**\n * Given two lists of items, this function will return the items that were removed, kept, and added compared to the source list.\n * @param sourceList - The source list of items\n * @param newList - The target list of items\n * @param compareFn - The function to compare the items\n */\nexport const compareLists: <T>(sourceList: T[], newList: T[], compareFn: (v1: T, v2: T) => boolean) => {\n    removed: T[];\n    kept: T[];\n    added: T[]\n} = <T>(sourceList: T[], newList: T[], compareFn: (v1: T, v2: T) => boolean) => {\n    const removed = sourceList.filter(val => !newList.some(newVal => compareFn(val, newVal)));\n    const kept = sourceList.filter(val => newList.some(newVal => compareFn(val, newVal)));\n    const added = newList.filter(val => !sourceList.some(sourceVal => compareFn(val, sourceVal)));\n\n    return { removed, kept, added };\n};\n\n\ndeclare const __zone_symbol__requestAnimationFrame: any;\n\n/**\n * Patched version of requestAnimationFrame that avoids ngzone\n * Use only when you know ngzone should not run\n */\nexport const raf = (h: any) => {\n    if (typeof __zone_symbol__requestAnimationFrame === 'function') {\n        return __zone_symbol__requestAnimationFrame(h);\n    }\n    if (typeof requestAnimationFrame === 'function') {\n        return requestAnimationFrame(h);\n    }\n    return setTimeout(h);\n};\n\n/**\n * Return true if the mouseEvent click is inside the given HTML element\n */\nexport const clickInsideElement = (event: MouseEvent, element: HTMLElement): boolean => {\n    return event.x >= element.getBoundingClientRect().x && event.x <= element.getBoundingClientRect().x + element.getBoundingClientRect().width\n        && event.y >= element.getBoundingClientRect().y && event.y <= element.getBoundingClientRect().y + element.getBoundingClientRect().height;\n}\n\n\nexport const clickTargetIsElementOrChildren = (mouseEvent: MouseEvent, element: HTMLElement) => {\n    return mouseEvent.target instanceof Node\n        && element.contains(mouseEvent.target);\n}\n\nexport function generateUniqueId(componentName: string): string {\n    return componentName + \"-\" + Math.random().toString(36);\n}\n\nexport function isKeyup(evt: KeyboardEvent) {\n    return evt.code === 'ArrowUp';\n}\n\nexport function isKeydown(evt: KeyboardEvent) {\n    return evt.code === 'ArrowDown';\n}\n\nexport function isEscapeKey(evt: KeyboardEvent) {\n    return evt.code === 'Escape';\n}\n\nexport function isSpaceKey(evt: KeyboardEvent) {\n    return evt.code === 'Space';\n}\n\nexport function isEnterKey(evt: KeyboardEvent) {\n    return evt.key === 'Enter';\n}\n\nexport function isHomeKey(evt: KeyboardEvent) {\n    return evt.code === 'Home';\n}\n\nexport function isEndKey(evt: KeyboardEvent) {\n    return evt.code === 'End';\n}\n\nexport function isUpArrowKey(evt: KeyboardEvent) {\n    return evt.key === 'ArrowUp';\n}\n\nexport function isDownArrowKey(evt: KeyboardEvent) {\n    return evt.key === 'ArrowDown';\n}\n\nexport function isLeftArrowKey(evt: KeyboardEvent) {\n    return evt.key === 'ArrowLeft';\n}\n\nexport function isRightArrowKey(evt: KeyboardEvent) {\n    return evt.key === 'ArrowRight';\n}\n\nexport function isPageDownKey(evt: KeyboardEvent) {\n    return evt.key === 'PageDown';\n}\n\nexport function isPageUpKey(evt: KeyboardEvent) {\n    return evt.key === 'PageUp';\n}\n\nexport function isTabKey(evt: KeyboardEvent) {\n    return evt.key === 'Tab';\n}\n\nexport function isCtrlA(evt: KeyboardEvent) {\n    return evt.key === 'a' && evt.ctrlKey;\n}\n\nexport function getCssRootPropertyValue(name: string): string | null {\n    return window.getComputedStyle(document.body).getPropertyValue(name) || null;\n}\n"],"version":3}