wcs-core 7.4.0 → 7.5.0

package/composite-elements/wcs-chip.js

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

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

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

package/composite-elements/wcs-com-nav-category.d.ts

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

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

@@ -0,0 +1,2 @@
+import{p as e,H as o,d as t,h as a,c}from"./p-2bef72c7.js";import{c as n,d as s,i,a as r,s as l}from"./p-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};
+//# sourceMappingURL=wcs-com-nav-category.js.map

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

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

package/composite-elements/wcs-com-nav-item.d.ts

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

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

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

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

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

package/composite-elements/wcs-com-nav-submenu.d.ts

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

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

@@ -0,0 +1,2 @@
+import{p as e,H as t,d as n,h as s,c as o}from"./p-2bef72c7.js";import{i as a,a as i,b as c,s as r,c as m,d as u}from"./p-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};
+//# sourceMappingURL=wcs-com-nav-submenu.js.map

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

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

package/composite-elements/wcs-com-nav.d.ts

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

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

@@ -0,0 +1,2 @@
+import{p as e,H as o,f as n,h as a,c}from"./p-2bef72c7.js";import{r as i,c as t}from"./p-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};
+//# sourceMappingURL=wcs-com-nav.js.map

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

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

package/composite-elements/wcs-counter.d.ts

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

package/composite-elements/wcs-counter.js

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

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

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

package/composite-elements/wcs-divider.d.ts

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

package/composite-elements/wcs-divider.js

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

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

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

package/composite-elements/wcs-dropdown-divider.d.ts

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

package/composite-elements/wcs-dropdown-divider.js

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

package/composite-elements/wcs-dropdown-divider.js.map

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

package/composite-elements/wcs-dropdown-header.d.ts

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

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

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

package/composite-elements/wcs-dropdown-header.js.map

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

package/composite-elements/wcs-dropdown-item.d.ts

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