wcs-core 7.1.0 → 7.2.0

package/dist/wcs/p-21d2f06f.entry.js

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

package/dist/wcs/p-21d2f06f.entry.js.map

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

package/dist/wcs/p-258855a1.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as e,g as a}from"./p-32e583ea.js";import{i as s,a as i,s as o}from"./p-52d77e1f.js";const c=":host{--wcs-nav-background-color:var(--wcs-semantic-color-background-surface-brand);--wcs-nav-width-desktop:calc(12 * var(--wcs-semantic-size-base));--wcs-nav-height-mobile:calc(6 * var(--wcs-semantic-size-base))}nav{background-color:var(--wcs-nav-background-color);display:flex;z-index:1055;flex-direction:column;width:var(--wcs-nav-width-desktop);height:100%}nav div[role=list]{list-style-type:none;display:flex;flex-direction:column;flex-grow:1}@media (max-width: 1199px){nav div[role=list]{flex-direction:row}}@media (max-width: 1199px){nav{flex-direction:row;width:100%;height:var(--wcs-nav-height-mobile)}}@media (max-width: 1199px){::slotted(wcs-nav-item){flex:1}}@media (min-width: 1200px){slot[name=bottom],wcs-nav-item:not([slot=bottom])+wcs-nav-item[slot=bottom]{display:block;margin-top:auto}}";const n=c;const r=["title"];const l=class{constructor(e){t(this,e);this.inheritedAttributes={}}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},s(this.el)),i(this.el,r))}async setAriaAttribute(t,e){o(this.nativeNav,t,e)}render(){return e("nav",Object.assign({key:"010b8847c02ed7e6c9f3112f486279709f75fbb0",role:"navigation",class:"wcs-nav-container",ref:t=>this.nativeNav=t},this.inheritedAttributes),e("div",{key:"35117f4736ebeedc66db2c883eeb6a9b570fcc25",role:"list"},e("slot",{key:"a08aa2b168519ce86b6bfbabe501f38bfc55c62b"}),e("slot",{key:"0f2f00d3bf339128d64cb2b61eb7029d3a0ce035",name:"bottom"})))}get el(){return a(this)}};l.style=n;export{l as wcs_nav};
-//# sourceMappingURL=p-258855a1.entry.js.map

package/dist/wcs/p-258855a1.entry.js.map

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

package/dist/wcs/p-2adf00be.entry.js

@@ -1,2 +0,0 @@
-import{r as s,c as t,h as a,H as e,g as r}from"./p-32e583ea.js";import{i as c,a as o,s as i}from"./p-52d77e1f.js";const n=':host{--wcs-tabs-indicator-height:calc(var(--wcs-semantic-size-base) / 2);--wcs-tabs-indicator-background-color:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-tabs-indicator-border-radius:var(--wcs-semantic-border-radius-full);--wcs-tabs-color-default:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-tabs-color-hover:var(--wcs-semantic-color-foreground-action-secondary-hover);--wcs-tabs-color-press:var(--wcs-semantic-color-foreground-action-secondary-press);--wcs-tabs-color-selected:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-tabs-background-color-focus:var(--wcs-semantic-color-background-action-secondary-focus);--wcs-tabs-background-color-hover:var(--wcs-semantic-color-background-action-secondary-hover);--wcs-tabs-background-color-press:var(--wcs-semantic-color-background-action-secondary-press);--wcs-tabs-border-radius:var(--wcs-semantic-border-radius-base);--wcs-tabs-border-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-tabs-font-weight-default:var(--wcs-semantic-font-weight-roman);--wcs-tabs-font-weight-selected:var(--wcs-semantic-font-weight-roman);--wcs-tabs-padding-top:var(--wcs-semantic-spacing-base);--wcs-tabs-padding-right:var(--wcs-semantic-spacing-large);--wcs-tabs-padding-bottom:calc(var(--wcs-semantic-spacing-base) + var(--wcs-tabs-indicator-height));--wcs-tabs-padding-left:var(--wcs-semantic-spacing-large);--wcs-tabs-gutter-border-width:var(--wcs-semantic-border-width-default);--wcs-tabs-gutter-background-color:var(--wcs-semantic-color-border-secondary);--wcs-tabs-headers-border-bottom:var(--wcs-tabs-gutter-border-width) solid var(--wcs-tabs-gutter-background-color);--wcs-tabs-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);display:block}:host([align=start]) .wcs-tabs-headers{justify-content:start}:host([align=end]) .wcs-tabs-headers{justify-content:end}:host([align=center]) .wcs-tabs-headers{justify-content:center}.wcs-tabs-headers{overflow-x:auto;display:flex;flex-direction:row;position:relative}:host([gutter]) .wcs-tabs-headers{border-bottom:var(--wcs-tabs-headers-border-bottom)}.wcs-tab-header{position:relative;padding:var(--wcs-tabs-padding-top) var(--wcs-tabs-padding-right) var(--wcs-tabs-padding-bottom) var(--wcs-tabs-padding-left);border-radius:var(--wcs-tabs-border-radius) var(--wcs-tabs-border-radius) 0 0;display:flex;flex-shrink:0;align-items:center;justify-content:center;cursor:pointer;outline:none;transition:all var(--wcs-tabs-transition-duration) ease-out}.wcs-tab-header span{text-align:center;color:var(--wcs-tabs-color-default);font-size:1rem;font-weight:var(--wcs-tabs-font-weight-default)}.wcs-tab-header:hover{background-color:var(--wcs-tabs-background-color-hover)}.wcs-tab-header:hover span{color:var(--wcs-tabs-color-hover)}.wcs-tab-header:focus-visible>span{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-tabs-border-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:0.1rem}.wcs-tab-header:active{background-color:var(--wcs-tabs-background-color-press)}.wcs-tab-header:active span{color:var(--wcs-tabs-color-press)}.active span{font-weight:var(--wcs-tabs-font-weight-selected);color:var(--wcs-tabs-color-selected)}.active::after{position:absolute;bottom:0;left:0;width:100%;content:"";height:var(--wcs-tabs-indicator-height);background-color:var(--wcs-tabs-indicator-background-color);border-radius:var(--wcs-tabs-indicator-border-radius)}';const d=n;const b=[];const h=class{constructor(a){s(this,a);this.tabChange=t(this,"tabChange",7);this.inheritedAttributes={};this.tabsId=l++;this.align="start";this.selectedIndex=0;this.selectedKey=undefined;this.headersOnly=false;this.gutter=undefined;this.description=undefined;this.headers=[];this.currentActiveTabIndex=0}selectedIndexChanged(s){this.currentActiveTabIndex=s}selectedTabkeyChanged(s){this.updateCurrentActiveIndexByTabKey(s)}emitActiveTabChange(){this.tabChange.emit({tabName:this.headers[this.currentActiveTabIndex],tabIndex:this.currentActiveTabIndex,selectedKey:this.tabs[this.currentActiveTabIndex].itemKey})}updateCurrentActiveIndexByTabKey(s){for(let t=0;t<this.tabs.length;t++){const a=this.tabs[t];if(a.itemKey===s){this.currentActiveTabIndex=t}}}onTabLoaded(){this.refreshHeaders()}componentDidLoad(){this.putTabsInCorrectDivIfTheyAreNot();this.refreshHeaders();if(this.selectedIndex){this.currentActiveTabIndex=this.selectedIndex}if(this.selectedKey){this.updateCurrentActiveIndexByTabKey(this.selectedKey)}}putTabsInCorrectDivIfTheyAreNot(){const s=this.el.shadowRoot.querySelector(".wcs-tabs");if(s.querySelector("slot")===null){Array.from(this.el.querySelectorAll("wcs-tab")).filter((t=>t.parentNode!==s)).forEach((t=>{if(t.parentElement.isEqualNode(this.el)){this.el.removeChild(t);s.appendChild(t)}}))}}handleKeyDown(s,t){var a,e;const r=s.target;switch(s.key){case" ":case"Enter":{this.currentActiveTabIndex=t;this.emitActiveTabChange();s.preventDefault();break}case"ArrowLeft":{if((a=r.previousElementSibling)===null||a===void 0?void 0:a.classList.contains("wcs-tab-header")){r.previousElementSibling.focus();s.preventDefault()}break}case"ArrowRight":{if((e=r.nextElementSibling)===null||e===void 0?void 0:e.classList.contains("wcs-tab-header")){r.nextElementSibling.focus();s.preventDefault()}break}case"Home":{const t=this.el.shadowRoot.querySelector(".wcs-tab-header:first-child");if(t){t.focus();s.preventDefault()}break}case"End":{const t=this.el.shadowRoot.querySelector(".wcs-tab-header:last-child");if(t){t.focus();s.preventDefault()}break}}}refreshHeaders(){this.headers=[];this.tabs.forEach((s=>{this.headers.push(s.getAttribute("header"))}))}get tabs(){var s;const t=this.el.shadowRoot.querySelector(".wcs-tabs");const a=this.el.shadowRoot.querySelectorAll(".wcs-tabs > wcs-tab");return a.length!==0?a:(t===null||t===void 0?void 0:t.querySelector("slot"))?(s=t===null||t===void 0?void 0:t.querySelector("slot"))===null||s===void 0?void 0:s.assignedElements():[]}selectTabAndEmitChangeEvent(s){this.currentActiveTabIndex=s;this.emitActiveTabChange()}componentWillUpdate(){if(!this.headersOnly){this.updateTabVisibility()}else{this.hideAllTabsContent()}}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},c(this.el)),o(this.el,b))}async setAriaAttribute(s,t){i(this.nativeTablist,s,t)}updateTabVisibility(){this.tabs.forEach(((s,t)=>{if(t!==this.currentActiveTabIndex){s.hidden=true}else{s.hidden=false}}))}hideAllTabsContent(){this.tabs.forEach((s=>s.hidden=true))}render(){return a(e,{key:"22e579eee0adc18107ae55e85efc5b9b6eb2f537"},a("div",Object.assign({key:"f4571687ee9f7832b7a8286d21c815a300b4b201",class:"wcs-tabs-headers",role:"tablist",ref:s=>this.nativeTablist=s,"aria-label":this.description},this.inheritedAttributes),this.headers.map(((s,t)=>a("div",{class:"wcs-tab-header "+(this.currentActiveTabIndex===t?"active":""),onClick:()=>this.selectTabAndEmitChangeEvent(t),onKeyDown:s=>this.handleKeyDown(s,t),tabIndex:this.currentActiveTabIndex===t?0:-1,role:"tab",id:`tabs-id-${this.tabsId}-tab-id-${t}`,"aria-controls":`tabs-id-${this.tabsId}-tab-panel-${t}`,"aria-label":s,"aria-selected":this.currentActiveTabIndex===t?"true":"false"},a("span",null,s))))),a("div",{key:"cf1db062352a270f5458f316bc6549a93f5703be",class:"wcs-tabs"},a("slot",{key:"d8f0fad9ab978d34dd76f83f2bdce98a24277371",onSlotchange:()=>this.onTabsSlotChange(),name:"wcs-tab"})))}onTabsSlotChange(){let s=0;this.tabs.forEach((t=>{t.setAttribute("aria-label",this.headers.at(s));t.setAttribute("id",`tabs-id-${this.tabsId}-tab-panel-${s}`);s++}))}get el(){return r(this)}static get watchers(){return{selectedIndex:["selectedIndexChanged"],selectedKey:["selectedTabkeyChanged"]}}};let l=0;h.style=d;export{h as wcs_tabs};
-//# sourceMappingURL=p-2adf00be.entry.js.map

package/dist/wcs/p-2adf00be.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["tabsCss","WcsTabsStyle0","TABS_INHERITED_ATTRS","Tabs","this","inheritedAttributes","tabsId","selectedIndexChanged","newValue","currentActiveTabIndex","selectedTabkeyChanged","updateCurrentActiveIndexByTabKey","emitActiveTabChange","tabChange","emit","tabName","headers","tabIndex","selectedKey","tabs","itemKey","i","length","tab","onTabLoaded","refreshHeaders","componentDidLoad","putTabsInCorrectDivIfTheyAreNot","selectedIndex","tabDiv","el","shadowRoot","querySelector","Array","from","querySelectorAll","filter","node","parentNode","forEach","parentElement","isEqualNode","removeChild","appendChild","handleKeyDown","ev","target","key","preventDefault","_a","previousElementSibling","classList","contains","focus","_b","nextElementSibling","firstTab","lastTab","x","push","getAttribute","tabsEl","assignedElements","selectTabAndEmitChangeEvent","index","componentWillUpdate","headersOnly","updateTabVisibility","hideAllTabsContent","componentWillLoad","Object","assign","inheritAriaAttributes","inheritAttributes","setAriaAttribute","attr","value","setOrRemoveAttribute","nativeTablist","idx","hidden","render","h","Host","class","role","ref","description","map","header","onClick","onKeyDown","evt","id","onSlotchange","onTabsSlotChange","name","tabId","setAttribute","at"],"sources":["src/components/tabs/tabs.scss?tag=wcs-tabs&encapsulation=shadow","src/components/tabs/tabs.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    --wcs-tabs-indicator-height: calc(var(--wcs-semantic-size-base) / 2);\n    --wcs-tabs-indicator-background-color: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-tabs-indicator-border-radius: var(--wcs-semantic-border-radius-full);\n\n    --wcs-tabs-color-default: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-tabs-color-hover: var(--wcs-semantic-color-foreground-action-secondary-hover);\n    --wcs-tabs-color-press: var(--wcs-semantic-color-foreground-action-secondary-press);\n    --wcs-tabs-color-selected: var(--wcs-semantic-color-foreground-action-secondary-default);\n\n    --wcs-tabs-background-color-focus: var(--wcs-semantic-color-background-action-secondary-focus);\n    --wcs-tabs-background-color-hover: var(--wcs-semantic-color-background-action-secondary-hover);\n    --wcs-tabs-background-color-press: var(--wcs-semantic-color-background-action-secondary-press);\n\n    --wcs-tabs-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-tabs-border-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n    --wcs-tabs-font-weight-default: var(--wcs-semantic-font-weight-roman);\n    --wcs-tabs-font-weight-selected: var(--wcs-semantic-font-weight-roman);\n\n    --wcs-tabs-padding-top: var(--wcs-semantic-spacing-base);\n    --wcs-tabs-padding-right: var(--wcs-semantic-spacing-large);\n    --wcs-tabs-padding-bottom: calc(var(--wcs-semantic-spacing-base) + var(--wcs-tabs-indicator-height));\n    --wcs-tabs-padding-left: var(--wcs-semantic-spacing-large);\n\n    --wcs-tabs-gutter-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-tabs-gutter-background-color: var(--wcs-semantic-color-border-secondary);\n    --wcs-tabs-headers-border-bottom: var(--wcs-tabs-gutter-border-width) solid var(--wcs-tabs-gutter-background-color);\n\n    --wcs-tabs-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    display: block;\n}\n\n:host([align=start]) .wcs-tabs-headers {\n    justify-content: start;\n}\n\n:host([align=end]) .wcs-tabs-headers {\n    justify-content: end;\n}\n\n:host([align=center]) .wcs-tabs-headers {\n    justify-content: center;\n}\n\n.wcs-tabs-headers {\n    overflow-x: auto;\n    display: flex;\n    flex-direction: row;\n    position: relative;\n}\n\n:host([gutter]) {\n    .wcs-tabs-headers {\n        border-bottom: var(--wcs-tabs-headers-border-bottom);\n    }\n}\n\n.wcs-tab-header {\n    position: relative;\n\n    padding: var(--wcs-tabs-padding-top) var(--wcs-tabs-padding-right) var(--wcs-tabs-padding-bottom) var(--wcs-tabs-padding-left);\n    border-radius: var(--wcs-tabs-border-radius) var(--wcs-tabs-border-radius) 0 0;\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    outline: none;\n    transition: all var(--wcs-tabs-transition-duration) ease-out;\n\n    span {\n        text-align: center;\n        color: var(--wcs-tabs-color-default);\n        font-size: 1rem;\n        font-weight: var(--wcs-tabs-font-weight-default);\n    }\n\n    &:hover {\n        background-color: var(--wcs-tabs-background-color-hover);\n\n        span {\n            color: var(--wcs-tabs-color-hover);\n        }\n    }\n\n    // TODO : mettre le focus outline sur la wcs-tab-header comme dans figma\n    &:focus-visible > span {\n        @include focus-outline(var(--wcs-tabs-border-color-focus));\n    }\n\n    &:active {\n        background-color: var(--wcs-tabs-background-color-press);\n\n        span {\n            color: var(--wcs-tabs-color-press);\n        }\n    }\n}\n\n\n.active {\n    span {\n        font-weight: var(--wcs-tabs-font-weight-selected);\n        color: var(--wcs-tabs-color-selected);\n    }\n\n    &::after {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: 100%;\n        content: \"\";\n        height: var(--wcs-tabs-indicator-height);\n        background-color: var(--wcs-tabs-indicator-background-color);\n        border-radius: var(--wcs-tabs-indicator-border-radius);\n    }\n}\n","import {\n    Component,\n    Prop,\n    Element,\n    State,\n    ComponentInterface,\n    Event,\n    EventEmitter,\n    Watch,\n    h,\n    Host,\n    Listen, Method\n} from '@stencil/core';\n\nimport { WcsTabsAlignment, WcsTabChangeEvent } from './tabs-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst TABS_INHERITED_ATTRS = [];\n\n/**\n * Tabs component to switch between tab content. Use in conjunction with `wcs-tab`.\n * \n * @cssprop --wcs-tabs-indicator-height - Height of the tabs indicator \n * @cssprop --wcs-tabs-indicator-background-color - Background color of the tabs indicator\n * @cssprop --wcs-tabs-indicator-border-radius - Border radius of the tabs indicator\n * @cssprop --wcs-tabs-color-default - Text color of the tabs\n * @cssprop --wcs-tabs-color-hover - Text color of the tabs when hovered\n * @cssprop --wcs-tabs-color-press - Text color of the tabs when pressed\n * @cssprop --wcs-tabs-color-focus - Text color of the tabs when focused\n * @cssprop --wcs-tabs-color-selected - Text color of the tabs when selected\n * @cssprop --wcs-tabs-background-color-focus - Background color of the tabs when focused\n * @cssprop --wcs-tabs-background-color-hover - Background color of the tabs when hovered\n * @cssprop --wcs-tabs-background-color-press - Background color of the tabs when pressed\n * @cssprop --wcs-tabs-border-radius - Border radius of the tabs\n * @cssprop --wcs-tabs-border-color-focus - Outline color on a focused tab\n * @cssprop --wcs-tabs-font-weight-default - Font weight of the tabs\n * @cssprop --wcs-tabs-font-weight-selected - Font weight of the tabs when selected\n * @cssprop --wcs-tabs-padding-top - Padding top of the tabs\n * @cssprop --wcs-tabs-padding-right - Padding right of the tabs\n * @cssprop --wcs-tabs-padding-bottom - Padding bottom of the tabs\n * @cssprop --wcs-tabs-padding-left - Padding left of the tabs\n * @cssprop --wcs-tabs-headers-border-bottom - Border bottom (gutter) below the tabs\n * @cssprop --wcs-tabs-transition-duration - Transition duration of the tabs\n */\n@Component({\n    tag: 'wcs-tabs',\n    styleUrl: 'tabs.scss',\n    shadow: true,\n})\nexport class Tabs implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLWcsTabsElement;\n    private nativeTablist!: HTMLElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    /**\n     * Tab headers alignment.\n     */\n    @Prop({reflect: true}) align: WcsTabsAlignment = 'start';\n\n    /**\n     * Current selected tab index.\n     * Starts at 0.\n     */\n    @Prop() selectedIndex: number = 0;\n\n    @Prop() selectedKey: any;\n\n    /**\n     * Whether to skip rendering the tabpanel with the content of the selected tab. Use this prop if you plan to\n     * separately render the tab content.\n     */\n    @Prop() headersOnly: boolean = false;\n    /** Determines if tabs header should have a border at the bottom */\n    @Prop({ reflect: true }) gutter: boolean;\n\n    /**\n     * Description is used to provide aria-label for the tabs container which has `role=\"tablist\"`.\n     */\n    @Prop() description: string;\n\n    /**\n     *\n     * Emitted when the selected tab change.\n     */\n    @Event() tabChange!: EventEmitter<WcsTabChangeEvent>;\n\n    @State() private headers: string[] = [];\n\n    @State() private currentActiveTabIndex = 0;\n\n    private tabsId: number = tabsId++;\n\n    @Watch('selectedIndex')\n    selectedIndexChanged(newValue: number) {\n        this.currentActiveTabIndex = newValue;\n    }\n\n    @Watch('selectedKey')\n    selectedTabkeyChanged(newValue: any) {\n        this.updateCurrentActiveIndexByTabKey(newValue);\n    }\n\n    private emitActiveTabChange() {\n        this.tabChange.emit({\n            tabName: this.headers[this.currentActiveTabIndex],\n            tabIndex: this.currentActiveTabIndex,\n            selectedKey: this.tabs[this.currentActiveTabIndex].itemKey\n        });\n    }\n\n    private updateCurrentActiveIndexByTabKey(newValue: any) {\n        for (let i = 0; i < this.tabs.length; i++) {\n            const tab = this.tabs[i];\n            if (tab.itemKey === newValue) {\n                this.currentActiveTabIndex = i;\n            }\n        }\n    }\n\n    @Listen('tabLoaded')\n    onTabLoaded() {\n        this.refreshHeaders();\n    }\n\n    componentDidLoad() {\n        this.putTabsInCorrectDivIfTheyAreNot();\n        this.refreshHeaders();\n        if (this.selectedIndex) {\n            this.currentActiveTabIndex = this.selectedIndex;\n        }\n        if (this.selectedKey) {\n            this.updateCurrentActiveIndexByTabKey(this.selectedKey);\n        }\n    }\n\n    // XXX: Firefox < 63\n    private putTabsInCorrectDivIfTheyAreNot() {\n        const tabDiv = this.el.shadowRoot.querySelector('.wcs-tabs');\n        if (tabDiv.querySelector('slot') === null) {\n            Array.from(this.el.querySelectorAll('wcs-tab'))\n                .filter(node => node.parentNode !== tabDiv)\n                .forEach(tab => {\n                    if (tab.parentElement.isEqualNode(this.el)) {\n                        this.el.removeChild(tab);\n                        tabDiv.appendChild(tab);\n                    }\n                });\n        }\n    }\n\n    handleKeyDown(ev: KeyboardEvent, tabIndex: number) {\n        const target = ev.target as HTMLDivElement;\n        switch (ev.key) {\n            case ' ':\n            case 'Enter': {\n                this.currentActiveTabIndex = tabIndex;\n                this.emitActiveTabChange();\n                ev.preventDefault();\n                break;\n            }\n            case 'ArrowLeft': {\n                if (target.previousElementSibling?.classList.contains('wcs-tab-header')) {\n                    (target.previousElementSibling as HTMLDivElement).focus();\n                    ev.preventDefault();\n                }\n                break;\n            }\n            case 'ArrowRight': {\n                if (target.nextElementSibling?.classList.contains('wcs-tab-header')) {\n                    (target.nextElementSibling as HTMLDivElement).focus();\n                    ev.preventDefault();\n                }\n                break;\n            }\n            case 'Home': {\n                const firstTab = this.el.shadowRoot.querySelector('.wcs-tab-header:first-child');\n                if (firstTab) {\n                    (firstTab as HTMLDivElement).focus();\n                    ev.preventDefault();\n                }\n                break;\n            }\n            case 'End': {\n                const lastTab = this.el.shadowRoot.querySelector('.wcs-tab-header:last-child');\n                if (lastTab) {\n                    (lastTab as HTMLDivElement).focus();\n                    ev.preventDefault();\n                }\n                break;\n            }\n        }\n    }\n\n    private refreshHeaders() {\n        this.headers = [];\n        this.tabs\n            .forEach(x => {\n                this.headers.push(x.getAttribute('header'));\n            });\n    }\n\n    private get tabs() {\n        const tabsEl = this.el.shadowRoot.querySelector('.wcs-tabs');\n        // FIXME: problem with this selector being too greedy in ff < 63\n        const tabs = this.el.shadowRoot.querySelectorAll('.wcs-tabs > wcs-tab');\n\n        return tabs.length !== 0\n            ? tabs\n            : tabsEl?.querySelector('slot')\n                ? tabsEl?.querySelector('slot')?.assignedElements() as unknown as NodeListOf<HTMLWcsTabElement>\n                : [];\n    }\n\n    private selectTabAndEmitChangeEvent(index: number) {\n        this.currentActiveTabIndex = index;\n        this.emitActiveTabChange()\n    }\n\n    componentWillUpdate() {\n        if (!this.headersOnly) {\n            this.updateTabVisibility();\n        } else {\n            this.hideAllTabsContent();\n        }\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, TABS_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeTablist, attr, value);\n    }\n\n    private updateTabVisibility() {\n        this.tabs.forEach((el: HTMLWcsTabElement, idx: number) => {\n            if (idx !== this.currentActiveTabIndex) {\n                el.hidden = true;\n            } else {\n                el.hidden = false;\n            }\n        });\n    }\n\n    private hideAllTabsContent() {\n        this.tabs.forEach((el: HTMLWcsTabElement) => el.hidden = true);\n    }\n\n    render() {\n        return (\n            <Host>\n                <div class=\"wcs-tabs-headers\"\n                     role=\"tablist\"\n                     ref={(el) => (this.nativeTablist = el)}\n                     aria-label={this.description}\n                     {...this.inheritedAttributes}>\n                    {this.headers.map((header, idx) =>\n                        <div class={'wcs-tab-header ' + (this.currentActiveTabIndex === idx ? 'active' : '')}\n                             onClick={() => this.selectTabAndEmitChangeEvent(idx)}\n                             onKeyDown={evt => this.handleKeyDown(evt, idx)}\n                             tabIndex={this.currentActiveTabIndex === idx ? 0 : -1}\n                             role=\"tab\"\n                             id={`tabs-id-${this.tabsId}-tab-id-${idx}`}\n                             // aria-controls refers to ID of the tab panel related to the header\n                             aria-controls={`tabs-id-${this.tabsId}-tab-panel-${idx}`}\n                             aria-label={header}\n                             aria-selected={this.currentActiveTabIndex === idx ? 'true' : 'false'}\n                        >\n                            <span>{header}</span>\n                        </div>\n                    )}\n                </div>\n                <div class=\"wcs-tabs\">\n                    <slot onSlotchange={() => this.onTabsSlotChange()} name=\"wcs-tab\"/>\n                </div>\n            </Host>\n        );\n    }\n\n    /**\n     * Observe when a new tab panel is added to the slot to let's handle accessibility properties for tabs panel:\n     * - id: to let header tab refers it proper panel\n     * - aria-label: take the same name as it's referenced header name\n     * \n     * @private\n     */\n    private onTabsSlotChange() {\n        let tabId = 0;\n        this.tabs.forEach(tab => {\n            tab.setAttribute(\"aria-label\", this.headers.at(tabId));\n            // set an ID to set aria-controls on header tab \n            // (https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-automatic/#:~:text=Refers%20to%20the%20element)\n            tab.setAttribute(\"id\", `tabs-id-${this.tabsId}-tab-panel-${tabId}`);\n            tabId++;\n        });\n    }\n}\n\nlet tabsId = 0;\n"],"mappings":"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"}

package/dist/wcs/p-388e6d75.entry.js

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

package/dist/wcs/p-388e6d75.entry.js.map

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

package/dist/wcs/p-43d70995.entry.js

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

package/dist/wcs/p-43d70995.entry.js.map

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

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

@@ -1 +0,0 @@
-{"version":3,"names":["HorizontalStep","step","checkOnComplete","complete","passed","active","first","disable","onClick","h","role","class","value","style","backgroundColor","text","_","ref","el","setAriaAttribute","shape","mode","disabled","getButtonContent","button","stepButton","size","icon","family","kind","iconName","horizontalStepperCss","WcsHorizontalStepperStyle0","HorizontalStepper","componentWillLoad","this","internalCurrentStepIndex","currentStep","steps","length","Error","onCurrentStepChange","newValue","oldValue","undefined","stepInterval","Math","abs","setProperty","i","setTimeout","removeProperty","previous","navigateToIndex","next","index","direction","_a","_b","render","Host","key","map","isComplete","isDisable","wcsHorizontalStepClick","emit","renderLabels","s","every","isNextPossibleStep","previousStepIsCompleteAndNotActive"],"sources":["src/components/horizontal-stepper/horizontal-step.tsx","src/components/horizontal-stepper/horizontal-stepper.scss?tag=wcs-horizontal-stepper&encapsulation=shadow","src/components/horizontal-stepper/horizontal-stepper.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { HorizontalStepConfig, StepButton } from './horizontal-stepper-interface';\n\ninterface HorizontalStepProps {\n    step: HorizontalStepConfig;\n    checkOnComplete: boolean;\n    complete: boolean;\n    passed: boolean;\n    active: boolean;\n    first: boolean;\n    disable: boolean;\n    onClick: (step: HorizontalStepConfig) => void;\n}\n\nexport const HorizontalStep: FunctionalComponent<HorizontalStepProps> = (\n    {\n        step,\n        checkOnComplete,\n        complete,\n        passed,\n        active,\n        first,\n        disable,\n        onClick\n    }) => {\n    return (\n        /*\n        When using list-style: none in CSS, it removes the semantic of the list in Safari.\n        So we add role=\"list\" manually to provide semantic to screen readers\n        https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html\n        https://css-tricks.com/snippets/css/remove-list-markers-without-affecting-semantics/ \n         */\n        <li role=\"listitem\" class=\"graphic-step\" data-first={first}>\n            {first ? null : (<wcs-progress-bar value={passed ? 100 : 0} aria-hidden=\"true\"></wcs-progress-bar>)}\n            <wcs-button style={{'backgroundColor': 'white'}}\n                        aria-label={step.text}\n                        onClick={_ => onClick(step)}\n                        ref={(el: HTMLWcsButtonElement) => {\n                            active ? el.setAriaAttribute('aria-current', 'step') : el.setAriaAttribute('aria-current', null)\n                        }}\n                        shape=\"round\" mode={(active || complete) && !step.disable ? 'plain' : 'stroked'}\n                        disabled={disable}>\n                {getButtonContent(step.button, checkOnComplete, complete, active)}\n            </wcs-button>\n        </li>\n    );\n}\n\nconst getButtonContent = (stepButton: StepButton, checkOnComplete: boolean, complete: boolean, active: boolean) => {\n    if (checkOnComplete && complete && !active) {\n        return (<wcs-mat-icon size=\"m\" icon=\"done\" family=\"outlined\"></wcs-mat-icon>);\n    }\n    switch (stepButton.kind) {\n        case 'Icon':\n            return (<wcs-mat-icon size=\"m\" icon={stepButton.iconName}\n                                  family={stepButton.family ? stepButton.family : 'outlined'}></wcs-mat-icon>);\n        case 'Text':\n            return (stepButton.text);\n    }\n}\n\n","@import '../../style/focus-outline.scss';\n\n:host {\n    --wcs-horizontal-step-text-color-default: var(--wcs-semantic-color-text-secondary);\n    --wcs-horizontal-step-text-color-active: var(--wcs-semantic-color-foreground-brand);\n    --wcs-horizontal-step-text-color-disabled: var(--wcs-semantic-color-text-disabled);\n\n\n    display: block;\n\n    .steps {\n        list-style: none;\n        margin: 0;\n        padding: 0;\n\n        display: flex;\n        flex-direction: row;\n        flex: 1;\n    }\n\n    .graphic-step {\n        display: flex;\n        position: relative;\n        flex-direction: row;\n        flex: 1;\n        align-items: center;\n\n        wcs-button {\n            z-index: 1;\n            mix-blend-mode: darken;\n        }\n    }\n\n    .graphic-step[data-first] {\n        flex: 0;\n    }\n\n    wcs-progress-bar {\n        --wcs-progress-bar-border-radius: 0;\n        flex: 1;\n        margin: 0 -1px;\n    }\n\n    .label-container {\n        justify-content: space-between;\n        display: flex;\n        flex-direction: row;\n        margin-top: var(--wcs-semantic-spacing-base);\n    }\n\n    .label-container > * {\n        width: 100%;\n        text-align: center;\n        flex: 1;\n        color: var(--wcs-horizontal-step-text-color-default);\n        font-weight: 500;\n\n    }\n\n    .label-container > *[data-disable] {\n        color: var(--wcs-horizontal-step-text-color-disabled);\n    }\n\n    .label-container > *[data-current] {\n        color: var(--wcs-horizontal-step-text-color-active);\n    }\n\n    .label-container > div[data-first] {\n        margin-right: calc(var(--wcs-semantic-size-m, 40px) / 2);\n        text-align: left;\n        flex: 0.5;\n    }\n\n    .label-container > div[data-last] {\n        margin-left: calc(var(--wcs-semantic-size-m, 40px) / 2);\n        text-align: right;\n        flex: 0.5;\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    Watch\n} from '@stencil/core';\nimport { HorizontalStepClickEvent, HorizontalStepConfig, HorizontalStepperMode } from './horizontal-stepper-interface';\nimport { HorizontalStep } from './horizontal-step';\n\n/**\n * The horizontal-stepper is a representation of a user’s progress through a series of discrete steps.\n *\n * @cssprop --wcs-horizontal-step-text-color-default - Text color of the step by default\n * @cssprop --wcs-horizontal-step-text-color-active - Text color of the step when active\n * @cssprop --wcs-horizontal-step-text-color-disabled - Text color of step when disabled\n */\n@Component({\n    tag: 'wcs-horizontal-stepper',\n    styleUrl: 'horizontal-stepper.scss',\n    shadow: true,\n})\nexport class HorizontalStepper implements ComponentInterface {\n    @Element() private el!: HTMLWcsHorizontalStepperElement;\n    /**\n     * index of the active step. The index corresponds to the index of the step in the 'steps' list\n     */\n    @Prop({mutable: true}) currentStep: number = 0;\n    /**\n     * steps to display\n     */\n    @Prop() steps: HorizontalStepConfig[];\n    /**\n     * Specifies if the stepper is in linear mode (the user can only click on the next step)\n     * or non-linear (the user can click on any step)\n     */\n    @Prop() mode: HorizontalStepperMode = 'nonLinear';\n    /**\n     * Specifies whether a check should be displayed when a step is passed.\n     */\n    @Prop() checkOnComplete: boolean;\n    /**\n     * Emits when the user selects a new step.\n     */\n    @Event() wcsHorizontalStepClick!: EventEmitter<HorizontalStepClickEvent>\n\n    /**\n     * Used to know which current step index is selected (component internal calculations mainly for the animation)\n     * @private\n     */\n    @State() private internalCurrentStepIndex: number;\n\n    componentWillLoad(): Promise<void> | void {\n        this.internalCurrentStepIndex = this.currentStep;\n        if (this.steps.length < 1) {\n            throw new Error('You must add at least one step');\n        }\n    }\n\n    @Watch('currentStep')\n    onCurrentStepChange(newValue: number, oldValue: number) {\n        //Check if the function is called before the component has finished its initialization in which case we do nothing\n        if (this.internalCurrentStepIndex !== undefined) {\n            const stepInterval = Math.abs(oldValue - newValue);\n            this.el.style.setProperty('--wcs-progress-bar-animation-duration', 350 / stepInterval + 'ms');\n            if (newValue !== oldValue) {\n                for (let i = 0; i < stepInterval; i++) {\n                    setTimeout(() => {\n                        this.internalCurrentStepIndex -= (oldValue - newValue) > 0 ? 1 : -1;\n                        \n                        if (i === stepInterval - 1) {\n                            this.el.style.removeProperty('--wcs-progress-bar-animation-duration');\n                        }\n                    }, (i * (375 / stepInterval)));\n                }\n            }\n        }\n    }\n\n    @Method()\n    async previous() {\n        this.navigateToIndex(this.internalCurrentStepIndex - 1, 'backward');\n    }\n\n    @Method()\n    async next() {\n        this.navigateToIndex(this.internalCurrentStepIndex + 1, 'forward');\n    }\n\n    private navigateToIndex(index: number, direction: 'backward' | 'forward'): void {\n        if (index >= 0 && index <= this.steps.length - 1) {\n            if (this.steps[index]?.complete || this.steps[index]?.disable) {\n                this.navigateToIndex(index + (direction === 'forward' ? 1 : -1), direction)\n            } else {\n                this.currentStep = index;\n            }\n        }\n    }\n\n    render(): any {\n        return (\n            <Host>\n                {/* \n                When using list-style: none in CSS, it removes the semantic of the list in Safari.\n                So we add role=\"list\" manually to provide semantic to screen readers\n                https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html\n                https://css-tricks.com/snippets/css/remove-list-markers-without-affecting-semantics/ \n                */}\n                <ul role=\"list\" class=\"steps\">\n                    {this.steps.map((step: HorizontalStepConfig, index) =>\n                        (<HorizontalStep step={step}\n                                         passed={index <= this.internalCurrentStepIndex}\n                                         checkOnComplete={this.checkOnComplete}\n                                         complete={this.isComplete(step, index)}\n                                         active={index === this.internalCurrentStepIndex}\n                                         first={index === 0}\n                                         disable={this.isDisable(step, index)}\n                                         onClick={step => this.wcsHorizontalStepClick.emit({step, index})}\n                            />\n                        )\n                    )}\n                </ul>\n                {this.renderLabels()}\n            </Host>\n        );\n    }\n\n    private isComplete(step: HorizontalStepConfig, index: number) {\n        return index <= this.internalCurrentStepIndex || step.complete;\n    }\n\n    private renderLabels() {\n        if (this.steps.map(s => s.text).every(s => !s)) {\n            return null;\n        } else {\n            return <div class=\"label-container\" aria-hidden=\"true\">\n                {this.steps.map((step, index) =>\n                    (<div data-first={index === 0} data-current={index === this.internalCurrentStepIndex && !step.disable}\n                          data-disable={this.isDisable(step, index)} data-last={index === this.steps.length - 1}>\n                        <span>{step.text}</span></div>)\n                )}\n            </div>;\n        }\n    }\n\n    private isDisable(step, index) {\n        return step.disable || (this.mode === 'linear' && (!this.isNextPossibleStep(index) && this.internalCurrentStepIndex < index));\n    }\n\n    private isNextPossibleStep(index) {\n        if (index === 0) return true;\n        if (this.steps[index - 1]?.disable || this.previousStepIsCompleteAndNotActive(index)) return this.isNextPossibleStep(index - 1);\n        return this.internalCurrentStepIndex === index - 1;\n    }\n\n    private previousStepIsCompleteAndNotActive(index) {\n        return this.steps[index - 1]?.complete && index - 1 !== this.internalCurrentStepIndex;\n    }\n}\n"],"mappings":"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"}

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

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

package/dist/wcs/p-5974be61.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=["s","m","l"];function u(t){return l.includes(t)}const h=":host{--wcs-input-icon-color-default:var(--wcs-semantic-color-foreground-brand);--wcs-input-icon-color-focus:var(--wcs-semantic-color-foreground-brand);--wcs-input-icon-color-disabled:var(--wcs-semantic-color-foreground-disabled);--wcs-input-background-color:var(--wcs-semantic-color-background-control-default);--wcs-input-border-radius-left:var(--wcs-semantic-border-radius-base);--wcs-input-border-radius-right:var(--wcs-semantic-border-radius-base);--wcs-input-border-width:var(--wcs-semantic-border-width-default);--wcs-input-border-width-focus:var(--wcs-semantic-border-width-large);--wcs-input-height-l:var(--wcs-semantic-size-l);--wcs-input-height-m:var(--wcs-semantic-size-m);--wcs-input-height-s:var(--wcs-semantic-size-s);--wcs-input-font-size-l:var(--wcs-semantic-font-size-l);--wcs-input-font-size-m:var(--wcs-semantic-font-size-m);--wcs-input-font-size-s:var(--wcs-semantic-font-size-s);--wcs-input-prefix-suffix-background-color:var(--wcs-semantic-color-background-surface-accent-lighter);--wcs-input-prefix-suffix-color:var(--wcs-semantic-color-foreground-on-accent);--wcs-input-prefix-suffix-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-input-prefix-suffix-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-input-border-style-default:solid;--wcs-input-border-style-focus:var(--wcs-semantic-border-style-focus-control);--wcs-input-border-color-default:var(--wcs-semantic-color-border-primary);--wcs-input-border-color-disabled:var(--wcs-semantic-color-border-disabled);--wcs-input-border-color-focus:var(--wcs-semantic-color-border-control-focus);--wcs-input-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);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 p=h;const w=["tabindex","title"];const f=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-${b++}`;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,w));if(!u(this.size)){console.warn(`Invalid size value for wcs-input : "${this.size}". Must be one of "${l.join(", ")}"`);this.size="m"}}connectedCallback(){this.debounceChanged();{document.dispatchEvent(new CustomEvent("wcsInputDidLoad",{detail:this.el}))}}disconnectedCallback(){{document.dispatchEvent(new CustomEvent("wcsInputDidUnload",{detail:this.el}))}}async setBlur(){if(this.nativeInput){this.nativeInput.blur()}}getInputElement(){return Promise.resolve(this.nativeInput)}async setAriaAttribute(t,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:"987bb9b2e0f16edc255e3cd33a92fad04a99369f","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:"395351bfae844314151d7cbdd12f9b4047294b6a",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 b=0;f.style=p;export{f as wcs_input};
-//# sourceMappingURL=p-5974be61.entry.js.map

package/dist/wcs/p-5974be61.entry.js.map

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

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

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

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

package/dist/wcs/p-71db0ed5.entry.js

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

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

@@ -1,2 +0,0 @@
-import{r as o,c,h as a,H as r,g as e}from"./p-32e583ea.js";import{S as n}from"./p-84e22272.js";import{i as s,a as i,s as t}from"./p-52d77e1f.js";const d=":host{display:flex;flex-direction:column;cursor:pointer;--wcs-accordion-panel-color-default:var(--wcs-semantic-color-text-primary);--wcs-accordion-panel-color-highlight:var(--wcs-semantic-color-text-primary);--wcs-accordion-panel-color-hover:var(--wcs-semantic-color-text-primary);--wcs-accordion-panel-color-press:var(--wcs-semantic-color-text-primary);--wcs-accordion-panel-action-color-default:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-accordion-panel-action-color-highlight:var(--wcs-semantic-color-foreground-action-secondary-press);--wcs-accordion-panel-action-color-hover:var(--wcs-semantic-color-foreground-action-secondary-hover);--wcs-accordion-panel-action-color-press:var(--wcs-semantic-color-foreground-action-secondary-press);--wcs-accordion-panel-background-color-default:var(--wcs-semantic-color-background-action-secondary-default);--wcs-accordion-panel-background-color-highlight:var(--wcs-semantic-color-background-action-secondary-press);--wcs-accordion-panel-background-color-hover:var(--wcs-semantic-color-background-action-secondary-hover);--wcs-accordion-panel-background-color-press:var(--wcs-semantic-color-background-action-secondary-press);--wcs-accordion-panel-header-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-accordion-panel-header-font-size:var(--wcs-semantic-font-size-heading-6);--wcs-accordion-panel-header-gap:calc(3 * var(--wcs-semantic-spacing-base));--wcs-accordion-panel-border-radius:var(--wcs-semantic-border-radius-base);--wcs-accordion-panel-border-radius-open:var(--wcs-accordion-panel-border-radius) var(--wcs-accordion-panel-border-radius) 0 0;--wcs-accordion-panel-padding-vertical:var(--wcs-semantic-spacing-large);--wcs-accordion-panel-padding-horizontal:calc(var(--wcs-semantic-spacing-base) * 3);--wcs-accordion-panel-header-border-width:var(--wcs-semantic-border-width-default);--wcs-accordion-panel-border-width:var(--wcs-semantic-border-width-default);--wcs-accordion-panel-border-width-focus:var(--wcs-semantic-border-width-large);--wcs-accordion-panel-border-color:var(--wcs-semantic-color-border-secondary);--wcs-accordion-panel-border-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-accordion-panel-border-style-focus:var(--wcs-semantic-border-style-focus-base);--wcs-accordion-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);border:var(--wcs-accordion-panel-border-width) solid var(--wcs-accordion-panel-border-color);border-radius:var(--wcs-accordion-panel-border-radius)}:host .header{display:flex;align-items:center;justify-content:space-between;gap:var(--wcs-accordion-panel-header-gap);padding:var(--wcs-accordion-panel-padding-vertical) var(--wcs-accordion-panel-padding-horizontal);border-radius:var(--wcs-accordion-panel-border-radius);font-weight:var(--wcs-accordion-panel-header-font-weight);font-size:var(--wcs-accordion-panel-header-font-size);font-family:var(--wcs-font-sans-serif);color:var(--wcs-accordion-panel-color-default);background-color:var(--wcs-accordion-panel-background-color-default);border:none;transition:background-color var(--wcs-accordion-transition-duration)}@media (forced-colors: active){:host .header{border:var(--wcs-accordion-panel-header-border-width) solid ButtonBorder}}:host .header:focus-visible{outline:var(--wcs-accordion-panel-border-width-focus) var(--wcs-accordion-panel-border-style-focus) var(--wcs-accordion-panel-border-color-focus)}:host .header:hover{cursor:pointer;color:var(--wcs-accordion-panel-color-hover);background-color:var(--wcs-accordion-panel-background-color-hover)}:host .header:hover .header-action{color:var(--wcs-accordion-panel-action-color-hover)}:host .header:hover .header-action .arrow{fill:var(--wcs-accordion-panel-action-color-hover)}:host .header:active{background-color:var(--wcs-accordion-panel-background-color-press)}:host .header-action{display:flex;align-items:center;user-select:none;color:var(--wcs-accordion-panel-action-color-default)}:host .header-action .arrow{fill:var(--wcs-accordion-panel-action-color-default)}:host .content{display:none}:host([open]){margin-bottom:0;}:host([open]) .header{border-radius:var(--wcs-accordion-panel-border-radius-open)}:host([open]) .content{display:block}:host([open]):host([highlight]){}:host([open]):host([highlight]) .header{background-color:var(--wcs-accordion-panel-background-color-highlight);color:var(--wcs-accordion-panel-color-highlight)}:host([open]):host([highlight]) .header-action{color:var(--wcs-accordion-panel-action-color-highlight)}:host([open]):host([highlight]) .header-action .arrow{fill:var(--wcs-accordion-panel-action-color-highlight)}";const l=d;const h=["tabindex","title"];const p=class{constructor(a){o(this,a);this.wcsOpenChange=c(this,"wcsOpenChange",7);this.inheritedAttributes={};this.open=false;this.hideActionText=false;this.highlight=false;this.groupContentWithHeader=false}openChange(o){this.wcsOpenChange.emit(o)}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},s(this.el)),i(this.el,h))}async setAriaAttribute(o,c){t(this.nativeButton,o,c)}async close(){this.open=false}render(){return a(r,{key:"c13006bc732e84e6b20ae5c8fd8592f8d7519563"},a("button",Object.assign({key:"ccd0ad94f0ee440c57493b0036395ca6c8f94d10","aria-expanded":this.open?"true":"false","aria-controls":"content",class:"header",ref:o=>this.nativeButton=o,onClick:()=>this.open=!this.open},this.inheritedAttributes),a("slot",{key:"0654ba3be0d8d3236b80e5fe0faddcd02650ad11",name:"header"}),a("span",{key:"a9701540c7fc9ed4f4646f01fb2543137404258a",class:"header-action"},!this.hideActionText&&a("span",{key:"a4a6d0c7cdcda803708f32f0439c877f4bc1d80b"},this.open?"Fermez":"Ouvrez"),a(n,{key:"1e936a6b0baeefaffda7f6666321ee744a8432e5",up:this.open}))),a("div",{key:"ac89508a85be3321b32ec45d178ab5219982fea0",class:"content",id:"content"},a("slot",{key:"9f949b45312bfe203ce69f1bbcc288de4fe0a94e",name:"content"})))}get el(){return e(this)}static get watchers(){return{open:["openChange"]}}};p.style=l;export{p as wcs_accordion_panel};
-//# sourceMappingURL=p-76c92e22.entry.js.map