@nova-design-system/nova-webcomponents 3.0.0-beta.41 → 3.0.0-beta.43

package/dist/native/p-1a46cb52.entry.js

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

package/dist/native/p-2281d5ef.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as r,a as n,g as i}from"./p-ab002252.js";import{I as o}from"./p-53aa81dd.js";import{v as a}from"./p-f5ff676c.js";import"./p-0462f723.js";const d='nv-fielddaterange{--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-fielddaterange[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-fielddaterange[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-fielddaterange[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-fielddaterange[required]:not([required=false]) label::after{content:"*";color:var(--components-form-text-required);font-weight:700}nv-fielddaterange 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-fielddaterange nv-popover{width:100%;display:block}nv-fielddaterange nv-popover [data-scope=popover]{padding:0;background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border);width:auto}nv-fielddaterange nv-popover [slot=content]{display:block;width:100%}nv-fielddaterange .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;display:flex;align-items:center;gap:8px}nv-fielddaterange .input-wrapper .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;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, 1);background:var(--nv-field-background);transition:all 150ms ease-out;position:relative;flex:1;min-width:0;padding-right:32px}nv-fielddaterange .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddaterange .input-wrapper .input-container:focus-within,nv-fielddaterange .input-wrapper .input-container:focus-within:hover,nv-fielddaterange .input-wrapper .input-container:focus,nv-fielddaterange .input-wrapper .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fielddaterange .input-wrapper .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fielddaterange .input-wrapper .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fielddaterange .input-wrapper .input-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%}nv-fielddaterange .input-wrapper .input-container input:focus{outline:none}nv-fielddaterange .input-wrapper .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:"TT Norms Pro", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fielddaterange .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddaterange .input-wrapper .input-container .toggle-calendar-icon{position:absolute;right:0;top:50%;transform:translateY(-50%)}nv-fielddaterange .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-fielddaterange .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fielddaterange .range-inputs{display:flex;align-items:center;gap:8px;flex:1}nv-fielddaterange .range-inputs input{flex:1;border:none;outline:none;padding:0;font-size:var(--form-field-font-size);color:var(--components-form-field-content-text);background:transparent;min-width:0;text-align:center}nv-fielddaterange .range-inputs input::placeholder{color:var(--components-form-field-content-placeholder)}nv-fielddaterange .range-inputs input:disabled{cursor:not-allowed;color:var(--components-form-field-content-text);background-color:var(--components-form-field-background-disabled)}';const s=d;const l=class{constructor(r){e(this,r);this.dateRangeChange=t(this,"dateRangeChange",7);this.popoverId=a();this.startInputId=a();this.endInputId=a();this.disabled=false;this.readonly=false;this.required=false;this.error=false;this.success=false;this.shouldAutoFocus=false;this.value="";this.startValue="";this.endValue="";this.open=false;this.firstDayOfWeek=1;this.numberOfCalendars=2;this.min="";this.max="";this.locale="en-BE";this.dateFormat="YYYY-MM-DD";this.shortcutsPlacement="bottom";this.showActions=false;this.shortcuts="[]";this.showWeekNumbers=true;this.disabledDates="[]";this.handleClickOutside=e=>{if(this.open&&this.el&&!this.el.contains(e.target)){this.open=false}};this.handleStartInput=e=>{if(this.readonly||this.disabled){e.preventDefault();return}const t=e.target;this.startValue=t.value;this.dateRangeChange.emit({start:t.value,end:this.endValue})};this.handleEndInput=e=>{if(this.readonly||this.disabled){e.preventDefault();return}const t=e.target;this.endValue=t.value;this.dateRangeChange.emit({start:this.startValue,end:t.value})};this.handleFocus=e=>{if(this.readonly||this.disabled){e.preventDefault();e.target.blur();return}this.open=true};this.toggleCalendar=()=>{if(this.readonly||this.disabled){return}this.open=!this.open}}convertToInputmaskFormat(e){if(!e){return"dd/mm/yyyy"}const t={"YYYY-MM-DD":"yyyy-mm-dd","DD/MM/YYYY":"dd/mm/yyyy","MM/DD/YYYY":"mm/dd/yyyy","DD.MM.YYYY":"dd.mm.yyyy",YYYYMMDD:"yyyymmdd"};return t[e]||"dd/mm/yyyy"}connectedCallback(){document.addEventListener("click",this.handleClickOutside)}componentWillLoad(){if(this.value){try{const e=JSON.parse(this.value);this.startValue=e.start||"";this.endValue=e.end||""}catch(e){console.error("Invalid JSON for value:");console.error(e)}}}componentDidLoad(){const e=this.el.querySelectorAll(".input-wrapper input");e.forEach((e=>{const t=new o({alias:"datetime",inputFormat:this.convertToInputmaskFormat(this.dateFormat),placeholder:"_",clearIncomplete:false,showMaskOnHover:false,showMaskOnFocus:false,clearMaskOnLostFocus:false,insertMode:true,rightAlign:false,oncomplete:function(e){const t=e.target;const r=new CustomEvent("input",{bubbles:true});t.dispatchEvent(r)}});t.mask(e);if(e.name===this.startName&&this.startValue){requestAnimationFrame((()=>{e.value=this.startValue;const t=new CustomEvent("input",{bubbles:true});e.dispatchEvent(t)}))}else if(e.name===this.endName&&this.endValue){requestAnimationFrame((()=>{e.value=this.endValue;const t=new CustomEvent("input",{bubbles:true});e.dispatchEvent(t)}))}}))}componentDidRender(){const e=this.el.querySelectorAll(".input-wrapper input");e.forEach((e=>{const t=e.name===this.startName?this.startValue:this.endName?this.endValue:"";if(t){requestAnimationFrame((()=>{e.value=t;e.setAttribute("value",t)}))}}))}disconnectedCallback(){document.removeEventListener("click",this.handleClickOutside)}handleRangeDateChange(e){const{start:t,end:r}=e.detail||{};if(t&&r){this.startValue=t;this.endValue=r;this.dateRangeChange.emit({start:this.startValue,end:this.endValue});if(!this.showActions){this.open=false}}}handleClosePopover(){this.open=false}handleApplyDateRange(){this.open=false}handleKeyDown(e){if(!this.open){if(e.key==="ArrowDown"){this.open=true;e.preventDefault();return}return}if(!this.popoverElement){console.warn("nv-fielddaterange -> Popover element is not defined");return}}handleValueChange(e){try{const t=JSON.parse(e);this.startValue=t.start||"";this.endValue=t.end||""}catch(e){console.error("Invalid JSON for value:",e)}}render(){return r(n,{key:"47a61852ed7771a2248727193570aa2c4654b3bc"},(this.label&&this.label.length>0||this.el.querySelector('[slot="label"]'))&&r("label",{key:"a32f8796a15c40712bc0b751ab89fcf84c81dfa3",htmlFor:this.startInputId},r("slot",{key:"549420faa870d7e8f37c4c864de00aae1682f1f9",name:"label"},this.label)),r("nv-popover",{key:"c93290824f1e7179f7777ef2d9d42146015ec10a",ref:e=>this.popoverElement=e,id:this.popoverId,triggerMode:"controlled",placement:"bottom-start",open:this.open},r("div",{key:"67d798f2c57bf7cd979386fa2c3d0eb836253af6",slot:"trigger",class:"input-wrapper"},r("slot",{key:"53f700e97f16b40cb3e077460d41ab955cf4e86e",name:"before-input"}),r("div",{key:"5829a9716c09fc65b8300b0fe5d590a3e4d1af40",class:"input-container"},r("slot",{key:"401508780bbac13d792d62d8368c47b4fe9fb0c1",name:"leading-input"}),r("div",{key:"2e29bd53c161d7bdf5a20e17f7b114f421bf2684",class:"range-inputs"},r("input",{key:"d1fed6969b96a950e6c73779ac31e7f197cdf122",id:this.startInputId,type:"text",placeholder:this.startPlaceholder,name:this.startName,disabled:this.disabled,readOnly:this.readonly,required:this.required,autofocus:this.shouldAutoFocus,value:this.startValue,onInput:this.handleStartInput,onFocus:this.handleFocus}),r("svg",{key:"04aefcadb20a07f023c973a8ee0ce1c90e2eecd4",xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",class:"icon icon-tabler icons-tabler-outline icon-tabler-arrows-move-horizontal"},r("path",{key:"372bb4b2ea27cf6aba7d9753dc25b3c9217a05c0",stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),r("path",{key:"ae5d178f8d00efc52317b8e44df3225c48f50571",d:"M18 9l3 3l-3 3"}),r("path",{key:"2669cb7bca3c10769fa8b7907d722e6892744dce",d:"M15 12h6"}),r("path",{key:"835d2de77d676af9806d93f9ec0e9a4a451b2463",d:"M6 9l-3 3l3 3"}),r("path",{key:"8aef1d99e102825729c4466bf57166529e927c09",d:"M3 12h6"})),r("input",{key:"e40d1202015132524aa3d485641b9cd34d8a20a6",id:this.endInputId,type:"text",placeholder:this.endPlaceholder,name:this.endName,disabled:this.disabled,readOnly:this.readonly,required:this.required,value:this.endValue,onInput:this.handleEndInput,onFocus:this.handleFocus})),r("nv-iconbutton",{key:"8ec3ebfb4647e5fb9d89ea9f1e6a60eaa5bb1214",class:"toggle-calendar-icon",name:"calendar",size:"md",emphasis:"lower","aria-label":this.open?"Hide calendar":"Show calendar","aria-pressed":this.open.toString(),onClick:this.toggleCalendar,tabIndex:this.disabled?-1:0})),r("slot",{key:"e6ff4ed90757947d58dfde04c7063d123a3fd9e2",name:"after-input"})),r("div",{key:"cf7a11988d84dac287b2c524e6005aee29f05ca3",slot:"content"},r("nv-calendar",{key:"3c896e58ba52b0dd82f73f37beb8f70b6ac3f426",dateFormat:this.dateFormat,rangeValue:this.startValue&&this.endValue?JSON.stringify({start:this.startValue,end:this.endValue}):"",firstDayOfWeek:this.firstDayOfWeek,numberOfCalendars:this.numberOfCalendars,min:this.min,max:this.max,locale:this.locale,shortcutsPlacement:this.shortcutsPlacement,showActions:this.showActions,shortcuts:this.shortcuts,showWeekNumbers:this.showWeekNumbers,disabledDates:this.disabledDates,selectionType:"range"}))),(this.description&&this.description.length>0||this.el.querySelector('[slot="description"]'))&&r("div",{key:"f3a968ed2314ec6b0b8f1f5fed8e901e3df10402",class:"description"},r("slot",{key:"bdfb89b5f462046c1bcbcffdbe46b067868bb077",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&r("div",{key:"b7a01679e7d1315e3040c8b166f79affbe74d409",hidden:!this.error,class:"error-description"},this.el.querySelector('[slot="error-description"]')?r("slot",{name:"error-description"}):this.errorDescription),r("slot",{key:"b318420f0dba209ec8dcebc06f37d94ade46ccea"}))}get el(){return i(this)}static get watchers(){return{value:["handleValueChange"]}}};l.style=s;export{l as nv_fielddaterange};
+//# sourceMappingURL=p-2281d5ef.entry.js.map

package/dist/native/p-2281d5ef.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["nvFielddaterangeCss","NvFielddaterangeStyle0","NvFielddaterange","constructor","hostRef","this","popoverId","uuidv4","startInputId","endInputId","disabled","readonly","required","error","success","shouldAutoFocus","value","startValue","endValue","open","firstDayOfWeek","numberOfCalendars","min","max","locale","dateFormat","shortcutsPlacement","showActions","shortcuts","showWeekNumbers","disabledDates","handleClickOutside","event","el","contains","target","handleStartInput","preventDefault","input","dateRangeChange","emit","start","end","handleEndInput","handleFocus","blur","toggleCalendar","convertToInputmaskFormat","format","formatMap","YYYYMMDD","connectedCallback","document","addEventListener","componentWillLoad","range","JSON","parse","console","componentDidLoad","inputs","querySelectorAll","forEach","inputMask","Inputmask","alias","inputFormat","placeholder","clearIncomplete","showMaskOnHover","showMaskOnFocus","clearMaskOnLostFocus","insertMode","rightAlign","oncomplete","e","CustomEvent","bubbles","dispatchEvent","mask","name","startName","requestAnimationFrame","endName","componentDidRender","setAttribute","disconnectedCallback","removeEventListener","handleRangeDateChange","detail","handleClosePopover","handleApplyDateRange","handleKeyDown","key","popoverElement","warn","handleValueChange","newValue","render","h","Host","label","length","querySelector","htmlFor","ref","id","triggerMode","placement","slot","class","type","startPlaceholder","readOnly","autofocus","onInput","onFocus","xmlns","width","height","viewBox","fill","stroke","d","endPlaceholder","size","emphasis","toString","onClick","tabIndex","rangeValue","stringify","selectionType","description","errorDescription","hidden"],"sources":["src/components/nv-fielddaterange/styles/nv-fielddaterange.scss?tag=nv-fielddaterange","src/components/nv-fielddaterange/nv-fielddaterange.tsx"],"sourcesContent":["@import '../../../styles/form-field';\n\nnv-fielddaterange {\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  nv-popover {\n    width: 100%;\n    display: block;\n\n    [data-scope='popover'] {\n      padding: 0;\n      background-color: var(--components-list-dropdown-background);\n      border: 1px solid var(--components-list-dropdown-border);\n      width: auto;\n    }\n\n    [slot='content'] {\n      display: block;\n      width: 100%;\n    }\n  }\n\n  .input-wrapper {\n    @include form-field-input-wrapper();\n    display: flex;\n    align-items: center;\n    gap: 8px;\n\n    .input-container {\n      @include form-field-input-container();\n      position: relative;\n      flex: 1;\n      min-width: 0;\n      padding-right: 32px;\n\n      input {\n        @include form-field-input();\n        width: 100%;\n      }\n\n      nv-icon.validation {\n        @include form-field-icon();\n      }\n\n      .toggle-calendar-icon {\n        position: absolute;\n        right: 0;\n        top: 50%;\n        transform: translateY(-50%);\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  .range-inputs {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    flex: 1;\n\n    input {\n      flex: 1;\n      border: none;\n      outline: none;\n      padding: 0;\n      font-size: var(--form-field-font-size);\n      color: var(--components-form-field-content-text);\n      background: transparent;\n      min-width: 0; // to avoid overflow\n      text-align: center;\n\n      &::placeholder {\n        color: var(--components-form-field-content-placeholder);\n      }\n\n      &:disabled {\n        cursor: not-allowed;\n        color: var(--components-form-field-content-text);\n        background-color: var(--components-form-field-background-disabled);\n      }\n    }\n  }\n}\n","import {\n  Component,\n  h,\n  Prop,\n  State,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  Host,\n  Watch,\n} from '@stencil/core';\nimport Inputmask from 'inputmask';\nimport { v4 as uuidv4 } from 'uuid';\nimport { DateRange } from '../../interfaces/dateRange';\n\n/**\n * @slot default - Child content of the component.\n * @slot leading-input - Content to be placed before the input text, within the input container.\n * @slot before-input - Content to be placed before the input text, outside the input container.\n * @slot after-input - Content to be placed after the input text, outside the input container.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n  tag: 'nv-fielddaterange',\n  styleUrl: 'styles/nv-fielddaterange.scss',\n  shadow: false,\n})\nexport class NvFielddaterange {\n  @Element() el!: HTMLNvFielddaterangeElement;\n  private popoverElement!: HTMLNvPopoverElement;\n  private popoverId: string = uuidv4();\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the start input element and the for attribute of the associated\n   * label. If no ID is provided, a random one will be automatically generated.\n   */\n  @Prop({ reflect: true })\n  readonly startInputId: string = uuidv4();\n\n  /**\n   * Sets the ID for the end input element and the for attribute of the associated\n   * label. If no ID is provided, a random one will be automatically generated.\n   */\n  @Prop({ reflect: true })\n  readonly endInputId: string = uuidv4();\n\n  /**\n   * Text displayed as label. A slot label can override this prop.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\n\n  /**\n   * Description displayed below the input. A slot description can override this prop.\n   */\n  @Prop({ reflect: true })\n  readonly description: string;\n\n  /**\n   * Placeholder for the start input field.\n   */\n  @Prop({ reflect: true })\n  readonly startPlaceholder: string;\n\n  /**\n   * Placeholder for the end input field.\n   */\n  @Prop({ reflect: true })\n  readonly endPlaceholder: string;\n\n  /**\n   * Name attribute for the start input.\n   */\n  @Prop({ reflect: true })\n  readonly startName: string;\n\n  /**\n   * Name attribute for the end input.\n   */\n  @Prop({ reflect: true })\n  readonly endName: string;\n\n  /**\n   * Disables both input fields.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Sets both input fields as read-only.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks both input fields as required.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Indicates an error state.\n   */\n  @Prop({ reflect: true })\n  readonly error: boolean = false;\n\n  /**\n   * Error description. A slot error-description can override this prop.\n   */\n  @Prop({ reflect: true })\n  readonly errorDescription?: string;\n\n  /**\n   * Indicates a success state.\n   */\n  @Prop({ reflect: true })\n  readonly success: boolean = false;\n\n  /**\n   * Autofocus the start input when the component is mounted.\n   */\n  @Prop({ reflect: true })\n  readonly shouldAutoFocus: boolean = false;\n\n  /**\n   * The initial value of the date range (in string format).\n   */\n  @Prop({ reflect: true })\n  readonly value: string = '';\n\n  /**\n   * The current value of the start date in string format.\n   */\n  @State()\n  startValue: string = '';\n\n  /**\n   * The current value of the end date in string format.\n   */\n  @State()\n  endValue: string = '';\n\n  /**\n   * Controls the opening of the popover.\n   */\n  @State()\n  open: boolean = false;\n\n  /**\n   * First day of the week 0 = Sunday, 1 = Monday, etc.\n   * @default 1\n   */\n  @Prop({ reflect: true })\n  readonly firstDayOfWeek: number = 1;\n\n  /**\n   * Number of calendars to display\n   * @default 2\n   */\n  @Prop({ reflect: true })\n  readonly numberOfCalendars: number = 2;\n\n  /**\n   * Minimum date for selection ISO string format, ex: 2025-01-01\n   */\n  @Prop({ reflect: true })\n  readonly min?: string = '';\n\n  /**\n   * Maximum date for selection ISO string format, ex: 2025-12-31\n   */\n  @Prop({ reflect: true })\n  readonly max?: string = '';\n\n  /** Locale for date formatting\n   * @default 'en-BE'\n   */\n  @Prop({ reflect: true })\n  readonly locale: string = 'en-BE';\n\n  /** Date format ex: YYYY-MM-DD, DD-MM-YYYY, etc.\n   * @default 'YYYY-MM-DD'\n   */\n  @Prop({ reflect: true })\n  readonly dateFormat: string = 'YYYY-MM-DD';\n\n  /**\n   * Footer placement\n   * @default 'bottom'\n   */\n  @Prop({ reflect: true })\n  readonly shortcutsPlacement: 'bottom' | 'left' | 'right' = 'bottom';\n\n  /**\n   * Show action buttons\n   * @default false\n   */\n  @Prop({ reflect: true })\n  readonly showActions: boolean = false;\n\n  /**\n   * Custom actions to display in the footer\n   * JSON array of objects with the following properties:\n   * - label: string\n   * - onClick: function\n   * @default '[]'\n   */\n  @Prop({ reflect: true })\n  readonly shortcuts: string = '[]';\n\n  /**\n   * Show week numbers\n   * @default true\n   */\n  // eslint-disable-next-line @stencil-community/ban-default-true\n  @Prop({ reflect: true })\n  readonly showWeekNumbers: boolean = true;\n\n  /**\n   * Disabled dates ISO string array\n   * @default '[]'\n   */\n  @Prop({ reflect: true })\n  readonly disabledDates: string = '[]';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Converts the nv-calendar date format to the format expected by Inputmask.\n   * @param {string} format - The date format to convert\n   * @returns {string} The converted format for Inputmask\n   */\n  private convertToInputmaskFormat(format: string): string {\n    // Si le format n'est pas spécifié, utiliser le format par défaut YYYY-MM-DD\n    if (!format) {\n      return 'dd/mm/yyyy';\n    }\n\n    // Conversion des formats\n    const formatMap = {\n      'YYYY-MM-DD': 'yyyy-mm-dd',\n      'DD/MM/YYYY': 'dd/mm/yyyy',\n      'MM/DD/YYYY': 'mm/dd/yyyy',\n      'DD.MM.YYYY': 'dd.mm.yyyy',\n      'YYYYMMDD': 'yyyymmdd',\n    };\n\n    return formatMap[format] || 'dd/mm/yyyy';\n  }\n\n  /**\n   * Closes the popover when a click is detected outside the component.\n   * @param {MouseEvent} event - The mouse event\n   */\n  private handleClickOutside = (event: MouseEvent) => {\n    if (this.open && this.el && !this.el.contains(event.target as Node)) {\n      this.open = false;\n    }\n  };\n\n  /**\n   * Handles the input event on the start input element.\n   * @param {Event} event - The input event\n   */\n  private handleStartInput = (event: Event) => {\n    if (this.readonly || this.disabled) {\n      event.preventDefault();\n      return;\n    }\n    const input = event.target as HTMLInputElement;\n    this.startValue = input.value;\n    this.dateRangeChange.emit({ start: input.value, end: this.endValue });\n  };\n\n  /**\n   * Handles the input event on the end input element.\n   * @param {Event} event - The input event\n   */\n  private handleEndInput = (event: Event) => {\n    if (this.readonly || this.disabled) {\n      event.preventDefault();\n      return;\n    }\n    const input = event.target as HTMLInputElement;\n    this.endValue = input.value;\n    this.dateRangeChange.emit({ start: this.startValue, end: input.value });\n  };\n\n  /**\n   * Handles focus events on the input elements.\n   * @param {FocusEvent} event - The focus event\n   */\n  private handleFocus = (event: FocusEvent) => {\n    if (this.readonly || this.disabled) {\n      event.preventDefault();\n      (event.target as HTMLElement).blur();\n      return;\n    }\n\n    // Open the popover when an input is focused\n    this.open = true;\n  };\n\n  /**\n   * Toggles the opening/closing of the popover.\n   */\n  private toggleCalendar = () => {\n    if (this.readonly || this.disabled) {\n      return;\n    }\n    this.open = !this.open;\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  connectedCallback() {\n    document.addEventListener('click', this.handleClickOutside);\n  }\n\n  componentWillLoad() {\n    if (this.value) {\n      try {\n        const range = JSON.parse(this.value) as DateRange;\n        this.startValue = range.start || '';\n        this.endValue = range.end || '';\n      } catch (error) {\n        console.error('Invalid JSON for value:');\n        console.error(error);\n      }\n    }\n  }\n\n  componentDidLoad() {\n    const inputs = this.el.querySelectorAll('.input-wrapper input');\n    inputs.forEach((input: HTMLInputElement) => {\n      const inputMask = new Inputmask({\n        alias: 'datetime',\n        inputFormat: this.convertToInputmaskFormat(this.dateFormat),\n        placeholder: '_',\n        clearIncomplete: false,\n        showMaskOnHover: false,\n        showMaskOnFocus: false,\n        clearMaskOnLostFocus: false,\n        insertMode: true,\n        rightAlign: false,\n        oncomplete: function (e) {\n          const input = e.target as HTMLInputElement;\n          const event = new CustomEvent('input', { bubbles: true });\n          input.dispatchEvent(event);\n        },\n      });\n      inputMask.mask(input);\n\n      // Set the value after applying the mask\n      if (input.name === this.startName && this.startValue) {\n        requestAnimationFrame(() => {\n          input.value = this.startValue;\n          const event = new CustomEvent('input', { bubbles: true });\n          input.dispatchEvent(event);\n        });\n      } else if (input.name === this.endName && this.endValue) {\n        requestAnimationFrame(() => {\n          input.value = this.endValue;\n          const event = new CustomEvent('input', { bubbles: true });\n          input.dispatchEvent(event);\n        });\n      }\n    });\n  }\n\n  componentDidRender() {\n    const inputs = this.el.querySelectorAll('.input-wrapper input');\n    inputs.forEach((input: HTMLInputElement) => {\n      const value =\n        input.name === this.startName\n          ? this.startValue\n          : this.endName\n          ? this.endValue\n          : '';\n      if (value) {\n        // Make sure the value is defined both as a property and attribute\n        requestAnimationFrame(() => {\n          input.value = value;\n          input.setAttribute('value', value);\n        });\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('click', this.handleClickOutside);\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emits an event when the date range changes.\n   */\n  @Event()\n  dateRangeChange: EventEmitter<DateRange>;\n\n  /**\n   * Handles the range date selection event from nv-calendar.\n   * @param {CustomEvent<DateRange>} event - The custom event\n   */\n  @Listen('rangeDateChange')\n  handleRangeDateChange(event: CustomEvent<DateRange>) {\n    const { start, end } = event.detail || {};\n\n    // Check that both dates are defined\n    if (start && end) {\n      this.startValue = start;\n      this.endValue = end;\n      this.dateRangeChange.emit({\n        start: this.startValue,\n        end: this.endValue,\n      });\n\n      if (!this.showActions) {\n        this.open = false;\n      }\n    }\n  }\n\n  @Listen('closePopover')\n  handleClosePopover() {\n    this.open = false;\n  }\n\n  @Listen('applyDateRange')\n  handleApplyDateRange() {\n    this.open = false;\n  }\n\n  /**\n   * Handles keyboard events.\n   * @param {KeyboardEvent} event - The keyboard event\n   */\n  @Listen('keydown', { passive: false })\n  handleKeyDown(event: KeyboardEvent) {\n    if (!this.open) {\n      if (event.key === 'ArrowDown') {\n        this.open = true;\n        event.preventDefault();\n        return;\n      }\n      return;\n    }\n\n    if (!this.popoverElement) {\n      console.warn('nv-fielddaterange -> Popover element is not defined');\n      return;\n    }\n  }\n\n  @Watch('value')\n  handleValueChange(newValue: string) {\n    try {\n      const range = JSON.parse(newValue) as DateRange;\n      this.startValue = range.start || '';\n      this.endValue = range.end || '';\n    } catch (error) {\n      console.error('Invalid JSON for value:', error);\n    }\n  }\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {((this.label && this.label.length > 0) ||\n          this.el.querySelector('[slot=\"label\"]')) && (\n          <label htmlFor={this.startInputId}>\n            <slot name=\"label\">{this.label}</slot>\n          </label>\n        )}\n\n        <nv-popover\n          ref={el => (this.popoverElement = el as HTMLNvPopoverElement)}\n          id={this.popoverId}\n          triggerMode=\"controlled\"\n          placement=\"bottom-start\"\n          open={this.open}\n        >\n          <div slot=\"trigger\" class=\"input-wrapper\">\n            <slot name=\"before-input\"></slot>\n\n            <div class=\"input-container\">\n              <slot name=\"leading-input\"></slot>\n\n              <div class=\"range-inputs\">\n                <input\n                  id={this.startInputId}\n                  type=\"text\"\n                  placeholder={this.startPlaceholder}\n                  name={this.startName}\n                  disabled={this.disabled}\n                  readOnly={this.readonly}\n                  required={this.required}\n                  autofocus={this.shouldAutoFocus}\n                  value={this.startValue}\n                  onInput={this.handleStartInput}\n                  onFocus={this.handleFocus}\n                />\n\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  width=\"24\"\n                  height=\"24\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  class=\"icon icon-tabler icons-tabler-outline icon-tabler-arrows-move-horizontal\"\n                >\n                  <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n                  <path d=\"M18 9l3 3l-3 3\" />\n                  <path d=\"M15 12h6\" />\n                  <path d=\"M6 9l-3 3l3 3\" />\n                  <path d=\"M3 12h6\" />\n                </svg>\n\n                <input\n                  id={this.endInputId}\n                  type=\"text\"\n                  placeholder={this.endPlaceholder}\n                  name={this.endName}\n                  disabled={this.disabled}\n                  readOnly={this.readonly}\n                  required={this.required}\n                  value={this.endValue}\n                  onInput={this.handleEndInput}\n                  onFocus={this.handleFocus}\n                />\n              </div>\n\n              <nv-iconbutton\n                class=\"toggle-calendar-icon\"\n                name=\"calendar\"\n                size=\"md\"\n                emphasis=\"lower\"\n                aria-label={this.open ? 'Hide calendar' : 'Show calendar'}\n                aria-pressed={this.open.toString()}\n                onClick={this.toggleCalendar}\n                tabIndex={this.disabled ? -1 : 0}\n              />\n            </div>\n\n            <slot name=\"after-input\"></slot>\n          </div>\n\n          <div slot=\"content\">\n            <nv-calendar\n              dateFormat={this.dateFormat}\n              rangeValue={\n                this.startValue && this.endValue\n                  ? JSON.stringify({\n                      start: this.startValue,\n                      end: this.endValue,\n                    })\n                  : ''\n              }\n              firstDayOfWeek={this.firstDayOfWeek}\n              numberOfCalendars={this.numberOfCalendars}\n              min={this.min}\n              max={this.max}\n              locale={this.locale}\n              shortcutsPlacement={this.shortcutsPlacement}\n              showActions={this.showActions}\n              shortcuts={this.shortcuts}\n              showWeekNumbers={this.showWeekNumbers}\n              disabledDates={this.disabledDates}\n              selectionType=\"range\"\n            ></nv-calendar>\n          </div>\n        </nv-popover>\n\n        {((this.description && this.description.length > 0) ||\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            {this.el.querySelector('[slot=\"error-description\"]') ? (\n              <slot name=\"error-description\"></slot>\n            ) : (\n              this.errorDescription\n            )}\n          </div>\n        )}\n\n        <slot></slot>\n      </Host>\n    );\n  }\n  //#endregion RENDER\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/native/p-22a45102.entry.js

@@ -0,0 +1,2 @@
+import{r as o,c as e,h as a,a as n,g as i}from"./p-ab002252.js";import{c as s}from"./p-8a1a6e56.js";import{u as c,t}from"./p-42301d8f.js";import{u as r}from"./p-1daca48a.js";const d="nv-badge{padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);height:fit-content;width:fit-content}nv-badge.with-gap{padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);height:fit-content;width:fit-content;gap:var(--badge-gap-x)}nv-badge:not(.with-gap){padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);height:fit-content;width:fit-content}nv-badge.badge-1{color:var(--color-rainbow-1-text);background-color:var(--color-rainbow-1-background)}nv-badge.badge-1 .close:focus,nv-badge.badge-1 .close:focus-within{outline:none}nv-badge.badge-1 .close:focus-visible,nv-badge.badge-1 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) 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:calc(var(--focus-outline-stroke) * 1) 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:calc(var(--focus-outline-stroke) * 1) 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:calc(var(--focus-outline-stroke) * 1) 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:calc(var(--focus-outline-stroke) * 1) 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:calc(var(--focus-outline-stroke) * 1) 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:calc(var(--focus-outline-stroke) * 1) 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:calc(var(--focus-outline-stroke) * 1) 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:calc(var(--focus-outline-stroke) * 1) 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:calc(var(--focus-outline-stroke) * 1) 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}=c(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}=c(this.ref);const{setFadeOut:e}=r(this.ref);o();e()}}render(){return a(n,{key:"63f256c6711546ca5304d46c2624e52f35dc2b46",class:s(`badge-${this.color}`,{"has-close":this.dismissible,"with-gap":this.dismissible||this.label,"visually-hidden":this._isHidden})},a("slot",{key:"181e608d22c697517ef55dbc4432ac06cdf6892e",name:"leading-icon"},this.leadIcon&&a("nv-icon",{key:"914d75ef9d54e2c8c94c9c99a4efeb59aa654f1c",slot:"leading-icon",name:this.leadIcon,size:"sm"})),this.label&&a("span",{key:"d32ff92840bba1cc983b24a4fee95af065ffef0e"},this.label),this.dismissible&&a("button",{key:"1dbd1e432774e26936f93f7207e1f6eb93fa0819",onClick:this.handleClose,class:"close",type:"button"},a("nv-icon",{key:"8372fb5ba1dafd5758807485a5be3880a009567d",name:"x",size:"sm"})))}get ref(){return i(this)}static get watchers(){return{dismissal:["handleDismissalChange"],icon:["handleIconChange"],hidden:["handleHiddenChange"]}}};b.style=l;const g="nv-fielddropdownitemcheck{cursor:pointer;display:flex;padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);border-radius:var(--list-dropdown-item-radius)}nv-fielddropdownitemcheck slot-fb,nv-fielddropdownitemcheck span{all:unset}nv-fielddropdownitemcheck:hover{background-color:var(--components-list-dropdown-item-background-hover)}";const v=g;const u=class{constructor(a){o(this,a);this.itemChecked=e(this,"itemChecked",7);this.checked=false;this.disabled=false;this.onFieldcheckboxChanged=o=>{if(this.disabled)return;this.checked=o.detail;this.itemChecked.emit({value:this.value,checked:this.checked,group:this.group})};this.handleClick=()=>{if(this.disabled)return;if(this.el.querySelector("input").checked){this.checked=false}else{this.checked=true}}}render(){return a(n,{key:"f9445369d2703e0a5fe4417b1968f9a25dc94743",onClick:this.handleClick},a("nv-fieldcheckbox",{key:"a64195d14834b2a83d3b4c3f1451272fb97ff46a",checked:this.checked,name:this.label||this.value,label:this.label||this.value,"label-placement":"after",description:this.description,disabled:this.disabled,tabindex:"-1",role:"option",onCheckedChanged:this.onFieldcheckboxChanged}))}get el(){return i(this)}};u.style=v;export{b as nv_badge,u as nv_fielddropdownitemcheck};
+//# sourceMappingURL=p-22a45102.entry.js.map

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

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

@@ -0,0 +1,2 @@
+import{r as e,c as o,h as c,a as i,g as n}from"./p-ab002252.js";import{c as t}from"./p-8a1a6e56.js";import{v as r}from"./p-f5ff676c.js";const d='nv-fieldcheckbox{--nv-fieldcheckbox-border-default:var(\n    --components-form-field-border-default\n  );--nv-fieldcheckbox-border-hover:var(--components-form-field-border-hover);--nv-fieldcheckbox-border-focus:var(--components-form-field-border-default);--nv-fieldcheckbox-background-default:var(\n    --components-form-field-background-default\n  );--nv-fieldcheckbox-background-checked:var(\n    --components-form-field-background-checked\n  );--nv-fieldcheckbox-background-disabled:var(\n    --components-form-field-background-disabled\n  );--nv-fieldcheckbox-focus-box-shadow:var(--color-focus-brand);--nv-fieldcheckbox-color-checked:var(\n    --components-form-shape-foreground-default\n  );--nv-fieldcheckbox-color-disabled:var(\n    --components-form-shape-foreground-disabled\n  );--nv-fieldcheckbox-outline-color:var(--color-focus-brand);display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-fieldcheckbox:not([disabled],[readonly]) input,nv-fieldcheckbox:not([disabled],[readonly]) label{cursor:pointer}nv-fieldcheckbox.error>.input-container{--nv-fieldcheckbox-border-default:var(--components-form-field-border-error);--nv-fieldcheckbox-border-hover:var(--nv-fieldcheckbox-border-default);--nv-fieldcheckbox-border-focus:var(--components-form-field-border-error);--nv-fieldcheckbox-focus-box-shadow:var(--color-focus-destructive);--nv-fieldcheckbox-color-disabled:var(\n    --components-form-shape-foreground-disabled-error\n  );--nv-fieldcheckbox-background-checked:var(\n    --components-form-field-background-error\n  );--nv-fieldcheckbox-outline-color:var(--color-focus-destructive)}nv-fieldcheckbox.label-placement-before{flex-direction:row-reverse}nv-fieldcheckbox[disabled]:not([disabled=false]){opacity:0.5}nv-fieldcheckbox>.input-container{position:relative;color:var(--nv-fieldcheckbox-color-checked)}nv-fieldcheckbox>.input-container input[type=checkbox][readonly]{opacity:0.5}nv-fieldcheckbox>.input-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--nv-fieldcheckbox-color-disabled)}nv-fieldcheckbox>.input-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-checkbox-size);height:var(--form-checkbox-size);flex-direction:column;align-items:flex-start;border-radius:var(--form-checkbox-radius);border-width:var(--form-checkbox-border-width);border-style:solid;border-color:var(--nv-fieldcheckbox-border-default);background:var(--nv-fieldcheckbox-background-default)}nv-fieldcheckbox>.input-container input[type=checkbox]:hover{border-color:var(--nv-fieldcheckbox-border-hover)}nv-fieldcheckbox>.input-container input[type=checkbox]:focus{border-color:var(--nv-fieldcheckbox-border-focus)}nv-fieldcheckbox>.input-container input[type=checkbox]:focus,nv-fieldcheckbox>.input-container input[type=checkbox]:focus-within{outline:none}nv-fieldcheckbox>.input-container input[type=checkbox]:focus-visible,nv-fieldcheckbox>.input-container input[type=checkbox]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--nv-fieldcheckbox-outline-color);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-fieldcheckbox>.input-container input[type=checkbox]:checked,nv-fieldcheckbox>.input-container input[type=checkbox]:indeterminate{background:var(--nv-fieldcheckbox-background-checked);border-color:var(--nv-fieldcheckbox-background-checked)}nv-fieldcheckbox>.input-container input[type=checkbox]:disabled:not([readonly]){background:var(--nv-fieldcheckbox-background-disabled);border-color:var(--nv-fieldcheckbox-border-default)}nv-fieldcheckbox>.input-container input[type=checkbox][readonly]{opacity:0.5}nv-fieldcheckbox>.input-container .icon{pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center}nv-fieldcheckbox>.input-container .icon svg{width:var(--form-checkbox-icon-size);height:var(--form-checkbox-icon-size);fill:none;stroke:currentcolor;stroke-width:var(--form-checkbox-icon-stroke);flex-shrink:0}nv-fieldcheckbox>.text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}nv-fieldcheckbox>.text-container label{align-self:stretch;color:var(--components-form-text-label-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--form-label-font-weight);line-height:var(--form-label-line-height)}nv-fieldcheckbox>.text-container .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:var(--form-description-font-weight);line-height:var(--form-description-line-height)}nv-fieldcheckbox>.text-container .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:var(--form-description-font-weight);line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}';const a=d;const s=class{constructor(c){e(this,c);this.checkedChanged=o(this,"checkedChanged",7);this.labelBefore=false;this.inputId=r();this.hideLabel=false;this.error=false;this.checked=false;this.indeterminate=false;this.disabled=false;this.readonly=false;this.required=false;this.autofocus=false}handleChange(e){const o=e.target;if(o.type==="checkbox"&&o.id===this.inputId){if(this.readonly||this.disabled){e.preventDefault();return}if(this.indeterminate){this.indeterminate=false}this.checked=o.checked}}onCheckedChanged(e){this.checkedChanged.emit(e)}componentWillRender(){if(this.message){this.description=this.message}if(this.labelBefore){this.labelPlacement="before"}if(this.validation){this.errorDescription=this.validation;this.error=true}}render(){return c(i,{key:"b116295489cba9239b5d6392c6518b0c57af5191",class:t(this.labelPlacement==="before"&&"label-placement-before",this.error&&"error")},c("div",{key:"b769f372a3f69899ec1cc76a4d4b2dbc7766252f",class:"input-container"},c("input",{key:"d35876f83b8a57bfd19243de1e0db8202270e3c5",type:"checkbox",id:this.inputId,name:this.name,autofocus:this.autofocus,autocomplete:"off",value:this.value,checked:Boolean(this.checked),disabled:this.disabled||this.readonly,readonly:this.readonly&&!this.required,required:this.required,indeterminate:this.indeterminate,ref:e=>{if(e){e.indeterminate=this.indeterminate}}}),c("span",{key:"1ee167d0b2ce274d04d1e4b2be6413073b22c8c6",class:"icon"},this.checked&&!this.indeterminate&&c("slot",{key:"c30cb3412f622ef77eb063818f5a3747f9d17978",name:"checked-icon"},c("svg",{key:"ae0629aac32ecd36393c2de7e492ede9d040ae78",xmlns:"http://www.w3.org/2000/svg",width:"14",height:"14",viewBox:"0 0 14 14",fill:"none"},c("path",{key:"882eef5ea011863ebe1c48a0b2b08e409f248b99",d:"M11.6667 3.5L5.25004 9.91667L2.33337 7","stroke-linecap":"round","stroke-linejoin":"round"}))),this.indeterminate&&c("slot",{key:"5776848166e3f332eb010739fa6406fb23820f6b",name:"indeterminate-icon"},c("svg",{key:"8668230cf4c31efb7c314bb32e22b3e7062184c1",class:"indeterminate-svg",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 14 14",fill:"none"},c("path",{key:"7b2cd078b8eabcd3c45c7dfd71754ed1f5c3a77d",d:"M2.9165 7H11.0832","stroke-linecap":"round","stroke-linejoin":"round"}))))),c("div",{key:"ace39a1b99e5eb521b6612bd9d52d788d77815e3",class:"text-container"},(this.label||this.el.querySelector('[slot="label"]'))&&c("label",{key:"2361d3fef97b97b07c96243d56b6f3d86703347e",htmlFor:this.inputId,class:t(this.hideLabel&&"visually-hidden")},c("slot",{key:"8f49928ebf77fd0ee1eda81640a57d5d4788440b",name:"label"},this.label)),(this.description||this.el.querySelector('[slot="description"]'))&&c("div",{key:"f0555ef436450adcad6cce6037f69d40403e99d1",class:"description"},c("slot",{key:"bb18fbebf918d035f3eb42ac4d58c631d4146261",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&c("div",{key:"804306abacc16d0fdf79fc7826d19a3934ee1e3f",hidden:!this.error,class:"error-description"},c("slot",{key:"8288bc5c84368072278d5ad61d0b0b09f455749d",name:"error-description"},this.errorDescription))))}static get formAssociated(){return true}get el(){return n(this)}static get watchers(){return{checked:["onCheckedChanged"]}}};s.style=a;export{s as nv_fieldcheckbox};
+//# sourceMappingURL=p-2ed540e3.entry.js.map

package/dist/native/p-2ed540e3.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["nvFieldcheckboxCss","NvFieldcheckboxStyle0","NvFieldcheckbox","constructor","hostRef","this","labelBefore","inputId","uuidv4","hideLabel","error","checked","indeterminate","disabled","readonly","required","autofocus","handleChange","event","target","type","id","preventDefault","onCheckedChanged","checkedChanged","emit","componentWillRender","message","description","labelPlacement","validation","errorDescription","render","h","Host","key","class","clsx","name","autocomplete","value","Boolean","ref","el","xmlns","width","height","viewBox","fill","d","label","querySelector","htmlFor","hidden"],"sources":["src/components/nv-fieldcheckbox/nv-fieldcheckbox.scss?tag=nv-fieldcheckbox","src/components/nv-fieldcheckbox/nv-fieldcheckbox.tsx"],"sourcesContent":["@import '../../styles/focus-ring';\n\n@mixin fieldcheckbox-variables() {\n  --nv-fieldcheckbox-border-default: var(\n    --components-form-field-border-default\n  );\n  --nv-fieldcheckbox-border-hover: var(--components-form-field-border-hover);\n  --nv-fieldcheckbox-border-focus: var(--components-form-field-border-default);\n  --nv-fieldcheckbox-background-default: var(\n    --components-form-field-background-default\n  );\n  --nv-fieldcheckbox-background-checked: var(\n    --components-form-field-background-checked\n  );\n  --nv-fieldcheckbox-background-disabled: var(\n    --components-form-field-background-disabled\n  );\n  --nv-fieldcheckbox-focus-box-shadow: var(--color-focus-brand);\n  --nv-fieldcheckbox-color-checked: var(\n    --components-form-shape-foreground-default\n  );\n  --nv-fieldcheckbox-color-disabled: var(\n    --components-form-shape-foreground-disabled\n  );\n  --nv-fieldcheckbox-outline-color: var(--color-focus-brand);\n}\n\n@mixin fieldcheckbox-error-variables() {\n  --nv-fieldcheckbox-border-default: var(--components-form-field-border-error);\n  --nv-fieldcheckbox-border-hover: var(--nv-fieldcheckbox-border-default);\n  --nv-fieldcheckbox-border-focus: var(--components-form-field-border-error);\n  --nv-fieldcheckbox-focus-box-shadow: var(--color-focus-destructive);\n  --nv-fieldcheckbox-color-disabled: var(\n    --components-form-shape-foreground-disabled-error\n  );\n  --nv-fieldcheckbox-background-checked: var(\n    --components-form-field-background-error\n  );\n  --nv-fieldcheckbox-outline-color: var(--color-focus-destructive);\n}\n\n@mixin root-styles() {\n  display: inline-flex;\n  align-items: flex-start;\n  gap: var(--form-gap-x);\n  position: relative;\n\n  &:not([disabled], [readonly]) {\n    input,\n    label {\n      cursor: pointer;\n    }\n  }\n}\n\n@mixin label-before-styles() {\n  flex-direction: row-reverse;\n}\n\n@mixin label-styles() {\n  align-self: stretch;\n  color: var(--components-form-text-label-default);\n  font-family: 'TT Norms Pro', sans-serif;\n  font-size: var(--form-label-font-size);\n  font-style: normal;\n  font-weight: var(--form-label-font-weight);\n  line-height: var(--form-label-line-height);\n}\n\n@mixin description-styles() {\n  align-self: stretch;\n  color: var(--components-form-text-description-default);\n  font-family: 'TT Norms Pro', sans-serif;\n  font-size: var(--form-description-font-size);\n  font-style: normal;\n  font-weight: var(--form-description-font-weight);\n  line-height: var(--form-description-line-height);\n}\n\n@mixin error-description-styles() {\n  @include description-styles();\n\n  color: var(--components-form-text-description-error);\n}\n\n@mixin text-container-styles() {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex: 1 0 0;\n}\n\n@mixin input-container-styles() {\n  position: relative;\n  color: var(--nv-fieldcheckbox-color-checked);\n\n  input[type='checkbox'][readonly] {\n    // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n    opacity: 0.5;\n  }\n\n  &:has(input[type='checkbox']:disabled:not([readonly])) {\n    color: var(--nv-fieldcheckbox-color-disabled);\n  }\n}\n\n@mixin input-styles() {\n  appearance: none;\n  position: relative;\n  display: flex;\n  width: var(--form-checkbox-size);\n  height: var(--form-checkbox-size);\n  flex-direction: column;\n  align-items: flex-start;\n  border-radius: var(--form-checkbox-radius);\n  border-width: var(--form-checkbox-border-width);\n  border-style: solid;\n  border-color: var(--nv-fieldcheckbox-border-default);\n  background: var(--nv-fieldcheckbox-background-default);\n\n  &:hover {\n    border-color: var(--nv-fieldcheckbox-border-hover);\n  }\n\n  &:focus {\n    border-color: var(--nv-fieldcheckbox-border-focus);\n  }\n\n  @include focus-ring(var(--nv-fieldcheckbox-outline-color));\n\n  &:checked,\n  &:indeterminate {\n    background: var(--nv-fieldcheckbox-background-checked);\n    border-color: var(--nv-fieldcheckbox-background-checked);\n  }\n\n  &:disabled:not([readonly]) {\n    background: var(--nv-fieldcheckbox-background-disabled);\n    border-color: var(--nv-fieldcheckbox-border-default);\n  }\n\n  &[readonly] {\n    // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n    opacity: 0.5;\n  }\n}\n\n@mixin icon-styles() {\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  svg {\n    width: var(--form-checkbox-icon-size);\n    height: var(--form-checkbox-icon-size);\n    fill: none;\n    stroke: currentcolor;\n    stroke-width: var(--form-checkbox-icon-stroke);\n    flex-shrink: 0;\n  }\n}\n\nnv-fieldcheckbox {\n  @include fieldcheckbox-variables();\n  @include root-styles();\n\n  &.error > .input-container {\n    @include fieldcheckbox-error-variables();\n  }\n\n  &.label-placement-before {\n    @include label-before-styles();\n  }\n\n  &[disabled]:not([disabled='false']) {\n    // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n    opacity: 0.5;\n  }\n\n  > .input-container {\n    @include input-container-styles();\n\n    input[type='checkbox'] {\n      @include input-styles();\n    }\n\n    .icon {\n      @include icon-styles();\n    }\n  }\n\n  > .text-container {\n    @include text-container-styles();\n\n    label {\n      @include label-styles();\n    }\n\n    .description {\n      @include description-styles();\n    }\n\n    .error-description {\n      @include error-description-styles();\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Watch,\n  Event,\n  EventEmitter,\n  Listen,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { type LabelPlacement } from '../../utils/constants';\n\n/**\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n * @slot checked-icon - Content to be placed as the checked icon, will override the checkedIcon prop.\n * @slot indeterminate-icon - Content to be placed as the indeterminate icon, will override the indeterminateIcon prop.\n */\n@Component({\n  tag: 'nv-fieldcheckbox',\n  styleUrl: 'nv-fieldcheckbox.scss',\n  formAssociated: true,\n  shadow: false,\n})\nexport class NvFieldcheckbox {\n  @Element() el!: HTMLNvFieldcheckboxElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Message define a 'hint ' message for the Field.\n   * @deprecated Use `description` instead.\n   * */\n  @Prop({ reflect: true })\n  readonly message?: string;\n\n  /**\n   * The text for the validation message.\n   * @deprecated Use `errorDescription` and set the error prop instead.\n   * */\n  @Prop({ reflect: true })\n  readonly validation?: string;\n\n  /**\n   * When true, the label will be placed before the checkbox.\n   * @deprecated Use `labelPlacement = end` instead.\n   * */\n  @Prop({ reflect: true })\n  readonly labelBefore?: boolean = false;\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the radio button’s input element and the for attribute of\n   * the associated label. If no ID is provided, a random one will be\n   * automatically generated to ensure unique identification, facilitating\n   * proper label association and accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * The name attribute for the checkbox input, used to reference the form data\n   * after submission.\n   */\n  @Prop({ reflect: true })\n  readonly name?: string;\n\n  /**\n   * The value attribute of the checkbox input, representing the value sent on\n   * form submission when the checkbox is checked. When the form is submitted,\n   * the data will consist of a name=value pair.\n   */\n  @Prop({ reflect: true })\n  readonly value?: string;\n\n  /**\n   * The label displayed next to the checkbox.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string;\n\n  /**\n   * Determines the position of the label relative to the checkbox, either\n   * 'start' (before) or 'end' (after).\n   */\n  @Prop({ reflect: true, mutable: true })\n  labelPlacement: `${LabelPlacement}`;\n\n  /**\n   * Hides the label visually while still keeping it available for screen\n   * readers.\n   */\n  @Prop({ reflect: true })\n  readonly hideLabel: boolean = false;\n\n  /**\n   * A description providing additional context or information about the\n   * checkbox.\n   */\n  @Prop({ reflect: true, mutable: true })\n  description?: string;\n\n  /**\n   * Signals that there is an error associated with the checkbox, which can\n   * trigger visual cues.\n   * @validator error\n   */\n  @Prop({ reflect: true, mutable: true })\n  error: boolean = false;\n\n  /**\n   * A description that appears when there is an error related to the checkbox.\n   * @validator message\n   */\n  @Prop({ reflect: true, mutable: true })\n  errorDescription?: string;\n\n  /**\n   * Indicates whether the checkbox is checked or not.\n   */\n  @Prop({ reflect: true, mutable: true })\n  checked: boolean = false;\n\n  /**\n   * Indicates whether the checkbox is in an indeterminate state, typically used\n   * for hierarchical checkboxes.\n   */\n  @Prop({ reflect: true, mutable: true })\n  indeterminate: boolean = false;\n\n  /**\n   * Disables the checkbox, preventing user interaction.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Sets the checkbox to read-only, preventing user changes but still allowing\n   * focus and selection of text.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks the checkbox as required, indicating that it must be checked for\n   * form submission.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Applies focus to the input field as soon as the component is mounted. This\n   * is equivalent to setting the native autofocus attribute on an <input>\n   * element.\n   */\n  @Prop({ reflect: true })\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  readonly autofocus: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emits when the checked state changes.\n   * @bind checked\n   */\n  @Event()\n  checkedChanged: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region LISTENERS\n\n  /**\n   * Listens for the change event on the checkbox input element and updates the\n   * checked state.\n   * @param {Event} event - The change event.\n   */\n  @Listen('change')\n  handleChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n\n    if (target.type === 'checkbox' && target.id === this.inputId) {\n      if (this.readonly || this.disabled) {\n        event.preventDefault();\n        return;\n      }\n\n      if (this.indeterminate) {\n        this.indeterminate = false;\n      }\n\n      this.checked = target.checked;\n    }\n  }\n\n  //#endregion LISTENERS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Watches for changes to the checked state and emits the new value.\n   * @param {boolean} checked - The new value of the checked state.\n   */\n  @Watch('checked')\n  onCheckedChanged(checked: boolean) {\n    this.checkedChanged.emit(checked);\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillRender() {\n    if (this.message) {\n      this.description = this.message;\n    }\n\n    if (this.labelBefore) {\n      this.labelPlacement = 'before';\n    }\n\n    if (this.validation) {\n      this.errorDescription = this.validation;\n      this.error = true;\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={clsx(\n          this.labelPlacement === 'before' && 'label-placement-before',\n          this.error && 'error',\n        )}\n      >\n        <div class=\"input-container\">\n          <input\n            type=\"checkbox\"\n            id={this.inputId}\n            name={this.name}\n            autofocus={this.autofocus}\n            autocomplete=\"off\"\n            value={this.value}\n            checked={Boolean(this.checked)}\n            disabled={this.disabled || this.readonly}\n            readonly={this.readonly && !this.required}\n            required={this.required}\n            indeterminate={this.indeterminate}\n            ref={el => {\n              if (el) {\n                el.indeterminate = this.indeterminate;\n              }\n            }}\n          />\n          <span class=\"icon\">\n            {this.checked && !this.indeterminate && (\n              <slot name=\"checked-icon\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  width=\"14\"\n                  height=\"14\"\n                  viewBox=\"0 0 14 14\"\n                  fill=\"none\"\n                >\n                  <path\n                    d=\"M11.6667 3.5L5.25004 9.91667L2.33337 7\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </slot>\n            )}\n            {this.indeterminate && (\n              <slot name=\"indeterminate-icon\">\n                <svg\n                  class=\"indeterminate-svg\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 14 14\"\n                  fill=\"none\"\n                >\n                  <path\n                    d=\"M2.9165 7H11.0832\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </slot>\n            )}\n          </span>\n        </div>\n\n        <div class=\"text-container\">\n          {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n            <label\n              htmlFor={this.inputId}\n              class={clsx(this.hideLabel && 'visually-hidden')}\n            >\n              <slot name=\"label\">{this.label}</slot>\n            </label>\n          )}\n\n          {(this.description ||\n            this.el.querySelector('[slot=\"description\"]')) && (\n            <div class=\"description\">\n              <slot name=\"description\">{this.description}</slot>\n            </div>\n          )}\n\n          {(this.errorDescription ||\n            this.el.querySelector('[slot=\"error-description\"]')) && (\n            <div hidden={!this.error} class=\"error-description\">\n              <slot name=\"error-description\">{this.errorDescription}</slot>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/native/p-31184fdd.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as r,a as i,g as o}from"./p-ab002252.js";import{v as s}from"./p-f5ff676c.js";const l='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[multiple]:not([multiple=false]) .select-wrapper>.select-container>.select-icons{top:var(--form-field-padding-y);right:var(--form-field-padding-x)}nv-fieldselect[multiple]:not([multiple=false]) .select-wrapper>.select-container>select{height:100%;box-sizing:border-box}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;align-items:stretch;align-self:stretch}nv-fieldselect .select-wrapper .select-container{position:relative;display:flex;flex-grow:1;justify-content:center;align-items:center;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>.select-icons{position:absolute;right:0;top:0;pointer-events:none}nv-fieldselect .select-wrapper .select-container>.select-icons>nv-iconbutton{border:0px;border-radius:0px}nv-fieldselect .select-wrapper .select-container>.select-icons>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}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);padding:var(--form-field-padding-y) var(--form-field-padding-x);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;height:var(--form-field-line-height);padding:var(--form-field-padding-y) var(--form-field-padding-x);box-sizing:content-box;-webkit-appearance:none;-moz-appearance:none;cursor:pointer}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{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=l;const a=class{constructor(r){e(this,r);this.valueChanged=t(this,"valueChanged",7);this.computedDisplayValue="";this.internalReadonly=false;this.parsedOptions=[];this.inputId=s();this.disabled=false;this.readonly=false;this.required=false;this.error=false;this.success=false;this.multiple=false;this.value="";this.displayValue=false;this.autofocus=false;this.handleSelectChange=e=>{const t=e.target;let r=Array.from(t.selectedOptions).map((e=>e.value));if(!this.multiple){r=r.slice(0,1)}this.value=this.multiple?r.join(", "):r[0]||"";this.valueChanged.emit(this.value);this.setFormValue()};this.handleSelectContainerClick=()=>{if(!this.internalReadonly&&this.selectElement){this.selectElement.focus()}}}updateDisplayValueWatcher(e){this.updateDisplayValue();if(this.selectElement){const t=e.split(",").map((e=>e.trim()));const r=this.selectElement.options;if(r){Array.from(r).forEach((e=>{e.selected=this.multiple?t.includes(e.value):e.value===t[0]}));if(!this.multiple){this.selectElement.value=e}}else{this.selectElement.value=t[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}}handleOptionsChange(e){if(typeof e==="string"){try{const t=JSON.parse(e);this.parsedOptions=[...t];const r=t.find((e=>e.selected));if(r){this.value=r.value}}catch(e){console.error("Error parsing options:",e);this.parsedOptions=[]}}}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 t=this.selectElement.options;if(t){const r=Array.from(t).find((t=>t.value===e));return r?r.textContent.trim()||"":""}else{return""}}setFormValue(){this.internals.setFormValue(this.value)}ensureSelectElement(){if(!this.selectElement){this.selectElement=this.el.querySelector("select")}}componentWillRender(){this.updateDisplayValue();if(this.message){this.description=this.message}if(this.validation){this.errorDescription=this.validation;this.error=true}}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 t=this.el.closest("form");if(t){const r=document.createElement("input");r.type="hidden";r.name=this.name;r.value=e;t.appendChild(r)}}}}if(this.multiple&&typeof this.value!=="string"){this.value=""}if(this.options){this.handleOptionsChange(this.options)}}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 t=this.selectElement.options;if(t){Array.from(t).forEach((t=>{t.selected=this.multiple?e.includes(t.value):t.value===e[0]}))}else{this.selectElement.value=e[0]||""}}this.setFormValue()}render(){return r(i,{key:"e447f10faacbd9107b3636b711745655b234daaf"},(this.label||this.el.querySelector('[slot="label"]'))&&r("label",{key:"6949ffbfa4a3d055689aa384521456277336eb31",htmlFor:this.inputId},r("slot",{key:"c46be62ffca373acaa64555dd055d0e506731ff8",name:"label"},this.label)),r("div",{key:"73173b60885c479e76c9d089f40033ac73641597",class:"select-wrapper"},r("slot",{key:"a64bbdef05fd860d1534bea9c5d8143abe2aa688",name:"before-input"}),r("div",{key:"c8d5503afd194397a0385959fbe557544208f7e9",class:"select-container",onClick:this.handleSelectContainerClick},r("slot",{key:"82456f7f21d552459af03787b26363acb9d77cb8",name:"leading-input"}),this.internalReadonly&&r("input",{key:"2b02c5f82fd43d2f12d2473ebe68704e7aac2c52",id:this.inputId+"-readonly",type:"text",value:this.computedDisplayValue,readonly:true,class:"readonly-input","aria-readonly":"true","aria-label":this.label,"aria-describedby":this.error?`${this.inputId}-error`:`${this.inputId}-description`}),r("select",{key:"597815200ff13a3a94c5f8cf2f31f292630831a1",id:this.inputId,ref:e=>this.selectElement=e,name:this.name,autofocus:this.autofocus,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.inputId}-error`:`${this.inputId}-description`},this.parsedOptions.length>0?this.parsedOptions.map((e=>r("option",{value:e.value,selected:e.selected,disabled:e.disabled},e.label))):r("slot",null)),r("div",{key:"e7315331865264cfceefc37333f29f503cfaca60",class:"select-icons"},this.error&&r("nv-icon",{key:"20b2a3b436a31b4528c0a6336433baa20f1dade7",name:"alert-circle",class:"validation",size:"md"}),this.success&&r("nv-icon",{key:"6ddb9ce572a0e66670ea3a3f084c08b465a1054f",name:"circle-check",class:"validation",size:"md"}),!this.multiple&&r("nv-iconbutton",{key:"7df5645e762451036ba84e8ae7e533f6d9c9e89e",name:"chevron-down",size:"md",emphasis:"lower",tabIndex:-1}))),r("slot",{key:"43220cb3c92d9876e2f22645ed695c076439999a",name:"after-input"})),(this.description||this.el.querySelector('[slot="description"]'))&&r("div",{key:"7ca06f0ec81f82cce825045bef226bdaeaa2774d",class:"description",id:`${this.inputId}-description`},r("slot",{key:"008a54ac423cfe534214d0f32d5b557419d60aaf",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&r("div",{key:"1c5d34d7441cdaa28c463f062c74070b8193433e",class:"error-description",id:`${this.inputId}-error`},r("slot",{key:"98a88b41c33a87541d2b3833ca95fc5dff7a8d2e",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"],options:["handleOptionsChange"]}}};a.style=n;export{a as nv_fieldselect};
+//# sourceMappingURL=p-31184fdd.entry.js.map

package/dist/native/p-31184fdd.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["nvFieldselectCss","NvFieldselectStyle0","NvFieldselect","constructor","hostRef","this","computedDisplayValue","internalReadonly","parsedOptions","inputId","uuidv4","disabled","readonly","required","error","success","multiple","value","displayValue","autofocus","handleSelectChange","event","select","target","selectedValues","Array","from","selectedOptions","map","option","slice","join","valueChanged","emit","setFormValue","handleSelectContainerClick","selectElement","focus","updateDisplayValueWatcher","newValue","updateDisplayValue","split","val","trim","options","forEach","selected","includes","handleDisplayValueChange","handleReadonlyChange","handleOptionsChange","parsedOpts","JSON","parse","selectedOption","find","opt","console","selectedLabels","key","getLabelFromId","filter","label","ensureSelectElement","textContent","internals","el","querySelector","componentWillRender","message","description","validation","errorDescription","componentWillLoad","attachInternals","formElement","closest","input","document","createElement","type","name","appendChild","componentDidLoad","v","render","h","Host","htmlFor","class","onClick","id","ref","onChange","length","size","emphasis","tabIndex"],"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  align-items: stretch;\n  align-self: stretch;\n}\n\n@mixin form-field-select-container() {\n  position: relative;\n  display: flex;\n  flex-grow: 1;\n  justify-content: center;\n  align-items: center;\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  height: var(--form-field-line-height);\n  padding: var(--form-field-padding-y) var(--form-field-padding-x);\n  box-sizing: content-box;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  cursor: pointer;\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\n@mixin form-field-multi-select() {\n  height: 100%;\n  box-sizing: border-box;\n}\n\n@mixin form-field-select-icons() {\n  position: absolute;\n  right: 0;\n  top: 0;\n  pointer-events: none;\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  &[multiple]:not([multiple='false']) {\n    .select-wrapper > .select-container {\n      > .select-icons {\n        top: var(--form-field-padding-y);\n        right: var(--form-field-padding-x);\n      }\n      > select {\n        @include form-field-multi-select();\n      }\n    }\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      > .select-icons {\n        @include form-field-select-icons();\n        > nv-iconbutton {\n          @include form-field-action();\n        }\n      }\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(\n            --components-form-field-background-readonly,\n            rgb(0 0 0 / 10%)\n          );\n          border-color: var(--nv-field-border-readonly);\n        }\n      }\n\n      select {\n        @include form-field-select();\n\n        & option {\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        &.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 DEPRECATED\n\n  /**\n   * Message defines a 'hint ' message for the Select Field.\n   * @deprecated Use `description` instead.\n   */\n  @Prop({ reflect: true })\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({ reflect: true })\n  readonly validation: string;\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region STATES\n\n  @State()\n  private computedDisplayValue: string = '';\n\n  @State()\n  private internalReadonly: boolean = false;\n\n  /**\n   * Options to display in the select. Can be passed as a JSON string.\n   * Format: [{ label: string, value: string, selected?: boolean, disabled?: boolean }]\n   */\n  @Prop({ reflect: true })\n  readonly options?: string;\n\n  /**\n   * Parsed options stored internally\n   */\n  @State()\n  private parsedOptions: Array<{\n    /**\n     * The label of the option\n     */\n    label: string;\n    /**\n     * The value of the option\n     */\n    value: string;\n    /**\n     * Whether the option is selected\n     */\n    selected?: boolean;\n    /**\n     * Whether the option is disabled\n     */\n    disabled?: boolean;\n  }> = [];\n\n  //#endregion STATES\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 inputId: 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  /**\n   * Applies focus to the input field as soon as the component is mounted. This\n   * is equivalent to setting the native autofocus attribute on a <select>\n   * element.\n   */\n  @Prop({ reflect: true })\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  readonly autofocus: 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  /**\n   * Parse options and update the internal state\n   * @param {string} newValue - The new value of options\n   */\n  @Watch('options')\n  handleOptionsChange(newValue: string) {\n    if (typeof newValue === 'string') {\n      try {\n        const parsedOpts = JSON.parse(newValue);\n        this.parsedOptions = [...parsedOpts];\n\n        // Update the value if an option is pre-selected\n        const selectedOption = parsedOpts.find(opt => opt.selected);\n        if (selectedOption) {\n          this.value = selectedOption.value;\n        }\n      } catch (error) {\n        console.error('Error parsing options:', error);\n        this.parsedOptions = [];\n      }\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  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  /**\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    // Parse initial options if present\n    if (this.options) {\n      this.handleOptionsChange(this.options);\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.inputId}>\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.inputId + '-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.inputId}-error`\n                    : `${this.inputId}-description`\n                }\n              />\n            )}\n\n            <select\n              id={this.inputId}\n              ref={el => (this.selectElement = el)}\n              name={this.name}\n              autofocus={this.autofocus}\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.inputId}-error`\n                  : `${this.inputId}-description`\n              }\n            >\n              {this.parsedOptions.length > 0 ? (\n                this.parsedOptions.map(option => (\n                  <option\n                    value={option.value}\n                    selected={option.selected}\n                    disabled={option.disabled}\n                  >\n                    {option.label}\n                  </option>\n                ))\n              ) : (\n                <slot />\n              )}\n            </select>\n            <div class=\"select-icons\">\n              {this.error && (\n                <nv-icon name=\"alert-circle\" class=\"validation\" size=\"md\" />\n              )}\n              {this.success && (\n                <nv-icon name=\"circle-check\" class=\"validation\" size=\"md\" />\n              )}\n\n              {!this.multiple && (\n                <nv-iconbutton\n                  name=\"chevron-down\"\n                  size=\"md\"\n                  emphasis=\"lower\"\n                  tabIndex={-1}\n                />\n              )}\n            </div>\n          </div>\n\n          <slot name=\"after-input\"></slot>\n        </div>\n\n        {(this.description ||\n          this.el.querySelector('[slot=\"description\"]')) && (\n          <div class=\"description\" id={`${this.inputId}-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.inputId}-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-314d2b34.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as n,h as r,a as i,g as o}from"./p-ab002252.js";import{v as t}from"./p-f5ff676c.js";const d='nv-fieldnumber {\n  --nv-field-border-default: var(--components-form-field-border-default);\n  --nv-field-border-hover: var(--components-form-field-border-hover);\n  --nv-field-border-focus: var(--components-form-field-border-focus);\n  --nv-field-border-disabled: var(--components-form-field-border-default);\n  --nv-field-border-readonly: var(--components-form-field-border-default);\n  --nv-field-focus-box-shadow: var(--color-focus-brand);\n  --nv-field-background: var(--components-form-field-background-default);\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--form-gap-y);\n  box-sizing: border-box;\n}\nnv-fieldnumber[readonly]:not([readonly=false]) {\n  --nv-field-border-default: var(--components-form-field-border-readonly);\n  --nv-field-border-hover: var(--nv-field-border-default);\n  --nv-field-border-focus: var(--components-form-field-border-focus);\n  --nv-field-border-disabled: var(--nv-field-border-default);\n  --nv-field-border-readonly: var(--nv-field-border-default);\n  --nv-field-background: var(--components-form-field-background-readonly);\n}\nnv-fieldnumber[error]:not([error=false]) {\n  --nv-field-border-default: var(--components-form-field-border-error);\n  --nv-field-border-hover: var(--nv-field-border-default);\n  --nv-field-border-focus: var(--nv-field-border-default);\n  --nv-field-border-disabled: var(--nv-field-border-default);\n  --nv-field-border-readonly: var(--nv-field-border-default);\n  --nv-field-focus-box-shadow: var(--color-focus-destructive);\n}\nnv-fieldnumber[success]:not([success=false]) {\n  --nv-field-border-default: var(--components-form-field-border-success);\n  --nv-field-border-hover: var(--nv-field-border-default);\n  --nv-field-border-focus: var(--nv-field-border-default);\n  --nv-field-border-disabled: var(--nv-field-border-default);\n  --nv-field-border-readonly: var(--nv-field-border-default);\n  --nv-field-focus-box-shadow: var(--color-focus-success);\n}\nnv-fieldnumber[required]:not([required=false]) label::after {\n  content: "*";\n  color: var(--components-form-text-required);\n  font-weight: 700;\n}\nnv-fieldnumber label {\n  display: flex;\n  align-items: center;\n  gap: var(--form-label-gap);\n  align-self: stretch;\n  color: var(--components-form-text-label-default);\n  font-family: "TT Norms Pro", sans-serif;\n  font-size: var(--form-label-font-size);\n  font-style: normal;\n  font-weight: 500;\n  line-height: var(--form-label-line-height);\n}\nnv-fieldnumber .input-wrapper {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--form-gap-x);\n  align-items: stretch;\n  align-self: stretch;\n}\nnv-fieldnumber .input-wrapper .input-container {\n  display: flex;\n  flex-grow: 1;\n  justify-content: center;\n  align-items: center;\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, 1);\n  background: var(--nv-field-background);\n  transition: all 150ms ease-out;\n  container-type: inline-size;\n  container-name: field-number-input-container;\n  overflow: hidden;\n  position: relative;\n}\nnv-fieldnumber .input-wrapper .input-container:hover {\n  border-color: var(--nv-field-border-hover);\n}\nnv-fieldnumber .input-wrapper .input-container:focus-within, nv-fieldnumber .input-wrapper .input-container:focus-within:hover, nv-fieldnumber .input-wrapper .input-container:focus, nv-fieldnumber .input-wrapper .input-container:focus:hover {\n  border-color: var(--nv-field-border-focus);\n  box-shadow: 0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow);\n}\nnv-fieldnumber .input-wrapper .input-container:has(input:read-only) {\n  opacity: 0.5;\n  background-color: var(--components-form-field-background-readonly);\n  border-color: var(--nv-field-border-readonly);\n}\nnv-fieldnumber .input-wrapper .input-container:has(input:disabled) {\n  opacity: 0.5;\n  background-color: var(--components-form-field-background-disabled);\n  border-color: var(--nv-field-border-disabled);\n}\nnv-fieldnumber .input-wrapper .input-container input {\n  display: flex;\n  align-items: center;\n  flex: 1 0 0;\n  overflow: hidden;\n  background-color: transparent;\n  color: var(--components-form-field-content-text);\n  padding: var(--form-field-padding-y) var(--form-field-padding-x);\n  font-size: var(--form-field-font-size);\n  font-style: normal;\n  font-weight: 500;\n  line-height: var(--form-field-line-height);\n  width: 100%;\n  appearance: textfield;\n}\nnv-fieldnumber .input-wrapper .input-container input:focus {\n  outline: none;\n}\nnv-fieldnumber .input-wrapper .input-container input::placeholder {\n  overflow: hidden;\n  color: var(--components-form-field-content-placeholder);\n  text-overflow: ellipsis;\n  font-family: "TT Norms Pro", sans-serif;\n  font-size: var(--form-field-font-size);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--form-field-line-height);\n}\nnv-fieldnumber .input-wrapper .input-container input::-webkit-inner-spin-button, nv-fieldnumber .input-wrapper .input-container input::-webkit-outer-spin-button {\n  appearance: none;\n  margin: 0;\n}\nnv-fieldnumber .input-wrapper .input-container nv-icon.validation {\n  color: var(--nv-field-border-default);\n  margin-right: var(--form-field-gap);\n}\nnv-fieldnumber .input-wrapper .input-container > nv-iconbutton {\n  border: 0px;\n  border-radius: 0px;\n}\nnv-fieldnumber .input-wrapper .input-container > nv-iconbutton:focus-visible {\n  border-radius: var(--button-md-border-radius);\n  outline-offset: -3px;\n}\nnv-fieldnumber .input-wrapper .input-container .stepper {\n  display: flex;\n  border-left: var(--notification-border-width-low-emphasis) solid var(--components-form-field-border-readonly);\n}\nnv-fieldnumber .input-wrapper .input-container .stepper > nv-iconbutton {\n  border: 0px;\n  border-radius: 0px;\n  border-radius: 0px;\n}\nnv-fieldnumber .input-wrapper .input-container .stepper > nv-iconbutton:focus-visible {\n  border-radius: var(--button-md-border-radius);\n  outline-offset: -3px;\n}\n@container field-number-input-container (width < 150px) {\n  nv-fieldnumber .input-wrapper .input-container .stepper-spacer {\n    display: none;\n  }\n  nv-fieldnumber .input-wrapper .input-container .stepper {\n    display: none;\n  }\n}\nnv-fieldnumber .description {\n  align-self: stretch;\n  color: var(--components-form-text-description-default);\n  font-family: "TT Norms Pro", sans-serif;\n  font-size: var(--form-description-font-size);\n  font-style: normal;\n  line-height: var(--form-description-line-height);\n}\nnv-fieldnumber .error-description {\n  align-self: stretch;\n  color: var(--components-form-text-description-default);\n  font-family: "TT Norms Pro", sans-serif;\n  font-size: var(--form-description-font-size);\n  font-style: normal;\n  line-height: var(--form-description-line-height);\n  color: var(--components-form-text-description-error);\n}';const a=d;const l=class{constructor(r){e(this,r);this.valueChanged=n(this,"valueChanged",7);this.inputId=t();this.disabled=false;this.readonly=false;this.required=false;this.error=false;this.success=false;this.step=1;this.autofocus=false;this.handleInput=e=>{const n=e.target;this.value=Number(n.value)};this.handleInputContainerClick=()=>{this.inputElement.focus()};this.handlePlus=()=>{this.inputElement.stepUp();this.value=Number(this.inputElement.value)};this.handleMinus=()=>{this.inputElement.stepDown();this.value=Number(this.inputElement.value)};this.preventSelection=e=>{e.preventDefault()};this.isMinValueReached=()=>this.min!==undefined&&this.value<=this.min;this.isMaxValueReached=()=>this.max!==undefined&&this.value>=this.max}watchValueHandler(e){this.valueChanged.emit(e)}componentWillRender(){if(this.message){this.description=this.message}if(this.validation){this.errorDescription=this.validation;this.error=true}}render(){return r(i,{key:"14de76d6ddda9977fa3ad28d6e9d2acf613565fa"},(this.label||this.el.querySelector('[slot="label"]'))&&r("label",{key:"22131a183df8f9612d7d1fc4c7904f7e9e3fba71",htmlFor:this.inputId},r("slot",{key:"48cca38b15579499662018d593bd9e73129565da",name:"label"},this.label)),r("div",{key:"9a0a40a370f879f0685a62fb7360419db1245738",class:"input-wrapper"},r("slot",{key:"05bcbc8bd7311f3e6ae467b40af269e373e7ef26",name:"before-input"}),r("div",{key:"81861b40c527dde0b7629914e70f7ee1b3389f06",class:"input-container",onClick:this.handleInputContainerClick},r("slot",{key:"dc64fe00dd75120daedfdc51fc2d5d955f3e3348",name:"leading-input"}),r("input",{key:"01593dfe3c0331acec3ec765cb1673d6a0536f1f",id:this.inputId,ref:e=>this.inputElement=e,placeholder:this.placeholder,name:this.name,type:"number",autofocus:this.autofocus,required:this.required,max:this.max,min:this.min,step:this.step,value:this.value,disabled:this.disabled,readOnly:this.readonly,onInput:this.handleInput}),this.error&&r("nv-icon",{key:"f253f726e6ad61e0b49389f38d1b6c519bd7ade6",name:"alert-circle",class:"validation",size:"md"}),this.success&&r("nv-icon",{key:"11968ad93087be6813e99e2b781fa8d3d7f7b772",name:"circle-check",class:"validation",size:"md"}),r("div",{key:"900d860455ced0a97dbdad044c83578f680e2d1c",class:"stepper"},r("nv-iconbutton",{key:"1c6f95596b862dad92ca2006e983fbf4b45fa9ee",size:"md",name:"minus",emphasis:"lower",onClick:this.handleMinus,disabled:this.isMinValueReached(),onMouseDown:this.preventSelection,tabIndex:-1}),r("nv-iconbutton",{key:"2f08e682805b4c9cf6f09b71c885460ca697de5f",size:"md",name:"plus",emphasis:"lower",onClick:this.handlePlus,disabled:this.isMaxValueReached(),onMouseDown:this.preventSelection,tabIndex:-1}))),r("slot",{key:"b63dbbaeb358b73105f552de15a0226906f5e547",name:"after-input"})),(this.description||this.el.querySelector('[slot="description"]'))&&r("div",{key:"43c3f1bd58a36095e69283151ac4d7edcd0eef4a",class:"description"},r("slot",{key:"0c91c8198be73d7285065d86c1ca1340d3517e0d",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&r("div",{key:"ecb9e02f67241294215ee3e570006dcf98539537",hidden:!this.error,class:"error-description"},r("slot",{key:"763ddc2a238b85022d72e046d9665fbb433f8476",name:"error-description"},this.errorDescription)))}static get formAssociated(){return true}get el(){return o(this)}static get watchers(){return{value:["watchValueHandler"]}}};l.style=a;export{l as nv_fieldnumber};
+//# sourceMappingURL=p-314d2b34.entry.js.map

package/dist/native/p-314d2b34.entry.js.map

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

package/dist/native/p-332c5d6c.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as r,h as t,a as i,g as o}from"./p-ab002252.js";import{I as n}from"./p-53aa81dd.js";import{v as d}from"./p-f5ff676c.js";import"./p-0462f723.js";const a='nv-fielddate{--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-fielddate[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-fielddate[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-fielddate[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-fielddate[required]:not([required=false]) label::after{content:"*";color:var(--components-form-text-required);font-weight:700}nv-fielddate 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-fielddate nv-popover{width:100%;display:block}nv-fielddate nv-popover [data-scope=popover]{padding:0;background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border);width:auto}nv-fielddate nv-popover [slot=content]{display:block;width:100%}nv-fielddate .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;display:flex;align-items:center;gap:8px}nv-fielddate .input-wrapper .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;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, 1);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fielddate .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddate .input-wrapper .input-container:focus-within,nv-fielddate .input-wrapper .input-container:focus-within:hover,nv-fielddate .input-wrapper .input-container:focus,nv-fielddate .input-wrapper .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fielddate .input-wrapper .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fielddate .input-wrapper .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fielddate .input-wrapper .input-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%}nv-fielddate .input-wrapper .input-container input:focus{outline:none}nv-fielddate .input-wrapper .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:"TT Norms Pro", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fielddate .input-wrapper .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fielddate .input-wrapper .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fielddate .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddate .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-fielddate .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=a;const l=class{constructor(t){e(this,t);this.dateChange=r(this,"dateChange",7);this.popoverId=d();this.inputId=d();this.disabled=false;this.readonly=false;this.required=false;this.error=false;this.success=false;this.autofocus=false;this.value="";this.singleValue="";this.open=false;this.firstDayOfWeek=1;this.numberOfCalendars=1;this.min="";this.max="";this.locale="en-BE";this.dateFormat="YYYY-MM-DD";this.shortcutsPlacement="bottom";this.showActions=false;this.shortcuts="[]";this.disabledDates="[]";this.handleClickOutside=e=>{if(this.open&&this.el&&!this.el.contains(e.target)){this.open=false}};this.handleInputContainerClick=e=>{if(this.readonly||this.disabled){e.preventDefault();e.stopPropagation();return}this.inputElement.focus();const r=this.dateFormat;if(r.startsWith("DD")){this.inputElement.setSelectionRange(0,2)}else if(r.startsWith("MM")){this.inputElement.setSelectionRange(0,2)}else if(r.startsWith("YYYY")){this.inputElement.setSelectionRange(0,4)}};this.handleInput=e=>{if(this.readonly||this.disabled){e.preventDefault();return}const r=e.target;this.singleValue=r.value;this.dateChange.emit({value:r.value})};this.toggleCalendar=()=>{if(this.readonly||this.disabled){return}this.open=!this.open};this.handleFocus=e=>{if(this.readonly||this.disabled){e.preventDefault();e.target.blur();return}}}convertToInputmaskFormat(e){switch(e){case"DD/MM/YYYY":return"dd/mm/yyyy";case"MM/DD/YYYY":return"mm/dd/yyyy";case"YYYY-MM-DD":return"yyyy-mm-dd";case"DD.MM.YYYY":return"dd.mm.yyyy";case"YYYYMMDD":return"yyyymmdd";default:return e}}connectedCallback(){document.addEventListener("click",this.handleClickOutside)}componentWillLoad(){if(this.value){this.singleValue=this.value}}componentDidLoad(){const e=this.el.querySelectorAll(".input-wrapper input");e.forEach((e=>{n({alias:"datetime",inputFormat:this.convertToInputmaskFormat(this.dateFormat),placeholder:"_".repeat(this.dateFormat.length)}).mask(e)}))}disconnectedCallback(){document.removeEventListener("click",this.handleClickOutside)}handleSingleDateChange(e){const r=e.detail;this.singleValue=r;this.dateChange.emit({value:r});if(!this.showActions){this.open=false}}handleClosePopover(){this.open=false}handleKeyDown(e){if(!this.open){if(e.key==="ArrowDown"){this.open=true;e.preventDefault();return}return}if(!this.popoverElement){console.warn("nv-fielddate -> Popover element is not defined");return}}handleValueChange(e){this.singleValue=e}render(){return t(i,{key:"df11f4f395a48f6288b20a242cccdacc9d7b397c"},(this.label&&this.label.length>0||this.el.querySelector('[slot="label"]'))&&t("label",{key:"bebb3787dcef1ea73bada36586bdd678f0ce0556",htmlFor:this.inputId},t("slot",{key:"52be6fb452bcd9471708376e708e9a8126af73c2",name:"label"},this.label)),t("nv-popover",{key:"6e1cc0a602641ec43be99ca990d64f175ff7bac8",ref:e=>this.popoverElement=e,id:this.popoverId,triggerMode:"controlled",placement:"bottom-start",open:this.open},t("div",{key:"7cc0bcc9df49252d209caa22b61358c230d2f0dd",slot:"trigger",class:"input-wrapper"},t("slot",{key:"13037bdfe258561afd35c23fd1cb94ed96bbba9d",name:"before-input"}),t("div",{key:"5a0c1bce690feb834f6183c57772d7b2eed0a8a6",class:"input-container",onClick:this.handleInputContainerClick},t("slot",{key:"73842b222ba5059f1f09a4ce57b662710a1e341a",name:"leading-input"}),t("input",{key:"2e4de521b0d1d735fd4170eefacfe4e8f5bbcf33",id:this.inputId,ref:e=>this.inputElement=e,placeholder:this.placeholder,name:this.name,disabled:this.disabled,readOnly:this.readonly,required:this.required,autofocus:this.autofocus,value:this.singleValue,onInput:this.handleInput,onFocus:this.handleFocus}),t("nv-iconbutton",{key:"dff7fe7f4a49a3da8ed44235ef719e726a40db87",class:"toggle-calendar-icon",name:"calendar",size:"md",emphasis:"lower","aria-label":this.open?"Hide calendar":"Show calendar","aria-pressed":this.open.toString(),onClick:this.toggleCalendar,tabIndex:this.disabled?-1:0})),t("slot",{key:"aafa39739ae3f907cef45d95094ef643833d50ad",name:"after-input"})),t("div",{key:"38cbef48ee7b053ad7c277e8125fcbf6d11c636c",slot:"content"},t("nv-calendar",{key:"dd5f1b3f1d7fcb17a47d90be58949fffe89e3ad4",dateFormat:this.dateFormat,singleValue:this.singleValue,firstDayOfWeek:this.firstDayOfWeek,numberOfCalendars:this.numberOfCalendars,min:this.min,max:this.max,locale:this.locale,shortcutsPlacement:this.shortcutsPlacement,showActions:this.showActions,shortcuts:this.shortcuts,showWeekNumbers:this.showWeekNumbers,disabledDates:this.disabledDates}))),(this.description&&this.description.length>0||this.el.querySelector('[slot="description"]'))&&t("div",{key:"92526d3d8ed3bce713a5b30097df182b0ea22d4f",class:"description"},t("slot",{key:"d2a3a35577c08e3dd21c1c48eb6c6e3959abb7da",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&t("div",{key:"d4ba884604a01e2376691d382fb530576c02f029",hidden:!this.error,class:"error-description"},this.el.querySelector('[slot="error-description"]')?t("slot",{name:"error-description"}):this.errorDescription),t("slot",{key:"443c990302fa9aaef0e6fe732738d4f8e4570717"}))}get el(){return o(this)}static get watchers(){return{value:["handleValueChange"]}}};l.style=s;export{l as nv_fielddate};
+//# sourceMappingURL=p-332c5d6c.entry.js.map

package/dist/native/p-332c5d6c.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["nvFielddateCss","NvFielddateStyle0","NvFielddate","constructor","hostRef","this","popoverId","uuidv4","inputId","disabled","readonly","required","error","success","autofocus","value","singleValue","open","firstDayOfWeek","numberOfCalendars","min","max","locale","dateFormat","shortcutsPlacement","showActions","shortcuts","disabledDates","handleClickOutside","event","el","contains","target","handleInputContainerClick","preventDefault","stopPropagation","inputElement","focus","format","startsWith","setSelectionRange","handleInput","input","dateChange","emit","toggleCalendar","handleFocus","blur","convertToInputmaskFormat","connectedCallback","document","addEventListener","componentWillLoad","componentDidLoad","inputs","querySelectorAll","forEach","Inputmask","alias","inputFormat","placeholder","repeat","length","mask","disconnectedCallback","removeEventListener","handleSingleDateChange","detail","handleClosePopover","handleKeyDown","key","popoverElement","console","warn","handleValueChange","newValue","render","h","Host","label","querySelector","htmlFor","name","ref","id","triggerMode","placement","slot","class","onClick","e","readOnly","onInput","onFocus","size","emphasis","toString","tabIndex","showWeekNumbers","description","errorDescription","hidden"],"sources":["src/components/nv-fielddate/styles/nv-fielddate.scss?tag=nv-fielddate","src/components/nv-fielddate/nv-fielddate.tsx"],"sourcesContent":["@import '../../../styles/form-field';\n\nnv-fielddate {\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  nv-popover {\n    width: 100%;\n    display: block;\n\n    [data-scope='popover'] {\n      padding: 0;\n      background-color: var(--components-list-dropdown-background);\n      border: 1px solid var(--components-list-dropdown-border);\n      width: auto;\n    }\n\n    [slot='content'] {\n      display: block;\n      width: 100%;\n    }\n  }\n\n  .input-wrapper {\n    @include form-field-input-wrapper();\n    display: flex;\n    align-items: center;\n    gap: 8px;\n\n    .input-container {\n      @include form-field-input-container();\n\n      input {\n        @include form-field-input();\n        width: 100%;\n      }\n\n      > nv-iconbutton {\n        @include form-field-action();\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  h,\n  Prop,\n  State,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  Host,\n  Watch,\n} from '@stencil/core';\nimport Inputmask from 'inputmask';\nimport { v4 as uuidv4 } from 'uuid';\n\n/**\n * @slot default - Child content of the component.\n * @slot leading-input - Content to be placed before the input text, within the input container.\n * @slot before-input - Content to be placed before the input text, outside the input container.\n * @slot after-input - Content to be placed after the input text, outside the input container.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n  tag: 'nv-fielddate',\n  styleUrl: 'styles/nv-fielddate.scss',\n  shadow: false,\n})\nexport class NvFielddate {\n  @Element() el: HTMLNvFielddateElement;\n  private inputElement!: HTMLInputElement;\n\n  private popoverElement!: HTMLNvPopoverElement;\n  private popoverId: string = uuidv4();\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   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * Text displayed as label. A slot label can override this prop.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\n\n  /**\n   * Description displayed below the input. A slot description can override this prop.\n   */\n  @Prop({ reflect: true })\n  readonly description: string;\n\n  /**\n   * Placeholder for the input field.\n   */\n  @Prop({ reflect: true })\n  readonly placeholder: string;\n\n  /**\n   * Name attribute for the input.\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * Disables the input field.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Sets the input field as read-only.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks the input field as required.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Indicates an error state.\n   */\n  @Prop({ reflect: true })\n  readonly error: boolean = false;\n\n  /**\n   * Error description. A slot error-description can override this prop.\n   */\n  @Prop({ reflect: true })\n  readonly errorDescription?: string;\n\n  /**\n   * Indicates a success state.\n   */\n  @Prop({ reflect: true })\n  readonly success: boolean = false;\n\n  /**\n   * Autofocus the input when the component is mounted.\n   */\n  @Prop({ reflect: true })\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  readonly autofocus: boolean = false;\n\n  /**\n   * The initial value of the input (date in string format).\n   */\n  @Prop({ reflect: true })\n  readonly value: string = '';\n\n  /**\n   * The current value of the input date in string format.\n   */\n  @State()\n  singleValue: string = '';\n\n  /**\n   * Controls the opening of the popover.\n   */\n  @State()\n  open: boolean = false;\n\n  /**\n   * First day of the week 0 = Sunday, 1 = Monday, etc.\n   * @default 1\n   */\n  @Prop({ reflect: true })\n  readonly firstDayOfWeek: number = 1;\n\n  /**\n   * Number of calendars to display\n   * @default 1\n   */\n  @Prop({ reflect: true })\n  readonly numberOfCalendars: number = 1;\n\n  /**\n   * Minimum date for selection ISO string format, ex: 2025-01-01\n   */\n  @Prop({ reflect: true })\n  readonly min?: string = '';\n\n  /**\n   * Maximum date for selection ISO string format, ex: 2025-12-31\n   */\n  @Prop({ reflect: true })\n  readonly max?: string = '';\n\n  /** Locale for date formatting\n   * @default 'en-BE'\n   */\n  @Prop({ reflect: true })\n  readonly locale: string = 'en-BE';\n\n  /** Date format ex: YYYY-MM-DD, DD-MM-YYYY, etc.\n   * @default 'YYYY-MM-DD'\n   * @note If the date format is in UTC mode, the date will be displayed in UTC time.\n   * @note If the date format is not in UTC mode, the date will be displayed in the local time.\n   */\n  @Prop({ reflect: true })\n  readonly dateFormat: string = 'YYYY-MM-DD';\n\n  /**\n   * Footer placement\n   * @default 'bottom'\n   */\n  @Prop({ reflect: true })\n  readonly shortcutsPlacement: 'bottom' | 'left' | 'right' = 'bottom';\n\n  /**\n   * Show action buttons\n   * @default false\n   */\n  @Prop({ reflect: true })\n  readonly showActions: boolean = false;\n\n  /**\n   * Custom actions to display in the footer\n   * JSON array of objects with the following properties:\n   * - label: string\n   * - onClick: function\n   * @default '[]'\n   */\n  @Prop({ reflect: true })\n  readonly shortcuts: string = '[]';\n\n  /**\n   * Show week numbers\n   * @default true\n   */\n  @Prop({ reflect: true })\n  readonly showWeekNumbers: boolean;\n\n  /**\n   * Disabled dates ISO string array\n   * @default '[]'\n   */\n  @Prop({ reflect: true })\n  readonly disabledDates: string = '[]';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Converts the nv-calendar date format to the format expected by Inputmask.\n   * @param {string} format - The date format.\n   * @returns {string} Format adapted for Inputmask.\n   */\n  private convertToInputmaskFormat(format: string): string {\n    switch (format) {\n      case 'DD/MM/YYYY':\n        return 'dd/mm/yyyy';\n      case 'MM/DD/YYYY':\n        return 'mm/dd/yyyy';\n      case 'YYYY-MM-DD':\n        return 'yyyy-mm-dd';\n      case 'DD.MM.YYYY':\n        return 'dd.mm.yyyy';\n      case 'YYYYMMDD':\n        return 'yyyymmdd';\n      default:\n        return format;\n    }\n  }\n\n  /**\n   * Closes the popover when a click is detected outside the component.\n   * @param {MouseEvent} event - The click event.\n   */\n  private handleClickOutside = (event: MouseEvent) => {\n    if (this.open && this.el && !this.el.contains(event.target as Node)) {\n      this.open = false;\n    }\n  };\n\n  /**\n   * Focuses the input when the input container is clicked.\n   * @param {MouseEvent} event - The click event.\n   */\n  private handleInputContainerClick = (event: MouseEvent) => {\n    if (this.readonly || this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    this.inputElement.focus();\n    // Select the first characters based on the date format\n    const format = this.dateFormat;\n    if (format.startsWith('DD')) {\n      this.inputElement.setSelectionRange(0, 2);\n    } else if (format.startsWith('MM')) {\n      this.inputElement.setSelectionRange(0, 2);\n    } else if (format.startsWith('YYYY')) {\n      this.inputElement.setSelectionRange(0, 4);\n    }\n  };\n\n  /**\n   * Handles the input event on the input element.\n   * Updates the singleValue and emits the dateChange event.\n   * @param {Event} event - The input event.\n   */\n  private handleInput = (event: Event) => {\n    if (this.readonly || this.disabled) {\n      event.preventDefault();\n      return;\n    }\n    const input = event.target as HTMLInputElement;\n    this.singleValue = input.value;\n    this.dateChange.emit({ value: input.value });\n  };\n\n  /**\n   * Toggles the opening/closing of the popover.\n   */\n  private toggleCalendar = () => {\n    if (this.readonly || this.disabled) {\n      return;\n    }\n    this.open = !this.open;\n  };\n\n  /**\n   * Handles focus events on the input element.\n   * @param {FocusEvent} event - The focus event.\n   */\n  private handleFocus = (event: FocusEvent) => {\n    if (this.readonly || this.disabled) {\n      event.preventDefault();\n      (event.target as HTMLElement).blur();\n      return;\n    }\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  connectedCallback() {\n    document.addEventListener('click', this.handleClickOutside);\n  }\n\n  componentWillLoad() {\n    if (this.value) {\n      this.singleValue = this.value;\n    }\n  }\n\n  componentDidLoad() {\n    const inputs = this.el.querySelectorAll('.input-wrapper input');\n    inputs.forEach((input: HTMLInputElement) => {\n      Inputmask({\n        alias: 'datetime',\n        inputFormat: this.convertToInputmaskFormat(this.dateFormat),\n        placeholder: '_'.repeat(this.dateFormat.length),\n      }).mask(input);\n    });\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('click', this.handleClickOutside);\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emits an event when the date changes.\n   */\n  @Event()\n  dateChange: EventEmitter<{\n    /**\n     * The date value.\n     */\n    value: string;\n  }>;\n\n  /**\n   * Handles the single date selection event from nv-calendar.\n   * Updates the input value and closes the popover.\n   * @param {CustomEvent} event - The event from nv-calendar.\n   */\n  @Listen('singleDateChange')\n  handleSingleDateChange(event: CustomEvent) {\n    const value: string = event.detail;\n    this.singleValue = value;\n    this.dateChange.emit({ value });\n    if (!this.showActions) {\n      this.open = false;\n    }\n  }\n\n  @Listen('closePopover')\n  handleClosePopover() {\n    this.open = false;\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\n        event.preventDefault();\n        return;\n      }\n      return;\n    }\n\n    // Verify if the popover element is defined\n    if (!this.popoverElement) {\n      console.warn('nv-fielddate -> Popover element is not defined');\n      return;\n    }\n  }\n\n  @Watch('value')\n  handleValueChange(newValue: string) {\n    this.singleValue = newValue;\n  }\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region RENDER\n  render() {\n    return (\n      <Host>\n        {((this.label && this.label.length > 0) ||\n          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          id={this.popoverId}\n          triggerMode=\"controlled\"\n          placement=\"bottom-start\"\n          open={this.open}\n        >\n          <div slot=\"trigger\" class=\"input-wrapper\">\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              <input\n                id={this.inputId}\n                ref={e => (this.inputElement = e)}\n                placeholder={this.placeholder}\n                name={this.name}\n                disabled={this.disabled}\n                readOnly={this.readonly}\n                required={this.required}\n                autofocus={this.autofocus}\n                value={this.singleValue}\n                onInput={this.handleInput}\n                onFocus={this.handleFocus}\n              />\n\n              <nv-iconbutton\n                class=\"toggle-calendar-icon\"\n                name=\"calendar\" //{this.open ? 'chevron-top' : 'chevron-down'}\n                size=\"md\"\n                emphasis=\"lower\"\n                aria-label={this.open ? 'Hide calendar' : 'Show calendar'}\n                aria-pressed={this.open.toString()}\n                onClick={this.toggleCalendar}\n                tabIndex={this.disabled ? -1 : 0}\n              />\n            </div>\n\n            <slot name=\"after-input\"></slot>\n          </div>\n\n          <div slot=\"content\">\n            <nv-calendar\n              dateFormat={this.dateFormat}\n              singleValue={this.singleValue}\n              firstDayOfWeek={this.firstDayOfWeek}\n              numberOfCalendars={this.numberOfCalendars}\n              min={this.min}\n              max={this.max}\n              locale={this.locale}\n              shortcutsPlacement={this.shortcutsPlacement}\n              showActions={this.showActions}\n              shortcuts={this.shortcuts}\n              showWeekNumbers={this.showWeekNumbers}\n              disabledDates={this.disabledDates}\n            ></nv-calendar>\n          </div>\n        </nv-popover>\n\n        {((this.description && this.description.length > 0) ||\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            {this.el.querySelector('[slot=\"error-description\"]') ? (\n              <slot name=\"error-description\"></slot>\n            ) : (\n              this.errorDescription\n            )}\n          </div>\n        )}\n\n        <slot></slot>\n      </Host>\n    );\n  }\n  //#endregion RENDER\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/native/p-3af5bcc1.entry.js

@@ -0,0 +1,2 @@
+import{r as o,h as t,a as e,g as n}from"./p-ab002252.js";import{c as r}from"./p-8a1a6e56.js";const i='nv-iconbutton.root{display:inline-flex;justify-content:center;align-items:center;font-style:normal;font-weight:500;font-family:"TT Norms Pro", sans-serif;transition:background-color 150ms ease-out;height:fit-content;width:fit-content}nv-iconbutton.size-xs{padding:var(--button-xs-icon-button-padding);gap:var(--button-xs-gap);border-radius:var(--button-xs-border-radius);line-height:var(--button-xs-line-height);font-size:var(--button-xs-font-size)}nv-iconbutton.size-sm{padding:var(--button-sm-icon-button-padding);gap:var(--button-sm-gap);border-radius:var(--button-sm-border-radius);line-height:var(--button-sm-line-height);font-size:var(--button-sm-font-size)}nv-iconbutton.size-md{padding:var(--button-md-icon-button-padding);gap:var(--button-md-gap);border-radius:var(--button-md-border-radius);line-height:var(--button-md-line-height);font-size:var(--button-md-font-size)}nv-iconbutton.size-lg{padding:var(--button-lg-icon-button-padding);gap:var(--button-lg-gap);border-radius:var(--button-lg-border-radius);line-height:var(--button-lg-line-height);font-size:var(--button-lg-font-size)}nv-iconbutton.emphasis-high{background:var(--components-button-high-background);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text)}nv-iconbutton.emphasis-high:hover{background:var(--components-button-high-background-hover);color:var(--components-button-high-text-hover)}nv-iconbutton.emphasis-high:focus,nv-iconbutton.emphasis-high:focus-within{outline:none}nv-iconbutton.emphasis-high:focus-visible,nv-iconbutton.emphasis-high:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-high:disabled{background:var(--components-button-high-background);color:var(--components-button-high-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-high nv-icon>svg{color:var(--components-button-high-icon)}nv-iconbutton.emphasis-medium{background:var(--components-button-medium-background);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text)}nv-iconbutton.emphasis-medium:hover{background:var(--components-button-medium-background-hover);color:var(--components-button-medium-text-hover)}nv-iconbutton.emphasis-medium:focus,nv-iconbutton.emphasis-medium:focus-within{outline:none}nv-iconbutton.emphasis-medium:focus-visible,nv-iconbutton.emphasis-medium:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-medium:disabled{background:var(--components-button-medium-background);color:var(--components-button-medium-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-medium nv-icon>svg{color:var(--components-button-medium-icon)}nv-iconbutton.emphasis-low{background:var(--components-button-low-background);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text)}nv-iconbutton.emphasis-low:hover{background:var(--components-button-low-background-hover);color:var(--components-button-low-text-hover)}nv-iconbutton.emphasis-low:focus,nv-iconbutton.emphasis-low:focus-within{outline:none}nv-iconbutton.emphasis-low:focus-visible,nv-iconbutton.emphasis-low:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-low:disabled{background:var(--components-button-low-background);color:var(--components-button-low-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-low nv-icon>svg{color:var(--components-button-low-icon)}nv-iconbutton.emphasis-lower{background:var(--components-button-lower-background);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text)}nv-iconbutton.emphasis-lower:hover{background:var(--components-button-lower-background-hover);color:var(--components-button-lower-text-hover)}nv-iconbutton.emphasis-lower:focus,nv-iconbutton.emphasis-lower:focus-within{outline:none}nv-iconbutton.emphasis-lower:focus-visible,nv-iconbutton.emphasis-lower:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-lower:disabled{background:var(--components-button-lower-background);color:var(--components-button-lower-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-lower nv-icon>svg{color:var(--components-button-lower-icon)}nv-iconbutton.loading [slot=leading-icon]{display:none}nv-iconbutton.shape-rounded{border-radius:var(--radius-rounded-full)}';const a=i;const s=class{constructor(t){o(this,t);if(t.$hostElement$["s-ei"]){this.internals=t.$hostElement$["s-ei"]}else{this.internals=t.$hostElement$.attachInternals();t.$hostElement$["s-ei"]=this.internals}this.size="md";this.emphasis="high";this.loading=false;this.disabled=false;this.active=false;this.type="button";this.shape="square";this.handleClick=o=>{var t,e,n,r;if(this.disabled){o.preventDefault();return}if(this.type==="submit"){(e=(t=this.internals)===null||t===void 0?void 0:t.form)===null||e===void 0?void 0:e.requestSubmit()}if(this.type==="reset"){(r=(n=this.internals)===null||n===void 0?void 0:n.form)===null||r===void 0?void 0:r.reset()}}}handleLoadingChange(o){this.loading=o;this.disabled=o}handleDisabledChange(o){if(this.loading){this.disabled=this.loading}else{this.disabled=o}}handleKeyDown(o){if(o.key==="Enter"||o.key===" "){o.preventDefault();this.el.click()}}handleTouchStart(o){if(o.touches.length>1)return;o.preventDefault();this.el.click()}componentWillLoad(){if(this.loading){this.disabled=this.loading}}render(){return t(e,{key:"4c8d155b8feb2c43c71075facd4aba91187859e0",role:"button",type:this.type,tabindex:"0",disabled:this.disabled?true:undefined,class:r("root",`size-${this.size}`,`emphasis-${this.emphasis}`,this.loading&&"loading",`shape-${this.shape}`),onClick:this.handleClick},this.loading&&t("nv-loader",{key:"98e022b368e278aed21335cf593aeea19dba29ee",size:this.size}),!this.loading&&t("nv-icon",{key:"5298a3d0a85e97826693e47e04ed9eddcb4f9cd3",name:this.name,size:this.size}),t("slot",{key:"7e239aacae35715d4dc309919a21f0def9c0fa5d"}))}static get formAssociated(){return true}get el(){return n(this)}static get watchers(){return{loading:["handleLoadingChange"],disabled:["handleDisabledChange"]}}};s.style=a;const l='@keyframes rotation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}nv-loader{display:inline-block;position:relative;aspect-ratio:1/1;border-radius:9999px;color:inherit}nv-loader.size-xs{width:var(--loader-size-xs);height:var(--loader-size-xs)}nv-loader.size-xs::before,nv-loader.size-xs::after{content:" ";position:absolute;top:0;left:0;border-radius:inherit;width:100%;height:100%}nv-loader.size-xs::before{content:" ";border:calc(var(--loader-size-xs) / 10) solid;opacity:0.3}nv-loader.size-xs::after{content:" ";border-top:calc(var(--loader-size-xs) / 10) solid transparent;border-left:calc(var(--loader-size-xs) / 10) solid transparent;border-right:calc(var(--loader-size-xs) / 10) solid transparent;border-bottom:calc(var(--loader-size-xs) / 10) solid;animation:rotation 1s linear infinite}nv-loader.size-sm{width:var(--loader-size-sm);height:var(--loader-size-sm)}nv-loader.size-sm::before,nv-loader.size-sm::after{content:" ";position:absolute;top:0;left:0;border-radius:inherit;width:100%;height:100%}nv-loader.size-sm::before{content:" ";border:calc(var(--loader-size-sm) / 10) solid;opacity:0.3}nv-loader.size-sm::after{content:" ";border-top:calc(var(--loader-size-sm) / 10) solid transparent;border-left:calc(var(--loader-size-sm) / 10) solid transparent;border-right:calc(var(--loader-size-sm) / 10) solid transparent;border-bottom:calc(var(--loader-size-sm) / 10) solid;animation:rotation 1s linear infinite}nv-loader.size-md{width:var(--loader-size-md);height:var(--loader-size-md)}nv-loader.size-md::before,nv-loader.size-md::after{content:" ";position:absolute;top:0;left:0;border-radius:inherit;width:100%;height:100%}nv-loader.size-md::before{content:" ";border:calc(var(--loader-size-md) / 10) solid;opacity:0.3}nv-loader.size-md::after{content:" ";border-top:calc(var(--loader-size-md) / 10) solid transparent;border-left:calc(var(--loader-size-md) / 10) solid transparent;border-right:calc(var(--loader-size-md) / 10) solid transparent;border-bottom:calc(var(--loader-size-md) / 10) solid;animation:rotation 1s linear infinite}nv-loader.size-lg{width:var(--loader-size-lg);height:var(--loader-size-lg)}nv-loader.size-lg::before,nv-loader.size-lg::after{content:" ";position:absolute;top:0;left:0;border-radius:inherit;width:100%;height:100%}nv-loader.size-lg::before{content:" ";border:calc(var(--loader-size-lg) / 10) solid;opacity:0.3}nv-loader.size-lg::after{content:" ";border-top:calc(var(--loader-size-lg) / 10) solid transparent;border-left:calc(var(--loader-size-lg) / 10) solid transparent;border-right:calc(var(--loader-size-lg) / 10) solid transparent;border-bottom:calc(var(--loader-size-lg) / 10) solid;animation:rotation 1s linear infinite}nv-loader.size-xl{width:var(--loader-size-xl);height:var(--loader-size-xl)}nv-loader.size-xl::before,nv-loader.size-xl::after{content:" ";position:absolute;top:0;left:0;border-radius:inherit;width:100%;height:100%}nv-loader.size-xl::before{content:" ";border:calc(var(--loader-size-xl) / 10) solid;opacity:0.3}nv-loader.size-xl::after{content:" ";border-top:calc(var(--loader-size-xl) / 10) solid transparent;border-left:calc(var(--loader-size-xl) / 10) solid transparent;border-right:calc(var(--loader-size-xl) / 10) solid transparent;border-bottom:calc(var(--loader-size-xl) / 10) solid;animation:rotation 1s linear infinite}nv-loader.color-brand::before{border-color:var(--components-loader-brand-background);opacity:1}nv-loader.color-brand::after{border-bottom-color:var(--components-loader-brand-foreground)}nv-loader.color-white::before{border-color:var(--components-loader-white-background);opacity:1}nv-loader.color-white::after{border-bottom-color:var(--components-loader-white-foreground)}';const d=l;const c=class{constructor(t){o(this,t);this.size="md"}render(){return t(e,{key:"b6b029b8231c2d4a1a6a7f074f42a27b85dff71b",class:r(this.size&&`size-${this.size}`,this.color&&`color-${this.color}`)})}};c.style=d;export{s as nv_iconbutton,c as nv_loader};
+//# sourceMappingURL=p-3af5bcc1.entry.js.map