wcs-core 4.1.0 → 4.2.0

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

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

package/dist/wcs/p-94d95b99.entry.js

@@ -1,2 +0,0 @@
-import{r as s,c as t,h as o,H as a}from"./p-a2df3a49.js";const e="wcs-modal{z-index:999;position:fixed;top:0;bottom:0;left:0;right:0;display:none;background:rgba(0, 0, 0, 0.4)}wcs-modal[show]{display:flex;height:100vh;width:100vw;align-items:center;justify-content:center}wcs-modal[without-backdrop]{background-color:unset}wcs-modal[without-backdrop] .wcs-modal-container{border:solid 1px var(--wcs-text-light)}.wcs-modal-container{max-height:var(--wcs-modal-max-height, 80%);background-color:#fff;display:grid;grid-template-columns:100%;grid-template-rows:auto 1fr auto;box-sizing:border-box;pointer-events:auto;background-clip:padding-box;border:0 solid rgba(0, 0, 0, 0.2);border-radius:0.4375rem;z-index:20000;padding:1.375rem 1.875rem 1.875rem 1.875rem}.wcs-modal-container[data-size=s]{width:288px}.wcs-modal-container[data-size=m]{width:480px}.wcs-modal-container[data-size=l]{width:864px}.wcs-modal-container[data-size=xl]{width:1200px}.wcs-modal-header{margin-bottom:8px;display:flex;align-items:center;justify-content:space-between}.wcs-modal-header h5{font-size:24px;font-weight:400;margin:0}.wcs-modal-content{font-weight:400;font-size:16px;overflow-y:auto}.wcs-modal-actions{margin-top:20px;display:flex;justify-content:flex-end}";const i=class{constructor(o){s(this,o);this.wcsDialogClosed=t(this,"wcsDialogClosed",7);this.withoutBackdrop=false;this.show=false;this.showCloseButton=false;this.size="m";this.hideActions=false}render(){return o(a,null,o("div",{class:"wcs-modal-container","data-size":this.size},o("div",{class:"wcs-modal-header"},o("h5",null,o("slot",{name:"header"})),this.showCloseButton&&o("wcs-button",{shape:"round",mode:"clear",class:"wcs-dark",onClick:s=>this.onCloseButtonClick(s)},o("wcs-mat-icon",{icon:"close"}))),o("div",{class:"wcs-modal-content"},o("slot",null)),!this.hideActions&&o("div",{class:"wcs-modal-actions"},o("slot",{name:"actions"}))))}onKeyDown(s){if(this.showCloseButton&&s.key==="Escape"){this.close()}}onCloseButtonClick(s){this.close()}close(){this.show=false;this.wcsDialogClosed.emit()}};i.style=e;export{i as wcs_modal};
-//# sourceMappingURL=p-94d95b99.entry.js.map

package/dist/wcs/p-94d95b99.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["modalCss","Modal","render","h","Host","class","this","size","name","showCloseButton","shape","mode","onClick","$event","onCloseButtonClick","icon","hideActions","onKeyDown","event","key","close","_","show","wcsDialogClosed","emit"],"sources":["./src/components/modal/modal.scss?tag=wcs-modal","./src/components/modal/modal.tsx"],"sourcesContent":["wcs-modal {\n    z-index: 999;\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    display: none;\n    background: rgba(0, 0, 0, 0.4);\n}\n\nwcs-modal[show] {\n    display: flex;\n    height: 100vh;\n    width: 100vw;\n    align-items: center;\n    justify-content: center;\n}\n\n/**\nBackdrop\n */\nwcs-modal[without-backdrop] {\n    background-color: unset;\n\n    .wcs-modal-container {\n        border: solid 1px var(--wcs-text-light);\n    }\n}\n\n/**\nModal window\n */\n.wcs-modal-container {\n    max-height: var(--wcs-modal-max-height, 80%);\n    background-color: #fff;\n    display: grid;\n    grid-template-columns: 100%;\n    grid-template-rows: auto 1fr auto;\n    box-sizing: border-box;\n    pointer-events: auto;\n    background-clip: padding-box;\n    border: 0 solid rgba(0, 0, 0, 0.2);\n    border-radius: 0.4375rem;\n    z-index: 20000;\n    padding: 1.375rem 1.875rem 1.875rem 1.875rem;\n}\n\n.wcs-modal-container[data-size=s] {\n    width: 288px;\n}\n\n.wcs-modal-container[data-size=m] {\n    width: 480px;\n}\n\n.wcs-modal-container[data-size=l] {\n    width: 864px;\n}\n\n.wcs-modal-container[data-size=xl] {\n    width: 1200px;\n}\n\n.wcs-modal-header {\n    h5 {\n        font-size: 24px;\n        font-weight: 400;\n        margin: 0;\n    }\n\n    margin-bottom: 8px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n}\n\n.wcs-modal-content {\n    font-weight: 400;\n    font-size: 16px;\n    overflow-y: auto;\n}\n\n.wcs-modal-actions {\n    margin-top: 20px;\n    display: flex;\n    justify-content: flex-end;\n}\n","import { Component, Event, EventEmitter, h, Host, Listen, Prop } from '@stencil/core';\nimport { ModalSize } from './modal-interface';\n\n@Component({\n    tag: 'wcs-modal',\n    styleUrl: 'modal.scss',\n    shadow: false,\n})\nexport class Modal {\n    /**\n     * Specifies whether the component should display a backdrop on the entire page\n     */\n    @Prop({reflect: true}) withoutBackdrop: boolean = false;\n\n    /**\n     * Displays the modal\n     */\n    @Prop({reflect: true}) show: boolean = false;\n\n    /**\n     * Triggered when the user leaves the dialog with the closing button.\n     */\n    @Event() wcsDialogClosed: EventEmitter<void>;\n\n    /**\n     * Specifies whether the component should display a close button.\n     * if false, it won't close the modal when the escape key is pressed.\n     */\n    @Prop({reflect: true}) showCloseButton: boolean = false;\n\n    /**\n     * There are multiple sizes for modals. The default size is medium (m), however other sizes are available. Select the\n     * size best suited for the content and screen size displaying the modal. Remember to test responsiveness.\n     */\n    @Prop() size: ModalSize = 'm';\n\n    /**\n     * Specifies whether the component should hide the actions slot or not\n     */\n    @Prop({reflect: true}) hideActions: boolean = false;\n\n    render() {\n        return (\n            <Host>\n                <div class=\"wcs-modal-container\" data-size={this.size}>\n                    <div class=\"wcs-modal-header\">\n                        <h5>\n                            <slot name=\"header\"></slot>\n                        </h5>\n                        {this.showCloseButton && (\n                            <wcs-button shape=\"round\" mode=\"clear\" class=\"wcs-dark\"\n                                        onClick={($event) => this.onCloseButtonClick($event)}>\n                                <wcs-mat-icon icon=\"close\"></wcs-mat-icon>\n                            </wcs-button>)\n                        }\n\n                    </div>\n                    <div class=\"wcs-modal-content\">\n                        <slot></slot>\n                    </div>\n                    {!this.hideActions && (\n                        <div class=\"wcs-modal-actions\">\n                            <slot name=\"actions\"></slot>\n                        </div>)\n                    }\n                </div>\n            </Host>\n        );\n    }\n\n    @Listen('keydown', {target: 'document'})\n    // @ts-ignore\n    private onKeyDown(event: KeyboardEvent) {\n        if (this.showCloseButton && event.key === 'Escape') {\n            this.close();\n        }\n    }\n\n    private onCloseButtonClick(_: MouseEvent) {\n        this.close();\n    }\n\n    private close() {\n        this.show = false;\n        this.wcsDialogClosed.emit();\n    }\n}\n"],"mappings":"yDAAA,MAAMA,EAAW,0pC,MCQJC,EAAK,M,+FAIoC,M,UAKX,M,qBAWW,M,UAMxB,I,iBAKoB,K,CAE9CC,SACI,OACIC,EAACC,EAAI,KACDD,EAAA,OAAKE,MAAM,sBAAqB,YAAYC,KAAKC,MAC7CJ,EAAA,OAAKE,MAAM,oBACPF,EAAA,UACIA,EAAA,QAAMK,KAAK,YAEdF,KAAKG,iBACFN,EAAA,cAAYO,MAAM,QAAQC,KAAK,QAAQN,MAAM,WACjCO,QAAUC,GAAWP,KAAKQ,mBAAmBD,IACrDV,EAAA,gBAAcY,KAAK,YAK/BZ,EAAA,OAAKE,MAAM,qBACPF,EAAA,eAEFG,KAAKU,aACHb,EAAA,OAAKE,MAAM,qBACPF,EAAA,QAAMK,KAAK,c,CAU3BS,UAAUC,GACd,GAAIZ,KAAKG,iBAAmBS,EAAMC,MAAQ,SAAU,CAChDb,KAAKc,O,EAILN,mBAAmBO,GACvBf,KAAKc,O,CAGDA,QACJd,KAAKgB,KAAO,MACZhB,KAAKiB,gBAAgBC,M"}

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

@@ -1,2 +0,0 @@
-import{r as o,c as e,h as t,H as i,g as r}from"./p-a2df3a49.js";import{i as a,a as s}from"./p-12ac2547.js";const n=':host{width:fit-content}:host([mode=radio]:focus-within){transition:none;outline:2px dashed var(--wcs-primary);outline-offset:0;border-radius:0.5rem}:host([mode=horizontal]:focus-within){transition:none;outline:2px dashed var(--wcs-primary);outline-offset:2px;border-radius:0.5rem}:host([mode=radio]) input,:host([mode=horizontal]) input{position:absolute;opacity:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}:host([mode=radio]) label,:host([mode=horizontal]) label{margin-bottom:0;color:var(--wcs-text-medium);background-color:transparent;font-weight:500 !important;display:inline-block}:host([mode=radio]) label:before,:host([mode=horizontal]) label:before{border-radius:50%;border:2px solid var(--wcs-text-disabled);position:relative;width:1.125rem;height:1.125rem;pointer-events:none;content:"";background-color:var(--wcs-white)}:host([mode=radio]) label:after,:host([mode=horizontal]) label:after{transition:0.175s ease-in-out;position:relative;width:1.125rem;height:1.125rem;content:"";background:no-repeat 50%/50% 50%}:host([disabled]) label{color:var(--wcs-text-disabled);cursor:not-allowed}:host(:not([disabled])) label{cursor:pointer}:host([mode=radio][checked]) label,:host([mode=horizontal][checked]) label{color:var(--wcs-primary)}:host([mode=radio][checked]) label:before,:host([mode=horizontal][checked]) label:before{border-color:var(--wcs-primary);background-color:var(--wcs-primary)}:host([mode=radio]:hover):not([disabled]) label,:host([mode=horizontal]:hover):not([disabled]) label{color:var(--wcs-primary)}:host([mode=radio]:hover):not([disabled]) label:before,:host([mode=horizontal]:hover):not([disabled]) label:before{border-color:var(--wcs-primary)}:host([mode=radio]) label{padding:0.125rem 0.125rem 0 0;border:none;transition:0.175s ease-in-out}:host([mode=radio]) label:before{transition:0.175s ease-in-out;margin-right:var(--wcs-base-margin);display:inline-block;top:3px;box-sizing:border-box}:host([mode=horizontal]) label:before{transition:background-color 0.175s ease-in-out;margin:auto auto var(--wcs-base-margin);display:block}:host([mode=option]){padding:var(--wcs-base-margin) calc(var(--wcs-base-margin) / 2);font-weight:500 !important}:host([mode=option]) input{position:absolute;z-index:-1;opacity:0;box-sizing:border-box;padding:0}:host([mode=option]) label{padding:5px calc(2 * var(--wcs-base-margin));margin-bottom:0;color:var(--wcs-white);white-space:nowrap;border-radius:0.4375rem}:host([mode=option]:focus-within) label{outline:2px dashed var(--wcs-white);outline-offset:0.1rem;border-radius:0.4375rem}:host([mode=option][checked]) label{font-weight:500 !important;color:var(--wcs-primary);background-color:var(--wcs-white)}';const d=class{constructor(t){o(this,t);this.wcsRadioClick=e(this,"wcsRadioClick",7);this.inputId=`wcs-rb-${l++}`;this.mode="radio";this.value=undefined;this.label=undefined;this.checked=false;this.disabled=false}onKeyDown(o){if((a(o)||s(o))&&!this.el.checked){this.el.checked=true;this.emitRadioChangeEvent()}}componentWillLoad(){if(this.value===undefined){this.value=this.el.innerText||""}}componentDidLoad(){this.inputEl=this.el.shadowRoot.querySelector("input");this.inputEl.addEventListener("change",(o=>{this.emitRadioChangeEvent();this.checked=true}))}emitRadioChangeEvent(){this.wcsRadioClick.emit({label:this.label,source:this.el,value:this.value})}render(){return t(i,{slot:"option"},t("input",{id:this.inputId,type:"radio",value:this.value,checked:this.checked,disabled:this.disabled,"aria-disabled":this.disabled?"true":null,"aria-checked":`${this.checked}`}),t("label",{htmlFor:`${this.inputId}`},this.label))}get el(){return r(this)}};let l=0;d.style=n;export{d as wcs_radio};
-//# sourceMappingURL=p-b856f2f6.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["radioCss","Radio","this","inputId","radioButtonIds","onKeyDown","_event","isSpaceKey","isEnterKey","el","checked","emitRadioChangeEvent","componentWillLoad","value","undefined","innerText","componentDidLoad","inputEl","shadowRoot","querySelector","addEventListener","_","wcsRadioClick","emit","label","source","render","h","Host","slot","id","type","disabled","htmlFor"],"sources":["./src/components/radio/radio.scss?tag=wcs-radio&encapsulation=shadow","./src/components/radio/radio.component.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    width: fit-content;\n}\n\n:host([mode=radio]:focus-within) {\n    transition: none;\n    @include focus-outline($border-radius: 0.5rem, $outline-offset: 0);\n}\n\n:host([mode=horizontal]:focus-within) {\n    transition: none;\n    @include focus-outline($border-radius: 0.5rem, $outline-offset: 2px);\n}\n\n:host([mode=radio]),\n:host([mode=horizontal]) {\n    input {\n        position: absolute;\n        opacity: 0;\n        height: 1px;\n        width: 1px;\n        overflow: hidden;\n        clip-path: inset(50%);\n        white-space: nowrap;\n    }\n\n    label {\n        margin-bottom: 0;\n        color: var(--wcs-text-medium);\n        background-color: transparent;\n        font-weight: 500 !important;\n        display: inline-block;\n\n        &:before {\n            border-radius: 50%;\n            border: 2px solid var(--wcs-text-disabled);\n            position: relative;\n            width: 1.125rem;\n            height: 1.125rem;\n            pointer-events: none;\n            content: \"\";\n            background-color: var(--wcs-white);\n        }\n\n        &:after {\n            transition: 0.175s ease-in-out;\n            position: relative;\n            width: 1.125rem;\n            height: 1.125rem;\n            content: \"\";\n            background: no-repeat 50% / 50% 50%;\n        }\n    }\n}\n\n:host([disabled]) {\n    label {\n        color: var(--wcs-text-disabled);\n        cursor: not-allowed;\n    }\n}\n\n:host(:not([disabled])) {\n    label {\n        cursor: pointer;\n    }\n}\n\n:host([mode=radio][checked]),\n:host([mode=horizontal][checked]) {\n    label {\n        color: var(--wcs-primary);\n\n        &:before {\n            border-color: var(--wcs-primary);\n            background-color: var(--wcs-primary);\n        }\n    }\n}\n\n:host([mode=radio]:hover):not([disabled]),\n:host([mode=horizontal]:hover):not([disabled]) {\n    label {\n        color: var(--wcs-primary);\n\n        &:before {\n            border-color: var(--wcs-primary);\n        }\n    }\n}\n\n:host([mode=radio]) {\n    label {\n        padding: 0.125rem 0.125rem 0 0;\n        border: none;\n        transition: 0.175s ease-in-out;\n\n        &:before {\n            transition: 0.175s ease-in-out;\n            margin-right: var(--wcs-base-margin);\n            display: inline-block;\n            top: 3px;\n            box-sizing: border-box;\n        }\n    }\n}\n\n:host([mode=horizontal]) {\n    label {\n        &:before {\n            transition: background-color 0.175s ease-in-out;\n            margin: auto auto var(--wcs-base-margin);\n            display: block;\n\n        }\n    }\n}\n\n:host([mode=option]) {\n    padding: var(--wcs-base-margin) calc(var(--wcs-base-margin) / 2);\n    font-weight: 500 !important;\n\n    input {\n        position: absolute;\n        z-index: -1;\n        opacity: 0;\n        box-sizing: border-box;\n        padding: 0;\n    }\n\n    label {\n        padding: 5px calc(2 * var(--wcs-base-margin));\n        margin-bottom: 0;\n        color: var(--wcs-white);\n        white-space: nowrap;\n        border-radius: 0.4375rem;\n    }\n}\n\n:host([mode=option]:focus-within) {\n    label {\n        @include focus-outline(var(--wcs-white), 0.4375rem, 0.1rem);\n    }\n}\n\n:host([mode=option][checked]) {\n    label {\n        font-weight: 500 !important;\n        color: var(--wcs-primary);\n        background-color: var(--wcs-white);\n    }\n}\n","import { Component, ComponentInterface, h, Host, Prop, Element, Event, EventEmitter, Listen } from '@stencil/core';\nimport { RadioChosedEvent } from './radio-interface';\nimport { RadioGroupMode } from '../radio-group/radio-group-interface';\nimport { isEnterKey, isSpaceKey } from '../../utils/helpers';\n\n@Component({\n    tag: 'wcs-radio',\n    styleUrl: 'radio.scss',\n    shadow: true\n})\nexport class Radio implements ComponentInterface {\n    private inputId = `wcs-rb-${radioButtonIds++}`;\n    private inputEl: HTMLInputElement;\n    @Element() private el!: HTMLWcsRadioElement;\n    @Prop({ reflect: true, mutable: false }) mode: RadioGroupMode = 'radio';\n\n    @Prop({ mutable: true, reflect: true }) value: any | any[] | undefined | null;\n    @Prop({ mutable: true, reflect: true }) label: string;\n    /**\n     * If `true`, the radio is selected.\n     */\n    @Prop({mutable: true, reflect: true}) checked = false;\n    /**\n     * If `true`, the user cannot interact with the radio.\n     */\n    @Prop({ mutable: true }) disabled = false;\n    // FIXME renommer l'évènement c'est pas un onclick mais un onchange\n    @Event({eventName: 'wcsRadioClick' }) wcsRadioClick: EventEmitter<RadioChosedEvent>\n\n    @Listen('keydown')\n    onKeyDown(_event: KeyboardEvent) {\n        if ((isSpaceKey(_event) || isEnterKey(_event)) && !this.el.checked) {\n            this.el.checked = true;\n            this.emitRadioChangeEvent();\n        }\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        if (this.value === undefined) {\n            // If no value was given we use the text content instead.\n            this.value = this.el.innerText || '';\n        }\n    }\n\n    componentDidLoad() {\n        this.inputEl = this.el.shadowRoot.querySelector('input');\n        this.inputEl.addEventListener('change', _ => {\n            this.emitRadioChangeEvent();\n            this.checked = true;\n        })\n    }\n\n    emitRadioChangeEvent() {\n        this.wcsRadioClick.emit({\n            label: this.label,\n            source: this.el,\n            value: this.value\n        });\n    }\n\n    render() {\n        return (\n            <Host slot=\"option\">\n                <input\n                    id={this.inputId}\n                    type=\"radio\"\n                    value={this.value}\n                    checked={this.checked}\n                    disabled={this.disabled}\n                    aria-disabled={this.disabled ? 'true' : null}\n                    aria-checked={`${this.checked}`}/>\n                <label htmlFor={`${this.inputId}`}>{this.label}</label>\n            </Host>\n        );\n    }\n}\n\nlet radioButtonIds = 0;\n"],"mappings":"2GAAA,MAAMA,EAAW,kpF,MCUJC,EAAK,M,sEACNC,KAAAC,QAAU,UAAUC,M,UAGoC,Q,uDAOhB,M,cAIZ,K,CAKpCC,UAAUC,GACN,IAAKC,EAAWD,IAAWE,EAAWF,MAAaJ,KAAKO,GAAGC,QAAS,CAChER,KAAKO,GAAGC,QAAU,KAClBR,KAAKS,sB,EAIbC,oBACI,GAAIV,KAAKW,QAAUC,UAAW,CAE1BZ,KAAKW,MAAQX,KAAKO,GAAGM,WAAa,E,EAI1CC,mBACId,KAAKe,QAAUf,KAAKO,GAAGS,WAAWC,cAAc,SAChDjB,KAAKe,QAAQG,iBAAiB,UAAUC,IACpCnB,KAAKS,uBACLT,KAAKQ,QAAU,IAAI,G,CAI3BC,uBACIT,KAAKoB,cAAcC,KAAK,CACpBC,MAAOtB,KAAKsB,MACZC,OAAQvB,KAAKO,GACbI,MAAOX,KAAKW,O,CAIpBa,SACI,OACIC,EAACC,EAAI,CAACC,KAAK,UACPF,EAAA,SACIG,GAAI5B,KAAKC,QACT4B,KAAK,QACLlB,MAAOX,KAAKW,MACZH,QAASR,KAAKQ,QACdsB,SAAU9B,KAAK8B,SAAQ,gBACR9B,KAAK8B,SAAW,OAAS,KAAI,eAC9B,GAAG9B,KAAKQ,YAC1BiB,EAAA,SAAOM,QAAS,GAAG/B,KAAKC,WAAYD,KAAKsB,O,2BAMzD,IAAIpB,EAAiB,E"}