wcs-core 4.1.0 → 4.2.0

package/dist/esm/accessibility-ffa12842.js

@@ -0,0 +1,65 @@
+function isElementFocused(element) {
+  return element === document.activeElement;
+}
+const wcsFocusableElements = [
+  'wcs-select',
+  'wcs-select-option',
+  'wcs-dropdown',
+  'wcs-dropdown-item',
+  'wcs-nav-item',
+  'wcs-button',
+  'wcs-input',
+  'wcs-textarea',
+  'wcs-checkbox',
+  'wcs-radio',
+  'wcs-switch',
+  'wcs-tab',
+  'wcs-counter',
+];
+function isFocusable(element) {
+  if (parseInt(element.getAttribute('tabindex')) < 0) {
+    return false;
+  }
+  if (element.disabled) {
+    return false;
+  }
+  const boundingRect = element.getBoundingClientRect();
+  if (boundingRect.bottom === 0 &&
+    boundingRect.top === 0 &&
+    boundingRect.left === 0 &&
+    boundingRect.right === 0 &&
+    boundingRect.height === 0 &&
+    boundingRect.width === 0 &&
+    boundingRect.x === 0 &&
+    boundingRect.y === 0) {
+    return false;
+  }
+  if (element.style.display === 'none' ||
+    element.style.visibility === 'hidden' ||
+    element.style.opacity === 0) {
+    return false;
+  }
+  if (element.getAttribute('role') === 'button') {
+    return true;
+  }
+  if (wcsFocusableElements.includes(element.tagName.toLowerCase())) {
+    return true;
+  }
+  // To identify other native focus elements.
+  switch (element.nodeName) {
+    case 'A':
+      return !!element.href && element.rel !== 'ignore';
+    case 'INPUT':
+      return element.type !== 'hidden';
+    case 'BUTTON':
+    case 'SELECT':
+    case 'TEXTAREA':
+      return true;
+    default:
+      return false;
+  }
+}
+
+export { isFocusable as a, isElementFocused as i };
+
+//# sourceMappingURL=accessibility-ffa12842.js.map

package/dist/esm/accessibility-ffa12842.js.map

@@ -0,0 +1 @@
+{"file":"accessibility-ffa12842.js","mappings":"SAAgB,gBAAgB,CAAC,OAAoB;EACjD,OAAO,OAAO,KAAK,QAAQ,CAAC,aAAa,CAAC;AAC9C,CAAC;AAEM,MAAM,oBAAoB,GAAG;EAChC,YAAY;EACZ,mBAAmB;EACnB,cAAc;EACd,mBAAmB;EACnB,cAAc;EACd,YAAY;EACZ,WAAW;EACX,cAAc;EACd,cAAc;EACd,WAAW;EACX,YAAY;EACZ,SAAS;EACT,aAAa;CAChB,CAAC;SAEc,WAAW,CAAC,OAAY;EACpC,IAAI,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,EAAE;IAChD,OAAO,KAAK,CAAC;GAChB;EACD,IAAI,OAAO,CAAC,QAAQ,EAAE;IAClB,OAAO,KAAK,CAAC;GAChB;EACD,MAAM,YAAY,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;EACrD,IACI,YAAY,CAAC,MAAM,KAAK,CAAC;IACzB,YAAY,CAAC,GAAG,KAAK,CAAC;IACtB,YAAY,CAAC,IAAI,KAAK,CAAC;IACvB,YAAY,CAAC,KAAK,KAAK,CAAC;IACxB,YAAY,CAAC,MAAM,KAAK,CAAC;IACzB,YAAY,CAAC,KAAK,KAAK,CAAC;IACxB,YAAY,CAAC,CAAC,KAAK,CAAC;IACpB,YAAY,CAAC,CAAC,KAAK,CAAC,EACtB;IACE,OAAO,KAAK,CAAC;GAChB;EACD,IACI,OAAO,CAAC,KAAK,CAAC,OAAO,KAAK,MAAM;IAChC,OAAO,CAAC,KAAK,CAAC,UAAU,KAAK,QAAQ;IACrC,OAAO,CAAC,KAAK,CAAC,OAAO,KAAK,CAAC,EAC7B;IACE,OAAO,KAAK,CAAC;GAChB;EACD,IAAI,OAAO,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,QAAQ,EAAE;IAC3C,OAAO,IAAI,CAAC;GACf;EAED,IAAI,oBAAoB,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,EAAE;IAC9D,OAAO,IAAI,CAAC;GACf;;EAGD,QAAQ,OAAO,CAAC,QAAQ;IACpB,KAAK,GAAG;MACJ,OAAO,CAAC,CAAC,OAAO,CAAC,IAAI,IAAI,OAAO,CAAC,GAAG,KAAK,QAAQ,CAAC;IACtD,KAAK,OAAO;MACR,OAAO,OAAO,CAAC,IAAI,KAAK,QAAQ,CAAC;IACrC,KAAK,QAAQ,CAAC;IACd,KAAK,QAAQ,CAAC;IACd,KAAK,UAAU;MACX,OAAO,IAAI,CAAC;IAChB;MACI,OAAO,KAAK,CAAC;GACpB;AACL;;;;","names":[],"sources":["./src/utils/accessibility.ts"],"sourcesContent":["export function isElementFocused(element: HTMLElement) {\n    return element === document.activeElement;\n}\n\nexport const wcsFocusableElements = [\n    'wcs-select',\n    'wcs-select-option',\n    'wcs-dropdown',\n    'wcs-dropdown-item',\n    'wcs-nav-item',\n    'wcs-button',\n    'wcs-input',\n    'wcs-textarea',\n    'wcs-checkbox',\n    'wcs-radio',\n    'wcs-switch',\n    'wcs-tab',\n    'wcs-counter',\n];\n\nexport function isFocusable(element: any) {\n    if (parseInt(element.getAttribute('tabindex')) < 0) {\n        return false;\n    }\n    if (element.disabled) {\n        return false;\n    }\n    const boundingRect = element.getBoundingClientRect();\n    if (\n        boundingRect.bottom === 0 &&\n        boundingRect.top === 0 &&\n        boundingRect.left === 0 &&\n        boundingRect.right === 0 &&\n        boundingRect.height === 0 &&\n        boundingRect.width === 0 &&\n        boundingRect.x === 0 &&\n        boundingRect.y === 0\n    ) {\n        return false;\n    }\n    if (\n        element.style.display === 'none' ||\n        element.style.visibility === 'hidden' ||\n        element.style.opacity === 0\n    ) {\n        return false;\n    }\n    if (element.getAttribute('role') === 'button') {\n        return true;\n    }\n\n    if (wcsFocusableElements.includes(element.tagName.toLowerCase())) {\n        return true;\n    }\n\n    // To identify other native focus elements.\n    switch (element.nodeName) {\n        case 'A':\n            return !!element.href && element.rel !== 'ignore';\n        case 'INPUT':\n            return element.type !== 'hidden';\n        case 'BUTTON':\n        case 'SELECT':\n        case 'TEXTAREA':\n            return true;\n        default:\n            return false;\n    }\n}\n"],"version":3}

package/dist/esm/{helpers-1f7170dd.js → helpers-1d55b67f.js}

@@ -119,6 +119,6 @@ function isTabKey(evt) {
   return evt.key === 'Tab';
 }
 
-export { isEnterKey as a, isEscapeKey as b, isKeyup as c, isKeydown as d, isHomeKey as e, isEndKey as f, clickTargetIsElementOrChildren as g, clickInsideElement as h, isSpaceKey as i, debounceEvent as j, inheritAttributes as k, findItemLabel as l, generateUniqueId as m, isDownArrowKey as n, isRightArrowKey as o, isUpArrowKey as p, isLeftArrowKey as q, raf as r, isPageDownKey as s, isPageUpKey as t, isTabKey as u, isElement as v, hasShadowDom as w };
+export { isEnterKey as a, isEscapeKey as b, isKeyup as c, isKeydown as d, isHomeKey as e, isEndKey as f, clickTargetIsElementOrChildren as g, clickInsideElement as h, isSpaceKey as i, debounceEvent as j, inheritAttributes as k, findItemLabel as l, isTabKey as m, isDownArrowKey as n, isUpArrowKey as o, isLeftArrowKey as p, isRightArrowKey as q, raf as r, generateUniqueId as s, isPageDownKey as t, isPageUpKey as u, isElement as v, hasShadowDom as w };
 
-//# sourceMappingURL=helpers-1f7170dd.js.map
+//# sourceMappingURL=helpers-1d55b67f.js.map

package/dist/esm/{helpers-1f7170dd.js.map → helpers-1d55b67f.js.map}

@@ -1 +1 @@
-{"file":"helpers-1f7170dd.js","mappings":"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","names":[],"sources":["./src/utils/helpers.ts"],"sourcesContent":["import { EventEmitter } from '@stencil/core';\n\nexport function isElement(element: any): element is Element {\n    return 'clientWidth' in element\n        && 'clientHeight' in element;\n}\n\nexport function hasShadowDom(el: HTMLElement) {\n    return !!el.shadowRoot && !!(el as any).attachShadow;\n}\n\nexport const debounceEvent = (event: EventEmitter, wait: number): EventEmitter => {\n    const original = (event as any)._original || event;\n    return {\n        _original: event,\n        emit: debounce(original.emit.bind(original), wait)\n    } as EventEmitter;\n};\n\nexport const debounce = (func: (...args: any[]) => void, wait = 0) => {\n    let timer: any;\n    return (...args: any[]): any => {\n        clearTimeout(timer);\n        timer = setTimeout(func, wait, ...args);\n    };\n};\n\n/**\n * Elements inside of web components sometimes need to inherit global attributes\n * set on the host. For example, the inner input in `wcs-input` should inherit\n * the `title` attribute that developers set directly on `ion-input`. This\n * helper function should be called in componentWillLoad and assigned to a variable\n * that is later used in the render function.\n *\n * This does not need to be reactive as changing attributes on the host element\n * does not trigger a re-render.\n */\nexport const inheritAttributes = (el: HTMLElement, attributes: string[] = []) => {\n    const attributeObject: { [k: string]: any } = {};\n\n    attributes.forEach(attr => {\n        if (el.hasAttribute(attr)) {\n            const value = el.getAttribute(attr);\n            if (value !== null) {\n                attributeObject[attr] = el.getAttribute(attr);\n            }\n            el.removeAttribute(attr);\n        }\n    });\n\n    return attributeObject;\n}\n\nexport const findItemLabel = (componentEl: HTMLElement): HTMLWcsLabelElement | null => {\n    const itemEl = componentEl.closest('wcs-form-field');\n    if (itemEl) {\n        return itemEl.querySelector('wcs-label');\n    }\n    return null;\n};\n\ndeclare const __zone_symbol__requestAnimationFrame: any;\n\n/**\n * Patched version of requestAnimationFrame that avoids ngzone\n * Use only when you know ngzone should not run\n */\nexport const raf = (h: any) => {\n    if (typeof __zone_symbol__requestAnimationFrame === 'function') {\n        return __zone_symbol__requestAnimationFrame(h);\n    }\n    if (typeof requestAnimationFrame === 'function') {\n        return requestAnimationFrame(h);\n    }\n    return setTimeout(h);\n};\n\n/**\n * Return true if the mouseEvent click is inside the given HTML element\n */\nexport const clickInsideElement = (event: MouseEvent, element: HTMLElement): boolean => {\n    return event.x >= element.getBoundingClientRect().x && event.x <= element.getBoundingClientRect().x + element.getBoundingClientRect().width\n        && event.y >= element.getBoundingClientRect().y && event.y <= element.getBoundingClientRect().y + element.getBoundingClientRect().height;\n}\n\n\nexport const clickTargetIsElementOrChildren = (mouseEvent: MouseEvent, element: HTMLElement) => {\n    return mouseEvent.target instanceof Node\n        && element.contains(mouseEvent.target);\n}\n\nexport function generateUniqueId(componentName: string): string {\n    return componentName + \"-\" + Math.random().toString(36);\n}\n\nexport function isKeyup(evt: KeyboardEvent) {\n    return evt.code === 'ArrowUp';\n}\n\nexport function isKeydown(evt: KeyboardEvent) {\n    return evt.code === 'ArrowDown';\n}\n\nexport function isEscapeKey(evt: KeyboardEvent) {\n    return evt.code === 'Escape';\n}\n\nexport function isSpaceKey(evt: KeyboardEvent) {\n    return evt.code === 'Space';\n}\n\nexport function isEnterKey(evt: KeyboardEvent) {\n    return evt.key === 'Enter';\n}\n\nexport function isHomeKey(evt: KeyboardEvent) {\n    return evt.code === 'Home';\n}\n\nexport function isEndKey(evt: KeyboardEvent) {\n    return evt.code === 'End';\n}\n\nexport function isUpArrowKey(evt: KeyboardEvent) {\n    return evt.key === 'ArrowUp';\n}\n\nexport function isDownArrowKey(evt: KeyboardEvent) {\n    return evt.key === 'ArrowDown';\n}\n\nexport function isLeftArrowKey(evt: KeyboardEvent) {\n    return evt.key === 'ArrowLeft';\n}\n\nexport function isRightArrowKey(evt: KeyboardEvent) {\n    return evt.key === 'ArrowRight';\n}\n\nexport function isPageDownKey(evt: KeyboardEvent) {\n    return evt.key === 'PageDown';\n}\n\nexport function isPageUpKey(evt: KeyboardEvent) {\n    return evt.key === 'PageUp';\n}\n\nexport function isTabKey(evt: KeyboardEvent) {\n    return evt.key === 'Tab';\n}\n"],"version":3}
+{"file":"helpers-1d55b67f.js","mappings":"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","names":[],"sources":["./src/utils/helpers.ts"],"sourcesContent":["import { EventEmitter } from '@stencil/core';\n\nexport function isElement(element: any): element is Element {\n    return 'clientWidth' in element\n        && 'clientHeight' in element;\n}\n\nexport function hasShadowDom(el: HTMLElement) {\n    return !!el.shadowRoot && !!(el as any).attachShadow;\n}\n\nexport const debounceEvent = (event: EventEmitter, wait: number): EventEmitter => {\n    const original = (event as any)._original || event;\n    return {\n        _original: event,\n        emit: debounce(original.emit.bind(original), wait)\n    } as EventEmitter;\n};\n\nexport const debounce = (func: (...args: any[]) => void, wait = 0) => {\n    let timer: any;\n    return (...args: any[]): any => {\n        clearTimeout(timer);\n        timer = setTimeout(func, wait, ...args);\n    };\n};\n\n/**\n * Elements inside of web components sometimes need to inherit global attributes\n * set on the host. For example, the inner input in `wcs-input` should inherit\n * the `title` attribute that developers set directly on `ion-input`. This\n * helper function should be called in componentWillLoad and assigned to a variable\n * that is later used in the render function.\n *\n * This does not need to be reactive as changing attributes on the host element\n * does not trigger a re-render.\n */\nexport const inheritAttributes = (el: HTMLElement, attributes: string[] = []) => {\n    const attributeObject: { [k: string]: any } = {};\n\n    attributes.forEach(attr => {\n        if (el.hasAttribute(attr)) {\n            const value = el.getAttribute(attr);\n            if (value !== null) {\n                attributeObject[attr] = el.getAttribute(attr);\n            }\n            el.removeAttribute(attr);\n        }\n    });\n\n    return attributeObject;\n}\n\nexport const findItemLabel = (componentEl: HTMLElement): HTMLWcsLabelElement | null => {\n    const itemEl = componentEl.closest('wcs-form-field');\n    if (itemEl) {\n        return itemEl.querySelector('wcs-label');\n    }\n    return null;\n};\n\ndeclare const __zone_symbol__requestAnimationFrame: any;\n\n/**\n * Patched version of requestAnimationFrame that avoids ngzone\n * Use only when you know ngzone should not run\n */\nexport const raf = (h: any) => {\n    if (typeof __zone_symbol__requestAnimationFrame === 'function') {\n        return __zone_symbol__requestAnimationFrame(h);\n    }\n    if (typeof requestAnimationFrame === 'function') {\n        return requestAnimationFrame(h);\n    }\n    return setTimeout(h);\n};\n\n/**\n * Return true if the mouseEvent click is inside the given HTML element\n */\nexport const clickInsideElement = (event: MouseEvent, element: HTMLElement): boolean => {\n    return event.x >= element.getBoundingClientRect().x && event.x <= element.getBoundingClientRect().x + element.getBoundingClientRect().width\n        && event.y >= element.getBoundingClientRect().y && event.y <= element.getBoundingClientRect().y + element.getBoundingClientRect().height;\n}\n\n\nexport const clickTargetIsElementOrChildren = (mouseEvent: MouseEvent, element: HTMLElement) => {\n    return mouseEvent.target instanceof Node\n        && element.contains(mouseEvent.target);\n}\n\nexport function generateUniqueId(componentName: string): string {\n    return componentName + \"-\" + Math.random().toString(36);\n}\n\nexport function isKeyup(evt: KeyboardEvent) {\n    return evt.code === 'ArrowUp';\n}\n\nexport function isKeydown(evt: KeyboardEvent) {\n    return evt.code === 'ArrowDown';\n}\n\nexport function isEscapeKey(evt: KeyboardEvent) {\n    return evt.code === 'Escape';\n}\n\nexport function isSpaceKey(evt: KeyboardEvent) {\n    return evt.code === 'Space';\n}\n\nexport function isEnterKey(evt: KeyboardEvent) {\n    return evt.key === 'Enter';\n}\n\nexport function isHomeKey(evt: KeyboardEvent) {\n    return evt.code === 'Home';\n}\n\nexport function isEndKey(evt: KeyboardEvent) {\n    return evt.code === 'End';\n}\n\nexport function isUpArrowKey(evt: KeyboardEvent) {\n    return evt.key === 'ArrowUp';\n}\n\nexport function isDownArrowKey(evt: KeyboardEvent) {\n    return evt.key === 'ArrowDown';\n}\n\nexport function isLeftArrowKey(evt: KeyboardEvent) {\n    return evt.key === 'ArrowLeft';\n}\n\nexport function isRightArrowKey(evt: KeyboardEvent) {\n    return evt.key === 'ArrowRight';\n}\n\nexport function isPageDownKey(evt: KeyboardEvent) {\n    return evt.key === 'PageDown';\n}\n\nexport function isPageUpKey(evt: KeyboardEvent) {\n    return evt.key === 'PageUp';\n}\n\nexport function isTabKey(evt: KeyboardEvent) {\n    return evt.key === 'Tab';\n}\n"],"version":3}

package/dist/esm/loader.js

@@ -11,7 +11,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["wcs-editable-field",[[1,"wcs-editable-field",{"type":[1],"label":[1],"readonly":[4],"value":[1032],"validateFn":[16],"formatFn":[16],"errorMsg":[1,"error-msg"],"size":[513],"currentState":[32],"isError":[32]},[[8,"click","onWindowClickEvent"]]]]],["wcs-horizontal-stepper",[[1,"wcs-horizontal-stepper",{"currentStep":[1026,"current-step"],"steps":[16],"mode":[1],"checkOnComplete":[4,"check-on-complete"],"internalCurrentStep":[32],"previous":[64],"next":[64]}]]],["wcs-counter",[[1,"wcs-counter",{"size":[513],"label":[1],"min":[1026],"max":[1026],"step":[1026],"value":[1026],"displayedValue":[32]}]]],["wcs-grid",[[1,"wcs-grid",{"serverMode":[4,"server-mode"],"data":[16],"loading":[4],"selectionConfig":[1,"selection-config"],"selectedItems":[8,"selected-items"],"wcsGridPaginationId":[1,"wcs-grid-pagination-id"],"rowIdPath":[1,"row-id-path"],"columns":[32],"paginationEl":[32],"rows":[32]},[[0,"wcsHiddenChange","onHiddenColumnChange"],[0,"wcsSortChange","sortChangeEventHandler"],[0,"wcsGridPaginationChange","paginationChangeEventHandler"],[8,"wcsGridPaginationChange","paginationChangeEventHandlerOutside"]]]]],["wcs-grid-pagination",[[1,"wcs-grid-pagination",{"availablePageSizes":[16],"currentPage":[2,"current-page"],"pageSize":[2,"page-size"],"itemsCount":[2,"items-count"],"pageCount":[2,"page-count"]}]]],["wcs-modal",[[4,"wcs-modal",{"withoutBackdrop":[516,"without-backdrop"],"show":[516],"showCloseButton":[516,"show-close-button"],"size":[1],"hideActions":[516,"hide-actions"]},[[4,"keydown","onKeyDown"]]]]],["wcs-dropdown",[[1,"wcs-dropdown",{"noArrow":[4,"no-arrow"],"mode":[1],"shape":[1],"disabled":[4],"placement":[1],"expanded":[32]},[[8,"click","onWindowClickEvent"],[0,"wcsDropdownItemClick","dropdownItemClick"],[0,"keydown","onKeyDown"]]]]],["wcs-galactic-menu",[[1,"wcs-galactic-menu",{"text":[1],"showPopoverMenu":[32]},[[8,"click","onWindowClickEvent"]]]]],["wcs-input",[[17,"wcs-input",{"fireFocusEvents":[4,"fire-focus-events"],"accept":[1],"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"autofocus":[4],"clearInput":[4,"clear-input"],"clearOnEdit":[4,"clear-on-edit"],"debounce":[2],"prefixLabel":[1,"prefix-label"],"suffixLabel":[1,"suffix-label"],"disabled":[4],"enterkeyhint":[1],"size":[513],"icon":[1],"inputmode":[1],"max":[1],"maxlength":[2],"min":[1],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"state":[513],"step":[1],"type":[1],"value":[1032],"hasFocus":[32],"passwordReveal":[32],"setFocus":[64],"setBlur":[64],"getInputElement":[64]}]]],["wcs-textarea",[[1,"wcs-textarea",{"fireFocusEvents":[4,"fire-focus-events"],"autocapitalize":[1],"autofocus":[4],"clearOnEdit":[1028,"clear-on-edit"],"debounce":[2],"disabled":[4],"icon":[1],"inputmode":[1],"enterkeyhint":[1],"maxlength":[2],"minlength":[2],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"state":[513],"cols":[2],"rows":[2],"wrap":[1],"autoGrow":[4,"auto-grow"],"value":[1025],"resize":[513],"hasFocus":[32],"fitContent":[64],"setFocus":[64],"setBlur":[64],"getInputElement":[64]}]]],["wcs-accordion",[[1,"wcs-accordion",{"hideActionText":[516,"hide-action-text"],"highlight":[516],"groupContentWithHeader":[516,"group-content-with-header"]},[[0,"wcsOpenChange","wcsOpenChangeHandler"]]]]],["wcs-accordion-content",[[1,"wcs-accordion-content"]]],["wcs-accordion-header",[[1,"wcs-accordion-header"]]],["wcs-accordion-panel",[[1,"wcs-accordion-panel",{"open":[1540],"hideActionText":[516,"hide-action-text"],"highlight":[516],"groupContentWithHeader":[516,"group-content-with-header"],"close":[64]}]]],["wcs-action-bar",[[1,"wcs-action-bar",{"gutter":[4],"hasTabs":[32]}]]],["wcs-app",[[1,"wcs-app"]]],["wcs-badge",[[1,"wcs-badge",{"shape":[1],"color":[1]}]]],["wcs-card",[[1,"wcs-card",{"mode":[1537]}]]],["wcs-card-body",[[1,"wcs-card-body"]]],["wcs-com-nav",[[1,"wcs-com-nav",{"appName":[1,"app-name"],"mobileMenuOpen":[32],"currentActiveSizing":[32]},[[0,"wcsClickOnFinalAction","onClickOnFinalAction"],[0,"wcsCategoryItemClicked","onClickOnFinalActionCat"],[8,"keydown","exitMobileMenuOnKeyDown"]]]]],["wcs-com-nav-category",[[1,"wcs-com-nav-category",{"label":[1],"categoryOpen":[32],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsCategoryOpened","onSubmenuOpened"]]]]],["wcs-com-nav-submenu",[[1,"wcs-com-nav-submenu",{"label":[1],"panelTitle":[1,"panel-title"],"panelDescription":[1,"panel-description"],"menuOpen":[32],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsSubmenuOpened","onSubmenuOpened"],[8,"keydown","onEscapeKeyDown"],[0,"wcsCategoryItemClicked","wcsCategoryItemClickedHandler"]]]]],["wcs-divider",[[1,"wcs-divider"]]],["wcs-dropdown-divider",[[1,"wcs-dropdown-divider"]]],["wcs-dropdown-header",[[1,"wcs-dropdown-header"]]],["wcs-dropdown-item",[[4,"wcs-dropdown-item",null,[[1,"mousedown","onMouseDown"],[0,"keydown","onKeyDown"]]]]],["wcs-field",[[1,"wcs-field"]]],["wcs-field-content",[[1,"wcs-field-content"]]],["wcs-field-label",[[1,"wcs-field-label"]]],["wcs-footer",[[1,"wcs-footer"]]],["wcs-galactic",[[1,"wcs-galactic",{"text":[1],"show":[32]}]]],["wcs-grid-column",[[1,"wcs-grid-column",{"path":[1],"name":[1],"sort":[4],"sortFn":[16],"formatter":[16],"sortOrder":[1025,"sort-order"],"width":[1],"customCells":[4,"custom-cells"],"hidden":[4]}]]],["wcs-grid-custom-cell",[[1,"wcs-grid-custom-cell",{"columnId":[1,"column-id"],"rowId":[8,"row-id"]}]]],["wcs-header",[[1,"wcs-header"]]],["wcs-hint",[[1,"wcs-hint",{"small":[1540]}]]],["wcs-icon",[[0,"wcs-icon",{"icon":[1],"size":[1]}]]],["wcs-label",[[1,"wcs-label",{"required":[516]}]]],["wcs-list-item",[[1,"wcs-list-item",{"activated":[1028]}]]],["wcs-list-item-properties",[[1,"wcs-list-item-properties"]]],["wcs-list-item-property",[[1,"wcs-list-item-property"]]],["wcs-native-select",[[1,"wcs-native-select",{"size":[513],"expanded":[32],"disabled":[32]}]]],["wcs-nav",[[1,"wcs-nav"]]],["wcs-nav-item",[[4,"wcs-nav-item",{"text":[513],"href":[513]},[[0,"keydown","onKeyDown"]]]]],["wcs-progress-radial",[[1,"wcs-progress-radial",{"size":[2],"showLabel":[4,"show-label"],"value":[2]}]]],["wcs-radio-group",[[1,"wcs-radio-group",{"value":[8],"name":[520],"mode":[513]},[[0,"wcsRadioClick","selectedOptionChanged"]]]]],["wcs-skeleton-circle",[[1,"wcs-skeleton-circle",{"animation":[513],"radius":[514]}]]],["wcs-skeleton-rectangle",[[1,"wcs-skeleton-rectangle",{"animation":[513],"rounded":[516],"height":[513],"width":[513]}]]],["wcs-skeleton-text",[[1,"wcs-skeleton-text",{"animation":[513],"height":[1]}]]],["wcs-switch",[[1,"wcs-switch",{"name":[1],"checked":[516],"labelAlignment":[513,"label-alignment"],"disabled":[4]}]]],["wcs-tab",[[1,"wcs-tab",{"header":[513],"itemKey":[8,"item-key"]}]]],["wcs-tabs",[[1,"wcs-tabs",{"align":[513],"selectedIndex":[2,"selected-index"],"selectedKey":[8,"selected-key"],"headersOnly":[4,"headers-only"],"gutter":[4],"headers":[32],"currentActiveTabIndex":[32]},[[0,"tabLoaded","onTabLoaded"]]]]],["wcs-tooltip",[[1,"wcs-tooltip",{"for":[1],"position":[513],"interactive":[4],"maxWidth":[8,"max-width"],"delay":[2],"duration":[2],"trigger":[1],"theme":[1],"content":[1],"appendTo":[1,"append-to"],"hide":[64],"show":[64],"disable":[64],"enable":[64]}]]],["wcs-progress-bar",[[1,"wcs-progress-bar",{"small":[4],"showLabel":[4,"show-label"],"value":[2]}]]],["wcs-radio",[[1,"wcs-radio",{"mode":[513],"value":[1544],"label":[1537],"checked":[1540],"disabled":[1028]},[[0,"keydown","onKeyDown"]]]]],["wcs-select_2",[[4,"wcs-select-option",{"disabled":[1540],"selected":[1540],"value":[8],"chipColor":[1,"chip-color"],"chipBackgroundColor":[1,"chip-background-color"],"multiple":[1540]},[[1,"mousedown","onMouseDown"],[0,"keydown","handleKeydown"]]],[1,"wcs-select",{"size":[513],"value":[1032],"placeholder":[1537],"disabled":[1028],"multiple":[516],"chips":[516],"name":[1],"compareWith":[16],"expanded":[32],"hasLoaded":[32],"displayText":[32],"focused":[32],"overlayDirection":[32],"open":[64],"close":[64]},[[1,"mousedown","onMouseDown"],[8,"click","onWindowClickEvent"],[0,"keydown","onKeyDown"],[0,"wcsSelectOptionClick","selectedOptionChanged"]]]]],["wcs-error_2",[[1,"wcs-error"],[1,"wcs-form-field",{"isError":[1540,"is-error"],"hasPrefix":[32],"hasSuffix":[32],"spiedElement":[32]}]]],["wcs-checkbox",[[1,"wcs-checkbox",{"name":[1],"indeterminate":[1540],"checked":[1540],"labelAlignment":[1537,"label-alignment"],"disabled":[4]}]]],["wcs-button",[[17,"wcs-button",{"type":[1025],"href":[1],"target":[1],"disabled":[516],"ripple":[4],"size":[513],"shape":[513],"mode":[513],"loading":[1028]},[[0,"click","onClick"]]]]],["wcs-mat-icon",[[1,"wcs-mat-icon",{"icon":[1],"size":[1],"family":[1]}]]],["wcs-spinner",[[1,"wcs-spinner",{"mode":[513]}]]]], options);
+  return bootstrapLazy([["wcs-editable-field",[[1,"wcs-editable-field",{"type":[1],"label":[1],"readonly":[4],"value":[1032],"validateFn":[16],"formatFn":[16],"errorMsg":[1,"error-msg"],"size":[513],"currentState":[32],"isError":[32]},[[8,"click","onWindowClickEvent"]]]]],["wcs-horizontal-stepper",[[1,"wcs-horizontal-stepper",{"currentStep":[1026,"current-step"],"steps":[16],"mode":[1],"checkOnComplete":[4,"check-on-complete"],"internalCurrentStep":[32],"previous":[64],"next":[64]}]]],["wcs-counter",[[17,"wcs-counter",{"size":[513],"label":[1],"min":[1026],"max":[1026],"step":[1026],"value":[1026],"displayedValue":[32]}]]],["wcs-grid",[[1,"wcs-grid",{"serverMode":[4,"server-mode"],"data":[16],"loading":[4],"selectionConfig":[1,"selection-config"],"selectedItems":[8,"selected-items"],"wcsGridPaginationId":[1,"wcs-grid-pagination-id"],"rowIdPath":[1,"row-id-path"],"columns":[32],"paginationEl":[32],"rows":[32]},[[0,"wcsHiddenChange","onHiddenColumnChange"],[0,"wcsSortChange","sortChangeEventHandler"],[0,"wcsGridPaginationChange","paginationChangeEventHandler"],[8,"wcsGridPaginationChange","paginationChangeEventHandlerOutside"]]]]],["wcs-grid-pagination",[[1,"wcs-grid-pagination",{"availablePageSizes":[16],"currentPage":[2,"current-page"],"pageSize":[2,"page-size"],"itemsCount":[2,"items-count"],"pageCount":[2,"page-count"]}]]],["wcs-modal",[[4,"wcs-modal",{"withoutBackdrop":[516,"without-backdrop"],"show":[516],"showCloseButton":[516,"show-close-button"],"size":[1],"hideActions":[516,"hide-actions"]},[[4,"keydown","onKeyDown"]]]]],["wcs-dropdown",[[17,"wcs-dropdown",{"noArrow":[4,"no-arrow"],"mode":[1],"shape":[1],"disabled":[4],"placement":[1],"expanded":[32]},[[8,"click","onWindowClickEvent"],[0,"wcsDropdownItemClick","dropdownItemClick"],[0,"keydown","onKeyDown"]]]]],["wcs-galactic-menu",[[1,"wcs-galactic-menu",{"text":[1],"showPopoverMenu":[32]},[[8,"click","onWindowClickEvent"]]]]],["wcs-input",[[17,"wcs-input",{"fireFocusEvents":[4,"fire-focus-events"],"accept":[1],"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"autofocus":[4],"clearInput":[4,"clear-input"],"clearOnEdit":[4,"clear-on-edit"],"debounce":[2],"prefixLabel":[1,"prefix-label"],"suffixLabel":[1,"suffix-label"],"disabled":[4],"enterkeyhint":[1],"size":[513],"icon":[1],"inputmode":[1],"max":[1],"maxlength":[2],"min":[1],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"state":[513],"step":[1],"type":[1],"value":[1032],"hasFocus":[32],"passwordReveal":[32],"setFocus":[64],"setBlur":[64],"getInputElement":[64]}]]],["wcs-textarea",[[17,"wcs-textarea",{"fireFocusEvents":[4,"fire-focus-events"],"autocapitalize":[1],"autofocus":[4],"clearOnEdit":[1028,"clear-on-edit"],"debounce":[2],"disabled":[4],"icon":[1],"inputmode":[1],"enterkeyhint":[1],"maxlength":[2],"minlength":[2],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"state":[513],"cols":[2],"rows":[2],"wrap":[1],"autoGrow":[4,"auto-grow"],"value":[1025],"resize":[513],"hasFocus":[32],"fitContent":[64],"setFocus":[64],"setBlur":[64],"getInputElement":[64]}]]],["wcs-accordion",[[1,"wcs-accordion",{"hideActionText":[516,"hide-action-text"],"highlight":[516],"groupContentWithHeader":[516,"group-content-with-header"]},[[0,"wcsOpenChange","wcsOpenChangeHandler"]]]]],["wcs-accordion-content",[[1,"wcs-accordion-content"]]],["wcs-accordion-header",[[1,"wcs-accordion-header"]]],["wcs-accordion-panel",[[1,"wcs-accordion-panel",{"open":[1540],"hideActionText":[516,"hide-action-text"],"highlight":[516],"groupContentWithHeader":[516,"group-content-with-header"],"close":[64]}]]],["wcs-action-bar",[[1,"wcs-action-bar",{"gutter":[4],"hasTabs":[32]}]]],["wcs-app",[[1,"wcs-app"]]],["wcs-badge",[[1,"wcs-badge",{"shape":[1],"color":[1]}]]],["wcs-card",[[1,"wcs-card",{"mode":[1537]}]]],["wcs-card-body",[[1,"wcs-card-body"]]],["wcs-com-nav",[[1,"wcs-com-nav",{"appName":[1,"app-name"],"mobileMenuOpen":[32],"currentActiveSizing":[32]},[[0,"wcsClickOnFinalAction","onClickOnFinalAction"],[0,"wcsCategoryItemClicked","onClickOnFinalActionCat"],[8,"keydown","exitMobileMenuOnKeyDown"]]]]],["wcs-com-nav-category",[[1,"wcs-com-nav-category",{"label":[1],"categoryOpen":[32],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsCategoryOpened","onSubmenuOpened"]]]]],["wcs-com-nav-submenu",[[1,"wcs-com-nav-submenu",{"label":[1],"panelTitle":[1,"panel-title"],"panelDescription":[1,"panel-description"],"menuOpen":[32],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsSubmenuOpened","onSubmenuOpened"],[8,"keydown","onEscapeKeyDown"],[0,"wcsCategoryItemClicked","wcsCategoryItemClickedHandler"]]]]],["wcs-divider",[[1,"wcs-divider"]]],["wcs-dropdown-divider",[[1,"wcs-dropdown-divider"]]],["wcs-dropdown-header",[[1,"wcs-dropdown-header"]]],["wcs-dropdown-item",[[4,"wcs-dropdown-item",null,[[1,"mousedown","onMouseDown"],[0,"keydown","onKeyDown"]]]]],["wcs-field",[[1,"wcs-field"]]],["wcs-field-content",[[1,"wcs-field-content"]]],["wcs-field-label",[[1,"wcs-field-label"]]],["wcs-footer",[[1,"wcs-footer"]]],["wcs-galactic",[[1,"wcs-galactic",{"text":[1],"show":[32]}]]],["wcs-grid-column",[[1,"wcs-grid-column",{"path":[1],"name":[1],"sort":[4],"sortFn":[16],"formatter":[16],"sortOrder":[1025,"sort-order"],"width":[1],"customCells":[4,"custom-cells"],"hidden":[4]}]]],["wcs-grid-custom-cell",[[1,"wcs-grid-custom-cell",{"columnId":[1,"column-id"],"rowId":[8,"row-id"]}]]],["wcs-header",[[1,"wcs-header"]]],["wcs-hint",[[1,"wcs-hint",{"small":[1540]}]]],["wcs-icon",[[0,"wcs-icon",{"icon":[1],"size":[1]}]]],["wcs-label",[[1,"wcs-label",{"required":[516]}]]],["wcs-list-item",[[1,"wcs-list-item",{"activated":[1028]}]]],["wcs-list-item-properties",[[1,"wcs-list-item-properties"]]],["wcs-list-item-property",[[1,"wcs-list-item-property"]]],["wcs-native-select",[[1,"wcs-native-select",{"size":[513],"expanded":[32],"disabled":[32],"updateStyles":[64]}]]],["wcs-nav",[[1,"wcs-nav"]]],["wcs-nav-item",[[4,"wcs-nav-item",{"text":[513],"href":[513]},[[0,"keydown","onKeyDown"]]]]],["wcs-progress-radial",[[1,"wcs-progress-radial",{"size":[2],"showLabel":[4,"show-label"],"value":[2]}]]],["wcs-radio-group",[[1,"wcs-radio-group",{"value":[8],"name":[520],"mode":[513]},[[0,"wcsRadioClick","selectedOptionChanged"],[0,"keydown","handleKeyDown"],[0,"keyup","handleKeyUp"]]]]],["wcs-skeleton-circle",[[1,"wcs-skeleton-circle",{"animation":[513],"radius":[514]}]]],["wcs-skeleton-rectangle",[[1,"wcs-skeleton-rectangle",{"animation":[513],"rounded":[516],"height":[513],"width":[513]}]]],["wcs-skeleton-text",[[1,"wcs-skeleton-text",{"animation":[513],"height":[1]}]]],["wcs-switch",[[1,"wcs-switch",{"name":[1],"checked":[516],"labelAlignment":[513,"label-alignment"],"disabled":[4]}]]],["wcs-tab",[[1,"wcs-tab",{"header":[513],"itemKey":[8,"item-key"]}]]],["wcs-tabs",[[1,"wcs-tabs",{"align":[513],"selectedIndex":[2,"selected-index"],"selectedKey":[8,"selected-key"],"headersOnly":[4,"headers-only"],"gutter":[4],"description":[1],"headers":[32],"currentActiveTabIndex":[32]},[[0,"tabLoaded","onTabLoaded"]]]]],["wcs-tooltip",[[1,"wcs-tooltip",{"for":[1],"position":[513],"interactive":[4],"maxWidth":[8,"max-width"],"delay":[2],"duration":[2],"trigger":[1],"theme":[1],"content":[1],"appendTo":[1,"append-to"],"hide":[64],"show":[64],"disable":[64],"enable":[64]}]]],["wcs-progress-bar",[[1,"wcs-progress-bar",{"small":[4],"showLabel":[4,"show-label"],"value":[2]}]]],["wcs-radio",[[17,"wcs-radio",{"mode":[513],"value":[1544],"label":[1537],"checked":[1540],"disabled":[1028],"name":[1]},[[0,"keydown","onKeyDown"]]]]],["wcs-select_2",[[4,"wcs-select-option",{"disabled":[1540],"selected":[1540],"value":[8],"chipColor":[1,"chip-color"],"chipBackgroundColor":[1,"chip-background-color"],"multiple":[1540]},[[1,"mousedown","onMouseDown"],[0,"keydown","handleKeydown"]]],[1,"wcs-select",{"size":[513],"value":[1032],"placeholder":[1537],"disabled":[1028],"multiple":[516],"chips":[516],"name":[1],"compareWith":[16],"expanded":[32],"hasLoaded":[32],"displayText":[32],"focused":[32],"overlayDirection":[32],"open":[64],"close":[64]},[[1,"mousedown","onMouseDown"],[8,"click","onWindowClickEvent"],[0,"keydown","onKeyDown"],[0,"wcsSelectOptionClick","selectedOptionChanged"]]]]],["wcs-error_2",[[1,"wcs-error"],[1,"wcs-form-field",{"isError":[1540,"is-error"],"hasPrefix":[32],"hasSuffix":[32],"spiedElement":[32]}]]],["wcs-checkbox",[[17,"wcs-checkbox",{"name":[1],"indeterminate":[1540],"checked":[1540],"labelAlignment":[1537,"label-alignment"],"disabled":[4]}]]],["wcs-button",[[17,"wcs-button",{"type":[1025],"href":[1],"target":[1],"disabled":[516],"ripple":[4],"size":[513],"shape":[513],"mode":[513],"loading":[1028]},[[0,"click","onClick"]]]]],["wcs-mat-icon",[[1,"wcs-mat-icon",{"icon":[1],"size":[1],"family":[1]}]]],["wcs-spinner",[[1,"wcs-spinner",{"mode":[513]}]]]], options);
   });
 };
 

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-dc4d96d4.js';
-import { w as hasShadowDom } from './helpers-1f7170dd.js';
+import { w as hasShadowDom } from './helpers-1d55b67f.js';
 import { M as MDCRipple } from './component-5ce0752a.js';
 
 const WcsButtonSizeValues = ['s', 'm', 'l']; // as const keyword is used to infer and preserve the exact literal values of an array or object.

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

@@ -23,6 +23,7 @@ const Checkbox = class {
   render() {
     return (h(Host, null, h("label", { htmlFor: this.name, class: "wcs-container", "aria-disabled": this.disabled }, h("input", { onChange: (evt) => this.handleChange(evt), checked: this.checked, class: "wcs-checkbox", type: "checkbox", name: this.name, disabled: this.disabled, id: this.name }), h("span", { class: "wcs-checkmark" }), h("span", { class: "text" }, h("slot", null)))));
   }
+  static get delegatesFocus() { return true; }
 };
 let checkboxIds = 0;
 Checkbox.style = checkboxCss;

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

@@ -1 +1 @@
-{"file":"wcs-checkbox.entry.js","mappings":";;AAAA,MAAM,WAAW,GAAG,24EAA24E;;MCQl5E,QAAQ;;;;IACT,eAAU,GAAG,gBAAgB,WAAW,EAAE,EAAE,CAAC;gBACtC,IAAI,CAAC,UAAU;yBAK0B,KAAK;mBAKX,KAAK;0BAK0B,QAAQ;oBAK7D,KAAK;;EAOjC,YAAY,CAAC,MAAa;IACtB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;IAC3B,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC7B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;MAChB,OAAO,EAAE,IAAI,CAAC,OAAO;KACxB,CAAC,CAAC;GACN;EAED,MAAM;IACF,QACI,EAAC,IAAI,QACD,aAAO,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,eAAe,mBAAgB,IAAI,CAAC,QAAQ,IACzE,aAAO,QAAQ,EAAE,CAAC,GAAG,KAAK,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,EACzC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,IAAI,GACZ,EACR,YAAM,KAAK,EAAC,eAAe,GAAQ,EACnC,YAAM,KAAK,EAAC,MAAM,IACd,eAAO,CACJ,CACH,CACL,EACT;GACL;;AAGL,IAAI,WAAW,GAAG,CAAC,CAAC;;;;;","names":[],"sources":["./src/components/checkbox/checkbox.scss?tag=wcs-checkbox&encapsulation=shadow","./src/components/checkbox/checkbox.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    --wcs-checkbox-border-color: var(--wcs-text-medium);\n    --wcs-checkbox-text-color: var(--wcs-text-medium);\n    display: flex;\n}\n\n:host([disabled]) {\n    --wcs-checkbox-border-color: var(--wcs-light);\n    --wcs-checkbox-text-color: var(--wcs-text-disabled);\n\n    .wcs-container {\n        cursor: not-allowed;\n    }\n}\n\n.wcs-checkmark {\n    transition: background-color 225ms cubic-bezier(.17, .84, .44, 1),\n        color 225ms cubic-bezier(.17, .84, .44, 1);\n}\n\n/* Customize the label (the wcs-container) */\n.wcs-container {\n    position: relative;\n    font-size: 1rem;\n    user-select: none;\n    font-weight: 500;\n    display: flex;\n}\n\n.wcs-container:not([aria-disabled]) {\n    cursor: pointer;\n}\n\n/* Let the user choose the alignment of the checkbox with the label text */\n:host([label-alignment=\"top\"]){\n    .wcs-container {\n        align-items: start;\n    }\n}\n\n:host([label-alignment=\"center\"]){\n    .wcs-container {\n        align-items: center;\n    }\n}\n\n:host([label-alignment=\"bottom\"]){\n    .wcs-container {\n        align-items: flex-end;\n    }\n}\n\n/* Hide the browser's default checkbox */\n.wcs-container input {\n    position: absolute;\n    opacity: 0;\n    height: 1px;\n    width: 1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n}\n\n.wcs-container:hover:not([aria-disabled]), input:focus {\n    --wcs-checkbox-border-color: var(--wcs-primary);\n\n    --wcs-checkbox-text-color: var(--wcs-primary);\n}\n\n.wcs-container:has(input:focus-visible) {\n    @include focus-outline($border-radius: calc(var(--wcs-border-radius) / 2));\n}\n\n@supports not selector(.wcs-container:has(input:focus-visible)){\n    .wcs-container:focus-within {\n        @include focus-outline($border-radius: calc(var(--wcs-border-radius) /2));\n    }\n}\n\n/* Create a custom checkbox */\n.wcs-checkmark {\n    flex: 0 0 1.125rem;\n    width: 1.125rem;\n    height: 1.125rem;\n    border: 2px solid var(--wcs-checkbox-border-color);\n    border-radius: 3px;\n}\n\n:host([indeterminate]) {\n    .wcs-checkmark {\n        --wcs-checkbox-border-color: var(--wcs-primary);\n        background: var(--wcs-primary);\n    }\n}\n\n/* When the checkbox is checked, add a blue background */\n.wcs-container:not([aria-disabled]) input:checked~.wcs-checkmark {\n    background-color: var(--wcs-primary);\n    --wcs-checkbox-border-color: var(--wcs-primary);\n}\n.wcs-container[aria-disabled] input:checked~.wcs-checkmark {\n    background-color: var(--wcs-light);\n    --wcs-checkbox-border-color: var(--wcs-light);\n}\n\n/* Create the wcs-checkmark/indicator (hidden when not checked) */\n.wcs-checkmark:after {\n    content: \"\";\n    position: absolute;\n    display: none;\n}\n\n/* Show the wcs-checkmark when checked */\n.wcs-container input:checked~.wcs-checkmark:after {\n    display: flex;\n}\n\n\n\n/* Style the wcs-checkmark/indicator */\n.wcs-container .wcs-checkmark:after {\n    left: 7px;\n    width: 5px;\n    height: 10px;\n    border: solid var(--wcs-white, white);\n    border-width: 0 3px 3px 0;\n    -webkit-transform: rotate(45deg);\n    -ms-transform: rotate(45deg);\n    transform: rotate(45deg);\n}\n\n.wcs-container:not([aria-disabled]) input:checked~.text {\n    --wcs-checkbox-text-color: var(--wcs-primary);\n}\n\n.text {\n    color: var(--wcs-checkbox-text-color);\n    margin-left: 6px;\n    font-weight: 500;\n    line-height: 1.375;\n}\n","import { Component, Prop, Event, EventEmitter, ComponentInterface, h, Host } from '@stencil/core';\nimport { CheckboxChangeEventDetail, CheckboxLabelAlignment } from './checkbox-interface';\n\n@Component({\n    tag: 'wcs-checkbox',\n    styleUrl: 'checkbox.scss',\n    shadow: true\n})\nexport class Checkbox implements ComponentInterface {\n    private checkboxId = `wcs-checkbox-${checkboxIds++}`;\n    @Prop() name = this.checkboxId;\n\n    /**\n     * If `true` the checkbox is in indeterminate state.\n     */\n    @Prop({ reflect: true, mutable: true }) indeterminate = false;\n\n    /**\n     * If `true`, the checkbox is selected.\n     */\n    @Prop({ reflect: true, mutable: true }) checked = false;\n\n    /**\n     * Specifie the alignment of the checkbox with the label content\n     */\n    @Prop({ mutable: true, reflect: true }) labelAlignment: CheckboxLabelAlignment = 'center';\n\n    /**\n     * Specify wether the checkbox is disabled or not.\n     */\n    @Prop() disabled: boolean = false;\n\n    /**\n     * Emitted when the checked property has changed.\n     */\n    @Event() wcsChange!: EventEmitter<CheckboxChangeEventDetail>;\n\n    handleChange(_event: Event) {\n        this.indeterminate = false;\n        this.checked = !this.checked;\n        this.wcsChange.emit({\n            checked: this.checked\n        });\n    }\n\n    render() {\n        return (\n            <Host>\n                <label htmlFor={this.name} class=\"wcs-container\" aria-disabled={this.disabled}>\n                    <input onChange={(evt) => this.handleChange(evt)}\n                           checked={this.checked}\n                           class=\"wcs-checkbox\"\n                           type=\"checkbox\"\n                           name={this.name}\n                           disabled={this.disabled}\n                           id={this.name}>\n                    </input>\n                    <span class=\"wcs-checkmark\"></span>\n                    <span class=\"text\">\n                        <slot/>\n                    </span>\n                </label>\n            </Host>\n        );\n    }\n}\n\nlet checkboxIds = 0;\n"],"version":3}
+{"file":"wcs-checkbox.entry.js","mappings":";;AAAA,MAAM,WAAW,GAAG,24EAA24E;;MCUl5E,QAAQ;;;;IACT,eAAU,GAAG,gBAAgB,WAAW,EAAE,EAAE,CAAC;gBACtC,IAAI,CAAC,UAAU;yBAK0B,KAAK;mBAKX,KAAK;0BAK0B,QAAQ;oBAK7D,KAAK;;EAOjC,YAAY,CAAC,MAAa;IACtB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;IAC3B,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC7B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;MAChB,OAAO,EAAE,IAAI,CAAC,OAAO;KACxB,CAAC,CAAC;GACN;EAED,MAAM;IACF,QACI,EAAC,IAAI,QACD,aAAO,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,eAAe,mBAAgB,IAAI,CAAC,QAAQ,IACzE,aAAO,QAAQ,EAAE,CAAC,GAAG,KAAK,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,EACzC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,IAAI,GACZ,EACR,YAAM,KAAK,EAAC,eAAe,GAAQ,EACnC,YAAM,KAAK,EAAC,MAAM,IACd,eAAO,CACJ,CACH,CACL,EACT;GACL;;;AAGL,IAAI,WAAW,GAAG,CAAC,CAAC;;;;;","names":[],"sources":["./src/components/checkbox/checkbox.scss?tag=wcs-checkbox&encapsulation=shadow","./src/components/checkbox/checkbox.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    --wcs-checkbox-border-color: var(--wcs-text-medium);\n    --wcs-checkbox-text-color: var(--wcs-text-medium);\n    display: flex;\n}\n\n:host([disabled]) {\n    --wcs-checkbox-border-color: var(--wcs-light);\n    --wcs-checkbox-text-color: var(--wcs-text-disabled);\n\n    .wcs-container {\n        cursor: not-allowed;\n    }\n}\n\n.wcs-checkmark {\n    transition: background-color 225ms cubic-bezier(.17, .84, .44, 1),\n        color 225ms cubic-bezier(.17, .84, .44, 1);\n}\n\n/* Customize the label (the wcs-container) */\n.wcs-container {\n    position: relative;\n    font-size: 1rem;\n    user-select: none;\n    font-weight: 500;\n    display: flex;\n}\n\n.wcs-container:not([aria-disabled]) {\n    cursor: pointer;\n}\n\n/* Let the user choose the alignment of the checkbox with the label text */\n:host([label-alignment=\"top\"]){\n    .wcs-container {\n        align-items: start;\n    }\n}\n\n:host([label-alignment=\"center\"]){\n    .wcs-container {\n        align-items: center;\n    }\n}\n\n:host([label-alignment=\"bottom\"]){\n    .wcs-container {\n        align-items: flex-end;\n    }\n}\n\n/* Hide the browser's default checkbox */\n.wcs-container input {\n    position: absolute;\n    opacity: 0;\n    height: 1px;\n    width: 1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n}\n\n.wcs-container:hover:not([aria-disabled]), input:focus {\n    --wcs-checkbox-border-color: var(--wcs-primary);\n\n    --wcs-checkbox-text-color: var(--wcs-primary);\n}\n\n.wcs-container:has(input:focus-visible) {\n    @include focus-outline($border-radius: calc(var(--wcs-border-radius) / 2));\n}\n\n@supports not selector(.wcs-container:has(input:focus-visible)){\n    .wcs-container:focus-within {\n        @include focus-outline($border-radius: calc(var(--wcs-border-radius) /2));\n    }\n}\n\n/* Create a custom checkbox */\n.wcs-checkmark {\n    flex: 0 0 1.125rem;\n    width: 1.125rem;\n    height: 1.125rem;\n    border: 2px solid var(--wcs-checkbox-border-color);\n    border-radius: 3px;\n}\n\n:host([indeterminate]) {\n    .wcs-checkmark {\n        --wcs-checkbox-border-color: var(--wcs-primary);\n        background: var(--wcs-primary);\n    }\n}\n\n/* When the checkbox is checked, add a blue background */\n.wcs-container:not([aria-disabled]) input:checked~.wcs-checkmark {\n    background-color: var(--wcs-primary);\n    --wcs-checkbox-border-color: var(--wcs-primary);\n}\n.wcs-container[aria-disabled] input:checked~.wcs-checkmark {\n    background-color: var(--wcs-light);\n    --wcs-checkbox-border-color: var(--wcs-light);\n}\n\n/* Create the wcs-checkmark/indicator (hidden when not checked) */\n.wcs-checkmark:after {\n    content: \"\";\n    position: absolute;\n    display: none;\n}\n\n/* Show the wcs-checkmark when checked */\n.wcs-container input:checked~.wcs-checkmark:after {\n    display: flex;\n}\n\n\n\n/* Style the wcs-checkmark/indicator */\n.wcs-container .wcs-checkmark:after {\n    left: 7px;\n    width: 5px;\n    height: 10px;\n    border: solid var(--wcs-white, white);\n    border-width: 0 3px 3px 0;\n    -webkit-transform: rotate(45deg);\n    -ms-transform: rotate(45deg);\n    transform: rotate(45deg);\n}\n\n.wcs-container:not([aria-disabled]) input:checked~.text {\n    --wcs-checkbox-text-color: var(--wcs-primary);\n}\n\n.text {\n    color: var(--wcs-checkbox-text-color);\n    margin-left: 6px;\n    font-weight: 500;\n    line-height: 1.375;\n}\n","import { Component, Prop, Event, EventEmitter, ComponentInterface, h, Host } from '@stencil/core';\nimport { CheckboxChangeEventDetail, CheckboxLabelAlignment } from './checkbox-interface';\n\n@Component({\n    tag: 'wcs-checkbox',\n    styleUrl: 'checkbox.scss',\n    shadow: {\n        delegatesFocus: true\n    }\n})\nexport class Checkbox implements ComponentInterface {\n    private checkboxId = `wcs-checkbox-${checkboxIds++}`;\n    @Prop() name = this.checkboxId;\n\n    /**\n     * If `true` the checkbox is in indeterminate state.\n     */\n    @Prop({ reflect: true, mutable: true }) indeterminate = false;\n\n    /**\n     * If `true`, the checkbox is selected.\n     */\n    @Prop({ reflect: true, mutable: true }) checked = false;\n\n    /**\n     * Specifie the alignment of the checkbox with the label content\n     */\n    @Prop({ mutable: true, reflect: true }) labelAlignment: CheckboxLabelAlignment = 'center';\n\n    /**\n     * Specify wether the checkbox is disabled or not.\n     */\n    @Prop() disabled: boolean = false;\n\n    /**\n     * Emitted when the checked property has changed.\n     */\n    @Event() wcsChange!: EventEmitter<CheckboxChangeEventDetail>;\n\n    handleChange(_event: Event) {\n        this.indeterminate = false;\n        this.checked = !this.checked;\n        this.wcsChange.emit({\n            checked: this.checked\n        });\n    }\n\n    render() {\n        return (\n            <Host>\n                <label htmlFor={this.name} class=\"wcs-container\" aria-disabled={this.disabled}>\n                    <input onChange={(evt) => this.handleChange(evt)}\n                           checked={this.checked}\n                           class=\"wcs-checkbox\"\n                           type=\"checkbox\"\n                           name={this.name}\n                           disabled={this.disabled}\n                           id={this.name}>\n                    </input>\n                    <span class=\"wcs-checkmark\"></span>\n                    <span class=\"text\">\n                        <slot/>\n                    </span>\n                </label>\n            </Host>\n        );\n    }\n}\n\nlet checkboxIds = 0;\n"],"version":3}

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-dc4d96d4.js';
-import { i as isSpaceKey, a as isEnterKey } from './helpers-1f7170dd.js';
+import { i as isSpaceKey, a as isEnterKey } from './helpers-1d55b67f.js';
 
 const comNavCategoryCss = ":host{display:block;padding-bottom:var(--wcs-padding);}:host .label-container{display:block;padding-left:calc(9 * var(--wcs-base-margin));color:var(--wcs-gray)}:host ::slotted(a):after{font-family:icons;padding-left:var(--wcs-base-margin);font-size:0.6rem;content:\"\\f107\";line-height:1;box-sizing:border-box}:host ::slotted(a){display:block;cursor:pointer;text-decoration:none;font-size:16px;color:var(--wcs-gray);padding-left:calc(12 * var(--wcs-base-margin));padding-top:calc(1.5 * var(--wcs-base-margin));padding-bottom:calc(1.5 * var(--wcs-base-margin))}:host ::slotted(a:focus-visible){outline:2px dashed var(--wcs-primary);outline-offset:0.1rem;border-radius:2px}@supports not selector(::slotted(a:focus-visible)){:host ::slotted(a:focus-within){outline:2px dashed var(--wcs-primary);outline-offset:0.1rem;border-radius:2px}}@media screen and (min-width: 576px){:host{padding-bottom:unset}:host .item-container:not([data-open]){display:none}:host .label:after{font-family:icons;padding-left:var(--wcs-base-margin);font-size:0.6rem;content:\"\\f107\";line-height:1;box-sizing:border-box}:host .label-container{cursor:pointer;user-select:none;display:flex;align-items:center;padding-left:unset;color:var(--wcs-white)}:host .label-container:focus-visible{outline:2px dashed var(--wcs-white);outline-offset:0.1rem;border-radius:5px}@supports not selector(.label-container:focus-visible){:host .label-container:focus-within{outline:2px dashed var(--wcs-white);outline-offset:0.1rem;border-radius:5px}}:host .label-container[data-open]: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-primary);transform:rotate(45deg)}:host .item-container[data-open]{position:absolute;left:calc(50% + var(--wcs-com-content-max-width) / 8);top:0;right:0;padding:50px 0 50px 50px;background-blend-mode:multiply;background-color:rgba(0, 0, 0, 0.15);box-sizing:border-box;height:100%;display:flex;flex-direction:column;align-items:start}:host .item-container[data-open] ::slotted(a:not(:first-child)){margin-top:24px}:host .item-container[data-open] ::slotted(a){display:unset;color:var(--wcs-white);padding-left:unset;padding-top:unset;padding-bottom:unset}:host .item-container[data-open] ::slotted(a:focus-visible){outline:2px dashed var(--wcs-white);outline-offset:0.1rem;border-radius:2px}@supports not selector(::slotted(a:focus-visible)){:host .item-container[data-open] ::slotted(a:focus-within){outline:2px dashed var(--wcs-white);outline-offset:0.1rem;border-radius:2px}}}";
 

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-dc4d96d4.js';
-import { b as isEscapeKey, i as isSpaceKey, a as isEnterKey } from './helpers-1f7170dd.js';
+import { b as isEscapeKey, i as isSpaceKey, a as isEnterKey } from './helpers-1d55b67f.js';
 import { r as registerCloseHandlerForFocusOutEventOn } from './com-nav-utils-f26d3b2d.js';
 
 const comNavSubmenuCss = ":host{display:block;padding-bottom:var(--wcs-padding)}:host .menu-button{display:block;font-weight:500;padding-left:calc(3 * var(--wcs-base-margin))}:host .arrow-icon{display:none}:host .arrow-container{display:none}:host .label{text-transform:uppercase;font-size:16px;cursor:unset;font-weight:500;color:var(--wcs-gray);text-decoration:none}:host .drawer{display:contents}:host .drawer-container{display:contents}:host .drawer-description{display:none}:host .menu-items{}:host .menu-items ::slotted(a):after{font-family:icons;padding-left:var(--wcs-base-margin);font-size:0.6rem;content:\"\\f107\";line-height:1;box-sizing:border-box}:host .menu-items ::slotted(a){user-select:none;cursor:pointer;text-decoration:none;font-size:16px;color:var(--wcs-gray);font-weight:500;display:block;padding-top:calc(1.5 * var(--wcs-base-margin));padding-bottom:calc(1.5 * var(--wcs-base-margin));padding-left:calc(6 * var(--wcs-base-margin))}:host .menu-items ::slotted(a:focus-visible){outline:2px dashed var(--wcs-primary);outline-offset:0.1rem;border-radius:2px}@supports not selector(::slotted(a:focus-visible)){:host .menu-items ::slotted(a:focus-within){outline:2px dashed var(--wcs-primary);outline-offset:0.1rem;border-radius:2px}}@media screen and (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:2px dashed var(--wcs-primary);outline-offset:0.1rem;border-radius:2px}@supports not selector(.menu-button:focus-visible){:host{outline:2px dashed var(--wcs-primary);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-base-margin)}:host .arrow-icon:not([data-open]){transform:rotate(90deg)}:host .arrow-icon[data-open]{transform:rotate(-90deg)}:host .drawer{display:none;position:absolute;top:75px;z-index:8888;left:0;width:100%;box-sizing:border-box;padding:50px;background-color:var(--wcs-primary);color:var(--wcs-white)}: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 80px 0 50px;display:flex;flex-direction:column;align-items:flex-end}:host .menu-items ::slotted(*:not(:first-child)){margin-top:24px}:host .menu-items ::slotted(a){color:var(--wcs-white);font-weight:400;display:unset;padding-top:unset;padding-bottom:unset;padding-left:unset}:host .menu-items ::slotted(a:focus-visible){outline:2px dashed var(--wcs-white);outline-offset:0.1rem;border-radius:2px}@supports not selector(::slotted(a:focus-visible)){:host .menu-items ::slotted(a:focus-within){outline:2px dashed var(--wcs-white);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 24px 0;font-size:1.5rem;line-height:1.25;font-weight:400}:host .drawer-container p{margin-top:0;margin-bottom:1rem;font-weight:500;font-size:1rem;line-height:1.375}:host .drawer[data-open]{display:block}:host .drawer-description{display:block}}";

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-dc4d96d4.js';
 import { r as registerCloseHandlerForFocusOutEventOn } from './com-nav-utils-f26d3b2d.js';
-import { i as isSpaceKey, a as isEnterKey, b as isEscapeKey } from './helpers-1f7170dd.js';
+import { i as isSpaceKey, a as isEnterKey, b as isEscapeKey } from './helpers-1d55b67f.js';
 
 const comNavCss = ":host{display:block;position:relative;height:75px;border-bottom:solid 1px var(--wcs-text-light)}:host .container{padding:0 var(--wcs-padding);height:100%;display:flex;align-items:center;flex-direction:row;justify-content:space-between}: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:400;font-size:1.5rem;line-height:1.25;color:var(--wcs-gray)}:host .menu-bar{display:none}:host ::slotted(a){padding-top:calc(1.5 * var(--wcs-base-margin));padding-bottom:calc(1.5 * var(--wcs-base-margin));padding-left:calc(3 * var(--wcs-base-margin));display:flex;align-items:center;height:100%;font-size:16px;cursor:pointer;font-weight:500;color:var(--wcs-gray);text-decoration:none}:host ::slotted(a):after{font-family:icons;padding-left:var(--wcs-base-margin);font-size:0.6rem;content:\"\\f107\";line-height:1;box-sizing:border-box}:host ::slotted(a:focus-visible){outline:2px dashed var(--wcs-primary);outline-offset:0.1rem;border-radius:2px}@supports not selector(::slotted(a:focus-visible)){:host ::slotted(a:focus-within){outline:2px dashed var(--wcs-primary);outline-offset:0.1rem;border-radius:2px}}:host #mobile-menu-icon{height:24px;padding-left:calc(2 * var(--wcs-base-margin));margin-left:var(--wcs-base-margin);border-left:solid 1px var(--wcs-text-light)}:host #mobile-menu-icon:focus{outline:none}:host #mobile-menu-icon:focus-visible::after{outline:2px dashed var(--wcs-primary);outline-offset:4px;border-radius:0.1rem}@supports not selector(#mobile-menu-icon:focus-visible::after){:host #mobile-menu-icon:focus::after{outline:2px dashed var(--wcs-primary);outline-offset:4px;border-radius:0.1rem}}:host #mobile-menu-icon:after{font-family:icons;font-size:24px;cursor:pointer;content:\"\\f198\";line-height:1;box-sizing:border-box}:host #mobile-menu-icon[data-mobile-open]:after{content:\"\\f129\"}:host .mobile-overlay{display:none}:host .mobile-overlay[data-mobile-open]{padding-top:calc(2 * var(--wcs-base-margin));padding-bottom:calc(2 * var(--wcs-base-margin));position:relative;top:0;left:0;right:0;display:block;z-index:9999;background-color:var(--wcs-white)}@media screen and (min-width: 576px){:host .container{margin:0 auto;max-width:var(--wcs-com-content-max-width)}:host .menu-bar{display:flex;align-items:center;height:100%;margin-left:50px}:host .menu-bar ::slotted(*:not(:first-child)){margin-left:40px}:host .menu-bar ::slotted(a:focus-visible){outline:2px dashed var(--wcs-primary);outline-offset:0.1rem;border-radius:2px}@supports not selector(::slotted(a:focus-visible)){:host .menu-bar ::slotted(a:focus-within){outline:2px dashed var(--wcs-primary);outline-offset:0.1rem;border-radius:2px}}:host #mobile-menu-icon{display:none}:host .mobile-overlay{display:none !important}:host ::slotted(a){padding-top:unset;padding-bottom:unset;padding-left:unset}}";
 

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-dc4d96d4.js';
-import { c as isKeyup, d as isKeydown, e as isHomeKey, f as isEndKey } from './helpers-1f7170dd.js';
+import { c as isKeyup, d as isKeydown, e as isHomeKey, f as isEndKey } from './helpers-1d55b67f.js';
 
 const WcsCounterSizeValues = ['m', 'l']; // as const keyword is used to infer and preserve the exact literal values of an array or object.
 function isWcsCounterSize(size) {
@@ -141,6 +141,7 @@ const Counter = class {
   render() {
     return (h(Host, null, h("wcs-button", { class: "wcs-primary", shape: "round", size: "s", tabindex: -1, onClick: () => this.handleDecrement(), onBlur: (event) => this.wcsBlur.emit(event), disabled: this.value === this.min }, h("wcs-mat-icon", { icon: "remove", size: "s" })), h("div", { class: "counter-container" }, h("span", { id: "outlier-down", class: "outliers hidden", "aria-hidden": "true" }, this.displayedValue - this.step), h("span", { tabindex: "0", role: "spinbutton", class: "current-value", onBlur: (event) => this.wcsBlur.emit(event), onKeyDown: (event) => this.onKeyDown(event), "aria-valuenow": this.value, "aria-valuetext": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-label": this.label }, this.displayedValue), h("span", { id: "outlier-up", class: "outliers hidden", "aria-hidden": "true" }, this.displayedValue + this.step)), h("wcs-button", { class: "wcs-primary", shape: "round", size: "s", tabindex: -1, onClick: () => this.handleIncrement(), onBlur: (event) => this.wcsBlur.emit(event), disabled: this.value === this.max }, h("wcs-mat-icon", { icon: "add", size: "s" }))));
   }
+  static get delegatesFocus() { return true; }
   get el() { return getElement(this); }
   static get watchers() { return {
     "value": ["valueChange"]

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

@@ -1 +1 @@
-{"file":"wcs-counter.entry.js","mappings":";;;AAMO,MAAM,oBAAoB,GAAG,CAAC,GAAG,EAAE,GAAG,CAAU,CAAC;SAIxC,gBAAgB,CAAC,IAAY;;EAEzC,OAAO,oBAAoB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;AAC/C;;ACbA,MAAM,UAAU,GAAG,6zDAA6zD;;ACeh1D,MAAM,kBAAkB,GAAG,KAAK,CAAA;MAWnB,OAAO;;;;;IA8CR,mBAAc,GAAG,KAAK,CAAC;IAqFvB,wBAAmB,GAAG;MAC1B,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC;SACzC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,OAAO,KAAK,KAAK,CAAmB,CAAC;KAC3D,CAAA;IAEO,oBAAe,GAAG;MACtB,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE;;;QAGjD,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;QAC3B,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC;QACxB,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;OACtB;KACJ,CAAC;IAEM,oBAAe,GAAG;MACtB,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE;;;QAGjD,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;QAC3B,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC;QACxB,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;OACxB;KACJ,CAAC;IAEM,YAAO,GAAG,CAAC,SAAwB;;;MAGvC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;MAE3B,MAAM,gBAAgB,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;MACpD,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC;SACjD,MAAM,CAAC,CAAC,IAAqB,KAAK,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC;MAE5E,gBAAgB,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC;MACvD,QAAQ,CAAC,OAAO,CAAC,CAAC,IAAqB;QACnC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAA;OAClC,CAAC,CAAC;MACH,UAAU,CAAC;QACP,gBAAgB,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC;QAC1D,QAAQ,CAAC,OAAO,CAAC,CAAC,IAAqB;UACnC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;SAC/B,CAAC,CAAC;QACH,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC;QAEjC,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;OAC/B,EAAE,IAAI,GAAG,kBAAkB,GAAG,EAAE,CAAC,CAAC;KACtC,CAAA;gBA9K6C,GAAG;;;;gBAuBX,CAAC;;;;EAwBvC,iBAAiB;IACb,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAEzB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;MAC9B,OAAO,CAAC,KAAK,CAAC,yCAAyC,IAAI,CAAC,IAAI,sBAAsB,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;MAC1H,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC;KACnB;GACJ;;;;EAMD,WAAW,CAAC,MAAW,EAAE,MAAW;IAChC,IAAG,MAAM,KAAK,MAAM;MAAE,OAAO;IAE7B,IAAI,CAAC,iBAAiB,EAAE,CAAC;GAC5B;EAEO,iBAAiB;IACrB,IAAI,CAAC,kCAAkC,EAAE,CAAC;IAC1C,IAAI,CAAC,2BAA2B,EAAE,CAAC;IACnC,IAAI,CAAC,sCAAsC,EAAE,CAAC;GACjD;EAEO,sCAAsC;IAC1C,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;MACtB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC;KACpC;GACJ;EAEO,2BAA2B;IAC/B,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE;MACjD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;KACzB;SAAM,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE;MACxD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;KACzB;GACJ;EAEO,kCAAkC;;IACtC,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,EAAE;MACjD,IAAI,CAAC,KAAK,GAAG,MAAA,IAAI,CAAC,GAAG,mCAAI,CAAC,CAAC;KAC9B;GACJ;EAED,SAAS,CAAC,MAAqB;IAC3B,IAAI,OAAO,CAAC,MAAM,CAAC,EAAE;MACjB,MAAM,CAAC,cAAc,EAAE,CAAC;MACxB,IAAI,CAAC,eAAe,EAAE,CAAA;KACzB;IACD,IAAI,SAAS,CAAC,MAAM,CAAC,EAAE;MACnB,MAAM,CAAC,cAAc,EAAE,CAAC;MACxB,IAAI,CAAC,eAAe,EAAE,CAAA;KACzB;IACD,IAAI,SAAS,CAAC,MAAM,CAAC,EAAE;MACnB,MAAM,CAAC,cAAc,EAAE,CAAC;MACxB,IAAI,IAAI,CAAC,GAAG,IAAI,IAAI,EAAE;QAClB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;QACtB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC;QACjC,IAAI,CAAC,YAAY,EAAE,CAAC;OACvB;KACJ;IACD,IAAI,QAAQ,CAAC,MAAM,CAAC,EAAE;MAClB,MAAM,CAAC,cAAc,EAAE,CAAC;MACxB,IAAI,IAAI,CAAC,GAAG,IAAI,IAAI,EAAE;QAClB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;QACtB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC;QACjC,IAAI,CAAC,YAAY,EAAE,CAAC;OACvB;KACJ;GACJ;EAEO,YAAY;IAChB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;MAChB,KAAK,EAAE,IAAI,CAAC,KAAK;KACpB,CAAC,CAAC;GACN;EAqDD,MAAM;IACF,QACI,EAAC,IAAI,QACD,kBAAY,KAAK,EAAC,aAAa,EACnB,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,GAAG,EACR,QAAQ,EAAE,CAAC,CAAC,EACZ,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,EAAE,EACrC,MAAM,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAC3C,QAAQ,EAAE,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,GAAG,IACzC,oBAAc,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,GAAG,GAAgB,CAC3C,EACb,WAAK,KAAK,EAAC,mBAAmB,IAC1B,YAAM,EAAE,EAAC,cAAc,EAAC,KAAK,EAAC,iBAAiB,iBAC7B,MAAM,IAAE,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,IAAI,CAAQ,EACjE,YAAM,QAAQ,EAAC,GAAG,EACZ,IAAI,EAAC,YAAY,EACjB,KAAK,EAAC,eAAe,EACrB,MAAM,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAC3C,SAAS,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,mBAC5B,IAAI,CAAC,KAAK,oBACT,IAAI,CAAC,KAAK,mBACX,IAAI,CAAC,GAAG,mBACR,IAAI,CAAC,GAAG,gBACX,IAAI,CAAC,KAAK,IAAG,IAAI,CAAC,cAAc,CAAQ,EAC1D,YAAM,EAAE,EAAC,YAAY,EAAC,KAAK,EAAC,iBAAiB,iBAC3B,MAAM,IAAE,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,IAAI,CAAQ,CAC/D,EACN,kBAAY,KAAK,EAAC,aAAa,EACnB,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,GAAG,EACR,QAAQ,EAAE,CAAC,CAAC,EACZ,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,EAAE,EACrC,MAAM,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAC3C,QAAQ,EAAE,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,GAAG,IACzC,oBAAc,IAAI,EAAC,KAAK,EAAC,IAAI,EAAC,GAAG,GAAgB,CACxC,CACV,EACT;GACL;;;;;;;;;;","names":[],"sources":["./src/components/counter/counter-interface.ts","./src/components/counter/counter.scss?tag=wcs-counter&encapsulation=shadow","./src/components/counter/counter.tsx"],"sourcesContent":["import { WcsSize } from \"../../shared-types\";\n\nexport interface CounterChangeEventDetail {\n    value: number;\n}\n\nexport const WcsCounterSizeValues = ['m', 'l'] as const; // as const keyword is used to infer and preserve the exact literal values of an array or object.\n\nexport type WcsCounterSize = Extract<WcsSize, typeof WcsCounterSizeValues[number]>;\n\nexport function isWcsCounterSize(size: string): size is WcsCounterSize {\n    // @ts-ignore : ignore size type, as it is checked with WcsInputSizeValues\n    return WcsCounterSizeValues.includes(size);\n}\n","@import '../../style/focus-outline.scss';\n\n@keyframes spin-animation-up {\n    0% {\n        transform: translateY(0);\n        transform-origin: center;\n        opacity: 1;\n    }\n    50% {\n        opacity: 0.5;\n    }\n    100% {\n        transform: translateY(30px);\n        transform-origin: center;\n        opacity: 1;\n    }\n}\n\n@keyframes spin-animation-down {\n    0% {\n        transform: translateY(0);\n        transform-origin: center;\n        opacity: 1;\n    }\n    50% {\n        opacity: 0.5;\n    }\n    100% {\n        transform: translateY(-30px);\n        transform-origin: center;\n        opacity: 1;\n    }\n}\n\n:host {\n    box-sizing: border-box;\n    height: var(--wcs-counter-host-height);\n    --wcs-input-icon-color: var(--wcs-text-medium);\n    --wcs-internal-input-border-radius: calc(var(--wcs-border-radius) * 10); // 80 px\n    --wcs-internal-input-border-width: 2px;\n    font-family: var(--wcs-font-sans-serif);\n    font-size: var(--wcs-counter-font-size);\n    font-weight: bold;\n    display: flex;\n    align-items: center;\n    padding: var(--wcs-counter-host-padding);\n    width: fit-content;\n    overflow: hidden;\n    border-radius: var(--wcs-internal-input-border-radius);\n    background-color: var(--wcs-light);\n    border: var(--wcs-internal-input-border-width) solid var(--wcs-light);\n    background-clip: padding-box;\n\n    .counter-container {\n        height: var(--wcs-counter-host-height);\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        margin: 0 calc(2* var(--wcs-base-margin));\n        position: relative;\n    }\n\n    .outliers {\n        position: absolute;\n    }\n\n    #outlier-down {\n        top: calc((var(--wcs-counter-host-height) / 2) * -1);\n    }\n\n    #outlier-up {\n        bottom: calc((var(--wcs-counter-host-height) / 2) * -1);\n    }\n\n    span.current-value {\n        &:focus-visible {\n            @include focus-outline;\n        }\n    }\n\n    .animate-up {\n        animation: spin-animation-up 0.175s ease-in-out;\n    }\n\n    .animate-down {\n        animation: spin-animation-down 0.175s ease-in-out;\n    }\n\n    .hidden {\n        opacity: 0;\n    }\n}\n\n:host([size='m']) { // Default\n    --wcs-counter-host-padding: 4px;\n    --wcs-counter-host-height: var(--wcs-size-m);\n    --wcs-counter-font-size: 1rem;\n}\n\n:host([size='l']) {\n    --wcs-counter-host-padding: 8px;\n    --wcs-counter-host-height: var(--wcs-size-l);\n    --wcs-counter-font-size: 1.0625rem;\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n    State,\n    Watch\n} from '@stencil/core';\nimport { isEndKey, isHomeKey, isKeydown, isKeyup } from '../../utils/helpers';\nimport { CounterChangeEventDetail, isWcsCounterSize, WcsCounterSize, WcsCounterSizeValues } from './counter-interface';\n\nconst ANIMATION_DURATION = 0.175 // seconds\n\n/**\n * Counter component, meant to be used for small range of values (e.g : 0 - 5).<br>\n * For larger or specific ranges, please use [wcs-input (type number)](.?path=/docs/components-input--documentation)\n */\n@Component({\n    tag: 'wcs-counter',\n    styleUrl: 'counter.scss',\n    shadow: true,\n})\nexport class Counter implements ComponentInterface {\n    @Element() private el!: HTMLElement;\n\n    /**\n     * Specify the size (height) of the counter.\n     */\n    @Prop({reflect: true}) size: WcsCounterSize = 'm';\n\n    /**\n     * The label of the counter.<br/>\n     * e.g. Number of passengers, train carriages, railroad tracks...\n     */\n    @Prop({mutable: false}) label!: string;\n\n    /**\n     * The minimum value of the counter.\n     * If the value of the min attribute isn't set, then the element has no minimum value.\n     */\n    @Prop({mutable: true}) min?: number;\n\n    /**\n     * The maximum value of the counter.\n     * If the value of the max attribute isn't set, then the element has no maximum value.\n     */\n    @Prop({mutable: true}) max?: number;\n\n    /**\n     * Defines by how much the counter will be incremented or decremented.\n     */\n    @Prop({mutable: true}) step: number = 1;\n\n    /**\n     * Emitted when the value of the counter has changed.\n     */\n    @Event() wcsChange!: EventEmitter<CounterChangeEventDetail>;\n\n    /**\n     * 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 = false;\n\n    /**\n     * Emitted when the counter loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    componentWillLoad() {\n        this.handleValueChange();\n\n        if (!isWcsCounterSize(this.size)) {\n            console.error(`Invalid size value for wcs-counter : \"${this.size}\". Must be one of \"${WcsCounterSizeValues.join(', ')}\"`);\n            this.size = \"m\"; // Default fallback value\n        }\n    }\n\n    /**\n     * 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 (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 getCounterContainer = (): HTMLDivElement => {\n        return Array.from(this.el.shadowRoot.children)\n            .find(el => el.tagName === 'DIV') as HTMLDivElement;\n    }\n\n    private handleDecrement = () => {\n        if (this.min === undefined || this.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.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 counterContainer = this.getCounterContainer();\n        const outliers = Array.from(counterContainer.children)\n            .filter((span: HTMLSpanElement) => span.classList.contains('outliers'));\n\n        counterContainer.classList.add('animate-' + direction);\n        outliers.forEach((span: HTMLSpanElement) => {\n            span.classList.remove('hidden')\n        });\n        setTimeout(() => {\n            counterContainer.classList.remove('animate-' + direction);\n            outliers.forEach((span: HTMLSpanElement) => {\n                span.classList.add('hidden')\n            });\n            this.displayedValue = this.value;\n\n            this.animateRunning = false;\n        }, 1000 * ANIMATION_DURATION - 20);\n    }\n\n    render() {\n        return (\n            <Host>\n                <wcs-button class=\"wcs-primary\"\n                            shape=\"round\"\n                            size=\"s\"\n                            tabindex={-1}\n                            onClick={() => this.handleDecrement()}\n                            onBlur={(event) => this.wcsBlur.emit(event)}\n                            disabled={this.value === this.min}>\n                    <wcs-mat-icon icon=\"remove\" size=\"s\"></wcs-mat-icon>\n                </wcs-button>\n                <div class=\"counter-container\">\n                    <span id=\"outlier-down\" class=\"outliers hidden\"\n                          aria-hidden=\"true\">{this.displayedValue - this.step}</span>\n                    <span tabindex=\"0\"\n                          role=\"spinbutton\"\n                          class=\"current-value\"\n                          onBlur={(event) => this.wcsBlur.emit(event)}\n                          onKeyDown={(event) => this.onKeyDown(event)}\n                          aria-valuenow={this.value}\n                          aria-valuetext={this.value}\n                          aria-valuemin={this.min}\n                          aria-valuemax={this.max}\n                          aria-label={this.label}>{this.displayedValue}</span>\n                    <span id=\"outlier-up\" class=\"outliers hidden\"\n                          aria-hidden=\"true\">{this.displayedValue + this.step}</span>\n                </div>\n                <wcs-button class=\"wcs-primary\"\n                            shape=\"round\"\n                            size=\"s\"\n                            tabindex={-1}\n                            onClick={() => this.handleIncrement()}\n                            onBlur={(event) => this.wcsBlur.emit(event)}\n                            disabled={this.value === this.max}>\n                    <wcs-mat-icon icon=\"add\" size=\"s\"></wcs-mat-icon>\n                </wcs-button>\n            </Host>\n        );\n    }\n}\n"],"version":3}
+{"file":"wcs-counter.entry.js","mappings":"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","names":[],"sources":["./src/components/counter/counter-interface.ts","./src/components/counter/counter.scss?tag=wcs-counter&encapsulation=shadow","./src/components/counter/counter.tsx"],"sourcesContent":["import { WcsSize } from \"../../shared-types\";\n\nexport interface CounterChangeEventDetail {\n    value: number;\n}\n\nexport const WcsCounterSizeValues = ['m', 'l'] as const; // as const keyword is used to infer and preserve the exact literal values of an array or object.\n\nexport type WcsCounterSize = Extract<WcsSize, typeof WcsCounterSizeValues[number]>;\n\nexport function isWcsCounterSize(size: string): size is WcsCounterSize {\n    // @ts-ignore : ignore size type, as it is checked with WcsInputSizeValues\n    return WcsCounterSizeValues.includes(size);\n}\n","@import '../../style/focus-outline.scss';\n\n@keyframes spin-animation-up {\n    0% {\n        transform: translateY(0);\n        transform-origin: center;\n        opacity: 1;\n    }\n    50% {\n        opacity: 0.5;\n    }\n    100% {\n        transform: translateY(30px);\n        transform-origin: center;\n        opacity: 1;\n    }\n}\n\n@keyframes spin-animation-down {\n    0% {\n        transform: translateY(0);\n        transform-origin: center;\n        opacity: 1;\n    }\n    50% {\n        opacity: 0.5;\n    }\n    100% {\n        transform: translateY(-30px);\n        transform-origin: center;\n        opacity: 1;\n    }\n}\n\n:host {\n    box-sizing: border-box;\n    height: var(--wcs-counter-host-height);\n    --wcs-input-icon-color: var(--wcs-text-medium);\n    --wcs-internal-input-border-radius: calc(var(--wcs-border-radius) * 10); // 80 px\n    --wcs-internal-input-border-width: 2px;\n    font-family: var(--wcs-font-sans-serif);\n    font-size: var(--wcs-counter-font-size);\n    font-weight: bold;\n    display: flex;\n    align-items: center;\n    padding: var(--wcs-counter-host-padding);\n    width: fit-content;\n    overflow: hidden;\n    border-radius: var(--wcs-internal-input-border-radius);\n    background-color: var(--wcs-light);\n    border: var(--wcs-internal-input-border-width) solid var(--wcs-light);\n    background-clip: padding-box;\n\n    .counter-container {\n        height: var(--wcs-counter-host-height);\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        margin: 0 calc(2* var(--wcs-base-margin));\n        position: relative;\n    }\n\n    .outliers {\n        position: absolute;\n    }\n\n    #outlier-down {\n        top: calc((var(--wcs-counter-host-height) / 2) * -1);\n    }\n\n    #outlier-up {\n        bottom: calc((var(--wcs-counter-host-height) / 2) * -1);\n    }\n\n    span.current-value {\n        &:focus-visible {\n            @include focus-outline;\n        }\n    }\n\n    .animate-up {\n        animation: spin-animation-up 0.175s ease-in-out;\n    }\n\n    .animate-down {\n        animation: spin-animation-down 0.175s ease-in-out;\n    }\n\n    .hidden {\n        opacity: 0;\n    }\n}\n\n:host([size='m']) { // Default\n    --wcs-counter-host-padding: 4px;\n    --wcs-counter-host-height: var(--wcs-size-m);\n    --wcs-counter-font-size: 1rem;\n}\n\n:host([size='l']) {\n    --wcs-counter-host-padding: 8px;\n    --wcs-counter-host-height: var(--wcs-size-l);\n    --wcs-counter-font-size: 1.0625rem;\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n    State,\n    Watch\n} from '@stencil/core';\nimport { isEndKey, isHomeKey, isKeydown, isKeyup } from '../../utils/helpers';\nimport { CounterChangeEventDetail, isWcsCounterSize, WcsCounterSize, WcsCounterSizeValues } from './counter-interface';\n\nconst ANIMATION_DURATION = 0.175 // seconds\n\n/**\n * Counter component, meant to be used for small range of values (e.g : 0 - 5).<br>\n * For larger or specific ranges, please use [wcs-input (type number)](.?path=/docs/components-input--documentation)\n */\n@Component({\n    tag: 'wcs-counter',\n    styleUrl: 'counter.scss',\n    shadow: {\n        delegatesFocus: true\n    },\n})\nexport class Counter implements ComponentInterface {\n    @Element() private el!: HTMLElement;\n\n    /**\n     * Specify the size (height) of the counter.\n     */\n    @Prop({reflect: true}) size: WcsCounterSize = 'm';\n\n    /**\n     * The label of the counter.<br/>\n     * e.g. Number of passengers, train carriages, railroad tracks...\n     */\n    @Prop({mutable: false}) label!: string;\n\n    /**\n     * The minimum value of the counter.\n     * If the value of the min attribute isn't set, then the element has no minimum value.\n     */\n    @Prop({mutable: true}) min?: number;\n\n    /**\n     * The maximum value of the counter.\n     * If the value of the max attribute isn't set, then the element has no maximum value.\n     */\n    @Prop({mutable: true}) max?: number;\n\n    /**\n     * Defines by how much the counter will be incremented or decremented.\n     */\n    @Prop({mutable: true}) step: number = 1;\n\n    /**\n     * Emitted when the value of the counter has changed.\n     */\n    @Event() wcsChange!: EventEmitter<CounterChangeEventDetail>;\n\n    /**\n     * 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 = false;\n\n    /**\n     * Emitted when the counter loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    componentWillLoad() {\n        this.handleValueChange();\n\n        if (!isWcsCounterSize(this.size)) {\n            console.error(`Invalid size value for wcs-counter : \"${this.size}\". Must be one of \"${WcsCounterSizeValues.join(', ')}\"`);\n            this.size = \"m\"; // Default fallback value\n        }\n    }\n\n    /**\n     * 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 (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 getCounterContainer = (): HTMLDivElement => {\n        return Array.from(this.el.shadowRoot.children)\n            .find(el => el.tagName === 'DIV') as HTMLDivElement;\n    }\n\n    private handleDecrement = () => {\n        if (this.min === undefined || this.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.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 counterContainer = this.getCounterContainer();\n        const outliers = Array.from(counterContainer.children)\n            .filter((span: HTMLSpanElement) => span.classList.contains('outliers'));\n\n        counterContainer.classList.add('animate-' + direction);\n        outliers.forEach((span: HTMLSpanElement) => {\n            span.classList.remove('hidden')\n        });\n        setTimeout(() => {\n            counterContainer.classList.remove('animate-' + direction);\n            outliers.forEach((span: HTMLSpanElement) => {\n                span.classList.add('hidden')\n            });\n            this.displayedValue = this.value;\n\n            this.animateRunning = false;\n        }, 1000 * ANIMATION_DURATION - 20);\n    }\n\n    render() {\n        return (\n            <Host>\n                <wcs-button class=\"wcs-primary\"\n                            shape=\"round\"\n                            size=\"s\"\n                            tabindex={-1}\n                            onClick={() => this.handleDecrement()}\n                            onBlur={(event) => this.wcsBlur.emit(event)}\n                            disabled={this.value === this.min}>\n                    <wcs-mat-icon icon=\"remove\" size=\"s\"></wcs-mat-icon>\n                </wcs-button>\n                <div class=\"counter-container\">\n                    <span id=\"outlier-down\" class=\"outliers hidden\"\n                          aria-hidden=\"true\">{this.displayedValue - this.step}</span>\n                    <span tabindex=\"0\"\n                          role=\"spinbutton\"\n                          class=\"current-value\"\n                          onBlur={(event) => this.wcsBlur.emit(event)}\n                          onKeyDown={(event) => this.onKeyDown(event)}\n                          aria-valuenow={this.value}\n                          aria-valuetext={this.value}\n                          aria-valuemin={this.min}\n                          aria-valuemax={this.max}\n                          aria-label={this.label}>{this.displayedValue}</span>\n                    <span id=\"outlier-up\" class=\"outliers hidden\"\n                          aria-hidden=\"true\">{this.displayedValue + this.step}</span>\n                </div>\n                <wcs-button class=\"wcs-primary\"\n                            shape=\"round\"\n                            size=\"s\"\n                            tabindex={-1}\n                            onClick={() => this.handleIncrement()}\n                            onBlur={(event) => this.wcsBlur.emit(event)}\n                            disabled={this.value === this.max}>\n                    <wcs-mat-icon icon=\"add\" size=\"s\"></wcs-mat-icon>\n                </wcs-button>\n            </Host>\n        );\n    }\n}\n"],"version":3}

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

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

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

@@ -1,12 +1,9 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-dc4d96d4.js';
 import { S as SelectArrow } from './select-arrow-81d069f7.js';
-import { g as clickTargetIsElementOrChildren, d as isKeydown, c as isKeyup, b as isEscapeKey } from './helpers-1f7170dd.js';
+import { g as clickTargetIsElementOrChildren, d as isKeydown, c as isKeyup, b as isEscapeKey } from './helpers-1d55b67f.js';
+import { i as isElementFocused } from './accessibility-ffa12842.js';
 import { c as createPopper } from './popper-c7cca1bc.js';
 
-function isElementFocused(element) {
-  return element === document.activeElement;
-}
-
 const dropdownCss = ":host{display:flex}wcs-button{--wcs-button-padding:8px 10px 8px 16px !important}:host([no-arrow]) wcs-button{--wcs-button-padding:8px 16px 8px 16px !important}:host([shape=small]) wcs-button{--wcs-button-padding:2px 10px 2px 16px !important}:host([shape=small][no-arrow]) wcs-button{--wcs-button-padding:2px 16px 2px 16px !important}.wcs-button-content-wrapper{display:flex}.popover{display:none;border:1px solid #d7d7d7;border-radius:var(--wcs-border-radius);background-color:var(--wcs-white);z-index:9999}.show{display:block}.container{border-radius:inherit;overflow:hidden;padding:calc(var(--wcs-padding) / 2) 0;background-color:var(--wcs-white)}#arrow,#arrow::before{position:absolute;width:8px;height:8px;background:inherit;border:solid 1px #d7d7d7}#arrow{visibility:hidden;z-index:-1}#arrow::before{visibility:visible;content:\"\";transform:rotate(45deg)}.popover[data-popper-placement^=top]>#arrow{bottom:-5px}.popover[data-popper-placement^=bottom]>#arrow{top:-6px}.popover[data-popper-placement^=left]>#arrow{right:-4px}.popover[data-popper-placement^=right]>#arrow{left:-6px}";
 
 const Dropdown = class {
@@ -111,6 +108,7 @@ const Dropdown = class {
   render() {
     return (h(Host, null, h("wcs-button", { mode: this.mode, shape: this.shape, disabled: this.disabled, onClick: ($event) => this.onButtonClick($event) }, h("div", { class: "wcs-button-content-wrapper" }, h("slot", { name: "placeholder" }), this.noArrow ? null : (h(SelectArrow, { up: this.expanded })))), h("div", { class: (this.expanded ? 'show ' : '') + 'popover' }, h("div", { id: "arrow", "data-popper-arrow": true }), h("div", { class: "container" }, h("slot", { name: "item" })))));
   }
+  static get delegatesFocus() { return true; }
   get el() { return getElement(this); }
   static get watchers() { return {
     "placement": ["placementChange"]

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

@@ -1 +1 @@
-{"file":"wcs-dropdown.entry.js","mappings":"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","names":[],"sources":["./src/utils/accessibility.ts","./src/components/dropdown/dropdown.scss?tag=wcs-dropdown&encapsulation=shadow","./src/components/dropdown/dropdown.tsx"],"sourcesContent":["export function isElementFocused(element: HTMLElement) {\n    return element === document.activeElement;\n}\n",":host {\n    display: flex;\n}\n\nwcs-button {\n    --wcs-button-padding: 8px 10px 8px 16px !important;\n}\n:host([no-arrow]) {\n    wcs-button {\n        --wcs-button-padding: 8px 16px 8px 16px !important;\n    }\n}\n\n\n:host([shape=small]) {\n    wcs-button {\n        --wcs-button-padding: 2px 10px 2px 16px !important;\n    }\n}\n\n:host([shape=small][no-arrow]) {\n    wcs-button {\n        --wcs-button-padding: 2px 16px 2px 16px !important;\n    }\n}\n\n.wcs-button-content-wrapper {\n    display: flex;\n}\n\n.popover {\n    display: none;\n    border: 1px solid #d7d7d7;\n    border-radius: var(--wcs-border-radius);\n    background-color: var(--wcs-white);\n    z-index: 9999;\n}\n\n.show {\n    display: block;\n}\n\n// XXX: So that item hover background does not overflow\n.container {\n    border-radius: inherit;\n    overflow: hidden;\n    padding: calc(var(--wcs-padding) / 2) 0;\n    background-color: var(--wcs-white);\n}\n\n#arrow,\n#arrow::before {\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    background: inherit;\n    border: solid 1px #d7d7d7;\n}\n\n#arrow {\n    visibility: hidden;\n    z-index: -1;\n}\n\n#arrow::before {\n    visibility: visible;\n    content: '';\n    transform: rotate(45deg);\n}\n\n.popover[data-popper-placement^='top'] > #arrow {\n    bottom: -5px;\n}\n\n.popover[data-popper-placement^='bottom'] > #arrow {\n    top: -6px;\n}\n\n.popover[data-popper-placement^='left'] > #arrow {\n    right: -4px;\n}\n\n.popover[data-popper-placement^='right'] > #arrow {\n    left: -6px;\n}\n","import {\n    Component,\n    ComponentInterface, Element,\n    h, Host, Listen, Prop, State, Watch\n} from '@stencil/core';\nimport { SelectArrow } from '../select/select-arrow';\nimport { WcsButtonMode, WcsButtonShape } from '../button/button-interface';\nimport { createPopper, Instance } from '@popperjs/core';\nimport { WcsDropdownPlacement } from './dropdown-interface';\nimport { clickTargetIsElementOrChildren, isEscapeKey, isKeydown, isKeyup } from '../../utils/helpers';\nimport { isElementFocused } from \"../../utils/accessibility\";\n\n\n@Component({\n    tag: 'wcs-dropdown',\n    styleUrl: 'dropdown.scss',\n    shadow: true\n})\nexport class Dropdown implements ComponentInterface {\n    @Element() private el: HTMLWcsDropdownElement;\n\n    /** Hides the arrow in the button */\n    @Prop() noArrow: boolean = false;\n\n    /** Dropdown's button mode */\n    @Prop() mode: WcsButtonMode = 'stroked';\n\n    /** Dropdown's button shape */\n    @Prop() shape: WcsButtonShape = 'normal';\n\n    /** Specifies whether the dropdown button is clickable or not */\n    @Prop() disabled: boolean = false;\n\n    /** placement of the dropdown's popover */\n    @Prop() placement: WcsDropdownPlacement = 'bottom-end';\n\n    @State() private expanded = false;\n\n\n    private popper: Instance;\n\n    private buttonTextColor: string;\n\n    @Watch('placement')\n    protected placementChange() {\n        this.popper.setOptions({\n            ...this.popper.state.options,\n            placement: this.placement\n        }).then(_ => this.popper.update());\n    }\n\n    componentDidLoad() {\n        const wcsButtonElement = this.el.shadowRoot.querySelector('wcs-button');\n        const buttonWrapper = wcsButtonElement.shadowRoot.querySelector('button');\n        this.buttonTextColor = window.getComputedStyle(buttonWrapper).color;\n        const popoverDiv = this.el.shadowRoot.querySelector('.popover') as HTMLElement;\n\n\n        this.popper = createPopper(wcsButtonElement, popoverDiv, {\n            placement: this.placement,\n            modifiers: [\n                {\n                    name: 'offset',\n                    options: {\n                        offset: [0, 8]\n                    }\n                }\n            ]\n        });\n\n        if (!this.noArrow) {\n            (this.el.shadowRoot.querySelector('.arrow') as HTMLElement).style.fill = this.buttonTextColor;\n        }\n        this.fixForFirefoxBelow63();\n    }\n\n    private fixForFirefoxBelow63() {\n        // If the items appear out of the slot we place them back\n        const items = this.el.querySelectorAll('wcs-dropdown-item');\n        const container = this.el.querySelector('.container');\n        if (items.length > 0 && container) {\n            items.forEach(i => {\n                this.el.removeChild(i);\n                container.appendChild(i);\n            });\n        }\n    }\n\n    private onButtonClick(_: MouseEvent): void {\n        this.expanded = !this.expanded;\n    }\n\n    @Listen('click', {target: 'window'})\n    onWindowClickEvent(event: MouseEvent) {\n        const clickedOnDropdownOrChildren = clickTargetIsElementOrChildren(event, this.el);\n        if (this.expanded && !clickedOnDropdownOrChildren) {\n            this.expanded = false;\n        }\n    }\n\n    @Listen('wcsDropdownItemClick')\n    dropdownItemClick(_: CustomEvent<void>) {\n        this.expanded = false;\n    }\n\n    @Listen('keydown')\n    onKeyDown(evt: KeyboardEvent): void {\n        if (this.expanded && (isKeydown(evt) || isKeyup(evt))) {\n            // If the user presses an arrow key (up or down), the browser is prevented from scrolling through\n            evt.preventDefault();\n            const items = Array.from(this.el.querySelectorAll('wcs-dropdown-item'));\n            const currentFocusedItemIndex = items.findIndex(item => isElementFocused(item));\n            // If the dropdown is expended by the user, but no item is focused and the keydown is pressed\n            if (currentFocusedItemIndex === -1 && isKeydown(evt)) {\n                this.focusFirstItemIfPresent(items);\n            } else {\n                this.moveFocusedItemByDirection(items, currentFocusedItemIndex, isKeydown(evt) ? 'down' : 'up');\n            }\n        }\n        if (this.expanded && isEscapeKey(evt)) {\n            this.closeOverlayAndFocusButton();\n        }\n    }\n\n\n    private focusFirstItemIfPresent<T extends HTMLElement>(items: T[]) {\n        if (items[0]) {\n            items[0].focus();\n        }\n    }\n\n    private moveFocusedItemByDirection<T extends HTMLElement>(items: T[], currentFocusedItemIndex: number, direction: 'up' | 'down') {\n        const itemToFocus = items[(currentFocusedItemIndex) + (direction === 'down' ? 1 : -1)];\n        if (itemToFocus) {\n            itemToFocus.focus();\n        }\n    }\n\n    private closeOverlayAndFocusButton() {\n        this.expanded = !this.expanded;\n        const wcsButton = this.el.shadowRoot.querySelector('wcs-button') as HTMLWcsButtonElement;\n        wcsButton.focus();\n    }\n\n    componentDidRender() {\n        if (this.popper) {\n            this.popper.update();\n        }\n        if (!this.noArrow) {\n            (this.el.shadowRoot.querySelector('.arrow') as HTMLElement).style.fill = this.buttonTextColor;\n        }\n    }\n\n    render() {\n        return (\n            <Host>\n                <wcs-button mode={this.mode} shape={this.shape} disabled={this.disabled}\n                            onClick={($event) => this.onButtonClick($event)}>\n                    <div class=\"wcs-button-content-wrapper\">\n                        <slot name=\"placeholder\"/>\n                        {this.noArrow ? null : (<SelectArrow up={this.expanded}/>)}\n                    </div>\n                </wcs-button>\n                <div class={(this.expanded ? 'show ' : '') + 'popover'}>\n                    <div id=\"arrow\" data-popper-arrow/>\n                    <div class=\"container\">\n                        <slot name=\"item\"/>\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n}\n\n"],"version":3}
+{"file":"wcs-dropdown.entry.js","mappings":"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","names":[],"sources":["./src/components/dropdown/dropdown.scss?tag=wcs-dropdown&encapsulation=shadow","./src/components/dropdown/dropdown.tsx"],"sourcesContent":[":host {\n    display: flex;\n}\n\nwcs-button {\n    --wcs-button-padding: 8px 10px 8px 16px !important;\n}\n:host([no-arrow]) {\n    wcs-button {\n        --wcs-button-padding: 8px 16px 8px 16px !important;\n    }\n}\n\n\n:host([shape=small]) {\n    wcs-button {\n        --wcs-button-padding: 2px 10px 2px 16px !important;\n    }\n}\n\n:host([shape=small][no-arrow]) {\n    wcs-button {\n        --wcs-button-padding: 2px 16px 2px 16px !important;\n    }\n}\n\n.wcs-button-content-wrapper {\n    display: flex;\n}\n\n.popover {\n    display: none;\n    border: 1px solid #d7d7d7;\n    border-radius: var(--wcs-border-radius);\n    background-color: var(--wcs-white);\n    z-index: 9999;\n}\n\n.show {\n    display: block;\n}\n\n// XXX: So that item hover background does not overflow\n.container {\n    border-radius: inherit;\n    overflow: hidden;\n    padding: calc(var(--wcs-padding) / 2) 0;\n    background-color: var(--wcs-white);\n}\n\n#arrow,\n#arrow::before {\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    background: inherit;\n    border: solid 1px #d7d7d7;\n}\n\n#arrow {\n    visibility: hidden;\n    z-index: -1;\n}\n\n#arrow::before {\n    visibility: visible;\n    content: '';\n    transform: rotate(45deg);\n}\n\n.popover[data-popper-placement^='top'] > #arrow {\n    bottom: -5px;\n}\n\n.popover[data-popper-placement^='bottom'] > #arrow {\n    top: -6px;\n}\n\n.popover[data-popper-placement^='left'] > #arrow {\n    right: -4px;\n}\n\n.popover[data-popper-placement^='right'] > #arrow {\n    left: -6px;\n}\n","import {\n    Component,\n    ComponentInterface, Element,\n    h, Host, Listen, Prop, State, Watch\n} from '@stencil/core';\nimport { SelectArrow } from '../select/select-arrow';\nimport { WcsButtonMode, WcsButtonShape } from '../button/button-interface';\nimport { createPopper, Instance } from '@popperjs/core';\nimport { WcsDropdownPlacement } from './dropdown-interface';\nimport { clickTargetIsElementOrChildren, isEscapeKey, isKeydown, isKeyup } from '../../utils/helpers';\nimport { isElementFocused } from \"../../utils/accessibility\";\n\n\n@Component({\n    tag: 'wcs-dropdown',\n    styleUrl: 'dropdown.scss',\n    shadow: {\n        delegatesFocus: true\n    }\n})\nexport class Dropdown implements ComponentInterface {\n    @Element() private el: HTMLWcsDropdownElement;\n\n    /** Hides the arrow in the button */\n    @Prop() noArrow: boolean = false;\n\n    /** Dropdown's button mode */\n    @Prop() mode: WcsButtonMode = 'stroked';\n\n    /** Dropdown's button shape */\n    @Prop() shape: WcsButtonShape = 'normal';\n\n    /** Specifies whether the dropdown button is clickable or not */\n    @Prop() disabled: boolean = false;\n\n    /** placement of the dropdown's popover */\n    @Prop() placement: WcsDropdownPlacement = 'bottom-end';\n\n    @State() private expanded = false;\n\n\n    private popper: Instance;\n\n    private buttonTextColor: string;\n\n    @Watch('placement')\n    protected placementChange() {\n        this.popper.setOptions({\n            ...this.popper.state.options,\n            placement: this.placement\n        }).then(_ => this.popper.update());\n    }\n\n    componentDidLoad() {\n        const wcsButtonElement = this.el.shadowRoot.querySelector('wcs-button');\n        const buttonWrapper = wcsButtonElement.shadowRoot.querySelector('button');\n        this.buttonTextColor = window.getComputedStyle(buttonWrapper).color;\n        const popoverDiv = this.el.shadowRoot.querySelector('.popover') as HTMLElement;\n\n\n        this.popper = createPopper(wcsButtonElement, popoverDiv, {\n            placement: this.placement,\n            modifiers: [\n                {\n                    name: 'offset',\n                    options: {\n                        offset: [0, 8]\n                    }\n                }\n            ]\n        });\n\n        if (!this.noArrow) {\n            (this.el.shadowRoot.querySelector('.arrow') as HTMLElement).style.fill = this.buttonTextColor;\n        }\n        this.fixForFirefoxBelow63();\n    }\n\n    private fixForFirefoxBelow63() {\n        // If the items appear out of the slot we place them back\n        const items = this.el.querySelectorAll('wcs-dropdown-item');\n        const container = this.el.querySelector('.container');\n        if (items.length > 0 && container) {\n            items.forEach(i => {\n                this.el.removeChild(i);\n                container.appendChild(i);\n            });\n        }\n    }\n\n    private onButtonClick(_: MouseEvent): void {\n        this.expanded = !this.expanded;\n    }\n\n    @Listen('click', {target: 'window'})\n    onWindowClickEvent(event: MouseEvent) {\n        const clickedOnDropdownOrChildren = clickTargetIsElementOrChildren(event, this.el);\n        if (this.expanded && !clickedOnDropdownOrChildren) {\n            this.expanded = false;\n        }\n    }\n\n    @Listen('wcsDropdownItemClick')\n    dropdownItemClick(_: CustomEvent<void>) {\n        this.expanded = false;\n    }\n\n    @Listen('keydown')\n    onKeyDown(evt: KeyboardEvent): void {\n        if (this.expanded && (isKeydown(evt) || isKeyup(evt))) {\n            // If the user presses an arrow key (up or down), the browser is prevented from scrolling through\n            evt.preventDefault();\n            const items = Array.from(this.el.querySelectorAll('wcs-dropdown-item'));\n            const currentFocusedItemIndex = items.findIndex(item => isElementFocused(item));\n            // If the dropdown is expended by the user, but no item is focused and the keydown is pressed\n            if (currentFocusedItemIndex === -1 && isKeydown(evt)) {\n                this.focusFirstItemIfPresent(items);\n            } else {\n                this.moveFocusedItemByDirection(items, currentFocusedItemIndex, isKeydown(evt) ? 'down' : 'up');\n            }\n        }\n        if (this.expanded && isEscapeKey(evt)) {\n            this.closeOverlayAndFocusButton();\n        }\n    }\n\n\n    private focusFirstItemIfPresent<T extends HTMLElement>(items: T[]) {\n        if (items[0]) {\n            items[0].focus();\n        }\n    }\n\n    private moveFocusedItemByDirection<T extends HTMLElement>(items: T[], currentFocusedItemIndex: number, direction: 'up' | 'down') {\n        const itemToFocus = items[(currentFocusedItemIndex) + (direction === 'down' ? 1 : -1)];\n        if (itemToFocus) {\n            itemToFocus.focus();\n        }\n    }\n\n    private closeOverlayAndFocusButton() {\n        this.expanded = !this.expanded;\n        const wcsButton = this.el.shadowRoot.querySelector('wcs-button') as HTMLWcsButtonElement;\n        wcsButton.focus();\n    }\n\n    componentDidRender() {\n        if (this.popper) {\n            this.popper.update();\n        }\n        if (!this.noArrow) {\n            (this.el.shadowRoot.querySelector('.arrow') as HTMLElement).style.fill = this.buttonTextColor;\n        }\n    }\n\n    render() {\n        return (\n            <Host>\n                <wcs-button mode={this.mode} shape={this.shape} disabled={this.disabled}\n                            onClick={($event) => this.onButtonClick($event)}>\n                    <div class=\"wcs-button-content-wrapper\">\n                        <slot name=\"placeholder\"/>\n                        {this.noArrow ? null : (<SelectArrow up={this.expanded}/>)}\n                    </div>\n                </wcs-button>\n                <div class={(this.expanded ? 'show ' : '') + 'popover'}>\n                    <div id=\"arrow\" data-popper-arrow/>\n                    <div class=\"container\">\n                        <slot name=\"item\"/>\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n}\n\n"],"version":3}

package/dist/esm/wcs-galactic-menu.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-dc4d96d4.js';
-import { h as clickInsideElement } from './helpers-1f7170dd.js';
+import { h as clickInsideElement } from './helpers-1d55b67f.js';
 import { c as createPopper } from './popper-c7cca1bc.js';
 
 const galacticMenuCss = "#menu{background-color:var(--wcs-gray);color:white;display:none;padding:var(--wcs-padding)}#menu[data-show]{display:block;z-index:9999}#menu[data-popper-placement^=top]>#arrow{bottom:-4px}#menu[data-popper-placement^=bottom]>#arrow{top:-4px}#menu[data-popper-placement^=left]>#arrow{right:-4px}#menu[data-popper-placement^=right]>#arrow{left:-4px}:host{display:flex;align-items:center;height:32px;padding-left:var(--wcs-padding);background-color:var(--wcs-gray-light)}#toggle-menu-icon{cursor:pointer;padding:0 var(--wcs-padding);user-select:none}#arrow,#arrow::before{position:absolute;width:8px;height:8px;background:inherit}#arrow{visibility:hidden}#arrow::before{visibility:visible;content:\"\";transform:rotate(45deg)}";

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

@@ -1380,7 +1380,7 @@ const Grid = class {
       case 'none':
         return;
       case 'single':
-        return h("td", null, h("wcs-radio", { checked: row.selected, onClick: this.onRowSelection.bind(this, row) }));
+        return h("td", null, h("wcs-radio", { checked: row.selected, onWcsRadioClick: this.onRowSelection.bind(this, row) }));
       case 'multiple':
         return h("td", null, h("wcs-checkbox", { checked: row.selected, onWcsChange: this.onRowSelection.bind(this, row) }));
     }