@nova-design-system/nova-react 3.0.0-beta.46 → 3.0.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-BgDhK4Po.js → index-Byv3Vmev.js} +605 -495
- package/dist/cjs/index.js +1 -2
- package/dist/cjs/{nv-alert.entry-C9DnCn0Q.js → nv-alert.entry-BXY4KXbF.js} +1 -1
- package/dist/cjs/{nv-avatar.entry-Cj_bK7KY.js → nv-avatar.entry-BnPSKkJJ.js} +1 -1
- package/dist/cjs/{nv-badge_2.entry-H664ASUM.js → nv-badge_2.entry-BsI3B8Rr.js} +2 -2
- package/dist/cjs/{nv-breadcrumb.entry-BOyjRSxM.js → nv-breadcrumb.entry-D5vGHLOG.js} +2 -2
- package/dist/cjs/{nv-breadcrumbs.entry-DkffTj6Z.js → nv-breadcrumbs.entry-CsaqAsnb.js} +2 -2
- package/dist/cjs/{nv-button.entry-Dv4bG9oE.js → nv-button.entry-DzZfGZGy.js} +2 -2
- package/dist/cjs/{nv-calendar.entry-DSoKDy9Q.js → nv-calendar.entry-CGKv_-gO.js} +49 -20
- package/dist/cjs/{nv-col.entry-CGNiCKta.js → nv-col.entry-Cng8NaTW.js} +2 -2
- package/dist/cjs/{nv-datagrid.entry-YSL7aTz5.js → nv-datagrid.entry-BbAOzpiO.js} +352 -92
- package/dist/cjs/{nv-datagridcolumn.entry-7whgB5iS.js → nv-datagridcolumn.entry-CRogHbVM.js} +2 -2
- package/dist/cjs/{nv-dialog.entry-CLANnPw3.js → nv-dialog.entry-BSIZGYGF.js} +2 -2
- package/dist/cjs/{nv-dialogfooter_2.entry-cHevwuGs.js → nv-dialogfooter_2.entry-Q4_li_QU.js} +3 -3
- package/dist/cjs/{nv-fieldcheckbox.entry-BV8M8SyS.js → nv-fieldcheckbox.entry-DmgzfmRd.js} +5 -5
- package/dist/cjs/{nv-fielddate.entry--KEcXuio.js → nv-fielddate.entry-qAvLX_Ru.js} +6 -6
- package/dist/cjs/{nv-fielddaterange.entry-Bctzvr40.js → nv-fielddaterange.entry-DVB8Rwxk.js} +5 -5
- package/dist/cjs/{nv-fielddropdown.entry-DJPARQ0F.js → nv-fielddropdown.entry-DKXmoXeW.js} +16 -30
- package/dist/cjs/{nv-fielddropdownitem.entry-DAlnhF7-.js → nv-fielddropdownitem.entry-BVLVXi0e.js} +2 -2
- package/dist/cjs/{nv-fieldmultiselect.entry-DDKtC-sR.js → nv-fieldmultiselect.entry-DrTbd3Dj.js} +29 -72
- package/dist/cjs/{nv-fieldnumber.entry-FzcOQMWp.js → nv-fieldnumber.entry-DegbEHRL.js} +4 -4
- package/dist/cjs/{nv-fieldpassword.entry-ZgJKgEWo.js → nv-fieldpassword.entry-gqjlEl7a.js} +4 -4
- package/dist/cjs/{nv-fieldradio.entry-B6vwI0oH.js → nv-fieldradio.entry-CVEY4v6F.js} +4 -4
- package/dist/cjs/{nv-fieldselect.entry-Dpb1RR2D.js → nv-fieldselect.entry-BrCUuRWa.js} +6 -6
- package/dist/cjs/{nv-fieldtext.entry-WhMFksEn.js → nv-fieldtext.entry-q9NnqL5c.js} +4 -4
- package/dist/cjs/{nv-fieldtextarea.entry-Cpqi_pE7.js → nv-fieldtextarea.entry-B4qiLmX1.js} +4 -4
- package/dist/cjs/{nv-fieldtime.entry-BApGHC9K.js → nv-fieldtime.entry-Bp2IWjhN.js} +10 -10
- package/dist/cjs/{nv-icon.entry-DTbgrNDQ.js → nv-icon.entry-B1ax9cJS.js} +2 -2
- package/dist/cjs/{nv-iconbutton_2.entry-D5Wjr6mr.js → nv-iconbutton_2.entry-BRPAGl2S.js} +3 -3
- package/dist/cjs/{nv-menu.entry-4P44Bom1.js → nv-menu.entry-BiWiIZAm.js} +17 -43
- package/dist/cjs/{nv-menuitem.entry-pYkLIeY9.js → nv-menuitem.entry-CFkXoZ_r.js} +2 -2
- package/dist/cjs/{nv-popover.entry-DJzEjs-d.js → nv-popover.entry-KT1iQUJk.js} +2 -2
- package/dist/cjs/{nv-row.entry-AQGhBTGs.js → nv-row.entry-Cs2GDrcu.js} +2 -2
- package/dist/cjs/{nv-stack.entry-Bb6k4Yob.js → nv-stack.entry-Ci7pxGSo.js} +2 -2
- package/dist/cjs/{nv-table.entry-C4DY5CRF.js → nv-table.entry-N4MV8Y6E.js} +3 -3
- package/dist/cjs/{nv-tablecolumn.entry-jJAoHJnt.js → nv-tablecolumn.entry-CTz4jsZl.js} +1 -1
- package/dist/cjs/{nv-toggle.entry-P76L0fsx.js → nv-toggle.entry-m10-ncYR.js} +3 -3
- package/dist/cjs/{nv-tooltip.entry-DC7XngcD.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-DdLnS1hF.js +0 -71
|
@@ -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 events_utilsFe1d907f = require('./events.utils-fe1d907f-01N__3wY.js');
|
|
5
5
|
var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
|
|
6
6
|
var constants98e2dcc2 = require('./constants-98e2dcc2-C0SBCapP.js');
|
|
@@ -776,7 +776,7 @@ const NvDialog = class {
|
|
|
776
776
|
//#region RENDER
|
|
777
777
|
render() {
|
|
778
778
|
const hasForm = this.form || this.el.querySelector('form');
|
|
779
|
-
return (index.h(index.Host, { key: '
|
|
779
|
+
return (index.h(index.Host, { key: '97fcd67a39e1ade8b2c85280d98aa756e693fdaf' }, index.h("slot", { key: 'cd2126fc88215305b1229e03c70ee8efbd4bd518', name: "trigger" }), index.h("dialog", { key: 'f7d40530e0f0646e1d8c415c0ec341e959e142e6', ref: el => (this.dialogElement = el), onClose: this.handleDialogClose, role: "dialog", "aria-modal": "true", "aria-labelledby": "dialog-header", "aria-describedby": "dialog-content", class: clsx297c1ffe.clsx({ full: this.full }) }, index.h("div", { key: '44c81193f1946a1ae0819e96d0217bf986c6e99a', class: "content" }, !this.undismissable && (index.h("nv-button", { key: '5c2cf4e7434903f72ba814af716ce93826caaa3a', class: "close-button", emphasis: "lower", size: "sm", onClick: this.handleCloseButton, "aria-label": "Close dialog" }, index.h("nv-icon", { key: '97b57d2340aaf1cd04e49d0f4e594b2de5295809', name: "x", size: "sm" }))), this.headerElement ? (index.h("slot", { name: "header" })) : (index.h("nv-dialogheader", { id: "dialog-header" })), index.h("div", { key: '27cd8b2058505be1e0ee0e380bf44582c37c525f', class: "content-body", id: "dialog-content" }, index.h("slot", { key: 'cef88d8a7fe28518842c206761adc2fd753b2648' })), this.footerElement ? (index.h("slot", { name: "footer" })) : (index.h("nv-dialogfooter", { form: this.form, primaryButtonType: hasForm ? constants98e2dcc2.ButtonType.Submit : constants98e2dcc2.ButtonType.Button, onDialogCanceled: this.handleCancelButton, undismissable: this.undismissable }))))));
|
|
780
780
|
}
|
|
781
781
|
get el() { return index.getElement(this); }
|
|
782
782
|
static get watchers() { return {
|
package/dist/cjs/{nv-dialogfooter_2.entry-cHevwuGs.js → nv-dialogfooter_2.entry-Q4_li_QU.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 constants98e2dcc2 = require('./constants-98e2dcc2-C0SBCapP.js');
|
|
5
5
|
require('react');
|
|
6
6
|
|
|
@@ -89,7 +89,7 @@ const NvDialogfooter = class {
|
|
|
89
89
|
/****************************************************************************/
|
|
90
90
|
//#region RENDER
|
|
91
91
|
render() {
|
|
92
|
-
return (index.h(index.Host, { key: '
|
|
92
|
+
return (index.h(index.Host, { key: '5756a0cc697188c3fdee2930b1c6ae7922af71cc' }, !this.hasSlot ? (index.h(index.Fragment, null, !this.undismissable && (index.h("nv-button", { onClick: this.handleCancel, emphasis: "low", size: "sm" }, this.cancelLabel)), index.h("nv-button", { onClick: this.handlePrimary, disabled: this.disabled, danger: this.danger, size: "sm", emphasis: "high", form: this.form, type: this.primaryButtonType }, this.leadingIcon && (index.h("nv-icon", { slot: "leading-icon", name: this.leadingIcon, size: "sm" })), this.primaryLabel, this.trailingIcon && (index.h("nv-icon", { slot: "trailing-icon", name: this.trailingIcon, size: "sm" }))))) : (index.h("slot", null))));
|
|
93
93
|
}
|
|
94
94
|
static get formAssociated() { return true; }
|
|
95
95
|
get el() { return index.getElement(this); }
|
|
@@ -124,7 +124,7 @@ const NvDialogheader = class {
|
|
|
124
124
|
/****************************************************************************/
|
|
125
125
|
//#region RENDER
|
|
126
126
|
render() {
|
|
127
|
-
return (index.h(index.Host, { key: '
|
|
127
|
+
return (index.h(index.Host, { key: '850e2408cb7a35903be3bc51fbee000fc58f4a76' }, !this.hasSlot ? (index.h(index.Fragment, null, index.h("div", { class: "heading" }, this.heading), index.h("div", { class: "subheading" }, this.subheading))) : (index.h("slot", null))));
|
|
128
128
|
}
|
|
129
129
|
get el() { return index.getElement(this); }
|
|
130
130
|
};
|
|
@@ -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');
|
|
@@ -118,13 +118,13 @@ const NvFieldcheckbox = class {
|
|
|
118
118
|
/****************************************************************************/
|
|
119
119
|
//#region RENDER
|
|
120
120
|
render() {
|
|
121
|
-
return (index.h(index.Host, { key: '
|
|
121
|
+
return (index.h(index.Host, { key: '98f9dfdadab534193e7076f929c9820a231fecba', class: clsx297c1ffe.clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, index.h("div", { key: '5a4d02d46b7c8c8930c24f794452180d58604ffe', class: "input-container" }, index.h("input", { key: 'f7a4002a5fb9800ed4036638773ac42c49d4ae0f', type: "checkbox", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly && !this.required, required: this.required, indeterminate: this.indeterminate, ref: el => {
|
|
122
122
|
if (el) {
|
|
123
123
|
el.indeterminate = this.indeterminate;
|
|
124
124
|
}
|
|
125
|
-
} }), index.h("span", { key: '
|
|
126
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
127
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
125
|
+
} }), index.h("span", { key: '56a2547ecf96ef3f7f28054592471323497cb94f', class: "icon" }, this.checked && !this.indeterminate && (index.h("slot", { key: 'af4e10bd52b42850c8348e0aed8c90a7e700d64a', name: "checked-icon" }, index.h("svg", { key: '105847f526c391566cef42fa35d94fbaba0e8984', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, index.h("path", { key: '41e221d5f3eab7a4cc88d4ed9454f198d69ec815', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (index.h("slot", { key: '3a1f5ffdc34a1ecdc1bb7f1b5347e1f12f5f690d', name: "indeterminate-icon" }, index.h("svg", { key: '1b68c27172d5b6b9ba2419d278c0ac0299d7a4b7', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, index.h("path", { key: '7b2f4e5fe1d961fad290aade639b9807446f34ba', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), index.h("div", { key: 'd472d7d8901ff7de37fe370bf5d637fc8ae6069d', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'c8dbda4d6f9cb757476c9a96934599171f6ea7ae', htmlFor: this.inputId, class: clsx297c1ffe.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '3c0ec17aeb856457b63981fd0e21ead69ca3af0f', name: "label" }, this.label))), (this.description ||
|
|
126
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'dff6c3a69496324cabcf25ae7639c98a7d908769', class: "description" }, index.h("slot", { key: '498c8216c9a0a537f1aa2a542b3caa688b76e55d', name: "description" }, this.description))), (this.errorDescription ||
|
|
127
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '6c584da0ad93e7f0ad62610d760c36d77b1a6fc6', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '93df382e666707cdde3133daae7aa66914215149', name: "error-description" }, this.errorDescription))))));
|
|
128
128
|
}
|
|
129
129
|
static get formAssociated() { return true; }
|
|
130
130
|
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 inputmaskEdcad3c1 = require('./inputmask-edcad3c1-B9Omti4z.js');
|
|
5
5
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
6
6
|
require('react');
|
|
@@ -261,12 +261,12 @@ const NvFielddate = class {
|
|
|
261
261
|
/****************************************************************************/
|
|
262
262
|
//#region RENDER
|
|
263
263
|
render() {
|
|
264
|
-
return (index.h(index.Host, { key: '
|
|
265
|
-
this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '
|
|
264
|
+
return (index.h(index.Host, { key: '817d7baa3525b53962f9afe3d1eb56d7fcbcaf0e' }, ((this.label && this.label.length > 0) ||
|
|
265
|
+
this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '00faded19c22c4883b7ef4de71d90c13c287d60d', htmlFor: this.inputId }, index.h("slot", { key: '48b7e470d654b9f07c3eba400145b8936c9eb27e', name: "label" }, this.label))), index.h("nv-popover", { key: '5b8e57124c0a08097874ac9ad0280908c3f2e330', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: '902097ce5a7f208ac97f72a847d68b80cd16419a', slot: "trigger", class: "input-wrapper" }, index.h("slot", { key: '909ff8453e9e48516582c64dae0762987cbd5986', name: "before-input" }), index.h("div", { key: 'e62714e613e9bffc5a6a302d72cdfea75555756a', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '9d4e6bd15fe09bee974676032d4b75a73f733674', name: "leading-input" }), index.h("input", { key: '4565589e720150706096cbdeeadefb84ee836c39', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.autofocus, value: this.singleValue, onInput: this.handleInput, onFocus: this.handleFocus }), index.h("nv-iconbutton", { key: '115ba5c4e9bbd502c51d04894a5cf88f98167231', class: "toggle-calendar-icon", name: "calendar" //{this.open ? 'chevron-top' : 'chevron-down'}
|
|
266
266
|
,
|
|
267
|
-
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: '
|
|
268
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
269
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
267
|
+
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: '3df2883ebe71fa1dd437f5dc62d82019b3550b88', name: "after-input" })), index.h("div", { key: '61241669d9599d23f2cf024d8e65becdafe58847', slot: "content" }, index.h("nv-calendar", { key: 'dd3c67a46e8addbf1017eaf578447a09a3dd9e66', dateFormat: this.dateFormat, singleValue: this.singleValue, firstDayOfWeek: this.firstDayOfWeek, numberOfCalendars: this.numberOfCalendars, min: this.min, max: this.max, locale: this.locale, shortcutsPlacement: this.shortcutsPlacement, showActions: this.showActions, shortcuts: this.shortcuts, showWeekNumbers: this.showWeekNumbers, disabledDates: this.disabledDates }))), ((this.description && this.description.length > 0) ||
|
|
268
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'f835c89363c45529512e156b313cb35f71ef5264', class: "description" }, index.h("slot", { key: '738d49ee6e525310375eba5da057573104d3c2ed', name: "description" }, this.description))), (this.errorDescription ||
|
|
269
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '7c5c07db1af3423efc9a1b1127c1b3cbdede0a28', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (index.h("slot", { name: "error-description" })) : (this.errorDescription))), index.h("slot", { key: 'ccfd311cbbb56b9b336317d0e543fc57676a60d3' })));
|
|
270
270
|
}
|
|
271
271
|
get el() { return index.getElement(this); }
|
|
272
272
|
static get watchers() { return {
|
package/dist/cjs/{nv-fielddaterange.entry-Bctzvr40.js → nv-fielddaterange.entry-DVB8Rwxk.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 inputmaskEdcad3c1 = require('./inputmask-edcad3c1-B9Omti4z.js');
|
|
5
5
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
6
6
|
require('react');
|
|
@@ -335,15 +335,15 @@ const NvFielddaterange = class {
|
|
|
335
335
|
/****************************************************************************/
|
|
336
336
|
//#region RENDER
|
|
337
337
|
render() {
|
|
338
|
-
return (index.h(index.Host, { key: '
|
|
339
|
-
this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '
|
|
338
|
+
return (index.h(index.Host, { key: '965223047219ae767b07ccecb0a00580ea39c232' }, ((this.label && this.label.length > 0) ||
|
|
339
|
+
this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '096d6a34148da30d61686024b5891e7e15cd92e2', htmlFor: this.startInputId }, index.h("slot", { key: 'ee6e84ef1927ad809e7dddb2f4ad5ef7380d0bca', name: "label" }, this.label))), index.h("nv-popover", { key: '1a0549e85ab73157b379fcbcee014a7d85be9752', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: 'd9fc4c8f379e3c1884867c87bcaa67b2da1c64ae', slot: "trigger", class: "input-wrapper" }, index.h("slot", { key: '4189696f3e877c19d4c24b09377b2ab0ce9aa437', name: "before-input" }), index.h("div", { key: '98025c8fc29121c736deb3042e961ef0eb1442fe', class: "input-container" }, index.h("slot", { key: '897481f836e33fd70a7c3b083a4e9b3db87637f2', name: "leading-input" }), index.h("div", { key: '788df58693fafaf8c78645b81d1b09a828138ccf', class: "range-inputs" }, index.h("input", { key: '7966b844668ca4cb02ac34886b62ee24cb7b1399', id: this.startInputId, type: "text", placeholder: this.startPlaceholder, name: this.startName, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.shouldAutoFocus, value: this.startValue, onInput: this.handleStartInput, onFocus: this.handleFocus }), index.h("svg", { key: '67c0b68f0fb32ce122f9d4e5b1240440f3b649d0', 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: 'eb68f32a768c1c48b51a45ddba3f85357b8045e6', stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), index.h("path", { key: 'b8ccaf592dc2d36719a8418800a736b06d1c1775', d: "M18 9l3 3l-3 3" }), index.h("path", { key: 'c4b8d8e8ffad9a339abcde63a9a0feb2ddc771d3', d: "M15 12h6" }), index.h("path", { key: '7a28c7086d7085163ff8d885acd7434b4e5ea69a', d: "M6 9l-3 3l3 3" }), index.h("path", { key: '39917978c25b13a270f0852818b31868f2034832', d: "M3 12h6" })), index.h("input", { key: 'aaad42e407d1fe8e31a7e7c153e2d4cd35d8d2df', 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 })), index.h("nv-iconbutton", { key: '04701e7bdf80a869f8a5f519141ac99c0077c20b', 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: 'cf1a48dcd20b4e363a746c9f26ecae8085e8ebbd', name: "after-input" })), index.h("div", { key: 'a36a223b6d5edd30bb9a4590d059caede5412b6a', slot: "content" }, index.h("nv-calendar", { key: '1ff22f214d648c4bb35455cf477529251c436e2d', dateFormat: this.dateFormat, rangeValue: this.startValue && this.endValue
|
|
340
340
|
? JSON.stringify({
|
|
341
341
|
start: this.startValue,
|
|
342
342
|
end: this.endValue,
|
|
343
343
|
})
|
|
344
344
|
: '', 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) ||
|
|
345
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
346
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
345
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '780f82060de810eb394285f4799511d2223312a3', class: "description" }, index.h("slot", { key: '326cbf626387738b9997f3b4d452c50ea2b3d5b2', name: "description" }, this.description))), (this.errorDescription ||
|
|
346
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '6043f611a60f14976b8572e975621fac57b18f89', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (index.h("slot", { name: "error-description" })) : (this.errorDescription))), index.h("slot", { key: '129fe5bcd6c5bd9449242dc6b4f0e1c90ae31082' })));
|
|
347
347
|
}
|
|
348
348
|
get el() { return index.getElement(this); }
|
|
349
349
|
static get watchers() { return {
|
|
@@ -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
|
|
|
@@ -75,10 +75,6 @@ const NvFielddropdown = class {
|
|
|
75
75
|
/** The text entered by the user for filtering dropdown items. */
|
|
76
76
|
this.filterText = '';
|
|
77
77
|
this.selectedValues = new Set();
|
|
78
|
-
/**
|
|
79
|
-
* Options configuration for the dropdown items.
|
|
80
|
-
*/
|
|
81
|
-
this.parsedOptions = [];
|
|
82
78
|
this.handleInputContainerClick = (event) => {
|
|
83
79
|
if (this.disabled || this.readonly) {
|
|
84
80
|
return;
|
|
@@ -121,17 +117,17 @@ const NvFielddropdown = class {
|
|
|
121
117
|
this.open = !this.open;
|
|
122
118
|
};
|
|
123
119
|
this.getSelectedLabel = () => {
|
|
124
|
-
var _a, _b, _c, _d, _e;
|
|
120
|
+
var _a, _b, _c, _d, _e, _f;
|
|
125
121
|
if (!this.value)
|
|
126
122
|
return '';
|
|
127
|
-
if (this.
|
|
128
|
-
const matchingItem = this.
|
|
129
|
-
return (
|
|
123
|
+
if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) > 1) {
|
|
124
|
+
const matchingItem = this.options.find(option => option.value === this.value);
|
|
125
|
+
return (_c = (_b = matchingItem === null || matchingItem === void 0 ? void 0 : matchingItem.label) !== null && _b !== void 0 ? _b : matchingItem === null || matchingItem === void 0 ? void 0 : matchingItem.value) !== null && _c !== void 0 ? _c : this.value;
|
|
130
126
|
}
|
|
131
127
|
const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem'));
|
|
132
128
|
const matchingItem = items.find(item => item.value === this.value);
|
|
133
129
|
const selectedLabel = matchingItem
|
|
134
|
-
? (
|
|
130
|
+
? (_f = (_d = matchingItem.label) !== null && _d !== void 0 ? _d : (_e = matchingItem.textContent) === null || _e === void 0 ? void 0 : _e.trim()) !== null && _f !== void 0 ? _f : matchingItem.value
|
|
135
131
|
: '';
|
|
136
132
|
return selectedLabel;
|
|
137
133
|
};
|
|
@@ -168,23 +164,12 @@ const NvFielddropdown = class {
|
|
|
168
164
|
}
|
|
169
165
|
handleOptionsChange(newValue) {
|
|
170
166
|
var _a;
|
|
171
|
-
if (newValue)
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
this.value = (_a = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _a !== void 0 ? _a : '';
|
|
178
|
-
this.updateSelectedItem(this.value);
|
|
179
|
-
}
|
|
180
|
-
}
|
|
181
|
-
catch (error) {
|
|
182
|
-
console.error('nv-fielddropdown: error parsing options:', error);
|
|
183
|
-
this.parsedOptions = [];
|
|
184
|
-
}
|
|
185
|
-
}
|
|
186
|
-
else {
|
|
187
|
-
this.parsedOptions = [];
|
|
167
|
+
if (!newValue)
|
|
168
|
+
return;
|
|
169
|
+
if (!this.value) {
|
|
170
|
+
const defaultValue = newValue.find(option => option.selected);
|
|
171
|
+
this.value = (_a = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _a !== void 0 ? _a : '';
|
|
172
|
+
this.updateSelectedItem(this.value);
|
|
188
173
|
}
|
|
189
174
|
}
|
|
190
175
|
handleBlur(event) {
|
|
@@ -339,9 +324,10 @@ const NvFielddropdown = class {
|
|
|
339
324
|
/****************************************************************************/
|
|
340
325
|
//#region RENDER
|
|
341
326
|
render() {
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
this.el.querySelector('[slot="
|
|
327
|
+
var _a;
|
|
328
|
+
return (index.h(index.Host, { key: '6c23d4cfd361e1f40a2181db66692eb0d6326bfe', 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: 'db9a30ece9e669c70b18193b3cc7d14967a5e071', htmlFor: this.inputId }, index.h("slot", { key: 'b7a721b25b82646d34ce141526775f24a9849f4b', name: "label" }, this.label))), index.h("nv-popover", { key: '724756cb69b4b6ef8837e6f7f53a65eb42a43b5e', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: '0092cd2b78234ec2e0cdc70433246a2985b7e57f', class: "input-wrapper", slot: "trigger" }, index.h("slot", { key: '519c1a407c8309861673b9eadb723edb0c70ae68', name: "before-input" }), index.h("div", { key: 'd88af43846337d9bfd6aeb4f28ab2dc7e56de4e8', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '8e91459d89acbf7a1cde5e75c520b11b109e810d', 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: '55efb1100997af6b9b4ee41c489a9e628d36b749', name: "x", size: "md", emphasis: "lower", class: "clear-button", onClick: this.clearFilter, "aria-label": "Clear input" })), this.error && (index.h("nv-icon", { key: '69cfcac7b21d0e9faf9bad7f306bab187a761758', name: "alert-circle", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: '5b773edca6a5028eb8cedb42632a9c5b6e8b3d36', "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: 'c225279e1ec938e2fbe672ce02e8d2a79cb7ff1e', name: "after-input" })), index.h("div", { key: '94905d2f6a0b7faae17540139c0bd2458e4c98ae', slot: "content" }, ((_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 ||
|
|
329
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '5d0b74de616aefa056d17cb70fab0d36ab9b41c3', class: "description" }, index.h("slot", { key: 'bab9d8222164d2227c6024ac2bd5675142ccb964', name: "description" }, this.description))), (this.errorDescription ||
|
|
330
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '58596e0c753e8bb90f9d21432607427b0a029d64', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '6062d632aee6e825cd2d17a22180cb24d66e2864', name: "error-description" }, this.errorDescription)))));
|
|
345
331
|
}
|
|
346
332
|
static get formAssociated() { return true; }
|
|
347
333
|
get el() { return index.getElement(this); }
|
package/dist/cjs/{nv-fielddropdownitem.entry-DAlnhF7-.js → nv-fielddropdownitem.entry-BVLVXi0e.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
|
require('react');
|
|
5
5
|
|
|
6
6
|
const nvFielddropdownitemCss = "nv-fielddropdownitem{display:flex;gap:var(--spacing-2);flex-wrap:wrap;align-items:center;width:100%;padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);font-weight:var(--menu-contextual-item-font-weight);font-size:var(--list-dropdown-font-size);line-height:var(--list-dropdown-line-height);color:var(--components-list-dropdown-item-label-default);border-radius:var(--list-dropdown-item-radius);transition:background-color 150ms ease-out, color 150ms ease-out;cursor:pointer}nv-fielddropdownitem:hover,nv-fielddropdownitem:focus,nv-fielddropdownitem:focus-within{background-color:var(--components-list-dropdown-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-fielddropdownitem[disabled]:not([disabled=false]){cursor:not-allowed;background-color:unset;color:var(--components-menu-contextual-item-content-disabled)}nv-fielddropdownitem .text-wrapper{display:flex;flex-grow:1;align-items:center;justify-content:space-between}nv-fielddropdownitem [data-scope=text]{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nv-fielddropdownitem nv-icon[data-scope=selected]{color:var(--components-list-dropdown-item-label-default);align-self:center;margin-left:auto}";
|
|
@@ -59,7 +59,7 @@ const NvFielddropdownitem = class {
|
|
|
59
59
|
/****************************************************************************/
|
|
60
60
|
//#region RENDER
|
|
61
61
|
render() {
|
|
62
|
-
return (index.h(index.Host, { key: '
|
|
62
|
+
return (index.h(index.Host, { key: '86699901e52c35392ae5e60013f542427973a626', role: "menuitem", tabindex: '-1', onClick: this.handleSelected }, index.h("slot", { key: 'f2d893f0692821fc0e918da9283eb174c3429173' }), !this.composed && (index.h("div", { key: '5e62842ee3b0e79333f99a3ec8d92dd843ebd96e', class: "text-wrapper" }, index.h("span", { key: 'baa00ac59b5d85d912f34fc16fbf82d87af849e2', "data-scope": "text" }, this.label))), this.selected && (index.h("nv-icon", { key: 'f9a5082e4cee6b68531809f9861e3da83b3001d6', name: "check", "aria-hidden": "true", "data-scope": "selected" }))));
|
|
63
63
|
}
|
|
64
64
|
get el() { return index.getElement(this); }
|
|
65
65
|
};
|
package/dist/cjs/{nv-fieldmultiselect.entry-DDKtC-sR.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
|
*/
|
|
@@ -84,12 +80,6 @@ const NvFieldmultiselect = class {
|
|
|
84
80
|
* @default 300
|
|
85
81
|
*/
|
|
86
82
|
this.debounceDelay = 300;
|
|
87
|
-
/**
|
|
88
|
-
* State for the mode of the multiselect.
|
|
89
|
-
* @type {'options' | 'slots'}
|
|
90
|
-
* @default 'options'
|
|
91
|
-
*/
|
|
92
|
-
this.modeState = 'options'; // Default value
|
|
93
83
|
this.isHandlingEscape = false;
|
|
94
84
|
/**
|
|
95
85
|
* Applies focus to the input field as soon as the component is mounted. This
|
|
@@ -110,7 +100,7 @@ const NvFieldmultiselect = class {
|
|
|
110
100
|
item.style.display = '';
|
|
111
101
|
});
|
|
112
102
|
// Reorder options without the divider since there are no selected elements
|
|
113
|
-
this.
|
|
103
|
+
this.options = this.options.filter(option => !option.isDivider);
|
|
114
104
|
// Reorder options without the divider since there are no selected elements
|
|
115
105
|
this.reorderOptionsContent();
|
|
116
106
|
};
|
|
@@ -138,13 +128,6 @@ const NvFieldmultiselect = class {
|
|
|
138
128
|
return;
|
|
139
129
|
}
|
|
140
130
|
this.filterText = '';
|
|
141
|
-
// Only reorder based on the mode
|
|
142
|
-
if (this.modeState === 'options') {
|
|
143
|
-
this.reorderOptionsContent();
|
|
144
|
-
}
|
|
145
|
-
else {
|
|
146
|
-
this.reorderSlotContent();
|
|
147
|
-
}
|
|
148
131
|
// Reset filter if needed
|
|
149
132
|
if (this.filterable) {
|
|
150
133
|
this.resetFilter();
|
|
@@ -313,7 +296,7 @@ const NvFieldmultiselect = class {
|
|
|
313
296
|
* @returns {any} The JSX for options mode
|
|
314
297
|
*/
|
|
315
298
|
this.renderOptionsMode = () => {
|
|
316
|
-
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.
|
|
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()));
|
|
317
300
|
};
|
|
318
301
|
/**
|
|
319
302
|
* Renders the component in slots mode
|
|
@@ -336,13 +319,13 @@ const NvFieldmultiselect = class {
|
|
|
336
319
|
* Set the mode state and handle options change.
|
|
337
320
|
*/
|
|
338
321
|
componentWillLoad() {
|
|
339
|
-
|
|
322
|
+
var _a;
|
|
340
323
|
// Don't call handleOptionsChange if we are in slots mode
|
|
341
|
-
if (this.
|
|
324
|
+
if (this.options) {
|
|
342
325
|
this.handleOptionsChange(this.options);
|
|
343
326
|
}
|
|
344
327
|
// Specific initialization for slots mode
|
|
345
|
-
if (this.
|
|
328
|
+
if (!this.options) {
|
|
346
329
|
Promise.resolve().then(() => {
|
|
347
330
|
const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
|
|
348
331
|
// Initialize selectedValues with checked items
|
|
@@ -356,8 +339,8 @@ const NvFieldmultiselect = class {
|
|
|
356
339
|
});
|
|
357
340
|
}
|
|
358
341
|
// Initialize the sorted options array with the parsed options for initial rendering
|
|
359
|
-
if (this.
|
|
360
|
-
this.sortedOptions = [...this.
|
|
342
|
+
if (this.options) {
|
|
343
|
+
this.sortedOptions = [...((_a = this.options) !== null && _a !== void 0 ? _a : [])];
|
|
361
344
|
}
|
|
362
345
|
// Apply filtering if the multiselect is filterable and there is a value
|
|
363
346
|
if (this.filterable && this.value) {
|
|
@@ -373,10 +356,8 @@ const NvFieldmultiselect = class {
|
|
|
373
356
|
* Force reorder if options mode in componentDidLoad because of the initial render not trigger @watch
|
|
374
357
|
*/
|
|
375
358
|
componentDidLoad() {
|
|
376
|
-
if (this.
|
|
377
|
-
|
|
378
|
-
this.reorderOptionsContent();
|
|
379
|
-
});
|
|
359
|
+
if (this.options) {
|
|
360
|
+
this.handleOptionsChange(this.options);
|
|
380
361
|
}
|
|
381
362
|
}
|
|
382
363
|
/**
|
|
@@ -401,6 +382,12 @@ const NvFieldmultiselect = class {
|
|
|
401
382
|
else {
|
|
402
383
|
this.handlePopoverClose();
|
|
403
384
|
}
|
|
385
|
+
if (this.options) {
|
|
386
|
+
this.reorderOptionsContent();
|
|
387
|
+
}
|
|
388
|
+
else {
|
|
389
|
+
this.reorderSlotContent();
|
|
390
|
+
}
|
|
404
391
|
}
|
|
405
392
|
/**
|
|
406
393
|
* Listen for the `itemChecked` event emitted by child items.
|
|
@@ -434,41 +421,13 @@ const NvFieldmultiselect = class {
|
|
|
434
421
|
console.warn('Received itemChecked event with undefined or null value'); // Warning log
|
|
435
422
|
}
|
|
436
423
|
}
|
|
437
|
-
/**
|
|
438
|
-
* Emitted when the options change.
|
|
439
|
-
* @param {string | Array<{label: string, value: string, isDivider?: boolean, disabled?: boolean, description?: string, checked?: boolean}>} newValue - The new value of the options.
|
|
440
|
-
*/
|
|
441
424
|
handleOptionsChange(newValue) {
|
|
442
|
-
if (
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
this.parsedOptions = [...parsedOpts];
|
|
449
|
-
}
|
|
450
|
-
catch (error) {
|
|
451
|
-
console.error('Error parsing options:', error);
|
|
452
|
-
this.parsedOptions = [];
|
|
453
|
-
}
|
|
454
|
-
}
|
|
455
|
-
else if (Array.isArray(newValue)) {
|
|
456
|
-
this.selectedValues = newValue
|
|
457
|
-
.filter(option => option.checked)
|
|
458
|
-
.map(option => option.value);
|
|
459
|
-
this.parsedOptions = [...newValue];
|
|
460
|
-
}
|
|
461
|
-
else {
|
|
462
|
-
this.parsedOptions = [];
|
|
463
|
-
}
|
|
464
|
-
// Wait for the options to be fully loaded
|
|
465
|
-
Promise.resolve().then(() => {
|
|
466
|
-
requestAnimationFrame(() => {
|
|
467
|
-
if (this.modeState === 'options') {
|
|
468
|
-
this.reorderOptionsContent();
|
|
469
|
-
}
|
|
470
|
-
});
|
|
471
|
-
});
|
|
425
|
+
if (!newValue)
|
|
426
|
+
return;
|
|
427
|
+
this.selectedValues = newValue
|
|
428
|
+
.filter(option => option.checked)
|
|
429
|
+
.map(option => option.value);
|
|
430
|
+
this.reorderOptionsContent();
|
|
472
431
|
}
|
|
473
432
|
/**
|
|
474
433
|
* Emitted when the value changes.
|
|
@@ -565,7 +524,7 @@ const NvFieldmultiselect = class {
|
|
|
565
524
|
* Reorder the content of the slot.
|
|
566
525
|
*/
|
|
567
526
|
reorderSlotContent() {
|
|
568
|
-
if (this.
|
|
527
|
+
if (this.options)
|
|
569
528
|
return;
|
|
570
529
|
const ul = this.el.querySelector('ul');
|
|
571
530
|
if (!ul)
|
|
@@ -629,7 +588,7 @@ const NvFieldmultiselect = class {
|
|
|
629
588
|
existingEmptyMessage.remove();
|
|
630
589
|
}
|
|
631
590
|
if (!this.filterText.trim()) {
|
|
632
|
-
if (this.
|
|
591
|
+
if (this.options && this.options.length > 0) {
|
|
633
592
|
// Reset options display
|
|
634
593
|
const items = Array.from(ul.querySelectorAll('nv-fielddropdownitemcheck'));
|
|
635
594
|
items.forEach(item => {
|
|
@@ -652,11 +611,11 @@ const NvFieldmultiselect = class {
|
|
|
652
611
|
}
|
|
653
612
|
const normalizedFilter = this.normalizeText(this.filterText);
|
|
654
613
|
let hasVisibleItems = false;
|
|
655
|
-
if (this.
|
|
614
|
+
if (this.options && this.options.length > 0) {
|
|
656
615
|
// Filter options mode
|
|
657
616
|
const items = Array.from(ul.querySelectorAll('nv-fielddropdownitemcheck'));
|
|
658
617
|
items.forEach(item => {
|
|
659
|
-
const option = this.
|
|
618
|
+
const option = this.options.find(opt => opt.value === item.getAttribute('value'));
|
|
660
619
|
if (option && !option.isDivider) {
|
|
661
620
|
const matchesFilter = this.normalizeText(option.label).includes(normalizedFilter) ||
|
|
662
621
|
this.normalizeText(option.value).includes(normalizedFilter);
|
|
@@ -741,7 +700,7 @@ const NvFieldmultiselect = class {
|
|
|
741
700
|
* Filter multiselect items in slots mode
|
|
742
701
|
*/
|
|
743
702
|
filterSlotsItems() {
|
|
744
|
-
if (this.
|
|
703
|
+
if (this.options)
|
|
745
704
|
return;
|
|
746
705
|
const ul = this.el.querySelector('ul');
|
|
747
706
|
if (!ul)
|
|
@@ -877,7 +836,7 @@ const NvFieldmultiselect = class {
|
|
|
877
836
|
// Do the reorder and wait a bit before closing
|
|
878
837
|
const handleEscape = async () => {
|
|
879
838
|
this.isHandlingEscape = true; // Disable the hide listener
|
|
880
|
-
if (this.
|
|
839
|
+
if (this.options) {
|
|
881
840
|
this.reorderOptionsContent();
|
|
882
841
|
}
|
|
883
842
|
else {
|
|
@@ -989,9 +948,7 @@ const NvFieldmultiselect = class {
|
|
|
989
948
|
* @returns {any} The JSX for the component
|
|
990
949
|
*/
|
|
991
950
|
render() {
|
|
992
|
-
return this.
|
|
993
|
-
? this.renderOptionsMode()
|
|
994
|
-
: this.renderSlotsMode();
|
|
951
|
+
return this.options ? this.renderOptionsMode() : this.renderSlotsMode();
|
|
995
952
|
}
|
|
996
953
|
static get formAssociated() { return true; }
|
|
997
954
|
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
|
|
|
@@ -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
|
|
|
@@ -102,9 +102,9 @@ const NvFieldpassword = class {
|
|
|
102
102
|
/****************************************************************************/
|
|
103
103
|
//#region RENDER
|
|
104
104
|
render() {
|
|
105
|
-
return (index.h(index.Host, { key: '
|
|
106
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
107
|
-
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)))));
|
|
108
108
|
}
|
|
109
109
|
static get formAssociated() { return true; }
|
|
110
110
|
get el() { return index.getElement(this); }
|