wcs-core 7.0.0 → 7.2.0

package/dist/cjs/wcs-header.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6f0140d8.js');
-const helpers = require('./helpers-871f5a3d.js');
+const helpers = require('./helpers-2f1a8ddc.js');
 
-const headerCss = ":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 headerCss = ":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),::slotted(a){color:var(--wcs-header-title-color);margin:0;font-weight:var(--wcs-header-title-font-weight);font-size:var(--wcs-header-title-font-size);text-decoration:none}::slotted([slot=center]){flex:1;display:flex;justify-content:center;align-items:center}::slotted([slot=actions]){margin-left:auto}";
 const WcsHeaderStyle0 = headerCss;
 
 const HEADER_INHERITED_ATTRS = [];
@@ -26,7 +26,7 @@ const Header = class {
         };
     }
     __stencil_render() {
-        return (index.h("header", Object.assign({ key: 'f432b6a245e91ddeb8b1631f861e6546d8482dbe', role: "banner", ref: (el) => (this.nativeHeader = el) }, this.inheritedAttributes), index.h("slot", { key: '5310bb9f07e117002c3748986d632d48a97322bb', name: "logo" }), index.h("slot", { key: 'a471157be3d7ca2ea16dcc1e937174b7e8a69ee5', name: "title" }), index.h("slot", { key: '5dea2c8099c3ab6ca52d46b5e9fa4d6f758662ab', name: "actions" })));
+        return (index.h("header", Object.assign({ key: '110c72f1b40917efdaa2c864c61a8ee99e35ce38', role: "banner", ref: (el) => (this.nativeHeader = el) }, this.inheritedAttributes), index.h("slot", { key: '8a593fc8e96ea73573fae78d9107897dee680c87', name: "logo" }), index.h("slot", { key: '1fefec6eee8652ac531c450f15d70cf7ab8ba1c9', name: "title" }), index.h("slot", { key: 'ef151920a52804693a99501ee62688036e7bcda8', name: "center" }), index.h("slot", { key: '9d817dd99f3edb3dbe4b5a4bced020c42b64a903', name: "actions" })));
     }
     get el() { return index.getElement(this); }
     render() { return index.h(index.Host, this.hostData(), this.__stencil_render()); }

package/dist/cjs/wcs-header.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-header.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,6oCAA6oC,CAAC;AAChqC,wBAAe,SAAS;;ACGxB,MAAM,sBAAsB,GAAG,EAAE,CAAC;MA0BrB,MAAM;IALnB;;QAQY,wBAAmB,GAAyB,EAAE,CAAC;KA6B1D;IA3BG,iBAAiB;QACb,IAAI,CAAC,mBAAmB,mCACjBA,6BAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,GAC9BC,yBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,sBAAsB,CAAC,CACxD,CAAC;KACL;IAGD,MAAM,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;QAC5EC,4BAAoB,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;KACxD;IAED,QAAQ;QACJ,OAAO;YACH,MAAM,EAAE,QAAQ;SACnB,CAAC;KACL;IAED;QACI,QACIC,mFAAQ,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,IAAM,IAAI,CAAC,mBAAmB,GACrFA,mEAAM,IAAI,EAAC,MAAM,GAAE,EACnBA,mEAAM,IAAI,EAAC,OAAO,GAAE,EACpBA,mEAAM,IAAI,EAAC,SAAS,GAAE,CACjB,EACX;KACL;;;;;;;;","names":["inheritAriaAttributes","inheritAttributes","setOrRemoveAttribute","h"],"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"],"version":3}
+{"file":"wcs-header.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,swCAAswC,CAAC;AACzxC,wBAAe,SAAS;;ACGxB,MAAM,sBAAsB,GAAG,EAAE,CAAC;MA2BrB,MAAM;IALnB;;QAQY,wBAAmB,GAAyB,EAAE,CAAC;KA8B1D;IA5BG,iBAAiB;QACb,IAAI,CAAC,mBAAmB,mCACjBA,6BAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,GAC9BC,yBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,sBAAsB,CAAC,CACxD,CAAC;KACL;IAGD,MAAM,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;QAC5EC,4BAAoB,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;KACxD;IAED,QAAQ;QACJ,OAAO;YACH,MAAM,EAAE,QAAQ;SACnB,CAAC;KACL;IAED;QACI,QACIC,mFAAQ,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,IAAM,IAAI,CAAC,mBAAmB,GACrFA,mEAAM,IAAI,EAAC,MAAM,GAAE,EACnBA,mEAAM,IAAI,EAAC,OAAO,GAAE,EACpBA,mEAAM,IAAI,EAAC,QAAQ,GAAE,EACrBA,mEAAM,IAAI,EAAC,SAAS,GAAE,CACjB,EACX;KACL;;;;;;;;","names":["inheritAriaAttributes","inheritAttributes","setOrRemoveAttribute","h"],"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), ::slotted(a) {\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    text-decoration: none;\n}\n\n::slotted([slot=\"center\"]) {\n    flex: 1;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\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 center Content to display in the center of the header, useful for a search bar\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=\"center\"/>\n                <slot name=\"actions\"/>\n            </header>\n        );\n    }\n}\n"],"version":3}

package/dist/cjs/wcs-hint.cjs.entry.js

@@ -13,7 +13,7 @@ const Hint = class {
         this.small = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'fa20abf1e7904ea4ef83c33bc4d2d69e4d8fe384', slot: "messages" }, index.h("slot", { key: 'f010b7597557564483c56bcdc29c83307257bd01' })));
+        return (index.h(index.Host, { key: 'e9b631d775aa7564172286a9ac280cffdc22aa24', slot: "messages" }, index.h("slot", { key: 'f8d4350acb11283861487cc1b3a5ba20c0674f82' })));
     }
 };
 Hint.style = WcsHintStyle0;

package/dist/cjs/wcs-horizontal-stepper.cjs.entry.js

@@ -84,7 +84,7 @@ const HorizontalStepper = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'fb8ede07a0581aae611b96c9204f6057c3a392a3' }, index.h("ul", { key: 'e4f98d5ba27ca1a6cf1b0ef211e456deda8ea437', role: "list", class: "steps" }, this.steps.map((step, index$1) => (index.h(HorizontalStep, { step: step, passed: index$1 <= this.internalCurrentStepIndex, checkOnComplete: this.checkOnComplete, complete: this.isComplete(step, index$1), active: index$1 === this.internalCurrentStepIndex, first: index$1 === 0, disable: this.isDisable(step, index$1), onClick: step => this.wcsHorizontalStepClick.emit({ step, index: index$1 }) })))), this.renderLabels()));
+        return (index.h(index.Host, { key: '8f1c81f4e21159bbbd34a6caaaa66ce13e8b7a92' }, index.h("ul", { key: '1a512c67669a402100153db33936a6752d53b6ab', role: "list", class: "steps" }, this.steps.map((step, index$1) => (index.h(HorizontalStep, { step: step, passed: index$1 <= this.internalCurrentStepIndex, checkOnComplete: this.checkOnComplete, complete: this.isComplete(step, index$1), active: index$1 === this.internalCurrentStepIndex, first: index$1 === 0, disable: this.isDisable(step, index$1), onClick: step => this.wcsHorizontalStepClick.emit({ step, index: index$1 }) })))), this.renderLabels()));
     }
     isComplete(step, index) {
         return index <= this.internalCurrentStepIndex || step.complete;

package/dist/cjs/wcs-horizontal-stepper.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-horizontal-stepper.entry.cjs.js","mappings":"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","names":["h","Host","index"],"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"],"version":3}
+{"file":"wcs-horizontal-stepper.entry.cjs.js","mappings":"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","names":["h","Host","index"],"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({ reflect: true }) 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"],"version":3}

package/dist/cjs/wcs-icon.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6f0140d8.js');
-const helpers = require('./helpers-871f5a3d.js');
+const helpers = require('./helpers-2f1a8ddc.js');
 
 const ICON_INHERITED_ATTRS = ['title'];
 const Icon = class {
@@ -26,7 +26,7 @@ const Icon = class {
                 [`icons-size-${this.size}`]: true
             }
         };
-        return (index.h("i", Object.assign({ key: 'bb5a7a275de88a4c02dbd15899516a860579fa35' }, cssClass, { ref: (el) => (this.nativeIcon = el) }, this.inheritedAttributes)));
+        return (index.h("i", Object.assign({ key: '429ebd8357f8097d812e43f9bda0921323f7b981' }, cssClass, { ref: (el) => (this.nativeIcon = el) }, this.inheritedAttributes)));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/wcs-input.cjs.entry.js

@@ -3,15 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6f0140d8.js');
-const helpers = require('./helpers-871f5a3d.js');
+const helpers = require('./helpers-2f1a8ddc.js');
 
-const WcsInputSizeValues = ['s', 'm', 'l']; // as const keyword is used to infer and preserve the exact literal values of an array or object.
-function isWcsInputSize(size) {
-    // @ts-ignore : ignore size type, as it is checked with WcsInputSizeValues
-    return WcsInputSizeValues.includes(size);
-}
-
-const inputCss = ":host{--wcs-input-icon-color-default:var(--wcs-semantic-color-foreground-brand);--wcs-input-icon-color-focus:var(--wcs-semantic-color-foreground-brand);--wcs-input-icon-color-disabled:var(--wcs-semantic-color-foreground-disabled);--wcs-input-background-color:var(--wcs-semantic-color-background-control-default);--wcs-input-border-radius-left:var(--wcs-semantic-border-radius-base);--wcs-input-border-radius-right:var(--wcs-semantic-border-radius-base);--wcs-input-border-width:var(--wcs-semantic-border-width-default);--wcs-input-border-width-focus:var(--wcs-semantic-border-width-large);--wcs-input-height-l:var(--wcs-semantic-size-l);--wcs-input-height-m:var(--wcs-semantic-size-m);--wcs-input-height-s:var(--wcs-semantic-size-s);--wcs-input-font-size-l:var(--wcs-semantic-font-size-l);--wcs-input-font-size-m:var(--wcs-semantic-font-size-m);--wcs-input-font-size-s:var(--wcs-semantic-font-size-s);--wcs-input-prefix-suffix-background-color:var(--wcs-semantic-color-background-surface-accent-lighter);--wcs-input-prefix-suffix-color:var(--wcs-semantic-color-foreground-on-accent);--wcs-input-prefix-suffix-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-input-prefix-suffix-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-input-border-style-default:solid;--wcs-input-border-style-focus:var(--wcs-semantic-border-style-focus-control);--wcs-input-border-color-default:var(--wcs-semantic-color-border-primary);--wcs-input-border-color-disabled:var(--wcs-semantic-color-border-disabled);--wcs-input-border-color-focus:var(--wcs-semantic-color-border-control-focus);--wcs-input-border-color-error:var(--wcs-semantic-color-border-critical);--wcs-input-value-color:var(--wcs-semantic-color-text-primary);--wcs-input-value-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-input-placeholder-color:var(--wcs-semantic-color-text-tertiary);--wcs-input-placeholder-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-input-placeholder-font-style:var(--wcs-semantic-font-style-control-placeholder);--wcs-input-text-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-input-min-height:var(--wcs-semantic-size-s);--wcs-input-padding-horizontal-s:calc(1.5 * var(--wcs-semantic-spacing-base));--wcs-input-padding-horizontal-m:var(--wcs-semantic-spacing-large);--wcs-input-padding-horizontal-l:var(--wcs-semantic-spacing-large);--wcs-input-gap:var(--wcs-semantic-spacing-base);display:flex;width:100%;height:var(--wcs-input-host-height);box-sizing:border-box;border-radius:var(--wcs-input-border-radius-left) var(--wcs-input-border-radius-right) var(--wcs-input-border-radius-right) var(--wcs-input-border-radius-left);background-color:var(--wcs-input-background-color);outline:var(--wcs-input-border-style-default) var(--wcs-input-border-width) var(--wcs-input-border-color-default);outline-offset:calc(var(--wcs-input-border-width) * -1);background-clip:padding-box;gap:var(--wcs-input-gap)}:host input{overflow:hidden;height:var(--wcs-input-host-height);width:100%;padding:0;background-color:transparent;font-family:var(--wcs-font-sans-serif);color:var(--wcs-input-value-color);font-weight:var(--wcs-input-value-font-weight) !important;border:none;font-size:var(--wcs-input-font-size, 1rem);line-height:1.5}:host input::placeholder{color:var(--wcs-input-placeholder-color);opacity:1;font-weight:var(--wcs-input-placeholder-font-weight);font-style:var(--wcs-input-placeholder-font-style)}:host input:focus{box-shadow:none;outline:0}:host .toggle_password{cursor:pointer}:host .prefix,:host .suffix{color:var(--wcs-input-prefix-suffix-color);display:flex;white-space:nowrap;align-items:center;font-size:var(--wcs-input-font-size, 1rem);padding:0 calc(var(--wcs-input-padding-horizontal-m) / 2);font-weight:var(--wcs-input-prefix-suffix-font-weight) !important;background-color:var(--wcs-input-prefix-suffix-background-color)}:host .prefix{border-radius:var(--wcs-internal-input-border-radius-left) 0 0 var(--wcs-internal-input-border-radius-left)}:host .suffix{border-radius:0 var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-right) 0}:host wcs-mat-icon{color:var(--wcs-input-icon-color-default)}:host([size=l]){--wcs-input-host-height:var(--wcs-input-height-l);--wcs-input-font-size:var(--wcs-input-font-size-l);padding-left:calc(var(--wcs-input-padding-horizontal-l));padding-right:calc(var(--wcs-input-padding-horizontal-l))}:host([size=m]){--wcs-input-host-height:var(--wcs-input-height-m);--wcs-input-font-size:var(--wcs-input-font-size-m);padding-left:calc(var(--wcs-input-padding-horizontal-m));padding-right:calc(var(--wcs-input-padding-horizontal-m))}:host([size=s]){--wcs-input-host-height:var(--wcs-input-height-s);--wcs-input-font-size:var(--wcs-input-font-size-s);padding-left:calc(var(--wcs-input-padding-horizontal-s));padding-right:calc(var(--wcs-input-padding-horizontal-s))}:host([state=error]){outline-color:var(--wcs-input-border-color-error) !important}:host([data-has-prefix]){padding-left:0}:host([data-has-suffix]){padding-right:0}:host([disabled]){cursor:not-allowed;outline:var(--wcs-input-border-style-default) var(--wcs-input-border-width) var(--wcs-input-border-color-disabled);--wcs-input-background-color:var(--wcs-semantic-color-background-control-disabled)}:host([disabled]) input{cursor:not-allowed;color:var(--wcs-input-text-color-disabled)}:host([disabled]) input::placeholder{color:var(--wcs-input-text-color-disabled)}:host([disabled]) .prefix,:host([disabled]) .suffix{color:var(--wcs-input-prefix-suffix-color-disabled);cursor:text}:host([disabled]) wcs-mat-icon{color:var(--wcs-input-icon-color-disabled);cursor:not-allowed}:host([readonly]){--wcs-input-background-color:var(--wcs-semantic-color-background-control-readonly);--wcs-input-border-width:0}:host(:focus-within){outline:var(--wcs-input-border-style-focus) var(--wcs-input-border-width-focus) var(--wcs-input-border-color-focus);outline-offset:calc(var(--wcs-input-border-width-focus) * -1)}:host(:focus-within) wcs-mat-icon{color:var(--wcs-input-icon-color-focus)}";
+const inputCss = ":host{--wcs-input-icon-color-default:var(--wcs-semantic-color-foreground-brand);--wcs-input-icon-color-focus:var(--wcs-semantic-color-foreground-brand);--wcs-input-icon-color-disabled:var(--wcs-semantic-color-foreground-disabled);--wcs-input-background-color:var(--wcs-semantic-color-background-control-default);--wcs-input-border-radius-left:var(--wcs-semantic-border-radius-base);--wcs-input-border-radius-right:var(--wcs-semantic-border-radius-base);--wcs-input-border-width:var(--wcs-semantic-border-width-default);--wcs-input-border-width-focus:var(--wcs-semantic-border-width-large);--wcs-input-height-l:var(--wcs-semantic-size-l);--wcs-input-height-m:var(--wcs-semantic-size-m);--wcs-input-height-s:var(--wcs-semantic-size-s);--wcs-input-font-size-l:var(--wcs-semantic-font-size-l);--wcs-input-font-size-m:var(--wcs-semantic-font-size-m);--wcs-input-font-size-s:var(--wcs-semantic-font-size-s);--wcs-input-prefix-suffix-background-color:var(--wcs-semantic-color-background-surface-accent-lighter);--wcs-input-prefix-suffix-color:var(--wcs-semantic-color-foreground-on-accent);--wcs-input-prefix-suffix-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-input-prefix-suffix-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-input-border-style-default:solid;--wcs-input-border-style-focus:var(--wcs-semantic-border-style-focus-control);--wcs-input-border-color-default:var(--wcs-semantic-color-border-primary);--wcs-input-border-color-disabled:var(--wcs-semantic-color-border-disabled);--wcs-input-border-color-focus:var(--wcs-semantic-color-border-control-focus);--wcs-input-reveal-password-button-border-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-input-border-color-error:var(--wcs-semantic-color-border-critical);--wcs-input-value-color:var(--wcs-semantic-color-text-primary);--wcs-input-value-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-input-placeholder-color:var(--wcs-semantic-color-text-tertiary);--wcs-input-placeholder-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-input-placeholder-font-style:var(--wcs-semantic-font-style-control-placeholder);--wcs-input-text-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-input-min-height:var(--wcs-semantic-size-s);--wcs-input-padding-horizontal-s:calc(1.5 * var(--wcs-semantic-spacing-base));--wcs-input-padding-horizontal-m:var(--wcs-semantic-spacing-large);--wcs-input-padding-horizontal-l:var(--wcs-semantic-spacing-large);--wcs-input-gap:var(--wcs-semantic-spacing-base);--wcs-input-host-height:var(--wcs-input-height-m);--wcs-input-font-size:var(--wcs-input-font-size-m);padding-left:calc(var(--wcs-input-padding-horizontal-m));padding-right:calc(var(--wcs-input-padding-horizontal-m));display:flex;width:100%;height:var(--wcs-input-host-height);box-sizing:border-box;border-radius:var(--wcs-input-border-radius-left) var(--wcs-input-border-radius-right) var(--wcs-input-border-radius-right) var(--wcs-input-border-radius-left);background-color:var(--wcs-input-background-color);outline:var(--wcs-input-border-style-default) var(--wcs-input-border-width) var(--wcs-input-border-color-default);outline-offset:calc(var(--wcs-input-border-width) * -1);background-clip:padding-box;gap:var(--wcs-input-gap)}:host input{overflow:hidden;height:var(--wcs-input-host-height);width:100%;padding:0;background-color:transparent;font-family:var(--wcs-font-sans-serif);color:var(--wcs-input-value-color);font-weight:var(--wcs-input-value-font-weight) !important;border:none;font-size:var(--wcs-input-font-size, 1rem);line-height:1.5}:host input::placeholder{color:var(--wcs-input-placeholder-color);opacity:1;font-weight:var(--wcs-input-placeholder-font-weight);font-style:var(--wcs-input-placeholder-font-style)}:host input:focus{box-shadow:none;outline:0}:host button.toggle_password{background:transparent;border:none;color:inherit;cursor:pointer}:host button.toggle_password:focus-visible{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-input-reveal-password-button-border-color-focus);outline-offset:calc(-2 * var(--wcs-input-border-width-focus));border-radius:0.1rem}:host .prefix,:host .suffix{color:var(--wcs-input-prefix-suffix-color);display:flex;white-space:nowrap;align-items:center;font-size:var(--wcs-input-font-size, 1rem);padding:0 calc(var(--wcs-input-padding-horizontal-m) / 2);font-weight:var(--wcs-input-prefix-suffix-font-weight) !important;background-color:var(--wcs-input-prefix-suffix-background-color)}:host .prefix{border-radius:var(--wcs-internal-input-border-radius-left) 0 0 var(--wcs-internal-input-border-radius-left)}:host .suffix{border-radius:0 var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-right) 0}:host wcs-mat-icon{color:var(--wcs-input-icon-color-default)}:host([size=l]){--wcs-input-host-height:var(--wcs-input-height-l);--wcs-input-font-size:var(--wcs-input-font-size-l);padding-left:calc(var(--wcs-input-padding-horizontal-l));padding-right:calc(var(--wcs-input-padding-horizontal-l))}:host([size=m]){--wcs-input-host-height:var(--wcs-input-height-m);--wcs-input-font-size:var(--wcs-input-font-size-m);padding-left:calc(var(--wcs-input-padding-horizontal-m));padding-right:calc(var(--wcs-input-padding-horizontal-m))}:host([size=s]){--wcs-input-host-height:var(--wcs-input-height-s);--wcs-input-font-size:var(--wcs-input-font-size-s);padding-left:calc(var(--wcs-input-padding-horizontal-s));padding-right:calc(var(--wcs-input-padding-horizontal-s))}:host([state=error]){outline-color:var(--wcs-input-border-color-error) !important}:host([data-has-prefix]){padding-left:0}:host([data-has-suffix]){padding-right:0}:host([disabled]){cursor:not-allowed;outline:var(--wcs-input-border-style-default) var(--wcs-input-border-width) var(--wcs-input-border-color-disabled);--wcs-input-background-color:var(--wcs-semantic-color-background-control-disabled)}:host([disabled]) input{cursor:not-allowed;color:var(--wcs-input-text-color-disabled)}:host([disabled]) input::placeholder{color:var(--wcs-input-text-color-disabled)}:host([disabled]) .prefix,:host([disabled]) .suffix{color:var(--wcs-input-prefix-suffix-color-disabled);cursor:text}:host([disabled]) wcs-mat-icon{color:var(--wcs-input-icon-color-disabled);cursor:not-allowed}:host([readonly]){--wcs-input-background-color:var(--wcs-semantic-color-background-control-readonly);--wcs-input-border-width:0}:host(:focus-within){outline:var(--wcs-input-border-style-focus) var(--wcs-input-border-width-focus) var(--wcs-input-border-color-focus);outline-offset:calc(var(--wcs-input-border-width-focus) * -1)}:host(:focus-within) wcs-mat-icon{color:var(--wcs-input-icon-color-focus)}";
 const WcsInputStyle0 = inputCss;
 
 const INPUT_INHERITED_ATTRS = ['tabindex', 'title'];
@@ -66,6 +60,8 @@ const Input = class {
         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;
@@ -81,10 +77,6 @@ const Input = class {
     }
     componentWillLoad() {
         this.inheritedAttributes = Object.assign(Object.assign({}, helpers.inheritAriaAttributes(this.el)), helpers.inheritAttributes(this.el, INPUT_INHERITED_ATTRS));
-        if (!isWcsInputSize(this.size)) {
-            console.warn(`Invalid size value for wcs-input : "${this.size}". Must be one of "${WcsInputSizeValues.join(', ')}"`);
-            this.size = "m"; // Default fallback value
-        }
     }
     connectedCallback() {
         this.debounceChanged();
@@ -137,7 +129,7 @@ const Input = class {
         if (label) {
             label.id = labelId;
         }
-        return (index.h(index.Host, { key: 'a85c77b11f3ac1e7b4238513f4d8916b74d11245', "aria-disabled": this.disabled ? 'true' : null, "data-has-prefix": !!this.prefixLabel, "data-has-suffix": !!this.suffixLabel }, this.prefixLabel ? (index.h("span", { class: "prefix", part: "prefix" }, this.prefixLabel)) : null, this.icon ? (index.h("wcs-mat-icon", { icon: this.icon, size: "m" })) : null, index.h("input", Object.assign({ key: '2b71e2ba5fbb92685af6123a8accf72833391bc1', class: "native-input", ref: input => this.nativeInput = input, "aria-labelledby": label ? labelId : 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: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus }, this.inheritedAttributes)), this.type === "password" ? (index.h("wcs-mat-icon", { class: "toggle_password", icon: this.iconPassword, size: "m", onClick: () => this.passwordRevealIconClick() })) : null, this.suffixLabel ? (index.h("span", { class: "suffix", part: "suffix" }, this.suffixLabel)) : null));
+        return (index.h(index.Host, { key: '20899914842d410ef72a8f81906e1e2be6e423cf', "aria-disabled": this.disabled ? 'true' : null, "data-has-prefix": !!this.prefixLabel, "data-has-suffix": !!this.suffixLabel }, this.prefixLabel ? (index.h("span", { class: "prefix", part: "prefix" }, this.prefixLabel)) : null, this.icon ? (index.h("wcs-mat-icon", { icon: this.icon, size: "m" })) : null, index.h("input", Object.assign({ key: '059fb987112d535b3f1cf51ea9bbaa01f36667c5', class: "native-input", ref: input => this.nativeInput = input, "aria-labelledby": label ? labelId : 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: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus }, this.inheritedAttributes)), this.type === "password" ? (index.h("button", { title: this.passwordReveal ? this.hidePasswordButtonAriaLabel : this.showPasswordButtonAriaLabel, class: "toggle_password", onClick: () => this.passwordRevealIconClick() }, index.h("wcs-mat-icon", { icon: this.iconPassword, size: "m" }))) : null, this.suffixLabel ? (index.h("span", { class: "suffix", part: "suffix" }, this.suffixLabel)) : null));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/wcs-input.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-input.entry.cjs.js","mappings":";;;;;;;AAcO,MAAM,kBAAkB,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAU,CAAC;SAI3C,cAAc,CAAC,IAAY;;IAEvC,OAAO,kBAAkB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;AAC7C;;ACrBA,MAAM,QAAQ,GAAG,g5LAAg5L,CAAC;AACl6L,uBAAe,QAAQ;;ACkCvB,MAAM,qBAAqB,GAAG,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;MA8DvC,KAAK;;;;;;;QAGN,YAAO,GAAG,aAAa,QAAQ,EAAE,EAAE,CAAC;QACpC,wBAAmB,GAAyB,EAAE,CAAC;QAC/C,iBAAY,GAAG,YAAY,CAAC;QA2P5B,YAAO,GAAG,CAAC,EAAS;YACxB,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;YACnD,IAAI,KAAK,EAAE;gBACP,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;aAClC;YACD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAmB,CAAC,CAAC;SAC3C,CAAA;QAEO,aAAQ,GAAG,CAAC,CAAQ;YACxB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,KAAK,EAAC,CAAC,CAAC;SACxD,CAAA;QAEO,WAAM,GAAG,CAAC,EAAc;YAC5B,IAAI,IAAI,CAAC,eAAe,EAAE;gBACtB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;aACzB;SACJ,CAAA;QAEO,YAAO,GAAG,CAAC,EAAc;YAC7B,IAAI,IAAI,CAAC,eAAe,EAAE;gBACtB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;aAC1B;SACJ,CAAA;+BAvQyB,IAAI;8BAEI,KAAK;;8BAYd,KAAK;4BAKY,KAAK;2BAKJ,KAAK;yBAK5B,KAAK;wBAMN,CAAC;;;wBAoBD,KAAK;;oBAUoB,GAAG;;;;;;;;oBA2CxB,IAAI,CAAC,OAAO;;;wBAoBhB,KAAK;wBAKL,KAAK;0BAKH,KAAK;qBAMoB,SAAS;;oBAWxB,MAAM;qBAKmB,EAAE;;IA1HhD,eAAe;QACrB,IAAI,CAAC,QAAQ,GAAGA,qBAAa,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;KAC/D;IA8ID,iBAAiB;QACb,IAAI,CAAC,mBAAmB,mCACjBC,6BAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,GAC9BC,yBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,qBAAqB,CAAC,CACvD,CAAC;QAEF,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;YAC5B,OAAO,CAAC,IAAI,CAAC,uCAAuC,IAAI,CAAC,IAAI,sBAAsB,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YACrH,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC;SACnB;KACJ;IAED,iBAAiB;QACb,IAAI,CAAC,eAAe,EAAE,CAAC;QACF;YACjB,QAAQ,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,iBAAiB,EAAE;gBACtD,MAAM,EAAE,IAAI,CAAC,EAAE;aAClB,CAAC,CAAC,CAAC;SACP;KACJ;IAED,oBAAoB;QACK;YACjB,QAAQ,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,mBAAmB,EAAE;gBACxD,MAAM,EAAE,IAAI,CAAC,EAAE;aAClB,CAAC,CAAC,CAAC;SACP;KACJ;;;;;;IAQD,MAAM,OAAO;QACT,IAAI,IAAI,CAAC,WAAW,EAAE;YAClB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;SAC3B;KACJ;;;;IAMD,eAAe;QACX,OAAO,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,WAAY,CAAC,CAAC;KAC7C;IAGD,MAAM,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;QAC5EC,4BAAoB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;KACvD;IAEO,gBAAgB;QACpB,OAAO,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;YACzD,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE,QAAQ,EAAE,CAAC;KACrC;IA0BO,uBAAuB;QAC3B,IAAI,CAAC,cAAc,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC;KAC9C;IAGD,sBAAsB;QAClB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,cAAc,GAAG,gBAAgB,GAAG,YAAY,CAAC;KAC7E;IAED,MAAM;QACF,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACtC,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;QACtC,MAAM,KAAK,GAAGC,qBAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACrC,IAAI,KAAK,EAAE;YACP,KAAK,CAAC,EAAE,GAAG,OAAO,CAAC;SACtB;QAED,QACIC,QAACC,UAAI,sEACc,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,qBAC3B,CAAC,CAAC,IAAI,CAAC,WAAW,qBAClB,CAAC,CAAC,IAAI,CAAC,WAAW,IAElC,IAAI,CAAC,WAAW,IAAID,kBAAM,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,IAAE,IAAI,CAAC,WAAW,CAAQ,IAAI,IAAI,EACxF,IAAI,CAAC,IAAI,IAAIA,0BAAc,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,GAAG,GAAgB,IAAI,IAAI,EAC7EA,kFACI,KAAK,EAAC,cAAc,EACpB,GAAG,EAAE,KAAK,IAAI,IAAI,CAAC,WAAW,GAAG,KAAK,qBACrB,KAAK,GAAG,OAAO,GAAG,IAAI,EACvC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,IAAI,EAAE,EACnC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,cAAc,GAAG,MAAM,GAAG,IAAI,CAAC,IAAI,EAC9C,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,IACjB,IAAI,CAAC,mBAAmB,EAC9B,EACD,IAAI,CAAC,IAAI,KAAK,UAAU,IAAIA,0BAAc,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,EAAC,GAAG,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,uBAAuB,EAAE,GAAiB,IAAI,IAAI,EAC3K,IAAI,CAAC,WAAW,IAAIA,kBAAM,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,IAAE,IAAI,CAAC,WAAW,CAAQ,IAAI,IAAI,CACtF,EACT;KACL;;;;;;;;AAGL,IAAI,QAAQ,GAAG,CAAC,CAAC;;;;;","names":["debounceEvent","inheritAriaAttributes","inheritAttributes","setOrRemoveAttribute","findItemLabel","h","Host"],"sources":["src/components/input/input-interface.ts","src/components/input/input.scss?tag=wcs-input&encapsulation=shadow","src/components/input/input.tsx"],"sourcesContent":["// From: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\nimport { WcsSize } from '../../shared-types';\n\nexport type AutocompleteTypes = (\n    | 'on' | 'off' | 'name' | 'honorific-prefix' | 'given-name' | 'additional-name' | 'family-name' | 'honorific-suffix'\n    | 'nickname' | 'email' | 'username' | 'new-password' | 'current-password' | 'one-time-code' | 'organization-title' | 'organization'\n    | 'street-address' | 'address-line1' | 'address-line2' | 'address-line3' | 'address-level4' | 'address-level3' | 'address-level2'\n    | 'address-level1' | 'country' | 'country-name' | 'postal-code' | 'cc-name' | 'cc-given-name' | 'cc-additional-name' | 'cc-family-name'\n    | 'cc-family-name' | 'cc-number' | 'cc-exp' | 'cc-exp-month' | 'cc-exp-year' | 'cc-csc' | 'cc-type' | 'transaction-currency' | 'transaction-amount'\n    | 'language' | 'bday' | 'bday-day' | 'bday-month' | 'bday-year' | 'sex' | 'tel' | 'tel-country-code' | 'tel-national' | 'tel-area-code' | 'tel-local'\n    | 'tel-extension' | 'impp' | 'url' | 'photo');\n\nexport type TextFieldTypes = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' | 'time' | 'week' | 'month' | 'datetime-local' | 'file';\n\nexport const WcsInputSizeValues = ['s', 'm', 'l'] as const; // as const keyword is used to infer and preserve the exact literal values of an array or object.\n\nexport type WcsInputSize = Extract<WcsSize, typeof WcsInputSizeValues[number]>;\n\nexport function isWcsInputSize(size: string): size is WcsInputSize {\n    // @ts-ignore : ignore size type, as it is checked with WcsInputSizeValues\n    return WcsInputSizeValues.includes(size);\n}\n\nexport type WcsInputAutocorrect = 'on' | 'off';\n\nexport type WcsInputEnterKeyHint = 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';\n\nexport type WcsInputInputMode = 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';\n\nexport type WcsInputState = 'initial' | 'error';\n\nexport interface InputChangeEventDetail {\n    value: string | undefined | null;\n}\n","@import '../../style/focus-outline.scss';\n@import '../../style/placeholder.scss';\n\n:host {\n    --wcs-input-icon-color-default: var(--wcs-semantic-color-foreground-brand);\n    --wcs-input-icon-color-focus: var(--wcs-semantic-color-foreground-brand);\n    --wcs-input-icon-color-disabled: var(--wcs-semantic-color-foreground-disabled);\n\n    --wcs-input-background-color: var(--wcs-semantic-color-background-control-default);\n\n    --wcs-input-border-radius-left: var(--wcs-semantic-border-radius-base); // Overridden from prefix suffix group in form-field\n    --wcs-input-border-radius-right: var(--wcs-semantic-border-radius-base); // Overridden from prefix suffix group in form-field\n\n    --wcs-input-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-input-border-width-focus: var(--wcs-semantic-border-width-large);\n\n    --wcs-input-height-l: var(--wcs-semantic-size-l);\n    --wcs-input-height-m: var(--wcs-semantic-size-m);\n    --wcs-input-height-s: var(--wcs-semantic-size-s);\n    --wcs-input-font-size-l: var(--wcs-semantic-font-size-l);\n    --wcs-input-font-size-m: var(--wcs-semantic-font-size-m);\n    --wcs-input-font-size-s: var(--wcs-semantic-font-size-s);\n\n    --wcs-input-prefix-suffix-background-color: var(--wcs-semantic-color-background-surface-accent-lighter);\n    --wcs-input-prefix-suffix-color: var(--wcs-semantic-color-foreground-on-accent);\n    --wcs-input-prefix-suffix-color-disabled: var(--wcs-semantic-color-text-disabled);\n    --wcs-input-prefix-suffix-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-input-border-style-default: solid;\n    --wcs-input-border-style-focus: var(--wcs-semantic-border-style-focus-control);\n\n    --wcs-input-border-color-default: var(--wcs-semantic-color-border-primary);\n    --wcs-input-border-color-disabled: var(--wcs-semantic-color-border-disabled);\n    --wcs-input-border-color-focus: var(--wcs-semantic-color-border-control-focus);\n    --wcs-input-border-color-error: var(--wcs-semantic-color-border-critical);\n\n    --wcs-input-value-color: var(--wcs-semantic-color-text-primary);\n    --wcs-input-value-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-input-placeholder-color: var(--wcs-semantic-color-text-tertiary);\n    --wcs-input-placeholder-font-weight: var(--wcs-semantic-font-weight-roman);\n    --wcs-input-placeholder-font-style: var(--wcs-semantic-font-style-control-placeholder);\n\n    --wcs-input-text-color-disabled: var(--wcs-semantic-color-text-disabled);\n\n    --wcs-input-min-height: var(--wcs-semantic-size-s);\n    --wcs-input-padding-horizontal-s: calc(1.5 * var(--wcs-semantic-spacing-base));\n    --wcs-input-padding-horizontal-m: var(--wcs-semantic-spacing-large);\n    --wcs-input-padding-horizontal-l: var(--wcs-semantic-spacing-large);\n    --wcs-input-gap: var(--wcs-semantic-spacing-base);\n\n    display: flex;\n    width: 100%;\n    height: var(--wcs-input-host-height);\n    box-sizing: border-box;\n    border-radius: var(--wcs-input-border-radius-left) var(--wcs-input-border-radius-right) var(--wcs-input-border-radius-right) var(--wcs-input-border-radius-left);\n    background-color: var(--wcs-input-background-color);\n    outline: var(--wcs-input-border-style-default) var(--wcs-input-border-width) var(--wcs-input-border-color-default);\n    outline-offset: calc(var(--wcs-input-border-width) * -1);\n    background-clip: padding-box;\n\n    gap: var(--wcs-input-gap);\n\n    input {\n        overflow: hidden;\n        height: var(--wcs-input-host-height);\n        width: 100%;\n        padding: 0; // Reset padding from user agent stylesheet, it's the container that will handle padding\n        background-color: transparent;\n        font-family: var(--wcs-font-sans-serif);\n        color: var(--wcs-input-value-color);\n        font-weight: var(--wcs-input-value-font-weight) !important;\n        border: none;\n        font-size: var(--wcs-input-font-size, 1rem);\n        line-height: 1.5;\n\n        &::placeholder {\n            @include placeholder(var(--wcs-input-placeholder-color), var(--wcs-input-placeholder-font-weight), var(--wcs-input-placeholder-font-style));\n        }\n    }\n\n    input:focus {\n        box-shadow: none;\n        outline: 0;\n    }\n\n    .toggle_password {\n        cursor: pointer;\n    }\n\n    .prefix, .suffix {\n        color: var(--wcs-input-prefix-suffix-color);\n        display: flex;\n        white-space: nowrap;\n        align-items: center;\n        font-size: var(--wcs-input-font-size, 1rem);\n        padding: 0 calc(var(--wcs-input-padding-horizontal-m) / 2);\n        font-weight: var(--wcs-input-prefix-suffix-font-weight) !important;\n        background-color: var(--wcs-input-prefix-suffix-background-color);\n    }\n\n    .prefix {\n        border-radius: var(--wcs-internal-input-border-radius-left) 0 0 var(--wcs-internal-input-border-radius-left);\n    }\n\n    .suffix {\n        border-radius: 0 var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-right) 0;\n    }\n\n    wcs-mat-icon {\n        color: var(--wcs-input-icon-color-default);\n    }\n}\n\n:host([size=l]) {\n    --wcs-input-host-height: var(--wcs-input-height-l);\n    --wcs-input-font-size: var(--wcs-input-font-size-l);\n\n    padding-left: calc(var(--wcs-input-padding-horizontal-l));\n    padding-right: calc(var(--wcs-input-padding-horizontal-l));\n}\n\n:host([size=m]) { // Default\n    --wcs-input-host-height: var(--wcs-input-height-m);\n    --wcs-input-font-size: var(--wcs-input-font-size-m);\n\n    padding-left: calc(var(--wcs-input-padding-horizontal-m));\n    padding-right: calc(var(--wcs-input-padding-horizontal-m));\n}\n\n:host([size=s]) {\n    --wcs-input-host-height: var(--wcs-input-height-s);\n    --wcs-input-font-size: var(--wcs-input-font-size-s);\n\n    padding-left: calc(var(--wcs-input-padding-horizontal-s));\n    padding-right: calc(var(--wcs-input-padding-horizontal-s));\n}\n\n:host([state=error]) {\n    outline-color: var(--wcs-input-border-color-error) !important;\n}\n\n:host([data-has-prefix]) {\n    padding-left: 0;\n}\n\n:host([data-has-suffix]) {\n    padding-right: 0;\n}\n\n:host([disabled]) {\n    cursor: not-allowed; // padding is handled by the container, so we need to set cursor not allowed on it\n    outline: var(--wcs-input-border-style-default) var(--wcs-input-border-width) var(--wcs-input-border-color-disabled);\n    --wcs-input-background-color: var(--wcs-semantic-color-background-control-disabled);\n\n    input {\n        cursor: not-allowed;\n        color: var(--wcs-input-text-color-disabled);\n\n        &::placeholder {\n            color: var(--wcs-input-text-color-disabled);\n        }\n    }\n\n    .prefix, .suffix {\n        color: var(--wcs-input-prefix-suffix-color-disabled);\n        cursor: text; // reset cursor to text for prefix and suffix, to be able to select text\n    }\n\n    wcs-mat-icon {\n        color: var(--wcs-input-icon-color-disabled);\n        cursor: not-allowed;\n    }\n}\n\n:host([readonly]) {\n    --wcs-input-background-color: var(--wcs-semantic-color-background-control-readonly);\n    --wcs-input-border-width: 0;\n}\n\n:host(:focus-within) {\n    outline: var(--wcs-input-border-style-focus) var(--wcs-input-border-width-focus) var(--wcs-input-border-color-focus);\n    outline-offset: calc(var(--wcs-input-border-width-focus) * -1);\n\n    wcs-mat-icon {\n        color: var(--wcs-input-icon-color-focus);\n    }\n}\n","import {\n    Build,\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Method,\n    Prop,\n    State,\n    Watch\n} from '@stencil/core';\nimport {\n    debounceEvent,\n    findItemLabel,\n    inheritAriaAttributes,\n    inheritAttributes,\n    setOrRemoveAttribute\n} from '../../utils/helpers';\nimport {\n    AutocompleteTypes,\n    InputChangeEventDetail,\n    isWcsInputSize,\n    TextFieldTypes,\n    WcsInputSize,\n    WcsInputSizeValues,\n    WcsInputAutocorrect,\n    WcsInputEnterKeyHint,\n    WcsInputInputMode,\n    WcsInputState\n} from './input-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst INPUT_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The input component is a form control that accepts a single line of text.\n * Implementation mainly inspired from Ionic Input Component.\n *\n * ## Accessibility guidelines 💡\n * > - If you use wcs-input outside a wcs-form-field, you have to manage the label and the error message yourself.\n * > You can use the `aria-label` attribute to provide a label for screen readers but adds no visual label.\n * \n * @cssprop --wcs-input-icon-color-default - default icon color when the input is not focused\n * @cssprop --wcs-input-icon-color-focus - icon color when the input is focused\n * @cssprop --wcs-input-icon-color-disabled - icon color when the input is disabled\n *\n * @cssprop --wcs-input-background-color - background color of the input\n *\n * @cssprop --wcs-input-border-radius-left - border radius of the left side of the input\n * @cssprop --wcs-input-border-radius-right - border radius of the right side of the input\n * \n * @cssprop --wcs-input-border-width - border width of the input\n * @cssprop --wcs-input-border-width-focus - border width of the input when focused\n *\n * @cssprop --wcs-input-height-l - large height of the input\n * @cssprop --wcs-input-height-m - medium height of the input\n * @cssprop --wcs-input-height-s - small height of the input\n * @cssprop --wcs-input-font-size-l - large font size of the input\n * @cssprop --wcs-input-font-size-m - medium font size of the input\n * @cssprop --wcs-input-font-size-s - small font size of the input\n *\n * @cssprop --wcs-input-border-style-default - default border style of the input\n * @cssprop --wcs-input-border-style-focus - border style of the input when focused\n * \n * @cssprop --wcs-input-prefix-suffix-background-color - background color of the suffix/prefix\n * @cssprop --wcs-input-prefix-suffix-color - color of the suffix/prefix\n * @cssprop --wcs-input-prefix-suffix-color-disabled - color of the suffix/prefix when the input is disabled\n * @cssprop --wcs-input-prefix-suffix-font-weight - font weight of the suffix/prefix\n *\n * @cssprop --wcs-input-border-color-default - default border color of the input when not focused\n * @cssprop --wcs-input-border-color-disabled - border color of the input when disabled\n * @cssprop --wcs-input-border-color-focus - border color of the input when focused\n * @cssprop --wcs-input-border-color-error - border color of the input when in error state\n *\n * @cssprop --wcs-input-value-color - color of the input value\n * @cssprop --wcs-input-value-font-weight - font weight of the input value\n * \n * @cssprop --wcs-input-placeholder-color - color of the input placeholder\n * @cssprop --wcs-input-placeholder-font-weight - font weight of the input placeholder\n * @cssprop --wcs-input-placeholder-font-style - font style of the input placeholder\n * \n * @cssprop --wcs-input-text-color-disabled - color of the input when disabled\n *\n * @cssprop --wcs-input-padding-horizontal-s - horizontal padding of the input in small size\n * @cssprop --wcs-input-padding-horizontal-m - horizontal padding of the input in medium size\n * @cssprop --wcs-input-padding-horizontal-l - horizontal padding of the input in large size\n * \n * @cssprop --wcs-input-gap - gap between text input and icon\n */\n@Component({\n    tag: 'wcs-input',\n    styleUrl: 'input.scss',\n    shadow: { delegatesFocus: true },\n})\nexport class Input implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeInput?: HTMLInputElement;\n    private inputId = `wcs-input-${inputIds++}`;\n    private inheritedAttributes: { [k: string]: any } = {};\n    private iconPassword = \"visibility\";\n\n    /**\n     * This is required for a WebKit bug which requires us to\n     * blur and focus an input to properly focus the input in\n     * an item with delegatesFocus. It will no longer be needed\n     * with iOS 14.\n     *\n     * @internal\n     */\n    @Prop() fireFocusEvents = true;\n\n    @State() private passwordReveal = false;\n\n    /**\n     * If the value of the type attribute is `\"file\"`, then this attribute will indicate the types of files that the\n     * server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers.\n     */\n    @Prop() accept?: string;\n\n    /**\n     * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n     * Available options: `\"off\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`.\n     */\n    @Prop() autocapitalize = 'off';\n\n    /**\n     * Indicates whether the value of the control can be automatically completed by the browser.\n     */\n    @Prop() autocomplete: AutocompleteTypes = 'off';\n\n    /**\n     * Whether auto correction should be enabled when the user is entering/editing the text value.\n     */\n    @Prop() autocorrect: WcsInputAutocorrect = 'off';\n\n    /**\n     * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n     */\n    @Prop() autofocus = false;\n\n    /**\n     * Set the amount of time, in milliseconds, to wait to trigger the `wcsInput` event after each keystroke.\n     * This also impacts form bindings such as `ngModel` or `v-model`.\n     */\n    @Prop() debounce = 0;\n\n    @Watch('debounce')\n    protected debounceChanged() {\n        this.wcsInput = debounceEvent(this.wcsInput, this.debounce);\n    }\n\n    /**\n     * Prefix displayed before the text field contents. This is not included in the value.\n     */\n    @Prop() prefixLabel: string;\n\n    /**\n     * Suffix displayed after the text field contents. This is not included in the value.\n     */\n    @Prop() suffixLabel: string;\n\n    /**\n     * If `true`, the user cannot interact with the input.\n     */\n    @Prop() disabled = false;\n\n    /**\n     * A hint to the browser for which enter key to display.\n     */\n    @Prop() enterkeyhint?: WcsInputEnterKeyHint;\n\n    /**\n     * Specify the size (height) of the input.\n     */\n    @Prop({reflect: true}) size: WcsInputSize = 'm';\n\n    /**\n     * Name of the material icon to add to the input\n     */\n    @Prop() icon: string;\n\n    /**\n     * A hint to the browser for which keyboard to display.\n     */\n    @Prop() inputmode?: WcsInputInputMode;\n\n    /**\n     * The maximum value, which must not be less than its minimum (min attribute) value.\n     */\n    @Prop() max?: string;\n\n    /**\n     * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute\n     * specifies the maximum number of characters that the user can enter.\n     */\n    @Prop() maxlength?: number;\n\n    /**\n     * The minimum value, which must not be greater than its maximum (max attribute) value.\n     */\n    @Prop() min?: string;\n\n    /**\n     * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute\n     * specifies the minimum number of characters that the user can enter.\n     */\n    @Prop() minlength?: number;\n\n    /**\n     * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to\n     * `\"email\"` or `\"file\"`, otherwise it is ignored.\n     */\n    @Prop() multiple?: boolean;\n\n    /**\n     * The name of the control, which is submitted with the form data.\n     */\n    @Prop() name: string = this.inputId;\n\n    /**\n     * A regular expression that the value is checked against. The pattern must match the entire value, not just some\n     * subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value\n     * of the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"date\"`, or `\"password\"`, otherwise\n     * it is ignored. When the type attribute is `\"date\"`, `pattern` will only be used in browsers that do not support\n     * the `\"date\"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for\n     * more information.\n     */\n    @Prop() pattern?: string;\n\n    /**\n     * Instructional text that shows before the input has a value.\n     */\n    @Prop() placeholder?: string | null;\n\n    /**\n     * If `true`, the user cannot modify the value.\n     */\n    @Prop() readonly = false;\n\n    /**\n     * If `true`, the user must fill in a value before submitting a form.\n     */\n    @Prop() required = false;\n\n    /**\n     * If `true`, the element will have its spelling and grammar checked.\n     */\n    @Prop() spellcheck = false;\n\n    /**\n     * Specifies the state of the input. By default the input is in an normal state but you can to set it to 'error'\n     * state if the data given by the user is not valid.\n     */\n    @Prop({reflect: true}) state: WcsInputState = 'initial';\n\n    /**\n     * Works with the min and max attributes to limit the increments at which a value can be set.\n     * Possible values are: `\"any\"` or a positive floating point number.\n     */\n    @Prop() step?: string;\n\n    /**\n     * The type of control to display. The default type is text.\n     */\n    @Prop() type: TextFieldTypes = 'text';\n\n    /**\n     * The value of the input.\n     */\n    @Prop({mutable: true}) value?: string | number | null = '';\n\n    /**\n     * Emitted when a keyboard input occurred. See https://developer.mozilla.org/en-US/docs/Web/Events/input\n     */\n    @Event() wcsInput!: EventEmitter<KeyboardEvent>;\n\n    /**\n     * Emitted when the value has changed. See https://developer.mozilla.org/en-US/docs/Web/Events/change\n     */\n    @Event() wcsChange!: EventEmitter<InputChangeEventDetail>;\n\n    /**\n     * Emitted when the input loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    /**\n     * Emitted when the input has focus.\n     */\n    @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n    componentWillLoad() {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, INPUT_INHERITED_ATTRS)\n        };\n\n        if (!isWcsInputSize(this.size)) {\n            console.warn(`Invalid size value for wcs-input : \"${this.size}\". Must be one of \"${WcsInputSizeValues.join(', ')}\"`);\n            this.size = \"m\"; // Default fallback value\n        }\n    }\n\n    connectedCallback() {\n        this.debounceChanged();\n        if (Build.isBrowser) {\n            document.dispatchEvent(new CustomEvent('wcsInputDidLoad', {\n                detail: this.el\n            }));\n        }\n    }\n\n    disconnectedCallback() {\n        if (Build.isBrowser) {\n            document.dispatchEvent(new CustomEvent('wcsInputDidUnload', {\n                detail: this.el\n            }));\n        }\n    }\n\n    /**\n     * Sets blur on the native `input` in `wcs-input`. Use this method instead of the global\n     * `input.blur()`.\n     * @internal\n     */\n    @Method()\n    async setBlur() {\n        if (this.nativeInput) {\n            this.nativeInput.blur();\n        }\n    }\n\n    /**\n     * Returns the native `<input>` element used under the hood.\n     */\n    @Method()\n    getInputElement(): Promise<HTMLInputElement> {\n        return Promise.resolve(this.nativeInput!);\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeInput, attr, value);\n    }\n    \n    private getValueAsString(): string {\n        return typeof this.value === 'number' ? this.value.toString() :\n            (this.value || '').toString();\n    }\n\n    private onInput = (ev: Event) => {\n        const input = ev.target as HTMLInputElement | null;\n        if (input) {\n            this.value = input.value || '';\n        }\n        this.wcsInput.emit(ev as KeyboardEvent);\n    }\n\n    private onChange = (_: Event) => {\n        this.wcsChange.emit({value: this.nativeInput.value});\n    }\n\n    private onBlur = (ev: FocusEvent) => {\n        if (this.fireFocusEvents) {\n            this.wcsBlur.emit(ev);\n        }\n    }\n\n    private onFocus = (ev: FocusEvent) => {\n        if (this.fireFocusEvents) {\n            this.wcsFocus.emit(ev);\n        }\n    }\n\n    private passwordRevealIconClick(): void {\n        this.passwordReveal = !this.passwordReveal;\n    }\n\n    @Watch('passwordReveal')\n    onPasswordRevealChange(): void {\n        this.iconPassword = this.passwordReveal ? 'visibility_off' : 'visibility';\n    }\n\n    render() {\n        const value = this.getValueAsString();\n        const labelId = this.inputId + '-lbl';\n        const label = findItemLabel(this.el);\n        if (label) {\n            label.id = labelId;\n        }\n\n        return (\n            <Host\n                aria-disabled={this.disabled ? 'true' : null}\n                data-has-prefix={!!this.prefixLabel}\n                data-has-suffix={!!this.suffixLabel}\n            >\n                {this.prefixLabel ? (<span class=\"prefix\" part=\"prefix\">{this.prefixLabel}</span>) : null}\n                {this.icon ? (<wcs-mat-icon icon={this.icon} size=\"m\"></wcs-mat-icon>) : null}\n                <input\n                    class=\"native-input\"\n                    ref={input => this.nativeInput = input}\n                    aria-labelledby={label ? labelId : null}\n                    disabled={this.disabled}\n                    accept={this.accept}\n                    autoCapitalize={this.autocapitalize}\n                    autoComplete={this.autocomplete}\n                    autoCorrect={this.autocorrect}\n                    autoFocus={this.autofocus}\n                    enterKeyHint={this.enterkeyhint}\n                    inputMode={this.inputmode}\n                    min={this.min}\n                    max={this.max}\n                    minLength={this.minlength}\n                    maxLength={this.maxlength}\n                    multiple={this.multiple}\n                    name={this.name}\n                    pattern={this.pattern}\n                    placeholder={this.placeholder || ''}\n                    readOnly={this.readonly}\n                    required={this.required}\n                    spellcheck={this.spellcheck}\n                    step={this.step}\n                    type={this.passwordReveal ? 'text' : this.type}\n                    value={value}\n                    onInput={this.onInput}\n                    onChange={this.onChange}\n                    onBlur={this.onBlur}\n                    onFocus={this.onFocus}\n                    {...this.inheritedAttributes}\n                />\n                {this.type === \"password\" ? (<wcs-mat-icon class=\"toggle_password\" icon={this.iconPassword} size=\"m\"  onClick={() => this.passwordRevealIconClick()}></wcs-mat-icon>) : null}\n                {this.suffixLabel ? (<span class=\"suffix\" part=\"suffix\">{this.suffixLabel}</span>) : null}\n            </Host>\n        );\n    }\n}\n\nlet inputIds = 0;\n"],"version":3}
+{"file":"wcs-input.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,QAAQ,GAAG,g/MAAg/M,CAAC;AAClgN,uBAAe,QAAQ;;ACgCvB,MAAM,qBAAqB,GAAG,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;MA+DvC,KAAK;;;;;;;QAGN,YAAO,GAAG,aAAa,QAAQ,EAAE,EAAE,CAAC;QACpC,wBAAmB,GAAyB,EAAE,CAAC;QAC/C,iBAAY,GAAG,YAAY,CAAC;QAyP5B,YAAO,GAAG,CAAC,EAAS;YACxB,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;YACnD,IAAI,KAAK,EAAE;gBACP,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;aAClC;YACD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAmB,CAAC,CAAC;SAC3C,CAAA;QAEO,aAAQ,GAAG,CAAC,CAAQ;YACxB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,KAAK,EAAC,CAAC,CAAC;SACxD,CAAA;QAEO,WAAM,GAAG,CAAC,EAAc;YAC5B,IAAI,IAAI,CAAC,eAAe,EAAE;gBACtB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;aACzB;SACJ,CAAA;QAEO,YAAO,GAAG,CAAC,EAAc;YAC7B,IAAI,IAAI,CAAC,eAAe,EAAE;gBACtB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;aAC1B;SACJ,CAAA;+BArQkC,IAAI;8BAEI,KAAK;;8BAYvB,KAAK;4BAKY,KAAK;2BAKJ,KAAK;yBAKnB,KAAK;wBAMf,CAAC;;;wBAoByB,KAAK;;oBAUN,GAAG;;;;;;;;oBA2CxB,IAAI,CAAC,OAAO;2CAEW,wBAAwB;2CACxB,0BAA0B;;;wBAoB3B,KAAK;wBAKL,KAAK;0BAKpB,KAAK;qBAMW,SAAS;;oBAWxB,MAAM;qBAKmB,EAAE;;IA7HhD,eAAe;QACrB,IAAI,CAAC,QAAQ,GAAGA,qBAAa,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;KAC/D;IAiJD,iBAAiB;QACb,IAAI,CAAC,mBAAmB,mCACjBC,6BAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,GAC9BC,yBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,qBAAqB,CAAC,CACvD,CAAC;KACL;IAED,iBAAiB;QACb,IAAI,CAAC,eAAe,EAAE,CAAC;QACF;YACjB,QAAQ,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,iBAAiB,EAAE;gBACtD,MAAM,EAAE,IAAI,CAAC,EAAE;aAClB,CAAC,CAAC,CAAC;SACP;KACJ;IAED,oBAAoB;QACK;YACjB,QAAQ,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,mBAAmB,EAAE;gBACxD,MAAM,EAAE,IAAI,CAAC,EAAE;aAClB,CAAC,CAAC,CAAC;SACP;KACJ;;;;;;IAQD,MAAM,OAAO;QACT,IAAI,IAAI,CAAC,WAAW,EAAE;YAClB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;SAC3B;KACJ;;;;IAMD,eAAe;QACX,OAAO,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,WAAY,CAAC,CAAC;KAC7C;IAGD,MAAM,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;QAC5EC,4BAAoB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;KACvD;IAEO,gBAAgB;QACpB,OAAO,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;YACzD,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE,QAAQ,EAAE,CAAC;KACrC;IA0BO,uBAAuB;QAC3B,IAAI,CAAC,cAAc,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC;KAC9C;IAGD,sBAAsB;QAClB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,cAAc,GAAG,gBAAgB,GAAG,YAAY,CAAC;KAC7E;IAED,MAAM;QACF,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACtC,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;QACtC,MAAM,KAAK,GAAGC,qBAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACrC,IAAI,KAAK,EAAE;YACP,KAAK,CAAC,EAAE,GAAG,OAAO,CAAC;SACtB;QAED,QACIC,QAACC,UAAI,sEACc,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,qBAC3B,CAAC,CAAC,IAAI,CAAC,WAAW,qBAClB,CAAC,CAAC,IAAI,CAAC,WAAW,IAElC,IAAI,CAAC,WAAW,IAAID,kBAAM,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,IAAE,IAAI,CAAC,WAAW,CAAQ,IAAI,IAAI,EACxF,IAAI,CAAC,IAAI,IAAIA,0BAAc,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,GAAG,GAAgB,IAAI,IAAI,EAC7EA,kFACI,KAAK,EAAC,cAAc,EACpB,GAAG,EAAE,KAAK,IAAI,IAAI,CAAC,WAAW,GAAG,KAAK,qBACrB,KAAK,GAAG,OAAO,GAAG,IAAI,EACvC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,IAAI,EAAE,EACnC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,cAAc,GAAG,MAAM,GAAG,IAAI,CAAC,IAAI,EAC9C,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,IACjB,IAAI,CAAC,mBAAmB,EAC9B,EACD,IAAI,CAAC,IAAI,KAAK,UAAU,IACrBA,oBAAQ,KAAK,EAAE,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,2BAA2B,GAAG,IAAI,CAAC,2BAA2B,EAAE,KAAK,EAAC,iBAAiB,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,uBAAuB,EAAE,IAC3KA,0BAAc,IAAI,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,EAAC,GAAG,GAAgB,CAC1D,IACT,IAAI,EACP,IAAI,CAAC,WAAW,IAAIA,kBAAM,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,IAAE,IAAI,CAAC,WAAW,CAAQ,IAAI,IAAI,CACtF,EACT;KACL;;;;;;;;AAGL,IAAI,QAAQ,GAAG,CAAC,CAAC;;;;;","names":["debounceEvent","inheritAriaAttributes","inheritAttributes","setOrRemoveAttribute","findItemLabel","h","Host"],"sources":["src/components/input/input.scss?tag=wcs-input&encapsulation=shadow","src/components/input/input.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n@import '../../style/placeholder.scss';\n\n:host {\n    --wcs-input-icon-color-default: var(--wcs-semantic-color-foreground-brand);\n    --wcs-input-icon-color-focus: var(--wcs-semantic-color-foreground-brand);\n    --wcs-input-icon-color-disabled: var(--wcs-semantic-color-foreground-disabled);\n\n    --wcs-input-background-color: var(--wcs-semantic-color-background-control-default);\n\n    --wcs-input-border-radius-left: var(--wcs-semantic-border-radius-base); // Overridden from prefix suffix group in form-field\n    --wcs-input-border-radius-right: var(--wcs-semantic-border-radius-base); // Overridden from prefix suffix group in form-field\n\n    --wcs-input-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-input-border-width-focus: var(--wcs-semantic-border-width-large);\n\n    --wcs-input-height-l: var(--wcs-semantic-size-l);\n    --wcs-input-height-m: var(--wcs-semantic-size-m);\n    --wcs-input-height-s: var(--wcs-semantic-size-s);\n    --wcs-input-font-size-l: var(--wcs-semantic-font-size-l);\n    --wcs-input-font-size-m: var(--wcs-semantic-font-size-m);\n    --wcs-input-font-size-s: var(--wcs-semantic-font-size-s);\n\n    --wcs-input-prefix-suffix-background-color: var(--wcs-semantic-color-background-surface-accent-lighter);\n    --wcs-input-prefix-suffix-color: var(--wcs-semantic-color-foreground-on-accent);\n    --wcs-input-prefix-suffix-color-disabled: var(--wcs-semantic-color-text-disabled);\n    --wcs-input-prefix-suffix-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-input-border-style-default: solid;\n    --wcs-input-border-style-focus: var(--wcs-semantic-border-style-focus-control);\n\n    --wcs-input-border-color-default: var(--wcs-semantic-color-border-primary);\n    --wcs-input-border-color-disabled: var(--wcs-semantic-color-border-disabled);\n    --wcs-input-border-color-focus: var(--wcs-semantic-color-border-control-focus);\n    --wcs-input-reveal-password-button-border-color-focus: var(--wcs-semantic-color-border-focus-base);\n    --wcs-input-border-color-error: var(--wcs-semantic-color-border-critical);\n\n    --wcs-input-value-color: var(--wcs-semantic-color-text-primary);\n    --wcs-input-value-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-input-placeholder-color: var(--wcs-semantic-color-text-tertiary);\n    --wcs-input-placeholder-font-weight: var(--wcs-semantic-font-weight-roman);\n    --wcs-input-placeholder-font-style: var(--wcs-semantic-font-style-control-placeholder);\n\n    --wcs-input-text-color-disabled: var(--wcs-semantic-color-text-disabled);\n\n    --wcs-input-min-height: var(--wcs-semantic-size-s);\n    --wcs-input-padding-horizontal-s: calc(1.5 * var(--wcs-semantic-spacing-base));\n    --wcs-input-padding-horizontal-m: var(--wcs-semantic-spacing-large);\n    --wcs-input-padding-horizontal-l: var(--wcs-semantic-spacing-large);\n    --wcs-input-gap: var(--wcs-semantic-spacing-base);\n\n    // Default\n    --wcs-input-host-height: var(--wcs-input-height-m);\n    --wcs-input-font-size: var(--wcs-input-font-size-m);\n    padding-left: calc(var(--wcs-input-padding-horizontal-m));\n    padding-right: calc(var(--wcs-input-padding-horizontal-m));\n\n    display: flex;\n    width: 100%;\n    height: var(--wcs-input-host-height);\n    box-sizing: border-box;\n    border-radius: var(--wcs-input-border-radius-left) var(--wcs-input-border-radius-right) var(--wcs-input-border-radius-right) var(--wcs-input-border-radius-left);\n    background-color: var(--wcs-input-background-color);\n    outline: var(--wcs-input-border-style-default) var(--wcs-input-border-width) var(--wcs-input-border-color-default);\n    outline-offset: calc(var(--wcs-input-border-width) * -1);\n    background-clip: padding-box;\n\n    gap: var(--wcs-input-gap);\n\n    input {\n        overflow: hidden;\n        height: var(--wcs-input-host-height);\n        width: 100%;\n        padding: 0; // Reset padding from user agent stylesheet, it's the container that will handle padding\n        background-color: transparent;\n        font-family: var(--wcs-font-sans-serif);\n        color: var(--wcs-input-value-color);\n        font-weight: var(--wcs-input-value-font-weight) !important;\n        border: none;\n        font-size: var(--wcs-input-font-size, 1rem);\n        line-height: 1.5;\n\n        &::placeholder {\n            @include placeholder(var(--wcs-input-placeholder-color), var(--wcs-input-placeholder-font-weight), var(--wcs-input-placeholder-font-style));\n        }\n    }\n\n    input:focus {\n        box-shadow: none;\n        outline: 0;\n    }\n\n    button.toggle_password {\n        background: transparent;\n        border: none;\n        color: inherit;\n\n        cursor: pointer;\n\n\n        &:focus-visible {\n            @include focus-outline(var(--wcs-input-reveal-password-button-border-color-focus), $outline-offset: calc(-2 * var(--wcs-input-border-width-focus)));\n        }\n    }\n\n    .prefix, .suffix {\n        color: var(--wcs-input-prefix-suffix-color);\n        display: flex;\n        white-space: nowrap;\n        align-items: center;\n        font-size: var(--wcs-input-font-size, 1rem);\n        padding: 0 calc(var(--wcs-input-padding-horizontal-m) / 2);\n        font-weight: var(--wcs-input-prefix-suffix-font-weight) !important;\n        background-color: var(--wcs-input-prefix-suffix-background-color);\n    }\n\n    .prefix {\n        border-radius: var(--wcs-internal-input-border-radius-left) 0 0 var(--wcs-internal-input-border-radius-left);\n    }\n\n    .suffix {\n        border-radius: 0 var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-right) 0;\n    }\n\n    wcs-mat-icon {\n        color: var(--wcs-input-icon-color-default);\n    }\n}\n\n:host([size=l]) {\n    --wcs-input-host-height: var(--wcs-input-height-l);\n    --wcs-input-font-size: var(--wcs-input-font-size-l);\n\n    padding-left: calc(var(--wcs-input-padding-horizontal-l));\n    padding-right: calc(var(--wcs-input-padding-horizontal-l));\n}\n\n:host([size=m]) { // Default\n    --wcs-input-host-height: var(--wcs-input-height-m);\n    --wcs-input-font-size: var(--wcs-input-font-size-m);\n\n    padding-left: calc(var(--wcs-input-padding-horizontal-m));\n    padding-right: calc(var(--wcs-input-padding-horizontal-m));\n}\n\n:host([size=s]) {\n    --wcs-input-host-height: var(--wcs-input-height-s);\n    --wcs-input-font-size: var(--wcs-input-font-size-s);\n\n    padding-left: calc(var(--wcs-input-padding-horizontal-s));\n    padding-right: calc(var(--wcs-input-padding-horizontal-s));\n}\n\n:host([state=error]) {\n    outline-color: var(--wcs-input-border-color-error) !important;\n}\n\n:host([data-has-prefix]) {\n    padding-left: 0;\n}\n\n:host([data-has-suffix]) {\n    padding-right: 0;\n}\n\n:host([disabled]) {\n    cursor: not-allowed; // padding is handled by the container, so we need to set cursor not allowed on it\n    outline: var(--wcs-input-border-style-default) var(--wcs-input-border-width) var(--wcs-input-border-color-disabled);\n    --wcs-input-background-color: var(--wcs-semantic-color-background-control-disabled);\n\n    input {\n        cursor: not-allowed;\n        color: var(--wcs-input-text-color-disabled);\n\n        &::placeholder {\n            color: var(--wcs-input-text-color-disabled);\n        }\n    }\n\n    .prefix, .suffix {\n        color: var(--wcs-input-prefix-suffix-color-disabled);\n        cursor: text; // reset cursor to text for prefix and suffix, to be able to select text\n    }\n\n    wcs-mat-icon {\n        color: var(--wcs-input-icon-color-disabled);\n        cursor: not-allowed;\n    }\n}\n\n:host([readonly]) {\n    --wcs-input-background-color: var(--wcs-semantic-color-background-control-readonly);\n    --wcs-input-border-width: 0;\n}\n\n:host(:focus-within) {\n    outline: var(--wcs-input-border-style-focus) var(--wcs-input-border-width-focus) var(--wcs-input-border-color-focus);\n    outline-offset: calc(var(--wcs-input-border-width-focus) * -1);\n\n    wcs-mat-icon {\n        color: var(--wcs-input-icon-color-focus);\n    }\n}\n","import {\n    Build,\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Method,\n    Prop,\n    State,\n    Watch\n} from '@stencil/core';\nimport {\n    debounceEvent,\n    findItemLabel,\n    inheritAriaAttributes,\n    inheritAttributes,\n    setOrRemoveAttribute\n} from '../../utils/helpers';\nimport {\n    AutocompleteTypes,\n    InputChangeEventDetail,\n    TextFieldTypes,\n    WcsInputSize,\n    WcsInputAutocorrect,\n    WcsInputEnterKeyHint,\n    WcsInputInputMode,\n    WcsInputState\n} from './input-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst INPUT_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The input component is a form control that accepts a single line of text.\n * Implementation mainly inspired from Ionic Input Component.\n *\n * ## Accessibility guidelines 💡\n * > - If you use wcs-input outside a wcs-form-field, you have to manage the label and the error message yourself.\n * > You can use the `aria-label` attribute to provide a label for screen readers but adds no visual label.\n * \n * @cssprop --wcs-input-icon-color-default - default icon color when the input is not focused\n * @cssprop --wcs-input-icon-color-focus - icon color when the input is focused\n * @cssprop --wcs-input-icon-color-disabled - icon color when the input is disabled\n *\n * @cssprop --wcs-input-background-color - background color of the input\n *\n * @cssprop --wcs-input-border-radius-left - border radius of the left side of the input\n * @cssprop --wcs-input-border-radius-right - border radius of the right side of the input\n * \n * @cssprop --wcs-input-border-width - border width of the input\n * @cssprop --wcs-input-border-width-focus - border width of the input when focused\n *\n * @cssprop --wcs-input-height-l - large height of the input\n * @cssprop --wcs-input-height-m - medium height of the input\n * @cssprop --wcs-input-height-s - small height of the input\n * @cssprop --wcs-input-font-size-l - large font size of the input\n * @cssprop --wcs-input-font-size-m - medium font size of the input\n * @cssprop --wcs-input-font-size-s - small font size of the input\n *\n * @cssprop --wcs-input-border-style-default - default border style of the input\n * @cssprop --wcs-input-border-style-focus - border style of the input when focused\n * \n * @cssprop --wcs-input-prefix-suffix-background-color - background color of the suffix/prefix\n * @cssprop --wcs-input-prefix-suffix-color - color of the suffix/prefix\n * @cssprop --wcs-input-prefix-suffix-color-disabled - color of the suffix/prefix when the input is disabled\n * @cssprop --wcs-input-prefix-suffix-font-weight - font weight of the suffix/prefix\n *\n * @cssprop --wcs-input-border-color-default - default border color of the input when not focused\n * @cssprop --wcs-input-border-color-disabled - border color of the input when disabled\n * @cssprop --wcs-input-border-color-focus - border color of the input when focused\n * @cssprop --wcs-input-reveal-password-button-border-color-focus - border color of the show/hide password button when focused\n * @cssprop --wcs-input-border-color-error - border color of the input when in error state\n *\n * @cssprop --wcs-input-value-color - color of the input value\n * @cssprop --wcs-input-value-font-weight - font weight of the input value\n * \n * @cssprop --wcs-input-placeholder-color - color of the input placeholder\n * @cssprop --wcs-input-placeholder-font-weight - font weight of the input placeholder\n * @cssprop --wcs-input-placeholder-font-style - font style of the input placeholder\n * \n * @cssprop --wcs-input-text-color-disabled - color of the input when disabled\n *\n * @cssprop --wcs-input-padding-horizontal-s - horizontal padding of the input in small size\n * @cssprop --wcs-input-padding-horizontal-m - horizontal padding of the input in medium size\n * @cssprop --wcs-input-padding-horizontal-l - horizontal padding of the input in large size\n * \n * @cssprop --wcs-input-gap - gap between text input and icon\n */\n@Component({\n    tag: 'wcs-input',\n    styleUrl: 'input.scss',\n    shadow: { delegatesFocus: true },\n})\nexport class Input implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeInput?: HTMLInputElement;\n    private inputId = `wcs-input-${inputIds++}`;\n    private inheritedAttributes: { [k: string]: any } = {};\n    private iconPassword = \"visibility\";\n\n    /**\n     * This is required for a WebKit bug which requires us to\n     * blur and focus an input to properly focus the input in\n     * an item with delegatesFocus. It will no longer be needed\n     * with iOS 14.\n     *\n     * @internal\n     */\n    @Prop() fireFocusEvents: boolean = true;\n\n    @State() private passwordReveal: boolean = false;\n\n    /**\n     * If the value of the type attribute is `\"file\"`, then this attribute will indicate the types of files that the\n     * server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers.\n     */\n    @Prop() accept?: string;\n\n    /**\n     * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n     * Available options: `\"off\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`.\n     */\n    @Prop() autocapitalize = 'off';\n\n    /**\n     * Indicates whether the value of the control can be automatically completed by the browser.\n     */\n    @Prop() autocomplete: AutocompleteTypes = 'off';\n\n    /**\n     * Whether auto correction should be enabled when the user is entering/editing the text value.\n     */\n    @Prop() autocorrect: WcsInputAutocorrect = 'off';\n\n    /**\n     * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n     */\n    @Prop() autofocus: boolean = false;\n\n    /**\n     * Set the amount of time, in milliseconds, to wait to trigger the `wcsInput` event after each keystroke.\n     * This also impacts form bindings such as `ngModel` or `v-model`.\n     */\n    @Prop() debounce = 0;\n\n    @Watch('debounce')\n    protected debounceChanged() {\n        this.wcsInput = debounceEvent(this.wcsInput, this.debounce);\n    }\n\n    /**\n     * Prefix displayed before the text field contents. This is not included in the value.\n     */\n    @Prop() prefixLabel: string;\n\n    /**\n     * Suffix displayed after the text field contents. This is not included in the value.\n     */\n    @Prop() suffixLabel: string;\n\n    /**\n     * If `true`, the user cannot interact with the input.\n     */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /**\n     * A hint to the browser for which enter key to display.\n     */\n    @Prop() enterkeyhint?: WcsInputEnterKeyHint;\n\n    /**\n     * Specify the size (height) of the input.\n     */\n    @Prop({reflect: true}) size: WcsInputSize = 'm';\n\n    /**\n     * Name of the material icon to add to the input\n     */\n    @Prop() icon: string;\n\n    /**\n     * A hint to the browser for which keyboard to display.\n     */\n    @Prop() inputmode?: WcsInputInputMode;\n\n    /**\n     * The maximum value, which must not be less than its minimum (min attribute) value.\n     */\n    @Prop() max?: string;\n\n    /**\n     * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute\n     * specifies the maximum number of characters that the user can enter.\n     */\n    @Prop() maxlength?: number;\n\n    /**\n     * The minimum value, which must not be greater than its maximum (max attribute) value.\n     */\n    @Prop() min?: string;\n\n    /**\n     * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute\n     * specifies the minimum number of characters that the user can enter.\n     */\n    @Prop() minlength?: number;\n\n    /**\n     * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to\n     * `\"email\"` or `\"file\"`, otherwise it is ignored.\n     */\n    @Prop({ reflect: true }) multiple?: boolean;\n\n    /**\n     * The name of the control, which is submitted with the form data.\n     */\n    @Prop() name: string = this.inputId;\n\n    @Prop() hidePasswordButtonAriaLabel: string = \"Cacher le mot de passe\";\n    @Prop() showPasswordButtonAriaLabel: string = \"Afficher le mot de passe\";\n\n    /**\n     * A regular expression that the value is checked against. The pattern must match the entire value, not just some\n     * subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value\n     * of the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"date\"`, or `\"password\"`, otherwise\n     * it is ignored. When the type attribute is `\"date\"`, `pattern` will only be used in browsers that do not support\n     * the `\"date\"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for\n     * more information.\n     */\n    @Prop() pattern?: string;\n\n    /**\n     * Instructional text that shows before the input has a value.\n     */\n    @Prop() placeholder?: string | null;\n\n    /**\n     * If `true`, the user cannot modify the value.\n     */\n    @Prop({ reflect: true }) readonly: boolean = false;\n\n    /**\n     * If `true`, the user must fill in a value before submitting a form.\n     */\n    @Prop({ reflect: true }) required: boolean = false;\n\n    /**\n     * If `true`, the element will have its spelling and grammar checked.\n     */\n    @Prop() spellcheck: boolean = false;\n\n    /**\n     * Specifies the state of the input. By default the input is in an normal state but you can to set it to 'error'\n     * state if the data given by the user is not valid.\n     */\n    @Prop({reflect: true}) state: WcsInputState = 'initial';\n\n    /**\n     * Works with the min and max attributes to limit the increments at which a value can be set.\n     * Possible values are: `\"any\"` or a positive floating point number.\n     */\n    @Prop() step?: string;\n\n    /**\n     * The type of control to display. The default type is text.\n     */\n    @Prop() type: TextFieldTypes = 'text';\n\n    /**\n     * The value of the input.\n     */\n    @Prop({mutable: true}) value?: string | number | null = '';\n\n    /**\n     * Emitted when a keyboard input occurred. See https://developer.mozilla.org/en-US/docs/Web/Events/input\n     */\n    @Event() wcsInput!: EventEmitter<KeyboardEvent>;\n\n    /**\n     * Emitted when the value has changed. See https://developer.mozilla.org/en-US/docs/Web/Events/change\n     */\n    @Event() wcsChange!: EventEmitter<InputChangeEventDetail>;\n\n    /**\n     * Emitted when the input loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    /**\n     * Emitted when the input has focus.\n     */\n    @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n    componentWillLoad() {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, INPUT_INHERITED_ATTRS)\n        };\n    }\n\n    connectedCallback() {\n        this.debounceChanged();\n        if (Build.isBrowser) {\n            document.dispatchEvent(new CustomEvent('wcsInputDidLoad', {\n                detail: this.el\n            }));\n        }\n    }\n\n    disconnectedCallback() {\n        if (Build.isBrowser) {\n            document.dispatchEvent(new CustomEvent('wcsInputDidUnload', {\n                detail: this.el\n            }));\n        }\n    }\n\n    /**\n     * Sets blur on the native `input` in `wcs-input`. Use this method instead of the global\n     * `input.blur()`.\n     * @internal\n     */\n    @Method()\n    async setBlur() {\n        if (this.nativeInput) {\n            this.nativeInput.blur();\n        }\n    }\n\n    /**\n     * Returns the native `<input>` element used under the hood.\n     */\n    @Method()\n    getInputElement(): Promise<HTMLInputElement> {\n        return Promise.resolve(this.nativeInput!);\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeInput, attr, value);\n    }\n    \n    private getValueAsString(): string {\n        return typeof this.value === 'number' ? this.value.toString() :\n            (this.value || '').toString();\n    }\n\n    private onInput = (ev: Event) => {\n        const input = ev.target as HTMLInputElement | null;\n        if (input) {\n            this.value = input.value || '';\n        }\n        this.wcsInput.emit(ev as KeyboardEvent);\n    }\n\n    private onChange = (_: Event) => {\n        this.wcsChange.emit({value: this.nativeInput.value});\n    }\n\n    private onBlur = (ev: FocusEvent) => {\n        if (this.fireFocusEvents) {\n            this.wcsBlur.emit(ev);\n        }\n    }\n\n    private onFocus = (ev: FocusEvent) => {\n        if (this.fireFocusEvents) {\n            this.wcsFocus.emit(ev);\n        }\n    }\n\n    private passwordRevealIconClick(): void {\n        this.passwordReveal = !this.passwordReveal;\n    }\n\n    @Watch('passwordReveal')\n    onPasswordRevealChange(): void {\n        this.iconPassword = this.passwordReveal ? 'visibility_off' : 'visibility';\n    }\n\n    render() {\n        const value = this.getValueAsString();\n        const labelId = this.inputId + '-lbl';\n        const label = findItemLabel(this.el);\n        if (label) {\n            label.id = labelId;\n        }\n\n        return (\n            <Host\n                aria-disabled={this.disabled ? 'true' : null}\n                data-has-prefix={!!this.prefixLabel}\n                data-has-suffix={!!this.suffixLabel}\n            >\n                {this.prefixLabel ? (<span class=\"prefix\" part=\"prefix\">{this.prefixLabel}</span>) : null}\n                {this.icon ? (<wcs-mat-icon icon={this.icon} size=\"m\"></wcs-mat-icon>) : null}\n                <input\n                    class=\"native-input\"\n                    ref={input => this.nativeInput = input}\n                    aria-labelledby={label ? labelId : null}\n                    disabled={this.disabled}\n                    accept={this.accept}\n                    autoCapitalize={this.autocapitalize}\n                    autoComplete={this.autocomplete}\n                    autoCorrect={this.autocorrect}\n                    autoFocus={this.autofocus}\n                    enterKeyHint={this.enterkeyhint}\n                    inputMode={this.inputmode}\n                    min={this.min}\n                    max={this.max}\n                    minLength={this.minlength}\n                    maxLength={this.maxlength}\n                    multiple={this.multiple}\n                    name={this.name}\n                    pattern={this.pattern}\n                    placeholder={this.placeholder || ''}\n                    readOnly={this.readonly}\n                    required={this.required}\n                    spellcheck={this.spellcheck}\n                    step={this.step}\n                    type={this.passwordReveal ? 'text' : this.type}\n                    value={value}\n                    onInput={this.onInput}\n                    onChange={this.onChange}\n                    onBlur={this.onBlur}\n                    onFocus={this.onFocus}\n                    {...this.inheritedAttributes}\n                />\n                {this.type === \"password\" ? (\n                    <button title={this.passwordReveal ? this.hidePasswordButtonAriaLabel : this.showPasswordButtonAriaLabel} class=\"toggle_password\" onClick={() => this.passwordRevealIconClick()}>\n                        <wcs-mat-icon icon={this.iconPassword} size=\"m\"></wcs-mat-icon>\n                    </button>\n                ) : null}\n                {this.suffixLabel ? (<span class=\"suffix\" part=\"suffix\">{this.suffixLabel}</span>) : null}\n            </Host>\n        );\n    }\n}\n\nlet inputIds = 0;\n"],"version":3}

package/dist/cjs/wcs-list-item-properties.cjs.entry.js

@@ -12,7 +12,7 @@ const ListItemProperties = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'b4131bd5c9705a5b017ac29ee741e1496eaccecb', slot: "properties" }, index.h("slot", { key: '53e532bd9bef66b7cd12b11a5a5b4007fd8388a0', name: "property" })));
+        return (index.h(index.Host, { key: 'c9403bd863f3fbd182426df25c089d61ac3e5986', slot: "properties" }, index.h("slot", { key: '23baae7bd7dc743b23fc5598c8a60b6edf37f9c4', name: "property" })));
     }
 };
 ListItemProperties.style = WcsListItemPropertiesStyle0;

package/dist/cjs/wcs-list-item-property.cjs.entry.js

@@ -12,7 +12,7 @@ const ListItemProperty = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'f10eb87301c67c20c4399434fcb86c3fa8873803', slot: "property" }, index.h("slot", { key: 'b397fb492c5decdead9a795dfa8e1aa841c3dd3c' })));
+        return (index.h(index.Host, { key: '8f87008b8f9a847e0ef6ca55d87b2eec24eb1763', slot: "property" }, index.h("slot", { key: '5ad7e2f0f44d93c9ba599f23a850648f88dbefb9' })));
     }
 };
 ListItemProperty.style = WcsListItemPropertyStyle0;

package/dist/cjs/wcs-list-item.cjs.entry.js

@@ -13,7 +13,7 @@ const ListItem = class {
         this.activated = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'e75a5557308e593cd9372a408f2fbacdbc246567' }, index.h("slot", { key: 'ae222ab991d7e1a3f174064a4d64abdfb1f446e8', name: "icon" }), index.h("div", { key: '723cdff320aba9e2e9261187a8daa6653692dbbc', class: "content" }, index.h("div", { key: 'd99bec4b10581d94ab91209411af4bc16aefbe89', class: "header" }, index.h("div", { key: '2addbe14990ed7129a6dd91b663dc2c44fc1be9f' }, index.h("slot", { key: 'ca003d5854722825677b29de6356c700c754e9fe', name: "title" }), index.h("slot", { key: '2bec2ea9dfef61f5d24194900e5304c7ef4dbe42', name: "properties" })), index.h("slot", { key: 'f26bee976fefd75b494c861255d11c301dcab9a4', name: "actions" })), index.h("slot", { key: '2f5201aa33857b078724f8552dbf4bfcf6f350ed', name: "description" }))));
+        return (index.h(index.Host, { key: '12f53246cdb5922136d782f186573f3558bebbed' }, index.h("slot", { key: 'e03247aafa44501292b6c86d58455dc91240151c', name: "icon" }), index.h("div", { key: '24b4b6b485457e2c37001360f55ce1f4e843366e', class: "content" }, index.h("div", { key: '736464f3f43ccbdd2a204c3a7b54b78f8ef79c4e', class: "header" }, index.h("div", { key: '13da0ca922bf545f5610326f5abfc135b66389c5' }, index.h("slot", { key: '1eb08b7d5aa3bef934f39527204f2633f51325df', name: "title" }), index.h("slot", { key: '3d506707345797e7e40246b18dc0aac557726d3c', name: "properties" })), index.h("slot", { key: '1a2afea410fe835bc8570e10e5f72a044d7a0218', name: "actions" })), index.h("slot", { key: 'b0e4e3ed4cb20abb4d80ac7ff8893cd7b6311aec', name: "description" }))));
     }
 };
 ListItem.style = WcsListItemStyle0;

package/dist/cjs/wcs-list-item.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-list-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,kjEAAkjE,CAAC;AACvkE,0BAAe,WAAW;;MCgCb,QAAQ;;;yBAI6B,KAAK;;IAEnD,MAAM;QACF,QACIA,QAACC,UAAI,uDACDD,mEAAM,IAAI,EAAC,MAAM,GAAE,EACnBA,kEAAK,KAAK,EAAC,SAAS,IAChBA,kEAAK,KAAK,EAAC,QAAQ,IACfA,oEACIA,mEAAM,IAAI,EAAC,OAAO,GAAE,EACpBA,mEAAM,IAAI,EAAC,YAAY,GAAE,CACvB,EACNA,mEAAM,IAAI,EAAC,SAAS,GAAE,CACpB,EACNA,mEAAM,IAAI,EAAC,aAAa,GAAE,CACxB,CACH,EACT;KACL;;;;;;","names":["h","Host"],"sources":["src/components/list-item/list-item.scss?tag=wcs-list-item&encapsulation=shadow","src/components/list-item/list-item.tsx"],"sourcesContent":[":host {\n    --wcs-list-item-padding: var(--wcs-semantic-spacing-large);\n    --wcs-list-item-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-list-item-border-color: var(--wcs-semantic-color-border-secondary);\n\n    --wcs-list-item-background-color-default: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-list-item-background-color-hover: var(--wcs-semantic-color-background-action-secondary-hover);\n    --wcs-list-item-background-color-active: var(--wcs-semantic-color-background-action-secondary-selected-default);\n    --wcs-list-item-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    --wcs-list-item-title-color: var(--wcs-semantic-color-text-primary);\n    --wcs-list-item-title-font-weight: var(--wcs-semantic-font-weight-heavy);\n    --wcs-list-item-title-line-height: var(--wcs-semantic-font-line-height-medium);\n    --wcs-list-item-title-margin-bottom: var(--wcs-semantic-spacing-base);\n\n    --wcs-list-item-icon-color: var(--wcs-semantic-color-text-secondary);\n    --wcs-list-item-icon-margin-right: var(--wcs-semantic-spacing-large);\n\n    --wcs-list-item-actions-margin-left: var(--wcs-semantic-spacing-base);\n\n\n    display: flex;\n    padding: var(--wcs-list-item-padding);\n    border: solid var(--wcs-list-item-border-width) var(--wcs-list-item-border-color);\n    margin-bottom: calc(-1 * var(--wcs-list-item-border-width));\n    background-color: var(--wcs-list-item-background-color-default);\n}\n\n:host(:hover) {\n    background-color: var(--wcs-list-item-background-color-hover);\n    transition: var(--wcs-list-item-transition-duration);\n}\n\n:host([activated]) {\n    background-color: var(--wcs-list-item-background-color-active);\n}\n\n::slotted([slot=title]) {\n    color: var(--wcs-list-item-title-color);\n    margin-bottom: var(--wcs-list-item-title-margin-bottom);\n    line-height: var(--wcs-list-item-title-line-height);\n    font-weight: var(--wcs-list-item-title-font-weight);\n    font-family: inherit;\n}\n\n::slotted([slot=icon]) {\n    color: var(--wcs-list-item-icon-color);\n    margin-right: var(--wcs-list-item-icon-margin-right);\n}\n\n::slotted([slot=actions]) {\n    margin-left: var(--wcs-list-item-actions-margin-left);\n}\n\n.content {\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n}\n\n.header {\n    display: flex;\n    justify-content: space-between;\n}\n","import { Component, ComponentInterface, h, Host, Prop } from '@stencil/core';\n\n/**\n * Lists are used for grouping a collection of related items.\n * \n * Standard lists can be used either with or without icons. Depending on the context, the list can have one or more\n * actions (favourite, download, delete, etc.). Use standard lists with a unique action when each line has an action.\n *\n * @slot title - Slot containing the title of the list item\n * @slot properties - Slot containing the `<wcs-list-item-properties>` element\n * @slot actions - Slot containing the actions of the list item, prefer using some `<wcs-button>` inside\n * @slot description - Slot containing the description of the list item\n * \n * @cssprop --wcs-list-item-padding - Padding of the list item\n * @cssprop --wcs-list-item-border-width - Border width of the list item\n * @cssprop --wcs-list-item-border-color - Border color of the list item\n * @cssprop --wcs-list-item-background-color-default - Background color of the list item\n * @cssprop --wcs-list-item-background-color-hover - Background color of the list item when hovered\n * @cssprop --wcs-list-item-background-color-active - Background color of the list item when active\n * @cssprop --wcs-list-item-transition-duration - Transition duration of the list item\n * @cssprop --wcs-list-item-title-color - Color of the title of the list item\n * @cssprop --wcs-list-item-title-font-weight - Font weight of the title of the list item\n * @cssprop --wcs-list-item-title-line-height - Line height of the title of the list item\n * @cssprop --wcs-list-item-title-margin-bottom - Margin bottom of the title of the list item\n * @cssprop --wcs-list-item-icon-color - Color of the icon of the list item\n * @cssprop --wcs-list-item-icon-margin-right - Margin right of the icon of the list item\n * @cssprop --wcs-list-item-actions-margin-left - Margin left of the actions of the list item\n */\n@Component({\n    tag: 'wcs-list-item',\n    styleUrl: 'list-item.scss',\n    shadow: true\n})\nexport class ListItem implements ComponentInterface {\n    /**\n     * True if the item is active. Adds a background color that highlights it.\n     */\n    @Prop({ mutable: true }) activated: boolean = false;\n\n    render() {\n        return (\n            <Host>\n                <slot name=\"icon\"/>\n                <div class=\"content\">\n                    <div class=\"header\">\n                        <div>\n                            <slot name=\"title\"/>\n                            <slot name=\"properties\"/>\n                        </div>\n                        <slot name=\"actions\"/>\n                    </div>\n                    <slot name=\"description\"/>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"version":3}
+{"file":"wcs-list-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,kjEAAkjE,CAAC;AACvkE,0BAAe,WAAW;;MCqCb,QAAQ;;;yBAI4C,KAAK;;IAElE,MAAM;QACF,QACIA,QAACC,UAAI,uDACDD,mEAAM,IAAI,EAAC,MAAM,GAAE,EACnBA,kEAAK,KAAK,EAAC,SAAS,IAChBA,kEAAK,KAAK,EAAC,QAAQ,IACfA,oEACIA,mEAAM,IAAI,EAAC,OAAO,GAAE,EACpBA,mEAAM,IAAI,EAAC,YAAY,GAAE,CACvB,EACNA,mEAAM,IAAI,EAAC,SAAS,GAAE,CACpB,EACNA,mEAAM,IAAI,EAAC,aAAa,GAAE,CACxB,CACH,EACT;KACL;;;;;;","names":["h","Host"],"sources":["src/components/list-item/list-item.scss?tag=wcs-list-item&encapsulation=shadow","src/components/list-item/list-item.tsx"],"sourcesContent":[":host {\n    --wcs-list-item-padding: var(--wcs-semantic-spacing-large);\n    --wcs-list-item-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-list-item-border-color: var(--wcs-semantic-color-border-secondary);\n\n    --wcs-list-item-background-color-default: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-list-item-background-color-hover: var(--wcs-semantic-color-background-action-secondary-hover);\n    --wcs-list-item-background-color-active: var(--wcs-semantic-color-background-action-secondary-selected-default);\n    --wcs-list-item-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    --wcs-list-item-title-color: var(--wcs-semantic-color-text-primary);\n    --wcs-list-item-title-font-weight: var(--wcs-semantic-font-weight-heavy);\n    --wcs-list-item-title-line-height: var(--wcs-semantic-font-line-height-medium);\n    --wcs-list-item-title-margin-bottom: var(--wcs-semantic-spacing-base);\n\n    --wcs-list-item-icon-color: var(--wcs-semantic-color-text-secondary);\n    --wcs-list-item-icon-margin-right: var(--wcs-semantic-spacing-large);\n\n    --wcs-list-item-actions-margin-left: var(--wcs-semantic-spacing-base);\n\n\n    display: flex;\n    padding: var(--wcs-list-item-padding);\n    border: solid var(--wcs-list-item-border-width) var(--wcs-list-item-border-color);\n    margin-bottom: calc(-1 * var(--wcs-list-item-border-width));\n    background-color: var(--wcs-list-item-background-color-default);\n}\n\n:host(:hover) {\n    background-color: var(--wcs-list-item-background-color-hover);\n    transition: var(--wcs-list-item-transition-duration);\n}\n\n:host([activated]) {\n    background-color: var(--wcs-list-item-background-color-active);\n}\n\n::slotted([slot=title]) {\n    color: var(--wcs-list-item-title-color);\n    margin-bottom: var(--wcs-list-item-title-margin-bottom);\n    line-height: var(--wcs-list-item-title-line-height);\n    font-weight: var(--wcs-list-item-title-font-weight);\n    font-family: inherit;\n}\n\n::slotted([slot=icon]) {\n    color: var(--wcs-list-item-icon-color);\n    margin-right: var(--wcs-list-item-icon-margin-right);\n}\n\n::slotted([slot=actions]) {\n    margin-left: var(--wcs-list-item-actions-margin-left);\n}\n\n.content {\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n}\n\n.header {\n    display: flex;\n    justify-content: space-between;\n}\n","import { Component, ComponentInterface, h, Host, Prop } from '@stencil/core';\n\n/**\n * Lists are used for grouping a collection of related items.\n * \n * Standard lists can be used either with or without icons. Depending on the context, the list can have one or more\n * actions (favourite, download, delete, etc.). Use standard lists with a unique action when each line has an action. \n * \n * ## Accessibility guidelines 💡\n * > - You should wrap your list-items inside a container with a `role` attribute set to `list`. On each `wcs-list-item`, \n *   you should set a `role` attribute to `listitem`. See the code below.\n * actions (favourite, download, delete, etc.). Use standard lists with a unique action when each line has an action.\n *\n * @slot title - Slot containing the title of the list item\n * @slot properties - Slot containing the `<wcs-list-item-properties>` element\n * @slot actions - Slot containing the actions of the list item, prefer using some `<wcs-button>` inside\n * @slot description - Slot containing the description of the list item\n * \n * @cssprop --wcs-list-item-padding - Padding of the list item\n * @cssprop --wcs-list-item-border-width - Border width of the list item\n * @cssprop --wcs-list-item-border-color - Border color of the list item\n * @cssprop --wcs-list-item-background-color-default - Background color of the list item\n * @cssprop --wcs-list-item-background-color-hover - Background color of the list item when hovered\n * @cssprop --wcs-list-item-background-color-active - Background color of the list item when active\n * @cssprop --wcs-list-item-transition-duration - Transition duration of the list item\n * @cssprop --wcs-list-item-title-color - Color of the title of the list item\n * @cssprop --wcs-list-item-title-font-weight - Font weight of the title of the list item\n * @cssprop --wcs-list-item-title-line-height - Line height of the title of the list item\n * @cssprop --wcs-list-item-title-margin-bottom - Margin bottom of the title of the list item\n * @cssprop --wcs-list-item-icon-color - Color of the icon of the list item\n * @cssprop --wcs-list-item-icon-margin-right - Margin right of the icon of the list item\n * @cssprop --wcs-list-item-actions-margin-left - Margin left of the actions of the list item\n */\n@Component({\n    tag: 'wcs-list-item',\n    styleUrl: 'list-item.scss',\n    shadow: true\n})\nexport class ListItem implements ComponentInterface {\n    /**\n     * True if the item is active. Adds a background color that highlights it.\n     */\n    @Prop({ reflect: true, mutable: true }) activated: boolean = false;\n\n    render() {\n        return (\n            <Host>\n                <slot name=\"icon\"/>\n                <div class=\"content\">\n                    <div class=\"header\">\n                        <div>\n                            <slot name=\"title\"/>\n                            <slot name=\"properties\"/>\n                        </div>\n                        <slot name=\"actions\"/>\n                    </div>\n                    <slot name=\"description\"/>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/cjs/wcs-mat-icon.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6f0140d8.js');
-const helpers = require('./helpers-871f5a3d.js');
+const helpers = require('./helpers-2f1a8ddc.js');
 
 const matIconCss = ":host{display:flex;flex-direction:column;justify-content:center}:host .size-s{font-size:18px !important}:host .size-m{font-size:24px !important}:host .size-l{font-size:36px !important}:host .size-xl{font-size:48px !important}:host .material-icons{font-family:\"Material Icons\";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}:host .material-icons-outlined{font-family:\"Material Icons Outlined\";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}:host .material-icons-two-tone{--google-font-color-materialiconstwotone:none;font-family:\"Material Icons Two Tone\";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}:host .material-icons-round{font-family:\"Material Icons Round\";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}:host .material-icons-sharp{font-family:\"Material Icons Sharp\";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}";
 const WcsMatIconStyle0 = matIconCss;
@@ -31,7 +31,7 @@ const MatIcon = class {
         helpers.setOrRemoveAttribute(this.nativeIcon, attr, value);
     }
     render() {
-        return (index.h(index.Host, { key: '2db12f2b8f6c1d6f45e1513f671af976d97152cb' }, index.h("i", Object.assign({ key: 'cfa280b4e9cf307801d82137de3c92f88a4879e0', "aria-hidden": "true", class: ICON_FAMILY_CLASS_NAME[this.family] + ' size-' + this.size, ref: (el) => (this.nativeIcon = el) }, this.inheritedAttributes), this.icon)));
+        return (index.h(index.Host, { key: '57b0feb64492a614f69e255808dd5ae511e6b1f2' }, index.h("i", Object.assign({ key: '57475c2aaf39a6f719fc65a5c58f14df97c49db0', "aria-hidden": "true", class: ICON_FAMILY_CLASS_NAME[this.family] + ' size-' + this.size, ref: (el) => (this.nativeIcon = el) }, this.inheritedAttributes), this.icon)));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/wcs-mat-icon.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-mat-icon.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,UAAU,GAAG,u0DAAu0D,CAAC;AAC31D,yBAAe,UAAU;;ACIzB,MAAM,sBAAsB,GAAuC;IAC/D,MAAM,EAAE,gBAAgB;IACxB,QAAQ,EAAE,yBAAyB;IACnC,OAAO,EAAE,yBAAyB;IAClC,OAAO,EAAE,sBAAsB;IAC/B,KAAK,EAAE,sBAAsB;CAChC,CAAA;AAED,MAAM,wBAAwB,GAAG,CAAC,OAAO,CAAC,CAAC;MAU9B,OAAO;;;QAGR,wBAAmB,GAAyB,EAAE,CAAC;;oBAStB,GAAG;sBAIC,QAAQ;;IAE7C,iBAAiB;QACb,IAAI,CAAC,mBAAmB,mCACjBA,6BAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,GAC9BC,yBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,wBAAwB,CAAC,CAC1D,CAAC;KACL;IAGD,MAAM,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;QAC5EC,4BAAoB,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;KACtD;IAED,MAAM;QACF,QACIC,QAACC,UAAI,uDACDD,6FAAe,MAAM,EAClB,KAAK,EAAE,sBAAsB,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,QAAQ,GAAG,IAAI,CAAC,IAAI,EACjE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,IAC/B,IAAI,CAAC,mBAAmB,GAC1B,IAAI,CAAC,IAAI,CACV,CACD,EACT;KACL;;;;;;;","names":["inheritAriaAttributes","inheritAttributes","setOrRemoveAttribute","h","Host"],"sources":["src/components/mat-icon/mat-icon.scss?tag=wcs-mat-icon&encapsulation=shadow","src/components/mat-icon/mat-icon.tsx"],"sourcesContent":["@use 'mat-icon-google-stylesheets';\n\n:host {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    .size-s {\n        font-size: 18px !important;\n    }\n\n    .size-m {\n        font-size: 24px !important;\n    }\n\n    .size-l {\n        font-size: 36px !important;\n    }\n\n    .size-xl {\n        font-size: 48px !important;\n    }\n\n    @include mat-icon-google-stylesheets.material-icons-classes\n}\n","import { Component, ComponentInterface, Element, h, Host, Method, Prop } from '@stencil/core';\nimport { MaterialIconFamily, MaterialIconSize } from './mat-icon-interface';\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst ICON_FAMILY_CLASS_NAME: Record<MaterialIconFamily, string> = {\n    filled: 'material-icons',\n    outlined: 'material-icons-outlined',\n    twotone: 'material-icons-two-tone',\n    rounded: 'material-icons-round',\n    sharp: 'material-icons-sharp'\n}\n\nconst MAT_ICON_INHERITED_ATTRS = ['title'];\n\n/**\n * A component used to display a [Material Icon](https://fonts.google.com/icons). Can be useful when used in wcs-grid or in a wcs-button.\n */\n@Component({\n    tag: 'wcs-mat-icon',\n    styleUrl: 'mat-icon.scss',\n    shadow: true\n})\nexport class MatIcon implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeIcon!: HTMLElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /**\n     * Use the icon name from Material Icons\n     */\n    @Prop() icon: string;\n    /**\n     * Size of the icon\n     */\n    @Prop() size: MaterialIconSize = 'm';\n    /**\n     * Family of the icon\n     */\n    @Prop() family: MaterialIconFamily = 'filled';\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, MAT_ICON_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeIcon, attr, value);\n    }\n\n    render() {\n        return (\n            <Host>\n                <i aria-hidden=\"true\"\n                   class={ICON_FAMILY_CLASS_NAME[this.family] + ' size-' + this.size}\n                   ref={(el) => (this.nativeIcon = el)}\n                   {...this.inheritedAttributes}>\n                    {this.icon}\n                </i>\n            </Host>\n        );\n    }\n}\n"],"version":3}
+{"file":"wcs-mat-icon.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,UAAU,GAAG,u0DAAu0D,CAAC;AAC31D,yBAAe,UAAU;;ACIzB,MAAM,sBAAsB,GAAuC;IAC/D,MAAM,EAAE,gBAAgB;IACxB,QAAQ,EAAE,yBAAyB;IACnC,OAAO,EAAE,yBAAyB;IAClC,OAAO,EAAE,sBAAsB;IAC/B,KAAK,EAAE,sBAAsB;CAChC,CAAA;AAED,MAAM,wBAAwB,GAAG,CAAC,OAAO,CAAC,CAAC;MAU9B,OAAO;;;QAGR,wBAAmB,GAAyB,EAAE,CAAC;;oBAStB,GAAG;sBAIC,QAAQ;;IAE7C,iBAAiB;QACb,IAAI,CAAC,mBAAmB,mCACjBA,6BAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,GAC9BC,yBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,wBAAwB,CAAC,CAC1D,CAAC;KACL;IAGD,MAAM,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;QAC5EC,4BAAoB,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;KACtD;IAED,MAAM;QACF,QACIC,QAACC,UAAI,uDACDD,6FAAe,MAAM,EAClB,KAAK,EAAE,sBAAsB,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,QAAQ,GAAG,IAAI,CAAC,IAAI,EACjE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,IAC/B,IAAI,CAAC,mBAAmB,GAC1B,IAAI,CAAC,IAAI,CACV,CACD,EACT;KACL;;;;;;;","names":["inheritAriaAttributes","inheritAttributes","setOrRemoveAttribute","h","Host"],"sources":["src/components/mat-icon/mat-icon.scss?tag=wcs-mat-icon&encapsulation=shadow","src/components/mat-icon/mat-icon.tsx"],"sourcesContent":["@use 'mat-icon-google-stylesheets';\n\n:host {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    .size-s {\n        font-size: 18px !important;\n    }\n\n    .size-m {\n        font-size: 24px !important;\n    }\n\n    .size-l {\n        font-size: 36px !important;\n    }\n\n    .size-xl {\n        font-size: 48px !important;\n    }\n\n    @include mat-icon-google-stylesheets.material-icons-classes\n}\n","import { Component, ComponentInterface, Element, h, Host, Method, Prop } from '@stencil/core';\nimport { MaterialIconFamily, MaterialIconSize } from './mat-icon-interface';\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst ICON_FAMILY_CLASS_NAME: Record<MaterialIconFamily, string> = {\n    filled: 'material-icons',\n    outlined: 'material-icons-outlined',\n    twotone: 'material-icons-two-tone',\n    rounded: 'material-icons-round',\n    sharp: 'material-icons-sharp'\n}\n\nconst MAT_ICON_INHERITED_ATTRS = ['title'];\n\n/**\n * A component used to display a [Material Icon](https://fonts.google.com/icons?icon.set=Material+Icons). Can be useful when used in wcs-grid or in a wcs-button.\n */\n@Component({\n    tag: 'wcs-mat-icon',\n    styleUrl: 'mat-icon.scss',\n    shadow: true\n})\nexport class MatIcon implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeIcon!: HTMLElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /**\n     * Use the icon name from Material Icons\n     */\n    @Prop() icon: string;\n    /**\n     * Size of the icon\n     */\n    @Prop() size: MaterialIconSize = 'm';\n    /**\n     * Family of the icon\n     */\n    @Prop() family: MaterialIconFamily = 'filled';\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, MAT_ICON_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeIcon, attr, value);\n    }\n\n    render() {\n        return (\n            <Host>\n                <i aria-hidden=\"true\"\n                   class={ICON_FAMILY_CLASS_NAME[this.family] + ' size-' + this.size}\n                   ref={(el) => (this.nativeIcon = el)}\n                   {...this.inheritedAttributes}>\n                    {this.icon}\n                </i>\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/cjs/wcs-modal.cjs.entry.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6f0140d8.js');
 const accessibility = require('./accessibility-5f681a74.js');
-const helpers = require('./helpers-871f5a3d.js');
+const helpers = require('./helpers-2f1a8ddc.js');
 
-const modalCss = "wcs-modal{--wcs-modal-backdrop-color:var(--wcs-semantic-color-background-backdrop);--wcs-modal-max-height:80%;--wcs-modal-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-modal-border-radius:var(--wcs-semantic-border-radius-base);--wcs-modal-padding:calc(3 * var(--wcs-semantic-spacing-base));--wcs-modal-border-width:var(--wcs-semantic-border-width-default);--wcs-modal-border-color:var(--wcs-semantic-color-border-secondary);--wcs-modal-title-margin-bottom:var(--wcs-semantic-spacing-large);--wcs-modal-title-font-size:var(--wcs-semantic-font-size-heading-4);--wcs-modal-title-font-weight:var(--wcs-semantic-font-weight-heavy);--wcs-modal-title-line-height:var(--wcs-semantic-font-line-height-medium);--wcs-modal-actions-margin-top:var(--wcs-semantic-spacing-large);--wcs-modal-width-s:288px;--wcs-modal-width-m:480px;--wcs-modal-width-l:864px;--wcs-modal-width-xl:1200px;z-index:999;position:fixed;top:0;bottom:0;left:0;right:0;display:none;background:var(--wcs-modal-backdrop-color)}wcs-modal[show]{display:flex;height:100vh;width:100vw;align-items:center;justify-content:center}wcs-modal[without-backdrop]{background-color:unset}wcs-modal[without-backdrop] .wcs-modal-container{border:solid var(--wcs-modal-border-width) var(--wcs-modal-border-color)}.wcs-modal-container{max-height:var(--wcs-modal-max-height, 80%);background-color:var(--wcs-modal-background-color);display:grid;grid-template-columns:100%;grid-template-rows:auto 1fr auto;box-sizing:border-box;pointer-events:auto;background-clip:padding-box;border-radius:var(--wcs-modal-border-radius);z-index:20000;padding:var(--wcs-modal-padding)}.wcs-modal-container[data-size=s]{width:var(--wcs-modal-width-s)}.wcs-modal-container[data-size=m]{width:var(--wcs-modal-width-m)}.wcs-modal-container[data-size=l]{width:var(--wcs-modal-width-l)}.wcs-modal-container[data-size=xl]{width:var(--wcs-modal-width-xl)}.wcs-modal-header{margin-bottom:var(--wcs-modal-title-margin-bottom);display:flex;align-items:center;justify-content:space-between}.wcs-modal-header h1{font-size:var(--wcs-modal-title-font-size);font-weight:var(--wcs-modal-title-font-weight);line-height:var(--wcs-modal-title-line-height);margin:0}.wcs-modal-content{overflow-y:var(--wcs-modal-overflow-y, auto)}.wcs-modal-actions{margin-top:var(--wcs-modal-actions-margin-top);display:flex;justify-content:flex-end}";
+const modalCss = "wcs-modal{--wcs-modal-backdrop-color:var(--wcs-semantic-color-background-backdrop);--wcs-modal-max-height:80%;--wcs-modal-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-modal-border-radius:var(--wcs-semantic-border-radius-base);--wcs-modal-padding:calc(3 * var(--wcs-semantic-spacing-base));--wcs-modal-border-width:var(--wcs-semantic-border-width-default);--wcs-modal-border-color:var(--wcs-semantic-color-border-secondary);--wcs-modal-title-margin-bottom:var(--wcs-semantic-spacing-large);--wcs-modal-title-font-size:var(--wcs-semantic-font-size-heading-4);--wcs-modal-title-font-weight:var(--wcs-semantic-font-weight-heavy);--wcs-modal-title-line-height:var(--wcs-semantic-font-line-height-medium);--wcs-modal-actions-margin-top:var(--wcs-semantic-spacing-large);--wcs-modal-width-s:288px;--wcs-modal-width-m:480px;--wcs-modal-width-l:864px;--wcs-modal-width-xl:1200px;z-index:999;position:fixed;top:0;bottom:0;left:0;right:0;display:none;background:var(--wcs-modal-backdrop-color)}wcs-modal[show]{display:flex;height:100vh;width:100vw;align-items:center;justify-content:center}wcs-modal[without-backdrop]{background-color:unset}wcs-modal[without-backdrop] .wcs-modal-container{border:solid var(--wcs-modal-border-width) var(--wcs-modal-border-color)}.wcs-modal-container{max-height:var(--wcs-modal-max-height, 80%);background-color:var(--wcs-modal-background-color);display:grid;grid-template-columns:100%;grid-template-rows:auto 1fr auto;box-sizing:border-box;pointer-events:auto;background-clip:padding-box;border-radius:var(--wcs-modal-border-radius);z-index:20000;padding:var(--wcs-modal-padding);width:var(--wcs-modal-width-m)}.wcs-modal-container[data-size=s]{width:var(--wcs-modal-width-s)}.wcs-modal-container[data-size=m]{width:var(--wcs-modal-width-m)}.wcs-modal-container[data-size=l]{width:var(--wcs-modal-width-l)}.wcs-modal-container[data-size=xl]{width:var(--wcs-modal-width-xl)}.wcs-modal-header{margin-bottom:var(--wcs-modal-title-margin-bottom);display:flex;align-items:center;justify-content:space-between}.wcs-modal-header h1{font-size:var(--wcs-modal-title-font-size);font-weight:var(--wcs-modal-title-font-weight);line-height:var(--wcs-modal-title-line-height);margin:0}.wcs-modal-content{overflow-y:var(--wcs-modal-overflow-y, auto)}.wcs-modal-actions{margin-top:var(--wcs-modal-actions-margin-top);display:flex;justify-content:flex-end}";
 const WcsModalStyle0 = modalCss;
 
 const MODAL_INHERITED_ATTRS = [];
@@ -43,6 +43,8 @@ const Modal = class {
         this.size = 'm';
         this.hideActions = false;
         this.modalTriggerControlsId = undefined;
+        this.initialFocusElementId = undefined;
+        this.disableAutoFocus = false;
     }
     componentWillLoad() {
         if (!this.modalTriggerControlsId) {
@@ -58,7 +60,19 @@ const Modal = class {
         this.updateFocusableElements();
         if (this.showAttributeChangedMarker) {
             this.showAttributeChangedMarker = false;
-            (_a = this.firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
+            if (this.disableAutoFocus) {
+                return;
+            }
+            if (!this.initialFocusElementId) {
+                (_a = this.firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            else {
+                const modalElementToFocusOnOpening = document.getElementById(this.initialFocusElementId);
+                if (!modalElementToFocusOnOpening) {
+                    console.warn(`wcs-modal: Unable to focus element - ID '${this.initialFocusElementId}' not found in DOM`);
+                }
+                modalElementToFocusOnOpening === null || modalElementToFocusOnOpening === void 0 ? void 0 : modalElementToFocusOnOpening.focus();
+            }
         }
     }
     async setAriaAttribute(attr, value) {
@@ -125,7 +139,7 @@ const Modal = class {
     }
     render() {
         const modalTitleId = `wcs-modal-title-${this.modalId}`;
-        return (index.h(index.Host, { key: '788a5cedac43a4d1852b4023f8600db0042845f0' }, index.h("div", Object.assign({ key: 'c55ba8369740a1ec9b818c0107500f93510aded1', class: "wcs-modal-container", "data-size": this.size, "aria-modal": true, role: "dialog", "aria-labelledby": modalTitleId, ref: (el) => (this.nativeDivDialog = el) }, this.inheritedAttributes), index.h("div", { key: '6f869f59b47b274c5dc0e0e759681fff626be7c1', class: "wcs-modal-header" }, index.h("h1", { key: '572be535d3479f26678cb54fd4937563021bfac5', id: modalTitleId }, index.h("slot", { key: 'f159aa7451f735f9e0f43c8005c64eab5dee00f5', name: "header" })), this.showCloseButton && (index.h("wcs-button", { key: 'd39b4182b6e5e1b41b6664cfccac9f1022ad9d8f', shape: "round", mode: "clear", id: "wcs-modal-close-button", "aria-label": this.closeButtonAriaLabel, onClick: ($event) => this.onCloseButtonClick($event) }, index.h("wcs-mat-icon", { key: '83a8991df30b15f89485d4445d2e4d01f937e321', icon: "close" })))), index.h("div", { key: 'fe83c50300c4a591ae36f9902fba434138c24beb', class: "wcs-modal-content" }, index.h("slot", { key: '5b18bfc38086089afcf0f4c60094ef5be0b603b7', onSlotchange: () => this.handleSlotContentChange() })), !this.hideActions && (index.h("div", { key: '0d3814339cb5c072c3fa6566c2114d8402977b47', class: "wcs-modal-actions" }, index.h("slot", { key: 'de8e11419a0507da6338040d6506abeee851aef5', name: "actions" }))))));
+        return (index.h(index.Host, { key: 'e609fe2024b73cab0bed97c0d3b7012d8deba893' }, index.h("div", Object.assign({ key: '23007c4ad4971263f7fd99d0e594216cd112f6ea', class: "wcs-modal-container", "data-size": this.size, "aria-modal": "true", role: "dialog", "aria-labelledby": modalTitleId, ref: (el) => (this.nativeDivDialog = el) }, this.inheritedAttributes), index.h("div", { key: 'bc3e2ead8e3e73da31882c5e87cde2780d9ef2f9', class: "wcs-modal-header" }, index.h("h1", { key: '87561fc92b0990d00e06463afc111e9bdeab6f20', id: modalTitleId }, index.h("slot", { key: 'dbf6d932257e7a264206ddf7caea8a80e4b2b069', name: "header" })), this.showCloseButton && (index.h("wcs-button", { key: '97036ea40d111c5ac737b1e3f789571cd524cb2d', shape: "round", mode: "clear", id: "wcs-modal-close-button", "aria-label": this.closeButtonAriaLabel, onClick: ($event) => this.onCloseButtonClick($event) }, index.h("wcs-mat-icon", { key: '24d6b531e788c2760c66804df96037714c9f854b', icon: "close" })))), index.h("div", { key: '34d9ddf3c4527395864a238f329d7b499eb9791b', class: "wcs-modal-content" }, index.h("slot", { key: '5bbd76fc7de9bc6f5aaec7257e7c73995d3e1447', onSlotchange: () => this.handleSlotContentChange() })), !this.hideActions && (index.h("div", { key: '0c082f533dd77e73721b3bcf29a6f3d3baac65b3', class: "wcs-modal-actions" }, index.h("slot", { key: '56bfb65b4784492747eda2f5eb87b29dc7704db3', name: "actions" }))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {