@haiilo/catalyst 6.4.2 → 6.4.3

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

@@ -21,7 +21,7 @@
 
 ::slotted(nav),
 ::slotted(nav:last-child) {
-  margin: -0.75rem -1.25rem !important;
+  margin: -1rem -1rem !important;
 }
 
 ::slotted(.cat-card-pull) {

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

@@ -60,6 +60,15 @@ export class CatDatepickerFlat {
   componentDidLoad() {
     this.pickr = this.initDatepicker(this.input);
   }
+  onMinChanged() {
+    this.pickr?.set('minDate', this.min);
+    this.pickr?.set('maxDate', this.max);
+    if (this.value && !this.pickr?.selectedDates?.length) {
+      // Dynamically changing 'minDate' or 'maxDate' does not emit a change if
+      // the value is cleared due to an invalid date.
+      this.pickr?.clear();
+    }
+  }
   /**
    * Programmatically move focus to the datepicker. Use this method instead of
    * `input.focus()`.
@@ -706,6 +715,12 @@ export class CatDatepickerFlat {
       }, {
         "propName": "readonly",
         "methodName": "onDisabledChanged"
+      }, {
+        "propName": "min",
+        "methodName": "onMinChanged"
+      }, {
+        "propName": "max",
+        "methodName": "onMinChanged"
       }];
   }
 }

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, 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      if (this.mode !== 'daterange' || value.includes(' - ')) {\n        this.catChange.emit(value);\n      }\n    } else {\n      this.pickr?.clear(false);\n      this.catChange.emit(undefined);\n    }\n  }\n\n  @Watch('disabled')\n  @Watch('readonly')\n  onDisabledChanged() {\n    // Dynamically changing 'disabled' value is not working due to a bug in the\n    // library. We thus need to fully recreate the date picker after the value\n    // has been updated.\n    this.pickr?.destroy();\n    this.pickr = undefined;\n    setTimeout(() => (this.pickr = this.initDatepicker(this.input)));\n  }\n\n  componentDidLoad() {\n    this.pickr = this.initDatepicker(this.input);\n  }\n\n  /**\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,"file":"cat-datepicker.js","sourceRoot":"","sources":["../../../src/components/cat-datepicker/cat-datepicker.tsx"],"names":[],"mappings":"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","sourcesContent":["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      if (this.mode !== 'daterange' || value.includes(' - ')) {\n        this.catChange.emit(value);\n      }\n    } else {\n      this.pickr?.clear(false);\n      this.catChange.emit(undefined);\n    }\n  }\n\n  @Watch('disabled')\n  @Watch('readonly')\n  onDisabledChanged() {\n    // Dynamically changing 'disabled' value is not working due to a bug in the\n    // library. We thus need to fully recreate the date picker after the value\n    // has been updated.\n    this.pickr?.destroy();\n    this.pickr = undefined;\n    setTimeout(() => (this.pickr = this.initDatepicker(this.input)));\n  }\n\n  componentDidLoad() {\n    this.pickr = this.initDatepicker(this.input);\n  }\n\n  @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      ></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"]}

package/dist/collection/components/cat-datepicker-inline/cat-datepicker-inline.css

@@ -956,6 +956,8 @@ span.flatpickr-weekday {
 }
 .flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover {
   color: rgb(var(--cat-font-color-muted, 81, 92, 108));
+  font-weight: inherit;
+  background-color: inherit !important;
 }
 .flatpickr-day.today {
   color: rgb(var(--cat-primary-text, 0, 129, 148));

package/dist/collection/scss/core/_typography.scss

@@ -238,3 +238,84 @@ code {
   @include cat-break-word;
   padding: 0.0625rem 0.25rem;
 }
+
+// ----- editorial typography
+
+cat-article,
+.cat-article {
+  font-size: 1rem;
+
+  $cat-head-margin-bottom: 1.5rem;
+  $cat-body-margin-bottom: 2.5rem;
+
+  :where(h1, h2, h3, h4, h5, h6),
+  .cat-h1,
+  .cat-h2,
+  .cat-h3,
+  .cat-h4,
+  .cat-h5,
+  .cat-h6 {
+    margin-top: 0;
+    margin-bottom: $cat-head-margin-bottom;
+  }
+
+  .type-space-small {
+    margin-top: 0;
+    margin-bottom: calc($cat-body-margin-bottom * 0.2);
+  }
+
+  .type-space-medium {
+    margin-top: 0;
+    margin-bottom: calc($cat-body-margin-bottom * 0.4);
+  }
+
+  // :where(h1, h2, h3, h4, h5, h6, .cat-h1, .cat-h2, .cat-h3, .cat-h4, .cat-h5, .cat-h6):has(
+  //     + h1,
+  //     + h2,
+  //     + h3,
+  //     + h4,
+  //     + h5,
+  //     + h6,
+  //     + .cat-h1,
+  //     + .cat-h2,
+  //     + .cat-h3,
+  //     + .cat-h4,
+  //     + .cat-h5,
+  //     + .cat-h6
+  //   ) {
+  //     margin-top: 0;
+  //     margin-bottom:calc($cat-body-margin-bottom * 0.2);
+  // }
+
+  // :where(h3, h4, h5, h6, .cat-h3, .cat-h4, .cat-h5, .cat-h6):has(+ ul, + ol, + p) {
+  //   margin-bottom:calc($cat-body-margin-bottom * 0.4);
+  // }
+
+  h5,
+  .cat-h5 {
+    font-size: 1rem;
+  }
+
+  :where(p),
+  ol,
+  ul,
+  blockquote,
+  figure {
+    margin-top: 0;
+    margin-bottom: $cat-body-margin-bottom;
+  }
+
+  :where(p):has(+ p) {
+    margin-bottom: calc($cat-body-margin-bottom * 0.4);
+  }
+
+  hr,
+  .cat-hr {
+    margin: $cat-body-margin-bottom 0;
+  }
+
+  ol li,
+  ul li {
+    margin-bottom: calc($cat-body-margin-bottom * 0.2);
+  }
+}

package/dist/collection/scss/vendor/_flatpickr.scss

@@ -166,6 +166,8 @@
   &.flatpickr-disabled,
   &.flatpickr-disabled:hover {
     color: cat-token('color.ui.font.muted');
+    font-weight: inherit;
+    background-color: inherit !important;
   }
 
   &.today {

package/dist/components/cat-card.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
-const catCardCss = ":host{display:block;margin-bottom:1rem;border-radius:var(--cat-border-radius-l, 0.5rem);background-color:white;padding:1.25rem}:host([hidden]){display:none}::slotted(:last-child){margin-bottom:0 !important}::slotted(nav),::slotted(nav:last-child){margin:-0.75rem -1.25rem !important}::slotted(.cat-card-pull){margin:-1.25rem !important;width:calc(100% + 2.5rem) !important;height:calc(100% + 2.5rem) !important}::slotted(.cat-card-pull-h){margin-left:-1.25rem !important;margin-right:-1.25rem !important;width:calc(100% + 2.5rem) !important}::slotted(.cat-card-pull-v){margin-top:-1.25rem !important;margin-bottom:-1.25rem !important;height:calc(100% + 2.5rem) !important}::slotted(.cat-card-pull-t){margin-top:-1.25rem !important}::slotted(.cat-card-pull-l){margin-left:-1.25rem !important}::slotted(.cat-card-pull-r){margin-right:-1.25rem !important}::slotted(.cat-card-pull-b){margin-bottom:-1.25rem !important}";
+const catCardCss = ":host{display:block;margin-bottom:1rem;border-radius:var(--cat-border-radius-l, 0.5rem);background-color:white;padding:1.25rem}:host([hidden]){display:none}::slotted(:last-child){margin-bottom:0 !important}::slotted(nav),::slotted(nav:last-child){margin:-1rem -1rem !important}::slotted(.cat-card-pull){margin:-1.25rem !important;width:calc(100% + 2.5rem) !important;height:calc(100% + 2.5rem) !important}::slotted(.cat-card-pull-h){margin-left:-1.25rem !important;margin-right:-1.25rem !important;width:calc(100% + 2.5rem) !important}::slotted(.cat-card-pull-v){margin-top:-1.25rem !important;margin-bottom:-1.25rem !important;height:calc(100% + 2.5rem) !important}::slotted(.cat-card-pull-t){margin-top:-1.25rem !important}::slotted(.cat-card-pull-l){margin-left:-1.25rem !important}::slotted(.cat-card-pull-r){margin-right:-1.25rem !important}::slotted(.cat-card-pull-b){margin-bottom:-1.25rem !important}";
 
 const CatCard$1 = /*@__PURE__*/ proxyCustomElement(class CatCard extends HTMLElement {
   constructor() {

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

@@ -1 +1 @@
-{"file":"cat-card.js","mappings":";;AAAA,MAAM,UAAU,GAAG,o5BAAo5B;;MCW15BA,SAAO;;;;;;EAClB,MAAM;IACJ,OAAO,eAAa,CAAC;GACtB;;;;;;;;;;;;;;;;;;;;;;","names":["CatCard"],"sources":["src/components/cat-card/cat-card.scss?tag=cat-card&encapsulation=shadow","src/components/cat-card/cat-card.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n\n$-padding: 1.25rem;\n\n:host {\n  display: block;\n  margin-bottom: $cat-body-margin-bottom;\n  border-radius: cat-border-radius('l');\n  background-color: cat-token('color.ui.background.surface');\n  padding: $-padding;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n::slotted(:last-child) {\n  margin-bottom: 0 !important;\n}\n\n::slotted(nav),\n::slotted(nav:last-child) {\n  margin: #{$cat-body-margin-bottom * 0.5 - $-padding} #{-$-padding} !important;\n}\n\n// --- pull out helper classes\n\n::slotted(.cat-card-pull) {\n  margin: -$-padding !important;\n  width: calc(100% + #{2 * $-padding}) !important;\n  height: calc(100% + #{2 * $-padding}) !important;\n}\n\n::slotted(.cat-card-pull-h) {\n  margin-left: -$-padding !important;\n  margin-right: -$-padding !important;\n  width: calc(100% + #{2 * $-padding}) !important;\n}\n\n::slotted(.cat-card-pull-v) {\n  margin-top: -$-padding !important;\n  margin-bottom: -$-padding !important;\n  height: calc(100% + #{2 * $-padding}) !important;\n}\n\n::slotted(.cat-card-pull-t) {\n  margin-top: -$-padding !important;\n}\n\n::slotted(.cat-card-pull-l) {\n  margin-left: -$-padding !important;\n}\n\n::slotted(.cat-card-pull-r) {\n  margin-right: -$-padding !important;\n}\n\n::slotted(.cat-card-pull-b) {\n  margin-bottom: -$-padding !important;\n}\n","import { Component, h } from '@stencil/core';\n\n/**\n * Cards are surfaces that display content and actions on a single topic. They\n * should be easy to scan for relevant and actionable information.\n */\n@Component({\n  tag: 'cat-card',\n  styleUrl: 'cat-card.scss',\n  shadow: true\n})\nexport class CatCard {\n  render() {\n    return <slot></slot>;\n  }\n}\n"],"version":3}
+{"file":"cat-card.js","mappings":";;AAAA,MAAM,UAAU,GAAG,84BAA84B;;MCWp5BA,SAAO;;;;;;EAClB,MAAM;IACJ,OAAO,eAAa,CAAC;GACtB;;;;;;;;;;;;;;;;;;;;;;","names":["CatCard"],"sources":["src/components/cat-card/cat-card.scss?tag=cat-card&encapsulation=shadow","src/components/cat-card/cat-card.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n\n$-padding: 1.25rem;\n\n:host {\n  display: block;\n  margin-bottom: $cat-body-margin-bottom;\n  border-radius: cat-border-radius('l');\n  background-color: cat-token('color.ui.background.surface');\n  padding: $-padding;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n::slotted(:last-child) {\n  margin-bottom: 0 !important;\n}\n\n::slotted(nav),\n::slotted(nav:last-child) {\n  margin: #{0.25rem - $-padding} #{0.25rem - $-padding} !important;\n}\n\n// --- pull out helper classes\n\n::slotted(.cat-card-pull) {\n  margin: -$-padding !important;\n  width: calc(100% + #{2 * $-padding}) !important;\n  height: calc(100% + #{2 * $-padding}) !important;\n}\n\n::slotted(.cat-card-pull-h) {\n  margin-left: -$-padding !important;\n  margin-right: -$-padding !important;\n  width: calc(100% + #{2 * $-padding}) !important;\n}\n\n::slotted(.cat-card-pull-v) {\n  margin-top: -$-padding !important;\n  margin-bottom: -$-padding !important;\n  height: calc(100% + #{2 * $-padding}) !important;\n}\n\n::slotted(.cat-card-pull-t) {\n  margin-top: -$-padding !important;\n}\n\n::slotted(.cat-card-pull-l) {\n  margin-left: -$-padding !important;\n}\n\n::slotted(.cat-card-pull-r) {\n  margin-right: -$-padding !important;\n}\n\n::slotted(.cat-card-pull-b) {\n  margin-bottom: -$-padding !important;\n}\n","import { Component, h } from '@stencil/core';\n\n/**\n * Cards are surfaces that display content and actions on a single topic. They\n * should be easy to scan for relevant and actionable information.\n */\n@Component({\n  tag: 'cat-card',\n  styleUrl: 'cat-card.scss',\n  shadow: true\n})\nexport class CatCard {\n  render() {\n    return <slot></slot>;\n  }\n}\n"],"version":3}

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

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { f as flatpickr, g as getConfig, a as getLocale, b as getFormat } from './cat-datepicker.locale.js';
 import { c as catI18nRegistry } from './cat-i18n-registry.js';
 
-const catDatepickerInlineCss = "@charset \"UTF-8\";.flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;-webkit-animation:none;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-touch-action:manipulation;touch-action:manipulation;background:#fff;-webkit-box-shadow:1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0,0,0,0.08);box-shadow:1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0,0,0,0.08)}.flatpickr-calendar.open,.flatpickr-calendar.inline{opacity:1;max-height:640px;visibility:visible}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{-webkit-animation:fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);animation:fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){-webkit-box-shadow:none !important;box-shadow:none !important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){-webkit-box-shadow:-2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;box-shadow:-2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6}.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:before,.flatpickr-calendar:after{position:absolute;display:block;pointer-events:none;border:solid transparent;content:'';height:0;width:0;left:22px}.flatpickr-calendar.rightMost:before,.flatpickr-calendar.arrowRight:before,.flatpickr-calendar.rightMost:after,.flatpickr-calendar.arrowRight:after{left:auto;right:22px}.flatpickr-calendar.arrowCenter:before,.flatpickr-calendar.arrowCenter:after{left:50%;right:50%}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-months .flatpickr-month{background:transparent;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9);height:34px;line-height:1;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none;cursor:pointer;position:absolute;top:0;height:34px;padding:10px;z-index:3;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9)}.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{position:relative}.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month{left:0;}.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,.flatpickr-months .flatpickr-next-month.flatpickr-next-month{right:0;}.flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{color:#959ea9}.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:#f64747}.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg{width:14px;height:14px}.flatpickr-months .flatpickr-prev-month svg path,.flatpickr-months .flatpickr-next-month svg path{-webkit-transition:fill 0.1s;transition:fill 0.1s;fill:inherit}.numInputWrapper{position:relative;height:auto}.numInputWrapper input,.numInputWrapper span{display:inline-block}.numInputWrapper input{width:100%}.numInputWrapper input::-ms-clear{display:none}.numInputWrapper input::-webkit-outer-spin-button,.numInputWrapper input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.numInputWrapper span{position:absolute;right:0;width:14px;padding:0 4px 0 2px;height:50%;line-height:50%;opacity:0;cursor:pointer;border:1px solid rgba(57,57,57,0.15);-webkit-box-sizing:border-box;box-sizing:border-box}.numInputWrapper span:hover{background:rgba(0,0,0,0.1)}.numInputWrapper span:active{background:rgba(0,0,0,0.2)}.numInputWrapper span:after{display:block;content:\"\";position:absolute}.numInputWrapper span.arrowUp{top:0;border-bottom:0}.numInputWrapper span.arrowUp:after{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid rgba(57,57,57,0.6);top:26%}.numInputWrapper span.arrowDown{top:50%}.numInputWrapper span.arrowDown:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(57,57,57,0.6);top:40%}.numInputWrapper span svg{width:inherit;height:auto}.numInputWrapper span svg path{fill:rgba(0,0,0,0.5)}.numInputWrapper:hover{background:rgba(0,0,0,0.05)}.numInputWrapper:hover span{opacity:1}.flatpickr-current-month{font-size:135%;line-height:inherit;font-weight:300;color:inherit;position:absolute;width:75%;left:12.5%;padding:7.48px 0 0 0;line-height:1;height:34px;display:inline-block;text-align:center;-webkit-transform:translate3d(0px, 0px, 0px);transform:translate3d(0px, 0px, 0px)}.flatpickr-current-month span.cur-month{font-family:inherit;font-weight:700;color:inherit;display:inline-block;margin-left:0.5ch;padding:0}.flatpickr-current-month span.cur-month:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .numInputWrapper{width:6ch;width:7ch\\0;display:inline-block}.flatpickr-current-month .numInputWrapper span.arrowUp:after{border-bottom-color:rgba(0,0,0,0.9)}.flatpickr-current-month .numInputWrapper span.arrowDown:after{border-top-color:rgba(0,0,0,0.9)}.flatpickr-current-month input.cur-year{background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;cursor:text;padding:0 0 0 0.5ch;margin:0;display:inline-block;font-size:inherit;font-family:inherit;font-weight:300;line-height:inherit;height:auto;border:0;border-radius:0;vertical-align:initial;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-current-month input.cur-year:focus{outline:0}.flatpickr-current-month input.cur-year[disabled],.flatpickr-current-month input.cur-year[disabled]:hover{font-size:100%;color:rgba(0,0,0,0.5);background:transparent;pointer-events:none}.flatpickr-current-month .flatpickr-monthDropdown-months{appearance:menulist;background:transparent;border:none;border-radius:0;box-sizing:border-box;color:inherit;cursor:pointer;font-size:inherit;font-family:inherit;font-weight:300;height:auto;line-height:inherit;margin:-1px 0 0 0;outline:none;padding:0 0 0 0.5ch;position:relative;vertical-align:initial;-webkit-box-sizing:border-box;-webkit-appearance:menulist;-moz-appearance:menulist;width:auto}.flatpickr-current-month .flatpickr-monthDropdown-months:focus,.flatpickr-current-month .flatpickr-monthDropdown-months:active{outline:none}.flatpickr-current-month .flatpickr-monthDropdown-months:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{background-color:transparent;outline:none;padding:0}.flatpickr-weekdays{background:transparent;text-align:center;overflow:hidden;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:28px}.flatpickr-weekdays .flatpickr-weekdaycontainer{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}span.flatpickr-weekday{cursor:default;font-size:90%;background:transparent;color:rgba(0,0,0,0.54);line-height:1;margin:0;text-align:center;display:block;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;font-weight:bolder}.dayContainer,.flatpickr-weeks{padding:1px 0 0 0}.flatpickr-days{position:relative;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;width:307.875px}.flatpickr-days:focus{outline:0}.dayContainer{padding:0;outline:0;text-align:left;width:307.875px;min-width:307.875px;max-width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-wrap:wrap;-ms-flex-pack:justify;-webkit-justify-content:space-around;justify-content:space-around;-webkit-transform:translate3d(0px, 0px, 0px);transform:translate3d(0px, 0px, 0px);opacity:1}.dayContainer+.dayContainer{-webkit-box-shadow:-1px 0 0 #e6e6e6;box-shadow:-1px 0 0 #e6e6e6}.flatpickr-day{background:none;border:1px solid transparent;border-radius:150px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#393939;cursor:pointer;font-weight:400;width:14.2857143%;-webkit-flex-basis:14.2857143%;-ms-flex-preferred-size:14.2857143%;flex-basis:14.2857143%;max-width:39px;height:39px;line-height:39px;margin:0;display:inline-block;position:relative;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.flatpickr-day.inRange,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.today.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day:hover,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover,.flatpickr-day:focus,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.nextMonthDay:focus{cursor:pointer;outline:0;background:#e6e6e6;border-color:#e6e6e6}.flatpickr-day.today{border-color:#959ea9}.flatpickr-day.today:hover,.flatpickr-day.today:focus{border-color:#959ea9;background:#959ea9;color:#fff}.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.selected.inRange,.flatpickr-day.startRange.inRange,.flatpickr-day.endRange.inRange,.flatpickr-day.selected:focus,.flatpickr-day.startRange:focus,.flatpickr-day.endRange:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.endRange.nextMonthDay{background:#569ff7;-webkit-box-shadow:none;box-shadow:none;color:#fff;border-color:#569ff7}.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange,.flatpickr-day.endRange.startRange{border-radius:50px 0 0 50px}.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange,.flatpickr-day.endRange.endRange{border-radius:0 50px 50px 0}.flatpickr-day.selected.startRange+.endRange:not(:nth-child(7n+1)),.flatpickr-day.startRange.startRange+.endRange:not(:nth-child(7n+1)),.flatpickr-day.endRange.startRange+.endRange:not(:nth-child(7n+1)){-webkit-box-shadow:-10px 0 0 #569ff7;box-shadow:-10px 0 0 #569ff7}.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange,.flatpickr-day.endRange.startRange.endRange{border-radius:50px}.flatpickr-day.inRange{border-radius:0;-webkit-box-shadow:-5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;box-shadow:-5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.notAllowed.nextMonthDay{color:rgba(57,57,57,0.3);background:transparent;border-color:transparent;cursor:default}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{cursor:not-allowed;color:rgba(57,57,57,0.1)}.flatpickr-day.week.selected{border-radius:0;-webkit-box-shadow:-5px 0 0 #569ff7, 5px 0 0 #569ff7;box-shadow:-5px 0 0 #569ff7, 5px 0 0 #569ff7}.flatpickr-day.hidden{visibility:hidden}.rangeMode .flatpickr-day{margin-top:1px}.flatpickr-weekwrapper{float:left}.flatpickr-weekwrapper .flatpickr-weeks{padding:0 12px;-webkit-box-shadow:1px 0 0 #e6e6e6;box-shadow:1px 0 0 #e6e6e6}.flatpickr-weekwrapper .flatpickr-weekday{float:none;width:100%;line-height:28px}.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{display:block;width:100%;max-width:none;color:rgba(57,57,57,0.3);background:transparent;cursor:default;border:none}.flatpickr-innerContainer{display:block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.flatpickr-rContainer{display:inline-block;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.flatpickr-time{text-align:center;outline:0;display:block;height:0;line-height:40px;max-height:40px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-time:after{content:\"\";display:table;clear:both}.flatpickr-time .numInputWrapper{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;width:40%;height:40px;float:left}.flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:#393939}.flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:#393939}.flatpickr-time.hasSeconds .numInputWrapper{width:26%}.flatpickr-time.time24hr .numInputWrapper{width:49%}.flatpickr-time input{background:transparent;-webkit-box-shadow:none;box-shadow:none;border:0;border-radius:0;text-align:center;margin:0;padding:0;height:inherit;line-height:inherit;color:#393939;font-size:14px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-time input.flatpickr-hour{font-weight:bold}.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{font-weight:400}.flatpickr-time input:focus{outline:0;border:0}.flatpickr-time .flatpickr-time-separator,.flatpickr-time .flatpickr-am-pm{height:inherit;float:left;line-height:inherit;color:#393939;font-weight:bold;width:2%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.flatpickr-time .flatpickr-am-pm{outline:0;width:18%;cursor:pointer;text-align:center;font-weight:400}.flatpickr-time input:hover,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time input:focus,.flatpickr-time .flatpickr-am-pm:focus{background:#eee}.flatpickr-input[readonly]{cursor:pointer}@-webkit-keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0, -20px, 0);transform:translate3d(0, -20px, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0, -20px, 0);transform:translate3d(0, -20px, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}.flatpickr-calendar{font-size:0.875rem;line-height:1.125rem;font-weight:var(--cat-font-weight-body, 400);box-shadow:0 4px 6px -2px rgba(27, 31, 38, 0.03), 0 12px 16px -4px rgba(27, 31, 38, 0.08);border-radius:var(--cat-border-radius-m, 0.25rem);border:1px solid rgb(var(--cat-border-color, 235, 236, 240));background:white;padding:1rem}.flatpickr-calendar:not(.inline).animate{transform:translateY(-1rem);opacity:0;transition:transform 125ms cubic-bezier(0.3, 0, 0.8, 0.15), opacity 125ms cubic-bezier(0.3, 0, 0.8, 0.15)}.flatpickr-calendar::before,.flatpickr-calendar::after{display:none}.flatpickr-calendar.inline,.flatpickr-calendar.open{display:flex;flex-direction:column;gap:1rem;width:auto !important}.flatpickr-calendar.inline{border:unset;padding:0}.flatpickr-calendar.open{z-index:calc(var(--cat-z-index, 1000) + 100);margin-top:0.75rem;margin-left:-0.75rem}.flatpickr-calendar.open.animate{opacity:1;transform:translateY(0);transition:transform 500ms cubic-bezier(0.05, 0.7, 0.1, 1), opacity 500ms cubic-bezier(0.05, 0.7, 0.1, 1)}.flatpickr-months{gap:0.25rem}.flatpickr-months .flatpickr-month{height:auto}.flatpickr-current-month{font-family:var(--cat-font-family-head, \"Lato\"), system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, var(--cat-font-family-emoji, \"\"), \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";font-size:1.125rem;line-height:1.5rem;color:rgb(var(--cat-font-color-head, 0, 0, 0));font-weight:var(--cat-font-weight-head, 600);font-feature-settings:\"pnum\";height:100%;padding:0;display:flex;position:static;width:auto;gap:0.25rem}.flatpickr-current-month .flatpickr-monthDropdown-months{padding:0 0.25rem;flex:1;margin:unset;font-weight:inherit;border-radius:var(--cat-border-radius-m, 0.25rem)}.flatpickr-current-month .flatpickr-monthDropdown-months:hover,.flatpickr-current-month .flatpickr-monthDropdown-months:focus-within{background-color:rgba(var(--cat-primary-bg, 0, 129, 148), 0.05)}.flatpickr-current-month input.cur-year{padding:0;font-weight:inherit;line-height:2.25rem}.flatpickr-current-month .numInputWrapper{width:7ch}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{position:static;width:2.25rem;height:2.25rem;padding:0;align-items:center;display:flex;justify-content:center;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{color:rgb(var(--cat-font-color-body, 0, 0, 0))}.flatpickr-weekdays{height:2rem}.flatpickr-weekdays .flatpickr-weekday{color:rgb(var(--cat-font-color-muted, 81, 92, 108));font-size:0.75rem;line-height:1rem;font-weight:700}.flatpickr-weekwrapper .flatpickr-weekday{height:2rem}.flatpickr-weekwrapper .flatpickr-weeks{box-shadow:none;width:2rem;padding:0;margin-right:0.5rem;background:#f2f4f7;border-radius:var(--cat-border-radius-m, 0.25rem)}.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{font-size:0.75rem;line-height:1rem;font-weight:700;color:rgb(var(--cat-font-color-muted, 81, 92, 108));text-align:center;line-height:2.25rem}.flatpickr-days{width:15.75rem !important}.dayContainer{width:15.75rem;min-width:15.75rem;max-width:15.75rem}.flatpickr-day{color:rgb(var(--cat-font-color-body, 0, 0, 0));height:2.25rem;line-height:2.25rem;border:0;border-radius:var(--cat-border-radius-m, 0.25rem)}.flatpickr-day:hover{background-color:#f2f4f7;font-weight:700}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.flatpickr-day.today{color:rgb(var(--cat-primary-text, 0, 129, 148));box-shadow:inset 0 0 0 2px rgb(var(--cat-primary-text, 0, 129, 148))}.flatpickr-day.today:hover,.flatpickr-day.today:focus{background-color:#f2f4f7;color:rgb(var(--cat-primary-text, 0, 129, 148))}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.notAllowed.nextMonthDay{color:rgba(var(--cat-font-color-muted, 81, 92, 108), 0.5)}.flatpickr-day.selected,.flatpickr-day.selected:hover,.flatpickr-day.selected:focus,.flatpickr-day.selected.inRange,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.startRange,.flatpickr-day.startRange:hover,.flatpickr-day.startRange:focus,.flatpickr-day.startRange.inRange,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.endRange,.flatpickr-day.endRange:hover,.flatpickr-day.endRange:focus,.flatpickr-day.endRange.inRange,.flatpickr-day.endRange.nextMonthDay,.flatpickr-day.endRange.prevMonthDay{font-weight:700;background-color:rgb(var(--cat-primary-bg, 0, 129, 148)) !important;color:rgb(var(--cat-primary-fill, 255, 255, 255)) !important}.flatpickr-day.inRange,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.today.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day:hover,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover,.flatpickr-day:focus,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.nextMonthDay:focus{background-color:rgba(var(--cat-primary-bg, 0, 129, 148), 0.1)}.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange,.flatpickr-day.endRange.startRange{border-top-left-radius:var(--cat-border-radius-m, 0.25rem);border-bottom-left-radius:var(--cat-border-radius-m, 0.25rem)}.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange,.flatpickr-day.endRange.endRange{border-top-right-radius:var(--cat-border-radius-m, 0.25rem);border-bottom-right-radius:var(--cat-border-radius-m, 0.25rem)}.numInputWrapper{padding:0 1rem 0 0.5rem;border-radius:var(--cat-border-radius-m, 0.25rem)}.numInputWrapper:hover,.numInputWrapper:focus-within{background-color:rgba(var(--cat-primary-bg, 0, 129, 148), 0.05)}.numInputWrapper span{border:none;background:transparent;width:1rem;padding:0;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.numInputWrapper span.arrowUp::after{content:\"↑\";align-items:flex-end}.numInputWrapper span.arrowDown::after{content:\"↓\";align-items:flex-start}.numInputWrapper span::after{font-size:0.75rem;line-height:1rem;font-weight:700;position:static;border:0 !important;font-size:10px;display:flex;height:100%;justify-content:center}.numInputWrapper span:hover{color:rgb(var(--cat-font-color-body, 0, 0, 0));background:transparent}.flatpickr-calendar.hasTime .flatpickr-time{border:1px solid rgb(var(--cat-border-color, 235, 236, 240));border-radius:var(--cat-border-radius-m, 0.25rem);min-width:12rem;height:auto}.flatpickr-calendar.hasTime .flatpickr-time .numInputWrapper{height:2rem;padding:0;margin:0.25rem;display:flex}.flatpickr-calendar.hasTime.noCalendar{padding:0}.flatpickr-calendar.hasTime.noCalendar .flatpickr-time{border:none}.flatpickr-time .flatpickr-time-separator,.flatpickr-time .flatpickr-am-pm{margin:0 0.25rem;font-family:var(--cat-font-family-head, \"Lato\"), system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, var(--cat-font-family-emoji, \"\"), \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";font-size:1.125rem;line-height:1.5rem;color:rgb(var(--cat-font-color-head, 0, 0, 0));font-weight:400;font-feature-settings:\"pnum\";color:rgb(var(--cat-font-color-body, 0, 0, 0));line-height:2.25rem}.flatpickr-time .flatpickr-am-pm{width:25%;padding:0 0.5rem}.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time .flatpickr-am-pm:focus{border-radius:var(--cat-border-radius-m, 0.25rem);background-color:rgba(var(--cat-primary-bg, 0, 129, 148), 0.05)}.flatpickr-time{max-height:unset}.flatpickr-time input{background:transparent !important;color:rgb(var(--cat-font-color-body, 0, 0, 0));font-size:0.9375rem;line-height:2.25rem;font-family:inherit}.flatpickr-time input.flatpickr-hour{font-weight:inherit}.flatpickr-day.inRange:not(.today),.flatpickr-day.week.selected{box-shadow:none}.flatpickr-day.inRange:nth-child(7n+1),.flatpickr-day.week.selected:nth-child(7n+1){border-top-left-radius:var(--cat-border-radius-m, 0.25rem);border-bottom-left-radius:var(--cat-border-radius-m, 0.25rem)}.flatpickr-day.inRange:nth-child(7n+7),.flatpickr-day.week.selected:nth-child(7n+7){border-top-right-radius:var(--cat-border-radius-m, 0.25rem);border-bottom-right-radius:var(--cat-border-radius-m, 0.25rem)}.flatpickr-day.selected.startRange+.endRange:not(:nth-child(7n+1)),.flatpickr-day.startRange.startRange+.endRange:not(:nth-child(7n+1)),.flatpickr-day.endRange.startRange+.endRange:not(:nth-child(7n+1)){box-shadow:none}.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange,.flatpickr-day.endRange.startRange.endRange{border-radius:var(--cat-border-radius-m, 0.25rem)}:host{display:inline-flex;margin-bottom:1rem}:host>div{display:flex}:host([hidden]){display:none}.datepicker-disabled .flatpickr-days,.datepicker-disabled .flatpickr-time,.datepicker-readonly .flatpickr-days,.datepicker-readonly .flatpickr-time{pointer-events:none}.datepicker-disabled .flatpickr-days{opacity:0.75}.datepicker-disabled .flatpickr-time input,.datepicker-disabled .flatpickr-time .flatpickr-time-separator,.datepicker-disabled .flatpickr-time .flatpickr-am-pm{color:rgb(var(--cat-font-color-muted, 81, 92, 108));opacity:0.75}input{display:none}.flatpickr-calendar{box-shadow:unset;background:unset}";
+const catDatepickerInlineCss = "@charset \"UTF-8\";.flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;-webkit-animation:none;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-touch-action:manipulation;touch-action:manipulation;background:#fff;-webkit-box-shadow:1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0,0,0,0.08);box-shadow:1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0,0,0,0.08)}.flatpickr-calendar.open,.flatpickr-calendar.inline{opacity:1;max-height:640px;visibility:visible}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{-webkit-animation:fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);animation:fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){-webkit-box-shadow:none !important;box-shadow:none !important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){-webkit-box-shadow:-2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;box-shadow:-2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6}.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:before,.flatpickr-calendar:after{position:absolute;display:block;pointer-events:none;border:solid transparent;content:'';height:0;width:0;left:22px}.flatpickr-calendar.rightMost:before,.flatpickr-calendar.arrowRight:before,.flatpickr-calendar.rightMost:after,.flatpickr-calendar.arrowRight:after{left:auto;right:22px}.flatpickr-calendar.arrowCenter:before,.flatpickr-calendar.arrowCenter:after{left:50%;right:50%}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-months .flatpickr-month{background:transparent;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9);height:34px;line-height:1;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none;cursor:pointer;position:absolute;top:0;height:34px;padding:10px;z-index:3;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9)}.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{position:relative}.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month{left:0;}.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,.flatpickr-months .flatpickr-next-month.flatpickr-next-month{right:0;}.flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{color:#959ea9}.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:#f64747}.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg{width:14px;height:14px}.flatpickr-months .flatpickr-prev-month svg path,.flatpickr-months .flatpickr-next-month svg path{-webkit-transition:fill 0.1s;transition:fill 0.1s;fill:inherit}.numInputWrapper{position:relative;height:auto}.numInputWrapper input,.numInputWrapper span{display:inline-block}.numInputWrapper input{width:100%}.numInputWrapper input::-ms-clear{display:none}.numInputWrapper input::-webkit-outer-spin-button,.numInputWrapper input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.numInputWrapper span{position:absolute;right:0;width:14px;padding:0 4px 0 2px;height:50%;line-height:50%;opacity:0;cursor:pointer;border:1px solid rgba(57,57,57,0.15);-webkit-box-sizing:border-box;box-sizing:border-box}.numInputWrapper span:hover{background:rgba(0,0,0,0.1)}.numInputWrapper span:active{background:rgba(0,0,0,0.2)}.numInputWrapper span:after{display:block;content:\"\";position:absolute}.numInputWrapper span.arrowUp{top:0;border-bottom:0}.numInputWrapper span.arrowUp:after{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid rgba(57,57,57,0.6);top:26%}.numInputWrapper span.arrowDown{top:50%}.numInputWrapper span.arrowDown:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(57,57,57,0.6);top:40%}.numInputWrapper span svg{width:inherit;height:auto}.numInputWrapper span svg path{fill:rgba(0,0,0,0.5)}.numInputWrapper:hover{background:rgba(0,0,0,0.05)}.numInputWrapper:hover span{opacity:1}.flatpickr-current-month{font-size:135%;line-height:inherit;font-weight:300;color:inherit;position:absolute;width:75%;left:12.5%;padding:7.48px 0 0 0;line-height:1;height:34px;display:inline-block;text-align:center;-webkit-transform:translate3d(0px, 0px, 0px);transform:translate3d(0px, 0px, 0px)}.flatpickr-current-month span.cur-month{font-family:inherit;font-weight:700;color:inherit;display:inline-block;margin-left:0.5ch;padding:0}.flatpickr-current-month span.cur-month:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .numInputWrapper{width:6ch;width:7ch\\0;display:inline-block}.flatpickr-current-month .numInputWrapper span.arrowUp:after{border-bottom-color:rgba(0,0,0,0.9)}.flatpickr-current-month .numInputWrapper span.arrowDown:after{border-top-color:rgba(0,0,0,0.9)}.flatpickr-current-month input.cur-year{background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;cursor:text;padding:0 0 0 0.5ch;margin:0;display:inline-block;font-size:inherit;font-family:inherit;font-weight:300;line-height:inherit;height:auto;border:0;border-radius:0;vertical-align:initial;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-current-month input.cur-year:focus{outline:0}.flatpickr-current-month input.cur-year[disabled],.flatpickr-current-month input.cur-year[disabled]:hover{font-size:100%;color:rgba(0,0,0,0.5);background:transparent;pointer-events:none}.flatpickr-current-month .flatpickr-monthDropdown-months{appearance:menulist;background:transparent;border:none;border-radius:0;box-sizing:border-box;color:inherit;cursor:pointer;font-size:inherit;font-family:inherit;font-weight:300;height:auto;line-height:inherit;margin:-1px 0 0 0;outline:none;padding:0 0 0 0.5ch;position:relative;vertical-align:initial;-webkit-box-sizing:border-box;-webkit-appearance:menulist;-moz-appearance:menulist;width:auto}.flatpickr-current-month .flatpickr-monthDropdown-months:focus,.flatpickr-current-month .flatpickr-monthDropdown-months:active{outline:none}.flatpickr-current-month .flatpickr-monthDropdown-months:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{background-color:transparent;outline:none;padding:0}.flatpickr-weekdays{background:transparent;text-align:center;overflow:hidden;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:28px}.flatpickr-weekdays .flatpickr-weekdaycontainer{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}span.flatpickr-weekday{cursor:default;font-size:90%;background:transparent;color:rgba(0,0,0,0.54);line-height:1;margin:0;text-align:center;display:block;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;font-weight:bolder}.dayContainer,.flatpickr-weeks{padding:1px 0 0 0}.flatpickr-days{position:relative;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;width:307.875px}.flatpickr-days:focus{outline:0}.dayContainer{padding:0;outline:0;text-align:left;width:307.875px;min-width:307.875px;max-width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-wrap:wrap;-ms-flex-pack:justify;-webkit-justify-content:space-around;justify-content:space-around;-webkit-transform:translate3d(0px, 0px, 0px);transform:translate3d(0px, 0px, 0px);opacity:1}.dayContainer+.dayContainer{-webkit-box-shadow:-1px 0 0 #e6e6e6;box-shadow:-1px 0 0 #e6e6e6}.flatpickr-day{background:none;border:1px solid transparent;border-radius:150px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#393939;cursor:pointer;font-weight:400;width:14.2857143%;-webkit-flex-basis:14.2857143%;-ms-flex-preferred-size:14.2857143%;flex-basis:14.2857143%;max-width:39px;height:39px;line-height:39px;margin:0;display:inline-block;position:relative;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.flatpickr-day.inRange,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.today.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day:hover,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover,.flatpickr-day:focus,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.nextMonthDay:focus{cursor:pointer;outline:0;background:#e6e6e6;border-color:#e6e6e6}.flatpickr-day.today{border-color:#959ea9}.flatpickr-day.today:hover,.flatpickr-day.today:focus{border-color:#959ea9;background:#959ea9;color:#fff}.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.selected.inRange,.flatpickr-day.startRange.inRange,.flatpickr-day.endRange.inRange,.flatpickr-day.selected:focus,.flatpickr-day.startRange:focus,.flatpickr-day.endRange:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.endRange.nextMonthDay{background:#569ff7;-webkit-box-shadow:none;box-shadow:none;color:#fff;border-color:#569ff7}.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange,.flatpickr-day.endRange.startRange{border-radius:50px 0 0 50px}.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange,.flatpickr-day.endRange.endRange{border-radius:0 50px 50px 0}.flatpickr-day.selected.startRange+.endRange:not(:nth-child(7n+1)),.flatpickr-day.startRange.startRange+.endRange:not(:nth-child(7n+1)),.flatpickr-day.endRange.startRange+.endRange:not(:nth-child(7n+1)){-webkit-box-shadow:-10px 0 0 #569ff7;box-shadow:-10px 0 0 #569ff7}.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange,.flatpickr-day.endRange.startRange.endRange{border-radius:50px}.flatpickr-day.inRange{border-radius:0;-webkit-box-shadow:-5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;box-shadow:-5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.notAllowed.nextMonthDay{color:rgba(57,57,57,0.3);background:transparent;border-color:transparent;cursor:default}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{cursor:not-allowed;color:rgba(57,57,57,0.1)}.flatpickr-day.week.selected{border-radius:0;-webkit-box-shadow:-5px 0 0 #569ff7, 5px 0 0 #569ff7;box-shadow:-5px 0 0 #569ff7, 5px 0 0 #569ff7}.flatpickr-day.hidden{visibility:hidden}.rangeMode .flatpickr-day{margin-top:1px}.flatpickr-weekwrapper{float:left}.flatpickr-weekwrapper .flatpickr-weeks{padding:0 12px;-webkit-box-shadow:1px 0 0 #e6e6e6;box-shadow:1px 0 0 #e6e6e6}.flatpickr-weekwrapper .flatpickr-weekday{float:none;width:100%;line-height:28px}.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{display:block;width:100%;max-width:none;color:rgba(57,57,57,0.3);background:transparent;cursor:default;border:none}.flatpickr-innerContainer{display:block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.flatpickr-rContainer{display:inline-block;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.flatpickr-time{text-align:center;outline:0;display:block;height:0;line-height:40px;max-height:40px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-time:after{content:\"\";display:table;clear:both}.flatpickr-time .numInputWrapper{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;width:40%;height:40px;float:left}.flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:#393939}.flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:#393939}.flatpickr-time.hasSeconds .numInputWrapper{width:26%}.flatpickr-time.time24hr .numInputWrapper{width:49%}.flatpickr-time input{background:transparent;-webkit-box-shadow:none;box-shadow:none;border:0;border-radius:0;text-align:center;margin:0;padding:0;height:inherit;line-height:inherit;color:#393939;font-size:14px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-time input.flatpickr-hour{font-weight:bold}.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{font-weight:400}.flatpickr-time input:focus{outline:0;border:0}.flatpickr-time .flatpickr-time-separator,.flatpickr-time .flatpickr-am-pm{height:inherit;float:left;line-height:inherit;color:#393939;font-weight:bold;width:2%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.flatpickr-time .flatpickr-am-pm{outline:0;width:18%;cursor:pointer;text-align:center;font-weight:400}.flatpickr-time input:hover,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time input:focus,.flatpickr-time .flatpickr-am-pm:focus{background:#eee}.flatpickr-input[readonly]{cursor:pointer}@-webkit-keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0, -20px, 0);transform:translate3d(0, -20px, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0, -20px, 0);transform:translate3d(0, -20px, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}.flatpickr-calendar{font-size:0.875rem;line-height:1.125rem;font-weight:var(--cat-font-weight-body, 400);box-shadow:0 4px 6px -2px rgba(27, 31, 38, 0.03), 0 12px 16px -4px rgba(27, 31, 38, 0.08);border-radius:var(--cat-border-radius-m, 0.25rem);border:1px solid rgb(var(--cat-border-color, 235, 236, 240));background:white;padding:1rem}.flatpickr-calendar:not(.inline).animate{transform:translateY(-1rem);opacity:0;transition:transform 125ms cubic-bezier(0.3, 0, 0.8, 0.15), opacity 125ms cubic-bezier(0.3, 0, 0.8, 0.15)}.flatpickr-calendar::before,.flatpickr-calendar::after{display:none}.flatpickr-calendar.inline,.flatpickr-calendar.open{display:flex;flex-direction:column;gap:1rem;width:auto !important}.flatpickr-calendar.inline{border:unset;padding:0}.flatpickr-calendar.open{z-index:calc(var(--cat-z-index, 1000) + 100);margin-top:0.75rem;margin-left:-0.75rem}.flatpickr-calendar.open.animate{opacity:1;transform:translateY(0);transition:transform 500ms cubic-bezier(0.05, 0.7, 0.1, 1), opacity 500ms cubic-bezier(0.05, 0.7, 0.1, 1)}.flatpickr-months{gap:0.25rem}.flatpickr-months .flatpickr-month{height:auto}.flatpickr-current-month{font-family:var(--cat-font-family-head, \"Lato\"), system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, var(--cat-font-family-emoji, \"\"), \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";font-size:1.125rem;line-height:1.5rem;color:rgb(var(--cat-font-color-head, 0, 0, 0));font-weight:var(--cat-font-weight-head, 600);font-feature-settings:\"pnum\";height:100%;padding:0;display:flex;position:static;width:auto;gap:0.25rem}.flatpickr-current-month .flatpickr-monthDropdown-months{padding:0 0.25rem;flex:1;margin:unset;font-weight:inherit;border-radius:var(--cat-border-radius-m, 0.25rem)}.flatpickr-current-month .flatpickr-monthDropdown-months:hover,.flatpickr-current-month .flatpickr-monthDropdown-months:focus-within{background-color:rgba(var(--cat-primary-bg, 0, 129, 148), 0.05)}.flatpickr-current-month input.cur-year{padding:0;font-weight:inherit;line-height:2.25rem}.flatpickr-current-month .numInputWrapper{width:7ch}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{position:static;width:2.25rem;height:2.25rem;padding:0;align-items:center;display:flex;justify-content:center;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{color:rgb(var(--cat-font-color-body, 0, 0, 0))}.flatpickr-weekdays{height:2rem}.flatpickr-weekdays .flatpickr-weekday{color:rgb(var(--cat-font-color-muted, 81, 92, 108));font-size:0.75rem;line-height:1rem;font-weight:700}.flatpickr-weekwrapper .flatpickr-weekday{height:2rem}.flatpickr-weekwrapper .flatpickr-weeks{box-shadow:none;width:2rem;padding:0;margin-right:0.5rem;background:#f2f4f7;border-radius:var(--cat-border-radius-m, 0.25rem)}.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{font-size:0.75rem;line-height:1rem;font-weight:700;color:rgb(var(--cat-font-color-muted, 81, 92, 108));text-align:center;line-height:2.25rem}.flatpickr-days{width:15.75rem !important}.dayContainer{width:15.75rem;min-width:15.75rem;max-width:15.75rem}.flatpickr-day{color:rgb(var(--cat-font-color-body, 0, 0, 0));height:2.25rem;line-height:2.25rem;border:0;border-radius:var(--cat-border-radius-m, 0.25rem)}.flatpickr-day:hover{background-color:#f2f4f7;font-weight:700}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{color:rgb(var(--cat-font-color-muted, 81, 92, 108));font-weight:inherit;background-color:inherit !important}.flatpickr-day.today{color:rgb(var(--cat-primary-text, 0, 129, 148));box-shadow:inset 0 0 0 2px rgb(var(--cat-primary-text, 0, 129, 148))}.flatpickr-day.today:hover,.flatpickr-day.today:focus{background-color:#f2f4f7;color:rgb(var(--cat-primary-text, 0, 129, 148))}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.notAllowed.nextMonthDay{color:rgba(var(--cat-font-color-muted, 81, 92, 108), 0.5)}.flatpickr-day.selected,.flatpickr-day.selected:hover,.flatpickr-day.selected:focus,.flatpickr-day.selected.inRange,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.startRange,.flatpickr-day.startRange:hover,.flatpickr-day.startRange:focus,.flatpickr-day.startRange.inRange,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.endRange,.flatpickr-day.endRange:hover,.flatpickr-day.endRange:focus,.flatpickr-day.endRange.inRange,.flatpickr-day.endRange.nextMonthDay,.flatpickr-day.endRange.prevMonthDay{font-weight:700;background-color:rgb(var(--cat-primary-bg, 0, 129, 148)) !important;color:rgb(var(--cat-primary-fill, 255, 255, 255)) !important}.flatpickr-day.inRange,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.today.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day:hover,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover,.flatpickr-day:focus,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.nextMonthDay:focus{background-color:rgba(var(--cat-primary-bg, 0, 129, 148), 0.1)}.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange,.flatpickr-day.endRange.startRange{border-top-left-radius:var(--cat-border-radius-m, 0.25rem);border-bottom-left-radius:var(--cat-border-radius-m, 0.25rem)}.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange,.flatpickr-day.endRange.endRange{border-top-right-radius:var(--cat-border-radius-m, 0.25rem);border-bottom-right-radius:var(--cat-border-radius-m, 0.25rem)}.numInputWrapper{padding:0 1rem 0 0.5rem;border-radius:var(--cat-border-radius-m, 0.25rem)}.numInputWrapper:hover,.numInputWrapper:focus-within{background-color:rgba(var(--cat-primary-bg, 0, 129, 148), 0.05)}.numInputWrapper span{border:none;background:transparent;width:1rem;padding:0;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.numInputWrapper span.arrowUp::after{content:\"↑\";align-items:flex-end}.numInputWrapper span.arrowDown::after{content:\"↓\";align-items:flex-start}.numInputWrapper span::after{font-size:0.75rem;line-height:1rem;font-weight:700;position:static;border:0 !important;font-size:10px;display:flex;height:100%;justify-content:center}.numInputWrapper span:hover{color:rgb(var(--cat-font-color-body, 0, 0, 0));background:transparent}.flatpickr-calendar.hasTime .flatpickr-time{border:1px solid rgb(var(--cat-border-color, 235, 236, 240));border-radius:var(--cat-border-radius-m, 0.25rem);min-width:12rem;height:auto}.flatpickr-calendar.hasTime .flatpickr-time .numInputWrapper{height:2rem;padding:0;margin:0.25rem;display:flex}.flatpickr-calendar.hasTime.noCalendar{padding:0}.flatpickr-calendar.hasTime.noCalendar .flatpickr-time{border:none}.flatpickr-time .flatpickr-time-separator,.flatpickr-time .flatpickr-am-pm{margin:0 0.25rem;font-family:var(--cat-font-family-head, \"Lato\"), system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, var(--cat-font-family-emoji, \"\"), \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";font-size:1.125rem;line-height:1.5rem;color:rgb(var(--cat-font-color-head, 0, 0, 0));font-weight:400;font-feature-settings:\"pnum\";color:rgb(var(--cat-font-color-body, 0, 0, 0));line-height:2.25rem}.flatpickr-time .flatpickr-am-pm{width:25%;padding:0 0.5rem}.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time .flatpickr-am-pm:focus{border-radius:var(--cat-border-radius-m, 0.25rem);background-color:rgba(var(--cat-primary-bg, 0, 129, 148), 0.05)}.flatpickr-time{max-height:unset}.flatpickr-time input{background:transparent !important;color:rgb(var(--cat-font-color-body, 0, 0, 0));font-size:0.9375rem;line-height:2.25rem;font-family:inherit}.flatpickr-time input.flatpickr-hour{font-weight:inherit}.flatpickr-day.inRange:not(.today),.flatpickr-day.week.selected{box-shadow:none}.flatpickr-day.inRange:nth-child(7n+1),.flatpickr-day.week.selected:nth-child(7n+1){border-top-left-radius:var(--cat-border-radius-m, 0.25rem);border-bottom-left-radius:var(--cat-border-radius-m, 0.25rem)}.flatpickr-day.inRange:nth-child(7n+7),.flatpickr-day.week.selected:nth-child(7n+7){border-top-right-radius:var(--cat-border-radius-m, 0.25rem);border-bottom-right-radius:var(--cat-border-radius-m, 0.25rem)}.flatpickr-day.selected.startRange+.endRange:not(:nth-child(7n+1)),.flatpickr-day.startRange.startRange+.endRange:not(:nth-child(7n+1)),.flatpickr-day.endRange.startRange+.endRange:not(:nth-child(7n+1)){box-shadow:none}.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange,.flatpickr-day.endRange.startRange.endRange{border-radius:var(--cat-border-radius-m, 0.25rem)}:host{display:inline-flex;margin-bottom:1rem}:host>div{display:flex}:host([hidden]){display:none}.datepicker-disabled .flatpickr-days,.datepicker-disabled .flatpickr-time,.datepicker-readonly .flatpickr-days,.datepicker-readonly .flatpickr-time{pointer-events:none}.datepicker-disabled .flatpickr-days{opacity:0.75}.datepicker-disabled .flatpickr-time input,.datepicker-disabled .flatpickr-time .flatpickr-time-separator,.datepicker-disabled .flatpickr-time .flatpickr-am-pm{color:rgb(var(--cat-font-color-muted, 81, 92, 108));opacity:0.75}input{display:none}.flatpickr-calendar{box-shadow:unset;background:unset}";
 
 const CatDatepickerInline$1 = /*@__PURE__*/ proxyCustomElement(class CatDatepickerInline extends HTMLElement {
   constructor() {

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;;;;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}
+{"file":"cat-datepicker-inline.js","mappings":";;;;AAAA,MAAM,sBAAsB,GAAG,mlyBAAmlyB;;MCarmyBA,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

@@ -82,6 +82,15 @@ const CatDatepickerFlat = /*@__PURE__*/ proxyCustomElement(class CatDatepickerFl
   componentDidLoad() {
     this.pickr = this.initDatepicker(this.input);
   }
+  onMinChanged() {
+    this.pickr?.set('minDate', this.min);
+    this.pickr?.set('maxDate', this.max);
+    if (this.value && !this.pickr?.selectedDates?.length) {
+      // Dynamically changing 'minDate' or 'maxDate' does not emit a change if
+      // the value is cleared due to an invalid date.
+      this.pickr?.clear();
+    }
+  }
   /**
    * Programmatically move focus to the datepicker. Use this method instead of
    * `input.focus()`.
@@ -134,7 +143,9 @@ const CatDatepickerFlat = /*@__PURE__*/ proxyCustomElement(class CatDatepickerFl
   static get watchers() { return {
     "value": ["onValueChanged"],
     "disabled": ["onDisabledChanged"],
-    "readonly": ["onDisabledChanged"]
+    "readonly": ["onDisabledChanged"],
+    "min": ["onMinChanged"],
+    "max": ["onMinChanged"]
   }; }
   static get style() { return catDatepickerCss; }
 }, [1, "cat-datepicker", {

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

@@ -1 +1 @@
-{"file":"cat-datepicker.js","mappings":"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","names":["i18n"],"sources":["src/utils/find-closest.ts","src/components/cat-datepicker/cat-datepicker.scss?tag=cat-datepicker&encapsulation=shadow","src/components/cat-datepicker/cat-datepicker.tsx"],"sourcesContent":["/**\n * Find the closest parent element matching the given selector while traversing\n * up the DOM tree (including Shadow DOM).\n */\nexport function findClosest(selector: string, element: Element | ShadowRoot): Element | null {\n  if (element instanceof Element && element.matches(selector)) {\n    return element;\n  }\n\n  // Search in parent element or Shadow DOM host\n  const nextElement =\n    element instanceof ShadowRoot ? element.host : element.parentElement || (element.getRootNode() as ShadowRoot).host;\n  return nextElement ? findClosest(selector, nextElement) : null;\n}\n","@use 'variables' as *;\n@use 'mixins' as *;\n\n:host {\n  display: flex;\n  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      if (this.mode !== 'daterange' || value.includes(' - ')) {\n        this.catChange.emit(value);\n      }\n    } else {\n      this.pickr?.clear(false);\n      this.catChange.emit(undefined);\n    }\n  }\n\n  @Watch('disabled')\n  @Watch('readonly')\n  onDisabledChanged() {\n    // Dynamically changing 'disabled' value is not working due to a bug in the\n    // library. We thus need to fully recreate the date picker after the value\n    // has been updated.\n    this.pickr?.destroy();\n    this.pickr = undefined;\n    setTimeout(() => (this.pickr = this.initDatepicker(this.input)));\n  }\n\n  componentDidLoad() {\n    this.pickr = this.initDatepicker(this.input);\n  }\n\n  /**\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}
+{"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      if (this.mode !== 'daterange' || value.includes(' - ')) {\n        this.catChange.emit(value);\n      }\n    } else {\n      this.pickr?.clear(false);\n      this.catChange.emit(undefined);\n    }\n  }\n\n  @Watch('disabled')\n  @Watch('readonly')\n  onDisabledChanged() {\n    // Dynamically changing 'disabled' value is not working due to a bug in the\n    // library. We thus need to fully recreate the date picker after the value\n    // has been updated.\n    this.pickr?.destroy();\n    this.pickr = undefined;\n    setTimeout(() => (this.pickr = this.initDatepicker(this.input)));\n  }\n\n  componentDidLoad() {\n    this.pickr = this.initDatepicker(this.input);\n  }\n\n  @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      ></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}