@haiilo/catalyst 11.0.0 → 12.0.0

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

@@ -10,34 +10,64 @@ export class CatDatepickerFlat {
     constructor() {
         this.hasSlottedLabel = false;
         this.hasSlottedHint = false;
+        /**
+         * Whether the label need a marker to shown if the input is required or optional.
+         */
         this.requiredMarker = 'optional';
+        /**
+         * Whether the label is on top or left.
+         */
         this.horizontal = false;
+        /**
+         * Hint for form autofill feature.
+         */
         this.autoComplete = 'off';
+        /**
+         * Whether the input should show a clear button.
+         */
         this.clearable = false;
+        /**
+         * Whether the input is disabled.
+         */
         this.disabled = false;
-        this.hint = undefined;
-        this.icon = undefined;
+        /**
+         * Display the icon on the right.
+         */
         this.iconRight = false;
-        this.identifier = undefined;
+        /**
+         * The label for the input.
+         */
         this.label = '';
+        /**
+         * Visually hide the label, but still show it to assistive technologies like screen readers.
+         */
         this.labelHidden = false;
-        this.max = undefined;
-        this.min = undefined;
+        /**
+         * The mode of the datepicker, to select a date, time, both, a date range or a week number.
+         */
         this.mode = 'date';
-        this.name = undefined;
-        this.placeholder = undefined;
-        this.textPrefix = undefined;
-        this.textSuffix = undefined;
+        /**
+         * The value is not editable.
+         */
         this.readonly = false;
+        /**
+         * A value is required or must be check for the form to be submittable.
+         */
         this.required = false;
+        /**
+         * The step size to use when changing the time.
+         */
         this.step = 5;
+        /**
+         * Instead of body, appends the calendar to the cat-datepicker element instead
+         */
         this.attachToElement = false;
-        this.position = undefined;
-        this.value = undefined;
-        this.errors = undefined;
+        /**
+         * Fine-grained control over when the errors are shown. Can be `false` to
+         * never show errors, `true` to show errors on blur, or a number to show
+         * errors change with the given delay in milliseconds or immediately on blur.
+         */
         this.errorUpdate = 0;
-        this.nativeAttributes = undefined;
-        this.nativePickerAttributes = undefined;
     }
     get input() {
         return this._input?.shadowRoot?.querySelector('input') ?? undefined;
@@ -179,6 +209,7 @@ export class CatDatepickerFlat {
         return {
             "requiredMarker": {
                 "type": "string",
+                "attribute": "required-marker",
                 "mutable": false,
                 "complexType": {
                     "original": "'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!'",
@@ -191,12 +222,14 @@ export class CatDatepickerFlat {
                     "tags": [],
                     "text": "Whether the label need a marker to shown if the input is required or optional."
                 },
-                "attribute": "required-marker",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'optional'"
             },
             "horizontal": {
                 "type": "boolean",
+                "attribute": "horizontal",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -209,12 +242,14 @@ export class CatDatepickerFlat {
                     "tags": [],
                     "text": "Whether the label is on top or left."
                 },
-                "attribute": "horizontal",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "autoComplete": {
                 "type": "string",
+                "attribute": "auto-complete",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -227,12 +262,14 @@ export class CatDatepickerFlat {
                     "tags": [],
                     "text": "Hint for form autofill feature."
                 },
-                "attribute": "auto-complete",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'off'"
             },
             "clearable": {
                 "type": "boolean",
+                "attribute": "clearable",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -245,12 +282,14 @@ export class CatDatepickerFlat {
                     "tags": [],
                     "text": "Whether the input should show a clear button."
                 },
-                "attribute": "clearable",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -263,12 +302,14 @@ export class CatDatepickerFlat {
                     "tags": [],
                     "text": "Whether the input is disabled."
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "hint": {
                 "type": "string",
+                "attribute": "hint",
                 "mutable": false,
                 "complexType": {
                     "original": "string | string[]",
@@ -281,11 +322,13 @@ export class CatDatepickerFlat {
                     "tags": [],
                     "text": "Optional hint text(s) to be displayed with the input."
                 },
-                "attribute": "hint",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -298,11 +341,13 @@ export class CatDatepickerFlat {
                     "tags": [],
                     "text": "The name of an icon to be displayed in the input."
                 },
-                "attribute": "icon",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "iconRight": {
                 "type": "boolean",
+                "attribute": "icon-right",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -315,12 +360,14 @@ export class CatDatepickerFlat {
                     "tags": [],
                     "text": "Display the icon on the right."
                 },
-                "attribute": "icon-right",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "identifier": {
                 "type": "string",
+                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -333,11 +380,13 @@ export class CatDatepickerFlat {
                     "tags": [],
                     "text": "A unique identifier for the input."
                 },
-                "attribute": "identifier",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -350,12 +399,14 @@ export class CatDatepickerFlat {
                     "tags": [],
                     "text": "The label for the input."
                 },
-                "attribute": "label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "''"
             },
             "labelHidden": {
                 "type": "boolean",
+                "attribute": "label-hidden",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -368,12 +419,14 @@ export class CatDatepickerFlat {
                     "tags": [],
                     "text": "Visually hide the label, but still show it to assistive technologies like screen readers."
                 },
-                "attribute": "label-hidden",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "max": {
                 "type": "string",
+                "attribute": "max",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -386,11 +439,13 @@ export class CatDatepickerFlat {
                     "tags": [],
                     "text": "A maximum value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z."
                 },
-                "attribute": "max",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "min": {
                 "type": "string",
+                "attribute": "min",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -403,11 +458,13 @@ export class CatDatepickerFlat {
                     "tags": [],
                     "text": "A minimum value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z."
                 },
-                "attribute": "min",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "mode": {
                 "type": "string",
+                "attribute": "mode",
                 "mutable": false,
                 "complexType": {
                     "original": "CatDatepickerMode",
@@ -426,12 +483,14 @@ export class CatDatepickerFlat {
                     "tags": [],
                     "text": "The mode of the datepicker, to select a date, time, both, a date range or a week number."
                 },
-                "attribute": "mode",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'date'"
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -444,11 +503,13 @@ export class CatDatepickerFlat {
                     "tags": [],
                     "text": "The name of the form control. Submitted with the form as part of a name/value pair."
                 },
-                "attribute": "name",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "placeholder": {
                 "type": "string",
+                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -461,11 +522,13 @@ export class CatDatepickerFlat {
                     "tags": [],
                     "text": "The placeholder text to display within the input."
                 },
-                "attribute": "placeholder",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "textPrefix": {
                 "type": "string",
+                "attribute": "text-prefix",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -478,11 +541,13 @@ export class CatDatepickerFlat {
                     "tags": [],
                     "text": "A textual prefix to be displayed in the input."
                 },
-                "attribute": "text-prefix",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "textSuffix": {
                 "type": "string",
+                "attribute": "text-suffix",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -495,11 +560,13 @@ export class CatDatepickerFlat {
                     "tags": [],
                     "text": "A textual suffix to be displayed in the input."
                 },
-                "attribute": "text-suffix",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "readonly": {
                 "type": "boolean",
+                "attribute": "readonly",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -512,12 +579,14 @@ export class CatDatepickerFlat {
                     "tags": [],
                     "text": "The value is not editable."
                 },
-                "attribute": "readonly",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -530,12 +599,14 @@ export class CatDatepickerFlat {
                     "tags": [],
                     "text": "A value is required or must be check for the form to be submittable."
                 },
-                "attribute": "required",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "step": {
                 "type": "number",
+                "attribute": "step",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -548,12 +619,14 @@ export class CatDatepickerFlat {
                     "tags": [],
                     "text": "The step size to use when changing the time."
                 },
-                "attribute": "step",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "5"
             },
             "attachToElement": {
                 "type": "boolean",
+                "attribute": "attach-to-element",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -566,12 +639,14 @@ export class CatDatepickerFlat {
                     "tags": [],
                     "text": "Instead of body, appends the calendar to the cat-datepicker element instead"
                 },
-                "attribute": "attach-to-element",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "position": {
                 "type": "string",
+                "attribute": "position",
                 "mutable": false,
                 "complexType": {
                     "original": "BaseOptions['position'] | Placement",
@@ -598,11 +673,13 @@ export class CatDatepickerFlat {
                         }],
                     "text": "Where the calendar is rendered relative to the input vertically and horizontally.\nIn the format of \"[vertical] [horizontal]\". Vertical can be auto, above or below (required).\nHorizontal can be left, center or right.\nIf"
                 },
-                "attribute": "position",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -615,11 +692,13 @@ export class CatDatepickerFlat {
                     "tags": [],
                     "text": "The value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z or as a week number string."
                 },
-                "attribute": "value",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "errors": {
                 "type": "boolean",
+                "attribute": "errors",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean | string[] | ErrorMap",
@@ -638,11 +717,13 @@ export class CatDatepickerFlat {
                     "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",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "errorUpdate": {
                 "type": "any",
+                "attribute": "error-update",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean | number",
@@ -655,12 +736,14 @@ export class CatDatepickerFlat {
                     "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 change with the given delay in milliseconds or immediately on blur."
                 },
-                "attribute": "error-update",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "0"
             },
             "nativeAttributes": {
                 "type": "unknown",
+                "attribute": "native-attributes",
                 "mutable": false,
                 "complexType": {
                     "original": "{ [key: string]: string }",
@@ -672,10 +755,13 @@ export class CatDatepickerFlat {
                 "docs": {
                     "tags": [],
                     "text": "Attributes that will be added to the native HTML input element."
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "nativePickerAttributes": {
                 "type": "unknown",
+                "attribute": "native-picker-attributes",
                 "mutable": false,
                 "complexType": {
                     "original": "{ [key: string]: string }",
@@ -687,7 +773,9 @@ export class CatDatepickerFlat {
                 "docs": {
                     "tags": [],
                     "text": "Attributes that will be added to the rendered HTML datepicker element."
-                }
+                },
+                "getter": false,
+                "setter": false
             }
         };
     }

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';\nimport { autoUpdate, computePosition, flip, Placement, ReferenceElement } from '@floating-ui/dom';\nimport { BaseOptions } from 'flatpickr/dist/types/options';\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 _calendarWrapper?: HTMLDivElement;\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 = 'off';\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   * Instead of body, appends the calendar to the cat-datepicker element instead\n   */\n  @Prop() attachToElement = false;\n\n  /**\n   * Where the calendar is rendered relative to the input vertically and horizontally.\n   * In the format of \"[vertical] [horizontal]\". Vertical can be auto, above or below (required).\n   * Horizontal can be left, center or right.\n   * If @attachToElement is passed the value should be in Placement format\n   */\n  @Prop() position?: BaseOptions['position'] | Placement;\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 change with the given delay in milliseconds or immediately on blur.\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  @Watch('mode')\n  onDisabledChanged() {\n    // Dynamically changing config 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      <div ref={el => (this._calendarWrapper = el)} class=\"datepicker-wrapper\"></div>\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        appendTo: this.attachToElement ? this._calendarWrapper : undefined,\n        nativePickerAttributes: { ...nativePickerAttributes, ...this.nativePickerAttributes },\n        // flatpickr has open bug about incorrect positioning when appendTo is used,\n        // we have to use custom logic to calculate position\n        // https://github.com/flatpickr/flatpickr/issues/1619\n        position: this.attachToElement\n          ? (flatpickr, positionElement) => {\n              this.updatePosition(flatpickr, positionElement);\n            }\n          : (this.position as BaseOptions['position']) || undefined,\n        onReady: (_dates, _dateStr, flatpickr) => {\n          autoUpdate(input, flatpickr.calendarContainer, () => this.updatePosition(flatpickr, flatpickr._input));\n        },\n        applyChange: value => (this.value = value)\n      })\n    );\n  }\n\n  private updatePosition(flatpickr: flatpickr.Instance, positionElement: HTMLElement | undefined): void {\n    if (positionElement) {\n      computePosition(positionElement as ReferenceElement, flatpickr.calendarContainer, {\n        strategy: 'fixed',\n        placement: (this.position as Placement) || 'bottom-start',\n        middleware: [flip()]\n      }).then(({ x, y, placement }) => {\n        if (flatpickr.calendarContainer) {\n          flatpickr.calendarContainer.dataset.placement = placement;\n          Object.assign(flatpickr.calendarContainer.style, {\n            left: `${x}px`,\n            top: `${y}px`,\n            position: 'fixed'\n          });\n        }\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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AC,CAAC;QACL,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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';\nimport { autoUpdate, computePosition, flip, Placement, ReferenceElement } from '@floating-ui/dom';\nimport { BaseOptions } from 'flatpickr/dist/types/options';\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 _calendarWrapper?: HTMLDivElement;\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 = 'off';\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   * Instead of body, appends the calendar to the cat-datepicker element instead\n   */\n  @Prop() attachToElement = false;\n\n  /**\n   * Where the calendar is rendered relative to the input vertically and horizontally.\n   * In the format of \"[vertical] [horizontal]\". Vertical can be auto, above or below (required).\n   * Horizontal can be left, center or right.\n   * If @attachToElement is passed the value should be in Placement format\n   */\n  @Prop() position?: BaseOptions['position'] | Placement;\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 change with the given delay in milliseconds or immediately on blur.\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  @Watch('mode')\n  onDisabledChanged() {\n    // Dynamically changing config 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      <div ref={el => (this._calendarWrapper = el)} class=\"datepicker-wrapper\"></div>\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        appendTo: this.attachToElement ? this._calendarWrapper : undefined,\n        nativePickerAttributes: { ...nativePickerAttributes, ...this.nativePickerAttributes },\n        // flatpickr has open bug about incorrect positioning when appendTo is used,\n        // we have to use custom logic to calculate position\n        // https://github.com/flatpickr/flatpickr/issues/1619\n        position: this.attachToElement\n          ? (flatpickr, positionElement) => {\n              this.updatePosition(flatpickr, positionElement);\n            }\n          : (this.position as BaseOptions['position']) || undefined,\n        onReady: (_dates, _dateStr, flatpickr) => {\n          autoUpdate(input, flatpickr.calendarContainer, () => this.updatePosition(flatpickr, flatpickr._input));\n        },\n        applyChange: value => (this.value = value)\n      })\n    );\n  }\n\n  private updatePosition(flatpickr: flatpickr.Instance, positionElement: HTMLElement | undefined): void {\n    if (positionElement) {\n      computePosition(positionElement as ReferenceElement, flatpickr.calendarContainer, {\n        strategy: 'fixed',\n        placement: (this.position as Placement) || 'bottom-start',\n        middleware: [flip()]\n      }).then(({ x, y, placement }) => {\n        if (flatpickr.calendarContainer) {\n          flatpickr.calendarContainer.dataset.placement = placement;\n          Object.assign(flatpickr.calendarContainer.style, {\n            left: `${x}px`,\n            top: `${y}px`,\n            position: 'fixed'\n          });\n        }\n      });\n    }\n  }\n}\n"]}