@nova-design-system/nova-webcomponents 3.0.0-beta.36 → 3.0.0-beta.37

package/dist/native/{p-18b227b5.entry.js.map → p-9ac790b3.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["nvBadgeCss","NvBadgeStyle0","NvBadge","constructor","hostRef","this","dismissal","color","label","leadIcon","dismissible","hidden","_isHidden","preventAutoClose","handleClose","originalEvent","closeClicked","emit","handleDismissalChange","handleIconChange","icon","handleHiddenChange","hiddenChanged","fadeIn","fadeOut","useFade","ref","duration","collapse","expand","useCollapse","timeline","start","hiddenChangedComplete","componentWillLoad","setCollapsed","setFadeOut","render","h","Host","key","class","clsx","name","slot","size","onClick","type","nvFielddropdownitemcheckCss","NvFielddropdownitemcheckStyle0","NvFielddropdownitemcheck","checked","disabled","onFieldcheckboxChanged","event","detail","itemChecked","value","group","description","tabindex","role","onCheckedChanged"],"sources":["src/components/nv-badge/nv-badge.scss?tag=nv-badge","src/components/nv-badge/nv-badge.tsx","src/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.scss?tag=nv-fielddropdownitemcheck","src/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.tsx"],"sourcesContent":["@use \"sass:map\";\n@use \"../nv-icon/styles/mixins\" as icon;\n@import \"../../styles/focus-ring\";\n\n/* Variants */\n$badge-colors: (\"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\", \"10\");\n\n/* Define maps for color-related variables */\n$color-rainbow-text: (\n  \"1\": var(--color-rainbow-1-text),\n  \"2\": var(--color-rainbow-2-text),\n  \"3\": var(--color-rainbow-3-text),\n  \"4\": var(--color-rainbow-4-text),\n  \"5\": var(--color-rainbow-5-text),\n  \"6\": var(--color-rainbow-6-text),\n  \"7\": var(--color-rainbow-7-text),\n  \"8\": var(--color-rainbow-8-text),\n  \"9\": var(--color-rainbow-9-text),\n  \"10\": var(--color-rainbow-10-text)\n);\n\n$color-rainbow-icon: (\n  \"1\": var(--color-rainbow-1-icon),\n  \"2\": var(--color-rainbow-2-icon),\n  \"3\": var(--color-rainbow-3-icon),\n  \"4\": var(--color-rainbow-4-icon),\n  \"5\": var(--color-rainbow-5-icon),\n  \"6\": var(--color-rainbow-6-icon),\n  \"7\": var(--color-rainbow-7-icon),\n  \"8\": var(--color-rainbow-8-icon),\n  \"9\": var(--color-rainbow-9-icon),\n  \"10\": var(--color-rainbow-10-icon)\n);\n\n$color-rainbow-background: (\n  \"1\": var(--color-rainbow-1-background),\n  \"2\": var(--color-rainbow-2-background),\n  \"3\": var(--color-rainbow-3-background),\n  \"4\": var(--color-rainbow-4-background),\n  \"5\": var(--color-rainbow-5-background),\n  \"6\": var(--color-rainbow-6-background),\n  \"7\": var(--color-rainbow-7-background),\n  \"8\": var(--color-rainbow-8-background),\n  \"9\": var(--color-rainbow-9-background),\n  \"10\": var(--color-rainbow-10-background)\n);\n\n@mixin root-styles() {\n  padding: var(--badge-padding-y) var(--badge-padding-x);\n  display: inline-flex !important; // override the display: none in [hidden] css\n  vertical-align: middle;\n  align-items: center;\n  border-radius: var(--radius-rounded-full);\n  height: fit-content;\n  width: fit-content;\n}\n\n@mixin root-styles-with-gap() {\n  @include root-styles();\n  gap: var(--badge-gap-x);\n}\n\n@mixin badge-color($badge-number) {\n  color: map.get($color-rainbow-text, $badge-number);\n  background-color: map.get($color-rainbow-background, $badge-number);\n  .close {\n    @include focus-ring(var(--color-rainbow-#{$badge-number}-content), 0.2);\n  }\n}\n\n@mixin icon-color($badge-number) {\n  color: map.get($color-rainbow-icon, $badge-number);\n}\n\n@mixin type-settings($font-size, $line-height) {\n  font-size: var(--font-size-xs);\n  line-height: var(--line-height-xs) !important;\n}\n\nnv-badge {\n  @include root-styles();\n\n  //gap styles\n  &.with-gap {\n    @include root-styles-with-gap();\n  }\n\n  &:not(.with-gap) {\n    @include root-styles();\n  }\n\n  // color styles\n  @each $i in $badge-colors {\n    &.badge-#{$i} {\n      @include badge-color($i);\n      nv-icon {\n        @include icon-color($i);\n      }\n    }\n  }\n\n  //label styles\n  & span {\n    @include type-settings(xs, xs);\n  }\n\n  // nv-icon styles\n  & nv-icon > svg {\n    @each $size, $config in icon.$size-variants {\n      &.icon-#{$size} {\n        @include icon.icon-size-and-stroke(\n          map.get(map.get(icon.$size-variants, \"xs\"), size),\n          map.get(map.get(icon.$size-variants, \"xs\"), stroke)\n        );\n      }\n    }\n  }\n\n  .close {\n    padding: 0;\n    line-height: 0;\n    border: none;\n    background: none;\n    cursor: pointer;\n    color: inherit;\n    display: inline-flex;\n    align-items: center;\n    aspect-ratio: 1/1;\n    border-radius: var(--radius-rounded-full);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Watch,\n  Element,\n  State,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { useFade, useCollapse, timeline } from '../../animations';\n\n/**\n * @slot leading-icon - Icon before the label.\n */\n@Component({\n  tag: 'nv-badge',\n  styleUrl: 'nv-badge.scss',\n  shadow: false,\n})\nexport class NvBadge {\n  @Element() ref: HTMLNvBadgeElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Whether the badge is dismissible.\n   * @deprecated use dismissible instead.\n   */\n  @Prop()\n  readonly dismissal: boolean = false;\n\n  /**\n   * The icon to display in the badge.\n   * @deprecated use leadIcon or slot=\"leading-icon\" instead.\n   */\n  @Prop()\n  readonly icon: string;\n\n  /**\n   * The location of the icon in the badge.\n   * @deprecated only leadIcon now.\n   */\n  @Prop({ reflect: true })\n  readonly iconLocation: 'left' | 'right';\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * The color of the badge. Use a string between 1 to 10\n   */\n  @Prop({ reflect: true })\n  readonly color?: string = '1';\n\n  /**\n   * Main content of the badge.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string | null = null;\n\n  /**\n   * The lead icon of the badge.\n   */\n  @Prop({ reflect: true, mutable: true })\n  leadIcon?: string | null = null;\n\n  /**\n   * Whether the badge is dismissible.\n   */\n  @Prop({ reflect: true, mutable: true })\n  dismissible: boolean = false;\n\n  /**\n   * Controls the visibility of the badge. Will animate with fade and collapse.\n   */\n  @Prop({ reflect: true, mutable: true })\n  hidden: boolean = false; // eslint-disable-line @stencil-community/reserved-member-names\n  @State()\n  private _isHidden: boolean = this.hidden;\n\n  /**\n   * When true, the alert does not automatically close upon dismissing.\n   * Useful for externally controlled component behavior.\n   */\n  @Prop({ reflect: true })\n  readonly preventAutoClose: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the badge is dismissed.\n   */\n  @Event()\n  closeClicked: EventEmitter<MouseEvent>;\n\n  /**\n   * Emits when the 'hidden' prop changes, reflecting a change in visibility.\n   * Passes hidden value to the detail.\n   */\n  @Event()\n  hiddenChanged: EventEmitter<boolean>;\n\n  /**\n   * Emitted when the animations complete, detail includes the hidden value.\n   */\n  @Event()\n  hiddenChangedComplete: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Handles the dismissal prop change.\n   * @param {boolean} dismissal - The new dismissal value.\n   */\n  @Watch('dismissal')\n  handleDismissalChange(dismissal: boolean) {\n    this.dismissible = dismissal;\n  }\n\n  /**\n   * Handles the icon prop change.\n   * @param {string} icon - The new icon value.\n   */\n  @Watch('icon')\n  handleIconChange(icon: string) {\n    this.leadIcon = icon;\n  }\n\n  /**\n   * Handles the hidden prop change.\n   * @param {boolean} hidden - The new hidden value.\n   */\n  @Watch('hidden')\n  async handleHiddenChange(hidden: boolean) {\n    this.hiddenChanged.emit(hidden);\n    if (this._isHidden === true) this._isHidden = hidden;\n\n    const { fadeIn, fadeOut } = useFade(this.ref, { duration: 150 });\n    const { collapse, expand } = useCollapse(this.ref, { duration: 150 });\n\n    if (hidden === true) await timeline(fadeOut, collapse).start();\n    if (hidden === false) await timeline(expand, fadeIn).start();\n\n    this.hiddenChangedComplete.emit(hidden);\n\n    if (this._isHidden === false) this._isHidden = hidden;\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  /**\n   * Component will load.\n   */\n  componentWillLoad() {\n    if (this.dismissal) {\n      this.dismissible = this.dismissal;\n    }\n\n    if (this.icon != null && this.icon != '') {\n      this.leadIcon = this.icon;\n    }\n\n    if (this.hidden) {\n      const { setCollapsed } = useCollapse(this.ref);\n      const { setFadeOut } = useFade(this.ref);\n\n      setCollapsed();\n      setFadeOut();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles the close button click.\n   * @param {MouseEvent} originalEvent - The original event.\n   */\n  private readonly handleClose = (originalEvent?: MouseEvent) => {\n    if (!this.preventAutoClose) {\n      this.hidden = true;\n    }\n\n    this.closeClicked.emit(originalEvent);\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={clsx(`badge-${this.color}`, {\n          'has-close': this.dismissible,\n          'with-gap': this.dismissible || this.label,\n          'visually-hidden': this._isHidden,\n        })}\n      >\n        <slot name=\"leading-icon\">\n          {this.leadIcon && (\n            <nv-icon\n              slot=\"leading-icon\"\n              name={this.leadIcon}\n              size=\"sm\"\n            ></nv-icon>\n          )}\n        </slot>\n        {this.label && <span>{this.label}</span>}\n        {this.dismissible && (\n          <button onClick={this.handleClose} class=\"close\" type=\"button\">\n            <nv-icon name=\"x\" size=\"sm\" />\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n","nv-fielddropdownitemcheck {\n  slot-fb,\n  span {\n    all: unset;\n  }\n\n  nv-fieldcheckbox input[type='checkbox'] {\n    all: unset;\n    display: inline-block;\n    margin: 0;\n    padding: 0;\n    width: 20px;\n    height: 20px;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n} from '@stencil/core';\n\n@Component({\n  tag: 'nv-fielddropdownitemcheck',\n  styleUrl: 'nv-fielddropdownitemcheck.scss',\n  shadow: false,\n})\nexport class NvFielddropdownitemcheck {\n  @Element() el: HTMLNvFielddropdownitemcheckElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Indicates whether the checkbox is selected.\n   */\n  @Prop({ reflect: true, mutable: true })\n  checked: boolean = false;\n\n  /**\n   * The value associated with this item.\n   */\n  @Prop({ reflect: true })\n  readonly value?: string;\n\n  /**\n   * The label displayed alongside the checkbox.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string;\n\n  /**\n   * A description providing additional context or information about the\n   * checkbox.\n   */\n  @Prop({ reflect: true })\n  readonly description?: string;\n\n  /**\n   * The group this item belongs to, if applicable.\n   */\n  @Prop({ reflect: true })\n  readonly group?: string;\n\n  /**\n   * Disables the item, preventing any user interaction.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Event emitted when the checkbox is toggled.\n   * It provides details about the current state of the item.\n   */\n  @Event()\n  itemChecked: EventEmitter<{\n    /**\n     * The value associated with this item\n     */\n    value: string | undefined;\n    /**\n     * Whether the checkbox is currently checked\n     */\n    checked: boolean;\n    /**\n     * The group this item belongs to, if any\n     */\n    group?: string | undefined;\n  }>;\n\n  /**\n   * when the child <nv-fieldcheckbox> change its `checked` state,\n   * update `this.checked` and emit `itemChecked`.\n   * @param {CustomEvent<boolean>} event - The event emitted by the <nv-fieldcheckbox> component.\n   */\n  private onFieldcheckboxChanged = (event: CustomEvent<boolean>) => {\n    if (this.disabled) return;\n    // NvFieldcheckbox has emitted checkedChanged\n    this.checked = event.detail; // get the new state\n    this.itemChecked.emit({\n      value: this.value,\n      checked: this.checked,\n      group: this.group,\n    });\n  };\n\n  render() {\n    return (\n      <Host>\n        <div>\n          <nv-fieldcheckbox\n            checked={this.checked}\n            name={this.label || this.value}\n            label={this.label || this.value}\n            label-placement=\"after\"\n            description={this.description}\n            disabled={this.disabled}\n            tabindex=\"-1\"\n            role=\"option\"\n            onCheckedChanged={this.onFieldcheckboxChanged}\n          ></nv-fieldcheckbox>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["nvBadgeCss","NvBadgeStyle0","NvBadge","constructor","hostRef","this","dismissal","color","label","leadIcon","dismissible","hidden","_isHidden","preventAutoClose","handleClose","originalEvent","closeClicked","emit","handleDismissalChange","handleIconChange","icon","handleHiddenChange","hiddenChanged","fadeIn","fadeOut","useFade","ref","duration","collapse","expand","useCollapse","timeline","start","hiddenChangedComplete","componentWillLoad","setCollapsed","setFadeOut","render","h","Host","key","class","clsx","name","slot","size","onClick","type","nvFielddropdownitemcheckCss","NvFielddropdownitemcheckStyle0","NvFielddropdownitemcheck","checked","disabled","onFieldcheckboxChanged","event","detail","itemChecked","value","group","description","tabindex","role","onCheckedChanged"],"sources":["src/components/nv-badge/nv-badge.scss?tag=nv-badge","src/components/nv-badge/nv-badge.tsx","src/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.scss?tag=nv-fielddropdownitemcheck","src/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.tsx"],"sourcesContent":["@use \"sass:map\";\n@use \"../nv-icon/styles/mixins\" as icon;\n@import \"../../styles/focus-ring\";\n\n/* Variants */\n$badge-colors: (\"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\", \"10\");\n\n/* Define maps for color-related variables */\n$color-rainbow-text: (\n  \"1\": var(--color-rainbow-1-text),\n  \"2\": var(--color-rainbow-2-text),\n  \"3\": var(--color-rainbow-3-text),\n  \"4\": var(--color-rainbow-4-text),\n  \"5\": var(--color-rainbow-5-text),\n  \"6\": var(--color-rainbow-6-text),\n  \"7\": var(--color-rainbow-7-text),\n  \"8\": var(--color-rainbow-8-text),\n  \"9\": var(--color-rainbow-9-text),\n  \"10\": var(--color-rainbow-10-text)\n);\n\n$color-rainbow-icon: (\n  \"1\": var(--color-rainbow-1-icon),\n  \"2\": var(--color-rainbow-2-icon),\n  \"3\": var(--color-rainbow-3-icon),\n  \"4\": var(--color-rainbow-4-icon),\n  \"5\": var(--color-rainbow-5-icon),\n  \"6\": var(--color-rainbow-6-icon),\n  \"7\": var(--color-rainbow-7-icon),\n  \"8\": var(--color-rainbow-8-icon),\n  \"9\": var(--color-rainbow-9-icon),\n  \"10\": var(--color-rainbow-10-icon)\n);\n\n$color-rainbow-background: (\n  \"1\": var(--color-rainbow-1-background),\n  \"2\": var(--color-rainbow-2-background),\n  \"3\": var(--color-rainbow-3-background),\n  \"4\": var(--color-rainbow-4-background),\n  \"5\": var(--color-rainbow-5-background),\n  \"6\": var(--color-rainbow-6-background),\n  \"7\": var(--color-rainbow-7-background),\n  \"8\": var(--color-rainbow-8-background),\n  \"9\": var(--color-rainbow-9-background),\n  \"10\": var(--color-rainbow-10-background)\n);\n\n@mixin root-styles() {\n  padding: var(--badge-padding-y) var(--badge-padding-x);\n  display: inline-flex !important; // override the display: none in [hidden] css\n  vertical-align: middle;\n  align-items: center;\n  border-radius: var(--radius-rounded-full);\n  height: fit-content;\n  width: fit-content;\n}\n\n@mixin root-styles-with-gap() {\n  @include root-styles();\n  gap: var(--badge-gap-x);\n}\n\n@mixin badge-color($badge-number) {\n  color: map.get($color-rainbow-text, $badge-number);\n  background-color: map.get($color-rainbow-background, $badge-number);\n  .close {\n    @include focus-ring(var(--color-rainbow-#{$badge-number}-content), 0.2);\n  }\n}\n\n@mixin icon-color($badge-number) {\n  color: map.get($color-rainbow-icon, $badge-number);\n}\n\n@mixin type-settings($font-size, $line-height) {\n  font-size: var(--font-size-xs);\n  line-height: var(--line-height-xs) !important;\n}\n\nnv-badge {\n  @include root-styles();\n\n  //gap styles\n  &.with-gap {\n    @include root-styles-with-gap();\n  }\n\n  &:not(.with-gap) {\n    @include root-styles();\n  }\n\n  // color styles\n  @each $i in $badge-colors {\n    &.badge-#{$i} {\n      @include badge-color($i);\n      nv-icon {\n        @include icon-color($i);\n      }\n    }\n  }\n\n  //label styles\n  & span {\n    @include type-settings(xs, xs);\n  }\n\n  // nv-icon styles\n  & nv-icon > svg {\n    @each $size, $config in icon.$size-variants {\n      &.icon-#{$size} {\n        @include icon.icon-size-and-stroke(\n          map.get(map.get(icon.$size-variants, \"xs\"), size),\n          map.get(map.get(icon.$size-variants, \"xs\"), stroke)\n        );\n      }\n    }\n  }\n\n  .close {\n    padding: 0;\n    line-height: 0;\n    border: none;\n    background: none;\n    cursor: pointer;\n    color: inherit;\n    display: inline-flex;\n    align-items: center;\n    aspect-ratio: 1/1;\n    border-radius: var(--radius-rounded-full);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Watch,\n  Element,\n  State,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { useFade, useCollapse, timeline } from '../../animations';\n\n/**\n * @slot leading-icon - Icon before the label.\n */\n@Component({\n  tag: 'nv-badge',\n  styleUrl: 'nv-badge.scss',\n  shadow: false,\n})\nexport class NvBadge {\n  @Element() ref: HTMLNvBadgeElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Whether the badge is dismissible.\n   * @deprecated use dismissible instead.\n   */\n  @Prop()\n  readonly dismissal: boolean = false;\n\n  /**\n   * The icon to display in the badge.\n   * @deprecated use leadIcon or slot=\"leading-icon\" instead.\n   */\n  @Prop()\n  readonly icon: string;\n\n  /**\n   * The location of the icon in the badge.\n   * @deprecated only leadIcon now.\n   */\n  @Prop({ reflect: true })\n  readonly iconLocation: 'left' | 'right';\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * The color of the badge. Use a string between 1 to 10\n   */\n  @Prop({ reflect: true })\n  readonly color?: string = '1';\n\n  /**\n   * Main content of the badge.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string | null = null;\n\n  /**\n   * The lead icon of the badge.\n   */\n  @Prop({ reflect: true, mutable: true })\n  leadIcon?: string | null = null;\n\n  /**\n   * Whether the badge is dismissible.\n   */\n  @Prop({ reflect: true, mutable: true })\n  dismissible: boolean = false;\n\n  /**\n   * Controls the visibility of the badge. Will animate with fade and collapse.\n   */\n  @Prop({ reflect: true, mutable: true })\n  hidden: boolean = false; // eslint-disable-line @stencil-community/reserved-member-names\n  @State()\n  private _isHidden: boolean = this.hidden;\n\n  /**\n   * When true, the alert does not automatically close upon dismissing.\n   * Useful for externally controlled component behavior.\n   */\n  @Prop({ reflect: true })\n  readonly preventAutoClose: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the badge is dismissed.\n   */\n  @Event()\n  closeClicked: EventEmitter<MouseEvent>;\n\n  /**\n   * Emits when the 'hidden' prop changes, reflecting a change in visibility.\n   * Passes hidden value to the detail.\n   */\n  @Event()\n  hiddenChanged: EventEmitter<boolean>;\n\n  /**\n   * Emitted when the animations complete, detail includes the hidden value.\n   */\n  @Event()\n  hiddenChangedComplete: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Handles the dismissal prop change.\n   * @param {boolean} dismissal - The new dismissal value.\n   */\n  @Watch('dismissal')\n  handleDismissalChange(dismissal: boolean) {\n    this.dismissible = dismissal;\n  }\n\n  /**\n   * Handles the icon prop change.\n   * @param {string} icon - The new icon value.\n   */\n  @Watch('icon')\n  handleIconChange(icon: string) {\n    this.leadIcon = icon;\n  }\n\n  /**\n   * Handles the hidden prop change.\n   * @param {boolean} hidden - The new hidden value.\n   */\n  @Watch('hidden')\n  async handleHiddenChange(hidden: boolean) {\n    this.hiddenChanged.emit(hidden);\n    if (this._isHidden === true) this._isHidden = hidden;\n\n    const { fadeIn, fadeOut } = useFade(this.ref, { duration: 150 });\n    const { collapse, expand } = useCollapse(this.ref, { duration: 150 });\n\n    if (hidden === true) await timeline(fadeOut, collapse).start();\n    if (hidden === false) await timeline(expand, fadeIn).start();\n\n    this.hiddenChangedComplete.emit(hidden);\n\n    if (this._isHidden === false) this._isHidden = hidden;\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  /**\n   * Component will load.\n   */\n  componentWillLoad() {\n    if (this.dismissal) {\n      this.dismissible = this.dismissal;\n    }\n\n    if (this.icon != null && this.icon != '') {\n      this.leadIcon = this.icon;\n    }\n\n    if (this.hidden) {\n      const { setCollapsed } = useCollapse(this.ref);\n      const { setFadeOut } = useFade(this.ref);\n\n      setCollapsed();\n      setFadeOut();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles the close button click.\n   * @param {MouseEvent} originalEvent - The original event.\n   */\n  private readonly handleClose = (originalEvent?: MouseEvent) => {\n    if (!this.preventAutoClose) {\n      this.hidden = true;\n    }\n\n    this.closeClicked.emit(originalEvent);\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={clsx(`badge-${this.color}`, {\n          'has-close': this.dismissible,\n          'with-gap': this.dismissible || this.label,\n          'visually-hidden': this._isHidden,\n        })}\n      >\n        <slot name=\"leading-icon\">\n          {this.leadIcon && (\n            <nv-icon\n              slot=\"leading-icon\"\n              name={this.leadIcon}\n              size=\"sm\"\n            ></nv-icon>\n          )}\n        </slot>\n        {this.label && <span>{this.label}</span>}\n        {this.dismissible && (\n          <button onClick={this.handleClose} class=\"close\" type=\"button\">\n            <nv-icon name=\"x\" size=\"sm\" />\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n","nv-fielddropdownitemcheck {\n  slot-fb,\n  span {\n    all: unset;\n  }\n\n  nv-fieldcheckbox input[type='checkbox'] {\n    all: unset;\n    display: inline-block;\n    margin: 0;\n    padding: 0;\n    width: 20px;\n    height: 20px;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n} from '@stencil/core';\n\n@Component({\n  tag: 'nv-fielddropdownitemcheck',\n  styleUrl: 'nv-fielddropdownitemcheck.scss',\n  shadow: false,\n})\nexport class NvFielddropdownitemcheck {\n  @Element() el: HTMLNvFielddropdownitemcheckElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Indicates whether the checkbox is selected.\n   */\n  @Prop({ reflect: true, mutable: true })\n  checked: boolean = false;\n\n  /**\n   * The value associated with this item.\n   */\n  @Prop({ reflect: true })\n  readonly value?: string;\n\n  /**\n   * The label displayed alongside the checkbox.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string;\n\n  /**\n   * A description providing additional context or information about the\n   * checkbox.\n   */\n  @Prop({ reflect: true })\n  readonly description?: string;\n\n  /**\n   * The group this item belongs to, if applicable.\n   */\n  @Prop({ reflect: true })\n  readonly group?: string;\n\n  /**\n   * Disables the item, preventing any user interaction.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Event emitted when the checkbox is toggled.\n   * It provides details about the current state of the item.\n   */\n  @Event()\n  itemChecked: EventEmitter<{\n    /**\n     * The value associated with this item\n     */\n    value: string | undefined;\n    /**\n     * Whether the checkbox is currently checked\n     */\n    checked: boolean;\n    /**\n     * The group this item belongs to, if any\n     */\n    group?: string | undefined;\n  }>;\n\n  /**\n   * when the child <nv-fieldcheckbox> change its `checked` state,\n   * update `this.checked` and emit `itemChecked`.\n   * @param {CustomEvent<boolean>} event - The event emitted by the <nv-fieldcheckbox> component.\n   */\n  private onFieldcheckboxChanged = (event: CustomEvent<boolean>) => {\n    if (this.disabled) return;\n    // NvFieldcheckbox has emitted checkedChanged\n    this.checked = event.detail; // get the new state\n    this.itemChecked.emit({\n      value: this.value,\n      checked: this.checked,\n      group: this.group,\n    });\n  };\n\n  render() {\n    return (\n      <Host>\n        <div>\n          <nv-fieldcheckbox\n            checked={this.checked}\n            name={this.label || this.value}\n            label={this.label || this.value}\n            label-placement=\"after\"\n            description={this.description}\n            disabled={this.disabled}\n            tabindex=\"-1\"\n            role=\"option\"\n            onCheckedChanged={this.onFieldcheckboxChanged}\n          ></nv-fieldcheckbox>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/native/{p-3283505f.entry.js → p-9fb5db20.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as r,h as o,a as i,g as d}from"./p-9b093b92.js";import{v as t}from"./p-f5ff676c.js";const a='nv-fieldpassword{--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}nv-fieldpassword[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-fieldpassword[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)}nv-fieldpassword[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fieldpassword[required]:not([required=false]) label::after{content:"*";color:var(--components-form-text-required);font-weight:700}nv-fieldpassword 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-fieldpassword .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldpassword .input-wrapper .input-container{display:flex;flex-grow:1;padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);justify-content:center;align-items:center;gap:var(--form-field-gap);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);background:var(--nv-field-background);transition:all 150ms ease-out;position:relative}nv-fieldpassword .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldpassword .input-wrapper .input-container:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldpassword .input-wrapper .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldpassword .input-wrapper .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldpassword .input-wrapper .input-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height)}nv-fieldpassword .input-wrapper .input-container input:focus{outline:none}nv-fieldpassword .input-wrapper .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:"TT Norms Pro", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldpassword .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default);position:absolute;right:50px}nv-fieldpassword .description{align-self:stretch;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-fieldpassword .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fieldpassword .toggle-password-icon{position:absolute;right:-1px;border:0 solid transparent !important}';const s=a;const n=class{constructor(o){e(this,o);this.valueChanged=r(this,"valueChanged",7);this.inputId=t();this.disabled=false;this.readonly=false;this.required=false;this.error=false;this.success=false;this.mode="text";this.autocomplete="off";this.hidePasswordIcon=false;this.showPassword=false;this.showPasswordState=this.showPassword;this.handleInputContainerClick=()=>{this.inputElement.focus()};this.togglePasswordVisibility=()=>{this.showPasswordState=!this.showPasswordState};this.handleKeyDown=e=>{if(e.key===" "){e.preventDefault();setTimeout((()=>{this.togglePasswordVisibility()}),0)}};this.handleInput=e=>{const r=e.target;this.value=r.value;this.valueChanged.emit(r.value)}}handleShowPasswordChange(e){this.showPasswordState=e}render(){return o(i,{key:"3651f681b77d6955486e2d2bcc2f70d61e012089"},(this.label||this.el.querySelector('[slot="label"]'))&&o("label",{key:"24032106e853a32c2e35418e2f32126cdcf1c2e8",htmlFor:this.inputId},o("slot",{key:"44deddd654d370beaeff254eba1c054ba1250267",name:"label"},this.label)),o("div",{key:"fbbb86259a866dfd5c0c660b8e6afe5978d82dd1",class:"input-wrapper"},o("slot",{key:"05595aab730f9c430bda896137383cff6def5b9f",name:"before-input"}),o("div",{key:"0f693ce1d94f1b40cbd215a8ee92040801e9f12f",class:"input-container",onClick:this.handleInputContainerClick},o("slot",{key:"8d0c453201a6f6c874da6708f539ac3b9c62eb57",name:"leading-input"}),o("input",{key:"eaf902b52d59e1ec745d06a684cc6743878fd17a",id:this.inputId,ref:e=>this.inputElement=e,autocomplete:this.autocomplete,placeholder:this.placeholder,name:this.name,type:this.showPasswordState?"text":"password",inputMode:this.mode,value:this.value,required:this.required,maxlength:this.maxlength,minlength:this.minlength,pattern:this.pattern,disabled:this.disabled,readOnly:this.readonly,onInput:this.handleInput}),!this.hidePasswordIcon&&o("nv-iconbutton",{key:"7e52b6f031d680c601012b70e30a5b685da753b1",class:"toggle-password-icon",name:this.showPasswordState?"eye":"eye-off",size:"md",emphasis:"lower",onClick:this.togglePasswordVisibility,onKeyDown:this.handleKeyDown,"aria-label":this.showPasswordState?"Hide password":"Show password","aria-pressed":this.showPasswordState.toString()}),(this.success||this.error)&&o("nv-icon",{key:"4aeb80d040982ffa14d9783d1a6321358d883eb5",name:this.success?"circle-check":"alert-circle",class:"validation",size:"md"})),o("slot",{key:"0eaf082103ba3440d7dbd94c113a944a02de92ad",name:"after-input"})),(this.description||this.el.querySelector('[slot="description"]'))&&o("div",{key:"4de2f9371c606f503daf93370e2bf5a61c2241eb",class:"description"},o("slot",{key:"fbbe4144a1a4d9b601156c53f25d08809989bead",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&o("div",{key:"d8d81ec37edc4e05b24ee7b3c051899d49902899",hidden:!this.error,class:"error-description"},o("slot",{key:"d6c21cdefc94b7dc9c494dda505507cfb3c06c1b",name:"error-description"},this.errorDescription)))}static get formAssociated(){return true}get el(){return d(this)}static get watchers(){return{showPassword:["handleShowPasswordChange"]}}};n.style=s;export{n as nv_fieldpassword};
-//# sourceMappingURL=p-3283505f.entry.js.map
+import{r as e,c as r,h as o,a as i,g as a}from"./p-5439afb8.js";import{v as d}from"./p-f5ff676c.js";const t='nv-fieldpassword{--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}nv-fieldpassword[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-fieldpassword[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)}nv-fieldpassword[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fieldpassword[required]:not([required=false]) label::after{content:"*";color:var(--components-form-text-required);font-weight:700}nv-fieldpassword 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-fieldpassword .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldpassword .input-wrapper .input-container{display:flex;flex-grow:1;padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);justify-content:center;align-items:center;gap:var(--form-field-gap);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);background:var(--nv-field-background);transition:all 150ms ease-out;position:relative}nv-fieldpassword .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldpassword .input-wrapper .input-container:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldpassword .input-wrapper .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldpassword .input-wrapper .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldpassword .input-wrapper .input-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height)}nv-fieldpassword .input-wrapper .input-container input:focus{outline:none}nv-fieldpassword .input-wrapper .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:"TT Norms Pro", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldpassword .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default);position:absolute;right:50px}nv-fieldpassword .description{align-self:stretch;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-fieldpassword .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fieldpassword .toggle-password-icon{position:absolute;right:-1px;border:0 solid transparent !important}';const s=t;const n=class{constructor(o){e(this,o);this.valueChanged=r(this,"valueChanged",7);this.inputId=d();this.disabled=false;this.readonly=false;this.required=false;this.error=false;this.success=false;this.mode="text";this.autocomplete="off";this.hidePasswordIcon=false;this.showPassword=false;this.showPasswordState=this.showPassword;this.handleInputContainerClick=()=>{this.inputElement.focus()};this.togglePasswordVisibility=()=>{this.showPasswordState=!this.showPasswordState};this.handleKeyDown=e=>{if(e.key===" "){e.preventDefault();setTimeout((()=>{this.togglePasswordVisibility()}),0)}};this.handleInput=e=>{const r=e.target;this.value=r.value;this.valueChanged.emit(r.value)}}handleShowPasswordChange(e){this.showPasswordState=e}render(){return o(i,{key:"436b6bf9c16611d50b3cefae0b2380cee3eca0c6"},(this.label||this.el.querySelector('[slot="label"]'))&&o("label",{key:"2411ae48cb83db606a21f3f19bd008974841ad9a",htmlFor:this.inputId},o("slot",{key:"4b1843af3d0d11cded7eb354c779486e48ad989b",name:"label"},this.label)),o("div",{key:"0114ed1fa309c1df8be1cab6e18475b3e7fc34dc",class:"input-wrapper"},o("slot",{key:"4bf039f3e17beb1115ba6099d13e9adb23eca3c2",name:"before-input"}),o("div",{key:"f23ab3d1a0b28d344a667f99c8dd724d626d82fa",class:"input-container",onClick:this.handleInputContainerClick},o("slot",{key:"1a6428bda44219a2a98ab93a034a6d69f4ca98cd",name:"leading-input"}),o("input",{key:"a72a271798bc03a57508ea741d47e1ca85b3fa08",id:this.inputId,ref:e=>this.inputElement=e,autocomplete:this.autocomplete,placeholder:this.placeholder,name:this.name,type:this.showPasswordState?"text":"password",inputMode:this.mode,value:this.value,required:this.required,maxlength:this.maxlength,minlength:this.minlength,pattern:this.pattern,disabled:this.disabled,readOnly:this.readonly,onInput:this.handleInput}),!this.hidePasswordIcon&&o("nv-iconbutton",{key:"96366b1566880736596184c6c7dac481d1a190ae",class:"toggle-password-icon",name:this.showPasswordState?"eye":"eye-off",size:"md",emphasis:"lower",onClick:this.togglePasswordVisibility,onKeyDown:this.handleKeyDown,"aria-label":this.showPasswordState?"Hide password":"Show password","aria-pressed":this.showPasswordState.toString()}),(this.success||this.error)&&o("nv-icon",{key:"e6ec810a41dbbc2361d15e7b806c681e72c0a0f6",name:this.success?"circle-check":"alert-circle",class:"validation",size:"md"})),o("slot",{key:"a76b800fa51332d72b6e70e6a2fe108b465fd386",name:"after-input"})),(this.description||this.el.querySelector('[slot="description"]'))&&o("div",{key:"c6f84e11fd78209c96962878f122ad9968a6565d",class:"description"},o("slot",{key:"573529d2ea58260e23b3371c34a8c78145bbcab5",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&o("div",{key:"eaf73702cd472457cefae98438ba7001f4dddc89",hidden:!this.error,class:"error-description"},o("slot",{key:"2f1e983d78f4e0f5879b6bd163d76e1511026fb6",name:"error-description"},this.errorDescription)))}static get formAssociated(){return true}get el(){return a(this)}static get watchers(){return{showPassword:["handleShowPasswordChange"]}}};n.style=s;export{n as nv_fieldpassword};
+//# sourceMappingURL=p-9fb5db20.entry.js.map

package/dist/native/p-a5c8eee9.js

@@ -0,0 +1,2 @@
+function t(t,r){if(!t||!r)return false;return t.toLowerCase().startsWith(r.toLowerCase())}const r=Object.freeze({__proto__:null,startsWithIgnoreCase:t});export{t as a,r as s};
+//# sourceMappingURL=p-a5c8eee9.js.map

package/dist/native/p-a5c8eee9.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["startsWithIgnoreCase","str","prefix","toLowerCase","startsWith"],"sources":["src/utils/string.utils.ts"],"sourcesContent":["/**\n * Checks if a string starts with a given prefix, ignoring case.\n * @param {string} str - The string to check.\n * @param {string} prefix - The prefix to check for.\n * @returns {boolean} - True if the string starts with the prefix, ignoring case.\n * @example startsWithIgnoreCase('Hello, world!', 'hello') // true\n * @example startsWithIgnoreCase('Hello, world!', 'world') // false\n */\nexport function startsWithIgnoreCase(str?: string, prefix?: string): boolean {\n  if (!str || !prefix) return false;\n\n  return str.toLowerCase().startsWith(prefix.toLowerCase());\n}\n"],"mappings":"SAQgBA,EAAqBC,EAAcC,GACjD,IAAKD,IAAQC,EAAQ,OAAO,MAE5B,OAAOD,EAAIE,cAAcC,WAAWF,EAAOC,cAC7C,C","ignoreList":[]}

package/dist/native/{p-552e7ea4.entry.js → p-a998f8df.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as t,h as n,a,g as o}from"./p-9b093b92.js";const i="nv-menuitem{display:flex;align-items:center;max-width:300px;width:100vw;font-size:var(--menu-contextual-item-font-size);font-weight:var(--menu-contextual-item-font-weight);color:var(--components-menu-contextual-item-content);border-radius:var(--menu-contextual-item-radius);gap:var(--menu-contextual-item-gap-x);padding:var(--menu-contextual-item-padding-y) var(--menu-contextual-item-padding-x);transition:background-color 150ms ease-out;cursor:pointer}nv-menuitem:hover,nv-menuitem:focus,nv-menuitem:focus-within{background-color:var(--components-menu-contextual-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-menuitem kbd{color:var(--components-menu-contextual-item-shortcut)}nv-menuitem [data-scope=text]{margin-right:auto}nv-menuitem[disabled]:not([disabled=false]){cursor:unset;background-color:unset;color:var(--components-menu-contextual-item-content-disabled)}";const s=i;const c=class{constructor(n){e(this,n);this.menuitemSelected=t(this,"menuitemSelected",7);this.disabled=false;this.hasSubmenu=false}handleMenuItemSelect(e){if(this.disabled){e.stopPropagation();return}this.menuitemSelected.emit({id:this.el.id,name:this.name,hasSubmenu:this.hasSubmenu})}handleClick(e){this.handleMenuItemSelect(e)}handleKeyDown(e){if(e.key==="Enter"){const t=document.activeElement;if(t&&t.tagName==="NV-MENUITEM"&&!t.hasAttribute("has-submenu")){e.preventDefault();this.handleMenuItemSelect(e)}}}render(){return n(a,{key:"31ff42ca3327ad886aa6c7095f70b56013a91bc9",role:"menuitem",tabindex:this.disabled?"-1":"0"},this.icon&&n("nv-icon",{key:"27d59e5fb7877401d74915f6176d5d37b441d24b",name:this.icon}),n("span",{key:"9ee13d14d026e8aa9738c29051ea3eddb72973b6","data-scope":"text"},n("slot",{key:"09ae4f46f55268113c030b106838ff4f21a81dd2"})),this.shortcut&&!this.hasSubmenu&&n("kbd",{key:"56336e605425e598f3c9e3384b5a12f84f529e73"},this.shortcut),this.hasSubmenu&&n("nv-icon",{key:"18a8b87eb166189bdebc7fa7a362fec7725257d1",name:"chevron-right"}))}get el(){return o(this)}};c.style=s;export{c as nv_menuitem};
-//# sourceMappingURL=p-552e7ea4.entry.js.map
+import{r as e,c as t,h as n,a,g as o}from"./p-5439afb8.js";const i="nv-menuitem{display:flex;align-items:center;max-width:300px;width:100vw;font-size:var(--menu-contextual-item-font-size);font-weight:var(--menu-contextual-item-font-weight);color:var(--components-menu-contextual-item-content);border-radius:var(--menu-contextual-item-radius);gap:var(--menu-contextual-item-gap-x);padding:var(--menu-contextual-item-padding-y) var(--menu-contextual-item-padding-x);transition:background-color 150ms ease-out;cursor:pointer}nv-menuitem:hover,nv-menuitem:focus,nv-menuitem:focus-within{background-color:var(--components-menu-contextual-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-menuitem kbd{color:var(--components-menu-contextual-item-shortcut)}nv-menuitem [data-scope=text]{margin-right:auto}nv-menuitem[disabled]:not([disabled=false]){cursor:unset;background-color:unset;color:var(--components-menu-contextual-item-content-disabled)}";const c=i;const s=class{constructor(n){e(this,n);this.menuitemSelected=t(this,"menuitemSelected",7);this.disabled=false;this.hasSubmenu=false}handleMenuItemSelect(e){if(this.disabled){e.stopPropagation();return}this.menuitemSelected.emit({id:this.el.id,name:this.name,hasSubmenu:this.hasSubmenu})}handleClick(e){this.handleMenuItemSelect(e)}handleKeyDown(e){if(e.key==="Enter"){const t=document.activeElement;if(t&&t.tagName==="NV-MENUITEM"&&!t.hasAttribute("has-submenu")){e.preventDefault();this.handleMenuItemSelect(e)}}}render(){return n(a,{key:"ce7900804c631ae023960b0af96d84ff992531eb",role:"menuitem",tabindex:this.disabled?"-1":"0"},this.icon&&n("nv-icon",{key:"e5f8f337a9ac7de133bac90b590036e9bd8a5266",name:this.icon}),n("span",{key:"759f492fb615084a980390e1e24f0cb4469c911b","data-scope":"text"},n("slot",{key:"6cbc0e4d1859611271673223b4d00b38dbfdfa0c"})),this.shortcut&&!this.hasSubmenu&&n("kbd",{key:"f80cb33856e9e294a1a23dd93ff7c426455d827c"},this.shortcut),this.hasSubmenu&&n("nv-icon",{key:"efe2f7531bfe66e50b7454f0a3815c2908f093cb",name:"chevron-right"}))}get el(){return o(this)}};s.style=c;export{s as nv_menuitem};
+//# sourceMappingURL=p-a998f8df.entry.js.map

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

@@ -0,0 +1,2 @@
+import{r as s,h as e,a as t}from"./p-5439afb8.js";const a="";const c=a;const o=class{constructor(e){s(this,e);this.colspan=1;this.rowspan=1}render(){return e(t,{key:"48d70635460ac6948df4c68c8e0047e9ce541746"},e("th",{key:"22311aa6136e6812ab6826ee1d40c29d0488dbdf",abbr:this.abbr,colSpan:this.colspan,headers:this.headers,rowSpan:this.rowspan,scope:this.scope},e("slot",{key:"ce784ed22c04dc6518a0feb76ad5f045856d0713"})))}};o.style=c;export{o as nv_tablecolumn};
+//# sourceMappingURL=p-aa2834e2.entry.js.map

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

@@ -0,0 +1,2 @@
+import{r as e,h as c,a}from"./p-5439afb8.js";const s="";const t=s;const b=class{constructor(c){e(this,c)}render(){return c(a,{key:"cdf37e086d4194bdcb941942226d17ba38ec7dc7"},c("thead",{key:"3a8f72860faed461685b8184aeb274eec59188ba"},c("slot",{key:"f7450cf4858bc7452e4cb840ac7e06e5848dc75f"})))}};b.style=t;export{b as nv_tablehead};
+//# sourceMappingURL=p-ab5a8ce5.entry.js.map

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

@@ -0,0 +1,2 @@
+import{r as e,h as t,a as s,g as i}from"./p-5439afb8.js";const a={"w-full":"w-full",wFull:"w-full","is-active":"is-active","is-selected":"is-selected"};const l=class{constructor(t){e(this,t)}componentWillLoad(){this.applyClassesOnInitialRender()}componentDidLoad(){this.mutationObserver=new MutationObserver((e=>{e.forEach((e=>{if(e.type==="attributes"){const t=e.target;Object.keys(a).forEach((e=>{if(t.hasAttribute(e)){t.classList.add(a[e])}else{t.classList.remove(a[e])}}))}}))}));this.observeElements()}disconnectedCallback(){if(this.mutationObserver){this.mutationObserver.disconnect()}}applyClassesOnInitialRender(){Object.keys(a).forEach((e=>{const t=this.el.querySelectorAll(`[${e}]`);t.forEach((t=>{t.classList.add(a[e])}))}))}observeElements(){this.mutationObserver.observe(this.el,{attributes:true,attributeFilter:Object.keys(a),subtree:true})}render(){return t(s,{key:"81da4e7fd653192079ab22a607d1f525b504f3e4",style:{display:"block"}},t("slot",{key:"e766e4b073b16d367c473b02c94448cf835a4921"}))}get el(){return i(this)}};export{l as nv_base};
+//# sourceMappingURL=p-beab7cbd.entry.js.map

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

@@ -0,0 +1,2 @@
+import{r as e,c as o,h as t,a as i,g as r}from"./p-5439afb8.js";import{v as n}from"./p-f5ff676c.js";const d='nv-fielddropdown{--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}nv-fielddropdown[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-fielddropdown[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)}nv-fielddropdown[required]:not([required=false]) label::after{content:"*";color:var(--components-form-text-required);font-weight:700}nv-fielddropdown 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-fielddropdown nv-popover{width:100%;display:block}nv-fielddropdown nv-popover [data-scope=popover]{padding:var(--list-custom-padding);background-color:var(--components-list-custom-background);border:1px solid var(--components-list-custom-border);width:100%}nv-fielddropdown nv-popover [data-scope=popover] hr{color:var(--components-list-custom-separator)}nv-fielddropdown nv-popover [slot=content]{gap:var(--list-custom-gap-y);display:flex;flex-direction:column}nv-fielddropdown .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fielddropdown .input-container{display:flex;flex-grow:1;padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);justify-content:center;align-items:center;gap:var(--form-field-gap);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);background:var(--nv-field-background);transition:all 150ms ease-out;display:flex;align-items:center;position:relative;width:100%;min-height:40px}nv-fielddropdown .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddropdown .input-container:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fielddropdown .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fielddropdown .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fielddropdown .input-container input,nv-fielddropdown .input-container 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);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%;padding-right:2rem;flex-grow:1;margin:0;min-height:100%;box-sizing:border-box}nv-fielddropdown .input-container input:focus,nv-fielddropdown .input-container p.non-filterable-text:focus{outline:none}nv-fielddropdown .input-container input::placeholder,nv-fielddropdown .input-container 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-fielddropdown .input-container .toggle-dropdown-icon{position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:2}nv-fielddropdown .input-container nv-icon.validation{color:var(--nv-field-border-default);position:absolute;right:50px}nv-fielddropdown .input-container.focus-within,nv-fielddropdown .input-container:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fielddropdown .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-fielddropdown .non-filterable-text span{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis}nv-fielddropdown .description{align-self:stretch;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-fielddropdown .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fielddropdown hr{border:none;height:1px;background-color:var(--components-list-custom-separator);margin:0}.input-container.focus-within,.input-container:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}';const s=d;const l=class{constructor(t){e(this,t);this.dropdownItemSelected=o(this,"dropdownItemSelected",7);this.valueChanged=o(this,"valueChanged",7);this.inputId=n();this.open=false;this.autocomplete="off";this.required=false;this.error=false;this.readonly=false;this.disabled=false;this.emptyresult="No results found";this.filterText="";this.filterable=false;this.isFilterable=this.filterable;this.selectedValues=new Set;this.parsedOptions=[];this.handleInputContainerClick=e=>{if(this.disabled||this.readonly){return}const o=e.target;if(o.tagName==="P"||o.tagName==="SPAN"){this.open=true;this.popoverElement.show();const e=this.el.querySelector(".input-container");if(e){e.classList.add("focus-within");const o=()=>{e.classList.remove("focus-within")};this.popoverElement.addEventListener("hide",o)}}};this.handleInput=e=>{if(!this.filterable)return;if(this.disabled||this.readonly){return}const o=e.target;this.filterText=o.value.toLowerCase();this.value=o.value;this.valueChanged.emit(o.value);this.filterItems()};this.handleInputFocus=()=>{if(this.disabled||this.readonly){return}this.open=true};this.handleInputBlur=()=>{setTimeout((()=>{if(!this.el.contains(document.activeElement)){this.open=false;this.popoverElement.hide()}}),150)};this.togglePopover=()=>{if(this.disabled||this.readonly){return}this.open=!this.open;if(this.open){this.popoverElement.show();if(!this.filterable){this.focusFirstItem()}}else{this.popoverElement.hide()}}}handleItemSelected(e){if(this.disabled||this.readonly)return;const o=Array.from(this.el.querySelectorAll("nv-fielddropdownitem"));o.forEach((o=>{if(o!==e.target){o.removeAttribute("selected");o.classList.remove("selected")}}));this.value=e.detail.value;e.target.setAttribute("selected","true");e.target.classList.add("selected");this.dropdownItemSelected.emit(e.detail);if(this.popoverElement){this.popoverElement.hide()}}handleOpenChanged(e){this.open=e.detail}watchFilterableHandler(e){this.isFilterable=e;this.filterable=e}watchValueHandler(e){if(e){this.updateSelectedItem(e)}}handleOptionsChange(e){if(e){try{const o=JSON.parse(e);this.parsedOptions=[...o];const t=this.parsedOptions.find((e=>e.selected));if(t){this.value=t.value;requestAnimationFrame((()=>{this.updateSelectedItem(t.value)}))}}catch(e){console.error("Error parsing options:",e);this.parsedOptions=[]}}else{this.parsedOptions=[]}}componentWillLoad(){if(this.options){this.handleOptionsChange(this.options)}if(this.value){this.updateSelectedItem(this.value)}}componentDidLoad(){document.addEventListener("click",this.handleClickOutside.bind(this));if(this.value){this.updateSelectedItem(this.value)}}connectedCallback(){document.addEventListener("click",this.handleClickOutside.bind(this));this.resetFilter();this.setInitialSelection();if(this.filterable&&this.filterText){this.filterItems()}}setInitialSelection(){var e;const o=Array.from(this.el.querySelectorAll("nv-fielddropdownitem"));const t=o.find((e=>{var o;return e.getAttribute("label")===this.value||e.getAttribute("value")===this.value||((o=e.textContent)===null||o===void 0?void 0:o.trim())===this.value}));o.forEach((e=>{e.removeAttribute("selected");e.classList.remove("selected")}));if(t){t.setAttribute("selected","true");t.classList.add("selected");this.value=t.getAttribute("label")||t.getAttribute("value")||((e=t.textContent)===null||e===void 0?void 0:e.trim())||"";if(this.inputElement){this.inputElement.value=this.value}}else{console.warn("No matching item found for value:",this.value)}}disconnectedCallback(){document.removeEventListener("click",this.handleClickOutside.bind(this))}filterItems(){var e;const o=Array.from(this.el.querySelectorAll("nv-fielddropdownitem"));const t=this.el.querySelector("nv-fielddropdownitem[data-empty]");if(t){t.remove()}let i=false;o.forEach((e=>{var o,t;const r=((o=e.textContent)===null||o===void 0?void 0:o.toLowerCase())||"";const n=((t=e.value)===null||t===void 0?void 0:t.toLowerCase())||"";const d=n.includes(this.filterText)||r.includes(this.filterText);e.style.display=d?"":"none";if(d){i=true}}));if(!i){const o=document.createElement("nv-fielddropdownitem");o.setAttribute("data-empty","true");o.setAttribute("disabled","true");o.textContent=this.emptyresult;(e=this.el.querySelector('ul[slot="content"]'))===null||e===void 0?void 0:e.appendChild(o)}}resetFilter(){const e=Array.from(this.el.querySelectorAll("nv-fielddropdownitem"));e.forEach((e=>{e.style.display=""}))}async getFilterText(){return this.filterText}handleClickOutside(e){if(this.el.contains(e.target)||this.inputElement&&this.inputElement.contains(e.target)){return}this.popoverElement.hide()}handleKeyDown(e){if(!this.open){if(e.key==="ArrowDown"){this.open=true;this.popoverElement.show();if(!this.filterable){this.focusFirstItem()}e.preventDefault();return}return}if(!this.popoverElement){console.warn("Popover element is not defined");return}const o=Array.from(this.el.querySelectorAll("nv-fielddropdownitem:not([data-empty])"));if(o.length===0){console.warn("No dropdown items found to navigate");return}let t=o.findIndex((e=>e.classList.contains("highlighted")));if(e.key==="ArrowDown"){e.preventDefault();t=(t+1)%o.length;this.updateHighlightedItem(o,t)}else if(e.key==="ArrowUp"){e.preventDefault();t=(t-1+o.length)%o.length;this.updateHighlightedItem(o,t)}else if(e.key==="Enter"&&t>=0){e.preventDefault();o[t].click()}else if(e.key==="Escape"){e.preventDefault();this.open=false;this.popoverElement.hide();if(this.inputElement){this.inputElement.blur()}}}updateHighlightedItem(e,o){e.forEach(((e,t)=>{if(t===o){e.classList.add("highlighted");e.setAttribute("tabindex","0");e.focus();e.scrollIntoView({block:"nearest"})}else{e.classList.remove("highlighted");e.setAttribute("tabindex","-1")}}))}focusFirstItem(){const e=this.el.querySelector("nv-fielddropdownitem");if(e){e.focus();this.updateHighlightedItem(Array.from(this.el.querySelectorAll("nv-fielddropdownitem")),0)}else{console.warn("No first item found to focus")}}updateSelectedItem(e){const o=Array.from(this.el.querySelectorAll("nv-fielddropdownitem"));o.forEach((e=>{e.removeAttribute("selected");e.classList.remove("selected")}));const t=o.find((o=>{var t;const i=o.getAttribute("label");const r=o.getAttribute("value");const n=(t=o.textContent)===null||t===void 0?void 0:t.trim();return i===e||r===e||n===e}));if(t){t.setAttribute("selected","true");t.classList.add("selected");if(this.inputElement){this.inputElement.value=e}this.dropdownItemSelected.emit({value:e,label:t.getAttribute("label")||e,selected:true,disabled:t.hasAttribute("disabled")})}}render(){return t(i,{key:"9e43d5dee909615ce58a1b64e571e661ccdb4110"},(this.label||this.el.querySelector('[slot="label"]'))&&t("label",{key:"29ffcbf274cb1b0fc8c80e43ffe623f26f3096a3",htmlFor:this.inputId},t("slot",{key:"8e27c4d52d2ce610f8effcae32a9ee6ade400706",name:"label"},this.label)),t("nv-popover",{key:"5247b86cd12e74382a9301cac81f861370a8ba98",ref:e=>this.popoverElement=e,triggerMode:"controlled",placement:"bottom-start",open:this.open},t("div",{key:"92d59151fc3400a38971a860f73fc43d8f9b92a0",class:"input-wrapper",slot:"trigger"},t("slot",{key:"9810c88233a55840334a7a57e6626ab17b48a565",name:"before-input"}),t("div",{key:"2670bb58b928b2fcb98f2da6501b852df83c6790",class:"input-container",onClick:this.handleInputContainerClick},t("slot",{key:"a66ce39a54b100c2afd9f90daf3777293e59adbb",name:"leading-input"}),this.isFilterable||this.disabled||this.readonly?t("input",{id:this.inputId,type:"search",ref:e=>this.inputElement=e,autocomplete:this.autocomplete,placeholder:this.placeholder,name:this.name,value:this.value,required:this.required,disabled:this.disabled,readOnly:this.readonly,onInput:this.handleInput,onFocus:this.handleInputFocus,onBlur:this.handleInputBlur,onKeyDown:this.handleKeyDown}):t("p",{id:this.inputId,class:"non-filterable-text",onClick:this.handleInputContainerClick,tabIndex:0,onKeyDown:this.handleKeyDown,onFocus:this.handleInputFocus},t("span",null,this.value||this.placeholder)),t("nv-iconbutton",{key:"41a66e981d964b0b8492a74a17b242766a67a5e1",class:"toggle-dropdown-icon",name:this.open?"chevron-top":"chevron-down",size:"md",emphasis:"lower","aria-label":this.open?"Hide dropdown":"Show dropdown","aria-pressed":this.open.toString(),onClick:this.togglePopover})),t("slot",{key:"7555c854f681c5fad08f48d77f64483245804280",name:"after-input"})),t("div",{key:"cf179ec57b0a51e970e1e763ce63d34e23481f40",slot:"content"},t("ul",{key:"843c7aeccc847171266f36209808d7b3e9b30f08",slot:"content"},this.parsedOptions.length>0?this.parsedOptions.map((e=>t("nv-fielddropdownitem",{label:e.label,value:e.value,disabled:e.disabled,selected:e.value===this.value}))):t("slot",{name:"content"})))),(this.description||this.el.querySelector('[slot="description"]'))&&t("div",{key:"04e05d9f19e2a932c10ffd63762aa4c0218efe2f",class:"description"},t("slot",{key:"19c66921ebb6e041ffd7324a3e31a3ed76750590",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&t("div",{key:"e2d3829e8469d0ae5da3bbe1942de809f17b7ee8",hidden:!this.error,class:"error-description"},t("slot",{key:"d4b83f3b8345cc941c1f3058ddee103f36625974",name:"error-description"},this.errorDescription)))}static get formAssociated(){return true}get el(){return r(this)}static get watchers(){return{filterable:["watchFilterableHandler"],value:["watchValueHandler"],options:["handleOptionsChange"]}}};l.style=s;export{l as nv_fielddropdown};
+//# sourceMappingURL=p-bfeda21c.entry.js.map

package/dist/native/p-bfeda21c.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["nvFielddropdownCss","NvFielddropdownStyle0","NVFieldDropDown","constructor","hostRef","this","inputId","uuidv4","open","autocomplete","required","error","readonly","disabled","emptyresult","filterText","filterable","isFilterable","selectedValues","Set","parsedOptions","handleInputContainerClick","event","target","tagName","popoverElement","show","inputContainer","el","querySelector","classList","add","removeFocusWithin","remove","addEventListener","handleInput","input","value","toLowerCase","valueChanged","emit","filterItems","handleInputFocus","handleInputBlur","setTimeout","contains","document","activeElement","hide","togglePopover","focusFirstItem","handleItemSelected","items","Array","from","querySelectorAll","forEach","item","removeAttribute","detail","setAttribute","dropdownItemSelected","handleOpenChanged","watchFilterableHandler","newValue","watchValueHandler","updateSelectedItem","handleOptionsChange","parsedOpts","JSON","parse","selectedOption","find","opt","selected","requestAnimationFrame","console","componentWillLoad","options","componentDidLoad","handleClickOutside","bind","connectedCallback","resetFilter","setInitialSelection","selectedItem","getAttribute","_a","textContent","trim","inputElement","warn","disconnectedCallback","removeEventListener","existingEmptyItem","hasVisibleItems","_b","shouldShow","includes","style","display","emptyItem","createElement","appendChild","getFilterText","handleKeyDown","key","preventDefault","length","currentIndex","findIndex","updateHighlightedItem","click","blur","index","i","focus","scrollIntoView","block","firstItem","matchingItem","itemLabel","itemValue","itemText","label","hasAttribute","render","h","Host","htmlFor","name","ref","triggerMode","placement","class","slot","onClick","id","type","e","placeholder","readOnly","onInput","onFocus","onBlur","onKeyDown","tabIndex","size","emphasis","toString","map","option","description","errorDescription","hidden"],"sources":["src/components/nv-fielddropdown/nv-fielddropdown.scss?tag=nv-fielddropdown","src/components/nv-fielddropdown/nv-fielddropdown.tsx"],"sourcesContent":["@import '../../styles/form-field';\n\nnv-fielddropdown {\n  @include form-field-variables();\n  @include form-field-root();\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    width: 100%;\n    display: block;\n  }\n\n  nv-popover  [data-scope=popover]{\n    padding: var(--list-custom-padding);\n    background-color: var(--components-list-custom-background);\n    border: 1px solid var(--components-list-custom-border);\n    width: 100%;\n    \n    hr{\n      color : var(--components-list-custom-separator);\n    }\n  }\n\n  nv-popover [slot=content] {\n    gap: var(--list-custom-gap-y);\n    display: flex;\n    flex-direction: column;\n  }\n\n  .input-wrapper {\n    @include form-field-input-wrapper();\n    width: 100%;\n  }\n\n  .input-container {\n    @include form-field-input-container();\n    display: flex;\n    align-items: center;\n    position: relative;\n    width: 100%;\n    min-height: 40px;\n    input,\n    p.non-filterable-text {\n      @include form-field-input();\n      width: 100%;\n      padding-right: 2rem;\n      flex-grow: 1;\n      margin: 0;\n      min-height: 100%;\n      box-sizing: border-box;\n    }\n\n    .toggle-dropdown-icon {\n      position: absolute;\n      right: 0;\n      top: 50%;\n      transform: translateY(-50%);\n      z-index: 2;\n    }\n\n    nv-icon.validation {\n      @include form-field-icon();\n      position: absolute;\n      right: 50px;\n    }\n\n    &.focus-within,\n    &:hover {\n      border-color: var(--nv-field-border-focus);\n      box-shadow: 0px 0px 0px var(--focus-field-stroke)\n        var(--nv-field-focus-box-shadow);\n    }\n  }\n\n  .non-filterable-text {\n    display: block;\n    border-radius: var(--form-field-radius);\n    background-color: var(--nv-field-background);\n    color: var(--components-form-field-content-text);\n    font-size: var(--form-field-font-size);\n    font-weight: 500;\n    line-height: var(--form-field-line-height);\n    box-sizing: border-box;\n    cursor: pointer;\n    height: 100%;\n    min-height: 40px;\n\n    span {\n      display: inline-block;\n      width: 100%;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n\n  .description {\n    @include form-field-description();\n  }\n\n  .error-description {\n    @include form-field-error-description();\n  }\n\n  hr {\n    border: none;\n    height: 1px;\n    background-color: var(--components-list-custom-separator);\n    margin: 0;\n  }\n}\n\n.input-container.focus-within,\n.input-container:hover {\n  border-color: var(--nv-field-border-focus);\n  box-shadow: 0px 0px 0px var(--focus-field-stroke)\n    var(--nv-field-focus-box-shadow);\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} from '@stencil/core';\n\nimport { v4 as uuidv4 } from 'uuid';\nimport { TextInputAutocomplete } from '../../utils/constants';\nimport { DropdownItemSelectedEventDetail } from '../nv-fielddropdownitem/DropdownItemSelectedEventDetail';\n\n/**\n * @slot content - Use a <ul></ul> tag for the slot, and place <nv-dropdownitem> elements inside.\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\n@Component({\n  tag: 'nv-fielddropdown',\n  styleUrl: 'nv-fielddropdown.scss',\n  shadow: false,\n  formAssociated: true,\n})\nexport class NVFieldDropDown {\n  @Element() el: HTMLNvFielddropdownElement;\n  private inputElement!: HTMLInputElement;\n  private popoverElement!: HTMLNvPopoverElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the input element and the for attribute of the associated\n   * label. If no ID is provided, a random one will be automatically generated\n   * to ensure unique identification, facilitating proper label association and\n   * accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\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\n   * user-friendly.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\n\n  /**\n   * Add helpful hints or extra information under the text input field. This is\n   * where you can clarify what users should enter or provide additional\n   * instructions, making the form easier to fill out correctly.\n   */\n  @Prop({ reflect: true })\n  readonly description: string;\n\n  /**\n   * Display temporary text inside the input field to give users a hint about\n   * what to type. It's a great way to provide examples or suggestions directly\n   * in the field before they start typing.\n   * The placeholder is displayed only when the filterable option is enabled.\n   */\n  @Prop({ reflect: true })\n  readonly placeholder: string;\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   * State of the dropdown popover.\n   */\n  @Prop({ reflect: true, mutable: true })\n  open: boolean = false;\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   * Specifies the value of the input field, which determines the text displayed\n   * within the field. This prop is typically used in controlled components\n   * where the input's value is managed by the component's state.\n   */\n  @Prop({ reflect: true, mutable: true })\n  value: string;\n\n  /**\n   * Marks the input field as required, ensuring that the user must fill it out\n   * before submitting the form.\n   */\n  @Prop({ reflect: true })\n  readonly required: 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 dropdown\n   * field.\n   * @validator message\n   */\n  @Prop({ reflect: true })\n  readonly errorDescription: string;\n\n  /**\n   * Display the input field's content without allowing users to change it.\n   * Users can still click on it, select, and copy the text, but they won't be\n   * able to type or delete anything.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * The disabled prop lets you turn off the input field so that users can't\n   * type in it. When disabled, the field is grayed out and won't respond to\n   * clicks or touches.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: 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   * The text entered by the user for filtering dropdown items.\n   */\n  @State()\n  filterText: string = '';\n\n  /**\n   * Enables or disables the filtering feature for the dropdown items.\n   */\n  @Prop({ reflect: true, mutable: true })\n  filterable: boolean = false;\n\n  @State()\n  isFilterable: boolean = this.filterable;\n\n  @State()\n  selectedValues: Set<string> = new Set();\n\n  /**\n   * List of options available in the dropdown.\n   * @description The options are passed as a JSON string.\n   * @example options='[{\"label\": \"Option 1\", \"value\": \"option1\", \"selected\": true}, {\"label\": \"Option 2\", \"value\": \"option2\"}]'\n   */\n  @Prop({ reflect: true })\n  readonly options?: string;\n\n  /**\n   * Options configuration for the dropdown items.\n   */\n  @State()\n  parsedOptions: 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 disabled */\n    disabled?: boolean;\n    /** Whether this option is pre-selected */\n    selected?: boolean;\n  }> = [];\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Event emitted when an item is selected.\n   */\n  @Event()\n  dropdownItemSelected: EventEmitter<DropdownItemSelectedEventDetail>;\n\n  @Listen('itemSelected')\n  handleItemSelected(event: CustomEvent<DropdownItemSelectedEventDetail>) {\n    if (this.disabled || this.readonly) return;\n\n    // Retrieve all nv-fielddropdownitem elements present in the dropdown.\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    // For each item, remove the 'selected' attribute and the 'selected' class.\n    items.forEach(item => {\n      if (item !== event.target) {\n        item.removeAttribute('selected');\n        item.classList.remove('selected');\n      }\n    });\n\n    // Update the value and emit the event with the selected item.\n    this.value = event.detail.value;\n    (event.target as HTMLNvFielddropdownitemElement).setAttribute(\n      'selected',\n      'true',\n    );\n    (event.target as HTMLElement).classList.add('selected');\n    this.dropdownItemSelected.emit(event.detail);\n\n    // Close the popover after selecting.\n    if (this.popoverElement) {\n      this.popoverElement.hide();\n    }\n  }\n\n  /**\n   * Emitted when the input value changes.\n   * @bind value\n   */\n  @Event()\n  valueChanged: EventEmitter<string>;\n\n  @Listen('openChanged')\n  handleOpenChanged(event: CustomEvent<boolean>) {\n    this.open = event.detail; // Update `open` based on the popover state\n  }\n\n  @Watch('filterable')\n  watchFilterableHandler(newValue: boolean) {\n    this.isFilterable = newValue;\n    this.filterable = newValue;\n  }\n\n  @Watch('value')\n  watchValueHandler(newValue: string) {\n    if (newValue) {\n      this.updateSelectedItem(newValue);\n    }\n  }\n\n  /**\n   * Watch for changes in the options prop\n   * @param {string} newValue - The new value of the options prop\n   */\n  @Watch('options')\n  handleOptionsChange(newValue: string) {\n    if (newValue) {\n      try {\n        const parsedOpts = JSON.parse(newValue);\n        this.parsedOptions = [...parsedOpts];\n\n        // Handle pre-selected option\n        const selectedOption = this.parsedOptions.find(opt => opt.selected);\n        if (selectedOption) {\n          this.value = selectedOption.value;\n          // Wait for items to be rendered\n          requestAnimationFrame(() => {\n            this.updateSelectedItem(selectedOption.value);\n          });\n        }\n      } catch (error) {\n        console.error('Error parsing options:', error);\n        this.parsedOptions = [];\n      }\n    } else {\n      this.parsedOptions = [];\n    }\n  }\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region METHODS\n\n  componentWillLoad() {\n    // Initialize options if provided\n    if (this.options) {\n      this.handleOptionsChange(this.options);\n    }\n\n    if (this.value) {\n      // If an initial value exists, set it as selected\n      this.updateSelectedItem(this.value);\n    }\n  }\n\n  componentDidLoad() {\n    document.addEventListener('click', this.handleClickOutside.bind(this));\n\n    // Check again after complete rendering\n    if (this.value) {\n      this.updateSelectedItem(this.value);\n    }\n  }\n\n  /**\n   * Subscribe to click outside event.\n   */\n  connectedCallback() {\n    document.addEventListener('click', this.handleClickOutside.bind(this));\n\n    // First, reset the filter to ensure all elements are visible\n    this.resetFilter();\n\n    // Then, handle the pre-selection\n    this.setInitialSelection();\n\n    // Finally, apply the filter if needed\n    if (this.filterable && this.filterText) {\n      this.filterItems();\n    }\n  }\n\n  /**\n   * Set the initial selection based on the current value and update the inputElement value.\n   */\n  private setInitialSelection() {\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    const selectedItem = items.find(\n      item =>\n        item.getAttribute('label') === this.value ||\n        item.getAttribute('value') === this.value ||\n        item.textContent?.trim() === this.value,\n    );\n\n    items.forEach(item => {\n      item.removeAttribute('selected');\n      item.classList.remove('selected');\n    });\n\n    if (selectedItem) {\n      selectedItem.setAttribute('selected', 'true');\n      selectedItem.classList.add('selected');\n      this.value =\n        selectedItem.getAttribute('label') ||\n        selectedItem.getAttribute('value') ||\n        selectedItem.textContent?.trim() ||\n        '';\n      if (this.inputElement) {\n        this.inputElement.value = this.value;\n      }\n    } else {\n      console.warn('No matching item found for value:', this.value);\n    }\n  }\n\n  /**\n   * Unsubscribe from click outside event.\n   */\n  disconnectedCallback() {\n    document.removeEventListener('click', this.handleClickOutside.bind(this));\n  }\n\n  /**\n   * Handle click on the input container.\n   * @param {MouseEvent} event - The click event.\n   */\n  private handleInputContainerClick = (event: MouseEvent) => {\n    if (this.disabled || this.readonly) {\n      return; // Do nothing if the dropdown is disabled or read-only\n    }\n\n    const target = event.target as HTMLElement;\n\n    // Check if it is the paragraph or another part of the container\n    if (target.tagName === 'P' || target.tagName === 'SPAN') {\n      this.open = true;\n      this.popoverElement.show();\n\n      // Simulate focus to trigger \"focus-within\" style\n      const inputContainer = this.el.querySelector(\n        '.input-container',\n      ) as HTMLElement;\n      if (inputContainer) {\n        inputContainer.classList.add('focus-within');\n\n        // Remove the \"focus-within\" class after a delay or when the popover is closed\n        const removeFocusWithin = () => {\n          inputContainer.classList.remove('focus-within');\n        };\n\n        // Or remove the class when the popover is closed\n        this.popoverElement.addEventListener('hide', removeFocusWithin);\n      }\n    }\n  };\n\n  /**\n   * Handle input change.\n   * @param {Event} event - The input event.\n   */\n  private handleInput = (event: Event) => {\n    if (!this.filterable) return; // Do not filter if `filterable` is false\n    if (this.disabled || this.readonly) {\n      return; // Do not toggle the state if the dropdown is disabled or read-only\n    }\n    const input = event.target as HTMLInputElement;\n    this.filterText = input.value.toLowerCase();\n    this.value = input.value; // Update the value\n    this.valueChanged.emit(input.value); // Emit an event if needed\n    this.filterItems(); // Update the visibility of items\n  };\n\n  /**\n   * Filter dropdown items based on the text entered by the user.\n   * If no items are found, display a message indicating no results.\n   */\n  private filterItems() {\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    // Remove the \"no results found\" item if it exists\n    const existingEmptyItem = this.el.querySelector(\n      'nv-fielddropdownitem[data-empty]',\n    );\n    if (existingEmptyItem) {\n      existingEmptyItem.remove();\n    }\n\n    let hasVisibleItems = false;\n\n    // Iterate over all items and adjust their visibility\n    items.forEach(item => {\n      const textContent = item.textContent?.toLowerCase() || ''; // Get the textual content of the slot\n      const value = item.value?.toLowerCase() || ''; // Get the value of the `value` attribute\n\n      // Check if the filtered text is present either in the value or in the textual content\n      const shouldShow =\n        value.includes(this.filterText) ||\n        textContent.includes(this.filterText);\n\n      item.style.display = shouldShow ? '' : 'none'; // Hide or show the item\n\n      if (shouldShow) {\n        hasVisibleItems = true;\n      }\n    });\n\n    // If no items are visible, add the \"no results found\" item\n    if (!hasVisibleItems) {\n      const emptyItem = document.createElement('nv-fielddropdownitem');\n      emptyItem.setAttribute('data-empty', 'true');\n      emptyItem.setAttribute('disabled', 'true');\n      emptyItem.textContent = this.emptyresult;\n      this.el.querySelector('ul[slot=\"content\"]')?.appendChild(emptyItem);\n    }\n  }\n\n  /**\n   * Reset the filter and make all items visible.\n   */\n  private resetFilter() {\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    items.forEach(item => {\n      item.style.display = '';\n    });\n  }\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   * Handle click outside the component.\n   * @param {MouseEvent} event - The click event.\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.popoverElement.hide();\n  }\n\n  /**\n   * Handle input focus.\n   */\n  private handleInputFocus = () => {\n    if (this.disabled || this.readonly) {\n      return; // Do not toggle the state if the dropdown is disabled or read-only\n    }\n    this.open = true; // Force the popover to open\n  };\n\n  /**\n   * Handle input blur.\n   */\n  private handleInputBlur = () => {\n    // Use a delay to check if the focus is still within the popover\n    setTimeout(() => {\n      if (!this.el.contains(document.activeElement)) {\n        this.open = false;\n        this.popoverElement.hide(); // Close the popover if the focus is outside the component\n      }\n    }, 150);\n  };\n\n  /**\n   * Toggle the dropdown popover.\n   * @returns {void}\n   */\n  private togglePopover = (): void => {\n    if (this.disabled || this.readonly) {\n      return; // Do not toggle if disabled or read-only\n    }\n\n    this.open = !this.open;\n    if (this.open) {\n      this.popoverElement.show();\n\n      // If the dropdown is not filterable, focus on the first item\n      if (!this.filterable) {\n        this.focusFirstItem();\n      }\n    } else {\n      this.popoverElement.hide();\n    }\n  };\n\n  @Listen('keydown', { passive: false })\n  handleKeyDown(event: KeyboardEvent) {\n    if (!this.open) {\n      if (event.key === 'ArrowDown') {\n        this.open = true;\n        this.popoverElement.show();\n\n        if (!this.filterable) {\n          // Focus on the first item if it is not filterable\n          this.focusFirstItem();\n        }\n\n        event.preventDefault();\n        return;\n      }\n      return;\n    }\n\n    // Verify if the popover is defined before looking for items\n    if (!this.popoverElement) {\n      console.warn('Popover element is not defined');\n      return;\n    }\n\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitem:not([data-empty])'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    // Verify if items exist\n    if (items.length === 0) {\n      console.warn('No dropdown 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 = (currentIndex + 1) % items.length;\n      this.updateHighlightedItem(items, currentIndex);\n    } else if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      currentIndex = (currentIndex - 1 + items.length) % items.length;\n      this.updateHighlightedItem(items, currentIndex);\n    } else if (event.key === 'Enter' && currentIndex >= 0) {\n      event.preventDefault();\n      items[currentIndex].click();\n    } else if (event.key === 'Escape') {\n      event.preventDefault();\n      this.open = false;\n      this.popoverElement.hide();\n      if (this.inputElement) {\n        this.inputElement.blur();\n      }\n    }\n  }\n\n  private updateHighlightedItem(\n    items: HTMLNvFielddropdownitemElement[],\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.focus(); // Forcer le focus ici\n        item.scrollIntoView({ block: 'nearest' });\n      } else {\n        item.classList.remove('highlighted');\n        item.setAttribute('tabindex', '-1');\n      }\n    });\n  }\n\n  private focusFirstItem() {\n    const firstItem = this.el.querySelector('nv-fielddropdownitem');\n    if (firstItem) {\n      (firstItem as HTMLElement).focus();\n      this.updateHighlightedItem(\n        Array.from(\n          this.el.querySelectorAll('nv-fielddropdownitem'),\n        ) as HTMLNvFielddropdownitemElement[],\n        0,\n      );\n    } else {\n      console.warn('No first item found to focus');\n    }\n  }\n\n  private updateSelectedItem(value: string) {\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    // Reset all items\n    items.forEach(item => {\n      item.removeAttribute('selected');\n      item.classList.remove('selected');\n    });\n\n    // Find the item matching the value\n    const matchingItem = items.find(item => {\n      const itemLabel = item.getAttribute('label');\n      const itemValue = item.getAttribute('value');\n      const itemText = item.textContent?.trim();\n\n      return itemLabel === value || itemValue === value || itemText === value;\n    });\n\n    if (matchingItem) {\n      // Mark the item as selected\n      matchingItem.setAttribute('selected', 'true');\n      matchingItem.classList.add('selected');\n\n      // Update the input\n      if (this.inputElement) {\n        this.inputElement.value = value;\n      }\n\n      // Emit the selection event\n      this.dropdownItemSelected.emit({\n        value: value,\n        label: matchingItem.getAttribute('label') || value,\n        selected: true,\n        disabled: matchingItem.hasAttribute('disabled'),\n      });\n    }\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\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 as HTMLNvPopoverElement)}\n          triggerMode=\"controlled\"\n          placement=\"bottom-start\"\n          open={this.open}\n        >\n          <div class=\"input-wrapper\" slot=\"trigger\">\n            <slot name=\"before-input\"></slot>\n\n            <div\n              class=\"input-container\"\n              onClick={this.handleInputContainerClick}\n            >\n              <slot name=\"leading-input\"></slot>\n\n              {this.isFilterable || this.disabled || this.readonly ? (\n                <input\n                  id={this.inputId}\n                  type=\"search\"\n                  ref={e => (this.inputElement = e)}\n                  autocomplete={this.autocomplete}\n                  placeholder={this.placeholder}\n                  name={this.name}\n                  value={this.value}\n                  required={this.required}\n                  disabled={this.disabled}\n                  readOnly={this.readonly}\n                  onInput={this.handleInput}\n                  onFocus={this.handleInputFocus}\n                  onBlur={this.handleInputBlur}\n                  onKeyDown={this.handleKeyDown} // Handle the arrow keys here\n                />\n              ) : (\n                <p\n                  id={this.inputId}\n                  class=\"non-filterable-text\"\n                  onClick={this.handleInputContainerClick}\n                  tabIndex={0} // Add a tabindex to make it focusable\n                  onKeyDown={this.handleKeyDown} // Handle the arrow keys here\n                  onFocus={this.handleInputFocus}\n                >\n                  <span>{this.value || this.placeholder}</span>\n                </p>\n              )}\n\n              <nv-iconbutton\n                class=\"toggle-dropdown-icon\"\n                name={this.open ? 'chevron-top' : 'chevron-down'}\n                size=\"md\"\n                emphasis=\"lower\"\n                aria-label={this.open ? 'Hide dropdown' : 'Show dropdown'}\n                aria-pressed={this.open.toString()}\n                onClick={this.togglePopover}\n              />\n            </div>\n\n            <slot name=\"after-input\"></slot>\n          </div>\n\n          {/* The div with slot=\"content\" is the slot for the nv-popover content */}\n          <div slot=\"content\">\n            {/* The ul with slot=\"content\" is the slot for the nv-fielddropdown content itself */}\n            <ul slot=\"content\">\n              {this.parsedOptions.length > 0 ? (\n                this.parsedOptions.map(option => (\n                  <nv-fielddropdownitem\n                    label={option.label}\n                    value={option.value}\n                    disabled={option.disabled}\n                    selected={option.value === this.value}\n                  />\n                ))\n              ) : (\n                <slot name=\"content\"></slot>\n              )}\n            </ul>\n          </div>\n        </nv-popover>\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\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      </Host>\n    );\n  }\n  //#endregion RENDER\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/native/p-c1765831.js

@@ -0,0 +1,2 @@
+import{i as o,a as t}from"./p-1daca48a.js";const a=(a,{duration:n=200,amount:e=.8,hasFade:r=true}={})=>{const c=o(a);function s(){return new Promise((o=>{t({from:{opacity:r?0:1,scale:e},to:{opacity:1,scale:1},duration:n,onUpdate(o){const t={scale:o.scale};if(r){t["opacity"]=o.opacity}c.set(t)},onComplete(){o();if(r){a.style.removeProperty("opacity")}a.style.removeProperty("transform")}})}))}function i(){a.style.transform=`scale(${e})`;if(r){a.style.opacity="0"}}function u(){a.style.transform=`scale(1)`;if(r){a.style.opacity="1"}}function f(){return new Promise((o=>{t({from:{opacity:1,scale:1},to:{opacity:r?0:1,scale:e},duration:n,onUpdate(o){const t={scale:o.scale};if(r){t["opacity"]=o.opacity}c.set(t)},onComplete(){o()}})}))}return{growIn:s,growOut:f,setGrowOut:i,setGrowIn:u}};export{a as u};
+//# sourceMappingURL=p-c1765831.js.map

package/dist/native/p-c1765831.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useGrow","node","duration","amount","hasFade","nodeStyler","styler","growIn","Promise","resolve","animate","from","opacity","scale","to","onUpdate","latest","updates","set","onComplete","style","removeProperty","setGrowOut","transform","setGrowIn","growOut"],"sources":["src/animations/grow.animation.ts"],"sourcesContent":["import { animate } from 'popmotion';\nimport styler from 'stylefire';\n\nexport type GrowOptions = {\n  /** How long the animation should take in ms @default 200 */\n  duration?: number;\n  /** The amount to scale the element by @default 0.8 */\n  amount?: number;\n  /** Whether to include a fade effect in the animation @default true */\n  hasFade?: boolean;\n};\n\nconst useGrow = (\n  node: HTMLElement,\n  { duration = 200, amount = 0.8, hasFade = true }: GrowOptions = {},\n) => {\n  const nodeStyler = styler(node);\n\n  /**\n   * Will animate the scale and optionally the opacity to make the element grow and fade in,\n   * and removes the scale and opacity style attributes once complete.\n   */\n  function growIn() {\n    return new Promise<void>(resolve => {\n      animate({\n        from: { opacity: hasFade ? 0 : 1, scale: amount },\n        to: { opacity: 1, scale: 1 },\n        duration,\n        onUpdate(latest) {\n          const updates = {\n            scale: latest.scale,\n          };\n          if (hasFade) {\n            updates['opacity'] = latest.opacity;\n          }\n          nodeStyler.set(updates);\n        },\n        onComplete() {\n          resolve();\n          if (hasFade) {\n            node.style.removeProperty('opacity');\n          }\n          node.style.removeProperty('transform');\n        },\n      });\n    });\n  }\n\n  /**\n   * Applies the growOut styles without animating, useful when the initial\n   * state is hidden.\n   */\n  function setGrowOut() {\n    node.style.transform = `scale(${amount})`;\n    if (hasFade) {\n      node.style.opacity = '0';\n    }\n  }\n\n  /**\n   * Applies the growIn styles without animating, useful when the initial\n   * state is visible.\n   */\n  function setGrowIn() {\n    node.style.transform = `scale(1)`;\n    if (hasFade) {\n      node.style.opacity = '1';\n    }\n  }\n\n  /**\n   * Will animate the scale and optionally the opacity to make the element shrink and fade out,\n   * leaving the scale and opacity styles on the element.\n   */\n  function growOut() {\n    return new Promise<void>(resolve => {\n      animate({\n        from: { opacity: 1, scale: 1 },\n        to: { opacity: hasFade ? 0 : 1, scale: amount },\n        duration,\n        onUpdate(latest) {\n          const updates = {\n            scale: latest.scale,\n          };\n          if (hasFade) {\n            updates['opacity'] = latest.opacity;\n          }\n          nodeStyler.set(updates);\n        },\n        onComplete() {\n          resolve();\n        },\n      });\n    });\n  }\n\n  return {\n    growIn,\n    growOut,\n    setGrowOut,\n    setGrowIn,\n  };\n};\n\nexport { useGrow };\n"],"mappings":"iDAYMA,EAAU,CACdC,GACEC,WAAW,IAAKC,SAAS,GAAKC,UAAU,MAAsB,MAEhE,MAAMC,EAAaC,EAAOL,GAM1B,SAASM,IACP,OAAO,IAAIC,SAAcC,IACvBC,EAAQ,CACNC,KAAM,CAAEC,QAASR,EAAU,EAAI,EAAGS,MAAOV,GACzCW,GAAI,CAAEF,QAAS,EAAGC,MAAO,GACzBX,WACA,QAAAa,CAASC,GACP,MAAMC,EAAU,CACdJ,MAAOG,EAAOH,OAEhB,GAAIT,EAAS,CACXa,EAAQ,WAAaD,EAAOJ,O,CAE9BP,EAAWa,IAAID,E,EAEjB,UAAAE,GACEV,IACA,GAAIL,EAAS,CACXH,EAAKmB,MAAMC,eAAe,U,CAE5BpB,EAAKmB,MAAMC,eAAe,Y,GAE5B,G,CAQN,SAASC,IACPrB,EAAKmB,MAAMG,UAAY,SAASpB,KAChC,GAAIC,EAAS,CACXH,EAAKmB,MAAMR,QAAU,G,EAQzB,SAASY,IACPvB,EAAKmB,MAAMG,UAAY,WACvB,GAAInB,EAAS,CACXH,EAAKmB,MAAMR,QAAU,G,EAQzB,SAASa,IACP,OAAO,IAAIjB,SAAcC,IACvBC,EAAQ,CACNC,KAAM,CAAEC,QAAS,EAAGC,MAAO,GAC3BC,GAAI,CAAEF,QAASR,EAAU,EAAI,EAAGS,MAAOV,GACvCD,WACA,QAAAa,CAASC,GACP,MAAMC,EAAU,CACdJ,MAAOG,EAAOH,OAEhB,GAAIT,EAAS,CACXa,EAAQ,WAAaD,EAAOJ,O,CAE9BP,EAAWa,IAAID,E,EAEjB,UAAAE,GACEV,G,GAEF,G,CAIN,MAAO,CACLF,SACAkB,UACAH,aACAE,YACD,S","ignoreList":[]}

package/dist/native/{p-7dfb4a60.entry.js → p-c51ee6dc.entry.js}

@@ -1,2 +1,2 @@
-import{r as n,c as e,h as r,a as i,g as o}from"./p-9b093b92.js";import{c as t}from"./p-8a1a6e56.js";import{v as d}from"./p-f5ff676c.js";const a='nv-fieldnumber {\n  --nv-field-border-default: var(--components-form-field-border-default);\n  --nv-field-border-hover: var(--components-form-field-border-hover);\n  --nv-field-border-focus: var(--components-form-field-border-focus);\n  --nv-field-border-disabled: var(--components-form-field-border-default);\n  --nv-field-border-readonly: var(--components-form-field-border-default);\n  --nv-field-focus-box-shadow: var(--color-focus-brand);\n  --nv-field-background: var(--components-form-field-background-default);\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--form-gap-y);\n  box-sizing: border-box;\n}\nnv-fieldnumber[readonly]:not([readonly=false]) {\n  --nv-field-border-default: var(--components-form-field-border-readonly);\n  --nv-field-border-hover: var(--nv-field-border-default);\n  --nv-field-border-focus: var(--components-form-field-border-focus);\n  --nv-field-border-disabled: var(--nv-field-border-default);\n  --nv-field-border-readonly: var(--nv-field-border-default);\n  --nv-field-background: var(--components-form-field-background-readonly);\n}\nnv-fieldnumber[error]:not([error=false]) {\n  --nv-field-border-default: var(--components-form-field-border-error);\n  --nv-field-border-hover: var(--nv-field-border-default);\n  --nv-field-border-focus: var(--nv-field-border-default);\n  --nv-field-border-disabled: var(--nv-field-border-default);\n  --nv-field-border-readonly: var(--nv-field-border-default);\n  --nv-field-focus-box-shadow: var(--color-focus-destructive);\n}\nnv-fieldnumber[success]:not([success=false]) {\n  --nv-field-border-default: var(--components-form-field-border-success);\n  --nv-field-border-hover: var(--nv-field-border-default);\n  --nv-field-border-focus: var(--nv-field-border-default);\n  --nv-field-border-disabled: var(--nv-field-border-default);\n  --nv-field-border-readonly: var(--nv-field-border-default);\n  --nv-field-focus-box-shadow: var(--color-focus-success);\n}\nnv-fieldnumber[required]:not([required=false]) label::after {\n  content: "*";\n  color: var(--components-form-text-required);\n  font-weight: 700;\n}\nnv-fieldnumber label {\n  display: flex;\n  align-items: center;\n  gap: var(--form-label-gap);\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: 500;\n  line-height: var(--form-label-line-height);\n}\nnv-fieldnumber .input-wrapper {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--form-gap-x);\n  align-items: stretch;\n  align-self: stretch;\n}\nnv-fieldnumber .input-wrapper .input-container {\n  display: flex;\n  flex-grow: 1;\n  padding: calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);\n  justify-content: center;\n  align-items: center;\n  gap: var(--form-field-gap);\n  align-self: stretch;\n  border-radius: var(--form-field-radius);\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--nv-field-border-default);\n  opacity: var(--components-form-opacity-default);\n  background: var(--nv-field-background);\n  transition: all 150ms ease-out;\n  container-type: inline-size;\n  container-name: field-number-input-container;\n  overflow: hidden;\n  position: relative;\n}\nnv-fieldnumber .input-wrapper .input-container:hover {\n  border-color: var(--nv-field-border-hover);\n}\nnv-fieldnumber .input-wrapper .input-container:focus-within {\n  border-color: var(--nv-field-border-focus);\n  box-shadow: 0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow);\n}\nnv-fieldnumber .input-wrapper .input-container:has(input:read-only) {\n  opacity: 0.5;\n  background-color: var(--components-form-field-background-readonly);\n  border-color: var(--nv-field-border-readonly);\n}\nnv-fieldnumber .input-wrapper .input-container:has(input:disabled) {\n  opacity: 0.5;\n  background-color: var(--components-form-field-background-disabled);\n  border-color: var(--nv-field-border-disabled);\n}\nnv-fieldnumber .input-wrapper .input-container input {\n  display: flex;\n  align-items: center;\n  flex: 1 0 0;\n  overflow: hidden;\n  background-color: transparent;\n  color: var(--components-form-field-content-text);\n  text-overflow: ellipsis;\n  font-size: var(--form-field-font-size);\n  font-style: normal;\n  font-weight: 500;\n  line-height: var(--form-field-line-height);\n  width: 100%;\n  appearance: textfield;\n}\nnv-fieldnumber .input-wrapper .input-container input:focus {\n  outline: none;\n}\nnv-fieldnumber .input-wrapper .input-container input::placeholder {\n  overflow: hidden;\n  color: var(--components-form-field-content-placeholder);\n  text-overflow: ellipsis;\n  font-family: "TT Norms Pro", sans-serif;\n  font-size: var(--form-field-font-size);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--form-field-line-height);\n}\nnv-fieldnumber .input-wrapper .input-container input::-webkit-inner-spin-button, nv-fieldnumber .input-wrapper .input-container input::-webkit-outer-spin-button {\n  appearance: none;\n  margin: 0;\n}\nnv-fieldnumber .input-wrapper .input-container nv-icon.validation {\n  color: var(--nv-field-border-default);\n}\nnv-fieldnumber .input-wrapper .input-container .stepper {\n  position: absolute;\n  right: 0;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  border-left: var(--notification-border-width-low-emphasis) solid var(--components-form-field-border-readonly);\n}\nnv-fieldnumber .input-wrapper .input-container .stepper nv-icon {\n  color: var(--components-form-field-icon-default);\n  height: 100%;\n}\nnv-fieldnumber .input-wrapper .input-container .stepper nv-icon:first-child {\n  padding: var(--form-field-inner-button-padding-y) var(--form-field-inner-button-padding-x-int) var(--form-field-inner-button-padding-y) var(--form-field-inner-button-padding-x-ext);\n}\nnv-fieldnumber .input-wrapper .input-container .stepper nv-icon:last-child {\n  padding: var(--form-field-inner-button-padding-y) var(--form-field-inner-button-padding-x-ext) var(--form-field-inner-button-padding-y) var(--form-field-inner-button-padding-x-int);\n}\nnv-fieldnumber .input-wrapper .input-container .stepper nv-icon:hover {\n  background: var(--color-interaction-container-neutral-background-hover);\n}\nnv-fieldnumber .input-wrapper .input-container .stepper-spacer {\n  width: calc(2 * (var(--form-field-icon-size) + var(--form-field-inner-button-padding-x-ext) + var(--form-field-inner-button-padding-x-int)) + var(--form-field-padding-x) + var(--notification-border-width-low-emphasis));\n}\n@container field-number-input-container (width < 150px) {\n  nv-fieldnumber .input-wrapper .input-container .stepper-spacer {\n    display: none;\n  }\n  nv-fieldnumber .input-wrapper .input-container .stepper {\n    display: none;\n  }\n}\nnv-fieldnumber .description {\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  line-height: var(--form-description-line-height);\n}\nnv-fieldnumber .error-description {\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  line-height: var(--form-description-line-height);\n  color: var(--components-form-text-description-error);\n}';const l=a;const f=class{constructor(r){n(this,r);this.valueChanged=e(this,"valueChanged",7);this.inputId=d();this.disabled=false;this.readonly=false;this.required=false;this.error=false;this.success=false;this.step=1;this.handleInput=n=>{const e=n.target;this.value=Number(e.value)};this.handleInputContainerClick=()=>{this.inputElement.focus()};this.handlePlus=()=>{this.inputElement.stepUp();this.value=Number(this.inputElement.value)};this.handleMinus=()=>{this.inputElement.stepDown();this.value=Number(this.inputElement.value)};this.isMinValueReached=()=>this.min!==undefined&&this.value<=this.min;this.isMaxValueReached=()=>this.max!==undefined&&this.value>=this.max}componentWillRender(){if(this.message){this.description=this.message}if(this.validation){this.errorDescription=this.validation;this.error=true}}watchValueHandler(n){this.valueChanged.emit(n)}render(){return r(i,{key:"3e63ee0ddeea7114b2b46d1b487beda165f15ee7"},(this.label||this.el.querySelector('[slot="label"]'))&&r("label",{key:"3d2466d944f46dcf3898a91db177566b17a47bae",htmlFor:this.inputId},r("slot",{key:"9aabd8d4192de72fcc4b1244f48bf8339426576d",name:"label"},this.label)),r("div",{key:"03307177d9b82f77fea2c41d12239ed4b9073287",class:"input-wrapper"},r("slot",{key:"64ca5e34fa924a92e83eed4abe011e5ff5bedcef",name:"before-input"}),r("div",{key:"df01a5825076af1678b41ccd4164d4c094ff2c49",class:"input-container",onClick:this.handleInputContainerClick},r("slot",{key:"af451d8c693374942d9d15ae6fe639d447bc3212",name:"leading-input"}),r("input",{key:"60e0f22c61738e0bfb1ab769ff2521d7b6e41add",id:this.inputId,ref:n=>this.inputElement=n,placeholder:this.placeholder,name:this.name,type:"number",required:this.required,max:this.max,min:this.min,step:this.step,value:this.value,disabled:this.disabled,readOnly:this.readonly,onInput:this.handleInput}),this.error&&r("nv-icon",{key:"2a821cf41606870dbd5d3d1a8073809da575eef6",name:"alert-circle",class:"validation",size:"md"}),this.success&&r("nv-icon",{key:"ed13f730a9ce5b27d635b0061f361229bdce6893",name:"circle-check",class:"validation",size:"md"}),r("div",{key:"5e181e738b0074d619b85c966aa0fc248fa8b2df",class:"stepper-spacer"}),r("div",{key:"2dd786b7af88781f1adb3b342a6cd80ed1e65b20",class:"stepper"},r("nv-icon",{key:"9f2e2780c82b6459207de3a921064114f116c8df",name:"minus",size:"md",onClick:this.handleMinus,class:t({disabled:this.isMinValueReached()})}),r("nv-icon",{key:"b7004ec1823b71b89862c4a4b2038946fb2ca776",name:"plus",size:"md",onClick:this.handlePlus,class:t({disabled:this.isMaxValueReached()})}))),r("slot",{key:"b44ad95be87ef5b4201a3eebb660de56b5fec6e0",name:"after-input"})),(this.description||this.el.querySelector('[slot="description"]'))&&r("div",{key:"8a5f2d1d5afcd40338187f9675ee780330f5c253",class:"description"},r("slot",{key:"07618e9a9c36d13f2ae33e49b16a4744aad87150",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&r("div",{key:"95f049c2b32537c63afb6b7edcb19f1c9100da7d",hidden:!this.error,class:"error-description"},r("slot",{key:"4390b2d8bba172e04f0cd6740c347af56738d208",name:"error-description"},this.errorDescription)))}static get formAssociated(){return true}get el(){return o(this)}static get watchers(){return{value:["watchValueHandler"]}}};f.style=l;export{f as nv_fieldnumber};
-//# sourceMappingURL=p-7dfb4a60.entry.js.map
+import{r as e,c as n,h as r,a as i,g as o}from"./p-5439afb8.js";import{c as t}from"./p-8a1a6e56.js";import{v as a}from"./p-f5ff676c.js";const d='nv-fieldnumber {\n  --nv-field-border-default: var(--components-form-field-border-default);\n  --nv-field-border-hover: var(--components-form-field-border-hover);\n  --nv-field-border-focus: var(--components-form-field-border-focus);\n  --nv-field-border-disabled: var(--components-form-field-border-default);\n  --nv-field-border-readonly: var(--components-form-field-border-default);\n  --nv-field-focus-box-shadow: var(--color-focus-brand);\n  --nv-field-background: var(--components-form-field-background-default);\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--form-gap-y);\n  box-sizing: border-box;\n}\nnv-fieldnumber[readonly]:not([readonly=false]) {\n  --nv-field-border-default: var(--components-form-field-border-readonly);\n  --nv-field-border-hover: var(--nv-field-border-default);\n  --nv-field-border-focus: var(--components-form-field-border-focus);\n  --nv-field-border-disabled: var(--nv-field-border-default);\n  --nv-field-border-readonly: var(--nv-field-border-default);\n  --nv-field-background: var(--components-form-field-background-readonly);\n}\nnv-fieldnumber[error]:not([error=false]) {\n  --nv-field-border-default: var(--components-form-field-border-error);\n  --nv-field-border-hover: var(--nv-field-border-default);\n  --nv-field-border-focus: var(--nv-field-border-default);\n  --nv-field-border-disabled: var(--nv-field-border-default);\n  --nv-field-border-readonly: var(--nv-field-border-default);\n  --nv-field-focus-box-shadow: var(--color-focus-destructive);\n}\nnv-fieldnumber[success]:not([success=false]) {\n  --nv-field-border-default: var(--components-form-field-border-success);\n  --nv-field-border-hover: var(--nv-field-border-default);\n  --nv-field-border-focus: var(--nv-field-border-default);\n  --nv-field-border-disabled: var(--nv-field-border-default);\n  --nv-field-border-readonly: var(--nv-field-border-default);\n  --nv-field-focus-box-shadow: var(--color-focus-success);\n}\nnv-fieldnumber[required]:not([required=false]) label::after {\n  content: "*";\n  color: var(--components-form-text-required);\n  font-weight: 700;\n}\nnv-fieldnumber label {\n  display: flex;\n  align-items: center;\n  gap: var(--form-label-gap);\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: 500;\n  line-height: var(--form-label-line-height);\n}\nnv-fieldnumber .input-wrapper {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--form-gap-x);\n  align-items: stretch;\n  align-self: stretch;\n}\nnv-fieldnumber .input-wrapper .input-container {\n  display: flex;\n  flex-grow: 1;\n  padding: calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);\n  justify-content: center;\n  align-items: center;\n  gap: var(--form-field-gap);\n  align-self: stretch;\n  border-radius: var(--form-field-radius);\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--nv-field-border-default);\n  opacity: var(--components-form-opacity-default);\n  background: var(--nv-field-background);\n  transition: all 150ms ease-out;\n  container-type: inline-size;\n  container-name: field-number-input-container;\n  overflow: hidden;\n  position: relative;\n}\nnv-fieldnumber .input-wrapper .input-container:hover {\n  border-color: var(--nv-field-border-hover);\n}\nnv-fieldnumber .input-wrapper .input-container:focus-within {\n  border-color: var(--nv-field-border-focus);\n  box-shadow: 0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow);\n}\nnv-fieldnumber .input-wrapper .input-container:has(input:read-only) {\n  opacity: 0.5;\n  background-color: var(--components-form-field-background-readonly);\n  border-color: var(--nv-field-border-readonly);\n}\nnv-fieldnumber .input-wrapper .input-container:has(input:disabled) {\n  opacity: 0.5;\n  background-color: var(--components-form-field-background-disabled);\n  border-color: var(--nv-field-border-disabled);\n}\nnv-fieldnumber .input-wrapper .input-container input {\n  display: flex;\n  align-items: center;\n  flex: 1 0 0;\n  overflow: hidden;\n  background-color: transparent;\n  color: var(--components-form-field-content-text);\n  text-overflow: ellipsis;\n  font-size: var(--form-field-font-size);\n  font-style: normal;\n  font-weight: 500;\n  line-height: var(--form-field-line-height);\n  width: 100%;\n  appearance: textfield;\n}\nnv-fieldnumber .input-wrapper .input-container input:focus {\n  outline: none;\n}\nnv-fieldnumber .input-wrapper .input-container input::placeholder {\n  overflow: hidden;\n  color: var(--components-form-field-content-placeholder);\n  text-overflow: ellipsis;\n  font-family: "TT Norms Pro", sans-serif;\n  font-size: var(--form-field-font-size);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--form-field-line-height);\n}\nnv-fieldnumber .input-wrapper .input-container input::-webkit-inner-spin-button, nv-fieldnumber .input-wrapper .input-container input::-webkit-outer-spin-button {\n  appearance: none;\n  margin: 0;\n}\nnv-fieldnumber .input-wrapper .input-container nv-icon.validation {\n  color: var(--nv-field-border-default);\n}\nnv-fieldnumber .input-wrapper .input-container .stepper {\n  position: absolute;\n  right: 0;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  border-left: var(--notification-border-width-low-emphasis) solid var(--components-form-field-border-readonly);\n}\nnv-fieldnumber .input-wrapper .input-container .stepper nv-icon {\n  color: var(--components-form-field-icon-default);\n  height: 100%;\n}\nnv-fieldnumber .input-wrapper .input-container .stepper nv-icon:first-child {\n  padding: var(--form-field-inner-button-padding-y) var(--form-field-inner-button-padding-x-int) var(--form-field-inner-button-padding-y) var(--form-field-inner-button-padding-x-ext);\n}\nnv-fieldnumber .input-wrapper .input-container .stepper nv-icon:last-child {\n  padding: var(--form-field-inner-button-padding-y) var(--form-field-inner-button-padding-x-ext) var(--form-field-inner-button-padding-y) var(--form-field-inner-button-padding-x-int);\n}\nnv-fieldnumber .input-wrapper .input-container .stepper nv-icon:hover {\n  background: var(--color-interaction-container-neutral-background-hover);\n}\nnv-fieldnumber .input-wrapper .input-container .stepper-spacer {\n  width: calc(2 * (var(--form-field-icon-size) + var(--form-field-inner-button-padding-x-ext) + var(--form-field-inner-button-padding-x-int)) + var(--form-field-padding-x) + var(--notification-border-width-low-emphasis));\n}\n@container field-number-input-container (width < 150px) {\n  nv-fieldnumber .input-wrapper .input-container .stepper-spacer {\n    display: none;\n  }\n  nv-fieldnumber .input-wrapper .input-container .stepper {\n    display: none;\n  }\n}\nnv-fieldnumber .description {\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  line-height: var(--form-description-line-height);\n}\nnv-fieldnumber .error-description {\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  line-height: var(--form-description-line-height);\n  color: var(--components-form-text-description-error);\n}';const l=d;const f=class{constructor(r){e(this,r);this.valueChanged=n(this,"valueChanged",7);this.inputId=a();this.disabled=false;this.readonly=false;this.required=false;this.error=false;this.success=false;this.step=1;this.handleInput=e=>{const n=e.target;this.value=Number(n.value)};this.handleInputContainerClick=()=>{this.inputElement.focus()};this.handlePlus=()=>{this.inputElement.stepUp();this.value=Number(this.inputElement.value)};this.handleMinus=()=>{this.inputElement.stepDown();this.value=Number(this.inputElement.value)};this.isMinValueReached=()=>this.min!==undefined&&this.value<=this.min;this.isMaxValueReached=()=>this.max!==undefined&&this.value>=this.max}watchValueHandler(e){this.valueChanged.emit(e)}componentWillRender(){if(this.message){this.description=this.message}if(this.validation){this.errorDescription=this.validation;this.error=true}}render(){return r(i,{key:"d209941096a1c88b73985aa26fb58f9b8bf6ca3e"},(this.label||this.el.querySelector('[slot="label"]'))&&r("label",{key:"b4720fa9692e0337151ddbdc427b482fe06a6d63",htmlFor:this.inputId},r("slot",{key:"03f8b22d963557087b04e0bc2af742b110926253",name:"label"},this.label)),r("div",{key:"d9734628d6a771a64cb7163b91abc82666d7db5e",class:"input-wrapper"},r("slot",{key:"01e9f83f7d96c48ab3f7a3877e027992bfa3c611",name:"before-input"}),r("div",{key:"12e6e80ce7e8e7c3e99b58a3ae86787ebb83acd0",class:"input-container",onClick:this.handleInputContainerClick},r("slot",{key:"6c79d0f8777d94eb74d4e0ef6da9e9dc41e2a9ea",name:"leading-input"}),r("input",{key:"c8cb50a410c4b10988d4d89613fc56f550718e58",id:this.inputId,ref:e=>this.inputElement=e,placeholder:this.placeholder,name:this.name,type:"number",required:this.required,max:this.max,min:this.min,step:this.step,value:this.value,disabled:this.disabled,readOnly:this.readonly,onInput:this.handleInput}),this.error&&r("nv-icon",{key:"9443363b74a7a6aa77e67824e1ddb8113129221d",name:"alert-circle",class:"validation",size:"md"}),this.success&&r("nv-icon",{key:"aca8a5c26a7c495cced88d2ebea93a3a004e42a6",name:"circle-check",class:"validation",size:"md"}),r("div",{key:"e7783cfaf34e31b93b9faf02d9ce4e8e81b3eeec",class:"stepper-spacer"}),r("div",{key:"69dc88252737d0db8a0bba9f664f1b9fde52e9ed",class:"stepper"},r("nv-icon",{key:"44d044fa1f5a58875e848df71e1bc65222d05dc7",name:"minus",size:"md",onClick:this.handleMinus,class:t({disabled:this.isMinValueReached()})}),r("nv-icon",{key:"27320a1bb610d3aa71ea1689460f8065f448a07e",name:"plus",size:"md",onClick:this.handlePlus,class:t({disabled:this.isMaxValueReached()})}))),r("slot",{key:"0e98e77290b8a4c0f4e5eb4caccb7d12dd79f8ff",name:"after-input"})),(this.description||this.el.querySelector('[slot="description"]'))&&r("div",{key:"96249b9427a223a1c913c13905af097505841f2a",class:"description"},r("slot",{key:"a7aadf4d4d406b0eeea93eb5a4fa77c4df1ec315",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&r("div",{key:"cf2cde880a2a906fb04b379ccbfde9da2d283efe",hidden:!this.error,class:"error-description"},r("slot",{key:"92263232256d6935d3a4ed788c1bb11c61fe5467",name:"error-description"},this.errorDescription)))}static get formAssociated(){return true}get el(){return o(this)}static get watchers(){return{value:["watchValueHandler"]}}};f.style=l;export{f as nv_fieldnumber};
+//# sourceMappingURL=p-c51ee6dc.entry.js.map

package/dist/native/p-c51ee6dc.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["nvFieldnumberCss","NvFieldnumberStyle0","NvFieldnumber","constructor","hostRef","this","inputId","uuidv4","disabled","readonly","required","error","success","step","handleInput","event","input","target","value","Number","handleInputContainerClick","inputElement","focus","handlePlus","stepUp","handleMinus","stepDown","isMinValueReached","min","undefined","isMaxValueReached","max","watchValueHandler","newValue","valueChanged","emit","componentWillRender","message","description","validation","errorDescription","render","h","Host","key","label","el","querySelector","htmlFor","name","class","onClick","id","ref","e","placeholder","type","readOnly","onInput","size","clsx","hidden"],"sources":["src/components/nv-fieldnumber/nv-fieldnumber.scss?tag=nv-fieldnumber","src/components/nv-fieldnumber/nv-fieldnumber.tsx"],"sourcesContent":["@import '../../styles/form-field';\n\nnv-fieldnumber {\n  @include form-field-variables();\n  @include form-field-root();\n\n  &[readonly]:not([readonly='false']) {\n    @include form-field-readonly-variables();\n  }\n\n  &[error]:not([error='false']) {\n    @include form-field-error-variables();\n  }\n\n  &[success]:not([success='false']) {\n    @include form-field-success-variables();\n  }\n\n  &[required]:not([required='false']) label {\n    @include form-field-label-required();\n  }\n\n  label {\n    @include form-field-label();\n  }\n\n  .input-wrapper {\n    @include form-field-input-wrapper();\n\n    .input-container {\n      @include form-field-input-container();\n\n      container-type: inline-size;\n      container-name: field-number-input-container;\n      overflow: hidden;\n      position: relative;\n\n      input {\n        @include form-field-input();\n\n        width: 100%;\n        appearance: textfield;\n\n        &::-webkit-inner-spin-button,\n        &::-webkit-outer-spin-button {\n          appearance: none;\n          margin: 0;\n        }\n      }\n\n      nv-icon.validation {\n        @include form-field-icon();\n      }\n\n      .stepper {\n        position: absolute;\n        right: 0;\n        height: 100%;\n        display: flex;\n        align-items: center;\n        border-left: var(--notification-border-width-low-emphasis) solid var(--components-form-field-border-readonly);\n\n        nv-icon {\n          color: var(--components-form-field-icon-default);\n          height: 100%;\n\n          &:first-child {\n            padding: var(--form-field-inner-button-padding-y) var(--form-field-inner-button-padding-x-int) var(--form-field-inner-button-padding-y) var(--form-field-inner-button-padding-x-ext);\n          }\n\n          &:last-child {\n            padding: var(--form-field-inner-button-padding-y) var(--form-field-inner-button-padding-x-ext) var(--form-field-inner-button-padding-y) var(--form-field-inner-button-padding-x-int);\n          }\n\n          &:hover {\n            background: var(--color-interaction-container-neutral-background-hover);\n          }\n        }\n      }\n\n      .stepper-spacer {\n        //2 icons both with interior and exterior padding, the default padding from the input-container and the thickness of the separator\n        width: calc(2 * (var(--form-field-icon-size) + var(--form-field-inner-button-padding-x-ext) + var(--form-field-inner-button-padding-x-int)) + var(--form-field-padding-x) + var(--notification-border-width-low-emphasis));\n      }\n\n      // container query to remove .stepper and and the spacer when the container is less than 150px\n      // .. this needs to be an absolute value because container queries do not accept variables\n      // .. using relative width (cqw) compared to a parent container would not work\n      // .. because the parent container follows the child's width\n      @container field-number-input-container (width < 150px) {\n        .stepper-spacer {\n          display: none;\n        }\n\n        .stepper {\n          display: none;\n        }\n      }\n    }\n  }\n\n  .description {\n    @include form-field-description();\n  }\n\n  .error-description {\n    @include form-field-error-description();\n  }\n}","import {\n  Component,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Watch,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\n\n/**\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\n@Component({\n  tag: 'nv-fieldnumber',\n  styleUrl: 'nv-fieldnumber.scss',\n  shadow: false,\n  formAssociated: true,\n})\nexport class NvFieldnumber {\n  @Element() el: HTMLNvFieldnumberElement;\n  private inputElement!: HTMLInputElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Message defines a 'hint ' message for the number field.\n   * @deprecated Use `description` instead.\n   */\n  @Prop()\n  readonly message: string;\n\n  /**\n   * Add the message to the validation state.\n   * @deprecated Use `errorDescription` and set the error prop instead.\n   */\n  @Prop()\n  readonly validation: string;\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the input element and the for attribute of the associated\n   * label. If no ID is provided, a random one will be automatically generated\n   * to ensure unique identification, facilitating proper label association and\n   * accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\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\n   * user-friendly.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\n\n  /**\n   * Add helpful hints or extra information under the text input field. This is\n   * where you can clarify what users should enter or provide additional\n   * instructions, making the form easier to fill out correctly.\n   */\n  @Prop({ reflect: true, mutable: true })\n  description: string;\n\n  /**\n   * Display temporary text inside the input field to give users a hint about\n   * what to type. It’s a great way to provide examples or suggestions directly\n   * in the field before they start typing.\n   */\n  @Prop({ reflect: true })\n  readonly placeholder: string;\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   * The disabled prop lets you turn off the input field so that users can’t\n   * type in it. When disabled, the field is grayed out and won’t respond to#\n   * clicks or touches.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Display the input field’s content without allowing users to change it.\n   * Users can still click on it, select, and copy the text, but they won’t be\n   * able to type or delete anything.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks the input field as required, ensuring that the user must fill it out\n   * before submitting the form.\n   */\n  @Prop({ reflect: true })\n  readonly required: 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, mutable: true })\n  error: boolean = false;\n\n  /**\n   * Show a helpful message under the input field when there’s a problem. It\n   * explains what’s wrong and how users can fix it, making the error easier to\n   * understand and resolve.\n   * @validator message\n   */\n  @Prop({ reflect: true, mutable: true })\n  errorDescription: string;\n\n  /**\n   * Changes the input field’s appearance to indicate successful input or\n   * validation.\n   */\n  @Prop({ reflect: true })\n  readonly success: boolean = false;\n\n  /**\n   * The maximum value that the input field can accept. Use this in combination\n   * with min to create a range of valid values.\n   */\n  @Prop({ reflect: true })\n  readonly max: number;\n\n  /**\n   * The minimum value that the input field can accept. Use this in combination\n   * with max to create a range of valid values.\n   */\n  @Prop({ reflect: true })\n  readonly min: number;\n\n  /**\n   * Define the increment value for the input field. It determines how much the\n   * value will increase or decrease when the user clicks the stepper buttons.\n   */\n  @Prop({ reflect: true })\n  readonly step: number = 1;\n\n  /**\n   * The value of the input field. It’s the text that users type in or the value\n   * that you set programmatically. This is the main way to interact with the\n   * input field, and it’s essential for creating forms that users can fill out.\n   */\n  @Prop({ reflect: true, mutable: true })\n  value: number;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the input value changes.\n   * @bind value\n   */\n  @Event()\n  valueChanged: EventEmitter<number>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('value')\n  watchValueHandler(newValue: number) {\n    this.valueChanged.emit(newValue);\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region METHODS\n\n  private handleInput = (event: Event) => {\n    const input = event.target as HTMLInputElement;\n    this.value = Number(input.value);\n  };\n\n  private handleInputContainerClick = () => {\n    this.inputElement.focus();\n  };\n\n  private handlePlus = () => {\n    this.inputElement.stepUp();\n    this.value = Number(this.inputElement.value);\n  };\n\n  private handleMinus = () => {\n    this.inputElement.stepDown();\n    this.value = Number(this.inputElement.value);\n  };\n\n  private isMinValueReached = (): boolean => {\n    return this.min !== undefined && this.value <= this.min;\n  };\n\n  private isMaxValueReached = (): boolean => {\n    return this.max !== undefined && this.value >= this.max;\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillRender() {\n    if (this.message) {\n      this.description = this.message;\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        {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n          <label htmlFor={this.inputId}>\n            <slot name=\"label\">{this.label}</slot>\n          </label>\n        )}\n\n        <div class=\"input-wrapper\">\n          <slot name=\"before-input\"></slot>\n\n          <div class=\"input-container\" onClick={this.handleInputContainerClick}>\n            <slot name=\"leading-input\"></slot>\n            <input\n              id={this.inputId}\n              ref={e => (this.inputElement = e)}\n              placeholder={this.placeholder}\n              name={this.name}\n              type=\"number\"\n              required={this.required}\n              max={this.max}\n              min={this.min}\n              step={this.step}\n              value={this.value}\n              disabled={this.disabled}\n              readOnly={this.readonly}\n              onInput={this.handleInput}\n            />\n            {this.error && (\n              <nv-icon name=\"alert-circle\" class=\"validation\" size=\"md\" />\n            )}\n            {this.success && (\n              <nv-icon name=\"circle-check\" class=\"validation\" size=\"md\" />\n            )}\n            <div class=\"stepper-spacer\"></div>\n            <div class=\"stepper\">\n              <nv-icon\n                name=\"minus\"\n                size=\"md\"\n                onClick={this.handleMinus}\n                class={clsx({ disabled: this.isMinValueReached() })}\n              />\n              <nv-icon\n                name=\"plus\"\n                size=\"md\"\n                onClick={this.handlePlus}\n                class={clsx({ disabled: this.isMaxValueReached() })}\n              />\n            </div>\n          </div>\n\n          <slot name=\"after-input\"></slot>\n        </div>\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\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      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/native/{p-2063c768.entry.js → p-d24586ed.entry.js}

@@ -1,2 +1,2 @@
-import{r as a,h as t,a as r}from"./p-9b093b92.js";import{c as o}from"./p-8a1a6e56.js";import{S as n}from"./p-74407727.js";const v='nv-avatar{align-items:center !important;background-color:var(--components-avatar-background-1);border-radius:var(--radius-rounded-full) !important;display:flex !important;flex-shrink:0 !important;font-family:"TT Norms Pro", sans-serif;font-style:normal;font-weight:var(--font-weight-medium-emphasis);justify-content:center !important;leading-trim:both;line-height:1 !important;text-align:center;text-edge:cap;text-transform:uppercase}nv-avatar.avatar-color-1{background-color:var(--components-avatar-background-1);color:var(--components-avatar-content-1)}nv-avatar.avatar-color-2{background-color:var(--components-avatar-background-2);color:var(--components-avatar-content-2)}nv-avatar.avatar-color-3{background-color:var(--components-avatar-background-3);color:var(--components-avatar-content-3)}nv-avatar.avatar-color-4{background-color:var(--components-avatar-background-4);color:var(--components-avatar-content-4)}nv-avatar.avatar-color-5{background-color:var(--components-avatar-background-5);color:var(--components-avatar-content-5)}nv-avatar.avatar-color-6{background-color:var(--components-avatar-background-6);color:var(--components-avatar-content-6)}nv-avatar.avatar-color-7{background-color:var(--components-avatar-background-7);color:var(--components-avatar-content-7)}nv-avatar.avatar-color-8{background-color:var(--components-avatar-background-8);color:var(--components-avatar-content-8)}nv-avatar.avatar-color-9{background-color:var(--components-avatar-background-9);color:var(--components-avatar-content-9)}nv-avatar.avatar-color-10{background-color:var(--components-avatar-background-10);color:var(--components-avatar-content-10)}nv-avatar img{height:100%;width:100%;object-fit:cover;object-position:center;border-radius:50%}nv-avatar.avatar-xs{width:var(--avatar-xs-size);height:var(--avatar-xs-size);font-size:var(--avatar-xs-font-size);line-height:var(--avatar-xs-font-size)}nv-avatar.avatar-xs nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-avatar.avatar-sm{width:var(--avatar-sm-size);height:var(--avatar-sm-size);font-size:var(--avatar-sm-font-size);line-height:var(--avatar-sm-font-size)}nv-avatar.avatar-sm nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-avatar.avatar-md{width:var(--avatar-md-size);height:var(--avatar-md-size);font-size:var(--avatar-md-font-size);line-height:var(--avatar-md-font-size)}nv-avatar.avatar-md nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-avatar.avatar-lg{width:var(--avatar-lg-size);height:var(--avatar-lg-size);font-size:var(--avatar-lg-font-size);line-height:var(--avatar-lg-font-size)}nv-avatar.avatar-lg nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-avatar.avatar-xl{width:var(--avatar-xl-size);height:var(--avatar-xl-size);font-size:var(--avatar-xl-font-size);line-height:var(--avatar-xl-font-size)}nv-avatar.avatar-xl nv-icon>svg{width:var(--spacing-7);height:var(--spacing-7);stroke-width:1.9px}';const i=v;const s=class{constructor(t){a(this,t);this.size="md";this.color="1"}componentWillRender(){if(this.xsmall){this.size=n.ExtraSmall}if(this.small){this.size=n.Small}if(this.medium){this.size=n.Medium}if(this.large){this.size=n.Large}if(this.xlarge){this.size=n.ExtraLarge}if(this.text){this.initials=this.text}if(this.url){this.src=this.url}}trimInitials(a){return a.trim().substring(0,2)}render(){return t(r,{key:"4543ac26e2c1d6d91de2c4671657e584486daefe",class:o(`avatar-${this.size}`,`avatar-color-${this.color}`),"aria-label":this.alt},this.src?t("img",{src:this.src,alt:this.alt}):this.initials?this.trimInitials(this.initials):t("slot",{name:"icon"},t("nv-icon",{name:"user"})))}};s.style=i;export{s as nv_avatar};
-//# sourceMappingURL=p-2063c768.entry.js.map
+import{r as a,h as t,a as r}from"./p-5439afb8.js";import{c as o}from"./p-8a1a6e56.js";import{S as n}from"./p-56f71851.js";const v='nv-avatar{align-items:center !important;background-color:var(--components-avatar-background-1);border-radius:var(--radius-rounded-full) !important;display:flex !important;flex-shrink:0 !important;font-family:"TT Norms Pro", sans-serif;font-style:normal;font-weight:var(--font-weight-medium-emphasis);justify-content:center !important;leading-trim:both;line-height:1 !important;text-align:center;text-edge:cap;text-transform:uppercase}nv-avatar.avatar-color-1{background-color:var(--components-avatar-background-1);color:var(--components-avatar-content-1)}nv-avatar.avatar-color-2{background-color:var(--components-avatar-background-2);color:var(--components-avatar-content-2)}nv-avatar.avatar-color-3{background-color:var(--components-avatar-background-3);color:var(--components-avatar-content-3)}nv-avatar.avatar-color-4{background-color:var(--components-avatar-background-4);color:var(--components-avatar-content-4)}nv-avatar.avatar-color-5{background-color:var(--components-avatar-background-5);color:var(--components-avatar-content-5)}nv-avatar.avatar-color-6{background-color:var(--components-avatar-background-6);color:var(--components-avatar-content-6)}nv-avatar.avatar-color-7{background-color:var(--components-avatar-background-7);color:var(--components-avatar-content-7)}nv-avatar.avatar-color-8{background-color:var(--components-avatar-background-8);color:var(--components-avatar-content-8)}nv-avatar.avatar-color-9{background-color:var(--components-avatar-background-9);color:var(--components-avatar-content-9)}nv-avatar.avatar-color-10{background-color:var(--components-avatar-background-10);color:var(--components-avatar-content-10)}nv-avatar img{height:100%;width:100%;object-fit:cover;object-position:center;border-radius:50%}nv-avatar.avatar-xs{width:var(--avatar-xs-size);height:var(--avatar-xs-size);font-size:var(--avatar-xs-font-size);line-height:var(--avatar-xs-font-size)}nv-avatar.avatar-xs nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-avatar.avatar-sm{width:var(--avatar-sm-size);height:var(--avatar-sm-size);font-size:var(--avatar-sm-font-size);line-height:var(--avatar-sm-font-size)}nv-avatar.avatar-sm nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-avatar.avatar-md{width:var(--avatar-md-size);height:var(--avatar-md-size);font-size:var(--avatar-md-font-size);line-height:var(--avatar-md-font-size)}nv-avatar.avatar-md nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-avatar.avatar-lg{width:var(--avatar-lg-size);height:var(--avatar-lg-size);font-size:var(--avatar-lg-font-size);line-height:var(--avatar-lg-font-size)}nv-avatar.avatar-lg nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-avatar.avatar-xl{width:var(--avatar-xl-size);height:var(--avatar-xl-size);font-size:var(--avatar-xl-font-size);line-height:var(--avatar-xl-font-size)}nv-avatar.avatar-xl nv-icon>svg{width:var(--spacing-7);height:var(--spacing-7);stroke-width:1.9px}';const i=v;const s=class{constructor(t){a(this,t);this.size="md";this.color="1"}componentWillRender(){if(this.xsmall){this.size=n.ExtraSmall}if(this.small){this.size=n.Small}if(this.medium){this.size=n.Medium}if(this.large){this.size=n.Large}if(this.xlarge){this.size=n.ExtraLarge}if(this.text){this.initials=this.text}if(this.url){this.src=this.url}}trimInitials(a){return a.trim().substring(0,2)}render(){return t(r,{key:"4543ac26e2c1d6d91de2c4671657e584486daefe",class:o(`avatar-${this.size}`,`avatar-color-${this.color}`),"aria-label":this.alt},this.src?t("img",{src:this.src,alt:this.alt}):this.initials?this.trimInitials(this.initials):t("slot",{name:"icon"},t("nv-icon",{name:"user"})))}};s.style=i;export{s as nv_avatar};
+//# sourceMappingURL=p-d24586ed.entry.js.map

package/dist/native/p-d429a343.js

@@ -0,0 +1,2 @@
+function e(e,n,t){e.forEach((([e,s])=>n.addEventListener(e,s.bind(t))))}function n(e,n,t){e.forEach((([e,s])=>n.removeEventListener(e,s.bind(t))))}const t=Object.freeze({__proto__:null,addEventListeners:e,removeEventListeners:n});export{e as a,t as e,n as r};
+//# sourceMappingURL=p-d429a343.js.map

package/dist/native/p-d429a343.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["addEventListeners","events","target","context","forEach","event","listener","addEventListener","bind","removeEventListeners","removeEventListener"],"sources":["src/utils/events.utils.ts"],"sourcesContent":["export type EventsAndListeners = [string, EventListener][];\n\n/**\n * Adds a set of event listeners to the given target.\n * @param {EventsAndListeners} events - The events and listeners to add.\n * @param {Element | Window | Document} target  - The target element or window to add the event listeners to.\n * @param {T} context - The class context to bind the event listeners to.\n */\nexport function addEventListeners<T>(\n  events: EventsAndListeners,\n  target: Element | Window | Document,\n  context: T,\n) {\n  events.forEach(([event, listener]) =>\n    target.addEventListener(event, listener.bind(context)),\n  );\n}\n\n/**\n * Removes a set of event listeners from the given target.\n * @param {EventsAndListeners} events - The events and listeners to remove.\n * @param {Element | Window | Document} target  - The target element or window to remove the event listeners from.\n * @param {T} context - The class context to bind the event listeners to.\n */\nexport function removeEventListeners<T>(\n  events: EventsAndListeners,\n  target: Element | Window | Document,\n  context: T,\n) {\n  events.forEach(([event, listener]) =>\n    target.removeEventListener(event, listener.bind(context)),\n  );\n}\n"],"mappings":"SAQgBA,EACdC,EACAC,EACAC,GAEAF,EAAOG,SAAQ,EAAEC,EAAOC,KACtBJ,EAAOK,iBAAiBF,EAAOC,EAASE,KAAKL,KAEjD,C,SAQgBM,EACdR,EACAC,EACAC,GAEAF,EAAOG,SAAQ,EAAEC,EAAOC,KACtBJ,EAAOQ,oBAAoBL,EAAOC,EAASE,KAAKL,KAEpD,C","ignoreList":[]}