wcs-core 3.0.0 → 4.0.0

package/dist/esm/wcs-com-nav-submenu.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-com-nav-submenu.entry.js","mappings":"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","names":[],"sources":["./src/components/com-nav-submenu/com-nav-submenu.scss?tag=wcs-com-nav-submenu&encapsulation=shadow","./src/components/com-nav-submenu/com-nav-submenu.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    display: block;\n    padding-bottom: var(--wcs-padding);\n\n    .menu-button {\n        display: block;\n        font-weight: 500;\n        padding-left: calc(3 * var(--wcs-base-margin));\n    }\n\n    .arrow-icon {\n        display: none;\n    }\n\n    .arrow-container {\n        display: none;\n    }\n\n    .label {\n        text-transform: uppercase;\n        font-size: 16px;\n        cursor: unset;\n        font-weight: 500;\n        color: var(--wcs-gray);\n        text-decoration: none;\n    }\n\n    .drawer {\n        display: contents;\n    }\n\n    .drawer-container {\n        display: contents;\n    }\n    .drawer-description {\n        display: none;\n    }\n    .menu-items {\n        ::slotted(a):after {\n            font-family: icons;\n            padding-left: var(--wcs-base-margin);\n            font-size: 0.6rem;\n            content: \"\\f107\";\n            line-height: 1;\n            box-sizing: border-box;\n        }\n\n        ::slotted(a) {\n            user-select: none;\n            cursor: pointer;\n            text-decoration: none;\n            font-size: 16px;\n            color: var(--wcs-gray);\n            font-weight: 500;\n            display: block;\n            padding-top: calc(1.5 * var(--wcs-base-margin));\n            padding-bottom: calc(1.5 * var(--wcs-base-margin));\n            padding-left: calc(6 * var(--wcs-base-margin));\n        }\n\n        /**For mobile*/\n        ::slotted(a:focus-visible){\n            @include focus-outline(var(--wcs-primary), 2px, 0.1rem);\n        }\n\n        @supports not selector(::slotted(a:focus-visible)) {\n            ::slotted(a:focus-within) {\n                @include focus-outline(var(--wcs-primary), 2px, 0.1rem);\n            }\n        }\n    }\n}\n\n@media screen and (min-width: 576px) {\n    :host {\n        height: 100%;\n        padding-bottom: unset;\n\n        .menu-button {\n            display: flex;\n            align-items: center;\n            height: 100%;\n            cursor: pointer;\n            user-select: none;\n            font-weight: unset;\n            padding-left: unset;\n        }\n\n        .menu-button:focus-visible {\n            @include focus-outline(var(--wcs-primary), 2px, 0.1rem);\n        }\n\n        @supports not selector(.menu-button:focus-visible) {\n            @include focus-outline(var(--wcs-primary), 2px, 0.1rem);\n        }\n\n        .label {\n            text-transform: unset;\n            cursor: pointer;\n        }\n\n        .arrow-icon {\n            display: inline-block;\n            font-family: icons;\n            font-size: 0.6rem;\n            line-height: 1;\n            box-sizing: border-box;\n        }\n\n        .arrow-container {\n            display: unset;\n            margin-left: var(--wcs-base-margin);\n        }\n\n        .arrow-icon:not([data-open]) {\n            transform: rotate(90deg);\n        }\n\n        .arrow-icon[data-open] {\n            transform: rotate(-90deg);\n        }\n\n        .drawer {\n            display: none;\n            position: absolute;\n            top: 75px;\n            z-index: 8888;\n            left: 0;\n            width: 100%;\n            box-sizing: border-box;\n            padding: 50px;\n            background-color: var(--wcs-primary);\n            color: var(--wcs-white);\n        }\n\n        .drawer-content {\n            display: flex;\n            justify-content: space-between;\n            max-width: 62.5%;\n            flex: 1;\n\n            div:first-child {\n                flex: 0.8;\n            }\n\n            div {\n                max-width: 260px;\n            }\n        }\n\n        .menu-items {\n            padding: 0 80px 0 50px;\n            display: flex;\n            flex-direction: column;\n            align-items: flex-end;\n\n            ::slotted(*:not(:first-child)) {\n                margin-top: 24px;\n            }\n\n            ::slotted(a) {\n                color: var(--wcs-white);\n                font-weight: 400;\n                display: unset;\n                padding-top: unset;\n                padding-bottom: unset;\n                padding-left: unset;\n            }\n\n            ::slotted(a:focus-visible){\n                @include focus-outline(var(--wcs-white), 2px, 0.1rem);\n            }\n\n            @supports not selector(::slotted(a:focus-visible)) {\n                ::slotted(a:focus-within) {\n                    @include focus-outline(var(--wcs-white), 2px, 0.1rem);\n                }\n            }\n        }\n\n        .drawer-container {\n            display: flex;\n            max-width: var(--wcs-com-content-max-width);\n            margin: 0 auto;\n\n            h3 {\n                margin: 0 0 24px 0;\n                font-size: 1.5rem;\n                line-height: 1.25;\n                font-weight: 400;\n            }\n\n            p {\n                margin-top: 0;\n                margin-bottom: 1rem;\n                font-weight: 500;\n                font-size: 1rem;\n                line-height: 1.375;\n            }\n        }\n\n        .drawer[data-open] {\n            display: block;\n        }\n        .drawer-description {\n            display: block;\n        }\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    h,\n    Host,\n    Listen,\n    Prop,\n    State,\n    Element,\n    Event,\n    EventEmitter, Method\n} from '@stencil/core';\nimport {MenuOpenedEventDetail} from '../com-nav/com-nav-interface';\nimport {isEnterKey, isEscapeKey, isSpaceKey} from \"../../utils/helpers\";\nimport {registerCloseHandlerForFocusOutEventOn} from \"../com-nav/com-nav-utils\";\n\n\nconst WCS_COM_NAV_CATEGORY = 'WCS-COM-NAV-CATEGORY';\n\n@Component({\n    tag: 'wcs-com-nav-submenu',\n    styleUrl: 'com-nav-submenu.scss',\n    shadow: true,\n})\nexport class ComNavSubmenu implements ComponentInterface {\n    @Element() el!: HTMLWcsComNavSubmenuElement;\n    @Prop() label: string;\n    @Prop() panelTitle: string;\n    @Prop() panelDescription: string;\n    @State() menuOpen: boolean = false;\n    @Event() wcsSubmenuOpened: EventEmitter<MenuOpenedEventDetail>;\n    /**\n     * Emitted when a user click on a final navigation action.\n     *\n     * Used by the com-nav component to close the mobile menu overlay when a user click on a final action.\n     */\n    @Event() wcsClickOnFinalAction: EventEmitter<void>;\n\n    componentWillLoad(): Promise<void> | void {\n        const slottedCategoryItems = this.el.querySelectorAll(':scope > wcs-com-nav-category:not([slot])');\n        registerCloseHandlerForFocusOutEventOn<HTMLWcsComNavCategoryElement>(slottedCategoryItems, WCS_COM_NAV_CATEGORY);\n    }\n\n    /**\n     * If the user clicks outside the menu, we close it\n     */\n    @Listen('click', {target: 'window'})\n    onWindowClickEvent(_: MouseEvent) {\n        if (this.menuOpen) this.menuOpen = false;\n    }\n\n    @Listen('wcsSubmenuOpened', {target: 'window'})\n    onSubmenuOpened(event: CustomEvent<MenuOpenedEventDetail>) {\n        // If the clicked menu is not this component, we close it\n        if (event.detail.menuElement !== this.el) {\n            this.menuOpen = false;\n        }\n    }\n\n    /**\n     * Close the menu when escape is pressed\n     * @param _event keydown event\n     */\n    @Listen('keydown', {target: 'window'})\n    onEscapeKeyDown(_event: KeyboardEvent) {\n        if (isEscapeKey(_event) && this.menuOpen) {\n            this.menuOpen = false;\n        }\n    }\n\n    /**\n     * Close the menu\n     */\n    @Method()\n    async close() {\n        this.menuOpen = false;\n    }\n\n    /**\n     * Opens the menu\n     */\n    @Method()\n    async open() {\n        this.menuOpen = true;\n    }\n\n    /**\n     * When the user clicks on the menu, we do not propagate the native event and we launch a custom event to manage\n     * the closing of the menu correctly\n     */\n    private onClick(evt: MouseEvent) {\n        evt.stopPropagation();\n        this.wcsSubmenuOpened.emit({menuElement: this.el})\n    }\n\n    /**\n     * Handle key down on menu items\n     * @param _event the keyboard event\n     * @private\n     */\n    private handleMenuItemsKeyDown(_event: KeyboardEvent) {\n        if ((isSpaceKey(_event)) || isEnterKey(_event)) {\n            this.handleMenuItemsClick(_event);\n        }\n    }\n\n    /**\n     * Open the menu if it is closed and closed the menu if it is already opened\n     * @param _event the keyboard event\n     * @private\n     */\n    private handleMenuKeyDown(_event: KeyboardEvent) {\n        if ((isSpaceKey(_event)) || isEnterKey(_event)) {\n            this.menuOpen = !this.menuOpen;\n        }\n    }\n\n    private handleMenuItemsClick(evt: UIEvent) {\n        if ((evt.target as HTMLElement).tagName === 'A') {\n            this.close();\n            this.wcsClickOnFinalAction.emit();\n        }\n    }\n\n    /**\n     * handle category item click to close the submenu\n     * @param _\n     * @private\n     */\n    @Listen('wcsCategoryItemClicked')\n    // @ts-ignore\n    private wcsCategoryItemClickedHandler(_: CustomEvent<UIEvent>) {\n        // If a category item is clicked, we close the submenu drawer;\n        this.close();\n    }\n\n\n    render(): any {\n        return (\n            <Host onClick={evt => this.onClick(evt)}>\n                <div tabindex={screen.width < 576 ? \"-1\" : \"0\"}\n                     onClick={_ => this.menuOpen = !this.menuOpen}\n                     onKeyDown={evt => this.handleMenuKeyDown(evt)}\n                     class=\"menu-button\">\n                    <span class=\"label\">{this.label}</span><span class=\"arrow-container\"><span\n                    class=\"arrow-icon\" data-open={this.menuOpen}>&#xf107;</span></span>\n                </div>\n                <div class=\"drawer\" data-open={this.menuOpen} tabIndex={-1}>\n                    <div class=\"drawer-container\">\n                        <div class=\"drawer-content\">\n                            <div class=\"drawer-description\">\n                                <h3>{this.panelTitle}</h3>\n                                <p>{this.panelDescription}</p>\n                            </div>\n                            <div class=\"menu-items\"\n                                 onClick={(evt) => this.handleMenuItemsClick(evt)}\n                                 onKeyDown={evt => this.handleMenuItemsKeyDown(evt)}>\n                                <slot/>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n\n\n}\n"],"version":3}
+{"file":"wcs-com-nav-submenu.entry.js","mappings":"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","names":[],"sources":["./src/components/com-nav-submenu/com-nav-submenu.scss?tag=wcs-com-nav-submenu&encapsulation=shadow","./src/components/com-nav-submenu/com-nav-submenu.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    display: block;\n    padding-bottom: var(--wcs-padding);\n\n    .menu-button {\n        display: block;\n        font-weight: 500;\n        padding-left: calc(3 * var(--wcs-base-margin));\n    }\n\n    .arrow-icon {\n        display: none;\n    }\n\n    .arrow-container {\n        display: none;\n    }\n\n    .label {\n        text-transform: uppercase;\n        font-size: 16px;\n        cursor: unset;\n        font-weight: 500;\n        color: var(--wcs-gray);\n        text-decoration: none;\n    }\n\n    .drawer {\n        display: contents;\n    }\n\n    .drawer-container {\n        display: contents;\n    }\n    .drawer-description {\n        display: none;\n    }\n    .menu-items {\n        ::slotted(a):after {\n            font-family: icons;\n            padding-left: var(--wcs-base-margin);\n            font-size: 0.6rem;\n            content: \"\\f107\";\n            line-height: 1;\n            box-sizing: border-box;\n        }\n\n        ::slotted(a) {\n            user-select: none;\n            cursor: pointer;\n            text-decoration: none;\n            font-size: 16px;\n            color: var(--wcs-gray);\n            font-weight: 500;\n            display: block;\n            padding-top: calc(1.5 * var(--wcs-base-margin));\n            padding-bottom: calc(1.5 * var(--wcs-base-margin));\n            padding-left: calc(6 * var(--wcs-base-margin));\n        }\n\n        /**For mobile*/\n        ::slotted(a:focus-visible){\n            @include focus-outline(var(--wcs-primary), 2px, 0.1rem);\n        }\n\n        @supports not selector(::slotted(a:focus-visible)) {\n            ::slotted(a:focus-within) {\n                @include focus-outline(var(--wcs-primary), 2px, 0.1rem);\n            }\n        }\n    }\n}\n\n@media screen and (min-width: 576px) {\n    :host {\n        height: 100%;\n        padding-bottom: unset;\n\n        .menu-button {\n            display: flex;\n            align-items: center;\n            height: 100%;\n            cursor: pointer;\n            user-select: none;\n            font-weight: unset;\n            padding-left: unset;\n        }\n\n        .menu-button:focus-visible {\n            @include focus-outline(var(--wcs-primary), 2px, 0.1rem);\n        }\n\n        @supports not selector(.menu-button:focus-visible) {\n            @include focus-outline(var(--wcs-primary), 2px, 0.1rem);\n        }\n\n        .label {\n            text-transform: unset;\n            cursor: pointer;\n        }\n\n        .arrow-icon {\n            display: inline-block;\n            font-family: icons;\n            font-size: 0.6rem;\n            line-height: 1;\n            box-sizing: border-box;\n        }\n\n        .arrow-container {\n            display: unset;\n            margin-left: var(--wcs-base-margin);\n        }\n\n        .arrow-icon:not([data-open]) {\n            transform: rotate(90deg);\n        }\n\n        .arrow-icon[data-open] {\n            transform: rotate(-90deg);\n        }\n\n        .drawer {\n            display: none;\n            position: absolute;\n            top: 75px;\n            z-index: 8888;\n            left: 0;\n            width: 100%;\n            box-sizing: border-box;\n            padding: 50px;\n            background-color: var(--wcs-primary);\n            color: var(--wcs-white);\n        }\n\n        .drawer-content {\n            display: flex;\n            justify-content: space-between;\n            max-width: 62.5%;\n            flex: 1;\n\n            div:first-child {\n                flex: 0.8;\n            }\n\n            div {\n                max-width: 260px;\n            }\n        }\n\n        .menu-items {\n            padding: 0 80px 0 50px;\n            display: flex;\n            flex-direction: column;\n            align-items: flex-end;\n\n            ::slotted(*:not(:first-child)) {\n                margin-top: 24px;\n            }\n\n            ::slotted(a) {\n                color: var(--wcs-white);\n                font-weight: 400;\n                display: unset;\n                padding-top: unset;\n                padding-bottom: unset;\n                padding-left: unset;\n            }\n\n            ::slotted(a:focus-visible){\n                @include focus-outline(var(--wcs-white), 2px, 0.1rem);\n            }\n\n            @supports not selector(::slotted(a:focus-visible)) {\n                ::slotted(a:focus-within) {\n                    @include focus-outline(var(--wcs-white), 2px, 0.1rem);\n                }\n            }\n        }\n\n        .drawer-container {\n            display: flex;\n            max-width: var(--wcs-com-content-max-width);\n            margin: 0 auto;\n\n            h3 {\n                margin: 0 0 24px 0;\n                font-size: 1.5rem;\n                line-height: 1.25;\n                font-weight: 400;\n            }\n\n            p {\n                margin-top: 0;\n                margin-bottom: 1rem;\n                font-weight: 500;\n                font-size: 1rem;\n                line-height: 1.375;\n            }\n        }\n\n        .drawer[data-open] {\n            display: block;\n        }\n        .drawer-description {\n            display: block;\n        }\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    h,\n    Host,\n    Listen,\n    Prop,\n    State,\n    Element,\n    Event,\n    EventEmitter, Method\n} from '@stencil/core';\nimport {MenuOpenedEventDetail} from '../com-nav/com-nav-interface';\nimport {isEnterKey, isEscapeKey, isSpaceKey} from \"../../utils/helpers\";\nimport {registerCloseHandlerForFocusOutEventOn} from \"../com-nav/com-nav-utils\";\n\n\nconst WCS_COM_NAV_CATEGORY = 'WCS-COM-NAV-CATEGORY';\n\n@Component({\n    tag: 'wcs-com-nav-submenu',\n    styleUrl: 'com-nav-submenu.scss',\n    shadow: true,\n})\nexport class ComNavSubmenu implements ComponentInterface {\n    @Element() private el!: HTMLWcsComNavSubmenuElement;\n    @Prop() label: string;\n    @Prop() panelTitle: string;\n    @Prop() panelDescription: string;\n    @State() private menuOpen: boolean = false;\n    @Event() wcsSubmenuOpened: EventEmitter<MenuOpenedEventDetail>;\n    /**\n     * Emitted when a user click on a final navigation action.\n     *\n     * Used by the com-nav component to close the mobile menu overlay when a user click on a final action.\n     */\n    @Event() wcsClickOnFinalAction: EventEmitter<void>;\n\n    componentWillLoad(): Promise<void> | void {\n        const slottedCategoryItems = this.el.querySelectorAll(':scope > wcs-com-nav-category:not([slot])');\n        registerCloseHandlerForFocusOutEventOn<HTMLWcsComNavCategoryElement>(slottedCategoryItems, WCS_COM_NAV_CATEGORY);\n    }\n\n    /**\n     * If the user clicks outside the menu, we close it\n     */\n    @Listen('click', {target: 'window'})\n    onWindowClickEvent(_: MouseEvent) {\n        if (this.menuOpen) this.menuOpen = false;\n    }\n\n    @Listen('wcsSubmenuOpened', {target: 'window'})\n    onSubmenuOpened(event: CustomEvent<MenuOpenedEventDetail>) {\n        // If the clicked menu is not this component, we close it\n        if (event.detail.menuElement !== this.el) {\n            this.menuOpen = false;\n        }\n    }\n\n    /**\n     * Close the menu when escape is pressed\n     * @param _event keydown event\n     */\n    @Listen('keydown', {target: 'window'})\n    onEscapeKeyDown(_event: KeyboardEvent) {\n        if (isEscapeKey(_event) && this.menuOpen) {\n            this.menuOpen = false;\n        }\n    }\n\n    /**\n     * Close the menu\n     */\n    @Method()\n    async close() {\n        this.menuOpen = false;\n    }\n\n    /**\n     * Opens the menu\n     */\n    @Method()\n    async open() {\n        this.menuOpen = true;\n    }\n\n    /**\n     * When the user clicks on the menu, we do not propagate the native event and we launch a custom event to manage\n     * the closing of the menu correctly\n     */\n    private onClick(evt: MouseEvent) {\n        evt.stopPropagation();\n        this.wcsSubmenuOpened.emit({menuElement: this.el})\n    }\n\n    /**\n     * Handle key down on menu items\n     * @param _event the keyboard event\n     * @private\n     */\n    private handleMenuItemsKeyDown(_event: KeyboardEvent) {\n        if ((isSpaceKey(_event)) || isEnterKey(_event)) {\n            this.handleMenuItemsClick(_event);\n        }\n    }\n\n    /**\n     * Open the menu if it is closed and closed the menu if it is already opened\n     * @param _event the keyboard event\n     * @private\n     */\n    private handleMenuKeyDown(_event: KeyboardEvent) {\n        if ((isSpaceKey(_event)) || isEnterKey(_event)) {\n            this.menuOpen = !this.menuOpen;\n        }\n    }\n\n    private handleMenuItemsClick(evt: UIEvent) {\n        if ((evt.target as HTMLElement).tagName === 'A') {\n            this.close();\n            this.wcsClickOnFinalAction.emit();\n        }\n    }\n\n    /**\n     * handle category item click to close the submenu\n     * @param _\n     * @private\n     */\n    @Listen('wcsCategoryItemClicked')\n    // @ts-ignore\n    private wcsCategoryItemClickedHandler(_: CustomEvent<UIEvent>) {\n        // If a category item is clicked, we close the submenu drawer;\n        this.close();\n    }\n\n\n    render(): any {\n        return (\n            <Host onClick={evt => this.onClick(evt)}>\n                <div tabindex={screen.width < 576 ? \"-1\" : \"0\"}\n                     onClick={_ => this.menuOpen = !this.menuOpen}\n                     onKeyDown={evt => this.handleMenuKeyDown(evt)}\n                     class=\"menu-button\">\n                    <span class=\"label\">{this.label}</span><span class=\"arrow-container\"><span\n                    class=\"arrow-icon\" data-open={this.menuOpen}>&#xf107;</span></span>\n                </div>\n                <div class=\"drawer\" data-open={this.menuOpen} tabIndex={-1}>\n                    <div class=\"drawer-container\">\n                        <div class=\"drawer-content\">\n                            <div class=\"drawer-description\">\n                                <h3>{this.panelTitle}</h3>\n                                <p>{this.panelDescription}</p>\n                            </div>\n                            <div class=\"menu-items\"\n                                 onClick={(evt) => this.handleMenuItemsClick(evt)}\n                                 onKeyDown={evt => this.handleMenuItemsKeyDown(evt)}>\n                                <slot/>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n\n\n}\n"],"version":3}

package/dist/esm/wcs-com-nav.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-com-nav.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,o/EAAo/E;;ACGtgF,MAAM,4BAA4B,GAAG,qBAAqB,CAAC;MAO9C,MAAM;;;IASP,kDAA6C,GAAY,KAAK,CAAC;;0BAHpC,KAAK;;;EAKhC,mBAAmB;IACvB,IAAI,CAAC,cAAc,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC;GAC9C;EAED,oBAAoB;;IAChB,MAAA,IAAI,CAAC,cAAc,0CAAE,UAAU,EAAE,CAAC;GACrC;EAED,iBAAiB;IACb,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,KAAK;MAC1C,MAAM,EAAE,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC;MAChC,MAAM,YAAY,GAAG,EAAE,CAAC,KAAK,GAAG,EAAE,CAAC,KAAK,CAAC;MACzC,MAAM,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC;MAC5B,IAAI,EAAE,CAAC,KAAK,GAAG,GAAG,IAAI,WAAW,GAAG,YAAY,CAAC,EAAE;QAC/C,IAAI,CAAC,mBAAmB,GAAG,QAAQ,CAAC;OACvC;WAAM;QACH,IAAI,CAAC,mBAAmB,GAAG,SAAS,CAAC;OACxC;KACJ,CAAC,CAAC;IACH,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAE3C,MAAM,qBAAqB,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,kEAAkE,CAAC,CAAC;IAC3H,sCAAsC,CAA8B,qBAAqB,EAAE,4BAA4B,CAAC,CAAC;GAC5H;EAED,kBAAkB;IACd,IAAI,CAAC,uDAAuD,EAAE,CAAC;GAClE;EAGO,uDAAuD;IAC3D,IAAI,IAAI,CAAC,6CAA6C;MAAE,OAAO;IAE/D,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,kBAAkB,CAAoB,CAAC;IACzF,IAAI,QAAQ,EAAE;MACV,IAAI,CAAC,6CAA6C,GAAG,IAAI,CAAC;;MAE1D,QAAQ,CAAC,gBAAgB,EAAE,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,KAAK,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC;QAC5D,CAAC,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC;UACzB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;SAC/B,CAAC,CAAA;OACL,CACJ,CAAC;KAEL;GACJ;;;;;;;;;EAWD,oBAAoB;IAChB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;GAC/B;;;EAKD,uBAAuB;IACnB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;GAC/B;;EAID,MAAM;IACF,QACI,EAAC,IAAI,QACD,WAAK,KAAK,EAAC,WAAW,IAClB,WAAK,KAAK,EAAC,gBAAgB,IACvB,WAAK,KAAK,EAAC,UAAU,IAAE,IAAI,CAAC,OAAO,EAC/B,YAAM,IAAI,EAAC,UAAU,GAAE,CACrB,EACN,WAAK,KAAK,EAAC,UAAU,IAChB,IAAI,CAAC,mBAAmB,KAAK,SAAS,GAAG,eAAO,GAAG,IAAI,CACtD,CACJ,EACN,WAAK,KAAK,EAAC,iBAAiB,IACxB,YAAM,IAAI,EAAC,SAAS,GAAE,EACtB,YAAM,EAAE,EAAC,kBAAkB,sBAAmB,IAAI,CAAC,cAAc,EAC3D,OAAO,EAAE,MAAM,IAAI,CAAC,mBAAmB,EAAE,GAAS,CACtD,CACJ,EACN,WAAK,KAAK,EAAC,gBAAgB,sBAAmB,IAAI,CAAC,cAAc,IAC5D,IAAI,CAAC,mBAAmB,KAAK,QAAQ,GAAG,eAAO,GAAG,IAAI,CACrD,CACH,EACT;GACL;;;;;;;","names":[],"sources":["./src/components/com-nav/com-nav.scss?tag=wcs-com-nav&encapsulation=shadow","./src/components/com-nav/com-nav.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    display: block;\n    position: relative;\n    height: 75px;\n    border-bottom: solid 1px var(--wcs-text-light);\n\n    .container {\n        padding: 0 var(--wcs-padding);\n        height: 100%;\n        display: flex;\n        align-items: center;\n        flex-direction: row;\n        justify-content: space-between;\n    }\n\n    .container-left {\n        display: flex;\n        height: 100%;\n        align-items: center;\n        flex-direction: row;\n    }\n\n    .container-right {\n        display: flex;\n        align-items: center;\n    }\n\n    .app-name {\n        font-weight: 400;\n        font-size: 1.5rem;\n        line-height: 1.25;\n        color: var(--wcs-gray);\n    }\n\n    .menu-bar {\n        display: none;\n    }\n\n    ::slotted(a) {\n        padding-top: calc(1.5 * var(--wcs-base-margin));\n        padding-bottom: calc(1.5 * var(--wcs-base-margin));\n        padding-left: calc(3 * var(--wcs-base-margin));\n        display: flex;\n        align-items: center;\n        height: 100%;\n        font-size: 16px;\n        cursor: pointer;\n        font-weight: 500;\n        color: var(--wcs-gray);\n        text-decoration: none;\n    }\n\n    ::slotted(a):after {\n        font-family: icons;\n        padding-left: var(--wcs-base-margin);\n        font-size: 0.6rem;\n        content: \"\\f107\";\n        line-height: 1;\n        box-sizing: border-box;\n    }\n\n    ::slotted(a:focus-visible) {\n        @include focus-outline(var(--wcs-primary), 2px, 0.1rem);\n    }\n\n    @supports not selector(::slotted(a:focus-visible)) {\n        ::slotted(a:focus-within) {\n            @include focus-outline(var(--wcs-primary), 2px, 0.1rem);\n        }\n    }\n\n    #mobile-menu-icon {\n        height: 24px;\n        padding-left: calc(2 * var(--wcs-base-margin));\n        margin-left: var(--wcs-base-margin);\n        border-left: solid 1px var(--wcs-text-light);\n    }\n\n    #mobile-menu-icon:after {\n        font-family: icons;\n        font-size: 24px;\n        cursor: pointer;\n        content: \"\\f198\";\n        line-height: 1;\n        box-sizing: border-box;\n    }\n        #mobile-menu-icon[data-mobile-open]:after {\n            content: \"\\f129\";\n        }\n    .mobile-overlay {\n        display: none;\n    }\n\n    .mobile-overlay[data-mobile-open] {\n        padding-top: calc(2 * var(--wcs-base-margin));\n        padding-bottom: calc(2 * var(--wcs-base-margin));\n        position: relative;\n        top: 0;\n        left: 0;\n        right: 0;\n        display: block;\n        z-index: 9999;\n        background-color: var(--wcs-white);\n    }\n}\n\n@media screen and (min-width: 576px) {\n    :host {\n        .container {\n            margin: 0 auto;\n            max-width: var(--wcs-com-content-max-width);\n        }\n\n        .menu-bar {\n            display: flex;\n            align-items: center;\n            height: 100%;\n            margin-left: 50px;\n\n            ::slotted(*:not(:first-child)) {\n                margin-left: 40px;\n            }\n\n            ::slotted(a:focus-visible) {\n                @include focus-outline(var(--wcs-primary), 2px, 0.1rem);\n            }\n\n            @supports not selector(::slotted(a:focus-visible)) {\n                ::slotted(a:focus-within) {\n                    @include focus-outline(var(--wcs-primary), 2px, 0.1rem);\n                }\n            }\n        }\n\n        #mobile-menu-icon {\n            display: none;\n        }\n\n        .mobile-overlay {\n            display: none !important;\n        }\n\n        ::slotted(a) {\n            padding-top: unset;\n            padding-bottom: unset;\n            padding-left: unset;\n        }\n    }\n}\n","import {Component, Host, h, Prop, Element, ComponentInterface, State, Listen} from '@stencil/core';\nimport {registerCloseHandlerForFocusOutEventOn} from \"./com-nav-utils\";\n\nconst WCS_COM_NAV_SUBMENU_TAG_NAME = 'WCS-COM-NAV-SUBMENU';\n\n@Component({\n    tag: 'wcs-com-nav',\n    styleUrl: 'com-nav.scss',\n    shadow: true,\n})\nexport class ComNav implements ComponentInterface {\n    @Element() el!: HTMLWcsComNavElement;\n\n    /** Name of the application to be displayed in the menu bar */\n    @Prop() appName: string;\n\n    @State() mobileMenuOpen: boolean = false;\n    @State() currentActiveSizing: 'desktop' | 'mobile';\n    resizeObserver: ResizeObserver;\n    private hasAlreadyRegisteredClickHandlerOnSlottedLink: boolean = false;\n\n    private mobileMenuIconClick() {\n        this.mobileMenuOpen = !this.mobileMenuOpen;\n    }\n\n    disconnectedCallback() {\n        this.resizeObserver?.disconnect();\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.resizeObserver = new ResizeObserver(entry => {\n            const cr = entry[0].contentRect;\n            const paddingRight = cr.right - cr.width;\n            const paddingLeft = cr.left;\n            if (cr.width < 576 - (paddingLeft + paddingRight)) {\n                this.currentActiveSizing = 'mobile';\n            } else {\n                this.currentActiveSizing = 'desktop';\n            }\n        });\n        this.resizeObserver.observe(document.body);\n\n        const slottedNavigableItems = this.el.querySelectorAll(':scope > wcs-com-nav-submenu:not([slot]), :scope > a:not([slot])');\n        registerCloseHandlerForFocusOutEventOn<HTMLWcsComNavSubmenuElement>(slottedNavigableItems, WCS_COM_NAV_SUBMENU_TAG_NAME);\n    }\n\n    componentDidRender() {\n        this.registerHandlerToCloseMobileMenuOnClickOnSlottedLinkTag();\n    }\n\n\n    private registerHandlerToCloseMobileMenuOnClickOnSlottedLinkTag() {\n        if (this.hasAlreadyRegisteredClickHandlerOnSlottedLink) return;\n\n        const mainSlot = this.el.shadowRoot.querySelector('slot:not([name])') as HTMLSlotElement;\n        if (mainSlot) {\n            this.hasAlreadyRegisteredClickHandlerOnSlottedLink = true;\n            // If the user click on a `a` tag, we close the mobile menu overlay.\n            mainSlot.assignedElements().filter(e => e.tagName === 'A').forEach(a => {\n                    a.addEventListener('click', _ => {\n                        this.mobileMenuOpen = false;\n                    })\n                }\n            );\n\n        }\n    }\n\n    //region Handlers for mobile menu overlay visibility\n    //\n    // In mobile mode, we have only one global drawer to display the menu, that why we have to listen the clicks events\n    // in the root component (this component). In desktop mode, all submenus and categories manage their drawer its\n    // opening state.\n    //\n    // We listen to the click events fired by the sebmenu component and we close the mobile menu.\n    // In desktop mode, the submenu itself manages the closing of the menu.\n    @Listen('wcsClickOnFinalAction')\n    onClickOnFinalAction() {\n        this.mobileMenuOpen = false;\n    }\n\n    // We also listen click events on the category menu items, to close the mobile menu.\n    // In desktop mode, the category itself manages the closing of the menu.\n    @Listen('wcsCategoryItemClicked')\n    onClickOnFinalActionCat() {\n        this.mobileMenuOpen = false;\n    }\n\n    //endregion\n\n    render() {\n        return (\n            <Host>\n                <div class=\"container\">\n                    <div class=\"container-left\">\n                        <div class=\"app-name\">{this.appName}\n                            <slot name=\"app-name\"/>\n                        </div>\n                        <div class=\"menu-bar\">\n                            {this.currentActiveSizing === 'desktop' ? <slot/> : null}\n                        </div>\n                    </div>\n                    <div class=\"container-right\">\n                        <slot name=\"actions\"/>\n                        <span id=\"mobile-menu-icon\" data-mobile-open={this.mobileMenuOpen}\n                              onClick={() => this.mobileMenuIconClick()}></span>\n                    </div>\n                </div>\n                <div class=\"mobile-overlay\" data-mobile-open={this.mobileMenuOpen}>\n                    {this.currentActiveSizing === 'mobile' ? <slot/> : null}\n                </div>\n            </Host>\n        );\n    }\n\n}\n"],"version":3}
+{"file":"wcs-com-nav.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,o/EAAo/E;;ACGtgF,MAAM,4BAA4B,GAAG,qBAAqB,CAAC;MAO9C,MAAM;;;IASP,kDAA6C,GAAY,KAAK,CAAC;;0BAH5B,KAAK;;;EAKxC,mBAAmB;IACvB,IAAI,CAAC,cAAc,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC;GAC9C;EAED,oBAAoB;;IAChB,MAAA,IAAI,CAAC,cAAc,0CAAE,UAAU,EAAE,CAAC;GACrC;EAED,iBAAiB;IACb,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,KAAK;MAC1C,MAAM,EAAE,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC;MAChC,MAAM,YAAY,GAAG,EAAE,CAAC,KAAK,GAAG,EAAE,CAAC,KAAK,CAAC;MACzC,MAAM,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC;MAC5B,IAAI,EAAE,CAAC,KAAK,GAAG,GAAG,IAAI,WAAW,GAAG,YAAY,CAAC,EAAE;QAC/C,IAAI,CAAC,mBAAmB,GAAG,QAAQ,CAAC;OACvC;WAAM;QACH,IAAI,CAAC,mBAAmB,GAAG,SAAS,CAAC;OACxC;KACJ,CAAC,CAAC;IACH,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAE3C,MAAM,qBAAqB,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,kEAAkE,CAAC,CAAC;IAC3H,sCAAsC,CAA8B,qBAAqB,EAAE,4BAA4B,CAAC,CAAC;GAC5H;EAED,kBAAkB;IACd,IAAI,CAAC,uDAAuD,EAAE,CAAC;GAClE;EAGO,uDAAuD;IAC3D,IAAI,IAAI,CAAC,6CAA6C;MAAE,OAAO;IAE/D,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,kBAAkB,CAAoB,CAAC;IACzF,IAAI,QAAQ,EAAE;MACV,IAAI,CAAC,6CAA6C,GAAG,IAAI,CAAC;;MAE1D,QAAQ,CAAC,gBAAgB,EAAE,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,KAAK,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC;QAC5D,CAAC,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC;UACzB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;SAC/B,CAAC,CAAA;OACL,CACJ,CAAC;KAEL;GACJ;;;;;;;;;EAWD,oBAAoB;IAChB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;GAC/B;;;EAKD,uBAAuB;IACnB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;GAC/B;;EAID,MAAM;IACF,QACI,EAAC,IAAI,QACD,WAAK,KAAK,EAAC,WAAW,IAClB,WAAK,KAAK,EAAC,gBAAgB,IACvB,WAAK,KAAK,EAAC,UAAU,IAAE,IAAI,CAAC,OAAO,EAC/B,YAAM,IAAI,EAAC,UAAU,GAAE,CACrB,EACN,WAAK,KAAK,EAAC,UAAU,IAChB,IAAI,CAAC,mBAAmB,KAAK,SAAS,GAAG,eAAO,GAAG,IAAI,CACtD,CACJ,EACN,WAAK,KAAK,EAAC,iBAAiB,IACxB,YAAM,IAAI,EAAC,SAAS,GAAE,EACtB,YAAM,EAAE,EAAC,kBAAkB,sBAAmB,IAAI,CAAC,cAAc,EAC3D,OAAO,EAAE,MAAM,IAAI,CAAC,mBAAmB,EAAE,GAAS,CACtD,CACJ,EACN,WAAK,KAAK,EAAC,gBAAgB,sBAAmB,IAAI,CAAC,cAAc,IAC5D,IAAI,CAAC,mBAAmB,KAAK,QAAQ,GAAG,eAAO,GAAG,IAAI,CACrD,CACH,EACT;GACL;;;;;;;","names":[],"sources":["./src/components/com-nav/com-nav.scss?tag=wcs-com-nav&encapsulation=shadow","./src/components/com-nav/com-nav.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    display: block;\n    position: relative;\n    height: 75px;\n    border-bottom: solid 1px var(--wcs-text-light);\n\n    .container {\n        padding: 0 var(--wcs-padding);\n        height: 100%;\n        display: flex;\n        align-items: center;\n        flex-direction: row;\n        justify-content: space-between;\n    }\n\n    .container-left {\n        display: flex;\n        height: 100%;\n        align-items: center;\n        flex-direction: row;\n    }\n\n    .container-right {\n        display: flex;\n        align-items: center;\n    }\n\n    .app-name {\n        font-weight: 400;\n        font-size: 1.5rem;\n        line-height: 1.25;\n        color: var(--wcs-gray);\n    }\n\n    .menu-bar {\n        display: none;\n    }\n\n    ::slotted(a) {\n        padding-top: calc(1.5 * var(--wcs-base-margin));\n        padding-bottom: calc(1.5 * var(--wcs-base-margin));\n        padding-left: calc(3 * var(--wcs-base-margin));\n        display: flex;\n        align-items: center;\n        height: 100%;\n        font-size: 16px;\n        cursor: pointer;\n        font-weight: 500;\n        color: var(--wcs-gray);\n        text-decoration: none;\n    }\n\n    ::slotted(a):after {\n        font-family: icons;\n        padding-left: var(--wcs-base-margin);\n        font-size: 0.6rem;\n        content: \"\\f107\";\n        line-height: 1;\n        box-sizing: border-box;\n    }\n\n    ::slotted(a:focus-visible) {\n        @include focus-outline(var(--wcs-primary), 2px, 0.1rem);\n    }\n\n    @supports not selector(::slotted(a:focus-visible)) {\n        ::slotted(a:focus-within) {\n            @include focus-outline(var(--wcs-primary), 2px, 0.1rem);\n        }\n    }\n\n    #mobile-menu-icon {\n        height: 24px;\n        padding-left: calc(2 * var(--wcs-base-margin));\n        margin-left: var(--wcs-base-margin);\n        border-left: solid 1px var(--wcs-text-light);\n    }\n\n    #mobile-menu-icon:after {\n        font-family: icons;\n        font-size: 24px;\n        cursor: pointer;\n        content: \"\\f198\";\n        line-height: 1;\n        box-sizing: border-box;\n    }\n        #mobile-menu-icon[data-mobile-open]:after {\n            content: \"\\f129\";\n        }\n    .mobile-overlay {\n        display: none;\n    }\n\n    .mobile-overlay[data-mobile-open] {\n        padding-top: calc(2 * var(--wcs-base-margin));\n        padding-bottom: calc(2 * var(--wcs-base-margin));\n        position: relative;\n        top: 0;\n        left: 0;\n        right: 0;\n        display: block;\n        z-index: 9999;\n        background-color: var(--wcs-white);\n    }\n}\n\n@media screen and (min-width: 576px) {\n    :host {\n        .container {\n            margin: 0 auto;\n            max-width: var(--wcs-com-content-max-width);\n        }\n\n        .menu-bar {\n            display: flex;\n            align-items: center;\n            height: 100%;\n            margin-left: 50px;\n\n            ::slotted(*:not(:first-child)) {\n                margin-left: 40px;\n            }\n\n            ::slotted(a:focus-visible) {\n                @include focus-outline(var(--wcs-primary), 2px, 0.1rem);\n            }\n\n            @supports not selector(::slotted(a:focus-visible)) {\n                ::slotted(a:focus-within) {\n                    @include focus-outline(var(--wcs-primary), 2px, 0.1rem);\n                }\n            }\n        }\n\n        #mobile-menu-icon {\n            display: none;\n        }\n\n        .mobile-overlay {\n            display: none !important;\n        }\n\n        ::slotted(a) {\n            padding-top: unset;\n            padding-bottom: unset;\n            padding-left: unset;\n        }\n    }\n}\n","import {Component, Host, h, Prop, Element, ComponentInterface, State, Listen} from '@stencil/core';\nimport {registerCloseHandlerForFocusOutEventOn} from \"./com-nav-utils\";\n\nconst WCS_COM_NAV_SUBMENU_TAG_NAME = 'WCS-COM-NAV-SUBMENU';\n\n@Component({\n    tag: 'wcs-com-nav',\n    styleUrl: 'com-nav.scss',\n    shadow: true,\n})\nexport class ComNav implements ComponentInterface {\n    @Element() private el!: HTMLWcsComNavElement;\n\n    /** Name of the application to be displayed in the menu bar */\n    @Prop() appName: string;\n\n    @State() private mobileMenuOpen: boolean = false;\n    @State() private currentActiveSizing: 'desktop' | 'mobile';\n    private resizeObserver: ResizeObserver;\n    private hasAlreadyRegisteredClickHandlerOnSlottedLink: boolean = false;\n\n    private mobileMenuIconClick() {\n        this.mobileMenuOpen = !this.mobileMenuOpen;\n    }\n\n    disconnectedCallback() {\n        this.resizeObserver?.disconnect();\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.resizeObserver = new ResizeObserver(entry => {\n            const cr = entry[0].contentRect;\n            const paddingRight = cr.right - cr.width;\n            const paddingLeft = cr.left;\n            if (cr.width < 576 - (paddingLeft + paddingRight)) {\n                this.currentActiveSizing = 'mobile';\n            } else {\n                this.currentActiveSizing = 'desktop';\n            }\n        });\n        this.resizeObserver.observe(document.body);\n\n        const slottedNavigableItems = this.el.querySelectorAll(':scope > wcs-com-nav-submenu:not([slot]), :scope > a:not([slot])');\n        registerCloseHandlerForFocusOutEventOn<HTMLWcsComNavSubmenuElement>(slottedNavigableItems, WCS_COM_NAV_SUBMENU_TAG_NAME);\n    }\n\n    componentDidRender() {\n        this.registerHandlerToCloseMobileMenuOnClickOnSlottedLinkTag();\n    }\n\n\n    private registerHandlerToCloseMobileMenuOnClickOnSlottedLinkTag() {\n        if (this.hasAlreadyRegisteredClickHandlerOnSlottedLink) return;\n\n        const mainSlot = this.el.shadowRoot.querySelector('slot:not([name])') as HTMLSlotElement;\n        if (mainSlot) {\n            this.hasAlreadyRegisteredClickHandlerOnSlottedLink = true;\n            // If the user click on a `a` tag, we close the mobile menu overlay.\n            mainSlot.assignedElements().filter(e => e.tagName === 'A').forEach(a => {\n                    a.addEventListener('click', _ => {\n                        this.mobileMenuOpen = false;\n                    })\n                }\n            );\n\n        }\n    }\n\n    //region Handlers for mobile menu overlay visibility\n    //\n    // In mobile mode, we have only one global drawer to display the menu, that why we have to listen the clicks events\n    // in the root component (this component). In desktop mode, all submenus and categories manage their drawer its\n    // opening state.\n    //\n    // We listen to the click events fired by the sebmenu component and we close the mobile menu.\n    // In desktop mode, the submenu itself manages the closing of the menu.\n    @Listen('wcsClickOnFinalAction')\n    onClickOnFinalAction() {\n        this.mobileMenuOpen = false;\n    }\n\n    // We also listen click events on the category menu items, to close the mobile menu.\n    // In desktop mode, the category itself manages the closing of the menu.\n    @Listen('wcsCategoryItemClicked')\n    onClickOnFinalActionCat() {\n        this.mobileMenuOpen = false;\n    }\n\n    //endregion\n\n    render() {\n        return (\n            <Host>\n                <div class=\"container\">\n                    <div class=\"container-left\">\n                        <div class=\"app-name\">{this.appName}\n                            <slot name=\"app-name\"/>\n                        </div>\n                        <div class=\"menu-bar\">\n                            {this.currentActiveSizing === 'desktop' ? <slot/> : null}\n                        </div>\n                    </div>\n                    <div class=\"container-right\">\n                        <slot name=\"actions\"/>\n                        <span id=\"mobile-menu-icon\" data-mobile-open={this.mobileMenuOpen}\n                              onClick={() => this.mobileMenuIconClick()}></span>\n                    </div>\n                </div>\n                <div class=\"mobile-overlay\" data-mobile-open={this.mobileMenuOpen}>\n                    {this.currentActiveSizing === 'mobile' ? <slot/> : null}\n                </div>\n            </Host>\n        );\n    }\n\n}\n"],"version":3}

package/dist/esm/wcs-counter.entry.js

@@ -0,0 +1,126 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-dc4d96d4.js';
+import { c as isKeyup, d as isKeydown, e as isHomeKey, f as isEndKey } from './helpers-1f7170dd.js';
+
+const WcsCounterSizeValues = ['m', 'l']; // as const keyword is used to infer and preserve the exact literal values of an array or object.
+function isWcsCounterSize(size) {
+  // @ts-ignore : ignore size type, as it is checked with WcsInputSizeValues
+  return WcsCounterSizeValues.includes(size);
+}
+
+const counterCss = "@keyframes spin-animation-up{0%{transform:translateY(0);transform-origin:center;opacity:1}50%{opacity:0.5}100%{transform:translateY(30px);transform-origin:center;opacity:1}}@keyframes spin-animation-down{0%{transform:translateY(0);transform-origin:center;opacity:1}50%{opacity:0.5}100%{transform:translateY(-30px);transform-origin:center;opacity:1}}:host{box-sizing:border-box;height:var(--wcs-counter-host-height);--wcs-input-icon-color:var(--wcs-text-medium);--wcs-internal-input-border-radius:calc(var(--wcs-border-radius) * 10);--wcs-internal-input-border-width:2px;font-family:var(--wcs-font-sans-serif);font-size:var(--wcs-counter-font-size);font-weight:bold;display:flex;align-items:center;padding:var(--wcs-counter-host-padding);width:fit-content;overflow:hidden;border-radius:var(--wcs-internal-input-border-radius);background-color:var(--wcs-light);border:var(--wcs-internal-input-border-width) solid var(--wcs-light);background-clip:padding-box}:host .counter-container{height:var(--wcs-counter-host-height);display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 calc(2 * var(--wcs-base-margin));position:relative}:host .outliers{position:absolute}:host #outlier-down{top:calc(var(--wcs-counter-host-height) / 2 * -1)}:host #outlier-up{bottom:calc(var(--wcs-counter-host-height) / 2 * -1)}:host span.current-value:focus-visible{outline:2px dashed var(--wcs-primary);outline-offset:4px;border-radius:0.1rem}:host .animate-up{animation:spin-animation-up 0.175s ease-in-out}:host .animate-down{animation:spin-animation-down 0.175s ease-in-out}:host .hidden{opacity:0}:host([size=m]){--wcs-counter-host-padding:4px;--wcs-counter-host-height:var(--wcs-size-m);--wcs-counter-font-size:1rem}:host([size=l]){--wcs-counter-host-padding:8px;--wcs-counter-host-height:var(--wcs-size-l);--wcs-counter-font-size:1.0625rem}";
+
+const ANIMATION_DURATION = 0.175; // seconds
+const Counter = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.wcsChange = createEvent(this, "wcsChange", 7);
+    this.wcsBlur = createEvent(this, "wcsBlur", 7);
+    this.getCounterContainer = () => {
+      return Array.from(this.el.shadowRoot.children)
+        .find(el => el.tagName === 'DIV');
+    };
+    this.handleDecrement = () => {
+      if (this.min === undefined || this.currentValue > this.min) {
+        this.currentValue -= this.step;
+        this.animate('up');
+      }
+    };
+    this.handleIncrement = () => {
+      if (this.max === undefined || this.currentValue < this.max) {
+        this.currentValue += this.step;
+        this.animate('down');
+      }
+    };
+    this.animate = (direction) => {
+      const counterContainer = this.getCounterContainer();
+      const outliers = Array.from(counterContainer.children)
+        .filter((span) => span.classList.contains('outliers'));
+      counterContainer.classList.add('animate-' + direction);
+      outliers.forEach((span) => {
+        span.classList.remove('hidden');
+      });
+      setTimeout(() => {
+        counterContainer.classList.remove('animate-' + direction);
+        outliers.forEach((span) => {
+          span.classList.add('hidden');
+        });
+        this.displayedValue = this.currentValue;
+      }, 1000 * ANIMATION_DURATION - 20);
+    };
+    this.size = 'm';
+    this.label = undefined;
+    this.min = undefined;
+    this.max = undefined;
+    this.step = 1;
+    this.value = undefined;
+    this.currentValue = undefined;
+    this.displayedValue = undefined;
+  }
+  componentWillLoad() {
+    var _a, _b;
+    this.currentValue = (_b = (_a = this.value) !== null && _a !== void 0 ? _a : this.min) !== null && _b !== void 0 ? _b : 0;
+    this.displayedValue = this.currentValue;
+    if (!isWcsCounterSize(this.size)) {
+      console.error(`Invalid size value for wcs-counter : "${this.size}". Must be one of "${WcsCounterSizeValues.join(', ')}"`);
+      this.size = "m"; // Default fallback value
+    }
+  }
+  /**
+   * Value change programmatically => update currentValue and displayedValue
+   */
+  valueChanged() {
+    var _a, _b;
+    this.currentValue = (_b = (_a = this.value) !== null && _a !== void 0 ? _a : this.min) !== null && _b !== void 0 ? _b : 0;
+    this.displayedValue = this.currentValue;
+  }
+  /**
+   * Current value change => handle event and interval
+   */
+  currentValueChanged(newVal, oldVal) {
+    if (this.max !== undefined && this.currentValue > this.max) {
+      this.currentValue = this.max;
+    }
+    else if (this.min !== undefined && this.currentValue < this.min) {
+      this.currentValue = this.min;
+    }
+    // Emit event only if value has changed and if it's not at component initialization
+    if (newVal !== oldVal && oldVal !== undefined) {
+      this.wcsChange.emit({
+        value: this.currentValue
+      });
+    }
+  }
+  onKeyDown(_event) {
+    if (isKeyup(_event)) {
+      _event.preventDefault();
+      this.handleIncrement();
+    }
+    if (isKeydown(_event)) {
+      _event.preventDefault();
+      this.handleDecrement();
+    }
+    if (isHomeKey(_event)) {
+      _event.preventDefault();
+      this.currentValue = this.min;
+      this.displayedValue = this.currentValue;
+    }
+    if (isEndKey(_event)) {
+      _event.preventDefault();
+      this.currentValue = this.max;
+      this.displayedValue = this.currentValue;
+    }
+  }
+  render() {
+    return (h(Host, null, h("wcs-button", { class: "wcs-primary", shape: "round", size: "s", tabindex: -1, onClick: () => this.handleDecrement(), onBlur: (event) => this.wcsBlur.emit(event), disabled: this.currentValue === this.min }, h("wcs-mat-icon", { icon: "remove", size: "s" })), h("div", { class: "counter-container" }, h("span", { id: "outlier-down", class: "outliers hidden", "aria-hidden": "true" }, this.displayedValue - this.step), h("span", { tabindex: "0", role: "spinbutton", class: "current-value", onBlur: (event) => this.wcsBlur.emit(event), onKeyDown: (event) => this.onKeyDown(event), "aria-valuenow": this.currentValue, "aria-valuetext": this.currentValue, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-label": this.label }, this.displayedValue), h("span", { id: "outlier-up", class: "outliers hidden", "aria-hidden": "true" }, this.displayedValue + this.step)), h("wcs-button", { class: "wcs-primary", shape: "round", size: "s", tabindex: -1, onClick: () => this.handleIncrement(), onBlur: (event) => this.wcsBlur.emit(event), disabled: this.currentValue === this.max }, h("wcs-mat-icon", { icon: "add", size: "s" }))));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "value": ["valueChanged"],
+    "currentValue": ["currentValueChanged"]
+  }; }
+};
+Counter.style = counterCss;
+
+export { Counter as wcs_counter };
+
+//# sourceMappingURL=wcs-counter.entry.js.map

package/dist/esm/wcs-counter.entry.js.map

@@ -0,0 +1 @@
+{"file":"wcs-counter.entry.js","mappings":"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","names":[],"sources":["./src/components/counter/counter-interface.ts","./src/components/counter/counter.scss?tag=wcs-counter&encapsulation=shadow","./src/components/counter/counter.tsx"],"sourcesContent":["import { WcsSize } from \"../../shared-types\";\n\nexport interface CounterChangeEventDetail {\n    value: number;\n}\n\nexport const WcsCounterSizeValues = ['m', 'l'] as const; // as const keyword is used to infer and preserve the exact literal values of an array or object.\n\nexport type WcsCounterSize = Extract<WcsSize, typeof WcsCounterSizeValues[number]>;\n\nexport function isWcsCounterSize(size: string): size is WcsCounterSize {\n    // @ts-ignore : ignore size type, as it is checked with WcsInputSizeValues\n    return WcsCounterSizeValues.includes(size);\n}\n","@import '../../style/focus-outline.scss';\n\n@keyframes spin-animation-up {\n    0% {\n        transform: translateY(0);\n        transform-origin: center;\n        opacity: 1;\n    }\n    50% {\n        opacity: 0.5;\n    }\n    100% {\n        transform: translateY(30px);\n        transform-origin: center;\n        opacity: 1;\n    }\n}\n\n@keyframes spin-animation-down {\n    0% {\n        transform: translateY(0);\n        transform-origin: center;\n        opacity: 1;\n    }\n    50% {\n        opacity: 0.5;\n    }\n    100% {\n        transform: translateY(-30px);\n        transform-origin: center;\n        opacity: 1;\n    }\n}\n\n:host {\n    box-sizing: border-box;\n    height: var(--wcs-counter-host-height);\n    --wcs-input-icon-color: var(--wcs-text-medium);\n    --wcs-internal-input-border-radius: calc(var(--wcs-border-radius) * 10); // 80 px\n    --wcs-internal-input-border-width: 2px;\n    font-family: var(--wcs-font-sans-serif);\n    font-size: var(--wcs-counter-font-size);\n    font-weight: bold;\n    display: flex;\n    align-items: center;\n    padding: var(--wcs-counter-host-padding);\n    width: fit-content;\n    overflow: hidden;\n    border-radius: var(--wcs-internal-input-border-radius);\n    background-color: var(--wcs-light);\n    border: var(--wcs-internal-input-border-width) solid var(--wcs-light);\n    background-clip: padding-box;\n\n    .counter-container {\n        height: var(--wcs-counter-host-height);\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        margin: 0 calc(2* var(--wcs-base-margin));\n        position: relative;\n    }\n\n    .outliers {\n        position: absolute;\n    }\n\n    #outlier-down {\n        top: calc((var(--wcs-counter-host-height) / 2) * -1);\n    }\n\n    #outlier-up {\n        bottom: calc((var(--wcs-counter-host-height) / 2) * -1);\n    }\n\n    span.current-value {\n        &:focus-visible {\n            @include focus-outline;\n        }\n    }\n\n    .animate-up {\n        animation: spin-animation-up 0.175s ease-in-out;\n    }\n\n    .animate-down {\n        animation: spin-animation-down 0.175s ease-in-out;\n    }\n\n    .hidden {\n        opacity: 0;\n    }\n}\n\n:host([size='m']) { // Default\n    --wcs-counter-host-padding: 4px;\n    --wcs-counter-host-height: var(--wcs-size-m);\n    --wcs-counter-font-size: 1rem;\n}\n\n:host([size='l']) {\n    --wcs-counter-host-padding: 8px;\n    --wcs-counter-host-height: var(--wcs-size-l);\n    --wcs-counter-font-size: 1.0625rem;\n}\n","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     * Allow to change currentValue programmatically\n     */\n    @Prop({mutable: true}) value?: number;\n\n    /**\n     * The current value of the counter.\n     */\n    @State() private currentValue!: number;\n\n    /**\n     * Only for animation and display purpose\n     */\n    @State() private displayedValue: number;\n\n    /**\n     * Emitted when the counter loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    componentWillLoad() {\n        this.currentValue = this.value ?? this.min ?? 0;\n        this.displayedValue = this.currentValue;\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     * Value change programmatically => update currentValue and displayedValue\n     */\n    @Watch('value')\n    valueChanged() {\n        this.currentValue = this.value ?? this.min ?? 0;\n        this.displayedValue = this.currentValue;\n    }\n\n    /**\n     * Current value change => handle event and interval\n     */\n    @Watch('currentValue')\n    currentValueChanged(newVal: any, oldVal: any) {\n        if (this.max !== undefined && this.currentValue > this.max) {\n            this.currentValue = this.max;\n        } else if (this.min !== undefined && this.currentValue < this.min) {\n            this.currentValue = this.min;\n        }\n\n        // Emit event only if value has changed and if it's not at component initialization\n        if (newVal !== oldVal && oldVal !== undefined) {\n            this.wcsChange.emit({\n                value: this.currentValue\n            });\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            this.currentValue = this.min;\n            this.displayedValue = this.currentValue;\n        }\n        if (isEndKey(_event)) {\n            _event.preventDefault();\n            this.currentValue = this.max;\n            this.displayedValue = this.currentValue;\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.currentValue > this.min) {\n            this.currentValue -= this.step;\n            this.animate('up');\n        }\n    };\n\n    private handleIncrement = () => {\n        if (this.max === undefined || this.currentValue < this.max) {\n            this.currentValue += this.step;\n            this.animate('down');\n        }\n    };\n\n    private animate = (direction: 'up' | 'down') => {\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.currentValue;\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.currentValue === 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.currentValue}\n                          aria-valuetext={this.currentValue}\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.currentValue === this.max}>\n                    <wcs-mat-icon icon=\"add\" size=\"s\"></wcs-mat-icon>\n                </wcs-button>\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/esm/wcs-dropdown-item.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-dc4d96d4.js';
-import { i as isSpaceKey, a as isEnterKey } from './helpers-e9b73aad.js';
+import { i as isSpaceKey, a as isEnterKey } from './helpers-1f7170dd.js';
 
 const dropdownItemCss = "wcs-dropdown-item{display:block;padding:0 var(--wcs-padding);font-weight:500;cursor:pointer;height:42px;line-height:42px}wcs-dropdown-item:hover,wcs-dropdown-item:focus{color:var(--wcs-primary);background-color:var(--wcs-light)}";
 

package/dist/esm/wcs-dropdown.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-dc4d96d4.js';
 import { S as SelectArrow } from './select-arrow-81d069f7.js';
-import { c as clickTargetIsElementOrChildren, d as isKeydown, e as isKeyup, b as isEscapeKey } from './helpers-e9b73aad.js';
+import { g as clickTargetIsElementOrChildren, d as isKeydown, c as isKeyup, b as isEscapeKey } from './helpers-1f7170dd.js';
 import { c as createPopper } from './popper-c7cca1bc.js';
 
 function isElementFocused(element) {

package/dist/esm/wcs-dropdown.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-dropdown.entry.js","mappings":"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","names":[],"sources":["./src/utils/accessibility.ts","./src/components/dropdown/dropdown.scss?tag=wcs-dropdown&encapsulation=shadow","./src/components/dropdown/dropdown.tsx"],"sourcesContent":["export function isElementFocused(element: HTMLElement) {\n    return element === document.activeElement;\n}\n",":host {\n    display: flex;\n}\n\nwcs-button {\n    --wcs-button-padding: 8px 10px 8px 16px !important;\n}\n:host([no-arrow]) {\n    wcs-button {\n        --wcs-button-padding: 8px 16px 8px 16px !important;\n    }\n}\n\n\n:host([shape=small]) {\n    wcs-button {\n        --wcs-button-padding: 2px 10px 2px 16px !important;\n    }\n}\n\n:host([shape=small][no-arrow]) {\n    wcs-button {\n        --wcs-button-padding: 2px 16px 2px 16px !important;\n    }\n}\n\n.wcs-button-content-wrapper {\n    display: flex;\n}\n\n.popover {\n    display: none;\n    border: 1px solid #d7d7d7;\n    border-radius: var(--wcs-border-radius);\n    background-color: var(--wcs-white);\n    z-index: 9999;\n}\n\n.show {\n    display: block;\n}\n\n// XXX: So that item hover background does not overflow\n.container {\n    border-radius: inherit;\n    overflow: hidden;\n    padding: calc(var(--wcs-padding) / 2) 0;\n    background-color: var(--wcs-white);\n}\n\n#arrow,\n#arrow::before {\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    background: inherit;\n    border: solid 1px #d7d7d7;\n}\n\n#arrow {\n    visibility: hidden;\n    z-index: -1;\n}\n\n#arrow::before {\n    visibility: visible;\n    content: '';\n    transform: rotate(45deg);\n}\n\n.popover[data-popper-placement^='top'] > #arrow {\n    bottom: -5px;\n}\n\n.popover[data-popper-placement^='bottom'] > #arrow {\n    top: -6px;\n}\n\n.popover[data-popper-placement^='left'] > #arrow {\n    right: -4px;\n}\n\n.popover[data-popper-placement^='right'] > #arrow {\n    left: -6px;\n}\n","import {\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() 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() 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":"wcs-dropdown.entry.js","mappings":"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","names":[],"sources":["./src/utils/accessibility.ts","./src/components/dropdown/dropdown.scss?tag=wcs-dropdown&encapsulation=shadow","./src/components/dropdown/dropdown.tsx"],"sourcesContent":["export function isElementFocused(element: HTMLElement) {\n    return element === document.activeElement;\n}\n",":host {\n    display: flex;\n}\n\nwcs-button {\n    --wcs-button-padding: 8px 10px 8px 16px !important;\n}\n:host([no-arrow]) {\n    wcs-button {\n        --wcs-button-padding: 8px 16px 8px 16px !important;\n    }\n}\n\n\n:host([shape=small]) {\n    wcs-button {\n        --wcs-button-padding: 2px 10px 2px 16px !important;\n    }\n}\n\n:host([shape=small][no-arrow]) {\n    wcs-button {\n        --wcs-button-padding: 2px 16px 2px 16px !important;\n    }\n}\n\n.wcs-button-content-wrapper {\n    display: flex;\n}\n\n.popover {\n    display: none;\n    border: 1px solid #d7d7d7;\n    border-radius: var(--wcs-border-radius);\n    background-color: var(--wcs-white);\n    z-index: 9999;\n}\n\n.show {\n    display: block;\n}\n\n// XXX: So that item hover background does not overflow\n.container {\n    border-radius: inherit;\n    overflow: hidden;\n    padding: calc(var(--wcs-padding) / 2) 0;\n    background-color: var(--wcs-white);\n}\n\n#arrow,\n#arrow::before {\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    background: inherit;\n    border: solid 1px #d7d7d7;\n}\n\n#arrow {\n    visibility: hidden;\n    z-index: -1;\n}\n\n#arrow::before {\n    visibility: visible;\n    content: '';\n    transform: rotate(45deg);\n}\n\n.popover[data-popper-placement^='top'] > #arrow {\n    bottom: -5px;\n}\n\n.popover[data-popper-placement^='bottom'] > #arrow {\n    top: -6px;\n}\n\n.popover[data-popper-placement^='left'] > #arrow {\n    right: -4px;\n}\n\n.popover[data-popper-placement^='right'] > #arrow {\n    left: -6px;\n}\n","import {\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}

package/dist/esm/wcs-editable-field.entry.js

@@ -1,6 +1,12 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-dc4d96d4.js';
 
-const editableFieldCss = ":host{display:block}:host .display-none{display:none !important}:host .label{margin-bottom:var(--wcs-base-margin);font-weight:500;font-size:16px;color:var(--wcs-gray-light)}:host .edit-container{display:flex;width:100%}:host .display-container{min-height:24px;white-space:break-spaces;display:flex;justify-content:space-between;align-items:center;background-color:var(--wcs-light);border-radius:var(--wcs-border-radius);font-size:1rem;line-height:1.5;font-weight:500;color:var(--wcs-gray);padding:calc(var(--wcs-padding) / 2 - 1px) calc(var(--wcs-padding) - 2px);transition:0.175s all;border:solid 2px transparent}:host .display-container wcs-mat-icon{display:none}:host .load-container{white-space:pre;display:flex;justify-content:space-between;background-color:var(--wcs-light);border-radius:var(--wcs-border-radius);font-size:1rem;line-height:1.5;font-weight:500;color:var(--wcs-gray);padding:calc(var(--wcs-padding) / 2 - 1px) calc(var(--wcs-padding) - 2px);transition:0.175s all;border:solid 2px transparent;align-items:center}:host wcs-spinner{height:24px;width:24px}:host .readonly-icon{fill:var(--wcs-text-medium)}:host([readonly]) .display-container{color:var(--wcs-gray-light)}:host(:not([readonly])) .display-container:hover{color:var(--wcs-primary);cursor:pointer;border:dashed 2px var(--wcs-primary)}:host(:not([readonly])) .display-container:hover wcs-mat-icon{display:flex;align-items:center}";
+const WcsEditableFieldSizeValues = ['m', 'l']; // as const keyword is used to infer and preserve the exact literal values of an array or object.
+function isWcsEditableFieldSize(size) {
+  // @ts-ignore : ignore size type, as it is checked with WcsEditableFieldSizeValues
+  return WcsEditableFieldSizeValues.includes(size);
+}
+
+const editableFieldCss = ":host{display:block}:host .display-none{display:none !important}:host .label{margin-bottom:var(--wcs-base-margin);font-weight:500;font-size:var(--wcs-editable-field-font-size);color:var(--wcs-gray-light)}:host .edit-container{display:flex;width:100%}:host .display-container{box-sizing:border-box;height:var(--wcs-editable-field-host-height);white-space:break-spaces;display:flex;justify-content:space-between;align-items:center;background-color:var(--wcs-light);border-radius:var(--wcs-border-radius);font-size:var(--wcs-editable-field-font-size);line-height:1.5;font-weight:500;color:var(--wcs-gray);padding:var(--wcs-editable-field-host-padding);transition:0.175s all;border:solid 2px transparent}:host .display-container wcs-mat-icon{display:none}:host .load-container{box-sizing:border-box;height:var(--wcs-editable-field-host-height);white-space:pre;display:flex;justify-content:space-between;background-color:var(--wcs-light);border-radius:var(--wcs-border-radius);font-size:var(--wcs-editable-field-font-size);line-height:1.5;font-weight:500;color:var(--wcs-gray);padding:var(--wcs-editable-field-host-padding);transition:0.175s all;border:solid 2px transparent;align-items:center}:host wcs-spinner{height:24px;width:24px}:host .readonly-icon{fill:var(--wcs-text-medium)}:host([readonly]) .display-container{color:var(--wcs-gray-light)}:host(:not([readonly])) .display-container:hover{color:var(--wcs-primary);cursor:pointer;border:dashed 2px var(--wcs-primary)}:host(:not([readonly])) .display-container:hover wcs-mat-icon{display:flex;align-items:center}:host([size=l]){--wcs-editable-field-host-padding:var(--wcs-padding-l) calc(var(--wcs-padding) - var(--wcs-border-size));--wcs-editable-field-host-height:var(--wcs-size-l);--wcs-editable-field-font-size:1.0625rem}:host([size=m]){--wcs-editable-field-host-padding:var(--wcs-padding-m) calc(var(--wcs-padding) - var(--wcs-border-size));--wcs-editable-field-host-height:var(--wcs-size-m);--wcs-editable-field-font-size:1rem}";
 
 var EditableComponentState;
 (function (EditableComponentState) {
@@ -12,7 +18,8 @@ const EditableField = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.wcsChange = createEvent(this, "wcsChange", 7);
-    this.ignoreNextChangeEvent = false;
+    // fixme: why this attr is never read?
+    // ignoreNextChangeEvent: boolean = false;
     this.spiedElement = null;
     this.currentValue = null;
     this.currentState = EditableComponentState.DISPLAY;
@@ -23,9 +30,14 @@ const EditableField = class {
     this.validateFn = undefined;
     this.formatFn = undefined;
     this.errorMsg = null;
+    this.size = 'm';
     this.isError = false;
   }
   componentWillLoad() {
+    if (!isWcsEditableFieldSize(this.size)) {
+      console.error(`Invalid size value for wcs-editable-field : "${this.size}". Must be one of "${WcsEditableFieldSizeValues.join(', ')}"`);
+      this.size = "m"; // Default fallback value
+    }
     this.currentValue = this.value;
   }
   componentDidRender() {
@@ -161,7 +173,8 @@ const EditableField = class {
   onDisplayContainerClick() {
     if (this.currentState === EditableComponentState.DISPLAY && this.readonly === false) {
       this.currentState = EditableComponentState.EDIT;
-      this.ignoreNextChangeEvent = true;
+      // fixme: why this attr is never read?
+      // this.ignoreNextChangeEvent = true;
       this.spiedElement['value'] = this.currentValue;
       if (this.validateFn) {
         this.isError = !this.validateFn(this.currentValue);

package/dist/esm/wcs-editable-field.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-editable-field.entry.js","mappings":"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","names":[],"sources":["./src/components/editable-field/editable-field.scss?tag=wcs-editable-field&encapsulation=shadow","./src/components/editable-field/editable-field.tsx"],"sourcesContent":[":host {\n    display: block;\n\n    .display-none {\n        display: none !important;\n    }\n\n    .label {\n        margin-bottom: var(--wcs-base-margin);\n        font-weight: 500;\n        font-size: 16px;\n        color: var(--wcs-gray-light);\n    }\n\n    .edit-container {\n        display: flex;\n        width: 100%;\n    }\n\n    .display-container {\n        wcs-mat-icon {\n            display: none;\n        }\n        min-height: 24px;\n        white-space: break-spaces;\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        background-color: var(--wcs-light);\n        border-radius: var(--wcs-border-radius);\n        font-size: 1rem;\n        line-height: 1.5;\n        font-weight: 500;\n        color: var(--wcs-gray);\n        padding: calc(calc(var(--wcs-padding) / 2) - 1px) calc(var(--wcs-padding) - 2px);\n        transition: 0.175s all;\n        border: solid 2px transparent;\n    }\n\n    .load-container {\n        white-space: pre;\n        display: flex;\n        justify-content: space-between;\n        background-color: var(--wcs-light);\n        border-radius: var(--wcs-border-radius);\n        font-size: 1rem;\n        line-height: 1.5;\n        font-weight: 500;\n        color: var(--wcs-gray);\n        padding: calc(calc(var(--wcs-padding) / 2) - 1px) calc(var(--wcs-padding) - 2px);\n        transition: 0.175s all;\n        border: solid 2px transparent;\n        align-items: center;\n    }\n\n    wcs-spinner {\n        height: 24px;\n        width: 24px;\n    }\n\n    .readonly-icon {\n        fill: var(--wcs-text-medium);\n    }\n}\n\n:host([readonly]) {\n    .display-container {\n        color: var(--wcs-gray-light);\n    }\n}\n\n:host(:not([readonly])) {\n    .display-container:hover {\n        wcs-mat-icon {\n            display: flex;\n            align-items: center;\n        }\n        color: var(--wcs-primary);\n        cursor: pointer;\n        border: dashed 2px var(--wcs-primary);\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    EventEmitter,\n    h,\n    Prop,\n    Event,\n    State,\n    Host,\n    Element,\n    Watch, Listen\n} from '@stencil/core';\nimport { EditableComponentUpdateEvent, EditableFieldType, FormatFn, ValidateFn } from './editable-field-interface';\n\nenum EditableComponentState {\n    DISPLAY,\n    EDIT,\n    LOAD\n}\n\n@Component({\n    tag: 'wcs-editable-field',\n    styleUrl: 'editable-field.scss',\n    shadow: true\n})\nexport class EditableField implements ComponentInterface {\n    @Element() el!: HTMLWcsEditableFieldElement;\n\n    @State() currentState: EditableComponentState = EditableComponentState.DISPLAY;\n    /**\n     * Specifies which component is used for editing\n     */\n    @Prop() type: EditableFieldType = 'input';\n    /**\n     * Label of the field\n     */\n    @Prop() label!: string;\n    /**\n     * event called at each (valid) update of the field.\n     */\n    @Event() wcsChange!: EventEmitter<EditableComponentUpdateEvent>;\n    /**\n     * Specify whether the field is editable or not\n     */\n    @Prop() readonly: boolean = false;\n    /**\n     * Initial value of the field\n     */\n    @Prop({mutable: true}) value: any;\n    /**\n     * Function to customize the validation of the data during the update\n     */\n    @Prop() validateFn: ValidateFn<any>;\n    /**\n     * Function used to format the value\n     */\n    @Prop() formatFn: FormatFn<any>;\n\n    /**\n     * Error message displayed under the field if validation failed.\n     */\n    @Prop() errorMsg: string = null;\n\n    @State() isError: boolean = false;\n\n    ignoreNextChangeEvent: boolean = false;\n    spiedElement: HTMLElement = null;\n    currentValue: any = null;\n\n    componentWillLoad(): Promise<void> | void {\n        this.currentValue = this.value;\n    }\n\n    componentDidRender() {\n        const assignedElements = (this.el.shadowRoot.querySelector('slot') as HTMLSlotElement).assignedElements();\n        switch (this.type) {\n            case 'input':\n                this.initWithInput(assignedElements);\n                break;\n            case 'textarea':\n                this.initWithTextArea(assignedElements);\n                break;\n            case 'select':\n                this.initWithSelect(assignedElements)\n                break;\n        }\n    }\n\n    private initWithInput(assignedElements: Element[]) {\n        const element = assignedElements.filter(x => {\n            return x.tagName === 'WCS-INPUT'\n        })[0];\n        if (!element) throw new Error('You must provide a slotted input element to handle edition');\n        this.spiedElement = element as HTMLElement;\n        this.addChangeHandlerForWcsComponents(this.spiedElement);\n        this.spiedElement.addEventListener('keydown', (event: KeyboardEvent) => {\n            if (event.key === 'Enter') {\n                this.sendCurrentValue();\n            }\n            if (event.key === 'Escape') {\n                this.discardChanges();\n            }\n        })\n    }\n\n    private initWithTextArea(assignedElements: Element[]) {\n        const element = assignedElements.filter(x => {\n            return x.tagName === 'WCS-TEXTAREA'\n        })[0];\n        if (!element) throw new Error('You must provide a slotted textarea element to handle edition');\n        this.spiedElement = element as HTMLElement;\n        this.addChangeHandlerForWcsComponents(this.spiedElement);\n        this.spiedElement.addEventListener('keydown', (event: KeyboardEvent) => {\n            if (event.key === 'Enter' && event.ctrlKey) {\n                this.sendCurrentValue();\n            }\n            if (event.key === 'Escape') {\n                this.discardChanges();\n            }\n        })\n    }\n\n    private initWithSelect(assignedElements: Element[]) {\n        const element = assignedElements.filter(x => {\n            return x.tagName === 'WCS-SELECT'\n        })[0];\n        if (!element) throw new Error('You must provide a slotted select element to handle edition');\n        this.spiedElement = element as HTMLElement;\n        this.addChangeHandlerForWcsComponents(this.spiedElement);\n    }\n\n    /**\n     * This method subscribes the component to the change events produced by the other WCS components\n     * (provided by the user in slot)\n     * @private\n     */\n    private addChangeHandlerForWcsComponents(elt: HTMLElement) {\n        elt.addEventListener('wcsChange', (event: CustomEvent) => {\n            event.stopImmediatePropagation();\n            this.currentValue = event.detail.value;\n            if (this.validateFn) {\n                this.isError = !this.validateFn(this.currentValue);\n            }\n        });\n    }\n\n\n    private sendCurrentValue() {\n        if (this.currentState === EditableComponentState.EDIT) {\n            if (this.value === this.currentValue) {\n                this.currentState = EditableComponentState.DISPLAY\n            } else {\n                this.isError = this.validateFn ? !this.validateFn(this.currentValue) : false;\n                if (!this.isError) {\n                    this.currentState = EditableComponentState.LOAD;\n                    this.wcsChange.emit({\n                        newValue: this.currentValue,\n                        successHandler: () => this.forceDisplayStateAndValidate(),\n                        errorhandler: () => this.errorHandler()\n                    });\n                }\n            }\n        }\n    }\n\n    private discardChanges() {\n        this.currentValue = this.value;\n        this.currentState = EditableComponentState.DISPLAY;\n        this.isError = false;\n    }\n\n\n    forceDisplayStateAndValidate() {\n        if (this.currentState === EditableComponentState.LOAD) {\n            this.value = this.currentValue;\n            this.currentState = EditableComponentState.DISPLAY;\n        } else {\n            throw new Error('You cannot set display state from ' + EditableComponentState[this.currentState] + ' state');\n        }\n    }\n\n    @Listen('click', {target: 'window'})\n    onWindowClickEvent(event: MouseEvent) {\n        if (!this.clickInsideComponent(event)) {\n            if (this.currentState === EditableComponentState.EDIT) {\n                if (this.isError) {\n                    this.discardChanges();\n                } else {\n                    this.sendCurrentValue();\n                }\n            }\n        }\n    }\n\n    private clickInsideComponent(event: MouseEvent) {\n        return event.x >= this.el.getBoundingClientRect().x && event.x <= this.el.getBoundingClientRect().x + this.el.getBoundingClientRect().width\n            && event.y >= this.el.getBoundingClientRect().y && event.y <= this.el.getBoundingClientRect().y + this.el.getBoundingClientRect().height;\n    }\n\n    /**\n     * discard changes and force component state to DISPLAY\n     * <br/>\n     * This method must be call when component is in LOAD state\n     */\n\n    errorHandler() {\n        this.discardChanges();\n    }\n\n    @Watch('value')\n    onValueChange(): void {\n        this.currentState = EditableComponentState.DISPLAY;\n    }\n\n    private onDisplayContainerClick() {\n        if (this.currentState === EditableComponentState.DISPLAY && this.readonly === false) {\n            this.currentState = EditableComponentState.EDIT;\n            this.ignoreNextChangeEvent = true;\n            this.spiedElement['value'] = this.currentValue;\n            if (this.validateFn) {\n                this.isError = !this.validateFn(this.currentValue);\n            }\n            // We wait until the element is displayed on the page otherwise the focus does not work\n            const DELAY_FOR_RENDER = 20;\n            setTimeout(() => {\n                if (this.type === 'input') {\n                    (this.spiedElement as HTMLWcsInputElement).setFocus();\n                } else if (this.type === 'textarea') {\n                    (this.spiedElement as HTMLWcsTextareaElement).fitContent();\n                    (this.spiedElement as HTMLWcsTextareaElement).setFocus();\n                }\n            }, DELAY_FOR_RENDER)\n        }\n    }\n\n    render(): any {\n        const {formattedValue, formattedCurrentValue} = this.formatValues();\n        return (\n            <Host>\n                <div class=\"label\">{this.label}</div>\n                <div\n                    class={'display-container ' + (this.currentState !== EditableComponentState.DISPLAY ? 'display-none' : '')}\n                    onClick={() => this.onDisplayContainerClick()}>\n                    {formattedValue}\n                    <wcs-mat-icon icon=\"edit\" size=\"s\"></wcs-mat-icon>\n                    {this.readonly ? this.getReadonlySvgIcon() : null}\n                </div>\n                <div\n                    class={'load-container ' + (this.currentState !== EditableComponentState.LOAD ? 'display-none' : '')}>\n                    {formattedCurrentValue}\n                    <wcs-spinner></wcs-spinner>\n                </div>\n                <wcs-form-field is-error={this.isError}\n                                class={'edit-container ' + (this.currentState !== EditableComponentState.EDIT ? 'display-none' : '')}>\n                    <slot/>\n                    {\n                        this.isError && this.errorMsg\n                            ? <wcs-error>{this.errorMsg}</wcs-error>\n                            : null\n                    }\n                </wcs-form-field>\n            </Host>\n        );\n    }\n\n    private getReadonlySvgIcon() {\n        return <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"26\" height=\"24\" viewBox=\"0 0 27 25\"\n                    class=\"readonly-icon\">\n            <path d=\"M26.79,25.05H1.21a.73.73,0,0,0,0,1.45H26.79a.73.73,0,0,0,0-1.45Z\"\n                  transform=\"translate(-0.5 -1.5)\"/>\n            <path\n                d=\"M19.8,8.87h-.61V6.73a5.23,5.23,0,0,0-10.46,0V8.87H8.2a1.63,1.63,0,0,0-1.63,1.62V21.32A1.62,1.62,0,0,0,8.2,22.94H19.8a1.62,1.62,0,0,0,1.63-1.62V10.49A1.63,1.63,0,0,0,19.8,8.87ZM10.93,6.73a3,3,0,1,1,6.06,0V8.87H10.93Zm3,14.15a5,5,0,1,1,5-5A5,5,0,0,1,14,20.88Z\"\n                transform=\"translate(-0.5 -1.5)\"/>\n            <path\n                d=\"M14,12.62a3.29,3.29,0,1,0,3.29,3.29A3.29,3.29,0,0,0,14,12.62Zm0,4.75a1.47,1.47,0,1,1,1.47-1.46A1.46,1.46,0,0,1,14,17.37Z\"\n                transform=\"translate(-0.5 -1.5)\"/>\n        </svg>;\n    }\n\n    private formatValues() {\n        let formattedValue = this.value;\n        let formattedCurrentValue = this.currentValue;\n        if (this.formatFn) {\n            formattedValue = this.formatFn(this.value);\n            formattedCurrentValue = this.formatFn(this.currentValue);\n        }\n        if (Array.isArray(this.value)) {\n            formattedValue = this.value.join(', ');\n        }\n        if (Array.isArray(this.currentValue)) {\n            formattedCurrentValue = this.currentValue.join(', ');\n        }\n        return {\n            formattedValue: (formattedValue ? (<span>{formattedValue}</span>) : (<span></span>)),\n            formattedCurrentValue: (formattedCurrentValue ? (<span>{formattedCurrentValue}</span>) : (<span></span>))\n        };\n    }\n}\n"],"version":3}
+{"file":"wcs-editable-field.entry.js","mappings":"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","names":[],"sources":["./src/components/editable-field/editable-field-interface.tsx","./src/components/editable-field/editable-field.scss?tag=wcs-editable-field&encapsulation=shadow","./src/components/editable-field/editable-field.tsx"],"sourcesContent":["import { WcsSize } from '../../shared-types';\n\nexport type ValidateFn<T> = (value: T) => boolean;\nexport type FormatFn<T> = (value: T) => string;\n\nexport interface EditableComponentUpdateEvent {\n    newValue: any; // We use any for now, but when components typings will support template, change for parameterized type\n    /**\n     * Permet de sortir de l'état LOAD pour aller vers l'état DISPLAY\n     * À n'utiliser que lorsque la valeur n'est pas systématiquement mise à jour à chaque événement.\n     */\n    successHandler: () => void;\n    errorhandler: () => void;\n}\n\nexport const WcsEditableFieldSizeValues = ['m', 'l'] as const; // as const keyword is used to infer and preserve the exact literal values of an array or object.\n\nexport type WcsEditableFieldSize = Extract<WcsSize, typeof WcsEditableFieldSizeValues[number]>;\n\nexport function isWcsEditableFieldSize(size: string): size is WcsEditableFieldSize {\n    // @ts-ignore : ignore size type, as it is checked with WcsEditableFieldSizeValues\n    return WcsEditableFieldSizeValues.includes(size);\n}\n\nexport type EditableFieldType = 'input' | 'textarea' | 'select';\n",":host {\n    display: block;\n\n    .display-none {\n        display: none !important;\n    }\n\n    .label {\n        margin-bottom: var(--wcs-base-margin);\n        font-weight: 500;\n        font-size: var(--wcs-editable-field-font-size);\n        color: var(--wcs-gray-light);\n    }\n\n    .edit-container {\n        display: flex;\n        width: 100%;\n    }\n\n    .display-container {\n        box-sizing: border-box;\n        wcs-mat-icon {\n            display: none;\n        }\n        height: var(--wcs-editable-field-host-height);\n        white-space: break-spaces;\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        background-color: var(--wcs-light);\n        border-radius: var(--wcs-border-radius);\n        font-size: var(--wcs-editable-field-font-size);\n        line-height: 1.5;\n        font-weight: 500;\n        color: var(--wcs-gray);\n        padding: var(--wcs-editable-field-host-padding);\n        transition: 0.175s all;\n        border: solid 2px transparent;\n    }\n\n    .load-container {\n        box-sizing: border-box;\n        height: var(--wcs-editable-field-host-height);\n        white-space: pre;\n        display: flex;\n        justify-content: space-between;\n        background-color: var(--wcs-light);\n        border-radius: var(--wcs-border-radius);\n        font-size: var(--wcs-editable-field-font-size);\n        line-height: 1.5;\n        font-weight: 500;\n        color: var(--wcs-gray);\n        padding: var(--wcs-editable-field-host-padding);\n        transition: 0.175s all;\n        border: solid 2px transparent;\n        align-items: center;\n    }\n\n    wcs-spinner {\n        height: 24px;\n        width: 24px;\n    }\n\n    .readonly-icon {\n        fill: var(--wcs-text-medium);\n    }\n}\n\n:host([readonly]) {\n    .display-container {\n        color: var(--wcs-gray-light);\n    }\n}\n\n:host(:not([readonly])) {\n    .display-container:hover {\n        wcs-mat-icon {\n            display: flex;\n            align-items: center;\n        }\n        color: var(--wcs-primary);\n        cursor: pointer;\n        border: dashed 2px var(--wcs-primary);\n    }\n}\n\n:host([size=l]) {\n    --wcs-editable-field-host-padding: var(--wcs-padding-l) calc(var(--wcs-padding) - var(--wcs-border-size));\n    --wcs-editable-field-host-height: var(--wcs-size-l);\n    --wcs-editable-field-font-size: 1.0625rem;\n}\n\n:host([size=m]) { // Default\n    --wcs-editable-field-host-padding: var(--wcs-padding-m) calc(var(--wcs-padding) - var(--wcs-border-size));\n    --wcs-editable-field-host-height: var(--wcs-size-m);\n    --wcs-editable-field-font-size: 1rem;\n}\n","import {\n    Component,\n    ComponentInterface,\n    EventEmitter,\n    h,\n    Prop,\n    Event,\n    State,\n    Host,\n    Element,\n    Watch, Listen\n} from '@stencil/core';\nimport {\n    EditableComponentUpdateEvent,\n    EditableFieldType,\n    FormatFn,\n    isWcsEditableFieldSize,\n    ValidateFn,\n    WcsEditableFieldSize,\n    WcsEditableFieldSizeValues\n} from './editable-field-interface';\n\nenum EditableComponentState {\n    DISPLAY,\n    EDIT,\n    LOAD\n}\n\n@Component({\n    tag: 'wcs-editable-field',\n    styleUrl: 'editable-field.scss',\n    shadow: true\n})\nexport class EditableField implements ComponentInterface {\n    @Element() private el!: HTMLWcsEditableFieldElement;\n\n    @State() private currentState: EditableComponentState = EditableComponentState.DISPLAY;\n    /**\n     * Specifies which component is used for editing\n     */\n    @Prop() type: EditableFieldType = 'input';\n    /**\n     * Label of the field\n     */\n    @Prop() label!: string;\n    /**\n     * event called at each (valid) update of the field.\n     */\n    @Event() wcsChange!: EventEmitter<EditableComponentUpdateEvent>;\n    /**\n     * Specify whether the field is editable or not\n     */\n    @Prop() readonly: boolean = false;\n    /**\n     * Initial value of the field\n     */\n    @Prop({mutable: true}) value: any;\n    /**\n     * Function to customize the validation of the data during the update\n     */\n    @Prop() validateFn: ValidateFn<any>;\n    /**\n     * Function used to format the value\n     */\n    @Prop() formatFn: FormatFn<any>;\n\n    /**\n     * Error message displayed under the field if validation failed.\n     */\n    @Prop() errorMsg: string = null;\n\n    /**\n     * Specify the size (height) of the editable field.\n     */\n    @Prop({reflect: true}) size: WcsEditableFieldSize = 'm';\n\n    @State() private isError: boolean = false;\n\n    // fixme: why this attr is never read?\n    // ignoreNextChangeEvent: boolean = false;\n    private spiedElement: HTMLElement = null;\n    private currentValue: any = null;\n\n    componentWillLoad(): Promise<void> | void {\n        if(!isWcsEditableFieldSize(this.size)) {\n            console.error(`Invalid size value for wcs-editable-field : \"${this.size}\". Must be one of \"${WcsEditableFieldSizeValues.join(', ')}\"`);\n            this.size = \"m\"; // Default fallback value\n        }\n        this.currentValue = this.value;\n    }\n\n    componentDidRender() {\n        const assignedElements = (this.el.shadowRoot.querySelector('slot') as HTMLSlotElement).assignedElements();\n        switch (this.type) {\n            case 'input':\n                this.initWithInput(assignedElements);\n                break;\n            case 'textarea':\n                this.initWithTextArea(assignedElements);\n                break;\n            case 'select':\n                this.initWithSelect(assignedElements)\n                break;\n        }\n    }\n\n    private initWithInput(assignedElements: Element[]) {\n        const element = assignedElements.filter(x => {\n            return x.tagName === 'WCS-INPUT'\n        })[0];\n        if (!element) throw new Error('You must provide a slotted input element to handle edition');\n        this.spiedElement = element as HTMLElement;\n        this.addChangeHandlerForWcsComponents(this.spiedElement);\n        this.spiedElement.addEventListener('keydown', (event: KeyboardEvent) => {\n            if (event.key === 'Enter') {\n                this.sendCurrentValue();\n            }\n            if (event.key === 'Escape') {\n                this.discardChanges();\n            }\n        })\n    }\n\n    private initWithTextArea(assignedElements: Element[]) {\n        const element = assignedElements.filter(x => {\n            return x.tagName === 'WCS-TEXTAREA'\n        })[0];\n        if (!element) throw new Error('You must provide a slotted textarea element to handle edition');\n        this.spiedElement = element as HTMLElement;\n        this.addChangeHandlerForWcsComponents(this.spiedElement);\n        this.spiedElement.addEventListener('keydown', (event: KeyboardEvent) => {\n            if (event.key === 'Enter' && event.ctrlKey) {\n                this.sendCurrentValue();\n            }\n            if (event.key === 'Escape') {\n                this.discardChanges();\n            }\n        })\n    }\n\n    private initWithSelect(assignedElements: Element[]) {\n        const element = assignedElements.filter(x => {\n            return x.tagName === 'WCS-SELECT'\n        })[0];\n        if (!element) throw new Error('You must provide a slotted select element to handle edition');\n        this.spiedElement = element as HTMLElement;\n        this.addChangeHandlerForWcsComponents(this.spiedElement);\n    }\n\n    /**\n     * This method subscribes the component to the change events produced by the other WCS components\n     * (provided by the user in slot)\n     * @private\n     */\n    private addChangeHandlerForWcsComponents(elt: HTMLElement) {\n        elt.addEventListener('wcsChange', (event: CustomEvent) => {\n            event.stopImmediatePropagation();\n            this.currentValue = event.detail.value;\n            if (this.validateFn) {\n                this.isError = !this.validateFn(this.currentValue);\n            }\n        });\n    }\n\n\n    private sendCurrentValue() {\n        if (this.currentState === EditableComponentState.EDIT) {\n            if (this.value === this.currentValue) {\n                this.currentState = EditableComponentState.DISPLAY\n            } else {\n                this.isError = this.validateFn ? !this.validateFn(this.currentValue) : false;\n                if (!this.isError) {\n                    this.currentState = EditableComponentState.LOAD;\n                    this.wcsChange.emit({\n                        newValue: this.currentValue,\n                        successHandler: () => this.forceDisplayStateAndValidate(),\n                        errorhandler: () => this.errorHandler()\n                    });\n                }\n            }\n        }\n    }\n\n    private discardChanges() {\n        this.currentValue = this.value;\n        this.currentState = EditableComponentState.DISPLAY;\n        this.isError = false;\n    }\n\n\n    forceDisplayStateAndValidate() {\n        if (this.currentState === EditableComponentState.LOAD) {\n            this.value = this.currentValue;\n            this.currentState = EditableComponentState.DISPLAY;\n        } else {\n            throw new Error('You cannot set display state from ' + EditableComponentState[this.currentState] + ' state');\n        }\n    }\n\n    @Listen('click', {target: 'window'})\n    onWindowClickEvent(event: MouseEvent) {\n        if (!this.clickInsideComponent(event)) {\n            if (this.currentState === EditableComponentState.EDIT) {\n                if (this.isError) {\n                    this.discardChanges();\n                } else {\n                    this.sendCurrentValue();\n                }\n            }\n        }\n    }\n\n    private clickInsideComponent(event: MouseEvent) {\n        return event.x >= this.el.getBoundingClientRect().x && event.x <= this.el.getBoundingClientRect().x + this.el.getBoundingClientRect().width\n            && event.y >= this.el.getBoundingClientRect().y && event.y <= this.el.getBoundingClientRect().y + this.el.getBoundingClientRect().height;\n    }\n\n    /**\n     * discard changes and force component state to DISPLAY\n     * <br/>\n     * This method must be call when component is in LOAD state\n     */\n\n    errorHandler() {\n        this.discardChanges();\n    }\n\n    @Watch('value')\n    onValueChange(): void {\n        this.currentState = EditableComponentState.DISPLAY;\n    }\n\n    private onDisplayContainerClick() {\n        if (this.currentState === EditableComponentState.DISPLAY && this.readonly === false) {\n            this.currentState = EditableComponentState.EDIT;\n            // fixme: why this attr is never read?\n            // this.ignoreNextChangeEvent = true;\n            this.spiedElement['value'] = this.currentValue;\n            if (this.validateFn) {\n                this.isError = !this.validateFn(this.currentValue);\n            }\n            // We wait until the element is displayed on the page otherwise the focus does not work\n            const DELAY_FOR_RENDER = 20;\n            setTimeout(() => {\n                if (this.type === 'input') {\n                    (this.spiedElement as HTMLWcsInputElement).setFocus();\n                } else if (this.type === 'textarea') {\n                    (this.spiedElement as HTMLWcsTextareaElement).fitContent();\n                    (this.spiedElement as HTMLWcsTextareaElement).setFocus();\n                }\n            }, DELAY_FOR_RENDER)\n        }\n    }\n\n    render(): any {\n        const {formattedValue, formattedCurrentValue} = this.formatValues();\n        return (\n            <Host>\n                <div class=\"label\">{this.label}</div>\n                <div\n                    class={'display-container ' + (this.currentState !== EditableComponentState.DISPLAY ? 'display-none' : '')}\n                    onClick={() => this.onDisplayContainerClick()}>\n                    {formattedValue}\n                    <wcs-mat-icon icon=\"edit\" size=\"s\"></wcs-mat-icon>\n                    {this.readonly ? this.getReadonlySvgIcon() : null}\n                </div>\n                <div\n                    class={'load-container ' + (this.currentState !== EditableComponentState.LOAD ? 'display-none' : '')}>\n                    {formattedCurrentValue}\n                    <wcs-spinner></wcs-spinner>\n                </div>\n                <wcs-form-field is-error={this.isError}\n                                class={'edit-container ' + (this.currentState !== EditableComponentState.EDIT ? 'display-none' : '')}>\n                    <slot/>\n                    {\n                        this.isError && this.errorMsg\n                            ? <wcs-error>{this.errorMsg}</wcs-error>\n                            : null\n                    }\n                </wcs-form-field>\n            </Host>\n        );\n    }\n\n    private getReadonlySvgIcon() {\n        return <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"26\" height=\"24\" viewBox=\"0 0 27 25\"\n                    class=\"readonly-icon\">\n            <path d=\"M26.79,25.05H1.21a.73.73,0,0,0,0,1.45H26.79a.73.73,0,0,0,0-1.45Z\"\n                  transform=\"translate(-0.5 -1.5)\"/>\n            <path\n                d=\"M19.8,8.87h-.61V6.73a5.23,5.23,0,0,0-10.46,0V8.87H8.2a1.63,1.63,0,0,0-1.63,1.62V21.32A1.62,1.62,0,0,0,8.2,22.94H19.8a1.62,1.62,0,0,0,1.63-1.62V10.49A1.63,1.63,0,0,0,19.8,8.87ZM10.93,6.73a3,3,0,1,1,6.06,0V8.87H10.93Zm3,14.15a5,5,0,1,1,5-5A5,5,0,0,1,14,20.88Z\"\n                transform=\"translate(-0.5 -1.5)\"/>\n            <path\n                d=\"M14,12.62a3.29,3.29,0,1,0,3.29,3.29A3.29,3.29,0,0,0,14,12.62Zm0,4.75a1.47,1.47,0,1,1,1.47-1.46A1.46,1.46,0,0,1,14,17.37Z\"\n                transform=\"translate(-0.5 -1.5)\"/>\n        </svg>;\n    }\n\n    private formatValues() {\n        let formattedValue = this.value;\n        let formattedCurrentValue = this.currentValue;\n        if (this.formatFn) {\n            formattedValue = this.formatFn(this.value);\n            formattedCurrentValue = this.formatFn(this.currentValue);\n        }\n        if (Array.isArray(this.value)) {\n            formattedValue = this.value.join(', ');\n        }\n        if (Array.isArray(this.currentValue)) {\n            formattedCurrentValue = this.currentValue.join(', ');\n        }\n        return {\n            formattedValue: (formattedValue ? (<span>{formattedValue}</span>) : (<span></span>)),\n            formattedCurrentValue: (formattedCurrentValue ? (<span>{formattedCurrentValue}</span>) : (<span></span>))\n        };\n    }\n}\n"],"version":3}

package/dist/esm/wcs-error_2.entry.js

@@ -76,7 +76,7 @@ const FormField = class {
   }
   initSpiedElement() {
     var _a, _b;
-    const SUPPORTED_COMPONENTS = ['wcs-input', 'wcs-select', 'wcs-textarea', 'wcs-radio-group', 'wcs-switch', 'wcs-checkbox'];
+    const SUPPORTED_COMPONENTS = ['wcs-input', 'wcs-select', 'wcs-textarea', 'wcs-radio-group', 'wcs-switch', 'wcs-checkbox', 'wcs-native-select'];
     this.spiedElement = (_a = this.el.shadowRoot.querySelector('slot:not([name])')) === null || _a === void 0 ? void 0 : _a.assignedElements().filter(n => [...SUPPORTED_COMPONENTS, 'SLOT'].map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0];
     // If the component is used in another web component
     if (((_b = this.spiedElement) === null || _b === void 0 ? void 0 : _b.tagName) === 'SLOT') {

package/dist/esm/wcs-error_2.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-error.wcs-form-field.entry.js","mappings":"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","names":[],"sources":["./src/components/error/error.scss?tag=wcs-error&encapsulation=shadow","./src/components/error/error.tsx","./src/components/form-field/form-field.scss?tag=wcs-form-field&encapsulation=shadow","./src/components/form-field/form-field.tsx"],"sourcesContent":[":host {\n    margin-top: 0.25rem;\n    color: var(--wcs-red);\n}","import { Component, ComponentInterface, h, Host } from '@stencil/core';\n\n@Component({\n    tag: 'wcs-error',\n    styleUrl: 'error.scss',\n    shadow: true,\n})\nexport class Label implements ComponentInterface {\n    render() {\n        return (\n            <Host slot=\"error\">\n                <slot />\n            </Host>\n        );\n    }\n}\n",":host {\n    --wcs-form-field-border-radius-left: var(--wcs-border-radius);\n    --wcs-form-field-border-radius-right: var(--wcs-border-radius);\n\n    display: flex;\n    flex-direction: column;\n}\n\n.input-container {\n    display: flex;\n}\n\n::slotted(wcs-radio-group) {\n    margin-left: var(--wcs-base-margin);\n}\n\n::slotted(wcs-radio-group[mode=option]) {\n    margin-left: 0;\n}\n\n::slotted(wcs-select:not([slot=prefix])) {\n    width: 100%;\n}\n\n// Label style\n::slotted(label) {\n    font-weight: 500;\n    margin-bottom: 8px;\n}\n\n// Make input square on left side if there is a prefix\n:host(.has-prefix) {\n    --wcs-input-border-radius-left: 0;\n}\n\n// Make input square on right side if there is a suffix\n:host(.has-suffix) {\n    --wcs-input-border-radius-right: 0;\n}\n\n// Prefixed select\n::slotted([slot=prefix]) {\n    --wcs-select-border-radius: var(--wcs-border-radius) 0 0 var(--wcs-border-radius);\n    --wcs-select-background-color: var(--wcs-gray-light);\n    --wcs-select-value-color: var(--wcs-white);\n    --wcs-select-placeholder-color: var(--wcs-white);\n    --wcs-select-border-color: var(--wcs-gray-light);\n}\n\n::slotted([slot=suffix]) {\n    // Make button square on left side\n    --wcs-button-border-radius: 0 var(--wcs-border-radius) var(--wcs-border-radius) 0;\n\n    // Make select square on left side\n    --wcs-select-border-radius: 0 var(--wcs-border-radius) var(--wcs-border-radius) 0 ;\n}\n","import { Component, ComponentInterface, Element, h, Host, Prop, State, Watch } from '@stencil/core';\n\n/**\n * TODO:\n * - [ ] Suffix button style\n */\n@Component({\n    tag: 'wcs-form-field',\n    styleUrl: 'form-field.scss',\n    shadow: true,\n})\nexport class FormField implements ComponentInterface {\n    @Element() el!: HTMLWcsFormFieldElement;\n\n    /**\n     * Specifies whether the form field is in an error state. Displays the field border in red and the message contained in the wcs-error component\n     */\n    @Prop({mutable: true, reflect: true}) isError = false;\n\n    @State() hasPrefix = false;\n    @State() hasSuffix = false;\n    @State() spiedElement: Element;\n\n    private observer: MutationObserver;\n\n    componentWillLoad() {\n        this.hasSuffix = this.el.querySelector('wcs-button') !== null;\n        this.hasPrefix = this.el.querySelector('wcs-select') !== null;\n    }\n\n    componentDidLoad() {\n        this.initSpiedElement();\n        this.addRequiredMarkerToLabel();\n        this.updateErrorStateOnInput(this.isError);\n    }\n\n\n    @Watch('isError')\n    // @ts-ignore\n    private isErrorChange(newValue: boolean) {\n        this.updateErrorStateOnInput(newValue);\n    }\n\n    private updateErrorStateOnInput(newValue: boolean) {\n        if (this.spiedElementIsOfType('wcs-input', 'wcs-textarea')) {\n            if (newValue) {\n                this.spiedElement.setAttribute('state', 'error');\n            } else {\n                this.spiedElement.setAttribute('state', 'initial');\n            }\n        }\n    }\n\n    /**\n     * This function return true if the form field contains an element with tagName matches a value of the types param\n     * @param types\n     * @private\n     */\n    private spiedElementIsOfType(...types: string[]): boolean {\n        for (const type of types) {\n            if (this.spiedElement?.tagName === type.toUpperCase()) return true;\n        }\n        return false\n    }\n\n\n    private addRequiredMarkerToLabel() {\n        // TODO: deprecate this in favor of the 'required' component attribute\n        const label = this.el.querySelector('wcs-label');\n        this.observer = new MutationObserver(mutations => {\n            const requiredAttMutation = mutations.filter(m => m.attributeName === 'required')[0];\n            if (requiredAttMutation) {\n                this.updateLabelRequiredFlag(this.spiedElement?.hasAttribute('required'), label);\n            }\n        });\n        if (this.spiedElement) {\n            this.observer.observe(this.spiedElement, {attributes: true});\n        }\n\n        const isRequired = this.spiedElement?.hasAttribute('required');\n        this.updateLabelRequiredFlag(isRequired, label);\n    }\n\n\n    private initSpiedElement() {\n        const SUPPORTED_COMPONENTS = ['wcs-input', 'wcs-select', 'wcs-textarea', 'wcs-radio-group', 'wcs-switch', 'wcs-checkbox'];\n\n        this.spiedElement = (this.el.shadowRoot.querySelector('slot:not([name])') as HTMLSlotElement)\n            ?.assignedElements()\n            .filter(n => [...SUPPORTED_COMPONENTS, 'SLOT'].map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0];\n\n        // If the component is used in another web component\n        if (this.spiedElement?.tagName === 'SLOT') {\n            this.spiedElement = ((this.spiedElement as HTMLSlotElement)\n                .assignedElements()\n                .filter(n => SUPPORTED_COMPONENTS.map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0]) as HTMLElement;\n        }\n\n        if (!this.spiedElement) {\n            // tslint:disable-next-line:no-console\n            console.warn('Form-field component support only ' + SUPPORTED_COMPONENTS.toString() + '. Some features may not work with the provided component.');\n            return;\n        }\n    }\n\n    private updateLabelRequiredFlag(isRequired: boolean, label: Element) {\n        if (isRequired && label) {\n            label.setAttribute('required', 'true');\n        } else if (!isRequired && label) {\n            label.removeAttribute('required');\n        }\n    }\n\n    disconnectedCallback() {\n        this.observer?.disconnect();\n    }\n\n    render() {\n        let classes = '';\n        const isError = this.isError;\n\n        if (this.hasSuffix) {\n            classes += ' has-suffix';\n        }\n        if (this.hasPrefix) {\n            classes += ' has-prefix';\n        }\n        return (\n            <Host class={classes}>\n                <slot name=\"label\"/>\n                <div class=\"input-container\">\n                    <slot name=\"prefix\"/>\n                    <slot onSlotchange={() => this.onFormInputSlotChange()}/>\n                    <slot name=\"suffix\"/>\n                </div>\n                {\n                    isError ? (<slot name=\"error\"/>) : ''\n                }\n                <slot name=\"messages\"/>\n            </Host>\n        );\n    }\n\n    private onFormInputSlotChange() {\n        this.initSpiedElement();\n        this.addRequiredMarkerToLabel();\n        this.updateErrorStateOnInput(this.isError);\n    }\n}\n"],"version":3}
+{"file":"wcs-error.wcs-form-field.entry.js","mappings":"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","names":[],"sources":["./src/components/error/error.scss?tag=wcs-error&encapsulation=shadow","./src/components/error/error.tsx","./src/components/form-field/form-field.scss?tag=wcs-form-field&encapsulation=shadow","./src/components/form-field/form-field.tsx"],"sourcesContent":[":host {\n    margin-top: 0.25rem;\n    color: var(--wcs-red);\n}","import { Component, ComponentInterface, h, Host } from '@stencil/core';\n\n@Component({\n    tag: 'wcs-error',\n    styleUrl: 'error.scss',\n    shadow: true,\n})\nexport class Label implements ComponentInterface {\n    render() {\n        return (\n            <Host slot=\"error\">\n                <slot />\n            </Host>\n        );\n    }\n}\n",":host {\n    --wcs-form-field-border-radius-left: var(--wcs-border-radius);\n    --wcs-form-field-border-radius-right: var(--wcs-border-radius);\n\n    display: flex;\n    flex-direction: column;\n}\n\n.input-container {\n    display: flex;\n}\n\n::slotted(wcs-radio-group) {\n    margin-left: var(--wcs-base-margin);\n}\n\n::slotted(wcs-radio-group[mode=option]) {\n    margin-left: 0;\n}\n\n::slotted(wcs-select:not([slot=prefix])) {\n    width: 100%;\n}\n\n// Label style\n::slotted(label) {\n    font-weight: 500;\n    margin-bottom: 8px;\n}\n\n// Make input square on left side if there is a prefix\n:host(.has-prefix) {\n    --wcs-input-border-radius-left: 0;\n}\n\n// Make input square on right side if there is a suffix\n:host(.has-suffix) {\n    --wcs-input-border-radius-right: 0;\n}\n\n// Prefixed select\n::slotted([slot=prefix]) {\n    --wcs-select-border-radius: var(--wcs-border-radius) 0 0 var(--wcs-border-radius);\n    --wcs-select-background-color: var(--wcs-gray-light);\n    --wcs-select-value-color: var(--wcs-white);\n    --wcs-select-placeholder-color: var(--wcs-white);\n    --wcs-select-border-color: var(--wcs-gray-light);\n}\n\n::slotted([slot=suffix]) {\n    // Make button square on left side\n    --wcs-button-border-radius: 0 var(--wcs-border-radius) var(--wcs-border-radius) 0;\n\n    // Make select square on left side\n    --wcs-select-border-radius: 0 var(--wcs-border-radius) var(--wcs-border-radius) 0 ;\n}\n","import { Component, ComponentInterface, Element, h, Host, Prop, State, Watch } from '@stencil/core';\n\n/**\n * TODO:\n * - [ ] Suffix button style\n */\n@Component({\n    tag: 'wcs-form-field',\n    styleUrl: 'form-field.scss',\n    shadow: true,\n})\nexport class FormField implements ComponentInterface {\n    @Element() private el!: HTMLWcsFormFieldElement;\n\n    /**\n     * Specifies whether the form field is in an error state. Displays the field border in red and the message contained in the wcs-error component\n     */\n    @Prop({mutable: true, reflect: true}) isError = false;\n\n    @State() private hasPrefix = false;\n    @State() private hasSuffix = false;\n    @State() private spiedElement: Element;\n\n    private observer: MutationObserver;\n\n    componentWillLoad() {\n        this.hasSuffix = this.el.querySelector('wcs-button') !== null;\n        this.hasPrefix = this.el.querySelector('wcs-select') !== null;\n    }\n\n    componentDidLoad() {\n        this.initSpiedElement();\n        this.addRequiredMarkerToLabel();\n        this.updateErrorStateOnInput(this.isError);\n    }\n\n\n    @Watch('isError')\n    // @ts-ignore\n    private isErrorChange(newValue: boolean) {\n        this.updateErrorStateOnInput(newValue);\n    }\n\n    private updateErrorStateOnInput(newValue: boolean) {\n        if (this.spiedElementIsOfType('wcs-input', 'wcs-textarea')) {\n            if (newValue) {\n                this.spiedElement.setAttribute('state', 'error');\n            } else {\n                this.spiedElement.setAttribute('state', 'initial');\n            }\n        }\n    }\n\n    /**\n     * This function return true if the form field contains an element with tagName matches a value of the types param\n     * @param types\n     * @private\n     */\n    private spiedElementIsOfType(...types: string[]): boolean {\n        for (const type of types) {\n            if (this.spiedElement?.tagName === type.toUpperCase()) return true;\n        }\n        return false\n    }\n\n\n    private addRequiredMarkerToLabel() {\n        // TODO: deprecate this in favor of the 'required' component attribute\n        const label = this.el.querySelector('wcs-label');\n        this.observer = new MutationObserver(mutations => {\n            const requiredAttMutation = mutations.filter(m => m.attributeName === 'required')[0];\n            if (requiredAttMutation) {\n                this.updateLabelRequiredFlag(this.spiedElement?.hasAttribute('required'), label);\n            }\n        });\n        if (this.spiedElement) {\n            this.observer.observe(this.spiedElement, {attributes: true});\n        }\n\n        const isRequired = this.spiedElement?.hasAttribute('required');\n        this.updateLabelRequiredFlag(isRequired, label);\n    }\n\n\n    private initSpiedElement() {\n        const SUPPORTED_COMPONENTS = ['wcs-input', 'wcs-select', 'wcs-textarea', 'wcs-radio-group', 'wcs-switch', 'wcs-checkbox', 'wcs-native-select'];\n\n        this.spiedElement = (this.el.shadowRoot.querySelector('slot:not([name])') as HTMLSlotElement)\n            ?.assignedElements()\n            .filter(n => [...SUPPORTED_COMPONENTS, 'SLOT'].map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0];\n\n        // If the component is used in another web component\n        if (this.spiedElement?.tagName === 'SLOT') {\n            this.spiedElement = ((this.spiedElement as HTMLSlotElement)\n                .assignedElements()\n                .filter(n => SUPPORTED_COMPONENTS.map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0]) as HTMLElement;\n        }\n\n        if (!this.spiedElement) {\n            // tslint:disable-next-line:no-console\n            console.warn('Form-field component support only ' + SUPPORTED_COMPONENTS.toString() + '. Some features may not work with the provided component.');\n            return;\n        }\n    }\n\n    private updateLabelRequiredFlag(isRequired: boolean, label: Element) {\n        if (isRequired && label) {\n            label.setAttribute('required', 'true');\n        } else if (!isRequired && label) {\n            label.removeAttribute('required');\n        }\n    }\n\n    disconnectedCallback() {\n        this.observer?.disconnect();\n    }\n\n    render() {\n        let classes = '';\n        const isError = this.isError;\n\n        if (this.hasSuffix) {\n            classes += ' has-suffix';\n        }\n        if (this.hasPrefix) {\n            classes += ' has-prefix';\n        }\n        return (\n            <Host class={classes}>\n                <slot name=\"label\"/>\n                <div class=\"input-container\">\n                    <slot name=\"prefix\"/>\n                    <slot onSlotchange={() => this.onFormInputSlotChange()}/>\n                    <slot name=\"suffix\"/>\n                </div>\n                {\n                    isError ? (<slot name=\"error\"/>) : ''\n                }\n                <slot name=\"messages\"/>\n            </Host>\n        );\n    }\n\n    private onFormInputSlotChange() {\n        this.initSpiedElement();\n        this.addRequiredMarkerToLabel();\n        this.updateErrorStateOnInput(this.isError);\n    }\n}\n"],"version":3}