wcs-core 7.5.0 → 7.6.0

package/dist/wcs/p-6e7db56e.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["inputCss","WcsInputStyle0","INPUT_INHERITED_ATTRS","Input","this","inputId","inputIds","inheritedAttributes","iconPassword","onInput","ev","input","target","value","wcsInput","emit","onChange","_","wcsChange","nativeInput","onBlur","fireFocusEvents","wcsBlur","onFocus","wcsFocus","debounceChanged","debounceEvent","debounce","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","connectedCallback","document","dispatchEvent","CustomEvent","detail","disconnectedCallback","setBlur","blur","getInputElement","Promise","resolve","setAriaAttribute","attr","setOrRemoveAttribute","getValueAsString","toString","passwordRevealIconClick","passwordReveal","onPasswordRevealChange","render","h","Host","key","disabled","prefixLabel","suffixLabel","class","part","icon","size","ref","accept","autoCapitalize","autocapitalize","autoComplete","autocomplete","autoCorrect","autocorrect","autoFocus","autofocus","enterKeyHint","enterkeyhint","inputMode","inputmode","min","max","minLength","minlength","maxLength","maxlength","multiple","name","pattern","placeholder","readOnly","readonly","required","spellcheck","step","type","title","hidePasswordButtonAriaLabel","showPasswordButtonAriaLabel","onClick"],"sources":["src/components/input/input.scss?tag=wcs-input&encapsulation=shadow","src/components/input/input.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n@import '../../style/placeholder.scss';\n\n:host {\n    --wcs-input-icon-color-default: var(--wcs-semantic-color-foreground-brand);\n    --wcs-input-icon-color-focus: var(--wcs-semantic-color-foreground-brand);\n    --wcs-input-icon-color-disabled: var(--wcs-semantic-color-foreground-disabled);\n\n    --wcs-input-background-color: var(--wcs-semantic-color-background-control-default);\n\n    --wcs-input-border-radius-left: var(--wcs-semantic-border-radius-base); // Overridden from prefix suffix group in form-field\n    --wcs-input-border-radius-right: var(--wcs-semantic-border-radius-base); // Overridden from prefix suffix group in form-field\n\n    --wcs-input-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-input-border-width-focus: var(--wcs-semantic-border-width-large);\n\n    --wcs-input-height-l: var(--wcs-semantic-size-l);\n    --wcs-input-height-m: var(--wcs-semantic-size-m);\n    --wcs-input-height-s: var(--wcs-semantic-size-s);\n    --wcs-input-font-size-l: var(--wcs-semantic-font-size-l);\n    --wcs-input-font-size-m: var(--wcs-semantic-font-size-m);\n    --wcs-input-font-size-s: var(--wcs-semantic-font-size-s);\n\n    --wcs-input-prefix-suffix-background-color: var(--wcs-semantic-color-background-surface-accent-lighter);\n    --wcs-input-prefix-suffix-color: var(--wcs-semantic-color-foreground-on-accent);\n    --wcs-input-prefix-suffix-color-disabled: var(--wcs-semantic-color-text-disabled);\n    --wcs-input-prefix-suffix-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-input-border-style-default: solid;\n    --wcs-input-border-style-focus: var(--wcs-semantic-border-style-focus-control);\n\n    --wcs-input-border-color-default: var(--wcs-semantic-color-border-primary);\n    --wcs-input-border-color-disabled: var(--wcs-semantic-color-border-disabled);\n    --wcs-input-border-color-focus: var(--wcs-semantic-color-border-control-focus);\n    --wcs-input-reveal-password-button-border-color-focus: var(--wcs-semantic-color-border-focus-base);\n    --wcs-input-border-color-error: var(--wcs-semantic-color-border-critical);\n\n    --wcs-input-value-color: var(--wcs-semantic-color-text-primary);\n    --wcs-input-value-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-input-placeholder-color: var(--wcs-semantic-color-text-tertiary);\n    --wcs-input-placeholder-font-weight: var(--wcs-semantic-font-weight-roman);\n    --wcs-input-placeholder-font-style: var(--wcs-semantic-font-style-control-placeholder);\n\n    --wcs-input-text-color-disabled: var(--wcs-semantic-color-text-disabled);\n\n    --wcs-input-min-height: var(--wcs-semantic-size-s);\n    --wcs-input-padding-horizontal-s: calc(1.5 * var(--wcs-semantic-spacing-base));\n    --wcs-input-padding-horizontal-m: var(--wcs-semantic-spacing-large);\n    --wcs-input-padding-horizontal-l: var(--wcs-semantic-spacing-large);\n    --wcs-input-gap: var(--wcs-semantic-spacing-base);\n\n    // Default\n    --wcs-input-host-height: var(--wcs-input-height-m);\n    --wcs-input-font-size: var(--wcs-input-font-size-m);\n    padding-left: calc(var(--wcs-input-padding-horizontal-m));\n    padding-right: calc(var(--wcs-input-padding-horizontal-m));\n\n    display: flex;\n    width: 100%;\n    height: var(--wcs-input-host-height);\n    box-sizing: border-box;\n    border-radius: var(--wcs-input-border-radius-left) var(--wcs-input-border-radius-right) var(--wcs-input-border-radius-right) var(--wcs-input-border-radius-left);\n    background-color: var(--wcs-input-background-color);\n    outline: var(--wcs-input-border-style-default) var(--wcs-input-border-width) var(--wcs-input-border-color-default);\n    outline-offset: calc(var(--wcs-input-border-width) * -1);\n    background-clip: padding-box;\n\n    gap: var(--wcs-input-gap);\n\n    input {\n        overflow: hidden;\n        height: var(--wcs-input-host-height);\n        width: 100%;\n        padding: 0; // Reset padding from user agent stylesheet, it's the container that will handle padding\n        background-color: transparent;\n        font-family: var(--wcs-font-sans-serif);\n        color: var(--wcs-input-value-color);\n        font-weight: var(--wcs-input-value-font-weight) !important;\n        border: none;\n        font-size: var(--wcs-input-font-size, 1rem);\n        line-height: 1.5;\n\n        &::placeholder {\n            @include placeholder(var(--wcs-input-placeholder-color), var(--wcs-input-placeholder-font-weight), var(--wcs-input-placeholder-font-style));\n        }\n    }\n\n    input:focus {\n        box-shadow: none;\n        outline: 0;\n    }\n\n    button.toggle_password {\n        background: transparent;\n        border: none;\n        color: inherit;\n\n        cursor: pointer;\n\n\n        &:focus-visible {\n            @include focus-outline(var(--wcs-input-reveal-password-button-border-color-focus), $outline-offset: calc(-2 * var(--wcs-input-border-width-focus)));\n        }\n    }\n\n    .prefix, .suffix {\n        color: var(--wcs-input-prefix-suffix-color);\n        display: flex;\n        white-space: nowrap;\n        align-items: center;\n        font-size: var(--wcs-input-font-size, 1rem);\n        padding: 0 calc(var(--wcs-input-padding-horizontal-m) / 2);\n        font-weight: var(--wcs-input-prefix-suffix-font-weight) !important;\n        background-color: var(--wcs-input-prefix-suffix-background-color);\n    }\n\n    .prefix {\n        border-radius: var(--wcs-internal-input-border-radius-left) 0 0 var(--wcs-internal-input-border-radius-left);\n    }\n\n    .suffix {\n        border-radius: 0 var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-right) 0;\n    }\n\n    wcs-mat-icon {\n        color: var(--wcs-input-icon-color-default);\n    }\n}\n\n:host([size=l]) {\n    --wcs-input-host-height: var(--wcs-input-height-l);\n    --wcs-input-font-size: var(--wcs-input-font-size-l);\n\n    padding-left: calc(var(--wcs-input-padding-horizontal-l));\n    padding-right: calc(var(--wcs-input-padding-horizontal-l));\n}\n\n:host([size=m]) { // Default\n    --wcs-input-host-height: var(--wcs-input-height-m);\n    --wcs-input-font-size: var(--wcs-input-font-size-m);\n\n    padding-left: calc(var(--wcs-input-padding-horizontal-m));\n    padding-right: calc(var(--wcs-input-padding-horizontal-m));\n}\n\n:host([size=s]) {\n    --wcs-input-host-height: var(--wcs-input-height-s);\n    --wcs-input-font-size: var(--wcs-input-font-size-s);\n\n    padding-left: calc(var(--wcs-input-padding-horizontal-s));\n    padding-right: calc(var(--wcs-input-padding-horizontal-s));\n}\n\n:host([state=error]) {\n    outline-color: var(--wcs-input-border-color-error) !important;\n}\n\n:host([data-has-prefix]) {\n    padding-left: 0;\n}\n\n:host([data-has-suffix]) {\n    padding-right: 0;\n}\n\n:host([disabled]) {\n    cursor: not-allowed; // padding is handled by the container, so we need to set cursor not allowed on it\n    outline: var(--wcs-input-border-style-default) var(--wcs-input-border-width) var(--wcs-input-border-color-disabled);\n    --wcs-input-background-color: var(--wcs-semantic-color-background-control-disabled);\n\n    input {\n        cursor: not-allowed;\n        color: var(--wcs-input-text-color-disabled);\n\n        &::placeholder {\n            color: var(--wcs-input-text-color-disabled);\n        }\n    }\n\n    .prefix, .suffix {\n        color: var(--wcs-input-prefix-suffix-color-disabled);\n        cursor: text; // reset cursor to text for prefix and suffix, to be able to select text\n    }\n\n    wcs-mat-icon {\n        color: var(--wcs-input-icon-color-disabled);\n        cursor: not-allowed;\n    }\n}\n\n:host([readonly]) {\n    --wcs-input-background-color: var(--wcs-semantic-color-background-control-readonly);\n    --wcs-input-border-width: 0;\n}\n\n:host(:focus-within) {\n    outline: var(--wcs-input-border-style-focus) var(--wcs-input-border-width-focus) var(--wcs-input-border-color-focus);\n    outline-offset: calc(var(--wcs-input-border-width-focus) * -1);\n\n    wcs-mat-icon {\n        color: var(--wcs-input-icon-color-focus);\n    }\n}\n","import {\n    Build,\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Method,\n    Prop,\n    State,\n    Watch\n} from '@stencil/core';\nimport {\n    debounceEvent,\n    inheritAriaAttributes,\n    inheritAttributes,\n    setOrRemoveAttribute\n} from '../../utils/helpers';\nimport {\n    AutocompleteTypes,\n    InputChangeEventDetail,\n    TextFieldTypes,\n    WcsInputSize,\n    WcsInputAutocorrect,\n    WcsInputEnterKeyHint,\n    WcsInputInputMode,\n    WcsInputState\n} from './input-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst INPUT_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The input component is a form control that accepts a single line of text.\n * Implementation mainly inspired from Ionic Input Component.\n *\n * ## Accessibility guidelines 💡\n * > - If you use wcs-input 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-input-icon-color-default - default icon color when the input is not focused\n * @cssprop --wcs-input-icon-color-focus - icon color when the input is focused\n * @cssprop --wcs-input-icon-color-disabled - icon color when the input is disabled\n *\n * @cssprop --wcs-input-background-color - background color of the input\n *\n * @cssprop --wcs-input-border-radius-left - border radius of the left side of the input\n * @cssprop --wcs-input-border-radius-right - border radius of the right side of the input\n * \n * @cssprop --wcs-input-border-width - border width of the input\n * @cssprop --wcs-input-border-width-focus - border width of the input when focused\n *\n * @cssprop --wcs-input-height-l - large height of the input\n * @cssprop --wcs-input-height-m - medium height of the input\n * @cssprop --wcs-input-height-s - small height of the input\n * @cssprop --wcs-input-font-size-l - large font size of the input\n * @cssprop --wcs-input-font-size-m - medium font size of the input\n * @cssprop --wcs-input-font-size-s - small font size of the input\n *\n * @cssprop --wcs-input-border-style-default - default border style of the input\n * @cssprop --wcs-input-border-style-focus - border style of the input when focused\n * \n * @cssprop --wcs-input-prefix-suffix-background-color - background color of the suffix/prefix\n * @cssprop --wcs-input-prefix-suffix-color - color of the suffix/prefix\n * @cssprop --wcs-input-prefix-suffix-color-disabled - color of the suffix/prefix when the input is disabled\n * @cssprop --wcs-input-prefix-suffix-font-weight - font weight of the suffix/prefix\n *\n * @cssprop --wcs-input-border-color-default - default border color of the input when not focused\n * @cssprop --wcs-input-border-color-disabled - border color of the input when disabled\n * @cssprop --wcs-input-border-color-focus - border color of the input when focused\n * @cssprop --wcs-input-reveal-password-button-border-color-focus - border color of the show/hide password button when focused\n * @cssprop --wcs-input-border-color-error - border color of the input when in error state\n *\n * @cssprop --wcs-input-value-color - color of the input value\n * @cssprop --wcs-input-value-font-weight - font weight of the input value\n * \n * @cssprop --wcs-input-placeholder-color - color of the input placeholder\n * @cssprop --wcs-input-placeholder-font-weight - font weight of the input placeholder\n * @cssprop --wcs-input-placeholder-font-style - font style of the input placeholder\n * \n * @cssprop --wcs-input-text-color-disabled - color of the input when disabled\n *\n * @cssprop --wcs-input-padding-horizontal-s - horizontal padding of the input in small size\n * @cssprop --wcs-input-padding-horizontal-m - horizontal padding of the input in medium size\n * @cssprop --wcs-input-padding-horizontal-l - horizontal padding of the input in large size\n * \n * @cssprop --wcs-input-gap - gap between text input and icon\n */\n@Component({\n    tag: 'wcs-input',\n    styleUrl: 'input.scss',\n    shadow: { delegatesFocus: true },\n})\nexport class Input implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeInput?: HTMLInputElement;\n    private inputId = `wcs-input-${inputIds++}`;\n    private inheritedAttributes: { [k: string]: any } = {};\n    private iconPassword = \"visibility\";\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    @State() private passwordReveal: boolean = false;\n\n    /**\n     * If the value of the type attribute is `\"file\"`, then this attribute will indicate the types of files that the\n     * server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers.\n     */\n    @Prop() accept?: string;\n\n    /**\n     * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n     * Available options: `\"off\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`.\n     */\n    @Prop() autocapitalize = 'off';\n\n    /**\n     * Indicates whether the value of the control can be automatically completed by the browser.\n     */\n    @Prop() autocomplete: AutocompleteTypes = 'off';\n\n    /**\n     * Whether auto correction should be enabled when the user is entering/editing the text value.\n     */\n    @Prop() autocorrect: WcsInputAutocorrect = 'off';\n\n    /**\n     * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n     */\n    @Prop() autofocus: 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     * Prefix displayed before the text field contents. This is not included in the value.\n     */\n    @Prop() prefixLabel: string;\n\n    /**\n     * Suffix displayed after the text field contents. This is not included in the value.\n     */\n    @Prop() suffixLabel: string;\n\n    /**\n     * If `true`, the user cannot interact with the input.\n     */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /**\n     * A hint to the browser for which enter key to display.\n     */\n    @Prop() enterkeyhint?: WcsInputEnterKeyHint;\n\n    /**\n     * Specify the size (height) of the input.\n     */\n    @Prop({reflect: true}) size: WcsInputSize = 'm';\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?: WcsInputInputMode;\n\n    /**\n     * The maximum value, which must not be less than its minimum (min attribute) value.\n     */\n    @Prop() max?: string;\n\n    /**\n     * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute\n     * specifies the maximum number of characters that the user can enter.\n     */\n    @Prop() maxlength?: number;\n\n    /**\n     * The minimum value, which must not be greater than its maximum (max attribute) value.\n     */\n    @Prop() min?: string;\n\n    /**\n     * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute\n     * specifies the minimum number of characters that the user can enter.\n     */\n    @Prop() minlength?: number;\n\n    /**\n     * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to\n     * `\"email\"` or `\"file\"`, otherwise it is ignored.\n     */\n    @Prop({ reflect: true }) multiple?: boolean;\n\n    /**\n     * The name of the control, which is submitted with the form data.\n     */\n    @Prop() name: string = this.inputId;\n\n    @Prop() hidePasswordButtonAriaLabel: string = \"Cacher le mot de passe\";\n    @Prop() showPasswordButtonAriaLabel: string = \"Afficher le mot de passe\";\n\n    /**\n     * A regular expression that the value is checked against. The pattern must match the entire value, not just some\n     * subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value\n     * of the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"date\"`, or `\"password\"`, otherwise\n     * it is ignored. When the type attribute is `\"date\"`, `pattern` will only be used in browsers that do not support\n     * the `\"date\"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for\n     * more information.\n     */\n    @Prop() pattern?: string;\n\n    /**\n     * Instructional text that shows before the input has a value.\n     */\n    @Prop() placeholder?: string | null;\n\n    /**\n     * If `true`, the user cannot modify the value.\n     */\n    @Prop({ 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 normal state but you can to set it to 'error'\n     * state if the data given by the user is not valid.\n     */\n    @Prop({reflect: true}) state: WcsInputState = 'initial';\n\n    /**\n     * Works with the min and max attributes to limit the increments at which a value can be set.\n     * Possible values are: `\"any\"` or a positive floating point number.\n     */\n    @Prop() step?: string;\n\n    /**\n     * The type of control to display. The default type is text.\n     */\n    @Prop() type: TextFieldTypes = 'text';\n\n    /**\n     * The value of the input.\n     */\n    @Prop({mutable: true}) value?: string | number | null = '';\n\n    /**\n     * Emitted when a keyboard input occurred. See https://developer.mozilla.org/en-US/docs/Web/Events/input\n     */\n    @Event() wcsInput!: EventEmitter<KeyboardEvent>;\n\n    /**\n     * Emitted when the value has changed. See https://developer.mozilla.org/en-US/docs/Web/Events/change\n     */\n    @Event() wcsChange!: EventEmitter<InputChangeEventDetail>;\n\n    /**\n     * Emitted when the input loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    /**\n     * Emitted when the input has focus.\n     */\n    @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n    componentWillLoad() {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, INPUT_INHERITED_ATTRS)\n        };\n    }\n\n    connectedCallback() {\n        this.debounceChanged();\n        if (Build.isBrowser) {\n            document.dispatchEvent(new CustomEvent('wcsInputDidLoad', {\n                detail: this.el\n            }));\n        }\n    }\n\n    disconnectedCallback() {\n        if (Build.isBrowser) {\n            document.dispatchEvent(new CustomEvent('wcsInputDidUnload', {\n                detail: this.el\n            }));\n        }\n    }\n\n    /**\n     * Sets blur on the native `input` in `wcs-input`. Use this method instead of the global\n     * `input.blur()`.\n     * @internal\n     */\n    @Method()\n    async setBlur() {\n        if (this.nativeInput) {\n            this.nativeInput.blur();\n        }\n    }\n\n    /**\n     * Returns the native `<input>` element used under the hood.\n     */\n    @Method()\n    getInputElement(): Promise<HTMLInputElement> {\n        return Promise.resolve(this.nativeInput!);\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeInput, attr, value);\n    }\n    \n    private getValueAsString(): string {\n        return typeof this.value === 'number' ? this.value.toString() :\n            (this.value || '').toString();\n    }\n\n    private onInput = (ev: Event) => {\n        const input = ev.target as HTMLInputElement | null;\n        if (input) {\n            this.value = input.value || '';\n        }\n        this.wcsInput.emit(ev as KeyboardEvent);\n    }\n\n    private onChange = (_: Event) => {\n        this.wcsChange.emit({value: this.nativeInput.value});\n    }\n\n    private onBlur = (ev: FocusEvent) => {\n        if (this.fireFocusEvents) {\n            this.wcsBlur.emit(ev);\n        }\n    }\n\n    private onFocus = (ev: FocusEvent) => {\n        if (this.fireFocusEvents) {\n            this.wcsFocus.emit(ev);\n        }\n    }\n\n    private passwordRevealIconClick(): void {\n        this.passwordReveal = !this.passwordReveal;\n    }\n\n    @Watch('passwordReveal')\n    onPasswordRevealChange(): void {\n        this.iconPassword = this.passwordReveal ? 'visibility_off' : 'visibility';\n    }\n\n    render() {\n        const value = this.getValueAsString();\n\n        return (\n            <Host\n                aria-disabled={this.disabled ? 'true' : null}\n                data-has-prefix={!!this.prefixLabel}\n                data-has-suffix={!!this.suffixLabel}\n            >\n                {this.prefixLabel ? (<span class=\"prefix\" part=\"prefix\">{this.prefixLabel}</span>) : null}\n                {this.icon ? (<wcs-mat-icon icon={this.icon} size=\"m\"></wcs-mat-icon>) : null}\n                <input\n                    class=\"native-input\"\n                    ref={input => this.nativeInput = input}\n                    disabled={this.disabled}\n                    accept={this.accept}\n                    autoCapitalize={this.autocapitalize}\n                    autoComplete={this.autocomplete}\n                    autoCorrect={this.autocorrect}\n                    autoFocus={this.autofocus}\n                    enterKeyHint={this.enterkeyhint}\n                    inputMode={this.inputmode}\n                    min={this.min}\n                    max={this.max}\n                    minLength={this.minlength}\n                    maxLength={this.maxlength}\n                    multiple={this.multiple}\n                    name={this.name}\n                    pattern={this.pattern}\n                    placeholder={this.placeholder || ''}\n                    readOnly={this.readonly}\n                    required={this.required}\n                    spellcheck={this.spellcheck}\n                    step={this.step}\n                    type={this.passwordReveal ? 'text' : this.type}\n                    value={value}\n                    onInput={this.onInput}\n                    onChange={this.onChange}\n                    onBlur={this.onBlur}\n                    onFocus={this.onFocus}\n                    {...this.inheritedAttributes}\n                />\n                {this.type === \"password\" ? (\n                    <button title={this.passwordReveal ? this.hidePasswordButtonAriaLabel : this.showPasswordButtonAriaLabel} class=\"toggle_password\" onClick={() => this.passwordRevealIconClick()}>\n                        <wcs-mat-icon icon={this.iconPassword} size=\"m\"></wcs-mat-icon>\n                    </button>\n                ) : null}\n                {this.suffixLabel ? (<span class=\"suffix\" part=\"suffix\">{this.suffixLabel}</span>) : null}\n            </Host>\n        );\n    }\n}\n\nlet inputIds = 0;\n"],"mappings":"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"}

package/dist/wcs/{p-c84ae00d.entry.js → p-6f937b20.entry.js}

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

package/dist/wcs/p-7af9a2f3.js

@@ -0,0 +1,2 @@
+import{h as e,j as r,l as s,m as t,d as n,c as A,n as u,b as a}from"./p-5314a64d.js";function i(i){const{key:R}=i;if(i.shiftKey){switch(R){case" ":return"MAJ+SPACE";case"Tab":return"MAJ+TAB"}}else if(i.altKey){switch(R){case"ArrowDown":return"ALT+DOWN_ARROW";case"ArrowUp":return"ALT+UP_ARROW"}}else if(i.ctrlKey){if(e(i)){return"CTRL+HOME"}else if(r(i)){return"CTRL+END"}else if(R==="a"){return"CTRL+A"}}else{switch(R){case"ArrowDown":return"DOWN_ARROW";case"ArrowUp":return"UP_ARROW";case"ArrowLeft":return"LEFT_ARROW";case"ArrowRight":return"RIGHT_ARROW"}if(e(i)){return"HOME"}else if(r(i)){return"END"}else if(s(i)){return"PAGE_UP"}else if(t(i)){return"PAGE_DOWN"}else if(n(i)){return"ENTER"}else if(A(i)){return"SPACE"}else if(u(i)){return"TAB"}else if(a(i)){return"ESCAPE"}}return"UNKNOWN"}export{i as k};
+//# sourceMappingURL=p-7af9a2f3.js.map

package/dist/wcs/p-7b60d4c7.js

@@ -0,0 +1,2 @@
+import{h as a,r as e,c as i,H as t,g as s}from"./p-32e583ea.js";import{i as n,a as r,s as c}from"./p-5314a64d.js";const o=(a,e)=>{switch(a){case"next":return e?"Dernière page":"Page suivante";case"previous":default:return e?"Première page":"Page précédente"}};const g=({active:e,order:i,double:t=false})=>a("wcs-button",{mode:"clear",shape:"square",size:"s",disabled:!e,title:o(i,t)},a("svg",{style:{cursor:"pointer"},"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",width:"24",height:"20",viewBox:"0 0 24 20"},a("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          `),a("g",{fill:"none",class:i+" arrow-group"},a("path",{class:(e?"active":"")+" arrow",d:"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"}),a("path",{d:"M0 0h24v24H0z",fill:"none"})),t?a("g",{fill:"none",class:i+" arrow-group"},a("path",{class:(e?"active":"")+" arrow second-arrow",d:"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"}),a("path",{d:"M0 0h24v24H0z",fill:"none"})):""));const d=":host{display:block;margin-top:var(--wcs-grid-pagination-margin-top);--wcs-grid-pagination-color:var(--wcs-semantic-color-text-primary);--wcs-grid-pagination-font-size:var(--wcs-semantic-font-size-label-2);--wcs-grid-pagination-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-grid-pagination-gap:var(--wcs-semantic-spacing-base);--wcs-grid-pagination-page-size-gap:var(--wcs-semantic-spacing-base);--wcs-grid-pagination-counter-gap:var(--wcs-semantic-spacing-small);--wcs-grid-pagination-margin-top:var(--wcs-semantic-spacing-large);--wcs-grid-pagination-arrow-color-inactive:unset;--wcs-grid-pagination-arrow-color-active:unset;}.container{display:grid;gap:var(--wcs-grid-pagination-gap);grid-template-columns:auto auto auto;justify-content:space-between;align-items:center;color:var(--wcs-grid-pagination-color);font-size:var(--wcs-grid-pagination-font-size);font-weight:var(--wcs-grid-pagination-font-weight)}.available-page-sizes{width:auto}.page-management,.page-size,.items-count{display:flex;align-items:center}.page-size{gap:var(--wcs-grid-pagination-page-size-gap)}.page-management{margin:0;padding:0;list-style-type:none}.pagination-arrow{display:flex}.pagination-counter{padding:0 var(--wcs-grid-pagination-counter-gap)}.pagination-counter span{white-space:nowrap}wcs-select.available-page-sizes{--wcs-select-control-height:var(--wcs-semantic-size-s)}";const l=d;const p=["tabindex","title"];const h=class{constructor(a){e(this,a);this.wcsGridPaginationChange=i(this,"wcsGridPaginationChange",7);this.inheritedAttributes={};this.availablePageSizes=[10,20,50];this.currentPage=h.INDEX_FIRST_PAGE;this.pageSize=this.availablePageSizes[0];this.itemsCount=0;this.pageCount=1}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},n(this.el)),r(this.el,p))}async setAriaAttribute(a,e){c(this.nativeNav,a,e)}getWcsGrid(){return this.el.parentElement.tagName==="WCS-GRID"?this.el.parentElement:undefined}lastPage(){this.currentPage=this.pageCount-1;this.emitPaginationChange();this.focusFirstGridCell()}nextPage(){if(this.canGoToNextPage()){this.currentPage++;this.emitPaginationChange();this.focusFirstGridCell()}}canGoToNextPage(){return this.currentPage+1<this.pageCount}previousPage(){if(this.canGoToPreviousPage()){this.currentPage--;this.emitPaginationChange();this.focusFirstGridCell()}}canGoToPreviousPage(){return this.currentPage>0}firstPage(){this.currentPage=0;this.emitPaginationChange();this.focusFirstGridCell()}onChangePageSize(a){this.pageSize=a.detail.value;if(this.currentPage+1>this.pageSize){this.currentPage=0}this.emitPaginationChange();this.focusFirstGridCell()}focusFirstGridCell(){const a=this.getWcsGrid();if(a){requestAnimationFrame((()=>{this.el.blur();a.focusFirstCell()}))}}emitPaginationChange(){this.wcsGridPaginationChange.emit({pagination:{currentPage:this.currentPage,pageSize:this.pageSize,itemsCount:this.itemsCount,pageCount:this.pageCount}})}render(){return a(t,{key:"3efc96789e89f352f23038016baf6cbc232d6e0c",slot:"grid-pagination"},a("div",{key:"df2365f3367fe20bfb66f8b4969036a1662daef3",class:"container"},a("div",{key:"b700909bbdcef7087af7a7f5d624db07bf909315",class:"page-size"},a("wcs-select",{key:"bd9454c106da98c1dfbd7c5081f1bc2c564db2ae",placeholder:"Eléments par page",class:"available-page-sizes","aria-labelledby":"elements-per-page-number elements-per-page-text",value:this.pageSize,onWcsChange:this.onChangePageSize.bind(this)},this.availablePageSizes.map((e=>a("wcs-select-option",{value:e},e)))),a("span",{key:"792711f34454bb10a42c44b7e13d03f8fbf4af74",id:"elements-per-page-number",hidden:true},this.pageSize),a("span",{key:"00848f6a348aed84d37ebb19172e3d7818ba3c17",id:"elements-per-page-text"},a("slot",{key:"21848ccaf60179a82c53916f8e438e8b63ebaf61",name:"elements-per-page-text"},a("span",{key:"6bf5a0c3e6dc2bd81193e362abab61b7e165de54"}," éléments par page")))),a("div",{key:"ef6378352c7251430bb90540b28d52407b792b4d",class:"items-count"},a("span",{key:"a0f8ebf6564358233cf2683107d7a3af50bbd3e7"},this.itemsCount,a("slot",{key:"b0549af31d518ea3d748ba615c226d242aa1ea3e",name:"items-count-text"},a("span",{key:"b0266239fa9726005d9946ccedf59bfe26e030a3"}," éléments")))),a("nav",Object.assign({key:"43a87e737be4890ac0f4fcb8f76e56fc5a40a27d","aria-label":"pagination",ref:a=>this.nativeNav=a},this.inheritedAttributes),a("ul",{key:"6e95be555deb6741ac851eaa0163483bd9a33e19",class:"page-management"},a("li",{key:"faab6e7ab55628be3b5bf4e61c559a67c6ea2a57",class:"pagination-arrow",onClick:this.firstPage.bind(this)},a(g,{key:"699c51108204e3e13c408abb43ed59039b12cddb",active:this.canGoToPreviousPage(),order:"previous",double:true})),a("li",{key:"3e13d327cab3e2b4c54ad915e38c10effa852970",class:"pagination-arrow",onClick:this.previousPage.bind(this)},a(g,{key:"5fbe8676685d367affe840948a4ae037e7e1b0d0",active:this.canGoToPreviousPage(),order:"previous"})),a("li",{key:"086fd79d45cc0d8c60cf53b9ae44015944341b95",class:"pagination-counter"},a("span",{key:"9bd2e83985ae3b482830628ed9384c1583392f70","aria-label":`Page ${this.currentPage+1} sur ${this.pageCount}`,"aria-current":"page"},this.currentPage+1," / ",this.pageCount)),a("li",{key:"6a61141774ba5ddc261e911945cbe71282c34793",class:"pagination-arrow",onClick:this.nextPage.bind(this)},a(g,{key:"4c41d7cdce692495b67227f0bb24fd0b605998e0",active:this.canGoToNextPage(),order:"next"})),a("li",{key:"c929ccd8c749763034a42a7006264747eed59b02",class:"pagination-arrow",onClick:this.lastPage.bind(this)},a(g,{key:"184d97af95b7fad98617f7fb138463826f94c9a8",active:this.canGoToNextPage(),order:"next",double:true}))))))}get el(){return s(this)}};h.INDEX_FIRST_PAGE=0;h.style=l;export{h as G};
+//# sourceMappingURL=p-7b60d4c7.js.map

package/dist/wcs/p-7b60d4c7.js.map

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