wcs-core 3.0.0 → 4.0.0

package/dist/wcs/p-3e370f48.entry.js

@@ -1,2 +0,0 @@
-export{G as wcs_grid_pagination}from"./p-62db1219.js";import"./p-a2df3a49.js";
-//# sourceMappingURL=p-3e370f48.entry.js.map

package/dist/wcs/p-49e66081.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as s,H as r,g as e}from"./p-a2df3a49.js";import{g as a,h as n,j as h}from"./p-dc57a5f7.js";const d=":host{--wcs-input-icon-color:var(--wcs-text-medium);--wcs-internal-input-border-radius-left:var(--wcs-input-border-radius-left, var(--wcs-border-radius));--wcs-internal-input-border-radius-right:var(--wcs-input-border-radius-right, var(--wcs-border-radius));--wcs-internal-input-border-width:2px;display:flex;width:100%;border-radius:var(--wcs-internal-input-border-radius-left) var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-left);background-color:var(--wcs-light);border:var(--wcs-internal-input-border-width) solid var(--wcs-light);background-clip:padding-box}:host ::placeholder{font-weight:400;font-style:italic}:host input{overflow:hidden;box-sizing:border-box;min-height:24px;width:100%;background-color:transparent;font-family:var(--wcs-font-sans-serif);color:var(--wcs-primary);font-weight:var(--wcs-font-weight-form-value) !important;border:none;padding:calc(var(--wcs-padding) / 2 - var(--wcs-internal-input-border-width) / 2) calc(var(--wcs-padding) - var(--wcs-internal-input-border-width));font-size:1rem;line-height:1.5}:host input:focus{box-shadow:none;outline:0}:host wcs-mat-icon{position:relative;margin-left:8px;margin-right:-8px}:host .toggle_password{cursor:pointer;margin-left:-8px;margin-right:8px}:host .prefix,:host .suffix{color:var(--wcs-white);display:flex;white-space:nowrap;align-items:center;padding:0 calc(var(--wcs-padding) / 2);font-weight:var(--wcs-font-weight-form-value) !important;background-color:var(--wcs-text-disabled)}:host .prefix{border-radius:var(--wcs-internal-input-border-radius-left) 0 0 var(--wcs-internal-input-border-radius-left);margin:calc(-1 * var(--wcs-internal-input-border-width)) 0 calc(-1 * var(--wcs-internal-input-border-width)) calc(-1 * var(--wcs-internal-input-border-width));border-left:solid var(--wcs-internal-input-border-width) transparent;border-top:solid var(--wcs-internal-input-border-width) transparent;border-bottom:solid var(--wcs-internal-input-border-width) transparent}:host .suffix{border-radius:0 var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-right) 0;margin:calc(-1 * var(--wcs-internal-input-border-width)) calc(-1 * var(--wcs-internal-input-border-width)) calc(-1 * var(--wcs-internal-input-border-width)) 0px;border-right:solid var(--wcs-internal-input-border-width) transparent;border-top:solid var(--wcs-internal-input-border-width) transparent;border-bottom:solid var(--wcs-internal-input-border-width) transparent}:host([state=error]){border-color:var(--wcs-red) !important}:host([data-has-prefix]) input{padding-left:calc(var(--wcs-padding) / 2)}:host([data-has-suffix]) input{padding-left:calc(var(--wcs-padding) / 2)}:host([disabled]) input{color:var(--wcs-text-disabled);cursor:not-allowed}:host([disabled]) .prefix,:host([disabled]) .suffix{color:var(--wcs-light)}:host(:focus-within){border:dashed var(--wcs-internal-input-border-width) var(--wcs-primary)}:host(:focus-within) .prefix{border-left:dashed var(--wcs-internal-input-border-width) var(--wcs-primary);border-top:dashed var(--wcs-internal-input-border-width) var(--wcs-primary);border-bottom:dashed var(--wcs-internal-input-border-width) var(--wcs-primary)}:host(:focus-within) .suffix{border-right:dashed var(--wcs-internal-input-border-width) var(--wcs-primary);border-top:dashed var(--wcs-internal-input-border-width) var(--wcs-primary);border-bottom:dashed var(--wcs-internal-input-border-width) var(--wcs-primary)}:host(:focus-within) wcs-mat-icon{color:var(--wcs-primary)}";const o=class{constructor(s){t(this,s);this.wcsInput=i(this,"wcsInput",7);this.wcsChange=i(this,"wcsChange",7);this.wcsBlur=i(this,"wcsBlur",7);this.wcsFocus=i(this,"wcsFocus",7);this.inputId=`wcs-input-${l++}`;this.didBlurAfterEdit=false;this.inheritedAttributes={};this.iconPassword="visibility";this.onInput=t=>{const i=t.target;if(i){this.value=i.value||""}this.wcsInput.emit(t)};this.onBlur=t=>{this.hasFocus=false;this.focusChanged();if(this.fireFocusEvents){this.wcsBlur.emit(t)}};this.onFocus=t=>{this.hasFocus=true;this.focusChanged();if(this.fireFocusEvents){this.wcsFocus.emit(t)}};this.onKeydown=t=>{if(this.shouldClearOnEdit()){if(this.didBlurAfterEdit&&this.hasValue()&&t.key!=="Enter"){this.clearTextInput()}this.didBlurAfterEdit=false}};this.clearTextInput=t=>{if(this.clearInput&&!this.readonly&&!this.disabled&&t){t.preventDefault();t.stopPropagation();this.setFocus()}this.value="";if(this.nativeInput){this.nativeInput.value=""}};this.fireFocusEvents=true;this.hasFocus=false;this.passwordReveal=false;this.accept=undefined;this.autocapitalize="off";this.autocomplete="off";this.autocorrect="off";this.autofocus=false;this.clearInput=false;this.clearOnEdit=undefined;this.debounce=0;this.prefixLabel=undefined;this.suffixLabel=undefined;this.disabled=false;this.enterkeyhint=undefined;this.icon=undefined;this.inputmode=undefined;this.max=undefined;this.maxlength=undefined;this.min=undefined;this.minlength=undefined;this.multiple=undefined;this.name=this.inputId;this.pattern=undefined;this.placeholder=undefined;this.readonly=false;this.required=false;this.spellcheck=false;this.state="initial";this.step=undefined;this.size=undefined;this.type="text";this.value=""}debounceChanged(){this.wcsChange=a(this.wcsChange,this.debounce)}valueChanged(){var t;this.wcsChange.emit({value:(t=this.value)===null||t===void 0?void 0:t.toString()})}componentWillLoad(){this.inheritedAttributes=n(this.el,["aria-label","tabindex","title"])}connectedCallback(){this.debounceChanged();{document.dispatchEvent(new CustomEvent("wcsInputDidLoad",{detail:this.el}))}}disconnectedCallback(){{document.dispatchEvent(new CustomEvent("wcsInputDidUnload",{detail:this.el}))}}async setFocus(){if(this.nativeInput){this.nativeInput.focus()}}async setBlur(){if(this.nativeInput){this.nativeInput.blur()}}getInputElement(){return Promise.resolve(this.nativeInput)}shouldClearOnEdit(){const{type:t,clearOnEdit:i}=this;return i===undefined?t==="password":i}getValue(){return typeof this.value==="number"?this.value.toString():(this.value||"").toString()}focusChanged(){if(!this.hasFocus&&this.shouldClearOnEdit()&&this.hasValue()){this.didBlurAfterEdit=true}}hasValue(){return this.getValue().length>0}passwordRevealIconClick(){this.passwordReveal=!this.passwordReveal}onPasswordRevealChange(){this.iconPassword=this.passwordReveal?"visibility_off":"visibility"}render(){const t=this.getValue();const i=this.inputId+"-lbl";const e=h(this.el);if(e){e.id=i}return s(r,{"aria-disabled":this.disabled?"true":null,"data-has-prefix":!!this.prefixLabel,"data-has-suffix":!!this.suffixLabel},this.prefixLabel?s("span",{class:"prefix",part:"prefix"},this.prefixLabel):null,this.icon?s("wcs-mat-icon",{icon:this.icon,size:"m"}):null,s("input",Object.assign({class:"native-input",ref:t=>this.nativeInput=t,"aria-labelledby":e?i:null,disabled:this.disabled,accept:this.accept,autoCapitalize:this.autocapitalize,autoComplete:this.autocomplete,autoCorrect:this.autocorrect,autoFocus:this.autofocus,enterKeyHint:this.enterkeyhint,inputMode:this.inputmode,min:this.min,max:this.max,minLength:this.minlength,maxLength:this.maxlength,multiple:this.multiple,name:this.name,pattern:this.pattern,placeholder:this.placeholder||"",readOnly:this.readonly,required:this.required,spellcheck:this.spellcheck,step:this.step,size:this.size,type:this.passwordReveal?"text":this.type,value:t,onInput:this.onInput,onBlur:this.onBlur,onFocus:this.onFocus,onKeyDown:this.onKeydown},this.inheritedAttributes)),this.type==="password"?s("wcs-mat-icon",{class:"toggle_password",icon:this.iconPassword,size:"m",onClick:()=>this.passwordRevealIconClick()}):null,this.suffixLabel?s("span",{class:"suffix",part:"suffix"},this.suffixLabel):null)}static get delegatesFocus(){return true}get el(){return e(this)}static get watchers(){return{debounce:["debounceChanged"],value:["valueChanged"],passwordReveal:["onPasswordRevealChange"]}}};let l=0;o.style=d;export{o as wcs_input};
-//# sourceMappingURL=p-49e66081.entry.js.map

package/dist/wcs/p-49e66081.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["inputCss","Input","this","inputId","inputIds","didBlurAfterEdit","inheritedAttributes","iconPassword","onInput","ev","input","target","value","wcsInput","emit","onBlur","hasFocus","focusChanged","fireFocusEvents","wcsBlur","onFocus","wcsFocus","onKeydown","shouldClearOnEdit","hasValue","key","clearTextInput","clearInput","readonly","disabled","preventDefault","stopPropagation","setFocus","nativeInput","debounceChanged","wcsChange","debounceEvent","debounce","valueChanged","_a","toString","componentWillLoad","inheritAttributes","el","connectedCallback","document","dispatchEvent","CustomEvent","detail","disconnectedCallback","async","focus","blur","getInputElement","Promise","resolve","type","clearOnEdit","undefined","getValue","length","passwordRevealIconClick","passwordReveal","onPasswordRevealChange","render","labelId","label","findItemLabel","id","h","Host","prefixLabel","suffixLabel","class","part","icon","size","Object","assign","ref","accept","autoCapitalize","autocapitalize","autoComplete","autocomplete","autoCorrect","autocorrect","autoFocus","autofocus","enterKeyHint","enterkeyhint","inputMode","inputmode","min","max","minLength","minlength","maxLength","maxlength","multiple","name","pattern","placeholder","readOnly","required","spellcheck","step","onKeyDown","onClick"],"sources":["./src/components/input/input.scss?tag=wcs-input&encapsulation=shadow","./src/components/input/input.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    --wcs-input-icon-color: var(--wcs-text-medium);\n    --wcs-internal-input-border-radius-left: var(--wcs-input-border-radius-left, var(--wcs-border-radius));\n    --wcs-internal-input-border-radius-right: var(--wcs-input-border-radius-right, var(--wcs-border-radius));\n    --wcs-internal-input-border-width: 2px;\n    display: flex;\n    width: 100%;\n    border-radius: var(--wcs-internal-input-border-radius-left) var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-left);\n    background-color: var(--wcs-light);\n    border: var(--wcs-internal-input-border-width) solid var(--wcs-light);\n    background-clip: padding-box;\n\n    ::placeholder {\n        font-weight: 400;\n        font-style: italic;\n    }\n\n    input {\n        overflow: hidden;\n        box-sizing: border-box;\n        min-height: 24px;\n        width: 100%;\n        background-color: transparent;\n        font-family: var(--wcs-font-sans-serif);\n        color: var(--wcs-primary);\n        font-weight: var(--wcs-font-weight-form-value) !important;\n        border: none;\n        // On divise --wcs-internal-input-border-width par deux car la valeur du padding est appliquée en haut et en bas\n        padding: calc(calc(var(--wcs-padding) / 2) - calc(var(--wcs-internal-input-border-width) / 2)) calc(var(--wcs-padding) - var(--wcs-internal-input-border-width));\n        font-size: 1rem;\n        line-height: 1.5;\n    }\n\n    input:focus {\n        box-shadow: none;\n        outline: 0;\n    }\n\n    wcs-mat-icon {\n        position: relative;\n        margin-left: 8px;\n        margin-right: -8px;\n    }\n\n    .toggle_password {\n        cursor: pointer;\n        margin-left: -8px;\n        margin-right: 8px;\n    }\n\n\n    .prefix, .suffix {\n        color: var(--wcs-white);\n        display: flex;\n        white-space: nowrap;\n        align-items: center;\n        padding: 0 calc(var(--wcs-padding) / 2);\n        font-weight: var(--wcs-font-weight-form-value) !important;\n        background-color: var(--wcs-text-disabled);\n    }\n\n    .prefix {\n        border-radius: var(--wcs-internal-input-border-radius-left) 0 0 var(--wcs-internal-input-border-radius-left);\n        margin: calc(-1 * var(--wcs-internal-input-border-width)) 0 calc(-1 * var(--wcs-internal-input-border-width)) calc(-1 * var(--wcs-internal-input-border-width));\n        border-left: solid var(--wcs-internal-input-border-width) transparent;\n        border-top: solid var(--wcs-internal-input-border-width) transparent;\n        border-bottom: solid var(--wcs-internal-input-border-width) transparent;\n    }\n\n    .suffix {\n        border-radius: 0 var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-right) 0;\n        margin: calc(-1 * var(--wcs-internal-input-border-width)) calc(-1 * var(--wcs-internal-input-border-width)) calc(-1 * var(--wcs-internal-input-border-width)) 0px;\n        border-right: solid var(--wcs-internal-input-border-width) transparent;\n        border-top: solid var(--wcs-internal-input-border-width) transparent;\n        border-bottom: solid var(--wcs-internal-input-border-width) transparent;\n    }\n}\n\n:host([state=error]) {\n    border-color: var(--wcs-red) !important;\n}\n\n:host([data-has-prefix]) {\n    input {\n        padding-left: calc(var(--wcs-padding) / 2);\n    }\n}\n\n:host([data-has-suffix]) {\n    input {\n        padding-left: calc(var(--wcs-padding) / 2);\n    }\n}\n\n:host([disabled]) {\n    input {\n        color: var(--wcs-text-disabled);\n        cursor: not-allowed;\n    }\n\n    .prefix, .suffix {\n        color: var(--wcs-light);\n    }\n}\n\n:host(:focus-within) {\n    border: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n\n    .prefix {\n        border-left: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n        border-top: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n        border-bottom: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n    }\n\n    .suffix {\n        border-right: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n        border-top: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n        border-bottom: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n    }\n\n    wcs-mat-icon {\n        color: var(--wcs-primary);\n    }\n}\n","import {\n    Build, Component,\n    ComponentInterface, Element, Event, EventEmitter, h, Host, Method, Prop,\n    State, Watch\n} from '@stencil/core';\nimport { debounceEvent, findItemLabel, inheritAttributes } from '../../utils/helpers';\nimport {\n    AutocompleteTypes, InputChangeEventDetail, TextFieldTypes\n} from './input-interface';\n\n/**\n * Mainly inspired from Ionic Input Component\n */\n@Component({\n    tag: 'wcs-input',\n    styleUrl: 'input.scss',\n    shadow: {delegatesFocus: true},\n})\nexport class Input implements ComponentInterface {\n    private nativeInput?: HTMLInputElement;\n    private inputId = `wcs-input-${inputIds++}`;\n    private didBlurAfterEdit = false;\n    private inheritedAttributes: { [k: string]: any } = {};\n    private iconPassword = \"visibility\";\n\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 = true;\n\n    @State() hasFocus = false;\n\n    @State() passwordReveal = false;\n\n    @Element() el!: HTMLElement;\n\n    /**\n     * If the value of the type attribute is `\"file\"`, then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers.\n     */\n    @Prop() accept?: string;\n\n    /**\n     * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n     * Available options: `\"off\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`.\n     */\n    @Prop() autocapitalize = 'off';\n\n    /**\n     * Indicates whether the value of the control can be automatically completed by the browser.\n     */\n    @Prop() autocomplete: AutocompleteTypes = 'off';\n\n    /**\n     * Whether auto correction should be enabled when the user is entering/editing the text value.\n     */\n    @Prop() autocorrect: 'on' | 'off' = 'off';\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 = false;\n\n    /**\n     * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.\n     */\n    @Prop() clearInput = false;\n\n    /**\n     * If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `\"password\"`, `false` for all other types.\n     */\n    @Prop() clearOnEdit?: boolean;\n\n    /**\n     * Set the amount of time, in milliseconds, to wait to trigger the `wcsChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.\n     */\n    @Prop() debounce = 0;\n\n    /**\n     * Prefix displayed before the text field contents. This is not included in the value.\n     */\n    @Prop() prefixLabel: string;\n\n    /**\n     * Suffix displayed after the text field contents. This is not included in the value.\n     */\n    @Prop() suffixLabel: string;\n\n    @Watch('debounce')\n    protected debounceChanged() {\n        this.wcsChange = debounceEvent(this.wcsChange, this.debounce);\n    }\n\n    /**\n     * If `true`, the user cannot interact with the input.\n     */\n    @Prop() disabled = false;\n\n    /**\n     * A hint to the browser for which enter key to display.\n     * Possible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n     * `\"previous\"`, `\"search\"`, and `\"send\"`.\n     */\n    @Prop() enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';\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     * Possible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n     * `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.\n     */\n    @Prop() inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';\n\n    /**\n     * The maximum value, which must not be less than its minimum (min attribute) value.\n     */\n    @Prop() max?: string;\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     * The minimum value, which must not be greater than its maximum (max attribute) value.\n     */\n    @Prop() min?: string;\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     * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `\"email\"` or `\"file\"`, otherwise it is ignored.\n     */\n    @Prop() multiple?: boolean;\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     * A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"date\"`, or `\"password\"`, otherwise it is ignored. When the type attribute is `\"date\"`, `pattern` will only be used in browsers that do not support the `\"date\"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information.\n     */\n    @Prop() pattern?: string;\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() readonly = false;\n\n    /**\n     * If `true`, the user must fill in a value before submitting a form.\n     */\n    @Prop() required = false;\n\n    /**\n     * If `true`, the element will have its spelling and grammar checked.\n     */\n    @Prop() spellcheck = false;\n\n    /**\n     * Specifies the state of the input. By default the input is in an normal state but you can to set it to 'error' state if the data given by the user is not valid.\n     */\n    @Prop({reflect: true}) state: 'initial' | 'error' = 'initial';\n\n    /**\n     * Works with the min and max attributes to limit the increments at which a value can be set.\n     * Possible values are: `\"any\"` or a positive floating point number.\n     */\n    @Prop() step?: string;\n\n    /**\n     * The initial size of the control. This value is in pixels unless the value of the type attribute is `\"text\"` or `\"password\"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, or `\"password\"`, otherwise it is ignored.\n     */\n    @Prop() size?: number;\n\n    /**\n     * The type of control to display. The default type is text.\n     */\n    @Prop() type: TextFieldTypes = 'text';\n\n    /**\n     * The value of the input.\n     */\n    @Prop({mutable: true}) value?: string | number | null = '';\n\n    /**\n     * Emitted when a keyboard input occurred.\n     */\n    @Event() wcsInput!: EventEmitter<KeyboardEvent>;\n\n    /**\n     * Emitted when the value has changed.\n     */\n    @Event() wcsChange!: EventEmitter<InputChangeEventDetail>;\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    /**\n     * Update the native input element when the value changes\n     */\n    @Watch('value')\n    protected valueChanged() {\n        this.wcsChange.emit({value: this.value?.toString()});\n    }\n\n    componentWillLoad() {\n        this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title']);\n    }\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    /**\n     * @deprecated use the native focus method instead\n     *\n     * Sets focus on the native `input` in `wcs-input`. Use this method instead of the global\n     * `input.focus()`.\n     */\n    @Method()\n    async setFocus() {\n        if (this.nativeInput) {\n            this.nativeInput.focus();\n        }\n    }\n\n    /**\n     * Sets blur on the native `input` in `wcs-input`. Use this method instead of the global\n     * `input.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 `<input>` element used under the hood.\n     */\n    @Method()\n    getInputElement(): Promise<HTMLInputElement> {\n        return Promise.resolve(this.nativeInput!);\n    }\n\n    private shouldClearOnEdit() {\n        const {type, clearOnEdit} = this;\n        return (clearOnEdit === undefined)\n            ? type === 'password'\n            : clearOnEdit;\n    }\n\n    private getValue(): string {\n        return typeof this.value === 'number' ? this.value.toString() :\n            (this.value || '').toString();\n    }\n\n    private onInput = (ev: Event) => {\n        const input = ev.target as HTMLInputElement | null;\n        if (input) {\n            this.value = input.value || '';\n        }\n        this.wcsInput.emit(ev as KeyboardEvent);\n    }\n\n    private onBlur = (ev: FocusEvent) => {\n        this.hasFocus = false;\n        this.focusChanged();\n\n        if (this.fireFocusEvents) {\n            this.wcsBlur.emit(ev);\n        }\n    }\n\n    private onFocus = (ev: FocusEvent) => {\n        this.hasFocus = true;\n        this.focusChanged();\n\n        if (this.fireFocusEvents) {\n            this.wcsFocus.emit(ev);\n        }\n    }\n\n    private onKeydown = (ev: KeyboardEvent) => {\n        if (this.shouldClearOnEdit()) {\n            // Did the input value change after it was blurred and edited?\n            // Do not clear if user is hitting Enter to submit form\n            if (this.didBlurAfterEdit && this.hasValue() && ev.key !== 'Enter') {\n                // Clear the input\n                this.clearTextInput();\n            }\n\n            // Reset the flag\n            this.didBlurAfterEdit = false;\n        }\n    }\n\n    private clearTextInput = (ev?: Event) => {\n        if (this.clearInput && !this.readonly && !this.disabled && ev) {\n            ev.preventDefault();\n            ev.stopPropagation();\n\n            // Attempt to focus input again after pressing clear button\n            this.setFocus();\n        }\n\n        this.value = '';\n\n        /**\n         * This is needed for clearOnEdit\n         * Otherwise the value will not be cleared\n         * if user is inside the input\n         */\n        if (this.nativeInput) {\n            this.nativeInput.value = '';\n        }\n    }\n\n    private focusChanged() {\n        // If clearOnEdit is enabled and the input blurred but has a value, set a flag\n        if (!this.hasFocus && this.shouldClearOnEdit() && this.hasValue()) {\n            this.didBlurAfterEdit = true;\n        }\n    }\n\n    private hasValue(): boolean {\n        return this.getValue().length > 0;\n    }\n\n    private passwordRevealIconClick(): void {\n        this.passwordReveal = !this.passwordReveal;\n    }\n\n    @Watch('passwordReveal')\n    onPasswordRevealChange(): void {\n        this.iconPassword = this.passwordReveal ? 'visibility_off' : 'visibility';\n    }\n\n    render() {\n        const value = this.getValue();\n        const labelId = this.inputId + '-lbl';\n        const label = findItemLabel(this.el);\n        if (label) {\n            label.id = labelId;\n        }\n\n        return (\n            <Host\n                aria-disabled={this.disabled ? 'true' : null}\n                data-has-prefix={!!this.prefixLabel}\n                data-has-suffix={!!this.suffixLabel}\n            >\n                {this.prefixLabel ? (<span class=\"prefix\" part=\"prefix\">{this.prefixLabel}</span>) : null}\n                {this.icon ? (<wcs-mat-icon icon={this.icon} size=\"m\"></wcs-mat-icon>) : null}\n                <input\n                    class=\"native-input\"\n                    ref={input => this.nativeInput = input}\n                    aria-labelledby={label ? labelId : null}\n                    disabled={this.disabled}\n                    accept={this.accept}\n                    autoCapitalize={this.autocapitalize}\n                    autoComplete={this.autocomplete}\n                    autoCorrect={this.autocorrect}\n                    autoFocus={this.autofocus}\n                    enterKeyHint={this.enterkeyhint}\n                    inputMode={this.inputmode}\n                    min={this.min}\n                    max={this.max}\n                    minLength={this.minlength}\n                    maxLength={this.maxlength}\n                    multiple={this.multiple}\n                    name={this.name}\n                    pattern={this.pattern}\n                    placeholder={this.placeholder || ''}\n                    readOnly={this.readonly}\n                    required={this.required}\n                    spellcheck={this.spellcheck}\n                    step={this.step}\n                    size={this.size}\n                    type={this.passwordReveal ? 'text' : this.type}\n                    value={value}\n                    onInput={this.onInput}\n                    onBlur={this.onBlur}\n                    onFocus={this.onFocus}\n                    onKeyDown={this.onKeydown}\n                    {...this.inheritedAttributes}\n                />\n                {this.type === \"password\" ? (<wcs-mat-icon class=\"toggle_password\" icon={this.iconPassword} size=\"m\"  onClick={() => this.passwordRevealIconClick()}></wcs-mat-icon>) : null}\n                {this.suffixLabel ? (<span class=\"suffix\" part=\"suffix\">{this.suffixLabel}</span>) : null}\n            </Host>\n        );\n    }\n}\n\nlet inputIds = 0;\n"],"mappings":"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"}

package/dist/wcs/p-504fb24e.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as r,g as t}from"./p-a2df3a49.js";import{l as i}from"./p-dc57a5f7.js";import{M as o}from"./p-04ad2b73.js";const a='@keyframes mdc-ripple-fg-radius-in{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}}@keyframes mdc-ripple-fg-opacity-in{from{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-out{from{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-ripple-surface{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);will-change:transform, opacity;position:relative;outline:none;overflow:hidden}.mdc-ripple-surface::before,.mdc-ripple-surface::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-ripple-surface::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.mdc-ripple-surface::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.mdc-ripple-surface.mdc-ripple-upgraded::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-ripple-surface.mdc-ripple-upgraded::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after{animation:mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.mdc-ripple-surface::before,.mdc-ripple-surface::after{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-ripple-surface.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded],.mdc-ripple-upgraded--unbounded{overflow:visible}.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before,.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after,.mdc-ripple-upgraded--unbounded::before,.mdc-ripple-upgraded--unbounded::after{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before,.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::before,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after{top:var(--mdc-ripple-top, calc(50% - 50%));left:var(--mdc-ripple-left, calc(50% - 50%));width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-ripple-surface::before,.mdc-ripple-surface::after{background-color:#000;background-color:var(--mdc-ripple-color, #000)}.mdc-ripple-surface:hover::before,.mdc-ripple-surface.mdc-ripple-surface--hover::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mdc-ripple-surface:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-ripple-surface.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}:host{display:inline-block;--wcs-button-padding:calc(var(--wcs-padding) / 2) var(--wcs-padding);--wcs-button-color:var(--wcs-contrast, var(--wcs-white, white));--wcs-button-background-color:var(--wcs-base, var(--wcs-primary, #0088CE));--wcs-button-ripple-color:var(--wcs-contrast, var(--wcs-white, white));--wcs-button-border-radius:var(--wcs-border-radius);--wcs-button-border-color:var(--wcs-base)}.wcs-inner-button:focus-visible{outline:2px dashed var(--wcs-primary);outline-offset:4px;border-radius:var(--wcs-button-border-radius)}:host([mode=clear]){--wcs-button-border-color:transparent}:host([mode=clear]) .wcs-inner-button{box-shadow:none}:host([mode=clear]),:host([mode=stroked]){--wcs-button-color:var(--wcs-base);--wcs-button-background-color:transparent}:host([mode=clear]) .wcs-inner-button::before,:host([mode=clear]) .wcs-inner-button::after,:host([mode=stroked]) .wcs-inner-button::before,:host([mode=stroked]) .wcs-inner-button::after{--wcs-button-ripple-color:var(--wcs-base)}:host([shape=small]){--wcs-button-padding:2px 16px}:host([shape=small]) .wcs-inner-button{min-width:var(--wcs-button-min-width, unset);min-height:var(--wcs-button-min-height, unset)}:host([shape=round]){--wcs-button-padding:0;--wcs-button-border-radius:50%}:host([shape=round]) .wcs-inner-button{min-width:var(--wcs-button-min-width, 42px);min-height:var(--wcs-button-min-height, 42px)}:host([shape=square]){--wcs-button-padding:0}:host([shape=square]) .wcs-inner-button{min-width:var(--wcs-button-min-width, 42px);min-height:var(--wcs-button-min-height, 42px)}:host([shape=normal]){--wcs-button-padding:calc(var(--wcs-padding) / 2 + 1px) calc(var(--wcs-padding))}:host([shape=normal]) .wcs-inner-button{min-width:var(--wcs-button-min-width, unset);min-height:var(--wcs-button-min-height, unset)}:host([mode=stroked]) .wcs-inner-button{box-shadow:inset 0 0 0 1px var(--wcs-button-border-color)}:host([loading]){position:relative}:host([loading]) .wcs-inner-button>*:not(wcs-spinner){visibility:hidden;opacity:0}:host([loading]) wcs-spinner{height:24px;width:24px;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto}:host([disabled]),:host([loading]){--wcs-button-color:var(--wcs-text-disabled);cursor:not-allowed}:host([disabled]) :host(not[loading]),:host([loading]) :host(not[loading]){--wcs-button-background-color:var(--wcs-light)}:host([disabled]) .wcs-inner-button,:host([loading]) .wcs-inner-button{--wcs-button-border-color:var(--wcs-light);opacity:1;cursor:default;pointer-events:none}:host([disabled]):host([mode=clear]),:host([disabled]):host([disabled]),:host([loading]):host([mode=clear]),:host([loading]):host([disabled]){--wcs-button-background-color:transparent}.wcs-inner-button{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);will-change:transform, opacity;display:flex;align-items:center;justify-content:center;width:100%;font-family:var(--wcs-font-sans-serif);background-color:var(--wcs-button-background-color);color:var(--wcs-button-color);padding:var(--wcs-button-padding);border-radius:var(--wcs-button-border-radius);border:none;overflow:hidden;outline:0;text-transform:none;margin:0;cursor:pointer;font-weight:500;text-align:center;white-space:nowrap;vertical-align:middle;user-select:none;font-size:1rem;line-height:1.5;transition:color 175ms ease-in-out, background-color 175ms ease-in-out, box-shadow 175ms cubic-bezier(0.4, 0, 0.2, 1)}.wcs-inner-button::before,.wcs-inner-button::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.wcs-inner-button::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.wcs-inner-button::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.wcs-inner-button.mdc-ripple-upgraded::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.wcs-inner-button.mdc-ripple-upgraded::after{top:0;left:0;transform:scale(0);transform-origin:center center}.wcs-inner-button.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.wcs-inner-button.mdc-ripple-upgraded--foreground-activation::after{animation:mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards}.wcs-inner-button.mdc-ripple-upgraded--foreground-deactivation::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.wcs-inner-button::before,.wcs-inner-button::after{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.wcs-inner-button.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.wcs-inner-button:hover::before,.wcs-inner-button.mdc-ripple-surface--hover::before{opacity:0.1;opacity:var(--mdc-ripple-hover-opacity, 0.1)}.wcs-inner-button.mdc-ripple-upgraded--background-focused::before,.wcs-inner-button:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:0.2;opacity:var(--mdc-ripple-focus-opacity, 0.2)}.wcs-inner-button:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.wcs-inner-button:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:0.3;opacity:var(--mdc-ripple-press-opacity, 0.3)}.wcs-inner-button.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.3)}.wcs-inner-button::before,.wcs-inner-button::after{background-color:white;background-color:var(--mdc-ripple-color, white)}.wcs-inner-button::before,.wcs-inner-button::after{background-color:var(--wcs-button-ripple-color)}.wcs-inner-button:focus{box-shadow:0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 1px 3px 0 rgba(0, 0, 0, 0.2)}.wcs-inner-button:hover{box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2)}a{text-decoration:none;box-sizing:border-box}button::-moz-focus-inner,a::-moz-focus-inner{border:0}';const n=class{constructor(r){e(this,r);this.type="button";this.href=undefined;this.disabled=false;this.ripple=true;this.shape="normal";this.mode="plain";this.loading=false}onClick(e){if(this.disabled||this.loading){e.stopImmediatePropagation()}if(this.type!=="button"&&i(this.el)){const r=this.el.closest("form");if(r){e.preventDefault();const t=window.document.createElement("button");t.type=this.type;t.style.display="none";r.appendChild(t);t.click();t.remove()}}}componentDidLoad(){this.mdcRipple=new o(this.el.shadowRoot.querySelector(".wcs-inner-button"))}enabledRippleEffect(){this.mdcRipple.disabled=false}disabledRippleEffect(){this.mdcRipple.disabled=true}getTagName(){return this.href!==undefined?"a":"button"}onRippleChange(){if(this.ripple){this.enabledRippleEffect()}else{this.disabledRippleEffect()}}render(){const e=this.getTagName();const t=this.href!==undefined?{href:this.href,role:"button"}:{type:this.type};return r(e,Object.assign({},t,{class:"wcs-inner-button",disabled:this.disabled||this.loading}),this.loading&&r("wcs-spinner",null),r("slot",null))}static get delegatesFocus(){return true}get el(){return t(this)}static get watchers(){return{ripple:["onRippleChange"]}}};n.style=a;export{n as wcs_button};
-//# sourceMappingURL=p-504fb24e.entry.js.map

package/dist/wcs/p-504fb24e.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["buttonCss","Button","onClick","ev","this","disabled","loading","stopImmediatePropagation","type","hasShadowDom","el","form","closest","preventDefault","fakeButton","window","document","createElement","style","display","appendChild","click","remove","componentDidLoad","mdcRipple","MDCRipple","shadowRoot","querySelector","enabledRippleEffect","disabledRippleEffect","getTagName","href","undefined","onRippleChange","ripple","render","TagType","attrs","role","h","Object","assign","class"],"sources":["./src/components/button/button.scss?tag=wcs-button&encapsulation=shadow","./src/components/button/button.tsx"],"sourcesContent":["@import '../../style/elevation.scss';\n// TODO: get rid of this.\n@import '~@material/ripple/mdc-ripple';\n@import '../../style/focus-outline.scss';\n\n:host {\n    display: inline-block;\n    --wcs-button-padding: calc(var(--wcs-padding) / 2) var(--wcs-padding);\n    --wcs-button-color: var(--wcs-contrast, var(--wcs-white, white));\n    --wcs-button-background-color: var(--wcs-base, var(--wcs-primary, #0088CE));\n    --wcs-button-ripple-color: var(--wcs-contrast, var(--wcs-white, white));\n    --wcs-button-border-radius: var(--wcs-border-radius);\n    --wcs-button-border-color: var(--wcs-base);\n}\n\n.wcs-inner-button:focus-visible {\n    @include focus-outline($border-radius: var(--wcs-button-border-radius));\n}\n\n:host([mode=clear]) {\n    --wcs-button-border-color: transparent;\n\n    .wcs-inner-button {\n        box-shadow: none;\n    }\n}\n\n:host([mode=clear]),\n:host([mode=stroked]) {\n    --wcs-button-color: var(--wcs-base);\n    --wcs-button-background-color: transparent;\n\n    .wcs-inner-button {\n        &::before,\n        &::after {\n            --wcs-button-ripple-color: var(--wcs-base);\n        }\n    }\n}\n\n:host([shape=small]) {\n    --wcs-button-padding: 2px 16px;\n\n    .wcs-inner-button {\n        min-width: var(--wcs-button-min-width, unset);\n        min-height: var(--wcs-button-min-height, unset);\n    }\n}\n\n:host([shape=round]) {\n    --wcs-button-padding: 0;\n    --wcs-button-border-radius: 50%;\n\n    .wcs-inner-button {\n        min-width: var(--wcs-button-min-width, 42px);\n        min-height: var(--wcs-button-min-height, 42px);\n    }\n}\n\n:host([shape=square]) {\n    --wcs-button-padding: 0;\n\n    .wcs-inner-button {\n        min-width: var(--wcs-button-min-width, 42px);\n        min-height: var(--wcs-button-min-height, 42px);\n    }\n}\n\n:host([shape=normal]) {\n    --wcs-button-padding: calc(var(--wcs-padding) / 2 + 1px) calc(var(--wcs-padding));\n\n    .wcs-inner-button {\n        min-width: var(--wcs-button-min-width, unset);\n        min-height: var(--wcs-button-min-height, unset);\n    }\n}\n\n:host([mode=stroked]) {\n    .wcs-inner-button {\n        box-shadow: inset 0 0 0 1px var(--wcs-button-border-color);\n    }\n}\n\n:host([loading]) {\n    position: relative;\n\n    .wcs-inner-button > *:not(wcs-spinner) {\n        visibility: hidden;\n        opacity: 0;\n    }\n\n    wcs-spinner {\n        height: 24px;\n        width: 24px;\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        margin: auto;\n    }\n}\n\n:host([disabled]), :host([loading]) {\n    :host(not[loading]) {\n        --wcs-button-background-color: var(--wcs-light);\n    }\n    --wcs-button-color: var(--wcs-text-disabled);\n    cursor: not-allowed;\n\n    .wcs-inner-button {\n        // Fix for stroked button\n        --wcs-button-border-color: var(--wcs-light);\n        opacity: 1;\n        cursor: default;\n        pointer-events: none;\n    }\n\n    &:host([mode=clear]),\n    &:host([disabled]) {\n        --wcs-button-background-color: transparent;\n    }\n}\n\n.wcs-inner-button {\n    @include mdc-ripple-surface;\n    @include mdc-ripple-radius-bounded;\n    @include mdc-states-hover-opacity(.1);\n    @include mdc-states-focus-opacity(.2);\n    @include mdc-states-press-opacity(.3);\n    @include mdc-states-base-color(white);\n\n    // This property is used to set the ripple color\n    &::before,\n    &::after {\n        background-color: var(--wcs-button-ripple-color);\n    }\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    font-family: var(--wcs-font-sans-serif);\n    background-color: var(--wcs-button-background-color);\n    color: var(--wcs-button-color);\n    padding: var(--wcs-button-padding);\n    border-radius: var(--wcs-button-border-radius);\n    border: none;\n    overflow: hidden;\n    outline: 0;\n    text-transform: none;\n    margin: 0;\n    cursor: pointer;\n    font-weight: 500;\n    text-align: center;\n    white-space: nowrap;\n    vertical-align: middle;\n    user-select: none;\n    font-size: 1rem;\n    line-height: 1.5;\n\n    transition: color 175ms ease-in-out, background-color 175ms ease-in-out, wcs-elevation-transition();\n\n    &:focus {\n        @include wcs-elevation(1);\n    }\n\n    &:hover {\n        @include wcs-elevation(2);\n    }\n}\n\na {\n    text-decoration: none;\n    box-sizing: border-box;\n}\n\n// Remove mozilla dotted outline on button and a\nbutton::-moz-focus-inner,\na::-moz-focus-inner {\n    border: 0;\n}\n","import {Component, ComponentInterface, Element, h, Listen, Prop, Watch} from '@stencil/core';\n\nimport { MDCRipple } from '@material/ripple';\n\nimport { WcsButtonMode, WcsButtonShape, WcsButtonType } from './button-interface';\nimport { hasShadowDom } from '../../utils/helpers';\n\n/**\n * Button component, can also be a link when specifying href.\n */\n@Component({\n    tag: 'wcs-button',\n    styleUrl: 'button.scss',\n    shadow: {\n        delegatesFocus: true\n    }\n})\nexport class Button implements ComponentInterface {\n    @Element() el!: HTMLElement;\n\n    /**\n     * Specify the button type.\n     */\n    @Prop({ mutable: true }) type: WcsButtonType = 'button';\n\n    /**\n     * Set a URL to point to.\n     * If specified use a `a` tag instead of `btn`.\n     */\n    @Prop() href?: string;\n\n    /**\n     * Specify wether the button is disabled or not.\n     */\n    @Prop({ reflect: true }) disabled = false;\n\n    /**\n     * Specify wether the button should have a ripple effect or not.\n     */\n    @Prop() ripple = true;\n    mdcRipple: MDCRipple;\n\n    /**\n     * Specify the shape of the button.\n     */\n    @Prop({ reflect: true }) shape: WcsButtonShape = 'normal';\n\n    /**\n     * This attribute specify the appearance of the button.\n     */\n    @Prop({ reflect: true }) mode: WcsButtonMode = 'plain';\n\n    /**\n     * Flag to display spinner until the end of action\n     */\n    @Prop({mutable: true}) loading: boolean = false;\n\n    @Listen('click')\n    onClick(ev: Event) {\n        if (this.disabled || this.loading) {\n            ev.stopImmediatePropagation();\n        }\n        if (this.type !== 'button' && hasShadowDom(this.el)) {\n            // this button wants to specifically submit a form\n            // climb up the dom to see if we're in a <form>\n            // and if so, then use JS to submit it\n            const form = this.el.closest('form');\n            if (form) {\n                ev.preventDefault();\n\n                const fakeButton = window.document.createElement('button');\n                fakeButton.type = this.type;\n                fakeButton.style.display = 'none';\n                form.appendChild(fakeButton);\n                fakeButton.click();\n                fakeButton.remove();\n            }\n        }\n    }\n\n    componentDidLoad() {\n        this.mdcRipple = new MDCRipple(this.el.shadowRoot.querySelector('.wcs-inner-button'));\n    }\n\n    private enabledRippleEffect() {\n        this.mdcRipple.disabled = false;\n    }\n\n    private disabledRippleEffect() {\n        this.mdcRipple.disabled = true;\n    }\n\n    private getTagName() {\n        return this.href !== undefined ? 'a' : 'button';\n    }\n\n    @Watch('ripple')\n    onRippleChange(): void {\n        if (this.ripple) {\n            this.enabledRippleEffect();\n        } else {\n            this.disabledRippleEffect();\n        }\n    }\n\n    render() {\n        const TagType = this.getTagName();\n        const attrs = this.href !== undefined\n            ? { href: this.href, role: 'button' }\n            : { type: this.type };\n        return (\n            <TagType\n                {...attrs}\n                class=\"wcs-inner-button\"\n                disabled = {this.disabled || this.loading}\n            >\n                {\n                    this.loading && <wcs-spinner></wcs-spinner>\n                }\n                <slot/>\n            </TagType>\n        );\n    }\n}\n"],"mappings":"0HAAA,MAAMA,EAAY,guT,MCiBLC,EAAM,M,mCAMgC,S,kCAWX,M,YAKnB,K,WAMgC,S,UAKF,Q,aAKL,K,CAG1CC,QAAQC,GACJ,GAAIC,KAAKC,UAAYD,KAAKE,QAAS,CAC/BH,EAAGI,0B,CAEP,GAAIH,KAAKI,OAAS,UAAYC,EAAaL,KAAKM,IAAK,CAIjD,MAAMC,EAAOP,KAAKM,GAAGE,QAAQ,QAC7B,GAAID,EAAM,CACNR,EAAGU,iBAEH,MAAMC,EAAaC,OAAOC,SAASC,cAAc,UACjDH,EAAWN,KAAOJ,KAAKI,KACvBM,EAAWI,MAAMC,QAAU,OAC3BR,EAAKS,YAAYN,GACjBA,EAAWO,QACXP,EAAWQ,Q,GAKvBC,mBACInB,KAAKoB,UAAY,IAAIC,EAAUrB,KAAKM,GAAGgB,WAAWC,cAAc,qB,CAG5DC,sBACJxB,KAAKoB,UAAUnB,SAAW,K,CAGtBwB,uBACJzB,KAAKoB,UAAUnB,SAAW,I,CAGtByB,aACJ,OAAO1B,KAAK2B,OAASC,UAAY,IAAM,Q,CAI3CC,iBACI,GAAI7B,KAAK8B,OAAQ,CACb9B,KAAKwB,qB,KACF,CACHxB,KAAKyB,sB,EAIbM,SACI,MAAMC,EAAUhC,KAAK0B,aACrB,MAAMO,EAAQjC,KAAK2B,OAASC,UACtB,CAAED,KAAM3B,KAAK2B,KAAMO,KAAM,UACzB,CAAE9B,KAAMJ,KAAKI,MACnB,OACI+B,EAACH,EAAOI,OAAAC,OAAA,GACAJ,EAAK,CACTK,MAAM,mBACNrC,SAAYD,KAAKC,UAAYD,KAAKE,UAG9BF,KAAKE,SAAWiC,EAAA,oBAEpBA,EAAA,a"}

package/dist/wcs/p-5140269d.entry.js

@@ -1,2 +0,0 @@
-import{h as t,r as e,c as i,H as s,g as a}from"./p-a2df3a49.js";const r=({step:e,checkOnComplete:i,complete:s,passed:a,active:r,first:o,disable:l,onClick:h})=>t("div",{class:"graphic-step","data-first":o},o?null:t("wcs-progress-bar",{value:a?100:0}),t("wcs-button",{style:{backgroundColor:"white"},shape:"round",onClick:t=>h(e),mode:(r||s)&&!e.disable?"plain":"stroked",disabled:l},n(e.button,i,s,r)));const n=(e,i,s,a)=>{if(i&&s&&!a){return t("wcs-mat-icon",{size:"m",icon:"done",family:"outlined"})}switch(e.kind){case"Icon":return t("wcs-mat-icon",{size:"m",icon:e.iconName,family:e.family?e.family:"outlined"});case"Text":return e.text}};const o=":host{display:block}:host .steps{display:flex;flex-direction:row;flex:1}:host .graphic-step{display:flex;flex-direction:row;flex:1;align-items:center}:host .graphic-step[data-first]{flex:0}:host wcs-progress-bar{--wcs-internal-progress-bar-border-radius:0;flex:1;margin:0 -1px}:host .label-container{justify-content:space-between;display:flex;flex-direction:row;margin-top:var(--wcs-base-margin)}:host .label-container>*{width:100%;text-align:center;flex:1;color:var(--wcs-text-medium);font-weight:500}:host .label-container>*[data-disable]{color:var(--wcs-text-light)}:host .label-container>*[data-current]{color:var(--wcs-primary)}:host .label-container>div[data-first]{margin-left:20px;text-align:left;flex:0.5}:host .label-container>div[data-first]>span{margin-left:-20px}:host .label-container>div[data-last]{margin-right:20px;text-align:right;flex:0.5}:host .label-container>div[data-last]>span{margin-right:-20px}";const l=class{constructor(t){e(this,t);this.wcsHorizontalStepClick=i(this,"wcsHorizontalStepClick",7);this.currentStep=0;this.steps=undefined;this.mode="nonLinear";this.checkOnComplete=undefined;this.buttonMode="stroked";this.internalCurrentStep=undefined}componentWillLoad(){this.internalCurrentStep=this.currentStep;if(this.steps.length<1){throw new Error("You must add at least one step")}}onCurrentStepChange(t,e){if(this.internalCurrentStep!==undefined){const i=Math.abs(e-t);this.el.style.setProperty("--wcs-progress-bar-animation-duration",375/i+"ms");if(t!==e){for(let s=0;s<i;s++){setTimeout((()=>{this.internalCurrentStep-=e-t>0?1:-1;if(s===i-1){this.el.style.removeProperty("--wcs-progress-bar-animation-duration")}}),s*(375/i))}}}}async previous(){this.navigateToIndex(this.internalCurrentStep-1,"backward")}async next(){this.navigateToIndex(this.internalCurrentStep+1,"forward")}navigateToIndex(t,e){var i,s;if(t>=0&&t<=this.steps.length-1){if(((i=this.steps[t])===null||i===void 0?void 0:i.complete)||((s=this.steps[t])===null||s===void 0?void 0:s.disable)){this.navigateToIndex(t+(e==="forward"?1:-1),e)}else{this.currentStep=t}}}render(){return t(s,null,t("div",{class:"steps"},this.steps.map(((e,i)=>t(r,{step:e,passed:i<=this.internalCurrentStep,checkOnComplete:this.checkOnComplete,complete:this.isComplete(e,i),active:i===this.internalCurrentStep,first:i===0,disable:this.isDisable(e,i),onClick:t=>this.wcsHorizontalStepClick.emit({step:t,index:i})})))),this.renderLabels())}isComplete(t,e){return e<=this.internalCurrentStep||t.complete}renderLabels(){if(this.steps.map((t=>t.text)).every((t=>!t))){return null}else{return t("div",{class:"label-container"},this.steps.map(((e,i)=>t("div",{"data-first":i===0,"data-current":i===this.internalCurrentStep&&!e.disable,"data-disable":this.isDisable(e,i),"data-last":i===this.steps.length-1},t("span",null,e.text)))))}}isDisable(t,e){return t.disable||this.mode==="linear"&&(!this.isNextPossibleStep(e)&&this.internalCurrentStep<e)}isNextPossibleStep(t){var e;if(t===0)return true;if(((e=this.steps[t-1])===null||e===void 0?void 0:e.disable)||this.previousStepIsCompleteAndNotActive(t))return this.isNextPossibleStep(t-1);return this.internalCurrentStep===t-1}previousStepIsCompleteAndNotActive(t){var e;return((e=this.steps[t-1])===null||e===void 0?void 0:e.complete)&&t-1!==this.internalCurrentStep}get el(){return a(this)}static get watchers(){return{currentStep:["onCurrentStepChange"]}}};l.style=o;export{l as wcs_horizontal_stepper};
-//# sourceMappingURL=p-5140269d.entry.js.map

package/dist/wcs/p-5140269d.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["HorizontalStep","step","checkOnComplete","complete","passed","active","first","disable","onClick","h","class","value","style","backgroundColor","shape","_","mode","disabled","getButtonContent","button","stepButton","size","icon","family","kind","iconName","horizontalStepperCss","HorizontalStepper","componentWillLoad","this","internalCurrentStep","currentStep","steps","length","Error","onCurrentStepChange","newValue","oldValue","undefined","stepInterval","Math","abs","el","setProperty","i","setTimeout","removeProperty","async","navigateToIndex","index","direction","_a","_b","render","Host","map","isComplete","isDisable","wcsHorizontalStepClick","emit","renderLabels","s","text","every","isNextPossibleStep","previousStepIsCompleteAndNotActive"],"sources":["./src/components/horizontal-stepper/horizontal-step.tsx","./src/components/horizontal-stepper/horizontal-stepper.scss?tag=wcs-horizontal-stepper&encapsulation=shadow","./src/components/horizontal-stepper/horizontal-stepper.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { HorizontalStepConfig, StepButton } from './horizontal-stepper-interface';\n\ninterface HorizontalStepProps {\n    step: HorizontalStepConfig;\n    checkOnComplete: boolean;\n    complete: boolean;\n    passed: boolean;\n    active: boolean;\n    first: boolean;\n    disable: boolean;\n    onClick: (step: HorizontalStepConfig) => void;\n}\n\nexport const HorizontalStep: FunctionalComponent<HorizontalStepProps> = (\n    {\n        step,\n        checkOnComplete,\n        complete,\n        passed,\n        active,\n        first,\n        disable,\n        onClick\n    }) => {\n    return (\n        <div class=\"graphic-step\" data-first={first}>\n            {first ? null : (<wcs-progress-bar value={passed ? 100 : 0}></wcs-progress-bar>)}\n            <wcs-button style={{'backgroundColor': 'white'}}\n                        shape=\"round\"\n                        onClick={_ => onClick(step)}\n                        mode={(active || complete) && !step.disable ? 'plain' : 'stroked'}\n                        disabled={disable}>{getButtonContent(step.button, checkOnComplete, complete, active)}</wcs-button>\n        </div>\n    );\n}\n\nconst getButtonContent = (stepButton: StepButton, checkOnComplete: boolean, complete: boolean, active: boolean) => {\n    if (checkOnComplete && complete && !active) {\n        return (<wcs-mat-icon size=\"m\" icon=\"done\" family=\"outlined\"></wcs-mat-icon>);\n    }\n    switch (stepButton.kind) {\n        case 'Icon':\n            return (<wcs-mat-icon size=\"m\" icon={stepButton.iconName}\n                                  family={stepButton.family ? stepButton.family : 'outlined'}></wcs-mat-icon>);\n        case 'Text':\n            return (stepButton.text);\n    }\n}\n\n",":host {\n    display: block;\n\n    .steps {\n        display: flex;\n        flex-direction: row;\n        flex: 1;\n    }\n\n    .graphic-step {\n        display: flex;\n        flex-direction: row;\n        flex: 1;\n        align-items: center;\n    }\n\n    .graphic-step[data-first] {\n        flex: 0;\n    }\n\n    wcs-progress-bar {\n        --wcs-internal-progress-bar-border-radius: 0;\n        flex: 1;\n        margin: 0 -1px;\n    }\n\n    .label-container {\n        justify-content: space-between;\n        display: flex;\n        flex-direction: row;\n        margin-top: var(--wcs-base-margin);\n    }\n\n    .label-container > * {\n        width: 100%;\n        text-align: center;\n        flex: 1;\n        color: var(--wcs-text-medium);\n        font-weight: 500;\n\n    }\n\n    .label-container > *[data-disable] {\n        color: var(--wcs-text-light);\n    }\n\n    .label-container > *[data-current] {\n        color: var(--wcs-primary);\n    }\n\n    .label-container > div[data-first] {\n        margin-left: 20px;\n        text-align: left;\n        flex: 0.5;\n    }\n\n    .label-container > div[data-first] > span {\n        margin-left: -20px;\n    }\n\n    .label-container > div[data-last] {\n        margin-right: 20px;\n        text-align: right;\n        flex: 0.5;\n    }\n\n    .label-container > div[data-last] > span {\n        margin-right: -20px;\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Method,\n    Prop,\n    State,\n    Watch\n} from '@stencil/core';\nimport { WcsButtonMode } from '../button/button-interface';\nimport { HorizontalStepClickEvent, HorizontalStepConfig, HorizontalStepperMode } from './horizontal-stepper-interface';\nimport { HorizontalStep } from './horizontal-step';\n\n@Component({\n    tag: 'wcs-horizontal-stepper',\n    styleUrl: 'horizontal-stepper.scss',\n    shadow: true,\n})\nexport class HorizontalStepper implements ComponentInterface {\n    @Element() el!: HTMLWcsHorizontalStepperElement;\n    /**\n     * index of the active step. The index corresponds to the index of the step in the 'steps' list\n     */\n    @Prop({mutable: true}) currentStep: number = 0;\n    /**\n     * steps to display\n     */\n    @Prop() steps: HorizontalStepConfig[];\n    /**\n     * Specifies if the stepper is in linear mode (the user can only click on the next step)\n     * or non-linear (the user can click on any step)\n     */\n    @Prop() mode: HorizontalStepperMode = 'nonLinear';\n    /**\n     * Specifies whether a check should be displayed when a step is passed.\n     */\n    @Prop() checkOnComplete: boolean;\n    /**\n     * Emits when the user selects a new step.\n     */\n    @Event() wcsHorizontalStepClick!: EventEmitter<HorizontalStepClickEvent>\n    @State() buttonMode: WcsButtonMode = 'stroked';\n    @State() internalCurrentStep;\n\n    componentWillLoad(): Promise<void> | void {\n        this.internalCurrentStep = this.currentStep;\n        if (this.steps.length < 1) {\n            throw new Error('You must add at least one step');\n        }\n    }\n\n    @Watch('currentStep')\n    // @ts-ignore\n    private onCurrentStepChange(newValue: number, oldValue: number) {\n        //Check if the function is called before the component has finished its initialization in which case we do nothing\n        if (this.internalCurrentStep !== undefined) {\n            const stepInterval = Math.abs(oldValue - newValue);\n            this.el.style.setProperty('--wcs-progress-bar-animation-duration', 375 / stepInterval + 'ms');\n            if (newValue !== oldValue) {\n                for (let i = 0; i < stepInterval; i++) {\n                    setTimeout(() => {\n                        this.internalCurrentStep -= (oldValue - newValue) > 0 ? 1 : -1;\n                        if (i === stepInterval - 1) {\n                            this.el.style.removeProperty('--wcs-progress-bar-animation-duration');\n                        }\n                    }, (i * (375 / stepInterval)));\n                }\n            }\n        }\n    }\n\n    @Method()\n    async previous() {\n        this.navigateToIndex(this.internalCurrentStep - 1, 'backward');\n    }\n\n    @Method()\n    async next() {\n        this.navigateToIndex(this.internalCurrentStep + 1, 'forward');\n    }\n\n    private navigateToIndex(index: number, direction: 'backward' | 'forward'): void {\n        if (index >= 0 && index <= this.steps.length - 1) {\n            if (this.steps[index]?.complete || this.steps[index]?.disable) {\n                this.navigateToIndex(index + (direction === 'forward' ? 1 : -1), direction)\n            } else {\n                this.currentStep = index;\n            }\n        }\n    }\n\n    render(): any {\n        return (\n            <Host>\n                <div class=\"steps\">\n                    {this.steps.map((step, index) =>\n                        (<HorizontalStep step={step}\n                                         passed={index <= this.internalCurrentStep}\n                                         checkOnComplete={this.checkOnComplete}\n                                         complete={this.isComplete(step, index)}\n                                         active={index === this.internalCurrentStep}\n                                         first={index === 0}\n                                         disable={this.isDisable(step, index)}\n                                         onClick={step => this.wcsHorizontalStepClick.emit({step, index})}\n                            />\n                        )\n                    )}\n                </div>\n                {this.renderLabels()}\n            </Host>\n        );\n    }\n\n    private isComplete(step: HorizontalStepConfig, index: number) {\n        return index <= this.internalCurrentStep || step.complete;\n    }\n\n    private renderLabels() {\n        if (this.steps.map(s => s.text).every(s => !s)) {\n            return null;\n        } else {\n            return <div class=\"label-container\">\n                {this.steps.map((step, index) =>\n                    (<div data-first={index === 0} data-current={index === this.internalCurrentStep && !step.disable}\n                          data-disable={this.isDisable(step, index)} data-last={index === this.steps.length - 1}>\n                        <span>{step.text}</span></div>)\n                )}\n            </div>;\n        }\n    }\n\n    private isDisable(step, index) {\n        return step.disable || (this.mode === 'linear' && (!this.isNextPossibleStep(index) && this.internalCurrentStep < index));\n    }\n\n    private isNextPossibleStep(index) {\n        if (index === 0) return true;\n        if (this.steps[index - 1]?.disable || this.previousStepIsCompleteAndNotActive(index)) return this.isNextPossibleStep(index - 1);\n        return this.internalCurrentStep === index - 1;\n    }\n\n    private previousStepIsCompleteAndNotActive(index) {\n        return this.steps[index - 1]?.complete && index - 1 !== this.internalCurrentStep;\n    }\n}\n"],"mappings":"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"}

package/dist/wcs/p-587fea23.entry.js.map

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

package/dist/wcs/p-62db1219.js

@@ -1,2 +0,0 @@
-import{h as t,r as s,c as i,H as a,g as e}from"./p-a2df3a49.js";const n=({active:s,order:i,double:a=false})=>t("svg",{style:{marginLeft:"auto",cursor:"pointer"},xmlns:"http://www.w3.org/2000/svg",width:"24",height:"20",viewBox:"0 0 24 20"},t("style",{type:"text/css"},`\n            .arrow-group {\n                transform-origin: 50% 51%;\n                transition: transform 175ms ease-in-out;\n            }\n            .arrow {\n                transition: fill 175ms ease-in-out;\n                fill: var(--wcs-text-light);\n            }\n            .second-arrow {\n                transform: translateY(-8px);\n            }\n            .next {\n                transform: rotate(90deg);\n            }\n            .previous {\n                transform: rotate(-90deg);\n            }\n            .active {\n                fill: var(--wcs-primary);\n            }\n        `),t("g",{fill:"none",class:i+" arrow-group"},t("path",{class:(s?"active":"")+" arrow",d:"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"}),t("path",{d:"M0 0h24v24H0z",fill:"none"})),a?t("g",{fill:"none",class:i+" arrow-group"},t("path",{class:(s?"active":"")+" arrow second-arrow",d:"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"}),t("path",{d:"M0 0h24v24H0z",fill:"none"})):"");const r=":host{display:block;border-style:solid none none;border-width:1px;border-color:var(--wcs-text-light)}.container{display:grid;grid-template-columns:auto auto auto;justify-content:space-between;color:var(--wcs-text-medium)}.available-page-sizes{width:auto}.page-management,.page-size,.items-count{display:flex;align-items:center}.pagination-arrow{display:flex}";const o=class{constructor(t){s(this,t);this.wcsGridPaginationChange=i(this,"wcsGridPaginationChange",7);this.availablePageSizes=[10,20,50];this.currentPage=o.INDEX_FIRST_PAGE;this.pageSize=this.availablePageSizes[0];this.itemsCount=0;this.pageCount=1}lastPage(){this.currentPage=this.pageCount-1;this.emitPaginationChange()}nextPage(){if(this.canGoToNextPage()){this.currentPage++;this.emitPaginationChange()}}canGoToNextPage(){return this.currentPage+1<this.pageCount}previousPage(){if(this.canGoToPreviousPage()){this.currentPage--;this.emitPaginationChange()}}canGoToPreviousPage(){return this.currentPage>0}firstPage(){this.currentPage=0;this.emitPaginationChange()}onChangePagesize(t){this.pageSize=t.detail.value;if(this.currentPage+1>this.pageSize){this.currentPage=0}this.emitPaginationChange()}emitPaginationChange(){this.wcsGridPaginationChange.emit({pagination:{currentPage:this.currentPage,pageSize:this.pageSize,itemsCount:this.itemsCount,pageCount:this.pageCount}})}render(){return t(a,{slot:"grid-pagination"},t("div",{class:"container"},t("div",{class:"page-size"},t("wcs-select",{placeholder:"Eléments par page",class:"available-page-sizes",value:this.pageSize,onWcsChange:this.onChangePagesize.bind(this)},this.availablePageSizes.map((s=>t("wcs-select-option",{value:s},s)))),t("span",null," éléments par page")),t("div",{class:"items-count"},t("span",null,this.itemsCount," éléments")),t("div",{class:"page-management"},t("span",{class:"pagination-arrow",onClick:this.firstPage.bind(this)},t(n,{active:this.canGoToPreviousPage(),order:"previous",double:true})),t("span",{class:"pagination-arrow",onClick:this.previousPage.bind(this)},t(n,{active:this.canGoToPreviousPage(),order:"previous"})),t("span",null,this.currentPage+1," / ",this.pageCount),t("span",{class:"pagination-arrow",onClick:this.nextPage.bind(this)},t(n,{active:this.canGoToNextPage(),order:"next"})),t("span",{class:"pagination-arrow",onClick:this.lastPage.bind(this)},t(n,{active:this.canGoToNextPage(),order:"next",double:true})))))}get el(){return e(this)}};o.INDEX_FIRST_PAGE=0;o.style=r;export{o as G};
-//# sourceMappingURL=p-62db1219.js.map

package/dist/wcs/p-62db1219.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["GridPaginationArrow","active","order","double","h","style","marginLeft","cursor","xmlns","width","height","viewBox","type","fill","class","d","gridPaginationCss","GridPagination","INDEX_FIRST_PAGE","this","availablePageSizes","lastPage","currentPage","pageCount","emitPaginationChange","nextPage","canGoToNextPage","previousPage","canGoToPreviousPage","firstPage","onChangePagesize","event","pageSize","detail","value","wcsGridPaginationChange","emit","pagination","itemsCount","render","Host","slot","placeholder","onWcsChange","bind","map","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\nexport const GridPaginationArrow: FunctionalComponent<GridPaginationArrowProps> = ({ active, order, double = false }) => (\n    <svg style={{ marginLeft: 'auto', cursor: 'pointer' }} xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\">\n        <style type=\"text/css\">{`\n            .arrow-group {\n                transform-origin: 50% 51%;\n                transition: transform 175ms ease-in-out;\n            }\n            .arrow {\n                transition: fill 175ms ease-in-out;\n                fill: var(--wcs-text-light);\n            }\n            .second-arrow {\n                transform: translateY(-8px);\n            }\n            .next {\n                transform: rotate(90deg);\n            }\n            .previous {\n                transform: rotate(-90deg);\n            }\n            .active {\n                fill: var(--wcs-primary);\n            }\n        `}</style>\n        <g fill=\"none\" class={order + ' arrow-group'}>\n            <path class={(active ? 'active' : '') + ' arrow'} d=\"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z\" />\n            <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n        </g>\n        {\n            double ?\n                <g fill=\"none\" class={order + ' arrow-group'}>\n                    <path class={(active ? 'active' : '') + ' arrow second-arrow'} d=\"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z\" />\n                    <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n                </g>\n                : ''\n        }\n    </svg>\n);\n",":host {\n    display: block;\n    border-style: solid none none;\n    border-width: 1px;\n    border-color: var(--wcs-text-light);\n}\n\n.container {\n    display: grid;\n    grid-template-columns: auto auto auto;\n    justify-content: space-between;\n    color: var(--wcs-text-medium);\n}\n\n.available-page-sizes {\n    width: auto;\n}\n\n.page-management, .page-size, .items-count {\n    display: flex;\n    align-items: center;\n}\n\n.pagination-arrow {\n    display: flex;\n}\n","import {\n    Component,\n    ComponentInterface, Element,\n    Event, EventEmitter,\n    h,\n    Host,\n    Prop\n} from '@stencil/core';\nimport {\n    WcsGridPaginationChangeEventDetails\n} from '../grid/grid-interface';\nimport { SelectChangeEventDetail } from '../select/select-interface';\nimport { GridPaginationArrow } from './grid-pagination-arrow';\n\n@Component({\n    tag: 'wcs-grid-pagination',\n    styleUrl: 'grid-pagination.scss',\n    shadow: true\n})\nexport class GridPagination implements ComponentInterface {\n    static readonly INDEX_FIRST_PAGE: number = 0;\n    @Element() el!: HTMLWcsGridPaginationElement;\n    @Prop() availablePageSizes: number[] = [10, 20, 50];\n    @Prop() currentPage: number = GridPagination.INDEX_FIRST_PAGE;\n    @Prop() pageSize: number = this.availablePageSizes[0];\n    @Prop() itemsCount: number = 0;\n    @Prop() pageCount: number = 1;\n    @Event() wcsGridPaginationChange!: EventEmitter<WcsGridPaginationChangeEventDetails>;\n\n    private lastPage(): void {\n        this.currentPage = this.pageCount - 1;\n        this.emitPaginationChange();\n    }\n\n    private nextPage(): void {\n        if (this.canGoToNextPage()) {\n            this.currentPage++;\n            this.emitPaginationChange();\n        }\n    }\n\n    private canGoToNextPage(): boolean {\n        return this.currentPage + 1 < this.pageCount;\n    }\n\n    private previousPage(): void {\n        if (this.canGoToPreviousPage()) {\n            this.currentPage--;\n            this.emitPaginationChange();\n        }\n    }\n\n    private canGoToPreviousPage(): boolean {\n        return this.currentPage > 0;\n    }\n\n    private firstPage(): void {\n        this.currentPage = 0;\n        this.emitPaginationChange();\n    }\n\n    private onChangePagesize(event: CustomEvent<SelectChangeEventDetail>): void {\n        this.pageSize = event.detail.value;\n        if (this.currentPage + 1 > this.pageSize) {\n            this.currentPage = 0;\n        }\n        this.emitPaginationChange();\n    }\n\n    private emitPaginationChange(): void {\n        this.wcsGridPaginationChange.emit({\n            pagination: {\n                currentPage: this.currentPage,\n                pageSize: this.pageSize,\n                itemsCount: this.itemsCount,\n                pageCount: this.pageCount\n            }\n        });\n    }\n\n    render(): any {\n        return (<Host slot=\"grid-pagination\">\n            <div class=\"container\">\n                <div class=\"page-size\">\n                    <wcs-select placeholder=\"Eléments par page\" class=\"available-page-sizes\" value={this.pageSize} onWcsChange={this.onChangePagesize.bind(this)}>\n                        {\n                            this.availablePageSizes.map((pageSize) =>\n                                <wcs-select-option value={pageSize}>{pageSize}</wcs-select-option>\n                            )\n                        }\n                    </wcs-select>\n                    <span>&nbsp;éléments par page</span>\n                </div>\n\n                <div class=\"items-count\">\n                    <span>{this.itemsCount} éléments</span>\n                </div>\n\n                <div class=\"page-management\">\n                    <span class=\"pagination-arrow\" onClick={this.firstPage.bind(this)}>\n                        <GridPaginationArrow active={this.canGoToPreviousPage()} order=\"previous\" double></GridPaginationArrow>\n                    </span>\n                    <span class=\"pagination-arrow\" onClick={this.previousPage.bind(this)}>\n                        <GridPaginationArrow active={this.canGoToPreviousPage()} order=\"previous\"></GridPaginationArrow>\n                    </span>\n\n                    <span>{this.currentPage + 1} / {this.pageCount}</span>\n\n                    <span class=\"pagination-arrow\" onClick={this.nextPage.bind(this)}>\n                        <GridPaginationArrow active={this.canGoToNextPage()} order=\"next\"></GridPaginationArrow>\n                    </span>\n                    <span class=\"pagination-arrow\" onClick={this.lastPage.bind(this)}>\n                        <GridPaginationArrow active={this.canGoToNextPage()} order=\"next\" double></GridPaginationArrow>\n                    </span>\n                </div>\n            </div>\n        </Host>)\n    }\n}\n"],"mappings":"gEAQO,MAAMA,EAAqE,EAAGC,SAAQC,QAAOC,SAAS,SACzGC,EAAA,OAAKC,MAAO,CAAEC,WAAY,OAAQC,OAAQ,WAAaC,MAAM,6BAA6BC,MAAM,KAAKC,OAAO,KAAKC,QAAQ,aACrHP,EAAA,SAAOQ,KAAK,YAAY,qnBAsBxBR,EAAA,KAAGS,KAAK,OAAOC,MAAOZ,EAAQ,gBAC1BE,EAAA,QAAMU,OAAQb,EAAS,SAAW,IAAM,SAAUc,EAAE,mDACpDX,EAAA,QAAMW,EAAE,gBAAgBF,KAAK,UAG7BV,EACIC,EAAA,KAAGS,KAAK,OAAOC,MAAOZ,EAAQ,gBAC1BE,EAAA,QAAMU,OAAQb,EAAS,SAAW,IAAM,sBAAuBc,EAAE,mDACjEX,EAAA,QAAMW,EAAE,gBAAgBF,KAAK,UAE/B,IC1ClB,MAAMG,EAAoB,yW,MCmBbC,EAAc,M,kHAGgB,CAAC,GAAI,GAAI,I,iBAClBA,EAAeC,iB,cAClBC,KAAKC,mBAAmB,G,gBACtB,E,eACD,C,CAGpBC,WACJF,KAAKG,YAAcH,KAAKI,UAAY,EACpCJ,KAAKK,sB,CAGDC,WACJ,GAAIN,KAAKO,kBAAmB,CACxBP,KAAKG,cACLH,KAAKK,sB,EAILE,kBACJ,OAAOP,KAAKG,YAAc,EAAIH,KAAKI,S,CAG/BI,eACJ,GAAIR,KAAKS,sBAAuB,CAC5BT,KAAKG,cACLH,KAAKK,sB,EAILI,sBACJ,OAAOT,KAAKG,YAAc,C,CAGtBO,YACJV,KAAKG,YAAc,EACnBH,KAAKK,sB,CAGDM,iBAAiBC,GACrBZ,KAAKa,SAAWD,EAAME,OAAOC,MAC7B,GAAIf,KAAKG,YAAc,EAAIH,KAAKa,SAAU,CACtCb,KAAKG,YAAc,C,CAEvBH,KAAKK,sB,CAGDA,uBACJL,KAAKgB,wBAAwBC,KAAK,CAC9BC,WAAY,CACRf,YAAaH,KAAKG,YAClBU,SAAUb,KAAKa,SACfM,WAAYnB,KAAKmB,WACjBf,UAAWJ,KAAKI,Y,CAK5BgB,SACI,OAAQnC,EAACoC,EAAI,CAACC,KAAK,mBACfrC,EAAA,OAAKU,MAAM,aACPV,EAAA,OAAKU,MAAM,aACPV,EAAA,cAAYsC,YAAY,oBAAoB5B,MAAM,uBAAuBoB,MAAOf,KAAKa,SAAUW,YAAaxB,KAAKW,iBAAiBc,KAAKzB,OAE/HA,KAAKC,mBAAmByB,KAAKb,GACzB5B,EAAA,qBAAmB8B,MAAOF,GAAWA,MAIjD5B,EAAA,mCAGJA,EAAA,OAAKU,MAAM,eACPV,EAAA,YAAOe,KAAKmB,WAAU,cAG1BlC,EAAA,OAAKU,MAAM,mBACPV,EAAA,QAAMU,MAAM,mBAAmBgC,QAAS3B,KAAKU,UAAUe,KAAKzB,OACxDf,EAACJ,EAAmB,CAACC,OAAQkB,KAAKS,sBAAuB1B,MAAM,WAAWC,OAAM,QAEpFC,EAAA,QAAMU,MAAM,mBAAmBgC,QAAS3B,KAAKQ,aAAaiB,KAAKzB,OAC3Df,EAACJ,EAAmB,CAACC,OAAQkB,KAAKS,sBAAuB1B,MAAM,cAGnEE,EAAA,YAAOe,KAAKG,YAAc,EAAC,MAAKH,KAAKI,WAErCnB,EAAA,QAAMU,MAAM,mBAAmBgC,QAAS3B,KAAKM,SAASmB,KAAKzB,OACvDf,EAACJ,EAAmB,CAACC,OAAQkB,KAAKO,kBAAmBxB,MAAM,UAE/DE,EAAA,QAAMU,MAAM,mBAAmBgC,QAAS3B,KAAKE,SAASuB,KAAKzB,OACvDf,EAACJ,EAAmB,CAACC,OAAQkB,KAAKO,kBAAmBxB,MAAM,OAAOC,OAAM,U,2BA5F5Ec,EAAAC,iBAA2B,E"}

package/dist/wcs/p-6f921d57.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() 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() 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-7d7472e2.entry.js

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

package/dist/wcs/p-89b3550b.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as s,a as i,h as e,H as a,g as r}from"./p-a2df3a49.js";import{g as h,h as n,r as o,j as d}from"./p-dc57a5f7.js";const c=":host{--wcs-textarea-icon-color:var(--wcs-text-medium);--wcs-internal-textarea-border-radius-left:var(--wcs-textarea-border-radius-left, var(--wcs-border-radius));--wcs-internal-textarea-border-radius-right:var(--wcs-textarea-border-radius-right, var(--wcs-border-radius));--wcs-internal-textarea-border-width:2px;display:flex;flex-direction:row;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-light);border:var(--wcs-internal-textarea-border-width) solid var(--wcs-light);background-clip:padding-box}:host ::placeholder{font-weight:400;font-style:italic}:host textarea{overflow:auto;flex:1;width:100%;box-sizing:border-box;min-height:24px;background-color:transparent;font-family:var(--wcs-font-sans-serif);color:var(--wcs-primary);font-weight:var(--wcs-font-weight-form-value) !important;border:none;padding:calc(var(--wcs-padding) / 2 - var(--wcs-internal-textarea-border-width) / 2) calc(var(--wcs-padding) - var(--wcs-internal-textarea-border-width));font-size:1rem;line-height:1.5}:host textarea:focus{box-shadow:none;outline:0}:host wcs-mat-icon{position:relative;margin-top:7px;margin-left:8px;margin-right:-8px}:host([disabled]) textarea{color:var(--wcs-text-disabled);cursor:not-allowed}:host([state=error]){border-color:var(--wcs-red) !important}:host(:focus-within){border:dashed var(--wcs-internal-textarea-border-width) var(--wcs-primary)}:host(:focus-within) wcs-mat-icon{color:var(--wcs-primary)}";const l=class{constructor(i){t(this,i);this.wcsChange=s(this,"wcsChange",7);this.wcsInput=s(this,"wcsInput",7);this.wcsBlur=s(this,"wcsBlur",7);this.wcsFocus=s(this,"wcsFocus",7);this.inputId=`wcs-textarea-${u++}`;this.didBlurAfterEdit=false;this.inheritedAttributes={};this.onInput=t=>{if(this.nativeInput){this.value=this.nativeInput.value}this.wcsInput.emit(t)};this.onFocus=t=>{this.hasFocus=true;this.focusChange();if(this.fireFocusEvents){this.wcsFocus.emit(t)}};this.onBlur=t=>{this.hasFocus=false;this.focusChange();if(this.fireFocusEvents){this.wcsBlur.emit(t)}};this.onKeyDown=()=>{this.checkClearOnEdit()};this.fireFocusEvents=true;this.hasFocus=false;this.autocapitalize="none";this.autofocus=false;this.clearOnEdit=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=""}debounceChanged(){this.wcsChange=h(this.wcsChange,this.debounce)}valueChanged(){const t=this.nativeInput;const s=this.getValue();if(t&&t.value!==s){t.value=s}this.runAutoGrow();this.wcsChange.emit({value:s})}connectedCallback(){this.debounceChanged();{document.dispatchEvent(new CustomEvent("wcsInputDidLoad",{detail:this.el}))}}disconnectedCallback(){{document.dispatchEvent(new CustomEvent("wcsInputDidUnload",{detail:this.el}))}}componentWillLoad(){this.inheritedAttributes=n(this.el,["title"])}componentDidLoad(){o((()=>this.runAutoGrow()))}runAutoGrow(){const t=this.nativeInput;if(t&&this.autoGrow){i((()=>{t.style.height="auto";t.style.height=t.scrollHeight+"px"}))}}async fitContent(){o((()=>this.runAutoGrow()))}async setFocus(){if(this.nativeInput){this.nativeInput.focus()}}async setBlur(){if(this.nativeInput){this.nativeInput.blur()}}getInputElement(){return Promise.resolve(this.nativeInput)}checkClearOnEdit(){if(!this.clearOnEdit){return}if(this.didBlurAfterEdit&&this.hasValue()){this.value=""}this.didBlurAfterEdit=false}focusChange(){if(this.clearOnEdit&&!this.hasFocus&&this.hasValue()){this.didBlurAfterEdit=true}}hasValue(){return this.getValue()!==""}getValue(){return this.value||""}render(){const t=this.getValue();const s=this.inputId+"-lbl";const i=d(this.el);if(i){i.id=s}return e(a,{"aria-disabled":this.disabled?"true":null},this.icon?e("wcs-mat-icon",{icon:this.icon,size:"m"}):null,e("textarea",Object.assign({class:"native-textarea","aria-labelledby":i?s:null,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,onBlur:this.onBlur,onFocus:this.onFocus,onKeyDown:this.onKeyDown},this.inheritedAttributes),t))}get el(){return r(this)}static get watchers(){return{debounce:["debounceChanged"],value:["valueChanged"]}}};let u=0;l.style=c;export{l as wcs_textarea};
-//# sourceMappingURL=p-89b3550b.entry.js.map

package/dist/wcs/p-89b3550b.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["textareaCss","Textarea","this","inputId","textareaIds","didBlurAfterEdit","inheritedAttributes","onInput","ev","nativeInput","value","wcsInput","emit","onFocus","hasFocus","focusChange","fireFocusEvents","wcsFocus","onBlur","wcsBlur","onKeyDown","checkClearOnEdit","debounceChanged","wcsChange","debounceEvent","debounce","valueChanged","getValue","runAutoGrow","connectedCallback","document","dispatchEvent","CustomEvent","detail","el","disconnectedCallback","componentWillLoad","inheritAttributes","componentDidLoad","raf","autoGrow","readTask","style","height","scrollHeight","async","focus","blur","getInputElement","Promise","resolve","clearOnEdit","hasValue","render","labelId","label","findItemLabel","id","h","Host","disabled","icon","size","Object","assign","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\n:host {\n    --wcs-textarea-icon-color: var(--wcs-text-medium);\n    --wcs-internal-textarea-border-radius-left: var(--wcs-textarea-border-radius-left, var(--wcs-border-radius));\n    --wcs-internal-textarea-border-radius-right: var(--wcs-textarea-border-radius-right, var(--wcs-border-radius));\n    --wcs-internal-textarea-border-width: 2px;\n    display: flex;\n    flex-direction: row;\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-light);\n    border: var(--wcs-internal-textarea-border-width) solid var(--wcs-light);\n    background-clip: padding-box;\n\n    ::placeholder {\n        font-weight: 400;\n        font-style: italic;\n    }\n\n    textarea {\n        overflow: auto;\n        flex: 1;\n        width: 100%;\n        box-sizing: border-box;\n        min-height: 24px;\n        background-color: transparent;\n        font-family: var(--wcs-font-sans-serif);\n        color: var(--wcs-primary);\n        font-weight: var(--wcs-font-weight-form-value) !important;\n        border: none;\n        // On divise --wcs-internal-input-border-width par deux car la valeur du padding est appliquée en haut et en bas\n        padding: calc(calc(var(--wcs-padding) / 2) - calc(var(--wcs-internal-textarea-border-width) / 2)) calc(var(--wcs-padding) - var(--wcs-internal-textarea-border-width));\n        font-size: 1rem;\n        line-height: 1.5;\n    }\n\n    textarea:focus {\n        box-shadow: none;\n        outline: 0;\n    }\n\n    wcs-mat-icon {\n        position: relative;\n        margin-top: 7px;\n        margin-left: 8px;\n        margin-right: -8px;\n    }\n}\n\n:host([disabled]) {\n    textarea {\n        color: var(--wcs-text-disabled);\n        cursor: not-allowed;\n    }\n}\n\n:host([state=error]) {\n    border-color: var(--wcs-red) !important;\n}\n\n:host(:focus-within) {\n    border: dashed var(--wcs-internal-textarea-border-width) var(--wcs-primary);\n\n    wcs-mat-icon {\n        color: var(--wcs-primary);\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Method,\n    Prop,\n    State,\n    Watch,\n    h,\n    Host,\n    EventEmitter,\n    Element,\n    Event,\n    Build,\n    readTask\n} from '@stencil/core';\nimport { debounceEvent, findItemLabel, inheritAttributes, raf } from '../../utils/helpers';\nimport { TextareaChangeEventDetail } from './textarea-interface';\n\n/**\n * Mainly inspired from Ionic Textarea Component\n */\n@Component({\n    tag: 'wcs-textarea',\n    styleUrl: 'textarea.scss',\n    shadow: true,\n})\nexport class Textarea implements ComponentInterface {\n    private nativeInput?: HTMLTextAreaElement;\n    private inputId = `wcs-textarea-${textareaIds++}`;\n    private didBlurAfterEdit = false;\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 = true;\n\n    @Element() el!: HTMLElement;\n\n    @State() hasFocus = false;\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 = false;\n\n    /**\n     * If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `\"password\"`, `false` for all other types.\n     */\n    @Prop({mutable: true}) clearOnEdit = false;\n\n    /**\n     * Set the amount of time, in milliseconds, to wait to trigger the `wcsChange` event after each keystroke. 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.wcsChange = debounceEvent(this.wcsChange, this.debounce);\n    }\n\n    /**\n     * If `true`, the user cannot interact with the textarea.\n     */\n    @Prop() disabled = 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     * Possible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n     * `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.\n     */\n    @Prop() inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';\n\n    /**\n     * A hint to the browser for which enter key to display.\n     * Possible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n     * `\"previous\"`, `\"search\"`, and `\"send\"`.\n     */\n    @Prop() enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';\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() readonly = false;\n\n    /**\n     * If `true`, the user must fill in a value before submitting a form.\n     */\n    @Prop() required = false;\n\n    /**\n     * If `true`, the element will have its spelling and grammar checked.\n     */\n    @Prop() spellcheck = 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: 'initial' | 'error' = '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     */\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?: 'hard' | 'soft' | 'off';\n\n    /**\n     * If `true`, the element height will increase based on the value.\n     */\n    @Prop() autoGrow = false;\n\n    /**\n     * The value of the textarea.\n     */\n    @Prop({mutable: true}) value?: string | null = '';\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        this.wcsChange.emit({value});\n    }\n\n    /**\n     * Emitted when the input value has changed.\n     */\n    @Event() wcsChange!: EventEmitter<TextareaChangeEventDetail>;\n\n    /**\n     * Emitted when a keyboard input occurred.\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 = inheritAttributes(this.el, ['title']);\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    /**\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 focus on the native `textarea` in `wcs-textarea`. Use this method instead of the global\n     * `textarea.focus()`.\n     */\n    @Method()\n    async setFocus() {\n        if (this.nativeInput) {\n            this.nativeInput.focus();\n        }\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    /**\n     * Check if we need to clear the text input if clearOnEdit is enabled\n     */\n    private checkClearOnEdit() {\n        if (!this.clearOnEdit) {\n            return;\n        }\n\n        // Did the input value change after it was blurred and edited?\n        if (this.didBlurAfterEdit && this.hasValue()) {\n            // Clear the input\n            this.value = '';\n        }\n\n        // Reset the flag\n        this.didBlurAfterEdit = false;\n    }\n\n    private focusChange() {\n        // If clearOnEdit is enabled and the input blurred but has a value, set a flag\n        if (this.clearOnEdit && !this.hasFocus && this.hasValue()) {\n            this.didBlurAfterEdit = true;\n        }\n    }\n\n    private hasValue(): boolean {\n        return this.getValue() !== '';\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 onFocus = (ev: FocusEvent) => {\n        this.hasFocus = true;\n        this.focusChange();\n\n        if (this.fireFocusEvents) {\n            this.wcsFocus.emit(ev);\n        }\n    }\n\n    private onBlur = (ev: FocusEvent) => {\n        this.hasFocus = false;\n        this.focusChange();\n\n        if (this.fireFocusEvents) {\n            this.wcsBlur.emit(ev);\n        }\n    }\n\n    private onKeyDown = () => {\n        this.checkClearOnEdit();\n    }\n\n    render() {\n        const value = this.getValue();\n        const labelId = this.inputId + '-lbl';\n        const label = findItemLabel(this.el);\n        if (label) {\n            label.id = labelId;\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                    aria-labelledby={label ? labelId : null}\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                    onBlur={this.onBlur}\n                    onFocus={this.onFocus}\n                    onKeyDown={this.onKeyDown}\n                    {...this.inheritedAttributes}\n                >\n            {value}\n          </textarea>\n            </Host>\n        );\n    }\n}\n\nlet textareaIds = 0;\n"],"mappings":"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"}

package/dist/wcs/p-8bb19e58.entry.js

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

package/dist/wcs/p-9157466f.entry.js

@@ -1,2 +0,0 @@
-import{r as o,c as e,h as i,H as t,g as r}from"./p-a2df3a49.js";import{i as a,a as s}from"./p-dc57a5f7.js";const d=':host([mode=radio]) label:focus-visible{transition:none;outline:2px dashed var(--wcs-primary);outline-offset:0;border-radius:0.5rem}:host([mode=horizontal]) label:focus-visible{transition:none;outline:2px dashed var(--wcs-primary);outline-offset:2px;border-radius:0.5rem}:host([mode=radio]) input,:host([mode=horizontal]) input{display:none}: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]) label:focus-visible{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 n=class{constructor(i){o(this,i);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 i(t,{slot:"option"},i("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}`,tabIndex:-1}),i("label",{htmlFor:`${this.inputId}`,tabIndex:this.disabled?-1:0},this.label))}get el(){return r(this)}};let l=0;n.style=d;export{n as wcs_radio};
-//# sourceMappingURL=p-9157466f.entry.js.map

package/dist/wcs/p-9157466f.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","tabIndex","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([mode=radio]) {\n    label:focus-visible {\n        transition: none;\n        @include focus-outline($border-radius: 0.5rem, $outline-offset: 0);\n    }\n}\n\n:host([mode=horizontal]) {\n    label:focus-visible {\n        transition: none;\n        @include focus-outline($border-radius: 0.5rem, $outline-offset: 2px);\n    }\n}\n\n:host([mode=radio]),\n:host([mode=horizontal]) {\n    input {\n        display: none;\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    label:focus-visible {\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() 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                    tabIndex={-1}/>\n                <label htmlFor={`${this.inputId}`} tabIndex={this.disabled ? -1 : 0}>{this.label}</label>\n            </Host>\n        );\n    }\n}\n\nlet radioButtonIds = 0;\n"],"mappings":"2GAAA,MAAMA,EAAW,6iF,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,UACtBuB,UAAW,IACfN,EAAA,SAAOO,QAAS,GAAGhC,KAAKC,UAAW8B,SAAU/B,KAAK8B,UAAY,EAAI,GAAI9B,KAAKsB,O,2BAM3F,IAAIpB,EAAiB,E"}

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

@@ -1,2 +0,0 @@
-import{r as e,h as t,g as a}from"./p-a2df3a49.js";const r=':host{background-color:#f2f2f2;margin:0;display:grid;grid-template-areas:"header header" "sidebar content";grid-template-columns:min-content auto;overflow-y:hidden}::slotted(main){padding:8px;grid-area:content;overflow-y:scroll;height:calc(100vh - 64px)}::slotted(wcs-header){grid-area:header}@media screen and (max-width: 768px){:host{grid-template-areas:"header" "sidebar" "content";grid-template-columns:auto}::slotted(header){position:relative}::slotted(main){overflow-y:visible;height:initial}}';const o=class{constructor(t){e(this,t)}render(){return[t("slot",{name:"header"}),t("slot",{name:"sidebar"}),t("slot",{name:"content"})]}get el(){return a(this)}};o.style=r;export{o as wcs_app};
-//# sourceMappingURL=p-d11c66d4.entry.js.map

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

@@ -1,2 +0,0 @@
-import{r as s,h as r,H as t,g as e}from"./p-a2df3a49.js";const i=":host{margin-top:0.25rem;color:var(--wcs-red)}";const o=class{constructor(r){s(this,r)}render(){return r(t,{slot:"error"},r("slot",null))}};o.style=i;const a=":host{--wcs-form-field-border-radius-left:var(--wcs-border-radius);--wcs-form-field-border-radius-right:var(--wcs-border-radius);display:flex;flex-direction:column}.input-container{display:flex}::slotted(wcs-radio-group){margin-left:var(--wcs-base-margin)}::slotted(wcs-radio-group[mode=option]){margin-left:0}::slotted(wcs-select:not([slot=prefix])){width:100%}::slotted(label){font-weight:500;margin-bottom:8px}:host(.has-prefix){--wcs-input-border-radius-left:0}:host(.has-suffix){--wcs-input-border-radius-right:0}::slotted([slot=prefix]){--wcs-select-border-radius:var(--wcs-border-radius) 0 0 var(--wcs-border-radius);--wcs-select-background-color:var(--wcs-gray-light);--wcs-select-value-color:var(--wcs-white);--wcs-select-placeholder-color:var(--wcs-white);--wcs-select-border-color:var(--wcs-gray-light)}::slotted([slot=suffix]){--wcs-button-border-radius:0 var(--wcs-border-radius) var(--wcs-border-radius) 0;--wcs-select-border-radius:0 var(--wcs-border-radius) var(--wcs-border-radius) 0}";const l=class{constructor(r){s(this,r);this.isError=false;this.hasPrefix=false;this.hasSuffix=false;this.spiedElement=undefined}componentWillLoad(){this.hasSuffix=this.el.querySelector("wcs-button")!==null;this.hasPrefix=this.el.querySelector("wcs-select")!==null}componentDidLoad(){this.initSpiedElement();this.addRequiredMarkerToLabel();this.updateErrorStateOnInput(this.isError)}isErrorChange(s){this.updateErrorStateOnInput(s)}updateErrorStateOnInput(s){if(this.spiedElementIsOfType("wcs-input","wcs-textarea")){if(s){this.spiedElement.setAttribute("state","error")}else{this.spiedElement.setAttribute("state","initial")}}}spiedElementIsOfType(...s){var r;for(const t of s){if(((r=this.spiedElement)===null||r===void 0?void 0:r.tagName)===t.toUpperCase())return true}return false}addRequiredMarkerToLabel(){var s;const r=this.el.querySelector("wcs-label");this.observer=new MutationObserver((s=>{var t;const e=s.filter((s=>s.attributeName==="required"))[0];if(e){this.updateLabelRequiredFlag((t=this.spiedElement)===null||t===void 0?void 0:t.hasAttribute("required"),r)}}));if(this.spiedElement){this.observer.observe(this.spiedElement,{attributes:true})}const t=(s=this.spiedElement)===null||s===void 0?void 0:s.hasAttribute("required");this.updateLabelRequiredFlag(t,r)}initSpiedElement(){var s,r;const t=["wcs-input","wcs-select","wcs-textarea","wcs-radio-group","wcs-switch","wcs-checkbox"];this.spiedElement=(s=this.el.shadowRoot.querySelector("slot:not([name])"))===null||s===void 0?void 0:s.assignedElements().filter((s=>[...t,"SLOT"].map((s=>s.toUpperCase())).indexOf(s.nodeName)!==-1))[0];if(((r=this.spiedElement)===null||r===void 0?void 0:r.tagName)==="SLOT"){this.spiedElement=this.spiedElement.assignedElements().filter((s=>t.map((s=>s.toUpperCase())).indexOf(s.nodeName)!==-1))[0]}if(!this.spiedElement){console.warn("Form-field component support only "+t.toString()+". Some features may not work with the provided component.");return}}updateLabelRequiredFlag(s,r){if(s&&r){r.setAttribute("required","true")}else if(!s&&r){r.removeAttribute("required")}}disconnectedCallback(){var s;(s=this.observer)===null||s===void 0?void 0:s.disconnect()}render(){let s="";const e=this.isError;if(this.hasSuffix){s+=" has-suffix"}if(this.hasPrefix){s+=" has-prefix"}return r(t,{class:s},r("slot",{name:"label"}),r("div",{class:"input-container"},r("slot",{name:"prefix"}),r("slot",{onSlotchange:()=>this.onFormInputSlotChange()}),r("slot",{name:"suffix"})),e?r("slot",{name:"error"}):"",r("slot",{name:"messages"}))}onFormInputSlotChange(){this.initSpiedElement();this.addRequiredMarkerToLabel();this.updateErrorStateOnInput(this.isError)}get el(){return e(this)}static get watchers(){return{isError:["isErrorChange"]}}};l.style=a;export{o as wcs_error,l as wcs_form_field};
-//# sourceMappingURL=p-d218509e.entry.js.map

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

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

package/dist/wcs/p-dc57a5f7.js

@@ -1,2 +0,0 @@
-function n(n){return"clientWidth"in n&&"clientHeight"in n}function t(n){return!!n.shadowRoot&&!!n.attachShadow}const e=(n,t)=>{const e=n._original||n;return{_original:n,emit:r(e.emit.bind(e),t)}};const r=(n,t=0)=>{let e;return(...r)=>{clearTimeout(e);e=setTimeout(n,t,...r)}};const o=(n,t=[])=>{const e={};t.forEach((t=>{if(n.hasAttribute(t)){const r=n.getAttribute(t);if(r!==null){e[t]=n.getAttribute(t)}n.removeAttribute(t)}}));return e};const i=n=>{const t=n.closest("wcs-form-field");if(t){return t.querySelector("wcs-label")}return null};const s=n=>{if(typeof __zone_symbol__requestAnimationFrame==="function"){return __zone_symbol__requestAnimationFrame(n)}if(typeof requestAnimationFrame==="function"){return requestAnimationFrame(n)}return setTimeout(n)};const u=(n,t)=>n.x>=t.getBoundingClientRect().x&&n.x<=t.getBoundingClientRect().x+t.getBoundingClientRect().width&&n.y>=t.getBoundingClientRect().y&&n.y<=t.getBoundingClientRect().y+t.getBoundingClientRect().height;const c=(n,t)=>n.target instanceof Node&&t.contains(n.target);function a(n){return n.code==="ArrowUp"}function f(n){return n.code==="ArrowDown"}function l(n){return n.code==="Escape"}function m(n){return n.code==="Space"}function _(n){return n.key==="Enter"}export{_ as a,l as b,c,f as d,a as e,u as f,e as g,o as h,m as i,i as j,n as k,t as l,s as r};
-//# sourceMappingURL=p-dc57a5f7.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["isElement","element","hasShadowDom","el","shadowRoot","attachShadow","debounceEvent","event","wait","original","_original","emit","debounce","bind","func","timer","args","clearTimeout","setTimeout","inheritAttributes","attributes","attributeObject","forEach","attr","hasAttribute","value","getAttribute","removeAttribute","findItemLabel","componentEl","itemEl","closest","querySelector","raf","h","__zone_symbol__requestAnimationFrame","requestAnimationFrame","clickInsideElement","x","getBoundingClientRect","width","y","height","clickTargetIsElementOrChildren","mouseEvent","target","Node","contains","isKeyup","evt","code","isKeydown","isEscapeKey","isSpaceKey","isEnterKey","key"],"sources":["./src/utils/helpers.ts"],"sourcesContent":["import { EventEmitter } from '@stencil/core';\n\nexport function isElement(element: any): element is Element {\n    return 'clientWidth' in element\n        && 'clientHeight' in element;\n}\n\nexport function hasShadowDom(el: HTMLElement) {\n    return !!el.shadowRoot && !!(el as any).attachShadow;\n}\n\nexport const debounceEvent = (event: EventEmitter, wait: number): EventEmitter => {\n    const original = (event as any)._original || event;\n    return {\n        _original: event,\n        emit: debounce(original.emit.bind(original), wait)\n    } as EventEmitter;\n};\n\nexport const debounce = (func: (...args: any[]) => void, wait = 0) => {\n    let timer: any;\n    return (...args: any[]): any => {\n        clearTimeout(timer);\n        timer = setTimeout(func, wait, ...args);\n    };\n};\n\n/**\n * Elements inside of web components sometimes need to inherit global attributes\n * set on the host. For example, the inner input in `wcs-input` should inherit\n * the `title` attribute that developers set directly on `ion-input`. This\n * helper function should be called in componentWillLoad and assigned to a variable\n * that is later used in the render function.\n *\n * This does not need to be reactive as changing attributes on the host element\n * does not trigger a re-render.\n */\nexport const inheritAttributes = (el: HTMLElement, attributes: string[] = []) => {\n    const attributeObject: { [k: string]: any } = {};\n\n    attributes.forEach(attr => {\n        if (el.hasAttribute(attr)) {\n            const value = el.getAttribute(attr);\n            if (value !== null) {\n                attributeObject[attr] = el.getAttribute(attr);\n            }\n            el.removeAttribute(attr);\n        }\n    });\n\n    return attributeObject;\n}\n\nexport const findItemLabel = (componentEl: HTMLElement): HTMLWcsLabelElement | null => {\n    const itemEl = componentEl.closest('wcs-form-field');\n    if (itemEl) {\n        return itemEl.querySelector('wcs-label');\n    }\n    return null;\n};\n\ndeclare const __zone_symbol__requestAnimationFrame: any;\n\n/**\n * Patched version of requestAnimationFrame that avoids ngzone\n * Use only when you know ngzone should not run\n */\nexport const raf = (h: any) => {\n    if (typeof __zone_symbol__requestAnimationFrame === 'function') {\n        return __zone_symbol__requestAnimationFrame(h);\n    }\n    if (typeof requestAnimationFrame === 'function') {\n        return requestAnimationFrame(h);\n    }\n    return setTimeout(h);\n};\n\n/**\n * Return true if the mouseEvent click is inside the given HTML element\n */\nexport const clickInsideElement = (event: MouseEvent, element: HTMLElement): boolean => {\n    return event.x >= element.getBoundingClientRect().x && event.x <= element.getBoundingClientRect().x + element.getBoundingClientRect().width\n        && event.y >= element.getBoundingClientRect().y && event.y <= element.getBoundingClientRect().y + element.getBoundingClientRect().height;\n}\n\n\nexport const clickTargetIsElementOrChildren = (mouseEvent: MouseEvent, element: HTMLElement) => {\n    return mouseEvent.target instanceof Node\n        && element.contains(mouseEvent.target);\n}\n\n\nexport function isKeyup(evt: KeyboardEvent) {\n    return evt.code === 'ArrowUp';\n}\n\nexport function isKeydown(evt: KeyboardEvent) {\n    return evt.code === 'ArrowDown';\n}\n\nexport function isEscapeKey(evt: KeyboardEvent) {\n    return evt.code === 'Escape';\n}\n\nexport function isSpaceKey(evt: KeyboardEvent) {\n    return evt.code === 'Space';\n}\n\nexport function isEnterKey(evt: KeyboardEvent) {\n    return evt.key === 'Enter';\n}\n"],"mappings":"SAEgBA,EAAUC,GACtB,MAAO,gBAAiBA,GACjB,iBAAkBA,CAC7B,C,SAEgBC,EAAaC,GACzB,QAASA,EAAGC,cAAiBD,EAAWE,YAC5C,C,MAEaC,EAAgB,CAACC,EAAqBC,KAC/C,MAAMC,EAAYF,EAAcG,WAAaH,EAC7C,MAAO,CACHG,UAAWH,EACXI,KAAMC,EAASH,EAASE,KAAKE,KAAKJ,GAAWD,GAChC,EAGd,MAAMI,EAAW,CAACE,EAAgCN,EAAO,KAC5D,IAAIO,EACJ,MAAO,IAAIC,KACPC,aAAaF,GACbA,EAAQG,WAAWJ,EAAMN,KAASQ,EAAK,CAC1C,E,MAaQG,EAAoB,CAAChB,EAAiBiB,EAAuB,MACtE,MAAMC,EAAwC,GAE9CD,EAAWE,SAAQC,IACf,GAAIpB,EAAGqB,aAAaD,GAAO,CACvB,MAAME,EAAQtB,EAAGuB,aAAaH,GAC9B,GAAIE,IAAU,KAAM,CAChBJ,EAAgBE,GAAQpB,EAAGuB,aAAaH,E,CAE5CpB,EAAGwB,gBAAgBJ,E,KAI3B,OAAOF,CAAe,E,MAGbO,EAAiBC,IAC1B,MAAMC,EAASD,EAAYE,QAAQ,kBACnC,GAAID,EAAQ,CACR,OAAOA,EAAOE,cAAc,Y,CAEhC,OAAO,IAAI,E,MASFC,EAAOC,IAChB,UAAWC,uCAAyC,WAAY,CAC5D,OAAOA,qCAAqCD,E,CAEhD,UAAWE,wBAA0B,WAAY,CAC7C,OAAOA,sBAAsBF,E,CAEjC,OAAOhB,WAAWgB,EAAE,E,MAMXG,EAAqB,CAAC9B,EAAmBN,IAC3CM,EAAM+B,GAAKrC,EAAQsC,wBAAwBD,GAAK/B,EAAM+B,GAAKrC,EAAQsC,wBAAwBD,EAAIrC,EAAQsC,wBAAwBC,OAC/HjC,EAAMkC,GAAKxC,EAAQsC,wBAAwBE,GAAKlC,EAAMkC,GAAKxC,EAAQsC,wBAAwBE,EAAIxC,EAAQsC,wBAAwBG,O,MAI7HC,EAAiC,CAACC,EAAwB3C,IAC5D2C,EAAWC,kBAAkBC,MAC7B7C,EAAQ8C,SAASH,EAAWC,Q,SAIvBG,EAAQC,GACpB,OAAOA,EAAIC,OAAS,SACxB,C,SAEgBC,EAAUF,GACtB,OAAOA,EAAIC,OAAS,WACxB,C,SAEgBE,EAAYH,GACxB,OAAOA,EAAIC,OAAS,QACxB,C,SAEgBG,EAAWJ,GACvB,OAAOA,EAAIC,OAAS,OACxB,C,SAEgBI,EAAWL,GACvB,OAAOA,EAAIM,MAAQ,OACvB,Q"}