wcs-core 7.5.1 → 7.7.0

package/dist/wcs/p-52d77e1f.js.map

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

package/dist/wcs/p-5607246c.entry.js

@@ -1,2 +0,0 @@
-import{r as a,h as s,H as c}from"./p-32e583ea.js";const t=":host{--wcs-card-body-padding:var(--wcs-semantic-spacing-base-300);--wcs-card-body-gap:var(--wcs-semantic-spacing-base);flex:1 1 auto;padding:var(--wcs-card-body-padding)}:host(.horizontal),:host(.vertical){display:flex;flex-direction:column;gap:var(--wcs-card-body-gap)}::slotted(p){margin:0}";const o=t;const r=class{constructor(s){a(this,s);this.orientation=null}async setOrientation(a){this.orientation=a}render(){return s(c,{key:"27547ebfbab0737a4947baf9ff4086d37b494155",class:this.orientation},s("slot",{key:"f9444717438f9981b479b39575c03297b04a5847"}))}};r.style=o;export{r as wcs_card_body};
-//# sourceMappingURL=p-5607246c.entry.js.map

package/dist/wcs/p-580b3142.entry.js

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

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

@@ -1,2 +0,0 @@
-import{r as t,c as s,h as i,H as r,g as e}from"./p-32e583ea.js";import{r as o,i as n,a,s as c,t as d}from"./p-52d77e1f.js";const l=":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 u=l;const h=["tabindex","title"];const p=class{constructor(i){t(this,i);this.wcsInput=s(this,"wcsInput",7);this.wcsChange=s(this,"wcsChange",7);this.wcsBlur=s(this,"wcsBlur",7);this.wcsFocus=s(this,"wcsFocus",7);this.inputId=`wcs-input-${w++}`;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=o(this.wcsInput,this.debounce)}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},n(this.el)),a(this.el,h))}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 e=d(this.el);if(e){e.id=s}return i(r,{key:"20899914842d410ef72a8f81906e1e2be6e423cf","aria-disabled":this.disabled?"true":null,"data-has-prefix":!!this.prefixLabel,"data-has-suffix":!!this.suffixLabel},this.prefixLabel?i("span",{class:"prefix",part:"prefix"},this.prefixLabel):null,this.icon?i("wcs-mat-icon",{icon:this.icon,size:"m"}):null,i("input",Object.assign({key:"059fb987112d535b3f1cf51ea9bbaa01f36667c5",class:"native-input",ref:t=>this.nativeInput=t,"aria-labelledby":e?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"?i("button",{title:this.passwordReveal?this.hidePasswordButtonAriaLabel:this.showPasswordButtonAriaLabel,class:"toggle_password",onClick:()=>this.passwordRevealIconClick()},i("wcs-mat-icon",{icon:this.iconPassword,size:"m"})):null,this.suffixLabel?i("span",{class:"suffix",part:"suffix"},this.suffixLabel):null)}static get delegatesFocus(){return true}get el(){return e(this)}static get watchers(){return{debounce:["debounceChanged"],passwordReveal:["onPasswordRevealChange"]}}};let w=0;p.style=u;export{p as wcs_input};
-//# sourceMappingURL=p-5da0534f.entry.js.map

package/dist/wcs/p-5da0534f.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["inputCss","WcsInputStyle0","INPUT_INHERITED_ATTRS","Input","this","inputId","inputIds","inheritedAttributes","iconPassword","onInput","ev","input","target","value","wcsInput","emit","onChange","_","wcsChange","nativeInput","onBlur","fireFocusEvents","wcsBlur","onFocus","wcsFocus","debounceChanged","debounceEvent","debounce","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","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":"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"}

package/dist/wcs/p-637ec45a.entry.js.map

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

package/dist/wcs/p-6aededc6.entry.js

@@ -1,2 +0,0 @@
-import{r as c,h as e,H as a}from"./p-32e583ea.js";const s=":host{--wcs-card-footer-gap:var(--wcs-semantic-spacing-base);display:flex;flex-direction:row;align-items:center;gap:var(--wcs-card-footer-gap)}";const r=s;const o=class{constructor(e){c(this,e)}render(){return e(a,{key:"8b600e63a3178bbf9c3d577053b927ff6ea9a48f"},e("slot",{key:"1ce0728f66cd296c44dcc4d85c9e9d9dcbae853a"}))}};o.style=r;export{o as wcs_card_footer};
-//# sourceMappingURL=p-6aededc6.entry.js.map

package/dist/wcs/p-7de847e0.entry.js

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

package/dist/wcs/p-8152d360.entry.js

@@ -1,2 +0,0 @@
-import{r,c as e,h as t,H as a,g as s}from"./p-32e583ea.js";const c="@keyframes progress-bar-slide{0%{width:0}100%{width:100%}}:host{--wcs-alert-background-color:var(--wcs-semantic-color-background-surface-accent-lighter);--wcs-alert-icon-background-color:var(--wcs-semantic-color-background-surface-brand-default);--wcs-alert-title-color:var(--wcs-semantic-color-text-primary);--wcs-alert-subtitle-color:var(--wcs-semantic-color-text-secondary);--wcs-alert-dismiss-button-color:var(--wcs-semantic-color-foreground-inverse);--wcs-alert-title-font-weight:var(--wcs-semantic-font-weight-heavy);--wcs-alert-subtitle-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-alert-title-font-size:var(--wcs-semantic-font-size-base);--wcs-alert-subtitle-font-size:var(--wcs-semantic-font-size-caption-2);--wcs-alert-border-width:var(--wcs-semantic-border-width-default);--wcs-alert-border-color:var(--wcs-semantic-color-border-primary);--wcs-alert-border-radius:var(--wcs-semantic-border-radius-base);--wcs-alert-padding:var(--wcs-semantic-spacing-base-150);--wcs-alert-gap:var(--wcs-semantic-spacing-base-150);--wcs-alert-min-width:100%;--wcs-alert-progress-bar-height:0.25rem;--wcs-alert-progress-bar-background-color:var(--wcs-alert-icon-background-color);--wcs-alert-internal-progress-bar-animation-duration:5s;box-sizing:border-box;background-color:var(--wcs-alert-background-color);border-radius:var(--wcs-alert-border-radius);padding:var(--wcs-alert-padding);width:100%;min-width:var(--wcs-alert-min-width);position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--wcs-alert-gap);border:solid var(--wcs-alert-border-width) var(--wcs-alert-border-color);overflow:hidden}:host .content{display:flex;flex-direction:column}:host .announcement-icon{color:var(--wcs-alert-icon-background-color)}:host ::slotted([slot=title]){color:var(--wcs-alert-title-color);font-size:var(--wcs-alert-title-font-size);font-weight:var(--wcs-alert-title-font-weight)}:host ::slotted([slot=subtitle]){font-weight:var(--wcs-alert-subtitle-font-weight);color:var(--wcs-alert-subtitle-color);font-size:var(--wcs-alert-subtitle-font-size)}:host .progress-bar{bottom:0;left:0;width:100%;height:var(--wcs-alert-progress-bar-height);position:absolute}:host .progress-bar-track{background-color:var(--wcs-alert-progress-bar-background-color);height:100%;animation:progress-bar-slide var(--wcs-alert-internal-progress-bar-animation-duration) linear;border-bottom-left-radius:var(--wcs-alert-border-radius);border-bottom-right-radius:var(--wcs-alert-border-radius);border-top-right-radius:var(--wcs-alert-border-radius)}:host([intent=success]){--wcs-alert-border-color:var(--wcs-semantic-color-border-success);--wcs-alert-background-color:var(--wcs-semantic-color-background-surface-success-lighter);--wcs-alert-icon-background-color:var(--wcs-semantic-color-background-surface-success-default)}:host([intent=information]){--wcs-alert-border-color:var(--wcs-semantic-color-border-information);--wcs-alert-background-color:var(--wcs-semantic-color-background-surface-information-lighter);--wcs-alert-icon-background-color:var(--wcs-semantic-color-background-surface-information-default)}:host([intent=warning]){--wcs-alert-border-color:var(--wcs-semantic-color-border-warning);--wcs-alert-background-color:var(--wcs-semantic-color-background-surface-warning-lighter);--wcs-alert-icon-background-color:var(--wcs-semantic-color-background-surface-warning-default)}:host([intent=error]){--wcs-alert-border-color:var(--wcs-semantic-color-border-critical);--wcs-alert-background-color:var(--wcs-semantic-color-background-surface-critical-lightest);--wcs-alert-icon-background-color:var(--wcs-semantic-color-background-surface-critical-default)}:host>*{box-sizing:border-box}.icon-content-container{display:flex;gap:var(--wcs-alert-gap);align-items:center}.close-button wcs-mat-icon{color:var(--wcs-alert-dismiss-button-color)}.hidden{display:none}";const o=c;const i=class{constructor(t){r(this,t);this.wcsAlertDismiss=e(this,"wcsAlertDismiss",7);this.isTimedOut=false;this.isMouseHover=false;this.timeoutId=undefined;this.show=true;this.intent="success";this.timeout=5e3;this.showProgressBar=false}mouseOverHandler(){this.mouseHover(true)}mouseOutHandler(){this.mouseHover(false)}mouseHover(r){this.isMouseHover=r;if(this.isTimedOut&&!this.isMouseHover){this.close()}}async componentWillLoad(){await this.showAlertAndRunTimeout()}async componentDidLoad(){var r;(r=this.annoucementIconHtmlElement)===null||r===void 0?void 0:r.setAriaAttribute("aria-hidden","false");if(this.showProgressBar){this.el.style.setProperty("--wcs-alert-internal-progress-bar-animation-duration",this.timeout/1e3+"s")}else{this.el.style.setProperty("--wcs-alert-internal-progress-bar-animation-duration","0s")}}async showAlertAndRunTimeout(){if(this.timeout===0)return;this.show=true;this.timeoutId=setTimeout((()=>{if(!this.isMouseHover){this.close()}this.isTimedOut=true}),this.timeout)}onCloseButtonClick(r){this.close()}close(){this.show=false;this.wcsAlertDismiss.emit()}getMaterialIcon(){switch(this.intent){case"success":return"check_circle";case"information":return"info";case"error":return"error";case"warning":return"warning"}}getAriaLabel(){switch(this.intent){case"success":return"Succès";case"information":return"Information";case"error":return"Erreur";case"warning":return"Attention"}}disconnectedCallback(){clearTimeout(this.timeoutId)}render(){return t(a,{key:"82c9f5879eae7adef41c921ef34b2b9d891c0d6b"},t("div",{key:"b46424dfb6b620b62767b6bb8048827f83d116a7",class:"icon-content-container"},t("wcs-mat-icon",{key:"ff3a0bc91a73e275936bbe8f77c904f397296551",class:"announcement-icon",ref:r=>this.annoucementIconHtmlElement=r,icon:this.getMaterialIcon(),"aria-label":this.getAriaLabel(),role:"img","aria-hidden":false}),t("div",{key:"ea866940416ddaf5eaf73cec83f30c71b01c41d8",class:"content"},t("slot",{key:"d14c321ebdb78b646bb4fc19e613dbd2cc61ed31",name:"title"}),t("slot",{key:"569d6556ea823f82e1d6164ac20361e27c85b592",name:"subtitle"}))),t("wcs-button",{key:"f13afc31116b7b6fe04e0186128d0288725ace98",shape:"round",size:"s",mode:"clear",class:"close-button wcs-dark","aria-label":"Fermer cette notification",onClick:r=>this.onCloseButtonClick(r)},t("wcs-mat-icon",{key:"02557c896159ec1a7fdab853a07f7c79c17dd5d7",icon:"close"})),t("div",{key:"9e90e95009da575ca693e5ba4e92b3916ad4ee6f",class:"progress-bar"+(!this.showProgressBar?" hidden":"")},t("div",{key:"c8858551592bb0b1622e2ee19c67a662f31ce068",class:"progress-bar-track"})))}get el(){return s(this)}};i.style=o;export{i as wcs_alert};
-//# sourceMappingURL=p-8152d360.entry.js.map

package/dist/wcs/p-8152d360.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["alertCss","WcsAlertStyle0","Alert","this","isTimedOut","isMouseHover","timeoutId","undefined","mouseOverHandler","mouseHover","mouseOutHandler","hover","close","componentWillLoad","showAlertAndRunTimeout","componentDidLoad","_a","annoucementIconHtmlElement","setAriaAttribute","showProgressBar","el","style","setProperty","timeout","show","setTimeout","onCloseButtonClick","_","wcsAlertDismiss","emit","getMaterialIcon","intent","getAriaLabel","disconnectedCallback","clearTimeout","render","h","Host","key","class","ref","icon","role","name","shape","size","mode","onClick","$event"],"sources":["src/components/alert/alert.scss?tag=wcs-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"sourcesContent":["@import './alert-keyframes.scss';\n\n:host {\n    --wcs-alert-background-color: var(--wcs-semantic-color-background-surface-accent-lighter);\n    --wcs-alert-icon-background-color: var(--wcs-semantic-color-background-surface-brand-default);\n\n    --wcs-alert-title-color: var(--wcs-semantic-color-text-primary);\n    --wcs-alert-subtitle-color: var(--wcs-semantic-color-text-secondary);\n    --wcs-alert-dismiss-button-color: var(--wcs-semantic-color-foreground-inverse);\n\n    --wcs-alert-title-font-weight: var(--wcs-semantic-font-weight-heavy);\n    --wcs-alert-subtitle-font-weight: var(--wcs-semantic-font-weight-roman);\n\n    --wcs-alert-title-font-size: var(--wcs-semantic-font-size-base);\n    --wcs-alert-subtitle-font-size: var(--wcs-semantic-font-size-caption-2);\n\n    --wcs-alert-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-alert-border-color: var(--wcs-semantic-color-border-primary);\n    --wcs-alert-border-radius: var(--wcs-semantic-border-radius-base);\n\n    --wcs-alert-padding: var(--wcs-semantic-spacing-base-150);\n    --wcs-alert-gap: var(--wcs-semantic-spacing-base-150);\n    --wcs-alert-min-width: 100%;\n\n    --wcs-alert-progress-bar-height: 0.25rem;\n    --wcs-alert-progress-bar-background-color: var(--wcs-alert-icon-background-color);\n\n    --wcs-alert-internal-progress-bar-animation-duration: 5s;\n\n    box-sizing: border-box;\n\n    background-color: var(--wcs-alert-background-color);\n    border-radius: var(--wcs-alert-border-radius);\n    padding: var(--wcs-alert-padding);\n    width: 100%;\n    min-width: var(--wcs-alert-min-width);\n\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--wcs-alert-gap);\n    border: solid var(--wcs-alert-border-width) var(--wcs-alert-border-color);\n\n    overflow: hidden; // to avoid overflow of progress bar especially with voyageurs theme\n\n    .content {\n        display: flex;\n        flex-direction: column;\n    }\n\n    .announcement-icon {\n        color: var(--wcs-alert-icon-background-color);\n    }\n\n    ::slotted([slot=title]) {\n        color: var(--wcs-alert-title-color);\n        font-size: var(--wcs-alert-title-font-size);\n        font-weight: var(--wcs-alert-title-font-weight);\n    }\n\n    ::slotted([slot=subtitle]) {\n        font-weight: var(--wcs-alert-subtitle-font-weight);\n        color: var(--wcs-alert-subtitle-color);\n        font-size: var(--wcs-alert-subtitle-font-size);\n    }\n\n    .progress-bar {\n        bottom: 0;\n        left: 0;\n        width: 100%;\n        height: var(--wcs-alert-progress-bar-height);\n        position: absolute;\n    }\n\n    .progress-bar-track {\n        background-color: var(--wcs-alert-progress-bar-background-color);\n        height: 100%;\n        animation: progress-bar-slide var(--wcs-alert-internal-progress-bar-animation-duration) linear;\n        border-bottom-left-radius: var(--wcs-alert-border-radius);\n        border-bottom-right-radius: var(--wcs-alert-border-radius);\n        border-top-right-radius: var(--wcs-alert-border-radius); // to avoid a visual glitch, it's bizarre to have only radius on the bottom\n    }\n}\n\n:host([intent=success]) {\n    --wcs-alert-border-color: var(--wcs-semantic-color-border-success);\n    --wcs-alert-background-color: var(--wcs-semantic-color-background-surface-success-lighter);\n    --wcs-alert-icon-background-color: var(--wcs-semantic-color-background-surface-success-default);\n}\n\n:host([intent=information]) {\n    --wcs-alert-border-color: var(--wcs-semantic-color-border-information);\n    --wcs-alert-background-color: var(--wcs-semantic-color-background-surface-information-lighter);\n    --wcs-alert-icon-background-color: var(--wcs-semantic-color-background-surface-information-default);\n}\n\n:host([intent=warning]) {\n    --wcs-alert-border-color: var(--wcs-semantic-color-border-warning);\n    --wcs-alert-background-color: var(--wcs-semantic-color-background-surface-warning-lighter);\n    --wcs-alert-icon-background-color: var(--wcs-semantic-color-background-surface-warning-default);\n}\n\n:host([intent=error]) {\n    --wcs-alert-border-color: var(--wcs-semantic-color-border-critical);\n    --wcs-alert-background-color: var(--wcs-semantic-color-background-surface-critical-lightest);\n    --wcs-alert-icon-background-color: var(--wcs-semantic-color-background-surface-critical-default);\n}\n\n:host > * {\n    box-sizing: border-box;\n}\n\n.icon-content-container {\n    display: flex;\n    gap: var(--wcs-alert-gap);\n    align-items: center;\n}\n\n.close-button {\n    wcs-mat-icon {\n        color: var(--wcs-alert-dismiss-button-color);\n    }\n}\n\n.hidden {\n    display: none;\n}\n","import { Component, Event, EventEmitter, h, Host, Prop, Element, Listen } from '@stencil/core';\nimport { WcsAlertIntent } from \"./alert-interface\";\n\n/**\n * Alerts are used to communicate a state or an action that has been performed.\n * It has to be used conjunction with the `wcs-alert-drawer` component, or you can use it independently by taking care of \n * the alert visibility\n * \n * @cssprop --wcs-alert-background-color - Background color of the alert\n * @cssprop --wcs-alert-icon-background-color - Background color of the icon\n * @cssprop --wcs-alert-title-color - Color of the title\n * @cssprop --wcs-alert-subtitle-color - Color of the subtitle\n * @cssprop --wcs-alert-dismiss-button-color - Color of the dismiss button\n * @cssprop --wcs-alert-title-font-weight - Font weight of the title\n * @cssprop --wcs-alert-subtitle-font-weight - Font weight of the subtitle\n * @cssprop --wcs-alert-title-font-size - Font size of the title\n * @cssprop --wcs-alert-subtitle-font-size - Font size of the subtitle\n * @cssprop --wcs-alert-border-width - Border width of the alert\n * @cssprop --wcs-alert-border-color - Border color of the alert\n * @cssprop --wcs-alert-border-radius - Border radius of the alert\n * @cssprop --wcs-alert-padding - Padding of the alert\n * @cssprop --wcs-alert-gap - Gap between each element of the alert, icon content and close button\n * @cssprop --wcs-alert-min-width - Minimum width of the alert, default to 100% and it is set by alert-drawer component\n * @cssprop --wcs-alert-progress-bar-height - Height of the progress bar if `showProgressBar` is set to true\n * @cssprop --wcs-alert-progress-bar-background-color - Background color of the progress bar\n */\n@Component({\n    tag: 'wcs-alert',\n    styleUrl: 'alert.scss',\n    shadow: true,\n})\nexport class Alert {\n    @Element() private el: HTMLElement;\n\n    /**\n     * Controls the visibility state of the alert.\n     * This property is exposed to allow control of the alert's display state and animation timing:\n     * - Used by wcs-alert-drawer to coordinate exit animations when the alert is dismissed\n     * - Can be used directly for custom implementations (though using wcs-alert-drawer is recommended)\n     * - When set to false, it triggers the exit animation if implemented\n     * \n     * Note: While direct usage is possible for custom implementations, it's recommended to use\n     * wcs-alert-drawer for consistent alert management and animations.\n     */\n    @Prop({ mutable: true, reflect: true }) show: boolean = true;\n\n    @Prop({ reflect: true })\n    intent: WcsAlertIntent = 'success';\n\n    /**\n     * Event emitted when the alert is dismissed\n     */\n    @Event() wcsAlertDismiss: EventEmitter<void>;\n\n    /**\n     * Time duration of the alert visibility\n     * \n     * 5000ms by default\n     * If 0, the alert will not emit `wcsAlertDismiss` event automatically\n     */\n    @Prop() timeout = 5000;\n    @Prop() showProgressBar: boolean = false;\n\n    /** Only active if timeout > 0, becomes true when the alert reaches its maximum display time */\n    private isTimedOut: boolean = false;\n\n    /** Indicates if the mouse cursor is hovering over the alert */\n    private isMouseHover: boolean = false;\n    /**\n     * ID of the setTimeout used to manage the alert's lifetime\n     * https://developer.mozilla.org/en-US/docs/Web/API/Window/clearTimeout#notes\n     */\n    private timeoutId = undefined;\n\n    /** Reference to the alert's information icon for managing its aria-label */\n    private annoucementIconHtmlElement!: HTMLWcsMatIconElement;\n\n\n    @Listen('mouseover')\n    mouseOverHandler() {\n        this.mouseHover(true)\n    }\n\n    @Listen('mouseout')\n    mouseOutHandler() {\n        this.mouseHover(false);\n    }\n\n    /**\n     * Handles the mouse hover state of the alert\n     * @param hover - true if the mouse is hovering over the alert, false otherwise\n     */\n    private mouseHover(hover: boolean) {\n        this.isMouseHover = hover;\n\n        // If the timeout has passed (i.e. the user had the mouse on the component when it expired), we close the alert.\n        if (this.isTimedOut && !this.isMouseHover) {\n            this.close();\n        }\n    }\n\n    async componentWillLoad() {\n        await this.showAlertAndRunTimeout();\n    }\n\n    async componentDidLoad() {\n        /*\n        Because icon serves also to announce the state of the alert based on the type. We set aria-label on the icon based\n        on the type\n         */\n        this.annoucementIconHtmlElement?.setAriaAttribute('aria-hidden', 'false');\n\n        if (this.showProgressBar) {\n            this.el.style.setProperty('--wcs-alert-internal-progress-bar-animation-duration', this.timeout / 1000 + 's');\n        } else {\n            this.el.style.setProperty('--wcs-alert-internal-progress-bar-animation-duration', '0s');\n        }\n    }\n\n    async showAlertAndRunTimeout() {\n        if (this.timeout === 0) return;\n        this.show = true;\n        this.timeoutId = setTimeout(() => {\n            // If the user has the mouse over the alert, we only indicate that the timemout has expired, and the method that handles the mousehover event will close it\n            if (!this.isMouseHover) {\n                this.close();\n            }\n            this.isTimedOut = true;\n        }, this.timeout);\n    }\n\n    private onCloseButtonClick(_: MouseEvent) {\n        this.close();\n    }\n\n    private close() {\n        this.show = false;\n        this.wcsAlertDismiss.emit();\n    }\n\n    private getMaterialIcon() {\n        switch (this.intent) {\n            case \"success\":\n                return 'check_circle'\n            case \"information\":\n                return 'info'\n            case \"error\":\n                return 'error'\n            case \"warning\":\n                return 'warning'\n        }\n    }\n\n    private getAriaLabel() {\n        switch (this.intent) {\n            case \"success\":\n                return 'Succès';\n            case \"information\":\n                return 'Information';\n            case \"error\":\n                return 'Erreur';\n            case \"warning\":\n                return 'Attention';\n        }\n    }\n\n    disconnectedCallback() {\n        /*\n         https://developer.mozilla.org/en-US/docs/Web/API/Window/clearTimeout#notes \n         (Passing an invalid ID to clearTimeout() silently does nothing; no exception is thrown.)\n         */\n        clearTimeout(this.timeoutId);\n    }\n\n    render() {\n        return (\n            <Host>\n                <div class=\"icon-content-container\">\n                    <wcs-mat-icon class=\"announcement-icon\"\n                        ref={(el) => this.annoucementIconHtmlElement = el}\n                        icon={this.getMaterialIcon()}\n                        aria-label={this.getAriaLabel()}\n                        role=\"img\"\n                        aria-hidden={false}></wcs-mat-icon>\n                    <div class=\"content\">\n                        <slot name=\"title\"></slot>\n                        <slot name=\"subtitle\"></slot>\n                    </div>\n                </div>\n                <wcs-button shape=\"round\" size=\"s\" mode=\"clear\" class=\"close-button wcs-dark\"\n                    aria-label=\"Fermer cette notification\"\n                    onClick={($event) => this.onCloseButtonClick($event)}>\n                    <wcs-mat-icon icon=\"close\"></wcs-mat-icon>\n                </wcs-button>\n                <div class={'progress-bar' + (!this.showProgressBar ? ' hidden' : '')}>\n                    <div class=\"progress-bar-track\"></div>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"mappings":"2DAAA,MAAMA,EAAW,iyHACjB,MAAAC,EAAeD,E,MC8BFE,EAAK,M,0EAiCNC,KAAAC,WAAsB,MAGtBD,KAAAE,aAAwB,MAKxBF,KAAAG,UAAYC,U,UA5BoC,K,YAG/B,U,aAaP,I,qBACiB,K,CAkBnC,gBAAAC,GACIL,KAAKM,WAAW,K,CAIpB,eAAAC,GACIP,KAAKM,WAAW,M,CAOZ,UAAAA,CAAWE,GACfR,KAAKE,aAAeM,EAGpB,GAAIR,KAAKC,aAAeD,KAAKE,aAAc,CACvCF,KAAKS,O,EAIb,uBAAMC,SACIV,KAAKW,wB,CAGf,sBAAMC,G,OAKFC,EAAAb,KAAKc,8BAA0B,MAAAD,SAAA,SAAAA,EAAEE,iBAAiB,cAAe,SAEjE,GAAIf,KAAKgB,gBAAiB,CACtBhB,KAAKiB,GAAGC,MAAMC,YAAY,uDAAwDnB,KAAKoB,QAAU,IAAO,I,KACrG,CACHpB,KAAKiB,GAAGC,MAAMC,YAAY,uDAAwD,K,EAI1F,4BAAMR,GACF,GAAIX,KAAKoB,UAAY,EAAG,OACxBpB,KAAKqB,KAAO,KACZrB,KAAKG,UAAYmB,YAAW,KAExB,IAAKtB,KAAKE,aAAc,CACpBF,KAAKS,O,CAETT,KAAKC,WAAa,IAAI,GACvBD,KAAKoB,Q,CAGJ,kBAAAG,CAAmBC,GACvBxB,KAAKS,O,CAGD,KAAAA,GACJT,KAAKqB,KAAO,MACZrB,KAAKyB,gBAAgBC,M,CAGjB,eAAAC,GACJ,OAAQ3B,KAAK4B,QACT,IAAK,UACD,MAAO,eACX,IAAK,cACD,MAAO,OACX,IAAK,QACD,MAAO,QACX,IAAK,UACD,MAAO,U,CAIX,YAAAC,GACJ,OAAQ7B,KAAK4B,QACT,IAAK,UACD,MAAO,SACX,IAAK,cACD,MAAO,cACX,IAAK,QACD,MAAO,SACX,IAAK,UACD,MAAO,Y,CAInB,oBAAAE,GAKIC,aAAa/B,KAAKG,U,CAGtB,MAAA6B,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,4CACDF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,0BACPH,EAAA,gBAAAE,IAAA,2CAAcC,MAAM,oBAChBC,IAAMpB,GAAOjB,KAAKc,2BAA6BG,EAC/CqB,KAAMtC,KAAK2B,kBAAiB,aAChB3B,KAAK6B,eACjBU,KAAK,MAAK,cACG,QACjBN,EAAA,OAAAE,IAAA,2CAAKC,MAAM,WACPH,EAAA,QAAAE,IAAA,2CAAMK,KAAK,UACXP,EAAA,QAAAE,IAAA,2CAAMK,KAAK,eAGnBP,EAAA,cAAAE,IAAA,2CAAYM,MAAM,QAAQC,KAAK,IAAIC,KAAK,QAAQP,MAAM,wBAAuB,aAC9D,4BACXQ,QAAUC,GAAW7C,KAAKuB,mBAAmBsB,IAC7CZ,EAAA,gBAAAE,IAAA,2CAAcG,KAAK,WAEvBL,EAAA,OAAAE,IAAA,2CAAKC,MAAO,iBAAmBpC,KAAKgB,gBAAkB,UAAY,KAC9DiB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,wB"}

package/dist/wcs/p-86ec9ead.entry.js

@@ -1,2 +0,0 @@
-import{r as o,c as r,h as e,H as a,g as c}from"./p-32e583ea.js";import{s as t,i,a as d}from"./p-52d77e1f.js";const s=':host{width:fit-content;--wcs-radio-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);--wcs-radio-text-color-default:var(--wcs-semantic-color-text-secondary);--wcs-radio-text-font-weight-default:var(--wcs-semantic-font-weight-medium);--wcs-radio-text-color-selected:var(--wcs-semantic-color-text-primary);--wcs-radio-text-font-weight-selected:var(--wcs-semantic-font-weight-medium);--wcs-radio-text-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-radio-text-color-hover:var(--wcs-semantic-color-text-primary);--wcs-radio-checkmark-size:1rem;--wcs-radio-gap:var(--wcs-semantic-spacing-base);--wcs-radio-outline-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-radio-checkmark-border-width:var(--wcs-semantic-border-width-large);--wcs-radio-checkmark-border-color-default:var(--wcs-semantic-color-border-control-indicator-default);--wcs-radio-checkmark-border-color-selected:var(--wcs-semantic-color-border-control-indicator-selected);--wcs-radio-checkmark-border-color-hover:var(--wcs-semantic-color-border-control-indicator-hover);--wcs-radio-checkmark-border-color-disabled:var(--wcs-semantic-color-border-control-indicator-disabled);--wcs-radio-checkmark-background-color-default:transparent;--wcs-radio-checkmark-background-color-selected:var(--wcs-semantic-color-background-control-indicator-selected);--wcs-radio-checkmark-background-color-selected-disabled:var(--wcs-semantic-color-background-control-indicator-disabled);--wcs-radio-checkmark-background-color-selected-hover:var(--wcs-semantic-color-background-control-indicator-hover);--wcs-radio-checkmark-outline-distance-with-checkmark-circle:var(--wcs-semantic-spacing-small);--wcs-radio-checkmark-outline-width:var(--wcs-semantic-border-width-large);--wcs-radio-checkmark-outline-color:var(--wcs-semantic-color-foreground-control-indicator-selected);--wcs-radio-checkmark-border-radius:var(--wcs-semantic-border-radius-full);--wcs-radio-border-radius:var(--wcs-semantic-border-radius-base);--wcs-radio-option-background-color-default:var(--wcs-semantic-color-background-action-secondary-default);--wcs-radio-option-background-color-hover:var(--wcs-semantic-color-background-action-secondary-default);--wcs-radio-option-background-color-press:var(--wcs-semantic-color-background-action-secondary-default);--wcs-radio-option-background-color-disabled:var(--wcs-semantic-color-background-action-secondary-default);--wcs-radio-option-background-color-selected-default:var(--wcs-semantic-color-background-action-primary-default);--wcs-radio-option-background-color-selected-hover:var(--wcs-semantic-color-background-action-primary-hover);--wcs-radio-option-background-color-selected-press:var(--wcs-semantic-color-background-action-primary-press);--wcs-radio-option-background-color-selected-disabled:var(--wcs-semantic-color-background-action-primary-disabled);--wcs-radio-option-text-color-default:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-radio-option-text-color-hover:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-radio-option-text-color-press:var(--wcs-semantic-color-foreground-action-secondary-press);--wcs-radio-option-text-color-selected-default:var(--wcs-semantic-color-foreground-action-primary-default);--wcs-radio-option-text-color-selected-hover:var(--wcs-semantic-color-foreground-action-primary-hover);--wcs-radio-option-text-color-selected-press:var(--wcs-semantic-color-foreground-action-primary-press);--wcs-radio-option-text-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-radio-option-text-font-weight-default:var(--wcs-semantic-font-weight-roman);--wcs-radio-option-text-font-weight-selected:var(--wcs-semantic-font-weight-roman);--wcs-radio-option-border-radius:var(--wcs-semantic-border-radius-base);--wcs-radio-option-border-width:var(--wcs-semantic-border-width-default);--wcs-radio-option-border-color-hover:var(--wcs-semantic-color-border-action-secondary-hover);--wcs-radio-option-border-color-press:var(--wcs-semantic-color-border-action-secondary-press);--wcs-radio-option-padding-top:var(--wcs-semantic-spacing-base);--wcs-radio-option-padding-right:var(--wcs-semantic-spacing-large);--wcs-radio-option-padding-bottom:var(--wcs-semantic-spacing-base);--wcs-radio-option-padding-left:var(--wcs-semantic-spacing-large)}:host([mode=radio]) input,:host([mode=horizontal]) input{position:absolute;opacity:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}:host([mode=radio]) label,:host([mode=horizontal]) label{margin-bottom:0;color:var(--wcs-radio-text-color-default);font-weight:var(--wcs-radio-text-font-weight-default) !important;display:inline-block}:host([mode=radio]) label:before,:host([mode=horizontal]) label:before{border-radius:var(--wcs-radio-checkmark-border-radius);border:var(--wcs-radio-checkmark-border-width) solid var(--wcs-radio-checkmark-border-color-default);position:relative;width:var(--wcs-radio-checkmark-size);height:var(--wcs-radio-checkmark-size);pointer-events:none;content:"";background-color:var(--wcs-radio-checkmark-background-color-default)}:host([mode=radio]) input:focus-visible+label,:host([mode=horizontal]) input:focus-visible+label{transition:none;outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-radio-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-radio-border-radius)}:host([disabled]) label{color:var(--wcs-radio-text-color-disabled);cursor:not-allowed}:host([disabled]) label:before{border-color:var(--wcs-radio-checkmark-border-color-disabled)}:host(:not([disabled])) label{cursor:pointer}:host([mode=radio].checked) label,:host([mode=horizontal].checked) label{color:var(--wcs-radio-text-color-selected);font-weight:var(--wcs-radio-text-font-weight-selected) !important}:host([mode=radio].checked) label:before,:host([mode=horizontal].checked) label:before{border-color:var(--wcs-radio-checkmark-border-color-selected);background-color:var(--wcs-radio-checkmark-background-color-selected);outline:solid var(--wcs-radio-checkmark-outline-width) var(--wcs-radio-checkmark-outline-color);outline-offset:calc(-1 * var(--wcs-radio-checkmark-outline-distance-with-checkmark-circle))}:host([mode=radio][disabled].checked) label,:host([mode=horizontal][disabled].checked) label{color:var(--wcs-radio-text-color-disabled)}:host([mode=radio][disabled].checked) label:before,:host([mode=horizontal][disabled].checked) label:before{border-color:var(--wcs-radio-checkmark-border-color-disabled);background-color:var(--wcs-radio-checkmark-background-color-selected-disabled)}:host([mode=radio]:hover:not([disabled])) label,:host([mode=horizontal]:hover:not([disabled])) label{color:var(--wcs-radio-text-color-hover)}:host([mode=radio]:hover:not([disabled])) label:before,:host([mode=horizontal]:hover:not([disabled])) label:before{border-color:var(--wcs-radio-checkmark-border-color-hover);background-color:var(--wcs-radio-checkmark-background-color-selected-hover)}:host([mode=radio]:hover:not([disabled]):not(.checked)) label:before,:host([mode=horizontal]:hover:not([disabled]):not(.checked)) label:before{background-color:var(--wcs-radio-checkmark-background-color-default)}:host([mode=radio]) label{border:none}:host([mode=radio]) label:before{transition:background-color var(--wcs-radio-transition-duration) ease-in-out;margin-right:var(--wcs-radio-gap);display:inline-block;top:3px;box-sizing:border-box}:host([mode=radio]) label:empty::before{margin-right:0}:host([mode=horizontal]){height:fit-content}:host([mode=horizontal]) label:before{transition:background-color var(--wcs-radio-transition-duration) ease-in-out;margin:auto auto var(--wcs-radio-gap);display:block}:host([mode=horizontal]) label:empty::before{margin-bottom:0}:host([mode=option]){font-weight:var(--wcs-radio-option-text-font-weight-default) !important}:host([mode=option]) input{position:absolute;z-index:-1;opacity:0;box-sizing:border-box;padding:0}:host([mode=option]) label{padding:var(--wcs-radio-option-padding-top) var(--wcs-radio-option-padding-right) var(--wcs-radio-option-padding-bottom) var(--wcs-radio-option-padding-left);margin-bottom:0;color:var(--wcs-radio-option-text-color-default);white-space:nowrap;border-radius:var(--wcs-radio-option-border-radius);transition:background-color var(--wcs-radio-transition-duration) ease-in-out;background-color:var(--wcs-radio-option-background-color-default)}:host([mode=option]) input:focus-visible+label{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-radio-outline-color-focus);outline-offset:0;border-radius:var(--wcs-radio-border-radius)}:host([mode=option][disabled]) label{color:var(--wcs-radio-option-text-color-disabled);background-color:var(--wcs-radio-option-background-color-disabled)}:host([mode=option][disabled].checked) label{color:var(--wcs-radio-option-text-color-disabled);background-color:var(--wcs-radio-option-background-color-selected-disabled)}:host([mode=option].checked) label{font-weight:var(--wcs-radio-option-text-font-weight-selected) !important;color:var(--wcs-radio-option-text-color-selected-default);background-color:var(--wcs-radio-option-background-color-selected-default)}:host([mode=option]:hover.checked:not([disabled])) label{color:var(--wcs-radio-option-text-color-selected-hover);background-color:var(--wcs-radio-option-background-color-selected-hover)}:host([mode=option]:active.checked:not([disabled])) label{color:var(--wcs-radio-option-text-color-selected-press);background-color:var(--wcs-radio-option-background-color-selected-press)}:host([mode=option]:hover:not(.checked):not([disabled])) label{color:var(--wcs-radio-option-text-color-hover);background-color:var(--wcs-radio-option-background-color-hover);outline:var(--wcs-radio-option-border-width) solid var(--wcs-radio-option-border-color-hover)}:host([mode=option]:active:not(.checked):not([disabled])) label{color:var(--wcs-radio-option-text-color-press);background-color:var(--wcs-radio-option-background-color-press);outline:var(--wcs-radio-option-border-width) solid var(--wcs-radio-option-border-color-press)}';const n=s;const l=["title"];const h=class{constructor(e){o(this,e);this.wcsRadioClick=r(this,"wcsRadioClick",7);this.wcsBlur=r(this,"wcsBlur",7);this.wcsFocus=r(this,"wcsFocus",7);this.inputId=`wcs-rb-${b++}`;this.inheritedAttributes={};this.checked=false;this.radioTabIndex=-1;this.value=undefined;this.label=undefined;this.disabled=false;this.name=undefined;this.mode="radio"}async updateState(){const o=this.getClosestRadioGroup();if(o){this.checked=o.name===this.name&&o.value===this.value}}async setTabIndex(o){this.radioTabIndex=o}async setAriaAttribute(o,r){t(this.nativeRadio,o,r)}onFocus(o){this.wcsFocus.emit(o)}onBlur(o){this.wcsBlur.emit(o)}getClosestRadioGroup(){return this.el.closest("wcs-radio-group")}componentWillLoad(){if(this.value===undefined){this.value=this.el.innerText||""}this.inheritedAttributes=Object.assign(Object.assign({},i(this.el)),d(this.el,l))}onChange(o){if(this.disabled)return;if(!this.checked){this.checked=true;this.emitRadioChangeEvent()}}emitRadioChangeEvent(){this.wcsRadioClick.emit({label:this.label,source:this.el,value:this.value})}render(){return e(a,{key:"b753f4673fccbd2f0d7e1636be135da90e1850ef",slot:"option",tabIndex:this.disabled?-1:this.radioTabIndex,class:this.checked?"checked":""},e("input",Object.assign({key:"25ac2afe93bdde452db9226feb11587f76a4fd69",id:this.inputId,type:"radio",name:this.name,value:this.value,checked:this.checked,disabled:this.disabled,onChange:this.onChange.bind(this),onFocus:this.onFocus.bind(this),onBlur:this.onBlur.bind(this),"aria-disabled":this.disabled?"true":null,"aria-checked":`${this.checked}`,ref:o=>this.nativeRadio=o},this.inheritedAttributes)),e("label",{key:"13b771ac257bcf81734cee12a85ffdf143e3c329",htmlFor:`${this.inputId}`},this.label))}static get delegatesFocus(){return true}get el(){return c(this)}};let b=0;h.style=n;export{h as wcs_radio};
-//# sourceMappingURL=p-86ec9ead.entry.js.map

package/dist/wcs/p-86ec9ead.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["radioCss","WcsRadioStyle0","RADIO_INHERITED_ATTRS","Radio","this","inputId","radioButtonIds","inheritedAttributes","updateState","radioGroup","getClosestRadioGroup","checked","name","value","setTabIndex","radioTabIndex","setAriaAttribute","attr","setOrRemoveAttribute","nativeRadio","onFocus","ev","wcsFocus","emit","onBlur","wcsBlur","el","closest","componentWillLoad","undefined","innerText","Object","assign","inheritAriaAttributes","inheritAttributes","onChange","_","disabled","emitRadioChangeEvent","wcsRadioClick","label","source","render","h","Host","key","slot","tabIndex","class","id","type","bind","ref","htmlFor"],"sources":["src/components/radio/radio.scss?tag=wcs-radio&encapsulation=shadow","src/components/radio/radio.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    width: fit-content;\n\n    --wcs-radio-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    // region mode Radio\n    --wcs-radio-text-color-default: var(--wcs-semantic-color-text-secondary);\n    --wcs-radio-text-font-weight-default: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-radio-text-color-selected: var(--wcs-semantic-color-text-primary);\n    --wcs-radio-text-font-weight-selected: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-radio-text-color-disabled: var(--wcs-semantic-color-text-disabled);\n    --wcs-radio-text-color-hover: var(--wcs-semantic-color-text-primary);\n\n    --wcs-radio-checkmark-size: 1rem; // for now, we let raw value to let adjust the size based on base font size\n\n    --wcs-radio-gap: var(--wcs-semantic-spacing-base);\n\n    --wcs-radio-outline-color-focus: var(--wcs-semantic-color-border-focus-base); // outline color for focus ring\n\n    --wcs-radio-checkmark-border-width: var(--wcs-semantic-border-width-large);\n    --wcs-radio-checkmark-border-color-default: var(--wcs-semantic-color-border-control-indicator-default);\n    --wcs-radio-checkmark-border-color-selected: var(--wcs-semantic-color-border-control-indicator-selected);\n    --wcs-radio-checkmark-border-color-hover: var(--wcs-semantic-color-border-control-indicator-hover);\n    --wcs-radio-checkmark-border-color-disabled: var(--wcs-semantic-color-border-control-indicator-disabled);\n\n    --wcs-radio-checkmark-background-color-default: transparent;\n    --wcs-radio-checkmark-background-color-selected: var(--wcs-semantic-color-background-control-indicator-selected);\n    --wcs-radio-checkmark-background-color-selected-disabled: var(--wcs-semantic-color-background-control-indicator-disabled);\n    --wcs-radio-checkmark-background-color-selected-hover: var(--wcs-semantic-color-background-control-indicator-hover);\n\n    --wcs-radio-checkmark-outline-distance-with-checkmark-circle: var(--wcs-semantic-spacing-small);\n    --wcs-radio-checkmark-outline-width: var(--wcs-semantic-border-width-large);\n    --wcs-radio-checkmark-outline-color: var(--wcs-semantic-color-foreground-control-indicator-selected);\n    --wcs-radio-checkmark-border-radius: var(--wcs-semantic-border-radius-full);\n\n    --wcs-radio-border-radius: var(--wcs-semantic-border-radius-base);\n    // endregion\n\n    // region mode Option\n    --wcs-radio-option-background-color-default: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-radio-option-background-color-hover: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-radio-option-background-color-press: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-radio-option-background-color-disabled: var(--wcs-semantic-color-background-action-secondary-default);\n\n    --wcs-radio-option-background-color-selected-default: var(--wcs-semantic-color-background-action-primary-default);\n    --wcs-radio-option-background-color-selected-hover: var(--wcs-semantic-color-background-action-primary-hover);\n    --wcs-radio-option-background-color-selected-press: var(--wcs-semantic-color-background-action-primary-press);\n    --wcs-radio-option-background-color-selected-disabled: var(--wcs-semantic-color-background-action-primary-disabled);\n\n    --wcs-radio-option-text-color-default: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-radio-option-text-color-hover: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-radio-option-text-color-press: var(--wcs-semantic-color-foreground-action-secondary-press);\n\n    --wcs-radio-option-text-color-selected-default: var(--wcs-semantic-color-foreground-action-primary-default);\n    --wcs-radio-option-text-color-selected-hover: var(--wcs-semantic-color-foreground-action-primary-hover);\n    --wcs-radio-option-text-color-selected-press: var(--wcs-semantic-color-foreground-action-primary-press);\n    --wcs-radio-option-text-color-disabled: var(--wcs-semantic-color-text-disabled);\n\n    --wcs-radio-option-text-font-weight-default: var(--wcs-semantic-font-weight-roman);\n    --wcs-radio-option-text-font-weight-selected: var(--wcs-semantic-font-weight-roman);\n\n    --wcs-radio-option-border-radius: var(--wcs-semantic-border-radius-base);\n\n    --wcs-radio-option-border-width: var(--wcs-semantic-border-width-default);\n\n    --wcs-radio-option-border-color-hover: var(--wcs-semantic-color-border-action-secondary-hover);\n    --wcs-radio-option-border-color-press: var(--wcs-semantic-color-border-action-secondary-press);\n\n    --wcs-radio-option-padding-top: var(--wcs-semantic-spacing-base);\n    --wcs-radio-option-padding-right: var(--wcs-semantic-spacing-large);\n    --wcs-radio-option-padding-bottom: var(--wcs-semantic-spacing-base);\n    --wcs-radio-option-padding-left: var(--wcs-semantic-spacing-large);\n    // endregion\n}\n\n:host([mode=radio]),\n:host([mode=horizontal]) {\n    input {\n        position: absolute;\n        opacity: 0;\n        height: 1px;\n        width: 1px;\n        overflow: hidden;\n        clip-path: inset(50%);\n        white-space: nowrap;\n    }\n\n    label {\n        margin-bottom: 0;\n        color: var(--wcs-radio-text-color-default);\n        font-weight: var(--wcs-radio-text-font-weight-default) !important;\n        display: inline-block;\n\n        &:before {\n            border-radius: var(--wcs-radio-checkmark-border-radius);\n            border: var(--wcs-radio-checkmark-border-width) solid var(--wcs-radio-checkmark-border-color-default);\n            position: relative;\n            width: var(--wcs-radio-checkmark-size);\n            height: var(--wcs-radio-checkmark-size);\n            pointer-events: none;\n            content: \"\";\n            background-color: var(--wcs-radio-checkmark-background-color-default);\n        }\n    }\n\n    input:focus-visible + label {\n        transition: none;\n        @include focus-outline($outline-color: var(--wcs-radio-outline-color-focus), $border-radius: var(--wcs-radio-border-radius));\n    }\n}\n\n:host([disabled]) {\n    label {\n        color: var(--wcs-radio-text-color-disabled);\n        cursor: not-allowed;\n\n        &:before {\n            border-color: var(--wcs-radio-checkmark-border-color-disabled);\n        }\n    }\n}\n\n:host(:not([disabled])) {\n    label {\n        cursor: pointer;\n    }\n}\n\n:host([mode=radio].checked),\n:host([mode=horizontal].checked) {\n    label {\n        color: var(--wcs-radio-text-color-selected);\n        font-weight: var(--wcs-radio-text-font-weight-selected) !important;\n\n        &:before {\n            border-color: var(--wcs-radio-checkmark-border-color-selected);\n            background-color: var(--wcs-radio-checkmark-background-color-selected);\n            outline: solid var(--wcs-radio-checkmark-outline-width) var(--wcs-radio-checkmark-outline-color);\n            outline-offset: calc(-1 * var(--wcs-radio-checkmark-outline-distance-with-checkmark-circle));\n        }\n    }\n}\n\n:host([mode=radio][disabled].checked),\n:host([mode=horizontal][disabled].checked) {\n    label {\n        color: var(--wcs-radio-text-color-disabled);\n\n        &:before {\n            border-color: var(--wcs-radio-checkmark-border-color-disabled);\n            background-color: var(--wcs-radio-checkmark-background-color-selected-disabled);\n        }\n    }\n}\n\n:host([mode=radio]:hover:not([disabled])),\n:host([mode=horizontal]:hover:not([disabled])) {\n    label {\n        color: var(--wcs-radio-text-color-hover);\n\n        &:before {\n            border-color: var(--wcs-radio-checkmark-border-color-hover);\n            background-color: var(--wcs-radio-checkmark-background-color-selected-hover);\n        }\n    }\n}\n\n:host([mode=radio]:hover:not([disabled]):not(.checked)),\n:host([mode=horizontal]:hover:not([disabled]):not(.checked)) {\n    label:before {\n        background-color: var(--wcs-radio-checkmark-background-color-default);\n    }\n}\n\n:host([mode=radio]) {\n    label {\n        border: none;\n\n        &:before {\n            transition: background-color var(--wcs-radio-transition-duration) ease-in-out;\n            margin-right: var(--wcs-radio-gap);\n            display: inline-block;\n            top: 3px;\n            box-sizing: border-box;\n        }\n\n        &:empty::before {\n            margin-right: 0;\n        }\n    }\n}\n\n:host([mode=horizontal]) {\n    height: fit-content;\n\n    label {\n        &:before {\n            transition: background-color var(--wcs-radio-transition-duration) ease-in-out;\n            margin: auto auto var(--wcs-radio-gap);\n            display: block;\n        }\n\n        &:empty::before {\n            margin-bottom: 0;\n        }\n    }\n}\n\n:host([mode=option]) {\n    font-weight: var(--wcs-radio-option-text-font-weight-default) !important;\n\n    input {\n        position: absolute;\n        z-index: -1;\n        opacity: 0;\n        box-sizing: border-box;\n        padding: 0;\n    }\n\n    label {\n        padding: var(--wcs-radio-option-padding-top) var(--wcs-radio-option-padding-right) var(--wcs-radio-option-padding-bottom) var(--wcs-radio-option-padding-left);\n        margin-bottom: 0;\n        color: var(--wcs-radio-option-text-color-default);\n        white-space: nowrap;\n        border-radius: var(--wcs-radio-option-border-radius);\n        transition: background-color var(--wcs-radio-transition-duration) ease-in-out;\n        background-color: var(--wcs-radio-option-background-color-default);\n    }\n\n    input:focus-visible + label {\n        @include focus-outline($outline-color: var(--wcs-radio-outline-color-focus), $border-radius: var(--wcs-radio-border-radius), $outline-offset: 0);\n    }\n}\n\n:host([mode=option][disabled]) {\n    label {\n        color: var(--wcs-radio-option-text-color-disabled);\n        background-color: var(--wcs-radio-option-background-color-disabled);\n    }\n}\n\n:host([mode=option][disabled].checked) {\n    label {\n        color: var(--wcs-radio-option-text-color-disabled);\n        background-color: var(--wcs-radio-option-background-color-selected-disabled);\n    }\n}\n\n:host([mode=option].checked) {\n    label {\n        font-weight: var(--wcs-radio-option-text-font-weight-selected) !important;\n        color: var(--wcs-radio-option-text-color-selected-default);\n        background-color: var(--wcs-radio-option-background-color-selected-default);\n    }\n}\n\n:host([mode=option]:hover.checked:not([disabled])) {\n    label {\n        color: var(--wcs-radio-option-text-color-selected-hover);\n        background-color: var(--wcs-radio-option-background-color-selected-hover);\n    }\n}\n\n:host([mode=option]:active.checked:not([disabled])) {\n    label {\n        color: var(--wcs-radio-option-text-color-selected-press);\n        background-color: var(--wcs-radio-option-background-color-selected-press);\n    }\n}\n\n:host([mode=option]:hover:not(.checked):not([disabled])) {\n    label {\n        color: var(--wcs-radio-option-text-color-hover);\n        background-color: var(--wcs-radio-option-background-color-hover);\n        outline: var(--wcs-radio-option-border-width) solid var(--wcs-radio-option-border-color-hover);\n    }\n}\n\n:host([mode=option]:active:not(.checked):not([disabled])) {\n    label {\n        color: var(--wcs-radio-option-text-color-press);\n        background-color: var(--wcs-radio-option-background-color-press);\n        outline: var(--wcs-radio-option-border-width) solid var(--wcs-radio-option-border-color-press);\n\n\n\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Method,\n    Prop,\n    State\n} from '@stencil/core';\nimport { RadioChosedEvent } from './radio-interface';\nimport { RadioGroupMode } from '../radio-group/radio-group-interface';\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst RADIO_INHERITED_ATTRS = ['title'];\n\n/**\n * The radio component should always be wrapped in a `wcs-radio-group`.\n * \n * @cssprop --wcs-radio-transition-duration - Duration of the transition\n * \n * @cssprop --wcs-radio-text-color-default - Color of the text when the radio is not selected\n * @cssprop --wcs-radio-text-font-weight-default - Default font weight of the text\n * @cssprop --wcs-radio-text-color-selected - Color of the text when the radio is selected\n * @cssprop --wcs-radio-text-font-weight-selected - Font weight of the text when the radio is selected\n * @cssprop --wcs-radio-text-color-disabled - Color of the text when the radio is disabled\n * @cssprop --wcs-radio-text-color-hover - Color of the text when the radio is hovered\n * \n * @cssprop --wcs-radio-outline-color-focus - Color of the outline when the radio is focused\n * \n * @cssprop --wcs-radio-checkmark-size - Size of the checkmark circle\n * @cssprop --wcs-radio-checkmark-border-width - Width of the border of the checkmark circle\n * @cssprop --wcs-radio-checkmark-border-color-default - Color of the border of the checkmark circle when the radio's is not selected\n * @cssprop --wcs-radio-checkmark-border-color-selected - Color of the border of the checkmark circle when the radio is selected\n * @cssprop --wcs-radio-checkmark-border-color-hover - Color of the border of the checkmark circle when the radio is hovered\n * @cssprop --wcs-radio-checkmark-border-color-disabled - Color of the border of the checkmark circle when the radio is disabled\n * @cssprop --wcs-radio-checkmark-background-color-default - Background color of the checkmark circle when the radio's is not selected\n * @cssprop --wcs-radio-checkmark-background-color-selected - Background color of the checkmark circle when the radio's is selected\n * @cssprop --wcs-radio-checkmark-background-color-selected-disabled - Background color of the checkmark circle when the radio is selected and disabled\n * @cssprop --wcs-radio-checkmark-background-color-selected-hover - Background color of the checkmark circle when the radio is selected and hovered\n *\n * @cssprop --wcs-radio-checkmark-outline-distance-with-checkmark-circle - Distance between the checkmark circle and the outline (inside the background)\n * @cssprop --wcs-radio-checkmark-outline-width - Width of the outline of the checkmark circle (inside the background)\n * @cssprop --wcs-radio-checkmark-outline-color - Color of the outline of the checkmark circle (inside the background)\n * @cssprop --wcs-radio-checkmark-border-radius - Border radius of the checkmark circle\n * \n * @cssprop --wcs-radio-gap - Gap between the radio checkmark circle and the label\n * \n * @cssprop --wcs-radio-border-radius - Border radius of the radio (default mode)\n *\n * @cssprop --wcs-radio-option-background-color-default - Background color of the radio option when not selected\n * @cssprop --wcs-radio-option-background-color-hover - Background color of the radio option not selected when hovered\n * @cssprop --wcs-radio-option-background-color-press - Background color of the radio option when pressed\n * @cssprop --wcs-radio-option-background-color-disabled - Background color of the radio option when disabled\n * \n * @cssprop --wcs-radio-option-background-color-selected-default - Background color of the radio option when selected\n * @cssprop --wcs-radio-option-background-color-selected-hover - Background color of the radio option when selected and hovered\n * @cssprop --wcs-radio-option-background-color-selected-press - Background color of the radio option when selected and pressed\n * @cssprop --wcs-radio-option-background-color-selected-disabled - Background color of the radio option when selected and disabled\n * \n * @cssprop --wcs-radio-option-text-color-default - Color of the text when the radio option is not selected\n * @cssprop --wcs-radio-option-text-color-hover - Color of the text when the radio option not selected is hovered\n * @cssprop --wcs-radio-option-text-color-press - Color of the text when the radio option is pressed\n * \n * @cssprop --wcs-radio-option-text-color-selected-default - Color of the text when the radio option is selected\n * @cssprop --wcs-radio-option-text-color-selected-hover - Color of the text when the radio option is selected and hovered\n * @cssprop --wcs-radio-option-text-color-selected-press - Color of the text when the radio option is selected and pressed\n * @cssprop --wcs-radio-option-text-color-disabled - Color of the text when the radio option's is disabled\n * \n * @cssprop --wcs-radio-option-text-font-weight-default - Default font weight of the text\n * @cssprop --wcs-radio-option-text-font-weight-selected - Font weight of the text when the radio option is selected\n *\n * @cssprop --wcs-radio-option-border-radius - Border radius of the radio option\n * @cssprop --wcs-radio-option-border-width - Width of the border of the radio option\n * @cssprop --wcs-radio-option-border-color-hover - Color of the border of the radio option when not selected and hovered\n * @cssprop --wcs-radio-option-border-color-press - Color of the border of the radio option when not selected and pressed\n * \n * @cssprop --wcs-radio-option-padding-top - Padding top of the radio option\n * @cssprop --wcs-radio-option-padding-right - Padding right of the radio option\n * @cssprop --wcs-radio-option-padding-bottom - Padding bottom of the radio option\n * @cssprop --wcs-radio-option-padding-left - Padding left of the radio option\n */\n@Component({\n    tag: 'wcs-radio',\n    styleUrl: 'radio.scss',\n    shadow: {\n        delegatesFocus: true\n    }\n})\nexport class Radio implements ComponentInterface, MutableAriaAttribute {\n    private inputId = `wcs-rb-${radioButtonIds++}`;\n    @Element() private el!: HTMLWcsRadioElement;\n    private nativeRadio!: HTMLInputElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    /**\n     * If `true`, the radio is selected. \n     * @private\n     */\n    @State() private checked: boolean = false;\n\n    /**\n     * The tabindex of the radio button\n     * @private\n     */\n    @State() private radioTabIndex = -1;\n\n    /**\n     * Sets a unique value for each radio, used to identify which radio button in a group is selected\n     */\n    @Prop({ mutable: true, reflect: true }) value: any | any[] | undefined | null;\n\n    /**\n     * The label text displayed for the user\n     */\n    @Prop({ mutable: true, reflect: true }) label: string;\n    \n    /**\n     * If `true`, the user cannot interact with the radio.\n     */\n    @Prop({ reflect: true, mutable: true }) disabled: boolean = false;\n\n    /**\n     * Emitted when the radio is clicked or Space/Enter is pressed above an unchecked radio\n     */\n    @Event({ eventName: 'wcsRadioClick' }) wcsRadioClick: EventEmitter<RadioChosedEvent>\n\n    /**\n     * Emitted when the radio loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    /**\n     * Emitted when the radio has focus.\n     */\n    @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n    /**\n     * The name of the control, automatically set by the radio group.  \n     * (You shouldn't set this prop by yourself)\n     * @internal\n     */\n    @Prop({ mutable: true }) name: string;\n\n\n    /**\n     * The display mode of the control, automatically set by the radio group.  \n     * (You shouldn't set this prop by yourself)\n     * @internal\n     */\n    @Prop({ reflect: true, mutable: false }) mode: RadioGroupMode = 'radio';\n\n    /**\n     * @internal\n     * Checks of unchecks the radio according to it's radio-group value\n     */\n    @Method()\n    async updateState() {\n        const radioGroup = this.getClosestRadioGroup();\n        if (radioGroup) {\n            this.checked = radioGroup.name === this.name && radioGroup.value === this.value\n        }\n    }\n\n    /** @internal */\n    @Method()\n    async setTabIndex(value: number) {\n        this.radioTabIndex = value;\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeRadio, attr, value);\n    }\n\n    onFocus(ev: FocusEvent) {\n        this.wcsFocus.emit(ev);\n    }\n\n    onBlur(ev: FocusEvent) {\n        this.wcsBlur.emit(ev);\n    }\n    \n    private getClosestRadioGroup(): HTMLWcsRadioGroupElement | null {\n        return this.el.closest('wcs-radio-group');\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        if (this.value === undefined) {\n            // If no value was given we use the text content instead.\n            this.value = this.el.innerText || '';\n        }\n        \n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, RADIO_INHERITED_ATTRS),\n        };\n    }\n    \n    private onChange(_: Event) {\n        if (this.disabled) return;\n\n        // If the radio is unchecked, then the change represents its transition to the check state.\n        // Only emit the change event when going from unchecked to checked, like the native behavior.\n        // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event\n        if (!this.checked) {\n            this.checked = true;\n            this.emitRadioChangeEvent();\n        }\n    }\n\n    emitRadioChangeEvent() {\n        this.wcsRadioClick.emit({\n            label: this.label,\n            source: this.el,\n            value: this.value\n        });\n    }\n\n    render() {\n        \n        return (\n            <Host slot=\"option\"\n                  tabIndex={this.disabled ? -1 : this.radioTabIndex}\n                  class={this.checked ? 'checked' : ''}>\n                <input\n                    id={this.inputId}\n                    type=\"radio\"\n                    name={this.name}\n                    value={this.value}\n                    checked={this.checked} // Initial checked state of native input\n                    disabled={this.disabled}\n                    onChange={this.onChange.bind(this)}\n                    onFocus={this.onFocus.bind(this)}\n                    onBlur={this.onBlur.bind(this)}\n                    aria-disabled={this.disabled ? 'true' : null}\n                    aria-checked={`${this.checked}`}\n                    ref={(el) => (this.nativeRadio = el)}\n                    {...this.inheritedAttributes}\n                />\n                <label htmlFor={`${this.inputId}`}>{this.label}</label>\n            </Host>\n        );\n    }\n}\n\nlet radioButtonIds = 0;\n"],"mappings":"6GAAA,MAAMA,EAAW,02TACjB,MAAAC,EAAeD,ECgBf,MAAME,EAAwB,CAAC,S,MA2ElBC,EAAK,M,0IACNC,KAAAC,QAAU,UAAUC,MAGpBF,KAAAG,oBAA4C,G,aAMhB,M,oBAMF,E,wDAe0B,M,8BA8BI,O,CAOhE,iBAAMC,GACF,MAAMC,EAAaL,KAAKM,uBACxB,GAAID,EAAY,CACZL,KAAKO,QAAUF,EAAWG,OAASR,KAAKQ,MAAQH,EAAWI,QAAUT,KAAKS,K,EAMlF,iBAAMC,CAAYD,GACdT,KAAKW,cAAgBF,C,CAIzB,sBAAMG,CAAiBC,EAAyBJ,GAC5CK,EAAqBd,KAAKe,YAAaF,EAAMJ,E,CAGjD,OAAAO,CAAQC,GACJjB,KAAKkB,SAASC,KAAKF,E,CAGvB,MAAAG,CAAOH,GACHjB,KAAKqB,QAAQF,KAAKF,E,CAGd,oBAAAX,GACJ,OAAON,KAAKsB,GAAGC,QAAQ,kB,CAG3B,iBAAAC,GACI,GAAIxB,KAAKS,QAAUgB,UAAW,CAE1BzB,KAAKS,MAAQT,KAAKsB,GAAGI,WAAa,E,CAGtC1B,KAAKG,oBAAmBwB,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsB7B,KAAKsB,KAC3BQ,EAAkB9B,KAAKsB,GAAIxB,G,CAI9B,QAAAiC,CAASC,GACb,GAAIhC,KAAKiC,SAAU,OAKnB,IAAKjC,KAAKO,QAAS,CACfP,KAAKO,QAAU,KACfP,KAAKkC,sB,EAIb,oBAAAA,GACIlC,KAAKmC,cAAchB,KAAK,CACpBiB,MAAOpC,KAAKoC,MACZC,OAAQrC,KAAKsB,GACbb,MAAOT,KAAKS,O,CAIpB,MAAA6B,GAEI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,SACLC,SAAU3C,KAAKiC,UAAY,EAAIjC,KAAKW,cACpCiC,MAAO5C,KAAKO,QAAU,UAAY,IACpCgC,EAAA,QAAAZ,OAAAC,OAAA,CAAAa,IAAA,2CACII,GAAI7C,KAAKC,QACT6C,KAAK,QACLtC,KAAMR,KAAKQ,KACXC,MAAOT,KAAKS,MACZF,QAASP,KAAKO,QACd0B,SAAUjC,KAAKiC,SACfF,SAAU/B,KAAK+B,SAASgB,KAAK/C,MAC7BgB,QAAShB,KAAKgB,QAAQ+B,KAAK/C,MAC3BoB,OAAQpB,KAAKoB,OAAO2B,KAAK/C,MAAK,gBACfA,KAAKiC,SAAW,OAAS,KAAI,eAC9B,GAAGjC,KAAKO,UACtByC,IAAM1B,GAAQtB,KAAKe,YAAcO,GAC7BtB,KAAKG,sBAEboC,EAAA,SAAAE,IAAA,2CAAOQ,QAAS,GAAGjD,KAAKC,WAAYD,KAAKoC,O,mEAMzD,IAAIlC,EAAiB,E"}

package/dist/wcs/p-89b8c724.js

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

package/dist/wcs/p-98a8b806.entry.js

@@ -1,2 +0,0 @@
-import{r as c,h as t,H as o}from"./p-32e583ea.js";const s=":host{--wcs-card-content-color:var(--wcs-semantic-color-text-tertiary);--wcs-card-content-font-size:var(--wcs-semantic-font-size-body-3);display:block;overflow:hidden}::slotted(*){color:var(--wcs-card-content-color);font-size:var(--wcs-card-content-font-size);margin:0}";const e=s;const r=class{constructor(t){c(this,t)}render(){return t(o,{key:"970e45353d35495c5a4500e168f6b9fda970c7a0"},t("slot",{key:"26f30084a71090b8894593f8c57f35a7e9f60f65"}))}};r.style=e;export{r as wcs_card_content};
-//# sourceMappingURL=p-98a8b806.entry.js.map

package/dist/wcs/p-98a8b806.entry.js.map

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

package/dist/wcs/p-990698a7.entry.js.map

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

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

@@ -1 +0,0 @@
-{"version":3,"names":["WcsEditableFieldSizeValues","isWcsEditableFieldSize","size","includes","editableFieldCss","WcsEditableFieldStyle0","EditableComponentState","EDIT_ARIA_LABEL","DELAY_BEFORE_FOCUS","EditableField","this","spiedElement","currentValue","DISPLAY","componentWillLoad","console","warn","join","value","componentDidLoad","assignedElements","el","shadowRoot","querySelector","type","initWithInput","initWithTextArea","initWithSelect","disconnectedCallback","cleanUpSpiedElementEventListeners","keyboardSubmitHandler","event","shouldValidateOnEnterKey","isEnterKey","ctrlKey","sendCurrentValue","isEscapeKey","discardChanges","onWcsInputOrChange","stopImmediatePropagation","detail","target","validateFn","isError","_a","removeEventListener","onInputKeydownCallback","_b","onWcsInputOrChangeCallback","_c","element","filter","x","tagName","Error","addWcsInputEventHandler","addKeyDownHandler","addWcsChangeEventHandler","elt","bind","addEventListener","focusEditModeBtn","setTimeout","editModeBtn","focus","currentState","EDIT","LOAD","wcsChange","emit","newValue","successHandler","forceDisplayStateAndValidate","errorHandler","onWindowClickEvent","isMouseEvent","clickInsideElement","onValueChange","onDisplayContainerClick","readonly","fitContent","getReadonlySvgIcon","h","xmlns","width","height","viewBox","class","d","transform","formatValues","formattedValue","formattedCurrentValue","formatFn","Array","isArray","formattedValueText","render","Host","key","label","onClick","ref","icon","errorMsg"],"sources":["src/components/editable-field/editable-field-interface.tsx","src/components/editable-field/editable-field.scss?tag=wcs-editable-field&encapsulation=shadow","src/components/editable-field/editable-field.tsx"],"sourcesContent":["import { WcsSize } from '../../shared-types';\n\nexport type ValidateFn<T> = (value: T) => boolean;\nexport type FormatFn<T> = (value: T) => string;\n\nexport interface EditableComponentUpdateEvent {\n    /**\n     * The new value sent by the component inside the `wcs-editable-field`\n     */\n    newValue: any; // We use any for now, but when components typings will support template, change for parameterized type\n    /**\n     * Used to get from LOAD state to DISPLAY state.  \n     * Only use to commit the value, when the value is not systematically updated at every event firing\n     */\n    successHandler: () => void;\n    /**\n     * Used to get from LOAD state to DISPLAY state.  \n     * Only use to discard the value, when the value should not be updated \n     */\n    errorHandler: () => void;\n}\n\nexport const WcsEditableFieldSizeValues = ['m', 'l'] as const; // as const keyword is used to infer and preserve the exact literal values of an array or object.\n\nexport type WcsEditableFieldSize = Extract<WcsSize, typeof WcsEditableFieldSizeValues[number]>;\n\nexport function isWcsEditableFieldSize(size: string): size is WcsEditableFieldSize {\n    // @ts-ignore : ignore size type, as it is checked with WcsEditableFieldSizeValues\n    return WcsEditableFieldSizeValues.includes(size);\n}\n\nexport type EditableFieldType = 'input' | 'textarea' | 'select';\n",":host {\n    --wcs-editable-field-label-color: var(--wcs-semantic-color-text-primary);\n    --wcs-editable-field-label-font-weight: var(--wcs-semantic-font-weight-book);\n    --wcs-editable-field-label-gap: var(--wcs-semantic-spacing-base);\n    --wcs-editable-field-label-font-size: var(--wcs-semantic-font-size-m);\n\n    --wcs-editable-field-background-color: var(--wcs-semantic-color-background-control-default);\n    --wcs-editable-field-value-font-weight: var(--wcs-semantic-font-weight-medium);\n    --wcs-editable-field-value-color-default: var(--wcs-semantic-color-text-primary);\n    --wcs-editable-field-value-color-hover: var(--wcs-semantic-color-text-primary);\n    --wcs-editable-field-value-color-readonly: var(--wcs-semantic-color-text-tertiary);\n    --wcs-editable-field-height-m: var(--wcs-semantic-size-m);\n    --wcs-editable-field-height-l: var(--wcs-semantic-size-l);\n    --wcs-editable-field-font-size-m: var(--wcs-semantic-font-size-m);\n    --wcs-editable-field-font-size-l: var(--wcs-semantic-font-size-l);\n\n    --wcs-editable-field-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-editable-field-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-editable-field-border-width-focus: var(--wcs-semantic-border-width-large);\n    --wcs-editable-field-border-width-hover: var(--wcs-semantic-border-width-default);\n    --wcs-editable-field-border-color-default: var(--wcs-semantic-color-border-primary);\n    --wcs-editable-field-border-color-hover: var(--wcs-semantic-color-border-control-focus);\n    --wcs-editable-field-border-color-focus: var(--wcs-semantic-color-border-control-focus);\n    --wcs-editable-field-border-style: var(--wcs-semantic-border-style-focus-control);\n\n    --wcs-editable-field-padding-vertical-m: 0;\n    --wcs-editable-field-padding-vertical-l: 0;\n    --wcs-editable-field-padding-horizontal-m: var(--wcs-semantic-spacing-large);\n    --wcs-editable-field-padding-horizontal-l: var(--wcs-semantic-spacing-large);\n\n    --wcs-editable-field-icon-color-readonly: var(--wcs-semantic-color-text-tertiary);\n\n    // Default\n    --wcs-editable-field-host-padding: var(--wcs-editable-field-padding-vertical-m) var(--wcs-editable-field-padding-horizontal-m);\n    --wcs-editable-field-host-height: var(--wcs-editable-field-height-m);\n    --wcs-editable-field-font-size: var(--wcs-editable-field-font-size-m);\n\n    display: block;\n\n    .display-none {\n        display: none !important;\n    }\n\n    .label {\n        margin-bottom: var(--wcs-editable-field-label-gap);\n        font-weight: var(--wcs-editable-field-label-font-weight);\n        font-size: var(--wcs-editable-field-label-font-size);\n        color: var(--wcs-editable-field-label-color);\n    }\n\n    .edit-container {\n        display: flex;\n        width: 100%;\n\n        .visually-hidden {\n            position: absolute;\n            width: 1px;\n            height: 1px;\n            overflow: hidden;\n            clip: rect(0, 0, 0, 0);\n            clip-path: inset(50%);\n            white-space: nowrap;\n            outline: 0;\n            outline-offset: 0;\n        }\n    }\n\n    button.display-container {\n        // Reset native button styles\n        width: 100%;\n        border: none;\n        font-family: inherit;\n        text-align: start;\n\n        box-sizing: border-box;\n        wcs-mat-icon {\n            display: none;\n        }\n        min-height: var(--wcs-editable-field-host-height);\n        white-space: break-spaces;\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        background-color: var(--wcs-editable-field-background-color);\n        border-radius: var(--wcs-editable-field-border-radius);\n        font-size: var(--wcs-editable-field-font-size);\n        line-height: 1.5;\n        font-weight: var(--wcs-editable-field-value-font-weight);\n        color: var(--wcs-editable-field-value-color-default);\n        padding: var(--wcs-editable-field-host-padding);\n        outline: var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width) var(--wcs-editable-field-border-color-default);\n    }\n\n    .load-container {\n        box-sizing: border-box;\n        min-height: var(--wcs-editable-field-host-height);\n        white-space: pre;\n        display: flex;\n        justify-content: space-between;\n        background-color: var(--wcs-editable-field-background-color);\n        border-radius: var(--wcs-editable-field-border-radius);\n        font-size: var(--wcs-editable-field-font-size);\n        line-height: 1.5;\n        font-weight: var(--wcs-editable-field-value-font-weight);\n        color: var(--wcs-editable-field-value-color-default);\n        padding: var(--wcs-editable-field-host-padding);\n        outline: var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width) var(--wcs-editable-field-border-color-default);\n        align-items: center;\n    }\n\n    wcs-spinner {\n        height: 24px;\n        width: 24px;\n    }\n\n    .readonly-icon {\n        fill: var(--wcs-editable-field-icon-color-readonly);\n    }\n}\n\n:host([readonly]) {\n    --wcs-editable-field-background-color: var(--wcs-semantic-color-background-control-readonly);\n\n    .display-container {\n        color: var(--wcs-editable-field-value-color-readonly);\n\n        &:focus-visible {\n            outline: var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width-focus) var(--wcs-editable-field-border-color-default);\n        }\n    }\n}\n\n:host(:not([readonly])) {\n    .display-container:hover,\n    .display-container:focus-visible {\n        wcs-mat-icon {\n            display: flex;\n            align-items: center;\n        }\n    }\n\n    .display-container:hover {\n        color: var(--wcs-editable-field-value-color-hover);\n        cursor: pointer;\n        outline: var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width-hover) var(--wcs-editable-field-border-color-hover);\n    }\n\n    .display-container:focus-visible {\n        outline: var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width-focus) var(--wcs-editable-field-border-color-focus);\n    }\n}\n\n:host([size=l]) {\n    --wcs-editable-field-host-padding: var(--wcs-editable-field-padding-vertical-l) var(--wcs-editable-field-padding-horizontal-l);\n    --wcs-editable-field-host-height: var(--wcs-editable-field-height-l);\n    --wcs-editable-field-font-size: var(--wcs-editable-field-font-size-l);\n}\n\n:host([size=m]) { // Default\n    --wcs-editable-field-host-padding: var(--wcs-editable-field-padding-vertical-m) var(--wcs-editable-field-padding-horizontal-m);\n    --wcs-editable-field-host-height: var(--wcs-editable-field-height-m);\n    --wcs-editable-field-font-size: var(--wcs-editable-field-font-size-m);\n}\n","import {\n    Component,\n    ComponentInterface,\n    EventEmitter,\n    h,\n    Prop,\n    Event,\n    State,\n    Host,\n    Element,\n    Watch,\n    Listen\n} from '@stencil/core';\n\nimport {\n    EditableComponentUpdateEvent,\n    EditableFieldType,\n    FormatFn,\n    isWcsEditableFieldSize,\n    ValidateFn,\n    WcsEditableFieldSize,\n    WcsEditableFieldSizeValues\n} from './editable-field-interface';\nimport { clickInsideElement, isEnterKey, isEscapeKey, isMouseEvent } from '../../utils/helpers';\n\nenum EditableComponentState {\n    DISPLAY,\n    EDIT,\n    LOAD\n}\n\n/**\n * Aria-label of the display button\n */\nconst EDIT_ARIA_LABEL = \"Éditer\";\n\n// We wait until the element is displayed on the page otherwise the focus does not work.\n// 20ms is a little more than a 16ms frame at 60fps.\nconst DELAY_BEFORE_FOCUS = 20;\n\n/**\n * The editable-field component can be used to simplify the user experience, avoiding the use of a redirection to a form\n * to edit the data of an entity. You can use it with these wrapped components : `wcs-input`, `wcs-textarea`, `wcs-select`. \n *\n * This component is not present in the SNCF design system specifications, so we tried to build it in the most\n * \"discoverable\" way possible (for users who interact with), but it's a first version.\n * \n * **How to use ❓**  \n * This component is mostly used with a server that returns a response to the input sent through the `wcsChange` event.\n * It has 3 internal states :\n * - DISPLAY = the default state of the editable-field\n * - EDIT = the editable-field is editable, the user should input the data\n * - LOADING = the data is submitted and the editable-field is waiting for a **response**\n *\n * A **response** is needed to get the component out of the LOADING state. You can either :\n * - Set the `value` property to a different value to tell the component to refresh and go back into DISPLAY state\n * - Use the `successHandler` callback through the `wcsChange` event (see interface [EditableComponentUpdateEvent](https://gitlab.com/SNCF/wcs/-/blob/develop/src/components/editable-field/editable-field-interface.tsx))\n * - Use the `errorHandler` callback through the `wcsChange` event (see interface [EditableComponentUpdateEvent](https://gitlab.com/SNCF/wcs/-/blob/develop/src/components/editable-field/editable-field-interface.tsx))\n * \n * **Accessibility guidelines 💡**  \n * \n * > - Aria attributes are put on the native component on the first rendering with the `label` and `errorMsg` you provided \n * > - Additional aria attributes put on `<wcs-editable-field>` won't inherit onto the native component : you must use the `setAriaAttribute` method.\n * \n * @cssprop --wcs-editable-field-label-color - Color of the label text\n * @cssprop --wcs-editable-field-label-font-weight - Font weight of the label text\n * @cssprop --wcs-editable-field-label-gap - Gap between the label and the field\n * @cssprop --wcs-editable-field-label-font-size - Font size of the label text\n *\n * @cssprop --wcs-editable-field-background-color - Background color of the editable field\n * @cssprop --wcs-editable-field-value-font-weight - Font weight of the field value text\n * @cssprop --wcs-editable-field-value-color-default - Default color of the field value text\n * @cssprop --wcs-editable-field-value-color-hover - Color of the field value text on hover\n * @cssprop --wcs-editable-field-value-color-readonly - Color of the field value text when readonly\n *\n * @cssprop --wcs-editable-field-height-m - Height of the editable field in medium size\n * @cssprop --wcs-editable-field-height-l - Height of the editable field in large size\n * @cssprop --wcs-editable-field-font-size-m - Font size of the field value text in medium size\n * @cssprop --wcs-editable-field-font-size-l - Font size of the field value text in large size\n *\n * @cssprop --wcs-editable-field-border-radius - Border radius of the editable field\n * @cssprop --wcs-editable-field-border-width - Border width of the editable field\n * @cssprop --wcs-editable-field-border-width-focus - Border width of the editable field when focused\n * @cssprop --wcs-editable-field-border-width-hover - Border width of the editable field on hover\n * @cssprop --wcs-editable-field-border-color-default - Default border color of the editable field\n * @cssprop --wcs-editable-field-border-color-hover - Border color of the editable field on hover\n * @cssprop --wcs-editable-field-border-color-focus - Border color of the editable field on focus\n * @cssprop --wcs-editable-field-border-style - Border style of the editable field\n *\n * @cssprop --wcs-editable-field-padding-vertical-m - Vertical padding of the editable field in medium size\n * @cssprop --wcs-editable-field-padding-vertical-l - Vertical padding of the editable field in large size\n * @cssprop --wcs-editable-field-padding-horizontal-m - Horizontal padding of the editable field in medium size\n * @cssprop --wcs-editable-field-padding-horizontal-l - Horizontal padding of the editable field in large size\n *\n * @cssprop --wcs-editable-field-icon-color-readonly - Color of the icon when the field is readonly\n */\n@Component({\n    tag: 'wcs-editable-field',\n    styleUrl: 'editable-field.scss',\n    shadow: true\n})\nexport class EditableField implements ComponentInterface {\n    @Element() private el!: HTMLWcsEditableFieldElement;\n    private spiedElement: HTMLElement = null;\n    private editModeBtn: HTMLButtonElement;\n    private onInputKeydownCallback: (event: KeyboardEvent) => void;\n    private onWcsInputOrChangeCallback: (event: CustomEvent) => void;\n\n    @State() private currentState: EditableComponentState = EditableComponentState.DISPLAY;\n    /**\n     * Specifies which component is used for editing\n     */\n    @Prop() type: EditableFieldType = 'input';\n    /**\n     * Label of the field.  \n     * Will also be part of the edit button `aria-label`.\n     */\n    @Prop() label!: string;\n    /**\n     * Event called at each (valid) update of the field.\n     */\n    @Event() wcsChange!: EventEmitter<EditableComponentUpdateEvent>;\n    /**\n     * Specify whether the field is editable or not\n     */\n    @Prop({ reflect: true }) readonly: boolean = false;\n    /**\n     * Initial value of the field\n     */\n    @Prop({mutable: true}) value: any;\n    /**\n     * Function to customize the validation of the data during the update\n     */\n    @Prop() validateFn: ValidateFn<any>;\n    /**\n     * Function used to format the value\n     */\n    @Prop() formatFn: FormatFn<any>;\n    /**\n     * Error message displayed under the field if validation failed.\n     */\n    @Prop() errorMsg: string = null;\n    /**\n     * Specify the size (height) of the editable field.\n     */\n    @Prop({reflect: true}) size: WcsEditableFieldSize = 'm';\n\n    @State() private isError: boolean = false;\n\n    private currentValue: any = null;\n\n    componentWillLoad(): Promise<void> | void {\n        if(!isWcsEditableFieldSize(this.size)) {\n            console.warn(`Invalid size value for wcs-editable-field : \"${this.size}\". Must be one of \"${WcsEditableFieldSizeValues.join(', ')}\"`);\n            this.size = \"m\"; // Default fallback value\n        }\n        this.currentValue = this.value;\n    }\n\n    componentDidLoad() {\n        const assignedElements = (this.el.shadowRoot.querySelector('slot') as HTMLSlotElement).assignedElements();\n        switch (this.type) {\n            case 'input':\n                this.initWithInput(assignedElements);\n                break;\n            case 'textarea':\n                this.initWithTextArea(assignedElements);\n                break;\n            case 'select':\n                this.initWithSelect(assignedElements)\n                break;\n        }\n    }\n\n\n    disconnectedCallback(): void {\n        this.cleanUpSpiedElementEventListeners();\n    }\n\n    private keyboardSubmitHandler(event: KeyboardEvent): void {\n        const shouldValidateOnEnterKey = \n            (this.type === 'textarea' || this.type === 'select')\n            ? (isEnterKey(event) && event.ctrlKey)\n            : isEnterKey(event);\n\n        if (shouldValidateOnEnterKey) {\n            this.sendCurrentValue();\n        }\n        if (isEscapeKey(event)) {\n            this.discardChanges();\n        }\n    }\n\n    private onWcsInputOrChange(event: CustomEvent) {\n        event.stopImmediatePropagation();\n        const value = this.type === 'select' ? event.detail.value : event.detail.target.value;\n        this.currentValue = value;\n        if (this.validateFn) {\n            this.isError = !this.validateFn(this.currentValue);\n        }\n    }\n\n    private cleanUpSpiedElementEventListeners(): void {\n        this.spiedElement?.removeEventListener('keydown', this.onInputKeydownCallback);\n        this.spiedElement?.removeEventListener('wcsInput', this.onWcsInputOrChangeCallback);\n        this.spiedElement?.removeEventListener('wcsChange', this.onWcsInputOrChangeCallback);\n    }\n\n    private initWithInput(assignedElements: Element[]) {\n        const element = assignedElements.filter(x => {\n            return x.tagName === 'WCS-INPUT'\n        })[0];\n        if (!element) throw new Error('You must provide a slotted input element to handle edition');\n        this.spiedElement = element as HTMLElement;\n        this.addWcsInputEventHandler(this.spiedElement);\n        this.addKeyDownHandler(this.spiedElement);\n    }\n\n    private initWithTextArea(assignedElements: Element[]) {\n        const element = assignedElements.filter(x => {\n            return x.tagName === 'WCS-TEXTAREA'\n        })[0];\n        if (!element) throw new Error('You must provide a slotted textarea element to handle edition');\n        this.spiedElement = element as HTMLElement;\n        this.addWcsInputEventHandler(this.spiedElement);\n        this.addKeyDownHandler(this.spiedElement);\n    }\n\n    private initWithSelect(assignedElements: Element[]) {\n        const element = assignedElements.filter(x => {\n            return x.tagName === 'WCS-SELECT'\n        })[0];\n        if (!element) throw new Error('You must provide a slotted select element to handle edition');\n        this.spiedElement = element as HTMLElement;\n        this.addWcsChangeEventHandler(this.spiedElement);\n        this.addKeyDownHandler(this.spiedElement);\n    }\n\n    /**\n     * This method subscribes the component to the change events produced by the other WCS components\n     * (provided by the user in slot)\n     * @param elt the element to subscribe to\n     * @private\n     */\n    private addWcsChangeEventHandler(elt: HTMLElement) {\n        this.onWcsInputOrChangeCallback = this.onWcsInputOrChange.bind(this);\n        elt.addEventListener('wcsChange', this.onWcsInputOrChangeCallback);\n    }\n\n    /**\n     * This method subscribes the component to the input events produced by the other WCS components\n     * @param elt the element to subscribe to\n     * @private\n     */\n    private addWcsInputEventHandler(elt: HTMLElement) {\n        this.onWcsInputOrChangeCallback = this.onWcsInputOrChange.bind(this);\n        elt.addEventListener('wcsInput', this.onWcsInputOrChangeCallback);\n    }\n\n    /**\n     * This method subscribes the component to the keydown events produced by the other WCS components \n     * @param elt the element to subscribe to\n     * @private\n     */\n    private addKeyDownHandler(elt: HTMLElement) {\n        this.onInputKeydownCallback = this.keyboardSubmitHandler.bind(this);\n        elt.addEventListener('keydown', this.onInputKeydownCallback);\n    }\n\n    private focusEditModeBtn() {\n        setTimeout(() => {\n            this.editModeBtn?.focus();\n        }, DELAY_BEFORE_FOCUS);\n    }\n\n    private sendCurrentValue() {\n        if (this.currentState === EditableComponentState.EDIT) {\n            if (this.value === this.currentValue) {\n                this.currentState = EditableComponentState.DISPLAY;\n                this.focusEditModeBtn();\n            } else {\n                this.isError = this.validateFn ? !this.validateFn(this.currentValue) : false;\n                if (!this.isError) {\n                    this.currentState = EditableComponentState.LOAD;\n                    this.wcsChange.emit({\n                        newValue: this.currentValue,\n                        successHandler: () => this.forceDisplayStateAndValidate(),\n                        errorHandler: () => this.errorHandler()\n                    });\n                }\n            }\n        }\n    }\n\n    private discardChanges() {\n        this.currentValue = this.value;\n        this.currentState = EditableComponentState.DISPLAY;\n        this.isError = false;\n        this.focusEditModeBtn();\n    }\n\n    forceDisplayStateAndValidate() {\n        if (this.currentState === EditableComponentState.LOAD) {\n            this.value = this.currentValue;\n            this.currentState = EditableComponentState.DISPLAY;\n            this.focusEditModeBtn();\n        } else {\n            throw new Error('You cannot set display state from ' + EditableComponentState[this.currentState] + ' state');\n        }\n    }\n\n    // Process only mouse clicks, to avoid interfering with keyboard triggered button clicks. \n    // In some browsers, pressing \"Enter\" or \"Space\" while focused on a button generates a click event\n    // with `event.detail` set to 0. It's a keyboard triggered click, not a real mouse click. \n    @Listen('click', {target: 'window'})\n    onWindowClickEvent(event: MouseEvent | KeyboardEvent) {\n        // Ensure only true mouse clicks are processed\n        if (isMouseEvent(event) && event.detail !== 0 && !clickInsideElement(event, this.el)) {\n            if (this.currentState === EditableComponentState.EDIT) {\n                if (this.isError) {\n                    this.discardChanges();\n                } else {\n                    this.sendCurrentValue();\n                }\n            }\n        }\n    }\n\n    /**\n     * discard changes and force component state to DISPLAY\n     * <br/>\n     * This method must be call when component is in LOAD state\n     */\n    errorHandler() {\n        this.discardChanges();\n    }\n\n    @Watch('value')\n    onValueChange(): void {\n        this.currentState = EditableComponentState.DISPLAY;\n    }\n\n    private onDisplayContainerClick(): void {\n        if (this.currentState === EditableComponentState.DISPLAY && this.readonly === false) {\n            this.currentState = EditableComponentState.EDIT;\n            this.spiedElement['value'] = this.currentValue;\n            if (this.validateFn) {\n                this.isError = !this.validateFn(this.currentValue);\n            }\n            setTimeout(() => {\n                if (this.type === 'input') {\n                    (this.spiedElement as HTMLWcsInputElement).focus();\n                } else if (this.type === 'textarea') {\n                    (this.spiedElement as HTMLWcsTextareaElement).fitContent();\n                    (this.spiedElement as HTMLWcsTextareaElement).focus();\n                }\n            }, DELAY_BEFORE_FOCUS)\n        }\n    }\n\n    private getReadonlySvgIcon() {\n        return <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"26\" height=\"24\" viewBox=\"0 0 27 25\"\n                    class=\"readonly-icon\">\n            <path d=\"M26.79,25.05H1.21a.73.73,0,0,0,0,1.45H26.79a.73.73,0,0,0,0-1.45Z\"\n                  transform=\"translate(-0.5 -1.5)\"/>\n            <path\n                d=\"M19.8,8.87h-.61V6.73a5.23,5.23,0,0,0-10.46,0V8.87H8.2a1.63,1.63,0,0,0-1.63,1.62V21.32A1.62,1.62,0,0,0,8.2,22.94H19.8a1.62,1.62,0,0,0,1.63-1.62V10.49A1.63,1.63,0,0,0,19.8,8.87ZM10.93,6.73a3,3,0,1,1,6.06,0V8.87H10.93Zm3,14.15a5,5,0,1,1,5-5A5,5,0,0,1,14,20.88Z\"\n                transform=\"translate(-0.5 -1.5)\"/>\n            <path\n                d=\"M14,12.62a3.29,3.29,0,1,0,3.29,3.29A3.29,3.29,0,0,0,14,12.62Zm0,4.75a1.47,1.47,0,1,1,1.47-1.46A1.46,1.46,0,0,1,14,17.37Z\"\n                transform=\"translate(-0.5 -1.5)\"/>\n        </svg>;\n    }\n\n    private formatValues() {\n        let formattedValue = this.value;\n        let formattedCurrentValue = this.currentValue;\n        if (this.formatFn) {\n            formattedValue = this.formatFn(this.value);\n            formattedCurrentValue = this.formatFn(this.currentValue);\n        }\n        if (Array.isArray(this.value)) {\n            formattedValue = this.value.join(', ');\n        }\n        if (Array.isArray(this.currentValue)) {\n            formattedCurrentValue = this.currentValue.join(', ');\n        }\n        return {\n            formattedValue: (formattedValue ? (<span>{formattedValue}</span>) : (<span></span>)),\n            formattedValueText: formattedValue,\n            formattedCurrentValue: (formattedCurrentValue ? (<span>{formattedCurrentValue}</span>) : (<span></span>))\n        };\n    }\n    \n    render(): any {\n        const {formattedValue, formattedValueText, formattedCurrentValue} = this.formatValues();\n        return (\n            <Host>\n                <div class=\"label\">{this.label}</div>\n                <button\n                    type=\"button\"\n                    class={'display-container ' + (this.currentState !== EditableComponentState.DISPLAY ? 'display-none' : '')}\n                    onClick={() => this.onDisplayContainerClick()}\n                    ref={(el) => this.editModeBtn = el}\n                    aria-label={`${EDIT_ARIA_LABEL} ${this.label} ${formattedValueText}`}\n                >\n                    {formattedValue}\n                    <wcs-mat-icon icon=\"edit\" size=\"s\"></wcs-mat-icon>\n                    {this.readonly ? this.getReadonlySvgIcon() : null}\n                </button>\n                <div\n                    class={'load-container ' + (this.currentState !== EditableComponentState.LOAD ? 'display-none' : '')}>\n                    {formattedCurrentValue}\n                    <wcs-spinner></wcs-spinner>\n                </div>\n                <wcs-form-field is-error={this.isError}\n                                class={'edit-container ' + (this.currentState !== EditableComponentState.EDIT ? 'display-none' : '')}\n                >\n                    <wcs-label class=\"visually-hidden\">{this.label}</wcs-label>\n                    <slot/>\n                    {\n                        this.isError && this.errorMsg\n                            ? <wcs-error>{this.errorMsg}</wcs-error>\n                            : null\n                    }\n                </wcs-form-field>\n            </Host>\n        );\n    }\n}\n"],"mappings":"yHAsBO,MAAMA,EAA6B,CAAC,IAAK,K,SAIhCC,EAAuBC,GAEnC,OAAOF,EAA2BG,SAASD,EAC/C,CC7BA,MAAME,EAAmB,mnLACzB,MAAAC,EAAeD,ECwBf,IAAKE,GAAL,SAAKA,GACDA,IAAA,wBACAA,IAAA,kBACAA,IAAA,iBACH,EAJD,CAAKA,MAAsB,KAS3B,MAAMC,EAAkB,SAIxB,MAAMC,EAAqB,G,MA+DdC,EAAa,M,8DAEdC,KAAAC,aAA4B,KA8C5BD,KAAAE,aAAoB,K,kBAzC4BN,EAAuBO,Q,UAI7C,Q,mCAaW,M,qFAgBlB,K,UAIyB,I,aAEhB,K,CAIpC,iBAAAC,GACI,IAAIb,EAAuBS,KAAKR,MAAO,CACnCa,QAAQC,KAAK,gDAAgDN,KAAKR,0BAA0BF,EAA2BiB,KAAK,UAC5HP,KAAKR,KAAO,G,CAEhBQ,KAAKE,aAAeF,KAAKQ,K,CAG7B,gBAAAC,GACI,MAAMC,EAAoBV,KAAKW,GAAGC,WAAWC,cAAc,QAA4BH,mBACvF,OAAQV,KAAKc,MACT,IAAK,QACDd,KAAKe,cAAcL,GACnB,MACJ,IAAK,WACDV,KAAKgB,iBAAiBN,GACtB,MACJ,IAAK,SACDV,KAAKiB,eAAeP,GACpB,M,CAKZ,oBAAAQ,GACIlB,KAAKmB,mC,CAGD,qBAAAC,CAAsBC,GAC1B,MAAMC,EACDtB,KAAKc,OAAS,YAAcd,KAAKc,OAAS,SACxCS,EAAWF,IAAUA,EAAMG,QAC5BD,EAAWF,GAEjB,GAAIC,EAA0B,CAC1BtB,KAAKyB,kB,CAET,GAAIC,EAAYL,GAAQ,CACpBrB,KAAK2B,gB,EAIL,kBAAAC,CAAmBP,GACvBA,EAAMQ,2BACN,MAAMrB,EAAQR,KAAKc,OAAS,SAAWO,EAAMS,OAAOtB,MAAQa,EAAMS,OAAOC,OAAOvB,MAChFR,KAAKE,aAAeM,EACpB,GAAIR,KAAKgC,WAAY,CACjBhC,KAAKiC,SAAWjC,KAAKgC,WAAWhC,KAAKE,a,EAIrC,iCAAAiB,G,WACJe,EAAAlC,KAAKC,gBAAY,MAAAiC,SAAA,SAAAA,EAAEC,oBAAoB,UAAWnC,KAAKoC,yBACvDC,EAAArC,KAAKC,gBAAY,MAAAoC,SAAA,SAAAA,EAAEF,oBAAoB,WAAYnC,KAAKsC,6BACxDC,EAAAvC,KAAKC,gBAAY,MAAAsC,SAAA,SAAAA,EAAEJ,oBAAoB,YAAanC,KAAKsC,2B,CAGrD,aAAAvB,CAAcL,GAClB,MAAM8B,EAAU9B,EAAiB+B,QAAOC,GAC7BA,EAAEC,UAAY,cACtB,GACH,IAAKH,EAAS,MAAM,IAAII,MAAM,8DAC9B5C,KAAKC,aAAeuC,EACpBxC,KAAK6C,wBAAwB7C,KAAKC,cAClCD,KAAK8C,kBAAkB9C,KAAKC,a,CAGxB,gBAAAe,CAAiBN,GACrB,MAAM8B,EAAU9B,EAAiB+B,QAAOC,GAC7BA,EAAEC,UAAY,iBACtB,GACH,IAAKH,EAAS,MAAM,IAAII,MAAM,iEAC9B5C,KAAKC,aAAeuC,EACpBxC,KAAK6C,wBAAwB7C,KAAKC,cAClCD,KAAK8C,kBAAkB9C,KAAKC,a,CAGxB,cAAAgB,CAAeP,GACnB,MAAM8B,EAAU9B,EAAiB+B,QAAOC,GAC7BA,EAAEC,UAAY,eACtB,GACH,IAAKH,EAAS,MAAM,IAAII,MAAM,+DAC9B5C,KAAKC,aAAeuC,EACpBxC,KAAK+C,yBAAyB/C,KAAKC,cACnCD,KAAK8C,kBAAkB9C,KAAKC,a,CASxB,wBAAA8C,CAAyBC,GAC7BhD,KAAKsC,2BAA6BtC,KAAK4B,mBAAmBqB,KAAKjD,MAC/DgD,EAAIE,iBAAiB,YAAalD,KAAKsC,2B,CAQnC,uBAAAO,CAAwBG,GAC5BhD,KAAKsC,2BAA6BtC,KAAK4B,mBAAmBqB,KAAKjD,MAC/DgD,EAAIE,iBAAiB,WAAYlD,KAAKsC,2B,CAQlC,iBAAAQ,CAAkBE,GACtBhD,KAAKoC,uBAAyBpC,KAAKoB,sBAAsB6B,KAAKjD,MAC9DgD,EAAIE,iBAAiB,UAAWlD,KAAKoC,uB,CAGjC,gBAAAe,GACJC,YAAW,K,OACPlB,EAAAlC,KAAKqD,eAAW,MAAAnB,SAAA,SAAAA,EAAEoB,OAAO,GAC1BxD,E,CAGC,gBAAA2B,GACJ,GAAIzB,KAAKuD,eAAiB3D,EAAuB4D,KAAM,CACnD,GAAIxD,KAAKQ,QAAUR,KAAKE,aAAc,CAClCF,KAAKuD,aAAe3D,EAAuBO,QAC3CH,KAAKmD,kB,KACF,CACHnD,KAAKiC,QAAUjC,KAAKgC,YAAchC,KAAKgC,WAAWhC,KAAKE,cAAgB,MACvE,IAAKF,KAAKiC,QAAS,CACfjC,KAAKuD,aAAe3D,EAAuB6D,KAC3CzD,KAAK0D,UAAUC,KAAK,CAChBC,SAAU5D,KAAKE,aACf2D,eAAgB,IAAM7D,KAAK8D,+BAC3BC,aAAc,IAAM/D,KAAK+D,gB,IAOrC,cAAApC,GACJ3B,KAAKE,aAAeF,KAAKQ,MACzBR,KAAKuD,aAAe3D,EAAuBO,QAC3CH,KAAKiC,QAAU,MACfjC,KAAKmD,kB,CAGT,4BAAAW,GACI,GAAI9D,KAAKuD,eAAiB3D,EAAuB6D,KAAM,CACnDzD,KAAKQ,MAAQR,KAAKE,aAClBF,KAAKuD,aAAe3D,EAAuBO,QAC3CH,KAAKmD,kB,KACF,CACH,MAAM,IAAIP,MAAM,qCAAuChD,EAAuBI,KAAKuD,cAAgB,S,EAQ3G,kBAAAS,CAAmB3C,GAEf,GAAI4C,EAAa5C,IAAUA,EAAMS,SAAW,IAAMoC,EAAmB7C,EAAOrB,KAAKW,IAAK,CAClF,GAAIX,KAAKuD,eAAiB3D,EAAuB4D,KAAM,CACnD,GAAIxD,KAAKiC,QAAS,CACdjC,KAAK2B,gB,KACF,CACH3B,KAAKyB,kB,IAWrB,YAAAsC,GACI/D,KAAK2B,gB,CAIT,aAAAwC,GACInE,KAAKuD,aAAe3D,EAAuBO,O,CAGvC,uBAAAiE,GACJ,GAAIpE,KAAKuD,eAAiB3D,EAAuBO,SAAWH,KAAKqE,WAAa,MAAO,CACjFrE,KAAKuD,aAAe3D,EAAuB4D,KAC3CxD,KAAKC,aAAa,SAAWD,KAAKE,aAClC,GAAIF,KAAKgC,WAAY,CACjBhC,KAAKiC,SAAWjC,KAAKgC,WAAWhC,KAAKE,a,CAEzCkD,YAAW,KACP,GAAIpD,KAAKc,OAAS,QAAS,CACtBd,KAAKC,aAAqCqD,O,MACxC,GAAItD,KAAKc,OAAS,WAAY,CAChCd,KAAKC,aAAwCqE,aAC7CtE,KAAKC,aAAwCqD,O,IAEnDxD,E,EAIH,kBAAAyE,GACJ,OAAOC,EAAA,OAAKC,MAAM,6BAA6BC,MAAM,KAAKC,OAAO,KAAKC,QAAQ,YAClEC,MAAM,iBACdL,EAAA,QAAMM,EAAE,mEACFC,UAAU,yBAChBP,EAAA,QACIM,EAAE,oQACFC,UAAU,yBACdP,EAAA,QACIM,EAAE,2HACFC,UAAU,yB,CAId,YAAAC,GACJ,IAAIC,EAAiBjF,KAAKQ,MAC1B,IAAI0E,EAAwBlF,KAAKE,aACjC,GAAIF,KAAKmF,SAAU,CACfF,EAAiBjF,KAAKmF,SAASnF,KAAKQ,OACpC0E,EAAwBlF,KAAKmF,SAASnF,KAAKE,a,CAE/C,GAAIkF,MAAMC,QAAQrF,KAAKQ,OAAQ,CAC3ByE,EAAiBjF,KAAKQ,MAAMD,KAAK,K,CAErC,GAAI6E,MAAMC,QAAQrF,KAAKE,cAAe,CAClCgF,EAAwBlF,KAAKE,aAAaK,KAAK,K,CAEnD,MAAO,CACH0E,eAAiBA,EAAkBT,EAAA,YAAOS,GAA2BT,EAAA,aACrEc,mBAAoBL,EACpBC,sBAAwBA,EAAyBV,EAAA,YAAOU,GAAkCV,EAAA,a,CAIlG,MAAAe,GACI,MAAMN,eAACA,EAAcK,mBAAEA,EAAkBJ,sBAAEA,GAAyBlF,KAAKgF,eACzE,OACIR,EAACgB,EAAI,CAAAC,IAAA,4CACDjB,EAAA,OAAAiB,IAAA,2CAAKZ,MAAM,SAAS7E,KAAK0F,OACzBlB,EAAA,UAAAiB,IAAA,2CACI3E,KAAK,SACL+D,MAAO,sBAAwB7E,KAAKuD,eAAiB3D,EAAuBO,QAAU,eAAiB,IACvGwF,QAAS,IAAM3F,KAAKoE,0BACpBwB,IAAMjF,GAAOX,KAAKqD,YAAc1C,EAAE,aACtB,GAAGd,KAAmBG,KAAK0F,SAASJ,KAE/CL,EACDT,EAAA,gBAAAiB,IAAA,2CAAcI,KAAK,OAAOrG,KAAK,MAC9BQ,KAAKqE,SAAWrE,KAAKuE,qBAAuB,MAEjDC,EAAA,OAAAiB,IAAA,2CACIZ,MAAO,mBAAqB7E,KAAKuD,eAAiB3D,EAAuB6D,KAAO,eAAiB,KAChGyB,EACDV,EAAA,eAAAiB,IAAA,8CAEJjB,EAAA,kBAAAiB,IAAA,sDAA0BzF,KAAKiC,QACf4C,MAAO,mBAAqB7E,KAAKuD,eAAiB3D,EAAuB4D,KAAO,eAAiB,KAE7GgB,EAAA,aAAAiB,IAAA,2CAAWZ,MAAM,mBAAmB7E,KAAK0F,OACzClB,EAAA,QAAAiB,IAAA,6CAEIzF,KAAKiC,SAAWjC,KAAK8F,SACftB,EAAA,iBAAYxE,KAAK8F,UACjB,M"}

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

@@ -1,2 +0,0 @@
-import{r as s,c as e,h as t,H as a}from"./p-32e583ea.js";const o=":host{display:block}:host([hidden]){display:none}";const d=o;const n=class{constructor(t){s(this,t);this.tabLoaded=e(this,"tabLoaded",7);this.header=undefined;this.itemKey=undefined}componentDidLoad(){this.tabLoaded.emit()}render(){return t(a,{key:"794409fa3f716ebb644a961702f98908d396c9e2",slot:"wcs-tab",role:"tabpanel"},t("slot",{key:"9d98f7701d339eb5a1c3a9680595d7e5e88beba6"}))}};n.style=d;export{n as wcs_tab};
-//# sourceMappingURL=p-ad5192cd.entry.js.map

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

@@ -1,2 +0,0 @@
-import{r as t,h as i,H as n,g as e}from"./p-32e583ea.js";import{i as o,a,s}from"./p-52d77e1f.js";const r=':host{display:flex;flex-direction:column;justify-content:center}:host .size-s{font-size:18px !important}:host .size-m{font-size:24px !important}:host .size-l{font-size:36px !important}:host .size-xl{font-size:48px !important}:host .material-icons{font-family:"Material Icons";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}:host .material-icons-outlined{font-family:"Material Icons Outlined";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}:host .material-icons-two-tone{--google-font-color-materialiconstwotone:none;font-family:"Material Icons Two Tone";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}:host .material-icons-round{font-family:"Material Icons Round";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}:host .material-icons-sharp{font-family:"Material Icons Sharp";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}';const l=r;const f={filled:"material-icons",outlined:"material-icons-outlined",twotone:"material-icons-two-tone",rounded:"material-icons-round",sharp:"material-icons-sharp"};const c=["title"];const m=class{constructor(i){t(this,i);this.inheritedAttributes={};this.icon=undefined;this.size="m";this.family="filled"}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},o(this.el)),a(this.el,c))}async setAriaAttribute(t,i){s(this.nativeIcon,t,i)}render(){return i(n,{key:"57b0feb64492a614f69e255808dd5ae511e6b1f2"},i("i",Object.assign({key:"57475c2aaf39a6f719fc65a5c58f14df97c49db0","aria-hidden":"true",class:f[this.family]+" size-"+this.size,ref:t=>this.nativeIcon=t},this.inheritedAttributes),this.icon))}get el(){return e(this)}};m.style=l;export{m as wcs_mat_icon};
-//# sourceMappingURL=p-b28b2fba.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["matIconCss","WcsMatIconStyle0","ICON_FAMILY_CLASS_NAME","filled","outlined","twotone","rounded","sharp","MAT_ICON_INHERITED_ATTRS","MatIcon","this","inheritedAttributes","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","setAriaAttribute","attr","value","setOrRemoveAttribute","nativeIcon","render","h","Host","key","class","family","size","ref","icon"],"sources":["src/components/mat-icon/mat-icon.scss?tag=wcs-mat-icon&encapsulation=shadow","src/components/mat-icon/mat-icon.tsx"],"sourcesContent":["@use 'mat-icon-google-stylesheets';\n\n:host {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    .size-s {\n        font-size: 18px !important;\n    }\n\n    .size-m {\n        font-size: 24px !important;\n    }\n\n    .size-l {\n        font-size: 36px !important;\n    }\n\n    .size-xl {\n        font-size: 48px !important;\n    }\n\n    @include mat-icon-google-stylesheets.material-icons-classes\n}\n","import { Component, ComponentInterface, Element, h, Host, Method, Prop } from '@stencil/core';\nimport { MaterialIconFamily, MaterialIconSize } from './mat-icon-interface';\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst ICON_FAMILY_CLASS_NAME: Record<MaterialIconFamily, string> = {\n    filled: 'material-icons',\n    outlined: 'material-icons-outlined',\n    twotone: 'material-icons-two-tone',\n    rounded: 'material-icons-round',\n    sharp: 'material-icons-sharp'\n}\n\nconst MAT_ICON_INHERITED_ATTRS = ['title'];\n\n/**\n * A component used to display a [Material Icon](https://fonts.google.com/icons?icon.set=Material+Icons). Can be useful when used in wcs-grid or in a wcs-button.\n */\n@Component({\n    tag: 'wcs-mat-icon',\n    styleUrl: 'mat-icon.scss',\n    shadow: true\n})\nexport class MatIcon implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeIcon!: HTMLElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /**\n     * Use the icon name from Material Icons\n     */\n    @Prop() icon: string;\n    /**\n     * Size of the icon\n     */\n    @Prop() size: MaterialIconSize = 'm';\n    /**\n     * Family of the icon\n     */\n    @Prop() family: MaterialIconFamily = 'filled';\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, MAT_ICON_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeIcon, attr, value);\n    }\n\n    render() {\n        return (\n            <Host>\n                <i aria-hidden=\"true\"\n                   class={ICON_FAMILY_CLASS_NAME[this.family] + ' size-' + this.size}\n                   ref={(el) => (this.nativeIcon = el)}\n                   {...this.inheritedAttributes}>\n                    {this.icon}\n                </i>\n            </Host>\n        );\n    }\n}\n"],"mappings":"iGAAA,MAAMA,EAAa,ozDACnB,MAAAC,EAAeD,ECIf,MAAME,EAA6D,CAC/DC,OAAQ,iBACRC,SAAU,0BACVC,QAAS,0BACTC,QAAS,uBACTC,MAAO,wBAGX,MAAMC,EAA2B,CAAC,S,MAUrBC,EAAO,M,yBAGRC,KAAAC,oBAA4C,G,8BASnB,I,YAII,Q,CAErC,iBAAAC,GACIF,KAAKC,oBAAmBE,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsBL,KAAKM,KAC3BC,EAAkBP,KAAKM,GAAIR,G,CAKtC,sBAAMU,CAAiBC,EAAyBC,GAC5CC,EAAqBX,KAAKY,WAAYH,EAAMC,E,CAGhD,MAAAG,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,4CACDF,EAAA,IAAAX,OAAAC,OAAA,CAAAY,IAAA,yDAAe,OACZC,MAAOzB,EAAuBQ,KAAKkB,QAAU,SAAWlB,KAAKmB,KAC7DC,IAAMd,GAAQN,KAAKY,WAAaN,GAC5BN,KAAKC,qBACPD,KAAKqB,M"}

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

@@ -1,2 +0,0 @@
-import{r as e,h as b,H as s}from"./p-32e583ea.js";const a=class{constructor(b){e(this,b)}render(){return b(s,{key:"a051b09993d67bf56b087d86ba433caf1bdbb7a6",slot:"label"},b("slot",{key:"6044b728151fd48878f555d3db3e0754f31b7e51"}))}};export{a as wcs_field_label};
-//# sourceMappingURL=p-c211a5d1.entry.js.map

package/dist/wcs/p-c5bad0b8.js

@@ -1,2 +0,0 @@
-import{h as e,r as a,c as i,H as t,g as s}from"./p-32e583ea.js";import{i as n,a as r,s as c}from"./p-52d77e1f.js";const o=(e,a)=>{switch(e){case"next":return a?"Dernière page":"Page suivante";case"previous":default:return a?"Première page":"Page précédente"}};const g=({active:a,order:i,double:t=false})=>e("wcs-button",{mode:"clear",shape:"square",size:"s",disabled:!a,title:o(i,t)},e("svg",{style:{cursor:"pointer"},"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",width:"24",height:"20",viewBox:"0 0 24 20"},e("style",{type:"text/css"},`\n              .arrow-group {\n                  transform-origin: 50% 51%;\n                  transition: transform 175ms ease-in-out;\n              }\n              .arrow {\n                  transition: fill 175ms ease-in-out;\n                  fill: var(--wcs-grid-pagination-arrow-color-inactive, var(--wcs-button-color));\n              }\n              .second-arrow {\n                  transform: translateY(-8px);\n              }\n              .next {\n                  transform: rotate(90deg);\n              }\n              .previous {\n                  transform: rotate(-90deg);\n              }\n              .active {\n                  fill: var(--wcs-grid-pagination-arrow-color-active, var(--wcs-button-color));\n              }\n          `),e("g",{fill:"none",class:i+" arrow-group"},e("path",{class:(a?"active":"")+" arrow",d:"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"}),e("path",{d:"M0 0h24v24H0z",fill:"none"})),t?e("g",{fill:"none",class:i+" arrow-group"},e("path",{class:(a?"active":"")+" arrow second-arrow",d:"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"}),e("path",{d:"M0 0h24v24H0z",fill:"none"})):""));const d=":host{display:block;margin-top:var(--wcs-grid-pagination-margin-top);--wcs-grid-pagination-color:var(--wcs-semantic-color-text-primary);--wcs-grid-pagination-font-size:var(--wcs-semantic-font-size-label-2);--wcs-grid-pagination-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-grid-pagination-gap:var(--wcs-semantic-spacing-base);--wcs-grid-pagination-page-size-gap:var(--wcs-semantic-spacing-base);--wcs-grid-pagination-counter-gap:var(--wcs-semantic-spacing-small);--wcs-grid-pagination-margin-top:var(--wcs-semantic-spacing-large);--wcs-grid-pagination-arrow-color-inactive:unset;--wcs-grid-pagination-arrow-color-active:unset;}.container{display:grid;gap:var(--wcs-grid-pagination-gap);grid-template-columns:auto auto auto;justify-content:space-between;align-items:center;color:var(--wcs-grid-pagination-color);font-size:var(--wcs-grid-pagination-font-size);font-weight:var(--wcs-grid-pagination-font-weight)}.available-page-sizes{width:auto}.page-management,.page-size,.items-count{display:flex;align-items:center}.page-size{gap:var(--wcs-grid-pagination-page-size-gap)}.page-management{margin:0;padding:0;list-style-type:none}.pagination-arrow{display:flex}.pagination-counter{padding:0 var(--wcs-grid-pagination-counter-gap)}.pagination-counter span{white-space:nowrap}wcs-select.available-page-sizes{--wcs-select-control-height:var(--wcs-semantic-size-s)}";const l=d;const p=["tabindex","title"];const h=class{constructor(e){a(this,e);this.wcsGridPaginationChange=i(this,"wcsGridPaginationChange",7);this.inheritedAttributes={};this.availablePageSizes=[10,20,50];this.currentPage=h.INDEX_FIRST_PAGE;this.pageSize=this.availablePageSizes[0];this.itemsCount=0;this.pageCount=1}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},n(this.el)),r(this.el,p))}async setAriaAttribute(e,a){c(this.nativeNav,e,a)}getWcsGrid(){return this.el.parentElement.tagName==="WCS-GRID"?this.el.parentElement:undefined}lastPage(){this.currentPage=this.pageCount-1;this.emitPaginationChange();this.focusFirstGridCell()}nextPage(){if(this.canGoToNextPage()){this.currentPage++;this.emitPaginationChange();this.focusFirstGridCell()}}canGoToNextPage(){return this.currentPage+1<this.pageCount}previousPage(){if(this.canGoToPreviousPage()){this.currentPage--;this.emitPaginationChange();this.focusFirstGridCell()}}canGoToPreviousPage(){return this.currentPage>0}firstPage(){this.currentPage=0;this.emitPaginationChange();this.focusFirstGridCell()}onChangePageSize(e){this.pageSize=e.detail.value;if(this.currentPage+1>this.pageSize){this.currentPage=0}this.emitPaginationChange();this.focusFirstGridCell()}focusFirstGridCell(){const e=this.getWcsGrid();if(e){requestAnimationFrame((()=>{this.el.blur();e.focusFirstCell()}))}}emitPaginationChange(){this.wcsGridPaginationChange.emit({pagination:{currentPage:this.currentPage,pageSize:this.pageSize,itemsCount:this.itemsCount,pageCount:this.pageCount}})}render(){return e(t,{key:"a51e533835607f4e0b712fe26680704a71f76cd6",slot:"grid-pagination"},e("div",{key:"8ff4ebf10c9e134a8e2fe5d577860a8d6dc9c863",class:"container"},e("div",{key:"a4c6ce48c71fb017dfecdb3f1e8bdc59894e1cbd",class:"page-size"},e("wcs-select",{key:"ae08e610f92bc8084806b25b0b5d7fa95db079ee",placeholder:"Eléments par page",class:"available-page-sizes","aria-labelledby":"elements-per-page-number elements-per-page-text",value:this.pageSize,onWcsChange:this.onChangePageSize.bind(this)},this.availablePageSizes.map((a=>e("wcs-select-option",{value:a},a)))),e("span",{key:"282fd594fa817e9f2535c7403b5e1d66e4a7d030",id:"elements-per-page-number",hidden:true},this.pageSize),e("span",{key:"00ee37d7e5156aa17b234fdf6eec956228064094",id:"elements-per-page-text"},"éléments par page")),e("div",{key:"2ae95e32fc77cafebf0a38eb2746c62d0bd3a537",class:"items-count"},e("span",{key:"5861d6bbf937867579181842dc93ba33290cdfe9"},this.itemsCount," éléments")),e("nav",Object.assign({key:"7d847f316fb18ec7bdc08f7c055115a7391bb25e","aria-label":"pagination",ref:e=>this.nativeNav=e},this.inheritedAttributes),e("ul",{key:"d58fdfcd0a663071a6c94b72acf339a2efd57b5d",class:"page-management"},e("li",{key:"d18366653d52b0e481bfc8bb0d001d72aa5b3b36",class:"pagination-arrow",onClick:this.firstPage.bind(this)},e(g,{key:"ce33b84750ac08bfc50e91378f79ce62c11c9750",active:this.canGoToPreviousPage(),order:"previous",double:true})),e("li",{key:"fb8adcbe91d40dd5d5dd741ec2c69299d971a1ee",class:"pagination-arrow",onClick:this.previousPage.bind(this)},e(g,{key:"b5f8b2804909a64e73e4d26a1faea483a10d2137",active:this.canGoToPreviousPage(),order:"previous"})),e("li",{key:"22742254c3c37ecf900eba29d1605a0420ff11e2",class:"pagination-counter"},e("span",{key:"1f9385fffd93e2eb97d8199b0d7e459e58e01285","aria-label":`Page ${this.currentPage+1} sur ${this.pageCount}`,"aria-current":"page"},this.currentPage+1," / ",this.pageCount)),e("li",{key:"3a408b5b27a1ff8ba7dc52b6027506100e371d49",class:"pagination-arrow",onClick:this.nextPage.bind(this)},e(g,{key:"54e0d638e0645fd46b8a96a99509c8a3dafc842b",active:this.canGoToNextPage(),order:"next"})),e("li",{key:"e91b2f2eeadfeea3ef68fa83c3c3e9fa30c3c17f",class:"pagination-arrow",onClick:this.lastPage.bind(this)},e(g,{key:"14834c2f39a7f1076dfe2660aa2c651d1c52f40e",active:this.canGoToNextPage(),order:"next",double:true}))))))}get el(){return s(this)}};h.INDEX_FIRST_PAGE=0;h.style=l;export{h as G};
-//# sourceMappingURL=p-c5bad0b8.js.map