@nova-design-system/nova-webcomponents 3.0.0-beta.30 → 3.0.0-beta.33

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

@@ -0,0 +1,2 @@
+import{r as o,h as n,a as t,g as i}from"./p-9b093b92.js";import{c as e}from"./p-8a1a6e56.js";const s='nv-iconbutton.root{display:inline-flex;justify-content:center;align-items:center;font-style:normal;font-weight:500;font-family:"TT Norms Pro", sans-serif;transition:background-color 150ms ease-out;height:fit-content;width:fit-content}nv-iconbutton.size-xs{padding:var(--button-xs-icon-button-padding);gap:var(--button-xs-gap);border-radius:var(--button-xs-border-radius);line-height:var(--button-xs-line-height);font-size:var(--button-xs-font-size)}nv-iconbutton.size-sm{padding:var(--button-sm-icon-button-padding);gap:var(--button-sm-gap);border-radius:var(--button-sm-border-radius);line-height:var(--button-sm-line-height);font-size:var(--button-sm-font-size)}nv-iconbutton.size-md{padding:var(--button-md-icon-button-padding);gap:var(--button-md-gap);border-radius:var(--button-md-border-radius);line-height:var(--button-md-line-height);font-size:var(--button-md-font-size)}nv-iconbutton.size-lg{padding:var(--button-lg-icon-button-padding);gap:var(--button-lg-gap);border-radius:var(--button-lg-border-radius);line-height:var(--button-lg-line-height);font-size:var(--button-lg-font-size)}nv-iconbutton.emphasis-high{background:var(--components-button-high-background);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text)}nv-iconbutton.emphasis-high:hover{background:var(--components-button-high-background-hover);color:var(--components-button-high-text-hover)}nv-iconbutton.emphasis-high:focus,nv-iconbutton.emphasis-high:focus-within{outline:none}nv-iconbutton.emphasis-high:focus-visible,nv-iconbutton.emphasis-high:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-high:disabled{background:var(--components-button-high-background);color:var(--components-button-high-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-high nv-icon>svg{color:var(--components-button-high-icon)}nv-iconbutton.emphasis-medium{background:var(--components-button-medium-background);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text)}nv-iconbutton.emphasis-medium:hover{background:var(--components-button-medium-background-hover);color:var(--components-button-medium-text-hover)}nv-iconbutton.emphasis-medium:focus,nv-iconbutton.emphasis-medium:focus-within{outline:none}nv-iconbutton.emphasis-medium:focus-visible,nv-iconbutton.emphasis-medium:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-medium:disabled{background:var(--components-button-medium-background);color:var(--components-button-medium-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-medium nv-icon>svg{color:var(--components-button-medium-icon)}nv-iconbutton.emphasis-low{background:var(--components-button-low-background);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text)}nv-iconbutton.emphasis-low:hover{background:var(--components-button-low-background-hover);color:var(--components-button-low-text-hover)}nv-iconbutton.emphasis-low:focus,nv-iconbutton.emphasis-low:focus-within{outline:none}nv-iconbutton.emphasis-low:focus-visible,nv-iconbutton.emphasis-low:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-low:disabled{background:var(--components-button-low-background);color:var(--components-button-low-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-low nv-icon>svg{color:var(--components-button-low-icon)}nv-iconbutton.emphasis-lower{background:var(--components-button-lower-background);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text)}nv-iconbutton.emphasis-lower:hover{background:var(--components-button-lower-background-hover);color:var(--components-button-lower-text-hover)}nv-iconbutton.emphasis-lower:focus,nv-iconbutton.emphasis-lower:focus-within{outline:none}nv-iconbutton.emphasis-lower:focus-visible,nv-iconbutton.emphasis-lower:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-lower:disabled{background:var(--components-button-lower-background);color:var(--components-button-lower-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-lower nv-icon>svg{color:var(--components-button-lower-icon)}nv-iconbutton.loading [slot=leading-icon]{display:none}nv-iconbutton.shape-rounded{border-radius:var(--radius-rounded-full)}';const a=s;const r=class{constructor(n){o(this,n);if(n.$hostElement$["s-ei"]){this.internals=n.$hostElement$["s-ei"]}else{this.internals=n.$hostElement$.attachInternals();n.$hostElement$["s-ei"]=this.internals}this.size="md";this.emphasis="high";this.loading=false;this.disabled=false;this.active=false;this.type="button";this.shape="square";this.handleClick=o=>{var n,t,i,e;if(this.disabled){o.preventDefault();return}if(this.type==="submit"){(t=(n=this.internals)===null||n===void 0?void 0:n.form)===null||t===void 0?void 0:t.requestSubmit()}if(this.type==="reset"){(e=(i=this.internals)===null||i===void 0?void 0:i.form)===null||e===void 0?void 0:e.reset()}}}handleLoadingChange(o){this.loading=o;this.disabled=o}handleDisabledChange(o){if(this.loading){this.disabled=this.loading}else{this.disabled=o}}componentWillLoad(){if(this.loading){this.disabled=this.loading}}render(){return n(t,{key:"abbd417169f29ce6616909c79b2f4162943791d8",role:"button",type:this.type,tabindex:"0",disabled:this.disabled?true:undefined,class:e("root",`size-${this.size}`,`emphasis-${this.emphasis}`,this.loading&&"loading",`shape-${this.shape}`),onClick:this.handleClick},this.loading&&n("nv-loader",{key:"d933f2ada3fd2b01361f3508af9201dcde9d3f56",size:this.size}),!this.loading&&n("nv-icon",{key:"a60298b06f4ea8b4837ad8a46c2ad0adc411fc75",name:this.name,size:this.size}),n("slot",{key:"b19a111bb5304ac176eb834a661b2324f12b57e7"}))}static get formAssociated(){return true}get el(){return i(this)}static get watchers(){return{loading:["handleLoadingChange"],disabled:["handleDisabledChange"]}}};r.style=a;export{r as nv_iconbutton};
+//# sourceMappingURL=p-a9b6461b.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["nvIconbuttonCss","NvIconbuttonStyle0","NvIconbutton","constructor","hostRef","this","size","emphasis","loading","disabled","active","type","shape","handleClick","event","preventDefault","_b","_a","internals","form","requestSubmit","_d","_c","reset","handleLoadingChange","handleDisabledChange","componentWillLoad","render","h","Host","key","role","tabindex","undefined","class","clsx","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 {\n  ButtonSize,\n  ButtonEmphasis,\n  ButtonType,\n  IconButtonShape,\n} 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  /**\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: `${IconButtonShape}` = '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.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  //#endregion RENDER\n}\n"],"mappings":"6FAAA,MAAMA,EAAkB,6nJACxB,MAAAC,EAAeD,E,MC4BFE,EAAY,MAPzB,WAAAC,CAAAC,G,0KAoBWC,KAAAC,KAAwB,KAQxBD,KAAAE,SAAgC,OAUzCF,KAAAG,QAAmB,MAMnBH,KAAAI,SAAoB,MAOXJ,KAAAK,OAAkB,MAgBlBL,KAAAM,KAAwB,SAMxBN,KAAAO,MAA8B,SAY/BP,KAAAQ,YAAeC,I,YACrB,GAAIT,KAAKI,SAAU,CACjBK,EAAMC,iBACN,M,CAGF,GAAIV,KAAKM,OAAS,SAAU,EAC1BK,GAAAC,EAAAZ,KAAKa,aAAS,MAAAD,SAAA,SAAAA,EAAEE,QAAI,MAAAH,SAAA,SAAAA,EAAEI,e,CAExB,GAAIf,KAAKM,OAAS,QAAS,EACzBU,GAAAC,EAAAjB,KAAKa,aAAS,MAAAI,SAAA,SAAAA,EAAEH,QAAI,MAAAE,SAAA,SAAAA,EAAEE,O,GAS1B,mBAAAC,CAAoBhB,GAClBH,KAAKG,QAAUA,EACfH,KAAKI,SAAWD,C,CAIlB,oBAAAiB,CAAqBhB,GACnB,GAAIJ,KAAKG,QAAS,CAChBH,KAAKI,SAAWJ,KAAKG,O,KAChB,CACLH,KAAKI,SAAWA,C,EAQpB,iBAAAiB,GACE,GAAIrB,KAAKG,QAAS,CAChBH,KAAKI,SAAWJ,KAAKG,O,EAQzB,MAAAmB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,SACLpB,KAAMN,KAAKM,KACXqB,SAAS,IACTvB,SAAUJ,KAAKI,SAAW,KAAOwB,UACjCC,MAAOC,EACL,OACA,QAAQ9B,KAAKC,OACb,YAAYD,KAAKE,WACjBF,KAAKG,SAAW,UAChB,SAASH,KAAKO,SAEhBwB,QAAS/B,KAAKQ,aAEbR,KAAKG,SAAWoB,EAAA,aAAAE,IAAA,2CAAWxB,KAAMD,KAAKC,QAErCD,KAAKG,SAAWoB,EAAA,WAAAE,IAAA,2CAASO,KAAMhC,KAAKgC,KAAM/B,KAAMD,KAAKC,OAEvDsB,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

package/dist/native/{p-7b2d8b8c.entry.js → p-b902c7c0.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as o,h as t,a as n,g as i}from"./p-b4aea326.js";import{c as r}from"./p-8a1a6e56.js";import{v as a}from"./p-f5ff676c.js";const l='nv-fieldtoggle{display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-fieldtoggle:not([disabled],[readonly]) input,nv-fieldtoggle:not([disabled],[readonly]) label{cursor:pointer}nv-fieldtoggle.label-placement-before{flex-direction:row-reverse}nv-fieldtoggle[disabled]{opacity:0.5}nv-fieldtoggle label{align-self:stretch;color:var(--components-form-text-label-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fieldtoggle .input-container{position:relative;color:var(--components-form-shape-foreground-default)}nv-fieldtoggle .input-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--components-form-shape-foreground-disabled)}nv-fieldtoggle .input-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-toggle-width);height:var(--form-toggle-height);flex-direction:column;align-items:flex-start;border-radius:var(--form-toggle-radius);border-width:var(--form-toggle-border-width);border-style:solid;border-color:var(--components-form-field-border-default);background:var(--components-form-field-background-default)}nv-fieldtoggle .input-container input[type=checkbox]::after{content:"";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-form-shape-foreground-switch-dot);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:25%;transform:translate(-50%, -50%)}nv-fieldtoggle .input-container input[type=checkbox]:hover{border-color:var(--components-form-field-border-hover)}nv-fieldtoggle .input-container input[type=checkbox]:focus{border-color:var(--components-form-field-border-default)}nv-fieldtoggle .input-container input[type=checkbox]:focus,nv-fieldtoggle .input-container input[type=checkbox]:focus-within{outline:none}nv-fieldtoggle .input-container input[type=checkbox]:focus-visible,nv-fieldtoggle .input-container input[type=checkbox]:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-fieldtoggle .input-container input[type=checkbox]:checked{background:var(--components-form-field-background-checked);border-color:var(--components-form-field-background-checked)}nv-fieldtoggle .input-container input[type=checkbox]:checked::after{content:"";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-form-shape-foreground-default);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:75%;transform:translate(-50%, -50%)}nv-fieldtoggle .input-container input[type=checkbox]:checked:focus{background:var(--components-form-field-background-checked);border-color:var(--components-form-field-border-focus)}nv-fieldtoggle .input-container input[type=checkbox]:disabled:not([readonly]){box-shadow:unset;background:var(--components-form-field-background-disabled);border-color:var(--components-form-field-border-default)}nv-fieldtoggle .input-container input[type=checkbox]:disabled:not([readonly]):checked::after{background-color:var(--components-form-shape-foreground-disabled)}nv-fieldtoggle .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:450;line-height:var(--form-description-line-height)}nv-fieldtoggle .text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}';const d=l;const c=class{constructor(t){e(this,t);this.checkedChanged=o(this,"checkedChanged",7);this.inputId=a();this.name=undefined;this.value=undefined;this.label=undefined;this.labelPlacement=undefined;this.hideLabel=false;this.description=undefined;this.checked=false;this.disabled=false;this.readonly=false}onCheckedChanged(e){this.checkedChanged.emit(e)}handleChange(e){const o=e.target;if(o.type==="checkbox"&&o.id===this.inputId){if(this.readonly||this.disabled){e.preventDefault();return}this.checked=o.checked}}render(){return t(n,{key:"9dd7235a2967fd24e60fb5989c84b2be30ff19dc",class:r(this.labelPlacement==="before"&&"label-placement-before")},t("div",{key:"b32928b8385c42117ab91e58d55274bfc20d9338",class:"input-container"},t("input",{key:"03117b5baaece28cbc0ab830e36021801516b008",type:"checkbox",id:this.inputId,name:this.name,autocomplete:"off",value:this.value,checked:Boolean(this.checked),disabled:this.disabled||this.readonly,readonly:this.readonly})),t("div",{key:"b4224a117f2cc056f66006ba2af09c59670ac886",class:"text-container"},(this.label||this.el.querySelector('[slot="label"]'))&&t("label",{key:"6e3538e9f9b78ce3b22e77deca8edff11e897ad3",htmlFor:this.inputId,class:r(this.hideLabel&&"visually-hidden")},t("slot",{key:"33ba20eab20bdc5d91c5aba1d9c5a417ef057872",name:"label"},this.label)),(this.description||this.el.querySelector('[slot="description"]'))&&t("div",{key:"d5a04053715549f6beb3153d3ebc90316f84838d",class:"description"},t("slot",{key:"784d242b1e1b0d53a414bae40339e1ae026240f3",name:"description"},this.description))))}get el(){return i(this)}static get watchers(){return{checked:["onCheckedChanged"]}}};c.style=d;export{c as nv_fieldtoggle};
-//# sourceMappingURL=p-7b2d8b8c.entry.js.map
+import{r as e,c as o,h as t,a as n,g as i}from"./p-9b093b92.js";import{c as r}from"./p-8a1a6e56.js";import{v as a}from"./p-f5ff676c.js";const l='nv-fieldtoggle{display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-fieldtoggle:not([disabled],[readonly]) input,nv-fieldtoggle:not([disabled],[readonly]) label{cursor:pointer}nv-fieldtoggle.label-placement-before{flex-direction:row-reverse}nv-fieldtoggle[disabled]{opacity:0.5}nv-fieldtoggle label{align-self:stretch;color:var(--components-form-text-label-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fieldtoggle .input-container{position:relative;color:var(--components-form-shape-foreground-default)}nv-fieldtoggle .input-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--components-form-shape-foreground-disabled)}nv-fieldtoggle .input-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-toggle-width);height:var(--form-toggle-height);flex-direction:column;align-items:flex-start;border-radius:var(--form-toggle-radius);border-width:var(--form-toggle-border-width);border-style:solid;border-color:var(--components-form-field-border-default);background:var(--components-form-field-background-default)}nv-fieldtoggle .input-container input[type=checkbox]::after{content:"";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-form-shape-foreground-switch-dot);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:25%;transform:translate(-50%, -50%)}nv-fieldtoggle .input-container input[type=checkbox]:hover{border-color:var(--components-form-field-border-hover)}nv-fieldtoggle .input-container input[type=checkbox]:focus{border-color:var(--components-form-field-border-default)}nv-fieldtoggle .input-container input[type=checkbox]:focus,nv-fieldtoggle .input-container input[type=checkbox]:focus-within{outline:none}nv-fieldtoggle .input-container input[type=checkbox]:focus-visible,nv-fieldtoggle .input-container input[type=checkbox]:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-fieldtoggle .input-container input[type=checkbox]:checked{background:var(--components-form-field-background-checked);border-color:var(--components-form-field-background-checked)}nv-fieldtoggle .input-container input[type=checkbox]:checked::after{content:"";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-form-shape-foreground-default);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:75%;transform:translate(-50%, -50%)}nv-fieldtoggle .input-container input[type=checkbox]:checked:focus{background:var(--components-form-field-background-checked);border-color:var(--components-form-field-border-focus)}nv-fieldtoggle .input-container input[type=checkbox]:disabled:not([readonly]){box-shadow:unset;background:var(--components-form-field-background-disabled);border-color:var(--components-form-field-border-default)}nv-fieldtoggle .input-container input[type=checkbox]:disabled:not([readonly]):checked::after{background-color:var(--components-form-shape-foreground-disabled)}nv-fieldtoggle .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:450;line-height:var(--form-description-line-height)}nv-fieldtoggle .text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}';const c=l;const d=class{constructor(t){e(this,t);this.checkedChanged=o(this,"checkedChanged",7);this.inputId=a();this.hideLabel=false;this.checked=false;this.disabled=false;this.readonly=false}onCheckedChanged(e){this.checkedChanged.emit(e)}handleChange(e){const o=e.target;if(o.type==="checkbox"&&o.id===this.inputId){if(this.readonly||this.disabled){e.preventDefault();return}this.checked=o.checked}}render(){return t(n,{key:"ed329e4f412fe907483baaba3c41601df1b4d42b",class:r(this.labelPlacement==="before"&&"label-placement-before")},t("div",{key:"007e241bbcefa7f1cab09beef0f14a5617bcffb5",class:"input-container"},t("input",{key:"95d37868390b5f562b90bc1f9160c8545ca1d99c",type:"checkbox",id:this.inputId,name:this.name,autocomplete:"off",value:this.value,checked:Boolean(this.checked),disabled:this.disabled||this.readonly,readonly:this.readonly})),t("div",{key:"bdd17bd03068f5da78a1a8c69fe672d77bd19c5b",class:"text-container"},(this.label||this.el.querySelector('[slot="label"]'))&&t("label",{key:"24809a89cb508d48a3c67dd495481ea06f287bfd",htmlFor:this.inputId,class:r(this.hideLabel&&"visually-hidden")},t("slot",{key:"a8babfbc290a8f9f3da56145246ade9d1ad6f775",name:"label"},this.label)),(this.description||this.el.querySelector('[slot="description"]'))&&t("div",{key:"075a518f042244c5823bd1bee758462ea111f1cd",class:"description"},t("slot",{key:"c3ac97a983611c0568c0e0753f3c57870fb61cb1",name:"description"},this.description))))}get el(){return i(this)}static get watchers(){return{checked:["onCheckedChanged"]}}};d.style=c;export{d as nv_fieldtoggle};
+//# sourceMappingURL=p-b902c7c0.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["nvFieldtoggleCss","NvFieldtoggleStyle0","NvFieldtoggle","constructor","hostRef","this","inputId","uuidv4","hideLabel","checked","disabled","readonly","onCheckedChanged","checkedChanged","emit","handleChange","event","target","type","id","preventDefault","render","h","Host","key","class","clsx","labelPlacement","name","autocomplete","value","Boolean","label","el","querySelector","htmlFor","description"],"sources":["src/components/nv-fieldtoggle/nv-fieldtoggle.scss?tag=nv-fieldtoggle","src/components/nv-fieldtoggle/nv-fieldtoggle.tsx"],"sourcesContent":["@import \"../../styles/focus-ring\";\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: 500;\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: 450;\n  line-height: var(--form-description-line-height);\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(--components-form-shape-foreground-default);\n\n  &:has(input[type=\"checkbox\"]:disabled:not([readonly])) {\n    color: var(--components-form-shape-foreground-disabled);\n  }\n}\n\n@mixin input-styles() {\n  appearance: none;\n  position: relative;\n  display: flex;\n  width: var(--form-toggle-width);\n  height: var(--form-toggle-height);\n  flex-direction: column;\n  align-items: flex-start;\n  border-radius: var(--form-toggle-radius);\n  border-width: var(--form-toggle-border-width);\n  border-style: solid;\n  border-color: var(--components-form-field-border-default);\n  background: var(--components-form-field-background-default);\n\n  &::after {\n    content: '';\n    display: block;\n    width: var(--form-toggle-switch-dot-default);\n    height: var(--form-toggle-switch-dot-default);\n    background-color: var(--components-form-shape-foreground-switch-dot);\n    border-radius: var(--radius-rounded-full);\n    position: absolute;\n    top: 50%;\n    left: 25%;\n    transform: translate(-50%, -50%);\n  }\n\n  &:hover {\n    border-color: var(--components-form-field-border-hover);\n  }\n\n  &:focus {\n    border-color: var(--components-form-field-border-default);\n  }\n\n  @include focus-ring();\n\n  &:checked {\n    background: var(--components-form-field-background-checked);\n    border-color: var(--components-form-field-background-checked);\n\n    &::after {\n      content: '';\n      display: block;\n      width: var(--form-toggle-switch-dot-default);\n      height: var(--form-toggle-switch-dot-default);\n      background-color: var(--components-form-shape-foreground-default);\n      border-radius: var(--radius-rounded-full);\n      position: absolute;\n      top: 50%;\n      left: 75%;\n      transform: translate(-50%, -50%);\n    }\n\n    &:focus {\n      background: var(--components-form-field-background-checked);\n      border-color: var(--components-form-field-border-focus);\n    }\n  }\n\n  &:disabled:not([readonly]) {\n    box-shadow: unset;\n    background: var(--components-form-field-background-disabled);\n    border-color: var(--components-form-field-border-default);\n\n    &:checked {\n      &::after {\n        background-color: var(--components-form-shape-foreground-disabled);\n      }\n    }\n  }\n}\n\nnv-fieldtoggle {\n  @include root-styles();\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  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\n  .description {\n    @include 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 */\n@Component({\n  tag: 'nv-fieldtoggle',\n  styleUrl: 'nv-fieldtoggle.scss',\n  shadow: false,\n})\nexport class NvFieldtoggle {\n  @Element() el!: HTMLNvFieldtoggleElement;\n\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()\n  readonly inputId: string = uuidv4();\n\n  /**\n   * The name attribute for the toggle input, used to reference the form data\n   * after submission.\n   */\n  @Prop()\n  readonly name?: string;\n\n  /**\n   * The value attribute of the toggle input, representing the value sent on\n   * form submission when the toggle is checked.\n   */\n  @Prop()\n  readonly value?: string;\n\n  /** The label displayed next to the toggle.*/\n  @Prop()\n  readonly label?: string;\n\n  /**\n   * Determines the position of the label relative to the toggle, either\n   * 'start' (before) or 'end' (after).\n   */\n  @Prop({ reflect: true })\n  readonly labelPlacement: `${FieldLabelPlacement}`;\n\n  /**\n   * Hides the label visually while still keeping it available for screen\n   * readers.\n   */\n  @Prop()\n  readonly hideLabel: boolean = false;\n\n  /**\n   * A description providing additional context or information about the\n   * toggle.\n   */\n  @Prop({ reflect: true })\n  readonly description?: string;\n\n  /** Indicates whether the toggle is checked or not. */\n  @Prop({ reflect: true, mutable: true })\n  checked: boolean = false;\n\n  /** Disables the toggle, preventing user interaction. */\n  @Prop()\n  readonly disabled: boolean = false;\n\n  /**\n   * Sets the toggle to read-only, preventing user changes but still allowing\n   * focus and selection of text.\n   */\n  @Prop()\n  readonly readonly: 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 toggle input element and updates the checked state.\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 === 'checkbox' && target.id === this.inputId) {\n      if (this.readonly || this.disabled) {\n        event.preventDefault();\n        return;\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        )}\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}\n          />\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        </div>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"mappings":"wIAAA,MAAMA,EAAmB,0kHACzB,MAAAC,EAAeD,E,MCwBFE,EAAa,MAL1B,WAAAC,CAAAC,G,yDAkBWC,KAAAC,QAAkBC,IAgClBF,KAAAG,UAAqB,MAW9BH,KAAAI,QAAmB,MAIVJ,KAAAK,SAAoB,MAOpBL,KAAAM,SAAoB,K,CAsB7B,gBAAAC,CAAiBH,GACfJ,KAAKQ,eAAeC,KAAKL,E,CAS3B,YAAAM,CAAaC,GACX,MAAMC,EAASD,EAAMC,OAErB,GAAIA,EAAOC,OAAS,YAAcD,EAAOE,KAAOd,KAAKC,QAAS,CAC5D,GAAID,KAAKM,UAAYN,KAAKK,SAAU,CAClCM,EAAMI,iBACN,M,CAGFf,KAAKI,QAAUQ,EAAOR,O,EAQ1B,MAAAY,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAOC,EACLrB,KAAKsB,iBAAmB,UAAY,2BAGtCL,EAAA,OAAAE,IAAA,2CAAKC,MAAM,mBACTH,EAAA,SAAAE,IAAA,2CACEN,KAAK,WACLC,GAAId,KAAKC,QACTsB,KAAMvB,KAAKuB,KACXC,aAAa,MACbC,MAAOzB,KAAKyB,MACZrB,QAASsB,QAAQ1B,KAAKI,SACtBC,SAAUL,KAAKK,UAAYL,KAAKM,SAChCA,SAAUN,KAAKM,YAInBW,EAAA,OAAAE,IAAA,2CAAKC,MAAM,mBACPpB,KAAK2B,OAAS3B,KAAK4B,GAAGC,cAAc,oBACpCZ,EAAA,SAAAE,IAAA,2CACEW,QAAS9B,KAAKC,QACdmB,MAAOC,EAAKrB,KAAKG,WAAa,oBAE9Bc,EAAA,QAAAE,IAAA,2CAAMI,KAAK,SAASvB,KAAK2B,SAI3B3B,KAAK+B,aACL/B,KAAK4B,GAAGC,cAAc,0BACtBZ,EAAA,OAAAE,IAAA,2CAAKC,MAAM,eACTH,EAAA,QAAAE,IAAA,2CAAMI,KAAK,eAAevB,KAAK+B,e","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as a,h as e,a as c}from"./p-9b093b92.js";const b="";const s=b;const t=class{constructor(e){a(this,e)}render(){return e(c,{key:"57d72ca018eb61884bcc91df678d8c97c44463b5"},e("thead",{key:"30a4ab6720e842aa5fcbebe66f3de4a7fa1aa9e1"},e("slot",{key:"03ac5c8da1260aa29acb359e2b6fe53fb36bfac4"})))}};t.style=s;export{t as nv_tablehead};
+//# sourceMappingURL=p-bbc45099.entry.js.map

package/dist/native/{p-12eaebd6.entry.js → p-c59e3500.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as r,h as o,a as d,g as i}from"./p-b4aea326.js";import{c as a}from"./p-8a1a6e56.js";import{v as n}from"./p-f5ff676c.js";const t='nv-fieldradio{--nv-fieldradio-border-default:var(--components-form-field-border-default);--nv-fieldradio-border-hover:var(--components-form-field-border-hover);--nv-fieldradio-border-focus:var(--components-form-field-border-default);--nv-fieldradio-background-default:var(--components-form-field-background-default);--nv-fieldradio-background-checked:var(--components-form-field-background-checked);--nv-fieldradio-background-disabled:var(--components-form-field-background-disabled);--nv-fieldradio-focus-box-shadow:var(--color-focus-brand);--nv-fieldradio-dot-color-checked:var(--components-form-shape-foreground-default);--nv-fieldradio-dot-color-disabled:var(--components-form-shape-foreground-disabled);--nv-fieldradio-outline-color:var(--color-focus-brand);display:inline-flex;align-items:flex-start;gap:var(--form-gap-x)}nv-fieldradio:not([disabled]) input,nv-fieldradio:not([disabled]) label,nv-fieldradio[disabled=false] input,nv-fieldradio[disabled=false] label{cursor:pointer}nv-fieldradio.error{--nv-fieldradio-border-default:var(--components-form-field-border-error);--nv-fieldradio-border-hover:var(--nv-fieldradio-border-default);--nv-fieldradio-border-focus:var(--components-form-field-border-error);--nv-fieldradio-background-checked:var(--components-form-field-background-error);--nv-fieldradio-focus-box-shadow:var(--color-focus-destructive);--nv-fieldradio-dot-color-checked:var(--components-form-shape-foreground-default);--nv-fieldradio-dot-color-disabled:var(--components-form-field-border-error);--nv-fieldradio-outline-color:var(--color-focus-destructive)}nv-fieldradio.label-placement-before{flex-direction:row-reverse}nv-fieldradio[disabled]{opacity:0.5}nv-fieldradio label{align-self:stretch;color:var(--components-form-text-label-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--form-label-font-weight);line-height:var(--form-label-line-height)}nv-fieldradio input[type=radio]{appearance:none;position:relative;display:flex;width:var(--form-radio-size);height:var(--form-radio-size);padding:var(--form-radio-inner-circle-padding);flex-direction:column;align-items:flex-start;border-radius:var(--radius-rounded-full);border-width:var(--form-radio-border-width);border-style:solid;border-color:var(--nv-fieldradio-border-default);background:var(--nv-fieldradio-background-default)}nv-fieldradio input[type=radio]:hover{border-color:var(--nv-fieldradio-border-hover)}nv-fieldradio input[type=radio]:focus{border-color:var(--nv-fieldradio-border-focus)}nv-fieldradio input[type=radio]:focus,nv-fieldradio input[type=radio]:focus-within{outline:none}nv-fieldradio input[type=radio]:focus-visible,nv-fieldradio input[type=radio]:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--nv-fieldradio-outline-color);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-fieldradio input[type=radio]:checked{background:var(--nv-fieldradio-background-checked);border-color:var(--nv-fieldradio-background-checked)}nv-fieldradio input[type=radio]:checked:hover,nv-fieldradio input[type=radio]:checked:focus{border-color:var(--nv-fieldradio-background-checked);background:var(--nv-fieldradio-background-checked)}nv-fieldradio input[type=radio]:checked::before{content:"";position:absolute;top:50%;right:50%;transform:translate(50%, -50%);left:0;width:var(--form-radio-inner-circle-size);height:var(--form-radio-inner-circle-size);flex-shrink:0;border-radius:var(--radius-rounded-full);background:var(--nv-fieldradio-dot-color-checked)}nv-fieldradio input[type=radio]:disabled{border-radius:var(--radius-rounded-full);border-width:var(--form-radio-border-width);border-style:solid;border-color:var(--nv-fieldradio-border-default);background:var(--nv-fieldradio-background-disabled)}nv-fieldradio input[type=radio]:disabled:checked::before{background:var(--nv-fieldradio-dot-color-disabled)}nv-fieldradio input[type=radio]:disabled:hover{border-color:var(--nv-fieldradio-border-default);background:var(--nv-fieldradio-background-disabled)}nv-fieldradio .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:var(--form-description-font-weight);line-height:var(--form-description-line-height)}nv-fieldradio .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:var(--form-description-font-weight);line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fieldradio .text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}';const l=t;const f=class{constructor(o){e(this,o);this.checkedChanged=r(this,"checkedChanged",7);this.message=undefined;this.labelBefore=false;this.inputId=n();this.name=undefined;this.value=undefined;this.label=undefined;this.labelPlacement=undefined;this.description=undefined;this.error=false;this.errorDescription=undefined;this.checked=false;this.disabled=false}componentWillRender(){if(this.message){this.description=this.message}if(this.labelBefore){this.labelPlacement="before"}}handleCheckedChange(e){this.checkedChanged.emit(e)}handleChange(e){const r=e.target;if((r===null||r===void 0?void 0:r.type)==="radio"){Array.from(document.getElementsByTagName("nv-fieldradio")).forEach((e=>{if(e.name===this.name){e.checked=false}}));this.checked=r.checked}}render(){return o(d,{key:"45884696429c5f9232102f1aee32bd1930085faf",class:a(this.labelPlacement==="before"&&"label-placement-before",this.error&&"error")},o("input",{key:"ef66e9c39bf0c9f1740b055e77a9bfefb3d6135c",type:"radio",id:this.inputId,name:this.name,autocomplete:"off",value:this.value,checked:this.checked,disabled:this.disabled}),o("div",{key:"972f6f0a53bcfd1ee468195227397011b34f4ca8",class:"text-container"},(this.label||this.el.querySelector('[slot="label"]'))&&o("label",{key:"8713b8a6433da65c8b84a323baebdc643ddd605a",htmlFor:this.inputId},o("slot",{key:"bc1b2f7e682242d0da1be9e1c9d385e844568d62",name:"label"},this.label)),(this.description||this.el.querySelector('[slot="description"]'))&&o("div",{key:"c67519cdb09a9a5414a8d37b7013730e32efc700",class:"description"},o("slot",{key:"5058c3dea12bcb2d00cd55219f4a823d50e55c93",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&o("div",{key:"cb264c373040e87183e613bd3d434d3c661f47e7",hidden:!this.error,class:"error-description"},o("slot",{key:"91d8c2e24647ffbce8d6282a2fe1f2f366ef8712",name:"error-description"},this.errorDescription))))}static get formAssociated(){return true}get el(){return i(this)}static get watchers(){return{checked:["handleCheckedChange"]}}};f.style=l;export{f as nv_fieldradio};
-//# sourceMappingURL=p-12eaebd6.entry.js.map
+import{r as e,c as r,h as o,a as d,g as i}from"./p-9b093b92.js";import{c as a}from"./p-8a1a6e56.js";import{v as n}from"./p-f5ff676c.js";const t='nv-fieldradio{--nv-fieldradio-border-default:var(--components-form-field-border-default);--nv-fieldradio-border-hover:var(--components-form-field-border-hover);--nv-fieldradio-border-focus:var(--components-form-field-border-default);--nv-fieldradio-background-default:var(--components-form-field-background-default);--nv-fieldradio-background-checked:var(--components-form-field-background-checked);--nv-fieldradio-background-disabled:var(--components-form-field-background-disabled);--nv-fieldradio-focus-box-shadow:var(--color-focus-brand);--nv-fieldradio-dot-color-checked:var(--components-form-shape-foreground-default);--nv-fieldradio-dot-color-disabled:var(--components-form-shape-foreground-disabled);--nv-fieldradio-outline-color:var(--color-focus-brand);display:inline-flex;align-items:flex-start;gap:var(--form-gap-x)}nv-fieldradio:not([disabled]) input,nv-fieldradio:not([disabled]) label,nv-fieldradio[disabled=false] input,nv-fieldradio[disabled=false] label{cursor:pointer}nv-fieldradio.error{--nv-fieldradio-border-default:var(--components-form-field-border-error);--nv-fieldradio-border-hover:var(--nv-fieldradio-border-default);--nv-fieldradio-border-focus:var(--components-form-field-border-error);--nv-fieldradio-background-checked:var(--components-form-field-background-error);--nv-fieldradio-focus-box-shadow:var(--color-focus-destructive);--nv-fieldradio-dot-color-checked:var(--components-form-shape-foreground-default);--nv-fieldradio-dot-color-disabled:var(--components-form-field-border-error);--nv-fieldradio-outline-color:var(--color-focus-destructive)}nv-fieldradio.label-placement-before{flex-direction:row-reverse}nv-fieldradio[disabled]{opacity:0.5}nv-fieldradio label{align-self:stretch;color:var(--components-form-text-label-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--form-label-font-weight);line-height:var(--form-label-line-height)}nv-fieldradio input[type=radio]{appearance:none;position:relative;display:flex;width:var(--form-radio-size);height:var(--form-radio-size);padding:var(--form-radio-inner-circle-padding);flex-direction:column;align-items:flex-start;border-radius:var(--radius-rounded-full);border-width:var(--form-radio-border-width);border-style:solid;border-color:var(--nv-fieldradio-border-default);background:var(--nv-fieldradio-background-default)}nv-fieldradio input[type=radio]:hover{border-color:var(--nv-fieldradio-border-hover)}nv-fieldradio input[type=radio]:focus{border-color:var(--nv-fieldradio-border-focus)}nv-fieldradio input[type=radio]:focus,nv-fieldradio input[type=radio]:focus-within{outline:none}nv-fieldradio input[type=radio]:focus-visible,nv-fieldradio input[type=radio]:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--nv-fieldradio-outline-color);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-fieldradio input[type=radio]:checked{background:var(--nv-fieldradio-background-checked);border-color:var(--nv-fieldradio-background-checked)}nv-fieldradio input[type=radio]:checked:hover,nv-fieldradio input[type=radio]:checked:focus{border-color:var(--nv-fieldradio-background-checked);background:var(--nv-fieldradio-background-checked)}nv-fieldradio input[type=radio]:checked::before{content:"";position:absolute;top:50%;right:50%;transform:translate(50%, -50%);left:0;width:var(--form-radio-inner-circle-size);height:var(--form-radio-inner-circle-size);flex-shrink:0;border-radius:var(--radius-rounded-full);background:var(--nv-fieldradio-dot-color-checked)}nv-fieldradio input[type=radio]:disabled{border-radius:var(--radius-rounded-full);border-width:var(--form-radio-border-width);border-style:solid;border-color:var(--nv-fieldradio-border-default);background:var(--nv-fieldradio-background-disabled)}nv-fieldradio input[type=radio]:disabled:checked::before{background:var(--nv-fieldradio-dot-color-disabled)}nv-fieldradio input[type=radio]:disabled:hover{border-color:var(--nv-fieldradio-border-default);background:var(--nv-fieldradio-background-disabled)}nv-fieldradio .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:var(--form-description-font-weight);line-height:var(--form-description-line-height)}nv-fieldradio .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:var(--form-description-font-weight);line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fieldradio .text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}';const l=t;const f=class{constructor(o){e(this,o);this.checkedChanged=r(this,"checkedChanged",7);this.labelBefore=false;this.inputId=n();this.error=false;this.checked=false;this.disabled=false}componentWillRender(){if(this.message){this.description=this.message}if(this.labelBefore){this.labelPlacement="before"}}handleCheckedChange(e){this.checkedChanged.emit(e)}handleChange(e){const r=e.target;if((r===null||r===void 0?void 0:r.type)==="radio"){Array.from(document.getElementsByTagName("nv-fieldradio")).forEach((e=>{if(e.name===this.name){e.checked=false}}));this.checked=r.checked}}render(){return o(d,{key:"c180e5204343412df6b2539cd46d7bd53d2d7f19",class:a(this.labelPlacement==="before"&&"label-placement-before",this.error&&"error")},o("input",{key:"778a3ddc598a81df45f6eecda4660f95af48795a",type:"radio",id:this.inputId,name:this.name,autocomplete:"off",value:this.value,checked:this.checked,disabled:this.disabled}),o("div",{key:"82e3e9ed3cdcd5918f824e5956e720ba04ec3160",class:"text-container"},(this.label||this.el.querySelector('[slot="label"]'))&&o("label",{key:"b906d712188ef0ba06c177021b81b9b8132e2d58",htmlFor:this.inputId},o("slot",{key:"2c81a91a98d2d4739d6b912a0018826830b17c7f",name:"label"},this.label)),(this.description||this.el.querySelector('[slot="description"]'))&&o("div",{key:"1caa426f06d0d5fcb9fe59e58be7000c854fceb9",class:"description"},o("slot",{key:"ba454a12b8f535db62945a145c665f189624dc61",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&o("div",{key:"bf7a31b55f2716cb6436b595d0d96a1974c9c313",hidden:!this.error,class:"error-description"},o("slot",{key:"9a3b54c1e06d7e42eee9c4ca8e213270b66306b6",name:"error-description"},this.errorDescription))))}static get formAssociated(){return true}get el(){return i(this)}static get watchers(){return{checked:["handleCheckedChange"]}}};f.style=l;export{f as nv_fieldradio};
+//# sourceMappingURL=p-c59e3500.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["nvFieldradioCss","NvFieldradioStyle0","NvFieldradio","constructor","hostRef","this","labelBefore","inputId","uuidv4","error","checked","disabled","componentWillRender","message","description","labelPlacement","handleCheckedChange","checkedChanged","emit","handleChange","event","target","type","Array","from","document","getElementsByTagName","forEach","element","name","render","h","Host","key","class","clsx","id","autocomplete","value","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  //#endregion RENDER\n}\n"],"mappings":"wIAAA,MAAMA,EAAkB,0rJACxB,MAAAC,EAAeD,E,MC0BFE,EAAY,MANzB,WAAAC,CAAAC,G,yDAwBWC,KAAAC,YAAuB,MAuBvBD,KAAAE,QAAkBC,IAiDlBH,KAAAI,MAAiB,MAc1BJ,KAAAK,QAAmB,MAMVL,KAAAM,SAAoB,K,CA1F7B,mBAAAC,GACE,GAAIP,KAAKQ,QAAS,CAChBR,KAAKS,YAAcT,KAAKQ,O,CAG1B,GAAIR,KAAKC,YAAa,CACpBD,KAAKU,eAAiB,Q,EA0G1B,mBAAAC,CAAoBN,GAClBL,KAAKY,eAAeC,KAAKR,E,CAS3B,YAAAS,CAAaC,GACX,MAAMC,EAASD,EAAMC,OAErB,IAAIA,IAAM,MAANA,SAAM,SAANA,EAAQC,QAAS,QAAS,CAC5BC,MAAMC,KAAKC,SAASC,qBAAqB,kBAAkBC,SACzDC,IACE,GAAIA,EAAQC,OAASxB,KAAKwB,KAAM,CAC9BD,EAAQlB,QAAU,K,KAKxBL,KAAKK,QAAUW,EAAOX,O,EAQ1B,MAAAoB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAOC,EACL9B,KAAKU,iBAAmB,UAAY,yBACpCV,KAAKI,OAAS,UAGhBsB,EAAA,SAAAE,IAAA,2CACEX,KAAK,QACLc,GAAI/B,KAAKE,QACTsB,KAAMxB,KAAKwB,KACXQ,aAAa,MACbC,MAAOjC,KAAKiC,MACZ5B,QAASL,KAAKK,QACdC,SAAUN,KAAKM,WAGjBoB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,mBACP7B,KAAKkC,OAASlC,KAAKmC,GAAGC,cAAc,oBACpCV,EAAA,SAAAE,IAAA,2CAAOS,QAASrC,KAAKE,SACnBwB,EAAA,QAAAE,IAAA,2CAAMJ,KAAK,SAASxB,KAAKkC,SAI3BlC,KAAKS,aACLT,KAAKmC,GAAGC,cAAc,0BACtBV,EAAA,OAAAE,IAAA,2CAAKC,MAAM,eACTH,EAAA,QAAAE,IAAA,2CAAMJ,KAAK,eAAexB,KAAKS,eAIjCT,KAAKsC,kBACLtC,KAAKmC,GAAGC,cAAc,gCACtBV,EAAA,OAAAE,IAAA,2CAAKW,QAASvC,KAAKI,MAAOyB,MAAM,qBAC9BH,EAAA,QAAAE,IAAA,2CAAMJ,KAAK,qBAAqBxB,KAAKsC,oB","ignoreList":[]}

package/dist/native/{p-305951e4.entry.js → p-d0f83d1f.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as r,h as i,a as o,g as t}from"./p-b4aea326.js";import{v as n}from"./p-f5ff676c.js";const d='nv-fieldtext{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box}nv-fieldtext[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldtext[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fieldtext[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fieldtext[required]:not([required=false]) label::after{content:"*";color:var(--components-form-text-required);font-weight:700}nv-fieldtext label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fieldtext .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldtext .input-wrapper .input-container{display:flex;flex-grow:1;padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);justify-content:center;align-items:center;gap:var(--form-field-gap);align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldtext .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldtext .input-wrapper .input-container:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldtext .input-wrapper .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldtext .input-wrapper .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldtext .input-wrapper .input-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height)}nv-fieldtext .input-wrapper .input-container input:focus{outline:none}nv-fieldtext .input-wrapper .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:"TT Norms Pro", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldtext .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldtext .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldtext .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}';const a=d;const l=class{constructor(i){e(this,i);this.valueChanged=r(this,"valueChanged",7);this.handleInput=e=>{const r=e.target;this.value=r.value;this.valueChanged.emit(r.value)};this.handleInputContainerClick=()=>{this.inputElement.focus()};this.message=undefined;this.validation=undefined;this.textInputType=undefined;this.inputId=n();this.label=undefined;this.description=undefined;this.placeholder=undefined;this.name=undefined;this.value=undefined;this.type="text";this.disabled=false;this.readonly=false;this.required=false;this.error=false;this.errorDescription=undefined;this.success=false;this.maxlength=undefined;this.minlength=undefined;this.pattern=undefined;this.autocomplete=undefined;this.multiple=false}componentWillRender(){if(this.textInputType){this.type=this.textInputType}if(this.message){this.description=this.message}if(this.validation){this.errorDescription=this.validation;this.error=true}}render(){return i(o,{key:"fea5a10f2f7a5144441333352a31d9f8b33e587a"},(this.label||this.el.querySelector('[slot="label"]'))&&i("label",{key:"96693bf825c79d480d7cc282aed3f71ae6e02018",htmlFor:this.inputId},i("slot",{key:"0948a3ee30db864bc7aa791c98d5288d0d83dbf8",name:"label"},this.label)),i("div",{key:"a4b3a6ebce307ae33141f9af58d5673da51ceb0a",class:"input-wrapper"},i("slot",{key:"2c37613f69908cbbd5904cd036a32a60cd208ea7",name:"before-input"}),i("div",{key:"2c0d2bb111c24642d2a4187a40ce33bf0cf9ae6f",class:"input-container",onClick:this.handleInputContainerClick},i("slot",{key:"eac9c83a80d5634220578c843c314d45fc76e387",name:"leading-input"}),i("input",{key:"f5d6f6727ce6e930870ec453c029290d99c648e5",id:this.inputId,ref:e=>this.inputElement=e,placeholder:this.placeholder,name:this.name,type:this.type,disabled:this.disabled,readOnly:this.readonly,required:this.required,maxlength:this.maxlength,minlength:this.minlength,pattern:this.pattern,autocomplete:this.autocomplete,multiple:this.multiple,value:this.value,onInput:this.handleInput}),this.error&&i("nv-icon",{key:"6cb3f531c998563acfaed207804c8eb76b2636ab",name:"alert-circle",class:"validation",size:"sm"}),this.success&&i("nv-icon",{key:"4e8605db4947208eeb6264206980d876824e81f2",name:"circle-check",class:"validation",size:"sm"})),i("slot",{key:"568578fbdd6c1c4d1682dea2bf2e8b28698b8fe5",name:"after-input"})),(this.description||this.el.querySelector('[slot="description"]'))&&i("div",{key:"2e742e69c44d5f7d2d03db6511c25386bc3bb4c7",class:"description"},i("slot",{key:"196020366f8b06a3b74508b633cc076e5252e754",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&i("div",{key:"55d162f9ac2a4767c9e65031a638db6fd9387cea",hidden:!this.error,class:"error-description"},i("slot",{key:"724b2782e068b0acca707671452da63f2bb525a0",name:"error-description"},this.errorDescription)))}static get formAssociated(){return true}get el(){return t(this)}};l.style=a;export{l as nv_fieldtext};
-//# sourceMappingURL=p-305951e4.entry.js.map
+import{r as e,c as r,h as o,a as t,g as i}from"./p-9b093b92.js";import{v as n}from"./p-f5ff676c.js";const d='nv-fieldtext{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box}nv-fieldtext[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldtext[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fieldtext[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fieldtext[required]:not([required=false]) label::after{content:"*";color:var(--components-form-text-required);font-weight:700}nv-fieldtext label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fieldtext .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldtext .input-wrapper .input-container{display:flex;flex-grow:1;padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);justify-content:center;align-items:center;gap:var(--form-field-gap);align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldtext .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldtext .input-wrapper .input-container:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldtext .input-wrapper .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldtext .input-wrapper .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldtext .input-wrapper .input-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height)}nv-fieldtext .input-wrapper .input-container input:focus{outline:none}nv-fieldtext .input-wrapper .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:"TT Norms Pro", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldtext .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldtext .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldtext .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}';const a=d;const l=class{constructor(o){e(this,o);this.valueChanged=r(this,"valueChanged",7);this.inputId=n();this.type="text";this.disabled=false;this.readonly=false;this.required=false;this.error=false;this.success=false;this.multiple=false;this.handleInput=e=>{const r=e.target;this.value=r.value;this.valueChanged.emit(r.value)};this.handleInputContainerClick=()=>{this.inputElement.focus()}}componentWillRender(){if(this.textInputType){this.type=this.textInputType}if(this.message){this.description=this.message}if(this.validation){this.errorDescription=this.validation;this.error=true}}render(){return o(t,{key:"515758fdb12fd8df454fb1d1113356b20fc1600b"},(this.label||this.el.querySelector('[slot="label"]'))&&o("label",{key:"fc24e70454352dfbf2df977f3287fba276c67cd1",htmlFor:this.inputId},o("slot",{key:"422c1c9bd42de0a998b8fc45e000c6a30d9a49f3",name:"label"},this.label)),o("div",{key:"b1ad372ab559d8245ce184c6abceafa468e449f0",class:"input-wrapper"},o("slot",{key:"e30624a7b5db6510db337a408bc069de37bbdbea",name:"before-input"}),o("div",{key:"13657397c9ac78dc97f9b94b8fdbd46126aceb16",class:"input-container",onClick:this.handleInputContainerClick},o("slot",{key:"edf3ee8cc920870aa907f1bbbeaca6cc8d38219c",name:"leading-input"}),o("input",{key:"afab7a4f2575e5e8a1e675aee9b21e90803db7a6",id:this.inputId,ref:e=>this.inputElement=e,placeholder:this.placeholder,name:this.name,type:this.type,disabled:this.disabled,readOnly:this.readonly,required:this.required,maxlength:this.maxlength,minlength:this.minlength,pattern:this.pattern,autocomplete:this.autocomplete,multiple:this.multiple,value:this.value,onInput:this.handleInput}),this.error&&o("nv-icon",{key:"8f9746766d8ca61d34671e7957b46a256a54e726",name:"alert-circle",class:"validation",size:"sm"}),this.success&&o("nv-icon",{key:"99abc485edd96a5d772f83339d02141896e99dd9",name:"circle-check",class:"validation",size:"sm"})),o("slot",{key:"4a0bc519345614a07968e3e7c5d25efc9ba40a02",name:"after-input"})),(this.description||this.el.querySelector('[slot="description"]'))&&o("div",{key:"d46001bfd7c7a485a9c4dcfa93beafb65dda7b5c",class:"description"},o("slot",{key:"7580203ed856a803d5dc6d264e10c72c3714de06",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&o("div",{key:"52ee56aa45e9876b075237f3ddb89618a34567e9",hidden:!this.error,class:"error-description"},o("slot",{key:"8ee7a5a7cbbcce96e8a94651c140e163a0545286",name:"error-description"},this.errorDescription)))}static get formAssociated(){return true}get el(){return i(this)}};l.style=a;export{l as nv_fieldtext};
+//# sourceMappingURL=p-d0f83d1f.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["nvFieldtextCss","NvFieldtextStyle0","NvFieldtext","constructor","hostRef","this","inputId","uuidv4","type","disabled","readonly","required","error","success","multiple","handleInput","event","input","target","value","valueChanged","emit","handleInputContainerClick","inputElement","focus","componentWillRender","textInputType","message","description","validation","errorDescription","render","h","Host","key","label","el","querySelector","htmlFor","name","class","onClick","id","ref","e","placeholder","readOnly","maxlength","minlength","pattern","autocomplete","onInput","size","hidden"],"sources":["src/components/nv-fieldtext/nv-fieldtext.scss?tag=nv-fieldtext","src/components/nv-fieldtext/nv-fieldtext.tsx"],"sourcesContent":["@import \"../../styles/form-field\";\n\nnv-fieldtext {\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      input {\n        @include form-field-input();\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} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { TextInputAutocomplete } from '../../utils/constants';\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@Component({\n  tag: 'nv-fieldtext',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'nv-fieldtext.scss',\n})\nexport class NvFieldtext {\n  @Element() el: HTMLNvFieldtextElement;\n  private inputElement!: HTMLInputElement;\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  /**\n   * Type of the input.\n   * @deprecated use type instead.\n   */\n  @Prop()\n  readonly textInputType: 'text' | 'tel' | 'email';\n\n  componentWillRender() {\n    if (this.textInputType) {\n      this.type = this.textInputType;\n    }\n\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   * input field. It’s a crucial element for making forms clear and\n   * user-friendly.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\n\n  /**\n   * Add helpful hints or extra information under the text input field. This is\n   * where you can clarify what users should enter or provide additional\n   * instructions, making the form easier to fill out correctly.\n   */\n  @Prop({ reflect: true, mutable: true })\n  description: string;\n\n  /**\n   * Display temporary text inside the input field to give users a hint about\n   * what to type. It’s a great way to provide examples or suggestions directly\n   * in the field before they start typing.\n   */\n  @Prop({ reflect: true })\n  readonly placeholder: string;\n\n  /**\n   * Defines the name attribute of the input field, which is crucial for form\n   * submission. This value is used as the key in the key-value pair sent to\n   * the server, representing the input’s data in form submissions. It should be\n   * unique within the form to avoid conflicts\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * 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 type prop lets you specify what kind of information the input field\n   * should accept. Choose 'text' for general words or sentences, 'tel' for\n   * phone numbers, or 'email' for email addresses. This makes sure users get\n   * the right keyboard and validation for what they need to enter.\n   */\n  @Prop({ reflect: true, mutable: true })\n  type: 'text' | 'tel' | 'email' = 'text';\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   * A description that appears when there is an error related to the textfield\n   * field.\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   * 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 after the form is submitted.\n   */\n  @Prop({ reflect: true })\n  readonly pattern: string;\n\n  /**\n   * The autocomplete prop helps users fill out the input field faster by\n   * suggesting entries they’ve used before, like their email or address.\n   * You can turn it on to make forms more convenient or off to ensure users\n   * always type in fresh data.\n   */\n  @Prop({ reflect: true })\n  readonly autocomplete: `${TextInputAutocomplete}`;\n\n  /**\n   * When used with the email input type, this prop enables the field to accept\n   * multiple email addresses. Users can enter several addresses, separating\n   * each one with a comma, allowing the form to handle multiple recipients.\n   */\n  @Prop({ reflect: true })\n  readonly multiple: boolean = false;\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  /**\n   * Handles the input event on the input element.\n   * Emits the inputChanged event with the new value.\n   * @param {Event} event - Event object of the input event.\n   */\n  private handleInput = (event: Event) => {\n    const input = event.target as HTMLInputElement;\n    this.value = input.value;\n    this.valueChanged.emit(input.value);\n  };\n\n  /**\n   * Handles focus when the input container is clicked.\n   */\n  private handleInputContainerClick = () => {\n    this.inputElement.focus();\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              placeholder={this.placeholder}\n              name={this.name}\n              type={this.type}\n              disabled={this.disabled}\n              readOnly={this.readonly}\n              required={this.required}\n              maxlength={this.maxlength}\n              minlength={this.minlength}\n              pattern={this.pattern}\n              autocomplete={this.autocomplete}\n              multiple={this.multiple}\n              value={this.value}\n              onInput={this.handleInput}\n            />\n\n            {this.error && (\n              <nv-icon name=\"alert-circle\" class=\"validation\" size=\"sm\" />\n            )}\n            {this.success && (\n              <nv-icon name=\"circle-check\" class=\"validation\" size=\"sm\" />\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  //#endregion RENDER\n}\n"],"mappings":"oGAAA,MAAMA,EAAiB,itJACvB,MAAAC,EAAeD,E,MC0BFE,EAAW,MANxB,WAAAC,CAAAC,G,qDA4DWC,KAAAC,QAAkBC,IAkD3BF,KAAAG,KAAiC,OAQxBH,KAAAI,SAAoB,MAQpBJ,KAAAK,SAAoB,MAOpBL,KAAAM,SAAoB,MAQ7BN,KAAAO,MAAiB,MAeRP,KAAAQ,QAAmB,MA0CnBR,KAAAS,SAAoB,MAsBrBT,KAAAU,YAAeC,IACrB,MAAMC,EAAQD,EAAME,OACpBb,KAAKc,MAAQF,EAAME,MACnBd,KAAKe,aAAaC,KAAKJ,EAAME,MAAM,EAM7Bd,KAAAiB,0BAA4B,KAClCjB,KAAKkB,aAAaC,OAAO,C,CApM3B,mBAAAC,GACE,GAAIpB,KAAKqB,cAAe,CACtBrB,KAAKG,KAAOH,KAAKqB,a,CAGnB,GAAIrB,KAAKsB,QAAS,CAChBtB,KAAKuB,YAAcvB,KAAKsB,O,CAG1B,GAAItB,KAAKwB,WAAY,CACnBxB,KAAKyB,iBAAmBzB,KAAKwB,WAC7BxB,KAAKO,MAAQ,I,EAgMjB,MAAAmB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,6CACD7B,KAAK8B,OAAS9B,KAAK+B,GAAGC,cAAc,oBACpCL,EAAA,SAAAE,IAAA,2CAAOI,QAASjC,KAAKC,SACnB0B,EAAA,QAAAE,IAAA,2CAAMK,KAAK,SAASlC,KAAK8B,QAI7BH,EAAA,OAAAE,IAAA,2CAAKM,MAAM,iBACTR,EAAA,QAAAE,IAAA,2CAAMK,KAAK,iBAEXP,EAAA,OAAAE,IAAA,2CAAKM,MAAM,kBAAkBC,QAASpC,KAAKiB,2BACzCU,EAAA,QAAAE,IAAA,2CAAMK,KAAK,kBAEXP,EAAA,SAAAE,IAAA,2CACEQ,GAAIrC,KAAKC,QACTqC,IAAKC,GAAMvC,KAAKkB,aAAeqB,EAC/BC,YAAaxC,KAAKwC,YAClBN,KAAMlC,KAAKkC,KACX/B,KAAMH,KAAKG,KACXC,SAAUJ,KAAKI,SACfqC,SAAUzC,KAAKK,SACfC,SAAUN,KAAKM,SACfoC,UAAW1C,KAAK0C,UAChBC,UAAW3C,KAAK2C,UAChBC,QAAS5C,KAAK4C,QACdC,aAAc7C,KAAK6C,aACnBpC,SAAUT,KAAKS,SACfK,MAAOd,KAAKc,MACZgC,QAAS9C,KAAKU,cAGfV,KAAKO,OACJoB,EAAA,WAAAE,IAAA,2CAASK,KAAK,eAAeC,MAAM,aAAaY,KAAK,OAEtD/C,KAAKQ,SACJmB,EAAA,WAAAE,IAAA,2CAASK,KAAK,eAAeC,MAAM,aAAaY,KAAK,QAIzDpB,EAAA,QAAAE,IAAA,2CAAMK,KAAK,kBAGXlC,KAAKuB,aACLvB,KAAK+B,GAAGC,cAAc,0BACtBL,EAAA,OAAAE,IAAA,2CAAKM,MAAM,eACTR,EAAA,QAAAE,IAAA,2CAAMK,KAAK,eAAelC,KAAKuB,eAIjCvB,KAAKyB,kBACLzB,KAAK+B,GAAGC,cAAc,gCACtBL,EAAA,OAAAE,IAAA,2CAAKmB,QAAShD,KAAKO,MAAO4B,MAAM,qBAC9BR,EAAA,QAAAE,IAAA,2CAAMK,KAAK,qBAAqBlC,KAAKyB,mB","ignoreList":[]}

package/dist/native/{p-7b3a4cbf.entry.js → p-e390557d.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as r,h as t,a,g as o}from"./p-b4aea326.js";import{c as i}from"./p-8a1a6e56.js";import{v as d}from"./p-f5ff676c.js";const n='nv-fieldtextarea{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box}nv-fieldtextarea[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldtextarea[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fieldtextarea[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fieldtextarea[required]:not([required=false]) label::after{content:"*";color:var(--components-form-text-required);font-weight:700}nv-fieldtextarea label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fieldtextarea .textarea-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldtextarea .textarea-wrapper .textarea-container{display:flex;flex-grow:1;padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);justify-content:center;align-items:center;gap:var(--form-field-gap);align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldtextarea .textarea-wrapper .textarea-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldtextarea .textarea-wrapper .textarea-container:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldtextarea .textarea-wrapper .textarea-container:has(textarea:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldtextarea .textarea-wrapper .textarea-container:has(textarea:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldtextarea .textarea-wrapper .textarea-container textarea{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height)}nv-fieldtextarea .textarea-wrapper .textarea-container textarea:focus{outline:none}nv-fieldtextarea .textarea-wrapper .textarea-container textarea::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:"TT Norms Pro", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldtextarea .textarea-wrapper .textarea-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldtextarea .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldtextarea .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}';const s=n;const l=class{constructor(t){e(this,t);this.valueChanged=r(this,"valueChanged",7);this.handleTextarea=e=>{const r=e.target;this.value=r.value;this.valueChanged.emit(r.value);if(this.autosize){this.adjustTextareaHeight()}};this.handleTextareaContainerClick=()=>{this.textareaElement.focus()};this.message=undefined;this.validation=undefined;this.textareaId=d();this.label=undefined;this.description=undefined;this.placeholder=undefined;this.name=undefined;this.value=undefined;this.disabled=false;this.readonly=false;this.required=false;this.error=false;this.errorDescription=undefined;this.success=false;this.maxlength=undefined;this.minlength=undefined;this.rows=3;this.resize="vertical";this.autosize=false}componentWillRender(){if(this.message){this.description=this.message}if(this.validation){this.errorDescription=this.validation;this.error=true}}rowsChanged(){if(this.autosize){this.adjustTextareaHeight()}}autosizeChanged(){var e;if(this.autosize){this.adjustTextareaHeight()}else{(e=this.textareaElement)===null||e===void 0?void 0:e.style.removeProperty("height")}}adjustTextareaHeight(){if(this.textareaElement&&this.autosize){this.textareaElement.style.height="auto";const e=window.getComputedStyle(this.textareaElement);const r=parseFloat(e.lineHeight);const t=parseFloat(e.paddingTop);const a=parseFloat(e.paddingBottom);const o=parseFloat(e.borderTopWidth);const i=parseFloat(e.borderBottomWidth);const d=r*this.rows+t+a+o+i;this.textareaElement.style.minHeight=`${d}px`;this.textareaElement.style.height=this.textareaElement.scrollHeight+"px"}}getResize(){if(this.resize==="none")return"resize-none";if(this.resize==="vertical")return"resize-y";if(this.resize==="horizontal")return"resize-x";if(this.resize==="both")return"resize";return"resize-none"}componentDidLoad(){if(this.autosize){this.adjustTextareaHeight()}}render(){return t(a,{key:"4c044ab568a758eda425570b32f4e62ac52fd0bd"},(this.label||this.el.querySelector('[slot="label"]'))&&t("label",{key:"b4ff190b325fe5bcb21692d9826edff006609a06",htmlFor:this.textareaId},t("slot",{key:"8d72187a69b9deb1d522ae0db6723280e953669d",name:"label"},this.label)),t("div",{key:"e3b749368b69e5b5cbd5c58a5466d454711dc2d4",class:"textarea-wrapper"},t("div",{key:"b2ab561a64505f9602e1c89a8ccf67087f4bc5f7",class:"textarea-container",onClick:this.handleTextareaContainerClick},t("textarea",{key:"aed794ee9e228e14d7ccb1baecdbb7468b1d09e1",id:this.textareaId,ref:e=>this.textareaElement=e,placeholder:this.placeholder,name:this.name,disabled:this.disabled,readOnly:this.readonly,required:this.required,maxlength:this.maxlength,minlength:this.minlength,autocomplete:"off",value:this.value,onInput:this.handleTextarea,rows:this.rows,class:i(this.getResize())}))),(this.description||this.el.querySelector('[slot="description"]'))&&t("div",{key:"d64a625c2b645d200248b21f84b29061ac88fd77",class:"description"},t("slot",{key:"eeb16d8bdb97aa59d55e4189eba6021fc8da9bf8",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&t("div",{key:"28c2378effdb7974df58d6be858f39aebf1841b8",hidden:!this.error,class:"error-description"},t("slot",{key:"8c3fa44d50353b8e3cf124483fd63896c39a89fb",name:"error-description"},this.errorDescription)))}static get formAssociated(){return true}get el(){return o(this)}static get watchers(){return{rows:["rowsChanged"],autosize:["autosizeChanged"]}}};l.style=s;export{l as nv_fieldtextarea};
-//# sourceMappingURL=p-7b3a4cbf.entry.js.map
+import{r as e,c as r,h as t,a,g as o}from"./p-9b093b92.js";import{c as i}from"./p-8a1a6e56.js";import{v as n}from"./p-f5ff676c.js";const d='nv-fieldtextarea{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box}nv-fieldtextarea[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldtextarea[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fieldtextarea[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fieldtextarea[required]:not([required=false]) label::after{content:"*";color:var(--components-form-text-required);font-weight:700}nv-fieldtextarea label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fieldtextarea .textarea-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldtextarea .textarea-wrapper .textarea-container{display:flex;flex-grow:1;padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);justify-content:center;align-items:center;gap:var(--form-field-gap);align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldtextarea .textarea-wrapper .textarea-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldtextarea .textarea-wrapper .textarea-container:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldtextarea .textarea-wrapper .textarea-container:has(textarea:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldtextarea .textarea-wrapper .textarea-container:has(textarea:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldtextarea .textarea-wrapper .textarea-container textarea{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height)}nv-fieldtextarea .textarea-wrapper .textarea-container textarea:focus{outline:none}nv-fieldtextarea .textarea-wrapper .textarea-container textarea::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:"TT Norms Pro", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldtextarea .textarea-wrapper .textarea-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldtextarea .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldtextarea .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}';const s=d;const l=class{constructor(t){e(this,t);this.valueChanged=r(this,"valueChanged",7);this.inputId=n();this.disabled=false;this.readonly=false;this.required=false;this.error=false;this.success=false;this.rows=3;this.resize="vertical";this.autosize=false;this.handleTextarea=e=>{const r=e.target;this.value=r.value;this.valueChanged.emit(r.value)};this.handleTextareaContainerClick=()=>{this.textareaElement.focus()}}componentWillRender(){if(this.message){this.description=this.message}if(this.validation){this.errorDescription=this.validation;this.error=true}}rowsChanged(){if(this.autosize){this.adjustTextareaHeight()}}autosizeChanged(){var e;if(this.autosize){this.adjustTextareaHeight()}else{(e=this.textareaElement)===null||e===void 0?void 0:e.style.removeProperty("height")}}handleValueChange(){if(this.autosize){this.adjustTextareaHeight()}}adjustTextareaHeight(){if(this.textareaElement&&this.autosize){requestAnimationFrame((()=>{requestAnimationFrame((()=>{this.textareaElement.style.height="auto";const e=window.getComputedStyle(this.textareaElement);const r=parseFloat(e.lineHeight);const t=parseFloat(e.paddingTop);const a=parseFloat(e.paddingBottom);const o=parseFloat(e.borderTopWidth);const i=parseFloat(e.borderBottomWidth);const n=r*this.rows+t+a+o+i;this.textareaElement.style.minHeight=`${n}px`;this.textareaElement.style.height=this.textareaElement.scrollHeight+"px"}))}))}}componentDidLoad(){if(this.autosize){this.adjustTextareaHeight()}}render(){return t(a,{key:"683a4bf119b61bd928fca68484adafc290242542"},(this.label||this.el.querySelector('[slot="label"]'))&&t("label",{key:"9ee48a620c7d7b5bf13181b4bf2cc013267a98cc",htmlFor:this.inputId},t("slot",{key:"28b618f5639aa84748319ee17e081e67730b85a5",name:"label"},this.label)),t("div",{key:"4086bb637f43dd332d078dc2edef046ab08f5bd6",class:"textarea-wrapper"},t("div",{key:"ee38cea5b14938865de2416d309952357527528c",class:"textarea-container",onClick:this.handleTextareaContainerClick},t("textarea",{key:"fe35a432fe0f737dc49bc37a2a2fdc56c95cef4d",id:this.inputId,ref:e=>this.textareaElement=e,placeholder:this.placeholder,name:this.name,disabled:this.disabled,readOnly:this.readonly,required:this.required,maxlength:this.maxlength,minlength:this.minlength,autocomplete:"off",value:this.value,onInput:this.handleTextarea,rows:this.rows,class:i(this.resize==="none"&&"resize-none",this.resize==="vertical"&&"resize-y",this.resize==="horizontal"&&"resize-x",this.resize==="both"&&"resize")}))),(this.description||this.el.querySelector('[slot="description"]'))&&t("div",{key:"e44539c99f51bf28978c87eea681286959570446",class:"description"},t("slot",{key:"1fc80c66fa30871035cc47e2de35fd7ce390f766",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&t("div",{key:"ecb5d0b11d5b9fb3175824abcc0bcc98433b2dbf",hidden:!this.error,class:"error-description"},t("slot",{key:"28063a5373418b506d30a30fb524cca294024daf",name:"error-description"},this.errorDescription)))}static get formAssociated(){return true}get el(){return o(this)}static get watchers(){return{rows:["rowsChanged"],autosize:["autosizeChanged"],value:["handleValueChange"]}}};l.style=s;export{l as nv_fieldtextarea};
+//# sourceMappingURL=p-e390557d.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["nvFieldtextareaCss","NvFieldtextareaStyle0","NvFieldtextarea","constructor","hostRef","this","inputId","uuidv4","disabled","readonly","required","error","success","rows","resize","autosize","handleTextarea","event","textarea","target","value","valueChanged","emit","handleTextareaContainerClick","textareaElement","focus","componentWillRender","message","description","validation","errorDescription","rowsChanged","adjustTextareaHeight","autosizeChanged","_a","style","removeProperty","handleValueChange","requestAnimationFrame","height","computedStyle","window","getComputedStyle","lineHeight","parseFloat","paddingTop","paddingBottom","borderTopWidth","borderBottomWidth","minHeight","scrollHeight","componentDidLoad","render","h","Host","key","label","el","querySelector","htmlFor","name","class","onClick","id","ref","e","placeholder","readOnly","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  /**\n   * Make sure to adjust the height of the textarea when the value changes\n   * programmatically or by typing when autosize is on.\n   */\n  @Watch('value')\n  handleValueChange() {\n    if (this.autosize) {\n      this.adjustTextareaHeight();\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\n  private handleTextareaContainerClick = () => {\n    this.textareaElement.focus();\n  };\n\n  private adjustTextareaHeight() {\n    if (this.textareaElement && this.autosize) {\n      /**\n       * The first requestAnimationFrame ensures that the DOM has applied any\n       * pending changes (e.g., value updates or attribute changes) before\n       * proceeding to the next frame.\n       */\n      requestAnimationFrame(() => {\n        /**\n         * The second requestAnimationFrame ensures that the browser has fully\n         * recalculated layout and styles based on the updated DOM, such as\n         * recalculating scrollHeight for the textarea after the new value is\n         * rendered.\n         */\n        requestAnimationFrame(() => {\n          this.textareaElement.style.height = 'auto';\n\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\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(\n                this.resize === 'none' && 'resize-none',\n                this.resize === 'vertical' && 'resize-y',\n                this.resize === 'horizontal' && 'resize-x',\n                this.resize === 'both' && 'resize',\n              )}\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":"mIAAA,MAAMA,EAAqB,21JAC3B,MAAAC,EAAeD,E,MCuBFE,EAAe,MAN5B,WAAAC,CAAAC,G,qDAiDWC,KAAAC,QAAkBC,IAiDlBF,KAAAG,SAAoB,MAQpBH,KAAAI,SAAoB,MAOpBJ,KAAAK,SAAoB,MAQ7BL,KAAAM,MAAiB,MAgBRN,KAAAO,QAAmB,MAyBnBP,KAAAQ,KAAe,EAOfR,KAAAS,OAAsD,WAStDT,KAAAU,SAAoB,MAwDrBV,KAAAW,eAAkBC,IACxB,MAAMC,EAAWD,EAAME,OACvBd,KAAKe,MAAQF,EAASE,MACtBf,KAAKgB,aAAaC,KAAKJ,EAASE,MAAM,EAGhCf,KAAAkB,6BAA+B,KACrClB,KAAKmB,gBAAgBC,OAAO,C,CAtN9B,mBAAAC,GACE,GAAIrB,KAAKsB,QAAS,CAChBtB,KAAKuB,YAAcvB,KAAKsB,O,CAG1B,GAAItB,KAAKwB,WAAY,CACnBxB,KAAKyB,iBAAmBzB,KAAKwB,WAC7BxB,KAAKM,MAAQ,I,EAsKjB,WAAAoB,GACE,GAAI1B,KAAKU,SAAU,CACjBV,KAAK2B,sB,EAST,eAAAC,G,MACE,GAAI5B,KAAKU,SAAU,CACjBV,KAAK2B,sB,KACA,EACLE,EAAA7B,KAAKmB,mBAAe,MAAAU,SAAA,SAAAA,EAAEC,MAAMC,eAAe,S,EAS/C,iBAAAC,GACE,GAAIhC,KAAKU,SAAU,CACjBV,KAAK2B,sB,EAkBD,oBAAAA,GACN,GAAI3B,KAAKmB,iBAAmBnB,KAAKU,SAAU,CAMzCuB,uBAAsB,KAOpBA,uBAAsB,KACpBjC,KAAKmB,gBAAgBW,MAAMI,OAAS,OAEpC,MAAMC,EAAgBC,OAAOC,iBAAiBrC,KAAKmB,iBACnD,MAAMmB,EAAaC,WAAWJ,EAAcG,YAC5C,MAAME,EAAaD,WAAWJ,EAAcK,YAC5C,MAAMC,EAAgBF,WAAWJ,EAAcM,eAC/C,MAAMC,EAAiBH,WAAWJ,EAAcO,gBAChD,MAAMC,EAAoBJ,WAAWJ,EAAcQ,mBAGnD,MAAMC,EACJN,EAAatC,KAAKQ,KAClBgC,EACAC,EACAC,EACAC,EAEF3C,KAAKmB,gBAAgBW,MAAMc,UAAY,GAAGA,MAC1C5C,KAAKmB,gBAAgBW,MAAMI,OACzBlC,KAAKmB,gBAAgB0B,aAAe,IAAI,GAC1C,G,EASR,gBAAAC,GACE,GAAI9C,KAAKU,SAAU,CACjBV,KAAK2B,sB,EAQT,MAAAoB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,6CACDlD,KAAKmD,OAASnD,KAAKoD,GAAGC,cAAc,oBACpCL,EAAA,SAAAE,IAAA,2CAAOI,QAAStD,KAAKC,SACnB+C,EAAA,QAAAE,IAAA,2CAAMK,KAAK,SAASvD,KAAKmD,QAI7BH,EAAA,OAAAE,IAAA,2CAAKM,MAAM,oBACTR,EAAA,OAAAE,IAAA,2CACEM,MAAM,qBACNC,QAASzD,KAAKkB,8BAEd8B,EAAA,YAAAE,IAAA,2CACEQ,GAAI1D,KAAKC,QACT0D,IAAKC,GAAM5D,KAAKmB,gBAAkByC,EAClCC,YAAa7D,KAAK6D,YAClBN,KAAMvD,KAAKuD,KACXpD,SAAUH,KAAKG,SACf2D,SAAU9D,KAAKI,SACfC,SAAUL,KAAKK,SACf0D,UAAW/D,KAAK+D,UAChBC,UAAWhE,KAAKgE,UAChBC,aAAa,MACblD,MAAOf,KAAKe,MACZmD,QAASlE,KAAKW,eACdH,KAAMR,KAAKQ,KACXgD,MAAOW,EACLnE,KAAKS,SAAW,QAAU,cAC1BT,KAAKS,SAAW,YAAc,WAC9BT,KAAKS,SAAW,cAAgB,WAChCT,KAAKS,SAAW,QAAU,eAMhCT,KAAKuB,aACLvB,KAAKoD,GAAGC,cAAc,0BACtBL,EAAA,OAAAE,IAAA,2CAAKM,MAAM,eACTR,EAAA,QAAAE,IAAA,2CAAMK,KAAK,eAAevD,KAAKuB,eAIjCvB,KAAKyB,kBACLzB,KAAKoD,GAAGC,cAAc,gCACtBL,EAAA,OAAAE,IAAA,2CAAKkB,QAASpE,KAAKM,MAAOkD,MAAM,qBAC9BR,EAAA,QAAAE,IAAA,2CAAMK,KAAK,qBAAqBvD,KAAKyB,mB","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as e,c as n,h as t,a as o,g as i}from"./p-9b093b92.js";const r="nv-menuitem{display:flex;align-items:center;max-width:300px;width:100vw;font-size:var(--menu-contextual-item-font-size);font-weight:var(--menu-contextual-item-font-weight);color:var(--components-menu-contextual-item-content);border-radius:var(--menu-contextual-item-radius);gap:var(--menu-contextual-item-gap-x);padding:var(--menu-contextual-item-padding-y) var(--menu-contextual-item-padding-x);transition:background-color 150ms ease-out;cursor:pointer}nv-menuitem:hover,nv-menuitem:focus,nv-menuitem:focus-within{background-color:var(--components-menu-contextual-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-menuitem kbd{color:var(--components-menu-contextual-item-shortcut)}nv-menuitem [data-scope=text]{margin-right:auto}nv-menuitem[disabled]:not([disabled=false]){cursor:unset;background-color:unset;color:var(--components-menu-contextual-item-content-disabled)}nv-menu{display:inline-block;position:relative}nv-menu:has([fluid]:not([fluid=false])){display:block}nv-menu nv-popover{display:unset}nv-menu nv-popover [data-scope=popover]{background-color:transparent !important;padding:0 !important}nv-menu [slot=content]{padding:var(--menu-contextual-padding-y) var(--menu-contextual-padding-x);border-radius:var(--menu-contextual-radius);gap:var(--menu-contextual-gap-y);background-color:var(--components-menu-contextual-background);border-color:var(--components-menu-contextual-border);display:flex;flex-direction:column}nv-menu nv-menu[open]:not([open=false])>nv-menuitem{background-color:var(--components-menu-contextual-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-menu hr{display:block;margin:var(--menu-contextual-divider-padding-top) var(--menu-contextual-divider-padding-x) var(--menu-contextual-divider-padding-bottom) var(--menu-contextual-divider-padding-x)}";const a=r;const s=class{constructor(t){e(this,t);this.menuitemSelected=n(this,"menuitemSelected",7);this.isHandlingKeyDown=false;this.open=false;this.nested=false;this.disableCloseOnSelect=false;this.placement=this.nested?"right-start":"bottom-end"}async show(){this.open=true}async close(){this.open=false}handleMenuItemSelect(e){if(this.disableCloseOnSelect)return;if(e.detail.hasSubmenu)return;this.open=false}handleKeydown(e){if(!this.open)return;if(this.isHandlingKeyDown)return;this.isHandlingKeyDown=true;if(e.key==="ArrowDown"||e.key==="ArrowUp"||e.key==="ArrowLeft"||e.key==="ArrowRight"||e.key==="Escape"){e.preventDefault()}if(e.key==="Escape"&&!this.nested){this.close();this.triggerElement.focus();this.isHandlingKeyDown=false;return}const n=this.el.querySelector('[slot="content"]');const t=Array.from(n.childNodes).filter((e=>{var n;return(n=e.matches)===null||n===void 0?void 0:n.call(e,"nv-menuitem, nv-menu")}));let o=t.indexOf(document.activeElement);if(o===-1)o=t.indexOf(document.activeElement.parentElement);if(o===-1&&t.find((e=>e.matches("nv-menu[open]")))){this.isHandlingKeyDown=false;return}if(e.key==="ArrowDown"||e.key==="ArrowUp"){t.forEach((e=>{if(e.matches("nv-menu"))e.close()}))}if(e.key==="ArrowDown"){let e=(o+1)%t.length;while(t[e].matches("nv-menuitem[disabled]")){e=(e+1)%t.length}const n=t[e];if(n.matches("nv-menuitem"))n.focus();else if(n.matches("nv-menu"))n.querySelector("nv-menuitem").focus()}if(e.key==="ArrowUp"){let e=(o-1+t.length)%t.length;while(t[e].matches("nv-menuitem[disabled]")){e=(e-1+t.length)%t.length}const n=t[e];if(n.matches("nv-menuitem"))n.focus();else if(n.matches("nv-menu"))n.querySelector("nv-menuitem").focus()}if(e.key==="ArrowRight"){const e=t[o];if(!e.matches("nv-menu")){this.isHandlingKeyDown=false;return}e.show()}if(e.key==="ArrowLeft"&&this.nested){if(t.find((e=>e.matches("nv-menu[open]")))){this.isHandlingKeyDown=false;return}this.close();this.triggerElement.focus()}this.isHandlingKeyDown=false}handleOpenChanged(e){if(e.target===this.el.querySelector("nv-popover")){this.open=e.detail}const n=this.triggerElement===document.activeElement;const t=this.triggerElement.matches(":focus-visible");if(n&&t)this.focusFirstItem()}focusFirstItem(){const e=this.popoverElement.querySelector("nv-menuitem");if(e){requestAnimationFrame((()=>e.focus()))}}componentWillLoad(){this.triggerElement=Array.from(this.el.children).find((e=>e.getAttribute("slot")==="trigger"))}render(){return t(o,{key:"2916995a257343bb849c8e64938850e0167d5491"},t("slot",{key:"012e521f58fd4b603f90c4eb6bef29c71e05586e",name:"trigger"}),t("nv-popover",{key:"187f89fd4dad78f8ebc99082ad936fced52b81d3",ref:e=>this.popoverElement=e,triggerMode:"click",triggerElement:this.triggerElement,placement:this.placement,nested:this.nested,open:this.open},t("slot",{key:"3d94bcc4a617fd475f3e6057f10e25a3aae772fd",name:"content"})))}get el(){return i(this)}};s.style=a;export{s as nv_menu};
+//# sourceMappingURL=p-e56d3715.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["nvMenuCss","NvMenuStyle0","NvMenu","constructor","hostRef","this","isHandlingKeyDown","open","nested","disableCloseOnSelect","placement","show","close","handleMenuItemSelect","event","detail","hasSubmenu","handleKeydown","key","preventDefault","triggerElement","focus","menuContent","el","querySelector","menuItems","Array","from","childNodes","filter","item","_a","matches","call","currentIndex","indexOf","document","activeElement","parentElement","find","forEach","nextIndex","length","nextFocusable","prevIndex","prevFocusable","submenu","handleOpenChanged","target","triggerHasFocus","triggerHasFocusVisible","focusFirstItem","firstButton","popoverElement","requestAnimationFrame","componentWillLoad","children","child","getAttribute","render","h","Host","name","ref","triggerMode"],"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\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 and name when\n   * selected (via click or keyboard). This event listener can be attached to\n   * either the nv-menu or the nv-menuitem element.\n   */\n  @Event()\n  menuitemSelected: EventEmitter<MenuitemSelectedEventDetail>;\n\n  @Listen('menuitemSelected')\n  handleMenuItemSelect(event: CustomEvent<MenuitemSelectedEventDetail>) {\n    if (this.disableCloseOnSelect) return;\n    if (event.detail.hasSubmenu) return;\n\n    this.open = false;\n  }\n\n  @Listen('keydown', { passive: false })\n  handleKeydown(event: KeyboardEvent) {\n    if (!this.open) return;\n    if (this.isHandlingKeyDown) 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    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":"gEAAA,MAAMA,EAAY,i0DAClB,MAAAC,EAAeD,E,MCsBFE,EAAM,MALnB,WAAAC,CAAAC,G,6DASUC,KAAAC,kBAA6B,MAUrCD,KAAAE,KAAgB,MAOPF,KAAAG,OAAkB,MAOlBH,KAAAI,qBAAgC,MAQhCJ,KAAAK,UAAuBL,KAAKG,OAAS,cAAgB,Y,CAU9D,UAAMG,GACJN,KAAKE,KAAO,I,CAOd,WAAMK,GACJP,KAAKE,KAAO,K,CAgBd,oBAAAM,CAAqBC,GACnB,GAAIT,KAAKI,qBAAsB,OAC/B,GAAIK,EAAMC,OAAOC,WAAY,OAE7BX,KAAKE,KAAO,K,CAId,aAAAU,CAAcH,GACZ,IAAKT,KAAKE,KAAM,OAChB,GAAIF,KAAKC,kBAAmB,OAE5BD,KAAKC,kBAAoB,KAEzB,GACEQ,EAAMI,MAAQ,aACdJ,EAAMI,MAAQ,WACdJ,EAAMI,MAAQ,aACdJ,EAAMI,MAAQ,cACdJ,EAAMI,MAAQ,SACd,CACAJ,EAAMK,gB,CAGR,GAAIL,EAAMI,MAAQ,WAAab,KAAKG,OAAQ,CAC1CH,KAAKO,QACLP,KAAKe,eAAeC,QACpBhB,KAAKC,kBAAoB,MACzB,M,CAGF,MAAMgB,EAAcjB,KAAKkB,GAAGC,cAAc,oBAC1C,MAAMC,EACJC,MAAMC,KAAKL,EAAYM,YAGvBC,QAAOC,IAAI,IAAAC,EAAI,OAAAA,EAAAD,EAAKE,WAAO,MAAAD,SAAA,SAAAA,EAAAE,KAAAH,EAAG,uBAAuB,IAEvD,IAAII,EAAeT,EAAUU,QAC3BC,SAASC,eAEX,GAAIH,KAAkB,EACpBA,EAAeT,EAAUU,QACvBC,SAASC,cAAcC,eAE3B,GACEJ,KAAkB,GAClBT,EAAUc,MAAKT,GAAQA,EAAKE,QAAQ,mBACpC,CACA3B,KAAKC,kBAAoB,MACzB,M,CAGF,GAAIQ,EAAMI,MAAQ,aAAeJ,EAAMI,MAAQ,UAAW,CACxDO,EAAUe,SAAQV,IAChB,GAAIA,EAAKE,QAAQ,WAAaF,EAA2BlB,OAAO,G,CAIpE,GAAIE,EAAMI,MAAQ,YAAa,CAC7B,IAAIuB,GAAaP,EAAe,GAAKT,EAAUiB,OAC/C,MAAOjB,EAAUgB,GAAWT,QAAQ,yBAA0B,CAC5DS,GAAaA,EAAY,GAAKhB,EAAUiB,M,CAE1C,MAAMC,EAAgBlB,EAAUgB,GAChC,GAAIE,EAAcX,QAAQ,eAAgBW,EAActB,aACnD,GAAIsB,EAAcX,QAAQ,WAC7BW,EAAcnB,cAAc,eAAeH,O,CAG/C,GAAIP,EAAMI,MAAQ,UAAW,CAC3B,IAAI0B,GAAaV,EAAe,EAAIT,EAAUiB,QAAUjB,EAAUiB,OAClE,MAAOjB,EAAUmB,GAAWZ,QAAQ,yBAA0B,CAC5DY,GAAaA,EAAY,EAAInB,EAAUiB,QAAUjB,EAAUiB,M,CAE7D,MAAMG,EAAgBpB,EAAUmB,GAChC,GAAIC,EAAcb,QAAQ,eAAgBa,EAAcxB,aACnD,GAAIwB,EAAcb,QAAQ,WAC7Ba,EAAcrB,cAAc,eAAeH,O,CAG/C,GAAIP,EAAMI,MAAQ,aAAc,CAC9B,MAAM4B,EAAUrB,EAAUS,GAC1B,IAAKY,EAAQd,QAAQ,WAAY,CAC/B3B,KAAKC,kBAAoB,MACzB,M,CAGDwC,EAA8BnC,M,CAGjC,GAAIG,EAAMI,MAAQ,aAAeb,KAAKG,OAAQ,CAC5C,GAAIiB,EAAUc,MAAKT,GAAQA,EAAKE,QAAQ,mBAAmB,CACzD3B,KAAKC,kBAAoB,MACzB,M,CAEFD,KAAKO,QACLP,KAAKe,eAAeC,O,CAGtBhB,KAAKC,kBAAoB,K,CAI3B,iBAAAyC,CAAkBjC,GAChB,GAAIA,EAAMkC,SAAW3C,KAAKkB,GAAGC,cAAc,cAAe,CACxDnB,KAAKE,KAAOO,EAAMC,M,CAGpB,MAAMkC,EAAkB5C,KAAKe,iBAAmBgB,SAASC,cACzD,MAAMa,EACJ7C,KAAKe,eAAeY,QAAQ,kBAE9B,GAAIiB,GAAmBC,EAAwB7C,KAAK8C,gB,CAG9C,cAAAA,GACN,MAAMC,EAAc/C,KAAKgD,eAAe7B,cAAc,eACtD,GAAI4B,EAAa,CACfE,uBAAsB,IAAMF,EAAY/B,S,EAQ5C,iBAAAkC,GACElD,KAAKe,eAAiBM,MAAMC,KAAKtB,KAAKkB,GAAGiC,UAAUjB,MAAKkB,GAC/CA,EAAMC,aAAa,UAAY,W,CAQ1C,MAAAC,GACE,OACEC,EAACC,EAAI,CAAA3C,IAAA,4CACH0C,EAAA,QAAA1C,IAAA,2CAAM4C,KAAK,YAEXF,EAAA,cAAA1C,IAAA,2CACE6C,IAAKxC,GAAOlB,KAAKgD,eAAiB9B,EAClCyC,YAAY,QACZ5C,eAAgBf,KAAKe,eACrBV,UAAWL,KAAKK,UAChBF,OAAQH,KAAKG,OACbD,KAAMF,KAAKE,MAEXqD,EAAA,QAAA1C,IAAA,2CAAM4C,KAAK,a","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as o,a as i,g as n}from"./p-9b093b92.js";const s="nv-fielddropdownitem{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--list-custom-item-padding-y) var(--list-custom-item-padding-x);font-size:var(--menu-contextual-item-font-size);font-weight:var(--menu-contextual-item-font-weight);color:var(--components-menu-contextual-item-content);border-radius:var(--menu-contextual-item-radius);transition:background-color 150ms ease-out, color 150ms ease-out;cursor:pointer}nv-fielddropdownitem:hover,nv-fielddropdownitem:focus,nv-fielddropdownitem:focus-within{background-color:var(--components-list-custom-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-fielddropdownitem[disabled]:not([disabled=false]){cursor:not-allowed;background-color:unset;color:var(--components-menu-contextual-item-content-disabled)}nv-fielddropdownitem .dropdown-item-text-wrapper{display:flex;flex-grow:1;align-items:center;justify-content:space-between}nv-fielddropdownitem [data-scope=text]{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nv-fielddropdownitem .selection-icon{color:var(--components-list-custom-item-content-default);align-self:center}";const r=s;const a=class{constructor(o){e(this,o);this.itemSelected=t(this,"itemSelected",7);this.disabled=false;this.selected=false;this.handleClick=()=>{if(!this.disabled){let e=this.value||"";if(!e){e=Array.from(this.el.childNodes).map((e=>{var t;return(t=e.textContent)===null||t===void 0?void 0:t.trim()})).filter((e=>e&&e.length>0)).join(" ")||""}this.selected=!this.selected;this.itemSelected.emit({label:this.label,value:e,selected:this.selected,disabled:this.disabled})}}}isNullOrEmptyOrWhitespace(e){return!e||e.trim().length===0}render(){const e=this.isNullOrEmptyOrWhitespace(this.label);return o(i,{key:"e482a762c7b011389f1f1312b14f1686e38528aa",role:"menuitem",tabindex:this.disabled?"-1":"0",onClick:this.handleClick,class:{selected:this.selected}},e?o("slot",null):o("div",{class:"dropdown-item-text-wrapper"},o("span",{"data-scope":"text"},this.label),this.selected&&o("nv-icon",{name:"check","aria-hidden":"true",class:"selection-icon"})))}get el(){return n(this)}};a.style=r;export{a as nv_fielddropdownitem};
+//# sourceMappingURL=p-e5fbe545.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["nvFielddropdownitemCss","NvFielddropdownitemStyle0","NvFielddropdownitem","constructor","hostRef","this","disabled","selected","handleClick","itemValue","value","Array","from","el","childNodes","map","node","_a","textContent","trim","filter","text","length","join","itemSelected","emit","label","isNullOrEmptyOrWhitespace","input","render","showDefaultLayout","h","Host","key","role","tabindex","onClick","class","name"],"sources":["src/components/nv-fielddropdownitem/nv-fielddropdownitem.scss?tag=nv-fielddropdownitem","src/components/nv-fielddropdownitem/nv-fielddropdownitem.tsx"],"sourcesContent":["@import '../../styles/form-field';\n\nnv-fielddropdownitem {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  padding: var(--list-custom-item-padding-y) var(--list-custom-item-padding-x);\n  font-size: var(--menu-contextual-item-font-size);\n  font-weight: var(--menu-contextual-item-font-weight);\n  color: var(--components-menu-contextual-item-content);\n  border-radius: var(--menu-contextual-item-radius);\n  transition: background-color 150ms ease-out, color 150ms ease-out;\n  cursor: pointer;\n\n  &:hover,\n  &:focus,\n  &:focus-within {\n    background-color: var(--components-list-custom-item-background-hover);\n    color: var(--components-menu-contextual-item-content-hover);\n  }\n\n  &[disabled]:not([disabled='false']) {\n    cursor: not-allowed;\n    background-color: unset;\n    color: var(--components-menu-contextual-item-content-disabled);\n  }\n.dropdown-item-text-wrapper{\n  display: flex;\n  flex-grow: 1;\n  align-items: center;\n  justify-content: space-between;\n}\n  [data-scope='text'] {\n    flex-grow: 1;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .selection-icon {\n    color: var(--components-list-custom-item-content-default);\n    align-self: center;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n} from '@stencil/core';\nimport { DropdownItemSelectedEventDetail } from './DropdownItemSelectedEventDetail';\n\n/**\n * @slot default - The content to be displayed inside the dropdown item.\n */\n\n@Component({\n  tag: 'nv-fielddropdownitem',\n  styleUrl: 'nv-fielddropdownitem.scss',\n  shadow: false,\n})\nexport class NvFielddropdownitem {\n  @Element() el: HTMLNvFielddropdownitemElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Disables the item, preventing any user interaction.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Indicates if the item is selected.\n   */\n  @Prop({ reflect: true, mutable: true })\n  selected: boolean = false;\n\n  /**\n   * Value associated with the item.\n   */\n  @Prop({ reflect: true })\n  readonly value?: string;\n\n  /**\n   * Label used as the value for the default layout.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Event emitted when an item is clicked.\n   */\n  @Event()\n  itemSelected: EventEmitter<DropdownItemSelectedEventDetail>;\n\n  private handleClick = () => {\n    if (!this.disabled) {\n      let itemValue = this.value || '';\n      if (!itemValue) {\n        itemValue =\n          Array.from(this.el.childNodes)\n            .map(node => node.textContent?.trim())\n            .filter(text => text && text.length > 0)\n            .join(' ') || '';\n      }\n\n      this.selected = !this.selected; // Toggle the selected state\n\n      this.itemSelected.emit({\n        label: this.label,\n        value: itemValue,\n        selected: this.selected,\n        disabled: this.disabled,\n      });\n    }\n  };\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Utility function to check if a string is null, empty, or contains only whitespace.\n   * @param {string | null | undefined} input - The string to check.\n   * @returns {boolean} - Returns true if the string is null, empty, or contains only whitespace; otherwise, false.\n   */\n  private isNullOrEmptyOrWhitespace(input: string | null | undefined): boolean {\n    return !input || input.trim().length === 0;\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    const showDefaultLayout = this.isNullOrEmptyOrWhitespace(this.label);\n\n    return (\n      <Host\n        role=\"menuitem\"\n        tabindex={this.disabled ? '-1' : '0'}\n        onClick={this.handleClick}\n        class={{ selected: this.selected }}\n      >\n        {showDefaultLayout ? (\n          <slot></slot>\n        ) : (\n          <div class=\"dropdown-item-text-wrapper\">\n            <span data-scope=\"text\">{this.label}</span>\n            {this.selected && (\n              <nv-icon\n                name=\"check\"\n                aria-hidden=\"true\"\n                class=\"selection-icon\"\n              ></nv-icon>\n            )}\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"mappings":"gEAAA,MAAMA,EAAyB,opCAC/B,MAAAC,EAAeD,E,MCmBFE,EAAmB,MALhC,WAAAC,CAAAC,G,qDAeWC,KAAAC,SAAoB,MAM7BD,KAAAE,SAAoB,MAwBZF,KAAAG,YAAc,KACpB,IAAKH,KAAKC,SAAU,CAClB,IAAIG,EAAYJ,KAAKK,OAAS,GAC9B,IAAKD,EAAW,CACdA,EACEE,MAAMC,KAAKP,KAAKQ,GAAGC,YAChBC,KAAIC,IAAI,IAAAC,EAAI,OAAAA,EAAAD,EAAKE,eAAW,MAAAD,SAAA,SAAAA,EAAEE,MAAM,IACpCC,QAAOC,GAAQA,GAAQA,EAAKC,OAAS,IACrCC,KAAK,MAAQ,E,CAGpBlB,KAAKE,UAAYF,KAAKE,SAEtBF,KAAKmB,aAAaC,KAAK,CACrBC,MAAOrB,KAAKqB,MACZhB,MAAOD,EACPF,SAAUF,KAAKE,SACfD,SAAUD,KAAKC,U,GAcb,yBAAAqB,CAA0BC,GAChC,OAAQA,GAASA,EAAMT,OAAOG,SAAW,C,CAO3C,MAAAO,GACE,MAAMC,EAAoBzB,KAAKsB,0BAA0BtB,KAAKqB,OAE9D,OACEK,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,WACLC,SAAU9B,KAAKC,SAAW,KAAO,IACjC8B,QAAS/B,KAAKG,YACd6B,MAAO,CAAE9B,SAAUF,KAAKE,WAEvBuB,EACCC,EAAA,aAEAA,EAAA,OAAKM,MAAM,8BACTN,EAAA,qBAAiB,QAAQ1B,KAAKqB,OAC7BrB,KAAKE,UACJwB,EAAA,WACEO,KAAK,QAAO,cACA,OACZD,MAAM,oB","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as a,h as r,a as e}from"./p-9b093b92.js";const b="nv-breadcrumbs{display:block}nv-breadcrumbs>ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-1)}nv-breadcrumbs nv-breadcrumb:last-child [data-scope=separator],nv-breadcrumbs nv-breadcrumb:last-child [slot=separator]{display:none}";const s=b;const c=class{constructor(r){a(this,r)}render(){return r(e,{key:"5ab0f09cb86a92464ffcd06d8129543539bdcddf",role:"navigation","aria-label":"breadcrumbs"},r("ol",{key:"a7624a2400d9a91ec477694bbd3600960e198981"},r("slot",{key:"7c4102ceebe110377bf212e0695bdec6b455ea74"})))}};c.style=s;export{c as nv_breadcrumbs};
+//# sourceMappingURL=p-eade52d4.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["nvBreadcrumbsCss","NvBreadcrumbsStyle0","NvBreadcrumbs","render","h","Host","key","role"],"sources":["src/components/nv-breadcrumbs/nv-breadcrumbs.scss?tag=nv-breadcrumbs","src/components/nv-breadcrumbs/nv-breadcrumbs.tsx"],"sourcesContent":["@mixin root-styles() {\n  display: block;\n}\n\n@mixin list-styles() {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--spacing-1);\n}\n\n@mixin breadcrumb-styles() {\n  &:last-child {\n    [data-scope=\"separator\"], [slot=\"separator\"] {\n      display: none;\n    }\n  }\n}\n\nnv-breadcrumbs {\n  @include root-styles();\n  > ol {\n    @include list-styles();\n  }\n  nv-breadcrumb {\n    @include breadcrumb-styles();\n  }\n}\n","import { Component, Host, h } from '@stencil/core';\n\n/**\n * @slot default - Child content of the component.\n */\n@Component({\n  tag: 'nv-breadcrumbs',\n  styleUrl: 'nv-breadcrumbs.scss',\n  shadow: false,\n})\nexport class NvBreadcrumbs {\n  //#region RENDER\n\n  render() {\n    return (\n      <Host role=\"navigation\" aria-label=\"breadcrumbs\">\n        <ol>\n          <slot></slot>\n        </ol>\n      </Host>\n    );\n  }\n\n  // #endregion RENDER\n}\n"],"mappings":"kDAAA,MAAMA,EAAmB,2PACzB,MAAAC,EAAeD,E,MCSFE,EAAa,M,yBAGxB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,aAAY,aAAY,eACjCH,EAAA,MAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,8C","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as a,h as e,a as c}from"./p-9b093b92.js";const s="";const t=s;const r=class{constructor(e){a(this,e)}render(){return e(c,{key:"2982f199f488077a91812c214b0e881a0e32e1ec"},e("th",{key:"cc46a9eb1aa232a8068308d7e7175aed89f007c1"},e("slot",{key:"bd1f13adfd55b1c4ae8dab30d7aea33c9079f3e0"})))}};r.style=t;export{r as nv_datagridcolumn};
+//# sourceMappingURL=p-eda8cd9d.entry.js.map

package/dist/native/{p-e842220b.entry.js.map → p-eda8cd9d.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["nvDatagridcolumnCss","NvDatagridcolumnStyle0","NvDatagridcolumn","render","h","Host","key"],"sources":["src/components/nv-datagridcolumn/nv-datagridcolumn.scss?tag=nv-datagridcolumn","src/components/nv-datagridcolumn/nv-datagridcolumn.tsx"],"sourcesContent":["// No need for the moment\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n/**\n * @slot default - Use this slot to insert HTML into the data grid column.\n */\n@Component({\n  tag: 'nv-datagridcolumn',\n  styleUrl: 'nv-datagridcolumn.scss',\n  shadow: false,\n})\nexport class NvDatagridcolumn {\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Defines the header of the column.\n   */\n  @Prop()\n  readonly header: string;\n\n  /**\n   * Defines the accessor of the column.\n   */\n  @Prop()\n  readonly accessor: string;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        <th>\n          <slot></slot>\n        </th>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n  /****************************************************************************/\n}\n"],"mappings":"kDAAA,MAAMA,EAAsB,GAC5B,MAAAC,EAAeD,E,MCSFE,EAAgB,M,uEAoB3B,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,MAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,8C","ignoreList":[]}
+{"version":3,"names":["nvDatagridcolumnCss","NvDatagridcolumnStyle0","NvDatagridcolumn","render","h","Host","key"],"sources":["src/components/nv-datagridcolumn/nv-datagridcolumn.scss?tag=nv-datagridcolumn","src/components/nv-datagridcolumn/nv-datagridcolumn.tsx"],"sourcesContent":["// No need for the moment\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n/**\n * @slot default - Use this slot to insert HTML into the data grid column.\n */\n@Component({\n  tag: 'nv-datagridcolumn',\n  styleUrl: 'nv-datagridcolumn.scss',\n  shadow: false,\n})\nexport class NvDatagridcolumn {\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Defines the header of the column.\n   */\n  @Prop()\n  readonly header: string;\n\n  /**\n   * Defines the accessor of the column.\n   */\n  @Prop()\n  readonly accessor: string;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        <th>\n          <slot></slot>\n        </th>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n  /****************************************************************************/\n}\n"],"mappings":"kDAAA,MAAMA,EAAsB,GAC5B,MAAAC,EAAeD,E,MCSFE,EAAgB,M,yBAoB3B,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,MAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,8C","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as n,a,g as o}from"./p-9b093b92.js";const c="nv-menuitem{display:flex;align-items:center;max-width:300px;width:100vw;font-size:var(--menu-contextual-item-font-size);font-weight:var(--menu-contextual-item-font-weight);color:var(--components-menu-contextual-item-content);border-radius:var(--menu-contextual-item-radius);gap:var(--menu-contextual-item-gap-x);padding:var(--menu-contextual-item-padding-y) var(--menu-contextual-item-padding-x);transition:background-color 150ms ease-out;cursor:pointer}nv-menuitem:hover,nv-menuitem:focus,nv-menuitem:focus-within{background-color:var(--components-menu-contextual-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-menuitem kbd{color:var(--components-menu-contextual-item-shortcut)}nv-menuitem [data-scope=text]{margin-right:auto}nv-menuitem[disabled]:not([disabled=false]){cursor:unset;background-color:unset;color:var(--components-menu-contextual-item-content-disabled)}";const i=c;const s=class{constructor(n){e(this,n);this.menuitemSelected=t(this,"menuitemSelected",7);this.disabled=false;this.hasSubmenu=false}handleMenuItemSelect(e){if(this.disabled){e.stopPropagation();return}this.menuitemSelected.emit({id:this.el.id,name:this.name,hasSubmenu:this.hasSubmenu})}handleClick(e){this.handleMenuItemSelect(e)}handleKeyDown(e){if(e.key==="Enter"){const t=document.activeElement;if(t&&t.tagName==="NV-MENUITEM"&&!t.hasAttribute("has-submenu")){e.preventDefault();this.handleMenuItemSelect(e)}}}render(){return n(a,{key:"a67dc0ea59f24f8e603b85fca99a95727559f749",role:"menuitem",tabindex:this.disabled?"-1":"0"},this.icon&&n("nv-icon",{key:"5f9b024b930199552cbcb25c20b8acb85cb49dc7",name:this.icon}),n("span",{key:"096c9c5ea2cc697c7eb4de9c43dff60e06751e89","data-scope":"text"},n("slot",{key:"87e3815be0751cf1bf4e31dacc3a1658c4d7fdf4"})),this.shortcut&&!this.hasSubmenu&&n("kbd",{key:"e0bfbf8cb85eab0b935b37963d52ff14c844db2b"},this.shortcut),this.hasSubmenu&&n("nv-icon",{key:"869adf3673781fb5d21ca493118bfc4e5b56d9c4",name:"chevron-right"}))}get el(){return o(this)}};s.style=i;export{s as nv_menuitem};
+//# sourceMappingURL=p-ee78addb.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["nvMenuitemCss","NvMenuitemStyle0","NvMenuitem","constructor","hostRef","this","disabled","hasSubmenu","handleMenuItemSelect","event","stopPropagation","menuitemSelected","emit","id","el","name","handleClick","handleKeyDown","key","activeElement","document","tagName","hasAttribute","preventDefault","render","h","Host","role","tabindex","icon","shortcut"],"sources":["src/components/nv-menuitem/nv-menuitem.scss?tag=nv-menuitem","src/components/nv-menuitem/nv-menuitem.tsx"],"sourcesContent":["@mixin root-styles() {\n  display: flex;\n  align-items: center;\n  max-width: 300px;\n  width: 100vw;\n  font-size: var(--menu-contextual-item-font-size);\n  font-weight: var(--menu-contextual-item-font-weight);\n  color: var(--components-menu-contextual-item-content);\n  border-radius: var(--menu-contextual-item-radius);\n  gap: var(--menu-contextual-item-gap-x);\n  padding: var(--menu-contextual-item-padding-y) var(--menu-contextual-item-padding-x);\n  transition: background-color 150ms ease-out;\n  cursor: pointer;\n  &:hover, &:focus, &:focus-within {\n    @include focused-styles();\n  }\n}\n\n@mixin focused-styles() {\n  background-color: var(--components-menu-contextual-item-background-hover);\n  color: var(--components-menu-contextual-item-content-hover);\n}\n\n@mixin disabled-styles() {\n  cursor: unset;\n  background-color: unset;\n  color: var(--components-menu-contextual-item-content-disabled);\n}\n\n@mixin text-styles() {\n  margin-right: auto;\n}\n\n@mixin shortcut-styles() {\n  color: var(--components-menu-contextual-item-shortcut);\n}\n\nnv-menuitem {\n  @include root-styles();\n\n  kbd {\n    @include shortcut-styles();\n  }\n\n  [data-scope=\"text\"] {\n    @include text-styles();\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    @include disabled-styles();\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n} from '@stencil/core';\n\nimport { IconName } from '../nv-icon/nv-icons';\n\nexport type MenuitemSelectedEventDetail = {\n  /**\n   * The id of the menu item that was selected.\n   */\n  id?: HTMLElement['id'];\n  /**\n   * The name of the menu item that was selected.\n   */\n  name?: string;\n  /**\n   * Indicates if the menu item has a nested submenu.\n   */\n  hasSubmenu?: boolean;\n};\n\n/**\n * @slot default - The content to render, usually just text\n */\n@Component({\n  tag: 'nv-menuitem',\n  styleUrl: 'nv-menuitem.scss',\n  shadow: false,\n})\nexport class NvMenuitem {\n  @Element() el: HTMLNvMenuitemElement;\n  /****************************************************************************/\n  //#region PROPERTIES\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 icon: `${IconName}`;\n\n  /**\n   * Disables the item, preventing user interaction.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Show a shortcut key for the action represented in the menu item.\n   */\n  @Prop({ reflect: true })\n  readonly shortcut: string;\n\n  /**\n   * If the menu item has a submenu, the a caret icon will be displayed.\n   */\n  @Prop({ reflect: true })\n  readonly hasSubmenu: boolean = false;\n\n  /**\n   * Represents the identifier or name associated with the menu item. This value\n   * will be emitted as part of the event data when the menu item is selected,\n   * enabling event handlers to identify the chosen item.\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Fires when the menu item is selected (click or keypress). Will include the\n   * id and name of the menu item.\n   */\n  @Event()\n  menuitemSelected: EventEmitter<MenuitemSelectedEventDetail>;\n\n  private handleMenuItemSelect(event: Event) {\n    // If the element is disabled, stop propagation\n    if (this.disabled) {\n      event.stopPropagation();\n      return;\n    }\n\n    this.menuitemSelected.emit({\n      id: this.el.id,\n      name: this.name,\n      hasSubmenu: this.hasSubmenu,\n    });\n  }\n\n  @Listen('click', { capture: true })\n  handleClick(event: MouseEvent) {\n    this.handleMenuItemSelect(event);\n  }\n\n  @Listen('keydown', { passive: false })\n  handleKeyDown(event: KeyboardEvent) {\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(event);\n      }\n    }\n  }\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host role=\"menuitem\" tabindex={this.disabled ? '-1' : '0'}>\n        {this.icon && <nv-icon name={this.icon}></nv-icon>}\n        <span data-scope=\"text\">\n          <slot></slot>\n        </span>\n        {this.shortcut && !this.hasSubmenu && <kbd>{this.shortcut}</kbd>}\n        {this.hasSubmenu && <nv-icon name=\"chevron-right\"></nv-icon>}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"mappings":"2DAAA,MAAMA,EAAgB,84BACtB,MAAAC,EAAeD,E,MCmCFE,EAAU,MALvB,WAAAC,CAAAC,G,6DAsBWC,KAAAC,SAAoB,MAYpBD,KAAAE,WAAsB,K,CAqBvB,oBAAAC,CAAqBC,GAE3B,GAAIJ,KAAKC,SAAU,CACjBG,EAAMC,kBACN,M,CAGFL,KAAKM,iBAAiBC,KAAK,CACzBC,GAAIR,KAAKS,GAAGD,GACZE,KAAMV,KAAKU,KACXR,WAAYF,KAAKE,Y,CAKrB,WAAAS,CAAYP,GACVJ,KAAKG,qBAAqBC,E,CAI5B,aAAAQ,CAAcR,GACZ,GAAIA,EAAMS,MAAQ,QAAS,CACzB,MAAMC,EAAgBC,SAASD,cAC/B,GACEA,GACAA,EAAcE,UAAY,gBACzBF,EAAcG,aAAa,eAC5B,CACAb,EAAMc,iBACNlB,KAAKG,qBAAqBC,E,GAShC,MAAAe,GACE,OACEC,EAACC,EAAI,CAAAR,IAAA,2CAACS,KAAK,WAAWC,SAAUvB,KAAKC,SAAW,KAAO,KACpDD,KAAKwB,MAAQJ,EAAA,WAAAP,IAAA,2CAASH,KAAMV,KAAKwB,OAClCJ,EAAA,QAAAP,IAAA,wDAAiB,QACfO,EAAA,QAAAP,IAAA,8CAEDb,KAAKyB,WAAazB,KAAKE,YAAckB,EAAA,OAAAP,IAAA,4CAAMb,KAAKyB,UAChDzB,KAAKE,YAAckB,EAAA,WAAAP,IAAA,2CAASH,KAAK,kB","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as o,c as e,h as a,a as n,g as i}from"./p-9b093b92.js";import{c}from"./p-8a1a6e56.js";import{u as s,t}from"./p-42301d8f.js";import{u as r}from"./p-1daca48a.js";const d="nv-badge{padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);height:fit-content;width:fit-content}nv-badge.with-gap{padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);height:fit-content;width:fit-content;gap:var(--badge-gap-x)}nv-badge:not(.with-gap){padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);height:fit-content;width:fit-content}nv-badge.badge-1{color:var(--color-rainbow-1-text);background-color:var(--color-rainbow-1-background)}nv-badge.badge-1 .close:focus,nv-badge.badge-1 .close:focus-within{outline:none}nv-badge.badge-1 .close:focus-visible,nv-badge.badge-1 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-1-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-1 nv-icon{color:var(--color-rainbow-1-icon)}nv-badge.badge-2{color:var(--color-rainbow-2-text);background-color:var(--color-rainbow-2-background)}nv-badge.badge-2 .close:focus,nv-badge.badge-2 .close:focus-within{outline:none}nv-badge.badge-2 .close:focus-visible,nv-badge.badge-2 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-2-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-2 nv-icon{color:var(--color-rainbow-2-icon)}nv-badge.badge-3{color:var(--color-rainbow-3-text);background-color:var(--color-rainbow-3-background)}nv-badge.badge-3 .close:focus,nv-badge.badge-3 .close:focus-within{outline:none}nv-badge.badge-3 .close:focus-visible,nv-badge.badge-3 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-3-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-3 nv-icon{color:var(--color-rainbow-3-icon)}nv-badge.badge-4{color:var(--color-rainbow-4-text);background-color:var(--color-rainbow-4-background)}nv-badge.badge-4 .close:focus,nv-badge.badge-4 .close:focus-within{outline:none}nv-badge.badge-4 .close:focus-visible,nv-badge.badge-4 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-4-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-4 nv-icon{color:var(--color-rainbow-4-icon)}nv-badge.badge-5{color:var(--color-rainbow-5-text);background-color:var(--color-rainbow-5-background)}nv-badge.badge-5 .close:focus,nv-badge.badge-5 .close:focus-within{outline:none}nv-badge.badge-5 .close:focus-visible,nv-badge.badge-5 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-5-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-5 nv-icon{color:var(--color-rainbow-5-icon)}nv-badge.badge-6{color:var(--color-rainbow-6-text);background-color:var(--color-rainbow-6-background)}nv-badge.badge-6 .close:focus,nv-badge.badge-6 .close:focus-within{outline:none}nv-badge.badge-6 .close:focus-visible,nv-badge.badge-6 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-6-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-6 nv-icon{color:var(--color-rainbow-6-icon)}nv-badge.badge-7{color:var(--color-rainbow-7-text);background-color:var(--color-rainbow-7-background)}nv-badge.badge-7 .close:focus,nv-badge.badge-7 .close:focus-within{outline:none}nv-badge.badge-7 .close:focus-visible,nv-badge.badge-7 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-7-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-7 nv-icon{color:var(--color-rainbow-7-icon)}nv-badge.badge-8{color:var(--color-rainbow-8-text);background-color:var(--color-rainbow-8-background)}nv-badge.badge-8 .close:focus,nv-badge.badge-8 .close:focus-within{outline:none}nv-badge.badge-8 .close:focus-visible,nv-badge.badge-8 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-8-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-8 nv-icon{color:var(--color-rainbow-8-icon)}nv-badge.badge-9{color:var(--color-rainbow-9-text);background-color:var(--color-rainbow-9-background)}nv-badge.badge-9 .close:focus,nv-badge.badge-9 .close:focus-within{outline:none}nv-badge.badge-9 .close:focus-visible,nv-badge.badge-9 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-9-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-9 nv-icon{color:var(--color-rainbow-9-icon)}nv-badge.badge-10{color:var(--color-rainbow-10-text);background-color:var(--color-rainbow-10-background)}nv-badge.badge-10 .close:focus,nv-badge.badge-10 .close:focus-within{outline:none}nv-badge.badge-10 .close:focus-visible,nv-badge.badge-10 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-10-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-10 nv-icon{color:var(--color-rainbow-10-icon)}nv-badge span{font-size:var(--font-size-xs);line-height:var(--line-height-xs) !important}nv-badge nv-icon>svg.icon-xs{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-sm{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-md{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-lg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-xl{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge .close{padding:0;line-height:0;border:none;background:none;cursor:pointer;color:inherit;display:inline-flex;align-items:center;aspect-ratio:1/1;border-radius:var(--radius-rounded-full)}";const l=d;const b=class{constructor(a){o(this,a);this.closeClicked=e(this,"closeClicked",7);this.hiddenChanged=e(this,"hiddenChanged",7);this.hiddenChangedComplete=e(this,"hiddenChangedComplete",7);this.dismissal=false;this.color="1";this.label=null;this.leadIcon=null;this.dismissible=false;this.hidden=false;this._isHidden=this.hidden;this.preventAutoClose=false;this.handleClose=o=>{if(!this.preventAutoClose){this.hidden=true}this.closeClicked.emit(o)}}handleDismissalChange(o){this.dismissible=o}handleIconChange(o){this.leadIcon=o}async handleHiddenChange(o){this.hiddenChanged.emit(o);if(this._isHidden===true)this._isHidden=o;const{fadeIn:e,fadeOut:a}=r(this.ref,{duration:150});const{collapse:n,expand:i}=s(this.ref,{duration:150});if(o===true)await t(a,n).start();if(o===false)await t(i,e).start();this.hiddenChangedComplete.emit(o);if(this._isHidden===false)this._isHidden=o}componentWillLoad(){if(this.dismissal){this.dismissible=this.dismissal}if(this.icon!=null&&this.icon!=""){this.leadIcon=this.icon}if(this.hidden){const{setCollapsed:o}=s(this.ref);const{setFadeOut:e}=r(this.ref);o();e()}}render(){return a(n,{key:"f0b9bf1d1a32c72f9d8176300d06875f0258f068",class:c(`badge-${this.color}`,{"has-close":this.dismissible,"with-gap":this.dismissible||this.label,"visually-hidden":this._isHidden})},a("slot",{key:"967f6cceadd13f1a7758696b0ddb9b77d256caac",name:"leading-icon"},this.leadIcon&&a("nv-icon",{key:"683ccf19e6281ab8fded9e217f61a67d835a7b37",slot:"leading-icon",name:this.leadIcon,size:"sm"})),this.label&&a("span",{key:"e01b6071da8bdc73d7708e91c67afe9bc2819095"},this.label),this.dismissible&&a("button",{key:"f8040e70acd910c63fa377837fc13316a321366c",onClick:this.handleClose,class:"close",type:"button"},a("nv-icon",{key:"405cee0cdcdab3a470086ccbd3aa5b46c5e0e2ea",name:"x",size:"sm"})))}get ref(){return i(this)}static get watchers(){return{dismissal:["handleDismissalChange"],icon:["handleIconChange"],hidden:["handleHiddenChange"]}}};b.style=l;export{b as nv_badge};
+//# sourceMappingURL=p-f1545844.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["nvBadgeCss","NvBadgeStyle0","NvBadge","constructor","hostRef","this","dismissal","color","label","leadIcon","dismissible","hidden","_isHidden","preventAutoClose","handleClose","originalEvent","closeClicked","emit","handleDismissalChange","handleIconChange","icon","handleHiddenChange","hiddenChanged","fadeIn","fadeOut","useFade","ref","duration","collapse","expand","useCollapse","timeline","start","hiddenChangedComplete","componentWillLoad","setCollapsed","setFadeOut","render","h","Host","key","class","clsx","name","slot","size","onClick","type"],"sources":["src/components/nv-badge/nv-badge.scss?tag=nv-badge","src/components/nv-badge/nv-badge.tsx"],"sourcesContent":["@use \"sass:map\";\n@use \"../nv-icon/styles/mixins\" as icon;\n@import \"../../styles/focus-ring\";\n\n/* Variants */\n$badge-colors: (\"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\", \"10\");\n\n/* Define maps for color-related variables */\n$color-rainbow-text: (\n  \"1\": var(--color-rainbow-1-text),\n  \"2\": var(--color-rainbow-2-text),\n  \"3\": var(--color-rainbow-3-text),\n  \"4\": var(--color-rainbow-4-text),\n  \"5\": var(--color-rainbow-5-text),\n  \"6\": var(--color-rainbow-6-text),\n  \"7\": var(--color-rainbow-7-text),\n  \"8\": var(--color-rainbow-8-text),\n  \"9\": var(--color-rainbow-9-text),\n  \"10\": var(--color-rainbow-10-text)\n);\n\n$color-rainbow-icon: (\n  \"1\": var(--color-rainbow-1-icon),\n  \"2\": var(--color-rainbow-2-icon),\n  \"3\": var(--color-rainbow-3-icon),\n  \"4\": var(--color-rainbow-4-icon),\n  \"5\": var(--color-rainbow-5-icon),\n  \"6\": var(--color-rainbow-6-icon),\n  \"7\": var(--color-rainbow-7-icon),\n  \"8\": var(--color-rainbow-8-icon),\n  \"9\": var(--color-rainbow-9-icon),\n  \"10\": var(--color-rainbow-10-icon)\n);\n\n$color-rainbow-background: (\n  \"1\": var(--color-rainbow-1-background),\n  \"2\": var(--color-rainbow-2-background),\n  \"3\": var(--color-rainbow-3-background),\n  \"4\": var(--color-rainbow-4-background),\n  \"5\": var(--color-rainbow-5-background),\n  \"6\": var(--color-rainbow-6-background),\n  \"7\": var(--color-rainbow-7-background),\n  \"8\": var(--color-rainbow-8-background),\n  \"9\": var(--color-rainbow-9-background),\n  \"10\": var(--color-rainbow-10-background)\n);\n\n@mixin root-styles() {\n  padding: var(--badge-padding-y) var(--badge-padding-x);\n  display: inline-flex !important; // override the display: none in [hidden] css\n  vertical-align: middle;\n  align-items: center;\n  border-radius: var(--radius-rounded-full);\n  height: fit-content;\n  width: fit-content;\n}\n\n@mixin root-styles-with-gap() {\n  @include root-styles();\n  gap: var(--badge-gap-x);\n}\n\n@mixin badge-color($badge-number) {\n  color: map.get($color-rainbow-text, $badge-number);\n  background-color: map.get($color-rainbow-background, $badge-number);\n  .close {\n    @include focus-ring(var(--color-rainbow-#{$badge-number}-content), 0.2);\n  }\n}\n\n@mixin icon-color($badge-number) {\n  color: map.get($color-rainbow-icon, $badge-number);\n}\n\n@mixin type-settings($font-size, $line-height) {\n  font-size: var(--font-size-xs);\n  line-height: var(--line-height-xs) !important;\n}\n\nnv-badge {\n  @include root-styles();\n\n  //gap styles\n  &.with-gap {\n    @include root-styles-with-gap();\n  }\n\n  &:not(.with-gap) {\n    @include root-styles();\n  }\n\n  // color styles\n  @each $i in $badge-colors {\n    &.badge-#{$i} {\n      @include badge-color($i);\n      nv-icon {\n        @include icon-color($i);\n      }\n    }\n  }\n\n  //label styles\n  & span {\n    @include type-settings(xs, xs);\n  }\n\n  // nv-icon styles\n  & nv-icon > svg {\n    @each $size, $config in icon.$size-variants {\n      &.icon-#{$size} {\n        @include icon.icon-size-and-stroke(\n          map.get(map.get(icon.$size-variants, \"xs\"), size),\n          map.get(map.get(icon.$size-variants, \"xs\"), stroke)\n        );\n      }\n    }\n  }\n\n  .close {\n    padding: 0;\n    line-height: 0;\n    border: none;\n    background: none;\n    cursor: pointer;\n    color: inherit;\n    display: inline-flex;\n    align-items: center;\n    aspect-ratio: 1/1;\n    border-radius: var(--radius-rounded-full);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Watch,\n  Element,\n  State,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { useFade, useCollapse, timeline } from '../../animations';\n\n/**\n * @slot leading-icon - Icon before the label.\n */\n@Component({\n  tag: 'nv-badge',\n  styleUrl: 'nv-badge.scss',\n  shadow: false,\n})\nexport class NvBadge {\n  @Element() ref: HTMLNvBadgeElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Whether the badge is dismissible.\n   * @deprecated use dismissible instead.\n   */\n  @Prop()\n  readonly dismissal: boolean = false;\n\n  /**\n   * The icon to display in the badge.\n   * @deprecated use leadIcon or slot=\"leading-icon\" instead.\n   */\n  @Prop()\n  readonly icon: string;\n\n  /**\n   * The location of the icon in the badge.\n   * @deprecated only leadIcon now.\n   */\n  @Prop({ reflect: true })\n  readonly iconLocation: 'left' | 'right';\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * The color of the badge. Use a string between 1 to 10\n   */\n  @Prop({ reflect: true })\n  readonly color?: string = '1';\n\n  /**\n   * Main content of the badge.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string | null = null;\n\n  /**\n   * The lead icon of the badge.\n   */\n  @Prop({ reflect: true, mutable: true })\n  leadIcon?: string | null = null;\n\n  /**\n   * Whether the badge is dismissible.\n   */\n  @Prop({ reflect: true, mutable: true })\n  dismissible: boolean = false;\n\n  /**\n   * Controls the visibility of the badge. Will animate with fade and collapse.\n   */\n  @Prop({ reflect: true, mutable: true })\n  hidden: boolean = false; // eslint-disable-line @stencil-community/reserved-member-names\n  @State()\n  private _isHidden: boolean = this.hidden;\n\n  /**\n   * When true, the alert does not automatically close upon dismissing.\n   * Useful for externally controlled component behavior.\n   */\n  @Prop({ reflect: true })\n  readonly preventAutoClose: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the badge is dismissed.\n   */\n  @Event()\n  closeClicked: EventEmitter<MouseEvent>;\n\n  /**\n   * Emits when the 'hidden' prop changes, reflecting a change in visibility.\n   * Passes hidden value to the detail.\n   */\n  @Event()\n  hiddenChanged: EventEmitter<boolean>;\n\n  /**\n   * Emitted when the animations complete, detail includes the hidden value.\n   */\n  @Event()\n  hiddenChangedComplete: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Handles the dismissal prop change.\n   * @param {boolean} dismissal - The new dismissal value.\n   */\n  @Watch('dismissal')\n  handleDismissalChange(dismissal: boolean) {\n    this.dismissible = dismissal;\n  }\n\n  /**\n   * Handles the icon prop change.\n   * @param {string} icon - The new icon value.\n   */\n  @Watch('icon')\n  handleIconChange(icon: string) {\n    this.leadIcon = icon;\n  }\n\n  /**\n   * Handles the hidden prop change.\n   * @param {boolean} hidden - The new hidden value.\n   */\n  @Watch('hidden')\n  async handleHiddenChange(hidden: boolean) {\n    this.hiddenChanged.emit(hidden);\n    if (this._isHidden === true) this._isHidden = hidden;\n\n    const { fadeIn, fadeOut } = useFade(this.ref, { duration: 150 });\n    const { collapse, expand } = useCollapse(this.ref, { duration: 150 });\n\n    if (hidden === true) await timeline(fadeOut, collapse).start();\n    if (hidden === false) await timeline(expand, fadeIn).start();\n\n    this.hiddenChangedComplete.emit(hidden);\n\n    if (this._isHidden === false) this._isHidden = hidden;\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  /**\n   * Component will load.\n   */\n  componentWillLoad() {\n    if (this.dismissal) {\n      this.dismissible = this.dismissal;\n    }\n\n    if (this.icon != null && this.icon != '') {\n      this.leadIcon = this.icon;\n    }\n\n    if (this.hidden) {\n      const { setCollapsed } = useCollapse(this.ref);\n      const { setFadeOut } = useFade(this.ref);\n\n      setCollapsed();\n      setFadeOut();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles the close button click.\n   * @param {MouseEvent} originalEvent - The original event.\n   */\n  private readonly handleClose = (originalEvent?: MouseEvent) => {\n    if (!this.preventAutoClose) {\n      this.hidden = true;\n    }\n\n    this.closeClicked.emit(originalEvent);\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={clsx(`badge-${this.color}`, {\n          'has-close': this.dismissible,\n          'with-gap': this.dismissible || this.label,\n          'visually-hidden': this._isHidden,\n        })}\n      >\n        <slot name=\"leading-icon\">\n          {this.leadIcon && (\n            <nv-icon\n              slot=\"leading-icon\"\n              name={this.leadIcon}\n              size=\"sm\"\n            ></nv-icon>\n          )}\n        </slot>\n        {this.label && <span>{this.label}</span>}\n        {this.dismissible && (\n          <button onClick={this.handleClose} class=\"close\" type=\"button\">\n            <nv-icon name=\"x\" size=\"sm\" />\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"mappings":"yKAAA,MAAMA,EAAa,+0LACnB,MAAAC,EAAeD,E,MCqBFE,EAAO,MALpB,WAAAC,CAAAC,G,+JAgBWC,KAAAC,UAAqB,MAwBrBD,KAAAE,MAAiB,IAMjBF,KAAAG,MAAwB,KAMjCH,KAAAI,SAA2B,KAM3BJ,KAAAK,YAAuB,MAMvBL,KAAAM,OAAkB,MAEVN,KAAAO,UAAqBP,KAAKM,OAOzBN,KAAAQ,iBAA4B,MAoGpBR,KAAAS,YAAeC,IAC9B,IAAKV,KAAKQ,iBAAkB,CAC1BR,KAAKM,OAAS,I,CAGhBN,KAAKW,aAAaC,KAAKF,EAAc,C,CAvEvC,qBAAAG,CAAsBZ,GACpBD,KAAKK,YAAcJ,C,CAQrB,gBAAAa,CAAiBC,GACff,KAAKI,SAAWW,C,CAQlB,wBAAMC,CAAmBV,GACvBN,KAAKiB,cAAcL,KAAKN,GACxB,GAAIN,KAAKO,YAAc,KAAMP,KAAKO,UAAYD,EAE9C,MAAMY,OAAEA,EAAMC,QAAEA,GAAYC,EAAQpB,KAAKqB,IAAK,CAAEC,SAAU,MAC1D,MAAMC,SAAEA,EAAQC,OAAEA,GAAWC,EAAYzB,KAAKqB,IAAK,CAAEC,SAAU,MAE/D,GAAIhB,IAAW,WAAYoB,EAASP,EAASI,GAAUI,QACvD,GAAIrB,IAAW,YAAaoB,EAASF,EAAQN,GAAQS,QAErD3B,KAAK4B,sBAAsBhB,KAAKN,GAEhC,GAAIN,KAAKO,YAAc,MAAOP,KAAKO,UAAYD,C,CAUjD,iBAAAuB,GACE,GAAI7B,KAAKC,UAAW,CAClBD,KAAKK,YAAcL,KAAKC,S,CAG1B,GAAID,KAAKe,MAAQ,MAAQf,KAAKe,MAAQ,GAAI,CACxCf,KAAKI,SAAWJ,KAAKe,I,CAGvB,GAAIf,KAAKM,OAAQ,CACf,MAAMwB,aAAEA,GAAiBL,EAAYzB,KAAKqB,KAC1C,MAAMU,WAAEA,GAAeX,EAAQpB,KAAKqB,KAEpCS,IACAC,G,EAwBJ,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAOC,EAAK,SAASrC,KAAKE,QAAS,CACjC,YAAaF,KAAKK,YAClB,WAAYL,KAAKK,aAAeL,KAAKG,MACrC,kBAAmBH,KAAKO,aAG1B0B,EAAA,QAAAE,IAAA,2CAAMG,KAAK,gBACRtC,KAAKI,UACJ6B,EAAA,WAAAE,IAAA,2CACEI,KAAK,eACLD,KAAMtC,KAAKI,SACXoC,KAAK,QAIVxC,KAAKG,OAAS8B,EAAA,QAAAE,IAAA,4CAAOnC,KAAKG,OAC1BH,KAAKK,aACJ4B,EAAA,UAAAE,IAAA,2CAAQM,QAASzC,KAAKS,YAAa2B,MAAM,QAAQM,KAAK,UACpDT,EAAA,WAAAE,IAAA,2CAASG,KAAK,IAAIE,KAAK,Q","ignoreList":[]}