@nova-design-system/nova-webcomponents 3.0.0-beta.27 → 3.0.0-beta.29

package/dist/native/p-1aaee302.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["nvAvatarCss","NvAvatarStyle0","NvAvatar","componentWillRender","this","xsmall","size","SemanticSizes","ExtraSmall","small","Small","medium","Medium","large","Large","xlarge","ExtraLarge","text","initials","url","src","trimInitials","trim","substring","render","h","Host","key","class","clsx","color","alt","name"],"sources":["src/components/nv-avatar/nv-avatar.scss?tag=nv-avatar","src/components/nv-avatar/nv-avatar.tsx"],"sourcesContent":["@use \"sass:map\";\n@use \"../nv-icon/nv-icon.scss\" as icon;\n\n/* Variants */\n$avatar-sizes: (\"xs\", \"sm\", \"md\", \"lg\", \"xl\");\n$avatar-colors: (\"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\", \"10\");\n\n/* Define maps for size-related variables */\n$avatar-size: (\n  \"xs\": var(--avatar-xs-size),\n  \"sm\": var(--avatar-sm-size),\n  \"md\": var(--avatar-md-size),\n  \"lg\": var(--avatar-lg-size),\n  \"xl\": var(--avatar-xl-size)\n);\n\n$avatar-font-size: (\n  \"xs\": var(--avatar-xs-font-size),\n  \"sm\": var(--avatar-sm-font-size),\n  \"md\": var(--avatar-md-font-size),\n  \"lg\": var(--avatar-lg-font-size),\n  \"xl\": var(--avatar-xl-font-size)\n);\n\n/* Define maps for color-related variables */\n$avatar-color-background: (\n  \"1\": var(--components-avatar-background-1),\n  \"2\": var(--components-avatar-background-2),\n  \"3\": var(--components-avatar-background-3),\n  \"4\": var(--components-avatar-background-4),\n  \"5\": var(--components-avatar-background-5),\n  \"6\": var(--components-avatar-background-6),\n  \"7\": var(--components-avatar-background-7),\n  \"8\": var(--components-avatar-background-8),\n  \"9\": var(--components-avatar-background-9),\n  \"10\": var(--components-avatar-background-10)\n);\n\n$avatar-color-content: (\n  \"1\": var(--components-avatar-content-1),\n  \"2\": var(--components-avatar-content-2),\n  \"3\": var(--components-avatar-content-3),\n  \"4\": var(--components-avatar-content-4),\n  \"5\": var(--components-avatar-content-5),\n  \"6\": var(--components-avatar-content-6),\n  \"7\": var(--components-avatar-content-7),\n  \"8\": var(--components-avatar-content-8),\n  \"9\": var(--components-avatar-content-9),\n  \"10\": var(--components-avatar-content-10)\n);\n\n@mixin avatar-base-styles() {\n  align-items: center !important;\n  background-color: var(--components-avatar-background-1);\n  border-radius: var(--radius-rounded-full) !important;\n  display: flex !important;\n  flex-shrink: 0 !important;\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-style: normal;\n  font-weight: var(--font-weight-medium-emphasis);\n  justify-content: center !important;\n  leading-trim: both;\n  line-height: 1 !important;\n  text-align: center;\n  text-edge: cap;\n  text-transform: uppercase;\n}\n\n@mixin avatar-color($avatar-number) {\n  background-color: map.get($avatar-color-background, $avatar-number);\n  color: map.get($avatar-color-content, $avatar-number);\n}\n\n@mixin avatar-image-styles() {\n  height: 100%;\n  width: 100%;\n  object-fit: cover;\n  object-position: center;\n  border-radius: 50%;\n}\n\n@mixin avatar-size-styles($size) {\n  width: map.get($avatar-size, $size);\n  height: map.get($avatar-size, $size);\n  font-size: map.get($avatar-font-size, $size);\n  line-height: map.get($avatar-font-size, $size);\n\n  nv-icon > svg {\n    @include icon.icon-size-and-stroke(\n      map.get(map.get(icon.$icon-config, $size), size),\n      map.get(map.get(icon.$icon-config, $size), stroke)\n    );\n  }\n}\n\nnv-avatar {\n  @include avatar-base-styles();\n\n  @each $color in $avatar-colors {\n    &.avatar-color-#{$color} {\n      @include avatar-color($color);\n    }\n  }\n\n  img {\n    @include avatar-image-styles();\n  }\n\n  @each $size in $avatar-sizes {\n    &.avatar-#{$size} {\n      @include avatar-size-styles($size);\n    }\n  }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\nimport { SemanticSizes } from '../../utils/constants';\n\n/**\n * @slot icon - if you want to add an icon to the avatar, use this slot with an svg or nv-icon\n */\n@Component({\n  tag: 'nv-avatar',\n  styleUrl: 'nv-avatar.scss',\n  shadow: false,\n})\nexport class NvAvatar {\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Set size to ExtraSmall to the avatar.\n   * @deprecated use size instead.\n   */\n  @Prop()\n  readonly xsmall: boolean;\n\n  /**\n   * Set size to Small to the avatar.\n   * @deprecated use size instead.\n   */\n  @Prop()\n  readonly small: boolean;\n\n  /**\n   * Set size to Medium to the avatar.\n   * @deprecated use size instead.\n   */\n  @Prop()\n  readonly medium: boolean;\n\n  /**\n   * Set size to Large to the avatar.\n   * @deprecated use size instead.\n   */\n  @Prop()\n  readonly large: boolean;\n\n  /**\n   * Set size to ExtraLarge to the avatar.\n   * @deprecated use size instead.\n   */\n  @Prop()\n  readonly xlarge: boolean;\n\n  /**\n   * Set initials to the avatar.\n   * @deprecated use initials instead.\n   */\n\n  @Prop()\n  readonly text: string;\n\n  /**\n   * Set src to the avatar.\n   * @deprecated use src instead.\n   */\n  @Prop()\n  readonly url: string;\n\n  componentWillRender() {\n    if (this.xsmall) {\n      this.size = SemanticSizes.ExtraSmall;\n    }\n    if (this.small) {\n      this.size = SemanticSizes.Small;\n    }\n    if (this.medium) {\n      this.size = SemanticSizes.Medium;\n    }\n    if (this.large) {\n      this.size = SemanticSizes.Large;\n    }\n    if (this.xlarge) {\n      this.size = SemanticSizes.ExtraLarge;\n    }\n    if (this.text) {\n      this.initials = this.text;\n    }\n    if (this.url) {\n      this.src = this.url;\n    }\n  }\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * If and image is provided, add an alt tag to describe it.\n   */\n  @Prop({ reflect: true })\n  readonly alt: string;\n\n  /**\n   * Will insert an image into the avatar.\n   */\n  @Prop({ reflect: true, mutable: true })\n  src: string;\n\n  /**\n   * Initials of the avatar. Usually use two letters\n   * When filled with the src parameter, the text will not be rendered.\n   */\n  @Prop({ reflect: true, mutable: true })\n  initials: string;\n\n  /**\n   * Define the size of the avatar. You can use t-shirt sizes.\n   */\n  @Prop({ reflect: true, mutable: true })\n  size: `${SemanticSizes}` = 'md';\n\n  /**\n   * You can apply different colors on the Avatar.\n   * Use a string number between 1 and 10.\n   */\n  @Prop({ reflect: true })\n  readonly color: string = '1';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Makes sure the initials are trimmed to 2 letters.\n   * @param {string} initials - The initials to be trimmed.\n   * @returns {string} The trimmed initials.\n   */\n  private trimInitials(initials: string): string {\n    return initials.trim().substring(0, 2);\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={clsx(`avatar-${this.size}`, `avatar-color-${this.color}`)}\n        aria-label={this.alt}\n      >\n        {this.src ? (\n          <img src={this.src} alt={this.alt} />\n        ) : this.initials ? (\n          this.trimInitials(this.initials)\n        ) : (\n          <slot name=\"icon\">\n            <nv-icon name=\"user\" />\n          </slot>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"mappings":"0HAAA,MAAMA,EAAc,s7GACpB,MAAAC,EAAeD,E,MCYFE,EAAQ,M,oPAyGQ,K,WAOF,G,CA1DzB,mBAAAC,GACE,GAAIC,KAAKC,OAAQ,CACfD,KAAKE,KAAOC,EAAcC,U,CAE5B,GAAIJ,KAAKK,MAAO,CACdL,KAAKE,KAAOC,EAAcG,K,CAE5B,GAAIN,KAAKO,OAAQ,CACfP,KAAKE,KAAOC,EAAcK,M,CAE5B,GAAIR,KAAKS,MAAO,CACdT,KAAKE,KAAOC,EAAcO,K,CAE5B,GAAIV,KAAKW,OAAQ,CACfX,KAAKE,KAAOC,EAAcS,U,CAE5B,GAAIZ,KAAKa,KAAM,CACbb,KAAKc,SAAWd,KAAKa,I,CAEvB,GAAIb,KAAKe,IAAK,CACZf,KAAKgB,IAAMhB,KAAKe,G,EAiDZ,YAAAE,CAAaH,GACnB,OAAOA,EAASI,OAAOC,UAAU,EAAG,E,CAOtC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAOC,EAAK,UAAUzB,KAAKE,OAAQ,gBAAgBF,KAAK0B,SAAQ,aACpD1B,KAAK2B,KAEhB3B,KAAKgB,IACJK,EAAA,OAAKL,IAAKhB,KAAKgB,IAAKW,IAAK3B,KAAK2B,MAC5B3B,KAAKc,SACPd,KAAKiB,aAAajB,KAAKc,UAEvBO,EAAA,QAAMO,KAAK,QACTP,EAAA,WAASO,KAAK,U","ignoreList":[]}

package/dist/native/p-20ea1b61.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["nvIconbuttonCss","NvIconbuttonStyle0","NvIconbutton","this","handleClick","event","loading","disabled","preventDefault","type","_b","_a","internals","form","requestSubmit","_d","_c","reset","handleLoadingChange","handleDisabledChange","componentWillLoad","render","h","Host","key","role","tabindex","undefined","class","clsx","size","emphasis","shape","onClick","name"],"sources":["src/components/nv-iconbutton/nv-iconbutton.scss?tag=nv-iconbutton","src/components/nv-iconbutton/nv-iconbutton.tsx"],"sourcesContent":["@use \"sass:map\";\n@import \"../../styles/focus-ring\";\n\n/* Variants */\n$button-sizes: (\"xs\", \"sm\", \"md\", \"lg\");\n$button-emphasis: (\"high\", \"medium\", \"low\", \"lower\");\n\n/* Define maps for size-related variables */\n$button-icon-button-padding: (\n  \"xs\": var(--button-xs-icon-button-padding),\n  \"sm\": var(--button-sm-icon-button-padding),\n  \"md\": var(--button-md-icon-button-padding),\n  \"lg\": var(--button-lg-icon-button-padding)\n);\n\n$button-gap: (\n  \"xs\": var(--button-xs-gap),\n  \"sm\": var(--button-sm-gap),\n  \"md\": var(--button-md-gap),\n  \"lg\": var(--button-lg-gap)\n);\n\n$button-border-radius: (\n  \"xs\": var(--button-xs-border-radius),\n  \"sm\": var(--button-sm-border-radius),\n  \"md\": var(--button-md-border-radius),\n  \"lg\": var(--button-lg-border-radius)\n);\n\n$button-line-height: (\n  \"xs\": var(--button-xs-line-height),\n  \"sm\": var(--button-sm-line-height),\n  \"md\": var(--button-md-line-height),\n  \"lg\": var(--button-lg-line-height)\n);\n\n$button-font-size: (\n  \"xs\": var(--button-xs-font-size),\n  \"sm\": var(--button-sm-font-size),\n  \"md\": var(--button-md-font-size),\n  \"lg\": var(--button-lg-font-size)\n);\n\n/* Define maps for emphasis-related variables */\n$components-button-background: (\n  \"high\": var(--components-button-high-background),\n  \"medium\": var(--components-button-medium-background),\n  \"low\": var(--components-button-low-background),\n  \"lower\": var(--components-button-lower-background)\n);\n\n$components-button-border: (\n  \"high\": var(--components-button-high-border),\n  \"medium\": var(--components-button-medium-border),\n  \"low\": var(--components-button-low-border),\n  \"lower\": var(--components-button-lower-border)\n);\n\n$components-button-text: (\n  \"high\": var(--components-button-high-text),\n  \"medium\": var(--components-button-medium-text),\n  \"low\": var(--components-button-low-text),\n  \"lower\": var(--components-button-lower-text)\n);\n\n$components-button-background-hover: (\n  \"high\": var(--components-button-high-background-hover),\n  \"medium\": var(--components-button-medium-background-hover),\n  \"low\": var(--components-button-low-background-hover),\n  \"lower\": var(--components-button-lower-background-hover)\n);\n\n$components-button-text-hover: (\n  \"high\": var(--components-button-high-text-hover),\n  \"medium\": var(--components-button-medium-text-hover),\n  \"low\": var(--components-button-low-text-hover),\n  \"lower\": var(--components-button-lower-text-hover)\n);\n\n$components-button-icon: (\n  \"high\": var(--components-button-high-icon),\n  \"medium\": var(--components-button-medium-icon),\n  \"low\": var(--components-button-low-icon),\n  \"lower\": var(--components-button-lower-icon)\n);\n\n@mixin root-styles() {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  font-style: normal;\n  font-weight: 500;\n  font-family: \"TT Norms Pro\", sans-serif;\n  transition: background-color 150ms ease-out;\n  height: fit-content;\n  width: fit-content;\n}\n\n@mixin size-styles($size) {\n  padding: map.get($button-icon-button-padding, $size);\n  gap: map.get($button-gap, $size);\n  border-radius: map.get($button-border-radius, $size);\n  line-height: map.get($button-line-height, $size);\n  font-size: map.get($button-font-size, $size);\n}\n\n@mixin emphasis-styles($emphasis) {\n  background: map.get($components-button-background, $emphasis);\n  border: 1px solid map.get($components-button-border, $emphasis);\n  color: map.get($components-button-text, $emphasis);\n\n  &:hover {\n    background: map.get($components-button-background-hover, $emphasis);\n    color: map.get($components-button-text-hover, $emphasis);\n  }\n\n  @include focus-ring();\n\n  &:disabled {\n    background: map.get($components-button-background, $emphasis);\n    color: map.get($components-button-text, $emphasis);\n    opacity: 0.5;\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  & nv-icon > svg {\n    color: map.get($components-button-icon, $emphasis);\n  }\n}\n\nnv-iconbutton {\n  &.root {\n    @include root-styles();\n  }\n\n  @each $size in $button-sizes {\n    &.size-#{$size} {\n      @include size-styles($size);\n    }\n  }\n\n  @each $emphasis in $button-emphasis {\n    &.emphasis-#{$emphasis} {\n      @include emphasis-styles($emphasis);\n    }\n  }\n\n  &.loading {\n    [slot=\"leading-icon\"] {\n      display: none;\n    }\n  }\n\n  &.shape-rounded {\n    border-radius: var(--radius-rounded-full);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  AttachInternals,\n  Element,\n  Watch,\n} from '@stencil/core';\nimport clsx from 'clsx';\n\nimport { ButtonSize, ButtonEmphasis, ButtonType } from '../../utils/constants';\nimport { IconName } from '../nv-icon/nv-icons';\n\n/**\n * @slot default - Content of the button.\n */\n@Component({\n  tag: 'nv-iconbutton',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'nv-iconbutton.scss',\n  scoped: false,\n})\nexport class NvIconbutton {\n  @AttachInternals() internals: ElementInternals;\n  @Element() el: HTMLNvIconbuttonElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n  /**\n   * Determines how large or small the button appears, allowing for\n   * customization of the button's dimensions to fit different design\n   * specifications and user needs.\n   */\n  @Prop({ reflect: true })\n  readonly size: `${ButtonSize}` = 'md';\n\n  /**\n   * Adjusts the button’s emphasis to make it more or less visually prominent\n   * to users. Use this to draw attention to important actions or reduce focus\n   * on less critical ones.\n   */\n  @Prop({ reflect: true })\n  readonly emphasis: `${ButtonEmphasis}` = 'high';\n\n  /**\n   * Set this to true to show a spinner on the button, letting users know that\n   * their action is being processed. It helps improve user experience by\n   * indicating ongoing activities. The icon is not displayed when the button\n   * is loading. Also, the button is disabled. If you want to disable the\n   * button, it is not possible. It is automatically disabled when loading.\n   */\n  @Prop({ reflect: true, mutable: true })\n  loading: boolean = false;\n\n  /**\n   * Disables the button, preventing user interaction.\n   */\n  @Prop({ mutable: true, reflect: true })\n  disabled: boolean = false;\n\n  /**\n   * Makes the button look active when it’s within a compatible component\n   * like a button group.\n   */\n  @Prop({ reflect: true })\n  readonly active: boolean = false;\n\n  /**\n   * Choose the icon you want to display. This also sets the aria-label for\n   * improved accessibility, helping users who rely on screen readers.\n   * The icon is not displayed when the button is loading.\n   */\n  @Prop({ reflect: true })\n  readonly name: `${IconName}` | string;\n\n  /**\n   * Sets the button type to control its function in forms. Use 'submit' to send\n   * form data, 'reset' to clear the form, or 'button' for a standard button\n   * that doesn’t interact with form submission by default.\n   */\n  @Prop({ reflect: true })\n  readonly type: `${ButtonType}` = 'button';\n\n  /**\n   * Sets the shape of the button. Choose between square and rounded.\n   */\n  @Prop({ reflect: true })\n  readonly shape: 'square' | 'rounded' = 'square';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles form-related actions when the button is clicked.\n   * - Submits the form if the button type is 'submit'.\n   * - Resets the form if the button type is 'reset'.\n   * @param {Event} event - The click event.\n   */\n  private handleClick = (event: Event) => {\n    if (this.loading || this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    if (this.type === 'submit') {\n      this.internals?.form?.requestSubmit();\n    }\n    if (this.type === 'reset') {\n      this.internals?.form?.reset();\n    }\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('loading')\n  handleLoadingChange(loading: boolean) {\n    this.loading = loading;\n    this.disabled = loading;\n  }\n\n  @Watch('disabled')\n  handleDisabledChange(disabled: boolean) {\n    if (this.loading) {\n      this.disabled = this.loading;\n    } else {\n      this.disabled = disabled;\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (this.loading) {\n      this.disabled = this.loading;\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        role=\"button\"\n        type={this.type}\n        tabindex=\"0\"\n        disabled={this.disabled ? true : undefined}\n        class={clsx(\n          'root',\n          `size-${this.size}`,\n          `emphasis-${this.emphasis}`,\n          this.loading && 'loading',\n          `shape-${this.shape}`,\n        )}\n        onClick={this.handleClick}\n      >\n        {this.loading && <nv-loader size={this.size}></nv-loader>}\n\n        {!this.loading && <nv-icon name={this.name} size={this.size} />}\n\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAkB,6nJACxB,MAAAC,EAAeD,E,MCuBFE,EAAY,M,yLA6EfC,KAAAC,YAAeC,I,YACrB,GAAIF,KAAKG,SAAWH,KAAKI,SAAU,CACjCF,EAAMG,iBACN,M,CAGF,GAAIL,KAAKM,OAAS,SAAU,EAC1BC,GAAAC,EAAAR,KAAKS,aAAS,MAAAD,SAAA,SAAAA,EAAEE,QAAI,MAAAH,SAAA,SAAAA,EAAEI,e,CAExB,GAAIX,KAAKM,OAAS,QAAS,EACzBM,GAAAC,EAAAb,KAAKS,aAAS,MAAAI,SAAA,SAAAA,EAAEH,QAAI,MAAAE,SAAA,SAAAA,EAAEE,O,aA3EO,K,cAQQ,O,aAUtB,M,cAMC,M,YAOO,M,8BAgBM,S,WAMM,Q,CA+BvC,mBAAAC,CAAoBZ,GAClBH,KAAKG,QAAUA,EACfH,KAAKI,SAAWD,C,CAIlB,oBAAAa,CAAqBZ,GACnB,GAAIJ,KAAKG,QAAS,CAChBH,KAAKI,SAAWJ,KAAKG,O,KAChB,CACLH,KAAKI,SAAWA,C,EAQpB,iBAAAa,GACE,GAAIjB,KAAKG,QAAS,CAChBH,KAAKI,SAAWJ,KAAKG,O,EAQzB,MAAAe,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,SACLhB,KAAMN,KAAKM,KACXiB,SAAS,IACTnB,SAAUJ,KAAKI,SAAW,KAAOoB,UACjCC,MAAOC,EACL,OACA,QAAQ1B,KAAK2B,OACb,YAAY3B,KAAK4B,WACjB5B,KAAKG,SAAW,UAChB,SAASH,KAAK6B,SAEhBC,QAAS9B,KAAKC,aAEbD,KAAKG,SAAWgB,EAAA,aAAAE,IAAA,2CAAWM,KAAM3B,KAAK2B,QAErC3B,KAAKG,SAAWgB,EAAA,WAAAE,IAAA,2CAASU,KAAM/B,KAAK+B,KAAMJ,KAAM3B,KAAK2B,OAEvDR,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

package/dist/native/p-23b20b80.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["nvFieldradioCss","NvFieldradioStyle0","NvFieldradio","uuidv4","componentWillRender","this","message","description","labelBefore","labelPlacement","handleCheckedChange","checked","checkedChanged","emit","handleChange","event","target","type","Array","from","document","getElementsByTagName","forEach","element","name","render","h","Host","key","class","clsx","error","id","inputId","autocomplete","value","disabled","label","el","querySelector","htmlFor","errorDescription","hidden"],"sources":["src/components/nv-fieldradio/nv-fieldradio.scss?tag=nv-fieldradio","src/components/nv-fieldradio/nv-fieldradio.tsx"],"sourcesContent":["@import \"../../styles/focus-ring\";\n\n@mixin fieldradio-variables() {\n  --nv-fieldradio-border-default: var(--components-form-field-border-default);\n  --nv-fieldradio-border-hover: var(--components-form-field-border-hover);\n  --nv-fieldradio-border-focus: var(--components-form-field-border-default);\n  --nv-fieldradio-background-default: var(--components-form-field-background-default);\n  --nv-fieldradio-background-checked: var(--components-form-field-background-checked);\n  --nv-fieldradio-background-disabled: var(--components-form-field-background-disabled);\n  --nv-fieldradio-focus-box-shadow: var(--color-focus-brand);\n  --nv-fieldradio-dot-color-checked: var(--components-form-shape-foreground-default);\n  --nv-fieldradio-dot-color-disabled: var(--components-form-shape-foreground-disabled);\n  --nv-fieldradio-outline-color: var(--color-focus-brand);\n}\n\n@mixin fieldradio-error-variables() {\n  --nv-fieldradio-border-default: var(--components-form-field-border-error);\n  --nv-fieldradio-border-hover: var(--nv-fieldradio-border-default);\n  --nv-fieldradio-border-focus: var(--components-form-field-border-error);\n  --nv-fieldradio-background-checked: var(--components-form-field-background-error);\n  --nv-fieldradio-focus-box-shadow: var(--color-focus-destructive);\n  --nv-fieldradio-dot-color-checked: var(--components-form-shape-foreground-default);\n  --nv-fieldradio-dot-color-disabled: var(--components-form-field-border-error);\n  --nv-fieldradio-outline-color: var(--color-focus-destructive);\n\n}\n\n@mixin root-styles() {\n  display: inline-flex;\n  align-items: flex-start;\n  gap: var(--form-gap-x);\n\n  &:not([disabled]),\n  &[disabled=\"false\"] {\n    input,\n    label {\n      cursor: pointer;\n    }\n  }\n}\n\n@mixin label-before-styles() {\n  flex-direction: row-reverse;\n}\n\n@mixin label-styles() {\n  align-self: stretch;\n  color: var(--components-form-text-label-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-label-font-size);\n  font-style: normal;\n  font-weight: var(--form-label-font-weight);\n  line-height: var(--form-label-line-height);\n}\n\n@mixin description-styles() {\n  align-self: stretch;\n  color: var(--components-form-text-description-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-description-font-size);\n  font-style: normal;\n  font-weight: var(--form-description-font-weight);\n  line-height: var(--form-description-line-height);\n}\n\n@mixin error-description-styles() {\n  @include description-styles();\n\n  color: var(--components-form-text-description-error);\n}\n\n@mixin text-container-styles() {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex: 1 0 0;\n}\n\n@mixin input-styles() {\n  appearance: none;\n  position: relative;\n  display: flex;\n  width: var(--form-radio-size);\n  height: var(--form-radio-size);\n  padding: var(--form-radio-inner-circle-padding);\n  flex-direction: column;\n  align-items: flex-start;\n  //gap: 10px;\n  border-radius: var(--radius-rounded-full);\n  border-width: var(--form-radio-border-width);\n  border-style: solid;\n  border-color: var(--nv-fieldradio-border-default);\n  background: var(--nv-fieldradio-background-default);\n\n  &:hover {\n    border-color: var(--nv-fieldradio-border-hover);\n  }\n\n  &:focus {\n    border-color: var(--nv-fieldradio-border-focus);\n  }\n\n  @include focus-ring(var(--nv-fieldradio-outline-color));\n\n  &:checked {\n    background: var(--nv-fieldradio-background-checked);\n    border-color: var(--nv-fieldradio-background-checked);\n\n    &:hover,\n    &:focus {\n      border-color: var(--nv-fieldradio-background-checked);\n      background: var(--nv-fieldradio-background-checked);\n    }\n\n    &::before {\n      content: \"\";\n      position: absolute;\n      top: 50%;\n      right: 50%;\n      transform: translate(50%, -50%);\n      left: 0;\n      width: var(--form-radio-inner-circle-size);\n      height: var(--form-radio-inner-circle-size);\n      flex-shrink: 0;\n      border-radius: var(--radius-rounded-full);\n      background: var(--nv-fieldradio-dot-color-checked);\n    }\n  }\n\n  &:disabled {\n    border-radius: var(--radius-rounded-full);\n    border-width: var(--form-radio-border-width);\n    border-style: solid;\n    border-color: var(--nv-fieldradio-border-default);\n    background: var(--nv-fieldradio-background-disabled);\n\n    &:checked {\n      &::before {\n        background: var(--nv-fieldradio-dot-color-disabled);\n      }\n    }\n\n    &:hover {\n      border-color: var(--nv-fieldradio-border-default);\n      background: var(--nv-fieldradio-background-disabled);\n    }\n  }\n}\n\nnv-fieldradio {\n  @include fieldradio-variables();\n  @include root-styles();\n\n  &.error {\n    @include fieldradio-error-variables();\n  }\n\n  &.label-placement-before {\n    @include label-before-styles();\n  }\n  \n  &[disabled] {\n    // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n    // opacity: var(--components-form-opacity-disabled); Error: Invalid value for --components-form-opacity-disabled (expected a <number> but got \"50px\")\n    opacity: 0.5;\n  }\n\n  label {\n    @include label-styles();\n  }\n\n  input[type=\"radio\"] {\n    @include input-styles();\n  }\n\n  .description {\n    @include description-styles();\n  }\n\n  .error-description {\n    @include error-description-styles();\n  }\n\n  .text-container {\n    @include text-container-styles();\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Listen,\n  Watch,\n  Element,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { type FieldLabelPlacement } from '../../utils/constants';\n\n/**\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n  tag: 'nv-fieldradio',\n  shadow: false,\n  styleUrl: 'nv-fieldradio.scss',\n  formAssociated: true,\n})\nexport class NvFieldradio {\n  @Element() el: HTMLNvFieldradioElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Adds a helpful hint message below the label\n   * @deprecated use description instead.\n   */\n  @Prop()\n  readonly message: string;\n\n  /**\n   * Set the label placement to before the input\n   * @deprecated use labelPlacement instead.\n   */\n  @Prop()\n  readonly labelBefore: boolean = false;\n\n  componentWillRender() {\n    if (this.message) {\n      this.description = this.message;\n    }\n\n    if (this.labelBefore) {\n      this.labelPlacement = 'before';\n    }\n  }\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the radio button’s input element and the for attribute of\n   * the associated label. If no ID is provided, a random one will be\n   * automatically generated to ensure unique identification, facilitating\n   * proper label association and accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * Use this to assign a group name to your radio buttons. When you have\n   * multiple radio buttons with the same name, users will be able to select\n   * only one option within that group, making your forms more organized and\n   * user-friendly.\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * Defines what data will be sent when the radio button is selected.\n   * This helps you identify which option the user has chosen in your form,\n   * ensuring accurate data collection. When the form is submitted, the data\n   * will consist of a name=value pair.\n   */\n  @Prop({ reflect: true })\n  readonly value: string;\n\n  /**\n   * Sets the text content that is rendered next to the input element of type\n   * radio. This label is essential for accessibility and user clarity, as it\n   * describes the purpose or option of the radio button.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\n\n  /**\n   * Defines the position of the label relative to the radio button.\n   */\n  @Prop({ mutable: true, reflect: true })\n  labelPlacement: `${FieldLabelPlacement}`;\n\n  /**\n   * Adds a helpful hint message below the label. This description provides\n   * extra information or context about the radio button option, assisting users\n   * in making more informed choices.\n   */\n  @Prop({ mutable: true, reflect: true })\n  description: string;\n\n  /**\n   * Highlight the radio button with error styling. It helps users quickly\n   * identify which option needs attention, improving their form-filling\n   * experience by making issues more visible.\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 radio\n   * button.\n   * @validator message\n   */\n  @Prop({ reflect: true })\n  readonly errorDescription: string;\n\n  /**\n   * Controls whether the radio button is selected.\n   */\n  @Prop({ mutable: true, reflect: true })\n  checked: boolean = false;\n\n  /**\n   * Disables the radio button, making it un-selectable.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emits when the checked state changes.\n   * @bind checked\n   */\n  @Event()\n  checkedChanged: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Watches for changes to the checked state and emits the new value.\n   * @param {boolean} checked - The new value of the checked state.\n   */\n  @Watch('checked')\n  handleCheckedChange(checked: boolean) {\n    this.checkedChanged.emit(checked);\n  }\n\n  /**\n   * Listens for the change event on the radio button input element and controls\n   * the checked state of the host elements.\n   * @param {Event} event - The change event.\n   */\n  @Listen('change')\n  handleChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n\n    if (target?.type === 'radio') {\n      Array.from(document.getElementsByTagName('nv-fieldradio')).forEach(\n        element => {\n          if (element.name === this.name) {\n            element.checked = false;\n          }\n        },\n      );\n\n      this.checked = target.checked;\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={clsx(\n          this.labelPlacement === 'before' && 'label-placement-before',\n          this.error && 'error',\n        )}\n      >\n        <input\n          type=\"radio\"\n          id={this.inputId}\n          name={this.name}\n          autocomplete=\"off\"\n          value={this.value}\n          checked={this.checked}\n          disabled={this.disabled}\n        />\n\n        <div class=\"text-container\">\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          {(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        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"wIAAA,MAAMA,EAAkB,0rJACxB,MAAAC,EAAeD,E,MC0BFE,EAAY,M,gHAkBS,M,aAuBLC,I,kIAiDD,M,6CAcP,M,cAMU,K,CA1F7B,mBAAAC,GACE,GAAIC,KAAKC,QAAS,CAChBD,KAAKE,YAAcF,KAAKC,O,CAG1B,GAAID,KAAKG,YAAa,CACpBH,KAAKI,eAAiB,Q,EA0G1B,mBAAAC,CAAoBC,GAClBN,KAAKO,eAAeC,KAAKF,E,CAS3B,YAAAG,CAAaC,GACX,MAAMC,EAASD,EAAMC,OAErB,IAAIA,IAAM,MAANA,SAAM,SAANA,EAAQC,QAAS,QAAS,CAC5BC,MAAMC,KAAKC,SAASC,qBAAqB,kBAAkBC,SACzDC,IACE,GAAIA,EAAQC,OAASnB,KAAKmB,KAAM,CAC9BD,EAAQZ,QAAU,K,KAKxBN,KAAKM,QAAUK,EAAOL,O,EAQ1B,MAAAc,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAOC,EACLzB,KAAKI,iBAAmB,UAAY,yBACpCJ,KAAK0B,OAAS,UAGhBL,EAAA,SAAAE,IAAA,2CACEX,KAAK,QACLe,GAAI3B,KAAK4B,QACTT,KAAMnB,KAAKmB,KACXU,aAAa,MACbC,MAAO9B,KAAK8B,MACZxB,QAASN,KAAKM,QACdyB,SAAU/B,KAAK+B,WAGjBV,EAAA,OAAAE,IAAA,2CAAKC,MAAM,mBACPxB,KAAKgC,OAAShC,KAAKiC,GAAGC,cAAc,oBACpCb,EAAA,SAAAE,IAAA,2CAAOY,QAASnC,KAAK4B,SACnBP,EAAA,QAAAE,IAAA,2CAAMJ,KAAK,SAASnB,KAAKgC,SAI3BhC,KAAKE,aACLF,KAAKiC,GAAGC,cAAc,0BACtBb,EAAA,OAAAE,IAAA,2CAAKC,MAAM,eACTH,EAAA,QAAAE,IAAA,2CAAMJ,KAAK,eAAenB,KAAKE,eAIjCF,KAAKoC,kBACLpC,KAAKiC,GAAGC,cAAc,gCACtBb,EAAA,OAAAE,IAAA,2CAAKc,QAASrC,KAAK0B,MAAOF,MAAM,qBAC9BH,EAAA,QAAAE,IAAA,2CAAMJ,KAAK,qBAAqBnB,KAAKoC,oB","ignoreList":[]}

package/dist/native/p-25e1bc94.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["nvStackCss","NvStackStyle0","NvStack","render","h","Host","key","class","clsx","this","fill","flex","full","gutter","vertical"],"sources":["src/components/nv-stack/nv-stack.scss?tag=nv-stack","src/components/nv-stack/nv-stack.tsx"],"sourcesContent":["nv-stack {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  flex-direction: row;\n\n  nv-col {\n    display: flex;\n  }\n\n  &:not(nv-row) {\n    flex-wrap: nowrap;\n  }\n\n  > .nv-stack-item-flex {\n    flex-shrink: 1;\n    flex-grow: 1;\n  }\n\n  > .nv-stack-item-lead {\n    margin-right: auto;\n  }\n\n  > .nv-stack-item-lead + * {\n    margin-left: 0;\n  }\n\n  > .nv-stack-item-center {\n    margin-right: auto;\n    margin-left: auto;\n  }\n\n  > .nv-stack-item-tail {\n    margin-left: auto;\n  }\n\n  > .nv-stack-nowrap {\n    white-space: nowrap;\n  }\n\n  // Vertical\n  &.nv-stack-vertical {\n    align-items: stretch;\n    flex-direction: column;\n\n    > .nv-stack-item-lead {\n      margin-right: 0;\n      margin-bottom: auto;\n    }\n\n    > .nv-stack-item-lead + * {\n      margin-top: 0;\n    }\n\n    > .nv-stack-item-tail {\n      margin-left: 0;\n      margin-top: auto;\n    }\n\n    > .nv-stack-item-center {\n      margin: auto 0;\n    }\n  }\n\n  &.nv-stack-flex {\n    > * {\n      flex-shrink: 1;\n      flex-grow: 1;\n    }\n  }\n\n  &.nv-stack-fill {\n    > * {\n      height: 100%;\n    }\n\n    &.nv-stack-vertical {\n      > * {\n        height: auto;\n        width: 100%;\n      }\n    }\n  }\n}","import { Component, Host, Prop, h } from '@stencil/core';\nimport clsx from 'clsx';\n\n/**\n * @deprecated Please use tailwind classes instead\n * @slot default - Content of the stack\n */\n@Component({\n  tag: 'nv-stack',\n  styleUrl: './nv-stack.scss',\n  shadow: false,\n})\nexport class NvStack {\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Gutter refers to the space that exists between children components inside\n   * the stack container.\n   */\n  @Prop({ reflect: true })\n  readonly gutter: number = 2;\n\n  /**\n   * Fill will force the children to fill the stack depending of the direction\n   * of the stack. In horizontal position, the children take the height of the\n   * stack. In vertical position, the children take the width of the stack.\n   */\n  @Prop({ reflect: true })\n  readonly fill: boolean;\n\n  /**\n   * Flex will force the children to share the stack between the children\n   * depending of the direction of the stack. In horizontal position, the\n   * children width will share the width of the stack. In vertical position,\n   * the children height will share the height of the stack.\n   */\n  @Prop({ reflect: true })\n  readonly flex: boolean;\n\n  /**\n   * Full set the width of the stack to 100%.\n   * (same effect as WFull props)\n   */\n  @Prop({ reflect: true })\n  readonly full: boolean;\n\n  /**\n   * Display the element of the stack vertically.\n   */\n  @Prop({ reflect: true })\n  readonly vertical: boolean;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={clsx(\n          this.fill && 'nv-stack-fill',\n          this.flex && 'nv-stack-flex',\n          this.full && 'w-full',\n          this.gutter && !this.vertical && `gutter-x-${this.gutter}`,\n          this.gutter && this.vertical && `gutter-y-${this.gutter}`,\n          this.vertical && 'nv-stack-vertical',\n        )}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sFAAA,MAAMA,EAAa,u8BACnB,MAAAC,EAAeD,E,MCWFE,EAAO,M,qCASQ,E,oFAoC1B,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAOC,EACLC,KAAKC,MAAQ,gBACbD,KAAKE,MAAQ,gBACbF,KAAKG,MAAQ,SACbH,KAAKI,SAAWJ,KAAKK,UAAY,YAAYL,KAAKI,SAClDJ,KAAKI,QAAUJ,KAAKK,UAAY,YAAYL,KAAKI,SACjDJ,KAAKK,UAAY,sBAGnBV,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as c,h as a,a as l}from"./p-b4aea326.js";import{c as t}from"./p-8a1a6e56.js";const i="nv-col{display:block;flex:1 1 0%;padding-left:calc(var(--spacing-4) / 2);padding-right:calc(var(--spacing-4) / 2)}nv-col[class*=w-]{flex:none}nv-col.w-1\\/12{width:calc(100% * 1 / 12)}nv-col.w-2\\/12{width:calc(100% * 2 / 12)}nv-col.w-3\\/12{width:calc(100% * 3 / 12)}nv-col.w-4\\/12{width:calc(100% * 4 / 12)}nv-col.w-5\\/12{width:calc(100% * 5 / 12)}nv-col.w-6\\/12{width:calc(100% * 6 / 12)}nv-col.w-7\\/12{width:calc(100% * 7 / 12)}nv-col.w-8\\/12{width:calc(100% * 8 / 12)}nv-col.w-9\\/12{width:calc(100% * 9 / 12)}nv-col.w-10\\/12{width:calc(100% * 10 / 12)}nv-col.w-11\\/12{width:calc(100% * 11 / 12)}nv-col.w-12\\/12{width:calc(100% * 12 / 12)}";const n=i;const o=class{constructor(a){c(this,a);this.size=undefined}getColSize(){if(this.size){if(this.size<1||this.size>12)return;return`w-${this.size}/12`}}render(){return a(l,{key:"e0caccedd19c02c1854eb48f89302405e2cb0f46",class:t(this.getColSize())},a("slot",{key:"a8d672a55a70d6ee551e9ac9e7366455f76aa1e5"}))}};o.style=n;export{o as nv_col};
-//# sourceMappingURL=p-2fca31c0.entry.js.map

package/dist/native/p-396b65bb.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["nvFieldnumberCss","NvFieldnumberStyle0","NvFieldnumber","this","handleInput","event","input","target","value","Number","handleInputContainerClick","inputElement","focus","handlePlus","stepUp","handleMinus","stepDown","isMinValueReached","min","undefined","isMaxValueReached","max","uuidv4","componentWillRender","message","description","validation","errorDescription","error","watchValueHandler","newValue","valueChanged","emit","render","h","Host","key","label","el","querySelector","htmlFor","inputId","name","class","onClick","id","ref","e","placeholder","type","required","step","disabled","readOnly","readonly","onInput","size","success","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-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  //#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  // eslint-disable-next-line @stencil-community/strict-mutable\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 LIFECYCLE\n\n  componentWillRender() {\n    if (this.message) {\n      this.description = this.message;\n    }\n    if (this.validation) {\n      this.errorDescription = this.validation;\n      this.error = true;\n    }\n  }\n\n  //#endregion LIFECYCLE\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 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"],"mappings":"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","ignoreList":[]}

package/dist/native/p-4a43953f.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["nvFieldcheckboxCss","NvFieldcheckboxStyle0","NvFieldcheckbox","uuidv4","componentWillRender","this","message","description","labelBefore","labelPlacement","validation","errorDescription","onCheckedChanged","checked","checkedChanged","emit","handleChange","event","target","type","id","inputId","readonly","disabled","preventDefault","indeterminate","render","h","Host","key","class","clsx","error","name","autocomplete","value","Boolean","required","ref","el","xmlns","width","height","viewBox","fill","d","label","querySelector","htmlFor","hideLabel","hidden"],"sources":["src/components/nv-fieldcheckbox/nv-fieldcheckbox.scss?tag=nv-fieldcheckbox","src/components/nv-fieldcheckbox/nv-fieldcheckbox.tsx"],"sourcesContent":["@import \"../../styles/focus-ring\";\n\n@mixin fieldcheckbox-variables() {\n  --nv-fieldcheckbox-border-default: var(--components-form-field-border-default);\n  --nv-fieldcheckbox-border-hover: var(--components-form-field-border-hover);\n  --nv-fieldcheckbox-border-focus: var(--components-form-field-border-default);\n  --nv-fieldcheckbox-background-default: var(--components-form-field-background-default);\n  --nv-fieldcheckbox-background-checked: var(--components-form-field-background-checked);\n  --nv-fieldcheckbox-background-disabled: var(--components-form-field-background-disabled);\n  --nv-fieldcheckbox-focus-box-shadow: var(--color-focus-brand);\n  --nv-fieldcheckbox-color-checked: var(--components-form-shape-foreground-default);\n  --nv-fieldcheckbox-color-disabled: var(--components-form-shape-foreground-disabled);\n  --nv-fieldcheckbox-outline-color: var(--color-focus-brand);\n}\n\n@mixin fieldcheckbox-error-variables() {\n  --nv-fieldcheckbox-border-default: var(--components-form-field-border-error);\n  --nv-fieldcheckbox-border-hover: var(--nv-fieldcheckbox-border-default);\n  --nv-fieldcheckbox-border-focus: var(--components-form-field-border-error);\n  --nv-fieldcheckbox-focus-box-shadow: var(--color-focus-destructive);\n  --nv-fieldcheckbox-color-disabled: var(--components-form-shape-foreground-disabled-error);\n  --nv-fieldcheckbox-background-checked: var(--components-form-field-background-error);\n  --nv-fieldcheckbox-outline-color: var(--color-focus-destructive);\n}\n\n@mixin root-styles() {\n  display: inline-flex;\n  align-items: flex-start;\n  gap: var(--form-gap-x);\n  position: relative;\n\n  &:not([disabled], [readonly]) {\n    input,\n    label {\n      cursor: pointer;\n    }\n  }\n}\n\n@mixin label-before-styles() {\n  flex-direction: row-reverse;\n}\n\n@mixin label-styles() {\n  align-self: stretch;\n  color: var(--components-form-text-label-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-label-font-size);\n  font-style: normal;\n  font-weight: var(--form-label-font-weight);\n  line-height: var(--form-label-line-height);\n}\n\n@mixin description-styles() {\n  align-self: stretch;\n  color: var(--components-form-text-description-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-description-font-size);\n  font-style: normal;\n  font-weight: var(--form-description-font-weight);\n  line-height: var(--form-description-line-height);\n}\n\n@mixin error-description-styles() {\n  @include description-styles();\n\n  color: var(--components-form-text-description-error);\n}\n\n@mixin text-container-styles() {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex: 1 0 0;\n}\n\n@mixin input-container-styles() {\n  position: relative;\n  color: var(--nv-fieldcheckbox-color-checked);\n\n  input[type=checkbox][readonly] {\n    // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n    opacity: 0.5;\n  }\n\n  &:has(input[type=\"checkbox\"]:disabled:not([readonly])) {\n    color: var(--nv-fieldcheckbox-color-disabled);\n  }\n}\n\n@mixin input-styles() {\n  appearance: none;\n  position: relative;\n  display: flex;\n  width: var(--form-checkbox-size);\n  height: var(--form-checkbox-size);\n  flex-direction: column;\n  align-items: flex-start;\n  border-radius: var(--form-checkbox-radius);\n  border-width: var(--form-checkbox-border-width);\n  border-style: solid;\n  border-color: var(--nv-fieldcheckbox-border-default);\n  background: var(--nv-fieldcheckbox-background-default);\n\n  &:hover {\n    border-color: var(--nv-fieldcheckbox-border-hover);\n  }\n\n  &:focus {\n    border-color: var(--nv-fieldcheckbox-border-focus);\n  }\n\n  @include focus-ring(var(--nv-fieldcheckbox-outline-color));\n\n  &:checked,\n  &:indeterminate {\n    background: var(--nv-fieldcheckbox-background-checked);\n    border-color: var(--nv-fieldcheckbox-background-checked);\n  }\n\n  &:disabled:not([readonly]) {\n    background: var(--nv-fieldcheckbox-background-disabled);\n    border-color: var(--nv-fieldcheckbox-border-default);\n  }\n\n  &[readonly] {\n    // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n    opacity: 0.5;\n  }\n}\n\n@mixin icon-styles() {\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  svg {\n    width: var(--form-checkbox-icon-size);\n    height: var(--form-checkbox-icon-size);\n    fill: none;\n    stroke: currentcolor;\n    stroke-width: var(--form-checkbox-icon-stroke);\n    flex-shrink: 0;\n  }\n}\n\nnv-fieldcheckbox {\n  @include fieldcheckbox-variables();\n  @include root-styles();\n\n  &.error .input-container {\n    @include fieldcheckbox-error-variables();\n  }\n\n  &.label-placement-before {\n    @include label-before-styles();\n  }\n  &[disabled] {\n    // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n    opacity: 0.5;\n  }\n  label {\n    @include label-styles();\n  }\n\n  .input-container {\n    @include input-container-styles();\n\n    input[type=\"checkbox\"] {\n      @include input-styles();\n    }\n\n    .icon {\n      @include icon-styles();\n    }\n  }\n\n  .description {\n    @include description-styles();\n  }\n\n  .error-description {\n    @include error-description-styles();\n  }\n\n  .text-container {\n    @include text-container-styles();\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Watch,\n  Event,\n  EventEmitter,\n  Listen,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { type FieldLabelPlacement } from '../../utils/constants';\n\n/**\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n * @slot checked-icon - Content to be placed as the checked icon, will override the checkedIcon prop.\n * @slot indeterminate-icon - Content to be placed as the indeterminate icon, will override the indeterminateIcon prop.\n */\n@Component({\n  tag: 'nv-fieldcheckbox',\n  styleUrl: 'nv-fieldcheckbox.scss',\n  shadow: false,\n})\nexport class NvFieldcheckbox {\n  @Element() el!: HTMLNvFieldcheckboxElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Message define a 'hint ' message for the Field.\n   * @deprecated Use `description` instead.\n   * */\n  @Prop()\n  readonly message?: string;\n\n  /**\n   * The text for the validation message.\n   * @deprecated Use `errorDescription` instead.\n   * */\n  @Prop()\n  readonly validation?: string;\n\n  /**\n   * When true, the label will be placed before the checkbox.\n   * @deprecated Use `labelPlacement = end` instead.\n   * */\n  @Prop()\n  readonly labelBefore?: boolean = false;\n\n  componentWillRender() {\n    if (this.message) {\n      this.description = this.message;\n    }\n\n    if (this.labelBefore) {\n      this.labelPlacement = 'before';\n    }\n\n    if (this.validation) {\n      this.errorDescription = this.validation;\n    }\n  }\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the radio button’s input element and the for attribute of\n   * the associated label. If no ID is provided, a random one will be\n   * automatically generated to ensure unique identification, facilitating\n   * proper label association and accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * The name attribute for the checkbox input, used to reference the form data\n   * after submission.\n   */\n  @Prop({ reflect: true })\n  readonly name?: string;\n\n  /**\n   * The value attribute of the checkbox input, representing the value sent on\n   * form submission when the checkbox is checked. When the form is submitted,\n   * the data will consist of a name=value pair.\n   */\n  @Prop({ reflect: true })\n  readonly value?: string;\n\n  /**\n   * The label displayed next to the checkbox.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string;\n\n  /**\n   * Determines the position of the label relative to the checkbox, either\n   * 'start' (before) or 'end' (after).\n   */\n  @Prop({ reflect: true, mutable: true })\n  labelPlacement: `${FieldLabelPlacement}`;\n\n  /**\n   * Hides the label visually while still keeping it available for screen\n   * readers.\n   */\n  @Prop({ reflect: true })\n  readonly hideLabel: boolean = false;\n\n  /**\n   * A description providing additional context or information about the\n   * checkbox.\n   */\n  @Prop({ reflect: true, mutable: true })\n  description?: string;\n\n  /**\n   * Signals that there is an error associated with the checkbox, which can\n   * trigger visual cues.\n   */\n  @Prop({ reflect: true })\n  readonly error: boolean = false;\n\n  /**\n   * A description that appears when there is an error related to the checkbox.\n   */\n  @Prop({ reflect: true, mutable: true })\n  errorDescription?: string;\n\n  /**\n   * Indicates whether the checkbox is checked or not.\n   */\n  @Prop({ reflect: true, mutable: true })\n  checked: boolean = false;\n\n  /**\n   * Indicates whether the checkbox is in an indeterminate state, typically used\n   * for hierarchical checkboxes.\n   */\n  @Prop({ reflect: true, mutable: true })\n  indeterminate: boolean = false;\n\n  /**\n   * Disables the checkbox, preventing user interaction.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Sets the checkbox to read-only, preventing user changes but still allowing\n   * focus and selection of text.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks the checkbox as required, indicating that it must be checked for\n   * form submission.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emits when the checked state changes.\n   * @bind checked\n   */\n  @Event()\n  checkedChanged: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Watches for changes to the checked state and emits the new value.\n   * @param {boolean} checked - The new value of the checked state.\n   */\n  @Watch('checked')\n  onCheckedChanged(checked: boolean) {\n    this.checkedChanged.emit(checked);\n  }\n\n  /**\n   * Listens for the change event on the checkbox input element and updates the\n   * checked state.\n   * @param {Event} event - The change event.\n   */\n  @Listen('change')\n  handleChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n\n    if (target.type === 'checkbox' && target.id === this.inputId) {\n      if (this.readonly || this.disabled) {\n        event.preventDefault();\n        return;\n      }\n\n      if (this.indeterminate) {\n        this.indeterminate = false;\n      }\n\n      this.checked = target.checked;\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={clsx(\n          this.labelPlacement === 'before' && 'label-placement-before',\n          this.error && 'error',\n        )}\n      >\n        <div class=\"input-container\">\n          <input\n            type=\"checkbox\"\n            id={this.inputId}\n            name={this.name}\n            autocomplete=\"off\"\n            value={this.value}\n            checked={Boolean(this.checked)}\n            disabled={this.disabled || this.readonly}\n            readonly={this.readonly && !this.required}\n            required={this.required}\n            indeterminate={this.indeterminate}\n            ref={el => {\n              if (el) {\n                el.indeterminate = this.indeterminate;\n              }\n            }}\n          />\n          <span class=\"icon\">\n            {this.checked && !this.indeterminate && (\n              <slot name=\"checked-icon\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  width=\"14\"\n                  height=\"14\"\n                  viewBox=\"0 0 14 14\"\n                  fill=\"none\"\n                >\n                  <path\n                    d=\"M11.6667 3.5L5.25004 9.91667L2.33337 7\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </slot>\n            )}\n            {this.indeterminate && (\n              <slot name=\"indeterminate-icon\">\n                <svg\n                  class=\"indeterminate-svg\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 14 14\"\n                  fill=\"none\"\n                >\n                  <path\n                    d=\"M2.9165 7H11.0832\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </slot>\n            )}\n          </span>\n        </div>\n\n        <div class=\"text-container\">\n          {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n            <label\n              htmlFor={this.inputId}\n              class={clsx(this.hideLabel && 'visually-hidden')}\n            >\n              <slot name=\"label\">{this.label}</slot>\n            </label>\n          )}\n\n          {(this.description ||\n            this.el.querySelector('[slot=\"description\"]')) && (\n            <div class=\"description\">\n              <slot name=\"description\">{this.description}</slot>\n            </div>\n          )}\n\n          {(this.errorDescription ||\n            this.el.querySelector('[slot=\"error-description\"]')) && (\n            <div hidden={!this.error} class=\"error-description\">\n              <slot name=\"error-description\">{this.errorDescription}</slot>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"mappings":"wIAAA,MAAMA,EAAqB,+0JAC3B,MAAAC,EAAeD,E,MC2BFE,EAAe,M,0IAyBO,M,aA2BNC,I,2GAmCG,M,sCAcJ,M,6CAYP,M,mBAOM,M,cAMI,M,cAOA,M,cAOA,K,CAjH7B,mBAAAC,GACE,GAAIC,KAAKC,QAAS,CAChBD,KAAKE,YAAcF,KAAKC,O,CAG1B,GAAID,KAAKG,YAAa,CACpBH,KAAKI,eAAiB,Q,CAGxB,GAAIJ,KAAKK,WAAY,CACnBL,KAAKM,iBAAmBN,KAAKK,U,EA6HjC,gBAAAE,CAAiBC,GACfR,KAAKS,eAAeC,KAAKF,E,CAS3B,YAAAG,CAAaC,GACX,MAAMC,EAASD,EAAMC,OAErB,GAAIA,EAAOC,OAAS,YAAcD,EAAOE,KAAOf,KAAKgB,QAAS,CAC5D,GAAIhB,KAAKiB,UAAYjB,KAAKkB,SAAU,CAClCN,EAAMO,iBACN,M,CAGF,GAAInB,KAAKoB,cAAe,CACtBpB,KAAKoB,cAAgB,K,CAGvBpB,KAAKQ,QAAUK,EAAOL,O,EAQ1B,MAAAa,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAOC,EACL1B,KAAKI,iBAAmB,UAAY,yBACpCJ,KAAK2B,OAAS,UAGhBL,EAAA,OAAAE,IAAA,2CAAKC,MAAM,mBACTH,EAAA,SAAAE,IAAA,2CACEV,KAAK,WACLC,GAAIf,KAAKgB,QACTY,KAAM5B,KAAK4B,KACXC,aAAa,MACbC,MAAO9B,KAAK8B,MACZtB,QAASuB,QAAQ/B,KAAKQ,SACtBU,SAAUlB,KAAKkB,UAAYlB,KAAKiB,SAChCA,SAAUjB,KAAKiB,WAAajB,KAAKgC,SACjCA,SAAUhC,KAAKgC,SACfZ,cAAepB,KAAKoB,cACpBa,IAAKC,IACH,GAAIA,EAAI,CACNA,EAAGd,cAAgBpB,KAAKoB,a,KAI9BE,EAAA,QAAAE,IAAA,2CAAMC,MAAM,QACTzB,KAAKQ,UAAYR,KAAKoB,eACrBE,EAAA,QAAAE,IAAA,2CAAMI,KAAK,gBACTN,EAAA,OAAAE,IAAA,2CACEW,MAAM,6BACNC,MAAM,KACNC,OAAO,KACPC,QAAQ,YACRC,KAAK,QAELjB,EAAA,QAAAE,IAAA,2CACEgB,EAAE,yCAAwC,iBAC3B,QAAO,kBACN,YAKvBxC,KAAKoB,eACJE,EAAA,QAAAE,IAAA,2CAAMI,KAAK,sBACTN,EAAA,OAAAE,IAAA,2CACEC,MAAM,oBACNU,MAAM,6BACNG,QAAQ,YACRC,KAAK,QAELjB,EAAA,QAAAE,IAAA,2CACEgB,EAAE,oBAAmB,iBACN,QAAO,kBACN,cAQ5BlB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,mBACPzB,KAAKyC,OAASzC,KAAKkC,GAAGQ,cAAc,oBACpCpB,EAAA,SAAAE,IAAA,2CACEmB,QAAS3C,KAAKgB,QACdS,MAAOC,EAAK1B,KAAK4C,WAAa,oBAE9BtB,EAAA,QAAAE,IAAA,2CAAMI,KAAK,SAAS5B,KAAKyC,SAI3BzC,KAAKE,aACLF,KAAKkC,GAAGQ,cAAc,0BACtBpB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,eACTH,EAAA,QAAAE,IAAA,2CAAMI,KAAK,eAAe5B,KAAKE,eAIjCF,KAAKM,kBACLN,KAAKkC,GAAGQ,cAAc,gCACtBpB,EAAA,OAAAE,IAAA,2CAAKqB,QAAS7C,KAAK2B,MAAOF,MAAM,qBAC9BH,EAAA,QAAAE,IAAA,2CAAMI,KAAK,qBAAqB5B,KAAKM,oB","ignoreList":[]}

package/dist/native/p-4b550f95.entry.js

@@ -1,2 +0,0 @@
-import{r as a,h as r,a as e}from"./p-b4aea326.js";const s="nv-row{display:flex;flex-wrap:wrap;margin-right:calc(var(--spacing-4) * -1);margin-left:calc(var(--spacing-4) * -1);row-gap:var(--spacing-4)}";const c=s;const n=class{constructor(r){a(this,r)}render(){return r(e,{key:"0509e4652dd679fbfb5b4eadb3aaef8979d879e7"},r("slot",{key:"75a3a0b83eec4f573a3e54340b3679dc8f529fda"}))}};n.style=c;export{n as nv_row};
-//# sourceMappingURL=p-4b550f95.entry.js.map

package/dist/native/p-4fae1b2c.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["nvFieldtextareaCss","NvFieldtextareaStyle0","NvFieldtextarea","this","handleTextarea","event","textarea","target","value","valueChanged","emit","autosize","adjustTextareaHeight","handleTextareaContainerClick","textareaElement","focus","uuidv4","componentWillRender","message","description","validation","errorDescription","error","rowsChanged","autosizeChanged","_a","style","removeProperty","height","computedStyle","window","getComputedStyle","lineHeight","parseFloat","paddingTop","paddingBottom","borderTopWidth","borderBottomWidth","minHeight","rows","scrollHeight","getResize","resize","componentDidLoad","render","h","Host","key","label","el","querySelector","htmlFor","inputId","name","class","onClick","id","ref","e","placeholder","disabled","readOnly","readonly","required","maxlength","minlength","autocomplete","onInput","clsx","hidden"],"sources":["src/components/nv-fieldtextarea/nv-fieldtextarea.scss?tag=nv-fieldtextarea","src/components/nv-fieldtextarea/nv-fieldtextarea.tsx"],"sourcesContent":["@import \"../../styles/form-field\";\n\n@mixin form-field-textarea-wrapper() {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--form-gap-x);\n  align-items: stretch;\n  align-self: stretch;\n}\n\n@mixin form-field-textarea-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\n  &:hover {\n    border-color: var(--nv-field-border-hover);\n  }\n\n  &:focus-within {\n    border-color: var(--nv-field-border-focus);\n    box-shadow: 0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow);\n  }\n  // Keep  ReadOnly before Disabled\n  &:has(textarea:read-only) {\n    // opacity: var(--components-form-opacity-readonly, 0.5); broken token generation, is 50px instead of 0.5\n    opacity: 0.5;\n    background-color: var(--components-form-field-background-readonly);\n    border-color: var(--nv-field-border-readonly);\n  }\n\n  &:has(textarea:disabled) {\n    // opacity: var(--components-form-opacity-disabled, 0.5); broken token generation, is 50px instead of 0.5\n    opacity: 0.5;\n    background-color: var(--components-form-field-background-disabled);\n    border-color: var(--nv-field-border-disabled);\n  }\n}\n\n@mixin form-field-textarea() {\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\n  &:focus {\n    outline: none;\n  }\n\n  &::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  }\n}\n\nnv-fieldtextarea {\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  .textarea-wrapper {\n    @include form-field-textarea-wrapper();\n\n    .textarea-container {\n      @include form-field-textarea-container();\n\n      textarea {\n        @include form-field-textarea();\n      }\n\n      nv-icon.validation {\n        @include form-field-icon();\n      }\n    }\n  }\n\n  .description {\n    @include form-field-description();\n  }\n\n  .error-description {\n    @include form-field-error-description();\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Watch,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\nimport clsx from 'clsx';\n\n/**\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n  tag: 'nv-fieldtextarea',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'nv-fieldtextarea.scss',\n})\nexport class NvFieldtextarea {\n  @Element() el: HTMLNvFieldtextareaElement;\n  private textareaElement!: HTMLTextAreaElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Message defines a 'hint ' message for the Text 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  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 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   * textarea 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 textarea 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 textarea 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 textarea 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 textarea’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   * Specifies the value of the textarea field, which determines the text displayed\n   * within the field. This prop is typically used in controlled components\n   * where the textarea’s value is managed by the component’s state.\n   */\n  @Prop({ reflect: true, mutable: true })\n  value: string;\n\n  /**\n   * The disabled prop lets you turn off the textarea 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 textarea 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 textarea 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 textarea 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 textarea 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 textarea field’s appearance to indicate successful textarea or\n   * validation.\n   */\n  @Prop({ reflect: true })\n  readonly success: boolean = false;\n\n  /**\n   * Limits how many characters users can type into the textarea field. It’s\n   * helpful for making sure users don’t enter too much information, keeping\n   * their textarea within the allowed limit.\n   */\n  @Prop({ reflect: true })\n  readonly maxlength: number;\n\n  /**\n   * Ensures that users type at least a certain number of characters into the\n   * textarea field. It’s a way to make sure users provide enough information\n   * before moving on.\n   */\n  @Prop({ reflect: true })\n  readonly minlength: number;\n\n  /**\n   * The number of visible text lines for the control. The default is 3. This\n   * can be useful when you want to limit the size of the textarea field or when\n   * you want to make the textarea field smaller to fit a specific layout. The\n   * textarea field will expand vertically to fit the text as the user types.\n   */\n  @Prop({ reflect: true })\n  readonly rows: number = 3;\n\n  /**\n   * Controls the resize property of a textarea. It can be set to none, both,\n   * horizontal, or vertical. The default is vertical.\n   */\n  @Prop({ reflect: true })\n  readonly resize: 'none' | 'both' | 'horizontal' | 'vertical' = 'vertical';\n\n  /**\n   * Enable this to make the textarea automatically resize as the user types,\n   * adjusting the height to fit the content. For the best experience, avoid\n   * vertical resizing, as it’s controlled by this feature. Horizontal resizing\n   * can still be allowed if desired.\n   */\n  @Prop({ reflect: true })\n  readonly autosize: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the textarea value changes.\n   * @bind value\n   */\n  @Event()\n  valueChanged: EventEmitter<string>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * If autosize is true, we need to make sure to update the min-height when\n   * the rows change.\n   */\n  @Watch('rows')\n  rowsChanged() {\n    if (this.autosize) {\n      this.adjustTextareaHeight();\n    }\n  }\n\n  /**\n   * If autosize is true, we need to make sure to update the height and\n   * min-height, if false, we need to remove the height property.\n   */\n  @Watch('autosize')\n  autosizeChanged() {\n    if (this.autosize) {\n      this.adjustTextareaHeight();\n    } else {\n      this.textareaElement?.style.removeProperty('height');\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region METHODS\n\n  private handleTextarea = (event: Event) => {\n    const textarea = event.target as HTMLTextAreaElement;\n    this.value = textarea.value;\n    this.valueChanged.emit(textarea.value);\n\n    if (this.autosize) {\n      this.adjustTextareaHeight();\n    }\n  };\n\n  private handleTextareaContainerClick = () => {\n    this.textareaElement.focus();\n  };\n\n  private adjustTextareaHeight() {\n    if (this.textareaElement && this.autosize) {\n      this.textareaElement.style.height = 'auto';\n\n      // Get computed styles\n      const computedStyle = window.getComputedStyle(this.textareaElement);\n      const lineHeight = parseFloat(computedStyle.lineHeight);\n      const paddingTop = parseFloat(computedStyle.paddingTop);\n      const paddingBottom = parseFloat(computedStyle.paddingBottom);\n      const borderTopWidth = parseFloat(computedStyle.borderTopWidth);\n      const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth);\n\n      // Calculate min-height based on rows\n      const minHeight =\n        lineHeight * this.rows +\n        paddingTop +\n        paddingBottom +\n        borderTopWidth +\n        borderBottomWidth;\n\n      this.textareaElement.style.minHeight = `${minHeight}px`;\n      this.textareaElement.style.height =\n        this.textareaElement.scrollHeight + 'px';\n    }\n  }\n\n  /**\n   * Class        Properties\n   * resize-none\tresize: none;\n   * resize-y\t    resize: vertical;\n   * resize-x\t    resize: horizontal;\n   * resize\t      resize: both;\n   * @returns {string} The resize class.\n   */\n  private getResize() {\n    if (this.resize === 'none') return 'resize-none';\n    if (this.resize === 'vertical') return 'resize-y';\n    if (this.resize === 'horizontal') return 'resize-x';\n    if (this.resize === 'both') return 'resize';\n    return 'resize-none';\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentDidLoad() {\n    if (this.autosize) {\n      this.adjustTextareaHeight();\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=\"textarea-wrapper\">\n          <div\n            class=\"textarea-container\"\n            onClick={this.handleTextareaContainerClick}\n          >\n            <textarea\n              id={this.inputId}\n              ref={e => (this.textareaElement = e)}\n              placeholder={this.placeholder}\n              name={this.name}\n              disabled={this.disabled}\n              readOnly={this.readonly}\n              required={this.required}\n              maxlength={this.maxlength}\n              minlength={this.minlength}\n              autocomplete=\"off\"\n              value={this.value}\n              onInput={this.handleTextarea}\n              rows={this.rows}\n              class={clsx(this.getResize())}\n            />\n          </div>\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-5172aa15.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["nvMenuCss","NvMenuStyle0","NvMenu","this","isHandlingKeyDown","isHandlingClick","nested","show","open","close","handleMenuItemSelect","menuItem","event","hasAttribute","stopPropagation","itemId","id","menuitemSelected","emit","disableCloseOnSelect","handleMenuClick","target","closest","tagName","handleKeydown","key","preventDefault","triggerElement","focus","activeElement","document","menuContent","el","querySelector","menuItems","Array","from","childNodes","filter","item","_a","matches","call","currentIndex","indexOf","parentElement","find","forEach","nextIndex","length","nextFocusable","prevIndex","prevFocusable","submenu","handleOpenChanged","detail","triggerHasFocus","triggerHasFocusVisible","focusFirstItem","firstButton","popoverElement","requestAnimationFrame","componentWillLoad","children","child","getAttribute","render","h","Host","name","ref","triggerMode","placement"],"sources":["src/components/nv-menu/nv-menu.scss?tag=nv-menu","src/components/nv-menu/nv-menu.tsx"],"sourcesContent":["@use \"../nv-menuitem/nv-menuitem\" as nv-menuitem;\n\n@mixin root-styles() {\n  display: inline-block;\n  position: relative;\n\n  &:has([fluid]:not([fluid=\"false\"])) {\n    display: block;\n  }\n}\n\n@mixin content-styles() {\n  padding: var(--menu-contextual-padding-y)  \n          var(--menu-contextual-padding-x);\n  border-radius: var(--menu-contextual-radius);\n  gap: var(--menu-contextual-gap-y);\n  background-color: var(--components-menu-contextual-background);\n  border-color: var(--components-menu-contextual-border);\n  display: flex;\n  flex-direction: column;\n}\n\n@mixin separator-styles() {\n  display: block;\n  margin: var(--menu-contextual-divider-padding-top)  \n          var(--menu-contextual-divider-padding-x)  \n          var(--menu-contextual-divider-padding-bottom)  \n          var(--menu-contextual-divider-padding-x) ;\n}\n\nnv-menu {\n  @include root-styles();\n\n  nv-popover {\n    display: unset;\n    \n    [data-scope=popover]{\n      background-color: transparent !important;\n      padding: 0 !important;\n    }\n  }\n\n  [slot=\"content\"] {\n    @include content-styles();\n  }\n\n  nv-menu[open]:not([open=\"false\"]) {\n    > nv-menuitem {\n      @include nv-menuitem.focused-styles();\n    }\n  }\n\n  hr {\n    @include separator-styles();\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Listen,\n  Event,\n  EventEmitter,\n  Method,\n} from '@stencil/core';\nimport type { Placement } from '@floating-ui/dom';\nimport type { MenuitemSelectedEventDetail } from '../nv-menuitem/nv-menuitem';\n\n/**\n * @slot trigger - Button to toggle the menu popover.\n * @slot content - Use an &lt;ul&gt;&lt;/ul&gt; tag for the slot, and place &lt;nv-menuitem&gt; elements inside.\n */\n@Component({\n  tag: 'nv-menu',\n  styleUrl: 'nv-menu.scss',\n  shadow: false,\n})\nexport class NvMenu {\n  @Element() el: HTMLNvMenuElement;\n  private triggerElement!: HTMLElement;\n  private popoverElement!: HTMLNvPopoverElement;\n  private isHandlingKeyDown: boolean = false;\n  private isHandlingClick: boolean = false;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Use this to toggle the initial visibility of the menu, by default the menu\n   * is hidden.\n   */\n  @Prop({ reflect: true, mutable: true })\n  open: boolean = false;\n\n  /**\n   * Use this if the menu is nested inside another menu. This will prevent the\n   * parent menu from closing when the child menu is opened.\n   */\n  @Prop()\n  readonly nested: boolean = false;\n\n  /**\n   * Use this to disable the menu from closing automatically when a menu item is\n   * selected.\n   */\n  @Prop()\n  readonly disableCloseOnSelect: boolean = false;\n\n  /**\n   * Decides where the menu shows up next to the button it’s linked to (above,\n   * below, to the sides). If there isn’t enough room, it will adjust its\n   * position on the axis to fit on the screen, so users can always see it.\n   */\n  @Prop()\n  readonly placement: Placement = this.nested ? 'right-start' : 'bottom-end';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Opens the menu.\n   */\n  @Method()\n  async show() {\n    this.open = true;\n  }\n\n  /**\n   * Closes the menu.\n   */\n  @Method()\n  async close() {\n    this.open = false;\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted from nv-menuitem elements with the corresponding id when the menu\n   * item is selected.\n   */\n  @Event()\n  menuitemSelected: EventEmitter<MenuitemSelectedEventDetail>;\n\n  private handleMenuItemSelect(menuItem: HTMLElement, event: Event) {\n    // If the element is disabled, stop propagation\n    if (menuItem.hasAttribute('disabled')) {\n      event.stopPropagation();\n      return;\n    }\n\n    // Emit the menuitemSelected event for the selected item\n    const itemId = menuItem.id;\n    if (itemId) {\n      this.menuitemSelected.emit({ itemId });\n    }\n\n    // Prevent event propagation to avoid multiple triggers\n    event.stopPropagation();\n\n    if (!this.disableCloseOnSelect) {\n      this.open = false;\n    }\n  }\n\n  @Listen('click', { capture: true })\n  handleMenuClick(event: MouseEvent) {\n    if (this.isHandlingClick) {\n      return;\n    }\n    this.isHandlingClick = true;\n\n    const target = event.target as HTMLElement;\n    const menuItem = target.closest('nv-menuitem');\n    if (\n      menuItem &&\n      menuItem.tagName === 'NV-MENUITEM' &&\n      !menuItem.hasAttribute('has-submenu')\n    ) {\n      this.handleMenuItemSelect(menuItem, event);\n    }\n\n    this.isHandlingClick = false;\n  }\n\n  @Listen('keydown', { passive: false })\n  handleKeydown(event: KeyboardEvent) {\n    if (!this.open) return;\n\n    if (this.isHandlingKeyDown) {\n      return;\n    }\n    this.isHandlingKeyDown = true;\n\n    if (\n      event.key === 'ArrowDown' ||\n      event.key === 'ArrowUp' ||\n      event.key === 'ArrowLeft' ||\n      event.key === 'ArrowRight' ||\n      event.key === 'Escape'\n    ) {\n      event.preventDefault();\n    }\n\n    if (event.key === 'Escape' && !this.nested) {\n      this.close();\n      this.triggerElement.focus();\n      this.isHandlingKeyDown = false;\n      return;\n    }\n\n    if (event.key === 'Enter') {\n      const activeElement = document.activeElement as HTMLNvMenuitemElement;\n      if (\n        activeElement &&\n        activeElement.tagName === 'NV-MENUITEM' &&\n        !activeElement.hasAttribute('has-submenu')\n      ) {\n        event.preventDefault();\n        this.handleMenuItemSelect(activeElement, event);\n      }\n      this.isHandlingKeyDown = false;\n      return;\n    }\n\n    const menuContent = this.el.querySelector('[slot=\"content\"]');\n    const menuItems = (\n      Array.from(menuContent.childNodes) as Array<\n        HTMLNvMenuitemElement | HTMLNvMenuElement\n      >\n    ).filter(item => item.matches?.('nv-menuitem, nv-menu'));\n\n    let currentIndex = menuItems.indexOf(\n      document.activeElement as HTMLNvMenuitemElement,\n    );\n    if (currentIndex === -1)\n      currentIndex = menuItems.indexOf(\n        document.activeElement.parentElement as HTMLNvMenuitemElement,\n      );\n    if (\n      currentIndex === -1 &&\n      menuItems.find(item => item.matches('nv-menu[open]'))\n    ) {\n      this.isHandlingKeyDown = false;\n      return;\n    }\n\n    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n      menuItems.forEach(item => {\n        if (item.matches('nv-menu')) (item as HTMLNvMenuElement).close();\n      });\n    }\n\n    if (event.key === 'ArrowDown') {\n      let nextIndex = (currentIndex + 1) % menuItems.length;\n      while (menuItems[nextIndex].matches('nv-menuitem[disabled]')) {\n        nextIndex = (nextIndex + 1) % menuItems.length;\n      }\n      const nextFocusable = menuItems[nextIndex];\n      if (nextFocusable.matches('nv-menuitem')) nextFocusable.focus();\n      else if (nextFocusable.matches('nv-menu'))\n        nextFocusable.querySelector('nv-menuitem').focus();\n    }\n\n    if (event.key === 'ArrowUp') {\n      let prevIndex = (currentIndex - 1 + menuItems.length) % menuItems.length;\n      while (menuItems[prevIndex].matches('nv-menuitem[disabled]')) {\n        prevIndex = (prevIndex - 1 + menuItems.length) % menuItems.length;\n      }\n      const prevFocusable = menuItems[prevIndex];\n      if (prevFocusable.matches('nv-menuitem')) prevFocusable.focus();\n      else if (prevFocusable.matches('nv-menu'))\n        prevFocusable.querySelector('nv-menuitem').focus();\n    }\n\n    if (event.key === 'ArrowRight') {\n      const submenu = menuItems[currentIndex];\n      if (!submenu.matches('nv-menu')) {\n        this.isHandlingKeyDown = false;\n        return;\n      }\n\n      (submenu as HTMLNvMenuElement).show();\n    }\n\n    if (event.key === 'ArrowLeft' && this.nested) {\n      if (menuItems.find(item => item.matches('nv-menu[open]'))) {\n        this.isHandlingKeyDown = false;\n        return;\n      }\n      this.close();\n      this.triggerElement.focus();\n    }\n\n    this.isHandlingKeyDown = false;\n  }\n\n  @Listen('openChanged')\n  handleOpenChanged(event: CustomEvent<boolean>) {\n    if (event.target === this.el.querySelector('nv-popover')) {\n      this.open = event.detail;\n    }\n\n    const triggerHasFocus = this.triggerElement === document.activeElement;\n    const triggerHasFocusVisible =\n      this.triggerElement.matches(':focus-visible');\n\n    if (triggerHasFocus && triggerHasFocusVisible) this.focusFirstItem();\n  }\n\n  private focusFirstItem() {\n    const firstButton = this.popoverElement.querySelector('nv-menuitem');\n    if (firstButton) {\n      requestAnimationFrame(() => firstButton.focus());\n    }\n  }\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.triggerElement = Array.from(this.el.children).find(child => {\n      return child.getAttribute('slot') === 'trigger';\n    }) as HTMLElement;\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        <slot name=\"trigger\"></slot>\n\n        <nv-popover\n          ref={el => (this.popoverElement = el)}\n          triggerMode=\"click\"\n          triggerElement={this.triggerElement}\n          placement={this.placement}\n          nested={this.nested}\n          open={this.open}\n        >\n          <slot name=\"content\"></slot>\n        </nv-popover>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/native/p-69ca8c88.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["nvAlertCss","NvAlertStyle0","NvAlert","this","handleDismiss","originalEvent","preventAutoClose","hidden","closeClicked","emit","getDefaultIcon","feedback","FeedbackColors","Warning","Information","Success","Error","Neutral","componentWillRender","color","handleHiddenChange","hiddenChanged","fadeIn","fadeOut","useFade","ref","duration","collapse","expand","useCollapse","timeline","start","hiddenChangedComplete","componentWillLoad","setCollapsed","setFadeOut","render","h","Host","key","role","class","clsx","name","_a","icon","size","heading","message","dismissible","type","onClick"],"sources":["src/components/nv-alert/nv-alert.scss?tag=nv-alert","src/components/nv-alert/nv-alert.tsx"],"sourcesContent":["@use \"sass:map\";\n@import \"../../styles/focus-ring\";\n\n/* Variants */\n$alert-feedback: (\"information\", \"warning\", \"error\", \"success\", \"neutral\");\n\n/* Define maps for feedback-related variables */\n$components-alert-background: (\n  \"information\": var(--components-alert-information-background),\n  \"warning\": var(--components-alert-warning-background),\n  \"error\": var(--components-alert-error-background),\n  \"success\": var(--components-alert-success-background),\n  \"neutral\": var(--components-alert-neutral-background)\n);\n\n$components-alert-border: (\n  \"information\": var(--components-alert-information-border),\n  \"warning\": var(--components-alert-warning-border),\n  \"error\": var(--components-alert-error-border),\n  \"success\": var(--components-alert-success-border),\n  \"neutral\": var(--components-alert-neutral-border)\n);\n\n$components-alert-icon: (\n  \"information\": var(--components-alert-information-icon),\n  \"warning\": var(--components-alert-warning-icon),\n  \"error\": var(--components-alert-error-icon),\n  \"success\": var(--components-alert-success-icon),\n  \"neutral\": var(--components-alert-neutral-icon)\n);\n\n@mixin root-styles() {\n  display: flex !important; // override the display: none in [hidden] css\n  align-items: flex-start;\n  position: relative;\n  gap: var(--alert-gap-x);\n  border-radius: var(--alert-radius);\n  font-family: \"TT Norms Pro\", \"Montserrat\", sans-serif;\n}\n\n@mixin content-styles() {\n  display: flex;\n  padding: var(--alert-padding);\n  padding-left: 0;\n  flex-direction: column;\n  gap: var(--alert-gap-y);\n}\n\n@mixin feedback-color($feedback-type) {\n  background-color: map.get($components-alert-background, $feedback-type);\n  border: 1px solid map.get($components-alert-border, $feedback-type) !important;\n}\n\n@mixin icon-color($feedback-type) {\n  color: map.get($components-alert-icon, $feedback-type);\n}\n\n@mixin icon-position {\n  margin-left: var(--alert-icon-position-x);\n  margin-top: var(--alert-icon-position-y);\n}\n\nnv-alert {\n  @include root-styles();\n\n  & > nv-icon {\n    @include icon-position();\n  }\n\n  @each $feedback in $alert-feedback {\n    &.feedback-#{$feedback} {\n      @include feedback-color($feedback);\n      & > .close {\n        @include focus-ring(map.get($components-alert-border, $feedback));\n      }\n    }\n  }\n\n  @each $feedback in $alert-feedback {\n    & > nv-icon.icon-#{$feedback} {\n      @include icon-color($feedback);\n    }\n  }\n\n  & > .content {\n    @include content-styles();\n\n    & > .heading {\n      color: var(--components-alert-content-title);\n      font-size: var(--alert-heading-font-size);\n      line-height: var(--alert-heading-line-height);\n      font-weight: var(--alert-heading-font-weight);\n    }\n    & > .message {\n      color: var(--components-alert-content-description);\n      font-size: var(--alert-message-font-size);\n      line-height: var(--alert-message-line-height);\n    }\n  }\n  & > .close {\n    border-radius: var(--alert-radius);\n    position: absolute;\n    display: flex;\n    top: var(--alert-icon-position-y);\n    right: var(--alert-icon-position-x);\n    padding: 0;\n    border: none;\n    background: none;\n    cursor: pointer;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Watch,\n  Element,\n} from '@stencil/core';\nimport clsx from 'clsx';\n\nimport {\n  DeprecatedSemanticColors,\n  FeedbackColors,\n} from '../../utils/constants';\nimport { useCollapse, useFade, timeline } from '../../animations';\n\n/**\n * @slot default - Use this slot to insert HTML into the alert content.\n */\n@Component({\n  tag: 'nv-alert',\n  styleUrl: 'nv-alert.scss',\n  shadow: false,\n})\nexport class NvAlert {\n  @Element() ref: HTMLNvAlertElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Defines color of the alert.\n   * @deprecated use feedback instead.\n   */\n  @Prop()\n  readonly color: `${DeprecatedSemanticColors}`;\n\n  componentWillRender() {\n    if (this.color) {\n      switch (this.color) {\n        case 'primary' as DeprecatedSemanticColors:\n          this.feedback = 'warning' as FeedbackColors;\n          break;\n        case 'secondary' as DeprecatedSemanticColors:\n          this.feedback = 'information' as FeedbackColors;\n          break;\n        case 'neutral' as DeprecatedSemanticColors:\n          this.feedback = 'information' as FeedbackColors;\n          break;\n        default:\n          this.feedback = this.color as FeedbackColors;\n      }\n    }\n  }\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Specifies the alert type which determines the color and default icon.\n   */\n  @Prop({ reflect: true, mutable: true })\n  feedback: `${FeedbackColors}` = 'information';\n\n  /**\n   * Main content of the alert. For more complex content, use the default slot\n   * instead.\n   */\n  @Prop({ reflect: true })\n  readonly message: string;\n\n  /**\n   * Short and concise text for the alert title.\n   */\n  @Prop({ reflect: true })\n  readonly heading: string;\n\n  /**\n   * Icon associated with the alert, defaults vary based on the feedback type.\n   */\n  @Prop({ reflect: true })\n  readonly icon: string;\n\n  /**\n   * Allows the alert to be dismissed via a close button (x). The alert is not\n   * dismissible unless explicitly enabled.\n   */\n  @Prop({ reflect: true })\n  readonly dismissible: boolean = false;\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  /**\n   * Controls the visibility of the alert. 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\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emits when the 'hidden' prop changes, reflecting a change in visibility.\n   * Passes hidden value to the detail.\n   * @bind hidden\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  /**\n   * Emitted when the close button is clicked.\n   */\n  @Event()\n  closeClicked: EventEmitter<MouseEvent>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Used for 2 way binding with the hidden property.\n   * Triggers open and close animations.\n   * @param {boolean} hidden - The visibility state of the alert.\n   */\n  @Watch('hidden')\n  async handleHiddenChange(hidden: boolean) {\n    this.hiddenChanged.emit(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\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles the dismissal of the alert, considering the preventAutoClose prop.\n   * Passes the original event from the close button to the close event detail.\n   * @param {MouseEvent} originalEvent - The original event from the close button.\n   */\n  private handleDismiss = (originalEvent?: MouseEvent) => {\n    if (!this.preventAutoClose) {\n      this.hidden = true;\n    }\n\n    this.closeClicked.emit(originalEvent);\n  };\n\n  /**\n   * By default an icon is linked to the feedback type\n   * @returns {string} - The default icon name.\n   */\n  private getDefaultIcon = () => {\n    switch (this.feedback) {\n      case FeedbackColors.Warning:\n        return 'alert-circle';\n      case FeedbackColors.Information:\n        return 'info-circle';\n      case FeedbackColors.Success:\n        return 'circle-check';\n      case FeedbackColors.Error:\n        return 'alert-circle';\n      case FeedbackColors.Neutral:\n        return 'help';\n      default:\n        return 'info-circle';\n    }\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (this.color) {\n      switch (this.color) {\n        case 'primary' as DeprecatedSemanticColors:\n          this.feedback = 'warning' as FeedbackColors;\n          break;\n        case 'secondary' as DeprecatedSemanticColors:\n          this.feedback = 'information' as FeedbackColors;\n          break;\n        case 'neutral' as DeprecatedSemanticColors:\n          this.feedback = 'information' as FeedbackColors;\n          break;\n        default:\n          this.feedback = this.color as FeedbackColors;\n      }\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 RENDER\n\n  render() {\n    return (\n      <Host role=\"alert\" class={clsx('root', `feedback-${this.feedback}`)}>\n        <nv-icon\n          name={this.icon ?? this.getDefaultIcon()}\n          class={`icon-${this.feedback}`}\n          size=\"md\"\n        ></nv-icon>\n\n        <div class=\"content\">\n          {this.heading && <p class=\"heading\">{this.heading}</p>}\n\n          {this.message && <p class=\"message\">{this.message}</p>}\n\n          <slot></slot>\n        </div>\n\n        {this.dismissible && (\n          <button class=\"close\" type=\"button\" onClick={this.handleDismiss}>\n            <nv-icon name=\"x\" size=\"sm\" />\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"mappings":"uNAAA,MAAMA,EAAa,ssHACnB,MAAAC,EAAeD,E,MCyBFE,EAAO,M,8KAuIVC,KAAAC,cAAiBC,IACvB,IAAKF,KAAKG,iBAAkB,CAC1BH,KAAKI,OAAS,I,CAGhBJ,KAAKK,aAAaC,KAAKJ,EAAc,EAO/BF,KAAAO,eAAiB,KACvB,OAAQP,KAAKQ,UACX,KAAKC,EAAeC,QAClB,MAAO,eACT,KAAKD,EAAeE,YAClB,MAAO,cACT,KAAKF,EAAeG,QAClB,MAAO,eACT,KAAKH,EAAeI,MAClB,MAAO,eACT,KAAKJ,EAAeK,QAClB,MAAO,OACT,QACE,MAAO,c,qCAzHmB,c,mFA0BA,M,sBAOK,M,YAMnB,K,CAjElB,mBAAAC,GACE,GAAIf,KAAKgB,MAAO,CACd,OAAQhB,KAAKgB,OACX,IAAK,UACHhB,KAAKQ,SAAW,UAChB,MACF,IAAK,YACHR,KAAKQ,SAAW,cAChB,MACF,IAAK,UACHR,KAAKQ,SAAW,cAChB,MACF,QACER,KAAKQ,SAAWR,KAAKgB,M,EAwF7B,wBAAMC,CAAmBb,GACvBJ,KAAKkB,cAAcZ,KAAKF,GAExB,MAAMe,OAAEA,EAAMC,QAAEA,GAAYC,EAAQrB,KAAKsB,IAAK,CAAEC,SAAU,MAC1D,MAAMC,SAAEA,EAAQC,OAAEA,GAAWC,EAAY1B,KAAKsB,IAAK,CAAEC,SAAU,MAE/D,GAAInB,IAAW,WAAYuB,EAASP,EAASI,GAAUI,QACvD,GAAIxB,IAAW,YAAauB,EAASF,EAAQN,GAAQS,QAErD5B,KAAK6B,sBAAsBvB,KAAKF,E,CA6ClC,iBAAA0B,GACE,GAAI9B,KAAKgB,MAAO,CACd,OAAQhB,KAAKgB,OACX,IAAK,UACHhB,KAAKQ,SAAW,UAChB,MACF,IAAK,YACHR,KAAKQ,SAAW,cAChB,MACF,IAAK,UACHR,KAAKQ,SAAW,cAChB,MACF,QACER,KAAKQ,SAAWR,KAAKgB,M,CAI3B,GAAIhB,KAAKI,OAAQ,CACf,MAAM2B,aAAEA,GAAiBL,EAAY1B,KAAKsB,KAC1C,MAAMU,WAAEA,GAAeX,EAAQrB,KAAKsB,KAEpCS,IACAC,G,EAQJ,MAAAC,G,MACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,QAAQC,MAAOC,EAAK,OAAQ,YAAYvC,KAAKQ,aACtD0B,EAAA,WAAAE,IAAA,2CACEI,MAAMC,EAAAzC,KAAK0C,QAAI,MAAAD,SAAA,EAAAA,EAAIzC,KAAKO,iBACxB+B,MAAO,QAAQtC,KAAKQ,WACpBmC,KAAK,OAGPT,EAAA,OAAAE,IAAA,2CAAKE,MAAM,WACRtC,KAAK4C,SAAWV,EAAA,KAAAE,IAAA,2CAAGE,MAAM,WAAWtC,KAAK4C,SAEzC5C,KAAK6C,SAAWX,EAAA,KAAAE,IAAA,2CAAGE,MAAM,WAAWtC,KAAK6C,SAE1CX,EAAA,QAAAE,IAAA,8CAGDpC,KAAK8C,aACJZ,EAAA,UAAAE,IAAA,2CAAQE,MAAM,QAAQS,KAAK,SAASC,QAAShD,KAAKC,eAChDiC,EAAA,WAAAE,IAAA,2CAASI,KAAK,IAAIG,KAAK,Q","ignoreList":[]}

package/dist/native/p-71fbdb92.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["nvLoaderCss","NvLoaderStyle0","NvLoader","render","h","Host","key","class","clsx","this","size","color"],"sources":["src/components/nv-loader/nv-loader.scss?tag=nv-loader","src/components/nv-loader/nv-loader.tsx"],"sourcesContent":["@use \"sass:map\";\n\n/* Variants */\n$loader-sizes: (\"xs\", \"sm\", \"md\", \"lg\", \"xl\");\n$loader-color: (\"brand\", \"white\");\n\n/* Define maps for color-related variables */\n$components-loader-background: (\n  \"brand\": var(--components-loader-brand-background),\n  \"white\": var(--components-loader-white-background)\n);\n\n$components-loader-foreground: (\n  \"brand\": var(--components-loader-brand-foreground),\n  \"white\": var(--components-loader-white-foreground)\n);\n\n/* Define maps for size-related variables */\n$components-loader-size: (\n  \"xs\": var(--loader-size-xs),\n  \"sm\": var(--loader-size-sm),\n  \"md\": var(--loader-size-md),\n  \"lg\": var(--loader-size-lg),\n  \"xl\": var(--loader-size-xl)\n);\n\n@mixin root-styles() {\n  display: inline-block;\n  position: relative;\n  aspect-ratio: 1 / 1;\n  border-radius: 9999px;\n  color: inherit;\n}\n\n@mixin size-styles($size) {\n  $loader-size: map.get($components-loader-size, $size);\n  $border-size: calc($loader-size / 10);\n\n  width: $loader-size;\n  height: $loader-size;\n\n  &::before,\n  &::after {\n    content: \" \";\n    position: absolute;\n    top: 0;\n    left: 0;\n    border-radius: inherit;\n    width: 100%;\n    height: 100%;\n  }\n\n  &::before {\n    content: \" \";\n    border: $border-size solid;\n    opacity: 0.3;\n  }\n\n  &::after {\n    content: \" \";\n    border-top: $border-size solid transparent;\n    border-left: $border-size solid transparent;\n    border-right: $border-size solid transparent;\n    border-bottom: $border-size solid;\n    animation: rotation 1s linear infinite;\n  }\n}\n\n@mixin color-styles($color) {\n  &::before {\n    border-color: map.get($components-loader-background, $color);\n    opacity: 1;\n  }\n\n  &::after {\n    border-bottom-color: map.get($components-loader-foreground, $color);\n  }\n}\n\n@keyframes rotation {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\nnv-loader {\n  @include root-styles();\n\n  @each $size in $loader-sizes {\n    &.size-#{$size} {\n      @include size-styles($size);\n    }\n  }\n\n  @each $color in $loader-color {\n    &.color-#{$color} {\n      @include color-styles($color);\n    }\n  }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\nimport { SemanticSizes, LoaderColors } from '../../utils/constants';\n\n@Component({\n  tag: 'nv-loader',\n  styleUrl: 'nv-loader.scss',\n  shadow: false,\n})\nexport class NvLoader {\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Choose the size of the loader to best fit your application’s needs, whether\n   * it’s a small spinner for subtle loading indicators or a large one for more\n   * prominent displays.\n   */\n  @Prop({ reflect: true })\n  readonly size: `${SemanticSizes}` = 'md';\n\n  /**\n   * Choose the color of the loader. Options are primary and white to keep the\n   * design consistent and ensure the loader stands out or blends in\n   * appropriately with your application’s interface.\n   */\n  @Prop({ reflect: true })\n  readonly color: `${LoaderColors}`;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region RENDER\n\n  /* <slot> empty to force rendering change */\n  render() {\n    return (\n      <Host\n        class={clsx(\n          this.size && `size-${this.size}`,\n          this.color && `color-${this.color}`,\n        )}\n      ></Host>\n    );\n  }\n}\n"],"mappings":"sFAAA,MAAMA,EAAc,wmHACpB,MAAAC,EAAeD,E,MCSFE,EAAQ,M,mCAUiB,K,qBAepC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAOC,EACLC,KAAKC,MAAQ,QAAQD,KAAKC,OAC1BD,KAAKE,OAAS,SAASF,KAAKE,U","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["nvFieldpasswordCss","NvFieldpasswordStyle0","NvFieldpassword","this","handleInputContainerClick","inputElement","focus","togglePasswordVisibility","showPasswordState","handleKeyDown","event","key","preventDefault","setTimeout","handleInput","input","target","value","valueChanged","emit","uuidv4","showPassword","handleShowPasswordChange","newValue","render","h","Host","label","el","querySelector","htmlFor","inputId","name","class","onClick","id","ref","e","autocomplete","placeholder","type","inputMode","mode","required","maxlength","minlength","pattern","disabled","readOnly","readonly","onInput","hidePasswordIcon","size","emphasis","onKeyDown","toString","success","error","description","errorDescription","hidden"],"sources":["src/components/nv-fieldpassword/nv-fieldpassword.scss?tag=nv-fieldpassword","src/components/nv-fieldpassword/nv-fieldpassword.tsx"],"sourcesContent":["@import '../../styles/form-field';\n\nnv-fieldpassword {\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      position: relative;\n\n      input {\n        @include form-field-input();\n      }\n\n      nv-icon.validation {\n        @include form-field-icon();\n\n        position: absolute;\n        right: 50px;\n      }\n    }\n  }\n\n  .description {\n    @include form-field-description();\n  }\n\n  .error-description {\n    @include form-field-error-description();\n  }\n\n  .toggle-password-icon {\n    position: absolute;\n    right: -1px;\n    border: 0 solid transparent !important;\n  }\n}\n","import {\n  Component,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  State,\n  Watch,\n} from '@stencil/core';\n\nimport { v4 as uuidv4 } from 'uuid';\nimport { TextInputAutocomplete } from '../../utils/constants';\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-fieldpassword',\n  styleUrl: 'nv-fieldpassword.scss',\n  shadow: false,\n  formAssociated: true,\n})\nexport class NvFieldpassword {\n  @Element() el: HTMLNvFieldpasswordElement;\n  private inputElement!: HTMLInputElement;\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  // eslint-disable-next-line @stencil-community/strict-mutable\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   * 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   * 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 })\n  readonly error: boolean = false;\n\n  /**\n   * A description that appears when there is an error related to the password\n   * field.\n   * @validator message\n   */\n  @Prop({ reflect: true })\n  readonly 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   * Limits how many characters users can type into the input field. It’s\n   * helpful for making sure users don’t enter too much information, keeping\n   * their input within the allowed limit.\n   */\n  @Prop({ reflect: true })\n  readonly maxlength: number;\n\n  /**\n   * Ensures that users type at least a certain number of characters into the\n   * input field. It’s a way to make sure users provide enough information\n   * before moving on.\n   */\n  @Prop({ reflect: true })\n  readonly minlength: number;\n\n  /**\n   * Set rules for how the input should be formatted. For example, you can\n   * require that a phone number includes only digits or that an email address\n   * has the correct format. If users don’t follow these rules, they’ll get a\n   * prompt to correct their input.\n   * the rules are applied to the input value via regexes.\n   */\n  @Prop({ reflect: true })\n  readonly pattern: string;\n\n  /**\n   * Defines the type of the input.\n   * @default 'text'\n   */\n  @Prop({ reflect: true })\n  readonly mode: 'text' | 'number' = 'text';\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   * Hide the button to show/hide the password.\n   */\n  @Prop({ reflect: true })\n  readonly hidePasswordIcon: boolean = false;\n\n  /**\n   * Show/hide the password programmatically.\n   */\n  @Prop({ reflect: true })\n  readonly showPassword: boolean = false;\n\n  /**\n   * Defines whether the password is visible or not.\n   */\n  @State()\n  showPasswordState: boolean = this.showPassword;\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<string>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region METHODS\n\n  private handleInputContainerClick = () => {\n    this.inputElement.focus();\n  };\n\n  @Watch('showPassword')\n  handleShowPasswordChange(newValue: boolean) {\n    this.showPasswordState = newValue;\n  }\n\n  private togglePasswordVisibility = () => {\n    this.showPasswordState = !this.showPasswordState;\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === ' ') {\n      event.preventDefault(); // Prevent the space character from being added\n      setTimeout(() => {\n        this.togglePasswordVisibility();\n      }, 0);\n    }\n  };\n\n  private handleInput = (event: Event) => {\n    const input = event.target as HTMLInputElement;\n    this.value = input.value; // Update the input value without worrying about the space\n    this.valueChanged.emit(input.value);\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        <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\n            <input\n              id={this.inputId}\n              ref={e => (this.inputElement = e)}\n              autocomplete={this.autocomplete}\n              placeholder={this.placeholder}\n              name={this.name}\n              type={this.showPasswordState ? 'text' : 'password'}\n              inputMode={this.mode}\n              value={this.value}\n              required={this.required}\n              maxlength={this.maxlength}\n              minlength={this.minlength}\n              pattern={this.pattern}\n              disabled={this.disabled}\n              readOnly={this.readonly}\n              onInput={this.handleInput}\n            />\n\n            {!this.hidePasswordIcon && (\n              <nv-iconbutton\n                class=\"toggle-password-icon\"\n                name={this.showPasswordState ? 'eye' : 'eye-off'}\n                size=\"md\"\n                emphasis=\"lower\"\n                onClick={this.togglePasswordVisibility}\n                onKeyDown={this.handleKeyDown}\n                aria-label={\n                  this.showPasswordState ? 'Hide password' : 'Show password'\n                }\n                aria-pressed={this.showPasswordState.toString()}\n              />\n            )}\n\n            {(this.success || this.error) && (\n              <nv-icon\n                name={this.success ? 'circle-check' : 'alert-circle'}\n                class=\"validation\"\n                size=\"md\"\n              />\n            )}\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"],"mappings":"oGAAA,MAAMA,EAAqB,k7JAC3B,MAAAC,EAAeD,E,MC4BFE,EAAe,M,oEAmLlBC,KAAAC,0BAA4B,KAClCD,KAAKE,aAAaC,OAAO,EAQnBH,KAAAI,yBAA2B,KACjCJ,KAAKK,mBAAqBL,KAAKK,iBAAiB,EAG1CL,KAAAM,cAAiBC,IACvB,GAAIA,EAAMC,MAAQ,IAAK,CACrBD,EAAME,iBACNC,YAAW,KACTV,KAAKI,0BAA0B,GAC9B,E,GAICJ,KAAAW,YAAeJ,IACrB,MAAMK,EAAQL,EAAMM,OACpBb,KAAKc,MAAQF,EAAME,MACnBd,KAAKe,aAAaC,KAAKJ,EAAME,MAAM,E,aA9LVG,I,kIAkDE,M,cAQA,M,cAOA,M,WAQH,M,6CAeE,M,mFAiCO,O,kBASiB,M,sBAMf,M,kBAMJ,M,uBAMJjB,KAAKkB,Y,CAsBlC,wBAAAC,CAAyBC,GACvBpB,KAAKK,kBAAoBe,C,CA0B3B,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAf,IAAA,6CACDR,KAAKwB,OAASxB,KAAKyB,GAAGC,cAAc,oBACpCJ,EAAA,SAAAd,IAAA,2CAAOmB,QAAS3B,KAAK4B,SACnBN,EAAA,QAAAd,IAAA,2CAAMqB,KAAK,SAAS7B,KAAKwB,QAI7BF,EAAA,OAAAd,IAAA,2CAAKsB,MAAM,iBACTR,EAAA,QAAAd,IAAA,2CAAMqB,KAAK,iBAEXP,EAAA,OAAAd,IAAA,2CAAKsB,MAAM,kBAAkBC,QAAS/B,KAAKC,2BACzCqB,EAAA,QAAAd,IAAA,2CAAMqB,KAAK,kBAEXP,EAAA,SAAAd,IAAA,2CACEwB,GAAIhC,KAAK4B,QACTK,IAAKC,GAAMlC,KAAKE,aAAegC,EAC/BC,aAAcnC,KAAKmC,aACnBC,YAAapC,KAAKoC,YAClBP,KAAM7B,KAAK6B,KACXQ,KAAMrC,KAAKK,kBAAoB,OAAS,WACxCiC,UAAWtC,KAAKuC,KAChBzB,MAAOd,KAAKc,MACZ0B,SAAUxC,KAAKwC,SACfC,UAAWzC,KAAKyC,UAChBC,UAAW1C,KAAK0C,UAChBC,QAAS3C,KAAK2C,QACdC,SAAU5C,KAAK4C,SACfC,SAAU7C,KAAK8C,SACfC,QAAS/C,KAAKW,eAGdX,KAAKgD,kBACL1B,EAAA,iBAAAd,IAAA,2CACEsB,MAAM,uBACND,KAAM7B,KAAKK,kBAAoB,MAAQ,UACvC4C,KAAK,KACLC,SAAS,QACTnB,QAAS/B,KAAKI,yBACd+C,UAAWnD,KAAKM,cAAa,aAE3BN,KAAKK,kBAAoB,gBAAkB,gBAAe,eAE9CL,KAAKK,kBAAkB+C,cAIvCpD,KAAKqD,SAAWrD,KAAKsD,QACrBhC,EAAA,WAAAd,IAAA,2CACEqB,KAAM7B,KAAKqD,QAAU,eAAiB,eACtCvB,MAAM,aACNmB,KAAK,QAKX3B,EAAA,QAAAd,IAAA,2CAAMqB,KAAK,kBAGX7B,KAAKuD,aACLvD,KAAKyB,GAAGC,cAAc,0BACtBJ,EAAA,OAAAd,IAAA,2CAAKsB,MAAM,eACTR,EAAA,QAAAd,IAAA,2CAAMqB,KAAK,eAAe7B,KAAKuD,eAIjCvD,KAAKwD,kBACLxD,KAAKyB,GAAGC,cAAc,gCACtBJ,EAAA,OAAAd,IAAA,2CAAKiD,QAASzD,KAAKsD,MAAOxB,MAAM,qBAC9BR,EAAA,QAAAd,IAAA,2CAAMqB,KAAK,qBAAqB7B,KAAKwD,mB","ignoreList":[]}