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

wcs-core 7.0.0 → 7.1.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 (442) hide show

package/dist/cjs/wcs-skeleton-circle.cjs.entry.js CHANGED Viewed

@@ -14,7 +14,7 @@ const SkeletonCircle = class {
         this.radius = 50;
     }
     render() {
-        return (index.h(index.Host, { key: '44cd54e8708108ea23e1cb45de611685603a1c06', style: { width: `${this.radius}px`, height: `${this.radius}px` } }, index.h("span", { key: '0a3a05422de5cd69604847e4e89d5111b26cdb3d', "aria-hidden": "true" })));
+        return (index.h(index.Host, { key: '35693d9a55aa03effb704c51234571cd9ebbbeac', style: { width: `${this.radius}px`, height: `${this.radius}px` } }, index.h("span", { key: 'b1e806d2d016647626956aeb2962681d13083762', "aria-hidden": "true" })));
     }
 };
 SkeletonCircle.style = WcsSkeletonCircleStyle0;

package/dist/cjs/wcs-skeleton-rectangle.cjs.entry.js CHANGED Viewed

@@ -16,7 +16,7 @@ const SkeletonRectangle = class {
         this.width = 'auto';
     }
     render() {
-        return (index.h(index.Host, { key: '38b9421a2ff958837da616245b583f4134acb3d5', style: { height: this.height, width: this.width } }, index.h("span", { key: '08d56b07be1967d9951d0d4adfc443a785e2bc90', "aria-hidden": "true" })));
+        return (index.h(index.Host, { key: '79da527f4afa1c4b972d8a91cf97aadf90c207f8', style: { height: this.height, width: this.width } }, index.h("span", { key: '53c1ad5daec31199e59326a2fd7e1730c895c2f6', "aria-hidden": "true" })));
     }
 };
 SkeletonRectangle.style = WcsSkeletonRectangleStyle0;

package/dist/cjs/wcs-skeleton-text.cjs.entry.js CHANGED Viewed

@@ -14,7 +14,7 @@ const SkeletonText = class {
         this.height = 'body';
     }
     render() {
-        return index.h("span", { key: 'd5346f7bdc09289fa966d70cd3f0994683ec4c8a', "aria-hidden": "true" });
+        return index.h("span", { key: '9f7fd22e258db1be4ca8aef533e548fe14fc24ea', "aria-hidden": "true" });
     }
 };
 SkeletonText.style = WcsSkeletonTextStyle0;

package/dist/cjs/wcs-switch.cjs.entry.js CHANGED Viewed

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-6f0140d8.js');
-const helpers = require('./helpers-871f5a3d.js');
+const helpers = require('./helpers-2f1a8ddc.js');
+const controlComponentInterface = require('./control-component-interface-d9b68f28.js');
 const switchCss = ":host{--wcs-switch-background-color-initial:var(--wcs-semantic-color-background-control-indicator-default);--wcs-switch-background-color-final:var(--wcs-semantic-color-background-control-indicator-selected);--wcs-switch-background-color-disabled:var(--wcs-semantic-color-background-control-indicator-disabled);--wcs-switch-background-color-disabled-selected:var(--wcs-semantic-color-background-control-indicator-disabled);--wcs-switch-background-color-hover-selected:var(--wcs-semantic-color-background-control-indicator-hover);--wcs-switch-padding-horizontal:var(--wcs-semantic-spacing-small);--wcs-switch-padding-vertical:calc((var(--wcs-switch-height) - var(--wcs-switch-dot-size)) / 2);--wcs-switch-dot-color-default:var(--wcs-semantic-color-foreground-brand);--wcs-switch-dot-color-selected:var(--wcs-semantic-color-foreground-control-indicator-selected);--wcs-switch-dot-color-disabled:var(--wcs-semantic-color-foreground-control-indicator-disabled);--wcs-switch-text-color-default:var(--wcs-semantic-color-text-secondary);--wcs-switch-text-color-selected:var(--wcs-semantic-color-text-primary);--wcs-switch-text-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-switch-text-font-weight-default:var(--wcs-semantic-font-weight-medium);--wcs-switch-text-font-weight-selected:var(--wcs-semantic-font-weight-medium);--wcs-switch-outline-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-switch-dot-translate-x:calc(var(--wcs-switch-width) - var(--wcs-switch-dot-size) - (2 * var(--wcs-switch-padding-horizontal)));--wcs-switch-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);--wcs-switch-dot-size:0.875rem;--wcs-switch-height:var(--wcs-semantic-size-xs);--wcs-switch-width:var(--wcs-semantic-size-l);--wcs-switch-border-radius:var(--wcs-semantic-border-radius-full);--wcs-switch-gap:var(--wcs-semantic-spacing-base);display:inline-flex}:host([disabled]) .text{color:var(--wcs-switch-text-color-disabled)}:host([disabled]) .wcs-container{cursor:not-allowed}.wcs-container{position:relative;display:flex;user-select:none;margin-bottom:0;gap:var(--wcs-switch-gap)}.wcs-container:has(input:focus-visible){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-switch-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-switch-border-radius)}@supports not selector(.wcs-container:has(input:focus-visible)){.wcs-container:focus-within{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-switch-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-switch-border-radius)}}:host([label-alignment=top]) .wcs-container{align-items:start}:host([label-alignment=center]) .wcs-container{align-items:center}:host([label-alignment=bottom]) .wcs-container{align-items:flex-end}.wcs-container input{position:absolute;opacity:0;height:0;width:0}.text{color:var(--wcs-switch-text-color-default);font-weight:var(--wcs-switch-text-font-weight-default);line-height:1.375}.wcs-container:not([aria-disabled]) input:checked~.text{font-weight:var(--wcs-switch-text-font-weight-selected);color:var(--wcs-switch-text-color-selected)}.wcs-checkmark::before{position:absolute;transition:all var(--wcs-switch-transition-duration) ease-out}.wcs-checkmark::before{bottom:var(--wcs-switch-padding-vertical);left:var(--wcs-switch-padding-horizontal);width:var(--wcs-switch-dot-size);height:var(--wcs-switch-dot-size);content:\"\";border-radius:50%;background-color:var(--wcs-switch-dot-color-default)}:host([disabled]:not([checked])) .wcs-checkmark::before{background-color:var(--wcs-switch-dot-color-disabled)}:host([disabled]:not([checked])) .wcs-checkmark{background-color:var(--wcs-switch-background-color-disabled)}:host([disabled][checked]) .wcs-checkmark{background-color:var(--wcs-switch-background-color-disabled-selected)}:host([disabled]) .text{color:var(--wcs-switch-text-color-disabled)}.wcs-checkmark{top:0;right:0;bottom:0;left:0;width:var(--wcs-switch-width);height:var(--wcs-switch-height);border-radius:var(--wcs-switch-border-radius);background-color:var(--wcs-switch-background-color-initial);min-width:3rem;position:relative}.wcs-container:not([aria-disabled]){cursor:pointer}input:not([disabled]):checked+.wcs-checkmark::before,.wcs-container:focus input:not([disabled])+.wcs-checkmark::before{background-color:var(--wcs-switch-dot-color-selected)}input:checked+.wcs-checkmark::before{transform:translateX(var(--wcs-switch-dot-translate-x))}input:not([disabled]):checked+.wcs-checkmark{background-color:var(--wcs-switch-background-color-final)}.wcs-container:hover input:not([disabled]):checked+.wcs-checkmark{background-color:var(--wcs-switch-background-color-hover-selected)}";
 const WcsSwitchStyle0 = switchCss;
@@ -60,8 +61,11 @@ const Switch = class {
     async setAriaAttribute(attr, value) {
         helpers.setOrRemoveAttribute(this.nativeInput, attr, value);
     }
+    async getLabel() {
+        return controlComponentInterface.getSlottedContentText(this.el);
+    }
     render() {
-        return (index.h(index.Host, { key: '3ab3c9548de5dc99c1e61e84108e87330a38f9b6' }, index.h("label", { key: '214fae117a98bf6b9ae2f48bff4100a99c0dd7ee', htmlFor: this.name, class: "wcs-container", "aria-disabled": this.disabled }, index.h("input", Object.assign({ key: 'af81163894e9dd2490b96e456c0499434f76bcee', onBlur: this.handleBlur.bind(this), onChange: this.handleChange.bind(this), onClick: this.handleInputClick.bind(this), onFocus: this.handleFocus.bind(this), checked: this.checked, id: this.name, class: "wcs-switch", type: "checkbox", name: this.name, disabled: this.disabled, ref: el => { this.nativeInput = el; } }, this.inheritedAttributes)), index.h("span", { key: 'ce3becffc15c94ec5d5564aa1af6288d88bcfb5a', class: "wcs-checkmark" }), index.h("span", { key: 'fb25d610a11239cd27899c9590265378c3822759', class: "text" }, index.h("slot", { key: 'ea855be8376f63463d83cc6dfeff57e9e36d8ca7' })))));
+        return (index.h(index.Host, { key: '7583a10f5f7f2dbad7b31fcab1864d950b7a773c' }, index.h("label", { key: '93dcf06138949976d600935058f82dc7c0fd44cb', htmlFor: this.name, class: "wcs-container", "aria-disabled": this.disabled }, index.h("input", Object.assign({ key: '274e8126f833188a2e60f8ed62f1fbc63efa7970', onBlur: this.handleBlur.bind(this), onChange: this.handleChange.bind(this), onClick: this.handleInputClick.bind(this), onFocus: this.handleFocus.bind(this), checked: this.checked, id: this.name, class: "wcs-switch", type: "checkbox", name: this.name, disabled: this.disabled, ref: el => { this.nativeInput = el; } }, this.inheritedAttributes)), index.h("span", { key: '57e6bcc1b48d4765ec081736e7bc13000dbaa665', class: "wcs-checkmark" }), index.h("span", { key: 'f03e632e387bb25030ab0cd0f4e5aa451c17d042', class: "text" }, index.h("slot", { key: 'ab9340d1fa032ab2da0318387c5332def8b757dd' })))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/wcs-switch.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"wcs-switch.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,4mJAA4mJ,CAAC;AAC/nJ,wBAAe,SAAS;;ACexB,MAAM,sBAAsB,GAAG,CAAC,UAAU,CAAC,CAAC;MAwC/B,MAAM;;;;;;QAEP,aAAQ,GAAG,cAAc,SAAS,EAAE,EAAE,CAAC;QAEvC,wBAAmB,GAAyB,EAAE,CAAC;oBAExC,IAAI,CAAC,QAAQ;uBAKK,KAAK;8BAKwB,QAAQ;wBAK1C,KAAK;;IAkBjC,YAAY,CAAC,EAAS;QAClB,EAAE,CAAC,wBAAwB,EAAE,CAAC;QAC9B,EAAE,CAAC,cAAc,EAAE,CAAC;QACpB,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC5B;IAGD,MAAM,eAAe,CAAC,CAAQ;QAC1B,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QAEpB,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC5B;IAED,gBAAgB,CAAC,EAAgB;;;QAG7B,IAAI,EAAE,CAAC,MAAM,EAAE;YACX,EAAE,CAAC,wBAAwB,EAAE,CAAA;YAC7B,EAAE,CAAC,cAAc,EAAE,CAAC;SACvB;KACJ;IAED,iBAAiB;QACb,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE1B,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;YAChB,OAAO,EAAE,IAAI,CAAC,OAAO;SACxB,CAAC,CAAC;KACN;IAED,WAAW,CAAC,KAAiB;QACzB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC7B;IAED,UAAU,CAAC,KAAiB;QACxB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC5B;IAED,iBAAiB;QACb,IAAI,CAAC,mBAAmB,mCACjBA,6BAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,GAC9BC,yBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,sBAAsB,CAAC,CACxD,CAAC;KACL;IAGD,MAAM,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;QAC5EC,4BAAoB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;KACvD;IAED,MAAM;QACF,QACIC,QAACC,UAAI,uDACDD,oEAAO,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,eAAe,mBAAgB,IAAI,CAAC,QAAQ,IACzEA,kFAAO,MAAM,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EAClC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,EACtC,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,EACzC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EACpC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,EAAE,EAAE,IAAI,CAAC,IAAI,EACb,KAAK,EAAC,YAAY,EAClB,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,GAAG,EAAE,EAAE,MAAK,IAAI,CAAC,WAAW,GAAG,EAAE,CAAA,EAAC,IAC9B,IAAI,CAAC,mBAAmB,EAC3B,EACRA,mEAAM,KAAK,EAAC,eAAe,GAAQ,EACnCA,mEAAM,KAAK,EAAC,MAAM,IACdA,oEAAO,CACJ,CACH,CACL,EACT;KACL;;;;AAGL,IAAI,SAAS,GAAG,CAAC,CAAC;;;;;","names":["inheritAriaAttributes","inheritAttributes","setOrRemoveAttribute","h","Host"],"sources":["src/components/switch/switch.scss?tag=wcs-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n --wcs-switch-background-color-initial: var(--wcs-semantic-color-background-control-indicator-default);\n --wcs-switch-background-color-final: var(--wcs-semantic-color-background-control-indicator-selected);\n --wcs-switch-background-color-disabled: var(--wcs-semantic-color-background-control-indicator-disabled);\n --wcs-switch-background-color-disabled-selected: var(--wcs-semantic-color-background-control-indicator-disabled);\n --wcs-switch-background-color-hover-selected: var(--wcs-semantic-color-background-control-indicator-hover);\n\n --wcs-switch-padding-horizontal: var(--wcs-semantic-spacing-small);\n --wcs-switch-padding-vertical: calc((var(--wcs-switch-height) - var(--wcs-switch-dot-size)) / 2); // to center the dot vertically, at the middle of the dot\n\n // TODO : Les variables figma sont bindées sur les primitives\n --wcs-switch-dot-color-default: var(--wcs-semantic-color-foreground-brand); // the dot color when the switch is not checked\n --wcs-switch-dot-color-selected: var(--wcs-semantic-color-foreground-control-indicator-selected); // the dot color when the switch is checked\n --wcs-switch-dot-color-disabled: var(--wcs-semantic-color-foreground-control-indicator-disabled);\n\n --wcs-switch-text-color-default: var(--wcs-semantic-color-text-secondary);\n --wcs-switch-text-color-selected: var(--wcs-semantic-color-text-primary);\n --wcs-switch-text-color-disabled: var(--wcs-semantic-color-text-disabled);\n\n --wcs-switch-text-font-weight-default: var(--wcs-semantic-font-weight-medium);\n --wcs-switch-text-font-weight-selected: var(--wcs-semantic-font-weight-medium);\n\n --wcs-switch-outline-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n --wcs-switch-dot-translate-x: calc(var(--wcs-switch-width) - var(--wcs-switch-dot-size) - (2 * var(--wcs-switch-padding-horizontal)));\n --wcs-switch-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n --wcs-switch-dot-size: 0.875rem; /* 14px /\n\n --wcs-switch-height: var(--wcs-semantic-size-xs);\n --wcs-switch-width: var(--wcs-semantic-size-l);\n\n --wcs-switch-border-radius: var(--wcs-semantic-border-radius-full);\n\n --wcs-switch-gap: var(--wcs-semantic-spacing-base);\n\n display: inline-flex;\n}\n\n:host([disabled]) {\n .text {\n color: var(--wcs-switch-text-color-disabled);\n }\n\n .wcs-container {\n cursor: not-allowed;\n }\n}\n\n/ Customize the label (the wcs-container) /\n.wcs-container {\n position: relative;\n display: flex;\n user-select: none;\n margin-bottom: 0;\n\n gap: var(--wcs-switch-gap);\n}\n\n.wcs-container:has(input:focus-visible) {\n @include focus-outline($outline-color: var(--wcs-switch-outline-color-focus), $border-radius: var(--wcs-switch-border-radius));\n}\n\n/ If the selector focus-visible is not supported by the browser, use focus-within instead /\n@supports not selector(.wcs-container:has(input:focus-visible)){\n .wcs-container:focus-within {\n @include focus-outline($outline-color: var(--wcs-switch-outline-color-focus), $border-radius: var(--wcs-switch-border-radius));\n }\n}\n\n/ Let the user choose the alignment of the checkbox with the label text /\n:host([label-alignment=\"top\"]) {\n .wcs-container {\n align-items: start;\n }\n}\n\n:host([label-alignment=\"center\"]) {\n .wcs-container {\n align-items: center;\n }\n}\n\n:host([label-alignment=\"bottom\"]) {\n .wcs-container {\n align-items: flex-end;\n }\n}\n\n/ Hide the browser's default switch /\n.wcs-container input {\n position: absolute;\n opacity: 0;\n height: 0;\n width: 0;\n}\n\n.text {\n color: var(--wcs-switch-text-color-default);\n\n font-weight: var(--wcs-switch-text-font-weight-default);\n line-height: 1.375;\n}\n\n.wcs-container:not([aria-disabled]) input:checked ~ .text {\n font-weight: var(--wcs-switch-text-font-weight-selected);\n color: var(--wcs-switch-text-color-selected);\n}\n\n.wcs-checkmark::before {\n position: absolute;\n transition: all var(--wcs-switch-transition-duration) ease-out;\n}\n\n.wcs-checkmark::before {\n bottom: var(--wcs-switch-padding-vertical);\n left: var(--wcs-switch-padding-horizontal);\n width: var(--wcs-switch-dot-size);\n height: var(--wcs-switch-dot-size);\n content: \"\";\n border-radius: 50%;\n background-color: var(--wcs-switch-dot-color-default);\n}\n\n:host([disabled]:not([checked])) {\n .wcs-checkmark::before {\n background-color: var(--wcs-switch-dot-color-disabled);\n }\n\n .wcs-checkmark {\n background-color: var(--wcs-switch-background-color-disabled);\n }\n}\n\n:host([disabled][checked]) {\n .wcs-checkmark {\n background-color: var(--wcs-switch-background-color-disabled-selected);\n }\n}\n\n:host([disabled]) {\n .text {\n color: var(--wcs-switch-text-color-disabled);\n }\n}\n\n.wcs-checkmark {\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n width: var(--wcs-switch-width);\n height: var(--wcs-switch-height);\n border-radius: var(--wcs-switch-border-radius);\n background-color: var(--wcs-switch-background-color-initial);\n\n min-width: 3rem;\n position: relative;\n}\n\n.wcs-container:not([aria-disabled]) {\n cursor: pointer;\n}\n\n/ When the switch is checked, change the dot to white /\ninput:not([disabled]):checked + .wcs-checkmark::before,\n.wcs-container:focus input:not([disabled]) + .wcs-checkmark::before {\n background-color: var(--wcs-switch-dot-color-selected);\n}\n\n/ Switch transition /\ninput:checked + .wcs-checkmark::before {\n transform: translateX(var(--wcs-switch-dot-translate-x));\n}\n\n/ When the switch is checked, change background /\ninput:not([disabled]):checked + .wcs-checkmark {\n background-color: var(--wcs-switch-background-color-final);\n}\n\n/ When the switch is checked and hover, change background /\n.wcs-container:hover input:not([disabled]):checked + .wcs-checkmark {\n background-color: var(--wcs-switch-background-color-hover-selected);\n}\n","import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Method,\n Prop\n} from '@stencil/core';\nimport { SwitchChangeEventDetail, SwitchLabelAlignment } from './switch-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst SWITCH_INHERITED_ATTRS = ['tabindex'];\n\n/\n The switch component is a control used to switch between on and off state.\n * \n * @cssprop --wcs-switch-outline-color-focus - Color of the focus outline\n * \n * @cssprop --wcs-switch-text-color-default - Color of the text when the switch is not selected\n * @cssprop --wcs-switch-text-color-selected - Color of the text when the switch is selected\n * @cssprop --wcs-switch-text-color-disabled - Color of the text when the switch is disabled\n\n * \n * @cssprop --wcs-switch-background-color-initial - Background color of the switch when not selected\n * @cssprop --wcs-switch-background-color-final - Background color of the switch when selected\n * @cssprop --wcs-switch-background-color-disabled - Background color of the switch when disabled\n * @cssprop --wcs-switch-background-color-disabled-selected - Background color of the switch when disabled and selected\n * @cssprop --wcs-switch-background-color-hover-selected - Background color of the switch when hovered and selected\n * \n * @cssprop --wcs-switch-height - Height of the switch\n * @cssprop --wcs-switch-width - Width of the switch\n * @cssprop --wcs-switch-border-radius - Border radius of the switch\n * @cssprop --wcs-switch-padding-horizontal - Horizontal padding of the switch\n * @cssprop --wcs-switch-padding-vertical - Vertical padding of the switch\n * \n * @cssprop --wcs-switch-dot-color-default - Color of the dot when not selected\n * @cssprop --wcs-switch-dot-color-selected - Color of the dot when selected\n * @cssprop --wcs-switch-dot-color-disabled - Color of the dot when disabled\n * \n * @cssprop --wcs-switch-dot-translate-x - Horizontal translation of the dot (from left to right = right to left)\n * @cssprop --wcs-switch-dot-size - Size of the dot\n * \n * @cssprop --wcs-switch-gap - Gap between the switch and the text\n /\n@Component({\n tag: 'wcs-switch',\n styleUrl: 'switch.scss',\n shadow: {\n delegatesFocus: true,\n }\n})\nexport class Switch implements ComponentInterface, MutableAriaAttribute {\n @Element() private el!: HTMLElement;\n private switchId = `wcs-switch-${switchIds++}`;\n private nativeInput!: HTMLInputElement;\n private inheritedAttributes: { [k: string]: any } = {};\n\n @Prop() name = this.switchId;\n\n /\n If `true`, the switch is selected.\n /\n @Prop({reflect: true}) checked = false;\n\n /\n Specifie the alignment of the switch with the label content\n /\n @Prop({reflect: true}) labelAlignment: SwitchLabelAlignment = 'center';\n\n /\n Specify whether the switch is disabled or not.\n /\n @Prop() disabled: boolean = false;\n\n /\n Emitted when the checked property has changed.\n /\n @Event() wcsChange!: EventEmitter<SwitchChangeEventDetail>;\n\n /\n Emitted when the switch has focus.\n /\n @Event() wcsFocus!: EventEmitter<FocusEvent>;\n \n /\n Emitted when the switch loses focus.\n */\n @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n \n handleChange(ev: Event) {\n ev.stopImmediatePropagation();\n ev.preventDefault();\n this.toggleSwitchState();\n }\n\n @Listen('click')\n async handleHostClick(e: Event){\n e.preventDefault();\n e.stopPropagation();\n\n this.toggleSwitchState();\n }\n\n handleInputClick(ev: PointerEvent) {\n // If the click event is coming from the mouse we ignore it.\n // We only want to handle the keyboard interactions as it is the only purpose of this native input\n if (ev.detail) {\n ev.stopImmediatePropagation()\n ev.preventDefault();\n }\n }\n\n toggleSwitchState() {\n if (this.disabled) return;\n \n this.checked = !this.checked;\n this.wcsChange.emit({\n checked: this.checked,\n });\n }\n\n handleFocus(event: FocusEvent) {\n this.wcsFocus.emit(event);\n }\n\n handleBlur(event: FocusEvent) {\n this.wcsBlur.emit(event);\n }\n\n componentWillLoad(): Promise<void> \| void {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el),\n ...inheritAttributes(this.el, SWITCH_INHERITED_ATTRS),\n };\n }\n \n @Method()\n async setAriaAttribute(attr: AriaAttributeName, value: string \| null \| undefined) {\n setOrRemoveAttribute(this.nativeInput, attr, value);\n }\n\n render() {\n return (\n <Host>\n <label htmlFor={this.name} class=\"wcs-container\" aria-disabled={this.disabled}>\n <input onBlur={this.handleBlur.bind(this)}\n onChange={this.handleChange.bind(this)}\n onClick={this.handleInputClick.bind(this)}\n onFocus={this.handleFocus.bind(this)}\n checked={this.checked}\n id={this.name}\n class=\"wcs-switch\"\n type=\"checkbox\"\n name={this.name}\n disabled={this.disabled}\n ref={el => {this.nativeInput = el}}\n {...this.inheritedAttributes}>\n </input>\n <span class=\"wcs-checkmark\"></span>\n <span class=\"text\">\n <slot/>\n </span>\n </label>\n </Host>\n );\n }\n}\n\nlet switchIds = 0;\n"],"version":3}
1	+ {"file":"wcs-switch.entry.cjs.js","mappings":"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","names":["inheritAriaAttributes","inheritAttributes","setOrRemoveAttribute","getSlottedContentText","h","Host"],"sources":["src/components/switch/switch.scss?tag=wcs-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n --wcs-switch-background-color-initial: var(--wcs-semantic-color-background-control-indicator-default);\n --wcs-switch-background-color-final: var(--wcs-semantic-color-background-control-indicator-selected);\n --wcs-switch-background-color-disabled: var(--wcs-semantic-color-background-control-indicator-disabled);\n --wcs-switch-background-color-disabled-selected: var(--wcs-semantic-color-background-control-indicator-disabled);\n --wcs-switch-background-color-hover-selected: var(--wcs-semantic-color-background-control-indicator-hover);\n\n --wcs-switch-padding-horizontal: var(--wcs-semantic-spacing-small);\n --wcs-switch-padding-vertical: calc((var(--wcs-switch-height) - var(--wcs-switch-dot-size)) / 2); // to center the dot vertically, at the middle of the dot\n\n // TODO : Les variables figma sont bindées sur les primitives\n --wcs-switch-dot-color-default: var(--wcs-semantic-color-foreground-brand); // the dot color when the switch is not checked\n --wcs-switch-dot-color-selected: var(--wcs-semantic-color-foreground-control-indicator-selected); // the dot color when the switch is checked\n --wcs-switch-dot-color-disabled: var(--wcs-semantic-color-foreground-control-indicator-disabled);\n\n --wcs-switch-text-color-default: var(--wcs-semantic-color-text-secondary);\n --wcs-switch-text-color-selected: var(--wcs-semantic-color-text-primary);\n --wcs-switch-text-color-disabled: var(--wcs-semantic-color-text-disabled);\n\n --wcs-switch-text-font-weight-default: var(--wcs-semantic-font-weight-medium);\n --wcs-switch-text-font-weight-selected: var(--wcs-semantic-font-weight-medium);\n\n --wcs-switch-outline-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n --wcs-switch-dot-translate-x: calc(var(--wcs-switch-width) - var(--wcs-switch-dot-size) - (2 * var(--wcs-switch-padding-horizontal)));\n --wcs-switch-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n --wcs-switch-dot-size: 0.875rem; /* 14px /\n\n --wcs-switch-height: var(--wcs-semantic-size-xs);\n --wcs-switch-width: var(--wcs-semantic-size-l);\n\n --wcs-switch-border-radius: var(--wcs-semantic-border-radius-full);\n\n --wcs-switch-gap: var(--wcs-semantic-spacing-base);\n\n display: inline-flex;\n}\n\n:host([disabled]) {\n .text {\n color: var(--wcs-switch-text-color-disabled);\n }\n\n .wcs-container {\n cursor: not-allowed;\n }\n}\n\n/ Customize the label (the wcs-container) /\n.wcs-container {\n position: relative;\n display: flex;\n user-select: none;\n margin-bottom: 0;\n\n gap: var(--wcs-switch-gap);\n}\n\n.wcs-container:has(input:focus-visible) {\n @include focus-outline($outline-color: var(--wcs-switch-outline-color-focus), $border-radius: var(--wcs-switch-border-radius));\n}\n\n/ If the selector focus-visible is not supported by the browser, use focus-within instead /\n@supports not selector(.wcs-container:has(input:focus-visible)){\n .wcs-container:focus-within {\n @include focus-outline($outline-color: var(--wcs-switch-outline-color-focus), $border-radius: var(--wcs-switch-border-radius));\n }\n}\n\n/ Let the user choose the alignment of the checkbox with the label text /\n:host([label-alignment=\"top\"]) {\n .wcs-container {\n align-items: start;\n }\n}\n\n:host([label-alignment=\"center\"]) {\n .wcs-container {\n align-items: center;\n }\n}\n\n:host([label-alignment=\"bottom\"]) {\n .wcs-container {\n align-items: flex-end;\n }\n}\n\n/ Hide the browser's default switch /\n.wcs-container input {\n position: absolute;\n opacity: 0;\n height: 0;\n width: 0;\n}\n\n.text {\n color: var(--wcs-switch-text-color-default);\n\n font-weight: var(--wcs-switch-text-font-weight-default);\n line-height: 1.375;\n}\n\n.wcs-container:not([aria-disabled]) input:checked ~ .text {\n font-weight: var(--wcs-switch-text-font-weight-selected);\n color: var(--wcs-switch-text-color-selected);\n}\n\n.wcs-checkmark::before {\n position: absolute;\n transition: all var(--wcs-switch-transition-duration) ease-out;\n}\n\n.wcs-checkmark::before {\n bottom: var(--wcs-switch-padding-vertical);\n left: var(--wcs-switch-padding-horizontal);\n width: var(--wcs-switch-dot-size);\n height: var(--wcs-switch-dot-size);\n content: \"\";\n border-radius: 50%;\n background-color: var(--wcs-switch-dot-color-default);\n}\n\n:host([disabled]:not([checked])) {\n .wcs-checkmark::before {\n background-color: var(--wcs-switch-dot-color-disabled);\n }\n\n .wcs-checkmark {\n background-color: var(--wcs-switch-background-color-disabled);\n }\n}\n\n:host([disabled][checked]) {\n .wcs-checkmark {\n background-color: var(--wcs-switch-background-color-disabled-selected);\n }\n}\n\n:host([disabled]) {\n .text {\n color: var(--wcs-switch-text-color-disabled);\n }\n}\n\n.wcs-checkmark {\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n width: var(--wcs-switch-width);\n height: var(--wcs-switch-height);\n border-radius: var(--wcs-switch-border-radius);\n background-color: var(--wcs-switch-background-color-initial);\n\n min-width: 3rem;\n position: relative;\n}\n\n.wcs-container:not([aria-disabled]) {\n cursor: pointer;\n}\n\n/ When the switch is checked, change the dot to white /\ninput:not([disabled]):checked + .wcs-checkmark::before,\n.wcs-container:focus input:not([disabled]) + .wcs-checkmark::before {\n background-color: var(--wcs-switch-dot-color-selected);\n}\n\n/ Switch transition /\ninput:checked + .wcs-checkmark::before {\n transform: translateX(var(--wcs-switch-dot-translate-x));\n}\n\n/ When the switch is checked, change background /\ninput:not([disabled]):checked + .wcs-checkmark {\n background-color: var(--wcs-switch-background-color-final);\n}\n\n/ When the switch is checked and hover, change background /\n.wcs-container:hover input:not([disabled]):checked + .wcs-checkmark {\n background-color: var(--wcs-switch-background-color-hover-selected);\n}\n","import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Method,\n Prop\n} from '@stencil/core';\nimport { SwitchChangeEventDetail, SwitchLabelAlignment } from './switch-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { ControlComponentWithLabel, getSlottedContentText } from \"../../utils/control-component-interface\";\n\nconst SWITCH_INHERITED_ATTRS = ['tabindex'];\n\n/\n The switch component is a control used to switch between on and off state.\n * \n * @cssprop --wcs-switch-outline-color-focus - Color of the focus outline\n * \n * @cssprop --wcs-switch-text-color-default - Color of the text when the switch is not selected\n * @cssprop --wcs-switch-text-color-selected - Color of the text when the switch is selected\n * @cssprop --wcs-switch-text-color-disabled - Color of the text when the switch is disabled\n\n * \n * @cssprop --wcs-switch-background-color-initial - Background color of the switch when not selected\n * @cssprop --wcs-switch-background-color-final - Background color of the switch when selected\n * @cssprop --wcs-switch-background-color-disabled - Background color of the switch when disabled\n * @cssprop --wcs-switch-background-color-disabled-selected - Background color of the switch when disabled and selected\n * @cssprop --wcs-switch-background-color-hover-selected - Background color of the switch when hovered and selected\n * \n * @cssprop --wcs-switch-height - Height of the switch\n * @cssprop --wcs-switch-width - Width of the switch\n * @cssprop --wcs-switch-border-radius - Border radius of the switch\n * @cssprop --wcs-switch-padding-horizontal - Horizontal padding of the switch\n * @cssprop --wcs-switch-padding-vertical - Vertical padding of the switch\n * \n * @cssprop --wcs-switch-dot-color-default - Color of the dot when not selected\n * @cssprop --wcs-switch-dot-color-selected - Color of the dot when selected\n * @cssprop --wcs-switch-dot-color-disabled - Color of the dot when disabled\n * \n * @cssprop --wcs-switch-dot-translate-x - Horizontal translation of the dot (from left to right = right to left)\n * @cssprop --wcs-switch-dot-size - Size of the dot\n * \n * @cssprop --wcs-switch-gap - Gap between the switch and the text\n /\n@Component({\n tag: 'wcs-switch',\n styleUrl: 'switch.scss',\n shadow: {\n delegatesFocus: true,\n }\n})\nexport class Switch implements ComponentInterface, MutableAriaAttribute, ControlComponentWithLabel {\n @Element() private el!: HTMLElement;\n private switchId = `wcs-switch-${switchIds++}`;\n private nativeInput!: HTMLInputElement;\n private inheritedAttributes: { [k: string]: any } = {};\n\n @Prop() name = this.switchId;\n\n /\n If `true`, the switch is selected.\n /\n @Prop({reflect: true}) checked = false;\n\n /\n Specifie the alignment of the switch with the label content\n /\n @Prop({reflect: true}) labelAlignment: SwitchLabelAlignment = 'center';\n\n /\n Specify whether the switch is disabled or not.\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /\n Emitted when the checked property has changed.\n /\n @Event() wcsChange!: EventEmitter<SwitchChangeEventDetail>;\n\n /\n Emitted when the switch has focus.\n /\n @Event() wcsFocus!: EventEmitter<FocusEvent>;\n \n /\n Emitted when the switch loses focus.\n */\n @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n \n handleChange(ev: Event) {\n ev.stopImmediatePropagation();\n ev.preventDefault();\n this.toggleSwitchState();\n }\n\n @Listen('click')\n async handleHostClick(e: Event){\n e.preventDefault();\n e.stopPropagation();\n\n this.toggleSwitchState();\n }\n\n handleInputClick(ev: PointerEvent) {\n // If the click event is coming from the mouse we ignore it.\n // We only want to handle the keyboard interactions as it is the only purpose of this native input\n if (ev.detail) {\n ev.stopImmediatePropagation()\n ev.preventDefault();\n }\n }\n\n toggleSwitchState() {\n if (this.disabled) return;\n \n this.checked = !this.checked;\n this.wcsChange.emit({\n checked: this.checked,\n });\n }\n\n handleFocus(event: FocusEvent) {\n this.wcsFocus.emit(event);\n }\n\n handleBlur(event: FocusEvent) {\n this.wcsBlur.emit(event);\n }\n\n componentWillLoad(): Promise<void> \| void {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el),\n ...inheritAttributes(this.el, SWITCH_INHERITED_ATTRS),\n };\n }\n \n @Method()\n async setAriaAttribute(attr: AriaAttributeName, value: string \| null \| undefined) {\n setOrRemoveAttribute(this.nativeInput, attr, value);\n }\n\n @Method()\n async getLabel(): Promise<string> {\n return getSlottedContentText(this.el);\n }\n \n render() {\n return (\n <Host>\n <label htmlFor={this.name} class=\"wcs-container\" aria-disabled={this.disabled}>\n <input onBlur={this.handleBlur.bind(this)}\n onChange={this.handleChange.bind(this)}\n onClick={this.handleInputClick.bind(this)}\n onFocus={this.handleFocus.bind(this)}\n checked={this.checked}\n id={this.name}\n class=\"wcs-switch\"\n type=\"checkbox\"\n name={this.name}\n disabled={this.disabled}\n ref={el => {this.nativeInput = el}}\n {...this.inheritedAttributes}>\n </input>\n <span class=\"wcs-checkmark\"></span>\n <span class=\"text\">\n <slot/>\n </span>\n </label>\n </Host>\n );\n }\n}\n\nlet switchIds = 0;\n"],"version":3}

package/dist/cjs/wcs-tab.cjs.entry.js CHANGED Viewed

@@ -18,7 +18,7 @@ const Tab = class {
         this.tabLoaded.emit();
     }
     render() {
-        return (index.h(index.Host, { key: '72b042d637339884bb5c788c54b7ebfb039bd155', slot: "wcs-tab", role: "tabpanel" }, index.h("slot", { key: 'cab504f0521ec274763c97be0e42719b2a5e5099' })));
+        return (index.h(index.Host, { key: '805ddbb0eafcce267e7f102f8d7c19712d5b04be', slot: "wcs-tab", role: "tabpanel" }, index.h("slot", { key: 'ec2afee10cefdf575df100582e769e3bf93d2412' })));
     }
 };
 Tab.style = WcsTabStyle0;

package/dist/cjs/wcs-tabs.cjs.entry.js CHANGED Viewed

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-6f0140d8.js');
-const helpers = require('./helpers-871f5a3d.js');
+const helpers = require('./helpers-2f1a8ddc.js');
 const tabsCss = ":host{--wcs-tabs-indicator-height:calc(var(--wcs-semantic-size-base) / 2);--wcs-tabs-indicator-background-color:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-tabs-indicator-border-radius:var(--wcs-semantic-border-radius-full);--wcs-tabs-color-default:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-tabs-color-hover:var(--wcs-semantic-color-foreground-action-secondary-hover);--wcs-tabs-color-press:var(--wcs-semantic-color-foreground-action-secondary-press);--wcs-tabs-color-selected:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-tabs-background-color-focus:var(--wcs-semantic-color-background-action-secondary-focus);--wcs-tabs-background-color-hover:var(--wcs-semantic-color-background-action-secondary-hover);--wcs-tabs-background-color-press:var(--wcs-semantic-color-background-action-secondary-press);--wcs-tabs-border-radius:var(--wcs-semantic-border-radius-base);--wcs-tabs-border-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-tabs-font-weight-default:var(--wcs-semantic-font-weight-roman);--wcs-tabs-font-weight-selected:var(--wcs-semantic-font-weight-roman);--wcs-tabs-padding-top:var(--wcs-semantic-spacing-base);--wcs-tabs-padding-right:var(--wcs-semantic-spacing-large);--wcs-tabs-padding-bottom:calc(var(--wcs-semantic-spacing-base) + var(--wcs-tabs-indicator-height));--wcs-tabs-padding-left:var(--wcs-semantic-spacing-large);--wcs-tabs-gutter-border-width:var(--wcs-semantic-border-width-default);--wcs-tabs-gutter-background-color:var(--wcs-semantic-color-border-secondary);--wcs-tabs-headers-border-bottom:var(--wcs-tabs-gutter-border-width) solid var(--wcs-tabs-gutter-background-color);--wcs-tabs-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);display:block}:host([align=start]) .wcs-tabs-headers{justify-content:start}:host([align=end]) .wcs-tabs-headers{justify-content:end}:host([align=center]) .wcs-tabs-headers{justify-content:center}.wcs-tabs-headers{overflow-x:auto;display:flex;flex-direction:row;position:relative}:host([gutter]) .wcs-tabs-headers{border-bottom:var(--wcs-tabs-headers-border-bottom)}.wcs-tab-header{position:relative;padding:var(--wcs-tabs-padding-top) var(--wcs-tabs-padding-right) var(--wcs-tabs-padding-bottom) var(--wcs-tabs-padding-left);border-radius:var(--wcs-tabs-border-radius) var(--wcs-tabs-border-radius) 0 0;display:flex;flex-shrink:0;align-items:center;justify-content:center;cursor:pointer;outline:none;transition:all var(--wcs-tabs-transition-duration) ease-out}.wcs-tab-header span{text-align:center;color:var(--wcs-tabs-color-default);font-size:1rem;font-weight:var(--wcs-tabs-font-weight-default)}.wcs-tab-header:hover{background-color:var(--wcs-tabs-background-color-hover)}.wcs-tab-header:hover span{color:var(--wcs-tabs-color-hover)}.wcs-tab-header:focus-visible>span{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-tabs-border-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:0.1rem}.wcs-tab-header:active{background-color:var(--wcs-tabs-background-color-press)}.wcs-tab-header:active span{color:var(--wcs-tabs-color-press)}.active span{font-weight:var(--wcs-tabs-font-weight-selected);color:var(--wcs-tabs-color-selected)}.active::after{position:absolute;bottom:0;left:0;width:100%;content:\"\";height:var(--wcs-tabs-indicator-height);background-color:var(--wcs-tabs-indicator-background-color);border-radius:var(--wcs-tabs-indicator-border-radius)}";
 const WcsTabsStyle0 = tabsCss;
@@ -165,7 +165,7 @@ const Tabs = class {
         this.tabs.forEach((el) => el.hidden = true);
     }
     render() {
-        return (index.h(index.Host, { key: '934064d6ad364060b52d92c57d98ad2ed705f3b3' }, index.h("div", Object.assign({ key: 'd546315443ce5489ba17a893fc7ac62bd44ca2ba', class: "wcs-tabs-headers", role: "tablist", ref: (el) => (this.nativeTablist = el), "aria-label": this.description }, this.inheritedAttributes), this.headers.map((header, idx) => index.h("div", { class: 'wcs-tab-header ' + (this.currentActiveTabIndex === idx ? 'active' : ''), onClick: () => this.selectTabAndEmitChangeEvent(idx), onKeyDown: evt => this.handleKeyDown(evt, idx), tabIndex: this.currentActiveTabIndex === idx ? 0 : -1, role: "tab", id: `tabs-id-${this.tabsId}-tab-id-${idx}`, "aria-controls": `tabs-id-${this.tabsId}-tab-panel-${idx}`, "aria-label": header, "aria-selected": this.currentActiveTabIndex === idx ? 'true' : 'false' }, index.h("span", null, header)))), index.h("div", { key: '6e03f23939dd122d4eabf6bdf04c2cd4bcbcfc93', class: "wcs-tabs" }, index.h("slot", { key: 'd1c3093ccb95d6d1a462dd90a7494ef1e2e81e79', onSlotchange: () => this.onTabsSlotChange(), name: "wcs-tab" }))));
+        return (index.h(index.Host, { key: '22e579eee0adc18107ae55e85efc5b9b6eb2f537' }, index.h("div", Object.assign({ key: 'f4571687ee9f7832b7a8286d21c815a300b4b201', class: "wcs-tabs-headers", role: "tablist", ref: (el) => (this.nativeTablist = el), "aria-label": this.description }, this.inheritedAttributes), this.headers.map((header, idx) => index.h("div", { class: 'wcs-tab-header ' + (this.currentActiveTabIndex === idx ? 'active' : ''), onClick: () => this.selectTabAndEmitChangeEvent(idx), onKeyDown: evt => this.handleKeyDown(evt, idx), tabIndex: this.currentActiveTabIndex === idx ? 0 : -1, role: "tab", id: `tabs-id-${this.tabsId}-tab-id-${idx}`, "aria-controls": `tabs-id-${this.tabsId}-tab-panel-${idx}`, "aria-label": header, "aria-selected": this.currentActiveTabIndex === idx ? 'true' : 'false' }, index.h("span", null, header)))), index.h("div", { key: 'cf1db062352a270f5458f316bc6549a93f5703be', class: "wcs-tabs" }, index.h("slot", { key: 'd8f0fad9ab978d34dd76f83f2bdce98a24277371', onSlotchange: () => this.onTabsSlotChange(), name: "wcs-tab" }))));
     }
     /**
      * Observe when a new tab panel is added to the slot to let's handle accessibility properties for tabs panel:

package/dist/cjs/wcs-tabs.cjs.entry.js.map CHANGED Viewed

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

package/dist/cjs/wcs-textarea.cjs.entry.js CHANGED Viewed

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-6f0140d8.js');
-const helpers = require('./helpers-871f5a3d.js');
+const helpers = require('./helpers-2f1a8ddc.js');
 const textareaCss = ":host{--wcs-textarea-text-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-textarea-value-color:var(--wcs-semantic-color-text-primary);--wcs-textarea-value-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-textarea-placeholder-color:var(--wcs-semantic-color-text-tertiary);--wcs-textarea-placeholder-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-textarea-placeholder-font-style:var(--wcs-semantic-font-style-control-placeholder);--wcs-textarea-icon-color-default:var(--wcs-semantic-color-foreground-brand);--wcs-textarea-icon-color-disabled:var(--wcs-semantic-color-foreground-disabled);--wcs-textarea-icon-color-focus:var(--wcs-semantic-color-foreground-brand);--wcs-textarea-border-color-default:var(--wcs-semantic-color-border-primary);--wcs-textarea-border-color-disabled:var(--wcs-semantic-color-border-disabled);--wcs-textarea-border-color-error:var(--wcs-semantic-color-border-critical);--wcs-textarea-border-color-focus:var(--wcs-semantic-color-border-control-focus);--wcs-textarea-border-style-default:solid;--wcs-textarea-border-style-error:solid;--wcs-textarea-border-style-focus:var(--wcs-semantic-border-style-focus-control);--wcs-internal-textarea-border-radius-left:var(--wcs-textarea-border-radius-left, var(--wcs-semantic-border-radius-base));--wcs-internal-textarea-border-radius-right:var(--wcs-textarea-border-radius-right, var(--wcs-semantic-border-radius-base));--wcs-textarea-border-width:var(--wcs-semantic-border-width-default);--wcs-textarea-border-width-focus:var(--wcs-semantic-border-width-large);--wcs-textarea-gap:var(--wcs-semantic-spacing-base);--wcs-textarea-padding-top:var(--wcs-semantic-spacing-base);--wcs-textarea-padding-bottom:var(--wcs-semantic-spacing-base);--wcs-internal-textarea-padding-left:var(--wcs-textarea-padding-left, var(--wcs-semantic-spacing-large));--wcs-internal-textarea-padding-right:var(--wcs-textarea-padding-right, var(--wcs-semantic-spacing-large));--wcs-textarea-min-height:var(--wcs-semantic-size-m);--wcs-internal-textarea-max-height:var(--wcs-textarea-max-height, unset);--wcs-textarea-background-color:var(--wcs-semantic-color-background-control-default);display:flex;flex-direction:row;align-items:center;gap:var(--wcs-textarea-gap);width:100%;border-radius:var(--wcs-internal-textarea-border-radius-left) var(--wcs-internal-textarea-border-radius-right) var(--wcs-internal-textarea-border-radius-right) var(--wcs-internal-textarea-border-radius-left);background-color:var(--wcs-textarea-background-color);outline:var(--wcs-textarea-border-style-default) var(--wcs-textarea-border-width) var(--wcs-textarea-border-color-default);outline-offset:calc(-1 * var(--wcs-textarea-border-width));background-clip:padding-box;box-sizing:border-box}:host textarea{box-sizing:border-box;font-family:inherit;overflow:auto;flex:1;width:100%;min-height:var(--wcs-textarea-min-height);max-height:var(--wcs-internal-textarea-max-height);background-color:transparent;color:var(--wcs-textarea-value-color);font-weight:var(--wcs-textarea-value-font-weight) !important;border:none;padding-top:var(--wcs-textarea-padding-top);padding-bottom:var(--wcs-textarea-padding-bottom);padding-left:var(--wcs-internal-textarea-padding-left);padding-right:var(--wcs-internal-textarea-padding-right);font-size:1rem;line-height:1.5}:host textarea::placeholder{color:var(--wcs-textarea-placeholder-color);opacity:1;font-weight:var(--wcs-textarea-placeholder-font-weight);font-style:var(--wcs-textarea-placeholder-font-style)}:host textarea:focus{box-shadow:none;outline:0}:host wcs-mat-icon{margin-left:var(--wcs-internal-textarea-padding-left);color:var(--wcs-textarea-icon-color-default)}:host([disabled]){--wcs-textarea-background-color:var(--wcs-semantic-color-background-control-disabled);outline:var(--wcs-textarea-border-style-default) var(--wcs-textarea-border-width) var(--wcs-textarea-border-color-disabled)}:host([disabled]) textarea{color:var(--wcs-textarea-text-color-disabled);cursor:not-allowed}:host([disabled]) textarea::placeholder{color:var(--wcs-textarea-text-color-disabled)}:host([disabled]) wcs-mat-icon{color:var(--wcs-textarea-icon-color-disabled)}:host([icon]) textarea{padding-left:0}:host([state=error]){outline-color:var(--wcs-textarea-border-color-error) !important}:host(:focus-within){outline:var(--wcs-textarea-border-style-focus) var(--wcs-textarea-border-width-focus) var(--wcs-textarea-border-color-focus);outline-offset:calc(var(--wcs-textarea-border-width-focus) * -1)}:host(:focus-within) wcs-mat-icon{color:var(--wcs-textarea-icon-color-focus)}";
 const WcsTextareaStyle0 = textareaCss;
@@ -136,7 +136,7 @@ const Textarea = class {
     render() {
         const value = this.getValue();
         const style = Object.assign({}, (this.resize && { 'resize': this.resize }));
-        return (index.h(index.Host, { key: '1d7fc40452ef3499c548ead8966d565f69464c7e', "aria-disabled": this.disabled ? 'true' : null }, this.icon ? (index.h("wcs-mat-icon", { icon: this.icon, size: "m" })) : null, index.h("textarea", Object.assign({ key: '5d1ee380bf9e0ddd60864210b337de4bb4ec1e80', class: "native-textarea", ref: el => this.nativeInput = el, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, style: style }, this.inheritedAttributes), value)));
+        return (index.h(index.Host, { key: 'd2f0cea260f9745f49f4aa259004b704af492c33', "aria-disabled": this.disabled ? 'true' : null }, this.icon ? (index.h("wcs-mat-icon", { icon: this.icon, size: "m" })) : null, index.h("textarea", Object.assign({ key: 'a5c87bbb2888132fd62f26df0f36e5d4e003ad84', class: "native-textarea", ref: el => this.nativeInput = el, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, style: style }, this.inheritedAttributes), value)));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/wcs-textarea.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"wcs-textarea.entry.cjs.js","mappings":"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","names":["debounceEvent","inheritAriaAttributes","inheritAttributes","raf","readTask","setOrRemoveAttribute","h","Host"],"sources":["src/components/textarea/textarea.scss?tag=wcs-textarea&encapsulation=shadow","src/components/textarea/textarea.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n@import '../../style/placeholder.scss';\n\n:host {\n --wcs-textarea-text-color-disabled: var(--wcs-semantic-color-text-disabled);\n --wcs-textarea-value-color: var(--wcs-semantic-color-text-primary);\n --wcs-textarea-value-font-weight: var(--wcs-semantic-font-weight-medium);\n\n --wcs-textarea-placeholder-color: var(--wcs-semantic-color-text-tertiary);\n --wcs-textarea-placeholder-font-weight: var(--wcs-semantic-font-weight-roman);\n --wcs-textarea-placeholder-font-style: var(--wcs-semantic-font-style-control-placeholder);\n\n --wcs-textarea-icon-color-default: var(--wcs-semantic-color-foreground-brand);\n --wcs-textarea-icon-color-disabled: var(--wcs-semantic-color-foreground-disabled);\n --wcs-textarea-icon-color-focus: var(--wcs-semantic-color-foreground-brand);\n\n --wcs-textarea-border-color-default: var(--wcs-semantic-color-border-primary);\n --wcs-textarea-border-color-disabled: var(--wcs-semantic-color-border-disabled);\n --wcs-textarea-border-color-error: var(--wcs-semantic-color-border-critical);\n --wcs-textarea-border-color-focus: var(--wcs-semantic-color-border-control-focus);\n\n --wcs-textarea-border-style-default: solid;\n --wcs-textarea-border-style-error: solid;\n --wcs-textarea-border-style-focus: var(--wcs-semantic-border-style-focus-control);\n\n --wcs-internal-textarea-border-radius-left: var(--wcs-textarea-border-radius-left, var(--wcs-semantic-border-radius-base)); // Overridden from prefix suffix group in form-field\n --wcs-internal-textarea-border-radius-right: var(--wcs-textarea-border-radius-right, var(--wcs-semantic-border-radius-base)); // Overridden from prefix suffix group in form-field\n\n --wcs-textarea-border-width: var(--wcs-semantic-border-width-default);\n --wcs-textarea-border-width-focus: var(--wcs-semantic-border-width-large);\n\n --wcs-textarea-gap: var(--wcs-semantic-spacing-base);\n\n --wcs-textarea-padding-top: var(--wcs-semantic-spacing-base);\n --wcs-textarea-padding-bottom: var(--wcs-semantic-spacing-base);\n --wcs-internal-textarea-padding-left: var(--wcs-textarea-padding-left, var(--wcs-semantic-spacing-large));\n --wcs-internal-textarea-padding-right: var(--wcs-textarea-padding-right, var(--wcs-semantic-spacing-large));\n\n --wcs-textarea-min-height: var(--wcs-semantic-size-m);\n --wcs-internal-textarea-max-height: var(--wcs-textarea-max-height, unset);\n\n --wcs-textarea-background-color: var(--wcs-semantic-color-background-control-default);\n\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--wcs-textarea-gap);\n width: 100%;\n border-radius: var(--wcs-internal-textarea-border-radius-left) var(--wcs-internal-textarea-border-radius-right) var(--wcs-internal-textarea-border-radius-right) var(--wcs-internal-textarea-border-radius-left);\n background-color: var(--wcs-textarea-background-color);\n outline: var(--wcs-textarea-border-style-default) var(--wcs-textarea-border-width) var(--wcs-textarea-border-color-default);\n outline-offset: calc(-1 * var(--wcs-textarea-border-width));\n background-clip: padding-box;\n\n box-sizing: border-box;\n\n textarea {\n box-sizing: border-box;\n font-family: inherit;\n overflow: auto;\n flex: 1;\n width: 100%;\n min-height: var(--wcs-textarea-min-height);\n max-height: var(--wcs-internal-textarea-max-height);\n background-color: transparent;\n color: var(--wcs-textarea-value-color);\n font-weight: var(--wcs-textarea-value-font-weight) !important;\n border: none;\n padding-top: var(--wcs-textarea-padding-top);\n padding-bottom: var(--wcs-textarea-padding-bottom);\n padding-left: var(--wcs-internal-textarea-padding-left);\n padding-right: var(--wcs-internal-textarea-padding-right);\n font-size: 1rem;\n line-height: 1.5;\n\n &::placeholder {\n @include placeholder(var(--wcs-textarea-placeholder-color), var(--wcs-textarea-placeholder-font-weight), var(--wcs-textarea-placeholder-font-style));\n }\n }\n\n textarea:focus {\n box-shadow: none;\n outline: 0;\n }\n\n wcs-mat-icon {\n margin-left: var(--wcs-internal-textarea-padding-left);\n color: var(--wcs-textarea-icon-color-default);\n }\n}\n\n:host([disabled]) {\n --wcs-textarea-background-color: var(--wcs-semantic-color-background-control-disabled);\n outline: var(--wcs-textarea-border-style-default) var(--wcs-textarea-border-width) var(--wcs-textarea-border-color-disabled);\n\n textarea {\n color: var(--wcs-textarea-text-color-disabled);\n cursor: not-allowed;\n\n &::placeholder {\n color: var(--wcs-textarea-text-color-disabled);\n }\n }\n\n wcs-mat-icon {\n color: var(--wcs-textarea-icon-color-disabled);\n }\n}\n\n:host([icon]) {\n textarea {\n padding-left: 0;\n }\n}\n\n:host([state=error]) {\n outline-color: var(--wcs-textarea-border-color-error) !important;\n}\n\n:host(:focus-within) {\n outline: var(--wcs-textarea-border-style-focus) var(--wcs-textarea-border-width-focus) var(--wcs-textarea-border-color-focus);\n outline-offset: calc(var(--wcs-textarea-border-width-focus) * -1);\n\n wcs-mat-icon {\n color: var(--wcs-textarea-icon-color-focus);\n }\n}\n","import {\n Component,\n ComponentInterface,\n Method,\n Prop,\n Watch,\n h,\n Host,\n EventEmitter,\n Element,\n Event,\n Build,\n readTask\n} from '@stencil/core';\nimport {\n debounceEvent,\n inheritAriaAttributes,\n inheritAttributes,\n raf,\n setOrRemoveAttribute\n} from '../../utils/helpers';\nimport { \n TextareaChangeEventDetail,\n WcsTextareaInputMode, \n WcsTextareaEnterKeyHint, \n WcsTextareaResize, \n WcsTextareaInputState,\n WcsTextareaWrap\n} from './textarea-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst TEXTAREA_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/*\n Mainly inspired from Ionic Textarea Component.\n * \n * ## Accessibility guidelines 💡\n * > - If you use wcs-textarea 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-textarea-icon-color-default - Default icon color whe the textarea is not focused\n * @cssprop --wcs-textarea-icon-color-focus - Icon color when the textarea is focused \n * @cssprop --wcs-textarea-icon-color-disabled - Icon color when the textarea is disabled\n * \n * @cssprop --wcs-textarea-background-color - Background color of the textarea\n \n @cssprop --wcs-textarea-border-radius-left - Border radius of the left side of the textarea\n * @cssprop --wcs-textarea-border-radius-right - Border radius of the right side of the textarea\n * \n * @cssprop --wcs-textarea-border-width - Border width of the textarea when not focused\n * @cssprop --wcs-textarea-border-width-focus - Border width of the textarea when focused\n * \n * @cssprop --wcs-textarea-border-color-default - Default border color of the textarea when not focused\n * @cssprop --wcs-textarea-border-color-disabled - Border color of the textarea when disabled\n * @cssprop --wcs-textarea-border-color-error - Border color of the textarea when in error state\n * @cssprop --wcs-textarea-border-color-focus - Border color of the textarea when focused\n * \n * @cssprop --wcs-textarea-value-color - Color of the value when the textarea is not focused\n * @cssprop --wcs-textarea-value-font-weight - Font weight of the textarea value\n * \n * @cssprop --wcs-textarea-placeholder-color - Color of the textarea placeholder\n * @cssprop --wcs-textarea-placeholder-font-weight - Font weight of the textarea placeholder\n * @cssprop --wcs-textarea-placeholder-font-style - Font style of the textarea placeholder\n * \n * @cssprop --wcs-textarea-text-color-disabled - Color of the value when the textarea is disabled\n * \n * @cssprop --wcs-textarea-border-style-default - Border style default of the textarea when not focused\n * @cssprop --wcs-textarea-border-style-error - Border style default of the textarea in error state\n * @cssprop --wcs-textarea-border-style-focus - Border style default of the textarea when focused\n * \n * @cssprop --wcs-textarea-min-height - Min height of the textarea component\n * @cssprop --wcs-textarea-max-height - Max height of the textarea component\n * \n * @cssprop --wcs-textarea-padding-top - Padding top of the textarea\n * @cssprop --wcs-textarea-padding-bottom - Padding bottom of the textarea\n * @cssprop --wcs-textarea-padding-left - Padding left of the textarea\n * @cssprop --wcs-textarea-padding-right - Padding right of the textarea\n * \n * @cssprop --wcs-textarea-gap - Gap between textarea and icon (prefix/suffix)\n /\n@Component({\n tag: 'wcs-textarea',\n styleUrl: 'textarea.scss',\n shadow: {\n delegatesFocus: true\n },\n})\nexport class Textarea implements ComponentInterface, MutableAriaAttribute {\n @Element() private el!: HTMLElement;\n private nativeInput?: HTMLTextAreaElement;\n private inputId = `wcs-textarea-${textareaIds++}`;\n private inheritedAttributes: { [k: string]: any } = {};\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 /\n Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n /\n @Prop() autocapitalize = 'none';\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 If `true`, the user cannot interact with the textarea.\n /\n @Prop() disabled = false;\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?: WcsTextareaInputMode;\n\n /\n A hint to the browser for which enter key to display.\n /\n @Prop() enterkeyhint?: WcsTextareaEnterKeyHint;\n\n /\n If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.\n /\n @Prop() maxlength?: number;\n\n /\n If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.\n /\n @Prop() minlength?: number;\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name: string = this.inputId;\n\n /\n Instructional text that shows before the input has a value.\n /\n @Prop() placeholder?: string \| null;\n\n /\n If `true`, the user cannot modify the value.\n /\n @Prop() readonly = false;\n\n /\n If `true`, the user must fill in a value before submitting a form.\n /\n @Prop() required = false;\n\n /\n If `true`, the element will have its spelling and grammar checked.\n /\n @Prop() spellcheck = false;\n\n /\n Specifies the state of the input. By default the input is in an initial state but you can set it to 'error' state if the data given by the user is not valid.\n /\n @Prop({reflect: true}) state: WcsTextareaInputState = 'initial';\n\n /\n The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. \n * Note : at the moment, modifying the width is only possible if you add some custom CSS to the component,\n * for example by overriding the `width` CSS property. See the Resize section for an example on how to do it.\n /\n @Prop() cols?: number;\n\n /\n The number of visible text lines for the control.\n /\n @Prop() rows?: number;\n\n /\n Indicates how the control wraps text.\n /\n @Prop() wrap?: WcsTextareaWrap;\n\n /\n If `true`, the element height will increase based on the value.\n /\n @Prop() autoGrow = false;\n\n /\n The value of the textarea.\n /\n @Prop({mutable: true}) value?: string \| null = '';\n\n /\n Indicates how the textarea should be resizable. \n * Note : at the moment horizontal resizing is only possible if you add custom CSS to the component,\n * see the Resize section for an example.\n /\n @Prop({reflect: true}) resize?: WcsTextareaResize;\n\n /\n Update the native input element when the value changes\n /\n @Watch('value')\n protected valueChanged() {\n const nativeInput = this.nativeInput;\n const value = this.getValue();\n if (nativeInput && nativeInput.value !== value) {\n nativeInput.value = value;\n }\n this.runAutoGrow();\n }\n\n /\n Emitted when the input value has changed.- See https://developer.mozilla.org/en-US/docs/Web/Events/change\n /\n @Event() wcsChange!: EventEmitter<TextareaChangeEventDetail>;\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 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 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 componentWillLoad() {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el),\n ...inheritAttributes(this.el, TEXTAREA_INHERITED_ATTRS)\n };\n }\n\n componentDidLoad() {\n raf(() => this.runAutoGrow());\n }\n\n private runAutoGrow() {\n const nativeInput = this.nativeInput;\n if (nativeInput && this.autoGrow) {\n readTask(() => {\n nativeInput.style.height = 'auto';\n nativeInput.style.height = nativeInput.scrollHeight + 'px';\n });\n }\n }\n \n @Method()\n async setAriaAttribute(attr: AriaAttributeName, value: string \| null \| undefined) {\n setOrRemoveAttribute(this.nativeInput, attr, value);\n }\n\n /\n This method make the textarea automatically adopt the size of the content without a scroll bar\n /\n @Method()\n async fitContent() {\n raf(() => this.runAutoGrow());\n }\n\n /\n Sets blur on the native `textarea` in `wcs-textarea`. Use this method instead of the global\n * `textarea.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 `<textarea>` element used under the hood.\n */\n @Method()\n getInputElement(): Promise<HTMLTextAreaElement> {\n // tslint:disable-next-line:no-non-null-assertion\n return Promise.resolve(this.nativeInput!);\n }\n\n private getValue(): string {\n return this.value \|\| '';\n }\n\n private onInput = (ev: Event) => {\n if (this.nativeInput) {\n this.value = this.nativeInput.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 onFocus = (ev: FocusEvent) => {\n if (this.fireFocusEvents) {\n this.wcsFocus.emit(ev);\n }\n }\n\n private onBlur = (ev: FocusEvent) => {\n if (this.fireFocusEvents) {\n this.wcsBlur.emit(ev);\n }\n }\n\n render() {\n const value = this.getValue();\n const style = {\n ...(this.resize && {'resize': this.resize})\n }\n\n return (\n <Host\n aria-disabled={this.disabled ? 'true' : null}\n >\n {this.icon ? (<wcs-mat-icon icon={this.icon} size=\"m\"></wcs-mat-icon>) : null}\n <textarea\n class=\"native-textarea\"\n ref={el => this.nativeInput = el}\n autoCapitalize={this.autocapitalize}\n autoFocus={this.autofocus}\n enterKeyHint={this.enterkeyhint}\n inputMode={this.inputmode}\n disabled={this.disabled}\n maxLength={this.maxlength}\n minLength={this.minlength}\n name={this.name}\n placeholder={this.placeholder \|\| ''}\n readOnly={this.readonly}\n required={this.required}\n spellcheck={this.spellcheck}\n cols={this.cols}\n rows={this.rows}\n wrap={this.wrap}\n onInput={this.onInput}\n onChange={this.onChange}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n style={style}\n {...this.inheritedAttributes}\n >\n {value}\n </textarea>\n </Host>\n );\n }\n}\n\nlet textareaIds = 0;\n"],"version":3}
1	+ {"file":"wcs-textarea.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,WAAW,GAAG,q8IAAq8I,CAAC;AAC19I,0BAAe,WAAW;;AC8B1B,MAAM,wBAAwB,GAAG,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;MAwD1C,QAAQ;;;;;;;QAGT,YAAO,GAAG,gBAAgB,WAAW,EAAE,EAAE,CAAC;QAC1C,wBAAmB,GAAyB,EAAE,CAAC;QA4O/C,YAAO,GAAG,CAAC,EAAS;YACxB,IAAI,IAAI,CAAC,WAAW,EAAE;gBAClB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;aACvC;YACD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAmB,CAAC,CAAC;SAC3C,CAAA;QAEO,aAAQ,GAAG,CAAC,CAAQ;YACxB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,KAAK,EAAC,CAAC,CAAC;SACxD,CAAA;QAEO,YAAO,GAAG,CAAC,EAAc;YAC7B,IAAI,IAAI,CAAC,eAAe,EAAE;gBACtB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;aAC1B;SACJ,CAAA;QAEO,WAAM,GAAG,CAAC,EAAc;YAC5B,IAAI,IAAI,CAAC,eAAe,EAAE;gBACtB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;aACzB;SACJ,CAAA;+BAvPyB,IAAI;8BAKL,MAAM;yBAKX,KAAK;wBAMN,CAAC;wBAUgB,KAAK;;;;;;oBA8BlB,IAAI,CAAC,OAAO;;wBAUC,KAAK;wBAKtB,KAAK;0BAKH,KAAK;qBAK4B,SAAS;;;;wBAsB5C,KAAK;qBAKuB,EAAE;;;IAzFvC,eAAe;QACrB,IAAI,CAAC,QAAQ,GAAGA,qBAAa,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;KAC/D;;;;IAoGS,YAAY;QAClB,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;QACrC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC9B,IAAI,WAAW,IAAI,WAAW,CAAC,KAAK,KAAK,KAAK,EAAE;YAC5C,WAAW,CAAC,KAAK,GAAG,KAAK,CAAC;SAC7B;QACD,IAAI,CAAC,WAAW,EAAE,CAAC;KACtB;IAsBD,iBAAiB;QACb,IAAI,CAAC,eAAe,EAAE,CAAC;QACF;YACjB,QAAQ,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,iBAAiB,EAAE;gBACtD,MAAM,EAAE,IAAI,CAAC,EAAE;aAClB,CAAC,CAAC,CAAC;SACP;KACJ;IAED,oBAAoB;QACK;YACjB,QAAQ,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,mBAAmB,EAAE;gBACxD,MAAM,EAAE,IAAI,CAAC,EAAE;aAClB,CAAC,CAAC,CAAC;SACP;KACJ;IAED,iBAAiB;QACb,IAAI,CAAC,mBAAmB,mCACjBC,6BAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,GAC9BC,yBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,wBAAwB,CAAC,CAC1D,CAAC;KACL;IAED,gBAAgB;QACZC,WAAG,CAAC,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;KACjC;IAEO,WAAW;QACf,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;QACrC,IAAI,WAAW,IAAI,IAAI,CAAC,QAAQ,EAAE;YAC9BC,cAAQ,CAAC;gBACL,WAAW,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;gBAClC,WAAW,CAAC,KAAK,CAAC,MAAM,GAAG,WAAW,CAAC,YAAY,GAAG,IAAI,CAAC;aAC9D,CAAC,CAAC;SACN;KACJ;IAGD,MAAM,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;QAC5EC,4BAAoB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;KACvD;;;;IAMD,MAAM,UAAU;QACZF,WAAG,CAAC,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;KACjC;;;;;;IAQD,MAAM,OAAO;QACT,IAAI,IAAI,CAAC,WAAW,EAAE;YAClB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;SAC3B;KACJ;;;;IAMD,eAAe;;QAEX,OAAO,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,WAAY,CAAC,CAAC;KAC7C;IAEO,QAAQ;QACZ,OAAO,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;KAC3B;IAyBD,MAAM;QACF,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC9B,MAAM,KAAK,sBACH,IAAI,CAAC,MAAM,IAAI,EAAC,QAAQ,EAAE,IAAI,CAAC,MAAM,EAAC,EAC7C,CAAA;QAED,QACIG,QAACC,UAAI,sEACc,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,IAE3C,IAAI,CAAC,IAAI,IAAID,0BAAc,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,GAAG,GAAgB,IAAI,IAAI,EAC7EA,qFACI,KAAK,EAAC,iBAAiB,EACvB,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,GAAG,EAAE,EAChC,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,IAAI,EAAE,EACnC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,KAAK,IACR,IAAI,CAAC,mBAAmB,GAEnC,KAAK,CACG,CACF,EACT;KACL;;;;;;;;AAGL,IAAI,WAAW,GAAG,CAAC,CAAC;;;;;","names":["debounceEvent","inheritAriaAttributes","inheritAttributes","raf","readTask","setOrRemoveAttribute","h","Host"],"sources":["src/components/textarea/textarea.scss?tag=wcs-textarea&encapsulation=shadow","src/components/textarea/textarea.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n@import '../../style/placeholder.scss';\n\n:host {\n --wcs-textarea-text-color-disabled: var(--wcs-semantic-color-text-disabled);\n --wcs-textarea-value-color: var(--wcs-semantic-color-text-primary);\n --wcs-textarea-value-font-weight: var(--wcs-semantic-font-weight-medium);\n\n --wcs-textarea-placeholder-color: var(--wcs-semantic-color-text-tertiary);\n --wcs-textarea-placeholder-font-weight: var(--wcs-semantic-font-weight-roman);\n --wcs-textarea-placeholder-font-style: var(--wcs-semantic-font-style-control-placeholder);\n\n --wcs-textarea-icon-color-default: var(--wcs-semantic-color-foreground-brand);\n --wcs-textarea-icon-color-disabled: var(--wcs-semantic-color-foreground-disabled);\n --wcs-textarea-icon-color-focus: var(--wcs-semantic-color-foreground-brand);\n\n --wcs-textarea-border-color-default: var(--wcs-semantic-color-border-primary);\n --wcs-textarea-border-color-disabled: var(--wcs-semantic-color-border-disabled);\n --wcs-textarea-border-color-error: var(--wcs-semantic-color-border-critical);\n --wcs-textarea-border-color-focus: var(--wcs-semantic-color-border-control-focus);\n\n --wcs-textarea-border-style-default: solid;\n --wcs-textarea-border-style-error: solid;\n --wcs-textarea-border-style-focus: var(--wcs-semantic-border-style-focus-control);\n\n --wcs-internal-textarea-border-radius-left: var(--wcs-textarea-border-radius-left, var(--wcs-semantic-border-radius-base)); // Overridden from prefix suffix group in form-field\n --wcs-internal-textarea-border-radius-right: var(--wcs-textarea-border-radius-right, var(--wcs-semantic-border-radius-base)); // Overridden from prefix suffix group in form-field\n\n --wcs-textarea-border-width: var(--wcs-semantic-border-width-default);\n --wcs-textarea-border-width-focus: var(--wcs-semantic-border-width-large);\n\n --wcs-textarea-gap: var(--wcs-semantic-spacing-base);\n\n --wcs-textarea-padding-top: var(--wcs-semantic-spacing-base);\n --wcs-textarea-padding-bottom: var(--wcs-semantic-spacing-base);\n --wcs-internal-textarea-padding-left: var(--wcs-textarea-padding-left, var(--wcs-semantic-spacing-large));\n --wcs-internal-textarea-padding-right: var(--wcs-textarea-padding-right, var(--wcs-semantic-spacing-large));\n\n --wcs-textarea-min-height: var(--wcs-semantic-size-m);\n --wcs-internal-textarea-max-height: var(--wcs-textarea-max-height, unset);\n\n --wcs-textarea-background-color: var(--wcs-semantic-color-background-control-default);\n\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--wcs-textarea-gap);\n width: 100%;\n border-radius: var(--wcs-internal-textarea-border-radius-left) var(--wcs-internal-textarea-border-radius-right) var(--wcs-internal-textarea-border-radius-right) var(--wcs-internal-textarea-border-radius-left);\n background-color: var(--wcs-textarea-background-color);\n outline: var(--wcs-textarea-border-style-default) var(--wcs-textarea-border-width) var(--wcs-textarea-border-color-default);\n outline-offset: calc(-1 * var(--wcs-textarea-border-width));\n background-clip: padding-box;\n\n box-sizing: border-box;\n\n textarea {\n box-sizing: border-box;\n font-family: inherit;\n overflow: auto;\n flex: 1;\n width: 100%;\n min-height: var(--wcs-textarea-min-height);\n max-height: var(--wcs-internal-textarea-max-height);\n background-color: transparent;\n color: var(--wcs-textarea-value-color);\n font-weight: var(--wcs-textarea-value-font-weight) !important;\n border: none;\n padding-top: var(--wcs-textarea-padding-top);\n padding-bottom: var(--wcs-textarea-padding-bottom);\n padding-left: var(--wcs-internal-textarea-padding-left);\n padding-right: var(--wcs-internal-textarea-padding-right);\n font-size: 1rem;\n line-height: 1.5;\n\n &::placeholder {\n @include placeholder(var(--wcs-textarea-placeholder-color), var(--wcs-textarea-placeholder-font-weight), var(--wcs-textarea-placeholder-font-style));\n }\n }\n\n textarea:focus {\n box-shadow: none;\n outline: 0;\n }\n\n wcs-mat-icon {\n margin-left: var(--wcs-internal-textarea-padding-left);\n color: var(--wcs-textarea-icon-color-default);\n }\n}\n\n:host([disabled]) {\n --wcs-textarea-background-color: var(--wcs-semantic-color-background-control-disabled);\n outline: var(--wcs-textarea-border-style-default) var(--wcs-textarea-border-width) var(--wcs-textarea-border-color-disabled);\n\n textarea {\n color: var(--wcs-textarea-text-color-disabled);\n cursor: not-allowed;\n\n &::placeholder {\n color: var(--wcs-textarea-text-color-disabled);\n }\n }\n\n wcs-mat-icon {\n color: var(--wcs-textarea-icon-color-disabled);\n }\n}\n\n:host([icon]) {\n textarea {\n padding-left: 0;\n }\n}\n\n:host([state=error]) {\n outline-color: var(--wcs-textarea-border-color-error) !important;\n}\n\n:host(:focus-within) {\n outline: var(--wcs-textarea-border-style-focus) var(--wcs-textarea-border-width-focus) var(--wcs-textarea-border-color-focus);\n outline-offset: calc(var(--wcs-textarea-border-width-focus) * -1);\n\n wcs-mat-icon {\n color: var(--wcs-textarea-icon-color-focus);\n }\n}\n","import {\n Component,\n ComponentInterface,\n Method,\n Prop,\n Watch,\n h,\n Host,\n EventEmitter,\n Element,\n Event,\n Build,\n readTask\n} from '@stencil/core';\nimport {\n debounceEvent,\n inheritAriaAttributes,\n inheritAttributes,\n raf,\n setOrRemoveAttribute\n} from '../../utils/helpers';\nimport { \n TextareaChangeEventDetail,\n WcsTextareaInputMode, \n WcsTextareaEnterKeyHint, \n WcsTextareaResize, \n WcsTextareaInputState,\n WcsTextareaWrap\n} from './textarea-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst TEXTAREA_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/*\n Mainly inspired from Ionic Textarea Component.\n * \n * ## Accessibility guidelines 💡\n * > - If you use wcs-textarea 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-textarea-icon-color-default - Default icon color whe the textarea is not focused\n * @cssprop --wcs-textarea-icon-color-focus - Icon color when the textarea is focused \n * @cssprop --wcs-textarea-icon-color-disabled - Icon color when the textarea is disabled\n * \n * @cssprop --wcs-textarea-background-color - Background color of the textarea\n \n @cssprop --wcs-textarea-border-radius-left - Border radius of the left side of the textarea\n * @cssprop --wcs-textarea-border-radius-right - Border radius of the right side of the textarea\n * \n * @cssprop --wcs-textarea-border-width - Border width of the textarea when not focused\n * @cssprop --wcs-textarea-border-width-focus - Border width of the textarea when focused\n * \n * @cssprop --wcs-textarea-border-color-default - Default border color of the textarea when not focused\n * @cssprop --wcs-textarea-border-color-disabled - Border color of the textarea when disabled\n * @cssprop --wcs-textarea-border-color-error - Border color of the textarea when in error state\n * @cssprop --wcs-textarea-border-color-focus - Border color of the textarea when focused\n * \n * @cssprop --wcs-textarea-value-color - Color of the value when the textarea is not focused\n * @cssprop --wcs-textarea-value-font-weight - Font weight of the textarea value\n * \n * @cssprop --wcs-textarea-placeholder-color - Color of the textarea placeholder\n * @cssprop --wcs-textarea-placeholder-font-weight - Font weight of the textarea placeholder\n * @cssprop --wcs-textarea-placeholder-font-style - Font style of the textarea placeholder\n * \n * @cssprop --wcs-textarea-text-color-disabled - Color of the value when the textarea is disabled\n * \n * @cssprop --wcs-textarea-border-style-default - Border style default of the textarea when not focused\n * @cssprop --wcs-textarea-border-style-error - Border style default of the textarea in error state\n * @cssprop --wcs-textarea-border-style-focus - Border style default of the textarea when focused\n * \n * @cssprop --wcs-textarea-min-height - Min height of the textarea component\n * @cssprop --wcs-textarea-max-height - Max height of the textarea component\n * \n * @cssprop --wcs-textarea-padding-top - Padding top of the textarea\n * @cssprop --wcs-textarea-padding-bottom - Padding bottom of the textarea\n * @cssprop --wcs-textarea-padding-left - Padding left of the textarea\n * @cssprop --wcs-textarea-padding-right - Padding right of the textarea\n * \n * @cssprop --wcs-textarea-gap - Gap between textarea and icon (prefix/suffix)\n /\n@Component({\n tag: 'wcs-textarea',\n styleUrl: 'textarea.scss',\n shadow: {\n delegatesFocus: true\n },\n})\nexport class Textarea implements ComponentInterface, MutableAriaAttribute {\n @Element() private el!: HTMLElement;\n private nativeInput?: HTMLTextAreaElement;\n private inputId = `wcs-textarea-${textareaIds++}`;\n private inheritedAttributes: { [k: string]: any } = {};\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 /\n Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n /\n @Prop() autocapitalize = 'none';\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 If `true`, the user cannot interact with the textarea.\n /\n @Prop({ reflect: true }) disabled = false;\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?: WcsTextareaInputMode;\n\n /\n A hint to the browser for which enter key to display.\n /\n @Prop() enterkeyhint?: WcsTextareaEnterKeyHint;\n\n /\n If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.\n /\n @Prop() maxlength?: number;\n\n /\n If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.\n /\n @Prop() minlength?: number;\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name: string = this.inputId;\n\n /\n 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 initial state but you can set it to 'error' state if the data given by the user is not valid.\n /\n @Prop({reflect: true}) state: WcsTextareaInputState = 'initial';\n\n /\n The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. \n * Note : at the moment, modifying the width is only possible if you add some custom CSS to the component,\n * for example by overriding the `width` CSS property. See the Resize section for an example on how to do it.\n /\n @Prop() cols?: number;\n\n /\n The number of visible text lines for the control.\n /\n @Prop() rows?: number;\n\n /\n Indicates how the control wraps text.\n /\n @Prop() wrap?: WcsTextareaWrap;\n\n /\n If `true`, the element height will increase based on the value.\n /\n @Prop() autoGrow = false;\n\n /\n The value of the textarea.\n /\n @Prop({mutable: true}) value?: string \| null = '';\n\n /\n Indicates how the textarea should be resizable. \n * Note : at the moment horizontal resizing is only possible if you add custom CSS to the component,\n * see the Resize section for an example.\n /\n @Prop({reflect: true}) resize?: WcsTextareaResize;\n\n /\n Update the native input element when the value changes\n /\n @Watch('value')\n protected valueChanged() {\n const nativeInput = this.nativeInput;\n const value = this.getValue();\n if (nativeInput && nativeInput.value !== value) {\n nativeInput.value = value;\n }\n this.runAutoGrow();\n }\n\n /\n Emitted when the input value has changed.- See https://developer.mozilla.org/en-US/docs/Web/Events/change\n /\n @Event() wcsChange!: EventEmitter<TextareaChangeEventDetail>;\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 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 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 componentWillLoad() {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el),\n ...inheritAttributes(this.el, TEXTAREA_INHERITED_ATTRS)\n };\n }\n\n componentDidLoad() {\n raf(() => this.runAutoGrow());\n }\n\n private runAutoGrow() {\n const nativeInput = this.nativeInput;\n if (nativeInput && this.autoGrow) {\n readTask(() => {\n nativeInput.style.height = 'auto';\n nativeInput.style.height = nativeInput.scrollHeight + 'px';\n });\n }\n }\n \n @Method()\n async setAriaAttribute(attr: AriaAttributeName, value: string \| null \| undefined) {\n setOrRemoveAttribute(this.nativeInput, attr, value);\n }\n\n /\n This method make the textarea automatically adopt the size of the content without a scroll bar\n /\n @Method()\n async fitContent() {\n raf(() => this.runAutoGrow());\n }\n\n /\n Sets blur on the native `textarea` in `wcs-textarea`. Use this method instead of the global\n * `textarea.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 `<textarea>` element used under the hood.\n */\n @Method()\n getInputElement(): Promise<HTMLTextAreaElement> {\n // tslint:disable-next-line:no-non-null-assertion\n return Promise.resolve(this.nativeInput!);\n }\n\n private getValue(): string {\n return this.value \|\| '';\n }\n\n private onInput = (ev: Event) => {\n if (this.nativeInput) {\n this.value = this.nativeInput.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 onFocus = (ev: FocusEvent) => {\n if (this.fireFocusEvents) {\n this.wcsFocus.emit(ev);\n }\n }\n\n private onBlur = (ev: FocusEvent) => {\n if (this.fireFocusEvents) {\n this.wcsBlur.emit(ev);\n }\n }\n\n render() {\n const value = this.getValue();\n const style = {\n ...(this.resize && {'resize': this.resize})\n }\n\n return (\n <Host\n aria-disabled={this.disabled ? 'true' : null}\n >\n {this.icon ? (<wcs-mat-icon icon={this.icon} size=\"m\"></wcs-mat-icon>) : null}\n <textarea\n class=\"native-textarea\"\n ref={el => this.nativeInput = el}\n autoCapitalize={this.autocapitalize}\n autoFocus={this.autofocus}\n enterKeyHint={this.enterkeyhint}\n inputMode={this.inputmode}\n disabled={this.disabled}\n maxLength={this.maxlength}\n minLength={this.minlength}\n name={this.name}\n placeholder={this.placeholder \|\| ''}\n readOnly={this.readonly}\n required={this.required}\n spellcheck={this.spellcheck}\n cols={this.cols}\n rows={this.rows}\n wrap={this.wrap}\n onInput={this.onInput}\n onChange={this.onChange}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n style={style}\n {...this.inheritedAttributes}\n >\n {value}\n </textarea>\n </Host>\n );\n }\n}\n\nlet textareaIds = 0;\n"],"version":3}

package/dist/cjs/wcs-tooltip.cjs.entry.js CHANGED Viewed

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-6f0140d8.js');
 const popper = require('./popper-8d6e7fca.js');
-const helpers = require('./helpers-871f5a3d.js');
+const helpers = require('./helpers-2f1a8ddc.js');
 const mutableAriaAttribute = require('./mutable-aria-attribute-342a2304.js');
 /**!
@@ -1573,7 +1573,9 @@ const Tooltip = class {
         }
         if (this.forElement.tagName && DELEGATED_ARIA_COMPONENTS.indexOf(this.forElement.tagName) !== -1) {
             if (mutableAriaAttribute.isMutableAriaAttribute(this.forElement)) {
-                this.forElement.setAriaAttribute('aria-expanded', 'true');
+                if (this.interactive) {
+                    this.forElement.setAriaAttribute('aria-expanded', 'true');
+                }
             }
         }
     }
@@ -1583,7 +1585,9 @@ const Tooltip = class {
         }
         if (this.forElement.tagName && DELEGATED_ARIA_COMPONENTS.indexOf(this.forElement.tagName) !== -1) {
             if (mutableAriaAttribute.isMutableAriaAttribute(this.forElement)) {
-                this.forElement.setAriaAttribute('aria-expanded', 'false');
+                if (this.interactive) {
+                    this.forElement.setAriaAttribute('aria-expanded', 'false');
+                }
             }
         }
     }
@@ -1648,7 +1652,7 @@ const Tooltip = class {
         (_a = this.tippyInstance) === null || _a === void 0 ? void 0 : _a.destroy();
     }
     render() {
-        return (index.h(index.Host, { key: '06de58e5ee996c471588dd36a2556f9c13b9aaa3', role: "tooltip" }, index.h("slot", { key: 'f1b6df619dbf24fc37216252a92e39b54f5874cb', onSlotchange: _ => this.updateTippyContent() })));
+        return (index.h(index.Host, { key: 'c64153818029a55af719bc87fa5ce413d310e8b7', role: "tooltip" }, index.h("slot", { key: '2f24f867892089d93b41783977b470ab908063cd', onSlotchange: _ => this.updateTippyContent() })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {