wcs-core 7.1.0 → 7.2.0

package/dist/wcs/{p-dd60a6db.entry.js.map → p-b0a6eec6.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["switchCss","WcsSwitchStyle0","SWITCH_INHERITED_ATTRS","Switch","this","switchId","switchIds","inheritedAttributes","handleChange","ev","stopImmediatePropagation","preventDefault","toggleSwitchState","handleHostClick","e","stopPropagation","handleInputClick","detail","disabled","checked","wcsChange","emit","handleFocus","event","wcsFocus","handleBlur","wcsBlur","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","setAriaAttribute","attr","value","setOrRemoveAttribute","nativeInput","getLabel","getSlottedContentText","render","h","Host","key","htmlFor","name","class","onBlur","bind","onChange","onClick","onFocus","id","type","ref"],"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-semantic-color-background-control-indicator-default);\n    --wcs-switch-background-color-final: var(--wcs-semantic-color-background-control-indicator-selected);\n    --wcs-switch-background-color-disabled: var(--wcs-semantic-color-background-control-indicator-disabled);\n    --wcs-switch-background-color-disabled-selected: var(--wcs-semantic-color-background-control-indicator-disabled);\n    --wcs-switch-background-color-hover-selected: var(--wcs-semantic-color-background-control-indicator-hover);\n\n    --wcs-switch-padding-horizontal: var(--wcs-semantic-spacing-small);\n    --wcs-switch-padding-vertical: calc((var(--wcs-switch-height) - var(--wcs-switch-dot-size)) / 2); // to center the dot vertically, at the middle of the dot\n\n    // TODO : Les variables figma sont bindées sur les primitives\n    --wcs-switch-dot-color-default: var(--wcs-semantic-color-foreground-brand); // the dot color when the switch is not checked\n    --wcs-switch-dot-color-selected: var(--wcs-semantic-color-foreground-control-indicator-selected); // the dot color when the switch is checked\n    --wcs-switch-dot-color-disabled: var(--wcs-semantic-color-foreground-control-indicator-disabled);\n\n    --wcs-switch-text-color-default: var(--wcs-semantic-color-text-secondary);\n    --wcs-switch-text-color-selected: var(--wcs-semantic-color-text-primary);\n    --wcs-switch-text-color-disabled: var(--wcs-semantic-color-text-disabled);\n\n    --wcs-switch-text-font-weight-default: var(--wcs-semantic-font-weight-medium);\n    --wcs-switch-text-font-weight-selected: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-switch-outline-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n    --wcs-switch-dot-translate-x: calc(var(--wcs-switch-width) - var(--wcs-switch-dot-size) - (2 * var(--wcs-switch-padding-horizontal)));\n    --wcs-switch-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    --wcs-switch-dot-size: 0.875rem; /* 14px */\n\n    --wcs-switch-height: var(--wcs-semantic-size-xs);\n    --wcs-switch-width: var(--wcs-semantic-size-l);\n\n    --wcs-switch-border-radius: var(--wcs-semantic-border-radius-full);\n\n    --wcs-switch-gap: var(--wcs-semantic-spacing-base);\n\n    display: inline-flex;\n}\n\n:host([disabled]) {\n    .text {\n        color: var(--wcs-switch-text-color-disabled);\n    }\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    user-select: none;\n    margin-bottom: 0;\n\n    gap: var(--wcs-switch-gap);\n}\n\n.wcs-container:has(input:focus-visible) {\n    @include focus-outline($outline-color: var(--wcs-switch-outline-color-focus), $border-radius: var(--wcs-switch-border-radius));\n}\n\n/* If the selector focus-visible is not supported by the browser, use focus-within instead */\n@supports not selector(.wcs-container:has(input:focus-visible)){\n    .wcs-container:focus-within {\n        @include focus-outline($outline-color: var(--wcs-switch-outline-color-focus), $border-radius: var(--wcs-switch-border-radius));\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-default);\n\n    font-weight: var(--wcs-switch-text-font-weight-default);\n    line-height: 1.375;\n}\n\n.wcs-container:not([aria-disabled]) input:checked ~ .text {\n    font-weight: var(--wcs-switch-text-font-weight-selected);\n    color: var(--wcs-switch-text-color-selected);\n}\n\n.wcs-checkmark::before {\n    position: absolute;\n    transition: all var(--wcs-switch-transition-duration) ease-out;\n}\n\n.wcs-checkmark::before {\n    bottom: var(--wcs-switch-padding-vertical);\n    left: var(--wcs-switch-padding-horizontal);\n    width: var(--wcs-switch-dot-size);\n    height: var(--wcs-switch-dot-size);\n    content: \"\";\n    border-radius: 50%;\n    background-color: var(--wcs-switch-dot-color-default);\n}\n\n:host([disabled]:not([checked])) {\n    .wcs-checkmark::before {\n        background-color: var(--wcs-switch-dot-color-disabled);\n    }\n\n    .wcs-checkmark {\n        background-color: var(--wcs-switch-background-color-disabled);\n    }\n}\n\n:host([disabled][checked]) {\n    .wcs-checkmark {\n        background-color: var(--wcs-switch-background-color-disabled-selected);\n    }\n}\n\n:host([disabled]) {\n    .text {\n        color: var(--wcs-switch-text-color-disabled);\n    }\n}\n\n.wcs-checkmark {\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    width: var(--wcs-switch-width);\n    height: var(--wcs-switch-height);\n    border-radius: var(--wcs-switch-border-radius);\n    background-color: var(--wcs-switch-background-color-initial);\n\n    min-width: 3rem;\n    position: relative;\n}\n\n.wcs-container:not([aria-disabled]) {\n    cursor: pointer;\n}\n\n/* When the switch is checked, change the dot to white */\ninput:not([disabled]):checked + .wcs-checkmark::before,\n.wcs-container:focus input:not([disabled]) + .wcs-checkmark::before {\n    background-color: var(--wcs-switch-dot-color-selected);\n}\n\n/* Switch transition */\ninput:checked + .wcs-checkmark::before {\n    transform: translateX(var(--wcs-switch-dot-translate-x));\n}\n\n/* When the switch is checked, change background */\ninput:not([disabled]):checked + .wcs-checkmark {\n    background-color: var(--wcs-switch-background-color-final);\n}\n\n/* When the switch is checked and hover, change background */\n.wcs-container:hover input:not([disabled]):checked + .wcs-checkmark {\n    background-color: var(--wcs-switch-background-color-hover-selected);\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen,\n    Method,\n    Prop\n} from '@stencil/core';\nimport { SwitchChangeEventDetail, SwitchLabelAlignment } from './switch-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { ControlComponentWithLabel, getSlottedContentText } from \"../../utils/control-component-interface\";\n\nconst SWITCH_INHERITED_ATTRS = ['tabindex'];\n\n/**\n * The switch component is a control used to switch between on and off state.\n * \n * @cssprop --wcs-switch-outline-color-focus - Color of the focus outline\n * \n * @cssprop --wcs-switch-text-color-default - Color of the text when the switch is not selected\n * @cssprop --wcs-switch-text-color-selected - Color of the text when the switch is selected\n * @cssprop --wcs-switch-text-color-disabled - Color of the text when the switch is disabled\n\n * \n * @cssprop --wcs-switch-background-color-initial - Background color of the switch when not selected\n * @cssprop --wcs-switch-background-color-final - Background color of the switch when selected\n * @cssprop --wcs-switch-background-color-disabled - Background color of the switch when disabled\n * @cssprop --wcs-switch-background-color-disabled-selected - Background color of the switch when disabled and selected\n * @cssprop --wcs-switch-background-color-hover-selected - Background color of the switch when hovered and selected\n * \n * @cssprop --wcs-switch-height - Height of the switch\n * @cssprop --wcs-switch-width - Width of the switch\n * @cssprop --wcs-switch-border-radius - Border radius of the switch\n * @cssprop --wcs-switch-padding-horizontal - Horizontal padding of the switch\n * @cssprop --wcs-switch-padding-vertical - Vertical padding of the switch\n * \n * @cssprop --wcs-switch-dot-color-default - Color of the dot when not selected\n * @cssprop --wcs-switch-dot-color-selected - Color of the dot when selected\n * @cssprop --wcs-switch-dot-color-disabled - Color of the dot when disabled\n * \n * @cssprop --wcs-switch-dot-translate-x - Horizontal translation of the dot (from left to right = right to left)\n * @cssprop --wcs-switch-dot-size - Size of the dot\n * \n * @cssprop --wcs-switch-gap - Gap between the switch and the text\n */\n@Component({\n    tag: 'wcs-switch',\n    styleUrl: 'switch.scss',\n    shadow: {\n        delegatesFocus: true,\n    }\n})\nexport class Switch implements ComponentInterface, MutableAriaAttribute, ControlComponentWithLabel {\n    @Element() private el!: HTMLElement;\n    private switchId = `wcs-switch-${switchIds++}`;\n    private nativeInput!: HTMLInputElement;\n    private inheritedAttributes: { [k: string]: any } = {};\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     * Specifie the alignment of the switch with the label content\n     */\n    @Prop({reflect: true}) labelAlignment: SwitchLabelAlignment = 'center';\n\n    /**\n     * Specify whether the switch is disabled or not.\n     */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /**\n     * Emitted when the checked property has changed.\n     */\n    @Event() wcsChange!: EventEmitter<SwitchChangeEventDetail>;\n\n    /**\n     * Emitted when the switch has focus.\n     */\n    @Event() wcsFocus!: EventEmitter<FocusEvent>;\n    \n    /**\n     * Emitted when the switch loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    \n    handleChange(ev: Event) {\n        ev.stopImmediatePropagation();\n        ev.preventDefault();\n        this.toggleSwitchState();\n    }\n\n    @Listen('click')\n    async handleHostClick(e: Event){\n        e.preventDefault();\n        e.stopPropagation();\n\n        this.toggleSwitchState();\n    }\n\n    handleInputClick(ev: PointerEvent) {\n        // If the click event is coming from the mouse we ignore it.\n        // We only want to handle the keyboard interactions as it is the only purpose of this native input\n        if (ev.detail) {\n            ev.stopImmediatePropagation()\n            ev.preventDefault();\n        }\n    }\n\n    toggleSwitchState() {\n        if (this.disabled) return;\n        \n        this.checked = !this.checked;\n        this.wcsChange.emit({\n            checked: this.checked,\n        });\n    }\n\n    handleFocus(event: FocusEvent) {\n        this.wcsFocus.emit(event);\n    }\n\n    handleBlur(event: FocusEvent) {\n        this.wcsBlur.emit(event);\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, SWITCH_INHERITED_ATTRS),\n        };\n    }\n    \n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeInput, attr, value);\n    }\n\n    @Method()\n    async getLabel(): Promise<string> {\n        return getSlottedContentText(this.el);\n    }\n    \n    render() {\n        return (\n            <Host>\n                <label htmlFor={this.name} class=\"wcs-container\" aria-disabled={this.disabled}>\n                    <input onBlur={this.handleBlur.bind(this)}\n                           onChange={this.handleChange.bind(this)}\n                           onClick={this.handleInputClick.bind(this)}\n                           onFocus={this.handleFocus.bind(this)}\n                           checked={this.checked}\n                           id={this.name}\n                           class=\"wcs-switch\"\n                           type=\"checkbox\"\n                           name={this.name}\n                           disabled={this.disabled}\n                           ref={el => {this.nativeInput = el}}\n                           {...this.inheritedAttributes}>\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":"iJAAA,MAAMA,EAAY,2mJAClB,MAAAC,EAAeD,ECgBf,MAAME,EAAyB,CAAC,Y,MAwCnBC,EAAM,M,kIAEPC,KAAAC,SAAW,cAAcC,MAEzBF,KAAAG,oBAA4C,G,UAErCH,KAAKC,S,aAKa,M,oBAK6B,S,cAKjB,K,CAkB7C,YAAAG,CAAaC,GACTA,EAAGC,2BACHD,EAAGE,iBACHP,KAAKQ,mB,CAIT,qBAAMC,CAAgBC,GAClBA,EAAEH,iBACFG,EAAEC,kBAEFX,KAAKQ,mB,CAGT,gBAAAI,CAAiBP,GAGb,GAAIA,EAAGQ,OAAQ,CACXR,EAAGC,2BACHD,EAAGE,gB,EAIX,iBAAAC,GACI,GAAIR,KAAKc,SAAU,OAEnBd,KAAKe,SAAWf,KAAKe,QACrBf,KAAKgB,UAAUC,KAAK,CAChBF,QAASf,KAAKe,S,CAItB,WAAAG,CAAYC,GACRnB,KAAKoB,SAASH,KAAKE,E,CAGvB,UAAAE,CAAWF,GACPnB,KAAKsB,QAAQL,KAAKE,E,CAGtB,iBAAAI,GACIvB,KAAKG,oBAAmBqB,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsB1B,KAAK2B,KAC3BC,EAAkB5B,KAAK2B,GAAI7B,G,CAKtC,sBAAM+B,CAAiBC,EAAyBC,GAC5CC,EAAqBhC,KAAKiC,YAAaH,EAAMC,E,CAIjD,cAAMG,GACF,OAAOC,EAAsBnC,KAAK2B,G,CAGtC,MAAAS,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,4CACDF,EAAA,SAAAE,IAAA,2CAAOC,QAASxC,KAAKyC,KAAMC,MAAM,gBAAe,gBAAgB1C,KAAKc,UACjEuB,EAAA,QAAAb,OAAAC,OAAA,CAAAc,IAAA,2CAAOI,OAAQ3C,KAAKqB,WAAWuB,KAAK5C,MAC7B6C,SAAU7C,KAAKI,aAAawC,KAAK5C,MACjC8C,QAAS9C,KAAKY,iBAAiBgC,KAAK5C,MACpC+C,QAAS/C,KAAKkB,YAAY0B,KAAK5C,MAC/Be,QAASf,KAAKe,QACdiC,GAAIhD,KAAKyC,KACTC,MAAM,aACNO,KAAK,WACLR,KAAMzC,KAAKyC,KACX3B,SAAUd,KAAKc,SACfoC,IAAKvB,IAAO3B,KAAKiC,YAAcN,CAAE,GAC7B3B,KAAKG,sBAEhBkC,EAAA,QAAAE,IAAA,2CAAMG,MAAM,kBACZL,EAAA,QAAAE,IAAA,2CAAMG,MAAM,QACRL,EAAA,QAAAE,IAAA,+C,mEAQxB,IAAIrC,EAAY,E"}
+{"version":3,"names":["switchCss","WcsSwitchStyle0","SWITCH_INHERITED_ATTRS","Switch","this","switchId","switchIds","inheritedAttributes","handleChange","ev","stopImmediatePropagation","preventDefault","toggleSwitchState","handleHostClick","e","stopPropagation","handleInputClick","detail","disabled","checked","wcsChange","emit","handleFocus","event","wcsFocus","handleBlur","wcsBlur","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","setAriaAttribute","attr","value","setOrRemoveAttribute","nativeInput","getLabel","getSlottedContentText","render","h","Host","key","htmlFor","name","class","onBlur","bind","onChange","onClick","onFocus","id","type","ref"],"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-semantic-color-background-control-indicator-default);\n    --wcs-switch-background-color-final: var(--wcs-semantic-color-background-control-indicator-selected);\n    --wcs-switch-background-color-disabled: var(--wcs-semantic-color-background-control-indicator-disabled);\n    --wcs-switch-background-color-disabled-selected: var(--wcs-semantic-color-background-control-indicator-disabled);\n    --wcs-switch-background-color-hover-selected: var(--wcs-semantic-color-background-control-indicator-hover);\n\n    --wcs-switch-padding-horizontal: var(--wcs-semantic-spacing-small);\n    --wcs-switch-padding-vertical: calc((var(--wcs-switch-height) - var(--wcs-switch-dot-size)) / 2); // to center the dot vertically, at the middle of the dot\n\n    // TODO : Les variables figma sont bindées sur les primitives\n    --wcs-switch-dot-color-default: var(--wcs-semantic-color-foreground-brand); // the dot color when the switch is not checked\n    --wcs-switch-dot-color-selected: var(--wcs-semantic-color-foreground-control-indicator-selected); // the dot color when the switch is checked\n    --wcs-switch-dot-color-disabled: var(--wcs-semantic-color-foreground-control-indicator-disabled);\n\n    --wcs-switch-text-color-default: var(--wcs-semantic-color-text-secondary);\n    --wcs-switch-text-color-selected: var(--wcs-semantic-color-text-primary);\n    --wcs-switch-text-color-disabled: var(--wcs-semantic-color-text-disabled);\n\n    --wcs-switch-text-font-weight-default: var(--wcs-semantic-font-weight-medium);\n    --wcs-switch-text-font-weight-selected: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-switch-outline-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n    --wcs-switch-dot-translate-x: calc(var(--wcs-switch-width) - var(--wcs-switch-dot-size) - (2 * var(--wcs-switch-padding-horizontal)));\n    --wcs-switch-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    --wcs-switch-dot-size: 0.875rem; /* 14px */\n\n    --wcs-switch-height: var(--wcs-semantic-size-xs);\n    --wcs-switch-width: var(--wcs-semantic-size-l);\n\n    --wcs-switch-border-radius: var(--wcs-semantic-border-radius-full);\n\n    --wcs-switch-gap: var(--wcs-semantic-spacing-base);\n\n    display: inline-flex;\n}\n\n:host([disabled]) {\n    .text {\n        color: var(--wcs-switch-text-color-disabled);\n    }\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    user-select: none;\n    margin-bottom: 0;\n\n    gap: var(--wcs-switch-gap);\n}\n\n.wcs-container:has(input:focus-visible) {\n    @include focus-outline($outline-color: var(--wcs-switch-outline-color-focus), $border-radius: var(--wcs-switch-border-radius));\n}\n\n/* If the selector focus-visible is not supported by the browser, use focus-within instead */\n@supports not selector(.wcs-container:has(input:focus-visible)){\n    .wcs-container:focus-within {\n        @include focus-outline($outline-color: var(--wcs-switch-outline-color-focus), $border-radius: var(--wcs-switch-border-radius));\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-default);\n\n    font-weight: var(--wcs-switch-text-font-weight-default);\n    line-height: 1.375;\n}\n\n.wcs-container:not([aria-disabled]) input:checked ~ .text {\n    font-weight: var(--wcs-switch-text-font-weight-selected);\n    color: var(--wcs-switch-text-color-selected);\n}\n\n.wcs-checkmark::before {\n    position: absolute;\n    transition: all var(--wcs-switch-transition-duration) ease-out;\n}\n\n.wcs-checkmark::before {\n    bottom: var(--wcs-switch-padding-vertical);\n    left: var(--wcs-switch-padding-horizontal);\n    width: var(--wcs-switch-dot-size);\n    height: var(--wcs-switch-dot-size);\n    content: \"\";\n    border-radius: 50%;\n    background-color: var(--wcs-switch-dot-color-default);\n}\n\n:host([disabled]:not([checked])) {\n    .wcs-checkmark::before {\n        background-color: var(--wcs-switch-dot-color-disabled);\n    }\n\n    .wcs-checkmark {\n        background-color: var(--wcs-switch-background-color-disabled);\n    }\n}\n\n:host([disabled][checked]) {\n    .wcs-checkmark {\n        background-color: var(--wcs-switch-background-color-disabled-selected);\n    }\n}\n\n:host([disabled]) {\n    .text {\n        color: var(--wcs-switch-text-color-disabled);\n    }\n}\n\n.wcs-checkmark {\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    width: var(--wcs-switch-width);\n    height: var(--wcs-switch-height);\n    border-radius: var(--wcs-switch-border-radius);\n    background-color: var(--wcs-switch-background-color-initial);\n\n    min-width: 3rem;\n    position: relative;\n}\n\n.wcs-container:not([aria-disabled]) {\n    cursor: pointer;\n}\n\n/* When the switch is checked, change the dot to white */\ninput:not([disabled]):checked + .wcs-checkmark::before,\n.wcs-container:focus input:not([disabled]) + .wcs-checkmark::before {\n    background-color: var(--wcs-switch-dot-color-selected);\n}\n\n/* Switch transition */\ninput:checked + .wcs-checkmark::before {\n    transform: translateX(var(--wcs-switch-dot-translate-x));\n}\n\n/* When the switch is checked, change background */\ninput:not([disabled]):checked + .wcs-checkmark {\n    background-color: var(--wcs-switch-background-color-final);\n}\n\n/* When the switch is checked and hover, change background */\n.wcs-container:hover input:not([disabled]):checked + .wcs-checkmark {\n    background-color: var(--wcs-switch-background-color-hover-selected);\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen,\n    Method,\n    Prop\n} from '@stencil/core';\nimport { SwitchChangeEventDetail, SwitchLabelAlignment } from './switch-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { ControlComponentWithLabel, getSlottedContentText } from \"../../utils/control-component-interface\";\n\nconst SWITCH_INHERITED_ATTRS = ['tabindex'];\n\n/**\n * The switch component is a control used to switch between on and off state.\n * \n * @cssprop --wcs-switch-outline-color-focus - Color of the focus outline\n * \n * @cssprop --wcs-switch-text-color-default - Color of the text when the switch is not selected\n * @cssprop --wcs-switch-text-color-selected - Color of the text when the switch is selected\n * @cssprop --wcs-switch-text-color-disabled - Color of the text when the switch is disabled\n\n * \n * @cssprop --wcs-switch-background-color-initial - Background color of the switch when not selected\n * @cssprop --wcs-switch-background-color-final - Background color of the switch when selected\n * @cssprop --wcs-switch-background-color-disabled - Background color of the switch when disabled\n * @cssprop --wcs-switch-background-color-disabled-selected - Background color of the switch when disabled and selected\n * @cssprop --wcs-switch-background-color-hover-selected - Background color of the switch when hovered and selected\n * \n * @cssprop --wcs-switch-height - Height of the switch\n * @cssprop --wcs-switch-width - Width of the switch\n * @cssprop --wcs-switch-border-radius - Border radius of the switch\n * @cssprop --wcs-switch-padding-horizontal - Horizontal padding of the switch\n * @cssprop --wcs-switch-padding-vertical - Vertical padding of the switch\n * \n * @cssprop --wcs-switch-dot-color-default - Color of the dot when not selected\n * @cssprop --wcs-switch-dot-color-selected - Color of the dot when selected\n * @cssprop --wcs-switch-dot-color-disabled - Color of the dot when disabled\n * \n * @cssprop --wcs-switch-dot-translate-x - Horizontal translation of the dot (from left to right = right to left)\n * @cssprop --wcs-switch-dot-size - Size of the dot\n * \n * @cssprop --wcs-switch-gap - Gap between the switch and the text\n */\n@Component({\n    tag: 'wcs-switch',\n    styleUrl: 'switch.scss',\n    shadow: {\n        delegatesFocus: true,\n    }\n})\nexport class Switch implements ComponentInterface, MutableAriaAttribute, ControlComponentWithLabel {\n    @Element() private el!: HTMLElement;\n    private switchId = `wcs-switch-${switchIds++}`;\n    private nativeInput!: HTMLInputElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    @Prop() name = this.switchId;\n\n    /**\n     * If `true`, the switch is selected.\n     */\n    @Prop({ reflect: true }) checked: boolean = false;\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 whether the switch is disabled or not.\n     */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /**\n     * Emitted when the checked property has changed.\n     */\n    @Event() wcsChange!: EventEmitter<SwitchChangeEventDetail>;\n\n    /**\n     * Emitted when the switch has focus.\n     */\n    @Event() wcsFocus!: EventEmitter<FocusEvent>;\n    \n    /**\n     * Emitted when the switch loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    \n    handleChange(ev: Event) {\n        ev.stopImmediatePropagation();\n        ev.preventDefault();\n        this.toggleSwitchState();\n    }\n\n    @Listen('click')\n    async handleHostClick(e: Event){\n        e.preventDefault();\n        e.stopPropagation();\n\n        this.toggleSwitchState();\n    }\n\n    handleInputClick(ev: PointerEvent) {\n        // If the click event is coming from the mouse we ignore it.\n        // We only want to handle the keyboard interactions as it is the only purpose of this native input\n        if (ev.detail) {\n            ev.stopImmediatePropagation()\n            ev.preventDefault();\n        }\n    }\n\n    toggleSwitchState() {\n        if (this.disabled) return;\n        \n        this.checked = !this.checked;\n        this.wcsChange.emit({\n            checked: this.checked,\n        });\n    }\n\n    handleFocus(event: FocusEvent) {\n        this.wcsFocus.emit(event);\n    }\n\n    handleBlur(event: FocusEvent) {\n        this.wcsBlur.emit(event);\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, SWITCH_INHERITED_ATTRS),\n        };\n    }\n    \n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeInput, attr, value);\n    }\n\n    @Method()\n    async getLabel(): Promise<string> {\n        return getSlottedContentText(this.el);\n    }\n    \n    render() {\n        return (\n            <Host>\n                <label htmlFor={this.name} class=\"wcs-container\" aria-disabled={this.disabled}>\n                    <input onBlur={this.handleBlur.bind(this)}\n                           onChange={this.handleChange.bind(this)}\n                           onClick={this.handleInputClick.bind(this)}\n                           onFocus={this.handleFocus.bind(this)}\n                           checked={this.checked}\n                           id={this.name}\n                           class=\"wcs-switch\"\n                           type=\"checkbox\"\n                           name={this.name}\n                           disabled={this.disabled}\n                           ref={el => {this.nativeInput = el}}\n                           {...this.inheritedAttributes}>\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":"iJAAA,MAAMA,EAAY,2mJAClB,MAAAC,EAAeD,ECgBf,MAAME,EAAyB,CAAC,Y,MAwCnBC,EAAM,M,kIAEPC,KAAAC,SAAW,cAAcC,MAEzBF,KAAAG,oBAA4C,G,UAErCH,KAAKC,S,aAKwB,M,oBAKoB,S,cAKnB,K,CAkB7C,YAAAG,CAAaC,GACTA,EAAGC,2BACHD,EAAGE,iBACHP,KAAKQ,mB,CAIT,qBAAMC,CAAgBC,GAClBA,EAAEH,iBACFG,EAAEC,kBAEFX,KAAKQ,mB,CAGT,gBAAAI,CAAiBP,GAGb,GAAIA,EAAGQ,OAAQ,CACXR,EAAGC,2BACHD,EAAGE,gB,EAIX,iBAAAC,GACI,GAAIR,KAAKc,SAAU,OAEnBd,KAAKe,SAAWf,KAAKe,QACrBf,KAAKgB,UAAUC,KAAK,CAChBF,QAASf,KAAKe,S,CAItB,WAAAG,CAAYC,GACRnB,KAAKoB,SAASH,KAAKE,E,CAGvB,UAAAE,CAAWF,GACPnB,KAAKsB,QAAQL,KAAKE,E,CAGtB,iBAAAI,GACIvB,KAAKG,oBAAmBqB,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsB1B,KAAK2B,KAC3BC,EAAkB5B,KAAK2B,GAAI7B,G,CAKtC,sBAAM+B,CAAiBC,EAAyBC,GAC5CC,EAAqBhC,KAAKiC,YAAaH,EAAMC,E,CAIjD,cAAMG,GACF,OAAOC,EAAsBnC,KAAK2B,G,CAGtC,MAAAS,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,4CACDF,EAAA,SAAAE,IAAA,2CAAOC,QAASxC,KAAKyC,KAAMC,MAAM,gBAAe,gBAAgB1C,KAAKc,UACjEuB,EAAA,QAAAb,OAAAC,OAAA,CAAAc,IAAA,2CAAOI,OAAQ3C,KAAKqB,WAAWuB,KAAK5C,MAC7B6C,SAAU7C,KAAKI,aAAawC,KAAK5C,MACjC8C,QAAS9C,KAAKY,iBAAiBgC,KAAK5C,MACpC+C,QAAS/C,KAAKkB,YAAY0B,KAAK5C,MAC/Be,QAASf,KAAKe,QACdiC,GAAIhD,KAAKyC,KACTC,MAAM,aACNO,KAAK,WACLR,KAAMzC,KAAKyC,KACX3B,SAAUd,KAAKc,SACfoC,IAAKvB,IAAO3B,KAAKiC,YAAcN,CAAE,GAC7B3B,KAAKG,sBAEhBkC,EAAA,QAAAE,IAAA,2CAAMG,MAAM,kBACZL,EAAA,QAAAE,IAAA,2CAAMG,MAAM,QACRL,EAAA,QAAAE,IAAA,+C,mEAQxB,IAAIrC,EAAY,E"}

package/dist/wcs/{p-9ad23e83.entry.js → p-b28b2fba.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as i,H as n,g as e}from"./p-32e583ea.js";import{i as o,a,s}from"./p-52d77e1f.js";const r=':host{display:flex;flex-direction:column;justify-content:center}:host .size-s{font-size:18px !important}:host .size-m{font-size:24px !important}:host .size-l{font-size:36px !important}:host .size-xl{font-size:48px !important}:host .material-icons{font-family:"Material Icons";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}:host .material-icons-outlined{font-family:"Material Icons Outlined";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}:host .material-icons-two-tone{--google-font-color-materialiconstwotone:none;font-family:"Material Icons Two Tone";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}:host .material-icons-round{font-family:"Material Icons Round";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}:host .material-icons-sharp{font-family:"Material Icons Sharp";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}';const l=r;const f={filled:"material-icons",outlined:"material-icons-outlined",twotone:"material-icons-two-tone",rounded:"material-icons-round",sharp:"material-icons-sharp"};const c=["title"];const m=class{constructor(i){t(this,i);this.inheritedAttributes={};this.icon=undefined;this.size="m";this.family="filled"}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},o(this.el)),a(this.el,c))}async setAriaAttribute(t,i){s(this.nativeIcon,t,i)}render(){return i(n,{key:"1e0c8f28a59f398d0981007401cda39bf9e089d8"},i("i",Object.assign({key:"caa5e118dfeb306aef87a9b10514247d45cc2f9f","aria-hidden":"true",class:f[this.family]+" size-"+this.size,ref:t=>this.nativeIcon=t},this.inheritedAttributes),this.icon))}get el(){return e(this)}};m.style=l;export{m as wcs_mat_icon};
-//# sourceMappingURL=p-9ad23e83.entry.js.map
+import{r as t,h as i,H as n,g as e}from"./p-32e583ea.js";import{i as o,a,s}from"./p-52d77e1f.js";const r=':host{display:flex;flex-direction:column;justify-content:center}:host .size-s{font-size:18px !important}:host .size-m{font-size:24px !important}:host .size-l{font-size:36px !important}:host .size-xl{font-size:48px !important}:host .material-icons{font-family:"Material Icons";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}:host .material-icons-outlined{font-family:"Material Icons Outlined";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}:host .material-icons-two-tone{--google-font-color-materialiconstwotone:none;font-family:"Material Icons Two Tone";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}:host .material-icons-round{font-family:"Material Icons Round";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}:host .material-icons-sharp{font-family:"Material Icons Sharp";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}';const l=r;const f={filled:"material-icons",outlined:"material-icons-outlined",twotone:"material-icons-two-tone",rounded:"material-icons-round",sharp:"material-icons-sharp"};const c=["title"];const m=class{constructor(i){t(this,i);this.inheritedAttributes={};this.icon=undefined;this.size="m";this.family="filled"}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},o(this.el)),a(this.el,c))}async setAriaAttribute(t,i){s(this.nativeIcon,t,i)}render(){return i(n,{key:"57b0feb64492a614f69e255808dd5ae511e6b1f2"},i("i",Object.assign({key:"57475c2aaf39a6f719fc65a5c58f14df97c49db0","aria-hidden":"true",class:f[this.family]+" size-"+this.size,ref:t=>this.nativeIcon=t},this.inheritedAttributes),this.icon))}get el(){return e(this)}};m.style=l;export{m as wcs_mat_icon};
+//# sourceMappingURL=p-b28b2fba.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["matIconCss","WcsMatIconStyle0","ICON_FAMILY_CLASS_NAME","filled","outlined","twotone","rounded","sharp","MAT_ICON_INHERITED_ATTRS","MatIcon","this","inheritedAttributes","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","setAriaAttribute","attr","value","setOrRemoveAttribute","nativeIcon","render","h","Host","key","class","family","size","ref","icon"],"sources":["src/components/mat-icon/mat-icon.scss?tag=wcs-mat-icon&encapsulation=shadow","src/components/mat-icon/mat-icon.tsx"],"sourcesContent":["@use 'mat-icon-google-stylesheets';\n\n:host {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    .size-s {\n        font-size: 18px !important;\n    }\n\n    .size-m {\n        font-size: 24px !important;\n    }\n\n    .size-l {\n        font-size: 36px !important;\n    }\n\n    .size-xl {\n        font-size: 48px !important;\n    }\n\n    @include mat-icon-google-stylesheets.material-icons-classes\n}\n","import { Component, ComponentInterface, Element, h, Host, Method, Prop } from '@stencil/core';\nimport { MaterialIconFamily, MaterialIconSize } from './mat-icon-interface';\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst ICON_FAMILY_CLASS_NAME: Record<MaterialIconFamily, string> = {\n    filled: 'material-icons',\n    outlined: 'material-icons-outlined',\n    twotone: 'material-icons-two-tone',\n    rounded: 'material-icons-round',\n    sharp: 'material-icons-sharp'\n}\n\nconst MAT_ICON_INHERITED_ATTRS = ['title'];\n\n/**\n * A component used to display a [Material Icon](https://fonts.google.com/icons?icon.set=Material+Icons). Can be useful when used in wcs-grid or in a wcs-button.\n */\n@Component({\n    tag: 'wcs-mat-icon',\n    styleUrl: 'mat-icon.scss',\n    shadow: true\n})\nexport class MatIcon implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeIcon!: HTMLElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /**\n     * Use the icon name from Material Icons\n     */\n    @Prop() icon: string;\n    /**\n     * Size of the icon\n     */\n    @Prop() size: MaterialIconSize = 'm';\n    /**\n     * Family of the icon\n     */\n    @Prop() family: MaterialIconFamily = 'filled';\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, MAT_ICON_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeIcon, attr, value);\n    }\n\n    render() {\n        return (\n            <Host>\n                <i aria-hidden=\"true\"\n                   class={ICON_FAMILY_CLASS_NAME[this.family] + ' size-' + this.size}\n                   ref={(el) => (this.nativeIcon = el)}\n                   {...this.inheritedAttributes}>\n                    {this.icon}\n                </i>\n            </Host>\n        );\n    }\n}\n"],"mappings":"iGAAA,MAAMA,EAAa,ozDACnB,MAAAC,EAAeD,ECIf,MAAME,EAA6D,CAC/DC,OAAQ,iBACRC,SAAU,0BACVC,QAAS,0BACTC,QAAS,uBACTC,MAAO,wBAGX,MAAMC,EAA2B,CAAC,S,MAUrBC,EAAO,M,yBAGRC,KAAAC,oBAA4C,G,8BASnB,I,YAII,Q,CAErC,iBAAAC,GACIF,KAAKC,oBAAmBE,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsBL,KAAKM,KAC3BC,EAAkBP,KAAKM,GAAIR,G,CAKtC,sBAAMU,CAAiBC,EAAyBC,GAC5CC,EAAqBX,KAAKY,WAAYH,EAAMC,E,CAGhD,MAAAG,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,4CACDF,EAAA,IAAAX,OAAAC,OAAA,CAAAY,IAAA,yDAAe,OACZC,MAAOzB,EAAuBQ,KAAKkB,QAAU,SAAWlB,KAAKmB,KAC7DC,IAAMd,GAAQN,KAAKY,WAAaN,GAC5BN,KAAKC,qBACPD,KAAKqB,M"}

package/dist/wcs/{p-29f5b974.entry.js → p-bc009574.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as a,g as r}from"./p-32e583ea.js";import{i as s,a as i,s as c}from"./p-52d77e1f.js";const t=":host{display:inline-flex;--wcs-progress-radial-rail-width:calc(var(--wcs-semantic-spacing-base) / 4);--wcs-progress-radial-rail-spacing:calc(var(--wcs-semantic-spacing-base) / 4);--wcs-progress-radial-rail-color:var(--wcs-semantic-color-background-surface-tertiary);--wcs-progress-radial-value-background-color:var(--wcs-semantic-color-background-surface-brand);--wcs-progress-radial-label-color:var(--wcs-semantic-color-text-primary);--wcs-progress-radial-label-font-size:calc(1.5 * var(--wcs-semantic-font-size-m));--wcs-progress-radial-label-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-progress-radial-label-percentage-font-size:calc(var(--wcs-semantic-font-size-m) * 0.7);--wcs-progress-radial-animation-duration:var(--wcs-semantic-motion-duration-feedback-slower)}.progress-circle{position:relative;display:inline-block}.circle-rail{position:absolute;z-index:0;stroke:var(--wcs-progress-radial-rail-color);stroke-dasharray:var(--wcs-progress-radial-rail-width) var(--wcs-progress-radial-rail-spacing);fill:none}.progress-circle-figure{position:absolute;top:0;z-index:1;transform:rotate(-90deg);transition:stroke-dashoffset var(--wcs-progress-radial-animation-duration) ease-out}.progress-circle-label{top:0;left:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:var(--wcs-progress-radial-label-font-size);font-weight:var(--wcs-progress-radial-label-font-weight);color:var(--wcs-progress-radial-label-color)}.progress-circle-label sup{font-size:var(--wcs-progress-radial-label-percentage-font-size);top:-0.85em;position:relative;line-height:0;vertical-align:baseline}.progress-circle-value{stroke:var(--wcs-progress-radial-value-background-color);stroke-linecap:round}.progress-circle-value,.progress-circle-meter{fill:none}";const l=t;const o=["title"];const n=class{constructor(a){e(this,a);this.inheritedAttributes={};this.backgroundImageSize=120;this.size=120;this.showLabel=false;this.value=0}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},s(this.el)),i(this.el,o))}async setAriaAttribute(e,a){c(this.nativeProgress,e,a)}render(){const{backgroundImageSize:e,halfSize:r}={backgroundImageSize:this.backgroundImageSize,halfSize:this.backgroundImageSize/2};return a("div",Object.assign({key:"c98910d8a132eacbf780f3d9e5a23553c14297a6",class:"progress-circle","data-component":"radial-progress",style:this.getSize(),role:"progressbar","aria-valuemin":"0","aria-valuemax":"100","aria-valuenow":this.value,"aria-valuetext":this.value+"%",ref:e=>this.nativeProgress=e},this.inheritedAttributes),a("svg",{key:"d8f0282d2b7332c29ed10936ca2cfc5c00c03e3d","data-role":"figure",class:"circle-rail",viewBox:`0 0 ${e} ${e}`},a("circle",{key:"4534f4ac6749d59a8a1bd4189f3f998bc0aae416",cx:r,cy:r,r:54,"stroke-width":12})),a("svg",{key:"daf5358b0148443292ce3ac84d55d849e48033bc",class:"progress-circle-figure","data-role":"figure",viewBox:`0 0 ${e} ${e}`,style:this.getSvgStyle()},a("circle",{key:"3df0779e14354a9084b5f9132660ac2e1d446028",class:"progress-circle-value",cx:r,cy:r,r:"54","stroke-width":"12"})),this.showLabel&&a("div",{key:"28212403f92e2a2f1b7515847e8e7cab95851413",class:"progress-circle-label","data-role":"label"},a("span",{key:"93b4d94b47b8289f113d717392824d3bca9f9ec9"},a("span",{key:"e7093e3a2d3accdbc81ced41d8a02afa167483f6","data-role":"labelvalue"},this.value),a("sup",{key:"f9e66ca420de366cab09cc835d39e849030c4c8b"},"%"))))}getSvgStyle(){return{"stroke-dasharray":"339.292","stroke-dashoffset":`${339.292-this.value/100*339.292}`}}getSize(){return{width:`${this.size}px`,height:`${this.size}px`}}get el(){return r(this)}};n.style=l;export{n as wcs_progress_radial};
-//# sourceMappingURL=p-29f5b974.entry.js.map
+import{r as e,h as a,g as r}from"./p-32e583ea.js";import{i as s,a as i,s as c}from"./p-52d77e1f.js";const t=":host{display:inline-flex;--wcs-progress-radial-rail-width:calc(var(--wcs-semantic-spacing-base) / 4);--wcs-progress-radial-rail-spacing:calc(var(--wcs-semantic-spacing-base) / 4);--wcs-progress-radial-rail-color:var(--wcs-semantic-color-background-surface-tertiary);--wcs-progress-radial-value-background-color:var(--wcs-semantic-color-background-surface-brand);--wcs-progress-radial-label-color:var(--wcs-semantic-color-text-primary);--wcs-progress-radial-label-font-size:calc(1.5 * var(--wcs-semantic-font-size-m));--wcs-progress-radial-label-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-progress-radial-label-percentage-font-size:calc(var(--wcs-semantic-font-size-m) * 0.7);--wcs-progress-radial-animation-duration:var(--wcs-semantic-motion-duration-feedback-slower)}.progress-circle{position:relative;display:inline-block}.circle-rail{position:absolute;z-index:0;stroke:var(--wcs-progress-radial-rail-color);stroke-dasharray:var(--wcs-progress-radial-rail-width) var(--wcs-progress-radial-rail-spacing);fill:none}.progress-circle-figure{position:absolute;top:0;z-index:1;transform:rotate(-90deg);transition:stroke-dashoffset var(--wcs-progress-radial-animation-duration) ease-out}.progress-circle-label{top:0;left:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:var(--wcs-progress-radial-label-font-size);font-weight:var(--wcs-progress-radial-label-font-weight);color:var(--wcs-progress-radial-label-color)}.progress-circle-label sup{font-size:var(--wcs-progress-radial-label-percentage-font-size);top:-0.85em;position:relative;line-height:0;vertical-align:baseline}.progress-circle-value{stroke:var(--wcs-progress-radial-value-background-color);stroke-linecap:round}.progress-circle-value,.progress-circle-meter{fill:none}";const l=t;const o=["title"];const n=class{constructor(a){e(this,a);this.inheritedAttributes={};this.backgroundImageSize=120;this.size=120;this.showLabel=false;this.value=0}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},s(this.el)),i(this.el,o))}async setAriaAttribute(e,a){c(this.nativeProgress,e,a)}render(){const{backgroundImageSize:e,halfSize:r}={backgroundImageSize:this.backgroundImageSize,halfSize:this.backgroundImageSize/2};return a("div",Object.assign({key:"7da6ed9d04399e5ff473d112d6a111696c9b14bc",class:"progress-circle","data-component":"radial-progress",style:this.getSize(),role:"progressbar","aria-valuemin":"0","aria-valuemax":"100","aria-valuenow":this.value,"aria-valuetext":this.value+"%",ref:e=>this.nativeProgress=e},this.inheritedAttributes),a("svg",{key:"226ed7d14005563adc1e55e7ba28c3bb49ed1d95","data-role":"figure",class:"circle-rail",viewBox:`0 0 ${e} ${e}`},a("circle",{key:"a50b905a8c36416ce3ede895affbda05a30b1c1b",cx:r,cy:r,r:54,"stroke-width":12})),a("svg",{key:"7d58cf8a614acdff769c769ecca919b86792cd0d",class:"progress-circle-figure","data-role":"figure",viewBox:`0 0 ${e} ${e}`,style:this.getSvgStyle()},a("circle",{key:"11f22fd6a506b226a0e8a450163ac5c3a0fcbe44",class:"progress-circle-value",cx:r,cy:r,r:"54","stroke-width":"12"})),this.showLabel&&a("div",{key:"a87680ab5a59f4e34072dde8a2f7d15ef4b671e9",class:"progress-circle-label","data-role":"label"},a("span",{key:"fe65c818b10f58562d65f7f330a21a794f8b876f"},a("span",{key:"337459684703272ec7817fe64226e2df10341e9c","data-role":"labelvalue"},this.value),a("sup",{key:"45f173f53dcfa8e85ea0986f28e8848f75d24434"},"%"))))}getSvgStyle(){return{"stroke-dasharray":"339.292","stroke-dashoffset":`${339.292-this.value/100*339.292}`}}getSize(){return{width:`${this.size}px`,height:`${this.size}px`}}get el(){return r(this)}};n.style=l;export{n as wcs_progress_radial};
+//# sourceMappingURL=p-bc009574.entry.js.map

package/dist/wcs/{p-29f5b974.entry.js.map → p-bc009574.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["progressRadialCss","WcsProgressRadialStyle0","PROGRESS_RADIAL_ARIA_INHERITED_ATTRS","ProgressRadial","this","inheritedAttributes","backgroundImageSize","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","setAriaAttribute","attr","value","setOrRemoveAttribute","nativeProgress","render","halfSize","h","key","class","style","getSize","role","ref","viewBox","cx","cy","r","getSvgStyle","showLabel","width","height"],"sources":["src/components/progress-radial/progress-radial.scss?tag=wcs-progress-radial&encapsulation=shadow","src/components/progress-radial/progress-radial.tsx"],"sourcesContent":[":host {\n    display: inline-flex;\n\n    --wcs-progress-radial-rail-width: calc(var(--wcs-semantic-spacing-base) / 4);\n    --wcs-progress-radial-rail-spacing: calc(var(--wcs-semantic-spacing-base) / 4);\n    --wcs-progress-radial-rail-color: var(--wcs-semantic-color-background-surface-tertiary);\n\n    --wcs-progress-radial-value-background-color: var(--wcs-semantic-color-background-surface-brand);\n\n    --wcs-progress-radial-label-color: var(--wcs-semantic-color-text-primary);\n    --wcs-progress-radial-label-font-size: calc(1.5 * var(--wcs-semantic-font-size-m));\n    --wcs-progress-radial-label-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-progress-radial-label-percentage-font-size:  calc(var(--wcs-semantic-font-size-m) * 0.7);\n    --wcs-progress-radial-animation-duration: var(--wcs-semantic-motion-duration-feedback-slower);\n}\n\n.progress-circle {\n    position: relative;\n    display: inline-block;\n}\n\n.circle-rail {\n    position: absolute;\n    z-index: 0;\n    stroke: var(--wcs-progress-radial-rail-color);\n    stroke-dasharray: var(--wcs-progress-radial-rail-width) var(--wcs-progress-radial-rail-spacing);\n    fill: none;\n}\n\n.progress-circle-figure {\n    position: absolute;\n    top: 0;\n    z-index: 1;\n    transform: rotate(-90deg);\n    transition: stroke-dashoffset var(--wcs-progress-radial-animation-duration) ease-out;\n}\n\n.progress-circle-label {\n    top: 0;\n    left: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    font-size: var(--wcs-progress-radial-label-font-size);\n    font-weight: var(--wcs-progress-radial-label-font-weight);\n\n    color: var(--wcs-progress-radial-label-color);\n\n    sup {\n        font-size: var(--wcs-progress-radial-label-percentage-font-size);\n        top: -.85em;\n        position: relative;\n        line-height: 0;\n        vertical-align: baseline;\n    }\n}\n\n.progress-circle-value {\n    stroke: var(--wcs-progress-radial-value-background-color);\n    stroke-linecap: round;\n}\n\n.progress-circle-value,\n.progress-circle-meter {\n    fill: none;\n}\n","import { Component, Prop, ComponentInterface, h, Element, Method } from '@stencil/core';\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst PROGRESS_RADIAL_ARIA_INHERITED_ATTRS = ['title'];\n\n/**\n * The progress-radial component is a circular progress bar that indicates the current completion of a task. \n *\n * ## Accessibility guidelines 💡\n * > Aria attributes and how to display the progress-radial depend on the use case in your application :\n * >\n * > - **Case 1 : decorative**\n * > If the progress-radial is used as a decoration _(if removed, the user doesn't lose any relevant information)_ or in the\n * > context of another component _(such as progress-radial in a card)_ => **you don't need to show the label nor add an aria-label**.\n * >\n * > - **Case 2 : informative**\n * > If the progress-radial is used to convey important information _(e.g., form completion status, dashboard KPI)_, you need to :\n * >   - **Provide a visible label** that describes the purpose of the progress-radial.\n * >   - **Set the `showLabel` property to `true`** to show the percentage inside the progress-radial.\n * >   - Optionally, use aria-label to provide an accessible name if a visible label is not present.\n *\n * \n * @cssprop --wcs-progress-radial-rail-width - The width of the line that represents the rail of the progress radial\n * @cssprop --wcs-progress-radial-rail-spacing - The space between each rail of the progress radial\n * @cssprop --wcs-progress-radial-rail-color - The color of the rail of the progress radial\n * @cssprop --wcs-progress-radial-value-background-color - The background color of the bar on top of the rail \n * @cssprop --wcs-progress-radial-label-color - The color of the label inside the progress radial\n * @cssprop --wcs-progress-radial-label-font-size - The font size of the label inside the progress radial\n * @cssprop --wcs-progress-radial-label-font-weight - The font weight of the label inside the progress radial\n * @cssprop --wcs-progress-radial-label-percentage-font-size - The font size of the percentage inside the progress radial\n * @cssprop --wcs-progress-radial-animation-duration - The duration of the animation of the progress radial\n */\n@Component({\n    tag: 'wcs-progress-radial',\n    styleUrl: 'progress-radial.scss',\n    shadow: true\n})\nexport class ProgressRadial implements ComponentInterface, MutableAriaAttribute {\n    \n    @Element() private el!: HTMLWcsProgressRadialElement;\n    private nativeProgress!: HTMLDivElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    /** The initial background image size (120x120) as specified in the background-image css property of .progress-circle */\n    private backgroundImageSize: number = 120;\n    \n    /** The size of the progress radial (in px) */\n    @Prop() size: number = 120;\n    /** Whether the component should display the % label inside */\n    @Prop() showLabel: boolean = false;\n    /** The value of the progress radial. Prefer values between 0 and 100. */\n    @Prop() value: number = 0;\n    \n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, PROGRESS_RADIAL_ARIA_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeProgress, attr, value);\n    }\n\n    render() {\n        const { backgroundImageSize, halfSize } = { backgroundImageSize: this.backgroundImageSize, halfSize: this.backgroundImageSize / 2 };\n        return (\n            <div class=\"progress-circle\"\n                 data-component=\"radial-progress\"\n                 style={this.getSize()}\n                 role=\"progressbar\"\n                 aria-valuemin=\"0\"\n                 aria-valuemax=\"100\"\n                 aria-valuenow={this.value}\n                 aria-valuetext={this.value + '%'}\n                 ref={(el) => (this.nativeProgress = el)}\n                 {...this.inheritedAttributes}>\n                <svg data-role=\"figure\" class=\"circle-rail\"\n                     viewBox={`0 0 ${backgroundImageSize} ${backgroundImageSize}`}>\n                    <circle cx={halfSize} cy={halfSize} r={54} stroke-width={12}/>\n                </svg>\n                <svg class=\"progress-circle-figure\"\n                    data-role=\"figure\"\n                    viewBox={`0 0 ${backgroundImageSize} ${backgroundImageSize}`}\n                    style={this.getSvgStyle()}>\n                        <circle class=\"progress-circle-value\" cx={halfSize} cy={halfSize} r=\"54\" stroke-width=\"12\" />\n                </svg>\n                {this.showLabel &&\n                    <div class=\"progress-circle-label\" data-role=\"label\">\n                        <span>\n                            <span data-role=\"labelvalue\">{this.value}</span><sup>%</sup>\n                        </span>\n                    </div>\n                }\n            </div>\n        );\n    }\n\n    getSvgStyle() {\n        return {\n            'stroke-dasharray': '339.292',\n            'stroke-dashoffset': `${339.292 - (this.value / 100) * 339.292}`,\n        };\n    }\n    \n    getSize() {\n        return {\n            'width': `${(this.size)}px`,\n            'height': `${(this.size)}px`,\n        };\n    }\n}\n"],"mappings":"oGAAA,MAAMA,EAAoB,yvDAC1B,MAAAC,EAAeD,ECGf,MAAME,EAAuC,CAAC,S,MAkCjCC,EAAc,M,yBAIfC,KAAAC,oBAA4C,GAG5CD,KAAAE,oBAA8B,I,UAGf,I,eAEM,M,WAEL,C,CAExB,iBAAAC,GACIH,KAAKC,oBAAmBG,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsBN,KAAKO,KAC3BC,EAAkBR,KAAKO,GAAIT,G,CAKtC,sBAAMW,CAAiBC,EAAyBC,GAC5CC,EAAqBZ,KAAKa,eAAgBH,EAAMC,E,CAGpD,MAAAG,GACI,MAAMZ,oBAAEA,EAAmBa,SAAEA,GAAa,CAAEb,oBAAqBF,KAAKE,oBAAqBa,SAAUf,KAAKE,oBAAsB,GAChI,OACIc,EAAA,MAAAZ,OAAAC,OAAA,CAAAY,IAAA,2CAAKC,MAAM,kBAAiB,iBACR,kBACfC,MAAOnB,KAAKoB,UACZC,KAAK,cAAa,gBACJ,IAAG,gBACH,MAAK,gBACJrB,KAAKW,MAAK,iBACTX,KAAKW,MAAQ,IAC7BW,IAAMf,GAAQP,KAAKa,eAAiBN,GAChCP,KAAKC,qBACVe,EAAA,OAAAC,IAAA,uDAAe,SAASC,MAAM,cACzBK,QAAS,OAAOrB,KAAuBA,KACxCc,EAAA,UAAAC,IAAA,2CAAQO,GAAIT,EAAUU,GAAIV,EAAUW,EAAG,GAAE,eAAgB,MAE7DV,EAAA,OAAAC,IAAA,2CAAKC,MAAM,yBAAwB,YACrB,SACVK,QAAS,OAAOrB,KAAuBA,IACvCiB,MAAOnB,KAAK2B,eACRX,EAAA,UAAAC,IAAA,2CAAQC,MAAM,wBAAwBM,GAAIT,EAAUU,GAAIV,EAAUW,EAAE,KAAI,eAAc,QAE7F1B,KAAK4B,WACFZ,EAAA,OAAAC,IAAA,2CAAKC,MAAM,wBAAuB,YAAW,SACzCF,EAAA,QAAAC,IAAA,4CACID,EAAA,QAAAC,IAAA,uDAAgB,cAAcjB,KAAKW,OAAaK,EAAA,OAAAC,IAAA,mD,CAQxE,WAAAU,GACI,MAAO,CACH,mBAAoB,UACpB,oBAAqB,GAAG,QAAW3B,KAAKW,MAAQ,IAAO,U,CAI/D,OAAAS,GACI,MAAO,CACHS,MAAS,GAAI7B,KAAS,SACtB8B,OAAU,GAAI9B,KAAS,S"}
+{"version":3,"names":["progressRadialCss","WcsProgressRadialStyle0","PROGRESS_RADIAL_ARIA_INHERITED_ATTRS","ProgressRadial","this","inheritedAttributes","backgroundImageSize","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","setAriaAttribute","attr","value","setOrRemoveAttribute","nativeProgress","render","halfSize","h","key","class","style","getSize","role","ref","viewBox","cx","cy","r","getSvgStyle","showLabel","width","height"],"sources":["src/components/progress-radial/progress-radial.scss?tag=wcs-progress-radial&encapsulation=shadow","src/components/progress-radial/progress-radial.tsx"],"sourcesContent":[":host {\n    display: inline-flex;\n\n    --wcs-progress-radial-rail-width: calc(var(--wcs-semantic-spacing-base) / 4);\n    --wcs-progress-radial-rail-spacing: calc(var(--wcs-semantic-spacing-base) / 4);\n    --wcs-progress-radial-rail-color: var(--wcs-semantic-color-background-surface-tertiary);\n\n    --wcs-progress-radial-value-background-color: var(--wcs-semantic-color-background-surface-brand);\n\n    --wcs-progress-radial-label-color: var(--wcs-semantic-color-text-primary);\n    --wcs-progress-radial-label-font-size: calc(1.5 * var(--wcs-semantic-font-size-m));\n    --wcs-progress-radial-label-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-progress-radial-label-percentage-font-size:  calc(var(--wcs-semantic-font-size-m) * 0.7);\n    --wcs-progress-radial-animation-duration: var(--wcs-semantic-motion-duration-feedback-slower);\n}\n\n.progress-circle {\n    position: relative;\n    display: inline-block;\n}\n\n.circle-rail {\n    position: absolute;\n    z-index: 0;\n    stroke: var(--wcs-progress-radial-rail-color);\n    stroke-dasharray: var(--wcs-progress-radial-rail-width) var(--wcs-progress-radial-rail-spacing);\n    fill: none;\n}\n\n.progress-circle-figure {\n    position: absolute;\n    top: 0;\n    z-index: 1;\n    transform: rotate(-90deg);\n    transition: stroke-dashoffset var(--wcs-progress-radial-animation-duration) ease-out;\n}\n\n.progress-circle-label {\n    top: 0;\n    left: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    font-size: var(--wcs-progress-radial-label-font-size);\n    font-weight: var(--wcs-progress-radial-label-font-weight);\n\n    color: var(--wcs-progress-radial-label-color);\n\n    sup {\n        font-size: var(--wcs-progress-radial-label-percentage-font-size);\n        top: -.85em;\n        position: relative;\n        line-height: 0;\n        vertical-align: baseline;\n    }\n}\n\n.progress-circle-value {\n    stroke: var(--wcs-progress-radial-value-background-color);\n    stroke-linecap: round;\n}\n\n.progress-circle-value,\n.progress-circle-meter {\n    fill: none;\n}\n","import { Component, Prop, ComponentInterface, h, Element, Method } from '@stencil/core';\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst PROGRESS_RADIAL_ARIA_INHERITED_ATTRS = ['title'];\n\n/**\n * The progress-radial component is a circular progress bar that indicates the current completion of a task. \n *\n * ## Accessibility guidelines 💡\n * > Aria attributes and how to display the progress-radial depend on the use case in your application :\n * >\n * > - **Case 1 : decorative**\n * > If the progress-radial is used as a decoration _(if removed, the user doesn't lose any relevant information)_ or in the\n * > context of another component _(such as progress-radial in a card)_ => **you don't need to show the label nor add an aria-label**.\n * >\n * > - **Case 2 : informative**\n * > If the progress-radial is used to convey important information _(e.g., form completion status, dashboard KPI)_, you need to :\n * >   - **Provide a visible label** that describes the purpose of the progress-radial.\n * >   - **Set the `showLabel` property to `true`** to show the percentage inside the progress-radial.\n * >   - Optionally, use aria-label to provide an accessible name if a visible label is not present.\n *\n * \n * @cssprop --wcs-progress-radial-rail-width - The width of the line that represents the rail of the progress radial\n * @cssprop --wcs-progress-radial-rail-spacing - The space between each rail of the progress radial\n * @cssprop --wcs-progress-radial-rail-color - The color of the rail of the progress radial\n * @cssprop --wcs-progress-radial-value-background-color - The background color of the bar on top of the rail \n * @cssprop --wcs-progress-radial-label-color - The color of the label inside the progress radial\n * @cssprop --wcs-progress-radial-label-font-size - The font size of the label inside the progress radial\n * @cssprop --wcs-progress-radial-label-font-weight - The font weight of the label inside the progress radial\n * @cssprop --wcs-progress-radial-label-percentage-font-size - The font size of the percentage inside the progress radial\n * @cssprop --wcs-progress-radial-animation-duration - The duration of the animation of the progress radial\n */\n@Component({\n    tag: 'wcs-progress-radial',\n    styleUrl: 'progress-radial.scss',\n    shadow: true\n})\nexport class ProgressRadial implements ComponentInterface, MutableAriaAttribute {\n    \n    @Element() private el!: HTMLWcsProgressRadialElement;\n    private nativeProgress!: HTMLDivElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    /** The initial background image size (120x120) as specified in the background-image css property of .progress-circle */\n    private backgroundImageSize: number = 120;\n    \n    /** The size of the progress radial (in px) */\n    @Prop() size: number = 120;\n    /** Whether the component should display the % label inside */\n    @Prop({ reflect: true }) showLabel: boolean = false;\n    /** The value of the progress radial. Prefer values between 0 and 100. */\n    @Prop() value: number = 0;\n    \n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, PROGRESS_RADIAL_ARIA_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeProgress, attr, value);\n    }\n\n    render() {\n        const { backgroundImageSize, halfSize } = { backgroundImageSize: this.backgroundImageSize, halfSize: this.backgroundImageSize / 2 };\n        return (\n            <div class=\"progress-circle\"\n                 data-component=\"radial-progress\"\n                 style={this.getSize()}\n                 role=\"progressbar\"\n                 aria-valuemin=\"0\"\n                 aria-valuemax=\"100\"\n                 aria-valuenow={this.value}\n                 aria-valuetext={this.value + '%'}\n                 ref={(el) => (this.nativeProgress = el)}\n                 {...this.inheritedAttributes}>\n                <svg data-role=\"figure\" class=\"circle-rail\"\n                     viewBox={`0 0 ${backgroundImageSize} ${backgroundImageSize}`}>\n                    <circle cx={halfSize} cy={halfSize} r={54} stroke-width={12}/>\n                </svg>\n                <svg class=\"progress-circle-figure\"\n                    data-role=\"figure\"\n                    viewBox={`0 0 ${backgroundImageSize} ${backgroundImageSize}`}\n                    style={this.getSvgStyle()}>\n                        <circle class=\"progress-circle-value\" cx={halfSize} cy={halfSize} r=\"54\" stroke-width=\"12\" />\n                </svg>\n                {this.showLabel &&\n                    <div class=\"progress-circle-label\" data-role=\"label\">\n                        <span>\n                            <span data-role=\"labelvalue\">{this.value}</span><sup>%</sup>\n                        </span>\n                    </div>\n                }\n            </div>\n        );\n    }\n\n    getSvgStyle() {\n        return {\n            'stroke-dasharray': '339.292',\n            'stroke-dashoffset': `${339.292 - (this.value / 100) * 339.292}`,\n        };\n    }\n    \n    getSize() {\n        return {\n            'width': `${(this.size)}px`,\n            'height': `${(this.size)}px`,\n        };\n    }\n}\n"],"mappings":"oGAAA,MAAMA,EAAoB,yvDAC1B,MAAAC,EAAeD,ECGf,MAAME,EAAuC,CAAC,S,MAkCjCC,EAAc,M,yBAIfC,KAAAC,oBAA4C,GAG5CD,KAAAE,oBAA8B,I,UAGf,I,eAEuB,M,WAEtB,C,CAExB,iBAAAC,GACIH,KAAKC,oBAAmBG,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsBN,KAAKO,KAC3BC,EAAkBR,KAAKO,GAAIT,G,CAKtC,sBAAMW,CAAiBC,EAAyBC,GAC5CC,EAAqBZ,KAAKa,eAAgBH,EAAMC,E,CAGpD,MAAAG,GACI,MAAMZ,oBAAEA,EAAmBa,SAAEA,GAAa,CAAEb,oBAAqBF,KAAKE,oBAAqBa,SAAUf,KAAKE,oBAAsB,GAChI,OACIc,EAAA,MAAAZ,OAAAC,OAAA,CAAAY,IAAA,2CAAKC,MAAM,kBAAiB,iBACR,kBACfC,MAAOnB,KAAKoB,UACZC,KAAK,cAAa,gBACJ,IAAG,gBACH,MAAK,gBACJrB,KAAKW,MAAK,iBACTX,KAAKW,MAAQ,IAC7BW,IAAMf,GAAQP,KAAKa,eAAiBN,GAChCP,KAAKC,qBACVe,EAAA,OAAAC,IAAA,uDAAe,SAASC,MAAM,cACzBK,QAAS,OAAOrB,KAAuBA,KACxCc,EAAA,UAAAC,IAAA,2CAAQO,GAAIT,EAAUU,GAAIV,EAAUW,EAAG,GAAE,eAAgB,MAE7DV,EAAA,OAAAC,IAAA,2CAAKC,MAAM,yBAAwB,YACrB,SACVK,QAAS,OAAOrB,KAAuBA,IACvCiB,MAAOnB,KAAK2B,eACRX,EAAA,UAAAC,IAAA,2CAAQC,MAAM,wBAAwBM,GAAIT,EAAUU,GAAIV,EAAUW,EAAE,KAAI,eAAc,QAE7F1B,KAAK4B,WACFZ,EAAA,OAAAC,IAAA,2CAAKC,MAAM,wBAAuB,YAAW,SACzCF,EAAA,QAAAC,IAAA,4CACID,EAAA,QAAAC,IAAA,uDAAgB,cAAcjB,KAAKW,OAAaK,EAAA,OAAAC,IAAA,mD,CAQxE,WAAAU,GACI,MAAO,CACH,mBAAoB,UACpB,oBAAqB,GAAG,QAAW3B,KAAKW,MAAQ,IAAO,U,CAI/D,OAAAS,GACI,MAAO,CACHS,MAAS,GAAI7B,KAAS,SACtB8B,OAAU,GAAI9B,KAAS,S"}

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

@@ -0,0 +1,2 @@
+import{r as e,h as b,H as s}from"./p-32e583ea.js";const a=class{constructor(b){e(this,b)}render(){return b(s,{key:"a051b09993d67bf56b087d86ba433caf1bdbb7a6",slot:"label"},b("slot",{key:"6044b728151fd48878f555d3db3e0754f31b7e51"}))}};export{a as wcs_field_label};
+//# sourceMappingURL=p-c211a5d1.entry.js.map

package/dist/wcs/{p-206c01d5.entry.js → p-c261eaf9.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as e,a,h as r,H as s,g as i}from"./p-32e583ea.js";import{r as o,i as c,a as n,y as d,s as l}from"./p-52d77e1f.js";const h=":host{--wcs-textarea-text-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-textarea-value-color:var(--wcs-semantic-color-text-primary);--wcs-textarea-value-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-textarea-placeholder-color:var(--wcs-semantic-color-text-tertiary);--wcs-textarea-placeholder-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-textarea-placeholder-font-style:var(--wcs-semantic-font-style-control-placeholder);--wcs-textarea-icon-color-default:var(--wcs-semantic-color-foreground-brand);--wcs-textarea-icon-color-disabled:var(--wcs-semantic-color-foreground-disabled);--wcs-textarea-icon-color-focus:var(--wcs-semantic-color-foreground-brand);--wcs-textarea-border-color-default:var(--wcs-semantic-color-border-primary);--wcs-textarea-border-color-disabled:var(--wcs-semantic-color-border-disabled);--wcs-textarea-border-color-error:var(--wcs-semantic-color-border-critical);--wcs-textarea-border-color-focus:var(--wcs-semantic-color-border-control-focus);--wcs-textarea-border-style-default:solid;--wcs-textarea-border-style-error:solid;--wcs-textarea-border-style-focus:var(--wcs-semantic-border-style-focus-control);--wcs-internal-textarea-border-radius-left:var(--wcs-textarea-border-radius-left, var(--wcs-semantic-border-radius-base));--wcs-internal-textarea-border-radius-right:var(--wcs-textarea-border-radius-right, var(--wcs-semantic-border-radius-base));--wcs-textarea-border-width:var(--wcs-semantic-border-width-default);--wcs-textarea-border-width-focus:var(--wcs-semantic-border-width-large);--wcs-textarea-gap:var(--wcs-semantic-spacing-base);--wcs-textarea-padding-top:var(--wcs-semantic-spacing-base);--wcs-textarea-padding-bottom:var(--wcs-semantic-spacing-base);--wcs-internal-textarea-padding-left:var(--wcs-textarea-padding-left, var(--wcs-semantic-spacing-large));--wcs-internal-textarea-padding-right:var(--wcs-textarea-padding-right, var(--wcs-semantic-spacing-large));--wcs-textarea-min-height:var(--wcs-semantic-size-m);--wcs-internal-textarea-max-height:var(--wcs-textarea-max-height, unset);--wcs-textarea-background-color:var(--wcs-semantic-color-background-control-default);display:flex;flex-direction:row;align-items:center;gap:var(--wcs-textarea-gap);width:100%;border-radius:var(--wcs-internal-textarea-border-radius-left) var(--wcs-internal-textarea-border-radius-right) var(--wcs-internal-textarea-border-radius-right) var(--wcs-internal-textarea-border-radius-left);background-color:var(--wcs-textarea-background-color);outline:var(--wcs-textarea-border-style-default) var(--wcs-textarea-border-width) var(--wcs-textarea-border-color-default);outline-offset:calc(-1 * var(--wcs-textarea-border-width));background-clip:padding-box;box-sizing:border-box}:host textarea{box-sizing:border-box;font-family:inherit;overflow:auto;flex:1;width:100%;min-height:var(--wcs-textarea-min-height);max-height:var(--wcs-internal-textarea-max-height);background-color:transparent;color:var(--wcs-textarea-value-color);font-weight:var(--wcs-textarea-value-font-weight) !important;border:none;padding-top:var(--wcs-textarea-padding-top);padding-bottom:var(--wcs-textarea-padding-bottom);padding-left:var(--wcs-internal-textarea-padding-left);padding-right:var(--wcs-internal-textarea-padding-right);font-size:1rem;line-height:1.5}:host textarea::placeholder{color:var(--wcs-textarea-placeholder-color);opacity:1;font-weight:var(--wcs-textarea-placeholder-font-weight);font-style:var(--wcs-textarea-placeholder-font-style)}:host textarea:focus{box-shadow:none;outline:0}:host wcs-mat-icon{margin-left:var(--wcs-internal-textarea-padding-left);color:var(--wcs-textarea-icon-color-default)}:host([disabled]){--wcs-textarea-background-color:var(--wcs-semantic-color-background-control-disabled);outline:var(--wcs-textarea-border-style-default) var(--wcs-textarea-border-width) var(--wcs-textarea-border-color-disabled)}:host([disabled]) textarea{color:var(--wcs-textarea-text-color-disabled);cursor:not-allowed}:host([disabled]) textarea::placeholder{color:var(--wcs-textarea-text-color-disabled)}:host([disabled]) wcs-mat-icon{color:var(--wcs-textarea-icon-color-disabled)}:host([icon]) textarea{padding-left:0}:host([state=error]){outline-color:var(--wcs-textarea-border-color-error) !important}:host(:focus-within){outline:var(--wcs-textarea-border-style-focus) var(--wcs-textarea-border-width-focus) var(--wcs-textarea-border-color-focus);outline-offset:calc(var(--wcs-textarea-border-width-focus) * -1)}:host(:focus-within) wcs-mat-icon{color:var(--wcs-textarea-icon-color-focus)}";const w=h;const u=["tabindex","title"];const x=class{constructor(a){t(this,a);this.wcsChange=e(this,"wcsChange",7);this.wcsInput=e(this,"wcsInput",7);this.wcsBlur=e(this,"wcsBlur",7);this.wcsFocus=e(this,"wcsFocus",7);this.inputId=`wcs-textarea-${b++}`;this.inheritedAttributes={};this.onInput=t=>{if(this.nativeInput){this.value=this.nativeInput.value}this.wcsInput.emit(t)};this.onChange=t=>{this.wcsChange.emit({value:this.nativeInput.value})};this.onFocus=t=>{if(this.fireFocusEvents){this.wcsFocus.emit(t)}};this.onBlur=t=>{if(this.fireFocusEvents){this.wcsBlur.emit(t)}};this.fireFocusEvents=true;this.autocapitalize="none";this.autofocus=false;this.debounce=0;this.disabled=false;this.icon=undefined;this.inputmode=undefined;this.enterkeyhint=undefined;this.maxlength=undefined;this.minlength=undefined;this.name=this.inputId;this.placeholder=undefined;this.readonly=false;this.required=false;this.spellcheck=false;this.state="initial";this.cols=undefined;this.rows=undefined;this.wrap=undefined;this.autoGrow=false;this.value="";this.resize=undefined}debounceChanged(){this.wcsInput=o(this.wcsInput,this.debounce)}valueChanged(){const t=this.nativeInput;const e=this.getValue();if(t&&t.value!==e){t.value=e}this.runAutoGrow()}connectedCallback(){this.debounceChanged();{document.dispatchEvent(new CustomEvent("wcsInputDidLoad",{detail:this.el}))}}disconnectedCallback(){{document.dispatchEvent(new CustomEvent("wcsInputDidUnload",{detail:this.el}))}}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},c(this.el)),n(this.el,u))}componentDidLoad(){d((()=>this.runAutoGrow()))}runAutoGrow(){const t=this.nativeInput;if(t&&this.autoGrow){a((()=>{t.style.height="auto";t.style.height=t.scrollHeight+"px"}))}}async setAriaAttribute(t,e){l(this.nativeInput,t,e)}async fitContent(){d((()=>this.runAutoGrow()))}async setBlur(){if(this.nativeInput){this.nativeInput.blur()}}getInputElement(){return Promise.resolve(this.nativeInput)}getValue(){return this.value||""}render(){const t=this.getValue();const e=Object.assign({},this.resize&&{resize:this.resize});return r(s,{key:"d2f0cea260f9745f49f4aa259004b704af492c33","aria-disabled":this.disabled?"true":null},this.icon?r("wcs-mat-icon",{icon:this.icon,size:"m"}):null,r("textarea",Object.assign({key:"a5c87bbb2888132fd62f26df0f36e5d4e003ad84",class:"native-textarea",ref:t=>this.nativeInput=t,autoCapitalize:this.autocapitalize,autoFocus:this.autofocus,enterKeyHint:this.enterkeyhint,inputMode:this.inputmode,disabled:this.disabled,maxLength:this.maxlength,minLength:this.minlength,name:this.name,placeholder:this.placeholder||"",readOnly:this.readonly,required:this.required,spellcheck:this.spellcheck,cols:this.cols,rows:this.rows,wrap:this.wrap,onInput:this.onInput,onChange:this.onChange,onBlur:this.onBlur,onFocus:this.onFocus,style:e},this.inheritedAttributes),t))}static get delegatesFocus(){return true}get el(){return i(this)}static get watchers(){return{debounce:["debounceChanged"],value:["valueChanged"]}}};let b=0;x.style=w;export{x as wcs_textarea};
-//# sourceMappingURL=p-206c01d5.entry.js.map
+import{r as t,c as e,a,h as r,H as s,g as i}from"./p-32e583ea.js";import{r as o,i as c,a as n,y as d,s as l}from"./p-52d77e1f.js";const h=":host{--wcs-textarea-text-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-textarea-value-color:var(--wcs-semantic-color-text-primary);--wcs-textarea-value-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-textarea-placeholder-color:var(--wcs-semantic-color-text-tertiary);--wcs-textarea-placeholder-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-textarea-placeholder-font-style:var(--wcs-semantic-font-style-control-placeholder);--wcs-textarea-icon-color-default:var(--wcs-semantic-color-foreground-brand);--wcs-textarea-icon-color-disabled:var(--wcs-semantic-color-foreground-disabled);--wcs-textarea-icon-color-focus:var(--wcs-semantic-color-foreground-brand);--wcs-textarea-border-color-default:var(--wcs-semantic-color-border-primary);--wcs-textarea-border-color-disabled:var(--wcs-semantic-color-border-disabled);--wcs-textarea-border-color-error:var(--wcs-semantic-color-border-critical);--wcs-textarea-border-color-focus:var(--wcs-semantic-color-border-control-focus);--wcs-textarea-border-style-default:solid;--wcs-textarea-border-style-error:solid;--wcs-textarea-border-style-focus:var(--wcs-semantic-border-style-focus-control);--wcs-internal-textarea-border-radius-left:var(--wcs-textarea-border-radius-left, var(--wcs-semantic-border-radius-base));--wcs-internal-textarea-border-radius-right:var(--wcs-textarea-border-radius-right, var(--wcs-semantic-border-radius-base));--wcs-textarea-border-width:var(--wcs-semantic-border-width-default);--wcs-textarea-border-width-focus:var(--wcs-semantic-border-width-large);--wcs-textarea-gap:var(--wcs-semantic-spacing-base);--wcs-textarea-padding-top:var(--wcs-semantic-spacing-base);--wcs-textarea-padding-bottom:var(--wcs-semantic-spacing-base);--wcs-internal-textarea-padding-left:var(--wcs-textarea-padding-left, var(--wcs-semantic-spacing-large));--wcs-internal-textarea-padding-right:var(--wcs-textarea-padding-right, var(--wcs-semantic-spacing-large));--wcs-textarea-min-height:var(--wcs-semantic-size-m);--wcs-internal-textarea-max-height:var(--wcs-textarea-max-height, unset);--wcs-textarea-background-color:var(--wcs-semantic-color-background-control-default);display:flex;flex-direction:row;align-items:center;gap:var(--wcs-textarea-gap);width:100%;border-radius:var(--wcs-internal-textarea-border-radius-left) var(--wcs-internal-textarea-border-radius-right) var(--wcs-internal-textarea-border-radius-right) var(--wcs-internal-textarea-border-radius-left);background-color:var(--wcs-textarea-background-color);outline:var(--wcs-textarea-border-style-default) var(--wcs-textarea-border-width) var(--wcs-textarea-border-color-default);outline-offset:calc(-1 * var(--wcs-textarea-border-width));background-clip:padding-box;box-sizing:border-box}:host textarea{box-sizing:border-box;font-family:inherit;overflow:auto;flex:1;width:100%;min-height:var(--wcs-textarea-min-height);max-height:var(--wcs-internal-textarea-max-height);background-color:transparent;color:var(--wcs-textarea-value-color);font-weight:var(--wcs-textarea-value-font-weight) !important;border:none;padding-top:var(--wcs-textarea-padding-top);padding-bottom:var(--wcs-textarea-padding-bottom);padding-left:var(--wcs-internal-textarea-padding-left);padding-right:var(--wcs-internal-textarea-padding-right);font-size:1rem;line-height:1.5}:host textarea::placeholder{color:var(--wcs-textarea-placeholder-color);opacity:1;font-weight:var(--wcs-textarea-placeholder-font-weight);font-style:var(--wcs-textarea-placeholder-font-style)}:host textarea:focus{box-shadow:none;outline:0}:host wcs-mat-icon{margin-left:var(--wcs-internal-textarea-padding-left);color:var(--wcs-textarea-icon-color-default)}:host([disabled]){--wcs-textarea-background-color:var(--wcs-semantic-color-background-control-disabled);outline:var(--wcs-textarea-border-style-default) var(--wcs-textarea-border-width) var(--wcs-textarea-border-color-disabled)}:host([disabled]) textarea{color:var(--wcs-textarea-text-color-disabled);cursor:not-allowed}:host([disabled]) textarea::placeholder{color:var(--wcs-textarea-text-color-disabled)}:host([disabled]) wcs-mat-icon{color:var(--wcs-textarea-icon-color-disabled)}:host([icon]) textarea{padding-left:0}:host([state=error]){outline-color:var(--wcs-textarea-border-color-error) !important}:host(:focus-within){outline:var(--wcs-textarea-border-style-focus) var(--wcs-textarea-border-width-focus) var(--wcs-textarea-border-color-focus);outline-offset:calc(var(--wcs-textarea-border-width-focus) * -1)}:host(:focus-within) wcs-mat-icon{color:var(--wcs-textarea-icon-color-focus)}";const w=h;const u=["tabindex","title"];const x=class{constructor(a){t(this,a);this.wcsChange=e(this,"wcsChange",7);this.wcsInput=e(this,"wcsInput",7);this.wcsBlur=e(this,"wcsBlur",7);this.wcsFocus=e(this,"wcsFocus",7);this.inputId=`wcs-textarea-${b++}`;this.inheritedAttributes={};this.onInput=t=>{if(this.nativeInput){this.value=this.nativeInput.value}this.wcsInput.emit(t)};this.onChange=t=>{this.wcsChange.emit({value:this.nativeInput.value})};this.onFocus=t=>{if(this.fireFocusEvents){this.wcsFocus.emit(t)}};this.onBlur=t=>{if(this.fireFocusEvents){this.wcsBlur.emit(t)}};this.fireFocusEvents=true;this.autocapitalize="none";this.autofocus=false;this.debounce=0;this.disabled=false;this.icon=undefined;this.inputmode=undefined;this.enterkeyhint=undefined;this.maxlength=undefined;this.minlength=undefined;this.name=this.inputId;this.placeholder=undefined;this.readonly=false;this.required=false;this.spellcheck=false;this.state="initial";this.cols=undefined;this.rows=undefined;this.wrap=undefined;this.autoGrow=false;this.value="";this.resize=undefined}debounceChanged(){this.wcsInput=o(this.wcsInput,this.debounce)}valueChanged(){const t=this.nativeInput;const e=this.getValue();if(t&&t.value!==e){t.value=e}this.runAutoGrow()}connectedCallback(){this.debounceChanged();{document.dispatchEvent(new CustomEvent("wcsInputDidLoad",{detail:this.el}))}}disconnectedCallback(){{document.dispatchEvent(new CustomEvent("wcsInputDidUnload",{detail:this.el}))}}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},c(this.el)),n(this.el,u))}componentDidLoad(){d((()=>this.runAutoGrow()))}runAutoGrow(){const t=this.nativeInput;if(t&&this.autoGrow){a((()=>{t.style.height="auto";t.style.height=t.scrollHeight+"px"}))}}async setAriaAttribute(t,e){l(this.nativeInput,t,e)}async fitContent(){d((()=>this.runAutoGrow()))}async setBlur(){if(this.nativeInput){this.nativeInput.blur()}}getInputElement(){return Promise.resolve(this.nativeInput)}getValue(){return this.value||""}render(){const t=this.getValue();const e=Object.assign({},this.resize&&{resize:this.resize});return r(s,{key:"2ffd19f34c0feb9a49931942e48d7b7193ff377e","aria-disabled":this.disabled?"true":null},this.icon?r("wcs-mat-icon",{icon:this.icon,size:"m"}):null,r("textarea",Object.assign({key:"ce0c430d962cf93b962c7a6227ec98d6cfcc46f0",class:"native-textarea",ref:t=>this.nativeInput=t,autoCapitalize:this.autocapitalize,autoFocus:this.autofocus,enterKeyHint:this.enterkeyhint,inputMode:this.inputmode,disabled:this.disabled,maxLength:this.maxlength,minLength:this.minlength,name:this.name,placeholder:this.placeholder||"",readOnly:this.readonly,required:this.required,spellcheck:this.spellcheck,cols:this.cols,rows:this.rows,wrap:this.wrap,onInput:this.onInput,onChange:this.onChange,onBlur:this.onBlur,onFocus:this.onFocus,style:e},this.inheritedAttributes),t))}static get delegatesFocus(){return true}get el(){return i(this)}static get watchers(){return{debounce:["debounceChanged"],value:["valueChanged"]}}};let b=0;x.style=w;export{x as wcs_textarea};
+//# sourceMappingURL=p-c261eaf9.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["textareaCss","WcsTextareaStyle0","TEXTAREA_INHERITED_ATTRS","Textarea","this","inputId","textareaIds","inheritedAttributes","onInput","ev","nativeInput","value","wcsInput","emit","onChange","_","wcsChange","onFocus","fireFocusEvents","wcsFocus","onBlur","wcsBlur","debounceChanged","debounceEvent","debounce","valueChanged","getValue","runAutoGrow","connectedCallback","document","dispatchEvent","CustomEvent","detail","el","disconnectedCallback","componentWillLoad","Object","assign","inheritAriaAttributes","inheritAttributes","componentDidLoad","raf","autoGrow","readTask","style","height","scrollHeight","setAriaAttribute","attr","setOrRemoveAttribute","fitContent","setBlur","blur","getInputElement","Promise","resolve","render","resize","h","Host","key","disabled","icon","size","class","ref","autoCapitalize","autocapitalize","autoFocus","autofocus","enterKeyHint","enterkeyhint","inputMode","inputmode","maxLength","maxlength","minLength","minlength","name","placeholder","readOnly","readonly","required","spellcheck","cols","rows","wrap"],"sources":["src/components/textarea/textarea.scss?tag=wcs-textarea&encapsulation=shadow","src/components/textarea/textarea.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n@import '../../style/placeholder.scss';\n\n:host {\n    --wcs-textarea-text-color-disabled: var(--wcs-semantic-color-text-disabled);\n    --wcs-textarea-value-color: var(--wcs-semantic-color-text-primary);\n    --wcs-textarea-value-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-textarea-placeholder-color: var(--wcs-semantic-color-text-tertiary);\n    --wcs-textarea-placeholder-font-weight: var(--wcs-semantic-font-weight-roman);\n    --wcs-textarea-placeholder-font-style: var(--wcs-semantic-font-style-control-placeholder);\n\n    --wcs-textarea-icon-color-default: var(--wcs-semantic-color-foreground-brand);\n    --wcs-textarea-icon-color-disabled: var(--wcs-semantic-color-foreground-disabled);\n    --wcs-textarea-icon-color-focus: var(--wcs-semantic-color-foreground-brand);\n\n    --wcs-textarea-border-color-default: var(--wcs-semantic-color-border-primary);\n    --wcs-textarea-border-color-disabled: var(--wcs-semantic-color-border-disabled);\n    --wcs-textarea-border-color-error: var(--wcs-semantic-color-border-critical);\n    --wcs-textarea-border-color-focus: var(--wcs-semantic-color-border-control-focus);\n\n    --wcs-textarea-border-style-default: solid;\n    --wcs-textarea-border-style-error: solid;\n    --wcs-textarea-border-style-focus: var(--wcs-semantic-border-style-focus-control);\n\n    --wcs-internal-textarea-border-radius-left: var(--wcs-textarea-border-radius-left, var(--wcs-semantic-border-radius-base)); // Overridden from prefix suffix group in form-field\n    --wcs-internal-textarea-border-radius-right: var(--wcs-textarea-border-radius-right, var(--wcs-semantic-border-radius-base)); // Overridden from prefix suffix group in form-field\n\n    --wcs-textarea-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-textarea-border-width-focus: var(--wcs-semantic-border-width-large);\n\n    --wcs-textarea-gap: var(--wcs-semantic-spacing-base);\n\n    --wcs-textarea-padding-top: var(--wcs-semantic-spacing-base);\n    --wcs-textarea-padding-bottom: var(--wcs-semantic-spacing-base);\n    --wcs-internal-textarea-padding-left: var(--wcs-textarea-padding-left, var(--wcs-semantic-spacing-large));\n    --wcs-internal-textarea-padding-right: var(--wcs-textarea-padding-right, var(--wcs-semantic-spacing-large));\n\n    --wcs-textarea-min-height: var(--wcs-semantic-size-m);\n    --wcs-internal-textarea-max-height: var(--wcs-textarea-max-height, unset);\n\n    --wcs-textarea-background-color: var(--wcs-semantic-color-background-control-default);\n\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--wcs-textarea-gap);\n    width: 100%;\n    border-radius: var(--wcs-internal-textarea-border-radius-left) var(--wcs-internal-textarea-border-radius-right) var(--wcs-internal-textarea-border-radius-right) var(--wcs-internal-textarea-border-radius-left);\n    background-color: var(--wcs-textarea-background-color);\n    outline: var(--wcs-textarea-border-style-default) var(--wcs-textarea-border-width) var(--wcs-textarea-border-color-default);\n    outline-offset: calc(-1 * var(--wcs-textarea-border-width));\n    background-clip: padding-box;\n\n    box-sizing: border-box;\n\n    textarea {\n        box-sizing: border-box;\n        font-family: inherit;\n        overflow: auto;\n        flex: 1;\n        width: 100%;\n        min-height: var(--wcs-textarea-min-height);\n        max-height: var(--wcs-internal-textarea-max-height);\n        background-color: transparent;\n        color: var(--wcs-textarea-value-color);\n        font-weight: var(--wcs-textarea-value-font-weight) !important;\n        border: none;\n        padding-top: var(--wcs-textarea-padding-top);\n        padding-bottom: var(--wcs-textarea-padding-bottom);\n        padding-left: var(--wcs-internal-textarea-padding-left);\n        padding-right: var(--wcs-internal-textarea-padding-right);\n        font-size: 1rem;\n        line-height: 1.5;\n\n        &::placeholder {\n            @include placeholder(var(--wcs-textarea-placeholder-color), var(--wcs-textarea-placeholder-font-weight), var(--wcs-textarea-placeholder-font-style));\n        }\n    }\n\n    textarea:focus {\n        box-shadow: none;\n        outline: 0;\n    }\n\n    wcs-mat-icon {\n        margin-left: var(--wcs-internal-textarea-padding-left);\n        color: var(--wcs-textarea-icon-color-default);\n    }\n}\n\n:host([disabled]) {\n    --wcs-textarea-background-color: var(--wcs-semantic-color-background-control-disabled);\n    outline: var(--wcs-textarea-border-style-default) var(--wcs-textarea-border-width) var(--wcs-textarea-border-color-disabled);\n\n    textarea {\n        color: var(--wcs-textarea-text-color-disabled);\n        cursor: not-allowed;\n\n        &::placeholder {\n            color: var(--wcs-textarea-text-color-disabled);\n        }\n    }\n\n    wcs-mat-icon {\n        color: var(--wcs-textarea-icon-color-disabled);\n    }\n}\n\n:host([icon]) {\n    textarea {\n        padding-left: 0;\n    }\n}\n\n:host([state=error]) {\n    outline-color: var(--wcs-textarea-border-color-error) !important;\n}\n\n:host(:focus-within) {\n    outline: var(--wcs-textarea-border-style-focus) var(--wcs-textarea-border-width-focus) var(--wcs-textarea-border-color-focus);\n    outline-offset: calc(var(--wcs-textarea-border-width-focus) * -1);\n\n    wcs-mat-icon {\n        color: var(--wcs-textarea-icon-color-focus);\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Method,\n    Prop,\n    Watch,\n    h,\n    Host,\n    EventEmitter,\n    Element,\n    Event,\n    Build,\n    readTask\n} from '@stencil/core';\nimport {\n    debounceEvent,\n    inheritAriaAttributes,\n    inheritAttributes,\n    raf,\n    setOrRemoveAttribute\n} from '../../utils/helpers';\nimport { \n    TextareaChangeEventDetail,\n    WcsTextareaInputMode, \n    WcsTextareaEnterKeyHint, \n    WcsTextareaResize, \n    WcsTextareaInputState,\n    WcsTextareaWrap\n} from './textarea-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst TEXTAREA_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * Mainly inspired from Ionic Textarea Component.\n * \n * ## Accessibility guidelines 💡\n * > - If you use wcs-textarea outside a wcs-form-field, you have to manage the label and the error message yourself.\n * > You can use the `aria-label` attribute to provide a label for screen readers but adds no visual label.\n *\n * @cssprop --wcs-textarea-icon-color-default - Default icon color whe the textarea is not focused\n * @cssprop --wcs-textarea-icon-color-focus - Icon color when the textarea is focused \n * @cssprop --wcs-textarea-icon-color-disabled - Icon color when the textarea is disabled\n * \n * @cssprop --wcs-textarea-background-color - Background color of the textarea\n *\n * @cssprop --wcs-textarea-border-radius-left - Border radius of the left side of the textarea\n * @cssprop --wcs-textarea-border-radius-right - Border radius of the right side of the textarea\n * \n * @cssprop --wcs-textarea-border-width - Border width of the textarea when not focused\n * @cssprop --wcs-textarea-border-width-focus - Border width of the textarea when focused\n * \n * @cssprop --wcs-textarea-border-color-default - Default border color of the textarea when not focused\n * @cssprop --wcs-textarea-border-color-disabled - Border color of the textarea when disabled\n * @cssprop --wcs-textarea-border-color-error - Border color of the textarea when in error state\n * @cssprop --wcs-textarea-border-color-focus -  Border color of the textarea when focused\n * \n * @cssprop --wcs-textarea-value-color - Color of the value when the textarea is not focused\n * @cssprop --wcs-textarea-value-font-weight - Font weight of the textarea value\n * \n * @cssprop --wcs-textarea-placeholder-color - Color of the textarea placeholder\n * @cssprop --wcs-textarea-placeholder-font-weight - Font weight of the textarea placeholder\n * @cssprop --wcs-textarea-placeholder-font-style - Font style of the textarea placeholder\n * \n * @cssprop --wcs-textarea-text-color-disabled - Color of the value when the textarea is disabled\n * \n * @cssprop --wcs-textarea-border-style-default - Border style default of the textarea when not focused\n * @cssprop --wcs-textarea-border-style-error - Border style default of the textarea in error state\n * @cssprop --wcs-textarea-border-style-focus - Border style default of the textarea when focused\n * \n * @cssprop --wcs-textarea-min-height - Min height of the textarea component\n * @cssprop --wcs-textarea-max-height - Max height of the textarea component\n * \n * @cssprop --wcs-textarea-padding-top - Padding top of the textarea\n * @cssprop --wcs-textarea-padding-bottom - Padding bottom of the textarea\n * @cssprop --wcs-textarea-padding-left - Padding left of the textarea\n * @cssprop --wcs-textarea-padding-right - Padding right of the textarea\n * \n * @cssprop --wcs-textarea-gap - Gap between textarea and icon (prefix/suffix)\n */\n@Component({\n    tag: 'wcs-textarea',\n    styleUrl: 'textarea.scss',\n    shadow: {\n        delegatesFocus: true\n    },\n})\nexport class Textarea implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeInput?: HTMLTextAreaElement;\n    private inputId = `wcs-textarea-${textareaIds++}`;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /**\n     * This is required for a WebKit bug which requires us to\n     * blur and focus an input to properly focus the input in\n     * an item with delegatesFocus. It will no longer be needed\n     * with iOS 14.\n     *\n     * @internal\n     */\n    @Prop() fireFocusEvents: boolean = true;\n\n    /**\n     * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n     */\n    @Prop() autocapitalize = 'none';\n\n    /**\n     * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n     */\n    @Prop() autofocus: boolean = false;\n\n    /**\n     * Set the amount of time, in milliseconds, to wait to trigger the `wcsInput` event after each keystroke.\n     * This also impacts form bindings such as `ngModel` or `v-model`.\n     */\n    @Prop() debounce = 0;\n\n    @Watch('debounce')\n    protected debounceChanged() {\n        this.wcsInput = debounceEvent(this.wcsInput, this.debounce);\n    }\n\n    /**\n     * If `true`, the user cannot interact with the textarea.\n     */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /**\n     * Name of the material icon to add to the input\n     */\n    @Prop() icon: string;\n\n    /**\n     * A hint to the browser for which keyboard to display.\n     */\n    @Prop() inputmode?: WcsTextareaInputMode;\n\n    /**\n     * A hint to the browser for which enter key to display.\n     */\n    @Prop() enterkeyhint?: WcsTextareaEnterKeyHint;\n\n    /**\n     * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.\n     */\n    @Prop() maxlength?: number;\n\n    /**\n     * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.\n     */\n    @Prop() minlength?: number;\n\n    /**\n     * The name of the control, which is submitted with the form data.\n     */\n    @Prop() name: string = this.inputId;\n\n    /**\n     * Instructional text that shows before the input has a value.\n     */\n    @Prop() placeholder?: string | null;\n\n    /**\n     * If `true`, the user cannot modify the value.\n     */\n    @Prop({ reflect: true }) readonly: boolean = false;\n\n    /**\n     * If `true`, the user must fill in a value before submitting a form.\n     */\n    @Prop({ reflect: true }) required: boolean = false;\n\n    /**\n     * If `true`, the element will have its spelling and grammar checked.\n     */\n    @Prop() spellcheck: boolean = false;\n\n    /**\n     * Specifies the state of the input. By default the input is in an initial state but you can set it to 'error' state if the data given by the user is not valid.\n     */\n    @Prop({reflect: true}) state: WcsTextareaInputState = 'initial';\n\n    /**\n     * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.  \n     * Note : at the moment, modifying the width is only possible if you add some custom CSS to the component,\n     * for example by overriding the `width` CSS property. See the Resize section for an example on how to do it.\n     */\n    @Prop() cols?: number;\n\n    /**\n     * The number of visible text lines for the control.\n     */\n    @Prop() rows?: number;\n\n    /**\n     * Indicates how the control wraps text.\n     */\n    @Prop() wrap?: WcsTextareaWrap;\n\n    /**\n     * If `true`, the element height will increase based on the value.\n     */\n    @Prop({ reflect: true }) autoGrow: boolean = false;\n\n    /**\n     * The value of the textarea.\n     */\n    @Prop({mutable: true}) value?: string | null = '';\n\n    /**\n     * Indicates how the textarea should be resizable.  \n     * Note : at the moment horizontal resizing is only possible if you add custom CSS to the component,\n     * see the Resize section for an example.\n     */\n    @Prop({reflect: true}) resize?: WcsTextareaResize;\n\n    /**\n     * Update the native input element when the value changes\n     */\n    @Watch('value')\n    protected valueChanged() {\n        const nativeInput = this.nativeInput;\n        const value = this.getValue();\n        if (nativeInput && nativeInput.value !== value) {\n            nativeInput.value = value;\n        }\n        this.runAutoGrow();\n    }\n\n    /**\n     * Emitted when the input value has changed.- See https://developer.mozilla.org/en-US/docs/Web/Events/change\n     */\n    @Event() wcsChange!: EventEmitter<TextareaChangeEventDetail>;\n\n    /**\n     * Emitted when a keyboard input occurred. See https://developer.mozilla.org/en-US/docs/Web/Events/input\n     */\n    @Event() wcsInput!: EventEmitter<KeyboardEvent>;\n\n    /**\n     * Emitted when the input loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    /**\n     * Emitted when the input has focus.\n     */\n    @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n    connectedCallback() {\n        this.debounceChanged();\n        if (Build.isBrowser) {\n            document.dispatchEvent(new CustomEvent('wcsInputDidLoad', {\n                detail: this.el\n            }));\n        }\n    }\n\n    disconnectedCallback() {\n        if (Build.isBrowser) {\n            document.dispatchEvent(new CustomEvent('wcsInputDidUnload', {\n                detail: this.el\n            }));\n        }\n    }\n\n    componentWillLoad() {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, TEXTAREA_INHERITED_ATTRS)\n        };\n    }\n\n    componentDidLoad() {\n        raf(() => this.runAutoGrow());\n    }\n\n    private runAutoGrow() {\n        const nativeInput = this.nativeInput;\n        if (nativeInput && this.autoGrow) {\n            readTask(() => {\n                nativeInput.style.height = 'auto';\n                nativeInput.style.height = nativeInput.scrollHeight + 'px';\n            });\n        }\n    }\n    \n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeInput, attr, value);\n    }\n\n    /**\n     * This method make the textarea automatically adopt the size of the content without a scroll bar\n     */\n    @Method()\n    async fitContent() {\n        raf(() => this.runAutoGrow());\n    }\n\n    /**\n     * Sets blur on the native `textarea` in `wcs-textarea`. Use this method instead of the global\n     * `textarea.blur()`.\n     * @internal\n     */\n    @Method()\n    async setBlur() {\n        if (this.nativeInput) {\n            this.nativeInput.blur();\n        }\n    }\n\n    /**\n     * Returns the native `<textarea>` element used under the hood.\n     */\n    @Method()\n    getInputElement(): Promise<HTMLTextAreaElement> {\n        // tslint:disable-next-line:no-non-null-assertion\n        return Promise.resolve(this.nativeInput!);\n    }\n\n    private getValue(): string {\n        return this.value || '';\n    }\n\n    private onInput = (ev: Event) => {\n        if (this.nativeInput) {\n            this.value = this.nativeInput.value;\n        }\n        this.wcsInput.emit(ev as KeyboardEvent);\n    }\n    \n    private onChange = (_: Event) => {\n        this.wcsChange.emit({value: this.nativeInput.value});\n    }\n\n    private onFocus = (ev: FocusEvent) => {\n        if (this.fireFocusEvents) {\n            this.wcsFocus.emit(ev);\n        }\n    }\n\n    private onBlur = (ev: FocusEvent) => {\n        if (this.fireFocusEvents) {\n            this.wcsBlur.emit(ev);\n        }\n    }\n\n    render() {\n        const value = this.getValue();\n        const style = {\n            ...(this.resize && {'resize': this.resize})\n        }\n\n        return (\n            <Host\n                aria-disabled={this.disabled ? 'true' : null}\n            >\n                {this.icon ? (<wcs-mat-icon icon={this.icon} size=\"m\"></wcs-mat-icon>) : null}\n                <textarea\n                    class=\"native-textarea\"\n                    ref={el => this.nativeInput = el}\n                    autoCapitalize={this.autocapitalize}\n                    autoFocus={this.autofocus}\n                    enterKeyHint={this.enterkeyhint}\n                    inputMode={this.inputmode}\n                    disabled={this.disabled}\n                    maxLength={this.maxlength}\n                    minLength={this.minlength}\n                    name={this.name}\n                    placeholder={this.placeholder || ''}\n                    readOnly={this.readonly}\n                    required={this.required}\n                    spellcheck={this.spellcheck}\n                    cols={this.cols}\n                    rows={this.rows}\n                    wrap={this.wrap}\n                    onInput={this.onInput}\n                    onChange={this.onChange}\n                    onBlur={this.onBlur}\n                    onFocus={this.onFocus}\n                    style={style}\n                    {...this.inheritedAttributes}\n                >\n            {value}\n          </textarea>\n            </Host>\n        );\n    }\n}\n\nlet textareaIds = 0;\n"],"mappings":"kIAAA,MAAMA,EAAc,s8IACpB,MAAAC,EAAeD,EC8Bf,MAAME,EAA2B,CAAC,WAAY,S,MAwDjCC,EAAQ,M,qKAGTC,KAAAC,QAAU,gBAAgBC,MAC1BF,KAAAG,oBAA4C,GA4O5CH,KAAAI,QAAWC,IACf,GAAIL,KAAKM,YAAa,CAClBN,KAAKO,MAAQP,KAAKM,YAAYC,K,CAElCP,KAAKQ,SAASC,KAAKJ,EAAoB,EAGnCL,KAAAU,SAAYC,IAChBX,KAAKY,UAAUH,KAAK,CAACF,MAAOP,KAAKM,YAAYC,OAAO,EAGhDP,KAAAa,QAAWR,IACf,GAAIL,KAAKc,gBAAiB,CACtBd,KAAKe,SAASN,KAAKJ,E,GAInBL,KAAAgB,OAAUX,IACd,GAAIL,KAAKc,gBAAiB,CACtBd,KAAKiB,QAAQR,KAAKJ,E,wBArPS,K,oBAKV,O,eAKI,M,cAMV,E,cAU0B,M,qIA8BtBL,KAAKC,Q,yCAUiB,M,cAKA,M,gBAKf,M,WAKwB,U,0EAsBT,M,WAKE,G,sBAzFrC,eAAAiB,GACNlB,KAAKQ,SAAWW,EAAcnB,KAAKQ,SAAUR,KAAKoB,S,CAqG5C,YAAAC,GACN,MAAMf,EAAcN,KAAKM,YACzB,MAAMC,EAAQP,KAAKsB,WACnB,GAAIhB,GAAeA,EAAYC,QAAUA,EAAO,CAC5CD,EAAYC,MAAQA,C,CAExBP,KAAKuB,a,CAuBT,iBAAAC,GACIxB,KAAKkB,kBACgB,CACjBO,SAASC,cAAc,IAAIC,YAAY,kBAAmB,CACtDC,OAAQ5B,KAAK6B,K,EAKzB,oBAAAC,GACyB,CACjBL,SAASC,cAAc,IAAIC,YAAY,oBAAqB,CACxDC,OAAQ5B,KAAK6B,K,EAKzB,iBAAAE,GACI/B,KAAKG,oBAAmB6B,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsBlC,KAAK6B,KAC3BM,EAAkBnC,KAAK6B,GAAI/B,G,CAItC,gBAAAsC,GACIC,GAAI,IAAMrC,KAAKuB,e,CAGX,WAAAA,GACJ,MAAMjB,EAAcN,KAAKM,YACzB,GAAIA,GAAeN,KAAKsC,SAAU,CAC9BC,GAAS,KACLjC,EAAYkC,MAAMC,OAAS,OAC3BnC,EAAYkC,MAAMC,OAASnC,EAAYoC,aAAe,IAAI,G,EAMtE,sBAAMC,CAAiBC,EAAyBrC,GAC5CsC,EAAqB7C,KAAKM,YAAasC,EAAMrC,E,CAOjD,gBAAMuC,GACFT,GAAI,IAAMrC,KAAKuB,e,CASnB,aAAMwB,GACF,GAAI/C,KAAKM,YAAa,CAClBN,KAAKM,YAAY0C,M,EAQzB,eAAAC,GAEI,OAAOC,QAAQC,QAAQnD,KAAKM,Y,CAGxB,QAAAgB,GACJ,OAAOtB,KAAKO,OAAS,E,CA0BzB,MAAA6C,GACI,MAAM7C,EAAQP,KAAKsB,WACnB,MAAMkB,EAAKR,OAAAC,OAAA,GACHjC,KAAKqD,QAAU,CAACA,OAAUrD,KAAKqD,SAGvC,OACIC,EAACC,EAAI,CAAAC,IAAA,2DACcxD,KAAKyD,SAAW,OAAS,MAEvCzD,KAAK0D,KAAQJ,EAAA,gBAAcI,KAAM1D,KAAK0D,KAAMC,KAAK,MAAuB,KACzEL,EAAA,WAAAtB,OAAAC,OAAA,CAAAuB,IAAA,2CACII,MAAM,kBACNC,IAAKhC,GAAM7B,KAAKM,YAAcuB,EAC9BiC,eAAgB9D,KAAK+D,eACrBC,UAAWhE,KAAKiE,UAChBC,aAAclE,KAAKmE,aACnBC,UAAWpE,KAAKqE,UAChBZ,SAAUzD,KAAKyD,SACfa,UAAWtE,KAAKuE,UAChBC,UAAWxE,KAAKyE,UAChBC,KAAM1E,KAAK0E,KACXC,YAAa3E,KAAK2E,aAAe,GACjCC,SAAU5E,KAAK6E,SACfC,SAAU9E,KAAK8E,SACfC,WAAY/E,KAAK+E,WACjBC,KAAMhF,KAAKgF,KACXC,KAAMjF,KAAKiF,KACXC,KAAMlF,KAAKkF,KACX9E,QAASJ,KAAKI,QACdM,SAAUV,KAAKU,SACfM,OAAQhB,KAAKgB,OACbH,QAASb,KAAKa,QACd2B,MAAOA,GACHxC,KAAKG,qBAEhBI,G,qJAOb,IAAIL,EAAc,E"}

package/dist/wcs/p-c5bad0b8.js

@@ -0,0 +1,2 @@
+import{h as e,r as a,c as i,H as t,g as s}from"./p-32e583ea.js";import{i as n,a as r,s as c}from"./p-52d77e1f.js";const o=(e,a)=>{switch(e){case"next":return a?"Dernière page":"Page suivante";case"previous":default:return a?"Première page":"Page précédente"}};const g=({active:a,order:i,double:t=false})=>e("wcs-button",{mode:"clear",shape:"square",size:"s",disabled:!a,title:o(i,t)},e("svg",{style:{cursor:"pointer"},"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",width:"24",height:"20",viewBox:"0 0 24 20"},e("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-grid-pagination-arrow-color-inactive, var(--wcs-button-color));\n              }\n              .second-arrow {\n                  transform: translateY(-8px);\n              }\n              .next {\n                  transform: rotate(90deg);\n              }\n              .previous {\n                  transform: rotate(-90deg);\n              }\n              .active {\n                  fill: var(--wcs-grid-pagination-arrow-color-active, var(--wcs-button-color));\n              }\n          `),e("g",{fill:"none",class:i+" arrow-group"},e("path",{class:(a?"active":"")+" arrow",d:"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"}),e("path",{d:"M0 0h24v24H0z",fill:"none"})),t?e("g",{fill:"none",class:i+" arrow-group"},e("path",{class:(a?"active":"")+" arrow second-arrow",d:"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"}),e("path",{d:"M0 0h24v24H0z",fill:"none"})):""));const d=":host{display:block;margin-top:var(--wcs-grid-pagination-margin-top);--wcs-grid-pagination-color:var(--wcs-semantic-color-text-primary);--wcs-grid-pagination-font-size:var(--wcs-semantic-font-size-label-2);--wcs-grid-pagination-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-grid-pagination-gap:var(--wcs-semantic-spacing-base);--wcs-grid-pagination-page-size-gap:var(--wcs-semantic-spacing-base);--wcs-grid-pagination-counter-gap:var(--wcs-semantic-spacing-small);--wcs-grid-pagination-margin-top:var(--wcs-semantic-spacing-large);--wcs-grid-pagination-arrow-color-inactive:unset;--wcs-grid-pagination-arrow-color-active:unset;}.container{display:grid;gap:var(--wcs-grid-pagination-gap);grid-template-columns:auto auto auto;justify-content:space-between;align-items:center;color:var(--wcs-grid-pagination-color);font-size:var(--wcs-grid-pagination-font-size);font-weight:var(--wcs-grid-pagination-font-weight)}.available-page-sizes{width:auto}.page-management,.page-size,.items-count{display:flex;align-items:center}.page-size{gap:var(--wcs-grid-pagination-page-size-gap)}.page-management{margin:0;padding:0;list-style-type:none}.pagination-arrow{display:flex}.pagination-counter{padding:0 var(--wcs-grid-pagination-counter-gap)}.pagination-counter span{white-space:nowrap}wcs-select.available-page-sizes{--wcs-select-control-height:var(--wcs-semantic-size-s)}";const l=d;const p=["tabindex","title"];const h=class{constructor(e){a(this,e);this.wcsGridPaginationChange=i(this,"wcsGridPaginationChange",7);this.inheritedAttributes={};this.availablePageSizes=[10,20,50];this.currentPage=h.INDEX_FIRST_PAGE;this.pageSize=this.availablePageSizes[0];this.itemsCount=0;this.pageCount=1}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},n(this.el)),r(this.el,p))}async setAriaAttribute(e,a){c(this.nativeNav,e,a)}getWcsGrid(){return this.el.parentElement.tagName==="WCS-GRID"?this.el.parentElement:undefined}lastPage(){this.currentPage=this.pageCount-1;this.emitPaginationChange();this.focusFirstGridCell()}nextPage(){if(this.canGoToNextPage()){this.currentPage++;this.emitPaginationChange();this.focusFirstGridCell()}}canGoToNextPage(){return this.currentPage+1<this.pageCount}previousPage(){if(this.canGoToPreviousPage()){this.currentPage--;this.emitPaginationChange();this.focusFirstGridCell()}}canGoToPreviousPage(){return this.currentPage>0}firstPage(){this.currentPage=0;this.emitPaginationChange();this.focusFirstGridCell()}onChangePageSize(e){this.pageSize=e.detail.value;if(this.currentPage+1>this.pageSize){this.currentPage=0}this.emitPaginationChange();this.focusFirstGridCell()}focusFirstGridCell(){const e=this.getWcsGrid();if(e){requestAnimationFrame((()=>{this.el.blur();e.focusFirstCell()}))}}emitPaginationChange(){this.wcsGridPaginationChange.emit({pagination:{currentPage:this.currentPage,pageSize:this.pageSize,itemsCount:this.itemsCount,pageCount:this.pageCount}})}render(){return e(t,{key:"a51e533835607f4e0b712fe26680704a71f76cd6",slot:"grid-pagination"},e("div",{key:"8ff4ebf10c9e134a8e2fe5d577860a8d6dc9c863",class:"container"},e("div",{key:"a4c6ce48c71fb017dfecdb3f1e8bdc59894e1cbd",class:"page-size"},e("wcs-select",{key:"ae08e610f92bc8084806b25b0b5d7fa95db079ee",placeholder:"Eléments par page",class:"available-page-sizes","aria-labelledby":"elements-per-page-number elements-per-page-text",value:this.pageSize,onWcsChange:this.onChangePageSize.bind(this)},this.availablePageSizes.map((a=>e("wcs-select-option",{value:a},a)))),e("span",{key:"282fd594fa817e9f2535c7403b5e1d66e4a7d030",id:"elements-per-page-number",hidden:true},this.pageSize),e("span",{key:"00ee37d7e5156aa17b234fdf6eec956228064094",id:"elements-per-page-text"},"éléments par page")),e("div",{key:"2ae95e32fc77cafebf0a38eb2746c62d0bd3a537",class:"items-count"},e("span",{key:"5861d6bbf937867579181842dc93ba33290cdfe9"},this.itemsCount," éléments")),e("nav",Object.assign({key:"7d847f316fb18ec7bdc08f7c055115a7391bb25e","aria-label":"pagination",ref:e=>this.nativeNav=e},this.inheritedAttributes),e("ul",{key:"d58fdfcd0a663071a6c94b72acf339a2efd57b5d",class:"page-management"},e("li",{key:"d18366653d52b0e481bfc8bb0d001d72aa5b3b36",class:"pagination-arrow",onClick:this.firstPage.bind(this)},e(g,{key:"ce33b84750ac08bfc50e91378f79ce62c11c9750",active:this.canGoToPreviousPage(),order:"previous",double:true})),e("li",{key:"fb8adcbe91d40dd5d5dd741ec2c69299d971a1ee",class:"pagination-arrow",onClick:this.previousPage.bind(this)},e(g,{key:"b5f8b2804909a64e73e4d26a1faea483a10d2137",active:this.canGoToPreviousPage(),order:"previous"})),e("li",{key:"22742254c3c37ecf900eba29d1605a0420ff11e2",class:"pagination-counter"},e("span",{key:"1f9385fffd93e2eb97d8199b0d7e459e58e01285","aria-label":`Page ${this.currentPage+1} sur ${this.pageCount}`,"aria-current":"page"},this.currentPage+1," / ",this.pageCount)),e("li",{key:"3a408b5b27a1ff8ba7dc52b6027506100e371d49",class:"pagination-arrow",onClick:this.nextPage.bind(this)},e(g,{key:"54e0d638e0645fd46b8a96a99509c8a3dafc842b",active:this.canGoToNextPage(),order:"next"})),e("li",{key:"e91b2f2eeadfeea3ef68fa83c3c3e9fa30c3c17f",class:"pagination-arrow",onClick:this.lastPage.bind(this)},e(g,{key:"14834c2f39a7f1076dfe2660aa2c651d1c52f40e",active:this.canGoToNextPage(),order:"next",double:true}))))))}get el(){return s(this)}};h.INDEX_FIRST_PAGE=0;h.style=l;export{h as G};
+//# sourceMappingURL=p-c5bad0b8.js.map

package/dist/wcs/p-c5bad0b8.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getAccessibleName","order","double","GridPaginationArrow","active","h","mode","shape","size","disabled","title","style","cursor","xmlns","width","height","viewBox","type","fill","class","d","gridPaginationCss","WcsGridPaginationStyle0","GRID_PAGINATION_INHERITED_ATTRS","GridPagination","this","inheritedAttributes","INDEX_FIRST_PAGE","availablePageSizes","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","setAriaAttribute","attr","value","setOrRemoveAttribute","nativeNav","getWcsGrid","parentElement","tagName","undefined","lastPage","currentPage","pageCount","emitPaginationChange","focusFirstGridCell","nextPage","canGoToNextPage","previousPage","canGoToPreviousPage","firstPage","onChangePageSize","event","pageSize","detail","grid","requestAnimationFrame","blur","focusFirstCell","wcsGridPaginationChange","emit","pagination","itemsCount","render","Host","key","slot","placeholder","onWcsChange","bind","map","id","hidden","ref","onClick"],"sources":["src/components/grid-pagination/grid-pagination-arrow.tsx","src/components/grid-pagination/grid-pagination.scss?tag=wcs-grid-pagination&encapsulation=shadow","src/components/grid-pagination/grid-pagination.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\ninterface GridPaginationArrowProps {\n  active: boolean;\n  order: 'next' | 'previous';\n  double?: boolean;\n}\n\nconst getAccessibleName = (order: GridPaginationArrowProps['order'], double: GridPaginationArrowProps['double']): string => {\n  switch (order) {\n    case 'next':\n      return double ? 'Dernière page' : 'Page suivante';\n    case 'previous':\n    default:\n      return double ? 'Première page' : 'Page précédente';\n  }\n}\n\nexport const GridPaginationArrow: FunctionalComponent<GridPaginationArrowProps> = ({active, order, double = false}) => (\n  <wcs-button mode=\"clear\"\n              shape=\"square\"\n              size=\"s\"\n              disabled={!active}\n              title={getAccessibleName(order, double)}>\n    <svg style={{cursor: 'pointer'}}\n         aria-hidden=\"true\"\n         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-grid-pagination-arrow-color-inactive, var(--wcs-button-color));\n              }\n              .second-arrow {\n                  transform: translateY(-8px);\n              }\n              .next {\n                  transform: rotate(90deg);\n              }\n              .previous {\n                  transform: rotate(-90deg);\n              }\n              .active {\n                  fill: var(--wcs-grid-pagination-arrow-color-active, var(--wcs-button-color));\n              }\n          `}</style>\n      <g fill=\"none\" class={order + ' arrow-group'}>\n        <path class={(active ? 'active' : '') + ' arrow'} d=\"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z\"/>\n        <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\n      </g>\n      {\n        double ?\n          <g fill=\"none\" class={order + ' arrow-group'}>\n            <path class={(active ? 'active' : '') + ' arrow second-arrow'}\n                  d=\"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z\"/>\n            <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\n          </g>\n          : ''\n      }\n    </svg>\n  </wcs-button>\n);\n","@import '../../style/focus-outline.scss';\n\n:host {\n    display: block;\n    margin-top: var(--wcs-grid-pagination-margin-top);\n\n    --wcs-grid-pagination-color: var(--wcs-semantic-color-text-primary);\n    --wcs-grid-pagination-font-size: var(--wcs-semantic-font-size-label-2);\n    --wcs-grid-pagination-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-grid-pagination-gap: var(--wcs-semantic-spacing-base);\n    --wcs-grid-pagination-page-size-gap: var(--wcs-semantic-spacing-base);\n    --wcs-grid-pagination-counter-gap: var(--wcs-semantic-spacing-small);\n    --wcs-grid-pagination-margin-top: var(--wcs-semantic-spacing-large);\n\n    --wcs-grid-pagination-arrow-color-inactive: unset; /* Optional : Overrides the fill property of the grid-pagination-arrow */\n    --wcs-grid-pagination-arrow-color-active: unset; /* Optional : Overrides the fill property of the grid-pagination-arrow */\n}\n\n.container {\n    display: grid;\n    gap: var(--wcs-grid-pagination-gap);\n    grid-template-columns: auto auto auto;\n    justify-content: space-between;\n    align-items: center;\n    color: var(--wcs-grid-pagination-color);\n    font-size: var(--wcs-grid-pagination-font-size);\n    font-weight: var(--wcs-grid-pagination-font-weight);\n}\n\n.available-page-sizes {\n    width: auto;\n}\n\n.page-management, .page-size, .items-count {\n    display: flex;\n    align-items: center;\n}\n\n.page-size {\n    gap: var(--wcs-grid-pagination-page-size-gap);\n}\n\n.page-management {\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n}\n\n.pagination-arrow {\n    display: flex;\n}\n\n.pagination-counter {\n    padding: 0 var(--wcs-grid-pagination-counter-gap);\n\n    span {\n        white-space: nowrap;\n    }\n}\n\n/* TODO : Remove this when the select component will be able to handle the size S */\nwcs-select.available-page-sizes {\n    --wcs-select-control-height: var(--wcs-semantic-size-s);\n}\n","import {\n    Component,\n    ComponentInterface, Element,\n    Event, EventEmitter,\n    h,\n    Host, Method,\n    Prop\n} from '@stencil/core';\nimport {\n    WcsGridPaginationChangeEventDetails\n} from '../grid/grid-interface';\nimport { SelectChangeEventDetail } from '../select/select-interface';\nimport { GridPaginationArrow } from './grid-pagination-arrow';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst GRID_PAGINATION_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The grid pagination is a subcomponent of `wcs-grid`, slotted in `grid-pagination` under the `<table>` element.\n * \n * @cssprop --wcs-grid-pagination-color - Text color of the grid pagination\n * @cssprop --wcs-grid-pagination-font-size - Font-size of the grid pagination\n * @cssprop --wcs-grid-pagination-font-weight - Font-weight of the grid pagination\n * @cssprop --wcs-grid-pagination-gap - Gap between the page size, number of elements and page management\n * @cssprop --wcs-grid-pagination-page-size-gap - Gap between the select and the text within the page size container\n * @cssprop --wcs-grid-pagination-counter-gap - Gap within the page management counter\n * @cssprop --wcs-grid-pagination-margin-top - Margin between the grid and the pagination\n * @cssprop --wcs-grid-pagination-arrow-color-inactive - Color of the inactive arrow\n * @cssprop --wcs-grid-pagination-arrow-color-active - Color of the active arrow\n */\n@Component({\n    tag: 'wcs-grid-pagination',\n    styleUrl: 'grid-pagination.scss',\n    shadow: true\n})\nexport class GridPagination implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeNav!: HTMLElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    static readonly INDEX_FIRST_PAGE: number = 0;\n    /**\n     * Set the available page sizes in the pagination dropdown on the left.\n     */\n    @Prop() availablePageSizes: number[] = [10, 20, 50];\n    /**\n     * The current page of the pagination. First page starts at index 0.\n     */\n    @Prop({mutable: true}) currentPage: number = GridPagination.INDEX_FIRST_PAGE;\n    /**\n     * Maximum number of elements shown per page.  \n     * Default is the first value of `availablePageSizes`.\n     */\n    @Prop() pageSize: number = this.availablePageSizes[0];\n    /**\n     * Total elements in the grid.  \n     * - **Grid in `Server mode`** : You have to set `itemsCount` = your total data length.  \n     * - **Grid not in Server mode** : Do not set it manually : itemsCount is set and updated every pagination refresh.\n     */\n    @Prop() itemsCount: number = 0;\n    /**\n     * Max number of pages.  \n     * - **Grid in `Server mode`** : You have to set `pageCount` = `itemsCount` divided by `pageSize`.  \n     * - **Grid not in Server mode** : Do not set it manually : pageCount is set and updated every pagination refresh.\n     */\n    @Prop() pageCount: number = 1;\n    /**\n     * Event emitted when the pagination changes.\n     */\n    @Event() wcsGridPaginationChange!: EventEmitter<WcsGridPaginationChangeEventDetails>;\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, GRID_PAGINATION_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeNav, attr, value);\n    }\n    \n    private getWcsGrid(): HTMLWcsGridElement | undefined {\n        return this.el.parentElement.tagName === 'WCS-GRID' ? this.el.parentElement as HTMLWcsGridElement : undefined;\n    }\n\n    private lastPage(): void {\n        this.currentPage = this.pageCount - 1;\n        this.emitPaginationChange();\n        this.focusFirstGridCell();\n    }\n\n    private nextPage(): void {\n        if (this.canGoToNextPage()) {\n            this.currentPage++;\n            this.emitPaginationChange();\n            this.focusFirstGridCell();\n        }\n    }\n\n    private canGoToNextPage(): boolean {\n        return this.currentPage + 1 < this.pageCount;\n    }\n\n    private previousPage(): void {\n        if (this.canGoToPreviousPage()) {\n            this.currentPage--;\n            this.emitPaginationChange();\n            this.focusFirstGridCell();\n        }\n    }\n\n    private canGoToPreviousPage(): boolean {\n        return this.currentPage > 0;\n    }\n\n    private firstPage(): void {\n        this.currentPage = 0;\n        this.emitPaginationChange();\n        this.focusFirstGridCell();\n    }\n\n    private onChangePageSize(event: CustomEvent<SelectChangeEventDetail>): void {\n        this.pageSize = event.detail.value;\n        if (this.currentPage + 1 > this.pageSize) {\n            this.currentPage = 0;\n        }\n        this.emitPaginationChange();\n        this.focusFirstGridCell();\n    }\n\n    /**\n     * Move focus to the first grid cell after a pagination change\n     */\n    private focusFirstGridCell() {\n        const grid = this.getWcsGrid();\n        if (grid) {\n            requestAnimationFrame(() => {\n                this.el.blur();\n                grid.focusFirstCell();\n            })\n        }\n    }\n\n    private emitPaginationChange(): void {\n        this.wcsGridPaginationChange.emit({\n            pagination: {\n                currentPage: this.currentPage,\n                pageSize: this.pageSize,\n                itemsCount: this.itemsCount,\n                pageCount: this.pageCount\n            }\n        });\n    }\n\n    render(): any {\n        return (<Host slot=\"grid-pagination\">\n            <div class=\"container\">\n                <div class=\"page-size\">\n                    <wcs-select placeholder=\"Eléments par page\"\n                                class=\"available-page-sizes\"\n                                aria-labelledby=\"elements-per-page-number elements-per-page-text\"\n                                value={this.pageSize}\n                                onWcsChange={this.onChangePageSize.bind(this)}>\n                        {\n                            this.availablePageSizes.map((pageSize) =>\n                                <wcs-select-option value={pageSize}>{pageSize}</wcs-select-option>\n                            )\n                        }\n                    </wcs-select>\n                    <span id=\"elements-per-page-number\" hidden>{this.pageSize}</span>\n                    <span id=\"elements-per-page-text\">éléments par page</span>\n                </div>\n\n                <div class=\"items-count\">\n                    <span>{this.itemsCount} éléments</span>\n                </div>\n\n                <nav aria-label=\"pagination\" ref={(el) => (this.nativeNav = el)} {...this.inheritedAttributes}>\n                    <ul class=\"page-management\">\n                        <li class=\"pagination-arrow\" onClick={this.firstPage.bind(this)}>\n                            <GridPaginationArrow active={this.canGoToPreviousPage()} order=\"previous\" double></GridPaginationArrow>\n                        </li>\n                        <li class=\"pagination-arrow\" onClick={this.previousPage.bind(this)}>\n                            <GridPaginationArrow active={this.canGoToPreviousPage()} order=\"previous\"></GridPaginationArrow>\n                        </li>\n    \n                        <li class=\"pagination-counter\">\n                            <span aria-label={`Page ${this.currentPage + 1} sur ${this.pageCount}`} aria-current=\"page\">\n                                {this.currentPage + 1} / {this.pageCount}\n                            </span>\n                        </li>\n    \n                        <li class=\"pagination-arrow\" onClick={this.nextPage.bind(this)}>\n                            <GridPaginationArrow active={this.canGoToNextPage()} order=\"next\"></GridPaginationArrow>\n                        </li>\n                        <li class=\"pagination-arrow\" onClick={this.lastPage.bind(this)}>\n                            <GridPaginationArrow active={this.canGoToNextPage()} order=\"next\" double></GridPaginationArrow>\n                        </li>\n                    </ul>\n                </nav>\n            </div>\n        </Host>)\n    }\n}\n"],"mappings":"kHAQA,MAAMA,EAAoB,CAACC,EAA0CC,KACnE,OAAQD,GACN,IAAK,OACH,OAAOC,EAAS,gBAAkB,gBACpC,IAAK,WACL,QACE,OAAOA,EAAS,gBAAkB,kB,EAIjC,MAAMC,EAAqE,EAAEC,SAAQH,QAAOC,SAAS,SAC1GG,EAAA,cAAYC,KAAK,QACLC,MAAM,SACNC,KAAK,IACLC,UAAWL,EACXM,MAAOV,EAAkBC,EAAOC,IAC1CG,EAAA,OAAKM,MAAO,CAACC,OAAQ,WAAU,cACd,OACZC,MAAM,6BAA6BC,MAAM,KAAKC,OAAO,KAAKC,QAAQ,aACrEX,EAAA,SAAOY,KAAK,YAAY,swBAsBxBZ,EAAA,KAAGa,KAAK,OAAOC,MAAOlB,EAAQ,gBAC5BI,EAAA,QAAMc,OAAQf,EAAS,SAAW,IAAM,SAAUgB,EAAE,mDACpDf,EAAA,QAAMe,EAAE,gBAAgBF,KAAK,UAG7BhB,EACEG,EAAA,KAAGa,KAAK,OAAOC,MAAOlB,EAAQ,gBAC5BI,EAAA,QAAMc,OAAQf,EAAS,SAAW,IAAM,sBAClCgB,EAAE,mDACRf,EAAA,QAAMe,EAAE,gBAAgBF,KAAK,UAE7B,KC5DZ,MAAMG,EAAoB,81CAC1B,MAAAC,EAAeD,ECef,MAAME,EAAkC,CAAC,WAAY,S,MAoBxCC,EAAc,M,0FAGfC,KAAAC,oBAA4C,G,wBAMb,CAAC,GAAI,GAAI,I,iBAIHF,EAAeG,iB,cAKjCF,KAAKG,mBAAmB,G,gBAMtB,E,eAMD,C,CAM5B,iBAAAC,GACIJ,KAAKC,oBAAmBI,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsBP,KAAKQ,KAC3BC,EAAkBT,KAAKQ,GAAIV,G,CAKtC,sBAAMY,CAAiBC,EAAyBC,GAC5CC,EAAqBb,KAAKc,UAAWH,EAAMC,E,CAGvC,UAAAG,GACJ,OAAOf,KAAKQ,GAAGQ,cAAcC,UAAY,WAAajB,KAAKQ,GAAGQ,cAAsCE,S,CAGhG,QAAAC,GACJnB,KAAKoB,YAAcpB,KAAKqB,UAAY,EACpCrB,KAAKsB,uBACLtB,KAAKuB,oB,CAGD,QAAAC,GACJ,GAAIxB,KAAKyB,kBAAmB,CACxBzB,KAAKoB,cACLpB,KAAKsB,uBACLtB,KAAKuB,oB,EAIL,eAAAE,GACJ,OAAOzB,KAAKoB,YAAc,EAAIpB,KAAKqB,S,CAG/B,YAAAK,GACJ,GAAI1B,KAAK2B,sBAAuB,CAC5B3B,KAAKoB,cACLpB,KAAKsB,uBACLtB,KAAKuB,oB,EAIL,mBAAAI,GACJ,OAAO3B,KAAKoB,YAAc,C,CAGtB,SAAAQ,GACJ5B,KAAKoB,YAAc,EACnBpB,KAAKsB,uBACLtB,KAAKuB,oB,CAGD,gBAAAM,CAAiBC,GACrB9B,KAAK+B,SAAWD,EAAME,OAAOpB,MAC7B,GAAIZ,KAAKoB,YAAc,EAAIpB,KAAK+B,SAAU,CACtC/B,KAAKoB,YAAc,C,CAEvBpB,KAAKsB,uBACLtB,KAAKuB,oB,CAMD,kBAAAA,GACJ,MAAMU,EAAOjC,KAAKe,aAClB,GAAIkB,EAAM,CACNC,uBAAsB,KAClBlC,KAAKQ,GAAG2B,OACRF,EAAKG,gBAAgB,G,EAKzB,oBAAAd,GACJtB,KAAKqC,wBAAwBC,KAAK,CAC9BC,WAAY,CACRnB,YAAapB,KAAKoB,YAClBW,SAAU/B,KAAK+B,SACfS,WAAYxC,KAAKwC,WACjBnB,UAAWrB,KAAKqB,Y,CAK5B,MAAAoB,GACI,OAAQ7D,EAAC8D,EAAI,CAAAC,IAAA,2CAACC,KAAK,mBACfhE,EAAA,OAAA+D,IAAA,2CAAKjD,MAAM,aACPd,EAAA,OAAA+D,IAAA,2CAAKjD,MAAM,aACPd,EAAA,cAAA+D,IAAA,2CAAYE,YAAY,oBACZnD,MAAM,uBAAsB,kBACZ,kDAChBkB,MAAOZ,KAAK+B,SACZe,YAAa9C,KAAK6B,iBAAiBkB,KAAK/C,OAE5CA,KAAKG,mBAAmB6C,KAAKjB,GACzBnD,EAAA,qBAAmBgC,MAAOmB,GAAWA,MAIjDnD,EAAA,QAAA+D,IAAA,2CAAMM,GAAG,2BAA2BC,OAAM,MAAElD,KAAK+B,UACjDnD,EAAA,QAAA+D,IAAA,2CAAMM,GAAG,0BAAwB,sBAGrCrE,EAAA,OAAA+D,IAAA,2CAAKjD,MAAM,eACPd,EAAA,QAAA+D,IAAA,4CAAO3C,KAAKwC,WAAU,cAG1B5D,EAAA,MAAAyB,OAAAC,OAAA,CAAAqC,IAAA,wDAAgB,aAAaQ,IAAM3C,GAAQR,KAAKc,UAAYN,GAASR,KAAKC,qBACtErB,EAAA,MAAA+D,IAAA,2CAAIjD,MAAM,mBACNd,EAAA,MAAA+D,IAAA,2CAAIjD,MAAM,mBAAmB0D,QAASpD,KAAK4B,UAAUmB,KAAK/C,OACtDpB,EAACF,EAAmB,CAAAiE,IAAA,2CAAChE,OAAQqB,KAAK2B,sBAAuBnD,MAAM,WAAWC,OAAM,QAEpFG,EAAA,MAAA+D,IAAA,2CAAIjD,MAAM,mBAAmB0D,QAASpD,KAAK0B,aAAaqB,KAAK/C,OACzDpB,EAACF,EAAmB,CAAAiE,IAAA,2CAAChE,OAAQqB,KAAK2B,sBAAuBnD,MAAM,cAGnEI,EAAA,MAAA+D,IAAA,2CAAIjD,MAAM,sBACNd,EAAA,QAAA+D,IAAA,wDAAkB,QAAQ3C,KAAKoB,YAAc,SAASpB,KAAKqB,YAAW,eAAe,QAChFrB,KAAKoB,YAAc,EAAC,MAAKpB,KAAKqB,YAIvCzC,EAAA,MAAA+D,IAAA,2CAAIjD,MAAM,mBAAmB0D,QAASpD,KAAKwB,SAASuB,KAAK/C,OACrDpB,EAACF,EAAmB,CAAAiE,IAAA,2CAAChE,OAAQqB,KAAKyB,kBAAmBjD,MAAM,UAE/DI,EAAA,MAAA+D,IAAA,2CAAIjD,MAAM,mBAAmB0D,QAASpD,KAAKmB,SAAS4B,KAAK/C,OACrDpB,EAACF,EAAmB,CAAAiE,IAAA,2CAAChE,OAAQqB,KAAKyB,kBAAmBjD,MAAM,OAAOC,OAAM,W,2BA9JhFsB,EAAAG,iBAA2B,E"}

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

@@ -0,0 +1,2 @@
+import{r,h as e,H as s}from"./p-32e583ea.js";const c=":host{--wcs-divider-color:var(--wcs-semantic-color-border-secondary);--wcs-divider-height:var(--wcs-semantic-border-width-default);display:block;border-bottom:solid var(--wcs-divider-height) var(--wcs-divider-color)}";const o=c;const d=class{constructor(e){r(this,e)}render(){return e(s,{key:"cf4452e90a52e1bb419fec0db2d9c0838ad7b134"})}};d.style=o;export{d as wcs_divider};
+//# sourceMappingURL=p-c7812760.entry.js.map

package/dist/wcs/{p-694724a2.entry.js → p-c84ae00d.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as a,H as s}from"./p-32e583ea.js";const t=":host{--wcs-skeleton-width:100%;--wcs-skeleton-height:100%;--wcs-skeleton-min-height:1rem;--wcs-skeleton-background-color:linear-gradient(90deg, rgba(0, 0, 0, 0.06) 25%, rgba(0, 0, 0, 0.15) 37%, rgba(0, 0, 0, 0.06) 63%);--wcs-skeleton-animation-duration:var(--wcs-semantic-motion-duration-animation-base);display:block;position:relative;overflow:hidden}:host span{display:flex;flex:1 1 auto;height:var(--wcs-skeleton-height);width:var(--wcs-skeleton-width);min-height:var(--wcs-skeleton-min-height);background:var(--wcs-skeleton-background-color);background-size:400% 100%}:host([animation=glide]) span{animation:glide var(--wcs-skeleton-animation-duration) ease-in-out infinite}:host([animation=pulse]){animation:pulse var(--wcs-skeleton-animation-duration) ease-in-out infinite}@keyframes glide{from{background-position:100% 50%}to{background-position:0 50%}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}:host{--wcs-skeleton-border-radius:0rem}:host span{border-radius:var(--wcs-skeleton-border-radius)}:host([rounded]){--wcs-skeleton-border-radius:var(--wcs-semantic-border-radius-base)}";const i=t;const o=class{constructor(a){e(this,a);this.animation="glide";this.rounded=false;this.height="auto";this.width="auto"}render(){return a(s,{key:"79da527f4afa1c4b972d8a91cf97aadf90c207f8",style:{height:this.height,width:this.width}},a("span",{key:"53c1ad5daec31199e59326a2fd7e1730c895c2f6","aria-hidden":"true"}))}};o.style=i;export{o as wcs_skeleton_rectangle};
-//# sourceMappingURL=p-694724a2.entry.js.map
+import{r as e,h as s,H as a}from"./p-32e583ea.js";const t=":host{--wcs-skeleton-width:100%;--wcs-skeleton-height:100%;--wcs-skeleton-min-height:1rem;--wcs-skeleton-background-color:linear-gradient(90deg, rgba(0, 0, 0, 0.06) 25%, rgba(0, 0, 0, 0.15) 37%, rgba(0, 0, 0, 0.06) 63%);--wcs-skeleton-animation-duration:var(--wcs-semantic-motion-duration-animation-base);display:block;position:relative;overflow:hidden}:host span{display:flex;flex:1 1 auto;height:var(--wcs-skeleton-height);width:var(--wcs-skeleton-width);min-height:var(--wcs-skeleton-min-height);background:var(--wcs-skeleton-background-color);background-size:400% 100%}:host([animation=glide]) span{animation:glide var(--wcs-skeleton-animation-duration) ease-in-out infinite}:host([animation=pulse]){animation:pulse var(--wcs-skeleton-animation-duration) ease-in-out infinite}@keyframes glide{from{background-position:100% 50%}to{background-position:0 50%}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}:host{--wcs-skeleton-border-radius:0rem}:host span{border-radius:var(--wcs-skeleton-border-radius)}:host([rounded]){--wcs-skeleton-border-radius:var(--wcs-semantic-border-radius-base)}";const i=t;const o=class{constructor(s){e(this,s);this.animation="glide";this.rounded=false;this.height="auto";this.width="auto"}render(){return s(a,{key:"edf5aa2fa711b6e27d066dab259559154af9b08e",style:{height:this.height,width:this.width}},s("span",{key:"f139ef33c3d2a10aede15bbd540f10758cc1ce16","aria-hidden":"true"}))}};o.style=i;export{o as wcs_skeleton_rectangle};
+//# sourceMappingURL=p-c84ae00d.entry.js.map

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

@@ -0,0 +1,2 @@
+import{r as o,c as r,h as e,H as t}from"./p-32e583ea.js";import{c as d,d as c}from"./p-52d77e1f.js";const s="wcs-dropdown-item{--wcs-dropdown-item-height:var(--wcs-semantic-size-m);--wcs-dropdown-item-padding-horizontal:var(--wcs-semantic-spacing-base);--wcs-dropdown-item-padding-vertical:0;--wcs-dropdown-item-text-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-dropdown-item-text-color-default:var(--wcs-semantic-color-foreground-action-neutral-default);--wcs-dropdown-item-text-color-hover:var(--wcs-semantic-color-foreground-action-neutral-hover);--wcs-dropdown-item-text-color-press:var(--wcs-semantic-color-foreground-action-neutral-press);--wcs-dropdown-item-background-color-default:var(--wcs-semantic-color-background-action-neutral-default);--wcs-dropdown-item-background-color-hover:var(--wcs-semantic-color-background-action-neutral-hover);--wcs-dropdown-item-background-color-press:var(--wcs-semantic-color-background-action-neutral-press);--wcs-dropdown-item-border-width-focus:var(--wcs-semantic-border-width-large);--wcs-dropdown-item-border-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-dropdown-item-border-radius:var(--wcs-semantic-border-radius-base);--wcs-dropdown-item-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);padding:0 var(--wcs-dropdown-item-padding-horizontal);font-weight:var(--wcs-dropdown-item-text-font-weight);cursor:pointer;color:var(--wcs-dropdown-item-text-color-default);height:var(--wcs-dropdown-item-height);display:flex;flex-direction:row;align-items:center;border-radius:var(--wcs-dropdown-item-border-radius);transition:background-color var(--wcs-dropdown-item-transition-duration) ease-in-out}wcs-dropdown-item:hover{color:var(--wcs-dropdown-item-text-color-hover);background-color:var(--wcs-dropdown-item-background-color-hover)}wcs-dropdown-item:active{color:var(--wcs-dropdown-item-text-color-press);background-color:var(--wcs-dropdown-item-background-color-press)}wcs-dropdown-item:focus-visible{outline:dashed var(--wcs-dropdown-item-border-width-focus) var(--wcs-dropdown-item-border-color-focus);outline-offset:calc(-1 * var(--wcs-dropdown-item-border-width-focus))}@supports not selector(wcs-dropdown-item:focus-visible){wcs-dropdown-item:focus-within{outline:dashed var(--wcs-dropdown-item-border-width-focus) var(--wcs-dropdown-item-border-color-focus);outline-offset:calc(-1 * var(--wcs-dropdown-item-border-width-focus))}}";const i=s;const n=class{constructor(e){o(this,e);this.wcsDropdownItemClick=r(this,"wcsDropdownItemClick",7)}onMouseUp(o){this.wcsDropdownItemClick.emit()}onKeyDown(o){if(d(o)||c(o)){o.preventDefault();o.stopImmediatePropagation();this.wcsDropdownItemClick.emit()}}render(){return e(t,{key:"70e0767afe5fe295df4292e356db89d555fa71a3",slot:"item",role:"menuitem",tabindex:"-1"},e("slot",{key:"11cd674f89784aec6bfa1ba4d15f0fb0f25d976e"}))}};n.style=i;export{n as wcs_dropdown_item};
+//# sourceMappingURL=p-cad10435.entry.js.map

package/dist/wcs/{p-13e50077.entry.js.map → p-cad10435.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["dropdownItemCss","WcsDropdownItemStyle0","DropdownItem","onMouseUp","_","this","wcsDropdownItemClick","emit","onKeyDown","evt","isSpaceKey","isEnterKey","preventDefault","stopImmediatePropagation","render","h","Host","key","slot","role","tabindex"],"sources":["src/components/dropdown-item/dropdown-item.scss?tag=wcs-dropdown-item","src/components/dropdown-item/dropdown-item.tsx"],"sourcesContent":["wcs-dropdown-item {\n    --wcs-dropdown-item-height: var(--wcs-semantic-size-m);\n    --wcs-dropdown-item-padding-horizontal: var(--wcs-semantic-spacing-base);\n    --wcs-dropdown-item-padding-vertical: 0;\n\n    --wcs-dropdown-item-text-font-weight: var(--wcs-semantic-font-weight-roman);\n\n    --wcs-dropdown-item-text-color-default: var(--wcs-semantic-color-foreground-action-neutral-default);\n    --wcs-dropdown-item-text-color-hover: var(--wcs-semantic-color-foreground-action-neutral-hover);\n    --wcs-dropdown-item-text-color-press: var(--wcs-semantic-color-foreground-action-neutral-press);\n\n    --wcs-dropdown-item-background-color-default: var(--wcs-semantic-color-background-action-neutral-default);\n    --wcs-dropdown-item-background-color-hover: var(--wcs-semantic-color-background-action-neutral-hover);\n    --wcs-dropdown-item-background-color-press: var(--wcs-semantic-color-background-action-neutral-press);\n\n    --wcs-dropdown-item-border-width-focus: var(--wcs-semantic-border-width-large);\n    --wcs-dropdown-item-border-color-focus: var(--wcs-semantic-color-border-focus-base);\n    --wcs-dropdown-item-border-radius: var(--wcs-semantic-border-radius-base);\n\n    --wcs-dropdown-item-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    padding: 0 var(--wcs-dropdown-item-padding-horizontal);\n    font-weight: var(--wcs-dropdown-item-text-font-weight);\n    cursor: pointer;\n    color: var(--wcs-dropdown-item-text-color-default);\n    height: var(--wcs-dropdown-item-height);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    border-radius: var(--wcs-dropdown-item-border-radius);\n    transition: background-color var(--wcs-dropdown-item-transition-duration) ease-in-out;\n}\n\nwcs-dropdown-item:hover {\n    color: var(--wcs-dropdown-item-text-color-hover);\n    background-color: var(--wcs-dropdown-item-background-color-hover);\n}\n\n/* Press state */\nwcs-dropdown-item:active {\n    color: var(--wcs-dropdown-item-text-color-press);\n    background-color: var(--wcs-dropdown-item-background-color-press);\n}\n\nwcs-dropdown-item:focus-visible {\n    outline: dashed var(--wcs-dropdown-item-border-width-focus) var(--wcs-dropdown-item-border-color-focus);\n    outline-offset: calc(-1 * var(--wcs-dropdown-item-border-width-focus));\n}\n\n@supports not selector(wcs-dropdown-item:focus-visible) {\n    wcs-dropdown-item:focus-within {\n        outline: dashed var(--wcs-dropdown-item-border-width-focus) var(--wcs-dropdown-item-border-color-focus);\n        outline-offset: calc(-1 * var(--wcs-dropdown-item-border-width-focus));\n    }\n}\n","import { Component, ComponentInterface, EventEmitter, h, Event, Listen, Host } from '@stencil/core';\nimport { isEnterKey, isSpaceKey } from \"../../utils/helpers\";\n\n/**\n * You must add `wcs-dropdown-item` to `wcs-dropdown`\n * @slot <no-name> the slot that contains the item's name\n * \n * @cssprop --wcs-dropdown-item-height - Height of the dropdown item\n * @cssprop --wcs-dropdown-item-padding-horizontal - Padding horizontal\n * @cssprop --wcs-dropdown-item-padding-vertical - Padding vertical\n * @cssprop --wcs-dropdown-item-text-font-weight - Font weight of the dropdown item\n * @cssprop --wcs-dropdown-item-text-color-default - Default text color of the dropdown item \n * @cssprop --wcs-dropdown-item-text-color-hover - Text color of the dropdown item when hovered\n * @cssprop --wcs-dropdown-item-text-color-press - Text color of the dropdown item when pressed\n * @cssprop --wcs-dropdown-item-background-color-default - Default background color of the dropdown item\n * @cssprop --wcs-dropdown-item-background-color-hover - Background color of the dropdown item when hovered\n * @cssprop --wcs-dropdown-item-background-color-press - Background color of the dropdown item when pressed\n * @cssprop --wcs-dropdown-item-border-width-focus - Border width of the dropdown item when focused\n * @cssprop --wcs-dropdown-item-border-color-focus - Border color of the dropdown item when focused\n * @cssprop --wcs-dropdown-item-border-radius - Border radius of the dropdown item\n * @cssprop --wcs-dropdown-item-transition-duration - Transition duration of the dropdown item\n */\n@Component({\n    tag: 'wcs-dropdown-item',\n    styleUrl: 'dropdown-item.scss'\n})\nexport class DropdownItem implements ComponentInterface {\n    /**\n     * Event emitted when the dropdown item is clicked\n     */\n    @Event({\n        eventName: 'wcsDropdownItemClick',\n    })\n    wcsDropdownItemClick: EventEmitter<void>;\n    \n    @Listen('mouseup')\n    onMouseUp(_: MouseEvent): void {\n        this.wcsDropdownItemClick.emit();\n    }\n\n    @Listen('keydown')\n    onKeyDown(evt: KeyboardEvent): void {\n        if (isSpaceKey(evt) || isEnterKey(evt)) {\n            evt.preventDefault();\n            evt.stopImmediatePropagation();\n            this.wcsDropdownItemClick.emit();\n        }\n    }\n\n    render() {\n        return (\n            <Host slot=\"item\" role=\"menuitem\" tabindex=\"-1\">\n                <slot/>\n            </Host>\n        );\n    }\n}\n"],"mappings":"0FAAA,MAAMA,EAAkB,mxEACxB,MAAAC,EAAeD,E,MCyBFE,EAAY,M,oFAUrB,SAAAC,CAAUC,GACNC,KAAKC,qBAAqBC,M,CAI9B,SAAAC,CAAUC,GACN,GAAIC,EAAWD,IAAQE,EAAWF,GAAM,CACpCA,EAAIG,iBACJH,EAAII,2BACJR,KAAKC,qBAAqBC,M,EAIlC,MAAAO,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,OAAOC,KAAK,WAAWC,SAAS,MACvCL,EAAA,QAAAE,IAAA,6C"}
+{"version":3,"names":["dropdownItemCss","WcsDropdownItemStyle0","DropdownItem","onMouseUp","_","this","wcsDropdownItemClick","emit","onKeyDown","evt","isSpaceKey","isEnterKey","preventDefault","stopImmediatePropagation","render","h","Host","key","slot","role","tabindex"],"sources":["src/components/dropdown-item/dropdown-item.scss?tag=wcs-dropdown-item","src/components/dropdown-item/dropdown-item.tsx"],"sourcesContent":["wcs-dropdown-item {\n    --wcs-dropdown-item-height: var(--wcs-semantic-size-m);\n    --wcs-dropdown-item-padding-horizontal: var(--wcs-semantic-spacing-base);\n    --wcs-dropdown-item-padding-vertical: 0;\n\n    --wcs-dropdown-item-text-font-weight: var(--wcs-semantic-font-weight-roman);\n\n    --wcs-dropdown-item-text-color-default: var(--wcs-semantic-color-foreground-action-neutral-default);\n    --wcs-dropdown-item-text-color-hover: var(--wcs-semantic-color-foreground-action-neutral-hover);\n    --wcs-dropdown-item-text-color-press: var(--wcs-semantic-color-foreground-action-neutral-press);\n\n    --wcs-dropdown-item-background-color-default: var(--wcs-semantic-color-background-action-neutral-default);\n    --wcs-dropdown-item-background-color-hover: var(--wcs-semantic-color-background-action-neutral-hover);\n    --wcs-dropdown-item-background-color-press: var(--wcs-semantic-color-background-action-neutral-press);\n\n    --wcs-dropdown-item-border-width-focus: var(--wcs-semantic-border-width-large);\n    --wcs-dropdown-item-border-color-focus: var(--wcs-semantic-color-border-focus-base);\n    --wcs-dropdown-item-border-radius: var(--wcs-semantic-border-radius-base);\n\n    --wcs-dropdown-item-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    padding: 0 var(--wcs-dropdown-item-padding-horizontal);\n    font-weight: var(--wcs-dropdown-item-text-font-weight);\n    cursor: pointer;\n    color: var(--wcs-dropdown-item-text-color-default);\n    height: var(--wcs-dropdown-item-height);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    border-radius: var(--wcs-dropdown-item-border-radius);\n    transition: background-color var(--wcs-dropdown-item-transition-duration) ease-in-out;\n}\n\nwcs-dropdown-item:hover {\n    color: var(--wcs-dropdown-item-text-color-hover);\n    background-color: var(--wcs-dropdown-item-background-color-hover);\n}\n\n/* Press state */\nwcs-dropdown-item:active {\n    color: var(--wcs-dropdown-item-text-color-press);\n    background-color: var(--wcs-dropdown-item-background-color-press);\n}\n\nwcs-dropdown-item:focus-visible {\n    outline: dashed var(--wcs-dropdown-item-border-width-focus) var(--wcs-dropdown-item-border-color-focus);\n    outline-offset: calc(-1 * var(--wcs-dropdown-item-border-width-focus));\n}\n\n@supports not selector(wcs-dropdown-item:focus-visible) {\n    wcs-dropdown-item:focus-within {\n        outline: dashed var(--wcs-dropdown-item-border-width-focus) var(--wcs-dropdown-item-border-color-focus);\n        outline-offset: calc(-1 * var(--wcs-dropdown-item-border-width-focus));\n    }\n}\n","import { Component, ComponentInterface, EventEmitter, h, Event, Listen, Host } from '@stencil/core';\nimport { isEnterKey, isSpaceKey } from \"../../utils/helpers\";\n\n/**\n * You must add `wcs-dropdown-item` to `wcs-dropdown`\n * @slot <no-name> the slot that contains the item's name\n * \n * @cssprop --wcs-dropdown-item-height - Height of the dropdown item\n * @cssprop --wcs-dropdown-item-padding-horizontal - Padding horizontal\n * @cssprop --wcs-dropdown-item-padding-vertical - Padding vertical\n * @cssprop --wcs-dropdown-item-text-font-weight - Font weight of the dropdown item\n * @cssprop --wcs-dropdown-item-text-color-default - Default text color of the dropdown item \n * @cssprop --wcs-dropdown-item-text-color-hover - Text color of the dropdown item when hovered\n * @cssprop --wcs-dropdown-item-text-color-press - Text color of the dropdown item when pressed\n * @cssprop --wcs-dropdown-item-background-color-default - Default background color of the dropdown item\n * @cssprop --wcs-dropdown-item-background-color-hover - Background color of the dropdown item when hovered\n * @cssprop --wcs-dropdown-item-background-color-press - Background color of the dropdown item when pressed\n * @cssprop --wcs-dropdown-item-border-width-focus - Border width of the dropdown item when focused\n * @cssprop --wcs-dropdown-item-border-color-focus - Border color of the dropdown item when focused\n * @cssprop --wcs-dropdown-item-border-radius - Border radius of the dropdown item\n * @cssprop --wcs-dropdown-item-transition-duration - Transition duration of the dropdown item\n */\n@Component({\n    tag: 'wcs-dropdown-item',\n    styleUrl: 'dropdown-item.scss'\n})\nexport class DropdownItem implements ComponentInterface {\n    /**\n     * Event emitted when the dropdown item is clicked\n     */\n    @Event({\n        eventName: 'wcsDropdownItemClick',\n    })\n    wcsDropdownItemClick: EventEmitter<void>;\n    \n    @Listen('mouseup')\n    onMouseUp(_: MouseEvent): void {\n        this.wcsDropdownItemClick.emit();\n    }\n\n    @Listen('keydown')\n    onKeyDown(evt: KeyboardEvent): void {\n        if (isSpaceKey(evt) || isEnterKey(evt)) {\n            evt.preventDefault();\n            evt.stopImmediatePropagation();\n            this.wcsDropdownItemClick.emit();\n        }\n    }\n\n    render() {\n        return (\n            <Host slot=\"item\" role=\"menuitem\" tabindex=\"-1\">\n                <slot/>\n            </Host>\n        );\n    }\n}\n"],"mappings":"oGAAA,MAAMA,EAAkB,mxEACxB,MAAAC,EAAeD,E,MCyBFE,EAAY,M,oFAUrB,SAAAC,CAAUC,GACNC,KAAKC,qBAAqBC,M,CAI9B,SAAAC,CAAUC,GACN,GAAIC,EAAWD,IAAQE,EAAWF,GAAM,CACpCA,EAAIG,iBACJH,EAAII,2BACJR,KAAKC,qBAAqBC,M,EAIlC,MAAAO,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,OAAOC,KAAK,WAAWC,SAAS,MACvCL,EAAA,QAAAE,IAAA,6C"}

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

@@ -0,0 +1,2 @@
+import{r as t,h as a,H as r}from"./p-32e583ea.js";const s=":host{display:block;--wcs-card-media-max-width-horizontal:160px}:host ::slotted(*),:host ::slotted([slot=horizontal]),:host ::slotted([slot=vertical]){display:block;object-fit:cover;width:100%;height:100%}:host(.vertical) ::slotted(*),:host(.vertical) ::slotted([slot=vertical]){border-radius:var(--wcs-card-border-radius) var(--wcs-card-border-radius) 0 0;aspect-ratio:16/9}:host(.horizontal) ::slotted(*),:host(.horizontal) ::slotted([slot=horizontal]){width:var(--wcs-card-media-max-width-horizontal);aspect-ratio:1/1;border-radius:var(--wcs-card-border-radius) 0 0 var(--wcs-card-border-radius)}";const o=s;const e=class{constructor(a){t(this,a);this.orientation="vertical"}async setOrientation(t){this.orientation=t}render(){return a(r,{key:"8b54a791a4d1c8bfdc772cb5cd16f3a3dfec0682",class:this.orientation},a("slot",{key:"a7f5751e8e1f3ef3b1b18af34384cb598a80b690"}),this.orientation==="vertical"?a("slot",{name:"vertical"}):a("slot",{name:"horizontal"}))}};e.style=o;export{e as wcs_card_media};
+//# sourceMappingURL=p-cbbca016.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["cardMediaCss","WcsCardMediaStyle0","CardMedia","setOrientation","orientation","this","render","h","Host","key","class","name"],"sources":["src/components/card-media/card-media.scss?tag=wcs-card-media&encapsulation=shadow","src/components/card-media/card-media.tsx"],"sourcesContent":[":host {\n    display: block;\n\n    --wcs-card-media-max-width-horizontal: 160px;\n\n    ::slotted(*), ::slotted([slot=\"horizontal\"]), ::slotted([slot=\"vertical\"]) {\n        display: block;\n        object-fit: cover; // object position = 50% 50%\n\n        width: 100%;\n        height: 100%;\n    }\n}\n\n:host(.vertical) {\n    ::slotted(*), ::slotted([slot=\"vertical\"]) {\n        border-radius: var(--wcs-card-border-radius) var(--wcs-card-border-radius) 0 0;\n        aspect-ratio: 16 / 9;\n    }\n}\n\n:host(.horizontal) {\n    ::slotted(*), ::slotted([slot=\"horizontal\"]) {\n        width: var(--wcs-card-media-max-width-horizontal);\n        aspect-ratio: 1 / 1;\n        border-radius: var(--wcs-card-border-radius) 0 0 var(--wcs-card-border-radius);\n    }\n}\n","import { Component, Host, h, Method, State } from '@stencil/core';\nimport { CardOrientation } from \"../card/card-interface\";\n\n/**\n * The card media component is a container that display an image/icon inside a card. \n * On horizontal orientation, the image/icon has an aspect ratio of 1/1\n * On vertical orientation, the image/icon has an aspect ratio of 16/9.\n * \n * @slot - The default slot where the image/icon is displayed\n * @slot vertical - The slot where the image/icon is displayed when the card is vertical\n * @slot horizontal - The slot where the image/icon is displayed when the card is horizontal\n * \n * @cssprop --wcs-card-media-max-width-horizontal - Max width of the image when the card is horizontal\n */\n@Component({\n    tag: 'wcs-card-media',\n    styleUrl: 'card-media.scss',\n    shadow: true,\n})\nexport class CardMedia {\n    @State() private orientation: CardOrientation = 'vertical';\n\n    /**\n     * @internal this method is not intended to be used by the user\n     */\n    @Method()\n    async setOrientation(orientation: CardOrientation) {\n        this.orientation = orientation;\n    }\n\n    render() {\n        return (\n            <Host class={this.orientation}>\n                <slot></slot>\n                {this.orientation === 'vertical' ? <slot name=\"vertical\"></slot> : <slot name=\"horizontal\"></slot>}\n            </Host>\n        );\n    }\n\n}\n"],"mappings":"kDAAA,MAAMA,EAAe,0lBACrB,MAAAC,EAAeD,E,MCkBFE,EAAS,M,0CAC8B,U,CAMhD,oBAAMC,CAAeC,GACjBC,KAAKD,YAAcA,C,CAGvB,MAAAE,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAOL,KAAKD,aACdG,EAAA,QAAAE,IAAA,6CACCJ,KAAKD,cAAgB,WAAaG,EAAA,QAAMI,KAAK,aAAqBJ,EAAA,QAAMI,KAAK,e"}

package/dist/wcs/{p-619e1110.entry.js → p-cbda74f6.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as s,H as c}from"./p-32e583ea.js";const e=":host{--wcs-hint-font-size-default:var(--wcs-semantic-font-size-caption-2);--wcs-hint-font-size-small:var(--wcs-semantic-font-size-caption-3);--wcs-hint-font-weight:var(--wcs-semantic-font-weight-book);--wcs-hint-color:var(--wcs-semantic-color-text-secondary);font-size:var(--wcs-hint-font-size-default);font-weight:var(--wcs-hint-font-weight);color:var(--wcs-hint-color)}:host([small]){font-size:var(--wcs-hint-font-size-small);font-weight:var(--wcs-hint-font-weight)}";const o=e;const n=class{constructor(s){t(this,s);this.small=false}render(){return s(c,{key:"e143c56dcc628774eecfc09ce5d0151703cffa89",slot:"messages"},s("slot",{key:"da1cf4e019f6dd0416402a77abd360806c5892e4"}))}};n.style=o;export{n as wcs_hint};
-//# sourceMappingURL=p-619e1110.entry.js.map
+import{r as t,h as s,H as o}from"./p-32e583ea.js";const c=":host{--wcs-hint-font-size-default:var(--wcs-semantic-font-size-caption-2);--wcs-hint-font-size-small:var(--wcs-semantic-font-size-caption-3);--wcs-hint-font-weight:var(--wcs-semantic-font-weight-book);--wcs-hint-color:var(--wcs-semantic-color-text-secondary);font-size:var(--wcs-hint-font-size-default);font-weight:var(--wcs-hint-font-weight);color:var(--wcs-hint-color)}:host([small]){font-size:var(--wcs-hint-font-size-small);font-weight:var(--wcs-hint-font-weight)}";const a=c;const n=class{constructor(s){t(this,s);this.small=false}render(){return s(o,{key:"e9b631d775aa7564172286a9ac280cffdc22aa24",slot:"messages"},s("slot",{key:"f8d4350acb11283861487cc1b3a5ba20c0674f82"}))}};n.style=a;export{n as wcs_hint};
+//# sourceMappingURL=p-cbda74f6.entry.js.map