@nova-design-system/nova-react 3.8.0 → 3.9.1
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-Bb1XKZGx.js → index-BtjpbnUr.js} +204 -237
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/{nv-accordion-item.entry-C5661fm-.js → nv-accordion-item.entry-Dr_2iHhQ.js} +1 -1
- package/dist/cjs/{nv-accordion.entry-CP_zsF6b.js → nv-accordion.entry-CYVpcwuY.js} +1 -1
- package/dist/cjs/{nv-alert.entry-D_p0AAmo.js → nv-alert.entry-C_H-R9wb.js} +1 -1
- package/dist/cjs/{nv-avatar.entry-BnilI7zk.js → nv-avatar.entry-BeSOqGvb.js} +1 -1
- package/dist/cjs/{nv-badge_2.entry-ChSAhfAs.js → nv-badge_2.entry-BGWUswPo.js} +1 -1
- package/dist/cjs/{nv-breadcrumb.entry-Buou7RzA.js → nv-breadcrumb.entry-yQozUTFi.js} +1 -1
- package/dist/cjs/{nv-breadcrumbs.entry-8F3MtWWO.js → nv-breadcrumbs.entry-Qar1fOI7.js} +1 -1
- package/dist/cjs/{nv-button.entry-ChGTpHXs.js → nv-button.entry-M_c4r8PX.js} +1 -1
- package/dist/cjs/{nv-calendar.entry-6F5iqww_.js → nv-calendar.entry-DFE372aB.js} +10 -4
- package/dist/cjs/{nv-col.entry-D_uhyhgW.js → nv-col.entry-Bi8pH33J.js} +1 -1
- package/dist/cjs/{nv-datagrid.entry-CcHlFYFE.js → nv-datagrid.entry-B-blFDg-.js} +1 -1
- package/dist/cjs/{nv-datagridcolumn.entry-BfWZGDa6.js → nv-datagridcolumn.entry-CAzB7NtB.js} +1 -1
- package/dist/cjs/{nv-dialog.entry-BsBvypIE.js → nv-dialog.entry-Bdw3O22w.js} +20 -33
- package/dist/cjs/{nv-dialogfooter_2.entry-CRLL5Dgd.js → nv-dialogfooter_2.entry-BTUrxVzn.js} +2 -2
- package/dist/cjs/{nv-fieldcheckbox.entry-Bq5qfost.js → nv-fieldcheckbox.entry-DNzC8s-J.js} +1 -1
- package/dist/cjs/{nv-fielddate.entry-CovA2_W4.js → nv-fielddate.entry-BI8REINj.js} +63 -95
- package/dist/cjs/{nv-fielddaterange.entry-DYUoBivt.js → nv-fielddaterange.entry-B7mtEV97.js} +53 -34
- package/dist/cjs/{nv-fielddropdown.entry-BoQNqqD1.js → nv-fielddropdown.entry-Cz7yuHTj.js} +1 -1
- package/dist/cjs/{nv-fielddropdownitem.entry-PjgKcj17.js → nv-fielddropdownitem.entry-CH_C4Dr-.js} +1 -1
- package/dist/cjs/{nv-fieldmultiselect.entry-DYoxBuHi.js → nv-fieldmultiselect.entry-BqEdEUR0.js} +1 -1
- package/dist/cjs/{nv-fieldnumber.entry-7gqmeRyL.js → nv-fieldnumber.entry-BhRb8v1L.js} +1 -1
- package/dist/cjs/{nv-fieldpassword.entry-Dkd4jwfO.js → nv-fieldpassword.entry-BL4T90zr.js} +1 -1
- package/dist/cjs/{nv-fieldradio.entry-Bvod-7bv.js → nv-fieldradio.entry-D-x10Pri.js} +1 -1
- package/dist/cjs/{nv-fieldselect.entry-DF_mKXpV.js → nv-fieldselect.entry-B-kynHlw.js} +15 -27
- package/dist/cjs/{nv-fieldslider.entry-RindpJRB.js → nv-fieldslider.entry-D6X0LJKJ.js} +1 -1
- package/dist/cjs/{nv-fieldtext.entry-DyA5rIaN.js → nv-fieldtext.entry-xR41AQcM.js} +1 -1
- package/dist/cjs/{nv-fieldtextarea.entry-B0AebkE0.js → nv-fieldtextarea.entry-4mqhSSHM.js} +1 -1
- package/dist/cjs/{nv-fieldtime.entry-DZzNBYkw.js → nv-fieldtime.entry-S3r7RYwN.js} +1 -1
- package/dist/cjs/nv-icon.entry-C2t6pj-B.js +79 -0
- package/dist/cjs/{nv-iconbutton_2.entry-jD1sVaAa.js → nv-iconbutton_2.entry-Cv1d6ktl.js} +1 -1
- package/dist/cjs/{nv-menu.entry-DsX3fpng.js → nv-menu.entry-J_Ytq1Kn.js} +1 -1
- package/dist/cjs/{nv-menuitem.entry-CF5tWPyu.js → nv-menuitem.entry-DpOO9tMo.js} +1 -1
- package/dist/cjs/{nv-popover.entry-B0OYp4lU.js → nv-popover.entry-BZJHJXSA.js} +1 -1
- package/dist/cjs/{nv-row.entry-D_OqCwin.js → nv-row.entry-D4qBjtBv.js} +1 -1
- package/dist/cjs/{nv-stack.entry-Bn_KHqkn.js → nv-stack.entry-DOc6ZvMZ.js} +1 -1
- package/dist/cjs/{nv-table.entry-Cm2muhHl.js → nv-table.entry-7-TxQSlH.js} +1 -1
- package/dist/cjs/{nv-tablecolumn.entry-OkY7JWJW.js → nv-tablecolumn.entry-Bd4xWDYD.js} +1 -1
- package/dist/cjs/{nv-toggle.entry-GveVeY_m.js → nv-toggle.entry-DJmXXavz.js} +1 -1
- package/dist/cjs/{nv-tooltip.entry-Dg5r_8bW.js → nv-tooltip.entry-D9nl_ejz.js} +1 -1
- package/dist/generated/components.server.js +0 -1
- package/package.json +1 -1
- package/dist/cjs/nv-icon.entry-DxLyBjnd.js +0 -79
package/dist/cjs/{nv-fielddaterange.entry-DYUoBivt.js → nv-fielddaterange.entry-B7mtEV97.js}
RENAMED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-BtjpbnUr.js');
|
|
4
4
|
var inputmaskEdcad3c1 = require('./inputmask-edcad3c1-B9Omti4z.js');
|
|
5
5
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
6
6
|
require('react');
|
|
@@ -130,12 +130,6 @@ const NvFielddaterange = class {
|
|
|
130
130
|
this.startValue = values[0];
|
|
131
131
|
this.endValue = values[1];
|
|
132
132
|
}
|
|
133
|
-
else {
|
|
134
|
-
// Handle malformed value gracefully
|
|
135
|
-
console.warn(`Invalid date range format: ${value}`);
|
|
136
|
-
this.startValue = '';
|
|
137
|
-
this.endValue = '';
|
|
138
|
-
}
|
|
139
133
|
};
|
|
140
134
|
/**
|
|
141
135
|
* Closes the popover when a click is detected outside the component.
|
|
@@ -159,9 +153,6 @@ const NvFielddaterange = class {
|
|
|
159
153
|
this.startValue = input.value;
|
|
160
154
|
// Update unified value prop
|
|
161
155
|
this.value = `${input.value},${this.endValue}`;
|
|
162
|
-
this.valueChanged.emit(this.value);
|
|
163
|
-
// Legacy support (deprecated)
|
|
164
|
-
this.dateRangeChange.emit({ start: input.value, end: this.endValue });
|
|
165
156
|
// Temporarily enable navigation for keyboard input
|
|
166
157
|
if (this.calendarElement) {
|
|
167
158
|
this.calendarElement.removeAttribute('data-prevent-navigation');
|
|
@@ -187,9 +178,6 @@ const NvFielddaterange = class {
|
|
|
187
178
|
this.endValue = input.value;
|
|
188
179
|
// Update unified value prop
|
|
189
180
|
this.value = `${this.startValue},${input.value}`;
|
|
190
|
-
this.valueChanged.emit(this.value);
|
|
191
|
-
// Legacy support (deprecated)
|
|
192
|
-
this.dateRangeChange.emit({ start: this.startValue, end: input.value });
|
|
193
181
|
// Temporarily enable navigation for keyboard input
|
|
194
182
|
if (this.calendarElement) {
|
|
195
183
|
this.calendarElement.removeAttribute('data-prevent-navigation');
|
|
@@ -286,6 +274,50 @@ const NvFielddaterange = class {
|
|
|
286
274
|
this.calendarElement.clear();
|
|
287
275
|
}
|
|
288
276
|
}
|
|
277
|
+
updateMask() {
|
|
278
|
+
const inputs = this.el.querySelectorAll('.input-wrapper input');
|
|
279
|
+
inputs.forEach((input) => {
|
|
280
|
+
var _a, _b;
|
|
281
|
+
(_b = (_a = input.inputmask) === null || _a === void 0 ? void 0 : _a.remove) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
282
|
+
const inputMask = new inputmaskEdcad3c1.Inputmask({
|
|
283
|
+
alias: 'datetime',
|
|
284
|
+
inputFormat: this.convertToInputmaskFormat(this.dateFormat),
|
|
285
|
+
placeholder: this.convertToInputmaskFormat(this.dateFormat),
|
|
286
|
+
clearIncomplete: false,
|
|
287
|
+
showMaskOnHover: false,
|
|
288
|
+
showMaskOnFocus: true,
|
|
289
|
+
clearMaskOnLostFocus: !this.open,
|
|
290
|
+
postValidation: true,
|
|
291
|
+
oncleared: (e) => {
|
|
292
|
+
const input = e.target;
|
|
293
|
+
if (input.id === this.startInputId) {
|
|
294
|
+
this.startValue = '';
|
|
295
|
+
}
|
|
296
|
+
if (input.id === this.endInputId) {
|
|
297
|
+
this.endValue = '';
|
|
298
|
+
}
|
|
299
|
+
},
|
|
300
|
+
oncomplete: () => {
|
|
301
|
+
if (/[a-zA-Z]/g.test(this.value))
|
|
302
|
+
return;
|
|
303
|
+
const values = this.value
|
|
304
|
+
.split(',')
|
|
305
|
+
.map(v => v.trim())
|
|
306
|
+
.filter(Boolean);
|
|
307
|
+
if (values.length < 2)
|
|
308
|
+
return;
|
|
309
|
+
// If valid emit change event
|
|
310
|
+
this.valueChanged.emit(this.value);
|
|
311
|
+
// Legacy support (deprecated)
|
|
312
|
+
this.dateRangeChange.emit({
|
|
313
|
+
start: this.startValue,
|
|
314
|
+
end: input.value,
|
|
315
|
+
});
|
|
316
|
+
},
|
|
317
|
+
});
|
|
318
|
+
inputMask.mask(input);
|
|
319
|
+
});
|
|
320
|
+
}
|
|
289
321
|
//#endregion METHODS
|
|
290
322
|
/****************************************************************************/
|
|
291
323
|
//#region LIFECYCLE
|
|
@@ -299,25 +331,9 @@ const NvFielddaterange = class {
|
|
|
299
331
|
}
|
|
300
332
|
}
|
|
301
333
|
componentDidLoad() {
|
|
334
|
+
this.updateMask();
|
|
302
335
|
const inputs = this.el.querySelectorAll('.input-wrapper input');
|
|
303
336
|
inputs.forEach((input) => {
|
|
304
|
-
const inputMask = new inputmaskEdcad3c1.Inputmask({
|
|
305
|
-
alias: 'datetime',
|
|
306
|
-
inputFormat: this.convertToInputmaskFormat(this.dateFormat),
|
|
307
|
-
placeholder: this.convertToInputmaskFormat(this.dateFormat),
|
|
308
|
-
clearIncomplete: false,
|
|
309
|
-
showMaskOnHover: false,
|
|
310
|
-
showMaskOnFocus: false,
|
|
311
|
-
clearMaskOnLostFocus: false,
|
|
312
|
-
insertMode: true,
|
|
313
|
-
rightAlign: false,
|
|
314
|
-
oncomplete: function (e) {
|
|
315
|
-
const input = e.target;
|
|
316
|
-
const event = new CustomEvent('input', { bubbles: true });
|
|
317
|
-
input.dispatchEvent(event);
|
|
318
|
-
},
|
|
319
|
-
});
|
|
320
|
-
inputMask.mask(input);
|
|
321
337
|
// Set the value after applying the mask
|
|
322
338
|
if (input.name === this.startName && this.startValue) {
|
|
323
339
|
requestAnimationFrame(() => {
|
|
@@ -449,6 +465,7 @@ const NvFielddaterange = class {
|
|
|
449
465
|
this.parseUnifiedValue(newValue);
|
|
450
466
|
}
|
|
451
467
|
onOpenChanged(newValue) {
|
|
468
|
+
this.updateMask();
|
|
452
469
|
if (this.contentRef) {
|
|
453
470
|
if (newValue) {
|
|
454
471
|
this.contentRef.style.transition = 'none';
|
|
@@ -474,10 +491,12 @@ const NvFielddaterange = class {
|
|
|
474
491
|
/****************************************************************************/
|
|
475
492
|
//#region RENDER
|
|
476
493
|
render() {
|
|
477
|
-
return (index.h(index.Host, { key: '
|
|
478
|
-
this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '
|
|
479
|
-
|
|
480
|
-
|
|
494
|
+
return (index.h(index.Host, { key: '2f100d067fa3ca5917252ac2ce921eecac98791e' }, ((this.label && this.label.length > 0) ||
|
|
495
|
+
this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'd427e5fd307896971a798a61461a5545af107d95', htmlFor: this.startInputId }, index.h("slot", { key: 'b6735f19e0fa53528e0c088ee81eb54f7076a8b5', name: "label" }, this.label))), index.h("nv-popover", { key: '069225a1606c105b9370f6eb0b5268fbf3fc5d96', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: 'ec43cbd1c063f2e8c4de3e765b776982da607fbe', slot: "trigger", class: "input-wrapper" }, index.h("slot", { key: '6d6dc2263764bdd53674d9b62eb04904ceecf428', name: "before-input" }), index.h("div", { key: 'd465d4a360baf008977e9f9c23058980c7357668', class: "input-container" }, index.h("slot", { key: '52463fb16a84025f910ab5d34ad5f95e575a3999', name: "leading-input" }), index.h("div", { key: 'a432151dabdf6976f463d794b24b85cb7c784d3f', class: "range-inputs" }, index.h("input", { key: '98e48271dce40353ba577aedc1daca8398f9526a', id: this.startInputId, type: "text", placeholder: this.startPlaceholder ||
|
|
496
|
+
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: 'daddef3bb169bcdf4baf4d5dd7c727d7fa66dd0f', class: "range-separator" }), index.h("input", { key: 'c498d3b8a82372606d315a3102ada5763bc4791e', id: this.endInputId, type: "text", placeholder: this.endPlaceholder ||
|
|
497
|
+
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: 'c83a0f241b7eb2407117a5eb52caa1bee955c764', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: 'a96c7cd55a903e38f10453fe6bbea0f828573367', name: "circle-check", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: '39b92aa357457f0be9264335173f8335fdd84b26', 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: 'b739f98ecb80e73fd84b557a0165438beb3f16bd', name: "after-input" })), index.h("div", { key: '503406610a224a2b0173fcf6117b1b3a45d3d44d', slot: "content" }, index.h("nv-calendar", { key: 'ac97339bef8aa214da1317601a31af2c2555acaa', 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) ||
|
|
498
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '302bf932d36f484db34d7c94206697fb469faadc', class: "description" }, index.h("slot", { key: '133e4c69264dbb856f42dee40fbdfe2286caf87d', name: "description" }, this.description))), (this.errorDescription ||
|
|
499
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '2cc57d57cb18cc7ac89135f5e128ffa9ee5487bc', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (index.h("slot", { name: "error-description" })) : (this.errorDescription))), index.h("slot", { key: '3ef1b28e2bd3879c33faefd20af8cf33360af56c' })));
|
|
481
500
|
}
|
|
482
501
|
get el() { return index.getElement(this); }
|
|
483
502
|
static get watchers() { return {
|
package/dist/cjs/{nv-fielddropdownitem.entry-PjgKcj17.js → nv-fielddropdownitem.entry-CH_C4Dr-.js}
RENAMED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-BtjpbnUr.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}";
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-BtjpbnUr.js');
|
|
4
4
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
5
5
|
require('react');
|
|
6
6
|
|
|
7
|
-
const nvFieldselectCss = "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-fieldselect{--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-fieldselect[fluid]:not([fluid=false]){max-width:unset}nv-fieldselect[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-fieldselect[display-value]:not([display-value=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-fieldselect[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-fieldselect[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-fieldselect[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fieldselect[multiple]:not([multiple=false]) .select-wrapper>.select-container>.select-icons{top:var(--form-field-padding-y);right:var(--form-field-padding-x)}nv-fieldselect[multiple]:not([multiple=false]) .select-wrapper>.select-container>select{height:100%;box-sizing:border-box}nv-fieldselect 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-fieldselect .select-wrapper{display:flex;flex-wrap:wrap;align-items:stretch;align-self:stretch}nv-fieldselect .select-wrapper .select-container{position:relative;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);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldselect .select-wrapper .select-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldselect .select-wrapper .select-container:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldselect .select-wrapper .select-container:has(select:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldselect .select-wrapper .select-container>.select-icons{position:absolute;right:0;top:0;pointer-events:none}nv-fieldselect .select-wrapper .select-container>.select-icons>nv-iconbutton{border:0px;border-radius:0px}nv-fieldselect .select-wrapper .select-container>.select-icons>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldselect .select-wrapper .select-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%;}nv-fieldselect .select-wrapper .select-container input:focus{outline:none}nv-fieldselect .select-wrapper .select-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-fieldselect .select-wrapper .select-container input[type=password]::-ms-clear,nv-fieldselect .select-wrapper .select-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldselect .select-wrapper .select-container input:read-only{opacity:0.5;background-color:var(--components-form-field-background-readonly, rgba(0, 0, 0, 0.1));border-color:var(--nv-field-border-readonly)}nv-fieldselect .select-wrapper .select-container select{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;height:var(--form-field-line-height);padding:var(--form-field-padding-y) var(--form-field-padding-x);box-sizing:content-box;-webkit-appearance:none;-moz-appearance:none;cursor:pointer}nv-fieldselect .select-wrapper .select-container select:focus{outline:none}nv-fieldselect .select-wrapper .select-container select::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-fieldselect .select-wrapper .select-container select option{font-size:var(--form-field-font-size, 16px);font-style:normal;font-weight:500;line-height:var(--form-field-line-height, 24px)}nv-fieldselect .select-wrapper .select-container select.hidden{display:none}nv-fieldselect .select-wrapper .select-container nv-icon.readonly-icon{color:var(--nv-field-border-default)}nv-fieldselect .select-wrapper .select-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldselect .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-fieldselect .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)}";
|
|
7
|
+
const nvFieldselectCss = "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-fieldselect{--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-fieldselect[fluid]:not([fluid=false]){max-width:unset}nv-fieldselect[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-fieldselect[display-value]:not([display-value=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-fieldselect[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-fieldselect[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-fieldselect[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fieldselect[multiple]:not([multiple=false]) .select-wrapper>.select-container>.select-icons{top:var(--form-field-padding-y);right:var(--form-field-padding-x)}nv-fieldselect[multiple]:not([multiple=false]) .select-wrapper>.select-container>select{height:100%;box-sizing:border-box}nv-fieldselect 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-fieldselect .select-wrapper{display:flex;flex-wrap:wrap;align-items:stretch;align-self:stretch}nv-fieldselect .select-wrapper .select-container{position:relative;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);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldselect .select-wrapper .select-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldselect .select-wrapper .select-container:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldselect .select-wrapper .select-container:has(select:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldselect .select-wrapper .select-container>.select-icons{position:absolute;right:0;top:0;pointer-events:none}nv-fieldselect .select-wrapper .select-container>.select-icons>nv-iconbutton{border:0px;border-radius:0px}nv-fieldselect .select-wrapper .select-container>.select-icons>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldselect .select-wrapper .select-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%;}nv-fieldselect .select-wrapper .select-container input:focus{outline:none}nv-fieldselect .select-wrapper .select-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-fieldselect .select-wrapper .select-container input[type=password]::-ms-clear,nv-fieldselect .select-wrapper .select-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldselect .select-wrapper .select-container input:read-only{opacity:0.5;background-color:var(--components-form-field-background-readonly, rgba(0, 0, 0, 0.1));border-color:var(--nv-field-border-readonly)}nv-fieldselect .select-wrapper .select-container select{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;height:var(--form-field-line-height);padding:var(--form-field-padding-y) var(--form-field-padding-x);box-sizing:content-box;-webkit-appearance:none;-moz-appearance:none;cursor:pointer}nv-fieldselect .select-wrapper .select-container select:focus{outline:none}nv-fieldselect .select-wrapper .select-container select::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-fieldselect .select-wrapper .select-container select option{font-size:var(--form-field-font-size, 16px);font-style:normal;font-weight:500;line-height:var(--form-field-line-height, 24px);background-color:var(--color-level-05-background);color:var(--components-form-field-content-text)}nv-fieldselect .select-wrapper .select-container select.hidden{display:none}nv-fieldselect .select-wrapper .select-container nv-icon.readonly-icon{color:var(--nv-field-border-default)}nv-fieldselect .select-wrapper .select-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldselect .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-fieldselect .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 NvFieldselectStyle0 = nvFieldselectCss;
|
|
9
9
|
|
|
10
10
|
const NvFieldselect = class {
|
|
@@ -16,10 +16,6 @@ const NvFieldselect = class {
|
|
|
16
16
|
//#region STATES
|
|
17
17
|
this.computedDisplayValue = '';
|
|
18
18
|
this.internalReadonly = false;
|
|
19
|
-
/**
|
|
20
|
-
* Parsed options stored internally
|
|
21
|
-
*/
|
|
22
|
-
this.parsedOptions = [];
|
|
23
19
|
//#endregion STATES
|
|
24
20
|
/****************************************************************************/
|
|
25
21
|
//#region PROPERTIES
|
|
@@ -169,24 +165,16 @@ const NvFieldselect = class {
|
|
|
169
165
|
}
|
|
170
166
|
}
|
|
171
167
|
/**
|
|
172
|
-
*
|
|
173
|
-
* @param {
|
|
168
|
+
* Handle options change and update the internal state
|
|
169
|
+
* @param {typeof this.options} newValue - The new value of options
|
|
174
170
|
*/
|
|
175
171
|
handleOptionsChange(newValue) {
|
|
176
|
-
if (
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
if (selectedOption) {
|
|
183
|
-
this.value = selectedOption.value;
|
|
184
|
-
}
|
|
185
|
-
}
|
|
186
|
-
catch (error) {
|
|
187
|
-
console.error('Error parsing options:', error);
|
|
188
|
-
this.parsedOptions = [];
|
|
189
|
-
}
|
|
172
|
+
if (!newValue)
|
|
173
|
+
return;
|
|
174
|
+
// Update the value if an option is pre-selected
|
|
175
|
+
const selectedOption = newValue.find(opt => opt.selected);
|
|
176
|
+
if (selectedOption) {
|
|
177
|
+
this.value = selectedOption.value;
|
|
190
178
|
}
|
|
191
179
|
}
|
|
192
180
|
/**
|
|
@@ -347,13 +335,13 @@ const NvFieldselect = class {
|
|
|
347
335
|
* @returns {HTMLStencilElement} The HTML element to render.
|
|
348
336
|
*/
|
|
349
337
|
render() {
|
|
350
|
-
return (index.h(index.Host, { key: '
|
|
338
|
+
return (index.h(index.Host, { key: '6db1f2e159308d8b1e78932522c62f73e78db893' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'c329b6bb95018b0d9e574516ca8e801ea82828be', htmlFor: this.inputId }, index.h("slot", { key: '94d57fd7026986a8ef86dacffb70f0e590c8d2d7', name: "label" }, this.label))), index.h("div", { key: 'fca0df783ac46ebd16aa8b6e8db1450d81d2a0e7', class: "select-wrapper" }, index.h("slot", { key: 'bd944f336912516b83f32f58bd76a7ff80de2fb6', name: "before-input" }), index.h("div", { key: '42729a7ba192d85fa76abef9b928c98e514f7ff3', class: "select-container", onClick: this.handleSelectContainerClick }, index.h("slot", { key: '90ca0a9446a62a756e19b0b71db10fe8147eba25', name: "leading-input" }), this.internalReadonly && (index.h("input", { key: '55b2cf61b1ad07479a104c8d2ff4f46f41dd1677', id: this.inputId + '-readonly', type: "text", value: this.computedDisplayValue, readonly: true, class: "readonly-input", "aria-readonly": "true", "aria-label": this.label, "aria-describedby": this.error
|
|
351
339
|
? `${this.inputId}-error`
|
|
352
|
-
: `${this.inputId}-description` })), index.h("select", { key: '
|
|
340
|
+
: `${this.inputId}-description` })), index.h("select", { key: '482be9d241679ad9f77f199c00b4a8d0434ac91e', id: this.inputId, ref: el => (this.selectElement = el), name: this.name, autofocus: this.autofocus, disabled: this.disabled, required: this.required, multiple: this.multiple, onChange: this.handleSelectChange, class: this.internalReadonly ? 'hidden' : '', "aria-label": this.label, "aria-describedby": this.error
|
|
353
341
|
? `${this.inputId}-error`
|
|
354
|
-
: `${this.inputId}-description` }, this.
|
|
355
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
356
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
342
|
+
: `${this.inputId}-description` }, this.options && this.options.length > 0 ? (this.options.map(option => (index.h("option", { value: option.value, selected: option.selected, disabled: option.disabled }, option.label)))) : (index.h("slot", null))), index.h("div", { key: '17a31f45608536be911f3fca1e28e11caac7a065', class: "select-icons" }, this.error && (index.h("nv-icon", { key: 'f8f6f1545d87cfdf174755da82780356480de737', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: 'f79e5968a6fc70cf56c07223a8a569648d77c082', name: "circle-check", class: "validation", size: "md" })), !this.multiple && (index.h("nv-iconbutton", { key: 'd7f2c576a6c6c5d964f692c1f520d0e71af82f35', name: "chevron-down", size: "md", emphasis: "lower", tabindex: -1 })))), index.h("slot", { key: '852c05430b705347f473899ff884725b511d527d', name: "after-input" })), (this.description ||
|
|
343
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '3f98fb2ee526fae3c74f2e2dd78d5f10b9e13475', class: "description", id: `${this.inputId}-description` }, index.h("slot", { key: '268191d3ffc3191d7c946d805c6cd58dc1855dda', name: "description" }, this.description))), (this.errorDescription ||
|
|
344
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '24b5935d22d7971f6aa5922a1fa8c47b8beb069f', class: "error-description", id: `${this.inputId}-error` }, index.h("slot", { key: '5492aecb0537f91f8cf38430b4048bb7bd13edf8', name: "error-description" }, this.errorDescription)))));
|
|
357
345
|
}
|
|
358
346
|
static get formAssociated() { return true; }
|
|
359
347
|
get el() { return index.getElement(this); }
|