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

package/dist/native/p-9fe47948.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as r,h as t,a as o,g as a}from"./p-6ef216c4.js";import{c as i}from"./p-8a1a6e56.js";import{v as n}from"./p-f5ff676c.js";const d='nv-fieldtextarea{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box}nv-fieldtextarea[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldtextarea[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fieldtextarea[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fieldtextarea[required]:not([required=false]) label::after{content:"*";color:var(--components-form-text-required);font-weight:700}nv-fieldtextarea label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fieldtextarea .textarea-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldtextarea .textarea-wrapper .textarea-container{display:flex;flex-grow:1;padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);justify-content:center;align-items:center;gap:var(--form-field-gap);align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldtextarea .textarea-wrapper .textarea-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldtextarea .textarea-wrapper .textarea-container:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldtextarea .textarea-wrapper .textarea-container:has(textarea:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldtextarea .textarea-wrapper .textarea-container:has(textarea:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldtextarea .textarea-wrapper .textarea-container textarea{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height)}nv-fieldtextarea .textarea-wrapper .textarea-container textarea:focus{outline:none}nv-fieldtextarea .textarea-wrapper .textarea-container textarea::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:"TT Norms Pro", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldtextarea .textarea-wrapper .textarea-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldtextarea .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldtextarea .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}';const s=d;const l=class{constructor(t){e(this,t);this.valueChanged=r(this,"valueChanged",7);this.inputId=n();this.disabled=false;this.readonly=false;this.required=false;this.error=false;this.success=false;this.rows=3;this.resize="vertical";this.autosize=false;this.handleTextarea=e=>{const r=e.target;this.value=r.value;this.valueChanged.emit(r.value);if(this.autosize){this.adjustTextareaHeight()}};this.handleTextareaContainerClick=()=>{this.textareaElement.focus()}}componentWillRender(){if(this.message){this.description=this.message}if(this.validation){this.errorDescription=this.validation;this.error=true}}rowsChanged(){if(this.autosize){this.adjustTextareaHeight()}}autosizeChanged(){var e;if(this.autosize){this.adjustTextareaHeight()}else{(e=this.textareaElement)===null||e===void 0?void 0:e.style.removeProperty("height")}}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 o=parseFloat(e.paddingBottom);const a=parseFloat(e.borderTopWidth);const i=parseFloat(e.borderBottomWidth);const n=r*this.rows+t+o+a+i;this.textareaElement.style.minHeight=`${n}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(o,{key:"373b828a0b311ba52dbfb666fe27e1ec22c7a8b2"},(this.label||this.el.querySelector('[slot="label"]'))&&t("label",{key:"ad9a79413e380c3213d1090a9b8677f24789b966",htmlFor:this.inputId},t("slot",{key:"be3b38804bfee6eb258b904700a06f0031644329",name:"label"},this.label)),t("div",{key:"9053d8e74cb27c6296b9de27627cb954ae0fe4bc",class:"textarea-wrapper"},t("div",{key:"870cbaff23359bc7677ecf48cd01610c14c209ed",class:"textarea-container",onClick:this.handleTextareaContainerClick},t("textarea",{key:"7efb8560969ece9527c5617c1300feabf5490f00",id:this.inputId,ref:e=>this.textareaElement=e,placeholder:this.placeholder,name:this.name,disabled:this.disabled,readOnly:this.readonly,required:this.required,maxlength:this.maxlength,minlength:this.minlength,autocomplete:"off",value:this.value,onInput:this.handleTextarea,rows:this.rows,class:i(this.getResize())}))),(this.description||this.el.querySelector('[slot="description"]'))&&t("div",{key:"d6920a2ce734349a88d671d8c2a92d301d80171e",class:"description"},t("slot",{key:"087138569e3f0b5dc327aa6525233fe366ec9126",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&t("div",{key:"a7ef3bc71412e23af7d20a4938ab0f4fd1f101a2",hidden:!this.error,class:"error-description"},t("slot",{key:"cd448427a41d917cb9d32358b3e1efc01297dbd5",name:"error-description"},this.errorDescription)))}static get formAssociated(){return true}get el(){return a(this)}static get watchers(){return{rows:["rowsChanged"],autosize:["autosizeChanged"]}}};l.style=s;export{l as nv_fieldtextarea};
+//# sourceMappingURL=p-9fe47948.entry.js.map

package/dist/native/p-9fe47948.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["nvFieldtextareaCss","NvFieldtextareaStyle0","NvFieldtextarea","constructor","hostRef","this","inputId","uuidv4","disabled","readonly","required","error","success","rows","resize","autosize","handleTextarea","event","textarea","target","value","valueChanged","emit","adjustTextareaHeight","handleTextareaContainerClick","textareaElement","focus","componentWillRender","message","description","validation","errorDescription","rowsChanged","autosizeChanged","_a","style","removeProperty","height","computedStyle","window","getComputedStyle","lineHeight","parseFloat","paddingTop","paddingBottom","borderTopWidth","borderBottomWidth","minHeight","scrollHeight","getResize","componentDidLoad","render","h","Host","key","label","el","querySelector","htmlFor","name","class","onClick","id","ref","e","placeholder","readOnly","maxlength","minlength","autocomplete","onInput","clsx","hidden"],"sources":["src/components/nv-fieldtextarea/nv-fieldtextarea.scss?tag=nv-fieldtextarea","src/components/nv-fieldtextarea/nv-fieldtextarea.tsx"],"sourcesContent":["@import \"../../styles/form-field\";\n\n@mixin form-field-textarea-wrapper() {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--form-gap-x);\n  align-items: stretch;\n  align-self: stretch;\n}\n\n@mixin form-field-textarea-container() {\n  display: flex;\n  flex-grow: 1;\n  padding: calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);\n  justify-content: center;\n  align-items: center;\n  gap: var(--form-field-gap);\n  align-self: stretch;\n  border-radius: var(--form-field-radius);\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--nv-field-border-default);\n  opacity: var(--components-form-opacity-default);\n  background: var(--nv-field-background);\n  transition: all 150ms ease-out;\n\n  &:hover {\n    border-color: var(--nv-field-border-hover);\n  }\n\n  &:focus-within {\n    border-color: var(--nv-field-border-focus);\n    box-shadow: 0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow);\n  }\n  // Keep  ReadOnly before Disabled\n  &:has(textarea:read-only) {\n    // opacity: var(--components-form-opacity-readonly, 0.5); broken token generation, is 50px instead of 0.5\n    opacity: 0.5;\n    background-color: var(--components-form-field-background-readonly);\n    border-color: var(--nv-field-border-readonly);\n  }\n\n  &:has(textarea:disabled) {\n    // opacity: var(--components-form-opacity-disabled, 0.5); broken token generation, is 50px instead of 0.5\n    opacity: 0.5;\n    background-color: var(--components-form-field-background-disabled);\n    border-color: var(--nv-field-border-disabled);\n  }\n}\n\n@mixin form-field-textarea() {\n  display: flex;\n  align-items: center;\n  flex: 1 0 0;\n  overflow: hidden;\n  background-color: transparent;\n  color: var(--components-form-field-content-text);\n  text-overflow: ellipsis;\n  font-size: var(--form-field-font-size);\n  font-style: normal;\n  font-weight: 500;\n  line-height: var(--form-field-line-height);\n\n  &:focus {\n    outline: none;\n  }\n\n  &::placeholder {\n    overflow: hidden;\n    color: var(--components-form-field-content-placeholder);\n    text-overflow: ellipsis;\n    font-family: \"TT Norms Pro\", sans-serif;\n    font-size: var(--form-field-font-size);\n    font-style: normal;\n    font-weight: 400;\n    line-height: var(--form-field-line-height);\n  }\n}\n\nnv-fieldtextarea {\n  @include form-field-variables();\n  @include form-field-root();\n\n  &[readonly]:not([readonly=\"false\"]) {\n    @include form-field-readonly-variables();\n  }\n\n  &[error]:not([error=\"false\"]) {\n    @include form-field-error-variables();\n  }\n\n  &[success]:not([success=\"false\"]) {\n    @include form-field-success-variables();\n  }\n\n  &[required]:not([required=\"false\"]) label {\n    @include form-field-label-required();\n  }\n\n  label {\n    @include form-field-label();\n  }\n\n  .textarea-wrapper {\n    @include form-field-textarea-wrapper();\n\n    .textarea-container {\n      @include form-field-textarea-container();\n\n      textarea {\n        @include form-field-textarea();\n      }\n\n      nv-icon.validation {\n        @include form-field-icon();\n      }\n    }\n  }\n\n  .description {\n    @include form-field-description();\n  }\n\n  .error-description {\n    @include form-field-error-description();\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Watch,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\nimport clsx from 'clsx';\n\n/**\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n  tag: 'nv-fieldtextarea',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'nv-fieldtextarea.scss',\n})\nexport class NvFieldtextarea {\n  @Element() el: HTMLNvFieldtextareaElement;\n  private textareaElement!: HTMLTextAreaElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Message defines a 'hint ' message for the Text Field.\n   * @deprecated use description instead.\n   */\n  @Prop()\n  readonly message: string;\n\n  /**\n   * Add the message to the validation state.\n   * @deprecated use errorDescription and set the error prop instead.\n   */\n  @Prop()\n  readonly validation: string;\n\n  componentWillRender() {\n    if (this.message) {\n      this.description = this.message;\n    }\n\n    if (this.validation) {\n      this.errorDescription = this.validation;\n      this.error = true;\n    }\n  }\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the input element and the for attribute of the associated\n   * label. If no ID is provided, a random one will be automatically generated\n   * to ensure unique identification, facilitating proper label association and\n   * accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * Lets you define the text that explains what users should enter in the text\n   * textarea field. It’s a crucial element for making forms clear and\n   * user-friendly.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\n\n  /**\n   * Add helpful hints or extra information under the text textarea field. This is\n   * where you can clarify what users should enter or provide additional\n   * instructions, making the form easier to fill out correctly.\n   */\n  @Prop({ reflect: true, mutable: true })\n  description: string;\n\n  /**\n   * Display temporary text inside the textarea field to give users a hint about\n   * what to type. It’s a great way to provide examples or suggestions directly\n   * in the field before they start typing.\n   */\n  @Prop({ reflect: true })\n  readonly placeholder: string;\n\n  /**\n   * Defines the name attribute of the textarea field, which is crucial for form\n   * submission. This value is used as the key in the key-value pair sent to\n   * the server, representing the textarea’s data in form submissions. It should be\n   * unique within the form to avoid conflicts\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * Specifies the value of the textarea field, which determines the text displayed\n   * within the field. This prop is typically used in controlled components\n   * where the textarea’s value is managed by the component’s state.\n   */\n  @Prop({ reflect: true, mutable: true })\n  value: string;\n\n  /**\n   * The disabled prop lets you turn off the textarea field so that users can’t\n   * type in it. When disabled, the field is grayed out and won’t respond to#\n   * clicks or touches.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Display the textarea field’s content without allowing users to change it.\n   * Users can still click on it, select, and copy the text, but they won’t be\n   * able to type or delete anything.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks the textarea field as required, ensuring that the user must fill it out\n   * before submitting the form.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Alters the textarea field’s appearance to indicate an error, helping users\n   * identify fields that need correction.\n   * @validator error\n   */\n  @Prop({ reflect: true, mutable: true })\n  error: boolean = false;\n\n  /**\n   * Show a helpful message under the textarea field when there’s a problem. It\n   * explains what’s wrong and how users can fix it, making the error easier to\n   * understand and resolve.\n   * @validator message\n   */\n  @Prop({ reflect: true, mutable: true })\n  errorDescription: string;\n\n  /**\n   * Changes the textarea field’s appearance to indicate successful textarea or\n   * validation.\n   */\n  @Prop({ reflect: true })\n  readonly success: boolean = false;\n\n  /**\n   * Limits how many characters users can type into the textarea field. It’s\n   * helpful for making sure users don’t enter too much information, keeping\n   * their textarea within the allowed limit.\n   */\n  @Prop({ reflect: true })\n  readonly maxlength: number;\n\n  /**\n   * Ensures that users type at least a certain number of characters into the\n   * textarea field. It’s a way to make sure users provide enough information\n   * before moving on.\n   */\n  @Prop({ reflect: true })\n  readonly minlength: number;\n\n  /**\n   * The number of visible text lines for the control. The default is 3. This\n   * can be useful when you want to limit the size of the textarea field or when\n   * you want to make the textarea field smaller to fit a specific layout. The\n   * textarea field will expand vertically to fit the text as the user types.\n   */\n  @Prop({ reflect: true })\n  readonly rows: number = 3;\n\n  /**\n   * Controls the resize property of a textarea. It can be set to none, both,\n   * horizontal, or vertical. The default is vertical.\n   */\n  @Prop({ reflect: true })\n  readonly resize: 'none' | 'both' | 'horizontal' | 'vertical' = 'vertical';\n\n  /**\n   * Enable this to make the textarea automatically resize as the user types,\n   * adjusting the height to fit the content. For the best experience, avoid\n   * vertical resizing, as it’s controlled by this feature. Horizontal resizing\n   * can still be allowed if desired.\n   */\n  @Prop({ reflect: true })\n  readonly autosize: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the textarea value changes.\n   * @bind value\n   */\n  @Event()\n  valueChanged: EventEmitter<string>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * If autosize is true, we need to make sure to update the min-height when\n   * the rows change.\n   */\n  @Watch('rows')\n  rowsChanged() {\n    if (this.autosize) {\n      this.adjustTextareaHeight();\n    }\n  }\n\n  /**\n   * If autosize is true, we need to make sure to update the height and\n   * min-height, if false, we need to remove the height property.\n   */\n  @Watch('autosize')\n  autosizeChanged() {\n    if (this.autosize) {\n      this.adjustTextareaHeight();\n    } else {\n      this.textareaElement?.style.removeProperty('height');\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region METHODS\n\n  private handleTextarea = (event: Event) => {\n    const textarea = event.target as HTMLTextAreaElement;\n    this.value = textarea.value;\n    this.valueChanged.emit(textarea.value);\n\n    if (this.autosize) {\n      this.adjustTextareaHeight();\n    }\n  };\n\n  private handleTextareaContainerClick = () => {\n    this.textareaElement.focus();\n  };\n\n  private adjustTextareaHeight() {\n    if (this.textareaElement && this.autosize) {\n      this.textareaElement.style.height = 'auto';\n\n      // Get computed styles\n      const computedStyle = window.getComputedStyle(this.textareaElement);\n      const lineHeight = parseFloat(computedStyle.lineHeight);\n      const paddingTop = parseFloat(computedStyle.paddingTop);\n      const paddingBottom = parseFloat(computedStyle.paddingBottom);\n      const borderTopWidth = parseFloat(computedStyle.borderTopWidth);\n      const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth);\n\n      // Calculate min-height based on rows\n      const minHeight =\n        lineHeight * this.rows +\n        paddingTop +\n        paddingBottom +\n        borderTopWidth +\n        borderBottomWidth;\n\n      this.textareaElement.style.minHeight = `${minHeight}px`;\n      this.textareaElement.style.height =\n        this.textareaElement.scrollHeight + 'px';\n    }\n  }\n\n  /**\n   * Class        Properties\n   * resize-none\tresize: none;\n   * resize-y\t    resize: vertical;\n   * resize-x\t    resize: horizontal;\n   * resize\t      resize: both;\n   * @returns {string} The resize class.\n   */\n  private getResize() {\n    if (this.resize === 'none') return 'resize-none';\n    if (this.resize === 'vertical') return 'resize-y';\n    if (this.resize === 'horizontal') return 'resize-x';\n    if (this.resize === 'both') return 'resize';\n    return 'resize-none';\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentDidLoad() {\n    if (this.autosize) {\n      this.adjustTextareaHeight();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n          <label htmlFor={this.inputId}>\n            <slot name=\"label\">{this.label}</slot>\n          </label>\n        )}\n\n        <div class=\"textarea-wrapper\">\n          <div\n            class=\"textarea-container\"\n            onClick={this.handleTextareaContainerClick}\n          >\n            <textarea\n              id={this.inputId}\n              ref={e => (this.textareaElement = e)}\n              placeholder={this.placeholder}\n              name={this.name}\n              disabled={this.disabled}\n              readOnly={this.readonly}\n              required={this.required}\n              maxlength={this.maxlength}\n              minlength={this.minlength}\n              autocomplete=\"off\"\n              value={this.value}\n              onInput={this.handleTextarea}\n              rows={this.rows}\n              class={clsx(this.getResize())}\n            />\n          </div>\n        </div>\n\n        {(this.description ||\n          this.el.querySelector('[slot=\"description\"]')) && (\n          <div class=\"description\">\n            <slot name=\"description\">{this.description}</slot>\n          </div>\n        )}\n\n        {(this.errorDescription ||\n          this.el.querySelector('[slot=\"error-description\"]')) && (\n          <div hidden={!this.error} class=\"error-description\">\n            <slot name=\"error-description\">{this.errorDescription}</slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as e,c as o,h as i,a as t,g as r}from"./p-6ef216c4.js";import{v as n}from"./p-f5ff676c.js";const d='nv-fielddropdown{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box}nv-fielddropdown[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fielddropdown[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fielddropdown[required]:not([required=false]) label::after{content:"*";color:var(--components-form-text-required);font-weight:700}nv-fielddropdown label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fielddropdown nv-popover{width:100%}nv-fielddropdown div[data-scope=popover]{width:100%;padding:var(--list-custom-padding);background-color:var(--components-list-custom-background);border:1px solid var(--components-list-custom-border)}nv-fielddropdown ul[slot=content]{gap:var(--list-custom-gap-y);display:flex;flex-direction:column}nv-fielddropdown hr{border:none;height:1px;background-color:var(--components-list-custom-separator);margin:0}nv-fielddropdown .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fielddropdown .input-container{display:flex;flex-grow:1;padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);justify-content:center;align-items:center;gap:var(--form-field-gap);align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default);background:var(--nv-field-background);transition:all 150ms ease-out;display:flex;align-items:center;position:relative;width:100%;min-height:40px}nv-fielddropdown .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddropdown .input-container:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fielddropdown .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fielddropdown .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fielddropdown .input-container input,nv-fielddropdown .input-container p.non-filterable-text{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%;padding-right:2rem;flex-grow:1;margin:0;min-height:100%;box-sizing:border-box}nv-fielddropdown .input-container input:focus,nv-fielddropdown .input-container p.non-filterable-text:focus{outline:none}nv-fielddropdown .input-container input::placeholder,nv-fielddropdown .input-container p.non-filterable-text::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:"TT Norms Pro", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fielddropdown .input-container .toggle-dropdown-icon{position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:2}nv-fielddropdown .input-container nv-icon.validation{color:var(--nv-field-border-default);position:absolute;right:50px}nv-fielddropdown .input-container.focus-within,nv-fielddropdown .input-container:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fielddropdown .non-filterable-text{display:block;border-radius:var(--form-field-radius);background-color:var(--nv-field-background);color:var(--components-form-field-content-text);font-size:var(--form-field-font-size);font-weight:500;line-height:var(--form-field-line-height);box-sizing:border-box;cursor:pointer;height:100%;min-height:40px}nv-fielddropdown .non-filterable-text span{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis}nv-fielddropdown .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fielddropdown .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}.input-container.focus-within,.input-container:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}';const s=d;const l=class{constructor(i){e(this,i);this.dropdownItemSelected=o(this,"dropdownItemSelected",7);this.valueChanged=o(this,"valueChanged",7);this.inputId=n();this.open=false;this.autocomplete="off";this.required=false;this.error=false;this.readonly=false;this.disabled=false;this.emptyresult="No results found";this.filterText="";this.filterable=false;this.isFilterable=this.filterable;this.selectedValues=new Set;this.handleInputContainerClick=e=>{if(this.disabled||this.readonly){return}const o=e.target;if(o.tagName==="P"||o.tagName==="SPAN"){this.open=true;this.popoverElement.show();const e=this.el.querySelector(".input-container");if(e){e.classList.add("focus-within");const o=()=>{e.classList.remove("focus-within")};this.popoverElement.addEventListener("hide",o)}}};this.handleInput=e=>{if(!this.filterable)return;if(this.disabled||this.readonly){return}const o=e.target;this.filterText=o.value.toLowerCase();this.value=o.value;this.valueChanged.emit(o.value);this.filterItems()};this.handleInputFocus=()=>{if(this.disabled||this.readonly){return}this.open=true};this.handleInputBlur=()=>{setTimeout((()=>{if(!this.el.contains(document.activeElement)){this.open=false;this.popoverElement.hide()}}),150)};this.togglePopover=()=>{if(this.disabled||this.readonly){return}this.open=!this.open;if(this.open){this.popoverElement.show();if(!this.filterable){this.focusFirstItem()}}else{this.popoverElement.hide()}}}handleItemSelected(e){if(this.disabled||this.readonly)return;const o=Array.from(this.el.querySelectorAll("nv-fielddropdownitem"));o.forEach((o=>{if(o!==e.target){o.removeAttribute("selected");o.classList.remove("selected")}}));this.value=e.detail.value;e.target.setAttribute("selected","true");e.target.classList.add("selected");this.dropdownItemSelected.emit(e.detail);if(this.popoverElement){this.popoverElement.hide()}}handleOpenChanged(e){this.open=e.detail}watchFilterableHandler(e){this.isFilterable=e;this.filterable=e}watchValueHandler(){this.setInitialSelection()}connectedCallback(){document.addEventListener("click",this.handleClickOutside.bind(this));this.setInitialSelection();if(this.filterable&&this.value){this.filterText=this.value.toLowerCase();this.filterItems()}else{this.resetFilter()}}setInitialSelection(){var e;const o=Array.from(this.el.querySelectorAll("nv-fielddropdownitem"));const i=o.find((e=>{var o;return e.getAttribute("label")===this.value||e.getAttribute("value")===this.value||((o=e.textContent)===null||o===void 0?void 0:o.trim())===this.value}));o.forEach((e=>{e.removeAttribute("selected");e.classList.remove("selected")}));if(i){i.setAttribute("selected","true");i.classList.add("selected");this.value=i.getAttribute("label")||i.getAttribute("value")||((e=i.textContent)===null||e===void 0?void 0:e.trim())||"";if(this.inputElement){this.inputElement.value=this.value}}}disconnectedCallback(){document.removeEventListener("click",this.handleClickOutside.bind(this))}filterItems(){var e;const o=Array.from(this.el.querySelectorAll("nv-fielddropdownitem"));const i=this.el.querySelector("nv-fielddropdownitem[data-empty]");if(i){i.remove()}let t=false;o.forEach((e=>{var o,i;const r=((o=e.textContent)===null||o===void 0?void 0:o.toLowerCase())||"";const n=((i=e.value)===null||i===void 0?void 0:i.toLowerCase())||"";const d=n.includes(this.filterText)||r.includes(this.filterText);e.style.display=d?"":"none";if(d){t=true}}));if(!t){const o=document.createElement("nv-fielddropdownitem");o.setAttribute("data-empty","true");o.setAttribute("disabled","true");o.textContent=this.emptyresult;(e=this.el.querySelector('ul[slot="content"]'))===null||e===void 0?void 0:e.appendChild(o)}}resetFilter(){const e=Array.from(this.el.querySelectorAll("nv-fielddropdownitem"));e.forEach((e=>{e.style.display=""}))}async getFilterText(){return this.filterText}handleClickOutside(e){if(this.el.contains(e.target)||this.inputElement&&this.inputElement.contains(e.target)){return}this.popoverElement.hide()}handleKeyDown(e){if(!this.open){if(e.key==="ArrowDown"){this.open=true;this.popoverElement.show();if(!this.filterable){this.focusFirstItem()}e.preventDefault();return}return}if(!this.popoverElement){console.warn("Popover element is not defined");return}const o=Array.from(this.el.querySelectorAll("nv-fielddropdownitem:not([data-empty])"));if(o.length===0){console.warn("No dropdown items found to navigate");return}let i=o.findIndex((e=>e.classList.contains("highlighted")));if(e.key==="ArrowDown"){e.preventDefault();i=(i+1)%o.length;this.updateHighlightedItem(o,i)}else if(e.key==="ArrowUp"){e.preventDefault();i=(i-1+o.length)%o.length;this.updateHighlightedItem(o,i)}else if(e.key==="Enter"&&i>=0){e.preventDefault();o[i].click()}else if(e.key==="Escape"){e.preventDefault();this.open=false;this.popoverElement.hide();if(this.inputElement){this.inputElement.blur()}}}updateHighlightedItem(e,o){e.forEach(((e,i)=>{if(i===o){e.classList.add("highlighted");e.setAttribute("tabindex","0");if(!e.checkVisibility()){console.log("Item not focused")}e.focus();e.scrollIntoView({block:"nearest"})}else{e.classList.remove("highlighted");e.setAttribute("tabindex","-1")}}))}focusFirstItem(){const e=this.el.querySelector("nv-fielddropdownitem");if(e){e.focus();this.updateHighlightedItem(Array.from(this.el.querySelectorAll("nv-fielddropdownitem")),0)}else{console.warn("No first item found to focus")}}render(){return i(t,{key:"ee220f04cb94b18afa0504938ee269c0edb1d1b5"},(this.label||this.el.querySelector('[slot="label"]'))&&i("label",{key:"9cf2035bcef627718cb0e9cda9f10d1deb829201",htmlFor:this.inputId},i("slot",{key:"6fe8d6dadee22c489696fbd94067398f5b22f8a7",name:"label"},this.label)),i("nv-popover",{key:"c96697a489ceb13a600f63e1496dcc2cedf6baa7",ref:e=>this.popoverElement=e,triggerMode:"controlled",placement:"bottom-start",open:this.open},i("div",{key:"0a996e770694e7521e57007f5b3a9272ef9ad485",class:"input-wrapper",slot:"trigger"},i("slot",{key:"41b6e77ce228cd4aedbffbb440bf375c82e05c30",name:"before-input"}),i("div",{key:"ffdeba473c57672b13577a225c0b2cc436df2c12",class:"input-container",onClick:this.handleInputContainerClick},i("slot",{key:"14af93b626704024c44371934cc1b4b49b068ac7",name:"leading-input"}),this.isFilterable||this.disabled||this.readonly?i("input",{id:this.inputId,type:"search",ref:e=>this.inputElement=e,autocomplete:this.autocomplete,placeholder:this.placeholder,name:this.name,value:this.value,required:this.required,disabled:this.disabled,readOnly:this.readonly,onInput:this.handleInput,onFocus:this.handleInputFocus,onBlur:this.handleInputBlur,onKeyDown:this.handleKeyDown}):i("p",{id:this.inputId,class:"non-filterable-text",onClick:this.handleInputContainerClick,tabIndex:0,onKeyDown:this.handleKeyDown,onFocus:this.handleInputFocus},i("span",null,this.value||this.placeholder)),i("nv-iconbutton",{key:"961e3b20bb234ba3c24e8e5389154245ae35fdb9",class:"toggle-dropdown-icon",name:this.open?"chevron-top":"chevron-down",size:"md",emphasis:"lower","aria-label":this.open?"Hide dropdown":"Show dropdown","aria-pressed":this.open.toString(),onClick:this.togglePopover})),i("slot",{key:"37f6b2288683f0b2e16e553b66e5a534a0d372f6",name:"after-input"})),i("slot",{key:"d7c7ad38d9f486408858a68c1cba7e9c6ae8788f",name:"content"})),(this.description||this.el.querySelector('[slot="description"]'))&&i("div",{key:"6a4d137ba434bb2d36bc74b6f4cb442274857716",class:"description"},i("slot",{key:"d2e85ddebab03a8a752c0f7558b57f35d2e30b85",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&i("div",{key:"b05d210c0e0a43ce8bd96849f7556f1accd691fb",hidden:!this.error,class:"error-description"},i("slot",{key:"7d455d5027589ccad7cdccf5ce0e0cc25a7ac7bd",name:"error-description"},this.errorDescription)))}static get formAssociated(){return true}get el(){return r(this)}static get watchers(){return{filterable:["watchFilterableHandler"],value:["watchValueHandler"]}}};l.style=s;export{l as nv_fielddropdown};
+//# sourceMappingURL=p-afbc5259.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["nvFielddropdownCss","NvFielddropdownStyle0","NVFieldDropDown","constructor","hostRef","this","inputId","uuidv4","open","autocomplete","required","error","readonly","disabled","emptyresult","filterText","filterable","isFilterable","selectedValues","Set","handleInputContainerClick","event","target","tagName","popoverElement","show","inputContainer","el","querySelector","classList","add","removeFocusWithin","remove","addEventListener","handleInput","input","value","toLowerCase","valueChanged","emit","filterItems","handleInputFocus","handleInputBlur","setTimeout","contains","document","activeElement","hide","togglePopover","focusFirstItem","handleItemSelected","items","Array","from","querySelectorAll","forEach","item","removeAttribute","detail","setAttribute","dropdownItemSelected","handleOpenChanged","watchFilterableHandler","newValue","watchValueHandler","setInitialSelection","connectedCallback","handleClickOutside","bind","resetFilter","selectedItem","find","getAttribute","_a","textContent","trim","inputElement","disconnectedCallback","removeEventListener","existingEmptyItem","hasVisibleItems","_b","shouldShow","includes","style","display","emptyItem","createElement","appendChild","getFilterText","handleKeyDown","key","preventDefault","console","warn","length","currentIndex","findIndex","updateHighlightedItem","click","blur","index","i","checkVisibility","log","focus","scrollIntoView","block","firstItem","render","h","Host","label","htmlFor","name","ref","triggerMode","placement","class","slot","onClick","id","type","e","placeholder","readOnly","onInput","onFocus","onBlur","onKeyDown","tabIndex","size","emphasis","toString","description","errorDescription","hidden"],"sources":["src/components/nv-fielddropdown/nv-fielddropdown.scss?tag=nv-fielddropdown","src/components/nv-fielddropdown/nv-fielddropdown.tsx"],"sourcesContent":["@import '../../styles/form-field';\n\nnv-fielddropdown {\n  @include form-field-variables();\n  @include form-field-root();\n\n  &[readonly]:not([readonly='false']) {\n    @include form-field-readonly-variables();\n  }\n\n  &[error]:not([error='false']) {\n    @include form-field-error-variables();\n  }\n\n  &[required]:not([required='false']) label {\n    @include form-field-label-required();\n  }\n\n  label {\n    @include form-field-label();\n  }\n  nv-popover {\n    width: 100%\n  }\n  div[data-scope='popover'] {\n    width: 100%;\n    padding: var(--list-custom-padding);\n    background-color: var(--components-list-custom-background);\n    border: 1px solid var(--components-list-custom-border);\n\n  }\n  ul[slot='content'] {\n    gap: var(--list-custom-gap-y);\n    display: flex;\n    flex-direction: column;\n  }\n  hr {\n    border: none;\n    height: 1px;\n    background-color: var(--components-list-custom-separator);\n    margin: 0;\n  }\n\n  .input-wrapper {\n    @include form-field-input-wrapper();\n    width: 100%;\n  }\n\n  .input-container {\n    @include form-field-input-container();\n    display: flex;\n    align-items: center;\n    position: relative;\n    width: 100%;\n    min-height: 40px;\n    input,\n    p.non-filterable-text {\n      @include form-field-input();\n      width: 100%;\n      padding-right: 2rem;\n      flex-grow: 1;\n      margin: 0;\n      min-height: 100%;\n      box-sizing: border-box;\n    }\n\n    .toggle-dropdown-icon {\n      position: absolute;\n      right: 0;\n      top: 50%;\n      transform: translateY(-50%);\n      z-index: 2;\n    }\n\n    nv-icon.validation {\n      @include form-field-icon();\n      position: absolute;\n      right: 50px;\n    }\n\n    &.focus-within,\n    &:hover {\n      border-color: var(--nv-field-border-focus);\n      box-shadow: 0px 0px 0px var(--focus-field-stroke)\n        var(--nv-field-focus-box-shadow);\n    }\n  }\n\n  .non-filterable-text {\n    display: block;\n    border-radius: var(--form-field-radius);\n    background-color: var(--nv-field-background);\n    color: var(--components-form-field-content-text);\n    font-size: var(--form-field-font-size);\n    font-weight: 500;\n    line-height: var(--form-field-line-height);\n    box-sizing: border-box;\n    cursor: pointer;\n    height: 100%;\n    min-height: 40px;\n\n    span {\n      display: inline-block;\n      width: 100%;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n\n  .description {\n    @include form-field-description();\n  }\n\n  .error-description {\n    @include form-field-error-description();\n  }\n}\n\n.input-container.focus-within,\n.input-container:hover {\n  border-color: var(--nv-field-border-focus);\n  box-shadow: 0px 0px 0px var(--focus-field-stroke)\n    var(--nv-field-focus-box-shadow);\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  State,\n  Listen,\n  Event,\n  EventEmitter,\n  Watch,\n  Method,\n} from '@stencil/core';\n\nimport { v4 as uuidv4 } from 'uuid';\nimport { TextInputAutocomplete } from '../../utils/constants';\nimport { DropdownItemSelectedEventDetail } from '../nv-fielddropdownitem/DropdownItemSelectedEventDetail';\n\n/**\n * @slot content - Use a <ul></ul> tag for the slot, and place <nv-dropdownitem> elements inside.\n * @slot leading-input - Content to be placed before the input text, within the input container.\n * @slot before-input - Content to be placed before the input text, outside the input container.\n * @slot after-input - Content to be placed after the input text, outside the input container.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n\n@Component({\n  tag: 'nv-fielddropdown',\n  styleUrl: 'nv-fielddropdown.scss',\n  shadow: false,\n  formAssociated: true,\n})\nexport class NVFieldDropDown {\n  @Element() el: HTMLNvFielddropdownElement;\n  private inputElement!: HTMLInputElement;\n  private popoverElement!: HTMLNvPopoverElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the input element and the for attribute of the associated\n   * label. If no ID is provided, a random one will be automatically generated\n   * to ensure unique identification, facilitating proper label association and\n   * accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * Lets you define the text that explains what users should enter in the text\n   * input field. It’s a crucial element for making forms clear and\n   * user-friendly.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\n\n  /**\n   * Add helpful hints or extra information under the text input field. This is\n   * where you can clarify what users should enter or provide additional\n   * instructions, making the form easier to fill out correctly.\n   */\n  @Prop({ reflect: true })\n  readonly description: string;\n\n  /**\n   * Display temporary text inside the input field to give users a hint about\n   * what to type. It’s a great way to provide examples or suggestions directly\n   * in the field before they start typing.\n   * The placeholder is displayed only when the filterable option is enabled.\n   */\n  @Prop({ reflect: true })\n  readonly placeholder: string;\n\n  /**\n   * Defines the name attribute of the input field, which is crucial for form\n   * submission. This value is used as the key in the key-value pair sent to\n   * the server, representing the input’s data in form submissions. It should be\n   * unique within the form to avoid conflicts.\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * State of the dropdown popover.\n   */\n  @Prop({ reflect: true, mutable: true })\n  open: boolean = false;\n\n  /**\n   * The autocomplete prop helps users fill out the input field faster by\n   * suggesting entries they’ve used before, like their email or address.\n   * You can turn it on to make forms more convenient or off to ensure users\n   * always type in fresh data.\n   */\n  @Prop({ reflect: true })\n  readonly autocomplete: `${TextInputAutocomplete}` = 'off';\n\n  /**\n   * Specifies the value of the input field, which determines the text displayed\n   * within the field. This prop is typically used in controlled components\n   * where the input’s value is managed by the component’s state.\n   */\n  @Prop({ reflect: true, mutable: true })\n  value: string;\n\n  /**\n   * Marks the input field as required, ensuring that the user must fill it out\n   * before submitting the form.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Alters the input field’s appearance to indicate an error, helping users\n   * identify fields that need correction.\n   * @validator error\n   */\n  @Prop({ reflect: true })\n  readonly error: boolean = false;\n\n  /**\n   * A description that appears when there is an error related to the dropdown\n   * field.\n   * @validator message\n   */\n  @Prop({ reflect: true })\n  readonly errorDescription: string;\n\n  /**\n   * Display the input field’s content without allowing users to change it.\n   * Users can still click on it, select, and copy the text, but they won’t be\n   * able to type or delete anything.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * The disabled prop lets you turn off the input field so that users can’t\n   * type in it. When disabled, the field is grayed out and won’t respond to\n   * clicks or touches.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * The text to display when no items match the filter.\n   */\n  @Prop({ reflect: true })\n  readonly emptyresult: string = 'No results found';\n\n  /**\n   * The text entered by the user for filtering dropdown items.\n   */\n  @State()\n  filterText: string = '';\n\n  /**\n   * Enables or disables the filtering feature for the dropdown items.\n   */\n  @Prop({ reflect: true, mutable: true })\n  filterable: boolean = false;\n\n  @State()\n  isFilterable: boolean = this.filterable;\n\n  @State()\n  selectedValues: Set<string> = new Set();\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Event emitted when an item is selected.\n   */\n  @Event()\n  dropdownItemSelected: EventEmitter<DropdownItemSelectedEventDetail>;\n\n  @Listen('itemSelected')\n  handleItemSelected(event: CustomEvent<DropdownItemSelectedEventDetail>) {\n    if (this.disabled || this.readonly) return;\n\n    // Retrieve all nv-fielddropdownitem elements present in the dropdown.\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    // For each item, remove the 'selected' attribute and the 'selected' class.\n    items.forEach(item => {\n      if (item !== event.target) {\n        item.removeAttribute('selected');\n        item.classList.remove('selected');\n      }\n    });\n\n    // Update the value and emit the event with the selected item.\n    this.value = event.detail.value;\n    (event.target as HTMLNvFielddropdownitemElement).setAttribute(\n      'selected',\n      'true',\n    );\n    (event.target as HTMLElement).classList.add('selected');\n    this.dropdownItemSelected.emit(event.detail);\n\n    // Close the popover after selecting.\n    if (this.popoverElement) {\n      this.popoverElement.hide();\n    }\n  }\n\n  /**\n   * Emitted when the input value changes.\n   * @bind value\n   */\n  @Event()\n  valueChanged: EventEmitter<string>;\n\n  @Listen('openChanged')\n  handleOpenChanged(event: CustomEvent<boolean>) {\n    this.open = event.detail; // Update `open` based on the popover state\n  }\n\n  @Watch('filterable')\n  watchFilterableHandler(newValue: boolean) {\n    this.isFilterable = newValue;\n    this.filterable = newValue;\n  }\n\n  @Watch('value')\n  watchValueHandler() {\n    // Handle value change and update the corresponding dropdown item if it exists\n    this.setInitialSelection();\n  }\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Subscribe to click outside event.\n   */\n  connectedCallback() {\n    document.addEventListener('click', this.handleClickOutside.bind(this));\n\n    // Handle pre-selection during component initialization\n    this.setInitialSelection();\n\n    // Apply filtering if the dropdown is filterable and there is a value\n    if (this.filterable && this.value) {\n      this.filterText = this.value.toLowerCase();\n      this.filterItems(); // Update the visibility of items\n    } else {\n      // Ensure all items are visible if no filtering is applied\n      this.resetFilter();\n    }\n  }\n\n  /**\n   * Set the initial selection based on the current value and update the inputElement value.\n   */\n  private setInitialSelection() {\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    const selectedItem = items.find(\n      item =>\n        item.getAttribute('label') === this.value ||\n        item.getAttribute('value') === this.value ||\n        item.textContent?.trim() === this.value,\n    );\n\n    // Remove 'selected' from all items first to reset the state\n    items.forEach(item => {\n      item.removeAttribute('selected');\n      item.classList.remove('selected');\n    });\n\n    if (selectedItem) {\n      // Add the `selected` attribute and `selected` class for visual styling\n      selectedItem.setAttribute('selected', 'true');\n      selectedItem.classList.add('selected');\n\n      // Update the value and inputElement value to reflect the pre-selected item\n      this.value =\n        selectedItem.getAttribute('label') ||\n        selectedItem.getAttribute('value') ||\n        selectedItem.textContent?.trim() ||\n        '';\n      if (this.inputElement) {\n        this.inputElement.value = this.value;\n      }\n    }\n  }\n\n  /**\n   * Unsubscribe from click outside event.\n   */\n  disconnectedCallback() {\n    document.removeEventListener('click', this.handleClickOutside.bind(this));\n  }\n\n  /**\n   * Handle click on the input container.\n   * @param {MouseEvent} event - The click event.\n   */\n  private handleInputContainerClick = (event: MouseEvent) => {\n    if (this.disabled || this.readonly) {\n      return; // Do nothing if the dropdown is disabled or read-only\n    }\n\n    const target = event.target as HTMLElement;\n\n    // Check if it is the paragraph or another part of the container\n    if (target.tagName === 'P' || target.tagName === 'SPAN') {\n      this.open = true;\n      this.popoverElement.show();\n\n      // Simulate focus to trigger \"focus-within\" style\n      const inputContainer = this.el.querySelector(\n        '.input-container',\n      ) as HTMLElement;\n      if (inputContainer) {\n        inputContainer.classList.add('focus-within');\n\n        // Remove the \"focus-within\" class after a delay or when the popover is closed\n        const removeFocusWithin = () => {\n          inputContainer.classList.remove('focus-within');\n        };\n\n        // Or remove the class when the popover is closed\n        this.popoverElement.addEventListener('hide', removeFocusWithin);\n      }\n    }\n  };\n\n  /**\n   * Handle input change.\n   * @param {Event} event - The input event.\n   */\n  private handleInput = (event: Event) => {\n    if (!this.filterable) return; // Do not filter if `filterable` is false\n    if (this.disabled || this.readonly) {\n      return; // Do not toggle the state if the dropdown is disabled or read-only\n    }\n    const input = event.target as HTMLInputElement;\n    this.filterText = input.value.toLowerCase();\n    this.value = input.value; // Update the value\n    this.valueChanged.emit(input.value); // Emit an event if needed\n    this.filterItems(); // Update the visibility of items\n  };\n\n  /**\n   * Filter dropdown items based on the text entered by the user.\n   * If no items are found, display a message indicating no results.\n   */\n  private filterItems() {\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    // Remove the \"no results found\" item if it exists\n    const existingEmptyItem = this.el.querySelector(\n      'nv-fielddropdownitem[data-empty]',\n    );\n    if (existingEmptyItem) {\n      existingEmptyItem.remove();\n    }\n\n    let hasVisibleItems = false;\n\n    // Iterate over all items and adjust their visibility\n    items.forEach(item => {\n      const textContent = item.textContent?.toLowerCase() || ''; // Get the textual content of the slot\n      const value = item.value?.toLowerCase() || ''; // Get the value of the `value` attribute\n\n      // Check if the filtered text is present either in the value or in the textual content\n      const shouldShow =\n        value.includes(this.filterText) ||\n        textContent.includes(this.filterText);\n\n      item.style.display = shouldShow ? '' : 'none'; // Hide or show the item\n\n      if (shouldShow) {\n        hasVisibleItems = true;\n      }\n    });\n\n    // If no items are visible, add the \"no results found\" item\n    if (!hasVisibleItems) {\n      const emptyItem = document.createElement('nv-fielddropdownitem');\n      emptyItem.setAttribute('data-empty', 'true');\n      emptyItem.setAttribute('disabled', 'true');\n      emptyItem.textContent = this.emptyresult;\n      this.el.querySelector('ul[slot=\"content\"]')?.appendChild(emptyItem);\n    }\n  }\n\n  /**\n   * Reset the filter and make all items visible.\n   */\n  private resetFilter() {\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitem'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    items.forEach(item => {\n      item.style.display = '';\n    });\n  }\n\n  /**\n   * Retrieves the current filter text entered by the user.\n   * @returns {string} The filter text.\n   */\n  @Method()\n  async getFilterText(): Promise<string> {\n    return this.filterText;\n  }\n\n  /**\n   * Handle click outside the component.\n   * @param {MouseEvent} event - The click event.\n   */\n  private handleClickOutside(event: MouseEvent) {\n    if (\n      this.el.contains(event.target as Node) ||\n      (this.inputElement && this.inputElement.contains(event.target as Node))\n    ) {\n      // If the click is inside the component or on the input, do not close the popover\n      return;\n    }\n\n    this.popoverElement.hide(); // Close the popover if the click is outside the component\n  }\n\n  /**\n   * Handle input focus.\n   */\n  private handleInputFocus = () => {\n    if (this.disabled || this.readonly) {\n      return; // Do not toggle the state if the dropdown is disabled or read-only\n    }\n    this.open = true; // Force the popover to open\n  };\n\n  /**\n   * Handle input blur.\n   */\n  private handleInputBlur = () => {\n    // Use a delay to check if the focus is still within the popover\n    setTimeout(() => {\n      if (!this.el.contains(document.activeElement)) {\n        this.open = false;\n        this.popoverElement.hide(); // Close the popover if the focus is outside the component\n      }\n    }, 150);\n  };\n\n  /**\n   * Toggle the dropdown popover.\n   * @returns {void}\n   */\n  private togglePopover = (): void => {\n    if (this.disabled || this.readonly) {\n      return; // Do not toggle if disabled or read-only\n    }\n\n    this.open = !this.open;\n    if (this.open) {\n      this.popoverElement.show();\n\n      // Si le dropdown n'est pas filtrable, focus sur le premier élément\n      if (!this.filterable) {\n        this.focusFirstItem();\n      }\n    } else {\n      this.popoverElement.hide();\n    }\n  };\n\n  @Listen('keydown', { passive: false })\n  handleKeyDown(event: KeyboardEvent) {\n    if (!this.open) {\n      if (event.key === 'ArrowDown') {\n        this.open = true;\n        this.popoverElement.show();\n\n        if (!this.filterable) {\n          // Focus sur le premier élément si ce n'est pas filtrable\n          this.focusFirstItem();\n        }\n\n        event.preventDefault();\n        return;\n      }\n      return;\n    }\n\n    // Vérifiez si le popover est défini avant de chercher les items\n    if (!this.popoverElement) {\n      console.warn('Popover element is not defined');\n      return;\n    }\n\n    const items = Array.from(\n      this.el.querySelectorAll('nv-fielddropdownitem:not([data-empty])'),\n    ) as HTMLNvFielddropdownitemElement[];\n\n    // Vérifiez si les items existent\n    if (items.length === 0) {\n      console.warn('No dropdown items found to navigate');\n      return;\n    }\n\n    let currentIndex = items.findIndex(item =>\n      item.classList.contains('highlighted'),\n    );\n\n    if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      currentIndex = (currentIndex + 1) % items.length;\n      this.updateHighlightedItem(items, currentIndex);\n    } else if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      currentIndex = (currentIndex - 1 + items.length) % items.length;\n      this.updateHighlightedItem(items, currentIndex);\n    } else if (event.key === 'Enter' && currentIndex >= 0) {\n      event.preventDefault();\n      items[currentIndex].click();\n    } else if (event.key === 'Escape') {\n      event.preventDefault();\n      this.open = false;\n      this.popoverElement.hide();\n      if (this.inputElement) {\n        this.inputElement.blur();\n      }\n    }\n  }\n\n  private updateHighlightedItem(\n    items: HTMLNvFielddropdownitemElement[],\n    index: number,\n  ) {\n    items.forEach((item, i) => {\n      if (i === index) {\n        item.classList.add('highlighted');\n        item.setAttribute('tabindex', '0');\n        if (!item.checkVisibility()) {\n          console.log('Item not focused');\n        }\n\n        item.focus(); // Forcer le focus ici\n        item.scrollIntoView({ block: 'nearest' });\n      } else {\n        item.classList.remove('highlighted');\n        item.setAttribute('tabindex', '-1');\n      }\n    });\n  }\n\n  private focusFirstItem() {\n    const firstItem = this.el.querySelector('nv-fielddropdownitem');\n    if (firstItem) {\n      (firstItem as HTMLElement).focus();\n      this.updateHighlightedItem(\n        Array.from(\n          this.el.querySelectorAll('nv-fielddropdownitem'),\n        ) as HTMLNvFielddropdownitemElement[],\n        0,\n      );\n    } else {\n      console.warn('No first item found to focus');\n    }\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n          <label htmlFor={this.inputId}>\n            <slot name=\"label\">{this.label}</slot>\n          </label>\n        )}\n\n        <nv-popover\n          ref={el => (this.popoverElement = el as HTMLNvPopoverElement)}\n          triggerMode=\"controlled\"\n          placement=\"bottom-start\"\n          open={this.open}\n        >\n          <div class=\"input-wrapper\" slot=\"trigger\">\n            <slot name=\"before-input\"></slot>\n\n            <div\n              class=\"input-container\"\n              onClick={this.handleInputContainerClick}\n            >\n              <slot name=\"leading-input\"></slot>\n\n              {this.isFilterable || this.disabled || this.readonly ? (\n                <input\n                  id={this.inputId}\n                  type=\"search\"\n                  ref={e => (this.inputElement = e)}\n                  autocomplete={this.autocomplete}\n                  placeholder={this.placeholder}\n                  name={this.name}\n                  value={this.value}\n                  required={this.required}\n                  disabled={this.disabled}\n                  readOnly={this.readonly}\n                  onInput={this.handleInput}\n                  onFocus={this.handleInputFocus}\n                  onBlur={this.handleInputBlur}\n                  onKeyDown={this.handleKeyDown} // Gérer les touches fléchées ici\n                />\n              ) : (\n                <p\n                  id={this.inputId}\n                  class=\"non-filterable-text\"\n                  onClick={this.handleInputContainerClick}\n                  tabIndex={0} // Ajout du tabindex pour permettre de le focus\n                  onKeyDown={this.handleKeyDown} // Gérer les touches fléchées ici également\n                  onFocus={this.handleInputFocus}\n                >\n                  <span>{this.value || this.placeholder}</span>\n                </p>\n              )}\n\n              <nv-iconbutton\n                class=\"toggle-dropdown-icon\"\n                name={this.open ? 'chevron-top' : 'chevron-down'}\n                size=\"md\"\n                emphasis=\"lower\"\n                aria-label={this.open ? 'Hide dropdown' : 'Show dropdown'}\n                aria-pressed={this.open.toString()}\n                onClick={this.togglePopover}\n              />\n            </div>\n\n            <slot name=\"after-input\"></slot>\n          </div>\n\n          <slot name=\"content\"></slot>\n        </nv-popover>\n\n        {(this.description ||\n          this.el.querySelector('[slot=\"description\"]')) && (\n          <div class=\"description\">\n            <slot name=\"description\">{this.description}</slot>\n          </div>\n        )}\n\n        {(this.errorDescription ||\n          this.el.querySelector('[slot=\"error-description\"]')) && (\n          <div hidden={!this.error} class=\"error-description\">\n            <slot name=\"error-description\">{this.errorDescription}</slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n  //#endregion RENDER\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as e,c as r,h as t,a as i,g as o}from"./p-6ef216c4.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-content-high-text);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 a=class{constructor(t){e(this,t);this.valueChanged=r(this,"valueChanged",7);this.computedDisplayValue="";this.internalReadonly=false;this.selectId=l();this.disabled=false;this.readonly=false;this.required=false;this.error=false;this.success=false;this.multiple=false;this.value="";this.displayValue=false;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()}}}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:"e1333260c8fa6eebf9078f7497d2d0b30f555068"},(this.label||this.el.querySelector('[slot="label"]'))&&t("label",{key:"42d18737d174df03ac92c2cd178e372fed4bde1a",htmlFor:this.selectId},t("slot",{key:"675f7d4d5089bebb8104d848f1953445c79b584f",name:"label"},this.label)),t("div",{key:"59f13a05173ee15cffa6afca296da0333568cea4",class:"select-wrapper"},t("slot",{key:"1c2fe2ec6e84b95a47dc4c2668afd5d0ea899aee",name:"before-input"}),t("div",{key:"f6bd0c186ac6fa781e52329fc8a4622b740066f2",class:"select-container",onClick:this.handleSelectContainerClick},t("slot",{key:"fbf25811a89197b11a4d4ea6dd1020b44fd14f73",name:"leading-input"}),this.internalReadonly&&t("input",{key:"c05413ddedb713944ad7f128a866d761e38080c6",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:"6bd95875e397c69c0297fe0c3bc9703c7872f477",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:"22798124b2b743ee1b8ffc22f4e8fffc6704be66"})),this.internalReadonly&&t("nv-icon",{key:"6fb4193bf131fce928d0e5d0346eb7fe62fcf77e",name:"chevron-down",class:"readonly-icon",size:"sm"}),this.error&&t("nv-icon",{key:"4a84c2b8eece45c6247c7c58f74696fbc5b8ff4c",name:"alert-circle",class:"validation",size:"sm"}),this.success&&t("nv-icon",{key:"84af6db55127c516538f0df4d19f09f4570800f4",name:"circle-check",class:"validation",size:"sm"})),t("slot",{key:"11dd18fc96e0360ac62b80d3d295895051a914d1",name:"after-input"})),(this.description||this.el.querySelector('[slot="description"]'))&&t("div",{key:"142d57ab7ba7aaef8ae0929b94716d37dd151e1c",class:"description",id:`${this.selectId}-description`},t("slot",{key:"0ce2c8c5bfa0966b1017cfea79461df6630773b4",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&t("div",{key:"a06402c222f5f377ef314c66317c98df4b72e4b0",class:"error-description",id:`${this.selectId}-error`},t("slot",{key:"0d9e63fd9b8fa53a4ea037e5cb720a42206ee49d",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"]}}};a.style=n;export{a as nv_fieldselect};
+//# sourceMappingURL=p-dacd68ab.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["nvFieldselectCss","NvFieldselectStyle0","NvFieldselect","constructor","hostRef","this","computedDisplayValue","internalReadonly","selectId","uuidv4","disabled","readonly","required","error","success","multiple","value","displayValue","handleSelectChange","event","select","target","selectedValues","Array","from","selectedOptions","map","option","slice","join","valueChanged","emit","setFormValue","handleSelectContainerClick","selectElement","focus","componentWillRender","updateDisplayValue","message","description","validation","errorDescription","updateDisplayValueWatcher","newValue","split","val","trim","options","forEach","selected","includes","handleDisplayValueChange","handleReadonlyChange","selectedLabels","key","getLabelFromId","filter","label","ensureSelectElement","find","textContent","internals","el","querySelector","componentWillLoad","attachInternals","formElement","closest","input","document","createElement","type","name","appendChild","componentDidLoad","v","render","h","Host","htmlFor","class","onClick","id","readOnly","ref","onChange","size"],"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-content-high-text);\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 & {\n          /**\n           * Attach the element to the form internals.\n           * @returns {ElementInternals} - The element internals object.\n           */\n          attachInternals: () => ElementInternals;\n        }\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":"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","ignoreList":[]}

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

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

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

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

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

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

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

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

package/dist/types/components/nv-fieldtextarea/nv-fieldtextarea.d.ts

@@ -21,12 +21,12 @@ export declare class NvFieldtextarea {
     componentWillRender(): void;
     /****************************************************************************/
     /**
-     * Sets the ID for the textarea element and the for attribute of the associated
+     * Sets the ID for the input element and the for attribute of the associated
      * label. If no ID is provided, a random one will be automatically generated
      * to ensure unique identification, facilitating proper label association and
      * accessibility.
      */
-    readonly textareaId: string;
+    readonly inputId: string;
     /**
      * Lets you define the text that explains what users should enter in the text
      * textarea field. It’s a crucial element for making forms clear and

package/dist/types/components.d.ts

@@ -803,6 +803,10 @@ export namespace Components {
           * @validator message
          */
         "errorDescription": string;
+        /**
+          * Sets the ID for the input element and the for attribute of the associated label. If no ID is provided, a random one will be automatically generated to ensure unique identification, facilitating proper label association and accessibility.
+         */
+        "inputId": string;
         /**
           * Lets you define the text that explains what users should enter in the text textarea field. It’s a crucial element for making forms clear and user-friendly.
          */
@@ -848,10 +852,6 @@ export namespace Components {
           * Changes the textarea field’s appearance to indicate successful textarea or validation.
          */
         "success": boolean;
-        /**
-          * Sets the ID for the textarea element and the for attribute of the associated label. If no ID is provided, a random one will be automatically generated to ensure unique identification, facilitating proper label association and accessibility.
-         */
-        "textareaId": string;
         /**
           * Add the message to the validation state.
           * @deprecated use errorDescription and set the error prop instead.
@@ -2545,6 +2545,10 @@ declare namespace LocalJSX {
           * @validator message
          */
         "errorDescription"?: string;
+        /**
+          * Sets the ID for the input element and the for attribute of the associated label. If no ID is provided, a random one will be automatically generated to ensure unique identification, facilitating proper label association and accessibility.
+         */
+        "inputId"?: string;
         /**
           * Lets you define the text that explains what users should enter in the text textarea field. It’s a crucial element for making forms clear and user-friendly.
          */
@@ -2595,10 +2599,6 @@ declare namespace LocalJSX {
           * Changes the textarea field’s appearance to indicate successful textarea or validation.
          */
         "success"?: boolean;
-        /**
-          * Sets the ID for the textarea element and the for attribute of the associated label. If no ID is provided, a random one will be automatically generated to ensure unique identification, facilitating proper label association and accessibility.
-         */
-        "textareaId"?: string;
         /**
           * Add the message to the validation state.
           * @deprecated use errorDescription and set the error prop instead.

package/dist/vscode-data.json

@@ -1586,6 +1586,10 @@
           "name": "error-description",
           "description": "Show a helpful message under the textarea field when there’s a problem. It\nexplains what’s wrong and how users can fix it, making the error easier to\nunderstand and resolve."
         },
+        {
+          "name": "input-id",
+          "description": "Sets the ID for the input element and the for attribute of the associated\nlabel. If no ID is provided, a random one will be automatically generated\nto ensure unique identification, facilitating proper label association and\naccessibility."
+        },
         {
           "name": "label",
           "description": "Lets you define the text that explains what users should enter in the text\ntextarea field. It’s a crucial element for making forms clear and\nuser-friendly."
@@ -1644,10 +1648,6 @@
           "name": "success",
           "description": "Changes the textarea field’s appearance to indicate successful textarea or\nvalidation."
         },
-        {
-          "name": "textarea-id",
-          "description": "Sets the ID for the textarea element and the for attribute of the associated\nlabel. If no ID is provided, a random one will be automatically generated\nto ensure unique identification, facilitating proper label association and\naccessibility."
-        },
         {
           "name": "validation",
           "description": "Add the message to the validation state."