wcs-core 7.3.0 → 7.4.1

package/bundle/wcs-input.js

@@ -0,0 +1,2 @@
+import{p as t,H as s,d as i,h as e,c as o}from"./p-2bef72c7.js";import{m as r,i as n,a,s as c,n as d}from"./p-2e9b9605.js";import{d as l}from"./p-98bd8a96.js";const u=":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-reveal-password-button-border-color-focus:var(--wcs-semantic-color-border-focus-base);--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);--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));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 button.toggle_password{background:transparent;border:none;color:inherit;cursor:pointer}:host button.toggle_password:focus-visible{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-input-reveal-password-button-border-color-focus);outline-offset:calc(-2 * var(--wcs-input-border-width-focus));border-radius:0.1rem}: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 h=u;const p=["tabindex","title"];const w=t(class t extends s{constructor(){super();this.__registerHost();this.__attachShadow();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-${f++}`;this.inheritedAttributes={};this.iconPassword="visibility";this.onInput=t=>{const s=t.target;if(s){this.value=s.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.hidePasswordButtonAriaLabel="Cacher le mot de passe";this.showPasswordButtonAriaLabel="Afficher le mot de passe";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=r(this.wcsInput,this.debounce)}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},n(this.el)),a(this.el,p))}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,s){c(this.nativeInput,t,s)}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 s=this.inputId+"-lbl";const i=d(this.el);if(i){i.id=s}return e(o,{key:"20899914842d410ef72a8f81906e1e2be6e423cf","aria-disabled":this.disabled?"true":null,"data-has-prefix":!!this.prefixLabel,"data-has-suffix":!!this.suffixLabel},this.prefixLabel?e("span",{class:"prefix",part:"prefix"},this.prefixLabel):null,this.icon?e("wcs-mat-icon",{icon:this.icon,size:"m"}):null,e("input",Object.assign({key:"059fb987112d535b3f1cf51ea9bbaa01f36667c5",class:"native-input",ref:t=>this.nativeInput=t,"aria-labelledby":i?s: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"?e("button",{title:this.passwordReveal?this.hidePasswordButtonAriaLabel:this.showPasswordButtonAriaLabel,class:"toggle_password",onClick:()=>this.passwordRevealIconClick()},e("wcs-mat-icon",{icon:this.iconPassword,size:"m"})):null,this.suffixLabel?e("span",{class:"suffix",part:"suffix"},this.suffixLabel):null)}static get delegatesFocus(){return true}get el(){return this}static get watchers(){return{debounce:["debounceChanged"],passwordReveal:["onPasswordRevealChange"]}}static get style(){return h}},[17,"wcs-input",{fireFocusEvents:[4,"fire-focus-events"],accept:[1],autocapitalize:[1],autocomplete:[1],autocorrect:[1],autofocus:[4],debounce:[2],prefixLabel:[1,"prefix-label"],suffixLabel:[1,"suffix-label"],disabled:[516],enterkeyhint:[1],size:[513],icon:[1],inputmode:[1],max:[1],maxlength:[2],min:[1],minlength:[2],multiple:[516],name:[1],hidePasswordButtonAriaLabel:[1,"hide-password-button-aria-label"],showPasswordButtonAriaLabel:[1,"show-password-button-aria-label"],pattern:[1],placeholder:[1],readonly:[516],required:[516],spellcheck:[4],state:[513],step:[1],type:[1],value:[1032],passwordReveal:[32],setBlur:[64],getInputElement:[64],setAriaAttribute:[64]},undefined,{debounce:["debounceChanged"],passwordReveal:["onPasswordRevealChange"]}]);let f=0;function b(){if(typeof customElements==="undefined"){return}const t=["wcs-input","wcs-mat-icon"];t.forEach((t=>{switch(t){case"wcs-input":if(!customElements.get(t)){customElements.define(t,w)}break;case"wcs-mat-icon":if(!customElements.get(t)){l()}break}}))}const g=w;const v=b;export{g as WcsInput,v as defineCustomElement};
+//# sourceMappingURL=wcs-input.js.map

package/bundle/wcs-input.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["inputCss","WcsInputStyle0","INPUT_INHERITED_ATTRS","Input","proxyCustomElement","H","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","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","size","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","title","hidePasswordButtonAriaLabel","showPasswordButtonAriaLabel","onClick"],"sources":["src/components/input/input.scss?tag=wcs-input&encapsulation=shadow","src/components/input/input.tsx"],"sourcesContent":["@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-reveal-password-button-border-color-focus: var(--wcs-semantic-color-border-focus-base);\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    // Default\n    --wcs-input-host-height: var(--wcs-input-height-m);\n    --wcs-input-font-size: var(--wcs-input-font-size-m);\n    padding-left: calc(var(--wcs-input-padding-horizontal-m));\n    padding-right: calc(var(--wcs-input-padding-horizontal-m));\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    button.toggle_password {\n        background: transparent;\n        border: none;\n        color: inherit;\n\n        cursor: pointer;\n\n\n        &:focus-visible {\n            @include focus-outline(var(--wcs-input-reveal-password-button-border-color-focus), $outline-offset: calc(-2 * var(--wcs-input-border-width-focus)));\n        }\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    TextFieldTypes,\n    WcsInputSize,\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-reveal-password-button-border-color-focus - border color of the show/hide password button 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: boolean = true;\n\n    @State() private passwordReveal: boolean = 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: boolean = 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({ reflect: true }) disabled: boolean = 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({ reflect: true }) 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    @Prop() hidePasswordButtonAriaLabel: string = \"Cacher le mot de passe\";\n    @Prop() showPasswordButtonAriaLabel: string = \"Afficher le mot de passe\";\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({ reflect: true }) readonly: boolean = false;\n\n    /**\n     * If `true`, the user must fill in a value before submitting a form.\n     */\n    @Prop({ reflect: true }) required: boolean = false;\n\n    /**\n     * If `true`, the element will have its spelling and grammar checked.\n     */\n    @Prop() spellcheck: boolean = 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\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\" ? (\n                    <button title={this.passwordReveal ? this.hidePasswordButtonAriaLabel : this.showPasswordButtonAriaLabel} class=\"toggle_password\" onClick={() => this.passwordRevealIconClick()}>\n                        <wcs-mat-icon icon={this.iconPassword} size=\"m\"></wcs-mat-icon>\n                    </button>\n                ) : null}\n                {this.suffixLabel ? (<span class=\"suffix\" part=\"suffix\">{this.suffixLabel}</span>) : null}\n            </Host>\n        );\n    }\n}\n\nlet inputIds = 0;\n"],"mappings":"+JAAA,MAAMA,EAAW,i/MACjB,MAAAC,EAAeD,ECgCf,MAAME,EAAwB,CAAC,WAAY,S,MA+D9BC,EAAKC,EAAA,MAAAD,UAAAE,E,8MAGNC,KAAAC,QAAU,aAAaC,MACvBF,KAAAG,oBAA4C,GAC5CH,KAAAI,aAAe,aAyPfJ,KAAAK,QAAWC,IACf,MAAMC,EAAQD,EAAGE,OACjB,GAAID,EAAO,CACPP,KAAKS,MAAQF,EAAME,OAAS,E,CAEhCT,KAAKU,SAASC,KAAKL,EAAoB,EAGnCN,KAAAY,SAAYC,IAChBb,KAAKc,UAAUH,KAAK,CAACF,MAAOT,KAAKe,YAAYN,OAAO,EAGhDT,KAAAgB,OAAUV,IACd,GAAIN,KAAKiB,gBAAiB,CACtBjB,KAAKkB,QAAQP,KAAKL,E,GAIlBN,KAAAmB,QAAWb,IACf,GAAIN,KAAKiB,gBAAiB,CACtBjB,KAAKoB,SAAST,KAAKL,E,wBAnQQ,K,oBAEQ,M,0CAYlB,M,kBAKiB,M,iBAKC,M,eAKd,M,cAMV,E,oEAoB0B,M,sCAUD,I,uKA2CrBN,KAAKC,Q,iCAEkB,yB,iCACA,2B,gEAoBD,M,cAKA,M,gBAKf,M,WAMgB,U,8BAWf,O,WAKyB,E,CA7H9C,eAAAoB,GACNrB,KAAKU,SAAWY,EAActB,KAAKU,SAAUV,KAAKuB,S,CAkJtD,iBAAAC,GACIxB,KAAKG,oBAAmBsB,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsB3B,KAAK4B,KAC3BC,EAAkB7B,KAAK4B,GAAIhC,G,CAItC,iBAAAkC,GACI9B,KAAKqB,kBACgB,CACjBU,SAASC,cAAc,IAAIC,YAAY,kBAAmB,CACtDC,OAAQlC,KAAK4B,K,EAKzB,oBAAAO,GACyB,CACjBJ,SAASC,cAAc,IAAIC,YAAY,oBAAqB,CACxDC,OAAQlC,KAAK4B,K,EAWzB,aAAMQ,GACF,GAAIpC,KAAKe,YAAa,CAClBf,KAAKe,YAAYsB,M,EAQzB,eAAAC,GACI,OAAOC,QAAQC,QAAQxC,KAAKe,Y,CAIhC,sBAAM0B,CAAiBC,EAAyBjC,GAC5CkC,EAAqB3C,KAAKe,YAAa2B,EAAMjC,E,CAGzC,gBAAAmC,GACJ,cAAc5C,KAAKS,QAAU,SAAWT,KAAKS,MAAMoC,YAC9C7C,KAAKS,OAAS,IAAIoC,U,CA2BnB,uBAAAC,GACJ9C,KAAK+C,gBAAkB/C,KAAK+C,c,CAIhC,sBAAAC,GACIhD,KAAKI,aAAeJ,KAAK+C,eAAiB,iBAAmB,Y,CAGjE,MAAAE,GACI,MAAMxC,EAAQT,KAAK4C,mBACnB,MAAMM,EAAUlD,KAAKC,QAAU,OAC/B,MAAMkD,EAAQC,EAAcpD,KAAK4B,IACjC,GAAIuB,EAAO,CACPA,EAAME,GAAKH,C,CAGf,OACII,EAACC,EAAI,CAAAC,IAAA,2DACcxD,KAAKyD,SAAW,OAAS,KAAI,oBACzBzD,KAAK0D,YAAW,oBAChB1D,KAAK2D,aAEvB3D,KAAK0D,YAAeJ,EAAA,QAAMM,MAAM,SAASC,KAAK,UAAU7D,KAAK0D,aAAuB,KACpF1D,KAAK8D,KAAQR,EAAA,gBAAcQ,KAAM9D,KAAK8D,KAAMC,KAAK,MAAuB,KACzET,EAAA,QAAA7B,OAAAC,OAAA,CAAA8B,IAAA,2CACII,MAAM,eACNI,IAAKzD,GAASP,KAAKe,YAAcR,EAAK,kBACrB4C,EAAQD,EAAU,KACnCO,SAAUzD,KAAKyD,SACfQ,OAAQjE,KAAKiE,OACbC,eAAgBlE,KAAKmE,eACrBC,aAAcpE,KAAKqE,aACnBC,YAAatE,KAAKuE,YAClBC,UAAWxE,KAAKyE,UAChBC,aAAc1E,KAAK2E,aACnBC,UAAW5E,KAAK6E,UAChBC,IAAK9E,KAAK8E,IACVC,IAAK/E,KAAK+E,IACVC,UAAWhF,KAAKiF,UAChBC,UAAWlF,KAAKmF,UAChBC,SAAUpF,KAAKoF,SACfC,KAAMrF,KAAKqF,KACXC,QAAStF,KAAKsF,QACdC,YAAavF,KAAKuF,aAAe,GACjCC,SAAUxF,KAAKyF,SACfC,SAAU1F,KAAK0F,SACfC,WAAY3F,KAAK2F,WACjBC,KAAM5F,KAAK4F,KACXC,KAAM7F,KAAK+C,eAAiB,OAAS/C,KAAK6F,KAC1CpF,MAAOA,EACPJ,QAASL,KAAKK,QACdO,SAAUZ,KAAKY,SACfI,OAAQhB,KAAKgB,OACbG,QAASnB,KAAKmB,SACVnB,KAAKG,sBAEZH,KAAK6F,OAAS,WACXvC,EAAA,UAAQwC,MAAO9F,KAAK+C,eAAiB/C,KAAK+F,4BAA8B/F,KAAKgG,4BAA6BpC,MAAM,kBAAkBqC,QAAS,IAAMjG,KAAK8C,2BAClJQ,EAAA,gBAAcQ,KAAM9D,KAAKI,aAAc2D,KAAK,OAEhD,KACH/D,KAAK2D,YAAeL,EAAA,QAAMM,MAAM,SAASC,KAAK,UAAU7D,KAAK2D,aAAuB,K,k7BAMrG,IAAIzD,EAAW,E"}

package/bundle/wcs-label.d.ts

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

package/bundle/wcs-label.js

@@ -0,0 +1,2 @@
+import{L as o,d as s}from"./p-fc9ba34d.js";const t=o;const a=s;export{t as WcsLabel,a as defineCustomElement};
+//# sourceMappingURL=wcs-label.js.map

package/bundle/wcs-label.js.map

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

package/bundle/wcs-list-item-properties.d.ts

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

package/bundle/wcs-list-item-properties.js

@@ -0,0 +1,2 @@
+import{p as t,H as e,h as s,c as r}from"./p-2bef72c7.js";const i=':host{--wcs-list-item-properties-margin-bottom:var(--wcs-semantic-spacing-small);--wcs-list-item-properties-gap:calc(4 * var(--wcs-semantic-spacing-base));--wcs-list-item-properties-separator-width:var(--wcs-semantic-border-width-large);--wcs-list-item-properties-separator-color:var(--wcs-semantic-color-border-secondary);display:flex;margin-bottom:var(--wcs-list-item-properties-margin-bottom);gap:var(--wcs-list-item-properties-gap)}::slotted(*:not(:last-of-type)){position:relative}::slotted(*:not(:last-of-type))::after{position:absolute;content:"";top:0;height:100%;width:var(--wcs-list-item-properties-separator-width);background-color:var(--wcs-list-item-properties-separator-color);right:calc(-0.5 * var(--wcs-list-item-properties-gap) - 0.5 * var(--wcs-list-item-properties-separator-width))}';const o=i;const c=t(class t extends e{constructor(){super();this.__registerHost();this.__attachShadow()}render(){return s(r,{key:"c9403bd863f3fbd182426df25c089d61ac3e5986",slot:"properties"},s("slot",{key:"23baae7bd7dc743b23fc5598c8a60b6edf37f9c4",name:"property"}))}static get style(){return o}},[1,"wcs-list-item-properties"]);function a(){if(typeof customElements==="undefined"){return}const t=["wcs-list-item-properties"];t.forEach((t=>{switch(t){case"wcs-list-item-properties":if(!customElements.get(t)){customElements.define(t,c)}break}}))}const p=c;const l=a;export{p as WcsListItemProperties,l as defineCustomElement};
+//# sourceMappingURL=wcs-list-item-properties.js.map

package/bundle/wcs-list-item-properties.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["listItemPropertiesCss","WcsListItemPropertiesStyle0","ListItemProperties","proxyCustomElement","H","render","h","Host","key","slot","name"],"sources":["src/components/list-item-properties/list-item-properties.scss?tag=wcs-list-item-properties&encapsulation=shadow","src/components/list-item-properties/list-item-properties.tsx"],"sourcesContent":[":host {\n    --wcs-list-item-properties-margin-bottom: var(--wcs-semantic-spacing-small);\n    --wcs-list-item-properties-gap: calc(4 * var(--wcs-semantic-spacing-base));\n    --wcs-list-item-properties-separator-width: var(--wcs-semantic-border-width-large);\n    --wcs-list-item-properties-separator-color: var(--wcs-semantic-color-border-secondary);\n\n    display: flex;\n    margin-bottom: var(--wcs-list-item-properties-margin-bottom);\n    gap: var(--wcs-list-item-properties-gap);\n}\n\n::slotted(*:not(:last-of-type)) {\n    position: relative;\n\n    &::after {\n        position: absolute;\n        content: '';\n        top: 0;\n        height: 100%;\n        width: var(--wcs-list-item-properties-separator-width);\n        background-color: var(--wcs-list-item-properties-separator-color);\n        right: calc(-0.5 * var(--wcs-list-item-properties-gap) - 0.5 * var(--wcs-list-item-properties-separator-width));\n    }\n}\n\n","import { Component, ComponentInterface, h, Host } from '@stencil/core';\n\n/**\n * The list-item-properties is a subcomponent of `wcs-list-item`. It represents a wrapper for a list of several `wcs-property`.\n * \n * @slot property - Slot containing the `<wcs-property>` elements\n * \n * @cssprop --wcs-list-item-properties-margin-bottom - Margin bottom of the properties\n * @cssprop --wcs-list-item-properties-gap - Gap between all list item properties\n * @cssprop --wcs-list-item-properties-separator-width - Separator width between all list item properties\n * @cssprop --wcs-list-item-properties-separator-color - Separator color between all list item properties\n */\n@Component({\n    tag: 'wcs-list-item-properties',\n    styleUrl: 'list-item-properties.scss',\n    shadow: true\n})\nexport class ListItemProperties implements ComponentInterface {\n    render() {\n        return (\n            <Host slot=\"properties\">\n                <slot name=\"property\"/>\n            </Host>\n        );\n    }\n}\n"],"mappings":"yDAAA,MAAMA,EAAwB,qyBAC9B,MAAAC,EAAeD,E,MCgBFE,EAAkBC,EAAA,MAAAD,UAAAE,E,kEAC3B,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,cACPH,EAAA,QAAAE,IAAA,2CAAME,KAAK,a"}

package/bundle/wcs-list-item-property.d.ts

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

package/bundle/wcs-list-item-property.js

@@ -0,0 +1,2 @@
+import{p as t,H as e,h as s,c as o}from"./p-2bef72c7.js";const r=":host{--wcs-list-item-property-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-list-item-property-color:var(--wcs-semantic-color-text-secondary);font-weight:var(--wcs-list-item-property-font-weight);color:var(--wcs-list-item-property-color)}";const c=r;const i=t(class t extends e{constructor(){super();this.__registerHost();this.__attachShadow()}render(){return s(o,{key:"8f87008b8f9a847e0ef6ca55d87b2eec24eb1763",slot:"property"},s("slot",{key:"5ad7e2f0f44d93c9ba599f23a850648f88dbefb9"}))}static get style(){return c}},[1,"wcs-list-item-property"]);function n(){if(typeof customElements==="undefined"){return}const t=["wcs-list-item-property"];t.forEach((t=>{switch(t){case"wcs-list-item-property":if(!customElements.get(t)){customElements.define(t,i)}break}}))}const p=i;const f=n;export{p as WcsListItemProperty,f as defineCustomElement};
+//# sourceMappingURL=wcs-list-item-property.js.map

package/bundle/wcs-list-item-property.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["listItemPropertyCss","WcsListItemPropertyStyle0","ListItemProperty","proxyCustomElement","H","render","h","Host","key","slot"],"sources":["src/components/list-item-property/list-item-property.scss?tag=wcs-list-item-property&encapsulation=shadow","src/components/list-item-property/list-item-property.tsx"],"sourcesContent":[":host {\n    --wcs-list-item-property-font-weight: var(--wcs-semantic-font-weight-medium);\n    --wcs-list-item-property-color: var(--wcs-semantic-color-text-secondary);\n\n    font-weight: var(--wcs-list-item-property-font-weight);\n    color: var(--wcs-list-item-property-color);\n}\n","import { Component, ComponentInterface, h, Host } from '@stencil/core';\n\n/**\n * The list-item-property is a subcomponent of `wcs-list-item`.\n * Wrapped in a `wcs-list-item-properties`, it represents a property to describe an item.\n * \n * @slot <no-name> - Main container slot\n * \n * @cssprop --wcs-list-item-property-font-weight - Font weight of the property\n * @cssprop --wcs-list-item-property-color - Color of the property\n */\n@Component({\n    tag: 'wcs-list-item-property',\n    styleUrl: 'list-item-property.scss',\n    shadow: true\n})\nexport class ListItemProperty implements ComponentInterface {\n    render() {\n        return (\n            <Host slot=\"property\">\n                <slot/>\n            </Host>\n        );\n    }\n}\n"],"mappings":"yDAAA,MAAMA,EAAsB,6PAC5B,MAAAC,EAAeD,E,MCeFE,EAAgBC,EAAA,MAAAD,UAAAE,E,kEACzB,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,YACPH,EAAA,QAAAE,IAAA,6C"}

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

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

package/bundle/wcs-list-item.js

@@ -0,0 +1,2 @@
+import{p as t,H as e,h as i,c}from"./p-2bef72c7.js";const s=":host{--wcs-list-item-padding:var(--wcs-semantic-spacing-large);--wcs-list-item-border-width:var(--wcs-semantic-border-width-default);--wcs-list-item-border-color:var(--wcs-semantic-color-border-secondary);--wcs-list-item-background-color-default:var(--wcs-semantic-color-background-action-secondary-default);--wcs-list-item-background-color-hover:var(--wcs-semantic-color-background-action-secondary-hover);--wcs-list-item-background-color-active:var(--wcs-semantic-color-background-action-secondary-selected-default);--wcs-list-item-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);--wcs-list-item-title-color:var(--wcs-semantic-color-text-primary);--wcs-list-item-title-font-weight:var(--wcs-semantic-font-weight-heavy);--wcs-list-item-title-line-height:var(--wcs-semantic-font-line-height-medium);--wcs-list-item-title-margin-bottom:var(--wcs-semantic-spacing-base);--wcs-list-item-icon-color:var(--wcs-semantic-color-text-secondary);--wcs-list-item-icon-margin-right:var(--wcs-semantic-spacing-large);--wcs-list-item-actions-margin-left:var(--wcs-semantic-spacing-base);display:flex;padding:var(--wcs-list-item-padding);border:solid var(--wcs-list-item-border-width) var(--wcs-list-item-border-color);margin-bottom:calc(-1 * var(--wcs-list-item-border-width));background-color:var(--wcs-list-item-background-color-default)}:host(:hover){background-color:var(--wcs-list-item-background-color-hover);transition:var(--wcs-list-item-transition-duration)}:host([activated]){background-color:var(--wcs-list-item-background-color-active)}::slotted([slot=title]){color:var(--wcs-list-item-title-color);margin-bottom:var(--wcs-list-item-title-margin-bottom);line-height:var(--wcs-list-item-title-line-height);font-weight:var(--wcs-list-item-title-font-weight);font-family:inherit}::slotted([slot=icon]){color:var(--wcs-list-item-icon-color);margin-right:var(--wcs-list-item-icon-margin-right)}::slotted([slot=actions]){margin-left:var(--wcs-list-item-actions-margin-left)}.content{display:flex;flex-direction:column;flex-grow:1}.header{display:flex;justify-content:space-between}";const a=s;const o=t(class t extends e{constructor(){super();this.__registerHost();this.__attachShadow();this.activated=false}render(){return i(c,{key:"12f53246cdb5922136d782f186573f3558bebbed"},i("slot",{key:"e03247aafa44501292b6c86d58455dc91240151c",name:"icon"}),i("div",{key:"24b4b6b485457e2c37001360f55ce1f4e843366e",class:"content"},i("div",{key:"736464f3f43ccbdd2a204c3a7b54b78f8ef79c4e",class:"header"},i("div",{key:"13da0ca922bf545f5610326f5abfc135b66389c5"},i("slot",{key:"1eb08b7d5aa3bef934f39527204f2633f51325df",name:"title"}),i("slot",{key:"3d506707345797e7e40246b18dc0aac557726d3c",name:"properties"})),i("slot",{key:"1a2afea410fe835bc8570e10e5f72a044d7a0218",name:"actions"})),i("slot",{key:"b0e4e3ed4cb20abb4d80ac7ff8893cd7b6311aec",name:"description"})))}static get style(){return a}},[1,"wcs-list-item",{activated:[1540]}]);function r(){if(typeof customElements==="undefined"){return}const t=["wcs-list-item"];t.forEach((t=>{switch(t){case"wcs-list-item":if(!customElements.get(t)){customElements.define(t,o)}break}}))}const n=o;const l=r;export{n as WcsListItem,l as defineCustomElement};
+//# sourceMappingURL=wcs-list-item.js.map

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

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

package/bundle/wcs-mat-icon.d.ts

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

package/bundle/wcs-mat-icon.js

@@ -0,0 +1,2 @@
+import{M as o,d as s}from"./p-98bd8a96.js";const t=o;const a=s;export{t as WcsMatIcon,a as defineCustomElement};
+//# sourceMappingURL=wcs-mat-icon.js.map

package/bundle/wcs-mat-icon.js.map

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

package/bundle/wcs-modal.d.ts

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

package/bundle/wcs-modal.js

@@ -0,0 +1,2 @@
+import{p as t,H as s,d as o,h as e,c as a}from"./p-2bef72c7.js";import{i,a as c}from"./p-fb2751c2.js";import{i as d,a as n,s as l,o as r}from"./p-2e9b9605.js";import{d as m}from"./p-6bc981dd.js";import{d as h}from"./p-98bd8a96.js";import{d as w}from"./p-c8b73e93.js";const b="wcs-modal{--wcs-modal-backdrop-color:var(--wcs-semantic-color-background-backdrop);--wcs-modal-max-height:80%;--wcs-modal-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-modal-border-radius:var(--wcs-semantic-border-radius-base);--wcs-modal-padding:calc(3 * var(--wcs-semantic-spacing-base));--wcs-modal-border-width:var(--wcs-semantic-border-width-default);--wcs-modal-border-color:var(--wcs-semantic-color-border-secondary);--wcs-modal-title-margin-bottom:var(--wcs-semantic-spacing-large);--wcs-modal-title-font-size:var(--wcs-semantic-font-size-heading-4);--wcs-modal-title-font-weight:var(--wcs-semantic-font-weight-heavy);--wcs-modal-title-line-height:var(--wcs-semantic-font-line-height-medium);--wcs-modal-actions-margin-top:var(--wcs-semantic-spacing-large);--wcs-modal-width-s:288px;--wcs-modal-width-m:480px;--wcs-modal-width-l:864px;--wcs-modal-width-xl:1200px;z-index:999;position:fixed;top:0;bottom:0;left:0;right:0;display:none;background:var(--wcs-modal-backdrop-color)}wcs-modal[show]{display:flex;height:100vh;width:100vw;align-items:center;justify-content:center}wcs-modal[without-backdrop]{background-color:unset}wcs-modal[without-backdrop] .wcs-modal-container{border:solid var(--wcs-modal-border-width) var(--wcs-modal-border-color)}wcs-modal[hide-actions] .wcs-modal-actions{display:none}.wcs-modal-container{max-height:var(--wcs-modal-max-height, 80%);background-color:var(--wcs-modal-background-color);display:grid;grid-template-columns:100%;grid-template-rows:auto 1fr auto;box-sizing:border-box;pointer-events:auto;background-clip:padding-box;border-radius:var(--wcs-modal-border-radius);z-index:20000;padding:var(--wcs-modal-padding);width:var(--wcs-modal-width-m)}.wcs-modal-container[data-size=s]{width:var(--wcs-modal-width-s)}.wcs-modal-container[data-size=m]{width:var(--wcs-modal-width-m)}.wcs-modal-container[data-size=l]{width:var(--wcs-modal-width-l)}.wcs-modal-container[data-size=xl]{width:var(--wcs-modal-width-xl)}.wcs-modal-header{margin-bottom:var(--wcs-modal-title-margin-bottom);display:flex;align-items:center;justify-content:space-between}.wcs-modal-header h1{font-size:var(--wcs-modal-title-font-size);font-weight:var(--wcs-modal-title-font-weight);line-height:var(--wcs-modal-title-line-height);margin:0}.wcs-modal-content{overflow-y:var(--wcs-modal-overflow-y, auto)}.wcs-modal-actions{margin-top:var(--wcs-modal-actions-margin-top);display:flex;justify-content:flex-end}";const f=b;const u=[];const p=t(class t extends s{constructor(){super();this.__registerHost();this.wcsDialogClosed=o(this,"wcsDialogClosed",7);this.inheritedAttributes={};this.modalId=g++;this.showAttributeChangedMarker=false;this.hasBeenClosedBefore=false;this.withoutBackdrop=false;this.show=false;this.showCloseButton=false;this.closeButtonAriaLabel="Fermer";this.size="m";this.hideActions=false;this.modalTriggerControlsId=undefined;this.initialFocusElementId=undefined;this.disableAutoFocus=false}componentWillLoad(){if(!this.modalTriggerControlsId){console.warn("wcs-modal: You must provide the modal-trigger-controls-id attribute to the modal to make it to work properly")}this.inheritedAttributes=Object.assign(Object.assign({},d(this.el)),n(this.el,u))}componentDidLoad(){this.updateFocusableElements()}componentDidRender(){var t;this.updateFocusableElements();if(this.showAttributeChangedMarker){this.showAttributeChangedMarker=false;if(this.disableAutoFocus){return}if(!this.initialFocusElementId){(t=this.firstFocusableElement)===null||t===void 0?void 0:t.focus()}else{const t=document.getElementById(this.initialFocusElementId);if(!t){console.warn(`wcs-modal: Unable to focus element - ID '${this.initialFocusElementId}' not found in DOM`)}t===null||t===void 0?void 0:t.focus()}}}async setAriaAttribute(t,s){l(this.nativeDivDialog,t,s)}onShowChange(){if(this.show){this.hasBeenClosedBefore=false;this.showAttributeChangedMarker=true}else{if(this.hasBeenClosedBefore){return}this.hasBeenClosedBefore=true;if(this.modalTriggerControlsId){const t=document.getElementById(this.modalTriggerControlsId);if(!t){console.warn(`wcs-modal: Element with id '${this.modalTriggerControlsId}' could not be found`)}t===null||t===void 0?void 0:t.focus()}}}updateFocusableElements(){const t=Array.from(this.el.querySelectorAll("*")).filter((t=>i(t)));this.firstFocusableElement=t.length>0&&t[0];this.lastFocusableElement=t.length>0&&t[t.length-1]}close(){if(this.show){this.show=false;this.wcsDialogClosed.emit()}}onKeyDown(t){if(this.show&&this.showCloseButton&&t.key==="Escape"){this.close()}if(this.show){if(r(t)){this.updateFocusableElements();const s=this.firstFocusableElement;const o=this.lastFocusableElement;if(t.shiftKey&&c(s)){t.preventDefault();o.focus()}else if(!t.shiftKey&&c(o)){t.preventDefault();s.focus()}}}}onCloseButtonClick(t){this.close()}handleSlotContentChange(){this.updateFocusableElements()}render(){const t=`wcs-modal-title-${this.modalId}`;return e(a,{key:"e609fe2024b73cab0bed97c0d3b7012d8deba893"},e("div",Object.assign({key:"23007c4ad4971263f7fd99d0e594216cd112f6ea",class:"wcs-modal-container","data-size":this.size,"aria-modal":"true",role:"dialog","aria-labelledby":t,ref:t=>this.nativeDivDialog=t},this.inheritedAttributes),e("div",{key:"bc3e2ead8e3e73da31882c5e87cde2780d9ef2f9",class:"wcs-modal-header"},e("h1",{key:"87561fc92b0990d00e06463afc111e9bdeab6f20",id:t},e("slot",{key:"dbf6d932257e7a264206ddf7caea8a80e4b2b069",name:"header"})),this.showCloseButton&&e("wcs-button",{key:"97036ea40d111c5ac737b1e3f789571cd524cb2d",shape:"round",mode:"clear",id:"wcs-modal-close-button","aria-label":this.closeButtonAriaLabel,onClick:t=>this.onCloseButtonClick(t)},e("wcs-mat-icon",{key:"24d6b531e788c2760c66804df96037714c9f854b",icon:"close"}))),e("div",{key:"34d9ddf3c4527395864a238f329d7b499eb9791b",class:"wcs-modal-content"},e("slot",{key:"5bbd76fc7de9bc6f5aaec7257e7c73995d3e1447",onSlotchange:()=>this.handleSlotContentChange()})),e("div",{key:"7c332e9d1c1b19b65fabb6f52bc14ab0ed9f4803",class:"wcs-modal-actions"},e("slot",{key:"4c44f2337893ba9e8c852a1b8b16beab9da87e4e",name:"actions"}))))}get el(){return this}static get watchers(){return{show:["onShowChange"]}}static get style(){return f}},[4,"wcs-modal",{withoutBackdrop:[516,"without-backdrop"],show:[1540],showCloseButton:[516,"show-close-button"],closeButtonAriaLabel:[1,"close-button-aria-label"],size:[1],hideActions:[516,"hide-actions"],modalTriggerControlsId:[1,"modal-trigger-controls-id"],initialFocusElementId:[1,"initial-focus-element-id"],disableAutoFocus:[516,"disable-auto-focus"],setAriaAttribute:[64]},[[4,"keydown","onKeyDown"]],{show:["onShowChange"]}]);let g=0;function v(){if(typeof customElements==="undefined"){return}const t=["wcs-modal","wcs-button","wcs-mat-icon","wcs-spinner"];t.forEach((t=>{switch(t){case"wcs-modal":if(!customElements.get(t)){customElements.define(t,p)}break;case"wcs-button":if(!customElements.get(t)){m()}break;case"wcs-mat-icon":if(!customElements.get(t)){h()}break;case"wcs-spinner":if(!customElements.get(t)){w()}break}}))}const k=p;const y=v;export{k as WcsModal,y as defineCustomElement};
+//# sourceMappingURL=wcs-modal.js.map

package/bundle/wcs-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["modalCss","WcsModalStyle0","MODAL_INHERITED_ATTRS","Modal","proxyCustomElement","H","this","inheritedAttributes","modalId","modalIds","showAttributeChangedMarker","hasBeenClosedBefore","undefined","componentWillLoad","modalTriggerControlsId","console","warn","Object","assign","inheritAriaAttributes","el","inheritAttributes","componentDidLoad","updateFocusableElements","componentDidRender","disableAutoFocus","initialFocusElementId","_a","firstFocusableElement","focus","modalElementToFocusOnOpening","document","getElementById","setAriaAttribute","attr","value","setOrRemoveAttribute","nativeDivDialog","onShowChange","show","modalTriggerControlsHtmlElement","focusableElements","Array","from","querySelectorAll","filter","element","isFocusable","length","lastFocusableElement","close","wcsDialogClosed","emit","onKeyDown","event","showCloseButton","key","isTabKey","firstElement","lastElement","shiftKey","isElementFocused","preventDefault","onCloseButtonClick","_","handleSlotContentChange","render","modalTitleId","h","Host","class","size","role","ref","id","name","shape","mode","closeButtonAriaLabel","onClick","$event","icon","onSlotchange"],"sources":["src/components/modal/modal.scss?tag=wcs-modal","src/components/modal/modal.tsx"],"sourcesContent":["wcs-modal {\n    --wcs-modal-backdrop-color: var(--wcs-semantic-color-background-backdrop);\n    --wcs-modal-max-height: 80%;\n    --wcs-modal-background-color: var(--wcs-semantic-color-background-surface-primary);\n    --wcs-modal-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-modal-padding: calc(3 * var(--wcs-semantic-spacing-base));\n    --wcs-modal-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-modal-border-color: var(--wcs-semantic-color-border-secondary);\n    --wcs-modal-title-margin-bottom: var(--wcs-semantic-spacing-large);\n    --wcs-modal-title-font-size: var(--wcs-semantic-font-size-heading-4);\n    --wcs-modal-title-font-weight: var(--wcs-semantic-font-weight-heavy);\n    --wcs-modal-title-line-height: var(--wcs-semantic-font-line-height-medium);\n    --wcs-modal-actions-margin-top: var(--wcs-semantic-spacing-large);\n\n    // Specific component level tokens\n    --wcs-modal-width-s: 288px;\n    --wcs-modal-width-m: 480px;\n    --wcs-modal-width-l: 864px;\n    --wcs-modal-width-xl: 1200px;\n\n    z-index: 999;\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    display: none;\n    background: var(--wcs-modal-backdrop-color);\n}\n\nwcs-modal[show] {\n    display: flex;\n    height: 100vh;\n    width: 100vw;\n    align-items: center;\n    justify-content: center;\n}\n\n/**\nBackdrop\n */\nwcs-modal[without-backdrop] {\n    background-color: unset;\n\n    .wcs-modal-container {\n        border: solid var(--wcs-modal-border-width) var(--wcs-modal-border-color);\n    }\n}\n\nwcs-modal[hide-actions] {\n    .wcs-modal-actions {\n        display: none;\n    }\n}\n\n/**\nModal window\n */\n.wcs-modal-container {\n    max-height: var(--wcs-modal-max-height, 80%);\n    background-color: var(--wcs-modal-background-color);\n    display: grid;\n    grid-template-columns: 100%;\n    grid-template-rows: auto 1fr auto;\n    box-sizing: border-box;\n    pointer-events: auto;\n    background-clip: padding-box;\n    border-radius: var(--wcs-modal-border-radius);\n    z-index: 20000;\n    padding: var(--wcs-modal-padding);\n\n    width: var(--wcs-modal-width-m); // Default size\n}\n\n.wcs-modal-container[data-size=s] {\n    width: var(--wcs-modal-width-s);\n}\n\n.wcs-modal-container[data-size=m] {\n    width: var(--wcs-modal-width-m);\n}\n\n.wcs-modal-container[data-size=l] {\n    width: var(--wcs-modal-width-l);\n}\n\n.wcs-modal-container[data-size=xl] {\n    width: var(--wcs-modal-width-xl);\n}\n\n.wcs-modal-header {\n    /* h1 for semantic but h3 for style */\n    h1 {\n        font-size: var(--wcs-modal-title-font-size);\n        font-weight: var(--wcs-modal-title-font-weight);\n        line-height: var(--wcs-modal-title-line-height);\n        margin: 0;\n    }\n\n    margin-bottom: var(--wcs-modal-title-margin-bottom);\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n}\n\n.wcs-modal-content {\n    overflow-y: var(--wcs-modal-overflow-y, auto);\n}\n\n.wcs-modal-actions {\n    margin-top: var(--wcs-modal-actions-margin-top);\n    display: flex;\n    justify-content: flex-end;\n}\n","import {\n    Element,\n    Component,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen,\n    Prop,\n    ComponentInterface,\n    Watch, Method\n} from '@stencil/core';\nimport { ModalSize } from './modal-interface';\nimport { isElementFocused, isFocusable } from \"../../utils/accessibility\";\nimport { inheritAriaAttributes, inheritAttributes, isTabKey, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst MODAL_INHERITED_ATTRS = [];\n\n/**\n * The modal component (also named dialog or popup) is an interface element that appears on top of the page content.\n * Use it to show a message, a confirmation dialog, or any other content like forms.\n *\n * ## Accessibility guidelines 💡\n * > - Modal element has `role=\"dialog\"` and `aria-modal=\"true\"`\n * > - Keyboard navigation is trapped inside the modal\n * > - It is mandatory to set the `modal-trigger-controls-id` to the id of the element that opens the dialog, in order\n * > to focus it upon dialog dismissal.\n * > - On modal opening, the default behaviour is to focus the first focusable element. If you want to change the initial \n * > behaviour, you have to use `modal-element-id-to-focus-on-opening` attribute to set the id of the inner modal element you \n * > want to focus. You will see a story as example below\n * > - The modal can be closed at any time by pressing the Escape key.\n * >\n * > - More info : https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/\n *\n * @cssprop --wcs-modal-max-height - Max height of the main container\n * @cssprop --wcs-modal-overflow-y - Overflow-y of the content\n *\n * @cssprop --wcs-modal-backdrop-color - Backdrop color of the modal\n * @cssprop --wcs-modal-max-height - Max height of the main container\n * @cssprop --wcs-modal-background-color - Background color of the modal\n * @cssprop --wcs-modal-border-radius - Border radius of the modal\n * @cssprop --wcs-modal-padding - Padding inside the modal\n * @cssprop --wcs-modal-border-width - Border width of the modal\n * @cssprop --wcs-modal-border-color - Border color of the modal\n * @cssprop --wcs-modal-title-margin-bottom - Margin bottom of the modal title\n * @cssprop --wcs-modal-title-font-size - Font size of the modal title\n * @cssprop --wcs-modal-title-font-weight - Font weight of the modal title\n * @cssprop --wcs-modal-title-line-height - Line height of the modal title\n * @cssprop --wcs-modal-actions-margin-top - Margin top of the modal actions\n * @cssprop --wcs-modal-width-s - Width of the modal for size small\n * @cssprop --wcs-modal-width-m - Width of the modal for size medium\n * @cssprop --wcs-modal-width-l - Width of the modal for size large\n * @cssprop --wcs-modal-width-xl - Width of the modal for size extra large\n * \n * @slot <no-name> Main container slot\n * @slot header Header container slot (for title)\n * @slot actions Actions container slot (for buttons)\n */\n@Component({\n    tag: 'wcs-modal',\n    styleUrl: 'modal.scss',\n    shadow: false,\n})\nexport class Modal implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el: HTMLElement;\n    private nativeDivDialog!: HTMLDivElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /**\n     * Specifies whether the component should display a backdrop on the entire page\n     */\n    @Prop({reflect: true}) withoutBackdrop: boolean = false;\n\n    /**\n     * Displays the modal\n     */\n    @Prop({reflect: true, mutable: true}) show: boolean = false;\n\n    /**\n     * Triggered when the user leaves the dialog with the closing button.\n     */\n    @Event() wcsDialogClosed: EventEmitter<void>;\n\n    /**\n     * Specifies whether the component should display a close button.\n     * if false, it won't close the modal when the escape key is pressed.\n     */\n    @Prop({reflect: true}) showCloseButton: boolean = false;\n\n    /**\n     * Specifies the aria-label present on the close button when the modal is opened.  \n     * Only use when `showCloseButton` is `true`.\n     */\n    @Prop() closeButtonAriaLabel: string = 'Fermer';\n\n    /**\n     * There are multiple sizes for modals. The default size is medium (m), however other sizes are available. Select the\n     * size best suited for the content and screen size displaying the modal. Remember to test responsiveness.\n     */\n    @Prop() size: ModalSize = 'm';\n\n    /**\n     * Specifies whether the component should hide the actions slot or not\n     */\n    @Prop({reflect: true}) hideActions: boolean = false;\n\n    /**\n     * Specifies which element id controls the modal\n     * @private\n     */\n    @Prop() modalTriggerControlsId: string;\n    /**\n     * The ID of the element to automatically focus when the modal opens.\n     * \n     * If this property is not set and `disableAutoFocus` is false, the modal will\n     * automatically focus the first focusable element within its content.\n     * This follows accessibility best practices by ensuring keyboard navigation\n     * starts from a logical point when the modal opens.\n     * \n     * @example\n     * <wcs-modal initial-focus-element=\"cancel-button\"></wcs-modal>\n     */\n    @Prop() initialFocusElementId?: string = undefined;\n\n    /**\n     * Disables automatic focus behavior when the modal opens.\n     * \n     * When set to true, the modal will not automatically focus any element upon opening.\n     * Use this property with caution, as managing focus is important for accessibility.\n     * Consider providing an alternative focus management strategy if disabling the default behavior.\n     */\n    @Prop({ reflect: true }) disableAutoFocus: boolean = false;\n\n    /**\n     * Give an unique id\n     * @private\n     */\n    private modalId: number = modalIds++;\n\n    private firstFocusableElement: HTMLElement;\n    private lastFocusableElement: HTMLElement;\n    /**\n     * This attribute is used to determine whether the show attribute has changed since the last rendering. \n     * This allows us to call the focus method on the first element of the modal when the show attribute changes to true. \n     * This call is made in the componentDidRender method\n     * @private\n     */\n    private showAttributeChangedMarker: boolean = false;\n    /**\n     * This attribute is used to determine if the modal has been closed for the first time since its last activation.\n     * It is set to 'true' when the modal is first closed, and will be reset to 'false' when the modal is shown again.\n     * This state is important for accessibility reasons in order to focus the modal trigger element (like the button \n     * which controls the modal)\n     *\n     * @private\n     */\n    private hasBeenClosedBefore: boolean = false;\n\n    componentWillLoad(): Promise<void> | void {\n        if (!this.modalTriggerControlsId) {\n            console.warn('wcs-modal: You must provide the modal-trigger-controls-id attribute to the modal to make it to work properly');\n        }\n\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, MODAL_INHERITED_ATTRS),\n        };\n    }\n\n    componentDidLoad() {\n        this.updateFocusableElements();\n    }\n\n    componentDidRender() {\n        this.updateFocusableElements();\n        if (this.showAttributeChangedMarker) {\n            this.showAttributeChangedMarker = false;\n            \n            if(this.disableAutoFocus) {\n                return;\n            }\n            \n            if(!this.initialFocusElementId) {\n                this.firstFocusableElement?.focus();\n            } else {\n                const modalElementToFocusOnOpening = document.getElementById(this.initialFocusElementId);\n                if(!modalElementToFocusOnOpening) {\n                    console.warn(`wcs-modal: Unable to focus element - ID '${this.initialFocusElementId}' not found in DOM`);\n                }\n                \n                modalElementToFocusOnOpening?.focus();\n            }\n        }\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeDivDialog, attr, value);\n    }\n    \n    @Watch(\"show\")\n    onShowChange() {\n        if(this.show) {\n            this.hasBeenClosedBefore = false;\n            this.showAttributeChangedMarker = true;\n        } else {\n            // if we already made actions when the modal was firstly closed, we do nothing\n            if(this.hasBeenClosedBefore) {\n                return;\n            }\n            \n            this.hasBeenClosedBefore = true;\n\n            if(this.modalTriggerControlsId) {\n                const modalTriggerControlsHtmlElement = document.getElementById(this.modalTriggerControlsId);\n                if(!modalTriggerControlsHtmlElement) {\n                    console.warn(`wcs-modal: Element with id '${this.modalTriggerControlsId}' could not be found`);\n                }\n                modalTriggerControlsHtmlElement?.focus();\n            }\n        }\n    }\n\n    private updateFocusableElements() {\n        const focusableElements = Array.from(this.el.querySelectorAll('*'))\n            .filter(element => isFocusable(element));\n\n        this.firstFocusableElement = focusableElements.length > 0 && focusableElements[0] as HTMLElement;\n        this.lastFocusableElement = focusableElements.length > 0 && focusableElements[focusableElements.length - 1] as HTMLElement;\n    }\n    \n    private close() {\n        // If the modal isn't shown, we don't do anything\n        if (this.show) {\n            this.show = false;\n            this.wcsDialogClosed.emit();\n        }\n    }\n\n    @Listen('keydown', {target: 'document'})\n    onKeyDown(event: KeyboardEvent) {\n        if (this.show && this.showCloseButton && event.key === 'Escape') {\n            this.close();\n        }\n\n        if (this.show) {\n            if (isTabKey(event)) {\n                this.updateFocusableElements(); // XXX: maybe a performance issue\n                const firstElement = this.firstFocusableElement;\n                const lastElement = this.lastFocusableElement;\n\n                if (event.shiftKey && isElementFocused(firstElement)) {\n                    event.preventDefault();\n                    lastElement.focus();\n                } else if (!event.shiftKey && isElementFocused(lastElement)) {\n                    event.preventDefault();\n                    firstElement.focus();\n                }\n            }\n        }\n    }\n\n    private onCloseButtonClick(_: MouseEvent) {\n        this.close();\n    }\n\n    private handleSlotContentChange() {\n        this.updateFocusableElements();\n    }\n\n    render() {\n        const modalTitleId = `wcs-modal-title-${this.modalId}`;\n        return (\n            <Host>\n                <div class=\"wcs-modal-container\"\n                     data-size={this.size}\n                     aria-modal=\"true\"\n                     role={\"dialog\"}\n                     aria-labelledby={modalTitleId}\n                     ref={(el) => (this.nativeDivDialog = el)}\n                     {...this.inheritedAttributes}\n                >\n                    <div class=\"wcs-modal-header\">\n                        <h1 id={modalTitleId}>\n                            <slot name=\"header\"></slot>\n                        </h1>\n                        {this.showCloseButton && (\n                            <wcs-button shape=\"round\" \n                                        mode=\"clear\" \n                                        id=\"wcs-modal-close-button\"\n                                        aria-label={this.closeButtonAriaLabel}\n                                        onClick={($event) => this.onCloseButtonClick($event)}>\n                                <wcs-mat-icon icon=\"close\"></wcs-mat-icon>\n                            </wcs-button>)\n                        }\n\n                    </div>\n                    <div class=\"wcs-modal-content\">\n                        <slot onSlotchange={() => this.handleSlotContentChange()}></slot>\n                    </div>\n                    <div class=\"wcs-modal-actions\">\n                        <slot name=\"actions\"></slot>\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n}\n\nlet modalIds = 0;\n"],"mappings":"2QAAA,MAAMA,EAAW,o5EACjB,MAAAC,EAAeD,ECgBf,MAAME,EAAwB,G,MA+CjBC,EAAKC,EAAA,MAAAD,UAAAE,E,6FAGNC,KAAAC,oBAA4C,GAuE5CD,KAAAE,QAAkBC,IAUlBH,KAAAI,2BAAsC,MAStCJ,KAAAK,oBAA+B,M,qBArFW,M,UAKI,M,qBAWJ,M,0BAMX,S,UAMb,I,iBAKoB,M,iEAkBLC,U,sBASY,K,CA2BrD,iBAAAC,GACI,IAAKP,KAAKQ,uBAAwB,CAC9BC,QAAQC,KAAK,+G,CAGjBV,KAAKC,oBAAmBU,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsBb,KAAKc,KAC3BC,EAAkBf,KAAKc,GAAIlB,G,CAItC,gBAAAoB,GACIhB,KAAKiB,yB,CAGT,kBAAAC,G,MACIlB,KAAKiB,0BACL,GAAIjB,KAAKI,2BAA4B,CACjCJ,KAAKI,2BAA6B,MAElC,GAAGJ,KAAKmB,iBAAkB,CACtB,M,CAGJ,IAAInB,KAAKoB,sBAAuB,EAC5BC,EAAArB,KAAKsB,yBAAqB,MAAAD,SAAA,SAAAA,EAAEE,O,KACzB,CACH,MAAMC,EAA+BC,SAASC,eAAe1B,KAAKoB,uBAClE,IAAII,EAA8B,CAC9Bf,QAAQC,KAAK,4CAA4CV,KAAKoB,0C,CAGlEI,IAA4B,MAA5BA,SAA4B,SAA5BA,EAA8BD,O,GAM1C,sBAAMI,CAAiBC,EAAyBC,GAC5CC,EAAqB9B,KAAK+B,gBAAiBH,EAAMC,E,CAIrD,YAAAG,GACI,GAAGhC,KAAKiC,KAAM,CACVjC,KAAKK,oBAAsB,MAC3BL,KAAKI,2BAA6B,I,KAC/B,CAEH,GAAGJ,KAAKK,oBAAqB,CACzB,M,CAGJL,KAAKK,oBAAsB,KAE3B,GAAGL,KAAKQ,uBAAwB,CAC5B,MAAM0B,EAAkCT,SAASC,eAAe1B,KAAKQ,wBACrE,IAAI0B,EAAiC,CACjCzB,QAAQC,KAAK,+BAA+BV,KAAKQ,6C,CAErD0B,IAA+B,MAA/BA,SAA+B,SAA/BA,EAAiCX,O,GAKrC,uBAAAN,GACJ,MAAMkB,EAAoBC,MAAMC,KAAKrC,KAAKc,GAAGwB,iBAAiB,MACzDC,QAAOC,GAAWC,EAAYD,KAEnCxC,KAAKsB,sBAAwBa,EAAkBO,OAAS,GAAKP,EAAkB,GAC/EnC,KAAK2C,qBAAuBR,EAAkBO,OAAS,GAAKP,EAAkBA,EAAkBO,OAAS,E,CAGrG,KAAAE,GAEJ,GAAI5C,KAAKiC,KAAM,CACXjC,KAAKiC,KAAO,MACZjC,KAAK6C,gBAAgBC,M,EAK7B,SAAAC,CAAUC,GACN,GAAIhD,KAAKiC,MAAQjC,KAAKiD,iBAAmBD,EAAME,MAAQ,SAAU,CAC7DlD,KAAK4C,O,CAGT,GAAI5C,KAAKiC,KAAM,CACX,GAAIkB,EAASH,GAAQ,CACjBhD,KAAKiB,0BACL,MAAMmC,EAAepD,KAAKsB,sBAC1B,MAAM+B,EAAcrD,KAAK2C,qBAEzB,GAAIK,EAAMM,UAAYC,EAAiBH,GAAe,CAClDJ,EAAMQ,iBACNH,EAAY9B,O,MACT,IAAKyB,EAAMM,UAAYC,EAAiBF,GAAc,CACzDL,EAAMQ,iBACNJ,EAAa7B,O,IAMrB,kBAAAkC,CAAmBC,GACvB1D,KAAK4C,O,CAGD,uBAAAe,GACJ3D,KAAKiB,yB,CAGT,MAAA2C,GACI,MAAMC,EAAe,mBAAmB7D,KAAKE,UAC7C,OACI4D,EAACC,EAAI,CAAAb,IAAA,4CACDY,EAAA,MAAAnD,OAAAC,OAAA,CAAAsC,IAAA,2CAAKc,MAAM,sBAAqB,YAChBhE,KAAKiE,KAAI,aACT,OACXC,KAAM,SAAQ,kBACGL,EACjBM,IAAMrD,GAAQd,KAAK+B,gBAAkBjB,GACjCd,KAAKC,qBAEV6D,EAAA,OAAAZ,IAAA,2CAAKc,MAAM,oBACPF,EAAA,MAAAZ,IAAA,2CAAIkB,GAAIP,GACJC,EAAA,QAAAZ,IAAA,2CAAMmB,KAAK,YAEdrE,KAAKiD,iBACFa,EAAA,cAAAZ,IAAA,2CAAYoB,MAAM,QACNC,KAAK,QACLH,GAAG,yBAAwB,aACfpE,KAAKwE,qBACjBC,QAAUC,GAAW1E,KAAKyD,mBAAmBiB,IACrDZ,EAAA,gBAAAZ,IAAA,2CAAcyB,KAAK,YAK/Bb,EAAA,OAAAZ,IAAA,2CAAKc,MAAM,qBACPF,EAAA,QAAAZ,IAAA,2CAAM0B,aAAc,IAAM5E,KAAK2D,6BAEnCG,EAAA,OAAAZ,IAAA,2CAAKc,MAAM,qBACPF,EAAA,QAAAZ,IAAA,2CAAMmB,KAAK,c,yhBAQnC,IAAIlE,EAAW,E"}

package/bundle/wcs-native-select.d.ts

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

package/bundle/wcs-native-select.js

@@ -0,0 +1,2 @@
+import{p as e,H as t,h as s,c as a}from"./p-2bef72c7.js";import{S as c}from"./p-35d7af48.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,: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 ::slotted(select),: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=e(class e extends t{constructor(){super();this.__registerHost();this.__attachShadow();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 s(a,{key:"dedd08d93118cc5323b6d2062577275504972b12",class:`${this.expanded?"expanded":""}`,"data-disabled":this.disabled,"data-size":this.size},s("div",{key:"bd211e20d0ab314767729ab54611c3d28fb8cca7",class:"select-wrapper"},s("slot",{key:"b0e58a954d0212c19a05395065ad5ed76efa9f39"}),s("div",{key:"5f70166ee1756180982a43151b9762e1cfec51d4",class:"arrow-container"},s(c,{key:"ed256e18a87ab7cf17af6b5226ee6f10779d5bb1",up:this.expanded}))))}get el(){return this}static get watchers(){return{required:["requiredChanged"]}}static get style(){return i}},[1,"wcs-native-select",{size:[513],required:[516],expanded:[32],disabled:[32],setAriaAttribute:[64],updateStyles:[64]},undefined,{required:["requiredChanged"]}]);function l(){if(typeof customElements==="undefined"){return}const e=["wcs-native-select"];e.forEach((e=>{switch(e){case"wcs-native-select":if(!customElements.get(e)){customElements.define(e,o)}break}}))}const n=o;const d=l;export{n as WcsNativeSelect,d as defineCustomElement};
+//# sourceMappingURL=wcs-native-select.js.map

package/bundle/wcs-native-select.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["nativeSelectCss","WcsNativeSelectStyle0","NativeSelect","proxyCustomElement","H","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, :host([data-size=m])  { // Default\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({ reflect: true }) required: boolean = 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,wvJACxB,MAAAC,EAAeD,E,MCqFFE,EAAYC,EAAA,MAAAD,UAAAE,E,kEAwBJC,KAAAC,uCAAyC,CAAC,Y,UAfR,I,cAKN,M,cAIR,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/bundle/wcs-nav-item.d.ts

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

package/bundle/wcs-nav-item.js

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

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

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

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

package/bundle/wcs-nav.js

@@ -0,0 +1,2 @@
+import{p as t,H as e,h as s}from"./p-2bef72c7.js";import{i as a,a as i,s as o}from"./p-2e9b9605.js";const c=":host{--wcs-nav-background-color:var(--wcs-semantic-color-background-surface-brand);--wcs-nav-width-desktop:calc(12 * var(--wcs-semantic-size-base));--wcs-nav-height-mobile:calc(6 * var(--wcs-semantic-size-base))}nav{background-color:var(--wcs-nav-background-color);display:flex;z-index:1055;flex-direction:column;width:var(--wcs-nav-width-desktop);height:100%;overflow:auto;scrollbar-width:thin}nav div[role=list]{list-style-type:none;display:flex;flex-direction:column;flex-grow:1}@media (max-width: 1199px){nav div[role=list]{flex-direction:row}}@media (max-width: 1199px){nav{flex-direction:row;width:100%;height:var(--wcs-nav-height-mobile)}}@media (max-width: 1199px){::slotted(wcs-nav-item){flex:1}}@media (min-width: 1200px){slot[name=bottom],wcs-nav-item:not([slot=bottom])+wcs-nav-item[slot=bottom]{display:block;margin-top:auto}}";const n=c;const r=["title"];const l=t(class t extends e{constructor(){super();this.__registerHost();this.__attachShadow();this.inheritedAttributes={}}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},a(this.el)),i(this.el,r))}async setAriaAttribute(t,e){o(this.nativeNav,t,e)}render(){return s("nav",Object.assign({key:"3461a64de9b036b1a970e58a26a70f70772491c8",role:"navigation",class:"wcs-nav-container",ref:t=>this.nativeNav=t},this.inheritedAttributes),s("div",{key:"aa68166f70a54e44e78c0fe8a61c224bed4bcb3e",role:"list"},s("slot",{key:"9e6315dafb2038e8577b2402dae1a646587dbb5f"}),s("slot",{key:"8dcddd80f189c8ade3ceb24cd5e36b8d03083a80",name:"bottom"})))}get el(){return this}static get style(){return n}},[1,"wcs-nav",{setAriaAttribute:[64]}]);function d(){if(typeof customElements==="undefined"){return}const t=["wcs-nav"];t.forEach((t=>{switch(t){case"wcs-nav":if(!customElements.get(t)){customElements.define(t,l)}break}}))}const m=l;const b=d;export{m as WcsNav,b as defineCustomElement};
+//# sourceMappingURL=wcs-nav.js.map

package/bundle/wcs-nav.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["navCss","WcsNavStyle0","NAV_ARIA_INHERITED_ATTRS","Nav","proxyCustomElement","H","constructor","this","inheritedAttributes","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","setAriaAttribute","attr","value","setOrRemoveAttribute","nativeNav","render","h","key","role","class","ref","name"],"sources":["src/components/nav/nav.scss?tag=wcs-nav&encapsulation=shadow","src/components/nav/nav.tsx"],"sourcesContent":["@import '../../style/breakpoints';\n\n:host {\n    --wcs-nav-background-color: var(--wcs-semantic-color-background-surface-brand);\n    --wcs-nav-width-desktop: calc(12 * var(--wcs-semantic-size-base));\n    --wcs-nav-height-mobile: calc(6 * var(--wcs-semantic-size-base));\n}\n\nnav {\n    background-color: var(--wcs-nav-background-color);\n    display: flex;\n    z-index: 1055;\n    flex-direction: column;\n    width: var(--wcs-nav-width-desktop);\n    height: 100%;\n    overflow: auto;\n    scrollbar-width: thin;\n\n    div[role=\"list\"] {\n        list-style-type: none;\n        display: flex;\n        flex-direction: column;\n        flex-grow: 1;\n\n        @include for-tablet-landscape-down {\n            flex-direction: row;\n        }\n    }\n\n    @include for-tablet-landscape-down {\n        flex-direction: row;\n        width: 100%;\n        height: var(--wcs-nav-height-mobile);\n    }\n}\n\n::slotted(wcs-nav-item) {\n    @include for-tablet-landscape-down {\n        flex: 1;\n    }\n}\n\n// Place bottom items at the bottom\nslot[name=bottom],\n// Same for ff < 63\nwcs-nav-item:not([slot=bottom]) + wcs-nav-item[slot=bottom] {\n    @include for-desktop-up {\n        display: block;\n        margin-top: auto;\n    }\n}\n","import { Component, ComponentInterface, Element, h, Method } from '@stencil/core';\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst NAV_ARIA_INHERITED_ATTRS = ['title'];\n\n/**\n * The nav component is a container for navigation links to other pages of the website.\n * \n * @slot bottom Bottom part of the nav to put to nav-items at the end\n * \n * @cssprop --wcs-nav-background-color - Background color of the nav\n * @cssprop --wcs-nav-width-desktop - Width of the nav on desktop\n * @cssprop --wcs-nav-height-mobile - Height of the nav on mobile\n */\n@Component({\n    tag: 'wcs-nav',\n    styleUrl: 'nav.scss',\n    shadow: true\n})\nexport class Nav implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLWcsProgressBarElement;\n    private nativeNav!: HTMLElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, NAV_ARIA_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeNav, attr, value);\n    }\n    \n    render() {\n        return (\n            <nav role=\"navigation\"\n                 class=\"wcs-nav-container\"\n                 ref={(el) => (this.nativeNav = el)}\n                 {...this.inheritedAttributes}>\n                <div role=\"list\">\n                    <slot/>\n                    <slot name=\"bottom\"/>\n                </div>\n            </nav>\n        );\n    }\n}\n"],"mappings":"oGAAA,MAAMA,EAAS,20BACf,MAAAC,EAAeD,ECGf,MAAME,EAA2B,CAAC,S,MAgBrBC,EAAGC,EAAA,MAAAD,UAAAE,EALhB,WAAAC,G,oDAQYC,KAAAC,oBAA4C,E,CAEpD,iBAAAC,GACIF,KAAKC,oBAAmBE,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsBL,KAAKM,KAC3BC,EAAkBP,KAAKM,GAAIX,G,CAKtC,sBAAMa,CAAiBC,EAAyBC,GAC5CC,EAAqBX,KAAKY,UAAWH,EAAMC,E,CAG/C,MAAAG,GACI,OACIC,EAAA,MAAAX,OAAAC,OAAA,CAAAW,IAAA,2CAAKC,KAAK,aACLC,MAAM,oBACNC,IAAMZ,GAAQN,KAAKY,UAAYN,GAC3BN,KAAKC,qBACVa,EAAA,OAAAC,IAAA,2CAAKC,KAAK,QACNF,EAAA,QAAAC,IAAA,6CACAD,EAAA,QAAAC,IAAA,2CAAMI,KAAK,Y"}

package/bundle/wcs-progress-bar.d.ts

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

package/bundle/wcs-progress-bar.js

@@ -0,0 +1,2 @@
+import{P as o,d as s}from"./p-d23d7658.js";const t=o;const d=s;export{t as WcsProgressBar,d as defineCustomElement};
+//# sourceMappingURL=wcs-progress-bar.js.map

package/bundle/wcs-progress-bar.js.map

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

package/bundle/wcs-progress-radial.d.ts

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

package/bundle/wcs-progress-radial.js

@@ -0,0 +1,2 @@
+import{p as e,H as s,h as a}from"./p-2bef72c7.js";import{i as r,a as i,s as t}from"./p-2e9b9605.js";const c=":host{display:inline-flex;--wcs-progress-radial-rail-width:calc(var(--wcs-semantic-spacing-base) / 4);--wcs-progress-radial-rail-spacing:calc(var(--wcs-semantic-spacing-base) / 4);--wcs-progress-radial-rail-color:var(--wcs-semantic-color-background-surface-tertiary);--wcs-progress-radial-value-background-color:var(--wcs-semantic-color-background-surface-brand);--wcs-progress-radial-label-color:var(--wcs-semantic-color-text-primary);--wcs-progress-radial-label-font-size:calc(1.5 * var(--wcs-semantic-font-size-m));--wcs-progress-radial-label-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-progress-radial-label-percentage-font-size:calc(var(--wcs-semantic-font-size-m) * 0.7);--wcs-progress-radial-animation-duration:var(--wcs-semantic-motion-duration-feedback-slower)}.progress-circle{position:relative;display:inline-block}.circle-rail{position:absolute;z-index:0;stroke:var(--wcs-progress-radial-rail-color);stroke-dasharray:var(--wcs-progress-radial-rail-width) var(--wcs-progress-radial-rail-spacing);fill:none}.progress-circle-figure{position:absolute;top:0;z-index:1;transform:rotate(-90deg);transition:stroke-dashoffset var(--wcs-progress-radial-animation-duration) ease-out}.progress-circle-label{top:0;left:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:var(--wcs-progress-radial-label-font-size);font-weight:var(--wcs-progress-radial-label-font-weight);color:var(--wcs-progress-radial-label-color)}.progress-circle-label sup{font-size:var(--wcs-progress-radial-label-percentage-font-size);top:-0.85em;position:relative;line-height:0;vertical-align:baseline}.progress-circle-value{stroke:var(--wcs-progress-radial-value-background-color);stroke-linecap:round}.progress-circle-value,.progress-circle-meter{fill:none}";const o=c;const l=["title"];const n=e(class e extends s{constructor(){super();this.__registerHost();this.__attachShadow();this.inheritedAttributes={};this.backgroundImageSize=120;this.size=120;this.showLabel=false;this.value=0}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},r(this.el)),i(this.el,l))}async setAriaAttribute(e,s){t(this.nativeProgress,e,s)}render(){const{backgroundImageSize:e,halfSize:s}={backgroundImageSize:this.backgroundImageSize,halfSize:this.backgroundImageSize/2};return a("div",Object.assign({key:"7da6ed9d04399e5ff473d112d6a111696c9b14bc",class:"progress-circle","data-component":"radial-progress",style:this.getSize(),role:"progressbar","aria-valuemin":"0","aria-valuemax":"100","aria-valuenow":this.value,"aria-valuetext":this.value+"%",ref:e=>this.nativeProgress=e},this.inheritedAttributes),a("svg",{key:"226ed7d14005563adc1e55e7ba28c3bb49ed1d95","data-role":"figure",class:"circle-rail",viewBox:`0 0 ${e} ${e}`},a("circle",{key:"a50b905a8c36416ce3ede895affbda05a30b1c1b",cx:s,cy:s,r:54,"stroke-width":12})),a("svg",{key:"7d58cf8a614acdff769c769ecca919b86792cd0d",class:"progress-circle-figure","data-role":"figure",viewBox:`0 0 ${e} ${e}`,style:this.getSvgStyle()},a("circle",{key:"11f22fd6a506b226a0e8a450163ac5c3a0fcbe44",class:"progress-circle-value",cx:s,cy:s,r:"54","stroke-width":"12"})),this.showLabel&&a("div",{key:"a87680ab5a59f4e34072dde8a2f7d15ef4b671e9",class:"progress-circle-label","data-role":"label"},a("span",{key:"fe65c818b10f58562d65f7f330a21a794f8b876f"},a("span",{key:"337459684703272ec7817fe64226e2df10341e9c","data-role":"labelvalue"},this.value),a("sup",{key:"45f173f53dcfa8e85ea0986f28e8848f75d24434"},"%"))))}getSvgStyle(){return{"stroke-dasharray":"339.292","stroke-dashoffset":`${339.292-this.value/100*339.292}`}}getSize(){return{width:`${this.size}px`,height:`${this.size}px`}}get el(){return this}static get style(){return o}},[1,"wcs-progress-radial",{size:[2],showLabel:[516,"show-label"],value:[2],setAriaAttribute:[64]}]);function d(){if(typeof customElements==="undefined"){return}const e=["wcs-progress-radial"];e.forEach((e=>{switch(e){case"wcs-progress-radial":if(!customElements.get(e)){customElements.define(e,n)}break}}))}const g=n;const f=d;export{g as WcsProgressRadial,f as defineCustomElement};
+//# sourceMappingURL=wcs-progress-radial.js.map

package/bundle/wcs-progress-radial.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["progressRadialCss","WcsProgressRadialStyle0","PROGRESS_RADIAL_ARIA_INHERITED_ATTRS","ProgressRadial","proxyCustomElement","H","this","inheritedAttributes","backgroundImageSize","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","setAriaAttribute","attr","value","setOrRemoveAttribute","nativeProgress","render","halfSize","h","key","class","style","getSize","role","ref","viewBox","cx","cy","r","getSvgStyle","showLabel","width","height"],"sources":["src/components/progress-radial/progress-radial.scss?tag=wcs-progress-radial&encapsulation=shadow","src/components/progress-radial/progress-radial.tsx"],"sourcesContent":[":host {\n    display: inline-flex;\n\n    --wcs-progress-radial-rail-width: calc(var(--wcs-semantic-spacing-base) / 4);\n    --wcs-progress-radial-rail-spacing: calc(var(--wcs-semantic-spacing-base) / 4);\n    --wcs-progress-radial-rail-color: var(--wcs-semantic-color-background-surface-tertiary);\n\n    --wcs-progress-radial-value-background-color: var(--wcs-semantic-color-background-surface-brand);\n\n    --wcs-progress-radial-label-color: var(--wcs-semantic-color-text-primary);\n    --wcs-progress-radial-label-font-size: calc(1.5 * var(--wcs-semantic-font-size-m));\n    --wcs-progress-radial-label-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-progress-radial-label-percentage-font-size:  calc(var(--wcs-semantic-font-size-m) * 0.7);\n    --wcs-progress-radial-animation-duration: var(--wcs-semantic-motion-duration-feedback-slower);\n}\n\n.progress-circle {\n    position: relative;\n    display: inline-block;\n}\n\n.circle-rail {\n    position: absolute;\n    z-index: 0;\n    stroke: var(--wcs-progress-radial-rail-color);\n    stroke-dasharray: var(--wcs-progress-radial-rail-width) var(--wcs-progress-radial-rail-spacing);\n    fill: none;\n}\n\n.progress-circle-figure {\n    position: absolute;\n    top: 0;\n    z-index: 1;\n    transform: rotate(-90deg);\n    transition: stroke-dashoffset var(--wcs-progress-radial-animation-duration) ease-out;\n}\n\n.progress-circle-label {\n    top: 0;\n    left: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    font-size: var(--wcs-progress-radial-label-font-size);\n    font-weight: var(--wcs-progress-radial-label-font-weight);\n\n    color: var(--wcs-progress-radial-label-color);\n\n    sup {\n        font-size: var(--wcs-progress-radial-label-percentage-font-size);\n        top: -.85em;\n        position: relative;\n        line-height: 0;\n        vertical-align: baseline;\n    }\n}\n\n.progress-circle-value {\n    stroke: var(--wcs-progress-radial-value-background-color);\n    stroke-linecap: round;\n}\n\n.progress-circle-value,\n.progress-circle-meter {\n    fill: none;\n}\n","import { Component, Prop, ComponentInterface, h, Element, Method } from '@stencil/core';\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst PROGRESS_RADIAL_ARIA_INHERITED_ATTRS = ['title'];\n\n/**\n * The progress-radial component is a circular progress bar that indicates the current completion of a task. \n *\n * ## Accessibility guidelines 💡\n * > Aria attributes and how to display the progress-radial depend on the use case in your application :\n * >\n * > - **Case 1 : decorative**\n * > If the progress-radial is used as a decoration _(if removed, the user doesn't lose any relevant information)_ or in the\n * > context of another component _(such as progress-radial in a card)_ => **you don't need to show the label nor add an aria-label**.\n * >\n * > - **Case 2 : informative**\n * > If the progress-radial is used to convey important information _(e.g., form completion status, dashboard KPI)_, you need to :\n * >   - **Provide a visible label** that describes the purpose of the progress-radial.\n * >   - **Set the `showLabel` property to `true`** to show the percentage inside the progress-radial.\n * >   - Optionally, use aria-label to provide an accessible name if a visible label is not present.\n *\n * \n * @cssprop --wcs-progress-radial-rail-width - The width of the line that represents the rail of the progress radial\n * @cssprop --wcs-progress-radial-rail-spacing - The space between each rail of the progress radial\n * @cssprop --wcs-progress-radial-rail-color - The color of the rail of the progress radial\n * @cssprop --wcs-progress-radial-value-background-color - The background color of the bar on top of the rail \n * @cssprop --wcs-progress-radial-label-color - The color of the label inside the progress radial\n * @cssprop --wcs-progress-radial-label-font-size - The font size of the label inside the progress radial\n * @cssprop --wcs-progress-radial-label-font-weight - The font weight of the label inside the progress radial\n * @cssprop --wcs-progress-radial-label-percentage-font-size - The font size of the percentage inside the progress radial\n * @cssprop --wcs-progress-radial-animation-duration - The duration of the animation of the progress radial\n */\n@Component({\n    tag: 'wcs-progress-radial',\n    styleUrl: 'progress-radial.scss',\n    shadow: true\n})\nexport class ProgressRadial implements ComponentInterface, MutableAriaAttribute {\n    \n    @Element() private el!: HTMLWcsProgressRadialElement;\n    private nativeProgress!: HTMLDivElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    /** The initial background image size (120x120) as specified in the background-image css property of .progress-circle */\n    private backgroundImageSize: number = 120;\n    \n    /** The size of the progress radial (in px) */\n    @Prop() size: number = 120;\n    /** Whether the component should display the % label inside */\n    @Prop({ reflect: true }) showLabel: boolean = false;\n    /** The value of the progress radial. Prefer values between 0 and 100. */\n    @Prop() value: number = 0;\n    \n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, PROGRESS_RADIAL_ARIA_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeProgress, attr, value);\n    }\n\n    render() {\n        const { backgroundImageSize, halfSize } = { backgroundImageSize: this.backgroundImageSize, halfSize: this.backgroundImageSize / 2 };\n        return (\n            <div class=\"progress-circle\"\n                 data-component=\"radial-progress\"\n                 style={this.getSize()}\n                 role=\"progressbar\"\n                 aria-valuemin=\"0\"\n                 aria-valuemax=\"100\"\n                 aria-valuenow={this.value}\n                 aria-valuetext={this.value + '%'}\n                 ref={(el) => (this.nativeProgress = el)}\n                 {...this.inheritedAttributes}>\n                <svg data-role=\"figure\" class=\"circle-rail\"\n                     viewBox={`0 0 ${backgroundImageSize} ${backgroundImageSize}`}>\n                    <circle cx={halfSize} cy={halfSize} r={54} stroke-width={12}/>\n                </svg>\n                <svg class=\"progress-circle-figure\"\n                    data-role=\"figure\"\n                    viewBox={`0 0 ${backgroundImageSize} ${backgroundImageSize}`}\n                    style={this.getSvgStyle()}>\n                        <circle class=\"progress-circle-value\" cx={halfSize} cy={halfSize} r=\"54\" stroke-width=\"12\" />\n                </svg>\n                {this.showLabel &&\n                    <div class=\"progress-circle-label\" data-role=\"label\">\n                        <span>\n                            <span data-role=\"labelvalue\">{this.value}</span><sup>%</sup>\n                        </span>\n                    </div>\n                }\n            </div>\n        );\n    }\n\n    getSvgStyle() {\n        return {\n            'stroke-dasharray': '339.292',\n            'stroke-dashoffset': `${339.292 - (this.value / 100) * 339.292}`,\n        };\n    }\n    \n    getSize() {\n        return {\n            'width': `${(this.size)}px`,\n            'height': `${(this.size)}px`,\n        };\n    }\n}\n"],"mappings":"oGAAA,MAAMA,EAAoB,yvDAC1B,MAAAC,EAAeD,ECGf,MAAME,EAAuC,CAAC,S,MAkCjCC,EAAcC,EAAA,MAAAD,UAAAE,E,kEAIfC,KAAAC,oBAA4C,GAG5CD,KAAAE,oBAA8B,I,UAGf,I,eAEuB,M,WAEtB,C,CAExB,iBAAAC,GACIH,KAAKC,oBAAmBG,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsBN,KAAKO,KAC3BC,EAAkBR,KAAKO,GAAIX,G,CAKtC,sBAAMa,CAAiBC,EAAyBC,GAC5CC,EAAqBZ,KAAKa,eAAgBH,EAAMC,E,CAGpD,MAAAG,GACI,MAAMZ,oBAAEA,EAAmBa,SAAEA,GAAa,CAAEb,oBAAqBF,KAAKE,oBAAqBa,SAAUf,KAAKE,oBAAsB,GAChI,OACIc,EAAA,MAAAZ,OAAAC,OAAA,CAAAY,IAAA,2CAAKC,MAAM,kBAAiB,iBACR,kBACfC,MAAOnB,KAAKoB,UACZC,KAAK,cAAa,gBACJ,IAAG,gBACH,MAAK,gBACJrB,KAAKW,MAAK,iBACTX,KAAKW,MAAQ,IAC7BW,IAAMf,GAAQP,KAAKa,eAAiBN,GAChCP,KAAKC,qBACVe,EAAA,OAAAC,IAAA,uDAAe,SAASC,MAAM,cACzBK,QAAS,OAAOrB,KAAuBA,KACxCc,EAAA,UAAAC,IAAA,2CAAQO,GAAIT,EAAUU,GAAIV,EAAUW,EAAG,GAAE,eAAgB,MAE7DV,EAAA,OAAAC,IAAA,2CAAKC,MAAM,yBAAwB,YACrB,SACVK,QAAS,OAAOrB,KAAuBA,IACvCiB,MAAOnB,KAAK2B,eACRX,EAAA,UAAAC,IAAA,2CAAQC,MAAM,wBAAwBM,GAAIT,EAAUU,GAAIV,EAAUW,EAAE,KAAI,eAAc,QAE7F1B,KAAK4B,WACFZ,EAAA,OAAAC,IAAA,2CAAKC,MAAM,wBAAuB,YAAW,SACzCF,EAAA,QAAAC,IAAA,4CACID,EAAA,QAAAC,IAAA,uDAAgB,cAAcjB,KAAKW,OAAaK,EAAA,OAAAC,IAAA,mD,CAQxE,WAAAU,GACI,MAAO,CACH,mBAAoB,UACpB,oBAAqB,GAAG,QAAW3B,KAAKW,MAAQ,IAAO,U,CAI/D,OAAAS,GACI,MAAO,CACHS,MAAS,GAAI7B,KAAS,SACtB8B,OAAU,GAAI9B,KAAS,S"}