wcs-core 3.0.0 → 4.0.0

package/dist/wcs/p-4b2d8a6d.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["errorCss","Label","render","h","Host","slot","formFieldCss","FormField","componentWillLoad","this","hasSuffix","el","querySelector","hasPrefix","componentDidLoad","initSpiedElement","addRequiredMarkerToLabel","updateErrorStateOnInput","isError","isErrorChange","newValue","spiedElementIsOfType","spiedElement","setAttribute","types","type","_a","tagName","toUpperCase","label","observer","MutationObserver","mutations","requiredAttMutation","filter","m","attributeName","updateLabelRequiredFlag","hasAttribute","observe","attributes","isRequired","SUPPORTED_COMPONENTS","shadowRoot","assignedElements","n","map","x","indexOf","nodeName","_b","console","warn","toString","removeAttribute","disconnectedCallback","disconnect","classes","class","name","onSlotchange","onFormInputSlotChange"],"sources":["./src/components/error/error.scss?tag=wcs-error&encapsulation=shadow","./src/components/error/error.tsx","./src/components/form-field/form-field.scss?tag=wcs-form-field&encapsulation=shadow","./src/components/form-field/form-field.tsx"],"sourcesContent":[":host {\n    margin-top: 0.25rem;\n    color: var(--wcs-red);\n}","import { Component, ComponentInterface, h, Host } from '@stencil/core';\n\n@Component({\n    tag: 'wcs-error',\n    styleUrl: 'error.scss',\n    shadow: true,\n})\nexport class Label implements ComponentInterface {\n    render() {\n        return (\n            <Host slot=\"error\">\n                <slot />\n            </Host>\n        );\n    }\n}\n",":host {\n    --wcs-form-field-border-radius-left: var(--wcs-border-radius);\n    --wcs-form-field-border-radius-right: var(--wcs-border-radius);\n\n    display: flex;\n    flex-direction: column;\n}\n\n.input-container {\n    display: flex;\n}\n\n::slotted(wcs-radio-group) {\n    margin-left: var(--wcs-base-margin);\n}\n\n::slotted(wcs-radio-group[mode=option]) {\n    margin-left: 0;\n}\n\n::slotted(wcs-select:not([slot=prefix])) {\n    width: 100%;\n}\n\n// Label style\n::slotted(label) {\n    font-weight: 500;\n    margin-bottom: 8px;\n}\n\n// Make input square on left side if there is a prefix\n:host(.has-prefix) {\n    --wcs-input-border-radius-left: 0;\n}\n\n// Make input square on right side if there is a suffix\n:host(.has-suffix) {\n    --wcs-input-border-radius-right: 0;\n}\n\n// Prefixed select\n::slotted([slot=prefix]) {\n    --wcs-select-border-radius: var(--wcs-border-radius) 0 0 var(--wcs-border-radius);\n    --wcs-select-background-color: var(--wcs-gray-light);\n    --wcs-select-value-color: var(--wcs-white);\n    --wcs-select-placeholder-color: var(--wcs-white);\n    --wcs-select-border-color: var(--wcs-gray-light);\n}\n\n::slotted([slot=suffix]) {\n    // Make button square on left side\n    --wcs-button-border-radius: 0 var(--wcs-border-radius) var(--wcs-border-radius) 0;\n\n    // Make select square on left side\n    --wcs-select-border-radius: 0 var(--wcs-border-radius) var(--wcs-border-radius) 0 ;\n}\n","import { Component, ComponentInterface, Element, h, Host, Prop, State, Watch } from '@stencil/core';\n\n/**\n * TODO:\n * - [ ] Suffix button style\n */\n@Component({\n    tag: 'wcs-form-field',\n    styleUrl: 'form-field.scss',\n    shadow: true,\n})\nexport class FormField implements ComponentInterface {\n    @Element() private el!: HTMLWcsFormFieldElement;\n\n    /**\n     * Specifies whether the form field is in an error state. Displays the field border in red and the message contained in the wcs-error component\n     */\n    @Prop({mutable: true, reflect: true}) isError = false;\n\n    @State() private hasPrefix = false;\n    @State() private hasSuffix = false;\n    @State() private spiedElement: Element;\n\n    private observer: MutationObserver;\n\n    componentWillLoad() {\n        this.hasSuffix = this.el.querySelector('wcs-button') !== null;\n        this.hasPrefix = this.el.querySelector('wcs-select') !== null;\n    }\n\n    componentDidLoad() {\n        this.initSpiedElement();\n        this.addRequiredMarkerToLabel();\n        this.updateErrorStateOnInput(this.isError);\n    }\n\n\n    @Watch('isError')\n    // @ts-ignore\n    private isErrorChange(newValue: boolean) {\n        this.updateErrorStateOnInput(newValue);\n    }\n\n    private updateErrorStateOnInput(newValue: boolean) {\n        if (this.spiedElementIsOfType('wcs-input', 'wcs-textarea')) {\n            if (newValue) {\n                this.spiedElement.setAttribute('state', 'error');\n            } else {\n                this.spiedElement.setAttribute('state', 'initial');\n            }\n        }\n    }\n\n    /**\n     * This function return true if the form field contains an element with tagName matches a value of the types param\n     * @param types\n     * @private\n     */\n    private spiedElementIsOfType(...types: string[]): boolean {\n        for (const type of types) {\n            if (this.spiedElement?.tagName === type.toUpperCase()) return true;\n        }\n        return false\n    }\n\n\n    private addRequiredMarkerToLabel() {\n        // TODO: deprecate this in favor of the 'required' component attribute\n        const label = this.el.querySelector('wcs-label');\n        this.observer = new MutationObserver(mutations => {\n            const requiredAttMutation = mutations.filter(m => m.attributeName === 'required')[0];\n            if (requiredAttMutation) {\n                this.updateLabelRequiredFlag(this.spiedElement?.hasAttribute('required'), label);\n            }\n        });\n        if (this.spiedElement) {\n            this.observer.observe(this.spiedElement, {attributes: true});\n        }\n\n        const isRequired = this.spiedElement?.hasAttribute('required');\n        this.updateLabelRequiredFlag(isRequired, label);\n    }\n\n\n    private initSpiedElement() {\n        const SUPPORTED_COMPONENTS = ['wcs-input', 'wcs-select', 'wcs-textarea', 'wcs-radio-group', 'wcs-switch', 'wcs-checkbox', 'wcs-native-select'];\n\n        this.spiedElement = (this.el.shadowRoot.querySelector('slot:not([name])') as HTMLSlotElement)\n            ?.assignedElements()\n            .filter(n => [...SUPPORTED_COMPONENTS, 'SLOT'].map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0];\n\n        // If the component is used in another web component\n        if (this.spiedElement?.tagName === 'SLOT') {\n            this.spiedElement = ((this.spiedElement as HTMLSlotElement)\n                .assignedElements()\n                .filter(n => SUPPORTED_COMPONENTS.map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0]) as HTMLElement;\n        }\n\n        if (!this.spiedElement) {\n            // tslint:disable-next-line:no-console\n            console.warn('Form-field component support only ' + SUPPORTED_COMPONENTS.toString() + '. Some features may not work with the provided component.');\n            return;\n        }\n    }\n\n    private updateLabelRequiredFlag(isRequired: boolean, label: Element) {\n        if (isRequired && label) {\n            label.setAttribute('required', 'true');\n        } else if (!isRequired && label) {\n            label.removeAttribute('required');\n        }\n    }\n\n    disconnectedCallback() {\n        this.observer?.disconnect();\n    }\n\n    render() {\n        let classes = '';\n        const isError = this.isError;\n\n        if (this.hasSuffix) {\n            classes += ' has-suffix';\n        }\n        if (this.hasPrefix) {\n            classes += ' has-prefix';\n        }\n        return (\n            <Host class={classes}>\n                <slot name=\"label\"/>\n                <div class=\"input-container\">\n                    <slot name=\"prefix\"/>\n                    <slot onSlotchange={() => this.onFormInputSlotChange()}/>\n                    <slot name=\"suffix\"/>\n                </div>\n                {\n                    isError ? (<slot name=\"error\"/>) : ''\n                }\n                <slot name=\"messages\"/>\n            </Host>\n        );\n    }\n\n    private onFormInputSlotChange() {\n        this.initSpiedElement();\n        this.addRequiredMarkerToLabel();\n        this.updateErrorStateOnInput(this.isError);\n    }\n}\n"],"mappings":"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"}

package/dist/wcs/{p-c7b42bae.entry.js → p-4b4d53e2.entry.js}

@@ -1,2 +1,2 @@
-import{r as o,c as s,h as r,H as t}from"./p-a2df3a49.js";import{i,a as c}from"./p-dc57a5f7.js";const n="wcs-dropdown-item{display:block;padding:0 var(--wcs-padding);font-weight:500;cursor:pointer;height:42px;line-height:42px}wcs-dropdown-item:hover,wcs-dropdown-item:focus{color:var(--wcs-primary);background-color:var(--wcs-light)}";const a=class{constructor(r){o(this,r);this.wcsDropdownItemClick=s(this,"wcsDropdownItemClick",7)}onMouseDown(o){this.wcsDropdownItemClick.emit()}onKeyDown(o){if(i(o)||c(o)){this.wcsDropdownItemClick.emit()}}render(){return r(t,{slot:"item",tabindex:"0"},r("slot",null))}};a.style=n;export{a as wcs_dropdown_item};
-//# sourceMappingURL=p-c7b42bae.entry.js.map
+import{r as o,c as s,h as r,H as t}from"./p-a2df3a49.js";import{i,a as c}from"./p-12ac2547.js";const n="wcs-dropdown-item{display:block;padding:0 var(--wcs-padding);font-weight:500;cursor:pointer;height:42px;line-height:42px}wcs-dropdown-item:hover,wcs-dropdown-item:focus{color:var(--wcs-primary);background-color:var(--wcs-light)}";const a=class{constructor(r){o(this,r);this.wcsDropdownItemClick=s(this,"wcsDropdownItemClick",7)}onMouseDown(o){this.wcsDropdownItemClick.emit()}onKeyDown(o){if(i(o)||c(o)){this.wcsDropdownItemClick.emit()}}render(){return r(t,{slot:"item",tabindex:"0"},r("slot",null))}};a.style=n;export{a as wcs_dropdown_item};
+//# sourceMappingURL=p-4b4d53e2.entry.js.map

package/dist/wcs/p-50dce764.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["hintCss","Label","render","h","Host","slot"],"sources":["./src/components/hint/hint.scss?tag=wcs-hint&encapsulation=shadow","./src/components/hint/hint.tsx"],"sourcesContent":[":host {\n    margin-top: 0.25rem;\n}\n\n:host([small]) {\n    font-size: 0.75rem;\n    font-weight: 400;\n    color: var(--wcs-text-medium)\n}","import { Component, ComponentInterface, h, Host, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'wcs-hint',\n    styleUrl: 'hint.scss',\n    shadow: true,\n})\nexport class Label implements ComponentInterface {\n    @Prop({ reflect: true, mutable: true })\n    small = false;\n\n    render() {\n        return (\n            <Host slot=\"messages\">\n                <slot />\n            </Host>\n        );\n    }\n}"],"mappings":"kDAAA,MAAMA,EAAU,0G,MCOHC,EAAK,M,oCAEN,K,CAERC,SACI,OACIC,EAACC,EAAI,CAACC,KAAK,YACPF,EAAA,a"}
+{"version":3,"names":["hintCss","Hint","render","h","Host","slot"],"sources":["./src/components/hint/hint.scss?tag=wcs-hint&encapsulation=shadow","./src/components/hint/hint.tsx"],"sourcesContent":[":host {\n    margin-top: 0.25rem;\n}\n\n:host([small]) {\n    font-size: 0.75rem;\n    font-weight: 400;\n    color: var(--wcs-text-medium)\n}","import { Component, ComponentInterface, h, Host, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'wcs-hint',\n    styleUrl: 'hint.scss',\n    shadow: true,\n})\nexport class Hint implements ComponentInterface {\n    /**\n     * Whether the component should display the small version of the hint\n     */\n    @Prop({ reflect: true, mutable: true })\n    small: boolean = false;\n\n    render() {\n        return (\n            <Host slot=\"messages\">\n                <slot />\n            </Host>\n        );\n    }\n}\n"],"mappings":"kDAAA,MAAMA,EAAU,0G,MCOHC,EAAI,M,oCAKI,K,CAEjBC,SACI,OACIC,EAACC,EAAI,CAACC,KAAK,YACPF,EAAA,a"}

package/dist/wcs/{p-8762cf93.entry.js → p-554ca93c.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as t,g as i}from"./p-a2df3a49.js";import{a as o}from"./p-dc57a5f7.js";const a="wcs-nav-item{display:block;cursor:pointer}wcs-nav-item a{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;text-align:center;background-color:transparent;border:none;text-decoration:none;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;height:5rem;font-size:0.75rem;color:var(--wcs-contrast)}wcs-nav-item a:not(.active){border-bottom:1px solid rgba(255, 255, 255, 0.2)}@media (max-width: 1199px){wcs-nav-item a{display:flex;flex:1;height:3.25rem;font-size:0.625rem;color:var(--wcs-text-medium)}}wcs-nav-item a:focus{outline:none}@media (max-width: 1199px){wcs-nav-item:focus-within{outline:2px dashed var(--wcs-primary);outline-offset:1px;border-radius:0.1rem}}@media (min-width: 1200px){wcs-nav-item:focus-within{outline:2px dashed var(--wcs-white);outline-offset:-2px;border-radius:0.1rem}}wcs-nav-item i{margin-bottom:0.5rem;display:inline-block}@media (max-width: 1199px){wcs-nav-item i{margin-bottom:0.25rem;display:inline-block}}@media (min-width: 1200px){wcs-nav-item[slot=bottom] a{border-top:1px solid rgba(255, 255, 255, 0.2);border-bottom:none}}.wcs-nav-item-text{font-weight:500}.active,wcs-nav-item:hover,wcs-nav-item:focus-within{background-blend-mode:multiply;background-color:rgba(0, 0, 0, 0.15);}@media (max-width: 1199px){.active,wcs-nav-item:hover,wcs-nav-item:focus-within{background-color:unset}.active a,wcs-nav-item:hover a,wcs-nav-item:focus-within a{color:var(--wcs-primary)}}";const n=class{constructor(t){e(this,t);this.text="";this.href=undefined}onKeyDown(e){if(o(e)){this.el.click()}}render(){return t("a",{href:this.href,class:"wcs-nav-item-container"},t("slot",null),t("span",{class:"wcs-nav-item-text"},this.text))}get el(){return i(this)}};n.style=a;export{n as wcs_nav_item};
-//# sourceMappingURL=p-8762cf93.entry.js.map
+import{r as e,h as t,g as i}from"./p-a2df3a49.js";import{a as o}from"./p-12ac2547.js";const a="wcs-nav-item{display:block;cursor:pointer}wcs-nav-item a{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;text-align:center;background-color:transparent;border:none;text-decoration:none;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;height:5rem;font-size:0.75rem;color:var(--wcs-contrast)}wcs-nav-item a:not(.active){border-bottom:1px solid rgba(255, 255, 255, 0.2)}@media (max-width: 1199px){wcs-nav-item a{display:flex;flex:1;height:3.25rem;font-size:0.625rem;color:var(--wcs-text-medium)}}wcs-nav-item a:focus{outline:none}@media (max-width: 1199px){wcs-nav-item:focus-within{outline:2px dashed var(--wcs-primary);outline-offset:1px;border-radius:0.1rem}}@media (min-width: 1200px){wcs-nav-item:focus-within{outline:2px dashed var(--wcs-white);outline-offset:-2px;border-radius:0.1rem}}wcs-nav-item i{margin-bottom:0.5rem;display:inline-block}@media (max-width: 1199px){wcs-nav-item i{margin-bottom:0.25rem;display:inline-block}}@media (min-width: 1200px){wcs-nav-item[slot=bottom] a{border-top:1px solid rgba(255, 255, 255, 0.2);border-bottom:none}}.wcs-nav-item-text{font-weight:500}.active,wcs-nav-item:hover,wcs-nav-item:focus-within{background-blend-mode:multiply;background-color:rgba(0, 0, 0, 0.15);}@media (max-width: 1199px){.active,wcs-nav-item:hover,wcs-nav-item:focus-within{background-color:unset}.active a,wcs-nav-item:hover a,wcs-nav-item:focus-within a{color:var(--wcs-primary)}}";const n=class{constructor(t){e(this,t);this.text="";this.href=undefined}onKeyDown(e){if(o(e)){this.el.click()}}render(){return t("a",{href:this.href,class:"wcs-nav-item-container"},t("slot",null),t("span",{class:"wcs-nav-item-text"},this.text))}get el(){return i(this)}};n.style=a;export{n as wcs_nav_item};
+//# sourceMappingURL=p-554ca93c.entry.js.map

package/dist/wcs/p-627bbb6a.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["GridSortArrow","state","h","style","marginLeft","xmlns","width","height","viewBox","type","fill","class","d","gridColumnCss","GridColumn","parseMyObjectProp","newValue","this","wcsHiddenChange","emit","sortOrderChange","_","emitSortConfig","sort","wcsSortChange","column","el","order","sortOrder","sortFn","render","Host","onClick","onSortClick","bind","slot","name"],"sources":["./src/components/grid-column/grid-sort-arrow.tsx","./src/components/grid-column/grid-column.scss?tag=wcs-grid-column&encapsulation=shadow","./src/components/grid-column/grid-column.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { WcsSortOrder } from '../grid/grid-interface';\n\ninterface GridSortArrowProps {\n  state: WcsSortOrder;\n}\n\nexport const GridSortArrow: FunctionalComponent<GridSortArrowProps> = ({ state }) => (\n    <svg style={{ marginLeft: 'auto' }} 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            .asc {\n                transform: scaleY(1) translateY(-6px);\n            }\n            .desc {\n                transform: scaleY(-1) translateY(-6px);\n            }\n            .active {\n                fill: var(--wcs-primary);\n            }\n\n        `}</style>\n        <g fill=\"none\" class='asc arrow-group'>\n            <path class={(state === 'asc' ? '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        <g fill=\"none\" class='desc arrow-group'>\n            <path class={(state === 'desc' ? '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    </svg>\n);\n",":host {\n    --wcs-grid-column-border-left: solid 1px var(--wcs-text-light);\n\n    display: contents;\n\n    th {\n        color: var(--wcs-gray-dark);\n        background-color: var(--wcs-light);\n        border-left: var(--wcs-grid-column-border-left);\n        padding: calc(var(--wcs-padding) / 2) var(--wcs-padding);\n        text-align: left;\n\n        .grid-column-th-content {\n            display: inline-flex;\n            flex-direction: row;\n\n            span {\n                user-select: none;\n            }\n        }\n    }\n\n    .pointer {\n        cursor: pointer;\n    }\n}\n\n:host([sort-order=\"asc\"]) {\n    img {\n        transform: scaleY(1);\n    }\n}\n\n:host([sort-order=\"desc\"]) {\n    img {\n        transform: scaleY(-1);\n    }\n}\n\n:host([sort-order=\"none\"]) {\n    img {\n        display: none;\n    }\n\n    th:hover {\n        img {\n            display: inline-block;\n        }\n    }\n}\n\n:host([hidden]) {\n    display: none !important;\n}\n","import { Component, ComponentInterface, Element, Event, EventEmitter, h, Host, Prop, Watch } from '@stencil/core';\nimport { WcsCellFormatter, WcsGridColumnSortChangeEventDetails, WcsSortFn, WcsSortOrder } from '../grid/grid-interface';\nimport { GridSortArrow } from './grid-sort-arrow';\n\n@Component({\n    tag: 'wcs-grid-column',\n    styleUrl: 'grid-column.scss',\n    shadow: true\n})\nexport class GridColumn implements ComponentInterface {\n    @Element() el: HTMLWcsGridColumnElement;\n    @Prop() path: string;\n    @Prop() name: string;\n    @Prop() sort: boolean = false;\n    @Prop() sortFn: WcsSortFn;\n    @Prop() formatter: WcsCellFormatter;\n    @Prop({mutable: true}) sortOrder: WcsSortOrder = 'none';\n    /**\n     * Set the column <th> element width\n     */\n    @Prop() width: string;\n    @Prop() customCells: boolean = false;\n    @Prop() hidden: boolean = false;\n    @Event() wcsSortChange!: EventEmitter<WcsGridColumnSortChangeEventDetails>;\n    @Event() wcsHiddenChange!: EventEmitter<boolean>;\n\n    @Watch('hidden')\n    parseMyObjectProp(newValue: boolean) {\n        this.wcsHiddenChange.emit(newValue);\n    }\n\n    @Watch('sortOrder')\n    sortOrderChange(_: WcsSortOrder) {\n        this.emitSortConfig();\n    }\n\n    emitSortConfig() {\n        if (!this.sort) return;\n        this.wcsSortChange.emit({\n            column: this.el,\n            order: this.sortOrder,\n            sortFn: this.sortFn\n        });\n    }\n\n    render(): any {\n        return (<Host onClick={this.onSortClick.bind(this)} slot=\"grid-column\">\n            <th style={{width: this.width}} class={this.sort ? 'pointer' : ''}>\n                <div class=\"grid-column-th-content\">\n                    <span>{this.name}</span>\n                    {\n                        this.sort ? <GridSortArrow state={this.sortOrder}/> : ''\n                    }\n                </div>\n            </th>\n        </Host>)\n    }\n\n    private onSortClick() {\n        // @Watch on sortOrder property will trigger wcsSortChange event\n        this.sortOrder = this.sortOrder === 'none' || this.sortOrder === 'desc' ? 'asc' : 'desc';\n    }\n}\n"],"mappings":"gEAOO,MAAMA,EAAyD,EAAGC,WACrEC,EAAA,OAAKC,MAAO,CAAEC,WAAY,QAAUC,MAAM,6BAA6BC,MAAM,KAAKC,OAAO,KAAKC,QAAQ,aAClGN,EAAA,SAAOO,KAAK,YAAY,ijBAoBxBP,EAAA,KAAGQ,KAAK,OAAOC,MAAM,mBACjBT,EAAA,QAAMS,OAAQV,IAAU,MAAQ,SAAW,IAAM,SAAUW,EAAE,mDAC7DV,EAAA,QAAMU,EAAE,gBAAgBF,KAAK,UAEjCR,EAAA,KAAGQ,KAAK,OAAOC,MAAM,oBACjBT,EAAA,QAAMS,OAAQV,IAAU,OAAS,SAAW,IAAM,SAAUW,EAAE,mDAC9DV,EAAA,QAAMU,EAAE,gBAAgBF,KAAK,WCnCzC,MAAMG,EAAgB,iqB,MCSTC,EAAU,M,yKAIK,M,8DAGyB,O,sCAKlB,M,YACL,K,CAK1BC,kBAAkBC,GACdC,KAAKC,gBAAgBC,KAAKH,E,CAI9BI,gBAAgBC,GACZJ,KAAKK,gB,CAGTA,iBACI,IAAKL,KAAKM,KAAM,OAChBN,KAAKO,cAAcL,KAAK,CACpBM,OAAQR,KAAKS,GACbC,MAAOV,KAAKW,UACZC,OAAQZ,KAAKY,Q,CAIrBC,SACI,OAAQ5B,EAAC6B,EAAI,CAACC,QAASf,KAAKgB,YAAYC,KAAKjB,MAAOkB,KAAK,eACrDjC,EAAA,MAAIC,MAAO,CAACG,MAAOW,KAAKX,OAAQK,MAAOM,KAAKM,KAAO,UAAY,IAC3DrB,EAAA,OAAKS,MAAM,0BACPT,EAAA,YAAOe,KAAKmB,MAERnB,KAAKM,KAAOrB,EAACF,EAAa,CAACC,MAAOgB,KAAKW,YAAe,K,CAOlEK,cAEJhB,KAAKW,UAAYX,KAAKW,YAAc,QAAUX,KAAKW,YAAc,OAAS,MAAQ,M"}
+{"version":3,"names":["GridSortArrow","state","h","style","marginLeft","xmlns","width","height","viewBox","type","fill","class","d","gridColumnCss","GridColumn","parseMyObjectProp","newValue","this","wcsHiddenChange","emit","sortOrderChange","_","emitSortConfig","sort","wcsSortChange","column","el","order","sortOrder","sortFn","render","Host","onClick","onSortClick","bind","slot","name"],"sources":["./src/components/grid-column/grid-sort-arrow.tsx","./src/components/grid-column/grid-column.scss?tag=wcs-grid-column&encapsulation=shadow","./src/components/grid-column/grid-column.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { WcsSortOrder } from '../grid/grid-interface';\n\ninterface GridSortArrowProps {\n  state: WcsSortOrder;\n}\n\nexport const GridSortArrow: FunctionalComponent<GridSortArrowProps> = ({ state }) => (\n    <svg style={{ marginLeft: 'auto' }} 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            .asc {\n                transform: scaleY(1) translateY(-6px);\n            }\n            .desc {\n                transform: scaleY(-1) translateY(-6px);\n            }\n            .active {\n                fill: var(--wcs-primary);\n            }\n\n        `}</style>\n        <g fill=\"none\" class='asc arrow-group'>\n            <path class={(state === 'asc' ? '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        <g fill=\"none\" class='desc arrow-group'>\n            <path class={(state === 'desc' ? '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    </svg>\n);\n",":host {\n    --wcs-grid-column-border-left: solid 1px var(--wcs-text-light);\n\n    display: contents;\n\n    th {\n        color: var(--wcs-gray-dark);\n        background-color: var(--wcs-light);\n        border-left: var(--wcs-grid-column-border-left);\n        padding: calc(var(--wcs-padding) / 2) var(--wcs-padding);\n        text-align: left;\n\n        .grid-column-th-content {\n            display: inline-flex;\n            flex-direction: row;\n\n            span {\n                user-select: none;\n            }\n        }\n    }\n\n    .pointer {\n        cursor: pointer;\n    }\n}\n\n:host([sort-order=\"asc\"]) {\n    img {\n        transform: scaleY(1);\n    }\n}\n\n:host([sort-order=\"desc\"]) {\n    img {\n        transform: scaleY(-1);\n    }\n}\n\n:host([sort-order=\"none\"]) {\n    img {\n        display: none;\n    }\n\n    th:hover {\n        img {\n            display: inline-block;\n        }\n    }\n}\n\n:host([hidden]) {\n    display: none !important;\n}\n","import { Component, ComponentInterface, Element, Event, EventEmitter, h, Host, Prop, Watch } from '@stencil/core';\nimport { WcsCellFormatter, WcsGridColumnSortChangeEventDetails, WcsSortFn, WcsSortOrder } from '../grid/grid-interface';\nimport { GridSortArrow } from './grid-sort-arrow';\n\n@Component({\n    tag: 'wcs-grid-column',\n    styleUrl: 'grid-column.scss',\n    shadow: true\n})\nexport class GridColumn implements ComponentInterface {\n    @Element() private el: HTMLWcsGridColumnElement;\n    @Prop() path: string;\n    @Prop() name: string;\n    @Prop() sort: boolean = false;\n    @Prop() sortFn: WcsSortFn;\n    @Prop() formatter: WcsCellFormatter;\n    @Prop({mutable: true}) sortOrder: WcsSortOrder = 'none';\n    /**\n     * Set the column <th> element width\n     */\n    @Prop() width: string;\n    @Prop() customCells: boolean = false;\n    @Prop() hidden: boolean = false;\n    @Event() wcsSortChange!: EventEmitter<WcsGridColumnSortChangeEventDetails>;\n    @Event() wcsHiddenChange!: EventEmitter<boolean>;\n\n    @Watch('hidden')\n    parseMyObjectProp(newValue: boolean) {\n        this.wcsHiddenChange.emit(newValue);\n    }\n\n    @Watch('sortOrder')\n    sortOrderChange(_: WcsSortOrder) {\n        this.emitSortConfig();\n    }\n\n    emitSortConfig() {\n        if (!this.sort) return;\n        this.wcsSortChange.emit({\n            column: this.el,\n            order: this.sortOrder,\n            sortFn: this.sortFn\n        });\n    }\n\n    render(): any {\n        return (<Host onClick={this.onSortClick.bind(this)} slot=\"grid-column\">\n            <th style={{width: this.width}} class={this.sort ? 'pointer' : ''}>\n                <div class=\"grid-column-th-content\">\n                    <span>{this.name}</span>\n                    {\n                        this.sort ? <GridSortArrow state={this.sortOrder}/> : ''\n                    }\n                </div>\n            </th>\n        </Host>)\n    }\n\n    private onSortClick() {\n        // @Watch on sortOrder property will trigger wcsSortChange event\n        this.sortOrder = this.sortOrder === 'none' || this.sortOrder === 'desc' ? 'asc' : 'desc';\n    }\n}\n"],"mappings":"gEAOO,MAAMA,EAAyD,EAAGC,WACrEC,EAAA,OAAKC,MAAO,CAAEC,WAAY,QAAUC,MAAM,6BAA6BC,MAAM,KAAKC,OAAO,KAAKC,QAAQ,aAClGN,EAAA,SAAOO,KAAK,YAAY,ijBAoBxBP,EAAA,KAAGQ,KAAK,OAAOC,MAAM,mBACjBT,EAAA,QAAMS,OAAQV,IAAU,MAAQ,SAAW,IAAM,SAAUW,EAAE,mDAC7DV,EAAA,QAAMU,EAAE,gBAAgBF,KAAK,UAEjCR,EAAA,KAAGQ,KAAK,OAAOC,MAAM,oBACjBT,EAAA,QAAMS,OAAQV,IAAU,OAAS,SAAW,IAAM,SAAUW,EAAE,mDAC9DV,EAAA,QAAMU,EAAE,gBAAgBF,KAAK,WCnCzC,MAAMG,EAAgB,iqB,MCSTC,EAAU,M,yKAIK,M,8DAGyB,O,sCAKlB,M,YACL,K,CAK1BC,kBAAkBC,GACdC,KAAKC,gBAAgBC,KAAKH,E,CAI9BI,gBAAgBC,GACZJ,KAAKK,gB,CAGTA,iBACI,IAAKL,KAAKM,KAAM,OAChBN,KAAKO,cAAcL,KAAK,CACpBM,OAAQR,KAAKS,GACbC,MAAOV,KAAKW,UACZC,OAAQZ,KAAKY,Q,CAIrBC,SACI,OAAQ5B,EAAC6B,EAAI,CAACC,QAASf,KAAKgB,YAAYC,KAAKjB,MAAOkB,KAAK,eACrDjC,EAAA,MAAIC,MAAO,CAACG,MAAOW,KAAKX,OAAQK,MAAOM,KAAKM,KAAO,UAAY,IAC3DrB,EAAA,OAAKS,MAAM,0BACPT,EAAA,YAAOe,KAAKmB,MAERnB,KAAKM,KAAOrB,EAACF,EAAa,CAACC,MAAOgB,KAAKW,YAAe,K,CAOlEK,cAEJhB,KAAKW,UAAYX,KAAKW,YAAc,QAAUX,KAAKW,YAAc,OAAS,MAAQ,M"}

package/dist/wcs/p-64dd7356.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["Tab","componentDidLoad","this","tabLoaded","emit","render","h","Host","slot"],"sources":["./src/components/tab/tab.tsx"],"sourcesContent":["import { Component, Prop, h, Host, Event, EventEmitter } from '@stencil/core';\n\n/**\n * Tab content component.\n * Use this component to specify the content of a component.\n */\n@Component({\n    tag: 'wcs-tab',\n    shadow: true,\n})\nexport class Tab {\n    /**\n     * The header you want to be displayed for this tab.\n     */\n    @Prop({ reflect: true })\n    header: string;\n\n    @Prop() itemKey: any;\n\n    // TODO: See if there is a solution that doesn't pollute the API.\n    /**\n     * Do not use, meant for internal use only.\n     * @inner\n     * @ignore\n     */\n    @Event()\n    tabLoaded!: EventEmitter<void>;\n\n    componentDidLoad() {\n        this.tabLoaded.emit();\n    }\n\n    render() {\n        return (\n            <Host slot=\"wcs-tab\">\n                <slot></slot>\n            </Host>\n        );\n    }\n}\n"],"mappings":"+DAUaA,EAAG,M,2GAkBZC,mBACIC,KAAKC,UAAUC,M,CAGnBC,SACI,OACIC,EAACC,EAAI,CAACC,KAAK,WACPF,EAAA,a"}
+{"version":3,"names":["Tab","componentDidLoad","this","tabLoaded","emit","render","h","Host","slot"],"sources":["./src/components/tab/tab.tsx"],"sourcesContent":["import { Component, Prop, h, Host, Event, EventEmitter } from '@stencil/core';\n\n/**\n * Tab content component.\n * Use this component to specify the content of a component.\n */\n@Component({\n    tag: 'wcs-tab',\n    shadow: true,\n})\nexport class Tab {\n    /**\n     * The header you want to be displayed for this tab.\n     */\n    @Prop({ reflect: true }) header: string;\n\n    @Prop() itemKey: any;\n\n    // TODO: See if there is a solution that doesn't pollute the API.\n    /**\n     * Do not use, meant for internal use only.\n     * @inner\n     * @ignore\n     */\n    @Event()\n    tabLoaded!: EventEmitter<void>;\n\n    componentDidLoad() {\n        this.tabLoaded.emit();\n    }\n\n    render() {\n        return (\n            <Host slot=\"wcs-tab\">\n                <slot></slot>\n            </Host>\n        );\n    }\n}\n"],"mappings":"+DAUaA,EAAG,M,2GAiBZC,mBACIC,KAAKC,UAAUC,M,CAGnBC,SACI,OACIC,EAACC,EAAI,CAACC,KAAK,WACPF,EAAA,a"}

package/dist/wcs/p-6acbf38a.entry.js

@@ -0,0 +1,2 @@
+import{r as c,c as e,h as r,H as s}from"./p-a2df3a49.js";const t=':host{--wcs-checkbox-border-color:var(--wcs-text-medium);--wcs-checkbox-text-color:var(--wcs-text-medium);display:flex}:host([disabled]){--wcs-checkbox-border-color:var(--wcs-light);--wcs-checkbox-text-color:var(--wcs-text-disabled)}:host([disabled]) .wcs-container{cursor:not-allowed}.wcs-checkmark{transition:background-color 225ms cubic-bezier(0.17, 0.84, 0.44, 1), color 225ms cubic-bezier(0.17, 0.84, 0.44, 1)}.wcs-container{position:relative;font-size:1rem;user-select:none;font-weight:500;display:flex}.wcs-container:not([aria-disabled]){cursor:pointer}:host([label-alignment=top]) .wcs-container{align-items:start}:host([label-alignment=center]) .wcs-container{align-items:center}:host([label-alignment=bottom]) .wcs-container{align-items:flex-end}.wcs-container input{position:absolute;opacity:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.wcs-container:hover:not([aria-disabled]),input:focus{--wcs-checkbox-border-color:var(--wcs-primary);--wcs-checkbox-text-color:var(--wcs-primary)}.wcs-container:has(input:focus-visible){outline:2px dashed var(--wcs-primary);outline-offset:4px;border-radius:calc(var(--wcs-border-radius) / 2)}@supports not selector(.wcs-container:has(input:focus-visible)){.wcs-container:focus-within{outline:2px dashed var(--wcs-primary);outline-offset:4px;border-radius:calc(var(--wcs-border-radius) / 2)}}.wcs-checkmark{flex:0 0 1.125rem;width:1.125rem;height:1.125rem;border:2px solid var(--wcs-checkbox-border-color);border-radius:3px}:host([indeterminate]) .wcs-checkmark{--wcs-checkbox-border-color:var(--wcs-primary);background:var(--wcs-primary)}.wcs-container:not([aria-disabled]) input:checked~.wcs-checkmark{background-color:var(--wcs-primary);--wcs-checkbox-border-color:var(--wcs-primary)}.wcs-container[aria-disabled] input:checked~.wcs-checkmark{background-color:var(--wcs-light);--wcs-checkbox-border-color:var(--wcs-light)}.wcs-checkmark:after{content:"";position:absolute;display:none}.wcs-container input:checked~.wcs-checkmark:after{display:flex}.wcs-container .wcs-checkmark:after{left:7px;width:5px;height:10px;border:solid var(--wcs-white, white);border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.wcs-container:not([aria-disabled]) input:checked~.text{--wcs-checkbox-text-color:var(--wcs-primary)}.text{color:var(--wcs-checkbox-text-color);margin-left:6px;font-weight:500;line-height:1.375}';const o=class{constructor(r){c(this,r);this.wcsChange=e(this,"wcsChange",7);this.checkboxId=`wcs-checkbox-${a++}`;this.name=this.checkboxId;this.indeterminate=false;this.checked=false;this.labelAlignment="center";this.disabled=false}handleChange(c){this.indeterminate=false;this.checked=!this.checked;this.wcsChange.emit({checked:this.checked})}render(){return r(s,null,r("label",{htmlFor:this.name,class:"wcs-container","aria-disabled":this.disabled},r("input",{onChange:c=>this.handleChange(c),checked:this.checked,class:"wcs-checkbox",type:"checkbox",name:this.name,disabled:this.disabled,id:this.name}),r("span",{class:"wcs-checkmark"}),r("span",{class:"text"},r("slot",null))))}};let a=0;o.style=t;export{o as wcs_checkbox};
+//# sourceMappingURL=p-6acbf38a.entry.js.map

package/dist/wcs/{p-7d7472e2.entry.js.map → p-6acbf38a.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["checkboxCss","Checkbox","this","checkboxId","checkboxIds","handleChange","_event","indeterminate","checked","wcsChange","emit","render","h","Host","htmlFor","name","class","disabled","onChange","evt","type","id"],"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"],"mappings":"2DAAA,MAAMA,EAAc,04E,MCQPC,EAAQ,M,8DACTC,KAAAC,WAAa,gBAAgBC,M,UAItBF,KAAKC,W,mBAKoC,M,aAKN,M,oBAK+B,S,cAKrD,K,CAO5BE,aAAaC,GACTJ,KAAKK,cAAgB,MACrBL,KAAKM,SAAWN,KAAKM,QACrBN,KAAKO,UAAUC,KAAK,CAChBF,QAASN,KAAKM,S,CAItBG,SACI,OACIC,EAACC,EAAI,KACDD,EAAA,SAAOE,QAASZ,KAAKa,KAAMC,MAAM,gBAAe,gBAAgBd,KAAKe,UACjEL,EAAA,SAAOM,SAAWC,GAAQjB,KAAKG,aAAac,GACrCX,QAASN,KAAKM,QACdQ,MAAM,eACNI,KAAK,WACLL,KAAMb,KAAKa,KACXE,SAAUf,KAAKe,SACfI,GAAInB,KAAKa,OAEhBH,EAAA,QAAMI,MAAM,kBACZJ,EAAA,QAAMI,MAAM,QACRJ,EAAA,e,2BAQxB,IAAIR,EAAc,E"}
+{"version":3,"names":["checkboxCss","Checkbox","this","checkboxId","checkboxIds","handleChange","_event","indeterminate","checked","wcsChange","emit","render","h","Host","htmlFor","name","class","disabled","onChange","evt","type","id"],"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"],"mappings":"yDAAA,MAAMA,EAAc,04E,MCQPC,EAAQ,M,8DACTC,KAAAC,WAAa,gBAAgBC,M,UACtBF,KAAKC,W,mBAKoC,M,aAKN,M,oBAK+B,S,cAKrD,K,CAO5BE,aAAaC,GACTJ,KAAKK,cAAgB,MACrBL,KAAKM,SAAWN,KAAKM,QACrBN,KAAKO,UAAUC,KAAK,CAChBF,QAASN,KAAKM,S,CAItBG,SACI,OACIC,EAACC,EAAI,KACDD,EAAA,SAAOE,QAASZ,KAAKa,KAAMC,MAAM,gBAAe,gBAAgBd,KAAKe,UACjEL,EAAA,SAAOM,SAAWC,GAAQjB,KAAKG,aAAac,GACrCX,QAASN,KAAKM,QACdQ,MAAM,eACNI,KAAK,WACLL,KAAMb,KAAKa,KACXE,SAAUf,KAAKe,SACfI,GAAInB,KAAKa,OAEhBH,EAAA,QAAMI,MAAM,kBACZJ,EAAA,QAAMI,MAAM,QACRJ,EAAA,e,GAQxB,IAAIR,EAAc,E"}

package/dist/wcs/{p-6f921d57.entry.js → p-732b2faa.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as o,H as s,g as i}from"./p-a2df3a49.js";import{S as e}from"./p-d6c3e615.js";import{c as r,d as n,e as a,b as p}from"./p-dc57a5f7.js";import{c as d}from"./p-314d3097.js";function c(t){return t===document.activeElement}const h=':host{display:flex}wcs-button{--wcs-button-padding:8px 10px 8px 16px !important}:host([no-arrow]) wcs-button{--wcs-button-padding:8px 16px 8px 16px !important}:host([shape=small]) wcs-button{--wcs-button-padding:2px 10px 2px 16px !important}:host([shape=small][no-arrow]) wcs-button{--wcs-button-padding:2px 16px 2px 16px !important}.wcs-button-content-wrapper{display:flex}.popover{display:none;border:1px solid #d7d7d7;border-radius:var(--wcs-border-radius);background-color:var(--wcs-white);z-index:9999}.show{display:block}.container{border-radius:inherit;overflow:hidden;padding:calc(var(--wcs-padding) / 2) 0;background-color:var(--wcs-white)}#arrow,#arrow::before{position:absolute;width:8px;height:8px;background:inherit;border:solid 1px #d7d7d7}#arrow{visibility:hidden;z-index:-1}#arrow::before{visibility:visible;content:"";transform:rotate(45deg)}.popover[data-popper-placement^=top]>#arrow{bottom:-5px}.popover[data-popper-placement^=bottom]>#arrow{top:-6px}.popover[data-popper-placement^=left]>#arrow{right:-4px}.popover[data-popper-placement^=right]>#arrow{left:-6px}';const l=class{constructor(o){t(this,o);this.noArrow=false;this.mode="stroked";this.shape="normal";this.disabled=false;this.placement="bottom-end";this.expanded=false}placementChange(){this.popper.setOptions(Object.assign(Object.assign({},this.popper.state.options),{placement:this.placement})).then((t=>this.popper.update()))}componentDidLoad(){const t=this.el.shadowRoot.querySelector("wcs-button");const o=t.shadowRoot.querySelector("button");this.buttonTextColor=window.getComputedStyle(o).color;const s=this.el.shadowRoot.querySelector(".popover");this.popper=d(t,s,{placement:this.placement,modifiers:[{name:"offset",options:{offset:[0,8]}}]});if(!this.noArrow){this.el.shadowRoot.querySelector(".arrow").style.fill=this.buttonTextColor}this.fixForFirefoxBelow63()}fixForFirefoxBelow63(){const t=this.el.querySelectorAll("wcs-dropdown-item");const o=this.el.querySelector(".container");if(t.length>0&&o){t.forEach((t=>{this.el.removeChild(t);o.appendChild(t)}))}}onButtonClick(t){this.expanded=!this.expanded}onWindowClickEvent(t){const o=r(t,this.el);if(this.expanded&&!o){this.expanded=false}}dropdownItemClick(t){this.expanded=false}onKeyDown(t){if(this.expanded&&(n(t)||a(t))){t.preventDefault();const o=Array.from(this.el.querySelectorAll("wcs-dropdown-item"));const s=o.findIndex((t=>c(t)));if(s===-1&&n(t)){this.focusFirstItemIfPresent(o)}else{this.moveFocusedItemByDirection(o,s,n(t)?"down":"up")}}if(this.expanded&&p(t)){this.closeOverlayAndFocusButton()}}focusFirstItemIfPresent(t){if(t[0]){t[0].focus()}}moveFocusedItemByDirection(t,o,s){const i=t[o+(s==="down"?1:-1)];if(i){i.focus()}}closeOverlayAndFocusButton(){this.expanded=!this.expanded;const t=this.el.shadowRoot.querySelector("wcs-button");t.focus()}componentDidRender(){if(this.popper){this.popper.update()}if(!this.noArrow){this.el.shadowRoot.querySelector(".arrow").style.fill=this.buttonTextColor}}render(){return o(s,null,o("wcs-button",{mode:this.mode,shape:this.shape,disabled:this.disabled,onClick:t=>this.onButtonClick(t)},o("div",{class:"wcs-button-content-wrapper"},o("slot",{name:"placeholder"}),this.noArrow?null:o(e,{up:this.expanded}))),o("div",{class:(this.expanded?"show ":"")+"popover"},o("div",{id:"arrow","data-popper-arrow":true}),o("div",{class:"container"},o("slot",{name:"item"}))))}get el(){return i(this)}static get watchers(){return{placement:["placementChange"]}}};l.style=h;export{l as wcs_dropdown};
-//# sourceMappingURL=p-6f921d57.entry.js.map
+import{r as t,h as o,H as s,g as i}from"./p-a2df3a49.js";import{S as e}from"./p-d6c3e615.js";import{g as r,d as n,c as a,b as p}from"./p-12ac2547.js";import{c as d}from"./p-314d3097.js";function c(t){return t===document.activeElement}const h=':host{display:flex}wcs-button{--wcs-button-padding:8px 10px 8px 16px !important}:host([no-arrow]) wcs-button{--wcs-button-padding:8px 16px 8px 16px !important}:host([shape=small]) wcs-button{--wcs-button-padding:2px 10px 2px 16px !important}:host([shape=small][no-arrow]) wcs-button{--wcs-button-padding:2px 16px 2px 16px !important}.wcs-button-content-wrapper{display:flex}.popover{display:none;border:1px solid #d7d7d7;border-radius:var(--wcs-border-radius);background-color:var(--wcs-white);z-index:9999}.show{display:block}.container{border-radius:inherit;overflow:hidden;padding:calc(var(--wcs-padding) / 2) 0;background-color:var(--wcs-white)}#arrow,#arrow::before{position:absolute;width:8px;height:8px;background:inherit;border:solid 1px #d7d7d7}#arrow{visibility:hidden;z-index:-1}#arrow::before{visibility:visible;content:"";transform:rotate(45deg)}.popover[data-popper-placement^=top]>#arrow{bottom:-5px}.popover[data-popper-placement^=bottom]>#arrow{top:-6px}.popover[data-popper-placement^=left]>#arrow{right:-4px}.popover[data-popper-placement^=right]>#arrow{left:-6px}';const l=class{constructor(o){t(this,o);this.noArrow=false;this.mode="stroked";this.shape="normal";this.disabled=false;this.placement="bottom-end";this.expanded=false}placementChange(){this.popper.setOptions(Object.assign(Object.assign({},this.popper.state.options),{placement:this.placement})).then((t=>this.popper.update()))}componentDidLoad(){const t=this.el.shadowRoot.querySelector("wcs-button");const o=t.shadowRoot.querySelector("button");this.buttonTextColor=window.getComputedStyle(o).color;const s=this.el.shadowRoot.querySelector(".popover");this.popper=d(t,s,{placement:this.placement,modifiers:[{name:"offset",options:{offset:[0,8]}}]});if(!this.noArrow){this.el.shadowRoot.querySelector(".arrow").style.fill=this.buttonTextColor}this.fixForFirefoxBelow63()}fixForFirefoxBelow63(){const t=this.el.querySelectorAll("wcs-dropdown-item");const o=this.el.querySelector(".container");if(t.length>0&&o){t.forEach((t=>{this.el.removeChild(t);o.appendChild(t)}))}}onButtonClick(t){this.expanded=!this.expanded}onWindowClickEvent(t){const o=r(t,this.el);if(this.expanded&&!o){this.expanded=false}}dropdownItemClick(t){this.expanded=false}onKeyDown(t){if(this.expanded&&(n(t)||a(t))){t.preventDefault();const o=Array.from(this.el.querySelectorAll("wcs-dropdown-item"));const s=o.findIndex((t=>c(t)));if(s===-1&&n(t)){this.focusFirstItemIfPresent(o)}else{this.moveFocusedItemByDirection(o,s,n(t)?"down":"up")}}if(this.expanded&&p(t)){this.closeOverlayAndFocusButton()}}focusFirstItemIfPresent(t){if(t[0]){t[0].focus()}}moveFocusedItemByDirection(t,o,s){const i=t[o+(s==="down"?1:-1)];if(i){i.focus()}}closeOverlayAndFocusButton(){this.expanded=!this.expanded;const t=this.el.shadowRoot.querySelector("wcs-button");t.focus()}componentDidRender(){if(this.popper){this.popper.update()}if(!this.noArrow){this.el.shadowRoot.querySelector(".arrow").style.fill=this.buttonTextColor}}render(){return o(s,null,o("wcs-button",{mode:this.mode,shape:this.shape,disabled:this.disabled,onClick:t=>this.onButtonClick(t)},o("div",{class:"wcs-button-content-wrapper"},o("slot",{name:"placeholder"}),this.noArrow?null:o(e,{up:this.expanded}))),o("div",{class:(this.expanded?"show ":"")+"popover"},o("div",{id:"arrow","data-popper-arrow":true}),o("div",{class:"container"},o("slot",{name:"item"}))))}get el(){return i(this)}static get watchers(){return{placement:["placementChange"]}}};l.style=h;export{l as wcs_dropdown};
+//# sourceMappingURL=p-732b2faa.entry.js.map

package/dist/wcs/p-732b2faa.entry.js.map

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

package/dist/wcs/{p-587fea23.entry.js → p-966a241e.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as e,H as o,g as i}from"./p-a2df3a49.js";import{f as r}from"./p-dc57a5f7.js";import{c as n}from"./p-314d3097.js";const a='#menu{background-color:var(--wcs-gray);color:white;display:none;padding:var(--wcs-padding)}#menu[data-show]{display:block;z-index:9999}#menu[data-popper-placement^=top]>#arrow{bottom:-4px}#menu[data-popper-placement^=bottom]>#arrow{top:-4px}#menu[data-popper-placement^=left]>#arrow{right:-4px}#menu[data-popper-placement^=right]>#arrow{left:-4px}:host{display:flex;align-items:center;height:32px;padding-left:var(--wcs-padding);background-color:var(--wcs-gray-light)}#toggle-menu-icon{cursor:pointer;padding:0 var(--wcs-padding);user-select:none}#arrow,#arrow::before{position:absolute;width:8px;height:8px;background:inherit}#arrow{visibility:hidden}#arrow::before{visibility:visible;content:"";transform:rotate(45deg)}';const s=class{constructor(e){t(this,e);this.showPopoverMenu=false;this.text=undefined}componentDidLoad(){this.menu=this.el.shadowRoot.getElementById("toggle-menu-icon");this.tooltip=this.el.shadowRoot.getElementById("menu");this.popper=n(this.menu,this.tooltip,{placement:"bottom-end",modifiers:[{name:"offset",options:{offset:[0,8]}}]})}onWindowClickEvent(t){if(r(t,this.tooltip)||r(t,this.menu)){return}else{if(this.showPopoverMenu){this.toogleMenu()}}}toogleMenu(){this.showPopoverMenu=!this.showPopoverMenu}componentDidRender(){if(this.popper){this.popper.update()}}render(){return e(o,null,e("span",null,this.text),e("wcs-mat-icon",{id:"toggle-menu-icon",icon:"more_horiz",size:"m",onClick:t=>{this.toogleMenu()}}),e("span",{id:"menu","data-show":this.showPopoverMenu},e("div",{id:"arrow","data-popper-arrow":true}),e("slot",null)))}get el(){return i(this)}};s.style=a;export{s as wcs_galactic_menu};
-//# sourceMappingURL=p-587fea23.entry.js.map
+import{r as t,h as e,H as o,g as i}from"./p-a2df3a49.js";import{h as r}from"./p-12ac2547.js";import{c as n}from"./p-314d3097.js";const a='#menu{background-color:var(--wcs-gray);color:white;display:none;padding:var(--wcs-padding)}#menu[data-show]{display:block;z-index:9999}#menu[data-popper-placement^=top]>#arrow{bottom:-4px}#menu[data-popper-placement^=bottom]>#arrow{top:-4px}#menu[data-popper-placement^=left]>#arrow{right:-4px}#menu[data-popper-placement^=right]>#arrow{left:-4px}:host{display:flex;align-items:center;height:32px;padding-left:var(--wcs-padding);background-color:var(--wcs-gray-light)}#toggle-menu-icon{cursor:pointer;padding:0 var(--wcs-padding);user-select:none}#arrow,#arrow::before{position:absolute;width:8px;height:8px;background:inherit}#arrow{visibility:hidden}#arrow::before{visibility:visible;content:"";transform:rotate(45deg)}';const s=class{constructor(e){t(this,e);this.showPopoverMenu=false;this.text=undefined}componentDidLoad(){this.menu=this.el.shadowRoot.getElementById("toggle-menu-icon");this.tooltip=this.el.shadowRoot.getElementById("menu");this.popper=n(this.menu,this.tooltip,{placement:"bottom-end",modifiers:[{name:"offset",options:{offset:[0,8]}}]})}onWindowClickEvent(t){if(r(t,this.tooltip)||r(t,this.menu)){return}else{if(this.showPopoverMenu){this.toogleMenu()}}}toogleMenu(){this.showPopoverMenu=!this.showPopoverMenu}componentDidRender(){if(this.popper){this.popper.update()}}render(){return e(o,null,e("span",null,this.text),e("wcs-mat-icon",{id:"toggle-menu-icon",icon:"more_horiz",size:"m",onClick:t=>{this.toogleMenu()}}),e("span",{id:"menu","data-show":this.showPopoverMenu},e("div",{id:"arrow","data-popper-arrow":true}),e("slot",null)))}get el(){return i(this)}};s.style=a;export{s as wcs_galactic_menu};
+//# sourceMappingURL=p-966a241e.entry.js.map

package/dist/wcs/p-966a241e.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["galacticMenuCss","Galactic","componentDidLoad","this","menu","el","shadowRoot","getElementById","tooltip","popper","createPopper","placement","modifiers","name","options","offset","onWindowClickEvent","event","clickInsideElement","showPopoverMenu","toogleMenu","componentDidRender","update","render","h","Host","text","id","icon","size","onClick","_"],"sources":["./src/components/galactic-menu/galactic-menu.scss?tag=wcs-galactic-menu&encapsulation=shadow","./src/components/galactic-menu/galactic-menu.tsx"],"sourcesContent":["#menu {\n    background-color: var(--wcs-gray);\n    color: white;\n    display: none;\n    padding: var(--wcs-padding);\n}\n#menu[data-show] {\n    display: block;\n    z-index: 9999;\n}\n#menu[data-popper-placement^='top'] > #arrow {\n    bottom: -4px;\n}\n\n#menu[data-popper-placement^='bottom'] > #arrow {\n    top: -4px;\n}\n\n#menu[data-popper-placement^='left'] > #arrow {\n    right: -4px;\n}\n\n#menu[data-popper-placement^='right'] > #arrow {\n    left: -4px;\n}\n:host {\n    display: flex;\n    align-items: center;\n    height: 32px;\n    padding-left: var(--wcs-padding);\n    background-color: var(--wcs-gray-light);\n}\n#toggle-menu-icon{\n    cursor: pointer;\n    padding: 0 var(--wcs-padding);\n    user-select: none;\n}\n#arrow,\n#arrow::before {\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    background: inherit;\n}\n\n#arrow {\n    visibility: hidden;\n}\n\n#arrow::before {\n    visibility: visible;\n    content: '';\n    transform: rotate(45deg);\n}\n","import { Component, ComponentInterface, Element, h, Host, Listen, Prop, State } from '@stencil/core';\nimport { Instance, createPopper } from '@popperjs/core';\nimport { clickInsideElement } from '../../utils/helpers';\n\n@Component({\n    tag: 'wcs-galactic-menu',\n    styleUrl: 'galactic-menu.scss',\n    shadow: true\n})\nexport class Galactic implements ComponentInterface {\n    @Element() private el: HTMLWcsGalacticMenuElement;\n    @State() private showPopoverMenu: boolean = false;\n    private popper: Instance;\n    /**\n     * Text to be displayed in the galactic bar\n     */\n    @Prop() text: string;\n    private menu;\n    private tooltip;\n\n    componentDidLoad() {\n        this.menu = this.el.shadowRoot.getElementById('toggle-menu-icon');\n        this.tooltip = this.el.shadowRoot.getElementById('menu');\n        this.popper = createPopper(this.menu, this.tooltip, {\n            placement: 'bottom-end',\n            modifiers: [\n                {\n                    name: 'offset',\n                    options: {\n                        offset: [0, 8]\n                    }\n                }\n            ]\n        });\n    }\n\n    @Listen('click', {target: 'window'})\n    onWindowClickEvent(event: MouseEvent) {\n        if (clickInsideElement(event, this.tooltip) || clickInsideElement(event, this.menu)) {\n            return;\n        } else {\n            if (this.showPopoverMenu) {\n                this.toogleMenu();\n            }\n        }\n    }\n\n\n    private toogleMenu() {\n        this.showPopoverMenu = !this.showPopoverMenu;\n    }\n\n    componentDidRender() {\n        if (this.popper) {\n            this.popper.update();\n        }\n    }\n\n    render(): any {\n        return (\n            <Host>\n                <span>{this.text}</span>\n                <wcs-mat-icon id=\"toggle-menu-icon\" icon=\"more_horiz\" size=\"m\" onClick={_ => {\n                    this.toogleMenu();\n                }}></wcs-mat-icon>\n                <span id=\"menu\" data-show={this.showPopoverMenu}>\n                    <div id=\"arrow\" data-popper-arrow />\n                    <slot/>\n                </span>\n            </Host>\n        );\n    }\n}\n"],"mappings":"iIAAA,MAAMA,EAAkB,otB,MCSXC,EAAQ,M,8CAE2B,M,oBAS5CC,mBACIC,KAAKC,KAAOD,KAAKE,GAAGC,WAAWC,eAAe,oBAC9CJ,KAAKK,QAAUL,KAAKE,GAAGC,WAAWC,eAAe,QACjDJ,KAAKM,OAASC,EAAaP,KAAKC,KAAMD,KAAKK,QAAS,CAChDG,UAAW,aACXC,UAAW,CACP,CACIC,KAAM,SACNC,QAAS,CACLC,OAAQ,CAAC,EAAG,O,CAQhCC,mBAAmBC,GACf,GAAIC,EAAmBD,EAAOd,KAAKK,UAAYU,EAAmBD,EAAOd,KAAKC,MAAO,CACjF,M,KACG,CACH,GAAID,KAAKgB,gBAAiB,CACtBhB,KAAKiB,Y,GAMTA,aACJjB,KAAKgB,iBAAmBhB,KAAKgB,e,CAGjCE,qBACI,GAAIlB,KAAKM,OAAQ,CACbN,KAAKM,OAAOa,Q,EAIpBC,SACI,OACIC,EAACC,EAAI,KACDD,EAAA,YAAOrB,KAAKuB,MACZF,EAAA,gBAAcG,GAAG,mBAAmBC,KAAK,aAAaC,KAAK,IAAIC,QAASC,IACpE5B,KAAKiB,YAAY,IAErBI,EAAA,QAAMG,GAAG,OAAM,YAAYxB,KAAKgB,iBAC5BK,EAAA,OAAKG,GAAG,QAAO,2BACfH,EAAA,c"}

package/dist/wcs/p-9ecdeaf9.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as s,H as e,g as a}from"./p-a2df3a49.js";const n=["m","l"];function r(t){return n.includes(t)}const h=":host{display:block}:host .display-none{display:none !important}:host .label{margin-bottom:var(--wcs-base-margin);font-weight:500;font-size:var(--wcs-editable-field-font-size);color:var(--wcs-gray-light)}:host .edit-container{display:flex;width:100%}:host .display-container{box-sizing:border-box;height:var(--wcs-editable-field-host-height);white-space:break-spaces;display:flex;justify-content:space-between;align-items:center;background-color:var(--wcs-light);border-radius:var(--wcs-border-radius);font-size:var(--wcs-editable-field-font-size);line-height:1.5;font-weight:500;color:var(--wcs-gray);padding:var(--wcs-editable-field-host-padding);transition:0.175s all;border:solid 2px transparent}:host .display-container wcs-mat-icon{display:none}:host .load-container{box-sizing:border-box;height:var(--wcs-editable-field-host-height);white-space:pre;display:flex;justify-content:space-between;background-color:var(--wcs-light);border-radius:var(--wcs-border-radius);font-size:var(--wcs-editable-field-font-size);line-height:1.5;font-weight:500;color:var(--wcs-gray);padding:var(--wcs-editable-field-host-padding);transition:0.175s all;border:solid 2px transparent;align-items:center}:host wcs-spinner{height:24px;width:24px}:host .readonly-icon{fill:var(--wcs-text-medium)}:host([readonly]) .display-container{color:var(--wcs-gray-light)}:host(:not([readonly])) .display-container:hover{color:var(--wcs-primary);cursor:pointer;border:dashed 2px var(--wcs-primary)}:host(:not([readonly])) .display-container:hover wcs-mat-icon{display:flex;align-items:center}:host([size=l]){--wcs-editable-field-host-padding:var(--wcs-padding-l) calc(var(--wcs-padding) - var(--wcs-border-size));--wcs-editable-field-host-height:var(--wcs-size-l);--wcs-editable-field-font-size:1.0625rem}:host([size=m]){--wcs-editable-field-host-padding:var(--wcs-padding-m) calc(var(--wcs-padding) - var(--wcs-border-size));--wcs-editable-field-host-height:var(--wcs-size-m);--wcs-editable-field-font-size:1rem}";var o;(function(t){t[t["DISPLAY"]=0]="DISPLAY";t[t["EDIT"]=1]="EDIT";t[t["LOAD"]=2]="LOAD"})(o||(o={}));const l=class{constructor(s){t(this,s);this.wcsChange=i(this,"wcsChange",7);this.spiedElement=null;this.currentValue=null;this.currentState=o.DISPLAY;this.type="input";this.label=undefined;this.readonly=false;this.value=undefined;this.validateFn=undefined;this.formatFn=undefined;this.errorMsg=null;this.size="m";this.isError=false}componentWillLoad(){if(!r(this.size)){console.error(`Invalid size value for wcs-editable-field : "${this.size}". Must be one of "${n.join(", ")}"`);this.size="m"}this.currentValue=this.value}componentDidRender(){const t=this.el.shadowRoot.querySelector("slot").assignedElements();switch(this.type){case"input":this.initWithInput(t);break;case"textarea":this.initWithTextArea(t);break;case"select":this.initWithSelect(t);break}}initWithInput(t){const i=t.filter((t=>t.tagName==="WCS-INPUT"))[0];if(!i)throw new Error("You must provide a slotted input element to handle edition");this.spiedElement=i;this.addChangeHandlerForWcsComponents(this.spiedElement);this.spiedElement.addEventListener("keydown",(t=>{if(t.key==="Enter"){this.sendCurrentValue()}if(t.key==="Escape"){this.discardChanges()}}))}initWithTextArea(t){const i=t.filter((t=>t.tagName==="WCS-TEXTAREA"))[0];if(!i)throw new Error("You must provide a slotted textarea element to handle edition");this.spiedElement=i;this.addChangeHandlerForWcsComponents(this.spiedElement);this.spiedElement.addEventListener("keydown",(t=>{if(t.key==="Enter"&&t.ctrlKey){this.sendCurrentValue()}if(t.key==="Escape"){this.discardChanges()}}))}initWithSelect(t){const i=t.filter((t=>t.tagName==="WCS-SELECT"))[0];if(!i)throw new Error("You must provide a slotted select element to handle edition");this.spiedElement=i;this.addChangeHandlerForWcsComponents(this.spiedElement)}addChangeHandlerForWcsComponents(t){t.addEventListener("wcsChange",(t=>{t.stopImmediatePropagation();this.currentValue=t.detail.value;if(this.validateFn){this.isError=!this.validateFn(this.currentValue)}}))}sendCurrentValue(){if(this.currentState===o.EDIT){if(this.value===this.currentValue){this.currentState=o.DISPLAY}else{this.isError=this.validateFn?!this.validateFn(this.currentValue):false;if(!this.isError){this.currentState=o.LOAD;this.wcsChange.emit({newValue:this.currentValue,successHandler:()=>this.forceDisplayStateAndValidate(),errorhandler:()=>this.errorHandler()})}}}}discardChanges(){this.currentValue=this.value;this.currentState=o.DISPLAY;this.isError=false}forceDisplayStateAndValidate(){if(this.currentState===o.LOAD){this.value=this.currentValue;this.currentState=o.DISPLAY}else{throw new Error("You cannot set display state from "+o[this.currentState]+" state")}}onWindowClickEvent(t){if(!this.clickInsideComponent(t)){if(this.currentState===o.EDIT){if(this.isError){this.discardChanges()}else{this.sendCurrentValue()}}}}clickInsideComponent(t){return t.x>=this.el.getBoundingClientRect().x&&t.x<=this.el.getBoundingClientRect().x+this.el.getBoundingClientRect().width&&t.y>=this.el.getBoundingClientRect().y&&t.y<=this.el.getBoundingClientRect().y+this.el.getBoundingClientRect().height}errorHandler(){this.discardChanges()}onValueChange(){this.currentState=o.DISPLAY}onDisplayContainerClick(){if(this.currentState===o.DISPLAY&&this.readonly===false){this.currentState=o.EDIT;this.spiedElement["value"]=this.currentValue;if(this.validateFn){this.isError=!this.validateFn(this.currentValue)}const t=20;setTimeout((()=>{if(this.type==="input"){this.spiedElement.setFocus()}else if(this.type==="textarea"){this.spiedElement.fitContent();this.spiedElement.setFocus()}}),t)}}render(){const{formattedValue:t,formattedCurrentValue:i}=this.formatValues();return s(e,null,s("div",{class:"label"},this.label),s("div",{class:"display-container "+(this.currentState!==o.DISPLAY?"display-none":""),onClick:()=>this.onDisplayContainerClick()},t,s("wcs-mat-icon",{icon:"edit",size:"s"}),this.readonly?this.getReadonlySvgIcon():null),s("div",{class:"load-container "+(this.currentState!==o.LOAD?"display-none":"")},i,s("wcs-spinner",null)),s("wcs-form-field",{"is-error":this.isError,class:"edit-container "+(this.currentState!==o.EDIT?"display-none":"")},s("slot",null),this.isError&&this.errorMsg?s("wcs-error",null,this.errorMsg):null))}getReadonlySvgIcon(){return s("svg",{xmlns:"http://www.w3.org/2000/svg",width:"26",height:"24",viewBox:"0 0 27 25",class:"readonly-icon"},s("path",{d:"M26.79,25.05H1.21a.73.73,0,0,0,0,1.45H26.79a.73.73,0,0,0,0-1.45Z",transform:"translate(-0.5 -1.5)"}),s("path",{d:"M19.8,8.87h-.61V6.73a5.23,5.23,0,0,0-10.46,0V8.87H8.2a1.63,1.63,0,0,0-1.63,1.62V21.32A1.62,1.62,0,0,0,8.2,22.94H19.8a1.62,1.62,0,0,0,1.63-1.62V10.49A1.63,1.63,0,0,0,19.8,8.87ZM10.93,6.73a3,3,0,1,1,6.06,0V8.87H10.93Zm3,14.15a5,5,0,1,1,5-5A5,5,0,0,1,14,20.88Z",transform:"translate(-0.5 -1.5)"}),s("path",{d:"M14,12.62a3.29,3.29,0,1,0,3.29,3.29A3.29,3.29,0,0,0,14,12.62Zm0,4.75a1.47,1.47,0,1,1,1.47-1.46A1.46,1.46,0,0,1,14,17.37Z",transform:"translate(-0.5 -1.5)"}))}formatValues(){let t=this.value;let i=this.currentValue;if(this.formatFn){t=this.formatFn(this.value);i=this.formatFn(this.currentValue)}if(Array.isArray(this.value)){t=this.value.join(", ")}if(Array.isArray(this.currentValue)){i=this.currentValue.join(", ")}return{formattedValue:t?s("span",null,t):s("span",null),formattedCurrentValue:i?s("span",null,i):s("span",null)}}get el(){return a(this)}static get watchers(){return{value:["onValueChange"]}}};l.style=h;export{l as wcs_editable_field};
+//# sourceMappingURL=p-9ecdeaf9.entry.js.map

package/dist/wcs/p-9ecdeaf9.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["WcsEditableFieldSizeValues","isWcsEditableFieldSize","size","includes","editableFieldCss","EditableComponentState","EditableField","this","spiedElement","currentValue","DISPLAY","componentWillLoad","console","error","join","value","componentDidRender","assignedElements","el","shadowRoot","querySelector","type","initWithInput","initWithTextArea","initWithSelect","element","filter","x","tagName","Error","addChangeHandlerForWcsComponents","addEventListener","event","key","sendCurrentValue","discardChanges","ctrlKey","elt","stopImmediatePropagation","detail","validateFn","isError","currentState","EDIT","LOAD","wcsChange","emit","newValue","successHandler","forceDisplayStateAndValidate","errorhandler","errorHandler","onWindowClickEvent","clickInsideComponent","getBoundingClientRect","width","y","height","onValueChange","onDisplayContainerClick","readonly","DELAY_FOR_RENDER","setTimeout","setFocus","fitContent","render","formattedValue","formattedCurrentValue","formatValues","h","Host","class","label","onClick","icon","getReadonlySvgIcon","errorMsg","xmlns","viewBox","d","transform","formatFn","Array","isArray"],"sources":["./src/components/editable-field/editable-field-interface.tsx","./src/components/editable-field/editable-field.scss?tag=wcs-editable-field&encapsulation=shadow","./src/components/editable-field/editable-field.tsx"],"sourcesContent":["import { WcsSize } from '../../shared-types';\n\nexport type ValidateFn<T> = (value: T) => boolean;\nexport type FormatFn<T> = (value: T) => string;\n\nexport interface EditableComponentUpdateEvent {\n    newValue: any; // We use any for now, but when components typings will support template, change for parameterized type\n    /**\n     * Permet de sortir de l'état LOAD pour aller vers l'état DISPLAY\n     * À n'utiliser que lorsque la valeur n'est pas systématiquement mise à jour à chaque événement.\n     */\n    successHandler: () => void;\n    errorhandler: () => void;\n}\n\nexport const WcsEditableFieldSizeValues = ['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 WcsEditableFieldSize = Extract<WcsSize, typeof WcsEditableFieldSizeValues[number]>;\n\nexport function isWcsEditableFieldSize(size: string): size is WcsEditableFieldSize {\n    // @ts-ignore : ignore size type, as it is checked with WcsEditableFieldSizeValues\n    return WcsEditableFieldSizeValues.includes(size);\n}\n\nexport type EditableFieldType = 'input' | 'textarea' | 'select';\n",":host {\n    display: block;\n\n    .display-none {\n        display: none !important;\n    }\n\n    .label {\n        margin-bottom: var(--wcs-base-margin);\n        font-weight: 500;\n        font-size: var(--wcs-editable-field-font-size);\n        color: var(--wcs-gray-light);\n    }\n\n    .edit-container {\n        display: flex;\n        width: 100%;\n    }\n\n    .display-container {\n        box-sizing: border-box;\n        wcs-mat-icon {\n            display: none;\n        }\n        height: var(--wcs-editable-field-host-height);\n        white-space: break-spaces;\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        background-color: var(--wcs-light);\n        border-radius: var(--wcs-border-radius);\n        font-size: var(--wcs-editable-field-font-size);\n        line-height: 1.5;\n        font-weight: 500;\n        color: var(--wcs-gray);\n        padding: var(--wcs-editable-field-host-padding);\n        transition: 0.175s all;\n        border: solid 2px transparent;\n    }\n\n    .load-container {\n        box-sizing: border-box;\n        height: var(--wcs-editable-field-host-height);\n        white-space: pre;\n        display: flex;\n        justify-content: space-between;\n        background-color: var(--wcs-light);\n        border-radius: var(--wcs-border-radius);\n        font-size: var(--wcs-editable-field-font-size);\n        line-height: 1.5;\n        font-weight: 500;\n        color: var(--wcs-gray);\n        padding: var(--wcs-editable-field-host-padding);\n        transition: 0.175s all;\n        border: solid 2px transparent;\n        align-items: center;\n    }\n\n    wcs-spinner {\n        height: 24px;\n        width: 24px;\n    }\n\n    .readonly-icon {\n        fill: var(--wcs-text-medium);\n    }\n}\n\n:host([readonly]) {\n    .display-container {\n        color: var(--wcs-gray-light);\n    }\n}\n\n:host(:not([readonly])) {\n    .display-container:hover {\n        wcs-mat-icon {\n            display: flex;\n            align-items: center;\n        }\n        color: var(--wcs-primary);\n        cursor: pointer;\n        border: dashed 2px var(--wcs-primary);\n    }\n}\n\n:host([size=l]) {\n    --wcs-editable-field-host-padding: var(--wcs-padding-l) calc(var(--wcs-padding) - var(--wcs-border-size));\n    --wcs-editable-field-host-height: var(--wcs-size-l);\n    --wcs-editable-field-font-size: 1.0625rem;\n}\n\n:host([size=m]) { // Default\n    --wcs-editable-field-host-padding: var(--wcs-padding-m) calc(var(--wcs-padding) - var(--wcs-border-size));\n    --wcs-editable-field-host-height: var(--wcs-size-m);\n    --wcs-editable-field-font-size: 1rem;\n}\n","import {\n    Component,\n    ComponentInterface,\n    EventEmitter,\n    h,\n    Prop,\n    Event,\n    State,\n    Host,\n    Element,\n    Watch, Listen\n} from '@stencil/core';\nimport {\n    EditableComponentUpdateEvent,\n    EditableFieldType,\n    FormatFn,\n    isWcsEditableFieldSize,\n    ValidateFn,\n    WcsEditableFieldSize,\n    WcsEditableFieldSizeValues\n} from './editable-field-interface';\n\nenum EditableComponentState {\n    DISPLAY,\n    EDIT,\n    LOAD\n}\n\n@Component({\n    tag: 'wcs-editable-field',\n    styleUrl: 'editable-field.scss',\n    shadow: true\n})\nexport class EditableField implements ComponentInterface {\n    @Element() private el!: HTMLWcsEditableFieldElement;\n\n    @State() private currentState: EditableComponentState = EditableComponentState.DISPLAY;\n    /**\n     * Specifies which component is used for editing\n     */\n    @Prop() type: EditableFieldType = 'input';\n    /**\n     * Label of the field\n     */\n    @Prop() label!: string;\n    /**\n     * event called at each (valid) update of the field.\n     */\n    @Event() wcsChange!: EventEmitter<EditableComponentUpdateEvent>;\n    /**\n     * Specify whether the field is editable or not\n     */\n    @Prop() readonly: boolean = false;\n    /**\n     * Initial value of the field\n     */\n    @Prop({mutable: true}) value: any;\n    /**\n     * Function to customize the validation of the data during the update\n     */\n    @Prop() validateFn: ValidateFn<any>;\n    /**\n     * Function used to format the value\n     */\n    @Prop() formatFn: FormatFn<any>;\n\n    /**\n     * Error message displayed under the field if validation failed.\n     */\n    @Prop() errorMsg: string = null;\n\n    /**\n     * Specify the size (height) of the editable field.\n     */\n    @Prop({reflect: true}) size: WcsEditableFieldSize = 'm';\n\n    @State() private isError: boolean = false;\n\n    // fixme: why this attr is never read?\n    // ignoreNextChangeEvent: boolean = false;\n    private spiedElement: HTMLElement = null;\n    private currentValue: any = null;\n\n    componentWillLoad(): Promise<void> | void {\n        if(!isWcsEditableFieldSize(this.size)) {\n            console.error(`Invalid size value for wcs-editable-field : \"${this.size}\". Must be one of \"${WcsEditableFieldSizeValues.join(', ')}\"`);\n            this.size = \"m\"; // Default fallback value\n        }\n        this.currentValue = this.value;\n    }\n\n    componentDidRender() {\n        const assignedElements = (this.el.shadowRoot.querySelector('slot') as HTMLSlotElement).assignedElements();\n        switch (this.type) {\n            case 'input':\n                this.initWithInput(assignedElements);\n                break;\n            case 'textarea':\n                this.initWithTextArea(assignedElements);\n                break;\n            case 'select':\n                this.initWithSelect(assignedElements)\n                break;\n        }\n    }\n\n    private initWithInput(assignedElements: Element[]) {\n        const element = assignedElements.filter(x => {\n            return x.tagName === 'WCS-INPUT'\n        })[0];\n        if (!element) throw new Error('You must provide a slotted input element to handle edition');\n        this.spiedElement = element as HTMLElement;\n        this.addChangeHandlerForWcsComponents(this.spiedElement);\n        this.spiedElement.addEventListener('keydown', (event: KeyboardEvent) => {\n            if (event.key === 'Enter') {\n                this.sendCurrentValue();\n            }\n            if (event.key === 'Escape') {\n                this.discardChanges();\n            }\n        })\n    }\n\n    private initWithTextArea(assignedElements: Element[]) {\n        const element = assignedElements.filter(x => {\n            return x.tagName === 'WCS-TEXTAREA'\n        })[0];\n        if (!element) throw new Error('You must provide a slotted textarea element to handle edition');\n        this.spiedElement = element as HTMLElement;\n        this.addChangeHandlerForWcsComponents(this.spiedElement);\n        this.spiedElement.addEventListener('keydown', (event: KeyboardEvent) => {\n            if (event.key === 'Enter' && event.ctrlKey) {\n                this.sendCurrentValue();\n            }\n            if (event.key === 'Escape') {\n                this.discardChanges();\n            }\n        })\n    }\n\n    private initWithSelect(assignedElements: Element[]) {\n        const element = assignedElements.filter(x => {\n            return x.tagName === 'WCS-SELECT'\n        })[0];\n        if (!element) throw new Error('You must provide a slotted select element to handle edition');\n        this.spiedElement = element as HTMLElement;\n        this.addChangeHandlerForWcsComponents(this.spiedElement);\n    }\n\n    /**\n     * This method subscribes the component to the change events produced by the other WCS components\n     * (provided by the user in slot)\n     * @private\n     */\n    private addChangeHandlerForWcsComponents(elt: HTMLElement) {\n        elt.addEventListener('wcsChange', (event: CustomEvent) => {\n            event.stopImmediatePropagation();\n            this.currentValue = event.detail.value;\n            if (this.validateFn) {\n                this.isError = !this.validateFn(this.currentValue);\n            }\n        });\n    }\n\n\n    private sendCurrentValue() {\n        if (this.currentState === EditableComponentState.EDIT) {\n            if (this.value === this.currentValue) {\n                this.currentState = EditableComponentState.DISPLAY\n            } else {\n                this.isError = this.validateFn ? !this.validateFn(this.currentValue) : false;\n                if (!this.isError) {\n                    this.currentState = EditableComponentState.LOAD;\n                    this.wcsChange.emit({\n                        newValue: this.currentValue,\n                        successHandler: () => this.forceDisplayStateAndValidate(),\n                        errorhandler: () => this.errorHandler()\n                    });\n                }\n            }\n        }\n    }\n\n    private discardChanges() {\n        this.currentValue = this.value;\n        this.currentState = EditableComponentState.DISPLAY;\n        this.isError = false;\n    }\n\n\n    forceDisplayStateAndValidate() {\n        if (this.currentState === EditableComponentState.LOAD) {\n            this.value = this.currentValue;\n            this.currentState = EditableComponentState.DISPLAY;\n        } else {\n            throw new Error('You cannot set display state from ' + EditableComponentState[this.currentState] + ' state');\n        }\n    }\n\n    @Listen('click', {target: 'window'})\n    onWindowClickEvent(event: MouseEvent) {\n        if (!this.clickInsideComponent(event)) {\n            if (this.currentState === EditableComponentState.EDIT) {\n                if (this.isError) {\n                    this.discardChanges();\n                } else {\n                    this.sendCurrentValue();\n                }\n            }\n        }\n    }\n\n    private clickInsideComponent(event: MouseEvent) {\n        return event.x >= this.el.getBoundingClientRect().x && event.x <= this.el.getBoundingClientRect().x + this.el.getBoundingClientRect().width\n            && event.y >= this.el.getBoundingClientRect().y && event.y <= this.el.getBoundingClientRect().y + this.el.getBoundingClientRect().height;\n    }\n\n    /**\n     * discard changes and force component state to DISPLAY\n     * <br/>\n     * This method must be call when component is in LOAD state\n     */\n\n    errorHandler() {\n        this.discardChanges();\n    }\n\n    @Watch('value')\n    onValueChange(): void {\n        this.currentState = EditableComponentState.DISPLAY;\n    }\n\n    private onDisplayContainerClick() {\n        if (this.currentState === EditableComponentState.DISPLAY && this.readonly === false) {\n            this.currentState = EditableComponentState.EDIT;\n            // fixme: why this attr is never read?\n            // this.ignoreNextChangeEvent = true;\n            this.spiedElement['value'] = this.currentValue;\n            if (this.validateFn) {\n                this.isError = !this.validateFn(this.currentValue);\n            }\n            // We wait until the element is displayed on the page otherwise the focus does not work\n            const DELAY_FOR_RENDER = 20;\n            setTimeout(() => {\n                if (this.type === 'input') {\n                    (this.spiedElement as HTMLWcsInputElement).setFocus();\n                } else if (this.type === 'textarea') {\n                    (this.spiedElement as HTMLWcsTextareaElement).fitContent();\n                    (this.spiedElement as HTMLWcsTextareaElement).setFocus();\n                }\n            }, DELAY_FOR_RENDER)\n        }\n    }\n\n    render(): any {\n        const {formattedValue, formattedCurrentValue} = this.formatValues();\n        return (\n            <Host>\n                <div class=\"label\">{this.label}</div>\n                <div\n                    class={'display-container ' + (this.currentState !== EditableComponentState.DISPLAY ? 'display-none' : '')}\n                    onClick={() => this.onDisplayContainerClick()}>\n                    {formattedValue}\n                    <wcs-mat-icon icon=\"edit\" size=\"s\"></wcs-mat-icon>\n                    {this.readonly ? this.getReadonlySvgIcon() : null}\n                </div>\n                <div\n                    class={'load-container ' + (this.currentState !== EditableComponentState.LOAD ? 'display-none' : '')}>\n                    {formattedCurrentValue}\n                    <wcs-spinner></wcs-spinner>\n                </div>\n                <wcs-form-field is-error={this.isError}\n                                class={'edit-container ' + (this.currentState !== EditableComponentState.EDIT ? 'display-none' : '')}>\n                    <slot/>\n                    {\n                        this.isError && this.errorMsg\n                            ? <wcs-error>{this.errorMsg}</wcs-error>\n                            : null\n                    }\n                </wcs-form-field>\n            </Host>\n        );\n    }\n\n    private getReadonlySvgIcon() {\n        return <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"26\" height=\"24\" viewBox=\"0 0 27 25\"\n                    class=\"readonly-icon\">\n            <path d=\"M26.79,25.05H1.21a.73.73,0,0,0,0,1.45H26.79a.73.73,0,0,0,0-1.45Z\"\n                  transform=\"translate(-0.5 -1.5)\"/>\n            <path\n                d=\"M19.8,8.87h-.61V6.73a5.23,5.23,0,0,0-10.46,0V8.87H8.2a1.63,1.63,0,0,0-1.63,1.62V21.32A1.62,1.62,0,0,0,8.2,22.94H19.8a1.62,1.62,0,0,0,1.63-1.62V10.49A1.63,1.63,0,0,0,19.8,8.87ZM10.93,6.73a3,3,0,1,1,6.06,0V8.87H10.93Zm3,14.15a5,5,0,1,1,5-5A5,5,0,0,1,14,20.88Z\"\n                transform=\"translate(-0.5 -1.5)\"/>\n            <path\n                d=\"M14,12.62a3.29,3.29,0,1,0,3.29,3.29A3.29,3.29,0,0,0,14,12.62Zm0,4.75a1.47,1.47,0,1,1,1.47-1.46A1.46,1.46,0,0,1,14,17.37Z\"\n                transform=\"translate(-0.5 -1.5)\"/>\n        </svg>;\n    }\n\n    private formatValues() {\n        let formattedValue = this.value;\n        let formattedCurrentValue = this.currentValue;\n        if (this.formatFn) {\n            formattedValue = this.formatFn(this.value);\n            formattedCurrentValue = this.formatFn(this.currentValue);\n        }\n        if (Array.isArray(this.value)) {\n            formattedValue = this.value.join(', ');\n        }\n        if (Array.isArray(this.currentValue)) {\n            formattedCurrentValue = this.currentValue.join(', ');\n        }\n        return {\n            formattedValue: (formattedValue ? (<span>{formattedValue}</span>) : (<span></span>)),\n            formattedCurrentValue: (formattedCurrentValue ? (<span>{formattedCurrentValue}</span>) : (<span></span>))\n        };\n    }\n}\n"],"mappings":"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"}

package/dist/wcs/p-a24fa4f4.entry.js

@@ -0,0 +1,2 @@
+import{r as i,c as t,h as s,H as n,g as e}from"./p-a2df3a49.js";import{c as a,d as r,e as o,f as h}from"./p-12ac2547.js";const c=["m","l"];function d(i){return c.includes(i)}const u="@keyframes spin-animation-up{0%{transform:translateY(0);transform-origin:center;opacity:1}50%{opacity:0.5}100%{transform:translateY(30px);transform-origin:center;opacity:1}}@keyframes spin-animation-down{0%{transform:translateY(0);transform-origin:center;opacity:1}50%{opacity:0.5}100%{transform:translateY(-30px);transform-origin:center;opacity:1}}:host{box-sizing:border-box;height:var(--wcs-counter-host-height);--wcs-input-icon-color:var(--wcs-text-medium);--wcs-internal-input-border-radius:calc(var(--wcs-border-radius) * 10);--wcs-internal-input-border-width:2px;font-family:var(--wcs-font-sans-serif);font-size:var(--wcs-counter-font-size);font-weight:bold;display:flex;align-items:center;padding:var(--wcs-counter-host-padding);width:fit-content;overflow:hidden;border-radius:var(--wcs-internal-input-border-radius);background-color:var(--wcs-light);border:var(--wcs-internal-input-border-width) solid var(--wcs-light);background-clip:padding-box}:host .counter-container{height:var(--wcs-counter-host-height);display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 calc(2 * var(--wcs-base-margin));position:relative}:host .outliers{position:absolute}:host #outlier-down{top:calc(var(--wcs-counter-host-height) / 2 * -1)}:host #outlier-up{bottom:calc(var(--wcs-counter-host-height) / 2 * -1)}:host span.current-value:focus-visible{outline:2px dashed var(--wcs-primary);outline-offset:4px;border-radius:0.1rem}:host .animate-up{animation:spin-animation-up 0.175s ease-in-out}:host .animate-down{animation:spin-animation-down 0.175s ease-in-out}:host .hidden{opacity:0}:host([size=m]){--wcs-counter-host-padding:4px;--wcs-counter-host-height:var(--wcs-size-m);--wcs-counter-font-size:1rem}:host([size=l]){--wcs-counter-host-padding:8px;--wcs-counter-host-height:var(--wcs-size-l);--wcs-counter-font-size:1.0625rem}";const l=.175;const f=class{constructor(s){i(this,s);this.wcsChange=t(this,"wcsChange",7);this.wcsBlur=t(this,"wcsBlur",7);this.getCounterContainer=()=>Array.from(this.el.shadowRoot.children).find((i=>i.tagName==="DIV"));this.handleDecrement=()=>{if(this.min===undefined||this.currentValue>this.min){this.currentValue-=this.step;this.animate("up")}};this.handleIncrement=()=>{if(this.max===undefined||this.currentValue<this.max){this.currentValue+=this.step;this.animate("down")}};this.animate=i=>{const t=this.getCounterContainer();const s=Array.from(t.children).filter((i=>i.classList.contains("outliers")));t.classList.add("animate-"+i);s.forEach((i=>{i.classList.remove("hidden")}));setTimeout((()=>{t.classList.remove("animate-"+i);s.forEach((i=>{i.classList.add("hidden")}));this.displayedValue=this.currentValue}),1e3*l-20)};this.size="m";this.label=undefined;this.min=undefined;this.max=undefined;this.step=1;this.value=undefined;this.currentValue=undefined;this.displayedValue=undefined}componentWillLoad(){var i,t;this.currentValue=(t=(i=this.value)!==null&&i!==void 0?i:this.min)!==null&&t!==void 0?t:0;this.displayedValue=this.currentValue;if(!d(this.size)){console.error(`Invalid size value for wcs-counter : "${this.size}". Must be one of "${c.join(", ")}"`);this.size="m"}}valueChanged(){var i,t;this.currentValue=(t=(i=this.value)!==null&&i!==void 0?i:this.min)!==null&&t!==void 0?t:0;this.displayedValue=this.currentValue}currentValueChanged(i,t){if(this.max!==undefined&&this.currentValue>this.max){this.currentValue=this.max}else if(this.min!==undefined&&this.currentValue<this.min){this.currentValue=this.min}if(i!==t&&t!==undefined){this.wcsChange.emit({value:this.currentValue})}}onKeyDown(i){if(a(i)){i.preventDefault();this.handleIncrement()}if(r(i)){i.preventDefault();this.handleDecrement()}if(o(i)){i.preventDefault();this.currentValue=this.min;this.displayedValue=this.currentValue}if(h(i)){i.preventDefault();this.currentValue=this.max;this.displayedValue=this.currentValue}}render(){return s(n,null,s("wcs-button",{class:"wcs-primary",shape:"round",size:"s",tabindex:-1,onClick:()=>this.handleDecrement(),onBlur:i=>this.wcsBlur.emit(i),disabled:this.currentValue===this.min},s("wcs-mat-icon",{icon:"remove",size:"s"})),s("div",{class:"counter-container"},s("span",{id:"outlier-down",class:"outliers hidden","aria-hidden":"true"},this.displayedValue-this.step),s("span",{tabindex:"0",role:"spinbutton",class:"current-value",onBlur:i=>this.wcsBlur.emit(i),onKeyDown:i=>this.onKeyDown(i),"aria-valuenow":this.currentValue,"aria-valuetext":this.currentValue,"aria-valuemin":this.min,"aria-valuemax":this.max,"aria-label":this.label},this.displayedValue),s("span",{id:"outlier-up",class:"outliers hidden","aria-hidden":"true"},this.displayedValue+this.step)),s("wcs-button",{class:"wcs-primary",shape:"round",size:"s",tabindex:-1,onClick:()=>this.handleIncrement(),onBlur:i=>this.wcsBlur.emit(i),disabled:this.currentValue===this.max},s("wcs-mat-icon",{icon:"add",size:"s"})))}get el(){return e(this)}static get watchers(){return{value:["valueChanged"],currentValue:["currentValueChanged"]}}};f.style=u;export{f as wcs_counter};
+//# sourceMappingURL=p-a24fa4f4.entry.js.map

package/dist/wcs/p-a24fa4f4.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["WcsCounterSizeValues","isWcsCounterSize","size","includes","counterCss","ANIMATION_DURATION","Counter","this","getCounterContainer","Array","from","el","shadowRoot","children","find","tagName","handleDecrement","min","undefined","currentValue","step","animate","handleIncrement","max","direction","counterContainer","outliers","filter","span","classList","contains","add","forEach","remove","setTimeout","displayedValue","componentWillLoad","_b","_a","value","console","error","join","valueChanged","currentValueChanged","newVal","oldVal","wcsChange","emit","onKeyDown","_event","isKeyup","preventDefault","isKeydown","isHomeKey","isEndKey","render","h","Host","class","shape","tabindex","onClick","onBlur","event","wcsBlur","disabled","icon","id","role","label"],"sources":["./src/components/counter/counter-interface.ts","./src/components/counter/counter.scss?tag=wcs-counter&encapsulation=shadow","./src/components/counter/counter.tsx"],"sourcesContent":["import { WcsSize } from \"../../shared-types\";\n\nexport interface CounterChangeEventDetail {\n    value: number;\n}\n\nexport const WcsCounterSizeValues = ['m', 'l'] as const; // as const keyword is used to infer and preserve the exact literal values of an array or object.\n\nexport type WcsCounterSize = Extract<WcsSize, typeof WcsCounterSizeValues[number]>;\n\nexport function isWcsCounterSize(size: string): size is WcsCounterSize {\n    // @ts-ignore : ignore size type, as it is checked with WcsInputSizeValues\n    return WcsCounterSizeValues.includes(size);\n}\n","@import '../../style/focus-outline.scss';\n\n@keyframes spin-animation-up {\n    0% {\n        transform: translateY(0);\n        transform-origin: center;\n        opacity: 1;\n    }\n    50% {\n        opacity: 0.5;\n    }\n    100% {\n        transform: translateY(30px);\n        transform-origin: center;\n        opacity: 1;\n    }\n}\n\n@keyframes spin-animation-down {\n    0% {\n        transform: translateY(0);\n        transform-origin: center;\n        opacity: 1;\n    }\n    50% {\n        opacity: 0.5;\n    }\n    100% {\n        transform: translateY(-30px);\n        transform-origin: center;\n        opacity: 1;\n    }\n}\n\n:host {\n    box-sizing: border-box;\n    height: var(--wcs-counter-host-height);\n    --wcs-input-icon-color: var(--wcs-text-medium);\n    --wcs-internal-input-border-radius: calc(var(--wcs-border-radius) * 10); // 80 px\n    --wcs-internal-input-border-width: 2px;\n    font-family: var(--wcs-font-sans-serif);\n    font-size: var(--wcs-counter-font-size);\n    font-weight: bold;\n    display: flex;\n    align-items: center;\n    padding: var(--wcs-counter-host-padding);\n    width: fit-content;\n    overflow: hidden;\n    border-radius: var(--wcs-internal-input-border-radius);\n    background-color: var(--wcs-light);\n    border: var(--wcs-internal-input-border-width) solid var(--wcs-light);\n    background-clip: padding-box;\n\n    .counter-container {\n        height: var(--wcs-counter-host-height);\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        margin: 0 calc(2* var(--wcs-base-margin));\n        position: relative;\n    }\n\n    .outliers {\n        position: absolute;\n    }\n\n    #outlier-down {\n        top: calc((var(--wcs-counter-host-height) / 2) * -1);\n    }\n\n    #outlier-up {\n        bottom: calc((var(--wcs-counter-host-height) / 2) * -1);\n    }\n\n    span.current-value {\n        &:focus-visible {\n            @include focus-outline;\n        }\n    }\n\n    .animate-up {\n        animation: spin-animation-up 0.175s ease-in-out;\n    }\n\n    .animate-down {\n        animation: spin-animation-down 0.175s ease-in-out;\n    }\n\n    .hidden {\n        opacity: 0;\n    }\n}\n\n:host([size='m']) { // Default\n    --wcs-counter-host-padding: 4px;\n    --wcs-counter-host-height: var(--wcs-size-m);\n    --wcs-counter-font-size: 1rem;\n}\n\n:host([size='l']) {\n    --wcs-counter-host-padding: 8px;\n    --wcs-counter-host-height: var(--wcs-size-l);\n    --wcs-counter-font-size: 1.0625rem;\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n    State,\n    Watch\n} from '@stencil/core';\nimport { isEndKey, isHomeKey, isKeydown, isKeyup } from '../../utils/helpers';\nimport { CounterChangeEventDetail, isWcsCounterSize, WcsCounterSize, WcsCounterSizeValues } from './counter-interface';\n\nconst ANIMATION_DURATION = 0.175 // seconds\n\n/**\n * Counter component, meant to be used for small range of values (e.g : 0 - 5).<br>\n * For larger or specific ranges, please use [wcs-input (type number)](.?path=/docs/components-input--documentation)\n */\n@Component({\n    tag: 'wcs-counter',\n    styleUrl: 'counter.scss',\n    shadow: true,\n})\nexport class Counter implements ComponentInterface {\n    @Element() private el!: HTMLElement;\n\n    /**\n     * Specify the size (height) of the counter.\n     */\n    @Prop({reflect: true}) size: WcsCounterSize = 'm';\n\n    /**\n     * The label of the counter.<br/>\n     * e.g. Number of passengers, train carriages, railroad tracks...\n     */\n    @Prop({mutable: false}) label!: string;\n\n    /**\n     * The minimum value of the counter.\n     * If the value of the min attribute isn't set, then the element has no minimum value.\n     */\n    @Prop({mutable: true}) min?: number;\n\n    /**\n     * The maximum value of the counter.\n     * If the value of the max attribute isn't set, then the element has no maximum value.\n     */\n    @Prop({mutable: true}) max?: number;\n\n    /**\n     * Defines by how much the counter will be incremented or decremented.\n     */\n    @Prop({mutable: true}) step: number = 1;\n\n    /**\n     * Emitted when the value of the counter has changed.\n     */\n    @Event() wcsChange!: EventEmitter<CounterChangeEventDetail>;\n\n    /**\n     * Allow to change currentValue programmatically\n     */\n    @Prop({mutable: true}) value?: number;\n\n    /**\n     * The current value of the counter.\n     */\n    @State() private currentValue!: number;\n\n    /**\n     * Only for animation and display purpose\n     */\n    @State() private displayedValue: number;\n\n    /**\n     * Emitted when the counter loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    componentWillLoad() {\n        this.currentValue = this.value ?? this.min ?? 0;\n        this.displayedValue = this.currentValue;\n\n        if (!isWcsCounterSize(this.size)) {\n            console.error(`Invalid size value for wcs-counter : \"${this.size}\". Must be one of \"${WcsCounterSizeValues.join(', ')}\"`);\n            this.size = \"m\"; // Default fallback value\n        }\n    }\n\n    /**\n     * Value change programmatically => update currentValue and displayedValue\n     */\n    @Watch('value')\n    valueChanged() {\n        this.currentValue = this.value ?? this.min ?? 0;\n        this.displayedValue = this.currentValue;\n    }\n\n    /**\n     * Current value change => handle event and interval\n     */\n    @Watch('currentValue')\n    currentValueChanged(newVal: any, oldVal: any) {\n        if (this.max !== undefined && this.currentValue > this.max) {\n            this.currentValue = this.max;\n        } else if (this.min !== undefined && this.currentValue < this.min) {\n            this.currentValue = this.min;\n        }\n\n        // Emit event only if value has changed and if it's not at component initialization\n        if (newVal !== oldVal && oldVal !== undefined) {\n            this.wcsChange.emit({\n                value: this.currentValue\n            });\n        }\n    }\n\n    onKeyDown(_event: KeyboardEvent) {\n        if (isKeyup(_event)) {\n            _event.preventDefault();\n            this.handleIncrement()\n        }\n        if (isKeydown(_event)) {\n            _event.preventDefault();\n            this.handleDecrement()\n        }\n        if (isHomeKey(_event)) {\n            _event.preventDefault();\n            this.currentValue = this.min;\n            this.displayedValue = this.currentValue;\n        }\n        if (isEndKey(_event)) {\n            _event.preventDefault();\n            this.currentValue = this.max;\n            this.displayedValue = this.currentValue;\n        }\n    }\n\n    private getCounterContainer = (): HTMLDivElement => {\n        return Array.from(this.el.shadowRoot.children)\n            .find(el => el.tagName === 'DIV') as HTMLDivElement;\n    }\n\n    private handleDecrement = () => {\n        if (this.min === undefined || this.currentValue > this.min) {\n            this.currentValue -= this.step;\n            this.animate('up');\n        }\n    };\n\n    private handleIncrement = () => {\n        if (this.max === undefined || this.currentValue < this.max) {\n            this.currentValue += this.step;\n            this.animate('down');\n        }\n    };\n\n    private animate = (direction: 'up' | 'down') => {\n        const counterContainer = this.getCounterContainer();\n        const outliers = Array.from(counterContainer.children)\n            .filter((span: HTMLSpanElement) => span.classList.contains('outliers'));\n\n        counterContainer.classList.add('animate-' + direction);\n        outliers.forEach((span: HTMLSpanElement) => {\n            span.classList.remove('hidden')\n        });\n        setTimeout(() => {\n            counterContainer.classList.remove('animate-' + direction);\n            outliers.forEach((span: HTMLSpanElement) => {\n                span.classList.add('hidden')\n            });\n            this.displayedValue = this.currentValue;\n        }, 1000 * ANIMATION_DURATION - 20);\n    }\n\n    render() {\n        return (\n            <Host>\n                <wcs-button class=\"wcs-primary\"\n                            shape=\"round\"\n                            size=\"s\"\n                            tabindex={-1}\n                            onClick={() => this.handleDecrement()}\n                            onBlur={(event) => this.wcsBlur.emit(event)}\n                            disabled={this.currentValue === this.min}>\n                    <wcs-mat-icon icon=\"remove\" size=\"s\"></wcs-mat-icon>\n                </wcs-button>\n                <div class=\"counter-container\">\n                    <span id=\"outlier-down\" class=\"outliers hidden\"\n                          aria-hidden=\"true\">{this.displayedValue - this.step}</span>\n                    <span tabindex=\"0\"\n                          role=\"spinbutton\"\n                          class=\"current-value\"\n                          onBlur={(event) => this.wcsBlur.emit(event)}\n                          onKeyDown={(event) => this.onKeyDown(event)}\n                          aria-valuenow={this.currentValue}\n                          aria-valuetext={this.currentValue}\n                          aria-valuemin={this.min}\n                          aria-valuemax={this.max}\n                          aria-label={this.label}>{this.displayedValue}</span>\n                    <span id=\"outlier-up\" class=\"outliers hidden\"\n                          aria-hidden=\"true\">{this.displayedValue + this.step}</span>\n                </div>\n                <wcs-button class=\"wcs-primary\"\n                            shape=\"round\"\n                            size=\"s\"\n                            tabindex={-1}\n                            onClick={() => this.handleIncrement()}\n                            onBlur={(event) => this.wcsBlur.emit(event)}\n                            disabled={this.currentValue === this.max}>\n                    <wcs-mat-icon icon=\"add\" size=\"s\"></wcs-mat-icon>\n                </wcs-button>\n            </Host>\n        );\n    }\n}\n"],"mappings":"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"}

package/dist/wcs/p-a5cd4c07.entry.js

@@ -0,0 +1,2 @@
+import{r as c,c as t,h as s,H as e}from"./p-a2df3a49.js";const o=':host{--wcs-switch-background-color-initial:var(--wcs-text-light);--wcs-switch-background-color-final:var(--wcs-primary);--wcs-switch-bullet-color-initial:var(--wcs-switch-background-color-final);--wcs-switch-bullet-color-final:var(--wcs-switch-background-color-initial);--wcs-switch-text-color:var(--wcs-text-medium);display:flex}:host([disabled]){--wcs-switch-text-color:var(--wcs-text-disabled)}:host([disabled]) .wcs-container{cursor:not-allowed}.wcs-container{position:relative;display:flex;margin-bottom:0}:host input:focus-visible+.wcs-checkmark{outline:2px dashed var(--wcs-primary);outline-offset:4px;border-radius:0.75rem}:host([label-alignment=top]) .wcs-container{align-items:start}:host([label-alignment=center]) .wcs-container{align-items:center}:host([label-alignment=bottom]) .wcs-container{align-items:flex-end}.wcs-container input{position:absolute;opacity:0;height:0;width:0}.text{color:var(--wcs-switch-text-color);margin-left:6px;font-weight:500;line-height:1.375}.wcs-container:not([aria-disabled]) input:checked~.text{--wcs-switch-text-color:var(--wcs-primary)}.wcs-checkmark::before{position:absolute;transition:all 0.15s ease-out}.wcs-checkmark::before{bottom:0.3125rem;left:0.3125rem;width:0.875rem;height:0.875rem;content:"";border-radius:50%;background-color:var(--wcs-switch-bullet-color-initial)}:host([disabled]:not([checked])) .wcs-checkmark::before{background-color:var(--wcs-text-disabled)}:host([disabled]:not([checked])) .wcs-checkmark{background-color:var(--wcs-light)}:host([disabled][checked]) .wcs-checkmark::before{background-color:var(--wcs-white)}:host([disabled][checked]) .wcs-checkmark{background-color:var(--wcs-text-disabled)}.wcs-checkmark{top:0;right:0;bottom:0;left:0;width:3rem;height:1.5rem;border-radius:0.75rem;background-color:var(--wcs-switch-background-color-initial)}.wcs-container:not([aria-disabled]){cursor:pointer}.wcs-container:hover:not([aria-disabled]){--wcs-switch-text-color:var(--wcs-primary)}input:not([disabled]):checked+.wcs-checkmark::before,.wcs-container:hover input:not([disabled])+.wcs-checkmark::before,.wcs-container:focus input:not([disabled])+.wcs-checkmark::before{background-color:var(--wcs-switch-bullet-color-final)}input:checked+.wcs-checkmark::before{transform:translateX(24px)}input:not([disabled]):checked+.wcs-checkmark,.wcs-container:hover input:not([disabled])+.wcs-checkmark,.wcs-container:focus input:not([disabled])+.wcs-checkmark{background-color:var(--wcs-switch-background-color-final)}';const i=class{constructor(s){c(this,s);this.wcsChange=t(this,"wcsChange",7);this.switchId=`wcs-switch-${r++}`;this.name=this.switchId;this.checked=false;this.labelAlignment="center";this.disabled=false}toggleChange(c){this.checked=!this.checked;this.wcsChange.emit({checked:this.checked})}render(){return s(e,null,s("label",{htmlFor:this.name,class:"wcs-container","aria-disabled":this.disabled},s("input",{onChange:c=>this.toggleChange(c),checked:this.checked,class:"wcs-switch",type:"checkbox",name:this.name,disabled:this.disabled,id:this.name}),s("span",{class:"wcs-checkmark"}),s("span",{class:"text"},s("slot",null))))}};let r=0;i.style=o;export{i as wcs_switch};
+//# sourceMappingURL=p-a5cd4c07.entry.js.map

package/dist/wcs/{p-8bb19e58.entry.js.map → p-a5cd4c07.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["switchCss","Switch","this","switchId","switchIds","toggleChange","_event","checked","wcsChange","emit","render","h","Host","htmlFor","name","class","disabled","onChange","evt","type","id"],"sources":["./src/components/switch/switch.scss?tag=wcs-switch&encapsulation=shadow","./src/components/switch/switch.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    --wcs-switch-background-color-initial: var(--wcs-text-light);\n    --wcs-switch-background-color-final: var(--wcs-primary);\n\n    --wcs-switch-bullet-color-initial: var(--wcs-switch-background-color-final);\n    --wcs-switch-bullet-color-final: var(--wcs-switch-background-color-initial);\n\n    --wcs-switch-text-color: var(--wcs-text-medium);\n\n    display: flex;\n}\n\n:host([disabled]) {\n    --wcs-switch-text-color: var(--wcs-text-disabled);\n\n    .wcs-container {\n        cursor: not-allowed;\n    }\n}\n\n/* Customize the label (the wcs-container) */\n.wcs-container {\n    position: relative;\n    display: flex;\n    margin-bottom: 0;\n}\n\n:host {\n    input:focus-visible + .wcs-checkmark {\n        @include focus-outline($border-radius: 0.75rem);\n    }\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 switch */\n.wcs-container input {\n    position: absolute;\n    opacity: 0;\n    height: 0;\n    width: 0;\n}\n\n.text {\n    color: var(--wcs-switch-text-color);\n    margin-left: 6px;\n    font-weight: 500;\n    line-height: 1.375;\n}\n\n.wcs-container:not([aria-disabled]) input:checked ~ .text {\n    --wcs-switch-text-color: var(--wcs-primary);\n}\n\n.wcs-checkmark::before {\n    position: absolute;\n    transition: all .15s ease-out;\n}\n\n.wcs-checkmark::before {\n    bottom: 0.3125rem;\n    left: 0.3125rem;\n    width: 0.875rem;\n    height: 0.875rem;\n    content: \"\";\n    border-radius: 50%;\n    background-color: var(--wcs-switch-bullet-color-initial);\n}\n\n:host([disabled]:not([checked])) {\n    .wcs-checkmark::before {\n        background-color: var(--wcs-text-disabled);\n    }\n\n    .wcs-checkmark {\n        background-color: var(--wcs-light);\n    }\n}\n\n:host([disabled][checked]) {\n    .wcs-checkmark::before {\n        background-color: var(--wcs-white);\n    }\n\n    .wcs-checkmark {\n        background-color: var(--wcs-text-disabled);\n    }\n}\n\n.wcs-checkmark {\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    width: 3rem;\n    height: 1.5rem;\n    border-radius: 0.75rem;\n    background-color: var(--wcs-switch-background-color-initial);\n}\n\n.wcs-container:not([aria-disabled]) {\n    cursor: pointer;\n}\n\n.wcs-container:hover:not([aria-disabled]) {\n    --wcs-switch-text-color: var(--wcs-primary);\n}\n\n/* When the switch is checked, change the bullet to grey */\ninput:not([disabled]):checked + .wcs-checkmark::before,\n.wcs-container:hover input:not([disabled]) + .wcs-checkmark::before,\n.wcs-container:focus input:not([disabled]) + .wcs-checkmark::before {\n    background-color: var(--wcs-switch-bullet-color-final);\n}\n\n/* Switch transition */\ninput:checked + .wcs-checkmark::before {\n    transform: translateX(24px);\n}\n\n/* When the switch is checked, change background to blue */\ninput:not([disabled]):checked + .wcs-checkmark,\n.wcs-container:hover input:not([disabled]) + .wcs-checkmark,\n.wcs-container:focus input:not([disabled]) + .wcs-checkmark {\n    background-color: var(--wcs-switch-background-color-final);\n}\n","import { Component, ComponentInterface, Element, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { SwitchChangeEventDetail, SwitchLabelAlignment } from './switch-interface';\n\n@Component({\n    tag: 'wcs-switch',\n    styleUrl: 'switch.scss',\n    shadow: true\n})\nexport class Switch implements ComponentInterface {\n    private switchId = `wcs-switch-${switchIds++}`;\n\n    @Element() el: HTMLElement;\n\n    @Prop() name = this.switchId;\n\n    /**\n     * If `true`, the switch is selected.\n     */\n    @Prop({reflect: true}) checked = false;\n\n    /**\n     * Emitted when the checked property has changed.\n     */\n    @Event() wcsChange!: EventEmitter<SwitchChangeEventDetail>;\n\n    /**\n     * Specifie the alignment of the switch with the label content\n     */\n    @Prop({reflect: true}) labelAlignment: SwitchLabelAlignment = 'center';\n\n    /**\n     * Specify wether the switch is disabled or not.\n     */\n    @Prop() disabled: boolean = false;\n\n    toggleChange(_event: Event) {\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.toggleChange(evt)}\n                           checked={this.checked}\n                           class=\"wcs-switch\"\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 switchIds = 0;\n"],"mappings":"gEAAA,MAAMA,EAAY,u7E,MCQLC,EAAM,M,8DACPC,KAAAC,SAAW,cAAcC,M,UAIlBF,KAAKC,S,aAKa,M,oBAU6B,S,cAKlC,K,CAE5BE,aAAaC,GACTJ,KAAKK,SAAWL,KAAKK,QACrBL,KAAKM,UAAUC,KAAK,CAChBF,QAASL,KAAKK,S,CAItBG,SACI,OACIC,EAACC,EAAI,KACDD,EAAA,SAAOE,QAASX,KAAKY,KAAMC,MAAM,gBAAe,gBAAgBb,KAAKc,UACjEL,EAAA,SAAOM,SAAWC,GAAQhB,KAAKG,aAAaa,GACrCX,QAASL,KAAKK,QACdQ,MAAM,aACNI,KAAK,WACLL,KAAMZ,KAAKY,KACXE,SAAUd,KAAKc,SACfI,GAAIlB,KAAKY,OAEhBH,EAAA,QAAMI,MAAM,kBACZJ,EAAA,QAAMI,MAAM,QACRJ,EAAA,e,2BAQxB,IAAIP,EAAY,E"}
+{"version":3,"names":["switchCss","Switch","this","switchId","switchIds","toggleChange","_event","checked","wcsChange","emit","render","h","Host","htmlFor","name","class","disabled","onChange","evt","type","id"],"sources":["./src/components/switch/switch.scss?tag=wcs-switch&encapsulation=shadow","./src/components/switch/switch.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    --wcs-switch-background-color-initial: var(--wcs-text-light);\n    --wcs-switch-background-color-final: var(--wcs-primary);\n\n    --wcs-switch-bullet-color-initial: var(--wcs-switch-background-color-final);\n    --wcs-switch-bullet-color-final: var(--wcs-switch-background-color-initial);\n\n    --wcs-switch-text-color: var(--wcs-text-medium);\n\n    display: flex;\n}\n\n:host([disabled]) {\n    --wcs-switch-text-color: var(--wcs-text-disabled);\n\n    .wcs-container {\n        cursor: not-allowed;\n    }\n}\n\n/* Customize the label (the wcs-container) */\n.wcs-container {\n    position: relative;\n    display: flex;\n    margin-bottom: 0;\n}\n\n:host {\n    input:focus-visible + .wcs-checkmark {\n        @include focus-outline($border-radius: 0.75rem);\n    }\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 switch */\n.wcs-container input {\n    position: absolute;\n    opacity: 0;\n    height: 0;\n    width: 0;\n}\n\n.text {\n    color: var(--wcs-switch-text-color);\n    margin-left: 6px;\n    font-weight: 500;\n    line-height: 1.375;\n}\n\n.wcs-container:not([aria-disabled]) input:checked ~ .text {\n    --wcs-switch-text-color: var(--wcs-primary);\n}\n\n.wcs-checkmark::before {\n    position: absolute;\n    transition: all .15s ease-out;\n}\n\n.wcs-checkmark::before {\n    bottom: 0.3125rem;\n    left: 0.3125rem;\n    width: 0.875rem;\n    height: 0.875rem;\n    content: \"\";\n    border-radius: 50%;\n    background-color: var(--wcs-switch-bullet-color-initial);\n}\n\n:host([disabled]:not([checked])) {\n    .wcs-checkmark::before {\n        background-color: var(--wcs-text-disabled);\n    }\n\n    .wcs-checkmark {\n        background-color: var(--wcs-light);\n    }\n}\n\n:host([disabled][checked]) {\n    .wcs-checkmark::before {\n        background-color: var(--wcs-white);\n    }\n\n    .wcs-checkmark {\n        background-color: var(--wcs-text-disabled);\n    }\n}\n\n.wcs-checkmark {\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    width: 3rem;\n    height: 1.5rem;\n    border-radius: 0.75rem;\n    background-color: var(--wcs-switch-background-color-initial);\n}\n\n.wcs-container:not([aria-disabled]) {\n    cursor: pointer;\n}\n\n.wcs-container:hover:not([aria-disabled]) {\n    --wcs-switch-text-color: var(--wcs-primary);\n}\n\n/* When the switch is checked, change the bullet to grey */\ninput:not([disabled]):checked + .wcs-checkmark::before,\n.wcs-container:hover input:not([disabled]) + .wcs-checkmark::before,\n.wcs-container:focus input:not([disabled]) + .wcs-checkmark::before {\n    background-color: var(--wcs-switch-bullet-color-final);\n}\n\n/* Switch transition */\ninput:checked + .wcs-checkmark::before {\n    transform: translateX(24px);\n}\n\n/* When the switch is checked, change background to blue */\ninput:not([disabled]):checked + .wcs-checkmark,\n.wcs-container:hover input:not([disabled]) + .wcs-checkmark,\n.wcs-container:focus input:not([disabled]) + .wcs-checkmark {\n    background-color: var(--wcs-switch-background-color-final);\n}\n","import { Component, ComponentInterface, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { SwitchChangeEventDetail, SwitchLabelAlignment } from './switch-interface';\n\n@Component({\n    tag: 'wcs-switch',\n    styleUrl: 'switch.scss',\n    shadow: true\n})\nexport class Switch implements ComponentInterface {\n    private switchId = `wcs-switch-${switchIds++}`;\n\n    @Prop() name = this.switchId;\n\n    /**\n     * If `true`, the switch is selected.\n     */\n    @Prop({reflect: true}) checked = false;\n\n    /**\n     * Emitted when the checked property has changed.\n     */\n    @Event() wcsChange!: EventEmitter<SwitchChangeEventDetail>;\n\n    /**\n     * Specifie the alignment of the switch with the label content\n     */\n    @Prop({reflect: true}) labelAlignment: SwitchLabelAlignment = 'center';\n\n    /**\n     * Specify wether the switch is disabled or not.\n     */\n    @Prop() disabled: boolean = false;\n\n    toggleChange(_event: Event) {\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.toggleChange(evt)}\n                           checked={this.checked}\n                           class=\"wcs-switch\"\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 switchIds = 0;\n"],"mappings":"yDAAA,MAAMA,EAAY,u7E,MCQLC,EAAM,M,8DACPC,KAAAC,SAAW,cAAcC,M,UAElBF,KAAKC,S,aAKa,M,oBAU6B,S,cAKlC,K,CAE5BE,aAAaC,GACTJ,KAAKK,SAAWL,KAAKK,QACrBL,KAAKM,UAAUC,KAAK,CAChBF,QAASL,KAAKK,S,CAItBG,SACI,OACIC,EAACC,EAAI,KACDD,EAAA,SAAOE,QAASX,KAAKY,KAAMC,MAAM,gBAAe,gBAAgBb,KAAKc,UACjEL,EAAA,SAAOM,SAAWC,GAAQhB,KAAKG,aAAaa,GACrCX,QAASL,KAAKK,QACdQ,MAAM,aACNI,KAAK,WACLL,KAAMZ,KAAKY,KACXE,SAAUd,KAAKc,SACfI,GAAIlB,KAAKY,OAEhBH,EAAA,QAAMI,MAAM,kBACZJ,EAAA,QAAMI,MAAM,QACRJ,EAAA,e,GAQxB,IAAIP,EAAY,E"}

package/dist/wcs/p-b229a91c.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as r,g as t}from"./p-a2df3a49.js";import{w as i}from"./p-12ac2547.js";import{M as o}from"./p-04ad2b73.js";const a=["s","m","l"];function n(e){return a.includes(e)}const c='@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 s=class{constructor(r){e(this,r);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}onClick(e){if(this.disabled||this.loading){e.stopImmediatePropagation()}if(this.type!=="button"&&i(this.el)){const r=this.el.closest("form");if(r){e.preventDefault();const t=window.document.createElement("button");t.type=this.type;t.style.display="none";r.appendChild(t);t.click();t.remove()}}}componentWillLoad(){if(!n(this.size)){console.error(`Invalid size value for wcs-button : "${this.size}". Must be one of "${a.join(", ")}"`);this.size="m"}}componentDidLoad(){this.mdcRipple=new o(this.el.shadowRoot.querySelector(".wcs-inner-button"))}enabledRippleEffect(){this.mdcRipple.disabled=false}disabledRippleEffect(){this.mdcRipple.disabled=true}getTagName(){return this.href!==undefined?"a":"button"}onRippleChange(){if(this.ripple){this.enabledRippleEffect()}else{this.disabledRippleEffect()}}render(){const e=this.getTagName();const t=this.href!==undefined?{href:this.href,role:"button",target:this.target}:{type:this.type};return r(e,Object.assign({},t,{class:"wcs-inner-button",disabled:this.disabled||this.loading}),this.loading&&r("wcs-spinner",null),r("slot",null))}static get delegatesFocus(){return true}get el(){return t(this)}static get watchers(){return{ripple:["onRippleChange"]}}};s.style=c;export{s as wcs_button};
+//# sourceMappingURL=p-b229a91c.entry.js.map

package/dist/wcs/p-b229a91c.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["WcsButtonSizeValues","isWcsButtonSize","size","includes","buttonCss","Button","onClick","ev","this","disabled","loading","stopImmediatePropagation","type","hasShadowDom","el","form","closest","preventDefault","fakeButton","window","document","createElement","style","display","appendChild","click","remove","componentWillLoad","console","error","join","componentDidLoad","mdcRipple","MDCRipple","shadowRoot","querySelector","enabledRippleEffect","disabledRippleEffect","getTagName","href","undefined","onRippleChange","ripple","render","TagType","attrs","role","target","h","Object","assign","class"],"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"],"mappings":"0HAQO,MAAMA,EAAsB,CAAC,IAAK,IAAK,K,SAI9BC,EAAgBC,GAE5B,OAAOF,EAAoBG,SAASD,EACxC,CCfA,MAAME,EAAY,g/T,MCwBLC,EAAM,M,mCAMgC,S,wDAiBX,M,YAKnB,K,UAM8B,I,WAKE,S,UAKF,Q,aAKL,K,CAG1CC,QAAQC,GACJ,GAAIC,KAAKC,UAAYD,KAAKE,QAAS,CAC/BH,EAAGI,0B,CAEP,GAAIH,KAAKI,OAAS,UAAYC,EAAaL,KAAKM,IAAK,CAIjD,MAAMC,EAAOP,KAAKM,GAAGE,QAAQ,QAC7B,GAAID,EAAM,CACNR,EAAGU,iBAEH,MAAMC,EAAaC,OAAOC,SAASC,cAAc,UACjDH,EAAWN,KAAOJ,KAAKI,KACvBM,EAAWI,MAAMC,QAAU,OAC3BR,EAAKS,YAAYN,GACjBA,EAAWO,QACXP,EAAWQ,Q,GAKvBC,oBACI,IAAK1B,EAAgBO,KAAKN,MAAO,CAC7B0B,QAAQC,MAAM,wCAAwCrB,KAAKN,0BAA0BF,EAAoB8B,KAAK,UAC9GtB,KAAKN,KAAO,G,EAIpB6B,mBACIvB,KAAKwB,UAAY,IAAIC,EAAUzB,KAAKM,GAAGoB,WAAWC,cAAc,qB,CAG5DC,sBACJ5B,KAAKwB,UAAUvB,SAAW,K,CAGtB4B,uBACJ7B,KAAKwB,UAAUvB,SAAW,I,CAGtB6B,aACJ,OAAO9B,KAAK+B,OAASC,UAAY,IAAM,Q,CAI3CC,iBACI,GAAIjC,KAAKkC,OAAQ,CACblC,KAAK4B,qB,KACF,CACH5B,KAAK6B,sB,EAIbM,SACI,MAAMC,EAAUpC,KAAK8B,aACrB,MAAMO,EAAQrC,KAAK+B,OAASC,UACtB,CAAED,KAAM/B,KAAK+B,KAAMO,KAAM,SAAUC,OAAQvC,KAAKuC,QAChD,CAAEnC,KAAMJ,KAAKI,MACnB,OACIoC,EAACJ,EAAOK,OAAAC,OAAA,GACAL,EAAK,CACTM,MAAM,mBACN1C,SAAYD,KAAKC,UAAYD,KAAKE,UAG9BF,KAAKE,SAAWsC,EAAA,oBAEpBA,EAAA,a"}

package/dist/wcs/{p-d998e112.entry.js → p-b6cd196d.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as e,h as s,H as o,g as i}from"./p-a2df3a49.js";import{b as n,i as a,a as r}from"./p-dc57a5f7.js";import{r as d}from"./p-1a170e8d.js";const l=':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}}';const c="WCS-COM-NAV-CATEGORY";const h=class{constructor(s){t(this,s);this.wcsSubmenuOpened=e(this,"wcsSubmenuOpened",7);this.wcsClickOnFinalAction=e(this,"wcsClickOnFinalAction",7);this.label=undefined;this.panelTitle=undefined;this.panelDescription=undefined;this.menuOpen=false}componentWillLoad(){const t=this.el.querySelectorAll(":scope > wcs-com-nav-category:not([slot])");d(t,c)}onWindowClickEvent(t){if(this.menuOpen)this.menuOpen=false}onSubmenuOpened(t){if(t.detail.menuElement!==this.el){this.menuOpen=false}}onEscapeKeyDown(t){if(n(t)&&this.menuOpen){this.menuOpen=false}}async close(){this.menuOpen=false}async open(){this.menuOpen=true}onClick(t){t.stopPropagation();this.wcsSubmenuOpened.emit({menuElement:this.el})}handleMenuItemsKeyDown(t){if(a(t)||r(t)){this.handleMenuItemsClick(t)}}handleMenuKeyDown(t){if(a(t)||r(t)){this.menuOpen=!this.menuOpen}}handleMenuItemsClick(t){if(t.target.tagName==="A"){this.close();this.wcsClickOnFinalAction.emit()}}wcsCategoryItemClickedHandler(t){this.close()}render(){return s(o,{onClick:t=>this.onClick(t)},s("div",{tabindex:screen.width<576?"-1":"0",onClick:t=>this.menuOpen=!this.menuOpen,onKeyDown:t=>this.handleMenuKeyDown(t),class:"menu-button"},s("span",{class:"label"},this.label),s("span",{class:"arrow-container"},s("span",{class:"arrow-icon","data-open":this.menuOpen},""))),s("div",{class:"drawer","data-open":this.menuOpen,tabIndex:-1},s("div",{class:"drawer-container"},s("div",{class:"drawer-content"},s("div",{class:"drawer-description"},s("h3",null,this.panelTitle),s("p",null,this.panelDescription)),s("div",{class:"menu-items",onClick:t=>this.handleMenuItemsClick(t),onKeyDown:t=>this.handleMenuItemsKeyDown(t)},s("slot",null))))))}get el(){return i(this)}};h.style=l;export{h as wcs_com_nav_submenu};
-//# sourceMappingURL=p-d998e112.entry.js.map
+import{r as t,c as e,h as s,H as o,g as i}from"./p-a2df3a49.js";import{b as n,i as a,a as r}from"./p-12ac2547.js";import{r as d}from"./p-1a170e8d.js";const l=':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}}';const c="WCS-COM-NAV-CATEGORY";const h=class{constructor(s){t(this,s);this.wcsSubmenuOpened=e(this,"wcsSubmenuOpened",7);this.wcsClickOnFinalAction=e(this,"wcsClickOnFinalAction",7);this.label=undefined;this.panelTitle=undefined;this.panelDescription=undefined;this.menuOpen=false}componentWillLoad(){const t=this.el.querySelectorAll(":scope > wcs-com-nav-category:not([slot])");d(t,c)}onWindowClickEvent(t){if(this.menuOpen)this.menuOpen=false}onSubmenuOpened(t){if(t.detail.menuElement!==this.el){this.menuOpen=false}}onEscapeKeyDown(t){if(n(t)&&this.menuOpen){this.menuOpen=false}}async close(){this.menuOpen=false}async open(){this.menuOpen=true}onClick(t){t.stopPropagation();this.wcsSubmenuOpened.emit({menuElement:this.el})}handleMenuItemsKeyDown(t){if(a(t)||r(t)){this.handleMenuItemsClick(t)}}handleMenuKeyDown(t){if(a(t)||r(t)){this.menuOpen=!this.menuOpen}}handleMenuItemsClick(t){if(t.target.tagName==="A"){this.close();this.wcsClickOnFinalAction.emit()}}wcsCategoryItemClickedHandler(t){this.close()}render(){return s(o,{onClick:t=>this.onClick(t)},s("div",{tabindex:screen.width<576?"-1":"0",onClick:t=>this.menuOpen=!this.menuOpen,onKeyDown:t=>this.handleMenuKeyDown(t),class:"menu-button"},s("span",{class:"label"},this.label),s("span",{class:"arrow-container"},s("span",{class:"arrow-icon","data-open":this.menuOpen},""))),s("div",{class:"drawer","data-open":this.menuOpen,tabIndex:-1},s("div",{class:"drawer-container"},s("div",{class:"drawer-content"},s("div",{class:"drawer-description"},s("h3",null,this.panelTitle),s("p",null,this.panelDescription)),s("div",{class:"menu-items",onClick:t=>this.handleMenuItemsClick(t),onKeyDown:t=>this.handleMenuItemsKeyDown(t)},s("slot",null))))))}get el(){return i(this)}};h.style=l;export{h as wcs_com_nav_submenu};
+//# sourceMappingURL=p-b6cd196d.entry.js.map