@nova-design-system/nova-react 3.15.0 → 3.16.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.
- package/dist/cjs/{index-BK1_MpRZ.js → index-7K7BV1CP.js} +7303 -4228
- package/dist/cjs/index.js +2 -2
- package/dist/cjs/{nv-accordion-item.entry-BPaDkIFa.js → nv-accordion-item.entry-C-9tYw-c.js} +2 -2
- package/dist/cjs/{nv-accordion.entry-BaHER2iL.js → nv-accordion.entry-BA3mTIdj.js} +6 -6
- package/dist/cjs/{nv-alert.entry-Hv-y3Bwl.js → nv-alert.entry-Bic-YGW1.js} +2 -2
- package/dist/cjs/nv-avatar.entry-C-yd0YlD.js +68 -0
- package/dist/cjs/{nv-badge_2.entry-CwlWa72m.js → nv-badge_2.entry-B_8yvNXL.js} +1 -1
- package/dist/cjs/{nv-breadcrumb.entry-BvHgDgxV.js → nv-breadcrumb.entry-BCTbG942.js} +2 -2
- package/dist/cjs/{nv-breadcrumbs.entry-BdptRKYA.js → nv-breadcrumbs.entry-C9B5Baf7.js} +1 -1
- package/dist/cjs/nv-button.entry-DgX8Bwmq.js +165 -0
- package/dist/cjs/{nv-buttongroup.entry-Bh0f3bAn.js → nv-buttongroup.entry-CKhZN_Yf.js} +1 -1
- package/dist/cjs/{nv-calendar.entry-BZLITXEC.js → nv-calendar.entry-E6Pk83WA.js} +1 -1
- package/dist/cjs/{nv-col.entry-I3bCSLB5.js → nv-col.entry-CkZpukX9.js} +1 -1
- package/dist/cjs/{nv-datagrid.entry-BzIkgOV6.js → nv-datagrid.entry-RsfP7vbC.js} +177 -10
- package/dist/cjs/{nv-datagridcolumn.entry-BuFhEECG.js → nv-datagridcolumn.entry-D4VrDWo9.js} +1 -1
- package/dist/cjs/{nv-dialog.entry-DIbIIXo2.js → nv-dialog.entry-BhtWpYHl.js} +32 -29
- package/dist/cjs/{nv-dialogfooter_2.entry-Thzk1kVd.js → nv-dialogfooter_2.entry-BXLYmzYl.js} +2 -2
- package/dist/cjs/{nv-fieldcheckbox.entry-mkas423y.js → nv-fieldcheckbox.entry-D96Nm6DZ.js} +2 -2
- package/dist/cjs/{nv-fielddate.entry-Cek70TQM.js → nv-fielddate.entry-ty37R9jF.js} +51 -26
- package/dist/cjs/{nv-fielddaterange.entry-C3BYAnVq.js → nv-fielddaterange.entry-BSIRu_mq.js} +68 -42
- package/dist/cjs/{nv-fielddropdown.entry-Djz5-R1T.js → nv-fielddropdown.entry-CUzvIoZZ.js} +33 -7
- package/dist/cjs/{nv-fielddropdownitem.entry-B2z13jEI.js → nv-fielddropdownitem.entry-D-GTxLNk.js} +1 -1
- package/dist/cjs/{nv-fieldmultiselect.entry-uJ9i2gtz.js → nv-fieldmultiselect.entry-DFY2bf6s.js} +187 -156
- package/dist/cjs/{nv-fieldnumber.entry-zpWCDG_-.js → nv-fieldnumber.entry-CILclJ7Q.js} +2 -2
- package/dist/cjs/{nv-fieldpassword.entry-C835HE_i.js → nv-fieldpassword.entry-CdR-NM8e.js} +2 -2
- package/dist/cjs/{nv-fieldradio.entry-CzLMbo4W.js → nv-fieldradio.entry-lC4scIvU.js} +2 -2
- package/dist/cjs/{nv-fieldselect.entry-BzcYzmqe.js → nv-fieldselect.entry-CYu6870F.js} +2 -2
- package/dist/cjs/{nv-fieldslider.entry-B5vyrQZw.js → nv-fieldslider.entry-DOuJAR6P.js} +2 -2
- package/dist/cjs/{nv-fieldtext.entry-DnPQxVqp.js → nv-fieldtext.entry-BFLUiPa4.js} +2 -2
- package/dist/cjs/{nv-fieldtextarea.entry-n2MJK2Jg.js → nv-fieldtextarea.entry-BeI0k97G.js} +2 -2
- package/dist/cjs/{nv-fieldtime.entry-DChhvqKi.js → nv-fieldtime.entry-C28EAKki.js} +25 -12
- package/dist/cjs/nv-icon.entry-BXgjUpe_.js +80 -0
- package/dist/cjs/{nv-iconbutton_2.entry-u0l16LeW.js → nv-iconbutton_2.entry-CpIkxrp9.js} +2 -2
- package/dist/cjs/{nv-menu.entry-OYVh6iMu.js → nv-menu.entry-as-NOsF-.js} +24 -9
- package/dist/cjs/{nv-menuitem.entry-Dj6N1n9X.js → nv-menuitem.entry-D8KAh6nr.js} +1 -1
- package/dist/cjs/{nv-notification.entry-D1dVSEYZ.js → nv-notification.entry-C-_jV-DL.js} +2 -2
- package/dist/cjs/{nv-notificationcontainer.entry-Bp2NR_fe.js → nv-notificationcontainer.entry-CMn42loT.js} +1 -1
- package/dist/cjs/{nv-popover.entry-Bf2AEn9B.js → nv-popover.entry--BhEBSir.js} +67 -61
- package/dist/cjs/{nv-row.entry-Bi9eoQEh.js → nv-row.entry-BxhcK9aY.js} +1 -1
- package/dist/cjs/{nv-stack.entry-Dd680LIT.js → nv-stack.entry-C3DF9jJZ.js} +1 -1
- package/dist/cjs/nv-table.entry-pfEGt2KH.js +245 -0
- package/dist/cjs/nv-toggle.entry-ChpqtQtn.js +80 -0
- package/dist/cjs/{nv-togglebutton.entry-ZpltTrQe.js → nv-togglebutton.entry-DE7CKmeN.js} +2 -2
- package/dist/cjs/{nv-togglebuttongroup.entry-Bu0C6Iq3.js → nv-togglebuttongroup.entry-BJPjdmHD.js} +2 -2
- package/dist/cjs/{nv-tooltip.entry-DR4aj5qF.js → nv-tooltip.entry-D9-Fga6C.js} +2 -2
- package/dist/components/NvDatatable.js +45 -0
- package/dist/generated/components.js +2 -10
- package/dist/generated/components.server.js +1 -16
- package/dist/index.js +1 -0
- package/dist/types/components/NvDatatable.d.ts +25 -0
- package/dist/types/generated/components.d.ts +2 -12
- package/dist/types/generated/components.server.d.ts +2 -12
- package/dist/types/index.d.ts +1 -0
- package/package.json +4 -3
- package/dist/cjs/dom.utils-ac71e0ef-CmIwRr6O.js +0 -168
- package/dist/cjs/nv-avatar.entry-BTmGyeGF.js +0 -68
- package/dist/cjs/nv-button.entry-6O39hBHY.js +0 -165
- package/dist/cjs/nv-icon.entry-agdqxUMS.js +0 -80
- package/dist/cjs/nv-table.entry-wxn9GDDo.js +0 -339
- package/dist/cjs/nv-tablecolumn.entry-Bo0z0XyB.js +0 -19
- package/dist/cjs/nv-toggle.entry-gBokGnGe.js +0 -80
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-7K7BV1CP.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('react-dom');
|
|
8
8
|
require('./_commonjsHelpers-1789f0cf-BJu3ubxk.js');
|
|
9
9
|
|
|
10
|
-
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:
|
|
10
|
+
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:var(--font-weight-high-emphasis)}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:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-label-line-height)}nv-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:var(--font-weight-medium-emphasis);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:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--form-field-line-height)}nv-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-iconbutton:last-of-type{border-top-right-radius:var(--form-field-radius);border-bottom-right-radius:var(--form-field-radius)}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:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fielddate .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";
|
|
11
11
|
const NvFielddateStyle0 = nvFielddateCss;
|
|
12
12
|
|
|
13
13
|
const NvFielddate = class {
|
|
@@ -115,16 +115,17 @@ const NvFielddate = class {
|
|
|
115
115
|
* @param {MouseEvent} event - The click event.
|
|
116
116
|
*/
|
|
117
117
|
this.handleInputContainerClick = (event) => {
|
|
118
|
+
// Stop propagation to prevent closing parent dialogs
|
|
119
|
+
event.stopPropagation();
|
|
118
120
|
if (this.readonly || this.disabled) {
|
|
119
121
|
event.preventDefault();
|
|
120
|
-
event.stopPropagation();
|
|
121
122
|
return;
|
|
122
123
|
}
|
|
123
124
|
this.inputElement.focus();
|
|
124
125
|
};
|
|
125
126
|
/**
|
|
126
127
|
* Handles the input event on the input element.
|
|
127
|
-
* Updates
|
|
128
|
+
* Updates internal state to keep UI in sync - events are only emitted on completion or clear.
|
|
128
129
|
* @param {Event} event - The input event.
|
|
129
130
|
*/
|
|
130
131
|
this.handleInput = (event) => {
|
|
@@ -133,9 +134,11 @@ const NvFielddate = class {
|
|
|
133
134
|
return;
|
|
134
135
|
}
|
|
135
136
|
const input = event.target;
|
|
137
|
+
// Always update singleValue to keep state in sync
|
|
136
138
|
this.singleValue = input.value;
|
|
137
|
-
|
|
138
|
-
if (
|
|
139
|
+
// Only emit event when input is cleared
|
|
140
|
+
if (input.value === '') {
|
|
141
|
+
this.value = '';
|
|
139
142
|
this.valueChanged.emit('');
|
|
140
143
|
}
|
|
141
144
|
};
|
|
@@ -174,11 +177,14 @@ const NvFielddate = class {
|
|
|
174
177
|
};
|
|
175
178
|
/**
|
|
176
179
|
* Toggles the opening/closing of the popover.
|
|
180
|
+
* @param {MouseEvent} event - The click event.
|
|
177
181
|
*/
|
|
178
|
-
this.toggleCalendar = () => {
|
|
182
|
+
this.toggleCalendar = (event) => {
|
|
179
183
|
if (this.readonly || this.disabled) {
|
|
180
184
|
return;
|
|
181
185
|
}
|
|
186
|
+
// Stop propagation to prevent closing parent dialogs
|
|
187
|
+
event.stopPropagation();
|
|
182
188
|
this.open = !this.open;
|
|
183
189
|
};
|
|
184
190
|
}
|
|
@@ -241,7 +247,13 @@ const NvFielddate = class {
|
|
|
241
247
|
postValidation: true,
|
|
242
248
|
oncomplete: (e) => {
|
|
243
249
|
var _a;
|
|
244
|
-
|
|
250
|
+
const newValue = (_a = e.target) === null || _a === void 0 ? void 0 : _a.value;
|
|
251
|
+
// Only emit if the value actually changed
|
|
252
|
+
if (this.value !== newValue) {
|
|
253
|
+
this.singleValue = newValue;
|
|
254
|
+
this.value = newValue;
|
|
255
|
+
this.valueChanged.emit(newValue);
|
|
256
|
+
}
|
|
245
257
|
},
|
|
246
258
|
});
|
|
247
259
|
inputMask.mask(this.inputElement);
|
|
@@ -284,6 +296,30 @@ const NvFielddate = class {
|
|
|
284
296
|
this.inputElement.inputmask.remove();
|
|
285
297
|
}
|
|
286
298
|
}
|
|
299
|
+
//#endregion EVENTS
|
|
300
|
+
/****************************************************************************/
|
|
301
|
+
//#region WATCHERS
|
|
302
|
+
handleValueChange(newValue) {
|
|
303
|
+
this.singleValue = newValue;
|
|
304
|
+
// Only set input value if it's different from current input value
|
|
305
|
+
// This prevents interfering with user typing
|
|
306
|
+
if (this.inputElement && this.inputElement.value !== newValue) {
|
|
307
|
+
this.inputElement.value = newValue;
|
|
308
|
+
}
|
|
309
|
+
}
|
|
310
|
+
handleOpenChange(newOpen) {
|
|
311
|
+
this.updateMask();
|
|
312
|
+
// Additional side effect for external control, e.g., focus calendar if opened externally
|
|
313
|
+
if (newOpen && this.popoverElement) {
|
|
314
|
+
// Focus first selectable date
|
|
315
|
+
const firstDate = this.popoverElement.querySelector('nv-calendar [data-date]');
|
|
316
|
+
if (firstDate)
|
|
317
|
+
firstDate.focus();
|
|
318
|
+
}
|
|
319
|
+
}
|
|
320
|
+
//#endregion WATCHERS
|
|
321
|
+
/****************************************************************************/
|
|
322
|
+
//#region LISTENERS
|
|
287
323
|
/**
|
|
288
324
|
* Handles the single date selection event from nv-calendar.
|
|
289
325
|
* Updates the input value and closes the popover.
|
|
@@ -324,28 +360,17 @@ const NvFielddate = class {
|
|
|
324
360
|
return;
|
|
325
361
|
}
|
|
326
362
|
}
|
|
327
|
-
|
|
328
|
-
this.singleValue = newValue;
|
|
329
|
-
// Only set input value if it's different from current input value
|
|
330
|
-
// This prevents interfering with user typing
|
|
331
|
-
if (this.inputElement && this.inputElement.value !== newValue) {
|
|
332
|
-
this.inputElement.value = newValue;
|
|
333
|
-
}
|
|
334
|
-
}
|
|
335
|
-
handleOpenChange() {
|
|
336
|
-
this.updateMask();
|
|
337
|
-
}
|
|
338
|
-
//#endregion EVENTS
|
|
363
|
+
//#endregion LISTENERS
|
|
339
364
|
/****************************************************************************/
|
|
340
365
|
//#region RENDER
|
|
341
366
|
render() {
|
|
342
|
-
return (index.h(index.Host, { key: '
|
|
343
|
-
this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '
|
|
344
|
-
this.convertToInputmaskFormat(this.dateFormat), name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.autofocus, onInput: this.handleInput, onFocus: this.handleFocus, "data-scope": "date" }), this.error && (index.h("nv-icon", { key: '
|
|
367
|
+
return (index.h(index.Host, { key: '82eb2c86f3fe02b03a7db18d7ae4d7a705765af8' }, ((this.label && this.label.length > 0) ||
|
|
368
|
+
this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '8f8a341b986275fbcebbdc3a67541db0a7692b68', htmlFor: this.inputId }, index.h("slot", { key: 'bdab8a01ff5edc5b1b7490d33a7b526f5ee7e710', name: "label" }, this.label))), index.h("nv-popover", { key: 'af5379b7f23d7d297af947da515d1794ddf2efce', ref: this.setPopoverRef, id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", strategy: "fixed", open: this.open }, index.h("div", { key: 'a7cd18e088c59da8db3962c67fa9bda5e61d0113', slot: "trigger", class: "input-wrapper" }, index.h("slot", { key: '46031415f70467700b382081e769c664728df1e9', name: "before-input" }), index.h("div", { key: 'd92075a9db8ef0857d5d7e4b6f43ab89564eb3d1', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: 'ba368c298cf08b4b321c5d77a5af0bd7f265dcc2', name: "leading-input" }), index.h("input", { key: 'a384558958d5cb4943b17f2d032cc0022bb884dc', id: this.inputId, ref: this.setInputRef, placeholder: this.placeholder ||
|
|
369
|
+
this.convertToInputmaskFormat(this.dateFormat), name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.autofocus, onInput: this.handleInput, onFocus: this.handleFocus, "data-scope": "date" }), this.error && (index.h("nv-icon", { key: 'f3194332ca751ac320b18f6c1d4c888f9237ce58', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: 'dcb9385dfdac0e7b932b8227cf3a434bd4be71c3', name: "circle-check", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: '9e6cf9f850c3602c8f12a717a2a71f260b260820', class: "toggle-calendar-icon", name: "calendar" //{this.open ? 'chevron-top' : 'chevron-down'}
|
|
345
370
|
,
|
|
346
|
-
size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar',
|
|
347
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
348
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
371
|
+
size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), index.h("slot", { key: '1770575c9165c2a4947ffcc11403a72cb0649a19', name: "after-input" })), index.h("div", { key: '993bad8e8f0586e73bb35c3835e210c111f2e092', slot: "content" }, index.h("nv-calendar", { key: 'c3d4ac3ae966152ace53f2a23371bdd1c9ea9071', 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) ||
|
|
372
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '843a383f5880332c41220dd0e52e4123207fc468', class: "description" }, index.h("slot", { key: '6adddd38bc5c3cc633eb953ce21f5ae45fd659f4', name: "description" }, this.description))), (this.errorDescription ||
|
|
373
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'e9715f6fb742cf2fa568cf6ba2c2657ad39de04a', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (index.h("slot", { name: "error-description" })) : (this.errorDescription))), index.h("slot", { key: '2ffea0b9384696a0b9d577c7c08c2faf93ef0917' })));
|
|
349
374
|
}
|
|
350
375
|
get el() { return index.getElement(this); }
|
|
351
376
|
static get watchers() { return {
|
package/dist/cjs/{nv-fielddaterange.entry-C3BYAnVq.js → nv-fielddaterange.entry-BSIRu_mq.js}
RENAMED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-7K7BV1CP.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('react-dom');
|
|
8
8
|
require('./_commonjsHelpers-1789f0cf-BJu3ubxk.js');
|
|
9
9
|
|
|
10
|
-
const nvFielddaterangeCss = "nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range{background:var(--components-slider-track-filled-focus)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb{border-color:var(--components-slider-track-filled-focus)}nv-fieldslider[error] .slider-container .track-container .track .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:hover{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-handler-background-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:focus{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-error)}nv-fielddaterange{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box;max-width:480px}nv-fielddaterange[fluid]:not([fluid=false]){max-width:unset}nv-fielddaterange[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fielddaterange[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive-in-field)}nv-fielddaterange[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fielddaterange[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fielddaterange label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fielddaterange nv-popover{width:100%;display:block}nv-fielddaterange nv-popover [data-scope=popover]{padding:0;background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border);width:auto;z-index:2}nv-fielddaterange nv-popover [slot=content]{display:block;width:100%}nv-fielddaterange .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;display:flex;align-items:center;gap:8px}nv-fielddaterange .input-wrapper .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fielddaterange .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddaterange .input-wrapper .input-container:focus-within,nv-fielddaterange .input-wrapper .input-container:focus-within:hover,nv-fielddaterange .input-wrapper .input-container:focus,nv-fielddaterange .input-wrapper .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fielddaterange .input-wrapper .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fielddaterange .input-wrapper .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fielddaterange .input-wrapper .input-container:focus-within,nv-fielddaterange .input-wrapper .input-container:focus-within:hover,nv-fielddaterange .input-wrapper .input-container:focus,nv-fielddaterange .input-wrapper .input-container:focus:hover{box-shadow:none;border-color:var(--nv-field-border-default)}nv-fielddaterange .input-wrapper .input-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%;width:100%}nv-fielddaterange .input-wrapper .input-container input:focus{outline:none}nv-fielddaterange .input-wrapper .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fielddaterange .input-wrapper .input-container input[type=password]::-ms-clear,nv-fielddaterange .input-wrapper .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fielddaterange .input-wrapper .input-container input:focus-within,nv-fielddaterange .input-wrapper .input-container input:focus-within:hover,nv-fielddaterange .input-wrapper .input-container input:focus,nv-fielddaterange .input-wrapper .input-container input:focus:hover{outline:var(--focus-outline-stroke) solid var(--nv-field-border-focus);outline-offset:0px}nv-fielddaterange .input-wrapper .input-container input:focus-within~.range-separator,nv-fielddaterange .input-wrapper .input-container input:focus-within:hover~.range-separator,nv-fielddaterange .input-wrapper .input-container input:focus~.range-separator,nv-fielddaterange .input-wrapper .input-container input:focus:hover~.range-separator{background-color:transparent}nv-fielddaterange .input-wrapper .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fielddaterange .input-wrapper .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fielddaterange .input-wrapper .input-container>nv-iconbutton:last-of-type{border-top-right-radius:var(--form-field-radius);border-bottom-right-radius:var(--form-field-radius)}nv-fielddaterange .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddaterange .description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fielddaterange .error-description{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)}nv-fielddaterange .range-inputs{display:flex;align-items:center;gap:0;width:100%;z-index:1}nv-fielddaterange .range-inputs input{flex:1;border:none;outline:none;padding:0;font-size:var(--form-field-font-size);color:var(--components-form-field-content-text);background:transparent;min-width:0}nv-fielddaterange .range-inputs input::placeholder{color:var(--components-form-field-content-placeholder)}nv-fielddaterange .range-inputs input:disabled{cursor:not-allowed;color:var(--components-form-field-content-text);background-color:var(--components-form-field-background-disabled)}nv-fielddaterange .range-inputs .range-separator{width:1px;height:1.5rem;background-color:var(--color-content-medium-border)}";
|
|
10
|
+
const nvFielddaterangeCss = "nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range{background:var(--components-slider-track-filled-focus)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb{border-color:var(--components-slider-track-filled-focus)}nv-fieldslider[error] .slider-container .track-container .track .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:hover{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-handler-background-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:focus{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-error)}nv-fielddaterange{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box;max-width:480px}nv-fielddaterange[fluid]:not([fluid=false]){max-width:unset}nv-fielddaterange[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fielddaterange[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive-in-field)}nv-fielddaterange[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fielddaterange[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fielddaterange label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-label-line-height)}nv-fielddaterange nv-popover{width:100%;display:block}nv-fielddaterange nv-popover [data-scope=popover]{padding:0;background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border);width:auto;z-index:2}nv-fielddaterange nv-popover [slot=content]{display:block;width:100%}nv-fielddaterange .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;display:flex;align-items:center;gap:8px}nv-fielddaterange .input-wrapper .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fielddaterange .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddaterange .input-wrapper .input-container:focus-within,nv-fielddaterange .input-wrapper .input-container:focus-within:hover,nv-fielddaterange .input-wrapper .input-container:focus,nv-fielddaterange .input-wrapper .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fielddaterange .input-wrapper .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fielddaterange .input-wrapper .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fielddaterange .input-wrapper .input-container:focus-within,nv-fielddaterange .input-wrapper .input-container:focus-within:hover,nv-fielddaterange .input-wrapper .input-container:focus,nv-fielddaterange .input-wrapper .input-container:focus:hover{box-shadow:none;border-color:var(--nv-field-border-default)}nv-fielddaterange .input-wrapper .input-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-field-line-height);width:100%;width:100%}nv-fielddaterange .input-wrapper .input-container input:focus{outline:none}nv-fielddaterange .input-wrapper .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--form-field-line-height)}nv-fielddaterange .input-wrapper .input-container input[type=password]::-ms-clear,nv-fielddaterange .input-wrapper .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fielddaterange .input-wrapper .input-container input:focus-within,nv-fielddaterange .input-wrapper .input-container input:focus-within:hover,nv-fielddaterange .input-wrapper .input-container input:focus,nv-fielddaterange .input-wrapper .input-container input:focus:hover{outline:var(--focus-outline-stroke) solid var(--nv-field-border-focus);outline-offset:0px}nv-fielddaterange .input-wrapper .input-container input:focus-within~.range-separator,nv-fielddaterange .input-wrapper .input-container input:focus-within:hover~.range-separator,nv-fielddaterange .input-wrapper .input-container input:focus~.range-separator,nv-fielddaterange .input-wrapper .input-container input:focus:hover~.range-separator{background-color:transparent}nv-fielddaterange .input-wrapper .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fielddaterange .input-wrapper .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fielddaterange .input-wrapper .input-container>nv-iconbutton:last-of-type{border-top-right-radius:var(--form-field-radius);border-bottom-right-radius:var(--form-field-radius)}nv-fielddaterange .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddaterange .description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fielddaterange .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fielddaterange .range-inputs{display:flex;align-items:center;gap:0;width:100%;z-index:1}nv-fielddaterange .range-inputs input{flex:1;border:none;outline:none;padding:0;font-size:var(--form-field-font-size);color:var(--components-form-field-content-text);background:transparent;min-width:0}nv-fielddaterange .range-inputs input::placeholder{color:var(--components-form-field-content-placeholder)}nv-fielddaterange .range-inputs input:disabled{cursor:not-allowed;color:var(--components-form-field-content-text);background-color:var(--components-form-field-background-disabled)}nv-fielddaterange .range-inputs .range-separator{width:1px;height:1.5rem;background-color:var(--color-content-medium-border)}";
|
|
11
11
|
const NvFielddaterangeStyle0 = nvFielddaterangeCss;
|
|
12
12
|
|
|
13
13
|
const NvFielddaterange = class {
|
|
@@ -143,6 +143,7 @@ const NvFielddaterange = class {
|
|
|
143
143
|
};
|
|
144
144
|
/**
|
|
145
145
|
* Handles the input event on the start input element.
|
|
146
|
+
* Updates internal state and calendar navigation without emitting events.
|
|
146
147
|
* @param {Event} event - The input event
|
|
147
148
|
*/
|
|
148
149
|
this.handleStartInput = (event) => {
|
|
@@ -151,13 +152,17 @@ const NvFielddaterange = class {
|
|
|
151
152
|
return;
|
|
152
153
|
}
|
|
153
154
|
const input = event.target;
|
|
155
|
+
// Always update startValue to keep state in sync
|
|
154
156
|
this.startValue = input.value;
|
|
155
|
-
// Update
|
|
156
|
-
this.
|
|
157
|
-
|
|
158
|
-
if (this.calendarElement) {
|
|
157
|
+
// Update calendar value for navigation (without triggering events)
|
|
158
|
+
if (this.calendarElement && input.value) {
|
|
159
|
+
// Temporarily enable navigation for keyboard input
|
|
159
160
|
this.calendarElement.removeAttribute('data-prevent-navigation');
|
|
160
|
-
|
|
161
|
+
// Update calendar's rangeValue to allow navigation
|
|
162
|
+
const currentValue = `${input.value},${this.endValue}`;
|
|
163
|
+
if (this.calendarElement.value !== currentValue) {
|
|
164
|
+
this.calendarElement.value = currentValue;
|
|
165
|
+
}
|
|
161
166
|
// Restore navigation prevention after update
|
|
162
167
|
setTimeout(() => {
|
|
163
168
|
if (this.calendarElement) {
|
|
@@ -168,6 +173,7 @@ const NvFielddaterange = class {
|
|
|
168
173
|
};
|
|
169
174
|
/**
|
|
170
175
|
* Handles the input event on the end input element.
|
|
176
|
+
* Updates internal state and calendar navigation without emitting events.
|
|
171
177
|
* @param {Event} event - The input event
|
|
172
178
|
*/
|
|
173
179
|
this.handleEndInput = (event) => {
|
|
@@ -176,13 +182,17 @@ const NvFielddaterange = class {
|
|
|
176
182
|
return;
|
|
177
183
|
}
|
|
178
184
|
const input = event.target;
|
|
185
|
+
// Always update endValue to keep state in sync
|
|
179
186
|
this.endValue = input.value;
|
|
180
|
-
// Update
|
|
181
|
-
this.
|
|
182
|
-
|
|
183
|
-
if (this.calendarElement) {
|
|
187
|
+
// Update calendar value for navigation (without triggering events)
|
|
188
|
+
if (this.calendarElement && input.value) {
|
|
189
|
+
// Temporarily enable navigation for keyboard input
|
|
184
190
|
this.calendarElement.removeAttribute('data-prevent-navigation');
|
|
185
|
-
|
|
191
|
+
// Update calendar's rangeValue to allow navigation
|
|
192
|
+
const currentValue = `${this.startValue},${input.value}`;
|
|
193
|
+
if (this.calendarElement.value !== currentValue) {
|
|
194
|
+
this.calendarElement.value = currentValue;
|
|
195
|
+
}
|
|
186
196
|
// Restore navigation prevention after update
|
|
187
197
|
setTimeout(() => {
|
|
188
198
|
if (this.calendarElement) {
|
|
@@ -215,11 +225,14 @@ const NvFielddaterange = class {
|
|
|
215
225
|
};
|
|
216
226
|
/**
|
|
217
227
|
* Toggles the opening/closing of the popover.
|
|
228
|
+
* @param {MouseEvent} event - The click event.
|
|
218
229
|
*/
|
|
219
|
-
this.toggleCalendar = () => {
|
|
230
|
+
this.toggleCalendar = (event) => {
|
|
220
231
|
if (this.readonly || this.disabled) {
|
|
221
232
|
return;
|
|
222
233
|
}
|
|
234
|
+
// Stop propagation to prevent closing parent dialogs
|
|
235
|
+
event.stopPropagation();
|
|
223
236
|
this.open = !this.open;
|
|
224
237
|
};
|
|
225
238
|
}
|
|
@@ -242,11 +255,6 @@ const NvFielddaterange = class {
|
|
|
242
255
|
};
|
|
243
256
|
return formatMap[format] || 'dd/mm/yyyy';
|
|
244
257
|
}
|
|
245
|
-
/**
|
|
246
|
-
* Update the calendar's rangeValue property without forcing month change
|
|
247
|
-
*/
|
|
248
|
-
updateCalendarValue() {
|
|
249
|
-
}
|
|
250
258
|
/**
|
|
251
259
|
* Clears the current selection and resets the date range field to its initial state.
|
|
252
260
|
* This method can be called programmatically to reset the field.
|
|
@@ -298,22 +306,27 @@ const NvFielddaterange = class {
|
|
|
298
306
|
this.endValue = '';
|
|
299
307
|
}
|
|
300
308
|
},
|
|
301
|
-
oncomplete: () => {
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
.
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
//
|
|
311
|
-
this.
|
|
312
|
-
//
|
|
313
|
-
this.
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
309
|
+
oncomplete: (e) => {
|
|
310
|
+
const input = e.target;
|
|
311
|
+
// Update the corresponding state based on which input completed
|
|
312
|
+
if (input.id === this.startInputId) {
|
|
313
|
+
this.startValue = input.value;
|
|
314
|
+
}
|
|
315
|
+
else if (input.id === this.endInputId) {
|
|
316
|
+
this.endValue = input.value;
|
|
317
|
+
}
|
|
318
|
+
// Update unified value
|
|
319
|
+
const newValue = `${this.startValue},${this.endValue}`;
|
|
320
|
+
// Only emit if both dates are filled and value changed
|
|
321
|
+
if (this.startValue && this.endValue && this.value !== newValue) {
|
|
322
|
+
this.value = newValue;
|
|
323
|
+
this.valueChanged.emit(this.value);
|
|
324
|
+
// Legacy support (deprecated)
|
|
325
|
+
this.dateRangeChange.emit({
|
|
326
|
+
start: this.startValue,
|
|
327
|
+
end: this.endValue,
|
|
328
|
+
});
|
|
329
|
+
}
|
|
317
330
|
},
|
|
318
331
|
});
|
|
319
332
|
inputMask.mask(input);
|
|
@@ -374,17 +387,23 @@ const NvFielddaterange = class {
|
|
|
374
387
|
}
|
|
375
388
|
/**
|
|
376
389
|
* Handles the range date selection event from nv-calendar.
|
|
390
|
+
* Stops propagation to prevent duplicate events with handleCalendarValueChanged.
|
|
377
391
|
* @param {CustomEvent<DateRange>} event - The custom event
|
|
378
392
|
*/
|
|
379
393
|
handleRangeDateChange(event) {
|
|
394
|
+
// Stop propagation to prevent this from being handled by handleCalendarValueChanged
|
|
395
|
+
event.stopPropagation();
|
|
380
396
|
const { start, end } = event.detail || {};
|
|
381
397
|
// Check that both dates are defined
|
|
382
398
|
if (start && end) {
|
|
383
399
|
this.startValue = start;
|
|
384
400
|
this.endValue = end;
|
|
385
401
|
// Update unified value prop (like nv-calendar)
|
|
386
|
-
|
|
387
|
-
|
|
402
|
+
const newValue = `${start},${end}`;
|
|
403
|
+
if (this.value !== newValue) {
|
|
404
|
+
this.value = newValue;
|
|
405
|
+
this.valueChanged.emit(this.value);
|
|
406
|
+
}
|
|
388
407
|
// Legacy support (deprecated)
|
|
389
408
|
this.dateRangeChange.emit({
|
|
390
409
|
start: this.startValue,
|
|
@@ -397,9 +416,16 @@ const NvFielddaterange = class {
|
|
|
397
416
|
}
|
|
398
417
|
/**
|
|
399
418
|
* Handles the unified value change event from nv-calendar
|
|
419
|
+
* Note: This might not be called if rangeDateChange stops propagation first.
|
|
400
420
|
* @param {CustomEvent<string>} event - The custom event
|
|
401
421
|
*/
|
|
402
422
|
handleCalendarValueChanged(event) {
|
|
423
|
+
// Only handle events from the calendar, not from self
|
|
424
|
+
if (event.target === this.el) {
|
|
425
|
+
return;
|
|
426
|
+
}
|
|
427
|
+
// Stop propagation to prevent parent components from receiving calendar events
|
|
428
|
+
event.stopPropagation();
|
|
403
429
|
const newValue = event.detail || '';
|
|
404
430
|
if (newValue !== this.value) {
|
|
405
431
|
this.value = newValue;
|
|
@@ -492,12 +518,12 @@ const NvFielddaterange = class {
|
|
|
492
518
|
/****************************************************************************/
|
|
493
519
|
//#region RENDER
|
|
494
520
|
render() {
|
|
495
|
-
return (index.h(index.Host, { key: '
|
|
496
|
-
this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '
|
|
497
|
-
this.convertToInputmaskFormat(this.dateFormat), name: this.startName, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.autofocus, value: this.startValue, onInput: this.handleStartInput, onFocus: this.handleFocus, "data-scope": "date-range" }), index.h("div", { key: '
|
|
498
|
-
this.convertToInputmaskFormat(this.dateFormat), name: this.endName, disabled: this.disabled, readOnly: this.readonly, required: this.required, value: this.endValue, onInput: this.handleEndInput, onFocus: this.handleFocus, "data-scope": "date-range" })), this.error && (index.h("nv-icon", { key: '
|
|
499
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
500
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
521
|
+
return (index.h(index.Host, { key: '59ecd9fc59245a97bbbeac742552b350708a1528' }, ((this.label && this.label.length > 0) ||
|
|
522
|
+
this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '5b0def9db7f90f9828bc8c08b728784e393c109a', htmlFor: this.startInputId }, index.h("slot", { key: '2b6abe7f34951838636b38cd9bb1a0ed75d6dfbe', name: "label" }, this.label))), index.h("nv-popover", { key: '5407e344f94f1a168e146df52ea04dc857c95aab', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", strategy: "fixed", open: this.open }, index.h("div", { key: 'c34e8ae161ae52bf26686eb4ef3c0f522538f97c', slot: "trigger", class: "input-wrapper" }, index.h("slot", { key: 'dee7a416efa8608661edfdbfb6607ab325d20778', name: "before-input" }), index.h("div", { key: 'b1612645dadbb20c131ec1db6ea790cf03db8645', class: "input-container" }, index.h("slot", { key: '2c978351dc56c751b775641e91d12ac8b0e7a9c5', name: "leading-input" }), index.h("div", { key: 'c8a69b1174c5ed62aeb7408c20ecc614ea735e72', class: "range-inputs" }, index.h("input", { key: '534ef1aebfbb47b2bd9627d1d25701b3b9b50b59', id: this.startInputId, type: "text", placeholder: this.startPlaceholder ||
|
|
523
|
+
this.convertToInputmaskFormat(this.dateFormat), name: this.startName, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.autofocus, value: this.startValue, onInput: this.handleStartInput, onFocus: this.handleFocus, "data-scope": "date-range" }), index.h("div", { key: '36d35e60c3aadc7c8252f14dd7d2565e3be8ecde', class: "range-separator" }), index.h("input", { key: 'e068562f20e2ba20b85b196c1257bf5d9d37c522', id: this.endInputId, type: "text", placeholder: this.endPlaceholder ||
|
|
524
|
+
this.convertToInputmaskFormat(this.dateFormat), name: this.endName, disabled: this.disabled, readOnly: this.readonly, required: this.required, value: this.endValue, onInput: this.handleEndInput, onFocus: this.handleFocus, "data-scope": "date-range" })), this.error && (index.h("nv-icon", { key: '4eb8a4a4e7c6f26d2d182166935df39c7bce8bc4', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '796a276976661bb8506a14e6e05156b672950368', name: "circle-check", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: '9f4115cb1e9ce79f430c1674a2bf39abed781b8b', class: "toggle-calendar-icon", name: "calendar", size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), index.h("slot", { key: '12f19584c116d915c8c292f1e851fd149535991d', name: "after-input" })), index.h("div", { key: 'ddfa1ee0a53cdd7dd613abfe657321bddcd12e7c', slot: "content" }, index.h("nv-calendar", { key: '618e19c1c53a9c97ed6b857368efdef03e8eee32', 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) ||
|
|
525
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '87d197b39117083736b0b6f7737072a2c95e7119', class: "description" }, index.h("slot", { key: '5ee232c12b57e5ce07de09b1bc2968d0bc91ec9d', name: "description" }, this.description))), (this.errorDescription ||
|
|
526
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'f4dd844d8c628a33dd7f59e0c9de3f50154ea00e', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (index.h("slot", { name: "error-description" })) : (this.errorDescription))), index.h("slot", { key: 'af49f08db15166ca7724b5dd08e18bdc06f0ace0' })));
|
|
501
527
|
}
|
|
502
528
|
get el() { return index.getElement(this); }
|
|
503
529
|
static get watchers() { return {
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-7K7BV1CP.js');
|
|
4
4
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
5
5
|
require('react');
|
|
6
6
|
require('react-dom');
|
|
7
7
|
|
|
8
|
-
const nvFielddropdownCss = "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-fielddropdown{--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-fielddropdown[fluid]:not([fluid=false]){max-width:unset}nv-fielddropdown[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-fielddropdown[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-fielddropdown[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:
|
|
8
|
+
const nvFielddropdownCss = "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-fielddropdown{--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-fielddropdown[fluid]:not([fluid=false]){max-width:unset}nv-fielddropdown[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-fielddropdown[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-fielddropdown[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fielddropdown[hidden]:not([hidden=false]) label{display:none}nv-fielddropdown label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-label-line-height)}nv-fielddropdown nv-popover{width:100%;display:block}nv-fielddropdown nv-popover [data-scope=popover]{width:100%;padding:var(--list-dropdown-padding);border-radius:var(--list-dropdown-radius);background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border)}nv-fielddropdown nv-popover [slot=content]{gap:var(--list-dropdown-gap-y);display:flex;flex-direction:column}nv-fielddropdown nv-popover hr{color:var(--components-list-dropdown-separator)}nv-fielddropdown nv-popover div[slot=content]{max-height:calc(90vh - var(--list-dropdown-padding) * 2);overflow-y:auto;position:relative}nv-fielddropdown nv-popover div[slot=content]::-webkit-scrollbar{width:6px;height:6px}nv-fielddropdown nv-popover div[slot=content]::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-fielddropdown nv-popover div[slot=content]::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-fielddropdown .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fielddropdown .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out;position:relative;width:100%;min-height:40px}nv-fielddropdown .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddropdown .input-container:focus-within,nv-fielddropdown .input-container:focus-within:hover,nv-fielddropdown .input-container:focus,nv-fielddropdown .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-fielddropdown .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-fielddropdown .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fielddropdown .input-container input[type=search]::-webkit-search-decoration,nv-fielddropdown .input-container input[type=search]::-webkit-search-cancel-button,nv-fielddropdown .input-container input[type=search]::-webkit-search-results-button,nv-fielddropdown .input-container input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}nv-fielddropdown .input-container input,nv-fielddropdown .input-container p.non-filterable-text{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-field-line-height);width:100%;}nv-fielddropdown .input-container input:focus,nv-fielddropdown .input-container p.non-filterable-text:focus{outline:none}nv-fielddropdown .input-container input::placeholder,nv-fielddropdown .input-container p.non-filterable-text::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--form-field-line-height)}nv-fielddropdown .input-container input[type=password]::-ms-clear,nv-fielddropdown .input-container input[type=password]::-ms-reveal,nv-fielddropdown .input-container p.non-filterable-text[type=password]::-ms-clear,nv-fielddropdown .input-container p.non-filterable-text[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fielddropdown .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fielddropdown .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fielddropdown .input-container>nv-iconbutton:last-of-type{border-top-right-radius:var(--form-field-radius);border-bottom-right-radius:var(--form-field-radius)}nv-fielddropdown .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddropdown .non-filterable-text{display:block;border-radius:var(--form-field-radius);background-color:var(--nv-field-background);color:var(--components-form-field-content-text);font-size:var(--form-field-font-size);font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-field-line-height);box-sizing:border-box;cursor:pointer;height:100%;min-height:40px}nv-fielddropdown .non-filterable-text span{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis}nv-fielddropdown .description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fielddropdown .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";
|
|
9
9
|
const NvFielddropdownStyle0 = nvFielddropdownCss;
|
|
10
10
|
|
|
11
11
|
const NvFielddropdown = class {
|
|
@@ -162,6 +162,17 @@ const NvFielddropdown = class {
|
|
|
162
162
|
this.inputElement.focus();
|
|
163
163
|
this.filterItems();
|
|
164
164
|
};
|
|
165
|
+
this.handleBlurInput = (event) => {
|
|
166
|
+
var _a;
|
|
167
|
+
const relatedTarget = event.relatedTarget;
|
|
168
|
+
if (!this.el.contains(relatedTarget) &&
|
|
169
|
+
!((_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.contains(relatedTarget))) {
|
|
170
|
+
this.open = false;
|
|
171
|
+
if (this.filterable) {
|
|
172
|
+
this.clearFilter(); // Resets input to selected label, clears filterText
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
};
|
|
165
176
|
}
|
|
166
177
|
//#endregion EVENTS
|
|
167
178
|
/****************************************************************************/
|
|
@@ -179,6 +190,15 @@ const NvFielddropdown = class {
|
|
|
179
190
|
watchValueHandler(newValue) {
|
|
180
191
|
this.valueChanged.emit(newValue);
|
|
181
192
|
}
|
|
193
|
+
handleOpenChange(newOpen) {
|
|
194
|
+
// React to external changes, e.g., clear filter or refilter on open
|
|
195
|
+
if (newOpen && this.filterable) {
|
|
196
|
+
this.filterItems(); // Ensure items are filtered if filterText exists
|
|
197
|
+
}
|
|
198
|
+
else if (!newOpen) {
|
|
199
|
+
this.clearFilter(); // Clear on external close
|
|
200
|
+
}
|
|
201
|
+
}
|
|
182
202
|
//#endregion WATCHERS
|
|
183
203
|
/****************************************************************************/
|
|
184
204
|
//#region LISTENERS
|
|
@@ -186,7 +206,12 @@ const NvFielddropdown = class {
|
|
|
186
206
|
// Stop propagation to prevent the event from affecting parent components like dialogs
|
|
187
207
|
event.stopPropagation();
|
|
188
208
|
// Update `open` based on the popover state
|
|
189
|
-
|
|
209
|
+
if (event.target === this.popoverElement) {
|
|
210
|
+
this.open = event.detail;
|
|
211
|
+
}
|
|
212
|
+
if (!event.detail && this.filterable) {
|
|
213
|
+
this.clearFilter();
|
|
214
|
+
}
|
|
190
215
|
}
|
|
191
216
|
handleDropdownItemSelected(event) {
|
|
192
217
|
if (this.disabled || this.readonly)
|
|
@@ -357,15 +382,16 @@ const NvFielddropdown = class {
|
|
|
357
382
|
//#region RENDER
|
|
358
383
|
render() {
|
|
359
384
|
var _a;
|
|
360
|
-
return (index.h(index.Host, { key: '
|
|
361
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
362
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
385
|
+
return (index.h(index.Host, { key: '1d5a87b2a5e9d9ca0be659ba5706b1db068d1d2d', 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: 'b07ca241c89f45292e479de79de618c6444a9c42', htmlFor: this.inputId }, index.h("slot", { key: '0dd6ac2799e187e7233a5a5651ef18d59e4507e8', name: "label" }, this.label))), index.h("nv-popover", { key: 'b06d107776724937816dc4b98a035b282ed6c1f3', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: 'ab755801a0f2a732ea895e04d6c3a85261422f17', class: "input-wrapper", slot: "trigger" }, index.h("slot", { key: 'b78c41d4064cf067d69fa20ae583c1be29d1f620', name: "before-input" }), index.h("div", { key: 'b46f6440660056ff71b9debf503f15ca7046ca02', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '36069ce529fba771c9339a3cb6c9c5c838f441c4', 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, onBlur: this.handleBlurInput })) : (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, onBlur: this.handleBlurInput }, this.getSelectedLabel() || this.value || this.placeholder)), this.filterable && this.filterText && this.open && (index.h("nv-iconbutton", { key: '36f76135c0e3e1e6750c95116aae6ddd397eec1f', name: "x", size: "md", emphasis: "lower", class: "clear-button", onClick: this.clearFilter, "aria-label": "Clear input" })), this.error && (index.h("nv-icon", { key: 'bd73c43ffae11897359adfae69572ee490f0f5c2', name: "alert-circle", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: 'a0f237814e9f58aa9e4d72e73a1747248911ade8', "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', onClick: this.togglePopover, tabIndex: this.disabled ? -1 : 0 })), index.h("slot", { key: '66d2b27cfcf7ef97df493accaa333e0694234344', name: "after-input" })), index.h("div", { key: 'de6d7e18d676788cf0c7bfebd25f22b5cd2067ce', 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 ||
|
|
386
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'ea889c8ecdcfad160010374541b73f548322a0ad', class: "description" }, index.h("slot", { key: 'b69f67d3a03bf1839edd912ea369cfd87395ae51', name: "description" }, this.description))), (this.errorDescription ||
|
|
387
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '6ecd397cb41aab81173992c90e42f593f1227730', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '3dff83b119d3cbbf2d00bc8641882326d08f939d', name: "error-description" }, this.errorDescription)))));
|
|
363
388
|
}
|
|
364
389
|
static get formAssociated() { return true; }
|
|
365
390
|
get el() { return index.getElement(this); }
|
|
366
391
|
static get watchers() { return {
|
|
367
392
|
"options": ["handleOptionsChange"],
|
|
368
|
-
"value": ["watchValueHandler"]
|
|
393
|
+
"value": ["watchValueHandler"],
|
|
394
|
+
"open": ["handleOpenChange"]
|
|
369
395
|
}; }
|
|
370
396
|
};
|
|
371
397
|
NvFielddropdown.style = NvFielddropdownStyle0;
|