@nova-design-system/nova-webcomponents 3.9.0 → 3.10.0

package/dist/native/{p-fa81b77f.entry.js.map → p-2197ffdf.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["nvFieldcheckboxCss","NvFieldcheckboxStyle0","NvFieldcheckbox","constructor","hostRef","this","labelBefore","inputId","uuidv4","hideLabel","error","checked","indeterminate","disabled","readonly","required","autofocus","handleChange","event","target","type","id","preventDefault","onCheckedChanged","checkedChanged","emit","componentWillRender","message","description","labelPlacement","validation","errorDescription","render","h","Host","key","class","clsx","name","autocomplete","value","Boolean","ref","el","xmlns","width","height","viewBox","fill","d","label","querySelector","htmlFor","hidden"],"sources":["src/components/nv-fieldcheckbox/nv-fieldcheckbox.scss?tag=nv-fieldcheckbox","src/components/nv-fieldcheckbox/nv-fieldcheckbox.tsx"],"sourcesContent":["@use \"../../styles/utils\" as utils;\n@import '../../styles/focus-ring';\n\n@mixin fieldcheckbox-variables() {\n  --nv-fieldcheckbox-border-default: var(\n    --components-form-field-border-default\n  );\n  --nv-fieldcheckbox-border-hover: var(--components-form-field-border-hover);\n  --nv-fieldcheckbox-border-focus: var(--components-form-field-border-default);\n  --nv-fieldcheckbox-background-default: var(\n    --components-form-field-background-default\n  );\n  --nv-fieldcheckbox-background-checked: var(\n    --components-form-field-background-checked\n  );\n  --nv-fieldcheckbox-background-disabled: var(\n    --components-form-field-background-disabled\n  );\n  --nv-fieldcheckbox-focus-box-shadow: var(--color-focus-brand);\n  --nv-fieldcheckbox-color-checked: var(\n    --components-form-shape-foreground-default\n  );\n  --nv-fieldcheckbox-color-disabled: var(\n    --components-form-shape-foreground-disabled\n  );\n  --nv-fieldcheckbox-outline-color: var(--color-focus-brand);\n}\n\n@mixin fieldcheckbox-error-variables() {\n  --nv-fieldcheckbox-border-default: var(--components-form-field-border-error);\n  --nv-fieldcheckbox-border-hover: var(--nv-fieldcheckbox-border-default);\n  --nv-fieldcheckbox-border-focus: var(--components-form-field-border-error);\n  --nv-fieldcheckbox-focus-box-shadow: var(--color-focus-destructive);\n  --nv-fieldcheckbox-color-disabled: var(\n    --components-form-shape-foreground-disabled-error\n  );\n  --nv-fieldcheckbox-background-checked: var(\n    --components-form-field-background-error\n  );\n  --nv-fieldcheckbox-outline-color: var(--color-focus-destructive);\n}\n\n@mixin root-styles() {\n  display: inline-flex;\n  align-items: flex-start;\n  gap: var(--form-gap-x);\n  position: relative;\n\n  &:not([disabled], [readonly]) {\n    input,\n    label {\n      cursor: pointer;\n    }\n  }\n}\n\n@mixin label-before-styles() {\n  flex-direction: row-reverse;\n}\n\n@mixin label-styles() {\n  align-self: stretch;\n  color: var(--components-form-text-label-default);\n  font-family: 'TT Norms Pro', sans-serif;\n  font-size: var(--form-label-font-size);\n  font-style: normal;\n  font-weight: var(--form-label-font-weight);\n  line-height: var(--form-label-line-height);\n}\n\n@mixin description-styles() {\n  align-self: stretch;\n  color: var(--components-form-text-description-default);\n  font-family: 'TT Norms Pro', sans-serif;\n  font-size: var(--form-description-font-size);\n  font-style: normal;\n  font-weight: var(--form-description-font-weight);\n  line-height: var(--form-description-line-height);\n}\n\n@mixin error-description-styles() {\n  @include description-styles();\n\n  color: var(--components-form-text-description-error);\n}\n\n@mixin text-container-styles() {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex: 1 0 0;\n}\n\n@mixin input-container-styles() {\n  position: relative;\n  color: var(--nv-fieldcheckbox-color-checked);\n\n  input[type='checkbox'][readonly] {\n    // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n    opacity: 0.5;\n  }\n\n  &:has(input[type='checkbox']:disabled:not([readonly])) {\n    color: var(--nv-fieldcheckbox-color-disabled);\n  }\n}\n\n@mixin input-styles() {\n  appearance: none;\n  position: relative;\n  display: flex;\n  width: var(--form-checkbox-size);\n  height: var(--form-checkbox-size);\n  flex-direction: column;\n  align-items: flex-start;\n  border-radius: var(--form-checkbox-radius);\n  border-width: var(--form-checkbox-border-width);\n  border-style: solid;\n  border-color: var(--nv-fieldcheckbox-border-default);\n  background: var(--nv-fieldcheckbox-background-default);\n\n  &:hover {\n    border-color: var(--nv-fieldcheckbox-border-hover);\n  }\n\n  &:focus {\n    border-color: var(--nv-fieldcheckbox-border-focus);\n  }\n\n  @include focus-ring(var(--nv-fieldcheckbox-outline-color));\n\n  &:checked,\n  &:indeterminate {\n    background: var(--nv-fieldcheckbox-background-checked);\n    border-color: var(--nv-fieldcheckbox-background-checked);\n  }\n\n  &:disabled:not([readonly]) {\n    background: var(--nv-fieldcheckbox-background-disabled);\n    border-color: var(--nv-fieldcheckbox-border-default);\n  }\n\n  &[readonly] {\n    // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n    opacity: 0.5;\n  }\n}\n\n@mixin icon-styles() {\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  svg {\n    width: var(--form-checkbox-icon-size);\n    height: var(--form-checkbox-icon-size);\n    fill: none;\n    stroke: currentcolor;\n    stroke-width: var(--form-checkbox-icon-stroke);\n    flex-shrink: 0;\n  }\n}\n\nnv-fieldcheckbox {\n  @include fieldcheckbox-variables();\n  @include root-styles();\n\n  &.error > .input-container {\n    @include fieldcheckbox-error-variables();\n  }\n\n  &.label-placement-before {\n    @include label-before-styles();\n  }\n\n  &[disabled]:not([disabled='false']) {\n    // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n    opacity: 0.5;\n  }\n\n  > .input-container {\n    @include input-container-styles();\n\n    input[type='checkbox'] {\n      @include input-styles();\n    }\n\n    .icon {\n      @include icon-styles();\n    }\n  }\n\n  > .text-container {\n    @include text-container-styles();\n\n    label {\n      @include label-styles();\n      &.visually-hidden {\n        @include utils.visually-hidden();\n      }\n    }\n\n    .description {\n      @include description-styles();\n    }\n\n    .error-description {\n      @include error-description-styles();\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Watch,\n  Event,\n  EventEmitter,\n  Listen,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { type LabelPlacement } from '../../utils/constants';\n\n/**\n * @slot default - Next to the label and description.\n * @slot main - Replaces the label and description.\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 * @slot checked-icon - Content to be placed as the checked icon, will override the checkedIcon prop.\n * @slot indeterminate-icon - Content to be placed as the indeterminate icon, will override the indeterminateIcon prop.\n */\n@Component({\n  tag: 'nv-fieldcheckbox',\n  styleUrl: 'nv-fieldcheckbox.scss',\n  formAssociated: true,\n  shadow: false,\n})\nexport class NvFieldcheckbox {\n  @Element() el!: HTMLNvFieldcheckboxElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Message define a 'hint ' message for the Field.\n   * @deprecated Use `description` instead.\n   * */\n  @Prop({ reflect: true })\n  readonly message?: string;\n\n  /**\n   * The text for the validation message.\n   * @deprecated Use `errorDescription` and set the error prop instead.\n   * */\n  @Prop({ reflect: true })\n  readonly validation?: string;\n\n  /**\n   * When true, the label will be placed before the checkbox.\n   * @deprecated Use `labelPlacement = end` instead.\n   * */\n  @Prop({ reflect: true })\n  readonly labelBefore?: boolean = false;\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the radio button’s input element and the for attribute of\n   * the associated label. If no ID is provided, a random one will be\n   * automatically generated to ensure unique identification, facilitating\n   * proper label association and accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * The name attribute for the checkbox input, used to reference the form data\n   * after submission.\n   */\n  @Prop({ reflect: true })\n  readonly name?: string;\n\n  /**\n   * The value attribute of the checkbox input, representing the value sent on\n   * form submission when the checkbox is checked. When the form is submitted,\n   * the data will consist of a name=value pair.\n   */\n  @Prop({ reflect: true })\n  readonly value?: string;\n\n  /**\n   * The label displayed next to the checkbox.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string;\n\n  /**\n   * Determines the position of the label relative to the checkbox, either\n   * 'start' (before) or 'end' (after).\n   */\n  @Prop({ reflect: true, mutable: true })\n  labelPlacement: `${LabelPlacement}`;\n\n  /**\n   * Hides the label visually while still keeping it available for screen\n   * readers.\n   */\n  @Prop({ reflect: true })\n  readonly hideLabel: boolean = false;\n\n  /**\n   * A description providing additional context or information about the\n   * checkbox.\n   */\n  @Prop({ reflect: true, mutable: true })\n  description?: string;\n\n  /**\n   * Signals that there is an error associated with the checkbox, which can\n   * trigger visual cues.\n   * @validator error\n   */\n  @Prop({ reflect: true, mutable: true })\n  error: boolean = false;\n\n  /**\n   * A description that appears when there is an error related to the checkbox.\n   * @validator message\n   */\n  @Prop({ reflect: true, mutable: true })\n  errorDescription?: string;\n\n  /**\n   * Indicates whether the checkbox is checked or not.\n   */\n  @Prop({ reflect: true, mutable: true })\n  checked: boolean = false;\n\n  /**\n   * Indicates whether the checkbox is in an indeterminate state, typically used\n   * for hierarchical checkboxes.\n   */\n  @Prop({ reflect: true, mutable: true })\n  indeterminate: boolean = false;\n\n  /**\n   * Disables the checkbox, preventing user interaction.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Sets the checkbox to read-only, preventing user changes but still allowing\n   * focus and selection of text.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks the checkbox as required, indicating that it must be checked for\n   * form submission.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Applies focus to the input field as soon as the component is mounted. This\n   * is equivalent to setting the native autofocus attribute on an <input>\n   * element.\n   */\n  @Prop({ reflect: true })\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  readonly autofocus: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emits when the checked state changes.\n   * @bind checked\n   */\n  @Event()\n  checkedChanged: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region LISTENERS\n\n  /**\n   * Listens for the change event on the checkbox input element and updates the\n   * checked state.\n   * @param {Event} event - The change event.\n   */\n  @Listen('change')\n  handleChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n\n    if (target.type === 'checkbox' && target.id === this.inputId) {\n      if (this.readonly || this.disabled) {\n        event.preventDefault();\n        return;\n      }\n\n      if (this.indeterminate) {\n        this.indeterminate = false;\n      }\n\n      this.checked = target.checked;\n    }\n  }\n\n  //#endregion LISTENERS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Watches for changes to the checked state and emits the new value.\n   * @param {boolean} checked - The new value of the checked state.\n   */\n  @Watch('checked')\n  onCheckedChanged(checked: boolean) {\n    this.checkedChanged.emit(checked);\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillRender() {\n    if (this.message) {\n      this.description = this.message;\n    }\n\n    if (this.labelBefore) {\n      this.labelPlacement = 'before';\n    }\n\n    if (this.validation) {\n      this.errorDescription = this.validation;\n      this.error = true;\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={clsx(\n          this.labelPlacement === 'before' && 'label-placement-before',\n          this.error && 'error',\n        )}\n      >\n        <div class=\"input-container\">\n          <input\n            type=\"checkbox\"\n            id={this.inputId}\n            name={this.name}\n            autofocus={this.autofocus}\n            autocomplete=\"off\"\n            value={this.value}\n            checked={Boolean(this.checked)}\n            disabled={this.disabled || this.readonly}\n            readonly={this.readonly && !this.required}\n            required={this.required}\n            indeterminate={this.indeterminate}\n            ref={el => {\n              if (el) {\n                el.indeterminate = this.indeterminate;\n              }\n            }}\n          />\n          <span class=\"icon\">\n            {this.checked && !this.indeterminate && (\n              <slot name=\"checked-icon\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  width=\"14\"\n                  height=\"14\"\n                  viewBox=\"0 0 14 14\"\n                  fill=\"none\"\n                >\n                  <path\n                    d=\"M11.6667 3.5L5.25004 9.91667L2.33337 7\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </slot>\n            )}\n            {this.indeterminate && (\n              <slot name=\"indeterminate-icon\">\n                <svg\n                  class=\"indeterminate-svg\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 14 14\"\n                  fill=\"none\"\n                >\n                  <path\n                    d=\"M2.9165 7H11.0832\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </slot>\n            )}\n          </span>\n        </div>\n\n        <slot></slot>\n\n        <div class=\"text-container\">\n          <slot name=\"main\">\n            {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n              <label\n                htmlFor={this.inputId}\n                class={clsx(this.hideLabel && 'visually-hidden')}\n              >\n                <slot name=\"label\">{this.label}</slot>\n              </label>\n            )}\n\n            {(this.description ||\n              this.el.querySelector('[slot=\"description\"]')) && (\n              <div class=\"description\">\n                <slot name=\"description\">{this.description}</slot>\n              </div>\n            )}\n          </slot>\n\n          {(this.errorDescription ||\n            this.el.querySelector('[slot=\"error-description\"]')) && (\n            <div hidden={!this.error} class=\"error-description\">\n              <slot name=\"error-description\">{this.errorDescription}</slot>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["nvFieldcheckboxCss","NvFieldcheckboxStyle0","NvFieldcheckbox","constructor","hostRef","this","labelBefore","inputId","uuidv4","hideLabel","error","checked","indeterminate","disabled","readonly","required","autofocus","handleChange","event","target","type","id","preventDefault","onCheckedChanged","checkedChanged","emit","componentWillRender","message","description","labelPlacement","validation","errorDescription","render","h","Host","key","class","clsx","name","autocomplete","value","Boolean","ref","el","xmlns","width","height","viewBox","fill","d","label","querySelector","htmlFor","hidden"],"sources":["src/components/nv-fieldcheckbox/nv-fieldcheckbox.scss?tag=nv-fieldcheckbox","src/components/nv-fieldcheckbox/nv-fieldcheckbox.tsx"],"sourcesContent":["@use \"../../styles/utils\" as utils;\n@import '../../styles/focus-ring';\n\n@mixin fieldcheckbox-variables() {\n  --nv-fieldcheckbox-border-default: var(\n    --components-form-field-border-default\n  );\n  --nv-fieldcheckbox-border-hover: var(--components-form-field-border-hover);\n  --nv-fieldcheckbox-border-focus: var(--components-form-field-border-default);\n  --nv-fieldcheckbox-background-default: var(\n    --components-form-field-background-default\n  );\n  --nv-fieldcheckbox-background-checked: var(\n    --components-form-field-background-checked\n  );\n  --nv-fieldcheckbox-background-disabled: var(\n    --components-form-field-background-disabled\n  );\n  --nv-fieldcheckbox-focus-box-shadow: var(--color-focus-brand);\n  --nv-fieldcheckbox-color-checked: var(\n    --components-form-shape-foreground-default\n  );\n  --nv-fieldcheckbox-color-disabled: var(\n    --components-form-shape-foreground-disabled\n  );\n  --nv-fieldcheckbox-outline-color: var(--color-focus-brand);\n}\n\n@mixin fieldcheckbox-error-variables() {\n  --nv-fieldcheckbox-border-default: var(--components-form-field-border-error);\n  --nv-fieldcheckbox-border-hover: var(--nv-fieldcheckbox-border-default);\n  --nv-fieldcheckbox-border-focus: var(--components-form-field-border-error);\n  --nv-fieldcheckbox-focus-box-shadow: var(--color-focus-destructive);\n  --nv-fieldcheckbox-color-disabled: var(\n    --components-form-shape-foreground-disabled-error\n  );\n  --nv-fieldcheckbox-background-checked: var(\n    --components-form-field-background-error\n  );\n  --nv-fieldcheckbox-outline-color: var(--color-focus-destructive);\n}\n\n@mixin root-styles() {\n  display: inline-flex;\n  align-items: flex-start;\n  gap: var(--form-gap-x);\n  position: relative;\n\n  &:not([disabled], [readonly]) {\n    input,\n    label {\n      cursor: pointer;\n    }\n  }\n}\n\n@mixin label-before-styles() {\n  flex-direction: row-reverse;\n}\n\n@mixin label-styles() {\n  align-self: stretch;\n  color: var(--components-form-text-label-default);\n  font-family: 'TT Norms Pro', sans-serif;\n  font-size: var(--form-label-font-size);\n  font-style: normal;\n  font-weight: var(--form-label-font-weight);\n  line-height: var(--form-label-line-height);\n}\n\n@mixin description-styles() {\n  align-self: stretch;\n  color: var(--components-form-text-description-default);\n  font-family: 'TT Norms Pro', sans-serif;\n  font-size: var(--form-description-font-size);\n  font-style: normal;\n  font-weight: var(--form-description-font-weight);\n  line-height: var(--form-description-line-height);\n}\n\n@mixin error-description-styles() {\n  @include description-styles();\n\n  color: var(--components-form-text-description-error);\n}\n\n@mixin text-container-styles() {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex: 1 0 0;\n}\n\n@mixin input-container-styles() {\n  position: relative;\n  color: var(--nv-fieldcheckbox-color-checked);\n\n  input[type='checkbox'][readonly] {\n    // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n    opacity: 0.5;\n  }\n\n  &:has(input[type='checkbox']:disabled:not([readonly])) {\n    color: var(--nv-fieldcheckbox-color-disabled);\n  }\n}\n\n@mixin input-styles() {\n  appearance: none;\n  position: relative;\n  display: flex;\n  width: var(--form-checkbox-size);\n  height: var(--form-checkbox-size);\n  flex-direction: column;\n  align-items: flex-start;\n  border-radius: var(--form-checkbox-radius);\n  border-width: var(--form-checkbox-border-width);\n  border-style: solid;\n  border-color: var(--nv-fieldcheckbox-border-default);\n  background: var(--nv-fieldcheckbox-background-default);\n\n  &:hover {\n    border-color: var(--nv-fieldcheckbox-border-hover);\n  }\n\n  &:focus {\n    border-color: var(--nv-fieldcheckbox-border-focus);\n  }\n\n  @include focus-ring(var(--nv-fieldcheckbox-outline-color));\n\n  &:checked,\n  &:indeterminate {\n    background: var(--nv-fieldcheckbox-background-checked);\n    border-color: var(--nv-fieldcheckbox-background-checked);\n  }\n\n  &:disabled:not([readonly]) {\n    background: var(--nv-fieldcheckbox-background-disabled);\n    border-color: var(--nv-fieldcheckbox-border-default);\n  }\n\n  &[readonly] {\n    // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n    opacity: 0.5;\n  }\n}\n\n@mixin icon-styles() {\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  svg {\n    width: var(--form-checkbox-icon-size);\n    height: var(--form-checkbox-icon-size);\n    fill: none;\n    stroke: currentcolor;\n    stroke-width: var(--form-checkbox-icon-stroke);\n    flex-shrink: 0;\n  }\n}\n\nnv-fieldcheckbox {\n  @include fieldcheckbox-variables();\n  @include root-styles();\n\n  &.error > .input-container {\n    @include fieldcheckbox-error-variables();\n  }\n\n  &.label-placement-before {\n    @include label-before-styles();\n  }\n\n  &[disabled]:not([disabled='false']) {\n    // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n    opacity: 0.5;\n  }\n\n  > .input-container {\n    @include input-container-styles();\n\n    input[type='checkbox'] {\n      @include input-styles();\n    }\n\n    .icon {\n      @include icon-styles();\n    }\n  }\n\n  > .text-container {\n    @include text-container-styles();\n\n    label {\n      @include label-styles();\n      &.visually-hidden {\n        @include utils.visually-hidden();\n      }\n    }\n\n    .description {\n      @include description-styles();\n    }\n\n    .error-description {\n      @include error-description-styles();\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Watch,\n  Event,\n  EventEmitter,\n  Listen,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { type LabelPlacement } from '../../utils/constants';\n\n/**\n * @slot default - Next to the label and description.\n * @slot main - Replaces the label and description.\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 * @slot checked-icon - Content to be placed as the checked icon, will override the checkedIcon prop.\n * @slot indeterminate-icon - Content to be placed as the indeterminate icon, will override the indeterminateIcon prop.\n */\n@Component({\n  tag: 'nv-fieldcheckbox',\n  styleUrl: 'nv-fieldcheckbox.scss',\n  formAssociated: true,\n  shadow: false,\n})\nexport class NvFieldcheckbox {\n  @Element() el!: HTMLNvFieldcheckboxElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Message define a 'hint ' message for the Field.\n   * @deprecated Use `description` instead.\n   * */\n  @Prop({ reflect: true })\n  readonly message?: string;\n\n  /**\n   * The text for the validation message.\n   * @deprecated Use `errorDescription` and set the error prop instead.\n   * */\n  @Prop({ reflect: true })\n  readonly validation?: string;\n\n  /**\n   * When true, the label will be placed before the checkbox.\n   * @deprecated Use `labelPlacement = end` instead.\n   * */\n  @Prop({ reflect: true })\n  readonly labelBefore?: boolean = false;\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the radio button’s input element and the for attribute of\n   * the associated label. If no ID is provided, a random one will be\n   * automatically generated to ensure unique identification, facilitating\n   * proper label association and accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * The name attribute for the checkbox input, used to reference the form data\n   * after submission.\n   */\n  @Prop({ reflect: true })\n  readonly name?: string;\n\n  /**\n   * The value attribute of the checkbox input, representing the value sent on\n   * form submission when the checkbox is checked. When the form is submitted,\n   * the data will consist of a name=value pair.\n   */\n  @Prop({ reflect: true })\n  readonly value?: string;\n\n  /**\n   * The label displayed next to the checkbox.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string;\n\n  /**\n   * Determines the position of the label relative to the checkbox, either\n   * 'start' (before) or 'end' (after).\n   */\n  @Prop({ reflect: true, mutable: true })\n  labelPlacement: `${LabelPlacement}`;\n\n  /**\n   * Hides the label visually while still keeping it available for screen\n   * readers.\n   */\n  @Prop({ reflect: true })\n  readonly hideLabel: boolean = false;\n\n  /**\n   * A description providing additional context or information about the\n   * checkbox.\n   */\n  @Prop({ reflect: true, mutable: true })\n  description?: string;\n\n  /**\n   * Signals that there is an error associated with the checkbox, which can\n   * trigger visual cues.\n   * @validator error\n   */\n  @Prop({ reflect: true, mutable: true })\n  error: boolean = false;\n\n  /**\n   * A description that appears when there is an error related to the checkbox.\n   * @validator message\n   */\n  @Prop({ reflect: true, mutable: true })\n  errorDescription?: string;\n\n  /**\n   * Indicates whether the checkbox is checked or not.\n   */\n  @Prop({ reflect: true, mutable: true })\n  checked: boolean = false;\n\n  /**\n   * Indicates whether the checkbox is in an indeterminate state, typically used\n   * for hierarchical checkboxes.\n   */\n  @Prop({ reflect: true, mutable: true })\n  indeterminate: boolean = false;\n\n  /**\n   * Disables the checkbox, preventing user interaction.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Sets the checkbox to read-only, preventing user changes but still allowing\n   * focus and selection of text.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks the checkbox as required, indicating that it must be checked for\n   * form submission.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Applies focus to the input field as soon as the component is mounted. This\n   * is equivalent to setting the native autofocus attribute on an <input>\n   * element.\n   */\n  @Prop({ reflect: true })\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  readonly autofocus: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emits when the checked state changes.\n   * @bind checked\n   */\n  @Event()\n  checkedChanged: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region LISTENERS\n\n  /**\n   * Listens for the change event on the checkbox input element and updates the\n   * checked state.\n   * @param {Event} event - The change event.\n   */\n  @Listen('change')\n  handleChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n\n    if (target.type === 'checkbox' && target.id === this.inputId) {\n      if (this.readonly || this.disabled) {\n        event.preventDefault();\n        return;\n      }\n\n      if (this.indeterminate) {\n        this.indeterminate = false;\n      }\n\n      this.checked = target.checked;\n    }\n  }\n\n  //#endregion LISTENERS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Watches for changes to the checked state and emits the new value.\n   * @param {boolean} checked - The new value of the checked state.\n   */\n  @Watch('checked')\n  onCheckedChanged(checked: boolean) {\n    this.checkedChanged.emit(checked);\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillRender() {\n    if (this.message) {\n      this.description = this.message;\n    }\n\n    if (this.labelBefore) {\n      this.labelPlacement = 'before';\n    }\n\n    if (this.validation) {\n      this.errorDescription = this.validation;\n      this.error = true;\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={clsx(\n          this.labelPlacement === 'before' && 'label-placement-before',\n          this.error && 'error',\n        )}\n      >\n        <div class=\"input-container\">\n          <input\n            type=\"checkbox\"\n            id={this.inputId}\n            name={this.name}\n            autofocus={this.autofocus}\n            autocomplete=\"off\"\n            value={this.value}\n            checked={Boolean(this.checked)}\n            disabled={this.disabled || this.readonly}\n            readonly={this.readonly && !this.required}\n            required={this.required}\n            indeterminate={this.indeterminate}\n            ref={el => {\n              if (el) {\n                el.indeterminate = this.indeterminate;\n              }\n            }}\n          />\n          <span class=\"icon\">\n            {this.checked && !this.indeterminate && (\n              <slot name=\"checked-icon\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  width=\"14\"\n                  height=\"14\"\n                  viewBox=\"0 0 14 14\"\n                  fill=\"none\"\n                >\n                  <path\n                    d=\"M11.6667 3.5L5.25004 9.91667L2.33337 7\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </slot>\n            )}\n            {this.indeterminate && (\n              <slot name=\"indeterminate-icon\">\n                <svg\n                  class=\"indeterminate-svg\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 14 14\"\n                  fill=\"none\"\n                >\n                  <path\n                    d=\"M2.9165 7H11.0832\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </slot>\n            )}\n          </span>\n        </div>\n\n        <slot></slot>\n\n        <div class=\"text-container\">\n          <slot name=\"main\">\n            {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n              <label\n                htmlFor={this.inputId}\n                class={clsx(this.hideLabel && 'visually-hidden')}\n              >\n                <slot name=\"label\">{this.label}</slot>\n              </label>\n            )}\n\n            {(this.description ||\n              this.el.querySelector('[slot=\"description\"]')) && (\n              <div class=\"description\">\n                <slot name=\"description\">{this.description}</slot>\n              </div>\n            )}\n          </slot>\n\n          {(this.errorDescription ||\n            this.el.querySelector('[slot=\"error-description\"]')) && (\n            <div hidden={!this.error} class=\"error-description\">\n              <slot name=\"error-description\">{this.errorDescription}</slot>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/native/p-234cfa2e.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as a,H as c}from"./p-d0a33e64.js";const s=class{constructor(a){e(this,a);this.repeatTemplate=false}render(){return a(c,{key:"d93cf7234c22d08319d2e4157945ece0b9e5f7b1"},a("slot",{key:"d4530c7f6854773716e7494e0379bc21f446ca53",name:"header"}),a("slot",{key:"60e2933f219f48c0567fd0e01a137a694ae1c1c9",name:"cell"}))}};export{s as nv_datagridcolumn};
+//# sourceMappingURL=p-234cfa2e.entry.js.map

package/dist/native/p-2a3325fb.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as i,F as s,H as o,g as n}from"./p-d0a33e64.js";import{v as r}from"./p-f5ff676c.js";const l='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-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-fieldmultiselect{--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-fieldmultiselect[fluid]:not([fluid=false]){max-width:unset}nv-fieldmultiselect[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-fieldmultiselect[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-fieldmultiselect[required]:not([required=false]) label::after{content:"*";color:var(--components-form-text-required);font-weight:700}nv-fieldmultiselect 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-fieldmultiselect nv-popover{width:100%;display:block}nv-fieldmultiselect nv-popover [data-scope=popover]{width:100%;padding:var(--list-dropdown-padding);border-radius:var(--list-dropdown-radius);background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border)}nv-fieldmultiselect nv-popover [slot=content]{gap:var(--list-dropdown-gap-y);display:flex;flex-direction:column}nv-fieldmultiselect nv-popover hr{color:var(--components-list-dropdown-separator)}nv-fieldmultiselect nv-popover div[slot=content]{max-height:calc(90vh - var(--list-dropdown-padding) * 2);overflow-y:auto;position:relative}nv-fieldmultiselect nv-popover div[slot=content]::-webkit-scrollbar{width:6px;height:6px}nv-fieldmultiselect nv-popover div[slot=content]::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-fieldmultiselect nv-popover div[slot=content]::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-fieldmultiselect .input-wrapper-multiselect{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fieldmultiselect .input-container-multiselect{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;position:relative;width:100%;min-height:40px}nv-fieldmultiselect .input-container-multiselect:hover{border-color:var(--nv-field-border-hover)}nv-fieldmultiselect .input-container-multiselect:focus-within,nv-fieldmultiselect .input-container-multiselect:focus-within:hover,nv-fieldmultiselect .input-container-multiselect:focus,nv-fieldmultiselect .input-container-multiselect: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-fieldmultiselect .input-container-multiselect:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldmultiselect .input-container-multiselect:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldmultiselect .input-container-multiselect>nv-badge{margin-left:var(--form-field-padding-x)}nv-fieldmultiselect .input-container-multiselect input,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text{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%;flex-grow:1;margin:0;min-height:100%;box-sizing:border-box}nv-fieldmultiselect .input-container-multiselect input:focus,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text:focus{outline:none}nv-fieldmultiselect .input-container-multiselect input::placeholder,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text::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-fieldmultiselect .input-container-multiselect input[type=password]::-ms-clear,nv-fieldmultiselect .input-container-multiselect input[type=password]::-ms-reveal,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text[type=password]::-ms-clear,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldmultiselect .input-container-multiselect>nv-iconbutton{border:0px;border-radius:0px}nv-fieldmultiselect .input-container-multiselect>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldmultiselect .input-container-multiselect nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldmultiselect .non-filterable-text{display:block;border-radius:var(--form-field-radius);background-color:var(--nv-field-background);color:var(--components-form-field-content-text);font-size:var(--form-field-font-size);font-weight:500;line-height:var(--form-field-line-height);box-sizing:border-box;cursor:pointer;height:100%;min-height:40px}nv-fieldmultiselect .non-filterable-text span{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis}nv-fieldmultiselect .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-fieldmultiselect .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)}.no-results-message{cursor:not-allowed;background-color:unset;color:var(--components-menu-contextual-item-content-disabled);padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x)}.multiselect-divider{display:block;width:100%;height:1px;background-color:var(--components-list-dropdown-separator);margin:var(--list-dropdown-item-padding-y) 0;border:0}.select-all-container{position:sticky;top:0;background-color:var(--components-list-dropdown-background);border-bottom:1px solid var(--components-list-dropdown-separator);padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);z-index:10;margin-bottom:0}.select-all-container .select-all-header{display:flex;align-items:center;gap:var(--form-field-gap)}.select-all-container .select-all-header nv-fieldcheckbox{flex:1;margin:0}.select-all-container .select-all-header nv-iconbutton,.select-all-container .select-all-header nv-button{flex-shrink:0;margin-left:auto}.select-all-container .select-all-header nv-button{justify-content:center}';const a=l;const c=class{constructor(n){e(this,n);this.valueChanged=t(this,"valueChanged",7);this.filterTextChanged=t(this,"filterTextChanged",7);this.inputId=r();this.autocomplete="off";this.required=false;this.readonly=false;this.disabled=false;this.error=false;this.maxHeight="";this.open=false;this.fluid=false;this.value=[];this.filterable=false;this.emptyResult="No results found";this.debounceDelay=300;this.autofocus=false;this.badgeLabel="";this.filterText="";this.enableSelectAll=false;this.selectAllLabel="Select/deselect all";this.deselectAllLabel="Select/deselect all";this.sortedOptions=[];this.isHandlingEscape=false;this.hasFilterResults=true;this.isSelectAllSectionVisible=true;this.preventBlurClose=false;this.handleBadgeCloseOptions=()=>{console.info("handleBadgeCloseOptions:",this.value);this.value=[];this.valueChanged.emit(this.value);const e=Array.from(this.el.querySelectorAll("nv-fielddropdownitemcheck"));e.forEach((e=>{e.checked=false;e.style.display=""}));this.options=this.options.filter((e=>!e.isDivider));this.reorderOptionsContent()};this.handleBadgeCloseSlots=()=>{console.info("handleBadgeCloseSlots:",this.value);this.value=[];this.valueChanged.emit(this.value);const e=Array.from(this.el.querySelectorAll("nv-fielddropdownitemcheck"));e.forEach((e=>{e.checked=false;e.style.display=""}));requestAnimationFrame((()=>{this.reorderSlotContent()}))};this.handlePopoverClose=()=>{if(this.isHandlingEscape){return}if(this.filterable){this.resetFilter()}};this.clearFilterText=()=>{this.filterText="";this.filterTextChanged.emit("");this.resetFilter();this.hasFilterResults=true};this.handleInputBlurOptions=()=>{setTimeout((()=>{if(this.preventBlurClose){this.preventBlurClose=false;return}if(!this.el.contains(document.activeElement)){this.open=false;if(this.filterable){this.clearFilterText()}}}),150)};this.handleInputContainerClickOptions=e=>{if(this.disabled||this.readonly){return}const t=e.target;if(t.tagName==="P"||t.tagName==="SPAN"){this.open=true;const e=this.el.querySelector(".input-container");if(e){e.classList.add("focus-within");const t=()=>{e.classList.remove("focus-within")};this.popoverElement.addEventListener("hide",t)}}};this.handleInputContainerClickSlots=e=>{if(this.disabled||this.readonly){return}const t=e.target;if(t.tagName==="P"||t.tagName==="SPAN"){this.open=true;const e=this.el.querySelector(".input-container");if(e){e.classList.add("focus-within");const t=()=>{e.classList.remove("focus-within")};this.popoverElement.addEventListener("hide",t)}}};this.handleInputOptions=e=>{if(!this.filterable)return;if(this.disabled||this.readonly){return}const t=e.target;this.filterText=t.value;this.filterTextChanged.emit(this.filterText);if(this.debounceTimer){window.clearTimeout(this.debounceTimer)}this.debounceTimer=window.setTimeout((()=>{this.filterItemsOption()}),this.debounceDelay)};this.handleInputSlots=e=>{if(!this.filterable)return;if(this.disabled||this.readonly)return;const t=e.target;this.filterText=t.value;this.filterTextChanged.emit(this.filterText);if(this.debounceTimer){window.clearTimeout(this.debounceTimer)}this.debounceTimer=window.setTimeout((()=>{this.filterSlotsItems()}),this.debounceDelay)};this.handleInputFocusOptions=()=>{if(this.disabled||this.readonly){return}this.open=true};this.handleInputFocusSlots=()=>{if(this.disabled||this.readonly){return}this.open=true};this.handleInputBlurSlots=()=>{setTimeout((()=>{if(!this.el.contains(document.activeElement)){this.open=false;if(this.filterable){this.clearFilterText()}}}),150)};this.togglePopoverOptions=()=>{if(this.disabled||this.readonly){return}this.open=!this.open};this.togglePopoverSlots=()=>{if(this.disabled||this.readonly){return}this.open=!this.open};this.toggleSelectAllOptions=e=>{if(!this.options)return;const t=this.getVisibleEnabledOptionItems();console.info("[SelectAll][Options] toggleSelectAllOptions called. selectAll:",e,"visibleOptionValues:",t,"Current value:",this.value);if(e){this.value=[...new Set([...this.value,...t])]}else{this.value=this.value.filter((e=>!t.includes(e)))}console.info("[SelectAll][Options] New value after toggle:",this.value);this.valueChanged.emit(this.value);this.syncChildComponents();this.reorderOptionsContent()};this.toggleSelectAllSlots=e=>{if(this.options)return;const t=this.getVisibleEnabledSlotItems();console.info("[SelectAll][Slots] toggleSelectAllSlots called. selectAll:",e,"visible slot items:",t.map((e=>e.getAttribute("value")||e.getAttribute("label"))),"Current value:",this.value);if(e){const e=t.map((e=>e.getAttribute("value")||e.getAttribute("label")||"")).filter((e=>e!==""));this.value=[...new Set([...this.value,...e])]}else{const e=t.map((e=>e.getAttribute("value")||e.getAttribute("label")||"")).filter((e=>e!==""));this.value=this.value.filter((t=>!e.includes(t)))}console.info("[SelectAll][Slots] New value after toggle:",this.value);this.valueChanged.emit(this.value);requestAnimationFrame((()=>{this.syncChildComponents();this.reorderSlotContent()}))};this.handleSelectAllCheckboxOptionsClick=e=>{e.stopPropagation();e.preventDefault();console.info("[handleSelectAllCheckboxOptionsClick] event:",e);const t=this.getSelectAllCheckboxStateOptions();console.info("[SelectAll][Options] Checkbox clicked. Current state:",t,"Current value:",this.value);const i=t==="unchecked"||t==="indeterminate";console.info("[SelectAll][Options] shouldSelectAll:",i);this.toggleSelectAllOptions(i)};this.handleSelectAllCheckboxSlotsClick=e=>{e.stopPropagation();e.preventDefault();console.info("[handleSelectAllCheckboxSlotsClick] event:",e);const t=this.getSelectAllCheckboxStateSlots();console.info("[SelectAll][Slots] Checkbox clicked. Current state:",t,"Current value:",this.value);const i=t==="unchecked"||t==="indeterminate";console.info("[SelectAll][Slots] shouldSelectAll:",i);this.toggleSelectAllSlots(i)};this.renderOptionsMode=()=>i(o,{"aria-label":this.label},(this.label||this.el.querySelector('[slot="label"]'))&&i("label",{htmlFor:this.inputId},i("slot",{name:"label"},this.label)),i("nv-popover",{ref:e=>this.popoverElement=e,triggerMode:"controlled",placement:"bottom-start",open:this.open},i("div",{class:"input-wrapper-multiselect",slot:"trigger"},i("slot",{name:"before-input"}),i("div",{class:"input-container-multiselect"},i("slot",{name:"leading-input"}),this.value.length>0&&i("nv-badge",{slot:"leading-input","prevent-auto-close":true,color:"10",dismissible:this.value.length>0,label:`${this.value.length} ${this.badgeLabel}`,"aria-label":`Clear all ${this.value.length} ${this.badgeLabel} items`,onCloseClicked:this.handleBadgeCloseOptions}),this.filterable||this.disabled||this.readonly?i("input",{type:"text",id:this.inputId,ref:e=>this.inputElement=e,autofocus:this.autofocus,autocomplete:this.autocomplete,placeholder:this.placeholder,name:this.name,value:this.filterText,required:this.required,disabled:this.disabled,readOnly:this.readonly,onInput:this.handleInputOptions,onFocus:this.handleInputFocusOptions,onBlur:this.handleInputBlurOptions,onKeyDown:this.handleKeyDown,"data-scope":"focusable","aria-label":this.label,"aria-controls":`${this.inputId}-listbox`}):i(s,null,i("input",{id:this.inputId,type:"text",style:{position:"absolute",opacity:"0",width:"0",height:"0",pointerEvents:"none"},tabIndex:-1,"aria-hidden":"true",autoComplete:this.autocomplete,name:this.name,onFocus:this.handleInputFocusOptions}),i("p",{id:this.inputId,class:"non-filterable-text",onClick:this.handleInputContainerClickOptions,tabIndex:0,onKeyDown:this.handleKeyDown,onFocus:this.handleInputFocusOptions,"aria-label":this.label,"aria-controls":`${this.inputId}-listbox`,"data-scope":"focusable",role:"button"},i("span",null,this.placeholder))),this.error&&i("nv-icon",{name:"alert-circle",class:"validation",size:"md"}),this.filterable&&this.filterText.length>0&&i("nv-iconbutton",{"data-scope":"clear-filter",name:"x",size:"md",emphasis:"lower","aria-label":"Clear filter text",tabindex:"-1",title:"Clear filter text",onMouseDown:()=>{this.preventBlurClose=true},onClick:this.clearFilterText}),i("nv-iconbutton",{"data-scope":"toggle-dropdown",name:this.open?"chevron-top":"chevron-down",size:"md",emphasis:"lower","aria-label":this.open?"Hide dropdown":"Show dropdown",title:this.open?"Hide dropdown":"Show dropdown",onMouseDown:()=>{this.preventBlurClose=true},onClick:this.togglePopoverOptions})),i("slot",{name:"after-input"})),i("div",{id:`${this.inputId}-listbox`,slot:"content",style:this.maxHeight?{maxHeight:this.maxHeight}:{}},this.shouldShowToggleAllOptionsButton()&&i("div",{class:"select-all-container"},i("div",{class:"select-all-header"},this.isSelectAllSectionVisible&&i("nv-fieldcheckbox",{checked:this.getSelectAllCheckboxStateOptions()==="checked",indeterminate:this.getSelectAllCheckboxStateOptions()==="indeterminate",label:this.getSelectAllCheckboxStateOptions()==="unchecked"?this.selectAllLabel:this.deselectAllLabel,onMouseDown:()=>{this.preventBlurClose=true},onClick:this.handleSelectAllCheckboxOptionsClick}))),i("ul",{role:"listbox","aria-multiselectable":"true"},this.options.map((e=>i("nv-fielddropdownitemcheck",{role:"option",label:e.label,description:e.description,value:e.value,checked:this.value.includes(e.value),disabled:e.disabled})))))),this.renderDescriptions());this.renderSlotsMode=()=>i(o,{"aria-label":this.label},(this.label||this.el.querySelector('[slot="label"]'))&&i("label",{htmlFor:this.inputId},i("slot",{name:"label"},this.label)),i("nv-popover",{ref:e=>this.popoverElement=e,triggerMode:"controlled",placement:"bottom-start",open:this.open},i("div",{class:"input-wrapper-multiselect",slot:"trigger"},i("slot",{name:"before-input"}),i("div",{class:"input-container-multiselect",onClick:this.handleInputContainerClickSlots},i("slot",{name:"leading-input"}),this.value.length>0&&i("nv-badge",{slot:"leading-input","prevent-auto-close":true,color:"10",dismissible:this.value.length>0,label:`${this.value.length} ${this.badgeLabel}`,"aria-label":`Clear all ${this.value.length} ${this.badgeLabel} items`,onCloseClicked:this.handleBadgeCloseSlots}),this.filterable||this.disabled||this.readonly?i("input",{id:this.inputId,ref:e=>this.inputElement=e,autocomplete:this.autocomplete,placeholder:this.placeholder,name:this.name,value:this.filterText,required:this.required,disabled:this.disabled,readOnly:this.readonly,onInput:this.handleInputSlots,onFocus:this.handleInputFocusSlots,onBlur:this.handleInputBlurSlots,onKeyDown:this.handleKeyDown,"data-scope":"focusable","aria-label":this.label,"aria-controls":`${this.inputId}-listbox`}):i(s,null,i("input",{id:this.inputId,type:"text",style:{position:"absolute",opacity:"0",width:"0",height:"0",pointerEvents:"none"},tabIndex:-1,"aria-hidden":"true",autoComplete:this.autocomplete,name:this.name,onFocus:this.handleInputFocusSlots}),i("p",{id:this.inputId,class:"non-filterable-text","aria-label":this.label,onClick:this.handleInputContainerClickSlots,tabIndex:0,onKeyDown:this.handleKeyDown,onFocus:this.handleInputFocusSlots,"aria-controls":`${this.inputId}-listbox`,"data-scope":"focusable",role:"button"},i("span",null,this.placeholder))),this.error&&i("nv-icon",{name:"alert-circle",class:"validation",size:"md"}),this.filterable&&this.filterText.length>0&&i("nv-iconbutton",{name:"x",size:"md",emphasis:"lower",tabindex:"-1",onMouseDown:()=>{this.preventBlurClose=true},onClick:this.clearFilterText,"aria-label":"Clear filter text"}),i("nv-iconbutton",{"data-scope":"toggle-dropdown",name:this.open?"chevron-top":"chevron-down",size:"md",emphasis:"lower","aria-label":this.open?"Hide dropdown":"Show dropdown",title:this.open?"Hide dropdown":"Show dropdown",onMouseDown:()=>{this.preventBlurClose=true},onClick:this.togglePopoverSlots})),i("slot",{name:"after-input"})),i("div",{id:`${this.inputId}-listbox`,slot:"content",style:this.maxHeight?{maxHeight:this.maxHeight}:{}},this.shouldShowToggleAllSlotButton()&&i("div",{class:"select-all-container"},i("div",{class:"select-all-header"},this.isSelectAllSectionVisible&&i("nv-fieldcheckbox",{checked:this.getSelectAllCheckboxStateSlots()==="checked",indeterminate:this.getSelectAllCheckboxStateSlots()==="indeterminate",label:this.getSelectAllCheckboxStateSlots()==="unchecked"?this.selectAllLabel:this.deselectAllLabel,onMouseDown:()=>{this.preventBlurClose=true},onClick:this.handleSelectAllCheckboxSlotsClick}))),i("slot",{name:"content"}))),this.renderDescriptions())}handleOptionsChange(e){console.info("[Watch:options] newValue:",e);console.info("[Watch:options] current value before update:",this.value);if(!e)return;if(this.value===undefined||this.value.length===0){this.value=e.filter((e=>e.checked)).map((e=>e.value));console.info("[Watch:options] updated value from checked options:",this.value)}else{e.forEach((e=>{e.checked=this.value.includes(e.value)}));console.info("[Watch:options] options checked state synced to value:",e)}this.reorderOptionsContent()}watchValueHandler(){console.info("[Watch:value] Value changed:",this.value);if(this.el&&this.el.isConnected){this.syncChildComponents()}if(this.options){this.options.forEach((e=>{e.checked=this.value.includes(e.value)}))}}handleOpenChanged(e){e.stopPropagation();this.open=e.detail;if(this.open){if(this.filterText){this.filterItems()}}else{this.handlePopoverClose()}if(this.options){this.reorderOptionsContent()}else{this.reorderSlotContent()}}handleItemChecked(e){if(this.disabled||this.readonly){return}const{value:t,checked:i}=e.detail;console.info("[Event:itemChecked] value:",t,"checked:",i,"current value:",this.value);if(t!==undefined&&t!==null){const e=[...this.value];const s=e.indexOf(t);if(i&&s===-1){e.push(t)}else if(!i&&s>-1){e.splice(s,1)}console.info("[Event:itemChecked] newValue after update:",e);this.value=e;this.valueChanged.emit(this.value);this.syncChildComponents();if(this.filterable&&this.inputElement){this.inputElement.value=this.filterText}}else{console.warn("[Event:itemChecked] Received itemChecked event with undefined or null value")}}handleSlotChange(e){const t=e.target;if(t&&t.name==="content"){requestAnimationFrame((()=>{this.reorderSlotContent()}))}}connectedCallback(){console.info("[Lifecycle] connectedCallback - value:",this.value);document.addEventListener("click",this.handleClickOutside.bind(this))}componentWillLoad(){var e;console.info("[Lifecycle] componentWillLoad - value:",this.value,"options:",this.options);if(this.options){this.handleOptionsChange(this.options)}if(!this.options){this.initializeValueFromSlots();Promise.resolve().then((()=>{this.syncChildComponents();requestAnimationFrame((()=>{this.reorderSlotContent()}))}))}if(this.options){this.sortedOptions=[...(e=this.options)!==null&&e!==void 0?e:[]]}if(!this.filterText){this.resetFilter()}this.hasFilterResults=true}componentDidLoad(){console.info("[Lifecycle] componentDidLoad - value:",this.value,"options:",this.options);if(this.options){this.handleOptionsChange(this.options)}this.syncChildComponents();if(!this.options){this.initializeValueFromSlots();this.syncChildComponents()}}disconnectedCallback(){console.info("[Lifecycle] disconnectedCallback - value:",this.value);document.removeEventListener("click",this.handleClickOutside.bind(this))}async getFilterText(){return this.filterText}async resetFilter(){const e=Array.from(this.el.querySelectorAll("nv-fielddropdownitemcheck"));e.forEach((e=>{e.style.display=""}));const t=this.el.querySelector("ul");if(t){const i=t.querySelector("[data-empty]");if(i)i.remove();const s=e.filter((e=>this.value.includes(e.getAttribute("value")||"")));const o=e.filter((e=>!this.value.includes(e.getAttribute("value")||"")));if(s.length>0){this.manageDivider(t,s,o)}}this.hasFilterResults=true}async getSelectedValues(){console.info("getSelectedValues:",this.value);return this.value}async selectAll(){if(this.disabled||this.readonly)return;if(this.options){this.toggleSelectAllOptions(true)}else{this.toggleSelectAllSlots(true)}}async deselectAll(){if(this.disabled||this.readonly)return;if(this.options){this.toggleSelectAllOptions(false)}else{this.toggleSelectAllSlots(false)}}async toggleSelectAll(){if(this.disabled||this.readonly)return;const e=this.options?this.getSelectAllCheckboxStateOptions():this.getSelectAllCheckboxStateSlots();const t=e==="unchecked"||e==="indeterminate";if(this.options){this.toggleSelectAllOptions(t)}else{this.toggleSelectAllSlots(t)}}reorderSlotContent(){if(this.options)return;const e=this.el.querySelector("ul");if(!e)return;e.querySelectorAll("hr.multiselect-divider").forEach((e=>e.remove()));const t=Array.from(this.el.querySelectorAll("nv-fielddropdownitemcheck")).filter((e=>e.style.display!=="none"));const i=e.querySelector("[data-empty]");if(i){return}const s=t.filter((e=>this.value.includes(e.getAttribute("value")||"")));const o=t.filter((e=>!this.value.includes(e.getAttribute("value")||"")));s.forEach((t=>{e.appendChild(t)}));if(s.length>0&&o.length>0){const t=document.createElement("hr");t.className="multiselect-divider";e.appendChild(t)}o.forEach((t=>{e.appendChild(t)}))}reorderOptionsContent(){const e=this.el.querySelector("ul");if(!e)return;const t=Array.from(e.querySelectorAll("nv-fielddropdownitemcheck")).filter((e=>e.style.display!=="none"));const i=t.filter((e=>this.value.includes(e.getAttribute("value")||"")));const s=t.filter((e=>!this.value.includes(e.getAttribute("value")||"")));i.forEach((t=>e.appendChild(t)));s.forEach((t=>e.appendChild(t)));this.manageDivider(e,i,s)}filterItems(){const e=this.el.querySelector("ul");if(!e)return;const t=e.querySelector("[data-empty]");if(t){t.remove()}if(!this.filterText.trim()){if(this.options&&this.options.length>0){const t=Array.from(e.querySelectorAll("nv-fielddropdownitemcheck"));t.forEach((e=>{e.style.display=""}))}else{const e=Array.from(this.el.querySelectorAll("nv-fielddropdownitemcheck"));e.forEach((e=>{e.style.display=""}))}const t=Array.from(e.querySelectorAll("nv-fielddropdownitemcheck"));const i=t.filter((e=>this.value.includes(e.getAttribute("value")||"")));const s=t.filter((e=>!this.value.includes(e.getAttribute("value")||"")));this.manageDivider(e,i,s);return}const i=this.normalizeText(this.filterText);let s=false;if(this.options&&this.options.length>0){const t=Array.from(e.querySelectorAll("nv-fielddropdownitemcheck"));t.forEach((e=>{const t=this.options.find((t=>t.value===e.getAttribute("value")));if(t&&!t.isDivider){const o=this.normalizeText(t.label).includes(i)||this.normalizeText(t.value).includes(i);e.style.display=o?"":"none";if(o)s=true}}));const o=t.filter((e=>e.style.display!=="none"));const n=o.filter((e=>this.value.includes(e.getAttribute("value")||"")));const r=o.filter((e=>!this.value.includes(e.getAttribute("value")||"")));this.manageDivider(e,n,r)}else{const e=Array.from(this.el.querySelectorAll("nv-fielddropdownitemcheck"));e.forEach((e=>{const t=e.getAttribute("label")||"";const o=e.getAttribute("value")||"";const n=e.textContent||"";const r=this.normalizeText(t).includes(i)||this.normalizeText(o).includes(i)||this.normalizeText(n).includes(i);e.style.display=r?"":"none";if(r)s=true}))}if(!s){const t=document.createElement("li");t.setAttribute("data-empty","true");t.textContent=this.emptyResult;t.classList.add("no-results-message");e.appendChild(t)}this.reorderSlotContent()}filterItemsOption(){const e=this.el.querySelector("ul");if(!e)return;const t=this.normalizeText(this.filterText);let i=false;const s=Array.from(e.querySelectorAll("nv-fielddropdownitemcheck"));if(!this.filterText.trim()){this.removeEmptyMessageOption(e);s.forEach((e=>e.style.display=""));this.reorderOptionsContent();this.hasFilterResults=true;return}s.forEach((e=>{const s=e.getAttribute("label")||"";const o=e.getAttribute("value")||"";const n=this.normalizeText(s).includes(t)||this.normalizeText(o).includes(t);e.style.display=n?"":"none";if(n)i=true}));this.hasFilterResults=i;const o=s.filter((e=>e.style.display!=="none"));const n=o.filter((e=>this.value.includes(e.getAttribute("value")||"")));const r=o.filter((e=>!this.value.includes(e.getAttribute("value")||"")));this.manageDivider(e,n,r);if(!i){this.addEmptyMessageOption(e)}else{this.removeEmptyMessageOption(e)}}filterSlotsItems(){if(this.options)return;const e=this.el.querySelector("ul");if(!e)return;const t=e.querySelector("[data-empty]");if(t){t.remove()}if(!this.filterText.trim()){this.resetFilter();this.hasFilterResults=true;return}const i=this.normalizeText(this.filterText);let s=false;const o=Array.from(this.el.querySelectorAll("nv-fielddropdownitemcheck"));o.forEach((e=>{var t;const o=e.getAttribute("label")||"";const n=e.getAttribute("value")||"";const r=((t=e.textContent)===null||t===void 0?void 0:t.trim())||"";const l=this.normalizeText(o).includes(i)||this.normalizeText(n).includes(i)||this.normalizeText(r).includes(i);e.style.display=l?"":"none";if(l)s=true}));this.hasFilterResults=s;const n=o.filter((e=>e.style.display!=="none"));const r=n.filter((e=>this.value.includes(e.getAttribute("value")||"")));this.manageDivider(e,r,n.filter((e=>!this.value.includes(e.getAttribute("value")||""))));if(!s){const t=document.createElement("li");t.setAttribute("data-empty","true");t.textContent=this.emptyResult;t.classList.add("no-results-message");e.appendChild(t)}}normalizeText(e){return e.normalize("NFD").replace(/[\u0300-\u036f]/g,"").toLowerCase().trim()}handleClickOutside(e){if(this.el.contains(e.target)||this.inputElement&&this.inputElement.contains(e.target)){return}this.open=false}async handleKeyDown(e){if(!this.open){if(e.key==="ArrowDown"){this.open=true;if(!this.filterable){requestAnimationFrame((()=>{this.focusFirstItem()}))}e.preventDefault();return}return}const t=Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck:not([style*="display: none"])'));if(t.length===0){console.warn("No visible items found to navigate");return}let i=t.findIndex((e=>e.classList.contains("highlighted")));if(e.key==="ArrowDown"){e.preventDefault();i=i===-1?0:(i+1)%t.length;this.updateHighlightedItem(t,i)}else if(e.key==="ArrowUp"){e.preventDefault();i=i===-1?t.length-1:(i-1+t.length)%t.length;this.updateHighlightedItem(t,i)}else if(e.key==="Enter"&&i>=0){e.preventDefault();const s=t[i];const o=s.hasAttribute("checked");s.checked=!o;s.dispatchEvent(new MouseEvent("click",{view:window,bubbles:true,cancelable:true}))}else if(e.key==="Escape"){e.preventDefault();e.stopPropagation();const t=async()=>{this.isHandlingEscape=true;if(this.options){this.reorderOptionsContent()}else{this.reorderSlotContent()}await new Promise((e=>setTimeout(e,100)));setTimeout((()=>{this.isHandlingEscape=false;this.open=false}),150);if(this.inputElement){this.inputElement.blur()}};await t()}}updateHighlightedItem(e,t){e.forEach(((e,i)=>{if(i===t){e.classList.add("highlighted");e.setAttribute("tabindex","0");e.scrollIntoView({block:"nearest"});const t=e.querySelector("nv-fieldcheckbox");if(t){t.focus()}}else{e.classList.remove("highlighted");e.setAttribute("tabindex","-1")}}))}focusFirstItem(){const e=this.el.querySelector('nv-fielddropdownitemcheck:not([style*="display: none"])');if(e){e.setAttribute("tabindex","0");e.classList.add("highlighted");e.scrollIntoView({block:"nearest"});const t=e.querySelector("nv-fieldcheckbox");if(t){t.focus()}}else{console.warn("No visible first item found to focus")}}addEmptyMessageOption(e){const t=e.querySelector("[data-empty]");if(t)return;const i=document.createElement("li");i.setAttribute("data-empty","true");i.textContent=this.emptyResult;i.classList.add("no-results-message");e.appendChild(i)}removeEmptyMessageOption(e){const t=e.querySelector("[data-empty]");if(t)t.remove()}manageDivider(e,t,i){let s=e.querySelector("hr.multiselect-divider");if(!s){s=document.createElement("hr");s.className="multiselect-divider";e.appendChild(s)}const o=t.length>0&&i.length>0;if(o){const e=t[t.length-1];e.after(s);s.style.display=""}else{s.style.display="none"}}syncChildComponents(){if(!this.el||!this.el.isConnected){return}const e=Array.from(this.el.querySelectorAll("nv-fielddropdownitemcheck"));console.info("[syncChildComponents] value:",this.value);e.forEach((e=>{const t=e.getAttribute("value")||e.getAttribute("label")||"";const i=this.value.includes(t);console.info("[syncChildComponents] itemValue:",t,"shouldBeChecked:",i,"item.checked(before):",e.checked);if(i){e.setAttribute("checked","");e.checked=true}else{e.removeAttribute("checked");e.checked=false}console.info("[syncChildComponents] itemValue:",t,"item.checked(after):",e.checked)}))}getVisibleEnabledSlotItems(){const e=Array.from(this.el.querySelectorAll("nv-fielddropdownitemcheck"));return e.filter((e=>{const t=e.style.display==="none";const i=e.hasAttribute("disabled");return!t&&!i}))}getVisibleEnabledOptionItems(){const e=Array.from(this.el.querySelectorAll("nv-fielddropdownitemcheck"));const t=e.filter((e=>{const t=e.style.display==="none";const i=e.hasAttribute("disabled");return!t&&!i}));return t.map((e=>e.getAttribute("value")||"")).filter((e=>e!==""))}shouldShowToggleAllOptionsButton(){if(!this.options)return false;return this.enableSelectAll&&this.hasFilterResults}getSelectAllCheckboxStateOptions(){if(!this.options)return"unchecked";const e=this.getVisibleEnabledOptionItems();if(e.length===0)return"unchecked";const t=e.filter((e=>this.value.includes(e)));if(t.length===0)return"unchecked";if(t.length===e.length)return"checked";return"indeterminate"}getSelectAllCheckboxStateSlots(){if(this.options)return"unchecked";const e=this.getVisibleEnabledSlotItems();if(e.length===0)return"unchecked";const t=e.filter((e=>{const t=e.getAttribute("value")||e.getAttribute("label")||"";return t!==""&&this.value.includes(t)}));if(t.length===0)return"unchecked";if(t.length===e.length)return"checked";return"indeterminate"}shouldShowToggleAllSlotButton(){if(this.options)return false;return this.enableSelectAll&&this.hasFilterResults}initializeValueFromSlots(){const e=Array.from(this.el.querySelectorAll("nv-fielddropdownitemcheck"));const t=e.filter((e=>e.hasAttribute("checked"))).map((e=>e.getAttribute("value")||e.getAttribute("label")||""));this.value=Array.from(new Set([...this.value||[],...t]));console.info("[initializeValueFromSlots] checkedValues:",t,"combined value:",this.value)}renderDescriptions(){return[(this.description||this.el.querySelector('[slot="description"]'))&&i("div",{class:"description"},i("slot",{name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&i("div",{hidden:!this.error,class:"error-description"},i("slot",{name:"error-description"},this.errorDescription))]}render(){return this.options?this.renderOptionsMode():this.renderSlotsMode()}static get formAssociated(){return true}get el(){return n(this)}static get watchers(){return{options:["handleOptionsChange"],value:["watchValueHandler"]}}};c.style=a;export{c as nv_fieldmultiselect};
+//# sourceMappingURL=p-2a3325fb.entry.js.map

package/dist/native/p-2a3325fb.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["nvFieldmultiselectCss","NvFieldmultiselectStyle0","NvFieldmultiselect","constructor","hostRef","this","inputId","uuidv4","autocomplete","required","readonly","disabled","error","maxHeight","open","fluid","value","filterable","emptyResult","debounceDelay","autofocus","badgeLabel","filterText","enableSelectAll","selectAllLabel","deselectAllLabel","sortedOptions","isHandlingEscape","hasFilterResults","isSelectAllSectionVisible","preventBlurClose","handleBadgeCloseOptions","console","info","valueChanged","emit","items","Array","from","el","querySelectorAll","forEach","item","checked","style","display","options","filter","option","isDivider","reorderOptionsContent","handleBadgeCloseSlots","requestAnimationFrame","reorderSlotContent","handlePopoverClose","resetFilter","clearFilterText","filterTextChanged","handleInputBlurOptions","setTimeout","contains","document","activeElement","handleInputContainerClickOptions","event","target","tagName","inputContainer","querySelector","classList","add","removeFocusWithin","remove","popoverElement","addEventListener","handleInputContainerClickSlots","handleInputOptions","input","debounceTimer","window","clearTimeout","filterItemsOption","handleInputSlots","filterSlotsItems","handleInputFocusOptions","handleInputFocusSlots","handleInputBlurSlots","togglePopoverOptions","togglePopoverSlots","toggleSelectAllOptions","selectAll","visibleOptionValues","getVisibleEnabledOptionItems","Set","val","includes","syncChildComponents","toggleSelectAllSlots","getVisibleEnabledSlotItems","map","getAttribute","allActiveValues","visibleValues","handleSelectAllCheckboxOptionsClick","stopPropagation","preventDefault","currentState","getSelectAllCheckboxStateOptions","shouldSelectAll","handleSelectAllCheckboxSlotsClick","getSelectAllCheckboxStateSlots","renderOptionsMode","h","Host","label","htmlFor","name","ref","triggerMode","placement","class","slot","length","color","dismissible","onCloseClicked","type","id","e","inputElement","placeholder","readOnly","onInput","onFocus","onBlur","onKeyDown","handleKeyDown","Fragment","position","opacity","width","height","pointerEvents","tabIndex","autoComplete","onClick","role","size","emphasis","tabindex","title","onMouseDown","shouldShowToggleAllOptionsButton","indeterminate","description","renderDescriptions","renderSlotsMode","shouldShowToggleAllSlotButton","handleOptionsChange","newValue","undefined","watchValueHandler","isConnected","handleOpenChanged","detail","filterItems","handleItemChecked","valueIndex","indexOf","push","splice","warn","handleSlotChange","connectedCallback","handleClickOutside","bind","componentWillLoad","initializeValueFromSlots","Promise","resolve","then","_a","componentDidLoad","disconnectedCallback","removeEventListener","getFilterText","ul","emptyMessage","selectedItems","unselectedItems","manageDivider","getSelectedValues","deselectAll","toggleSelectAll","divider","hasEmptyMessage","appendChild","createElement","className","existingEmptyMessage","trim","normalizedFilter","normalizeText","hasVisibleItems","find","opt","matchesFilter","visibleItems","visibleSelected","visibleUnselected","textContent","setAttribute","removeEmptyMessageOption","addEmptyMessageOption","visibleSelectedItems","text","normalize","replace","toLowerCase","key","focusFirstItem","currentIndex","findIndex","updateHighlightedItem","selectedItem","isCurrentlyChecked","hasAttribute","dispatchEvent","MouseEvent","view","bubbles","cancelable","handleEscape","async","blur","index","i","scrollIntoView","block","checkbox","focus","firstItem","existingMessage","shouldShowDivider","lastSelectedItem","after","itemValue","shouldBeChecked","removeAttribute","allItems","isHidden","isDisabled","selectedVisibleOptions","checkedValues","errorDescription","hidden","render"],"sources":["src/components/nv-fieldmultiselect/styles/nv-fieldmultiselect.scss?tag=nv-fieldmultiselect","src/components/nv-fieldmultiselect/nv-fieldmultiselect.tsx"],"sourcesContent":["@use './mixins' as *;\n@import '../../../styles/form-field';\n@import '../../../styles/scrollbar';\n\nnv-fieldmultiselect {\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  &[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    @include form-field-popover();\n\n    div[slot='content'] {\n      @include scrollbar();\n      max-height: calc(90vh - var(--list-dropdown-padding) * 2);\n      overflow-y: auto;\n      position: relative;\n    }\n  }\n\n  .input-wrapper-multiselect {\n    @include form-field-input-wrapper();\n    @include input-wrapper-multiselect-styles();\n  }\n\n  .input-container-multiselect {\n    @include form-field-input-container();\n    @include input-container-multiselect-styles();\n  }\n\n  .non-filterable-text {\n    @include non-filterable-text-styles();\n  }\n\n  .description {\n    @include form-field-description();\n  }\n\n  .error-description {\n    @include form-field-error-description();\n  }\n}\n\n.no-results-message {\n  cursor: not-allowed;\n  background-color: unset;\n  color: var(--components-menu-contextual-item-content-disabled);\n  padding: var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);\n}\n\n.multiselect-divider {\n  @include multiselect-divider-styles();\n}\n\n.select-all-container {\n  @include select-all-container-styles();\n\n  .select-all-header {\n    @include select-all-header-styles();\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  State,\n  Listen,\n  Event,\n  EventEmitter,\n  Watch,\n  Method,\n  Fragment,\n} from '@stencil/core';\n\nimport { v4 as uuidv4 } from 'uuid';\nimport { TextInputAutocomplete } from '../../utils/constants';\n\n/**\n * @slot content - The content of the list.\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-fieldmultiselect',\n  styleUrl: 'styles/nv-fieldmultiselect.scss',\n  shadow: false,\n  formAssociated: true,\n})\nexport class NvFieldmultiselect {\n  @Element() el: HTMLNvFieldmultiselectElement;\n  private inputElement!: HTMLInputElement;\n  private popoverElement!: HTMLNvPopoverElement;\n  /**\n   * Timer for debouncing input events.\n   * Private property preferred over @State as it:\n   * - Doesn't need to trigger re-renders\n   * - Is purely for internal logic\n   * - Improves performance by avoiding Stencil's reactivity system\n   */\n  private debounceTimer: number;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Lets you define the text that explains what users should enter in the text\n   * input field. It's a crucial element for making forms clear and user-friendly.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\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   * to ensure unique identification, facilitating proper label association and\n   * accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * Defines the name attribute of the input field, which is crucial for form\n   * submission. This value is used as the key in the key-value pair sent to\n   * the server, representing the input's data in form submissions. It should be\n   * unique within the form to avoid conflicts.\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * Add helpful hints or extra information under the text input field.\n   */\n  @Prop({ reflect: true })\n  readonly description: string;\n\n  /**\n   * Display temporary text inside the input field.\n   */\n  @Prop({ reflect: true })\n  readonly placeholder: string;\n\n  /**\n   * The autocomplete prop helps users fill out the input field faster by\n   * suggesting entries they've used before, like their email or address.\n   * You can turn it on to make forms more convenient or off to ensure users\n   * always type in fresh data.\n   */\n  @Prop({ reflect: true })\n  readonly autocomplete: `${TextInputAutocomplete}` = 'off';\n\n  /**\n   * Marks the input field as required.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Display the input field's content without allowing users to change it.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Disables the input field.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Alters the input field's appearance to indicate an error, helping users\n   * identify fields that need correction.\n   * @validator error\n   */\n  @Prop({ reflect: true })\n  readonly error: boolean = false;\n\n  /**\n   * A description that appears when there is an error related to the multiselect\n   * field.\n   * @validator message\n   */\n  @Prop({ reflect: true })\n  readonly errorDescription: string;\n\n  /**\n   * Defines the maximum height of the multiselect list when open.\n   */\n  @Prop({ reflect: true })\n  readonly maxHeight: string = '';\n\n  /**\n   * State of the multiselect popover.\n   */\n  @Prop({ reflect: true, mutable: true })\n  open: boolean = false;\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  /**\n   * List of options used to automatically generate dropdown items. This\n   * provides an alternative to using the slot manually.\n   *\n   * @example\n   * options=[{\n   *  \"label\": \"Option 1\",\n   *  \"value\": \"option1\",\n   * },\n   * {\n   *  \"label\": \"Option 2\",\n   *  \"value\": \"option2\",\n   * }]\n   */\n  @Prop({ reflect: false, mutable: true })\n  options?: {\n    /** Label to display for the option */\n    label: string;\n    /** Value associated with the option */\n    value: string;\n    /** Whether this option is a divider */\n    isDivider?: boolean;\n    /** Whether this option is disabled */\n    disabled?: boolean;\n    /** Additional description for the option */\n    description?: string;\n    /** Whether this option is pre-checked */\n    checked?: boolean;\n  }[];\n\n  /**\n   * Specifies the selected values of the multiselect field.\n   * This is the canonical value for the component and is used for form submission.\n   */\n  @Prop({ reflect: false, mutable: true })\n  value: string[] = [];\n\n  /**\n   * Enables or disables the filtering feature for the multiselect items.\n   */\n  @Prop({ reflect: true })\n  readonly filterable: boolean = false;\n\n  /**\n   * The text to display when no items match the filter.\n   */\n  @Prop({ reflect: true })\n  readonly emptyResult: string = 'No results found';\n\n  /**\n   * Delay in milliseconds before the search is triggered when typing in the filter input.\n   * @default 300\n   */\n  @Prop({ reflect: true })\n  readonly debounceDelay: number = 300;\n\n  /**\n   * Applies focus to the input field as soon as the component is mounted. This\n   * is equivalent to setting the native autofocus attribute on an <input>\n   * element.\n   */\n  @Prop({ reflect: true })\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  readonly autofocus: boolean = false;\n\n  /**\n   * Text for the badge showing the number of selected items.\n   */\n  @Prop({ reflect: true })\n  readonly badgeLabel: string = '';\n\n  /**\n   * The text entered by the user for filtering multiselect items.\n   */\n  @Prop({ reflect: true, mutable: true })\n  filterText: string = '';\n\n  /**\n   * Enables or disables the \"Select All / Deselect All\" toggle functionality.\n   */\n  @Prop({ reflect: true })\n  readonly enableSelectAll: boolean = false;\n\n  /**\n   * Text for the \"Select All\" button.\n   */\n  @Prop({ reflect: true })\n  readonly selectAllLabel: string = 'Select/deselect all';\n\n  /**\n   * Text for the \"Deselect All\" button.\n   */\n  @Prop({ reflect: true })\n  readonly deselectAllLabel: string = 'Select/deselect all';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region STATE\n\n  /**\n   * Sorted options for display.\n   */\n  @State()\n  sortedOptions: Array<{\n    /** Label to display for the option */\n    label: string;\n    /** Value associated with the option */\n    value: string;\n    /** Whether this option is a divider */\n    isDivider?: boolean;\n  }> = [];\n\n  @State()\n  private isHandlingEscape: boolean = false;\n\n  /**\n   * Indicates whether the current filter has visible results.\n   * Used to control the visibility of the \"Select All\" button.\n   */\n  @State()\n  private hasFilterResults: boolean = true;\n\n  /**\n   * Controls the visibility of the select all section.\n   */\n  @State()\n  private isSelectAllSectionVisible: boolean = true;\n\n  // Add the flag to the class\n  private preventBlurClose = false;\n\n  //#endregion STATE\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the selected values change.\n   * @bind value\n   */\n  @Event()\n  valueChanged: EventEmitter<string[]>;\n\n  /**\n   * Emitted when the filter text changes.\n   */\n  @Event()\n  filterTextChanged: EventEmitter<string>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('options')\n  handleOptionsChange(newValue: typeof this.options) {\n    console.info('[Watch:options] newValue:', newValue);\n    console.info('[Watch:options] current value before update:', this.value);\n    if (!newValue) return;\n\n    // If the parent has set a value prop, use it. Otherwise, derive from checked options.\n    // (Assume: if value is undefined, it's not set by parent; if it's an array, it's set.)\n    if (this.value === undefined || this.value.length === 0) {\n      this.value = newValue\n        .filter(option => option.checked)\n        .map(option => option.value);\n      console.info(\n        '[Watch:options] updated value from checked options:',\n        this.value,\n      );\n    } else {\n      // If value is set, ensure checked states in options match value\n      newValue.forEach(option => {\n        option.checked = this.value.includes(option.value);\n      });\n      console.info(\n        '[Watch:options] options checked state synced to value:',\n        newValue,\n      );\n    }\n    this.reorderOptionsContent();\n  }\n\n  @Watch('value')\n  watchValueHandler() {\n    console.info('[Watch:value] Value changed:', this.value);\n    // Synchronize child components when value changes programmatically\n    if (this.el && this.el.isConnected) {\n      this.syncChildComponents();\n    }\n    // Also, update options checked state if options exist\n    if (this.options) {\n      this.options.forEach(option => {\n        option.checked = this.value.includes(option.value);\n      });\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LISTENERS\n\n  /**\n   * Emitted when the input loses focus.\n   * @param {CustomEvent<boolean>} event - The event object containing the focus state.\n   */\n  @Listen('openChanged')\n  handleOpenChanged(event: CustomEvent<boolean>) {\n    // Stop propagation to prevent the event from affecting parent components like dialogs\n    event.stopPropagation();\n\n    // Update `open` based on the popover state\n    this.open = event.detail;\n\n    if (this.open) {\n      // Filter items only if there is filter text\n      if (this.filterText) {\n        this.filterItems();\n      }\n    } else {\n      this.handlePopoverClose();\n    }\n\n    if (this.options) {\n      this.reorderOptionsContent();\n    } else {\n      this.reorderSlotContent();\n    }\n  }\n\n  /**\n   * Listen for the `itemChecked` event emitted by child items.\n   * @param {CustomEvent} event - The event object containing the selected value and its checked state.\n   */\n  @Listen('itemChecked')\n  handleItemChecked(\n    event: CustomEvent<{\n      /** Value associated with the option */\n      value: string;\n      /** Whether this option is checked */\n      checked: boolean;\n    }>,\n  ) {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const { value, checked } = event.detail;\n    console.info(\n      '[Event:itemChecked] value:',\n      value,\n      'checked:',\n      checked,\n      'current value:',\n      this.value,\n    );\n\n    if (value !== undefined && value !== null) {\n      const newValue = [...this.value];\n      const valueIndex = newValue.indexOf(value);\n\n      if (checked && valueIndex === -1) {\n        newValue.push(value);\n      } else if (!checked && valueIndex > -1) {\n        newValue.splice(valueIndex, 1);\n      }\n\n      console.info('[Event:itemChecked] newValue after update:', newValue);\n      // Always update the state and emit the event when an item is checked/unchecked\n      this.value = newValue;\n      this.valueChanged.emit(this.value);\n\n      // Update the checked state of all items to ensure consistency\n      this.syncChildComponents();\n\n      // Preserve the filter text in the input\n      if (this.filterable && this.inputElement) {\n        // Keep the current filter text in the input\n        this.inputElement.value = this.filterText;\n      }\n    } else {\n      console.warn(\n        '[Event:itemChecked] Received itemChecked event with undefined or null value',\n      ); // Warning log\n    }\n  }\n\n  // Add a listener for the slot content\n  @Listen('slotchange')\n  handleSlotChange(event: Event) {\n    // Check: we only want to reorder if it's the \"content\" slot\n    const slot = event.target as HTMLSlotElement;\n    if (slot && slot.name === 'content') {\n      // To give other platforms (VueJS, React, etc.) time to insert all their items,\n      // we place the reorder in a requestAnimationFrame\n      requestAnimationFrame(() => {\n        this.reorderSlotContent();\n      });\n    }\n  }\n\n  //#endregion LISTENERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  /**\n   * Subscribe to click outside event.\n   */\n  connectedCallback() {\n    console.info('[Lifecycle] connectedCallback - value:', this.value);\n    document.addEventListener('click', this.handleClickOutside.bind(this));\n  }\n\n  /**\n   * Set the mode state and handle options change.\n   */\n  componentWillLoad() {\n    console.info(\n      '[Lifecycle] componentWillLoad - value:',\n      this.value,\n      'options:',\n      this.options,\n    );\n    // Don't call handleOptionsChange if we are in slots mode\n    if (this.options) {\n      this.handleOptionsChange(this.options);\n    }\n\n    // Specific initialization for slots mode\n    if (!this.options) {\n      // Initialize value from checked slotted children\n      this.initializeValueFromSlots();\n      // Use a microtask to ensure DOM is ready\n      Promise.resolve().then(() => {\n        // Synchronize child components\n        this.syncChildComponents();\n\n        // Force a reorder after initialization\n        requestAnimationFrame(() => {\n          this.reorderSlotContent();\n        });\n      });\n    }\n\n    // Initialize the sorted options array with the parsed options for initial rendering\n    if (this.options) {\n      this.sortedOptions = [...(this.options ?? [])];\n    }\n\n    // Reset filter if needed\n    if (!this.filterText) {\n      this.resetFilter();\n    }\n\n    // Initialize filter results state\n    this.hasFilterResults = true;\n  }\n\n  /**\n   * Force reorder if options mode in componentDidLoad because of the initial render not trigger @watch\n   */\n  componentDidLoad() {\n    console.info(\n      '[Lifecycle] componentDidLoad - value:',\n      this.value,\n      'options:',\n      this.options,\n    );\n    if (this.options) {\n      this.handleOptionsChange(this.options);\n    }\n\n    // Final synchronization of child components after everything is loaded\n    this.syncChildComponents();\n\n    // For slots mode, ensure value is initialized from checked children if not already\n    if (!this.options) {\n      this.initializeValueFromSlots();\n      this.syncChildComponents();\n    }\n  }\n\n  /**\n   * Unsubscribe from click outside event.\n   */\n  disconnectedCallback() {\n    console.info('[Lifecycle] disconnectedCallback - value:', this.value);\n    document.removeEventListener('click', this.handleClickOutside.bind(this));\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Retrieves the current filter text entered by the user.\n   * @returns {string} The filter text.\n   */\n  @Method()\n  async getFilterText(): Promise<string> {\n    return this.filterText;\n  }\n\n  /**\n   * Reset the filter and make all items visible.\n   */\n  @Method()\n  async resetFilter(): Promise<void> {\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitemcheck'),\n    );\n\n    // Reset visibility state of all dropdown items\n    items.forEach(item => {\n      item.style.display = '';\n    });\n\n    // Clean up filter-related UI elements\n    const ul = this.el.querySelector('ul');\n    if (ul) {\n      const emptyMessage = ul.querySelector('[data-empty]');\n      if (emptyMessage) emptyMessage.remove();\n\n      // Reorder with divider if needed\n      const selectedItems = items.filter(item =>\n        this.value.includes(item.getAttribute('value') || ''),\n      );\n      const unselectedItems = items.filter(\n        item => !this.value.includes(item.getAttribute('value') || ''),\n      );\n\n      if (selectedItems.length > 0) {\n        this.manageDivider(ul as HTMLElement, selectedItems, unselectedItems);\n      }\n    }\n\n    // Reset filter results state\n    this.hasFilterResults = true;\n  }\n\n  /**\n   * Returns the list of selected values.\n   * @returns {string[]} The selected values.\n   */\n  @Method()\n  async getSelectedValues(): Promise<string[]> {\n    console.info('getSelectedValues:', this.value);\n    return this.value;\n  }\n\n  /**\n   * Select all visible and enabled items.\n   * Works for both options and slots mode.\n   * @returns {Promise<void>}\n   */\n  @Method()\n  async selectAll(): Promise<void> {\n    if (this.disabled || this.readonly) return;\n\n    if (this.options) {\n      this.toggleSelectAllOptions(true);\n    } else {\n      this.toggleSelectAllSlots(true);\n    }\n  }\n\n  /**\n   * Deselect all visible and enabled items.\n   * Works for both options and slots mode.\n   * @returns {Promise<void>}\n   */\n  @Method()\n  async deselectAll(): Promise<void> {\n    if (this.disabled || this.readonly) return;\n\n    if (this.options) {\n      this.toggleSelectAllOptions(false);\n    } else {\n      this.toggleSelectAllSlots(false);\n    }\n  }\n\n  /**\n   * Toggle selection state of all visible and enabled items.\n   * If all items are selected, deselects all. Otherwise, selects all.\n   * Works for both options and slots mode.\n   * @returns {Promise<void>}\n   */\n  @Method()\n  async toggleSelectAll(): Promise<void> {\n    if (this.disabled || this.readonly) return;\n\n    const currentState = this.options\n      ? this.getSelectAllCheckboxStateOptions()\n      : this.getSelectAllCheckboxStateSlots();\n\n    const shouldSelectAll =\n      currentState === 'unchecked' || currentState === 'indeterminate';\n\n    if (this.options) {\n      this.toggleSelectAllOptions(shouldSelectAll);\n    } else {\n      this.toggleSelectAllSlots(shouldSelectAll);\n    }\n  }\n\n  /**\n   * Reorder the content of the slot.\n   */\n  private reorderSlotContent() {\n    if (this.options) return;\n\n    const ul = this.el.querySelector('ul');\n    if (!ul) return;\n\n    // Remove all existing <hr class=\"multiselect-divider\">\n    ul.querySelectorAll('hr.multiselect-divider').forEach(divider =>\n      divider.remove(),\n    );\n\n    // Retrieve all items (not hidden)\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitemcheck'),\n    ).filter(item => item.style.display !== 'none');\n\n    // If you possibly have a \"No results\" message:\n    const hasEmptyMessage = ul.querySelector('[data-empty]');\n    if (hasEmptyMessage) {\n      // if there is a \"No results found\" message, do not reorder\n      return;\n    }\n\n    // Separate checked vs unchecked\n    const selectedItems = items.filter(item =>\n      this.value.includes(item.getAttribute('value') || ''),\n    );\n    const unselectedItems = items.filter(\n      item => !this.value.includes(item.getAttribute('value') || ''),\n    );\n\n    // Reinsert CHECKED items FIRST\n    // appendChild() moves the element without recreating it\n    // this is not trigger a re-rendering of the component in the platforms\n    selectedItems.forEach(item => {\n      ul.appendChild(item); // <-- The <li> (or <nv-fielddropdownitemcheck>) is just \"moved\" to the end of the list\n    });\n\n    // Add a divider if needed\n    if (selectedItems.length > 0 && unselectedItems.length > 0) {\n      const divider = document.createElement('hr');\n      divider.className = 'multiselect-divider';\n      ul.appendChild(divider);\n    }\n\n    // Reinsert UNCHECKED items at the end\n    unselectedItems.forEach(item => {\n      ul.appendChild(item);\n    });\n  }\n\n  /**\n   * Reorder the content for options mode with async handling\n   */\n  private reorderOptionsContent() {\n    const ul = this.el.querySelector('ul') as HTMLElement;\n    if (!ul) return;\n\n    const items = Array.from(\n      ul.querySelectorAll('nv-fielddropdownitemcheck'),\n    ).filter(item => item.style.display !== 'none');\n\n    const selectedItems = items.filter(item =>\n      this.value.includes(item.getAttribute('value') || ''),\n    );\n    const unselectedItems = items.filter(\n      item => !this.value.includes(item.getAttribute('value') || ''),\n    );\n\n    // Reorder the elements\n    selectedItems.forEach(item => ul.appendChild(item));\n    unselectedItems.forEach(item => ul.appendChild(item));\n\n    // Manage the divider after the reordering\n    this.manageDivider(ul, selectedItems, unselectedItems);\n  }\n\n  /**\n   * Filter multiselect items based on the text entered by the user.\n   */\n  private filterItems() {\n    const ul = this.el.querySelector('ul');\n    if (!ul) return;\n\n    // Remove existing empty message if any\n    const existingEmptyMessage = ul.querySelector('[data-empty]');\n    if (existingEmptyMessage) {\n      existingEmptyMessage.remove();\n    }\n\n    if (!this.filterText.trim()) {\n      if (this.options && this.options.length > 0) {\n        // Reset options display\n        const items = Array.from(\n          ul.querySelectorAll('nv-fielddropdownitemcheck'),\n        );\n        items.forEach(item => {\n          item.style.display = '';\n        });\n      } else {\n        // Reset slot items display\n        const items = Array.from(\n          this.el.querySelectorAll('nv-fielddropdownitemcheck'),\n        );\n        items.forEach(item => {\n          item.style.display = '';\n        });\n      }\n\n      // Reorder with divider\n      const items = Array.from(\n        ul.querySelectorAll('nv-fielddropdownitemcheck'),\n      );\n      const selectedItems = items.filter(item =>\n        this.value.includes(item.getAttribute('value') || ''),\n      );\n      const unselectedItems = items.filter(\n        item => !this.value.includes(item.getAttribute('value') || ''),\n      );\n      this.manageDivider(ul, selectedItems, unselectedItems);\n      return;\n    }\n\n    const normalizedFilter = this.normalizeText(this.filterText);\n    let hasVisibleItems = false;\n\n    if (this.options && this.options.length > 0) {\n      // Filter options mode\n      const items = Array.from(\n        ul.querySelectorAll('nv-fielddropdownitemcheck'),\n      );\n\n      items.forEach(item => {\n        const option = this.options.find(\n          opt => opt.value === item.getAttribute('value'),\n        );\n        if (option && !option.isDivider) {\n          const matchesFilter =\n            this.normalizeText(option.label).includes(normalizedFilter) ||\n            this.normalizeText(option.value).includes(normalizedFilter);\n\n          item.style.display = matchesFilter ? '' : 'none';\n          if (matchesFilter) hasVisibleItems = true;\n        }\n      });\n\n      // Manage the divider with the visible items\n      const visibleItems = items.filter(item => item.style.display !== 'none');\n      const visibleSelected = visibleItems.filter(item =>\n        this.value.includes(item.getAttribute('value') || ''),\n      );\n      const visibleUnselected = visibleItems.filter(\n        item => !this.value.includes(item.getAttribute('value') || ''),\n      );\n      this.manageDivider(ul, visibleSelected, visibleUnselected);\n    } else {\n      // Filter slot items mode\n      const items = Array.from(\n        this.el.querySelectorAll('nv-fielddropdownitemcheck'),\n      );\n\n      items.forEach(item => {\n        const label = item.getAttribute('label') || '';\n        const value = item.getAttribute('value') || '';\n        const textContent = item.textContent || '';\n\n        const matchesFilter =\n          this.normalizeText(label).includes(normalizedFilter) ||\n          this.normalizeText(value).includes(normalizedFilter) ||\n          this.normalizeText(textContent).includes(normalizedFilter);\n\n        item.style.display = matchesFilter ? '' : 'none';\n        if (matchesFilter) hasVisibleItems = true;\n      });\n    }\n\n    // Add empty message if no items match the filter\n    if (!hasVisibleItems) {\n      const emptyMessage = document.createElement('li');\n      emptyMessage.setAttribute('data-empty', 'true');\n      emptyMessage.textContent = this.emptyResult;\n      emptyMessage.classList.add('no-results-message');\n      ul.appendChild(emptyMessage);\n    }\n\n    this.reorderSlotContent();\n  }\n\n  /**\n   * Filter multiselect items in options mode.\n   */\n  private filterItemsOption() {\n    const ul = this.el.querySelector('ul');\n    if (!ul) return;\n\n    const normalizedFilter = this.normalizeText(this.filterText);\n    let hasVisibleItems = false;\n\n    const items = Array.from(ul.querySelectorAll('nv-fielddropdownitemcheck'));\n\n    // Reset items if the filter text is empty\n    if (!this.filterText.trim()) {\n      // Remove the empty message if it exists\n      this.removeEmptyMessageOption(ul);\n      items.forEach(item => (item.style.display = ''));\n      this.reorderOptionsContent(); // Reorder after reset\n      this.hasFilterResults = true; // Reset filter means we have results\n      return;\n    }\n\n    // Filter the items\n    items.forEach(item => {\n      const label = item.getAttribute('label') || '';\n      const value = item.getAttribute('value') || '';\n\n      const matchesFilter =\n        this.normalizeText(label).includes(normalizedFilter) ||\n        this.normalizeText(value).includes(normalizedFilter);\n\n      item.style.display = matchesFilter ? '' : 'none';\n      if (matchesFilter) hasVisibleItems = true;\n    });\n\n    // Update the filter results state\n    this.hasFilterResults = hasVisibleItems;\n\n    // Manage the divider with the visible items\n    const visibleItems = items.filter(item => item.style.display !== 'none');\n    const visibleSelected = visibleItems.filter(item =>\n      this.value.includes(item.getAttribute('value') || ''),\n    );\n    const visibleUnselected = visibleItems.filter(\n      item => !this.value.includes(item.getAttribute('value') || ''),\n    );\n\n    this.manageDivider(ul, visibleSelected, visibleUnselected);\n\n    // Add or remove the empty message based on the case\n    if (!hasVisibleItems) {\n      this.addEmptyMessageOption(ul);\n    } else {\n      this.removeEmptyMessageOption(ul);\n    }\n  }\n\n  /**\n   * Filter multiselect items in slots mode\n   */\n  private filterSlotsItems() {\n    if (this.options) return;\n\n    const ul = this.el.querySelector('ul');\n    if (!ul) return;\n\n    // Remove existing empty message if any\n    const existingEmptyMessage = ul.querySelector('[data-empty]');\n    if (existingEmptyMessage) {\n      existingEmptyMessage.remove();\n    }\n\n    // If filter text is empty, reset all items visibility\n    if (!this.filterText.trim()) {\n      this.resetFilter();\n      this.hasFilterResults = true; // Reset filter means we have results\n      return;\n    }\n\n    const normalizedFilter = this.normalizeText(this.filterText);\n    let hasVisibleItems = false;\n\n    // Get all items and preserve them in the DOM\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitemcheck'),\n    );\n\n    // Instead of removing/reordering, just hide/show items\n    items.forEach(item => {\n      const label = item.getAttribute('label') || '';\n      const value = item.getAttribute('value') || '';\n      const textContent = item.textContent?.trim() || '';\n\n      const matchesFilter =\n        this.normalizeText(label).includes(normalizedFilter) ||\n        this.normalizeText(value).includes(normalizedFilter) ||\n        this.normalizeText(textContent).includes(normalizedFilter);\n\n      item.style.display = matchesFilter ? '' : 'none';\n      if (matchesFilter) hasVisibleItems = true;\n    });\n\n    // Update the filter results state\n    this.hasFilterResults = hasVisibleItems;\n\n    // Get visible items after filtering\n    const visibleItems = items.filter(item => item.style.display !== 'none');\n    const visibleSelectedItems = visibleItems.filter(item =>\n      this.value.includes(item.getAttribute('value') || ''),\n    );\n\n    this.manageDivider(\n      ul,\n      visibleSelectedItems,\n      visibleItems.filter(\n        item => !this.value.includes(item.getAttribute('value') || ''),\n      ),\n    );\n\n    // Add empty message if no items match the filter\n    if (!hasVisibleItems) {\n      const emptyMessage = document.createElement('li');\n      emptyMessage.setAttribute('data-empty', 'true');\n      emptyMessage.textContent = this.emptyResult;\n      emptyMessage.classList.add('no-results-message');\n      ul.appendChild(emptyMessage);\n    }\n  }\n\n  /**\n   * Handle badge close for options mode.\n   */\n  private handleBadgeCloseOptions = (): void => {\n    console.info('handleBadgeCloseOptions:', this.value);\n    this.value = [];\n    this.valueChanged.emit(this.value);\n\n    // Uncheck all elements\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitemcheck'),\n    );\n\n    items.forEach(item => {\n      item.checked = false;\n      item.style.display = '';\n    });\n\n    // Reorder options without the divider since there are no selected elements\n    this.options = this.options.filter(option => !option.isDivider);\n\n    // Reorder options without the divider since there are no selected elements\n    this.reorderOptionsContent();\n  };\n\n  /**\n   * Handle badge close for slots mode.\n   */\n  private handleBadgeCloseSlots = (): void => {\n    console.info('handleBadgeCloseSlots:', this.value);\n    this.value = [];\n    this.valueChanged.emit(this.value);\n\n    // Uncheck all elements\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitemcheck'),\n    );\n\n    items.forEach(item => {\n      item.checked = false;\n      item.style.display = '';\n    });\n\n    // Force DOM update before reordering\n    requestAnimationFrame(() => {\n      // Reorder slot content\n      this.reorderSlotContent();\n    });\n  };\n\n  /**\n   * Normalizes text by removing accents and converting to lowercase\n   * @param {string} text - The text to normalize\n   * @returns {string} The normalized text\n   *\n   * @example\n   * normalizeText(\"Café Latte\") => \"cafe latte\"\n   *\n   * @description\n   * This function performs text normalization in three steps:\n   * 1. Decomposes characters into their base form and combining characters (NFD)\n   * 2. Removes all diacritical marks (accents, umlauts, etc.)\n   * 3. Converts to lowercase and trims whitespace\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/normalize} - MDN documentation on String.normalize()\n   * @see {@link https://en.wikipedia.org/wiki/Unicode_equivalence#Normal_forms} - More info about Unicode normalization forms\n   */\n  private normalizeText(text: string): string {\n    return text\n      .normalize('NFD') // Decompose characters into base + combining characters (e.g., é => e + ´)\n      .replace(/[\\u0300-\\u036f]/g, '') // Remove all diacritical marks (Unicode range for combining characters)\n      .toLowerCase() // Convert to lowercase\n      .trim(); // Remove leading and trailing whitespace\n  }\n\n  private handleClickOutside(event: MouseEvent) {\n    if (\n      this.el.contains(event.target as Node) ||\n      (this.inputElement && this.inputElement.contains(event.target as Node))\n    ) {\n      return;\n    }\n    this.open = false;\n  }\n\n  /**\n   * Handle popover close\n   */\n  private handlePopoverClose = () => {\n    // If we are handling Escape, ignore this event\n    if (this.isHandlingEscape) {\n      return;\n    }\n\n    // Reset filter if needed, but preserve the filter text\n    if (this.filterable) {\n      this.resetFilter();\n    }\n  };\n\n  /**\n   * Clear the filter text\n   */\n  private clearFilterText = () => {\n    this.filterText = '';\n    this.filterTextChanged.emit('');\n    this.resetFilter();\n    this.hasFilterResults = true;\n  };\n\n  /**\n   * Handle input blur for options mode.\n   */\n  private handleInputBlurOptions = () => {\n    setTimeout(() => {\n      if (this.preventBlurClose) {\n        this.preventBlurClose = false;\n        return; // Don't close the popover\n      }\n      if (!this.el.contains(document.activeElement)) {\n        // Close the popover without affecting the divider\n        this.open = false;\n\n        // Clear filter text when focus is lost\n        if (this.filterable) {\n          this.clearFilterText();\n        }\n      }\n    }, 150);\n  };\n\n  /**\n   * Handle keyboard events & arrow key navigation.\n   * If the multiselect is not open, opens it and focuses on the first item if the list is not filterable.\n   * If the multiselect is open, handles arrow key navigation and closes it if the focus is outside the component.\n   * @param {KeyboardEvent} event - The keyboard event.\n   */\n  @Listen('keydown', { passive: false })\n  async handleKeyDown(event: KeyboardEvent) {\n    if (!this.open) {\n      if (event.key === 'ArrowDown') {\n        this.open = true;\n\n        // Focus on the first item if the list is not filterable\n        if (!this.filterable) {\n          requestAnimationFrame(() => {\n            this.focusFirstItem();\n          });\n        }\n\n        event.preventDefault();\n        return;\n      }\n      return;\n    }\n\n    const items = Array.from(\n      this.el.querySelectorAll(\n        'nv-fielddropdownitemcheck:not([style*=\"display: none\"])',\n      ),\n    ) as HTMLNvFielddropdownitemcheckElement[];\n\n    if (items.length === 0) {\n      console.warn('No visible items found to navigate');\n      return;\n    }\n\n    let currentIndex = items.findIndex(item =>\n      item.classList.contains('highlighted'),\n    );\n\n    if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      currentIndex =\n        currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;\n      this.updateHighlightedItem(items, currentIndex);\n    } else if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      currentIndex =\n        currentIndex === -1\n          ? items.length - 1\n          : (currentIndex - 1 + items.length) % items.length;\n      this.updateHighlightedItem(items, currentIndex);\n    } else if (event.key === 'Enter' && currentIndex >= 0) {\n      event.preventDefault();\n      const selectedItem = items[currentIndex];\n\n      // Toggle the checked state\n      const isCurrentlyChecked = selectedItem.hasAttribute('checked');\n      selectedItem.checked = !isCurrentlyChecked;\n\n      // Trigger a click event to ensure proper event handling\n      selectedItem.dispatchEvent(\n        new MouseEvent('click', {\n          view: window,\n          bubbles: true,\n          cancelable: true,\n        }),\n      );\n    } else if (event.key === 'Escape') {\n      event.preventDefault();\n      event.stopPropagation(); // Prevent the event from propagating to the popover\n\n      // Do the reorder and wait a bit before closing\n      const handleEscape = async () => {\n        this.isHandlingEscape = true; // Disable the hide listener\n\n        if (this.options) {\n          this.reorderOptionsContent();\n        } else {\n          this.reorderSlotContent();\n        }\n\n        // Wait for the reorder to be applied\n        await new Promise(resolve => setTimeout(resolve, 100));\n\n        // Reactivate the hide listener after a short delay\n        setTimeout(() => {\n          this.isHandlingEscape = false;\n          this.open = false;\n        }, 150);\n\n        if (this.inputElement) {\n          this.inputElement.blur();\n        }\n      };\n\n      await handleEscape();\n    }\n  }\n\n  /**\n   * Updates the highlighted item in the dropdown list.\n   *\n   * @param {(HTMLNvFielddropdownitemElement | HTMLNvFielddropdownitemcheckElement)[]} items - The items to update.\n   * @param {number} index - The index of the item to highlight.\n   */\n  private updateHighlightedItem(\n    items: (\n      | HTMLNvFielddropdownitemElement\n      | HTMLNvFielddropdownitemcheckElement\n    )[],\n    index: number,\n  ) {\n    items.forEach((item, i) => {\n      if (i === index) {\n        item.classList.add('highlighted');\n        item.setAttribute('tabindex', '0');\n        item.scrollIntoView({ block: 'nearest' });\n        // Focus on the nv-fieldcheckbox inside\n        const checkbox = item.querySelector('nv-fieldcheckbox');\n        if (checkbox) {\n          (checkbox as HTMLElement).focus();\n        }\n      } else {\n        item.classList.remove('highlighted');\n        item.setAttribute('tabindex', '-1');\n      }\n    });\n  }\n\n  /**\n   * Focus on the first item in the dropdown list.\n   */\n  private focusFirstItem() {\n    const firstItem = this.el.querySelector(\n      'nv-fielddropdownitemcheck:not([style*=\"display: none\"])',\n    ) as HTMLNvFielddropdownitemcheckElement;\n\n    if (firstItem) {\n      firstItem.setAttribute('tabindex', '0');\n      firstItem.classList.add('highlighted');\n      firstItem.scrollIntoView({ block: 'nearest' });\n      // Focus on the nv-fieldcheckbox inside\n      const checkbox = firstItem.querySelector('nv-fieldcheckbox');\n      if (checkbox) {\n        (checkbox as HTMLElement).focus();\n      }\n    } else {\n      console.warn('No visible first item found to focus');\n    }\n  }\n\n  /**\n   * Handle click on the input container for options mode.\n   * @param {MouseEvent} event - The click event.\n   */\n  private handleInputContainerClickOptions = (event: MouseEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const target = event.target as HTMLElement;\n\n    if (target.tagName === 'P' || target.tagName === 'SPAN') {\n      this.open = true;\n\n      const inputContainer = this.el.querySelector(\n        '.input-container',\n      ) as HTMLElement;\n      if (inputContainer) {\n        inputContainer.classList.add('focus-within');\n\n        const removeFocusWithin = () => {\n          inputContainer.classList.remove('focus-within');\n        };\n\n        this.popoverElement.addEventListener('hide', removeFocusWithin);\n      }\n    }\n  };\n\n  /**\n   * Handle click on the input container for slots mode.\n   * @param {MouseEvent} event - The click event.\n   */\n  private handleInputContainerClickSlots = (event: MouseEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const target = event.target as HTMLElement;\n\n    if (target.tagName === 'P' || target.tagName === 'SPAN') {\n      this.open = true;\n\n      const inputContainer = this.el.querySelector(\n        '.input-container',\n      ) as HTMLElement;\n      if (inputContainer) {\n        inputContainer.classList.add('focus-within');\n\n        const removeFocusWithin = () => {\n          inputContainer.classList.remove('focus-within');\n        };\n\n        this.popoverElement.addEventListener('hide', removeFocusWithin);\n      }\n    }\n  };\n\n  /**\n   * Handle input change for options mode.\n   * @param {Event} event - The input event.\n   */\n  private readonly handleInputOptions = (event: Event) => {\n    if (!this.filterable) return;\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const input = event.target as HTMLInputElement;\n    this.filterText = input.value;\n    this.filterTextChanged.emit(this.filterText);\n\n    // Clear any existing timer\n    if (this.debounceTimer) {\n      window.clearTimeout(this.debounceTimer);\n    }\n\n    // Set a new timer for filtering\n    this.debounceTimer = window.setTimeout(() => {\n      this.filterItemsOption();\n    }, this.debounceDelay);\n  };\n\n  private addEmptyMessageOption(ul: HTMLElement) {\n    const existingMessage = ul.querySelector('[data-empty]');\n    if (existingMessage) return;\n\n    const emptyMessage = document.createElement('li');\n    emptyMessage.setAttribute('data-empty', 'true');\n    emptyMessage.textContent = this.emptyResult;\n    emptyMessage.classList.add('no-results-message');\n    ul.appendChild(emptyMessage);\n  }\n\n  private removeEmptyMessageOption(ul: HTMLElement) {\n    const existingMessage = ul.querySelector('[data-empty]');\n    if (existingMessage) existingMessage.remove();\n  }\n\n  /**\n   * Handle input change for slots mode\n   * @param {Event} event - The input event.\n   */\n  private readonly handleInputSlots = (event: Event) => {\n    if (!this.filterable) return;\n    if (this.disabled || this.readonly) return;\n\n    const input = event.target as HTMLInputElement;\n    this.filterText = input.value;\n    this.filterTextChanged.emit(this.filterText);\n\n    // Clear any existing timer\n    if (this.debounceTimer) {\n      window.clearTimeout(this.debounceTimer);\n    }\n\n    // Set a new timer for filtering\n    this.debounceTimer = window.setTimeout(() => {\n      this.filterSlotsItems();\n    }, this.debounceDelay);\n  };\n\n  /**\n   * Handle input focus for options mode.\n   */\n  private handleInputFocusOptions = () => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n    this.open = true;\n  };\n\n  /**\n   * Handle input focus for slots mode.\n   */\n  private handleInputFocusSlots = () => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n    this.open = true;\n  };\n\n  /**\n   * Handle input blur for slots mode.\n   */\n  private handleInputBlurSlots = () => {\n    setTimeout(() => {\n      if (!this.el.contains(document.activeElement)) {\n        // Close the popover without affecting the divider\n        this.open = false;\n\n        // Clear filter text when focus is lost\n        if (this.filterable) {\n          this.clearFilterText();\n        }\n      }\n    }, 150);\n  };\n\n  /**\n   * Toggle the multiselect popover for options mode.\n   */\n  private togglePopoverOptions = (): void => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    this.open = !this.open;\n  };\n\n  /**\n   * Toggle the multiselect popover for slots mode.\n   */\n  private togglePopoverSlots = (): void => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    this.open = !this.open;\n  };\n\n  private manageDivider(\n    ul: HTMLElement,\n    selectedItems: Element[],\n    unselectedItems: Element[],\n  ) {\n    let divider = ul.querySelector('hr.multiselect-divider') as HTMLElement;\n    if (!divider) {\n      divider = document.createElement('hr');\n      divider.className = 'multiselect-divider';\n      ul.appendChild(divider);\n    }\n\n    const shouldShowDivider =\n      selectedItems.length > 0 && unselectedItems.length > 0;\n\n    if (shouldShowDivider) {\n      // Place the divider after the last selected item\n      const lastSelectedItem = selectedItems[selectedItems.length - 1];\n      lastSelectedItem.after(divider);\n      divider.style.display = '';\n    } else {\n      divider.style.display = 'none';\n    }\n  }\n\n  /**\n   * Synchronizes the checked state of all child nv-fielddropdownitemcheck components\n   * with the current selectedValues state.\n   */\n  private syncChildComponents() {\n    // Early return if element is not ready\n    if (!this.el || !this.el.isConnected) {\n      return;\n    }\n\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitemcheck'),\n    );\n\n    console.info('[syncChildComponents] value:', this.value);\n    items.forEach(item => {\n      // Get the effective value: use explicit value if present, otherwise use label\n      const itemValue =\n        item.getAttribute('value') || item.getAttribute('label') || '';\n\n      const shouldBeChecked = this.value.includes(itemValue);\n      console.info(\n        '[syncChildComponents] itemValue:',\n        itemValue,\n        'shouldBeChecked:',\n        shouldBeChecked,\n        'item.checked(before):',\n        item.checked,\n      );\n\n      if (shouldBeChecked) {\n        item.setAttribute('checked', '');\n        item.checked = true;\n      } else {\n        item.removeAttribute('checked');\n        item.checked = false;\n      }\n      console.info(\n        '[syncChildComponents] itemValue:',\n        itemValue,\n        'item.checked(after):',\n        item.checked,\n      );\n    });\n  }\n\n  /**\n   * Gets visible and enabled slot items using consistent logic.\n   * @returns {Element[]} Array of visible and enabled items\n   */\n  private getVisibleEnabledSlotItems(): Element[] {\n    const allItems = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitemcheck'),\n    );\n\n    return allItems.filter(item => {\n      const isHidden = item.style.display === 'none';\n      const isDisabled = item.hasAttribute('disabled');\n      return !isHidden && !isDisabled;\n    });\n  }\n\n  /**\n   * Gets visible and enabled option items by checking DOM elements.\n   * @returns {string[]} Array of visible and enabled option values\n   */\n  private getVisibleEnabledOptionItems(): string[] {\n    const allItems = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitemcheck'),\n    );\n\n    const visibleItems = allItems.filter(item => {\n      const isHidden = item.style.display === 'none';\n      const isDisabled = item.hasAttribute('disabled');\n      return !isHidden && !isDisabled;\n    });\n\n    return visibleItems\n      .map(item => item.getAttribute('value') || '')\n      .filter(value => value !== '');\n  }\n\n  /**\n   * Determines if the toggle all button should be shown in options mode.\n   * @returns {boolean} True if there are visible items and no \"No results found\" message\n   */\n  private shouldShowToggleAllOptionsButton(): boolean {\n    if (!this.options) return false; // Only for options mode\n    return this.enableSelectAll && this.hasFilterResults;\n  }\n\n  /**\n   * Toggles the selection state of all non-disabled options in options mode.\n   * Respects filtering by only selecting/deselecting visible items.\n   * @param {boolean} selectAll - Whether to select all items (true) or deselect all (false)\n   */\n  private toggleSelectAllOptions = (selectAll: boolean): void => {\n    if (!this.options) return;\n\n    // Get visible and enabled option values from DOM\n    const visibleOptionValues = this.getVisibleEnabledOptionItems();\n\n    console.info(\n      '[SelectAll][Options] toggleSelectAllOptions called. selectAll:',\n      selectAll,\n      'visibleOptionValues:',\n      visibleOptionValues,\n      'Current value:',\n      this.value,\n    );\n    if (selectAll) {\n      // Select all visible options - merge with existing selections\n      this.value = [...new Set([...this.value, ...visibleOptionValues])];\n    } else {\n      // Deselect only the visible options, keep others that might be filtered out\n      this.value = this.value.filter(val => !visibleOptionValues.includes(val));\n    }\n\n    console.info('[SelectAll][Options] New value after toggle:', this.value);\n\n    // Emit the change event\n    this.valueChanged.emit(this.value);\n\n    // Synchronize child components\n    this.syncChildComponents();\n\n    // Reorder content to move selected items to top\n    this.reorderOptionsContent();\n  };\n\n  /**\n   * Gets the checkbox state for the select all checkbox in options mode.\n   * @returns {'checked' | 'unchecked' | 'indeterminate'} The checkbox state\n   */\n  private getSelectAllCheckboxStateOptions():\n    | 'checked'\n    | 'unchecked'\n    | 'indeterminate' {\n    if (!this.options) return 'unchecked';\n\n    // Get visible and enabled option values from DOM\n    const visibleOptionValues = this.getVisibleEnabledOptionItems();\n\n    if (visibleOptionValues.length === 0) return 'unchecked';\n\n    const selectedVisibleOptions = visibleOptionValues.filter(value =>\n      this.value.includes(value),\n    );\n\n    if (selectedVisibleOptions.length === 0) return 'unchecked';\n    if (selectedVisibleOptions.length === visibleOptionValues.length)\n      return 'checked';\n    return 'indeterminate';\n  }\n\n  /**\n   * Gets the checkbox state for the select all checkbox in slots mode.\n   * @returns {'checked' | 'unchecked' | 'indeterminate'} The checkbox state\n   */\n  private getSelectAllCheckboxStateSlots():\n    | 'checked'\n    | 'unchecked'\n    | 'indeterminate' {\n    if (this.options) return 'unchecked';\n\n    // Get all visible and enabled items\n    const items = this.getVisibleEnabledSlotItems();\n\n    if (items.length === 0) return 'unchecked';\n\n    const selectedItems = items.filter(item => {\n      const itemValue =\n        item.getAttribute('value') || item.getAttribute('label') || '';\n      return itemValue !== '' && this.value.includes(itemValue);\n    });\n\n    if (selectedItems.length === 0) return 'unchecked';\n    if (selectedItems.length === items.length) return 'checked';\n    return 'indeterminate';\n  }\n\n  /**\n   * Toggles the selection state of all non-disabled slot items.\n   * @param {boolean} selectAll - Whether to select all items (true) or deselect all (false)\n   */\n  private toggleSelectAllSlots = (selectAll: boolean): void => {\n    if (this.options) return; // Only for slots mode\n\n    // Get visible and enabled items\n    const items = this.getVisibleEnabledSlotItems();\n\n    console.info(\n      '[SelectAll][Slots] toggleSelectAllSlots called. selectAll:',\n      selectAll,\n      'visible slot items:',\n      items.map(\n        item => item.getAttribute('value') || item.getAttribute('label'),\n      ),\n      'Current value:',\n      this.value,\n    );\n\n    if (selectAll) {\n      // Select all visible items\n      const allActiveValues = items\n        .map(\n          item =>\n            item.getAttribute('value') || item.getAttribute('label') || '',\n        )\n        .filter(value => value !== '');\n      this.value = [...new Set([...this.value, ...allActiveValues])];\n    } else {\n      // Deselect only the visible items, keep others that might be filtered out\n      const visibleValues = items\n        .map(\n          item =>\n            item.getAttribute('value') || item.getAttribute('label') || '',\n        )\n        .filter(value => value !== '');\n\n      this.value = this.value.filter(val => !visibleValues.includes(val));\n    }\n\n    console.info('[SelectAll][Slots] New value after toggle:', this.value);\n\n    // Emit the change event\n    this.valueChanged.emit(this.value);\n\n    // Force synchronization with a small delay to ensure DOM is updated\n    requestAnimationFrame(() => {\n      this.syncChildComponents();\n      this.reorderSlotContent();\n    });\n  };\n\n  /**\n   * Handle click on the select all checkbox in options mode.\n   * @param {Event} event - The click event.\n   */\n  private handleSelectAllCheckboxOptionsClick = (event: Event): void => {\n    event.stopPropagation();\n    event.preventDefault();\n    console.info('[handleSelectAllCheckboxOptionsClick] event:', event);\n\n    const currentState = this.getSelectAllCheckboxStateOptions();\n    console.info(\n      '[SelectAll][Options] Checkbox clicked. Current state:',\n      currentState,\n      'Current value:',\n      this.value,\n    );\n    // Logic to handle the indeterminate state\n    // - unchecked → select all\n    // - indeterminate → select all (clicking on indeterminate will change to checked)\n    // - checked → deselect all\n    const shouldSelectAll =\n      currentState === 'unchecked' || currentState === 'indeterminate';\n    console.info('[SelectAll][Options] shouldSelectAll:', shouldSelectAll);\n    this.toggleSelectAllOptions(shouldSelectAll);\n  };\n\n  /**\n   * Handle click on the select all checkbox in slots mode.\n   * @param {Event} event - The click event.\n   */\n  private handleSelectAllCheckboxSlotsClick = (event: Event): void => {\n    event.stopPropagation();\n    event.preventDefault();\n    console.info('[handleSelectAllCheckboxSlotsClick] event:', event);\n\n    const currentState = this.getSelectAllCheckboxStateSlots();\n    console.info(\n      '[SelectAll][Slots] Checkbox clicked. Current state:',\n      currentState,\n      'Current value:',\n      this.value,\n    );\n    // Logic to handle the indeterminate state\n    // - unchecked → select all\n    // - indeterminate → select all (clicking on indeterminate will change to checked)\n    // - checked → deselect all\n    const shouldSelectAll =\n      currentState === 'unchecked' || currentState === 'indeterminate';\n    console.info('[SelectAll][Slots] shouldSelectAll:', shouldSelectAll);\n    this.toggleSelectAllSlots(shouldSelectAll);\n  };\n\n  /**\n   * Determines if the toggle all button should be shown in slots mode.\n   * @returns {boolean} True if there are visible items and no \"No results found\" message\n   */\n  private shouldShowToggleAllSlotButton(): boolean {\n    if (this.options) return false; // Only for slots mode\n    return this.enableSelectAll && this.hasFilterResults;\n  }\n\n  /**\n   * Initializes the value array from checked slotted nv-fielddropdownitemcheck elements (slots mode only).\n   */\n  private initializeValueFromSlots() {\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitemcheck'),\n    );\n\n    // Values from checked slot children\n    const checkedValues = items\n      .filter(item => item.hasAttribute('checked'))\n      .map(\n        item => item.getAttribute('value') || item.getAttribute('label') || '',\n      );\n\n    // Combine with current this.value (set by code), ensuring uniqueness\n    this.value = Array.from(new Set([...(this.value || []), ...checkedValues]));\n\n    console.info(\n      '[initializeValueFromSlots] checkedValues:',\n      checkedValues,\n      'combined value:',\n      this.value,\n    );\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n\n  /**\n   * Renders the component in options mode\n   * @returns {any} The JSX for options mode\n   */\n  private renderOptionsMode = () => {\n    return (\n      <Host aria-label={this.label}>\n        {(this.label || 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={el => (this.popoverElement = el)}\n          triggerMode=\"controlled\"\n          placement=\"bottom-start\"\n          open={this.open}\n        >\n          <div class=\"input-wrapper-multiselect\" slot=\"trigger\">\n            <slot name=\"before-input\"></slot>\n\n            <div class=\"input-container-multiselect\">\n              <slot name=\"leading-input\"></slot>\n\n              {this.value.length > 0 && (\n                <nv-badge\n                  slot=\"leading-input\"\n                  prevent-auto-close\n                  color=\"10\"\n                  dismissible={this.value.length > 0}\n                  label={`${this.value.length} ${this.badgeLabel}`}\n                  aria-label={`Clear all ${this.value.length} ${this.badgeLabel} items`}\n                  onCloseClicked={this.handleBadgeCloseOptions}\n                ></nv-badge>\n              )}\n\n              {this.filterable || this.disabled || this.readonly ? (\n                <input\n                  type=\"text\"\n                  id={this.inputId}\n                  ref={e => (this.inputElement = e)}\n                  autofocus={this.autofocus}\n                  autocomplete={this.autocomplete}\n                  placeholder={this.placeholder}\n                  name={this.name}\n                  value={this.filterText}\n                  required={this.required}\n                  disabled={this.disabled}\n                  readOnly={this.readonly}\n                  onInput={this.handleInputOptions}\n                  onFocus={this.handleInputFocusOptions}\n                  onBlur={this.handleInputBlurOptions}\n                  onKeyDown={this.handleKeyDown}\n                  data-scope=\"focusable\"\n                  aria-label={this.label}\n                  aria-controls={`${this.inputId}-listbox`}\n                />\n              ) : (\n                <Fragment>\n                  <input\n                    id={this.inputId}\n                    type=\"text\"\n                    style={{\n                      position: 'absolute',\n                      opacity: '0',\n                      width: '0',\n                      height: '0',\n                      pointerEvents: 'none',\n                    }}\n                    tabIndex={-1}\n                    aria-hidden=\"true\"\n                    autoComplete={this.autocomplete}\n                    name={this.name}\n                    onFocus={this.handleInputFocusOptions}\n                  />\n                  <p\n                    id={this.inputId}\n                    class=\"non-filterable-text\"\n                    onClick={this.handleInputContainerClickOptions}\n                    tabIndex={0}\n                    onKeyDown={this.handleKeyDown}\n                    onFocus={this.handleInputFocusOptions}\n                    aria-label={this.label}\n                    aria-controls={`${this.inputId}-listbox`}\n                    data-scope=\"focusable\"\n                    role=\"button\"\n                  >\n                    <span>{this.placeholder}</span>\n                  </p>\n                </Fragment>\n              )}\n\n              {this.error && (\n                <nv-icon name=\"alert-circle\" class=\"validation\" size=\"md\" />\n              )}\n\n              {this.filterable && this.filterText.length > 0 && (\n                <nv-iconbutton\n                  data-scope=\"clear-filter\"\n                  name=\"x\"\n                  size=\"md\"\n                  emphasis=\"lower\"\n                  aria-label=\"Clear filter text\"\n                  tabindex=\"-1\"\n                  title=\"Clear filter text\"\n                  onMouseDown={() => {\n                    this.preventBlurClose = true;\n                  }}\n                  onClick={this.clearFilterText}\n                />\n              )}\n\n              <nv-iconbutton\n                data-scope=\"toggle-dropdown\"\n                name={this.open ? 'chevron-top' : 'chevron-down'}\n                size=\"md\"\n                emphasis=\"lower\"\n                aria-label={this.open ? 'Hide dropdown' : 'Show dropdown'}\n                title={this.open ? 'Hide dropdown' : 'Show dropdown'}\n                onMouseDown={() => {\n                  this.preventBlurClose = true;\n                }}\n                onClick={this.togglePopoverOptions}\n              />\n            </div>\n\n            <slot name=\"after-input\"></slot>\n          </div>\n\n          <div\n            id={`${this.inputId}-listbox`}\n            slot=\"content\"\n            style={this.maxHeight ? { maxHeight: this.maxHeight } : {}}\n          >\n            {this.shouldShowToggleAllOptionsButton() && (\n              <div class=\"select-all-container\">\n                <div class=\"select-all-header\">\n                  {this.isSelectAllSectionVisible && (\n                    <nv-fieldcheckbox\n                      checked={\n                        this.getSelectAllCheckboxStateOptions() === 'checked'\n                      }\n                      indeterminate={\n                        this.getSelectAllCheckboxStateOptions() ===\n                        'indeterminate'\n                      }\n                      label={\n                        this.getSelectAllCheckboxStateOptions() === 'unchecked'\n                          ? this.selectAllLabel\n                          : this.deselectAllLabel\n                      }\n                      onMouseDown={() => {\n                        this.preventBlurClose = true;\n                      }}\n                      onClick={this.handleSelectAllCheckboxOptionsClick}\n                    />\n                  )}\n                </div>\n              </div>\n            )}\n            <ul role=\"listbox\" aria-multiselectable=\"true\">\n              {this.options.map(option => (\n                <nv-fielddropdownitemcheck\n                  role=\"option\"\n                  label={option.label}\n                  description={option.description}\n                  value={option.value}\n                  checked={this.value.includes(option.value)}\n                  disabled={option.disabled}\n                ></nv-fielddropdownitemcheck>\n              ))}\n            </ul>\n          </div>\n        </nv-popover>\n\n        {this.renderDescriptions()}\n      </Host>\n    );\n  };\n\n  /**\n   * Renders the component in slots mode\n   * @returns {any} The JSX for slots mode\n   */\n  private renderSlotsMode = () => {\n    return (\n      <Host aria-label={this.label}>\n        {(this.label || 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={el => (this.popoverElement = el)}\n          triggerMode=\"controlled\"\n          placement=\"bottom-start\"\n          open={this.open}\n        >\n          <div class=\"input-wrapper-multiselect\" slot=\"trigger\">\n            <slot name=\"before-input\"></slot>\n\n            <div\n              class=\"input-container-multiselect\"\n              onClick={this.handleInputContainerClickSlots}\n            >\n              <slot name=\"leading-input\"></slot>\n\n              {this.value.length > 0 && (\n                <nv-badge\n                  slot=\"leading-input\"\n                  prevent-auto-close\n                  color=\"10\"\n                  dismissible={this.value.length > 0}\n                  label={`${this.value.length} ${this.badgeLabel}`}\n                  aria-label={`Clear all ${this.value.length} ${this.badgeLabel} items`}\n                  onCloseClicked={this.handleBadgeCloseSlots}\n                ></nv-badge>\n              )}\n\n              {this.filterable || this.disabled || this.readonly ? (\n                <input\n                  id={this.inputId}\n                  ref={e => (this.inputElement = e)}\n                  autocomplete={this.autocomplete}\n                  placeholder={this.placeholder}\n                  name={this.name}\n                  value={this.filterText}\n                  required={this.required}\n                  disabled={this.disabled}\n                  readOnly={this.readonly}\n                  onInput={this.handleInputSlots}\n                  onFocus={this.handleInputFocusSlots}\n                  onBlur={this.handleInputBlurSlots}\n                  onKeyDown={this.handleKeyDown}\n                  data-scope=\"focusable\"\n                  aria-label={this.label}\n                  aria-controls={`${this.inputId}-listbox`}\n                />\n              ) : (\n                <Fragment>\n                  <input\n                    id={this.inputId}\n                    type=\"text\"\n                    style={{\n                      position: 'absolute',\n                      opacity: '0',\n                      width: '0',\n                      height: '0',\n                      pointerEvents: 'none',\n                    }}\n                    tabIndex={-1}\n                    aria-hidden=\"true\"\n                    autoComplete={this.autocomplete}\n                    name={this.name}\n                    onFocus={this.handleInputFocusSlots}\n                  />\n                  <p\n                    id={this.inputId}\n                    class=\"non-filterable-text\"\n                    aria-label={this.label}\n                    onClick={this.handleInputContainerClickSlots}\n                    tabIndex={0}\n                    onKeyDown={this.handleKeyDown}\n                    onFocus={this.handleInputFocusSlots}\n                    aria-controls={`${this.inputId}-listbox`}\n                    data-scope=\"focusable\"\n                    role=\"button\"\n                  >\n                    <span>{this.placeholder}</span>\n                  </p>\n                </Fragment>\n              )}\n\n              {this.error && (\n                <nv-icon name=\"alert-circle\" class=\"validation\" size=\"md\" />\n              )}\n\n              {this.filterable && this.filterText.length > 0 && (\n                <nv-iconbutton\n                  name=\"x\"\n                  size=\"md\"\n                  emphasis=\"lower\"\n                  tabindex=\"-1\"\n                  onMouseDown={() => {\n                    this.preventBlurClose = true;\n                  }}\n                  onClick={this.clearFilterText}\n                  aria-label=\"Clear filter text\"\n                />\n              )}\n\n              <nv-iconbutton\n                data-scope=\"toggle-dropdown\"\n                name={this.open ? 'chevron-top' : 'chevron-down'}\n                size=\"md\"\n                emphasis=\"lower\"\n                aria-label={this.open ? 'Hide dropdown' : 'Show dropdown'}\n                title={this.open ? 'Hide dropdown' : 'Show dropdown'}\n                onMouseDown={() => {\n                  this.preventBlurClose = true;\n                }}\n                onClick={this.togglePopoverSlots}\n              />\n            </div>\n\n            <slot name=\"after-input\"></slot>\n          </div>\n\n          <div\n            id={`${this.inputId}-listbox`}\n            slot=\"content\"\n            style={this.maxHeight ? { maxHeight: this.maxHeight } : {}}\n          >\n            {this.shouldShowToggleAllSlotButton() && (\n              <div class=\"select-all-container\">\n                <div class=\"select-all-header\">\n                  {this.isSelectAllSectionVisible && (\n                    <nv-fieldcheckbox\n                      checked={\n                        this.getSelectAllCheckboxStateSlots() === 'checked'\n                      }\n                      indeterminate={\n                        this.getSelectAllCheckboxStateSlots() ===\n                        'indeterminate'\n                      }\n                      label={\n                        this.getSelectAllCheckboxStateSlots() === 'unchecked'\n                          ? this.selectAllLabel\n                          : this.deselectAllLabel\n                      }\n                      onMouseDown={() => {\n                        this.preventBlurClose = true;\n                      }}\n                      onClick={this.handleSelectAllCheckboxSlotsClick}\n                    />\n                  )}\n                </div>\n              </div>\n            )}\n            <slot name=\"content\"></slot>\n          </div>\n        </nv-popover>\n\n        {this.renderDescriptions()}\n      </Host>\n    );\n  };\n\n  /**\n   * Renders description and error description sections\n   * @returns {any} The JSX for descriptions\n   */\n  private renderDescriptions() {\n    return [\n      (this.description || this.el.querySelector('[slot=\"description\"]')) && (\n        <div class=\"description\">\n          <slot name=\"description\">{this.description}</slot>\n        </div>\n      ),\n      (this.errorDescription ||\n        this.el.querySelector('[slot=\"error-description\"]')) && (\n        <div hidden={!this.error} class=\"error-description\">\n          <slot name=\"error-description\">{this.errorDescription}</slot>\n        </div>\n      ),\n    ];\n  }\n\n  /**\n   * Main render method that decides which mode to render\n   * @returns {any} The JSX for the component\n   */\n  render() {\n    return this.options ? this.renderOptionsMode() : this.renderSlotsMode();\n  }\n\n  //#endregion RENDER\n  /****************************************************************************/\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/native/{p-3f139780.entry.js → p-2d647761.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as a,H as s}from"./p-d0a33e64.js";import{c as n}from"./p-8a1a6e56.js";const c="nv-stack{display:flex;align-items:center;justify-content:flex-start;flex-direction:row}nv-stack nv-col{display:flex}nv-stack:not(nv-row){flex-wrap:nowrap}nv-stack>.nv-stack-item-flex{flex-shrink:1;flex-grow:1}nv-stack>.nv-stack-item-lead{margin-right:auto}nv-stack>.nv-stack-item-lead+*{margin-left:0}nv-stack>.nv-stack-item-center{margin-right:auto;margin-left:auto}nv-stack>.nv-stack-item-tail{margin-left:auto}nv-stack>.nv-stack-nowrap{white-space:nowrap}nv-stack.nv-stack-vertical{align-items:stretch;flex-direction:column}nv-stack.nv-stack-vertical>.nv-stack-item-lead{margin-right:0;margin-bottom:auto}nv-stack.nv-stack-vertical>.nv-stack-item-lead+*{margin-top:0}nv-stack.nv-stack-vertical>.nv-stack-item-tail{margin-left:0;margin-top:auto}nv-stack.nv-stack-vertical>.nv-stack-item-center{margin:auto 0}nv-stack.nv-stack-flex>*{flex-shrink:1;flex-grow:1}nv-stack.nv-stack-fill>*{height:100%}nv-stack.nv-stack-fill.nv-stack-vertical>*{height:auto;width:100%}";const e=c;const i=class{constructor(a){t(this,a);this.gutter=2}render(){return a(s,{key:"0a93c321e46c7e17ac0efe09556ee4447fec5f74",class:n(this.fill&&"nv-stack-fill",this.flex&&"nv-stack-flex",this.full&&"w-full",this.gutter&&!this.vertical&&`gap-x-${this.gutter}`,this.gutter&&this.vertical&&`gap-y-${this.gutter}`,this.vertical&&"nv-stack-vertical")},a("slot",{key:"faf55f3f579311c333e1ea66f1a19ace98594377"}))}};i.style=e;export{i as nv_stack};
-//# sourceMappingURL=p-3f139780.entry.js.map
+import{r as t,h as a,H as s}from"./p-d0a33e64.js";import{c as n}from"./p-8a1a6e56.js";const c="nv-stack{display:flex;align-items:center;justify-content:flex-start;flex-direction:row}nv-stack nv-col{display:flex}nv-stack:not(nv-row){flex-wrap:nowrap}nv-stack>.nv-stack-item-flex{flex-shrink:1;flex-grow:1}nv-stack>.nv-stack-item-lead{margin-right:auto}nv-stack>.nv-stack-item-lead+*{margin-left:0}nv-stack>.nv-stack-item-center{margin-right:auto;margin-left:auto}nv-stack>.nv-stack-item-tail{margin-left:auto}nv-stack>.nv-stack-nowrap{white-space:nowrap}nv-stack.nv-stack-vertical{align-items:stretch;flex-direction:column}nv-stack.nv-stack-vertical>.nv-stack-item-lead{margin-right:0;margin-bottom:auto}nv-stack.nv-stack-vertical>.nv-stack-item-lead+*{margin-top:0}nv-stack.nv-stack-vertical>.nv-stack-item-tail{margin-left:0;margin-top:auto}nv-stack.nv-stack-vertical>.nv-stack-item-center{margin:auto 0}nv-stack.nv-stack-flex>*{flex-shrink:1;flex-grow:1}nv-stack.nv-stack-fill>*{height:100%}nv-stack.nv-stack-fill.nv-stack-vertical>*{height:auto;width:100%}";const e=c;const i=class{constructor(a){t(this,a);this.gutter=2}render(){return a(s,{key:"6a314d1f6679d4cbbd01fc08ce54fc0f7709e3e0",class:n(this.fill&&"nv-stack-fill",this.flex&&"nv-stack-flex",this.full&&"w-full",this.gutter&&!this.vertical&&`gap-x-${this.gutter}`,this.gutter&&this.vertical&&`gap-y-${this.gutter}`,this.vertical&&"nv-stack-vertical")},a("slot",{key:"d3c5d0fd8f44b23a3cfae00aa39de8722babca2a"}))}};i.style=e;export{i as nv_stack};
+//# sourceMappingURL=p-2d647761.entry.js.map

package/dist/native/{p-ff248eb8.entry.js → p-348c6bb4.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as i,h as s,F as e,H as a,g as o}from"./p-d0a33e64.js";import{B as n}from"./p-e2d0a77d.js";const l="nv-dialogfooter{display:flex;padding:var(--dialog-footer-padding-top) var(--dialog-footer-padding-x) var(--dialog-footer-padding-bottom) var(--dialog-footer-padding-x);justify-content:flex-end;align-items:flex-end;gap:var(--dialog-footer-gap-y);align-self:stretch}";const r=l;const d=class{constructor(s){t(this,s);this.dialogCanceled=i(this,"dialogCanceled",7);this.dialogPrimaryClicked=i(this,"dialogPrimaryClicked",7);if(s.$hostElement$["s-ei"]){this.internals=s.$hostElement$["s-ei"]}else{this.internals=s.$hostElement$.attachInternals();s.$hostElement$["s-ei"]=this.internals}this.hasSlot=false;this.disabled=false;this.undismissable=false;this.leadingIcon="";this.trailingIcon="";this.danger=false;this.cancelLabel="Cancel";this.primaryLabel="Primary";this.primaryButtonType=n.Button;this.handlePrimary=t=>{t.stopPropagation();this.dialogPrimaryClicked.emit()};this.handleCancel=t=>{t.stopPropagation();this.dialogCanceled.emit()}}componentWillLoad(){this.hasSlot=Array.from(this.el.childNodes).some((t=>t.nodeType===Node.ELEMENT_NODE&&!t.hasAttribute("slot")))}render(){return s(a,{key:"278895398ddd9fd6aaf6da3d0cbcad12d628f908"},!this.hasSlot?s(e,null,!this.undismissable&&s("nv-button",{onClick:this.handleCancel,emphasis:"low",size:"sm"},this.cancelLabel),s("nv-button",{onClick:this.handlePrimary,disabled:this.disabled,danger:this.danger,size:"sm",emphasis:"high",form:this.form,type:this.primaryButtonType},this.leadingIcon&&s("nv-icon",{slot:"leading-icon",name:this.leadingIcon,size:"sm"}),this.primaryLabel,this.trailingIcon&&s("nv-icon",{slot:"trailing-icon",name:this.trailingIcon,size:"sm"}))):s("slot",null))}static get formAssociated(){return true}get el(){return o(this)}};d.style=r;const h='nv-dialogheader{padding:var(--dialog-header-padding-top) var(--dialog-header-padding-x) var(--dialog-header-padding-bottom) var(--dialog-header-padding-x);justify-content:space-between;align-items:flex-start;align-self:stretch}nv-dialogheader .heading{color:var(--color-content-high-text);font-family:"TT Norms Pro", sans-serif;font-size:var(--font-size-lg);font-style:normal;font-weight:500;padding-right:var(--spacing-7);line-height:var(--leading-px-6);letter-spacing:var(--letter-spacing-heading-xs)}nv-dialogheader .subheading{color:var(--color-content-low-text);font-family:"TT Norms Pro", sans-serif;font-size:var(--font-size-sm);font-style:normal;font-weight:400;line-height:var(--line-height-sm);}';const g=h;const c=class{constructor(i){t(this,i);this.hasSlot=false;this.heading="Dialog Title"}componentWillLoad(){this.hasSlot=Array.from(this.el.childNodes).some((t=>t.nodeType===Node.ELEMENT_NODE&&!t.hasAttribute("slot")))}render(){return s(a,{key:"2ace10c91041456a36909763b62a2adeede183c7"},!this.hasSlot?s(e,null,s("div",{class:"heading"},this.heading),s("div",{class:"subheading"},this.subheading)):s("slot",null))}get el(){return o(this)}};c.style=g;export{d as nv_dialogfooter,c as nv_dialogheader};
-//# sourceMappingURL=p-ff248eb8.entry.js.map
+import{r as t,c as i,h as s,F as e,H as a,g as o}from"./p-d0a33e64.js";import{B as n}from"./p-fc9564b3.js";const l="nv-dialogfooter{display:flex;padding:var(--dialog-footer-padding-top) var(--dialog-footer-padding-x) var(--dialog-footer-padding-bottom) var(--dialog-footer-padding-x);justify-content:flex-end;align-items:flex-end;gap:var(--dialog-footer-gap-y);align-self:stretch}";const r=l;const d=class{constructor(s){t(this,s);this.dialogCanceled=i(this,"dialogCanceled",7);this.dialogPrimaryClicked=i(this,"dialogPrimaryClicked",7);if(s.$hostElement$["s-ei"]){this.internals=s.$hostElement$["s-ei"]}else{this.internals=s.$hostElement$.attachInternals();s.$hostElement$["s-ei"]=this.internals}this.hasSlot=false;this.disabled=false;this.undismissable=false;this.leadingIcon="";this.trailingIcon="";this.danger=false;this.cancelLabel="Cancel";this.primaryLabel="Primary";this.primaryButtonType=n.Button;this.handlePrimary=t=>{t.stopPropagation();this.dialogPrimaryClicked.emit()};this.handleCancel=t=>{t.stopPropagation();this.dialogCanceled.emit()}}componentWillLoad(){this.hasSlot=Array.from(this.el.childNodes).some((t=>t.nodeType===Node.ELEMENT_NODE&&!t.hasAttribute("slot")))}render(){return s(a,{key:"313836d5d0bc1704325aa200f0ed115bf3e63e7d"},!this.hasSlot?s(e,null,!this.undismissable&&s("nv-button",{onClick:this.handleCancel,emphasis:"low",size:"sm"},this.cancelLabel),s("nv-button",{onClick:this.handlePrimary,disabled:this.disabled,danger:this.danger,size:"sm",emphasis:"high",form:this.form,type:this.primaryButtonType},this.leadingIcon&&s("nv-icon",{slot:"leading-icon",name:this.leadingIcon,size:"sm"}),this.primaryLabel,this.trailingIcon&&s("nv-icon",{slot:"trailing-icon",name:this.trailingIcon,size:"sm"}))):s("slot",null))}static get formAssociated(){return true}get el(){return o(this)}};d.style=r;const h='nv-dialogheader{padding:var(--dialog-header-padding-top) var(--dialog-header-padding-x) var(--dialog-header-padding-bottom) var(--dialog-header-padding-x);justify-content:space-between;align-items:flex-start;align-self:stretch}nv-dialogheader .heading{color:var(--color-content-high-text);font-family:"TT Norms Pro", sans-serif;font-size:var(--font-size-lg);font-style:normal;font-weight:500;padding-right:var(--spacing-7);line-height:var(--leading-px-6);letter-spacing:var(--letter-spacing-heading-xs)}nv-dialogheader .subheading{color:var(--color-content-low-text);font-family:"TT Norms Pro", sans-serif;font-size:var(--font-size-sm);font-style:normal;font-weight:400;line-height:var(--line-height-sm);}';const g=h;const f=class{constructor(i){t(this,i);this.hasSlot=false;this.heading="Dialog Title"}componentWillLoad(){this.hasSlot=Array.from(this.el.childNodes).some((t=>t.nodeType===Node.ELEMENT_NODE&&!t.hasAttribute("slot")))}render(){return s(a,{key:"f91a9aea8aa7116266f52bb356ef2ec493df6354"},!this.hasSlot?s(e,null,s("div",{class:"heading"},this.heading),s("div",{class:"subheading"},this.subheading)):s("slot",null))}get el(){return o(this)}};f.style=g;export{d as nv_dialogfooter,f as nv_dialogheader};
+//# sourceMappingURL=p-348c6bb4.entry.js.map

package/dist/native/p-397c0fca.entry.js

@@ -0,0 +1,2 @@
+import{r as o,h as t,H as e,g as n}from"./p-d0a33e64.js";import{B as s,b as r}from"./p-fc9564b3.js";const a='nv-button{text-decoration:none;display:inline-flex;justify-content:center;align-items:center;font-style:normal;font-weight:var(--font-weight-medium-emphasis);font-family:"TT Norms Pro", sans-serif;transition:background-color 150ms ease-out;user-select:none;cursor:pointer;height:fit-content;width:fit-content}nv-button[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)}nv-button[size=xs] nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-button[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)}nv-button[size=sm] nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-button[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)}nv-button[size=md] nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-button[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)}nv-button[size=lg] nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-button[emphasis=high]{background:var(--components-button-high-background);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text)}nv-button[emphasis=high]:hover{background:var(--components-button-high-background-hover);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text-hover)}nv-button[emphasis=high]:active{background:var(--components-button-high-background-active);border:1px solid var(--components-button-high-border-active);color:var(--components-button-high-text-active)}nv-button[emphasis=high]:focus,nv-button[emphasis=high]:focus-within{outline:none}nv-button[emphasis=high]:focus-visible,nv-button[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);z-index:111}nv-button[emphasis=high]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=high][active]:not([active=false]){background:var(--components-button-high-background-active);border:1px solid var(--components-button-high-border-active);color:var(--components-button-high-text-active)}nv-button[emphasis=high][danger]:not([danger=false]){background:var(--components-button-destructive-high-background);border:1px solid transparent;color:var(--components-button-destructive-high-text)}nv-button[emphasis=high][danger]:not([danger=false]):hover{background:var(--components-button-destructive-high-background-hover);border:1px solid transparent;color:var(--components-button-destructive-high-text-hover)}nv-button[emphasis=high][danger]:not([danger=false]):focus,nv-button[emphasis=high][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=high][danger]:not([danger=false]):focus-visible,nv-button[emphasis=high][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-button[emphasis=medium]{background:var(--components-button-medium-background);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text)}nv-button[emphasis=medium]:hover{background:var(--components-button-medium-background-hover);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text-hover)}nv-button[emphasis=medium]:active{background:var(--components-button-medium-background-active);border:1px solid var(--components-button-medium-border-active);color:var(--components-button-medium-text-active)}nv-button[emphasis=medium]:focus,nv-button[emphasis=medium]:focus-within{outline:none}nv-button[emphasis=medium]:focus-visible,nv-button[emphasis=medium]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-button[emphasis=medium]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=medium][active]:not([active=false]){background:var(--components-button-medium-background-active);border:1px solid var(--components-button-medium-border-active);color:var(--components-button-medium-text-active)}nv-button[emphasis=medium][danger]:not([danger=false]){background:var(--components-button-destructive-medium-background);border:1px solid var(--components-button-destructive-medium-border);color:var(--components-button-destructive-medium-text)}nv-button[emphasis=medium][danger]:not([danger=false]):hover{background:var(--components-button-destructive-medium-background-hover);border:1px solid var(--components-button-destructive-medium-border);color:var(--components-button-destructive-medium-text-hover)}nv-button[emphasis=medium][danger]:not([danger=false]):focus,nv-button[emphasis=medium][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=medium][danger]:not([danger=false]):focus-visible,nv-button[emphasis=medium][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-button[emphasis=low]{background:var(--components-button-low-background);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text)}nv-button[emphasis=low]:hover{background:var(--components-button-low-background-hover);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text-hover)}nv-button[emphasis=low]: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-button[emphasis=low]:focus,nv-button[emphasis=low]:focus-within{outline:none}nv-button[emphasis=low]:focus-visible,nv-button[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);z-index:111}nv-button[emphasis=low]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=low][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-button[emphasis=low][danger]:not([danger=false]){background:var(--components-button-destructive-low-background);border:1px solid var(--components-button-destructive-low-border);color:var(--components-button-destructive-low-text)}nv-button[emphasis=low][danger]:not([danger=false]):hover{background:var(--components-button-destructive-low-background-hover);border:1px solid var(--components-button-destructive-low-border);color:var(--components-button-destructive-low-text-hover)}nv-button[emphasis=low][danger]:not([danger=false]):focus,nv-button[emphasis=low][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=low][danger]:not([danger=false]):focus-visible,nv-button[emphasis=low][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-button[emphasis=lower]{background:var(--components-button-lower-background);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text)}nv-button[emphasis=lower]:hover{background:var(--components-button-lower-background-hover);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text-hover)}nv-button[emphasis=lower]: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-button[emphasis=lower]:focus,nv-button[emphasis=lower]:focus-within{outline:none}nv-button[emphasis=lower]:focus-visible,nv-button[emphasis=lower]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-button[emphasis=lower]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=lower][active]:not([active=false]){background:var(--components-button-lower-background-active);border:1px solid var(--components-button-lower-border-active);color:var(--components-button-lower-text-active)}nv-button[emphasis=lower][danger]:not([danger=false]){background:var(--components-button-destructive-lower-background);border:1px solid var(--components-button-destructive-lower-border);color:var(--components-button-destructive-lower-text)}nv-button[emphasis=lower][danger]:not([danger=false]):hover{background:var(--components-button-destructive-lower-background-hover);border:1px solid var(--components-button-destructive-lower-border);color:var(--components-button-destructive-lower-text-hover)}nv-button[emphasis=lower][danger]:not([danger=false]):focus,nv-button[emphasis=lower][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=lower][danger]:not([danger=false]):focus-visible,nv-button[emphasis=lower][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-button[fluid]:not([fluid=false]){width:100%}nv-button[loading]:not([loading=false]) [slot=leading-icon]{display:none}';const i=a;const u=class{constructor(t){o(this,t);if(t.$hostElement$["s-ei"]){this.internals=t.$hostElement$["s-ei"]}else{this.internals=t.$hostElement$.attachInternals();t.$hostElement$["s-ei"]=this.internals}this.size="md";this.emphasis="high";this.active=false;this.danger=false;this.loading=false;this.disabled=false;this.fluid=false;this.type="button";this.handleButtonClick=o=>{var t;if(this.loading||this.disabled){o.preventDefault();return}if(this.type!==s.Button&&(this.form||((t=this.internals)===null||t===void 0?void 0:t.form))){this.processFormAction()}else if(this.form&&this.type===s.Button){console.warn("Button has a form id but is not of type submit or reset so no form action will be processed.",`Button:`,this.el)}};this.processFormAction=()=>{var o,t;const e=this.form?document.getElementById(this.form):(o=this.internals)===null||o===void 0?void 0:o.form;if(!e){console.warn("No form element found.",`Form ID: ${this.form||"Not provided"}`,`Internals form:`,(t=this.internals)===null||t===void 0?void 0:t.form);return}switch(this.type){case s.Submit:e.requestSubmit();break;case s.Reset:e.reset();break}}}handleKeyDown(o){if(o.key==="Enter"||o.key===" "){o.preventDefault();this.el.click()}}handleTouchStart(o){if(o.touches.length>1)return;o.preventDefault();this.el.click()}handleLoadingChange(o){this.loading=o;this.disabled=o}handleDisabledChange(o){if(this.loading){this.disabled=this.loading}else{this.disabled=o}}componentWillLoad(){if(this.loading){this.disabled=this.loading}}render(){return t(e,{key:"54c0b3351f4d8a180058a03e61a562882fb98498",role:"button",tabindex:"0",onClick:this.handleButtonClick},this.loading&&t("nv-loader",{key:"21315e4af4111bcf47c67e65a9a58a1d7121a43e",size:this.size===r.Large?"sm":"xs"}),t("slot",{key:"f37683ddaa2c11c5b7accfc99429c930f5a3dcf6",name:"leading-icon"}),t("slot",{key:"d17ebe7505d9027c6c58f930a8ea9b097561cead"}),t("slot",{key:"2cd6c9756cc7540417041adf5830b734291b2ab5",name:"trailing-icon"}))}static get formAssociated(){return true}get el(){return n(this)}static get watchers(){return{loading:["handleLoadingChange"],disabled:["handleDisabledChange"]}}};u.style=i;export{u as nv_button};
+//# sourceMappingURL=p-397c0fca.entry.js.map

package/dist/native/{p-51a57a3a.entry.js.map → p-397c0fca.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["nvButtonCss","NvButtonStyle0","NvButton","constructor","hostRef","this","size","emphasis","active","danger","loading","disabled","fluid","type","handleButtonClick","event","preventDefault","ButtonType","Button","form","_a","internals","processFormAction","console","warn","el","formElement","document","getElementById","_b","Submit","requestSubmit","Reset","reset","handleKeyDown","key","click","handleTouchStart","touches","length","handleLoadingChange","handleDisabledChange","componentWillLoad","render","h","Host","role","tabindex","onClick","ButtonSize","Large","name"],"sources":["src/components/nv-button/styles/nv-button.scss?tag=nv-button","src/components/nv-button/nv-button.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n\n// Make sure to update nv-button class in the tailwind-components.scss file when\n// you add new styles or change the structure here.\nnv-button {\n  @include root-styles();\n\n  @each $size in $sizes {\n    &[size=\"#{$size}\"] {\n      @include size-styles($size);\n    }\n  }\n\n  @each $emphasis in $emphases {\n    &[emphasis=\"#{$emphasis}\"] {\n      @include emphasis-styles($emphasis);\n\n      &[active]:not([active=\"false\"]) {\n        @include active-styles($emphasis);\n      }\n\n      &[danger]:not([danger=\"false\"]) {\n        @include danger-styles($emphasis);\n      }\n    }\n  }\n\n  &[fluid]:not([fluid=\"false\"]) {\n    @include fluid-styles();\n  }\n\n  &[loading]:not([loading=\"false\"]) {\n    [slot=\"leading-icon\"] {\n      display: none;\n    }\n  }\n}\n","import {\n  Component,\n  Listen,\n  Host,\n  h,\n  Prop,\n  AttachInternals,\n  Element,\n  Watch,\n} from '@stencil/core';\n\nimport { ButtonSize, ButtonEmphasis, ButtonType } from '../../utils/constants';\n\n/**\n * @slot default - Content of the button.\n * @slot leading-icon - Icon before the label.\n * @slot trailing-icon - Icon after the label.\n */\n@Component({\n  tag: 'nv-button',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'styles/nv-button.scss',\n})\nexport class NvButton {\n  @AttachInternals() internals: ElementInternals;\n  @Element() el: HTMLNvButtonElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Determines how large or small the button appears, allowing for\n   * customization of the button's dimensions to fit different design\n   * specifications and user needs.\n   */\n  @Prop({ reflect: true })\n  readonly size: `${ButtonSize}` = 'md';\n\n  /**\n   * Adjusts the button's emphasis to make it more or less visually prominent\n   * to users. Use this to draw attention to important actions or reduce focus\n   * on less critical ones\n   */\n  @Prop({ reflect: true })\n  readonly emphasis: `${ButtonEmphasis}` = 'high';\n\n  /**\n   * Use this prop to highlight the button when it represents the current page\n   * or active selection. This helps users understand their navigation context.\n   */\n  @Prop({ reflect: true })\n  readonly active: boolean = false;\n\n  /**\n   * Applies styling that visually indicates the button represents a dangerous\n   * action.\n   */\n  @Prop({ reflect: true })\n  readonly danger: boolean = false;\n\n  /**\n   * Set this to true to show a spinner on the button, letting users know that\n   * their action is being processed. It helps improve user experience by\n   * indicating ongoing activities.\n   */\n  @Prop({ reflect: true, mutable: true })\n  loading: boolean = false;\n\n  /**\n   * Disables the button, preventing user interaction.\n   */\n  @Prop({ reflect: true, mutable: true })\n  disabled: boolean = false;\n\n  /**\n   * Allows the button to stretch and fill the entire width of its container.\n   */\n  @Prop({ reflect: true })\n  readonly fluid: boolean = false;\n\n  /**\n   * Sets the button type to control its function in forms. Use 'submit' to send\n   * form data, 'reset' to clear the form, or 'button' for a standard button\n   * that doesn't interact with form submission by default.\n   */\n  @Prop({ reflect: true })\n  readonly type: `${ButtonType}` = 'button';\n\n  /**\n   * Sets the form associated with the button in case the (submit) button is not a child of a form.\n   * Matches the native HTML button 'form' attribute behavior.\n   */\n  @Prop({ reflect: true })\n  readonly form: string;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles button click events, managing form actions and disabled states.\n   * Prevents default behavior when button is disabled or loading, and\n   * processes form submissions/resets when appropriate.\n   * @param {Event} event - The click event.\n   */\n  private handleButtonClick = (event: Event): void => {\n    if (this.loading || this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    if (\n      this.type !== ButtonType.Button &&\n      (this.form || this.internals?.form)\n    ) {\n      this.processFormAction();\n    } else if (this.form && this.type === ButtonType.Button) {\n      console.warn(\n        'Button has a form id but is not of type submit or reset so no form action will be processed.',\n        `Button:`,\n        this.el,\n      );\n    }\n  };\n\n  /**\n   * Processes form-related actions by finding the associated form element\n   * and triggering the appropriate action (submit/reset) based on button type.\n   * Falls back to ElementInternals form if no explicit form ID is provided.\n   */\n  private processFormAction = (): void => {\n    const formElement = this.form\n      ? (document.getElementById(this.form) as HTMLFormElement)\n      : this.internals?.form;\n\n    if (!formElement) {\n      console.warn(\n        'No form element found.',\n        `Form ID: ${this.form || 'Not provided'}`,\n        `Internals form:`,\n        this.internals?.form,\n      );\n      return;\n    }\n\n    switch (this.type) {\n      case ButtonType.Submit:\n        formElement.requestSubmit();\n        break;\n      case ButtonType.Reset:\n        formElement.reset();\n        break;\n    }\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region EVENTS\n\n  @Listen('keydown', { passive: false })\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.el.click();\n    }\n  }\n\n  @Listen('touchstart', { passive: false })\n  handleTouchStart(event: TouchEvent) {\n    if (event.touches.length > 1) return;\n    event.preventDefault();\n    this.el.click();\n  }\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('loading')\n  handleLoadingChange(loading: boolean) {\n    this.loading = loading;\n    this.disabled = loading;\n  }\n\n  @Watch('disabled')\n  handleDisabledChange(disabled: boolean) {\n    if (this.loading) {\n      this.disabled = this.loading;\n    } else {\n      this.disabled = disabled;\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (this.loading) {\n      this.disabled = this.loading;\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host role=\"button\" tabindex=\"0\" onClick={this.handleButtonClick}>\n        {this.loading && (\n          <nv-loader\n            size={this.size === ButtonSize.Large ? 'sm' : 'xs'}\n          ></nv-loader>\n        )}\n\n        <slot name=\"leading-icon\"></slot>\n        <slot></slot>\n        <slot name=\"trailing-icon\"></slot>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"mappings":"oGAAA,MAAMA,EAAc,w1TACpB,MAAAC,EAAeD,E,MCuBFE,EAAQ,MANrB,WAAAC,CAAAC,G,0KAmBWC,KAAAC,KAAwB,KAQxBD,KAAAE,SAAgC,OAOhCF,KAAAG,OAAkB,MAOlBH,KAAAI,OAAkB,MAQ3BJ,KAAAK,QAAmB,MAMnBL,KAAAM,SAAoB,MAMXN,KAAAO,MAAiB,MAQjBP,KAAAQ,KAAwB,SAmBzBR,KAAAS,kBAAqBC,I,MAC3B,GAAIV,KAAKK,SAAWL,KAAKM,SAAU,CACjCI,EAAMC,iBACN,M,CAGF,GACEX,KAAKQ,OAASI,EAAWC,SACxBb,KAAKc,QAAQC,EAAAf,KAAKgB,aAAS,MAAAD,SAAA,SAAAA,EAAED,OAC9B,CACAd,KAAKiB,mB,MACA,GAAIjB,KAAKc,MAAQd,KAAKQ,OAASI,EAAWC,OAAQ,CACvDK,QAAQC,KACN,+FACA,UACAnB,KAAKoB,G,GAUHpB,KAAAiB,kBAAoB,K,QAC1B,MAAMI,EAAcrB,KAAKc,KACpBQ,SAASC,eAAevB,KAAKc,OAC9BC,EAAAf,KAAKgB,aAAS,MAAAD,SAAA,SAAAA,EAAED,KAEpB,IAAKO,EAAa,CAChBH,QAAQC,KACN,yBACA,YAAYnB,KAAKc,MAAQ,iBACzB,mBACAU,EAAAxB,KAAKgB,aAAS,MAAAQ,SAAA,SAAAA,EAAEV,MAElB,M,CAGF,OAAQd,KAAKQ,MACX,KAAKI,EAAWa,OACdJ,EAAYK,gBACZ,MACF,KAAKd,EAAWe,MACdN,EAAYO,QACZ,M,EASN,aAAAC,CAAcnB,GACZ,GAAIA,EAAMoB,MAAQ,SAAWpB,EAAMoB,MAAQ,IAAK,CAC9CpB,EAAMC,iBACNX,KAAKoB,GAAGW,O,EAKZ,gBAAAC,CAAiBtB,GACf,GAAIA,EAAMuB,QAAQC,OAAS,EAAG,OAC9BxB,EAAMC,iBACNX,KAAKoB,GAAGW,O,CAQV,mBAAAI,CAAoB9B,GAClBL,KAAKK,QAAUA,EACfL,KAAKM,SAAWD,C,CAIlB,oBAAA+B,CAAqB9B,GACnB,GAAIN,KAAKK,QAAS,CAChBL,KAAKM,SAAWN,KAAKK,O,KAChB,CACLL,KAAKM,SAAWA,C,EAQpB,iBAAA+B,GACE,GAAIrC,KAAKK,QAAS,CAChBL,KAAKM,SAAWN,KAAKK,O,EAQzB,MAAAiC,GACE,OACEC,EAACC,EAAI,CAAAV,IAAA,2CAACW,KAAK,SAASC,SAAS,IAAIC,QAAS3C,KAAKS,mBAC5CT,KAAKK,SACJkC,EAAA,aAAAT,IAAA,2CACE7B,KAAMD,KAAKC,OAAS2C,EAAWC,MAAQ,KAAO,OAIlDN,EAAA,QAAAT,IAAA,2CAAMgB,KAAK,iBACXP,EAAA,QAAAT,IAAA,6CACAS,EAAA,QAAAT,IAAA,2CAAMgB,KAAK,kB","ignoreList":[]}
+{"version":3,"names":["nvButtonCss","NvButtonStyle0","NvButton","constructor","hostRef","this","size","emphasis","active","danger","loading","disabled","fluid","type","handleButtonClick","event","preventDefault","ButtonType","Button","form","_a","internals","processFormAction","console","warn","el","formElement","document","getElementById","_b","Submit","requestSubmit","Reset","reset","handleKeyDown","key","click","handleTouchStart","touches","length","handleLoadingChange","handleDisabledChange","componentWillLoad","render","h","Host","role","tabindex","onClick","ButtonSize","Large","name"],"sources":["src/components/nv-button/styles/nv-button.scss?tag=nv-button","src/components/nv-button/nv-button.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n\n// Make sure to update nv-button class in the tailwind-components.scss file when\n// you add new styles or change the structure here.\nnv-button {\n  @include root-styles();\n\n  @each $size in $sizes {\n    &[size=\"#{$size}\"] {\n      @include size-styles($size);\n    }\n  }\n\n  @each $emphasis in $emphases {\n    &[emphasis=\"#{$emphasis}\"] {\n      @include emphasis-styles($emphasis);\n\n      &[active]:not([active=\"false\"]) {\n        @include active-styles($emphasis);\n      }\n\n      &[danger]:not([danger=\"false\"]) {\n        @include danger-styles($emphasis);\n      }\n    }\n  }\n\n  &[fluid]:not([fluid=\"false\"]) {\n    @include fluid-styles();\n  }\n\n  &[loading]:not([loading=\"false\"]) {\n    [slot=\"leading-icon\"] {\n      display: none;\n    }\n  }\n}\n","import {\n  Component,\n  Listen,\n  Host,\n  h,\n  Prop,\n  AttachInternals,\n  Element,\n  Watch,\n} from '@stencil/core';\n\nimport { ButtonSize, ButtonEmphasis, ButtonType } from '../../utils/constants';\n\n/**\n * @slot default - Content of the button.\n * @slot leading-icon - Icon before the label.\n * @slot trailing-icon - Icon after the label.\n */\n@Component({\n  tag: 'nv-button',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'styles/nv-button.scss',\n})\nexport class NvButton {\n  @AttachInternals() internals: ElementInternals;\n  @Element() el: HTMLNvButtonElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Determines how large or small the button appears, allowing for\n   * customization of the button's dimensions to fit different design\n   * specifications and user needs.\n   */\n  @Prop({ reflect: true })\n  readonly size: `${ButtonSize}` = 'md';\n\n  /**\n   * Adjusts the button's emphasis to make it more or less visually prominent\n   * to users. Use this to draw attention to important actions or reduce focus\n   * on less critical ones\n   */\n  @Prop({ reflect: true })\n  readonly emphasis: `${ButtonEmphasis}` = 'high';\n\n  /**\n   * Use this prop to highlight the button when it represents the current page\n   * or active selection. This helps users understand their navigation context.\n   */\n  @Prop({ reflect: true })\n  readonly active: boolean = false;\n\n  /**\n   * Applies styling that visually indicates the button represents a dangerous\n   * action.\n   */\n  @Prop({ reflect: true })\n  readonly danger: boolean = false;\n\n  /**\n   * Set this to true to show a spinner on the button, letting users know that\n   * their action is being processed. It helps improve user experience by\n   * indicating ongoing activities.\n   */\n  @Prop({ reflect: true, mutable: true })\n  loading: boolean = false;\n\n  /**\n   * Disables the button, preventing user interaction.\n   */\n  @Prop({ reflect: true, mutable: true })\n  disabled: boolean = false;\n\n  /**\n   * Allows the button to stretch and fill the entire width of its container.\n   */\n  @Prop({ reflect: true })\n  readonly fluid: boolean = false;\n\n  /**\n   * Sets the button type to control its function in forms. Use 'submit' to send\n   * form data, 'reset' to clear the form, or 'button' for a standard button\n   * that doesn't interact with form submission by default.\n   */\n  @Prop({ reflect: true })\n  readonly type: `${ButtonType}` = 'button';\n\n  /**\n   * Sets the form associated with the button in case the (submit) button is not a child of a form.\n   * Matches the native HTML button 'form' attribute behavior.\n   */\n  @Prop({ reflect: true })\n  readonly form: string;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles button click events, managing form actions and disabled states.\n   * Prevents default behavior when button is disabled or loading, and\n   * processes form submissions/resets when appropriate.\n   * @param {Event} event - The click event.\n   */\n  private handleButtonClick = (event: Event): void => {\n    if (this.loading || this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    if (\n      this.type !== ButtonType.Button &&\n      (this.form || this.internals?.form)\n    ) {\n      this.processFormAction();\n    } else if (this.form && this.type === ButtonType.Button) {\n      console.warn(\n        'Button has a form id but is not of type submit or reset so no form action will be processed.',\n        `Button:`,\n        this.el,\n      );\n    }\n  };\n\n  /**\n   * Processes form-related actions by finding the associated form element\n   * and triggering the appropriate action (submit/reset) based on button type.\n   * Falls back to ElementInternals form if no explicit form ID is provided.\n   */\n  private processFormAction = (): void => {\n    const formElement = this.form\n      ? (document.getElementById(this.form) as HTMLFormElement)\n      : this.internals?.form;\n\n    if (!formElement) {\n      console.warn(\n        'No form element found.',\n        `Form ID: ${this.form || 'Not provided'}`,\n        `Internals form:`,\n        this.internals?.form,\n      );\n      return;\n    }\n\n    switch (this.type) {\n      case ButtonType.Submit:\n        formElement.requestSubmit();\n        break;\n      case ButtonType.Reset:\n        formElement.reset();\n        break;\n    }\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region EVENTS\n\n  @Listen('keydown', { passive: false })\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.el.click();\n    }\n  }\n\n  @Listen('touchstart', { passive: false })\n  handleTouchStart(event: TouchEvent) {\n    if (event.touches.length > 1) return;\n    event.preventDefault();\n    this.el.click();\n  }\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('loading')\n  handleLoadingChange(loading: boolean) {\n    this.loading = loading;\n    this.disabled = loading;\n  }\n\n  @Watch('disabled')\n  handleDisabledChange(disabled: boolean) {\n    if (this.loading) {\n      this.disabled = this.loading;\n    } else {\n      this.disabled = disabled;\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (this.loading) {\n      this.disabled = this.loading;\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host role=\"button\" tabindex=\"0\" onClick={this.handleButtonClick}>\n        {this.loading && (\n          <nv-loader\n            size={this.size === ButtonSize.Large ? 'sm' : 'xs'}\n          ></nv-loader>\n        )}\n\n        <slot name=\"leading-icon\"></slot>\n        <slot></slot>\n        <slot name=\"trailing-icon\"></slot>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"mappings":"oGAAA,MAAMA,EAAc,w7TACpB,MAAAC,EAAeD,E,MCuBFE,EAAQ,MANrB,WAAAC,CAAAC,G,0KAmBWC,KAAAC,KAAwB,KAQxBD,KAAAE,SAAgC,OAOhCF,KAAAG,OAAkB,MAOlBH,KAAAI,OAAkB,MAQ3BJ,KAAAK,QAAmB,MAMnBL,KAAAM,SAAoB,MAMXN,KAAAO,MAAiB,MAQjBP,KAAAQ,KAAwB,SAmBzBR,KAAAS,kBAAqBC,I,MAC3B,GAAIV,KAAKK,SAAWL,KAAKM,SAAU,CACjCI,EAAMC,iBACN,M,CAGF,GACEX,KAAKQ,OAASI,EAAWC,SACxBb,KAAKc,QAAQC,EAAAf,KAAKgB,aAAS,MAAAD,SAAA,SAAAA,EAAED,OAC9B,CACAd,KAAKiB,mB,MACA,GAAIjB,KAAKc,MAAQd,KAAKQ,OAASI,EAAWC,OAAQ,CACvDK,QAAQC,KACN,+FACA,UACAnB,KAAKoB,G,GAUHpB,KAAAiB,kBAAoB,K,QAC1B,MAAMI,EAAcrB,KAAKc,KACpBQ,SAASC,eAAevB,KAAKc,OAC9BC,EAAAf,KAAKgB,aAAS,MAAAD,SAAA,SAAAA,EAAED,KAEpB,IAAKO,EAAa,CAChBH,QAAQC,KACN,yBACA,YAAYnB,KAAKc,MAAQ,iBACzB,mBACAU,EAAAxB,KAAKgB,aAAS,MAAAQ,SAAA,SAAAA,EAAEV,MAElB,M,CAGF,OAAQd,KAAKQ,MACX,KAAKI,EAAWa,OACdJ,EAAYK,gBACZ,MACF,KAAKd,EAAWe,MACdN,EAAYO,QACZ,M,EASN,aAAAC,CAAcnB,GACZ,GAAIA,EAAMoB,MAAQ,SAAWpB,EAAMoB,MAAQ,IAAK,CAC9CpB,EAAMC,iBACNX,KAAKoB,GAAGW,O,EAKZ,gBAAAC,CAAiBtB,GACf,GAAIA,EAAMuB,QAAQC,OAAS,EAAG,OAC9BxB,EAAMC,iBACNX,KAAKoB,GAAGW,O,CAQV,mBAAAI,CAAoB9B,GAClBL,KAAKK,QAAUA,EACfL,KAAKM,SAAWD,C,CAIlB,oBAAA+B,CAAqB9B,GACnB,GAAIN,KAAKK,QAAS,CAChBL,KAAKM,SAAWN,KAAKK,O,KAChB,CACLL,KAAKM,SAAWA,C,EAQpB,iBAAA+B,GACE,GAAIrC,KAAKK,QAAS,CAChBL,KAAKM,SAAWN,KAAKK,O,EAQzB,MAAAiC,GACE,OACEC,EAACC,EAAI,CAAAV,IAAA,2CAACW,KAAK,SAASC,SAAS,IAAIC,QAAS3C,KAAKS,mBAC5CT,KAAKK,SACJkC,EAAA,aAAAT,IAAA,2CACE7B,KAAMD,KAAKC,OAAS2C,EAAWC,MAAQ,KAAO,OAIlDN,EAAA,QAAAT,IAAA,2CAAMgB,KAAK,iBACXP,EAAA,QAAAT,IAAA,6CACAS,EAAA,QAAAT,IAAA,2CAAMgB,KAAK,kB","ignoreList":[]}