@nova-design-system/nova-react 3.5.0 → 3.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/dist/cjs/{timeline.animation-1b88f052-B8-vCVrY.js → collapse.animation-16e3af45-CChx_tQJ.js} +4 -25
  2. package/dist/cjs/fade.animation-71e8e34c-BAw_TYsB.js +68 -0
  3. package/dist/cjs/{index-Te0zRbKN.js → index-E_eTmclZ.js} +2187 -1596
  4. package/dist/cjs/index.js +3 -1
  5. package/dist/cjs/nv-accordion-item.entry-B9iMQoRk.js +178 -0
  6. package/dist/cjs/nv-accordion.entry-2oOEkDVq.js +191 -0
  7. package/dist/cjs/{nv-alert.entry-CPbApg9_.js → nv-alert.entry-CJcHACkm.js} +10 -8
  8. package/dist/cjs/{nv-avatar.entry-CwM8IOei.js → nv-avatar.entry-COkIaFDp.js} +2 -2
  9. package/dist/cjs/{nv-badge_2.entry-Bqu-2k7E.js → nv-badge_2.entry-CQHT-nck.js} +14 -12
  10. package/dist/cjs/{nv-breadcrumb.entry-CmceXVS9.js → nv-breadcrumb.entry-DElOQJUD.js} +2 -2
  11. package/dist/cjs/{nv-breadcrumbs.entry-B7xbEUl5.js → nv-breadcrumbs.entry-CDfxiMbp.js} +2 -2
  12. package/dist/cjs/{nv-button.entry-Cd_CE1fx.js → nv-button.entry-CTJT4SzB.js} +2 -2
  13. package/dist/cjs/{nv-calendar.entry-B2lm2nvb.js → nv-calendar.entry-BU2OBf6g.js} +60 -51
  14. package/dist/cjs/{nv-col.entry-BF8XR4B1.js → nv-col.entry-Bsz14pxY.js} +2 -2
  15. package/dist/cjs/{nv-datagrid.entry-CcQ8XP6J.js → nv-datagrid.entry-2DyB7G5f.js} +3 -3
  16. package/dist/cjs/{nv-datagridcolumn.entry-uGbQ4NMr.js → nv-datagridcolumn.entry-DquF2Cc1.js} +2 -2
  17. package/dist/cjs/{nv-dialog.entry-DyK4wFFz.js → nv-dialog.entry-QzImh4AV.js} +20 -7
  18. package/dist/cjs/{nv-dialogfooter_2.entry-DT3kR9Xn.js → nv-dialogfooter_2.entry-MikGtnGi.js} +3 -3
  19. package/dist/cjs/{nv-fieldcheckbox.entry-D_wHbgcq.js → nv-fieldcheckbox.entry-DKhH58rn.js} +5 -5
  20. package/dist/cjs/{nv-fielddate.entry-BaIcP2EG.js → nv-fielddate.entry-Dj_oMJ2a.js} +101 -36
  21. package/dist/cjs/{nv-fielddaterange.entry-BNcF2N2M.js → nv-fielddaterange.entry-CWwH83ug.js} +5 -5
  22. package/dist/cjs/{nv-fielddropdown.entry-DWlDvODi.js → nv-fielddropdown.entry-CPD-1tGj.js} +4 -4
  23. package/dist/cjs/{nv-fielddropdownitem.entry-BIy_GUKA.js → nv-fielddropdownitem.entry-CM5Fogll.js} +2 -2
  24. package/dist/cjs/{nv-fieldmultiselect.entry-B74CLRuh.js → nv-fieldmultiselect.entry-DodoLrhv.js} +86 -101
  25. package/dist/cjs/{nv-fieldnumber.entry-BQBy1EIj.js → nv-fieldnumber.entry-063nS6p_.js} +4 -4
  26. package/dist/cjs/{nv-fieldpassword.entry-DNFZvmBx.js → nv-fieldpassword.entry-CreA_Yx8.js} +4 -4
  27. package/dist/cjs/{nv-fieldradio.entry-BIR29jv5.js → nv-fieldradio.entry-Y8YSlQbK.js} +4 -4
  28. package/dist/cjs/{nv-fieldselect.entry-DulA_N5q.js → nv-fieldselect.entry-B1X8kT8-.js} +6 -6
  29. package/dist/cjs/{nv-fieldslider.entry-DCslY5gg.js → nv-fieldslider.entry-CJlQWgFy.js} +54 -10
  30. package/dist/cjs/{nv-fieldtext.entry-Dvv8KjJC.js → nv-fieldtext.entry-Cib7Q9Wi.js} +4 -4
  31. package/dist/cjs/{nv-fieldtextarea.entry-rVcnznae.js → nv-fieldtextarea.entry-QYIEAbAM.js} +4 -4
  32. package/dist/cjs/{nv-fieldtime.entry-_fXkWsoI.js → nv-fieldtime.entry-D6jX_bbE.js} +10 -10
  33. package/dist/cjs/{nv-icon.entry-BGyFETNH.js → nv-icon.entry-DyYPxO1l.js} +2 -2
  34. package/dist/cjs/{nv-iconbutton_2.entry-CtClzxKf.js → nv-iconbutton_2.entry-BDpYysUa.js} +3 -3
  35. package/dist/cjs/{nv-menu.entry-B3vFxd1E.js → nv-menu.entry-EY6i9-lW.js} +2 -2
  36. package/dist/cjs/{nv-menuitem.entry-BIWwr98d.js → nv-menuitem.entry-D3_V7wz6.js} +2 -2
  37. package/dist/cjs/{nv-popover.entry-vonHjF_y.js → nv-popover.entry-VI0JSWEK.js} +9 -8
  38. package/dist/cjs/{nv-row.entry-BYUhLZ0r.js → nv-row.entry-Da5sYAGY.js} +2 -2
  39. package/dist/cjs/{nv-stack.entry-Cxc6QmII.js → nv-stack.entry-CQ8A3wKB.js} +2 -2
  40. package/dist/cjs/{nv-table.entry-DSBUXcSF.js → nv-table.entry-DkALs4J_.js} +3 -3
  41. package/dist/cjs/{nv-tablecolumn.entry-BP857bqD.js → nv-tablecolumn.entry-C_9y9_Tk.js} +1 -1
  42. package/dist/cjs/{nv-toggle.entry-CnquGUlJ.js → nv-toggle.entry-CPvuKc2f.js} +3 -3
  43. package/dist/cjs/{nv-tooltip.entry-XvxL_FTH.js → nv-tooltip.entry-dvTSw6dq.js} +4 -3
  44. package/dist/cjs/{fade.animation-2a077983-aKN0EDTo.js → stylefire.es-74da334a-y0piPjlz.js} +0 -64
  45. package/dist/cjs/timeline.animation-adf35ecb-CE6Dsdxr.js +23 -0
  46. package/dist/generated/components.js +18 -2
  47. package/dist/generated/components.server.js +26 -3
  48. package/dist/types/generated/components.d.ts +17 -3
  49. package/dist/types/generated/components.server.d.ts +17 -3
  50. package/package.json +1 -1
@@ -1,12 +1,12 @@
1
1
  'use strict';
2
2
 
3
- var index = require('./index-Te0zRbKN.js');
3
+ var index = require('./index-E_eTmclZ.js');
4
4
  var inputmaskEdcad3c1 = require('./inputmask-edcad3c1-B9Omti4z.js');
5
5
  var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
6
6
  require('react');
7
7
  require('./_commonjsHelpers-1789f0cf-BJu3ubxk.js');
8
8
 
9
- 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)}";
9
+ 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%;font-feature-settings:\"tnum\";font-family:\"TTNorms Pro Mono\", monospace}nv-fielddate .input-wrapper .input-container input:focus{outline:none}nv-fielddate .input-wrapper .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fielddate .input-wrapper .input-container input[type=password]::-ms-clear,nv-fielddate .input-wrapper .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fielddate .input-wrapper .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fielddate .input-wrapper .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fielddate .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddate .description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fielddate .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";
10
10
  const NvFielddateStyle0 = nvFielddateCss;
11
11
 
12
12
  const NvFielddate = class {
@@ -124,10 +124,7 @@ const NvFielddate = class {
124
124
  this.inputElement.focus();
125
125
  // Select the first characters based on the date format
126
126
  const format = this.dateFormat;
127
- if (format.startsWith('DD')) {
128
- this.inputElement.setSelectionRange(0, 2);
129
- }
130
- else if (format.startsWith('MM')) {
127
+ if (format.startsWith('DD') || format.startsWith('MM')) {
131
128
  this.inputElement.setSelectionRange(0, 2);
132
129
  }
133
130
  else if (format.startsWith('YYYY')) {
@@ -154,13 +151,66 @@ const NvFielddate = class {
154
151
  }
155
152
  };
156
153
  /**
157
- * Toggles the opening/closing of the popover.
154
+ * Initializes the input mask.
158
155
  */
159
- this.toggleCalendar = () => {
160
- if (this.readonly || this.disabled) {
156
+ this.initializeInputMask = () => {
157
+ this.currentPlaceholder = '';
158
+ if (this.inputElement.inputmask) {
161
159
  return;
162
160
  }
163
- this.open = !this.open;
161
+ const inputMask = new inputmaskEdcad3c1.Inputmask({
162
+ alias: 'datetime',
163
+ inputFormat: this.convertToInputmaskFormat(this.dateFormat),
164
+ placeholder: ' ',
165
+ prefillYear: false,
166
+ clearIncomplete: false,
167
+ showMaskOnHover: false,
168
+ showMaskOnFocus: false,
169
+ clearMaskOnLostFocus: false,
170
+ insertMode: true,
171
+ rightAlign: false,
172
+ oncomplete: function (e) {
173
+ const input = e.target;
174
+ const event = new CustomEvent('input', { bubbles: true });
175
+ input.dispatchEvent(event);
176
+ },
177
+ });
178
+ inputMask.mask(this.inputElement);
179
+ // Set the value after applying the mask
180
+ if (this.inputElement.name === this.name && this.singleValue) {
181
+ requestAnimationFrame(() => {
182
+ this.inputElement.value = this.singleValue;
183
+ const event = new CustomEvent('input', { bubbles: true });
184
+ this.inputElement.dispatchEvent(event);
185
+ });
186
+ }
187
+ };
188
+ /**
189
+ * Handles keydown events on the input before the mask is initialized.
190
+ * Initializes the mask on the first number input.
191
+ * @param {KeyboardEvent} event - The keyboard event.
192
+ */
193
+ this.handleKeydownBeforeMask = (event) => {
194
+ const allowedKeys = [
195
+ 'Backspace',
196
+ 'Delete',
197
+ 'Tab',
198
+ 'ArrowLeft',
199
+ 'ArrowRight',
200
+ 'ArrowUp',
201
+ 'ArrowDown',
202
+ 'Home',
203
+ 'End',
204
+ ];
205
+ if (/\d/.test(event.key)) {
206
+ this.initializeInputMask();
207
+ this.inputElement.removeEventListener('keydown', this.handleKeydownBeforeMask);
208
+ }
209
+ else if (!allowedKeys.includes(event.key) &&
210
+ !event.metaKey &&
211
+ !event.ctrlKey) {
212
+ event.preventDefault();
213
+ }
164
214
  };
165
215
  /**
166
216
  * Handles focus events on the input element.
@@ -172,6 +222,16 @@ const NvFielddate = class {
172
222
  event.target.blur();
173
223
  return;
174
224
  }
225
+ if (!this.inputElement.inputmask) {
226
+ this.inputElement.addEventListener('keydown', this.handleKeydownBeforeMask);
227
+ }
228
+ this.open = true;
229
+ };
230
+ /**
231
+ * Handles blur events on the input element.
232
+ */
233
+ this.handleBlur = () => {
234
+ this.inputElement.removeEventListener('keydown', this.handleKeydownBeforeMask);
175
235
  };
176
236
  /**
177
237
  * Prevents the valueChanged event from the calendar from propagating up.
@@ -194,6 +254,15 @@ const NvFielddate = class {
194
254
  this.setInputRef = (el) => {
195
255
  this.inputElement = el;
196
256
  };
257
+ /**
258
+ * Toggles the opening/closing of the popover.
259
+ */
260
+ this.toggleCalendar = () => {
261
+ if (this.readonly || this.disabled) {
262
+ return;
263
+ }
264
+ this.open = !this.open;
265
+ };
197
266
  }
198
267
  //#endregion PROPERTIES
199
268
  /****************************************************************************/
@@ -204,20 +273,18 @@ const NvFielddate = class {
204
273
  * @returns {string} Format adapted for Inputmask.
205
274
  */
206
275
  convertToInputmaskFormat(format) {
207
- switch (format) {
208
- case 'DD/MM/YYYY':
209
- return 'dd/mm/yyyy';
210
- case 'MM/DD/YYYY':
211
- return 'mm/dd/yyyy';
212
- case 'YYYY-MM-DD':
213
- return 'yyyy-mm-dd';
214
- case 'DD.MM.YYYY':
215
- return 'dd.mm.yyyy';
216
- case 'YYYYMMDD':
217
- return 'yyyymmdd';
218
- default:
219
- return format;
276
+ // If the format is not specified, use the default format
277
+ if (!format) {
278
+ return 'dd/mm/yyyy';
220
279
  }
280
+ const formatMap = {
281
+ 'DD/MM/YYYY': 'dd/mm/yyyy',
282
+ 'MM/DD/YYYY': 'mm/dd/yyyy',
283
+ 'YYYY-MM-DD': 'yyyy-mm-dd',
284
+ 'DD.MM.YYYY': 'dd.mm.yyyy',
285
+ 'YYYYMMDD': 'yyyymmdd',
286
+ };
287
+ return formatMap[format] || 'dd/mm/yyyy';
221
288
  }
222
289
  //#endregion METHODS
223
290
  /****************************************************************************/
@@ -229,19 +296,17 @@ const NvFielddate = class {
229
296
  if (this.value) {
230
297
  this.singleValue = this.value;
231
298
  }
299
+ this.currentPlaceholder = this.placeholder || this.dateFormat;
232
300
  }
233
301
  componentDidLoad() {
234
- const inputs = this.el.querySelectorAll('.input-wrapper input');
235
- inputs.forEach((input) => {
236
- inputmaskEdcad3c1.Inputmask({
237
- alias: 'datetime',
238
- inputFormat: this.convertToInputmaskFormat(this.dateFormat),
239
- placeholder: '_'.repeat(this.dateFormat.length),
240
- }).mask(input);
241
- });
302
+ // Inputmask is now initialized on the first keypress
242
303
  }
243
304
  disconnectedCallback() {
244
305
  document.removeEventListener('click', this.handleClickOutside);
306
+ if (this.inputElement &&
307
+ this.inputElement.inputmask) {
308
+ this.inputElement.inputmask.remove();
309
+ }
245
310
  }
246
311
  /**
247
312
  * Handles the single date selection event from nv-calendar.
@@ -286,12 +351,12 @@ const NvFielddate = class {
286
351
  /****************************************************************************/
287
352
  //#region RENDER
288
353
  render() {
289
- return (index.h(index.Host, { key: '4af4649cc8fdc95f2f12d1c495549a006c82c742' }, ((this.label && this.label.length > 0) ||
290
- this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'c4905c94c62c8eb01120b30e3b5c16c2dafec20d', htmlFor: this.inputId }, index.h("slot", { key: 'b8e952b9a6acb9f136d3461514b82a6767723c3c', name: "label" }, this.label))), index.h("nv-popover", { key: 'de6620c60eb3db3c6f0f435977f257636be81a80', ref: this.setPopoverRef, id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: 'e2189ad3476f3d088c07153bc4c1e63357317ded', slot: "trigger", class: "input-wrapper" }, index.h("slot", { key: 'a35e545f1379c479734719d8460d5031631f5730', name: "before-input" }), index.h("div", { key: '01338c24dfff69e019ff6d2344f176effb2dac06', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: 'f6552d188174e77e8f75a9b0554e3ea78c57056d', name: "leading-input" }), index.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 && (index.h("nv-icon", { key: '0527f051261672a8df205d26dcb253c20b3dfd4b', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: 'ed83a0a0b7a88f392f16bf97f20885261f88665d', name: "circle-check", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: '6abf3dff6a1bcc0759bea91ab3674d61f4c016c2', class: "toggle-calendar-icon", name: "calendar" //{this.open ? 'chevron-top' : 'chevron-down'}
354
+ return (index.h(index.Host, { key: 'c9f29e6997cf07a03f43e3cc2d8263201829c9c4' }, ((this.label && this.label.length > 0) ||
355
+ this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '0c12a1773e75621cb7f2c6fbd944405cb444a9e6', htmlFor: this.inputId }, index.h("slot", { key: '0fdd5a226a5db7ac15be968f42e375f89031235f', name: "label" }, this.label))), index.h("nv-popover", { key: 'dd0dcf5576026e0b565db34d2a2eafd9e6188127', ref: this.setPopoverRef, id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: 'a4c7623e8d72ecc847567be060e8c3db04879062', slot: "trigger", class: "input-wrapper" }, index.h("slot", { key: 'e270dac5a26904db3d0966871bc10d7c68064e87', name: "before-input" }), index.h("div", { key: '8d277b89e591249910c9eeae754837ce079de47f', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '964769b29c4d9119365bf59255180e84ae32b195', name: "leading-input" }), index.h("input", { key: '41f0f565b4854e7907a5a8972d5ce265e587b7f0', id: this.inputId, ref: this.setInputRef, placeholder: this.currentPlaceholder, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.autofocus, value: this.singleValue, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, "data-scope": "date" }), this.error && (index.h("nv-icon", { key: '32d5ffac3789d9b3598811605eccfb1207c4e850', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '4e88c90987c12199512d77c24205bc2f67c3b8d1', name: "circle-check", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: 'e169bdd9742569cdcdc087d29ee13f9c097907a9', class: "toggle-calendar-icon", name: "calendar" //{this.open ? 'chevron-top' : 'chevron-down'}
291
356
  ,
292
- 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 })), index.h("slot", { key: '76d584ac756b228e356a17ad36e4558f9a497ea3', name: "after-input" })), index.h("div", { key: '4914e6fa5046fb287bedb841f2a0b71f1f86e5a3', slot: "content" }, index.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) ||
293
- this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '52ffcb5f41161b9dc95c0fc18a252b6568817ffb', class: "description" }, index.h("slot", { key: '91c68f28fe31f5ecfa58d80e5decb018890f18fe', name: "description" }, this.description))), (this.errorDescription ||
294
- this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '0c0b8c65f261c2439446dd05014d172e6b829244', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (index.h("slot", { name: "error-description" })) : (this.errorDescription))), index.h("slot", { key: 'cf9410ad858faf59d7ada7ce70b18aa768e30a65' })));
357
+ 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 })), index.h("slot", { key: '897e5ba6a908c96fdc55bdd522be3f04e9dd14f8', name: "after-input" })), index.h("div", { key: '6fcb101108ea4536654c2e6204416f899c9f0a04', slot: "content" }, index.h("nv-calendar", { key: 'd4d7c823ad832ed1c8430b041eacaa1db5633a9f', 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) ||
358
+ this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'f76d5dde2222f39883b59a86fe4237818040e03c', class: "description" }, index.h("slot", { key: 'de07e1ee885a5804b352dba6a37898bba500b731', name: "description" }, this.description))), (this.errorDescription ||
359
+ this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'b7dbb4406ee38548f8751f9425a800577f3a3cb2', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (index.h("slot", { name: "error-description" })) : (this.errorDescription))), index.h("slot", { key: 'a0170ef43d415238e57f29f985329e40f8ed0c2a' })));
295
360
  }
296
361
  get el() { return index.getElement(this); }
297
362
  static get watchers() { return {
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var index = require('./index-Te0zRbKN.js');
3
+ var index = require('./index-E_eTmclZ.js');
4
4
  var inputmaskEdcad3c1 = require('./inputmask-edcad3c1-B9Omti4z.js');
5
5
  var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
6
6
  require('react');
@@ -446,10 +446,10 @@ const NvFielddaterange = class {
446
446
  /****************************************************************************/
447
447
  //#region RENDER
448
448
  render() {
449
- return (index.h(index.Host, { key: '465121dc54f228353f5e0416de7a6889881244d7' }, ((this.label && this.label.length > 0) ||
450
- this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '7d49a2c5114d5d15f7e078e2fbbfe67c3200c329', htmlFor: this.startInputId }, index.h("slot", { key: 'b16d2baa2541b4f08bf038fb67749ee4b79b6567', name: "label" }, this.label))), index.h("nv-popover", { key: 'e5df35c897f8241d068eb54f94428a1a72f8cd34', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: 'ea9cc60c12b0d141e9848781fd37152e8987901d', slot: "trigger", class: "input-wrapper" }, index.h("slot", { key: 'ee646b624af619c46a5d27b6ccab9de3adafd2b8', name: "before-input" }), index.h("div", { key: 'bb1d2196576e40957ebf8a1a3b35c49432eb8202', class: "input-container" }, index.h("slot", { key: '29f3b2a8d06e1e2adfcfbafb80d5770d404df7b9', name: "leading-input" }), index.h("div", { key: '5703a0d07400177971b0204803389e2550c1a774', class: "range-inputs" }, index.h("input", { key: '9005cfb0e5d7b21ce934ac4938e81a5abac57c64', id: this.startInputId, type: "text", placeholder: this.startPlaceholder, 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" }), index.h("div", { key: '039104ceddbd8c19577245e95108abd444a17db4', class: "range-separator" }), index.h("input", { key: 'b55cbf8f5abc64384d050504c41a144d01ec3487', id: this.endInputId, type: "text", placeholder: this.endPlaceholder, name: this.endName, disabled: this.disabled, readOnly: this.readonly, required: this.required, value: this.endValue, onInput: this.handleEndInput, onFocus: this.handleFocus, "data-scope": "date-range" })), this.error && (index.h("nv-icon", { key: '85deffe8b8fe96fd4aab624ef787c52dd04040f9', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '35ed30cb3394f9162883c73406b627aea05ffa64', name: "circle-check", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: '6013c80bacd8183f0d2e2f2bfb176b937070fff2', class: "toggle-calendar-icon", name: "calendar", size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', "aria-pressed": this.open.toString(), onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), index.h("slot", { key: 'd5a00d1a0e49a5a03a6f63dfbdba8073f32543c5', name: "after-input" })), index.h("div", { key: 'b42689f8f233417af0f84eb8fbc41b60e28fcf4e', slot: "content" }, index.h("nv-calendar", { key: '5d581f7c5a6fab5933580733a8b22acddb62bc95', ref: el => (this.calendarElement = el), 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) ||
451
- this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '3774d441e866da984a96282978066a4f4ad31f4f', class: "description" }, index.h("slot", { key: '3c7166a46a880fb5d09f6070ac3f502e69935fc2', name: "description" }, this.description))), (this.errorDescription ||
452
- this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'b9dad22b19e4b5d2bca41cf361490a7626f025ea', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (index.h("slot", { name: "error-description" })) : (this.errorDescription))), index.h("slot", { key: '79a3f83127cbcc61f63efe42c8bffa607af33360' })));
449
+ return (index.h(index.Host, { key: 'b2033314494faca72c310df329eab3918fe6935e' }, ((this.label && this.label.length > 0) ||
450
+ this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '22e0af3e24bada8d859bcf42de0dfcedff9f5988', htmlFor: this.startInputId }, index.h("slot", { key: '8eb3e4e1a4c67c0d9cd014aa2c73b6fc2ecb1a8f', name: "label" }, this.label))), index.h("nv-popover", { key: 'f9c722e792ba69738df080975f78ea3dfeb40f07', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: '805c98d4a9e1defc74c0b751691e413dfbcfa736', slot: "trigger", class: "input-wrapper" }, index.h("slot", { key: 'd84ddf0a0732a68392c79baab9cde23be6b1b27e', name: "before-input" }), index.h("div", { key: '4f3cfab2e9a83dacc0f950bc319192b568f90258', class: "input-container" }, index.h("slot", { key: '2d8dd5e11369dc9bd1894e299f96b41806295568', name: "leading-input" }), index.h("div", { key: 'b60b40b275099441071b130bed7d097e8c1dcbcb', class: "range-inputs" }, index.h("input", { key: 'b7c647676fa5e48d51e7b7f1cf83e4a0275805ec', id: this.startInputId, type: "text", placeholder: this.startPlaceholder, 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" }), index.h("div", { key: '3e63ececeeff713f51db0a47e3d3b4f305e6fc66', class: "range-separator" }), index.h("input", { key: '1c54a2e3f43ad077bfe9e9b17886300d06840bfd', id: this.endInputId, type: "text", placeholder: this.endPlaceholder, name: this.endName, disabled: this.disabled, readOnly: this.readonly, required: this.required, value: this.endValue, onInput: this.handleEndInput, onFocus: this.handleFocus, "data-scope": "date-range" })), this.error && (index.h("nv-icon", { key: '971b363f7fafbaeba65a161c1d7792d2bcacacf6', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '0f498b287b4c9ad9f83a0d380c522441b8afdf6e', name: "circle-check", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: '257549f7c201391c083f28f1b89ffa3a439f268c', class: "toggle-calendar-icon", name: "calendar", size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', "aria-pressed": this.open.toString(), onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), index.h("slot", { key: '7be106f2f1500839e899d6f9c6f3705398cadd1a', name: "after-input" })), index.h("div", { key: 'd2c56635c83628f37f0c1ec127bfeaca5fb78b90', slot: "content" }, index.h("nv-calendar", { key: '4ec9eea45e030463c2df0115a0cfd6453da66f01', ref: el => (this.calendarElement = el), 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) ||
451
+ this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'a624ba699b3b7a7bb4d26725fe451ecd5df1f5a2', class: "description" }, index.h("slot", { key: 'f2c3666075730a248e57c748b32df33a59f3777e', name: "description" }, this.description))), (this.errorDescription ||
452
+ this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'e2c1f8816b896d00e2c4ba8b32bc28380630ecad', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (index.h("slot", { name: "error-description" })) : (this.errorDescription))), index.h("slot", { key: 'cee75865d222324b8d7f3144ba2facaefcaf1d35' })));
453
453
  }
454
454
  get el() { return index.getElement(this); }
455
455
  static get watchers() { return {
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var index = require('./index-Te0zRbKN.js');
3
+ var index = require('./index-E_eTmclZ.js');
4
4
  var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
5
5
  require('react');
6
6
 
@@ -356,9 +356,9 @@ const NvFielddropdown = class {
356
356
  //#region RENDER
357
357
  render() {
358
358
  var _a;
359
- return (index.h(index.Host, { key: '2c45eb94cd36a430780ccb2b6ca75c6d0cf14749', role: "combobox", "aria-expanded": this.open.toString(), "aria-haspopup": "listbox", "aria-label": this.label }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'b5f4fd518e20ffa8bd1f83595279c26fd4627597', htmlFor: this.inputId }, index.h("slot", { key: '6ba6870341c7ef37698adde01f5402db65d73898', name: "label" }, this.label))), index.h("nv-popover", { key: '0d3833a9402ff6b3d3ef6592aaeba5030aeca661', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: '5ae8307fbd0a0798f6103ae68fcfd7ac0c0cd5d6', class: "input-wrapper", slot: "trigger" }, index.h("slot", { key: '1844cb0ffe38189f2a39734a6c78487b0ef5533f', name: "before-input" }), index.h("div", { key: '9c3fc1eeddb22c0945606b28b08c6e4e59d4f745', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '0a4eaf84a3b3eb71edec875122e45705d3f0cbbf', name: "leading-input" }), this.filterable || this.disabled || this.readonly ? (index.h("input", { "data-scope": "focusable", id: this.inputId, type: "search", ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.getSelectedLabel(), required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onFocus: this.handleInputFocus, onClick: this.handleInputFocus, onKeyDown: this.handleKeyDown })) : (index.h("p", { "data-scope": "focusable", id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClick, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocus }, this.getSelectedLabel() || this.value || this.placeholder)), this.filterable && this.filterText && this.open && (index.h("nv-iconbutton", { key: '9cbbd6c7c8ab6bda015d5302d4a7ef2eb5d730f2', name: "x", size: "md", emphasis: "lower", class: "clear-button", onClick: this.clearFilter, "aria-label": "Clear input" })), this.error && (index.h("nv-icon", { key: 'd1bbfb1f515a79ea7fd74c93041d832c55203939', name: "alert-circle", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: '8665b644210fb6fc3a763d955a81ac7202647965', "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopover, tabIndex: this.disabled ? -1 : 0 })), index.h("slot", { key: '9a49e69a4d59c2cd5181b533b2fe9ec34e30d9f4', name: "after-input" })), index.h("div", { key: '8aafef9ac1c4bfd2d41fc7fe784927cdf4800423', slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, ((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (index.h("ul", null, this.options.map(option => (index.h("nv-fielddropdownitem", { label: option.label, value: option.value, disabled: option.disabled, selected: option.value === this.value }))))) : (index.h("slot", { name: "content" })))), (this.description ||
360
- this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '8cc32aa4d2e7b7137d07505c70d522bf14241c59', class: "description" }, index.h("slot", { key: '096efa39ff2ea02e76ed5a90459889d33321e99a', name: "description" }, this.description))), (this.errorDescription ||
361
- this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'bae304b963c369cf0417339cf1d3d5b45f5914ed', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'b17b69ee8240bf72bcee918ba8210df995434917', name: "error-description" }, this.errorDescription)))));
359
+ return (index.h(index.Host, { key: 'a4de1529678c493e92022229993443c93533f0a4', role: "combobox", "aria-expanded": this.open.toString(), "aria-haspopup": "listbox", "aria-label": this.label }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '6bf4ff6df1b4c62304ac623bea21554779b1bcfa', htmlFor: this.inputId }, index.h("slot", { key: '10bd19c28259c033ad2b8c9601655da9723bdbd0', name: "label" }, this.label))), index.h("nv-popover", { key: 'fc85eb3c9d72a90f47c6fcfbbf6f6cc234fa8df1', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: '6a7f4be2cdfd6399ce79f4cd7b0dc9abfd3a1c74', class: "input-wrapper", slot: "trigger" }, index.h("slot", { key: '97e82c45801d338456d81601fb147e235dd604d4', name: "before-input" }), index.h("div", { key: 'd6f3d6ca42acc7c14689fedac22328c53d2a61af', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: 'd48c3800aa174716eb4bf4a81e545fabeb73d187', name: "leading-input" }), this.filterable || this.disabled || this.readonly ? (index.h("input", { "data-scope": "focusable", id: this.inputId, type: "search", ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.getSelectedLabel(), required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onFocus: this.handleInputFocus, onClick: this.handleInputFocus, onKeyDown: this.handleKeyDown })) : (index.h("p", { "data-scope": "focusable", id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClick, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocus }, this.getSelectedLabel() || this.value || this.placeholder)), this.filterable && this.filterText && this.open && (index.h("nv-iconbutton", { key: 'f01cf253ba3f31ff0269ecdf36d7d1e3249039a8', name: "x", size: "md", emphasis: "lower", class: "clear-button", onClick: this.clearFilter, "aria-label": "Clear input" })), this.error && (index.h("nv-icon", { key: '10b828451cf4a177a3580d2d01080036a25e9692', name: "alert-circle", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: '94edaa4e3ce5f80021db58bc5fa087424d4bf7d3', "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopover, tabIndex: this.disabled ? -1 : 0 })), index.h("slot", { key: '25e76d6ecfcff7514d2dfb970387f2af23506b40', name: "after-input" })), index.h("div", { key: '58c6e1de57d31f1827e9bf24da62f5801f8c99b9', slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, ((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (index.h("ul", null, this.options.map(option => (index.h("nv-fielddropdownitem", { label: option.label, value: option.value, disabled: option.disabled, selected: option.value === this.value }))))) : (index.h("slot", { name: "content" })))), (this.description ||
360
+ this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '5a35ceee27f3a2ab41742f396f450b8783832742', class: "description" }, index.h("slot", { key: 'ff012c2168c6ab6808de46a1f26f2f186fbe452f', name: "description" }, this.description))), (this.errorDescription ||
361
+ this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '9c668e1c484c4caf45fa9e38dbca4dae0e93fea3', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'ec9c91da75b1ec899ef68a569e6dd0a271b0307b', name: "error-description" }, this.errorDescription)))));
362
362
  }
363
363
  static get formAssociated() { return true; }
364
364
  get el() { return index.getElement(this); }
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var index = require('./index-Te0zRbKN.js');
3
+ var index = require('./index-E_eTmclZ.js');
4
4
  require('react');
5
5
 
6
6
  const nvFielddropdownitemCss = "nv-fielddropdownitem{display:flex;gap:var(--spacing-2);flex-wrap:wrap;align-items:center;width:100%;padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);font-weight:var(--menu-contextual-item-font-weight);font-size:var(--list-dropdown-font-size);line-height:var(--list-dropdown-line-height);color:var(--components-list-dropdown-item-label-default);border-radius:var(--list-dropdown-item-radius);transition:background-color 150ms ease-out, color 150ms ease-out;cursor:pointer}nv-fielddropdownitem:hover,nv-fielddropdownitem:focus,nv-fielddropdownitem:focus-within{background-color:var(--components-list-dropdown-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-fielddropdownitem[disabled]:not([disabled=false]){cursor:not-allowed;background-color:unset;color:var(--components-menu-contextual-item-content-disabled)}nv-fielddropdownitem .text-wrapper{display:flex;flex-grow:1;align-items:center;justify-content:space-between}nv-fielddropdownitem [data-scope=text]{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nv-fielddropdownitem nv-icon[data-scope=selected]{color:var(--components-list-dropdown-item-label-default);align-self:center;margin-left:auto}";
@@ -59,7 +59,7 @@ const NvFielddropdownitem = class {
59
59
  /****************************************************************************/
60
60
  //#region RENDER
61
61
  render() {
62
- return (index.h(index.Host, { key: '42ae50d3837bdc7dcf986114255efde54f021ad2', role: "menuitem", tabindex: '-1', onClick: this.handleSelected }, index.h("slot", { key: '8e61bac8b76d9ababa2999099f47cc906a6112c2' }), !this.composed && (index.h("div", { key: 'b53f386a10225a6ae5dd97978f038feb86c52513', class: "text-wrapper" }, index.h("span", { key: '69431d91f69f96ead8f31754f66943a1772034fc', "data-scope": "text" }, this.label))), this.selected && (index.h("nv-icon", { key: '71d79762ef64c0414661878dca7760217edf04d1', name: "check", "aria-hidden": "true", "data-scope": "selected" }))));
62
+ return (index.h(index.Host, { key: '9006514e798c91bf3d447f6e74f80afc8831813c', role: "menuitem", tabindex: '-1', onClick: this.handleSelected }, index.h("slot", { key: '9344d00bbdaf5fd8e7676ccaf770621925a465b9' }), !this.composed && (index.h("div", { key: '2f64fb5f87cf35dcc7ddf4b9d28c0811c7143c1d', class: "text-wrapper" }, index.h("span", { key: 'c7a17a07092e2cfa9698e885f1ecfcf1fff1a38b', "data-scope": "text" }, this.label))), this.selected && (index.h("nv-icon", { key: '44e8e60b72270c11633fd439ba3c5b3c67e08270', name: "check", "aria-hidden": "true", "data-scope": "selected" }))));
63
63
  }
64
64
  get el() { return index.getElement(this); }
65
65
  };