@haiilo/catalyst 8.1.0 → 8.2.0

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

@@ -6,722 +6,735 @@ import { getConfig } from "./cat-datepicker.config";
 import { getFormat } from "./cat-datepicker.format";
 import { getLocale } from "./cat-datepicker.locale";
 export class CatDatepickerFlat {
-  constructor() {
-    this.requiredMarker = 'optional';
-    this.horizontal = false;
-    this.autoComplete = undefined;
-    this.clearable = false;
-    this.disabled = false;
-    this.hint = undefined;
-    this.icon = undefined;
-    this.iconRight = false;
-    this.identifier = undefined;
-    this.label = '';
-    this.labelHidden = false;
-    this.max = undefined;
-    this.min = undefined;
-    this.mode = 'date';
-    this.name = undefined;
-    this.placeholder = undefined;
-    this.textPrefix = undefined;
-    this.textSuffix = undefined;
-    this.readonly = false;
-    this.required = false;
-    this.step = 5;
-    this.value = undefined;
-    this.errors = undefined;
-    this.errorUpdate = 0;
-    this.nativeAttributes = undefined;
-    this.nativePickerAttributes = undefined;
-  }
-  get input() {
-    return this._input?.shadowRoot?.querySelector('input') ?? undefined;
-  }
-  onValueChanged(value) {
-    if (value) {
-      this.pickr?.setDate(value, false);
-      if (this.mode !== 'daterange' || value.includes(' - ')) {
-        this.catChange.emit(value);
-      }
+    constructor() {
+        this.hasSlottedLabel = false;
+        this.hasSlottedHint = false;
+        this.requiredMarker = 'optional';
+        this.horizontal = false;
+        this.autoComplete = undefined;
+        this.clearable = false;
+        this.disabled = false;
+        this.hint = undefined;
+        this.icon = undefined;
+        this.iconRight = false;
+        this.identifier = undefined;
+        this.label = '';
+        this.labelHidden = false;
+        this.max = undefined;
+        this.min = undefined;
+        this.mode = 'date';
+        this.name = undefined;
+        this.placeholder = undefined;
+        this.textPrefix = undefined;
+        this.textSuffix = undefined;
+        this.readonly = false;
+        this.required = false;
+        this.step = 5;
+        this.value = undefined;
+        this.errors = undefined;
+        this.errorUpdate = 0;
+        this.nativeAttributes = undefined;
+        this.nativePickerAttributes = undefined;
     }
-    else {
-      this.pickr?.clear(false);
-      this.catChange.emit(undefined);
+    get input() {
+        return this._input?.shadowRoot?.querySelector('input') ?? undefined;
     }
-  }
-  onDisabledChanged() {
-    // Dynamically changing 'disabled' value is not working due to a bug in the
-    // library. We thus need to fully recreate the date picker after the value
-    // has been updated.
-    this.pickr?.destroy();
-    this.pickr = undefined;
-    setTimeout(() => (this.pickr = this.initDatepicker(this.input)));
-  }
-  componentDidLoad() {
-    this.pickr = this.initDatepicker(this.input);
-  }
-  onMinChanged() {
-    this.pickr?.set('minDate', this.min);
-    this.pickr?.set('maxDate', this.max);
-    if (this.value && !this.pickr?.selectedDates?.length) {
-      // Dynamically changing 'minDate' or 'maxDate' does not emit a change if
-      // the value is cleared due to an invalid date.
-      this.pickr?.clear();
-    }
-  }
-  /**
-   * Programmatically move focus to the datepicker. Use this method instead of
-   * `input.focus()`.
-   *
-   * @param options An optional object providing options to control aspects of
-   * the focusing process.
-   */
-  async doFocus(options) {
-    this._input?.doFocus(options);
-  }
-  /**
-   * Programmatically remove focus from the datepicker. Use this method instead of
-   * `input.blur()`.
-   */
-  async doBlur() {
-    this._input?.doBlur();
-  }
-  render() {
-    return (h("cat-input", { ref: el => (this._input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal, autoComplete: this.autoComplete, clearable: this.clearable, disabled: this.disabled, hint: this.hint, icon: this.icon, iconRight: this.iconRight, identifier: this.identifier, label: this.label, labelHidden: this.labelHidden, name: this.name, placeholder: this.placeholder, textPrefix: this.textPrefix, textSuffix: this.textSuffix, readonly: this.readonly, required: this.required, value: this.value, errors: this.errors, errorUpdate: this.errorUpdate, nativeAttributes: this.nativeAttributes, onCatChange: e => {
-        e.stopPropagation();
-        this.value = e.detail || undefined;
-      }, onCatFocus: e => {
-        e.stopPropagation();
-        this.catFocus.emit(e.detail);
-      }, onCatBlur: e => {
-        e.stopPropagation();
-        this.catBlur.emit(e.detail);
-      } }));
-  }
-  initDatepicker(input) {
-    if (this.disabled || this.readonly || !input) {
-      return;
-    }
-    // avoid dropdown closing if datepicker is part of a dropdown
-    const withinDropdown = !!findClosest('cat-dropdown', input);
-    const nativePickerAttributes = withinDropdown ? { 'data-dropdown-no-close': '' } : {};
-    return flatpickr(input, getConfig({
-      locale: getLocale(i18n.getLocale()),
-      format: getFormat(i18n.getLocale(), this.mode),
-      mode: this.mode,
-      min: this.min,
-      max: this.max,
-      step: this.step,
-      disabled: this.disabled,
-      readonly: this.readonly,
-      nativePickerAttributes: { ...nativePickerAttributes, ...this.nativePickerAttributes },
-      applyChange: value => (this.value = value)
-    }));
-  }
-  static get is() { return "cat-datepicker"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["cat-datepicker.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["cat-datepicker.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "requiredMarker": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!'",
-          "resolved": "\"none!\" | \"none\" | \"optional!\" | \"optional\" | \"required!\" | \"required\" | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Whether the label need a marker to shown if the input is required or optional."
-        },
-        "attribute": "required-marker",
-        "reflect": false,
-        "defaultValue": "'optional'"
-      },
-      "horizontal": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether the label is on top or left."
-        },
-        "attribute": "horizontal",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "autoComplete": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Hint for form autofill feature."
-        },
-        "attribute": "auto-complete",
-        "reflect": false
-      },
-      "clearable": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether the input should show a clear button."
-        },
-        "attribute": "clearable",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether the input is disabled."
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "hint": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | string[]",
-          "resolved": "string | string[] | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Optional hint text(s) to be displayed with the input."
-        },
-        "attribute": "hint",
-        "reflect": false
-      },
-      "icon": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The name of an icon to be displayed in the input."
-        },
-        "attribute": "icon",
-        "reflect": false
-      },
-      "iconRight": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Display the icon on the right."
-        },
-        "attribute": "icon-right",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "identifier": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "A unique identifier for the input."
-        },
-        "attribute": "identifier",
-        "reflect": false
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The label for the input."
-        },
-        "attribute": "label",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "labelHidden": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Visually hide the label, but still show it to assistive technologies like screen readers."
-        },
-        "attribute": "label-hidden",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "max": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "A maximum value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z."
-        },
-        "attribute": "max",
-        "reflect": false
-      },
-      "min": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "A minimum value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z."
-        },
-        "attribute": "min",
-        "reflect": false
-      },
-      "mode": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "CatDatepickerMode",
-          "resolved": "\"date\" | \"daterange\" | \"datetime\" | \"time\" | \"week\"",
-          "references": {
-            "CatDatepickerMode": {
-              "location": "import",
-              "path": "./cat-datepicker.mode",
-              "id": "src/components/cat-datepicker/cat-datepicker.mode.ts::CatDatepickerMode"
+    onValueChanged(value) {
+        if (value) {
+            this.pickr?.setDate(value, false);
+            if (this.mode !== 'daterange' || value.includes(' - ')) {
+                this.catChange.emit(value);
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The mode of the datepicker, to select a date, time, both, a date range or a week number."
-        },
-        "attribute": "mode",
-        "reflect": false,
-        "defaultValue": "'date'"
-      },
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The name of the form control. Submitted with the form as part of a name/value pair."
-        },
-        "attribute": "name",
-        "reflect": false
-      },
-      "placeholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The placeholder text to display within the input."
-        },
-        "attribute": "placeholder",
-        "reflect": false
-      },
-      "textPrefix": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "A textual prefix to be displayed in the input."
-        },
-        "attribute": "text-prefix",
-        "reflect": false
-      },
-      "textSuffix": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "A textual suffix to be displayed in the input."
-        },
-        "attribute": "text-suffix",
-        "reflect": false
-      },
-      "readonly": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The value is not editable."
-        },
-        "attribute": "readonly",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "required": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "A value is required or must be check for the form to be submittable."
-        },
-        "attribute": "required",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "step": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The step size to use when changing the time."
-        },
-        "attribute": "step",
-        "reflect": false,
-        "defaultValue": "5"
-      },
-      "value": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z or as a week number string."
-        },
-        "attribute": "value",
-        "reflect": false
-      },
-      "errors": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean | string[] | ErrorMap",
-          "resolved": "boolean | string[] | undefined | { [key: string]: any; }",
-          "references": {
-            "ErrorMap": {
-              "location": "import",
-              "path": "../cat-form-hint/cat-form-hint",
-              "id": "src/components/cat-form-hint/cat-form-hint.tsx::ErrorMap"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The validation errors for this input. Will render a hint under the input\nwith the translated error message(s) `error.${key}`. If an object is\npassed, the keys will be used as error keys and the values translation\nparameters.\nIf the value is `true`, the input will be marked as invalid without any\nhints under the input."
-        },
-        "attribute": "errors",
-        "reflect": false
-      },
-      "errorUpdate": {
-        "type": "any",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean | number",
-          "resolved": "boolean | number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Fine-grained control over when the errors are shown. Can be `false` to\nnever show errors, `true` to show errors on blur, or a number to show\nerrors on change with the given delay in milliseconds."
-        },
-        "attribute": "error-update",
-        "reflect": false,
-        "defaultValue": "0"
-      },
-      "nativeAttributes": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "{ [key: string]: string }",
-          "resolved": "undefined | { [key: string]: string; }",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Attributes that will be added to the native HTML input element."
-        }
-      },
-      "nativePickerAttributes": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "{ [key: string]: string }",
-          "resolved": "undefined | { [key: string]: string; }",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Attributes that will be added to the rendered HTML datepicker element."
         }
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "catChange",
-        "name": "catChange",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the value is changed."
-        },
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+        else {
+            this.pickr?.clear(false);
+            this.catChange.emit(undefined);
         }
-      }, {
-        "method": "catFocus",
-        "name": "catFocus",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the input received focus."
-        },
-        "complexType": {
-          "original": "FocusEvent",
-          "resolved": "FocusEvent",
-          "references": {
-            "FocusEvent": {
-              "location": "global",
-              "id": "global::FocusEvent"
-            }
-          }
+    }
+    onDisabledChanged() {
+        // Dynamically changing 'disabled' value is not working due to a bug in the
+        // library. We thus need to fully recreate the date picker after the value
+        // has been updated.
+        this.pickr?.destroy();
+        this.pickr = undefined;
+        setTimeout(() => (this.pickr = this.initDatepicker(this.input)));
+    }
+    componentDidLoad() {
+        this.pickr = this.initDatepicker(this.input);
+    }
+    componentWillRender() {
+        this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
+        this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
+    }
+    onMinChanged() {
+        this.pickr?.set('minDate', this.min);
+        this.pickr?.set('maxDate', this.max);
+        if (this.value && !this.pickr?.selectedDates?.length) {
+            // Dynamically changing 'minDate' or 'maxDate' does not emit a change if
+            // the value is cleared due to an invalid date.
+            this.pickr?.clear();
         }
-      }, {
-        "method": "catBlur",
-        "name": "catBlur",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the input loses focus."
-        },
-        "complexType": {
-          "original": "FocusEvent",
-          "resolved": "FocusEvent",
-          "references": {
-            "FocusEvent": {
-              "location": "global",
-              "id": "global::FocusEvent"
-            }
-          }
+    }
+    /**
+     * Programmatically move focus to the datepicker. Use this method instead of
+     * `input.focus()`.
+     *
+     * @param options An optional object providing options to control aspects of
+     * the focusing process.
+     */
+    async doFocus(options) {
+        this._input?.doFocus(options);
+    }
+    /**
+     * Programmatically remove focus from the datepicker. Use this method instead of
+     * `input.blur()`.
+     */
+    async doBlur() {
+        this._input?.doBlur();
+    }
+    render() {
+        return (h("cat-input", { ref: el => (this._input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal, autoComplete: this.autoComplete, clearable: this.clearable, disabled: this.disabled, hint: this.hint, icon: this.icon, iconRight: this.iconRight, identifier: this.identifier, label: this.label, labelHidden: this.labelHidden, name: this.name, placeholder: this.placeholder, textPrefix: this.textPrefix, textSuffix: this.textSuffix, readonly: this.readonly, required: this.required, value: this.value, errors: this.errors, errorUpdate: this.errorUpdate, nativeAttributes: this.nativeAttributes, onCatChange: e => {
+                e.stopPropagation();
+                this.value = e.detail || undefined;
+            }, onCatFocus: e => {
+                e.stopPropagation();
+                this.catFocus.emit(e.detail);
+            }, onCatBlur: e => {
+                e.stopPropagation();
+                this.catBlur.emit(e.detail);
+            } }, 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) {
+            return;
         }
-      }];
-  }
-  static get methods() {
-    return {
-      "doFocus": {
-        "complexType": {
-          "signature": "(options?: FocusOptions) => Promise<void>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "options An optional object providing options to control aspects of\nthe focusing process."
-                }],
-              "text": "An optional object providing options to control aspects of\nthe focusing process."
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+        // avoid dropdown closing if datepicker is part of a dropdown
+        const withinDropdown = !!findClosest('cat-dropdown', input);
+        const nativePickerAttributes = withinDropdown ? { 'data-dropdown-no-close': '' } : {};
+        return flatpickr(input, getConfig({
+            locale: getLocale(i18n.getLocale()),
+            format: getFormat(i18n.getLocale(), this.mode),
+            mode: this.mode,
+            min: this.min,
+            max: this.max,
+            step: this.step,
+            disabled: this.disabled,
+            readonly: this.readonly,
+            nativePickerAttributes: { ...nativePickerAttributes, ...this.nativePickerAttributes },
+            applyChange: value => (this.value = value)
+        }));
+    }
+    static get is() { return "cat-datepicker"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cat-datepicker.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cat-datepicker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "requiredMarker": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!'",
+                    "resolved": "\"none!\" | \"none\" | \"optional!\" | \"optional\" | \"required!\" | \"required\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the label need a marker to shown if the input is required or optional."
+                },
+                "attribute": "required-marker",
+                "reflect": false,
+                "defaultValue": "'optional'"
+            },
+            "horizontal": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the label is on top or left."
+                },
+                "attribute": "horizontal",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "autoComplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Hint for form autofill feature."
+                },
+                "attribute": "auto-complete",
+                "reflect": false
+            },
+            "clearable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input should show a clear button."
+                },
+                "attribute": "clearable",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is disabled."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "hint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[] | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional hint text(s) to be displayed with the input."
+                },
+                "attribute": "hint",
+                "reflect": false
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of an icon to be displayed in the input."
+                },
+                "attribute": "icon",
+                "reflect": false
+            },
+            "iconRight": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display the icon on the right."
+                },
+                "attribute": "icon-right",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "identifier": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A unique identifier for the input."
+                },
+                "attribute": "identifier",
+                "reflect": false
             },
-            "FocusOptions": {
-              "location": "global",
-              "id": "global::FocusOptions"
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label for the input."
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "labelHidden": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visually hide the label, but still show it to assistive technologies like screen readers."
+                },
+                "attribute": "label-hidden",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "max": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A maximum value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z."
+                },
+                "attribute": "max",
+                "reflect": false
+            },
+            "min": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A minimum value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z."
+                },
+                "attribute": "min",
+                "reflect": false
+            },
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CatDatepickerMode",
+                    "resolved": "\"date\" | \"daterange\" | \"datetime\" | \"time\" | \"week\"",
+                    "references": {
+                        "CatDatepickerMode": {
+                            "location": "import",
+                            "path": "./cat-datepicker.mode",
+                            "id": "src/components/cat-datepicker/cat-datepicker.mode.ts::CatDatepickerMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The mode of the datepicker, to select a date, time, both, a date range or a week number."
+                },
+                "attribute": "mode",
+                "reflect": false,
+                "defaultValue": "'date'"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the form control. Submitted with the form as part of a name/value pair."
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The placeholder text to display within the input."
+                },
+                "attribute": "placeholder",
+                "reflect": false
+            },
+            "textPrefix": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A textual prefix to be displayed in the input."
+                },
+                "attribute": "text-prefix",
+                "reflect": false
+            },
+            "textSuffix": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A textual suffix to be displayed in the input."
+                },
+                "attribute": "text-suffix",
+                "reflect": false
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value is not editable."
+                },
+                "attribute": "readonly",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A value is required or must be check for the form to be submittable."
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "step": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The step size to use when changing the time."
+                },
+                "attribute": "step",
+                "reflect": false,
+                "defaultValue": "5"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z or as a week number string."
+                },
+                "attribute": "value",
+                "reflect": false
+            },
+            "errors": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean | string[] | ErrorMap",
+                    "resolved": "boolean | string[] | undefined | { [key: string]: any; }",
+                    "references": {
+                        "ErrorMap": {
+                            "location": "import",
+                            "path": "../cat-form-hint/cat-form-hint",
+                            "id": "src/components/cat-form-hint/cat-form-hint.tsx::ErrorMap"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The validation errors for this input. Will render a hint under the input\nwith the translated error message(s) `error.${key}`. If an object is\npassed, the keys will be used as error keys and the values translation\nparameters.\nIf the value is `true`, the input will be marked as invalid without any\nhints under the input."
+                },
+                "attribute": "errors",
+                "reflect": false
+            },
+            "errorUpdate": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean | number",
+                    "resolved": "boolean | number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Fine-grained control over when the errors are shown. Can be `false` to\nnever show errors, `true` to show errors on blur, or a number to show\nerrors on change with the given delay in milliseconds."
+                },
+                "attribute": "error-update",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "nativeAttributes": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ [key: string]: string }",
+                    "resolved": "undefined | { [key: string]: string; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Attributes that will be added to the native HTML input element."
+                }
+            },
+            "nativePickerAttributes": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ [key: string]: string }",
+                    "resolved": "undefined | { [key: string]: string; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Attributes that will be added to the rendered HTML datepicker element."
+                }
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Programmatically move focus to the datepicker. Use this method instead of\n`input.focus()`.",
-          "tags": [{
-              "name": "param",
-              "text": "options An optional object providing options to control aspects of\nthe focusing process."
-            }]
-        }
-      },
-      "doBlur": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+        };
+    }
+    static get states() {
+        return {
+            "hasSlottedLabel": {},
+            "hasSlottedHint": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "catChange",
+                "name": "catChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the value is changed."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "catFocus",
+                "name": "catFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input received focus."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "catBlur",
+                "name": "catBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input loses focus."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "doFocus": {
+                "complexType": {
+                    "signature": "(options?: FocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "options An optional object providing options to control aspects of\nthe focusing process."
+                                }],
+                            "text": "An optional object providing options to control aspects of\nthe focusing process."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "FocusOptions": {
+                            "location": "global",
+                            "id": "global::FocusOptions"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically move focus to the datepicker. Use this method instead of\n`input.focus()`.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "options An optional object providing options to control aspects of\nthe focusing process."
+                        }]
+                }
+            },
+            "doBlur": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically remove focus from the datepicker. Use this method instead of\n`input.blur()`.",
+                    "tags": []
+                }
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Programmatically remove focus from the datepicker. Use this method instead of\n`input.blur()`.",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get watchers() {
-    return [{
-        "propName": "value",
-        "methodName": "onValueChanged"
-      }, {
-        "propName": "disabled",
-        "methodName": "onDisabledChanged"
-      }, {
-        "propName": "readonly",
-        "methodName": "onDisabledChanged"
-      }, {
-        "propName": "min",
-        "methodName": "onMinChanged"
-      }, {
-        "propName": "max",
-        "methodName": "onMinChanged"
-      }];
-  }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "onValueChanged"
+            }, {
+                "propName": "disabled",
+                "methodName": "onDisabledChanged"
+            }, {
+                "propName": "readonly",
+                "methodName": "onDisabledChanged"
+            }, {
+                "propName": "min",
+                "methodName": "onMinChanged"
+            }, {
+                "propName": "max",
+                "methodName": "onMinChanged"
+            }];
+    }
 }
 //# sourceMappingURL=cat-datepicker.js.map