@nova-design-system/nova-react 3.1.0 → 3.2.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-Cn-oNJnW.js → index-B2jv2KXv.js} +1610 -793
- package/dist/cjs/index.js +2 -1
- package/dist/cjs/{nv-alert.entry-BFwufSUQ.js → nv-alert.entry-pxBJfmIm.js} +1 -1
- package/dist/cjs/{nv-avatar.entry-Do1K4s3s.js → nv-avatar.entry-CHtVctSK.js} +1 -1
- package/dist/cjs/{nv-badge_2.entry-NTGHyFdg.js → nv-badge_2.entry-BO88KO1O.js} +1 -1
- package/dist/cjs/{nv-breadcrumb.entry-oPVGJYlk.js → nv-breadcrumb.entry-7azRtyl5.js} +1 -1
- package/dist/cjs/{nv-breadcrumbs.entry-BsOw153b.js → nv-breadcrumbs.entry-DfZVMKpY.js} +1 -1
- package/dist/cjs/{nv-button.entry-13tdBiRr.js → nv-button.entry-DW9SblsY.js} +1 -1
- package/dist/cjs/{nv-calendar.entry-u9MgGb83.js → nv-calendar.entry-BeayRRor.js} +16 -37
- package/dist/cjs/{nv-col.entry-DFhv-GI7.js → nv-col.entry-C6oEkSbI.js} +1 -1
- package/dist/cjs/{nv-datagrid.entry-BoB17gvI.js → nv-datagrid.entry-xhQP6JJP.js} +95 -103
- package/dist/cjs/{nv-datagridcolumn.entry-C3MYBmfS.js → nv-datagridcolumn.entry-CjYmo4fM.js} +2 -2
- package/dist/cjs/{nv-dialog.entry-OA3qL3Tx.js → nv-dialog.entry-mxETaZbc.js} +1 -1
- package/dist/cjs/{nv-dialogfooter_2.entry-LAQYSiGV.js → nv-dialogfooter_2.entry-DnLg2DHy.js} +1 -1
- package/dist/cjs/{nv-fieldcheckbox.entry-CP7SDzVO.js → nv-fieldcheckbox.entry-Be9__i15.js} +1 -1
- package/dist/cjs/{nv-fielddate.entry-CD7PX6yA.js → nv-fielddate.entry-BlNily-X.js} +2 -2
- package/dist/cjs/{nv-fielddaterange.entry-BVBVGmly.js → nv-fielddaterange.entry-CycpKoJd.js} +73 -18
- package/dist/cjs/{nv-fielddropdown.entry-Nwric1vT.js → nv-fielddropdown.entry-BPwviyCp.js} +84 -60
- package/dist/cjs/{nv-fielddropdownitem.entry-CiqSw5VL.js → nv-fielddropdownitem.entry-BGuUR9KP.js} +1 -1
- package/dist/cjs/{nv-fieldmultiselect.entry-QKNIBcW1.js → nv-fieldmultiselect.entry-Lrxr1gsi.js} +116 -104
- package/dist/cjs/{nv-fieldnumber.entry-DfHcI-sO.js → nv-fieldnumber.entry-B1VySoWj.js} +2 -2
- package/dist/cjs/{nv-fieldpassword.entry-b2pUmS8F.js → nv-fieldpassword.entry-D7Qlx7Bh.js} +2 -2
- package/dist/cjs/{nv-fieldradio.entry-Dxc6ZCyb.js → nv-fieldradio.entry-CDu8xs0p.js} +1 -1
- package/dist/cjs/{nv-fieldselect.entry-Cys0KRyG.js → nv-fieldselect.entry-NEdv8bQK.js} +2 -2
- package/dist/cjs/nv-fieldslider.entry-51gF9XPz.js +660 -0
- package/dist/cjs/{nv-fieldtext.entry-DCZWLFFp.js → nv-fieldtext.entry-Bug9zMgo.js} +5 -5
- package/dist/cjs/{nv-fieldtextarea.entry-DEeRdtZ7.js → nv-fieldtextarea.entry-D44HbsVQ.js} +5 -5
- package/dist/cjs/{nv-fieldtime.entry-BqxiFlLI.js → nv-fieldtime.entry-MbaWbVtc.js} +11 -11
- package/dist/cjs/nv-icon.entry-BSSHr-ud.js +79 -0
- package/dist/cjs/{nv-iconbutton_2.entry-BLNrQz9Q.js → nv-iconbutton_2.entry-DMaO-JWz.js} +3 -3
- package/dist/cjs/{nv-menu.entry-7IDfPmZ8.js → nv-menu.entry-D5_lj9XB.js} +2 -2
- package/dist/cjs/{nv-menuitem.entry-B9cjy7O8.js → nv-menuitem.entry-fhnYI91K.js} +2 -2
- package/dist/cjs/{nv-popover.entry-ChLYZ3zY.js → nv-popover.entry-CYqBaVbr.js} +2 -2
- package/dist/cjs/{nv-row.entry-DiLY8Vbc.js → nv-row.entry-BUheLufV.js} +2 -2
- package/dist/cjs/{nv-stack.entry-MpPzmg5_.js → nv-stack.entry-DNPce51E.js} +2 -2
- package/dist/cjs/{nv-table.entry-cME3Zuq2.js → nv-table.entry-DXQM8l3t.js} +3 -3
- package/dist/cjs/{nv-tablecolumn.entry-DSctDxCS.js → nv-tablecolumn.entry-DROQK_0c.js} +1 -1
- package/dist/cjs/{nv-toggle.entry-EBWm3Xy5.js → nv-toggle.entry-fMzTrdte.js} +3 -3
- package/dist/cjs/{nv-tooltip.entry-q6rJLq1C.js → nv-tooltip.entry-yB2Ek1Cz.js} +3 -3
- package/dist/generated/components.js +8 -0
- package/dist/types/generated/components.d.ts +5 -0
- package/package.json +1 -1
- package/dist/cjs/nv-icon.entry-CzEdUDdA.js +0 -79
package/dist/cjs/{nv-fielddaterange.entry-BVBVGmly.js → nv-fielddaterange.entry-CycpKoJd.js}
RENAMED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-B2jv2KXv.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 nvFielddaterangeCss = "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)}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}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 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>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-icon.validation{color:var(--nv-field-border-default)}nv-fielddaterange .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fielddaterange .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fielddaterange .range-inputs{display:flex;align-items:center;gap:8px}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;text-align:center}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)}";
|
|
9
|
+
const nvFielddaterangeCss = "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}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 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>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-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:8px}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;text-align:center}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)}";
|
|
10
10
|
const NvFielddaterangeStyle0 = nvFielddaterangeCss;
|
|
11
11
|
|
|
12
12
|
const NvFielddaterange = class {
|
|
@@ -66,6 +66,10 @@ const NvFielddaterange = class {
|
|
|
66
66
|
* Controls the opening of the popover.
|
|
67
67
|
*/
|
|
68
68
|
this.open = false;
|
|
69
|
+
/**
|
|
70
|
+
* Current calendar state to prevent unwanted navigation
|
|
71
|
+
*/
|
|
72
|
+
this.calendarState = null;
|
|
69
73
|
/**
|
|
70
74
|
* First day of the week 0 = Sunday, 1 = Monday, etc.
|
|
71
75
|
* @default 1
|
|
@@ -127,7 +131,17 @@ const NvFielddaterange = class {
|
|
|
127
131
|
const input = event.target;
|
|
128
132
|
this.startValue = input.value;
|
|
129
133
|
this.dateRangeChange.emit({ start: input.value, end: this.endValue });
|
|
130
|
-
|
|
134
|
+
// Temporarily enable navigation for keyboard input
|
|
135
|
+
if (this.calendarElement) {
|
|
136
|
+
this.calendarElement.removeAttribute('data-prevent-navigation');
|
|
137
|
+
this.updateCalendarValue();
|
|
138
|
+
// Restore navigation prevention after update
|
|
139
|
+
setTimeout(() => {
|
|
140
|
+
if (this.calendarElement) {
|
|
141
|
+
this.calendarElement.setAttribute('data-prevent-navigation', 'true');
|
|
142
|
+
}
|
|
143
|
+
}, 100);
|
|
144
|
+
}
|
|
131
145
|
};
|
|
132
146
|
/**
|
|
133
147
|
* Handles the input event on the end input element.
|
|
@@ -141,7 +155,17 @@ const NvFielddaterange = class {
|
|
|
141
155
|
const input = event.target;
|
|
142
156
|
this.endValue = input.value;
|
|
143
157
|
this.dateRangeChange.emit({ start: this.startValue, end: input.value });
|
|
144
|
-
|
|
158
|
+
// Temporarily enable navigation for keyboard input
|
|
159
|
+
if (this.calendarElement) {
|
|
160
|
+
this.calendarElement.removeAttribute('data-prevent-navigation');
|
|
161
|
+
this.updateCalendarValue();
|
|
162
|
+
// Restore navigation prevention after update
|
|
163
|
+
setTimeout(() => {
|
|
164
|
+
if (this.calendarElement) {
|
|
165
|
+
this.calendarElement.setAttribute('data-prevent-navigation', 'true');
|
|
166
|
+
}
|
|
167
|
+
}, 100);
|
|
168
|
+
}
|
|
145
169
|
};
|
|
146
170
|
/**
|
|
147
171
|
* Handles focus events on the input elements.
|
|
@@ -153,8 +177,17 @@ const NvFielddaterange = class {
|
|
|
153
177
|
event.target.blur();
|
|
154
178
|
return;
|
|
155
179
|
}
|
|
156
|
-
//
|
|
180
|
+
// Enable navigation on focus
|
|
181
|
+
if (this.calendarElement) {
|
|
182
|
+
this.calendarElement.removeAttribute('data-prevent-navigation');
|
|
183
|
+
}
|
|
157
184
|
this.open = true;
|
|
185
|
+
// Restore navigation prevention after opening
|
|
186
|
+
setTimeout(() => {
|
|
187
|
+
if (this.calendarElement) {
|
|
188
|
+
this.calendarElement.setAttribute('data-prevent-navigation', 'true');
|
|
189
|
+
}
|
|
190
|
+
}, 300);
|
|
158
191
|
};
|
|
159
192
|
/**
|
|
160
193
|
* Toggles the opening/closing of the popover.
|
|
@@ -189,12 +222,12 @@ const NvFielddaterange = class {
|
|
|
189
222
|
return formatMap[format] || 'dd/mm/yyyy';
|
|
190
223
|
}
|
|
191
224
|
/**
|
|
192
|
-
* Update the calendar's rangeValue property
|
|
225
|
+
* Update the calendar's rangeValue property without forcing month change
|
|
193
226
|
*/
|
|
194
227
|
updateCalendarValue() {
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
228
|
+
if (this.calendarElement && this.startValue && this.endValue) {
|
|
229
|
+
// Store the current calendar state
|
|
230
|
+
this.calendarState = {
|
|
198
231
|
start: this.startValue,
|
|
199
232
|
end: this.endValue,
|
|
200
233
|
};
|
|
@@ -212,6 +245,12 @@ const NvFielddaterange = class {
|
|
|
212
245
|
const range = JSON.parse(this.value);
|
|
213
246
|
this.startValue = range.start || '';
|
|
214
247
|
this.endValue = range.end || '';
|
|
248
|
+
if (range.start && range.end) {
|
|
249
|
+
this.calendarState = {
|
|
250
|
+
start: range.start,
|
|
251
|
+
end: range.end,
|
|
252
|
+
};
|
|
253
|
+
}
|
|
215
254
|
}
|
|
216
255
|
catch (error) {
|
|
217
256
|
console.error('Invalid JSON for value:');
|
|
@@ -286,6 +325,7 @@ const NvFielddaterange = class {
|
|
|
286
325
|
if (start && end) {
|
|
287
326
|
this.startValue = start;
|
|
288
327
|
this.endValue = end;
|
|
328
|
+
this.calendarState = { start, end };
|
|
289
329
|
this.dateRangeChange.emit({
|
|
290
330
|
start: this.startValue,
|
|
291
331
|
end: this.endValue,
|
|
@@ -301,6 +341,26 @@ const NvFielddaterange = class {
|
|
|
301
341
|
handleApplyDateRange() {
|
|
302
342
|
this.open = false;
|
|
303
343
|
}
|
|
344
|
+
/**
|
|
345
|
+
* Handles the reset event from the calendar's cancel button
|
|
346
|
+
* @param {CustomEvent} event - The event emitted by the calendar
|
|
347
|
+
*/
|
|
348
|
+
handleDateReset(event) {
|
|
349
|
+
const isResetSingle = event.type === 'singleDateChange' && event.detail === '';
|
|
350
|
+
const isResetRange = event.type === 'rangeDateChange' &&
|
|
351
|
+
event.detail &&
|
|
352
|
+
event.detail.start === '' &&
|
|
353
|
+
event.detail.end === '';
|
|
354
|
+
if (isResetSingle || isResetRange) {
|
|
355
|
+
this.startValue = '';
|
|
356
|
+
this.endValue = '';
|
|
357
|
+
const inputs = this.el.querySelectorAll('.input-wrapper input');
|
|
358
|
+
inputs.forEach((input) => {
|
|
359
|
+
input.value = '';
|
|
360
|
+
});
|
|
361
|
+
this.dateRangeChange.emit({ start: '', end: '' });
|
|
362
|
+
}
|
|
363
|
+
}
|
|
304
364
|
/**
|
|
305
365
|
* Handles keyboard events.
|
|
306
366
|
* @param {KeyboardEvent} event - The keyboard event
|
|
@@ -333,15 +393,10 @@ const NvFielddaterange = class {
|
|
|
333
393
|
/****************************************************************************/
|
|
334
394
|
//#region RENDER
|
|
335
395
|
render() {
|
|
336
|
-
return (index.h(index.Host, { key: '
|
|
337
|
-
this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
end: this.endValue,
|
|
341
|
-
}
|
|
342
|
-
: null, 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" }))), ((this.description && this.description.length > 0) ||
|
|
343
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'af16ac5b05633198fcd91f4ad1513b981ceca4db', class: "description" }, index.h("slot", { key: 'affaa713de178e9d8e8d4e9b210166a9502f5685', name: "description" }, this.description))), (this.errorDescription ||
|
|
344
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '5dfb1d255607efdb7290ffaace2ce18eedf1f123', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (index.h("slot", { name: "error-description" })) : (this.errorDescription))), index.h("slot", { key: '89a4cef668960f0e205916142b6cb192e18cab4c' })));
|
|
396
|
+
return (index.h(index.Host, { key: '152a588b815a0f3846c5b0c8b9da8d3dbc8f4768' }, ((this.label && this.label.length > 0) ||
|
|
397
|
+
this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '786269a2bd4a50559cfad72c61f80797e4afc902', htmlFor: this.startInputId }, index.h("slot", { key: 'e1c6ed7d288d21889e1ebdfdf0595d4f43e551f7', name: "label" }, this.label))), index.h("nv-popover", { key: '228966569f5670f1b283c2e45f1c1057811e699d', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: 'ee39e8da7367bceb1fdcaf7f008d780652471e8e', slot: "trigger", class: "input-wrapper" }, index.h("slot", { key: '0555695d16ae919327771c586a291dc1767ed98f', name: "before-input" }), index.h("div", { key: '106aec6a9be06a03497f66407ea8038d5e4be899', class: "input-container" }, index.h("slot", { key: 'e448f8bacd3b383944f862b9dc1b7ea64feb565e', name: "leading-input" }), index.h("div", { key: '52ef48b4d76f063c65daa43865da607273ba6410', class: "range-inputs" }, index.h("input", { key: '899e309f7e100b7b6d12603b229aa4c429ddc1d2', 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("svg", { key: '083bef93159b08aaf5c9f7637fbe459c2017e82f', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "icon icon-tabler icons-tabler-outline icon-tabler-arrows-move-horizontal" }, index.h("path", { key: '2946dbfae81e0b3cdd62f77bb928617d182ae5c1', stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), index.h("path", { key: 'afcf53514d22c9f8bb5d7d09294808f3ca053cc9', d: "M18 9l3 3l-3 3" }), index.h("path", { key: '53fe61cf1c1a5206f22d4c065292680f28fa3c59', d: "M15 12h6" }), index.h("path", { key: '1e138be2146498fa127922dcba9646e2e960a7e3', d: "M6 9l-3 3l3 3" }), index.h("path", { key: '3e324bf333bd69374fccac278386f6cc966fc3bd', d: "M3 12h6" })), index.h("input", { key: 'b7eeab7a9e0071c862528e8fa47c543d0295d331', 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: 'f2ab540736820a8fcf7f4dbb973bc3a16b14fa8d', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '91e75c515c4a44a3e499240e4d3c45b7a736429a', name: "circle-check", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: 'a471cb1db59673f07ce493bae59e54ee8ecd8968', 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: '375a0c1848445652c2ef5f20ded877223774f792', name: "after-input" })), index.h("div", { key: '7427c51a78cf38a979b9f7eb4e9a7f49a36279d5', slot: "content" }, index.h("nv-calendar", { key: '1f9ad9bed53d9496f17544c6381824490431c342', ref: el => (this.calendarElement = el), dateFormat: this.dateFormat, rangeValue: this.calendarState, 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) ||
|
|
398
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'c964928de34f26fc82619601d0964079b061048f', class: "description" }, index.h("slot", { key: 'f409a5286e1c0ba16f36f062df3df5531dad6296', name: "description" }, this.description))), (this.errorDescription ||
|
|
399
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '5e8a1b48da516f801372a59e379c5ade77f9761a', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (index.h("slot", { name: "error-description" })) : (this.errorDescription))), index.h("slot", { key: '68f37bddcd3208217a26eb230d1f8afdd3552eff' })));
|
|
345
400
|
}
|
|
346
401
|
get el() { return index.getElement(this); }
|
|
347
402
|
static get watchers() { return {
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-B2jv2KXv.js');
|
|
4
4
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
5
5
|
require('react');
|
|
6
6
|
|
|
7
|
-
const nvFielddropdownCss = "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)}nv-fielddropdown[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}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:\"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-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 .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:500;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:\"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-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-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:500;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{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fielddropdown .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";
|
|
7
|
+
const nvFielddropdownCss = "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:700}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:\"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-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:500;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:\"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-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-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:500;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:\"TT Norms Pro\", 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:\"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)}";
|
|
8
8
|
const NvFielddropdownStyle0 = nvFielddropdownCss;
|
|
9
9
|
|
|
10
10
|
const NvFielddropdown = class {
|
|
@@ -21,10 +21,6 @@ const NvFielddropdown = class {
|
|
|
21
21
|
* accessibility.
|
|
22
22
|
*/
|
|
23
23
|
this.inputId = v4A79185f4.v4();
|
|
24
|
-
/**
|
|
25
|
-
* State of the dropdown popover.
|
|
26
|
-
*/
|
|
27
|
-
this.open = false;
|
|
28
24
|
/**
|
|
29
25
|
* The autocomplete prop helps users fill out the input field faster by
|
|
30
26
|
* suggesting entries they've used before, like their email or address.
|
|
@@ -37,12 +33,6 @@ const NvFielddropdown = class {
|
|
|
37
33
|
* before submitting the form.
|
|
38
34
|
*/
|
|
39
35
|
this.required = false;
|
|
40
|
-
/**
|
|
41
|
-
* Alters the input field's appearance to indicate an error, helping users
|
|
42
|
-
* identify fields that need correction.
|
|
43
|
-
* @validator error
|
|
44
|
-
*/
|
|
45
|
-
this.error = false;
|
|
46
36
|
/**
|
|
47
37
|
* Display the input field's content without allowing users to change it.
|
|
48
38
|
* Users can still click on it, select, and copy the text, but they won't be
|
|
@@ -55,6 +45,20 @@ const NvFielddropdown = class {
|
|
|
55
45
|
* clicks or touches.
|
|
56
46
|
*/
|
|
57
47
|
this.disabled = false;
|
|
48
|
+
/**
|
|
49
|
+
* Alters the input field's appearance to indicate an error, helping users
|
|
50
|
+
* identify fields that need correction.
|
|
51
|
+
* @validator error
|
|
52
|
+
*/
|
|
53
|
+
this.error = false;
|
|
54
|
+
/**
|
|
55
|
+
* Defines the maximum height of the multiselect list when open.
|
|
56
|
+
*/
|
|
57
|
+
this.maxHeight = '';
|
|
58
|
+
/**
|
|
59
|
+
* State of the dropdown popover.
|
|
60
|
+
*/
|
|
61
|
+
this.open = false;
|
|
58
62
|
/**
|
|
59
63
|
* The text to display when no items match the filter.
|
|
60
64
|
*/
|
|
@@ -63,6 +67,11 @@ const NvFielddropdown = class {
|
|
|
63
67
|
* Enables or disables the filtering feature for the dropdown items.
|
|
64
68
|
*/
|
|
65
69
|
this.filterable = false;
|
|
70
|
+
/**
|
|
71
|
+
* Delay in milliseconds before the search is triggered when typing in the filter input.
|
|
72
|
+
* @default 300
|
|
73
|
+
*/
|
|
74
|
+
this.debounceDelay = 300;
|
|
66
75
|
/**
|
|
67
76
|
* Applies focus to the input field as soon as the component is mounted. This
|
|
68
77
|
* is equivalent to setting the native autofocus attribute on an <input>
|
|
@@ -76,7 +85,9 @@ const NvFielddropdown = class {
|
|
|
76
85
|
//#endregion PROPERTIES
|
|
77
86
|
/****************************************************************************/
|
|
78
87
|
//#region STATE
|
|
79
|
-
/**
|
|
88
|
+
/**
|
|
89
|
+
* The text entered by the user for filtering dropdown items.
|
|
90
|
+
*/
|
|
80
91
|
this.filterText = '';
|
|
81
92
|
this.selectedValues = new Set();
|
|
82
93
|
this.handleInputContainerClick = (event) => {
|
|
@@ -107,8 +118,15 @@ const NvFielddropdown = class {
|
|
|
107
118
|
}
|
|
108
119
|
const input = event.target;
|
|
109
120
|
this.open = true;
|
|
110
|
-
|
|
111
|
-
this.
|
|
121
|
+
// Clear any existing timer
|
|
122
|
+
if (this.debounceTimer) {
|
|
123
|
+
window.clearTimeout(this.debounceTimer);
|
|
124
|
+
}
|
|
125
|
+
// Set a new timer for filtering
|
|
126
|
+
this.debounceTimer = window.setTimeout(() => {
|
|
127
|
+
this.filterText = input.value.toLowerCase();
|
|
128
|
+
this.filterItems();
|
|
129
|
+
}, this.debounceDelay);
|
|
112
130
|
};
|
|
113
131
|
this.handleInputFocus = () => {
|
|
114
132
|
if (this.disabled || this.readonly)
|
|
@@ -144,6 +162,31 @@ const NvFielddropdown = class {
|
|
|
144
162
|
this.filterItems();
|
|
145
163
|
};
|
|
146
164
|
}
|
|
165
|
+
//#endregion EVENTS
|
|
166
|
+
/****************************************************************************/
|
|
167
|
+
//#region WATCHERS
|
|
168
|
+
handleOptionsChange(newValue) {
|
|
169
|
+
var _a;
|
|
170
|
+
if (!newValue)
|
|
171
|
+
return;
|
|
172
|
+
if (!this.value) {
|
|
173
|
+
const defaultValue = newValue.find(option => option.selected);
|
|
174
|
+
this.value = (_a = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _a !== void 0 ? _a : '';
|
|
175
|
+
this.updateSelectedItem(this.value);
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
watchValueHandler(newValue) {
|
|
179
|
+
this.valueChanged.emit(newValue);
|
|
180
|
+
}
|
|
181
|
+
//#endregion WATCHERS
|
|
182
|
+
/****************************************************************************/
|
|
183
|
+
//#region LISTENERS
|
|
184
|
+
handleOpenChanged(event) {
|
|
185
|
+
// Stop propagation to prevent the event from affecting parent components like dialogs
|
|
186
|
+
event.stopPropagation();
|
|
187
|
+
// Update `open` based on the popover state
|
|
188
|
+
this.open = event.detail;
|
|
189
|
+
}
|
|
147
190
|
handleDropdownItemSelected(event) {
|
|
148
191
|
if (this.disabled || this.readonly)
|
|
149
192
|
return;
|
|
@@ -160,25 +203,6 @@ const NvFielddropdown = class {
|
|
|
160
203
|
this.value = event.detail.value;
|
|
161
204
|
this.open = false;
|
|
162
205
|
}
|
|
163
|
-
handleOpenChanged(event) {
|
|
164
|
-
// Stop propagation to prevent the event from affecting parent components like dialogs
|
|
165
|
-
event.stopPropagation();
|
|
166
|
-
// Update `open` based on the popover state
|
|
167
|
-
this.open = event.detail;
|
|
168
|
-
}
|
|
169
|
-
watchValueHandler(newValue) {
|
|
170
|
-
this.valueChanged.emit(newValue);
|
|
171
|
-
}
|
|
172
|
-
handleOptionsChange(newValue) {
|
|
173
|
-
var _a;
|
|
174
|
-
if (!newValue)
|
|
175
|
-
return;
|
|
176
|
-
if (!this.value) {
|
|
177
|
-
const defaultValue = newValue.find(option => option.selected);
|
|
178
|
-
this.value = (_a = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _a !== void 0 ? _a : '';
|
|
179
|
-
this.updateSelectedItem(this.value);
|
|
180
|
-
}
|
|
181
|
-
}
|
|
182
206
|
handleBlur(event) {
|
|
183
207
|
const target = event.relatedTarget;
|
|
184
208
|
if (!(target instanceof Node) || !this.el.contains(target)) {
|
|
@@ -220,7 +244,27 @@ const NvFielddropdown = class {
|
|
|
220
244
|
this.open = false;
|
|
221
245
|
}
|
|
222
246
|
}
|
|
223
|
-
//#endregion
|
|
247
|
+
//#endregion LISTENERS
|
|
248
|
+
/****************************************************************************/
|
|
249
|
+
//#region LIFECYCLE
|
|
250
|
+
componentWillLoad() {
|
|
251
|
+
this.resetFilter();
|
|
252
|
+
if (this.filterable && this.filterText) {
|
|
253
|
+
this.filterItems();
|
|
254
|
+
}
|
|
255
|
+
if (this.options) {
|
|
256
|
+
this.handleOptionsChange(this.options);
|
|
257
|
+
}
|
|
258
|
+
}
|
|
259
|
+
componentDidLoad() {
|
|
260
|
+
if (this.value) {
|
|
261
|
+
this.updateSelectedItem(this.value);
|
|
262
|
+
}
|
|
263
|
+
if (this.inputElement) {
|
|
264
|
+
this.inputElement.value = this.getSelectedLabel();
|
|
265
|
+
}
|
|
266
|
+
}
|
|
267
|
+
//#endregion LIFECYCLE
|
|
224
268
|
/****************************************************************************/
|
|
225
269
|
//#region METHODS
|
|
226
270
|
/**
|
|
@@ -309,38 +353,18 @@ const NvFielddropdown = class {
|
|
|
309
353
|
}
|
|
310
354
|
//#endregion METHODS
|
|
311
355
|
/****************************************************************************/
|
|
312
|
-
//#region LIFECYCLE
|
|
313
|
-
componentWillLoad() {
|
|
314
|
-
this.resetFilter();
|
|
315
|
-
if (this.filterable && this.filterText) {
|
|
316
|
-
this.filterItems();
|
|
317
|
-
}
|
|
318
|
-
if (this.options) {
|
|
319
|
-
this.handleOptionsChange(this.options);
|
|
320
|
-
}
|
|
321
|
-
}
|
|
322
|
-
componentDidLoad() {
|
|
323
|
-
if (this.value) {
|
|
324
|
-
this.updateSelectedItem(this.value);
|
|
325
|
-
}
|
|
326
|
-
if (this.inputElement) {
|
|
327
|
-
this.inputElement.value = this.getSelectedLabel();
|
|
328
|
-
}
|
|
329
|
-
}
|
|
330
|
-
//#endregion LIFECYCLE
|
|
331
|
-
/****************************************************************************/
|
|
332
356
|
//#region RENDER
|
|
333
357
|
render() {
|
|
334
358
|
var _a;
|
|
335
|
-
return (index.h(index.Host, { key: '
|
|
336
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
337
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
359
|
+
return (index.h(index.Host, { key: '3864f366575665c4730dde8fd0d8e37c4ee11d82', 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: '8ce42f691251468c6c054464ee3695e2bea90bd5', htmlFor: this.inputId }, index.h("slot", { key: '7e779704e1c3f9f6ee71455679c0e1d5d4ee8795', name: "label" }, this.label))), index.h("nv-popover", { key: '82cdd318e195ef44513684afba0e9c9772cad448', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: '1189c8fd06db511cb51721ac14cdc54ef286691c', class: "input-wrapper", slot: "trigger" }, index.h("slot", { key: '9069907e055d77a19c30c045e29eaf4bf998f9a0', name: "before-input" }), index.h("div", { key: '2c57f017b25754d4b5baf44e3457e95256dfdccf', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '939e749473e4df95a28fcf98e8b6d455408bff71', 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: 'dcf54042b261665e5317ac122a93ca12fcedd9bc', name: "x", size: "md", emphasis: "lower", class: "clear-button", onClick: this.clearFilter, "aria-label": "Clear input" })), this.error && (index.h("nv-icon", { key: '3551957d94021648d731f97c1ba7ecdc8a325c15', name: "alert-circle", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: 'e8576d20f760219f236aa9ba52a34f762cc8d23e', "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: '48e9ae570e34cde3d20594a3f6518298ebbad02e', name: "after-input" })), index.h("div", { key: 'cec0a670f4158ca91aa45dcee7a5c25a584226f9', 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: 'e24dbfc170fb20e48ca2a474508a7c9beac6b87e', class: "description" }, index.h("slot", { key: '3b4429e2dd0b4f070309b00c6cba94cd343e7165', name: "description" }, this.description))), (this.errorDescription ||
|
|
361
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'b59ecbf446b142840f5c5933c505900abf126378', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'bf3c16d6a9fdc7a10741518153465a736eff808c', name: "error-description" }, this.errorDescription)))));
|
|
338
362
|
}
|
|
339
363
|
static get formAssociated() { return true; }
|
|
340
364
|
get el() { return index.getElement(this); }
|
|
341
365
|
static get watchers() { return {
|
|
342
|
-
"
|
|
343
|
-
"
|
|
366
|
+
"options": ["handleOptionsChange"],
|
|
367
|
+
"value": ["watchValueHandler"]
|
|
344
368
|
}; }
|
|
345
369
|
};
|
|
346
370
|
NvFielddropdown.style = NvFielddropdownStyle0;
|
package/dist/cjs/{nv-fielddropdownitem.entry-CiqSw5VL.js → nv-fielddropdownitem.entry-BGuUR9KP.js}
RENAMED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-B2jv2KXv.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}";
|