wcs-core 7.0.0 → 7.2.0

package/dist/wcs/p-4ca7c59f.entry.js.map

@@ -1 +0,0 @@
-{"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-foreground-action-primary-default); // TODO : censé être --wcs-semantic-color-border-focus-base-on-secondary -> pas encore implémenté le \"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 {\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    a:focus {\n        outline: none;\n    }\n\n    @include for-tablet-landscape-down {\n        &:has(a: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\n    @include for-desktop-up {\n        &:has(a: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\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,mxKACnB,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-4d6d1d14.js

@@ -1,2 +0,0 @@
-import{h as e,j as r,l as s,m as t,d as n,c as A,n as a,b as u}from"./p-a3aece7a.js";function i(i){const{key:R}=i;if(i.shiftKey){switch(R){case" ":return"MAJ+SPACE";case"Tab":return"MAJ+TAB"}}else if(i.altKey){switch(R){case"ArrowDown":return"ALT+DOWN_ARROW";case"ArrowUp":return"ALT+UP_ARROW"}}else if(i.ctrlKey){if(e(i)){return"CTRL+HOME"}else if(r(i)){return"CTRL+END"}else if(R==="a"){return"CTRL+A"}}else{switch(R){case"ArrowDown":return"DOWN_ARROW";case"ArrowUp":return"UP_ARROW";case"ArrowLeft":return"LEFT_ARROW";case"ArrowRight":return"RIGHT_ARROW"}if(e(i)){return"HOME"}else if(r(i)){return"END"}else if(s(i)){return"PAGE_UP"}else if(t(i)){return"PAGE_DOWN"}else if(n(i)){return"ENTER"}else if(A(i)){return"SPACE"}else if(a(i)){return"TAB"}else if(u(i)){return"ESCAPE"}}return"UNKNOWN"}export{i as k};
-//# sourceMappingURL=p-4d6d1d14.js.map

package/dist/wcs/p-52cd0abb.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as s,H as e,g as r}from"./p-32e583ea.js";import{p as o,i as n,a,s as c,q as d}from"./p-a3aece7a.js";const l=["s","m","l"];function u(t){return l.includes(t)}const h=":host{--wcs-input-icon-color-default:var(--wcs-semantic-color-foreground-brand);--wcs-input-icon-color-focus:var(--wcs-semantic-color-foreground-brand);--wcs-input-icon-color-disabled:var(--wcs-semantic-color-foreground-disabled);--wcs-input-background-color:var(--wcs-semantic-color-background-control-default);--wcs-input-border-radius-left:var(--wcs-semantic-border-radius-base);--wcs-input-border-radius-right:var(--wcs-semantic-border-radius-base);--wcs-input-border-width:var(--wcs-semantic-border-width-default);--wcs-input-border-width-focus:var(--wcs-semantic-border-width-large);--wcs-input-height-l:var(--wcs-semantic-size-l);--wcs-input-height-m:var(--wcs-semantic-size-m);--wcs-input-height-s:var(--wcs-semantic-size-s);--wcs-input-font-size-l:var(--wcs-semantic-font-size-l);--wcs-input-font-size-m:var(--wcs-semantic-font-size-m);--wcs-input-font-size-s:var(--wcs-semantic-font-size-s);--wcs-input-prefix-suffix-background-color:var(--wcs-semantic-color-background-surface-accent-lighter);--wcs-input-prefix-suffix-color:var(--wcs-semantic-color-foreground-on-accent);--wcs-input-prefix-suffix-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-input-prefix-suffix-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-input-border-style-default:solid;--wcs-input-border-style-focus:var(--wcs-semantic-border-style-focus-control);--wcs-input-border-color-default:var(--wcs-semantic-color-border-primary);--wcs-input-border-color-disabled:var(--wcs-semantic-color-border-disabled);--wcs-input-border-color-focus:var(--wcs-semantic-color-border-control-focus);--wcs-input-border-color-error:var(--wcs-semantic-color-border-critical);--wcs-input-value-color:var(--wcs-semantic-color-text-primary);--wcs-input-value-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-input-placeholder-color:var(--wcs-semantic-color-text-tertiary);--wcs-input-placeholder-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-input-placeholder-font-style:var(--wcs-semantic-font-style-control-placeholder);--wcs-input-text-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-input-min-height:var(--wcs-semantic-size-s);--wcs-input-padding-horizontal-s:calc(1.5 * var(--wcs-semantic-spacing-base));--wcs-input-padding-horizontal-m:var(--wcs-semantic-spacing-large);--wcs-input-padding-horizontal-l:var(--wcs-semantic-spacing-large);--wcs-input-gap:var(--wcs-semantic-spacing-base);display:flex;width:100%;height:var(--wcs-input-host-height);box-sizing:border-box;border-radius:var(--wcs-input-border-radius-left) var(--wcs-input-border-radius-right) var(--wcs-input-border-radius-right) var(--wcs-input-border-radius-left);background-color:var(--wcs-input-background-color);outline:var(--wcs-input-border-style-default) var(--wcs-input-border-width) var(--wcs-input-border-color-default);outline-offset:calc(var(--wcs-input-border-width) * -1);background-clip:padding-box;gap:var(--wcs-input-gap)}:host input{overflow:hidden;height:var(--wcs-input-host-height);width:100%;padding:0;background-color:transparent;font-family:var(--wcs-font-sans-serif);color:var(--wcs-input-value-color);font-weight:var(--wcs-input-value-font-weight) !important;border:none;font-size:var(--wcs-input-font-size, 1rem);line-height:1.5}:host input::placeholder{color:var(--wcs-input-placeholder-color);opacity:1;font-weight:var(--wcs-input-placeholder-font-weight);font-style:var(--wcs-input-placeholder-font-style)}:host input:focus{box-shadow:none;outline:0}:host .toggle_password{cursor:pointer}:host .prefix,:host .suffix{color:var(--wcs-input-prefix-suffix-color);display:flex;white-space:nowrap;align-items:center;font-size:var(--wcs-input-font-size, 1rem);padding:0 calc(var(--wcs-input-padding-horizontal-m) / 2);font-weight:var(--wcs-input-prefix-suffix-font-weight) !important;background-color:var(--wcs-input-prefix-suffix-background-color)}:host .prefix{border-radius:var(--wcs-internal-input-border-radius-left) 0 0 var(--wcs-internal-input-border-radius-left)}:host .suffix{border-radius:0 var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-right) 0}:host wcs-mat-icon{color:var(--wcs-input-icon-color-default)}:host([size=l]){--wcs-input-host-height:var(--wcs-input-height-l);--wcs-input-font-size:var(--wcs-input-font-size-l);padding-left:calc(var(--wcs-input-padding-horizontal-l));padding-right:calc(var(--wcs-input-padding-horizontal-l))}:host([size=m]){--wcs-input-host-height:var(--wcs-input-height-m);--wcs-input-font-size:var(--wcs-input-font-size-m);padding-left:calc(var(--wcs-input-padding-horizontal-m));padding-right:calc(var(--wcs-input-padding-horizontal-m))}:host([size=s]){--wcs-input-host-height:var(--wcs-input-height-s);--wcs-input-font-size:var(--wcs-input-font-size-s);padding-left:calc(var(--wcs-input-padding-horizontal-s));padding-right:calc(var(--wcs-input-padding-horizontal-s))}:host([state=error]){outline-color:var(--wcs-input-border-color-error) !important}:host([data-has-prefix]){padding-left:0}:host([data-has-suffix]){padding-right:0}:host([disabled]){cursor:not-allowed;outline:var(--wcs-input-border-style-default) var(--wcs-input-border-width) var(--wcs-input-border-color-disabled);--wcs-input-background-color:var(--wcs-semantic-color-background-control-disabled)}:host([disabled]) input{cursor:not-allowed;color:var(--wcs-input-text-color-disabled)}:host([disabled]) input::placeholder{color:var(--wcs-input-text-color-disabled)}:host([disabled]) .prefix,:host([disabled]) .suffix{color:var(--wcs-input-prefix-suffix-color-disabled);cursor:text}:host([disabled]) wcs-mat-icon{color:var(--wcs-input-icon-color-disabled);cursor:not-allowed}:host([readonly]){--wcs-input-background-color:var(--wcs-semantic-color-background-control-readonly);--wcs-input-border-width:0}:host(:focus-within){outline:var(--wcs-input-border-style-focus) var(--wcs-input-border-width-focus) var(--wcs-input-border-color-focus);outline-offset:calc(var(--wcs-input-border-width-focus) * -1)}:host(:focus-within) wcs-mat-icon{color:var(--wcs-input-icon-color-focus)}";const p=h;const w=["tabindex","title"];const f=class{constructor(s){t(this,s);this.wcsInput=i(this,"wcsInput",7);this.wcsChange=i(this,"wcsChange",7);this.wcsBlur=i(this,"wcsBlur",7);this.wcsFocus=i(this,"wcsFocus",7);this.inputId=`wcs-input-${b++}`;this.inheritedAttributes={};this.iconPassword="visibility";this.onInput=t=>{const i=t.target;if(i){this.value=i.value||""}this.wcsInput.emit(t)};this.onChange=t=>{this.wcsChange.emit({value:this.nativeInput.value})};this.onBlur=t=>{if(this.fireFocusEvents){this.wcsBlur.emit(t)}};this.onFocus=t=>{if(this.fireFocusEvents){this.wcsFocus.emit(t)}};this.fireFocusEvents=true;this.passwordReveal=false;this.accept=undefined;this.autocapitalize="off";this.autocomplete="off";this.autocorrect="off";this.autofocus=false;this.debounce=0;this.prefixLabel=undefined;this.suffixLabel=undefined;this.disabled=false;this.enterkeyhint=undefined;this.size="m";this.icon=undefined;this.inputmode=undefined;this.max=undefined;this.maxlength=undefined;this.min=undefined;this.minlength=undefined;this.multiple=undefined;this.name=this.inputId;this.pattern=undefined;this.placeholder=undefined;this.readonly=false;this.required=false;this.spellcheck=false;this.state="initial";this.step=undefined;this.type="text";this.value=""}debounceChanged(){this.wcsInput=o(this.wcsInput,this.debounce)}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},n(this.el)),a(this.el,w));if(!u(this.size)){console.warn(`Invalid size value for wcs-input : "${this.size}". Must be one of "${l.join(", ")}"`);this.size="m"}}connectedCallback(){this.debounceChanged();{document.dispatchEvent(new CustomEvent("wcsInputDidLoad",{detail:this.el}))}}disconnectedCallback(){{document.dispatchEvent(new CustomEvent("wcsInputDidUnload",{detail:this.el}))}}async setBlur(){if(this.nativeInput){this.nativeInput.blur()}}getInputElement(){return Promise.resolve(this.nativeInput)}async setAriaAttribute(t,i){c(this.nativeInput,t,i)}getValueAsString(){return typeof this.value==="number"?this.value.toString():(this.value||"").toString()}passwordRevealIconClick(){this.passwordReveal=!this.passwordReveal}onPasswordRevealChange(){this.iconPassword=this.passwordReveal?"visibility_off":"visibility"}render(){const t=this.getValueAsString();const i=this.inputId+"-lbl";const r=d(this.el);if(r){r.id=i}return s(e,{key:"a85c77b11f3ac1e7b4238513f4d8916b74d11245","aria-disabled":this.disabled?"true":null,"data-has-prefix":!!this.prefixLabel,"data-has-suffix":!!this.suffixLabel},this.prefixLabel?s("span",{class:"prefix",part:"prefix"},this.prefixLabel):null,this.icon?s("wcs-mat-icon",{icon:this.icon,size:"m"}):null,s("input",Object.assign({key:"2b71e2ba5fbb92685af6123a8accf72833391bc1",class:"native-input",ref:t=>this.nativeInput=t,"aria-labelledby":r?i:null,disabled:this.disabled,accept:this.accept,autoCapitalize:this.autocapitalize,autoComplete:this.autocomplete,autoCorrect:this.autocorrect,autoFocus:this.autofocus,enterKeyHint:this.enterkeyhint,inputMode:this.inputmode,min:this.min,max:this.max,minLength:this.minlength,maxLength:this.maxlength,multiple:this.multiple,name:this.name,pattern:this.pattern,placeholder:this.placeholder||"",readOnly:this.readonly,required:this.required,spellcheck:this.spellcheck,step:this.step,type:this.passwordReveal?"text":this.type,value:t,onInput:this.onInput,onChange:this.onChange,onBlur:this.onBlur,onFocus:this.onFocus},this.inheritedAttributes)),this.type==="password"?s("wcs-mat-icon",{class:"toggle_password",icon:this.iconPassword,size:"m",onClick:()=>this.passwordRevealIconClick()}):null,this.suffixLabel?s("span",{class:"suffix",part:"suffix"},this.suffixLabel):null)}static get delegatesFocus(){return true}get el(){return r(this)}static get watchers(){return{debounce:["debounceChanged"],passwordReveal:["onPasswordRevealChange"]}}};let b=0;f.style=p;export{f as wcs_input};
-//# sourceMappingURL=p-52cd0abb.entry.js.map

package/dist/wcs/p-52cd0abb.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["WcsInputSizeValues","isWcsInputSize","size","includes","inputCss","WcsInputStyle0","INPUT_INHERITED_ATTRS","Input","this","inputId","inputIds","inheritedAttributes","iconPassword","onInput","ev","input","target","value","wcsInput","emit","onChange","_","wcsChange","nativeInput","onBlur","fireFocusEvents","wcsBlur","onFocus","wcsFocus","debounceChanged","debounceEvent","debounce","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","console","warn","join","connectedCallback","document","dispatchEvent","CustomEvent","detail","disconnectedCallback","setBlur","blur","getInputElement","Promise","resolve","setAriaAttribute","attr","setOrRemoveAttribute","getValueAsString","toString","passwordRevealIconClick","passwordReveal","onPasswordRevealChange","render","labelId","label","findItemLabel","id","h","Host","key","disabled","prefixLabel","suffixLabel","class","part","icon","ref","accept","autoCapitalize","autocapitalize","autoComplete","autocomplete","autoCorrect","autocorrect","autoFocus","autofocus","enterKeyHint","enterkeyhint","inputMode","inputmode","min","max","minLength","minlength","maxLength","maxlength","multiple","name","pattern","placeholder","readOnly","readonly","required","spellcheck","step","type","onClick"],"sources":["src/components/input/input-interface.ts","src/components/input/input.scss?tag=wcs-input&encapsulation=shadow","src/components/input/input.tsx"],"sourcesContent":["// From: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\nimport { WcsSize } from '../../shared-types';\n\nexport type AutocompleteTypes = (\n    | 'on' | 'off' | 'name' | 'honorific-prefix' | 'given-name' | 'additional-name' | 'family-name' | 'honorific-suffix'\n    | 'nickname' | 'email' | 'username' | 'new-password' | 'current-password' | 'one-time-code' | 'organization-title' | 'organization'\n    | 'street-address' | 'address-line1' | 'address-line2' | 'address-line3' | 'address-level4' | 'address-level3' | 'address-level2'\n    | 'address-level1' | 'country' | 'country-name' | 'postal-code' | 'cc-name' | 'cc-given-name' | 'cc-additional-name' | 'cc-family-name'\n    | 'cc-family-name' | 'cc-number' | 'cc-exp' | 'cc-exp-month' | 'cc-exp-year' | 'cc-csc' | 'cc-type' | 'transaction-currency' | 'transaction-amount'\n    | 'language' | 'bday' | 'bday-day' | 'bday-month' | 'bday-year' | 'sex' | 'tel' | 'tel-country-code' | 'tel-national' | 'tel-area-code' | 'tel-local'\n    | 'tel-extension' | 'impp' | 'url' | 'photo');\n\nexport type TextFieldTypes = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' | 'time' | 'week' | 'month' | 'datetime-local' | 'file';\n\nexport const WcsInputSizeValues = ['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 WcsInputSize = Extract<WcsSize, typeof WcsInputSizeValues[number]>;\n\nexport function isWcsInputSize(size: string): size is WcsInputSize {\n    // @ts-ignore : ignore size type, as it is checked with WcsInputSizeValues\n    return WcsInputSizeValues.includes(size);\n}\n\nexport type WcsInputAutocorrect = 'on' | 'off';\n\nexport type WcsInputEnterKeyHint = 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';\n\nexport type WcsInputInputMode = 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';\n\nexport type WcsInputState = 'initial' | 'error';\n\nexport interface InputChangeEventDetail {\n    value: string | undefined | null;\n}\n","@import '../../style/focus-outline.scss';\n@import '../../style/placeholder.scss';\n\n:host {\n    --wcs-input-icon-color-default: var(--wcs-semantic-color-foreground-brand);\n    --wcs-input-icon-color-focus: var(--wcs-semantic-color-foreground-brand);\n    --wcs-input-icon-color-disabled: var(--wcs-semantic-color-foreground-disabled);\n\n    --wcs-input-background-color: var(--wcs-semantic-color-background-control-default);\n\n    --wcs-input-border-radius-left: var(--wcs-semantic-border-radius-base); // Overridden from prefix suffix group in form-field\n    --wcs-input-border-radius-right: var(--wcs-semantic-border-radius-base); // Overridden from prefix suffix group in form-field\n\n    --wcs-input-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-input-border-width-focus: var(--wcs-semantic-border-width-large);\n\n    --wcs-input-height-l: var(--wcs-semantic-size-l);\n    --wcs-input-height-m: var(--wcs-semantic-size-m);\n    --wcs-input-height-s: var(--wcs-semantic-size-s);\n    --wcs-input-font-size-l: var(--wcs-semantic-font-size-l);\n    --wcs-input-font-size-m: var(--wcs-semantic-font-size-m);\n    --wcs-input-font-size-s: var(--wcs-semantic-font-size-s);\n\n    --wcs-input-prefix-suffix-background-color: var(--wcs-semantic-color-background-surface-accent-lighter);\n    --wcs-input-prefix-suffix-color: var(--wcs-semantic-color-foreground-on-accent);\n    --wcs-input-prefix-suffix-color-disabled: var(--wcs-semantic-color-text-disabled);\n    --wcs-input-prefix-suffix-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-input-border-style-default: solid;\n    --wcs-input-border-style-focus: var(--wcs-semantic-border-style-focus-control);\n\n    --wcs-input-border-color-default: var(--wcs-semantic-color-border-primary);\n    --wcs-input-border-color-disabled: var(--wcs-semantic-color-border-disabled);\n    --wcs-input-border-color-focus: var(--wcs-semantic-color-border-control-focus);\n    --wcs-input-border-color-error: var(--wcs-semantic-color-border-critical);\n\n    --wcs-input-value-color: var(--wcs-semantic-color-text-primary);\n    --wcs-input-value-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-input-placeholder-color: var(--wcs-semantic-color-text-tertiary);\n    --wcs-input-placeholder-font-weight: var(--wcs-semantic-font-weight-roman);\n    --wcs-input-placeholder-font-style: var(--wcs-semantic-font-style-control-placeholder);\n\n    --wcs-input-text-color-disabled: var(--wcs-semantic-color-text-disabled);\n\n    --wcs-input-min-height: var(--wcs-semantic-size-s);\n    --wcs-input-padding-horizontal-s: calc(1.5 * var(--wcs-semantic-spacing-base));\n    --wcs-input-padding-horizontal-m: var(--wcs-semantic-spacing-large);\n    --wcs-input-padding-horizontal-l: var(--wcs-semantic-spacing-large);\n    --wcs-input-gap: var(--wcs-semantic-spacing-base);\n\n    display: flex;\n    width: 100%;\n    height: var(--wcs-input-host-height);\n    box-sizing: border-box;\n    border-radius: var(--wcs-input-border-radius-left) var(--wcs-input-border-radius-right) var(--wcs-input-border-radius-right) var(--wcs-input-border-radius-left);\n    background-color: var(--wcs-input-background-color);\n    outline: var(--wcs-input-border-style-default) var(--wcs-input-border-width) var(--wcs-input-border-color-default);\n    outline-offset: calc(var(--wcs-input-border-width) * -1);\n    background-clip: padding-box;\n\n    gap: var(--wcs-input-gap);\n\n    input {\n        overflow: hidden;\n        height: var(--wcs-input-host-height);\n        width: 100%;\n        padding: 0; // Reset padding from user agent stylesheet, it's the container that will handle padding\n        background-color: transparent;\n        font-family: var(--wcs-font-sans-serif);\n        color: var(--wcs-input-value-color);\n        font-weight: var(--wcs-input-value-font-weight) !important;\n        border: none;\n        font-size: var(--wcs-input-font-size, 1rem);\n        line-height: 1.5;\n\n        &::placeholder {\n            @include placeholder(var(--wcs-input-placeholder-color), var(--wcs-input-placeholder-font-weight), var(--wcs-input-placeholder-font-style));\n        }\n    }\n\n    input:focus {\n        box-shadow: none;\n        outline: 0;\n    }\n\n    .toggle_password {\n        cursor: pointer;\n    }\n\n    .prefix, .suffix {\n        color: var(--wcs-input-prefix-suffix-color);\n        display: flex;\n        white-space: nowrap;\n        align-items: center;\n        font-size: var(--wcs-input-font-size, 1rem);\n        padding: 0 calc(var(--wcs-input-padding-horizontal-m) / 2);\n        font-weight: var(--wcs-input-prefix-suffix-font-weight) !important;\n        background-color: var(--wcs-input-prefix-suffix-background-color);\n    }\n\n    .prefix {\n        border-radius: var(--wcs-internal-input-border-radius-left) 0 0 var(--wcs-internal-input-border-radius-left);\n    }\n\n    .suffix {\n        border-radius: 0 var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-right) 0;\n    }\n\n    wcs-mat-icon {\n        color: var(--wcs-input-icon-color-default);\n    }\n}\n\n:host([size=l]) {\n    --wcs-input-host-height: var(--wcs-input-height-l);\n    --wcs-input-font-size: var(--wcs-input-font-size-l);\n\n    padding-left: calc(var(--wcs-input-padding-horizontal-l));\n    padding-right: calc(var(--wcs-input-padding-horizontal-l));\n}\n\n:host([size=m]) { // Default\n    --wcs-input-host-height: var(--wcs-input-height-m);\n    --wcs-input-font-size: var(--wcs-input-font-size-m);\n\n    padding-left: calc(var(--wcs-input-padding-horizontal-m));\n    padding-right: calc(var(--wcs-input-padding-horizontal-m));\n}\n\n:host([size=s]) {\n    --wcs-input-host-height: var(--wcs-input-height-s);\n    --wcs-input-font-size: var(--wcs-input-font-size-s);\n\n    padding-left: calc(var(--wcs-input-padding-horizontal-s));\n    padding-right: calc(var(--wcs-input-padding-horizontal-s));\n}\n\n:host([state=error]) {\n    outline-color: var(--wcs-input-border-color-error) !important;\n}\n\n:host([data-has-prefix]) {\n    padding-left: 0;\n}\n\n:host([data-has-suffix]) {\n    padding-right: 0;\n}\n\n:host([disabled]) {\n    cursor: not-allowed; // padding is handled by the container, so we need to set cursor not allowed on it\n    outline: var(--wcs-input-border-style-default) var(--wcs-input-border-width) var(--wcs-input-border-color-disabled);\n    --wcs-input-background-color: var(--wcs-semantic-color-background-control-disabled);\n\n    input {\n        cursor: not-allowed;\n        color: var(--wcs-input-text-color-disabled);\n\n        &::placeholder {\n            color: var(--wcs-input-text-color-disabled);\n        }\n    }\n\n    .prefix, .suffix {\n        color: var(--wcs-input-prefix-suffix-color-disabled);\n        cursor: text; // reset cursor to text for prefix and suffix, to be able to select text\n    }\n\n    wcs-mat-icon {\n        color: var(--wcs-input-icon-color-disabled);\n        cursor: not-allowed;\n    }\n}\n\n:host([readonly]) {\n    --wcs-input-background-color: var(--wcs-semantic-color-background-control-readonly);\n    --wcs-input-border-width: 0;\n}\n\n:host(:focus-within) {\n    outline: var(--wcs-input-border-style-focus) var(--wcs-input-border-width-focus) var(--wcs-input-border-color-focus);\n    outline-offset: calc(var(--wcs-input-border-width-focus) * -1);\n\n    wcs-mat-icon {\n        color: var(--wcs-input-icon-color-focus);\n    }\n}\n","import {\n    Build,\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Method,\n    Prop,\n    State,\n    Watch\n} from '@stencil/core';\nimport {\n    debounceEvent,\n    findItemLabel,\n    inheritAriaAttributes,\n    inheritAttributes,\n    setOrRemoveAttribute\n} from '../../utils/helpers';\nimport {\n    AutocompleteTypes,\n    InputChangeEventDetail,\n    isWcsInputSize,\n    TextFieldTypes,\n    WcsInputSize,\n    WcsInputSizeValues,\n    WcsInputAutocorrect,\n    WcsInputEnterKeyHint,\n    WcsInputInputMode,\n    WcsInputState\n} from './input-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst INPUT_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The input component is a form control that accepts a single line of text.\n * Implementation mainly inspired from Ionic Input Component.\n *\n * ## Accessibility guidelines 💡\n * > - If you use wcs-input outside a wcs-form-field, you have to manage the label and the error message yourself.\n * > You can use the `aria-label` attribute to provide a label for screen readers but adds no visual label.\n * \n * @cssprop --wcs-input-icon-color-default - default icon color when the input is not focused\n * @cssprop --wcs-input-icon-color-focus - icon color when the input is focused\n * @cssprop --wcs-input-icon-color-disabled - icon color when the input is disabled\n *\n * @cssprop --wcs-input-background-color - background color of the input\n *\n * @cssprop --wcs-input-border-radius-left - border radius of the left side of the input\n * @cssprop --wcs-input-border-radius-right - border radius of the right side of the input\n * \n * @cssprop --wcs-input-border-width - border width of the input\n * @cssprop --wcs-input-border-width-focus - border width of the input when focused\n *\n * @cssprop --wcs-input-height-l - large height of the input\n * @cssprop --wcs-input-height-m - medium height of the input\n * @cssprop --wcs-input-height-s - small height of the input\n * @cssprop --wcs-input-font-size-l - large font size of the input\n * @cssprop --wcs-input-font-size-m - medium font size of the input\n * @cssprop --wcs-input-font-size-s - small font size of the input\n *\n * @cssprop --wcs-input-border-style-default - default border style of the input\n * @cssprop --wcs-input-border-style-focus - border style of the input when focused\n * \n * @cssprop --wcs-input-prefix-suffix-background-color - background color of the suffix/prefix\n * @cssprop --wcs-input-prefix-suffix-color - color of the suffix/prefix\n * @cssprop --wcs-input-prefix-suffix-color-disabled - color of the suffix/prefix when the input is disabled\n * @cssprop --wcs-input-prefix-suffix-font-weight - font weight of the suffix/prefix\n *\n * @cssprop --wcs-input-border-color-default - default border color of the input when not focused\n * @cssprop --wcs-input-border-color-disabled - border color of the input when disabled\n * @cssprop --wcs-input-border-color-focus - border color of the input when focused\n * @cssprop --wcs-input-border-color-error - border color of the input when in error state\n *\n * @cssprop --wcs-input-value-color - color of the input value\n * @cssprop --wcs-input-value-font-weight - font weight of the input value\n * \n * @cssprop --wcs-input-placeholder-color - color of the input placeholder\n * @cssprop --wcs-input-placeholder-font-weight - font weight of the input placeholder\n * @cssprop --wcs-input-placeholder-font-style - font style of the input placeholder\n * \n * @cssprop --wcs-input-text-color-disabled - color of the input when disabled\n *\n * @cssprop --wcs-input-padding-horizontal-s - horizontal padding of the input in small size\n * @cssprop --wcs-input-padding-horizontal-m - horizontal padding of the input in medium size\n * @cssprop --wcs-input-padding-horizontal-l - horizontal padding of the input in large size\n * \n * @cssprop --wcs-input-gap - gap between text input and icon\n */\n@Component({\n    tag: 'wcs-input',\n    styleUrl: 'input.scss',\n    shadow: { delegatesFocus: true },\n})\nexport class Input implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeInput?: HTMLInputElement;\n    private inputId = `wcs-input-${inputIds++}`;\n    private inheritedAttributes: { [k: string]: any } = {};\n    private iconPassword = \"visibility\";\n\n    /**\n     * This is required for a WebKit bug which requires us to\n     * blur and focus an input to properly focus the input in\n     * an item with delegatesFocus. It will no longer be needed\n     * with iOS 14.\n     *\n     * @internal\n     */\n    @Prop() fireFocusEvents = true;\n\n    @State() private passwordReveal = false;\n\n    /**\n     * If the value of the type attribute is `\"file\"`, then this attribute will indicate the types of files that the\n     * server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers.\n     */\n    @Prop() accept?: string;\n\n    /**\n     * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n     * Available options: `\"off\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`.\n     */\n    @Prop() autocapitalize = 'off';\n\n    /**\n     * Indicates whether the value of the control can be automatically completed by the browser.\n     */\n    @Prop() autocomplete: AutocompleteTypes = 'off';\n\n    /**\n     * Whether auto correction should be enabled when the user is entering/editing the text value.\n     */\n    @Prop() autocorrect: WcsInputAutocorrect = 'off';\n\n    /**\n     * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n     */\n    @Prop() autofocus = false;\n\n    /**\n     * Set the amount of time, in milliseconds, to wait to trigger the `wcsInput` event after each keystroke.\n     * This also impacts form bindings such as `ngModel` or `v-model`.\n     */\n    @Prop() debounce = 0;\n\n    @Watch('debounce')\n    protected debounceChanged() {\n        this.wcsInput = debounceEvent(this.wcsInput, this.debounce);\n    }\n\n    /**\n     * Prefix displayed before the text field contents. This is not included in the value.\n     */\n    @Prop() prefixLabel: string;\n\n    /**\n     * Suffix displayed after the text field contents. This is not included in the value.\n     */\n    @Prop() suffixLabel: string;\n\n    /**\n     * If `true`, the user cannot interact with the input.\n     */\n    @Prop() disabled = false;\n\n    /**\n     * A hint to the browser for which enter key to display.\n     */\n    @Prop() enterkeyhint?: WcsInputEnterKeyHint;\n\n    /**\n     * Specify the size (height) of the input.\n     */\n    @Prop({reflect: true}) size: WcsInputSize = 'm';\n\n    /**\n     * Name of the material icon to add to the input\n     */\n    @Prop() icon: string;\n\n    /**\n     * A hint to the browser for which keyboard to display.\n     */\n    @Prop() inputmode?: WcsInputInputMode;\n\n    /**\n     * The maximum value, which must not be less than its minimum (min attribute) value.\n     */\n    @Prop() max?: string;\n\n    /**\n     * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute\n     * specifies the maximum number of characters that the user can enter.\n     */\n    @Prop() maxlength?: number;\n\n    /**\n     * The minimum value, which must not be greater than its maximum (max attribute) value.\n     */\n    @Prop() min?: string;\n\n    /**\n     * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute\n     * specifies the minimum number of characters that the user can enter.\n     */\n    @Prop() minlength?: number;\n\n    /**\n     * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to\n     * `\"email\"` or `\"file\"`, otherwise it is ignored.\n     */\n    @Prop() multiple?: boolean;\n\n    /**\n     * The name of the control, which is submitted with the form data.\n     */\n    @Prop() name: string = this.inputId;\n\n    /**\n     * A regular expression that the value is checked against. The pattern must match the entire value, not just some\n     * subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value\n     * of the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"date\"`, or `\"password\"`, otherwise\n     * it is ignored. When the type attribute is `\"date\"`, `pattern` will only be used in browsers that do not support\n     * the `\"date\"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for\n     * more information.\n     */\n    @Prop() pattern?: string;\n\n    /**\n     * Instructional text that shows before the input has a value.\n     */\n    @Prop() placeholder?: string | null;\n\n    /**\n     * If `true`, the user cannot modify the value.\n     */\n    @Prop() readonly = false;\n\n    /**\n     * If `true`, the user must fill in a value before submitting a form.\n     */\n    @Prop() required = false;\n\n    /**\n     * If `true`, the element will have its spelling and grammar checked.\n     */\n    @Prop() spellcheck = false;\n\n    /**\n     * Specifies the state of the input. By default the input is in an normal state but you can to set it to 'error'\n     * state if the data given by the user is not valid.\n     */\n    @Prop({reflect: true}) state: WcsInputState = 'initial';\n\n    /**\n     * Works with the min and max attributes to limit the increments at which a value can be set.\n     * Possible values are: `\"any\"` or a positive floating point number.\n     */\n    @Prop() step?: string;\n\n    /**\n     * The type of control to display. The default type is text.\n     */\n    @Prop() type: TextFieldTypes = 'text';\n\n    /**\n     * The value of the input.\n     */\n    @Prop({mutable: true}) value?: string | number | null = '';\n\n    /**\n     * Emitted when a keyboard input occurred. See https://developer.mozilla.org/en-US/docs/Web/Events/input\n     */\n    @Event() wcsInput!: EventEmitter<KeyboardEvent>;\n\n    /**\n     * Emitted when the value has changed. See https://developer.mozilla.org/en-US/docs/Web/Events/change\n     */\n    @Event() wcsChange!: EventEmitter<InputChangeEventDetail>;\n\n    /**\n     * Emitted when the input loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    /**\n     * Emitted when the input has focus.\n     */\n    @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n    componentWillLoad() {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, INPUT_INHERITED_ATTRS)\n        };\n\n        if (!isWcsInputSize(this.size)) {\n            console.warn(`Invalid size value for wcs-input : \"${this.size}\". Must be one of \"${WcsInputSizeValues.join(', ')}\"`);\n            this.size = \"m\"; // Default fallback value\n        }\n    }\n\n    connectedCallback() {\n        this.debounceChanged();\n        if (Build.isBrowser) {\n            document.dispatchEvent(new CustomEvent('wcsInputDidLoad', {\n                detail: this.el\n            }));\n        }\n    }\n\n    disconnectedCallback() {\n        if (Build.isBrowser) {\n            document.dispatchEvent(new CustomEvent('wcsInputDidUnload', {\n                detail: this.el\n            }));\n        }\n    }\n\n    /**\n     * Sets blur on the native `input` in `wcs-input`. Use this method instead of the global\n     * `input.blur()`.\n     * @internal\n     */\n    @Method()\n    async setBlur() {\n        if (this.nativeInput) {\n            this.nativeInput.blur();\n        }\n    }\n\n    /**\n     * Returns the native `<input>` element used under the hood.\n     */\n    @Method()\n    getInputElement(): Promise<HTMLInputElement> {\n        return Promise.resolve(this.nativeInput!);\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeInput, attr, value);\n    }\n    \n    private getValueAsString(): string {\n        return typeof this.value === 'number' ? this.value.toString() :\n            (this.value || '').toString();\n    }\n\n    private onInput = (ev: Event) => {\n        const input = ev.target as HTMLInputElement | null;\n        if (input) {\n            this.value = input.value || '';\n        }\n        this.wcsInput.emit(ev as KeyboardEvent);\n    }\n\n    private onChange = (_: Event) => {\n        this.wcsChange.emit({value: this.nativeInput.value});\n    }\n\n    private onBlur = (ev: FocusEvent) => {\n        if (this.fireFocusEvents) {\n            this.wcsBlur.emit(ev);\n        }\n    }\n\n    private onFocus = (ev: FocusEvent) => {\n        if (this.fireFocusEvents) {\n            this.wcsFocus.emit(ev);\n        }\n    }\n\n    private passwordRevealIconClick(): void {\n        this.passwordReveal = !this.passwordReveal;\n    }\n\n    @Watch('passwordReveal')\n    onPasswordRevealChange(): void {\n        this.iconPassword = this.passwordReveal ? 'visibility_off' : 'visibility';\n    }\n\n    render() {\n        const value = this.getValueAsString();\n        const labelId = this.inputId + '-lbl';\n        const label = findItemLabel(this.el);\n        if (label) {\n            label.id = labelId;\n        }\n\n        return (\n            <Host\n                aria-disabled={this.disabled ? 'true' : null}\n                data-has-prefix={!!this.prefixLabel}\n                data-has-suffix={!!this.suffixLabel}\n            >\n                {this.prefixLabel ? (<span class=\"prefix\" part=\"prefix\">{this.prefixLabel}</span>) : null}\n                {this.icon ? (<wcs-mat-icon icon={this.icon} size=\"m\"></wcs-mat-icon>) : null}\n                <input\n                    class=\"native-input\"\n                    ref={input => this.nativeInput = input}\n                    aria-labelledby={label ? labelId : null}\n                    disabled={this.disabled}\n                    accept={this.accept}\n                    autoCapitalize={this.autocapitalize}\n                    autoComplete={this.autocomplete}\n                    autoCorrect={this.autocorrect}\n                    autoFocus={this.autofocus}\n                    enterKeyHint={this.enterkeyhint}\n                    inputMode={this.inputmode}\n                    min={this.min}\n                    max={this.max}\n                    minLength={this.minlength}\n                    maxLength={this.maxlength}\n                    multiple={this.multiple}\n                    name={this.name}\n                    pattern={this.pattern}\n                    placeholder={this.placeholder || ''}\n                    readOnly={this.readonly}\n                    required={this.required}\n                    spellcheck={this.spellcheck}\n                    step={this.step}\n                    type={this.passwordReveal ? 'text' : this.type}\n                    value={value}\n                    onInput={this.onInput}\n                    onChange={this.onChange}\n                    onBlur={this.onBlur}\n                    onFocus={this.onFocus}\n                    {...this.inheritedAttributes}\n                />\n                {this.type === \"password\" ? (<wcs-mat-icon class=\"toggle_password\" icon={this.iconPassword} size=\"m\"  onClick={() => this.passwordRevealIconClick()}></wcs-mat-icon>) : null}\n                {this.suffixLabel ? (<span class=\"suffix\" part=\"suffix\">{this.suffixLabel}</span>) : null}\n            </Host>\n        );\n    }\n}\n\nlet inputIds = 0;\n"],"mappings":"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"}

package/dist/wcs/p-550012c2.entry.js

@@ -1,2 +0,0 @@
-import{r,h as o,H as d}from"./p-32e583ea.js";const s=":host{--wcs-dropdown-divider-margin:var(--wcs-semantic-spacing-base) 0;--wcs-dropdown-divider-color:var(--wcs-semantic-color-border-secondary);display:block;margin:var(--wcs-dropdown-divider-margin);overflow:hidden;border-top:1px solid var(--wcs-dropdown-divider-color)}";const e=s;const a=class{constructor(o){r(this,o)}render(){return o(d,{key:"81d4f1fbc372b6905c0abfa9ab2e17da62e66bb7",slot:"item",tabindex:"-1","aria-hidden":"true"})}};a.style=e;export{a as wcs_dropdown_divider};
-//# sourceMappingURL=p-550012c2.entry.js.map

package/dist/wcs/p-5f517eb5.entry.js

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

package/dist/wcs/p-76f07dbd.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as a,g as t,H as r}from"./p-32e583ea.js";import{i as s,a as c,s as o}from"./p-a3aece7a.js";const i=":host{--wcs-header-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-header-gap:var(--wcs-semantic-spacing-large);--wcs-header-height:calc(8 * var(--wcs-semantic-size-base));--wcs-header-logo-height:calc(4 * var(--wcs-semantic-size-base));--wcs-header-padding-horizontal:var(--wcs-semantic-spacing-large);--wcs-header-border-bottom:solid var(--wcs-semantic-border-width-default) var(--wcs-semantic-color-border-secondary);--wcs-header-title-color:var(--wcs-semantic-color-text-primary);--wcs-header-title-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-header-title-font-size:var(--wcs-semantic-font-size-label-1)}header{border-bottom:var(--wcs-header-border-bottom);display:flex;align-items:center;box-sizing:border-box;z-index:1;background:var(--wcs-header-background-color);padding:0 var(--wcs-header-padding-horizontal);height:var(--wcs-header-height);gap:var(--wcs-header-gap)}::slotted(img){height:var(--wcs-header-logo-height)}::slotted(h1){color:var(--wcs-header-title-color);margin:0;font-weight:var(--wcs-header-title-font-weight);font-size:var(--wcs-header-title-font-size)}::slotted([slot=actions]){margin-left:auto}";const d=i;const n=[];const h=class{constructor(a){e(this,a);this.inheritedAttributes={}}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},s(this.el)),c(this.el,n))}async setAriaAttribute(e,a){o(this.nativeHeader,e,a)}hostData(){return{slot:"header"}}__stencil_render(){return a("header",Object.assign({key:"f432b6a245e91ddeb8b1631f861e6546d8482dbe",role:"banner",ref:e=>this.nativeHeader=e},this.inheritedAttributes),a("slot",{key:"5310bb9f07e117002c3748986d632d48a97322bb",name:"logo"}),a("slot",{key:"a471157be3d7ca2ea16dcc1e937174b7e8a69ee5",name:"title"}),a("slot",{key:"5dea2c8099c3ab6ca52d46b5e9fa4d6f758662ab",name:"actions"}))}get el(){return t(this)}render(){return a(r,this.hostData(),this.__stencil_render())}};h.style=d;export{h as wcs_header};
-//# sourceMappingURL=p-76f07dbd.entry.js.map

package/dist/wcs/p-76f07dbd.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["headerCss","WcsHeaderStyle0","HEADER_INHERITED_ATTRS","Header","constructor","hostRef","this","inheritedAttributes","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","setAriaAttribute","attr","value","setOrRemoveAttribute","nativeHeader","hostData","slot","__stencil_render","h","key","role","ref","name"],"sources":["src/components/header/header.scss?tag=wcs-header&encapsulation=shadow","src/components/header/header.tsx"],"sourcesContent":[":host {\n    --wcs-header-background-color: var(--wcs-semantic-color-background-surface-primary);\n\n    --wcs-header-gap: var(--wcs-semantic-spacing-large);\n    --wcs-header-height: calc(8 * var(--wcs-semantic-size-base));\n    --wcs-header-logo-height: calc(4 * var(--wcs-semantic-size-base));\n    --wcs-header-padding-horizontal: var(--wcs-semantic-spacing-large);\n\n    --wcs-header-border-bottom: solid var(--wcs-semantic-border-width-default) var(--wcs-semantic-color-border-secondary);\n    --wcs-header-title-color: var(--wcs-semantic-color-text-primary);\n    --wcs-header-title-font-weight: var(--wcs-semantic-font-weight-medium);\n    --wcs-header-title-font-size: var(--wcs-semantic-font-size-label-1);\n}\n\nheader {\n    border-bottom: var(--wcs-header-border-bottom);\n    display: flex;\n    align-items: center;\n    box-sizing: border-box;\n    z-index: 1;\n    background: var(--wcs-header-background-color);\n    padding: 0 var(--wcs-header-padding-horizontal);\n    height: var(--wcs-header-height);\n    gap: var(--wcs-header-gap);\n}\n\n::slotted(img) {\n    height: var(--wcs-header-logo-height);\n}\n\n::slotted(h1) {\n    color: var(--wcs-header-title-color);\n    margin: 0;\n    font-weight: var(--wcs-header-title-font-weight);\n    font-size: var(--wcs-header-title-font-size);\n}\n\n::slotted([slot=actions]) {\n    margin-left: auto;\n}\n","import { Component, ComponentInterface, Element, h, Method } from '@stencil/core';\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { AriaAttributeName } from \"../../utils/mutable-aria-attribute\";\n\nconst HEADER_INHERITED_ATTRS = [];\n\n/**\n * The header component is an element that appears across the top of all pages on a website or application; it contains the logo, the site name and main actions.\n * \n * @slot logo SNCF Logo\n * @slot title Title of your application\n * @slot actions Actions such as buttons, dropdown or any useful information to always display on your application\n * \n * @cssprop --wcs-header-background-color - Background color of the header\n * \n * @cssprop --wcs-header-gap - Gap between elements in the header\n * @cssprop --wcs-header-height - Height of the header\n * @cssprop --wcs-header-logo-height - Height of the logo\n * @cssprop --wcs-header-padding-horizontal - Horizontal padding of the header\n * \n * @cssprop --wcs-header-title-color - Color of the title\n * @cssprop --wcs-header-title-font-weight - Font weight of the title\n * @cssprop --wcs-header-title-font-size - Font size of the title\n * \n */\n@Component({\n    tag: 'wcs-header',\n    styleUrl: 'header.scss',\n    shadow: true\n})\nexport class Header implements ComponentInterface {\n    @Element() private el!: HTMLElement;\n    private nativeHeader!: HTMLElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, HEADER_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeHeader, attr, value);\n    }\n    \n    hostData() {\n        return {\n            'slot': 'header'\n        };\n    }\n\n    render() {\n        return (\n            <header role=\"banner\" ref={(el) => (this.nativeHeader = el)} {...this.inheritedAttributes}>\n                <slot name=\"logo\"/>\n                <slot name=\"title\"/>\n                <slot name=\"actions\"/>\n            </header>\n        );\n    }\n}\n"],"mappings":"2GAAA,MAAMA,EAAY,8oCAClB,MAAAC,EAAeD,ECGf,MAAME,EAAyB,G,MA0BlBC,EAAM,MALnB,WAAAC,CAAAC,G,UAQYC,KAAAC,oBAA4C,E,CAEpD,iBAAAC,GACIF,KAAKC,oBAAmBE,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsBL,KAAKM,KAC3BC,EAAkBP,KAAKM,GAAIV,G,CAKtC,sBAAMY,CAAiBC,EAAyBC,GAC5CC,EAAqBX,KAAKY,aAAcH,EAAMC,E,CAGlD,QAAAG,GACI,MAAO,CACHC,KAAQ,S,CAIhB,gBAAAC,GACI,OACIC,EAAA,SAAAb,OAAAC,OAAA,CAAAa,IAAA,2CAAQC,KAAK,SAASC,IAAMb,GAAQN,KAAKY,aAAeN,GAASN,KAAKC,qBAClEe,EAAA,QAAAC,IAAA,2CAAMG,KAAK,SACXJ,EAAA,QAAAC,IAAA,2CAAMG,KAAK,UACXJ,EAAA,QAAAC,IAAA,2CAAMG,KAAK,Y"}

package/dist/wcs/p-806315e6.entry.js

@@ -1,2 +0,0 @@
-import{r as s,h as t,g as e}from"./p-32e583ea.js";import{i,a,s as r}from"./p-a3aece7a.js";const c=["title"];const n=class{constructor(t){s(this,t);this.inheritedAttributes={};this.icon=undefined;this.size=undefined}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},i(this.el)),a(this.el,c))}async setAriaAttribute(s,t){r(this.nativeIcon,s,t)}render(){const s={class:{[`icons-${this.icon}`]:true,[`icons-size-${this.size}`]:true}};return t("i",Object.assign({key:"bb5a7a275de88a4c02dbd15899516a860579fa35"},s,{ref:s=>this.nativeIcon=s},this.inheritedAttributes))}get el(){return e(this)}};export{n as wcs_icon};
-//# sourceMappingURL=p-806315e6.entry.js.map

package/dist/wcs/p-85a5bbb7.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["textareaCss","WcsTextareaStyle0","TEXTAREA_INHERITED_ATTRS","Textarea","this","inputId","textareaIds","inheritedAttributes","onInput","ev","nativeInput","value","wcsInput","emit","onChange","_","wcsChange","onFocus","fireFocusEvents","wcsFocus","onBlur","wcsBlur","debounceChanged","debounceEvent","debounce","valueChanged","getValue","runAutoGrow","connectedCallback","document","dispatchEvent","CustomEvent","detail","el","disconnectedCallback","componentWillLoad","Object","assign","inheritAriaAttributes","inheritAttributes","componentDidLoad","raf","autoGrow","readTask","style","height","scrollHeight","setAriaAttribute","attr","setOrRemoveAttribute","fitContent","setBlur","blur","getInputElement","Promise","resolve","render","resize","h","Host","key","disabled","icon","size","class","ref","autoCapitalize","autocapitalize","autoFocus","autofocus","enterKeyHint","enterkeyhint","inputMode","inputmode","maxLength","maxlength","minLength","minlength","name","placeholder","readOnly","readonly","required","spellcheck","cols","rows","wrap"],"sources":["src/components/textarea/textarea.scss?tag=wcs-textarea&encapsulation=shadow","src/components/textarea/textarea.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n@import '../../style/placeholder.scss';\n\n:host {\n    --wcs-textarea-text-color-disabled: var(--wcs-semantic-color-text-disabled);\n    --wcs-textarea-value-color: var(--wcs-semantic-color-text-primary);\n    --wcs-textarea-value-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-textarea-placeholder-color: var(--wcs-semantic-color-text-tertiary);\n    --wcs-textarea-placeholder-font-weight: var(--wcs-semantic-font-weight-roman);\n    --wcs-textarea-placeholder-font-style: var(--wcs-semantic-font-style-control-placeholder);\n\n    --wcs-textarea-icon-color-default: var(--wcs-semantic-color-foreground-brand);\n    --wcs-textarea-icon-color-disabled: var(--wcs-semantic-color-foreground-disabled);\n    --wcs-textarea-icon-color-focus: var(--wcs-semantic-color-foreground-brand);\n\n    --wcs-textarea-border-color-default: var(--wcs-semantic-color-border-primary);\n    --wcs-textarea-border-color-disabled: var(--wcs-semantic-color-border-disabled);\n    --wcs-textarea-border-color-error: var(--wcs-semantic-color-border-critical);\n    --wcs-textarea-border-color-focus: var(--wcs-semantic-color-border-control-focus);\n\n    --wcs-textarea-border-style-default: solid;\n    --wcs-textarea-border-style-error: solid;\n    --wcs-textarea-border-style-focus: var(--wcs-semantic-border-style-focus-control);\n\n    --wcs-internal-textarea-border-radius-left: var(--wcs-textarea-border-radius-left, var(--wcs-semantic-border-radius-base)); // Overridden from prefix suffix group in form-field\n    --wcs-internal-textarea-border-radius-right: var(--wcs-textarea-border-radius-right, var(--wcs-semantic-border-radius-base)); // Overridden from prefix suffix group in form-field\n\n    --wcs-textarea-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-textarea-border-width-focus: var(--wcs-semantic-border-width-large);\n\n    --wcs-textarea-gap: var(--wcs-semantic-spacing-base);\n\n    --wcs-textarea-padding-top: var(--wcs-semantic-spacing-base);\n    --wcs-textarea-padding-bottom: var(--wcs-semantic-spacing-base);\n    --wcs-internal-textarea-padding-left: var(--wcs-textarea-padding-left, var(--wcs-semantic-spacing-large));\n    --wcs-internal-textarea-padding-right: var(--wcs-textarea-padding-right, var(--wcs-semantic-spacing-large));\n\n    --wcs-textarea-min-height: var(--wcs-semantic-size-m);\n    --wcs-internal-textarea-max-height: var(--wcs-textarea-max-height, unset);\n\n    --wcs-textarea-background-color: var(--wcs-semantic-color-background-control-default);\n\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--wcs-textarea-gap);\n    width: 100%;\n    border-radius: var(--wcs-internal-textarea-border-radius-left) var(--wcs-internal-textarea-border-radius-right) var(--wcs-internal-textarea-border-radius-right) var(--wcs-internal-textarea-border-radius-left);\n    background-color: var(--wcs-textarea-background-color);\n    outline: var(--wcs-textarea-border-style-default) var(--wcs-textarea-border-width) var(--wcs-textarea-border-color-default);\n    outline-offset: calc(-1 * var(--wcs-textarea-border-width));\n    background-clip: padding-box;\n\n    box-sizing: border-box;\n\n    textarea {\n        box-sizing: border-box;\n        font-family: inherit;\n        overflow: auto;\n        flex: 1;\n        width: 100%;\n        min-height: var(--wcs-textarea-min-height);\n        max-height: var(--wcs-internal-textarea-max-height);\n        background-color: transparent;\n        color: var(--wcs-textarea-value-color);\n        font-weight: var(--wcs-textarea-value-font-weight) !important;\n        border: none;\n        padding-top: var(--wcs-textarea-padding-top);\n        padding-bottom: var(--wcs-textarea-padding-bottom);\n        padding-left: var(--wcs-internal-textarea-padding-left);\n        padding-right: var(--wcs-internal-textarea-padding-right);\n        font-size: 1rem;\n        line-height: 1.5;\n\n        &::placeholder {\n            @include placeholder(var(--wcs-textarea-placeholder-color), var(--wcs-textarea-placeholder-font-weight), var(--wcs-textarea-placeholder-font-style));\n        }\n    }\n\n    textarea:focus {\n        box-shadow: none;\n        outline: 0;\n    }\n\n    wcs-mat-icon {\n        margin-left: var(--wcs-internal-textarea-padding-left);\n        color: var(--wcs-textarea-icon-color-default);\n    }\n}\n\n:host([disabled]) {\n    --wcs-textarea-background-color: var(--wcs-semantic-color-background-control-disabled);\n    outline: var(--wcs-textarea-border-style-default) var(--wcs-textarea-border-width) var(--wcs-textarea-border-color-disabled);\n\n    textarea {\n        color: var(--wcs-textarea-text-color-disabled);\n        cursor: not-allowed;\n\n        &::placeholder {\n            color: var(--wcs-textarea-text-color-disabled);\n        }\n    }\n\n    wcs-mat-icon {\n        color: var(--wcs-textarea-icon-color-disabled);\n    }\n}\n\n:host([icon]) {\n    textarea {\n        padding-left: 0;\n    }\n}\n\n:host([state=error]) {\n    outline-color: var(--wcs-textarea-border-color-error) !important;\n}\n\n:host(:focus-within) {\n    outline: var(--wcs-textarea-border-style-focus) var(--wcs-textarea-border-width-focus) var(--wcs-textarea-border-color-focus);\n    outline-offset: calc(var(--wcs-textarea-border-width-focus) * -1);\n\n    wcs-mat-icon {\n        color: var(--wcs-textarea-icon-color-focus);\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Method,\n    Prop,\n    Watch,\n    h,\n    Host,\n    EventEmitter,\n    Element,\n    Event,\n    Build,\n    readTask\n} from '@stencil/core';\nimport {\n    debounceEvent,\n    inheritAriaAttributes,\n    inheritAttributes,\n    raf,\n    setOrRemoveAttribute\n} from '../../utils/helpers';\nimport { \n    TextareaChangeEventDetail,\n    WcsTextareaInputMode, \n    WcsTextareaEnterKeyHint, \n    WcsTextareaResize, \n    WcsTextareaInputState,\n    WcsTextareaWrap\n} from './textarea-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst TEXTAREA_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * Mainly inspired from Ionic Textarea Component.\n * \n * ## Accessibility guidelines 💡\n * > - If you use wcs-textarea outside a wcs-form-field, you have to manage the label and the error message yourself.\n * > You can use the `aria-label` attribute to provide a label for screen readers but adds no visual label.\n *\n * @cssprop --wcs-textarea-icon-color-default - Default icon color whe the textarea is not focused\n * @cssprop --wcs-textarea-icon-color-focus - Icon color when the textarea is focused \n * @cssprop --wcs-textarea-icon-color-disabled - Icon color when the textarea is disabled\n * \n * @cssprop --wcs-textarea-background-color - Background color of the textarea\n *\n * @cssprop --wcs-textarea-border-radius-left - Border radius of the left side of the textarea\n * @cssprop --wcs-textarea-border-radius-right - Border radius of the right side of the textarea\n * \n * @cssprop --wcs-textarea-border-width - Border width of the textarea when not focused\n * @cssprop --wcs-textarea-border-width-focus - Border width of the textarea when focused\n * \n * @cssprop --wcs-textarea-border-color-default - Default border color of the textarea when not focused\n * @cssprop --wcs-textarea-border-color-disabled - Border color of the textarea when disabled\n * @cssprop --wcs-textarea-border-color-error - Border color of the textarea when in error state\n * @cssprop --wcs-textarea-border-color-focus -  Border color of the textarea when focused\n * \n * @cssprop --wcs-textarea-value-color - Color of the value when the textarea is not focused\n * @cssprop --wcs-textarea-value-font-weight - Font weight of the textarea value\n * \n * @cssprop --wcs-textarea-placeholder-color - Color of the textarea placeholder\n * @cssprop --wcs-textarea-placeholder-font-weight - Font weight of the textarea placeholder\n * @cssprop --wcs-textarea-placeholder-font-style - Font style of the textarea placeholder\n * \n * @cssprop --wcs-textarea-text-color-disabled - Color of the value when the textarea is disabled\n * \n * @cssprop --wcs-textarea-border-style-default - Border style default of the textarea when not focused\n * @cssprop --wcs-textarea-border-style-error - Border style default of the textarea in error state\n * @cssprop --wcs-textarea-border-style-focus - Border style default of the textarea when focused\n * \n * @cssprop --wcs-textarea-min-height - Min height of the textarea component\n * @cssprop --wcs-textarea-max-height - Max height of the textarea component\n * \n * @cssprop --wcs-textarea-padding-top - Padding top of the textarea\n * @cssprop --wcs-textarea-padding-bottom - Padding bottom of the textarea\n * @cssprop --wcs-textarea-padding-left - Padding left of the textarea\n * @cssprop --wcs-textarea-padding-right - Padding right of the textarea\n * \n * @cssprop --wcs-textarea-gap - Gap between textarea and icon (prefix/suffix)\n */\n@Component({\n    tag: 'wcs-textarea',\n    styleUrl: 'textarea.scss',\n    shadow: {\n        delegatesFocus: true\n    },\n})\nexport class Textarea implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeInput?: HTMLTextAreaElement;\n    private inputId = `wcs-textarea-${textareaIds++}`;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /**\n     * This is required for a WebKit bug which requires us to\n     * blur and focus an input to properly focus the input in\n     * an item with delegatesFocus. It will no longer be needed\n     * with iOS 14.\n     *\n     * @internal\n     */\n    @Prop() fireFocusEvents = true;\n\n    /**\n     * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n     */\n    @Prop() autocapitalize = 'none';\n\n    /**\n     * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n     */\n    @Prop() autofocus = false;\n\n    /**\n     * Set the amount of time, in milliseconds, to wait to trigger the `wcsInput` event after each keystroke.\n     * This also impacts form bindings such as `ngModel` or `v-model`.\n     */\n    @Prop() debounce = 0;\n\n    @Watch('debounce')\n    protected debounceChanged() {\n        this.wcsInput = debounceEvent(this.wcsInput, this.debounce);\n    }\n\n    /**\n     * If `true`, the user cannot interact with the textarea.\n     */\n    @Prop() disabled = false;\n\n    /**\n     * Name of the material icon to add to the input\n     */\n    @Prop() icon: string;\n\n    /**\n     * A hint to the browser for which keyboard to display.\n     */\n    @Prop() inputmode?: WcsTextareaInputMode;\n\n    /**\n     * A hint to the browser for which enter key to display.\n     */\n    @Prop() enterkeyhint?: WcsTextareaEnterKeyHint;\n\n    /**\n     * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.\n     */\n    @Prop() maxlength?: number;\n\n    /**\n     * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.\n     */\n    @Prop() minlength?: number;\n\n    /**\n     * The name of the control, which is submitted with the form data.\n     */\n    @Prop() name: string = this.inputId;\n\n    /**\n     * Instructional text that shows before the input has a value.\n     */\n    @Prop() placeholder?: string | null;\n\n    /**\n     * If `true`, the user cannot modify the value.\n     */\n    @Prop() readonly = false;\n\n    /**\n     * If `true`, the user must fill in a value before submitting a form.\n     */\n    @Prop() required = false;\n\n    /**\n     * If `true`, the element will have its spelling and grammar checked.\n     */\n    @Prop() spellcheck = false;\n\n    /**\n     * Specifies the state of the input. By default the input is in an initial state but you can set it to 'error' state if the data given by the user is not valid.\n     */\n    @Prop({reflect: true}) state: WcsTextareaInputState = 'initial';\n\n    /**\n     * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.  \n     * Note : at the moment, modifying the width is only possible if you add some custom CSS to the component,\n     * for example by overriding the `width` CSS property. See the Resize section for an example on how to do it.\n     */\n    @Prop() cols?: number;\n\n    /**\n     * The number of visible text lines for the control.\n     */\n    @Prop() rows?: number;\n\n    /**\n     * Indicates how the control wraps text.\n     */\n    @Prop() wrap?: WcsTextareaWrap;\n\n    /**\n     * If `true`, the element height will increase based on the value.\n     */\n    @Prop() autoGrow = false;\n\n    /**\n     * The value of the textarea.\n     */\n    @Prop({mutable: true}) value?: string | null = '';\n\n    /**\n     * Indicates how the textarea should be resizable.  \n     * Note : at the moment horizontal resizing is only possible if you add custom CSS to the component,\n     * see the Resize section for an example.\n     */\n    @Prop({reflect: true}) resize?: WcsTextareaResize;\n\n    /**\n     * Update the native input element when the value changes\n     */\n    @Watch('value')\n    protected valueChanged() {\n        const nativeInput = this.nativeInput;\n        const value = this.getValue();\n        if (nativeInput && nativeInput.value !== value) {\n            nativeInput.value = value;\n        }\n        this.runAutoGrow();\n    }\n\n    /**\n     * Emitted when the input value has changed.- See https://developer.mozilla.org/en-US/docs/Web/Events/change\n     */\n    @Event() wcsChange!: EventEmitter<TextareaChangeEventDetail>;\n\n    /**\n     * Emitted when a keyboard input occurred. See https://developer.mozilla.org/en-US/docs/Web/Events/input\n     */\n    @Event() wcsInput!: EventEmitter<KeyboardEvent>;\n\n    /**\n     * Emitted when the input loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    /**\n     * Emitted when the input has focus.\n     */\n    @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n    connectedCallback() {\n        this.debounceChanged();\n        if (Build.isBrowser) {\n            document.dispatchEvent(new CustomEvent('wcsInputDidLoad', {\n                detail: this.el\n            }));\n        }\n    }\n\n    disconnectedCallback() {\n        if (Build.isBrowser) {\n            document.dispatchEvent(new CustomEvent('wcsInputDidUnload', {\n                detail: this.el\n            }));\n        }\n    }\n\n    componentWillLoad() {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, TEXTAREA_INHERITED_ATTRS)\n        };\n    }\n\n    componentDidLoad() {\n        raf(() => this.runAutoGrow());\n    }\n\n    private runAutoGrow() {\n        const nativeInput = this.nativeInput;\n        if (nativeInput && this.autoGrow) {\n            readTask(() => {\n                nativeInput.style.height = 'auto';\n                nativeInput.style.height = nativeInput.scrollHeight + 'px';\n            });\n        }\n    }\n    \n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeInput, attr, value);\n    }\n\n    /**\n     * This method make the textarea automatically adopt the size of the content without a scroll bar\n     */\n    @Method()\n    async fitContent() {\n        raf(() => this.runAutoGrow());\n    }\n\n    /**\n     * Sets blur on the native `textarea` in `wcs-textarea`. Use this method instead of the global\n     * `textarea.blur()`.\n     * @internal\n     */\n    @Method()\n    async setBlur() {\n        if (this.nativeInput) {\n            this.nativeInput.blur();\n        }\n    }\n\n    /**\n     * Returns the native `<textarea>` element used under the hood.\n     */\n    @Method()\n    getInputElement(): Promise<HTMLTextAreaElement> {\n        // tslint:disable-next-line:no-non-null-assertion\n        return Promise.resolve(this.nativeInput!);\n    }\n\n    private getValue(): string {\n        return this.value || '';\n    }\n\n    private onInput = (ev: Event) => {\n        if (this.nativeInput) {\n            this.value = this.nativeInput.value;\n        }\n        this.wcsInput.emit(ev as KeyboardEvent);\n    }\n    \n    private onChange = (_: Event) => {\n        this.wcsChange.emit({value: this.nativeInput.value});\n    }\n\n    private onFocus = (ev: FocusEvent) => {\n        if (this.fireFocusEvents) {\n            this.wcsFocus.emit(ev);\n        }\n    }\n\n    private onBlur = (ev: FocusEvent) => {\n        if (this.fireFocusEvents) {\n            this.wcsBlur.emit(ev);\n        }\n    }\n\n    render() {\n        const value = this.getValue();\n        const style = {\n            ...(this.resize && {'resize': this.resize})\n        }\n\n        return (\n            <Host\n                aria-disabled={this.disabled ? 'true' : null}\n            >\n                {this.icon ? (<wcs-mat-icon icon={this.icon} size=\"m\"></wcs-mat-icon>) : null}\n                <textarea\n                    class=\"native-textarea\"\n                    ref={el => this.nativeInput = el}\n                    autoCapitalize={this.autocapitalize}\n                    autoFocus={this.autofocus}\n                    enterKeyHint={this.enterkeyhint}\n                    inputMode={this.inputmode}\n                    disabled={this.disabled}\n                    maxLength={this.maxlength}\n                    minLength={this.minlength}\n                    name={this.name}\n                    placeholder={this.placeholder || ''}\n                    readOnly={this.readonly}\n                    required={this.required}\n                    spellcheck={this.spellcheck}\n                    cols={this.cols}\n                    rows={this.rows}\n                    wrap={this.wrap}\n                    onInput={this.onInput}\n                    onChange={this.onChange}\n                    onBlur={this.onBlur}\n                    onFocus={this.onFocus}\n                    style={style}\n                    {...this.inheritedAttributes}\n                >\n            {value}\n          </textarea>\n            </Host>\n        );\n    }\n}\n\nlet textareaIds = 0;\n"],"mappings":"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"}

package/dist/wcs/p-8780a429.entry.js

@@ -1,2 +0,0 @@
-import{r as a,h as e,H as t,g as c}from"./p-32e583ea.js";import{i as o,a as i,s as r,o as s,b as n}from"./p-a3aece7a.js";import{c as l}from"./p-0f864e86.js";const d=':host{--wcs-galactic-menu-background-color:var(--wcs-semantic-color-background-surface-brand);--wcs-galactic-menu-padding-horizontal:var(--wcs-semantic-spacing-large);--wcs-galactic-menu-gap:var(--wcs-semantic-spacing-large);--wcs-galactic-menu-height:var(--wcs-semantic-size-s);--wcs-galactic-menu-icon-focus-outline-color:var(--wcs-galactic-text-color, white);--wcs-galactic-menu-overlay-color:var(--wcs-semantic-color-text-inverse);--wcs-galactic-menu-overlay-background-color:var(--wcs-semantic-color-background-surface-inverse);--wcs-galactic-menu-overlay-padding:var(--wcs-semantic-spacing-large);display:flex;align-items:center;box-sizing:border-box;height:var(--wcs-galactic-menu-height);gap:var(--wcs-galactic-menu-gap);padding:0 var(--wcs-galactic-menu-padding-horizontal);background-color:var(--wcs-galactic-menu-background-color)}#menu{display:none;background-color:var(--wcs-galactic-menu-overlay-background-color);color:var(--wcs-galactic-menu-overlay-color);padding:var(--wcs-galactic-menu-overlay-padding)}#menu[data-show]{display:block;z-index:9999}#menu[data-popper-placement^=top]>#arrow{bottom:-4px}#menu[data-popper-placement^=bottom]>#arrow{top:-4px}#menu[data-popper-placement^=left]>#arrow{right:-4px}#menu[data-popper-placement^=right]>#arrow{left:-4px}#arrow,#arrow::before{position:absolute;width:8px;height:8px;background:inherit}#arrow{visibility:hidden}#arrow::before{visibility:visible;content:"";transform:rotate(45deg)}button{background:transparent;border:none;color:inherit;cursor:pointer;user-select:none}button:focus-visible{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-galactic-menu-icon-focus-outline-color);outline-offset:0;border-radius:0.1rem}';const u=d;const p=["tabindex","title"];const m=class{constructor(e){a(this,e);this.inheritedAttributes={};this.showPopoverMenu=false;this.text=undefined}componentDidLoad(){this.menu=this.el.shadowRoot.getElementById("toggle-menu-icon");this.tooltip=this.el.shadowRoot.getElementById("menu");this.popper=l(this.menu,this.tooltip,{placement:"bottom-end",modifiers:[{name:"offset",options:{offset:[0,8]}}]})}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},o(this.el)),i(this.el,p))}async setAriaAttribute(a,e){r(this.menuButton,a,e)}onWindowClickEvent(a){if(s(a,this.tooltip)||s(a,this.menu)){return}else{if(this.showPopoverMenu){this.toggleMenu()}}}onKeyDown(a){var e;if(n(a)){a.preventDefault();this.showPopoverMenu=false;(e=this.menuButton)===null||e===void 0?void 0:e.focus()}}toggleMenu(){this.showPopoverMenu=!this.showPopoverMenu}componentDidRender(){if(this.popper){this.popper.update()}}render(){return e(t,{key:"99bff08532f4d0bdd20c44781ab7f1e10bd4fad8"},e("span",{key:"c4827722002c9d558a9a412556be08ff36718a53"},this.text),e("button",Object.assign({key:"fb4eb7c33068169949918b6bd6cc9c96cdde8608","aria-haspopup":"true","aria-controls":"menu",ref:a=>{this.menuButton=a},"aria-expanded":this.showPopoverMenu?"true":"false"},this.inheritedAttributes,{onClick:a=>this.toggleMenu()}),e("wcs-mat-icon",{key:"72b08ab8670569c8911ef041a71782cb14427e84",id:"toggle-menu-icon",icon:"more_horiz",size:"m"})),e("span",{key:"d0491419b48c7fbe0d773f14c541bb5af7912684",id:"menu",role:"menu","data-show":this.showPopoverMenu},e("div",{key:"7f2ba9b81f9041c421f21b9da6c83f0096155161",id:"arrow","data-popper-arrow":true}),e("slot",{key:"c5acecba63143c61982bceca50eea5656130f908"})))}get el(){return c(this)}};m.style=u;export{m as wcs_galactic_menu};
-//# sourceMappingURL=p-8780a429.entry.js.map

package/dist/wcs/p-8780a429.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["galacticMenuCss","WcsGalacticMenuStyle0","GALACTIC_MENU_INHERITED_ATTRS","Galactic","this","inheritedAttributes","componentDidLoad","menu","el","shadowRoot","getElementById","tooltip","popper","createPopper","placement","modifiers","name","options","offset","componentWillLoad","Object","assign","inheritAriaAttributes","inheritAttributes","setAriaAttribute","attr","value","setOrRemoveAttribute","menuButton","onWindowClickEvent","event","clickInsideElement","showPopoverMenu","toggleMenu","onKeyDown","_event","isEscapeKey","preventDefault","_a","focus","componentDidRender","update","render","h","Host","key","text","ref","onClick","_","id","icon","size","role"],"sources":["src/components/galactic-menu/galactic-menu.scss?tag=wcs-galactic-menu&encapsulation=shadow","src/components/galactic-menu/galactic-menu.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    --wcs-galactic-menu-background-color: var(--wcs-semantic-color-background-surface-brand);\n    --wcs-galactic-menu-padding-horizontal: var(--wcs-semantic-spacing-large);\n    --wcs-galactic-menu-gap: var(--wcs-semantic-spacing-large);\n    --wcs-galactic-menu-height: var(--wcs-semantic-size-s);\n\n    --wcs-galactic-menu-icon-focus-outline-color: var(--wcs-galactic-text-color, white); /* Inherit from galactic */\n    --wcs-galactic-menu-overlay-color: var(--wcs-semantic-color-text-inverse);\n    --wcs-galactic-menu-overlay-background-color: var(--wcs-semantic-color-background-surface-inverse);\n    --wcs-galactic-menu-overlay-padding: var(--wcs-semantic-spacing-large);\n\n    display: flex;\n    align-items: center;\n    box-sizing: border-box;\n    height: var(--wcs-galactic-menu-height);\n    gap: var(--wcs-galactic-menu-gap);\n    padding: 0 var(--wcs-galactic-menu-padding-horizontal);\n    background-color: var(--wcs-galactic-menu-background-color);\n\n}\n#menu {\n    display: none;\n    background-color: var(--wcs-galactic-menu-overlay-background-color);\n    color: var(--wcs-galactic-menu-overlay-color);\n    padding: var(--wcs-galactic-menu-overlay-padding);\n}\n#menu[data-show] {\n    display: block;\n    z-index: 9999;\n}\n#menu[data-popper-placement^='top'] > #arrow {\n    bottom: -4px;\n}\n\n#menu[data-popper-placement^='bottom'] > #arrow {\n    top: -4px;\n}\n\n#menu[data-popper-placement^='left'] > #arrow {\n    right: -4px;\n}\n\n#menu[data-popper-placement^='right'] > #arrow {\n    left: -4px;\n}\n\n#arrow,\n#arrow::before {\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    background: inherit;\n}\n\n#arrow {\n    visibility: hidden;\n}\n\n#arrow::before {\n    visibility: visible;\n    content: '';\n    transform: rotate(45deg);\n}\n\nbutton {\n    background: transparent;\n    border: none;\n    color: inherit;\n\n    cursor: pointer;\n    user-select: none;\n\n    &:focus-visible {\n        @include focus-outline(var(--wcs-galactic-menu-icon-focus-outline-color), $outline-offset: 0);\n    }\n}\n","import { Component, ComponentInterface, Element, h, Host, Listen, Method, Prop, State } from '@stencil/core';\nimport { Instance, createPopper } from '@popperjs/core';\nimport {\n    clickInsideElement,\n    inheritAriaAttributes,\n    inheritAttributes,\n    isEscapeKey,\n    setOrRemoveAttribute\n} from '../../utils/helpers';\nimport { AriaAttributeName } from \"../../utils/mutable-aria-attribute\";\n\n\nconst GALACTIC_MENU_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * *Part of communication design system*\n * You can put a wcs-galactic-menu inside a wcs-galactic component to add an extra menu\n * \n * @slot <no-name> - Main container slot\n * \n * @cssprop --wcs-galactic-menu-background-color - Background color of the menu\n * @cssprop --wcs-galactic-menu-padding-horizontal - Horizontal padding of the menu\n * @cssprop --wcs-galactic-menu-gap - Gap between items in the menu\n * @cssprop --wcs-galactic-menu-height - Height of the menu\n * @cssprop --wcs-galactic-menu-icon-focus-outline-color - Color of the focus outline on the icon\n * @cssprop --wcs-galactic-menu-overlay-background-color - Background color of the overlay\n * @cssprop --wcs-galactic-menu-overlay-padding - Padding of the overlay\n * @cssprop --wcs-galactic-menu-overlay-color - Color of the overlay\n */\n@Component({\n    tag: 'wcs-galactic-menu',\n    styleUrl: 'galactic-menu.scss',\n    shadow: true\n})\nexport class Galactic implements ComponentInterface {\n    @Element() private el: HTMLWcsGalacticMenuElement;\n    private menuButton!: HTMLButtonElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    @State() private showPopoverMenu: boolean = false;\n    private popper: Instance;\n    /**\n     * Text to be displayed in the galactic bar\n     */\n    @Prop() text: string;\n    private menu;\n    private tooltip;\n\n    componentDidLoad() {\n        this.menu = this.el.shadowRoot.getElementById('toggle-menu-icon');\n        this.tooltip = this.el.shadowRoot.getElementById('menu');\n        this.popper = createPopper(this.menu, this.tooltip, {\n            placement: 'bottom-end',\n            modifiers: [\n                {\n                    name: 'offset',\n                    options: {\n                        offset: [0, 8]\n                    }\n                }\n            ]\n        });\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, GALACTIC_MENU_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.menuButton, attr, value);\n    }\n\n\n    @Listen('click', {target: 'window'})\n    onWindowClickEvent(event: MouseEvent) {\n        if (clickInsideElement(event, this.tooltip) || clickInsideElement(event, this.menu)) {\n            return;\n        } else {\n            if (this.showPopoverMenu) {\n                this.toggleMenu();\n            }\n        }\n    }\n\n    @Listen('keydown')\n    onKeyDown(_event: KeyboardEvent) {\n        if (isEscapeKey(_event)) {\n            _event.preventDefault();\n            this.showPopoverMenu = false;\n            this.menuButton?.focus();\n        }\n    }\n    \n    private toggleMenu() {\n        this.showPopoverMenu = !this.showPopoverMenu;\n    }\n\n    componentDidRender() {\n        if (this.popper) {\n            this.popper.update();\n        }\n    }\n\n    render(): any {\n        return (\n            <Host>\n                <span>{this.text}</span>\n                <button aria-haspopup=\"true\"\n                        aria-controls=\"menu\"\n                        ref={el => {\n                            this.menuButton = el\n                        }}\n                        aria-expanded={this.showPopoverMenu ? \"true\" : \"false\"}\n                        {...this.inheritedAttributes}\n                        onClick={_ => this.toggleMenu()}>\n                    <wcs-mat-icon id=\"toggle-menu-icon\" icon=\"more_horiz\" size=\"m\"></wcs-mat-icon>\n                </button>\n                <span id=\"menu\" role=\"menu\" data-show={this.showPopoverMenu}>\n                    <div id=\"arrow\" data-popper-arrow />\n                    <slot/>\n                </span>\n            </Host>\n        );\n    }\n}\n"],"mappings":"6JAAA,MAAMA,EAAkB,0qDACxB,MAAAC,EAAeD,ECWf,MAAME,EAAgC,CAAC,WAAY,S,MAsBtCC,EAAQ,M,yBAGTC,KAAAC,oBAA4C,G,qBAER,M,oBAS5C,gBAAAC,GACIF,KAAKG,KAAOH,KAAKI,GAAGC,WAAWC,eAAe,oBAC9CN,KAAKO,QAAUP,KAAKI,GAAGC,WAAWC,eAAe,QACjDN,KAAKQ,OAASC,EAAaT,KAAKG,KAAMH,KAAKO,QAAS,CAChDG,UAAW,aACXC,UAAW,CACP,CACIC,KAAM,SACNC,QAAS,CACLC,OAAQ,CAAC,EAAG,O,CAOhC,iBAAAC,GACIf,KAAKC,oBAAmBe,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsBlB,KAAKI,KAC3Be,EAAkBnB,KAAKI,GAAIN,G,CAKtC,sBAAMsB,CAAiBC,EAAyBC,GAC5CC,EAAqBvB,KAAKwB,WAAYH,EAAMC,E,CAKhD,kBAAAG,CAAmBC,GACf,GAAIC,EAAmBD,EAAO1B,KAAKO,UAAYoB,EAAmBD,EAAO1B,KAAKG,MAAO,CACjF,M,KACG,CACH,GAAIH,KAAK4B,gBAAiB,CACtB5B,KAAK6B,Y,GAMjB,SAAAC,CAAUC,G,MACN,GAAIC,EAAYD,GAAS,CACrBA,EAAOE,iBACPjC,KAAK4B,gBAAkB,OACvBM,EAAAlC,KAAKwB,cAAU,MAAAU,SAAA,SAAAA,EAAEC,O,EAIjB,UAAAN,GACJ7B,KAAK4B,iBAAmB5B,KAAK4B,e,CAGjC,kBAAAQ,GACI,GAAIpC,KAAKQ,OAAQ,CACbR,KAAKQ,OAAO6B,Q,EAIpB,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,4CACDF,EAAA,QAAAE,IAAA,4CAAOzC,KAAK0C,MACZH,EAAA,SAAAvB,OAAAC,OAAA,CAAAwB,IAAA,2DAAsB,OAAM,gBACN,OACdE,IAAKvC,IACDJ,KAAKwB,WAAapB,CAAE,EACvB,gBACcJ,KAAK4B,gBAAkB,OAAS,SAC3C5B,KAAKC,oBAAmB,CAC5B2C,QAASC,GAAK7C,KAAK6B,eACvBU,EAAA,gBAAAE,IAAA,2CAAcK,GAAG,mBAAmBC,KAAK,aAAaC,KAAK,OAE/DT,EAAA,QAAAE,IAAA,2CAAMK,GAAG,OAAOG,KAAK,OAAM,YAAYjD,KAAK4B,iBACxCW,EAAA,OAAAE,IAAA,2CAAKK,GAAG,QAAO,2BACfP,EAAA,QAAAE,IAAA,8C"}

package/dist/wcs/p-8bd1b9ce.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as t,H as s,g as a}from"./p-32e583ea.js";import{S as c}from"./p-84e22272.js";const r=":host{--wcs-native-select-line-height:var(--wcs-semantic-font-line-height-large);--wcs-native-select-size-m:var(--wcs-semantic-size-m);--wcs-native-select-font-size-m:var(--wcs-semantic-font-size-m);--wcs-native-select-size-l:var(--wcs-semantic-size-l);--wcs-native-select-font-size-l:var(--wcs-semantic-font-size-l);--wcs-native-select-border-radius:var(--wcs-semantic-border-radius-base);--wcs-native-select-background-color:var(--wcs-semantic-color-background-control-default);--wcs-native-select-border-color-default:var(--wcs-semantic-color-border-primary);--wcs-native-select-border-color-disabled:var(--wcs-semantic-color-border-disabled);--wcs-native-select-border-color-focus:var(--wcs-semantic-color-border-control-focus);--wcs-native-select-border-color-error:var(--wcs-semantic-color-border-critical);--wcs-native-select-border-style-default:solid;--wcs-native-select-border-style-focus:var(--wcs-semantic-border-style-focus-control);--wcs-native-select-border-width:var(--wcs-semantic-border-width-default);--wcs-native-select-border-width-focus:var(--wcs-semantic-border-width-large);--wcs-native-select-value-color:var(--wcs-semantic-color-text-primary);--wcs-native-select-value-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-native-select-value-font-style:normal;--wcs-native-select-internal-padding-horizontal:var(--wcs-native-select-padding-horizontal-m);--wcs-native-select-padding-horizontal-m:var(--wcs-semantic-spacing-large);--wcs-native-select-padding-horizontal-l:var(--wcs-semantic-spacing-large);--wcs-native-select-arrow-color:var(--wcs-semantic-color-foreground-brand);--wcs-native-select-arrow-color-disabled:var(--wcs-semantic-color-foreground-disabled);--wcs-native-select-text-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-native-select-placeholder-color:var(--wcs-semantic-color-text-tertiary);--wcs-native-select-placeholder-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-native-select-placeholder-font-style:var(--wcs-semantic-font-style-control-placeholder);--wcs-native-select-option-color:var(--wcs-semantic-color-text-primary);--wcs-native-select-option-font-style:normal;--wcs-native-select-option-selected-color:var(--wcs-semantic-color-text-primary)}::slotted(select){box-sizing:border-box;-moz-appearance:none !important;-webkit-appearance:none !important;appearance:none !important;background-color:var(--wcs-native-select-background-color);color:var(--wcs-native-select-value-color);border-radius:var(--wcs-native-select-border-radius);border:none;outline:var(--wcs-native-select-border-style-default) var(--wcs-native-select-border-width) var(--wcs-native-select-border-color-default);outline-offset:calc(var(--wcs-native-select-border-width) * -1);user-select:none;cursor:pointer;line-height:var(--wcs-native-select-line-height);font-size:inherit;opacity:1;max-width:100%;flex-grow:1;padding-right:calc(var(--wcs-native-select-internal-padding-horizontal) + 24px);padding-left:var(--wcs-native-select-internal-padding-horizontal)}::slotted(select:disabled){cursor:not-allowed;color:var(--wcs-native-select-text-color-disabled);outline:var(--wcs-native-select-border-style-default) var(--wcs-native-select-border-width) var(--wcs-native-select-border-color-disabled);--wcs-native-select-background-color:var(--wcs-semantic-color-background-control-disabled);--wcs-native-select-value-color:var(--wcs-native-select-text-color-disabled)}::slotted(select[aria-invalid=true]){outline-style:var(--wcs-native-select-border-style-default);outline-color:var(--wcs-native-select-border-color-error) !important;outline-offset:calc(var(--wcs-native-select-border-width) * -1)}:host([data-disabled]) .select-wrapper .arrow-container .arrow{fill:var(--wcs-native-select-arrow-color-disabled)}:host([data-size=m]){font-size:var(--wcs-native-select-font-size-m);--wcs-native-select-internal-padding-horizontal:var(--wcs-native-select-padding-horizontal-m)}:host([data-size=m]) ::slotted(select){height:var(--wcs-native-select-size-m)}:host([data-size=l]){font-size:var(--wcs-native-select-font-size-l);--wcs-native-select-internal-padding-horizontal:var(--wcs-native-select-padding-horizontal-l)}:host([data-size=l]) ::slotted(select){height:var(--wcs-native-select-size-l)}::slotted(select:focus-visible){outline:var(--wcs-native-select-border-style-focus) var(--wcs-native-select-border-width-focus) var(--wcs-native-select-border-color-focus);outline-offset:calc(var(--wcs-native-select-border-width-focus) * -1)}.select-wrapper{position:relative;display:flex;flex-wrap:nowrap}svg{flex-shrink:0}.arrow{fill:var(--wcs-native-select-arrow-color)}.arrow-container{pointer-events:none;display:flex;align-items:center;vertical-align:center;position:absolute;top:0;bottom:0;right:calc(var(--wcs-native-select-internal-padding-horizontal) - 4px);margin:auto 0}";const i=r;const o=class{constructor(t){e(this,t);this.SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST=["disabled"];this.size="m";this.required=false;this.expanded=false;this.disabled=undefined}requiredChanged(e,t){if(e!==t){if(!this.selectElement)return;this.selectElement.required=this.required}}componentWillLoad(){this.selectElement=this.el.querySelector("select");if(!this.selectElement)throw new Error("wcs-native-select must be used with a native slotted select, please refer to the documentation.");this.onSelectedOptionChange();this.selectElement.addEventListener("change",(()=>{this.onSelectedOptionChange()}));this.observer=new MutationObserver((e=>{const t=e.filter((e=>this.SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST.includes(e.attributeName))).length>0;if(t){this.updateHostAttributeWithSlottedSelect()}if(e.filter((e=>e.attributeName==="class")).length>0){this._updateStyles()}}));this.updateHostAttributeWithSlottedSelect();this.observer.observe(this.selectElement,{attributes:true})}async setAriaAttribute(e,t){if(!this.selectElement)return;this.selectElement.setAttribute(e,t)}onSelectedOptionChange(){this._updateStyles()}_updateStyles(){if(this.isPlaceholderOptionSelected()){this.applyPlaceholderStylesOnNativeSlottedSelectElement()}else{this.applySelectedOptionStylesOnNativeSlottedSelectElement()}}isPlaceholderOptionSelected(){var e;return((e=Array.from(this.selectElement.options).filter((e=>e.selected))[0])===null||e===void 0?void 0:e.disabled)==true}applySelectedOptionStylesOnNativeSlottedSelectElement(){this.selectElement.style.color="var(--wcs-native-select-value-color)";this.selectElement.style.fontStyle="var(--wcs-native-select-value-font-style)";this.selectElement.style.fontWeight="var(--wcs-native-select-value-font-weight)";Array.from(this.selectElement.options).forEach((e=>{e.style.fontStyle="var(--wcs-native-select-option-font-style)";if(!e.disabled){e.style.color="var(--wcs-native-select-option-color)"}}))}applyPlaceholderStylesOnNativeSlottedSelectElement(){this.selectElement.style.color="var(--wcs-native-select-placeholder-color)";this.selectElement.style.fontWeight="var(--wcs-native-select-placeholder-font-weight)";this.selectElement.style.fontStyle="var(--wcs-native-select-placeholder-font-style)";Array.from(this.selectElement.options).forEach((e=>{e.style.fontStyle="var(--wcs-native-select-option-font-style)";if(!e.disabled){e.style.color="var(--wcs-native-select-option-color)"}}))}updateHostAttributeWithSlottedSelect(){var e;this.disabled=(e=this.selectElement)===null||e===void 0?void 0:e.hasAttribute("disabled")}disconnectedCallback(){var e,t;(e=this.observer)===null||e===void 0?void 0:e.disconnect();(t=this.selectElement)===null||t===void 0?void 0:t.removeEventListener("change",(()=>{this.onSelectedOptionChange()}))}async updateStyles(){this._updateStyles()}render(){return t(s,{key:"5e8929f9ccf25d5bc43afa782569e182ddb893a2",class:`${this.expanded?"expanded":""}`,"data-disabled":this.disabled,"data-size":this.size},t("div",{key:"a98a456f9473002729388146f323730b7241dd51",class:"select-wrapper"},t("slot",{key:"d8760d4e7814655e0b27c806d0324b06877e4dea"}),t("div",{key:"816e210db4ff583e55f8a37401668cfcc0bd0f6b",class:"arrow-container"},t(c,{key:"97c5a9e253f437fff1baeacb863a13731fe3dc83",up:this.expanded}))))}get el(){return a(this)}static get watchers(){return{required:["requiredChanged"]}}};o.style=i;export{o as wcs_native_select};
-//# sourceMappingURL=p-8bd1b9ce.entry.js.map

package/dist/wcs/p-8bd1b9ce.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["nativeSelectCss","WcsNativeSelectStyle0","NativeSelect","this","SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST","requiredChanged","newValue","oldValue","selectElement","required","componentWillLoad","el","querySelector","Error","onSelectedOptionChange","addEventListener","observer","MutationObserver","mutations","hasSpiedAttrMutation","filter","m","includes","attributeName","length","updateHostAttributeWithSlottedSelect","_updateStyles","observe","attributes","setAriaAttribute","attr","value","setAttribute","isPlaceholderOptionSelected","applyPlaceholderStylesOnNativeSlottedSelectElement","applySelectedOptionStylesOnNativeSlottedSelectElement","_a","Array","from","options","o","selected","disabled","style","color","fontStyle","fontWeight","forEach","option","hasAttribute","disconnectedCallback","disconnect","_b","removeEventListener","updateStyles","render","h","Host","key","class","expanded","size","SelectArrow","up"],"sources":["src/components/native-select/native-select.scss?tag=wcs-native-select&encapsulation=shadow","src/components/native-select/native-select.tsx"],"sourcesContent":[":host {\n    --wcs-native-select-line-height: var(--wcs-semantic-font-line-height-large);\n\n    --wcs-native-select-size-m: var(--wcs-semantic-size-m);\n    --wcs-native-select-font-size-m: var(--wcs-semantic-font-size-m);\n    --wcs-native-select-size-l: var(--wcs-semantic-size-l);\n    --wcs-native-select-font-size-l: var(--wcs-semantic-font-size-l);\n\n    --wcs-native-select-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-native-select-background-color: var(--wcs-semantic-color-background-control-default);\n\n    --wcs-native-select-border-color-default: var(--wcs-semantic-color-border-primary);\n    --wcs-native-select-border-color-disabled: var(--wcs-semantic-color-border-disabled);\n    --wcs-native-select-border-color-focus: var(--wcs-semantic-color-border-control-focus);\n    --wcs-native-select-border-color-error: var(--wcs-semantic-color-border-critical);\n\n    --wcs-native-select-border-style-default: solid;\n    --wcs-native-select-border-style-focus: var(--wcs-semantic-border-style-focus-control);\n\n    --wcs-native-select-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-native-select-border-width-focus: var(--wcs-semantic-border-width-large);\n\n    --wcs-native-select-value-color: var(--wcs-semantic-color-text-primary);\n    --wcs-native-select-value-font-weight: var(--wcs-semantic-font-weight-medium);\n    --wcs-native-select-value-font-style: normal; // ⚠️ UPDATE IN JS, IF REFACTOR THE NAME REFACTOR IN THE JS CODE\n\n    --wcs-native-select-internal-padding-horizontal: var(--wcs-native-select-padding-horizontal-m);\n    --wcs-native-select-padding-horizontal-m: var(--wcs-semantic-spacing-large);\n    --wcs-native-select-padding-horizontal-l: var(--wcs-semantic-spacing-large);\n\n    --wcs-native-select-arrow-color: var(--wcs-semantic-color-foreground-brand);\n    --wcs-native-select-arrow-color-disabled: var(--wcs-semantic-color-foreground-disabled);\n\n    --wcs-native-select-text-color-disabled: var(--wcs-semantic-color-text-disabled);\n\n    --wcs-native-select-placeholder-color: var(--wcs-semantic-color-text-tertiary);\n    --wcs-native-select-placeholder-font-weight: var(--wcs-semantic-font-weight-roman);\n    --wcs-native-select-placeholder-font-style: var(--wcs-semantic-font-style-control-placeholder);\n\n    --wcs-native-select-option-color: var(--wcs-semantic-color-text-primary);\n    --wcs-native-select-option-font-style: normal;\n\n    --wcs-native-select-option-selected-color: var(--wcs-semantic-color-text-primary);\n}\n\n::slotted(select) {\n    box-sizing: border-box;\n    -moz-appearance:none !important;\n    -webkit-appearance: none !important;\n    appearance: none !important;\n\n    background-color: var(--wcs-native-select-background-color);\n\n    color: var(--wcs-native-select-value-color);\n\n    border-radius: var(--wcs-native-select-border-radius);\n    border: none;\n\n    outline: var(--wcs-native-select-border-style-default) var(--wcs-native-select-border-width) var(--wcs-native-select-border-color-default);\n    outline-offset: calc(var(--wcs-native-select-border-width) * -1);\n    user-select: none;\n    cursor: pointer;\n    line-height: var(--wcs-native-select-line-height);\n    font-size: inherit;\n    opacity: 1; // user agent set 0.7 opacity on select by default when disabled (https://github.com/tailwindlabs/tailwindcss/discussions/11792#discussioncomment-6696015)\n\n    max-width: 100%;\n    flex-grow: 1;\n    padding-right: calc(var(--wcs-native-select-internal-padding-horizontal) + 24px); // To not let text overflow on arrow icon, we add 24px of padding\n    padding-left: var(--wcs-native-select-internal-padding-horizontal);\n}\n\n::slotted(select:disabled) {\n    cursor: not-allowed;\n    color: var(--wcs-native-select-text-color-disabled);\n    outline: var(--wcs-native-select-border-style-default) var(--wcs-native-select-border-width) var(--wcs-native-select-border-color-disabled);\n    --wcs-native-select-background-color: var(--wcs-semantic-color-background-control-disabled);\n    --wcs-native-select-value-color: var(--wcs-native-select-text-color-disabled);\n}\n\n::slotted(select[aria-invalid=true]) {\n    outline-style: var(--wcs-native-select-border-style-default);\n    outline-color: var(--wcs-native-select-border-color-error) !important;\n    outline-offset: calc(var(--wcs-native-select-border-width) * -1);\n}\n\n:host([data-disabled]) {\n    .select-wrapper {\n        .arrow-container {\n            .arrow {\n                fill: var(--wcs-native-select-arrow-color-disabled);\n            }\n        }\n    }\n}\n\n:host([data-size=m])  {\n    font-size: var(--wcs-native-select-font-size-m);\n    --wcs-native-select-internal-padding-horizontal: var(--wcs-native-select-padding-horizontal-m);\n\n    ::slotted(select) {\n        height: var(--wcs-native-select-size-m);\n    }\n}\n\n:host([data-size=l]) {\n    font-size: var(--wcs-native-select-font-size-l);\n    --wcs-native-select-internal-padding-horizontal: var(--wcs-native-select-padding-horizontal-l);\n\n    ::slotted(select) {\n        height: var(--wcs-native-select-size-l);\n    }\n}\n\n::slotted(select:focus-visible) {\n    outline: var(--wcs-native-select-border-style-focus) var(--wcs-native-select-border-width-focus) var(--wcs-native-select-border-color-focus);\n    outline-offset: calc(var(--wcs-native-select-border-width-focus) * -1);\n}\n\n.select-wrapper {\n    position: relative;\n\n    display: flex;\n    flex-wrap: nowrap;\n}\n\n// So the arrow on the right doesn't shrink when text overflows.\nsvg {\n    flex-shrink: 0;\n}\n\n.arrow {\n    fill: var(--wcs-native-select-arrow-color);\n}\n\n.arrow-container {\n    pointer-events: none;\n    display: flex;\n    align-items: center;\n    vertical-align: center;\n\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    right: calc(var(--wcs-native-select-internal-padding-horizontal) - 4px); // 4px is the blank space inside the arrow svg on the right\n    margin: auto 0;\n}\n","import { Component, h, ComponentInterface, State, Prop, Host, Element, Method, Watch } from '@stencil/core';\n\nimport { SelectArrow } from '../select/select-arrow';\nimport { WcsNativeSelectSize } from './native-select-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\n/**\n * The `wcs-native-select` component is designed to accept a native `<select>` element as a slotted child. This choice\n * allows developers to bind the `<select>` element using the framework of their choice, without the need to re-expose all the\n * properties of the `<select>` and `<option>` elements in this component.\n *\n * The component wraps the native `<select>` element and provides custom styles and behavior, while preserving the native\n * functionality and accessibility.\n *\n * ### ✅ Guidance\n *\n * - To have a placeholder, you must have an option as child which has `selected` attribute and `disabled`\n * attribute. You can add the `hidden` attribute to don't show the placeholder option in the options overlay.\n *\n * ### Example usage\n *\n * ```html\n * <wcs-native-select>\n *   <select>\n *     <option value=\"option1\">Option 1</option>\n *     <option value=\"option2\">Option 2</option>\n *     <option value=\"option3\">Option 3</option>\n *   </select>\n * </wcs-native-select>\n * ```\n *\n * ### Note\n * - We did not find a way to detect when the select is reset, if you want to apply the placeholder style when the\n * select is reset, you have to call the `updateStyles()` method manually.\n * - It is strongly recommended to use native-select when you don't have to support the multi-selection feature\n * - Use a native-select instead of a wcs-select if your application is mainly on mobile / tablet. The native behavior of the device will be used.\n *\n * @cssprop --wcs-native-select-line-height - Line height of the select\n * \n * @cssprop --wcs-native-select-size-m - Height of the select when size is 'm'\n * @cssprop --wcs-native-select-font-size-m - Font size of the select when size is 'm'\n * @cssprop --wcs-native-select-size-l - Height of the select when size is 'l'\n * @cssprop --wcs-native-select-font-size-l - Font size of the select when size is 'l'\n * \n * @cssprop --wcs-native-select-border-radius - Border radius of the select\n * \n * @cssprop --wcs-native-select-background-color - Background color of the select\n * \n * @cssprop --wcs-native-select-border-color-default - Border color of the select when not focused\n * @cssprop --wcs-native-select-border-color-disabled - Border color of the select when disabled\n * @cssprop --wcs-native-select-border-color-focus - Border color of the select when focused\n * @cssprop --wcs-native-select-border-color-error - Border color of the select when in error state\n * \n * @cssprop --wcs-native-select-border-style-default - Border style of the select when not focused\n * @cssprop --wcs-native-select-border-style-focus - Border style of the select when focused\n * \n * @cssprop --wcs-native-select-border-width - Border width of the select when not focused\n * @cssprop --wcs-native-select-border-width-focus - Border width of the select when focused\n * \n * @cssprop --wcs-native-select-value-color - Color of the selected value\n * @cssprop --wcs-native-select-value-font-weight - Font weight of the selected value\n * @cssprop --wcs-native-select-value-font-style - Font style of the selected value\n * \n * @cssprop --wcs-native-select-padding-horizontal-m - Padding horizontal of the select when size is 'm'\n * @cssprop --wcs-native-select-padding-horizontal-l - Padding horizontal of the select when size is 'l'\n * \n * @cssprop --wcs-native-select-arrow-color - Color of the select arrow\n * @cssprop --wcs-native-select-arrow-color-disabled - Color of the select arrow when the select is disabled\n * \n * @cssprop --wcs-native-select-text-color-disabled - Color of the text when the select is disabled\n *\n * @cssprop --wcs-native-select-placeholder-color - Color of the placeholder\n * @cssprop --wcs-native-select-placeholder-font-weight - Font weight of the placeholder\n * @cssprop --wcs-native-select-placeholder-font-style - Font style of the placeholder\n *\n * @cssprop --wcs-native-select-option-color - Text color of the options\n * @cssprop --wcs-native-select-option-font-style - Font style of the options\n * @cssprop --wcs-native-select-option-selected-color - Text color of the selected option\n *\n * \n */\n@Component({\n    tag: 'wcs-native-select',\n    styleUrl: 'native-select.scss',\n    shadow: true\n})\nexport class NativeSelect implements ComponentInterface, MutableAriaAttribute {\n    /**\n     * The `size` property controls the size of the slotted `select` element by adjusting its padding.\n     * There are two possible size options:\n     * - 'm': medium size\n     * - 'l': large size\n     *\n     * The default value is 'm'.\n     */\n    @Prop({reflect: true}) size: WcsNativeSelectSize = 'm';\n    /**\n     * If `true`, the user must fill in a value before submitting a form.\n     * It is propagated to the slotted select element\n     */\n    @Prop() required = false;\n    \n    @Element() private el!: HTMLWcsNativeSelectElement;\n\n    @State() private expanded: boolean = false;\n\n    @State() private disabled: boolean;\n    private selectElement: HTMLSelectElement;\n\n    private observer: MutationObserver;\n    private readonly SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST = ['disabled'];\n\n    @Watch('required')\n    requiredChanged(newValue: boolean, oldValue: boolean) {\n        if(newValue !== oldValue) {\n            if(!this.selectElement) return;\n            this.selectElement.required = this.required;\n        }\n    }\n    \n    componentWillLoad() {\n        this.selectElement = this.el.querySelector('select');\n        if (!this.selectElement) throw new Error(\"wcs-native-select must be used with a native slotted select, please refer to the documentation.\");\n\n        this.onSelectedOptionChange();\n\n        /**\n         * We use an event listener to apply the default style to the select when user chose an active option\n         */\n        this.selectElement.addEventListener('change', () => {\n            this.onSelectedOptionChange();\n        });\n\n        this.observer = new MutationObserver(mutations => {\n            const hasSpiedAttrMutation = mutations.filter(m => this.SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST.includes(m.attributeName)).length > 0;\n            if (hasSpiedAttrMutation) {\n                this.updateHostAttributeWithSlottedSelect();\n            }\n\n            // A workaround to detect when the select is reset by using a class change on the select element. For example\n            // angular add/remove ng-pristine and ng-dirty classes on the form controls when the form is reset.\n            // Not the best solution but it works since we cannot detect the reset event on the native select element.\n            if (mutations.filter(m => m.attributeName === 'class').length > 0) {\n                this._updateStyles();\n            }\n        });\n        this.updateHostAttributeWithSlottedSelect();\n        this.observer.observe(this.selectElement, {attributes: true});\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        if(!this.selectElement) return;\n        this.selectElement.setAttribute(attr, value);\n    }\n\n    private onSelectedOptionChange(): void {\n        this._updateStyles();\n    }\n\n    private _updateStyles() {\n        if (this.isPlaceholderOptionSelected()) {\n            this.applyPlaceholderStylesOnNativeSlottedSelectElement();\n        } else {\n            this.applySelectedOptionStylesOnNativeSlottedSelectElement();\n        }\n    }\n\n    private isPlaceholderOptionSelected() {\n        return Array.from(this.selectElement.options).filter(o => o.selected)[0]?.disabled == true;\n    }\n\n    /**\n     * This method should always unset all styles modified by the `applyPlaceholderStylesOnNativeSlottedSelectElement()`\n     * @private\n     */\n    private applySelectedOptionStylesOnNativeSlottedSelectElement() {\n        this.selectElement.style.color = \"var(--wcs-native-select-value-color)\";\n        this.selectElement.style.fontStyle = \"var(--wcs-native-select-value-font-style)\";\n        this.selectElement.style.fontWeight = \"var(--wcs-native-select-value-font-weight)\";\n        Array.from(this.selectElement.options).forEach(option => {\n            option.style.fontStyle = \"var(--wcs-native-select-option-font-style)\";\n            if (!option.disabled) {\n                option.style.color = \"var(--wcs-native-select-option-color)\";\n            }\n        });\n    }\n\n    /**\n     * This method apply styles when the placeholder is shown.\n     *\n     * We use javascript because we cannot achieve that behaviour in pure css when the native select is not required\n     * @private\n     */\n    private applyPlaceholderStylesOnNativeSlottedSelectElement() {\n        this.selectElement.style.color = \"var(--wcs-native-select-placeholder-color)\";\n        this.selectElement.style.fontWeight = \"var(--wcs-native-select-placeholder-font-weight)\";\n        this.selectElement.style.fontStyle = \"var(--wcs-native-select-placeholder-font-style)\";\n        Array.from(this.selectElement.options).forEach(option => {\n            option.style.fontStyle = \"var(--wcs-native-select-option-font-style)\";\n            if (!option.disabled) {\n                option.style.color = \"var(--wcs-native-select-option-color)\";\n            }\n        });\n    }\n\n    private updateHostAttributeWithSlottedSelect() {\n        this.disabled = this.selectElement?.hasAttribute('disabled');\n    }\n\n    disconnectedCallback() {\n        this.observer?.disconnect();\n        this.selectElement?.removeEventListener(\"change\", () => {\n            this.onSelectedOptionChange();\n        });\n    }\n\n    /**\n     * Use this method to force the component to update its styles. It can be useful when the select is reset (with a placeholder).\n     */\n    @Method()\n    async updateStyles() {\n        // Note : we try to automatically detect if the select is reset with the onreset event and with a mutation\n        // observer on the select element. But it seems that the onreset event is not fired when the select is reset.\n        // and the mutation observer is not fired when the select is reset with the reset() method on the form.\n        // So we have to let the user call this method manually when he reset the select.\n        this._updateStyles();\n    }\n\n    render() {\n        return (\n            <Host class={`${this.expanded ? 'expanded' : ''}`} data-disabled={this.disabled} data-size={this.size}>\n                <div class=\"select-wrapper\">\n                    <slot></slot>\n                    <div class=\"arrow-container\">\n                        <SelectArrow up={this.expanded}></SelectArrow>\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"mappings":"6FAAA,MAAMA,EAAkB,0tJACxB,MAAAC,EAAeD,E,MCqFFE,EAAY,M,yBAwBJC,KAAAC,uCAAyC,CAAC,Y,UAfR,I,cAKhC,M,cAIkB,M,wBASrC,eAAAC,CAAgBC,EAAmBC,GAC/B,GAAGD,IAAaC,EAAU,CACtB,IAAIJ,KAAKK,cAAe,OACxBL,KAAKK,cAAcC,SAAWN,KAAKM,Q,EAI3C,iBAAAC,GACIP,KAAKK,cAAgBL,KAAKQ,GAAGC,cAAc,UAC3C,IAAKT,KAAKK,cAAe,MAAM,IAAIK,MAAM,mGAEzCV,KAAKW,yBAKLX,KAAKK,cAAcO,iBAAiB,UAAU,KAC1CZ,KAAKW,wBAAwB,IAGjCX,KAAKa,SAAW,IAAIC,kBAAiBC,IACjC,MAAMC,EAAuBD,EAAUE,QAAOC,GAAKlB,KAAKC,uCAAuCkB,SAASD,EAAEE,iBAAgBC,OAAS,EACnI,GAAIL,EAAsB,CACtBhB,KAAKsB,sC,CAMT,GAAIP,EAAUE,QAAOC,GAAKA,EAAEE,gBAAkB,UAASC,OAAS,EAAG,CAC/DrB,KAAKuB,e,KAGbvB,KAAKsB,uCACLtB,KAAKa,SAASW,QAAQxB,KAAKK,cAAe,CAACoB,WAAY,M,CAI3D,sBAAMC,CAAiBC,EAAyBC,GAC5C,IAAI5B,KAAKK,cAAe,OACxBL,KAAKK,cAAcwB,aAAaF,EAAMC,E,CAGlC,sBAAAjB,GACJX,KAAKuB,e,CAGD,aAAAA,GACJ,GAAIvB,KAAK8B,8BAA+B,CACpC9B,KAAK+B,oD,KACF,CACH/B,KAAKgC,uD,EAIL,2BAAAF,G,MACJ,QAAOG,EAAAC,MAAMC,KAAKnC,KAAKK,cAAc+B,SAASnB,QAAOoB,GAAKA,EAAEC,WAAU,MAAE,MAAAL,SAAA,SAAAA,EAAEM,WAAY,I,CAOlF,qDAAAP,GACJhC,KAAKK,cAAcmC,MAAMC,MAAQ,uCACjCzC,KAAKK,cAAcmC,MAAME,UAAY,4CACrC1C,KAAKK,cAAcmC,MAAMG,WAAa,6CACtCT,MAAMC,KAAKnC,KAAKK,cAAc+B,SAASQ,SAAQC,IAC3CA,EAAOL,MAAME,UAAY,6CACzB,IAAKG,EAAON,SAAU,CAClBM,EAAOL,MAAMC,MAAQ,uC,KAWzB,kDAAAV,GACJ/B,KAAKK,cAAcmC,MAAMC,MAAQ,6CACjCzC,KAAKK,cAAcmC,MAAMG,WAAa,mDACtC3C,KAAKK,cAAcmC,MAAME,UAAY,kDACrCR,MAAMC,KAAKnC,KAAKK,cAAc+B,SAASQ,SAAQC,IAC3CA,EAAOL,MAAME,UAAY,6CACzB,IAAKG,EAAON,SAAU,CAClBM,EAAOL,MAAMC,MAAQ,uC,KAKzB,oCAAAnB,G,MACJtB,KAAKuC,UAAWN,EAAAjC,KAAKK,iBAAa,MAAA4B,SAAA,SAAAA,EAAEa,aAAa,W,CAGrD,oBAAAC,G,SACId,EAAAjC,KAAKa,YAAQ,MAAAoB,SAAA,SAAAA,EAAEe,cACfC,EAAAjD,KAAKK,iBAAa,MAAA4C,SAAA,SAAAA,EAAEC,oBAAoB,UAAU,KAC9ClD,KAAKW,wBAAwB,G,CAQrC,kBAAMwC,GAKFnD,KAAKuB,e,CAGT,MAAA6B,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,GAAGxD,KAAKyD,SAAW,WAAa,KAAI,gBAAiBzD,KAAKuC,SAAQ,YAAavC,KAAK0D,MAC7FL,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBACPH,EAAA,QAAAE,IAAA,6CACAF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,mBACPH,EAACM,EAAW,CAAAJ,IAAA,2CAACK,GAAI5D,KAAKyD,a"}

package/dist/wcs/p-8f0e093f.entry.js

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

package/dist/wcs/p-94ff8939.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as o,H as r,g as t}from"./p-32e583ea.js";import{S as s}from"./p-84e22272.js";import{i as a,W as i}from"./p-c6a28b79.js";import{k as n,s as c,i as d,a as l}from"./p-a3aece7a.js";import{k as p}from"./p-4d6d1d14.js";import{c as w}from"./p-0f864e86.js";function h(e,o){const r=p(e);if(r==="UNKNOWN"){return[]}switch(o){case"closed":switch(r){case"UP_ARROW":return[{kind:"OpenMenu"},{kind:"FocusItem",target:"last"}];case"DOWN_ARROW":return[{kind:"OpenMenu"},{kind:"FocusItem",target:"first"}];case"SPACE":case"ENTER":return[{kind:"OpenMenu"},{kind:"FocusItem",target:"first"}]}break;case"opened":switch(r){case"UP_ARROW":return[{kind:"FocusItem",target:"previous"}];case"DOWN_ARROW":return[{kind:"FocusItem",target:"next"}];case"HOME":return[{kind:"FocusItem",target:"first"}];case"END":return[{kind:"FocusItem",target:"last"}];case"ESCAPE":case"MAJ+TAB":case"TAB":return[{kind:"CloseMenu"}]}break;default:throw Error("Unknown error")}return[]}const u=':host{display:flex;--wcs-dropdown-outline-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-dropdown-padding-empty:var(--wcs-semantic-spacing-large);--wcs-dropdown-plain-arrow-color:var(--wcs-semantic-color-foreground-action-primary-default);--wcs-dropdown-stroked-arrow-color:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-dropdown-clear-arrow-color:var(--wcs-semantic-color-foreground-action-tertiary-default);--wcs-dropdown-arrow-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-dropdown-overlay-max-height:360px;--wcs-dropdown-overlay-padding:var(--wcs-semantic-spacing-base);--wcs-dropdown-overlay-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-dropdown-overlay-border-width:var(--wcs-semantic-border-width-default);--wcs-dropdown-overlay-border-radius:var(--wcs-semantic-border-radius-base);--wcs-dropdown-overlay-border-color:var(--wcs-semantic-color-border-secondary)}:host wcs-button{height:fit-content}:host svg{margin-right:-0.25rem}button{position:absolute;opacity:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;outline:0;outline-offset:0}button:focus-visible+wcs-button{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-dropdown-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-button-border-radius)}@supports not selector(button:focus-visible + wcs-button){button:focus-within+wcs-button{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-dropdown-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-button-border-radius)}}.wcs-button-content-wrapper{display:flex;align-items:center}.popover{display:none;border:var(--wcs-dropdown-overlay-border-width) solid var(--wcs-dropdown-overlay-border-color);border-radius:var(--wcs-dropdown-overlay-border-radius);background-color:var(--wcs-dropdown-overlay-background-color);z-index:9999}.show{display:block}.container{min-width:calc(10 * var(--wcs-semantic-size-base));border-radius:inherit;overflow:hidden;padding:var(--wcs-dropdown-overlay-padding);background-color:var(--wcs-dropdown-overlay-background-color)}:host([mode=clear]) .arrow{fill:var(--wcs-dropdown-clear-arrow-color)}:host([mode=stroked]) .arrow{fill:var(--wcs-dropdown-stroked-arrow-color)}:host([mode=plain]) .arrow{fill:var(--wcs-dropdown-plain-arrow-color)}:host([disabled]) .arrow{fill:var(--wcs-dropdown-arrow-color-disabled)}#arrow,#arrow::before{position:absolute;width:8px;height:8px;background:inherit;border:var(--wcs-dropdown-overlay-border-width) solid var(--wcs-dropdown-overlay-border-color)}#arrow{visibility:hidden;z-index:-1}#arrow::before{visibility:visible;content:"";transform:rotate(45deg)}#is-empty{display:block;width:20ch;padding:0 var(--wcs-dropdown-padding-empty)}.popover[data-popper-placement^=top]>#arrow{bottom:-5px}.popover[data-popper-placement^=bottom]>#arrow{top:-6px}.popover[data-popper-placement^=left]>#arrow{right:-4px}.popover[data-popper-placement^=right]>#arrow{left:-6px}';const b=u;const f=["tabindex"];const m=class{constructor(o){e(this,o);this.inheritedAttributes={};this.noArrow=false;this.mode="stroked";this.shape="normal";this.size="m";this.disabled=false;this.placement="bottom-end";this.expanded=false}get items(){return Array.from(this.el.querySelectorAll("wcs-dropdown-item"))}placementChange(){this.popper.setOptions(Object.assign(Object.assign({},this.popper.state.options),{placement:this.placement})).then((e=>this.popper.update()))}onBlur(){this.clearLastFocusedItem();this.expanded=false}componentDidLoad(){if(!a(this.size)){console.warn(`Invalid size value for wcs-dropdown : "${this.size}". Must be one of "${i.join(", ")}"`);this.size="m"}this.popper=w(this.wcsButton,this.popoverDiv,{placement:this.placement,modifiers:[{name:"offset",options:{offset:[0,8]}}]});this.fixForFirefoxBelow63()}fixForFirefoxBelow63(){const e=this.el.querySelectorAll("wcs-dropdown-item");const o=this.el.querySelector(".container");if(e.length>0&&o){e.forEach((e=>{this.el.removeChild(e);o.appendChild(e)}))}}onButtonClick(e){this.clearLastFocusedItem();this.expanded=!this.expanded;if(this.expanded){this.focusItem(0)}}onWindowClickEvent(e){const o=n(e,this.el);if(this.expanded&&!o){this.expanded=false}}dropdownItemClick(e){this.expanded=false;this.nativeButton.focus()}onKeyDown(e){const o=this.expanded?"opened":"closed";const r=h(e,o);if(r.length!=0){e.preventDefault()}for(const e of r){this.doActionFromKeyboardEventAssociatedAction(e)}}async setAriaAttribute(e,o){c(this.nativeButton,e,o)}doActionFromKeyboardEventAssociatedAction(e){switch(e.kind){case"OpenMenu":this.expanded=true;this.focusItem(0);break;case"CloseMenu":this.expanded=false;this.nativeButton.focus();break;case"ClearFocus":this.clearLastFocusedItem();break;case"FocusItem":switch(e.target){case"previous":this.focusClosestItem("previous");break;case"next":this.focusClosestItem("next");break;case"first":this.focusItem(0);break;case"last":this.focusItem(this.items.length-1);break}break}}clearLastFocusedItem(){if(this.lastFocusedItemElement){this.lastFocusedItemElement.tabIndex=-1;this.lastFocusedItemElement=null}}focusItem(e){this.clearLastFocusedItem();this.lastFocusedItemElement=this.items[e];if(this.lastFocusedItemElement){this.lastFocusedItemElement.tabIndex=0;requestAnimationFrame((()=>{var e;(e=this.lastFocusedItemElement)===null||e===void 0?void 0:e.focus()}))}}focusClosestItem(e){const o=this.getClosestActiveItemIndexForDirection(e);if(o===-1)return;this.focusItem(o)}getClosestActiveItemIndexForDirection(e){const o=this.items;let r=Array.from(o).indexOf(this.lastFocusedItemElement);const t=0;const s=o.length-1;if(e==="next"&&r<s){r++}else if(e==="previous"&&r>t){r--}else{if(e==="next"&&r>=s){r=0}if(e==="previous"&&r===t){r=s}}return r}componentDidRender(){if(this.popper){this.popper.update()}}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},d(this.el)),l(this.el,f))}render(){return o(r,{key:"d9f0aaa67dff366e7348e4aa04e320da4e22140d"},o("button",Object.assign({key:"4a51cdba15db74f689368a04730fb369fa3eea5f",id:"dropdown-button","aria-controls":"menu",disabled:this.disabled,"aria-haspopup":"true",role:"button","aria-expanded":this.expanded?"true":"false",ref:e=>this.nativeButton=e,onClick:e=>this.onButtonClick(e),onBlur:e=>e.stopImmediatePropagation()},this.inheritedAttributes),"Dropdown"),o("wcs-button",{key:"2889dd5844070fdebe42378d78ea48ff98d46747",mode:this.mode,shape:this.shape,disabled:this.disabled,size:this.size,ref:e=>this.wcsButton=e,"aria-hidden":"true",tabindex:-1,onClick:e=>this.onButtonClick(e),onBlur:e=>e.stopImmediatePropagation()},o("div",{key:"ebefdbf77021cf3419d0189c868532e9322ab074",class:"wcs-button-content-wrapper"},o("slot",{key:"58221a64908d7366d1fa14db09ab3dcb8bcd01af",name:"placeholder"}),this.noArrow?null:o(s,{up:this.expanded}))),o("div",{key:"b2fb5b0ef3729efc573c38b7c93a1bb7cc9c8018",class:(this.expanded?"show ":"")+"popover",id:"menu",role:"menu","aria-labelledby":"dropdown-button",tabindex:-1,ref:e=>this.popoverDiv=e},o("div",{key:"3ba77338711b95656bd126a0cf46056371f27f51",role:"presentation",id:"arrow","data-popper-arrow":true}),o("div",{key:"99971db1b1ea35b64548a4fa441bee906e447612",role:"presentation",class:"container"},o("slot",{key:"fcb72e8f187871dc19b58e6cb3f072f5a7fc88ec",name:"item"},o("span",{key:"1aa63a1942b320d8322f90fd35eee4f1a744235c",id:"is-empty"})))))}static get delegatesFocus(){return true}get el(){return t(this)}static get watchers(){return{placement:["placementChange"]}}};m.style=b;export{m as wcs_dropdown};
-//# sourceMappingURL=p-94ff8939.entry.js.map

package/dist/wcs/p-94ff8939.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["getActionForKeyboardEvent","event","currentState","keyboardShortcut","keyboardShortcutFromKeyboardEvent","kind","target","Error","dropdownCss","WcsDropdownStyle0","DROPDOWN_INHERITED_ATTRS","Dropdown","this","inheritedAttributes","items","Array","from","el","querySelectorAll","placementChange","popper","setOptions","Object","assign","state","options","placement","then","_","update","onBlur","clearLastFocusedItem","expanded","componentDidLoad","isWcsButtonSize","size","console","warn","WcsButtonSizeValues","join","createPopper","wcsButton","popoverDiv","modifiers","name","offset","fixForFirefoxBelow63","container","querySelector","length","forEach","i","removeChild","appendChild","onButtonClick","focusItem","onWindowClickEvent","clickedOnDropdownOrChildren","clickTargetIsElementOrChildren","dropdownItemClick","nativeButton","focus","onKeyDown","_event","actionsFromKeyboardEvents","preventDefault","actionFromKeyboardEvent","doActionFromKeyboardEventAssociatedAction","setAriaAttribute","attr","value","setOrRemoveAttribute","focusClosestItem","lastFocusedItemElement","tabIndex","indexToFocus","requestAnimationFrame","_a","direction","getClosestActiveItemIndexForDirection","currentIndex","indexOf","MIN_INDEX","MAX_INDEX","componentDidRender","componentWillLoad","inheritAriaAttributes","inheritAttributes","render","h","Host","key","id","disabled","role","ref","onClick","$event","stopImmediatePropagation","mode","shape","tabindex","e","class","noArrow","SelectArrow","up"],"sources":["src/components/dropdown/dropdown-keyboard-event.ts","src/components/dropdown/dropdown.scss?tag=wcs-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["import { keyboardShortcutFromKeyboardEvent } from \"../../utils/keyboard-event\";\n\n// Possible Shortcuts\n\n// Dropdown button\n// ENTER : open menu, move focus to first item\n// SPACE : open menu, move focus to first item\n// DOWN_ARROW : open menu, move focus to first item\n// UP_ARROW : open menu, move focus to last item\n\n// Dropdown item\n// HOME : focus first item\n// END : focus last item\n// UP_ARROW : move focus to previous item\n// DOWN_ARROW : move focus to previous item\n// ESCAPE : close menu, set focus on the dropdown button\n// ENTER : activate the item, close menu, set focus to menu button (already handled via the wcsDropdownItemClick event)\n\nexport type KeyboardEventAssociatedAction = OpenMenu\n    | CloseMenu\n    | ClearFocus\n    | FocusItem;\n\ntype OpenMenu = {kind: 'OpenMenu'};\ntype CloseMenu = {kind: 'CloseMenu'};\n\n\ntype ClearFocus = {kind: 'ClearFocus'};\ntype FocusItem = {kind: 'FocusItem', target: 'next' | 'previous' | 'first' | 'last'};\n\n/**\n * We follow this pattern https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-actions/\n * @param event\n * @param currentState\n * @param type\n */\nexport function getActionForKeyboardEvent(event: KeyboardEvent, currentState: 'closed' | 'opened'): KeyboardEventAssociatedAction[] {\n    const keyboardShortcut = keyboardShortcutFromKeyboardEvent(event);\n\n    if(keyboardShortcut === 'UNKNOWN') {\n        return [];\n    }\n\n    switch (currentState) {\n        case 'closed':\n            // We handle every available shortcut for the closed state\n            switch (keyboardShortcut) {\n                case 'UP_ARROW':\n                    return [{kind: 'OpenMenu'}, {kind: 'FocusItem', target: 'last'}];\n                case 'DOWN_ARROW':\n                    return [{kind: 'OpenMenu'}, {kind: 'FocusItem', target: 'first'}];\n                case 'SPACE':\n                case 'ENTER':\n                    return [{kind: 'OpenMenu'}, {kind: 'FocusItem', target: 'first'}];\n                default:\n                    break;\n            }\n            break;\n        case 'opened':\n            // We handle every available shortcut for the opened state\n            switch (keyboardShortcut) {\n                case 'UP_ARROW':\n                    return [{kind: 'FocusItem', target: 'previous'}];\n                case 'DOWN_ARROW':\n                    return [{kind: 'FocusItem', target: 'next'}];\n                case 'HOME':\n                    return [{kind: 'FocusItem', target: 'first'}];\n                case 'END':\n                    return [{kind: 'FocusItem', target: 'last'}];\n                case 'ESCAPE':\n                case 'MAJ+TAB':\n                case 'TAB':\n                    return [{kind: 'CloseMenu'}];\n                default:\n                    break;\n            }\n            break;\n        default:\n            throw Error('Unknown error');\n    }\n    return [];\n}\n","@import '../../style/focus-outline.scss';\n\n:host {\n    display: flex;\n\n    --wcs-dropdown-outline-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n    // Padding\n    --wcs-dropdown-padding-empty: var(--wcs-semantic-spacing-large);\n\n    // Arrow color\n    --wcs-dropdown-plain-arrow-color: var(--wcs-semantic-color-foreground-action-primary-default);\n    --wcs-dropdown-stroked-arrow-color: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-dropdown-clear-arrow-color: var(--wcs-semantic-color-foreground-action-tertiary-default);\n\n    --wcs-dropdown-arrow-color-disabled: var(--wcs-semantic-color-text-disabled);\n\n    // Overlay\n    --wcs-dropdown-overlay-max-height: 360px;\n    --wcs-dropdown-overlay-padding: var(--wcs-semantic-spacing-base);\n    --wcs-dropdown-overlay-background-color: var(--wcs-semantic-color-background-surface-primary);\n    --wcs-dropdown-overlay-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-dropdown-overlay-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-dropdown-overlay-border-color: var(--wcs-semantic-color-border-secondary);\n\n    wcs-button {\n        height: fit-content;\n    }\n\n    svg {\n        margin-right: -0.25rem;\n    }\n}\n\n/* Visually hide the native button */\nbutton {\n    position: absolute;\n    opacity: 0;\n    height: 1px;\n    width: 1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    outline: 0;\n    outline-offset: 0;\n}\n\nbutton:focus-visible + wcs-button {\n    @include focus-outline($outline-color: var(--wcs-dropdown-outline-color-focus), $border-radius: var(--wcs-button-border-radius));\n}\n\n@supports not selector(button:focus-visible + wcs-button) {\n    button:focus-within + wcs-button {\n        @include focus-outline($outline-color: var(--wcs-dropdown-outline-color-focus), $border-radius: var(--wcs-button-border-radius));\n    }\n}\n\n.wcs-button-content-wrapper {\n    display: flex;\n    align-items: center;\n}\n\n.popover {\n    display: none;\n    border: var(--wcs-dropdown-overlay-border-width) solid var(--wcs-dropdown-overlay-border-color);\n    border-radius: var(--wcs-dropdown-overlay-border-radius);\n    background-color: var(--wcs-dropdown-overlay-background-color);\n    z-index: 9999;\n}\n\n.show {\n    display: block;\n}\n\n// XXX: So that item hover background does not overflow\n.container {\n    min-width: calc(10 * var(--wcs-semantic-size-base));\n    border-radius: inherit;\n    overflow: hidden;\n    padding: var(--wcs-dropdown-overlay-padding);\n    background-color: var(--wcs-dropdown-overlay-background-color);\n}\n\n:host([mode=clear]) {\n    // SVG arrow inside the button, on clear background\n    .arrow {\n        fill: var(--wcs-dropdown-clear-arrow-color);\n    }\n}\n\n:host([mode=stroked]) {\n    // SVG arrow inside the button, on stroked background\n    .arrow {\n        fill: var(--wcs-dropdown-stroked-arrow-color);\n    }\n}\n\n:host([mode=plain]) {\n    // SVG arrow inside the button, on primary background\n    .arrow {\n        fill: var(--wcs-dropdown-plain-arrow-color);\n    }\n}\n\n:host([disabled]) {\n    .arrow {\n        fill: var(--wcs-dropdown-arrow-color-disabled);\n    }\n}\n\n// Popover arrow\n#arrow,\n#arrow::before {\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    background: inherit;\n    border: var(--wcs-dropdown-overlay-border-width) solid var(--wcs-dropdown-overlay-border-color);\n}\n\n#arrow {\n    visibility: hidden;\n    z-index: -1;\n}\n\n#arrow::before {\n    visibility: visible;\n    content: '';\n    transform: rotate(45deg);\n}\n\n#is-empty {\n    display: block;\n    width: 20ch;\n    padding: 0 var(--wcs-dropdown-padding-empty);\n}\n\n.popover[data-popper-placement^='top'] > #arrow {\n    bottom: -5px;\n}\n\n.popover[data-popper-placement^='bottom'] > #arrow {\n    top: -6px;\n}\n\n.popover[data-popper-placement^='left'] > #arrow {\n    right: -4px;\n}\n\n.popover[data-popper-placement^='right'] > #arrow {\n    left: -6px;\n}\n","import { Component, ComponentInterface, Element, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport { SelectArrow } from '../select/select-arrow';\nimport {\n    isWcsButtonSize,\n    WcsButtonMode,\n    WcsButtonShape,\n    WcsButtonSize,\n    WcsButtonSizeValues\n} from '../button/button-interface';\nimport { createPopper, Instance } from '@popperjs/core';\nimport { WcsDropdownPlacement } from './dropdown-interface';\nimport {\n    clickTargetIsElementOrChildren,\n    inheritAriaAttributes,\n    inheritAttributes,\n    setOrRemoveAttribute\n} from '../../utils/helpers';\nimport { getActionForKeyboardEvent, KeyboardEventAssociatedAction } from \"./dropdown-keyboard-event\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst DROPDOWN_INHERITED_ATTRS = ['tabindex'];\n\n/**\n * The dropdown component use a wcs-button under the hood, so you can use the same css classes as the button to style the\n * dropdown.\n * \n * @slot placeholder - The slot containing the placeholder displayed in button\n * @slot item - The slot container the list of `wcs-dropdown-item` elements\n * \n * @cssprop --wcs-dropdown-outline-color-focus - Outline color of dropdown when focus it\n * \n * @cssprop --wcs-dropdown-plain-arrow-color - Color of the arrow indicator when the dropdown is plain\n * @cssprop --wcs-dropdown-stroked-arrow-color - Color of the arrow indicator when the dropdown is stroked\n * @cssprop --wcs-dropdown-clear-arrow-color - Color of the arrow indicator when the dropdown is not filled\n * @cssprop --wcs-dropdown-arrow-color-disabled - Base color of the arrow indicator when the dropdown is disabled\n * \n * @cssprop --wcs-dropdown-padding-empty - Padding of and empty dropdown\n * \n * @cssprop --wcs-dropdown-overlay-padding - Defines the vertical padding inside the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-max-height - Specifies the maximum height of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-background-color - Determines the background color of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-border-width - Sets the border width of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-border-radius - Defines the border radius of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-border-color - Specifies the border color of the dropdown overlay\n */\n@Component({\n    tag: 'wcs-dropdown',\n    styleUrl: 'dropdown.scss',\n    shadow: {\n        delegatesFocus: true\n    }\n})\nexport class Dropdown implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el: HTMLWcsDropdownElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /**\n     * This button is visually hidden. It used to carry all aria attributes and acts as the controller of the menu.\n     * The wcs-button could not handle the aria-controls and aria-activedescendant attributes because of the IDREF\n     * not passing from a shadow-dom through another.\n     * @private\n     */\n    private nativeButton!: HTMLButtonElement;\n\n    /**\n     * This button is shown on the user interface, and visually receives focus and catch click events.  \n     * It is hidden to screen readers since the native button carries all the aria informations.\n     * @private\n     */\n    private wcsButton!: HTMLWcsButtonElement;\n\n    /**\n     * This div is shown on the user interface when the dropdown is expanded.\n     * @private\n     */\n    private popoverDiv!: HTMLDivElement;\n\n    /** Hides the arrow in the button */\n    @Prop() noArrow: boolean = false;\n\n    /** Dropdown's button mode */\n    @Prop() mode: WcsButtonMode = 'stroked';\n\n    /** Dropdown's button shape */\n    @Prop() shape: WcsButtonShape = 'normal';\n    \n    /** Dropdown's button size */\n    @Prop() size: WcsButtonSize = 'm';\n\n    /** Specifies whether the dropdown button is clickable or not */\n    @Prop() disabled: boolean = false;\n\n    /** placement of the dropdown's popover */\n    @Prop() placement: WcsDropdownPlacement = 'bottom-end';\n\n    @State() private expanded = false;\n\n\n    private popper: Instance;\n    \n    private lastFocusedItemElement: HTMLWcsDropdownItemElement | null;\n    \n    private get items(): HTMLWcsDropdownItemElement[] {\n        return Array.from(this.el.querySelectorAll('wcs-dropdown-item'));\n    }\n\n    @Watch('placement')\n    protected placementChange() {\n        this.popper.setOptions({\n            ...this.popper.state.options,\n            placement: this.placement\n        }).then(_ => this.popper.update());\n    }\n    \n    @Listen('blur')\n    onBlur() {\n        this.clearLastFocusedItem();\n        this.expanded = false;\n    }\n\n    componentDidLoad() {\n        if (!isWcsButtonSize(this.size)) {\n            console.warn(`Invalid size value for wcs-dropdown : \"${this.size}\". Must be one of \"${WcsButtonSizeValues.join(', ')}\"`);\n            this.size = \"m\"; // Default fallback value\n        }\n\n        this.popper = createPopper(this.wcsButton, this.popoverDiv, {\n            placement: this.placement,\n            modifiers: [\n                {\n                    name: 'offset',\n                    options: {\n                        offset: [0, 8]\n                    }\n                }\n            ]\n        });\n\n        this.fixForFirefoxBelow63();\n    }\n\n    private fixForFirefoxBelow63() {\n        // If the items appear out of the slot we place them back\n        const items = this.el.querySelectorAll('wcs-dropdown-item');\n        const container = this.el.querySelector('.container');\n        if (items.length > 0 && container) {\n            items.forEach(i => {\n                this.el.removeChild(i);\n                container.appendChild(i);\n            });\n        }\n    }\n\n    private onButtonClick(_: MouseEvent): void {\n        this.clearLastFocusedItem();\n        this.expanded = !this.expanded;\n        \n        if (this.expanded) {\n            this.focusItem(0);\n        }\n    }\n\n    @Listen('click', {target: 'window'})\n    onWindowClickEvent(event: MouseEvent) {\n        const clickedOnDropdownOrChildren = clickTargetIsElementOrChildren(event, this.el);\n        if (this.expanded && !clickedOnDropdownOrChildren) {\n            this.expanded = false;\n        }\n    }\n\n    @Listen('wcsDropdownItemClick')\n    dropdownItemClick(_: CustomEvent<void>) {\n        this.expanded = false;\n        this.nativeButton.focus();\n    }\n\n    @Listen('keydown')\n    onKeyDown(_event: KeyboardEvent): void {\n        const currentState = this.expanded ? 'opened' : 'closed';\n        const actionsFromKeyboardEvents: KeyboardEventAssociatedAction[] = getActionForKeyboardEvent(_event, currentState);\n\n        // If we have at least one associated actions, we prevent the default behavior of the event. \n        // Except if the action is a focus move (we have to handle the preventDefault behavior ourselves in the action implementation)\n        if (actionsFromKeyboardEvents.length != 0) {\n            _event.preventDefault();\n        }\n\n        for (const actionFromKeyboardEvent of actionsFromKeyboardEvents) {\n            this.doActionFromKeyboardEventAssociatedAction(actionFromKeyboardEvent);\n        }\n    }\n    \n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeButton, attr, value);\n    }\n\n    doActionFromKeyboardEventAssociatedAction(actionFromKeyboardEvent: KeyboardEventAssociatedAction) {\n        switch (actionFromKeyboardEvent.kind) {\n            case 'OpenMenu':\n                this.expanded = true;\n                this.focusItem(0);\n                break;\n            case 'CloseMenu':\n                this.expanded = false;\n                this.nativeButton.focus();\n                break;\n            case 'ClearFocus':\n                this.clearLastFocusedItem();\n                break;\n            case 'FocusItem':\n                switch (actionFromKeyboardEvent.target) {\n                    case 'previous':\n                        this.focusClosestItem('previous');\n                        break;\n                    case 'next':\n                        this.focusClosestItem('next');\n                        break;\n                    case 'first':\n                        this.focusItem(0);\n                        break;\n                    case 'last':\n                        this.focusItem(this.items.length - 1);\n                        break;\n                    default:\n                        break;\n                }\n                break;\n            default:\n                break;\n        }\n    }\n\n    /**\n     * Removes the focus and tabindex 0 of the last focused item if any.\n     * @private\n     */\n    private clearLastFocusedItem() {\n        if (this.lastFocusedItemElement) {\n            this.lastFocusedItemElement.tabIndex = -1;\n            this.lastFocusedItemElement = null;\n        }\n    }\n    \n    private focusItem(indexToFocus: number) {\n        this.clearLastFocusedItem();\n        this.lastFocusedItemElement = this.items[indexToFocus];\n        if (this.lastFocusedItemElement) {\n            this.lastFocusedItemElement.tabIndex = 0;\n            requestAnimationFrame(() => {\n                this.lastFocusedItemElement?.focus();\n            });\n        }\n    }\n    \n    private focusClosestItem(direction: 'next' | 'previous'): void {\n        const indexToFocus = this.getClosestActiveItemIndexForDirection(direction);\n        if (indexToFocus === -1) return;\n        \n        this.focusItem(indexToFocus);\n    }\n    \n    private getClosestActiveItemIndexForDirection(direction: 'next' | 'previous'): number {\n        const items = this.items;\n        let currentIndex = Array.from(items).indexOf(this.lastFocusedItemElement);\n\n        const MIN_INDEX = 0;\n        const MAX_INDEX = items.length - 1;\n\n        if (direction === 'next' && currentIndex < MAX_INDEX) {\n            currentIndex++;\n        } else if (direction === 'previous' && currentIndex > MIN_INDEX) {\n            currentIndex--;\n        } else {\n            // Used to scroll through items infinitely with keyboard\n            if (direction === 'next' && currentIndex >= MAX_INDEX) {\n                currentIndex = 0;\n            }\n            if (direction === 'previous' && currentIndex === MIN_INDEX) {\n                currentIndex = MAX_INDEX;\n            }\n        }\n        \n        return currentIndex;\n    }\n\n    componentDidRender() {\n        if (this.popper) {\n            this.popper.update();\n        }\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, DROPDOWN_INHERITED_ATTRS),\n        };\n    }\n    \n    render() {\n        return (\n            <Host>\n                <button id=\"dropdown-button\"\n                        aria-controls=\"menu\"\n                        disabled={this.disabled}\n                        aria-haspopup=\"true\"\n                        role=\"button\"\n                        aria-expanded={this.expanded ? 'true' : 'false'}\n                        ref={el => this.nativeButton = el}\n                        onClick={($event) => this.onButtonClick($event)}\n                        onBlur={($event) => $event.stopImmediatePropagation()}\n                        {...this.inheritedAttributes}>Dropdown</button>\n                <wcs-button mode={this.mode} shape={this.shape} disabled={this.disabled} size={this.size}\n                            ref={el => this.wcsButton = el}\n                            aria-hidden=\"true\"\n                            tabindex={-1}\n                            onClick={($event) => this.onButtonClick($event)}\n                            onBlur={(e) => e.stopImmediatePropagation()}>\n                    <div class=\"wcs-button-content-wrapper\">\n                        <slot name=\"placeholder\"/>\n                        {this.noArrow ? null : (<SelectArrow up={this.expanded}/>)}\n                    </div>\n                </wcs-button>\n                <div class={(this.expanded ? 'show ' : '') + 'popover'}\n                     id=\"menu\"\n                     role=\"menu\"\n                     aria-labelledby=\"dropdown-button\"\n                     tabindex={-1}\n                     ref={el => this.popoverDiv = el}>\n                    <div role=\"presentation\" id=\"arrow\" data-popper-arrow/>\n                    <div role=\"presentation\" class=\"container\">\n                        <slot name=\"item\">\n                            <span id={\"is-empty\"}></span>\n                        </slot>\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n}\n\n"],"mappings":"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"}

package/dist/wcs/p-96195d9a.entry.js

@@ -1,2 +0,0 @@
-import{r,h as o}from"./p-32e583ea.js";const c=":host{--wcs-card-border-color:var(--wcs-semantic-color-border-secondary);--wcs-card-border-radius:var(--wcs-semantic-border-radius-base);--wcs-card-border-width:var(--wcs-semantic-border-width-default);--wcs-card-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-card-text-color:var(--wcs-semantic-color-text-primary);position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-clip:border-box;border-radius:var(--wcs-card-border-radius);background-color:var(--wcs-card-background-color);color:var(--wcs-card-text-color)}:host([mode=raised]){box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2)}:host([mode=flat]){border:solid var(--wcs-card-border-width) var(--wcs-card-border-color)}";const a=c;const d=class{constructor(o){r(this,o);this.mode="flat"}render(){return o("slot",{key:"da921d2df1dcee64b8e8edd17805e37a15544f05"})}};d.style=a;export{d as wcs_card};
-//# sourceMappingURL=p-96195d9a.entry.js.map

package/dist/wcs/p-96195d9a.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["cardCss","WcsCardStyle0","Card","render","h","key"],"sources":["src/components/card/card.scss?tag=wcs-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":[":host {\n    --wcs-card-border-color: var(--wcs-semantic-color-border-secondary);\n    --wcs-card-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-card-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-card-background-color: var(--wcs-semantic-color-background-surface-primary);\n    --wcs-card-text-color: var(--wcs-semantic-color-text-primary);\n\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    word-wrap: break-word;\n    background-clip: border-box;\n    border-radius: var(--wcs-card-border-radius);\n    background-color: var(--wcs-card-background-color);\n    color: var(--wcs-card-text-color);\n}\n\n:host([mode=\"raised\"]) {\n    /* Card mode raised is deprecated in the new design system */\n    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .20)\n}\n\n:host([mode=\"flat\"]) {\n    border: solid var(--wcs-card-border-width) var(--wcs-card-border-color);\n}\n","import { Component, ComponentInterface, h, Prop } from '@stencil/core';\nimport { CardMode } from './card-interface';\n\n/**\n * The card component is a container that display content such as text, images, buttons, and lists.  \n * A card can be a single component, but is often made up of a header, title, subtitle, and content.  \n *\n * @cssprop --wcs-card-border-color - Border color of the card\n * @cssprop --wcs-card-border-radius - Border radius of the card\n * @cssprop --wcs-card-border-width - Border width of the card\n * @cssprop --wcs-card-background-color - Background color of the card\n * @cssprop --wcs-card-text-color - Text color of the card\n */\n@Component({\n    tag: 'wcs-card',\n    styleUrl: 'card.scss',\n    shadow: true\n})\nexport class Card implements ComponentInterface {\n    @Prop({reflect: true, mutable: true})\n    mode: CardMode = 'flat';\n\n\n    render() {\n        return (\n            <slot/>\n        );\n    }\n}\n"],"mappings":"sCAAA,MAAMA,EAAU,yyBAChB,MAAAC,EAAeD,E,MCiBFE,EAAI,M,mCAEI,M,CAGjB,MAAAC,GACI,OACIC,EAAA,QAAAC,IAAA,4C"}