wcs-core 7.4.0 → 7.5.0

package/bundle/wcs-com-nav-category.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface WcsComNavCategory extends Components.WcsComNavCategory, HTMLElement {}
+export const WcsComNavCategory: {
+    prototype: WcsComNavCategory;
+    new (): WcsComNavCategory;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,2 @@
+import{p as e,H as o,d as t,h as a,c}from"./p-2bef72c7.js";import{c as n,d as s,i,a as r,s as l}from"./p-2e9b9605.js";import{c as m}from"./p-f0dda0b8.js";const d=':host{--wcs-com-nav-category-label-mobile-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-com-nav-category-label-mobile-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-category-label-font-size:var(--wcs-semantic-font-size-label-1);--wcs-com-nav-category-label-desktop-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-com-nav-category-label-desktop-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-category-label-desktop-gap:var(--wcs-semantic-spacing-base);--wcs-com-nav-category-label-desktop-focus-outline-color:var(--wcs-semantic-color-border-focus-base);--wcs-com-nav-category-item-mobile-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-category-item-mobile-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-com-nav-category-item-mobile-spacing-top:var(--wcs-semantic-spacing-large);--wcs-com-nav-category-item-mobile-spacing-left:calc(var(--wcs-semantic-spacing-base) * 3);--wcs-com-nav-category-item-mobile-gap:calc(var(--wcs-semantic-spacing-base) * 1.5);--wcs-com-nav-category-desktop-menu-background-color:transparent;--wcs-com-nav-category-desktop-menu-border-left-width:var(--wcs-semantic-border-width-default);--wcs-com-nav-category-desktop-menu-border-left-color:var(--wcs-semantic-color-border-secondary);--wcs-com-nav-category-desktop-menu-background-indicator-color:transparent;--wcs-com-nav-category-desktop-menu-gap:calc(var(--wcs-semantic-spacing-base) * 3);--wcs-com-nav-category-item-desktop-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-category-item-desktop-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-com-nav-category-desktop-menu-padding-top:50px;--wcs-com-nav-category-desktop-menu-padding-bottom:50px;--wcs-com-nav-category-desktop-menu-padding-left:50px;--wcs-com-nav-category-desktop-menu-padding-right:0;display:block;height:fit-content}:host button{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:initial}:host .label-container{margin:0;font-size:var(--wcs-com-nav-category-label-font-size);font-weight:var(--wcs-com-nav-category-label-mobile-font-weight);display:block;color:var(--wcs-com-nav-category-label-mobile-color)}:host .label-container .arrow-container{display:none}:host .label-container .arrow-icon{display:none}:host .item-container{display:flex;flex-direction:column;gap:var(--wcs-com-nav-category-item-mobile-gap);margin-left:var(--wcs-com-nav-category-item-mobile-spacing-left);margin-top:var(--wcs-com-nav-category-item-mobile-spacing-top)}:host .item-container ::slotted(wcs-com-nav-item){color:var(--wcs-com-nav-category-item-mobile-color);font-weight:var(--wcs-com-nav-category-item-mobile-font-weight)}@media (min-width: 576px){:host{padding-bottom:unset}:host .item-container:not([data-open]){display:none}:host button{cursor:pointer}:host .label-container{display:flex;align-items:center;gap:var(--wcs-com-nav-category-label-desktop-gap);font-weight:var(--wcs-com-nav-category-label-desktop-font-weight);cursor:pointer;user-select:none;padding-left:unset;color:var(--wcs-com-nav-category-label-desktop-color)}:host .label-container .arrow-icon{display:inline-block;font-family:icons;font-size:0.6rem;line-height:1;box-sizing:border-box}:host .label-container .arrow-container{display:unset}:host .label-container:focus-visible{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-category-label-desktop-focus-outline-color);outline-offset:0.1rem;border-radius:5px}@supports not selector(.label-container:focus-visible){:host .label-container:focus-within{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-category-label-desktop-focus-outline-color);outline-offset:0.1rem;border-radius:5px}}:host button.label-container[aria-expanded=true]:after{position:absolute;left:calc(50% + var(--wcs-com-content-max-width) / 8 - 0.5625rem);z-index:2;display:block;width:1.125rem;height:1.125rem;content:"";background-color:var(--wcs-com-nav-category-desktop-menu-background-indicator-color);transform:rotate(45deg)}:host .item-container[data-open]{position:absolute;border-left:solid var(--wcs-com-nav-category-desktop-menu-border-left-width) var(--wcs-com-nav-category-desktop-menu-border-left-color);left:calc(50% + var(--wcs-com-content-max-width) / 8);top:0;right:0;padding:var(--wcs-com-nav-category-desktop-menu-padding-top) var(--wcs-com-nav-category-desktop-menu-padding-right) var(--wcs-com-nav-category-desktop-menu-padding-bottom) var(--wcs-com-nav-category-desktop-menu-padding-left);background-blend-mode:multiply;background-color:var(--wcs-com-nav-category-desktop-menu-background-color);box-sizing:border-box;height:100%;margin-left:unset;margin-top:unset;display:flex;flex-direction:column;gap:var(--wcs-com-nav-category-desktop-menu-gap);align-items:start}:host .item-container[data-open] ::slotted(wcs-com-nav-item){color:var(--wcs-com-nav-category-item-desktop-color);font-weight:var(--wcs-com-nav-category-item-desktop-font-weight)}:host .item-container[data-open] ::slotted(wcs-com-nav-item:focus-within){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-category-item-desktop-color);outline-offset:0.1rem;border-radius:2px}}';const g=d;const p=["title"];const b=e(class e extends o{constructor(){super();this.__registerHost();this.__attachShadow();this.wcsCategoryOpened=t(this,"wcsCategoryOpened",7);this.inheritedAttributes={};this.categoryItemsId=`wcs-com-nav-category-items`;this.label=undefined;this.categoryOpen=false;this.currentActiveSizing="desktop"}onWindowClickEvent(e){if(this.categoryOpen)this.categoryOpen=false}onSubmenuOpened(e){if(e.detail.categoryElement!==this.el){this.categoryOpen=false}}componentDidLoad(){if(!this.resizeObserver){this.resizeObserver=m(this);this.resizeObserver.observe(document.body)}}handleCategoryItemsKeyDown(e){if(n(e)||s(e)){this.handleItemClick(e)}}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},i(this.el)),r(this.el,p))}async setAriaAttribute(e,o){l(this.nativeButton,e,o)}async close(){this.categoryOpen=false}async open(){this.categoryOpen=true}onClick(e){e.stopPropagation();this.wcsCategoryOpened.emit({categoryElement:this.el})}handleItemClick(e){if(e.target.tagName==="A"){this.close()}}disconnectedCallback(){var e;(e=this.resizeObserver)===null||e===void 0?void 0:e.disconnect()}render(){return a(c,{key:"0b5d69d30228c1585c17d74bf8183f6fe91c1696",role:"listitem",onClick:e=>this.onClick(e)},this.currentActiveSizing==="mobile"?a("h3",{role:"presentation",class:"label-container"},a("span",{class:"label"},this.label)):a("button",Object.assign({class:"label-container","aria-controls":this.categoryItemsId,"aria-expanded":this.categoryOpen?"true":"false",ref:e=>this.nativeButton=e,onClick:e=>this.categoryOpen=!this.categoryOpen},this.inheritedAttributes),a("span",{class:"label"},this.label),a("span",{class:"arrow-container"},a("span",{"aria-hidden":"true",class:"arrow-icon"},""))),a("div",{key:"8269a3a8eb304343e6beef3cfde1e20976e02bbb",class:"item-container",role:"list","aria-label":this.label,id:this.categoryItemsId,tabIndex:-1,"data-open":this.categoryOpen,onKeyDown:e=>this.handleCategoryItemsKeyDown(e),onClick:e=>this.handleItemClick(e)},a("slot",{key:"0cd3f5916499f4e14d554e7fe963a2a384c4b39d"})))}get el(){return this}static get style(){return g}},[1,"wcs-com-nav-category",{label:[1],categoryOpen:[32],currentActiveSizing:[32],setAriaAttribute:[64],close:[64],open:[64]},[[8,"click","onWindowClickEvent"],[8,"wcsCategoryOpened","onSubmenuOpened"]]]);function w(){if(typeof customElements==="undefined"){return}const e=["wcs-com-nav-category"];e.forEach((e=>{switch(e){case"wcs-com-nav-category":if(!customElements.get(e)){customElements.define(e,b)}break}}))}const h=b;const v=w;export{h as WcsComNavCategory,v as defineCustomElement};
+//# sourceMappingURL=wcs-com-nav-category.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["comNavCategoryCss","WcsComNavCategoryStyle0","COM_NAV_CATEGORY_INHERITED_ATTRS","ComNavCategory","proxyCustomElement","H","this","inheritedAttributes","categoryItemsId","onWindowClickEvent","_","categoryOpen","onSubmenuOpened","event","detail","categoryElement","el","componentDidLoad","resizeObserver","comNavDidLoadWithResizeObserver","observe","document","body","handleCategoryItemsKeyDown","_event","isSpaceKey","isEnterKey","handleItemClick","componentWillLoad","Object","assign","inheritAriaAttributes","inheritAttributes","setAriaAttribute","attr","value","setOrRemoveAttribute","nativeButton","close","open","onClick","evt","stopPropagation","wcsCategoryOpened","emit","target","tagName","disconnectedCallback","_a","disconnect","render","h","Host","key","role","currentActiveSizing","class","label","ref","id","tabIndex","onKeyDown"],"sources":["src/components/com-nav-category/com-nav-category.scss?tag=wcs-com-nav-category&encapsulation=shadow","src/components/com-nav-category/com-nav-category.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n@import '../com-nav/com-nav-focus.scss';\n@import '../../style/breakpoints.scss';\n\n:host {\n    --wcs-com-nav-category-label-mobile-font-weight: var(--wcs-semantic-font-weight-medium);\n    --wcs-com-nav-category-label-mobile-color: var(--wcs-semantic-color-text-primary);\n\n    --wcs-com-nav-category-label-font-size: var(--wcs-semantic-font-size-label-1);\n    --wcs-com-nav-category-label-desktop-font-weight: var(--wcs-semantic-font-weight-roman);\n    --wcs-com-nav-category-label-desktop-color: var(--wcs-semantic-color-text-primary);\n    --wcs-com-nav-category-label-desktop-gap: var(--wcs-semantic-spacing-base);\n    --wcs-com-nav-category-label-desktop-focus-outline-color: var(--wcs-semantic-color-border-focus-base);\n\n    --wcs-com-nav-category-item-mobile-color: var(--wcs-semantic-color-text-primary);\n    --wcs-com-nav-category-item-mobile-font-weight: var(--wcs-semantic-font-weight-roman);\n    --wcs-com-nav-category-item-mobile-spacing-top: var(--wcs-semantic-spacing-large);\n    --wcs-com-nav-category-item-mobile-spacing-left: calc(var(--wcs-semantic-spacing-base) * 3);\n    --wcs-com-nav-category-item-mobile-gap: calc(var(--wcs-semantic-spacing-base) * 1.5);\n\n    --wcs-com-nav-category-desktop-menu-background-color: transparent;\n    --wcs-com-nav-category-desktop-menu-border-left-width: var(--wcs-semantic-border-width-default);\n    --wcs-com-nav-category-desktop-menu-border-left-color: var(--wcs-semantic-color-border-secondary);\n    --wcs-com-nav-category-desktop-menu-background-indicator-color: transparent;\n    --wcs-com-nav-category-desktop-menu-gap: calc(var(--wcs-semantic-spacing-base) * 3);\n    --wcs-com-nav-category-item-desktop-color: var(--wcs-semantic-color-text-primary);\n    --wcs-com-nav-category-item-desktop-font-weight: var(--wcs-semantic-font-weight-roman);\n\n    --wcs-com-nav-category-desktop-menu-padding-top: 50px;\n    --wcs-com-nav-category-desktop-menu-padding-bottom: 50px;\n    --wcs-com-nav-category-desktop-menu-padding-left: 50px;\n    --wcs-com-nav-category-desktop-menu-padding-right: 0;\n\n    display: block;\n    height: fit-content;\n\n    button {\n        background: none;\n        border: none;\n        padding: 0;\n        margin: 0;\n        font: inherit;\n        color: inherit;\n        cursor: initial;\n    }\n\n    .label-container {\n        margin: 0;\n        font-size: var(--wcs-com-nav-category-label-font-size);\n        font-weight: var(--wcs-com-nav-category-label-mobile-font-weight);\n        display: block;\n        color: var(--wcs-com-nav-category-label-mobile-color);\n\n        .arrow-container {\n            display: none;\n        }\n\n        .arrow-icon {\n            display: none;\n        }\n    }\n\n    .item-container {\n        display: flex;\n        flex-direction: column;\n        gap: var(--wcs-com-nav-category-item-mobile-gap);\n        margin-left: var(--wcs-com-nav-category-item-mobile-spacing-left);\n        margin-top: var(--wcs-com-nav-category-item-mobile-spacing-top);\n\n        ::slotted(wcs-com-nav-item) {\n            color: var(--wcs-com-nav-category-item-mobile-color);\n            font-weight: var(--wcs-com-nav-category-item-mobile-font-weight);\n        }\n    }\n}\n\n@include for-tablet-portrait-up {\n    :host {\n        padding-bottom: unset;\n\n        .item-container:not([data-open]) {\n            display: none;\n        }\n\n        button {\n            cursor: pointer;\n        }\n\n        .label-container {\n            display: flex;\n            align-items: center;\n            gap: var(--wcs-com-nav-category-label-desktop-gap);\n\n            font-weight: var(--wcs-com-nav-category-label-desktop-font-weight);\n            cursor: pointer;\n            user-select: none;\n            padding-left: unset;\n            color: var(--wcs-com-nav-category-label-desktop-color);\n\n            .arrow-icon {\n                display: inline-block;\n                font-family: icons;\n                font-size: 0.6rem;\n                line-height: 1;\n                box-sizing: border-box;\n            }\n\n            .arrow-container {\n                display: unset;\n            }\n        }\n\n        .label-container:focus-visible {\n            @include focus-outline(var(--wcs-com-nav-category-label-desktop-focus-outline-color), 5px, 0.1rem);\n        }\n\n        @supports not selector(.label-container:focus-visible) {\n            .label-container:focus-within {\n                @include focus-outline(var(--wcs-com-nav-category-label-desktop-focus-outline-color), 5px, 0.1rem);\n            }\n        }\n\n        button.label-container[aria-expanded=\"true\"]:after {\n            position: absolute;\n            left: calc(calc(calc(100% / 2) + calc(var(--wcs-com-content-max-width) / 8)) - calc(1.125rem / 2));\n            z-index: 2;\n            display: block;\n            width: 1.125rem;\n            height: 1.125rem;\n            content: \"\";\n            background-color: var(--wcs-com-nav-category-desktop-menu-background-indicator-color);\n            transform: rotate(45deg);\n        }\n\n        .item-container[data-open] {\n            position: absolute;\n            border-left: solid var(--wcs-com-nav-category-desktop-menu-border-left-width) var(--wcs-com-nav-category-desktop-menu-border-left-color);\n            left: calc(calc(100% / 2) + calc(var(--wcs-com-content-max-width) / 8));\n            top: 0;\n            right: 0;\n            padding: var(--wcs-com-nav-category-desktop-menu-padding-top) var(--wcs-com-nav-category-desktop-menu-padding-right) var(--wcs-com-nav-category-desktop-menu-padding-bottom) var(--wcs-com-nav-category-desktop-menu-padding-left);\n            background-blend-mode: multiply;\n            background-color: var(--wcs-com-nav-category-desktop-menu-background-color);\n            box-sizing: border-box;\n            height: calc(100%);\n\n            margin-left: unset;\n            margin-top: unset;\n\n            display: flex;\n            flex-direction: column;\n            gap: var(--wcs-com-nav-category-desktop-menu-gap);\n            align-items: start;\n\n            ::slotted(wcs-com-nav-item) {\n                color: var(--wcs-com-nav-category-item-desktop-color);\n                font-weight: var(--wcs-com-nav-category-item-desktop-font-weight);\n            }\n\n            ::slotted(wcs-com-nav-item:focus-within) {\n                @include com-nav-submenu-item-desktop-focus-outline(var(--wcs-com-nav-category-item-desktop-color));\n            }\n        }\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen, Method,\n    Prop,\n    State\n} from '@stencil/core';\nimport { CategoryOpenedEventDetail } from '../com-nav/com-nav-interface';\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute, isEnterKey, isSpaceKey } from \"../../utils/helpers\";\nimport { comNavDidLoadWithResizeObserver } from \"../com-nav/com-nav-utils\";\nimport { ComNavSize } from \"../com-nav/com-nav-size\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst COM_NAV_CATEGORY_INHERITED_ATTRS = ['title'];\n\n/**\n * The com-nav-category is a subcomponent of `wcs-com-nav`. It represents a category nested inside a `wcs-com-nav-submenu`.\n * \n * @cssprop --wcs-com-nav-category-label-font-size - Label font-size\n * @cssprop --wcs-com-nav-category-label-mobile-font-weight - Label font-weight on mobile\n * @cssprop --wcs-com-nav-category-label-mobile-color - Label color on mobile \n * @cssprop --wcs-com-nav-category-label-desktop-font-weight - Label font-weight on desktop\n * @cssprop --wcs-com-nav-category-label-desktop-color - Label color on mobile\n * @cssprop --wcs-com-nav-category-item-mobile-color - Color of category item (mobile)\n * @cssprop --wcs-com-nav-category-item-mobile-font-weight - Font weight of category item (mobile)\n * @cssprop --wcs-com-nav-category-item-mobile-spacing-top - Spacing top around items group (mobile)\n * @cssprop --wcs-com-nav-category-item-mobile-spacing-left - Spacing left around items group (mobile)\n * @cssprop --wcs-com-nav-category-item-mobile-gap - Gap between each category item (mobile)\n * @cssprop --wcs-com-nav-category-label-desktop-gap - Gap inside category label, between text and arrow\n * @cssprop --wcs-com-nav-category-label-desktop-focus-outline-color - Focus outline of the label (desktop)\n * @cssprop --wcs-com-nav-category-desktop-menu-background-color - Background color of the category menu (desktop)\n * @cssprop --wcs-com-nav-category-desktop-menu--border-left-width - Border left width of the category menu\n * @cssprop --wcs-com-nav-category-desktop-menu--border-left-color - Border left color of the category menu\n * @cssprop --wcs-com-nav-category-desktop-menu-background-indicator-color - Indicator color on top of menu\n * @cssprop --wcs-com-nav-category-desktop-menu-padding-top - Padding top of menu\n * @cssprop --wcs-com-nav-category-desktop-menu-padding-bottom - Padding bottom of menu\n * @cssprop --wcs-com-nav-category-desktop-menu-padding-left - Padding left of menu\n * @cssprop --wcs-com-nav-category-desktop-menu-padding-right - Padding right of menu\n * @cssprop --wcs-com-nav-category-desktop-menu-gap - Gap between each item (desktop)\n * @cssprop --wcs-com-nav-category-item-desktop-color - Color of category item (desktop)\n * @cssprop --wcs-com-nav-category-item-desktop-font-weight - Font weight of category item (desktop)\n */\n@Component({\n    tag: 'wcs-com-nav-category',\n    styleUrl: 'com-nav-category.scss',\n    shadow: true,\n})\nexport class ComNavCategory implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLWcsComNavCategoryElement;\n    private nativeButton!: HTMLButtonElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    @Prop() label: string;\n    @State() private categoryOpen: boolean = false;\n    @Event() wcsCategoryOpened: EventEmitter<CategoryOpenedEventDetail>;\n\n    private categoryItemsId = `wcs-com-nav-category-items`;\n    private resizeObserver: ResizeObserver;\n    /**\n     * To re-trigger re-render in order to render a button in case of desktop or a heading in mobile case\n     * @private\n     */\n    @State() public currentActiveSizing: ComNavSize = 'desktop';\n\n    @Listen('click', {target: 'window'})\n    onWindowClickEvent(_: MouseEvent) {\n        if (this.categoryOpen) this.categoryOpen = false;\n    }\n\n    @Listen('wcsCategoryOpened', {target: 'window'})\n    onSubmenuOpened(event: CustomEvent<CategoryOpenedEventDetail>) {\n        if (event.detail.categoryElement !== this.el) {\n            this.categoryOpen = false;\n        }\n    }\n\n    componentDidLoad(): void {\n        if(!this.resizeObserver) {\n            this.resizeObserver = comNavDidLoadWithResizeObserver(this);\n            this.resizeObserver.observe(document.body);\n        }\n    }\n\n    /**\n     * Handle key down on category items\n     * @param _event the keyboard event\n     * @private\n     */\n    private handleCategoryItemsKeyDown(_event: KeyboardEvent) {\n        if ((isSpaceKey(_event)) || isEnterKey(_event)) {\n            this.handleItemClick(_event);\n        }\n    }\n    \n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, COM_NAV_CATEGORY_INHERITED_ATTRS)\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeButton, attr, value);\n    }\n\n    /**\n     * Close the category\n     */\n    @Method()\n    async close() {\n        this.categoryOpen = false;\n    }\n\n    /**\n     * Opens the category\n     */\n    @Method()\n    async open() {\n        this.categoryOpen = true;\n    }\n\n    /**\n     * When the user clicks on the menu, we do not propagate the native event and we launch a custom event to manage\n     * the closing of the menu correctly\n     */\n    private onClick(evt: MouseEvent) {\n        evt.stopPropagation();\n        this.wcsCategoryOpened.emit({categoryElement: this.el})\n    }\n\n\n    /**\n     * Close the category and fire item click if we detect a mouse click on a slotted `a` element.\n     * @param evt\n     * @private\n     */\n    private handleItemClick(evt: UIEvent) {\n        if ((evt.target as HTMLElement).tagName === 'A') {\n            this.close();\n        }\n    }\n\n    disconnectedCallback(): void {\n        this.resizeObserver?.disconnect();\n    }\n\n    render(): any {\n        return (\n            <Host role={\"listitem\"} onClick={evt => this.onClick(evt)}>\n                {\n                    this.currentActiveSizing === 'mobile' ?\n                        <h3 role=\"presentation\" class=\"label-container\">\n                            <span class=\"label\">{this.label}</span>\n                        </h3>\n                        : <button class=\"label-container\"\n                            aria-controls={this.categoryItemsId}\n                            aria-expanded={this.categoryOpen ? 'true' : 'false'}\n                            ref={(el) => (this.nativeButton = el)}\n                            onClick={_ => this.categoryOpen = !this.categoryOpen}\n                            {...this.inheritedAttributes}>\n                            <span class=\"label\">{this.label}</span>\n                            <span class=\"arrow-container\">\n                                <span aria-hidden=\"true\" class=\"arrow-icon\">&#xf107;</span>\n                            </span>\n                        </button>\n                }\n                <div class=\"item-container\"\n                    role=\"list\"\n                    aria-label={this.label}\n                    id={this.categoryItemsId}\n                    tabIndex={-1}\n                    data-open={this.categoryOpen}\n                    onKeyDown={evt => this.handleCategoryItemsKeyDown(evt)}\n                    onClick={(evt) => this.handleItemClick(evt)}>\n                    <slot/>\n                </div>\n            </Host>\n        )\n    }\n\n}\n"],"mappings":"0JAAA,MAAMA,EAAoB,+iKAC1B,MAAAC,EAAeD,ECiBf,MAAME,EAAmC,CAAC,S,MAkC7BC,EAAcC,EAAA,MAAAD,UAAAE,E,uHAGfC,KAAAC,oBAA4C,GAM5CD,KAAAE,gBAAkB,6B,uCAHe,M,yBASS,S,CAGlD,kBAAAC,CAAmBC,GACf,GAAIJ,KAAKK,aAAcL,KAAKK,aAAe,K,CAI/C,eAAAC,CAAgBC,GACZ,GAAIA,EAAMC,OAAOC,kBAAoBT,KAAKU,GAAI,CAC1CV,KAAKK,aAAe,K,EAI5B,gBAAAM,GACI,IAAIX,KAAKY,eAAgB,CACrBZ,KAAKY,eAAiBC,EAAgCb,MACtDA,KAAKY,eAAeE,QAAQC,SAASC,K,EASrC,0BAAAC,CAA2BC,GAC/B,GAAKC,EAAWD,IAAYE,EAAWF,GAAS,CAC5ClB,KAAKqB,gBAAgBH,E,EAI7B,iBAAAI,GACItB,KAAKC,oBAAmBsB,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsBzB,KAAKU,KAC3BgB,EAAkB1B,KAAKU,GAAId,G,CAKtC,sBAAM+B,CAAiBC,EAAyBC,GAC5CC,EAAqB9B,KAAK+B,aAAcH,EAAMC,E,CAOlD,WAAMG,GACFhC,KAAKK,aAAe,K,CAOxB,UAAM4B,GACFjC,KAAKK,aAAe,I,CAOhB,OAAA6B,CAAQC,GACZA,EAAIC,kBACJpC,KAAKqC,kBAAkBC,KAAK,CAAC7B,gBAAiBT,KAAKU,I,CAS/C,eAAAW,CAAgBc,GACpB,GAAKA,EAAII,OAAuBC,UAAY,IAAK,CAC7CxC,KAAKgC,O,EAIb,oBAAAS,G,OACIC,EAAA1C,KAAKY,kBAAc,MAAA8B,SAAA,SAAAA,EAAEC,Y,CAGzB,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAM,WAAYd,QAASC,GAAOnC,KAAKkC,QAAQC,IAE7CnC,KAAKiD,sBAAwB,SACzBJ,EAAA,MAAIG,KAAK,eAAeE,MAAM,mBAC1BL,EAAA,QAAMK,MAAM,SAASlD,KAAKmD,QAE5BN,EAAA,SAAAtB,OAAAC,OAAA,CAAQ0B,MAAM,kBAAiB,gBACdlD,KAAKE,gBAAe,gBACpBF,KAAKK,aAAe,OAAS,QAC5C+C,IAAM1C,GAAQV,KAAK+B,aAAerB,EAClCwB,QAAS9B,GAAKJ,KAAKK,cAAgBL,KAAKK,cACpCL,KAAKC,qBACT4C,EAAA,QAAMK,MAAM,SAASlD,KAAKmD,OAC1BN,EAAA,QAAMK,MAAM,mBACRL,EAAA,sBAAkB,OAAOK,MAAM,cAAY,OAI3DL,EAAA,OAAAE,IAAA,2CAAKG,MAAM,iBACPF,KAAK,OAAM,aACChD,KAAKmD,MACjBE,GAAIrD,KAAKE,gBACToD,UAAW,EAAC,YACDtD,KAAKK,aAChBkD,UAAWpB,GAAOnC,KAAKiB,2BAA2BkB,GAClDD,QAAUC,GAAQnC,KAAKqB,gBAAgBc,IACvCU,EAAA,QAAAE,IAAA,8C"}

package/bundle/wcs-com-nav-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface WcsComNavItem extends Components.WcsComNavItem, HTMLElement {}
+export const WcsComNavItem: {
+    prototype: WcsComNavItem;
+    new (): WcsComNavItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,2 @@
+import{p as e,H as o,d as t,h as n,c as i}from"./p-2bef72c7.js";const c=":host{--wcs-com-nav-item-gap:var(--wcs-semantic-spacing-base);--wcs-com-nav-item-font-size:var(--wcs-semantic-font-size-label-1);--wcs-com-nav-item-arrow-icon-color:var(--wcs-semantic-color-foreground-action-neutral-default);--wcs-com-nav-item-arrow-icon-font-size:0.6rem;--wcs-com-nav-item-arrow-icon-font-family:icons;--wcs-com-nav-item-arrow-icon-line-height:1;--wcs-com-nav-item-focus-outline-color:var(--wcs-semantic-color-border-focus-base);position:relative;display:inline-flex;align-items:center;gap:var(--wcs-com-nav-item-gap);height:fit-content;padding:0 8px;font:inherit;}:host ::slotted(a){user-select:none;cursor:pointer;text-decoration:none;color:inherit;font-weight:inherit;display:flex;align-items:center}:host .arrow-icon{display:inline-block;font-family:icons;color:var(--wcs-com-nav-item-arrow-icon-color);font-size:var(--wcs-com-nav-item-arrow-icon-font-size);line-height:var(--wcs-com-nav-item-arrow-icon-line-height);box-sizing:border-box}:host .arrow-container{display:unset}:host ::slotted(a:focus-visible){outline:none}:host(:focus-within){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-item-focus-outline-color);outline-offset:0.5rem;border-radius:2px}@media screen and (min-width: 576px){:host ::slotted(a){display:flex;align-items:center;height:100%;padding-top:unset;padding-bottom:unset;padding-left:unset}}";const s=c;const a=e(class e extends o{constructor(){super();this.__registerHost();this.__attachShadow();this.wcsClickOnFinalAction=t(this,"wcsClickOnFinalAction",7)}onClick(){this.wcsClickOnFinalAction.emit()}render(){return n(i,{key:"25690c3eecac76d2b29b0aeda90f5e1bf5fd0b22",role:"listitem"},n("slot",{key:"236d67ffd9fefb7650d2b67cee685852030adb4b"}),n("span",{key:"2ef478d77dc28d169817500145c8d9df525bd439",class:"arrow-container"},n("span",{key:"0fafbba11e817663ad7e18ff6947cdbd07494f69","aria-hidden":"true",class:"arrow-icon"},"")))}static get style(){return s}},[1,"wcs-com-nav-item",undefined,[[0,"click","onClick"]]]);function r(){if(typeof customElements==="undefined"){return}const e=["wcs-com-nav-item"];e.forEach((e=>{switch(e){case"wcs-com-nav-item":if(!customElements.get(e)){customElements.define(e,a)}break}}))}const l=a;const d=r;export{l as WcsComNavItem,d as defineCustomElement};
+//# sourceMappingURL=wcs-com-nav-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["comNavItemCss","WcsComNavItemStyle0","ComNavItem","proxyCustomElement","H","onClick","this","wcsClickOnFinalAction","emit","render","h","Host","key","role","class"],"sources":["src/components/com-nav-item/com-nav-item.scss?tag=wcs-com-nav-item&encapsulation=shadow","src/components/com-nav-item/com-nav-item.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n@import '../../style/reset.scss';\n@import '../com-nav/com-nav-focus.scss';\n\n/* Default style and mobile behaviour */\n:host {\n    --wcs-com-nav-item-gap: var(--wcs-semantic-spacing-base);\n    --wcs-com-nav-item-font-size: var(--wcs-semantic-font-size-label-1);\n    --wcs-com-nav-item-arrow-icon-color: var(--wcs-semantic-color-foreground-action-neutral-default);\n    --wcs-com-nav-item-arrow-icon-font-size: 0.6rem;\n    --wcs-com-nav-item-arrow-icon-font-family: icons;\n    --wcs-com-nav-item-arrow-icon-line-height: 1;\n\n    --wcs-com-nav-item-focus-outline-color: var(--wcs-semantic-color-border-focus-base);\n\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    gap: var(--wcs-com-nav-item-gap);\n    height: fit-content;\n    padding: 0 8px;\n\n    font: inherit;\n\n    ::slotted(a) {\n        /* Default */\n        @include reset-anchor;\n\n        display: flex;\n        align-items: center;\n    }\n\n    /* Common behaviour between Large Screen and Small Screens */\n    .arrow-icon {\n        display: inline-block;\n        font-family: icons;\n        color: var(--wcs-com-nav-item-arrow-icon-color);\n        font-size: var(--wcs-com-nav-item-arrow-icon-font-size);\n        line-height: var(--wcs-com-nav-item-arrow-icon-line-height);\n        box-sizing: border-box;\n    }\n\n    .arrow-container {\n        display: unset;\n    }\n\n    /**For mobile*/\n    ::slotted(a:focus-visible) {\n        outline: none;\n    }\n}\n\n:host(:focus-within) {\n    @include com-nav-item-mobile-focus-outline(var(--wcs-com-nav-item-focus-outline-color));\n}\n\n/* Large screen, specific behaviour */\n@media screen and (min-width: 576px) {\n    :host {\n        ::slotted(a) {\n            display: flex;\n            align-items: center;\n            height: 100%;\n\n            /* Reset for pc */\n            padding-top: unset;\n            padding-bottom: unset;\n            padding-left: unset;\n        }\n\n        // Focus outline style is handling by com-nav, com-nav-submenu and com-nav-category in desktop mode\n    }\n}\n","import { Component, Host, h, Event, EventEmitter, Listen } from '@stencil/core';\n\n/**\n * The com-nav-item is a subcomponent of `wcs-com-nav`. It represents a list-item wrapper around a link.\n * \n * @cssprop --wcs-com-nav-item-gap - Gap between text and arrow\n * @cssprop --wcs-com-nav-item-font-weight - Font-weight of item\n * @cssprop --wcs-com-nav-item-arrow-icon-font-size - Arrow size\n * @cssprop --wcs-com-nav-item-focus-outline-color - Focus outline color\n */\n@Component({\n    tag: 'wcs-com-nav-item',\n    styleUrl: './com-nav-item.scss',\n    shadow: true\n})\nexport class ComNavItem {\n    /**\n     * Emitted when a user click on a final navigation action.\n     *\n     * Used by the com-nav component to close the mobile menu overlay when a user click on a final action.\n     */\n    @Event() private wcsClickOnFinalAction: EventEmitter<void>;\n    \n    @Listen('click')\n    onClick() {\n        this.wcsClickOnFinalAction.emit();\n    }\n    \n    render() {\n        return (\n            <Host role=\"listitem\">\n                <slot></slot>\n                <span class=\"arrow-container\">\n                        <span aria-hidden=\"true\" class=\"arrow-icon\">&#xf107;</span>\n                </span>\n            </Host>\n        );\n    }\n\n}\n"],"mappings":"gEAAA,MAAMA,EAAgB,q1CACtB,MAAAC,EAAeD,E,MCcFE,EAAUC,EAAA,MAAAD,UAAAE,E,+HASnB,OAAAC,GACIC,KAAKC,sBAAsBC,M,CAG/B,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,YACPH,EAAA,QAAAE,IAAA,6CACAF,EAAA,QAAAE,IAAA,2CAAME,MAAM,mBACJJ,EAAA,QAAAE,IAAA,yDAAkB,OAAOE,MAAM,cAAY,M"}

package/bundle/wcs-com-nav-submenu.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface WcsComNavSubmenu extends Components.WcsComNavSubmenu, HTMLElement {}
+export const WcsComNavSubmenu: {
+    prototype: WcsComNavSubmenu;
+    new (): WcsComNavSubmenu;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,2 @@
+import{p as e,H as t,d as n,h as s,c as o}from"./p-2bef72c7.js";import{i as a,a as i,b as c,s as r,c as m,d as u}from"./p-2e9b9605.js";import{r as d,c as l}from"./p-f0dda0b8.js";const b=":host{--wcs-com-nav-submenu-button-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-submenu-button-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-com-nav-submenu-button-focus-outline-color:var(--wcs-semantic-color-border-focus-base);--wcs-com-nav-submenu-button-gap:var(--wcs-semantic-spacing-base);--wcs-com-nav-submenu-desktop-menu-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-com-nav-submenu-desktop-menu-text-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-submenu-desktop-menu-link-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-com-nav-submenu-desktop-menu-heading-font-weight:var(--wcs-semantic-font-weight-heavy);--wcs-com-nav-submenu-desktop-menu-description-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-com-nav-submenu-desktop-menu-description-gap:var(--wcs-semantic-spacing-base);--wcs-com-nav-submenu-desktop-menu-padding:50px;--wcs-com-nav-submenu-desktop-menu-items-padding-left:50px;--wcs-com-nav-submenu-desktop-menu-items-padding-right:80px;--wcs-com-nav-submenu-mobile-text-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-submenu-mobile-link-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-com-nav-submenu-mobile-spacing-top:var(--wcs-semantic-spacing-large);--wcs-com-nav-submenu-mobile-spacing-bottom:var(--wcs-semantic-spacing-large);--wcs-com-nav-submenu-mobile-spacing-left:calc(var(--wcs-semantic-spacing-base) * 3);--wcs-com-nav-submenu-mobile-gap:calc(var(--wcs-semantic-spacing-base) * 3);display:block;padding-bottom:var(--wcs-com-nav-submenu-mobile-spacing-bottom)}:host button{display:block;background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}:host .arrow-icon{display:none}:host .arrow-container{display:none}:host .label{text-transform:uppercase;font-size:16px;cursor:unset;font-weight:var(--wcs-com-nav-submenu-button-font-weight);color:var(--wcs-com-nav-submenu-button-color);text-decoration:none}:host .drawer{display:contents}:host .drawer-container{display:contents}:host .drawer-description{display:none}:host .menu-items{display:flex;flex-direction:column;gap:var(--wcs-com-nav-submenu-mobile-gap)}:host .menu-items ::slotted(wcs-com-nav-item){color:var(--wcs-com-nav-submenu-mobile-text-color);font-weight:var(--wcs-com-nav-submenu-mobile-link-font-weight)}@media (max-width: 575px){:host .menu-button{margin:0}:host .menu-items{margin-top:var(--wcs-com-nav-submenu-mobile-spacing-top);margin-left:var(--wcs-com-nav-submenu-mobile-spacing-left)}}@media (min-width: 576px){:host{height:100%;padding-bottom:unset}:host .menu-button{display:flex;align-items:center;height:100%;cursor:pointer;user-select:none;font-weight:unset;padding-left:unset}:host .menu-button:focus-visible{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-submenu-button-focus-outline-color);outline-offset:0.1rem;border-radius:2px}@supports not selector(.menu-button:focus-visible){:host{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-submenu-button-focus-outline-color);outline-offset:0.1rem;border-radius:2px}}:host .label{text-transform:unset;cursor:pointer}:host .arrow-icon{display:inline-block;font-family:icons;font-size:0.6rem;line-height:1;box-sizing:border-box}:host .arrow-container{display:unset;margin-left:var(--wcs-com-nav-submenu-button-gap)}:host .arrow-icon:not([data-open]){transform:rotate(90deg)}:host .arrow-icon[data-open]{transform:rotate(-90deg)}:host .drawer{display:none;position:absolute;top:calc(var(--wcs-com-nav-menu-bar-height) + var(--wcs-com-nav-border-width));z-index:8888;left:0;width:100%;box-sizing:border-box;padding:var(--wcs-com-nav-submenu-desktop-menu-padding);background-color:var(--wcs-com-nav-submenu-desktop-menu-background-color);color:var(--wcs-com-nav-submenu-desktop-menu-text-color);box-shadow:0 4px 10px 0 rgba(0, 0, 0, 0.08)}:host .drawer-content{display:flex;justify-content:space-between;max-width:62.5%;flex:1}:host .drawer-content div:first-child{flex:0.8}:host .drawer-content div{max-width:260px}:host .menu-items{padding:0 var(--wcs-com-nav-submenu-desktop-menu-items-padding-right) 0 var(--wcs-com-nav-submenu-desktop-menu-items-padding-left);display:flex;flex-direction:column;align-items:flex-end}:host .menu-items ::slotted(wcs-com-nav-item){color:var(--wcs-com-nav-submenu-desktop-menu-text-color);font-weight:var(--wcs-com-nav-submenu-desktop-menu-link-font-weight)}:host .menu-items ::slotted(wcs-com-nav-item:focus-within){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-submenu-desktop-menu-text-color);outline-offset:0.1rem;border-radius:2px}:host .drawer-container{display:flex;max-width:var(--wcs-com-content-max-width);margin:0 auto}:host .drawer-container h3{margin:0 0 var(--wcs-com-nav-submenu-desktop-menu-description-gap) 0;font-size:1.5rem;line-height:1.25;font-weight:var(--wcs-com-nav-submenu-desktop-menu-heading-font-weight)}:host .drawer-container p{margin-top:0;margin-bottom:1rem;font-weight:var(--wcs-com-nav-submenu-desktop-menu-description-font-weight);font-size:1rem;line-height:1.375}:host .drawer[data-open]{display:block}:host .drawer-description{display:block}}";const h=b;const p=["title"];const w="WCS-COM-NAV-CATEGORY";const f=e(class e extends t{constructor(){super();this.__registerHost();this.__attachShadow();this.wcsSubmenuOpened=n(this,"wcsSubmenuOpened",7);this.inheritedAttributes={};this.menuItemsId=`wcs-com-nav-submenu-items`;this.label=undefined;this.panelTitle=undefined;this.panelDescription=undefined;this.menuOpen=false;this.currentActiveSizing="desktop"}componentWillLoad(){const e=this.el.querySelectorAll(":scope > wcs-com-nav-category:not([slot])");d(e,w);this.inheritedAttributes=Object.assign(Object.assign({},a(this.el)),i(this.el,p))}componentDidLoad(){if(!this.resizeObserver){this.resizeObserver=l(this);this.resizeObserver.observe(document.body)}}onWindowClickEvent(e){if(this.menuOpen)this.menuOpen=false}onSubmenuOpened(e){if(e.detail.menuElement!==this.el){this.menuOpen=false}}onEscapeKeyDown(e){if(c(e)&&this.menuOpen){this.menuOpen=false}}async setAriaAttribute(e,t){r(this.nativeButton,e,t)}async close(){this.menuOpen=false}async open(){this.menuOpen=true}onClick(e){e.stopPropagation();this.wcsSubmenuOpened.emit({menuElement:this.el})}handleMenuItemsKeyDown(e){if(m(e)||u(e)){this.handleMenuItemsClick(e)}}handleMenuItemsClick(e){if(e.target.tagName==="A"){this.close()}}wcsCategoryItemClickedHandler(e){this.close()}disconnectedCallback(){var e;(e=this.resizeObserver)===null||e===void 0?void 0:e.disconnect()}render(){return s(o,{key:"935e78a3daf751160c21e7375e86be186bcfdec9",onClick:e=>this.onClick(e),role:"listitem","data-open":this.menuOpen},this.currentActiveSizing==="mobile"?s("h2",{role:"presentation",class:"menu-button"},s("span",{class:"label"},this.label),s("span",{class:"arrow-container"},s("span",{class:"arrow-icon","data-open":this.menuOpen},""))):s("button",Object.assign({onClick:e=>this.menuOpen=!this.menuOpen,"aria-expanded":this.menuOpen?"true":"false","aria-controls":this.menuItemsId,class:"menu-button",ref:e=>this.nativeButton=e},this.inheritedAttributes),s("span",{class:"label"},this.label),s("span",{class:"arrow-container"},s("span",{"aria-hidden":"true",class:"arrow-icon","data-open":this.menuOpen},""))),s("div",{key:"1e654c7f9a74f3e6bb92e9cd3589ea3b7ee9ed99",class:"drawer","data-open":this.menuOpen,tabIndex:-1},s("div",{key:"1c2d8a56d7e91071fcb43f537173850ecf62fb28",class:"drawer-container"},s("div",{key:"4880e09bcf8e06464db2984ac43dbd01ee9a0af3",class:"drawer-content"},s("div",{key:"d2e6e97442a73ff8d24ba4165587fd544b2ff853",class:"drawer-description"},s("h3",{key:"04b20b11befc1dc63e719fda8dda51fe248e93cd"},this.panelTitle),s("p",{key:"69810728510063a77b97845d91f684fe2abfa347"},this.panelDescription)),s("div",{key:"ed35406cc3a5ced0155181239dc96b4afcaa2871",role:"list","aria-label":this.label,id:this.menuItemsId,class:"menu-items",onClick:e=>this.handleMenuItemsClick(e),onKeyDown:e=>this.handleMenuItemsKeyDown(e)},s("slot",{key:"3059b3ccbef8b9483e05e4d400b1643d9ab23273"}))))))}get el(){return this}static get style(){return h}},[1,"wcs-com-nav-submenu",{label:[1],panelTitle:[1,"panel-title"],panelDescription:[1,"panel-description"],menuOpen:[32],currentActiveSizing:[32],setAriaAttribute:[64],close:[64],open:[64]},[[8,"click","onWindowClickEvent"],[8,"wcsSubmenuOpened","onSubmenuOpened"],[8,"keydown","onEscapeKeyDown"],[0,"wcsClickOnFinalAction","wcsCategoryItemClickedHandler"]]]);function v(){if(typeof customElements==="undefined"){return}const e=["wcs-com-nav-submenu"];e.forEach((e=>{switch(e){case"wcs-com-nav-submenu":if(!customElements.get(e)){customElements.define(e,f)}break}}))}const g=f;const k=v;export{g as WcsComNavSubmenu,k as defineCustomElement};
+//# sourceMappingURL=wcs-com-nav-submenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["comNavSubmenuCss","WcsComNavSubmenuStyle0","COM_NAV_SUBMENU_INHERITED_ATTRS","WCS_COM_NAV_CATEGORY","ComNavSubmenu","proxyCustomElement","H","this","inheritedAttributes","menuItemsId","componentWillLoad","slottedCategoryItems","el","querySelectorAll","registerCloseHandlerForFocusOutEventOn","Object","assign","inheritAriaAttributes","inheritAttributes","componentDidLoad","resizeObserver","comNavDidLoadWithResizeObserver","observe","document","body","onWindowClickEvent","_","menuOpen","onSubmenuOpened","event","detail","menuElement","onEscapeKeyDown","_event","isEscapeKey","setAriaAttribute","attr","value","setOrRemoveAttribute","nativeButton","close","open","onClick","evt","stopPropagation","wcsSubmenuOpened","emit","handleMenuItemsKeyDown","isSpaceKey","isEnterKey","handleMenuItemsClick","target","tagName","wcsCategoryItemClickedHandler","disconnectedCallback","_a","disconnect","render","h","Host","key","role","currentActiveSizing","class","label","ref","tabIndex","panelTitle","panelDescription","id","onKeyDown"],"sources":["src/components/com-nav-submenu/com-nav-submenu.scss?tag=wcs-com-nav-submenu&encapsulation=shadow","src/components/com-nav-submenu/com-nav-submenu.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n@import '../com-nav/com-nav-focus.scss';\n@import '../../style/breakpoints.scss';\n\n:host {\n    --wcs-com-nav-submenu-button-color: var(--wcs-semantic-color-text-primary);\n    --wcs-com-nav-submenu-button-font-weight: var(--wcs-semantic-font-weight-medium);\n    --wcs-com-nav-submenu-button-focus-outline-color: var(--wcs-semantic-color-border-focus-base);\n    --wcs-com-nav-submenu-button-gap: var(--wcs-semantic-spacing-base);\n\n    --wcs-com-nav-submenu-desktop-menu-background-color: var(--wcs-semantic-color-background-surface-primary);\n    --wcs-com-nav-submenu-desktop-menu-text-color: var(--wcs-semantic-color-text-primary);\n    --wcs-com-nav-submenu-desktop-menu-link-font-weight: var(--wcs-semantic-font-weight-roman);\n    --wcs-com-nav-submenu-desktop-menu-heading-font-weight: var(--wcs-semantic-font-weight-heavy);\n    --wcs-com-nav-submenu-desktop-menu-description-font-weight: var(--wcs-semantic-font-weight-roman);\n    --wcs-com-nav-submenu-desktop-menu-description-gap: var(--wcs-semantic-spacing-base);\n    --wcs-com-nav-submenu-desktop-menu-padding: 50px;\n\n    --wcs-com-nav-submenu-desktop-menu-items-padding-left: 50px;\n    --wcs-com-nav-submenu-desktop-menu-items-padding-right: 80px;\n\n    --wcs-com-nav-submenu-mobile-text-color: var(--wcs-semantic-color-text-primary);\n    --wcs-com-nav-submenu-mobile-link-font-weight: var(--wcs-semantic-font-weight-roman);\n    --wcs-com-nav-submenu-mobile-spacing-top: var(--wcs-semantic-spacing-large);\n    --wcs-com-nav-submenu-mobile-spacing-bottom: var(--wcs-semantic-spacing-large);\n    --wcs-com-nav-submenu-mobile-spacing-left: calc(var(--wcs-semantic-spacing-base) * 3);\n    --wcs-com-nav-submenu-mobile-gap: calc(var(--wcs-semantic-spacing-base) * 3);\n\n    display: block;\n    padding-bottom: var(--wcs-com-nav-submenu-mobile-spacing-bottom);\n\n    button { // reset button agent styles\n        display: block;\n        background: none;\n        border: none;\n        padding: 0;\n        margin: 0;\n        font: inherit;\n        color: inherit;\n        cursor: pointer;\n    }\n\n    .arrow-icon {\n        display: none;\n    }\n\n    .arrow-container {\n        display: none;\n    }\n\n    .label {\n        text-transform: uppercase;\n        font-size: 16px;\n        cursor: unset;\n        font-weight: var(--wcs-com-nav-submenu-button-font-weight);\n        color: var(--wcs-com-nav-submenu-button-color);\n        text-decoration: none;\n    }\n\n    .drawer {\n        display: contents;\n    }\n\n    .drawer-container {\n        display: contents;\n    }\n    .drawer-description {\n        display: none;\n    }\n\n    .menu-items {\n        display: flex;\n        flex-direction: column;\n        gap: var(--wcs-com-nav-submenu-mobile-gap);\n\n        ::slotted(wcs-com-nav-item) {\n            color: var(--wcs-com-nav-submenu-mobile-text-color);\n            font-weight: var(--wcs-com-nav-submenu-mobile-link-font-weight);\n        }\n    }\n}\n\n@include for-phone-only {\n    :host {\n        .menu-button {\n            margin: 0;\n        }\n\n        .menu-items {\n            margin-top: var(--wcs-com-nav-submenu-mobile-spacing-top);\n            margin-left: var(--wcs-com-nav-submenu-mobile-spacing-left);\n        }\n    }\n}\n\n@include for-tablet-portrait-up {\n    :host {\n        height: 100%;\n        padding-bottom: unset;\n\n        .menu-button {\n            display: flex;\n            align-items: center;\n            height: 100%;\n            cursor: pointer;\n            user-select: none;\n            font-weight: unset;\n            padding-left: unset;\n        }\n\n        .menu-button:focus-visible {\n            @include focus-outline(var(--wcs-com-nav-submenu-button-focus-outline-color), 2px, 0.1rem);\n        }\n\n        @supports not selector(.menu-button:focus-visible) {\n            @include focus-outline(var(--wcs-com-nav-submenu-button-focus-outline-color), 2px, 0.1rem);\n        }\n\n        .label {\n            text-transform: unset;\n            cursor: pointer;\n        }\n\n        .arrow-icon {\n            display: inline-block;\n            font-family: icons;\n            font-size: 0.6rem;\n            line-height: 1;\n            box-sizing: border-box;\n        }\n\n        .arrow-container {\n            display: unset;\n            margin-left: var(--wcs-com-nav-submenu-button-gap);\n        }\n\n        .arrow-icon:not([data-open]) {\n            transform: rotate(90deg);\n        }\n\n        .arrow-icon[data-open] {\n            transform: rotate(-90deg);\n        }\n\n        .drawer {\n            display: none;\n            position: absolute;\n            top: calc(var(--wcs-com-nav-menu-bar-height) + var(--wcs-com-nav-border-width));\n            z-index: 8888;\n            left: 0;\n            width: 100%;\n            box-sizing: border-box;\n            padding: var(--wcs-com-nav-submenu-desktop-menu-padding);\n            background-color: var(--wcs-com-nav-submenu-desktop-menu-background-color);\n            color: var(--wcs-com-nav-submenu-desktop-menu-text-color);\n\n            box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.08); // TODO: wait solution for backdrop (introduce design token later)\n        }\n\n        .drawer-content {\n            display: flex;\n            justify-content: space-between;\n            max-width: 62.5%;\n            flex: 1;\n\n            div:first-child {\n                flex: 0.8;\n            }\n\n            div {\n                max-width: 260px;\n            }\n        }\n\n        .menu-items {\n            padding: 0 var(--wcs-com-nav-submenu-desktop-menu-items-padding-right) 0 var(--wcs-com-nav-submenu-desktop-menu-items-padding-left);\n            display: flex;\n            flex-direction: column;\n            align-items: flex-end;\n\n            ::slotted(wcs-com-nav-item) {\n                color: var(--wcs-com-nav-submenu-desktop-menu-text-color);\n                font-weight: var(--wcs-com-nav-submenu-desktop-menu-link-font-weight);\n            }\n\n            ::slotted(wcs-com-nav-item:focus-within) {\n                @include com-nav-submenu-item-desktop-focus-outline(var(--wcs-com-nav-submenu-desktop-menu-text-color));\n            }\n        }\n\n        .drawer-container {\n            display: flex;\n            max-width: var(--wcs-com-content-max-width);\n            margin: 0 auto;\n\n            h3 {\n                margin: 0 0 var(--wcs-com-nav-submenu-desktop-menu-description-gap) 0;\n                font-size: 1.5rem;\n                line-height: 1.25;\n                font-weight: var(--wcs-com-nav-submenu-desktop-menu-heading-font-weight);\n            }\n\n            p {\n                margin-top: 0;\n                margin-bottom: 1rem;\n                font-weight: var(--wcs-com-nav-submenu-desktop-menu-description-font-weight);\n                font-size: 1rem;\n                line-height: 1.375;\n            }\n        }\n\n        .drawer[data-open] {\n            display: block;\n        }\n        .drawer-description {\n            display: block;\n        }\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    h,\n    Host,\n    Listen,\n    Prop,\n    State,\n    Element,\n    Event,\n    EventEmitter, Method\n} from '@stencil/core';\nimport {MenuOpenedEventDetail} from '../com-nav/com-nav-interface';\nimport { inheritAriaAttributes, inheritAttributes, isEnterKey, isEscapeKey, isSpaceKey, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { comNavDidLoadWithResizeObserver, registerCloseHandlerForFocusOutEventOn } from \"../com-nav/com-nav-utils\";\nimport { ComNavSize } from \"../com-nav/com-nav-size\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst COM_NAV_SUBMENU_INHERITED_ATTRS = ['title'];\n\nconst WCS_COM_NAV_CATEGORY = 'WCS-COM-NAV-CATEGORY';\n\n/**\n * The com-nav-submenu is a subcomponent of `wcs-com-nav`. It represents an expandable menu containing more items or categories.\n * \n * @cssprop --wcs-com-nav-submenu-button-color - Color of the menu label\n * @cssprop --wcs-com-nav-submenu-button-font-weight - Font-weight of the menu label\n * @cssprop --wcs-com-nav-submenu-button-focus-outline-color - Focus outline color of the menu label\n * @cssprop --wcs-com-nav-submenu-button-gap - Gap inside menu label between text and arrow indicator\n * @cssprop --wcs-com-nav-submenu-desktop-menu-background-color - Background color of the menu (desktop)\n * @cssprop --wcs-com-nav-submenu-desktop-menu-text-color - Text color inside menu (desktop)\n * @cssprop --wcs-com-nav-submenu-desktop-menu-link-font-weight - Link font-weight color inside menu (desktop)\n * @cssprop --wcs-com-nav-submenu-desktop-menu-heading-font-weight - Heading font-weight of the menu (desktop)\n * @cssprop --wcs-com-nav-submenu-desktop-menu-description-font-weight - Description font-weight of the menu (desktop)\n * @cssprop --wcs-com-nav-submenu-desktop-menu-description-gap - Gap between heading and description in the description section of the menu (desktop)\n * @cssprop --wcs-com-nav-submenu-desktop-menu-padding - Padding of the menu (desktop)\n * @cssprop --wcs-com-nav-submenu-desktop-menu-items-padding-left - Padding left around link items group in menu (desktop)\n * @cssprop --wcs-com-nav-submenu-desktop-menu-items-padding-right - Padding right around link items group in menu (desktop)\n * @cssprop --wcs-com-nav-submenu-mobile-text-color - Text color for each text (mobile)\n * @cssprop --wcs-com-nav-submenu-mobile-link-font-weight - Link font-weight for each link (mobile)\n * @cssprop --wcs-com-nav-submenu-mobile-spacing-top - Spacing around top of the submenu (mobile)\n * @cssprop --wcs-com-nav-submenu-mobile-spacing-bottom - Spacing around bottom of the submenu (mobile)\n * @cssprop --wcs-com-nav-submenu-mobile-spacing-left - Spacing around left of the submenu (mobile)\n * @cssprop --wcs-com-nav-submenu-mobile-gap - Gap between each item in submenu (mobile)\n */\n@Component({\n    tag: 'wcs-com-nav-submenu',\n    styleUrl: 'com-nav-submenu.scss',\n    shadow: true,\n})\nexport class ComNavSubmenu implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLWcsComNavSubmenuElement;\n    private nativeButton!: HTMLButtonElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    @Prop() label: string;\n    @Prop() panelTitle: string;\n    @Prop() panelDescription: string;\n    @State() private menuOpen: boolean = false;\n    @Event() wcsSubmenuOpened: EventEmitter<MenuOpenedEventDetail>;\n\n    private menuItemsId = `wcs-com-nav-submenu-items`;\n    private resizeObserver: ResizeObserver;\n    /**\n     * To re-trigger re-render in order to render a button in case of desktop or a heading in mobile case\n     * @private\n     */\n    @State() public currentActiveSizing: ComNavSize = 'desktop';\n\n    componentWillLoad(): Promise<void> | void {\n        const slottedCategoryItems = this.el.querySelectorAll(':scope > wcs-com-nav-category:not([slot])');\n        registerCloseHandlerForFocusOutEventOn<HTMLWcsComNavCategoryElement>(slottedCategoryItems, WCS_COM_NAV_CATEGORY);\n\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, COM_NAV_SUBMENU_INHERITED_ATTRS)\n        };\n    }\n\n    componentDidLoad(): void {\n        if(!this.resizeObserver) {\n            this.resizeObserver = comNavDidLoadWithResizeObserver(this);\n            this.resizeObserver.observe(document.body);\n        }\n    }\n\n    /**\n     * If the user clicks outside the menu, we close it\n     */\n    @Listen('click', {target: 'window'})\n    onWindowClickEvent(_: MouseEvent) {\n        if (this.menuOpen) this.menuOpen = false;\n    }\n\n    @Listen('wcsSubmenuOpened', {target: 'window'})\n    onSubmenuOpened(event: CustomEvent<MenuOpenedEventDetail>) {\n        // If the clicked menu is not this component, we close it\n        if (event.detail.menuElement !== this.el) {\n            this.menuOpen = false;\n        }\n    }\n\n    /**\n     * Close the menu when escape is pressed\n     * @param _event keydown event\n     */\n    @Listen('keydown', {target: 'window'})\n    onEscapeKeyDown(_event: KeyboardEvent) {\n        if (isEscapeKey(_event) && this.menuOpen) {\n            this.menuOpen = false;\n        }\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeButton, attr, value);\n    }\n\n    /**\n     * Close the menu\n     */\n    @Method()\n    async close() {\n        this.menuOpen = false;\n    }\n\n    /**\n     * Opens the menu\n     */\n    @Method()\n    async open() {\n        this.menuOpen = true;\n    }\n\n    /**\n     * When the user clicks on the menu, we do not propagate the native event and we launch a custom event to manage\n     * the closing of the menu correctly\n     */\n    private onClick(evt: MouseEvent) {\n        evt.stopPropagation();\n        this.wcsSubmenuOpened.emit({menuElement: this.el})\n    }\n\n    /**\n     * Handle key down on menu items\n     * @param _event the keyboard event\n     * @private\n     */\n    private handleMenuItemsKeyDown(_event: KeyboardEvent) {\n        if ((isSpaceKey(_event)) || isEnterKey(_event)) {\n            this.handleMenuItemsClick(_event);\n        }\n    }\n\n    private handleMenuItemsClick(evt: UIEvent) {\n        if ((evt.target as HTMLElement).tagName === 'A') {\n            this.close();\n        }\n    }\n\n    /**\n     * handle category item click to close the submenu\n     * @param _\n     * @private\n     */\n    @Listen('wcsClickOnFinalAction')\n    // @ts-ignore\n    private wcsCategoryItemClickedHandler(_: CustomEvent<UIEvent>) {\n        // If a category item is clicked, we close the submenu drawer;\n        this.close();\n    }\n\n    disconnectedCallback(): void {\n        this.resizeObserver?.disconnect();\n    }\n\n    render(): any {\n        return (\n            <Host onClick={evt => this.onClick(evt)} role=\"listitem\" data-open={this.menuOpen}>\n                {this.currentActiveSizing === 'mobile' ?\n                    <h2 role=\"presentation\" class=\"menu-button\">\n                        <span class=\"label\">{this.label}</span><span class=\"arrow-container\">\n                        <span class=\"arrow-icon\" data-open={this.menuOpen}>&#xf107;</span></span>\n                    </h2>\n                    : <button onClick={_ => this.menuOpen = !this.menuOpen}\n                              aria-expanded={this.menuOpen ? 'true' : 'false'}\n                              aria-controls={this.menuItemsId}\n                              class=\"menu-button\"\n                              ref={(el) => (this.nativeButton = el)}\n                              {...this.inheritedAttributes}>\n                        <span class=\"label\">{this.label}</span><span class=\"arrow-container\">\n                        <span aria-hidden=\"true\" class=\"arrow-icon\" data-open={this.menuOpen}>&#xf107;</span></span>\n                    </button>\n                }\n                <div class=\"drawer\" data-open={this.menuOpen} tabIndex={-1}>\n                <div class=\"drawer-container\">\n                    <div class=\"drawer-content\">\n                        <div class=\"drawer-description\">\n                            <h3>{this.panelTitle}</h3>\n                            <p>{this.panelDescription}</p>\n                        </div>\n                        <div role=\"list\" aria-label={this.label} id={this.menuItemsId} class=\"menu-items\"\n                             onClick={(evt) => this.handleMenuItemsClick(evt)}\n                                 onKeyDown={evt => this.handleMenuItemsKeyDown(evt)}>\n                                <slot/>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"mappings":"kLAAA,MAAMA,EAAmB,2jKACzB,MAAAC,EAAeD,ECiBf,MAAME,EAAkC,CAAC,SAEzC,MAAMC,EAAuB,uB,MA8BhBC,EAAaC,EAAA,MAAAD,UAAAE,E,qHAGdC,KAAAC,oBAA4C,GAQ5CD,KAAAE,YAAc,4B,6FAHe,M,yBASa,S,CAElD,iBAAAC,GACI,MAAMC,EAAuBJ,KAAKK,GAAGC,iBAAiB,6CACtDC,EAAqEH,EAAsBR,GAE3FI,KAAKC,oBAAmBO,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsBV,KAAKK,KAC3BM,EAAkBX,KAAKK,GAAIV,G,CAItC,gBAAAiB,GACI,IAAIZ,KAAKa,eAAgB,CACrBb,KAAKa,eAAiBC,EAAgCd,MACtDA,KAAKa,eAAeE,QAAQC,SAASC,K,EAQ7C,kBAAAC,CAAmBC,GACf,GAAInB,KAAKoB,SAAUpB,KAAKoB,SAAW,K,CAIvC,eAAAC,CAAgBC,GAEZ,GAAIA,EAAMC,OAAOC,cAAgBxB,KAAKK,GAAI,CACtCL,KAAKoB,SAAW,K,EASxB,eAAAK,CAAgBC,GACZ,GAAIC,EAAYD,IAAW1B,KAAKoB,SAAU,CACtCpB,KAAKoB,SAAW,K,EAKxB,sBAAMQ,CAAiBC,EAAyBC,GAC5CC,EAAqB/B,KAAKgC,aAAcH,EAAMC,E,CAOlD,WAAMG,GACFjC,KAAKoB,SAAW,K,CAOpB,UAAMc,GACFlC,KAAKoB,SAAW,I,CAOZ,OAAAe,CAAQC,GACZA,EAAIC,kBACJrC,KAAKsC,iBAAiBC,KAAK,CAACf,YAAaxB,KAAKK,I,CAQ1C,sBAAAmC,CAAuBd,GAC3B,GAAKe,EAAWf,IAAYgB,EAAWhB,GAAS,CAC5C1B,KAAK2C,qBAAqBjB,E,EAI1B,oBAAAiB,CAAqBP,GACzB,GAAKA,EAAIQ,OAAuBC,UAAY,IAAK,CAC7C7C,KAAKiC,O,EAWL,6BAAAa,CAA8B3B,GAElCnB,KAAKiC,O,CAGT,oBAAAc,G,OACIC,EAAAhD,KAAKa,kBAAc,MAAAmC,SAAA,SAAAA,EAAEC,Y,CAGzB,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAAClB,QAASC,GAAOpC,KAAKmC,QAAQC,GAAMkB,KAAK,WAAU,YAAYtD,KAAKoB,UACpEpB,KAAKuD,sBAAwB,SAC1BJ,EAAA,MAAIG,KAAK,eAAeE,MAAM,eAC1BL,EAAA,QAAMK,MAAM,SAASxD,KAAKyD,OAAaN,EAAA,QAAMK,MAAM,mBACnDL,EAAA,QAAMK,MAAM,aAAY,YAAYxD,KAAKoB,UAAQ,OAEnD+B,EAAA,SAAA3C,OAAAC,OAAA,CAAQ0B,QAAShB,GAAKnB,KAAKoB,UAAYpB,KAAKoB,SAAQ,gBAC7BpB,KAAKoB,SAAW,OAAS,QAAO,gBAChCpB,KAAKE,YACpBsD,MAAM,cACNE,IAAMrD,GAAQL,KAAKgC,aAAe3B,GAC9BL,KAAKC,qBACfkD,EAAA,QAAMK,MAAM,SAASxD,KAAKyD,OAAaN,EAAA,QAAMK,MAAM,mBACnDL,EAAA,sBAAkB,OAAOK,MAAM,aAAY,YAAYxD,KAAKoB,UAAQ,OAG5E+B,EAAA,OAAAE,IAAA,2CAAKG,MAAM,SAAQ,YAAYxD,KAAKoB,SAAUuC,UAAW,GACzDR,EAAA,OAAAE,IAAA,2CAAKG,MAAM,oBACPL,EAAA,OAAAE,IAAA,2CAAKG,MAAM,kBACPL,EAAA,OAAAE,IAAA,2CAAKG,MAAM,sBACPL,EAAA,MAAAE,IAAA,4CAAKrD,KAAK4D,YACVT,EAAA,KAAAE,IAAA,4CAAIrD,KAAK6D,mBAEbV,EAAA,OAAAE,IAAA,2CAAKC,KAAK,OAAM,aAAatD,KAAKyD,MAAOK,GAAI9D,KAAKE,YAAasD,MAAM,aAChErB,QAAUC,GAAQpC,KAAK2C,qBAAqBP,GACxC2B,UAAW3B,GAAOpC,KAAKwC,uBAAuBJ,IAC/Ce,EAAA,QAAAE,IAAA,iD"}

package/bundle/wcs-com-nav.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface WcsComNav extends Components.WcsComNav, HTMLElement {}
+export const WcsComNav: {
+    prototype: WcsComNav;
+    new (): WcsComNav;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/bundle/wcs-com-nav.js

@@ -0,0 +1,2 @@
+import{p as e,H as o,f as n,h as a,c}from"./p-2bef72c7.js";import{r as i,c as t}from"./p-f0dda0b8.js";import{i as s,a as r,b as l}from"./p-2e9b9605.js";const m=':host{--wcs-com-nav-menu-bar-height:calc(var(--wcs-semantic-size-base) * 8);--wcs-com-nav-border-color:var(--wcs-semantic-color-border-secondary);--wcs-com-nav-border-width:var(--wcs-semantic-border-width-default);--wcs-com-nav-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-com-nav-app-name-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-app-name-font-weight:var(--wcs-semantic-font-weight-heavy);--wcs-com-nav-app-name-font-size:var(--wcs-semantic-font-size-heading-5);--wcs-com-nav-app-name-line-height:var(--wcs-semantic-font-line-height-large);--wcs-com-nav-item-color:var(--wcs-semantic-color-foreground-action-neutral-default);--wcs-com-nav-item-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-com-nav-focus-outline-color:var(--wcs-semantic-color-border-focus-base);--wcs-com-nav-vertical-padding:0;--wcs-com-nav-horizontal-padding:var(--wcs-semantic-spacing-large);--wcs-com-nav-mobile-overlay-gap:var(--wcs-semantic-spacing-large);--wcs-com-nav-mobile-overlay-padding:var(--wcs-semantic-spacing-large);--wcs-com-nav-mobile-menu-icon-border-color:var(--wcs-semantic-color-border-secondary);--wcs-com-nav-mobile-menu-icon-gap:calc(var(--wcs-semantic-spacing-base) * 2);--wcs-com-nav-mobile-menu-icon-margin-left:var(--wcs-semantic-spacing-base);--wcs-com-nav-mobile-menu-icon-color:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-com-nav-menu-bar-gap:calc(var(--wcs-semantic-spacing-base) * 5);--wcs-com-nav-menu-bar-margin-left:calc(var(--wcs-semantic-spacing-base) * 6.25);display:block;position:relative;height:var(--wcs-com-nav-menu-bar-height);border-bottom:var(--wcs-com-nav-border-width) solid var(--wcs-com-nav-border-color)}:host .container{padding:var(--wcs-com-nav-vertical-padding) var(--wcs-com-nav-horizontal-padding);height:100%;display:flex;align-items:center;flex-direction:row;justify-content:space-between}:host .container nav{display:flex;align-items:center}:host .container-left{display:flex;height:100%;align-items:center;flex-direction:row}:host .container-right{display:flex;align-items:center}:host .app-name{font-weight:var(--wcs-com-nav-app-name-font-weight);font-size:var(--wcs-com-nav-app-name-font-size);line-height:var(--wcs-com-nav-app-name-line-height);color:var(--wcs-com-nav-app-name-color)}:host .app-name ::slotted(a){user-select:none;cursor:pointer;text-decoration:none;color:inherit;font-weight:inherit}:host .app-name ::slotted(a:focus-visible){outline:none}:host .app-name:focus-within{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-focus-outline-color);outline-offset:var(--wcs-semantic-spacing-small);border-radius:0.1rem}:host .menu-bar{display:none}:host #mobile-menu-icon{display:flex;align-items:center;flex-wrap:nowrap;color:var(--wcs-com-nav-mobile-menu-icon-color);padding-left:var(--wcs-com-nav-mobile-menu-icon-gap);margin-left:var(--wcs-com-nav-mobile-menu-icon-margin-left);border-left:solid 1px var(--wcs-com-nav-mobile-menu-icon-border-color)}:host #mobile-menu-icon:focus{outline:none}:host #mobile-menu-icon:focus-visible::after{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-focus-outline-color);outline-offset:var(--wcs-semantic-spacing-small);border-radius:0.1rem}@supports not selector(#mobile-menu-icon:focus-visible::after){:host #mobile-menu-icon:focus::after{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-focus-outline-color);outline-offset:var(--wcs-semantic-spacing-small);border-radius:0.1rem}}:host button{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}:host #mobile-menu-icon:after{font-family:icons;font-size:18px;cursor:pointer;content:"\\f198";line-height:1;box-sizing:border-box}:host #mobile-menu-icon[aria-expanded=true]:after{content:"\\f129"}:host .mobile-overlay{display:none}:host .mobile-overlay[data-mobile-open]{padding:var(--wcs-com-nav-mobile-overlay-padding);position:absolute;top:var(--wcs-com-nav-menu-bar-height);left:0;right:0;display:flex;flex-direction:column;gap:var(--wcs-com-nav-mobile-overlay-gap);z-index:9999;background-color:var(--wcs-com-nav-background-color)}:host .mobile-overlay[data-mobile-open] ::slotted(wcs-com-nav-item){color:var(--wcs-com-nav-item-color);font-weight:var(--wcs-com-nav-item-font-weight)}@media (min-width: 576px){:host .container{margin:0 auto;max-width:var(--wcs-com-content-max-width)}:host nav{height:100%}:host .menu-bar{display:flex;align-items:center;height:100%;margin-left:var(--wcs-com-nav-menu-bar-margin-left)}:host .menu-bar ::slotted(*:not(:first-child)){margin-left:var(--wcs-com-nav-menu-bar-gap)}:host .menu-bar ::slotted(wcs-com-nav-item){height:100%;color:var(--wcs-com-nav-item-color);font-weight:var(--wcs-com-nav-item-font-weight)}:host .menu-bar ::slotted(wcs-com-nav-item:focus-within){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-focus-outline-color);outline-offset:0.1rem;border-radius:2px}:host #mobile-menu-icon{display:none}:host .mobile-overlay{display:none !important}}';const d=m;const v=["title"];const b="WCS-COM-NAV-SUBMENU";const h=e(class e extends o{constructor(){super();this.__registerHost();this.__attachShadow();this.inheritedAttributes={};this.appName=undefined;this.mobileMenuOpen=false;this.currentActiveSizing=undefined}mobileMenuIconClick(){this.mobileMenuOpen=!this.mobileMenuOpen}disconnectedCallback(){var e;(e=this.resizeObserver)===null||e===void 0?void 0:e.disconnect()}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},s(this.el)),r(this.el,v));const e=this.el.querySelectorAll(":scope > wcs-com-nav-submenu:not([slot]), :scope > a:not([slot])");i(e,b)}componentDidLoad(){if(!this.resizeObserver){this.resizeObserver=t(this);this.resizeObserver.observe(document.body)}}async setAriaAttribute(e,o){this.inheritedAttributes[e]=o;n(this)}closeMobileMenu(){this.mobileMenuOpen=false}onClickOnFinalAction(){this.closeMobileMenu()}render(){const e=this.inheritedAttributes["aria-label"]||undefined;return a(c,{key:"b39ff3dbd6d304ad0252e0fcfd2e0c5716b666db"},a("div",{key:"f84b73c9cee6295a7776576afeb61b65b71ea34e",class:"container"},a("div",{key:"a39b867e9d102abb4e4c13503a544681cd9b7fd8",class:"container-left"},a("div",{key:"49db5dd80f097a9b2ccaf39fc64be9f6100108be",class:"app-name"},this.appName,a("slot",{key:"3cfe05e6e510826ffd2168e6edc3380bc92ad459",name:"app-name"})),this.currentActiveSizing==="desktop"?a("nav",Object.assign({role:"navigation"},this.inheritedAttributes),a("div",{class:"menu-bar",role:"list"},this.currentActiveSizing==="desktop"?a("slot",null):null)):null),a("div",{key:"83496cccd32eec07f5a508dbf36b591442e668e2",class:"container-right"},a("slot",{key:"cf68946afcefa0b77fb57019f9734e5ff1e763aa",name:"actions"}),this.currentActiveSizing==="mobile"?a("nav",Object.assign({id:"wcs-com-nav-mobile-menu",role:"navigation"},this.inheritedAttributes),a("button",{id:"mobile-menu-icon","aria-label":e,"aria-expanded":this.mobileMenuOpen?"true":"false","aria-controls":"wcs-com-nav-mobile-menu",onClick:()=>this.mobileMenuIconClick()}),this.currentActiveSizing==="mobile"?a("div",{class:"mobile-overlay","data-mobile-open":this.mobileMenuOpen,role:"list"},a("slot",null)):null):null)))}exitMobileMenuOnKeyDown(e){if(l(e)){this.closeMobileMenu()}}get el(){return this}static get style(){return d}},[1,"wcs-com-nav",{appName:[1,"app-name"],mobileMenuOpen:[32],currentActiveSizing:[32],setAriaAttribute:[64]},[[0,"wcsClickOnFinalAction","onClickOnFinalAction"],[8,"keydown","exitMobileMenuOnKeyDown"]]]);function u(){if(typeof customElements==="undefined"){return}const e=["wcs-com-nav"];e.forEach((e=>{switch(e){case"wcs-com-nav":if(!customElements.get(e)){customElements.define(e,h)}break}}))}const f=h;const w=u;export{f as WcsComNav,w as defineCustomElement};
+//# sourceMappingURL=wcs-com-nav.js.map

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

@@ -0,0 +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"}

package/bundle/wcs-counter.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface WcsCounter extends Components.WcsCounter, HTMLElement {}
+export const WcsCounter: {
+    prototype: WcsCounter;
+    new (): WcsCounter;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/bundle/wcs-counter.js

@@ -0,0 +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};
+//# sourceMappingURL=wcs-counter.js.map

package/bundle/wcs-counter.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["counterCss","WcsCounterStyle0","COUNTER_INHERITED_ATTRS","Counter","proxyCustomElement","H","this","inheritedAttributes","ANIMATION_DURATION","animateRunning","handleDecrement","disabled","min","undefined","value","step","notifyChange","animate","handleIncrement","max","direction","outliers","Array","from","counterContainer","children","filter","span","classList","contains","add","forEach","hidden","setTimeout","remove","displayedValue","componentWillLoad","handleValueChange","Object","assign","inheritAriaAttributes","el","inheritAttributes","componentDidRender","_b","parseCssTimeValueToMilliseconds","_a","window","getComputedStyle","getPropertyValue","setAriaAttribute","attr","setOrRemoveAttribute","spinButton","valueChange","newVal","oldVal","setMinimumIfValueIsUndefinedOrNull","ensureValueIsNotOutOfMinMax","updateDisplayValueIfNoAnimationRunning","onKeyDown","_event","isKeyup","preventDefault","isKeydown","isHomeKey","isEndKey","wcsChange","emit","render","h","Host","key","class","shape","size","tabindex","onClick","onBlur","event","wcsBlur","icon","ref","input","id","role","label"],"sources":["src/components/counter/counter.scss?tag=wcs-counter&encapsulation=shadow","src/components/counter/counter.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n@keyframes spin-animation-up {\n    0% {\n        transform: translateY(0);\n        transform-origin: center;\n        opacity: 1;\n    }\n    50% {\n        opacity: 0.5;\n    }\n    100% {\n        transform: translateY(30px);\n        transform-origin: center;\n        opacity: 1;\n    }\n}\n\n@keyframes spin-animation-down {\n    0% {\n        transform: translateY(0);\n        transform-origin: center;\n        opacity: 1;\n    }\n    50% {\n        opacity: 0.5;\n    }\n    100% {\n        transform: translateY(-30px);\n        transform-origin: center;\n        opacity: 1;\n    }\n}\n\n:host {\n    --wcs-counter-border-radius: var(--wcs-semantic-border-radius-full);\n\n    --wcs-counter-value-color-default: var(--wcs-semantic-color-text-primary);\n    --wcs-counter-value-color-disabled: var(--wcs-semantic-color-text-tertiary);\n    --wcs-counter-font-weight: var(--wcs-semantic-font-weight-heavy);\n\n    --wcs-counter-height-m: var(--wcs-semantic-size-m);\n    --wcs-counter-height-l: var(--wcs-semantic-size-l);\n    --wcs-counter-font-size-m: var(--wcs-semantic-font-size-m);\n    --wcs-counter-font-size-l: var(--wcs-semantic-font-size-l);\n    --wcs-counter-padding-m: var(--wcs-semantic-spacing-small);\n    --wcs-counter-padding-l: var(--wcs-semantic-spacing-base);\n\n    --wcs-counter-background-color: var(--wcs-semantic-color-background-surface-secondary);\n    --wcs-counter-gap-size-m: calc(1.5 * var(--wcs-semantic-spacing-base));\n    --wcs-counter-gap-size-l: calc(2 * var(--wcs-semantic-spacing-base));\n    --wcs-counter-outline-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n    --wcs-counter-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    // Default\n    --wcs-counter-padding: var(--wcs-counter-padding-m);\n    --wcs-counter-height: var(--wcs-counter-height-m);\n    --wcs-counter-font-size: var(--wcs-counter-font-size-m);\n    --wcs-counter-gap: var(--wcs-counter-gap-size-m);\n\n    display: flex;\n\n\n    .counter {\n        box-sizing: border-box;\n        height: var(--wcs-counter-height);\n        font-family: var(--wcs-font-sans-serif);\n        font-size: var(--wcs-counter-font-size);\n        font-weight: var(--wcs-counter-font-weight);\n        color: var(--wcs-counter-value-color-default);\n        display: flex;\n        align-items: center;\n        padding: var(--wcs-counter-padding);\n        width: fit-content;\n        overflow: hidden;\n        border-radius: var(--wcs-counter-border-radius);\n        background-color: var(--wcs-counter-background-color);\n        background-clip: padding-box;\n        gap: var(--wcs-counter-gap);\n\n        &:focus-within {\n            outline: none;\n        }\n\n        &:has(.current-value:focus-visible) {\n            @include focus-outline($outline-color: var(--wcs-counter-outline-color-focus), $border-radius: var(--wcs-counter-border-radius), $outline-offset: 0);\n        }\n\n        @supports not selector(&:has(.current-value:focus-visible)){\n            &:focus-within {\n                @include focus-outline($outline-color: var(--wcs-counter-outline-color-focus), $border-radius: var(--wcs-counter-border-radius), $outline-offset: 0);\n            }\n        }\n    }\n\n    .counter-container {\n        height: var(--wcs-counter-height);\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        position: relative;\n    }\n\n    .outliers {\n        position: absolute;\n    }\n\n    #outlier-down {\n        top: calc((var(--wcs-counter-height) / 2) * -1);\n    }\n\n    #outlier-up {\n        bottom: calc((var(--wcs-counter-height) / 2) * -1);\n    }\n\n    .current-value {\n        outline: none;\n    }\n\n    .animate-up {\n        animation: spin-animation-up var(--wcs-counter-transition-duration) ease-in-out;\n    }\n\n    .animate-down {\n        animation: spin-animation-down var(--wcs-counter-transition-duration) ease-in-out;\n    }\n\n    [hidden] {\n        opacity: 0;\n    }\n}\n\n:host([size='m']) { // Default\n    --wcs-counter-padding: var(--wcs-counter-padding-m);\n    --wcs-counter-height: var(--wcs-counter-height-m);\n    --wcs-counter-font-size: var(--wcs-counter-font-size-m);\n    --wcs-counter-gap: var(--wcs-counter-gap-size-m);\n}\n\n:host([size='l']) {\n    --wcs-counter-padding: var(--wcs-counter-padding-l);\n    --wcs-counter-height: var(--wcs-counter-height-l);\n    --wcs-counter-font-size: var(--wcs-counter-font-size-l);\n    --wcs-counter-gap: var(--wcs-counter-gap-size-l);\n}\n\n:host([disabled]) {\n    cursor: not-allowed;\n\n    .counter {\n        color: var(--wcs-counter-value-color-disabled);\n    }\n}\n","import {\n    Component,\n    ComponentInterface, Element,\n    Event,\n    EventEmitter,\n    h,\n    Host, Method,\n    Prop,\n    State,\n    Watch\n} from '@stencil/core';\nimport {\n    inheritAriaAttributes,\n    inheritAttributes,\n    isEndKey,\n    isHomeKey,\n    isKeydown,\n    isKeyup,\n    parseCssTimeValueToMilliseconds,\n    setOrRemoveAttribute\n} from '../../utils/helpers';\nimport { CounterChangeEventDetail, WcsCounterSize } from './counter-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst COUNTER_INHERITED_ATTRS = ['tabindex', 'title'];\n\n\n/**\n * Counter component, meant to be used for small range of values (e.g : 0 - 5).<br>\n * For larger or specific ranges, please use [wcs-input (type number)](.?path=/docs/components-input--documentation)\n * \n * @cssprop --wcs-counter-border-radius - Border radius of the counter\n * \n * @cssprop --wcs-counter-value-color-default - Default color of the value \n * @cssprop --wcs-counter-value-color-disabled - Color of the text when the counter is disabled\n * @cssprop --wcs-counter-font-weight - Font weight of the value\n * \n * @cssprop --wcs-counter-height-m - Height medium of the counter\n * @cssprop --wcs-counter-height-l - Height large of the counter\n * @cssprop --wcs-counter-font-size-m - Font size medium of the counter\n * @cssprop --wcs-counter-font-size-l - Font size large of the counter\n * @cssprop --wcs-counter-padding-m - Padding medium of the counter\n * @cssprop --wcs-counter-padding-l - Padding large of the counter\n * \n * @cssprop --wcs-counter-background-color - Background color of the counter\n * @cssprop --wcs-counter-gap - Gap between the buttons and the label\n * @cssprop --wcs-counter-gap-size-m - Gap between the buttons and the label when the size is M\n * @cssprop --wcs-counter-gap-size-l - Gap between the buttons and the label when the size is L\n * @cssprop --wcs-counter-outline-color-focus - Color of the focus outline\n *\n * @cssprop --wcs-counter-transition-duration - Duration of the animation\n * \n */\n@Component({\n    tag: 'wcs-counter',\n    styleUrl: 'counter.scss',\n    shadow: {\n        delegatesFocus: true\n    },\n})\nexport class Counter implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private spinButton!: HTMLSpanElement;\n    private counterContainer!: HTMLDivElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /**\n     * Default animation duration, in milliseconds\n     * @private\n     */\n    private ANIMATION_DURATION = 150;\n\n    /**\n     * Specify the size (height) of the counter.\n     */\n    @Prop({reflect: true}) size: WcsCounterSize = 'm';\n\n    /**\n     * The label of the counter.<br/>\n     * e.g. Number of passengers, train carriages, railroad tracks...\n     */\n    @Prop({mutable: false}) label!: string;\n\n    /**\n     * Specify whether the counter is disabled or not.\n     */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /**\n     * The minimum value of the counter.\n     * If the value of the min attribute isn't set, then the element has no minimum value.\n     */\n    @Prop({mutable: true}) min?: number;\n\n    /**\n     * The maximum value of the counter.\n     * If the value of the max attribute isn't set, then the element has no maximum value.\n     */\n    @Prop({mutable: true}) max?: number;\n\n    /**\n     * Defines by how much the counter will be incremented or decremented.\n     */\n    @Prop({mutable: true}) step: number = 1;\n\n    /**\n     * Emitted when the value of the counter has changed.\n     */\n    @Event() wcsChange!: EventEmitter<CounterChangeEventDetail>;\n\n    /**\n     * The current value of the counter.\n     */\n    @Prop({mutable: true}) value!: number;\n\n    /**\n     * Only for animation and display purpose\n     */\n    @State() private displayedValue: number;\n\n    private animateRunning: boolean = false;\n\n    /**\n     * Emitted when the counter loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    componentWillLoad() {\n        this.handleValueChange();\n\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, COUNTER_INHERITED_ATTRS),\n        };\n    }\n    \n    componentDidRender() {\n        this.ANIMATION_DURATION = parseCssTimeValueToMilliseconds(window.getComputedStyle(this.el).getPropertyValue('--wcs-counter-transition-duration') ?? '150ms') ?? 150;\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.spinButton, attr, value);\n    }\n    \n    /**\n     * Current value change => handle event and interval\n     */\n    @Watch('value')\n    valueChange(newVal: any, oldVal: any) {\n        if(oldVal === newVal) return;\n\n        this.handleValueChange();\n    }\n\n    private handleValueChange() {\n        this.setMinimumIfValueIsUndefinedOrNull();\n        this.ensureValueIsNotOutOfMinMax();\n        this.updateDisplayValueIfNoAnimationRunning();\n    }\n\n    private updateDisplayValueIfNoAnimationRunning() {\n        if (!this.animateRunning) {\n            this.displayedValue = this.value;\n        }\n    }\n\n    private ensureValueIsNotOutOfMinMax() {\n        if (this.max !== undefined && this.value > this.max) {\n            this.value = this.max;\n        } else if (this.min !== undefined && this.value < this.min) {\n            this.value = this.min;\n        }\n    }\n\n    private setMinimumIfValueIsUndefinedOrNull() {\n        if (this.value === undefined || this.value === null) {\n            this.value = this.min ?? 0;\n        }\n    }\n\n    onKeyDown(_event: KeyboardEvent) {\n        if (this.disabled) return; \n        \n        if (isKeyup(_event)) {\n            _event.preventDefault();\n            this.handleIncrement()\n        }\n        if (isKeydown(_event)) {\n            _event.preventDefault();\n            this.handleDecrement()\n        }\n        if (isHomeKey(_event)) {\n            _event.preventDefault();\n            if (this.min != null) {\n                this.value = this.min;\n                this.displayedValue = this.value;\n                this.notifyChange();\n            }\n        }\n        if (isEndKey(_event)) {\n            _event.preventDefault();\n            if (this.max != null) {\n                this.value = this.max;\n                this.displayedValue = this.value;\n                this.notifyChange();\n            }\n        }\n    }\n\n    private notifyChange() {\n        this.wcsChange.emit({\n            value: this.value\n        });\n    }\n    \n    private handleDecrement = () => {\n        if (this.disabled) return;\n        if (this.min === undefined || this.value > this.min) {\n            // we set animateRunning here to prevent the watch method on value prop from affecting the displayed value\n            // before the animation runs.\n            this.animateRunning = true; \n            this.value -= this.step;\n            this.notifyChange();\n            this.animate('up');\n        }\n    };\n\n    private handleIncrement = () => {\n        if (this.disabled) return;\n        if (this.max === undefined || this.value < this.max) {\n            // we set animateRunning here to prevent the watch method on value prop from affecting the displayed value\n            // before the animation runs.\n            this.animateRunning = true; \n            this.value += this.step;\n            this.notifyChange();\n            this.animate('down');\n        }\n    };\n\n    private animate = (direction: 'up' | 'down'): void => {\n        // In case someone call animate function, we want ensured that animateRunning is set to true to prevent other \n        // method to mutate the displayedValue.\n        this.animateRunning = true;  \n\n        const outliers = Array.from(this.counterContainer.children)\n            .filter((span: HTMLSpanElement) => span.classList.contains('outliers'));\n\n        this.counterContainer.classList.add('animate-' + direction);\n        outliers.forEach((span: HTMLSpanElement) => {\n            span.hidden = false;\n        });\n        setTimeout(() => {\n            this.counterContainer.classList.remove('animate-' + direction);\n            outliers.forEach((span: HTMLSpanElement) => {\n                span.hidden = true;\n            });\n            this.displayedValue = this.value;\n\n            this.animateRunning = false;\n        }, this.ANIMATION_DURATION - 20);\n    }\n\n    render() {\n        return (\n            <Host>\n                <div class=\"counter\">\n                    <wcs-button class=\"wcs-primary\"\n                                shape=\"round\"\n                                size=\"s\"\n                                tabindex={-1}\n                                onClick={() => this.handleDecrement()}\n                                onBlur={(event) => this.wcsBlur.emit(event)}\n                                disabled={this.disabled || this.value === this.min}>\n                        <wcs-mat-icon icon=\"remove\" size=\"s\"></wcs-mat-icon>  \n                    </wcs-button>\n                    <div class=\"counter-container\" ref={input => this.counterContainer = input}>\n                        <span id=\"outlier-down\"\n                              class=\"outliers\"\n                              hidden\n                              aria-hidden=\"true\">{this.displayedValue - this.step}</span>\n                        <span tabindex={this.disabled ? -1 : 0}\n                              role=\"spinbutton\"\n                              ref={(el) => this.spinButton = el}\n                              class=\"current-value\"\n                              onBlur={(event) => this.wcsBlur.emit(event)}\n                              onKeyDown={(event) => this.onKeyDown(event)}\n                              aria-disabled={this.disabled ? 'true' : null}\n                              aria-valuenow={this.value}\n                              aria-valuetext={this.value}\n                              aria-valuemin={this.min}\n                              aria-valuemax={this.max}\n                              aria-label={this.label}\n                              {...this.inheritedAttributes}>{this.displayedValue}</span>\n                        <span id=\"outlier-up\"\n                              class=\"outliers\"\n                              hidden\n                              aria-hidden=\"true\">{this.displayedValue + this.step}</span>\n                    </div>\n                    <wcs-button class=\"wcs-primary\"\n                                shape=\"round\"\n                                size=\"s\"\n                                tabindex={-1}\n                                onClick={() => this.handleIncrement()}\n                                onBlur={(event) => this.wcsBlur.emit(event)}\n                                disabled={this.disabled || this.value === this.max}>\n                        <wcs-mat-icon icon=\"add\" size=\"s\"></wcs-mat-icon>\n                    </wcs-button>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"mappings":"iQAAA,MAAMA,EAAa,8lHACnB,MAAAC,EAAeD,ECuBf,MAAME,EAA0B,CAAC,WAAY,S,MAoChCC,EAAOC,EAAA,MAAAD,UAAAE,E,wIAIRC,KAAAC,oBAA4C,GAM5CD,KAAAE,mBAAqB,IAkDrBF,KAAAG,eAA0B,MAgG1BH,KAAAI,gBAAkB,KACtB,GAAIJ,KAAKK,SAAU,OACnB,GAAIL,KAAKM,MAAQC,WAAaP,KAAKQ,MAAQR,KAAKM,IAAK,CAGjDN,KAAKG,eAAiB,KACtBH,KAAKQ,OAASR,KAAKS,KACnBT,KAAKU,eACLV,KAAKW,QAAQ,K,GAIbX,KAAAY,gBAAkB,KACtB,GAAIZ,KAAKK,SAAU,OACnB,GAAIL,KAAKa,MAAQN,WAAaP,KAAKQ,MAAQR,KAAKa,IAAK,CAGjDb,KAAKG,eAAiB,KACtBH,KAAKQ,OAASR,KAAKS,KACnBT,KAAKU,eACLV,KAAKW,QAAQ,O,GAIbX,KAAAW,QAAWG,IAGfd,KAAKG,eAAiB,KAEtB,MAAMY,EAAWC,MAAMC,KAAKjB,KAAKkB,iBAAiBC,UAC7CC,QAAQC,GAA0BA,EAAKC,UAAUC,SAAS,cAE/DvB,KAAKkB,iBAAiBI,UAAUE,IAAI,WAAaV,GACjDC,EAASU,SAASJ,IACdA,EAAKK,OAAS,KAAK,IAEvBC,YAAW,KACP3B,KAAKkB,iBAAiBI,UAAUM,OAAO,WAAad,GACpDC,EAASU,SAASJ,IACdA,EAAKK,OAAS,IAAI,IAEtB1B,KAAK6B,eAAiB7B,KAAKQ,MAE3BR,KAAKG,eAAiB,KAAK,GAC5BH,KAAKE,mBAAqB,GAAG,E,UAzLU,I,mCAWD,M,gDAiBP,E,mDAwBtC,iBAAA4B,GACI9B,KAAK+B,oBAEL/B,KAAKC,oBAAmB+B,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsBlC,KAAKmC,KAC3BC,EAAkBpC,KAAKmC,GAAIvC,G,CAItC,kBAAAyC,G,QACIrC,KAAKE,oBAAqBoC,EAAAC,GAAgCC,EAAAC,OAAOC,iBAAiB1C,KAAKmC,IAAIQ,iBAAiB,wCAAoC,MAAAH,SAAA,EAAAA,EAAI,YAAQ,MAAAF,SAAA,EAAAA,EAAI,G,CAIpK,sBAAMM,CAAiBC,EAAyBrC,GAC5CsC,EAAqB9C,KAAK+C,WAAYF,EAAMrC,E,CAOhD,WAAAwC,CAAYC,EAAaC,GACrB,GAAGA,IAAWD,EAAQ,OAEtBjD,KAAK+B,mB,CAGD,iBAAAA,GACJ/B,KAAKmD,qCACLnD,KAAKoD,8BACLpD,KAAKqD,wC,CAGD,sCAAAA,GACJ,IAAKrD,KAAKG,eAAgB,CACtBH,KAAK6B,eAAiB7B,KAAKQ,K,EAI3B,2BAAA4C,GACJ,GAAIpD,KAAKa,MAAQN,WAAaP,KAAKQ,MAAQR,KAAKa,IAAK,CACjDb,KAAKQ,MAAQR,KAAKa,G,MACf,GAAIb,KAAKM,MAAQC,WAAaP,KAAKQ,MAAQR,KAAKM,IAAK,CACxDN,KAAKQ,MAAQR,KAAKM,G,EAIlB,kCAAA6C,G,MACJ,GAAInD,KAAKQ,QAAUD,WAAaP,KAAKQ,QAAU,KAAM,CACjDR,KAAKQ,OAAQgC,EAAAxC,KAAKM,OAAG,MAAAkC,SAAA,EAAAA,EAAI,C,EAIjC,SAAAc,CAAUC,GACN,GAAIvD,KAAKK,SAAU,OAEnB,GAAImD,EAAQD,GAAS,CACjBA,EAAOE,iBACPzD,KAAKY,iB,CAET,GAAI8C,EAAUH,GAAS,CACnBA,EAAOE,iBACPzD,KAAKI,iB,CAET,GAAIuD,EAAUJ,GAAS,CACnBA,EAAOE,iBACP,GAAIzD,KAAKM,KAAO,KAAM,CAClBN,KAAKQ,MAAQR,KAAKM,IAClBN,KAAK6B,eAAiB7B,KAAKQ,MAC3BR,KAAKU,c,EAGb,GAAIkD,EAASL,GAAS,CAClBA,EAAOE,iBACP,GAAIzD,KAAKa,KAAO,KAAM,CAClBb,KAAKQ,MAAQR,KAAKa,IAClBb,KAAK6B,eAAiB7B,KAAKQ,MAC3BR,KAAKU,c,GAKT,YAAAA,GACJV,KAAK6D,UAAUC,KAAK,CAChBtD,MAAOR,KAAKQ,O,CAmDpB,MAAAuD,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,4CACDF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,WACPH,EAAA,cAAAE,IAAA,2CAAYC,MAAM,cACNC,MAAM,QACNC,KAAK,IACLC,UAAW,EACXC,QAAS,IAAMvE,KAAKI,kBACpBoE,OAASC,GAAUzE,KAAK0E,QAAQZ,KAAKW,GACrCpE,SAAUL,KAAKK,UAAYL,KAAKQ,QAAUR,KAAKM,KACvD0D,EAAA,gBAAAE,IAAA,2CAAcS,KAAK,SAASN,KAAK,OAErCL,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oBAAoBS,IAAKC,GAAS7E,KAAKkB,iBAAmB2D,GACjEb,EAAA,QAAAE,IAAA,2CAAMY,GAAG,eACHX,MAAM,WACNzC,OAAM,mBACM,QAAQ1B,KAAK6B,eAAiB7B,KAAKS,MACrDuD,EAAA,OAAAhC,OAAAC,OAAA,CAAAiC,IAAA,2CAAMI,SAAUtE,KAAKK,UAAY,EAAI,EAC/B0E,KAAK,aACLH,IAAMzC,GAAOnC,KAAK+C,WAAaZ,EAC/BgC,MAAM,gBACNK,OAASC,GAAUzE,KAAK0E,QAAQZ,KAAKW,GACrCnB,UAAYmB,GAAUzE,KAAKsD,UAAUmB,GAAM,gBAC5BzE,KAAKK,SAAW,OAAS,KAAI,gBAC7BL,KAAKQ,MAAK,iBACTR,KAAKQ,MAAK,gBACXR,KAAKM,IAAG,gBACRN,KAAKa,IAAG,aACXb,KAAKgF,OACbhF,KAAKC,qBAAsBD,KAAK6B,gBAC1CmC,EAAA,QAAAE,IAAA,2CAAMY,GAAG,aACHX,MAAM,WACNzC,OAAM,mBACM,QAAQ1B,KAAK6B,eAAiB7B,KAAKS,OAEzDuD,EAAA,cAAAE,IAAA,2CAAYC,MAAM,cACNC,MAAM,QACNC,KAAK,IACLC,UAAW,EACXC,QAAS,IAAMvE,KAAKY,kBACpB4D,OAASC,GAAUzE,KAAK0E,QAAQZ,KAAKW,GACrCpE,SAAUL,KAAKK,UAAYL,KAAKQ,QAAUR,KAAKa,KACvDmD,EAAA,gBAAAE,IAAA,2CAAcS,KAAK,MAAMN,KAAK,Q"}

package/bundle/wcs-divider.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface WcsDivider extends Components.WcsDivider, HTMLElement {}
+export const WcsDivider: {
+    prototype: WcsDivider;
+    new (): WcsDivider;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/bundle/wcs-divider.js

@@ -0,0 +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};
+//# sourceMappingURL=wcs-divider.js.map

package/bundle/wcs-divider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["dividerCss","WcsDividerStyle0","Divider","proxyCustomElement","H","render","h","Host","key"],"sources":["src/components/divider/divider.scss?tag=wcs-divider&encapsulation=shadow","src/components/divider/divider.tsx"],"sourcesContent":[":host {\n    --wcs-divider-color: var(--wcs-semantic-color-border-secondary);\n    --wcs-divider-height: var(--wcs-semantic-border-width-default);\n\n    display: block;\n    border-bottom: solid var(--wcs-divider-height) var(--wcs-divider-color);\n}\n","import { Component, ComponentInterface, h, Host } from '@stencil/core';\n\n/**\n * The divider is a separator between two elements, consisting of a horizontal line.\n * \n * @cssprop --wcs-divider-color - Color of the divider\n * @cssprop --wcs-divider-height - Height (border-width) of the divider\n */\n@Component({\n    tag: 'wcs-divider',\n    styleUrl: 'divider.scss',\n    shadow: true\n})\nexport class Divider implements ComponentInterface {\n    render() {\n        return (\n            <Host></Host>\n        );\n    }\n}\n"],"mappings":"oDAAA,MAAMA,EAAa,2NACnB,MAAAC,EAAeD,E,MCYFE,EAAOC,EAAA,MAAAD,UAAAE,E,kEAChB,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,4C"}

package/bundle/wcs-dropdown-divider.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface WcsDropdownDivider extends Components.WcsDropdownDivider, HTMLElement {}
+export const WcsDropdownDivider: {
+    prototype: WcsDropdownDivider;
+    new (): WcsDropdownDivider;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/bundle/wcs-dropdown-divider.js

@@ -0,0 +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};
+//# sourceMappingURL=wcs-dropdown-divider.js.map

package/bundle/wcs-dropdown-divider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["dropdownDividerCss","WcsDropdownDividerStyle0","DropdownDivider","proxyCustomElement","H","render","h","Host","key","slot","tabindex"],"sources":["src/components/dropdown-divider/dropdown-divider.scss?tag=wcs-dropdown-divider&encapsulation=shadow","src/components/dropdown-divider/dropdown-divider.tsx"],"sourcesContent":[":host {\n    --wcs-dropdown-divider-margin: var(--wcs-semantic-spacing-base) 0;\n    --wcs-dropdown-divider-color: var(--wcs-semantic-color-border-secondary);\n\n    display: block;\n    margin: var(--wcs-dropdown-divider-margin);\n    overflow: hidden;\n    border-top: 1px solid var(--wcs-dropdown-divider-color);\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * You can add a divider between groups of items\n * \n * @cssprop --wcs-dropdown-divider-margin - Margin of the divider\n * @cssprop --wcs-dropdown-divider-color - Color of the divider\n * \n */\n@Component({\n    tag: 'wcs-dropdown-divider',\n    styleUrl: 'dropdown-divider.scss',\n    shadow: true\n})\nexport class DropdownDivider {\n    render() {\n        return (\n            <Host slot=\"item\" tabindex=\"-1\" aria-hidden=\"true\"></Host>\n        );\n    }\n}\n"],"mappings":"yDAAA,MAAMA,EAAqB,iRAC3B,MAAAC,EAAeD,E,MCaFE,EAAeC,EAAA,MAAAD,UAAAE,E,kEACxB,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,OAAOC,SAAS,KAAI,cAAa,Q"}

package/bundle/wcs-dropdown-header.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface WcsDropdownHeader extends Components.WcsDropdownHeader, HTMLElement {}
+export const WcsDropdownHeader: {
+    prototype: WcsDropdownHeader;
+    new (): WcsDropdownHeader;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/bundle/wcs-dropdown-header.js

@@ -0,0 +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};
+//# sourceMappingURL=wcs-dropdown-header.js.map

package/bundle/wcs-dropdown-header.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["dropdownHeaderCss","WcsDropdownHeaderStyle0","DropdownHeader","proxyCustomElement","H","render","h","Host","key","slot","tabindex"],"sources":["src/components/dropdown-header/dropdown-header.scss?tag=wcs-dropdown-header&encapsulation=shadow","src/components/dropdown-header/dropdown-header.tsx"],"sourcesContent":[":host {\n    --wcs-dropdown-header-color: var(--wcs-semantic-color-text-tertiary);\n    --wcs-dropdown-header-padding-vertical: var(--wcs-semantic-spacing-base);\n    --wcs-dropdown-header-padding-horizontal: var(--wcs-semantic-spacing-base);\n    --wcs-dropdown-header-font-size: var(--wcs-semantic-font-size-label-2);\n    --wcs-dropdown-header-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    display: block;\n    padding: var(--wcs-dropdown-header-padding-vertical) var(--wcs-dropdown-header-padding-horizontal);\n    font-size: var(--wcs-dropdown-header-font-size);\n    font-weight: var(--wcs-dropdown-header-font-weight);\n    text-transform: uppercase;\n    color: var(--wcs-dropdown-header-color);\n    white-space: nowrap;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n\n/**\n * You can add `wcs-dropdown-header` before a group of items to describe it\n * @slot <no-name> the slot that contains the header's name\n * \n * @cssprop --wcs-dropdown-header-color - Text color of the header\n * @cssprop --wcs-dropdown-header-padding-vertical - Vertical padding of the header\n * @cssprop --wcs-dropdown-header-padding-horizontal - Horizontal padding of the header\n * @cssprop --wcs-dropdown-header-font-size - Font size of the header\n * @cssprop --wcs-dropdown-header-font-weight - Font weight of the header\n *\n */\n@Component({\n    tag: 'wcs-dropdown-header',\n    styleUrl: 'dropdown-header.scss',\n    shadow: true\n})\nexport class DropdownHeader {\n\n    render() {\n        return (\n            <Host slot=\"item\" tabindex=\"-1\">\n                <slot/>\n            </Host>\n        );\n    }\n}\n"],"mappings":"yDAAA,MAAMA,EAAoB,mpBAC1B,MAAAC,EAAeD,E,MCkBFE,EAAcC,EAAA,MAAAD,UAAAE,E,kEAEvB,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,OAAOC,SAAS,MACvBJ,EAAA,QAAAE,IAAA,6C"}

package/bundle/wcs-dropdown-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface WcsDropdownItem extends Components.WcsDropdownItem, HTMLElement {}
+export const WcsDropdownItem: {
+    prototype: WcsDropdownItem;
+    new (): WcsDropdownItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/bundle/wcs-dropdown-item.js

@@ -0,0 +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};
+//# sourceMappingURL=wcs-dropdown-item.js.map

package/bundle/wcs-dropdown-item.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["dropdownItemCss","WcsDropdownItemStyle0","DropdownItem","proxyCustomElement","H","onMouseUp","_","this","wcsDropdownItemClick","emit","onKeyDown","evt","isSpaceKey","isEnterKey","preventDefault","stopImmediatePropagation","render","h","Host","key","slot","role","tabindex"],"sources":["src/components/dropdown-item/dropdown-item.scss?tag=wcs-dropdown-item","src/components/dropdown-item/dropdown-item.tsx"],"sourcesContent":["wcs-dropdown-item {\n    --wcs-dropdown-item-height: var(--wcs-semantic-size-m);\n    --wcs-dropdown-item-padding-horizontal: var(--wcs-semantic-spacing-base);\n    --wcs-dropdown-item-padding-vertical: 0;\n\n    --wcs-dropdown-item-text-font-weight: var(--wcs-semantic-font-weight-roman);\n\n    --wcs-dropdown-item-text-color-default: var(--wcs-semantic-color-foreground-action-neutral-default);\n    --wcs-dropdown-item-text-color-hover: var(--wcs-semantic-color-foreground-action-neutral-hover);\n    --wcs-dropdown-item-text-color-press: var(--wcs-semantic-color-foreground-action-neutral-press);\n\n    --wcs-dropdown-item-background-color-default: var(--wcs-semantic-color-background-action-neutral-default);\n    --wcs-dropdown-item-background-color-hover: var(--wcs-semantic-color-background-action-neutral-hover);\n    --wcs-dropdown-item-background-color-press: var(--wcs-semantic-color-background-action-neutral-press);\n\n    --wcs-dropdown-item-border-width-focus: var(--wcs-semantic-border-width-large);\n    --wcs-dropdown-item-border-color-focus: var(--wcs-semantic-color-border-focus-base);\n    --wcs-dropdown-item-border-radius: var(--wcs-semantic-border-radius-base);\n\n    --wcs-dropdown-item-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    padding: 0 var(--wcs-dropdown-item-padding-horizontal);\n    font-weight: var(--wcs-dropdown-item-text-font-weight);\n    cursor: pointer;\n    color: var(--wcs-dropdown-item-text-color-default);\n    height: var(--wcs-dropdown-item-height);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    border-radius: var(--wcs-dropdown-item-border-radius);\n    transition: background-color var(--wcs-dropdown-item-transition-duration) ease-in-out;\n}\n\nwcs-dropdown-item:hover {\n    color: var(--wcs-dropdown-item-text-color-hover);\n    background-color: var(--wcs-dropdown-item-background-color-hover);\n}\n\n/* Press state */\nwcs-dropdown-item:active {\n    color: var(--wcs-dropdown-item-text-color-press);\n    background-color: var(--wcs-dropdown-item-background-color-press);\n}\n\nwcs-dropdown-item:focus-visible {\n    outline: dashed var(--wcs-dropdown-item-border-width-focus) var(--wcs-dropdown-item-border-color-focus);\n    outline-offset: calc(-1 * var(--wcs-dropdown-item-border-width-focus));\n}\n\n@supports not selector(wcs-dropdown-item:focus-visible) {\n    wcs-dropdown-item:focus-within {\n        outline: dashed var(--wcs-dropdown-item-border-width-focus) var(--wcs-dropdown-item-border-color-focus);\n        outline-offset: calc(-1 * var(--wcs-dropdown-item-border-width-focus));\n    }\n}\n","import { Component, ComponentInterface, EventEmitter, h, Event, Listen, Host } from '@stencil/core';\nimport { isEnterKey, isSpaceKey } from \"../../utils/helpers\";\n\n/**\n * You must add `wcs-dropdown-item` to `wcs-dropdown`\n * @slot <no-name> the slot that contains the item's name\n * \n * @cssprop --wcs-dropdown-item-height - Height of the dropdown item\n * @cssprop --wcs-dropdown-item-padding-horizontal - Padding horizontal\n * @cssprop --wcs-dropdown-item-padding-vertical - Padding vertical\n * @cssprop --wcs-dropdown-item-text-font-weight - Font weight of the dropdown item\n * @cssprop --wcs-dropdown-item-text-color-default - Default text color of the dropdown item \n * @cssprop --wcs-dropdown-item-text-color-hover - Text color of the dropdown item when hovered\n * @cssprop --wcs-dropdown-item-text-color-press - Text color of the dropdown item when pressed\n * @cssprop --wcs-dropdown-item-background-color-default - Default background color of the dropdown item\n * @cssprop --wcs-dropdown-item-background-color-hover - Background color of the dropdown item when hovered\n * @cssprop --wcs-dropdown-item-background-color-press - Background color of the dropdown item when pressed\n * @cssprop --wcs-dropdown-item-border-width-focus - Border width of the dropdown item when focused\n * @cssprop --wcs-dropdown-item-border-color-focus - Border color of the dropdown item when focused\n * @cssprop --wcs-dropdown-item-border-radius - Border radius of the dropdown item\n * @cssprop --wcs-dropdown-item-transition-duration - Transition duration of the dropdown item\n */\n@Component({\n    tag: 'wcs-dropdown-item',\n    styleUrl: 'dropdown-item.scss'\n})\nexport class DropdownItem implements ComponentInterface {\n    /**\n     * Event emitted when the dropdown item is clicked\n     */\n    @Event({\n        eventName: 'wcsDropdownItemClick',\n    })\n    wcsDropdownItemClick: EventEmitter<void>;\n    \n    @Listen('mouseup')\n    onMouseUp(_: MouseEvent): void {\n        this.wcsDropdownItemClick.emit();\n    }\n\n    @Listen('keydown')\n    onKeyDown(evt: KeyboardEvent): void {\n        if (isSpaceKey(evt) || isEnterKey(evt)) {\n            evt.preventDefault();\n            evt.stopImmediatePropagation();\n            this.wcsDropdownItemClick.emit();\n        }\n    }\n\n    render() {\n        return (\n            <Host slot=\"item\" role=\"menuitem\" tabindex=\"-1\">\n                <slot/>\n            </Host>\n        );\n    }\n}\n"],"mappings":"sGAAA,MAAMA,EAAkB,mxEACxB,MAAAC,EAAeD,E,MCyBFE,EAAYC,EAAA,MAAAD,UAAAE,E,uGAUrB,SAAAC,CAAUC,GACNC,KAAKC,qBAAqBC,M,CAI9B,SAAAC,CAAUC,GACN,GAAIC,EAAWD,IAAQE,EAAWF,GAAM,CACpCA,EAAIG,iBACJH,EAAII,2BACJR,KAAKC,qBAAqBC,M,EAIlC,MAAAO,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,OAAOC,KAAK,WAAWC,SAAS,MACvCL,EAAA,QAAAE,IAAA,6C"}

package/bundle/wcs-dropdown.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface WcsDropdown extends Components.WcsDropdown, HTMLElement {}
+export const WcsDropdown: {
+    prototype: WcsDropdown;
+    new (): WcsDropdown;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/bundle/wcs-dropdown.js

@@ -0,0 +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};
+//# sourceMappingURL=wcs-dropdown.js.map