@nova-design-system/nova-webcomponents 3.9.0 → 3.9.1

package/dist/native/{p-516da423.entry.js → p-9ea3d30d.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as r,h as t,H as i,g as o}from"./p-d0a33e64.js";import{I as n}from"./p-53aa81dd.js";import{v as a}from"./p-f5ff676c.js";import"./p-0462f723.js";const s='nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range{background:var(--components-slider-track-filled-focus)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb{border-color:var(--components-slider-track-filled-focus)}nv-fieldslider[error] .slider-container .track-container .track .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:hover{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-handler-background-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:focus{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-error)}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;max-width:480px}nv-fielddate[fluid]:not([fluid=false]){max-width:unset}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-in-field)}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 nv-popover .datepicker-container{border:none}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%;font-feature-settings:"tnum";font-family:"TTNorms Pro Mono", monospace}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 input[type=password]::-ms-clear,nv-fielddate .input-wrapper .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}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{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);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{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);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 d=s;const l=class{constructor(t){e(this,t);this.valueChanged=r(this,"valueChanged",7);this.popoverId=a();this.inputId=a();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.fluid=false;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")||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;const t=this.value;this.singleValue=r.value;this.value=r.value;if(t!==r.value){this.valueChanged.emit(r.value)}};this.initializeInputMask=()=>{this.currentPlaceholder="";if(this.inputElement.inputmask){return}const e=new n({alias:"datetime",inputFormat:this.convertToInputmaskFormat(this.dateFormat),placeholder:" ",prefillYear:false,clearIncomplete:false,showMaskOnHover:false,showMaskOnFocus:false,clearMaskOnLostFocus:false,insertMode:true,rightAlign:false,oncomplete:function(e){const r=e.target;const t=new CustomEvent("input",{bubbles:true});r.dispatchEvent(t)}});e.mask(this.inputElement);if(this.inputElement.name===this.name&&this.singleValue){requestAnimationFrame((()=>{this.inputElement.value=this.singleValue;const e=new CustomEvent("input",{bubbles:true});this.inputElement.dispatchEvent(e)}))}};this.handleKeydownBeforeMask=e=>{const r=["Backspace","Delete","Tab","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"];if(/\d/.test(e.key)){this.initializeInputMask();this.inputElement.removeEventListener("keydown",this.handleKeydownBeforeMask)}else if(!r.includes(e.key)&&!e.metaKey&&!e.ctrlKey){e.preventDefault()}};this.handleFocus=e=>{if(this.readonly||this.disabled){e.preventDefault();e.target.blur();return}if(!this.inputElement.inputmask){this.inputElement.addEventListener("keydown",this.handleKeydownBeforeMask)}this.open=true};this.handleBlur=()=>{this.inputElement.removeEventListener("keydown",this.handleKeydownBeforeMask)};this.handleCalendarValueChanged=e=>{e.stopPropagation()};this.setPopoverRef=e=>{this.popoverElement=e};this.setInputRef=e=>{this.inputElement=e};this.toggleCalendar=()=>{if(this.readonly||this.disabled){return}this.open=!this.open}}convertToInputmaskFormat(e){if(!e){return"dd/mm/yyyy"}const r={"DD/MM/YYYY":"dd/mm/yyyy","MM/DD/YYYY":"mm/dd/yyyy","YYYY-MM-DD":"yyyy-mm-dd","DD.MM.YYYY":"dd.mm.yyyy",YYYYMMDD:"yyyymmdd"};return r[e]||"dd/mm/yyyy"}async clear(){this.singleValue="";this.value="";if(this.inputElement){this.inputElement.value="";if(this.inputElement.inputmask){this.inputElement.inputmask.remove()}}this.valueChanged.emit("");this.open=false}connectedCallback(){document.addEventListener("click",this.handleClickOutside)}componentWillLoad(){if(this.value){this.singleValue=this.value}this.currentPlaceholder=this.placeholder||this.dateFormat}componentDidLoad(){}disconnectedCallback(){document.removeEventListener("click",this.handleClickOutside);if(this.inputElement&&this.inputElement.inputmask){this.inputElement.inputmask.remove()}}handleSingleDateChange(e){const r=e.detail;const t=this.value;this.singleValue=r;this.value=r;if(t!==r){this.valueChanged.emit(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:"45af13d8290479c8ec171c0702d9d695c5047610"},(this.label&&this.label.length>0||this.el.querySelector('[slot="label"]'))&&t("label",{key:"d30403c879f8ca0449d8d25d22bb401ece876758",htmlFor:this.inputId},t("slot",{key:"aec155a914cff6b7ea8170dbd1f0d9ee4f35172e",name:"label"},this.label)),t("nv-popover",{key:"522969535f2b8340f1a9b425c4ea6291fc65cb7e",ref:this.setPopoverRef,id:this.popoverId,triggerMode:"controlled",placement:"bottom-start",open:this.open},t("div",{key:"eb1d5ab314fe654b3642afb22d9e3fbc340de969",slot:"trigger",class:"input-wrapper"},t("slot",{key:"6c28354e914075c36db9bee659d140669a745cab",name:"before-input"}),t("div",{key:"68d3aa4a8afcec4042a8930678cea7046f3e31d7",class:"input-container",onClick:this.handleInputContainerClick},t("slot",{key:"ed7ada6913a6735af622369236b5f521f2e96aad",name:"leading-input"}),t("input",{key:"49607b25253233665544e8e85db3814734280fe0",id:this.inputId,ref:this.setInputRef,placeholder:this.currentPlaceholder,name:this.name,disabled:this.disabled,readOnly:this.readonly,required:this.required,autofocus:this.autofocus,value:this.singleValue,onInput:this.handleInput,onFocus:this.handleFocus,onBlur:this.handleBlur,"data-scope":"date"}),this.error&&t("nv-icon",{key:"35d06926d78f7c653fbf0424b59802fb4489004a",name:"alert-circle",class:"validation",size:"md"}),this.success&&t("nv-icon",{key:"17ca631dca201fb412c921619223c1abc8777d2b",name:"circle-check",class:"validation",size:"md"}),t("nv-iconbutton",{key:"e08d735115cde3d22a657b986f4a7a5a0347d1af",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:"75cf593c7b9f2078f055522d6e43440dbe0cc522",name:"after-input"})),t("div",{key:"0df8cd2360a17f5cc786e6b29c67ded308c18104",slot:"content"},t("nv-calendar",{key:"045a02370ef9dfe31ae3d0b2f702fafb25c7da8f",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,onValueChanged:this.handleCalendarValueChanged}))),(this.description&&this.description.length>0||this.el.querySelector('[slot="description"]'))&&t("div",{key:"ecedbfe16857d9976349f3f3875be13f9ffc4b53",class:"description"},t("slot",{key:"e848d9e03e169c9ac57ce2fb7cdb00466f658c61",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&t("div",{key:"028b4d496ba3ee5eefa0107da8a62c771709a3ed",hidden:!this.error,class:"error-description"},this.el.querySelector('[slot="error-description"]')?t("slot",{name:"error-description"}):this.errorDescription),t("slot",{key:"d3b79a0ae56ec7eb444c28985b1ffcfd8a4e36a1"}))}get el(){return o(this)}static get watchers(){return{value:["handleValueChange"]}}};l.style=d;export{l as nv_fielddate};
-//# sourceMappingURL=p-516da423.entry.js.map
+import{r as e,c as r,h as t,H as i,g as o}from"./p-d0a33e64.js";import{I as n}from"./p-53aa81dd.js";import{v as a}from"./p-f5ff676c.js";import"./p-0462f723.js";const d='nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range{background:var(--components-slider-track-filled-focus)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb{border-color:var(--components-slider-track-filled-focus)}nv-fieldslider[error] .slider-container .track-container .track .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:hover{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-handler-background-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:focus{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-error)}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;max-width:480px}nv-fielddate[fluid]:not([fluid=false]){max-width:unset}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-in-field)}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 nv-popover .datepicker-container{border:none}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%;font-feature-settings:"tnum";font-family:"TTNorms Pro Mono", monospace}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 input[type=password]::-ms-clear,nv-fielddate .input-wrapper .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}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{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);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{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}';const s=d;const l=class{constructor(t){e(this,t);this.valueChanged=r(this,"valueChanged",7);this.popoverId=a();this.inputId=a();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.fluid=false;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()};this.handleInput=e=>{if(this.readonly||this.disabled){e.preventDefault();return}const r=e.target;this.singleValue=r.value;this.value=r.value;if(this.value===""){this.valueChanged.emit("")}};this.handleFocus=e=>{if(this.readonly||this.disabled){e.preventDefault();e.target.blur();return}this.open=true};this.handleCalendarValueChanged=e=>{e.stopPropagation()};this.setPopoverRef=e=>{this.popoverElement=e};this.setInputRef=e=>{this.inputElement=e};this.toggleCalendar=()=>{if(this.readonly||this.disabled){return}this.open=!this.open}}convertToInputmaskFormat(e){if(!e){return"dd/mm/yyyy"}const r={"DD/MM/YYYY":"dd/mm/yyyy","MM/DD/YYYY":"mm/dd/yyyy","YYYY-MM-DD":"yyyy-mm-dd","DD.MM.YYYY":"dd.mm.yyyy",YYYYMMDD:"yyyymmdd"};return r[e]||"dd/mm/yyyy"}async clear(){this.singleValue="";this.value="";if(this.inputElement){this.inputElement.value="";if(this.inputElement.inputmask){this.inputElement.inputmask.remove()}}this.valueChanged.emit("");this.open=false}updateMask(){var e,r;if(!this.inputElement)return;(r=(e=this.inputElement.inputmask)===null||e===void 0?void 0:e.remove)===null||r===void 0?void 0:r.call(e);const t=new n({alias:"datetime",inputFormat:this.convertToInputmaskFormat(this.dateFormat),placeholder:this.convertToInputmaskFormat(this.dateFormat),clearIncomplete:false,showMaskOnHover:false,showMaskOnFocus:true,clearMaskOnLostFocus:!this.open,postValidation:true,oncomplete:e=>{var r;this.valueChanged.emit((r=e.target)===null||r===void 0?void 0:r.value)}});t.mask(this.inputElement)}connectedCallback(){document.addEventListener("click",this.handleClickOutside)}componentWillLoad(){if(this.value){this.singleValue=this.value}}componentDidLoad(){this.updateMask();if(this.inputElement.name===this.name&&this.singleValue){requestAnimationFrame((()=>{this.inputElement.value=this.singleValue;const e=new CustomEvent("input",{bubbles:true});this.inputElement.dispatchEvent(e)}))}}componentDidRender(){if(this.singleValue&&this.inputElement&&!this.inputElement.value){requestAnimationFrame((()=>{this.inputElement.value=this.singleValue;this.inputElement.setAttribute("value",this.singleValue)}))}}disconnectedCallback(){document.removeEventListener("click",this.handleClickOutside);if(this.inputElement&&this.inputElement.inputmask){this.inputElement.inputmask.remove()}}handleSingleDateChange(e){const r=e.detail;const t=this.value;this.singleValue=r;this.value=r;if(this.inputElement){this.inputElement.value=r}if(t!==r){this.valueChanged.emit(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;if(this.inputElement&&this.inputElement.value!==e){this.inputElement.value=e}}handleOpenChange(){this.updateMask()}render(){return t(i,{key:"e72afd15f69aa6267cc9444e63fae12e4cfcf05b"},(this.label&&this.label.length>0||this.el.querySelector('[slot="label"]'))&&t("label",{key:"bc13c15f74ac4dbe4b326fe479dcd9a6fb20cf40",htmlFor:this.inputId},t("slot",{key:"30ae9788e7768adc9da95e0b89a3f6f7027e625f",name:"label"},this.label)),t("nv-popover",{key:"e043d7b021d1d7ee206d231a1cfc7b4541091ae5",ref:this.setPopoverRef,id:this.popoverId,triggerMode:"controlled",placement:"bottom-start",open:this.open},t("div",{key:"75682a712a8276bc24b285a48ef2312aae9f5097",slot:"trigger",class:"input-wrapper"},t("slot",{key:"17593b316a870a5edbbc50eb4bb9441759309612",name:"before-input"}),t("div",{key:"0eb576fbe4a800ed7e1583810986e5f7f07e175a",class:"input-container",onClick:this.handleInputContainerClick},t("slot",{key:"c058ea07757486cf69621deba85ebbec3b075779",name:"leading-input"}),t("input",{key:"4c31a633358ff96f774a7862507c4c40301062cb",id:this.inputId,ref:this.setInputRef,placeholder:this.placeholder||this.convertToInputmaskFormat(this.dateFormat),name:this.name,disabled:this.disabled,readOnly:this.readonly,required:this.required,autofocus:this.autofocus,onInput:this.handleInput,onFocus:this.handleFocus,"data-scope":"date"}),this.error&&t("nv-icon",{key:"036392f177a0c10f609e7b555c3e7f256cd63962",name:"alert-circle",class:"validation",size:"md"}),this.success&&t("nv-icon",{key:"5a74ecdd55177d8cda55e8afdb05978e23450346",name:"circle-check",class:"validation",size:"md"}),t("nv-iconbutton",{key:"e07f8b69d1810430cffff071d39ca7c72a15ccaf",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:"a84e382a534735adb22741df1751d9c70c050b69",name:"after-input"})),t("div",{key:"29a3ca7ed69a772497590595fc82a78fddf0c32a",slot:"content"},t("nv-calendar",{key:"6797dab38dba23f7396aadcbf5281aefdabd891f",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,onValueChanged:this.handleCalendarValueChanged}))),(this.description&&this.description.length>0||this.el.querySelector('[slot="description"]'))&&t("div",{key:"1799cd4dc4f6ca4b520277c080574af089816a9b",class:"description"},t("slot",{key:"eb2d9ac73687786e589f5a90791763f4465d1d20",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&t("div",{key:"7c25fc8369b6bc948d7b233eb5b58451b02cbc62",hidden:!this.error,class:"error-description"},this.el.querySelector('[slot="error-description"]')?t("slot",{name:"error-description"}):this.errorDescription),t("slot",{key:"1499ea51b0e2d283037bf71aae6da242839c0e49"}))}get el(){return o(this)}static get watchers(){return{value:["handleValueChange"],open:["handleOpenChange"]}}};l.style=s;export{l as nv_fielddate};
+//# sourceMappingURL=p-9ea3d30d.entry.js.map

package/dist/native/p-9ea3d30d.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","fluid","handleClickOutside","event","el","contains","target","handleInputContainerClick","preventDefault","stopPropagation","inputElement","focus","handleInput","input","valueChanged","emit","handleFocus","blur","handleCalendarValueChanged","setPopoverRef","popoverElement","setInputRef","toggleCalendar","convertToInputmaskFormat","format","formatMap","YYYYMMDD","clear","inputmask","remove","updateMask","_b","_a","call","inputMask","Inputmask","alias","inputFormat","placeholder","clearIncomplete","showMaskOnHover","showMaskOnFocus","clearMaskOnLostFocus","postValidation","oncomplete","e","mask","connectedCallback","document","addEventListener","componentWillLoad","componentDidLoad","name","requestAnimationFrame","CustomEvent","bubbles","dispatchEvent","componentDidRender","setAttribute","disconnectedCallback","removeEventListener","handleSingleDateChange","detail","previousValue","handleClosePopover","handleKeyDown","key","console","warn","handleValueChange","newValue","handleOpenChange","render","h","Host","label","length","querySelector","htmlFor","ref","id","triggerMode","placement","slot","class","onClick","readOnly","onInput","onFocus","size","emphasis","toString","tabIndex","shortcuts","showWeekNumbers","disabledDates","onValueChanged","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  &[fluid]:not([fluid=\"false\"]) {\n    @include form-field-fluid();\n  }\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    .datepicker-container {\n        border: none\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        font-feature-settings: 'tnum';\n        font-family: \"TTNorms Pro Mono\", monospace;\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  Method,\n} from '@stencil/core';\nimport Inputmask from 'inputmask';\nimport { v4 as uuidv4 } from 'uuid';\n\n/**\n * Extends HTMLInputElement to include the inputmask property.\n */\ninterface HTMLInputElementWithInputmask extends HTMLInputElement {\n  /**\n   * The inputmask instance that provides masking functionality.\n   */\n  inputmask?: {\n    /**\n     * Removes the inputmask instance.\n     */\n    remove?: () => void;\n  };\n}\n\n/**\n * A field date component that combines an input with a calendar popover.\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   * @bind value\n   */\n  @Prop({ reflect: true, mutable: true })\n  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   */\n  @Prop({ reflect: true })\n  readonly shortcuts: HTMLNvCalendarElement['shortcuts'];\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   */\n  @Prop({ reflect: true })\n  readonly disabledDates: Array<string>;\n\n  /**\n   * Allows the field to stretch and fill the entire width of its container.\n   */\n  @Prop({ reflect: true })\n  readonly fluid: boolean = false;\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    // If the format is not specified, use the default format\n    if (!format) {\n      return 'dd/mm/yyyy';\n    }\n\n    const formatMap = {\n      'DD/MM/YYYY': 'dd/mm/yyyy',\n      'MM/DD/YYYY': 'mm/dd/yyyy',\n      'YYYY-MM-DD': 'yyyy-mm-dd',\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 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  };\n\n  /**\n   * Handles the input event on the input element.\n   * Updates the singleValue and emits the valueChanged event if empty.\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.value = input.value;\n\n    if (this.value === '') {\n      this.valueChanged.emit('');\n    }\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    this.open = true;\n  };\n\n  /**\n   * Prevents the valueChanged event from the calendar from propagating up.\n   * @param {CustomEvent} event - The valueChanged event from nv-calendar.\n   */\n  private handleCalendarValueChanged = (event: CustomEvent) => {\n    event.stopPropagation();\n  };\n\n  /**\n   * Sets the reference to the popover element.\n   * @param {HTMLNvPopoverElement} el - The popover element.\n   */\n  private setPopoverRef = (el: HTMLNvPopoverElement) => {\n    this.popoverElement = el;\n  };\n\n  /**\n   * Sets the reference to the input element.\n   * @param {HTMLInputElement} el - The input element.\n   */\n  private setInputRef = (el: HTMLInputElement) => {\n    this.inputElement = el;\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   * Clears the current selection and resets the field to its initial state.\n   * This method can be called programmatically to reset the field.\n   */\n  @Method()\n  async clear(): Promise<void> {\n    // Reset internal state\n    this.singleValue = '';\n    this.value = '';\n\n    // Reset the input element value\n    if (this.inputElement) {\n      this.inputElement.value = '';\n      // Remove the input mask and reinitialize if needed\n      if ((this.inputElement as HTMLInputElementWithInputmask).inputmask) {\n        (this.inputElement as HTMLInputElementWithInputmask).inputmask.remove();\n      }\n    }\n\n    // Emit events to notify about the change\n    this.valueChanged.emit('');\n\n    // Close the popover if open\n    this.open = false;\n  }\n\n  private updateMask() {\n    if (!this.inputElement) return;\n    (this.inputElement as HTMLInputElementWithInputmask).inputmask?.remove?.();\n\n    const inputMask = new Inputmask({\n      alias: 'datetime',\n      inputFormat: this.convertToInputmaskFormat(this.dateFormat),\n      placeholder: this.convertToInputmaskFormat(this.dateFormat),\n      clearIncomplete: false,\n      showMaskOnHover: false,\n      showMaskOnFocus: true,\n      clearMaskOnLostFocus: !this.open,\n      postValidation: true,\n      oncomplete: (e: CustomEvent) => {\n        this.valueChanged.emit((e.target as HTMLInputElement)?.value);\n      },\n    });\n    inputMask.mask(this.inputElement);\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    this.updateMask();\n\n    // Set the initial value after applying the mask\n    if (this.inputElement.name === this.name && this.singleValue) {\n      requestAnimationFrame(() => {\n        this.inputElement.value = this.singleValue;\n        const event = new CustomEvent('input', { bubbles: true });\n        this.inputElement.dispatchEvent(event);\n      });\n    }\n  }\n\n  componentDidRender() {\n    // Only set value on initial render when there's no existing value in the input\n    if (this.singleValue && this.inputElement && !this.inputElement.value) {\n      requestAnimationFrame(() => {\n        this.inputElement.value = this.singleValue;\n        this.inputElement.setAttribute('value', this.singleValue);\n      });\n    }\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('click', this.handleClickOutside);\n    if (\n      this.inputElement &&\n      (this.inputElement as HTMLInputElementWithInputmask).inputmask\n    ) {\n      (this.inputElement as HTMLInputElementWithInputmask).inputmask.remove();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the value changes (unified value binding).\n   * @bind value\n   */\n  @Event()\n  valueChanged: EventEmitter<string>;\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    const previousValue = this.value;\n    this.singleValue = value;\n    this.value = value;\n\n    // Set the input value directly when calendar is used\n    if (this.inputElement) {\n      this.inputElement.value = value;\n    }\n\n    // Only emit valueChanged if the value actually changed\n    if (previousValue !== value) {\n      this.valueChanged.emit(value);\n    }\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    // Only set input value if it's different from current input value\n    // This prevents interfering with user typing\n    if (this.inputElement && this.inputElement.value !== newValue) {\n      this.inputElement.value = newValue;\n    }\n  }\n\n  @Watch('open')\n  handleOpenChange() {\n    this.updateMask();\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={this.setPopoverRef}\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={this.setInputRef}\n                placeholder={\n                  this.placeholder ||\n                  this.convertToInputmaskFormat(this.dateFormat)\n                }\n                name={this.name}\n                disabled={this.disabled}\n                readOnly={this.readonly}\n                required={this.required}\n                autofocus={this.autofocus}\n                onInput={this.handleInput}\n                onFocus={this.handleFocus}\n                data-scope=\"date\"\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              <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              onValueChanged={this.handleCalendarValueChanged}\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/types/components/nv-fielddate/nv-fielddate.d.ts

@@ -74,10 +74,6 @@ export declare class NvFielddate {
      * The current value of the input date in string format.
      */
     singleValue: string;
-    /**
-     * The placeholder to display in the input.
-     */
-    currentPlaceholder: string;
     /**
      * Controls the opening of the popover.
      */
@@ -156,29 +152,15 @@ export declare class NvFielddate {
     private handleInputContainerClick;
     /**
      * Handles the input event on the input element.
-     * Updates the singleValue and emits the valueChanged event.
+     * Updates the singleValue and emits the valueChanged event if empty.
      * @param {Event} event - The input event.
      */
     private handleInput;
-    /**
-     * Initializes the input mask.
-     */
-    private initializeInputMask;
-    /**
-     * Handles keydown events on the input before the mask is initialized.
-     * Initializes the mask on the first number input.
-     * @param {KeyboardEvent} event - The keyboard event.
-     */
-    private handleKeydownBeforeMask;
     /**
      * Handles focus events on the input element.
      * @param {FocusEvent} event - The focus event.
      */
     private handleFocus;
-    /**
-     * Handles blur events on the input element.
-     */
-    private handleBlur;
     /**
      * Prevents the valueChanged event from the calendar from propagating up.
      * @param {CustomEvent} event - The valueChanged event from nv-calendar.
@@ -203,10 +185,12 @@ export declare class NvFielddate {
      * This method can be called programmatically to reset the field.
      */
     clear(): Promise<void>;
+    private updateMask;
     /****************************************************************************/
     connectedCallback(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
+    componentDidRender(): void;
     disconnectedCallback(): void;
     /****************************************************************************/
     /**
@@ -223,6 +207,7 @@ export declare class NvFielddate {
     handleClosePopover(): void;
     handleKeyDown(event: KeyboardEvent): void;
     handleValueChange(newValue: string): void;
+    handleOpenChange(): void;
     /****************************************************************************/
     render(): any;
 }

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

@@ -190,6 +190,7 @@ export declare class NvFielddaterange {
      * This method can be called programmatically to reset the field.
      */
     clear(): Promise<void>;
+    private updateMask;
     /****************************************************************************/
     connectedCallback(): void;
     componentWillLoad(): void;