wcs-core 7.5.1 → 7.7.0

package/bundle/wcs-com-nav.js.map

@@ -1 +1 @@
-{"version":3,"names":["comNavCss","WcsComNavStyle0","COM_NAV_INHERITED_ATTRS","WCS_COM_NAV_SUBMENU_TAG_NAME","ComNav","proxyCustomElement","H","this","inheritedAttributes","mobileMenuIconClick","mobileMenuOpen","disconnectedCallback","_a","resizeObserver","disconnect","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","slottedNavigableItems","querySelectorAll","registerCloseHandlerForFocusOutEventOn","componentDidLoad","comNavDidLoadWithResizeObserver","observe","document","body","setAriaAttribute","attr","value","forceUpdate","closeMobileMenu","onClickOnFinalAction","render","menuAriaLabel","undefined","h","Host","key","class","appName","name","currentActiveSizing","role","id","onClick","exitMobileMenuOnKeyDown","evt","isEscapeKey"],"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@import './com-nav-focus.scss';\n@import '../../style/breakpoints.scss';\n@import '../../style/reset.scss';\n\n:host {\n    --wcs-com-nav-menu-bar-height: calc(var(--wcs-semantic-size-base) * 8);\n    --wcs-com-nav-border-color: var(--wcs-semantic-color-border-secondary);\n    --wcs-com-nav-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-com-nav-background-color: var(--wcs-semantic-color-background-surface-primary);\n\n    --wcs-com-nav-app-name-color: var(--wcs-semantic-color-text-primary);\n    --wcs-com-nav-app-name-font-weight: var(--wcs-semantic-font-weight-heavy);\n    --wcs-com-nav-app-name-font-size: var(--wcs-semantic-font-size-heading-5);\n    --wcs-com-nav-app-name-line-height: var(--wcs-semantic-font-line-height-large);\n\n    --wcs-com-nav-item-color: var(--wcs-semantic-color-foreground-action-neutral-default);\n    --wcs-com-nav-item-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-com-nav-focus-outline-color: var(--wcs-semantic-color-border-focus-base);\n\n\n    // Spacings for navbar and mobile overlay\n    --wcs-com-nav-vertical-padding: 0;\n    --wcs-com-nav-horizontal-padding: var(--wcs-semantic-spacing-large);\n    --wcs-com-nav-mobile-overlay-gap: var(--wcs-semantic-spacing-large);\n    --wcs-com-nav-mobile-overlay-padding: var(--wcs-semantic-spacing-large);\n\n    // Burger icon (mobile)\n    --wcs-com-nav-mobile-menu-icon-border-color: var(--wcs-semantic-color-border-secondary);\n    --wcs-com-nav-mobile-menu-icon-gap: calc(var(--wcs-semantic-spacing-base) * 2);\n    --wcs-com-nav-mobile-menu-icon-margin-left: var(--wcs-semantic-spacing-base);\n    --wcs-com-nav-mobile-menu-icon-color: var(--wcs-semantic-color-foreground-action-secondary-default);\n\n    // Menu bar (desktop)\n    --wcs-com-nav-menu-bar-gap: calc(var(--wcs-semantic-spacing-base) * 5); // 40px\n    --wcs-com-nav-menu-bar-margin-left: calc(var(--wcs-semantic-spacing-base) * 6.25); // 50 px\n\n    display: block;\n    position: relative;\n    height: var(--wcs-com-nav-menu-bar-height);\n    border-bottom: var(--wcs-com-nav-border-width) solid var(--wcs-com-nav-border-color);\n\n    .container {\n        padding: var(--wcs-com-nav-vertical-padding) var(--wcs-com-nav-horizontal-padding);\n        height: 100%;\n        display: flex;\n        align-items: center;\n        flex-direction: row;\n        justify-content: space-between;\n\n        nav {\n            display: flex;\n            align-items: center;\n        }\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: var(--wcs-com-nav-app-name-font-weight);\n        font-size: var(--wcs-com-nav-app-name-font-size);\n        line-height: var(--wcs-com-nav-app-name-line-height);\n        color: var(--wcs-com-nav-app-name-color);\n\n        ::slotted(a) {\n            @include reset-anchor;\n        }\n\n        ::slotted(a:focus-visible) {\n            outline: none;\n        }\n    }\n\n    .app-name:focus-within {\n        @include focus-outline($outline-color: var(--wcs-com-nav-focus-outline-color));\n    }\n\n    .menu-bar {\n        display: none;\n    }\n\n    #mobile-menu-icon {\n        display: flex;\n        align-items: center;\n        flex-wrap: nowrap;\n        color: var(--wcs-com-nav-mobile-menu-icon-color);\n        padding-left: var(--wcs-com-nav-mobile-menu-icon-gap);\n        margin-left: var(--wcs-com-nav-mobile-menu-icon-margin-left);\n        border-left: solid 1px var(--wcs-com-nav-mobile-menu-icon-border-color);\n    }\n\n    #mobile-menu-icon:focus {\n        outline: none;\n    }\n\n    #mobile-menu-icon:focus-visible::after {\n        @include focus-outline($outline-color: var(--wcs-com-nav-focus-outline-color));\n    }\n\n    @supports not selector(#mobile-menu-icon:focus-visible::after) {\n        #mobile-menu-icon:focus::after {\n            @include focus-outline($outline-color: var(--wcs-com-nav-focus-outline-color));\n        }\n    }\n\n    button {\n        background: none;\n        border: none;\n        padding: 0;\n        margin: 0;\n        font: inherit;\n        color: inherit;\n        cursor: pointer;\n    }\n\n    #mobile-menu-icon:after {\n        font-family: icons;\n        font-size: 18px;\n        cursor: pointer;\n        content: \"\\f198\";\n        line-height: 1;\n        box-sizing: border-box;\n    }\n\n    #mobile-menu-icon[aria-expanded=\"true\"]:after {\n        content: \"\\f129\";\n    }\n\n    .mobile-overlay {\n        display: none;\n    }\n\n    .mobile-overlay[data-mobile-open] {\n        padding: var(--wcs-com-nav-mobile-overlay-padding);\n        position: absolute;\n        top: var(--wcs-com-nav-menu-bar-height);\n        left: 0;\n        right: 0;\n        display: flex;\n        flex-direction: column;\n        gap: var(--wcs-com-nav-mobile-overlay-gap);\n        z-index: 9999;\n        background-color: var(--wcs-com-nav-background-color);\n\n        ::slotted(wcs-com-nav-item) {\n            color: var(--wcs-com-nav-item-color);\n            font-weight: var(--wcs-com-nav-item-font-weight);\n        }\n    }\n}\n\n@include for-tablet-portrait-up {\n    :host {\n        .container {\n            margin: 0 auto;\n            max-width: var(--wcs-com-content-max-width);\n        }\n\n        nav {\n            height: 100%;\n        }\n\n        .menu-bar {\n            display: flex;\n            align-items: center;\n            height: 100%;\n            margin-left: var(--wcs-com-nav-menu-bar-margin-left);\n\n            ::slotted(*:not(:first-child)) {\n                margin-left: var(--wcs-com-nav-menu-bar-gap);\n            }\n\n            ::slotted(wcs-com-nav-item) {\n                height: 100%;\n                color: var(--wcs-com-nav-item-color);\n                font-weight: var(--wcs-com-nav-item-font-weight);\n            }\n\n            // Focus style for nav item in menu bar\n            ::slotted(wcs-com-nav-item:focus-within) {\n                @include com-nav-item-desktop-focus-outline(var(--wcs-com-nav-focus-outline-color));\n            }\n        }\n\n        #mobile-menu-icon {\n            display: none;\n        }\n\n        .mobile-overlay {\n            display: none !important;\n        }\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    forceUpdate,\n    h,\n    Host,\n    Listen,\n    Method,\n    Prop,\n    State,\n} from '@stencil/core';\nimport { comNavDidLoadWithResizeObserver, registerCloseHandlerForFocusOutEventOn } from \"./com-nav-utils\";\nimport { inheritAriaAttributes, inheritAttributes, isEscapeKey } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { ComNavSize } from \"./com-nav-size\";\n\n\nconst COM_NAV_INHERITED_ATTRS = ['title'];\n\nconst WCS_COM_NAV_SUBMENU_TAG_NAME = 'WCS-COM-NAV-SUBMENU';\n\n/**\n * *Part of communication design system*\n *\n * The com-nav component is a container for navigation links to external or internal pages of the website.\n *\n * @slot <no-name> - Default slot containing all the menu declarations\n * @slot app-name - (Optional) Extra slot for the application name\n * @slot actions - Slot for actions placed on the right part of the container\n * \n * @cssprop --wcs-com-nav-menu-bar-height - Height of the menu bar\n * @cssprop --wcs-com-nav-border-color - Border color of the bottom border of the com-nav\n * @cssprop --wcs-com-nav-border-width - Border width of the border below com-nav\n * @cssprop --wcs-com-nav-background-color - Background color of the com-nav;\n * @cssprop --wcs-com-nav-app-name-color - App name color\n * @cssprop --wcs-com-nav-app-name-font-weight - App name font-weight\n * @cssprop --wcs-com-nav-app-name-font-size - Font size of the App name text\n * @cssprop --wcs-com-nav-app-name-line-height - Line height of the App name text\n * @cssprop --wcs-com-nav-item-color - Color of the wcs-nav-item inside menu-bar\n * @cssprop --wcs-com-nav-item-font-weight - Font weight of the wcs-nav-item inside menu-bar\n * @cssprop --wcs-com-nav-focus-outline-color - Focus outline color of the wcs-nav-item inside menu-bar\n * @cssprop --wcs-com-nav-horizontal-padding - Horizontal padding of wcs-com-nav\n * @cssprop --wcs-com-nav-vertical-padding - Vertical padding of wcs-com-nav\n * @cssprop --wcs-com-nav-mobile-overlay-gap - Gap between each items section in mobile overlay\n * @cssprop --wcs-com-nav-mobile-overlay-padding - Padding inside mobile overlay\n * @cssprop --wcs-com-nav-mobile-menu-icon-border-color - Bar border color on the left of icon mobile menu\n * @cssprop --wcs-com-nav-mobile-menu-icon-gap- Gap between icon mobile menu and separator on the left\n * @cssprop --wcs-com-nav-mobile-menu-icon-margin-left - Margin left of icon mobile menu\n * @cssprop --wcs-com-nav-menu-bar-gap - Gap between each item inside menu-bar\n * @cssprop --wcs-com-nav-menu-bar-margin-left - Margin left between menu bar and the app-name section\n */\n@Component({\n    tag: 'wcs-com-nav',\n    styleUrl: 'com-nav.scss',\n    shadow: true,\n})\nexport class ComNav implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLWcsComNavElement;\n    private inheritedAttributes: { [k: string]: any } = {};\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() public currentActiveSizing: ComNavSize;\n    private resizeObserver: ResizeObserver;\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.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, COM_NAV_INHERITED_ATTRS)\n        };\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    componentDidLoad(): void {\n        if(!this.resizeObserver) {\n            this.resizeObserver = comNavDidLoadWithResizeObserver(this);\n            this.resizeObserver.observe(document.body);\n        }\n    }\n    \n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        // XXX: Special case on this component because of the desktop / mobile mode that re-renders the <nav> element,\n        // making it lose all its attribute\n        this.inheritedAttributes[attr] = value;\n        forceUpdate(this);\n    }\n\n    private closeMobileMenu() {\n        this.mobileMenuOpen = false;\n    }\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 submenu 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.closeMobileMenu();\n    }\n    \n    render() {\n        const menuAriaLabel = this.inheritedAttributes['aria-label'] || undefined;\n        \n        return (\n            <Host>\n                <div class=\"container\">\n                    <div class=\"container-left\">\n                        <div class=\"app-name\">\n                            {this.appName}\n                            <slot name=\"app-name\"/>\n                        </div>\n                        {this.currentActiveSizing === 'desktop' ?\n                            <nav role=\"navigation\" {...this.inheritedAttributes}>\n                                <div class=\"menu-bar\" role=\"list\">\n                                    {this.currentActiveSizing === 'desktop' \n                                        ? <slot/> \n                                        : null}\n                                </div>\n                            </nav>\n                            : null}\n                    </div>\n                    <div class=\"container-right\">\n                        <slot name=\"actions\"/>\n                        {this.currentActiveSizing === 'mobile' ?\n                            <nav id=\"wcs-com-nav-mobile-menu\" role=\"navigation\" {...this.inheritedAttributes}>\n                                <button id=\"mobile-menu-icon\"\n                                    aria-label={menuAriaLabel}\n                                    aria-expanded={this.mobileMenuOpen ? \"true\" : \"false\"}\n                                    aria-controls=\"wcs-com-nav-mobile-menu\"\n                                    onClick={() => this.mobileMenuIconClick()}></button>\n                                {this.currentActiveSizing === 'mobile'\n                                    ? <div class=\"mobile-overlay\" data-mobile-open={this.mobileMenuOpen} role=\"list\"><slot /></div>\n                                    : null}\n                            </nav>\n                            : null}\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n\n    /**\n     * Close the mobile menu if the user press escape.\n     * @param evt keydown event on window target.\n     */\n    @Listen('keydown', {target: 'window'})\n    exitMobileMenuOnKeyDown(evt: KeyboardEvent) {\n        if (isEscapeKey(evt)) {\n            this.closeMobileMenu();\n        }\n    }\n}\n"],"mappings":"wJAAA,MAAMA,EAAY,07JAClB,MAAAC,EAAeD,ECiBf,MAAME,EAA0B,CAAC,SAEjC,MAAMC,EAA+B,sB,MAqCxBC,EAAMC,EAAA,MAAAD,UAAAE,E,kEAEPC,KAAAC,oBAA4C,G,2CAKT,M,mCAInC,mBAAAC,GACJF,KAAKG,gBAAkBH,KAAKG,c,CAGhC,oBAAAC,G,OACIC,EAAAL,KAAKM,kBAAc,MAAAD,SAAA,SAAAA,EAAEE,Y,CAGzB,iBAAAC,GACIR,KAAKC,oBAAmBQ,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsBX,KAAKY,KAC3BC,EAAkBb,KAAKY,GAAIjB,IAGlC,MAAMmB,EAAwBd,KAAKY,GAAGG,iBAAiB,oEACvDC,EAAoEF,EAAuBlB,E,CAG/F,gBAAAqB,GACI,IAAIjB,KAAKM,eAAgB,CACrBN,KAAKM,eAAiBY,EAAgClB,MACtDA,KAAKM,eAAea,QAAQC,SAASC,K,EAK7C,sBAAMC,CAAiBC,EAAyBC,GAG5CxB,KAAKC,oBAAoBsB,GAAQC,EACjCC,EAAYzB,K,CAGR,eAAA0B,GACJ1B,KAAKG,eAAiB,K,CAU1B,oBAAAwB,GACI3B,KAAK0B,iB,CAGT,MAAAE,GACI,MAAMC,EAAgB7B,KAAKC,oBAAoB,eAAiB6B,UAEhE,OACIC,EAACC,EAAI,CAAAC,IAAA,4CACDF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,aACPH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBACPH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,YACNlC,KAAKmC,QACNJ,EAAA,QAAAE,IAAA,2CAAMG,KAAK,cAEdpC,KAAKqC,sBAAwB,UAC1BN,EAAA,MAAAtB,OAAAC,OAAA,CAAK4B,KAAK,cAAiBtC,KAAKC,qBAC5B8B,EAAA,OAAKG,MAAM,WAAWI,KAAK,QACtBtC,KAAKqC,sBAAwB,UACxBN,EAAA,aACA,OAGZ,MAEVA,EAAA,OAAAE,IAAA,2CAAKC,MAAM,mBACPH,EAAA,QAAAE,IAAA,2CAAMG,KAAK,YACVpC,KAAKqC,sBAAwB,SAC1BN,EAAA,MAAAtB,OAAAC,OAAA,CAAK6B,GAAG,0BAA0BD,KAAK,cAAiBtC,KAAKC,qBACzD8B,EAAA,UAAQQ,GAAG,mBAAkB,aACbV,EAAa,gBACV7B,KAAKG,eAAiB,OAAS,QAAO,gBACvC,0BACdqC,QAAS,IAAMxC,KAAKE,wBACvBF,KAAKqC,sBAAwB,SACxBN,EAAA,OAAKG,MAAM,iBAAgB,mBAAmBlC,KAAKG,eAAgBmC,KAAK,QAAOP,EAAA,cAC/E,MAER,O,CAY1B,uBAAAU,CAAwBC,GACpB,GAAIC,EAAYD,GAAM,CAClB1C,KAAK0B,iB"}
+{"version":3,"names":["comNavCss","WcsComNavStyle0","COM_NAV_INHERITED_ATTRS","WCS_COM_NAV_SUBMENU_TAG_NAME","ComNav","proxyCustomElement","H","this","inheritedAttributes","mobileMenuIconClick","mobileMenuOpen","disconnectedCallback","_a","resizeObserver","disconnect","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","slottedNavigableItems","querySelectorAll","registerCloseHandlerForFocusOutEventOn","componentDidLoad","comNavDidLoadWithResizeObserver","observe","document","body","setAriaAttribute","attr","value","forceUpdate","closeMobileMenu","onClickOnFinalAction","render","menuAriaLabel","undefined","h","Host","key","class","appName","name","currentActiveSizing","role","id","onClick","exitMobileMenuOnKeyDown","evt","isEscapeKey"],"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@import './com-nav-focus.scss';\n@import '../../style/breakpoints.scss';\n@import '../../style/reset.scss';\n\n:host {\n    --wcs-com-nav-menu-bar-height: calc(var(--wcs-semantic-size-base) * 8);\n    --wcs-com-nav-border-color: var(--wcs-semantic-color-border-secondary);\n    --wcs-com-nav-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-com-nav-background-color: var(--wcs-semantic-color-background-surface-primary);\n\n    --wcs-com-nav-app-name-color: var(--wcs-semantic-color-text-primary);\n    --wcs-com-nav-app-name-font-weight: var(--wcs-semantic-font-weight-heavy);\n    --wcs-com-nav-app-name-font-size: var(--wcs-semantic-font-size-heading-5);\n    --wcs-com-nav-app-name-line-height: var(--wcs-semantic-font-line-height-large);\n\n    --wcs-com-nav-item-color: var(--wcs-semantic-color-foreground-action-neutral-default);\n    --wcs-com-nav-item-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-com-nav-focus-outline-color: var(--wcs-semantic-color-border-focus-base);\n\n\n    // Spacings for navbar and mobile overlay\n    --wcs-com-nav-vertical-padding: 0;\n    --wcs-com-nav-horizontal-padding: var(--wcs-semantic-spacing-large);\n    --wcs-com-nav-mobile-overlay-gap: var(--wcs-semantic-spacing-large);\n    --wcs-com-nav-mobile-overlay-padding: var(--wcs-semantic-spacing-large);\n\n    // Burger icon (mobile)\n    --wcs-com-nav-mobile-menu-icon-border-color: var(--wcs-semantic-color-border-secondary);\n    --wcs-com-nav-mobile-menu-icon-gap: calc(var(--wcs-semantic-spacing-base) * 2);\n    --wcs-com-nav-mobile-menu-icon-margin-left: var(--wcs-semantic-spacing-base);\n    --wcs-com-nav-mobile-menu-icon-color: var(--wcs-semantic-color-foreground-action-secondary-default);\n\n    // Menu bar (desktop)\n    --wcs-com-nav-menu-bar-gap: calc(var(--wcs-semantic-spacing-base) * 5); // 40px\n    --wcs-com-nav-menu-bar-margin-left: calc(var(--wcs-semantic-spacing-base) * 6.25); // 50 px\n\n    display: block;\n    position: relative;\n    height: var(--wcs-com-nav-menu-bar-height);\n    border-bottom: var(--wcs-com-nav-border-width) solid var(--wcs-com-nav-border-color);\n\n    .container {\n        padding: var(--wcs-com-nav-vertical-padding) var(--wcs-com-nav-horizontal-padding);\n        height: 100%;\n        display: flex;\n        align-items: center;\n        flex-direction: row;\n        justify-content: space-between;\n\n        nav {\n            display: flex;\n            align-items: center;\n        }\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: var(--wcs-com-nav-app-name-font-weight);\n        font-size: var(--wcs-com-nav-app-name-font-size);\n        line-height: var(--wcs-com-nav-app-name-line-height);\n        color: var(--wcs-com-nav-app-name-color);\n\n        ::slotted(a) {\n            @include reset-anchor;\n        }\n\n        ::slotted(a:focus-visible) {\n            outline: none;\n        }\n    }\n\n    .app-name:focus-within {\n        @include focus-outline($outline-color: var(--wcs-com-nav-focus-outline-color));\n    }\n\n    .menu-bar {\n        display: none;\n    }\n\n    #mobile-menu-icon {\n        display: flex;\n        align-items: center;\n        flex-wrap: nowrap;\n        color: var(--wcs-com-nav-mobile-menu-icon-color);\n        padding-left: var(--wcs-com-nav-mobile-menu-icon-gap);\n        margin-left: var(--wcs-com-nav-mobile-menu-icon-margin-left);\n        border-left: solid 1px var(--wcs-com-nav-mobile-menu-icon-border-color);\n    }\n\n    #mobile-menu-icon:focus {\n        outline: none;\n    }\n\n    #mobile-menu-icon:focus-visible::after {\n        @include focus-outline($outline-color: var(--wcs-com-nav-focus-outline-color));\n    }\n\n    @supports not selector(#mobile-menu-icon:focus-visible::after) {\n        #mobile-menu-icon:focus::after {\n            @include focus-outline($outline-color: var(--wcs-com-nav-focus-outline-color));\n        }\n    }\n\n    button {\n        background: none;\n        border: none;\n        padding: 0;\n        margin: 0;\n        font: inherit;\n        color: inherit;\n        cursor: pointer;\n    }\n\n    #mobile-menu-icon:after {\n        font-family: icons;\n        font-size: 18px;\n        cursor: pointer;\n        content: \"\\f198\";\n        line-height: 1;\n        box-sizing: border-box;\n    }\n\n    #mobile-menu-icon[aria-expanded=\"true\"]:after {\n        content: \"\\f129\";\n    }\n\n    .mobile-overlay {\n        display: none;\n    }\n\n    .mobile-overlay[data-mobile-open] {\n        padding: var(--wcs-com-nav-mobile-overlay-padding);\n        position: absolute;\n        top: var(--wcs-com-nav-menu-bar-height);\n        left: 0;\n        right: 0;\n        display: flex;\n        flex-direction: column;\n        gap: var(--wcs-com-nav-mobile-overlay-gap);\n        z-index: 9999;\n        background-color: var(--wcs-com-nav-background-color);\n\n        ::slotted(wcs-com-nav-item) {\n            color: var(--wcs-com-nav-item-color);\n            font-weight: var(--wcs-com-nav-item-font-weight);\n        }\n    }\n}\n\n@include for-tablet-portrait-up {\n    :host {\n        .container {\n            margin: 0 auto;\n            max-width: var(--wcs-com-content-max-width);\n        }\n\n        nav {\n            height: 100%;\n        }\n\n        .menu-bar {\n            display: flex;\n            align-items: center;\n            height: 100%;\n            margin-left: var(--wcs-com-nav-menu-bar-margin-left);\n\n            ::slotted(*:not(:first-child)) {\n                margin-left: var(--wcs-com-nav-menu-bar-gap);\n            }\n\n            ::slotted(wcs-com-nav-item) {\n                height: 100%;\n                color: var(--wcs-com-nav-item-color);\n                font-weight: var(--wcs-com-nav-item-font-weight);\n            }\n\n            // Focus style for nav item in menu bar\n            ::slotted(wcs-com-nav-item:focus-within) {\n                @include com-nav-item-desktop-focus-outline(var(--wcs-com-nav-focus-outline-color));\n            }\n        }\n\n        #mobile-menu-icon {\n            display: none;\n        }\n\n        .mobile-overlay {\n            display: none !important;\n        }\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    forceUpdate,\n    h,\n    Host,\n    Listen,\n    Method,\n    Prop,\n    State,\n} from '@stencil/core';\nimport { comNavDidLoadWithResizeObserver, registerCloseHandlerForFocusOutEventOn } from \"./com-nav-utils\";\nimport { inheritAriaAttributes, inheritAttributes, isEscapeKey } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { ComNavSize } from \"./com-nav-size\";\n\n\nconst COM_NAV_INHERITED_ATTRS = ['title'];\n\nconst WCS_COM_NAV_SUBMENU_TAG_NAME = 'WCS-COM-NAV-SUBMENU';\n\n/**\n * *Part of communication design system*\n *\n * The com-nav component is a container for navigation links to external or internal pages of the website.\n *\n * @slot <no-name> - Default slot containing all the menu declarations\n * @slot app-name - (Optional) Extra slot for the application name\n * @slot actions - Slot for actions placed on the right part of the container\n * \n * @cssprop --wcs-com-nav-menu-bar-height - Height of the menu bar\n * @cssprop --wcs-com-nav-border-color - Border color of the bottom border of the com-nav\n * @cssprop --wcs-com-nav-border-width - Border width of the border below com-nav\n * @cssprop --wcs-com-nav-background-color - Background color of the com-nav;\n * @cssprop --wcs-com-nav-app-name-color - App name color\n * @cssprop --wcs-com-nav-app-name-font-weight - App name font-weight\n * @cssprop --wcs-com-nav-app-name-font-size - Font size of the App name text\n * @cssprop --wcs-com-nav-app-name-line-height - Line height of the App name text\n * @cssprop --wcs-com-nav-item-color - Color of the wcs-nav-item inside menu-bar\n * @cssprop --wcs-com-nav-item-font-weight - Font weight of the wcs-nav-item inside menu-bar\n * @cssprop --wcs-com-nav-focus-outline-color - Focus outline color of the wcs-nav-item inside menu-bar\n * @cssprop --wcs-com-nav-horizontal-padding - Horizontal padding of wcs-com-nav\n * @cssprop --wcs-com-nav-vertical-padding - Vertical padding of wcs-com-nav\n * @cssprop --wcs-com-nav-mobile-overlay-gap - Gap between each items section in mobile overlay\n * @cssprop --wcs-com-nav-mobile-overlay-padding - Padding inside mobile overlay\n * @cssprop --wcs-com-nav-mobile-menu-icon-border-color - Bar border color on the left of icon mobile menu\n * @cssprop --wcs-com-nav-mobile-menu-icon-gap- Gap between icon mobile menu and separator on the left\n * @cssprop --wcs-com-nav-mobile-menu-icon-margin-left - Margin left of icon mobile menu\n * @cssprop --wcs-com-nav-menu-bar-gap - Gap between each item inside menu-bar\n * @cssprop --wcs-com-nav-menu-bar-margin-left - Margin left between menu bar and the app-name section\n */\n@Component({\n    tag: 'wcs-com-nav',\n    styleUrl: 'com-nav.scss',\n    shadow: true,\n})\nexport class ComNav implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLWcsComNavElement;\n    private inheritedAttributes: { [k: string]: any } = {};\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() public currentActiveSizing: ComNavSize;\n    private resizeObserver: ResizeObserver;\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.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, COM_NAV_INHERITED_ATTRS)\n        };\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    componentDidLoad(): void {\n        if(!this.resizeObserver) {\n            this.resizeObserver = comNavDidLoadWithResizeObserver(this);\n            this.resizeObserver.observe(document.body);\n        }\n    }\n    \n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        // XXX: Special case on this component because of the desktop / mobile mode that re-renders the <nav> element,\n        // making it lose all its attribute\n        this.inheritedAttributes[attr] = value;\n        forceUpdate(this);\n    }\n\n    private closeMobileMenu() {\n        this.mobileMenuOpen = false;\n    }\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 submenu 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.closeMobileMenu();\n    }\n    \n    render() {\n        const menuAriaLabel = this.inheritedAttributes['aria-label'] || undefined;\n        \n        return (\n            <Host>\n                <div class=\"container\">\n                    <div class=\"container-left\">\n                        <div class=\"app-name\">\n                            {this.appName}\n                            <slot name=\"app-name\"/>\n                        </div>\n                        {this.currentActiveSizing === 'desktop' ?\n                            <nav role=\"navigation\" {...this.inheritedAttributes}>\n                                <div class=\"menu-bar\" role=\"list\">\n                                    {this.currentActiveSizing === 'desktop' \n                                        ? <slot/> \n                                        : null}\n                                </div>\n                            </nav>\n                            : null}\n                    </div>\n                    <div class=\"container-right\">\n                        <slot name=\"actions\"/>\n                        {this.currentActiveSizing === 'mobile' ?\n                            <nav id=\"wcs-com-nav-mobile-menu\" role=\"navigation\" {...this.inheritedAttributes}>\n                                <button id=\"mobile-menu-icon\"\n                                    aria-label={menuAriaLabel}\n                                    aria-expanded={this.mobileMenuOpen ? \"true\" : \"false\"}\n                                    aria-controls=\"wcs-com-nav-mobile-menu\"\n                                    onClick={() => this.mobileMenuIconClick()}></button>\n                                {this.currentActiveSizing === 'mobile'\n                                    ? <div class=\"mobile-overlay\" data-mobile-open={this.mobileMenuOpen} role=\"list\"><slot /></div>\n                                    : null}\n                            </nav>\n                            : null}\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n\n    /**\n     * Close the mobile menu if the user press escape.\n     * @param evt keydown event on window target.\n     */\n    @Listen('keydown', {target: 'window'})\n    exitMobileMenuOnKeyDown(evt: KeyboardEvent) {\n        if (isEscapeKey(evt)) {\n            this.closeMobileMenu();\n        }\n    }\n}\n"],"mappings":"6JAAA,MAAMA,EAAY,07JAClB,MAAAC,EAAeD,ECiBf,MAAME,EAA0B,CAAC,SAEjC,MAAMC,EAA+B,sB,MAqCxBC,EAAMC,EAAA,MAAAD,UAAAE,E,kEAEPC,KAAAC,oBAA4C,G,2CAKT,M,mCAInC,mBAAAC,GACJF,KAAKG,gBAAkBH,KAAKG,c,CAGhC,oBAAAC,G,OACIC,EAAAL,KAAKM,kBAAc,MAAAD,SAAA,SAAAA,EAAEE,Y,CAGzB,iBAAAC,GACIR,KAAKC,oBAAmBQ,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsBX,KAAKY,KAC3BC,EAAkBb,KAAKY,GAAIjB,IAGlC,MAAMmB,EAAwBd,KAAKY,GAAGG,iBAAiB,oEACvDC,EAAoEF,EAAuBlB,E,CAG/F,gBAAAqB,GACI,IAAIjB,KAAKM,eAAgB,CACrBN,KAAKM,eAAiBY,EAAgClB,MACtDA,KAAKM,eAAea,QAAQC,SAASC,K,EAK7C,sBAAMC,CAAiBC,EAAyBC,GAG5CxB,KAAKC,oBAAoBsB,GAAQC,EACjCC,EAAYzB,K,CAGR,eAAA0B,GACJ1B,KAAKG,eAAiB,K,CAU1B,oBAAAwB,GACI3B,KAAK0B,iB,CAGT,MAAAE,GACI,MAAMC,EAAgB7B,KAAKC,oBAAoB,eAAiB6B,UAEhE,OACIC,EAACC,EAAI,CAAAC,IAAA,4CACDF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,aACPH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBACPH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,YACNlC,KAAKmC,QACNJ,EAAA,QAAAE,IAAA,2CAAMG,KAAK,cAEdpC,KAAKqC,sBAAwB,UAC1BN,EAAA,MAAAtB,OAAAC,OAAA,CAAK4B,KAAK,cAAiBtC,KAAKC,qBAC5B8B,EAAA,OAAKG,MAAM,WAAWI,KAAK,QACtBtC,KAAKqC,sBAAwB,UACxBN,EAAA,aACA,OAGZ,MAEVA,EAAA,OAAAE,IAAA,2CAAKC,MAAM,mBACPH,EAAA,QAAAE,IAAA,2CAAMG,KAAK,YACVpC,KAAKqC,sBAAwB,SAC1BN,EAAA,MAAAtB,OAAAC,OAAA,CAAK6B,GAAG,0BAA0BD,KAAK,cAAiBtC,KAAKC,qBACzD8B,EAAA,UAAQQ,GAAG,mBAAkB,aACbV,EAAa,gBACV7B,KAAKG,eAAiB,OAAS,QAAO,gBACvC,0BACdqC,QAAS,IAAMxC,KAAKE,wBACvBF,KAAKqC,sBAAwB,SACxBN,EAAA,OAAKG,MAAM,iBAAgB,mBAAmBlC,KAAKG,eAAgBmC,KAAK,QAAOP,EAAA,cAC/E,MAER,O,CAY1B,uBAAAU,CAAwBC,GACpB,GAAIC,EAAYD,GAAM,CAClB1C,KAAK0B,iB"}

package/bundle/wcs-counter.js

@@ -1,2 +1,2 @@
-import{p as t,H as s,d as e,h as i,c as n}from"./p-2bef72c7.js";import{i as a,a as r,p as c,s as o,e as u,f as h,g as d,h as l}from"./p-2e9b9605.js";import{d as f}from"./p-cdc6f6c2.js";import{d as w}from"./p-98bd8a96.js";import{d as m}from"./p-c8b73e93.js";const b="@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{--wcs-counter-border-radius:var(--wcs-semantic-border-radius-full);--wcs-counter-value-color-default:var(--wcs-semantic-color-text-primary);--wcs-counter-value-color-disabled:var(--wcs-semantic-color-text-tertiary);--wcs-counter-font-weight:var(--wcs-semantic-font-weight-heavy);--wcs-counter-height-m:var(--wcs-semantic-size-m);--wcs-counter-height-l:var(--wcs-semantic-size-l);--wcs-counter-font-size-m:var(--wcs-semantic-font-size-m);--wcs-counter-font-size-l:var(--wcs-semantic-font-size-l);--wcs-counter-padding-m:var(--wcs-semantic-spacing-small);--wcs-counter-padding-l:var(--wcs-semantic-spacing-base);--wcs-counter-background-color:var(--wcs-semantic-color-background-surface-secondary);--wcs-counter-gap-size-m:calc(1.5 * var(--wcs-semantic-spacing-base));--wcs-counter-gap-size-l:calc(2 * var(--wcs-semantic-spacing-base));--wcs-counter-outline-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-counter-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);--wcs-counter-padding:var(--wcs-counter-padding-m);--wcs-counter-height:var(--wcs-counter-height-m);--wcs-counter-font-size:var(--wcs-counter-font-size-m);--wcs-counter-gap:var(--wcs-counter-gap-size-m);display:flex}:host .counter{box-sizing:border-box;height:var(--wcs-counter-height);font-family:var(--wcs-font-sans-serif);font-size:var(--wcs-counter-font-size);font-weight:var(--wcs-counter-font-weight);color:var(--wcs-counter-value-color-default);display:flex;align-items:center;padding:var(--wcs-counter-padding);width:fit-content;overflow:hidden;border-radius:var(--wcs-counter-border-radius);background-color:var(--wcs-counter-background-color);background-clip:padding-box;gap:var(--wcs-counter-gap)}:host .counter:focus-within{outline:none}:host .counter:has(.current-value:focus-visible){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-counter-outline-color-focus);outline-offset:0;border-radius:var(--wcs-counter-border-radius)}@supports not selector(&:has(.current-value:focus-visible)){:host .counter:focus-within{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-counter-outline-color-focus);outline-offset:0;border-radius:var(--wcs-counter-border-radius)}}:host .counter-container{height:var(--wcs-counter-height);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}:host .outliers{position:absolute}:host #outlier-down{top:calc(var(--wcs-counter-height) / 2 * -1)}:host #outlier-up{bottom:calc(var(--wcs-counter-height) / 2 * -1)}:host .current-value{outline:none}:host .animate-up{animation:spin-animation-up var(--wcs-counter-transition-duration) ease-in-out}:host .animate-down{animation:spin-animation-down var(--wcs-counter-transition-duration) ease-in-out}:host [hidden]{opacity:0}:host([size=m]){--wcs-counter-padding:var(--wcs-counter-padding-m);--wcs-counter-height:var(--wcs-counter-height-m);--wcs-counter-font-size:var(--wcs-counter-font-size-m);--wcs-counter-gap:var(--wcs-counter-gap-size-m)}:host([size=l]){--wcs-counter-padding:var(--wcs-counter-padding-l);--wcs-counter-height:var(--wcs-counter-height-l);--wcs-counter-font-size:var(--wcs-counter-font-size-l);--wcs-counter-gap:var(--wcs-counter-gap-size-l)}:host([disabled]){cursor:not-allowed}:host([disabled]) .counter{color:var(--wcs-counter-value-color-disabled)}";const p=b;const v=["tabindex","title"];const g=t(class t extends s{constructor(){super();this.__registerHost();this.__attachShadow();this.wcsChange=e(this,"wcsChange",7);this.wcsBlur=e(this,"wcsBlur",7);this.inheritedAttributes={};this.ANIMATION_DURATION=150;this.animateRunning=false;this.handleDecrement=()=>{if(this.disabled)return;if(this.min===undefined||this.value>this.min){this.animateRunning=true;this.value-=this.step;this.notifyChange();this.animate("up")}};this.handleIncrement=()=>{if(this.disabled)return;if(this.max===undefined||this.value<this.max){this.animateRunning=true;this.value+=this.step;this.notifyChange();this.animate("down")}};this.animate=t=>{this.animateRunning=true;const s=Array.from(this.counterContainer.children).filter((t=>t.classList.contains("outliers")));this.counterContainer.classList.add("animate-"+t);s.forEach((t=>{t.hidden=false}));setTimeout((()=>{this.counterContainer.classList.remove("animate-"+t);s.forEach((t=>{t.hidden=true}));this.displayedValue=this.value;this.animateRunning=false}),this.ANIMATION_DURATION-20)};this.size="m";this.label=undefined;this.disabled=false;this.min=undefined;this.max=undefined;this.step=1;this.value=undefined;this.displayedValue=undefined}componentWillLoad(){this.handleValueChange();this.inheritedAttributes=Object.assign(Object.assign({},a(this.el)),r(this.el,v))}componentDidRender(){var t,s;this.ANIMATION_DURATION=(s=c((t=window.getComputedStyle(this.el).getPropertyValue("--wcs-counter-transition-duration"))!==null&&t!==void 0?t:"150ms"))!==null&&s!==void 0?s:150}async setAriaAttribute(t,s){o(this.spinButton,t,s)}valueChange(t,s){if(s===t)return;this.handleValueChange()}handleValueChange(){this.setMinimumIfValueIsUndefinedOrNull();this.ensureValueIsNotOutOfMinMax();this.updateDisplayValueIfNoAnimationRunning()}updateDisplayValueIfNoAnimationRunning(){if(!this.animateRunning){this.displayedValue=this.value}}ensureValueIsNotOutOfMinMax(){if(this.max!==undefined&&this.value>this.max){this.value=this.max}else if(this.min!==undefined&&this.value<this.min){this.value=this.min}}setMinimumIfValueIsUndefinedOrNull(){var t;if(this.value===undefined||this.value===null){this.value=(t=this.min)!==null&&t!==void 0?t:0}}onKeyDown(t){if(this.disabled)return;if(u(t)){t.preventDefault();this.handleIncrement()}if(h(t)){t.preventDefault();this.handleDecrement()}if(d(t)){t.preventDefault();if(this.min!=null){this.value=this.min;this.displayedValue=this.value;this.notifyChange()}}if(l(t)){t.preventDefault();if(this.max!=null){this.value=this.max;this.displayedValue=this.value;this.notifyChange()}}}notifyChange(){this.wcsChange.emit({value:this.value})}render(){return i(n,{key:"6f1d46e231cc1f88a92a2faa0122e1ed7b9dd834"},i("div",{key:"c3ed2c944c2a8f61ab862411b1d503a84ac37ae4",class:"counter"},i("wcs-button",{key:"c0d0d41e07a99ef0730b22d029529e629ff2f8d3",class:"wcs-primary",shape:"round",size:"s",tabindex:-1,onClick:()=>this.handleDecrement(),onBlur:t=>this.wcsBlur.emit(t),disabled:this.disabled||this.value===this.min},i("wcs-mat-icon",{key:"5003db6a007f8ede51d567a76ea18160fdb60949",icon:"remove",size:"s"})),i("div",{key:"ae3b0ca61a95fe908583df73748b7e7d19242fd0",class:"counter-container",ref:t=>this.counterContainer=t},i("span",{key:"499a0d0ff7f38fcae6664b118991aeb39f5d6034",id:"outlier-down",class:"outliers",hidden:true,"aria-hidden":"true"},this.displayedValue-this.step),i("span",Object.assign({key:"62cab421b796106f0b2957e4d8445266bd6ba754",tabindex:this.disabled?-1:0,role:"spinbutton",ref:t=>this.spinButton=t,class:"current-value",onBlur:t=>this.wcsBlur.emit(t),onKeyDown:t=>this.onKeyDown(t),"aria-disabled":this.disabled?"true":null,"aria-valuenow":this.value,"aria-valuetext":this.value,"aria-valuemin":this.min,"aria-valuemax":this.max,"aria-label":this.label},this.inheritedAttributes),this.displayedValue),i("span",{key:"339b6949d2b64262085f7bda19897f9533166cb4",id:"outlier-up",class:"outliers",hidden:true,"aria-hidden":"true"},this.displayedValue+this.step)),i("wcs-button",{key:"ee77cee6c9d08225c1844d1c4703ea6868c054da",class:"wcs-primary",shape:"round",size:"s",tabindex:-1,onClick:()=>this.handleIncrement(),onBlur:t=>this.wcsBlur.emit(t),disabled:this.disabled||this.value===this.max},i("wcs-mat-icon",{key:"b1b6cc395186ee871801d47ad2b9b62791f64b29",icon:"add",size:"s"}))))}static get delegatesFocus(){return true}get el(){return this}static get watchers(){return{value:["valueChange"]}}static get style(){return p}},[17,"wcs-counter",{size:[513],label:[1],disabled:[516],min:[1026],max:[1026],step:[1026],value:[1026],displayedValue:[32],setAriaAttribute:[64]},undefined,{value:["valueChange"]}]);function y(){if(typeof customElements==="undefined"){return}const t=["wcs-counter","wcs-button","wcs-mat-icon","wcs-spinner"];t.forEach((t=>{switch(t){case"wcs-counter":if(!customElements.get(t)){customElements.define(t,g)}break;case"wcs-button":if(!customElements.get(t)){f()}break;case"wcs-mat-icon":if(!customElements.get(t)){w()}break;case"wcs-spinner":if(!customElements.get(t)){m()}break}}))}const z=g;const k=y;export{z as WcsCounter,k as defineCustomElement};
+import{p as t,H as s,d as e,h as i,c as n}from"./p-2bef72c7.js";import{i as a,a as r,p as c,s as o,e as u,f as h,g as d,h as l}from"./p-53550684.js";import{d as f}from"./p-c13e9bb6.js";import{d as w}from"./p-95eb2e54.js";import{d as m}from"./p-d7d1ea63.js";const p="@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{--wcs-counter-border-radius:var(--wcs-semantic-border-radius-full);--wcs-counter-value-color-default:var(--wcs-semantic-color-text-primary);--wcs-counter-value-color-disabled:var(--wcs-semantic-color-text-tertiary);--wcs-counter-font-weight:var(--wcs-semantic-font-weight-heavy);--wcs-counter-height-m:var(--wcs-semantic-size-m);--wcs-counter-height-l:var(--wcs-semantic-size-l);--wcs-counter-font-size-m:var(--wcs-semantic-font-size-m);--wcs-counter-font-size-l:var(--wcs-semantic-font-size-l);--wcs-counter-padding-m:var(--wcs-semantic-spacing-small);--wcs-counter-padding-l:var(--wcs-semantic-spacing-base);--wcs-counter-background-color:var(--wcs-semantic-color-background-surface-secondary);--wcs-counter-gap-size-m:calc(1.5 * var(--wcs-semantic-spacing-base));--wcs-counter-gap-size-l:calc(2 * var(--wcs-semantic-spacing-base));--wcs-counter-outline-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-counter-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);--wcs-counter-padding:var(--wcs-counter-padding-m);--wcs-counter-height:var(--wcs-counter-height-m);--wcs-counter-font-size:var(--wcs-counter-font-size-m);--wcs-counter-gap:var(--wcs-counter-gap-size-m);display:flex}:host .counter{box-sizing:border-box;height:var(--wcs-counter-height);font-family:var(--wcs-font-sans-serif);font-size:var(--wcs-counter-font-size);font-weight:var(--wcs-counter-font-weight);color:var(--wcs-counter-value-color-default);display:flex;align-items:center;padding:var(--wcs-counter-padding);width:fit-content;overflow:hidden;border-radius:var(--wcs-counter-border-radius);background-color:var(--wcs-counter-background-color);background-clip:padding-box;gap:var(--wcs-counter-gap)}:host .counter:focus-within{outline:none}:host .counter:has(.current-value:focus-visible){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-counter-outline-color-focus);outline-offset:0;border-radius:var(--wcs-counter-border-radius)}@supports not selector(&:has(.current-value:focus-visible)){:host .counter:focus-within{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-counter-outline-color-focus);outline-offset:0;border-radius:var(--wcs-counter-border-radius)}}:host .counter-container{height:var(--wcs-counter-height);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}:host .outliers{position:absolute}:host #outlier-down{top:calc(var(--wcs-counter-height) / 2 * -1)}:host #outlier-up{bottom:calc(var(--wcs-counter-height) / 2 * -1)}:host .current-value{outline:none}:host .animate-up{animation:spin-animation-up var(--wcs-counter-transition-duration) ease-in-out}:host .animate-down{animation:spin-animation-down var(--wcs-counter-transition-duration) ease-in-out}:host [hidden]{opacity:0}:host([size=m]){--wcs-counter-padding:var(--wcs-counter-padding-m);--wcs-counter-height:var(--wcs-counter-height-m);--wcs-counter-font-size:var(--wcs-counter-font-size-m);--wcs-counter-gap:var(--wcs-counter-gap-size-m)}:host([size=l]){--wcs-counter-padding:var(--wcs-counter-padding-l);--wcs-counter-height:var(--wcs-counter-height-l);--wcs-counter-font-size:var(--wcs-counter-font-size-l);--wcs-counter-gap:var(--wcs-counter-gap-size-l)}:host([disabled]){cursor:not-allowed}:host([disabled]) .counter{color:var(--wcs-counter-value-color-disabled)}";const b=p;const v=["tabindex","title"];const g=t(class t extends s{constructor(){super();this.__registerHost();this.__attachShadow();this.wcsChange=e(this,"wcsChange",7);this.wcsBlur=e(this,"wcsBlur",7);this.inheritedAttributes={};this.ANIMATION_DURATION=150;this.animateRunning=false;this.handleDecrement=()=>{if(this.disabled)return;if(this.min===undefined||this.value>this.min){this.animateRunning=true;this.value-=this.step;this.notifyChange();this.animate("up")}};this.handleIncrement=()=>{if(this.disabled)return;if(this.max===undefined||this.value<this.max){this.animateRunning=true;this.value+=this.step;this.notifyChange();this.animate("down")}};this.animate=t=>{this.animateRunning=true;const s=Array.from(this.counterContainer.children).filter((t=>t.classList.contains("outliers")));this.counterContainer.classList.add("animate-"+t);s.forEach((t=>{t.hidden=false}));setTimeout((()=>{this.counterContainer.classList.remove("animate-"+t);s.forEach((t=>{t.hidden=true}));this.displayedValue=this.value;this.animateRunning=false}),this.ANIMATION_DURATION-20)};this.size="m";this.label=undefined;this.disabled=false;this.min=undefined;this.max=undefined;this.step=1;this.value=undefined;this.displayedValue=undefined}componentWillLoad(){this.handleValueChange();this.inheritedAttributes=Object.assign(Object.assign({},a(this.el)),r(this.el,v))}componentDidRender(){var t,s;this.ANIMATION_DURATION=(s=c((t=window.getComputedStyle(this.el).getPropertyValue("--wcs-counter-transition-duration"))!==null&&t!==void 0?t:"150ms"))!==null&&s!==void 0?s:150}async setAriaAttribute(t,s){o(this.spinButton,t,s)}valueChange(t,s){if(s===t)return;this.handleValueChange()}handleValueChange(){this.setMinimumIfValueIsUndefinedOrNull();this.ensureValueIsNotOutOfMinMax();this.updateDisplayValueIfNoAnimationRunning()}updateDisplayValueIfNoAnimationRunning(){if(!this.animateRunning){this.displayedValue=this.value}}ensureValueIsNotOutOfMinMax(){if(this.max!==undefined&&this.value>this.max){this.value=this.max}else if(this.min!==undefined&&this.value<this.min){this.value=this.min}}setMinimumIfValueIsUndefinedOrNull(){var t;if(this.value===undefined||this.value===null){this.value=(t=this.min)!==null&&t!==void 0?t:0}}onKeyDown(t){if(this.disabled)return;if(u(t)){t.preventDefault();this.handleIncrement()}if(h(t)){t.preventDefault();this.handleDecrement()}if(d(t)){t.preventDefault();if(this.min!=null){this.value=this.min;this.displayedValue=this.value;this.notifyChange()}}if(l(t)){t.preventDefault();if(this.max!=null){this.value=this.max;this.displayedValue=this.value;this.notifyChange()}}}notifyChange(){this.wcsChange.emit({value:this.value})}render(){return i(n,{key:"4043c155f8c67913d62318235aca68123f9746b6"},i("div",{key:"c3207a199646cba8f00ec1c942515c0888a64234",class:"counter"},i("wcs-button",{key:"ff7d18184fba7ff20fcaf59539ad379310f8ddc2",class:"wcs-primary",shape:"round",size:"s",tabindex:-1,onClick:()=>this.handleDecrement(),onBlur:t=>this.wcsBlur.emit(t),disabled:this.disabled||this.value===this.min},i("wcs-mat-icon",{key:"6749957c0b3d7ed71552bac6e57f7b1edcc2b30a",icon:"remove",size:"s"})),i("div",{key:"ed9f5e4410f0858b2ac82b5931bc8195fb98eb7f",class:"counter-container",ref:t=>this.counterContainer=t},i("span",{key:"e5ec58628efa9cd02ed824eec9f1f2e9773e24f1",id:"outlier-down",class:"outliers",hidden:true,"aria-hidden":"true"},this.displayedValue-this.step),i("span",Object.assign({key:"27100d8f18b1325dfbab458b8465ce927c21682f",tabindex:this.disabled?-1:0,role:"spinbutton",ref:t=>this.spinButton=t,class:"current-value",onBlur:t=>this.wcsBlur.emit(t),onKeyDown:t=>this.onKeyDown(t),"aria-disabled":this.disabled?"true":null,"aria-valuenow":this.value,"aria-valuetext":this.value,"aria-valuemin":this.min,"aria-valuemax":this.max,"aria-label":this.label},this.inheritedAttributes),this.displayedValue),i("span",{key:"7129d4872e064d799dd654975e112f4200ebb141",id:"outlier-up",class:"outliers",hidden:true,"aria-hidden":"true"},this.displayedValue+this.step)),i("wcs-button",{key:"9fffb1c68e9ab63336983f368aeea7a4f41cd5db",class:"wcs-primary",shape:"round",size:"s",tabindex:-1,onClick:()=>this.handleIncrement(),onBlur:t=>this.wcsBlur.emit(t),disabled:this.disabled||this.value===this.max},i("wcs-mat-icon",{key:"4e07a2939e4c3c24d52bd7c6ff698526de781ca4",icon:"add",size:"s"}))))}static get delegatesFocus(){return true}get el(){return this}static get watchers(){return{value:["valueChange"]}}static get style(){return b}},[17,"wcs-counter",{size:[513],label:[1],disabled:[516],min:[1026],max:[1026],step:[1026],value:[1026],displayedValue:[32],setAriaAttribute:[64]},undefined,{value:["valueChange"]}]);function y(){if(typeof customElements==="undefined"){return}const t=["wcs-counter","wcs-button","wcs-mat-icon","wcs-spinner"];t.forEach((t=>{switch(t){case"wcs-counter":if(!customElements.get(t)){customElements.define(t,g)}break;case"wcs-button":if(!customElements.get(t)){f()}break;case"wcs-mat-icon":if(!customElements.get(t)){w()}break;case"wcs-spinner":if(!customElements.get(t)){m()}break}}))}const z=g;const k=y;export{z as WcsCounter,k as defineCustomElement};
 //# sourceMappingURL=wcs-counter.js.map

package/bundle/wcs-divider.js

@@ -1,2 +1,2 @@
-import{p as e,H as s,h as t,c}from"./p-2bef72c7.js";const r=":host{--wcs-divider-color:var(--wcs-semantic-color-border-secondary);--wcs-divider-height:var(--wcs-semantic-border-width-default);display:block;border-bottom:solid var(--wcs-divider-height) var(--wcs-divider-color)}";const o=r;const i=e(class e extends s{constructor(){super();this.__registerHost();this.__attachShadow()}render(){return t(c,{key:"cf4452e90a52e1bb419fec0db2d9c0838ad7b134"})}static get style(){return o}},[1,"wcs-divider"]);function d(){if(typeof customElements==="undefined"){return}const e=["wcs-divider"];e.forEach((e=>{switch(e){case"wcs-divider":if(!customElements.get(e)){customElements.define(e,i)}break}}))}const n=i;const a=d;export{n as WcsDivider,a as defineCustomElement};
+import{p as e,H as s,h as t,c}from"./p-2bef72c7.js";const r=":host{--wcs-divider-color:var(--wcs-semantic-color-border-secondary);--wcs-divider-height:var(--wcs-semantic-border-width-default);display:block;border-bottom:solid var(--wcs-divider-height) var(--wcs-divider-color)}";const o=r;const i=e(class e extends s{constructor(){super();this.__registerHost();this.__attachShadow()}render(){return t(c,{key:"d0fea091e2fa4aa557e56be65dcb604cd4340309"})}static get style(){return o}},[1,"wcs-divider"]);function d(){if(typeof customElements==="undefined"){return}const e=["wcs-divider"];e.forEach((e=>{switch(e){case"wcs-divider":if(!customElements.get(e)){customElements.define(e,i)}break}}))}const n=i;const a=d;export{n as WcsDivider,a as defineCustomElement};
 //# sourceMappingURL=wcs-divider.js.map

package/bundle/wcs-dropdown-divider.js

@@ -1,2 +1,2 @@
-import{p as d,H as r,h as o,c as e}from"./p-2bef72c7.js";const s=":host{--wcs-dropdown-divider-margin:var(--wcs-semantic-spacing-base) 0;--wcs-dropdown-divider-color:var(--wcs-semantic-color-border-secondary);display:block;margin:var(--wcs-dropdown-divider-margin);overflow:hidden;border-top:1px solid var(--wcs-dropdown-divider-color)}";const t=s;const i=d(class d extends r{constructor(){super();this.__registerHost();this.__attachShadow()}render(){return o(e,{key:"52d90154f003445f1d62badde51df437a38d6f19",slot:"item",tabindex:"-1","aria-hidden":"true"})}static get style(){return t}},[1,"wcs-dropdown-divider"]);function n(){if(typeof customElements==="undefined"){return}const d=["wcs-dropdown-divider"];d.forEach((d=>{switch(d){case"wcs-dropdown-divider":if(!customElements.get(d)){customElements.define(d,i)}break}}))}const c=i;const a=n;export{c as WcsDropdownDivider,a as defineCustomElement};
+import{p as r,H as e,h as o,c as s}from"./p-2bef72c7.js";const d=":host{--wcs-dropdown-divider-margin:var(--wcs-semantic-spacing-base) 0;--wcs-dropdown-divider-color:var(--wcs-semantic-color-border-secondary);display:block;margin:var(--wcs-dropdown-divider-margin);overflow:hidden;border-top:1px solid var(--wcs-dropdown-divider-color)}";const t=d;const c=r(class r extends e{constructor(){super();this.__registerHost();this.__attachShadow()}render(){return o(s,{key:"f6099eab21640cea46aaeb81b78d744416550b62",slot:"item",tabindex:"-1","aria-hidden":"true"})}static get style(){return t}},[1,"wcs-dropdown-divider"]);function i(){if(typeof customElements==="undefined"){return}const r=["wcs-dropdown-divider"];r.forEach((r=>{switch(r){case"wcs-dropdown-divider":if(!customElements.get(r)){customElements.define(r,c)}break}}))}const n=c;const a=i;export{n as WcsDropdownDivider,a as defineCustomElement};
 //# sourceMappingURL=wcs-dropdown-divider.js.map

package/bundle/wcs-dropdown-header.js

@@ -1,2 +1,2 @@
-import{p as e,H as o,h as r,c as s}from"./p-2bef72c7.js";const t=":host{--wcs-dropdown-header-color:var(--wcs-semantic-color-text-tertiary);--wcs-dropdown-header-padding-vertical:var(--wcs-semantic-spacing-base);--wcs-dropdown-header-padding-horizontal:var(--wcs-semantic-spacing-base);--wcs-dropdown-header-font-size:var(--wcs-semantic-font-size-label-2);--wcs-dropdown-header-font-weight:var(--wcs-semantic-font-weight-medium);display:block;padding:var(--wcs-dropdown-header-padding-vertical) var(--wcs-dropdown-header-padding-horizontal);font-size:var(--wcs-dropdown-header-font-size);font-weight:var(--wcs-dropdown-header-font-weight);text-transform:uppercase;color:var(--wcs-dropdown-header-color);white-space:nowrap}";const d=t;const a=e(class e extends o{constructor(){super();this.__registerHost();this.__attachShadow()}render(){return r(s,{key:"a9f4cf33ebcc666bd3f703c3d51d17b655f28ed8",slot:"item",tabindex:"-1"},r("slot",{key:"ccabe9a8805d48d8b2bec9326b5aaa1b6338f06b"}))}static get style(){return d}},[1,"wcs-dropdown-header"]);function c(){if(typeof customElements==="undefined"){return}const e=["wcs-dropdown-header"];e.forEach((e=>{switch(e){case"wcs-dropdown-header":if(!customElements.get(e)){customElements.define(e,a)}break}}))}const n=a;const i=c;export{n as WcsDropdownHeader,i as defineCustomElement};
+import{p as e,H as o,h as r,c as s}from"./p-2bef72c7.js";const t=":host{--wcs-dropdown-header-color:var(--wcs-semantic-color-text-tertiary);--wcs-dropdown-header-padding-vertical:var(--wcs-semantic-spacing-base);--wcs-dropdown-header-padding-horizontal:var(--wcs-semantic-spacing-base);--wcs-dropdown-header-font-size:var(--wcs-semantic-font-size-label-2);--wcs-dropdown-header-font-weight:var(--wcs-semantic-font-weight-medium);display:block;padding:var(--wcs-dropdown-header-padding-vertical) var(--wcs-dropdown-header-padding-horizontal);font-size:var(--wcs-dropdown-header-font-size);font-weight:var(--wcs-dropdown-header-font-weight);text-transform:uppercase;color:var(--wcs-dropdown-header-color);white-space:nowrap}";const a=t;const d=e(class e extends o{constructor(){super();this.__registerHost();this.__attachShadow()}render(){return r(s,{key:"63465bc35721ca858aeb4465f0581151f372b532",slot:"item",tabindex:"-1"},r("slot",{key:"7f064837e9840499d7916fde0ff67ef98ecf649a"}))}static get style(){return a}},[1,"wcs-dropdown-header"]);function n(){if(typeof customElements==="undefined"){return}const e=["wcs-dropdown-header"];e.forEach((e=>{switch(e){case"wcs-dropdown-header":if(!customElements.get(e)){customElements.define(e,d)}break}}))}const c=d;const i=n;export{c as WcsDropdownHeader,i as defineCustomElement};
 //# sourceMappingURL=wcs-dropdown-header.js.map

package/bundle/wcs-dropdown-item.js

@@ -1,2 +1,2 @@
-import{p as o,H as r,d as e,h as t,c}from"./p-2bef72c7.js";import{c as d,d as s}from"./p-2e9b9605.js";const n="wcs-dropdown-item{--wcs-dropdown-item-height:var(--wcs-semantic-size-m);--wcs-dropdown-item-padding-horizontal:var(--wcs-semantic-spacing-base);--wcs-dropdown-item-padding-vertical:0;--wcs-dropdown-item-text-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-dropdown-item-text-color-default:var(--wcs-semantic-color-foreground-action-neutral-default);--wcs-dropdown-item-text-color-hover:var(--wcs-semantic-color-foreground-action-neutral-hover);--wcs-dropdown-item-text-color-press:var(--wcs-semantic-color-foreground-action-neutral-press);--wcs-dropdown-item-background-color-default:var(--wcs-semantic-color-background-action-neutral-default);--wcs-dropdown-item-background-color-hover:var(--wcs-semantic-color-background-action-neutral-hover);--wcs-dropdown-item-background-color-press:var(--wcs-semantic-color-background-action-neutral-press);--wcs-dropdown-item-border-width-focus:var(--wcs-semantic-border-width-large);--wcs-dropdown-item-border-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-dropdown-item-border-radius:var(--wcs-semantic-border-radius-base);--wcs-dropdown-item-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);padding:0 var(--wcs-dropdown-item-padding-horizontal);font-weight:var(--wcs-dropdown-item-text-font-weight);cursor:pointer;color:var(--wcs-dropdown-item-text-color-default);height:var(--wcs-dropdown-item-height);display:flex;flex-direction:row;align-items:center;border-radius:var(--wcs-dropdown-item-border-radius);transition:background-color var(--wcs-dropdown-item-transition-duration) ease-in-out}wcs-dropdown-item:hover{color:var(--wcs-dropdown-item-text-color-hover);background-color:var(--wcs-dropdown-item-background-color-hover)}wcs-dropdown-item:active{color:var(--wcs-dropdown-item-text-color-press);background-color:var(--wcs-dropdown-item-background-color-press)}wcs-dropdown-item:focus-visible{outline:dashed var(--wcs-dropdown-item-border-width-focus) var(--wcs-dropdown-item-border-color-focus);outline-offset:calc(-1 * var(--wcs-dropdown-item-border-width-focus))}@supports not selector(wcs-dropdown-item:focus-visible){wcs-dropdown-item:focus-within{outline:dashed var(--wcs-dropdown-item-border-width-focus) var(--wcs-dropdown-item-border-color-focus);outline-offset:calc(-1 * var(--wcs-dropdown-item-border-width-focus))}}";const i=n;const a=o(class o extends r{constructor(){super();this.__registerHost();this.wcsDropdownItemClick=e(this,"wcsDropdownItemClick",7)}onMouseUp(o){this.wcsDropdownItemClick.emit()}onKeyDown(o){if(d(o)||s(o)){o.preventDefault();o.stopImmediatePropagation();this.wcsDropdownItemClick.emit()}}render(){return t(c,{key:"70e0767afe5fe295df4292e356db89d555fa71a3",slot:"item",role:"menuitem",tabindex:"-1"},t("slot",{key:"11cd674f89784aec6bfa1ba4d15f0fb0f25d976e"}))}static get style(){return i}},[4,"wcs-dropdown-item",undefined,[[1,"mouseup","onMouseUp"],[0,"keydown","onKeyDown"]]]);function w(){if(typeof customElements==="undefined"){return}const o=["wcs-dropdown-item"];o.forEach((o=>{switch(o){case"wcs-dropdown-item":if(!customElements.get(o)){customElements.define(o,a)}break}}))}const m=a;const u=w;export{m as WcsDropdownItem,u as defineCustomElement};
+import{p as o,H as r,d as e,h as t,c}from"./p-2bef72c7.js";import{c as d,d as s}from"./p-53550684.js";const n="wcs-dropdown-item{--wcs-dropdown-item-height:var(--wcs-semantic-size-m);--wcs-dropdown-item-padding-horizontal:var(--wcs-semantic-spacing-base);--wcs-dropdown-item-padding-vertical:0;--wcs-dropdown-item-text-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-dropdown-item-text-color-default:var(--wcs-semantic-color-foreground-action-neutral-default);--wcs-dropdown-item-text-color-hover:var(--wcs-semantic-color-foreground-action-neutral-hover);--wcs-dropdown-item-text-color-press:var(--wcs-semantic-color-foreground-action-neutral-press);--wcs-dropdown-item-background-color-default:var(--wcs-semantic-color-background-action-neutral-default);--wcs-dropdown-item-background-color-hover:var(--wcs-semantic-color-background-action-neutral-hover);--wcs-dropdown-item-background-color-press:var(--wcs-semantic-color-background-action-neutral-press);--wcs-dropdown-item-border-width-focus:var(--wcs-semantic-border-width-large);--wcs-dropdown-item-border-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-dropdown-item-border-radius:var(--wcs-semantic-border-radius-base);--wcs-dropdown-item-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);padding:0 var(--wcs-dropdown-item-padding-horizontal);font-weight:var(--wcs-dropdown-item-text-font-weight);cursor:pointer;color:var(--wcs-dropdown-item-text-color-default);height:var(--wcs-dropdown-item-height);display:flex;flex-direction:row;align-items:center;border-radius:var(--wcs-dropdown-item-border-radius);transition:background-color var(--wcs-dropdown-item-transition-duration) ease-in-out}wcs-dropdown-item:hover{color:var(--wcs-dropdown-item-text-color-hover);background-color:var(--wcs-dropdown-item-background-color-hover)}wcs-dropdown-item:active{color:var(--wcs-dropdown-item-text-color-press);background-color:var(--wcs-dropdown-item-background-color-press)}wcs-dropdown-item:focus-visible{outline:dashed var(--wcs-dropdown-item-border-width-focus) var(--wcs-dropdown-item-border-color-focus);outline-offset:calc(-1 * var(--wcs-dropdown-item-border-width-focus))}@supports not selector(wcs-dropdown-item:focus-visible){wcs-dropdown-item:focus-within{outline:dashed var(--wcs-dropdown-item-border-width-focus) var(--wcs-dropdown-item-border-color-focus);outline-offset:calc(-1 * var(--wcs-dropdown-item-border-width-focus))}}";const i=n;const a=o(class o extends r{constructor(){super();this.__registerHost();this.wcsDropdownItemClick=e(this,"wcsDropdownItemClick",7)}onMouseUp(o){this.wcsDropdownItemClick.emit()}onKeyDown(o){if(d(o)||s(o)){o.preventDefault();o.stopImmediatePropagation();this.wcsDropdownItemClick.emit()}}render(){return t(c,{key:"5833a19574cfb6d128e6fb015ec2124e3d40d8ce",slot:"item",role:"menuitem",tabindex:"-1"},t("slot",{key:"c679dd4325533514ebff2934bd7d21ff2f0c3e9c"}))}static get style(){return i}},[4,"wcs-dropdown-item",undefined,[[1,"mouseup","onMouseUp"],[0,"keydown","onKeyDown"]]]);function w(){if(typeof customElements==="undefined"){return}const o=["wcs-dropdown-item"];o.forEach((o=>{switch(o){case"wcs-dropdown-item":if(!customElements.get(o)){customElements.define(o,a)}break}}))}const m=a;const u=w;export{m as WcsDropdownItem,u as defineCustomElement};
 //# sourceMappingURL=wcs-dropdown-item.js.map

package/bundle/wcs-dropdown.js

@@ -1,2 +1,2 @@
-import{p as e,H as o,h as t,c as r}from"./p-2bef72c7.js";import{S as s}from"./p-35d7af48.js";import{j as a,s as i,i as n,a as c}from"./p-2e9b9605.js";import{k as d}from"./p-97e70e10.js";import{d as l}from"./p-cdc6f6c2.js";import{d as p}from"./p-c8b73e93.js";import{c as w}from"./p-e1fb3625.js";function h(e,o){const t=d(e);if(t==="UNKNOWN"){return[]}switch(o){case"closed":switch(t){case"UP_ARROW":return[{kind:"OpenMenu"},{kind:"FocusItem",target:"last"}];case"DOWN_ARROW":return[{kind:"OpenMenu"},{kind:"FocusItem",target:"first"}];case"SPACE":case"ENTER":return[{kind:"OpenMenu"},{kind:"FocusItem",target:"first"}]}break;case"opened":switch(t){case"UP_ARROW":return[{kind:"FocusItem",target:"previous"}];case"DOWN_ARROW":return[{kind:"FocusItem",target:"next"}];case"HOME":return[{kind:"FocusItem",target:"first"}];case"END":return[{kind:"FocusItem",target:"last"}];case"ESCAPE":case"MAJ+TAB":case"TAB":return[{kind:"CloseMenu"}]}break;default:throw Error("Unknown error")}return[]}const u=':host{display:flex;--wcs-dropdown-outline-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-dropdown-padding-empty:var(--wcs-semantic-spacing-large);--wcs-dropdown-plain-arrow-color:var(--wcs-semantic-color-foreground-action-primary-default);--wcs-dropdown-stroked-arrow-color:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-dropdown-clear-arrow-color:var(--wcs-semantic-color-foreground-action-tertiary-default);--wcs-dropdown-arrow-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-dropdown-overlay-max-height:360px;--wcs-dropdown-overlay-padding:var(--wcs-semantic-spacing-base);--wcs-dropdown-overlay-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-dropdown-overlay-border-width:var(--wcs-semantic-border-width-default);--wcs-dropdown-overlay-border-radius:var(--wcs-semantic-border-radius-base);--wcs-dropdown-overlay-border-color:var(--wcs-semantic-color-border-secondary)}:host wcs-button{height:fit-content}:host svg{margin-right:-0.25rem}button{position:absolute;opacity:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;outline:0;outline-offset:0}button:focus-visible+wcs-button{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-dropdown-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-button-border-radius)}@supports not selector(button:focus-visible + wcs-button){button:focus-within+wcs-button{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-dropdown-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-button-border-radius)}}.wcs-button-content-wrapper{display:flex;align-items:center}.popover{display:none;border:var(--wcs-dropdown-overlay-border-width) solid var(--wcs-dropdown-overlay-border-color);border-radius:var(--wcs-dropdown-overlay-border-radius);background-color:var(--wcs-dropdown-overlay-background-color);z-index:9999}.show{display:block}.container{min-width:calc(10 * var(--wcs-semantic-size-base));border-radius:inherit;overflow:hidden;padding:var(--wcs-dropdown-overlay-padding);background-color:var(--wcs-dropdown-overlay-background-color)}:host([mode=clear]) .arrow{fill:var(--wcs-dropdown-clear-arrow-color)}:host([mode=stroked]) .arrow{fill:var(--wcs-dropdown-stroked-arrow-color)}:host([mode=plain]) .arrow{fill:var(--wcs-dropdown-plain-arrow-color)}:host([disabled]) .arrow{fill:var(--wcs-dropdown-arrow-color-disabled)}#arrow,#arrow::before{position:absolute;width:8px;height:8px;background:inherit;border:var(--wcs-dropdown-overlay-border-width) solid var(--wcs-dropdown-overlay-border-color)}#arrow{visibility:hidden;z-index:-1}#arrow::before{visibility:visible;content:"";transform:rotate(45deg)}#is-empty{display:block;width:20ch;padding:0 var(--wcs-dropdown-padding-empty)}.popover[data-popper-placement^=top]>#arrow{bottom:-5px}.popover[data-popper-placement^=bottom]>#arrow{top:-6px}.popover[data-popper-placement^=left]>#arrow{right:-4px}.popover[data-popper-placement^=right]>#arrow{left:-6px}';const b=u;const f=["tabindex"];const m=e(class e extends o{constructor(){super();this.__registerHost();this.__attachShadow();this.inheritedAttributes={};this.noArrow=false;this.mode="stroked";this.shape="normal";this.size="m";this.disabled=false;this.placement="bottom-end";this.expanded=false}get items(){return Array.from(this.el.querySelectorAll("wcs-dropdown-item"))}placementChange(){this.popper.setOptions(Object.assign(Object.assign({},this.popper.state.options),{placement:this.placement})).then((e=>this.popper.update()))}onBlur(){this.clearLastFocusedItem();this.expanded=false}componentDidLoad(){this.popper=w(this.wcsButton,this.popoverDiv,{placement:this.placement,modifiers:[{name:"offset",options:{offset:[0,8]}}]});this.fixForFirefoxBelow63()}fixForFirefoxBelow63(){const e=this.el.querySelectorAll("wcs-dropdown-item");const o=this.el.querySelector(".container");if(e.length>0&&o){e.forEach((e=>{this.el.removeChild(e);o.appendChild(e)}))}}onButtonClick(e){this.clearLastFocusedItem();this.expanded=!this.expanded;if(this.expanded){this.focusItem(0)}}onWindowClickEvent(e){const o=a(e,this.el);if(this.expanded&&!o){this.expanded=false}}dropdownItemClick(e){this.expanded=false;this.nativeButton.focus()}onKeyDown(e){const o=this.expanded?"opened":"closed";const t=h(e,o);if(t.length!=0){e.preventDefault()}for(const e of t){this.doActionFromKeyboardEventAssociatedAction(e)}}async setAriaAttribute(e,o){i(this.nativeButton,e,o)}doActionFromKeyboardEventAssociatedAction(e){switch(e.kind){case"OpenMenu":this.expanded=true;this.focusItem(0);break;case"CloseMenu":this.expanded=false;this.nativeButton.focus();break;case"ClearFocus":this.clearLastFocusedItem();break;case"FocusItem":switch(e.target){case"previous":this.focusClosestItem("previous");break;case"next":this.focusClosestItem("next");break;case"first":this.focusItem(0);break;case"last":this.focusItem(this.items.length-1);break}break}}clearLastFocusedItem(){if(this.lastFocusedItemElement){this.lastFocusedItemElement.tabIndex=-1;this.lastFocusedItemElement=null}}focusItem(e){this.clearLastFocusedItem();this.lastFocusedItemElement=this.items[e];if(this.lastFocusedItemElement){this.lastFocusedItemElement.tabIndex=0;requestAnimationFrame((()=>{var e;(e=this.lastFocusedItemElement)===null||e===void 0?void 0:e.focus()}))}}focusClosestItem(e){const o=this.getClosestActiveItemIndexForDirection(e);if(o===-1)return;this.focusItem(o)}getClosestActiveItemIndexForDirection(e){const o=this.items;let t=Array.from(o).indexOf(this.lastFocusedItemElement);const r=0;const s=o.length-1;if(e==="next"&&t<s){t++}else if(e==="previous"&&t>r){t--}else{if(e==="next"&&t>=s){t=0}if(e==="previous"&&t===r){t=s}}return t}componentDidRender(){if(this.popper){this.popper.update()}}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},n(this.el)),c(this.el,f))}render(){return t(r,{key:"96be2f9df0a80b4d6c88cf15419ff29cb001c695"},t("button",Object.assign({key:"562456822837e6ff61ed23569335e42ad4e36df9",id:"dropdown-button","aria-controls":"menu",disabled:this.disabled,"aria-haspopup":"true",role:"button","aria-expanded":this.expanded?"true":"false",ref:e=>this.nativeButton=e,onClick:e=>this.onButtonClick(e),onBlur:e=>e.stopImmediatePropagation()},this.inheritedAttributes),"Dropdown"),t("wcs-button",{key:"66348725409b810219dd1bd4658611c63bbb5eb8",mode:this.mode,shape:this.shape,disabled:this.disabled,size:this.size,ref:e=>this.wcsButton=e,"aria-hidden":"true",tabindex:-1,onClick:e=>this.onButtonClick(e),onBlur:e=>e.stopImmediatePropagation()},t("div",{key:"028e06637e35ecc14b66cf74fba32dc59d58121a",class:"wcs-button-content-wrapper"},t("slot",{key:"7f7e2db54f9b5d3a20588c48c1d3fd6750187017",name:"placeholder"}),this.noArrow?null:t(s,{up:this.expanded}))),t("div",{key:"7f6f4efe22cab63033b3e7775791856ed8e1b921",class:(this.expanded?"show ":"")+"popover",id:"menu",role:"menu","aria-labelledby":"dropdown-button",tabindex:-1,ref:e=>this.popoverDiv=e},t("div",{key:"ca7ce6adea1005d7126d4ae060ada55e9d3b6d70",role:"presentation",id:"arrow","data-popper-arrow":true}),t("div",{key:"0f2a9e15df898550117743f855e7ee0746157ab1",role:"presentation",class:"container"},t("slot",{key:"688fd29a894bae8aee4c848a9b07380c95302ca2",name:"item"},t("span",{key:"a80c902d26d7afed58e8a17646dac92473042fa4",id:"is-empty"})))))}static get delegatesFocus(){return true}get el(){return this}static get watchers(){return{placement:["placementChange"]}}static get style(){return b}},[17,"wcs-dropdown",{noArrow:[516,"no-arrow"],mode:[1],shape:[1],size:[1],disabled:[516],placement:[1],expanded:[32],setAriaAttribute:[64]},[[0,"blur","onBlur"],[8,"click","onWindowClickEvent"],[0,"wcsDropdownItemClick","dropdownItemClick"],[0,"keydown","onKeyDown"]],{placement:["placementChange"]}]);function v(){if(typeof customElements==="undefined"){return}const e=["wcs-dropdown","wcs-button","wcs-spinner"];e.forEach((e=>{switch(e){case"wcs-dropdown":if(!customElements.get(e)){customElements.define(e,m)}break;case"wcs-button":if(!customElements.get(e)){l()}break;case"wcs-spinner":if(!customElements.get(e)){p()}break}}))}const k=m;const g=v;export{k as WcsDropdown,g as defineCustomElement};
+import{p as e,H as o,h as t,c as r}from"./p-2bef72c7.js";import{S as s}from"./p-35d7af48.js";import{j as a,s as i,i as n,a as c}from"./p-53550684.js";import{k as d}from"./p-5a997d17.js";import{d as l}from"./p-c13e9bb6.js";import{d as p}from"./p-95eb2e54.js";import{d as w}from"./p-d7d1ea63.js";import{c as b}from"./p-e1fb3625.js";function h(e,o){const t=d(e);if(t==="UNKNOWN"){return[]}switch(o){case"closed":switch(t){case"UP_ARROW":return[{kind:"OpenMenu"},{kind:"FocusItem",target:"last"}];case"DOWN_ARROW":return[{kind:"OpenMenu"},{kind:"FocusItem",target:"first"}];case"SPACE":case"ENTER":return[{kind:"OpenMenu"},{kind:"FocusItem",target:"first"}]}break;case"opened":switch(t){case"UP_ARROW":return[{kind:"FocusItem",target:"previous"}];case"DOWN_ARROW":return[{kind:"FocusItem",target:"next"}];case"HOME":return[{kind:"FocusItem",target:"first"}];case"END":return[{kind:"FocusItem",target:"last"}];case"ESCAPE":case"MAJ+TAB":case"TAB":return[{kind:"CloseMenu"}]}break;default:throw Error("Unknown error")}return[]}const u=':host{display:flex;position:relative;--wcs-dropdown-outline-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-dropdown-padding-empty:var(--wcs-semantic-spacing-large);--wcs-dropdown-plain-arrow-color:var(--wcs-semantic-color-foreground-action-primary-default);--wcs-dropdown-stroked-arrow-color:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-dropdown-clear-arrow-color:var(--wcs-semantic-color-foreground-action-tertiary-default);--wcs-dropdown-arrow-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-dropdown-overlay-max-height:360px;--wcs-dropdown-overlay-padding:var(--wcs-semantic-spacing-base);--wcs-dropdown-overlay-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-dropdown-overlay-border-width:var(--wcs-semantic-border-width-default);--wcs-dropdown-overlay-border-radius:var(--wcs-semantic-border-radius-base);--wcs-dropdown-overlay-border-color:var(--wcs-semantic-color-border-secondary)}:host wcs-button{height:fit-content}:host svg{margin-right:-0.25rem}button{position:absolute;opacity:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;outline:0;outline-offset:0}button:focus-visible+wcs-button{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-dropdown-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-button-border-radius)}@supports not selector(button:focus-visible + wcs-button){button:focus-within+wcs-button{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-dropdown-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-button-border-radius)}}.wcs-button-content-wrapper{display:flex;align-items:center}.popover{width:max-content;display:none;border:var(--wcs-dropdown-overlay-border-width) solid var(--wcs-dropdown-overlay-border-color);border-radius:var(--wcs-dropdown-overlay-border-radius);background-color:var(--wcs-dropdown-overlay-background-color);z-index:9999}.show{display:block}.container{min-width:calc(10 * var(--wcs-semantic-size-base));border-radius:inherit;overflow:hidden;padding:var(--wcs-dropdown-overlay-padding);background-color:var(--wcs-dropdown-overlay-background-color)}:host([mode=clear]) .arrow{fill:var(--wcs-dropdown-clear-arrow-color)}:host([mode=stroked]) .arrow{fill:var(--wcs-dropdown-stroked-arrow-color)}:host([mode=plain]) .arrow{fill:var(--wcs-dropdown-plain-arrow-color)}:host([disabled]) .arrow{fill:var(--wcs-dropdown-arrow-color-disabled)}#arrow,#arrow::before{position:absolute;width:8px;height:8px;background:inherit;border:var(--wcs-dropdown-overlay-border-width) solid var(--wcs-dropdown-overlay-border-color)}#arrow{visibility:hidden;z-index:-1}#arrow::before{visibility:visible;content:"";transform:rotate(45deg)}#is-empty{display:block;width:20ch;padding:0 var(--wcs-dropdown-padding-empty)}.popover[data-popper-placement^=top]>#arrow{bottom:-5px}.popover[data-popper-placement^=bottom]>#arrow{top:-6px}.popover[data-popper-placement^=left]>#arrow{right:-4px}.popover[data-popper-placement^=right]>#arrow{left:-6px}';const m=u;const f=["tabindex"];const v=e(class e extends o{constructor(){super();this.__registerHost();this.__attachShadow();this.inheritedAttributes={};this.noArrow=false;this.mode="stroked";this.shape="normal";this.size="m";this.disabled=false;this.placement="bottom-end";this.expanded=false}get items(){return Array.from(this.el.querySelectorAll("wcs-dropdown-item"))}placementChange(){this.popper.setOptions(Object.assign(Object.assign({},this.popper.state.options),{placement:this.placement})).then((e=>this.popper.update()))}onBlur(){this.clearLastFocusedItem();this.expanded=false}componentDidLoad(){this.popper=b(this.wcsButton,this.popoverDiv,{placement:this.placement,modifiers:[{name:"offset",options:{offset:[0,8]}}]});this.fixForFirefoxBelow63()}fixForFirefoxBelow63(){const e=this.el.querySelectorAll("wcs-dropdown-item");const o=this.el.querySelector(".container");if(e.length>0&&o){e.forEach((e=>{this.el.removeChild(e);o.appendChild(e)}))}}onButtonClick(e){this.clearLastFocusedItem();this.expanded=!this.expanded;if(this.expanded){this.focusItem(0)}}onWindowClickEvent(e){const o=a(e,this.el);if(this.expanded&&!o){this.expanded=false}}dropdownItemClick(e){this.expanded=false;this.nativeButton.focus()}onKeyDown(e){const o=this.expanded?"opened":"closed";const t=h(e,o);if(t.length!=0){e.preventDefault()}for(const e of t){this.doActionFromKeyboardEventAssociatedAction(e)}}async setAriaAttribute(e,o){i(this.nativeButton,e,o)}doActionFromKeyboardEventAssociatedAction(e){switch(e.kind){case"OpenMenu":this.expanded=true;this.focusItem(0);break;case"CloseMenu":this.expanded=false;this.nativeButton.focus();break;case"ClearFocus":this.clearLastFocusedItem();break;case"FocusItem":switch(e.target){case"previous":this.focusClosestItem("previous");break;case"next":this.focusClosestItem("next");break;case"first":this.focusItem(0);break;case"last":this.focusItem(this.items.length-1);break}break}}clearLastFocusedItem(){if(this.lastFocusedItemElement){this.lastFocusedItemElement.tabIndex=-1;this.lastFocusedItemElement=null}}focusItem(e){this.clearLastFocusedItem();this.lastFocusedItemElement=this.items[e];if(this.lastFocusedItemElement){this.lastFocusedItemElement.tabIndex=0;requestAnimationFrame((()=>{var e;(e=this.lastFocusedItemElement)===null||e===void 0?void 0:e.focus()}))}}focusClosestItem(e){const o=this.getClosestActiveItemIndexForDirection(e);if(o===-1)return;this.focusItem(o)}getClosestActiveItemIndexForDirection(e){const o=this.items;let t=Array.from(o).indexOf(this.lastFocusedItemElement);const r=0;const s=o.length-1;if(e==="next"&&t<s){t++}else if(e==="previous"&&t>r){t--}else{if(e==="next"&&t>=s){t=0}if(e==="previous"&&t===r){t=s}}return t}componentDidRender(){if(this.popper){this.popper.update()}}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},n(this.el)),c(this.el,f))}render(){return t(r,{key:"38b0312bdb316b0fb3995ac7e04b3be6f2ae80b1"},t("button",Object.assign({key:"5842016e2ccb71db7f793e0376d9cc948591b9fb",id:"dropdown-button","aria-controls":"menu",disabled:this.disabled,"aria-haspopup":"true",role:"button","aria-expanded":this.expanded?"true":"false",ref:e=>this.nativeButton=e,onClick:e=>this.onButtonClick(e),onBlur:e=>e.stopImmediatePropagation()},this.inheritedAttributes),"Dropdown"),t("wcs-button",{key:"463316eddbafe0beaa01eca79b06aeca9768d489",mode:this.mode,shape:this.shape,disabled:this.disabled,size:this.size,ref:e=>this.wcsButton=e,"aria-hidden":"true",tabindex:-1,onClick:e=>this.onButtonClick(e),onBlur:e=>e.stopImmediatePropagation()},t("div",{key:"49a3210683fa548f2baaebbc6319e78e864ca7a2",class:"wcs-button-content-wrapper"},t("slot",{key:"b3fb4307c73fceddfc931342dc73069dbda28835",name:"placeholder"}),this.noArrow?null:t(s,{up:this.expanded}))),t("div",{key:"4a0eeee69519eb8a336120c976594aac191abc4d",class:(this.expanded?"show ":"")+"popover",id:"menu",role:"menu","aria-labelledby":"dropdown-button",tabindex:-1,ref:e=>this.popoverDiv=e},t("div",{key:"05a7807155799f0492c4bc180d3bf998055ba148",role:"presentation",id:"arrow","data-popper-arrow":true}),t("div",{key:"61bc7b3fcda2d10d83a68eb40db1e95ec9db3c6f",role:"presentation",class:"container"},t("slot",{key:"30e21e28fb8c0ce46b6da18cdf67b7c567897839",name:"item"},t("span",{key:"ea05bd99cd367f7be8aacea33286e95ebbe82cd9",id:"is-empty"})))))}static get delegatesFocus(){return true}get el(){return this}static get watchers(){return{placement:["placementChange"]}}static get style(){return m}},[17,"wcs-dropdown",{noArrow:[516,"no-arrow"],mode:[1],shape:[1],size:[1],disabled:[516],placement:[1],expanded:[32],setAriaAttribute:[64]},[[0,"blur","onBlur"],[8,"click","onWindowClickEvent"],[0,"wcsDropdownItemClick","dropdownItemClick"],[0,"keydown","onKeyDown"]],{placement:["placementChange"]}]);function k(){if(typeof customElements==="undefined"){return}const e=["wcs-dropdown","wcs-button","wcs-mat-icon","wcs-spinner"];e.forEach((e=>{switch(e){case"wcs-dropdown":if(!customElements.get(e)){customElements.define(e,v)}break;case"wcs-button":if(!customElements.get(e)){l()}break;case"wcs-mat-icon":if(!customElements.get(e)){p()}break;case"wcs-spinner":if(!customElements.get(e)){w()}break}}))}const g=v;const y=k;export{g as WcsDropdown,y as defineCustomElement};
 //# sourceMappingURL=wcs-dropdown.js.map

package/bundle/wcs-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"names":["getActionForKeyboardEvent","event","currentState","keyboardShortcut","keyboardShortcutFromKeyboardEvent","kind","target","Error","dropdownCss","WcsDropdownStyle0","DROPDOWN_INHERITED_ATTRS","Dropdown","proxyCustomElement","H","this","inheritedAttributes","items","Array","from","el","querySelectorAll","placementChange","popper","setOptions","Object","assign","state","options","placement","then","_","update","onBlur","clearLastFocusedItem","expanded","componentDidLoad","createPopper","wcsButton","popoverDiv","modifiers","name","offset","fixForFirefoxBelow63","container","querySelector","length","forEach","i","removeChild","appendChild","onButtonClick","focusItem","onWindowClickEvent","clickedOnDropdownOrChildren","clickTargetIsElementOrChildren","dropdownItemClick","nativeButton","focus","onKeyDown","_event","actionsFromKeyboardEvents","preventDefault","actionFromKeyboardEvent","doActionFromKeyboardEventAssociatedAction","setAriaAttribute","attr","value","setOrRemoveAttribute","focusClosestItem","lastFocusedItemElement","tabIndex","indexToFocus","requestAnimationFrame","_a","direction","getClosestActiveItemIndexForDirection","currentIndex","indexOf","MIN_INDEX","MAX_INDEX","componentDidRender","componentWillLoad","inheritAriaAttributes","inheritAttributes","render","h","Host","key","id","disabled","role","ref","onClick","$event","stopImmediatePropagation","mode","shape","size","tabindex","e","class","noArrow","SelectArrow","up"],"sources":["src/components/dropdown/dropdown-keyboard-event.ts","src/components/dropdown/dropdown.scss?tag=wcs-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["import { keyboardShortcutFromKeyboardEvent } from \"../../utils/keyboard-event\";\n\n// Possible Shortcuts\n\n// Dropdown button\n// ENTER : open menu, move focus to first item\n// SPACE : open menu, move focus to first item\n// DOWN_ARROW : open menu, move focus to first item\n// UP_ARROW : open menu, move focus to last item\n\n// Dropdown item\n// HOME : focus first item\n// END : focus last item\n// UP_ARROW : move focus to previous item\n// DOWN_ARROW : move focus to previous item\n// ESCAPE : close menu, set focus on the dropdown button\n// ENTER : activate the item, close menu, set focus to menu button (already handled via the wcsDropdownItemClick event)\n\nexport type KeyboardEventAssociatedAction = OpenMenu\n    | CloseMenu\n    | ClearFocus\n    | FocusItem;\n\ntype OpenMenu = {kind: 'OpenMenu'};\ntype CloseMenu = {kind: 'CloseMenu'};\n\n\ntype ClearFocus = {kind: 'ClearFocus'};\ntype FocusItem = {kind: 'FocusItem', target: 'next' | 'previous' | 'first' | 'last'};\n\n/**\n * We follow this pattern https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-actions/\n * @param event\n * @param currentState\n * @param type\n */\nexport function getActionForKeyboardEvent(event: KeyboardEvent, currentState: 'closed' | 'opened'): KeyboardEventAssociatedAction[] {\n    const keyboardShortcut = keyboardShortcutFromKeyboardEvent(event);\n\n    if(keyboardShortcut === 'UNKNOWN') {\n        return [];\n    }\n\n    switch (currentState) {\n        case 'closed':\n            // We handle every available shortcut for the closed state\n            switch (keyboardShortcut) {\n                case 'UP_ARROW':\n                    return [{kind: 'OpenMenu'}, {kind: 'FocusItem', target: 'last'}];\n                case 'DOWN_ARROW':\n                    return [{kind: 'OpenMenu'}, {kind: 'FocusItem', target: 'first'}];\n                case 'SPACE':\n                case 'ENTER':\n                    return [{kind: 'OpenMenu'}, {kind: 'FocusItem', target: 'first'}];\n                default:\n                    break;\n            }\n            break;\n        case 'opened':\n            // We handle every available shortcut for the opened state\n            switch (keyboardShortcut) {\n                case 'UP_ARROW':\n                    return [{kind: 'FocusItem', target: 'previous'}];\n                case 'DOWN_ARROW':\n                    return [{kind: 'FocusItem', target: 'next'}];\n                case 'HOME':\n                    return [{kind: 'FocusItem', target: 'first'}];\n                case 'END':\n                    return [{kind: 'FocusItem', target: 'last'}];\n                case 'ESCAPE':\n                case 'MAJ+TAB':\n                case 'TAB':\n                    return [{kind: 'CloseMenu'}];\n                default:\n                    break;\n            }\n            break;\n        default:\n            throw Error('Unknown error');\n    }\n    return [];\n}\n","@import '../../style/focus-outline.scss';\n\n:host {\n    display: flex;\n\n    --wcs-dropdown-outline-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n    // Padding\n    --wcs-dropdown-padding-empty: var(--wcs-semantic-spacing-large);\n\n    // Arrow color\n    --wcs-dropdown-plain-arrow-color: var(--wcs-semantic-color-foreground-action-primary-default);\n    --wcs-dropdown-stroked-arrow-color: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-dropdown-clear-arrow-color: var(--wcs-semantic-color-foreground-action-tertiary-default);\n\n    --wcs-dropdown-arrow-color-disabled: var(--wcs-semantic-color-text-disabled);\n\n    // Overlay\n    --wcs-dropdown-overlay-max-height: 360px;\n    --wcs-dropdown-overlay-padding: var(--wcs-semantic-spacing-base);\n    --wcs-dropdown-overlay-background-color: var(--wcs-semantic-color-background-surface-primary);\n    --wcs-dropdown-overlay-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-dropdown-overlay-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-dropdown-overlay-border-color: var(--wcs-semantic-color-border-secondary);\n\n    wcs-button {\n        height: fit-content;\n    }\n\n    svg {\n        margin-right: -0.25rem;\n    }\n}\n\n/* Visually hide the native button */\nbutton {\n    position: absolute;\n    opacity: 0;\n    height: 1px;\n    width: 1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    outline: 0;\n    outline-offset: 0;\n}\n\nbutton:focus-visible + wcs-button {\n    @include focus-outline($outline-color: var(--wcs-dropdown-outline-color-focus), $border-radius: var(--wcs-button-border-radius));\n}\n\n@supports not selector(button:focus-visible + wcs-button) {\n    button:focus-within + wcs-button {\n        @include focus-outline($outline-color: var(--wcs-dropdown-outline-color-focus), $border-radius: var(--wcs-button-border-radius));\n    }\n}\n\n.wcs-button-content-wrapper {\n    display: flex;\n    align-items: center;\n}\n\n.popover {\n    display: none;\n    border: var(--wcs-dropdown-overlay-border-width) solid var(--wcs-dropdown-overlay-border-color);\n    border-radius: var(--wcs-dropdown-overlay-border-radius);\n    background-color: var(--wcs-dropdown-overlay-background-color);\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    min-width: calc(10 * var(--wcs-semantic-size-base));\n    border-radius: inherit;\n    overflow: hidden;\n    padding: var(--wcs-dropdown-overlay-padding);\n    background-color: var(--wcs-dropdown-overlay-background-color);\n}\n\n:host([mode=clear]) {\n    // SVG arrow inside the button, on clear background\n    .arrow {\n        fill: var(--wcs-dropdown-clear-arrow-color);\n    }\n}\n\n:host([mode=stroked]) {\n    // SVG arrow inside the button, on stroked background\n    .arrow {\n        fill: var(--wcs-dropdown-stroked-arrow-color);\n    }\n}\n\n:host([mode=plain]) {\n    // SVG arrow inside the button, on primary background\n    .arrow {\n        fill: var(--wcs-dropdown-plain-arrow-color);\n    }\n}\n\n:host([disabled]) {\n    .arrow {\n        fill: var(--wcs-dropdown-arrow-color-disabled);\n    }\n}\n\n// Popover arrow\n#arrow,\n#arrow::before {\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    background: inherit;\n    border: var(--wcs-dropdown-overlay-border-width) solid var(--wcs-dropdown-overlay-border-color);\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#is-empty {\n    display: block;\n    width: 20ch;\n    padding: 0 var(--wcs-dropdown-padding-empty);\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 { Component, ComponentInterface, Element, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport { SelectArrow } from '../select/select-arrow';\nimport {\n    WcsButtonMode,\n    WcsButtonShape,\n    WcsButtonSize,\n} from '../button/button-interface';\nimport { createPopper, Instance } from '@popperjs/core';\nimport { WcsDropdownPlacement } from './dropdown-interface';\nimport {\n    clickTargetIsElementOrChildren,\n    inheritAriaAttributes,\n    inheritAttributes,\n    setOrRemoveAttribute\n} from '../../utils/helpers';\nimport { getActionForKeyboardEvent, KeyboardEventAssociatedAction } from \"./dropdown-keyboard-event\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst DROPDOWN_INHERITED_ATTRS = ['tabindex'];\n\n/**\n * The dropdown component use a wcs-button under the hood, so you can use the same css classes as the button to style the\n * dropdown.\n * \n * @slot placeholder - The slot containing the placeholder displayed in button\n * @slot item - The slot container the list of `wcs-dropdown-item` elements\n * \n * @cssprop --wcs-dropdown-outline-color-focus - Outline color of dropdown when focus it\n * \n * @cssprop --wcs-dropdown-plain-arrow-color - Color of the arrow indicator when the dropdown is plain\n * @cssprop --wcs-dropdown-stroked-arrow-color - Color of the arrow indicator when the dropdown is stroked\n * @cssprop --wcs-dropdown-clear-arrow-color - Color of the arrow indicator when the dropdown is not filled\n * @cssprop --wcs-dropdown-arrow-color-disabled - Base color of the arrow indicator when the dropdown is disabled\n * \n * @cssprop --wcs-dropdown-padding-empty - Padding of and empty dropdown\n * \n * @cssprop --wcs-dropdown-overlay-padding - Defines the vertical padding inside the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-max-height - Specifies the maximum height of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-background-color - Determines the background color of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-border-width - Sets the border width of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-border-radius - Defines the border radius of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-border-color - Specifies the border color of the dropdown overlay\n */\n@Component({\n    tag: 'wcs-dropdown',\n    styleUrl: 'dropdown.scss',\n    shadow: {\n        delegatesFocus: true\n    }\n})\nexport class Dropdown implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el: HTMLWcsDropdownElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /**\n     * This button is visually hidden. It used to carry all aria attributes and acts as the controller of the menu.\n     * The wcs-button could not handle the aria-controls and aria-activedescendant attributes because of the IDREF\n     * not passing from a shadow-dom through another.\n     * @private\n     */\n    private nativeButton!: HTMLButtonElement;\n\n    /**\n     * This button is shown on the user interface, and visually receives focus and catch click events.  \n     * It is hidden to screen readers since the native button carries all the aria informations.\n     * @private\n     */\n    private wcsButton!: HTMLWcsButtonElement;\n\n    /**\n     * This div is shown on the user interface when the dropdown is expanded.\n     * @private\n     */\n    private popoverDiv!: HTMLDivElement;\n\n    /** Hides the arrow in the button */\n    @Prop({ reflect: true }) 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    /** Dropdown's button size */\n    @Prop() size: WcsButtonSize = 'm';\n\n    /** Specifies whether the dropdown button is clickable or not */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /** placement of the dropdown's popover */\n    @Prop() placement: WcsDropdownPlacement = 'bottom-end';\n\n    @State() private expanded: boolean = false;\n\n\n    private popper: Instance;\n    \n    private lastFocusedItemElement: HTMLWcsDropdownItemElement | null;\n    \n    private get items(): HTMLWcsDropdownItemElement[] {\n        return Array.from(this.el.querySelectorAll('wcs-dropdown-item'));\n    }\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    @Listen('blur')\n    onBlur() {\n        this.clearLastFocusedItem();\n        this.expanded = false;\n    }\n\n    componentDidLoad() {\n        this.popper = createPopper(this.wcsButton, this.popoverDiv, {\n            placement: this.placement,\n            modifiers: [\n                {\n                    name: 'offset',\n                    options: {\n                        offset: [0, 8]\n                    }\n                }\n            ]\n        });\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.clearLastFocusedItem();\n        this.expanded = !this.expanded;\n        \n        if (this.expanded) {\n            this.focusItem(0);\n        }\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        this.nativeButton.focus();\n    }\n\n    @Listen('keydown')\n    onKeyDown(_event: KeyboardEvent): void {\n        const currentState = this.expanded ? 'opened' : 'closed';\n        const actionsFromKeyboardEvents: KeyboardEventAssociatedAction[] = getActionForKeyboardEvent(_event, currentState);\n\n        // If we have at least one associated actions, we prevent the default behavior of the event. \n        // Except if the action is a focus move (we have to handle the preventDefault behavior ourselves in the action implementation)\n        if (actionsFromKeyboardEvents.length != 0) {\n            _event.preventDefault();\n        }\n\n        for (const actionFromKeyboardEvent of actionsFromKeyboardEvents) {\n            this.doActionFromKeyboardEventAssociatedAction(actionFromKeyboardEvent);\n        }\n    }\n    \n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeButton, attr, value);\n    }\n\n    doActionFromKeyboardEventAssociatedAction(actionFromKeyboardEvent: KeyboardEventAssociatedAction) {\n        switch (actionFromKeyboardEvent.kind) {\n            case 'OpenMenu':\n                this.expanded = true;\n                this.focusItem(0);\n                break;\n            case 'CloseMenu':\n                this.expanded = false;\n                this.nativeButton.focus();\n                break;\n            case 'ClearFocus':\n                this.clearLastFocusedItem();\n                break;\n            case 'FocusItem':\n                switch (actionFromKeyboardEvent.target) {\n                    case 'previous':\n                        this.focusClosestItem('previous');\n                        break;\n                    case 'next':\n                        this.focusClosestItem('next');\n                        break;\n                    case 'first':\n                        this.focusItem(0);\n                        break;\n                    case 'last':\n                        this.focusItem(this.items.length - 1);\n                        break;\n                    default:\n                        break;\n                }\n                break;\n            default:\n                break;\n        }\n    }\n\n    /**\n     * Removes the focus and tabindex 0 of the last focused item if any.\n     * @private\n     */\n    private clearLastFocusedItem() {\n        if (this.lastFocusedItemElement) {\n            this.lastFocusedItemElement.tabIndex = -1;\n            this.lastFocusedItemElement = null;\n        }\n    }\n    \n    private focusItem(indexToFocus: number) {\n        this.clearLastFocusedItem();\n        this.lastFocusedItemElement = this.items[indexToFocus];\n        if (this.lastFocusedItemElement) {\n            this.lastFocusedItemElement.tabIndex = 0;\n            requestAnimationFrame(() => {\n                this.lastFocusedItemElement?.focus();\n            });\n        }\n    }\n    \n    private focusClosestItem(direction: 'next' | 'previous'): void {\n        const indexToFocus = this.getClosestActiveItemIndexForDirection(direction);\n        if (indexToFocus === -1) return;\n        \n        this.focusItem(indexToFocus);\n    }\n    \n    private getClosestActiveItemIndexForDirection(direction: 'next' | 'previous'): number {\n        const items = this.items;\n        let currentIndex = Array.from(items).indexOf(this.lastFocusedItemElement);\n\n        const MIN_INDEX = 0;\n        const MAX_INDEX = items.length - 1;\n\n        if (direction === 'next' && currentIndex < MAX_INDEX) {\n            currentIndex++;\n        } else if (direction === 'previous' && currentIndex > MIN_INDEX) {\n            currentIndex--;\n        } else {\n            // Used to scroll through items infinitely with keyboard\n            if (direction === 'next' && currentIndex >= MAX_INDEX) {\n                currentIndex = 0;\n            }\n            if (direction === 'previous' && currentIndex === MIN_INDEX) {\n                currentIndex = MAX_INDEX;\n            }\n        }\n        \n        return currentIndex;\n    }\n\n    componentDidRender() {\n        if (this.popper) {\n            this.popper.update();\n        }\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, DROPDOWN_INHERITED_ATTRS),\n        };\n    }\n    \n    render() {\n        return (\n            <Host>\n                <button id=\"dropdown-button\"\n                        aria-controls=\"menu\"\n                        disabled={this.disabled}\n                        aria-haspopup=\"true\"\n                        role=\"button\"\n                        aria-expanded={this.expanded ? 'true' : 'false'}\n                        ref={el => this.nativeButton = el}\n                        onClick={($event) => this.onButtonClick($event)}\n                        onBlur={($event) => $event.stopImmediatePropagation()}\n                        {...this.inheritedAttributes}>Dropdown</button>\n                <wcs-button mode={this.mode} shape={this.shape} disabled={this.disabled} size={this.size}\n                            ref={el => this.wcsButton = el}\n                            aria-hidden=\"true\"\n                            tabindex={-1}\n                            onClick={($event) => this.onButtonClick($event)}\n                            onBlur={(e) => e.stopImmediatePropagation()}>\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                     id=\"menu\"\n                     role=\"menu\"\n                     aria-labelledby=\"dropdown-button\"\n                     tabindex={-1}\n                     ref={el => this.popoverDiv = el}>\n                    <div role=\"presentation\" id=\"arrow\" data-popper-arrow/>\n                    <div role=\"presentation\" class=\"container\">\n                        <slot name=\"item\">\n                            <span id={\"is-empty\"}></span>\n                        </slot>\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n}\n\n"],"mappings":"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"}
+{"version":3,"names":["getActionForKeyboardEvent","event","currentState","keyboardShortcut","keyboardShortcutFromKeyboardEvent","kind","target","Error","dropdownCss","WcsDropdownStyle0","DROPDOWN_INHERITED_ATTRS","Dropdown","proxyCustomElement","H","this","inheritedAttributes","items","Array","from","el","querySelectorAll","placementChange","popper","setOptions","Object","assign","state","options","placement","then","_","update","onBlur","clearLastFocusedItem","expanded","componentDidLoad","createPopper","wcsButton","popoverDiv","modifiers","name","offset","fixForFirefoxBelow63","container","querySelector","length","forEach","i","removeChild","appendChild","onButtonClick","focusItem","onWindowClickEvent","clickedOnDropdownOrChildren","clickTargetIsElementOrChildren","dropdownItemClick","nativeButton","focus","onKeyDown","_event","actionsFromKeyboardEvents","preventDefault","actionFromKeyboardEvent","doActionFromKeyboardEventAssociatedAction","setAriaAttribute","attr","value","setOrRemoveAttribute","focusClosestItem","lastFocusedItemElement","tabIndex","indexToFocus","requestAnimationFrame","_a","direction","getClosestActiveItemIndexForDirection","currentIndex","indexOf","MIN_INDEX","MAX_INDEX","componentDidRender","componentWillLoad","inheritAriaAttributes","inheritAttributes","render","h","Host","key","id","disabled","role","ref","onClick","$event","stopImmediatePropagation","mode","shape","size","tabindex","e","class","noArrow","SelectArrow","up"],"sources":["src/components/dropdown/dropdown-keyboard-event.ts","src/components/dropdown/dropdown.scss?tag=wcs-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["import { keyboardShortcutFromKeyboardEvent } from \"../../utils/keyboard-event\";\n\n// Possible Shortcuts\n\n// Dropdown button\n// ENTER : open menu, move focus to first item\n// SPACE : open menu, move focus to first item\n// DOWN_ARROW : open menu, move focus to first item\n// UP_ARROW : open menu, move focus to last item\n\n// Dropdown item\n// HOME : focus first item\n// END : focus last item\n// UP_ARROW : move focus to previous item\n// DOWN_ARROW : move focus to previous item\n// ESCAPE : close menu, set focus on the dropdown button\n// ENTER : activate the item, close menu, set focus to menu button (already handled via the wcsDropdownItemClick event)\n\nexport type KeyboardEventAssociatedAction = OpenMenu\n    | CloseMenu\n    | ClearFocus\n    | FocusItem;\n\ntype OpenMenu = {kind: 'OpenMenu'};\ntype CloseMenu = {kind: 'CloseMenu'};\n\n\ntype ClearFocus = {kind: 'ClearFocus'};\ntype FocusItem = {kind: 'FocusItem', target: 'next' | 'previous' | 'first' | 'last'};\n\n/**\n * We follow this pattern https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-actions/\n * @param event\n * @param currentState\n * @param type\n */\nexport function getActionForKeyboardEvent(event: KeyboardEvent, currentState: 'closed' | 'opened'): KeyboardEventAssociatedAction[] {\n    const keyboardShortcut = keyboardShortcutFromKeyboardEvent(event);\n\n    if(keyboardShortcut === 'UNKNOWN') {\n        return [];\n    }\n\n    switch (currentState) {\n        case 'closed':\n            // We handle every available shortcut for the closed state\n            switch (keyboardShortcut) {\n                case 'UP_ARROW':\n                    return [{kind: 'OpenMenu'}, {kind: 'FocusItem', target: 'last'}];\n                case 'DOWN_ARROW':\n                    return [{kind: 'OpenMenu'}, {kind: 'FocusItem', target: 'first'}];\n                case 'SPACE':\n                case 'ENTER':\n                    return [{kind: 'OpenMenu'}, {kind: 'FocusItem', target: 'first'}];\n                default:\n                    break;\n            }\n            break;\n        case 'opened':\n            // We handle every available shortcut for the opened state\n            switch (keyboardShortcut) {\n                case 'UP_ARROW':\n                    return [{kind: 'FocusItem', target: 'previous'}];\n                case 'DOWN_ARROW':\n                    return [{kind: 'FocusItem', target: 'next'}];\n                case 'HOME':\n                    return [{kind: 'FocusItem', target: 'first'}];\n                case 'END':\n                    return [{kind: 'FocusItem', target: 'last'}];\n                case 'ESCAPE':\n                case 'MAJ+TAB':\n                case 'TAB':\n                    return [{kind: 'CloseMenu'}];\n                default:\n                    break;\n            }\n            break;\n        default:\n            throw Error('Unknown error');\n    }\n    return [];\n}\n","@import '../../style/focus-outline.scss';\n\n:host {\n    display: flex;\n    /*\n    * DO NOT REMOVE:\n    * The native button is absolutely positioned.\n    * This `position: relative` makes `wcs-dropdown` its containing block.\n    * Without it, the button can be laid out relative to another ancestor higher in the DOM,\n    * so when the browser focuses the native button it may scroll the window unexpectedly.\n    */\n    position: relative;\n\n    --wcs-dropdown-outline-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n    // Padding\n    --wcs-dropdown-padding-empty: var(--wcs-semantic-spacing-large);\n\n    // Arrow color\n    --wcs-dropdown-plain-arrow-color: var(--wcs-semantic-color-foreground-action-primary-default);\n    --wcs-dropdown-stroked-arrow-color: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-dropdown-clear-arrow-color: var(--wcs-semantic-color-foreground-action-tertiary-default);\n\n    --wcs-dropdown-arrow-color-disabled: var(--wcs-semantic-color-text-disabled);\n\n    // Overlay\n    --wcs-dropdown-overlay-max-height: 360px;\n    --wcs-dropdown-overlay-padding: var(--wcs-semantic-spacing-base);\n    --wcs-dropdown-overlay-background-color: var(--wcs-semantic-color-background-surface-primary);\n    --wcs-dropdown-overlay-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-dropdown-overlay-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-dropdown-overlay-border-color: var(--wcs-semantic-color-border-secondary);\n\n    wcs-button {\n        height: fit-content;\n    }\n\n    svg {\n        margin-right: -0.25rem;\n    }\n}\n\n/* Visually hide the native button */\nbutton {\n    position: absolute;\n    opacity: 0;\n    height: 1px;\n    width: 1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    outline: 0;\n    outline-offset: 0;\n}\n\nbutton:focus-visible + wcs-button {\n    @include focus-outline($outline-color: var(--wcs-dropdown-outline-color-focus), $border-radius: var(--wcs-button-border-radius));\n}\n\n@supports not selector(button:focus-visible + wcs-button) {\n    button:focus-within + wcs-button {\n        @include focus-outline($outline-color: var(--wcs-dropdown-outline-color-focus), $border-radius: var(--wcs-button-border-radius));\n    }\n}\n\n.wcs-button-content-wrapper {\n    display: flex;\n    align-items: center;\n}\n\n.popover {\n    width: max-content; // We want the popover to shrink to fit its content, but not to grow wider than necessary\n\n    display: none;\n    border: var(--wcs-dropdown-overlay-border-width) solid var(--wcs-dropdown-overlay-border-color);\n    border-radius: var(--wcs-dropdown-overlay-border-radius);\n    background-color: var(--wcs-dropdown-overlay-background-color);\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    min-width: calc(10 * var(--wcs-semantic-size-base));\n    border-radius: inherit;\n    overflow: hidden;\n    padding: var(--wcs-dropdown-overlay-padding);\n    background-color: var(--wcs-dropdown-overlay-background-color);\n}\n\n:host([mode=clear]) {\n    // SVG arrow inside the button, on clear background\n    .arrow {\n        fill: var(--wcs-dropdown-clear-arrow-color);\n    }\n}\n\n:host([mode=stroked]) {\n    // SVG arrow inside the button, on stroked background\n    .arrow {\n        fill: var(--wcs-dropdown-stroked-arrow-color);\n    }\n}\n\n:host([mode=plain]) {\n    // SVG arrow inside the button, on primary background\n    .arrow {\n        fill: var(--wcs-dropdown-plain-arrow-color);\n    }\n}\n\n:host([disabled]) {\n    .arrow {\n        fill: var(--wcs-dropdown-arrow-color-disabled);\n    }\n}\n\n// Popover arrow\n#arrow,\n#arrow::before {\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    background: inherit;\n    border: var(--wcs-dropdown-overlay-border-width) solid var(--wcs-dropdown-overlay-border-color);\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#is-empty {\n    display: block;\n    width: 20ch;\n    padding: 0 var(--wcs-dropdown-padding-empty);\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 { Component, ComponentInterface, Element, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport { SelectArrow } from '../select/select-arrow';\nimport {\n    WcsButtonMode,\n    WcsButtonShape,\n    WcsButtonSize,\n} from '../button/button-interface';\nimport { createPopper, Instance } from '@popperjs/core';\nimport { WcsDropdownPlacement } from './dropdown-interface';\nimport {\n    clickTargetIsElementOrChildren,\n    inheritAriaAttributes,\n    inheritAttributes,\n    setOrRemoveAttribute\n} from '../../utils/helpers';\nimport { getActionForKeyboardEvent, KeyboardEventAssociatedAction } from \"./dropdown-keyboard-event\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst DROPDOWN_INHERITED_ATTRS = ['tabindex'];\n\n/**\n * The dropdown component use a wcs-button under the hood, so you can use the same css classes as the button to style the\n * dropdown.\n * \n * @slot placeholder - The slot containing the placeholder displayed in button\n * @slot item - The slot container the list of `wcs-dropdown-item` elements\n * \n * @cssprop --wcs-dropdown-outline-color-focus - Outline color of dropdown when focus it\n * \n * @cssprop --wcs-dropdown-plain-arrow-color - Color of the arrow indicator when the dropdown is plain\n * @cssprop --wcs-dropdown-stroked-arrow-color - Color of the arrow indicator when the dropdown is stroked\n * @cssprop --wcs-dropdown-clear-arrow-color - Color of the arrow indicator when the dropdown is not filled\n * @cssprop --wcs-dropdown-arrow-color-disabled - Base color of the arrow indicator when the dropdown is disabled\n * \n * @cssprop --wcs-dropdown-padding-empty - Padding of and empty dropdown\n * \n * @cssprop --wcs-dropdown-overlay-padding - Defines the vertical padding inside the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-max-height - Specifies the maximum height of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-background-color - Determines the background color of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-border-width - Sets the border width of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-border-radius - Defines the border radius of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-border-color - Specifies the border color of the dropdown overlay\n */\n@Component({\n    tag: 'wcs-dropdown',\n    styleUrl: 'dropdown.scss',\n    shadow: {\n        delegatesFocus: true\n    }\n})\nexport class Dropdown implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el: HTMLWcsDropdownElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /**\n     * This button is visually hidden. It used to carry all aria attributes and acts as the controller of the menu.\n     * The wcs-button could not handle the aria-controls and aria-activedescendant attributes because of the IDREF\n     * not passing from a shadow-dom through another.\n     * @private\n     */\n    private nativeButton!: HTMLButtonElement;\n\n    /**\n     * This button is shown on the user interface, and visually receives focus and catch click events.  \n     * It is hidden to screen readers since the native button carries all the aria informations.\n     * @private\n     */\n    private wcsButton!: HTMLWcsButtonElement;\n\n    /**\n     * This div is shown on the user interface when the dropdown is expanded.\n     * @private\n     */\n    private popoverDiv!: HTMLDivElement;\n\n    /** Hides the arrow in the button */\n    @Prop({ reflect: true }) 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    /** Dropdown's button size */\n    @Prop() size: WcsButtonSize = 'm';\n\n    /** Specifies whether the dropdown button is clickable or not */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /** placement of the dropdown's popover */\n    @Prop() placement: WcsDropdownPlacement = 'bottom-end';\n\n    @State() private expanded: boolean = false;\n\n\n    private popper: Instance;\n    \n    private lastFocusedItemElement: HTMLWcsDropdownItemElement | null;\n    \n    private get items(): HTMLWcsDropdownItemElement[] {\n        return Array.from(this.el.querySelectorAll('wcs-dropdown-item'));\n    }\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    @Listen('blur')\n    onBlur() {\n        this.clearLastFocusedItem();\n        this.expanded = false;\n    }\n\n    componentDidLoad() {\n        this.popper = createPopper(this.wcsButton, this.popoverDiv, {\n            placement: this.placement,\n            modifiers: [\n                {\n                    name: 'offset',\n                    options: {\n                        offset: [0, 8]\n                    }\n                }\n            ]\n        });\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.clearLastFocusedItem();\n        this.expanded = !this.expanded;\n        \n        if (this.expanded) {\n            this.focusItem(0);\n        }\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        this.nativeButton.focus();\n    }\n\n    @Listen('keydown')\n    onKeyDown(_event: KeyboardEvent): void {\n        const currentState = this.expanded ? 'opened' : 'closed';\n        const actionsFromKeyboardEvents: KeyboardEventAssociatedAction[] = getActionForKeyboardEvent(_event, currentState);\n\n        // If we have at least one associated actions, we prevent the default behavior of the event. \n        // Except if the action is a focus move (we have to handle the preventDefault behavior ourselves in the action implementation)\n        if (actionsFromKeyboardEvents.length != 0) {\n            _event.preventDefault();\n        }\n\n        for (const actionFromKeyboardEvent of actionsFromKeyboardEvents) {\n            this.doActionFromKeyboardEventAssociatedAction(actionFromKeyboardEvent);\n        }\n    }\n    \n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeButton, attr, value);\n    }\n\n    doActionFromKeyboardEventAssociatedAction(actionFromKeyboardEvent: KeyboardEventAssociatedAction) {\n        switch (actionFromKeyboardEvent.kind) {\n            case 'OpenMenu':\n                this.expanded = true;\n                this.focusItem(0);\n                break;\n            case 'CloseMenu':\n                this.expanded = false;\n                this.nativeButton.focus();\n                break;\n            case 'ClearFocus':\n                this.clearLastFocusedItem();\n                break;\n            case 'FocusItem':\n                switch (actionFromKeyboardEvent.target) {\n                    case 'previous':\n                        this.focusClosestItem('previous');\n                        break;\n                    case 'next':\n                        this.focusClosestItem('next');\n                        break;\n                    case 'first':\n                        this.focusItem(0);\n                        break;\n                    case 'last':\n                        this.focusItem(this.items.length - 1);\n                        break;\n                    default:\n                        break;\n                }\n                break;\n            default:\n                break;\n        }\n    }\n\n    /**\n     * Removes the focus and tabindex 0 of the last focused item if any.\n     * @private\n     */\n    private clearLastFocusedItem() {\n        if (this.lastFocusedItemElement) {\n            this.lastFocusedItemElement.tabIndex = -1;\n            this.lastFocusedItemElement = null;\n        }\n    }\n    \n    private focusItem(indexToFocus: number) {\n        this.clearLastFocusedItem();\n        this.lastFocusedItemElement = this.items[indexToFocus];\n        if (this.lastFocusedItemElement) {\n            this.lastFocusedItemElement.tabIndex = 0;\n            requestAnimationFrame(() => {\n                this.lastFocusedItemElement?.focus();\n            });\n        }\n    }\n    \n    private focusClosestItem(direction: 'next' | 'previous'): void {\n        const indexToFocus = this.getClosestActiveItemIndexForDirection(direction);\n        if (indexToFocus === -1) return;\n        \n        this.focusItem(indexToFocus);\n    }\n    \n    private getClosestActiveItemIndexForDirection(direction: 'next' | 'previous'): number {\n        const items = this.items;\n        let currentIndex = Array.from(items).indexOf(this.lastFocusedItemElement);\n\n        const MIN_INDEX = 0;\n        const MAX_INDEX = items.length - 1;\n\n        if (direction === 'next' && currentIndex < MAX_INDEX) {\n            currentIndex++;\n        } else if (direction === 'previous' && currentIndex > MIN_INDEX) {\n            currentIndex--;\n        } else {\n            // Used to scroll through items infinitely with keyboard\n            if (direction === 'next' && currentIndex >= MAX_INDEX) {\n                currentIndex = 0;\n            }\n            if (direction === 'previous' && currentIndex === MIN_INDEX) {\n                currentIndex = MAX_INDEX;\n            }\n        }\n        \n        return currentIndex;\n    }\n\n    componentDidRender() {\n        if (this.popper) {\n            this.popper.update();\n        }\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, DROPDOWN_INHERITED_ATTRS),\n        };\n    }\n    \n    render() {\n        return (\n            <Host>\n                <button id=\"dropdown-button\"\n                        aria-controls=\"menu\"\n                        disabled={this.disabled}\n                        aria-haspopup=\"true\"\n                        role=\"button\"\n                        aria-expanded={this.expanded ? 'true' : 'false'}\n                        ref={el => this.nativeButton = el}\n                        onClick={($event) => this.onButtonClick($event)}\n                        onBlur={($event) => $event.stopImmediatePropagation()}\n                        {...this.inheritedAttributes}>Dropdown</button>\n                <wcs-button mode={this.mode} shape={this.shape} disabled={this.disabled} size={this.size}\n                            ref={el => this.wcsButton = el}\n                            aria-hidden=\"true\"\n                            tabindex={-1}\n                            onClick={($event) => this.onButtonClick($event)}\n                            onBlur={(e) => e.stopImmediatePropagation()}>\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                     id=\"menu\"\n                     role=\"menu\"\n                     aria-labelledby=\"dropdown-button\"\n                     tabindex={-1}\n                     ref={el => this.popoverDiv = el}>\n                    <div role=\"presentation\" id=\"arrow\" data-popper-arrow/>\n                    <div role=\"presentation\" class=\"container\">\n                        <slot name=\"item\">\n                            <span id={\"is-empty\"}></span>\n                        </slot>\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n}\n\n"],"mappings":"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"}

package/bundle/wcs-editable-field.js

@@ -1,2 +1,2 @@
-import{p as e,H as i,d as t,h as s,c as a}from"./p-2bef72c7.js";import{b as l,k as d,l as o,d as r}from"./p-2e9b9605.js";import{d as c}from"./p-60193ef5.js";import{d as n}from"./p-010cf905.js";import{d as h}from"./p-581fc0fc.js";import{d as f}from"./p-98bd8a96.js";import{d as b}from"./p-c8b73e93.js";const w=["m","l"];function u(e){return w.includes(e)}const v=":host{--wcs-editable-field-label-color:var(--wcs-semantic-color-text-primary);--wcs-editable-field-label-font-weight:var(--wcs-semantic-font-weight-book);--wcs-editable-field-label-gap:var(--wcs-semantic-spacing-base);--wcs-editable-field-label-font-size:var(--wcs-semantic-font-size-m);--wcs-editable-field-background-color:var(--wcs-semantic-color-background-control-default);--wcs-editable-field-value-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-editable-field-value-color-default:var(--wcs-semantic-color-text-primary);--wcs-editable-field-value-color-hover:var(--wcs-semantic-color-text-primary);--wcs-editable-field-value-color-readonly:var(--wcs-semantic-color-text-tertiary);--wcs-editable-field-height-m:var(--wcs-semantic-size-m);--wcs-editable-field-height-l:var(--wcs-semantic-size-l);--wcs-editable-field-font-size-m:var(--wcs-semantic-font-size-m);--wcs-editable-field-font-size-l:var(--wcs-semantic-font-size-l);--wcs-editable-field-border-radius:var(--wcs-semantic-border-radius-base);--wcs-editable-field-border-width:var(--wcs-semantic-border-width-default);--wcs-editable-field-border-width-focus:var(--wcs-semantic-border-width-large);--wcs-editable-field-border-width-hover:var(--wcs-semantic-border-width-default);--wcs-editable-field-border-color-default:var(--wcs-semantic-color-border-primary);--wcs-editable-field-border-color-hover:var(--wcs-semantic-color-border-control-focus);--wcs-editable-field-border-color-focus:var(--wcs-semantic-color-border-control-focus);--wcs-editable-field-border-style:var(--wcs-semantic-border-style-focus-control);--wcs-editable-field-padding-vertical-m:0;--wcs-editable-field-padding-vertical-l:0;--wcs-editable-field-padding-horizontal-m:var(--wcs-semantic-spacing-large);--wcs-editable-field-padding-horizontal-l:var(--wcs-semantic-spacing-large);--wcs-editable-field-icon-color-readonly:var(--wcs-semantic-color-text-tertiary);--wcs-editable-field-host-padding:var(--wcs-editable-field-padding-vertical-m) var(--wcs-editable-field-padding-horizontal-m);--wcs-editable-field-host-height:var(--wcs-editable-field-height-m);--wcs-editable-field-font-size:var(--wcs-editable-field-font-size-m);display:block}:host .display-none{display:none !important}:host .label{margin-bottom:var(--wcs-editable-field-label-gap);font-weight:var(--wcs-editable-field-label-font-weight);font-size:var(--wcs-editable-field-label-font-size);color:var(--wcs-editable-field-label-color)}:host .edit-container{display:flex;width:100%}:host .edit-container .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap;outline:0;outline-offset:0}:host button.display-container{width:100%;border:none;font-family:inherit;text-align:start;box-sizing:border-box;min-height:var(--wcs-editable-field-host-height);white-space:break-spaces;display:flex;justify-content:space-between;align-items:center;background-color:var(--wcs-editable-field-background-color);border-radius:var(--wcs-editable-field-border-radius);font-size:var(--wcs-editable-field-font-size);line-height:1.5;font-weight:var(--wcs-editable-field-value-font-weight);color:var(--wcs-editable-field-value-color-default);padding:var(--wcs-editable-field-host-padding);outline:var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width) var(--wcs-editable-field-border-color-default)}:host button.display-container wcs-mat-icon{display:none}:host .load-container{box-sizing:border-box;min-height:var(--wcs-editable-field-host-height);white-space:pre;display:flex;justify-content:space-between;background-color:var(--wcs-editable-field-background-color);border-radius:var(--wcs-editable-field-border-radius);font-size:var(--wcs-editable-field-font-size);line-height:1.5;font-weight:var(--wcs-editable-field-value-font-weight);color:var(--wcs-editable-field-value-color-default);padding:var(--wcs-editable-field-host-padding);outline:var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width) var(--wcs-editable-field-border-color-default);align-items:center}:host wcs-spinner{height:24px;width:24px}:host .readonly-icon{fill:var(--wcs-editable-field-icon-color-readonly)}:host([readonly]){--wcs-editable-field-background-color:var(--wcs-semantic-color-background-control-readonly)}:host([readonly]) .display-container{color:var(--wcs-editable-field-value-color-readonly)}:host([readonly]) .display-container:focus-visible{outline:var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width-focus) var(--wcs-editable-field-border-color-default)}:host(:not([readonly])) .display-container:hover wcs-mat-icon,:host(:not([readonly])) .display-container:focus-visible wcs-mat-icon{display:flex;align-items:center}:host(:not([readonly])) .display-container:hover{color:var(--wcs-editable-field-value-color-hover);cursor:pointer;outline:var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width-hover) var(--wcs-editable-field-border-color-hover)}:host(:not([readonly])) .display-container:focus-visible{outline:var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width-focus) var(--wcs-editable-field-border-color-focus)}:host([size=l]){--wcs-editable-field-host-padding:var(--wcs-editable-field-padding-vertical-l) var(--wcs-editable-field-padding-horizontal-l);--wcs-editable-field-host-height:var(--wcs-editable-field-height-l);--wcs-editable-field-font-size:var(--wcs-editable-field-font-size-l)}:host([size=m]){--wcs-editable-field-host-padding:var(--wcs-editable-field-padding-vertical-m) var(--wcs-editable-field-padding-horizontal-m);--wcs-editable-field-host-height:var(--wcs-editable-field-height-m);--wcs-editable-field-font-size:var(--wcs-editable-field-font-size-m)}";const m=v;var p;(function(e){e[e["DISPLAY"]=0]="DISPLAY";e[e["EDIT"]=1]="EDIT";e[e["LOAD"]=2]="LOAD"})(p||(p={}));const g="Éditer";const y=20;const k=e(class e extends i{constructor(){super();this.__registerHost();this.__attachShadow();this.wcsChange=t(this,"wcsChange",7);this.spiedElement=null;this.currentValue=null;this.currentState=p.DISPLAY;this.type="input";this.label=undefined;this.readonly=false;this.value=undefined;this.validateFn=undefined;this.formatFn=undefined;this.errorMsg=null;this.size="m";this.isError=false}componentWillLoad(){if(!u(this.size)){console.warn(`Invalid size value for wcs-editable-field : "${this.size}". Must be one of "${w.join(", ")}"`);this.size="m"}this.currentValue=this.value}componentDidLoad(){const e=this.el.shadowRoot.querySelector("slot").assignedElements();switch(this.type){case"input":this.initWithInput(e);break;case"textarea":this.initWithTextArea(e);break;case"select":this.initWithSelect(e);break}}disconnectedCallback(){this.cleanUpSpiedElementEventListeners()}keyboardSubmitHandler(e){const i=this.type==="textarea"||this.type==="select"?r(e)&&e.ctrlKey:r(e);if(i){this.sendCurrentValue()}if(l(e)){this.discardChanges()}}onWcsInputOrChange(e){e.stopImmediatePropagation();const i=this.type==="select"?e.detail.value:e.detail.target.value;this.currentValue=i;if(this.validateFn){this.isError=!this.validateFn(this.currentValue)}}cleanUpSpiedElementEventListeners(){var e,i,t;(e=this.spiedElement)===null||e===void 0?void 0:e.removeEventListener("keydown",this.onInputKeydownCallback);(i=this.spiedElement)===null||i===void 0?void 0:i.removeEventListener("wcsInput",this.onWcsInputOrChangeCallback);(t=this.spiedElement)===null||t===void 0?void 0:t.removeEventListener("wcsChange",this.onWcsInputOrChangeCallback)}initWithInput(e){const i=e.filter((e=>e.tagName==="WCS-INPUT"))[0];if(!i)throw new Error("You must provide a slotted input element to handle edition");this.spiedElement=i;this.addWcsInputEventHandler(this.spiedElement);this.addKeyDownHandler(this.spiedElement)}initWithTextArea(e){const i=e.filter((e=>e.tagName==="WCS-TEXTAREA"))[0];if(!i)throw new Error("You must provide a slotted textarea element to handle edition");this.spiedElement=i;this.addWcsInputEventHandler(this.spiedElement);this.addKeyDownHandler(this.spiedElement)}initWithSelect(e){const i=e.filter((e=>e.tagName==="WCS-SELECT"))[0];if(!i)throw new Error("You must provide a slotted select element to handle edition");this.spiedElement=i;this.addWcsChangeEventHandler(this.spiedElement);this.addKeyDownHandler(this.spiedElement)}addWcsChangeEventHandler(e){this.onWcsInputOrChangeCallback=this.onWcsInputOrChange.bind(this);e.addEventListener("wcsChange",this.onWcsInputOrChangeCallback)}addWcsInputEventHandler(e){this.onWcsInputOrChangeCallback=this.onWcsInputOrChange.bind(this);e.addEventListener("wcsInput",this.onWcsInputOrChangeCallback)}addKeyDownHandler(e){this.onInputKeydownCallback=this.keyboardSubmitHandler.bind(this);e.addEventListener("keydown",this.onInputKeydownCallback)}focusEditModeBtn(){setTimeout((()=>{var e;(e=this.editModeBtn)===null||e===void 0?void 0:e.focus()}),y)}sendCurrentValue(){if(this.currentState===p.EDIT){if(this.value===this.currentValue){this.currentState=p.DISPLAY;this.focusEditModeBtn()}else{this.isError=this.validateFn?!this.validateFn(this.currentValue):false;if(!this.isError){this.currentState=p.LOAD;this.wcsChange.emit({newValue:this.currentValue,successHandler:()=>this.forceDisplayStateAndValidate(),errorHandler:()=>this.errorHandler()})}}}}discardChanges(){this.currentValue=this.value;this.currentState=p.DISPLAY;this.isError=false;this.focusEditModeBtn()}forceDisplayStateAndValidate(){if(this.currentState===p.LOAD){this.value=this.currentValue;this.currentState=p.DISPLAY;this.focusEditModeBtn()}else{throw new Error("You cannot set display state from "+p[this.currentState]+" state")}}onWindowClickEvent(e){if(d(e)&&e.detail!==0&&!o(e,this.el)){if(this.currentState===p.EDIT){if(this.isError){this.discardChanges()}else{this.sendCurrentValue()}}}}errorHandler(){this.discardChanges()}onValueChange(){this.currentState=p.DISPLAY}onDisplayContainerClick(){if(this.currentState===p.DISPLAY&&this.readonly===false){this.currentState=p.EDIT;this.spiedElement["value"]=this.currentValue;if(this.validateFn){this.isError=!this.validateFn(this.currentValue)}setTimeout((()=>{if(this.type==="input"){this.spiedElement.focus()}else if(this.type==="textarea"){this.spiedElement.fitContent();this.spiedElement.focus()}}),y)}}getReadonlySvgIcon(){return s("svg",{xmlns:"http://www.w3.org/2000/svg",width:"26",height:"24",viewBox:"0 0 27 25",class:"readonly-icon"},s("path",{d:"M26.79,25.05H1.21a.73.73,0,0,0,0,1.45H26.79a.73.73,0,0,0,0-1.45Z",transform:"translate(-0.5 -1.5)"}),s("path",{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",transform:"translate(-0.5 -1.5)"}),s("path",{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",transform:"translate(-0.5 -1.5)"}))}formatValues(){let e=this.value;let i=this.currentValue;if(this.formatFn){e=this.formatFn(this.value);i=this.formatFn(this.currentValue)}if(Array.isArray(this.value)){e=this.value.join(", ")}if(Array.isArray(this.currentValue)){i=this.currentValue.join(", ")}return{formattedValue:e?s("span",null,e):s("span",null),formattedValueText:e,formattedCurrentValue:i?s("span",null,i):s("span",null)}}render(){const{formattedValue:e,formattedValueText:i,formattedCurrentValue:t}=this.formatValues();return s(a,{key:"81f6b6b92cd0a6f60a0eb4fbdb781a42863d4478"},s("div",{key:"1278b7794e0127f1f2bc819d246712d55a139abd",class:"label"},this.label),s("button",{key:"6049a936d198c5ee68db9a29466b82dc0ca55fa2",type:"button",class:"display-container "+(this.currentState!==p.DISPLAY?"display-none":""),onClick:()=>this.onDisplayContainerClick(),ref:e=>this.editModeBtn=e,"aria-label":`${g} ${this.label} ${i}`},e,s("wcs-mat-icon",{key:"97020f20f553553b1e3a866d6d2ad274504b1bc9",icon:"edit",size:"s"}),this.readonly?this.getReadonlySvgIcon():null),s("div",{key:"17c58773fdaa738eef36c20545815ff10c35c5eb",class:"load-container "+(this.currentState!==p.LOAD?"display-none":"")},t,s("wcs-spinner",{key:"b2ef7dd52a95d0604cd74368a17cf26283a663a9"})),s("wcs-form-field",{key:"38891efe6c9c119ad7d261f31edba4b4e5e3ae71","is-error":this.isError,class:"edit-container "+(this.currentState!==p.EDIT?"display-none":"")},s("wcs-label",{key:"80ff051b722d175932c4cf56410f8c4081fe4cb8",class:"visually-hidden"},this.label),s("slot",{key:"4e8592e8283ce75e629f61dafd609c59cd5fbbc0"}),this.isError&&this.errorMsg?s("wcs-error",null,this.errorMsg):null))}get el(){return this}static get watchers(){return{value:["onValueChange"]}}static get style(){return m}},[1,"wcs-editable-field",{type:[1],label:[1],readonly:[516],value:[1032],validateFn:[16],formatFn:[16],errorMsg:[1,"error-msg"],size:[513],currentState:[32],isError:[32]},[[8,"click","onWindowClickEvent"]],{value:["onValueChange"]}]);function z(){if(typeof customElements==="undefined"){return}const e=["wcs-editable-field","wcs-error","wcs-form-field","wcs-label","wcs-mat-icon","wcs-spinner"];e.forEach((e=>{switch(e){case"wcs-editable-field":if(!customElements.get(e)){customElements.define(e,k)}break;case"wcs-error":if(!customElements.get(e)){c()}break;case"wcs-form-field":if(!customElements.get(e)){n()}break;case"wcs-label":if(!customElements.get(e)){h()}break;case"wcs-mat-icon":if(!customElements.get(e)){f()}break;case"wcs-spinner":if(!customElements.get(e)){b()}break}}))}const x=k;const E=z;export{x as WcsEditableField,E as defineCustomElement};
+import{p as e,H as t,d as i,h as s,c as a}from"./p-2bef72c7.js";import{b as l,k as d,l as o,d as r}from"./p-53550684.js";import{d as n}from"./p-791fce94.js";import{d as c}from"./p-16c7ed2e.js";import{d as h}from"./p-9138985e.js";import{d as f}from"./p-95eb2e54.js";import{d as b}from"./p-d7d1ea63.js";const w=["m","l"];function u(e){return w.includes(e)}const v=":host{--wcs-editable-field-label-color:var(--wcs-semantic-color-text-primary);--wcs-editable-field-label-font-weight:var(--wcs-semantic-font-weight-book);--wcs-editable-field-label-gap:var(--wcs-semantic-spacing-base);--wcs-editable-field-label-font-size:var(--wcs-semantic-font-size-m);--wcs-editable-field-background-color:var(--wcs-semantic-color-background-control-default);--wcs-editable-field-value-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-editable-field-value-color-default:var(--wcs-semantic-color-text-primary);--wcs-editable-field-value-color-hover:var(--wcs-semantic-color-text-primary);--wcs-editable-field-value-color-readonly:var(--wcs-semantic-color-text-tertiary);--wcs-editable-field-height-m:var(--wcs-semantic-size-m);--wcs-editable-field-height-l:var(--wcs-semantic-size-l);--wcs-editable-field-font-size-m:var(--wcs-semantic-font-size-m);--wcs-editable-field-font-size-l:var(--wcs-semantic-font-size-l);--wcs-editable-field-border-radius:var(--wcs-semantic-border-radius-base);--wcs-editable-field-border-width:var(--wcs-semantic-border-width-default);--wcs-editable-field-border-width-focus:var(--wcs-semantic-border-width-large);--wcs-editable-field-border-width-hover:var(--wcs-semantic-border-width-default);--wcs-editable-field-border-color-default:var(--wcs-semantic-color-border-primary);--wcs-editable-field-border-color-hover:var(--wcs-semantic-color-border-control-focus);--wcs-editable-field-border-color-focus:var(--wcs-semantic-color-border-control-focus);--wcs-editable-field-border-style:var(--wcs-semantic-border-style-focus-control);--wcs-editable-field-padding-vertical-m:0;--wcs-editable-field-padding-vertical-l:0;--wcs-editable-field-padding-horizontal-m:var(--wcs-semantic-spacing-large);--wcs-editable-field-padding-horizontal-l:var(--wcs-semantic-spacing-large);--wcs-editable-field-icon-color-readonly:var(--wcs-semantic-color-text-tertiary);--wcs-editable-field-host-padding:var(--wcs-editable-field-padding-vertical-m) var(--wcs-editable-field-padding-horizontal-m);--wcs-editable-field-host-height:var(--wcs-editable-field-height-m);--wcs-editable-field-font-size:var(--wcs-editable-field-font-size-m);display:block}:host .display-none{display:none !important}:host .label{margin-bottom:var(--wcs-editable-field-label-gap);font-weight:var(--wcs-editable-field-label-font-weight);font-size:var(--wcs-editable-field-label-font-size);color:var(--wcs-editable-field-label-color)}:host .edit-container{display:flex;width:100%}:host .edit-container .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap;outline:0;outline-offset:0}:host button.display-container{width:100%;border:none;font-family:inherit;text-align:start;box-sizing:border-box;min-height:var(--wcs-editable-field-host-height);white-space:break-spaces;display:flex;justify-content:space-between;align-items:center;background-color:var(--wcs-editable-field-background-color);border-radius:var(--wcs-editable-field-border-radius);font-size:var(--wcs-editable-field-font-size);line-height:1.5;font-weight:var(--wcs-editable-field-value-font-weight);color:var(--wcs-editable-field-value-color-default);padding:var(--wcs-editable-field-host-padding);outline:var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width) var(--wcs-editable-field-border-color-default)}:host button.display-container wcs-mat-icon{display:none}:host .load-container{box-sizing:border-box;min-height:var(--wcs-editable-field-host-height);white-space:pre;display:flex;justify-content:space-between;background-color:var(--wcs-editable-field-background-color);border-radius:var(--wcs-editable-field-border-radius);font-size:var(--wcs-editable-field-font-size);line-height:1.5;font-weight:var(--wcs-editable-field-value-font-weight);color:var(--wcs-editable-field-value-color-default);padding:var(--wcs-editable-field-host-padding);outline:var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width) var(--wcs-editable-field-border-color-default);align-items:center}:host wcs-spinner{height:24px;width:24px}:host .readonly-icon{fill:var(--wcs-editable-field-icon-color-readonly)}:host([readonly]){--wcs-editable-field-background-color:var(--wcs-semantic-color-background-control-readonly)}:host([readonly]) .display-container{color:var(--wcs-editable-field-value-color-readonly)}:host([readonly]) .display-container:focus-visible{outline:var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width-focus) var(--wcs-editable-field-border-color-default)}:host(:not([readonly])) .display-container:hover wcs-mat-icon,:host(:not([readonly])) .display-container:focus-visible wcs-mat-icon{display:flex;align-items:center}:host(:not([readonly])) .display-container:hover{color:var(--wcs-editable-field-value-color-hover);cursor:pointer;outline:var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width-hover) var(--wcs-editable-field-border-color-hover)}:host(:not([readonly])) .display-container:focus-visible{outline:var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width-focus) var(--wcs-editable-field-border-color-focus)}:host([size=l]){--wcs-editable-field-host-padding:var(--wcs-editable-field-padding-vertical-l) var(--wcs-editable-field-padding-horizontal-l);--wcs-editable-field-host-height:var(--wcs-editable-field-height-l);--wcs-editable-field-font-size:var(--wcs-editable-field-font-size-l)}:host([size=m]){--wcs-editable-field-host-padding:var(--wcs-editable-field-padding-vertical-m) var(--wcs-editable-field-padding-horizontal-m);--wcs-editable-field-host-height:var(--wcs-editable-field-height-m);--wcs-editable-field-font-size:var(--wcs-editable-field-font-size-m)}";const m=v;var p;(function(e){e[e["DISPLAY"]=0]="DISPLAY";e[e["EDIT"]=1]="EDIT";e[e["LOAD"]=2]="LOAD"})(p||(p={}));const g="Éditer";const y=20;const k=e(class e extends t{constructor(){super();this.__registerHost();this.__attachShadow();this.wcsChange=i(this,"wcsChange",7);this.spiedElement=null;this.currentValue=null;this.currentState=p.DISPLAY;this.type="input";this.label=undefined;this.readonly=false;this.value=undefined;this.validateFn=undefined;this.formatFn=undefined;this.errorMsg=null;this.size="m";this.isError=false}componentWillLoad(){if(!u(this.size)){console.warn(`Invalid size value for wcs-editable-field : "${this.size}". Must be one of "${w.join(", ")}"`);this.size="m"}this.currentValue=this.value}componentDidLoad(){const e=this.el.shadowRoot.querySelector("slot").assignedElements();switch(this.type){case"input":this.initWithInput(e);break;case"textarea":this.initWithTextArea(e);break;case"select":this.initWithSelect(e);break}}disconnectedCallback(){this.cleanUpSpiedElementEventListeners()}keyboardSubmitHandler(e){const t=this.type==="textarea"||this.type==="select"?r(e)&&e.ctrlKey:r(e);if(t){this.sendCurrentValue()}if(l(e)){this.discardChanges()}}onWcsInputOrChange(e){e.stopImmediatePropagation();const t=this.type==="select"?e.detail.value:e.detail.target.value;this.currentValue=t;if(this.validateFn){this.isError=!this.validateFn(this.currentValue)}}cleanUpSpiedElementEventListeners(){var e,t,i;(e=this.spiedElement)===null||e===void 0?void 0:e.removeEventListener("keydown",this.onInputKeydownCallback);(t=this.spiedElement)===null||t===void 0?void 0:t.removeEventListener("wcsInput",this.onWcsInputOrChangeCallback);(i=this.spiedElement)===null||i===void 0?void 0:i.removeEventListener("wcsChange",this.onWcsInputOrChangeCallback)}initWithInput(e){const t=e.filter((e=>e.tagName==="WCS-INPUT"))[0];if(!t)throw new Error("You must provide a slotted input element to handle edition");this.spiedElement=t;this.addWcsInputEventHandler(this.spiedElement);this.addKeyDownHandler(this.spiedElement)}initWithTextArea(e){const t=e.filter((e=>e.tagName==="WCS-TEXTAREA"))[0];if(!t)throw new Error("You must provide a slotted textarea element to handle edition");this.spiedElement=t;this.addWcsInputEventHandler(this.spiedElement);this.addKeyDownHandler(this.spiedElement)}initWithSelect(e){const t=e.filter((e=>e.tagName==="WCS-SELECT"))[0];if(!t)throw new Error("You must provide a slotted select element to handle edition");this.spiedElement=t;this.addWcsChangeEventHandler(this.spiedElement);this.addKeyDownHandler(this.spiedElement)}addWcsChangeEventHandler(e){this.onWcsInputOrChangeCallback=this.onWcsInputOrChange.bind(this);e.addEventListener("wcsChange",this.onWcsInputOrChangeCallback)}addWcsInputEventHandler(e){this.onWcsInputOrChangeCallback=this.onWcsInputOrChange.bind(this);e.addEventListener("wcsInput",this.onWcsInputOrChangeCallback)}addKeyDownHandler(e){this.onInputKeydownCallback=this.keyboardSubmitHandler.bind(this);e.addEventListener("keydown",this.onInputKeydownCallback)}focusEditModeBtn(){setTimeout((()=>{var e;(e=this.editModeBtn)===null||e===void 0?void 0:e.focus()}),y)}sendCurrentValue(){if(this.currentState===p.EDIT){if(this.value===this.currentValue){this.currentState=p.DISPLAY;this.focusEditModeBtn()}else{this.isError=this.validateFn?!this.validateFn(this.currentValue):false;if(!this.isError){this.currentState=p.LOAD;this.wcsChange.emit({newValue:this.currentValue,successHandler:()=>this.forceDisplayStateAndValidate(),errorHandler:()=>this.errorHandler()})}}}}discardChanges(){this.currentValue=this.value;this.currentState=p.DISPLAY;this.isError=false;this.focusEditModeBtn()}forceDisplayStateAndValidate(){if(this.currentState===p.LOAD){this.value=this.currentValue;this.currentState=p.DISPLAY;this.focusEditModeBtn()}else{throw new Error("You cannot set display state from "+p[this.currentState]+" state")}}onWindowClickEvent(e){if(d(e)&&e.detail!==0&&!o(e,this.el)){if(this.currentState===p.EDIT){if(this.isError){this.discardChanges()}else{this.sendCurrentValue()}}}}errorHandler(){this.discardChanges()}onValueChange(){this.currentState=p.DISPLAY;this.currentValue=this.value}onDisplayContainerClick(){if(this.currentState===p.DISPLAY&&this.readonly===false){this.currentState=p.EDIT;this.spiedElement["value"]=this.currentValue;if(this.validateFn){this.isError=!this.validateFn(this.currentValue)}setTimeout((()=>{if(this.type==="input"){this.spiedElement.focus()}else if(this.type==="textarea"){this.spiedElement.fitContent();this.spiedElement.focus()}}),y)}}getReadonlySvgIcon(){return s("svg",{xmlns:"http://www.w3.org/2000/svg",width:"26",height:"24",viewBox:"0 0 27 25",class:"readonly-icon"},s("path",{d:"M26.79,25.05H1.21a.73.73,0,0,0,0,1.45H26.79a.73.73,0,0,0,0-1.45Z",transform:"translate(-0.5 -1.5)"}),s("path",{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",transform:"translate(-0.5 -1.5)"}),s("path",{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",transform:"translate(-0.5 -1.5)"}))}getSelectElement(){var e;return(e=this.spiedElement)!==null&&e!==void 0?e:this.el.querySelector("wcs-select")}computeSelectDisplayTextFromSlottedSelectOptions(e){var t,i,s,a;const l=this.getSelectElement();if(l.serverMode){return e}const d=Array.from((t=l===null||l===void 0?void 0:l.querySelectorAll("wcs-select-option"))!==null&&t!==void 0?t:[]);const o=(i=l===null||l===void 0?void 0:l.compareWith)!==null&&i!==void 0?i:(e,t)=>e===t;if(Array.isArray(e)){return e.map((e=>{var t,i;return(i=(t=d.find((t=>o(t.value,e))))===null||t===void 0?void 0:t.innerText)!==null&&i!==void 0?i:e})).join(", ")}return(a=(s=d.find((t=>o(t.value,e))))===null||s===void 0?void 0:s.innerText)!==null&&a!==void 0?a:e}getDisplayValue(e){if(this.formatFn){return this.formatFn(e)}if(this.type==="select"){return this.computeSelectDisplayTextFromSlottedSelectOptions(e)}if(Array.isArray(e)){return e.join(", ")}return e}formatValues(){const e=this.getDisplayValue(this.value);const t=this.getDisplayValue(this.currentValue);return{formattedValue:e?s("span",null,e):s("span",null),formattedValueText:e,formattedCurrentValue:t?s("span",null,t):s("span",null)}}render(){const{formattedValue:e,formattedValueText:t,formattedCurrentValue:i}=this.formatValues();return s(a,{key:"3980dc18ccf2a4ea568569dd6f072ea19d2e2ce3"},s("div",{key:"6d853b2bfdee062fd8e8a3e0aa9f19e17def5206",class:"label"},this.label),s("button",{key:"9e8211967d9e48ea201ee25cbd6d5df17f77a9bb",type:"button",class:"display-container "+(this.currentState!==p.DISPLAY?"display-none":""),onClick:()=>this.onDisplayContainerClick(),ref:e=>this.editModeBtn=e,"aria-label":`${g} ${this.label} ${t}`},e,s("wcs-mat-icon",{key:"774fd99f237ad6c63fc8895f3d6cdfb99314adec",icon:"edit",size:"s"}),this.readonly?this.getReadonlySvgIcon():null),s("div",{key:"ab98ad8b0909933b680353b46c1407b0f82af28a",class:"load-container "+(this.currentState!==p.LOAD?"display-none":"")},i,s("wcs-spinner",{key:"2ae47012c5d251b7a756a1fb13c30ad5f36ee103"})),s("wcs-form-field",{key:"0858fc4d06e5c0f1c6dfb23d904fb36ea348d9b8","is-error":this.isError,class:"edit-container "+(this.currentState!==p.EDIT?"display-none":"")},s("wcs-label",{key:"5f901a2af267d42b20aa67b80245f63c0124fdd2",class:"visually-hidden"},this.label),s("slot",{key:"d7948c3e0187f6d92727167eb1737d7b6973072d"}),this.isError&&this.errorMsg?s("wcs-error",null,this.errorMsg):null))}get el(){return this}static get watchers(){return{value:["onValueChange"]}}static get style(){return m}},[1,"wcs-editable-field",{type:[1],label:[1],readonly:[516],value:[1032],validateFn:[16],formatFn:[16],errorMsg:[1,"error-msg"],size:[513],currentState:[32],isError:[32]},[[8,"click","onWindowClickEvent"]],{value:["onValueChange"]}]);function z(){if(typeof customElements==="undefined"){return}const e=["wcs-editable-field","wcs-error","wcs-form-field","wcs-label","wcs-mat-icon","wcs-spinner"];e.forEach((e=>{switch(e){case"wcs-editable-field":if(!customElements.get(e)){customElements.define(e,k)}break;case"wcs-error":if(!customElements.get(e)){n()}break;case"wcs-form-field":if(!customElements.get(e)){c()}break;case"wcs-label":if(!customElements.get(e)){h()}break;case"wcs-mat-icon":if(!customElements.get(e)){f()}break;case"wcs-spinner":if(!customElements.get(e)){b()}break}}))}const x=k;const E=z;export{x as WcsEditableField,E as defineCustomElement};
 //# sourceMappingURL=wcs-editable-field.js.map