@haiilo/catalyst 13.5.1-beta.1 → 14.0.0

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

@@ -1 +1 @@
-{"file":"cat-datepicker.js","mappings":";;;;;;;;;AAAA,MAAM,gBAAgB,GAAG,m5vBAAm5vB;;MCiB/5vB,iBAAiB,iBAAAA,kBAAA,CAAA,MAAA,iBAAA,SAAA,WAAA,CAAA;AAL9B,IAAA,WAAA,GAAA;;;;;;;AAeW,QAAA,IAAe,CAAA,eAAA,GAAG,KAAK;AAEvB,QAAA,IAAc,CAAA,cAAA,GAAG,KAAK;AAE/B;;AAEG;AACK,QAAA,IAAc,CAAA,cAAA,GAA4E,UAAU;AAa5G;;AAEG;AACK,QAAA,IAAY,CAAA,YAAA,GAAG,KAAK;AAE5B;;AAEG;AACK,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK;AAEzB;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAYxB;;AAEG;AACK,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK;AAOzB;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAG,EAAE;AAElB;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAG,KAAK;AAY3B;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAsB,MAAM;AAsBxC;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAExB;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAExB;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAG,CAAC;AAEhB;;AAEG;AACK,QAAA,IAAe,CAAA,eAAA,GAAG,KAAK;AAyB/B;;;;AAIG;AACK,QAAA,IAAW,CAAA,WAAA,GAAqB,CAAC;AA8M1C;AAxWC,IAAA,IAAY,KAAK,GAAA;AACf,QAAA,OAAO,IAAI,CAAC,MAAM,EAAE,UAAU,EAAE,aAAa,CAAC,OAAO,CAAC,IAAI,SAAS;;AAqLrE,IAAA,cAAc,CAAC,KAAa,EAAA;QAC1B,IAAI,KAAK,EAAE;YACT,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC;AACjC,YAAA,IAAI,IAAI,CAAC,IAAI,KAAK,WAAW,IAAI,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;AACtD,gBAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;;;aAEvB;AACL,YAAA,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC;AACxB,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC;;;IAOlC,iBAAiB,GAAA;;;;AAIf,QAAA,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE;AACrB,QAAA,IAAI,CAAC,KAAK,GAAG,SAAS;QACtB,UAAU,CAAC,MAAK;YACd,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI;YACzD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC;AAC9C,SAAC,CAAC;;IAGJ,gBAAgB,GAAA;QACd,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC;;IAG9C,mBAAmB,GAAA;AACjB,QAAA,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,gBAAgB,CAAC;AACzE,QAAA,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,eAAe,CAAC;;IAKzE,YAAY,GAAA;QACV,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC;QACpC,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC;AACpC,QAAA,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,aAAa,EAAE,MAAM,EAAE;;;AAGpD,YAAA,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE;;;AAIvB;;;;;;AAMG;IAEH,MAAM,OAAO,CAAC,OAAsB,EAAA;AAClC,QAAA,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC,OAAO,CAAC;;AAG/B;;;AAGG;AAEH,IAAA,MAAM,MAAM,GAAA;AACV,QAAA,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE;;IAGvB,MAAM,GAAA;QACJ,OAAO;AACL,YAAA,CAAA,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,EAC7B,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,UAAU,EAAE,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,kBAAkB,EACtD,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,WAAW,EAAE,CAAC,IAAG;oBACf,CAAC,CAAC,eAAe,EAAE;oBACnB,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,IAAI,SAAS;AACpC,iBAAC,EACD,UAAU,EAAE,CAAC,IAAG;oBACd,CAAC,CAAC,eAAe,EAAE;oBACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;AAC9B,iBAAC,EACD,SAAS,EAAE,CAAC,IAAG;oBACb,CAAC,CAAC,eAAe,EAAE;oBACnB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;AAC7B,iBAAC,EAAA,EAEA,IAAI,CAAC,eAAe,KACnB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAA,EAChB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAQ,CACrB,CACR,EACA,IAAI,CAAC,cAAc,KAClB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAA,EACf,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAQ,CAAA,CACpB,CACR,CACS;YACZ,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC,EAAE,KAAK,EAAC,oBAAoB,EAAO;SAChF;;AAGK,IAAA,cAAc,CAAC,KAAwB,EAAA;QAC7C,IAAI,CAAC,KAAK,EAAE;YACV;;;QAIF,MAAM,cAAc,GAAG,CAAC,CAAC,WAAW,CAAC,cAAc,EAAE,KAAK,CAAC;AAC3D,QAAA,MAAM,sBAAsB,GAA8B,cAAc,GAAG,EAAE,wBAAwB,EAAE,EAAE,EAAE,GAAG,EAAE;AAEhH,QAAA,OAAO,SAAS,CACd,KAAK,EACL,SAAS,CAAC;AACR,YAAA,MAAM,EAAE,SAAS,CAACC,eAAI,CAAC,SAAS,EAAE,CAAC;YACnC,MAAM,EAAE,SAAS,CAACA,eAAI,CAAC,SAAS,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC;YAC9C,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,GAAG,EAAE,IAAI,CAAC,GAAG;YACb,GAAG,EAAE,IAAI,CAAC,GAAG;YACb,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACvB,YAAA,QAAQ,EAAE,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,gBAAgB,GAAG,SAAS;YAClE,sBAAsB,EAAE,EAAE,GAAG,sBAAsB,EAAE,GAAG,IAAI,CAAC,sBAAsB,EAAE;;;;YAIrF,QAAQ,EAAE,IAAI,CAAC;AACb,kBAAE,CAAC,SAAS,EAAE,eAAe,KAAI;AAC7B,oBAAA,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE,eAAe,CAAC;;AAEnD,kBAAG,IAAI,CAAC,QAAoC,IAAI,SAAS;YAC3D,OAAO,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,SAAS,KAAI;gBACvC,UAAU,CAAC,KAAK,EAAE,SAAS,CAAC,iBAAiB,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;aACvG;YACD,WAAW,EAAE,KAAK,KAAK,IAAI,CAAC,KAAK,GAAG,KAAK;AAC1C,SAAA,CAAC,CACH;;IAGK,cAAc,CAAC,SAA6B,EAAE,eAAwC,EAAA;QAC5F,IAAI,eAAe,EAAE;AACnB,YAAA,eAAe,CAAC,eAAmC,EAAE,SAAS,CAAC,iBAAiB,EAAE;AAChF,gBAAA,QAAQ,EAAE,OAAO;AACjB,gBAAA,SAAS,EAAG,IAAI,CAAC,QAAsB,IAAI,cAAc;AACzD,gBAAA,UAAU,EAAE,CAAC,IAAI,EAAE;AACpB,aAAA,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,KAAI;AAC9B,gBAAA,IAAI,SAAS,CAAC,iBAAiB,EAAE;oBAC/B,SAAS,CAAC,iBAAiB,CAAC,OAAO,CAAC,SAAS,GAAG,SAAS;oBACzD,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE;wBAC/C,IAAI,EAAE,CAAG,EAAA,CAAC,CAAI,EAAA,CAAA;wBACd,GAAG,EAAE,CAAG,EAAA,CAAC,CAAI,EAAA,CAAA;AACb,wBAAA,QAAQ,EAAE;AACX,qBAAA,CAAC;;AAEN,aAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","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@import '~flatpickr/dist/flatpickr.css';\n@import 'vendor/flatpickr';\n\n:host {\n  display: flex;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\ncat-input {\n  flex: 1 1 auto;\n  margin: 0;\n}\n","import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch, h } from '@stencil/core';\nimport flatpickr from 'flatpickr';\nimport { findClosest } from '../../utils/find-closest';\nimport { ErrorMap } from '../cat-form-hint/cat-form-hint';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\nimport { getConfig } from './cat-datepicker.config';\nimport { getFormat } from './cat-datepicker.format';\nimport { getLocale } from './cat-datepicker.locale';\nimport { CatDatepickerMode } from './cat-datepicker.mode';\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?: boolean;\n\n  /**\n   * If the horizontal value is not provided, this fallback value is used. Can be set by form-group.\n   * @internal\n   */\n  @Prop() fallbackHorizontal?: boolean;\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 ?? this.fallbackHorizontal}\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","mappings":"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","names":["__stencil_proxyCustomElement","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@import '~flatpickr/dist/flatpickr.css';\n@import 'vendor/flatpickr';\n\n:host {\n  display: flex;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\ncat-input {\n  flex: 1 1 auto;\n  margin: 0;\n}\n","import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch, h } from '@stencil/core';\nimport flatpickr from 'flatpickr';\nimport { findClosest } from '../../utils/find-closest';\nimport { ErrorMap } from '../cat-form-hint/cat-form-hint';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\nimport { getConfig } from './cat-datepicker.config';\nimport { getFormat } from './cat-datepicker.format';\nimport { getLocale } from './cat-datepicker.locale';\nimport { CatDatepickerMode } from './cat-datepicker.mode';\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?: boolean;\n\n  /**\n   * If the horizontal value is not provided, this fallback value is used. Can be set by form-group.\n   * @internal\n   */\n  @Prop() fallbackHorizontal?: boolean;\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 ?? this.fallbackHorizontal}\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}

package/dist/components/cat-dropdown2.js

@@ -1046,9 +1046,11 @@ const catDropdownCss = ":host{display:contents}:host([hidden]){display:none}::sl
 
 let nextUniqueId = 0;
 const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends HTMLElement$1 {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.catOpen = createEvent(this, "catOpen", 7);
         this.catClose = createEvent(this, "catClose", 7);
@@ -1320,7 +1322,7 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
         return elem instanceof HTMLElement$1 && elem.hasAttribute(attr);
     }
     static get style() { return catDropdownCss; }
-}, [1, "cat-dropdown", {
+}, [257, "cat-dropdown", {
         "placement": [1],
         "justify": [4],
         "noAutoClose": [4, "no-auto-close"],