npm - wcs-core - Versions diffs - 7.1.0 → 7.2.0 - Mend

wcs-core 7.1.0 → 7.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (570) hide show

package/dist/esm/wcs-header.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { r as registerInstance, h, g as getElement, H as Host } from './index-d9de61ce.js';
 import { i as inheritAriaAttributes, a as inheritAttributes, s as setOrRemoveAttribute } from './helpers-ece6a2d3.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 = [];
@@ -22,7 +22,7 @@ const Header = class {
         };
     }
     __stencil_render() {
-        return (h("header", Object.assign({ key: '85663b1ee1555d9886c677ca05862ab447590c98', role: "banner", ref: (el) => (this.nativeHeader = el) }, this.inheritedAttributes), h("slot", { key: '7572b52b683fa171efd2c526c652865b003fd13e', name: "logo" }), h("slot", { key: '81646d012a254ea076c0490c96c4389ecf996dfb', name: "title" }), h("slot", { key: '1f13134c1a214106e747f887969edff2412fe7e7', name: "actions" })));
+        return (h("header", Object.assign({ key: '110c72f1b40917efdaa2c864c61a8ee99e35ce38', role: "banner", ref: (el) => (this.nativeHeader = el) }, this.inheritedAttributes), h("slot", { key: '8a593fc8e96ea73573fae78d9107897dee680c87', name: "logo" }), h("slot", { key: '1fefec6eee8652ac531c450f15d70cf7ab8ba1c9', name: "title" }), h("slot", { key: 'ef151920a52804693a99501ee62688036e7bcda8', name: "center" }), h("slot", { key: '9d817dd99f3edb3dbe4b5a4bced020c42b64a903', name: "actions" })));
     }
     get el() { return getElement(this); }
     render() { return h(Host, this.hostData(), this.__stencil_render()); }

package/dist/esm/wcs-header.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"wcs-header.entry.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,mCACjB,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,GAC9B,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,sBAAsB,CAAC,CACxD,CAAC;KACL;IAGD,MAAM,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;QAC5E,oBAAoB,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;KACxD;IAED,QAAQ;QACJ,OAAO;YACH,MAAM,EAAE,QAAQ;SACnB,CAAC;KACL;IAED;QACI,QACI,6EAAQ,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,IAAM,IAAI,CAAC,mBAAmB,GACrF,6DAAM,IAAI,EAAC,MAAM,GAAE,EACnB,6DAAM,IAAI,EAAC,OAAO,GAAE,EACpB,6DAAM,IAAI,EAAC,SAAS,GAAE,CACjB,EACX;KACL;;;;;;;;","names":[],"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}
1	+ {"file":"wcs-header.entry.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,mCACjB,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,GAC9B,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,sBAAsB,CAAC,CACxD,CAAC;KACL;IAGD,MAAM,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;QAC5E,oBAAoB,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;KACxD;IAED,QAAQ;QACJ,OAAO;YACH,MAAM,EAAE,QAAQ;SACnB,CAAC;KACL;IAED;QACI,QACI,6EAAQ,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,IAAM,IAAI,CAAC,mBAAmB,GACrF,6DAAM,IAAI,EAAC,MAAM,GAAE,EACnB,6DAAM,IAAI,EAAC,OAAO,GAAE,EACpB,6DAAM,IAAI,EAAC,QAAQ,GAAE,EACrB,6DAAM,IAAI,EAAC,SAAS,GAAE,CACjB,EACX;KACL;;;;;;;;","names":[],"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/esm/wcs-hint.entry.js CHANGED Viewed

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

package/dist/esm/wcs-horizontal-stepper.entry.js CHANGED Viewed

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

package/dist/esm/wcs-horizontal-stepper.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"wcs-horizontal-stepper.entry.js","mappings":"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","names":[],"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}
1	+ {"file":"wcs-horizontal-stepper.entry.js","mappings":"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","names":[],"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/esm/wcs-icon.entry.js CHANGED Viewed

@@ -22,7 +22,7 @@ const Icon = class {
                 [`icons-size-${this.size}`]: true
             }
         };
-        return (h("i", Object.assign({ key: 'e21a9bc955698494dd9835e2022182aa20a306e5' }, cssClass, { ref: (el) => (this.nativeIcon = el) }, this.inheritedAttributes)));
+        return (h("i", Object.assign({ key: '429ebd8357f8097d812e43f9bda0921323f7b981' }, cssClass, { ref: (el) => (this.nativeIcon = el) }, this.inheritedAttributes)));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/wcs-input.entry.js CHANGED Viewed

@@ -1,13 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-d9de61ce.js';
 import { r as debounceEvent, i as inheritAriaAttributes, a as inheritAttributes, s as setOrRemoveAttribute, t as findItemLabel } from './helpers-ece6a2d3.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-reveal-password-button-border-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-input-border-color-error:var(--wcs-semantic-color-border-critical);--wcs-input-value-color:var(--wcs-semantic-color-text-primary);--wcs-input-value-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-input-placeholder-color:var(--wcs-semantic-color-text-tertiary);--wcs-input-placeholder-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-input-placeholder-font-style:var(--wcs-semantic-font-style-control-placeholder);--wcs-input-text-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-input-min-height:var(--wcs-semantic-size-s);--wcs-input-padding-horizontal-s:calc(1.5 * var(--wcs-semantic-spacing-base));--wcs-input-padding-horizontal-m:var(--wcs-semantic-spacing-large);--wcs-input-padding-horizontal-l:var(--wcs-semantic-spacing-large);--wcs-input-gap:var(--wcs-semantic-spacing-base);display:flex;width:100%;height:var(--wcs-input-host-height);box-sizing:border-box;border-radius:var(--wcs-input-border-radius-left) var(--wcs-input-border-radius-right) var(--wcs-input-border-radius-right) var(--wcs-input-border-radius-left);background-color:var(--wcs-input-background-color);outline:var(--wcs-input-border-style-default) var(--wcs-input-border-width) var(--wcs-input-border-color-default);outline-offset:calc(var(--wcs-input-border-width) * -1);background-clip:padding-box;gap:var(--wcs-input-gap)}:host input{overflow:hidden;height:var(--wcs-input-host-height);width:100%;padding:0;background-color:transparent;font-family:var(--wcs-font-sans-serif);color:var(--wcs-input-value-color);font-weight:var(--wcs-input-value-font-weight) !important;border:none;font-size:var(--wcs-input-font-size, 1rem);line-height:1.5}:host input::placeholder{color:var(--wcs-input-placeholder-color);opacity:1;font-weight:var(--wcs-input-placeholder-font-weight);font-style:var(--wcs-input-placeholder-font-style)}:host input:focus{box-shadow:none;outline:0}:host button.toggle_password{background:transparent;border:none;color:inherit;cursor:pointer}:host button.toggle_password:focus-visible{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-input-reveal-password-button-border-color-focus);outline-offset:calc(-2 * var(--wcs-input-border-width-focus));border-radius:0.1rem}:host .prefix,:host .suffix{color:var(--wcs-input-prefix-suffix-color);display:flex;white-space:nowrap;align-items:center;font-size:var(--wcs-input-font-size, 1rem);padding:0 calc(var(--wcs-input-padding-horizontal-m) / 2);font-weight:var(--wcs-input-prefix-suffix-font-weight) !important;background-color:var(--wcs-input-prefix-suffix-background-color)}:host .prefix{border-radius:var(--wcs-internal-input-border-radius-left) 0 0 var(--wcs-internal-input-border-radius-left)}:host .suffix{border-radius:0 var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-right) 0}:host wcs-mat-icon{color:var(--wcs-input-icon-color-default)}:host([size=l]){--wcs-input-host-height:var(--wcs-input-height-l);--wcs-input-font-size:var(--wcs-input-font-size-l);padding-left:calc(var(--wcs-input-padding-horizontal-l));padding-right:calc(var(--wcs-input-padding-horizontal-l))}:host([size=m]){--wcs-input-host-height:var(--wcs-input-height-m);--wcs-input-font-size:var(--wcs-input-font-size-m);padding-left:calc(var(--wcs-input-padding-horizontal-m));padding-right:calc(var(--wcs-input-padding-horizontal-m))}:host([size=s]){--wcs-input-host-height:var(--wcs-input-height-s);--wcs-input-font-size:var(--wcs-input-font-size-s);padding-left:calc(var(--wcs-input-padding-horizontal-s));padding-right:calc(var(--wcs-input-padding-horizontal-s))}:host([state=error]){outline-color:var(--wcs-input-border-color-error) !important}:host([data-has-prefix]){padding-left:0}:host([data-has-suffix]){padding-right:0}:host([disabled]){cursor:not-allowed;outline:var(--wcs-input-border-style-default) var(--wcs-input-border-width) var(--wcs-input-border-color-disabled);--wcs-input-background-color:var(--wcs-semantic-color-background-control-disabled)}:host([disabled]) input{cursor:not-allowed;color:var(--wcs-input-text-color-disabled)}:host([disabled]) input::placeholder{color:var(--wcs-input-text-color-disabled)}:host([disabled]) .prefix,:host([disabled]) .suffix{color:var(--wcs-input-prefix-suffix-color-disabled);cursor:text}:host([disabled]) wcs-mat-icon{color:var(--wcs-input-icon-color-disabled);cursor:not-allowed}:host([readonly]){--wcs-input-background-color:var(--wcs-semantic-color-background-control-readonly);--wcs-input-border-width:0}:host(:focus-within){outline:var(--wcs-input-border-style-focus) var(--wcs-input-border-width-focus) var(--wcs-input-border-color-focus);outline-offset:calc(var(--wcs-input-border-width-focus) * -1)}:host(:focus-within) wcs-mat-icon{color:var(--wcs-input-icon-color-focus)}";
+const 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'];
@@ -79,10 +73,6 @@ const Input = class {
     }
     componentWillLoad() {
         this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), 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();
@@ -135,7 +125,7 @@ const Input = class {
         if (label) {
             label.id = labelId;
         }
-        return (h(Host, { key: '987bb9b2e0f16edc255e3cd33a92fad04a99369f', "aria-disabled": this.disabled ? 'true' : null, "data-has-prefix": !!this.prefixLabel, "data-has-suffix": !!this.suffixLabel }, this.prefixLabel ? (h("span", { class: "prefix", part: "prefix" }, this.prefixLabel)) : null, this.icon ? (h("wcs-mat-icon", { icon: this.icon, size: "m" })) : null, h("input", Object.assign({ key: '395351bfae844314151d7cbdd12f9b4047294b6a', 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" ? (h("button", { title: this.passwordReveal ? this.hidePasswordButtonAriaLabel : this.showPasswordButtonAriaLabel, class: "toggle_password", onClick: () => this.passwordRevealIconClick() }, h("wcs-mat-icon", { icon: this.iconPassword, size: "m" }))) : null, this.suffixLabel ? (h("span", { class: "suffix", part: "suffix" }, this.suffixLabel)) : null));
+        return (h(Host, { key: '20899914842d410ef72a8f81906e1e2be6e423cf', "aria-disabled": this.disabled ? 'true' : null, "data-has-prefix": !!this.prefixLabel, "data-has-suffix": !!this.suffixLabel }, this.prefixLabel ? (h("span", { class: "prefix", part: "prefix" }, this.prefixLabel)) : null, this.icon ? (h("wcs-mat-icon", { icon: this.icon, size: "m" })) : null, 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" ? (h("button", { title: this.passwordReveal ? this.hidePasswordButtonAriaLabel : this.showPasswordButtonAriaLabel, class: "toggle_password", onClick: () => this.passwordRevealIconClick() }, h("wcs-mat-icon", { icon: this.iconPassword, size: "m" }))) : null, this.suffixLabel ? (h("span", { class: "suffix", part: "suffix" }, this.suffixLabel)) : null));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }

package/dist/esm/wcs-input.entry.js.map CHANGED Viewed

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

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

package/dist/esm/wcs-list-item-property.entry.js CHANGED Viewed

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

package/dist/esm/wcs-list-item.entry.js CHANGED Viewed

@@ -9,7 +9,7 @@ const ListItem = class {
         this.activated = false;
     }
     render() {
-        return (h(Host, { key: 'fc01923b2eb3b33d6258718a81455ab790e2dcf4' }, h("slot", { key: '6748668e355f3aec9245110299def03ac8783f1e', name: "icon" }), h("div", { key: '46a944966bd87168ad909d7ff9046362a4adf2e2', class: "content" }, h("div", { key: 'd9d9e1d7bdcc5c1eb947e088b86a7308fd21f9af', class: "header" }, h("div", { key: '5dfb072ab048e89a4afe42e2e94b5299f455d889' }, h("slot", { key: 'ed261613330757d84b1f5f252b32ddf58270b4e8', name: "title" }), h("slot", { key: 'ed9f95eaddf982a4aaa07e7b41ae3b9e091c4c85', name: "properties" })), h("slot", { key: 'c0aae152b37a42ffb57fcd7fb70f44f83ddf8d3e', name: "actions" })), h("slot", { key: 'c7a6b166b7c6e0c160a758640e38feeb5dfcd55d', name: "description" }))));
+        return (h(Host, { key: '12f53246cdb5922136d782f186573f3558bebbed' }, h("slot", { key: 'e03247aafa44501292b6c86d58455dc91240151c', name: "icon" }), h("div", { key: '24b4b6b485457e2c37001360f55ce1f4e843366e', class: "content" }, h("div", { key: '736464f3f43ccbdd2a204c3a7b54b78f8ef79c4e', class: "header" }, h("div", { key: '13da0ca922bf545f5610326f5abfc135b66389c5' }, h("slot", { key: '1eb08b7d5aa3bef934f39527204f2633f51325df', name: "title" }), h("slot", { key: '3d506707345797e7e40246b18dc0aac557726d3c', name: "properties" })), h("slot", { key: '1a2afea410fe835bc8570e10e5f72a044d7a0218', name: "actions" })), h("slot", { key: 'b0e4e3ed4cb20abb4d80ac7ff8893cd7b6311aec', name: "description" }))));
     }
 };
 ListItem.style = WcsListItemStyle0;

package/dist/esm/wcs-mat-icon.entry.js CHANGED Viewed

@@ -27,7 +27,7 @@ const MatIcon = class {
         setOrRemoveAttribute(this.nativeIcon, attr, value);
     }
     render() {
-        return (h(Host, { key: '1e0c8f28a59f398d0981007401cda39bf9e089d8' }, h("i", Object.assign({ key: 'caa5e118dfeb306aef87a9b10514247d45cc2f9f', "aria-hidden": "true", class: ICON_FAMILY_CLASS_NAME[this.family] + ' size-' + this.size, ref: (el) => (this.nativeIcon = el) }, this.inheritedAttributes), this.icon)));
+        return (h(Host, { key: '57b0feb64492a614f69e255808dd5ae511e6b1f2' }, 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 getElement(this); }
 };

package/dist/esm/wcs-mat-icon.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"wcs-mat-icon.entry.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,mCACjB,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,GAC9B,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,wBAAwB,CAAC,CAC1D,CAAC;KACL;IAGD,MAAM,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;QAC5E,oBAAoB,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;KACtD;IAED,MAAM;QACF,QACI,EAAC,IAAI,uDACD,uFAAe,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":[],"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}
1	+ {"file":"wcs-mat-icon.entry.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,mCACjB,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,GAC9B,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,wBAAwB,CAAC,CAC1D,CAAC;KACL;IAGD,MAAM,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;QAC5E,oBAAoB,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;KACtD;IAED,MAAM;QACF,QACI,EAAC,IAAI,uDACD,uFAAe,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":[],"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/esm/wcs-modal.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement
 import { i as isFocusable, a as isElementFocused } from './accessibility-069640cf.js';
 import { i as inheritAriaAttributes, a as inheritAttributes, s as setOrRemoveAttribute, n as isTabKey } from './helpers-ece6a2d3.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 = [];
@@ -135,7 +135,7 @@ const Modal = class {
     }
     render() {
         const modalTitleId = `wcs-modal-title-${this.modalId}`;
-        return (h(Host, { key: '1b9a4d86bf1e97ef7ef988b7355b75eb5f344ca8' }, h("div", Object.assign({ key: 'ab5e3938796e950e9e3aa81cd35a723d6429a8e6', class: "wcs-modal-container", "data-size": this.size, "aria-modal": true, role: "dialog", "aria-labelledby": modalTitleId, ref: (el) => (this.nativeDivDialog = el) }, this.inheritedAttributes), h("div", { key: '80fe453c1ffd3453832c799f131d50c97d37954f', class: "wcs-modal-header" }, h("h1", { key: '632853fdbc254e92167fafd022b7f0d392b861bc', id: modalTitleId }, h("slot", { key: 'b84db0d064adae8e50a013315fd3c593a39a6f99', name: "header" })), this.showCloseButton && (h("wcs-button", { key: '27bf915ff1ccebab3de363d8dae6914de112aa7b', shape: "round", mode: "clear", id: "wcs-modal-close-button", "aria-label": this.closeButtonAriaLabel, onClick: ($event) => this.onCloseButtonClick($event) }, h("wcs-mat-icon", { key: 'adacfb9e0b2c435d97f35e8423dd21f4bb534212', icon: "close" })))), h("div", { key: '33757197132d566f2ade4ea1c1cf36bc914702b2', class: "wcs-modal-content" }, h("slot", { key: 'c742e77c50cccc69435c40cf845fa6280a1a7063', onSlotchange: () => this.handleSlotContentChange() })), !this.hideActions && (h("div", { key: 'e98977493e4fc5461fbab1b67d609a1a956b7fbf', class: "wcs-modal-actions" }, h("slot", { key: '56168022f0de471106a15b03f7b16c3c6d3cbc1b', name: "actions" }))))));
+        return (h(Host, { key: 'e609fe2024b73cab0bed97c0d3b7012d8deba893' }, 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), h("div", { key: 'bc3e2ead8e3e73da31882c5e87cde2780d9ef2f9', class: "wcs-modal-header" }, h("h1", { key: '87561fc92b0990d00e06463afc111e9bdeab6f20', id: modalTitleId }, h("slot", { key: 'dbf6d932257e7a264206ddf7caea8a80e4b2b069', name: "header" })), this.showCloseButton && (h("wcs-button", { key: '97036ea40d111c5ac737b1e3f789571cd524cb2d', shape: "round", mode: "clear", id: "wcs-modal-close-button", "aria-label": this.closeButtonAriaLabel, onClick: ($event) => this.onCloseButtonClick($event) }, h("wcs-mat-icon", { key: '24d6b531e788c2760c66804df96037714c9f854b', icon: "close" })))), h("div", { key: '34d9ddf3c4527395864a238f329d7b499eb9791b', class: "wcs-modal-content" }, h("slot", { key: '5bbd76fc7de9bc6f5aaec7257e7c73995d3e1447', onSlotchange: () => this.handleSlotContentChange() })), !this.hideActions && (h("div", { key: '0c082f533dd77e73721b3bcf29a6f3d3baac65b3', class: "wcs-modal-actions" }, h("slot", { key: '56bfb65b4784492747eda2f5eb87b29dc7704db3', name: "actions" }))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/wcs-modal.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"wcs-modal.entry.js","mappings":"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","names":[],"sources":["src/components/modal/modal.scss?tag=wcs-modal","src/components/modal/modal.tsx"],"sourcesContent":["wcs-modal {\n --wcs-modal-backdrop-color: var(--wcs-semantic-color-background-backdrop);\n --wcs-modal-max-height: 80%;\n --wcs-modal-background-color: var(--wcs-semantic-color-background-surface-primary);\n --wcs-modal-border-radius: var(--wcs-semantic-border-radius-base);\n --wcs-modal-padding: calc(3 * var(--wcs-semantic-spacing-base));\n --wcs-modal-border-width: var(--wcs-semantic-border-width-default);\n --wcs-modal-border-color: var(--wcs-semantic-color-border-secondary);\n --wcs-modal-title-margin-bottom: var(--wcs-semantic-spacing-large);\n --wcs-modal-title-font-size: var(--wcs-semantic-font-size-heading-4);\n --wcs-modal-title-font-weight: var(--wcs-semantic-font-weight-heavy);\n --wcs-modal-title-line-height: var(--wcs-semantic-font-line-height-medium);\n --wcs-modal-actions-margin-top: var(--wcs-semantic-spacing-large);\n\n // Specific component level tokens\n --wcs-modal-width-s: 288px;\n --wcs-modal-width-m: 480px;\n --wcs-modal-width-l: 864px;\n --wcs-modal-width-xl: 1200px;\n\n z-index: 999;\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n display: none;\n background: var(--wcs-modal-backdrop-color);\n}\n\nwcs-modal[show] {\n display: flex;\n height: 100vh;\n width: 100vw;\n align-items: center;\n justify-content: center;\n}\n\n/*\nBackdrop\n /\nwcs-modal[without-backdrop] {\n background-color: unset;\n\n .wcs-modal-container {\n border: solid var(--wcs-modal-border-width) var(--wcs-modal-border-color);\n }\n}\n\n/*\nModal window\n /\n.wcs-modal-container {\n max-height: var(--wcs-modal-max-height, 80%);\n background-color: var(--wcs-modal-background-color);\n display: grid;\n grid-template-columns: 100%;\n grid-template-rows: auto 1fr auto;\n box-sizing: border-box;\n pointer-events: auto;\n background-clip: padding-box;\n border-radius: var(--wcs-modal-border-radius);\n z-index: 20000;\n padding: var(--wcs-modal-padding);\n}\n\n.wcs-modal-container[data-size=s] {\n width: var(--wcs-modal-width-s);\n}\n\n.wcs-modal-container[data-size=m] {\n width: var(--wcs-modal-width-m);\n}\n\n.wcs-modal-container[data-size=l] {\n width: var(--wcs-modal-width-l);\n}\n\n.wcs-modal-container[data-size=xl] {\n width: var(--wcs-modal-width-xl);\n}\n\n.wcs-modal-header {\n /* h1 for semantic but h3 for style /\n h1 {\n font-size: var(--wcs-modal-title-font-size);\n font-weight: var(--wcs-modal-title-font-weight);\n line-height: var(--wcs-modal-title-line-height);\n margin: 0;\n }\n\n margin-bottom: var(--wcs-modal-title-margin-bottom);\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.wcs-modal-content {\n overflow-y: var(--wcs-modal-overflow-y, auto);\n}\n\n.wcs-modal-actions {\n margin-top: var(--wcs-modal-actions-margin-top);\n display: flex;\n justify-content: flex-end;\n}\n","import {\n Element,\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n ComponentInterface,\n Watch, Method\n} from '@stencil/core';\nimport { ModalSize } from './modal-interface';\nimport { isElementFocused, isFocusable } from \"../../utils/accessibility\";\nimport { inheritAriaAttributes, inheritAttributes, isTabKey, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst MODAL_INHERITED_ATTRS = [];\n\n/\n The modal component (also named dialog or popup) is an interface element that appears on top of the page content.\n * Use it to show a message, a confirmation dialog, or any other content like forms.\n \n ## Accessibility guidelines 💡\n * > - Modal element has `role=\"dialog\"` and `aria-modal=\"true\"`\n * > - Keyboard navigation is trapped inside the modal\n * > - It is mandatory to set the `modal-trigger-controls-id` to the id of the element that opens the dialog, in order\n * > to focus it upon dialog dismissal.\n * > - On modal opening, the default behaviour is to focus the first focusable element. If you want to change the initial \n * > behaviour, you have to use `modal-element-id-to-focus-on-opening` attribute to set the id of the inner modal element you \n * > want to focus. You will see a story as example below\n * > - The modal can be closed at any time by pressing the Escape key.\n * >\n * > - More info : https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/\n \n @cssprop --wcs-modal-max-height - Max height of the main container\n * @cssprop --wcs-modal-overflow-y - Overflow-y of the content\n \n @cssprop --wcs-modal-backdrop-color - Backdrop color of the modal\n * @cssprop --wcs-modal-max-height - Max height of the main container\n * @cssprop --wcs-modal-background-color - Background color of the modal\n * @cssprop --wcs-modal-border-radius - Border radius of the modal\n * @cssprop --wcs-modal-padding - Padding inside the modal\n * @cssprop --wcs-modal-border-width - Border width of the modal\n * @cssprop --wcs-modal-border-color - Border color of the modal\n * @cssprop --wcs-modal-title-margin-bottom - Margin bottom of the modal title\n * @cssprop --wcs-modal-title-font-size - Font size of the modal title\n * @cssprop --wcs-modal-title-font-weight - Font weight of the modal title\n * @cssprop --wcs-modal-title-line-height - Line height of the modal title\n * @cssprop --wcs-modal-actions-margin-top - Margin top of the modal actions\n * @cssprop --wcs-modal-width-s - Width of the modal for size small\n * @cssprop --wcs-modal-width-m - Width of the modal for size medium\n * @cssprop --wcs-modal-width-l - Width of the modal for size large\n * @cssprop --wcs-modal-width-xl - Width of the modal for size extra large\n * \n * @slot <no-name> Main container slot\n * @slot header Header container slot (for title)\n * @slot actions Actions container slot (for buttons)\n /\n@Component({\n tag: 'wcs-modal',\n styleUrl: 'modal.scss',\n shadow: false,\n})\nexport class Modal implements ComponentInterface, MutableAriaAttribute {\n @Element() private el: HTMLElement;\n private nativeDivDialog!: HTMLDivElement;\n private inheritedAttributes: { [k: string]: any } = {};\n\n /\n Specifies whether the component should display a backdrop on the entire page\n /\n @Prop({reflect: true}) withoutBackdrop: boolean = false;\n\n /\n Displays the modal\n /\n @Prop({reflect: true, mutable: true}) show: boolean = false;\n\n /\n Triggered when the user leaves the dialog with the closing button.\n /\n @Event() wcsDialogClosed: EventEmitter<void>;\n\n /\n Specifies whether the component should display a close button.\n * if false, it won't close the modal when the escape key is pressed.\n /\n @Prop({reflect: true}) showCloseButton: boolean = false;\n\n /\n Specifies the aria-label present on the close button when the modal is opened. \n * Only use when `showCloseButton` is `true`.\n /\n @Prop() closeButtonAriaLabel: string = 'Fermer';\n\n /\n There are multiple sizes for modals. The default size is medium (m), however other sizes are available. Select the\n * size best suited for the content and screen size displaying the modal. Remember to test responsiveness.\n /\n @Prop() size: ModalSize = 'm';\n\n /\n Specifies whether the component should hide the actions slot or not\n /\n @Prop({reflect: true}) hideActions: boolean = false;\n\n /\n Specifies which element id controls the modal\n * @private\n /\n @Prop() modalTriggerControlsId: string;\n /\n The ID of the element to automatically focus when the modal opens.\n * \n * If this property is not set and `disableAutoFocus` is false, the modal will\n * automatically focus the first focusable element within its content.\n * This follows accessibility best practices by ensuring keyboard navigation\n * starts from a logical point when the modal opens.\n * \n * @example\n * <wcs-modal initial-focus-element=\"cancel-button\"></wcs-modal>\n /\n @Prop() initialFocusElementId?: string = undefined;\n\n /\n Disables automatic focus behavior when the modal opens.\n * \n * When set to true, the modal will not automatically focus any element upon opening.\n * Use this property with caution, as managing focus is important for accessibility.\n * Consider providing an alternative focus management strategy if disabling the default behavior.\n /\n @Prop() disableAutoFocus: boolean = false;\n\n /\n Give an unique id\n * @private\n /\n private modalId: number = modalIds++;\n\n private firstFocusableElement: HTMLElement;\n private lastFocusableElement: HTMLElement;\n /\n This attribute is used to determine whether the show attribute has changed since the last rendering. \n * This allows us to call the focus method on the first element of the modal when the show attribute changes to true. \n * This call is made in the componentDidRender method\n * @private\n /\n private showAttributeChangedMarker: boolean = false;\n /\n This attribute is used to determine if the modal has been closed for the first time since its last activation.\n * It is set to 'true' when the modal is first closed, and will be reset to 'false' when the modal is shown again.\n * This state is important for accessibility reasons in order to focus the modal trigger element (like the button \n * which controls the modal)\n \n @private\n /\n private hasBeenClosedBefore: boolean = false;\n\n componentWillLoad(): Promise<void> \| void {\n if (!this.modalTriggerControlsId) {\n console.warn('wcs-modal: You must provide the modal-trigger-controls-id attribute to the modal to make it to work properly');\n }\n\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el),\n ...inheritAttributes(this.el, MODAL_INHERITED_ATTRS),\n };\n }\n\n componentDidLoad() {\n this.updateFocusableElements();\n }\n\n componentDidRender() {\n this.updateFocusableElements();\n if (this.showAttributeChangedMarker) {\n this.showAttributeChangedMarker = false;\n \n if(this.disableAutoFocus) {\n return;\n }\n \n if(!this.initialFocusElementId) {\n this.firstFocusableElement?.focus();\n } else {\n const modalElementToFocusOnOpening = document.getElementById(this.initialFocusElementId);\n if(!modalElementToFocusOnOpening) {\n console.warn(`wcs-modal: Unable to focus element - ID '${this.initialFocusElementId}' not found in DOM`);\n }\n \n modalElementToFocusOnOpening?.focus();\n }\n }\n }\n\n @Method()\n async setAriaAttribute(attr: AriaAttributeName, value: string \| null \| undefined) {\n setOrRemoveAttribute(this.nativeDivDialog, attr, value);\n }\n \n @Watch(\"show\")\n onShowChange() {\n if(this.show) {\n this.hasBeenClosedBefore = false;\n this.showAttributeChangedMarker = true;\n } else {\n // if we already made actions when the modal was firstly closed, we do nothing\n if(this.hasBeenClosedBefore) {\n return;\n }\n \n this.hasBeenClosedBefore = true;\n\n if(this.modalTriggerControlsId) {\n const modalTriggerControlsHtmlElement = document.getElementById(this.modalTriggerControlsId);\n if(!modalTriggerControlsHtmlElement) {\n console.warn(`wcs-modal: Element with id '${this.modalTriggerControlsId}' could not be found`);\n }\n modalTriggerControlsHtmlElement?.focus();\n }\n }\n }\n\n private updateFocusableElements() {\n const focusableElements = Array.from(this.el.querySelectorAll(''))\n .filter(element => isFocusable(element));\n\n this.firstFocusableElement = focusableElements.length > 0 && focusableElements[0] as HTMLElement;\n this.lastFocusableElement = focusableElements.length > 0 && focusableElements[focusableElements.length - 1] as HTMLElement;\n }\n \n private close() {\n // If the modal isn't shown, we don't do anything\n if (this.show) {\n this.show = false;\n this.wcsDialogClosed.emit();\n }\n }\n\n @Listen('keydown', {target: 'document'})\n onKeyDown(event: KeyboardEvent) {\n if (this.show && this.showCloseButton && event.key === 'Escape') {\n this.close();\n }\n\n if (this.show) {\n if (isTabKey(event)) {\n this.updateFocusableElements(); // XXX: maybe a performance issue\n const firstElement = this.firstFocusableElement;\n const lastElement = this.lastFocusableElement;\n\n if (event.shiftKey && isElementFocused(firstElement)) {\n event.preventDefault();\n lastElement.focus();\n } else if (!event.shiftKey && isElementFocused(lastElement)) {\n event.preventDefault();\n firstElement.focus();\n }\n }\n }\n }\n\n private onCloseButtonClick(_: MouseEvent) {\n this.close();\n }\n\n private handleSlotContentChange() {\n this.updateFocusableElements();\n }\n\n render() {\n const modalTitleId = `wcs-modal-title-${this.modalId}`;\n return (\n <Host>\n <div class=\"wcs-modal-container\"\n data-size={this.size}\n aria-modal={true}\n role={\"dialog\"}\n aria-labelledby={modalTitleId}\n ref={(el) => (this.nativeDivDialog = el)}\n {...this.inheritedAttributes}\n >\n <div class=\"wcs-modal-header\">\n <h1 id={modalTitleId}>\n <slot name=\"header\"></slot>\n </h1>\n {this.showCloseButton && (\n <wcs-button shape=\"round\" \n mode=\"clear\" \n id=\"wcs-modal-close-button\"\n aria-label={this.closeButtonAriaLabel}\n onClick={($event) => this.onCloseButtonClick($event)}>\n <wcs-mat-icon icon=\"close\"></wcs-mat-icon>\n </wcs-button>)\n }\n\n </div>\n <div class=\"wcs-modal-content\">\n <slot onSlotchange={() => this.handleSlotContentChange()}></slot>\n </div>\n {!this.hideActions && (\n <div class=\"wcs-modal-actions\">\n <slot name=\"actions\"></slot>\n </div>)\n }\n </div>\n </Host>\n );\n }\n}\n\nlet modalIds = 0;\n"],"version":3}
1	+ {"file":"wcs-modal.entry.js","mappings":";;;;AAAA,MAAM,QAAQ,GAAG,21EAA21E,CAAC;AAC72E,uBAAe,QAAQ;;ACgBvB,MAAM,qBAAqB,GAAG,EAAE,CAAC;MA+CpB,KAAK;;;;QAGN,wBAAmB,GAAyB,EAAE,CAAC;;;;;QAuE/C,YAAO,GAAW,QAAQ,EAAE,CAAC;;;;;;;QAU7B,+BAA0B,GAAY,KAAK,CAAC;;;;;;;;;QAS5C,wBAAmB,GAAY,KAAK,CAAC;+BArFK,KAAK;oBAKD,KAAK;+BAWT,KAAK;oCAMhB,QAAQ;oBAMrB,GAAG;2BAKiB,KAAK;;qCAkBV,SAAS;gCASG,KAAK;;IA2B1D,iBAAiB;QACb,IAAI,CAAC,IAAI,CAAC,sBAAsB,EAAE;YAC9B,OAAO,CAAC,IAAI,CAAC,8GAA8G,CAAC,CAAC;SAChI;QAED,IAAI,CAAC,mBAAmB,mCACjB,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,GAC9B,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,qBAAqB,CAAC,CACvD,CAAC;KACL;IAED,gBAAgB;QACZ,IAAI,CAAC,uBAAuB,EAAE,CAAC;KAClC;IAED,kBAAkB;;QACd,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAC/B,IAAI,IAAI,CAAC,0BAA0B,EAAE;YACjC,IAAI,CAAC,0BAA0B,GAAG,KAAK,CAAC;YAExC,IAAG,IAAI,CAAC,gBAAgB,EAAE;gBACtB,OAAO;aACV;YAED,IAAG,CAAC,IAAI,CAAC,qBAAqB,EAAE;gBAC5B,MAAA,IAAI,CAAC,qBAAqB,0CAAE,KAAK,EAAE,CAAC;aACvC;iBAAM;gBACH,MAAM,4BAA4B,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;gBACzF,IAAG,CAAC,4BAA4B,EAAE;oBAC9B,OAAO,CAAC,IAAI,CAAC,4CAA4C,IAAI,CAAC,qBAAqB,oBAAoB,CAAC,CAAC;iBAC5G;gBAED,4BAA4B,aAA5B,4BAA4B,uBAA5B,4BAA4B,CAAE,KAAK,EAAE,CAAC;aACzC;SACJ;KACJ;IAGD,MAAM,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;QAC5E,oBAAoB,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;KAC3D;IAGD,YAAY;QACR,IAAG,IAAI,CAAC,IAAI,EAAE;YACV,IAAI,CAAC,mBAAmB,GAAG,KAAK,CAAC;YACjC,IAAI,CAAC,0BAA0B,GAAG,IAAI,CAAC;SAC1C;aAAM;;YAEH,IAAG,IAAI,CAAC,mBAAmB,EAAE;gBACzB,OAAO;aACV;YAED,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;YAEhC,IAAG,IAAI,CAAC,sBAAsB,EAAE;gBAC5B,MAAM,+BAA+B,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;gBAC7F,IAAG,CAAC,+BAA+B,EAAE;oBACjC,OAAO,CAAC,IAAI,CAAC,+BAA+B,IAAI,CAAC,sBAAsB,sBAAsB,CAAC,CAAC;iBAClG;gBACD,+BAA+B,aAA/B,+BAA+B,uBAA/B,+BAA+B,CAAE,KAAK,EAAE,CAAC;aAC5C;SACJ;KACJ;IAEO,uBAAuB;QAC3B,MAAM,iBAAiB,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;aAC9D,MAAM,CAAC,OAAO,IAAI,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC;QAE7C,IAAI,CAAC,qBAAqB,GAAG,iBAAiB,CAAC,MAAM,GAAG,CAAC,IAAI,iBAAiB,CAAC,CAAC,CAAgB,CAAC;QACjG,IAAI,CAAC,oBAAoB,GAAG,iBAAiB,CAAC,MAAM,GAAG,CAAC,IAAI,iBAAiB,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAgB,CAAC;KAC9H;IAEO,KAAK;;QAET,IAAI,IAAI,CAAC,IAAI,EAAE;YACX,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;SAC/B;KACJ;IAGD,SAAS,CAAC,KAAoB;QAC1B,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,eAAe,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;YAC7D,IAAI,CAAC,KAAK,EAAE,CAAC;SAChB;QAED,IAAI,IAAI,CAAC,IAAI,EAAE;YACX,IAAI,QAAQ,CAAC,KAAK,CAAC,EAAE;gBACjB,IAAI,CAAC,uBAAuB,EAAE,CAAC;gBAC/B,MAAM,YAAY,GAAG,IAAI,CAAC,qBAAqB,CAAC;gBAChD,MAAM,WAAW,GAAG,IAAI,CAAC,oBAAoB,CAAC;gBAE9C,IAAI,KAAK,CAAC,QAAQ,IAAI,gBAAgB,CAAC,YAAY,CAAC,EAAE;oBAClD,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,WAAW,CAAC,KAAK,EAAE,CAAC;iBACvB;qBAAM,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,gBAAgB,CAAC,WAAW,CAAC,EAAE;oBACzD,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,YAAY,CAAC,KAAK,EAAE,CAAC;iBACxB;aACJ;SACJ;KACJ;IAEO,kBAAkB,CAAC,CAAa;QACpC,IAAI,CAAC,KAAK,EAAE,CAAC;KAChB;IAEO,uBAAuB;QAC3B,IAAI,CAAC,uBAAuB,EAAE,CAAC;KAClC;IAED,MAAM;QACF,MAAM,YAAY,GAAG,mBAAmB,IAAI,CAAC,OAAO,EAAE,CAAC;QACvD,QACI,EAAC,IAAI,uDACD,0EAAK,KAAK,EAAC,qBAAqB,eAChB,IAAI,CAAC,IAAI,gBACT,MAAM,EACjB,IAAI,EAAE,QAAQ,qBACG,YAAY,EAC7B,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC,IACpC,IAAI,CAAC,mBAAmB,GAE7B,4DAAK,KAAK,EAAC,kBAAkB,IACzB,2DAAI,EAAE,EAAE,YAAY,IAChB,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CAC1B,EACJ,IAAI,CAAC,eAAe,KACjB,mEAAY,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,OAAO,EACZ,EAAE,EAAC,wBAAwB,gBACf,IAAI,CAAC,oBAAoB,EACrC,OAAO,EAAE,CAAC,MAAM,KAAK,IAAI,CAAC,kBAAkB,CAAC,MAAM,CAAC,IAC5D,qEAAc,IAAI,EAAC,OAAO,GAAgB,CACjC,CAAC,CAGhB,EACN,4DAAK,KAAK,EAAC,mBAAmB,IAC1B,6DAAM,YAAY,EAAE,MAAM,IAAI,CAAC,uBAAuB,EAAE,GAAS,CAC/D,EACL,CAAC,IAAI,CAAC,WAAW,KACd,4DAAK,KAAK,EAAC,mBAAmB,IAC1B,6DAAM,IAAI,EAAC,SAAS,GAAQ,CAC1B,CAAC,CAET,CACH,EACT;KACL;;;;;;AAGL,IAAI,QAAQ,GAAG,CAAC,CAAC;;;;;","names":[],"sources":["src/components/modal/modal.scss?tag=wcs-modal","src/components/modal/modal.tsx"],"sourcesContent":["wcs-modal {\n --wcs-modal-backdrop-color: var(--wcs-semantic-color-background-backdrop);\n --wcs-modal-max-height: 80%;\n --wcs-modal-background-color: var(--wcs-semantic-color-background-surface-primary);\n --wcs-modal-border-radius: var(--wcs-semantic-border-radius-base);\n --wcs-modal-padding: calc(3 * var(--wcs-semantic-spacing-base));\n --wcs-modal-border-width: var(--wcs-semantic-border-width-default);\n --wcs-modal-border-color: var(--wcs-semantic-color-border-secondary);\n --wcs-modal-title-margin-bottom: var(--wcs-semantic-spacing-large);\n --wcs-modal-title-font-size: var(--wcs-semantic-font-size-heading-4);\n --wcs-modal-title-font-weight: var(--wcs-semantic-font-weight-heavy);\n --wcs-modal-title-line-height: var(--wcs-semantic-font-line-height-medium);\n --wcs-modal-actions-margin-top: var(--wcs-semantic-spacing-large);\n\n // Specific component level tokens\n --wcs-modal-width-s: 288px;\n --wcs-modal-width-m: 480px;\n --wcs-modal-width-l: 864px;\n --wcs-modal-width-xl: 1200px;\n\n z-index: 999;\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n display: none;\n background: var(--wcs-modal-backdrop-color);\n}\n\nwcs-modal[show] {\n display: flex;\n height: 100vh;\n width: 100vw;\n align-items: center;\n justify-content: center;\n}\n\n/*\nBackdrop\n /\nwcs-modal[without-backdrop] {\n background-color: unset;\n\n .wcs-modal-container {\n border: solid var(--wcs-modal-border-width) var(--wcs-modal-border-color);\n }\n}\n\n/*\nModal window\n /\n.wcs-modal-container {\n max-height: var(--wcs-modal-max-height, 80%);\n background-color: var(--wcs-modal-background-color);\n display: grid;\n grid-template-columns: 100%;\n grid-template-rows: auto 1fr auto;\n box-sizing: border-box;\n pointer-events: auto;\n background-clip: padding-box;\n border-radius: var(--wcs-modal-border-radius);\n z-index: 20000;\n padding: var(--wcs-modal-padding);\n\n width: var(--wcs-modal-width-m); // Default size\n}\n\n.wcs-modal-container[data-size=s] {\n width: var(--wcs-modal-width-s);\n}\n\n.wcs-modal-container[data-size=m] {\n width: var(--wcs-modal-width-m);\n}\n\n.wcs-modal-container[data-size=l] {\n width: var(--wcs-modal-width-l);\n}\n\n.wcs-modal-container[data-size=xl] {\n width: var(--wcs-modal-width-xl);\n}\n\n.wcs-modal-header {\n /* h1 for semantic but h3 for style /\n h1 {\n font-size: var(--wcs-modal-title-font-size);\n font-weight: var(--wcs-modal-title-font-weight);\n line-height: var(--wcs-modal-title-line-height);\n margin: 0;\n }\n\n margin-bottom: var(--wcs-modal-title-margin-bottom);\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.wcs-modal-content {\n overflow-y: var(--wcs-modal-overflow-y, auto);\n}\n\n.wcs-modal-actions {\n margin-top: var(--wcs-modal-actions-margin-top);\n display: flex;\n justify-content: flex-end;\n}\n","import {\n Element,\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n ComponentInterface,\n Watch, Method\n} from '@stencil/core';\nimport { ModalSize } from './modal-interface';\nimport { isElementFocused, isFocusable } from \"../../utils/accessibility\";\nimport { inheritAriaAttributes, inheritAttributes, isTabKey, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst MODAL_INHERITED_ATTRS = [];\n\n/\n The modal component (also named dialog or popup) is an interface element that appears on top of the page content.\n * Use it to show a message, a confirmation dialog, or any other content like forms.\n \n ## Accessibility guidelines 💡\n * > - Modal element has `role=\"dialog\"` and `aria-modal=\"true\"`\n * > - Keyboard navigation is trapped inside the modal\n * > - It is mandatory to set the `modal-trigger-controls-id` to the id of the element that opens the dialog, in order\n * > to focus it upon dialog dismissal.\n * > - On modal opening, the default behaviour is to focus the first focusable element. If you want to change the initial \n * > behaviour, you have to use `modal-element-id-to-focus-on-opening` attribute to set the id of the inner modal element you \n * > want to focus. You will see a story as example below\n * > - The modal can be closed at any time by pressing the Escape key.\n * >\n * > - More info : https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/\n \n @cssprop --wcs-modal-max-height - Max height of the main container\n * @cssprop --wcs-modal-overflow-y - Overflow-y of the content\n \n @cssprop --wcs-modal-backdrop-color - Backdrop color of the modal\n * @cssprop --wcs-modal-max-height - Max height of the main container\n * @cssprop --wcs-modal-background-color - Background color of the modal\n * @cssprop --wcs-modal-border-radius - Border radius of the modal\n * @cssprop --wcs-modal-padding - Padding inside the modal\n * @cssprop --wcs-modal-border-width - Border width of the modal\n * @cssprop --wcs-modal-border-color - Border color of the modal\n * @cssprop --wcs-modal-title-margin-bottom - Margin bottom of the modal title\n * @cssprop --wcs-modal-title-font-size - Font size of the modal title\n * @cssprop --wcs-modal-title-font-weight - Font weight of the modal title\n * @cssprop --wcs-modal-title-line-height - Line height of the modal title\n * @cssprop --wcs-modal-actions-margin-top - Margin top of the modal actions\n * @cssprop --wcs-modal-width-s - Width of the modal for size small\n * @cssprop --wcs-modal-width-m - Width of the modal for size medium\n * @cssprop --wcs-modal-width-l - Width of the modal for size large\n * @cssprop --wcs-modal-width-xl - Width of the modal for size extra large\n * \n * @slot <no-name> Main container slot\n * @slot header Header container slot (for title)\n * @slot actions Actions container slot (for buttons)\n /\n@Component({\n tag: 'wcs-modal',\n styleUrl: 'modal.scss',\n shadow: false,\n})\nexport class Modal implements ComponentInterface, MutableAriaAttribute {\n @Element() private el: HTMLElement;\n private nativeDivDialog!: HTMLDivElement;\n private inheritedAttributes: { [k: string]: any } = {};\n\n /\n Specifies whether the component should display a backdrop on the entire page\n /\n @Prop({reflect: true}) withoutBackdrop: boolean = false;\n\n /\n Displays the modal\n /\n @Prop({reflect: true, mutable: true}) show: boolean = false;\n\n /\n Triggered when the user leaves the dialog with the closing button.\n /\n @Event() wcsDialogClosed: EventEmitter<void>;\n\n /\n Specifies whether the component should display a close button.\n * if false, it won't close the modal when the escape key is pressed.\n /\n @Prop({reflect: true}) showCloseButton: boolean = false;\n\n /\n Specifies the aria-label present on the close button when the modal is opened. \n * Only use when `showCloseButton` is `true`.\n /\n @Prop() closeButtonAriaLabel: string = 'Fermer';\n\n /\n There are multiple sizes for modals. The default size is medium (m), however other sizes are available. Select the\n * size best suited for the content and screen size displaying the modal. Remember to test responsiveness.\n /\n @Prop() size: ModalSize = 'm';\n\n /\n Specifies whether the component should hide the actions slot or not\n /\n @Prop({reflect: true}) hideActions: boolean = false;\n\n /\n Specifies which element id controls the modal\n * @private\n /\n @Prop() modalTriggerControlsId: string;\n /\n The ID of the element to automatically focus when the modal opens.\n * \n * If this property is not set and `disableAutoFocus` is false, the modal will\n * automatically focus the first focusable element within its content.\n * This follows accessibility best practices by ensuring keyboard navigation\n * starts from a logical point when the modal opens.\n * \n * @example\n * <wcs-modal initial-focus-element=\"cancel-button\"></wcs-modal>\n /\n @Prop() initialFocusElementId?: string = undefined;\n\n /\n Disables automatic focus behavior when the modal opens.\n * \n * When set to true, the modal will not automatically focus any element upon opening.\n * Use this property with caution, as managing focus is important for accessibility.\n * Consider providing an alternative focus management strategy if disabling the default behavior.\n /\n @Prop({ reflect: true }) disableAutoFocus: boolean = false;\n\n /\n Give an unique id\n * @private\n /\n private modalId: number = modalIds++;\n\n private firstFocusableElement: HTMLElement;\n private lastFocusableElement: HTMLElement;\n /\n This attribute is used to determine whether the show attribute has changed since the last rendering. \n * This allows us to call the focus method on the first element of the modal when the show attribute changes to true. \n * This call is made in the componentDidRender method\n * @private\n /\n private showAttributeChangedMarker: boolean = false;\n /\n This attribute is used to determine if the modal has been closed for the first time since its last activation.\n * It is set to 'true' when the modal is first closed, and will be reset to 'false' when the modal is shown again.\n * This state is important for accessibility reasons in order to focus the modal trigger element (like the button \n * which controls the modal)\n \n @private\n /\n private hasBeenClosedBefore: boolean = false;\n\n componentWillLoad(): Promise<void> \| void {\n if (!this.modalTriggerControlsId) {\n console.warn('wcs-modal: You must provide the modal-trigger-controls-id attribute to the modal to make it to work properly');\n }\n\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el),\n ...inheritAttributes(this.el, MODAL_INHERITED_ATTRS),\n };\n }\n\n componentDidLoad() {\n this.updateFocusableElements();\n }\n\n componentDidRender() {\n this.updateFocusableElements();\n if (this.showAttributeChangedMarker) {\n this.showAttributeChangedMarker = false;\n \n if(this.disableAutoFocus) {\n return;\n }\n \n if(!this.initialFocusElementId) {\n this.firstFocusableElement?.focus();\n } else {\n const modalElementToFocusOnOpening = document.getElementById(this.initialFocusElementId);\n if(!modalElementToFocusOnOpening) {\n console.warn(`wcs-modal: Unable to focus element - ID '${this.initialFocusElementId}' not found in DOM`);\n }\n \n modalElementToFocusOnOpening?.focus();\n }\n }\n }\n\n @Method()\n async setAriaAttribute(attr: AriaAttributeName, value: string \| null \| undefined) {\n setOrRemoveAttribute(this.nativeDivDialog, attr, value);\n }\n \n @Watch(\"show\")\n onShowChange() {\n if(this.show) {\n this.hasBeenClosedBefore = false;\n this.showAttributeChangedMarker = true;\n } else {\n // if we already made actions when the modal was firstly closed, we do nothing\n if(this.hasBeenClosedBefore) {\n return;\n }\n \n this.hasBeenClosedBefore = true;\n\n if(this.modalTriggerControlsId) {\n const modalTriggerControlsHtmlElement = document.getElementById(this.modalTriggerControlsId);\n if(!modalTriggerControlsHtmlElement) {\n console.warn(`wcs-modal: Element with id '${this.modalTriggerControlsId}' could not be found`);\n }\n modalTriggerControlsHtmlElement?.focus();\n }\n }\n }\n\n private updateFocusableElements() {\n const focusableElements = Array.from(this.el.querySelectorAll(''))\n .filter(element => isFocusable(element));\n\n this.firstFocusableElement = focusableElements.length > 0 && focusableElements[0] as HTMLElement;\n this.lastFocusableElement = focusableElements.length > 0 && focusableElements[focusableElements.length - 1] as HTMLElement;\n }\n \n private close() {\n // If the modal isn't shown, we don't do anything\n if (this.show) {\n this.show = false;\n this.wcsDialogClosed.emit();\n }\n }\n\n @Listen('keydown', {target: 'document'})\n onKeyDown(event: KeyboardEvent) {\n if (this.show && this.showCloseButton && event.key === 'Escape') {\n this.close();\n }\n\n if (this.show) {\n if (isTabKey(event)) {\n this.updateFocusableElements(); // XXX: maybe a performance issue\n const firstElement = this.firstFocusableElement;\n const lastElement = this.lastFocusableElement;\n\n if (event.shiftKey && isElementFocused(firstElement)) {\n event.preventDefault();\n lastElement.focus();\n } else if (!event.shiftKey && isElementFocused(lastElement)) {\n event.preventDefault();\n firstElement.focus();\n }\n }\n }\n }\n\n private onCloseButtonClick(_: MouseEvent) {\n this.close();\n }\n\n private handleSlotContentChange() {\n this.updateFocusableElements();\n }\n\n render() {\n const modalTitleId = `wcs-modal-title-${this.modalId}`;\n return (\n <Host>\n <div class=\"wcs-modal-container\"\n data-size={this.size}\n aria-modal=\"true\"\n role={\"dialog\"}\n aria-labelledby={modalTitleId}\n ref={(el) => (this.nativeDivDialog = el)}\n {...this.inheritedAttributes}\n >\n <div class=\"wcs-modal-header\">\n <h1 id={modalTitleId}>\n <slot name=\"header\"></slot>\n </h1>\n {this.showCloseButton && (\n <wcs-button shape=\"round\" \n mode=\"clear\" \n id=\"wcs-modal-close-button\"\n aria-label={this.closeButtonAriaLabel}\n onClick={($event) => this.onCloseButtonClick($event)}>\n <wcs-mat-icon icon=\"close\"></wcs-mat-icon>\n </wcs-button>)\n }\n\n </div>\n <div class=\"wcs-modal-content\">\n <slot onSlotchange={() => this.handleSlotContentChange()}></slot>\n </div>\n {!this.hideActions && (\n <div class=\"wcs-modal-actions\">\n <slot name=\"actions\"></slot>\n </div>)\n }\n </div>\n </Host>\n );\n }\n}\n\nlet modalIds = 0;\n"],"version":3}