wcs-core 7.1.0 → 7.2.1

package/dist/collection/components/textarea/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../src/components/textarea/textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    ComponentInterface,\n    Method,\n    Prop,\n    Watch,\n    h,\n    Host,\n    EventEmitter,\n    Element,\n    Event,\n    Build,\n    readTask\n} from '@stencil/core';\nimport {\n    debounceEvent,\n    inheritAriaAttributes,\n    inheritAttributes,\n    raf,\n    setOrRemoveAttribute\n} from '../../utils/helpers';\nimport { \n    TextareaChangeEventDetail,\n    WcsTextareaInputMode, \n    WcsTextareaEnterKeyHint, \n    WcsTextareaResize, \n    WcsTextareaInputState,\n    WcsTextareaWrap\n} from './textarea-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst TEXTAREA_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * Mainly inspired from Ionic Textarea Component.\n * \n * ## Accessibility guidelines 💡\n * > - If you use wcs-textarea outside a wcs-form-field, you have to manage the label and the error message yourself.\n * > You can use the `aria-label` attribute to provide a label for screen readers but adds no visual label.\n *\n * @cssprop --wcs-textarea-icon-color-default - Default icon color whe the textarea is not focused\n * @cssprop --wcs-textarea-icon-color-focus - Icon color when the textarea is focused \n * @cssprop --wcs-textarea-icon-color-disabled - Icon color when the textarea is disabled\n * \n * @cssprop --wcs-textarea-background-color - Background color of the textarea\n *\n * @cssprop --wcs-textarea-border-radius-left - Border radius of the left side of the textarea\n * @cssprop --wcs-textarea-border-radius-right - Border radius of the right side of the textarea\n * \n * @cssprop --wcs-textarea-border-width - Border width of the textarea when not focused\n * @cssprop --wcs-textarea-border-width-focus - Border width of the textarea when focused\n * \n * @cssprop --wcs-textarea-border-color-default - Default border color of the textarea when not focused\n * @cssprop --wcs-textarea-border-color-disabled - Border color of the textarea when disabled\n * @cssprop --wcs-textarea-border-color-error - Border color of the textarea when in error state\n * @cssprop --wcs-textarea-border-color-focus -  Border color of the textarea when focused\n * \n * @cssprop --wcs-textarea-value-color - Color of the value when the textarea is not focused\n * @cssprop --wcs-textarea-value-font-weight - Font weight of the textarea value\n * \n * @cssprop --wcs-textarea-placeholder-color - Color of the textarea placeholder\n * @cssprop --wcs-textarea-placeholder-font-weight - Font weight of the textarea placeholder\n * @cssprop --wcs-textarea-placeholder-font-style - Font style of the textarea placeholder\n * \n * @cssprop --wcs-textarea-text-color-disabled - Color of the value when the textarea is disabled\n * \n * @cssprop --wcs-textarea-border-style-default - Border style default of the textarea when not focused\n * @cssprop --wcs-textarea-border-style-error - Border style default of the textarea in error state\n * @cssprop --wcs-textarea-border-style-focus - Border style default of the textarea when focused\n * \n * @cssprop --wcs-textarea-min-height - Min height of the textarea component\n * @cssprop --wcs-textarea-max-height - Max height of the textarea component\n * \n * @cssprop --wcs-textarea-padding-top - Padding top of the textarea\n * @cssprop --wcs-textarea-padding-bottom - Padding bottom of the textarea\n * @cssprop --wcs-textarea-padding-left - Padding left of the textarea\n * @cssprop --wcs-textarea-padding-right - Padding right of the textarea\n * \n * @cssprop --wcs-textarea-gap - Gap between textarea and icon (prefix/suffix)\n */\n@Component({\n    tag: 'wcs-textarea',\n    styleUrl: 'textarea.scss',\n    shadow: {\n        delegatesFocus: true\n    },\n})\nexport class Textarea implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeInput?: HTMLTextAreaElement;\n    private inputId = `wcs-textarea-${textareaIds++}`;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /**\n     * This is required for a WebKit bug which requires us to\n     * blur and focus an input to properly focus the input in\n     * an item with delegatesFocus. It will no longer be needed\n     * with iOS 14.\n     *\n     * @internal\n     */\n    @Prop() fireFocusEvents = true;\n\n    /**\n     * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n     */\n    @Prop() autocapitalize = 'none';\n\n    /**\n     * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n     */\n    @Prop() autofocus = false;\n\n    /**\n     * Set the amount of time, in milliseconds, to wait to trigger the `wcsInput` event after each keystroke.\n     * This also impacts form bindings such as `ngModel` or `v-model`.\n     */\n    @Prop() debounce = 0;\n\n    @Watch('debounce')\n    protected debounceChanged() {\n        this.wcsInput = debounceEvent(this.wcsInput, this.debounce);\n    }\n\n    /**\n     * If `true`, the user cannot interact with the textarea.\n     */\n    @Prop({ reflect: true }) disabled = false;\n\n    /**\n     * Name of the material icon to add to the input\n     */\n    @Prop() icon: string;\n\n    /**\n     * A hint to the browser for which keyboard to display.\n     */\n    @Prop() inputmode?: WcsTextareaInputMode;\n\n    /**\n     * A hint to the browser for which enter key to display.\n     */\n    @Prop() enterkeyhint?: WcsTextareaEnterKeyHint;\n\n    /**\n     * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.\n     */\n    @Prop() maxlength?: number;\n\n    /**\n     * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.\n     */\n    @Prop() minlength?: number;\n\n    /**\n     * The name of the control, which is submitted with the form data.\n     */\n    @Prop() name: string = this.inputId;\n\n    /**\n     * Instructional text that shows before the input has a value.\n     */\n    @Prop() placeholder?: string | null;\n\n    /**\n     * If `true`, the user cannot modify the value.\n     */\n    @Prop({ reflect: true }) readonly = 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: WcsTextareaInputState = 'initial';\n\n    /**\n     * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.  \n     * Note : at the moment, modifying the width is only possible if you add some custom CSS to the component,\n     * for example by overriding the `width` CSS property. See the Resize section for an example on how to do it.\n     */\n    @Prop() cols?: number;\n\n    /**\n     * The number of visible text lines for the control.\n     */\n    @Prop() rows?: number;\n\n    /**\n     * Indicates how the control wraps text.\n     */\n    @Prop() wrap?: WcsTextareaWrap;\n\n    /**\n     * If `true`, the element height will increase based on the value.\n     */\n    @Prop() autoGrow = false;\n\n    /**\n     * The value of the textarea.\n     */\n    @Prop({mutable: true}) value?: string | null = '';\n\n    /**\n     * Indicates how the textarea should be resizable.  \n     * Note : at the moment horizontal resizing is only possible if you add custom CSS to the component,\n     * see the Resize section for an example.\n     */\n    @Prop({reflect: true}) resize?: WcsTextareaResize;\n\n    /**\n     * Update the native input element when the value changes\n     */\n    @Watch('value')\n    protected valueChanged() {\n        const nativeInput = this.nativeInput;\n        const value = this.getValue();\n        if (nativeInput && nativeInput.value !== value) {\n            nativeInput.value = value;\n        }\n        this.runAutoGrow();\n    }\n\n    /**\n     * Emitted when the input value has changed.- See https://developer.mozilla.org/en-US/docs/Web/Events/change\n     */\n    @Event() wcsChange!: EventEmitter<TextareaChangeEventDetail>;\n\n    /**\n     * Emitted when a keyboard input occurred. See https://developer.mozilla.org/en-US/docs/Web/Events/input\n     */\n    @Event() wcsInput!: EventEmitter<KeyboardEvent>;\n\n    /**\n     * Emitted when the input loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    /**\n     * Emitted when the input has focus.\n     */\n    @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n    connectedCallback() {\n        this.debounceChanged();\n        if (Build.isBrowser) {\n            document.dispatchEvent(new CustomEvent('wcsInputDidLoad', {\n                detail: this.el\n            }));\n        }\n    }\n\n    disconnectedCallback() {\n        if (Build.isBrowser) {\n            document.dispatchEvent(new CustomEvent('wcsInputDidUnload', {\n                detail: this.el\n            }));\n        }\n    }\n\n    componentWillLoad() {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, TEXTAREA_INHERITED_ATTRS)\n        };\n    }\n\n    componentDidLoad() {\n        raf(() => this.runAutoGrow());\n    }\n\n    private runAutoGrow() {\n        const nativeInput = this.nativeInput;\n        if (nativeInput && this.autoGrow) {\n            readTask(() => {\n                nativeInput.style.height = 'auto';\n                nativeInput.style.height = nativeInput.scrollHeight + 'px';\n            });\n        }\n    }\n    \n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeInput, attr, value);\n    }\n\n    /**\n     * This method make the textarea automatically adopt the size of the content without a scroll bar\n     */\n    @Method()\n    async fitContent() {\n        raf(() => this.runAutoGrow());\n    }\n\n    /**\n     * Sets blur on the native `textarea` in `wcs-textarea`. Use this method instead of the global\n     * `textarea.blur()`.\n     * @internal\n     */\n    @Method()\n    async setBlur() {\n        if (this.nativeInput) {\n            this.nativeInput.blur();\n        }\n    }\n\n    /**\n     * Returns the native `<textarea>` element used under the hood.\n     */\n    @Method()\n    getInputElement(): Promise<HTMLTextAreaElement> {\n        // tslint:disable-next-line:no-non-null-assertion\n        return Promise.resolve(this.nativeInput!);\n    }\n\n    private getValue(): string {\n        return this.value || '';\n    }\n\n    private onInput = (ev: Event) => {\n        if (this.nativeInput) {\n            this.value = this.nativeInput.value;\n        }\n        this.wcsInput.emit(ev as KeyboardEvent);\n    }\n    \n    private onChange = (_: Event) => {\n        this.wcsChange.emit({value: this.nativeInput.value});\n    }\n\n    private onFocus = (ev: FocusEvent) => {\n        if (this.fireFocusEvents) {\n            this.wcsFocus.emit(ev);\n        }\n    }\n\n    private onBlur = (ev: FocusEvent) => {\n        if (this.fireFocusEvents) {\n            this.wcsBlur.emit(ev);\n        }\n    }\n\n    render() {\n        const value = this.getValue();\n        const style = {\n            ...(this.resize && {'resize': this.resize})\n        }\n\n        return (\n            <Host\n                aria-disabled={this.disabled ? 'true' : null}\n            >\n                {this.icon ? (<wcs-mat-icon icon={this.icon} size=\"m\"></wcs-mat-icon>) : null}\n                <textarea\n                    class=\"native-textarea\"\n                    ref={el => this.nativeInput = el}\n                    autoCapitalize={this.autocapitalize}\n                    autoFocus={this.autofocus}\n                    enterKeyHint={this.enterkeyhint}\n                    inputMode={this.inputmode}\n                    disabled={this.disabled}\n                    maxLength={this.maxlength}\n                    minLength={this.minlength}\n                    name={this.name}\n                    placeholder={this.placeholder || ''}\n                    readOnly={this.readonly}\n                    required={this.required}\n                    spellcheck={this.spellcheck}\n                    cols={this.cols}\n                    rows={this.rows}\n                    wrap={this.wrap}\n                    onInput={this.onInput}\n                    onChange={this.onChange}\n                    onBlur={this.onBlur}\n                    onFocus={this.onFocus}\n                    style={style}\n                    {...this.inheritedAttributes}\n                >\n            {value}\n          </textarea>\n            </Host>\n        );\n    }\n}\n\nlet textareaIds = 0;\n"]}
+{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../src/components/textarea/textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    ComponentInterface,\n    Method,\n    Prop,\n    Watch,\n    h,\n    Host,\n    EventEmitter,\n    Element,\n    Event,\n    Build,\n    readTask\n} from '@stencil/core';\nimport {\n    debounceEvent,\n    inheritAriaAttributes,\n    inheritAttributes,\n    raf,\n    setOrRemoveAttribute\n} from '../../utils/helpers';\nimport { \n    TextareaChangeEventDetail,\n    WcsTextareaInputMode, \n    WcsTextareaEnterKeyHint, \n    WcsTextareaResize, \n    WcsTextareaInputState,\n    WcsTextareaWrap\n} from './textarea-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst TEXTAREA_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * Mainly inspired from Ionic Textarea Component.\n * \n * ## Accessibility guidelines 💡\n * > - If you use wcs-textarea outside a wcs-form-field, you have to manage the label and the error message yourself.\n * > You can use the `aria-label` attribute to provide a label for screen readers but adds no visual label.\n *\n * @cssprop --wcs-textarea-icon-color-default - Default icon color whe the textarea is not focused\n * @cssprop --wcs-textarea-icon-color-focus - Icon color when the textarea is focused \n * @cssprop --wcs-textarea-icon-color-disabled - Icon color when the textarea is disabled\n * \n * @cssprop --wcs-textarea-background-color - Background color of the textarea\n *\n * @cssprop --wcs-textarea-border-radius-left - Border radius of the left side of the textarea\n * @cssprop --wcs-textarea-border-radius-right - Border radius of the right side of the textarea\n * \n * @cssprop --wcs-textarea-border-width - Border width of the textarea when not focused\n * @cssprop --wcs-textarea-border-width-focus - Border width of the textarea when focused\n * \n * @cssprop --wcs-textarea-border-color-default - Default border color of the textarea when not focused\n * @cssprop --wcs-textarea-border-color-disabled - Border color of the textarea when disabled\n * @cssprop --wcs-textarea-border-color-error - Border color of the textarea when in error state\n * @cssprop --wcs-textarea-border-color-focus -  Border color of the textarea when focused\n * \n * @cssprop --wcs-textarea-value-color - Color of the value when the textarea is not focused\n * @cssprop --wcs-textarea-value-font-weight - Font weight of the textarea value\n * \n * @cssprop --wcs-textarea-placeholder-color - Color of the textarea placeholder\n * @cssprop --wcs-textarea-placeholder-font-weight - Font weight of the textarea placeholder\n * @cssprop --wcs-textarea-placeholder-font-style - Font style of the textarea placeholder\n * \n * @cssprop --wcs-textarea-text-color-disabled - Color of the value when the textarea is disabled\n * \n * @cssprop --wcs-textarea-border-style-default - Border style default of the textarea when not focused\n * @cssprop --wcs-textarea-border-style-error - Border style default of the textarea in error state\n * @cssprop --wcs-textarea-border-style-focus - Border style default of the textarea when focused\n * \n * @cssprop --wcs-textarea-min-height - Min height of the textarea component\n * @cssprop --wcs-textarea-max-height - Max height of the textarea component\n * \n * @cssprop --wcs-textarea-padding-top - Padding top of the textarea\n * @cssprop --wcs-textarea-padding-bottom - Padding bottom of the textarea\n * @cssprop --wcs-textarea-padding-left - Padding left of the textarea\n * @cssprop --wcs-textarea-padding-right - Padding right of the textarea\n * \n * @cssprop --wcs-textarea-gap - Gap between textarea and icon (prefix/suffix)\n */\n@Component({\n    tag: 'wcs-textarea',\n    styleUrl: 'textarea.scss',\n    shadow: {\n        delegatesFocus: true\n    },\n})\nexport class Textarea implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeInput?: HTMLTextAreaElement;\n    private inputId = `wcs-textarea-${textareaIds++}`;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /**\n     * This is required for a WebKit bug which requires us to\n     * blur and focus an input to properly focus the input in\n     * an item with delegatesFocus. It will no longer be needed\n     * with iOS 14.\n     *\n     * @internal\n     */\n    @Prop() fireFocusEvents: boolean = true;\n\n    /**\n     * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n     */\n    @Prop() autocapitalize = 'none';\n\n    /**\n     * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n     */\n    @Prop() autofocus: boolean = false;\n\n    /**\n     * Set the amount of time, in milliseconds, to wait to trigger the `wcsInput` event after each keystroke.\n     * This also impacts form bindings such as `ngModel` or `v-model`.\n     */\n    @Prop() debounce = 0;\n\n    @Watch('debounce')\n    protected debounceChanged() {\n        this.wcsInput = debounceEvent(this.wcsInput, this.debounce);\n    }\n\n    /**\n     * If `true`, the user cannot interact with the textarea.\n     */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /**\n     * Name of the material icon to add to the input\n     */\n    @Prop() icon: string;\n\n    /**\n     * A hint to the browser for which keyboard to display.\n     */\n    @Prop() inputmode?: WcsTextareaInputMode;\n\n    /**\n     * A hint to the browser for which enter key to display.\n     */\n    @Prop() enterkeyhint?: WcsTextareaEnterKeyHint;\n\n    /**\n     * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.\n     */\n    @Prop() maxlength?: number;\n\n    /**\n     * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.\n     */\n    @Prop() minlength?: number;\n\n    /**\n     * The name of the control, which is submitted with the form data.\n     */\n    @Prop() name: string = this.inputId;\n\n    /**\n     * Instructional text that shows before the input has a value.\n     */\n    @Prop() placeholder?: string | null;\n\n    /**\n     * If `true`, the user cannot modify the value.\n     */\n    @Prop({ reflect: true }) readonly: boolean = false;\n\n    /**\n     * If `true`, the user must fill in a value before submitting a form.\n     */\n    @Prop({ reflect: true }) required: boolean = false;\n\n    /**\n     * If `true`, the element will have its spelling and grammar checked.\n     */\n    @Prop() spellcheck: boolean = false;\n\n    /**\n     * Specifies the state of the input. By default the input is in an initial state but you can set it to 'error' state if the data given by the user is not valid.\n     */\n    @Prop({reflect: true}) state: WcsTextareaInputState = 'initial';\n\n    /**\n     * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.  \n     * Note : at the moment, modifying the width is only possible if you add some custom CSS to the component,\n     * for example by overriding the `width` CSS property. See the Resize section for an example on how to do it.\n     */\n    @Prop() cols?: number;\n\n    /**\n     * The number of visible text lines for the control.\n     */\n    @Prop() rows?: number;\n\n    /**\n     * Indicates how the control wraps text.\n     */\n    @Prop() wrap?: WcsTextareaWrap;\n\n    /**\n     * If `true`, the element height will increase based on the value.\n     */\n    @Prop({ reflect: true }) autoGrow: boolean = false;\n\n    /**\n     * The value of the textarea.\n     */\n    @Prop({mutable: true}) value?: string | null = '';\n\n    /**\n     * Indicates how the textarea should be resizable.  \n     * Note : at the moment horizontal resizing is only possible if you add custom CSS to the component,\n     * see the Resize section for an example.\n     */\n    @Prop({reflect: true}) resize?: WcsTextareaResize;\n\n    /**\n     * Update the native input element when the value changes\n     */\n    @Watch('value')\n    protected valueChanged() {\n        const nativeInput = this.nativeInput;\n        const value = this.getValue();\n        if (nativeInput && nativeInput.value !== value) {\n            nativeInput.value = value;\n        }\n        this.runAutoGrow();\n    }\n\n    /**\n     * Emitted when the input value has changed.- See https://developer.mozilla.org/en-US/docs/Web/Events/change\n     */\n    @Event() wcsChange!: EventEmitter<TextareaChangeEventDetail>;\n\n    /**\n     * Emitted when a keyboard input occurred. See https://developer.mozilla.org/en-US/docs/Web/Events/input\n     */\n    @Event() wcsInput!: EventEmitter<KeyboardEvent>;\n\n    /**\n     * Emitted when the input loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    /**\n     * Emitted when the input has focus.\n     */\n    @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n    connectedCallback() {\n        this.debounceChanged();\n        if (Build.isBrowser) {\n            document.dispatchEvent(new CustomEvent('wcsInputDidLoad', {\n                detail: this.el\n            }));\n        }\n    }\n\n    disconnectedCallback() {\n        if (Build.isBrowser) {\n            document.dispatchEvent(new CustomEvent('wcsInputDidUnload', {\n                detail: this.el\n            }));\n        }\n    }\n\n    componentWillLoad() {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, TEXTAREA_INHERITED_ATTRS)\n        };\n    }\n\n    componentDidLoad() {\n        raf(() => this.runAutoGrow());\n    }\n\n    private runAutoGrow() {\n        const nativeInput = this.nativeInput;\n        if (nativeInput && this.autoGrow) {\n            readTask(() => {\n                nativeInput.style.height = 'auto';\n                nativeInput.style.height = nativeInput.scrollHeight + 'px';\n            });\n        }\n    }\n    \n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeInput, attr, value);\n    }\n\n    /**\n     * This method make the textarea automatically adopt the size of the content without a scroll bar\n     */\n    @Method()\n    async fitContent() {\n        raf(() => this.runAutoGrow());\n    }\n\n    /**\n     * Sets blur on the native `textarea` in `wcs-textarea`. Use this method instead of the global\n     * `textarea.blur()`.\n     * @internal\n     */\n    @Method()\n    async setBlur() {\n        if (this.nativeInput) {\n            this.nativeInput.blur();\n        }\n    }\n\n    /**\n     * Returns the native `<textarea>` element used under the hood.\n     */\n    @Method()\n    getInputElement(): Promise<HTMLTextAreaElement> {\n        // tslint:disable-next-line:no-non-null-assertion\n        return Promise.resolve(this.nativeInput!);\n    }\n\n    private getValue(): string {\n        return this.value || '';\n    }\n\n    private onInput = (ev: Event) => {\n        if (this.nativeInput) {\n            this.value = this.nativeInput.value;\n        }\n        this.wcsInput.emit(ev as KeyboardEvent);\n    }\n    \n    private onChange = (_: Event) => {\n        this.wcsChange.emit({value: this.nativeInput.value});\n    }\n\n    private onFocus = (ev: FocusEvent) => {\n        if (this.fireFocusEvents) {\n            this.wcsFocus.emit(ev);\n        }\n    }\n\n    private onBlur = (ev: FocusEvent) => {\n        if (this.fireFocusEvents) {\n            this.wcsBlur.emit(ev);\n        }\n    }\n\n    render() {\n        const value = this.getValue();\n        const style = {\n            ...(this.resize && {'resize': this.resize})\n        }\n\n        return (\n            <Host\n                aria-disabled={this.disabled ? 'true' : null}\n            >\n                {this.icon ? (<wcs-mat-icon icon={this.icon} size=\"m\"></wcs-mat-icon>) : null}\n                <textarea\n                    class=\"native-textarea\"\n                    ref={el => this.nativeInput = el}\n                    autoCapitalize={this.autocapitalize}\n                    autoFocus={this.autofocus}\n                    enterKeyHint={this.enterkeyhint}\n                    inputMode={this.inputmode}\n                    disabled={this.disabled}\n                    maxLength={this.maxlength}\n                    minLength={this.minlength}\n                    name={this.name}\n                    placeholder={this.placeholder || ''}\n                    readOnly={this.readonly}\n                    required={this.required}\n                    spellcheck={this.spellcheck}\n                    cols={this.cols}\n                    rows={this.rows}\n                    wrap={this.wrap}\n                    onInput={this.onInput}\n                    onChange={this.onChange}\n                    onBlur={this.onBlur}\n                    onFocus={this.onFocus}\n                    style={style}\n                    {...this.inheritedAttributes}\n                >\n            {value}\n          </textarea>\n            </Host>\n        );\n    }\n}\n\nlet textareaIds = 0;\n"]}

package/dist/collection/components/tooltip/tooltip.js

@@ -180,7 +180,7 @@ export class Tooltip {
         (_a = this.tippyInstance) === null || _a === void 0 ? void 0 : _a.destroy();
     }
     render() {
-        return (h(Host, { key: 'c64153818029a55af719bc87fa5ce413d310e8b7', role: "tooltip" }, h("slot", { key: '2f24f867892089d93b41783977b470ab908063cd', onSlotchange: _ => this.updateTippyContent() })));
+        return (h(Host, { key: '34f019e113250ce19d69186080c932f838ac5c86', role: "tooltip" }, h("slot", { key: '7edce2cfc96d454177668c81d615231369600977', onSlotchange: _ => this.updateTippyContent() })));
     }
     static get is() { return "wcs-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -255,7 +255,7 @@ export class Tooltip {
                     "text": "Determines if the tooltip has interactive content inside of it, so that it can be hovered over and clicked inside\nwithout hiding."
                 },
                 "attribute": "interactive",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "maxWidth": {

package/dist/collection/components/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, h, Host, Prop, Element, Watch, Method, Listen } from '@stencil/core';\nimport { WcsTooltipAppendTo, WcsTooltipPosition } from './tooltip-interface';\n\n// We use the Tippy.js library for the tooltip. At first by using directly the styles of tippy because\n// the design system does not specify any spec for the tooltips.\n//\n// In a second time, if a need of customization is felt, it will be possible to use the lib in a\n// \"Headless\" mode where the rendering of the tooltip will be entirely in our charge, without\n// modifications in the API : https://atomiks.github.io/tippyjs/v6/headless-tippy/\nimport tippy, { Instance, Props } from 'tippy.js';\nimport { isEscapeKey } from \"../../utils/helpers\";\nimport { isMutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\n/**\n * List of components that require special ARIA attribute delegation handling.\n * These components have their own internal elements (like native button inside wcs-button)\n * that need to receive ARIA attributes for proper accessibility.\n * \n * Another solution we take into account is to @Watch the ARIA attributes on the component and set them on the internal element.\n * But this solution was not centralized and can be forgotten.\n */\nconst DELEGATED_ARIA_COMPONENTS  = ['WCS-BUTTON'];\n\n/**\n * Tooltips are used to provide additional information for features available on the website. These can improve the user\n * experience or simply show additional information. Tooltips appear when the user rolls over or clicks on them\n * (for longer content).\n *\n * Note that this component is based on the Tippy.js library : https://atomiks.github.io/tippyjs/\n * \n * ## Accessibility guidelines 💡\n * \n * The problem is that impaired users may not be able to see what is the information provided by the tooltip. To solve\n * this problem, the tooltip should be served with some aria attributes to make it accessible.\n *\n * Aria-features `wcs-tooltip` respect:\n * - dismiss when the user presses the `Escape` key\n * - has a `role=tooltip`\n * - when set to `interactive` mode\n *  - `aria-expanded` on the targeted element: set to true when popover is open, false when it is closed\n *\n * Aria-features `wcs-tooltip` **does not respect with `wcs-button`**:\n * - aria-controls => we cannot do it yet, we need to wait for Cross root ARIA - export ID (https://github.com/WICG/aom/blob/gh-pages/exportid-explainer.md)\n * \n * But you have to provide the \"link\" between the element you want to describe and the tooltip. To do this, you have to\n * provide the \"visual description\" you add on the `wcs-tooltip` to the `aria-label` attribute or the `aria-description` as soon as the attribute will be available \n * of the element you want to describe .\n * \n * Example:\n * \n * ```html\n * <wcs-tooltip for=\"my-button\">Trashed items</wcs-tooltip>\n * <wcs-button id=\"my-button\" aria-label=\"Trashed items\">Trash</wcs-button>\n * ```\n * \n * @cssprop --wcs-tooltip-background-color - Background color of the tooltip\n * @cssprop --wcs-tooltip-text-color - Text color of the tooltip\n * @cssprop --wcs-tooltip-padding - Padding of the tooltip\n */\n@Component({\n    tag: 'wcs-tooltip',\n    shadow: true,\n    // Tippy stylesheet and specific styles are imported in the global tooltip.scss file\n    styleUrl: 'tooltip.scss'\n})\nexport class Tooltip implements ComponentInterface {\n    /**\n     * The **id** of the element the tooltip's going to describe.\n     *\n     * This property cannot be modified after initialization.\n     *\n     * @example\n     * ```html\n     * <span id=\"tooltiped\">Some content</span>\n     * <wcs-tooltip for=\"tooltiped\">A tooltip!</wcs-tooltip>\n     * ```\n     */\n    @Prop({mutable: false})\n    for: string;\n\n    /**\n     * Where the tooltip is going to show relative to the element it's describing.\n     */\n    @Prop({reflect: true})\n    position: WcsTooltipPosition = 'bottom';\n\n    /**\n     * Determines if the tooltip has interactive content inside of it, so that it can be hovered over and clicked inside\n     * without hiding.\n     */\n    @Prop()\n    interactive: boolean = false;\n\n    /**\n     * Specifies the maximum width of the tooltip. Useful to prevent it from being too horizontally wide to read.\n     *\n     * If the viewport's width is smaller than maxWidth, core CSS ensures the tippy remains smaller than the screen.\n     * \n     * To test it on WCS documentation page, add 'px' to the control value (string type in this case).\n     */\n    @Prop()\n    maxWidth: string | number = 350;\n\n    /**\n     * Delay in ms once a trigger event is fired before the tooltip shows or hides.\n     *\n     * You can provide an array with two values to define a different duration for show and hide.\n     *\n     * `[showDelay, hideDelay]`\n     *\n     * Use null to use default value.\n     */\n    @Prop()\n    delay: number | [number, number] = 0;\n\n    /**\n     * Duration in ms of the transition animation.\n     */\n    @Prop()\n    duration: number | [number, number] = [300, 250];\n\n    /**\n     * Determines the events that cause the tooltip to show. Multiple event names are separated by spaces.\n     *\n     * See: https://atomiks.github.io/tippyjs/v6/all-props/#trigger\n     */\n    @Prop()\n    trigger: string = 'mouseenter focus';\n\n    /**\n     * Allows you to change the theme used by tippy.\n     *\n     * The WCS theme 'dark' is used by default and uses the WCS CSS variables.\n     *\n     * You can create a theme by following this documentation and choosing a custom name :\n     * https://atomiks.github.io/tippyjs/v6/themes/\n     */\n    @Prop()\n    theme: 'dark' | 'light' = 'dark';\n\n    /**\n     * You can use this property instead of the slot API to affect content in the tooltip.\n     *\n     * This makes it easier to manage the update if the tooltip contains elements that are not mutated when their\n     * content changes. Indeed, if the slot is used, the tooltip is updated only if the structure of the slotted DOM\n     * changes (the DOM must be mutated).\n     *\n     * The two APIs are not mutually exclusive, if both are filled in (the prop + the slot) the rendering will first\n     * display the content of this property and then the slotted elements.\n     */\n    @Prop()\n    content: string;\n\n    /**\n     * The element to append the tooltip to. Default behaviour is `() => document.body`. If interactive: true,\n     * the default behavior is appendTo: \"parent\"\n     *\n     * See: https://atomiks.github.io/tippyjs/v6/all-props/#appendto\n     */\n    @Prop()\n    appendTo: WcsTooltipAppendTo;\n\n    @Element()\n    private el: HTMLWcsTooltipElement;\n\n    private tippyInstance: Instance<Props>;\n    private forElement?: HTMLElement;\n\n    componentWillLoad(): Promise<void> | void {\n        this.forElement = document.getElementById(this.for);\n        \n        if(!this.forElement) {\n            console.error('[wcs-tooltip]: The element with the id provided in the \"for\" property does not exist');\n            return\n        }\n        \n        this.tippyInstance = tippy(this.forElement, {\n            appendTo: this.appendTo || (() => document.body),\n            theme: this.theme,\n            allowHTML: true,\n            content: this.getTooltipContentFromPropAndSlot(),\n            maxWidth: this.maxWidth,\n            placement: this.position,\n            delay: this.delay,\n            duration: this.duration,\n            interactive: this.interactive,\n            trigger: this.trigger,\n            onShow: () => this.onShow(),\n            onHide: () => this.onHide()\n        });\n    }\n\n    // region Tippy.js events\n    \n    // ARIA attributes management 🔍\n    //\n    // While tippy.js automatically handles aria-expanded on the target element, we manage it ourselves for two main reasons:\n    // 1. Some of our components (like wcs-button) have an internal structure where the accessible/focusable element\n    //    is not the root element. We need to ensure the aria-expanded is set on the correct internal element.\n    // 2. We want to maintain consistent control over our ARIA attributes across all components and ensure\n    //    they work with our custom MutableAriaAttribute interface.\n    \n    private onShow() {\n        if (!this.forElement) {\n            return;\n        }\n\n        if (this.forElement.tagName && DELEGATED_ARIA_COMPONENTS.indexOf(this.forElement.tagName) !== -1) {\n            if(isMutableAriaAttribute(this.forElement)) {\n                if(this.interactive) {\n                    this.forElement.setAriaAttribute('aria-expanded', 'true');\n                }\n            }\n        }\n    }\n    \n    private onHide() {\n        if (!this.forElement) {\n            return;\n        }\n\n        if (this.forElement.tagName && DELEGATED_ARIA_COMPONENTS.indexOf(this.forElement.tagName) !== -1) {\n            if(isMutableAriaAttribute(this.forElement)) {\n                if(this.interactive) {\n                    this.forElement.setAriaAttribute('aria-expanded', 'false');\n                }\n            }\n        }\n    }\n    \n    // endregion\n    \n    @Listen('keydown', { target: 'window' })\n    async handleKeyDown(ev: KeyboardEvent) {\n        if (isEscapeKey(ev)) {\n            if(this.tippyInstance.state.isShown) {\n                await this.hide();\n            }\n        }\n    }\n\n    private getTooltipContentFromPropAndSlot() {\n        if (this.content) {\n            return this.content + this.el.innerHTML;\n        }\n        return this.el.innerHTML;\n    }\n\n    @Watch('interactive')\n    @Watch('position')\n    @Watch('maxWidth')\n    @Watch('theme')\n    @Watch('delay')\n    @Watch('duration')\n    @Watch('trigger')\n    // @ts-ignore\n    private updateProps() {\n        this.tippyInstance?.setProps({\n            interactive: this.interactive,\n            placement: this.position,\n            maxWidth: this.maxWidth,\n            theme: this.theme,\n            delay: this.delay,\n            duration: this.duration,\n            trigger: this.trigger\n        })\n    }\n\n    @Watch('content')\n    private updateTippyContent() {\n        this.tippyInstance?.setProps({\n            content: this.getTooltipContentFromPropAndSlot()\n        })\n    }\n\n    /**\n     * Programmatically hide the tooltip\n     */\n    @Method()\n    async hide() {\n        this.tippyInstance.hide();\n    }\n\n    /**\n     * Programmatically show the tooltip\n     */\n    @Method()\n    async show() {\n        this.tippyInstance.show();\n    }\n\n    /**\n     * Temporarily prevent the tooltip from showing or hiding\n     */\n    @Method()\n    async disable() {\n        this.tippyInstance.disable();\n    }\n\n    /**\n     * Re-enable a disabled tooltip\n     */\n    @Method()\n    async enable() {\n        this.tippyInstance.enable();\n    }\n\n    disconnectedCallback() {\n        this.tippyInstance?.destroy();\n    }\n\n    render() {\n        return (\n            <Host role=\"tooltip\">\n                <slot onSlotchange={_ => this.updateTippyContent()}/>\n            </Host>\n        );\n    }\n\n\n}\n"]}
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, h, Host, Prop, Element, Watch, Method, Listen } from '@stencil/core';\nimport { WcsTooltipAppendTo, WcsTooltipPosition } from './tooltip-interface';\n\n// We use the Tippy.js library for the tooltip. At first by using directly the styles of tippy because\n// the design system does not specify any spec for the tooltips.\n//\n// In a second time, if a need of customization is felt, it will be possible to use the lib in a\n// \"Headless\" mode where the rendering of the tooltip will be entirely in our charge, without\n// modifications in the API : https://atomiks.github.io/tippyjs/v6/headless-tippy/\nimport tippy, { Instance, Props } from 'tippy.js';\nimport { isEscapeKey } from \"../../utils/helpers\";\nimport { isMutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\n/**\n * List of components that require special ARIA attribute delegation handling.\n * These components have their own internal elements (like native button inside wcs-button)\n * that need to receive ARIA attributes for proper accessibility.\n * \n * Another solution we take into account is to @Watch the ARIA attributes on the component and set them on the internal element.\n * But this solution was not centralized and can be forgotten.\n */\nconst DELEGATED_ARIA_COMPONENTS  = ['WCS-BUTTON'];\n\n/**\n * Tooltips are used to provide additional information for features available on the website. These can improve the user\n * experience or simply show additional information. Tooltips appear when the user rolls over or clicks on them\n * (for longer content).\n *\n * Note that this component is based on the Tippy.js library : https://atomiks.github.io/tippyjs/\n * \n * ## Accessibility guidelines 💡\n * \n * The problem is that impaired users may not be able to see what is the information provided by the tooltip. To solve\n * this problem, the tooltip should be served with some aria attributes to make it accessible.\n *\n * Aria-features `wcs-tooltip` respect:\n * - dismiss when the user presses the `Escape` key\n * - has a `role=tooltip`\n * - when set to `interactive` mode\n *  - `aria-expanded` on the targeted element: set to true when popover is open, false when it is closed\n *\n * Aria-features `wcs-tooltip` **does not respect with `wcs-button`**:\n * - aria-controls => we cannot do it yet, we need to wait for Cross root ARIA - export ID (https://github.com/WICG/aom/blob/gh-pages/exportid-explainer.md)\n * \n * But you have to provide the \"link\" between the element you want to describe and the tooltip. To do this, you have to\n * provide the \"visual description\" you add on the `wcs-tooltip` to the `aria-label` attribute or the `aria-description` as soon as the attribute will be available \n * of the element you want to describe .\n * \n * Example:\n * \n * ```html\n * <wcs-tooltip for=\"my-button\">Trashed items</wcs-tooltip>\n * <wcs-button id=\"my-button\" aria-label=\"Trashed items\">Trash</wcs-button>\n * ```\n * \n * @cssprop --wcs-tooltip-background-color - Background color of the tooltip\n * @cssprop --wcs-tooltip-text-color - Text color of the tooltip\n * @cssprop --wcs-tooltip-padding - Padding of the tooltip\n */\n@Component({\n    tag: 'wcs-tooltip',\n    shadow: true,\n    // Tippy stylesheet and specific styles are imported in the global tooltip.scss file\n    styleUrl: 'tooltip.scss'\n})\nexport class Tooltip implements ComponentInterface {\n    /**\n     * The **id** of the element the tooltip's going to describe.\n     *\n     * This property cannot be modified after initialization.\n     *\n     * @example\n     * ```html\n     * <span id=\"tooltiped\">Some content</span>\n     * <wcs-tooltip for=\"tooltiped\">A tooltip!</wcs-tooltip>\n     * ```\n     */\n    @Prop({mutable: false})\n    for: string;\n\n    /**\n     * Where the tooltip is going to show relative to the element it's describing.\n     */\n    @Prop({reflect: true})\n    position: WcsTooltipPosition = 'bottom';\n\n    /**\n     * Determines if the tooltip has interactive content inside of it, so that it can be hovered over and clicked inside\n     * without hiding.\n     */\n    @Prop({ reflect: true })\n    interactive: boolean = false;\n\n    /**\n     * Specifies the maximum width of the tooltip. Useful to prevent it from being too horizontally wide to read.\n     *\n     * If the viewport's width is smaller than maxWidth, core CSS ensures the tippy remains smaller than the screen.\n     * \n     * To test it on WCS documentation page, add 'px' to the control value (string type in this case).\n     */\n    @Prop()\n    maxWidth: string | number = 350;\n\n    /**\n     * Delay in ms once a trigger event is fired before the tooltip shows or hides.\n     *\n     * You can provide an array with two values to define a different duration for show and hide.\n     *\n     * `[showDelay, hideDelay]`\n     *\n     * Use null to use default value.\n     */\n    @Prop()\n    delay: number | [number, number] = 0;\n\n    /**\n     * Duration in ms of the transition animation.\n     */\n    @Prop()\n    duration: number | [number, number] = [300, 250];\n\n    /**\n     * Determines the events that cause the tooltip to show. Multiple event names are separated by spaces.\n     *\n     * See: https://atomiks.github.io/tippyjs/v6/all-props/#trigger\n     */\n    @Prop()\n    trigger: string = 'mouseenter focus';\n\n    /**\n     * Allows you to change the theme used by tippy.\n     *\n     * The WCS theme 'dark' is used by default and uses the WCS CSS variables.\n     *\n     * You can create a theme by following this documentation and choosing a custom name :\n     * https://atomiks.github.io/tippyjs/v6/themes/\n     */\n    @Prop()\n    theme: 'dark' | 'light' = 'dark';\n\n    /**\n     * You can use this property instead of the slot API to affect content in the tooltip.\n     *\n     * This makes it easier to manage the update if the tooltip contains elements that are not mutated when their\n     * content changes. Indeed, if the slot is used, the tooltip is updated only if the structure of the slotted DOM\n     * changes (the DOM must be mutated).\n     *\n     * The two APIs are not mutually exclusive, if both are filled in (the prop + the slot) the rendering will first\n     * display the content of this property and then the slotted elements.\n     */\n    @Prop()\n    content: string;\n\n    /**\n     * The element to append the tooltip to. Default behaviour is `() => document.body`. If interactive: true,\n     * the default behavior is appendTo: \"parent\"\n     *\n     * See: https://atomiks.github.io/tippyjs/v6/all-props/#appendto\n     */\n    @Prop()\n    appendTo: WcsTooltipAppendTo;\n\n    @Element()\n    private el: HTMLWcsTooltipElement;\n\n    private tippyInstance: Instance<Props>;\n    private forElement?: HTMLElement;\n\n    componentWillLoad(): Promise<void> | void {\n        this.forElement = document.getElementById(this.for);\n        \n        if(!this.forElement) {\n            console.error('[wcs-tooltip]: The element with the id provided in the \"for\" property does not exist');\n            return\n        }\n        \n        this.tippyInstance = tippy(this.forElement, {\n            appendTo: this.appendTo || (() => document.body),\n            theme: this.theme,\n            allowHTML: true,\n            content: this.getTooltipContentFromPropAndSlot(),\n            maxWidth: this.maxWidth,\n            placement: this.position,\n            delay: this.delay,\n            duration: this.duration,\n            interactive: this.interactive,\n            trigger: this.trigger,\n            onShow: () => this.onShow(),\n            onHide: () => this.onHide()\n        });\n    }\n\n    // region Tippy.js events\n    \n    // ARIA attributes management 🔍\n    //\n    // While tippy.js automatically handles aria-expanded on the target element, we manage it ourselves for two main reasons:\n    // 1. Some of our components (like wcs-button) have an internal structure where the accessible/focusable element\n    //    is not the root element. We need to ensure the aria-expanded is set on the correct internal element.\n    // 2. We want to maintain consistent control over our ARIA attributes across all components and ensure\n    //    they work with our custom MutableAriaAttribute interface.\n    \n    private onShow() {\n        if (!this.forElement) {\n            return;\n        }\n\n        if (this.forElement.tagName && DELEGATED_ARIA_COMPONENTS.indexOf(this.forElement.tagName) !== -1) {\n            if(isMutableAriaAttribute(this.forElement)) {\n                if(this.interactive) {\n                    this.forElement.setAriaAttribute('aria-expanded', 'true');\n                }\n            }\n        }\n    }\n    \n    private onHide() {\n        if (!this.forElement) {\n            return;\n        }\n\n        if (this.forElement.tagName && DELEGATED_ARIA_COMPONENTS.indexOf(this.forElement.tagName) !== -1) {\n            if(isMutableAriaAttribute(this.forElement)) {\n                if(this.interactive) {\n                    this.forElement.setAriaAttribute('aria-expanded', 'false');\n                }\n            }\n        }\n    }\n    \n    // endregion\n    \n    @Listen('keydown', { target: 'window' })\n    async handleKeyDown(ev: KeyboardEvent) {\n        if (isEscapeKey(ev)) {\n            if(this.tippyInstance.state.isShown) {\n                await this.hide();\n            }\n        }\n    }\n\n    private getTooltipContentFromPropAndSlot() {\n        if (this.content) {\n            return this.content + this.el.innerHTML;\n        }\n        return this.el.innerHTML;\n    }\n\n    @Watch('interactive')\n    @Watch('position')\n    @Watch('maxWidth')\n    @Watch('theme')\n    @Watch('delay')\n    @Watch('duration')\n    @Watch('trigger')\n    // @ts-ignore\n    private updateProps() {\n        this.tippyInstance?.setProps({\n            interactive: this.interactive,\n            placement: this.position,\n            maxWidth: this.maxWidth,\n            theme: this.theme,\n            delay: this.delay,\n            duration: this.duration,\n            trigger: this.trigger\n        })\n    }\n\n    @Watch('content')\n    private updateTippyContent() {\n        this.tippyInstance?.setProps({\n            content: this.getTooltipContentFromPropAndSlot()\n        })\n    }\n\n    /**\n     * Programmatically hide the tooltip\n     */\n    @Method()\n    async hide() {\n        this.tippyInstance.hide();\n    }\n\n    /**\n     * Programmatically show the tooltip\n     */\n    @Method()\n    async show() {\n        this.tippyInstance.show();\n    }\n\n    /**\n     * Temporarily prevent the tooltip from showing or hiding\n     */\n    @Method()\n    async disable() {\n        this.tippyInstance.disable();\n    }\n\n    /**\n     * Re-enable a disabled tooltip\n     */\n    @Method()\n    async enable() {\n        this.tippyInstance.enable();\n    }\n\n    disconnectedCallback() {\n        this.tippyInstance?.destroy();\n    }\n\n    render() {\n        return (\n            <Host role=\"tooltip\">\n                <slot onSlotchange={_ => this.updateTippyContent()}/>\n            </Host>\n        );\n    }\n\n\n}\n"]}

package/dist/esm/{grid-pagination-976a86e9.js → grid-pagination-731726a6.js}

@@ -4,10 +4,10 @@ import { i as inheritAriaAttributes, a as inheritAttributes, s as setOrRemoveAtt
 const getAccessibleName = (order, double) => {
     switch (order) {
         case 'next':
-            return double ? 'Last page' : 'Next page';
+            return double ? 'Dernière page' : 'Page suivante';
         case 'previous':
         default:
-            return double ? 'First page' : 'Previous page';
+            return double ? 'Première page' : 'Page précédente';
     }
 };
 const GridPaginationArrow = ({ active, order, double = false }) => (h("wcs-button", { mode: "clear", shape: "square", size: "s", disabled: !active, title: getAccessibleName(order, double) },
@@ -64,14 +64,19 @@ const GridPagination = class {
     async setAriaAttribute(attr, value) {
         setOrRemoveAttribute(this.nativeNav, attr, value);
     }
+    getWcsGrid() {
+        return this.el.parentElement.tagName === 'WCS-GRID' ? this.el.parentElement : undefined;
+    }
     lastPage() {
         this.currentPage = this.pageCount - 1;
         this.emitPaginationChange();
+        this.focusFirstGridCell();
     }
     nextPage() {
         if (this.canGoToNextPage()) {
             this.currentPage++;
             this.emitPaginationChange();
+            this.focusFirstGridCell();
         }
     }
     canGoToNextPage() {
@@ -81,6 +86,7 @@ const GridPagination = class {
         if (this.canGoToPreviousPage()) {
             this.currentPage--;
             this.emitPaginationChange();
+            this.focusFirstGridCell();
         }
     }
     canGoToPreviousPage() {
@@ -89,13 +95,27 @@ const GridPagination = class {
     firstPage() {
         this.currentPage = 0;
         this.emitPaginationChange();
+        this.focusFirstGridCell();
     }
-    onChangePagesize(event) {
+    onChangePageSize(event) {
         this.pageSize = event.detail.value;
         if (this.currentPage + 1 > this.pageSize) {
             this.currentPage = 0;
         }
         this.emitPaginationChange();
+        this.focusFirstGridCell();
+    }
+    /**
+     * Move focus to the first grid cell after a pagination change
+     */
+    focusFirstGridCell() {
+        const grid = this.getWcsGrid();
+        if (grid) {
+            requestAnimationFrame(() => {
+                this.el.blur();
+                grid.focusFirstCell();
+            });
+        }
     }
     emitPaginationChange() {
         this.wcsGridPaginationChange.emit({
@@ -108,7 +128,7 @@ const GridPagination = class {
         });
     }
     render() {
-        return (h(Host, { key: 'bee1c9832792c3385d522f9382de8636139d6161', slot: "grid-pagination" }, h("div", { key: '24a7aec2ad62883a7818b59f32f2965de3988f3e', class: "container" }, h("div", { key: '3abc3e73332eb167448133ad28a65a41c5e93e18', class: "page-size" }, h("wcs-select", { key: '8ed583efa8d183dff2ddeb776e650019a759f038', placeholder: "El\u00E9ments par page", class: "available-page-sizes", "aria-labelledby": "elements-per-page-number elements-per-page-text", value: this.pageSize, onWcsChange: this.onChangePagesize.bind(this) }, this.availablePageSizes.map((pageSize) => h("wcs-select-option", { value: pageSize }, pageSize))), h("span", { key: 'ef0447a2215071dac316f9d037c34b408734c0ef', id: "elements-per-page-number", hidden: true }, this.pageSize), h("span", { key: '6420b20cd2edde465e28933b803c5dbbb3c44047', id: "elements-per-page-text" }, "\u00E9l\u00E9ments par page")), h("div", { key: 'fbc0b228a34659ebdc91d31def44854fc99d1fc8', class: "items-count" }, h("span", { key: '5ab2756b28332b2a1851d3da15796b12306d5413' }, this.itemsCount, " \u00E9l\u00E9ments")), h("nav", Object.assign({ key: 'cd05b9352046ba7dc430e9bbd0e79032ce0ce6c3', "aria-label": "pagination", ref: (el) => (this.nativeNav = el) }, this.inheritedAttributes), h("ul", { key: 'f9277ef66a0e6a3a25509acb9eb8e57e40952586', class: "page-management" }, h("li", { key: 'eb412a9c0f1bac4a448aa544d83eefb64be3823b', class: "pagination-arrow", onClick: this.firstPage.bind(this) }, h(GridPaginationArrow, { key: '97efc725465d7bb97a228c653473726391bd250f', active: this.canGoToPreviousPage(), order: "previous", double: true })), h("li", { key: 'd615cf6062d352803448a1a5195c6186e143dc6b', class: "pagination-arrow", onClick: this.previousPage.bind(this) }, h(GridPaginationArrow, { key: '1da29a9f802f71f0c699d9a438cf4a38c15d93c0', active: this.canGoToPreviousPage(), order: "previous" })), h("li", { key: '433186a63982aa5273ce804131383ef889dca97a', class: "pagination-counter" }, h("span", { key: '591352b4f4b95d56c3a20536ada90d42f67065f9', "aria-label": `Page ${this.currentPage + 1} sur ${this.pageCount}`, "aria-current": "page" }, this.currentPage + 1, " / ", this.pageCount)), h("li", { key: 'e318556a6c650763afe8c005cfa751443a8da05d', class: "pagination-arrow", onClick: this.nextPage.bind(this) }, h(GridPaginationArrow, { key: '0598f1a9ace662c6aab71c2e3756c9b972145521', active: this.canGoToNextPage(), order: "next" })), h("li", { key: 'a8caa45cc06ea000283e3acf3762bbfd2b8a41f4', class: "pagination-arrow", onClick: this.lastPage.bind(this) }, h(GridPaginationArrow, { key: '5c030a25a38832669d6c353b994a3269aee38ad9', active: this.canGoToNextPage(), order: "next", double: true })))))));
+        return (h(Host, { key: 'a51e533835607f4e0b712fe26680704a71f76cd6', slot: "grid-pagination" }, h("div", { key: '8ff4ebf10c9e134a8e2fe5d577860a8d6dc9c863', class: "container" }, h("div", { key: 'a4c6ce48c71fb017dfecdb3f1e8bdc59894e1cbd', class: "page-size" }, h("wcs-select", { key: 'ae08e610f92bc8084806b25b0b5d7fa95db079ee', placeholder: "El\u00E9ments par page", class: "available-page-sizes", "aria-labelledby": "elements-per-page-number elements-per-page-text", value: this.pageSize, onWcsChange: this.onChangePageSize.bind(this) }, this.availablePageSizes.map((pageSize) => h("wcs-select-option", { value: pageSize }, pageSize))), h("span", { key: '282fd594fa817e9f2535c7403b5e1d66e4a7d030', id: "elements-per-page-number", hidden: true }, this.pageSize), h("span", { key: '00ee37d7e5156aa17b234fdf6eec956228064094', id: "elements-per-page-text" }, "\u00E9l\u00E9ments par page")), h("div", { key: '2ae95e32fc77cafebf0a38eb2746c62d0bd3a537', class: "items-count" }, h("span", { key: '5861d6bbf937867579181842dc93ba33290cdfe9' }, this.itemsCount, " \u00E9l\u00E9ments")), h("nav", Object.assign({ key: '7d847f316fb18ec7bdc08f7c055115a7391bb25e', "aria-label": "pagination", ref: (el) => (this.nativeNav = el) }, this.inheritedAttributes), h("ul", { key: 'd58fdfcd0a663071a6c94b72acf339a2efd57b5d', class: "page-management" }, h("li", { key: 'd18366653d52b0e481bfc8bb0d001d72aa5b3b36', class: "pagination-arrow", onClick: this.firstPage.bind(this) }, h(GridPaginationArrow, { key: 'ce33b84750ac08bfc50e91378f79ce62c11c9750', active: this.canGoToPreviousPage(), order: "previous", double: true })), h("li", { key: 'fb8adcbe91d40dd5d5dd741ec2c69299d971a1ee', class: "pagination-arrow", onClick: this.previousPage.bind(this) }, h(GridPaginationArrow, { key: 'b5f8b2804909a64e73e4d26a1faea483a10d2137', active: this.canGoToPreviousPage(), order: "previous" })), h("li", { key: '22742254c3c37ecf900eba29d1605a0420ff11e2', class: "pagination-counter" }, h("span", { key: '1f9385fffd93e2eb97d8199b0d7e459e58e01285', "aria-label": `Page ${this.currentPage + 1} sur ${this.pageCount}`, "aria-current": "page" }, this.currentPage + 1, " / ", this.pageCount)), h("li", { key: '3a408b5b27a1ff8ba7dc52b6027506100e371d49', class: "pagination-arrow", onClick: this.nextPage.bind(this) }, h(GridPaginationArrow, { key: '54e0d638e0645fd46b8a96a99509c8a3dafc842b', active: this.canGoToNextPage(), order: "next" })), h("li", { key: 'e91b2f2eeadfeea3ef68fa83c3c3e9fa30c3c17f', class: "pagination-arrow", onClick: this.lastPage.bind(this) }, h(GridPaginationArrow, { key: '14834c2f39a7f1076dfe2660aa2c651d1c52f40e', active: this.canGoToNextPage(), order: "next", double: true })))))));
     }
     get el() { return getElement(this); }
 };
@@ -117,4 +137,4 @@ GridPagination.style = WcsGridPaginationStyle0;
 
 export { GridPagination as G };
 
-//# sourceMappingURL=grid-pagination-976a86e9.js.map
+//# sourceMappingURL=grid-pagination-731726a6.js.map

package/dist/esm/grid-pagination-731726a6.js.map

@@ -0,0 +1 @@
+{"file":"grid-pagination-731726a6.js","mappings":"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","names":[],"sources":["src/components/grid-pagination/grid-pagination-arrow.tsx","src/components/grid-pagination/grid-pagination.scss?tag=wcs-grid-pagination&encapsulation=shadow","src/components/grid-pagination/grid-pagination.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\ninterface GridPaginationArrowProps {\n  active: boolean;\n  order: 'next' | 'previous';\n  double?: boolean;\n}\n\nconst getAccessibleName = (order: GridPaginationArrowProps['order'], double: GridPaginationArrowProps['double']): string => {\n  switch (order) {\n    case 'next':\n      return double ? 'Dernière page' : 'Page suivante';\n    case 'previous':\n    default:\n      return double ? 'Première page' : 'Page précédente';\n  }\n}\n\nexport const GridPaginationArrow: FunctionalComponent<GridPaginationArrowProps> = ({active, order, double = false}) => (\n  <wcs-button mode=\"clear\"\n              shape=\"square\"\n              size=\"s\"\n              disabled={!active}\n              title={getAccessibleName(order, double)}>\n    <svg style={{cursor: 'pointer'}}\n         aria-hidden=\"true\"\n         xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\">\n      <style type=\"text/css\">{`\n              .arrow-group {\n                  transform-origin: 50% 51%;\n                  transition: transform 175ms ease-in-out;\n              }\n              .arrow {\n                  transition: fill 175ms ease-in-out;\n                  fill: var(--wcs-grid-pagination-arrow-color-inactive, var(--wcs-button-color));\n              }\n              .second-arrow {\n                  transform: translateY(-8px);\n              }\n              .next {\n                  transform: rotate(90deg);\n              }\n              .previous {\n                  transform: rotate(-90deg);\n              }\n              .active {\n                  fill: var(--wcs-grid-pagination-arrow-color-active, var(--wcs-button-color));\n              }\n          `}</style>\n      <g fill=\"none\" class={order + ' arrow-group'}>\n        <path class={(active ? 'active' : '') + ' arrow'} d=\"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z\"/>\n        <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\n      </g>\n      {\n        double ?\n          <g fill=\"none\" class={order + ' arrow-group'}>\n            <path class={(active ? 'active' : '') + ' arrow second-arrow'}\n                  d=\"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z\"/>\n            <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\n          </g>\n          : ''\n      }\n    </svg>\n  </wcs-button>\n);\n","@import '../../style/focus-outline.scss';\n\n:host {\n    display: block;\n    margin-top: var(--wcs-grid-pagination-margin-top);\n\n    --wcs-grid-pagination-color: var(--wcs-semantic-color-text-primary);\n    --wcs-grid-pagination-font-size: var(--wcs-semantic-font-size-label-2);\n    --wcs-grid-pagination-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-grid-pagination-gap: var(--wcs-semantic-spacing-base);\n    --wcs-grid-pagination-page-size-gap: var(--wcs-semantic-spacing-base);\n    --wcs-grid-pagination-counter-gap: var(--wcs-semantic-spacing-small);\n    --wcs-grid-pagination-margin-top: var(--wcs-semantic-spacing-large);\n\n    --wcs-grid-pagination-arrow-color-inactive: unset; /* Optional : Overrides the fill property of the grid-pagination-arrow */\n    --wcs-grid-pagination-arrow-color-active: unset; /* Optional : Overrides the fill property of the grid-pagination-arrow */\n}\n\n.container {\n    display: grid;\n    gap: var(--wcs-grid-pagination-gap);\n    grid-template-columns: auto auto auto;\n    justify-content: space-between;\n    align-items: center;\n    color: var(--wcs-grid-pagination-color);\n    font-size: var(--wcs-grid-pagination-font-size);\n    font-weight: var(--wcs-grid-pagination-font-weight);\n}\n\n.available-page-sizes {\n    width: auto;\n}\n\n.page-management, .page-size, .items-count {\n    display: flex;\n    align-items: center;\n}\n\n.page-size {\n    gap: var(--wcs-grid-pagination-page-size-gap);\n}\n\n.page-management {\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n}\n\n.pagination-arrow {\n    display: flex;\n}\n\n.pagination-counter {\n    padding: 0 var(--wcs-grid-pagination-counter-gap);\n\n    span {\n        white-space: nowrap;\n    }\n}\n\n/* TODO : Remove this when the select component will be able to handle the size S */\nwcs-select.available-page-sizes {\n    --wcs-select-control-height: var(--wcs-semantic-size-s);\n}\n","import {\n    Component,\n    ComponentInterface, Element,\n    Event, EventEmitter,\n    h,\n    Host, Method,\n    Prop\n} from '@stencil/core';\nimport {\n    WcsGridPaginationChangeEventDetails\n} from '../grid/grid-interface';\nimport { SelectChangeEventDetail } from '../select/select-interface';\nimport { GridPaginationArrow } from './grid-pagination-arrow';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst GRID_PAGINATION_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The grid pagination is a subcomponent of `wcs-grid`, slotted in `grid-pagination` under the `<table>` element.\n * \n * @cssprop --wcs-grid-pagination-color - Text color of the grid pagination\n * @cssprop --wcs-grid-pagination-font-size - Font-size of the grid pagination\n * @cssprop --wcs-grid-pagination-font-weight - Font-weight of the grid pagination\n * @cssprop --wcs-grid-pagination-gap - Gap between the page size, number of elements and page management\n * @cssprop --wcs-grid-pagination-page-size-gap - Gap between the select and the text within the page size container\n * @cssprop --wcs-grid-pagination-counter-gap - Gap within the page management counter\n * @cssprop --wcs-grid-pagination-margin-top - Margin between the grid and the pagination\n * @cssprop --wcs-grid-pagination-arrow-color-inactive - Color of the inactive arrow\n * @cssprop --wcs-grid-pagination-arrow-color-active - Color of the active arrow\n */\n@Component({\n    tag: 'wcs-grid-pagination',\n    styleUrl: 'grid-pagination.scss',\n    shadow: true\n})\nexport class GridPagination implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeNav!: HTMLElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    static readonly INDEX_FIRST_PAGE: number = 0;\n    /**\n     * Set the available page sizes in the pagination dropdown on the left.\n     */\n    @Prop() availablePageSizes: number[] = [10, 20, 50];\n    /**\n     * The current page of the pagination. First page starts at index 0.\n     */\n    @Prop({mutable: true}) currentPage: number = GridPagination.INDEX_FIRST_PAGE;\n    /**\n     * Maximum number of elements shown per page.  \n     * Default is the first value of `availablePageSizes`.\n     */\n    @Prop() pageSize: number = this.availablePageSizes[0];\n    /**\n     * Total elements in the grid.  \n     * - **Grid in `Server mode`** : You have to set `itemsCount` = your total data length.  \n     * - **Grid not in Server mode** : Do not set it manually : itemsCount is set and updated every pagination refresh.\n     */\n    @Prop() itemsCount: number = 0;\n    /**\n     * Max number of pages.  \n     * - **Grid in `Server mode`** : You have to set `pageCount` = `itemsCount` divided by `pageSize`.  \n     * - **Grid not in Server mode** : Do not set it manually : pageCount is set and updated every pagination refresh.\n     */\n    @Prop() pageCount: number = 1;\n    /**\n     * Event emitted when the pagination changes.\n     */\n    @Event() wcsGridPaginationChange!: EventEmitter<WcsGridPaginationChangeEventDetails>;\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, GRID_PAGINATION_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeNav, attr, value);\n    }\n    \n    private getWcsGrid(): HTMLWcsGridElement | undefined {\n        return this.el.parentElement.tagName === 'WCS-GRID' ? this.el.parentElement as HTMLWcsGridElement : undefined;\n    }\n\n    private lastPage(): void {\n        this.currentPage = this.pageCount - 1;\n        this.emitPaginationChange();\n        this.focusFirstGridCell();\n    }\n\n    private nextPage(): void {\n        if (this.canGoToNextPage()) {\n            this.currentPage++;\n            this.emitPaginationChange();\n            this.focusFirstGridCell();\n        }\n    }\n\n    private canGoToNextPage(): boolean {\n        return this.currentPage + 1 < this.pageCount;\n    }\n\n    private previousPage(): void {\n        if (this.canGoToPreviousPage()) {\n            this.currentPage--;\n            this.emitPaginationChange();\n            this.focusFirstGridCell();\n        }\n    }\n\n    private canGoToPreviousPage(): boolean {\n        return this.currentPage > 0;\n    }\n\n    private firstPage(): void {\n        this.currentPage = 0;\n        this.emitPaginationChange();\n        this.focusFirstGridCell();\n    }\n\n    private onChangePageSize(event: CustomEvent<SelectChangeEventDetail>): void {\n        this.pageSize = event.detail.value;\n        if (this.currentPage + 1 > this.pageSize) {\n            this.currentPage = 0;\n        }\n        this.emitPaginationChange();\n        this.focusFirstGridCell();\n    }\n\n    /**\n     * Move focus to the first grid cell after a pagination change\n     */\n    private focusFirstGridCell() {\n        const grid = this.getWcsGrid();\n        if (grid) {\n            requestAnimationFrame(() => {\n                this.el.blur();\n                grid.focusFirstCell();\n            })\n        }\n    }\n\n    private emitPaginationChange(): void {\n        this.wcsGridPaginationChange.emit({\n            pagination: {\n                currentPage: this.currentPage,\n                pageSize: this.pageSize,\n                itemsCount: this.itemsCount,\n                pageCount: this.pageCount\n            }\n        });\n    }\n\n    render(): any {\n        return (<Host slot=\"grid-pagination\">\n            <div class=\"container\">\n                <div class=\"page-size\">\n                    <wcs-select placeholder=\"Eléments par page\"\n                                class=\"available-page-sizes\"\n                                aria-labelledby=\"elements-per-page-number elements-per-page-text\"\n                                value={this.pageSize}\n                                onWcsChange={this.onChangePageSize.bind(this)}>\n                        {\n                            this.availablePageSizes.map((pageSize) =>\n                                <wcs-select-option value={pageSize}>{pageSize}</wcs-select-option>\n                            )\n                        }\n                    </wcs-select>\n                    <span id=\"elements-per-page-number\" hidden>{this.pageSize}</span>\n                    <span id=\"elements-per-page-text\">éléments par page</span>\n                </div>\n\n                <div class=\"items-count\">\n                    <span>{this.itemsCount} éléments</span>\n                </div>\n\n                <nav aria-label=\"pagination\" ref={(el) => (this.nativeNav = el)} {...this.inheritedAttributes}>\n                    <ul class=\"page-management\">\n                        <li class=\"pagination-arrow\" onClick={this.firstPage.bind(this)}>\n                            <GridPaginationArrow active={this.canGoToPreviousPage()} order=\"previous\" double></GridPaginationArrow>\n                        </li>\n                        <li class=\"pagination-arrow\" onClick={this.previousPage.bind(this)}>\n                            <GridPaginationArrow active={this.canGoToPreviousPage()} order=\"previous\"></GridPaginationArrow>\n                        </li>\n    \n                        <li class=\"pagination-counter\">\n                            <span aria-label={`Page ${this.currentPage + 1} sur ${this.pageCount}`} aria-current=\"page\">\n                                {this.currentPage + 1} / {this.pageCount}\n                            </span>\n                        </li>\n    \n                        <li class=\"pagination-arrow\" onClick={this.nextPage.bind(this)}>\n                            <GridPaginationArrow active={this.canGoToNextPage()} order=\"next\"></GridPaginationArrow>\n                        </li>\n                        <li class=\"pagination-arrow\" onClick={this.lastPage.bind(this)}>\n                            <GridPaginationArrow active={this.canGoToNextPage()} order=\"next\" double></GridPaginationArrow>\n                        </li>\n                    </ul>\n                </nav>\n            </div>\n        </Host>)\n    }\n}\n"],"version":3}

package/dist/esm/loader.js

@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-0f993ce5.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy(JSON.parse("[[\"wcs-editable-field\",[[1,\"wcs-editable-field\",{\"type\":[1],\"label\":[1],\"readonly\":[516],\"value\":[1032],\"validateFn\":[16],\"formatFn\":[16],\"errorMsg\":[1,\"error-msg\"],\"size\":[513],\"currentState\":[32],\"isError\":[32]},[[8,\"click\",\"onWindowClickEvent\"]],{\"value\":[\"onValueChange\"]}]]],[\"wcs-grid-pagination\",[[1,\"wcs-grid-pagination\",{\"availablePageSizes\":[16],\"currentPage\":[1026,\"current-page\"],\"pageSize\":[2,\"page-size\"],\"itemsCount\":[2,\"items-count\"],\"pageCount\":[2,\"page-count\"],\"setAriaAttribute\":[64]}]]],[\"wcs-horizontal-stepper\",[[1,\"wcs-horizontal-stepper\",{\"currentStep\":[1026,\"current-step\"],\"steps\":[16],\"mode\":[1],\"checkOnComplete\":[4,\"check-on-complete\"],\"internalCurrentStepIndex\":[32],\"previous\":[64],\"next\":[64]},null,{\"currentStep\":[\"onCurrentStepChange\"]}]]],[\"wcs-breadcrumb\",[[1,\"wcs-breadcrumb\",{\"maxItems\":[2,\"max-items\"],\"itemsBeforeCollapse\":[2,\"items-before-collapse\"],\"itemsAfterCollapse\":[2,\"items-after-collapse\"],\"ariaLabelExpandButton\":[1,\"aria-label-expand-button\"],\"showHiddenItems\":[32],\"setAriaAttribute\":[64]},null,{\"maxItems\":[\"handleCollapsePropsChange\"],\"itemsBeforeCollapse\":[\"handleCollapsePropsChange\"],\"itemsAfterCollapse\":[\"handleCollapsePropsChange\"],\"ariaLabelExpandButton\":[\"handleAriaLabelExpandBtnChange\"]}]]],[\"wcs-counter\",[[17,\"wcs-counter\",{\"size\":[513],\"label\":[1],\"disabled\":[516],\"min\":[1026],\"max\":[1026],\"step\":[1026],\"value\":[1026],\"displayedValue\":[32],\"setAriaAttribute\":[64]},null,{\"value\":[\"valueChange\"]}]]],[\"wcs-grid\",[[1,\"wcs-grid\",{\"serverMode\":[4,\"server-mode\"],\"data\":[16],\"loading\":[4],\"selectionConfig\":[1,\"selection-config\"],\"selectedItems\":[8,\"selected-items\"],\"wcsGridPaginationId\":[1,\"wcs-grid-pagination-id\"],\"rowIdPath\":[1,\"row-id-path\"],\"rowCssPartsFn\":[16],\"columns\":[32],\"paginationEl\":[32],\"rows\":[32],\"cursorPosition\":[32],\"setAriaAttribute\":[64]},[[0,\"focus\",\"onFocus\"],[0,\"blur\",\"onBlur\"],[0,\"wcsHiddenChange\",\"onHiddenColumnChange\"],[0,\"keydown\",\"onKeyDown\"],[1,\"mousedown\",\"onClick\"],[0,\"wcsSortChange\",\"sortChangeEventHandler\"],[0,\"wcsGridPaginationChange\",\"paginationChangeEventHandler\"],[8,\"wcsGridPaginationChange\",\"paginationChangeEventHandlerOutside\"]],{\"cursorPosition\":[\"onCursorPositionChange\"],\"data\":[\"onDataChange\"],\"selectedItems\":[\"onSelectedItemsPropertyChange\"]}]]],[\"wcs-modal\",[[4,\"wcs-modal\",{\"withoutBackdrop\":[516,\"without-backdrop\"],\"show\":[1540],\"showCloseButton\":[516,\"show-close-button\"],\"closeButtonAriaLabel\":[1,\"close-button-aria-label\"],\"size\":[1],\"hideActions\":[516,\"hide-actions\"],\"modalTriggerControlsId\":[1,\"modal-trigger-controls-id\"],\"initialFocusElementId\":[1,\"initial-focus-element-id\"],\"disableAutoFocus\":[4,\"disable-auto-focus\"],\"setAriaAttribute\":[64]},[[4,\"keydown\",\"onKeyDown\"]],{\"show\":[\"onShowChange\"]}]]],[\"wcs-dropdown\",[[17,\"wcs-dropdown\",{\"noArrow\":[4,\"no-arrow\"],\"mode\":[1],\"shape\":[1],\"size\":[1],\"disabled\":[516],\"placement\":[1],\"expanded\":[32],\"setAriaAttribute\":[64]},[[0,\"blur\",\"onBlur\"],[8,\"click\",\"onWindowClickEvent\"],[0,\"wcsDropdownItemClick\",\"dropdownItemClick\"],[0,\"keydown\",\"onKeyDown\"]],{\"placement\":[\"placementChange\"]}]]],[\"wcs-galactic-menu\",[[1,\"wcs-galactic-menu\",{\"text\":[1],\"showPopoverMenu\":[32],\"setAriaAttribute\":[64]},[[8,\"click\",\"onWindowClickEvent\"],[0,\"keydown\",\"onKeyDown\"]]]]],[\"wcs-input\",[[17,\"wcs-input\",{\"fireFocusEvents\":[4,\"fire-focus-events\"],\"accept\":[1],\"autocapitalize\":[1],\"autocomplete\":[1],\"autocorrect\":[1],\"autofocus\":[4],\"debounce\":[2],\"prefixLabel\":[1,\"prefix-label\"],\"suffixLabel\":[1,\"suffix-label\"],\"disabled\":[516],\"enterkeyhint\":[1],\"size\":[513],\"icon\":[1],\"inputmode\":[1],\"max\":[1],\"maxlength\":[2],\"min\":[1],\"minlength\":[2],\"multiple\":[4],\"name\":[1],\"hidePasswordButtonAriaLabel\":[1,\"hide-password-button-aria-label\"],\"showPasswordButtonAriaLabel\":[1,\"show-password-button-aria-label\"],\"pattern\":[1],\"placeholder\":[1],\"readonly\":[516],\"required\":[4],\"spellcheck\":[4],\"state\":[513],\"step\":[1],\"type\":[1],\"value\":[1032],\"passwordReveal\":[32],\"setBlur\":[64],\"getInputElement\":[64],\"setAriaAttribute\":[64]},null,{\"debounce\":[\"debounceChanged\"],\"passwordReveal\":[\"onPasswordRevealChange\"]}]]],[\"wcs-textarea\",[[17,\"wcs-textarea\",{\"fireFocusEvents\":[4,\"fire-focus-events\"],\"autocapitalize\":[1],\"autofocus\":[4],\"debounce\":[2],\"disabled\":[516],\"icon\":[1],\"inputmode\":[1],\"enterkeyhint\":[1],\"maxlength\":[2],\"minlength\":[2],\"name\":[1],\"placeholder\":[1],\"readonly\":[516],\"required\":[4],\"spellcheck\":[4],\"state\":[513],\"cols\":[2],\"rows\":[2],\"wrap\":[1],\"autoGrow\":[4,\"auto-grow\"],\"value\":[1025],\"resize\":[513],\"setAriaAttribute\":[64],\"fitContent\":[64],\"setBlur\":[64],\"getInputElement\":[64]},null,{\"debounce\":[\"debounceChanged\"],\"value\":[\"valueChanged\"]}]]],[\"wcs-accordion\",[[1,\"wcs-accordion\",{\"hideActionText\":[516,\"hide-action-text\"],\"highlight\":[516],\"groupContentWithHeader\":[516,\"group-content-with-header\"]},[[0,\"wcsOpenChange\",\"wcsOpenChangeHandler\"]],{\"hideActionText\":[\"updateHideActiontextOnPanel\"],\"highlight\":[\"updateHighlightOnPanel\"],\"groupContentWithHeader\":[\"updateGroupContentWithHeader\"]}]]],[\"wcs-accordion-content\",[[1,\"wcs-accordion-content\"]]],[\"wcs-accordion-header\",[[1,\"wcs-accordion-header\"]]],[\"wcs-accordion-panel\",[[1,\"wcs-accordion-panel\",{\"open\":[1540],\"hideActionText\":[516,\"hide-action-text\"],\"highlight\":[516],\"groupContentWithHeader\":[516,\"group-content-with-header\"],\"setAriaAttribute\":[64],\"close\":[64]},null,{\"open\":[\"openChange\"]}]]],[\"wcs-action-bar\",[[1,\"wcs-action-bar\",{\"gutter\":[516],\"hasTabs\":[32]}]]],[\"wcs-app\",[[1,\"wcs-app\"]]],[\"wcs-badge\",[[1,\"wcs-badge\",{\"shape\":[1],\"color\":[1],\"size\":[513]}]]],[\"wcs-breadcrumb-item\",[[1,\"wcs-breadcrumb-item\",{\"last\":[4]}]]],[\"wcs-card\",[[1,\"wcs-card\",{\"mode\":[1537]}]]],[\"wcs-card-body\",[[1,\"wcs-card-body\"]]],[\"wcs-com-nav\",[[1,\"wcs-com-nav\",{\"appName\":[1,\"app-name\"],\"mobileMenuOpen\":[32],\"currentActiveSizing\":[32],\"setAriaAttribute\":[64]},[[0,\"wcsClickOnFinalAction\",\"onClickOnFinalAction\"],[8,\"keydown\",\"exitMobileMenuOnKeyDown\"]]]]],[\"wcs-com-nav-category\",[[1,\"wcs-com-nav-category\",{\"label\":[1],\"categoryOpen\":[32],\"currentActiveSizing\":[32],\"setAriaAttribute\":[64],\"close\":[64],\"open\":[64]},[[8,\"click\",\"onWindowClickEvent\"],[8,\"wcsCategoryOpened\",\"onSubmenuOpened\"]]]]],[\"wcs-com-nav-item\",[[1,\"wcs-com-nav-item\",null,[[0,\"click\",\"onClick\"]]]]],[\"wcs-com-nav-submenu\",[[1,\"wcs-com-nav-submenu\",{\"label\":[1],\"panelTitle\":[1,\"panel-title\"],\"panelDescription\":[1,\"panel-description\"],\"menuOpen\":[32],\"currentActiveSizing\":[32],\"setAriaAttribute\":[64],\"close\":[64],\"open\":[64]},[[8,\"click\",\"onWindowClickEvent\"],[8,\"wcsSubmenuOpened\",\"onSubmenuOpened\"],[8,\"keydown\",\"onEscapeKeyDown\"],[0,\"wcsClickOnFinalAction\",\"wcsCategoryItemClickedHandler\"]]]]],[\"wcs-divider\",[[1,\"wcs-divider\"]]],[\"wcs-dropdown-divider\",[[1,\"wcs-dropdown-divider\"]]],[\"wcs-dropdown-header\",[[1,\"wcs-dropdown-header\"]]],[\"wcs-dropdown-item\",[[4,\"wcs-dropdown-item\",null,[[1,\"mouseup\",\"onMouseUp\"],[0,\"keydown\",\"onKeyDown\"]]]]],[\"wcs-field\",[[1,\"wcs-field\"]]],[\"wcs-field-content\",[[1,\"wcs-field-content\"]]],[\"wcs-field-label\",[[1,\"wcs-field-label\"]]],[\"wcs-footer\",[[1,\"wcs-footer\"]]],[\"wcs-galactic\",[[1,\"wcs-galactic\",{\"text\":[1],\"show\":[32]}]]],[\"wcs-grid-column\",[[1,\"wcs-grid-column\",{\"path\":[1],\"name\":[1],\"sort\":[4],\"sortFn\":[16],\"formatter\":[16],\"sortOrder\":[1025,\"sort-order\"],\"width\":[1],\"customCells\":[4,\"custom-cells\"],\"hidden\":[516],\"cursorPosition\":[16],\"columnPosition\":[2,\"column-position\"],\"setAriaAttribute\":[64]},null,{\"hidden\":[\"parseMyObjectProp\"],\"sortOrder\":[\"sortOrderChange\"]}]]],[\"wcs-grid-custom-cell\",[[1,\"wcs-grid-custom-cell\",{\"columnId\":[1,\"column-id\"],\"rowId\":[8,\"row-id\"]}]]],[\"wcs-header\",[[1,\"wcs-header\",{\"setAriaAttribute\":[64]}]]],[\"wcs-hint\",[[1,\"wcs-hint\",{\"small\":[1540]}]]],[\"wcs-icon\",[[0,\"wcs-icon\",{\"icon\":[1],\"size\":[1],\"setAriaAttribute\":[64]}]]],[\"wcs-list-item\",[[1,\"wcs-list-item\",{\"activated\":[1540]}]]],[\"wcs-list-item-properties\",[[1,\"wcs-list-item-properties\"]]],[\"wcs-list-item-property\",[[1,\"wcs-list-item-property\"]]],[\"wcs-native-select\",[[1,\"wcs-native-select\",{\"size\":[513],\"required\":[4],\"expanded\":[32],\"disabled\":[32],\"setAriaAttribute\":[64],\"updateStyles\":[64]},null,{\"required\":[\"requiredChanged\"]}]]],[\"wcs-nav\",[[1,\"wcs-nav\",{\"setAriaAttribute\":[64]}]]],[\"wcs-nav-item\",[[4,\"wcs-nav-item\",null,[[0,\"keydown\",\"onKeyDown\"]]]]],[\"wcs-progress-radial\",[[1,\"wcs-progress-radial\",{\"size\":[2],\"showLabel\":[4,\"show-label\"],\"value\":[2],\"setAriaAttribute\":[64]}]]],[\"wcs-radio\",[[17,\"wcs-radio\",{\"value\":[1544],\"label\":[1537],\"disabled\":[1540],\"name\":[1025],\"mode\":[513],\"checked\":[32],\"radioTabIndex\":[32],\"updateState\":[64],\"setTabIndex\":[64],\"setAriaAttribute\":[64]}]]],[\"wcs-radio-group\",[[1,\"wcs-radio-group\",{\"value\":[1032],\"name\":[520],\"mode\":[513],\"setAriaAttribute\":[64]},[[0,\"wcsRadioClick\",\"handleRadioClick\"],[0,\"keydown\",\"handleKeyDown\"]],{\"value\":[\"onValueChangeHandler\"],\"name\":[\"updateAllRadioModeAndName\"],\"mode\":[\"updateAllRadioModeAndName\"]}]]],[\"wcs-skeleton-circle\",[[1,\"wcs-skeleton-circle\",{\"animation\":[513],\"radius\":[514]}]]],[\"wcs-skeleton-rectangle\",[[1,\"wcs-skeleton-rectangle\",{\"animation\":[513],\"rounded\":[516],\"height\":[513],\"width\":[513]}]]],[\"wcs-skeleton-text\",[[1,\"wcs-skeleton-text\",{\"animation\":[513],\"height\":[1]}]]],[\"wcs-switch\",[[17,\"wcs-switch\",{\"name\":[1],\"checked\":[516],\"labelAlignment\":[513,\"label-alignment\"],\"disabled\":[516],\"setAriaAttribute\":[64],\"getLabel\":[64]},[[0,\"click\",\"handleHostClick\"]]]]],[\"wcs-tab\",[[1,\"wcs-tab\",{\"header\":[513],\"itemKey\":[8,\"item-key\"]}]]],[\"wcs-tabs\",[[1,\"wcs-tabs\",{\"align\":[513],\"selectedIndex\":[2,\"selected-index\"],\"selectedKey\":[8,\"selected-key\"],\"headersOnly\":[4,\"headers-only\"],\"gutter\":[516],\"description\":[1],\"headers\":[32],\"currentActiveTabIndex\":[32],\"setAriaAttribute\":[64]},[[0,\"tabLoaded\",\"onTabLoaded\"]],{\"selectedIndex\":[\"selectedIndexChanged\"],\"selectedKey\":[\"selectedTabkeyChanged\"]}]]],[\"wcs-tooltip\",[[1,\"wcs-tooltip\",{\"for\":[1],\"position\":[513],\"interactive\":[4],\"maxWidth\":[8,\"max-width\"],\"delay\":[2],\"duration\":[2],\"trigger\":[1],\"theme\":[1],\"content\":[1],\"appendTo\":[1,\"append-to\"],\"hide\":[64],\"show\":[64],\"disable\":[64],\"enable\":[64]},[[8,\"keydown\",\"handleKeyDown\"]],{\"interactive\":[\"updateProps\"],\"position\":[\"updateProps\"],\"maxWidth\":[\"updateProps\"],\"theme\":[\"updateProps\"],\"delay\":[\"updateProps\"],\"duration\":[\"updateProps\"],\"trigger\":[\"updateProps\"],\"content\":[\"updateTippyContent\"]}]]],[\"wcs-progress-bar\",[[1,\"wcs-progress-bar\",{\"size\":[1],\"showLabel\":[4,\"show-label\"],\"value\":[2],\"setAriaAttribute\":[64]}]]],[\"wcs-select_2\",[[4,\"wcs-select-option\",{\"disabled\":[1540],\"selected\":[1540],\"highlighted\":[1540],\"value\":[8],\"chipColor\":[1,\"chip-color\"],\"chipBackgroundColor\":[1,\"chip-background-color\"],\"multiple\":[1540]},[[1,\"mouseup\",\"onMouseUp\"],[0,\"keydown\",\"handleKeydown\"]]],[1,\"wcs-select\",{\"size\":[513],\"value\":[1032],\"placeholder\":[1537],\"disabled\":[1540],\"required\":[4],\"multiple\":[516],\"autocomplete\":[516],\"serverMode\":[516,\"server-mode\"],\"filterFn\":[16],\"chips\":[516],\"name\":[1],\"compareWith\":[16],\"expanded\":[32],\"displayText\":[32],\"focused\":[32],\"showNoResultFoundLabel\":[32],\"autocompleteValue\":[32],\"overlayDirection\":[32],\"open\":[64],\"close\":[64],\"setAriaAttribute\":[64]},[[1,\"mouseup\",\"onMouseUp\"],[8,\"click\",\"onWindowClickEvent\"],[0,\"keydown\",\"onKeyDown\"],[0,\"wcsSelectOptionClick\",\"selectedOptionChanged\"],[0,\"focus\",\"onFocus\"],[2,\"blur\",\"onBlur\"]],{\"value\":[\"onValueChangeHandler\"]}]]],[\"wcs-error_3\",[[1,\"wcs-error\"],[1,\"wcs-form-field\",{\"isError\":[1540,\"is-error\"],\"hasPrefix\":[32],\"hasSuffix\":[32],\"spiedElement\":[32]},null,{\"isError\":[\"isErrorChange\"]}],[1,\"wcs-label\",{\"required\":[516],\"setAriaAttribute\":[64]}]]],[\"wcs-checkbox\",[[17,\"wcs-checkbox\",{\"name\":[1],\"indeterminate\":[1540],\"checked\":[1540],\"labelAlignment\":[1537,\"label-alignment\"],\"disabled\":[516],\"setAriaAttribute\":[64],\"getLabel\":[64]},[[0,\"click\",\"handleHostClick\"]]]]],[\"wcs-mat-icon\",[[1,\"wcs-mat-icon\",{\"icon\":[1],\"size\":[1],\"family\":[1],\"setAriaAttribute\":[64]}]]],[\"wcs-button_2\",[[17,\"wcs-button\",{\"type\":[1025],\"href\":[1],\"target\":[1],\"disabled\":[516],\"ripple\":[4],\"size\":[513],\"shape\":[513],\"mode\":[513],\"loading\":[1540],\"setAriaAttribute\":[64]},[[0,\"click\",\"onClick\"]],{\"ripple\":[\"onRippleChange\"]}],[1,\"wcs-spinner\",{\"mode\":[513]}]]]]"), options);
+  return bootstrapLazy(JSON.parse("[[\"wcs-editable-field\",[[1,\"wcs-editable-field\",{\"type\":[1],\"label\":[1],\"readonly\":[516],\"value\":[1032],\"validateFn\":[16],\"formatFn\":[16],\"errorMsg\":[1,\"error-msg\"],\"size\":[513],\"currentState\":[32],\"isError\":[32]},[[8,\"click\",\"onWindowClickEvent\"]],{\"value\":[\"onValueChange\"]}]]],[\"wcs-grid-pagination\",[[1,\"wcs-grid-pagination\",{\"availablePageSizes\":[16],\"currentPage\":[1026,\"current-page\"],\"pageSize\":[2,\"page-size\"],\"itemsCount\":[2,\"items-count\"],\"pageCount\":[2,\"page-count\"],\"setAriaAttribute\":[64]}]]],[\"wcs-alert-drawer\",[[1,\"wcs-alert-drawer\",{\"position\":[513],\"timeout\":[2],\"showProgressBar\":[4,\"show-progress-bar\"],\"show\":[64]}]]],[\"wcs-horizontal-stepper\",[[1,\"wcs-horizontal-stepper\",{\"currentStep\":[1026,\"current-step\"],\"steps\":[16],\"mode\":[1],\"checkOnComplete\":[516,\"check-on-complete\"],\"internalCurrentStepIndex\":[32],\"previous\":[64],\"next\":[64]},null,{\"currentStep\":[\"onCurrentStepChange\"]}]]],[\"wcs-breadcrumb\",[[1,\"wcs-breadcrumb\",{\"maxItems\":[2,\"max-items\"],\"itemsBeforeCollapse\":[2,\"items-before-collapse\"],\"itemsAfterCollapse\":[2,\"items-after-collapse\"],\"ariaLabelExpandButton\":[1,\"aria-label-expand-button\"],\"showHiddenItems\":[32],\"setAriaAttribute\":[64]},null,{\"maxItems\":[\"handleCollapsePropsChange\"],\"itemsBeforeCollapse\":[\"handleCollapsePropsChange\"],\"itemsAfterCollapse\":[\"handleCollapsePropsChange\"],\"ariaLabelExpandButton\":[\"handleAriaLabelExpandBtnChange\"]}]]],[\"wcs-counter\",[[17,\"wcs-counter\",{\"size\":[513],\"label\":[1],\"disabled\":[516],\"min\":[1026],\"max\":[1026],\"step\":[1026],\"value\":[1026],\"displayedValue\":[32],\"setAriaAttribute\":[64]},null,{\"value\":[\"valueChange\"]}]]],[\"wcs-grid\",[[1,\"wcs-grid\",{\"serverMode\":[516,\"server-mode\"],\"data\":[16],\"loading\":[516],\"selectionConfig\":[1,\"selection-config\"],\"selectedItems\":[8,\"selected-items\"],\"wcsGridPaginationId\":[1,\"wcs-grid-pagination-id\"],\"rowIdPath\":[1,\"row-id-path\"],\"rowCssPartsFn\":[16],\"columns\":[32],\"paginationEl\":[32],\"rows\":[32],\"cursorPosition\":[32],\"focusFirstCell\":[64],\"setAriaAttribute\":[64]},[[0,\"focus\",\"onFocus\"],[0,\"blur\",\"onBlur\"],[0,\"wcsHiddenChange\",\"onHiddenColumnChange\"],[0,\"keydown\",\"onKeyDown\"],[1,\"mousedown\",\"onClick\"],[0,\"wcsSortChange\",\"sortChangeEventHandler\"],[0,\"wcsGridPaginationChange\",\"paginationChangeEventHandler\"],[8,\"wcsGridPaginationChange\",\"paginationChangeEventHandlerOutside\"]],{\"cursorPosition\":[\"onCursorPositionChange\"],\"data\":[\"onDataChange\"],\"selectedItems\":[\"onSelectedItemsPropertyChange\"]}]]],[\"wcs-modal\",[[4,\"wcs-modal\",{\"withoutBackdrop\":[516,\"without-backdrop\"],\"show\":[1540],\"showCloseButton\":[516,\"show-close-button\"],\"closeButtonAriaLabel\":[1,\"close-button-aria-label\"],\"size\":[1],\"hideActions\":[516,\"hide-actions\"],\"modalTriggerControlsId\":[1,\"modal-trigger-controls-id\"],\"initialFocusElementId\":[1,\"initial-focus-element-id\"],\"disableAutoFocus\":[516,\"disable-auto-focus\"],\"setAriaAttribute\":[64]},[[4,\"keydown\",\"onKeyDown\"]],{\"show\":[\"onShowChange\"]}]]],[\"wcs-dropdown\",[[17,\"wcs-dropdown\",{\"noArrow\":[516,\"no-arrow\"],\"mode\":[1],\"shape\":[1],\"size\":[1],\"disabled\":[516],\"placement\":[1],\"expanded\":[32],\"setAriaAttribute\":[64]},[[0,\"blur\",\"onBlur\"],[8,\"click\",\"onWindowClickEvent\"],[0,\"wcsDropdownItemClick\",\"dropdownItemClick\"],[0,\"keydown\",\"onKeyDown\"]],{\"placement\":[\"placementChange\"]}]]],[\"wcs-galactic-menu\",[[1,\"wcs-galactic-menu\",{\"text\":[1],\"showPopoverMenu\":[32],\"setAriaAttribute\":[64]},[[8,\"click\",\"onWindowClickEvent\"],[0,\"keydown\",\"onKeyDown\"]]]]],[\"wcs-input\",[[17,\"wcs-input\",{\"fireFocusEvents\":[4,\"fire-focus-events\"],\"accept\":[1],\"autocapitalize\":[1],\"autocomplete\":[1],\"autocorrect\":[1],\"autofocus\":[4],\"debounce\":[2],\"prefixLabel\":[1,\"prefix-label\"],\"suffixLabel\":[1,\"suffix-label\"],\"disabled\":[516],\"enterkeyhint\":[1],\"size\":[513],\"icon\":[1],\"inputmode\":[1],\"max\":[1],\"maxlength\":[2],\"min\":[1],\"minlength\":[2],\"multiple\":[516],\"name\":[1],\"hidePasswordButtonAriaLabel\":[1,\"hide-password-button-aria-label\"],\"showPasswordButtonAriaLabel\":[1,\"show-password-button-aria-label\"],\"pattern\":[1],\"placeholder\":[1],\"readonly\":[516],\"required\":[516],\"spellcheck\":[4],\"state\":[513],\"step\":[1],\"type\":[1],\"value\":[1032],\"passwordReveal\":[32],\"setBlur\":[64],\"getInputElement\":[64],\"setAriaAttribute\":[64]},null,{\"debounce\":[\"debounceChanged\"],\"passwordReveal\":[\"onPasswordRevealChange\"]}]]],[\"wcs-textarea\",[[17,\"wcs-textarea\",{\"fireFocusEvents\":[4,\"fire-focus-events\"],\"autocapitalize\":[1],\"autofocus\":[4],\"debounce\":[2],\"disabled\":[516],\"icon\":[1],\"inputmode\":[1],\"enterkeyhint\":[1],\"maxlength\":[2],\"minlength\":[2],\"name\":[1],\"placeholder\":[1],\"readonly\":[516],\"required\":[516],\"spellcheck\":[4],\"state\":[513],\"cols\":[2],\"rows\":[2],\"wrap\":[1],\"autoGrow\":[516,\"auto-grow\"],\"value\":[1025],\"resize\":[513],\"setAriaAttribute\":[64],\"fitContent\":[64],\"setBlur\":[64],\"getInputElement\":[64]},null,{\"debounce\":[\"debounceChanged\"],\"value\":[\"valueChanged\"]}]]],[\"wcs-accordion\",[[1,\"wcs-accordion\",{\"hideActionText\":[516,\"hide-action-text\"],\"highlight\":[516],\"groupContentWithHeader\":[516,\"group-content-with-header\"]},[[0,\"wcsOpenChange\",\"wcsOpenChangeHandler\"]],{\"hideActionText\":[\"updateHideActiontextOnPanel\"],\"highlight\":[\"updateHighlightOnPanel\"],\"groupContentWithHeader\":[\"updateGroupContentWithHeader\"]}]]],[\"wcs-accordion-content\",[[1,\"wcs-accordion-content\"]]],[\"wcs-accordion-header\",[[1,\"wcs-accordion-header\"]]],[\"wcs-accordion-panel\",[[1,\"wcs-accordion-panel\",{\"open\":[1540],\"hideActionText\":[516,\"hide-action-text\"],\"highlight\":[516],\"groupContentWithHeader\":[516,\"group-content-with-header\"],\"setAriaAttribute\":[64],\"close\":[64]},null,{\"open\":[\"openChange\"]}]]],[\"wcs-action-bar\",[[1,\"wcs-action-bar\",{\"gutter\":[516],\"hasTabs\":[32]}]]],[\"wcs-app\",[[1,\"wcs-app\"]]],[\"wcs-badge\",[[1,\"wcs-badge\",{\"shape\":[1],\"color\":[1],\"size\":[513]}]]],[\"wcs-breadcrumb-item\",[[1,\"wcs-breadcrumb-item\",{\"last\":[4]}]]],[\"wcs-card\",[[1,\"wcs-card\",{\"mode\":[1537],\"orientation\":[513]},null,{\"orientation\":[\"orientationChanged\"]}]]],[\"wcs-card-body\",[[1,\"wcs-card-body\",{\"orientation\":[32],\"setOrientation\":[64]}]]],[\"wcs-card-content\",[[1,\"wcs-card-content\"]]],[\"wcs-card-footer\",[[1,\"wcs-card-footer\"]]],[\"wcs-card-header\",[[1,\"wcs-card-header\"]]],[\"wcs-card-media\",[[1,\"wcs-card-media\",{\"orientation\":[32],\"setOrientation\":[64]}]]],[\"wcs-com-nav\",[[1,\"wcs-com-nav\",{\"appName\":[1,\"app-name\"],\"mobileMenuOpen\":[32],\"currentActiveSizing\":[32],\"setAriaAttribute\":[64]},[[0,\"wcsClickOnFinalAction\",\"onClickOnFinalAction\"],[8,\"keydown\",\"exitMobileMenuOnKeyDown\"]]]]],[\"wcs-com-nav-category\",[[1,\"wcs-com-nav-category\",{\"label\":[1],\"categoryOpen\":[32],\"currentActiveSizing\":[32],\"setAriaAttribute\":[64],\"close\":[64],\"open\":[64]},[[8,\"click\",\"onWindowClickEvent\"],[8,\"wcsCategoryOpened\",\"onSubmenuOpened\"]]]]],[\"wcs-com-nav-item\",[[1,\"wcs-com-nav-item\",null,[[0,\"click\",\"onClick\"]]]]],[\"wcs-com-nav-submenu\",[[1,\"wcs-com-nav-submenu\",{\"label\":[1],\"panelTitle\":[1,\"panel-title\"],\"panelDescription\":[1,\"panel-description\"],\"menuOpen\":[32],\"currentActiveSizing\":[32],\"setAriaAttribute\":[64],\"close\":[64],\"open\":[64]},[[8,\"click\",\"onWindowClickEvent\"],[8,\"wcsSubmenuOpened\",\"onSubmenuOpened\"],[8,\"keydown\",\"onEscapeKeyDown\"],[0,\"wcsClickOnFinalAction\",\"wcsCategoryItemClickedHandler\"]]]]],[\"wcs-divider\",[[1,\"wcs-divider\"]]],[\"wcs-dropdown-divider\",[[1,\"wcs-dropdown-divider\"]]],[\"wcs-dropdown-header\",[[1,\"wcs-dropdown-header\"]]],[\"wcs-dropdown-item\",[[4,\"wcs-dropdown-item\",null,[[1,\"mouseup\",\"onMouseUp\"],[0,\"keydown\",\"onKeyDown\"]]]]],[\"wcs-field\",[[1,\"wcs-field\"]]],[\"wcs-field-content\",[[1,\"wcs-field-content\"]]],[\"wcs-field-label\",[[1,\"wcs-field-label\"]]],[\"wcs-footer\",[[1,\"wcs-footer\"]]],[\"wcs-galactic\",[[1,\"wcs-galactic\",{\"text\":[1],\"show\":[32]}]]],[\"wcs-grid-column\",[[1,\"wcs-grid-column\",{\"path\":[1],\"name\":[1],\"sort\":[516],\"sortFn\":[16],\"formatter\":[16],\"sortOrder\":[1025,\"sort-order\"],\"width\":[1],\"customCells\":[516,\"custom-cells\"],\"hidden\":[516],\"cursorPosition\":[16],\"columnPosition\":[2,\"column-position\"],\"setAriaAttribute\":[64]},null,{\"hidden\":[\"parseMyObjectProp\"],\"sortOrder\":[\"sortOrderChange\"]}]]],[\"wcs-grid-custom-cell\",[[1,\"wcs-grid-custom-cell\",{\"columnId\":[1,\"column-id\"],\"rowId\":[8,\"row-id\"]}]]],[\"wcs-header\",[[1,\"wcs-header\",{\"setAriaAttribute\":[64]}]]],[\"wcs-hint\",[[1,\"wcs-hint\",{\"small\":[1540]}]]],[\"wcs-icon\",[[0,\"wcs-icon\",{\"icon\":[1],\"size\":[1],\"setAriaAttribute\":[64]}]]],[\"wcs-list-item\",[[1,\"wcs-list-item\",{\"activated\":[1540]}]]],[\"wcs-list-item-properties\",[[1,\"wcs-list-item-properties\"]]],[\"wcs-list-item-property\",[[1,\"wcs-list-item-property\"]]],[\"wcs-native-select\",[[1,\"wcs-native-select\",{\"size\":[513],\"required\":[516],\"expanded\":[32],\"disabled\":[32],\"setAriaAttribute\":[64],\"updateStyles\":[64]},null,{\"required\":[\"requiredChanged\"]}]]],[\"wcs-nav\",[[1,\"wcs-nav\",{\"setAriaAttribute\":[64]}]]],[\"wcs-nav-item\",[[4,\"wcs-nav-item\",null,[[0,\"keydown\",\"onKeyDown\"]]]]],[\"wcs-progress-radial\",[[1,\"wcs-progress-radial\",{\"size\":[2],\"showLabel\":[516,\"show-label\"],\"value\":[2],\"setAriaAttribute\":[64]}]]],[\"wcs-radio\",[[17,\"wcs-radio\",{\"value\":[1544],\"label\":[1537],\"disabled\":[1540],\"name\":[1025],\"mode\":[513],\"checked\":[32],\"radioTabIndex\":[32],\"updateState\":[64],\"setTabIndex\":[64],\"setAriaAttribute\":[64]}]]],[\"wcs-radio-group\",[[1,\"wcs-radio-group\",{\"value\":[1032],\"name\":[520],\"mode\":[513],\"setAriaAttribute\":[64]},[[0,\"wcsRadioClick\",\"handleRadioClick\"],[0,\"keydown\",\"handleKeyDown\"]],{\"value\":[\"onValueChangeHandler\"],\"name\":[\"updateAllRadioModeAndName\"],\"mode\":[\"updateAllRadioModeAndName\"]}]]],[\"wcs-skeleton-circle\",[[1,\"wcs-skeleton-circle\",{\"animation\":[513],\"radius\":[514]}]]],[\"wcs-skeleton-rectangle\",[[1,\"wcs-skeleton-rectangle\",{\"animation\":[513],\"rounded\":[516],\"height\":[513],\"width\":[513]}]]],[\"wcs-skeleton-text\",[[1,\"wcs-skeleton-text\",{\"animation\":[513],\"height\":[1]}]]],[\"wcs-switch\",[[17,\"wcs-switch\",{\"name\":[1],\"checked\":[516],\"labelAlignment\":[513,\"label-alignment\"],\"disabled\":[516],\"setAriaAttribute\":[64],\"getLabel\":[64]},[[0,\"click\",\"handleHostClick\"]]]]],[\"wcs-tab\",[[1,\"wcs-tab\",{\"header\":[513],\"itemKey\":[8,\"item-key\"]}]]],[\"wcs-tabs\",[[1,\"wcs-tabs\",{\"align\":[513],\"selectedIndex\":[2,\"selected-index\"],\"selectedKey\":[8,\"selected-key\"],\"headersOnly\":[516,\"headers-only\"],\"gutter\":[516],\"description\":[1],\"mobileOverlayExpanded\":[32],\"mobile\":[32],\"headers\":[32],\"currentActiveTabIndex\":[32],\"setAriaAttribute\":[64]},[[0,\"tabLoaded\",\"onTabLoaded\"],[8,\"click\",\"onWindowClickEvent\"]],{\"selectedIndex\":[\"selectedIndexChanged\"],\"selectedKey\":[\"selectedTabkeyChanged\"],\"mobile\":[\"onMobileChange\"]}]]],[\"wcs-tooltip\",[[1,\"wcs-tooltip\",{\"for\":[1],\"position\":[513],\"interactive\":[516],\"maxWidth\":[8,\"max-width\"],\"delay\":[2],\"duration\":[2],\"trigger\":[1],\"theme\":[1],\"content\":[1],\"appendTo\":[1,\"append-to\"],\"hide\":[64],\"show\":[64],\"disable\":[64],\"enable\":[64]},[[8,\"keydown\",\"handleKeyDown\"]],{\"interactive\":[\"updateProps\"],\"position\":[\"updateProps\"],\"maxWidth\":[\"updateProps\"],\"theme\":[\"updateProps\"],\"delay\":[\"updateProps\"],\"duration\":[\"updateProps\"],\"trigger\":[\"updateProps\"],\"content\":[\"updateTippyContent\"]}]]],[\"wcs-alert\",[[1,\"wcs-alert\",{\"show\":[1540],\"intent\":[513],\"timeout\":[2],\"showProgressBar\":[4,\"show-progress-bar\"]},[[1,\"mouseover\",\"mouseOverHandler\"],[1,\"mouseout\",\"mouseOutHandler\"]]]]],[\"wcs-progress-bar\",[[1,\"wcs-progress-bar\",{\"size\":[1],\"showLabel\":[516,\"show-label\"],\"value\":[2],\"setAriaAttribute\":[64]}]]],[\"wcs-select_2\",[[4,\"wcs-select-option\",{\"disabled\":[1540],\"selected\":[1540],\"highlighted\":[1540],\"value\":[8],\"chipColor\":[1,\"chip-color\"],\"chipBackgroundColor\":[1,\"chip-background-color\"],\"multiple\":[1540]},[[1,\"mouseup\",\"onMouseUp\"],[0,\"keydown\",\"handleKeydown\"]]],[1,\"wcs-select\",{\"size\":[513],\"value\":[1032],\"placeholder\":[1537],\"disabled\":[1540],\"required\":[516],\"multiple\":[516],\"autocomplete\":[516],\"serverMode\":[516,\"server-mode\"],\"filterFn\":[16],\"chips\":[516],\"name\":[1],\"compareWith\":[16],\"expanded\":[32],\"displayText\":[32],\"focused\":[32],\"showNoResultFoundLabel\":[32],\"autocompleteValue\":[32],\"overlayDirection\":[32],\"open\":[64],\"close\":[64],\"setAriaAttribute\":[64]},[[1,\"mouseup\",\"onMouseUp\"],[8,\"click\",\"onWindowClickEvent\"],[0,\"keydown\",\"onKeyDown\"],[0,\"wcsSelectOptionClick\",\"selectedOptionChanged\"],[0,\"focus\",\"onFocus\"],[2,\"blur\",\"onBlur\"]],{\"value\":[\"onValueChangeHandler\"]}]]],[\"wcs-error_3\",[[1,\"wcs-error\"],[1,\"wcs-form-field\",{\"isError\":[1540,\"is-error\"],\"hasPrefix\":[32],\"hasSuffix\":[32],\"spiedElement\":[32]},null,{\"isError\":[\"isErrorChange\"]}],[1,\"wcs-label\",{\"required\":[516],\"setAriaAttribute\":[64]}]]],[\"wcs-checkbox\",[[17,\"wcs-checkbox\",{\"name\":[1],\"indeterminate\":[1540],\"checked\":[1540],\"labelAlignment\":[1537,\"label-alignment\"],\"disabled\":[516],\"setAriaAttribute\":[64],\"getLabel\":[64]},[[0,\"click\",\"handleHostClick\"]]]]],[\"wcs-mat-icon\",[[1,\"wcs-mat-icon\",{\"icon\":[1],\"size\":[1],\"family\":[1],\"setAriaAttribute\":[64]}]]],[\"wcs-button_2\",[[17,\"wcs-button\",{\"type\":[1025],\"href\":[1],\"target\":[1],\"disabled\":[516],\"ripple\":[4],\"size\":[513],\"shape\":[513],\"mode\":[513],\"loading\":[1540],\"setAriaAttribute\":[64]},[[0,\"click\",\"onClick\"]],{\"ripple\":[\"onRippleChange\"]}],[1,\"wcs-spinner\",{\"mode\":[513]}]]]]"), options);
 };
 
 export { defineCustomElements };

package/dist/esm/wcs-accordion-panel.entry.js

@@ -29,7 +29,7 @@ const AccordionPanel = class {
         this.open = false;
     }
     render() {
-        return (h(Host, { key: 'c13006bc732e84e6b20ae5c8fd8592f8d7519563' }, h("button", Object.assign({ key: 'ccd0ad94f0ee440c57493b0036395ca6c8f94d10', "aria-expanded": this.open ? "true" : "false", "aria-controls": "content", class: "header", ref: (el) => this.nativeButton = el, onClick: () => this.open = !this.open }, this.inheritedAttributes), h("slot", { key: '0654ba3be0d8d3236b80e5fe0faddcd02650ad11', name: "header" }), h("span", { key: 'a9701540c7fc9ed4f4646f01fb2543137404258a', class: "header-action" }, !this.hideActionText && (h("span", { key: 'a4a6d0c7cdcda803708f32f0439c877f4bc1d80b' }, this.open ? 'Fermez' : 'Ouvrez')), h(SelectArrow, { key: '1e936a6b0baeefaffda7f6666321ee744a8432e5', up: this.open }))), h("div", { key: 'ac89508a85be3321b32ec45d178ab5219982fea0', class: "content", id: "content" }, h("slot", { key: '9f949b45312bfe203ce69f1bbcc288de4fe0a94e', name: "content" }))));
+        return (h(Host, { key: '72253126a8cf58f763fd07bff54c0cf2c446afdc' }, h("button", Object.assign({ key: '97b70c995180acbd0fcfc97a43ea9208fdc464ff', "aria-expanded": this.open ? "true" : "false", "aria-controls": "content", class: "header", ref: (el) => this.nativeButton = el, onClick: () => this.open = !this.open }, this.inheritedAttributes), h("slot", { key: '1b2d8ad5d8ee9a30f5e3d90aad3888f2061cfab8', name: "header" }), h("span", { key: '27867e5c690c771735f63115661e2e4949aac3f3', class: "header-action" }, !this.hideActionText && (h("span", { key: '3ca56e1a94f8366117bb3cdeabeab8ee6ead8da8' }, this.open ? 'Fermez' : 'Ouvrez')), h(SelectArrow, { key: 'eddb7be148606307d13b785aae423b72410495c3', up: this.open }))), h("div", { key: '2be057b4461c0c969fd4285509dab6514487edb6', class: "content", id: "content" }, h("slot", { key: '5be6f3677c52dde4f2f64058d1a378e455da3d27', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/wcs-accordion-panel.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-accordion-panel.entry.js","mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,khJAAkhJ,CAAC;AAC7iJ,gCAAe,iBAAiB;;ACehC,MAAM,yBAAyB,GAAG,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;MAqC3C,cAAc;;;;QAGf,wBAAmB,GAAyB,EAAE,CAAC;oBAEV,KAAK;8BAMD,KAAK;yBAOV,KAAK;sCAOQ,KAAK;;IAK9D,UAAU,CAAC,QAAiB;QACxB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACrC;IAED,iBAAiB;QACb,IAAI,CAAC,mBAAmB,mCACjB,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,GAC9B,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,yBAAyB,CAAC,CAC3D,CAAC;KACL;IAGD,MAAM,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;QAC5E,oBAAoB,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;KACxD;IAGD,MAAM,KAAK;QACP,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACrB;IAED,MAAM;QAIF,QACI,EAAC,IAAI,uDACD,8FAAuB,IAAI,CAAC,IAAI,GAAG,MAAM,GAAE,OAAO,mBAC5B,SAAS,EACvB,KAAK,EAAC,QAAQ,EACd,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,YAAY,GAAG,EAAE,EACnC,OAAO,EAAE,MAAM,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,IACjC,IAAI,CAAC,mBAAmB,GAChC,6DAAM,IAAI,EAAC,QAAQ,GAAE,EACrB,6DAAM,KAAK,EAAC,eAAe,IACtB,CAAC,IAAI,CAAC,cAAc,KACjB,+DAAO,IAAI,CAAC,IAAI,GAAG,QAAQ,GAAG,QAAQ,CAAQ,CAAC,EAEnD,EAAC,WAAW,qDAAC,EAAE,EAAE,IAAI,CAAC,IAAI,GAAG,CAC1B,CACF,EACT,4DAAK,KAAK,EAAC,SAAS,EAAC,EAAE,EAAC,SAAS,IAC7B,6DAAM,IAAI,EAAC,SAAS,GAAE,CACpB,CACH,EACT;KACL;;;;;;;;;;","names":[],"sources":["src/components/accordion-panel/accordion-panel.scss?tag=wcs-accordion-panel&encapsulation=shadow","src/components/accordion-panel/accordion-panel.tsx"],"sourcesContent":["@mixin accordion-panel-focus {\n    outline: var(--wcs-accordion-panel-border-width-focus) var(--wcs-accordion-panel-border-style-focus) var(--wcs-accordion-panel-border-color-focus);\n}\n\n:host {\n    display: flex;\n    flex-direction: column;\n    cursor: pointer;\n\n    --wcs-accordion-panel-color-default: var(--wcs-semantic-color-text-primary);\n    --wcs-accordion-panel-color-highlight: var(--wcs-semantic-color-text-primary);\n    --wcs-accordion-panel-color-hover: var(--wcs-semantic-color-text-primary);\n    --wcs-accordion-panel-color-press: var(--wcs-semantic-color-text-primary);\n    --wcs-accordion-panel-action-color-default: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-accordion-panel-action-color-highlight: var(--wcs-semantic-color-foreground-action-secondary-press);\n    --wcs-accordion-panel-action-color-hover: var(--wcs-semantic-color-foreground-action-secondary-hover);\n    --wcs-accordion-panel-action-color-press: var(--wcs-semantic-color-foreground-action-secondary-press);\n    --wcs-accordion-panel-background-color-default: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-accordion-panel-background-color-highlight: var(--wcs-semantic-color-background-action-secondary-press);\n    --wcs-accordion-panel-background-color-hover: var(--wcs-semantic-color-background-action-secondary-hover);\n    --wcs-accordion-panel-background-color-press: var(--wcs-semantic-color-background-action-secondary-press);\n\n    --wcs-accordion-panel-header-font-weight: var(--wcs-semantic-font-weight-medium);\n    --wcs-accordion-panel-header-font-size: var(--wcs-semantic-font-size-heading-6);\n    --wcs-accordion-panel-header-gap: calc(3 * var(--wcs-semantic-spacing-base));\n    --wcs-accordion-panel-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-accordion-panel-border-radius-open: var(--wcs-accordion-panel-border-radius) var(--wcs-accordion-panel-border-radius) 0 0;\n    --wcs-accordion-panel-padding-vertical: var(--wcs-semantic-spacing-large);\n    --wcs-accordion-panel-padding-horizontal: calc(var(--wcs-semantic-spacing-base) * 3);\n\n    --wcs-accordion-panel-header-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-accordion-panel-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-accordion-panel-border-width-focus: var(--wcs-semantic-border-width-large);\n    --wcs-accordion-panel-border-color: var(--wcs-semantic-color-border-secondary);\n\n    --wcs-accordion-panel-border-color-focus: var(--wcs-semantic-color-border-focus-base);\n    --wcs-accordion-panel-border-style-focus: var(--wcs-semantic-border-style-focus-base);\n\n    --wcs-accordion-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    border: var(--wcs-accordion-panel-border-width) solid var(--wcs-accordion-panel-border-color);\n    border-radius: var(--wcs-accordion-panel-border-radius);\n\n    .header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: var(--wcs-accordion-panel-header-gap);\n        padding: var(--wcs-accordion-panel-padding-vertical) var(--wcs-accordion-panel-padding-horizontal);\n        border-radius: var(--wcs-accordion-panel-border-radius);\n        font-weight: var(--wcs-accordion-panel-header-font-weight);\n        // TODO replace px to rem\n        font-size: var(--wcs-accordion-panel-header-font-size);\n        font-family: var(--wcs-font-sans-serif);\n        color: var(--wcs-accordion-panel-color-default);\n        background-color: var(--wcs-accordion-panel-background-color-default);\n        border: none;\n\n        transition: background-color var(--wcs-accordion-transition-duration);\n\n        @media (forced-colors: active) {\n            // for WHCM\n            border: var(--wcs-accordion-panel-header-border-width) solid ButtonBorder;\n        }\n        &:focus-visible {\n            @include accordion-panel-focus;\n        }\n\n        &:hover {\n            cursor: pointer;\n\n            color: var(--wcs-accordion-panel-color-hover);\n            background-color: var(--wcs-accordion-panel-background-color-hover);\n\n            .header-action {\n                color: var(--wcs-accordion-panel-action-color-hover);\n\n                .arrow {\n                    fill: var(--wcs-accordion-panel-action-color-hover);\n                }\n            }\n        }\n\n        &:active {\n            background-color: var(--wcs-accordion-panel-background-color-press);\n        }\n    }\n\n    .header-action {\n        display: flex;\n        align-items: center;\n        user-select: none;\n\n        color: var(--wcs-accordion-panel-action-color-default);\n\n        .arrow {\n            fill: var(--wcs-accordion-panel-action-color-default);\n        }\n    }\n\n    .content {\n        display: none;\n    }\n\n}\n\n:host([open]) {\n    margin-bottom: 0;\n\n    .header {\n        border-radius: var(--wcs-accordion-panel-border-radius-open);\n    }\n\n    .content {\n        display: block;\n    }\n\n\n    /* FIXME GroupContentWithHeader is deprecated. Remove this.\n    &:host([group-content-with-header]) {\n        .header {\n            border-radius: var(--wcs-accordion-panel-border-radius-open);\n            padding-bottom: 0;\n        }\n\n        .content {\n            border-radius: 0 0 var(--wcs-accordion-panel-border-radius) var(--wcs-accordion-panel-border-radius);\n            margin-bottom: var(--wcs-);\n            background-color: var(--wcs-accordion-panel-background-color-default);\n        }\n    }\n    */\n\n    &:host([highlight]) {\n        .header {\n            background-color: var(--wcs-accordion-panel-background-color-highlight);\n            color: var(--wcs-accordion-panel-color-highlight);\n        }\n\n        .header-action {\n            color: var(--wcs-accordion-panel-action-color-highlight);\n\n            .arrow {\n                fill: var(--wcs-accordion-panel-action-color-highlight);\n            }\n        }\n\n        /* FIXME GroupContentWithHeader is deprecated. Remove this.\n        &:host([group-content-with-header]) {\n            .content {\n                background-color: var(--wcs-accordion-panel-background-color-highlight);\n                color: var(--wcs-accordion-panel-color-highlight);\n            }\n        }\n        */\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Method,\n    Prop,\n    Watch\n} from '@stencil/core';\nimport { SelectArrow } from '../select/select-arrow';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst ACCORDION_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The accordion-panel is a subcomponent of `wcs-accordion`. It represents every panel of the accordion that can be expanded.\n * \n *\n * @cssprop --wcs-accordion-panel-color-default - Default color of the accordion panel\n * @cssprop --wcs-accordion-panel-color-highlight - Highlight color of the accordion panel\n * @cssprop --wcs-accordion-panel-color-hover - Hover color of the accordion panel\n * @cssprop --wcs-accordion-panel-color-press - Press color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-default - Default action color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-highlight - Highlight action color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-hover - Hovered action color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-press - Pressed action color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-default - Default background color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-highlight - Highlight background color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-hover - Hover background color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-press - Press background color of the accordion panel\n * @cssprop --wcs-accordion-panel-header-font-size - Font size of the accordion panel header\n * @cssprop --wcs-accordion-panel-header-font-weight - Font weight of the accordion panel header\n * @cssprop --wcs-accordion-panel-border-radius - Border radius of the accordion panel\n * @cssprop --wcs-accordion-panel-border-radius-open - Border radius of the open accordion panel\n * @cssprop --wcs-accordion-panel-padding-vertical - Vertical padding of the accordion panel\n * @cssprop --wcs-accordion-panel-padding-horizontal - Horizontal padding of the accordion panel\n * @cssprop --wcs-accordion-panel-header-border-width - Border width of the accordion panel header\n * @cssprop --wcs-accordion-panel-border-width - Border width of the accordion panel\n * @cssprop --wcs-accordion-panel-border-width-focus - Border width of the accordion panel when focused\n * @cssprop --wcs-accordion-panel-border-color - Border color of the accordion panel\n * @cssprop --wcs-accordion-panel-border-color-focus - Border color of the accordion panel when focused\n * @cssprop --wcs-accordion-panel-border-style-focus - Border style of the accordion panel when focused\n * @cssprop --wcs-accordion-transition-duration - Transition duration of the accordion panel\n */\n@Component({\n    tag: 'wcs-accordion-panel',\n    styleUrl: 'accordion-panel.scss',\n    shadow: true\n})\nexport class AccordionPanel implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeButton?: HTMLButtonElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    @Prop({reflect: true, mutable: true}) open = false;\n\n    /**\n     * Specifies whether the component should display the open/close text.\n     * if false, it won't show the open/close text.\n     */\n    @Prop({reflect: true}) hideActionText: boolean = false;\n\n    /**\n     * Specifies whether the component should highlight when open with primary color.\n     * if true, the background color will be the primary color.\n     * if false, the background color will be wcs-light.\n     */\n    @Prop({reflect: true}) highlight: boolean = false;\n\n    /**\n     * Specifies wether the component should group the content with header in one card\n     * if true, there will be only one card with the header and the content\n     * Nothing change when the panel is close\n     */\n    @Prop({reflect: true}) groupContentWithHeader: boolean = false;\n\n    @Event() wcsOpenChange!: EventEmitter<boolean>;\n\n    @Watch('open')\n    openChange(newValue: boolean) {\n        this.wcsOpenChange.emit(newValue);\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, ACCORDION_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeButton, attr, value);\n    }\n\n    @Method()\n    async close() {\n        this.open = false;\n    }\n\n    render() {\n  \n  \n  \n        return (\n            <Host>\n                <button aria-expanded={this.open ? \"true\": \"false\"}\n                        aria-controls=\"content\"\n                        class=\"header\"\n                        ref={(el) => this.nativeButton = el}\n                        onClick={() => this.open = !this.open}\n                        {...this.inheritedAttributes}>\n                    <slot name=\"header\"/>\n                    <span class=\"header-action\">\n                        {!this.hideActionText && (\n                            <span>{this.open ? 'Fermez' : 'Ouvrez'}</span>)\n                        }\n                        <SelectArrow up={this.open}/>\n                    </span>\n                </button>\n                <div class=\"content\" id=\"content\">\n                    <slot name=\"content\"/>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"version":3}
+{"file":"wcs-accordion-panel.entry.js","mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,khJAAkhJ,CAAC;AAC7iJ,gCAAe,iBAAiB;;ACehC,MAAM,yBAAyB,GAAG,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;MAqC3C,cAAc;;;;QAGf,wBAAmB,GAAyB,EAAE,CAAC;oBAED,KAAK;8BAMV,KAAK;yBAOV,KAAK;sCAOQ,KAAK;;IAK9D,UAAU,CAAC,QAAiB;QACxB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACrC;IAED,iBAAiB;QACb,IAAI,CAAC,mBAAmB,mCACjB,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,GAC9B,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,yBAAyB,CAAC,CAC3D,CAAC;KACL;IAGD,MAAM,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;QAC5E,oBAAoB,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;KACxD;IAGD,MAAM,KAAK;QACP,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACrB;IAED,MAAM;QAIF,QACI,EAAC,IAAI,uDACD,8FAAuB,IAAI,CAAC,IAAI,GAAG,MAAM,GAAE,OAAO,mBAC5B,SAAS,EACvB,KAAK,EAAC,QAAQ,EACd,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,YAAY,GAAG,EAAE,EACnC,OAAO,EAAE,MAAM,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,IACjC,IAAI,CAAC,mBAAmB,GAChC,6DAAM,IAAI,EAAC,QAAQ,GAAE,EACrB,6DAAM,KAAK,EAAC,eAAe,IACtB,CAAC,IAAI,CAAC,cAAc,KACjB,+DAAO,IAAI,CAAC,IAAI,GAAG,QAAQ,GAAG,QAAQ,CAAQ,CAAC,EAEnD,EAAC,WAAW,qDAAC,EAAE,EAAE,IAAI,CAAC,IAAI,GAAG,CAC1B,CACF,EACT,4DAAK,KAAK,EAAC,SAAS,EAAC,EAAE,EAAC,SAAS,IAC7B,6DAAM,IAAI,EAAC,SAAS,GAAE,CACpB,CACH,EACT;KACL;;;;;;;;;;","names":[],"sources":["src/components/accordion-panel/accordion-panel.scss?tag=wcs-accordion-panel&encapsulation=shadow","src/components/accordion-panel/accordion-panel.tsx"],"sourcesContent":["@mixin accordion-panel-focus {\n    outline: var(--wcs-accordion-panel-border-width-focus) var(--wcs-accordion-panel-border-style-focus) var(--wcs-accordion-panel-border-color-focus);\n}\n\n:host {\n    display: flex;\n    flex-direction: column;\n    cursor: pointer;\n\n    --wcs-accordion-panel-color-default: var(--wcs-semantic-color-text-primary);\n    --wcs-accordion-panel-color-highlight: var(--wcs-semantic-color-text-primary);\n    --wcs-accordion-panel-color-hover: var(--wcs-semantic-color-text-primary);\n    --wcs-accordion-panel-color-press: var(--wcs-semantic-color-text-primary);\n    --wcs-accordion-panel-action-color-default: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-accordion-panel-action-color-highlight: var(--wcs-semantic-color-foreground-action-secondary-press);\n    --wcs-accordion-panel-action-color-hover: var(--wcs-semantic-color-foreground-action-secondary-hover);\n    --wcs-accordion-panel-action-color-press: var(--wcs-semantic-color-foreground-action-secondary-press);\n    --wcs-accordion-panel-background-color-default: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-accordion-panel-background-color-highlight: var(--wcs-semantic-color-background-action-secondary-press);\n    --wcs-accordion-panel-background-color-hover: var(--wcs-semantic-color-background-action-secondary-hover);\n    --wcs-accordion-panel-background-color-press: var(--wcs-semantic-color-background-action-secondary-press);\n\n    --wcs-accordion-panel-header-font-weight: var(--wcs-semantic-font-weight-medium);\n    --wcs-accordion-panel-header-font-size: var(--wcs-semantic-font-size-heading-6);\n    --wcs-accordion-panel-header-gap: calc(3 * var(--wcs-semantic-spacing-base));\n    --wcs-accordion-panel-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-accordion-panel-border-radius-open: var(--wcs-accordion-panel-border-radius) var(--wcs-accordion-panel-border-radius) 0 0;\n    --wcs-accordion-panel-padding-vertical: var(--wcs-semantic-spacing-large);\n    --wcs-accordion-panel-padding-horizontal: calc(var(--wcs-semantic-spacing-base) * 3);\n\n    --wcs-accordion-panel-header-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-accordion-panel-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-accordion-panel-border-width-focus: var(--wcs-semantic-border-width-large);\n    --wcs-accordion-panel-border-color: var(--wcs-semantic-color-border-secondary);\n\n    --wcs-accordion-panel-border-color-focus: var(--wcs-semantic-color-border-focus-base);\n    --wcs-accordion-panel-border-style-focus: var(--wcs-semantic-border-style-focus-base);\n\n    --wcs-accordion-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    border: var(--wcs-accordion-panel-border-width) solid var(--wcs-accordion-panel-border-color);\n    border-radius: var(--wcs-accordion-panel-border-radius);\n\n    .header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: var(--wcs-accordion-panel-header-gap);\n        padding: var(--wcs-accordion-panel-padding-vertical) var(--wcs-accordion-panel-padding-horizontal);\n        border-radius: var(--wcs-accordion-panel-border-radius);\n        font-weight: var(--wcs-accordion-panel-header-font-weight);\n        // TODO replace px to rem\n        font-size: var(--wcs-accordion-panel-header-font-size);\n        font-family: var(--wcs-font-sans-serif);\n        color: var(--wcs-accordion-panel-color-default);\n        background-color: var(--wcs-accordion-panel-background-color-default);\n        border: none;\n\n        transition: background-color var(--wcs-accordion-transition-duration);\n\n        @media (forced-colors: active) {\n            // for WHCM\n            border: var(--wcs-accordion-panel-header-border-width) solid ButtonBorder;\n        }\n        &:focus-visible {\n            @include accordion-panel-focus;\n        }\n\n        &:hover {\n            cursor: pointer;\n\n            color: var(--wcs-accordion-panel-color-hover);\n            background-color: var(--wcs-accordion-panel-background-color-hover);\n\n            .header-action {\n                color: var(--wcs-accordion-panel-action-color-hover);\n\n                .arrow {\n                    fill: var(--wcs-accordion-panel-action-color-hover);\n                }\n            }\n        }\n\n        &:active {\n            background-color: var(--wcs-accordion-panel-background-color-press);\n        }\n    }\n\n    .header-action {\n        display: flex;\n        align-items: center;\n        user-select: none;\n\n        color: var(--wcs-accordion-panel-action-color-default);\n\n        .arrow {\n            fill: var(--wcs-accordion-panel-action-color-default);\n        }\n    }\n\n    .content {\n        display: none;\n    }\n\n}\n\n:host([open]) {\n    margin-bottom: 0;\n\n    .header {\n        border-radius: var(--wcs-accordion-panel-border-radius-open);\n    }\n\n    .content {\n        display: block;\n    }\n\n\n    /* FIXME GroupContentWithHeader is deprecated. Remove this.\n    &:host([group-content-with-header]) {\n        .header {\n            border-radius: var(--wcs-accordion-panel-border-radius-open);\n            padding-bottom: 0;\n        }\n\n        .content {\n            border-radius: 0 0 var(--wcs-accordion-panel-border-radius) var(--wcs-accordion-panel-border-radius);\n            margin-bottom: var(--wcs-);\n            background-color: var(--wcs-accordion-panel-background-color-default);\n        }\n    }\n    */\n\n    &:host([highlight]) {\n        .header {\n            background-color: var(--wcs-accordion-panel-background-color-highlight);\n            color: var(--wcs-accordion-panel-color-highlight);\n        }\n\n        .header-action {\n            color: var(--wcs-accordion-panel-action-color-highlight);\n\n            .arrow {\n                fill: var(--wcs-accordion-panel-action-color-highlight);\n            }\n        }\n\n        /* FIXME GroupContentWithHeader is deprecated. Remove this.\n        &:host([group-content-with-header]) {\n            .content {\n                background-color: var(--wcs-accordion-panel-background-color-highlight);\n                color: var(--wcs-accordion-panel-color-highlight);\n            }\n        }\n        */\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Method,\n    Prop,\n    Watch\n} from '@stencil/core';\nimport { SelectArrow } from '../select/select-arrow';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst ACCORDION_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The accordion-panel is a subcomponent of `wcs-accordion`. It represents every panel of the accordion that can be expanded.\n * \n *\n * @cssprop --wcs-accordion-panel-color-default - Default color of the accordion panel\n * @cssprop --wcs-accordion-panel-color-highlight - Highlight color of the accordion panel\n * @cssprop --wcs-accordion-panel-color-hover - Hover color of the accordion panel\n * @cssprop --wcs-accordion-panel-color-press - Press color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-default - Default action color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-highlight - Highlight action color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-hover - Hovered action color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-press - Pressed action color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-default - Default background color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-highlight - Highlight background color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-hover - Hover background color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-press - Press background color of the accordion panel\n * @cssprop --wcs-accordion-panel-header-font-size - Font size of the accordion panel header\n * @cssprop --wcs-accordion-panel-header-font-weight - Font weight of the accordion panel header\n * @cssprop --wcs-accordion-panel-border-radius - Border radius of the accordion panel\n * @cssprop --wcs-accordion-panel-border-radius-open - Border radius of the open accordion panel\n * @cssprop --wcs-accordion-panel-padding-vertical - Vertical padding of the accordion panel\n * @cssprop --wcs-accordion-panel-padding-horizontal - Horizontal padding of the accordion panel\n * @cssprop --wcs-accordion-panel-header-border-width - Border width of the accordion panel header\n * @cssprop --wcs-accordion-panel-border-width - Border width of the accordion panel\n * @cssprop --wcs-accordion-panel-border-width-focus - Border width of the accordion panel when focused\n * @cssprop --wcs-accordion-panel-border-color - Border color of the accordion panel\n * @cssprop --wcs-accordion-panel-border-color-focus - Border color of the accordion panel when focused\n * @cssprop --wcs-accordion-panel-border-style-focus - Border style of the accordion panel when focused\n * @cssprop --wcs-accordion-transition-duration - Transition duration of the accordion panel\n */\n@Component({\n    tag: 'wcs-accordion-panel',\n    styleUrl: 'accordion-panel.scss',\n    shadow: true\n})\nexport class AccordionPanel implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeButton?: HTMLButtonElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    @Prop({reflect: true, mutable: true}) open: boolean = false;\n\n    /**\n     * Specifies whether the component should display the open/close text.\n     * if false, it won't show the open/close text.\n     */\n    @Prop({reflect: true}) hideActionText: boolean = false;\n\n    /**\n     * Specifies whether the component should highlight when open with primary color.\n     * if true, the background color will be the primary color.\n     * if false, the background color will be wcs-light.\n     */\n    @Prop({reflect: true}) highlight: boolean = false;\n\n    /**\n     * Specifies wether the component should group the content with header in one card\n     * if true, there will be only one card with the header and the content\n     * Nothing change when the panel is close\n     */\n    @Prop({reflect: true}) groupContentWithHeader: boolean = false;\n\n    @Event() wcsOpenChange!: EventEmitter<boolean>;\n\n    @Watch('open')\n    openChange(newValue: boolean) {\n        this.wcsOpenChange.emit(newValue);\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, ACCORDION_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeButton, attr, value);\n    }\n\n    @Method()\n    async close() {\n        this.open = false;\n    }\n\n    render() {\n  \n  \n  \n        return (\n            <Host>\n                <button aria-expanded={this.open ? \"true\": \"false\"}\n                        aria-controls=\"content\"\n                        class=\"header\"\n                        ref={(el) => this.nativeButton = el}\n                        onClick={() => this.open = !this.open}\n                        {...this.inheritedAttributes}>\n                    <slot name=\"header\"/>\n                    <span class=\"header-action\">\n                        {!this.hideActionText && (\n                            <span>{this.open ? 'Fermez' : 'Ouvrez'}</span>)\n                        }\n                        <SelectArrow up={this.open}/>\n                    </span>\n                </button>\n                <div class=\"content\" id=\"content\">\n                    <slot name=\"content\"/>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/esm/wcs-action-bar.entry.js

@@ -13,7 +13,7 @@ const ActionBar = class {
         this.hasTabs = !!this.el.querySelector('[slot="tabs"]');
     }
     render() {
-        return (h(Host, { key: 'd67394521e0f511ce6c4632ff2ac177920cee7f6' }, h("div", { key: '15e01e65524923776ff1e9a793a84ca395fc9cb6', class: "title-actions", "data-has-tabs": this.hasTabs }, h("h1", { key: '9b260476e27f3702402fccd690f1481cd2b6937a' }, h("slot", { key: '8610b80130c93f2f3b1bbd987d9c3eb8044389ae' })), h("div", { key: '4b8b05c7331d1de0ac889c475de8a675cb4ab96d', class: "actions" }, h("slot", { key: '129ffb87ce43f64a6793606ae5fbca423270bc9f', name: "actions" }))), h("div", { key: '21f236bd1e8cce919d2410f2865531dc85973079', class: "tabs-container" }, h("slot", { key: '4d137643a6576ee3d34d32dd38e63952ecb9171e', name: "tabs" }))));
+        return (h(Host, { key: '4312c81132be4f4db1205a5f0bfae699c26e6436' }, h("div", { key: '746da3288b2092209451cf9014d5b5374bc36d70', class: "title-actions", "data-has-tabs": this.hasTabs }, h("h1", { key: 'e143ac0afe1fe76f2760859ba700d432d9d5756d' }, h("slot", { key: 'f5b7269692fd481a0d9fbc0e873580adfe9d6cc1' })), h("div", { key: '0ef5d4aca6cc88c96d541cd391e04a31ead116ee', class: "actions" }, h("slot", { key: '05364550979377548c2e4c97a21f3b52b27b457f', name: "actions" }))), h("div", { key: '613a7c98d9e9777f900e634500e541860a242fbc', class: "tabs-container" }, h("slot", { key: '35b753163a40381873e8fb07eb13fef58c0bcda6', name: "tabs" }))));
     }
     get el() { return getElement(this); }
 };

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

@@ -1 +1 @@
-{"file":"wcs-action-bar.entry.js","mappings":";;AAAA,MAAM,YAAY,GAAG,oxDAAoxD,CAAC;AAC1yD,2BAAe,YAAY;;MCsBd,SAAS;;;;uBAOS,KAAK;;IAEhC,iBAAiB;QACb,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;KAC3D;IAED,MAAM;QACF,QACI,EAAC,IAAI,uDACD,4DAAK,KAAK,EAAC,eAAe,mBAAgB,IAAI,CAAC,OAAO,IAClD,6DACI,8DAAa,CACZ,EACL,4DAAK,KAAK,EAAC,SAAS,IAChB,6DAAM,IAAI,EAAC,SAAS,GAAQ,CAC1B,CACJ,EACN,4DAAK,KAAK,EAAC,gBAAgB,IACvB,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACvB,CACH,EACT;KACL;;;;;;;","names":[],"sources":["src/components/action-bar/action-bar.scss?tag=wcs-action-bar&encapsulation=shadow","src/components/action-bar/action-bar.tsx"],"sourcesContent":[":host {\n    --wcs-action-bar-background-color: var(--wcs-semantic-color-background-surface-primary);\n    --wcs-action-bar-gap: var(--wcs-semantic-spacing-small);\n    --wcs-action-bar-gap-actions: calc(4 * var(--wcs-semantic-spacing-base));\n    --wcs-action-bar-min-height: calc(10 * var(--wcs-semantic-size-base));\n    --wcs-action-bar-padding-horizontal: var(--wcs-semantic-spacing-large);\n    --wcs-action-bar-padding-vertical: var(--wcs-semantic-spacing-base);\n\n    --wcs-action-bar-tabs-margin-top: calc(1.5 * var(--wcs-semantic-spacing-base));\n\n    --wcs-action-bar-title-font-size: var(--wcs-semantic-font-size-heading-4);\n    --wcs-action-bar-title-font-weight: var(--wcs-semantic-font-weight-heavy);\n    --wcs-action-bar-title-color: var(--wcs-semantic-color-text-primary);\n\n    --wcs-tabs-gutter-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-tabs-gutter-background-color: var(--wcs-semantic-color-border-secondary);\n\n    padding: 0 var(--wcs-action-bar-padding-horizontal);\n    min-height: var(--wcs-action-bar-min-height);\n    background-color: var(--wcs-action-bar-background-color);\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: var(--wcs-action-bar-gap);\n\n    .title-actions {\n        padding-top: var(--wcs-action-bar-padding-vertical);\n        padding-bottom: var(--wcs-action-bar-padding-vertical);\n        gap: var(--wcs-action-bar-gap-actions);\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        justify-content: space-between;\n        flex-grow: 1;\n    }\n\n    .title-actions[data-has-tabs] {\n        padding-bottom: 0;\n    }\n\n    h1 {\n        font-size: var(--wcs-action-bar-title-font-size);\n        font-weight: var(--wcs-action-bar-title-font-weight);\n        line-height: 1.25;\n        margin: 0;\n        color: var(--wcs-action-bar-title-color);\n    }\n}\n\n:host([gutter]) {\n    border-bottom: solid var(--wcs-tabs-gutter-border-width) var(--wcs-tabs-gutter-background-color);\n}\n\n::slotted([slot=actions]) {\n    display: flex;\n}\n\n::slotted([slot=tabs]) {\n    margin-top: var(--wcs-action-bar-tabs-margin-top);\n}\n","import { Component, ComponentInterface, Element, h, Host, Prop, State } from '@stencil/core';\n\n/**\n * The action-bar component is a group of elements appearing across the top of all pages on a business application.\n * \n * @cssprop --wcs-action-bar-background-color - Background color of the action bar\n * @cssprop --wcs-action-bar-gap - Gap between the title and the tabs\n * @cssprop --wcs-action-bar-gap-actions - Gap between the title and the actions\n * @cssprop --wcs-action-bar-min-height - Minimum height of the action bar\n * @cssprop --wcs-action-bar-padding-horizontal - Horizontal padding of the action bar\n * @cssprop --wcs-action-bar-padding-vertical - Vertical padding of the action bar\n * @cssprop --wcs-action-bar-tabs-margin-top - Margin top of the tabs when slotted\n * @cssprop --wcs-action-bar-title-font-size - Font size of the title\n * @cssprop --wcs-action-bar-title-font-weight - Font weight of the title\n * @cssprop --wcs-action-bar-title-color - Color of the title\n * @cssprop --wcs-tabs-gutter-border-width - Border width of the gutter\n * @cssprop --wcs-tabs-gutter-background-color - Background color of the gutter\n */\n@Component({\n    tag: 'wcs-action-bar',\n    styleUrl: 'action-bar.scss',\n    shadow: true\n})\nexport class ActionBar implements ComponentInterface {\n    @Element() private el: HTMLWcsActionBarElement;\n    /**\n     * Determines if the action bar should have a border at the bottom.\n     * You should not use this property if a gutter is already present on tabs\n     */\n    @Prop({ reflect: true }) gutter: boolean;\n    @State() private hasTabs = false;\n\n    componentWillLoad(): Promise<void> | void {\n        this.hasTabs = !!this.el.querySelector('[slot=\"tabs\"]');\n    }\n\n    render() {\n        return (\n            <Host>\n                <div class=\"title-actions\" data-has-tabs={this.hasTabs}>\n                    <h1>\n                        <slot></slot>\n                    </h1>\n                    <div class=\"actions\">\n                        <slot name=\"actions\"></slot>\n                    </div>\n                </div>\n                <div class=\"tabs-container\">\n                    <slot name=\"tabs\"></slot>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"version":3}
+{"file":"wcs-action-bar.entry.js","mappings":";;AAAA,MAAM,YAAY,GAAG,oxDAAoxD,CAAC;AAC1yD,2BAAe,YAAY;;MCsBd,SAAS;;;;uBAOkB,KAAK;;IAEzC,iBAAiB;QACb,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;KAC3D;IAED,MAAM;QACF,QACI,EAAC,IAAI,uDACD,4DAAK,KAAK,EAAC,eAAe,mBAAgB,IAAI,CAAC,OAAO,IAClD,6DACI,8DAAa,CACZ,EACL,4DAAK,KAAK,EAAC,SAAS,IAChB,6DAAM,IAAI,EAAC,SAAS,GAAQ,CAC1B,CACJ,EACN,4DAAK,KAAK,EAAC,gBAAgB,IACvB,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACvB,CACH,EACT;KACL;;;;;;;","names":[],"sources":["src/components/action-bar/action-bar.scss?tag=wcs-action-bar&encapsulation=shadow","src/components/action-bar/action-bar.tsx"],"sourcesContent":[":host {\n    --wcs-action-bar-background-color: var(--wcs-semantic-color-background-surface-primary);\n    --wcs-action-bar-gap: var(--wcs-semantic-spacing-small);\n    --wcs-action-bar-gap-actions: calc(4 * var(--wcs-semantic-spacing-base));\n    --wcs-action-bar-min-height: calc(10 * var(--wcs-semantic-size-base));\n    --wcs-action-bar-padding-horizontal: var(--wcs-semantic-spacing-large);\n    --wcs-action-bar-padding-vertical: var(--wcs-semantic-spacing-base);\n\n    --wcs-action-bar-tabs-margin-top: calc(1.5 * var(--wcs-semantic-spacing-base));\n\n    --wcs-action-bar-title-font-size: var(--wcs-semantic-font-size-heading-4);\n    --wcs-action-bar-title-font-weight: var(--wcs-semantic-font-weight-heavy);\n    --wcs-action-bar-title-color: var(--wcs-semantic-color-text-primary);\n\n    --wcs-tabs-gutter-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-tabs-gutter-background-color: var(--wcs-semantic-color-border-secondary);\n\n    padding: 0 var(--wcs-action-bar-padding-horizontal);\n    min-height: var(--wcs-action-bar-min-height);\n    background-color: var(--wcs-action-bar-background-color);\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: var(--wcs-action-bar-gap);\n\n    .title-actions {\n        padding-top: var(--wcs-action-bar-padding-vertical);\n        padding-bottom: var(--wcs-action-bar-padding-vertical);\n        gap: var(--wcs-action-bar-gap-actions);\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        justify-content: space-between;\n        flex-grow: 1;\n    }\n\n    .title-actions[data-has-tabs] {\n        padding-bottom: 0;\n    }\n\n    h1 {\n        font-size: var(--wcs-action-bar-title-font-size);\n        font-weight: var(--wcs-action-bar-title-font-weight);\n        line-height: 1.25;\n        margin: 0;\n        color: var(--wcs-action-bar-title-color);\n    }\n}\n\n:host([gutter]) {\n    border-bottom: solid var(--wcs-tabs-gutter-border-width) var(--wcs-tabs-gutter-background-color);\n}\n\n::slotted([slot=actions]) {\n    display: flex;\n}\n\n::slotted([slot=tabs]) {\n    margin-top: var(--wcs-action-bar-tabs-margin-top);\n}\n","import { Component, ComponentInterface, Element, h, Host, Prop, State } from '@stencil/core';\n\n/**\n * The action-bar component is a group of elements appearing across the top of all pages on a business application.\n * \n * @cssprop --wcs-action-bar-background-color - Background color of the action bar\n * @cssprop --wcs-action-bar-gap - Gap between the title and the tabs\n * @cssprop --wcs-action-bar-gap-actions - Gap between the title and the actions\n * @cssprop --wcs-action-bar-min-height - Minimum height of the action bar\n * @cssprop --wcs-action-bar-padding-horizontal - Horizontal padding of the action bar\n * @cssprop --wcs-action-bar-padding-vertical - Vertical padding of the action bar\n * @cssprop --wcs-action-bar-tabs-margin-top - Margin top of the tabs when slotted\n * @cssprop --wcs-action-bar-title-font-size - Font size of the title\n * @cssprop --wcs-action-bar-title-font-weight - Font weight of the title\n * @cssprop --wcs-action-bar-title-color - Color of the title\n * @cssprop --wcs-tabs-gutter-border-width - Border width of the gutter\n * @cssprop --wcs-tabs-gutter-background-color - Background color of the gutter\n */\n@Component({\n    tag: 'wcs-action-bar',\n    styleUrl: 'action-bar.scss',\n    shadow: true\n})\nexport class ActionBar implements ComponentInterface {\n    @Element() private el: HTMLWcsActionBarElement;\n    /**\n     * Determines if the action bar should have a border at the bottom.\n     * You should not use this property if a gutter is already present on tabs\n     */\n    @Prop({ reflect: true }) gutter: boolean;\n    @State() private hasTabs: boolean = false;\n\n    componentWillLoad(): Promise<void> | void {\n        this.hasTabs = !!this.el.querySelector('[slot=\"tabs\"]');\n    }\n\n    render() {\n        return (\n            <Host>\n                <div class=\"title-actions\" data-has-tabs={this.hasTabs}>\n                    <h1>\n                        <slot></slot>\n                    </h1>\n                    <div class=\"actions\">\n                        <slot name=\"actions\"></slot>\n                    </div>\n                </div>\n                <div class=\"tabs-container\">\n                    <slot name=\"tabs\"></slot>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"version":3}