@nova-design-system/nova-react 3.0.0-beta.45 → 3.0.0-beta.47
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-S09Gr7Tw.js → index-Byv3Vmev.js} +654 -526
- package/dist/cjs/index.js +1 -2
- package/dist/cjs/{nv-alert.entry-DH8Qd2s2.js → nv-alert.entry-BXY4KXbF.js} +1 -1
- package/dist/cjs/{nv-avatar.entry-B3-elLZC.js → nv-avatar.entry-BnPSKkJJ.js} +1 -1
- package/dist/cjs/{nv-badge_2.entry-D15EDzX0.js → nv-badge_2.entry-BsI3B8Rr.js} +5 -5
- package/dist/cjs/{nv-breadcrumb.entry-DG49Nj1L.js → nv-breadcrumb.entry-D5vGHLOG.js} +2 -2
- package/dist/cjs/{nv-breadcrumbs.entry-BqJO5pbN.js → nv-breadcrumbs.entry-CsaqAsnb.js} +2 -2
- package/dist/cjs/{nv-button.entry-CN9kB98T.js → nv-button.entry-DzZfGZGy.js} +2 -2
- package/dist/cjs/{nv-calendar.entry-CMEgSU64.js → nv-calendar.entry-CGKv_-gO.js} +49 -20
- package/dist/cjs/{nv-col.entry-wcZ9HHAb.js → nv-col.entry-Cng8NaTW.js} +2 -2
- package/dist/cjs/{nv-datagrid.entry-GCLeN2qT.js → nv-datagrid.entry-BbAOzpiO.js} +379 -86
- package/dist/cjs/nv-datagridcolumn.entry-CRogHbVM.js +22 -0
- package/dist/cjs/{nv-dialog.entry-DfY0TaYp.js → nv-dialog.entry-BSIZGYGF.js} +2 -2
- package/dist/cjs/{nv-dialogfooter_2.entry-OByWsulH.js → nv-dialogfooter_2.entry-Q4_li_QU.js} +3 -3
- package/dist/cjs/{nv-fieldcheckbox.entry-Bqpe9BK3.js → nv-fieldcheckbox.entry-DmgzfmRd.js} +5 -5
- package/dist/cjs/{nv-fielddate.entry-DJePv6tR.js → nv-fielddate.entry-qAvLX_Ru.js} +6 -6
- package/dist/cjs/{nv-fielddaterange.entry--YC750sX.js → nv-fielddaterange.entry-DVB8Rwxk.js} +5 -5
- package/dist/cjs/{nv-fielddropdown.entry-BPlTlc_S.js → nv-fielddropdown.entry-DKXmoXeW.js} +16 -36
- package/dist/cjs/{nv-fielddropdownitem.entry-zwoGySum.js → nv-fielddropdownitem.entry-BVLVXi0e.js} +2 -2
- package/dist/cjs/{nv-fieldmultiselect.entry-Bg_v0LUF.js → nv-fieldmultiselect.entry-DrTbd3Dj.js} +31 -87
- package/dist/cjs/{nv-fieldnumber.entry-BLNaq7yr.js → nv-fieldnumber.entry-DegbEHRL.js} +4 -4
- package/dist/cjs/{nv-fieldpassword.entry-iSEdS5R8.js → nv-fieldpassword.entry-gqjlEl7a.js} +10 -8
- package/dist/cjs/{nv-fieldradio.entry-Dov4vZkh.js → nv-fieldradio.entry-CVEY4v6F.js} +4 -4
- package/dist/cjs/{nv-fieldselect.entry-NmpesarX.js → nv-fieldselect.entry-BrCUuRWa.js} +6 -6
- package/dist/cjs/{nv-fieldtext.entry-r6oQajRS.js → nv-fieldtext.entry-q9NnqL5c.js} +4 -4
- package/dist/cjs/{nv-fieldtextarea.entry-CJ2yQkfi.js → nv-fieldtextarea.entry-B4qiLmX1.js} +4 -4
- package/dist/cjs/{nv-fieldtime.entry-Bxoj6N53.js → nv-fieldtime.entry-Bp2IWjhN.js} +10 -10
- package/dist/cjs/{nv-icon.entry-CWKRt8F0.js → nv-icon.entry-B1ax9cJS.js} +2 -2
- package/dist/cjs/{nv-iconbutton_2.entry-CnbscpNn.js → nv-iconbutton_2.entry-BRPAGl2S.js} +3 -3
- package/dist/cjs/{nv-menu.entry-wC7oSruP.js → nv-menu.entry-BiWiIZAm.js} +19 -45
- package/dist/cjs/{nv-menuitem.entry-BVSa1vrS.js → nv-menuitem.entry-CFkXoZ_r.js} +2 -2
- package/dist/cjs/{nv-popover.entry-ChP1we3l.js → nv-popover.entry-KT1iQUJk.js} +2 -2
- package/dist/cjs/{nv-row.entry-D6FeFpzG.js → nv-row.entry-Cs2GDrcu.js} +2 -2
- package/dist/cjs/{nv-stack.entry-zjJmztkO.js → nv-stack.entry-Ci7pxGSo.js} +2 -2
- package/dist/cjs/{nv-table.entry-CGX0jsR3.js → nv-table.entry-N4MV8Y6E.js} +3 -3
- package/dist/cjs/{nv-tablecolumn.entry-Cwdmo_RY.js → nv-tablecolumn.entry-CTz4jsZl.js} +1 -1
- package/dist/cjs/{nv-toggle.entry-BvToMkI2.js → nv-toggle.entry-m10-ncYR.js} +3 -3
- package/dist/cjs/{nv-tooltip.entry-DZ7_lB-p.js → nv-tooltip.entry-B6aRDto3.js} +2 -2
- package/dist/generated/components.js +0 -8
- package/dist/types/generated/components.d.ts +0 -3
- package/package.json +1 -1
- package/dist/cjs/nv-base.entry-D-_RUZTX.js +0 -71
- package/dist/cjs/nv-datagridcolumn.entry-lgIz71UU.js +0 -18
package/dist/cjs/{nv-fieldmultiselect.entry-Bg_v0LUF.js → nv-fieldmultiselect.entry-DrTbd3Dj.js}
RENAMED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Byv3Vmev.js');
|
|
4
4
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
5
5
|
require('react');
|
|
6
6
|
|
|
@@ -63,10 +63,6 @@ const NvFieldmultiselect = class {
|
|
|
63
63
|
* State of the multiselect popover.
|
|
64
64
|
*/
|
|
65
65
|
this.open = false;
|
|
66
|
-
/**
|
|
67
|
-
* Options configuration for the multiselect items.
|
|
68
|
-
*/
|
|
69
|
-
this.parsedOptions = [];
|
|
70
66
|
/**
|
|
71
67
|
* List of selected values in the multiselect.
|
|
72
68
|
*/
|
|
@@ -79,21 +75,11 @@ const NvFieldmultiselect = class {
|
|
|
79
75
|
* The text entered by the user for filtering multiselect items.
|
|
80
76
|
*/
|
|
81
77
|
this.filterText = '';
|
|
82
|
-
/**
|
|
83
|
-
* Determines whether the multiselect is filterable.
|
|
84
|
-
*/
|
|
85
|
-
this.isFilterable = this.filterable;
|
|
86
78
|
/**
|
|
87
79
|
* Delay in milliseconds before the search is triggered when typing in the filter input.
|
|
88
80
|
* @default 300
|
|
89
81
|
*/
|
|
90
82
|
this.debounceDelay = 300;
|
|
91
|
-
/**
|
|
92
|
-
* State for the mode of the multiselect.
|
|
93
|
-
* @type {'options' | 'slots'}
|
|
94
|
-
* @default 'options'
|
|
95
|
-
*/
|
|
96
|
-
this.modeState = 'options'; // Default value
|
|
97
83
|
this.isHandlingEscape = false;
|
|
98
84
|
/**
|
|
99
85
|
* Applies focus to the input field as soon as the component is mounted. This
|
|
@@ -114,7 +100,7 @@ const NvFieldmultiselect = class {
|
|
|
114
100
|
item.style.display = '';
|
|
115
101
|
});
|
|
116
102
|
// Reorder options without the divider since there are no selected elements
|
|
117
|
-
this.
|
|
103
|
+
this.options = this.options.filter(option => !option.isDivider);
|
|
118
104
|
// Reorder options without the divider since there are no selected elements
|
|
119
105
|
this.reorderOptionsContent();
|
|
120
106
|
};
|
|
@@ -142,13 +128,6 @@ const NvFieldmultiselect = class {
|
|
|
142
128
|
return;
|
|
143
129
|
}
|
|
144
130
|
this.filterText = '';
|
|
145
|
-
// Only reorder based on the mode
|
|
146
|
-
if (this.modeState === 'options') {
|
|
147
|
-
this.reorderOptionsContent();
|
|
148
|
-
}
|
|
149
|
-
else {
|
|
150
|
-
this.reorderSlotContent();
|
|
151
|
-
}
|
|
152
131
|
// Reset filter if needed
|
|
153
132
|
if (this.filterable) {
|
|
154
133
|
this.resetFilter();
|
|
@@ -317,14 +296,14 @@ const NvFieldmultiselect = class {
|
|
|
317
296
|
* @returns {any} The JSX for options mode
|
|
318
297
|
*/
|
|
319
298
|
this.renderOptionsMode = () => {
|
|
320
|
-
return (index.h(index.Host, null, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { htmlFor: this.inputId }, index.h("slot", { name: "label" }, this.label))), index.h("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { class: "input-wrapper-multiselect", slot: "trigger" }, index.h("slot", { name: "before-input" }), index.h("div", { class: "input-container-multiselect" }, index.h("slot", { name: "leading-input" }), index.h("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: this.selectedValues.length > 0,
|
|
299
|
+
return (index.h(index.Host, null, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { htmlFor: this.inputId }, index.h("slot", { name: "label" }, this.label))), index.h("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { class: "input-wrapper-multiselect", slot: "trigger" }, index.h("slot", { name: "before-input" }), index.h("div", { class: "input-container-multiselect" }, index.h("slot", { name: "leading-input" }), this.selectedValues.length > 0 && (index.h("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: this.selectedValues.length > 0, label: `${this.selectedValues.length} ${this.badgeLabel}`, "aria-label": `Clear all ${this.selectedValues.length} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseOptions })), this.filterable || this.disabled || this.readonly ? (index.h("input", { type: "text", id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.value, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputOptions, onFocus: this.handleInputFocusOptions, onBlur: this.handleInputBlurOptions, onKeyDown: this.handleKeyDown })) : (index.h("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickOptions, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusOptions, role: "combobox", "aria-expanded": this.open }, index.h("span", null, this.value || this.placeholder))), this.error && (index.h("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), index.h("nv-iconbutton", { "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.togglePopoverOptions })), index.h("slot", { name: "after-input" })), index.h("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: { 'max-height': this.maxHeight, 'overflow-y': 'auto' } }, index.h("ul", { role: "content" }, this.options.map(option => (index.h("nv-fielddropdownitemcheck", { label: option.label, description: option.description, value: option.value, checked: this.selectedValues.includes(option.value), disabled: option.disabled }))), index.h("hr", { class: "multiselect-divider", style: { display: 'none' } })))), this.renderDescriptions()));
|
|
321
300
|
};
|
|
322
301
|
/**
|
|
323
302
|
* Renders the component in slots mode
|
|
324
303
|
* @returns {any} The JSX for slots mode
|
|
325
304
|
*/
|
|
326
305
|
this.renderSlotsMode = () => {
|
|
327
|
-
return (index.h(index.Host, null, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { htmlFor: this.inputId }, index.h("slot", { name: "label" }, this.label))), index.h("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { class: "input-wrapper-multiselect", slot: "trigger" }, index.h("slot", { name: "before-input" }), index.h("div", { class: "input-container-multiselect", onClick: this.handleInputContainerClickSlots }, index.h("slot", { name: "leading-input" }), index.h("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: this.selectedValues.length > 0,
|
|
306
|
+
return (index.h(index.Host, null, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { htmlFor: this.inputId }, index.h("slot", { name: "label" }, this.label))), index.h("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { class: "input-wrapper-multiselect", slot: "trigger" }, index.h("slot", { name: "before-input" }), index.h("div", { class: "input-container-multiselect", onClick: this.handleInputContainerClickSlots }, index.h("slot", { name: "leading-input" }), this.selectedValues.length > 0 && (index.h("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: this.selectedValues.length > 0, label: `${this.selectedValues.length} ${this.badgeLabel}`, "aria-label": `Clear all ${this.selectedValues.length} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseSlots })), this.filterable || this.disabled || this.readonly ? (index.h("input", { id: this.inputId, ref: e => (this.inputElement = e), autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.value, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputSlots, onFocus: this.handleInputFocusSlots, onBlur: this.handleInputBlurSlots, onKeyDown: this.handleKeyDown })) : (index.h("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickSlots, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusSlots, role: "combobox", "aria-expanded": this.open }, index.h("span", null, this.value || this.placeholder))), this.error && (index.h("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), index.h("nv-iconbutton", { "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.togglePopoverSlots })), index.h("slot", { name: "after-input" })), index.h("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: { 'max-height': this.maxHeight, 'overflow-y': 'auto' } }, index.h("slot", { name: "content" }))), this.renderDescriptions()));
|
|
328
307
|
};
|
|
329
308
|
}
|
|
330
309
|
//#endregion PROPERTIES
|
|
@@ -340,13 +319,13 @@ const NvFieldmultiselect = class {
|
|
|
340
319
|
* Set the mode state and handle options change.
|
|
341
320
|
*/
|
|
342
321
|
componentWillLoad() {
|
|
343
|
-
|
|
322
|
+
var _a;
|
|
344
323
|
// Don't call handleOptionsChange if we are in slots mode
|
|
345
|
-
if (this.
|
|
324
|
+
if (this.options) {
|
|
346
325
|
this.handleOptionsChange(this.options);
|
|
347
326
|
}
|
|
348
327
|
// Specific initialization for slots mode
|
|
349
|
-
if (this.
|
|
328
|
+
if (!this.options) {
|
|
350
329
|
Promise.resolve().then(() => {
|
|
351
330
|
const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
|
|
352
331
|
// Initialize selectedValues with checked items
|
|
@@ -360,8 +339,8 @@ const NvFieldmultiselect = class {
|
|
|
360
339
|
});
|
|
361
340
|
}
|
|
362
341
|
// Initialize the sorted options array with the parsed options for initial rendering
|
|
363
|
-
if (this.
|
|
364
|
-
this.sortedOptions = [...this.
|
|
342
|
+
if (this.options) {
|
|
343
|
+
this.sortedOptions = [...((_a = this.options) !== null && _a !== void 0 ? _a : [])];
|
|
365
344
|
}
|
|
366
345
|
// Apply filtering if the multiselect is filterable and there is a value
|
|
367
346
|
if (this.filterable && this.value) {
|
|
@@ -377,10 +356,8 @@ const NvFieldmultiselect = class {
|
|
|
377
356
|
* Force reorder if options mode in componentDidLoad because of the initial render not trigger @watch
|
|
378
357
|
*/
|
|
379
358
|
componentDidLoad() {
|
|
380
|
-
if (this.
|
|
381
|
-
|
|
382
|
-
this.reorderOptionsContent();
|
|
383
|
-
});
|
|
359
|
+
if (this.options) {
|
|
360
|
+
this.handleOptionsChange(this.options);
|
|
384
361
|
}
|
|
385
362
|
}
|
|
386
363
|
/**
|
|
@@ -405,6 +382,12 @@ const NvFieldmultiselect = class {
|
|
|
405
382
|
else {
|
|
406
383
|
this.handlePopoverClose();
|
|
407
384
|
}
|
|
385
|
+
if (this.options) {
|
|
386
|
+
this.reorderOptionsContent();
|
|
387
|
+
}
|
|
388
|
+
else {
|
|
389
|
+
this.reorderSlotContent();
|
|
390
|
+
}
|
|
408
391
|
}
|
|
409
392
|
/**
|
|
410
393
|
* Listen for the `itemChecked` event emitted by child items.
|
|
@@ -438,41 +421,13 @@ const NvFieldmultiselect = class {
|
|
|
438
421
|
console.warn('Received itemChecked event with undefined or null value'); // Warning log
|
|
439
422
|
}
|
|
440
423
|
}
|
|
441
|
-
/**
|
|
442
|
-
* Emitted when the options change.
|
|
443
|
-
* @param {string | Array<{label: string, value: string, isDivider?: boolean, disabled?: boolean, description?: string, checked?: boolean}>} newValue - The new value of the options.
|
|
444
|
-
*/
|
|
445
424
|
handleOptionsChange(newValue) {
|
|
446
|
-
if (
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
this.parsedOptions = [...parsedOpts];
|
|
453
|
-
}
|
|
454
|
-
catch (error) {
|
|
455
|
-
console.error('Error parsing options:', error);
|
|
456
|
-
this.parsedOptions = [];
|
|
457
|
-
}
|
|
458
|
-
}
|
|
459
|
-
else if (Array.isArray(newValue)) {
|
|
460
|
-
this.selectedValues = newValue
|
|
461
|
-
.filter(option => option.checked)
|
|
462
|
-
.map(option => option.value);
|
|
463
|
-
this.parsedOptions = [...newValue];
|
|
464
|
-
}
|
|
465
|
-
else {
|
|
466
|
-
this.parsedOptions = [];
|
|
467
|
-
}
|
|
468
|
-
// Wait for the options to be fully loaded
|
|
469
|
-
Promise.resolve().then(() => {
|
|
470
|
-
requestAnimationFrame(() => {
|
|
471
|
-
if (this.modeState === 'options') {
|
|
472
|
-
this.reorderOptionsContent();
|
|
473
|
-
}
|
|
474
|
-
});
|
|
475
|
-
});
|
|
425
|
+
if (!newValue)
|
|
426
|
+
return;
|
|
427
|
+
this.selectedValues = newValue
|
|
428
|
+
.filter(option => option.checked)
|
|
429
|
+
.map(option => option.value);
|
|
430
|
+
this.reorderOptionsContent();
|
|
476
431
|
}
|
|
477
432
|
/**
|
|
478
433
|
* Emitted when the value changes.
|
|
@@ -481,14 +436,6 @@ const NvFieldmultiselect = class {
|
|
|
481
436
|
// Handle value change and update the corresponding multiselect item if it exists
|
|
482
437
|
this.setInitialSelection();
|
|
483
438
|
}
|
|
484
|
-
/**
|
|
485
|
-
* Emitted when the filterable property changes.
|
|
486
|
-
* @param {boolean} newValue - The new value of the filterable property.
|
|
487
|
-
*/
|
|
488
|
-
watchFilterableHandler(newValue) {
|
|
489
|
-
this.isFilterable = newValue;
|
|
490
|
-
this.filterable = newValue;
|
|
491
|
-
}
|
|
492
439
|
// Add a listener for the slot content
|
|
493
440
|
handleSlotChange(event) {
|
|
494
441
|
// Check: we only want to reorder if it's the "content" slot
|
|
@@ -577,7 +524,7 @@ const NvFieldmultiselect = class {
|
|
|
577
524
|
* Reorder the content of the slot.
|
|
578
525
|
*/
|
|
579
526
|
reorderSlotContent() {
|
|
580
|
-
if (this.
|
|
527
|
+
if (this.options)
|
|
581
528
|
return;
|
|
582
529
|
const ul = this.el.querySelector('ul');
|
|
583
530
|
if (!ul)
|
|
@@ -641,7 +588,7 @@ const NvFieldmultiselect = class {
|
|
|
641
588
|
existingEmptyMessage.remove();
|
|
642
589
|
}
|
|
643
590
|
if (!this.filterText.trim()) {
|
|
644
|
-
if (this.
|
|
591
|
+
if (this.options && this.options.length > 0) {
|
|
645
592
|
// Reset options display
|
|
646
593
|
const items = Array.from(ul.querySelectorAll('nv-fielddropdownitemcheck'));
|
|
647
594
|
items.forEach(item => {
|
|
@@ -664,11 +611,11 @@ const NvFieldmultiselect = class {
|
|
|
664
611
|
}
|
|
665
612
|
const normalizedFilter = this.normalizeText(this.filterText);
|
|
666
613
|
let hasVisibleItems = false;
|
|
667
|
-
if (this.
|
|
614
|
+
if (this.options && this.options.length > 0) {
|
|
668
615
|
// Filter options mode
|
|
669
616
|
const items = Array.from(ul.querySelectorAll('nv-fielddropdownitemcheck'));
|
|
670
617
|
items.forEach(item => {
|
|
671
|
-
const option = this.
|
|
618
|
+
const option = this.options.find(opt => opt.value === item.getAttribute('value'));
|
|
672
619
|
if (option && !option.isDivider) {
|
|
673
620
|
const matchesFilter = this.normalizeText(option.label).includes(normalizedFilter) ||
|
|
674
621
|
this.normalizeText(option.value).includes(normalizedFilter);
|
|
@@ -753,7 +700,7 @@ const NvFieldmultiselect = class {
|
|
|
753
700
|
* Filter multiselect items in slots mode
|
|
754
701
|
*/
|
|
755
702
|
filterSlotsItems() {
|
|
756
|
-
if (this.
|
|
703
|
+
if (this.options)
|
|
757
704
|
return;
|
|
758
705
|
const ul = this.el.querySelector('ul');
|
|
759
706
|
if (!ul)
|
|
@@ -889,7 +836,7 @@ const NvFieldmultiselect = class {
|
|
|
889
836
|
// Do the reorder and wait a bit before closing
|
|
890
837
|
const handleEscape = async () => {
|
|
891
838
|
this.isHandlingEscape = true; // Disable the hide listener
|
|
892
|
-
if (this.
|
|
839
|
+
if (this.options) {
|
|
893
840
|
this.reorderOptionsContent();
|
|
894
841
|
}
|
|
895
842
|
else {
|
|
@@ -1001,16 +948,13 @@ const NvFieldmultiselect = class {
|
|
|
1001
948
|
* @returns {any} The JSX for the component
|
|
1002
949
|
*/
|
|
1003
950
|
render() {
|
|
1004
|
-
return this.
|
|
1005
|
-
? this.renderOptionsMode()
|
|
1006
|
-
: this.renderSlotsMode();
|
|
951
|
+
return this.options ? this.renderOptionsMode() : this.renderSlotsMode();
|
|
1007
952
|
}
|
|
1008
953
|
static get formAssociated() { return true; }
|
|
1009
954
|
get el() { return index.getElement(this); }
|
|
1010
955
|
static get watchers() { return {
|
|
1011
956
|
"options": ["handleOptionsChange"],
|
|
1012
|
-
"value": ["watchValueHandler"]
|
|
1013
|
-
"filterable": ["watchFilterableHandler"]
|
|
957
|
+
"value": ["watchValueHandler"]
|
|
1014
958
|
}; }
|
|
1015
959
|
};
|
|
1016
960
|
NvFieldmultiselect.style = NvFieldmultiselectStyle0;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Byv3Vmev.js');
|
|
4
4
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
5
5
|
require('react');
|
|
6
6
|
|
|
@@ -111,9 +111,9 @@ const NvFieldnumber = class {
|
|
|
111
111
|
/****************************************************************************/
|
|
112
112
|
//#region RENDER
|
|
113
113
|
render() {
|
|
114
|
-
return (index.h(index.Host, { key: '
|
|
115
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
116
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
114
|
+
return (index.h(index.Host, { key: 'e054d1e05c0623bf3d5d78c2bafb6d096dbcbd08' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '0743432faff56e8256b2a30fab68ced0592bbf6a', htmlFor: this.inputId }, index.h("slot", { key: '709f68c3f4bf6ade475cd6afbee5c9912c782c43', name: "label" }, this.label))), index.h("div", { key: '5798b0faf23bc671aeda3273dcfff7c1d1ca4109', class: "input-wrapper" }, index.h("slot", { key: '47b9f0ef000d2d98e2e3ad1c1f4191ce91c69266', name: "before-input" }), index.h("div", { key: '082d2ab64b892cc994955b723d1ab342414061fb', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '34511207a7ebc1cc5fe8cc91d05f4fa549fda316', name: "leading-input" }), index.h("input", { key: '20f96b319b6e7528d738bdc31152649575409dd1', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: "number", autofocus: this.autofocus, required: this.required, max: this.max, min: this.min, step: this.step, value: this.value, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), this.error && (index.h("nv-icon", { key: '2b05afbbc94bd39dd82a270511e4372536ee80ba', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '95d74e6298e49d422b19bf080d3e2de25c2ad8e2', name: "circle-check", class: "validation", size: "md" })), index.h("div", { key: '5c665de10e9650003b127997cd6010e35d7d0b7a', class: "stepper" }, index.h("nv-iconbutton", { key: '9702ee4778623862e67d29a56f7790af364786bf', size: "md", name: "minus", emphasis: "lower", onClick: this.handleMinus, disabled: this.isMinValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }), index.h("nv-iconbutton", { key: '20fc509c42230f6768d98e4144db12afae3649ef', size: "md", name: "plus", emphasis: "lower", onClick: this.handlePlus, disabled: this.isMaxValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }))), index.h("slot", { key: 'd432d4e6fb8c4fd67c6c972b5c967e093cadfe68', name: "after-input" })), (this.description ||
|
|
115
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'e1d585c32f4cff50d84f5d1b6696856c8c875ef7', class: "description" }, index.h("slot", { key: '860b5fb8ba3e24fc728021b238b371178ae54ead', name: "description" }, this.description))), (this.errorDescription ||
|
|
116
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'aaa707753b98415ca4e329fab9b45bfc3b42525a', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'f8c0910451550baa82663500a7c0339064720428', name: "error-description" }, this.errorDescription)))));
|
|
117
117
|
}
|
|
118
118
|
static get formAssociated() { return true; }
|
|
119
119
|
get el() { return index.getElement(this); }
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Byv3Vmev.js');
|
|
4
4
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
5
5
|
require('react');
|
|
6
6
|
|
|
@@ -68,10 +68,6 @@ const NvFieldpassword = class {
|
|
|
68
68
|
* Show/hide the password programmatically.
|
|
69
69
|
*/
|
|
70
70
|
this.showPassword = false;
|
|
71
|
-
/**
|
|
72
|
-
* Defines whether the password is visible or not.
|
|
73
|
-
*/
|
|
74
|
-
this.showPasswordState = this.showPassword;
|
|
75
71
|
/**
|
|
76
72
|
* Applies focus to the input field as soon as the component is mounted. This
|
|
77
73
|
* is equivalent to setting the native autofocus attribute on an <input>
|
|
@@ -98,11 +94,17 @@ const NvFieldpassword = class {
|
|
|
98
94
|
}
|
|
99
95
|
//#endregion METHODS
|
|
100
96
|
/****************************************************************************/
|
|
97
|
+
//#region LIFECYCLE
|
|
98
|
+
componentWillLoad() {
|
|
99
|
+
this.showPasswordState = this.showPassword;
|
|
100
|
+
}
|
|
101
|
+
//#endregion LIFECYCLE
|
|
102
|
+
/****************************************************************************/
|
|
101
103
|
//#region RENDER
|
|
102
104
|
render() {
|
|
103
|
-
return (index.h(index.Host, { key: '
|
|
104
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
105
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
105
|
+
return (index.h(index.Host, { key: '4a6de90f24bd6607293d616d60f6d742c46b04a9' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '715f5935de3aa0f0f7b6aa9aa72c409a3875a849', htmlFor: this.inputId }, index.h("slot", { key: 'da11187833b12acfae578024bb67d717efbafaa1', name: "label" }, this.label))), index.h("div", { key: 'a669823e6c5aea5b4e0aacf0bfc1c8f7dbe67bab', class: "input-wrapper" }, index.h("slot", { key: '98b2b6eaaa867228a667bec2920c640ff0b829c7', name: "before-input" }), index.h("div", { key: 'fc896f9018563e80ea0f2aa1e2eb7992fd4a854c', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '715814e77d1ba40463253d12751129f2c0d05407', name: "leading-input" }), index.h("input", { key: '8101af836f80da56ac9e2b859ab9fd5b6d254b91', id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, type: this.showPasswordState ? 'text' : 'password', inputMode: this.mode, value: this.value, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), (this.success || this.error) && (index.h("nv-icon", { key: 'fdf5caa936a43961bd3f00f5d50635124b57ff0b', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" })), !this.hidePasswordIcon && (index.h("nv-iconbutton", { key: '9b9e70d855fca2ea1ff2769609af05fc7d3fd1c2', name: this.showPasswordState ? 'eye' : 'eye-off', size: "md", emphasis: "lower", onClick: this.togglePasswordVisibility, "aria-label": this.showPasswordState ? 'Hide password' : 'Show password', "aria-pressed": this.showPasswordState.toString() }))), index.h("slot", { key: '4458e83104562509b53b05faf3a316a5502b76b7', name: "after-input" })), (this.description ||
|
|
106
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '91dcddd8a80abccaaffda9cd583759bebf376456', class: "description" }, index.h("slot", { key: 'fe6da6eb725b3866faf138e848f89152f0f24a00', name: "description" }, this.description))), (this.errorDescription ||
|
|
107
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'bfe57a6b0f199c3b371a2036a7b8787f40f639a4', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '529e34f2197c64ac768df11251bb285fec1f2cd5', name: "error-description" }, this.errorDescription)))));
|
|
106
108
|
}
|
|
107
109
|
static get formAssociated() { return true; }
|
|
108
110
|
get el() { return index.getElement(this); }
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Byv3Vmev.js');
|
|
4
4
|
var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
|
|
5
5
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
6
6
|
require('react');
|
|
@@ -87,9 +87,9 @@ const NvFieldradio = class {
|
|
|
87
87
|
/****************************************************************************/
|
|
88
88
|
//#region RENDER
|
|
89
89
|
render() {
|
|
90
|
-
return (index.h(index.Host, { key: '
|
|
91
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
92
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
90
|
+
return (index.h(index.Host, { key: 'e1a92204a7d3e07de9485873906ed57dc2f4dfb1', class: clsx297c1ffe.clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, index.h("input", { key: '8161b36c31b960a4ca4f7a1291a9cdbdd830429c', type: "radio", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: this.checked, disabled: this.disabled }), index.h("div", { key: '8d5ff5b5742a96dc9d1167298859a7a97347eeab', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '7417fe1c5041e20fd63abca907fd75fe7d3b49d2', htmlFor: this.inputId }, index.h("slot", { key: 'e29a092dbd19c912c496e1ae56d9f46bcb44208c', name: "label" }, this.label))), (this.description ||
|
|
91
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'a894108a6e5235010d18547a39daf526e066e432', class: "description" }, index.h("slot", { key: 'c67b5b5a5d2ef1f27e69eb251e9a15c98909db85', name: "description" }, this.description))), (this.errorDescription ||
|
|
92
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '18ea2ae58994289900f28c0e6220e113b45b2a92', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '52a10763fb7bf688e5a1de5e854aa0d80bc996f4', name: "error-description" }, this.errorDescription))))));
|
|
93
93
|
}
|
|
94
94
|
static get formAssociated() { return true; }
|
|
95
95
|
get el() { return index.getElement(this); }
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Byv3Vmev.js');
|
|
4
4
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
5
5
|
require('react');
|
|
6
6
|
|
|
@@ -343,13 +343,13 @@ const NvFieldselect = class {
|
|
|
343
343
|
* @returns {HTMLStencilElement} The HTML element to render.
|
|
344
344
|
*/
|
|
345
345
|
render() {
|
|
346
|
-
return (index.h(index.Host, { key: '
|
|
346
|
+
return (index.h(index.Host, { key: '38cb85c6698c5541793a1e5d34b36417cd743759' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'd81b9837c43c1a19a2d87b51cede9e7c32bda50c', htmlFor: this.inputId }, index.h("slot", { key: '9d7c10281b117f2006ca1997f91e4e0b99fc5ab5', name: "label" }, this.label))), index.h("div", { key: '2796a31f2aac0604054c4542564fca77c2ac4272', class: "select-wrapper" }, index.h("slot", { key: '0407c6379597b09e1bb11ee6b43110b1d5fb98ea', name: "before-input" }), index.h("div", { key: 'c0ae999fc017fb0352b0a1cfe2ff75e313955f23', class: "select-container", onClick: this.handleSelectContainerClick }, index.h("slot", { key: 'ea2b63ddb3b70521b63e15efd1c3daf06c38cc0a', name: "leading-input" }), this.internalReadonly && (index.h("input", { key: 'f543f67c0360ac315ed873eb14a93af35dd90670', 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
|
|
347
347
|
? `${this.inputId}-error`
|
|
348
|
-
: `${this.inputId}-description` })), index.h("select", { key: '
|
|
348
|
+
: `${this.inputId}-description` })), index.h("select", { key: 'b2ae3854c40ea798069417127cd763c8a0db040e', 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
|
|
349
349
|
? `${this.inputId}-error`
|
|
350
|
-
: `${this.inputId}-description` }, this.parsedOptions.length > 0 ? (this.parsedOptions.map(option => (index.h("option", { value: option.value, selected: option.selected, disabled: option.disabled }, option.label)))) : (index.h("slot", null))), index.h("div", { key: '
|
|
351
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
352
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
350
|
+
: `${this.inputId}-description` }, this.parsedOptions.length > 0 ? (this.parsedOptions.map(option => (index.h("option", { value: option.value, selected: option.selected, disabled: option.disabled }, option.label)))) : (index.h("slot", null))), index.h("div", { key: 'dd59af14105272eaa77218136f5b7b0b40a5b40b', class: "select-icons" }, this.error && (index.h("nv-icon", { key: '719e239472f6b697298682cc8d1b10933d3504ec', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '5d63d5ddbcd8f46296bc067afd45f3921f4f3917', name: "circle-check", class: "validation", size: "md" })), !this.multiple && (index.h("nv-iconbutton", { key: '978a540682409a88ce55d2219dbeb9f2fc82cd51', name: "chevron-down", size: "md", emphasis: "lower", tabindex: -1 })))), index.h("slot", { key: '3483846a9f38be08caaf6f2b02332caefae0cbed', name: "after-input" })), (this.description ||
|
|
351
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '5b47c05942549b6e2238696132ab2f3c9af5b7f0', class: "description", id: `${this.inputId}-description` }, index.h("slot", { key: '46b7f053ae343949b540240e1ec438850bb9a015', name: "description" }, this.description))), (this.errorDescription ||
|
|
352
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '6126ab6967fc430c6a1d3ddfb191a98a8c2ecce9', class: "error-description", id: `${this.inputId}-error` }, index.h("slot", { key: 'afc6a0443c6fe1175213d36a2c59ffefe2923eab', name: "error-description" }, this.errorDescription)))));
|
|
353
353
|
}
|
|
354
354
|
static get formAssociated() { return true; }
|
|
355
355
|
get el() { return index.getElement(this); }
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Byv3Vmev.js');
|
|
4
4
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
5
5
|
require('react');
|
|
6
6
|
|
|
@@ -107,9 +107,9 @@ const NvFieldtext = class {
|
|
|
107
107
|
/****************************************************************************/
|
|
108
108
|
//#region RENDER
|
|
109
109
|
render() {
|
|
110
|
-
return (index.h(index.Host, { key: '
|
|
111
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
112
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
110
|
+
return (index.h(index.Host, { key: 'e4891525becd4b0757ec380d45d9694ebc6c3318' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '1157e609be8150d014e9190dcf53f74bcee20119', htmlFor: this.inputId }, index.h("slot", { key: '888fb12e994f6f4f47bc2be496cd74aeedb628c0', name: "label" }, this.label))), index.h("div", { key: '0555b12dbbe5fa81f5af464d3b48c35b243aec32', class: "input-wrapper" }, index.h("slot", { key: '5210a9b903c560775453741d8815286dbe8bbb53', name: "before-input" }), index.h("div", { key: '7bc11232dfa46706982bf3645054a7a1f67832f9', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '87abc6976b432a3dc51246c97564108f9baccff8', name: "leading-input" }), index.h("input", { key: 'b0c3e30bc5363f6b49ea1361005e125826184016', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: this.type, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, autofocus: this.autofocus, autocomplete: this.autocomplete, multiple: this.multiple, value: this.value, onInput: this.handleInput }), this.error && (index.h("nv-icon", { key: '5e359bc40906bbf2c63eb7d196dd8294b15dd672', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '4812b31e512bf388fa84f9d35a949de5f9b86d59', name: "circle-check", class: "validation", size: "md" }))), index.h("slot", { key: '06922c63f02470be6c74ee6ba4bf93baabd03e57', name: "after-input" })), (this.description ||
|
|
111
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '960bcb53a55aed3e1b8cd1b193ad26f5c6b151fd', class: "description" }, index.h("slot", { key: '07c09b8543e9b91928821a100869943de94a65a7', name: "description" }, this.description))), (this.errorDescription ||
|
|
112
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '456d00a47f01f70938d99faa774da1a9e51b036d', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '590aef8c37efd2fa472c9b7b92fd82d29c4e6d39', name: "error-description" }, this.errorDescription)))));
|
|
113
113
|
}
|
|
114
114
|
static get formAssociated() { return true; }
|
|
115
115
|
get el() { return index.getElement(this); }
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Byv3Vmev.js');
|
|
4
4
|
var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
|
|
5
5
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
6
6
|
require('react');
|
|
@@ -177,9 +177,9 @@ const NvFieldtextarea = class {
|
|
|
177
177
|
/****************************************************************************/
|
|
178
178
|
//#region RENDER
|
|
179
179
|
render() {
|
|
180
|
-
return (index.h(index.Host, { key: '
|
|
181
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
182
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
180
|
+
return (index.h(index.Host, { key: '606902cda67b3f523ab32d8e9c6fd11b6bc0f3a7' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '3167dfd5f17028ad20a82b5646ccfa788a5bbb86', htmlFor: this.inputId }, index.h("slot", { key: 'ae98d87f3e1b7cb2864b6b7e7183d3a37c1a7e14', name: "label" }, this.label))), index.h("div", { key: '8f25bdadd8f94938dc9b6c631b0586fc6bcbc37c', class: "textarea-wrapper" }, index.h("div", { key: '6568df9f332e8bca84445ba596d6eceaaed64b9e', class: "textarea-container", onClick: this.handleTextareaContainerClick }, index.h("textarea", { key: 'fca9ba5bd6925cc1a201625e5785ad451fc8849b', id: this.inputId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, autofocus: this.autofocus, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, autocomplete: "off", value: this.value, onInput: this.handleTextarea, rows: this.rows, class: clsx297c1ffe.clsx(this.resize === 'none' && 'resize-none', this.resize === 'vertical' && 'resize-y', this.resize === 'horizontal' && 'resize-x', this.resize === 'both' && 'resize') }))), (this.description ||
|
|
181
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'c5c8c1999105df446a603a3e02f431ad37de4c5e', class: "description" }, index.h("slot", { key: 'bbcea14c7585e1ff1c995eb4f21cb532a160ed40', name: "description" }, this.description))), (this.errorDescription ||
|
|
182
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '2d43d92b5c9b93faeac45bdcfa142d4dfd70511a', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '33514ea705969b353f11c49ca65090706e6aadf8', name: "error-description" }, this.errorDescription)))));
|
|
183
183
|
}
|
|
184
184
|
static get formAssociated() { return true; }
|
|
185
185
|
get el() { return index.getElement(this); }
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Byv3Vmev.js');
|
|
4
4
|
var constants98e2dcc2 = require('./constants-98e2dcc2-C0SBCapP.js');
|
|
5
5
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
6
6
|
require('react');
|
|
@@ -979,26 +979,26 @@ const NvFieldtime = class {
|
|
|
979
979
|
}, key: `${option}-${index$1}`, onClick: e => this.handleTimeOptionClick(e, type) }, option)))));
|
|
980
980
|
}
|
|
981
981
|
render() {
|
|
982
|
-
return (index.h(index.Host, { key: '
|
|
983
|
-
index.h("input", { key: '
|
|
982
|
+
return (index.h(index.Host, { key: 'fb5bc4740731089bf81ab7b24e57f24f966c5f92', onclick: e => this.handleHostClick(e) }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'd9f44f4ab94a13a620df743979d95b1f59572bfe', htmlFor: this.inputId }, index.h("slot", { key: 'fbc8176ea3443511764b2993939d1110fd932a5a', name: "label" }, this.label))), index.h("nv-popover", { key: 'ea376ec38db428db158c998e8963e27048ef03b0', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: 'fa825918cea4a64db76324f953645f6db7cb81b9', class: "input-wrapper", slot: "trigger" }, index.h("slot", { key: '37d7fd2eae40e4f47e9b626c226d060cf5e350e2', name: "before-input" }), index.h("div", { key: '6b73d8c9598bfaf470b5c5a455db0b08397cc8c8', class: "input-container" }, index.h("slot", { key: '88f20151d7ccc1e3ad6f6aba4b5926cccc22c19c', name: "leading-input" }), startsWithIgnoreCase(this.format, 'HH') && [
|
|
983
|
+
index.h("input", { key: '292ee8c62fd248b28fb46275ba06846d69b3b602', ref: el => (this.inputElements[constants98e2dcc2.TimeType.Hours] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.hours, onInput: e => this.handleInputChange(e, constants98e2dcc2.TimeType.Hours), placeholder: this.format.includes('hh') ? 'hh' : 'HH', inputMode: "numeric", onFocus: () => this.handleFocus(constants98e2dcc2.TimeType.Hours), name: this.name
|
|
984
984
|
? `${constants98e2dcc2.TimeType.Hours}-${this.name}`
|
|
985
985
|
: constants98e2dcc2.TimeType.Hours, id: this.inputId, readonly: this.readonly, disabled: this.disabled, required: this.required, onKeyDown: e => this.handleKeyDown(e), onBlur: () => this.handleInputBlur() }),
|
|
986
986
|
], this.format.includes('mm') && [
|
|
987
|
-
index.h("span", { key: '
|
|
988
|
-
index.h("input", { key: '
|
|
987
|
+
index.h("span", { key: 'c7de2283771d60e1e9f756257e34da0eefcf27f3' }, ":"),
|
|
988
|
+
index.h("input", { key: '521fad8cc60c9ced2ba634441b789fba15340ae7', ref: el => (this.inputElements[constants98e2dcc2.TimeType.Minutes] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.minutes, onInput: e => this.handleInputChange(e, constants98e2dcc2.TimeType.Minutes), placeholder: "mm", inputMode: "numeric", onFocus: () => this.handleFocus(constants98e2dcc2.TimeType.Minutes), name: this.name
|
|
989
989
|
? `${constants98e2dcc2.TimeType.Minutes}-${this.name}`
|
|
990
990
|
: constants98e2dcc2.TimeType.Minutes, id: `${this.inputId}-minutes`, readonly: this.readonly, disabled: this.disabled, required: this.required, onKeyDown: e => this.handleKeyDown(e), onBlur: () => this.handleInputBlur() }),
|
|
991
991
|
], this.format.includes('ss') && [
|
|
992
|
-
index.h("span", { key: '
|
|
993
|
-
index.h("input", { key: '
|
|
992
|
+
index.h("span", { key: 'ceef993e3efdc2fa01d466033522e09ee78683b1' }, ":"),
|
|
993
|
+
index.h("input", { key: '9c51f0fcecb86a913e9ae4cd3c5bcfbf34ac4ab8', ref: el => (this.inputElements[constants98e2dcc2.TimeType.Seconds] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.seconds, onInput: e => this.handleInputChange(e, constants98e2dcc2.TimeType.Seconds), placeholder: "ss", inputMode: "numeric", onFocus: () => this.handleFocus(constants98e2dcc2.TimeType.Seconds), name: this.name
|
|
994
994
|
? `${constants98e2dcc2.TimeType.Seconds}-${this.name}`
|
|
995
995
|
: constants98e2dcc2.TimeType.Seconds, id: `${this.inputId}-seconds`, readonly: this.readonly, disabled: this.disabled, required: this.required, onKeyDown: e => this.handleKeyDown(e), onBlur: () => this.handleInputBlur() }),
|
|
996
|
-
], index.h("nv-iconbutton", { key: '
|
|
996
|
+
], index.h("nv-iconbutton", { key: '7a5516b7d91dc99f6963ee9daacee9305b16dfb0', name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide time picker' : 'Show time picker', "aria-pressed": this.open.toString(), onClick: () => this.HandleDropdownIconClick() }), this.error && (index.h("nv-icon", { key: 'a9a9a02e312caf25a52b91e1d4db6b6ee9d850d6', name: "alert-circle", class: "validation", size: "sm" })), this.success && (index.h("nv-icon", { key: '93a69f343771dbdb8c6bd694ea9f5ddeeba39801', name: "circle-check", class: "validation", size: "sm" }))), index.h("slot", { key: '678d9af754b860ac99a50d70cb9b975e79f164c9', name: "after-input" })), index.h("div", { key: '2bd255e97d8b34b66fa0af2f209d5175e67b62a3', class: "time-dropdown", slot: "content" }, index.h("div", { key: '017b58a9a7ccb44918a408fb680fa1c18d8f5672', class: "time-columns" }, startsWithIgnoreCase(this.format, 'HH') &&
|
|
997
997
|
this.RenderTimeOptionsColumn(constants98e2dcc2.TimeType.Hours), this.format.includes('mm') &&
|
|
998
998
|
this.RenderTimeOptionsColumn(constants98e2dcc2.TimeType.Minutes), this.format.includes('ss') &&
|
|
999
999
|
this.RenderTimeOptionsColumn(constants98e2dcc2.TimeType.Seconds)))), (this.description ||
|
|
1000
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
1001
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
1000
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '35f5fb47bfeb9cde2c3551df391cf52ccaf10c72', class: "description" }, index.h("slot", { key: 'b450124765db5b2337f03a5f68c4a9466c80ca85', name: "description" }, this.description))), (this.errorDescription ||
|
|
1001
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '87d441f595f7ba8be04ca749235ec3918e9a80b0', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '35717f533b4a4c310f4fb805c3989398f340b8b1', name: "error-description" }, this.errorDescription)))));
|
|
1002
1002
|
}
|
|
1003
1003
|
static get formAssociated() { return true; }
|
|
1004
1004
|
get el() { return index.getElement(this); }
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Byv3Vmev.js');
|
|
4
4
|
var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
|
|
5
5
|
var constants98e2dcc2 = require('./constants-98e2dcc2-C0SBCapP.js');
|
|
6
6
|
require('react');
|
|
@@ -71,7 +71,7 @@ const NvIcon = class {
|
|
|
71
71
|
/****************************************************************************/
|
|
72
72
|
//#region RENDER
|
|
73
73
|
render() {
|
|
74
|
-
return (index.h(index.Host, { key: '
|
|
74
|
+
return (index.h(index.Host, { key: '5d5988e7c0f49781b57b86da6e46e38eeac5ddae', class: clsx297c1ffe.clsx(this.color && `${this.color}`), role: "img", "aria-label": `${this.name}-icon` }, index.h("svg", { key: 'ab4007e92d6a13245293dbbb7dc746ab21cdbe33', stroke: "currentColor", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: `nv-icon-${this.size}` }, index.h("use", { key: 'c9cb4fea1695e81c4e9e775c217dfb9ac3b7c9ec', href: `#${this.name}` }))));
|
|
75
75
|
}
|
|
76
76
|
};
|
|
77
77
|
NvIcon.style = NvIconStyle0;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Byv3Vmev.js');
|
|
4
4
|
var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
|
|
5
5
|
require('react');
|
|
6
6
|
|
|
@@ -123,7 +123,7 @@ const NvIconbutton = class {
|
|
|
123
123
|
/****************************************************************************/
|
|
124
124
|
//#region RENDER
|
|
125
125
|
render() {
|
|
126
|
-
return (index.h(index.Host, { key: '
|
|
126
|
+
return (index.h(index.Host, { key: 'f678bd976942aa35ae36c536fdd86cd65a43263a', role: "button", type: this.type, tabindex: "0", disabled: this.disabled ? true : undefined, class: clsx297c1ffe.clsx('root', `size-${this.size}`, `emphasis-${this.emphasis}`, this.loading && 'loading', `shape-${this.shape}`), onClick: this.handleClick }, this.loading && index.h("nv-loader", { key: 'b874de8701de163c1f4235c2034a13da30279191', size: this.size }), !this.loading && index.h("nv-icon", { key: '222ccc93e3af3dcec81308b3b90ca724ecdfa2fb', name: this.name, size: this.size }), index.h("slot", { key: 'c7a257f7715a9320ffe46e09b59a2d570d1f052c' })));
|
|
127
127
|
}
|
|
128
128
|
static get formAssociated() { return true; }
|
|
129
129
|
get el() { return index.getElement(this); }
|
|
@@ -154,7 +154,7 @@ const NvLoader = class {
|
|
|
154
154
|
//#region RENDER
|
|
155
155
|
/* <slot> empty to force rendering change */
|
|
156
156
|
render() {
|
|
157
|
-
return (index.h(index.Host, { key: '
|
|
157
|
+
return (index.h(index.Host, { key: 'f3094e46eb7072534f497694d3c28030f0118acc', class: clsx297c1ffe.clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
|
|
158
158
|
}
|
|
159
159
|
};
|
|
160
160
|
NvLoader.style = NvLoaderStyle0;
|