@haiilo/catalyst 10.0.4 → 10.0.6

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

@@ -21,6 +21,7 @@
 
 .content {
   align-self: center;
+  width: 100%;
 }
 
 ::slotted(:last-child) {

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

@@ -57,7 +57,10 @@ export class CatDatepickerFlat {
         // has been updated.
         this.pickr?.destroy();
         this.pickr = undefined;
-        setTimeout(() => (this.pickr = this.initDatepicker(this.input)));
+        setTimeout(() => {
+            this.input ? (this.input.disabled = this.disabled) : null;
+            this.pickr = this.initDatepicker(this.input);
+        });
     }
     componentDidLoad() {
         this.pickr = this.initDatepicker(this.input);
@@ -105,7 +108,7 @@ export class CatDatepickerFlat {
             } }, this.hasSlottedLabel && (h("span", { slot: "label" }, h("slot", { name: "label" }))), this.hasSlottedHint && (h("span", { slot: "hint" }, h("slot", { name: "hint" })))));
     }
     initDatepicker(input) {
-        if (this.disabled || this.readonly || !input) {
+        if (!input) {
             return;
         }
         // avoid dropdown closing if datepicker is part of a dropdown

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

@@ -1 +1 @@
-{"version":3,"file":"cat-datepicker.js","sourceRoot":"","sources":["../../../src/components/cat-datepicker/cat-datepicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch, h } from '@stencil/core';\nimport flatpickr from 'flatpickr';\nimport { findClosest } from '../../utils/find-closest';\nimport { ErrorMap } from '../cat-form-hint/cat-form-hint';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\nimport { getConfig } from './cat-datepicker.config';\nimport { getFormat } from './cat-datepicker.format';\nimport { getLocale } from './cat-datepicker.locale';\nimport { CatDatepickerMode } from './cat-datepicker.mode';\n\n@Component({\n  tag: 'cat-datepicker',\n  styleUrl: 'cat-datepicker.scss',\n  shadow: true\n})\nexport class CatDatepickerFlat {\n  private pickr?: flatpickr.Instance;\n  private _input?: HTMLCatInputElement;\n  private get input(): HTMLInputElement | undefined {\n    return this._input?.shadowRoot?.querySelector('input') ?? undefined;\n  }\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  @State() hasSlottedHint = false;\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 as ISO Date string, e.g. 2017-03-04T01:23:43.000Z.\n   */\n  @Prop() max?: string;\n\n  /**\n   * A minimum value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z.\n   */\n  @Prop() min?: string;\n\n  /**\n   * The mode of the datepicker, to select a date, time, both, a date range or a week number.\n   */\n  @Prop() mode: CatDatepickerMode = 'date';\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   * The step size to use when changing the time.\n   */\n  @Prop() step = 5;\n\n  /**\n   * The value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z or as a week number string.\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   * Attributes that will be added to the rendered HTML datepicker element.\n   */\n  @Prop() nativePickerAttributes?: { [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  @Watch('value')\n  onValueChanged(value: string) {\n    if (value) {\n      this.pickr?.setDate(value, false);\n      if (this.mode !== 'daterange' || value.includes(' - ')) {\n        this.catChange.emit(value);\n      }\n    } else {\n      this.pickr?.clear(false);\n      this.catChange.emit(undefined);\n    }\n  }\n\n  @Watch('disabled')\n  @Watch('readonly')\n  onDisabledChanged() {\n    // Dynamically changing 'disabled' value is not working due to a bug in the\n    // library. We thus need to fully recreate the date picker after the value\n    // has been updated.\n    this.pickr?.destroy();\n    this.pickr = undefined;\n    setTimeout(() => (this.pickr = this.initDatepicker(this.input)));\n  }\n\n  componentDidLoad() {\n    this.pickr = this.initDatepicker(this.input);\n  }\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n  }\n\n  @Watch('min')\n  @Watch('max')\n  onMinChanged() {\n    this.pickr?.set('minDate', this.min);\n    this.pickr?.set('maxDate', this.max);\n    if (this.value && !this.pickr?.selectedDates?.length) {\n      // Dynamically changing 'minDate' or 'maxDate' does not emit a change if\n      // the value is cleared due to an invalid date.\n      this.pickr?.clear();\n    }\n  }\n\n  /**\n   * Programmatically move focus to the datepicker. 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    this._input?.doFocus(options);\n  }\n\n  /**\n   * Programmatically remove focus from the datepicker. Use this method instead of\n   * `input.blur()`.\n   */\n  @Method()\n  async doBlur(): Promise<void> {\n    this._input?.doBlur();\n  }\n\n  render() {\n    return (\n      <cat-input\n        ref={el => (this._input = el)}\n        requiredMarker={this.requiredMarker}\n        horizontal={this.horizontal}\n        autoComplete={this.autoComplete}\n        clearable={this.clearable}\n        disabled={this.disabled}\n        hint={this.hint}\n        icon={this.icon}\n        iconRight={this.iconRight}\n        identifier={this.identifier}\n        label={this.label}\n        labelHidden={this.labelHidden}\n        name={this.name}\n        placeholder={this.placeholder}\n        textPrefix={this.textPrefix}\n        textSuffix={this.textSuffix}\n        readonly={this.readonly}\n        required={this.required}\n        value={this.value}\n        errors={this.errors}\n        errorUpdate={this.errorUpdate}\n        nativeAttributes={this.nativeAttributes}\n        onCatChange={e => {\n          e.stopPropagation();\n          this.value = e.detail || undefined;\n        }}\n        onCatFocus={e => {\n          e.stopPropagation();\n          this.catFocus.emit(e.detail);\n        }}\n        onCatBlur={e => {\n          e.stopPropagation();\n          this.catBlur.emit(e.detail);\n        }}\n      >\n        {this.hasSlottedLabel && (\n          <span slot=\"label\">\n            <slot name=\"label\"></slot>\n          </span>\n        )}\n        {this.hasSlottedHint && (\n          <span slot=\"hint\">\n            <slot name=\"hint\"></slot>\n          </span>\n        )}\n      </cat-input>\n    );\n  }\n\n  private initDatepicker(input?: HTMLInputElement): flatpickr.Instance | undefined {\n    if (this.disabled || this.readonly || !input) {\n      return;\n    }\n\n    // avoid dropdown closing if datepicker is part of a dropdown\n    const withinDropdown = !!findClosest('cat-dropdown', input);\n    const nativePickerAttributes: { [key: string]: string } = withinDropdown ? { 'data-dropdown-no-close': '' } : {};\n\n    return flatpickr(\n      input,\n      getConfig({\n        locale: getLocale(i18n.getLocale()),\n        format: getFormat(i18n.getLocale(), this.mode),\n        mode: this.mode,\n        min: this.min,\n        max: this.max,\n        step: this.step,\n        disabled: this.disabled,\n        readonly: this.readonly,\n        nativePickerAttributes: { ...nativePickerAttributes, ...this.nativePickerAttributes },\n        applyChange: value => (this.value = value)\n      })\n    );\n  }\n}\n"]}
+{"version":3,"file":"cat-datepicker.js","sourceRoot":"","sources":["../../../src/components/cat-datepicker/cat-datepicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch, h } from '@stencil/core';\nimport flatpickr from 'flatpickr';\nimport { findClosest } from '../../utils/find-closest';\nimport { ErrorMap } from '../cat-form-hint/cat-form-hint';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\nimport { getConfig } from './cat-datepicker.config';\nimport { getFormat } from './cat-datepicker.format';\nimport { getLocale } from './cat-datepicker.locale';\nimport { CatDatepickerMode } from './cat-datepicker.mode';\n\n@Component({\n  tag: 'cat-datepicker',\n  styleUrl: 'cat-datepicker.scss',\n  shadow: true\n})\nexport class CatDatepickerFlat {\n  private pickr?: flatpickr.Instance;\n  private _input?: HTMLCatInputElement;\n  private get input(): HTMLInputElement | undefined {\n    return this._input?.shadowRoot?.querySelector('input') ?? undefined;\n  }\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  @State() hasSlottedHint = false;\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 as ISO Date string, e.g. 2017-03-04T01:23:43.000Z.\n   */\n  @Prop() max?: string;\n\n  /**\n   * A minimum value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z.\n   */\n  @Prop() min?: string;\n\n  /**\n   * The mode of the datepicker, to select a date, time, both, a date range or a week number.\n   */\n  @Prop() mode: CatDatepickerMode = 'date';\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   * The step size to use when changing the time.\n   */\n  @Prop() step = 5;\n\n  /**\n   * The value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z or as a week number string.\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   * Attributes that will be added to the rendered HTML datepicker element.\n   */\n  @Prop() nativePickerAttributes?: { [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  @Watch('value')\n  onValueChanged(value: string) {\n    if (value) {\n      this.pickr?.setDate(value, false);\n      if (this.mode !== 'daterange' || value.includes(' - ')) {\n        this.catChange.emit(value);\n      }\n    } else {\n      this.pickr?.clear(false);\n      this.catChange.emit(undefined);\n    }\n  }\n\n  @Watch('disabled')\n  @Watch('readonly')\n  onDisabledChanged() {\n    // Dynamically changing 'disabled' value is not working due to a bug in the\n    // library. We thus need to fully recreate the date picker after the value\n    // has been updated.\n    this.pickr?.destroy();\n    this.pickr = undefined;\n    setTimeout(() => {\n      this.input ? (this.input.disabled = this.disabled) : null;\n      this.pickr = this.initDatepicker(this.input);\n    });\n  }\n\n  componentDidLoad() {\n    this.pickr = this.initDatepicker(this.input);\n  }\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n  }\n\n  @Watch('min')\n  @Watch('max')\n  onMinChanged() {\n    this.pickr?.set('minDate', this.min);\n    this.pickr?.set('maxDate', this.max);\n    if (this.value && !this.pickr?.selectedDates?.length) {\n      // Dynamically changing 'minDate' or 'maxDate' does not emit a change if\n      // the value is cleared due to an invalid date.\n      this.pickr?.clear();\n    }\n  }\n\n  /**\n   * Programmatically move focus to the datepicker. 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    this._input?.doFocus(options);\n  }\n\n  /**\n   * Programmatically remove focus from the datepicker. Use this method instead of\n   * `input.blur()`.\n   */\n  @Method()\n  async doBlur(): Promise<void> {\n    this._input?.doBlur();\n  }\n\n  render() {\n    return (\n      <cat-input\n        ref={el => (this._input = el)}\n        requiredMarker={this.requiredMarker}\n        horizontal={this.horizontal}\n        autoComplete={this.autoComplete}\n        clearable={this.clearable}\n        disabled={this.disabled}\n        hint={this.hint}\n        icon={this.icon}\n        iconRight={this.iconRight}\n        identifier={this.identifier}\n        label={this.label}\n        labelHidden={this.labelHidden}\n        name={this.name}\n        placeholder={this.placeholder}\n        textPrefix={this.textPrefix}\n        textSuffix={this.textSuffix}\n        readonly={this.readonly}\n        required={this.required}\n        value={this.value}\n        errors={this.errors}\n        errorUpdate={this.errorUpdate}\n        nativeAttributes={this.nativeAttributes}\n        onCatChange={e => {\n          e.stopPropagation();\n          this.value = e.detail || undefined;\n        }}\n        onCatFocus={e => {\n          e.stopPropagation();\n          this.catFocus.emit(e.detail);\n        }}\n        onCatBlur={e => {\n          e.stopPropagation();\n          this.catBlur.emit(e.detail);\n        }}\n      >\n        {this.hasSlottedLabel && (\n          <span slot=\"label\">\n            <slot name=\"label\"></slot>\n          </span>\n        )}\n        {this.hasSlottedHint && (\n          <span slot=\"hint\">\n            <slot name=\"hint\"></slot>\n          </span>\n        )}\n      </cat-input>\n    );\n  }\n\n  private initDatepicker(input?: HTMLInputElement): flatpickr.Instance | undefined {\n    if (!input) {\n      return;\n    }\n\n    // avoid dropdown closing if datepicker is part of a dropdown\n    const withinDropdown = !!findClosest('cat-dropdown', input);\n    const nativePickerAttributes: { [key: string]: string } = withinDropdown ? { 'data-dropdown-no-close': '' } : {};\n\n    return flatpickr(\n      input,\n      getConfig({\n        locale: getLocale(i18n.getLocale()),\n        format: getFormat(i18n.getLocale(), this.mode),\n        mode: this.mode,\n        min: this.min,\n        max: this.max,\n        step: this.step,\n        disabled: this.disabled,\n        readonly: this.readonly,\n        nativePickerAttributes: { ...nativePickerAttributes, ...this.nativePickerAttributes },\n        applyChange: value => (this.value = value)\n      })\n    );\n  }\n}\n"]}

package/dist/components/cat-alert.js

@@ -7,7 +7,7 @@ function setAttributeDefault(host, attr, value) {
     }
 }
 
-const catAlertCss = ":host{display:flex;gap:0.5rem;padding:1.25rem;border-radius:var(--cat-border-radius-l, 0.5rem)}:host([hidden]){display:none}:host(:focus-visible){outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.content{align-self:center}::slotted(:last-child){margin-bottom:0 !important}:host([color=primary]){background-color:rgb(var(--cat-primary-bg, 0, 129, 148));color:rgb(var(--cat-primary-fill, 255, 255, 255));--cat-primary-text:var(--cat-primary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-primary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-primary-fill-active, 255, 255, 255);--cat-link-decoration:underline}:host([color=secondary]){background-color:rgb(var(--cat-secondary-bg, 105, 118, 135));color:rgb(var(--cat-secondary-fill, 255, 255, 255));--cat-primary-text:var(--cat-secondary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-secondary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-secondary-fill-active, 255, 255, 255);--cat-link-decoration:underline}:host([color=info]){background-color:rgb(var(--cat-success-bg, 0, 115, 230));color:rgb(var(--cat-success-fill, 255, 255, 255));--cat-primary-text:var(--cat-success-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-success-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-success-fill-active, 255, 255, 255);--cat-link-decoration:underline}:host([color=success]){background-color:rgb(var(--cat-success-bg, 0, 132, 88));color:rgb(var(--cat-success-fill, 255, 255, 255));--cat-primary-text:var(--cat-success-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-success-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-success-fill-active, 255, 255, 255);--cat-link-decoration:underline}:host([color=warning]){background-color:rgb(var(--cat-warning-bg, 255, 206, 128));color:rgb(var(--cat-warning-fill, 0, 0, 0));--cat-primary-text:var(--cat-warning-fill, 0, 0, 0);--cat-primary-text-hover:var(--cat-warning-fill-hover, 0, 0, 0);--cat-primary-text-active:var(--cat-warning-fill-active, 0, 0, 0);--cat-link-decoration:underline}:host([color=danger]){background-color:rgb(var(--cat-danger-bg, 217, 52, 13));color:rgb(var(--cat-danger-fill, 255, 255, 255));--cat-primary-text:var(--cat-danger-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-danger-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-danger-fill-active, 255, 255, 255);--cat-link-decoration:underline}";
+const catAlertCss = ":host{display:flex;gap:0.5rem;padding:1.25rem;border-radius:var(--cat-border-radius-l, 0.5rem)}:host([hidden]){display:none}:host(:focus-visible){outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.content{align-self:center;width:100%}::slotted(:last-child){margin-bottom:0 !important}:host([color=primary]){background-color:rgb(var(--cat-primary-bg, 0, 129, 148));color:rgb(var(--cat-primary-fill, 255, 255, 255));--cat-primary-text:var(--cat-primary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-primary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-primary-fill-active, 255, 255, 255);--cat-link-decoration:underline}:host([color=secondary]){background-color:rgb(var(--cat-secondary-bg, 105, 118, 135));color:rgb(var(--cat-secondary-fill, 255, 255, 255));--cat-primary-text:var(--cat-secondary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-secondary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-secondary-fill-active, 255, 255, 255);--cat-link-decoration:underline}:host([color=info]){background-color:rgb(var(--cat-success-bg, 0, 115, 230));color:rgb(var(--cat-success-fill, 255, 255, 255));--cat-primary-text:var(--cat-success-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-success-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-success-fill-active, 255, 255, 255);--cat-link-decoration:underline}:host([color=success]){background-color:rgb(var(--cat-success-bg, 0, 132, 88));color:rgb(var(--cat-success-fill, 255, 255, 255));--cat-primary-text:var(--cat-success-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-success-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-success-fill-active, 255, 255, 255);--cat-link-decoration:underline}:host([color=warning]){background-color:rgb(var(--cat-warning-bg, 255, 206, 128));color:rgb(var(--cat-warning-fill, 0, 0, 0));--cat-primary-text:var(--cat-warning-fill, 0, 0, 0);--cat-primary-text-hover:var(--cat-warning-fill-hover, 0, 0, 0);--cat-primary-text-active:var(--cat-warning-fill-active, 0, 0, 0);--cat-link-decoration:underline}:host([color=danger]){background-color:rgb(var(--cat-danger-bg, 217, 52, 13));color:rgb(var(--cat-danger-fill, 255, 255, 255));--cat-primary-text:var(--cat-danger-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-danger-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-danger-fill-active, 255, 255, 255);--cat-link-decoration:underline}";
 
 const CatAlert$1 = /*@__PURE__*/ proxyCustomElement(class CatAlert extends HTMLElement {
     constructor() {

package/dist/components/cat-alert.js.map

@@ -1 +1 @@
-{"file":"cat-alert.js","mappings":";;;SAAgB,mBAAmB,CACjC,IAAO,EACP,IAAY,EACZ,KAAc;IAEd,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,EAAE;QACzD,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;KACpD;AACH;;ACRA,MAAM,WAAW,GAAG,g6EAAg6E;;MCYv6EA,UAAQ;;;;;QACF,YAAO,GAAwB,IAAI,GAAG,CAAC;YACtD,CAAC,SAAS,EAAE,oBAAoB,CAAC;YACjC,CAAC,WAAW,EAAE,sBAAsB,CAAC;YACrC,CAAC,MAAM,EAAE,iBAAiB,CAAC;YAC3B,CAAC,SAAS,EAAE,oBAAoB,CAAC;YACjC,CAAC,SAAS,EAAE,oBAAoB,CAAC;YACjC,CAAC,QAAQ,EAAE,mBAAmB,CAAC;SAChC,CAAC,CAAC;QACc,YAAO,GAAwB,IAAI,GAAG,CAAC;YACtD,CAAC,SAAS,EAAE,QAAQ,CAAC;YACrB,CAAC,WAAW,EAAE,QAAQ,CAAC;YACvB,CAAC,MAAM,EAAE,QAAQ,CAAC;YAClB,CAAC,SAAS,EAAE,QAAQ,CAAC;YACrB,CAAC,SAAS,EAAE,OAAO,CAAC;YACpB,CAAC,QAAQ,EAAE,OAAO,CAAC;SACpB,CAAC,CAAC;qBAO0F,SAAS;;sBAUrF,KAAK;;IAEtB,iBAAiB;QACf,mBAAmB,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC;QACzC,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;KACjE;IAED,MAAM;QACJ,QACE,EAAC,IAAI,QACF,CAAC,IAAI,CAAC,MAAM,IAAI,gBAAU,IAAI,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,GAAa,EAChG,WAAK,KAAK,EAAC,SAAS,IAClB,eAAa,CACT,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatAlert"],"sources":["src/utils/setDefault.ts","src/components/cat-alert/cat-alert.scss?tag=cat-alert&encapsulation=shadow","src/components/cat-alert/cat-alert.tsx"],"sourcesContent":["export function setAttributeDefault<T extends { hostElement: HTMLElement }>(\n  host: T,\n  attr: string,\n  value: unknown\n): void {\n  if (!host.hostElement.hasAttribute(attr) && value != null) {\n    host.hostElement.setAttribute(attr, String(value));\n  }\n}\n\nexport function setAttribute<T extends { hostElement: HTMLElement }>(host: T, attr: string, value: unknown): void {\n  host.hostElement.setAttribute(attr, String(value));\n}\n","@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n:host {\n  display: flex;\n  gap: 0.5rem;\n  padding: 1.25rem;\n  border-radius: cat-border-radius('l');\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host(:focus-visible) {\n  outline: 2px solid cat-token('color.ui.border.focus');\n  outline-offset: 1px;\n}\n\n.content {\n  align-self: center;\n}\n\n::slotted(:last-child) {\n  margin-bottom: 0 !important;\n}\n\n// ----- theme\n\n@mixin theme($theme) {\n  :host([color='#{$theme}']) {\n    background-color: cat-token('color.theme.#{$theme}.bg');\n    color: cat-token('color.theme.#{$theme}.fill');\n    // adjust nested links\n    --cat-primary-text: #{cat-token('color.theme.#{$theme}.fill', $wrap: false)};\n    --cat-primary-text-hover: #{cat-token('color.theme.#{$theme}.fillHover', $wrap: false)};\n    --cat-primary-text-active: #{cat-token('color.theme.#{$theme}.fillActive', $wrap: false)};\n    --cat-link-decoration: underline;\n  }\n}\n\n@include theme('primary');\n@include theme('secondary');\n@include theme('info');\n@include theme('success');\n@include theme('warning');\n@include theme('danger');\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { setAttributeDefault } from '../../utils/setDefault';\n\n/**\n * Informs user about important changes or conditions in the interface. Use this\n * component if you need to capture user’s attention in a prominent way.\n */\n@Component({\n  tag: 'cat-alert',\n  styleUrl: 'cat-alert.scss',\n  shadow: true\n})\nexport class CatAlert {\n  private readonly mapIcon: Map<string, string> = new Map([\n    ['primary', '$cat:alert-primary'],\n    ['secondary', '$cat:alert-secondary'],\n    ['info', '$cat:alert-info'],\n    ['success', '$cat:alert-success'],\n    ['warning', '$cat:alert-warning'],\n    ['danger', '$cat:alert-danger']\n  ]);\n  private readonly mapRole: Map<string, string> = new Map([\n    ['primary', 'status'],\n    ['secondary', 'status'],\n    ['info', 'status'],\n    ['success', 'status'],\n    ['warning', 'alert'],\n    ['danger', 'alert']\n  ]);\n\n  @Element() hostElement!: HTMLElement;\n\n  /**\n   * The color palette of the alert.\n   */\n  @Prop({ reflect: true }) color: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' = 'primary';\n\n  /**\n   * The name of an icon to be displayed in the alert.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Whether the icon of the alert is deactivated.\n   */\n  @Prop() noIcon = false;\n\n  connectedCallback() {\n    setAttributeDefault(this, 'tabindex', 0);\n    setAttributeDefault(this, 'role', this.mapRole.get(this.color));\n  }\n\n  render() {\n    return (\n      <Host>\n        {!this.noIcon && <cat-icon size=\"l\" icon={this.icon || this.mapIcon.get(this.color)}></cat-icon>}\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"cat-alert.js","mappings":";;;SAAgB,mBAAmB,CACjC,IAAO,EACP,IAAY,EACZ,KAAc;IAEd,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,EAAE;QACzD,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;KACpD;AACH;;ACRA,MAAM,WAAW,GAAG,26EAA26E;;MCYl7EA,UAAQ;;;;;QACF,YAAO,GAAwB,IAAI,GAAG,CAAC;YACtD,CAAC,SAAS,EAAE,oBAAoB,CAAC;YACjC,CAAC,WAAW,EAAE,sBAAsB,CAAC;YACrC,CAAC,MAAM,EAAE,iBAAiB,CAAC;YAC3B,CAAC,SAAS,EAAE,oBAAoB,CAAC;YACjC,CAAC,SAAS,EAAE,oBAAoB,CAAC;YACjC,CAAC,QAAQ,EAAE,mBAAmB,CAAC;SAChC,CAAC,CAAC;QACc,YAAO,GAAwB,IAAI,GAAG,CAAC;YACtD,CAAC,SAAS,EAAE,QAAQ,CAAC;YACrB,CAAC,WAAW,EAAE,QAAQ,CAAC;YACvB,CAAC,MAAM,EAAE,QAAQ,CAAC;YAClB,CAAC,SAAS,EAAE,QAAQ,CAAC;YACrB,CAAC,SAAS,EAAE,OAAO,CAAC;YACpB,CAAC,QAAQ,EAAE,OAAO,CAAC;SACpB,CAAC,CAAC;qBAO0F,SAAS;;sBAUrF,KAAK;;IAEtB,iBAAiB;QACf,mBAAmB,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC;QACzC,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;KACjE;IAED,MAAM;QACJ,QACE,EAAC,IAAI,QACF,CAAC,IAAI,CAAC,MAAM,IAAI,gBAAU,IAAI,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,GAAa,EAChG,WAAK,KAAK,EAAC,SAAS,IAClB,eAAa,CACT,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatAlert"],"sources":["src/utils/setDefault.ts","src/components/cat-alert/cat-alert.scss?tag=cat-alert&encapsulation=shadow","src/components/cat-alert/cat-alert.tsx"],"sourcesContent":["export function setAttributeDefault<T extends { hostElement: HTMLElement }>(\n  host: T,\n  attr: string,\n  value: unknown\n): void {\n  if (!host.hostElement.hasAttribute(attr) && value != null) {\n    host.hostElement.setAttribute(attr, String(value));\n  }\n}\n\nexport function setAttribute<T extends { hostElement: HTMLElement }>(host: T, attr: string, value: unknown): void {\n  host.hostElement.setAttribute(attr, String(value));\n}\n","@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n:host {\n  display: flex;\n  gap: 0.5rem;\n  padding: 1.25rem;\n  border-radius: cat-border-radius('l');\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host(:focus-visible) {\n  outline: 2px solid cat-token('color.ui.border.focus');\n  outline-offset: 1px;\n}\n\n.content {\n  align-self: center;\n  width: 100%;\n}\n\n::slotted(:last-child) {\n  margin-bottom: 0 !important;\n}\n\n// ----- theme\n\n@mixin theme($theme) {\n  :host([color='#{$theme}']) {\n    background-color: cat-token('color.theme.#{$theme}.bg');\n    color: cat-token('color.theme.#{$theme}.fill');\n    // adjust nested links\n    --cat-primary-text: #{cat-token('color.theme.#{$theme}.fill', $wrap: false)};\n    --cat-primary-text-hover: #{cat-token('color.theme.#{$theme}.fillHover', $wrap: false)};\n    --cat-primary-text-active: #{cat-token('color.theme.#{$theme}.fillActive', $wrap: false)};\n    --cat-link-decoration: underline;\n  }\n}\n\n@include theme('primary');\n@include theme('secondary');\n@include theme('info');\n@include theme('success');\n@include theme('warning');\n@include theme('danger');\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { setAttributeDefault } from '../../utils/setDefault';\n\n/**\n * Informs user about important changes or conditions in the interface. Use this\n * component if you need to capture user’s attention in a prominent way.\n */\n@Component({\n  tag: 'cat-alert',\n  styleUrl: 'cat-alert.scss',\n  shadow: true\n})\nexport class CatAlert {\n  private readonly mapIcon: Map<string, string> = new Map([\n    ['primary', '$cat:alert-primary'],\n    ['secondary', '$cat:alert-secondary'],\n    ['info', '$cat:alert-info'],\n    ['success', '$cat:alert-success'],\n    ['warning', '$cat:alert-warning'],\n    ['danger', '$cat:alert-danger']\n  ]);\n  private readonly mapRole: Map<string, string> = new Map([\n    ['primary', 'status'],\n    ['secondary', 'status'],\n    ['info', 'status'],\n    ['success', 'status'],\n    ['warning', 'alert'],\n    ['danger', 'alert']\n  ]);\n\n  @Element() hostElement!: HTMLElement;\n\n  /**\n   * The color palette of the alert.\n   */\n  @Prop({ reflect: true }) color: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' = 'primary';\n\n  /**\n   * The name of an icon to be displayed in the alert.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Whether the icon of the alert is deactivated.\n   */\n  @Prop() noIcon = false;\n\n  connectedCallback() {\n    setAttributeDefault(this, 'tabindex', 0);\n    setAttributeDefault(this, 'role', this.mapRole.get(this.color));\n  }\n\n  render() {\n    return (\n      <Host>\n        {!this.noIcon && <cat-icon size=\"l\" icon={this.icon || this.mapIcon.get(this.color)}></cat-icon>}\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/cat-datepicker.js

@@ -79,7 +79,10 @@ const CatDatepickerFlat = /*@__PURE__*/ proxyCustomElement(class CatDatepickerFl
         // has been updated.
         this.pickr?.destroy();
         this.pickr = undefined;
-        setTimeout(() => (this.pickr = this.initDatepicker(this.input)));
+        setTimeout(() => {
+            this.input ? (this.input.disabled = this.disabled) : null;
+            this.pickr = this.initDatepicker(this.input);
+        });
     }
     componentDidLoad() {
         this.pickr = this.initDatepicker(this.input);
@@ -127,7 +130,7 @@ const CatDatepickerFlat = /*@__PURE__*/ proxyCustomElement(class CatDatepickerFl
             } }, this.hasSlottedLabel && (h("span", { slot: "label" }, h("slot", { name: "label" }))), this.hasSlottedHint && (h("span", { slot: "hint" }, h("slot", { name: "hint" })))));
     }
     initDatepicker(input) {
-        if (this.disabled || this.readonly || !input) {
+        if (!input) {
             return;
         }
         // avoid dropdown closing if datepicker is part of a dropdown

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

@@ -1 +1 @@
-{"file":"cat-datepicker.js","mappings":"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","names":["i18n"],"sources":["src/utils/find-closest.ts","src/components/cat-datepicker/cat-datepicker.scss?tag=cat-datepicker&encapsulation=shadow","src/components/cat-datepicker/cat-datepicker.tsx"],"sourcesContent":["/**\n * Find the closest parent element matching the given selector while traversing\n * up the DOM tree (including Shadow DOM).\n */\nexport function findClosest(selector: string, element: Element | ShadowRoot): Element | null {\n  if (element instanceof Element && element.matches(selector)) {\n    return element;\n  }\n\n  // Search in parent element or Shadow DOM host\n  const nextElement =\n    element instanceof ShadowRoot ? element.host : element.parentElement || (element.getRootNode() as ShadowRoot).host;\n  return nextElement ? findClosest(selector, nextElement) : null;\n}\n","@use 'variables' as *;\n@use 'mixins' as *;\n\n:host {\n  display: flex;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\ncat-input {\n  flex: 1 1 auto;\n  margin: 0;\n}\n","import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch, h } from '@stencil/core';\nimport flatpickr from 'flatpickr';\nimport { findClosest } from '../../utils/find-closest';\nimport { ErrorMap } from '../cat-form-hint/cat-form-hint';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\nimport { getConfig } from './cat-datepicker.config';\nimport { getFormat } from './cat-datepicker.format';\nimport { getLocale } from './cat-datepicker.locale';\nimport { CatDatepickerMode } from './cat-datepicker.mode';\n\n@Component({\n  tag: 'cat-datepicker',\n  styleUrl: 'cat-datepicker.scss',\n  shadow: true\n})\nexport class CatDatepickerFlat {\n  private pickr?: flatpickr.Instance;\n  private _input?: HTMLCatInputElement;\n  private get input(): HTMLInputElement | undefined {\n    return this._input?.shadowRoot?.querySelector('input') ?? undefined;\n  }\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  @State() hasSlottedHint = false;\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 as ISO Date string, e.g. 2017-03-04T01:23:43.000Z.\n   */\n  @Prop() max?: string;\n\n  /**\n   * A minimum value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z.\n   */\n  @Prop() min?: string;\n\n  /**\n   * The mode of the datepicker, to select a date, time, both, a date range or a week number.\n   */\n  @Prop() mode: CatDatepickerMode = 'date';\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   * The step size to use when changing the time.\n   */\n  @Prop() step = 5;\n\n  /**\n   * The value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z or as a week number string.\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   * Attributes that will be added to the rendered HTML datepicker element.\n   */\n  @Prop() nativePickerAttributes?: { [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  @Watch('value')\n  onValueChanged(value: string) {\n    if (value) {\n      this.pickr?.setDate(value, false);\n      if (this.mode !== 'daterange' || value.includes(' - ')) {\n        this.catChange.emit(value);\n      }\n    } else {\n      this.pickr?.clear(false);\n      this.catChange.emit(undefined);\n    }\n  }\n\n  @Watch('disabled')\n  @Watch('readonly')\n  onDisabledChanged() {\n    // Dynamically changing 'disabled' value is not working due to a bug in the\n    // library. We thus need to fully recreate the date picker after the value\n    // has been updated.\n    this.pickr?.destroy();\n    this.pickr = undefined;\n    setTimeout(() => (this.pickr = this.initDatepicker(this.input)));\n  }\n\n  componentDidLoad() {\n    this.pickr = this.initDatepicker(this.input);\n  }\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n  }\n\n  @Watch('min')\n  @Watch('max')\n  onMinChanged() {\n    this.pickr?.set('minDate', this.min);\n    this.pickr?.set('maxDate', this.max);\n    if (this.value && !this.pickr?.selectedDates?.length) {\n      // Dynamically changing 'minDate' or 'maxDate' does not emit a change if\n      // the value is cleared due to an invalid date.\n      this.pickr?.clear();\n    }\n  }\n\n  /**\n   * Programmatically move focus to the datepicker. 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    this._input?.doFocus(options);\n  }\n\n  /**\n   * Programmatically remove focus from the datepicker. Use this method instead of\n   * `input.blur()`.\n   */\n  @Method()\n  async doBlur(): Promise<void> {\n    this._input?.doBlur();\n  }\n\n  render() {\n    return (\n      <cat-input\n        ref={el => (this._input = el)}\n        requiredMarker={this.requiredMarker}\n        horizontal={this.horizontal}\n        autoComplete={this.autoComplete}\n        clearable={this.clearable}\n        disabled={this.disabled}\n        hint={this.hint}\n        icon={this.icon}\n        iconRight={this.iconRight}\n        identifier={this.identifier}\n        label={this.label}\n        labelHidden={this.labelHidden}\n        name={this.name}\n        placeholder={this.placeholder}\n        textPrefix={this.textPrefix}\n        textSuffix={this.textSuffix}\n        readonly={this.readonly}\n        required={this.required}\n        value={this.value}\n        errors={this.errors}\n        errorUpdate={this.errorUpdate}\n        nativeAttributes={this.nativeAttributes}\n        onCatChange={e => {\n          e.stopPropagation();\n          this.value = e.detail || undefined;\n        }}\n        onCatFocus={e => {\n          e.stopPropagation();\n          this.catFocus.emit(e.detail);\n        }}\n        onCatBlur={e => {\n          e.stopPropagation();\n          this.catBlur.emit(e.detail);\n        }}\n      >\n        {this.hasSlottedLabel && (\n          <span slot=\"label\">\n            <slot name=\"label\"></slot>\n          </span>\n        )}\n        {this.hasSlottedHint && (\n          <span slot=\"hint\">\n            <slot name=\"hint\"></slot>\n          </span>\n        )}\n      </cat-input>\n    );\n  }\n\n  private initDatepicker(input?: HTMLInputElement): flatpickr.Instance | undefined {\n    if (this.disabled || this.readonly || !input) {\n      return;\n    }\n\n    // avoid dropdown closing if datepicker is part of a dropdown\n    const withinDropdown = !!findClosest('cat-dropdown', input);\n    const nativePickerAttributes: { [key: string]: string } = withinDropdown ? { 'data-dropdown-no-close': '' } : {};\n\n    return flatpickr(\n      input,\n      getConfig({\n        locale: getLocale(i18n.getLocale()),\n        format: getFormat(i18n.getLocale(), this.mode),\n        mode: this.mode,\n        min: this.min,\n        max: this.max,\n        step: this.step,\n        disabled: this.disabled,\n        readonly: this.readonly,\n        nativePickerAttributes: { ...nativePickerAttributes, ...this.nativePickerAttributes },\n        applyChange: value => (this.value = value)\n      })\n    );\n  }\n}\n"],"version":3}
+{"file":"cat-datepicker.js","mappings":"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","names":["i18n"],"sources":["src/utils/find-closest.ts","src/components/cat-datepicker/cat-datepicker.scss?tag=cat-datepicker&encapsulation=shadow","src/components/cat-datepicker/cat-datepicker.tsx"],"sourcesContent":["/**\n * Find the closest parent element matching the given selector while traversing\n * up the DOM tree (including Shadow DOM).\n */\nexport function findClosest(selector: string, element: Element | ShadowRoot): Element | null {\n  if (element instanceof Element && element.matches(selector)) {\n    return element;\n  }\n\n  // Search in parent element or Shadow DOM host\n  const nextElement =\n    element instanceof ShadowRoot ? element.host : element.parentElement || (element.getRootNode() as ShadowRoot).host;\n  return nextElement ? findClosest(selector, nextElement) : null;\n}\n","@use 'variables' as *;\n@use 'mixins' as *;\n\n:host {\n  display: flex;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\ncat-input {\n  flex: 1 1 auto;\n  margin: 0;\n}\n","import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch, h } from '@stencil/core';\nimport flatpickr from 'flatpickr';\nimport { findClosest } from '../../utils/find-closest';\nimport { ErrorMap } from '../cat-form-hint/cat-form-hint';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\nimport { getConfig } from './cat-datepicker.config';\nimport { getFormat } from './cat-datepicker.format';\nimport { getLocale } from './cat-datepicker.locale';\nimport { CatDatepickerMode } from './cat-datepicker.mode';\n\n@Component({\n  tag: 'cat-datepicker',\n  styleUrl: 'cat-datepicker.scss',\n  shadow: true\n})\nexport class CatDatepickerFlat {\n  private pickr?: flatpickr.Instance;\n  private _input?: HTMLCatInputElement;\n  private get input(): HTMLInputElement | undefined {\n    return this._input?.shadowRoot?.querySelector('input') ?? undefined;\n  }\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  @State() hasSlottedHint = false;\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 as ISO Date string, e.g. 2017-03-04T01:23:43.000Z.\n   */\n  @Prop() max?: string;\n\n  /**\n   * A minimum value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z.\n   */\n  @Prop() min?: string;\n\n  /**\n   * The mode of the datepicker, to select a date, time, both, a date range or a week number.\n   */\n  @Prop() mode: CatDatepickerMode = 'date';\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   * The step size to use when changing the time.\n   */\n  @Prop() step = 5;\n\n  /**\n   * The value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z or as a week number string.\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   * Attributes that will be added to the rendered HTML datepicker element.\n   */\n  @Prop() nativePickerAttributes?: { [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  @Watch('value')\n  onValueChanged(value: string) {\n    if (value) {\n      this.pickr?.setDate(value, false);\n      if (this.mode !== 'daterange' || value.includes(' - ')) {\n        this.catChange.emit(value);\n      }\n    } else {\n      this.pickr?.clear(false);\n      this.catChange.emit(undefined);\n    }\n  }\n\n  @Watch('disabled')\n  @Watch('readonly')\n  onDisabledChanged() {\n    // Dynamically changing 'disabled' value is not working due to a bug in the\n    // library. We thus need to fully recreate the date picker after the value\n    // has been updated.\n    this.pickr?.destroy();\n    this.pickr = undefined;\n    setTimeout(() => {\n      this.input ? (this.input.disabled = this.disabled) : null;\n      this.pickr = this.initDatepicker(this.input);\n    });\n  }\n\n  componentDidLoad() {\n    this.pickr = this.initDatepicker(this.input);\n  }\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n  }\n\n  @Watch('min')\n  @Watch('max')\n  onMinChanged() {\n    this.pickr?.set('minDate', this.min);\n    this.pickr?.set('maxDate', this.max);\n    if (this.value && !this.pickr?.selectedDates?.length) {\n      // Dynamically changing 'minDate' or 'maxDate' does not emit a change if\n      // the value is cleared due to an invalid date.\n      this.pickr?.clear();\n    }\n  }\n\n  /**\n   * Programmatically move focus to the datepicker. 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    this._input?.doFocus(options);\n  }\n\n  /**\n   * Programmatically remove focus from the datepicker. Use this method instead of\n   * `input.blur()`.\n   */\n  @Method()\n  async doBlur(): Promise<void> {\n    this._input?.doBlur();\n  }\n\n  render() {\n    return (\n      <cat-input\n        ref={el => (this._input = el)}\n        requiredMarker={this.requiredMarker}\n        horizontal={this.horizontal}\n        autoComplete={this.autoComplete}\n        clearable={this.clearable}\n        disabled={this.disabled}\n        hint={this.hint}\n        icon={this.icon}\n        iconRight={this.iconRight}\n        identifier={this.identifier}\n        label={this.label}\n        labelHidden={this.labelHidden}\n        name={this.name}\n        placeholder={this.placeholder}\n        textPrefix={this.textPrefix}\n        textSuffix={this.textSuffix}\n        readonly={this.readonly}\n        required={this.required}\n        value={this.value}\n        errors={this.errors}\n        errorUpdate={this.errorUpdate}\n        nativeAttributes={this.nativeAttributes}\n        onCatChange={e => {\n          e.stopPropagation();\n          this.value = e.detail || undefined;\n        }}\n        onCatFocus={e => {\n          e.stopPropagation();\n          this.catFocus.emit(e.detail);\n        }}\n        onCatBlur={e => {\n          e.stopPropagation();\n          this.catBlur.emit(e.detail);\n        }}\n      >\n        {this.hasSlottedLabel && (\n          <span slot=\"label\">\n            <slot name=\"label\"></slot>\n          </span>\n        )}\n        {this.hasSlottedHint && (\n          <span slot=\"hint\">\n            <slot name=\"hint\"></slot>\n          </span>\n        )}\n      </cat-input>\n    );\n  }\n\n  private initDatepicker(input?: HTMLInputElement): flatpickr.Instance | undefined {\n    if (!input) {\n      return;\n    }\n\n    // avoid dropdown closing if datepicker is part of a dropdown\n    const withinDropdown = !!findClosest('cat-dropdown', input);\n    const nativePickerAttributes: { [key: string]: string } = withinDropdown ? { 'data-dropdown-no-close': '' } : {};\n\n    return flatpickr(\n      input,\n      getConfig({\n        locale: getLocale(i18n.getLocale()),\n        format: getFormat(i18n.getLocale(), this.mode),\n        mode: this.mode,\n        min: this.min,\n        max: this.max,\n        step: this.step,\n        disabled: this.disabled,\n        readonly: this.readonly,\n        nativePickerAttributes: { ...nativePickerAttributes, ...this.nativePickerAttributes },\n        applyChange: value => (this.value = value)\n      })\n    );\n  }\n}\n"],"version":3}

package/dist/esm/cat-alert_26.entry.js

@@ -786,7 +786,7 @@ function setAttributeDefault(host, attr, value) {
     }
 }
 
-const catAlertCss = ":host{display:flex;gap:0.5rem;padding:1.25rem;border-radius:var(--cat-border-radius-l, 0.5rem)}:host([hidden]){display:none}:host(:focus-visible){outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.content{align-self:center}::slotted(:last-child){margin-bottom:0 !important}:host([color=primary]){background-color:rgb(var(--cat-primary-bg, 0, 129, 148));color:rgb(var(--cat-primary-fill, 255, 255, 255));--cat-primary-text:var(--cat-primary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-primary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-primary-fill-active, 255, 255, 255);--cat-link-decoration:underline}:host([color=secondary]){background-color:rgb(var(--cat-secondary-bg, 105, 118, 135));color:rgb(var(--cat-secondary-fill, 255, 255, 255));--cat-primary-text:var(--cat-secondary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-secondary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-secondary-fill-active, 255, 255, 255);--cat-link-decoration:underline}:host([color=info]){background-color:rgb(var(--cat-success-bg, 0, 115, 230));color:rgb(var(--cat-success-fill, 255, 255, 255));--cat-primary-text:var(--cat-success-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-success-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-success-fill-active, 255, 255, 255);--cat-link-decoration:underline}:host([color=success]){background-color:rgb(var(--cat-success-bg, 0, 132, 88));color:rgb(var(--cat-success-fill, 255, 255, 255));--cat-primary-text:var(--cat-success-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-success-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-success-fill-active, 255, 255, 255);--cat-link-decoration:underline}:host([color=warning]){background-color:rgb(var(--cat-warning-bg, 255, 206, 128));color:rgb(var(--cat-warning-fill, 0, 0, 0));--cat-primary-text:var(--cat-warning-fill, 0, 0, 0);--cat-primary-text-hover:var(--cat-warning-fill-hover, 0, 0, 0);--cat-primary-text-active:var(--cat-warning-fill-active, 0, 0, 0);--cat-link-decoration:underline}:host([color=danger]){background-color:rgb(var(--cat-danger-bg, 217, 52, 13));color:rgb(var(--cat-danger-fill, 255, 255, 255));--cat-primary-text:var(--cat-danger-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-danger-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-danger-fill-active, 255, 255, 255);--cat-link-decoration:underline}";
+const catAlertCss = ":host{display:flex;gap:0.5rem;padding:1.25rem;border-radius:var(--cat-border-radius-l, 0.5rem)}:host([hidden]){display:none}:host(:focus-visible){outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.content{align-self:center;width:100%}::slotted(:last-child){margin-bottom:0 !important}:host([color=primary]){background-color:rgb(var(--cat-primary-bg, 0, 129, 148));color:rgb(var(--cat-primary-fill, 255, 255, 255));--cat-primary-text:var(--cat-primary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-primary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-primary-fill-active, 255, 255, 255);--cat-link-decoration:underline}:host([color=secondary]){background-color:rgb(var(--cat-secondary-bg, 105, 118, 135));color:rgb(var(--cat-secondary-fill, 255, 255, 255));--cat-primary-text:var(--cat-secondary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-secondary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-secondary-fill-active, 255, 255, 255);--cat-link-decoration:underline}:host([color=info]){background-color:rgb(var(--cat-success-bg, 0, 115, 230));color:rgb(var(--cat-success-fill, 255, 255, 255));--cat-primary-text:var(--cat-success-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-success-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-success-fill-active, 255, 255, 255);--cat-link-decoration:underline}:host([color=success]){background-color:rgb(var(--cat-success-bg, 0, 132, 88));color:rgb(var(--cat-success-fill, 255, 255, 255));--cat-primary-text:var(--cat-success-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-success-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-success-fill-active, 255, 255, 255);--cat-link-decoration:underline}:host([color=warning]){background-color:rgb(var(--cat-warning-bg, 255, 206, 128));color:rgb(var(--cat-warning-fill, 0, 0, 0));--cat-primary-text:var(--cat-warning-fill, 0, 0, 0);--cat-primary-text-hover:var(--cat-warning-fill-hover, 0, 0, 0);--cat-primary-text-active:var(--cat-warning-fill-active, 0, 0, 0);--cat-link-decoration:underline}:host([color=danger]){background-color:rgb(var(--cat-danger-bg, 217, 52, 13));color:rgb(var(--cat-danger-fill, 255, 255, 255));--cat-primary-text:var(--cat-danger-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-danger-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-danger-fill-active, 255, 255, 255);--cat-link-decoration:underline}";
 
 const CatAlert = class {
     constructor(hostRef) {
@@ -4197,7 +4197,10 @@ const CatDatepickerFlat = class {
         // has been updated.
         this.pickr?.destroy();
         this.pickr = undefined;
-        setTimeout(() => (this.pickr = this.initDatepicker(this.input)));
+        setTimeout(() => {
+            this.input ? (this.input.disabled = this.disabled) : null;
+            this.pickr = this.initDatepicker(this.input);
+        });
     }
     componentDidLoad() {
         this.pickr = this.initDatepicker(this.input);
@@ -4245,7 +4248,7 @@ const CatDatepickerFlat = class {
             } }, this.hasSlottedLabel && (h("span", { slot: "label" }, h("slot", { name: "label" }))), this.hasSlottedHint && (h("span", { slot: "hint" }, h("slot", { name: "hint" })))));
     }
     initDatepicker(input) {
-        if (this.disabled || this.readonly || !input) {
+        if (!input) {
             return;
         }
         // avoid dropdown closing if datepicker is part of a dropdown