wcs-core 7.5.1 → 7.7.0

package/composite-elements/wcs-card-content.js.map

@@ -1 +1 @@
-{"version":3,"names":["cardContentCss","WcsCardContentStyle0","CardContent","proxyCustomElement","H","render","h","Host","key"],"sources":["src/components/card-content/card-content.scss?tag=wcs-card-content&encapsulation=shadow","src/components/card-content/card-content.tsx"],"sourcesContent":[":host {\n    --wcs-card-content-color: var(--wcs-semantic-color-text-tertiary);\n    --wcs-card-content-font-size: var(--wcs-semantic-font-size-body-3);\n\n    display: block;\n    overflow: hidden;\n}\n\n::slotted(*) {\n    color: var(--wcs-card-content-color);\n    font-size: var(--wcs-card-content-font-size);\n    margin: 0;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n/**\n * A content for a card inside card-body. Commonly used to provide more details about the card content. \n * The information provided should be concise and easy to read.\n * \n * By default, the margin is removed from the top and bottom of the card description.\n * \n * @slot - The content of the card description.\n * \n * @cssprop --wcs-card-content-color - The color of the card description.\n * @cssprop --wcs-card-content-font-size - The font size of the card description.\n */\n@Component({\n  tag: 'wcs-card-content',\n  styleUrl: 'card-content.scss',\n  shadow: true,\n})\nexport class CardContent {\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n\n}\n"],"mappings":"yDAAA,MAAMA,EAAiB,gRACvB,MAAAC,EAAeD,E,MCiBFE,EAAWC,EAAA,MAAAD,UAAAE,E,kEAEtB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,QAAAE,IAAA,6C"}
+{"version":3,"names":["cardContentCss","WcsCardContentStyle0","CardContent","proxyCustomElement","H","render","h","Host","key"],"sources":["src/components/card-content/card-content.scss?tag=wcs-card-content&encapsulation=shadow","src/components/card-content/card-content.tsx"],"sourcesContent":[":host {\n    --wcs-card-content-color: var(--wcs-semantic-color-text-tertiary);\n    --wcs-card-content-font-size: var(--wcs-semantic-font-size-body-3);\n\n    display: block;\n    overflow: hidden;\n}\n\n::slotted(*) {\n    color: var(--wcs-card-content-color);\n    font-size: var(--wcs-card-content-font-size);\n    margin: 0;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n/**\n * A text content container for a card inside `wcs-card-body`.\n * Commonly used to provide additional details about the card content.\n * The information provided should be concise and easy to read.\n *\n * Use `wcs-card-content` for text only. It applies text-oriented layout rules and overflow behavior.\n * Forms and other rich interactive content should be placed directly inside `wcs-card-body`, not inside\n * `wcs-card-content`.\n *\n * By default, the margin is removed from the top and bottom of the card description.\n *\n * @slot - The textual content of the card description.\n *\n * @cssprop --wcs-card-content-color - The color of the card description.\n * @cssprop --wcs-card-content-font-size - The font size of the card description.\n */\n@Component({\n  tag: 'wcs-card-content',\n  styleUrl: 'card-content.scss',\n  shadow: true,\n})\nexport class CardContent {\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n\n}\n"],"mappings":"yDAAA,MAAMA,EAAiB,gRACvB,MAAAC,EAAeD,E,MCsBFE,EAAWC,EAAA,MAAAD,UAAAE,E,kEAEtB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,QAAAE,IAAA,6C"}

package/composite-elements/wcs-card-footer.js

@@ -1,2 +1,2 @@
-import{p as e,H as c,h as t,c as s}from"./p-2bef72c7.js";const o=":host{--wcs-card-footer-gap:var(--wcs-semantic-spacing-base);display:flex;flex-direction:row;align-items:center;gap:var(--wcs-card-footer-gap)}";const r=o;const a=e(class e extends c{constructor(){super();this.__registerHost();this.__attachShadow()}render(){return t(s,{key:"8b600e63a3178bbf9c3d577053b927ff6ea9a48f"},t("slot",{key:"1ce0728f66cd296c44dcc4d85c9e9d9dcbae853a"}))}static get style(){return r}},[1,"wcs-card-footer"]);function n(){if(typeof customElements==="undefined"){return}const e=["wcs-card-footer"];e.forEach((e=>{switch(e){case"wcs-card-footer":if(!customElements.get(e)){customElements.define(e,a)}break}}))}n();const f=a;const d=n;export{f as WcsCardFooter,d as defineCustomElement};
+import{p as e,H as t,h as c,c as s}from"./p-2bef72c7.js";const o=":host{--wcs-card-footer-gap:var(--wcs-semantic-spacing-base);display:flex;flex-direction:row;align-items:center;gap:var(--wcs-card-footer-gap)}";const r=o;const a=e(class e extends t{constructor(){super();this.__registerHost();this.__attachShadow()}render(){return c(s,{key:"b4cb7626b89fd1b2a8a63bf86cdcd7be94f52490"},c("slot",{key:"33ad1bca3da4f4626cd95b023e34ebd0d2769cab"}))}static get style(){return r}},[1,"wcs-card-footer"]);function n(){if(typeof customElements==="undefined"){return}const e=["wcs-card-footer"];e.forEach((e=>{switch(e){case"wcs-card-footer":if(!customElements.get(e)){customElements.define(e,a)}break}}))}n();const d=a;const f=n;export{d as WcsCardFooter,f as defineCustomElement};
 //# sourceMappingURL=wcs-card-footer.js.map

package/composite-elements/wcs-card-header.js

@@ -1,2 +1,2 @@
-import{p as e,H as t,h as a,c}from"./p-2bef72c7.js";const s=":host{--wcs-card-header-title-color:var(--wcs-semantic-color-text-primary);--wcs-card-header-title-font-size:var(--wcs-semantic-font-size-heading-5);--wcs-card-header-title-font-weight:var(--wcs-semantic-font-weight-heavy);--wcs-card-header-gap:var(--wcs-semantic-spacing-base-150);display:flex;flex-direction:column;align-items:flex-start;gap:var(--wcs-card-header-gap)}:host wcs-badge{align-self:flex-start}:host .header-content{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%}h3{font-size:var(--wcs-card-header-title-font-size);font-weight:var(--wcs-card-header-title-font-weight);color:var(--wcs-card-header-title-color);margin-top:0;margin-bottom:0}";const r=s;const d=e(class e extends t{constructor(){super();this.__registerHost();this.__attachShadow()}render(){return a(c,{key:"6a79563b6c56b7c7262e447ea5946d094590afb6"},a("slot",{key:"74b2f0d43ee991ebee97c0d9d7f6620e30dc9881",name:"badges"}),a("div",{key:"71f110c0e5360352a059d84235c1a1d513c83c0a",class:"header-content"},a("h3",{key:"4b4763ae375f4b96e0018772df7f9af0a4fd20fe"},a("slot",{key:"c2925912655cbca5e351067e42f6a9c67de07083"})),a("slot",{key:"37b2f523adaf2685de1d76dde3942dba5c2379c1",name:"actions"})))}static get style(){return r}},[1,"wcs-card-header"]);function n(){if(typeof customElements==="undefined"){return}const e=["wcs-card-header"];e.forEach((e=>{switch(e){case"wcs-card-header":if(!customElements.get(e)){customElements.define(e,d)}break}}))}n();const o=d;const i=n;export{o as WcsCardHeader,i as defineCustomElement};
+import{p as e,H as t,h as a,c}from"./p-2bef72c7.js";const s=":host{--wcs-card-header-title-color:var(--wcs-semantic-color-text-primary);--wcs-card-header-title-font-size:var(--wcs-semantic-font-size-heading-5);--wcs-card-header-title-font-weight:var(--wcs-semantic-font-weight-heavy);--wcs-card-header-gap:var(--wcs-semantic-spacing-base-150);display:flex;flex-direction:column;align-items:flex-start;gap:var(--wcs-card-header-gap)}:host wcs-badge{align-self:flex-start}:host .header-content{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%}h3{font-size:var(--wcs-card-header-title-font-size);font-weight:var(--wcs-card-header-title-font-weight);color:var(--wcs-card-header-title-color);margin-top:0;margin-bottom:0}";const r=s;const n=e(class e extends t{constructor(){super();this.__registerHost();this.__attachShadow()}render(){return a(c,{key:"076bbf30337bf078dcbe0440f331770f6f972d75"},a("slot",{key:"968eb49e82378adf277049329678de5321c6eaa5",name:"badges"}),a("div",{key:"31905f8b42b83ce332a15eaf10a9c30f622eef43",class:"header-content"},a("h3",{key:"f392a4c7cd130e6aec82d70b9f2ebca6c9efa27f"},a("slot",{key:"3b940462fd222749e9dfa2654bf42b61419443cd"})),a("slot",{key:"41751b8ca5ed6e0b5b73940e1103452842ba092c",name:"actions"})))}static get style(){return r}},[1,"wcs-card-header"]);function o(){if(typeof customElements==="undefined"){return}const e=["wcs-card-header"];e.forEach((e=>{switch(e){case"wcs-card-header":if(!customElements.get(e)){customElements.define(e,n)}break}}))}o();const d=n;const i=o;export{d as WcsCardHeader,i as defineCustomElement};
 //# sourceMappingURL=wcs-card-header.js.map

package/composite-elements/wcs-card-media.js

@@ -1,2 +1,2 @@
-import{p as t,H as s,h as o,c as r}from"./p-2bef72c7.js";const a=":host{display:block;--wcs-card-media-max-width-horizontal:160px}:host ::slotted(*),:host ::slotted([slot=horizontal]),:host ::slotted([slot=vertical]){display:block;object-fit:cover;width:100%;height:100%}:host(.vertical) ::slotted(*),:host(.vertical) ::slotted([slot=vertical]){border-radius:var(--wcs-card-border-radius) var(--wcs-card-border-radius) 0 0;aspect-ratio:16/9}:host(.horizontal) ::slotted(*),:host(.horizontal) ::slotted([slot=horizontal]){width:var(--wcs-card-media-max-width-horizontal);aspect-ratio:1/1;border-radius:var(--wcs-card-border-radius) 0 0 var(--wcs-card-border-radius)}";const e=a;const c=t(class t extends s{constructor(){super();this.__registerHost();this.__attachShadow();this.orientation="vertical"}async setOrientation(t){this.orientation=t}render(){return o(r,{key:"8b54a791a4d1c8bfdc772cb5cd16f3a3dfec0682",class:this.orientation},o("slot",{key:"a7f5751e8e1f3ef3b1b18af34384cb598a80b690"}),this.orientation==="vertical"?o("slot",{name:"vertical"}):o("slot",{name:"horizontal"}))}static get style(){return e}},[1,"wcs-card-media",{orientation:[32],setOrientation:[64]}]);function i(){if(typeof customElements==="undefined"){return}const t=["wcs-card-media"];t.forEach((t=>{switch(t){case"wcs-card-media":if(!customElements.get(t)){customElements.define(t,c)}break}}))}i();const d=c;const l=i;export{d as WcsCardMedia,l as defineCustomElement};
+import{p as t,H as s,h as o,c as e}from"./p-2bef72c7.js";const r=":host{display:block;--wcs-card-media-max-width-horizontal:160px}:host ::slotted(*),:host ::slotted([slot=horizontal]),:host ::slotted([slot=vertical]){display:block;object-fit:cover;width:100%;height:100%}:host(.vertical) ::slotted(*),:host(.vertical) ::slotted([slot=vertical]){border-radius:var(--wcs-card-border-radius) var(--wcs-card-border-radius) 0 0;aspect-ratio:16/9}:host(.horizontal) ::slotted(*),:host(.horizontal) ::slotted([slot=horizontal]){width:var(--wcs-card-media-max-width-horizontal);aspect-ratio:1/1;border-radius:var(--wcs-card-border-radius) 0 0 var(--wcs-card-border-radius)}";const a=r;const c=t(class t extends s{constructor(){super();this.__registerHost();this.__attachShadow();this.orientation="vertical"}async setOrientation(t){this.orientation=t}render(){return o(e,{key:"5fa4c3caf607dd3d9159615fc040bb0876d7f196",class:this.orientation},o("slot",{key:"71e36b2b56ef12bc0d7910b24e04c204a3ec8de2"}),this.orientation==="vertical"?o("slot",{name:"vertical"}):o("slot",{name:"horizontal"}))}static get style(){return a}},[1,"wcs-card-media",{orientation:[32],setOrientation:[64]}]);function i(){if(typeof customElements==="undefined"){return}const t=["wcs-card-media"];t.forEach((t=>{switch(t){case"wcs-card-media":if(!customElements.get(t)){customElements.define(t,c)}break}}))}i();const d=c;const l=i;export{d as WcsCardMedia,l as defineCustomElement};
 //# sourceMappingURL=wcs-card-media.js.map

package/composite-elements/wcs-card.js

@@ -1,2 +1,2 @@
-import{p as r,H as o,h as t}from"./p-2bef72c7.js";const a=":host{--wcs-card-border-color:var(--wcs-semantic-color-border-secondary);--wcs-card-border-radius:var(--wcs-semantic-border-radius-base);--wcs-card-border-width:var(--wcs-semantic-border-width-default);--wcs-card-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-card-text-color:var(--wcs-semantic-color-text-primary);--wcs-card-horizontal-min-height:160px;position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-clip:border-box;border-radius:var(--wcs-card-border-radius);background-color:var(--wcs-card-background-color);color:var(--wcs-card-text-color)}:host([mode=raised]){box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2)}:host([mode=flat]){border:solid var(--wcs-card-border-width) var(--wcs-card-border-color)}:host([orientation=horizontal]){flex-direction:row;min-height:var(--wcs-card-horizontal-height)}:host([orientation=vertical]){flex-direction:column}";const e=a;const c=r(class r extends o{constructor(){super();this.__registerHost();this.__attachShadow();this.mode="flat";this.orientation=null}orientationChanged(){this.updateWcsCardImageOrientation()}onSlotChange(){if(this.orientation){this.updateWcsCardBodyOrientation();this.updateWcsCardImageOrientation()}}updateWcsCardImageOrientation(){var r;(r=this.findWcsCardMedia())===null||r===void 0?void 0:r.setOrientation(this.orientation)}updateWcsCardBodyOrientation(){var r;(r=this.findWcsCardBody())===null||r===void 0?void 0:r.setOrientation(this.orientation)}findWcsCardMedia(){return this.el.querySelector("wcs-card-media")}findWcsCardBody(){return this.el.querySelector("wcs-card-body")}render(){return t("slot",{key:"20a57cf8fc64155e65a98bdb69618ec013ea5a7f",onSlotchange:()=>this.onSlotChange()})}get el(){return this}static get watchers(){return{orientation:["orientationChanged"]}}static get style(){return e}},[1,"wcs-card",{mode:[1537],orientation:[513]},undefined,{orientation:["orientationChanged"]}]);function i(){if(typeof customElements==="undefined"){return}const r=["wcs-card"];r.forEach((r=>{switch(r){case"wcs-card":if(!customElements.get(r)){customElements.define(r,c)}break}}))}i();const s=c;const d=i;export{s as WcsCard,d as defineCustomElement};
+import{p as r,H as o,h as t}from"./p-2bef72c7.js";const a=":host{--wcs-card-border-color:var(--wcs-semantic-color-border-secondary);--wcs-card-border-radius:var(--wcs-semantic-border-radius-base);--wcs-card-border-width:var(--wcs-semantic-border-width-default);--wcs-card-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-card-text-color:var(--wcs-semantic-color-text-primary);--wcs-card-horizontal-min-height:160px;position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-clip:border-box;border-radius:var(--wcs-card-border-radius);background-color:var(--wcs-card-background-color);color:var(--wcs-card-text-color)}:host([mode=raised]){box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2)}:host([mode=flat]){border:solid var(--wcs-card-border-width) var(--wcs-card-border-color)}:host([orientation=horizontal]){flex-direction:row;min-height:var(--wcs-card-horizontal-height)}:host([orientation=vertical]){flex-direction:column}";const e=a;const c=r(class r extends o{constructor(){super();this.__registerHost();this.__attachShadow();this.mode="flat";this.orientation=null}orientationChanged(){this.updateWcsCardImageOrientation()}onSlotChange(){if(this.orientation){this.updateWcsCardBodyOrientation();this.updateWcsCardImageOrientation()}}updateWcsCardImageOrientation(){var r;(r=this.findWcsCardMedia())===null||r===void 0?void 0:r.setOrientation(this.orientation)}updateWcsCardBodyOrientation(){var r;(r=this.findWcsCardBody())===null||r===void 0?void 0:r.setOrientation(this.orientation)}findWcsCardMedia(){return this.el.querySelector("wcs-card-media")}findWcsCardBody(){return this.el.querySelector("wcs-card-body")}render(){return t("slot",{key:"ad099801956318833081d25c13d014bfea7d6482",onSlotchange:()=>this.onSlotChange()})}get el(){return this}static get watchers(){return{orientation:["orientationChanged"]}}static get style(){return e}},[1,"wcs-card",{mode:[1537],orientation:[513]},undefined,{orientation:["orientationChanged"]}]);function i(){if(typeof customElements==="undefined"){return}const r=["wcs-card"];r.forEach((r=>{switch(r){case"wcs-card":if(!customElements.get(r)){customElements.define(r,c)}break}}))}i();const s=c;const d=i;export{s as WcsCard,d as defineCustomElement};
 //# sourceMappingURL=wcs-card.js.map

package/composite-elements/wcs-card.js.map

@@ -1 +1 @@
-{"version":3,"names":["cardCss","WcsCardStyle0","Card","proxyCustomElement","H","orientationChanged","this","updateWcsCardImageOrientation","onSlotChange","orientation","updateWcsCardBodyOrientation","_a","findWcsCardMedia","setOrientation","findWcsCardBody","el","querySelector","render","h","key","onSlotchange"],"sources":["src/components/card/card.scss?tag=wcs-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":[":host {\n    --wcs-card-border-color: var(--wcs-semantic-color-border-secondary);\n    --wcs-card-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-card-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-card-background-color: var(--wcs-semantic-color-background-surface-primary);\n    --wcs-card-text-color: var(--wcs-semantic-color-text-primary);\n\n    --wcs-card-horizontal-min-height: 160px;\n\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    word-wrap: break-word;\n    background-clip: border-box;\n    border-radius: var(--wcs-card-border-radius);\n    background-color: var(--wcs-card-background-color);\n    color: var(--wcs-card-text-color);\n}\n\n:host([mode=\"raised\"]) {\n    /* Card mode raised is deprecated in the new design system */\n    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .20)\n}\n\n:host([mode=\"flat\"]) {\n    border: solid var(--wcs-card-border-width) var(--wcs-card-border-color);\n}\n\n:host([orientation=\"horizontal\"]) {\n    flex-direction: row;\n    min-height: var(--wcs-card-horizontal-height);\n}\n\n:host([orientation=\"vertical\"]) {\n    flex-direction: column;\n}\n","import { Component, ComponentInterface, h, Prop, Element, Watch } from '@stencil/core';\nimport { CardMode, CardOrientation } from './card-interface';\n\n/**\n * The card component is a container that display content such as text, images, buttons, and lists.  \n * A card can be a single component, but is often made up of a header, title, subtitle, and content.\n * \n * While they're very flexible, it's important to use them consistently. You may use `wcs-card-media` outside `wcs-card-body`\n * and `wcs-card-header` `wcs-card-content` `wcs-card-footer` within `wcs-card-body` to make sure the card is well-designed.\n *\n * @slot - Default slot for the card content\n * \n * @cssprop --wcs-card-border-color - Border color of the card\n * @cssprop --wcs-card-border-radius - Border radius of the card\n * @cssprop --wcs-card-border-width - Border width of the card\n * @cssprop --wcs-card-background-color - Background color of the card\n * @cssprop --wcs-card-text-color - Text color of the card\n * @cssprop --wcs-card-horizontal-min-height - Min height of the card when horizontal\n */\n@Component({\n    tag: 'wcs-card',\n    styleUrl: 'card.scss',\n    shadow: true\n})\nexport class Card implements ComponentInterface {\n    @Element() private el!: HTMLElement;\n    @Prop({reflect: true, mutable: true})\n    mode: CardMode = 'flat';\n    /**\n     * The orientation of the card, can be horizontal or vertical\n     */\n    @Prop({reflect: true})\n    orientation: CardOrientation = null;\n\n    @Watch('orientation')\n    orientationChanged() {\n        this.updateWcsCardImageOrientation();\n    }\n\n    private onSlotChange() {\n        if(this.orientation) {\n            this.updateWcsCardBodyOrientation();\n            this.updateWcsCardImageOrientation();\n        }\n    }\n\n    private updateWcsCardImageOrientation() {\n        this.findWcsCardMedia()?.setOrientation(this.orientation);\n    }\n\n    private updateWcsCardBodyOrientation() {\n        this.findWcsCardBody()?.setOrientation(this.orientation);\n    }\n\n    private findWcsCardMedia(): HTMLWcsCardMediaElement {\n        return this.el.querySelector('wcs-card-media');\n    }\n\n    private findWcsCardBody(): HTMLWcsCardBodyElement {\n        return this.el.querySelector('wcs-card-body');\n    }\n\n    render() {\n        return (\n            <slot onSlotchange={() => this.onSlotChange()}/>\n        );\n    }\n}\n"],"mappings":"kDAAA,MAAMA,EAAU,o+BAChB,MAAAC,EAAeD,E,MCuBFE,EAAIC,EAAA,MAAAD,UAAAE,E,4EAGI,O,iBAKc,I,CAG/B,kBAAAC,GACIC,KAAKC,+B,CAGD,YAAAC,GACJ,GAAGF,KAAKG,YAAa,CACjBH,KAAKI,+BACLJ,KAAKC,+B,EAIL,6BAAAA,G,OACJI,EAAAL,KAAKM,sBAAkB,MAAAD,SAAA,SAAAA,EAAEE,eAAeP,KAAKG,Y,CAGzC,4BAAAC,G,OACJC,EAAAL,KAAKQ,qBAAiB,MAAAH,SAAA,SAAAA,EAAEE,eAAeP,KAAKG,Y,CAGxC,gBAAAG,GACJ,OAAON,KAAKS,GAAGC,cAAc,iB,CAGzB,eAAAF,GACJ,OAAOR,KAAKS,GAAGC,cAAc,gB,CAGjC,MAAAC,GACI,OACIC,EAAA,QAAAC,IAAA,2CAAMC,aAAc,IAAMd,KAAKE,gB"}
+{"version":3,"names":["cardCss","WcsCardStyle0","Card","proxyCustomElement","H","orientationChanged","this","updateWcsCardImageOrientation","onSlotChange","orientation","updateWcsCardBodyOrientation","_a","findWcsCardMedia","setOrientation","findWcsCardBody","el","querySelector","render","h","key","onSlotchange"],"sources":["src/components/card/card.scss?tag=wcs-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":[":host {\n    --wcs-card-border-color: var(--wcs-semantic-color-border-secondary);\n    --wcs-card-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-card-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-card-background-color: var(--wcs-semantic-color-background-surface-primary);\n    --wcs-card-text-color: var(--wcs-semantic-color-text-primary);\n\n    --wcs-card-horizontal-min-height: 160px;\n\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    word-wrap: break-word;\n    background-clip: border-box;\n    border-radius: var(--wcs-card-border-radius);\n    background-color: var(--wcs-card-background-color);\n    color: var(--wcs-card-text-color);\n}\n\n:host([mode=\"raised\"]) {\n    /* Card mode raised is deprecated in the new design system */\n    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .20)\n}\n\n:host([mode=\"flat\"]) {\n    border: solid var(--wcs-card-border-width) var(--wcs-card-border-color);\n}\n\n:host([orientation=\"horizontal\"]) {\n    flex-direction: row;\n    min-height: var(--wcs-card-horizontal-height);\n}\n\n:host([orientation=\"vertical\"]) {\n    flex-direction: column;\n}\n","import { Component, ComponentInterface, h, Prop, Element, Watch } from '@stencil/core';\nimport { CardMode, CardOrientation } from './card-interface';\n\n/**\n * The card component is a container that displays content such as text, images, buttons, and lists.\n * A card can be a single component, but is often made up of a header, title, subtitle, and content.\n *\n * While cards are flexible, it is important to use them consistently. You may use `wcs-card-media` outside\n * `wcs-card-body`, and `wcs-card-header`, `wcs-card-content`, and `wcs-card-footer` within `wcs-card-body`\n * to keep the card structure clear and well-designed.\n *\n * `wcs-card-content` is intended for textual content only. If you need to display a form or other rich interactive\n * content inside a card, place it directly inside `wcs-card-body` instead of wrapping it in `wcs-card-content`.\n *\n * A card can also be used as a visual wrapper to get the card border, radius, and background. In that case, prefer a\n * direct child `wcs-card-body` when you need to host structured content.\n *\n * @slot - Default slot for the card content\n * \n * @cssprop --wcs-card-border-color - Border color of the card\n * @cssprop --wcs-card-border-radius - Border radius of the card\n * @cssprop --wcs-card-border-width - Border width of the card\n * @cssprop --wcs-card-background-color - Background color of the card\n * @cssprop --wcs-card-text-color - Text color of the card\n * @cssprop --wcs-card-horizontal-min-height - Min height of the card when horizontal\n */\n@Component({\n    tag: 'wcs-card',\n    styleUrl: 'card.scss',\n    shadow: true\n})\nexport class Card implements ComponentInterface {\n    @Element() private el!: HTMLElement;\n    @Prop({reflect: true, mutable: true})\n    mode: CardMode = 'flat';\n    /**\n     * The orientation of the card, can be horizontal or vertical\n     */\n    @Prop({reflect: true})\n    orientation: CardOrientation = null;\n\n    @Watch('orientation')\n    orientationChanged() {\n        this.updateWcsCardImageOrientation();\n    }\n\n    private onSlotChange() {\n        if(this.orientation) {\n            this.updateWcsCardBodyOrientation();\n            this.updateWcsCardImageOrientation();\n        }\n    }\n\n    private updateWcsCardImageOrientation() {\n        this.findWcsCardMedia()?.setOrientation(this.orientation);\n    }\n\n    private updateWcsCardBodyOrientation() {\n        this.findWcsCardBody()?.setOrientation(this.orientation);\n    }\n\n    private findWcsCardMedia(): HTMLWcsCardMediaElement {\n        return this.el.querySelector('wcs-card-media');\n    }\n\n    private findWcsCardBody(): HTMLWcsCardBodyElement {\n        return this.el.querySelector('wcs-card-body');\n    }\n\n    render() {\n        return (\n            <slot onSlotchange={() => this.onSlotChange()}/>\n        );\n    }\n}\n"],"mappings":"kDAAA,MAAMA,EAAU,o+BAChB,MAAAC,EAAeD,E,MC8BFE,EAAIC,EAAA,MAAAD,UAAAE,E,4EAGI,O,iBAKc,I,CAG/B,kBAAAC,GACIC,KAAKC,+B,CAGD,YAAAC,GACJ,GAAGF,KAAKG,YAAa,CACjBH,KAAKI,+BACLJ,KAAKC,+B,EAIL,6BAAAA,G,OACJI,EAAAL,KAAKM,sBAAkB,MAAAD,SAAA,SAAAA,EAAEE,eAAeP,KAAKG,Y,CAGzC,4BAAAC,G,OACJC,EAAAL,KAAKQ,qBAAiB,MAAAH,SAAA,SAAAA,EAAEE,eAAeP,KAAKG,Y,CAGxC,gBAAAG,GACJ,OAAON,KAAKS,GAAGC,cAAc,iB,CAGzB,eAAAF,GACJ,OAAOR,KAAKS,GAAGC,cAAc,gB,CAGjC,MAAAC,GACI,OACIC,EAAA,QAAAC,IAAA,2CAAMC,aAAc,IAAMd,KAAKE,gB"}

package/composite-elements/wcs-checkbox.js

@@ -1,2 +1,2 @@
-import{C as o,d as s}from"./p-a90bb01e.js";const t=o;const a=s;export{t as WcsCheckbox,a as defineCustomElement};
+import{C as o,d as s}from"./p-061ccda5.js";const c=o;const t=s;export{c as WcsCheckbox,t as defineCustomElement};
 //# sourceMappingURL=wcs-checkbox.js.map

package/composite-elements/wcs-chip.js

@@ -1,2 +1,2 @@
-import{p as s,H as e,d as o,h as c,c as i}from"./p-2bef72c7.js";const r=":host{--wcs-chip-height:var(--wcs-semantic-size-s);--wcs-chip-font-size:var(--wcs-semantic-font-size-base);--wcs-chip-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-chip-focus-outline-border-width:var(--wcs-semantic-border-width-large);--wcs-chip-padding-vertical:var(--wcs-semantic-spacing-base);--wcs-chip-padding-horizontal:var(--wcs-semantic-spacing-base-150);--wcs-chip-padding-horizontal-dismissible:var(--wcs-semantic-spacing-base);--wcs-chip-selectable-background-color:var(--wcs-semantic-color-background-action-secondary-default);--wcs-chip-selectable-background-color-pressed:var(--wcs-semantic-color-background-action-secondary-press);--wcs-chip-selectable-background-color-hover:var(--wcs-semantic-color-background-action-secondary-hover);--wcs-chip-selectable-background-color-selected:var(--wcs-semantic-color-background-action-primary-default);--wcs-chip-selectable-background-color-selected-hover:var(--wcs-semantic-color-background-action-primary-hover);--wcs-chip-selectable-background-color-selected-pressed:var(--wcs-semantic-color-background-action-primary-press);--wcs-chip-selectable-background-color-selected-disabled:var(--wcs-semantic-color-background-action-primary-disabled);--wcs-chip-selectable-color:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-chip-selectable-color-hover:var(--wcs-semantic-color-foreground-action-secondary-hover);--wcs-chip-selectable-color-pressed:var(--wcs-semantic-color-foreground-action-secondary-press);--wcs-chip-selectable-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-chip-selectable-color-selected:var(--wcs-semantic-color-foreground-action-primary-default);--wcs-chip-selectable-color-selected-hover:var(--wcs-semantic-color-foreground-action-primary-hover);--wcs-chip-selectable-color-selected-pressed:var(--wcs-semantic-color-foreground-action-primary-press);--wcs-chip-border-radius:var(--wcs-semantic-border-radius-base);--wcs-chip-border-line-width:var(--wcs-semantic-border-width-default);--wcs-chip-selectable-border-color:var(--wcs-semantic-color-border-action-secondary-default);--wcs-chip-selectable-border-color-hover:var(--wcs-semantic-color-border-control-indicator-hover);--wcs-chip-selectable-border-color-pressed:var(--wcs-semantic-color-border-action-secondary-press);--wcs-chip-selectable-border-color-disabled:var(--wcs-semantic-color-border-action-secondary-disabled);--wcs-chip-selectable-content-gap:var(--wcs-semantic-spacing-base);--wcs-chip-selectable-focus-outline-color:var(--wcs-semantic-color-border-focus-base);--wcs-chip-dismissible-content-gap:var(--wcs-semantic-spacing-base-05);--wcs-chip-dismissible-padding-right:var(--wcs-semantic-spacing-base-05);--wcs-chip-dismissible-button-outline-radius:var(--wcs-semantic-border-radius-full);--wcs-chip-dismissible-primary-focus-outline-color:var(--wcs-semantic-color-border-focus-base-on-secondary);--wcs-chip-dismissible-primary-border-color:var(--wcs-semantic-color-background-action-primary-default);--wcs-chip-dismissible-primary-border-color-disabled:var(--wcs-semantic-color-background-action-primary-disabled);--wcs-chip-dismissible-primary-color:var(--wcs-semantic-color-foreground-action-primary-default);--wcs-chip-dismissible-primary-color-hover:var(--wcs-semantic-color-foreground-action-primary-hover);--wcs-chip-dismissible-primary-color-pressed:var(--wcs-semantic-color-foreground-action-primary-press);--wcs-chip-dismissible-primary-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-chip-dismissible-primary-background-color:var(--wcs-semantic-color-background-action-primary-default);--wcs-chip-dismissible-primary-background-color-hover:var(--wcs-semantic-color-background-action-primary-hover);--wcs-chip-dismissible-primary-background-color-pressed:var(--wcs-semantic-color-background-action-primary-press);--wcs-chip-dismissible-primary-background-color-disabled:var(--wcs-semantic-color-background-action-primary-disabled);--wcs-chip-dismissible-secondary-button-focus-outline-color:var(--wcs-semantic-color-border-focus-base);--wcs-chip-dismissible-secondary-border-color:var(--wcs-semantic-color-border-action-secondary-default);--wcs-chip-dismissible-secondary-border-color-disabled:var(--wcs-semantic-color-border-action-secondary-disabled);--wcs-chip-dismissible-secondary-color:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-chip-dismissible-secondary-color-disabled:var(--wcs-semantic-color-foreground-disabled);--wcs-chip-dismissible-secondary-background-color:var(--wcs-semantic-color-background-action-secondary-default);--wcs-chip-dismissible-secondary-button-background-color:var(--wcs-semantic-color-background-action-secondary-default);--wcs-chip-dismissible-secondary-button-background-color-hover:var(--wcs-semantic-color-background-surface-accent-lighter);--wcs-chip-dismissible-secondary-button-background-color-pressed:var(--wcs-semantic-color-background-surface-accent-light);--wcs-chip-dismissible-secondary-button-background-color-disabled:var(--wcs-semantic-color-background-action-secondary-disabled);display:inline-flex;align-items:center;vertical-align:middle;overflow:hidden;box-sizing:border-box;height:var(--wcs-chip-height);border-radius:var(--wcs-chip-border-radius);font-size:var(--wcs-chip-font-size);font-weight:var(--wcs-chip-font-weight);padding:var(--wcs-chip-padding-vertical) var(--wcs-chip-padding-horizontal);cursor:pointer;user-select:none;transition-property:color, background-color;transition-duration:var(--wcs-semantic-motion-duration-feedback-base);transition-timing-function:ease-out}:host([mode=selectable]){gap:var(--wcs-chip-selectable-content-gap);border:solid var(--wcs-chip-border-line-width) var(--wcs-chip-selectable-border-color);background-color:var(--wcs-chip-selectable-background-color);color:var(--wcs-chip-selectable-color)}:host([mode=selectable]):host(:focus-visible){outline:var(--wcs-chip-focus-outline-border-width) dashed var(--wcs-chip-selectable-focus-outline-color);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-chip-border-radius)}:host([mode=selectable]):host(:not([disabled])):host(:not([selected])):host(:hover){background-color:var(--wcs-chip-selectable-background-color-hover);color:var(--wcs-chip-selectable-color-hover);border-color:var(--wcs-chip-selectable-border-color-hover)}:host([mode=selectable]):host(:not([disabled])):host(:not([selected])):host(:active){background-color:var(--wcs-chip-selectable-background-color-pressed);color:var(--wcs-chip-selectable-color-pressed);border-color:var(--wcs-chip-selectable-border-color-pressed)}:host([mode=selectable]):host(:not([disabled])):host([selected]){color:var(--wcs-chip-selectable-color-selected);background-color:var(--wcs-chip-selectable-background-color-selected);border-color:transparent}:host([mode=selectable]):host(:not([disabled])):host([selected]) svg path{fill:var(--wcs-chip-selectable-color-selected);transform:translateY(-1.5px)}:host([mode=selectable]):host(:not([disabled])):host([selected]):host(:hover){background-color:var(--wcs-chip-selectable-background-color-selected-hover);color:var(--wcs-chip-selectable-color-selected-hover)}:host([mode=selectable]):host(:not([disabled])):host([selected]):host(:hover) svg path{fill:var(--wcs-chip-selectable-color-selected-hover)}:host([mode=selectable]):host(:not([disabled])):host([selected]):host(:active){background-color:var(--wcs-chip-selectable-background-color-selected-pressed);color:var(--wcs-chip-selectable-color-selected-pressed)}:host([mode=selectable]):host(:not([disabled])):host([selected]):host(:active) svg path{fill:var(--wcs-chip-selectable-color-selected-pressed)}:host([mode=selectable]):host([disabled]){color:var(--wcs-chip-selectable-color-disabled);cursor:not-allowed}:host([mode=selectable]):host([disabled]) svg path{fill:var(--wcs-chip-selectable-color-disabled)}:host([mode=selectable]):host([disabled]):host(:not([selected])){border-color:var(--wcs-chip-selectable-border-color-disabled)}:host([mode=selectable]):host([disabled]):host([selected]){background-color:var(--wcs-chip-selectable-background-color-selected-disabled);border:0}:host([mode=dismissible]){cursor:initial;border:solid var(--wcs-chip-border-line-width) var(--wcs-chip-dismissible-primary-border-color);color:var(--wcs-chip-dismissible-primary-color);background-color:var(--wcs-chip-dismissible-primary-background-color);gap:var(--wcs-chip-dismissible-content-gap);padding-right:var(--wcs-chip-dismissible-padding-right)}:host([mode=dismissible]) button{background:transparent;border:none;margin:0;padding:0;border-radius:var(--wcs-semantic-border-radius-full);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:inherit;width:var(--wcs-semantic-size-xs);height:var(--wcs-semantic-size-xs)}:host([mode=dismissible]) button:focus{outline:none}:host([mode=dismissible]) button:focus svg{outline:var(--wcs-chip-focus-outline-border-width) dashed var(--wcs-chip-dismissible-primary-focus-outline-color);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-chip-dismissible-button-outline-radius)}:host([mode=dismissible]):host(:not([open])){display:none;margin:0}:host([mode=dismissible]):host(:not([disabled])) button:hover{background-color:var(--wcs-chip-dismissible-primary-background-color-hover);color:var(--wcs-chip-dismissible-primary-color-hover)}:host([mode=dismissible]):host(:not([disabled])) button:active{background-color:var(--wcs-chip-dismissible-primary-background-color-pressed);color:var(--wcs-chip-dismissible-primary-color-pressed)}:host([mode=dismissible]):host([disabled]){color:var(--wcs-chip-dismissible-primary-color-disabled);background-color:var(--wcs-chip-dismissible-primary-background-color-disabled);cursor:not-allowed;border:solid var(--wcs-chip-border-line-width) var(--wcs-chip-dismissible-primary-border-color-disabled)}:host([mode=dismissible]):host([disabled]) svg{cursor:not-allowed}:host([mode=dismissible]):host([disabled]) svg path{fill:var(--wcs-chip-dismissible-primary-color-disabled)}:host([mode=dismissible]):host([variant=secondary]){color:var(--wcs-chip-dismissible-secondary-color);background-color:var(--wcs-chip-dismissible-secondary-background-color);border:solid var(--wcs-chip-border-line-width) var(--wcs-chip-dismissible-secondary-border-color)}:host([mode=dismissible]):host([variant=secondary]) button{background:var(--wcs-chip-dismissible-secondary-button-background-color)}:host([mode=dismissible]):host([variant=secondary]) button:focus{outline:none}:host([mode=dismissible]):host([variant=secondary]) button:focus svg{outline:var(--wcs-chip-focus-outline-border-width) dashed var(--wcs-chip-dismissible-secondary-button-focus-outline-color);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-chip-dismissible-button-outline-radius)}:host([mode=dismissible]):host([variant=secondary]):host(:not([disabled])) button:hover{background-color:var(--wcs-chip-dismissible-secondary-button-background-color-hover);color:var(--wcs-chip-dismissible-secondary-button-color-hover)}:host([mode=dismissible]):host([variant=secondary]):host(:not([disabled])) button:active{background-color:var(--wcs-chip-dismissible-secondary-button-background-color-pressed);color:var(--wcs-chip-dismissible-secondary-button-color-pressed)}:host([mode=dismissible]):host([variant=secondary]):host([disabled]){color:var(--wcs-chip-dismissible-secondary-color-disabled);background-color:var(--wcs-chip-dismissible-secondary-background-color-disabled);border:solid var(--wcs-chip-border-line-width) var(--wcs-chip-dismissible-secondary-border-color-disabled)}:host([mode=dismissible]):host([variant=secondary]):host([disabled]) svg path{fill:var(--wcs-chip-dismissible-secondary-color-disabled)}";const a=r;const l=s(class s extends e{constructor(){super();this.__registerHost();this.__attachShadow();this.wcsChipSelectChange=o(this,"wcsChipSelectChange",7);this.wcsChipDismiss=o(this,"wcsChipDismiss",7);this.handleDismiss=s=>{if(this.disabled||this.mode!=="dismissible"){return}s.stopPropagation();this.dismiss()};this.value=undefined;this.label=undefined;this.selected=false;this.open=true;this.disabled=false;this.variant="primary";this.mode="selectable"}select(){this.selected=!this.selected;this.wcsChipSelectChange.emit({value:this.value,selected:this.selected})}dismiss(){this.open=false;this.wcsChipDismiss.emit({value:this.value});this.focusNextChip()}focusNextChip(){let s=this.el.nextElementSibling;while(s){if(this.isActionableChip(s)){this.focusChip(s);return}s=s.nextElementSibling}}isActionableChip(s){return s instanceof e&&s.tagName==="WCS-CHIP"&&!s.disabled}focusChip(s){var e,o;if(s.mode==="selectable"){s.focus()}else if(s.mode==="dismissible"){(o=(e=s.shadowRoot)===null||e===void 0?void 0:e.querySelector("button"))===null||o===void 0?void 0:o.focus()}}handleClick(){if(this.disabled||this.mode!=="selectable"){return}this.select()}handleKeydown(s){if(this.disabled){return}if(this.mode==="selectable"){if(s.key==="Enter"||s.key===" "){this.select()}}else if(this.mode==="dismissible"){if(s.key==="Delete"||s.key==="Backspace"){this.dismiss()}}}render(){const s={"aria-disabled":this.disabled?"true":null};if(this.mode==="selectable"){return c(i,Object.assign({},s,{role:"checkbox","aria-checked":this.selected?"true":"false",tabindex:this.disabled?-1:0,onClick:this.handleClick.bind(this),onKeyDown:this.handleKeydown.bind(this)}),this.selected&&c("svg",{class:"check-icon","aria-hidden":"true",width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},c("path",{d:"M23.712 8.3011L8.0292 23.7157C7.6356 24.095 6.9984 24.095 6.6264 23.7157L0.288 17.4955C-0.096 17.1226 -0.096 16.496 0.288 16.1192L2.1552 14.2739C2.5536 13.9036 3.1776 13.9036 3.5532 14.2739L6.6264 17.2764C6.9984 17.6583 7.6356 17.6583 8.0292 17.2764L20.4384 5.08081C20.8236 4.70662 21.4536 4.70662 21.8364 5.08081L23.712 6.91841C24.096 7.29516 24.096 7.91923 23.712 8.3011Z",fill:"white"})),c("span",null,this.label))}else{return c(i,Object.assign({},s),c("span",null,this.label),c("button",{"aria-label":`Supprimer ${this.label}`,disabled:this.disabled,onClick:this.handleDismiss.bind(this),onKeyDown:this.handleKeydown.bind(this)},c("svg",{class:"dismiss-icon","aria-hidden":"true",width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},c("path",{d:"M14.2656 12.0298L19.588 6.72176C20.1908 6.12119 20.1061 5.05213 19.5034 4.45043C18.9006 3.84986 17.914 3.84986 17.3112 4.45043L11.9887 9.7596L6.66743 4.45043C6.06351 3.84986 5.07691 3.84986 4.47412 4.45043C3.87132 5.05213 3.82843 6.07942 4.43122 6.68112L9.75365 11.9892L4.43122 17.2983C3.82843 17.8989 3.87132 18.9262 4.47412 19.5279C5.07691 20.1296 6.10527 20.1702 6.70807 19.5685L12.0305 14.2605L17.3112 19.5279C17.914 20.1296 18.9006 20.1296 19.5034 19.5279C20.1061 18.9262 20.149 17.8989 19.5462 17.2983L14.2656 12.0298Z",fill:"currentColor"}))))}}get el(){return this}static get style(){return a}},[1,"wcs-chip",{value:[1],label:[1],selected:[516],open:[516],disabled:[516],variant:[513],mode:[513]}]);function t(){if(typeof customElements==="undefined"){return}const s=["wcs-chip"];s.forEach((s=>{switch(s){case"wcs-chip":if(!customElements.get(s)){customElements.define(s,l)}break}}))}t();const d=l;const n=t;export{d as WcsChip,n as defineCustomElement};
+import{p as s,H as e,d as o,h as c,c as i}from"./p-2bef72c7.js";const r=":host{--wcs-chip-height:var(--wcs-semantic-size-s);--wcs-chip-font-size:var(--wcs-semantic-font-size-base);--wcs-chip-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-chip-focus-outline-border-width:var(--wcs-semantic-border-width-large);--wcs-chip-padding-vertical:var(--wcs-semantic-spacing-base);--wcs-chip-padding-horizontal:var(--wcs-semantic-spacing-base-150);--wcs-chip-padding-horizontal-dismissible:var(--wcs-semantic-spacing-base);--wcs-chip-selectable-background-color:var(--wcs-semantic-color-background-action-secondary-default);--wcs-chip-selectable-background-color-pressed:var(--wcs-semantic-color-background-action-secondary-press);--wcs-chip-selectable-background-color-hover:var(--wcs-semantic-color-background-action-secondary-hover);--wcs-chip-selectable-background-color-selected:var(--wcs-semantic-color-background-action-primary-default);--wcs-chip-selectable-background-color-selected-hover:var(--wcs-semantic-color-background-action-primary-hover);--wcs-chip-selectable-background-color-selected-pressed:var(--wcs-semantic-color-background-action-primary-press);--wcs-chip-selectable-background-color-selected-disabled:var(--wcs-semantic-color-background-action-primary-disabled);--wcs-chip-selectable-color:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-chip-selectable-color-hover:var(--wcs-semantic-color-foreground-action-secondary-hover);--wcs-chip-selectable-color-pressed:var(--wcs-semantic-color-foreground-action-secondary-press);--wcs-chip-selectable-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-chip-selectable-color-selected:var(--wcs-semantic-color-foreground-action-primary-default);--wcs-chip-selectable-color-selected-hover:var(--wcs-semantic-color-foreground-action-primary-hover);--wcs-chip-selectable-color-selected-pressed:var(--wcs-semantic-color-foreground-action-primary-press);--wcs-chip-border-radius:var(--wcs-semantic-border-radius-base);--wcs-chip-border-line-width:var(--wcs-semantic-border-width-default);--wcs-chip-selectable-border-color:var(--wcs-semantic-color-border-action-secondary-default);--wcs-chip-selectable-border-color-hover:var(--wcs-semantic-color-border-control-indicator-hover);--wcs-chip-selectable-border-color-pressed:var(--wcs-semantic-color-border-action-secondary-press);--wcs-chip-selectable-border-color-disabled:var(--wcs-semantic-color-border-action-secondary-disabled);--wcs-chip-selectable-content-gap:var(--wcs-semantic-spacing-base);--wcs-chip-selectable-focus-outline-color:var(--wcs-semantic-color-border-focus-base);--wcs-chip-dismissible-content-gap:var(--wcs-semantic-spacing-base-05);--wcs-chip-dismissible-padding-right:var(--wcs-semantic-spacing-base-05);--wcs-chip-dismissible-button-outline-radius:var(--wcs-semantic-border-radius-full);--wcs-chip-dismissible-primary-focus-outline-color:var(--wcs-semantic-color-border-focus-base-on-secondary);--wcs-chip-dismissible-primary-border-color:var(--wcs-semantic-color-background-action-primary-default);--wcs-chip-dismissible-primary-border-color-disabled:var(--wcs-semantic-color-background-action-primary-disabled);--wcs-chip-dismissible-primary-color:var(--wcs-semantic-color-foreground-action-primary-default);--wcs-chip-dismissible-primary-color-hover:var(--wcs-semantic-color-foreground-action-primary-hover);--wcs-chip-dismissible-primary-color-pressed:var(--wcs-semantic-color-foreground-action-primary-press);--wcs-chip-dismissible-primary-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-chip-dismissible-primary-background-color:var(--wcs-semantic-color-background-action-primary-default);--wcs-chip-dismissible-primary-background-color-hover:var(--wcs-semantic-color-background-action-primary-hover);--wcs-chip-dismissible-primary-background-color-pressed:var(--wcs-semantic-color-background-action-primary-press);--wcs-chip-dismissible-primary-background-color-disabled:var(--wcs-semantic-color-background-action-primary-disabled);--wcs-chip-dismissible-secondary-button-focus-outline-color:var(--wcs-semantic-color-border-focus-base);--wcs-chip-dismissible-secondary-border-color:var(--wcs-semantic-color-border-action-secondary-default);--wcs-chip-dismissible-secondary-border-color-disabled:var(--wcs-semantic-color-border-action-secondary-disabled);--wcs-chip-dismissible-secondary-color:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-chip-dismissible-secondary-color-disabled:var(--wcs-semantic-color-foreground-disabled);--wcs-chip-dismissible-secondary-background-color:var(--wcs-semantic-color-background-action-secondary-default);--wcs-chip-dismissible-secondary-button-background-color:var(--wcs-semantic-color-background-action-secondary-default);--wcs-chip-dismissible-secondary-button-background-color-hover:var(--wcs-semantic-color-background-surface-accent-lighter);--wcs-chip-dismissible-secondary-button-background-color-pressed:var(--wcs-semantic-color-background-surface-accent-light);--wcs-chip-dismissible-secondary-button-background-color-disabled:var(--wcs-semantic-color-background-action-secondary-disabled);display:inline-flex;align-items:center;vertical-align:middle;overflow:hidden;box-sizing:border-box;height:var(--wcs-chip-height);border-radius:var(--wcs-chip-border-radius);font-size:var(--wcs-chip-font-size);font-weight:var(--wcs-chip-font-weight);padding:var(--wcs-chip-padding-vertical) var(--wcs-chip-padding-horizontal);cursor:pointer;user-select:none;transition-property:color, background-color;transition-duration:var(--wcs-semantic-motion-duration-feedback-base);transition-timing-function:ease-out}:host([mode=selectable]){gap:var(--wcs-chip-selectable-content-gap);border:solid var(--wcs-chip-border-line-width) var(--wcs-chip-selectable-border-color);background-color:var(--wcs-chip-selectable-background-color);color:var(--wcs-chip-selectable-color)}:host([mode=selectable]):host(:focus-visible){outline:var(--wcs-chip-focus-outline-border-width) dashed var(--wcs-chip-selectable-focus-outline-color);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-chip-border-radius)}:host([mode=selectable]):host(:not([disabled])):host(:not([selected])):host(:hover){background-color:var(--wcs-chip-selectable-background-color-hover);color:var(--wcs-chip-selectable-color-hover);border-color:var(--wcs-chip-selectable-border-color-hover)}:host([mode=selectable]):host(:not([disabled])):host(:not([selected])):host(:active){background-color:var(--wcs-chip-selectable-background-color-pressed);color:var(--wcs-chip-selectable-color-pressed);border-color:var(--wcs-chip-selectable-border-color-pressed)}:host([mode=selectable]):host(:not([disabled])):host([selected]){color:var(--wcs-chip-selectable-color-selected);background-color:var(--wcs-chip-selectable-background-color-selected);border-color:transparent}:host([mode=selectable]):host(:not([disabled])):host([selected]) svg path{fill:var(--wcs-chip-selectable-color-selected);transform:translateY(-1.5px)}:host([mode=selectable]):host(:not([disabled])):host([selected]):host(:hover){background-color:var(--wcs-chip-selectable-background-color-selected-hover);color:var(--wcs-chip-selectable-color-selected-hover)}:host([mode=selectable]):host(:not([disabled])):host([selected]):host(:hover) svg path{fill:var(--wcs-chip-selectable-color-selected-hover)}:host([mode=selectable]):host(:not([disabled])):host([selected]):host(:active){background-color:var(--wcs-chip-selectable-background-color-selected-pressed);color:var(--wcs-chip-selectable-color-selected-pressed)}:host([mode=selectable]):host(:not([disabled])):host([selected]):host(:active) svg path{fill:var(--wcs-chip-selectable-color-selected-pressed)}:host([mode=selectable]):host([disabled]){color:var(--wcs-chip-selectable-color-disabled);cursor:not-allowed}:host([mode=selectable]):host([disabled]) svg path{fill:var(--wcs-chip-selectable-color-disabled)}:host([mode=selectable]):host([disabled]):host(:not([selected])){border-color:var(--wcs-chip-selectable-border-color-disabled)}:host([mode=selectable]):host([disabled]):host([selected]){background-color:var(--wcs-chip-selectable-background-color-selected-disabled);border:0}:host([mode=dismissible]){cursor:initial;border:solid var(--wcs-chip-border-line-width) var(--wcs-chip-dismissible-primary-border-color);color:var(--wcs-chip-dismissible-primary-color);background-color:var(--wcs-chip-dismissible-primary-background-color);gap:var(--wcs-chip-dismissible-content-gap);padding-right:var(--wcs-chip-dismissible-padding-right)}:host([mode=dismissible]) button{background:transparent;border:none;margin:0;padding:0;border-radius:var(--wcs-semantic-border-radius-full);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:inherit;width:var(--wcs-semantic-size-xs);height:var(--wcs-semantic-size-xs)}:host([mode=dismissible]) button:focus{outline:none}:host([mode=dismissible]) button:focus svg{outline:var(--wcs-chip-focus-outline-border-width) dashed var(--wcs-chip-dismissible-primary-focus-outline-color);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-chip-dismissible-button-outline-radius)}:host([mode=dismissible]):host(:not([open])){display:none;margin:0}:host([mode=dismissible]):host(:not([disabled])) button:hover{background-color:var(--wcs-chip-dismissible-primary-background-color-hover);color:var(--wcs-chip-dismissible-primary-color-hover)}:host([mode=dismissible]):host(:not([disabled])) button:active{background-color:var(--wcs-chip-dismissible-primary-background-color-pressed);color:var(--wcs-chip-dismissible-primary-color-pressed)}:host([mode=dismissible]):host([disabled]){color:var(--wcs-chip-dismissible-primary-color-disabled);background-color:var(--wcs-chip-dismissible-primary-background-color-disabled);cursor:not-allowed;border:solid var(--wcs-chip-border-line-width) var(--wcs-chip-dismissible-primary-border-color-disabled)}:host([mode=dismissible]):host([disabled]) svg{cursor:not-allowed}:host([mode=dismissible]):host([disabled]) svg path{fill:var(--wcs-chip-dismissible-primary-color-disabled)}:host([mode=dismissible]):host([variant=secondary]){color:var(--wcs-chip-dismissible-secondary-color);background-color:var(--wcs-chip-dismissible-secondary-background-color);border:solid var(--wcs-chip-border-line-width) var(--wcs-chip-dismissible-secondary-border-color)}:host([mode=dismissible]):host([variant=secondary]) button{background:var(--wcs-chip-dismissible-secondary-button-background-color)}:host([mode=dismissible]):host([variant=secondary]) button:focus{outline:none}:host([mode=dismissible]):host([variant=secondary]) button:focus svg{outline:var(--wcs-chip-focus-outline-border-width) dashed var(--wcs-chip-dismissible-secondary-button-focus-outline-color);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-chip-dismissible-button-outline-radius)}:host([mode=dismissible]):host([variant=secondary]):host(:not([disabled])) button:hover{background-color:var(--wcs-chip-dismissible-secondary-button-background-color-hover);color:var(--wcs-chip-dismissible-secondary-button-color-hover)}:host([mode=dismissible]):host([variant=secondary]):host(:not([disabled])) button:active{background-color:var(--wcs-chip-dismissible-secondary-button-background-color-pressed);color:var(--wcs-chip-dismissible-secondary-button-color-pressed)}:host([mode=dismissible]):host([variant=secondary]):host([disabled]){color:var(--wcs-chip-dismissible-secondary-color-disabled);background-color:var(--wcs-chip-dismissible-secondary-background-color-disabled);border:solid var(--wcs-chip-border-line-width) var(--wcs-chip-dismissible-secondary-border-color-disabled)}:host([mode=dismissible]):host([variant=secondary]):host([disabled]) svg path{fill:var(--wcs-chip-dismissible-secondary-color-disabled)}";const a=r;const t=s(class s extends e{constructor(){super();this.__registerHost();this.__attachShadow();this.wcsChipSelectChange=o(this,"wcsChipSelectChange",7);this.wcsChipDismiss=o(this,"wcsChipDismiss",7);this.handleDismiss=s=>{if(this.disabled||this.mode!=="dismissible"){return}s.stopPropagation();this.dismiss()};this.value=undefined;this.label=undefined;this.selected=false;this.open=true;this.disabled=false;this.variant="primary";this.mode="selectable"}select(){this.selected=!this.selected;this.wcsChipSelectChange.emit({value:this.value,selected:this.selected})}dismiss(){this.open=false;this.wcsChipDismiss.emit({value:this.value});const s=this.findAdjacentActionableChip("next");if(s){this.focusChip(s)}else{const s=this.findAdjacentActionableChip("previous");if(s){this.focusChip(s)}}}findAdjacentActionableChip(s){const e=e=>s==="next"?e.nextElementSibling:e.previousElementSibling;let o=e(this.el);while(o){if(this.isActionableChip(o)){return o}o=e(o)}return null}isActionableChip(s){return s instanceof e&&s.tagName==="WCS-CHIP"&&!s.disabled}focusChip(s){var e,o;if(s.mode==="selectable"){s.focus()}else if(s.mode==="dismissible"){(o=(e=s.shadowRoot)===null||e===void 0?void 0:e.querySelector("button"))===null||o===void 0?void 0:o.focus()}}handleClick(){if(this.disabled||this.mode!=="selectable"){return}this.select()}handleKeydown(s){if(this.disabled){return}if(this.mode==="selectable"){if(s.key==="Enter"||s.key===" "){this.select()}}else if(this.mode==="dismissible"){if(s.key==="Delete"||s.key==="Backspace"){this.dismiss()}}}render(){const s={"aria-disabled":this.disabled?"true":null};if(this.mode==="selectable"){return c(i,Object.assign({},s,{role:"checkbox","aria-checked":this.selected?"true":"false",tabindex:this.disabled?-1:0,onClick:this.handleClick.bind(this),onKeyDown:this.handleKeydown.bind(this)}),this.selected&&c("svg",{class:"check-icon","aria-hidden":"true",width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},c("path",{d:"M23.712 8.3011L8.0292 23.7157C7.6356 24.095 6.9984 24.095 6.6264 23.7157L0.288 17.4955C-0.096 17.1226 -0.096 16.496 0.288 16.1192L2.1552 14.2739C2.5536 13.9036 3.1776 13.9036 3.5532 14.2739L6.6264 17.2764C6.9984 17.6583 7.6356 17.6583 8.0292 17.2764L20.4384 5.08081C20.8236 4.70662 21.4536 4.70662 21.8364 5.08081L23.712 6.91841C24.096 7.29516 24.096 7.91923 23.712 8.3011Z",fill:"white"})),c("span",null,this.label))}else{return c(i,Object.assign({},s),c("span",null,this.label),c("button",{"aria-label":`Supprimer ${this.label}`,disabled:this.disabled,onClick:this.handleDismiss.bind(this),onKeyDown:this.handleKeydown.bind(this)},c("svg",{class:"dismiss-icon","aria-hidden":"true",width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},c("path",{d:"M14.2656 12.0298L19.588 6.72176C20.1908 6.12119 20.1061 5.05213 19.5034 4.45043C18.9006 3.84986 17.914 3.84986 17.3112 4.45043L11.9887 9.7596L6.66743 4.45043C6.06351 3.84986 5.07691 3.84986 4.47412 4.45043C3.87132 5.05213 3.82843 6.07942 4.43122 6.68112L9.75365 11.9892L4.43122 17.2983C3.82843 17.8989 3.87132 18.9262 4.47412 19.5279C5.07691 20.1296 6.10527 20.1702 6.70807 19.5685L12.0305 14.2605L17.3112 19.5279C17.914 20.1296 18.9006 20.1296 19.5034 19.5279C20.1061 18.9262 20.149 17.8989 19.5462 17.2983L14.2656 12.0298Z",fill:"currentColor"}))))}}get el(){return this}static get style(){return a}},[1,"wcs-chip",{value:[1],label:[1],selected:[516],open:[516],disabled:[516],variant:[513],mode:[513]}]);function l(){if(typeof customElements==="undefined"){return}const s=["wcs-chip"];s.forEach((s=>{switch(s){case"wcs-chip":if(!customElements.get(s)){customElements.define(s,t)}break}}))}l();const d=t;const n=l;export{d as WcsChip,n as defineCustomElement};
 //# sourceMappingURL=wcs-chip.js.map

package/composite-elements/wcs-chip.js.map

@@ -1 +1 @@
-{"version":3,"names":["chipCss","WcsChipStyle0","Chip","proxyCustomElement","H","this","handleDismiss","event","disabled","mode","stopPropagation","dismiss","select","selected","wcsChipSelectChange","emit","value","open","wcsChipDismiss","focusNextChip","currentElement","el","nextElementSibling","isActionableChip","focusChip","element","HTMLElement","tagName","chip","focus","_b","_a","shadowRoot","querySelector","handleClick","handleKeydown","ev","key","render","commonProps","h","Host","Object","assign","role","tabindex","onClick","bind","onKeyDown","class","width","height","viewBox","fill","xmlns","d","label"],"sources":["src/components/chip/chip.scss?tag=wcs-chip&encapsulation=shadow","src/components/chip/chip.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    // #region CSS Variables\n    --wcs-chip-height: var(--wcs-semantic-size-s);\n    --wcs-chip-font-size: var(--wcs-semantic-font-size-base);\n    --wcs-chip-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-chip-focus-outline-border-width: var(--wcs-semantic-border-width-large);\n\n    --wcs-chip-padding-vertical: var(--wcs-semantic-spacing-base);\n    --wcs-chip-padding-horizontal: var(--wcs-semantic-spacing-base-150);\n    --wcs-chip-padding-horizontal-dismissible: var(--wcs-semantic-spacing-base);\n\n    --wcs-chip-selectable-background-color: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-chip-selectable-background-color-pressed: var(--wcs-semantic-color-background-action-secondary-press);\n    --wcs-chip-selectable-background-color-hover: var(--wcs-semantic-color-background-action-secondary-hover);\n    --wcs-chip-selectable-background-color-selected: var(--wcs-semantic-color-background-action-primary-default);\n    --wcs-chip-selectable-background-color-selected-hover: var(--wcs-semantic-color-background-action-primary-hover);\n    --wcs-chip-selectable-background-color-selected-pressed: var(--wcs-semantic-color-background-action-primary-press);\n    --wcs-chip-selectable-background-color-selected-disabled: var(--wcs-semantic-color-background-action-primary-disabled);\n\n    --wcs-chip-selectable-color: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-chip-selectable-color-hover: var(--wcs-semantic-color-foreground-action-secondary-hover);\n    --wcs-chip-selectable-color-pressed: var(--wcs-semantic-color-foreground-action-secondary-press);\n    --wcs-chip-selectable-color-disabled: var(--wcs-semantic-color-text-disabled);\n    --wcs-chip-selectable-color-selected: var(--wcs-semantic-color-foreground-action-primary-default);\n    --wcs-chip-selectable-color-selected-hover: var(--wcs-semantic-color-foreground-action-primary-hover);\n    --wcs-chip-selectable-color-selected-pressed: var(--wcs-semantic-color-foreground-action-primary-press);\n\n    --wcs-chip-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-chip-border-line-width: var(--wcs-semantic-border-width-default);\n    --wcs-chip-selectable-border-color: var(--wcs-semantic-color-border-action-secondary-default);\n    --wcs-chip-selectable-border-color-hover: var(--wcs-semantic-color-border-control-indicator-hover);\n    --wcs-chip-selectable-border-color-pressed: var(--wcs-semantic-color-border-action-secondary-press);\n    --wcs-chip-selectable-border-color-disabled: var(--wcs-semantic-color-border-action-secondary-disabled);\n\n    --wcs-chip-selectable-content-gap: var(--wcs-semantic-spacing-base);\n    --wcs-chip-selectable-focus-outline-color: var(--wcs-semantic-color-border-focus-base);\n\n    --wcs-chip-dismissible-content-gap: var(--wcs-semantic-spacing-base-05);\n    --wcs-chip-dismissible-padding-right: var(--wcs-semantic-spacing-base-05);\n    --wcs-chip-dismissible-button-outline-radius: var(--wcs-semantic-border-radius-full);\n\n    --wcs-chip-dismissible-primary-focus-outline-color: var(--wcs-semantic-color-border-focus-base-on-secondary);\n    --wcs-chip-dismissible-primary-border-color: var(--wcs-semantic-color-background-action-primary-default);\n    --wcs-chip-dismissible-primary-border-color-disabled: var(--wcs-semantic-color-background-action-primary-disabled);\n    --wcs-chip-dismissible-primary-color: var(--wcs-semantic-color-foreground-action-primary-default);\n    --wcs-chip-dismissible-primary-color-hover: var(--wcs-semantic-color-foreground-action-primary-hover);\n    --wcs-chip-dismissible-primary-color-pressed: var(--wcs-semantic-color-foreground-action-primary-press);\n    --wcs-chip-dismissible-primary-color-disabled: var(--wcs-semantic-color-text-disabled);\n    --wcs-chip-dismissible-primary-background-color: var(--wcs-semantic-color-background-action-primary-default);\n    --wcs-chip-dismissible-primary-background-color-hover: var(--wcs-semantic-color-background-action-primary-hover);\n    --wcs-chip-dismissible-primary-background-color-pressed: var(--wcs-semantic-color-background-action-primary-press);\n    --wcs-chip-dismissible-primary-background-color-disabled: var(--wcs-semantic-color-background-action-primary-disabled);\n\n    --wcs-chip-dismissible-secondary-button-focus-outline-color: var(--wcs-semantic-color-border-focus-base);\n    --wcs-chip-dismissible-secondary-border-color: var(--wcs-semantic-color-border-action-secondary-default);\n    --wcs-chip-dismissible-secondary-border-color-disabled: var(--wcs-semantic-color-border-action-secondary-disabled);\n    --wcs-chip-dismissible-secondary-color: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-chip-dismissible-secondary-color-disabled: var(--wcs-semantic-color-foreground-disabled);\n    --wcs-chip-dismissible-secondary-background-color: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-chip-dismissible-secondary-button-background-color: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-chip-dismissible-secondary-button-background-color-hover: var(--wcs-semantic-color-background-surface-accent-lighter);\n    --wcs-chip-dismissible-secondary-button-background-color-pressed: var(--wcs-semantic-color-background-surface-accent-light);\n    --wcs-chip-dismissible-secondary-button-background-color-disabled: var(--wcs-semantic-color-background-action-secondary-disabled);\n\n    // #endregion\n\n    display: inline-flex;\n    // we set a 100% line-height to center the children text vertically\n    align-items: center;\n    // Prevents extra space below the line caused by baseline alignment of inline-flex elements when a component contains an inline SVG\n    vertical-align: middle;\n    overflow: hidden;\n    box-sizing: border-box;\n    height: var(--wcs-chip-height);\n    border-radius: var(--wcs-chip-border-radius);\n    font-size: var(--wcs-chip-font-size);\n    font-weight: var(--wcs-chip-font-weight);\n\n    // Default styles (selectable, not selected, not disabled)\n    padding: var(--wcs-chip-padding-vertical) var(--wcs-chip-padding-horizontal);\n    cursor: pointer;\n    user-select: none;\n\n    transition-property: color, background-color;\n    transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n    transition-timing-function: ease-out;\n}\n\n// SELECTABLE MODE\n:host([mode=selectable]) {\n    gap: var(--wcs-chip-selectable-content-gap);\n    border: solid var(--wcs-chip-border-line-width) var(--wcs-chip-selectable-border-color);\n    background-color: var(--wcs-chip-selectable-background-color);\n    color: var(--wcs-chip-selectable-color);\n\n    &:host(:focus-visible) {\n        @include focus-outline(\n            $outline-color: var(--wcs-chip-selectable-focus-outline-color),\n            $border-radius: var(--wcs-chip-border-radius),\n            $border-width: var(--wcs-chip-focus-outline-border-width)\n        );\n    }\n\n    &:host(:not([disabled])) {\n        &:host(:not([selected])) {\n            &:host(:hover) {\n                background-color: var(--wcs-chip-selectable-background-color-hover);\n                color: var(--wcs-chip-selectable-color-hover);\n                border-color: var(--wcs-chip-selectable-border-color-hover);\n            }\n\n            &:host(:active) {\n                background-color: var(--wcs-chip-selectable-background-color-pressed);\n                color: var(--wcs-chip-selectable-color-pressed);\n                border-color: var(--wcs-chip-selectable-border-color-pressed);\n            }\n        }\n\n        &:host([selected]) {\n            color: var(--wcs-chip-selectable-color-selected);\n            background-color: var(--wcs-chip-selectable-background-color-selected);\n            border-color: transparent;\n\n            svg path {\n                fill: var(--wcs-chip-selectable-color-selected);\n                // todo: check this issue with designers\n                // We optically lift the check icon a bit to center it better\n                transform: translateY(-1.5px);\n            }\n\n            &:host(:hover) {\n                background-color: var(--wcs-chip-selectable-background-color-selected-hover);\n                color: var(--wcs-chip-selectable-color-selected-hover);\n\n                svg path {\n                    fill: var(--wcs-chip-selectable-color-selected-hover);\n                }\n            }\n\n            &:host(:active) {\n                background-color: var(--wcs-chip-selectable-background-color-selected-pressed);\n                color: var(--wcs-chip-selectable-color-selected-pressed);\n\n                svg path {\n                    fill: var(--wcs-chip-selectable-color-selected-pressed);\n                }\n            }\n        }\n    }\n\n    &:host([disabled]) {\n        color: var(--wcs-chip-selectable-color-disabled);\n        cursor: not-allowed;\n\n        svg {\n            path {\n                fill: var(--wcs-chip-selectable-color-disabled);\n            }\n        }\n\n        &:host(:not([selected])) {\n            border-color: var(--wcs-chip-selectable-border-color-disabled);\n        }\n\n        &:host([selected]) {\n            background-color: var(--wcs-chip-selectable-background-color-selected-disabled);\n            border: 0;\n        }\n    }\n}\n\n// DISMISSIBLE MODE\n:host([mode=dismissible]) {\n    cursor: initial;\n    border: solid var(--wcs-chip-border-line-width) var(--wcs-chip-dismissible-primary-border-color);\n    color: var(--wcs-chip-dismissible-primary-color);\n    background-color: var(--wcs-chip-dismissible-primary-background-color);\n    gap: var(--wcs-chip-dismissible-content-gap);\n    padding-right: var(--wcs-chip-dismissible-padding-right);\n\n    button {\n        background: transparent;\n        border: none;\n        margin: 0;\n        padding: 0;\n        border-radius: var(--wcs-semantic-border-radius-full);\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        color: inherit;\n        width: var(--wcs-semantic-size-xs);\n        height: var(--wcs-semantic-size-xs);\n\n        &:focus {\n            outline: none;\n\n            svg {\n                @include focus-outline(\n                    $outline-color: var(--wcs-chip-dismissible-primary-focus-outline-color),\n                    $border-radius: var(--wcs-chip-dismissible-button-outline-radius),\n                    $border-width: var(--wcs-chip-focus-outline-border-width)\n                );\n            }\n        }\n    }\n\n    &:host(:not([open])) {\n        display: none;\n        margin: 0;\n    }\n\n    &:host(:not([disabled])) {\n        button:hover {\n            background-color: var(--wcs-chip-dismissible-primary-background-color-hover);\n            color: var(--wcs-chip-dismissible-primary-color-hover);\n        }\n\n        button:active {\n            background-color: var(--wcs-chip-dismissible-primary-background-color-pressed);\n            color: var(--wcs-chip-dismissible-primary-color-pressed);\n        }\n    }\n\n    &:host([disabled]) {\n        color: var(--wcs-chip-dismissible-primary-color-disabled);\n        background-color: var(--wcs-chip-dismissible-primary-background-color-disabled);\n        cursor: not-allowed;\n        border: solid var(--wcs-chip-border-line-width) var(--wcs-chip-dismissible-primary-border-color-disabled);\n\n        svg {\n            cursor: not-allowed;\n\n            path {\n                fill: var(--wcs-chip-dismissible-primary-color-disabled);\n            }\n        }\n    }\n\n    // secondary override (colors only), based on the code above for the primary variant\n    &:host([variant=secondary]) {\n        color: var(--wcs-chip-dismissible-secondary-color);\n        background-color: var(--wcs-chip-dismissible-secondary-background-color);\n        border: solid var(--wcs-chip-border-line-width) var(--wcs-chip-dismissible-secondary-border-color);\n\n        button {\n            background: var(--wcs-chip-dismissible-secondary-button-background-color);\n\n            &:focus {\n                outline: none;\n\n                svg {\n                    @include focus-outline(\n                        $outline-color: var(--wcs-chip-dismissible-secondary-button-focus-outline-color),\n                        $border-radius: var(--wcs-chip-dismissible-button-outline-radius),\n                        $border-width: var(--wcs-chip-focus-outline-border-width)\n                    );\n                }\n            }\n        }\n\n        &:host(:not([disabled])) {\n            button:hover {\n                background-color: var(--wcs-chip-dismissible-secondary-button-background-color-hover);\n                color: var(--wcs-chip-dismissible-secondary-button-color-hover);\n            }\n\n            button:active {\n                background-color: var(--wcs-chip-dismissible-secondary-button-background-color-pressed);\n                color: var(--wcs-chip-dismissible-secondary-button-color-pressed);\n            }\n        }\n\n        &:host([disabled]) {\n            color: var(--wcs-chip-dismissible-secondary-color-disabled);\n            background-color: var(--wcs-chip-dismissible-secondary-background-color-disabled);\n            border: solid var(--wcs-chip-border-line-width) var(--wcs-chip-dismissible-secondary-border-color-disabled);\n\n            svg {\n                path {\n                    fill: var(--wcs-chip-dismissible-secondary-color-disabled);\n                }\n            }\n        }\n    }\n}\n","import { Component, ComponentInterface, EventEmitter, Prop, Event, Element, Host, h } from '@stencil/core';\nimport { WcsChipMode, WcsChipVariant } from './chip-interface';\n\n/**\n * The chip component is a small, interactive element that can be used to represent an input, filter, or tag.\n * It can be in one of two modes: 'selectable' or 'dismissible'.\n * - In 'selectable' mode, the chip can be selected or deselected, and emits an event when clicked.\n * - In 'dismissible' mode, the chip can be dismissed (removed) by clicking a dismiss icon, and emits an event when the dismiss icon is clicked.\n *\n * @cssprop --wcs-chip-height - Height of the chip\n * @cssprop --wcs-chip-font-size - Font size of the chip text\n * @cssprop --wcs-chip-font-weight - Font weight of the chip text\n *\n * @cssprop --wcs-chip-focus-outline-border-width - Border width of the chip focus outline\n *\n * @cssprop --wcs-chip-padding-vertical - Vertical padding (top - bottom) of the chip\n * @cssprop --wcs-chip-padding-horizontal - Horizontal padding (left - right) of the chip\n * @cssprop --wcs-chip-padding-horizontal-dismissible - Horizontal padding (left - right) of the chip with 'dismissible' mode\n *\n * @cssprop --wcs-chip-selectable-background-color - Background color of the chip with 'selectable' mode in default state\n * @cssprop --wcs-chip-selectable-background-color-pressed - Background color of the chip with 'selectable' mode when pressed\n * @cssprop --wcs-chip-selectable-background-color-hover - Background color of the chip with 'selectable' mode when hovered\n * @cssprop --wcs-chip-selectable-background-color-selected - Background color of the chip with 'selectable' mode when selected\n * @cssprop --wcs-chip-selectable-background-color-selected-hover - Background color of the chip with 'selectable' mode when selected and hovered\n * @cssprop --wcs-chip-selectable-background-color-selected-pressed - Background color of the chip with 'selectable' mode when selected and pressed\n * @cssprop --wcs-chip-selectable-background-color-selected-disabled - Background color of the chip with 'selectable' mode when selected and disabled\n *\n * @cssprop --wcs-chip-selectable-color - Text color of the chip with 'selectable' mode in default state\n * @cssprop --wcs-chip-selectable-color-hover - Text color of the chip with 'selectable' mode when hovered\n * @cssprop --wcs-chip-selectable-color-pressed - Text color of the chip with 'selectable' mode when pressed\n * @cssprop --wcs-chip-selectable-color-disabled - Text color of the chip with 'selectable' mode when disabled\n * @cssprop --wcs-chip-selectable-color-selected - Text color of the chip with 'selectable' mode when selected\n * @cssprop --wcs-chip-selectable-color-selected-hover - Text color of the chip with 'selectable' mode when selected and hovered\n * @cssprop --wcs-chip-selectable-color-selected-pressed - Text color of the chip with 'selectable' mode when selected and pressed\n *\n * @cssprop --wcs-chip-border-radius - Border radius of the chip\n * @cssprop --wcs-chip-border-line-width - Border line width of the chip\n * @cssprop --wcs-chip-selectable-border-color - Border color of the chip with 'selectable' mode in default state\n * @cssprop --wcs-chip-selectable-border-color-hover - Border color of the chip with 'selectable' mode when hovered\n * @cssprop --wcs-chip-selectable-border-color-pressed - Border color of the chip with 'selectable' mode when pressed\n * @cssprop --wcs-chip-selectable-border-color-disabled - Border color of the chip with 'selectable' mode when disabled\n *\n * @cssprop --wcs-chip-selectable-content-gap - Gap between content elements in chip with 'selectable' mode\n * @cssprop --wcs-chip-selectable-focus-outline-color - Focus outline color of the chip with 'selectable' mode\n *\n * @cssprop --wcs-chip-dismissible-content-gap - Gap between content elements in chip with 'dismissible' mode\n * @cssprop --wcs-chip-dismissible-padding-right - Right padding of the chip with 'dismissible' mode\n * @cssprop --wcs-chip-dismissible-button-outline-radius - Outline radius of the button for the chip with 'dismissible' mode\n *\n * @cssprop --wcs-chip-dismissible-primary-focus-outline-color - Focus outline color of the chip with 'dismissible' mode and 'primary' variant\n * @cssprop --wcs-chip-dismissible-primary-border-color - Border color of the chip with 'dismissible' mode and 'primary' variant\n * @cssprop --wcs-chip-dismissible-primary-border-color-disabled - Border color of the chip with 'dismissible' mode and 'primary' variant when disabled\n * @cssprop --wcs-chip-dismissible-primary-color - Text color of the chip with 'dismissible' mode and 'primary' variant\n * @cssprop --wcs-chip-dismissible-primary-color-hover - Text color of the chip with 'dismissible' mode and 'primary' variant when hovered\n * @cssprop --wcs-chip-dismissible-primary-color-pressed - Text color of the chip with 'dismissible' mode and 'primary' variant when pressed\n * @cssprop --wcs-chip-dismissible-primary-color-disabled - Text color of the chip with 'dismissible' mode and 'primary' variant when disabled\n * @cssprop --wcs-chip-dismissible-primary-background-color - Background color of the chip with 'dismissible' mode and 'primary' variant\n * @cssprop --wcs-chip-dismissible-primary-background-color-hover - Background color of the chip with 'dismissible' mode and 'primary' variant when hovered\n * @cssprop --wcs-chip-dismissible-primary-background-color-pressed - Background color of the chip with 'dismissible' mode and 'primary' variant when pressed\n * @cssprop --wcs-chip-dismissible-primary-background-color-disabled - Background color of the chip with 'dismissible' mode and 'primary' variant when disabled\n *\n * @cssprop --wcs-chip-dismissible-secondary-button-focus-outline-color - Button focus outline color of the chip with 'dismissible' mode and 'secondary' variant\n * @cssprop --wcs-chip-dismissible-secondary-border-color - Border color of the chip with 'dismissible' mode and 'secondary' variant\n * @cssprop --wcs-chip-dismissible-secondary-border-color-disabled - Border color of the chip with 'dismissible' mode and 'secondary' variant when disabled\n * @cssprop --wcs-chip-dismissible-secondary-color - Text color of the chip with 'dismissible' mode and 'secondary' variant\n * @cssprop --wcs-chip-dismissible-secondary-color-disabled - Text color of the chip with 'dismissible' mode and 'secondary' variant when disabled\n * @cssprop --wcs-chip-dismissible-secondary-background-color - Background color of the chip with 'dismissible' mode and 'secondary' variant\n * @cssprop --wcs-chip-dismissible-secondary-button-background-color - Button background color of the chip with 'dismissible' mode and 'secondary' variant\n * @cssprop --wcs-chip-dismissible-secondary-button-background-color-hover - Button background color of the chip with 'dismissible' mode and 'secondary' variant when hovered\n * @cssprop --wcs-chip-dismissible-secondary-button-background-color-pressed - Button background color of the chip with 'dismissible' mode and 'secondary' variant when pressed\n * @cssprop --wcs-chip-dismissible-secondary-button-background-color-disabled - Button background color of the chip with 'dismissible' mode and 'secondary' variant when disabled\n */\n@Component({\n    tag: 'wcs-chip',\n    styleUrl: 'chip.scss',\n    shadow: true\n})\nexport class Chip implements ComponentInterface {\n    @Element() el!: HTMLWcsChipElement;\n    /**\n     * Unique value representing the chip identifier in events.\n     */\n    @Prop() value: string;\n\n    /**\n     * Text label displayed on the chip.\n     */\n    @Prop() label: string;\n\n    /**\n     * If `true`, the chip is selected.\n     * This property is only used in 'selectable' mode.\n     */\n    @Prop({ reflect: true }) selected = false;\n\n    /**\n     * If `true`, the chip is open.\n     * This property is used to control the visibility of the chip in the dismissible mode.\n     * When the user clicks the dismiss icon, this property automatically becomes `false`, hiding the chip.\n     */\n    @Prop({ reflect: true }) open = true;\n\n    /**\n     * If `true`, the chip is disabled.\n     * The chip will not respond to click events and will not emit any events.\n     * This property is used in both 'selectable' and 'dismissible' modes.\n     */\n    @Prop({ reflect: true }) disabled = false;\n\n    /**\n     * Defines the visual style of the chip for the dismissible mode.\n     */\n    @Prop({ reflect: true }) variant: WcsChipVariant = 'primary';\n\n    /**\n     * Defines the mode of the chip.\n     * Can be 'selectable' or 'dismissible'.\n     * - 'selectable': The chip can be selected and emits an event when clicked.\n     * - 'dismissible': The chip can be dismissed (removed) and emits an event when the dismiss icon is clicked.\n     */\n    @Prop({ reflect: true }) mode: WcsChipMode = 'selectable';\n\n    /**\n     * Emitted when the chip is clicked in 'selectable' mode.\n     */\n    @Event() wcsChipSelectChange: EventEmitter<{ value: string; selected: boolean }>;\n\n    /**\n     * Emitted when the dismiss icon is clicked in 'dismissible' mode.\n     */\n    @Event() wcsChipDismiss: EventEmitter<{ value: string }>;\n\n\n    private select() {\n        this.selected = !this.selected; // Toggle the selected state\n        this.wcsChipSelectChange.emit({ value: this.value, selected: this.selected });\n    }\n\n    private dismiss() {\n        this.open = false;\n        this.wcsChipDismiss.emit({ value: this.value });\n        this.focusNextChip();\n    }\n\n    private focusNextChip(): void {\n        let currentElement = this.el.nextElementSibling;\n\n        while (currentElement) {\n            if (this.isActionableChip(currentElement)) {\n                this.focusChip(currentElement as HTMLWcsChipElement);\n                return;\n            }\n            currentElement = currentElement.nextElementSibling;\n        }\n    }\n\n    private isActionableChip(element: Element | null): element is HTMLWcsChipElement {\n        return element instanceof HTMLElement\n            && element.tagName === 'WCS-CHIP'\n            && !(element as HTMLWcsChipElement).disabled;\n    }\n\n    private focusChip(chip: HTMLWcsChipElement): void {\n        if (chip.mode === 'selectable') {\n            chip.focus();\n        } else if (chip.mode === 'dismissible') {\n            chip.shadowRoot?.querySelector('button')?.focus();\n        }\n    }\n\n    private handleClick() {\n        if (this.disabled || this.mode !== 'selectable') {\n            return;\n        }\n        this.select();\n    };\n\n    private handleDismiss = (event: Event) => {\n        if (this.disabled || this.mode !== 'dismissible') {\n            return;\n        }\n        event.stopPropagation(); // Prevent the click event from bubbling up to the chip click handler\n        this.dismiss();\n    };\n\n    private handleKeydown(ev) {\n        if (this.disabled) {\n            return;\n        }\n        if (this.mode === 'selectable') {\n            if (ev.key === 'Enter' || ev.key === ' ') {\n                this.select();\n            }\n        } else if (this.mode === 'dismissible') {\n            if (ev.key === 'Delete' || ev.key === 'Backspace') {\n                this.dismiss();\n            }\n        }\n    }\n\n    render() {\n        const commonProps = {\n            'aria-disabled': this.disabled ? 'true' : null\n        };\n\n        if (this.mode === 'selectable') {\n            return (\n                <Host\n                    {...commonProps}\n                    role=\"checkbox\"\n                    aria-checked={this.selected ? 'true' : 'false'}\n                    tabindex={this.disabled ? -1 : 0}\n                    onClick={this.handleClick.bind(this)}\n                    onKeyDown={this.handleKeydown.bind(this)}\n                >\n                    {this.selected && (\n                        <svg class=\"check-icon\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\"\n                             fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                                d=\"M23.712 8.3011L8.0292 23.7157C7.6356 24.095 6.9984 24.095 6.6264 23.7157L0.288 17.4955C-0.096 17.1226 -0.096 16.496 0.288 16.1192L2.1552 14.2739C2.5536 13.9036 3.1776 13.9036 3.5532 14.2739L6.6264 17.2764C6.9984 17.6583 7.6356 17.6583 8.0292 17.2764L20.4384 5.08081C20.8236 4.70662 21.4536 4.70662 21.8364 5.08081L23.712 6.91841C24.096 7.29516 24.096 7.91923 23.712 8.3011Z\"\n                                fill=\"white\" />\n                        </svg>\n                    )}\n                    <span>{this.label}</span>\n                </Host>\n            );\n        } else {\n            return (\n                <Host\n                    {...commonProps}\n                >\n                    <span>{this.label}</span>\n                    <button\n                        aria-label={`Supprimer ${this.label}`}\n                        disabled={this.disabled}\n                        onClick={this.handleDismiss.bind(this)}\n                        onKeyDown={this.handleKeydown.bind(this)}\n                    >\n                        <svg class=\"dismiss-icon\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\"\n                             fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                                d=\"M14.2656 12.0298L19.588 6.72176C20.1908 6.12119 20.1061 5.05213 19.5034 4.45043C18.9006 3.84986 17.914 3.84986 17.3112 4.45043L11.9887 9.7596L6.66743 4.45043C6.06351 3.84986 5.07691 3.84986 4.47412 4.45043C3.87132 5.05213 3.82843 6.07942 4.43122 6.68112L9.75365 11.9892L4.43122 17.2983C3.82843 17.8989 3.87132 18.9262 4.47412 19.5279C5.07691 20.1296 6.10527 20.1702 6.70807 19.5685L12.0305 14.2605L17.3112 19.5279C17.914 20.1296 18.9006 20.1296 19.5034 19.5279C20.1061 18.9262 20.149 17.8989 19.5462 17.2983L14.2656 12.0298Z\"\n                                fill=\"currentColor\" />\n                        </svg>\n                    </button>\n                </Host>\n            );\n        }\n    }\n}\n\n"],"mappings":"gEAAA,MAAMA,EAAU,m/WAChB,MAAAC,EAAeD,E,MC4EFE,EAAIC,EAAA,MAAAD,UAAAE,E,0KAoGLC,KAAAC,cAAiBC,IACrB,GAAIF,KAAKG,UAAYH,KAAKI,OAAS,cAAe,CAC9C,M,CAEJF,EAAMG,kBACNL,KAAKM,SAAS,E,wDAzFkB,M,UAOJ,K,cAOI,M,aAKe,U,UAQN,Y,CAarC,MAAAC,GACJP,KAAKQ,UAAYR,KAAKQ,SACtBR,KAAKS,oBAAoBC,KAAK,CAAEC,MAAOX,KAAKW,MAAOH,SAAUR,KAAKQ,U,CAG9D,OAAAF,GACJN,KAAKY,KAAO,MACZZ,KAAKa,eAAeH,KAAK,CAAEC,MAAOX,KAAKW,QACvCX,KAAKc,e,CAGD,aAAAA,GACJ,IAAIC,EAAiBf,KAAKgB,GAAGC,mBAE7B,MAAOF,EAAgB,CACnB,GAAIf,KAAKkB,iBAAiBH,GAAiB,CACvCf,KAAKmB,UAAUJ,GACf,M,CAEJA,EAAiBA,EAAeE,kB,EAIhC,gBAAAC,CAAiBE,GACrB,OAAOA,aAAmBC,GACnBD,EAAQE,UAAY,aAClBF,EAA+BjB,Q,CAGpC,SAAAgB,CAAUI,G,QACd,GAAIA,EAAKnB,OAAS,aAAc,CAC5BmB,EAAKC,O,MACF,GAAID,EAAKnB,OAAS,cAAe,EACpCqB,GAAAC,EAAAH,EAAKI,cAAU,MAAAD,SAAA,SAAAA,EAAEE,cAAc,aAAS,MAAAH,SAAA,SAAAA,EAAED,O,EAI1C,WAAAK,GACJ,GAAI7B,KAAKG,UAAYH,KAAKI,OAAS,aAAc,CAC7C,M,CAEJJ,KAAKO,Q,CAWD,aAAAuB,CAAcC,GAClB,GAAI/B,KAAKG,SAAU,CACf,M,CAEJ,GAAIH,KAAKI,OAAS,aAAc,CAC5B,GAAI2B,EAAGC,MAAQ,SAAWD,EAAGC,MAAQ,IAAK,CACtChC,KAAKO,Q,OAEN,GAAIP,KAAKI,OAAS,cAAe,CACpC,GAAI2B,EAAGC,MAAQ,UAAYD,EAAGC,MAAQ,YAAa,CAC/ChC,KAAKM,S,GAKjB,MAAA2B,GACI,MAAMC,EAAc,CAChB,gBAAiBlC,KAAKG,SAAW,OAAS,MAG9C,GAAIH,KAAKI,OAAS,aAAc,CAC5B,OACI+B,EAACC,EAAIC,OAAAC,OAAA,GACGJ,EAAW,CACfK,KAAK,WAAU,eACDvC,KAAKQ,SAAW,OAAS,QACvCgC,SAAUxC,KAAKG,UAAY,EAAI,EAC/BsC,QAASzC,KAAK6B,YAAYa,KAAK1C,MAC/B2C,UAAW3C,KAAK8B,cAAcY,KAAK1C,QAElCA,KAAKQ,UACF2B,EAAA,OAAKS,MAAM,aAAY,cAAa,OAAOC,MAAM,KAAKC,OAAO,KAAKC,QAAQ,YACrEC,KAAK,OAAOC,MAAM,8BACnBd,EAAA,QACIe,EAAE,wXACFF,KAAK,WAGjBb,EAAA,YAAOnC,KAAKmD,O,KAGjB,CACH,OACIhB,EAACC,EAAIC,OAAAC,OAAA,GACGJ,GAEJC,EAAA,YAAOnC,KAAKmD,OACZhB,EAAA,uBACgB,aAAanC,KAAKmD,QAC9BhD,SAAUH,KAAKG,SACfsC,QAASzC,KAAKC,cAAcyC,KAAK1C,MACjC2C,UAAW3C,KAAK8B,cAAcY,KAAK1C,OAEnCmC,EAAA,OAAKS,MAAM,eAAc,cAAa,OAAOC,MAAM,KAAKC,OAAO,KAAKC,QAAQ,YACvEC,KAAK,OAAOC,MAAM,8BACnBd,EAAA,QACIe,EAAE,+gBACFF,KAAK,mB"}
+{"version":3,"names":["chipCss","WcsChipStyle0","Chip","proxyCustomElement","H","this","handleDismiss","event","disabled","mode","stopPropagation","dismiss","select","selected","wcsChipSelectChange","emit","value","open","wcsChipDismiss","nextChip","findAdjacentActionableChip","focusChip","previousChip","direction","getSibling","el","nextElementSibling","previousElementSibling","currentElement","isActionableChip","element","HTMLElement","tagName","chip","focus","_b","_a","shadowRoot","querySelector","handleClick","handleKeydown","ev","key","render","commonProps","h","Host","Object","assign","role","tabindex","onClick","bind","onKeyDown","class","width","height","viewBox","fill","xmlns","d","label"],"sources":["src/components/chip/chip.scss?tag=wcs-chip&encapsulation=shadow","src/components/chip/chip.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    // #region CSS Variables\n    --wcs-chip-height: var(--wcs-semantic-size-s);\n    --wcs-chip-font-size: var(--wcs-semantic-font-size-base);\n    --wcs-chip-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-chip-focus-outline-border-width: var(--wcs-semantic-border-width-large);\n\n    --wcs-chip-padding-vertical: var(--wcs-semantic-spacing-base);\n    --wcs-chip-padding-horizontal: var(--wcs-semantic-spacing-base-150);\n    --wcs-chip-padding-horizontal-dismissible: var(--wcs-semantic-spacing-base);\n\n    --wcs-chip-selectable-background-color: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-chip-selectable-background-color-pressed: var(--wcs-semantic-color-background-action-secondary-press);\n    --wcs-chip-selectable-background-color-hover: var(--wcs-semantic-color-background-action-secondary-hover);\n    --wcs-chip-selectable-background-color-selected: var(--wcs-semantic-color-background-action-primary-default);\n    --wcs-chip-selectable-background-color-selected-hover: var(--wcs-semantic-color-background-action-primary-hover);\n    --wcs-chip-selectable-background-color-selected-pressed: var(--wcs-semantic-color-background-action-primary-press);\n    --wcs-chip-selectable-background-color-selected-disabled: var(--wcs-semantic-color-background-action-primary-disabled);\n\n    --wcs-chip-selectable-color: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-chip-selectable-color-hover: var(--wcs-semantic-color-foreground-action-secondary-hover);\n    --wcs-chip-selectable-color-pressed: var(--wcs-semantic-color-foreground-action-secondary-press);\n    --wcs-chip-selectable-color-disabled: var(--wcs-semantic-color-text-disabled);\n    --wcs-chip-selectable-color-selected: var(--wcs-semantic-color-foreground-action-primary-default);\n    --wcs-chip-selectable-color-selected-hover: var(--wcs-semantic-color-foreground-action-primary-hover);\n    --wcs-chip-selectable-color-selected-pressed: var(--wcs-semantic-color-foreground-action-primary-press);\n\n    --wcs-chip-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-chip-border-line-width: var(--wcs-semantic-border-width-default);\n    --wcs-chip-selectable-border-color: var(--wcs-semantic-color-border-action-secondary-default);\n    --wcs-chip-selectable-border-color-hover: var(--wcs-semantic-color-border-control-indicator-hover);\n    --wcs-chip-selectable-border-color-pressed: var(--wcs-semantic-color-border-action-secondary-press);\n    --wcs-chip-selectable-border-color-disabled: var(--wcs-semantic-color-border-action-secondary-disabled);\n\n    --wcs-chip-selectable-content-gap: var(--wcs-semantic-spacing-base);\n    --wcs-chip-selectable-focus-outline-color: var(--wcs-semantic-color-border-focus-base);\n\n    --wcs-chip-dismissible-content-gap: var(--wcs-semantic-spacing-base-05);\n    --wcs-chip-dismissible-padding-right: var(--wcs-semantic-spacing-base-05);\n    --wcs-chip-dismissible-button-outline-radius: var(--wcs-semantic-border-radius-full);\n\n    --wcs-chip-dismissible-primary-focus-outline-color: var(--wcs-semantic-color-border-focus-base-on-secondary);\n    --wcs-chip-dismissible-primary-border-color: var(--wcs-semantic-color-background-action-primary-default);\n    --wcs-chip-dismissible-primary-border-color-disabled: var(--wcs-semantic-color-background-action-primary-disabled);\n    --wcs-chip-dismissible-primary-color: var(--wcs-semantic-color-foreground-action-primary-default);\n    --wcs-chip-dismissible-primary-color-hover: var(--wcs-semantic-color-foreground-action-primary-hover);\n    --wcs-chip-dismissible-primary-color-pressed: var(--wcs-semantic-color-foreground-action-primary-press);\n    --wcs-chip-dismissible-primary-color-disabled: var(--wcs-semantic-color-text-disabled);\n    --wcs-chip-dismissible-primary-background-color: var(--wcs-semantic-color-background-action-primary-default);\n    --wcs-chip-dismissible-primary-background-color-hover: var(--wcs-semantic-color-background-action-primary-hover);\n    --wcs-chip-dismissible-primary-background-color-pressed: var(--wcs-semantic-color-background-action-primary-press);\n    --wcs-chip-dismissible-primary-background-color-disabled: var(--wcs-semantic-color-background-action-primary-disabled);\n\n    --wcs-chip-dismissible-secondary-button-focus-outline-color: var(--wcs-semantic-color-border-focus-base);\n    --wcs-chip-dismissible-secondary-border-color: var(--wcs-semantic-color-border-action-secondary-default);\n    --wcs-chip-dismissible-secondary-border-color-disabled: var(--wcs-semantic-color-border-action-secondary-disabled);\n    --wcs-chip-dismissible-secondary-color: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-chip-dismissible-secondary-color-disabled: var(--wcs-semantic-color-foreground-disabled);\n    --wcs-chip-dismissible-secondary-background-color: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-chip-dismissible-secondary-button-background-color: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-chip-dismissible-secondary-button-background-color-hover: var(--wcs-semantic-color-background-surface-accent-lighter);\n    --wcs-chip-dismissible-secondary-button-background-color-pressed: var(--wcs-semantic-color-background-surface-accent-light);\n    --wcs-chip-dismissible-secondary-button-background-color-disabled: var(--wcs-semantic-color-background-action-secondary-disabled);\n\n    // #endregion\n\n    display: inline-flex;\n    // we set a 100% line-height to center the children text vertically\n    align-items: center;\n    // Prevents extra space below the line caused by baseline alignment of inline-flex elements when a component contains an inline SVG\n    vertical-align: middle;\n    overflow: hidden;\n    box-sizing: border-box;\n    height: var(--wcs-chip-height);\n    border-radius: var(--wcs-chip-border-radius);\n    font-size: var(--wcs-chip-font-size);\n    font-weight: var(--wcs-chip-font-weight);\n\n    // Default styles (selectable, not selected, not disabled)\n    padding: var(--wcs-chip-padding-vertical) var(--wcs-chip-padding-horizontal);\n    cursor: pointer;\n    user-select: none;\n\n    transition-property: color, background-color;\n    transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n    transition-timing-function: ease-out;\n}\n\n// SELECTABLE MODE\n:host([mode=selectable]) {\n    gap: var(--wcs-chip-selectable-content-gap);\n    border: solid var(--wcs-chip-border-line-width) var(--wcs-chip-selectable-border-color);\n    background-color: var(--wcs-chip-selectable-background-color);\n    color: var(--wcs-chip-selectable-color);\n\n    &:host(:focus-visible) {\n        @include focus-outline(\n            $outline-color: var(--wcs-chip-selectable-focus-outline-color),\n            $border-radius: var(--wcs-chip-border-radius),\n            $border-width: var(--wcs-chip-focus-outline-border-width)\n        );\n    }\n\n    &:host(:not([disabled])) {\n        &:host(:not([selected])) {\n            &:host(:hover) {\n                background-color: var(--wcs-chip-selectable-background-color-hover);\n                color: var(--wcs-chip-selectable-color-hover);\n                border-color: var(--wcs-chip-selectable-border-color-hover);\n            }\n\n            &:host(:active) {\n                background-color: var(--wcs-chip-selectable-background-color-pressed);\n                color: var(--wcs-chip-selectable-color-pressed);\n                border-color: var(--wcs-chip-selectable-border-color-pressed);\n            }\n        }\n\n        &:host([selected]) {\n            color: var(--wcs-chip-selectable-color-selected);\n            background-color: var(--wcs-chip-selectable-background-color-selected);\n            border-color: transparent;\n\n            svg path {\n                fill: var(--wcs-chip-selectable-color-selected);\n                // todo: check this issue with designers\n                // We optically lift the check icon a bit to center it better\n                transform: translateY(-1.5px);\n            }\n\n            &:host(:hover) {\n                background-color: var(--wcs-chip-selectable-background-color-selected-hover);\n                color: var(--wcs-chip-selectable-color-selected-hover);\n\n                svg path {\n                    fill: var(--wcs-chip-selectable-color-selected-hover);\n                }\n            }\n\n            &:host(:active) {\n                background-color: var(--wcs-chip-selectable-background-color-selected-pressed);\n                color: var(--wcs-chip-selectable-color-selected-pressed);\n\n                svg path {\n                    fill: var(--wcs-chip-selectable-color-selected-pressed);\n                }\n            }\n        }\n    }\n\n    &:host([disabled]) {\n        color: var(--wcs-chip-selectable-color-disabled);\n        cursor: not-allowed;\n\n        svg {\n            path {\n                fill: var(--wcs-chip-selectable-color-disabled);\n            }\n        }\n\n        &:host(:not([selected])) {\n            border-color: var(--wcs-chip-selectable-border-color-disabled);\n        }\n\n        &:host([selected]) {\n            background-color: var(--wcs-chip-selectable-background-color-selected-disabled);\n            border: 0;\n        }\n    }\n}\n\n// DISMISSIBLE MODE\n:host([mode=dismissible]) {\n    cursor: initial;\n    border: solid var(--wcs-chip-border-line-width) var(--wcs-chip-dismissible-primary-border-color);\n    color: var(--wcs-chip-dismissible-primary-color);\n    background-color: var(--wcs-chip-dismissible-primary-background-color);\n    gap: var(--wcs-chip-dismissible-content-gap);\n    padding-right: var(--wcs-chip-dismissible-padding-right);\n\n    button {\n        background: transparent;\n        border: none;\n        margin: 0;\n        padding: 0;\n        border-radius: var(--wcs-semantic-border-radius-full);\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        color: inherit;\n        width: var(--wcs-semantic-size-xs);\n        height: var(--wcs-semantic-size-xs);\n\n        &:focus {\n            outline: none;\n\n            svg {\n                @include focus-outline(\n                    $outline-color: var(--wcs-chip-dismissible-primary-focus-outline-color),\n                    $border-radius: var(--wcs-chip-dismissible-button-outline-radius),\n                    $border-width: var(--wcs-chip-focus-outline-border-width)\n                );\n            }\n        }\n    }\n\n    &:host(:not([open])) {\n        display: none;\n        margin: 0;\n    }\n\n    &:host(:not([disabled])) {\n        button:hover {\n            background-color: var(--wcs-chip-dismissible-primary-background-color-hover);\n            color: var(--wcs-chip-dismissible-primary-color-hover);\n        }\n\n        button:active {\n            background-color: var(--wcs-chip-dismissible-primary-background-color-pressed);\n            color: var(--wcs-chip-dismissible-primary-color-pressed);\n        }\n    }\n\n    &:host([disabled]) {\n        color: var(--wcs-chip-dismissible-primary-color-disabled);\n        background-color: var(--wcs-chip-dismissible-primary-background-color-disabled);\n        cursor: not-allowed;\n        border: solid var(--wcs-chip-border-line-width) var(--wcs-chip-dismissible-primary-border-color-disabled);\n\n        svg {\n            cursor: not-allowed;\n\n            path {\n                fill: var(--wcs-chip-dismissible-primary-color-disabled);\n            }\n        }\n    }\n\n    // secondary override (colors only), based on the code above for the primary variant\n    &:host([variant=secondary]) {\n        color: var(--wcs-chip-dismissible-secondary-color);\n        background-color: var(--wcs-chip-dismissible-secondary-background-color);\n        border: solid var(--wcs-chip-border-line-width) var(--wcs-chip-dismissible-secondary-border-color);\n\n        button {\n            background: var(--wcs-chip-dismissible-secondary-button-background-color);\n\n            &:focus {\n                outline: none;\n\n                svg {\n                    @include focus-outline(\n                        $outline-color: var(--wcs-chip-dismissible-secondary-button-focus-outline-color),\n                        $border-radius: var(--wcs-chip-dismissible-button-outline-radius),\n                        $border-width: var(--wcs-chip-focus-outline-border-width)\n                    );\n                }\n            }\n        }\n\n        &:host(:not([disabled])) {\n            button:hover {\n                background-color: var(--wcs-chip-dismissible-secondary-button-background-color-hover);\n                color: var(--wcs-chip-dismissible-secondary-button-color-hover);\n            }\n\n            button:active {\n                background-color: var(--wcs-chip-dismissible-secondary-button-background-color-pressed);\n                color: var(--wcs-chip-dismissible-secondary-button-color-pressed);\n            }\n        }\n\n        &:host([disabled]) {\n            color: var(--wcs-chip-dismissible-secondary-color-disabled);\n            background-color: var(--wcs-chip-dismissible-secondary-background-color-disabled);\n            border: solid var(--wcs-chip-border-line-width) var(--wcs-chip-dismissible-secondary-border-color-disabled);\n\n            svg {\n                path {\n                    fill: var(--wcs-chip-dismissible-secondary-color-disabled);\n                }\n            }\n        }\n    }\n}\n","import { Component, ComponentInterface, EventEmitter, Prop, Event, Element, Host, h } from '@stencil/core';\nimport { WcsChipMode, WcsChipVariant } from './chip-interface';\n\ntype ChipFocusDirection = 'previous' | 'next';\n\n/**\n * The chip component is a small, interactive element that can be used to represent an input, filter, or tag.\n * It can be in one of two modes: 'selectable' or 'dismissible'.\n * - In 'selectable' mode, the chip can be selected or deselected, and emits an event when clicked.\n * - In 'dismissible' mode, the chip can be dismissed (removed) by clicking a dismiss icon, and emits an event when the dismiss icon is clicked.\n *\n * @cssprop --wcs-chip-height - Height of the chip\n * @cssprop --wcs-chip-font-size - Font size of the chip text\n * @cssprop --wcs-chip-font-weight - Font weight of the chip text\n *\n * @cssprop --wcs-chip-focus-outline-border-width - Border width of the chip focus outline\n *\n * @cssprop --wcs-chip-padding-vertical - Vertical padding (top - bottom) of the chip\n * @cssprop --wcs-chip-padding-horizontal - Horizontal padding (left - right) of the chip\n * @cssprop --wcs-chip-padding-horizontal-dismissible - Horizontal padding (left - right) of the chip with 'dismissible' mode\n *\n * @cssprop --wcs-chip-selectable-background-color - Background color of the chip with 'selectable' mode in default state\n * @cssprop --wcs-chip-selectable-background-color-pressed - Background color of the chip with 'selectable' mode when pressed\n * @cssprop --wcs-chip-selectable-background-color-hover - Background color of the chip with 'selectable' mode when hovered\n * @cssprop --wcs-chip-selectable-background-color-selected - Background color of the chip with 'selectable' mode when selected\n * @cssprop --wcs-chip-selectable-background-color-selected-hover - Background color of the chip with 'selectable' mode when selected and hovered\n * @cssprop --wcs-chip-selectable-background-color-selected-pressed - Background color of the chip with 'selectable' mode when selected and pressed\n * @cssprop --wcs-chip-selectable-background-color-selected-disabled - Background color of the chip with 'selectable' mode when selected and disabled\n *\n * @cssprop --wcs-chip-selectable-color - Text color of the chip with 'selectable' mode in default state\n * @cssprop --wcs-chip-selectable-color-hover - Text color of the chip with 'selectable' mode when hovered\n * @cssprop --wcs-chip-selectable-color-pressed - Text color of the chip with 'selectable' mode when pressed\n * @cssprop --wcs-chip-selectable-color-disabled - Text color of the chip with 'selectable' mode when disabled\n * @cssprop --wcs-chip-selectable-color-selected - Text color of the chip with 'selectable' mode when selected\n * @cssprop --wcs-chip-selectable-color-selected-hover - Text color of the chip with 'selectable' mode when selected and hovered\n * @cssprop --wcs-chip-selectable-color-selected-pressed - Text color of the chip with 'selectable' mode when selected and pressed\n *\n * @cssprop --wcs-chip-border-radius - Border radius of the chip\n * @cssprop --wcs-chip-border-line-width - Border line width of the chip\n * @cssprop --wcs-chip-selectable-border-color - Border color of the chip with 'selectable' mode in default state\n * @cssprop --wcs-chip-selectable-border-color-hover - Border color of the chip with 'selectable' mode when hovered\n * @cssprop --wcs-chip-selectable-border-color-pressed - Border color of the chip with 'selectable' mode when pressed\n * @cssprop --wcs-chip-selectable-border-color-disabled - Border color of the chip with 'selectable' mode when disabled\n *\n * @cssprop --wcs-chip-selectable-content-gap - Gap between content elements in chip with 'selectable' mode\n * @cssprop --wcs-chip-selectable-focus-outline-color - Focus outline color of the chip with 'selectable' mode\n *\n * @cssprop --wcs-chip-dismissible-content-gap - Gap between content elements in chip with 'dismissible' mode\n * @cssprop --wcs-chip-dismissible-padding-right - Right padding of the chip with 'dismissible' mode\n * @cssprop --wcs-chip-dismissible-button-outline-radius - Outline radius of the button for the chip with 'dismissible' mode\n *\n * @cssprop --wcs-chip-dismissible-primary-focus-outline-color - Focus outline color of the chip with 'dismissible' mode and 'primary' variant\n * @cssprop --wcs-chip-dismissible-primary-border-color - Border color of the chip with 'dismissible' mode and 'primary' variant\n * @cssprop --wcs-chip-dismissible-primary-border-color-disabled - Border color of the chip with 'dismissible' mode and 'primary' variant when disabled\n * @cssprop --wcs-chip-dismissible-primary-color - Text color of the chip with 'dismissible' mode and 'primary' variant\n * @cssprop --wcs-chip-dismissible-primary-color-hover - Text color of the chip with 'dismissible' mode and 'primary' variant when hovered\n * @cssprop --wcs-chip-dismissible-primary-color-pressed - Text color of the chip with 'dismissible' mode and 'primary' variant when pressed\n * @cssprop --wcs-chip-dismissible-primary-color-disabled - Text color of the chip with 'dismissible' mode and 'primary' variant when disabled\n * @cssprop --wcs-chip-dismissible-primary-background-color - Background color of the chip with 'dismissible' mode and 'primary' variant\n * @cssprop --wcs-chip-dismissible-primary-background-color-hover - Background color of the chip with 'dismissible' mode and 'primary' variant when hovered\n * @cssprop --wcs-chip-dismissible-primary-background-color-pressed - Background color of the chip with 'dismissible' mode and 'primary' variant when pressed\n * @cssprop --wcs-chip-dismissible-primary-background-color-disabled - Background color of the chip with 'dismissible' mode and 'primary' variant when disabled\n *\n * @cssprop --wcs-chip-dismissible-secondary-button-focus-outline-color - Button focus outline color of the chip with 'dismissible' mode and 'secondary' variant\n * @cssprop --wcs-chip-dismissible-secondary-border-color - Border color of the chip with 'dismissible' mode and 'secondary' variant\n * @cssprop --wcs-chip-dismissible-secondary-border-color-disabled - Border color of the chip with 'dismissible' mode and 'secondary' variant when disabled\n * @cssprop --wcs-chip-dismissible-secondary-color - Text color of the chip with 'dismissible' mode and 'secondary' variant\n * @cssprop --wcs-chip-dismissible-secondary-color-disabled - Text color of the chip with 'dismissible' mode and 'secondary' variant when disabled\n * @cssprop --wcs-chip-dismissible-secondary-background-color - Background color of the chip with 'dismissible' mode and 'secondary' variant\n * @cssprop --wcs-chip-dismissible-secondary-button-background-color - Button background color of the chip with 'dismissible' mode and 'secondary' variant\n * @cssprop --wcs-chip-dismissible-secondary-button-background-color-hover - Button background color of the chip with 'dismissible' mode and 'secondary' variant when hovered\n * @cssprop --wcs-chip-dismissible-secondary-button-background-color-pressed - Button background color of the chip with 'dismissible' mode and 'secondary' variant when pressed\n * @cssprop --wcs-chip-dismissible-secondary-button-background-color-disabled - Button background color of the chip with 'dismissible' mode and 'secondary' variant when disabled\n */\n@Component({\n    tag: 'wcs-chip',\n    styleUrl: 'chip.scss',\n    shadow: true\n})\nexport class Chip implements ComponentInterface {\n    @Element() el!: HTMLWcsChipElement;\n    /**\n     * Unique value representing the chip identifier in events.\n     */\n    @Prop() value: string;\n\n    /**\n     * Text label displayed on the chip.\n     */\n    @Prop() label: string;\n\n    /**\n     * If `true`, the chip is selected.\n     * This property is only used in 'selectable' mode.\n     */\n    @Prop({ reflect: true }) selected = false;\n\n    /**\n     * If `true`, the chip is open.\n     * This property is used to control the visibility of the chip in the dismissible mode.\n     * When the user clicks the dismiss icon, this property automatically becomes `false`, hiding the chip.\n     */\n    @Prop({ reflect: true }) open = true;\n\n    /**\n     * If `true`, the chip is disabled.\n     * The chip will not respond to click events and will not emit any events.\n     * This property is used in both 'selectable' and 'dismissible' modes.\n     */\n    @Prop({ reflect: true }) disabled = false;\n\n    /**\n     * Defines the visual style of the chip for the dismissible mode.\n     */\n    @Prop({ reflect: true }) variant: WcsChipVariant = 'primary';\n\n    /**\n     * Defines the mode of the chip.\n     * Can be 'selectable' or 'dismissible'.\n     * - 'selectable': The chip can be selected and emits an event when clicked.\n     * - 'dismissible': The chip can be dismissed (removed) and emits an event when the dismiss icon is clicked.\n     */\n    @Prop({ reflect: true }) mode: WcsChipMode = 'selectable';\n\n    /**\n     * Emitted when the chip is clicked in 'selectable' mode.\n     */\n    @Event() wcsChipSelectChange: EventEmitter<{ value: string; selected: boolean }>;\n\n    /**\n     * Emitted when the dismiss icon is clicked in 'dismissible' mode.\n     */\n    @Event() wcsChipDismiss: EventEmitter<{ value: string }>;\n\n\n    private select() {\n        this.selected = !this.selected; // Toggle the selected state\n        this.wcsChipSelectChange.emit({ value: this.value, selected: this.selected });\n    }\n\n    private dismiss() {\n        this.open = false;\n        this.wcsChipDismiss.emit({ value: this.value });\n\n        const nextChip = this.findAdjacentActionableChip('next');\n        if (nextChip) {\n            this.focusChip(nextChip);\n        } else {\n            const previousChip = this.findAdjacentActionableChip('previous');\n            if (previousChip) {\n                this.focusChip(previousChip)\n            };\n        }\n    }\n\n    private findAdjacentActionableChip(direction: ChipFocusDirection): HTMLWcsChipElement | null {\n        const getSibling = (el: Element) => direction === 'next' \n            ? el.nextElementSibling \n            : el.previousElementSibling;\n\n        let currentElement = getSibling(this.el);\n\n        while (currentElement) {\n            if (this.isActionableChip(currentElement)) {\n                return currentElement;\n            }\n            currentElement = getSibling(currentElement);\n        }\n\n        return null;\n    }\n\n    private isActionableChip(element: Element | null): element is HTMLWcsChipElement {\n        return element instanceof HTMLElement\n            && element.tagName === 'WCS-CHIP'\n            && !(element as HTMLWcsChipElement).disabled;\n    }\n\n    private focusChip(chip: HTMLWcsChipElement): void {\n        if (chip.mode === 'selectable') {\n            chip.focus();\n        } else if (chip.mode === 'dismissible') {\n            chip.shadowRoot?.querySelector('button')?.focus();\n        }\n    }\n\n    private handleClick() {\n        if (this.disabled || this.mode !== 'selectable') {\n            return;\n        }\n        this.select();\n    };\n\n    private handleDismiss = (event: Event) => {\n        if (this.disabled || this.mode !== 'dismissible') {\n            return;\n        }\n        event.stopPropagation(); // Prevent the click event from bubbling up to the chip click handler\n        this.dismiss();\n    };\n\n    private handleKeydown(ev) {\n        if (this.disabled) {\n            return;\n        }\n        if (this.mode === 'selectable') {\n            if (ev.key === 'Enter' || ev.key === ' ') {\n                this.select();\n            }\n        } else if (this.mode === 'dismissible') {\n            if (ev.key === 'Delete' || ev.key === 'Backspace') {\n                this.dismiss();\n            }\n        }\n    }\n\n    render() {\n        const commonProps = {\n            'aria-disabled': this.disabled ? 'true' : null\n        };\n\n        if (this.mode === 'selectable') {\n            return (\n                <Host\n                    {...commonProps}\n                    role=\"checkbox\"\n                    aria-checked={this.selected ? 'true' : 'false'}\n                    tabindex={this.disabled ? -1 : 0}\n                    onClick={this.handleClick.bind(this)}\n                    onKeyDown={this.handleKeydown.bind(this)}\n                >\n                    {this.selected && (\n                        <svg class=\"check-icon\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\"\n                             fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                                d=\"M23.712 8.3011L8.0292 23.7157C7.6356 24.095 6.9984 24.095 6.6264 23.7157L0.288 17.4955C-0.096 17.1226 -0.096 16.496 0.288 16.1192L2.1552 14.2739C2.5536 13.9036 3.1776 13.9036 3.5532 14.2739L6.6264 17.2764C6.9984 17.6583 7.6356 17.6583 8.0292 17.2764L20.4384 5.08081C20.8236 4.70662 21.4536 4.70662 21.8364 5.08081L23.712 6.91841C24.096 7.29516 24.096 7.91923 23.712 8.3011Z\"\n                                fill=\"white\" />\n                        </svg>\n                    )}\n                    <span>{this.label}</span>\n                </Host>\n            );\n        } else {\n            return (\n                <Host\n                    {...commonProps}\n                >\n                    <span>{this.label}</span>\n                    <button\n                        aria-label={`Supprimer ${this.label}`}\n                        disabled={this.disabled}\n                        onClick={this.handleDismiss.bind(this)}\n                        onKeyDown={this.handleKeydown.bind(this)}\n                    >\n                        <svg class=\"dismiss-icon\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\"\n                             fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                                d=\"M14.2656 12.0298L19.588 6.72176C20.1908 6.12119 20.1061 5.05213 19.5034 4.45043C18.9006 3.84986 17.914 3.84986 17.3112 4.45043L11.9887 9.7596L6.66743 4.45043C6.06351 3.84986 5.07691 3.84986 4.47412 4.45043C3.87132 5.05213 3.82843 6.07942 4.43122 6.68112L9.75365 11.9892L4.43122 17.2983C3.82843 17.8989 3.87132 18.9262 4.47412 19.5279C5.07691 20.1296 6.10527 20.1702 6.70807 19.5685L12.0305 14.2605L17.3112 19.5279C17.914 20.1296 18.9006 20.1296 19.5034 19.5279C20.1061 18.9262 20.149 17.8989 19.5462 17.2983L14.2656 12.0298Z\"\n                                fill=\"currentColor\" />\n                        </svg>\n                    </button>\n                </Host>\n            );\n        }\n    }\n}\n\n"],"mappings":"gEAAA,MAAMA,EAAU,m/WAChB,MAAAC,EAAeD,E,MC8EFE,EAAIC,EAAA,MAAAD,UAAAE,E,0KAkHLC,KAAAC,cAAiBC,IACrB,GAAIF,KAAKG,UAAYH,KAAKI,OAAS,cAAe,CAC9C,M,CAEJF,EAAMG,kBACNL,KAAKM,SAAS,E,wDAvGkB,M,UAOJ,K,cAOI,M,aAKe,U,UAQN,Y,CAarC,MAAAC,GACJP,KAAKQ,UAAYR,KAAKQ,SACtBR,KAAKS,oBAAoBC,KAAK,CAAEC,MAAOX,KAAKW,MAAOH,SAAUR,KAAKQ,U,CAG9D,OAAAF,GACJN,KAAKY,KAAO,MACZZ,KAAKa,eAAeH,KAAK,CAAEC,MAAOX,KAAKW,QAEvC,MAAMG,EAAWd,KAAKe,2BAA2B,QACjD,GAAID,EAAU,CACVd,KAAKgB,UAAUF,E,KACZ,CACH,MAAMG,EAAejB,KAAKe,2BAA2B,YACrD,GAAIE,EAAc,CACdjB,KAAKgB,UAAUC,E,GAKnB,0BAAAF,CAA2BG,GAC/B,MAAMC,EAAcC,GAAgBF,IAAc,OAC5CE,EAAGC,mBACHD,EAAGE,uBAET,IAAIC,EAAiBJ,EAAWnB,KAAKoB,IAErC,MAAOG,EAAgB,CACnB,GAAIvB,KAAKwB,iBAAiBD,GAAiB,CACvC,OAAOA,C,CAEXA,EAAiBJ,EAAWI,E,CAGhC,OAAO,I,CAGH,gBAAAC,CAAiBC,GACrB,OAAOA,aAAmBC,GACnBD,EAAQE,UAAY,aAClBF,EAA+BtB,Q,CAGpC,SAAAa,CAAUY,G,QACd,GAAIA,EAAKxB,OAAS,aAAc,CAC5BwB,EAAKC,O,MACF,GAAID,EAAKxB,OAAS,cAAe,EACpC0B,GAAAC,EAAAH,EAAKI,cAAU,MAAAD,SAAA,SAAAA,EAAEE,cAAc,aAAS,MAAAH,SAAA,SAAAA,EAAED,O,EAI1C,WAAAK,GACJ,GAAIlC,KAAKG,UAAYH,KAAKI,OAAS,aAAc,CAC7C,M,CAEJJ,KAAKO,Q,CAWD,aAAA4B,CAAcC,GAClB,GAAIpC,KAAKG,SAAU,CACf,M,CAEJ,GAAIH,KAAKI,OAAS,aAAc,CAC5B,GAAIgC,EAAGC,MAAQ,SAAWD,EAAGC,MAAQ,IAAK,CACtCrC,KAAKO,Q,OAEN,GAAIP,KAAKI,OAAS,cAAe,CACpC,GAAIgC,EAAGC,MAAQ,UAAYD,EAAGC,MAAQ,YAAa,CAC/CrC,KAAKM,S,GAKjB,MAAAgC,GACI,MAAMC,EAAc,CAChB,gBAAiBvC,KAAKG,SAAW,OAAS,MAG9C,GAAIH,KAAKI,OAAS,aAAc,CAC5B,OACIoC,EAACC,EAAIC,OAAAC,OAAA,GACGJ,EAAW,CACfK,KAAK,WAAU,eACD5C,KAAKQ,SAAW,OAAS,QACvCqC,SAAU7C,KAAKG,UAAY,EAAI,EAC/B2C,QAAS9C,KAAKkC,YAAYa,KAAK/C,MAC/BgD,UAAWhD,KAAKmC,cAAcY,KAAK/C,QAElCA,KAAKQ,UACFgC,EAAA,OAAKS,MAAM,aAAY,cAAa,OAAOC,MAAM,KAAKC,OAAO,KAAKC,QAAQ,YACrEC,KAAK,OAAOC,MAAM,8BACnBd,EAAA,QACIe,EAAE,wXACFF,KAAK,WAGjBb,EAAA,YAAOxC,KAAKwD,O,KAGjB,CACH,OACIhB,EAACC,EAAIC,OAAAC,OAAA,GACGJ,GAEJC,EAAA,YAAOxC,KAAKwD,OACZhB,EAAA,uBACgB,aAAaxC,KAAKwD,QAC9BrD,SAAUH,KAAKG,SACf2C,QAAS9C,KAAKC,cAAc8C,KAAK/C,MACjCgD,UAAWhD,KAAKmC,cAAcY,KAAK/C,OAEnCwC,EAAA,OAAKS,MAAM,eAAc,cAAa,OAAOC,MAAM,KAAKC,OAAO,KAAKC,QAAQ,YACvEC,KAAK,OAAOC,MAAM,8BACnBd,EAAA,QACIe,EAAE,+gBACFF,KAAK,mB"}

package/composite-elements/wcs-com-nav-category.js

@@ -1,2 +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-e803bb26.js";import{c as m}from"./p-46f752d5.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}}))}w();const h=b;const v=w;export{h as WcsComNavCategory,v as defineCustomElement};
+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-8a2107d4.js";import{c as m}from"./p-cb9faa9b.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 w=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:"cab005c22a1390a75127cc8ee4691a90fb06443c",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:"2e6b6e969a0fff4bc6e9ce70ffeb0dc0cb599865",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:"ee841a45fa5d9ec6a80c8015246551c4eb793dcf"})))}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 b(){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,w)}break}}))}b();const h=w;const v=b;export{h as WcsComNavCategory,v as defineCustomElement};
 //# sourceMappingURL=wcs-com-nav-category.js.map

package/composite-elements/wcs-com-nav-item.js

@@ -1,2 +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}}))}r();const l=a;const d=r;export{l as WcsComNavItem,d as defineCustomElement};
+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:"f99424e8faebbae16b206f49c003a34bd6824b6a",role:"listitem"},n("slot",{key:"f6b8dc69ba05d1c9ca8785b2905218612e9e6b8e"}),n("span",{key:"b24f65c8fd58dcccca47d55ed18ab74f6572b122",class:"arrow-container"},n("span",{key:"7f7e3cabd2006d703474969edfca277d0fc6ce0c","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}}))}r();const l=a;const m=r;export{l as WcsComNavItem,m as defineCustomElement};
 //# sourceMappingURL=wcs-com-nav-item.js.map

package/composite-elements/wcs-com-nav-submenu.js

@@ -1,2 +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-e803bb26.js";import{r as d,c as l}from"./p-46f752d5.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}}))}v();const g=f;const k=v;export{g as WcsComNavSubmenu,k as defineCustomElement};
+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-8a2107d4.js";import{r as d,c as l}from"./p-cb9faa9b.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:"e6de47cc3e8d11be47b32229dc74a58aaf2f23c4",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:"99667d527d33591f69d9591ca039a8b416322bc5",class:"drawer","data-open":this.menuOpen,tabIndex:-1},s("div",{key:"cece9395bfb103342f9f54fc89bc207ccb18db9c",class:"drawer-container"},s("div",{key:"19482a5a7393852da570431292c0f0cde86cfdcd",class:"drawer-content"},s("div",{key:"85387b5371209178cb451065ddd9124143bb0112",class:"drawer-description"},s("h3",{key:"4692b2d757408142da7357cddcfb55f8efa154e7"},this.panelTitle),s("p",{key:"e21e9eda294bac55a85e16e82178e9ad127907f4"},this.panelDescription)),s("div",{key:"984f302624daf4341fbb3236cde16ff7e640f458",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:"286906e6ab84bed9d990eb4cbb10fea119a9d060"}))))))}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}}))}v();const g=f;const k=v;export{g as WcsComNavSubmenu,k as defineCustomElement};
 //# sourceMappingURL=wcs-com-nav-submenu.js.map

package/composite-elements/wcs-com-nav.js

@@ -1,2 +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-46f752d5.js";import{i as s,a as r,b as l}from"./p-e803bb26.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}}))}u();const f=h;const w=u;export{f as WcsComNav,w as defineCustomElement};
+import{p as e,H as o,f as a,h as n,c as i}from"./p-2bef72c7.js";import{r as c,c as t}from"./p-cb9faa9b.js";import{i as s,a as r,b as l}from"./p-8a2107d4.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 h="WCS-COM-NAV-SUBMENU";const b=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])");c(e,h)}componentDidLoad(){if(!this.resizeObserver){this.resizeObserver=t(this);this.resizeObserver.observe(document.body)}}async setAriaAttribute(e,o){this.inheritedAttributes[e]=o;a(this)}closeMobileMenu(){this.mobileMenuOpen=false}onClickOnFinalAction(){this.closeMobileMenu()}render(){const e=this.inheritedAttributes["aria-label"]||undefined;return n(i,{key:"0ad6128d41f1a09da5bfc1668a9c5ca88e0a10dc"},n("div",{key:"3c6fc5016fe04299461271e9d7ee5d52198e0e94",class:"container"},n("div",{key:"229cb6d60903fd5d7998db5079589a67af95f87c",class:"container-left"},n("div",{key:"59d5ece9de29819279b2601646e5a95e48f5113d",class:"app-name"},this.appName,n("slot",{key:"4b205236b381eb02b8aeaf7149f00c2ccf24f1a0",name:"app-name"})),this.currentActiveSizing==="desktop"?n("nav",Object.assign({role:"navigation"},this.inheritedAttributes),n("div",{class:"menu-bar",role:"list"},this.currentActiveSizing==="desktop"?n("slot",null):null)):null),n("div",{key:"49ee0dd4b30bab8e83707380daee66220dd74117",class:"container-right"},n("slot",{key:"3cf89cb129b2a59221578f5da6410965fb3f4da2",name:"actions"}),this.currentActiveSizing==="mobile"?n("nav",Object.assign({id:"wcs-com-nav-mobile-menu",role:"navigation"},this.inheritedAttributes),n("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"?n("div",{class:"mobile-overlay","data-mobile-open":this.mobileMenuOpen,role:"list"},n("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,b)}break}}))}u();const w=b;const f=u;export{w as WcsComNav,f as defineCustomElement};
 //# sourceMappingURL=wcs-com-nav.js.map

package/composite-elements/wcs-com-nav.js.map

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