@nova-design-system/nova-webcomponents 3.1.0 → 3.3.0

package/dist/esm/nv-datagridcolumn.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as Host } from './index-1fb7a9a6.js';
+import { r as registerInstance, h, H as Host } from './index-a1936cd0.js';
 
 const NvDatagridcolumn = class {
     constructor(hostRef) {
@@ -12,7 +12,7 @@ const NvDatagridcolumn = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '20839d4a0abfa07e55a49b434ad26e3ddaebb66b' }, h("slot", { key: '2c1b24aef73e9be8e500d48741e4dc6a42ed6f06', name: "header" }), h("slot", { key: 'cbc4bcbb080f8647c6f702e4a52411fe9be1f6ca', name: "cell" })));
+        return (h(Host, { key: 'daa7b24c99857d7467f0a5ce0b69dcbeb42577e7' }, h("slot", { key: '8c2fe1f1b806322cdf1c89b9243dd0d094e565eb', name: "header" }), h("slot", { key: '81ae95ccd66f88c05253fde0ec9e0d20e02e5304', name: "cell" })));
     }
 };
 

package/dist/esm/nv-datagridcolumn.entry.js.map

@@ -1 +1 @@
-{"file":"nv-datagridcolumn.entry.js","mappings":";;MAUa,gBAAgB;IAJ7B;;;;;QAwBW,mBAAc,GAAY,KAAK,CAAC;KAiB1C;;;;IAXC,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,6DAAM,IAAI,EAAC,QAAQ,GAAQ,EAC3B,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACpB,EACP;KACH;;;;;","names":[],"sources":["src/components/nv-datagridcolumn/nv-datagridcolumn.tsx"],"sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n/**\n * @slot header - Defines how to render the header of the column.\n * @slot cell - Defines how to render every cell of the column.\n */\n@Component({\n  tag: 'nv-datagridcolumn',\n  shadow: false,\n})\nexport class NvDatagridcolumn {\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Defines the header of the column.\n   */\n  @Prop({ reflect: true })\n  readonly header?: string;\n\n  /**\n   * Defines the accessor of the column.\n   */\n  @Prop({ reflect: true })\n  readonly accessor!: string;\n\n  /**\n   * Whether the column need to be repeated with the template.\n   */\n  @Prop({ reflect: true })\n  readonly repeatTemplate: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        <slot name=\"header\"></slot>\n        <slot name=\"cell\"></slot>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n  /****************************************************************************/\n}\n"],"version":3}
+{"file":"nv-datagridcolumn.entry.js","mappings":";;MAUa,gBAAgB;IAJ7B;;;;;QAwBW,mBAAc,GAAY,KAAK,CAAC;KAuB1C;;;;IAXC,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,6DAAM,IAAI,EAAC,QAAQ,GAAQ,EAC3B,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACpB,EACP;KACH;;;;;","names":[],"sources":["src/components/nv-datagridcolumn/nv-datagridcolumn.tsx"],"sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n/**\n * @slot header - Defines how to render the header of the column.\n * @slot cell - Defines how to render every cell of the column.\n */\n@Component({\n  tag: 'nv-datagridcolumn',\n  shadow: false,\n})\nexport class NvDatagridcolumn {\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Defines the header of the column.\n   */\n  @Prop({ reflect: true })\n  readonly header?: string;\n\n  /**\n   * Defines the accessor of the column.\n   */\n  @Prop({ reflect: true })\n  readonly accessor!: string;\n\n  /**\n   * Whether the column need to be repeated with the template.\n   */\n  @Prop({ reflect: true })\n  readonly repeatTemplate: boolean = false;\n\n  /**\n   * Defines the group header of the column.\n   */\n  @Prop({ reflect: true })\n  readonly group?: string;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        <slot name=\"header\"></slot>\n        <slot name=\"cell\"></slot>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n  /****************************************************************************/\n}\n"],"version":3}

package/dist/esm/nv-dialog.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-1fb7a9a6.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a1936cd0.js';
 import { a as addEventListeners, r as removeEventListeners } from './events.utils-fe1d907f.js';
 import { c as clsx } from './clsx-297c1ffe.js';
-import { B as ButtonType } from './constants-b97e736d.js';
+import { B as ButtonType } from './constants-4faa1fae.js';
 import { v as v4 } from './v4-a79185f4.js';
 
 /*!

package/dist/esm/nv-dialogfooter_2.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, a as Host, g as getElement } from './index-1fb7a9a6.js';
-import { B as ButtonType } from './constants-b97e736d.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-a1936cd0.js';
+import { B as ButtonType } from './constants-4faa1fae.js';
 
 const nvDialogfooterCss = "nv-dialogfooter{display:flex;padding:var(--dialog-footer-padding-top) var(--dialog-footer-padding-x) var(--dialog-footer-padding-bottom) var(--dialog-footer-padding-x);justify-content:flex-end;align-items:flex-end;gap:var(--dialog-footer-gap-y);align-self:stretch}";
 const NvDialogfooterStyle0 = nvDialogfooterCss;

package/dist/esm/nv-fieldcheckbox.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-1fb7a9a6.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a1936cd0.js';
 import { c as clsx } from './clsx-297c1ffe.js';
 import { v as v4 } from './v4-a79185f4.js';
 

package/dist/esm/nv-fielddate.entry.js

@@ -1,15 +1,15 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-1fb7a9a6.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a1936cd0.js';
 import { I as Inputmask } from './inputmask-edcad3c1.js';
 import { v as v4 } from './v4-a79185f4.js';
 import './_commonjsHelpers-1789f0cf.js';
 
-const nvFielddateCss = "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)}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%}nv-fielddate .input-wrapper .input-container input:focus{outline:none}nv-fielddate .input-wrapper .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fielddate .input-wrapper .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fielddate .input-wrapper .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fielddate .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddate .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fielddate .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";
+const nvFielddateCss = "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%;}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 NvFielddateStyle0 = nvFielddateCss;
 
 const NvFielddate = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dateChange = createEvent(this, "dateChange", 7);
+        this.valueChanged = createEvent(this, "valueChanged", 7);
         this.popoverId = v4();
         /****************************************************************************/
         //#region PROPERTIES
@@ -44,7 +44,10 @@ const NvFielddate = class {
         this.autofocus = false;
         /**
          * The initial value of the input (date in string format).
+         * @bind value
          */
+        // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        // eslint-disable-next-line @stencil-community/strict-mutable
         this.value = '';
         /**
          * The current value of the input date in string format.
@@ -130,7 +133,7 @@ const NvFielddate = class {
         };
         /**
          * Handles the input event on the input element.
-         * Updates the singleValue and emits the dateChange event.
+         * Updates the singleValue and emits the valueChanged event.
          * @param {Event} event - The input event.
          */
         this.handleInput = (event) => {
@@ -139,8 +142,13 @@ const NvFielddate = class {
                 return;
             }
             const input = event.target;
+            const previousValue = this.value;
             this.singleValue = input.value;
-            this.dateChange.emit({ value: input.value });
+            this.value = input.value;
+            // Only emit valueChanged if the value actually changed
+            if (previousValue !== input.value) {
+                this.valueChanged.emit(input.value);
+            }
         };
         /**
          * Toggles the opening/closing of the popover.
@@ -162,6 +170,27 @@ const NvFielddate = class {
                 return;
             }
         };
+        /**
+         * Prevents the valueChanged event from the calendar from propagating up.
+         * @param {CustomEvent} event - The valueChanged event from nv-calendar.
+         */
+        this.handleCalendarValueChanged = (event) => {
+            event.stopPropagation();
+        };
+        /**
+         * Sets the reference to the popover element.
+         * @param {HTMLNvPopoverElement} el - The popover element.
+         */
+        this.setPopoverRef = (el) => {
+            this.popoverElement = el;
+        };
+        /**
+         * Sets the reference to the input element.
+         * @param {HTMLInputElement} el - The input element.
+         */
+        this.setInputRef = (el) => {
+            this.inputElement = el;
+        };
     }
     //#endregion PROPERTIES
     /****************************************************************************/
@@ -218,8 +247,13 @@ const NvFielddate = class {
      */
     handleSingleDateChange(event) {
         const value = event.detail;
+        const previousValue = this.value;
         this.singleValue = value;
-        this.dateChange.emit({ value });
+        this.value = value;
+        // Only emit valueChanged if the value actually changed
+        if (previousValue !== value) {
+            this.valueChanged.emit(value);
+        }
         if (!this.showActions) {
             this.open = false;
         }
@@ -249,12 +283,12 @@ const NvFielddate = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'e59d967d20d9f1ab584058795f30a52e50ec2933' }, ((this.label && this.label.length > 0) ||
-            this.el.querySelector('[slot="label"]')) && (h("label", { key: 'e159c6731265e73b436093b1aceaf354451245c9', htmlFor: this.inputId }, h("slot", { key: '9fc823ee41ec9fc7c8f9a42021277b4729ff0544', name: "label" }, this.label))), h("nv-popover", { key: 'cd0e133d5c62b00d4ade7a08184942e0bacc54fe', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { key: '66b96d21779fd6a8f335af3d2d2bc4df117516d8', slot: "trigger", class: "input-wrapper" }, h("slot", { key: 'e2c0e7c249cc4b213afc858281db0a84ab9c4827', name: "before-input" }), h("div", { key: '585283bf8880c4d8be911167d27abe34c2f4e21f', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: '9c15ffe741369e54fca3a8aeb844e4fbcc93fd5d', name: "leading-input" }), h("input", { key: 'bca0e7c19b1081a2849a2a36843628c6f65a4eb2', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.autofocus, value: this.singleValue, onInput: this.handleInput, onFocus: this.handleFocus, "data-scope": "date" }), this.error && (h("nv-icon", { key: 'd610fdea33086a737ef99ab4e4ed69f09dd40045', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: 'cce665f259ef8134cc8737f8077c05915b4f7dcc', name: "circle-check", class: "validation", size: "md" })), h("nv-iconbutton", { key: 'd27bcd437f35f5445fb9994fd7283c2339bc7ea8', class: "toggle-calendar-icon", name: "calendar" //{this.open ? 'chevron-top' : 'chevron-down'}
+        return (h(Host, { key: '4af4649cc8fdc95f2f12d1c495549a006c82c742' }, ((this.label && this.label.length > 0) ||
+            this.el.querySelector('[slot="label"]')) && (h("label", { key: 'c4905c94c62c8eb01120b30e3b5c16c2dafec20d', htmlFor: this.inputId }, h("slot", { key: 'b8e952b9a6acb9f136d3461514b82a6767723c3c', name: "label" }, this.label))), h("nv-popover", { key: 'de6620c60eb3db3c6f0f435977f257636be81a80', ref: this.setPopoverRef, id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { key: 'e2189ad3476f3d088c07153bc4c1e63357317ded', slot: "trigger", class: "input-wrapper" }, h("slot", { key: 'a35e545f1379c479734719d8460d5031631f5730', name: "before-input" }), h("div", { key: '01338c24dfff69e019ff6d2344f176effb2dac06', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: 'f6552d188174e77e8f75a9b0554e3ea78c57056d', name: "leading-input" }), h("input", { key: '1b9ad6226166b6bf08afda41f0f6b789fe12dd27', id: this.inputId, ref: this.setInputRef, placeholder: this.placeholder, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.autofocus, value: this.singleValue, onInput: this.handleInput, onFocus: this.handleFocus, "data-scope": "date" }), this.error && (h("nv-icon", { key: '0527f051261672a8df205d26dcb253c20b3dfd4b', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: 'ed83a0a0b7a88f392f16bf97f20885261f88665d', name: "circle-check", class: "validation", size: "md" })), h("nv-iconbutton", { key: '6abf3dff6a1bcc0759bea91ab3674d61f4c016c2', class: "toggle-calendar-icon", name: "calendar" //{this.open ? 'chevron-top' : 'chevron-down'}
             ,
-            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 })), h("slot", { key: '7708b24f9f569094b6f4f850413edd46e210b7e8', name: "after-input" })), h("div", { key: '194a99a83c9978691130d17e981c61be742315cf', slot: "content" }, h("nv-calendar", { key: '4dc6b2afb3890c5bfb08f070f5b5daac07a76929', dateFormat: this.dateFormat, singleValue: this.singleValue, firstDayOfWeek: this.firstDayOfWeek, numberOfCalendars: this.numberOfCalendars, min: this.min, max: this.max, locale: this.locale, shortcutsPlacement: this.shortcutsPlacement, showActions: this.showActions, shortcuts: this.shortcuts, showWeekNumbers: this.showWeekNumbers, disabledDates: this.disabledDates }))), ((this.description && this.description.length > 0) ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '623af8e048bfb7aef8919fa64a0f1baf04608b69', class: "description" }, h("slot", { key: 'cd3eecb2488e19ba1faf139ab4546e6db10468d2', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'eafcfc3c9bb584c78d7f8d6437bbfab269fdaca9', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (h("slot", { name: "error-description" })) : (this.errorDescription))), h("slot", { key: '4b5c23e00f8edb7c0d0d40a5ae89bbb322190c5d' })));
+            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 })), h("slot", { key: '76d584ac756b228e356a17ad36e4558f9a497ea3', name: "after-input" })), h("div", { key: '4914e6fa5046fb287bedb841f2a0b71f1f86e5a3', slot: "content" }, h("nv-calendar", { key: 'fcfb949ee9c378aac2d7c792ed79fcb3cbf8e987', 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"]')) && (h("div", { key: '52ffcb5f41161b9dc95c0fc18a252b6568817ffb', class: "description" }, h("slot", { key: '91c68f28fe31f5ecfa58d80e5decb018890f18fe', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '0c0b8c65f261c2439446dd05014d172e6b829244', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (h("slot", { name: "error-description" })) : (this.errorDescription))), h("slot", { key: 'cf9410ad858faf59d7ada7ce70b18aa768e30a65' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/nv-fielddate.entry.js.map

@@ -1 +1 @@
-{"file":"nv-fielddate.entry.js","mappings":"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","names":["uuidv4"],"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      }\n\n      > nv-iconbutton {\n        @include form-field-action();\n      }\n\n      nv-icon.validation {\n        @include form-field-icon();\n      }\n    }\n  }\n\n  .description {\n    @include form-field-description();\n  }\n\n  .error-description {\n    @include form-field-error-description();\n  }\n}\n","import {\n  Component,\n  h,\n  Prop,\n  State,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  Host,\n  Watch,\n} from '@stencil/core';\nimport Inputmask from 'inputmask';\nimport { v4 as uuidv4 } from 'uuid';\n\n/**\n * @slot default - Child content of the component.\n * @slot leading-input - Content to be placed before the input text, within the input container.\n * @slot before-input - Content to be placed before the input text, outside the input container.\n * @slot after-input - Content to be placed after the input text, outside the input container.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n  tag: 'nv-fielddate',\n  styleUrl: 'styles/nv-fielddate.scss',\n  shadow: false,\n})\nexport class NvFielddate {\n  @Element() el: HTMLNvFielddateElement;\n  private inputElement!: HTMLInputElement;\n\n  private popoverElement!: HTMLNvPopoverElement;\n  private popoverId: string = uuidv4();\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the input element and the for attribute of the associated\n   * label. If no ID is provided, a random one will be automatically generated.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * Text displayed as label. A slot label can override this prop.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\n\n  /**\n   * Description displayed below the input. A slot description can override this prop.\n   */\n  @Prop({ reflect: true })\n  readonly description: string;\n\n  /**\n   * Placeholder for the input field.\n   */\n  @Prop({ reflect: true })\n  readonly placeholder: string;\n\n  /**\n   * Name attribute for the input.\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * Disables the input field.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Sets the input field as read-only.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks the input field as required.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Indicates an error state.\n   */\n  @Prop({ reflect: true })\n  readonly error: boolean = false;\n\n  /**\n   * Error description. A slot error-description can override this prop.\n   */\n  @Prop({ reflect: true })\n  readonly errorDescription?: string;\n\n  /**\n   * Indicates a success state.\n   */\n  @Prop({ reflect: true })\n  readonly success: boolean = false;\n\n  /**\n   * Autofocus the input when the component is mounted.\n   */\n  @Prop({ reflect: true })\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  readonly autofocus: boolean = false;\n\n  /**\n   * The initial value of the input (date in string format).\n   */\n  @Prop({ reflect: true })\n  readonly value: string = '';\n\n  /**\n   * The current value of the input date in string format.\n   */\n  @State()\n  singleValue: string = '';\n\n  /**\n   * Controls the opening of the popover.\n   */\n  @State()\n  open: boolean = false;\n\n  /**\n   * First day of the week 0 = Sunday, 1 = Monday, etc.\n   * @default 1\n   */\n  @Prop({ reflect: true })\n  readonly firstDayOfWeek: number = 1;\n\n  /**\n   * Number of calendars to display\n   * @default 1\n   */\n  @Prop({ reflect: true })\n  readonly numberOfCalendars: number = 1;\n\n  /**\n   * Minimum date for selection ISO string format, ex: 2025-01-01\n   */\n  @Prop({ reflect: true })\n  readonly min?: string = '';\n\n  /**\n   * Maximum date for selection ISO string format, ex: 2025-12-31\n   */\n  @Prop({ reflect: true })\n  readonly max?: string = '';\n\n  /** Locale for date formatting\n   * @default 'en-BE'\n   */\n  @Prop({ reflect: true })\n  readonly locale: string = 'en-BE';\n\n  /** Date format ex: YYYY-MM-DD, DD-MM-YYYY, etc.\n   * @default 'YYYY-MM-DD'\n   * @note If the date format is in UTC mode, the date will be displayed in UTC time.\n   * @note If the date format is not in UTC mode, the date will be displayed in the local time.\n   */\n  @Prop({ reflect: true })\n  readonly dateFormat: string = 'YYYY-MM-DD';\n\n  /**\n   * Footer placement\n   * @default 'bottom'\n   */\n  @Prop({ reflect: true })\n  readonly shortcutsPlacement: 'bottom' | 'left' | 'right' = 'bottom';\n\n  /**\n   * Show action buttons\n   * @default false\n   */\n  @Prop({ reflect: true })\n  readonly showActions: boolean = false;\n\n  /**\n   * Custom actions to display in the footer\n   */\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    switch (format) {\n      case 'DD/MM/YYYY':\n        return 'dd/mm/yyyy';\n      case 'MM/DD/YYYY':\n        return 'mm/dd/yyyy';\n      case 'YYYY-MM-DD':\n        return 'yyyy-mm-dd';\n      case 'DD.MM.YYYY':\n        return 'dd.mm.yyyy';\n      case 'YYYYMMDD':\n        return 'yyyymmdd';\n      default:\n        return format;\n    }\n  }\n\n  /**\n   * Closes the popover when a click is detected outside the component.\n   * @param {MouseEvent} event - The click event.\n   */\n  private handleClickOutside = (event: MouseEvent) => {\n    if (this.open && this.el && !this.el.contains(event.target as Node)) {\n      this.open = false;\n    }\n  };\n\n  /**\n   * Focuses the input when the input container is clicked.\n   * @param {MouseEvent} event - The click event.\n   */\n  private handleInputContainerClick = (event: MouseEvent) => {\n    if (this.readonly || this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    this.inputElement.focus();\n    // Select the first characters based on the date format\n    const format = this.dateFormat;\n    if (format.startsWith('DD')) {\n      this.inputElement.setSelectionRange(0, 2);\n    } else if (format.startsWith('MM')) {\n      this.inputElement.setSelectionRange(0, 2);\n    } else if (format.startsWith('YYYY')) {\n      this.inputElement.setSelectionRange(0, 4);\n    }\n  };\n\n  /**\n   * Handles the input event on the input element.\n   * Updates the singleValue and emits the dateChange event.\n   * @param {Event} event - The input event.\n   */\n  private handleInput = (event: Event) => {\n    if (this.readonly || this.disabled) {\n      event.preventDefault();\n      return;\n    }\n    const input = event.target as HTMLInputElement;\n    this.singleValue = input.value;\n    this.dateChange.emit({ value: input.value });\n  };\n\n  /**\n   * Toggles the opening/closing of the popover.\n   */\n  private toggleCalendar = () => {\n    if (this.readonly || this.disabled) {\n      return;\n    }\n    this.open = !this.open;\n  };\n\n  /**\n   * Handles focus events on the input element.\n   * @param {FocusEvent} event - The focus event.\n   */\n  private handleFocus = (event: FocusEvent) => {\n    if (this.readonly || this.disabled) {\n      event.preventDefault();\n      (event.target as HTMLElement).blur();\n      return;\n    }\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  connectedCallback() {\n    document.addEventListener('click', this.handleClickOutside);\n  }\n\n  componentWillLoad() {\n    if (this.value) {\n      this.singleValue = this.value;\n    }\n  }\n\n  componentDidLoad() {\n    const inputs = this.el.querySelectorAll('.input-wrapper input');\n    inputs.forEach((input: HTMLInputElement) => {\n      Inputmask({\n        alias: 'datetime',\n        inputFormat: this.convertToInputmaskFormat(this.dateFormat),\n        placeholder: '_'.repeat(this.dateFormat.length),\n      }).mask(input);\n    });\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('click', this.handleClickOutside);\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emits an event when the date changes.\n   */\n  @Event()\n  dateChange: EventEmitter<{\n    /**\n     * The date value.\n     */\n    value: string;\n  }>;\n\n  /**\n   * Handles the single date selection event from nv-calendar.\n   * Updates the input value and closes the popover.\n   * @param {CustomEvent} event - The event from nv-calendar.\n   */\n  @Listen('singleDateChange')\n  handleSingleDateChange(event: CustomEvent) {\n    const value: string = event.detail;\n    this.singleValue = value;\n    this.dateChange.emit({ value });\n    if (!this.showActions) {\n      this.open = false;\n    }\n  }\n\n  @Listen('closePopover')\n  handleClosePopover() {\n    this.open = false;\n  }\n\n  @Listen('keydown', { passive: false })\n  handleKeyDown(event: KeyboardEvent) {\n    if (!this.open) {\n      if (event.key === 'ArrowDown') {\n        this.open = true;\n\n        event.preventDefault();\n        return;\n      }\n      return;\n    }\n\n    // Verify if the popover element is defined\n    if (!this.popoverElement) {\n      console.warn('nv-fielddate -> Popover element is not defined');\n      return;\n    }\n  }\n\n  @Watch('value')\n  handleValueChange(newValue: string) {\n    this.singleValue = newValue;\n  }\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region RENDER\n  render() {\n    return (\n      <Host>\n        {((this.label && this.label.length > 0) ||\n          this.el.querySelector('[slot=\"label\"]')) && (\n          <label htmlFor={this.inputId}>\n            <slot name=\"label\">{this.label}</slot>\n          </label>\n        )}\n\n        <nv-popover\n          ref={el => (this.popoverElement = el as HTMLNvPopoverElement)}\n          id={this.popoverId}\n          triggerMode=\"controlled\"\n          placement=\"bottom-start\"\n          open={this.open}\n        >\n          <div slot=\"trigger\" class=\"input-wrapper\">\n            <slot name=\"before-input\"></slot>\n\n            <div\n              class=\"input-container\"\n              onClick={this.handleInputContainerClick}\n            >\n              <slot name=\"leading-input\"></slot>\n\n              <input\n                id={this.inputId}\n                ref={e => (this.inputElement = e)}\n                placeholder={this.placeholder}\n                name={this.name}\n                disabled={this.disabled}\n                readOnly={this.readonly}\n                required={this.required}\n                autofocus={this.autofocus}\n                value={this.singleValue}\n                onInput={this.handleInput}\n                onFocus={this.handleFocus}\n                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            ></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"],"version":3}
+{"file":"nv-fielddate.entry.js","mappings":"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","names":["uuidv4"],"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      }\n\n      > nv-iconbutton {\n        @include form-field-action();\n      }\n\n      nv-icon.validation {\n        @include form-field-icon();\n      }\n    }\n  }\n\n  .description {\n    @include form-field-description();\n  }\n\n  .error-description {\n    @include form-field-error-description();\n  }\n}\n","import {\n  Component,\n  h,\n  Prop,\n  State,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  Host,\n  Watch,\n} from '@stencil/core';\nimport Inputmask from 'inputmask';\nimport { v4 as uuidv4 } from 'uuid';\n\n/**\n * @slot default - Child content of the component.\n * @slot leading-input - Content to be placed before the input text, within the input container.\n * @slot before-input - Content to be placed before the input text, outside the input container.\n * @slot after-input - Content to be placed after the input text, outside the input container.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n  tag: 'nv-fielddate',\n  styleUrl: 'styles/nv-fielddate.scss',\n  shadow: false,\n})\nexport class NvFielddate {\n  @Element() el: HTMLNvFielddateElement;\n  private inputElement!: HTMLInputElement;\n\n  private popoverElement!: HTMLNvPopoverElement;\n  private popoverId: string = uuidv4();\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the input element and the for attribute of the associated\n   * label. If no ID is provided, a random one will be automatically generated.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * Text displayed as label. A slot label can override this prop.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\n\n  /**\n   * Description displayed below the input. A slot description can override this prop.\n   */\n  @Prop({ reflect: true })\n  readonly description: string;\n\n  /**\n   * Placeholder for the input field.\n   */\n  @Prop({ reflect: true })\n  readonly placeholder: string;\n\n  /**\n   * Name attribute for the input.\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * Disables the input field.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Sets the input field as read-only.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks the input field as required.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Indicates an error state.\n   */\n  @Prop({ reflect: true })\n  readonly error: boolean = false;\n\n  /**\n   * Error description. A slot error-description can override this prop.\n   */\n  @Prop({ reflect: true })\n  readonly errorDescription?: string;\n\n  /**\n   * Indicates a success state.\n   */\n  @Prop({ reflect: true })\n  readonly success: boolean = false;\n\n  /**\n   * Autofocus the input when the component is mounted.\n   */\n  @Prop({ reflect: true })\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  readonly autofocus: boolean = false;\n\n  /**\n   * The initial value of the input (date in string format).\n   * @bind value\n   */\n  // eslint-disable-next-line @stencil-community/own-props-must-be-private\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 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    switch (format) {\n      case 'DD/MM/YYYY':\n        return 'dd/mm/yyyy';\n      case 'MM/DD/YYYY':\n        return 'mm/dd/yyyy';\n      case 'YYYY-MM-DD':\n        return 'yyyy-mm-dd';\n      case 'DD.MM.YYYY':\n        return 'dd.mm.yyyy';\n      case 'YYYYMMDD':\n        return 'yyyymmdd';\n      default:\n        return format;\n    }\n  }\n\n  /**\n   * Closes the popover when a click is detected outside the component.\n   * @param {MouseEvent} event - The click event.\n   */\n  private handleClickOutside = (event: MouseEvent) => {\n    if (this.open && this.el && !this.el.contains(event.target as Node)) {\n      this.open = false;\n    }\n  };\n\n  /**\n   * Focuses the input when the input container is clicked.\n   * @param {MouseEvent} event - The click event.\n   */\n  private handleInputContainerClick = (event: MouseEvent) => {\n    if (this.readonly || this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    this.inputElement.focus();\n    // Select the first characters based on the date format\n    const format = this.dateFormat;\n    if (format.startsWith('DD')) {\n      this.inputElement.setSelectionRange(0, 2);\n    } else if (format.startsWith('MM')) {\n      this.inputElement.setSelectionRange(0, 2);\n    } else if (format.startsWith('YYYY')) {\n      this.inputElement.setSelectionRange(0, 4);\n    }\n  };\n\n  /**\n   * Handles the input event on the input element.\n   * Updates the singleValue and emits the valueChanged event.\n   * @param {Event} event - The input event.\n   */\n  private handleInput = (event: Event) => {\n    if (this.readonly || this.disabled) {\n      event.preventDefault();\n      return;\n    }\n    const input = event.target as HTMLInputElement;\n    const previousValue = this.value;\n    this.singleValue = input.value;\n    this.value = input.value;\n    // Only emit valueChanged if the value actually changed\n    if (previousValue !== input.value) {\n      this.valueChanged.emit(input.value);\n    }\n  };\n\n  /**\n   * Toggles the opening/closing of the popover.\n   */\n  private toggleCalendar = () => {\n    if (this.readonly || this.disabled) {\n      return;\n    }\n    this.open = !this.open;\n  };\n\n  /**\n   * Handles focus events on the input element.\n   * @param {FocusEvent} event - The focus event.\n   */\n  private handleFocus = (event: FocusEvent) => {\n    if (this.readonly || this.disabled) {\n      event.preventDefault();\n      (event.target as HTMLElement).blur();\n      return;\n    }\n  };\n\n  /**\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  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  connectedCallback() {\n    document.addEventListener('click', this.handleClickOutside);\n  }\n\n  componentWillLoad() {\n    if (this.value) {\n      this.singleValue = this.value;\n    }\n  }\n\n  componentDidLoad() {\n    const inputs = this.el.querySelectorAll('.input-wrapper input');\n    inputs.forEach((input: HTMLInputElement) => {\n      Inputmask({\n        alias: 'datetime',\n        inputFormat: this.convertToInputmaskFormat(this.dateFormat),\n        placeholder: '_'.repeat(this.dateFormat.length),\n      }).mask(input);\n    });\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('click', this.handleClickOutside);\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * 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    // 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  }\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={this.placeholder}\n                name={this.name}\n                disabled={this.disabled}\n                readOnly={this.readonly}\n                required={this.required}\n                autofocus={this.autofocus}\n                value={this.singleValue}\n                onInput={this.handleInput}\n                onFocus={this.handleFocus}\n                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"],"version":3}