@nova-design-system/nova-webcomponents 3.18.0 → 3.20.0

package/dist/native/{p-ca39f78d.entry.js → p-d62869ff.entry.js}

@@ -1,2 +1,2 @@
-import{r as o,h as t,H as e,g as n}from"./p-3060df80.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:var(--font-weight-medium-emphasis);font-family:var(--font-family-default), var(--font-family-fallback), 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:"4cda6f8b0c762c08964c5a4a882331d84eaa4514",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:"f433d942bad470a376ef8164e73b7025d15bd39e",size:this.size}),!this.loading&&t("nv-icon",{key:"1ceebfa6b5907dac279efff65a0f6d977d062453",name:this.name,size:this.size}),t("slot",{key:"d7f882e9c8dc0fcdb1bbb9ff783f7d387036d043"}))}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:"4692310e37f31424602a1592cb0648e9bf95a609",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-ca39f78d.entry.js.map
+import{r as o,h as t,H as e,g as n}from"./p-3060df80.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:var(--font-weight-medium-emphasis);font-family:var(--font-family-default), var(--font-family-fallback), 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:"5590d5f6378669a2f74ce93d33ac14c86f435523",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:"f88ed8a8b579d15318f419c8072a4c14e56990ce",size:this.size}),!this.loading&&t("nv-icon",{key:"12b3fc9818014ea93237e8037ce2d90ee214517a",name:this.name,size:this.size}),t("slot",{key:"97e130b7caf544954f3168866429ed7633e46301"}))}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:"b90db971210fb08781098cefaf8832bd5692a09e",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-d62869ff.entry.js.map

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

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as r,H as i,g as n}from"./p-3060df80.js";import{I as a}from"./p-53aa81dd.js";import{v as o}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-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;max-width:480px}nv-fielddaterange[fluid]:not([fluid=false]){max-width:unset}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-in-field)}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:var(--font-weight-high-emphasis)}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:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);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;z-index:2}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}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: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{box-shadow:none;border-color:var(--nv-field-border-default)}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:var(--font-weight-medium-emphasis);line-height:var(--form-field-line-height);width:100%;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:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--form-field-line-height)}nv-fielddaterange .input-wrapper .input-container input[type=password]::-ms-clear,nv-fielddaterange .input-wrapper .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fielddaterange .input-wrapper .input-container input:focus-within,nv-fielddaterange .input-wrapper .input-container input:focus-within:hover,nv-fielddaterange .input-wrapper .input-container input:focus,nv-fielddaterange .input-wrapper .input-container input:focus:hover{outline:var(--focus-outline-stroke) solid var(--nv-field-border-focus);outline-offset:0px}nv-fielddaterange .input-wrapper .input-container input:focus-within~.range-separator,nv-fielddaterange .input-wrapper .input-container input:focus-within:hover~.range-separator,nv-fielddaterange .input-wrapper .input-container input:focus~.range-separator,nv-fielddaterange .input-wrapper .input-container input:focus:hover~.range-separator{background-color:transparent}nv-fielddaterange .input-wrapper .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fielddaterange .input-wrapper .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fielddaterange .input-wrapper .input-container>nv-iconbutton:last-of-type{border-top-right-radius:var(--form-field-radius);border-bottom-right-radius:var(--form-field-radius)}nv-fielddaterange .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddaterange .description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fielddaterange .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), 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:0;width:100%}nv-fielddaterange .range-inputs:focus-within{z-index: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}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)}nv-fielddaterange .range-inputs .range-separator{width:1px;height:1.5rem;background-color:var(--color-content-medium-border)}';const d=s;const l=class{constructor(r){e(this,r);this.dateRangeChange=t(this,"dateRangeChange",7);this.valueChanged=t(this,"valueChanged",7);this.popoverId=o();this.startInputId=o();this.endInputId=o();this.disabled=false;this.readonly=false;this.required=false;this.error=false;this.success=false;this.autofocus=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.fluid=false;this.parseUnifiedValue=e=>{if(!e){this.startValue="";this.endValue="";return}const t=e.split(",").map((e=>e.trim())).filter(Boolean);if(t.length>=2){this.startValue=t[0];this.endValue=t[1]}};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;if(this.calendarElement&&t.value){this.calendarElement.removeAttribute("data-prevent-navigation");const e=`${t.value},${this.endValue}`;if(this.calendarElement.value!==e){this.calendarElement.value=e}setTimeout((()=>{if(this.calendarElement){this.calendarElement.setAttribute("data-prevent-navigation","true")}}),100)}};this.handleEndInput=e=>{if(this.readonly||this.disabled){e.preventDefault();return}const t=e.target;this.endValue=t.value;if(this.calendarElement&&t.value){this.calendarElement.removeAttribute("data-prevent-navigation");const e=`${this.startValue},${t.value}`;if(this.calendarElement.value!==e){this.calendarElement.value=e}setTimeout((()=>{if(this.calendarElement){this.calendarElement.setAttribute("data-prevent-navigation","true")}}),100)}};this.handleFocus=e=>{if(this.readonly||this.disabled){e.preventDefault();e.target.blur();return}if(this.calendarElement){this.calendarElement.removeAttribute("data-prevent-navigation")}this.open=true;setTimeout((()=>{if(this.calendarElement){this.calendarElement.setAttribute("data-prevent-navigation","true")}}),300)};this.toggleCalendar=e=>{if(this.readonly||this.disabled){return}e.stopPropagation();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"}async clear(){this.startValue="";this.endValue="";this.value="";const e=this.el.querySelectorAll(".input-wrapper input");e.forEach((e=>{e.value="";if(e.inputmask){e.inputmask.remove()}}));this.valueChanged.emit("");this.dateRangeChange.emit({start:"",end:""});this.open=false;if(this.calendarElement){this.calendarElement.clear()}}updateMask(){const e=this.el.querySelectorAll(".input-wrapper input");e.forEach((e=>{var t,r;(r=(t=e.inputmask)===null||t===void 0?void 0:t.remove)===null||r===void 0?void 0:r.call(t);const i=new a({alias:"datetime",inputFormat:this.convertToInputmaskFormat(this.dateFormat),placeholder:this.convertToInputmaskFormat(this.dateFormat),clearIncomplete:false,showMaskOnHover:false,showMaskOnFocus:true,clearMaskOnLostFocus:!this.open,postValidation:true,oncleared:e=>{const t=e.target;if(t.id===this.startInputId){this.startValue=""}if(t.id===this.endInputId){this.endValue=""}},oncomplete:e=>{const t=e.target;if(t.id===this.startInputId){this.startValue=t.value}else if(t.id===this.endInputId){this.endValue=t.value}const r=`${this.startValue},${this.endValue}`;if(this.startValue&&this.endValue&&this.value!==r){this.value=r;this.valueChanged.emit(this.value);this.dateRangeChange.emit({start:this.startValue,end:this.endValue})}}});i.mask(e)}))}connectedCallback(){document.addEventListener("click",this.handleClickOutside)}componentWillLoad(){if(this.value){this.parseUnifiedValue(this.value)}}componentDidLoad(){this.updateMask();const e=this.el.querySelectorAll(".input-wrapper input");e.forEach((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){e.stopPropagation();const{start:t,end:r}=e.detail||{};if(t&&r){this.startValue=t;this.endValue=r;const e=`${t},${r}`;if(this.value!==e){this.value=e;this.valueChanged.emit(this.value)}this.dateRangeChange.emit({start:this.startValue,end:this.endValue});if(!this.showActions){this.open=false}}}handleCalendarValueChanged(e){if(e.target===this.el){return}e.stopPropagation();const t=e.detail||"";if(t!==this.value){this.value=t;this.valueChanged.emit(t);this.parseUnifiedValue(t);this.dateRangeChange.emit({start:this.startValue,end:this.endValue})}}handleClosePopover(){this.open=false}handleApplyDateRange(){this.open=false}handleDateReset(e){const t=e.type==="singleDateChange"&&e.detail==="";const r=e.type==="rangeDateChange"&&e.detail&&e.detail.start===""&&e.detail.end==="";if(t||r){this.startValue="";this.endValue="";this.value="";this.valueChanged.emit("");const e=this.el.querySelectorAll(".input-wrapper input");e.forEach((e=>{e.value=""}));this.dateRangeChange.emit({start:"",end:""})}}handleKeyDown(e){if(e.key==="Escape"){this.open=false;return}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){this.parseUnifiedValue(e)}onOpenChanged(e){this.updateMask();if(this.contentRef){if(e){this.contentRef.style.transition="none";this.contentRef.style.maxHeight="0px";requestAnimationFrame((()=>{this.contentRef.style.transition="max-height 0.18s cubic-bezier(0.4,0,0.2,1)";this.contentRef.style.maxHeight=this.contentRef.scrollHeight+"px"}))}else{this.contentRef.style.transition="none";this.contentRef.style.maxHeight=this.contentRef.scrollHeight+"px";requestAnimationFrame((()=>{this.contentRef.style.transition="max-height 0.18s cubic-bezier(0.4,0,0.2,1)";this.contentRef.style.maxHeight="0px"}))}}}render(){return r(i,{key:"091fcbf743d63bce095fe2f0dfe2c3b62eb27691"},(this.label&&this.label.length>0||this.el.querySelector('[slot="label"]'))&&r("label",{key:"6566223deb5070b16724fdffa5223f3142abe8a8",htmlFor:this.startInputId},r("slot",{key:"e26f1c52a4c9326506752679a8cca1952a7a16cc",name:"label"},this.label)),r("nv-popover",{key:"f88e0162e05a5267fe79edfce881302959324d0c",ref:e=>this.popoverElement=e,id:this.popoverId,triggerMode:"controlled",placement:"bottom-start",strategy:"fixed",open:this.open},r("div",{key:"9891bd8f655bb197937a4cb749ae6aab04dd7d03",slot:"trigger",class:"input-wrapper"},r("slot",{key:"501373a4a2cd17a8ff0e51f8bb6bd7812686d96f",name:"before-input"}),r("div",{key:"67586c4999a0f5eb7261486162be293ad3a7af88",class:"input-container"},r("slot",{key:"6f47145fe7a8de22311e5bbf7dbda3f9ad3a7516",name:"leading-input"}),r("div",{key:"e3d5a24a8874709ef4ee2075934824664817e23c",class:"range-inputs"},r("input",{key:"15d3ff16f47fe17b72a697e9155cc448253fd9e2",id:this.startInputId,type:"text",placeholder:this.startPlaceholder||this.convertToInputmaskFormat(this.dateFormat),name:this.startName,disabled:this.disabled,readOnly:this.readonly,required:this.required,autofocus:this.autofocus,value:this.startValue,onInput:this.handleStartInput,onFocus:this.handleFocus,"data-scope":"date-range"}),r("div",{key:"f5401156bcf4f3815bab6151446f0d610c15fdd4",class:"range-separator"}),r("input",{key:"0c00bf69390ff60d14cdbaea4bb50ef0b2bad4f6",id:this.endInputId,type:"text",placeholder:this.endPlaceholder||this.convertToInputmaskFormat(this.dateFormat),name:this.endName,disabled:this.disabled,readOnly:this.readonly,required:this.required,value:this.endValue,onInput:this.handleEndInput,onFocus:this.handleFocus,"data-scope":"date-range"})),this.error&&r("nv-icon",{key:"12edaf5750b1859bcf2760a5879e2c95587d56fd",name:"alert-circle",class:"validation",size:"md"}),this.success&&r("nv-icon",{key:"f5022132ee6771922e84d942764516c9e1beb539",name:"circle-check",class:"validation",size:"md"}),r("nv-iconbutton",{key:"8938c06c316d7fdae873d7ee0f967d56c70824a1",class:"toggle-calendar-icon",name:"calendar",size:"md",emphasis:"lower","aria-label":this.open?"Hide calendar":"Show calendar",onClick:this.toggleCalendar,tabIndex:this.disabled?-1:0})),r("slot",{key:"9915b8477bc690f3137b5a9aa6d1b05e7836a951",name:"after-input"})),r("div",{key:"6068c57cf56b056ff5420923864a94472dbac32a",slot:"content"},r("nv-calendar",{key:"8dd945abd1a9f16f38474fa091dfb8d4919887a0",ref:e=>this.calendarElement=e,dateFormat:this.dateFormat,value:this.value,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","data-prevent-navigation":"true"}))),(this.description&&this.description.length>0||this.el.querySelector('[slot="description"]'))&&r("div",{key:"7ef39c67687d0bd02e3f7df90a3d219961074602",class:"description"},r("slot",{key:"8d7a226adcf892da6851406d45c18dfcb2a7f9c7",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&r("div",{key:"23ed909597234f6dde3ace8de00b891e9b6ac862",hidden:!this.error,class:"error-description"},this.el.querySelector('[slot="error-description"]')?r("slot",{name:"error-description"}):this.errorDescription),r("slot",{key:"34d6bf60a2dab0d3f167ae775e3a43997ae2fa42"}))}get el(){return n(this)}static get watchers(){return{value:["handleValueChange"],open:["onOpenChanged"]}}};l.style=d;export{l as nv_fielddaterange};
+//# sourceMappingURL=p-d63689da.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["nvFielddaterangeCss","NvFielddaterangeStyle0","NvFielddaterange","constructor","hostRef","this","popoverId","uuidv4","startInputId","endInputId","disabled","readonly","required","error","success","autofocus","value","startValue","endValue","open","firstDayOfWeek","numberOfCalendars","min","max","locale","dateFormat","shortcutsPlacement","showActions","fluid","parseUnifiedValue","values","split","map","v","trim","filter","Boolean","length","handleClickOutside","event","el","contains","target","handleStartInput","preventDefault","input","calendarElement","removeAttribute","currentValue","setTimeout","setAttribute","handleEndInput","handleFocus","blur","toggleCalendar","stopPropagation","convertToInputmaskFormat","format","formatMap","YYYYMMDD","clear","inputs","querySelectorAll","forEach","inputmask","remove","valueChanged","emit","dateRangeChange","start","end","updateMask","_b","_a","call","inputMask","Inputmask","alias","inputFormat","placeholder","clearIncomplete","showMaskOnHover","showMaskOnFocus","clearMaskOnLostFocus","postValidation","oncleared","e","id","oncomplete","newValue","mask","connectedCallback","document","addEventListener","componentWillLoad","componentDidLoad","name","startName","requestAnimationFrame","CustomEvent","bubbles","dispatchEvent","endName","componentDidRender","disconnectedCallback","removeEventListener","handleRangeDateChange","detail","handleCalendarValueChanged","handleClosePopover","handleApplyDateRange","handleDateReset","isResetSingle","type","isResetRange","handleKeyDown","key","popoverElement","console","warn","handleValueChange","onOpenChanged","contentRef","style","transition","maxHeight","scrollHeight","render","h","Host","label","querySelector","htmlFor","ref","triggerMode","placement","strategy","slot","class","startPlaceholder","readOnly","onInput","onFocus","endPlaceholder","size","emphasis","onClick","tabIndex","shortcuts","showWeekNumbers","disabledDates","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@import './mixins';\n\nnv-fielddaterange {\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      z-index: 2;\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      &:focus-within,\n      &:focus-within:hover,\n      &:focus,\n      &:focus:hover {\n        box-shadow: none;\n        border-color: var(--nv-field-border-default);\n      }\n\n      input {\n        @include form-field-input();\n        width: 100%;\n        &:focus-within,\n        &:focus-within:hover,\n        &:focus,\n        &:focus:hover {\n          outline: var(--focus-outline-stroke) solid var(--nv-field-border-focus);\n          outline-offset: 0px;\n          & ~ .range-separator {\n            background-color: transparent;\n          }\n        }\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  .range-inputs {\n    display: flex;\n    align-items: center;\n    gap: 0;\n    width: 100%;\n    &:focus-within {\n      z-index: 1;\n    }\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\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    .range-separator {\n      @include range-separator();\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  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 * @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 calendarElement!: HTMLNvCalendarElement;\n  private popoverId: string = uuidv4();\n  private contentRef?: HTMLDivElement;\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  // eslint-disable-next-line @stencil-community/reserved-member-names\n  readonly autofocus: boolean = false;\n\n  /**\n   * The initial value of the date range (in string format).\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable\n  @Prop({ reflect: true, mutable: true })\n  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   */\n  @Prop({ reflect: true })\n  readonly shortcuts: HTMLNvCalendarElement['shortcuts'];\n\n  /**\n   * Show week numbers\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   * Parses the unified value prop and synchronizes with internal state\n   * @param {string} value - Value to parse\n   */\n  private parseUnifiedValue = (value: string): void => {\n    if (!value) {\n      // Reset all selections\n      this.startValue = '';\n      this.endValue = '';\n      return;\n    }\n\n    const values = value\n      .split(',')\n      .map(v => v.trim())\n      .filter(Boolean);\n\n    if (values.length >= 2) {\n      this.startValue = values[0];\n      this.endValue = values[1];\n    }\n  };\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    // If the format is not specified, use the default format YYYY-MM-DD\n    if (!format) {\n      return 'dd/mm/yyyy';\n    }\n\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   * Updates internal state and calendar navigation without emitting events.\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\n    // Always update startValue to keep state in sync\n    this.startValue = input.value;\n\n    // Update calendar value for navigation (without triggering events)\n    if (this.calendarElement && input.value) {\n      // Temporarily enable navigation for keyboard input\n      this.calendarElement.removeAttribute('data-prevent-navigation');\n\n      // Update calendar's rangeValue to allow navigation\n      const currentValue = `${input.value},${this.endValue}`;\n      if (this.calendarElement.value !== currentValue) {\n        this.calendarElement.value = currentValue;\n      }\n\n      // Restore navigation prevention after update\n      setTimeout(() => {\n        if (this.calendarElement) {\n          this.calendarElement.setAttribute('data-prevent-navigation', 'true');\n        }\n      }, 100);\n    }\n  };\n\n  /**\n   * Handles the input event on the end input element.\n   * Updates internal state and calendar navigation without emitting events.\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\n    // Always update endValue to keep state in sync\n    this.endValue = input.value;\n\n    // Update calendar value for navigation (without triggering events)\n    if (this.calendarElement && input.value) {\n      // Temporarily enable navigation for keyboard input\n      this.calendarElement.removeAttribute('data-prevent-navigation');\n\n      // Update calendar's rangeValue to allow navigation\n      const currentValue = `${this.startValue},${input.value}`;\n      if (this.calendarElement.value !== currentValue) {\n        this.calendarElement.value = currentValue;\n      }\n\n      // Restore navigation prevention after update\n      setTimeout(() => {\n        if (this.calendarElement) {\n          this.calendarElement.setAttribute('data-prevent-navigation', 'true');\n        }\n      }, 100);\n    }\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    // Enable navigation on focus\n    if (this.calendarElement) {\n      this.calendarElement.removeAttribute('data-prevent-navigation');\n    }\n\n    this.open = true;\n\n    // Restore navigation prevention after opening\n    setTimeout(() => {\n      if (this.calendarElement) {\n        this.calendarElement.setAttribute('data-prevent-navigation', 'true');\n      }\n    }, 300);\n  };\n\n  /**\n   * Toggles the opening/closing of the popover.\n   * @param {MouseEvent} event - The click event.\n   */\n  private toggleCalendar = (event: MouseEvent) => {\n    if (this.readonly || this.disabled) {\n      return;\n    }\n    // Stop propagation to prevent closing parent dialogs\n    event.stopPropagation();\n    this.open = !this.open;\n  };\n\n  /**\n   * Clears the current selection and resets the date range 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.startValue = '';\n    this.endValue = '';\n    this.value = '';\n\n    // Reset both input elements\n    const inputs = this.el.querySelectorAll('.input-wrapper input');\n    inputs.forEach((input: HTMLInputElement) => {\n      input.value = '';\n      // Remove input mask if exists\n      if ((input as HTMLInputElementWithInputmask).inputmask) {\n        (input as HTMLInputElementWithInputmask).inputmask.remove();\n      }\n    });\n\n    // Emit events to notify about the change\n    this.valueChanged.emit('');\n    this.dateRangeChange.emit({ start: '', end: '' });\n\n    // Close the popover if open\n    this.open = false;\n\n    // Clear the calendar if it exists\n    if (this.calendarElement) {\n      this.calendarElement.clear();\n    }\n  }\n\n  private updateMask() {\n    const inputs = this.el.querySelectorAll('.input-wrapper input');\n    inputs.forEach((input: HTMLInputElement) => {\n      (input 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        oncleared: (e: CustomEvent) => {\n          const input = e.target as HTMLInputElement;\n          if (input.id === this.startInputId) {\n            this.startValue = '';\n          }\n          if (input.id === this.endInputId) {\n            this.endValue = '';\n          }\n        },\n        oncomplete: (e: CustomEvent) => {\n          const input = e.target as HTMLInputElement;\n\n          // Update the corresponding state based on which input completed\n          if (input.id === this.startInputId) {\n            this.startValue = input.value;\n          } else if (input.id === this.endInputId) {\n            this.endValue = input.value;\n          }\n\n          // Update unified value\n          const newValue = `${this.startValue},${this.endValue}`;\n\n          // Only emit if both dates are filled and value changed\n          if (this.startValue && this.endValue && this.value !== newValue) {\n            this.value = newValue;\n            this.valueChanged.emit(this.value);\n\n            // Legacy support (deprecated)\n            this.dateRangeChange.emit({\n              start: this.startValue,\n              end: this.endValue,\n            });\n          }\n        },\n      });\n      inputMask.mask(input);\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      // Use the unified parsing method\n      this.parseUnifiedValue(this.value);\n    }\n  }\n\n  componentDidLoad() {\n    this.updateMask();\n\n    const inputs = this.el.querySelectorAll('.input-wrapper input');\n    inputs.forEach((input: HTMLInputElement) => {\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   * Emitted when the date range changes.\n   */\n  @Event()\n  dateRangeChange: EventEmitter<\n    HTMLNvCalendarElementEventMap['rangeDateChange']\n  >;\n\n  /**\n   * Emitted when the unified value changes\n   * @bind value\n   */\n  @Event()\n  valueChanged: EventEmitter<string>;\n\n  /**\n   * Handles the range date selection event from nv-calendar.\n   * Stops propagation to prevent duplicate events with handleCalendarValueChanged.\n   * @param {CustomEvent<DateRange>} event - The custom event\n   */\n  @Listen('rangeDateChange')\n  handleRangeDateChange(\n    event: CustomEvent<HTMLNvCalendarElementEventMap['rangeDateChange']>,\n  ) {\n    // Stop propagation to prevent this from being handled by handleCalendarValueChanged\n    event.stopPropagation();\n\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\n      // Update unified value prop (like nv-calendar)\n      const newValue = `${start},${end}`;\n      if (this.value !== newValue) {\n        this.value = newValue;\n        this.valueChanged.emit(this.value);\n      }\n\n      // Legacy support (deprecated)\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  /**\n   * Handles the unified value change event from nv-calendar\n   * Note: This might not be called if rangeDateChange stops propagation first.\n   * @param {CustomEvent<string>} event - The custom event\n   */\n  @Listen('valueChanged')\n  handleCalendarValueChanged(event: CustomEvent<string>) {\n    // Only handle events from the calendar, not from self\n    if (event.target === this.el) {\n      return;\n    }\n\n    // Stop propagation to prevent parent components from receiving calendar events\n    event.stopPropagation();\n\n    const newValue = event.detail || '';\n\n    if (newValue !== this.value) {\n      this.value = newValue;\n      this.valueChanged.emit(newValue);\n\n      // Parse and update internal state\n      this.parseUnifiedValue(newValue);\n\n      // Legacy support - emit dateRangeChange\n      this.dateRangeChange.emit({\n        start: this.startValue,\n        end: this.endValue,\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 the reset event from the calendar's cancel button\n   * @param {CustomEvent} event - The event emitted by the calendar\n   */\n  @Listen('singleDateChange')\n  @Listen('rangeDateChange')\n  handleDateReset(event: CustomEvent) {\n    const isResetSingle =\n      event.type === 'singleDateChange' && event.detail === '';\n    const isResetRange =\n      event.type === 'rangeDateChange' &&\n      event.detail &&\n      event.detail.start === '' &&\n      event.detail.end === '';\n\n    if (isResetSingle || isResetRange) {\n      this.startValue = '';\n      this.endValue = '';\n\n      // Update unified value prop\n      this.value = '';\n      this.valueChanged.emit('');\n\n      const inputs = this.el.querySelectorAll('.input-wrapper input');\n      inputs.forEach((input: HTMLInputElement) => {\n        input.value = '';\n      });\n\n      // Legacy support (deprecated)\n      this.dateRangeChange.emit({ start: '', end: '' });\n    }\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 (event.key === 'Escape') {\n      this.open = false;\n      return;\n    }\n\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    // Use the unified parsing method instead of JSON.parse\n    this.parseUnifiedValue(newValue);\n  }\n\n  @Watch('open')\n  onOpenChanged(newValue: boolean) {\n    this.updateMask();\n    if (this.contentRef) {\n      if (newValue) {\n        this.contentRef.style.transition = 'none';\n        this.contentRef.style.maxHeight = '0px';\n        void this.contentRef.offsetHeight;\n        requestAnimationFrame(() => {\n          this.contentRef.style.transition =\n            'max-height 0.18s cubic-bezier(0.4,0,0.2,1)';\n          this.contentRef.style.maxHeight = this.contentRef.scrollHeight + 'px';\n        });\n      } else {\n        this.contentRef.style.transition = 'none';\n        this.contentRef.style.maxHeight = this.contentRef.scrollHeight + 'px';\n        void this.contentRef.offsetHeight;\n        requestAnimationFrame(() => {\n          this.contentRef.style.transition =\n            'max-height 0.18s cubic-bezier(0.4,0,0.2,1)';\n          this.contentRef.style.maxHeight = '0px';\n        });\n      }\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          strategy=\"fixed\"\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={\n                    this.startPlaceholder ||\n                    this.convertToInputmaskFormat(this.dateFormat)\n                  }\n                  name={this.startName}\n                  disabled={this.disabled}\n                  readOnly={this.readonly}\n                  required={this.required}\n                  autofocus={this.autofocus}\n                  value={this.startValue}\n                  onInput={this.handleStartInput}\n                  onFocus={this.handleFocus}\n                  data-scope=\"date-range\"\n                />\n\n                <div class=\"range-separator\"></div>\n\n                <input\n                  id={this.endInputId}\n                  type=\"text\"\n                  placeholder={\n                    this.endPlaceholder ||\n                    this.convertToInputmaskFormat(this.dateFormat)\n                  }\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                  data-scope=\"date-range\"\n                />\n              </div>\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\"\n                size=\"md\"\n                emphasis=\"lower\"\n                aria-label={this.open ? 'Hide calendar' : 'Show calendar'}\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              ref={el => (this.calendarElement = el as HTMLNvCalendarElement)}\n              dateFormat={this.dateFormat}\n              value={this.value}\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              data-prevent-navigation=\"true\"\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":[]}