@nova-design-system/nova-webcomponents 3.0.0-beta.17

package/dist/native/p-519e0f59.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as r,h as o,a as i,g as d}from"./p-db2a68f3.js";import{v as t}from"./p-f5ff676c.js";const n='nv-fieldpassword{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box}nv-fieldpassword[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldpassword[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fieldpassword[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fieldpassword[required]:not([required=false]) label::after{content:"*";color:var(--components-form-text-required);font-weight:700}nv-fieldpassword label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fieldpassword .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldpassword .input-wrapper .input-container{display:flex;flex-grow:1;padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);justify-content:center;align-items:center;gap:var(--form-field-gap);align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default);background:var(--nv-field-background);transition:all 150ms ease-out;position:relative}nv-fieldpassword .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldpassword .input-wrapper .input-container:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldpassword .input-wrapper .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldpassword .input-wrapper .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldpassword .input-wrapper .input-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height)}nv-fieldpassword .input-wrapper .input-container input:focus{outline:none}nv-fieldpassword .input-wrapper .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:"TT Norms Pro", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldpassword .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default);position:absolute;right:50px}nv-fieldpassword .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldpassword .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fieldpassword .toggle-password-icon{position:absolute;right:-1px;border:0 solid transparent !important}';const s=n;const a=class{constructor(o){e(this,o);this.valueChanged=r(this,"valueChanged",7);this.handleInputContainerClick=()=>{this.inputElement.focus()};this.togglePasswordVisibility=()=>{this.showPasswordState=!this.showPasswordState};this.handleKeyDown=e=>{if(e.key===" "){e.preventDefault();setTimeout((()=>{this.togglePasswordVisibility()}),0)}};this.handleInput=e=>{const r=e.target;this.value=r.value;this.valueChanged.emit(r.value)};this.inputId=t();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.pattern=undefined;this.mode="text";this.autocomplete="off";this.hidePasswordIcon=false;this.showPassword=false;this.showPasswordState=this.showPassword}handleShowPasswordChange(e){this.showPasswordState=e}render(){return o(i,{key:"12607b189f41947cc3083d2feb88bd47d2c24327"},(this.label||this.el.querySelector('[slot="label"]'))&&o("label",{key:"1f4055bc907a3c184c435e1c5d522bb8693d3177",htmlFor:this.inputId},o("slot",{key:"048db2f8c164b645b4087990731c0f78c14949b3",name:"label"},this.label)),o("div",{key:"c519d50463b405c0c887b96b9c2e15276dfcc179",class:"input-wrapper"},o("slot",{key:"e2a203745d188c4cf8ec2d68cdc795dafe260c89",name:"before-input"}),o("div",{key:"c19efd9bfdd1a685d4a77fc8caa43d0a5bc9f0d0",class:"input-container",onClick:this.handleInputContainerClick},o("slot",{key:"18554d4beb2fe523880e14738bbdfb0cf6d90fe2",name:"leading-input"}),o("input",{key:"b52c85804a3cb9d9705412bbb70aa0d37b4cd000",id:this.inputId,ref:e=>this.inputElement=e,autocomplete:this.autocomplete,placeholder:this.placeholder,name:this.name,type:this.showPasswordState?"text":"password",inputMode:this.mode,value:this.value,required:this.required,maxlength:this.maxlength,minlength:this.minlength,pattern:this.pattern,disabled:this.disabled,readOnly:this.readonly,onInput:this.handleInput}),!this.hidePasswordIcon&&o("nv-iconbutton",{key:"8b90cd19d7fcd2b10dcd8bff8862e09b4590f64b",class:"toggle-password-icon",name:this.showPasswordState?"eye":"eye-off",size:"md",emphasis:"lower",onClick:this.togglePasswordVisibility,onKeyDown:this.handleKeyDown,"aria-label":this.showPasswordState?"Hide password":"Show password","aria-pressed":this.showPasswordState.toString()}),(this.success||this.error)&&o("nv-icon",{key:"7de3d6d824a5e1d8b456a5cdaf44edc0f284a1f1",name:this.success?"circle-check":"alert-circle",class:"validation",size:"md"})),o("slot",{key:"ef0034098648349218e1de6850c55ee7bac830d3",name:"after-input"})),(this.description||this.el.querySelector('[slot="description"]'))&&o("div",{key:"00df78e3991f968880006eaca78f957e5e81e932",class:"description"},o("slot",{key:"4614e4cbdd49380194e337c4fe381cf426dd9be3",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&o("div",{key:"ef7fa856c04d4dc4751067184a3fd94c18ed5b0f",hidden:!this.error,class:"error-description"},o("slot",{key:"96c24255cf95f9172a1c41f2579106157f2c1b8a",name:"error-description"},this.errorDescription)))}static get formAssociated(){return true}get el(){return d(this)}static get watchers(){return{showPassword:["handleShowPasswordChange"]}}};a.style=s;export{a as nv_fieldpassword};
+//# sourceMappingURL=p-519e0f59.entry.js.map

package/dist/native/p-519e0f59.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["nvFieldpasswordCss","NvFieldpasswordStyle0","NvFieldpassword","this","handleInputContainerClick","inputElement","focus","togglePasswordVisibility","showPasswordState","handleKeyDown","event","key","preventDefault","setTimeout","handleInput","input","target","value","valueChanged","emit","uuidv4","showPassword","handleShowPasswordChange","newValue","render","h","Host","label","el","querySelector","htmlFor","inputId","name","class","onClick","id","ref","e","autocomplete","placeholder","type","inputMode","mode","required","maxlength","minlength","pattern","disabled","readOnly","readonly","onInput","hidePasswordIcon","size","emphasis","onKeyDown","toString","success","error","description","errorDescription","hidden"],"sources":["src/components/nv-fieldpassword/nv-fieldpassword.scss?tag=nv-fieldpassword","src/components/nv-fieldpassword/nv-fieldpassword.tsx"],"sourcesContent":["@import '../../styles/form-field';\n\nnv-fieldpassword {\n  @include form-field-variables();\n  @include form-field-root();\n\n  &[readonly]:not([readonly='false']) {\n    @include form-field-readonly-variables();\n  }\n\n  &[error]:not([error='false']) {\n    @include form-field-error-variables();\n  }\n\n  &[success]:not([success='false']) {\n    @include form-field-success-variables();\n  }\n\n  &[required]:not([required='false']) label {\n    @include form-field-label-required();\n  }\n\n  label {\n    @include form-field-label();\n  }\n\n  .input-wrapper {\n    @include form-field-input-wrapper();\n\n    .input-container {\n      @include form-field-input-container();\n\n      position: relative;\n\n      input {\n        @include form-field-input();\n      }\n\n      nv-icon.validation {\n        @include form-field-icon();\n\n        position: absolute;\n        right: 50px;\n      }\n    }\n  }\n\n  .description {\n    @include form-field-description();\n  }\n\n  .error-description {\n    @include form-field-error-description();\n  }\n\n  .toggle-password-icon {\n    position: absolute;\n    right: -1px;\n    border: 0 solid transparent !important;\n  }\n}\n","import {\n  Component,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  State,\n  Watch,\n} from '@stencil/core';\n\nimport { v4 as uuidv4 } from 'uuid';\nimport { TextInputAutocomplete } from '../../utils/constants';\n/**\n * @slot leading-input - Content to be placed before the input text, within the input container.\n * @slot before-input - Content to be placed before the input text, outside the input container.\n * @slot after-input - Content to be placed after the input text, outside the input container.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n\n@Component({\n  tag: 'nv-fieldpassword',\n  styleUrl: 'nv-fieldpassword.scss',\n  shadow: false,\n  formAssociated: true,\n})\nexport class NvFieldpassword {\n  @Element() el: HTMLNvFieldpasswordElement;\n  private inputElement!: HTMLInputElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the input element and the for attribute of the associated\n   * label. If no ID is provided, a random one will be automatically generated\n   * to ensure unique identification, facilitating proper label association and\n   * accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * Lets you define the text that explains what users should enter in the text\n   * input field. It’s a crucial element for making forms clear and\n   * user-friendly.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\n\n  /**\n   * Add helpful hints or extra information under the text input field. This is\n   * where you can clarify what users should enter or provide additional\n   * instructions, making the form easier to fill out correctly.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable\n  @Prop({ reflect: true, mutable: true })\n  description: string;\n\n  /**\n   * Display temporary text inside the input field to give users a hint about\n   * what to type. It’s a great way to provide examples or suggestions directly\n   * in the field before they start typing.\n   */\n  @Prop({ reflect: true })\n  readonly placeholder: string;\n\n  /**\n   * Defines the name attribute of the input field, which is crucial for form\n   * submission. This value is used as the key in the key-value pair sent to\n   * the server, representing the input’s data in form submissions. It should be\n   * unique within the form to avoid conflicts\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * Specifies the value of the input field, which determines the text displayed\n   * within the field. This prop is typically used in controlled components\n   * where the input’s value is managed by the component’s state.\n   */\n  @Prop({ reflect: true, mutable: true })\n  value: string;\n\n  /**\n   * The disabled prop lets you turn off the input field so that users can’t\n   * type in it. When disabled, the field is grayed out and won’t respond to#\n   * clicks or touches.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Display the input field’s content without allowing users to change it.\n   * Users can still click on it, select, and copy the text, but they won’t be\n   * able to type or delete anything.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks the input field as required, ensuring that the user must fill it out\n   * before submitting the form.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Alters the input field’s appearance to indicate an error, helping users\n   * identify fields that need correction.\n   * @validator error\n   */\n  @Prop({ reflect: true })\n  readonly error: boolean = false;\n\n  /**\n   * A description that appears when there is an error related to the password\n   * field.\n   * @validator message\n   */\n  @Prop({ reflect: true })\n  readonly errorDescription: string;\n\n  /**\n   * Changes the input field’s appearance to indicate successful input or\n   * validation.\n   */\n  @Prop({ reflect: true })\n  readonly success: boolean = false;\n\n  /**\n   * Limits how many characters users can type into the input field. It’s\n   * helpful for making sure users don’t enter too much information, keeping\n   * their input within the allowed limit.\n   */\n  @Prop({ reflect: true })\n  readonly maxlength: number;\n\n  /**\n   * Ensures that users type at least a certain number of characters into the\n   * input field. It’s a way to make sure users provide enough information\n   * before moving on.\n   */\n  @Prop({ reflect: true })\n  readonly minlength: number;\n\n  /**\n   * Set rules for how the input should be formatted. For example, you can\n   * require that a phone number includes only digits or that an email address\n   * has the correct format. If users don’t follow these rules, they’ll get a\n   * prompt to correct their input.\n   * the rules are applied to the input value via regexes.\n   */\n  @Prop({ reflect: true })\n  readonly pattern: string;\n\n  /**\n   * Defines the type of the input.\n   * @default 'text'\n   */\n  @Prop({ reflect: true })\n  readonly mode: 'text' | 'number' = 'text';\n\n  /**\n   * The autocomplete prop helps users fill out the input field faster by\n   * suggesting entries they’ve used before, like their email or address.\n   * You can turn it on to make forms more convenient or off to ensure users\n   * always type in fresh data.\n   */\n  @Prop({ reflect: true })\n  readonly autocomplete: `${TextInputAutocomplete}` = 'off';\n\n  /**\n   * Hide the button to show/hide the password.\n   */\n  @Prop({ reflect: true })\n  readonly hidePasswordIcon: boolean = false;\n\n  /**\n   * Show/hide the password programmatically.\n   */\n  @Prop({ reflect: true })\n  readonly showPassword: boolean = false;\n\n  /**\n   * Defines whether the password is visible or not.\n   */\n  @State()\n  showPasswordState: boolean = this.showPassword;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the input value changes.\n   * @bind value\n   */\n  @Event()\n  valueChanged: EventEmitter<string>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region METHODS\n\n  private handleInputContainerClick = () => {\n    this.inputElement.focus();\n  };\n\n  @Watch('showPassword')\n  handleShowPasswordChange(newValue: boolean) {\n    this.showPasswordState = newValue;\n  }\n\n  private togglePasswordVisibility = () => {\n    this.showPasswordState = !this.showPasswordState;\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === ' ') {\n      event.preventDefault(); // Prevent the space character from being added\n      setTimeout(() => {\n        this.togglePasswordVisibility();\n      }, 0);\n    }\n  };\n\n  private handleInput = (event: Event) => {\n    const input = event.target as HTMLInputElement;\n    this.value = input.value; // Update the input value without worrying about the space\n    this.valueChanged.emit(input.value);\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n          <label htmlFor={this.inputId}>\n            <slot name=\"label\">{this.label}</slot>\n          </label>\n        )}\n\n        <div class=\"input-wrapper\">\n          <slot name=\"before-input\"></slot>\n\n          <div class=\"input-container\" onClick={this.handleInputContainerClick}>\n            <slot name=\"leading-input\"></slot>\n\n            <input\n              id={this.inputId}\n              ref={e => (this.inputElement = e)}\n              autocomplete={this.autocomplete}\n              placeholder={this.placeholder}\n              name={this.name}\n              type={this.showPasswordState ? 'text' : 'password'}\n              inputMode={this.mode}\n              value={this.value}\n              required={this.required}\n              maxlength={this.maxlength}\n              minlength={this.minlength}\n              pattern={this.pattern}\n              disabled={this.disabled}\n              readOnly={this.readonly}\n              onInput={this.handleInput}\n            />\n\n            {!this.hidePasswordIcon && (\n              <nv-iconbutton\n                class=\"toggle-password-icon\"\n                name={this.showPasswordState ? 'eye' : 'eye-off'}\n                size=\"md\"\n                emphasis=\"lower\"\n                onClick={this.togglePasswordVisibility}\n                onKeyDown={this.handleKeyDown}\n                aria-label={\n                  this.showPasswordState ? 'Hide password' : 'Show password'\n                }\n                aria-pressed={this.showPasswordState.toString()}\n              />\n            )}\n\n            {(this.success || this.error) && (\n              <nv-icon\n                name={this.success ? 'circle-check' : 'alert-circle'}\n                class=\"validation\"\n                size=\"md\"\n              />\n            )}\n          </div>\n\n          <slot name=\"after-input\"></slot>\n        </div>\n\n        {(this.description ||\n          this.el.querySelector('[slot=\"description\"]')) && (\n          <div class=\"description\">\n            <slot name=\"description\">{this.description}</slot>\n          </div>\n        )}\n\n        {(this.errorDescription ||\n          this.el.querySelector('[slot=\"error-description\"]')) && (\n          <div hidden={!this.error} class=\"error-description\">\n            <slot name=\"error-description\">{this.errorDescription}</slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"oGAAA,MAAMA,EAAqB,k7JAC3B,MAAAC,EAAeD,E,MC4BFE,EAAe,M,oEAmLlBC,KAAAC,0BAA4B,KAClCD,KAAKE,aAAaC,OAAO,EAQnBH,KAAAI,yBAA2B,KACjCJ,KAAKK,mBAAqBL,KAAKK,iBAAiB,EAG1CL,KAAAM,cAAiBC,IACvB,GAAIA,EAAMC,MAAQ,IAAK,CACrBD,EAAME,iBACNC,YAAW,KACTV,KAAKI,0BAA0B,GAC9B,E,GAICJ,KAAAW,YAAeJ,IACrB,MAAMK,EAAQL,EAAMM,OACpBb,KAAKc,MAAQF,EAAME,MACnBd,KAAKe,aAAaC,KAAKJ,EAAME,MAAM,E,aA9LVG,I,kIAkDE,M,cAQA,M,cAOA,M,WAQH,M,6CAeE,M,mFAiCO,O,kBASiB,M,sBAMf,M,kBAMJ,M,uBAMJjB,KAAKkB,Y,CAsBlC,wBAAAC,CAAyBC,GACvBpB,KAAKK,kBAAoBe,C,CA0B3B,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAf,IAAA,6CACDR,KAAKwB,OAASxB,KAAKyB,GAAGC,cAAc,oBACpCJ,EAAA,SAAAd,IAAA,2CAAOmB,QAAS3B,KAAK4B,SACnBN,EAAA,QAAAd,IAAA,2CAAMqB,KAAK,SAAS7B,KAAKwB,QAI7BF,EAAA,OAAAd,IAAA,2CAAKsB,MAAM,iBACTR,EAAA,QAAAd,IAAA,2CAAMqB,KAAK,iBAEXP,EAAA,OAAAd,IAAA,2CAAKsB,MAAM,kBAAkBC,QAAS/B,KAAKC,2BACzCqB,EAAA,QAAAd,IAAA,2CAAMqB,KAAK,kBAEXP,EAAA,SAAAd,IAAA,2CACEwB,GAAIhC,KAAK4B,QACTK,IAAKC,GAAMlC,KAAKE,aAAegC,EAC/BC,aAAcnC,KAAKmC,aACnBC,YAAapC,KAAKoC,YAClBP,KAAM7B,KAAK6B,KACXQ,KAAMrC,KAAKK,kBAAoB,OAAS,WACxCiC,UAAWtC,KAAKuC,KAChBzB,MAAOd,KAAKc,MACZ0B,SAAUxC,KAAKwC,SACfC,UAAWzC,KAAKyC,UAChBC,UAAW1C,KAAK0C,UAChBC,QAAS3C,KAAK2C,QACdC,SAAU5C,KAAK4C,SACfC,SAAU7C,KAAK8C,SACfC,QAAS/C,KAAKW,eAGdX,KAAKgD,kBACL1B,EAAA,iBAAAd,IAAA,2CACEsB,MAAM,uBACND,KAAM7B,KAAKK,kBAAoB,MAAQ,UACvC4C,KAAK,KACLC,SAAS,QACTnB,QAAS/B,KAAKI,yBACd+C,UAAWnD,KAAKM,cAAa,aAE3BN,KAAKK,kBAAoB,gBAAkB,gBAAe,eAE9CL,KAAKK,kBAAkB+C,cAIvCpD,KAAKqD,SAAWrD,KAAKsD,QACrBhC,EAAA,WAAAd,IAAA,2CACEqB,KAAM7B,KAAKqD,QAAU,eAAiB,eACtCvB,MAAM,aACNmB,KAAK,QAKX3B,EAAA,QAAAd,IAAA,2CAAMqB,KAAK,kBAGX7B,KAAKuD,aACLvD,KAAKyB,GAAGC,cAAc,0BACtBJ,EAAA,OAAAd,IAAA,2CAAKsB,MAAM,eACTR,EAAA,QAAAd,IAAA,2CAAMqB,KAAK,eAAe7B,KAAKuD,eAIjCvD,KAAKwD,kBACLxD,KAAKyB,GAAGC,cAAc,gCACtBJ,EAAA,OAAAd,IAAA,2CAAKiD,QAASzD,KAAKsD,MAAOxB,MAAM,qBAC9BR,EAAA,QAAAd,IAAA,2CAAMqB,KAAK,qBAAqB7B,KAAKwD,mB","ignoreList":[]}

package/dist/native/p-617d6a09.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as r,h as t,a as i,g as o}from"./p-db2a68f3.js";import{v as l}from"./p-f5ff676c.js";const s='nv-fieldselect{--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-fieldselect[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-fieldselect[display-value]:not([display-value=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-fieldselect[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-fieldselect[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-fieldselect[required]:not([required=false]) label::after{content:"*";color:var(--components-form-text-required);font-weight:700}nv-fieldselect 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-fieldselect .select-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldselect .select-wrapper .select-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-fieldselect .select-wrapper .select-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldselect .select-wrapper .select-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-fieldselect .select-wrapper .select-container:has(select:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldselect .select-wrapper .select-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-fieldselect .select-wrapper .select-container input:focus{outline:none}nv-fieldselect .select-wrapper .select-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-fieldselect .select-wrapper .select-container input:read-only{opacity:0.5;background-color:var(--components-form-field-background-readonly, rgba(0, 0, 0, 0.1));border-color:var(--nv-field-border-readonly)}nv-fieldselect .select-wrapper .select-container select{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-fieldselect .select-wrapper .select-container select:focus{outline:none}nv-fieldselect .select-wrapper .select-container select::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-fieldselect .select-wrapper .select-container select option{background-color:var(--nv-field-background);color:var(--components-form-field-content-text, #1d1d1d);font-size:var(--form-field-font-size, 16px);font-style:normal;font-weight:500;line-height:var(--form-field-line-height, 24px)}nv-fieldselect .select-wrapper .select-container select option:checked{background-color:var(--color-orange-500);color:var(--color-base-content-high-emphasis);font-size:var(--form-field-font-size, 16px);font-style:normal;font-weight:500;line-height:var(--form-field-line-height, 24px)}nv-fieldselect .select-wrapper .select-container select.hidden{display:none}nv-fieldselect .select-wrapper .select-container nv-icon.readonly-icon{color:var(--nv-field-border-default)}nv-fieldselect .select-wrapper .select-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldselect .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-fieldselect .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 n=s;const d=class{constructor(t){e(this,t);this.valueChanged=r(this,"valueChanged",7);this.handleSelectChange=e=>{const r=e.target;let t=Array.from(r.selectedOptions).map((e=>e.value));if(!this.multiple){t=t.slice(0,1)}this.value=this.multiple?t.join(", "):t[0]||"";this.valueChanged.emit(this.value);this.setFormValue()};this.handleSelectContainerClick=()=>{if(!this.internalReadonly&&this.selectElement){this.selectElement.focus()}};this.computedDisplayValue="";this.internalReadonly=false;this.message=undefined;this.validation=undefined;this.selectId=l();this.label=undefined;this.description=undefined;this.name=undefined;this.disabled=false;this.readonly=false;this.required=false;this.error=false;this.errorDescription=undefined;this.success=false;this.multiple=false;this.value="";this.displayValue=false}componentWillRender(){this.updateDisplayValue();if(this.message){this.description=this.message}if(this.validation){this.errorDescription=this.validation;this.error=true}}updateDisplayValueWatcher(e){this.updateDisplayValue();if(this.selectElement){const r=e.split(",").map((e=>e.trim()));const t=this.selectElement.options;if(t){Array.from(t).forEach((e=>{e.selected=this.multiple?r.includes(e.value):e.value===r[0]}));if(!this.multiple){this.selectElement.value=e}}else{this.selectElement.value=r[0]||""}}this.setFormValue()}handleDisplayValueChange(e){this.internalReadonly=e;if(this.readonly){this.internalReadonly=true}}handleReadonlyChange(e){this.internalReadonly=e;if(this.displayValue){this.internalReadonly=true}}updateDisplayValue(){if(this.internalReadonly&&!this.displayValue){if(this.multiple){const e=this.value.split(",").map((e=>e.trim())).map((e=>this.getLabelFromId(e)||"")).filter((e=>e!==""));this.computedDisplayValue=e.join(", ")||""}else{this.computedDisplayValue=this.getLabelFromId(this.value)||""}}else if(this.internalReadonly&&this.displayValue){this.computedDisplayValue=this.value||""}}getLabelFromId(e){this.ensureSelectElement();if(!this.selectElement){return""}const r=this.selectElement.options;if(r){const t=Array.from(r).find((r=>r.value===e));return t?t.textContent.trim()||"":""}else{return""}}setFormValue(){this.internals.setFormValue(this.value)}ensureSelectElement(){if(!this.selectElement){this.selectElement=this.el.querySelector("select")}}componentWillLoad(){this.internalReadonly=this.readonly;if(this.displayValue){this.internalReadonly=true}if("attachInternals"in this.el){this.internals=this.el.attachInternals()}else{this.internals={setFormValue:e=>{const r=this.el.closest("form");if(r){const t=document.createElement("input");t.type="hidden";t.name=this.name;t.value=e;r.appendChild(t)}}}}if(this.multiple&&typeof this.value!=="string"){this.value=""}}componentDidLoad(){this.updateDisplayValue();if(this.selectElement){if(!this.multiple){this.selectElement.value=this.value}const e=this.multiple?this.value.split(",").map((e=>e.trim())):[this.value];const r=this.selectElement.options;if(r){Array.from(r).forEach((r=>{r.selected=this.multiple?e.includes(r.value):r.value===e[0]}))}else{this.selectElement.value=e[0]||""}}this.setFormValue()}render(){return t(i,{key:"b610d79592893cf82b0ef164f833cc033f43416d"},(this.label||this.el.querySelector('[slot="label"]'))&&t("label",{key:"a8232954b2230c8b44d2aadba0aba5cfd71813b5",htmlFor:this.selectId},t("slot",{key:"457157a4cc3dece0363f13ec6c7d3357505e69f8",name:"label"},this.label)),t("div",{key:"39b1f61586fb2e5784dba297f5f1080d5f9ab560",class:"select-wrapper"},t("slot",{key:"9ba008fe7250f95e0158e7b0cb530ae565d6bc7f",name:"before-input"}),t("div",{key:"e2b0b254fc64d5c33cd0252469fbf9024b6735b2",class:"select-container",onClick:this.handleSelectContainerClick},t("slot",{key:"9b8158bb110cecc1bd8dd37082b813a1231d7392",name:"leading-input"}),this.internalReadonly&&t("input",{key:"65163fd120b753358bf45aa731be03e1291473c2",id:this.selectId+"-readonly",type:"text",value:this.computedDisplayValue,readOnly:true,class:"readonly-input","aria-readonly":"true","aria-label":this.label,"aria-describedby":this.error?`${this.selectId}-error`:`${this.selectId}-description`}),t("select",{key:"5f38318e3c073e9514c9bd3d429455fc7657b783",id:this.selectId,ref:e=>this.selectElement=e,name:this.name,disabled:this.disabled,required:this.required,multiple:this.multiple,onChange:this.handleSelectChange,class:this.internalReadonly?"hidden":"","aria-label":this.label,"aria-describedby":this.error?`${this.selectId}-error`:`${this.selectId}-description`},t("slot",{key:"c8f9b54cd6d88603070e34748b8115ae8ccfd522"})),this.internalReadonly&&t("nv-icon",{key:"bc0151f125212a1044768a3110982cef8da0b26e",name:"chevron-down",class:"readonly-icon",size:"sm"}),this.error&&t("nv-icon",{key:"e0883e47712cfc57746ca4167df0924ad1501e57",name:"alert-circle",class:"validation",size:"sm"}),this.success&&t("nv-icon",{key:"085c0833541a4ff6e6fbbf3350e4fc4ae570e0ec",name:"circle-check",class:"validation",size:"sm"})),t("slot",{key:"436a1faa2b2d6d651f32556f1d69c6e6b9bdb318",name:"after-input"})),(this.description||this.el.querySelector('[slot="description"]'))&&t("div",{key:"c734be03a4741a2dd03406997874cf6044954214",class:"description",id:`${this.selectId}-description`},t("slot",{key:"dd91d274fd97401a0dbf9b5f68fe23670b2ccf02",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&t("div",{key:"45998c6f7ecf2ee9a63c566e1f8826d1e321779c",class:"error-description",id:`${this.selectId}-error`},t("slot",{key:"807d57d77f557d4f0d920df6ec914c2c559e4431",name:"error-description"},this.errorDescription)))}static get formAssociated(){return true}get el(){return o(this)}static get watchers(){return{value:["updateDisplayValueWatcher"],displayValue:["handleDisplayValueChange"],readonly:["handleReadonlyChange"]}}};d.style=n;export{d as nv_fieldselect};
+//# sourceMappingURL=p-617d6a09.entry.js.map

package/dist/native/p-617d6a09.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["nvFieldselectCss","NvFieldselectStyle0","NvFieldselect","this","handleSelectChange","event","select","target","selectedValues","Array","from","selectedOptions","map","option","value","multiple","slice","join","valueChanged","emit","setFormValue","handleSelectContainerClick","internalReadonly","selectElement","focus","uuidv4","componentWillRender","updateDisplayValue","message","description","validation","errorDescription","error","updateDisplayValueWatcher","newValue","split","val","trim","options","forEach","selected","includes","handleDisplayValueChange","readonly","handleReadonlyChange","displayValue","selectedLabels","key","getLabelFromId","filter","label","computedDisplayValue","ensureSelectElement","find","textContent","internals","el","querySelector","componentWillLoad","attachInternals","formElement","closest","input","document","createElement","type","name","appendChild","componentDidLoad","v","render","h","Host","htmlFor","selectId","class","onClick","id","readOnly","ref","disabled","required","onChange","size","success"],"sources":["src/components/nv-fieldselect/nv-fieldselect.scss?tag=nv-fieldselect","src/components/nv-fieldselect/nv-fieldselect.tsx"],"sourcesContent":["@import \"../../styles/form-field\";\n\n@mixin form-field-select-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-select-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\n  &:has(select: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-select() {\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-fieldselect {\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  &[display-value]:not([display-value=\"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  .select-wrapper {\n    @include form-field-select-wrapper();\n\n    .select-container {\n      @include form-field-select-container();\n\n      input {\n        @include form-field-input();\n\n        &:read-only {\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-readonly, rgb(0 0 0 / 10%));\n          border-color: var(--nv-field-border-readonly);\n        }\n      }\n\n      select {\n        @include form-field-select();\n\n        & option {\n          background-color: var(--nv-field-background);\n          color: var(--components-form-field-content-text, #1d1d1d);\n          font-size: var(--form-field-font-size, 16px);\n          font-style: normal;\n          font-weight: 500;\n          line-height: var(--form-field-line-height, 24px);\n\n          &:checked {\n            background-color: var(--color-orange-500);\n            color: var(--color-base-content-high-emphasis);\n            font-size: var(--form-field-font-size, 16px);\n            font-style: normal;\n            font-weight: 500;\n            line-height: var(--form-field-line-height, 24px);\n          }\n        }\n\n        &.hidden {\n          display: none;\n        }\n      }\n\n      nv-icon.readonly-icon {\n        @include form-field-icon();\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  Watch,\n  Element,\n  State,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\n/**\n * @slot default - Content to be placed inside the select element.\n * @slot leading-input - Content to be placed before the select input, within the select container.\n * @slot before-input - Content to be placed before the select input, outside the select container.\n * @slot after-input - Content to be placed after the select input, outside the select 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-fieldselect',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'nv-fieldselect.scss',\n})\nexport class NvFieldselect {\n  @Element() el: HTMLNvFieldselectElement;\n  private selectElement!: HTMLSelectElement;\n  private internals: ElementInternals;\n\n  /****************************************************************************/\n  //#region STATES\n\n  @State()\n  private computedDisplayValue: string = '';\n\n  @State()\n  private internalReadonly: boolean = false;\n\n  //#endregion STATES\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Message defines a 'hint ' message for the Select 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    this.updateDisplayValue(); // Ensure display value is updated before render\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 select 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 selectId: string = uuidv4();\n\n  /**\n   * Lets you define the text that explains what users should choose in the\n   * select 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 select field. This is\n   * where you can clarify what users should choose 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   * Defines the name attribute of the select 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 selected data in form submissions. It should be\n   * unique within the form to avoid conflicts\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * The disabled prop lets you turn off the select field so that users can’t\n   * choose something. 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 select 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 change or delete anything.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks the select 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 select 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 select 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 select field’s appearance to indicate successful input or\n   * validation.\n   */\n  @Prop({ reflect: true })\n  readonly success: boolean = false;\n\n  /**\n   * When enabled, allows the select to handle multiple selections.\n   */\n  @Prop({ reflect: true })\n  readonly multiple: boolean = false;\n\n  /**\n   * The value of the select field.\n   * - If `multiple` is `false`, it's a single string.\n   * - If `multiple` is `true`, it's a comma-separated string of selected values.\n   */\n  @Prop({ reflect: true, mutable: true })\n  value: string = '';\n\n  /**\n   * When enabled, displays the value element instead of the label when readonly.\n   * By default, the label is displayed in readonly mode. Also it automatically\n   * sets the component to readonly.\n   */\n  @Prop({ reflect: true })\n  readonly displayValue: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the selected value changes.\n   * @bind value\n   */\n  @Event()\n  valueChanged: EventEmitter<string>; // Emit as a string\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Updates the display value when the value property changes. This watcher is\n   * used to update the display value when the selected value changes. This is\n   * necessary for readonly select fields to display the selected value.\n   * @internal This watcher is not intended to be called outside of the component.\n   * @param {string} newValue - The new value of the select field.\n   */\n  @Watch('value')\n  updateDisplayValueWatcher(newValue: string) {\n    this.updateDisplayValue();\n\n    if (this.selectElement) {\n      const selectedValues = newValue.split(',').map(val => val.trim());\n      const options = this.selectElement.options;\n\n      if (options) {\n        Array.from(options).forEach(option => {\n          option.selected = this.multiple\n            ? selectedValues.includes(option.value)\n            : option.value === selectedValues[0];\n        });\n\n        if (!this.multiple) {\n          this.selectElement.value = newValue; // Only set when not multiple\n        }\n      } else {\n        this.selectElement.value = selectedValues[0] || '';\n      }\n    }\n\n    // Update form value\n    this.setFormValue();\n  }\n\n  /**\n   * Watcher for the displayValue prop to ensure internalReadonly is true when displayValue is true.\n   * @param {boolean} newValue - The new value of displayValue.\n   */\n  @Watch('displayValue')\n  handleDisplayValueChange(newValue: boolean) {\n    this.internalReadonly = newValue; // Set internalReadonly to true if displayValue is true\n\n    if (this.readonly) {\n      this.internalReadonly = true;\n    }\n  }\n\n  /**\n   * Watcher for the readonly prop to ensure internalReadonly is true when readonly is true.\n   * @param {boolean} newValue - The new value of readonly.\n   */\n  @Watch('readonly')\n  handleReadonlyChange(newValue: boolean) {\n    this.internalReadonly = newValue; // Set internalReadonly to true if displayValue is true\n\n    if (this.displayValue) {\n      this.internalReadonly = true;\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles the change event on the select element. This method is used to\n   * update the value property when the selected options change. It is also\n   * used to emit the selectChanged event when the selected value changes.\n   * @param {Event} event - The change event on the select element.\n   * @emits selectChanged\n   */\n  private readonly handleSelectChange = (event: Event) => {\n    const select = event.target as HTMLSelectElement;\n    let selectedValues: string[] = Array.from(select.selectedOptions).map(\n      option => option.value,\n    );\n\n    if (!this.multiple) {\n      selectedValues = selectedValues.slice(0, 1);\n    }\n\n    this.value = this.multiple\n      ? selectedValues.join(', ')\n      : selectedValues[0] || '';\n    this.valueChanged.emit(this.value);\n\n    // Update form value\n    this.setFormValue();\n  };\n\n  /**\n   * Handles focus when the select container is clicked.\n   */\n  private readonly handleSelectContainerClick = () => {\n    if (!this.internalReadonly && this.selectElement) {\n      this.selectElement.focus();\n    }\n  };\n\n  /**\n   * Updates the display value of the select field. This method is used to\n   * update the display value when the selected value changes. This is necessary\n   * for readonly select fields to display the selected value. This method is\n   * called in the componentDidLoad lifecycle hook and the updateDisplayValueWatcher\n   * watcher.\n   * @internal This method is not intended to be called outside of the component.\n   */\n  private updateDisplayValue(): void {\n    if (this.internalReadonly && !this.displayValue) {\n      if (this.multiple) {\n        const selectedLabels = this.value\n          .split(',')\n          .map(key => key.trim())\n          .map(key => this.getLabelFromId(key) || '')\n          .filter(label => label !== '');\n        this.computedDisplayValue = selectedLabels.join(', ') || '';\n      } else {\n        this.computedDisplayValue = this.getLabelFromId(this.value) || '';\n      }\n    } else if (this.internalReadonly && this.displayValue) {\n      this.computedDisplayValue = this.value || '';\n    }\n  }\n\n  /**\n   * Retrieves the label from the <option> elements based on the provided key (value).\n   * This method uses the id or value attribute directly from the <select> options.\n   * @param {string} key - The key (value) for which to find the corresponding label.\n   * @returns {string} The label if found; otherwise, an empty string.\n   */\n  private getLabelFromId(key: string): string {\n    this.ensureSelectElement();\n    if (!this.selectElement) {\n      return '';\n    }\n\n    // Cache the option list\n    const options = this.selectElement.options;\n\n    if (options) {\n      const option = Array.from(options).find(option => option.value === key);\n      return option ? option.textContent.trim() || '' : '';\n    } else {\n      return '';\n    }\n  }\n\n  /**\n   * Sets the value of the form element for form submission. This method is\n   * called when the selected value changes or when the value property is set.\n   * @internal This method is not intended to be called outside of the component.\n   */\n  private setFormValue(): void {\n    this.internals.setFormValue(this.value);\n  }\n\n  /**\n   * Ensures the select element is available. This method is used to ensure\n   * the select element is available before attempting to access it.\n   * @internal This method is not intended to be called outside of the component.\n   */\n  private ensureSelectElement(): void {\n    if (!this.selectElement) {\n      this.selectElement = this.el.querySelector('select') as HTMLSelectElement;\n    }\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  /**\n   * Lifecycle method that is called before the component is rendered. This is\n   * where the internal state is set up before rendering occurs.\n   */\n  componentWillLoad() {\n    // Set internalReadonly based on the readonly prop\n    this.internalReadonly = this.readonly;\n\n    // Ensure internalReadonly is true if displayValue is true during loading\n    if (this.displayValue) {\n      this.internalReadonly = true;\n    }\n\n    if ('attachInternals' in this.el) {\n      this.internals = (\n        this.el as HTMLElement & { attachInternals: () => ElementInternals }\n      ).attachInternals();\n    } else {\n      // Fallback logic for browsers without attachInternals support\n      this.internals = {\n        setFormValue: (value: string) => {\n          const formElement = this.el.closest('form');\n          if (formElement) {\n            const input = document.createElement('input');\n            input.type = 'hidden';\n            input.name = this.name;\n            input.value = value;\n            formElement.appendChild(input);\n          }\n        },\n      } as ElementInternals;\n    }\n\n    // Initialize value as an empty string if multiple is true\n    if (this.multiple && typeof this.value !== 'string') {\n      this.value = '';\n    }\n  }\n\n  /**\n   * Lifecycle method that is called after the component has been rendered.\n   * This is where the display value is updated and the initial select element's\n   * state is set.\n   */\n  componentDidLoad() {\n    this.updateDisplayValue();\n\n    if (this.selectElement) {\n      // Only set the value for single selection, skip for multiple\n      if (!this.multiple) {\n        this.selectElement.value = this.value;\n      }\n\n      const selectedValues = this.multiple\n        ? this.value.split(',').map(v => v.trim())\n        : [this.value];\n\n      const options = this.selectElement.options;\n\n      if (options) {\n        Array.from(options).forEach(option => {\n          option.selected = this.multiple\n            ? selectedValues.includes(option.value)\n            : option.value === selectedValues[0];\n        });\n      } else {\n        // Handle case where there are no options\n        this.selectElement.value = selectedValues[0] || '';\n      }\n    }\n\n    // Set the initial form value\n    this.setFormValue();\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDERING\n\n  /**\n   * The render method creates the HTML structure for the component, including\n   * the label, select element, and any error or description messages. It also\n   * applies the appropriate CSS classes based on the readonly state and\n   * displayValue prop. This method is called when the component is rendered.\n   * @returns {HTMLStencilElement} The HTML element to render.\n   */\n  render() {\n    return (\n      <Host>\n        {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n          <label htmlFor={this.selectId}>\n            <slot name=\"label\">{this.label}</slot>\n          </label>\n        )}\n\n        <div class=\"select-wrapper\">\n          <slot name=\"before-input\"></slot>\n\n          <div\n            class=\"select-container\"\n            onClick={this.handleSelectContainerClick}\n          >\n            <slot name=\"leading-input\"></slot>\n\n            {this.internalReadonly && (\n              <input\n                id={this.selectId + '-readonly'}\n                type=\"text\"\n                value={this.computedDisplayValue}\n                readOnly\n                class=\"readonly-input\"\n                aria-readonly=\"true\"\n                aria-label={this.label}\n                aria-describedby={\n                  this.error\n                    ? `${this.selectId}-error`\n                    : `${this.selectId}-description`\n                }\n              />\n            )}\n\n            <select\n              id={this.selectId}\n              ref={el => (this.selectElement = el)}\n              name={this.name}\n              disabled={this.disabled}\n              required={this.required}\n              multiple={this.multiple}\n              onChange={this.handleSelectChange}\n              class={this.internalReadonly ? 'hidden' : ''}\n              aria-label={this.label}\n              aria-describedby={\n                this.error\n                  ? `${this.selectId}-error`\n                  : `${this.selectId}-description`\n              }\n            >\n              <slot></slot>\n            </select>\n\n            {this.internalReadonly && (\n              <nv-icon name=\"chevron-down\" class=\"readonly-icon\" size=\"sm\" />\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\" id={`${this.selectId}-description`}>\n            <slot name=\"description\">{this.description}</slot>\n          </div>\n        )}\n\n        {(this.errorDescription ||\n          this.el.querySelector('[slot=\"error-description\"]')) && (\n          <div class=\"error-description\" id={`${this.selectId}-error`}>\n            <slot name=\"error-description\">{this.errorDescription}</slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDERING\n}\n"],"mappings":"oGAAA,MAAMA,EAAmB,4oNACzB,MAAAC,EAAeD,E,MC2BFE,EAAa,M,oEA8OPC,KAAAC,mBAAsBC,IACrC,MAAMC,EAASD,EAAME,OACrB,IAAIC,EAA2BC,MAAMC,KAAKJ,EAAOK,iBAAiBC,KAChEC,GAAUA,EAAOC,QAGnB,IAAKX,KAAKY,SAAU,CAClBP,EAAiBA,EAAeQ,MAAM,EAAG,E,CAG3Cb,KAAKW,MAAQX,KAAKY,SACdP,EAAeS,KAAK,MACpBT,EAAe,IAAM,GACzBL,KAAKe,aAAaC,KAAKhB,KAAKW,OAG5BX,KAAKiB,cAAc,EAMJjB,KAAAkB,2BAA6B,KAC5C,IAAKlB,KAAKmB,kBAAoBnB,KAAKoB,cAAe,CAChDpB,KAAKoB,cAAcC,O,6BA7PgB,G,sBAGH,M,+DA4CRC,I,kFAiCC,M,cAQA,M,cAOA,M,WAQZ,M,6CAgBW,M,cAMC,M,WAQb,G,kBAQiB,K,CAtHjC,mBAAAC,GACEvB,KAAKwB,qBAEL,GAAIxB,KAAKyB,QAAS,CAChBzB,KAAK0B,YAAc1B,KAAKyB,O,CAG1B,GAAIzB,KAAK2B,WAAY,CACnB3B,KAAK4B,iBAAmB5B,KAAK2B,WAC7B3B,KAAK6B,MAAQ,I,EAsIjB,yBAAAC,CAA0BC,GACxB/B,KAAKwB,qBAEL,GAAIxB,KAAKoB,cAAe,CACtB,MAAMf,EAAiB0B,EAASC,MAAM,KAAKvB,KAAIwB,GAAOA,EAAIC,SAC1D,MAAMC,EAAUnC,KAAKoB,cAAce,QAEnC,GAAIA,EAAS,CACX7B,MAAMC,KAAK4B,GAASC,SAAQ1B,IAC1BA,EAAO2B,SAAWrC,KAAKY,SACnBP,EAAeiC,SAAS5B,EAAOC,OAC/BD,EAAOC,QAAUN,EAAe,EAAE,IAGxC,IAAKL,KAAKY,SAAU,CAClBZ,KAAKoB,cAAcT,MAAQoB,C,MAExB,CACL/B,KAAKoB,cAAcT,MAAQN,EAAe,IAAM,E,EAKpDL,KAAKiB,c,CAQP,wBAAAsB,CAAyBR,GACvB/B,KAAKmB,iBAAmBY,EAExB,GAAI/B,KAAKwC,SAAU,CACjBxC,KAAKmB,iBAAmB,I,EAS5B,oBAAAsB,CAAqBV,GACnB/B,KAAKmB,iBAAmBY,EAExB,GAAI/B,KAAK0C,aAAc,CACrB1C,KAAKmB,iBAAmB,I,EAmDpB,kBAAAK,GACN,GAAIxB,KAAKmB,mBAAqBnB,KAAK0C,aAAc,CAC/C,GAAI1C,KAAKY,SAAU,CACjB,MAAM+B,EAAiB3C,KAAKW,MACzBqB,MAAM,KACNvB,KAAImC,GAAOA,EAAIV,SACfzB,KAAImC,GAAO5C,KAAK6C,eAAeD,IAAQ,KACvCE,QAAOC,GAASA,IAAU,KAC7B/C,KAAKgD,qBAAuBL,EAAe7B,KAAK,OAAS,E,KACpD,CACLd,KAAKgD,qBAAuBhD,KAAK6C,eAAe7C,KAAKW,QAAU,E,OAE5D,GAAIX,KAAKmB,kBAAoBnB,KAAK0C,aAAc,CACrD1C,KAAKgD,qBAAuBhD,KAAKW,OAAS,E,EAUtC,cAAAkC,CAAeD,GACrB5C,KAAKiD,sBACL,IAAKjD,KAAKoB,cAAe,CACvB,MAAO,E,CAIT,MAAMe,EAAUnC,KAAKoB,cAAce,QAEnC,GAAIA,EAAS,CACX,MAAMzB,EAASJ,MAAMC,KAAK4B,GAASe,MAAKxC,GAAUA,EAAOC,QAAUiC,IACnE,OAAOlC,EAASA,EAAOyC,YAAYjB,QAAU,GAAK,E,KAC7C,CACL,MAAO,E,EASH,YAAAjB,GACNjB,KAAKoD,UAAUnC,aAAajB,KAAKW,M,CAQ3B,mBAAAsC,GACN,IAAKjD,KAAKoB,cAAe,CACvBpB,KAAKoB,cAAgBpB,KAAKqD,GAAGC,cAAc,S,EAY/C,iBAAAC,GAEEvD,KAAKmB,iBAAmBnB,KAAKwC,SAG7B,GAAIxC,KAAK0C,aAAc,CACrB1C,KAAKmB,iBAAmB,I,CAG1B,GAAI,oBAAqBnB,KAAKqD,GAAI,CAChCrD,KAAKoD,UACHpD,KAAKqD,GACLG,iB,KACG,CAELxD,KAAKoD,UAAY,CACfnC,aAAeN,IACb,MAAM8C,EAAczD,KAAKqD,GAAGK,QAAQ,QACpC,GAAID,EAAa,CACf,MAAME,EAAQC,SAASC,cAAc,SACrCF,EAAMG,KAAO,SACbH,EAAMI,KAAO/D,KAAK+D,KAClBJ,EAAMhD,MAAQA,EACd8C,EAAYO,YAAYL,E,IAOhC,GAAI3D,KAAKY,iBAAmBZ,KAAKW,QAAU,SAAU,CACnDX,KAAKW,MAAQ,E,EASjB,gBAAAsD,GACEjE,KAAKwB,qBAEL,GAAIxB,KAAKoB,cAAe,CAEtB,IAAKpB,KAAKY,SAAU,CAClBZ,KAAKoB,cAAcT,MAAQX,KAAKW,K,CAGlC,MAAMN,EAAiBL,KAAKY,SACxBZ,KAAKW,MAAMqB,MAAM,KAAKvB,KAAIyD,GAAKA,EAAEhC,SACjC,CAAClC,KAAKW,OAEV,MAAMwB,EAAUnC,KAAKoB,cAAce,QAEnC,GAAIA,EAAS,CACX7B,MAAMC,KAAK4B,GAASC,SAAQ1B,IAC1BA,EAAO2B,SAAWrC,KAAKY,SACnBP,EAAeiC,SAAS5B,EAAOC,OAC/BD,EAAOC,QAAUN,EAAe,EAAE,G,KAEnC,CAELL,KAAKoB,cAAcT,MAAQN,EAAe,IAAM,E,EAKpDL,KAAKiB,c,CAcP,MAAAkD,GACE,OACEC,EAACC,EAAI,CAAAzB,IAAA,6CACD5C,KAAK+C,OAAS/C,KAAKqD,GAAGC,cAAc,oBACpCc,EAAA,SAAAxB,IAAA,2CAAO0B,QAAStE,KAAKuE,UACnBH,EAAA,QAAAxB,IAAA,2CAAMmB,KAAK,SAAS/D,KAAK+C,QAI7BqB,EAAA,OAAAxB,IAAA,2CAAK4B,MAAM,kBACTJ,EAAA,QAAAxB,IAAA,2CAAMmB,KAAK,iBAEXK,EAAA,OAAAxB,IAAA,2CACE4B,MAAM,mBACNC,QAASzE,KAAKkB,4BAEdkD,EAAA,QAAAxB,IAAA,2CAAMmB,KAAK,kBAEV/D,KAAKmB,kBACJiD,EAAA,SAAAxB,IAAA,2CACE8B,GAAI1E,KAAKuE,SAAW,YACpBT,KAAK,OACLnD,MAAOX,KAAKgD,qBACZ2B,SAAQ,KACRH,MAAM,iBAAgB,gBACR,OAAM,aACRxE,KAAK+C,MAAK,mBAEpB/C,KAAK6B,MACD,GAAG7B,KAAKuE,iBACR,GAAGvE,KAAKuE,yBAKlBH,EAAA,UAAAxB,IAAA,2CACE8B,GAAI1E,KAAKuE,SACTK,IAAKvB,GAAOrD,KAAKoB,cAAgBiC,EACjCU,KAAM/D,KAAK+D,KACXc,SAAU7E,KAAK6E,SACfC,SAAU9E,KAAK8E,SACflE,SAAUZ,KAAKY,SACfmE,SAAU/E,KAAKC,mBACfuE,MAAOxE,KAAKmB,iBAAmB,SAAW,GAAE,aAChCnB,KAAK+C,MAAK,mBAEpB/C,KAAK6B,MACD,GAAG7B,KAAKuE,iBACR,GAAGvE,KAAKuE,wBAGdH,EAAA,QAAAxB,IAAA,8CAGD5C,KAAKmB,kBACJiD,EAAA,WAAAxB,IAAA,2CAASmB,KAAK,eAAeS,MAAM,gBAAgBQ,KAAK,OAEzDhF,KAAK6B,OACJuC,EAAA,WAAAxB,IAAA,2CAASmB,KAAK,eAAeS,MAAM,aAAaQ,KAAK,OAEtDhF,KAAKiF,SACJb,EAAA,WAAAxB,IAAA,2CAASmB,KAAK,eAAeS,MAAM,aAAaQ,KAAK,QAIzDZ,EAAA,QAAAxB,IAAA,2CAAMmB,KAAK,kBAGX/D,KAAK0B,aACL1B,KAAKqD,GAAGC,cAAc,0BACtBc,EAAA,OAAAxB,IAAA,2CAAK4B,MAAM,cAAcE,GAAI,GAAG1E,KAAKuE,wBACnCH,EAAA,QAAAxB,IAAA,2CAAMmB,KAAK,eAAe/D,KAAK0B,eAIjC1B,KAAK4B,kBACL5B,KAAKqD,GAAGC,cAAc,gCACtBc,EAAA,OAAAxB,IAAA,2CAAK4B,MAAM,oBAAoBE,GAAI,GAAG1E,KAAKuE,kBACzCH,EAAA,QAAAxB,IAAA,2CAAMmB,KAAK,qBAAqB/D,KAAK4B,mB","ignoreList":[]}

package/dist/native/p-6f762ec2.entry.js

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

package/dist/native/p-6f762ec2.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["nvColCss","NvColStyle0","NvCol","getColSize","this","size","render","h","Host","key","class","clsx"],"sources":["src/components/nv-col/nv-col.scss?tag=nv-col","src/components/nv-col/nv-col.tsx"],"sourcesContent":["@function calculate-width($columns) {\n  $total-columns: 12;\n  @return calc(100% * #{$columns} / #{$total-columns});\n}\n\nnv-col {\n  display: block;\n  flex: 1 1 0%;\n  padding-left: calc(var(--spacing-4) / 2);\n  padding-right: calc(var(--spacing-4) / 2);\n\n  &[class*=\"w-\"] {\n    flex: none;\n  }\n\n  @for $i from 1 through 12 {\n    &.w-#{$i}\\/12 {\n      width: calculate-width($i);\n    }\n  }\n}","import { Component, Host, Prop, h } from '@stencil/core';\nimport clsx from 'clsx';\n\n/**\n * @slot default - The column content.\n */\n@Component({\n  tag: 'nv-col',\n  styleUrl: './nv-col.scss',\n  shadow: false,\n})\nexport class NvCol {\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Defines the column size based on a 12 column grid system.\n   */\n  @Prop({ reflect: true })\n  readonly size: number;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Get the column size class.\n   * @returns {string | undefined} The column size class.\n   */\n  private getColSize() {\n    if (this.size) {\n      if (this.size < 1 || this.size > 12) return;\n      return `w-${this.size}/12`;\n    }\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host class={clsx(this.getColSize())}>\n        <slot></slot>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"mappings":"sFAAA,MAAMA,EAAW,+oBACjB,MAAAC,EAAeD,E,MCUFE,EAAK,M,6CAkBR,UAAAC,GACN,GAAIC,KAAKC,KAAM,CACb,GAAID,KAAKC,KAAO,GAAKD,KAAKC,KAAO,GAAI,OACrC,MAAO,KAAKD,KAAKC,S,EAQrB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAOC,EAAKP,KAAKD,eACrBI,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

package/dist/native/p-71d6aad8.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as o,h as a,a as n,g as r}from"./p-db2a68f3.js";import{c as t}from"./p-8a1a6e56.js";import{F as s}from"./p-a15ddd42.js";import{u as i,t as c}from"./p-42301d8f.js";import{u as l}from"./p-1daca48a.js";const f='nv-alert{display:flex !important;align-items:flex-start;position:relative;gap:var(--alert-gap-x);border-radius:var(--alert-radius);font-family:"TT Norms Pro", "Montserrat", sans-serif}nv-alert>nv-icon{margin-left:var(--alert-icon-position-x);margin-top:var(--alert-icon-position-y)}nv-alert.feedback-information{background-color:var(--components-alert-information-background);border:1px solid var(--components-alert-information-border) !important}nv-alert.feedback-information>.close:focus,nv-alert.feedback-information>.close:focus-within{outline:none}nv-alert.feedback-information>.close:focus-visible,nv-alert.feedback-information>.close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--components-alert-information-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-warning{background-color:var(--components-alert-warning-background);border:1px solid var(--components-alert-warning-border) !important}nv-alert.feedback-warning>.close:focus,nv-alert.feedback-warning>.close:focus-within{outline:none}nv-alert.feedback-warning>.close:focus-visible,nv-alert.feedback-warning>.close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--components-alert-warning-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-error{background-color:var(--components-alert-error-background);border:1px solid var(--components-alert-error-border) !important}nv-alert.feedback-error>.close:focus,nv-alert.feedback-error>.close:focus-within{outline:none}nv-alert.feedback-error>.close:focus-visible,nv-alert.feedback-error>.close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--components-alert-error-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-success{background-color:var(--components-alert-success-background);border:1px solid var(--components-alert-success-border) !important}nv-alert.feedback-success>.close:focus,nv-alert.feedback-success>.close:focus-within{outline:none}nv-alert.feedback-success>.close:focus-visible,nv-alert.feedback-success>.close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--components-alert-success-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-neutral{background-color:var(--components-alert-neutral-background);border:1px solid var(--components-alert-neutral-border) !important}nv-alert.feedback-neutral>.close:focus,nv-alert.feedback-neutral>.close:focus-within{outline:none}nv-alert.feedback-neutral>.close:focus-visible,nv-alert.feedback-neutral>.close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--components-alert-neutral-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert>nv-icon.icon-information{color:var(--components-alert-information-icon)}nv-alert>nv-icon.icon-warning{color:var(--components-alert-warning-icon)}nv-alert>nv-icon.icon-error{color:var(--components-alert-error-icon)}nv-alert>nv-icon.icon-success{color:var(--components-alert-success-icon)}nv-alert>nv-icon.icon-neutral{color:var(--components-alert-neutral-icon)}nv-alert>.content{display:flex;padding:var(--alert-padding);padding-left:0;flex-direction:column;gap:var(--alert-gap-y)}nv-alert>.content>.heading{color:var(--components-alert-content-title);font-size:var(--alert-heading-font-size);line-height:var(--alert-heading-line-height);font-weight:var(--alert-heading-font-weight)}nv-alert>.content>.message{color:var(--components-alert-content-description);font-size:var(--alert-message-font-size);line-height:var(--alert-message-line-height)}nv-alert>.close{border-radius:var(--alert-radius);position:absolute;display:flex;top:var(--alert-icon-position-y);right:var(--alert-icon-position-x);padding:0;border:none;background:none;cursor:pointer}';const d=f;const u=class{constructor(a){e(this,a);this.hiddenChanged=o(this,"hiddenChanged",7);this.hiddenChangedComplete=o(this,"hiddenChangedComplete",7);this.closeClicked=o(this,"closeClicked",7);this.handleDismiss=e=>{if(!this.preventAutoClose){this.hidden=true}this.closeClicked.emit(e)};this.getDefaultIcon=()=>{switch(this.feedback){case s.Warning:return"alert-circle";case s.Information:return"info-circle";case s.Success:return"circle-check";case s.Error:return"alert-circle";case s.Neutral:return"help";default:return"info-circle"}};this.color=undefined;this.feedback="information";this.message=undefined;this.heading=undefined;this.icon=undefined;this.dismissible=false;this.preventAutoClose=false;this.hidden=false}componentWillRender(){if(this.color){switch(this.color){case"primary":this.feedback="warning";break;case"secondary":this.feedback="information";break;case"neutral":this.feedback="information";break;default:this.feedback=this.color}}}async handleHiddenChange(e){this.hiddenChanged.emit(e);const{fadeIn:o,fadeOut:a}=l(this.ref,{duration:150});const{collapse:n,expand:r}=i(this.ref,{duration:150});if(e===true)await c(a,n).start();if(e===false)await c(r,o).start();this.hiddenChangedComplete.emit(e)}componentWillLoad(){if(this.color){switch(this.color){case"primary":this.feedback="warning";break;case"secondary":this.feedback="information";break;case"neutral":this.feedback="information";break;default:this.feedback=this.color}}if(this.hidden){const{setCollapsed:e}=i(this.ref);const{setFadeOut:o}=l(this.ref);e();o()}}render(){var e;return a(n,{key:"6df6a1c8f72ca1291f3ba03242225fb63b43e6dd",role:"alert",class:t("root",`feedback-${this.feedback}`)},a("nv-icon",{key:"51b6e7d130b4c81e1de48c511dfe2edc52de5bfb",name:(e=this.icon)!==null&&e!==void 0?e:this.getDefaultIcon(),class:`icon-${this.feedback}`,size:"md"}),a("div",{key:"dac06159b49e2a6caf48245a8131dcd6d530c346",class:"content"},this.heading&&a("p",{key:"8fb6805d964174a0c5808e49152f4c047cba1f82",class:"heading"},this.heading),this.message&&a("p",{key:"ff5a70d54c760651e3cfa7dfff40095d9599e448",class:"message"},this.message),a("slot",{key:"546aff25cadda8a402e2b45b2f4f039a7e3a7ecc"})),this.dismissible&&a("button",{key:"a43b47df76ede8cf646b9c8430532848b73008f4",class:"close",type:"button",onClick:this.handleDismiss},a("nv-icon",{key:"cef62db2b2234101c49a44c80ebfa9224220ec0b",name:"x",size:"sm"})))}get ref(){return r(this)}static get watchers(){return{hidden:["handleHiddenChange"]}}};u.style=d;export{u as nv_alert};
+//# sourceMappingURL=p-71d6aad8.entry.js.map

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

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

package/dist/native/p-7ce1b712.entry.js

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

package/dist/native/p-7ce1b712.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["classes","wFull","NvBaseComponent","componentWillLoad","this","applyClassesOnInitialRender","componentDidLoad","mutationObserver","MutationObserver","mutations","console","log","forEach","mutation","type","target","Object","keys","attributeName","hasAttribute","classList","add","remove","observeElements","disconnectedCallback","disconnect","elements","el","querySelectorAll","element","observe","attributes","attributeFilter","subtree","render","h","Host","key","style","display"],"sources":["src/components/nv-base/nv-base.tsx"],"sourcesContent":["import { Component, Element, h, Host } from '@stencil/core';\n\nconst classes: Record<string, string> = {\n  'w-full': 'w-full',\n  'wFull': 'w-full',\n  'is-active': 'is-active',\n  'is-selected': 'is-selected',\n};\n\n/**\n * @slot default - render children\n * @deprecated This is only to help with the migration from v2 to v3. It will be removed in the next major release.\n */\n@Component({\n  tag: 'nv-base',\n  shadow: false,\n})\nexport class NvBaseComponent {\n  @Element() el: HTMLNvBaseElement;\n\n  private mutationObserver: MutationObserver;\n\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.applyClassesOnInitialRender();\n  }\n\n  componentDidLoad() {\n    this.mutationObserver = new MutationObserver(mutations => {\n      console.log(mutations);\n      mutations.forEach(mutation => {\n        if (mutation.type === 'attributes') {\n          const target = mutation.target as HTMLElement;\n\n          Object.keys(classes).forEach(attributeName => {\n            if (target.hasAttribute(attributeName)) {\n              target.classList.add(classes[attributeName]);\n            } else {\n              target.classList.remove(classes[attributeName]);\n            }\n          });\n        }\n      });\n    });\n    this.observeElements();\n  }\n\n  disconnectedCallback() {\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region METHODS\n\n  private applyClassesOnInitialRender() {\n    Object.keys(classes).forEach(attributeName => {\n      const elements = this.el.querySelectorAll(`[${attributeName}]`);\n      elements.forEach(element => {\n        element.classList.add(classes[attributeName]);\n      });\n    });\n  }\n\n  private observeElements() {\n    this.mutationObserver.observe(this.el, {\n      attributes: true,\n      attributeFilter: Object.keys(classes),\n      subtree: true,\n    });\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host style={{ display: 'block' }}>\n        <slot></slot>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"mappings":"yDAEA,MAAMA,EAAkC,CACtC,SAAU,SACVC,MAAS,SACT,YAAa,YACb,cAAe,e,MAWJC,EAAe,M,yBAQ1B,iBAAAC,GACEC,KAAKC,6B,CAGP,gBAAAC,GACEF,KAAKG,iBAAmB,IAAIC,kBAAiBC,IAC3CC,QAAQC,IAAIF,GACZA,EAAUG,SAAQC,IAChB,GAAIA,EAASC,OAAS,aAAc,CAClC,MAAMC,EAASF,EAASE,OAExBC,OAAOC,KAAKjB,GAASY,SAAQM,IAC3B,GAAIH,EAAOI,aAAaD,GAAgB,CACtCH,EAAOK,UAAUC,IAAIrB,EAAQkB,G,KACxB,CACLH,EAAOK,UAAUE,OAAOtB,EAAQkB,G,QAItC,IAEJd,KAAKmB,iB,CAGP,oBAAAC,GACE,GAAIpB,KAAKG,iBAAkB,CACzBH,KAAKG,iBAAiBkB,Y,EAQlB,2BAAApB,GACNW,OAAOC,KAAKjB,GAASY,SAAQM,IAC3B,MAAMQ,EAAWtB,KAAKuB,GAAGC,iBAAiB,IAAIV,MAC9CQ,EAASd,SAAQiB,IACfA,EAAQT,UAAUC,IAAIrB,EAAQkB,GAAe,GAC7C,G,CAIE,eAAAK,GACNnB,KAAKG,iBAAiBuB,QAAQ1B,KAAKuB,GAAI,CACrCI,WAAY,KACZC,gBAAiBhB,OAAOC,KAAKjB,GAC7BiC,QAAS,M,CAQb,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,CAAEC,QAAS,UACtBJ,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

package/dist/native/p-80788ddf.js

@@ -0,0 +1,2 @@
+import"./p-db2a68f3.js";const o=()=>{};const s=o;export{s as g};
+//# sourceMappingURL=p-80788ddf.js.map

package/dist/native/p-80788ddf.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["globalScripts","appGlobalScript"],"sources":["@stencil/core/internal/app-globals"],"sourcesContent":["import appGlobalScript from '/Users/abdel/DEV/GitHub/elia/nova-design-system/packages/native/src/global.ts';\nexport const globalScripts = appGlobalScript;\n"],"mappings":"uCACY,MAACA,EAAgBC,S","ignoreList":[]}

package/dist/native/p-830ec54a.entry.js

@@ -0,0 +1,2 @@
+import{r as n,c as e,h as i,a as o,g as a}from"./p-db2a68f3.js";import{c as t}from"./p-8a1a6e56.js";import{u as s,t as c}from"./p-42301d8f.js";import{u as d}from"./p-1daca48a.js";const r="nv-icon{display:inline-block;width:fit-content;height:fit-content;color:inherit}nv-icon>.nv-icon-xs{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-icon>.nv-icon-sm{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-icon>.nv-icon-md{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-icon>.nv-icon-lg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-icon>.nv-icon-xl{width:var(--spacing-7);height:var(--spacing-7);stroke-width:1.9px}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-content);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-content)}nv-badge.badge-2{color:var(--color-rainbow-2-content);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-content)}nv-badge.badge-3{color:var(--color-rainbow-3-content);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-content)}nv-badge.badge-4{color:var(--color-rainbow-4-content);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-content)}nv-badge.badge-5{color:var(--color-rainbow-5-content);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-content)}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=r;const g=class{constructor(i){n(this,i);this.closeClicked=e(this,"closeClicked",7);this.hiddenChanged=e(this,"hiddenChanged",7);this.hiddenChangedComplete=e(this,"hiddenChangedComplete",7);this.handleClose=n=>{if(!this.preventAutoClose){this.hidden=true}this.closeClicked.emit(n)};this.dismissal=false;this.icon=undefined;this.iconLocation=undefined;this.color="1";this.label=null;this.leadIcon=null;this.dismissible=false;this.hidden=false;this._isHidden=this.hidden;this.preventAutoClose=false}handleDismissalChange(n){this.dismissible=n}handleIconChange(n){this.leadIcon=n}async handleHiddenChange(n){this.hiddenChanged.emit(n);if(this._isHidden===true)this._isHidden=n;const{fadeIn:e,fadeOut:i}=d(this.ref,{duration:150});const{collapse:o,expand:a}=s(this.ref,{duration:150});if(n===true)await c(i,o).start();if(n===false)await c(a,e).start();this.hiddenChangedComplete.emit(n);if(this._isHidden===false)this._isHidden=n}componentWillLoad(){if(this.dismissal){this.dismissible=this.dismissal}if(this.icon!=null&&this.icon!=""){this.leadIcon=this.icon}if(this.hidden){const{setCollapsed:n}=s(this.ref);const{setFadeOut:e}=d(this.ref);n();e()}}render(){return i(o,{key:"230bec882e7425786c0a57434b1d6fde7a5d19bc",class:t(`badge-${this.color}`,{"has-close":this.dismissible,"with-gap":this.dismissible||this.label,"visually-hidden":this._isHidden})},i("slot",{key:"cfeeaed354a34cbe1eaf1caeed9456b630a07265",name:"leading-icon"},this.leadIcon&&i("nv-icon",{key:"10031f4f26339860458f1413b171916cbc97f98f",slot:"leading-icon",name:this.leadIcon,size:"sm"})),this.label&&i("span",{key:"8d165b104e3952c61084f1473d31ce1a05404966"},this.label),this.dismissible&&i("button",{key:"8320177e0ac7f8c4f5d09b6c947d81d0eddadb4f",onClick:this.handleClose,class:"close",type:"button"},i("nv-icon",{key:"3298bd640cb7bb62923e5f1e650944afc01a7385",name:"x",size:"sm"})))}get ref(){return a(this)}static get watchers(){return{dismissal:["handleDismissalChange"],icon:["handleIconChange"],hidden:["handleHiddenChange"]}}};g.style=l;export{g as nv_badge};
+//# sourceMappingURL=p-830ec54a.entry.js.map

package/dist/native/p-830ec54a.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["nvBadgeCss","NvBadgeStyle0","NvBadge","this","handleClose","originalEvent","preventAutoClose","hidden","closeClicked","emit","handleDismissalChange","dismissal","dismissible","handleIconChange","icon","leadIcon","handleHiddenChange","hiddenChanged","_isHidden","fadeIn","fadeOut","useFade","ref","duration","collapse","expand","useCollapse","timeline","start","hiddenChangedComplete","componentWillLoad","setCollapsed","setFadeOut","render","h","Host","key","class","clsx","color","label","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/nv-icon.scss\" as icon;\n@import \"../../styles/focus-ring\";\n\n/* Variants */\n$badge-colors: (\"1\", \"2\", \"3\", \"4\", \"5\");\n\n/* Define maps for color-related variables */\n$color-rainbow-content: (\n  \"1\": var(--color-rainbow-1-content),\n  \"2\": var(--color-rainbow-2-content),\n  \"3\": var(--color-rainbow-3-content),\n  \"4\": var(--color-rainbow-4-content),\n  \"5\": var(--color-rainbow-5-content)\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);\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-content, $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-content, $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.$icon-config {\n      &.icon-#{$size} {\n        @include icon.icon-size-and-stroke(\n          map.get(map.get(icon.$icon-config, \"xs\"), size),\n          map.get(map.get(icon.$icon-config, \"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 5\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":"mLAAA,MAAMA,EAAa,kpIACnB,MAAAC,EAAeD,E,MCqBFE,EAAO,M,8KAwKDC,KAAAC,YAAeC,IAC9B,IAAKF,KAAKG,iBAAkB,CAC1BH,KAAKI,OAAS,I,CAGhBJ,KAAKK,aAAaC,KAAKJ,EAAc,E,eAlKT,M,2DAwBJ,I,WAMO,K,cAMN,K,iBAMJ,M,YAML,M,eAEWF,KAAKI,O,sBAOG,K,CAkCrC,qBAAAG,CAAsBC,GACpBR,KAAKS,YAAcD,C,CAQrB,gBAAAE,CAAiBC,GACfX,KAAKY,SAAWD,C,CAQlB,wBAAME,CAAmBT,GACvBJ,KAAKc,cAAcR,KAAKF,GACxB,GAAIJ,KAAKe,YAAc,KAAMf,KAAKe,UAAYX,EAE9C,MAAMY,OAAEA,EAAMC,QAAEA,GAAYC,EAAQlB,KAAKmB,IAAK,CAAEC,SAAU,MAC1D,MAAMC,SAAEA,EAAQC,OAAEA,GAAWC,EAAYvB,KAAKmB,IAAK,CAAEC,SAAU,MAE/D,GAAIhB,IAAW,WAAYoB,EAASP,EAASI,GAAUI,QACvD,GAAIrB,IAAW,YAAaoB,EAASF,EAAQN,GAAQS,QAErDzB,KAAK0B,sBAAsBpB,KAAKF,GAEhC,GAAIJ,KAAKe,YAAc,MAAOf,KAAKe,UAAYX,C,CAUjD,iBAAAuB,GACE,GAAI3B,KAAKQ,UAAW,CAClBR,KAAKS,YAAcT,KAAKQ,S,CAG1B,GAAIR,KAAKW,MAAQ,MAAQX,KAAKW,MAAQ,GAAI,CACxCX,KAAKY,SAAWZ,KAAKW,I,CAGvB,GAAIX,KAAKI,OAAQ,CACf,MAAMwB,aAAEA,GAAiBL,EAAYvB,KAAKmB,KAC1C,MAAMU,WAAEA,GAAeX,EAAQlB,KAAKmB,KAEpCS,IACAC,G,EAwBJ,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAOC,EAAK,SAASnC,KAAKoC,QAAS,CACjC,YAAapC,KAAKS,YAClB,WAAYT,KAAKS,aAAeT,KAAKqC,MACrC,kBAAmBrC,KAAKe,aAG1BgB,EAAA,QAAAE,IAAA,2CAAMK,KAAK,gBACRtC,KAAKY,UACJmB,EAAA,WAAAE,IAAA,2CACEM,KAAK,eACLD,KAAMtC,KAAKY,SACX4B,KAAK,QAIVxC,KAAKqC,OAASN,EAAA,QAAAE,IAAA,4CAAOjC,KAAKqC,OAC1BrC,KAAKS,aACJsB,EAAA,UAAAE,IAAA,2CAAQQ,QAASzC,KAAKC,YAAaiC,MAAM,QAAQQ,KAAK,UACpDX,EAAA,WAAAE,IAAA,2CAASK,KAAK,IAAIE,KAAK,Q","ignoreList":[]}

package/dist/native/p-89accab1.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as r,h as o,a as i,g as d}from"./p-db2a68f3.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(i,{key:"923184aa248f433413ecdc49e4da07a60b408047",class:a(this.labelPlacement==="before"&&"label-placement-before",this.error&&"error")},o("input",{key:"37c0948ac9a100352908a60dd2ad94e1f7fb2bab",type:"radio",id:this.inputId,name:this.name,autocomplete:"off",value:this.value,checked:this.checked,disabled:this.disabled}),o("div",{key:"cb217f7f999396b1b477eb25e5e1db77e941f76a",class:"text-container"},(this.label||this.el.querySelector('[slot="label"]'))&&o("label",{key:"84859686efb45332b5dade8f2cb3147643782588",htmlFor:this.inputId},o("slot",{key:"f456892bd1bad003efdd128051989952b1719ca1",name:"label"},this.label)),(this.description||this.el.querySelector('[slot="description"]'))&&o("div",{key:"f518939cc9f5f2a1bd9ceccbe284484d51ac44fa",class:"description"},o("slot",{key:"f6b1c15c9be9d9c87311b7a658358edf1dbd9c8e",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&o("div",{key:"3f862fccc7e1a85c076e70babca97a74680a462b",hidden:!this.error,class:"error-description"},o("slot",{key:"3d42e75ba035117f90e5c2f924781617a297173a",name:"error-description"},this.errorDescription))))}static get formAssociated(){return true}get el(){return d(this)}static get watchers(){return{checked:["handleCheckedChange"]}}};f.style=l;export{f as nv_fieldradio};
+//# sourceMappingURL=p-89accab1.entry.js.map

package/dist/native/p-89accab1.entry.js.map

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

package/dist/native/p-8a1a6e56.js

@@ -0,0 +1,2 @@
+function r(e){var f,o,t="";if("string"==typeof e||"number"==typeof e)t+=e;else if("object"==typeof e)if(Array.isArray(e)){var n=e.length;for(f=0;f<n;f++)e[f]&&(o=r(e[f]))&&(t&&(t+=" "),t+=o)}else for(o in e)e[o]&&(t&&(t+=" "),t+=o);return t}function e(){for(var e,f,o=0,t="",n=arguments.length;o<n;o++)(e=arguments[o])&&(f=r(e))&&(t&&(t+=" "),t+=f);return t}export{e as c};
+//# sourceMappingURL=p-8a1a6e56.js.map

package/dist/native/p-8a1a6e56.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["r","e","t","f","n","Array","isArray","o","length","clsx","arguments"],"sources":["../../node_modules/clsx/dist/clsx.mjs"],"sourcesContent":["function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;"],"mappings":"AAAA,SAASA,EAAEC,GAAG,IAAIC,EAAEC,EAAEC,EAAE,GAAG,GAAG,iBAAiBH,GAAG,iBAAiBA,EAAEG,GAAGH,OAAO,GAAG,iBAAiBA,EAAE,GAAGI,MAAMC,QAAQL,GAAG,CAAC,IAAIM,EAAEN,EAAEO,OAAO,IAAIN,EAAE,EAAEA,EAAEK,EAAEL,IAAID,EAAEC,KAAKC,EAAEH,EAAEC,EAAEC,OAAOE,IAAIA,GAAG,KAAKA,GAAGD,EAAE,MAAM,IAAIA,KAAKF,EAAEA,EAAEE,KAAKC,IAAIA,GAAG,KAAKA,GAAGD,GAAG,OAAOC,CAAC,CAAQ,SAASK,IAAO,IAAI,IAAIR,EAAEC,EAAEC,EAAE,EAAEC,EAAE,GAAGG,EAAEG,UAAUF,OAAOL,EAAEI,EAAEJ,KAAKF,EAAES,UAAUP,MAAMD,EAAEF,EAAEC,MAAMG,IAAIA,GAAG,KAAKA,GAAGF,GAAG,OAAOE,CAAC,Q","ignoreList":[]}

package/dist/native/p-8b65b16f.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as r,a as o}from"./p-db2a68f3.js";import{c as a}from"./p-8a1a6e56.js";const t='@keyframes rotation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}nv-loader{display:inline-block;position:relative;aspect-ratio:1/1;border-radius:9999px;color:inherit}nv-loader.size-xs{width:var(--loader-size-xs);height:var(--loader-size-xs)}nv-loader.size-xs::before,nv-loader.size-xs::after{content:" ";position:absolute;top:0;left:0;border-radius:inherit;width:100%;height:100%}nv-loader.size-xs::before{content:" ";border:calc(var(--loader-size-xs) / 10) solid;opacity:0.3}nv-loader.size-xs::after{content:" ";border-top:calc(var(--loader-size-xs) / 10) solid transparent;border-left:calc(var(--loader-size-xs) / 10) solid transparent;border-right:calc(var(--loader-size-xs) / 10) solid transparent;border-bottom:calc(var(--loader-size-xs) / 10) solid;animation:rotation 1s linear infinite}nv-loader.size-sm{width:var(--loader-size-sm);height:var(--loader-size-sm)}nv-loader.size-sm::before,nv-loader.size-sm::after{content:" ";position:absolute;top:0;left:0;border-radius:inherit;width:100%;height:100%}nv-loader.size-sm::before{content:" ";border:calc(var(--loader-size-sm) / 10) solid;opacity:0.3}nv-loader.size-sm::after{content:" ";border-top:calc(var(--loader-size-sm) / 10) solid transparent;border-left:calc(var(--loader-size-sm) / 10) solid transparent;border-right:calc(var(--loader-size-sm) / 10) solid transparent;border-bottom:calc(var(--loader-size-sm) / 10) solid;animation:rotation 1s linear infinite}nv-loader.size-md{width:var(--loader-size-md);height:var(--loader-size-md)}nv-loader.size-md::before,nv-loader.size-md::after{content:" ";position:absolute;top:0;left:0;border-radius:inherit;width:100%;height:100%}nv-loader.size-md::before{content:" ";border:calc(var(--loader-size-md) / 10) solid;opacity:0.3}nv-loader.size-md::after{content:" ";border-top:calc(var(--loader-size-md) / 10) solid transparent;border-left:calc(var(--loader-size-md) / 10) solid transparent;border-right:calc(var(--loader-size-md) / 10) solid transparent;border-bottom:calc(var(--loader-size-md) / 10) solid;animation:rotation 1s linear infinite}nv-loader.size-lg{width:var(--loader-size-lg);height:var(--loader-size-lg)}nv-loader.size-lg::before,nv-loader.size-lg::after{content:" ";position:absolute;top:0;left:0;border-radius:inherit;width:100%;height:100%}nv-loader.size-lg::before{content:" ";border:calc(var(--loader-size-lg) / 10) solid;opacity:0.3}nv-loader.size-lg::after{content:" ";border-top:calc(var(--loader-size-lg) / 10) solid transparent;border-left:calc(var(--loader-size-lg) / 10) solid transparent;border-right:calc(var(--loader-size-lg) / 10) solid transparent;border-bottom:calc(var(--loader-size-lg) / 10) solid;animation:rotation 1s linear infinite}nv-loader.size-xl{width:var(--loader-size-xl);height:var(--loader-size-xl)}nv-loader.size-xl::before,nv-loader.size-xl::after{content:" ";position:absolute;top:0;left:0;border-radius:inherit;width:100%;height:100%}nv-loader.size-xl::before{content:" ";border:calc(var(--loader-size-xl) / 10) solid;opacity:0.3}nv-loader.size-xl::after{content:" ";border-top:calc(var(--loader-size-xl) / 10) solid transparent;border-left:calc(var(--loader-size-xl) / 10) solid transparent;border-right:calc(var(--loader-size-xl) / 10) solid transparent;border-bottom:calc(var(--loader-size-xl) / 10) solid;animation:rotation 1s linear infinite}nv-loader.color-brand::before{border-color:var(--components-loader-brand-background);opacity:1}nv-loader.color-brand::after{border-bottom-color:var(--components-loader-brand-foreground)}nv-loader.color-white::before{border-color:var(--components-loader-white-background);opacity:1}nv-loader.color-white::after{border-bottom-color:var(--components-loader-white-foreground)}';const i=t;const d=class{constructor(r){e(this,r);this.size="md";this.color=undefined}render(){return r(o,{key:"b4c0dab3c3ea4e2bdd434d779d4b736577bd467e",class:a(this.size&&`size-${this.size}`,this.color&&`color-${this.color}`)})}};d.style=i;export{d as nv_loader};
+//# sourceMappingURL=p-8b65b16f.entry.js.map

package/dist/native/p-8b65b16f.entry.js.map

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

package/dist/native/p-a15ddd42.js

@@ -0,0 +1,2 @@
+var e;(function(e){e["Information"]="information";e["Warning"]="warning";e["Success"]="success";e["Error"]="error";e["Neutral"]="neutral"})(e||(e={}));var n;(function(e){e["Neutral"]="neutral";e["Primary"]="primary";e["Secondary"]="secondary";e["Success"]="success";e["Error"]="error"})(n||(n={}));var t;(function(e){e["ExtraSmall"]="xs";e["Small"]="sm";e["Medium"]="md";e["Large"]="lg";e["ExtraLarge"]="xl"})(t||(t={}));var r;(function(e){e["ExtraSmall"]="xs";e["Small"]="sm";e["Medium"]="md";e["Large"]="lg"})(r||(r={}));var a;(function(e){e["High"]="high";e["Medium"]="medium";e["Low"]="low";e["Lower"]="lower"})(a||(a={}));var o;(function(e){e["Submit"]="submit";e["Reset"]="reset";e["Button"]="button"})(o||(o={}));var c;(function(e){e["High"]="brand";e["Low"]="white"})(c||(c={}));var i;(function(e){e["Before"]="before";e["After"]="after"})(i||(i={}));var s;(function(e){e["On"]="on";e["Off"]="off";e["Section"]="section-*";e["Shipping"]="shipping";e["Billing"]="billing";e["Home"]="home";e["Work"]="work";e["Mobile"]="mobile";e["Fax"]="fax";e["Pager"]="pager";e["Tel"]="tel";e["TelCountryCode"]="tel-country-code";e["TelNational"]="tel-national";e["TelAreaCode"]="tel-area-code";e["TelLocal"]="tel-local";e["TelLocalPrefix"]="tel-local-prefix";e["TelLocalSuffix"]="tel-local-suffix";e["TelExtension"]="tel-extension";e["Email"]="email";e["IMProtocol"]="impp";e["Name"]="name";e["HonorificPrefix"]="honorific-prefix";e["GivenName"]="given-name";e["AdditionalName"]="additional-name";e["FamilyName"]="family-name";e["HonorificSuffix"]="honorific-suffix";e["Nickname"]="nickname";e["Username"]="username";e["NewPassword"]="new-password";e["CurrentPassword"]="current-password";e["OneTimeCode"]="one-time-code";e["OrganizationTitle"]="organization-title";e["Organization"]="organization";e["StreetAddress"]="street-address";e["AddressLine1"]="address-line1";e["AddressLine2"]="address-line2";e["AddressLine3"]="address-line3";e["AddressLevel4"]="address-level4";e["AddressLevel3"]="address-level3";e["AddressLevel2"]="address-level2";e["AddressLevel1"]="address-level1";e["Country"]="country";e["CountryName"]="country-name";e["PostalCode"]="postal-code";e["CCName"]="cc-name";e["CCGivenName"]="cc-given-name";e["CCAdditionalName"]="cc-additional-name";e["CCFamilyName"]="cc-family-name";e["CCNumber"]="cc-number";e["CCExp"]="cc-exp";e["CCExpMonth"]="cc-exp-month";e["CCExpYear"]="cc-exp-year";e["CCCSC"]="cc-csc";e["CCType"]="cc-type";e["TransactionCurrency"]="transaction-currency";e["TransactionAmount"]="transaction-amount";e["Language"]="language";e["Bday"]="bday";e["BdayDay"]="bday-day";e["BdayMonth"]="bday-month";e["BdayYear"]="bday-year";e["Sex"]="sex";e["Url"]="url";e["Photo"]="photo"})(s||(s={}));const l=Object.freeze({__proto__:null,get FeedbackColors(){return e},get DeprecatedSemanticColors(){return n},get SemanticSizes(){return t},get ButtonSize(){return r},get ButtonEmphasis(){return a},get ButtonType(){return o},get LoaderColors(){return c},get FieldLabelPlacement(){return i},get TextInputAutocomplete(){return s}});export{r as B,e as F,t as S,l as c};
+//# sourceMappingURL=p-a15ddd42.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["FeedbackColors","DeprecatedSemanticColors","SemanticSizes","ButtonSize","ButtonEmphasis","ButtonType","LoaderColors","FieldLabelPlacement","TextInputAutocomplete"],"sources":["src/utils/constants.ts"],"sourcesContent":["export enum FeedbackColors {\n  Information = 'information',\n  Warning = 'warning',\n  Success = 'success',\n  Error = 'error',\n  Neutral = 'neutral',\n}\nexport enum DeprecatedSemanticColors {\n  Neutral = 'neutral',\n  Primary = 'primary',\n  Secondary = 'secondary',\n  Success = 'success',\n  Error = 'error',\n}\nexport enum SemanticSizes {\n  ExtraSmall = 'xs',\n  Small = 'sm',\n  Medium = 'md',\n  Large = 'lg',\n  ExtraLarge = 'xl',\n}\nexport enum ButtonSize {\n  ExtraSmall = 'xs',\n  Small = 'sm',\n  Medium = 'md',\n  Large = 'lg',\n}\nexport enum ButtonEmphasis {\n  High = 'high',\n  Medium = 'medium',\n  Low = 'low',\n  Lower = 'lower',\n}\nexport enum ButtonType {\n  Submit = 'submit',\n  Reset = 'reset',\n  Button = 'button',\n}\nexport enum LoaderColors {\n  High = 'brand',\n  Low = 'white',\n}\nexport enum FieldLabelPlacement {\n  Before = 'before',\n  After = 'after',\n}\n\nexport enum TextInputAutocomplete {\n  On = 'on',\n  Off = 'off',\n  Section = 'section-*',\n  Shipping = 'shipping',\n  Billing = 'billing',\n  Home = 'home',\n  Work = 'work',\n  Mobile = 'mobile',\n  Fax = 'fax',\n  Pager = 'pager',\n  Tel = 'tel',\n  TelCountryCode = 'tel-country-code',\n  TelNational = 'tel-national',\n  TelAreaCode = 'tel-area-code',\n  TelLocal = 'tel-local',\n  TelLocalPrefix = 'tel-local-prefix',\n  TelLocalSuffix = 'tel-local-suffix',\n  TelExtension = 'tel-extension',\n  Email = 'email',\n  IMProtocol = 'impp',\n  Name = 'name',\n  HonorificPrefix = 'honorific-prefix',\n  GivenName = 'given-name',\n  AdditionalName = 'additional-name',\n  FamilyName = 'family-name',\n  HonorificSuffix = 'honorific-suffix',\n  Nickname = 'nickname',\n  Username = 'username',\n  NewPassword = 'new-password',\n  CurrentPassword = 'current-password',\n  OneTimeCode = 'one-time-code',\n  OrganizationTitle = 'organization-title',\n  Organization = 'organization',\n  StreetAddress = 'street-address',\n  AddressLine1 = 'address-line1',\n  AddressLine2 = 'address-line2',\n  AddressLine3 = 'address-line3',\n  AddressLevel4 = 'address-level4',\n  AddressLevel3 = 'address-level3',\n  AddressLevel2 = 'address-level2',\n  AddressLevel1 = 'address-level1',\n  Country = 'country',\n  CountryName = 'country-name',\n  PostalCode = 'postal-code',\n  CCName = 'cc-name',\n  CCGivenName = 'cc-given-name',\n  CCAdditionalName = 'cc-additional-name',\n  CCFamilyName = 'cc-family-name',\n  CCNumber = 'cc-number',\n  CCExp = 'cc-exp',\n  CCExpMonth = 'cc-exp-month',\n  CCExpYear = 'cc-exp-year',\n  CCCSC = 'cc-csc',\n  CCType = 'cc-type',\n  TransactionCurrency = 'transaction-currency',\n  TransactionAmount = 'transaction-amount',\n  Language = 'language',\n  Bday = 'bday',\n  BdayDay = 'bday-day',\n  BdayMonth = 'bday-month',\n  BdayYear = 'bday-year',\n  Sex = 'sex',\n  Url = 'url',\n  Photo = 'photo',\n}\n"],"mappings":"IAAYA,GAAZ,SAAYA,GACVA,EAAA,6BACAA,EAAA,qBACAA,EAAA,qBACAA,EAAA,iBACAA,EAAA,oBACD,EAND,CAAYA,MAAc,KAO1B,IAAYC,GAAZ,SAAYA,GACVA,EAAA,qBACAA,EAAA,qBACAA,EAAA,yBACAA,EAAA,qBACAA,EAAA,gBACD,EAND,CAAYA,MAAwB,K,IAOxBC,GAAZ,SAAYA,GACVA,EAAA,mBACAA,EAAA,cACAA,EAAA,eACAA,EAAA,cACAA,EAAA,kBACD,EAND,CAAYA,MAAa,K,IAObC,GAAZ,SAAYA,GACVA,EAAA,mBACAA,EAAA,cACAA,EAAA,eACAA,EAAA,aACD,EALD,CAAYA,MAAU,KAMtB,IAAYC,GAAZ,SAAYA,GACVA,EAAA,eACAA,EAAA,mBACAA,EAAA,aACAA,EAAA,gBACD,EALD,CAAYA,MAAc,KAM1B,IAAYC,GAAZ,SAAYA,GACVA,EAAA,mBACAA,EAAA,iBACAA,EAAA,kBACD,EAJD,CAAYA,MAAU,KAKtB,IAAYC,GAAZ,SAAYA,GACVA,EAAA,gBACAA,EAAA,cACD,EAHD,CAAYA,MAAY,KAIxB,IAAYC,GAAZ,SAAYA,GACVA,EAAA,mBACAA,EAAA,gBACD,EAHD,CAAYA,MAAmB,KAK/B,IAAYC,GAAZ,SAAYA,GACVA,EAAA,WACAA,EAAA,aACAA,EAAA,uBACAA,EAAA,uBACAA,EAAA,qBACAA,EAAA,eACAA,EAAA,eACAA,EAAA,mBACAA,EAAA,aACAA,EAAA,iBACAA,EAAA,aACAA,EAAA,qCACAA,EAAA,8BACAA,EAAA,+BACAA,EAAA,wBACAA,EAAA,qCACAA,EAAA,qCACAA,EAAA,gCACAA,EAAA,iBACAA,EAAA,qBACAA,EAAA,eACAA,EAAA,sCACAA,EAAA,0BACAA,EAAA,oCACAA,EAAA,4BACAA,EAAA,sCACAA,EAAA,uBACAA,EAAA,uBACAA,EAAA,8BACAA,EAAA,sCACAA,EAAA,+BACAA,EAAA,0CACAA,EAAA,+BACAA,EAAA,kCACAA,EAAA,gCACAA,EAAA,gCACAA,EAAA,gCACAA,EAAA,kCACAA,EAAA,kCACAA,EAAA,kCACAA,EAAA,kCACAA,EAAA,qBACAA,EAAA,8BACAA,EAAA,4BACAA,EAAA,oBACAA,EAAA,+BACAA,EAAA,yCACAA,EAAA,iCACAA,EAAA,wBACAA,EAAA,kBACAA,EAAA,6BACAA,EAAA,2BACAA,EAAA,kBACAA,EAAA,oBACAA,EAAA,8CACAA,EAAA,0CACAA,EAAA,uBACAA,EAAA,eACAA,EAAA,sBACAA,EAAA,0BACAA,EAAA,wBACAA,EAAA,aACAA,EAAA,aACAA,EAAA,gBACD,EAjED,CAAYA,MAAqB,K","ignoreList":[]}

package/dist/native/p-a37c2ac2.js

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

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

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

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

@@ -0,0 +1,2 @@
+import{r as e,c as r,h as t,a,g as o}from"./p-db2a68f3.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 f=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:"05e5be100e389a0d604ef6c6a126a3992c4400d8"},(this.label||this.el.querySelector('[slot="label"]'))&&t("label",{key:"f0e8d865770ad7249748d76eafc520733a73df61",htmlFor:this.textareaId},t("slot",{key:"88dc412644dd9ba26c1c4fd6495257071ea9355f",name:"label"},this.label)),t("div",{key:"ed27e42a150bacb526fad21c33167e5daa88fbdb",class:"textarea-wrapper"},t("div",{key:"12afa52b296240e0b8cb7ee3dd68100619a0aaef",class:"textarea-container",onClick:this.handleTextareaContainerClick},t("textarea",{key:"9269535072a3df3aff0f4d6093618ef3d0b9aed3",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:"f4cbe287f58bcffa17f9175b5507ffd260652805",class:"description"},t("slot",{key:"b3df2bfd379089e489173b0c961ce9bc04080892",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&t("div",{key:"cb194709b15cbe0e4f243161bb34f5e487b2e073",hidden:!this.error,class:"error-description"},t("slot",{key:"de80cb7d6b1ad8e9f33bd17a407604df66b8eda1",name:"error-description"},this.errorDescription)))}static get formAssociated(){return true}get el(){return o(this)}static get watchers(){return{rows:["rowsChanged"],autosize:["autosizeChanged"]}}};f.style=s;export{f as nv_fieldtextarea};
+//# sourceMappingURL=p-b5e4a9e7.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["nvFieldtextareaCss","NvFieldtextareaStyle0","NvFieldtextarea","this","handleTextarea","event","textarea","target","value","valueChanged","emit","autosize","adjustTextareaHeight","handleTextareaContainerClick","textareaElement","focus","uuidv4","componentWillRender","message","description","validation","errorDescription","error","rowsChanged","autosizeChanged","_a","style","removeProperty","height","computedStyle","window","getComputedStyle","lineHeight","parseFloat","paddingTop","paddingBottom","borderTopWidth","borderBottomWidth","minHeight","rows","scrollHeight","getResize","resize","componentDidLoad","render","h","Host","key","label","el","querySelector","htmlFor","textareaId","name","class","onClick","id","ref","e","placeholder","disabled","readOnly","readonly","required","maxlength","minlength","autocomplete","onInput","clsx","hidden"],"sources":["src/components/nv-fieldtextarea/nv-fieldtextarea.scss?tag=nv-fieldtextarea","src/components/nv-fieldtextarea/nv-fieldtextarea.tsx"],"sourcesContent":["@import \"../../styles/form-field\";\n\n@mixin form-field-textarea-wrapper() {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--form-gap-x);\n  align-items: stretch;\n  align-self: stretch;\n}\n\n@mixin form-field-textarea-container() {\n  display: flex;\n  flex-grow: 1;\n  padding: calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);\n  justify-content: center;\n  align-items: center;\n  gap: var(--form-field-gap);\n  align-self: stretch;\n  border-radius: var(--form-field-radius);\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--nv-field-border-default);\n  opacity: var(--components-form-opacity-default);\n  background: var(--nv-field-background);\n  transition: all 150ms ease-out;\n\n  &:hover {\n    border-color: var(--nv-field-border-hover);\n  }\n\n  &:focus-within {\n    border-color: var(--nv-field-border-focus);\n    box-shadow: 0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow);\n  }\n  // Keep  ReadOnly before Disabled\n  &:has(textarea:read-only) {\n    // opacity: var(--components-form-opacity-readonly, 0.5); broken token generation, is 50px instead of 0.5\n    opacity: 0.5;\n    background-color: var(--components-form-field-background-readonly);\n    border-color: var(--nv-field-border-readonly);\n  }\n\n  &:has(textarea:disabled) {\n    // opacity: var(--components-form-opacity-disabled, 0.5); broken token generation, is 50px instead of 0.5\n    opacity: 0.5;\n    background-color: var(--components-form-field-background-disabled);\n    border-color: var(--nv-field-border-disabled);\n  }\n}\n\n@mixin form-field-textarea() {\n  display: flex;\n  align-items: center;\n  flex: 1 0 0;\n  overflow: hidden;\n  background-color: transparent;\n  color: var(--components-form-field-content-text);\n  text-overflow: ellipsis;\n  font-size: var(--form-field-font-size);\n  font-style: normal;\n  font-weight: 500;\n  line-height: var(--form-field-line-height);\n\n  &:focus {\n    outline: none;\n  }\n\n  &::placeholder {\n    overflow: hidden;\n    color: var(--components-form-field-content-placeholder);\n    text-overflow: ellipsis;\n    font-family: \"TT Norms Pro\", sans-serif;\n    font-size: var(--form-field-font-size);\n    font-style: normal;\n    font-weight: 400;\n    line-height: var(--form-field-line-height);\n  }\n}\n\nnv-fieldtextarea {\n  @include form-field-variables();\n  @include form-field-root();\n\n  &[readonly]:not([readonly=\"false\"]) {\n    @include form-field-readonly-variables();\n  }\n\n  &[error]:not([error=\"false\"]) {\n    @include form-field-error-variables();\n  }\n\n  &[success]:not([success=\"false\"]) {\n    @include form-field-success-variables();\n  }\n\n  &[required]:not([required=\"false\"]) label {\n    @include form-field-label-required();\n  }\n\n  label {\n    @include form-field-label();\n  }\n\n  .textarea-wrapper {\n    @include form-field-textarea-wrapper();\n\n    .textarea-container {\n      @include form-field-textarea-container();\n\n      textarea {\n        @include form-field-textarea();\n      }\n\n      nv-icon.validation {\n        @include form-field-icon();\n      }\n    }\n  }\n\n  .description {\n    @include form-field-description();\n  }\n\n  .error-description {\n    @include form-field-error-description();\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Watch,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\nimport clsx from 'clsx';\n\n/**\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n  tag: 'nv-fieldtextarea',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'nv-fieldtextarea.scss',\n})\nexport class NvFieldtextarea {\n  @Element() el: HTMLNvFieldtextareaElement;\n  private textareaElement!: HTMLTextAreaElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Message defines a 'hint ' message for the Text Field.\n   * @deprecated use description instead.\n   */\n  @Prop()\n  readonly message: string;\n\n  /**\n   * Add the message to the validation state.\n   * @deprecated use errorDescription and set the error prop instead.\n   */\n  @Prop()\n  readonly validation: string;\n\n  componentWillRender() {\n    if (this.message) {\n      this.description = this.message;\n    }\n\n    if (this.validation) {\n      this.errorDescription = this.validation;\n      this.error = true;\n    }\n  }\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the textarea 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 textareaId: string = uuidv4();\n\n  /**\n   * Lets you define the text that explains what users should enter in the text\n   * textarea field. It’s a crucial element for making forms clear and\n   * user-friendly.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\n\n  /**\n   * Add helpful hints or extra information under the text textarea field. This is\n   * where you can clarify what users should enter or provide additional\n   * instructions, making the form easier to fill out correctly.\n   */\n  @Prop({ reflect: true, mutable: true })\n  description: string;\n\n  /**\n   * Display temporary text inside the textarea field to give users a hint about\n   * what to type. It’s a great way to provide examples or suggestions directly\n   * in the field before they start typing.\n   */\n  @Prop({ reflect: true })\n  readonly placeholder: string;\n\n  /**\n   * Defines the name attribute of the textarea field, which is crucial for form\n   * submission. This value is used as the key in the key-value pair sent to\n   * the server, representing the textarea’s data in form submissions. It should be\n   * unique within the form to avoid conflicts\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * Specifies the value of the textarea field, which determines the text displayed\n   * within the field. This prop is typically used in controlled components\n   * where the textarea’s value is managed by the component’s state.\n   */\n  @Prop({ reflect: true, mutable: true })\n  value: string;\n\n  /**\n   * The disabled prop lets you turn off the textarea field so that users can’t\n   * type in it. When disabled, the field is grayed out and won’t respond to#\n   * clicks or touches.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Display the textarea field’s content without allowing users to change it.\n   * Users can still click on it, select, and copy the text, but they won’t be\n   * able to type or delete anything.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks the textarea field as required, ensuring that the user must fill it out\n   * before submitting the form.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Alters the textarea field’s appearance to indicate an error, helping users\n   * identify fields that need correction.\n   * @validator error\n   */\n  @Prop({ reflect: true, mutable: true })\n  error: boolean = false;\n\n  /**\n   * Show a helpful message under the textarea field when there’s a problem. It\n   * explains what’s wrong and how users can fix it, making the error easier to\n   * understand and resolve.\n   * @validator message\n   */\n  @Prop({ reflect: true, mutable: true })\n  errorDescription: string;\n\n  /**\n   * Changes the textarea field’s appearance to indicate successful textarea or\n   * validation.\n   */\n  @Prop({ reflect: true })\n  readonly success: boolean = false;\n\n  /**\n   * Limits how many characters users can type into the textarea field. It’s\n   * helpful for making sure users don’t enter too much information, keeping\n   * their textarea within the allowed limit.\n   */\n  @Prop({ reflect: true })\n  readonly maxlength: number;\n\n  /**\n   * Ensures that users type at least a certain number of characters into the\n   * textarea field. It’s a way to make sure users provide enough information\n   * before moving on.\n   */\n  @Prop({ reflect: true })\n  readonly minlength: number;\n\n  /**\n   * The number of visible text lines for the control. The default is 3. This\n   * can be useful when you want to limit the size of the textarea field or when\n   * you want to make the textarea field smaller to fit a specific layout. The\n   * textarea field will expand vertically to fit the text as the user types.\n   */\n  @Prop({ reflect: true })\n  readonly rows: number = 3;\n\n  /**\n   * Controls the resize property of a textarea. It can be set to none, both,\n   * horizontal, or vertical. The default is vertical.\n   */\n  @Prop({ reflect: true })\n  readonly resize: 'none' | 'both' | 'horizontal' | 'vertical' = 'vertical';\n\n  /**\n   * Enable this to make the textarea automatically resize as the user types,\n   * adjusting the height to fit the content. For the best experience, avoid\n   * vertical resizing, as it’s controlled by this feature. Horizontal resizing\n   * can still be allowed if desired.\n   */\n  @Prop({ reflect: true })\n  readonly autosize: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the textarea value changes.\n   * @bind value\n   */\n  @Event()\n  valueChanged: EventEmitter<string>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * If autosize is true, we need to make sure to update the min-height when\n   * the rows change.\n   */\n  @Watch('rows')\n  rowsChanged() {\n    if (this.autosize) {\n      this.adjustTextareaHeight();\n    }\n  }\n\n  /**\n   * If autosize is true, we need to make sure to update the height and\n   * min-height, if false, we need to remove the height property.\n   */\n  @Watch('autosize')\n  autosizeChanged() {\n    if (this.autosize) {\n      this.adjustTextareaHeight();\n    } else {\n      this.textareaElement?.style.removeProperty('height');\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region METHODS\n\n  private handleTextarea = (event: Event) => {\n    const textarea = event.target as HTMLTextAreaElement;\n    this.value = textarea.value;\n    this.valueChanged.emit(textarea.value);\n\n    if (this.autosize) {\n      this.adjustTextareaHeight();\n    }\n  };\n\n  private handleTextareaContainerClick = () => {\n    this.textareaElement.focus();\n  };\n\n  private adjustTextareaHeight() {\n    if (this.textareaElement && this.autosize) {\n      this.textareaElement.style.height = 'auto';\n\n      // Get computed styles\n      const computedStyle = window.getComputedStyle(this.textareaElement);\n      const lineHeight = parseFloat(computedStyle.lineHeight);\n      const paddingTop = parseFloat(computedStyle.paddingTop);\n      const paddingBottom = parseFloat(computedStyle.paddingBottom);\n      const borderTopWidth = parseFloat(computedStyle.borderTopWidth);\n      const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth);\n\n      // Calculate min-height based on rows\n      const minHeight =\n        lineHeight * this.rows +\n        paddingTop +\n        paddingBottom +\n        borderTopWidth +\n        borderBottomWidth;\n\n      this.textareaElement.style.minHeight = `${minHeight}px`;\n      this.textareaElement.style.height =\n        this.textareaElement.scrollHeight + 'px';\n    }\n  }\n\n  /**\n   * Class        Properties\n   * resize-none\tresize: none;\n   * resize-y\t    resize: vertical;\n   * resize-x\t    resize: horizontal;\n   * resize\t      resize: both;\n   * @returns {string} The resize class.\n   */\n  private getResize() {\n    if (this.resize === 'none') return 'resize-none';\n    if (this.resize === 'vertical') return 'resize-y';\n    if (this.resize === 'horizontal') return 'resize-x';\n    if (this.resize === 'both') return 'resize';\n    return 'resize-none';\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentDidLoad() {\n    if (this.autosize) {\n      this.adjustTextareaHeight();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n          <label htmlFor={this.textareaId}>\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.textareaId}\n              ref={e => (this.textareaElement = e)}\n              placeholder={this.placeholder}\n              name={this.name}\n              disabled={this.disabled}\n              readOnly={this.readonly}\n              required={this.required}\n              maxlength={this.maxlength}\n              minlength={this.minlength}\n              autocomplete=\"off\"\n              value={this.value}\n              onInput={this.handleTextarea}\n              rows={this.rows}\n              class={clsx(this.getResize())}\n            />\n          </div>\n        </div>\n\n        {(this.description ||\n          this.el.querySelector('[slot=\"description\"]')) && (\n          <div class=\"description\">\n            <slot name=\"description\">{this.description}</slot>\n          </div>\n        )}\n\n        {(this.errorDescription ||\n          this.el.querySelector('[slot=\"error-description\"]')) && (\n          <div hidden={!this.error} class=\"error-description\">\n            <slot name=\"error-description\">{this.errorDescription}</slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"mappings":"mIAAA,MAAMA,EAAqB,21JAC3B,MAAAC,EAAeD,E,MCuBFE,EAAe,M,oEAyNlBC,KAAAC,eAAkBC,IACxB,MAAMC,EAAWD,EAAME,OACvBJ,KAAKK,MAAQF,EAASE,MACtBL,KAAKM,aAAaC,KAAKJ,EAASE,OAEhC,GAAIL,KAAKQ,SAAU,CACjBR,KAAKS,sB,GAIDT,KAAAU,6BAA+B,KACrCV,KAAKW,gBAAgBC,OAAO,E,iEAzLAC,I,kIAiDD,M,cAQA,M,cAOA,M,WAQZ,M,6CAgBW,M,4DAyBJ,E,YAOuC,W,cASlC,K,CAvJ7B,mBAAAC,GACE,GAAId,KAAKe,QAAS,CAChBf,KAAKgB,YAAchB,KAAKe,O,CAG1B,GAAIf,KAAKiB,WAAY,CACnBjB,KAAKkB,iBAAmBlB,KAAKiB,WAC7BjB,KAAKmB,MAAQ,I,EAsKjB,WAAAC,GACE,GAAIpB,KAAKQ,SAAU,CACjBR,KAAKS,sB,EAST,eAAAY,G,MACE,GAAIrB,KAAKQ,SAAU,CACjBR,KAAKS,sB,KACA,EACLa,EAAAtB,KAAKW,mBAAe,MAAAW,SAAA,SAAAA,EAAEC,MAAMC,eAAe,S,EAsBvC,oBAAAf,GACN,GAAIT,KAAKW,iBAAmBX,KAAKQ,SAAU,CACzCR,KAAKW,gBAAgBY,MAAME,OAAS,OAGpC,MAAMC,EAAgBC,OAAOC,iBAAiB5B,KAAKW,iBACnD,MAAMkB,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,EAAa7B,KAAKoC,KAClBL,EACAC,EACAC,EACAC,EAEFlC,KAAKW,gBAAgBY,MAAMY,UAAY,GAAGA,MAC1CnC,KAAKW,gBAAgBY,MAAME,OACzBzB,KAAKW,gBAAgB0B,aAAe,I,EAYlC,SAAAC,GACN,GAAItC,KAAKuC,SAAW,OAAQ,MAAO,cACnC,GAAIvC,KAAKuC,SAAW,WAAY,MAAO,WACvC,GAAIvC,KAAKuC,SAAW,aAAc,MAAO,WACzC,GAAIvC,KAAKuC,SAAW,OAAQ,MAAO,SACnC,MAAO,a,CAOT,gBAAAC,GACE,GAAIxC,KAAKQ,SAAU,CACjBR,KAAKS,sB,EAQT,MAAAgC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,6CACD5C,KAAK6C,OAAS7C,KAAK8C,GAAGC,cAAc,oBACpCL,EAAA,SAAAE,IAAA,2CAAOI,QAAShD,KAAKiD,YACnBP,EAAA,QAAAE,IAAA,2CAAMM,KAAK,SAASlD,KAAK6C,QAI7BH,EAAA,OAAAE,IAAA,2CAAKO,MAAM,oBACTT,EAAA,OAAAE,IAAA,2CACEO,MAAM,qBACNC,QAASpD,KAAKU,8BAEdgC,EAAA,YAAAE,IAAA,2CACES,GAAIrD,KAAKiD,WACTK,IAAKC,GAAMvD,KAAKW,gBAAkB4C,EAClCC,YAAaxD,KAAKwD,YAClBN,KAAMlD,KAAKkD,KACXO,SAAUzD,KAAKyD,SACfC,SAAU1D,KAAK2D,SACfC,SAAU5D,KAAK4D,SACfC,UAAW7D,KAAK6D,UAChBC,UAAW9D,KAAK8D,UAChBC,aAAa,MACb1D,MAAOL,KAAKK,MACZ2D,QAAShE,KAAKC,eACdmC,KAAMpC,KAAKoC,KACXe,MAAOc,EAAKjE,KAAKsC,kBAKrBtC,KAAKgB,aACLhB,KAAK8C,GAAGC,cAAc,0BACtBL,EAAA,OAAAE,IAAA,2CAAKO,MAAM,eACTT,EAAA,QAAAE,IAAA,2CAAMM,KAAK,eAAelD,KAAKgB,eAIjChB,KAAKkB,kBACLlB,KAAK8C,GAAGC,cAAc,gCACtBL,EAAA,OAAAE,IAAA,2CAAKsB,QAASlE,KAAKmB,MAAOgC,MAAM,qBAC9BT,EAAA,QAAAE,IAAA,2CAAMM,KAAK,qBAAqBlD,KAAKkB,mB","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as e,c as o,h as i,a as c,g as n}from"./p-db2a68f3.js";import{c as r}from"./p-8a1a6e56.js";import{v as t}from"./p-f5ff676c.js";const a='nv-fieldcheckbox{--nv-fieldcheckbox-border-default:var(--components-form-field-border-default);--nv-fieldcheckbox-border-hover:var(--components-form-field-border-hover);--nv-fieldcheckbox-border-focus:var(--components-form-field-border-default);--nv-fieldcheckbox-background-default:var(--components-form-field-background-default);--nv-fieldcheckbox-background-checked:var(--components-form-field-background-checked);--nv-fieldcheckbox-background-disabled:var(--components-form-field-background-disabled);--nv-fieldcheckbox-focus-box-shadow:var(--color-focus-brand);--nv-fieldcheckbox-color-checked:var(--components-form-shape-foreground-default);--nv-fieldcheckbox-color-disabled:var(--components-form-shape-foreground-disabled);--nv-fieldcheckbox-outline-color:var(--color-focus-brand);display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-fieldcheckbox:not([disabled],[readonly]) input,nv-fieldcheckbox:not([disabled],[readonly]) label{cursor:pointer}nv-fieldcheckbox.error .input-container{--nv-fieldcheckbox-border-default:var(--components-form-field-border-error);--nv-fieldcheckbox-border-hover:var(--nv-fieldcheckbox-border-default);--nv-fieldcheckbox-border-focus:var(--components-form-field-border-error);--nv-fieldcheckbox-focus-box-shadow:var(--color-focus-destructive);--nv-fieldcheckbox-color-disabled:var(--components-form-shape-foreground-disabled-error);--nv-fieldcheckbox-background-checked:var(--components-form-field-background-error);--nv-fieldcheckbox-outline-color:var(--color-focus-destructive)}nv-fieldcheckbox.label-placement-before{flex-direction:row-reverse}nv-fieldcheckbox[disabled]{opacity:0.5}nv-fieldcheckbox 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-fieldcheckbox .input-container{position:relative;color:var(--nv-fieldcheckbox-color-checked)}nv-fieldcheckbox .input-container input[type=checkbox][readonly]{opacity:0.5}nv-fieldcheckbox .input-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--nv-fieldcheckbox-color-disabled)}nv-fieldcheckbox .input-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-checkbox-size);height:var(--form-checkbox-size);flex-direction:column;align-items:flex-start;border-radius:var(--form-checkbox-radius);border-width:var(--form-checkbox-border-width);border-style:solid;border-color:var(--nv-fieldcheckbox-border-default);background:var(--nv-fieldcheckbox-background-default)}nv-fieldcheckbox .input-container input[type=checkbox]:hover{border-color:var(--nv-fieldcheckbox-border-hover)}nv-fieldcheckbox .input-container input[type=checkbox]:focus{border-color:var(--nv-fieldcheckbox-border-focus)}nv-fieldcheckbox .input-container input[type=checkbox]:focus,nv-fieldcheckbox .input-container input[type=checkbox]:focus-within{outline:none}nv-fieldcheckbox .input-container input[type=checkbox]:focus-visible,nv-fieldcheckbox .input-container input[type=checkbox]:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--nv-fieldcheckbox-outline-color);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-fieldcheckbox .input-container input[type=checkbox]:checked,nv-fieldcheckbox .input-container input[type=checkbox]:indeterminate{background:var(--nv-fieldcheckbox-background-checked);border-color:var(--nv-fieldcheckbox-background-checked)}nv-fieldcheckbox .input-container input[type=checkbox]:disabled:not([readonly]){background:var(--nv-fieldcheckbox-background-disabled);border-color:var(--nv-fieldcheckbox-border-default)}nv-fieldcheckbox .input-container input[type=checkbox][readonly]{opacity:0.5}nv-fieldcheckbox .input-container .icon{pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center}nv-fieldcheckbox .input-container .icon svg{width:var(--form-checkbox-icon-size);height:var(--form-checkbox-icon-size);fill:none;stroke:currentcolor;stroke-width:var(--form-checkbox-icon-stroke);flex-shrink:0}nv-fieldcheckbox .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-fieldcheckbox .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-fieldcheckbox .text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}';const d=a;const s=class{constructor(i){e(this,i);this.checkedChanged=o(this,"checkedChanged",7);this.message=undefined;this.validation=undefined;this.labelBefore=false;this.inputId=t();this.name=undefined;this.value=undefined;this.label=undefined;this.labelPlacement=undefined;this.hideLabel=false;this.description=undefined;this.error=false;this.errorDescription=undefined;this.checked=false;this.indeterminate=false;this.disabled=false;this.readonly=false;this.required=false}componentWillRender(){if(this.message){this.description=this.message}if(this.labelBefore){this.labelPlacement="before"}if(this.validation){this.errorDescription=this.validation}}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}if(this.indeterminate){this.indeterminate=false}this.checked=o.checked}}render(){return i(c,{key:"b927465541957ac5e40c6af190757ac44cf4a104",class:r(this.labelPlacement==="before"&&"label-placement-before",this.error&&"error")},i("div",{key:"a8a14a21f274f0ad1ebaecb4af0b6eeee73ad0bd",class:"input-container"},i("input",{key:"1ca6af28c329360b9b919a65516b1f1573669881",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&&!this.required,required:this.required,indeterminate:this.indeterminate,ref:e=>{if(e){e.indeterminate=this.indeterminate}}}),i("span",{key:"ebdf5ba1086be1fed6c4364557c8c78c1b226333",class:"icon"},this.checked&&!this.indeterminate&&i("slot",{key:"5722e106a2945a670ff93a49203f41dafafc230b",name:"checked-icon"},i("svg",{key:"ba9707c495766d7909f2f234f122a5eb1dd975a5",xmlns:"http://www.w3.org/2000/svg",width:"14",height:"14",viewBox:"0 0 14 14",fill:"none"},i("path",{key:"dea34c4e8dd9857321c1f5625fbb3d5b02aa42ca",d:"M11.6667 3.5L5.25004 9.91667L2.33337 7","stroke-linecap":"round","stroke-linejoin":"round"}))),this.indeterminate&&i("slot",{key:"d833f4c34381f2579a09049239b467e77f90ac45",name:"indeterminate-icon"},i("svg",{key:"c0555c3edaa8eaa841b36d90f2bbd7cee458007d",class:"indeterminate-svg",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 14 14",fill:"none"},i("path",{key:"c5f4f39e6a4ae2bead864a3945a5f7b6b737f724",d:"M2.9165 7H11.0832","stroke-linecap":"round","stroke-linejoin":"round"}))))),i("div",{key:"986f1a08c34f548675cf6d9872514445a36a07af",class:"text-container"},(this.label||this.el.querySelector('[slot="label"]'))&&i("label",{key:"8a4925c138bc779af8df218c7a4bfaa290e71142",htmlFor:this.inputId,class:r(this.hideLabel&&"visually-hidden")},i("slot",{key:"514f59b77e90d090b2459aaa65ffdab6e56158fc",name:"label"},this.label)),(this.description||this.el.querySelector('[slot="description"]'))&&i("div",{key:"569e7989c59ffed32610f88a01e75074520884c0",class:"description"},i("slot",{key:"53eb9d3836b74e99e27a7b0ae6b4e91e6d4b16c6",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&i("div",{key:"ab1b17a3b93ec09021d16ece7d37bce578d20dcb",hidden:!this.error,class:"error-description"},i("slot",{key:"7c183b11c038a45b8f5e4a78f268fefe1512b1eb",name:"error-description"},this.errorDescription))))}get el(){return n(this)}static get watchers(){return{checked:["onCheckedChanged"]}}};s.style=d;export{s as nv_fieldcheckbox};
+//# sourceMappingURL=p-b8eb4c31.entry.js.map