@haiilo/catalyst 6.3.1 → 6.3.3

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

@@ -1 +1 @@
-{"file":"cat-datepicker-inline.js","mappings":";;;;AAAA,MAAM,sBAAsB,GAAG,2hyBAA2hyB;;MCa7iyBA,qBAAmB;;;;;;oBAOX,KAAK;;;gBAeU,MAAM;oBAKrB,KAAK;gBAKT,CAAC;;;EAahB,cAAc,CAAC,KAAa;IAC1B,IAAI,KAAK,EAAE;MACT,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;MAClC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC5B;SAAM;MACL,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;MACzB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KAChC;GACF;EAID,iBAAiB;;;;IAIf,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,CAAC;IACtB,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;IACvB,UAAU,CAAC,OAAO,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;GAClE;EAED,gBAAgB;IACd,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC9C;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,SAAS,EACzD,KAAK,EAAE;QACL,oBAAoB,EAAE,IAAI;QAC1B,qBAAqB,EAAE,IAAI,CAAC,QAAQ;QACpC,qBAAqB,EAAE,IAAI,CAAC,QAAQ;OACrC,IAED,aACE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,EAC5B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAChB,CACL,CACD,EACP;GACH;EAEO,cAAc,CAAC,KAAwB;IAC7C,IAAI,CAAC,KAAK,EAAE;MACV,OAAO;KACR;IAED,OAAO,SAAS,CACd,KAAK,EACL,SAAS,CACP;MACE,MAAM,EAAE,SAAS,CAACC,eAAI,CAAC,SAAS,EAAE,CAAC;MACnC,MAAM,EAAE,SAAS,CAACA,eAAI,CAAC,SAAS,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC;MAC9C,IAAI,EAAE,IAAI,CAAC,IAAI;MACf,GAAG,EAAE,IAAI,CAAC,GAAG;MACb,GAAG,EAAE,IAAI,CAAC,GAAG;MACb,IAAI,EAAE,IAAI,CAAC,IAAI;MACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,WAAW,EAAE,KAAK,KAAK,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;KAC3C,EACD;MACE,IAAI,IAAI,CAAC,QAAQ,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC;MACxC,MAAM,EAAE,IAAI;KACb,CACF,CACF,CAAC;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatDatepickerInline","i18n"],"sources":["src/components/cat-datepicker-inline/cat-datepicker-inline.scss?tag=cat-datepicker-inline&encapsulation=shadow","src/components/cat-datepicker-inline/cat-datepicker-inline.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n\n@import '~flatpickr/dist/flatpickr.css';\n@import '../styles/vendor/flatpickr';\n\n:host {\n  display: inline-flex;\n  margin-bottom: $cat-body-margin-bottom;\n\n  > div {\n    display: flex;\n  }\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.datepicker-disabled,\n.datepicker-readonly {\n  .flatpickr-days,\n  .flatpickr-time {\n    pointer-events: none;\n  }\n}\n\n.datepicker-disabled {\n  .flatpickr-days {\n    opacity: 0.75;\n  }\n  .flatpickr-time {\n    input,\n    .flatpickr-time-separator,\n    .flatpickr-am-pm {\n      color: cat-token('color.ui.font.muted');\n      opacity: 0.75;\n    }\n  }\n}\n\ninput {\n  display: none;\n}\n\n.flatpickr-calendar {\n  box-shadow: unset;\n  background: unset;\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\nimport flatpickr from 'flatpickr';\nimport { getConfig } from '../cat-datepicker/cat-datepicker.config';\nimport { getFormat } from '../cat-datepicker/cat-datepicker.format';\nimport { getLocale } from '../cat-datepicker/cat-datepicker.locale';\nimport { CatDatepickerMode } from '../cat-datepicker/cat-datepicker.mode';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\n@Component({\n  tag: 'cat-datepicker-inline',\n  styleUrl: 'cat-datepicker-inline.scss',\n  shadow: true\n})\nexport class CatDatepickerInline {\n  private pickr?: flatpickr.Instance;\n  private input?: HTMLInputElement;\n\n  /**\n   * Whether the input is disabled.\n   */\n  @Prop() disabled = 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 value is not editable.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * The step size to use when changing the time.\n   */\n  @Prop() step = 5;\n\n  /**\n   * The value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z or as a week number string.\n   */\n  @Prop({ mutable: true }) value?: string;\n\n  /**\n   * Emitted when the value is changed.\n   */\n  @Event() catChange!: EventEmitter<string>;\n\n  @Watch('value')\n  onValueChanged(value: string) {\n    if (value) {\n      this.pickr?.setDate(value, false);\n      this.catChange.emit(value);\n    } else {\n      this.pickr?.clear(false);\n      this.catChange.emit(undefined);\n    }\n  }\n\n  @Watch('disabled')\n  @Watch('readonly')\n  onDisabledChanged() {\n    // Dynamically unsetting 'enabled' value to undefined is not working due to\n    // a bug in the library. We thus need to fully recreate the date picker\n    // after the value has been updated.\n    this.pickr?.destroy();\n    this.pickr = undefined;\n    setTimeout(() => (this.pickr = this.initDatepicker(this.input)));\n  }\n\n  componentDidLoad() {\n    this.pickr = this.initDatepicker(this.input);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          tabIndex={this.disabled || this.readonly ? -1 : undefined}\n          class={{\n            'datepicker-wrapper': true,\n            'datepicker-disabled': this.disabled,\n            'datepicker-readonly': this.readonly\n          }}\n        >\n          <input\n            ref={el => (this.input = el)}\n            value={this.value}\n            disabled={this.disabled}\n            readonly={this.readonly}\n          ></input>\n        </div>\n      </Host>\n    );\n  }\n\n  private initDatepicker(input?: HTMLInputElement): flatpickr.Instance | undefined {\n    if (!input) {\n      return;\n    }\n\n    return flatpickr(\n      input,\n      getConfig(\n        {\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          applyChange: value => (this.value = value)\n        },\n        {\n          ...(this.disabled ? { enable: [] } : {}),\n          inline: true\n        }\n      )\n    );\n  }\n}\n"],"version":3}
+{"file":"cat-datepicker-inline.js","mappings":";;;;AAAA,MAAM,sBAAsB,GAAG,2hyBAA2hyB;;MCa7iyBA,qBAAmB;;;;;;oBAOX,KAAK;;;gBAeU,MAAM;oBAKrB,KAAK;gBAKT,CAAC;;;;EAkBhB,cAAc,CAAC,KAAa;IAC1B,IAAI,KAAK,EAAE;MACT,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;MAClC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC5B;SAAM;MACL,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;MACzB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KAChC;GACF;EAID,iBAAiB;;;;IAIf,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,CAAC;IACtB,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;IACvB,UAAU,CAAC,OAAO,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;GAClE;EAED,gBAAgB;IACd,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC9C;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,SAAS,EACzD,KAAK,EAAE;QACL,oBAAoB,EAAE,IAAI;QAC1B,qBAAqB,EAAE,IAAI,CAAC,QAAQ;QACpC,qBAAqB,EAAE,IAAI,CAAC,QAAQ;OACrC,IAED,aACE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,EAC5B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAChB,CACL,CACD,EACP;GACH;EAEO,cAAc,CAAC,KAAwB;IAC7C,IAAI,CAAC,KAAK,EAAE;MACV,OAAO;KACR;IAED,OAAO,SAAS,CACd,KAAK,EACL,SAAS,CACP;MACE,MAAM,EAAE,SAAS,CAACC,eAAI,CAAC,SAAS,EAAE,CAAC;MACnC,MAAM,EAAE,SAAS,CAACA,eAAI,CAAC,SAAS,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC;MAC9C,IAAI,EAAE,IAAI,CAAC,IAAI;MACf,GAAG,EAAE,IAAI,CAAC,GAAG;MACb,GAAG,EAAE,IAAI,CAAC,GAAG;MACb,IAAI,EAAE,IAAI,CAAC,IAAI;MACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,sBAAsB,EAAE,IAAI,CAAC,sBAAsB,IAAI,EAAE;MACzD,WAAW,EAAE,KAAK,KAAK,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;KAC3C,EACD;MACE,IAAI,IAAI,CAAC,QAAQ,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC;MACxC,MAAM,EAAE,IAAI;KACb,CACF,CACF,CAAC;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatDatepickerInline","i18n"],"sources":["src/components/cat-datepicker-inline/cat-datepicker-inline.scss?tag=cat-datepicker-inline&encapsulation=shadow","src/components/cat-datepicker-inline/cat-datepicker-inline.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n\n@import '~flatpickr/dist/flatpickr.css';\n@import '../styles/vendor/flatpickr';\n\n:host {\n  display: inline-flex;\n  margin-bottom: $cat-body-margin-bottom;\n\n  > div {\n    display: flex;\n  }\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.datepicker-disabled,\n.datepicker-readonly {\n  .flatpickr-days,\n  .flatpickr-time {\n    pointer-events: none;\n  }\n}\n\n.datepicker-disabled {\n  .flatpickr-days {\n    opacity: 0.75;\n  }\n\n  .flatpickr-time {\n    input,\n    .flatpickr-time-separator,\n    .flatpickr-am-pm {\n      color: cat-token('color.ui.font.muted');\n      opacity: 0.75;\n    }\n  }\n}\n\ninput {\n  display: none;\n}\n\n.flatpickr-calendar {\n  box-shadow: unset;\n  background: unset;\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\nimport flatpickr from 'flatpickr';\nimport { getConfig } from '../cat-datepicker/cat-datepicker.config';\nimport { getFormat } from '../cat-datepicker/cat-datepicker.format';\nimport { getLocale } from '../cat-datepicker/cat-datepicker.locale';\nimport { CatDatepickerMode } from '../cat-datepicker/cat-datepicker.mode';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\n@Component({\n  tag: 'cat-datepicker-inline',\n  styleUrl: 'cat-datepicker-inline.scss',\n  shadow: true\n})\nexport class CatDatepickerInline {\n  private pickr?: flatpickr.Instance;\n  private input?: HTMLInputElement;\n\n  /**\n   * Whether the input is disabled.\n   */\n  @Prop() disabled = 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 value is not editable.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * The step size to use when changing the time.\n   */\n  @Prop() step = 5;\n\n  /**\n   * The value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z or as a week number string.\n   */\n  @Prop({ mutable: true }) value?: string;\n\n  /**\n   * 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  @Watch('value')\n  onValueChanged(value: string) {\n    if (value) {\n      this.pickr?.setDate(value, false);\n      this.catChange.emit(value);\n    } else {\n      this.pickr?.clear(false);\n      this.catChange.emit(undefined);\n    }\n  }\n\n  @Watch('disabled')\n  @Watch('readonly')\n  onDisabledChanged() {\n    // Dynamically unsetting 'enabled' value to undefined is not working due to\n    // a bug in the library. We thus need to fully recreate the date picker\n    // after the value has been updated.\n    this.pickr?.destroy();\n    this.pickr = undefined;\n    setTimeout(() => (this.pickr = this.initDatepicker(this.input)));\n  }\n\n  componentDidLoad() {\n    this.pickr = this.initDatepicker(this.input);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          tabIndex={this.disabled || this.readonly ? -1 : undefined}\n          class={{\n            'datepicker-wrapper': true,\n            'datepicker-disabled': this.disabled,\n            'datepicker-readonly': this.readonly\n          }}\n        >\n          <input\n            ref={el => (this.input = el)}\n            value={this.value}\n            disabled={this.disabled}\n            readonly={this.readonly}\n          ></input>\n        </div>\n      </Host>\n    );\n  }\n\n  private initDatepicker(input?: HTMLInputElement): flatpickr.Instance | undefined {\n    if (!input) {\n      return;\n    }\n\n    return flatpickr(\n      input,\n      getConfig(\n        {\n          locale: getLocale(i18n.getLocale()),\n          format: getFormat(i18n.getLocale(), this.mode),\n          mode: this.mode,\n          min: this.min,\n          max: this.max,\n          step: this.step,\n          disabled: this.disabled,\n          readonly: this.readonly,\n          nativePickerAttributes: this.nativePickerAttributes ?? {},\n          applyChange: value => (this.value = value)\n        },\n        {\n          ...(this.disabled ? { enable: [] } : {}),\n          inline: true\n        }\n      )\n    );\n  }\n}\n"],"version":3}

package/dist/components/cat-datepicker.js

@@ -6,6 +6,19 @@ import { d as defineCustomElement$4 } from './cat-icon2.js';
 import { d as defineCustomElement$3 } from './cat-input2.js';
 import { d as defineCustomElement$2 } from './cat-spinner2.js';
 
+/**
+ * Find the closest parent element matching the given selector while traversing
+ * up the DOM tree (including Shadow DOM).
+ */
+function findClosest(selector, element) {
+  if (element instanceof Element && element.matches(selector)) {
+    return element;
+  }
+  // Search in parent element or Shadow DOM host
+  const nextElement = element instanceof ShadowRoot ? element.host : element.parentElement || element.getRootNode().host;
+  return nextElement ? findClosest(selector, nextElement) : null;
+}
+
 const catDatepickerCss = ":host{display:flex;margin-bottom:1rem}:host([hidden]){display:none}cat-input{flex:1 1 auto;margin:0}";
 
 const CatDatepickerFlat = /*@__PURE__*/ proxyCustomElement(class CatDatepickerFlat extends HTMLElement {
@@ -41,6 +54,7 @@ const CatDatepickerFlat = /*@__PURE__*/ proxyCustomElement(class CatDatepickerFl
     this.errors = undefined;
     this.errorUpdate = 0;
     this.nativeAttributes = undefined;
+    this.nativePickerAttributes = undefined;
   }
   get input() {
     return this._input?.shadowRoot?.querySelector('input') ?? undefined;
@@ -99,6 +113,9 @@ const CatDatepickerFlat = /*@__PURE__*/ proxyCustomElement(class CatDatepickerFl
     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(catI18nRegistry.getLocale()),
       format: getFormat(catI18nRegistry.getLocale(), this.mode),
@@ -108,6 +125,7 @@ const CatDatepickerFlat = /*@__PURE__*/ proxyCustomElement(class CatDatepickerFl
       step: this.step,
       disabled: this.disabled,
       readonly: this.readonly,
+      nativePickerAttributes: { ...nativePickerAttributes, ...this.nativePickerAttributes },
       applyChange: value => (this.value = value)
     }));
   }
@@ -143,6 +161,7 @@ const CatDatepickerFlat = /*@__PURE__*/ proxyCustomElement(class CatDatepickerFl
     "errors": [4],
     "errorUpdate": [8, "error-update"],
     "nativeAttributes": [16],
+    "nativePickerAttributes": [16],
     "doFocus": [64],
     "doBlur": [64]
   }]);

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

@@ -1 +1 @@
-{"file":"cat-datepicker.js","mappings":"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","names":["i18n"],"sources":["src/components/cat-datepicker/cat-datepicker.scss?tag=cat-datepicker&encapsulation=shadow","src/components/cat-datepicker/cat-datepicker.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n\n:host {\n  display: flex;\n  margin-bottom: $cat-body-margin-bottom;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\ncat-input {\n  flex: 1 1 auto;\n  margin: 0;\n}\n","import { Component, Event, EventEmitter, Method, Prop, Watch, h } from '@stencil/core';\nimport flatpickr from 'flatpickr';\nimport { ErrorMap } from '../cat-form-hint/cat-form-hint';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\nimport { getConfig } from './cat-datepicker.config';\nimport { getFormat } from './cat-datepicker.format';\nimport { getLocale } from './cat-datepicker.locale';\nimport { CatDatepickerMode } from './cat-datepicker.mode';\n\n@Component({\n  tag: 'cat-datepicker',\n  styleUrl: 'cat-datepicker.scss',\n  shadow: true\n})\nexport class CatDatepickerFlat {\n  private pickr?: flatpickr.Instance;\n  private _input?: HTMLCatInputElement;\n  private get input(): HTMLInputElement | undefined {\n    return this._input?.shadowRoot?.querySelector('input') ?? undefined;\n  }\n\n  /**\n   * Whether the label need a marker to shown if the input is required or optional.\n   */\n  @Prop() requiredMarker: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!' = 'optional';\n\n  /**\n   * Whether the label is on top or left.\n   */\n  @Prop() horizontal = false;\n\n  /**\n   * Hint for form autofill feature.\n   */\n  @Prop() autoComplete?: string;\n\n  /**\n   * Whether the input should show a clear button.\n   */\n  @Prop() clearable = false;\n\n  /**\n   * Whether the input is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Optional hint text(s) to be displayed with the input.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * The name of an icon to be displayed in the input.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Display the icon on the right.\n   */\n  @Prop() iconRight = false;\n\n  /**\n   * A unique identifier for the input.\n   */\n  @Prop() identifier?: string;\n\n  /**\n   * The label for the input.\n   */\n  @Prop() label = '';\n\n  /**\n   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @Prop() labelHidden = false;\n\n  /**\n   * A maximum value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z.\n   */\n  @Prop() max?: string;\n\n  /**\n   * A minimum value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z.\n   */\n  @Prop() min?: string;\n\n  /**\n   * The mode of the datepicker, to select a date, time, both, a date range or a week number.\n   */\n  @Prop() mode: CatDatepickerMode = 'date';\n\n  /**\n   * The name of the form control. Submitted with the form as part of a name/value pair.\n   */\n  @Prop() name?: string;\n\n  /**\n   * The placeholder text to display within the input.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * A textual prefix to be displayed in the input.\n   */\n  @Prop() textPrefix?: string;\n\n  /**\n   * A textual suffix to be displayed in the input.\n   */\n  @Prop() textSuffix?: string;\n\n  /**\n   * The value is not editable.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * A value is required or must be check for the form to be submittable.\n   */\n  @Prop() required = false;\n\n  /**\n   * The step size to use when changing the time.\n   */\n  @Prop() step = 5;\n\n  /**\n   * The value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z or as a week number string.\n   */\n  @Prop({ mutable: true }) value?: string;\n\n  /**\n   * The validation errors for this input. Will render a hint under the input\n   * with the translated error message(s) `error.${key}`. If an object is\n   * passed, the keys will be used as error keys and the values translation\n   * parameters.\n   * If the value is `true`, the input will be marked as invalid without any\n   * hints under the input.\n   */\n  @Prop() errors?: boolean | string[] | ErrorMap;\n\n  /**\n   * Fine-grained control over when the errors are shown. Can be `false` to\n   * never show errors, `true` to show errors on blur, or a number to show\n   * errors on change with the given delay in milliseconds.\n   */\n  @Prop() errorUpdate: boolean | number = 0;\n\n  /**\n   * Attributes that will be added to the native HTML input element.\n   */\n  @Prop() nativeAttributes?: { [key: string]: string };\n\n  /**\n   * 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      this.catChange.emit(value);\n    } else {\n      this.pickr?.clear(false);\n      this.catChange.emit(undefined);\n    }\n  }\n\n  @Watch('disabled')\n  @Watch('readonly')\n  onDisabledChanged() {\n    // Dynamically changing 'disabled' value is not working due to a bug in the\n    // library. We thus need to fully recreate the date picker after the value\n    // has been updated.\n    this.pickr?.destroy();\n    this.pickr = undefined;\n    setTimeout(() => (this.pickr = this.initDatepicker(this.input)));\n  }\n\n  componentDidLoad() {\n    this.pickr = this.initDatepicker(this.input);\n  }\n\n  /**\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      ></cat-input>\n    );\n  }\n\n  private initDatepicker(input?: HTMLInputElement): flatpickr.Instance | undefined {\n    if (this.disabled || this.readonly || !input) {\n      return;\n    }\n\n    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        applyChange: value => (this.value = value)\n      })\n    );\n  }\n}\n"],"version":3}
+{"file":"cat-datepicker.js","mappings":"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","names":["i18n"],"sources":["src/utils/find-closest.ts","src/components/cat-datepicker/cat-datepicker.scss?tag=cat-datepicker&encapsulation=shadow","src/components/cat-datepicker/cat-datepicker.tsx"],"sourcesContent":["/**\n * Find the closest parent element matching the given selector while traversing\n * up the DOM tree (including Shadow DOM).\n */\nexport function findClosest(selector: string, element: Element | ShadowRoot): Element | null {\n  if (element instanceof Element && element.matches(selector)) {\n    return element;\n  }\n\n  // Search in parent element or Shadow DOM host\n  const nextElement =\n    element instanceof ShadowRoot ? element.host : element.parentElement || (element.getRootNode() as ShadowRoot).host;\n  return nextElement ? findClosest(selector, nextElement) : null;\n}\n","@use 'variables' as *;\n@use 'mixins' as *;\n\n:host {\n  display: flex;\n  margin-bottom: $cat-body-margin-bottom;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\ncat-input {\n  flex: 1 1 auto;\n  margin: 0;\n}\n","import { Component, Event, EventEmitter, Method, Prop, Watch, h } from '@stencil/core';\nimport flatpickr from 'flatpickr';\nimport { findClosest } from '../../utils/find-closest';\nimport { ErrorMap } from '../cat-form-hint/cat-form-hint';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\nimport { getConfig } from './cat-datepicker.config';\nimport { getFormat } from './cat-datepicker.format';\nimport { getLocale } from './cat-datepicker.locale';\nimport { CatDatepickerMode } from './cat-datepicker.mode';\n\n@Component({\n  tag: 'cat-datepicker',\n  styleUrl: 'cat-datepicker.scss',\n  shadow: true\n})\nexport class CatDatepickerFlat {\n  private pickr?: flatpickr.Instance;\n  private _input?: HTMLCatInputElement;\n  private get input(): HTMLInputElement | undefined {\n    return this._input?.shadowRoot?.querySelector('input') ?? undefined;\n  }\n\n  /**\n   * Whether the label need a marker to shown if the input is required or optional.\n   */\n  @Prop() requiredMarker: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!' = 'optional';\n\n  /**\n   * Whether the label is on top or left.\n   */\n  @Prop() horizontal = false;\n\n  /**\n   * Hint for form autofill feature.\n   */\n  @Prop() autoComplete?: string;\n\n  /**\n   * Whether the input should show a clear button.\n   */\n  @Prop() clearable = false;\n\n  /**\n   * Whether the input is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Optional hint text(s) to be displayed with the input.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * The name of an icon to be displayed in the input.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Display the icon on the right.\n   */\n  @Prop() iconRight = false;\n\n  /**\n   * A unique identifier for the input.\n   */\n  @Prop() identifier?: string;\n\n  /**\n   * The label for the input.\n   */\n  @Prop() label = '';\n\n  /**\n   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @Prop() labelHidden = false;\n\n  /**\n   * A maximum value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z.\n   */\n  @Prop() max?: string;\n\n  /**\n   * A minimum value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z.\n   */\n  @Prop() min?: string;\n\n  /**\n   * The mode of the datepicker, to select a date, time, both, a date range or a week number.\n   */\n  @Prop() mode: CatDatepickerMode = 'date';\n\n  /**\n   * The name of the form control. Submitted with the form as part of a name/value pair.\n   */\n  @Prop() name?: string;\n\n  /**\n   * The placeholder text to display within the input.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * A textual prefix to be displayed in the input.\n   */\n  @Prop() textPrefix?: string;\n\n  /**\n   * A textual suffix to be displayed in the input.\n   */\n  @Prop() textSuffix?: string;\n\n  /**\n   * The value is not editable.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * A value is required or must be check for the form to be submittable.\n   */\n  @Prop() required = false;\n\n  /**\n   * The step size to use when changing the time.\n   */\n  @Prop() step = 5;\n\n  /**\n   * The value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z or as a week number string.\n   */\n  @Prop({ mutable: true }) value?: string;\n\n  /**\n   * The validation errors for this input. Will render a hint under the input\n   * with the translated error message(s) `error.${key}`. If an object is\n   * passed, the keys will be used as error keys and the values translation\n   * parameters.\n   * If the value is `true`, the input will be marked as invalid without any\n   * hints under the input.\n   */\n  @Prop() errors?: boolean | string[] | ErrorMap;\n\n  /**\n   * Fine-grained control over when the errors are shown. Can be `false` to\n   * never show errors, `true` to show errors on blur, or a number to show\n   * errors on change with the given delay in milliseconds.\n   */\n  @Prop() errorUpdate: boolean | number = 0;\n\n  /**\n   * Attributes that will be added to the native HTML input element.\n   */\n  @Prop() nativeAttributes?: { [key: string]: string };\n\n  /**\n   * Attributes that will be added to the rendered HTML datepicker element.\n   */\n  @Prop() nativePickerAttributes?: { [key: string]: string };\n\n  /**\n   * Emitted when the value is changed.\n   */\n  @Event() catChange!: EventEmitter<string>;\n\n  /**\n   * Emitted when the input received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  @Watch('value')\n  onValueChanged(value: string) {\n    if (value) {\n      this.pickr?.setDate(value, false);\n      this.catChange.emit(value);\n    } else {\n      this.pickr?.clear(false);\n      this.catChange.emit(undefined);\n    }\n  }\n\n  @Watch('disabled')\n  @Watch('readonly')\n  onDisabledChanged() {\n    // Dynamically changing 'disabled' value is not working due to a bug in the\n    // library. We thus need to fully recreate the date picker after the value\n    // has been updated.\n    this.pickr?.destroy();\n    this.pickr = undefined;\n    setTimeout(() => (this.pickr = this.initDatepicker(this.input)));\n  }\n\n  componentDidLoad() {\n    this.pickr = this.initDatepicker(this.input);\n  }\n\n  /**\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      ></cat-input>\n    );\n  }\n\n  private initDatepicker(input?: HTMLInputElement): flatpickr.Instance | undefined {\n    if (this.disabled || this.readonly || !input) {\n      return;\n    }\n\n    // avoid dropdown closing if datepicker is part of a dropdown\n    const withinDropdown = !!findClosest('cat-dropdown', input);\n    const nativePickerAttributes: { [key: string]: string } = withinDropdown ? { 'data-dropdown-no-close': '' } : {};\n\n    return flatpickr(\n      input,\n      getConfig({\n        locale: getLocale(i18n.getLocale()),\n        format: getFormat(i18n.getLocale(), this.mode),\n        mode: this.mode,\n        min: this.min,\n        max: this.max,\n        step: this.step,\n        disabled: this.disabled,\n        readonly: this.readonly,\n        nativePickerAttributes: { ...nativePickerAttributes, ...this.nativePickerAttributes },\n        applyChange: value => (this.value = value)\n      })\n    );\n  }\n}\n"],"version":3}

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

@@ -2670,6 +2670,12 @@ function getConfig(options, more = {}) {
     weekNumbers: true,
     minuteIncrement: options.step,
     clickOpens: !options.disabled && !options.readonly,
+    onReady: (_dates, _dateStr, flatpickr) => {
+      for (const key in options.nativePickerAttributes) {
+        const value = options.nativePickerAttributes[key];
+        flatpickr.calendarContainer.setAttribute(key, value);
+      }
+    },
     onChange: (dates, dateStr, flatpickr) => {
       let value = dateStr || undefined;
       if (options.mode === 'week') {