@haiilo/catalyst 8.3.1 → 8.4.0

package/dist/collection/components/cat-input/cat-input.css

@@ -567,9 +567,12 @@ input {
   cursor: not-allowed;
   color: rgb(var(--cat-font-color-muted, 81, 92, 108));
 }
-input.has-clearable {
+input.has-clearable, input.has-toggle-password {
   padding-right: 1.5rem;
 }
+input.has-clearable.has-toggle-password {
+  padding-right: 3.5rem;
+}
 input::placeholder {
   color: rgb(var(--cat-font-color-muted, 81, 92, 108));
 }
@@ -581,4 +584,13 @@ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:foc
   position: absolute;
   top: calc(50% - 1rem);
   right: -0.5rem;
+}
+
+.toggle-password {
+  position: absolute;
+  top: calc(50% - 1rem);
+  right: -0.5rem;
+}
+.has-clearable ~ .toggle-password {
+  right: 1.5rem;
 }

package/dist/collection/components/cat-input/cat-input.js

@@ -21,11 +21,13 @@ export class CatInput {
         this._id = `cat-input-${nextUniqueId++}`;
         this.hasSlottedLabel = false;
         this.hasSlottedHint = false;
+        this.isPasswordShown = false;
         this.errorMap = undefined;
         this.requiredMarker = 'optional';
         this.horizontal = false;
         this.autoComplete = undefined;
         this.clearable = false;
+        this.togglePassword = false;
         this.disabled = false;
         this.hint = undefined;
         this.icon = undefined;
@@ -113,8 +115,9 @@ export class CatInput {
                 'input-disabled': this.disabled,
                 'input-invalid': this.invalid
             }, onClick: () => this.input.focus() }, this.textPrefix && (h("span", { class: "text-prefix", part: "prefix" }, this.textPrefix)), this.icon && !this.iconRight && (h("cat-icon", { icon: this.icon, class: "icon-prefix", size: "l", onClick: () => this.doFocus() })), h("div", { class: "input-inner-wrapper" }, h("input", { ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, class: {
-                'has-clearable': this.clearable && !this.disabled && !this.readonly
-            }, autocomplete: this.autoComplete, disabled: this.disabled, max: this.max, maxlength: this.maxLength, min: this.min, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, type: this.type, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), this.clearable && !this.disabled && !this.readonly && this.value && (h("cat-button", { class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": i18n.t('input.clear'), onClick: this.clear.bind(this), "data-dropdown-no-close": true }))), !this.invalid && this.icon && this.iconRight && (h("cat-icon", { icon: this.icon, class: "icon-suffix", size: "l", onClick: () => this.doFocus() })), this.invalid && h("cat-icon", { icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" }), this.textSuffix && (h("span", { class: "text-suffix", part: "suffix" }, this.textSuffix))), this.hasHint && (h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })))));
+                'has-clearable': this.clearable && !this.disabled && !this.readonly && !!this.value,
+                'has-toggle-password': this.togglePassword && !this.disabled && !this.readonly && !!this.value
+            }, autocomplete: this.autoComplete, disabled: this.disabled, max: this.max, maxlength: this.maxLength, min: this.min, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, type: this.isPasswordShown ? 'text' : this.type, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), this.clearable && !this.disabled && !this.readonly && this.value && (h("cat-button", { class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": i18n.t('input.clear'), onClick: this.clear.bind(this), "data-dropdown-no-close": true })), this.togglePassword && !this.disabled && !this.readonly && this.value && (h("cat-button", { class: "toggle-password", icon: this.isPasswordShown ? '$cat:input-password-hide' : '$cat:input-password-show', "icon-only": "true", size: "s", variant: "text", "a11y-label": i18n.t(this.isPasswordShown ? 'input.hidePassword' : 'input.showPassword'), onClick: this.doTogglePassword.bind(this) }))), !this.invalid && this.icon && this.iconRight && (h("cat-icon", { icon: this.icon, class: "icon-suffix", size: "l", onClick: () => this.doFocus() })), this.invalid && h("cat-icon", { icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" }), this.textSuffix && (h("span", { class: "text-suffix", part: "suffix" }, this.textSuffix))), this.hasHint && (h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint || this.invalid;
@@ -136,6 +139,9 @@ export class CatInput {
             this.showErrors();
         }
     }
+    doTogglePassword() {
+        this.isPasswordShown = !this.isPasswordShown;
+    }
     showErrors() {
         this.errorMap = this.errorMapSrc;
     }
@@ -248,6 +254,24 @@ export class CatInput {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "togglePassword": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input should show a password toggle button for password inputs."
+                },
+                "attribute": "toggle-password",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,
@@ -664,6 +688,7 @@ export class CatInput {
         return {
             "hasSlottedLabel": {},
             "hasSlottedHint": {},
+            "isPasswordShown": {},
             "errorMap": {}
         };
     }

package/dist/collection/components/cat-input/cat-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"cat-input.js","sourceRoot":"","sources":["../../../src/components/cat-input/cat-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport log from 'loglevel';\nimport { coerceBoolean, coerceNumber } from '../../utils/coerce';\nimport { CatFormHint, ErrorMap } from '../cat-form-hint/cat-form-hint';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\nimport { InputType } from './input-type';\n\nlet nextUniqueId = 0;\n\n/**\n * Inputs are used to allow users to provide text input when the expected input\n * is short. As well as plain text, Input supports various types of text,\n * including passwords and numbers.\n *\n * @slot hint - Optional hint element to be displayed with the input.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part label - The native label element.\n * @part input - The native input element.\n * @part prefix - The text prefix.\n * @part suffix - The text suffix.\n */\n@Component({\n  tag: 'cat-input',\n  styleUrl: 'cat-input.scss',\n  shadow: true\n})\nexport class CatInput {\n  private readonly _id = `cat-input-${nextUniqueId++}`;\n  private get id() {\n    return this.identifier || this._id;\n  }\n\n  private input!: HTMLInputElement;\n  private errorMapSrc?: ErrorMap;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  @State() hasSlottedHint = false;\n\n  @State() errorMap?: ErrorMap;\n\n  /**\n   * Whether the label need a marker to shown if the input is required or optional.\n   */\n  @Prop() requiredMarker?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!' = 'optional';\n\n  /**\n   * Whether the label is on top or left.\n   */\n  @Prop() horizontal = false;\n\n  /**\n   * Hint for form autofill feature.\n   */\n  @Prop() autoComplete?: string;\n\n  /**\n   * Whether the input should show a clear button.\n   */\n  @Prop() clearable = false;\n\n  /**\n   * Whether the input is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Optional hint text(s) to be displayed with the input.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * The name of an icon to be displayed in the input.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Display the icon on the right.\n   */\n  @Prop() iconRight = false;\n\n  /**\n   * A unique identifier for the input.\n   */\n  @Prop() identifier?: string;\n\n  /**\n   * The label for the input.\n   */\n  @Prop() label = '';\n\n  /**\n   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @Prop() labelHidden = false;\n\n  /**\n   * A maximum value for date, time and numeric values.\n   */\n  @Prop() max?: number | string;\n\n  /**\n   * A maximum length (number of characters) for textual values.\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * A minimum value for date, time and numeric values.\n   */\n  @Prop() min?: number | string;\n\n  /**\n   * A minimum length (number of characters) for textual values.\n   */\n  @Prop() minLength?: number;\n\n  /**\n   * The name of the form control. Submitted with the form as part of a name/value pair.\n   */\n  @Prop() name?: string;\n\n  /**\n   * The placeholder text to display within the input.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * A textual prefix to be displayed in the input.\n   */\n  @Prop() textPrefix?: string;\n\n  /**\n   * A textual suffix to be displayed in the input.\n   */\n  @Prop() textSuffix?: string;\n\n  /**\n   * The value is not editable.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * A value is required or must be check for the form to be submittable.\n   */\n  @Prop() required = false;\n\n  /**\n   * Use round input edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * Type of form control.\n   */\n  @Prop() type: InputType = 'text';\n\n  /**\n   * The value of the control.\n   */\n  @Prop({ mutable: true }) value?: string;\n\n  /**\n   * The validation errors for this input. Will render a hint under the input\n   * with the translated error message(s) `error.${key}`. If an object is\n   * passed, the keys will be used as error keys and the values translation\n   * parameters.\n   * If the value is `true`, the input will be marked as invalid without any\n   * hints under the input.\n   */\n  @Prop() errors?: boolean | string[] | ErrorMap;\n\n  /**\n   * Fine-grained control over when the errors are shown. Can be `false` to\n   * never show errors, `true` to show errors on blur, or a number to show\n   * errors on change with the given delay in milliseconds.\n   */\n  @Prop() errorUpdate: boolean | number = 0;\n\n  /**\n   * Attributes that will be added to the native HTML input element.\n   */\n  @Prop() nativeAttributes?: { [key: string]: string };\n\n  /**\n   * Emitted when the value is changed.\n   */\n  @Event() catChange!: EventEmitter<string>;\n\n  /**\n   * Emitted when the input received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillRender(): void {\n    this.onErrorsChanged(this.errors);\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n    if (!this.label && !this.hasSlottedLabel) {\n      log.warn('[A11y] Missing ARIA label on input', this);\n    }\n  }\n\n  /**\n   * Programmatically move focus to the input. Use this method instead of\n   * `input.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async doFocus(options?: FocusOptions): Promise<void> {\n    // hack to make datepicker inputs focusable. The datepicker hides the input\n    // element and dynamically creates a sibling. We need to find the new input\n    // element and focus it instead.\n    const input = this.input.type === 'hidden' ? this.findSiblingInput(this.input.nextSibling) : this.input;\n    input?.focus(options);\n  }\n\n  /**\n   * Programmatically remove focus from the input. Use this method instead of\n   * `input.blur()`.\n   */\n  @Method()\n  async doBlur(): Promise<void> {\n    this.input.blur();\n  }\n\n  /**\n   * Clear the input.\n   */\n  @Method()\n  async clear(): Promise<void> {\n    this.value = '';\n    this.catChange.emit(this.value);\n  }\n\n  @Watch('errors')\n  onErrorsChanged(value?: boolean | string[] | ErrorMap) {\n    if (!coerceBoolean(this.errorUpdate)) {\n      this.errorMap = undefined;\n    } else {\n      this.errorMapSrc = Array.isArray(value)\n        ? (value as string[]).reduce((acc, err) => ({ ...acc, [err]: undefined }), {})\n        : value === true\n          ? {}\n          : value || undefined;\n      this.showErrorsIfTimeout() || this.showErrorsIfNoFocus();\n    }\n  }\n\n  render() {\n    return (\n      <div\n        class={{\n          'input-field': true,\n          'input-horizontal': this.horizontal\n        }}\n      >\n        <div class={{ 'label-container': true, hidden: this.labelHidden }}>\n          {(this.hasSlottedLabel || this.label) && (\n            <label htmlFor={this.id} part=\"label\">\n              <span class=\"label-wrapper\">\n                {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n                <div class=\"label-metadata\">\n                  {!this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (\n                    <span class=\"label-optional\" aria-hidden=\"true\">\n                      ({i18n.t('input.optional')})\n                    </span>\n                  )}\n                  {this.required && this.requiredMarker?.startsWith('required') && (\n                    <span class=\"label-optional\" aria-hidden=\"true\">\n                      ({i18n.t('input.required')})\n                    </span>\n                  )}\n                  {this.maxLength && (\n                    <div class=\"label-character-count\" aria-hidden=\"true\">\n                      {this.value?.toString().length ?? 0}/{this.maxLength}\n                    </div>\n                  )}\n                </div>\n              </span>\n            </label>\n          )}\n        </div>\n        <div class=\"input-container\">\n          <div\n            class={{\n              'input-wrapper': true,\n              'input-round': this.round,\n              'input-readonly': this.readonly,\n              'input-disabled': this.disabled,\n              'input-invalid': this.invalid\n            }}\n            onClick={() => this.input.focus()}\n          >\n            {this.textPrefix && (\n              <span class=\"text-prefix\" part=\"prefix\">\n                {this.textPrefix}\n              </span>\n            )}\n            {this.icon && !this.iconRight && (\n              <cat-icon icon={this.icon} class=\"icon-prefix\" size=\"l\" onClick={() => this.doFocus()}></cat-icon>\n            )}\n            <div class=\"input-inner-wrapper\">\n              <input\n                {...this.nativeAttributes}\n                part=\"input\"\n                ref={el => (this.input = el as HTMLInputElement)}\n                id={this.id}\n                class={{\n                  'has-clearable': this.clearable && !this.disabled && !this.readonly\n                }}\n                autocomplete={this.autoComplete}\n                disabled={this.disabled}\n                max={this.max}\n                maxlength={this.maxLength}\n                min={this.min}\n                minlength={this.minLength}\n                name={this.name}\n                placeholder={this.placeholder}\n                readonly={this.readonly}\n                required={this.required}\n                type={this.type}\n                value={this.value}\n                onInput={this.onInput.bind(this)}\n                onFocus={this.onFocus.bind(this)}\n                onBlur={this.onBlur.bind(this)}\n                aria-invalid={this.invalid ? 'true' : undefined}\n                aria-describedby={this.hasHint ? this.id + '-hint' : undefined}\n              ></input>\n              {this.clearable && !this.disabled && !this.readonly && this.value && (\n                <cat-button\n                  class=\"clearable\"\n                  icon=\"$cat:input-close\"\n                  icon-only=\"true\"\n                  size=\"s\"\n                  variant=\"text\"\n                  a11y-label={i18n.t('input.clear')}\n                  onClick={this.clear.bind(this)}\n                  data-dropdown-no-close\n                ></cat-button>\n              )}\n            </div>\n            {!this.invalid && this.icon && this.iconRight && (\n              <cat-icon icon={this.icon} class=\"icon-suffix\" size=\"l\" onClick={() => this.doFocus()}></cat-icon>\n            )}\n            {this.invalid && <cat-icon icon=\"$cat:input-error\" class=\"icon-suffix cat-text-danger\" size=\"l\"></cat-icon>}\n            {this.textSuffix && (\n              <span class=\"text-suffix\" part=\"suffix\">\n                {this.textSuffix}\n              </span>\n            )}\n          </div>\n          {this.hasHint && (\n            <CatFormHint\n              id={this.id}\n              hint={this.hint}\n              slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>}\n              errorMap={this.errorMap}\n            />\n          )}\n        </div>\n      </div>\n    );\n  }\n\n  private get hasHint() {\n    return !!this.hint || !!this.hasSlottedHint || this.invalid;\n  }\n\n  private get invalid() {\n    return !!Object.keys(this.errorMap || {}).length;\n  }\n\n  private onInput() {\n    this.value = this.input.value;\n    this.catChange.emit(this.value);\n    this.showErrorsIfTimeout();\n  }\n\n  private onFocus(event: FocusEvent) {\n    this.catFocus.emit(event);\n  }\n\n  private onBlur(event: FocusEvent) {\n    this.catBlur.emit(event);\n    if (coerceBoolean(this.errorUpdate)) {\n      this.showErrors();\n    }\n  }\n\n  private showErrors() {\n    this.errorMap = this.errorMapSrc;\n  }\n\n  private errorUpdateTimeoutId?: number;\n  private showErrorsIfTimeout() {\n    const errorUpdate = coerceNumber(this.errorUpdate, null);\n    if (errorUpdate !== null) {\n      typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);\n      this.errorUpdateTimeoutId = window.setTimeout(() => this.showErrors(), errorUpdate);\n      return true;\n    }\n    return false;\n  }\n\n  private showErrorsIfNoFocus() {\n    const hasFocus = document.activeElement === this.hostElement || document.activeElement === this.input;\n    if (!hasFocus) {\n      this.showErrors();\n    }\n  }\n\n  private findSiblingInput(node: Node | null): HTMLInputElement | undefined {\n    if (node instanceof HTMLInputElement) {\n      return node;\n    } else if (node?.nextSibling) {\n      return this.findSiblingInput(node.nextSibling);\n    }\n    return undefined;\n  }\n}\n"]}
+{"version":3,"file":"cat-input.js","sourceRoot":"","sources":["../../../src/components/cat-input/cat-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport log from 'loglevel';\nimport { coerceBoolean, coerceNumber } from '../../utils/coerce';\nimport { CatFormHint, ErrorMap } from '../cat-form-hint/cat-form-hint';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\nimport { InputType } from './input-type';\n\nlet nextUniqueId = 0;\n\n/**\n * Inputs are used to allow users to provide text input when the expected input\n * is short. As well as plain text, Input supports various types of text,\n * including passwords and numbers.\n *\n * @slot hint - Optional hint element to be displayed with the input.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part label - The native label element.\n * @part input - The native input element.\n * @part prefix - The text prefix.\n * @part suffix - The text suffix.\n */\n@Component({\n  tag: 'cat-input',\n  styleUrl: 'cat-input.scss',\n  shadow: true\n})\nexport class CatInput {\n  private readonly _id = `cat-input-${nextUniqueId++}`;\n  private get id() {\n    return this.identifier || this._id;\n  }\n\n  private input!: HTMLInputElement;\n  private errorMapSrc?: ErrorMap;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  @State() hasSlottedHint = false;\n\n  @State() isPasswordShown = false;\n\n  @State() errorMap?: ErrorMap;\n\n  /**\n   * Whether the label need a marker to shown if the input is required or optional.\n   */\n  @Prop() requiredMarker?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!' = 'optional';\n\n  /**\n   * Whether the label is on top or left.\n   */\n  @Prop() horizontal = false;\n\n  /**\n   * Hint for form autofill feature.\n   */\n  @Prop() autoComplete?: string;\n\n  /**\n   * Whether the input should show a clear button.\n   */\n  @Prop() clearable = false;\n\n  /**\n   * Whether the input should show a password toggle button for password inputs.\n   */\n  @Prop() togglePassword = false;\n\n  /**\n   * Whether the input is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Optional hint text(s) to be displayed with the input.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * The name of an icon to be displayed in the input.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Display the icon on the right.\n   */\n  @Prop() iconRight = false;\n\n  /**\n   * A unique identifier for the input.\n   */\n  @Prop() identifier?: string;\n\n  /**\n   * The label for the input.\n   */\n  @Prop() label = '';\n\n  /**\n   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @Prop() labelHidden = false;\n\n  /**\n   * A maximum value for date, time and numeric values.\n   */\n  @Prop() max?: number | string;\n\n  /**\n   * A maximum length (number of characters) for textual values.\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * A minimum value for date, time and numeric values.\n   */\n  @Prop() min?: number | string;\n\n  /**\n   * A minimum length (number of characters) for textual values.\n   */\n  @Prop() minLength?: number;\n\n  /**\n   * The name of the form control. Submitted with the form as part of a name/value pair.\n   */\n  @Prop() name?: string;\n\n  /**\n   * The placeholder text to display within the input.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * A textual prefix to be displayed in the input.\n   */\n  @Prop() textPrefix?: string;\n\n  /**\n   * A textual suffix to be displayed in the input.\n   */\n  @Prop() textSuffix?: string;\n\n  /**\n   * The value is not editable.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * A value is required or must be check for the form to be submittable.\n   */\n  @Prop() required = false;\n\n  /**\n   * Use round input edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * Type of form control.\n   */\n  @Prop() type: InputType = 'text';\n\n  /**\n   * The value of the control.\n   */\n  @Prop({ mutable: true }) value?: string;\n\n  /**\n   * The validation errors for this input. Will render a hint under the input\n   * with the translated error message(s) `error.${key}`. If an object is\n   * passed, the keys will be used as error keys and the values translation\n   * parameters.\n   * If the value is `true`, the input will be marked as invalid without any\n   * hints under the input.\n   */\n  @Prop() errors?: boolean | string[] | ErrorMap;\n\n  /**\n   * Fine-grained control over when the errors are shown. Can be `false` to\n   * never show errors, `true` to show errors on blur, or a number to show\n   * errors on change with the given delay in milliseconds.\n   */\n  @Prop() errorUpdate: boolean | number = 0;\n\n  /**\n   * Attributes that will be added to the native HTML input element.\n   */\n  @Prop() nativeAttributes?: { [key: string]: string };\n\n  /**\n   * Emitted when the value is changed.\n   */\n  @Event() catChange!: EventEmitter<string>;\n\n  /**\n   * Emitted when the input received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillRender(): void {\n    this.onErrorsChanged(this.errors);\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n    if (!this.label && !this.hasSlottedLabel) {\n      log.warn('[A11y] Missing ARIA label on input', this);\n    }\n  }\n\n  /**\n   * Programmatically move focus to the input. Use this method instead of\n   * `input.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async doFocus(options?: FocusOptions): Promise<void> {\n    // hack to make datepicker inputs focusable. The datepicker hides the input\n    // element and dynamically creates a sibling. We need to find the new input\n    // element and focus it instead.\n    const input = this.input.type === 'hidden' ? this.findSiblingInput(this.input.nextSibling) : this.input;\n    input?.focus(options);\n  }\n\n  /**\n   * Programmatically remove focus from the input. Use this method instead of\n   * `input.blur()`.\n   */\n  @Method()\n  async doBlur(): Promise<void> {\n    this.input.blur();\n  }\n\n  /**\n   * Clear the input.\n   */\n  @Method()\n  async clear(): Promise<void> {\n    this.value = '';\n    this.catChange.emit(this.value);\n  }\n\n  @Watch('errors')\n  onErrorsChanged(value?: boolean | string[] | ErrorMap) {\n    if (!coerceBoolean(this.errorUpdate)) {\n      this.errorMap = undefined;\n    } else {\n      this.errorMapSrc = Array.isArray(value)\n        ? (value as string[]).reduce((acc, err) => ({ ...acc, [err]: undefined }), {})\n        : value === true\n          ? {}\n          : value || undefined;\n      this.showErrorsIfTimeout() || this.showErrorsIfNoFocus();\n    }\n  }\n\n  render() {\n    return (\n      <div\n        class={{\n          'input-field': true,\n          'input-horizontal': this.horizontal\n        }}\n      >\n        <div class={{ 'label-container': true, hidden: this.labelHidden }}>\n          {(this.hasSlottedLabel || this.label) && (\n            <label htmlFor={this.id} part=\"label\">\n              <span class=\"label-wrapper\">\n                {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n                <div class=\"label-metadata\">\n                  {!this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (\n                    <span class=\"label-optional\" aria-hidden=\"true\">\n                      ({i18n.t('input.optional')})\n                    </span>\n                  )}\n                  {this.required && this.requiredMarker?.startsWith('required') && (\n                    <span class=\"label-optional\" aria-hidden=\"true\">\n                      ({i18n.t('input.required')})\n                    </span>\n                  )}\n                  {this.maxLength && (\n                    <div class=\"label-character-count\" aria-hidden=\"true\">\n                      {this.value?.toString().length ?? 0}/{this.maxLength}\n                    </div>\n                  )}\n                </div>\n              </span>\n            </label>\n          )}\n        </div>\n        <div class=\"input-container\">\n          <div\n            class={{\n              'input-wrapper': true,\n              'input-round': this.round,\n              'input-readonly': this.readonly,\n              'input-disabled': this.disabled,\n              'input-invalid': this.invalid\n            }}\n            onClick={() => this.input.focus()}\n          >\n            {this.textPrefix && (\n              <span class=\"text-prefix\" part=\"prefix\">\n                {this.textPrefix}\n              </span>\n            )}\n            {this.icon && !this.iconRight && (\n              <cat-icon icon={this.icon} class=\"icon-prefix\" size=\"l\" onClick={() => this.doFocus()}></cat-icon>\n            )}\n            <div class=\"input-inner-wrapper\">\n              <input\n                {...this.nativeAttributes}\n                part=\"input\"\n                ref={el => (this.input = el as HTMLInputElement)}\n                id={this.id}\n                class={{\n                  'has-clearable': this.clearable && !this.disabled && !this.readonly && !!this.value,\n                  'has-toggle-password': this.togglePassword && !this.disabled && !this.readonly && !!this.value\n                }}\n                autocomplete={this.autoComplete}\n                disabled={this.disabled}\n                max={this.max}\n                maxlength={this.maxLength}\n                min={this.min}\n                minlength={this.minLength}\n                name={this.name}\n                placeholder={this.placeholder}\n                readonly={this.readonly}\n                required={this.required}\n                type={this.isPasswordShown ? 'text' : this.type}\n                value={this.value}\n                onInput={this.onInput.bind(this)}\n                onFocus={this.onFocus.bind(this)}\n                onBlur={this.onBlur.bind(this)}\n                aria-invalid={this.invalid ? 'true' : undefined}\n                aria-describedby={this.hasHint ? this.id + '-hint' : undefined}\n              ></input>\n              {this.clearable && !this.disabled && !this.readonly && this.value && (\n                <cat-button\n                  class=\"clearable\"\n                  icon=\"$cat:input-close\"\n                  icon-only=\"true\"\n                  size=\"s\"\n                  variant=\"text\"\n                  a11y-label={i18n.t('input.clear')}\n                  onClick={this.clear.bind(this)}\n                  data-dropdown-no-close\n                ></cat-button>\n              )}\n              {this.togglePassword && !this.disabled && !this.readonly && this.value && (\n                <cat-button\n                  class=\"toggle-password\"\n                  icon={this.isPasswordShown ? '$cat:input-password-hide' : '$cat:input-password-show'}\n                  icon-only=\"true\"\n                  size=\"s\"\n                  variant=\"text\"\n                  a11y-label={i18n.t(this.isPasswordShown ? 'input.hidePassword' : 'input.showPassword')}\n                  onClick={this.doTogglePassword.bind(this)}\n                ></cat-button>\n              )}\n            </div>\n            {!this.invalid && this.icon && this.iconRight && (\n              <cat-icon icon={this.icon} class=\"icon-suffix\" size=\"l\" onClick={() => this.doFocus()}></cat-icon>\n            )}\n            {this.invalid && <cat-icon icon=\"$cat:input-error\" class=\"icon-suffix cat-text-danger\" size=\"l\"></cat-icon>}\n            {this.textSuffix && (\n              <span class=\"text-suffix\" part=\"suffix\">\n                {this.textSuffix}\n              </span>\n            )}\n          </div>\n          {this.hasHint && (\n            <CatFormHint\n              id={this.id}\n              hint={this.hint}\n              slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>}\n              errorMap={this.errorMap}\n            />\n          )}\n        </div>\n      </div>\n    );\n  }\n\n  private get hasHint() {\n    return !!this.hint || !!this.hasSlottedHint || this.invalid;\n  }\n\n  private get invalid() {\n    return !!Object.keys(this.errorMap || {}).length;\n  }\n\n  private onInput() {\n    this.value = this.input.value;\n    this.catChange.emit(this.value);\n    this.showErrorsIfTimeout();\n  }\n\n  private onFocus(event: FocusEvent) {\n    this.catFocus.emit(event);\n  }\n\n  private onBlur(event: FocusEvent) {\n    this.catBlur.emit(event);\n    if (coerceBoolean(this.errorUpdate)) {\n      this.showErrors();\n    }\n  }\n\n  private doTogglePassword() {\n    this.isPasswordShown = !this.isPasswordShown;\n  }\n\n  private showErrors() {\n    this.errorMap = this.errorMapSrc;\n  }\n\n  private errorUpdateTimeoutId?: number;\n  private showErrorsIfTimeout() {\n    const errorUpdate = coerceNumber(this.errorUpdate, null);\n    if (errorUpdate !== null) {\n      typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);\n      this.errorUpdateTimeoutId = window.setTimeout(() => this.showErrors(), errorUpdate);\n      return true;\n    }\n    return false;\n  }\n\n  private showErrorsIfNoFocus() {\n    const hasFocus = document.activeElement === this.hostElement || document.activeElement === this.input;\n    if (!hasFocus) {\n      this.showErrors();\n    }\n  }\n\n  private findSiblingInput(node: Node | null): HTMLInputElement | undefined {\n    if (node instanceof HTMLInputElement) {\n      return node;\n    } else if (node?.nextSibling) {\n      return this.findSiblingInput(node.nextSibling);\n    }\n    return undefined;\n  }\n}\n"]}

package/dist/components/cat-datepicker.locale.js

@@ -2756,12 +2756,12 @@ function daysForLocale(language, weekday = 'long') {
     const date = new Date();
     const firstDayOfWeek = (date.getUTCDate() - date.getUTCDay() + 7) % 7;
     const format = new Intl.DateTimeFormat(language, { weekday }).format;
-    return [...Array(7).keys()].map(day => format(date.setUTCDate(firstDayOfWeek + day)));
+    return [...Array(7).keys()].map(day => format(new Date(date.getTime()).setUTCDate(firstDayOfWeek + day)));
 }
 function monthsForLocale(language, month = 'long') {
     const date = new Date();
     const format = new Intl.DateTimeFormat(language, { month }).format;
-    return [...Array(12).keys()].map(month => format(date.setUTCMonth(month)));
+    return [...Array(12).keys()].map(month => format(new Date(date.getTime()).setUTCMonth(month)));
 }
 function getLocale(language) {
     return {