wcs-core 3.0.0 → 4.0.0

package/dist/collection/utils/helpers.js

@@ -73,6 +73,9 @@ export const clickTargetIsElementOrChildren = (mouseEvent, element) => {
   return mouseEvent.target instanceof Node
     && element.contains(mouseEvent.target);
 };
+export function generateUniqueId(componentName) {
+  return componentName + "-" + Math.random().toString(36);
+}
 export function isKeyup(evt) {
   return evt.code === 'ArrowUp';
 }
@@ -88,4 +91,31 @@ export function isSpaceKey(evt) {
 export function isEnterKey(evt) {
   return evt.key === 'Enter';
 }
+export function isHomeKey(evt) {
+  return evt.code === 'Home';
+}
+export function isEndKey(evt) {
+  return evt.code === 'End';
+}
+export function isUpArrowKey(evt) {
+  return evt.key === 'ArrowUp';
+}
+export function isDownArrowKey(evt) {
+  return evt.key === 'ArrowDown';
+}
+export function isLeftArrowKey(evt) {
+  return evt.key === 'ArrowLeft';
+}
+export function isRightArrowKey(evt) {
+  return evt.key === 'ArrowRight';
+}
+export function isPageDownKey(evt) {
+  return evt.key === 'PageDown';
+}
+export function isPageUpKey(evt) {
+  return evt.key === 'PageUp';
+}
+export function isTabKey(evt) {
+  return evt.key === 'Tab';
+}
 //# sourceMappingURL=helpers.js.map

package/dist/collection/utils/helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../src/utils/helpers.ts"],"names":[],"mappings":"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","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\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"]}
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../src/utils/helpers.ts"],"names":[],"mappings":"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","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"]}

package/dist/esm/{grid-pagination-62f9fbbc.js → grid-pagination-41354861.js}

@@ -1,4 +1,4 @@
-import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-dc4d96d4.js';
+import { h, r as registerInstance, c as createEvent, H as Host } from './index-dc4d96d4.js';
 
 const GridPaginationArrow = ({ active, order, double = false }) => (h("svg", { style: { marginLeft: 'auto', cursor: 'pointer' }, xmlns: "http://www.w3.org/2000/svg", width: "24", height: "20", viewBox: "0 0 24 20" },
   h("style", { type: "text/css" }, `
@@ -90,11 +90,10 @@ const GridPagination = class {
   render() {
     return (h(Host, { slot: "grid-pagination" }, h("div", { class: "container" }, h("div", { class: "page-size" }, h("wcs-select", { placeholder: "El\u00E9ments par page", class: "available-page-sizes", value: this.pageSize, onWcsChange: this.onChangePagesize.bind(this) }, this.availablePageSizes.map((pageSize) => h("wcs-select-option", { value: pageSize }, pageSize))), h("span", null, "\u00A0\u00E9l\u00E9ments par page")), h("div", { class: "items-count" }, h("span", null, this.itemsCount, " \u00E9l\u00E9ments")), h("div", { class: "page-management" }, h("span", { class: "pagination-arrow", onClick: this.firstPage.bind(this) }, h(GridPaginationArrow, { active: this.canGoToPreviousPage(), order: "previous", double: true })), h("span", { class: "pagination-arrow", onClick: this.previousPage.bind(this) }, h(GridPaginationArrow, { active: this.canGoToPreviousPage(), order: "previous" })), h("span", null, this.currentPage + 1, " / ", this.pageCount), h("span", { class: "pagination-arrow", onClick: this.nextPage.bind(this) }, h(GridPaginationArrow, { active: this.canGoToNextPage(), order: "next" })), h("span", { class: "pagination-arrow", onClick: this.lastPage.bind(this) }, h(GridPaginationArrow, { active: this.canGoToNextPage(), order: "next", double: true }))))));
   }
-  get el() { return getElement(this); }
 };
 GridPagination.INDEX_FIRST_PAGE = 0;
 GridPagination.style = gridPaginationCss;
 
 export { GridPagination as G };
 
-//# sourceMappingURL=grid-pagination-62f9fbbc.js.map
+//# sourceMappingURL=grid-pagination-41354861.js.map

package/dist/esm/grid-pagination-41354861.js.map

@@ -0,0 +1 @@
+{"file":"grid-pagination-41354861.js","mappings":"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","names":[],"sources":["./src/components/grid-pagination/grid-pagination-arrow.tsx","./src/components/grid-pagination/grid-pagination.scss?tag=wcs-grid-pagination&encapsulation=shadow","./src/components/grid-pagination/grid-pagination.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\ninterface GridPaginationArrowProps {\n    active: boolean;\n    order: 'next' | 'previous';\n    double?: boolean;\n}\n\nexport const GridPaginationArrow: FunctionalComponent<GridPaginationArrowProps> = ({ active, order, double = false }) => (\n    <svg style={{ marginLeft: 'auto', cursor: 'pointer' }} xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\">\n        <style type=\"text/css\">{`\n            .arrow-group {\n                transform-origin: 50% 51%;\n                transition: transform 175ms ease-in-out;\n            }\n            .arrow {\n                transition: fill 175ms ease-in-out;\n                fill: var(--wcs-text-light);\n            }\n            .second-arrow {\n                transform: translateY(-8px);\n            }\n            .next {\n                transform: rotate(90deg);\n            }\n            .previous {\n                transform: rotate(-90deg);\n            }\n            .active {\n                fill: var(--wcs-primary);\n            }\n        `}</style>\n        <g fill=\"none\" class={order + ' arrow-group'}>\n            <path class={(active ? 'active' : '') + ' arrow'} d=\"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z\" />\n            <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n        </g>\n        {\n            double ?\n                <g fill=\"none\" class={order + ' arrow-group'}>\n                    <path class={(active ? 'active' : '') + ' arrow second-arrow'} d=\"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z\" />\n                    <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n                </g>\n                : ''\n        }\n    </svg>\n);\n",":host {\n    display: block;\n    border-style: solid none none;\n    border-width: 1px;\n    border-color: var(--wcs-text-light);\n}\n\n.container {\n    display: grid;\n    grid-template-columns: auto auto auto;\n    justify-content: space-between;\n    color: var(--wcs-text-medium);\n}\n\n.available-page-sizes {\n    width: auto;\n}\n\n.page-management, .page-size, .items-count {\n    display: flex;\n    align-items: center;\n}\n\n.pagination-arrow {\n    display: flex;\n}\n","import {\n    Component,\n    ComponentInterface,\n    Event, EventEmitter,\n    h,\n    Host,\n    Prop\n} from '@stencil/core';\nimport {\n    WcsGridPaginationChangeEventDetails\n} from '../grid/grid-interface';\nimport { SelectChangeEventDetail } from '../select/select-interface';\nimport { GridPaginationArrow } from './grid-pagination-arrow';\n\n@Component({\n    tag: 'wcs-grid-pagination',\n    styleUrl: 'grid-pagination.scss',\n    shadow: true\n})\nexport class GridPagination implements ComponentInterface {\n    static readonly INDEX_FIRST_PAGE: number = 0;\n    @Prop() availablePageSizes: number[] = [10, 20, 50];\n    @Prop() currentPage: number = GridPagination.INDEX_FIRST_PAGE;\n    @Prop() pageSize: number = this.availablePageSizes[0];\n    @Prop() itemsCount: number = 0;\n    @Prop() pageCount: number = 1;\n    @Event() wcsGridPaginationChange!: EventEmitter<WcsGridPaginationChangeEventDetails>;\n\n    private lastPage(): void {\n        this.currentPage = this.pageCount - 1;\n        this.emitPaginationChange();\n    }\n\n    private nextPage(): void {\n        if (this.canGoToNextPage()) {\n            this.currentPage++;\n            this.emitPaginationChange();\n        }\n    }\n\n    private canGoToNextPage(): boolean {\n        return this.currentPage + 1 < this.pageCount;\n    }\n\n    private previousPage(): void {\n        if (this.canGoToPreviousPage()) {\n            this.currentPage--;\n            this.emitPaginationChange();\n        }\n    }\n\n    private canGoToPreviousPage(): boolean {\n        return this.currentPage > 0;\n    }\n\n    private firstPage(): void {\n        this.currentPage = 0;\n        this.emitPaginationChange();\n    }\n\n    private onChangePagesize(event: CustomEvent<SelectChangeEventDetail>): void {\n        this.pageSize = event.detail.value;\n        if (this.currentPage + 1 > this.pageSize) {\n            this.currentPage = 0;\n        }\n        this.emitPaginationChange();\n    }\n\n    private emitPaginationChange(): void {\n        this.wcsGridPaginationChange.emit({\n            pagination: {\n                currentPage: this.currentPage,\n                pageSize: this.pageSize,\n                itemsCount: this.itemsCount,\n                pageCount: this.pageCount\n            }\n        });\n    }\n\n    render(): any {\n        return (<Host slot=\"grid-pagination\">\n            <div class=\"container\">\n                <div class=\"page-size\">\n                    <wcs-select placeholder=\"Eléments par page\" class=\"available-page-sizes\" value={this.pageSize} onWcsChange={this.onChangePagesize.bind(this)}>\n                        {\n                            this.availablePageSizes.map((pageSize) =>\n                                <wcs-select-option value={pageSize}>{pageSize}</wcs-select-option>\n                            )\n                        }\n                    </wcs-select>\n                    <span>&nbsp;éléments par page</span>\n                </div>\n\n                <div class=\"items-count\">\n                    <span>{this.itemsCount} éléments</span>\n                </div>\n\n                <div class=\"page-management\">\n                    <span class=\"pagination-arrow\" onClick={this.firstPage.bind(this)}>\n                        <GridPaginationArrow active={this.canGoToPreviousPage()} order=\"previous\" double></GridPaginationArrow>\n                    </span>\n                    <span class=\"pagination-arrow\" onClick={this.previousPage.bind(this)}>\n                        <GridPaginationArrow active={this.canGoToPreviousPage()} order=\"previous\"></GridPaginationArrow>\n                    </span>\n\n                    <span>{this.currentPage + 1} / {this.pageCount}</span>\n\n                    <span class=\"pagination-arrow\" onClick={this.nextPage.bind(this)}>\n                        <GridPaginationArrow active={this.canGoToNextPage()} order=\"next\"></GridPaginationArrow>\n                    </span>\n                    <span class=\"pagination-arrow\" onClick={this.lastPage.bind(this)}>\n                        <GridPaginationArrow active={this.canGoToNextPage()} order=\"next\" double></GridPaginationArrow>\n                    </span>\n                </div>\n            </div>\n        </Host>)\n    }\n}\n"],"version":3}

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

@@ -73,6 +73,9 @@ const clickTargetIsElementOrChildren = (mouseEvent, element) => {
   return mouseEvent.target instanceof Node
     && element.contains(mouseEvent.target);
 };
+function generateUniqueId(componentName) {
+  return componentName + "-" + Math.random().toString(36);
+}
 function isKeyup(evt) {
   return evt.code === 'ArrowUp';
 }
@@ -88,7 +91,34 @@ function isSpaceKey(evt) {
 function isEnterKey(evt) {
   return evt.key === 'Enter';
 }
+function isHomeKey(evt) {
+  return evt.code === 'Home';
+}
+function isEndKey(evt) {
+  return evt.code === 'End';
+}
+function isUpArrowKey(evt) {
+  return evt.key === 'ArrowUp';
+}
+function isDownArrowKey(evt) {
+  return evt.key === 'ArrowDown';
+}
+function isLeftArrowKey(evt) {
+  return evt.key === 'ArrowLeft';
+}
+function isRightArrowKey(evt) {
+  return evt.key === 'ArrowRight';
+}
+function isPageDownKey(evt) {
+  return evt.key === 'PageDown';
+}
+function isPageUpKey(evt) {
+  return evt.key === 'PageUp';
+}
+function isTabKey(evt) {
+  return evt.key === 'Tab';
+}
 
-export { isEnterKey as a, isEscapeKey as b, clickTargetIsElementOrChildren as c, isKeydown as d, isKeyup as e, clickInsideElement as f, debounceEvent as g, inheritAttributes as h, isSpaceKey as i, findItemLabel as j, isElement as k, hasShadowDom as l, raf as r };
+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 };
 
-//# sourceMappingURL=helpers-e9b73aad.js.map
+//# sourceMappingURL=helpers-1f7170dd.js.map

package/dist/esm/helpers-1f7170dd.js.map

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

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"],"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"],"buttonMode":[32],"internalCurrentStep":[32],"previous":[64],"next":[64]}]]],["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],"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],"size":[2],"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],"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"]]]]],["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-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-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-checkbox",[[1,"wcs-checkbox",{"name":[1],"indeterminate":[1540],"checked":[1540],"labelAlignment":[1537,"label-alignment"],"disabled":[4]}]]],["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"]]],[1,"wcs-select",{"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,"wcsSelectOptionClick","selectedOptionChanged"]]]]],["wcs-error_2",[[1,"wcs-error"],[1,"wcs-form-field",{"isError":[1540,"is-error"],"hasPrefix":[32],"hasSuffix":[32],"spiedElement":[32]}]]],["wcs-button",[[17,"wcs-button",{"type":[1025],"href":[1],"disabled":[516],"ripple":[4],"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",[[1,"wcs-counter",{"size":[513],"label":[1],"min":[1026],"max":[1026],"step":[1026],"value":[1026],"currentValue":[32],"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"]]]]],["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-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);
   });
 };
 

package/dist/esm/wcs-action-bar.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-action-bar.entry.js","mappings":";;AAAA,MAAM,YAAY,GAAG,kfAAkf;;MCO1f,SAAS;;;;mBAOC,KAAK;;EAExB,iBAAiB;IACb,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;GAC3D;EAED,MAAM;IACF,QACI,EAAC,IAAI,QACD,WAAK,KAAK,EAAC,eAAe,mBAAgB,IAAI,CAAC,OAAO,IAClD,cACI,eAAa,CACZ,EACL,WAAK,KAAK,EAAC,SAAS,IAChB,YAAM,IAAI,EAAC,SAAS,GAAQ,CAC1B,CACJ,EACN,WAAK,KAAK,EAAC,gBAAgB,IACvB,YAAM,IAAI,EAAC,MAAM,GAAQ,CACvB,CACH,EACT;GACL;;;;;;;","names":[],"sources":["./src/components/action-bar/action-bar.scss?tag=wcs-action-bar&encapsulation=shadow","./src/components/action-bar/action-bar.tsx"],"sourcesContent":[":host {\n    padding: 0 var(--wcs-padding);\n    min-height: 81px;\n    background-color: var(--wcs-white);\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n\n\n    .title-actions {\n        padding-top: 16px;\n        padding-bottom: 16px;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        flex-grow: 1;\n    }\n\n    .title-actions[data-has-tabs] {\n        padding-bottom: 0;\n    }\n\n    h1 {\n        font-weight: 400;\n        line-height: 1.25;\n        margin: 0;\n        color: var(--wcs-gray);\n    }\n}\n\n:host([gutter]) {\n    border-bottom: solid 1px var(--wcs-light);\n}\n\n::slotted([slot=actions]) {\n    display: flex;\n}\n","import { Component, ComponentInterface, Element, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n    tag: 'wcs-action-bar',\n    styleUrl: 'action-bar.scss',\n    shadow: true\n})\nexport class ActionBar implements ComponentInterface {\n    @Element() el: HTMLWcsActionBarElement;\n    /**\n     * Determines if the action bar should have a border at the bottom.\n     * You should not use this property if a gutter is already present on tabs\n     */\n    @Prop() gutter: boolean;\n    @State() hasTabs = false;\n\n    componentWillLoad(): Promise<void> | void {\n        this.hasTabs = !!this.el.querySelector('[slot=\"tabs\"]');\n    }\n\n    render() {\n        return (\n            <Host>\n                <div class=\"title-actions\" data-has-tabs={this.hasTabs}>\n                    <h1>\n                        <slot></slot>\n                    </h1>\n                    <div class=\"actions\">\n                        <slot name=\"actions\"></slot>\n                    </div>\n                </div>\n                <div class=\"tabs-container\">\n                    <slot name=\"tabs\"></slot>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"version":3}
+{"file":"wcs-action-bar.entry.js","mappings":";;AAAA,MAAM,YAAY,GAAG,kfAAkf;;MCO1f,SAAS;;;;mBAOS,KAAK;;EAEhC,iBAAiB;IACb,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;GAC3D;EAED,MAAM;IACF,QACI,EAAC,IAAI,QACD,WAAK,KAAK,EAAC,eAAe,mBAAgB,IAAI,CAAC,OAAO,IAClD,cACI,eAAa,CACZ,EACL,WAAK,KAAK,EAAC,SAAS,IAChB,YAAM,IAAI,EAAC,SAAS,GAAQ,CAC1B,CACJ,EACN,WAAK,KAAK,EAAC,gBAAgB,IACvB,YAAM,IAAI,EAAC,MAAM,GAAQ,CACvB,CACH,EACT;GACL;;;;;;;","names":[],"sources":["./src/components/action-bar/action-bar.scss?tag=wcs-action-bar&encapsulation=shadow","./src/components/action-bar/action-bar.tsx"],"sourcesContent":[":host {\n    padding: 0 var(--wcs-padding);\n    min-height: 81px;\n    background-color: var(--wcs-white);\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n\n\n    .title-actions {\n        padding-top: 16px;\n        padding-bottom: 16px;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        flex-grow: 1;\n    }\n\n    .title-actions[data-has-tabs] {\n        padding-bottom: 0;\n    }\n\n    h1 {\n        font-weight: 400;\n        line-height: 1.25;\n        margin: 0;\n        color: var(--wcs-gray);\n    }\n}\n\n:host([gutter]) {\n    border-bottom: solid 1px var(--wcs-light);\n}\n\n::slotted([slot=actions]) {\n    display: flex;\n}\n","import { Component, ComponentInterface, Element, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n    tag: 'wcs-action-bar',\n    styleUrl: 'action-bar.scss',\n    shadow: true\n})\nexport class ActionBar implements ComponentInterface {\n    @Element() private el: HTMLWcsActionBarElement;\n    /**\n     * Determines if the action bar should have a border at the bottom.\n     * You should not use this property if a gutter is already present on tabs\n     */\n    @Prop() gutter: boolean;\n    @State() private hasTabs = false;\n\n    componentWillLoad(): Promise<void> | void {\n        this.hasTabs = !!this.el.querySelector('[slot=\"tabs\"]');\n    }\n\n    render() {\n        return (\n            <Host>\n                <div class=\"title-actions\" data-has-tabs={this.hasTabs}>\n                    <h1>\n                        <slot></slot>\n                    </h1>\n                    <div class=\"actions\">\n                        <slot name=\"actions\"></slot>\n                    </div>\n                </div>\n                <div class=\"tabs-container\">\n                    <slot name=\"tabs\"></slot>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, g as getElement } from './index-dc4d96d4.js';
+import { r as registerInstance, h } from './index-dc4d96d4.js';
 
 const appCss = ":host{background-color:#f2f2f2;margin:0;display:grid;grid-template-areas:\"header header\" \"sidebar content\";grid-template-columns:min-content auto;overflow-y:hidden}::slotted(main){padding:8px;grid-area:content;overflow-y:scroll;height:calc(100vh - 64px)}::slotted(wcs-header){grid-area:header}@media screen and (max-width: 768px){:host{grid-template-areas:\"header\" \"sidebar\" \"content\";grid-template-columns:auto}::slotted(header){position:relative}::slotted(main){overflow-y:visible;height:initial}}";
 
@@ -13,7 +13,6 @@ const App = class {
       h("slot", { name: "content" })
     ];
   }
-  get el() { return getElement(this); }
 };
 App.style = appCss;
 

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

@@ -1 +1 @@
-{"file":"wcs-app.entry.js","mappings":";;AAAA,MAAM,MAAM,GAAG,+fAA+f;;MCQjgB,GAAG;;;;EAGZ,MAAM;IACF,OAAO;MACH,YAAM,IAAI,EAAC,QAAQ,GAAE;MACrB,YAAM,IAAI,EAAC,SAAS,GAAE;MACtB,YAAM,IAAI,EAAC,SAAS,GAAE;KACzB,CAAC;GACL;;;;;;;","names":[],"sources":["./src/components/app/app.scss?tag=wcs-app&encapsulation=shadow","./src/components/app/app.tsx"],"sourcesContent":[":host {\n    background-color: #f2f2f2;\n    margin: 0;\n    display: grid;\n    grid-template-areas:\n        \"header header\"\n        \"sidebar content\";\n    grid-template-columns: min-content auto;\n    overflow-y: hidden;\n}\n\n::slotted(main) {\n    padding: 8px;\n    grid-area: content;\n    overflow-y: scroll;\n    height: calc(100vh - 64px);\n}\n\n::slotted(wcs-header) {\n    grid-area: header;\n}\n\n@media screen and (max-width: 768px) {\n    :host {\n        grid-template-areas:\n            \"header\"\n            \"sidebar\"\n            \"content\";\n        grid-template-columns: auto;\n    }\n\n    ::slotted(header) {\n        position: relative;\n    }\n\n    ::slotted(main) {\n        overflow-y: visible;\n        height: initial;\n    }\n}\n","import { Component, ComponentInterface, Element, h } from '@stencil/core';\n\n\n@Component({\n    tag: 'wcs-app',\n    styleUrl: 'app.scss',\n    shadow: true\n})\nexport class App implements ComponentInterface {\n    @Element() el!: HTMLWcsAppElement;\n\n    render() {\n        return [\n            <slot name=\"header\"/>,\n            <slot name=\"sidebar\"/>,\n            <slot name=\"content\"/>\n        ];\n    }\n}\n"],"version":3}
+{"file":"wcs-app.entry.js","mappings":";;AAAA,MAAM,MAAM,GAAG,+fAA+f;;MCQjgB,GAAG;;;;EAEZ,MAAM;IACF,OAAO;MACH,YAAM,IAAI,EAAC,QAAQ,GAAE;MACrB,YAAM,IAAI,EAAC,SAAS,GAAE;MACtB,YAAM,IAAI,EAAC,SAAS,GAAE;KACzB,CAAC;GACL;;;;;;","names":[],"sources":["./src/components/app/app.scss?tag=wcs-app&encapsulation=shadow","./src/components/app/app.tsx"],"sourcesContent":[":host {\n    background-color: #f2f2f2;\n    margin: 0;\n    display: grid;\n    grid-template-areas:\n        \"header header\"\n        \"sidebar content\";\n    grid-template-columns: min-content auto;\n    overflow-y: hidden;\n}\n\n::slotted(main) {\n    padding: 8px;\n    grid-area: content;\n    overflow-y: scroll;\n    height: calc(100vh - 64px);\n}\n\n::slotted(wcs-header) {\n    grid-area: header;\n}\n\n@media screen and (max-width: 768px) {\n    :host {\n        grid-template-areas:\n            \"header\"\n            \"sidebar\"\n            \"content\";\n        grid-template-columns: auto;\n    }\n\n    ::slotted(header) {\n        position: relative;\n    }\n\n    ::slotted(main) {\n        overflow-y: visible;\n        height: initial;\n    }\n}\n","import { Component, ComponentInterface, h } from '@stencil/core';\n\n\n@Component({\n    tag: 'wcs-app',\n    styleUrl: 'app.scss',\n    shadow: true\n})\nexport class App implements ComponentInterface {\n\n    render() {\n        return [\n            <slot name=\"header\"/>,\n            <slot name=\"sidebar\"/>,\n            <slot name=\"content\"/>\n        ];\n    }\n}\n"],"version":3}

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

@@ -1,16 +1,24 @@
 import { r as registerInstance, h, g as getElement } from './index-dc4d96d4.js';
-import { l as hasShadowDom } from './helpers-e9b73aad.js';
+import { w as hasShadowDom } from './helpers-1f7170dd.js';
 import { M as MDCRipple } from './component-5ce0752a.js';
 
-const buttonCss = "@keyframes mdc-ripple-fg-radius-in{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}}@keyframes mdc-ripple-fg-opacity-in{from{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-out{from{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-ripple-surface{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);will-change:transform, opacity;position:relative;outline:none;overflow:hidden}.mdc-ripple-surface::before,.mdc-ripple-surface::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-ripple-surface::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.mdc-ripple-surface::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.mdc-ripple-surface.mdc-ripple-upgraded::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-ripple-surface.mdc-ripple-upgraded::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after{animation:mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.mdc-ripple-surface::before,.mdc-ripple-surface::after{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-ripple-surface.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded],.mdc-ripple-upgraded--unbounded{overflow:visible}.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before,.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after,.mdc-ripple-upgraded--unbounded::before,.mdc-ripple-upgraded--unbounded::after{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before,.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::before,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after{top:var(--mdc-ripple-top, calc(50% - 50%));left:var(--mdc-ripple-left, calc(50% - 50%));width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-ripple-surface::before,.mdc-ripple-surface::after{background-color:#000;background-color:var(--mdc-ripple-color, #000)}.mdc-ripple-surface:hover::before,.mdc-ripple-surface.mdc-ripple-surface--hover::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mdc-ripple-surface:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-ripple-surface.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}:host{display:inline-block;--wcs-button-padding:calc(var(--wcs-padding) / 2) var(--wcs-padding);--wcs-button-color:var(--wcs-contrast, var(--wcs-white, white));--wcs-button-background-color:var(--wcs-base, var(--wcs-primary, #0088CE));--wcs-button-ripple-color:var(--wcs-contrast, var(--wcs-white, white));--wcs-button-border-radius:var(--wcs-border-radius);--wcs-button-border-color:var(--wcs-base)}.wcs-inner-button:focus-visible{outline:2px dashed var(--wcs-primary);outline-offset:4px;border-radius:var(--wcs-button-border-radius)}:host([mode=clear]){--wcs-button-border-color:transparent}:host([mode=clear]) .wcs-inner-button{box-shadow:none}:host([mode=clear]),:host([mode=stroked]){--wcs-button-color:var(--wcs-base);--wcs-button-background-color:transparent}:host([mode=clear]) .wcs-inner-button::before,:host([mode=clear]) .wcs-inner-button::after,:host([mode=stroked]) .wcs-inner-button::before,:host([mode=stroked]) .wcs-inner-button::after{--wcs-button-ripple-color:var(--wcs-base)}:host([shape=small]){--wcs-button-padding:2px 16px}:host([shape=small]) .wcs-inner-button{min-width:var(--wcs-button-min-width, unset);min-height:var(--wcs-button-min-height, unset)}:host([shape=round]){--wcs-button-padding:0;--wcs-button-border-radius:50%}:host([shape=round]) .wcs-inner-button{min-width:var(--wcs-button-min-width, 42px);min-height:var(--wcs-button-min-height, 42px)}:host([shape=square]){--wcs-button-padding:0}:host([shape=square]) .wcs-inner-button{min-width:var(--wcs-button-min-width, 42px);min-height:var(--wcs-button-min-height, 42px)}:host([shape=normal]){--wcs-button-padding:calc(var(--wcs-padding) / 2 + 1px) calc(var(--wcs-padding))}:host([shape=normal]) .wcs-inner-button{min-width:var(--wcs-button-min-width, unset);min-height:var(--wcs-button-min-height, unset)}:host([mode=stroked]) .wcs-inner-button{box-shadow:inset 0 0 0 1px var(--wcs-button-border-color)}:host([loading]){position:relative}:host([loading]) .wcs-inner-button>*:not(wcs-spinner){visibility:hidden;opacity:0}:host([loading]) wcs-spinner{height:24px;width:24px;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto}:host([disabled]),:host([loading]){--wcs-button-color:var(--wcs-text-disabled);cursor:not-allowed}:host([disabled]) :host(not[loading]),:host([loading]) :host(not[loading]){--wcs-button-background-color:var(--wcs-light)}:host([disabled]) .wcs-inner-button,:host([loading]) .wcs-inner-button{--wcs-button-border-color:var(--wcs-light);opacity:1;cursor:default;pointer-events:none}:host([disabled]):host([mode=clear]),:host([disabled]):host([disabled]),:host([loading]):host([mode=clear]),:host([loading]):host([disabled]){--wcs-button-background-color:transparent}.wcs-inner-button{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);will-change:transform, opacity;display:flex;align-items:center;justify-content:center;width:100%;font-family:var(--wcs-font-sans-serif);background-color:var(--wcs-button-background-color);color:var(--wcs-button-color);padding:var(--wcs-button-padding);border-radius:var(--wcs-button-border-radius);border:none;overflow:hidden;outline:0;text-transform:none;margin:0;cursor:pointer;font-weight:500;text-align:center;white-space:nowrap;vertical-align:middle;user-select:none;font-size:1rem;line-height:1.5;transition:color 175ms ease-in-out, background-color 175ms ease-in-out, box-shadow 175ms cubic-bezier(0.4, 0, 0.2, 1)}.wcs-inner-button::before,.wcs-inner-button::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.wcs-inner-button::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.wcs-inner-button::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.wcs-inner-button.mdc-ripple-upgraded::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.wcs-inner-button.mdc-ripple-upgraded::after{top:0;left:0;transform:scale(0);transform-origin:center center}.wcs-inner-button.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.wcs-inner-button.mdc-ripple-upgraded--foreground-activation::after{animation:mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards}.wcs-inner-button.mdc-ripple-upgraded--foreground-deactivation::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.wcs-inner-button::before,.wcs-inner-button::after{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.wcs-inner-button.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.wcs-inner-button:hover::before,.wcs-inner-button.mdc-ripple-surface--hover::before{opacity:0.1;opacity:var(--mdc-ripple-hover-opacity, 0.1)}.wcs-inner-button.mdc-ripple-upgraded--background-focused::before,.wcs-inner-button:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:0.2;opacity:var(--mdc-ripple-focus-opacity, 0.2)}.wcs-inner-button:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.wcs-inner-button:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:0.3;opacity:var(--mdc-ripple-press-opacity, 0.3)}.wcs-inner-button.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.3)}.wcs-inner-button::before,.wcs-inner-button::after{background-color:white;background-color:var(--mdc-ripple-color, white)}.wcs-inner-button::before,.wcs-inner-button::after{background-color:var(--wcs-button-ripple-color)}.wcs-inner-button:focus{box-shadow:0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 1px 3px 0 rgba(0, 0, 0, 0.2)}.wcs-inner-button:hover{box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2)}a{text-decoration:none;box-sizing:border-box}button::-moz-focus-inner,a::-moz-focus-inner{border:0}";
+const WcsButtonSizeValues = ['s', 'm', 'l']; // as const keyword is used to infer and preserve the exact literal values of an array or object.
+function isWcsButtonSize(size) {
+  // @ts-ignore : ignore size type, as it is checked with WcsButtonSizeValues
+  return WcsButtonSizeValues.includes(size);
+}
+
+const buttonCss = "@keyframes mdc-ripple-fg-radius-in{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}}@keyframes mdc-ripple-fg-opacity-in{from{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-out{from{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-ripple-surface{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);will-change:transform, opacity;position:relative;outline:none;overflow:hidden}.mdc-ripple-surface::before,.mdc-ripple-surface::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-ripple-surface::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.mdc-ripple-surface::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.mdc-ripple-surface.mdc-ripple-upgraded::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-ripple-surface.mdc-ripple-upgraded::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after{animation:mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.mdc-ripple-surface::before,.mdc-ripple-surface::after{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-ripple-surface.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded],.mdc-ripple-upgraded--unbounded{overflow:visible}.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before,.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after,.mdc-ripple-upgraded--unbounded::before,.mdc-ripple-upgraded--unbounded::after{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before,.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::before,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after{top:var(--mdc-ripple-top, calc(50% - 50%));left:var(--mdc-ripple-left, calc(50% - 50%));width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-ripple-surface::before,.mdc-ripple-surface::after{background-color:#000;background-color:var(--mdc-ripple-color, #000)}.mdc-ripple-surface:hover::before,.mdc-ripple-surface.mdc-ripple-surface--hover::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mdc-ripple-surface:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-ripple-surface.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}:host{display:inline-block;--wcs-button-color:var(--wcs-contrast, var(--wcs-white, white));--wcs-button-background-color:var(--wcs-base, var(--wcs-primary, #0088CE));--wcs-button-ripple-color:var(--wcs-contrast, var(--wcs-white, white));--wcs-button-border-radius:var(--wcs-border-radius);--wcs-button-border-color:var(--wcs-base)}.wcs-inner-button:focus-visible{outline:2px dashed var(--wcs-primary);outline-offset:4px;border-radius:var(--wcs-button-border-radius)}:host([mode=clear]){--wcs-button-border-color:transparent}:host([mode=clear]) .wcs-inner-button{box-shadow:none}:host([mode=clear]),:host([mode=stroked]){--wcs-button-color:var(--wcs-base);--wcs-button-background-color:transparent}:host([mode=clear]) .wcs-inner-button::before,:host([mode=clear]) .wcs-inner-button::after,:host([mode=stroked]) .wcs-inner-button::before,:host([mode=stroked]) .wcs-inner-button::after{--wcs-button-ripple-color:var(--wcs-base)}:host([size=l]){--wcs-button-padding:var(--wcs-padding-m) var(--wcs-padding);--wcs-button-min-height:var(--wcs-size-l);--wcs-button-min-width:var(--wcs-size-l);--wcs-button-font-size:1.0625rem}:host([size=m]){--wcs-button-padding:var(--wcs-padding-m) var(--wcs-padding);--wcs-button-min-height:var(--wcs-size-m);--wcs-button-min-width:var(--wcs-size-m);--wcs-button-font-size:1rem}:host([size=s]){--wcs-button-padding:var(--wcs-padding-s) var(--wcs-padding);--wcs-button-min-height:var(--wcs-size-s);--wcs-button-min-width:var(--wcs-size-s);--wcs-button-font-size:0.9375rem}:host([shape=round]){--wcs-button-border-radius:2rem}:host([shape=round]) ::slotted(wcs-mat-icon){margin:calc(-1 * var(--wcs-padding))}:host([shape=square]){--wcs-button-padding:0}:host([shape=square]) ::slotted(wcs-mat-icon){margin:calc(-1 * var(--wcs-padding))}:host([shape=normal]) .wcs-inner-button{min-width:var(--wcs-button-min-width, unset);min-height:var(--wcs-button-min-height, unset)}:host([mode=stroked]) .wcs-inner-button{box-shadow:inset 0 0 0 1px var(--wcs-button-border-color)}:host([loading]){position:relative}:host([loading]) .wcs-inner-button>*:not(wcs-spinner){visibility:hidden;opacity:0}:host([loading]) wcs-spinner{height:calc(var(--wcs-button-min-height) / 2);width:calc(var(--wcs-button-min-width) / 2);position:absolute;top:0;bottom:0;left:0;right:0;margin:auto}:host([disabled]),:host([loading]){--wcs-button-color:var(--wcs-text-disabled);cursor:not-allowed}:host([disabled]) :host(not[loading]),:host([loading]) :host(not[loading]){--wcs-button-background-color:var(--wcs-light)}:host([disabled]) .wcs-inner-button,:host([loading]) .wcs-inner-button{--wcs-button-border-color:var(--wcs-light);opacity:1;cursor:default;pointer-events:none}:host([disabled]):host([mode=clear]),:host([disabled]):host([disabled]),:host([loading]):host([mode=clear]),:host([loading]):host([disabled]){--wcs-button-background-color:transparent}.wcs-inner-button{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);will-change:transform, opacity;display:flex;align-items:center;justify-content:center;width:100%;font-family:var(--wcs-font-sans-serif);background-color:var(--wcs-button-background-color);color:var(--wcs-button-color);padding:var(--wcs-button-padding);border-radius:var(--wcs-button-border-radius);border:none;overflow:hidden;outline:0;text-transform:none;margin:0;cursor:pointer;font-weight:500;text-align:center;white-space:nowrap;vertical-align:middle;user-select:none;font-size:var(--wcs-button-font-size);line-height:1.5;min-height:var(--wcs-button-min-height);min-width:var(--wcs-button-min-width);transition:color 175ms ease-in-out, background-color 175ms ease-in-out, box-shadow 175ms cubic-bezier(0.4, 0, 0.2, 1)}.wcs-inner-button::before,.wcs-inner-button::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.wcs-inner-button::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.wcs-inner-button::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.wcs-inner-button.mdc-ripple-upgraded::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.wcs-inner-button.mdc-ripple-upgraded::after{top:0;left:0;transform:scale(0);transform-origin:center center}.wcs-inner-button.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.wcs-inner-button.mdc-ripple-upgraded--foreground-activation::after{animation:mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards}.wcs-inner-button.mdc-ripple-upgraded--foreground-deactivation::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.wcs-inner-button::before,.wcs-inner-button::after{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.wcs-inner-button.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.wcs-inner-button:hover::before,.wcs-inner-button.mdc-ripple-surface--hover::before{opacity:0.1;opacity:var(--mdc-ripple-hover-opacity, 0.1)}.wcs-inner-button.mdc-ripple-upgraded--background-focused::before,.wcs-inner-button:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:0.2;opacity:var(--mdc-ripple-focus-opacity, 0.2)}.wcs-inner-button:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.wcs-inner-button:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:0.3;opacity:var(--mdc-ripple-press-opacity, 0.3)}.wcs-inner-button.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.3)}.wcs-inner-button::before,.wcs-inner-button::after{background-color:white;background-color:var(--mdc-ripple-color, white)}.wcs-inner-button::before,.wcs-inner-button::after{background-color:var(--wcs-button-ripple-color)}.wcs-inner-button:focus{box-shadow:0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 1px 3px 0 rgba(0, 0, 0, 0.2)}.wcs-inner-button:hover{box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2)}a{text-decoration:none;box-sizing:border-box}button::-moz-focus-inner,a::-moz-focus-inner{border:0}";
 
 const Button = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.type = 'button';
     this.href = undefined;
+    this.target = undefined;
     this.disabled = false;
     this.ripple = true;
+    this.size = 'm';
     this.shape = 'normal';
     this.mode = 'plain';
     this.loading = false;
@@ -35,6 +43,12 @@ const Button = class {
       }
     }
   }
+  componentWillLoad() {
+    if (!isWcsButtonSize(this.size)) {
+      console.error(`Invalid size value for wcs-button : "${this.size}". Must be one of "${WcsButtonSizeValues.join(', ')}"`);
+      this.size = "m"; // Default fallback value
+    }
+  }
   componentDidLoad() {
     this.mdcRipple = new MDCRipple(this.el.shadowRoot.querySelector('.wcs-inner-button'));
   }
@@ -58,7 +72,7 @@ const Button = class {
   render() {
     const TagType = this.getTagName();
     const attrs = this.href !== undefined
-      ? { href: this.href, role: 'button' }
+      ? { href: this.href, role: 'button', target: this.target }
       : { type: this.type };
     return (h(TagType, Object.assign({}, attrs, { class: "wcs-inner-button", disabled: this.disabled || this.loading }), this.loading && h("wcs-spinner", null), h("slot", null)));
   }

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

@@ -1 +1 @@
-{"file":"wcs-button.entry.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,muTAAmuT;;MCiBxuT,MAAM;;;gBAMgC,QAAQ;;oBAWnB,KAAK;kBAKxB,IAAI;iBAM4B,QAAQ;gBAKV,OAAO;mBAKZ,KAAK;;EAG/C,OAAO,CAAC,EAAS;IACb,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,EAAE;MAC/B,EAAE,CAAC,wBAAwB,EAAE,CAAC;KACjC;IACD,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;;;;MAIjD,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;MACrC,IAAI,IAAI,EAAE;QACN,EAAE,CAAC,cAAc,EAAE,CAAC;QAEpB,MAAM,UAAU,GAAG,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC3D,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QAC5B,UAAU,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QAClC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;QAC7B,UAAU,CAAC,KAAK,EAAE,CAAC;QACnB,UAAU,CAAC,MAAM,EAAE,CAAC;OACvB;KACJ;GACJ;EAED,gBAAgB;IACZ,IAAI,CAAC,SAAS,GAAG,IAAI,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC,CAAC;GACzF;EAEO,mBAAmB;IACvB,IAAI,CAAC,SAAS,CAAC,QAAQ,GAAG,KAAK,CAAC;GACnC;EAEO,oBAAoB;IACxB,IAAI,CAAC,SAAS,CAAC,QAAQ,GAAG,IAAI,CAAC;GAClC;EAEO,UAAU;IACd,OAAO,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,GAAG,GAAG,QAAQ,CAAC;GACnD;EAGD,cAAc;IACV,IAAI,IAAI,CAAC,MAAM,EAAE;MACb,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC9B;SAAM;MACH,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC/B;GACJ;EAED,MAAM;IACF,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;IAClC,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS;QAC/B,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE;QACnC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;IAC1B,QACI,EAAC,OAAO,oBACA,KAAK,IACT,KAAK,EAAC,kBAAkB,EACxB,QAAQ,EAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,KAGrC,IAAI,CAAC,OAAO,IAAI,sBAA2B,EAE/C,eAAO,CACD,EACZ;GACL;;;;;;;;;;;","names":[],"sources":["./src/components/button/button.scss?tag=wcs-button&encapsulation=shadow","./src/components/button/button.tsx"],"sourcesContent":["@import '../../style/elevation.scss';\n// TODO: get rid of this.\n@import '~@material/ripple/mdc-ripple';\n@import '../../style/focus-outline.scss';\n\n:host {\n    display: inline-block;\n    --wcs-button-padding: calc(var(--wcs-padding) / 2) var(--wcs-padding);\n    --wcs-button-color: var(--wcs-contrast, var(--wcs-white, white));\n    --wcs-button-background-color: var(--wcs-base, var(--wcs-primary, #0088CE));\n    --wcs-button-ripple-color: var(--wcs-contrast, var(--wcs-white, white));\n    --wcs-button-border-radius: var(--wcs-border-radius);\n    --wcs-button-border-color: var(--wcs-base);\n}\n\n.wcs-inner-button:focus-visible {\n    @include focus-outline($border-radius: var(--wcs-button-border-radius));\n}\n\n:host([mode=clear]) {\n    --wcs-button-border-color: transparent;\n\n    .wcs-inner-button {\n        box-shadow: none;\n    }\n}\n\n:host([mode=clear]),\n:host([mode=stroked]) {\n    --wcs-button-color: var(--wcs-base);\n    --wcs-button-background-color: transparent;\n\n    .wcs-inner-button {\n        &::before,\n        &::after {\n            --wcs-button-ripple-color: var(--wcs-base);\n        }\n    }\n}\n\n:host([shape=small]) {\n    --wcs-button-padding: 2px 16px;\n\n    .wcs-inner-button {\n        min-width: var(--wcs-button-min-width, unset);\n        min-height: var(--wcs-button-min-height, unset);\n    }\n}\n\n:host([shape=round]) {\n    --wcs-button-padding: 0;\n    --wcs-button-border-radius: 50%;\n\n    .wcs-inner-button {\n        min-width: var(--wcs-button-min-width, 42px);\n        min-height: var(--wcs-button-min-height, 42px);\n    }\n}\n\n:host([shape=square]) {\n    --wcs-button-padding: 0;\n\n    .wcs-inner-button {\n        min-width: var(--wcs-button-min-width, 42px);\n        min-height: var(--wcs-button-min-height, 42px);\n    }\n}\n\n:host([shape=normal]) {\n    --wcs-button-padding: calc(var(--wcs-padding) / 2 + 1px) calc(var(--wcs-padding));\n\n    .wcs-inner-button {\n        min-width: var(--wcs-button-min-width, unset);\n        min-height: var(--wcs-button-min-height, unset);\n    }\n}\n\n:host([mode=stroked]) {\n    .wcs-inner-button {\n        box-shadow: inset 0 0 0 1px var(--wcs-button-border-color);\n    }\n}\n\n:host([loading]) {\n    position: relative;\n\n    .wcs-inner-button > *:not(wcs-spinner) {\n        visibility: hidden;\n        opacity: 0;\n    }\n\n    wcs-spinner {\n        height: 24px;\n        width: 24px;\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        margin: auto;\n    }\n}\n\n:host([disabled]), :host([loading]) {\n    :host(not[loading]) {\n        --wcs-button-background-color: var(--wcs-light);\n    }\n    --wcs-button-color: var(--wcs-text-disabled);\n    cursor: not-allowed;\n\n    .wcs-inner-button {\n        // Fix for stroked button\n        --wcs-button-border-color: var(--wcs-light);\n        opacity: 1;\n        cursor: default;\n        pointer-events: none;\n    }\n\n    &:host([mode=clear]),\n    &:host([disabled]) {\n        --wcs-button-background-color: transparent;\n    }\n}\n\n.wcs-inner-button {\n    @include mdc-ripple-surface;\n    @include mdc-ripple-radius-bounded;\n    @include mdc-states-hover-opacity(.1);\n    @include mdc-states-focus-opacity(.2);\n    @include mdc-states-press-opacity(.3);\n    @include mdc-states-base-color(white);\n\n    // This property is used to set the ripple color\n    &::before,\n    &::after {\n        background-color: var(--wcs-button-ripple-color);\n    }\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    font-family: var(--wcs-font-sans-serif);\n    background-color: var(--wcs-button-background-color);\n    color: var(--wcs-button-color);\n    padding: var(--wcs-button-padding);\n    border-radius: var(--wcs-button-border-radius);\n    border: none;\n    overflow: hidden;\n    outline: 0;\n    text-transform: none;\n    margin: 0;\n    cursor: pointer;\n    font-weight: 500;\n    text-align: center;\n    white-space: nowrap;\n    vertical-align: middle;\n    user-select: none;\n    font-size: 1rem;\n    line-height: 1.5;\n\n    transition: color 175ms ease-in-out, background-color 175ms ease-in-out, wcs-elevation-transition();\n\n    &:focus {\n        @include wcs-elevation(1);\n    }\n\n    &:hover {\n        @include wcs-elevation(2);\n    }\n}\n\na {\n    text-decoration: none;\n    box-sizing: border-box;\n}\n\n// Remove mozilla dotted outline on button and a\nbutton::-moz-focus-inner,\na::-moz-focus-inner {\n    border: 0;\n}\n","import {Component, ComponentInterface, Element, h, Listen, Prop, Watch} from '@stencil/core';\n\nimport { MDCRipple } from '@material/ripple';\n\nimport { WcsButtonMode, WcsButtonShape, WcsButtonType } from './button-interface';\nimport { hasShadowDom } from '../../utils/helpers';\n\n/**\n * Button component, can also be a link when specifying href.\n */\n@Component({\n    tag: 'wcs-button',\n    styleUrl: 'button.scss',\n    shadow: {\n        delegatesFocus: true\n    }\n})\nexport class Button implements ComponentInterface {\n    @Element() el!: HTMLElement;\n\n    /**\n     * Specify the button type.\n     */\n    @Prop({ mutable: true }) type: WcsButtonType = 'button';\n\n    /**\n     * Set a URL to point to.\n     * If specified use a `a` tag instead of `btn`.\n     */\n    @Prop() href?: string;\n\n    /**\n     * Specify wether the button is disabled or not.\n     */\n    @Prop({ reflect: true }) disabled = false;\n\n    /**\n     * Specify wether the button should have a ripple effect or not.\n     */\n    @Prop() ripple = true;\n    mdcRipple: MDCRipple;\n\n    /**\n     * Specify the shape of the button.\n     */\n    @Prop({ reflect: true }) shape: WcsButtonShape = 'normal';\n\n    /**\n     * This attribute specify the appearance of the button.\n     */\n    @Prop({ reflect: true }) mode: WcsButtonMode = 'plain';\n\n    /**\n     * Flag to display spinner until the end of action\n     */\n    @Prop({mutable: true}) loading: boolean = false;\n\n    @Listen('click')\n    onClick(ev: Event) {\n        if (this.disabled || this.loading) {\n            ev.stopImmediatePropagation();\n        }\n        if (this.type !== 'button' && hasShadowDom(this.el)) {\n            // this button wants to specifically submit a form\n            // climb up the dom to see if we're in a <form>\n            // and if so, then use JS to submit it\n            const form = this.el.closest('form');\n            if (form) {\n                ev.preventDefault();\n\n                const fakeButton = window.document.createElement('button');\n                fakeButton.type = this.type;\n                fakeButton.style.display = 'none';\n                form.appendChild(fakeButton);\n                fakeButton.click();\n                fakeButton.remove();\n            }\n        }\n    }\n\n    componentDidLoad() {\n        this.mdcRipple = new MDCRipple(this.el.shadowRoot.querySelector('.wcs-inner-button'));\n    }\n\n    private enabledRippleEffect() {\n        this.mdcRipple.disabled = false;\n    }\n\n    private disabledRippleEffect() {\n        this.mdcRipple.disabled = true;\n    }\n\n    private getTagName() {\n        return this.href !== undefined ? 'a' : 'button';\n    }\n\n    @Watch('ripple')\n    onRippleChange(): void {\n        if (this.ripple) {\n            this.enabledRippleEffect();\n        } else {\n            this.disabledRippleEffect();\n        }\n    }\n\n    render() {\n        const TagType = this.getTagName();\n        const attrs = this.href !== undefined\n            ? { href: this.href, role: 'button' }\n            : { type: this.type };\n        return (\n            <TagType\n                {...attrs}\n                class=\"wcs-inner-button\"\n                disabled = {this.disabled || this.loading}\n            >\n                {\n                    this.loading && <wcs-spinner></wcs-spinner>\n                }\n                <slot/>\n            </TagType>\n        );\n    }\n}\n"],"version":3}
+{"file":"wcs-button.entry.js","mappings":";;;;AAQO,MAAM,mBAAmB,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAU,CAAC;SAI5C,eAAe,CAAC,IAAY;;EAExC,OAAO,mBAAmB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;AAC9C;;ACfA,MAAM,SAAS,GAAG,m/TAAm/T;;MCwBx/T,MAAM;;;gBAMgC,QAAQ;;;oBAiBnB,KAAK;kBAKxB,IAAI;gBAM0B,GAAG;iBAKD,QAAQ;gBAKV,OAAO;mBAKZ,KAAK;;EAG/C,OAAO,CAAC,EAAS;IACb,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,EAAE;MAC/B,EAAE,CAAC,wBAAwB,EAAE,CAAC;KACjC;IACD,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;;;;MAIjD,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;MACrC,IAAI,IAAI,EAAE;QACN,EAAE,CAAC,cAAc,EAAE,CAAC;QAEpB,MAAM,UAAU,GAAG,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC3D,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QAC5B,UAAU,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QAClC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;QAC7B,UAAU,CAAC,KAAK,EAAE,CAAC;QACnB,UAAU,CAAC,MAAM,EAAE,CAAC;OACvB;KACJ;GACJ;EAED,iBAAiB;IACb,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;MAC7B,OAAO,CAAC,KAAK,CAAC,wCAAwC,IAAI,CAAC,IAAI,sBAAsB,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;MACxH,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC;KACnB;GACJ;EAED,gBAAgB;IACZ,IAAI,CAAC,SAAS,GAAG,IAAI,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC,CAAC;GACzF;EAEO,mBAAmB;IACvB,IAAI,CAAC,SAAS,CAAC,QAAQ,GAAG,KAAK,CAAC;GACnC;EAEO,oBAAoB;IACxB,IAAI,CAAC,SAAS,CAAC,QAAQ,GAAG,IAAI,CAAC;GAClC;EAEO,UAAU;IACd,OAAO,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,GAAG,GAAG,QAAQ,CAAC;GACnD;EAGD,cAAc;IACV,IAAI,IAAI,CAAC,MAAM,EAAE;MACb,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC9B;SAAM;MACH,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC/B;GACJ;EAED,MAAM;IACF,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;IAClC,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS;QAC/B,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE;QACxD,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;IAC1B,QACI,EAAC,OAAO,oBACA,KAAK,IACT,KAAK,EAAC,kBAAkB,EACxB,QAAQ,EAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,KAGrC,IAAI,CAAC,OAAO,IAAI,sBAA2B,EAE/C,eAAO,CACD,EACZ;GACL;;;;;;;;;;;","names":[],"sources":["./src/components/button/button-interface.ts","./src/components/button/button.scss?tag=wcs-button&encapsulation=shadow","./src/components/button/button.tsx"],"sourcesContent":["import { WcsSize } from '../../shared-types';\n\nexport type WcsButtonType = 'button' | 'submit';\n\nexport type WcsButtonShape = 'normal' | 'round' | 'square';\n\nexport type WcsButtonMode = 'plain' | 'stroked' | 'clear';\n\nexport const WcsButtonSizeValues = ['s', '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 WcsButtonSize = Extract<WcsSize, typeof WcsButtonSizeValues[number]>;\n\nexport function isWcsButtonSize(size: string): size is WcsButtonSize {\n    // @ts-ignore : ignore size type, as it is checked with WcsButtonSizeValues\n    return WcsButtonSizeValues.includes(size);\n}\n","@import '../../style/elevation.scss';\n// TODO: get rid of this.\n@import '~@material/ripple/mdc-ripple';\n@import '../../style/focus-outline.scss';\n\n:host {\n    display: inline-block;\n    --wcs-button-color: var(--wcs-contrast, var(--wcs-white, white));\n    --wcs-button-background-color: var(--wcs-base, var(--wcs-primary, #0088CE));\n    --wcs-button-ripple-color: var(--wcs-contrast, var(--wcs-white, white));\n    --wcs-button-border-radius: var(--wcs-border-radius);\n    --wcs-button-border-color: var(--wcs-base);\n}\n\n.wcs-inner-button:focus-visible {\n    @include focus-outline($border-radius: var(--wcs-button-border-radius));\n}\n\n:host([mode=clear]) {\n    --wcs-button-border-color: transparent;\n\n    .wcs-inner-button {\n        box-shadow: none;\n    }\n}\n\n:host([mode=clear]),\n:host([mode=stroked]) {\n    --wcs-button-color: var(--wcs-base);\n    --wcs-button-background-color: transparent;\n\n    .wcs-inner-button {\n        &::before,\n        &::after {\n            --wcs-button-ripple-color: var(--wcs-base);\n        }\n    }\n}\n\n:host([size=l]) {\n    --wcs-button-padding: var(--wcs-padding-m) var(--wcs-padding);\n    --wcs-button-min-height: var(--wcs-size-l);\n    --wcs-button-min-width: var(--wcs-size-l);\n    --wcs-button-font-size: 1.0625rem;\n}\n\n:host([size=m]) { // Default\n    --wcs-button-padding: var(--wcs-padding-m) var(--wcs-padding);\n    --wcs-button-min-height: var(--wcs-size-m);\n    --wcs-button-min-width: var(--wcs-size-m);\n    --wcs-button-font-size: 1rem;\n}\n\n:host([size=s]) {\n    --wcs-button-padding: var(--wcs-padding-s) var(--wcs-padding);\n    --wcs-button-min-height: var(--wcs-size-s);\n    --wcs-button-min-width: var(--wcs-size-s);\n    --wcs-button-font-size: 0.9375rem;\n}\n\n:host([shape=round]) {\n    --wcs-button-border-radius: 2rem;\n\n    ::slotted(wcs-mat-icon) {\n        margin: calc(-1 * var(--wcs-padding));\n    }\n}\n\n:host([shape=square]) {\n    --wcs-button-padding: 0;\n\n    ::slotted(wcs-mat-icon) {\n        margin: calc(-1 * var(--wcs-padding));\n    }\n}\n\n:host([shape=normal]) {\n    .wcs-inner-button {\n        min-width: var(--wcs-button-min-width, unset);\n        min-height: var(--wcs-button-min-height, unset);\n    }\n}\n\n:host([mode=stroked]) {\n    .wcs-inner-button {\n        box-shadow: inset 0 0 0 1px var(--wcs-button-border-color);\n    }\n}\n\n:host([loading]) {\n    position: relative;\n\n    .wcs-inner-button > *:not(wcs-spinner) {\n        visibility: hidden;\n        opacity: 0;\n    }\n\n    wcs-spinner {\n        height: calc(var(--wcs-button-min-height) / 2);\n        width: calc(var(--wcs-button-min-width) / 2);\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        margin: auto;\n    }\n}\n\n:host([disabled]), :host([loading]) {\n    :host(not[loading]) {\n        --wcs-button-background-color: var(--wcs-light);\n    }\n    --wcs-button-color: var(--wcs-text-disabled);\n    cursor: not-allowed;\n\n    .wcs-inner-button {\n        // Fix for stroked button\n        --wcs-button-border-color: var(--wcs-light);\n        opacity: 1;\n        cursor: default;\n        pointer-events: none;\n    }\n\n    &:host([mode=clear]),\n    &:host([disabled]) {\n        --wcs-button-background-color: transparent;\n    }\n}\n\n.wcs-inner-button {\n    @include mdc-ripple-surface;\n    @include mdc-ripple-radius-bounded;\n    @include mdc-states-hover-opacity(.1);\n    @include mdc-states-focus-opacity(.2);\n    @include mdc-states-press-opacity(.3);\n    @include mdc-states-base-color(white);\n\n    // This property is used to set the ripple color\n    &::before,\n    &::after {\n        background-color: var(--wcs-button-ripple-color);\n    }\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    font-family: var(--wcs-font-sans-serif);\n    background-color: var(--wcs-button-background-color);\n    color: var(--wcs-button-color);\n    padding: var(--wcs-button-padding);\n    border-radius: var(--wcs-button-border-radius);\n    border: none;\n    overflow: hidden;\n    outline: 0;\n    text-transform: none;\n    margin: 0;\n    cursor: pointer;\n    font-weight: 500;\n    text-align: center;\n    white-space: nowrap;\n    vertical-align: middle;\n    user-select: none;\n    font-size: var(--wcs-button-font-size);\n    line-height: 1.5;\n    min-height: var(--wcs-button-min-height);\n    min-width: var(--wcs-button-min-width);\n\n    transition: color 175ms ease-in-out, background-color 175ms ease-in-out, wcs-elevation-transition();\n\n    &:focus {\n        @include wcs-elevation(1);\n    }\n\n    &:hover {\n        @include wcs-elevation(2);\n    }\n}\n\na {\n    text-decoration: none;\n    box-sizing: border-box;\n}\n\n// Remove mozilla dotted outline on button and a\nbutton::-moz-focus-inner,\na::-moz-focus-inner {\n    border: 0;\n}\n","import {Component, ComponentInterface, Element, h, Listen, Prop, Watch} from '@stencil/core';\n\nimport { MDCRipple } from '@material/ripple';\n\nimport {\n    isWcsButtonSize,\n    WcsButtonMode,\n    WcsButtonShape,\n    WcsButtonSize,\n    WcsButtonSizeValues,\n    WcsButtonType\n} from './button-interface';\nimport { hasShadowDom } from '../../utils/helpers';\n\n/**\n * Button component, can also be a link when specifying href.\n */\n@Component({\n    tag: 'wcs-button',\n    styleUrl: 'button.scss',\n    shadow: {\n        delegatesFocus: true\n    }\n})\nexport class Button implements ComponentInterface {\n    @Element() private el!: HTMLElement;\n\n    /**\n     * Specify the button type.\n     */\n    @Prop({ mutable: true }) type: WcsButtonType = 'button';\n\n    /**\n     * Set a URL to point to.<br/>\n     * If specified use a `a` tag instead of `btn`.\n     */\n    @Prop() href?: string;\n\n    /**\n     * Specifies where to open the linked document when using href (see prop above)<br/>\n     * Default '_self' will open the linked document in the same frame as it was clicked\n     */\n    @Prop() target?: '_blank' | '_self';\n\n    /**\n     * Specify whether the button is disabled or not.\n     */\n    @Prop({ reflect: true }) disabled = false;\n\n    /**\n     * Specify whether the button should have a ripple effect or not.\n     */\n    @Prop() ripple = true;\n    private mdcRipple: MDCRipple;\n\n    /**\n     * Specify the size of the button.\n     */\n    @Prop({ reflect: true }) size: WcsButtonSize = 'm';\n\n    /**\n     * Specify the shape of the button.\n     */\n    @Prop({ reflect: true }) shape: WcsButtonShape = 'normal';\n\n    /**\n     * This attribute specify the appearance of the button.\n     */\n    @Prop({ reflect: true }) mode: WcsButtonMode = 'plain';\n\n    /**\n     * Flag to display spinner until the end of action\n     */\n    @Prop({mutable: true}) loading: boolean = false;\n\n    @Listen('click')\n    onClick(ev: Event) {\n        if (this.disabled || this.loading) {\n            ev.stopImmediatePropagation();\n        }\n        if (this.type !== 'button' && hasShadowDom(this.el)) {\n            // this button wants to specifically submit a form\n            // climb up the dom to see if we're in a <form>\n            // and if so, then use JS to submit it\n            const form = this.el.closest('form');\n            if (form) {\n                ev.preventDefault();\n\n                const fakeButton = window.document.createElement('button');\n                fakeButton.type = this.type;\n                fakeButton.style.display = 'none';\n                form.appendChild(fakeButton);\n                fakeButton.click();\n                fakeButton.remove();\n            }\n        }\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        if (!isWcsButtonSize(this.size)) {\n            console.error(`Invalid size value for wcs-button : \"${this.size}\". Must be one of \"${WcsButtonSizeValues.join(', ')}\"`);\n            this.size = \"m\"; // Default fallback value\n        }\n    }\n\n    componentDidLoad() {\n        this.mdcRipple = new MDCRipple(this.el.shadowRoot.querySelector('.wcs-inner-button'));\n    }\n\n    private enabledRippleEffect() {\n        this.mdcRipple.disabled = false;\n    }\n\n    private disabledRippleEffect() {\n        this.mdcRipple.disabled = true;\n    }\n\n    private getTagName() {\n        return this.href !== undefined ? 'a' : 'button';\n    }\n\n    @Watch('ripple')\n    onRippleChange(): void {\n        if (this.ripple) {\n            this.enabledRippleEffect();\n        } else {\n            this.disabledRippleEffect();\n        }\n    }\n\n    render() {\n        const TagType = this.getTagName();\n        const attrs = this.href !== undefined\n            ? { href: this.href, role: 'button', target: this.target }\n            : { type: this.type };\n        return (\n            <TagType\n                {...attrs}\n                class=\"wcs-inner-button\"\n                disabled = {this.disabled || this.loading}\n            >\n                {\n                    this.loading && <wcs-spinner></wcs-spinner>\n                }\n                <slot/>\n            </TagType>\n        );\n    }\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-dc4d96d4.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-dc4d96d4.js';
 
 const checkboxCss = ":host{--wcs-checkbox-border-color:var(--wcs-text-medium);--wcs-checkbox-text-color:var(--wcs-text-medium);display:flex}:host([disabled]){--wcs-checkbox-border-color:var(--wcs-light);--wcs-checkbox-text-color:var(--wcs-text-disabled)}:host([disabled]) .wcs-container{cursor:not-allowed}.wcs-checkmark{transition:background-color 225ms cubic-bezier(0.17, 0.84, 0.44, 1), color 225ms cubic-bezier(0.17, 0.84, 0.44, 1)}.wcs-container{position:relative;font-size:1rem;user-select:none;font-weight:500;display:flex}.wcs-container:not([aria-disabled]){cursor:pointer}:host([label-alignment=top]) .wcs-container{align-items:start}:host([label-alignment=center]) .wcs-container{align-items:center}:host([label-alignment=bottom]) .wcs-container{align-items:flex-end}.wcs-container input{position:absolute;opacity:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.wcs-container:hover:not([aria-disabled]),input:focus{--wcs-checkbox-border-color:var(--wcs-primary);--wcs-checkbox-text-color:var(--wcs-primary)}.wcs-container:has(input:focus-visible){outline:2px dashed var(--wcs-primary);outline-offset:4px;border-radius:calc(var(--wcs-border-radius) / 2)}@supports not selector(.wcs-container:has(input:focus-visible)){.wcs-container:focus-within{outline:2px dashed var(--wcs-primary);outline-offset:4px;border-radius:calc(var(--wcs-border-radius) / 2)}}.wcs-checkmark{flex:0 0 1.125rem;width:1.125rem;height:1.125rem;border:2px solid var(--wcs-checkbox-border-color);border-radius:3px}:host([indeterminate]) .wcs-checkmark{--wcs-checkbox-border-color:var(--wcs-primary);background:var(--wcs-primary)}.wcs-container:not([aria-disabled]) input:checked~.wcs-checkmark{background-color:var(--wcs-primary);--wcs-checkbox-border-color:var(--wcs-primary)}.wcs-container[aria-disabled] input:checked~.wcs-checkmark{background-color:var(--wcs-light);--wcs-checkbox-border-color:var(--wcs-light)}.wcs-checkmark:after{content:\"\";position:absolute;display:none}.wcs-container input:checked~.wcs-checkmark:after{display:flex}.wcs-container .wcs-checkmark:after{left:7px;width:5px;height:10px;border:solid var(--wcs-white, white);border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.wcs-container:not([aria-disabled]) input:checked~.text{--wcs-checkbox-text-color:var(--wcs-primary)}.text{color:var(--wcs-checkbox-text-color);margin-left:6px;font-weight:500;line-height:1.375}";
 
@@ -23,7 +23,6 @@ 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)))));
   }
-  get el() { return getElement(this); }
 };
 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;gBAItC,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, Element, 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\n    @Element() el: HTMLElement;\n\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;;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}

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-e9b73aad.js';
+import { i as isSpaceKey, a as isEnterKey } from './helpers-1f7170dd.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-category.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-com-nav-category.entry.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,2iFAA2iF;;MCoBxjF,cAAc;;;;;;wBAGU,KAAK;;EAKtC,kBAAkB,CAAC,CAAa;IAC5B,IAAI,IAAI,CAAC,YAAY;MAAE,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;GACpD;EAGD,eAAe,CAAC,KAA6C;IACzD,IAAI,KAAK,CAAC,MAAM,CAAC,eAAe,KAAK,IAAI,CAAC,EAAE,EAAE;MAC1C,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;KAC7B;GACJ;;;;;;EAOO,iBAAiB,CAAC,MAAqB;IAC3C,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,UAAU,CAAC,MAAM,CAAC,EAAE;MAC5C,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;KAC1C;GACJ;;;;;;EAOO,0BAA0B,CAAC,MAAqB;IACpD,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,UAAU,CAAC,MAAM,CAAC,EAAE;MAC5C,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;KAChC;GACJ;;;;EAMD,MAAM,KAAK;IACP,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;GAC7B;;;;EAMD,MAAM,IAAI;IACN,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;GAC5B;;;;;EAMO,OAAO,CAAC,GAAe;IAC3B,GAAG,CAAC,eAAe,EAAE,CAAC;IACtB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAC,eAAe,EAAE,IAAI,CAAC,EAAE,EAAC,CAAC,CAAA;GAC1D;;;;;;EAQO,eAAe,CAAC,GAAY;IAChC,IAAK,GAAG,CAAC,MAAsB,CAAC,OAAO,KAAK,GAAG,EAAE;MAC7C,IAAI,CAAC,KAAK,EAAE,CAAC;MACb,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KACzC;GACJ;EAED,MAAM;IACF,QACI,EAAC,IAAI,IAAC,OAAO,EAAE,GAAG,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IACnC,WAAK,QAAQ,EAAE,MAAM,CAAC,KAAK,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,EACzC,KAAK,EAAC,iBAAiB,eACZ,IAAI,CAAC,YAAY,EAC5B,SAAS,EAAE,GAAG,IAAI,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,EAC7C,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,IAAE,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAAM,EACxG,WAAK,KAAK,EAAC,gBAAgB,EACtB,QAAQ,EAAE,CAAC,CAAC,eACD,IAAI,CAAC,YAAY,EAC5B,SAAS,EAAE,GAAG,IAAI,IAAI,CAAC,0BAA0B,CAAC,GAAG,CAAC,EACtD,OAAO,EAAE,CAAC,GAAG,KAAK,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAC5C,eAAO,CACL,CACH,EACV;GACJ;;;;;;;","names":[],"sources":["./src/components/com-nav-category/com-nav-category.scss?tag=wcs-com-nav-category&encapsulation=shadow","./src/components/com-nav-category/com-nav-category.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host{\n    display: block;\n    padding-bottom: var(--wcs-padding);\n    .label-container {\n        display: block;\n        padding-left: calc(9 * var(--wcs-base-margin));\n        color: var(--wcs-gray);\n    }\n    ::slotted(a):after {\n        font-family: icons;\n        padding-left: var(--wcs-base-margin);\n        font-size: 0.6rem;\n        content: \"\\f107\";\n        line-height: 1;\n        box-sizing: border-box;\n    }\n\n    ::slotted(a) {\n        display: block;\n        cursor: pointer;\n        text-decoration: none;\n        font-size: 16px;\n        color: var(--wcs-gray);\n        padding-left: calc(12 * var(--wcs-base-margin));\n        padding-top: calc(1.5 * var(--wcs-base-margin));\n        padding-bottom: calc(1.5 * var(--wcs-base-margin));\n    }\n\n    /**For mobile*/\n    ::slotted(a:focus-visible) {\n        @include focus-outline(var(--wcs-primary), 2px, 0.1rem);\n    }\n\n    @supports not selector(::slotted(a:focus-visible)) {\n        ::slotted(a:focus-within) {\n            @include focus-outline(var(--wcs-primary), 2px, 0.1rem);\n        }\n    }\n}\n\n@media screen and (min-width: 576px) {\n    :host {\n        padding-bottom: unset;\n\n        .item-container:not([data-open]) {\n            display: none;\n        }\n\n        .label:after {\n            font-family: icons;\n            padding-left: var(--wcs-base-margin);\n            font-size: 0.6rem;\n            content: \"\\f107\";\n            line-height: 1;\n            box-sizing: border-box;\n        }\n\n        .label-container {\n            cursor: pointer;\n            user-select: none;\n            display: flex;\n            align-items: center;\n            padding-left: unset;\n            color: var(--wcs-white);\n        }\n\n        .label-container:focus-visible   {\n            @include focus-outline(var(--wcs-white), 5px, 0.1rem);\n        }\n\n        @supports not selector(.label-container:focus-visible) {\n            .label-container:focus-within {\n                @include focus-outline(var(--wcs-white), 5px, 0.1rem);\n            }\n        }\n\n        .label-container[data-open]:after {\n            position: absolute;\n            left: calc(calc(calc(100% / 2) + calc(var(--wcs-com-content-max-width) / 8)) - calc(1.125rem / 2));\n            z-index: 2;\n            display: block;\n            width: 1.125rem;\n            height: 1.125rem;\n            content: \"\";\n            background-color: var(--wcs-primary);\n            transform: rotate(45deg);\n        }\n\n        .item-container[data-open] {\n            position: absolute;\n            left: calc(calc(100% / 2) + calc(var(--wcs-com-content-max-width) / 8));\n            top: 0;\n            right: 0;\n            padding: 50px 0 50px 50px;\n            background-blend-mode: multiply;\n            background-color: rgba(0, 0, 0, 0.15);\n            box-sizing: border-box;\n            height: calc(100%);\n            display: flex;\n            flex-direction: column;\n            align-items: start;\n\n            ::slotted(a:not(:first-child)) {\n                margin-top: 24px;\n            }\n            ::slotted(a) {\n                display: unset;\n                color: var(--wcs-white);\n                padding-left: unset;\n                padding-top: unset;\n                padding-bottom: unset;\n            }\n\n            ::slotted(a:focus-visible) {\n                @include focus-outline(var(--wcs-white), 2px, 0.1rem);\n            }\n\n            @supports not selector(::slotted(a:focus-visible)) {\n                ::slotted(a:focus-within) {\n                    @include focus-outline(var(--wcs-white), 2px, 0.1rem);\n                }\n            }\n        }\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen, Method,\n    Prop,\n    State\n} from '@stencil/core';\nimport { CategoryOpenedEventDetail } from '../com-nav/com-nav-interface';\nimport {isEnterKey, isSpaceKey} from \"../../utils/helpers\";\n\n@Component({\n    tag: 'wcs-com-nav-category',\n    styleUrl: 'com-nav-category.scss',\n    shadow: true,\n})\nexport class ComNavCategory implements ComponentInterface {\n    @Element() el!: HTMLWcsComNavCategoryElement;\n    @Prop() label: string;\n    @State() categoryOpen: boolean = false;\n    @Event() wcsCategoryOpened: EventEmitter<CategoryOpenedEventDetail>;\n    @Event() wcsCategoryItemClicked: EventEmitter<UIEvent>;\n\n    @Listen('click', {target: 'window'})\n    onWindowClickEvent(_: MouseEvent) {\n        if (this.categoryOpen) this.categoryOpen = false;\n    }\n\n    @Listen('wcsCategoryOpened', {target: 'window'})\n    onSubmenuOpened(event: CustomEvent<CategoryOpenedEventDetail>) {\n        if (event.detail.categoryElement !== this.el) {\n            this.categoryOpen = false;\n        }\n    }\n\n    /**\n     * Open the menu if it is closed and closed the menu if it is already opened\n     * @param _event the keyboard event\n     * @private\n     */\n    private handleMenuKeyDown(_event: KeyboardEvent) {\n        if ((isSpaceKey(_event)) || isEnterKey(_event)) {\n            this.categoryOpen = !this.categoryOpen;\n        }\n    }\n\n    /**\n     * Handle key down on category items\n     * @param _event the keyboard event\n     * @private\n     */\n    private handleCategoryItemsKeyDown(_event: KeyboardEvent) {\n        if ((isSpaceKey(_event)) || isEnterKey(_event)) {\n            this.handleItemClick(_event);\n        }\n    }\n\n    /**\n     * Close the category\n     */\n    @Method()\n    async close() {\n        this.categoryOpen = false;\n    }\n\n    /**\n     * Opens the category\n     */\n    @Method()\n    async open() {\n        this.categoryOpen = true;\n    }\n\n    /**\n     * When the user clicks on the menu, we do not propagate the native event and we launch a custom event to manage\n     * the closing of the menu correctly\n     */\n    private onClick(evt: MouseEvent) {\n        evt.stopPropagation();\n        this.wcsCategoryOpened.emit({categoryElement: this.el})\n    }\n\n\n    /**\n     * Close the category and fire item click if we detect a mouse click on a slotted `a` element.\n     * @param evt\n     * @private\n     */\n    private handleItemClick(evt: UIEvent) {\n        if ((evt.target as HTMLElement).tagName === 'A') {\n            this.close();\n            this.wcsCategoryItemClicked.emit(evt);\n        }\n    }\n\n    render(): any {\n        return (\n            <Host onClick={evt => this.onClick(evt)}>\n                <div tabindex={screen.width < 576 ? \"-1\" : \"0\"}\n                     class=\"label-container\"\n                     data-open={this.categoryOpen}\n                     onKeyDown={evt => this.handleMenuKeyDown(evt)}\n                     onClick={_ => this.categoryOpen = !this.categoryOpen}><span class=\"label\">{this.label}</span></div>\n                <div class=\"item-container\"\n                     tabIndex={-1}\n                     data-open={this.categoryOpen}\n                     onKeyDown={evt => this.handleCategoryItemsKeyDown(evt)}\n                     onClick={(evt) => this.handleItemClick(evt)}>\n                    <slot/>\n                </div>\n            </Host>\n        )\n    }\n\n}\n"],"version":3}
+{"file":"wcs-com-nav-category.entry.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,2iFAA2iF;;MCoBxjF,cAAc;;;;;;wBAGkB,KAAK;;EAK9C,kBAAkB,CAAC,CAAa;IAC5B,IAAI,IAAI,CAAC,YAAY;MAAE,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;GACpD;EAGD,eAAe,CAAC,KAA6C;IACzD,IAAI,KAAK,CAAC,MAAM,CAAC,eAAe,KAAK,IAAI,CAAC,EAAE,EAAE;MAC1C,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;KAC7B;GACJ;;;;;;EAOO,iBAAiB,CAAC,MAAqB;IAC3C,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,UAAU,CAAC,MAAM,CAAC,EAAE;MAC5C,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;KAC1C;GACJ;;;;;;EAOO,0BAA0B,CAAC,MAAqB;IACpD,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,UAAU,CAAC,MAAM,CAAC,EAAE;MAC5C,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;KAChC;GACJ;;;;EAMD,MAAM,KAAK;IACP,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;GAC7B;;;;EAMD,MAAM,IAAI;IACN,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;GAC5B;;;;;EAMO,OAAO,CAAC,GAAe;IAC3B,GAAG,CAAC,eAAe,EAAE,CAAC;IACtB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAC,eAAe,EAAE,IAAI,CAAC,EAAE,EAAC,CAAC,CAAA;GAC1D;;;;;;EAQO,eAAe,CAAC,GAAY;IAChC,IAAK,GAAG,CAAC,MAAsB,CAAC,OAAO,KAAK,GAAG,EAAE;MAC7C,IAAI,CAAC,KAAK,EAAE,CAAC;MACb,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KACzC;GACJ;EAED,MAAM;IACF,QACI,EAAC,IAAI,IAAC,OAAO,EAAE,GAAG,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IACnC,WAAK,QAAQ,EAAE,MAAM,CAAC,KAAK,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,EACzC,KAAK,EAAC,iBAAiB,eACZ,IAAI,CAAC,YAAY,EAC5B,SAAS,EAAE,GAAG,IAAI,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,EAC7C,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,IAAE,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAAM,EACxG,WAAK,KAAK,EAAC,gBAAgB,EACtB,QAAQ,EAAE,CAAC,CAAC,eACD,IAAI,CAAC,YAAY,EAC5B,SAAS,EAAE,GAAG,IAAI,IAAI,CAAC,0BAA0B,CAAC,GAAG,CAAC,EACtD,OAAO,EAAE,CAAC,GAAG,KAAK,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAC5C,eAAO,CACL,CACH,EACV;GACJ;;;;;;;","names":[],"sources":["./src/components/com-nav-category/com-nav-category.scss?tag=wcs-com-nav-category&encapsulation=shadow","./src/components/com-nav-category/com-nav-category.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host{\n    display: block;\n    padding-bottom: var(--wcs-padding);\n    .label-container {\n        display: block;\n        padding-left: calc(9 * var(--wcs-base-margin));\n        color: var(--wcs-gray);\n    }\n    ::slotted(a):after {\n        font-family: icons;\n        padding-left: var(--wcs-base-margin);\n        font-size: 0.6rem;\n        content: \"\\f107\";\n        line-height: 1;\n        box-sizing: border-box;\n    }\n\n    ::slotted(a) {\n        display: block;\n        cursor: pointer;\n        text-decoration: none;\n        font-size: 16px;\n        color: var(--wcs-gray);\n        padding-left: calc(12 * var(--wcs-base-margin));\n        padding-top: calc(1.5 * var(--wcs-base-margin));\n        padding-bottom: calc(1.5 * var(--wcs-base-margin));\n    }\n\n    /**For mobile*/\n    ::slotted(a:focus-visible) {\n        @include focus-outline(var(--wcs-primary), 2px, 0.1rem);\n    }\n\n    @supports not selector(::slotted(a:focus-visible)) {\n        ::slotted(a:focus-within) {\n            @include focus-outline(var(--wcs-primary), 2px, 0.1rem);\n        }\n    }\n}\n\n@media screen and (min-width: 576px) {\n    :host {\n        padding-bottom: unset;\n\n        .item-container:not([data-open]) {\n            display: none;\n        }\n\n        .label:after {\n            font-family: icons;\n            padding-left: var(--wcs-base-margin);\n            font-size: 0.6rem;\n            content: \"\\f107\";\n            line-height: 1;\n            box-sizing: border-box;\n        }\n\n        .label-container {\n            cursor: pointer;\n            user-select: none;\n            display: flex;\n            align-items: center;\n            padding-left: unset;\n            color: var(--wcs-white);\n        }\n\n        .label-container:focus-visible   {\n            @include focus-outline(var(--wcs-white), 5px, 0.1rem);\n        }\n\n        @supports not selector(.label-container:focus-visible) {\n            .label-container:focus-within {\n                @include focus-outline(var(--wcs-white), 5px, 0.1rem);\n            }\n        }\n\n        .label-container[data-open]:after {\n            position: absolute;\n            left: calc(calc(calc(100% / 2) + calc(var(--wcs-com-content-max-width) / 8)) - calc(1.125rem / 2));\n            z-index: 2;\n            display: block;\n            width: 1.125rem;\n            height: 1.125rem;\n            content: \"\";\n            background-color: var(--wcs-primary);\n            transform: rotate(45deg);\n        }\n\n        .item-container[data-open] {\n            position: absolute;\n            left: calc(calc(100% / 2) + calc(var(--wcs-com-content-max-width) / 8));\n            top: 0;\n            right: 0;\n            padding: 50px 0 50px 50px;\n            background-blend-mode: multiply;\n            background-color: rgba(0, 0, 0, 0.15);\n            box-sizing: border-box;\n            height: calc(100%);\n            display: flex;\n            flex-direction: column;\n            align-items: start;\n\n            ::slotted(a:not(:first-child)) {\n                margin-top: 24px;\n            }\n            ::slotted(a) {\n                display: unset;\n                color: var(--wcs-white);\n                padding-left: unset;\n                padding-top: unset;\n                padding-bottom: unset;\n            }\n\n            ::slotted(a:focus-visible) {\n                @include focus-outline(var(--wcs-white), 2px, 0.1rem);\n            }\n\n            @supports not selector(::slotted(a:focus-visible)) {\n                ::slotted(a:focus-within) {\n                    @include focus-outline(var(--wcs-white), 2px, 0.1rem);\n                }\n            }\n        }\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen, Method,\n    Prop,\n    State\n} from '@stencil/core';\nimport { CategoryOpenedEventDetail } from '../com-nav/com-nav-interface';\nimport {isEnterKey, isSpaceKey} from \"../../utils/helpers\";\n\n@Component({\n    tag: 'wcs-com-nav-category',\n    styleUrl: 'com-nav-category.scss',\n    shadow: true,\n})\nexport class ComNavCategory implements ComponentInterface {\n    @Element() private el!: HTMLWcsComNavCategoryElement;\n    @Prop() label: string;\n    @State() private categoryOpen: boolean = false;\n    @Event() wcsCategoryOpened: EventEmitter<CategoryOpenedEventDetail>;\n    @Event() wcsCategoryItemClicked: EventEmitter<UIEvent>;\n\n    @Listen('click', {target: 'window'})\n    onWindowClickEvent(_: MouseEvent) {\n        if (this.categoryOpen) this.categoryOpen = false;\n    }\n\n    @Listen('wcsCategoryOpened', {target: 'window'})\n    onSubmenuOpened(event: CustomEvent<CategoryOpenedEventDetail>) {\n        if (event.detail.categoryElement !== this.el) {\n            this.categoryOpen = false;\n        }\n    }\n\n    /**\n     * Open the menu if it is closed and closed the menu if it is already opened\n     * @param _event the keyboard event\n     * @private\n     */\n    private handleMenuKeyDown(_event: KeyboardEvent) {\n        if ((isSpaceKey(_event)) || isEnterKey(_event)) {\n            this.categoryOpen = !this.categoryOpen;\n        }\n    }\n\n    /**\n     * Handle key down on category items\n     * @param _event the keyboard event\n     * @private\n     */\n    private handleCategoryItemsKeyDown(_event: KeyboardEvent) {\n        if ((isSpaceKey(_event)) || isEnterKey(_event)) {\n            this.handleItemClick(_event);\n        }\n    }\n\n    /**\n     * Close the category\n     */\n    @Method()\n    async close() {\n        this.categoryOpen = false;\n    }\n\n    /**\n     * Opens the category\n     */\n    @Method()\n    async open() {\n        this.categoryOpen = true;\n    }\n\n    /**\n     * When the user clicks on the menu, we do not propagate the native event and we launch a custom event to manage\n     * the closing of the menu correctly\n     */\n    private onClick(evt: MouseEvent) {\n        evt.stopPropagation();\n        this.wcsCategoryOpened.emit({categoryElement: this.el})\n    }\n\n\n    /**\n     * Close the category and fire item click if we detect a mouse click on a slotted `a` element.\n     * @param evt\n     * @private\n     */\n    private handleItemClick(evt: UIEvent) {\n        if ((evt.target as HTMLElement).tagName === 'A') {\n            this.close();\n            this.wcsCategoryItemClicked.emit(evt);\n        }\n    }\n\n    render(): any {\n        return (\n            <Host onClick={evt => this.onClick(evt)}>\n                <div tabindex={screen.width < 576 ? \"-1\" : \"0\"}\n                     class=\"label-container\"\n                     data-open={this.categoryOpen}\n                     onKeyDown={evt => this.handleMenuKeyDown(evt)}\n                     onClick={_ => this.categoryOpen = !this.categoryOpen}><span class=\"label\">{this.label}</span></div>\n                <div class=\"item-container\"\n                     tabIndex={-1}\n                     data-open={this.categoryOpen}\n                     onKeyDown={evt => this.handleCategoryItemsKeyDown(evt)}\n                     onClick={(evt) => this.handleItemClick(evt)}>\n                    <slot/>\n                </div>\n            </Host>\n        )\n    }\n\n}\n"],"version":3}

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-e9b73aad.js';
+import { b as isEscapeKey, i as isSpaceKey, a as isEnterKey } from './helpers-1f7170dd.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}}";