@haiilo/catalyst 6.4.6 → 6.5.0

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  @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}
+{"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}

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

@@ -2657,6 +2657,7 @@ function getConfig(options, more = {}) {
     ...more,
     locale: options.locale,
     plugins,
+    allowInput: true,
     altInput: true,
     prevArrow: '←',
     nextArrow: '→',
@@ -2717,7 +2718,7 @@ function dateFormat(mode) {
 }
 
 function getFormat(language, mode) {
-  const date = new Date(2000, 1, 3, 4, 5, 6);
+  const date = new Date(2000, 1, 3, 16, 5, 6);
   const formatDate = { year: 'numeric', month: '2-digit', day: '2-digit' };
   const formatTime = { hour: '2-digit', minute: '2-digit' };
   return mode === 'week'
@@ -2733,7 +2734,8 @@ function getFormat(language, mode) {
       .replace('00', 'y')
       .replace('02', 'm')
       .replace('03', 'd')
-      .replace('04', 'H')
+      .replace('04', 'h')
+      .replace('16', 'H')
       .replace('05', 'i')
       .replace(/AM|PM/i, 'K');
 }