@nova-design-system/nova-webcomponents 3.11.0 → 3.12.0

package/dist/native/{p-ad2cc829.entry.js.map → p-bc01787b.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["nvFielddateCss","NvFielddateStyle0","NvFielddate","constructor","hostRef","this","popoverId","uuidv4","inputId","disabled","readonly","required","error","success","autofocus","value","singleValue","open","firstDayOfWeek","numberOfCalendars","min","max","locale","dateFormat","shortcutsPlacement","showActions","fluid","handleClickOutside","event","el","contains","target","handleInputContainerClick","preventDefault","stopPropagation","inputElement","focus","handleInput","input","valueChanged","emit","handleFocus","blur","handleCalendarValueChanged","setPopoverRef","popoverElement","setInputRef","toggleCalendar","convertToInputmaskFormat","format","formatMap","YYYYMMDD","clear","inputmask","remove","updateMask","_b","_a","call","inputMask","Inputmask","alias","inputFormat","placeholder","clearIncomplete","showMaskOnHover","showMaskOnFocus","clearMaskOnLostFocus","postValidation","oncomplete","e","mask","connectedCallback","document","addEventListener","componentWillLoad","componentDidLoad","name","requestAnimationFrame","CustomEvent","bubbles","dispatchEvent","componentDidRender","setAttribute","disconnectedCallback","removeEventListener","handleSingleDateChange","detail","previousValue","handleClosePopover","handleKeyDown","key","console","warn","handleValueChange","newValue","handleOpenChange","render","h","Host","label","length","querySelector","htmlFor","ref","id","triggerMode","placement","slot","class","onClick","readOnly","onInput","onFocus","size","emphasis","toString","tabIndex","shortcuts","showWeekNumbers","disabledDates","onValueChanged","description","errorDescription","hidden"],"sources":["src/components/nv-fielddate/styles/nv-fielddate.scss?tag=nv-fielddate","src/components/nv-fielddate/nv-fielddate.tsx"],"sourcesContent":["@import '../../../styles/form-field';\n\nnv-fielddate {\n  @include form-field-variables();\n  @include form-field-root();\n\n  &[fluid]:not([fluid=\"false\"]) {\n    @include form-field-fluid();\n  }\n\n  &[readonly]:not([readonly='false']) {\n    @include form-field-readonly-variables();\n  }\n\n  &[error]:not([error='false']) {\n    @include form-field-error-variables();\n  }\n\n  &[success]:not([success='false']) {\n    @include form-field-success-variables();\n  }\n\n  &[required]:not([required='false']) label {\n    @include form-field-label-required();\n  }\n\n  label {\n    @include form-field-label();\n  }\n\n  nv-popover {\n    width: 100%;\n    display: block;\n\n    [data-scope='popover'] {\n      padding: 0;\n      background-color: var(--components-list-dropdown-background);\n      border: 1px solid var(--components-list-dropdown-border);\n      width: auto;\n    }\n\n    [slot='content'] {\n      display: block;\n      width: 100%;\n    }\n    .datepicker-container {\n        border: none\n    }\n  }\n\n  .input-wrapper {\n    @include form-field-input-wrapper();\n    display: flex;\n    align-items: center;\n    gap: 8px;\n\n    .input-container {\n      @include form-field-input-container();\n\n      input {\n        @include form-field-input();\n        font-feature-settings: 'tnum';\n        font-family: \"TTNorms Pro Mono\", monospace;\n      }\n\n      > nv-iconbutton {\n        @include form-field-action();\n      }\n\n      nv-icon.validation {\n        @include form-field-icon();\n      }\n    }\n  }\n\n  .description {\n    @include form-field-description();\n  }\n\n  .error-description {\n    @include form-field-error-description();\n  }\n}\n","import {\n  Component,\n  h,\n  Prop,\n  State,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  Host,\n  Watch,\n  Method,\n} from '@stencil/core';\nimport Inputmask from 'inputmask';\nimport { v4 as uuidv4 } from 'uuid';\n\n/**\n * Extends HTMLInputElement to include the inputmask property.\n */\ninterface HTMLInputElementWithInputmask extends HTMLInputElement {\n  /**\n   * The inputmask instance that provides masking functionality.\n   */\n  inputmask?: {\n    /**\n     * Removes the inputmask instance.\n     */\n    remove?: () => void;\n  };\n}\n\n/**\n * A field date component that combines an input with a calendar popover.\n *\n * @slot default - Child content of the component.\n * @slot leading-input - Content to be placed before the input text, within the input container.\n * @slot before-input - Content to be placed before the input text, outside the input container.\n * @slot after-input - Content to be placed after the input text, outside the input container.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n  tag: 'nv-fielddate',\n  styleUrl: 'styles/nv-fielddate.scss',\n  shadow: false,\n})\nexport class NvFielddate {\n  @Element() el: HTMLNvFielddateElement;\n  private inputElement!: HTMLInputElement;\n\n  private popoverElement!: HTMLNvPopoverElement;\n  private popoverId: string = uuidv4();\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the input element and the for attribute of the associated\n   * label. If no ID is provided, a random one will be automatically generated.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * Text displayed as label. A slot label can override this prop.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\n\n  /**\n   * Description displayed below the input. A slot description can override this prop.\n   */\n  @Prop({ reflect: true })\n  readonly description: string;\n\n  /**\n   * Placeholder for the input field.\n   */\n  @Prop({ reflect: true })\n  readonly placeholder: string;\n\n  /**\n   * Name attribute for the input.\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * Disables the input field.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Sets the input field as read-only.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks the input field as required.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Indicates an error state.\n   */\n  @Prop({ reflect: true })\n  readonly error: boolean = false;\n\n  /**\n   * Error description. A slot error-description can override this prop.\n   */\n  @Prop({ reflect: true })\n  readonly errorDescription?: string;\n\n  /**\n   * Indicates a success state.\n   */\n  @Prop({ reflect: true })\n  readonly success: boolean = false;\n\n  /**\n   * Autofocus the input when the component is mounted.\n   */\n  @Prop({ reflect: true })\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  readonly autofocus: boolean = false;\n\n  /**\n   * The initial value of the input (date in string format).\n   * @bind value\n   */\n  @Prop({ reflect: true, mutable: true })\n  value: string = '';\n\n  /**\n   * The current value of the input date in string format.\n   */\n  @State()\n  singleValue: string = '';\n\n  /**\n   * Controls the opening of the popover.\n   */\n  @State()\n  open: boolean = false;\n\n  /**\n   * First day of the week 0 = Sunday, 1 = Monday, etc.\n   * @default 1\n   */\n  @Prop({ reflect: true })\n  readonly firstDayOfWeek: number = 1;\n\n  /**\n   * Number of calendars to display\n   * @default 1\n   */\n  @Prop({ reflect: true })\n  readonly numberOfCalendars: number = 1;\n\n  /**\n   * Minimum date for selection ISO string format, ex: 2025-01-01\n   */\n  @Prop({ reflect: true })\n  readonly min?: string = '';\n\n  /**\n   * Maximum date for selection ISO string format, ex: 2025-12-31\n   */\n  @Prop({ reflect: true })\n  readonly max?: string = '';\n\n  /** Locale for date formatting\n   * @default 'en-BE'\n   */\n  @Prop({ reflect: true })\n  readonly locale: string = 'en-BE';\n\n  /** Date format ex: YYYY-MM-DD, DD-MM-YYYY, etc.\n   * @default 'YYYY-MM-DD'\n   * @note If the date format is in UTC mode, the date will be displayed in UTC time.\n   * @note If the date format is not in UTC mode, the date will be displayed in the local time.\n   */\n  @Prop({ reflect: true })\n  readonly dateFormat: string = 'YYYY-MM-DD';\n\n  /**\n   * Footer placement\n   * @default 'bottom'\n   */\n  @Prop({ reflect: true })\n  readonly shortcutsPlacement: 'bottom' | 'left' | 'right' = 'bottom';\n\n  /**\n   * Show action buttons\n   * @default false\n   */\n  @Prop({ reflect: true })\n  readonly showActions: boolean = false;\n\n  /**\n   * Custom actions to display in the footer\n   */\n  @Prop({ reflect: true })\n  readonly shortcuts: HTMLNvCalendarElement['shortcuts'];\n\n  /**\n   * Show week numbers\n   * @default true\n   */\n  @Prop({ reflect: true })\n  readonly showWeekNumbers: boolean;\n\n  /**\n   * Disabled dates ISO string array\n   */\n  @Prop({ reflect: true })\n  readonly disabledDates: Array<string>;\n\n  /**\n   * Allows the field to stretch and fill the entire width of its container.\n   */\n  @Prop({ reflect: true })\n  readonly fluid: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Converts the nv-calendar date format to the format expected by Inputmask.\n   * @param {string} format - The date format.\n   * @returns {string} Format adapted for Inputmask.\n   */\n  private convertToInputmaskFormat(format: string): string {\n    // If the format is not specified, use the default format\n    if (!format) {\n      return 'dd/mm/yyyy';\n    }\n\n    const formatMap = {\n      'DD/MM/YYYY': 'dd/mm/yyyy',\n      'MM/DD/YYYY': 'mm/dd/yyyy',\n      'YYYY-MM-DD': 'yyyy-mm-dd',\n      'DD.MM.YYYY': 'dd.mm.yyyy',\n      'YYYYMMDD': 'yyyymmdd',\n    };\n\n    return formatMap[format] || 'dd/mm/yyyy';\n  }\n\n  /**\n   * Closes the popover when a click is detected outside the component.\n   * @param {MouseEvent} event - The click event.\n   */\n  private handleClickOutside = (event: MouseEvent) => {\n    if (this.open && this.el && !this.el.contains(event.target as Node)) {\n      this.open = false;\n    }\n  };\n\n  /**\n   * Focuses the input when the input container is clicked.\n   * @param {MouseEvent} event - The click event.\n   */\n  private handleInputContainerClick = (event: MouseEvent) => {\n    if (this.readonly || this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    this.inputElement.focus();\n  };\n\n  /**\n   * Handles the input event on the input element.\n   * Updates the singleValue and emits the valueChanged event if empty.\n   * @param {Event} event - The input event.\n   */\n  private handleInput = (event: Event) => {\n    if (this.readonly || this.disabled) {\n      event.preventDefault();\n      return;\n    }\n    const input = event.target as HTMLInputElement;\n    this.singleValue = input.value;\n    this.value = input.value;\n\n    if (this.value === '') {\n      this.valueChanged.emit('');\n    }\n  };\n\n  /**\n   * Handles focus events on the input element.\n   * @param {FocusEvent} event - The focus event.\n   */\n  private handleFocus = (event: FocusEvent) => {\n    if (this.readonly || this.disabled) {\n      event.preventDefault();\n      (event.target as HTMLElement).blur();\n      return;\n    }\n\n    this.open = true;\n  };\n\n  /**\n   * Prevents the valueChanged event from the calendar from propagating up.\n   * @param {CustomEvent} event - The valueChanged event from nv-calendar.\n   */\n  private handleCalendarValueChanged = (event: CustomEvent) => {\n    event.stopPropagation();\n  };\n\n  /**\n   * Sets the reference to the popover element.\n   * @param {HTMLNvPopoverElement} el - The popover element.\n   */\n  private setPopoverRef = (el: HTMLNvPopoverElement) => {\n    this.popoverElement = el;\n  };\n\n  /**\n   * Sets the reference to the input element.\n   * @param {HTMLInputElement} el - The input element.\n   */\n  private setInputRef = (el: HTMLInputElement) => {\n    this.inputElement = el;\n  };\n\n  /**\n   * Toggles the opening/closing of the popover.\n   */\n  private toggleCalendar = () => {\n    if (this.readonly || this.disabled) {\n      return;\n    }\n    this.open = !this.open;\n  };\n\n  /**\n   * Clears the current selection and resets the field to its initial state.\n   * This method can be called programmatically to reset the field.\n   */\n  @Method()\n  async clear(): Promise<void> {\n    // Reset internal state\n    this.singleValue = '';\n    this.value = '';\n\n    // Reset the input element value\n    if (this.inputElement) {\n      this.inputElement.value = '';\n      // Remove the input mask and reinitialize if needed\n      if ((this.inputElement as HTMLInputElementWithInputmask).inputmask) {\n        (this.inputElement as HTMLInputElementWithInputmask).inputmask.remove();\n      }\n    }\n\n    // Emit events to notify about the change\n    this.valueChanged.emit('');\n\n    // Close the popover if open\n    this.open = false;\n  }\n\n  private updateMask() {\n    if (!this.inputElement) return;\n    (this.inputElement as HTMLInputElementWithInputmask).inputmask?.remove?.();\n\n    const inputMask = new Inputmask({\n      alias: 'datetime',\n      inputFormat: this.convertToInputmaskFormat(this.dateFormat),\n      placeholder: this.convertToInputmaskFormat(this.dateFormat),\n      clearIncomplete: false,\n      showMaskOnHover: false,\n      showMaskOnFocus: true,\n      clearMaskOnLostFocus: !this.open,\n      postValidation: true,\n      oncomplete: (e: CustomEvent) => {\n        this.valueChanged.emit((e.target as HTMLInputElement)?.value);\n      },\n    });\n    inputMask.mask(this.inputElement);\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  connectedCallback() {\n    document.addEventListener('click', this.handleClickOutside);\n  }\n\n  componentWillLoad() {\n    if (this.value) {\n      this.singleValue = this.value;\n    }\n  }\n\n  componentDidLoad() {\n    this.updateMask();\n\n    // Set the initial value after applying the mask\n    if (this.inputElement.name === this.name && this.singleValue) {\n      requestAnimationFrame(() => {\n        this.inputElement.value = this.singleValue;\n        const event = new CustomEvent('input', { bubbles: true });\n        this.inputElement.dispatchEvent(event);\n      });\n    }\n  }\n\n  componentDidRender() {\n    // Only set value on initial render when there's no existing value in the input\n    if (this.singleValue && this.inputElement && !this.inputElement.value) {\n      requestAnimationFrame(() => {\n        this.inputElement.value = this.singleValue;\n        this.inputElement.setAttribute('value', this.singleValue);\n      });\n    }\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('click', this.handleClickOutside);\n    if (\n      this.inputElement &&\n      (this.inputElement as HTMLInputElementWithInputmask).inputmask\n    ) {\n      (this.inputElement as HTMLInputElementWithInputmask).inputmask.remove();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the value changes (unified value binding).\n   * @bind value\n   */\n  @Event()\n  valueChanged: EventEmitter<string>;\n\n  /**\n   * Handles the single date selection event from nv-calendar.\n   * Updates the input value and closes the popover.\n   * @param {CustomEvent} event - The event from nv-calendar.\n   */\n  @Listen('singleDateChange')\n  handleSingleDateChange(event: CustomEvent) {\n    const value: string = event.detail;\n    const previousValue = this.value;\n    this.singleValue = value;\n    this.value = value;\n\n    // Set the input value directly when calendar is used\n    if (this.inputElement) {\n      this.inputElement.value = value;\n    }\n\n    // Only emit valueChanged if the value actually changed\n    if (previousValue !== value) {\n      this.valueChanged.emit(value);\n    }\n    if (!this.showActions) {\n      this.open = false;\n    }\n  }\n\n  @Listen('closePopover')\n  handleClosePopover() {\n    this.open = false;\n  }\n\n  @Listen('keydown', { passive: false })\n  handleKeyDown(event: KeyboardEvent) {\n    if (!this.open) {\n      if (event.key === 'ArrowDown') {\n        this.open = true;\n\n        event.preventDefault();\n        return;\n      }\n      return;\n    }\n\n    // Verify if the popover element is defined\n    if (!this.popoverElement) {\n      console.warn('nv-fielddate -> Popover element is not defined');\n      return;\n    }\n  }\n\n  @Watch('value')\n  handleValueChange(newValue: string) {\n    this.singleValue = newValue;\n    // Only set input value if it's different from current input value\n    // This prevents interfering with user typing\n    if (this.inputElement && this.inputElement.value !== newValue) {\n      this.inputElement.value = newValue;\n    }\n  }\n\n  @Watch('open')\n  handleOpenChange() {\n    this.updateMask();\n  }\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region RENDER\n  render() {\n    return (\n      <Host>\n        {((this.label && this.label.length > 0) ||\n          this.el.querySelector('[slot=\"label\"]')) && (\n          <label htmlFor={this.inputId}>\n            <slot name=\"label\">{this.label}</slot>\n          </label>\n        )}\n\n        <nv-popover\n          ref={this.setPopoverRef}\n          id={this.popoverId}\n          triggerMode=\"controlled\"\n          placement=\"bottom-start\"\n          open={this.open}\n        >\n          <div slot=\"trigger\" class=\"input-wrapper\">\n            <slot name=\"before-input\"></slot>\n\n            <div\n              class=\"input-container\"\n              onClick={this.handleInputContainerClick}\n            >\n              <slot name=\"leading-input\"></slot>\n\n              <input\n                id={this.inputId}\n                ref={this.setInputRef}\n                placeholder={\n                  this.placeholder ||\n                  this.convertToInputmaskFormat(this.dateFormat)\n                }\n                name={this.name}\n                disabled={this.disabled}\n                readOnly={this.readonly}\n                required={this.required}\n                autofocus={this.autofocus}\n                onInput={this.handleInput}\n                onFocus={this.handleFocus}\n                data-scope=\"date\"\n              />\n\n              {this.error && (\n                <nv-icon name=\"alert-circle\" class=\"validation\" size=\"md\" />\n              )}\n              {this.success && (\n                <nv-icon name=\"circle-check\" class=\"validation\" size=\"md\" />\n              )}\n\n              <nv-iconbutton\n                class=\"toggle-calendar-icon\"\n                name=\"calendar\" //{this.open ? 'chevron-top' : 'chevron-down'}\n                size=\"md\"\n                emphasis=\"lower\"\n                aria-label={this.open ? 'Hide calendar' : 'Show calendar'}\n                aria-pressed={this.open.toString()}\n                onClick={this.toggleCalendar}\n                tabIndex={this.disabled ? -1 : 0}\n              />\n            </div>\n\n            <slot name=\"after-input\"></slot>\n          </div>\n\n          <div slot=\"content\">\n            <nv-calendar\n              dateFormat={this.dateFormat}\n              singleValue={this.singleValue}\n              firstDayOfWeek={this.firstDayOfWeek}\n              numberOfCalendars={this.numberOfCalendars}\n              min={this.min}\n              max={this.max}\n              locale={this.locale}\n              shortcutsPlacement={this.shortcutsPlacement}\n              showActions={this.showActions}\n              shortcuts={this.shortcuts}\n              showWeekNumbers={this.showWeekNumbers}\n              disabledDates={this.disabledDates}\n              onValueChanged={this.handleCalendarValueChanged}\n            ></nv-calendar>\n          </div>\n        </nv-popover>\n\n        {((this.description && this.description.length > 0) ||\n          this.el.querySelector('[slot=\"description\"]')) && (\n          <div class=\"description\">\n            <slot name=\"description\">{this.description}</slot>\n          </div>\n        )}\n\n        {(this.errorDescription ||\n          this.el.querySelector('[slot=\"error-description\"]')) && (\n          <div hidden={!this.error} class=\"error-description\">\n            {this.el.querySelector('[slot=\"error-description\"]') ? (\n              <slot name=\"error-description\"></slot>\n            ) : (\n              this.errorDescription\n            )}\n          </div>\n        )}\n\n        <slot></slot>\n      </Host>\n    );\n  }\n  //#endregion RENDER\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["nvFielddateCss","NvFielddateStyle0","NvFielddate","constructor","hostRef","this","popoverId","uuidv4","inputId","disabled","readonly","required","error","success","autofocus","value","singleValue","open","firstDayOfWeek","numberOfCalendars","min","max","locale","dateFormat","shortcutsPlacement","showActions","fluid","handleClickOutside","event","el","contains","target","handleInputContainerClick","preventDefault","stopPropagation","inputElement","focus","handleInput","input","valueChanged","emit","handleFocus","blur","handleCalendarValueChanged","setPopoverRef","popoverElement","setInputRef","toggleCalendar","convertToInputmaskFormat","format","formatMap","YYYYMMDD","clear","inputmask","remove","updateMask","_b","_a","call","inputMask","Inputmask","alias","inputFormat","placeholder","clearIncomplete","showMaskOnHover","showMaskOnFocus","clearMaskOnLostFocus","postValidation","oncomplete","e","mask","connectedCallback","document","addEventListener","componentWillLoad","componentDidLoad","name","requestAnimationFrame","CustomEvent","bubbles","dispatchEvent","componentDidRender","setAttribute","disconnectedCallback","removeEventListener","handleSingleDateChange","detail","previousValue","handleClosePopover","handleKeyDown","key","console","warn","handleValueChange","newValue","handleOpenChange","render","h","Host","label","length","querySelector","htmlFor","ref","id","triggerMode","placement","slot","class","onClick","readOnly","onInput","onFocus","size","emphasis","toString","tabIndex","shortcuts","showWeekNumbers","disabledDates","onValueChanged","description","errorDescription","hidden"],"sources":["src/components/nv-fielddate/styles/nv-fielddate.scss?tag=nv-fielddate","src/components/nv-fielddate/nv-fielddate.tsx"],"sourcesContent":["@import '../../../styles/form-field';\n\nnv-fielddate {\n  @include form-field-variables();\n  @include form-field-root();\n\n  &[fluid]:not([fluid=\"false\"]) {\n    @include form-field-fluid();\n  }\n\n  &[readonly]:not([readonly='false']) {\n    @include form-field-readonly-variables();\n  }\n\n  &[error]:not([error='false']) {\n    @include form-field-error-variables();\n  }\n\n  &[success]:not([success='false']) {\n    @include form-field-success-variables();\n  }\n\n  &[required]:not([required='false']) label {\n    @include form-field-label-required();\n  }\n\n  label {\n    @include form-field-label();\n  }\n\n  nv-popover {\n    width: 100%;\n    display: block;\n\n    [data-scope='popover'] {\n      padding: 0;\n      background-color: var(--components-list-dropdown-background);\n      border: 1px solid var(--components-list-dropdown-border);\n      width: auto;\n    }\n\n    [slot='content'] {\n      display: block;\n      width: 100%;\n    }\n    .datepicker-container {\n        border: none\n    }\n  }\n\n  .input-wrapper {\n    @include form-field-input-wrapper();\n    display: flex;\n    align-items: center;\n    gap: 8px;\n\n    .input-container {\n      @include form-field-input-container();\n\n      input {\n        @include form-field-input();\n        font-feature-settings: 'tnum';\n        font-family: \"TTNorms Pro Mono\", monospace;\n      }\n\n      > nv-iconbutton {\n        @include form-field-action();\n      }\n\n      nv-icon.validation {\n        @include form-field-icon();\n      }\n    }\n  }\n\n  .description {\n    @include form-field-description();\n  }\n\n  .error-description {\n    @include form-field-error-description();\n  }\n}\n","import {\n  Component,\n  h,\n  Prop,\n  State,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  Host,\n  Watch,\n  Method,\n} from '@stencil/core';\nimport Inputmask from 'inputmask';\nimport { v4 as uuidv4 } from 'uuid';\n\n/**\n * Extends HTMLInputElement to include the inputmask property.\n */\ninterface HTMLInputElementWithInputmask extends HTMLInputElement {\n  /**\n   * The inputmask instance that provides masking functionality.\n   */\n  inputmask?: {\n    /**\n     * Removes the inputmask instance.\n     */\n    remove?: () => void;\n  };\n}\n\n/**\n * A field date component that combines an input with a calendar popover.\n *\n * @slot default - Child content of the component.\n * @slot leading-input - Content to be placed before the input text, within the input container.\n * @slot before-input - Content to be placed before the input text, outside the input container.\n * @slot after-input - Content to be placed after the input text, outside the input container.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n  tag: 'nv-fielddate',\n  styleUrl: 'styles/nv-fielddate.scss',\n  shadow: false,\n})\nexport class NvFielddate {\n  @Element() el: HTMLNvFielddateElement;\n  private inputElement!: HTMLInputElement;\n\n  private popoverElement!: HTMLNvPopoverElement;\n  private popoverId: string = uuidv4();\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the input element and the for attribute of the associated\n   * label. If no ID is provided, a random one will be automatically generated.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * Text displayed as label. A slot label can override this prop.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\n\n  /**\n   * Description displayed below the input. A slot description can override this prop.\n   */\n  @Prop({ reflect: true })\n  readonly description: string;\n\n  /**\n   * Placeholder for the input field.\n   */\n  @Prop({ reflect: true })\n  readonly placeholder: string;\n\n  /**\n   * Name attribute for the input.\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * Disables the input field.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Sets the input field as read-only.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks the input field as required.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Indicates an error state.\n   */\n  @Prop({ reflect: true })\n  readonly error: boolean = false;\n\n  /**\n   * Error description. A slot error-description can override this prop.\n   */\n  @Prop({ reflect: true })\n  readonly errorDescription?: string;\n\n  /**\n   * Indicates a success state.\n   */\n  @Prop({ reflect: true })\n  readonly success: boolean = false;\n\n  /**\n   * Autofocus the input when the component is mounted.\n   */\n  @Prop({ reflect: true })\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  readonly autofocus: boolean = false;\n\n  /**\n   * The initial value of the input (date in string format).\n   * @bind value\n   */\n  @Prop({ reflect: true, mutable: true })\n  value: string = '';\n\n  /**\n   * The current value of the input date in string format.\n   */\n  @State()\n  singleValue: string = '';\n\n  /**\n   * Controls the opening of the popover.\n   */\n  @State()\n  open: boolean = false;\n\n  /**\n   * First day of the week 0 = Sunday, 1 = Monday, etc.\n   * @default 1\n   */\n  @Prop({ reflect: true })\n  readonly firstDayOfWeek: number = 1;\n\n  /**\n   * Number of calendars to display\n   * @default 1\n   */\n  @Prop({ reflect: true })\n  readonly numberOfCalendars: number = 1;\n\n  /**\n   * Minimum date for selection ISO string format, ex: 2025-01-01\n   */\n  @Prop({ reflect: true })\n  readonly min?: string = '';\n\n  /**\n   * Maximum date for selection ISO string format, ex: 2025-12-31\n   */\n  @Prop({ reflect: true })\n  readonly max?: string = '';\n\n  /** Locale for date formatting\n   * @default 'en-BE'\n   */\n  @Prop({ reflect: true })\n  readonly locale: string = 'en-BE';\n\n  /** Date format ex: YYYY-MM-DD, DD-MM-YYYY, etc.\n   * @default 'YYYY-MM-DD'\n   * @note If the date format is in UTC mode, the date will be displayed in UTC time.\n   * @note If the date format is not in UTC mode, the date will be displayed in the local time.\n   */\n  @Prop({ reflect: true })\n  readonly dateFormat: string = 'YYYY-MM-DD';\n\n  /**\n   * Footer placement\n   * @default 'bottom'\n   */\n  @Prop({ reflect: true })\n  readonly shortcutsPlacement: 'bottom' | 'left' | 'right' = 'bottom';\n\n  /**\n   * Show action buttons\n   * @default false\n   */\n  @Prop({ reflect: true })\n  readonly showActions: boolean = false;\n\n  /**\n   * Custom actions to display in the footer\n   */\n  @Prop({ reflect: true })\n  readonly shortcuts: HTMLNvCalendarElement['shortcuts'];\n\n  /**\n   * Show week numbers\n   * @default true\n   */\n  @Prop({ reflect: true })\n  readonly showWeekNumbers: boolean;\n\n  /**\n   * Disabled dates ISO string array\n   */\n  @Prop({ reflect: true })\n  readonly disabledDates: Array<string>;\n\n  /**\n   * Allows the field to stretch and fill the entire width of its container.\n   */\n  @Prop({ reflect: true })\n  readonly fluid: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Converts the nv-calendar date format to the format expected by Inputmask.\n   * @param {string} format - The date format.\n   * @returns {string} Format adapted for Inputmask.\n   */\n  private convertToInputmaskFormat(format: string): string {\n    // If the format is not specified, use the default format\n    if (!format) {\n      return 'dd/mm/yyyy';\n    }\n\n    const formatMap = {\n      'DD/MM/YYYY': 'dd/mm/yyyy',\n      'MM/DD/YYYY': 'mm/dd/yyyy',\n      'YYYY-MM-DD': 'yyyy-mm-dd',\n      'DD.MM.YYYY': 'dd.mm.yyyy',\n      'YYYYMMDD': 'yyyymmdd',\n    };\n\n    return formatMap[format] || 'dd/mm/yyyy';\n  }\n\n  /**\n   * Closes the popover when a click is detected outside the component.\n   * @param {MouseEvent} event - The click event.\n   */\n  private handleClickOutside = (event: MouseEvent) => {\n    if (this.open && this.el && !this.el.contains(event.target as Node)) {\n      this.open = false;\n    }\n  };\n\n  /**\n   * Focuses the input when the input container is clicked.\n   * @param {MouseEvent} event - The click event.\n   */\n  private handleInputContainerClick = (event: MouseEvent) => {\n    if (this.readonly || this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    this.inputElement.focus();\n  };\n\n  /**\n   * Handles the input event on the input element.\n   * Updates the singleValue and emits the valueChanged event if empty.\n   * @param {Event} event - The input event.\n   */\n  private handleInput = (event: Event) => {\n    if (this.readonly || this.disabled) {\n      event.preventDefault();\n      return;\n    }\n    const input = event.target as HTMLInputElement;\n    this.singleValue = input.value;\n    this.value = input.value;\n\n    if (this.value === '') {\n      this.valueChanged.emit('');\n    }\n  };\n\n  /**\n   * Handles focus events on the input element.\n   * @param {FocusEvent} event - The focus event.\n   */\n  private handleFocus = (event: FocusEvent) => {\n    if (this.readonly || this.disabled) {\n      event.preventDefault();\n      (event.target as HTMLElement).blur();\n      return;\n    }\n\n    this.open = true;\n  };\n\n  /**\n   * Prevents the valueChanged event from the calendar from propagating up.\n   * @param {CustomEvent} event - The valueChanged event from nv-calendar.\n   */\n  private handleCalendarValueChanged = (event: CustomEvent) => {\n    event.stopPropagation();\n  };\n\n  /**\n   * Sets the reference to the popover element.\n   * @param {HTMLNvPopoverElement} el - The popover element.\n   */\n  private setPopoverRef = (el: HTMLNvPopoverElement) => {\n    this.popoverElement = el;\n  };\n\n  /**\n   * Sets the reference to the input element.\n   * @param {HTMLInputElement} el - The input element.\n   */\n  private setInputRef = (el: HTMLInputElement) => {\n    this.inputElement = el;\n  };\n\n  /**\n   * Toggles the opening/closing of the popover.\n   */\n  private toggleCalendar = () => {\n    if (this.readonly || this.disabled) {\n      return;\n    }\n    this.open = !this.open;\n  };\n\n  /**\n   * Clears the current selection and resets the field to its initial state.\n   * This method can be called programmatically to reset the field.\n   */\n  @Method()\n  async clear(): Promise<void> {\n    // Reset internal state\n    this.singleValue = '';\n    this.value = '';\n\n    // Reset the input element value\n    if (this.inputElement) {\n      this.inputElement.value = '';\n      // Remove the input mask and reinitialize if needed\n      if ((this.inputElement as HTMLInputElementWithInputmask).inputmask) {\n        (this.inputElement as HTMLInputElementWithInputmask).inputmask.remove();\n      }\n    }\n\n    // Emit events to notify about the change\n    this.valueChanged.emit('');\n\n    // Close the popover if open\n    this.open = false;\n  }\n\n  private updateMask() {\n    if (!this.inputElement) return;\n    (this.inputElement as HTMLInputElementWithInputmask).inputmask?.remove?.();\n\n    const inputMask = new Inputmask({\n      alias: 'datetime',\n      inputFormat: this.convertToInputmaskFormat(this.dateFormat),\n      placeholder: this.convertToInputmaskFormat(this.dateFormat),\n      clearIncomplete: false,\n      showMaskOnHover: false,\n      showMaskOnFocus: true,\n      clearMaskOnLostFocus: !this.open,\n      postValidation: true,\n      oncomplete: (e: CustomEvent) => {\n        this.valueChanged.emit((e.target as HTMLInputElement)?.value);\n      },\n    });\n    inputMask.mask(this.inputElement);\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  connectedCallback() {\n    document.addEventListener('click', this.handleClickOutside);\n  }\n\n  componentWillLoad() {\n    if (this.value) {\n      this.singleValue = this.value;\n    }\n  }\n\n  componentDidLoad() {\n    this.updateMask();\n\n    // Set the initial value after applying the mask\n    if (this.inputElement.name === this.name && this.singleValue) {\n      requestAnimationFrame(() => {\n        this.inputElement.value = this.singleValue;\n        const event = new CustomEvent('input', { bubbles: true });\n        this.inputElement.dispatchEvent(event);\n      });\n    }\n  }\n\n  componentDidRender() {\n    // Only set value on initial render when there's no existing value in the input\n    if (this.singleValue && this.inputElement && !this.inputElement.value) {\n      requestAnimationFrame(() => {\n        this.inputElement.value = this.singleValue;\n        this.inputElement.setAttribute('value', this.singleValue);\n      });\n    }\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('click', this.handleClickOutside);\n    if (\n      this.inputElement &&\n      (this.inputElement as HTMLInputElementWithInputmask).inputmask\n    ) {\n      (this.inputElement as HTMLInputElementWithInputmask).inputmask.remove();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the value changes (unified value binding).\n   * @bind value\n   */\n  @Event()\n  valueChanged: EventEmitter<string>;\n\n  /**\n   * Handles the single date selection event from nv-calendar.\n   * Updates the input value and closes the popover.\n   * @param {CustomEvent} event - The event from nv-calendar.\n   */\n  @Listen('singleDateChange')\n  handleSingleDateChange(event: CustomEvent) {\n    const value: string = event.detail;\n    const previousValue = this.value;\n    this.singleValue = value;\n    this.value = value;\n\n    // Set the input value directly when calendar is used\n    if (this.inputElement) {\n      this.inputElement.value = value;\n    }\n\n    // Only emit valueChanged if the value actually changed\n    if (previousValue !== value) {\n      this.valueChanged.emit(value);\n    }\n    if (!this.showActions) {\n      this.open = false;\n    }\n  }\n\n  @Listen('closePopover')\n  handleClosePopover() {\n    this.open = false;\n  }\n\n  @Listen('keydown', { passive: false })\n  handleKeyDown(event: KeyboardEvent) {\n    if (!this.open) {\n      if (event.key === 'ArrowDown') {\n        this.open = true;\n\n        event.preventDefault();\n        return;\n      }\n      return;\n    }\n\n    // Verify if the popover element is defined\n    if (!this.popoverElement) {\n      console.warn('nv-fielddate -> Popover element is not defined');\n      return;\n    }\n  }\n\n  @Watch('value')\n  handleValueChange(newValue: string) {\n    this.singleValue = newValue;\n    // Only set input value if it's different from current input value\n    // This prevents interfering with user typing\n    if (this.inputElement && this.inputElement.value !== newValue) {\n      this.inputElement.value = newValue;\n    }\n  }\n\n  @Watch('open')\n  handleOpenChange() {\n    this.updateMask();\n  }\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region RENDER\n  render() {\n    return (\n      <Host>\n        {((this.label && this.label.length > 0) ||\n          this.el.querySelector('[slot=\"label\"]')) && (\n          <label htmlFor={this.inputId}>\n            <slot name=\"label\">{this.label}</slot>\n          </label>\n        )}\n\n        <nv-popover\n          ref={this.setPopoverRef}\n          id={this.popoverId}\n          triggerMode=\"controlled\"\n          placement=\"bottom-start\"\n          open={this.open}\n        >\n          <div slot=\"trigger\" class=\"input-wrapper\">\n            <slot name=\"before-input\"></slot>\n\n            <div\n              class=\"input-container\"\n              onClick={this.handleInputContainerClick}\n            >\n              <slot name=\"leading-input\"></slot>\n\n              <input\n                id={this.inputId}\n                ref={this.setInputRef}\n                placeholder={\n                  this.placeholder ||\n                  this.convertToInputmaskFormat(this.dateFormat)\n                }\n                name={this.name}\n                disabled={this.disabled}\n                readOnly={this.readonly}\n                required={this.required}\n                autofocus={this.autofocus}\n                onInput={this.handleInput}\n                onFocus={this.handleFocus}\n                data-scope=\"date\"\n              />\n\n              {this.error && (\n                <nv-icon name=\"alert-circle\" class=\"validation\" size=\"md\" />\n              )}\n              {this.success && (\n                <nv-icon name=\"circle-check\" class=\"validation\" size=\"md\" />\n              )}\n\n              <nv-iconbutton\n                class=\"toggle-calendar-icon\"\n                name=\"calendar\" //{this.open ? 'chevron-top' : 'chevron-down'}\n                size=\"md\"\n                emphasis=\"lower\"\n                aria-label={this.open ? 'Hide calendar' : 'Show calendar'}\n                aria-pressed={this.open.toString()}\n                onClick={this.toggleCalendar}\n                tabIndex={this.disabled ? -1 : 0}\n              />\n            </div>\n\n            <slot name=\"after-input\"></slot>\n          </div>\n\n          <div slot=\"content\">\n            <nv-calendar\n              dateFormat={this.dateFormat}\n              singleValue={this.singleValue}\n              firstDayOfWeek={this.firstDayOfWeek}\n              numberOfCalendars={this.numberOfCalendars}\n              min={this.min}\n              max={this.max}\n              locale={this.locale}\n              shortcutsPlacement={this.shortcutsPlacement}\n              showActions={this.showActions}\n              shortcuts={this.shortcuts}\n              showWeekNumbers={this.showWeekNumbers}\n              disabledDates={this.disabledDates}\n              onValueChanged={this.handleCalendarValueChanged}\n            ></nv-calendar>\n          </div>\n        </nv-popover>\n\n        {((this.description && this.description.length > 0) ||\n          this.el.querySelector('[slot=\"description\"]')) && (\n          <div class=\"description\">\n            <slot name=\"description\">{this.description}</slot>\n          </div>\n        )}\n\n        {(this.errorDescription ||\n          this.el.querySelector('[slot=\"error-description\"]')) && (\n          <div hidden={!this.error} class=\"error-description\">\n            {this.el.querySelector('[slot=\"error-description\"]') ? (\n              <slot name=\"error-description\"></slot>\n            ) : (\n              this.errorDescription\n            )}\n          </div>\n        )}\n\n        <slot></slot>\n      </Host>\n    );\n  }\n  //#endregion RENDER\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/native/p-bcff76ab.entry.js

@@ -0,0 +1,2 @@
+import{r as o,c as t,h as n,H as e}from"./p-d0a33e64.js";const r="nv-togglebutton{display:inline-flex;justify-content:center;align-items:center}nv-togglebutton:focus-visible,nv-togglebutton:has(:focus-visible){z-index:1}nv-togglebutton[size=xs]{padding:var(--button-xs-padding-y) var(--button-xs-padding-x);gap:var(--button-xs-gap);border-radius:var(--button-xs-border-radius);line-height:var(--button-xs-line-height);font-size:var(--button-xs-font-size);padding-top:calc(var(--togglegroup-xs-button-padding-y) - 1px);padding-bottom:calc(var(--togglegroup-xs-button-padding-y) - 1px);border-radius:calc(var(--togglegroup-xs-button-radius));border-width:0}nv-togglebutton[size=xs] nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-togglebutton[size=sm]{padding:var(--button-sm-padding-y) var(--button-sm-padding-x);gap:var(--button-sm-gap);border-radius:var(--button-sm-border-radius);line-height:var(--button-sm-line-height);font-size:var(--button-sm-font-size);padding-top:calc(var(--togglegroup-sm-button-padding-y) - 1px);padding-bottom:calc(var(--togglegroup-sm-button-padding-y) - 1px);border-radius:calc(var(--togglegroup-sm-button-radius));border-width:0}nv-togglebutton[size=sm] nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-togglebutton[size=md]{padding:var(--button-md-padding-y) var(--button-md-padding-x);gap:var(--button-md-gap);border-radius:var(--button-md-border-radius);line-height:var(--button-md-line-height);font-size:var(--button-md-font-size);padding-top:calc(var(--togglegroup-md-button-padding-y) - 1px);padding-bottom:calc(var(--togglegroup-md-button-padding-y) - 1px);border-radius:calc(var(--togglegroup-md-button-radius));border-width:0}nv-togglebutton[size=md] nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-togglebutton[size=lg]{padding:var(--button-lg-padding-y) var(--button-lg-padding-x);gap:var(--button-lg-gap);border-radius:var(--button-lg-border-radius);line-height:var(--button-lg-line-height);font-size:var(--button-lg-font-size);padding-top:calc(var(--togglegroup-lg-button-padding-y) - 1px);padding-bottom:calc(var(--togglegroup-lg-button-padding-y) - 1px);border-radius:calc(var(--togglegroup-lg-button-radius));border-width:0}nv-togglebutton[size=lg] nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-togglebutton[emphasis=high]{background:var(--components-button-low-background);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text)}nv-togglebutton[emphasis=high]:hover{background:var(--components-button-low-background-hover);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text-hover)}nv-togglebutton[emphasis=high]:active{background:var(--components-button-low-background-active);border:1px solid var(--components-button-low-border-active);color:var(--components-button-low-text-active)}nv-togglebutton[emphasis=high]:focus,nv-togglebutton[emphasis=high]:focus-within{outline:none}nv-togglebutton[emphasis=high]:focus-visible,nv-togglebutton[emphasis=high]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-togglebutton[emphasis=high]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-togglebutton[emphasis=high][active]:not([active=false]){background:var(--components-button-low-background-active);border:1px solid var(--components-button-low-border-active);color:var(--components-button-low-text-active)}nv-togglebutton[emphasis=low]{background:var(--components-button-lower-background);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text)}nv-togglebutton[emphasis=low]:hover{background:var(--components-button-lower-background-hover);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text-hover)}nv-togglebutton[emphasis=low]:active{background:var(--components-button-lower-background-active);border:1px solid var(--components-button-lower-border-active);color:var(--components-button-lower-text-active)}nv-togglebutton[emphasis=low]:focus,nv-togglebutton[emphasis=low]:focus-within{outline:none}nv-togglebutton[emphasis=low]:focus-visible,nv-togglebutton[emphasis=low]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-togglebutton[emphasis=low]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-togglebutton[emphasis=low][active]:not([active=false]),nv-togglebutton[emphasis=low]:active{background:var(--components-button-lower-background-hover);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text-hover)}";const a=r;const i=class{constructor(n){o(this,n);this.toggled=t(this,"toggled",7);this.size="md";this.disabled=false;this.active=false;this.emphasis="high";this.handleClick=()=>{if(this.disabled)return;this.toggled.emit({value:this.value,active:this.active})}}render(){return n(e,{key:"81e773d6bafc0fd451fb7e71cb14ca709af2d07e",role:"button",tabindex:"0","aria-pressed":String(this.active),onClick:this.handleClick},n("slot",{key:"4cec2d6ae5388cdfd285ab15af356e9833b0ccb3"}))}};i.style=a;export{i as nv_togglebutton};
+//# sourceMappingURL=p-bcff76ab.entry.js.map

package/dist/native/{p-44dd9a4c.entry.js.map → p-bcff76ab.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["nvTogglebuttonCss","NvTogglebuttonStyle0","NvTogglebutton","constructor","hostRef","this","size","disabled","active","emphasis","handleClick","toggled","emit","value","render","h","Host","key","role","tabindex","String","onClick"],"sources":["src/components/nv-togglebutton/styles/nv-togglebutton.scss?tag=nv-togglebutton","src/components/nv-togglebutton/nv-togglebutton.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n\nnv-togglebutton {\n  @include root-styles();\n\n  @each $size in $sizes {\n    &[size=\"#{$size}\"] {\n        @include button-size-styles($size);\n        @include togglegroup-button-size-styles($size);\n    }\n  }\n\n  &[emphasis=\"high\"] {\n    @include button-emphasis-styles('low');\n    &[active]:not([active=\"false\"]) {\n      @include button-active-styles('low');\n    }\n  }\n  &[emphasis=\"low\"] {\n    @include button-emphasis-styles('lower');\n    &[active]:not([active=\"false\"]), &:active {\n      @include button-hover-styles('lower');\n    }\n  }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { ToggleButtonEmphasis, ToggleButtonSize } from '../../utils/constants';\n\n/**\n * @slot default - Child content of the toggle button.\n */\n@Component({\n  tag: 'nv-togglebutton',\n  styleUrl: 'styles/nv-togglebutton.scss',\n  shadow: false,\n})\nexport class NvTogglebutton {\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Determines how large or small the togglebutton appears, allowing for\n   * customization of the togglebutton's dimensions to fit different design\n   * specifications and user needs.\n   */\n  @Prop({ reflect: true })\n  readonly size: `${ToggleButtonSize}` = 'md';\n\n  /**\n   * The value to associated with the button when selected in a\n   * Togglebuttongroup.\n   */\n  @Prop({ reflect: true })\n  readonly value: string;\n\n  /**\n   * Prevents all interaction, rendering the toggle in a non-interactive state.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Whether the button is active or not. Will not toggle automatically but\n   * needs to be controlled externally.\n   */\n  @Prop({ reflect: true })\n  readonly active: boolean = false;\n\n  /**\n   * Make it more or less visually prominent to users.\n   */\n  @Prop({ reflect: true })\n  readonly emphasis: `${ToggleButtonEmphasis}` = 'high';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  private handleClick = () => {\n    if (this.disabled) return;\n\n    this.toggled.emit({\n      value: this.value,\n      active: this.active,\n    });\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the button is toggled.\n   */\n  @Event({ eventName: 'toggled' })\n  toggled: EventEmitter<{\n    /** The value associated with the button. */\n    value: string;\n    /** If the button is active when clicked. */\n    active: boolean;\n  }>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region RENDER\n  render() {\n    return (\n      <Host\n        role=\"button\"\n        tabindex=\"0\"\n        aria-pressed={String(this.active)}\n        onClick={this.handleClick}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n  // #endregion RENDER\n}\n"],"mappings":"yDAAA,MAAMA,EAAoB,4oJAC1B,MAAAC,EAAeD,E,MCUFE,EAAc,MAL3B,WAAAC,CAAAC,G,2CAeWC,KAAAC,KAA8B,KAa9BD,KAAAE,SAAoB,MAOpBF,KAAAG,OAAkB,MAMlBH,KAAAI,SAAsC,OAMvCJ,KAAAK,YAAc,KACpB,GAAIL,KAAKE,SAAU,OAEnBF,KAAKM,QAAQC,KAAK,CAChBC,MAAOR,KAAKQ,MACZL,OAAQH,KAAKG,QACb,C,CAqBJ,MAAAM,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,SACLC,SAAS,IAAG,eACEC,OAAOf,KAAKG,QAC1Ba,QAAShB,KAAKK,aAEdK,EAAA,QAAAE,IAAA,6C","ignoreList":[]}
+{"version":3,"names":["nvTogglebuttonCss","NvTogglebuttonStyle0","NvTogglebutton","constructor","hostRef","this","size","disabled","active","emphasis","handleClick","toggled","emit","value","render","h","Host","key","role","tabindex","String","onClick"],"sources":["src/components/nv-togglebutton/styles/nv-togglebutton.scss?tag=nv-togglebutton","src/components/nv-togglebutton/nv-togglebutton.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n\nnv-togglebutton {\n  @include root-styles();\n\n  @each $size in $sizes {\n    &[size=\"#{$size}\"] {\n        @include button-size-styles($size);\n        @include togglegroup-button-size-styles($size);\n    }\n  }\n\n  &[emphasis=\"high\"] {\n    @include button-emphasis-styles('low');\n    &[active]:not([active=\"false\"]) {\n      @include button-active-styles('low');\n    }\n  }\n  &[emphasis=\"low\"] {\n    @include button-emphasis-styles('lower');\n    &[active]:not([active=\"false\"]), &:active {\n      @include button-hover-styles('lower');\n    }\n  }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { ToggleButtonEmphasis, ToggleButtonSize } from '../../utils/constants';\n\n/**\n * @slot default - Child content of the toggle button.\n */\n@Component({\n  tag: 'nv-togglebutton',\n  styleUrl: 'styles/nv-togglebutton.scss',\n  shadow: false,\n})\nexport class NvTogglebutton {\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Determines how large or small the togglebutton appears, allowing for\n   * customization of the togglebutton's dimensions to fit different design\n   * specifications and user needs.\n   */\n  @Prop({ reflect: true })\n  readonly size: `${ToggleButtonSize}` = 'md';\n\n  /**\n   * The value to associated with the button when selected in a\n   * Togglebuttongroup.\n   */\n  @Prop({ reflect: true })\n  readonly value: string;\n\n  /**\n   * Prevents all interaction, rendering the toggle in a non-interactive state.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Whether the button is active or not. Will not toggle automatically but\n   * needs to be controlled externally.\n   */\n  @Prop({ reflect: true })\n  readonly active: boolean = false;\n\n  /**\n   * Make it more or less visually prominent to users.\n   */\n  @Prop({ reflect: true })\n  readonly emphasis: `${ToggleButtonEmphasis}` = 'high';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  private handleClick = () => {\n    if (this.disabled) return;\n\n    this.toggled.emit({\n      value: this.value,\n      active: this.active,\n    });\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the button is toggled.\n   */\n  @Event({ eventName: 'toggled' })\n  toggled: EventEmitter<{\n    /** The value associated with the button. */\n    value: string;\n    /** If the button is active when clicked. */\n    active: boolean;\n  }>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region RENDER\n  render() {\n    return (\n      <Host\n        role=\"button\"\n        tabindex=\"0\"\n        aria-pressed={String(this.active)}\n        onClick={this.handleClick}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n  // #endregion RENDER\n}\n"],"mappings":"yDAAA,MAAMA,EAAoB,gsJAC1B,MAAAC,EAAeD,E,MCUFE,EAAc,MAL3B,WAAAC,CAAAC,G,2CAeWC,KAAAC,KAA8B,KAa9BD,KAAAE,SAAoB,MAOpBF,KAAAG,OAAkB,MAMlBH,KAAAI,SAAsC,OAMvCJ,KAAAK,YAAc,KACpB,GAAIL,KAAKE,SAAU,OAEnBF,KAAKM,QAAQC,KAAK,CAChBC,MAAOR,KAAKQ,MACZL,OAAQH,KAAKG,QACb,C,CAqBJ,MAAAM,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,SACLC,SAAS,IAAG,eACEC,OAAOf,KAAKG,QAC1Ba,QAAShB,KAAKK,aAEdK,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

package/dist/native/p-c3ad7617.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as i,H as s,g as r}from"./p-d0a33e64.js";import{a as n}from"./p-a5c8eee9.js";import{f as o}from"./p-5f594b35.js";import{v as l}from"./p-f5ff676c.js";const a='nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range{background:var(--components-slider-track-filled-focus)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb{border-color:var(--components-slider-track-filled-focus)}nv-fieldslider[error] .slider-container .track-container .track .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:hover{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-handler-background-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:focus{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldtime{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box;max-width:480px}nv-fieldtime[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldtime[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive-in-field)}nv-fieldtime[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fieldtime[required]:not([required=false]) label::after{content:"*";color:var(--components-form-text-required);font-weight:700}nv-fieldtime label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fieldtime nv-popover{width:100%;display:block}nv-fieldtime nv-popover [data-scope=popover]{padding:var(--list-dropdown-padding);background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border);width:100%}nv-fieldtime .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fieldtime .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out;display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%;min-height:40px;gap:0;padding-left:var(--form-field-padding-x)}nv-fieldtime .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldtime .input-container:focus-within,nv-fieldtime .input-container:focus-within:hover,nv-fieldtime .input-container:focus,nv-fieldtime .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldtime .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldtime .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldtime .input-container input.time-input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%;width:100%;min-width:24px;flex:0 0 24px;text-align:center;padding:0;margin:0}nv-fieldtime .input-container input.time-input:focus{outline:none}nv-fieldtime .input-container input.time-input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:"TT Norms Pro", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldtime .input-container input.time-input[type=password]::-ms-clear,nv-fieldtime .input-container input.time-input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldtime .input-container input.time-input::-webkit-inner-spin-button,nv-fieldtime .input-container input.time-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}nv-fieldtime .input-container span{width:100%;text-align:center;min-width:24px;flex:0 0 24px;padding:0 4px;color:var(--components-form-field-content-text)}nv-fieldtime .input-container>nv-iconbutton{border:0px;border-radius:0px;margin-left:auto}nv-fieldtime .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldtime .input-container>nv-iconbutton:last-of-type{border-top-right-radius:var(--form-field-radius);border-bottom-right-radius:var(--form-field-radius)}nv-fieldtime .input-container nv-icon.validation{color:var(--nv-field-border-default);position:absolute;right:50px;top:50%;transform:translateY(-50%)}nv-fieldtime .input-container:focus,nv-fieldtime .input-container:focus-within{border-color:var(--color-focus-brand);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--color-focus-brand)}nv-fieldtime .description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldtime .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fieldtime hr{border:none;border-top:1px solid var(--dropdown-divider-color, #ccc);margin:0.5rem 0}nv-fieldtime .time-dropdown{width:100%}nv-fieldtime .time-dropdown .time-columns{display:flex;justify-content:flex-start;align-items:center}nv-fieldtime .time-dropdown .time-columns .time-column{flex:1;text-align:center;max-height:200px;overflow-y:auto;scroll-behavior:smooth;scrollbar-gutter:stable both-edges;scrollbar-gutter:auto}nv-fieldtime .time-dropdown .time-columns .time-column::-webkit-scrollbar{width:6px;height:6px}nv-fieldtime .time-dropdown .time-columns .time-column::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-fieldtime .time-dropdown .time-columns .time-column::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-fieldtime .time-dropdown .time-columns .time-column:last-child{border-right:none}nv-fieldtime .time-dropdown .time-columns .time-column .time-option{padding:var(--calendar-padding);text-align:center;cursor:pointer;transition:background-color 0.2s;border-radius:var(--list-dropdown-item-radius);color:var(--components-calendar-cell-text);font-size:var(--font-size-sm);display:flex;justify-content:center;align-items:center}nv-fieldtime .time-dropdown .time-columns .time-column .time-option:hover{background-color:var(--components-calendar-cell-background-hover);color:var(--components-calendar-cell-text-hover)}nv-fieldtime .time-dropdown .time-columns .time-column .time-option:focus,nv-fieldtime .time-dropdown .time-columns .time-column .time-option:focus-within{background-color:var(--components-calendar-cell-background-hover);color:var(--components-calendar-cell-text-hover)}nv-fieldtime .time-dropdown .time-columns .time-column .time-option.selected{background-color:var(--components-calendar-cell-background-selected);color:var(--components-calendar-cell-text-selected)}nv-fieldtime .time-dropdown .time-columns .time-column .time-option.highlighted{background-color:var(--components-calendar-cell-background-hover);color:var(--components-menu-contextual-item-content-hover)}';const d=a;const c=class{constructor(i){e(this,i);this.valueChanged=t(this,"valueChanged",7);this.inputElements={};this.inputZeroAdded={};this.typeFocused=o.Hours;this.hours="00";this.minutes="00";this.seconds="00";this.inputId=l();this.readonly=false;this.disabled=false;this.required=false;this.success=false;this.error=false;this.format="HH:mm:ss";this.open=false;this.step=6e4;this.autofocus=false}handleOpenChanged(e){e.stopPropagation();this.open=e.detail}handleKeyDown(e){var t,i,s,r;if(!this.open){if(e.key==="ArrowDown"){this.open=true;e.preventDefault();return}return}if(!this.popoverElement){console.warn("nv-fieldtime -> Popover element is not defined");return}const n=`.time-column.time-column-${this.typeFocused} div`;const l=Array.from(this.el.querySelectorAll(n));if(l.length===0){console.warn("nv-fieldtime -> No dropdown items found to navigate");return}let a=l.findIndex((e=>e.classList.contains("highlighted")));if(e.key==="ArrowDown"){e.preventDefault();a=(a+1)%l.length;this.updateHighlightedItem(l,a)}else if(e.key==="ArrowUp"){e.preventDefault();a=(a-1+l.length)%l.length;this.updateHighlightedItem(l,a)}else if(e.key==="Enter"&&a>=0){e.preventDefault();l[a].click();if(this.typeFocused===o.Hours){(t=this.inputElements[o.Minutes])===null||t===void 0?void 0:t.focus();(i=this.inputElements[o.Minutes])===null||i===void 0?void 0:i.select()}else if(this.typeFocused===o.Minutes||this.typeFocused===o.Seconds){(s=this.inputElements[o.Seconds])===null||s===void 0?void 0:s.focus();(r=this.inputElements[o.Seconds])===null||r===void 0?void 0:r.select()}}else if(e.key==="Escape"){e.preventDefault();if(this.inputElements[o.Hours]){this.inputElements[o.Hours].blur()}}}handleValueChange(e){this.valueChanged.emit(e)}handleInputChange(e,t){const i=e.target;const s=i.value.replace(/[^0-9]/g,"");switch(t){case o.Hours:this.handleHoursChange(s,t);break;case o.Minutes:this.handleMinutesChange(s,t);break;case o.Seconds:this.handleSecondsChange(s,t);break}const r=this.reconstructTime();this.value=r}handleHoursChange(e,t){var i,s,r,n;const l=this.format.startsWith("HH");const a=l?24:12;let d=false;const c=this.parseHour(this.max,this.format)||(this.format.startsWith("hh")?"12":"24");const f=this.parseHour(this.min,this.format)||"00";if(e.length===1){this.inputZeroAdded[t]=true;const i=e.padStart(2,"0");if(c&&parseInt(i,10)>parseInt(c,10)){if(f&&parseInt(i,10)<parseInt(f,10)){this.hours=f}else{this.hours="00";d=true}}else{if(f&&parseInt(i,10)<parseInt(f,10)){this.hours=f}else{this.hours=i}}}else if(this.inputZeroAdded[t]){this.inputZeroAdded[t]=false;const i=e.slice(1,3).padStart(2,"0");const s=parseInt(i,10)||0;if(s>=a){if(f&&parseInt(i,10)<parseInt(f,10)){this.hours=f}else{this.hours="00";d=true}}else{if(c&&parseInt(i,10)>parseInt(c,10)){if(f&&parseInt(i,10)<parseInt(f,10)){this.hours=f}else{this.hours="00";d=true}}else{if(f&&parseInt(i,10)<parseInt(f,10)){this.hours=f}else{this.hours=i}}}}else if(e.length>2){if(e.startsWith("00")){this.inputZeroAdded[t]=true;const i=e.slice(1,3).padStart(2,"0");if(c&&parseInt(i,10)>parseInt(c,10)){if(f&&parseInt(i,10)<parseInt(f,10)){this.hours=f}else{this.hours="00";d=true}}else{if(f&&parseInt(i,10)<parseInt(f,10)){this.hours=f}else{this.hours=i}}}else{const t=e.slice(1,3).padStart(2,"0");const i=parseInt(t,10)||0;if(i>=a){if(f&&parseInt(t,10)<parseInt(f,10)){this.hours=f;d=true}else{this.hours="00";d=true}}else{if(c&&i>parseInt(c,10)){if(f&&parseInt(t,10)<parseInt(f,10)){this.hours=f}else{this.hours="00";d=true}}else{if(f&&i<parseInt(f,10)){this.hours=f}else{this.hours=i.toString()}}}}}else{const t=e.padStart(2,"0");const i=parseInt(t,10)||0;if(i>=a){if(f&&parseInt(t,10)<parseInt(f,10)){this.hours=f}else{this.hours="00";d=true}}else{if(c&&i>parseInt(c,10)){this.hours="00";d=true}else{if(f&&i<parseInt(f,10)){this.hours=f}else{this.hours=i.toString()}}}}if(this.hours.length===2&&!this.inputZeroAdded[t]&&!d){(i=this.inputElements[o.Minutes])===null||i===void 0?void 0:i.focus();(s=this.inputElements[o.Minutes])===null||s===void 0?void 0:s.select()}else if(d){(r=this.inputElements[o.Hours])===null||r===void 0?void 0:r.focus();(n=this.inputElements[o.Hours])===null||n===void 0?void 0:n.select()}}handleMinutesChange(e,t){var i,s,r,n,l,a;const d=60;let c=false;const f=(i=this.parseMinute(this.min))!==null&&i!==void 0?i:0;const h=(s=this.parseMinute(this.max))!==null&&s!==void 0?s:59;if(e.length===1){this.inputZeroAdded[t]=true;const i=e.padStart(2,"0");if(h&&parseInt(i,10)>h){if(f&&parseInt(i,10)<f){this.minutes=f.toString().padStart(2,"0")}else{this.minutes="00";c=true}}else{if(f&&parseInt(i,10)<f){this.minutes=f.toString().padStart(2,"0")}else{this.minutes=i}}}else if(this.inputZeroAdded[t]){this.inputZeroAdded[t]=false;const i=e.slice(1,3).padStart(2,"0");const s=parseInt(i,10)||0;if(s>=d){if(f&&parseInt(i,10)<f){this.minutes=f.toString().padStart(2,"0")}else{this.minutes="00";c=true}}else{if(h&&s>h){if(f&&parseInt(i,10)<f){this.minutes=f.toString().padStart(2,"0")}else{this.minutes="00";c=true}}else{if(f&&s<f){this.minutes=f.toString().padStart(2,"0")}else{this.minutes=i}}}}else if(e.length>2){if(e.startsWith("00")){this.inputZeroAdded[t]=true;const i=e.slice(1,3).padStart(2,"0");if(h&&parseInt(i,10)>h){if(f&&parseInt(i,10)<f){this.minutes=f.toString().padStart(2,"0")}else{this.minutes="00";c=true}}else{if(f&&parseInt(i,10)<f){this.minutes=f.toString().padStart(2,"0")}else{this.minutes=i}}}else{const t=e.slice(1,3).padStart(2,"0");const i=parseInt(t,10)||0;if(i>=d){if(f&&parseInt(t,10)<f){this.minutes=f.toString().padStart(2,"0")}else{this.minutes="00";c=true}}else{if(h&&i>h){if(f&&parseInt(t,10)<f){this.minutes=f.toString().padStart(2,"0")}else{this.minutes="00";c=true}}else{if(f&&i<f){this.minutes=f.toString().padStart(2,"0")}else{this.minutes=i.toString()}}}}}else{const t=e.padStart(2,"0");const i=parseInt(t,10)||0;if(i>=d){if(f&&parseInt(t,10)<f){this.minutes=f.toString().padStart(2,"0")}else{this.minutes="00";c=true}}else{if(h&&i>h){if(f&&parseInt(t,10)<f){this.minutes=f.toString().padStart(2,"0")}else{this.minutes="00";c=true}}else{if(f&&i<f){this.minutes=f.toString().padStart(2,"0")}else{this.minutes=i.toString()}}}}if(this.minutes.length===2&&!this.inputZeroAdded[t]&&!c){(r=this.inputElements[o.Seconds])===null||r===void 0?void 0:r.focus();(n=this.inputElements[o.Seconds])===null||n===void 0?void 0:n.select()}else if(c){(l=this.inputElements[o.Minutes])===null||l===void 0?void 0:l.focus();(a=this.inputElements[o.Minutes])===null||a===void 0?void 0:a.select()}}handleSecondsChange(e,t){var i,s,r,n;const l=60;let a=false;const d=(i=this.parseSecond(this.min))!==null&&i!==void 0?i:0;const c=(s=this.parseSecond(this.max))!==null&&s!==void 0?s:59;if(e.length===1){this.inputZeroAdded[t]=true;const i=e.padStart(2,"0");if(c&&parseInt(i,10)>c){if(d&&parseInt(i,10)<d){this.seconds=d.toString().padStart(2,"0")}else{this.seconds="00";a=true}}else{if(d&&parseInt(i,10)<d){this.seconds=d.toString().padStart(2,"0")}else{this.seconds=i}}}else if(this.inputZeroAdded[t]){this.inputZeroAdded[t]=false;const i=e.slice(1,3).padStart(2,"0");const s=parseInt(i,10)||0;if(s>=l){if(d&&parseInt(i,10)<d){this.seconds=d.toString().padStart(2,"0")}else{this.seconds="00";a=true}}else{if(c&&s>c){if(d&&parseInt(i,10)<d){this.seconds=d.toString().padStart(2,"0")}else{this.seconds="00";a=true}}else{if(d&&s<d){this.seconds=d.toString().padStart(2,"0")}else{this.seconds=i}}}}else if(e.length>2){const t=e.slice(1,3).padStart(2,"0");const i=parseInt(t,10)||0;if(i>=l){if(d&&parseInt(t,10)<d){this.seconds=d.toString().padStart(2,"0")}else{this.seconds="00";a=true}}else{if(c&&i>c){if(d&&parseInt(t,10)<d){this.seconds=d.toString().padStart(2,"0")}else{this.seconds="00";a=true}}else{if(d&&i<d){this.seconds=d.toString().padStart(2,"0")}else{this.seconds=i.toString()}}}}else{const t=e.padStart(2,"0");const i=parseInt(t,10)||0;if(i>=l){if(d&&parseInt(t,10)<d){this.seconds=d.toString().padStart(2,"0")}else{this.seconds="00";a=true}}else{if(c&&i>c){if(d&&parseInt(t,10)<d){this.seconds=d.toString().padStart(2,"0")}else{this.seconds="00";a=true}}else{if(d&&i<d){this.seconds=d.toString().padStart(2,"0")}else{this.seconds=i.toString()}}}}if(a){(r=this.inputElements[o.Seconds])===null||r===void 0?void 0:r.focus();(n=this.inputElements[o.Seconds])===null||n===void 0?void 0:n.select()}}parseTime(e){if(!e){return}const t=e.replace(/[^0-9]/g,"").padStart(6,"0");const i=t.slice(0,2);const s=t.slice(2,4);const r=t.slice(4,6);const n=this.parseHour(this.min,this.format)||i;const o=this.parseMinute(this.min)||s;const l=this.parseSecond(this.min)||r;this.hours=n.padStart(2,"0");this.minutes=o.toString().padStart(2,"0");this.seconds=l.toString().padStart(2,"0")}reconstructTime(){if(this.format==="HH"||this.format==="hh"){return this.hours}else if(this.format==="HH:mm"||this.format==="hh:mm"){return`${this.hours}:${this.minutes}`}else if(this.format==="HH:mm:ss"||this.format==="hh:mm:ss"){return`${this.hours}:${this.minutes}:${this.seconds}`}else{return`${this.hours}:${this.minutes}:${this.seconds}`}}handleFocus(e){var t,i,s,r;if(this.readonly||this.disabled){return}if(!this.open){this.open=true}if(((t=this.inputElements[e])===null||t===void 0?void 0:t.value.length)===0||((i=this.inputElements[e])===null||i===void 0?void 0:i.value)==="00"){(s=this.inputElements[e])===null||s===void 0?void 0:s.focus();(r=this.inputElements[e])===null||r===void 0?void 0:r.select()}this.typeFocused=e}HandleDropdownIconClick(){var e,t,i,s,r,n;if(this.disabled||this.readonly){return}if(this.open&&this.inputElements[o.Hours]){this.open=false}else if(this.open&&this.inputElements[o.Minutes]){this.open=false}else if(this.open&&this.inputElements[o.Seconds]){this.open=false}else if(!this.open&&this.inputElements[o.Hours]){(e=this.inputElements[o.Hours])===null||e===void 0?void 0:e.focus();(t=this.inputElements[o.Hours])===null||t===void 0?void 0:t.select()}else if(!this.open&&this.inputElements[o.Minutes]){(i=this.inputElements[o.Minutes])===null||i===void 0?void 0:i.focus();(s=this.inputElements[o.Minutes])===null||s===void 0?void 0:s.select()}else if(!this.open&&this.inputElements[o.Seconds]){(r=this.inputElements[o.Seconds])===null||r===void 0?void 0:r.focus();(n=this.inputElements[o.Seconds])===null||n===void 0?void 0:n.select()}else{console.warn("nv-fieldtime -> No input elements found to focus or to blur")}}updateHighlightedItem(e,t){e.forEach(((e,i)=>{if(i===t){e.classList.add("highlighted");e.setAttribute("tabindex","0");e.focus();e.scrollIntoView({block:"nearest"})}else{e.classList.remove("highlighted");e.setAttribute("tabindex","-1")}}))}handleTimeOptionClick(e,t){const i=parseInt(e.target.textContent||"0",10);if(t===o.Hours){this.hours=i.toString().padStart(2,"0")}else if(t===o.Minutes){this.minutes=i.toString().padStart(2,"0")}else if(t===o.Seconds){this.seconds=i.toString().padStart(2,"0")}const s=this.reconstructTime();this.value=s}handleInputBlur(){setTimeout((()=>{if(!this.el.contains(document.activeElement)){if(this.open){this.open=false}}}),150)}handleClickOutside(e){const t=e.target;if(this.el.contains(t)||Object.values(this.inputElements).some((e=>e.contains(t)))){return}if(this.open){this.open=false}}handleScroll(e,t){const i=e.target;const s=i.scrollTop;const r=i.clientHeight;const n=i.scrollHeight;const o=40;const l=this.generateTimeOptions(t);const a=l.length*o;if(s+r>=n-o||s<=0){i.scrollTop=a}}generateTimeOptions(e){const t=this.step/1e3;if(t===0){return["00"]}switch(e){case o.Hours:return this.generateHourOptions(t);case o.Minutes:return this.generateMinuteOptions(t);case o.Seconds:return this.generateSecondOptions(t);default:return[]}}generateHourOptions(e){const t=Math.max(1,Math.floor(e/3600));const i=this.parseHour(this.max,this.format)||(this.format.startsWith("hh")?"12":"24");const s=this.parseHour(this.min,this.format)||"00";const r=parseInt(i,10);const n=parseInt(s,10);const o=[];for(let e=n;e<r;e+=t){o.push(e.toString().padStart(2,"0"))}return o}parseHour(e,t){if(!e)return null;const[i]=e.split(":");const s=parseInt(i,10);if(isNaN(s))return null;if(t.startsWith("hh"))return s>0&&s<=12?i.padStart(2,"0"):null;return s>=0&&s<=24?i.padStart(2,"0"):null}generateMinuteOptions(e){var t,i;const s=Math.max(1,Math.floor(e%3600/60));const r=(t=this.parseMinute(this.min))!==null&&t!==void 0?t:0;const n=(i=this.parseMinute(this.max))!==null&&i!==void 0?i:59;if(r===0&&n===0)return["00"];const o=[];for(let e=r;e<=n;e+=s){o.push(e.toString().padStart(2,"0"))}return o}parseMinute(e){if(!e)return null;const t=e.split(":");if(t.length<2)return null;const i=parseInt(t[1],10);return isNaN(i)||i<0||i>=60?null:i}generateSecondOptions(e){var t,i;const s=Math.max(1,e%60);const r=(t=this.parseSecond(this.min))!==null&&t!==void 0?t:0;const n=(i=this.parseSecond(this.max))!==null&&i!==void 0?i:59;if(r===0&&n===0)return["00"];const o=[];for(let e=r;e<=n;e+=s){o.push(e.toString().padStart(2,"0"))}return o}parseSecond(e){if(!e)return null;const t=e.split(":");if(t.length<3)return null;const i=parseInt(t[2],10);return isNaN(i)||i<0||i>=60?null:i}generateInfiniteTimeOptions(e){const t=this.generateTimeOptions(e);const i=t.length;const s=Math.ceil(300/i);return Array(s).fill(t).flat()}getCurrentTime(){const e=new Date;return e.toLocaleTimeString()}updateColumnHighlight(e,t){const i=Array.from(this.el.querySelectorAll(e));const s=i.findIndex((e=>e.textContent===t));this.updateHighlightedItem(i,s)}handleHostClick(e){var t,i;if(this.disabled||this.readonly){return}const s=e.target;if(s.closest("nv-iconbutton")){return}if(!this.open){if(this.inputElements){(t=this.inputElements[o.Hours])===null||t===void 0?void 0:t.focus();(i=this.inputElements[o.Hours])===null||i===void 0?void 0:i.select()}e.preventDefault()}}componentWillLoad(){document.addEventListener("click",this.handleClickOutside.bind(this));if(this.value){this.parseTime(this.value)}else{const e=this.parseHour(this.min,this.format)||"00";const t=this.parseMinute(this.min)||0;const i=this.parseSecond(this.min)||0;this.hours=e.padStart(2,"0");this.minutes=t.toString().padStart(2,"0");this.seconds=i.toString().padStart(2,"0")}}connectedCallback(){document.addEventListener("click",this.handleClickOutside.bind(this))}disconnectedCallback(){document.removeEventListener("click",this.handleClickOutside.bind(this))}componentDidLoad(){if(!this.value){const e=this.getCurrentTime();let[t,i,s]=e.split(":");let r,n;if(s.includes(" ")){[r,n]=s.split(" ")}else{r=s}let o=parseInt(t,10);if(n){if(n==="PM"&&o<12){o+=12}else if(n==="AM"&&o===12){o=0}}if(this.format.startsWith("hh")){if(o===0){t="12"}else if(o>12){t=(o-12).toString()}else{t=o.toString()}}else{t=o.toString()}t=t.padStart(2,"0");i=i.padStart(2,"0");r=r.padStart(2,"0");const l=`.time-column.time-column-hours div`;this.updateColumnHighlight(l,t);const a=`.time-column.time-column-minutes div`;this.updateColumnHighlight(a,i);const d=`.time-column.time-column-seconds div`;this.updateColumnHighlight(d,r)}}RenderTimeOptionsColumn(e){return i("div",{class:`time-column time-column-${e}`,onScroll:t=>this.handleScroll(t,e)},this.generateInfiniteTimeOptions(e).map(((t,s)=>i("div",{class:{"time-option":true,selected:e===o.Hours&&t===this.hours||e===o.Minutes&&t===this.minutes||e===o.Seconds&&t===this.seconds},key:`${t}-${s}`,onClick:t=>this.handleTimeOptionClick(t,e)},t))))}render(){return i(s,{key:"a960e7daf8d9a323a55b0f248dd24f8e94321161",onclick:e=>this.handleHostClick(e)},(this.label||this.el.querySelector('[slot="label"]'))&&i("label",{key:"23c78f159cb32ef76d0d8b5a1171246c9c69fdb7",htmlFor:this.inputId},i("slot",{key:"70b2361b44414dba4ca91b487a7b04872cc0d75d",name:"label"},this.label)),i("nv-popover",{key:"80de55aa7eb0c165ed6871cb0ac6a5aec9046769",ref:e=>this.popoverElement=e,triggerMode:"controlled",placement:"bottom-start",open:this.open},i("div",{key:"fcd670c6dd32e6687540ddbdaefc2808898a459f",class:"input-wrapper",slot:"trigger"},i("slot",{key:"cea8867cee99035e97bc9ad40a7f20cf1091f415",name:"before-input"}),i("div",{key:"b68a1a7477baaa3fbf39182a36fe4a693e29a688",class:"input-container"},i("slot",{key:"3bb50bb3ad0207ded63bddfff6b5c5afda7ddfd4",name:"leading-input"}),n(this.format,"HH")&&[i("input",{key:"236b3a8067f50c443a117e6b3e8e4b882a84eb01",ref:e=>this.inputElements[o.Hours]=e,type:"number",autofocus:this.autofocus,class:"time-input",pattern:"[0-9]*",maxlength:"3",value:this.hours,onInput:e=>this.handleInputChange(e,o.Hours),placeholder:this.format.includes("hh")?"hh":"HH",inputMode:"numeric",onFocus:()=>this.handleFocus(o.Hours),name:this.name?`${o.Hours}-${this.name}`:o.Hours,id:this.inputId,readonly:this.readonly,disabled:this.disabled,required:this.required,onKeyDown:e=>this.handleKeyDown(e),onBlur:()=>this.handleInputBlur()})],this.format.includes("mm")&&[i("span",{key:"2440acab80a0d91ebe758f5a329ac5d805a18f9a"},":"),i("input",{key:"72bc71a8bce65be766c899738745d85da7ef3530",ref:e=>this.inputElements[o.Minutes]=e,type:"number",autofocus:this.autofocus,class:"time-input",pattern:"[0-9]*",maxlength:"3",value:this.minutes,onInput:e=>this.handleInputChange(e,o.Minutes),placeholder:"mm",inputMode:"numeric",onFocus:()=>this.handleFocus(o.Minutes),name:this.name?`${o.Minutes}-${this.name}`:o.Minutes,id:`${this.inputId}-minutes`,readonly:this.readonly,disabled:this.disabled,required:this.required,onKeyDown:e=>this.handleKeyDown(e),onBlur:()=>this.handleInputBlur()})],this.format.includes("ss")&&[i("span",{key:"0afdff59b999c346b455ed7408332d087ae48b12"},":"),i("input",{key:"0ecf4b18af18b6184e0ccdd00ddea561ee403195",ref:e=>this.inputElements[o.Seconds]=e,type:"number",autofocus:this.autofocus,class:"time-input",pattern:"[0-9]*",maxlength:"3",value:this.seconds,onInput:e=>this.handleInputChange(e,o.Seconds),placeholder:"ss",inputMode:"numeric",onFocus:()=>this.handleFocus(o.Seconds),name:this.name?`${o.Seconds}-${this.name}`:o.Seconds,id:`${this.inputId}-seconds`,readonly:this.readonly,disabled:this.disabled,required:this.required,onKeyDown:e=>this.handleKeyDown(e),onBlur:()=>this.handleInputBlur()})],i("nv-iconbutton",{key:"2d3d19d683d85110df8aab9d7c70fb377b189381",name:"clock",size:"md",emphasis:"lower","aria-label":this.open?"Hide time picker":"Show time picker","aria-pressed":this.open.toString(),onClick:()=>this.HandleDropdownIconClick()}),this.error&&i("nv-icon",{key:"8b49cb73821fea8926ede8406019fa68baa8500e",name:"alert-circle",class:"validation",size:"sm"}),this.success&&i("nv-icon",{key:"372b8e95455c269a988257f2504fc24c680d7f4b",name:"circle-check",class:"validation",size:"sm"})),i("slot",{key:"9e23fd13862e6218cd7213729b3e165ae74fe2eb",name:"after-input"})),i("div",{key:"c5b99d58c96a055ea8aeade81fb5d75490421716",class:"time-dropdown",slot:"content"},i("div",{key:"2bcee9fa41574db70850445bba4d4041c9471a46",class:"time-columns"},n(this.format,"HH")&&this.RenderTimeOptionsColumn(o.Hours),this.format.includes("mm")&&this.RenderTimeOptionsColumn(o.Minutes),this.format.includes("ss")&&this.RenderTimeOptionsColumn(o.Seconds)))),(this.description||this.el.querySelector('[slot="description"]'))&&i("div",{key:"822534262bb1769294be95c1a240a2753d556e1c",class:"description"},i("slot",{key:"62489b82bee33610b55dfa4c2f9997b5d68b6bfe",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&i("div",{key:"9cedb395a09c4243c7c714574ad8d41b6a836fbb",hidden:!this.error,class:"error-description"},i("slot",{key:"7b8802739ad74756f2843dd8807afe6abda92831",name:"error-description"},this.errorDescription)))}static get formAssociated(){return true}get el(){return r(this)}static get watchers(){return{value:["handleValueChange"]}}};c.style=d;export{c as nv_fieldtime};
+//# sourceMappingURL=p-c3ad7617.entry.js.map