wcs-core 3.0.0 → 4.0.0

package/README.md

@@ -130,6 +130,13 @@ npm run test:watch
 npm test
 ```
 
+To launch a specific suite of tests you can simply launch
+```sh
+npm run test:e2e path_to_tests_file
+# Example: you must be at the root of the project
+npm run test:e2e src/components/tabs/tabs.e2e.ts
+```
+
 ### Doing a release
 
 Don't forget to update the changelog.

package/dist/cjs/{grid-pagination-ff65e0ff.js → grid-pagination-4b55c908.js}

@@ -92,11 +92,10 @@ const GridPagination = class {
   render() {
     return (index.h(index.Host, { slot: "grid-pagination" }, index.h("div", { class: "container" }, index.h("div", { class: "page-size" }, index.h("wcs-select", { placeholder: "El\u00E9ments par page", class: "available-page-sizes", value: this.pageSize, onWcsChange: this.onChangePagesize.bind(this) }, this.availablePageSizes.map((pageSize) => index.h("wcs-select-option", { value: pageSize }, pageSize))), index.h("span", null, "\u00A0\u00E9l\u00E9ments par page")), index.h("div", { class: "items-count" }, index.h("span", null, this.itemsCount, " \u00E9l\u00E9ments")), index.h("div", { class: "page-management" }, index.h("span", { class: "pagination-arrow", onClick: this.firstPage.bind(this) }, index.h(GridPaginationArrow, { active: this.canGoToPreviousPage(), order: "previous", double: true })), index.h("span", { class: "pagination-arrow", onClick: this.previousPage.bind(this) }, index.h(GridPaginationArrow, { active: this.canGoToPreviousPage(), order: "previous" })), index.h("span", null, this.currentPage + 1, " / ", this.pageCount), index.h("span", { class: "pagination-arrow", onClick: this.nextPage.bind(this) }, index.h(GridPaginationArrow, { active: this.canGoToNextPage(), order: "next" })), index.h("span", { class: "pagination-arrow", onClick: this.lastPage.bind(this) }, index.h(GridPaginationArrow, { active: this.canGoToNextPage(), order: "next", double: true }))))));
   }
-  get el() { return index.getElement(this); }
 };
 GridPagination.INDEX_FIRST_PAGE = 0;
 GridPagination.style = gridPaginationCss;
 
 exports.GridPagination = GridPagination;
 
-//# sourceMappingURL=grid-pagination-ff65e0ff.js.map
+//# sourceMappingURL=grid-pagination-4b55c908.js.map

package/dist/cjs/grid-pagination-4b55c908.js.map

@@ -0,0 +1 @@
+{"file":"grid-pagination-4b55c908.js","mappings":"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","names":["h","Host"],"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/cjs/{helpers-11518d4f.js → helpers-4a14051a.js}

@@ -75,6 +75,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';
 }
@@ -90,19 +93,56 @@ 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';
+}
 
 exports.clickInsideElement = clickInsideElement;
 exports.clickTargetIsElementOrChildren = clickTargetIsElementOrChildren;
 exports.debounceEvent = debounceEvent;
 exports.findItemLabel = findItemLabel;
+exports.generateUniqueId = generateUniqueId;
 exports.hasShadowDom = hasShadowDom;
 exports.inheritAttributes = inheritAttributes;
+exports.isDownArrowKey = isDownArrowKey;
 exports.isElement = isElement;
+exports.isEndKey = isEndKey;
 exports.isEnterKey = isEnterKey;
 exports.isEscapeKey = isEscapeKey;
+exports.isHomeKey = isHomeKey;
 exports.isKeydown = isKeydown;
 exports.isKeyup = isKeyup;
+exports.isLeftArrowKey = isLeftArrowKey;
+exports.isPageDownKey = isPageDownKey;
+exports.isPageUpKey = isPageUpKey;
+exports.isRightArrowKey = isRightArrowKey;
 exports.isSpaceKey = isSpaceKey;
+exports.isTabKey = isTabKey;
+exports.isUpArrowKey = isUpArrowKey;
 exports.raf = raf;
 
-//# sourceMappingURL=helpers-11518d4f.js.map
+//# sourceMappingURL=helpers-4a14051a.js.map

package/dist/cjs/helpers-4a14051a.js.map

@@ -0,0 +1 @@
+{"file":"helpers-4a14051a.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/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["wcs-editable-field.cjs",[[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.cjs",[[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.cjs",[[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.cjs",[[1,"wcs-grid-pagination",{"availablePageSizes":[16],"currentPage":[2,"current-page"],"pageSize":[2,"page-size"],"itemsCount":[2,"items-count"],"pageCount":[2,"page-count"]}]]],["wcs-modal.cjs",[[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.cjs",[[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.cjs",[[1,"wcs-galactic-menu",{"text":[1],"showPopoverMenu":[32]},[[8,"click","onWindowClickEvent"]]]]],["wcs-input.cjs",[[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.cjs",[[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.cjs",[[1,"wcs-accordion",{"hideActionText":[516,"hide-action-text"],"highlight":[516],"groupContentWithHeader":[516,"group-content-with-header"]},[[0,"wcsOpenChange","wcsOpenChangeHandler"]]]]],["wcs-accordion-content.cjs",[[1,"wcs-accordion-content"]]],["wcs-accordion-header.cjs",[[1,"wcs-accordion-header"]]],["wcs-accordion-panel.cjs",[[1,"wcs-accordion-panel",{"open":[1540],"hideActionText":[516,"hide-action-text"],"highlight":[516],"groupContentWithHeader":[516,"group-content-with-header"],"close":[64]}]]],["wcs-action-bar.cjs",[[1,"wcs-action-bar",{"gutter":[4],"hasTabs":[32]}]]],["wcs-app.cjs",[[1,"wcs-app"]]],["wcs-badge.cjs",[[1,"wcs-badge",{"shape":[1],"color":[1]}]]],["wcs-card.cjs",[[1,"wcs-card",{"mode":[1537]}]]],["wcs-card-body.cjs",[[1,"wcs-card-body"]]],["wcs-com-nav.cjs",[[1,"wcs-com-nav",{"appName":[1,"app-name"],"mobileMenuOpen":[32],"currentActiveSizing":[32]},[[0,"wcsClickOnFinalAction","onClickOnFinalAction"],[0,"wcsCategoryItemClicked","onClickOnFinalActionCat"]]]]],["wcs-com-nav-category.cjs",[[1,"wcs-com-nav-category",{"label":[1],"categoryOpen":[32],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsCategoryOpened","onSubmenuOpened"]]]]],["wcs-com-nav-submenu.cjs",[[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.cjs",[[1,"wcs-divider"]]],["wcs-dropdown-divider.cjs",[[1,"wcs-dropdown-divider"]]],["wcs-dropdown-header.cjs",[[1,"wcs-dropdown-header"]]],["wcs-dropdown-item.cjs",[[4,"wcs-dropdown-item",null,[[1,"mousedown","onMouseDown"],[0,"keydown","onKeyDown"]]]]],["wcs-field.cjs",[[1,"wcs-field"]]],["wcs-field-content.cjs",[[1,"wcs-field-content"]]],["wcs-field-label.cjs",[[1,"wcs-field-label"]]],["wcs-footer.cjs",[[1,"wcs-footer"]]],["wcs-galactic.cjs",[[1,"wcs-galactic",{"text":[1],"show":[32]}]]],["wcs-grid-column.cjs",[[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.cjs",[[1,"wcs-grid-custom-cell",{"columnId":[1,"column-id"],"rowId":[8,"row-id"]}]]],["wcs-header.cjs",[[1,"wcs-header"]]],["wcs-hint.cjs",[[1,"wcs-hint",{"small":[1540]}]]],["wcs-icon.cjs",[[0,"wcs-icon",{"icon":[1],"size":[1]}]]],["wcs-label.cjs",[[1,"wcs-label",{"required":[516]}]]],["wcs-list-item.cjs",[[1,"wcs-list-item",{"activated":[1028]}]]],["wcs-list-item-properties.cjs",[[1,"wcs-list-item-properties"]]],["wcs-list-item-property.cjs",[[1,"wcs-list-item-property"]]],["wcs-nav.cjs",[[1,"wcs-nav"]]],["wcs-nav-item.cjs",[[4,"wcs-nav-item",{"text":[513],"href":[513]},[[0,"keydown","onKeyDown"]]]]],["wcs-progress-radial.cjs",[[1,"wcs-progress-radial",{"size":[2],"showLabel":[4,"show-label"],"value":[2]}]]],["wcs-radio-group.cjs",[[1,"wcs-radio-group",{"value":[8],"name":[520],"mode":[513]},[[0,"wcsRadioClick","selectedOptionChanged"]]]]],["wcs-switch.cjs",[[1,"wcs-switch",{"name":[1],"checked":[516],"labelAlignment":[513,"label-alignment"],"disabled":[4]}]]],["wcs-tab.cjs",[[1,"wcs-tab",{"header":[513],"itemKey":[8,"item-key"]}]]],["wcs-tabs.cjs",[[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.cjs",[[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.cjs",[[1,"wcs-progress-bar",{"small":[4],"showLabel":[4,"show-label"],"value":[2]}]]],["wcs-radio.cjs",[[1,"wcs-radio",{"mode":[513],"value":[1544],"label":[1537],"checked":[1540],"disabled":[1028]},[[0,"keydown","onKeyDown"]]]]],["wcs-checkbox.cjs",[[1,"wcs-checkbox",{"name":[1],"indeterminate":[1540],"checked":[1540],"labelAlignment":[1537,"label-alignment"],"disabled":[4]}]]],["wcs-select_2.cjs",[[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.cjs",[[1,"wcs-error"],[1,"wcs-form-field",{"isError":[1540,"is-error"],"hasPrefix":[32],"hasSuffix":[32],"spiedElement":[32]}]]],["wcs-button.cjs",[[17,"wcs-button",{"type":[1025],"href":[1],"disabled":[516],"ripple":[4],"shape":[513],"mode":[513],"loading":[1028]},[[0,"click","onClick"]]]]],["wcs-mat-icon.cjs",[[1,"wcs-mat-icon",{"icon":[1],"size":[1],"family":[1]}]]],["wcs-spinner.cjs",[[1,"wcs-spinner",{"mode":[513]}]]]], options);
+  return index.bootstrapLazy([["wcs-editable-field.cjs",[[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.cjs",[[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.cjs",[[1,"wcs-counter",{"size":[513],"label":[1],"min":[1026],"max":[1026],"step":[1026],"value":[1026],"currentValue":[32],"displayedValue":[32]}]]],["wcs-grid.cjs",[[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.cjs",[[1,"wcs-grid-pagination",{"availablePageSizes":[16],"currentPage":[2,"current-page"],"pageSize":[2,"page-size"],"itemsCount":[2,"items-count"],"pageCount":[2,"page-count"]}]]],["wcs-modal.cjs",[[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.cjs",[[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.cjs",[[1,"wcs-galactic-menu",{"text":[1],"showPopoverMenu":[32]},[[8,"click","onWindowClickEvent"]]]]],["wcs-input.cjs",[[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.cjs",[[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.cjs",[[1,"wcs-accordion",{"hideActionText":[516,"hide-action-text"],"highlight":[516],"groupContentWithHeader":[516,"group-content-with-header"]},[[0,"wcsOpenChange","wcsOpenChangeHandler"]]]]],["wcs-accordion-content.cjs",[[1,"wcs-accordion-content"]]],["wcs-accordion-header.cjs",[[1,"wcs-accordion-header"]]],["wcs-accordion-panel.cjs",[[1,"wcs-accordion-panel",{"open":[1540],"hideActionText":[516,"hide-action-text"],"highlight":[516],"groupContentWithHeader":[516,"group-content-with-header"],"close":[64]}]]],["wcs-action-bar.cjs",[[1,"wcs-action-bar",{"gutter":[4],"hasTabs":[32]}]]],["wcs-app.cjs",[[1,"wcs-app"]]],["wcs-badge.cjs",[[1,"wcs-badge",{"shape":[1],"color":[1]}]]],["wcs-card.cjs",[[1,"wcs-card",{"mode":[1537]}]]],["wcs-card-body.cjs",[[1,"wcs-card-body"]]],["wcs-com-nav.cjs",[[1,"wcs-com-nav",{"appName":[1,"app-name"],"mobileMenuOpen":[32],"currentActiveSizing":[32]},[[0,"wcsClickOnFinalAction","onClickOnFinalAction"],[0,"wcsCategoryItemClicked","onClickOnFinalActionCat"]]]]],["wcs-com-nav-category.cjs",[[1,"wcs-com-nav-category",{"label":[1],"categoryOpen":[32],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsCategoryOpened","onSubmenuOpened"]]]]],["wcs-com-nav-submenu.cjs",[[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.cjs",[[1,"wcs-divider"]]],["wcs-dropdown-divider.cjs",[[1,"wcs-dropdown-divider"]]],["wcs-dropdown-header.cjs",[[1,"wcs-dropdown-header"]]],["wcs-dropdown-item.cjs",[[4,"wcs-dropdown-item",null,[[1,"mousedown","onMouseDown"],[0,"keydown","onKeyDown"]]]]],["wcs-field.cjs",[[1,"wcs-field"]]],["wcs-field-content.cjs",[[1,"wcs-field-content"]]],["wcs-field-label.cjs",[[1,"wcs-field-label"]]],["wcs-footer.cjs",[[1,"wcs-footer"]]],["wcs-galactic.cjs",[[1,"wcs-galactic",{"text":[1],"show":[32]}]]],["wcs-grid-column.cjs",[[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.cjs",[[1,"wcs-grid-custom-cell",{"columnId":[1,"column-id"],"rowId":[8,"row-id"]}]]],["wcs-header.cjs",[[1,"wcs-header"]]],["wcs-hint.cjs",[[1,"wcs-hint",{"small":[1540]}]]],["wcs-icon.cjs",[[0,"wcs-icon",{"icon":[1],"size":[1]}]]],["wcs-label.cjs",[[1,"wcs-label",{"required":[516]}]]],["wcs-list-item.cjs",[[1,"wcs-list-item",{"activated":[1028]}]]],["wcs-list-item-properties.cjs",[[1,"wcs-list-item-properties"]]],["wcs-list-item-property.cjs",[[1,"wcs-list-item-property"]]],["wcs-native-select.cjs",[[1,"wcs-native-select",{"size":[513],"expanded":[32],"disabled":[32]}]]],["wcs-nav.cjs",[[1,"wcs-nav"]]],["wcs-nav-item.cjs",[[4,"wcs-nav-item",{"text":[513],"href":[513]},[[0,"keydown","onKeyDown"]]]]],["wcs-progress-radial.cjs",[[1,"wcs-progress-radial",{"size":[2],"showLabel":[4,"show-label"],"value":[2]}]]],["wcs-radio-group.cjs",[[1,"wcs-radio-group",{"value":[8],"name":[520],"mode":[513]},[[0,"wcsRadioClick","selectedOptionChanged"]]]]],["wcs-switch.cjs",[[1,"wcs-switch",{"name":[1],"checked":[516],"labelAlignment":[513,"label-alignment"],"disabled":[4]}]]],["wcs-tab.cjs",[[1,"wcs-tab",{"header":[513],"itemKey":[8,"item-key"]}]]],["wcs-tabs.cjs",[[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.cjs",[[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.cjs",[[1,"wcs-progress-bar",{"small":[4],"showLabel":[4,"show-label"],"value":[2]}]]],["wcs-radio.cjs",[[1,"wcs-radio",{"mode":[513],"value":[1544],"label":[1537],"checked":[1540],"disabled":[1028]},[[0,"keydown","onKeyDown"]]]]],["wcs-select_2.cjs",[[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.cjs",[[1,"wcs-error"],[1,"wcs-form-field",{"isError":[1540,"is-error"],"hasPrefix":[32],"hasSuffix":[32],"spiedElement":[32]}]]],["wcs-checkbox.cjs",[[1,"wcs-checkbox",{"name":[1],"indeterminate":[1540],"checked":[1540],"labelAlignment":[1537,"label-alignment"],"disabled":[4]}]]],["wcs-button.cjs",[[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.cjs",[[1,"wcs-mat-icon",{"icon":[1],"size":[1],"family":[1]}]]],["wcs-spinner.cjs",[[1,"wcs-spinner",{"mode":[513]}]]]], options);
   });
 };
 

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

@@ -1 +1 @@
-{"file":"wcs-action-bar.entry.cjs.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,QACIA,QAACC,UAAI,QACDD,iBAAK,KAAK,EAAC,eAAe,mBAAgB,IAAI,CAAC,OAAO,IAClDA,oBACIA,qBAAa,CACZ,EACLA,iBAAK,KAAK,EAAC,SAAS,IAChBA,kBAAM,IAAI,EAAC,SAAS,GAAQ,CAC1B,CACJ,EACNA,iBAAK,KAAK,EAAC,gBAAgB,IACvBA,kBAAM,IAAI,EAAC,MAAM,GAAQ,CACvB,CACH,EACT;GACL;;;;;;;","names":["h","Host"],"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.cjs.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,QACIA,QAACC,UAAI,QACDD,iBAAK,KAAK,EAAC,eAAe,mBAAgB,IAAI,CAAC,OAAO,IAClDA,oBACIA,qBAAa,CACZ,EACLA,iBAAK,KAAK,EAAC,SAAS,IAChBA,kBAAM,IAAI,EAAC,SAAS,GAAQ,CAC1B,CACJ,EACNA,iBAAK,KAAK,EAAC,gBAAgB,IACvBA,kBAAM,IAAI,EAAC,MAAM,GAAQ,CACvB,CACH,EACT;GACL;;;;;;;","names":["h","Host"],"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/cjs/wcs-app.cjs.entry.js

@@ -17,7 +17,6 @@ const App = class {
       index.h("slot", { name: "content" })
     ];
   }
-  get el() { return index.getElement(this); }
 };
 App.style = appCss;
 

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

@@ -1 +1 @@
-{"file":"wcs-app.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,MAAM,GAAG,+fAA+f;;MCQjgB,GAAG;;;;EAGZ,MAAM;IACF,OAAO;MACHA,kBAAM,IAAI,EAAC,QAAQ,GAAE;MACrBA,kBAAM,IAAI,EAAC,SAAS,GAAE;MACtBA,kBAAM,IAAI,EAAC,SAAS,GAAE;KACzB,CAAC;GACL;;;;;;;","names":["h"],"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.cjs.js","mappings":";;;;;;AAAA,MAAM,MAAM,GAAG,+fAA+f;;MCQjgB,GAAG;;;;EAEZ,MAAM;IACF,OAAO;MACHA,kBAAM,IAAI,EAAC,QAAQ,GAAE;MACrBA,kBAAM,IAAI,EAAC,SAAS,GAAE;MACtBA,kBAAM,IAAI,EAAC,SAAS,GAAE;KACzB,CAAC;GACL;;;;;;","names":["h"],"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/cjs/wcs-button.cjs.entry.js

@@ -3,18 +3,26 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ca67a6dc.js');
-const helpers = require('./helpers-11518d4f.js');
+const helpers = require('./helpers-4a14051a.js');
 const component = require('./component-2a26e37d.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) {
     index.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;
@@ -39,6 +47,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 component.MDCRipple(this.el.shadowRoot.querySelector('.wcs-inner-button'));
   }
@@ -62,7 +76,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 (index.h(TagType, Object.assign({}, attrs, { class: "wcs-inner-button", disabled: this.disabled || this.loading }), this.loading && index.h("wcs-spinner", null), index.h("slot", null)));
   }

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

@@ -1 +1 @@
-{"file":"wcs-button.entry.cjs.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,IAAIA,oBAAY,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,IAAIC,mBAAS,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,QACIC,QAAC,OAAO,oBACA,KAAK,IACT,KAAK,EAAC,kBAAkB,EACxB,QAAQ,EAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,KAGrC,IAAI,CAAC,OAAO,IAAIA,4BAA2B,EAE/CA,qBAAO,CACD,EACZ;GACL;;;;;;;;;;;","names":["hasShadowDom","MDCRipple","h"],"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.cjs.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,IAAIA,oBAAY,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,IAAIC,mBAAS,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,QACIC,QAAC,OAAO,oBACA,KAAK,IACT,KAAK,EAAC,kBAAkB,EACxB,QAAQ,EAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,KAGrC,IAAI,CAAC,OAAO,IAAIA,4BAA2B,EAE/CA,qBAAO,CACD,EACZ;GACL;;;;;;;;;;;","names":["hasShadowDom","MDCRipple","h"],"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/cjs/wcs-checkbox.cjs.entry.js

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

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

@@ -1 +1 @@
-{"file":"wcs-checkbox.entry.cjs.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,QACIA,QAACC,UAAI,QACDD,mBAAO,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,eAAe,mBAAgB,IAAI,CAAC,QAAQ,IACzEA,mBAAO,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,EACRA,kBAAM,KAAK,EAAC,eAAe,GAAQ,EACnCA,kBAAM,KAAK,EAAC,MAAM,IACdA,qBAAO,CACJ,CACH,CACL,EACT;GACL;;;AAGL,IAAI,WAAW,GAAG,CAAC,CAAC;;;;;","names":["h","Host"],"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.cjs.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,QACIA,QAACC,UAAI,QACDD,mBAAO,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,eAAe,mBAAgB,IAAI,CAAC,QAAQ,IACzEA,mBAAO,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,EACRA,kBAAM,KAAK,EAAC,eAAe,GAAQ,EACnCA,kBAAM,KAAK,EAAC,MAAM,IACdA,qBAAO,CACJ,CACH,CACL,EACT;GACL;;AAGL,IAAI,WAAW,GAAG,CAAC,CAAC;;;;;","names":["h","Host"],"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/cjs/wcs-com-nav-category.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ca67a6dc.js');
-const helpers = require('./helpers-11518d4f.js');
+const helpers = require('./helpers-4a14051a.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/cjs/wcs-com-nav-category.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-com-nav-category.entry.cjs.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,CAACA,kBAAU,CAAC,MAAM,CAAC,KAAKC,kBAAU,CAAC,MAAM,CAAC,EAAE;MAC5C,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;KAC1C;GACJ;;;;;;EAOO,0BAA0B,CAAC,MAAqB;IACpD,IAAI,CAACD,kBAAU,CAAC,MAAM,CAAC,KAAKC,kBAAU,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,QACIC,QAACC,UAAI,IAAC,OAAO,EAAE,GAAG,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IACnCD,iBAAK,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,IAAEA,kBAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAAM,EACxGA,iBAAK,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,IAC5CA,qBAAO,CACL,CACH,EACV;GACJ;;;;;;;","names":["isSpaceKey","isEnterKey","h","Host"],"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.cjs.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,CAACA,kBAAU,CAAC,MAAM,CAAC,KAAKC,kBAAU,CAAC,MAAM,CAAC,EAAE;MAC5C,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;KAC1C;GACJ;;;;;;EAOO,0BAA0B,CAAC,MAAqB;IACpD,IAAI,CAACD,kBAAU,CAAC,MAAM,CAAC,KAAKC,kBAAU,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,QACIC,QAACC,UAAI,IAAC,OAAO,EAAE,GAAG,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IACnCD,iBAAK,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,IAAEA,kBAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAAM,EACxGA,iBAAK,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,IAC5CA,qBAAO,CACL,CACH,EACV;GACJ;;;;;;;","names":["isSpaceKey","isEnterKey","h","Host"],"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/cjs/wcs-com-nav-submenu.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ca67a6dc.js');
-const helpers = require('./helpers-11518d4f.js');
+const helpers = require('./helpers-4a14051a.js');
 const comNavUtils = require('./com-nav-utils-b8f79c49.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}}";