wcs-core 4.1.0 → 4.2.0

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

@@ -15,7 +15,7 @@ const Tab = class {
     this.tabLoaded.emit();
   }
   render() {
-    return (index.h(index.Host, { slot: "wcs-tab" }, index.h("slot", null)));
+    return (index.h(index.Host, { slot: "wcs-tab", role: "tabpanel" }, index.h("slot", null)));
   }
 };
 

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

@@ -1 +1 @@
-{"file":"wcs-tab.entry.cjs.js","mappings":";;;;;;MAUa,GAAG;;;;;;;EAiBZ,gBAAgB;IACZ,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;GACzB;EAED,MAAM;IACF,QACIA,QAACC,UAAI,IAAC,IAAI,EAAC,SAAS,IAChBD,qBAAa,CACV,EACT;GACL;;;;;","names":["h","Host"],"sources":["./src/components/tab/tab.tsx"],"sourcesContent":["import { Component, Prop, h, Host, Event, EventEmitter } from '@stencil/core';\n\n/**\n * Tab content component.\n * Use this component to specify the content of a component.\n */\n@Component({\n    tag: 'wcs-tab',\n    shadow: true,\n})\nexport class Tab {\n    /**\n     * The header you want to be displayed for this tab.\n     */\n    @Prop({ reflect: true }) header: string;\n\n    @Prop() itemKey: any;\n\n    // TODO: See if there is a solution that doesn't pollute the API.\n    /**\n     * Do not use, meant for internal use only.\n     * @inner\n     * @ignore\n     */\n    @Event()\n    tabLoaded!: EventEmitter<void>;\n\n    componentDidLoad() {\n        this.tabLoaded.emit();\n    }\n\n    render() {\n        return (\n            <Host slot=\"wcs-tab\">\n                <slot></slot>\n            </Host>\n        );\n    }\n}\n"],"version":3}
+{"file":"wcs-tab.entry.cjs.js","mappings":";;;;;;MAUa,GAAG;;;;;;;EAiBZ,gBAAgB;IACZ,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;GACzB;EAED,MAAM;IACF,QACIA,QAACC,UAAI,IAAC,IAAI,EAAC,SAAS,EAAC,IAAI,EAAE,UAAU,IACjCD,qBAAa,CACV,EACT;GACL;;;;;","names":["h","Host"],"sources":["./src/components/tab/tab.tsx"],"sourcesContent":["import { Component, Prop, h, Host, Event, EventEmitter } from '@stencil/core';\n\n/**\n * Tab content component.\n * Use this component to specify the content of a component.\n */\n@Component({\n    tag: 'wcs-tab',\n    shadow: true,\n})\nexport class Tab {\n    /**\n     * The header you want to be displayed for this tab.\n     */\n    @Prop({ reflect: true }) header: string;\n\n    @Prop() itemKey: any;\n\n    // TODO: See if there is a solution that doesn't pollute the API.\n    /**\n     * Do not use, meant for internal use only.\n     * @inner\n     * @ignore\n     */\n    @Event()\n    tabLoaded!: EventEmitter<void>;\n\n    componentDidLoad() {\n        this.tabLoaded.emit();\n    }\n\n    render() {\n        return (\n            <Host slot=\"wcs-tab\" role={\"tabpanel\"}>\n                <slot></slot>\n            </Host>\n        );\n    }\n}\n"],"version":3}

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

@@ -10,11 +10,13 @@ const Tabs = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.tabChange = index.createEvent(this, "tabChange", 7);
+    this.tabsId = tabsId++;
     this.align = 'start';
     this.selectedIndex = 0;
     this.selectedKey = undefined;
     this.headersOnly = false;
     this.gutter = undefined;
+    this.description = undefined;
     this.headers = [];
     this.currentActiveTabIndex = 0;
   }
@@ -91,6 +93,22 @@ const Tabs = class {
         }
         break;
       }
+      case 'Home': {
+        const firstTab = this.el.shadowRoot.querySelector('.wcs-tab-header:first-child');
+        if (firstTab) {
+          firstTab.focus();
+          ev.preventDefault();
+        }
+        break;
+      }
+      case 'End': {
+        const lastTab = this.el.shadowRoot.querySelector('.wcs-tab-header:last-child');
+        if (lastTab) {
+          lastTab.focus();
+          ev.preventDefault();
+        }
+        break;
+      }
     }
   }
   refreshHeaders() {
@@ -137,7 +155,24 @@ const Tabs = class {
     this.tabs.forEach((el) => el.setAttribute('style', 'display: none;'));
   }
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: "wcs-tabs-headers" }, 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 }, index.h("span", null, header)))), index.h("div", { class: "wcs-tabs" }, index.h("slot", { name: "wcs-tab" }))));
+    return (index.h(index.Host, null, index.h("div", { class: "wcs-tabs-headers", role: "tablist", "aria-label": this.description }, 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", { class: "wcs-tabs" }, index.h("slot", { 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:
+   * - id: to let header tab refers it proper panel
+   * - aria-label: take the same name as it's referenced header name
+   *
+   * @private
+   */
+  onTabsSlotChange() {
+    let tabId = 0;
+    this.tabs.forEach(tab => {
+      tab.setAttribute("aria-label", this.headers.at(tabId));
+      // set an ID to set aria-controls on header tab 
+      // (https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-automatic/#:~:text=Refers%20to%20the%20element)
+      tab.setAttribute("id", `tabs-id-${this.tabsId}-tab-panel-${tabId}`);
+      tabId++;
+    });
   }
   get el() { return index.getElement(this); }
   static get watchers() { return {
@@ -145,6 +180,7 @@ const Tabs = class {
     "selectedKey": ["selectedTabkeyChanged"]
   }; }
 };
+let tabsId = 0;
 Tabs.style = tabsCss;
 
 exports.wcs_tabs = Tabs;

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

@@ -1 +1 @@
-{"file":"wcs-tabs.entry.cjs.js","mappings":"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","names":["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-padding-bottom: 16px;\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    padding-top: 4px;\n    overflow-x: auto;\n    display: flex;\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    padding: 8px 24px 16px 0;\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    outline: none;\n\n    span {\n        text-align: center;\n        color: var(--wcs-text-disabled);\n        font-size: 1rem;\n        font-weight: 400;\n    }\n\n\n    &:focus,\n    &:hover {\n        span {\n            color: var(--wcs-primary);\n        }\n    }\n\n    &:focus-visible > span {\n        @include focus-outline;\n    }\n}\n\n\n.active {\n    span {\n        font-weight: 500;\n        color: var(--wcs-primary);\n        position: relative;\n    }\n\n    span::after {\n        position: absolute;\n        bottom: calc(var(--wcs-tabs-padding-bottom) * -1);\n        left: 0;\n        width: 100%;\n        height: 0.3125rem;\n        content: \"\";\n        background-color: var(--wcs-primary);\n        border-radius: 3px;\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\n} from '@stencil/core';\n\nimport { WcsTabsAlignment, WcsTabChangeEvent } from './tabs-interface';\n\n/**\n * Tabs component to switch between tab content.\n * Use in conjuction with `wcs-tab`.\n *\n * @example\n * ```html\n * <wcs-tabs>\n *    <wcs-tab header=\"One\">The content !</wcs-tab>\n *    <wcs-tab header=\"Two\">More content !</wcs-tab>\n * </wcs-tabs>\n * ```\n */\n@Component({\n    tag: 'wcs-tabs',\n    styleUrl: 'tabs.scss',\n    shadow: true,\n})\nexport class Tabs implements ComponentInterface {\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     *\n     * Emitted when the selected tab change.\n     */\n    @Event() tabChange!: EventEmitter<WcsTabChangeEvent>;\n\n    @Element() private el!: HTMLWcsTabsElement;\n\n    @State() private headers: string[] = [];\n\n    @State() private currentActiveTabIndex = 0;\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        }\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    private updateTabVisibility() {\n        this.tabs.forEach((el: HTMLWcsTabElement, idx: number) => {\n            if (idx !== this.currentActiveTabIndex) {\n                el.setAttribute('style', 'display: none;');\n            } else {\n                el.setAttribute('style', 'display: block;');\n            }\n        });\n    }\n\n    private hideAllTabsContent() {\n        this.tabs.forEach((el: HTMLWcsTabElement) => el.setAttribute('style', 'display: none;'));\n    }\n\n    render() {\n        return (\n            <Host>\n                <div class=\"wcs-tabs-headers\">\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                        >\n                            <span>{header}</span>\n                        </div>\n                    )}\n                </div>\n                <div class=\"wcs-tabs\">\n                    <slot name=\"wcs-tab\"/>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"version":3}
+{"file":"wcs-tabs.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,OAAO,GAAG,sjCAAsjC;;MCiCzjC,IAAI;;;;IAuCL,WAAM,GAAW,MAAM,EAAE,CAAC;iBAnCe,OAAO;yBAMxB,CAAC;;uBAQF,KAAK;;;mBAiBC,EAAE;iCAEE,CAAC;;EAK1C,oBAAoB,CAAC,QAAgB;IACjC,IAAI,CAAC,qBAAqB,GAAG,QAAQ,CAAC;GACzC;EAGD,qBAAqB,CAAC,QAAa;IAC/B,IAAI,CAAC,gCAAgC,CAAC,QAAQ,CAAC,CAAC;GACnD;EAEO,mBAAmB;IACvB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;MAChB,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,qBAAqB,CAAC;MACjD,QAAQ,EAAE,IAAI,CAAC,qBAAqB;MACpC,WAAW,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,OAAO;KAC7D,CAAC,CAAC;GACN;EAEO,gCAAgC,CAAC,QAAa;IAClD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;MACvC,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;MACzB,IAAI,GAAG,CAAC,OAAO,KAAK,QAAQ,EAAE;QAC1B,IAAI,CAAC,qBAAqB,GAAG,CAAC,CAAC;OAClC;KACJ;GACJ;EAGD,WAAW;IACP,IAAI,CAAC,cAAc,EAAE,CAAC;GACzB;EAED,gBAAgB;IACZ,IAAI,CAAC,+BAA+B,EAAE,CAAC;IACvC,IAAI,CAAC,cAAc,EAAE,CAAC;IACtB,IAAI,IAAI,CAAC,aAAa,EAAE;MACpB,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,aAAa,CAAC;KACnD;IACD,IAAI,IAAI,CAAC,WAAW,EAAE;MAClB,IAAI,CAAC,gCAAgC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KAC3D;GACJ;;EAGO,+BAA+B;IACnC,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAC7D,IAAI,MAAM,CAAC,aAAa,CAAC,MAAM,CAAC,KAAK,IAAI,EAAE;MACvC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC;SAC1C,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,UAAU,KAAK,MAAM,CAAC;SAC1C,OAAO,CAAC,GAAG;QACR,IAAI,GAAG,CAAC,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;UACxC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;UACzB,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;SAC3B;OACJ,CAAC,CAAC;KACV;GACJ;EAED,aAAa,CAAC,EAAiB,EAAE,QAAgB;;IAC7C,MAAM,MAAM,GAAG,EAAE,CAAC,MAAwB,CAAC;IAC3C,QAAQ,EAAE,CAAC,GAAG;MACV,KAAK,GAAG,CAAC;MACT,KAAK,OAAO,EAAE;QACV,IAAI,CAAC,qBAAqB,GAAG,QAAQ,CAAC;QACtC,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3B,EAAE,CAAC,cAAc,EAAE,CAAC;QACpB,MAAM;OACT;MACD,KAAK,WAAW,EAAE;QACd,IAAI,MAAA,MAAM,CAAC,sBAAsB,0CAAE,SAAS,CAAC,QAAQ,CAAC,gBAAgB,CAAC,EAAE;UACpE,MAAM,CAAC,sBAAyC,CAAC,KAAK,EAAE,CAAC;UAC1D,EAAE,CAAC,cAAc,EAAE,CAAC;SACvB;QACD,MAAM;OACT;MACD,KAAK,YAAY,EAAE;QACf,IAAI,MAAA,MAAM,CAAC,kBAAkB,0CAAE,SAAS,CAAC,QAAQ,CAAC,gBAAgB,CAAC,EAAE;UAChE,MAAM,CAAC,kBAAqC,CAAC,KAAK,EAAE,CAAC;UACtD,EAAE,CAAC,cAAc,EAAE,CAAC;SACvB;QACD,MAAM;OACT;MACD,KAAK,MAAM,EAAE;QACT,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,6BAA6B,CAAC,CAAC;QACjF,IAAI,QAAQ,EAAE;UACT,QAA2B,CAAC,KAAK,EAAE,CAAC;UACrC,EAAE,CAAC,cAAc,EAAE,CAAC;SACvB;QACD,MAAM;OACT;MACD,KAAK,KAAK,EAAE;QACR,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,4BAA4B,CAAC,CAAC;QAC/E,IAAI,OAAO,EAAE;UACR,OAA0B,CAAC,KAAK,EAAE,CAAC;UACpC,EAAE,CAAC,cAAc,EAAE,CAAC;SACvB;QACD,MAAM;OACT;KACJ;GACJ;EAEO,cAAc;IAClB,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;IAClB,IAAI,CAAC,IAAI;OACJ,OAAO,CAAC,CAAC;MACN,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC;KAC/C,CAAC,CAAC;GACV;EAED,IAAY,IAAI;;IACZ,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;;IAE7D,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;IAExE,OAAO,IAAI,CAAC,MAAM,KAAK,CAAC;QAClB,IAAI;QACJ,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,aAAa,CAAC,MAAM,CAAC;UACzB,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,aAAa,CAAC,MAAM,CAAC,0CAAE,gBAAgB,EAA8C;UAC7F,EAAE,CAAC;GAChB;EAEO,2BAA2B,CAAC,KAAa;IAC7C,IAAI,CAAC,qBAAqB,GAAG,KAAK,CAAC;IACnC,IAAI,CAAC,mBAAmB,EAAE,CAAA;GAC7B;EAED,mBAAmB;IACf,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;MACnB,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC9B;SAAM;MACH,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAC7B;GACJ;EAEO,mBAAmB;IACvB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,EAAqB,EAAE,GAAW;MACjD,IAAI,GAAG,KAAK,IAAI,CAAC,qBAAqB,EAAE;QACpC,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,gBAAgB,CAAC,CAAC;OAC9C;WAAM;QACH,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC;OAC/C;KACJ,CAAC,CAAC;GACN;EAEO,kBAAkB;IACtB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,EAAqB,KAAK,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,gBAAgB,CAAC,CAAC,CAAC;GAC5F;EAED,MAAM;IACF,QACIA,QAACC,UAAI,QACDD,iBAAK,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,SAAS,gBAAa,IAAI,CAAC,WAAW,IACpE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,GAAG,KAC1BA,iBAAK,KAAK,EAAE,iBAAiB,IAAI,IAAI,CAAC,qBAAqB,KAAK,GAAG,GAAG,QAAQ,GAAG,EAAE,CAAC,EAC/E,OAAO,EAAE,MAAM,IAAI,CAAC,2BAA2B,CAAC,GAAG,CAAC,EACpD,SAAS,EAAE,GAAG,IAAI,IAAI,CAAC,aAAa,CAAC,GAAG,EAAE,GAAG,CAAC,EAC9C,QAAQ,EAAE,IAAI,CAAC,qBAAqB,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC,EACrD,IAAI,EAAC,KAAK,EACV,EAAE,EAAE,WAAW,IAAI,CAAC,MAAM,WAAW,GAAG,EAAE,mBAE3B,WAAW,IAAI,CAAC,MAAM,cAAc,GAAG,EAAE,gBAC5C,MAAM,mBACH,IAAI,CAAC,qBAAqB,KAAK,GAAG,GAAG,MAAM,GAAG,OAAO,IAErEA,sBAAO,MAAM,CAAQ,CACnB,CACT,CACC,EACNA,iBAAK,KAAK,EAAC,UAAU,IACjBA,kBAAM,YAAY,EAAE,MAAM,IAAI,CAAC,gBAAgB,EAAE,EAAE,IAAI,EAAC,SAAS,GAAE,CACjE,CACH,EACT;GACL;;;;;;;;EASO,gBAAgB;IACpB,IAAI,KAAK,GAAG,CAAC,CAAC;IACd,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG;MACjB,GAAG,CAAC,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;;;MAGvD,GAAG,CAAC,YAAY,CAAC,IAAI,EAAE,WAAW,IAAI,CAAC,MAAM,cAAc,KAAK,EAAE,CAAC,CAAC;MACpE,KAAK,EAAE,CAAC;KACX,CAAC,CAAC;GACN;;;;;;;AAGL,IAAI,MAAM,GAAG,CAAC,CAAC;;;;;","names":["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-padding-bottom: 16px;\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    padding-top: 4px;\n    overflow-x: auto;\n    display: flex;\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    padding: 8px 24px 16px 0;\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    outline: none;\n\n    span {\n        text-align: center;\n        color: var(--wcs-text-disabled);\n        font-size: 1rem;\n        font-weight: 400;\n    }\n\n\n    &:focus,\n    &:hover {\n        span {\n            color: var(--wcs-primary);\n        }\n    }\n\n    &:focus-visible > span {\n        @include focus-outline;\n    }\n}\n\n\n.active {\n    span {\n        font-weight: 500;\n        color: var(--wcs-primary);\n        position: relative;\n    }\n\n    span::after {\n        position: absolute;\n        bottom: calc(var(--wcs-tabs-padding-bottom) * -1);\n        left: 0;\n        width: 100%;\n        height: 0.3125rem;\n        content: \"\";\n        background-color: var(--wcs-primary);\n        border-radius: 3px;\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\n} from '@stencil/core';\n\nimport { WcsTabsAlignment, WcsTabChangeEvent } from './tabs-interface';\n\n/**\n * Tabs component to switch between tab content.\n * Use in conjuction with `wcs-tab`.\n *\n * @example\n * ```html\n * <wcs-tabs>\n *    <wcs-tab header=\"One\">The content !</wcs-tab>\n *    <wcs-tab header=\"Two\">More content !</wcs-tab>\n * </wcs-tabs>\n * ```\n */\n@Component({\n    tag: 'wcs-tabs',\n    styleUrl: 'tabs.scss',\n    shadow: true,\n})\nexport class Tabs implements ComponentInterface {\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    @Element() private el!: HTMLWcsTabsElement;\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    private updateTabVisibility() {\n        this.tabs.forEach((el: HTMLWcsTabElement, idx: number) => {\n            if (idx !== this.currentActiveTabIndex) {\n                el.setAttribute('style', 'display: none;');\n            } else {\n                el.setAttribute('style', 'display: block;');\n            }\n        });\n    }\n\n    private hideAllTabsContent() {\n        this.tabs.forEach((el: HTMLWcsTabElement) => el.setAttribute('style', 'display: none;'));\n    }\n\n    render() {\n        return (\n            <Host>\n                <div class=\"wcs-tabs-headers\" role=\"tablist\" aria-label={this.description}>\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

@@ -117,8 +117,8 @@ const Textarea = class {
     helpers.raf(() => this.runAutoGrow());
   }
   /**
-   * Sets focus on the native `textarea` in `wcs-textarea`. Use this method instead of the global
-   * `textarea.focus()`.
+   * @deprecated use the native focus method instead
+   * Sets focus on the native `textarea` in `wcs-textarea`.
    */
   async setFocus() {
     if (this.nativeInput) {
@@ -179,6 +179,7 @@ const Textarea = class {
     const style = Object.assign({}, (this.resize && { 'resize': this.resize }));
     return (index.h(index.Host, { "aria-disabled": this.disabled ? 'true' : null }, this.icon ? (index.h("wcs-mat-icon", { icon: this.icon, size: "m" })) : null, index.h("textarea", Object.assign({ class: "native-textarea", "aria-labelledby": label ? labelId : null, 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, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, style: style }, this.inheritedAttributes), value)));
   }
+  static get delegatesFocus() { return true; }
   get el() { return index.getElement(this); }
   static get watchers() { return {
     "debounce": ["debounceChanged"],

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

@@ -1 +1 @@
-{"file":"wcs-textarea.entry.cjs.js","mappings":"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","names":["debounceEvent","inheritAttributes","raf","readTask","findItemLabel","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\n:host {\n    --wcs-textarea-icon-color: var(--wcs-text-medium);\n    --wcs-internal-textarea-border-radius-left: var(--wcs-textarea-border-radius-left, var(--wcs-border-radius));\n    --wcs-internal-textarea-border-radius-right: var(--wcs-textarea-border-radius-right, var(--wcs-border-radius));\n    --wcs-internal-textarea-border-width: 2px;\n    --wcs-textarea-max-height: unset;\n    display: flex;\n    flex-direction: row;\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-light);\n    border: var(--wcs-internal-textarea-border-width) solid var(--wcs-light);\n    background-clip: padding-box;\n\n    ::placeholder {\n        font-weight: 400;\n        font-style: italic;\n    }\n\n    textarea {\n        overflow: auto;\n        flex: 1;\n        width: 100%;\n        box-sizing: border-box;\n        min-height: var(--wcs-size-m);\n        max-height: var(--wcs-textarea-max-height);\n        background-color: transparent;\n        font-family: var(--wcs-font-sans-serif);\n        color: var(--wcs-primary);\n        font-weight: var(--wcs-font-weight-form-value) !important;\n        border: none;\n        // On divise --wcs-internal-input-border-width par deux car la valeur du padding est appliquée en haut et en bas\n        padding: calc(calc(var(--wcs-padding) / 2) - calc(var(--wcs-internal-textarea-border-width) / 2)) calc(var(--wcs-padding) - var(--wcs-internal-textarea-border-width));\n        font-size: 1rem;\n        line-height: 1.5;\n    }\n\n    textarea:focus {\n        box-shadow: none;\n        outline: 0;\n    }\n\n    wcs-mat-icon {\n        position: relative;\n        margin-top: 7px;\n        margin-left: 8px;\n        margin-right: -8px;\n    }\n}\n\n:host([disabled]) {\n    textarea {\n        color: var(--wcs-text-disabled);\n        cursor: not-allowed;\n    }\n}\n\n:host([state=error]) {\n    border-color: var(--wcs-red) !important;\n}\n\n:host(:focus-within) {\n    border: dashed var(--wcs-internal-textarea-border-width) var(--wcs-primary);\n\n    wcs-mat-icon {\n        color: var(--wcs-primary);\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Method,\n    Prop,\n    State,\n    Watch,\n    h,\n    Host,\n    EventEmitter,\n    Element,\n    Event,\n    Build,\n    readTask\n} from '@stencil/core';\nimport { debounceEvent, findItemLabel, inheritAttributes, raf } from '../../utils/helpers';\nimport { TextareaChangeEventDetail } from './textarea-interface';\n\n/**\n * Mainly inspired from Ionic Textarea Component\n *\n * @cssprop --wcs-textarea-max-height - Max height of the text area component\n *\n */\n@Component({\n    tag: 'wcs-textarea',\n    styleUrl: 'textarea.scss',\n    shadow: true,\n})\nexport class Textarea implements ComponentInterface {\n    private nativeInput?: HTMLTextAreaElement;\n    private inputId = `wcs-textarea-${textareaIds++}`;\n    private didBlurAfterEdit = false;\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    @Element() private el!: HTMLElement;\n\n    @State() private hasFocus = false;\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     * If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `\"password\"`, `false` for all other types.\n     */\n    @Prop({mutable: true}) clearOnEdit = false;\n\n    /**\n     * Set the amount of time, in milliseconds, to wait to trigger the `wcsChange` event after each keystroke. 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.wcsChange = debounceEvent(this.wcsChange, 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     * Possible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n     * `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.\n     */\n    @Prop() inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';\n\n    /**\n     * A hint to the browser for which enter key to display.\n     * Possible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n     * `\"previous\"`, `\"search\"`, and `\"send\"`.\n     */\n    @Prop() enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';\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: 'initial' | 'error' = '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     */\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?: 'hard' | 'soft' | 'off';\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     * Possible values 'both' | 'none' | 'vertical' | 'horizontal'\n     */\n    @Prop({reflect: true}) resize?: 'both' | 'none' | 'vertical' | 'horizontal';\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        this.wcsChange.emit({value});\n    }\n\n    /**\n     * Emitted when the input value has changed.\n     */\n    @Event() wcsChange!: EventEmitter<TextareaChangeEventDetail>;\n\n    /**\n     * Emitted when a keyboard input occurred.\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 = inheritAttributes(this.el, ['title']);\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    /**\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 focus on the native `textarea` in `wcs-textarea`. Use this method instead of the global\n     * `textarea.focus()`.\n     */\n    @Method()\n    async setFocus() {\n        if (this.nativeInput) {\n            this.nativeInput.focus();\n        }\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    /**\n     * Check if we need to clear the text input if clearOnEdit is enabled\n     */\n    private checkClearOnEdit() {\n        if (!this.clearOnEdit) {\n            return;\n        }\n\n        // Did the input value change after it was blurred and edited?\n        if (this.didBlurAfterEdit && this.hasValue()) {\n            // Clear the input\n            this.value = '';\n        }\n\n        // Reset the flag\n        this.didBlurAfterEdit = false;\n    }\n\n    private focusChange() {\n        // If clearOnEdit is enabled and the input blurred but has a value, set a flag\n        if (this.clearOnEdit && !this.hasFocus && this.hasValue()) {\n            this.didBlurAfterEdit = true;\n        }\n    }\n\n    private hasValue(): boolean {\n        return this.getValue() !== '';\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 onFocus = (ev: FocusEvent) => {\n        this.hasFocus = true;\n        this.focusChange();\n\n        if (this.fireFocusEvents) {\n            this.wcsFocus.emit(ev);\n        }\n    }\n\n    private onBlur = (ev: FocusEvent) => {\n        this.hasFocus = false;\n        this.focusChange();\n\n        if (this.fireFocusEvents) {\n            this.wcsBlur.emit(ev);\n        }\n    }\n\n    private onKeyDown = () => {\n        this.checkClearOnEdit();\n    }\n\n    render() {\n        const value = this.getValue();\n        const labelId = this.inputId + '-lbl';\n        const label = findItemLabel(this.el);\n        if (label) {\n            label.id = labelId;\n        }\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                    aria-labelledby={label ? labelId : null}\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                    onBlur={this.onBlur}\n                    onFocus={this.onFocus}\n                    onKeyDown={this.onKeyDown}\n                    style={style}\n                    {...this.inheritedAttributes}\n                >\n            {value}\n          </textarea>\n            </Host>\n        );\n    }\n}\n\nlet textareaIds = 0;\n"],"version":3}
+{"file":"wcs-textarea.entry.cjs.js","mappings":"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","names":["debounceEvent","inheritAttributes","raf","readTask","findItemLabel","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\n:host {\n    --wcs-textarea-icon-color: var(--wcs-text-medium);\n    --wcs-internal-textarea-border-radius-left: var(--wcs-textarea-border-radius-left, var(--wcs-border-radius));\n    --wcs-internal-textarea-border-radius-right: var(--wcs-textarea-border-radius-right, var(--wcs-border-radius));\n    --wcs-internal-textarea-border-width: 2px;\n    --wcs-textarea-max-height: unset;\n    display: flex;\n    flex-direction: row;\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-light);\n    border: var(--wcs-internal-textarea-border-width) solid var(--wcs-light);\n    background-clip: padding-box;\n\n    ::placeholder {\n        font-weight: 400;\n        font-style: italic;\n    }\n\n    textarea {\n        overflow: auto;\n        flex: 1;\n        width: 100%;\n        box-sizing: border-box;\n        min-height: var(--wcs-size-m);\n        max-height: var(--wcs-textarea-max-height);\n        background-color: transparent;\n        font-family: var(--wcs-font-sans-serif);\n        color: var(--wcs-primary);\n        font-weight: var(--wcs-font-weight-form-value) !important;\n        border: none;\n        // On divise --wcs-internal-input-border-width par deux car la valeur du padding est appliquée en haut et en bas\n        padding: calc(calc(var(--wcs-padding) / 2) - calc(var(--wcs-internal-textarea-border-width) / 2)) calc(var(--wcs-padding) - var(--wcs-internal-textarea-border-width));\n        font-size: 1rem;\n        line-height: 1.5;\n    }\n\n    textarea:focus {\n        box-shadow: none;\n        outline: 0;\n    }\n\n    wcs-mat-icon {\n        position: relative;\n        margin-top: 7px;\n        margin-left: 8px;\n        margin-right: -8px;\n    }\n}\n\n:host([disabled]) {\n    textarea {\n        color: var(--wcs-text-disabled);\n        cursor: not-allowed;\n    }\n}\n\n:host([state=error]) {\n    border-color: var(--wcs-red) !important;\n}\n\n:host(:focus-within) {\n    border: dashed var(--wcs-internal-textarea-border-width) var(--wcs-primary);\n\n    wcs-mat-icon {\n        color: var(--wcs-primary);\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Method,\n    Prop,\n    State,\n    Watch,\n    h,\n    Host,\n    EventEmitter,\n    Element,\n    Event,\n    Build,\n    readTask\n} from '@stencil/core';\nimport { debounceEvent, findItemLabel, inheritAttributes, raf } from '../../utils/helpers';\nimport { TextareaChangeEventDetail } from './textarea-interface';\n\n/**\n * Mainly inspired from Ionic Textarea Component\n *\n * @cssprop --wcs-textarea-max-height - Max height of the text area component\n *\n */\n@Component({\n    tag: 'wcs-textarea',\n    styleUrl: 'textarea.scss',\n    shadow: {\n        delegatesFocus: true\n    },\n})\nexport class Textarea implements ComponentInterface {\n    private nativeInput?: HTMLTextAreaElement;\n    private inputId = `wcs-textarea-${textareaIds++}`;\n    private didBlurAfterEdit = false;\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    @Element() private el!: HTMLElement;\n\n    @State() private hasFocus = false;\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     * If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `\"password\"`, `false` for all other types.\n     */\n    @Prop({mutable: true}) clearOnEdit = false;\n\n    /**\n     * Set the amount of time, in milliseconds, to wait to trigger the `wcsChange` event after each keystroke. 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.wcsChange = debounceEvent(this.wcsChange, 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     * Possible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n     * `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.\n     */\n    @Prop() inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';\n\n    /**\n     * A hint to the browser for which enter key to display.\n     * Possible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n     * `\"previous\"`, `\"search\"`, and `\"send\"`.\n     */\n    @Prop() enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';\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: 'initial' | 'error' = '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     */\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?: 'hard' | 'soft' | 'off';\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     * Possible values 'both' | 'none' | 'vertical' | 'horizontal'\n     */\n    @Prop({reflect: true}) resize?: 'both' | 'none' | 'vertical' | 'horizontal';\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        this.wcsChange.emit({value});\n    }\n\n    /**\n     * Emitted when the input value has changed.\n     */\n    @Event() wcsChange!: EventEmitter<TextareaChangeEventDetail>;\n\n    /**\n     * Emitted when a keyboard input occurred.\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 = inheritAttributes(this.el, ['title']);\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    /**\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     * @deprecated use the native focus method instead  \n     * Sets focus on the native `textarea` in `wcs-textarea`.\n     */\n    @Method()\n    async setFocus() {\n        if (this.nativeInput) {\n            this.nativeInput.focus();\n        }\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    /**\n     * Check if we need to clear the text input if clearOnEdit is enabled\n     */\n    private checkClearOnEdit() {\n        if (!this.clearOnEdit) {\n            return;\n        }\n\n        // Did the input value change after it was blurred and edited?\n        if (this.didBlurAfterEdit && this.hasValue()) {\n            // Clear the input\n            this.value = '';\n        }\n\n        // Reset the flag\n        this.didBlurAfterEdit = false;\n    }\n\n    private focusChange() {\n        // If clearOnEdit is enabled and the input blurred but has a value, set a flag\n        if (this.clearOnEdit && !this.hasFocus && this.hasValue()) {\n            this.didBlurAfterEdit = true;\n        }\n    }\n\n    private hasValue(): boolean {\n        return this.getValue() !== '';\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 onFocus = (ev: FocusEvent) => {\n        this.hasFocus = true;\n        this.focusChange();\n\n        if (this.fireFocusEvents) {\n            this.wcsFocus.emit(ev);\n        }\n    }\n\n    private onBlur = (ev: FocusEvent) => {\n        this.hasFocus = false;\n        this.focusChange();\n\n        if (this.fireFocusEvents) {\n            this.wcsBlur.emit(ev);\n        }\n    }\n\n    private onKeyDown = () => {\n        this.checkClearOnEdit();\n    }\n\n    render() {\n        const value = this.getValue();\n        const labelId = this.inputId + '-lbl';\n        const label = findItemLabel(this.el);\n        if (label) {\n            label.id = labelId;\n        }\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                    aria-labelledby={label ? labelId : null}\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                    onBlur={this.onBlur}\n                    onFocus={this.onFocus}\n                    onKeyDown={this.onKeyDown}\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.cjs.js

@@ -20,7 +20,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["wcs-editable-field.cjs",[[1,"wcs-editable-field",{"type":[1],"label":[1],"readonly":[4],"value":[1032],"validateFn":[16],"formatFn":[16],"errorMsg":[1,"error-msg"],"size":[513],"currentState":[32],"isError":[32]},[[8,"click","onWindowClickEvent"]]]]],["wcs-horizontal-stepper.cjs",[[1,"wcs-horizontal-stepper",{"currentStep":[1026,"current-step"],"steps":[16],"mode":[1],"checkOnComplete":[4,"check-on-complete"],"internalCurrentStep":[32],"previous":[64],"next":[64]}]]],["wcs-counter.cjs",[[1,"wcs-counter",{"size":[513],"label":[1],"min":[1026],"max":[1026],"step":[1026],"value":[1026],"displayedValue":[32]}]]],["wcs-grid.cjs",[[1,"wcs-grid",{"serverMode":[4,"server-mode"],"data":[16],"loading":[4],"selectionConfig":[1,"selection-config"],"selectedItems":[8,"selected-items"],"wcsGridPaginationId":[1,"wcs-grid-pagination-id"],"rowIdPath":[1,"row-id-path"],"columns":[32],"paginationEl":[32],"rows":[32]},[[0,"wcsHiddenChange","onHiddenColumnChange"],[0,"wcsSortChange","sortChangeEventHandler"],[0,"wcsGridPaginationChange","paginationChangeEventHandler"],[8,"wcsGridPaginationChange","paginationChangeEventHandlerOutside"]]]]],["wcs-grid-pagination.cjs",[[1,"wcs-grid-pagination",{"availablePageSizes":[16],"currentPage":[2,"current-page"],"pageSize":[2,"page-size"],"itemsCount":[2,"items-count"],"pageCount":[2,"page-count"]}]]],["wcs-modal.cjs",[[4,"wcs-modal",{"withoutBackdrop":[516,"without-backdrop"],"show":[516],"showCloseButton":[516,"show-close-button"],"size":[1],"hideActions":[516,"hide-actions"]},[[4,"keydown","onKeyDown"]]]]],["wcs-dropdown.cjs",[[1,"wcs-dropdown",{"noArrow":[4,"no-arrow"],"mode":[1],"shape":[1],"disabled":[4],"placement":[1],"expanded":[32]},[[8,"click","onWindowClickEvent"],[0,"wcsDropdownItemClick","dropdownItemClick"],[0,"keydown","onKeyDown"]]]]],["wcs-galactic-menu.cjs",[[1,"wcs-galactic-menu",{"text":[1],"showPopoverMenu":[32]},[[8,"click","onWindowClickEvent"]]]]],["wcs-input.cjs",[[17,"wcs-input",{"fireFocusEvents":[4,"fire-focus-events"],"accept":[1],"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"autofocus":[4],"clearInput":[4,"clear-input"],"clearOnEdit":[4,"clear-on-edit"],"debounce":[2],"prefixLabel":[1,"prefix-label"],"suffixLabel":[1,"suffix-label"],"disabled":[4],"enterkeyhint":[1],"size":[513],"icon":[1],"inputmode":[1],"max":[1],"maxlength":[2],"min":[1],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"state":[513],"step":[1],"type":[1],"value":[1032],"hasFocus":[32],"passwordReveal":[32],"setFocus":[64],"setBlur":[64],"getInputElement":[64]}]]],["wcs-textarea.cjs",[[1,"wcs-textarea",{"fireFocusEvents":[4,"fire-focus-events"],"autocapitalize":[1],"autofocus":[4],"clearOnEdit":[1028,"clear-on-edit"],"debounce":[2],"disabled":[4],"icon":[1],"inputmode":[1],"enterkeyhint":[1],"maxlength":[2],"minlength":[2],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"state":[513],"cols":[2],"rows":[2],"wrap":[1],"autoGrow":[4,"auto-grow"],"value":[1025],"resize":[513],"hasFocus":[32],"fitContent":[64],"setFocus":[64],"setBlur":[64],"getInputElement":[64]}]]],["wcs-accordion.cjs",[[1,"wcs-accordion",{"hideActionText":[516,"hide-action-text"],"highlight":[516],"groupContentWithHeader":[516,"group-content-with-header"]},[[0,"wcsOpenChange","wcsOpenChangeHandler"]]]]],["wcs-accordion-content.cjs",[[1,"wcs-accordion-content"]]],["wcs-accordion-header.cjs",[[1,"wcs-accordion-header"]]],["wcs-accordion-panel.cjs",[[1,"wcs-accordion-panel",{"open":[1540],"hideActionText":[516,"hide-action-text"],"highlight":[516],"groupContentWithHeader":[516,"group-content-with-header"],"close":[64]}]]],["wcs-action-bar.cjs",[[1,"wcs-action-bar",{"gutter":[4],"hasTabs":[32]}]]],["wcs-app.cjs",[[1,"wcs-app"]]],["wcs-badge.cjs",[[1,"wcs-badge",{"shape":[1],"color":[1]}]]],["wcs-card.cjs",[[1,"wcs-card",{"mode":[1537]}]]],["wcs-card-body.cjs",[[1,"wcs-card-body"]]],["wcs-com-nav.cjs",[[1,"wcs-com-nav",{"appName":[1,"app-name"],"mobileMenuOpen":[32],"currentActiveSizing":[32]},[[0,"wcsClickOnFinalAction","onClickOnFinalAction"],[0,"wcsCategoryItemClicked","onClickOnFinalActionCat"],[8,"keydown","exitMobileMenuOnKeyDown"]]]]],["wcs-com-nav-category.cjs",[[1,"wcs-com-nav-category",{"label":[1],"categoryOpen":[32],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsCategoryOpened","onSubmenuOpened"]]]]],["wcs-com-nav-submenu.cjs",[[1,"wcs-com-nav-submenu",{"label":[1],"panelTitle":[1,"panel-title"],"panelDescription":[1,"panel-description"],"menuOpen":[32],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsSubmenuOpened","onSubmenuOpened"],[8,"keydown","onEscapeKeyDown"],[0,"wcsCategoryItemClicked","wcsCategoryItemClickedHandler"]]]]],["wcs-divider.cjs",[[1,"wcs-divider"]]],["wcs-dropdown-divider.cjs",[[1,"wcs-dropdown-divider"]]],["wcs-dropdown-header.cjs",[[1,"wcs-dropdown-header"]]],["wcs-dropdown-item.cjs",[[4,"wcs-dropdown-item",null,[[1,"mousedown","onMouseDown"],[0,"keydown","onKeyDown"]]]]],["wcs-field.cjs",[[1,"wcs-field"]]],["wcs-field-content.cjs",[[1,"wcs-field-content"]]],["wcs-field-label.cjs",[[1,"wcs-field-label"]]],["wcs-footer.cjs",[[1,"wcs-footer"]]],["wcs-galactic.cjs",[[1,"wcs-galactic",{"text":[1],"show":[32]}]]],["wcs-grid-column.cjs",[[1,"wcs-grid-column",{"path":[1],"name":[1],"sort":[4],"sortFn":[16],"formatter":[16],"sortOrder":[1025,"sort-order"],"width":[1],"customCells":[4,"custom-cells"],"hidden":[4]}]]],["wcs-grid-custom-cell.cjs",[[1,"wcs-grid-custom-cell",{"columnId":[1,"column-id"],"rowId":[8,"row-id"]}]]],["wcs-header.cjs",[[1,"wcs-header"]]],["wcs-hint.cjs",[[1,"wcs-hint",{"small":[1540]}]]],["wcs-icon.cjs",[[0,"wcs-icon",{"icon":[1],"size":[1]}]]],["wcs-label.cjs",[[1,"wcs-label",{"required":[516]}]]],["wcs-list-item.cjs",[[1,"wcs-list-item",{"activated":[1028]}]]],["wcs-list-item-properties.cjs",[[1,"wcs-list-item-properties"]]],["wcs-list-item-property.cjs",[[1,"wcs-list-item-property"]]],["wcs-native-select.cjs",[[1,"wcs-native-select",{"size":[513],"expanded":[32],"disabled":[32]}]]],["wcs-nav.cjs",[[1,"wcs-nav"]]],["wcs-nav-item.cjs",[[4,"wcs-nav-item",{"text":[513],"href":[513]},[[0,"keydown","onKeyDown"]]]]],["wcs-progress-radial.cjs",[[1,"wcs-progress-radial",{"size":[2],"showLabel":[4,"show-label"],"value":[2]}]]],["wcs-radio-group.cjs",[[1,"wcs-radio-group",{"value":[8],"name":[520],"mode":[513]},[[0,"wcsRadioClick","selectedOptionChanged"]]]]],["wcs-skeleton-circle.cjs",[[1,"wcs-skeleton-circle",{"animation":[513],"radius":[514]}]]],["wcs-skeleton-rectangle.cjs",[[1,"wcs-skeleton-rectangle",{"animation":[513],"rounded":[516],"height":[513],"width":[513]}]]],["wcs-skeleton-text.cjs",[[1,"wcs-skeleton-text",{"animation":[513],"height":[1]}]]],["wcs-switch.cjs",[[1,"wcs-switch",{"name":[1],"checked":[516],"labelAlignment":[513,"label-alignment"],"disabled":[4]}]]],["wcs-tab.cjs",[[1,"wcs-tab",{"header":[513],"itemKey":[8,"item-key"]}]]],["wcs-tabs.cjs",[[1,"wcs-tabs",{"align":[513],"selectedIndex":[2,"selected-index"],"selectedKey":[8,"selected-key"],"headersOnly":[4,"headers-only"],"gutter":[4],"headers":[32],"currentActiveTabIndex":[32]},[[0,"tabLoaded","onTabLoaded"]]]]],["wcs-tooltip.cjs",[[1,"wcs-tooltip",{"for":[1],"position":[513],"interactive":[4],"maxWidth":[8,"max-width"],"delay":[2],"duration":[2],"trigger":[1],"theme":[1],"content":[1],"appendTo":[1,"append-to"],"hide":[64],"show":[64],"disable":[64],"enable":[64]}]]],["wcs-progress-bar.cjs",[[1,"wcs-progress-bar",{"small":[4],"showLabel":[4,"show-label"],"value":[2]}]]],["wcs-radio.cjs",[[1,"wcs-radio",{"mode":[513],"value":[1544],"label":[1537],"checked":[1540],"disabled":[1028]},[[0,"keydown","onKeyDown"]]]]],["wcs-select_2.cjs",[[4,"wcs-select-option",{"disabled":[1540],"selected":[1540],"value":[8],"chipColor":[1,"chip-color"],"chipBackgroundColor":[1,"chip-background-color"],"multiple":[1540]},[[1,"mousedown","onMouseDown"],[0,"keydown","handleKeydown"]]],[1,"wcs-select",{"size":[513],"value":[1032],"placeholder":[1537],"disabled":[1028],"multiple":[516],"chips":[516],"name":[1],"compareWith":[16],"expanded":[32],"hasLoaded":[32],"displayText":[32],"focused":[32],"overlayDirection":[32],"open":[64],"close":[64]},[[1,"mousedown","onMouseDown"],[8,"click","onWindowClickEvent"],[0,"keydown","onKeyDown"],[0,"wcsSelectOptionClick","selectedOptionChanged"]]]]],["wcs-error_2.cjs",[[1,"wcs-error"],[1,"wcs-form-field",{"isError":[1540,"is-error"],"hasPrefix":[32],"hasSuffix":[32],"spiedElement":[32]}]]],["wcs-checkbox.cjs",[[1,"wcs-checkbox",{"name":[1],"indeterminate":[1540],"checked":[1540],"labelAlignment":[1537,"label-alignment"],"disabled":[4]}]]],["wcs-button.cjs",[[17,"wcs-button",{"type":[1025],"href":[1],"target":[1],"disabled":[516],"ripple":[4],"size":[513],"shape":[513],"mode":[513],"loading":[1028]},[[0,"click","onClick"]]]]],["wcs-mat-icon.cjs",[[1,"wcs-mat-icon",{"icon":[1],"size":[1],"family":[1]}]]],["wcs-spinner.cjs",[[1,"wcs-spinner",{"mode":[513]}]]]], options);
+  return index.bootstrapLazy([["wcs-editable-field.cjs",[[1,"wcs-editable-field",{"type":[1],"label":[1],"readonly":[4],"value":[1032],"validateFn":[16],"formatFn":[16],"errorMsg":[1,"error-msg"],"size":[513],"currentState":[32],"isError":[32]},[[8,"click","onWindowClickEvent"]]]]],["wcs-horizontal-stepper.cjs",[[1,"wcs-horizontal-stepper",{"currentStep":[1026,"current-step"],"steps":[16],"mode":[1],"checkOnComplete":[4,"check-on-complete"],"internalCurrentStep":[32],"previous":[64],"next":[64]}]]],["wcs-counter.cjs",[[17,"wcs-counter",{"size":[513],"label":[1],"min":[1026],"max":[1026],"step":[1026],"value":[1026],"displayedValue":[32]}]]],["wcs-grid.cjs",[[1,"wcs-grid",{"serverMode":[4,"server-mode"],"data":[16],"loading":[4],"selectionConfig":[1,"selection-config"],"selectedItems":[8,"selected-items"],"wcsGridPaginationId":[1,"wcs-grid-pagination-id"],"rowIdPath":[1,"row-id-path"],"columns":[32],"paginationEl":[32],"rows":[32]},[[0,"wcsHiddenChange","onHiddenColumnChange"],[0,"wcsSortChange","sortChangeEventHandler"],[0,"wcsGridPaginationChange","paginationChangeEventHandler"],[8,"wcsGridPaginationChange","paginationChangeEventHandlerOutside"]]]]],["wcs-grid-pagination.cjs",[[1,"wcs-grid-pagination",{"availablePageSizes":[16],"currentPage":[2,"current-page"],"pageSize":[2,"page-size"],"itemsCount":[2,"items-count"],"pageCount":[2,"page-count"]}]]],["wcs-modal.cjs",[[4,"wcs-modal",{"withoutBackdrop":[516,"without-backdrop"],"show":[516],"showCloseButton":[516,"show-close-button"],"size":[1],"hideActions":[516,"hide-actions"]},[[4,"keydown","onKeyDown"]]]]],["wcs-dropdown.cjs",[[17,"wcs-dropdown",{"noArrow":[4,"no-arrow"],"mode":[1],"shape":[1],"disabled":[4],"placement":[1],"expanded":[32]},[[8,"click","onWindowClickEvent"],[0,"wcsDropdownItemClick","dropdownItemClick"],[0,"keydown","onKeyDown"]]]]],["wcs-galactic-menu.cjs",[[1,"wcs-galactic-menu",{"text":[1],"showPopoverMenu":[32]},[[8,"click","onWindowClickEvent"]]]]],["wcs-input.cjs",[[17,"wcs-input",{"fireFocusEvents":[4,"fire-focus-events"],"accept":[1],"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"autofocus":[4],"clearInput":[4,"clear-input"],"clearOnEdit":[4,"clear-on-edit"],"debounce":[2],"prefixLabel":[1,"prefix-label"],"suffixLabel":[1,"suffix-label"],"disabled":[4],"enterkeyhint":[1],"size":[513],"icon":[1],"inputmode":[1],"max":[1],"maxlength":[2],"min":[1],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"state":[513],"step":[1],"type":[1],"value":[1032],"hasFocus":[32],"passwordReveal":[32],"setFocus":[64],"setBlur":[64],"getInputElement":[64]}]]],["wcs-textarea.cjs",[[17,"wcs-textarea",{"fireFocusEvents":[4,"fire-focus-events"],"autocapitalize":[1],"autofocus":[4],"clearOnEdit":[1028,"clear-on-edit"],"debounce":[2],"disabled":[4],"icon":[1],"inputmode":[1],"enterkeyhint":[1],"maxlength":[2],"minlength":[2],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"state":[513],"cols":[2],"rows":[2],"wrap":[1],"autoGrow":[4,"auto-grow"],"value":[1025],"resize":[513],"hasFocus":[32],"fitContent":[64],"setFocus":[64],"setBlur":[64],"getInputElement":[64]}]]],["wcs-accordion.cjs",[[1,"wcs-accordion",{"hideActionText":[516,"hide-action-text"],"highlight":[516],"groupContentWithHeader":[516,"group-content-with-header"]},[[0,"wcsOpenChange","wcsOpenChangeHandler"]]]]],["wcs-accordion-content.cjs",[[1,"wcs-accordion-content"]]],["wcs-accordion-header.cjs",[[1,"wcs-accordion-header"]]],["wcs-accordion-panel.cjs",[[1,"wcs-accordion-panel",{"open":[1540],"hideActionText":[516,"hide-action-text"],"highlight":[516],"groupContentWithHeader":[516,"group-content-with-header"],"close":[64]}]]],["wcs-action-bar.cjs",[[1,"wcs-action-bar",{"gutter":[4],"hasTabs":[32]}]]],["wcs-app.cjs",[[1,"wcs-app"]]],["wcs-badge.cjs",[[1,"wcs-badge",{"shape":[1],"color":[1]}]]],["wcs-card.cjs",[[1,"wcs-card",{"mode":[1537]}]]],["wcs-card-body.cjs",[[1,"wcs-card-body"]]],["wcs-com-nav.cjs",[[1,"wcs-com-nav",{"appName":[1,"app-name"],"mobileMenuOpen":[32],"currentActiveSizing":[32]},[[0,"wcsClickOnFinalAction","onClickOnFinalAction"],[0,"wcsCategoryItemClicked","onClickOnFinalActionCat"],[8,"keydown","exitMobileMenuOnKeyDown"]]]]],["wcs-com-nav-category.cjs",[[1,"wcs-com-nav-category",{"label":[1],"categoryOpen":[32],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsCategoryOpened","onSubmenuOpened"]]]]],["wcs-com-nav-submenu.cjs",[[1,"wcs-com-nav-submenu",{"label":[1],"panelTitle":[1,"panel-title"],"panelDescription":[1,"panel-description"],"menuOpen":[32],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsSubmenuOpened","onSubmenuOpened"],[8,"keydown","onEscapeKeyDown"],[0,"wcsCategoryItemClicked","wcsCategoryItemClickedHandler"]]]]],["wcs-divider.cjs",[[1,"wcs-divider"]]],["wcs-dropdown-divider.cjs",[[1,"wcs-dropdown-divider"]]],["wcs-dropdown-header.cjs",[[1,"wcs-dropdown-header"]]],["wcs-dropdown-item.cjs",[[4,"wcs-dropdown-item",null,[[1,"mousedown","onMouseDown"],[0,"keydown","onKeyDown"]]]]],["wcs-field.cjs",[[1,"wcs-field"]]],["wcs-field-content.cjs",[[1,"wcs-field-content"]]],["wcs-field-label.cjs",[[1,"wcs-field-label"]]],["wcs-footer.cjs",[[1,"wcs-footer"]]],["wcs-galactic.cjs",[[1,"wcs-galactic",{"text":[1],"show":[32]}]]],["wcs-grid-column.cjs",[[1,"wcs-grid-column",{"path":[1],"name":[1],"sort":[4],"sortFn":[16],"formatter":[16],"sortOrder":[1025,"sort-order"],"width":[1],"customCells":[4,"custom-cells"],"hidden":[4]}]]],["wcs-grid-custom-cell.cjs",[[1,"wcs-grid-custom-cell",{"columnId":[1,"column-id"],"rowId":[8,"row-id"]}]]],["wcs-header.cjs",[[1,"wcs-header"]]],["wcs-hint.cjs",[[1,"wcs-hint",{"small":[1540]}]]],["wcs-icon.cjs",[[0,"wcs-icon",{"icon":[1],"size":[1]}]]],["wcs-label.cjs",[[1,"wcs-label",{"required":[516]}]]],["wcs-list-item.cjs",[[1,"wcs-list-item",{"activated":[1028]}]]],["wcs-list-item-properties.cjs",[[1,"wcs-list-item-properties"]]],["wcs-list-item-property.cjs",[[1,"wcs-list-item-property"]]],["wcs-native-select.cjs",[[1,"wcs-native-select",{"size":[513],"expanded":[32],"disabled":[32],"updateStyles":[64]}]]],["wcs-nav.cjs",[[1,"wcs-nav"]]],["wcs-nav-item.cjs",[[4,"wcs-nav-item",{"text":[513],"href":[513]},[[0,"keydown","onKeyDown"]]]]],["wcs-progress-radial.cjs",[[1,"wcs-progress-radial",{"size":[2],"showLabel":[4,"show-label"],"value":[2]}]]],["wcs-radio-group.cjs",[[1,"wcs-radio-group",{"value":[8],"name":[520],"mode":[513]},[[0,"wcsRadioClick","selectedOptionChanged"],[0,"keydown","handleKeyDown"],[0,"keyup","handleKeyUp"]]]]],["wcs-skeleton-circle.cjs",[[1,"wcs-skeleton-circle",{"animation":[513],"radius":[514]}]]],["wcs-skeleton-rectangle.cjs",[[1,"wcs-skeleton-rectangle",{"animation":[513],"rounded":[516],"height":[513],"width":[513]}]]],["wcs-skeleton-text.cjs",[[1,"wcs-skeleton-text",{"animation":[513],"height":[1]}]]],["wcs-switch.cjs",[[1,"wcs-switch",{"name":[1],"checked":[516],"labelAlignment":[513,"label-alignment"],"disabled":[4]}]]],["wcs-tab.cjs",[[1,"wcs-tab",{"header":[513],"itemKey":[8,"item-key"]}]]],["wcs-tabs.cjs",[[1,"wcs-tabs",{"align":[513],"selectedIndex":[2,"selected-index"],"selectedKey":[8,"selected-key"],"headersOnly":[4,"headers-only"],"gutter":[4],"description":[1],"headers":[32],"currentActiveTabIndex":[32]},[[0,"tabLoaded","onTabLoaded"]]]]],["wcs-tooltip.cjs",[[1,"wcs-tooltip",{"for":[1],"position":[513],"interactive":[4],"maxWidth":[8,"max-width"],"delay":[2],"duration":[2],"trigger":[1],"theme":[1],"content":[1],"appendTo":[1,"append-to"],"hide":[64],"show":[64],"disable":[64],"enable":[64]}]]],["wcs-progress-bar.cjs",[[1,"wcs-progress-bar",{"small":[4],"showLabel":[4,"show-label"],"value":[2]}]]],["wcs-radio.cjs",[[17,"wcs-radio",{"mode":[513],"value":[1544],"label":[1537],"checked":[1540],"disabled":[1028],"name":[1]},[[0,"keydown","onKeyDown"]]]]],["wcs-select_2.cjs",[[4,"wcs-select-option",{"disabled":[1540],"selected":[1540],"value":[8],"chipColor":[1,"chip-color"],"chipBackgroundColor":[1,"chip-background-color"],"multiple":[1540]},[[1,"mousedown","onMouseDown"],[0,"keydown","handleKeydown"]]],[1,"wcs-select",{"size":[513],"value":[1032],"placeholder":[1537],"disabled":[1028],"multiple":[516],"chips":[516],"name":[1],"compareWith":[16],"expanded":[32],"hasLoaded":[32],"displayText":[32],"focused":[32],"overlayDirection":[32],"open":[64],"close":[64]},[[1,"mousedown","onMouseDown"],[8,"click","onWindowClickEvent"],[0,"keydown","onKeyDown"],[0,"wcsSelectOptionClick","selectedOptionChanged"]]]]],["wcs-error_2.cjs",[[1,"wcs-error"],[1,"wcs-form-field",{"isError":[1540,"is-error"],"hasPrefix":[32],"hasSuffix":[32],"spiedElement":[32]}]]],["wcs-checkbox.cjs",[[17,"wcs-checkbox",{"name":[1],"indeterminate":[1540],"checked":[1540],"labelAlignment":[1537,"label-alignment"],"disabled":[4]}]]],["wcs-button.cjs",[[17,"wcs-button",{"type":[1025],"href":[1],"target":[1],"disabled":[516],"ripple":[4],"size":[513],"shape":[513],"mode":[513],"loading":[1028]},[[0,"click","onClick"]]]]],["wcs-mat-icon.cjs",[[1,"wcs-mat-icon",{"icon":[1],"size":[1],"family":[1]}]]],["wcs-spinner.cjs",[[1,"wcs-spinner",{"mode":[513]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -1,6 +1,6 @@
 {
   "entries": [
-    "./components/native-select/native-select.component.js",
+    "./components/native-select/native-select.js",
     "./components/accordion/accordion.js",
     "./components/accordion-content/accordion-content.js",
     "./components/accordion-header/accordion-header.js",
@@ -49,7 +49,7 @@
     "./components/nav-item/nav-item.js",
     "./components/progress-bar/progress-bar.js",
     "./components/progress-radial/progress-radial.js",
-    "./components/radio/radio.component.js",
+    "./components/radio/radio.js",
     "./components/radio-group/radio-group.js",
     "./components/select/select.js",
     "./components/select-option/select-option.js",

package/dist/collection/components/checkbox/checkbox.js

@@ -20,6 +20,7 @@ export class Checkbox {
   }
   static get is() { return "wcs-checkbox"; }
   static get encapsulation() { return "shadow"; }
+  static get delegatesFocus() { return true; }
   static get originalStyleUrls() {
     return {
       "$": ["checkbox.scss"]

package/dist/collection/components/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAoC,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQlG,MAAM,OAAO,QAAQ;;IACT,eAAU,GAAG,gBAAgB,WAAW,EAAE,EAAE,CAAC;gBACtC,IAAI,CAAC,UAAU;yBAK0B,KAAK;mBAKX,KAAK;0BAK0B,QAAQ;oBAK7D,KAAK;;EAOjC,YAAY,CAAC,MAAa;IACtB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;IAC3B,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC7B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;MAChB,OAAO,EAAE,IAAI,CAAC,OAAO;KACxB,CAAC,CAAC;EACP,CAAC;EAED,MAAM;IACF,OAAO,CACH,EAAC,IAAI;MACD,aAAO,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,eAAe,mBAAgB,IAAI,CAAC,QAAQ;QACzE,aAAO,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,EACzC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,IAAI,GACZ;QACR,YAAM,KAAK,EAAC,eAAe,GAAQ;QACnC,YAAM,KAAK,EAAC,MAAM;UACd,eAAO,CACJ,CACH,CACL,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ;AAED,IAAI,WAAW,GAAG,CAAC,CAAC","sourcesContent":["import { Component, Prop, Event, EventEmitter, ComponentInterface, h, Host } from '@stencil/core';\nimport { CheckboxChangeEventDetail, CheckboxLabelAlignment } from './checkbox-interface';\n\n@Component({\n    tag: 'wcs-checkbox',\n    styleUrl: 'checkbox.scss',\n    shadow: true\n})\nexport class Checkbox implements ComponentInterface {\n    private checkboxId = `wcs-checkbox-${checkboxIds++}`;\n    @Prop() name = this.checkboxId;\n\n    /**\n     * If `true` the checkbox is in indeterminate state.\n     */\n    @Prop({ reflect: true, mutable: true }) indeterminate = false;\n\n    /**\n     * If `true`, the checkbox is selected.\n     */\n    @Prop({ reflect: true, mutable: true }) checked = false;\n\n    /**\n     * Specifie the alignment of the checkbox with the label content\n     */\n    @Prop({ mutable: true, reflect: true }) labelAlignment: CheckboxLabelAlignment = 'center';\n\n    /**\n     * Specify wether the checkbox 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<CheckboxChangeEventDetail>;\n\n    handleChange(_event: Event) {\n        this.indeterminate = false;\n        this.checked = !this.checked;\n        this.wcsChange.emit({\n            checked: this.checked\n        });\n    }\n\n    render() {\n        return (\n            <Host>\n                <label htmlFor={this.name} class=\"wcs-container\" aria-disabled={this.disabled}>\n                    <input onChange={(evt) => this.handleChange(evt)}\n                           checked={this.checked}\n                           class=\"wcs-checkbox\"\n                           type=\"checkbox\"\n                           name={this.name}\n                           disabled={this.disabled}\n                           id={this.name}>\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 checkboxIds = 0;\n"]}
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAoC,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAUlG,MAAM,OAAO,QAAQ;;IACT,eAAU,GAAG,gBAAgB,WAAW,EAAE,EAAE,CAAC;gBACtC,IAAI,CAAC,UAAU;yBAK0B,KAAK;mBAKX,KAAK;0BAK0B,QAAQ;oBAK7D,KAAK;;EAOjC,YAAY,CAAC,MAAa;IACtB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;IAC3B,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC7B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;MAChB,OAAO,EAAE,IAAI,CAAC,OAAO;KACxB,CAAC,CAAC;EACP,CAAC;EAED,MAAM;IACF,OAAO,CACH,EAAC,IAAI;MACD,aAAO,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,eAAe,mBAAgB,IAAI,CAAC,QAAQ;QACzE,aAAO,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,EACzC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,IAAI,GACZ;QACR,YAAM,KAAK,EAAC,eAAe,GAAQ;QACnC,YAAM,KAAK,EAAC,MAAM;UACd,eAAO,CACJ,CACH,CACL,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ;AAED,IAAI,WAAW,GAAG,CAAC,CAAC","sourcesContent":["import { Component, Prop, Event, EventEmitter, ComponentInterface, h, Host } from '@stencil/core';\nimport { CheckboxChangeEventDetail, CheckboxLabelAlignment } from './checkbox-interface';\n\n@Component({\n    tag: 'wcs-checkbox',\n    styleUrl: 'checkbox.scss',\n    shadow: {\n        delegatesFocus: true\n    }\n})\nexport class Checkbox implements ComponentInterface {\n    private checkboxId = `wcs-checkbox-${checkboxIds++}`;\n    @Prop() name = this.checkboxId;\n\n    /**\n     * If `true` the checkbox is in indeterminate state.\n     */\n    @Prop({ reflect: true, mutable: true }) indeterminate = false;\n\n    /**\n     * If `true`, the checkbox is selected.\n     */\n    @Prop({ reflect: true, mutable: true }) checked = false;\n\n    /**\n     * Specifie the alignment of the checkbox with the label content\n     */\n    @Prop({ mutable: true, reflect: true }) labelAlignment: CheckboxLabelAlignment = 'center';\n\n    /**\n     * Specify wether the checkbox 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<CheckboxChangeEventDetail>;\n\n    handleChange(_event: Event) {\n        this.indeterminate = false;\n        this.checked = !this.checked;\n        this.wcsChange.emit({\n            checked: this.checked\n        });\n    }\n\n    render() {\n        return (\n            <Host>\n                <label htmlFor={this.name} class=\"wcs-container\" aria-disabled={this.disabled}>\n                    <input onChange={(evt) => this.handleChange(evt)}\n                           checked={this.checked}\n                           class=\"wcs-checkbox\"\n                           type=\"checkbox\"\n                           name={this.name}\n                           disabled={this.disabled}\n                           id={this.name}>\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 checkboxIds = 0;\n"]}

package/dist/collection/components/counter/counter.js

@@ -136,6 +136,7 @@ export class Counter {
   }
   static get is() { return "wcs-counter"; }
   static get encapsulation() { return "shadow"; }
+  static get delegatesFocus() { return true; }
   static get originalStyleUrls() {
     return {
       "$": ["counter.scss"]

package/dist/collection/components/counter/counter.js.map

@@ -1 +1 @@
-{"version":3,"file":"counter.js","sourceRoot":"","sources":["../../../src/components/counter/counter.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n    State,\n    Watch\n} from '@stencil/core';\nimport { isEndKey, isHomeKey, isKeydown, isKeyup } from '../../utils/helpers';\nimport { CounterChangeEventDetail, isWcsCounterSize, WcsCounterSize, WcsCounterSizeValues } from './counter-interface';\n\nconst ANIMATION_DURATION = 0.175 // seconds\n\n/**\n * Counter component, meant to be used for small range of values (e.g : 0 - 5).<br>\n * For larger or specific ranges, please use [wcs-input (type number)](.?path=/docs/components-input--documentation)\n */\n@Component({\n    tag: 'wcs-counter',\n    styleUrl: 'counter.scss',\n    shadow: true,\n})\nexport class Counter implements ComponentInterface {\n    @Element() private el!: HTMLElement;\n\n    /**\n     * Specify the size (height) of the counter.\n     */\n    @Prop({reflect: true}) size: WcsCounterSize = 'm';\n\n    /**\n     * The label of the counter.<br/>\n     * e.g. Number of passengers, train carriages, railroad tracks...\n     */\n    @Prop({mutable: false}) label!: string;\n\n    /**\n     * The minimum value of the counter.\n     * If the value of the min attribute isn't set, then the element has no minimum value.\n     */\n    @Prop({mutable: true}) min?: number;\n\n    /**\n     * The maximum value of the counter.\n     * If the value of the max attribute isn't set, then the element has no maximum value.\n     */\n    @Prop({mutable: true}) max?: number;\n\n    /**\n     * Defines by how much the counter will be incremented or decremented.\n     */\n    @Prop({mutable: true}) step: number = 1;\n\n    /**\n     * Emitted when the value of the counter has changed.\n     */\n    @Event() wcsChange!: EventEmitter<CounterChangeEventDetail>;\n\n    /**\n     * The current value of the counter.\n     */\n    @Prop({mutable: true}) value!: number;\n\n    /**\n     * Only for animation and display purpose\n     */\n    @State() private displayedValue: number;\n\n    private animateRunning = false;\n\n    /**\n     * Emitted when the counter loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    componentWillLoad() {\n        this.handleValueChange();\n\n        if (!isWcsCounterSize(this.size)) {\n            console.error(`Invalid size value for wcs-counter : \"${this.size}\". Must be one of \"${WcsCounterSizeValues.join(', ')}\"`);\n            this.size = \"m\"; // Default fallback value\n        }\n    }\n\n    /**\n     * Current value change => handle event and interval\n     */\n    @Watch('value')\n    valueChange(newVal: any, oldVal: any) {\n        if(oldVal === newVal) return;\n\n        this.handleValueChange();\n    }\n\n    private handleValueChange() {\n        this.setMinimumIfValueIsUndefinedOrNull();\n        this.ensureValueIsNotOutOfMinMax();\n        this.updateDisplayValueIfNoAnimationRunning();\n    }\n\n    private updateDisplayValueIfNoAnimationRunning() {\n        if (!this.animateRunning) {\n            this.displayedValue = this.value;\n        }\n    }\n\n    private ensureValueIsNotOutOfMinMax() {\n        if (this.max !== undefined && this.value > this.max) {\n            this.value = this.max;\n        } else if (this.min !== undefined && this.value < this.min) {\n            this.value = this.min;\n        }\n    }\n\n    private setMinimumIfValueIsUndefinedOrNull() {\n        if (this.value === undefined || this.value === null) {\n            this.value = this.min ?? 0;\n        }\n    }\n\n    onKeyDown(_event: KeyboardEvent) {\n        if (isKeyup(_event)) {\n            _event.preventDefault();\n            this.handleIncrement()\n        }\n        if (isKeydown(_event)) {\n            _event.preventDefault();\n            this.handleDecrement()\n        }\n        if (isHomeKey(_event)) {\n            _event.preventDefault();\n            if (this.min != null) {\n                this.value = this.min;\n                this.displayedValue = this.value;\n                this.notifyChange();\n            }\n        }\n        if (isEndKey(_event)) {\n            _event.preventDefault();\n            if (this.max != null) {\n                this.value = this.max;\n                this.displayedValue = this.value;\n                this.notifyChange();\n            }\n        }\n    }\n\n    private notifyChange() {\n        this.wcsChange.emit({\n            value: this.value\n        });\n    }\n    \n    private getCounterContainer = (): HTMLDivElement => {\n        return Array.from(this.el.shadowRoot.children)\n            .find(el => el.tagName === 'DIV') as HTMLDivElement;\n    }\n\n    private handleDecrement = () => {\n        if (this.min === undefined || this.value > this.min) {\n            // we set animateRunning here to prevent the watch method on value prop from affecting the displayed value\n            // before the animation runs.\n            this.animateRunning = true; \n            this.value -= this.step;\n            this.notifyChange();\n            this.animate('up');\n        }\n    };\n\n    private handleIncrement = () => {\n        if (this.max === undefined || this.value < this.max) {\n            // we set animateRunning here to prevent the watch method on value prop from affecting the displayed value\n            // before the animation runs.\n            this.animateRunning = true; \n            this.value += this.step;\n            this.notifyChange();\n            this.animate('down');\n        }\n    };\n\n    private animate = (direction: 'up' | 'down'): void => {\n        // In case someone call animate function, we want ensured that animateRunning is set to true to prevent other \n        // method to mutate the displayedValue.\n        this.animateRunning = true;  \n\n        const counterContainer = this.getCounterContainer();\n        const outliers = Array.from(counterContainer.children)\n            .filter((span: HTMLSpanElement) => span.classList.contains('outliers'));\n\n        counterContainer.classList.add('animate-' + direction);\n        outliers.forEach((span: HTMLSpanElement) => {\n            span.classList.remove('hidden')\n        });\n        setTimeout(() => {\n            counterContainer.classList.remove('animate-' + direction);\n            outliers.forEach((span: HTMLSpanElement) => {\n                span.classList.add('hidden')\n            });\n            this.displayedValue = this.value;\n\n            this.animateRunning = false;\n        }, 1000 * ANIMATION_DURATION - 20);\n    }\n\n    render() {\n        return (\n            <Host>\n                <wcs-button class=\"wcs-primary\"\n                            shape=\"round\"\n                            size=\"s\"\n                            tabindex={-1}\n                            onClick={() => this.handleDecrement()}\n                            onBlur={(event) => this.wcsBlur.emit(event)}\n                            disabled={this.value === this.min}>\n                    <wcs-mat-icon icon=\"remove\" size=\"s\"></wcs-mat-icon>\n                </wcs-button>\n                <div class=\"counter-container\">\n                    <span id=\"outlier-down\" class=\"outliers hidden\"\n                          aria-hidden=\"true\">{this.displayedValue - this.step}</span>\n                    <span tabindex=\"0\"\n                          role=\"spinbutton\"\n                          class=\"current-value\"\n                          onBlur={(event) => this.wcsBlur.emit(event)}\n                          onKeyDown={(event) => this.onKeyDown(event)}\n                          aria-valuenow={this.value}\n                          aria-valuetext={this.value}\n                          aria-valuemin={this.min}\n                          aria-valuemax={this.max}\n                          aria-label={this.label}>{this.displayedValue}</span>\n                    <span id=\"outlier-up\" class=\"outliers hidden\"\n                          aria-hidden=\"true\">{this.displayedValue + this.step}</span>\n                </div>\n                <wcs-button class=\"wcs-primary\"\n                            shape=\"round\"\n                            size=\"s\"\n                            tabindex={-1}\n                            onClick={() => this.handleIncrement()}\n                            onBlur={(event) => this.wcsBlur.emit(event)}\n                            disabled={this.value === this.max}>\n                    <wcs-mat-icon icon=\"add\" size=\"s\"></wcs-mat-icon>\n                </wcs-button>\n            </Host>\n        );\n    }\n}\n"]}
+{"version":3,"file":"counter.js","sourceRoot":"","sources":["../../../src/components/counter/counter.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n    State,\n    Watch\n} from '@stencil/core';\nimport { isEndKey, isHomeKey, isKeydown, isKeyup } from '../../utils/helpers';\nimport { CounterChangeEventDetail, isWcsCounterSize, WcsCounterSize, WcsCounterSizeValues } from './counter-interface';\n\nconst ANIMATION_DURATION = 0.175 // seconds\n\n/**\n * Counter component, meant to be used for small range of values (e.g : 0 - 5).<br>\n * For larger or specific ranges, please use [wcs-input (type number)](.?path=/docs/components-input--documentation)\n */\n@Component({\n    tag: 'wcs-counter',\n    styleUrl: 'counter.scss',\n    shadow: {\n        delegatesFocus: true\n    },\n})\nexport class Counter implements ComponentInterface {\n    @Element() private el!: HTMLElement;\n\n    /**\n     * Specify the size (height) of the counter.\n     */\n    @Prop({reflect: true}) size: WcsCounterSize = 'm';\n\n    /**\n     * The label of the counter.<br/>\n     * e.g. Number of passengers, train carriages, railroad tracks...\n     */\n    @Prop({mutable: false}) label!: string;\n\n    /**\n     * The minimum value of the counter.\n     * If the value of the min attribute isn't set, then the element has no minimum value.\n     */\n    @Prop({mutable: true}) min?: number;\n\n    /**\n     * The maximum value of the counter.\n     * If the value of the max attribute isn't set, then the element has no maximum value.\n     */\n    @Prop({mutable: true}) max?: number;\n\n    /**\n     * Defines by how much the counter will be incremented or decremented.\n     */\n    @Prop({mutable: true}) step: number = 1;\n\n    /**\n     * Emitted when the value of the counter has changed.\n     */\n    @Event() wcsChange!: EventEmitter<CounterChangeEventDetail>;\n\n    /**\n     * The current value of the counter.\n     */\n    @Prop({mutable: true}) value!: number;\n\n    /**\n     * Only for animation and display purpose\n     */\n    @State() private displayedValue: number;\n\n    private animateRunning = false;\n\n    /**\n     * Emitted when the counter loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    componentWillLoad() {\n        this.handleValueChange();\n\n        if (!isWcsCounterSize(this.size)) {\n            console.error(`Invalid size value for wcs-counter : \"${this.size}\". Must be one of \"${WcsCounterSizeValues.join(', ')}\"`);\n            this.size = \"m\"; // Default fallback value\n        }\n    }\n\n    /**\n     * Current value change => handle event and interval\n     */\n    @Watch('value')\n    valueChange(newVal: any, oldVal: any) {\n        if(oldVal === newVal) return;\n\n        this.handleValueChange();\n    }\n\n    private handleValueChange() {\n        this.setMinimumIfValueIsUndefinedOrNull();\n        this.ensureValueIsNotOutOfMinMax();\n        this.updateDisplayValueIfNoAnimationRunning();\n    }\n\n    private updateDisplayValueIfNoAnimationRunning() {\n        if (!this.animateRunning) {\n            this.displayedValue = this.value;\n        }\n    }\n\n    private ensureValueIsNotOutOfMinMax() {\n        if (this.max !== undefined && this.value > this.max) {\n            this.value = this.max;\n        } else if (this.min !== undefined && this.value < this.min) {\n            this.value = this.min;\n        }\n    }\n\n    private setMinimumIfValueIsUndefinedOrNull() {\n        if (this.value === undefined || this.value === null) {\n            this.value = this.min ?? 0;\n        }\n    }\n\n    onKeyDown(_event: KeyboardEvent) {\n        if (isKeyup(_event)) {\n            _event.preventDefault();\n            this.handleIncrement()\n        }\n        if (isKeydown(_event)) {\n            _event.preventDefault();\n            this.handleDecrement()\n        }\n        if (isHomeKey(_event)) {\n            _event.preventDefault();\n            if (this.min != null) {\n                this.value = this.min;\n                this.displayedValue = this.value;\n                this.notifyChange();\n            }\n        }\n        if (isEndKey(_event)) {\n            _event.preventDefault();\n            if (this.max != null) {\n                this.value = this.max;\n                this.displayedValue = this.value;\n                this.notifyChange();\n            }\n        }\n    }\n\n    private notifyChange() {\n        this.wcsChange.emit({\n            value: this.value\n        });\n    }\n    \n    private getCounterContainer = (): HTMLDivElement => {\n        return Array.from(this.el.shadowRoot.children)\n            .find(el => el.tagName === 'DIV') as HTMLDivElement;\n    }\n\n    private handleDecrement = () => {\n        if (this.min === undefined || this.value > this.min) {\n            // we set animateRunning here to prevent the watch method on value prop from affecting the displayed value\n            // before the animation runs.\n            this.animateRunning = true; \n            this.value -= this.step;\n            this.notifyChange();\n            this.animate('up');\n        }\n    };\n\n    private handleIncrement = () => {\n        if (this.max === undefined || this.value < this.max) {\n            // we set animateRunning here to prevent the watch method on value prop from affecting the displayed value\n            // before the animation runs.\n            this.animateRunning = true; \n            this.value += this.step;\n            this.notifyChange();\n            this.animate('down');\n        }\n    };\n\n    private animate = (direction: 'up' | 'down'): void => {\n        // In case someone call animate function, we want ensured that animateRunning is set to true to prevent other \n        // method to mutate the displayedValue.\n        this.animateRunning = true;  \n\n        const counterContainer = this.getCounterContainer();\n        const outliers = Array.from(counterContainer.children)\n            .filter((span: HTMLSpanElement) => span.classList.contains('outliers'));\n\n        counterContainer.classList.add('animate-' + direction);\n        outliers.forEach((span: HTMLSpanElement) => {\n            span.classList.remove('hidden')\n        });\n        setTimeout(() => {\n            counterContainer.classList.remove('animate-' + direction);\n            outliers.forEach((span: HTMLSpanElement) => {\n                span.classList.add('hidden')\n            });\n            this.displayedValue = this.value;\n\n            this.animateRunning = false;\n        }, 1000 * ANIMATION_DURATION - 20);\n    }\n\n    render() {\n        return (\n            <Host>\n                <wcs-button class=\"wcs-primary\"\n                            shape=\"round\"\n                            size=\"s\"\n                            tabindex={-1}\n                            onClick={() => this.handleDecrement()}\n                            onBlur={(event) => this.wcsBlur.emit(event)}\n                            disabled={this.value === this.min}>\n                    <wcs-mat-icon icon=\"remove\" size=\"s\"></wcs-mat-icon>\n                </wcs-button>\n                <div class=\"counter-container\">\n                    <span id=\"outlier-down\" class=\"outliers hidden\"\n                          aria-hidden=\"true\">{this.displayedValue - this.step}</span>\n                    <span tabindex=\"0\"\n                          role=\"spinbutton\"\n                          class=\"current-value\"\n                          onBlur={(event) => this.wcsBlur.emit(event)}\n                          onKeyDown={(event) => this.onKeyDown(event)}\n                          aria-valuenow={this.value}\n                          aria-valuetext={this.value}\n                          aria-valuemin={this.min}\n                          aria-valuemax={this.max}\n                          aria-label={this.label}>{this.displayedValue}</span>\n                    <span id=\"outlier-up\" class=\"outliers hidden\"\n                          aria-hidden=\"true\">{this.displayedValue + this.step}</span>\n                </div>\n                <wcs-button class=\"wcs-primary\"\n                            shape=\"round\"\n                            size=\"s\"\n                            tabindex={-1}\n                            onClick={() => this.handleIncrement()}\n                            onBlur={(event) => this.wcsBlur.emit(event)}\n                            disabled={this.value === this.max}>\n                    <wcs-mat-icon icon=\"add\" size=\"s\"></wcs-mat-icon>\n                </wcs-button>\n            </Host>\n        );\n    }\n}\n"]}

package/dist/collection/components/dropdown/dropdown.js

@@ -106,6 +106,7 @@ export class Dropdown {
   }
   static get is() { return "wcs-dropdown"; }
   static get encapsulation() { return "shadow"; }
+  static get delegatesFocus() { return true; }
   static get originalStyleUrls() {
     return {
       "$": ["dropdown.scss"]

package/dist/collection/components/dropdown/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    ComponentInterface, Element,\n    h, Host, Listen, Prop, State, Watch\n} from '@stencil/core';\nimport { SelectArrow } from '../select/select-arrow';\nimport { WcsButtonMode, WcsButtonShape } from '../button/button-interface';\nimport { createPopper, Instance } from '@popperjs/core';\nimport { WcsDropdownPlacement } from './dropdown-interface';\nimport { clickTargetIsElementOrChildren, isEscapeKey, isKeydown, isKeyup } from '../../utils/helpers';\nimport { isElementFocused } from \"../../utils/accessibility\";\n\n\n@Component({\n    tag: 'wcs-dropdown',\n    styleUrl: 'dropdown.scss',\n    shadow: true\n})\nexport class Dropdown implements ComponentInterface {\n    @Element() private el: HTMLWcsDropdownElement;\n\n    /** Hides the arrow in the button */\n    @Prop() noArrow: boolean = false;\n\n    /** Dropdown's button mode */\n    @Prop() mode: WcsButtonMode = 'stroked';\n\n    /** Dropdown's button shape */\n    @Prop() shape: WcsButtonShape = 'normal';\n\n    /** Specifies whether the dropdown button is clickable or not */\n    @Prop() disabled: boolean = false;\n\n    /** placement of the dropdown's popover */\n    @Prop() placement: WcsDropdownPlacement = 'bottom-end';\n\n    @State() private expanded = false;\n\n\n    private popper: Instance;\n\n    private buttonTextColor: string;\n\n    @Watch('placement')\n    protected placementChange() {\n        this.popper.setOptions({\n            ...this.popper.state.options,\n            placement: this.placement\n        }).then(_ => this.popper.update());\n    }\n\n    componentDidLoad() {\n        const wcsButtonElement = this.el.shadowRoot.querySelector('wcs-button');\n        const buttonWrapper = wcsButtonElement.shadowRoot.querySelector('button');\n        this.buttonTextColor = window.getComputedStyle(buttonWrapper).color;\n        const popoverDiv = this.el.shadowRoot.querySelector('.popover') as HTMLElement;\n\n\n        this.popper = createPopper(wcsButtonElement, popoverDiv, {\n            placement: this.placement,\n            modifiers: [\n                {\n                    name: 'offset',\n                    options: {\n                        offset: [0, 8]\n                    }\n                }\n            ]\n        });\n\n        if (!this.noArrow) {\n            (this.el.shadowRoot.querySelector('.arrow') as HTMLElement).style.fill = this.buttonTextColor;\n        }\n        this.fixForFirefoxBelow63();\n    }\n\n    private fixForFirefoxBelow63() {\n        // If the items appear out of the slot we place them back\n        const items = this.el.querySelectorAll('wcs-dropdown-item');\n        const container = this.el.querySelector('.container');\n        if (items.length > 0 && container) {\n            items.forEach(i => {\n                this.el.removeChild(i);\n                container.appendChild(i);\n            });\n        }\n    }\n\n    private onButtonClick(_: MouseEvent): void {\n        this.expanded = !this.expanded;\n    }\n\n    @Listen('click', {target: 'window'})\n    onWindowClickEvent(event: MouseEvent) {\n        const clickedOnDropdownOrChildren = clickTargetIsElementOrChildren(event, this.el);\n        if (this.expanded && !clickedOnDropdownOrChildren) {\n            this.expanded = false;\n        }\n    }\n\n    @Listen('wcsDropdownItemClick')\n    dropdownItemClick(_: CustomEvent<void>) {\n        this.expanded = false;\n    }\n\n    @Listen('keydown')\n    onKeyDown(evt: KeyboardEvent): void {\n        if (this.expanded && (isKeydown(evt) || isKeyup(evt))) {\n            // If the user presses an arrow key (up or down), the browser is prevented from scrolling through\n            evt.preventDefault();\n            const items = Array.from(this.el.querySelectorAll('wcs-dropdown-item'));\n            const currentFocusedItemIndex = items.findIndex(item => isElementFocused(item));\n            // If the dropdown is expended by the user, but no item is focused and the keydown is pressed\n            if (currentFocusedItemIndex === -1 && isKeydown(evt)) {\n                this.focusFirstItemIfPresent(items);\n            } else {\n                this.moveFocusedItemByDirection(items, currentFocusedItemIndex, isKeydown(evt) ? 'down' : 'up');\n            }\n        }\n        if (this.expanded && isEscapeKey(evt)) {\n            this.closeOverlayAndFocusButton();\n        }\n    }\n\n\n    private focusFirstItemIfPresent<T extends HTMLElement>(items: T[]) {\n        if (items[0]) {\n            items[0].focus();\n        }\n    }\n\n    private moveFocusedItemByDirection<T extends HTMLElement>(items: T[], currentFocusedItemIndex: number, direction: 'up' | 'down') {\n        const itemToFocus = items[(currentFocusedItemIndex) + (direction === 'down' ? 1 : -1)];\n        if (itemToFocus) {\n            itemToFocus.focus();\n        }\n    }\n\n    private closeOverlayAndFocusButton() {\n        this.expanded = !this.expanded;\n        const wcsButton = this.el.shadowRoot.querySelector('wcs-button') as HTMLWcsButtonElement;\n        wcsButton.focus();\n    }\n\n    componentDidRender() {\n        if (this.popper) {\n            this.popper.update();\n        }\n        if (!this.noArrow) {\n            (this.el.shadowRoot.querySelector('.arrow') as HTMLElement).style.fill = this.buttonTextColor;\n        }\n    }\n\n    render() {\n        return (\n            <Host>\n                <wcs-button mode={this.mode} shape={this.shape} disabled={this.disabled}\n                            onClick={($event) => this.onButtonClick($event)}>\n                    <div class=\"wcs-button-content-wrapper\">\n                        <slot name=\"placeholder\"/>\n                        {this.noArrow ? null : (<SelectArrow up={this.expanded}/>)}\n                    </div>\n                </wcs-button>\n                <div class={(this.expanded ? 'show ' : '') + 'popover'}>\n                    <div id=\"arrow\" data-popper-arrow/>\n                    <div class=\"container\">\n                        <slot name=\"item\"/>\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n}\n\n"]}
+{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    ComponentInterface, Element,\n    h, Host, Listen, Prop, State, Watch\n} from '@stencil/core';\nimport { SelectArrow } from '../select/select-arrow';\nimport { WcsButtonMode, WcsButtonShape } from '../button/button-interface';\nimport { createPopper, Instance } from '@popperjs/core';\nimport { WcsDropdownPlacement } from './dropdown-interface';\nimport { clickTargetIsElementOrChildren, isEscapeKey, isKeydown, isKeyup } from '../../utils/helpers';\nimport { isElementFocused } from \"../../utils/accessibility\";\n\n\n@Component({\n    tag: 'wcs-dropdown',\n    styleUrl: 'dropdown.scss',\n    shadow: {\n        delegatesFocus: true\n    }\n})\nexport class Dropdown implements ComponentInterface {\n    @Element() private el: HTMLWcsDropdownElement;\n\n    /** Hides the arrow in the button */\n    @Prop() noArrow: boolean = false;\n\n    /** Dropdown's button mode */\n    @Prop() mode: WcsButtonMode = 'stroked';\n\n    /** Dropdown's button shape */\n    @Prop() shape: WcsButtonShape = 'normal';\n\n    /** Specifies whether the dropdown button is clickable or not */\n    @Prop() disabled: boolean = false;\n\n    /** placement of the dropdown's popover */\n    @Prop() placement: WcsDropdownPlacement = 'bottom-end';\n\n    @State() private expanded = false;\n\n\n    private popper: Instance;\n\n    private buttonTextColor: string;\n\n    @Watch('placement')\n    protected placementChange() {\n        this.popper.setOptions({\n            ...this.popper.state.options,\n            placement: this.placement\n        }).then(_ => this.popper.update());\n    }\n\n    componentDidLoad() {\n        const wcsButtonElement = this.el.shadowRoot.querySelector('wcs-button');\n        const buttonWrapper = wcsButtonElement.shadowRoot.querySelector('button');\n        this.buttonTextColor = window.getComputedStyle(buttonWrapper).color;\n        const popoverDiv = this.el.shadowRoot.querySelector('.popover') as HTMLElement;\n\n\n        this.popper = createPopper(wcsButtonElement, popoverDiv, {\n            placement: this.placement,\n            modifiers: [\n                {\n                    name: 'offset',\n                    options: {\n                        offset: [0, 8]\n                    }\n                }\n            ]\n        });\n\n        if (!this.noArrow) {\n            (this.el.shadowRoot.querySelector('.arrow') as HTMLElement).style.fill = this.buttonTextColor;\n        }\n        this.fixForFirefoxBelow63();\n    }\n\n    private fixForFirefoxBelow63() {\n        // If the items appear out of the slot we place them back\n        const items = this.el.querySelectorAll('wcs-dropdown-item');\n        const container = this.el.querySelector('.container');\n        if (items.length > 0 && container) {\n            items.forEach(i => {\n                this.el.removeChild(i);\n                container.appendChild(i);\n            });\n        }\n    }\n\n    private onButtonClick(_: MouseEvent): void {\n        this.expanded = !this.expanded;\n    }\n\n    @Listen('click', {target: 'window'})\n    onWindowClickEvent(event: MouseEvent) {\n        const clickedOnDropdownOrChildren = clickTargetIsElementOrChildren(event, this.el);\n        if (this.expanded && !clickedOnDropdownOrChildren) {\n            this.expanded = false;\n        }\n    }\n\n    @Listen('wcsDropdownItemClick')\n    dropdownItemClick(_: CustomEvent<void>) {\n        this.expanded = false;\n    }\n\n    @Listen('keydown')\n    onKeyDown(evt: KeyboardEvent): void {\n        if (this.expanded && (isKeydown(evt) || isKeyup(evt))) {\n            // If the user presses an arrow key (up or down), the browser is prevented from scrolling through\n            evt.preventDefault();\n            const items = Array.from(this.el.querySelectorAll('wcs-dropdown-item'));\n            const currentFocusedItemIndex = items.findIndex(item => isElementFocused(item));\n            // If the dropdown is expended by the user, but no item is focused and the keydown is pressed\n            if (currentFocusedItemIndex === -1 && isKeydown(evt)) {\n                this.focusFirstItemIfPresent(items);\n            } else {\n                this.moveFocusedItemByDirection(items, currentFocusedItemIndex, isKeydown(evt) ? 'down' : 'up');\n            }\n        }\n        if (this.expanded && isEscapeKey(evt)) {\n            this.closeOverlayAndFocusButton();\n        }\n    }\n\n\n    private focusFirstItemIfPresent<T extends HTMLElement>(items: T[]) {\n        if (items[0]) {\n            items[0].focus();\n        }\n    }\n\n    private moveFocusedItemByDirection<T extends HTMLElement>(items: T[], currentFocusedItemIndex: number, direction: 'up' | 'down') {\n        const itemToFocus = items[(currentFocusedItemIndex) + (direction === 'down' ? 1 : -1)];\n        if (itemToFocus) {\n            itemToFocus.focus();\n        }\n    }\n\n    private closeOverlayAndFocusButton() {\n        this.expanded = !this.expanded;\n        const wcsButton = this.el.shadowRoot.querySelector('wcs-button') as HTMLWcsButtonElement;\n        wcsButton.focus();\n    }\n\n    componentDidRender() {\n        if (this.popper) {\n            this.popper.update();\n        }\n        if (!this.noArrow) {\n            (this.el.shadowRoot.querySelector('.arrow') as HTMLElement).style.fill = this.buttonTextColor;\n        }\n    }\n\n    render() {\n        return (\n            <Host>\n                <wcs-button mode={this.mode} shape={this.shape} disabled={this.disabled}\n                            onClick={($event) => this.onButtonClick($event)}>\n                    <div class=\"wcs-button-content-wrapper\">\n                        <slot name=\"placeholder\"/>\n                        {this.noArrow ? null : (<SelectArrow up={this.expanded}/>)}\n                    </div>\n                </wcs-button>\n                <div class={(this.expanded ? 'show ' : '') + 'popover'}>\n                    <div id=\"arrow\" data-popper-arrow/>\n                    <div class=\"container\">\n                        <slot name=\"item\"/>\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n}\n\n"]}

package/dist/collection/components/grid/grid.js

@@ -210,7 +210,7 @@ export class Grid {
       case 'none':
         return;
       case 'single':
-        return h("td", null, h("wcs-radio", { checked: row.selected, onClick: this.onRowSelection.bind(this, row) }));
+        return h("td", null, h("wcs-radio", { checked: row.selected, onWcsRadioClick: this.onRowSelection.bind(this, row) }));
       case 'multiple':
         return h("td", null, h("wcs-checkbox", { checked: row.selected, onWcsChange: this.onRowSelection.bind(this, row) }));
     }