@nova-design-system/nova-react 3.10.0 → 3.10.1-beta.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-Cm4m8MM1.js → index-B-1F0q3j.js} +163 -117
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/{nv-accordion-item.entry-CnpS6CGa.js → nv-accordion-item.entry-BF6TIAqX.js} +1 -1
- package/dist/cjs/{nv-accordion.entry-8UIjQG0P.js → nv-accordion.entry-CaTzxCZe.js} +1 -1
- package/dist/cjs/{nv-alert.entry-96FaJ9yM.js → nv-alert.entry-EOVv8IiE.js} +2 -2
- package/dist/cjs/{nv-avatar.entry-BcLkxe35.js → nv-avatar.entry-DyiNDtz4.js} +1 -1
- package/dist/cjs/{nv-badge_2.entry-CzDec_7j.js → nv-badge_2.entry-DTc3EkVi.js} +8 -2
- package/dist/cjs/{nv-breadcrumb.entry-BvnO7tGb.js → nv-breadcrumb.entry-DKmd0vLH.js} +1 -1
- package/dist/cjs/{nv-breadcrumbs.entry-Du98f0lC.js → nv-breadcrumbs.entry-CQB0c_7Y.js} +1 -1
- package/dist/cjs/{nv-button.entry-D8Ob5YDg.js → nv-button.entry-rPyTGZZw.js} +1 -1
- package/dist/cjs/{nv-buttongroup.entry-BGpQpMD_.js → nv-buttongroup.entry-BT9JC-IJ.js} +1 -1
- package/dist/cjs/{nv-calendar.entry-CAINTAPB.js → nv-calendar.entry-C4stLDAG.js} +1 -1
- package/dist/cjs/{nv-col.entry-5trkPEIg.js → nv-col.entry-DY7HEDMv.js} +1 -1
- package/dist/cjs/{nv-datagrid.entry-DqbLtkI4.js → nv-datagrid.entry-yzQVVpxg.js} +1 -1
- package/dist/cjs/{nv-datagridcolumn.entry-Dn1u3PFr.js → nv-datagridcolumn.entry-AOVwen5Y.js} +1 -1
- package/dist/cjs/{nv-dialog.entry-pibB_NBe.js → nv-dialog.entry-DztbR2hl.js} +1 -1
- package/dist/cjs/{nv-dialogfooter_2.entry-0MTTK7Y2.js → nv-dialogfooter_2.entry-iPMNyDQF.js} +1 -1
- package/dist/cjs/{nv-fieldcheckbox.entry-DBSUOWI_.js → nv-fieldcheckbox.entry-WEzw8Y0l.js} +1 -1
- package/dist/cjs/{nv-fielddate.entry-DM6ap-c_.js → nv-fielddate.entry-B4B2QgCn.js} +1 -1
- package/dist/cjs/{nv-fielddaterange.entry-DJEbpwlV.js → nv-fielddaterange.entry-BQ-J4HKx.js} +1 -1
- package/dist/cjs/{nv-fielddropdown.entry-COGswgIv.js → nv-fielddropdown.entry-B2YBjdkI.js} +1 -1
- package/dist/cjs/{nv-fielddropdownitem.entry-m6TjyMp3.js → nv-fielddropdownitem.entry-B0wCnSfT.js} +1 -1
- package/dist/cjs/{nv-fieldmultiselect.entry-PhmD9JYp.js → nv-fieldmultiselect.entry-DuPOvire.js} +113 -73
- package/dist/cjs/{nv-fieldnumber.entry-dR0KzTa9.js → nv-fieldnumber.entry-BJANMe4j.js} +1 -1
- package/dist/cjs/{nv-fieldpassword.entry-CuQO_qjq.js → nv-fieldpassword.entry-DkkJHwkG.js} +1 -1
- package/dist/cjs/{nv-fieldradio.entry-UvL5fKFQ.js → nv-fieldradio.entry-8uDJz8PS.js} +1 -1
- package/dist/cjs/{nv-fieldselect.entry-DKMYBCaJ.js → nv-fieldselect.entry-DN6euwMc.js} +1 -1
- package/dist/cjs/{nv-fieldslider.entry-tOUuTb46.js → nv-fieldslider.entry-BI72B0_Z.js} +1 -1
- package/dist/cjs/{nv-fieldtext.entry-m9XbYLZW.js → nv-fieldtext.entry-DzHqp5Lp.js} +1 -1
- package/dist/cjs/{nv-fieldtextarea.entry-DQpfF5ME.js → nv-fieldtextarea.entry-CFgoC_mT.js} +1 -1
- package/dist/cjs/{nv-fieldtime.entry-Pmt1E_Hm.js → nv-fieldtime.entry-nVAeh7Ot.js} +1 -1
- package/dist/cjs/{nv-icon.entry-C4VmFtRW.js → nv-icon.entry-C0-IQQji.js} +1 -1
- package/dist/cjs/{nv-iconbutton_2.entry-Cc2xKJb5.js → nv-iconbutton_2.entry-BnnDZjg4.js} +1 -1
- package/dist/cjs/{nv-menu.entry-B6kxLiip.js → nv-menu.entry-BB2mjwHV.js} +1 -1
- package/dist/cjs/{nv-menuitem.entry-rYbCnY7o.js → nv-menuitem.entry-CgkJiqc_.js} +1 -1
- package/dist/cjs/{nv-popover.entry-CJJjW4Pv.js → nv-popover.entry-_Iv8yq0t.js} +1 -1
- package/dist/cjs/{nv-row.entry-BMMoJvjb.js → nv-row.entry-BZ2prXQS.js} +1 -1
- package/dist/cjs/{nv-stack.entry-DI6QCSbS.js → nv-stack.entry-C69ZIFWU.js} +1 -1
- package/dist/cjs/{nv-table.entry-BPWQIWyg.js → nv-table.entry-CXqK-89M.js} +1 -1
- package/dist/cjs/{nv-tablecolumn.entry-De81f1e9.js → nv-tablecolumn.entry-RMYxY100.js} +1 -1
- package/dist/cjs/{nv-toggle.entry-BTNtBXGR.js → nv-toggle.entry-Bx7cG_fC.js} +1 -1
- package/dist/cjs/{nv-togglebutton.entry-vWKwWiQe.js → nv-togglebutton.entry-CeYlChll.js} +1 -1
- package/dist/cjs/{nv-togglebuttongroup.entry-BmpHIXnd.js → nv-togglebuttongroup.entry-ehe00MUL.js} +1 -1
- package/dist/cjs/{nv-tooltip.entry-BJHXydMC.js → nv-tooltip.entry-CCDVLdqi.js} +1 -1
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-B-1F0q3j.js');
|
|
4
4
|
var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
|
|
5
5
|
var constants23aaef7b = require('./constants-23aaef7b-Cj2b-su0.js');
|
|
6
6
|
var collapse_animation16e3af45 = require('./collapse.animation-16e3af45-CChx_tQJ.js');
|
|
@@ -9,7 +9,7 @@ require('./stylefire.es-74da334a-y0piPjlz.js');
|
|
|
9
9
|
var timeline_animationAdf35ecb = require('./timeline.animation-adf35ecb-CE6Dsdxr.js');
|
|
10
10
|
require('react');
|
|
11
11
|
|
|
12
|
-
const nvAlertCss = "nv-alert{display:flex !important;align-items:flex-start;position:relative;gap:var(--alert-gap-x);border-radius:var(--alert-radius);font-family:\"TT Norms Pro\", \"Montserrat\", sans-serif}nv-alert>nv-icon{margin-left:var(--alert-icon-position-x);margin-top:var(--alert-icon-position-y)}nv-alert.hidden{display:none !important}nv-alert.feedback-information{background-color:var(--components-alert-information-background);border:1px solid var(--components-alert-information-border) !important}nv-alert.feedback-information>.close:focus,nv-alert.feedback-information>.close:focus-within{outline:none}nv-alert.feedback-information>.close:focus-visible,nv-alert.feedback-information>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-information-border);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-alert.feedback-warning{background-color:var(--components-alert-warning-background);border:1px solid var(--components-alert-warning-border) !important}nv-alert.feedback-warning>.close:focus,nv-alert.feedback-warning>.close:focus-within{outline:none}nv-alert.feedback-warning>.close:focus-visible,nv-alert.feedback-warning>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-warning-border);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-alert.feedback-error{background-color:var(--components-alert-error-background);border:1px solid var(--components-alert-error-border) !important}nv-alert.feedback-error>.close:focus,nv-alert.feedback-error>.close:focus-within{outline:none}nv-alert.feedback-error>.close:focus-visible,nv-alert.feedback-error>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-error-border);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-alert.feedback-success{background-color:var(--components-alert-success-background);border:1px solid var(--components-alert-success-border) !important}nv-alert.feedback-success>.close:focus,nv-alert.feedback-success>.close:focus-within{outline:none}nv-alert.feedback-success>.close:focus-visible,nv-alert.feedback-success>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-success-border);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-alert.feedback-neutral{background-color:var(--components-alert-neutral-background);border:1px solid var(--components-alert-neutral-border) !important}nv-alert.feedback-neutral>.close:focus,nv-alert.feedback-neutral>.close:focus-within{outline:none}nv-alert.feedback-neutral>.close:focus-visible,nv-alert.feedback-neutral>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-neutral-border);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-alert>nv-icon.icon-information{color:var(--components-alert-information-icon)}nv-alert>nv-icon.icon-warning{color:var(--components-alert-warning-icon)}nv-alert>nv-icon.icon-error{color:var(--components-alert-error-icon)}nv-alert>nv-icon.icon-success{color:var(--components-alert-success-icon)}nv-alert>nv-icon.icon-neutral{color:var(--components-alert-neutral-icon)}nv-alert>.content{display:flex;padding:var(--alert-padding);padding-left:0;flex-direction:column;gap:var(--alert-gap-y)}nv-alert>.content>.heading{color:var(--components-alert-content-title);font-size:var(--alert-heading-font-size);line-height:var(--alert-heading-line-height);font-weight:var(--alert-heading-font-weight)}nv-alert>.content>.message{color:var(--components-alert-content-description);font-size:var(--alert-message-font-size);line-height:var(--alert-message-line-height)}nv-alert>.close{border-radius:var(--alert-radius);position:absolute;display:flex;top:var(--alert-icon-position-y);right:var(--alert-icon-position-x);padding:0;border:none;background:none;cursor:pointer}";
|
|
12
|
+
const nvAlertCss = "nv-alert{display:flex !important;align-items:flex-start;position:relative;gap:var(--alert-gap-x);border-radius:var(--alert-radius);font-family:\"TT Norms Pro\", \"Montserrat\", sans-serif}nv-alert>nv-icon{margin-left:var(--alert-icon-position-x);margin-top:var(--alert-icon-position-y)}nv-alert.hidden{display:none !important}nv-alert.feedback-information{background-color:var(--components-alert-information-background);border:1px solid var(--components-alert-information-border) !important}nv-alert.feedback-information>.close:focus,nv-alert.feedback-information>.close:focus-within{outline:none}nv-alert.feedback-information>.close:focus-visible,nv-alert.feedback-information>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-information-border);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-alert.feedback-warning{background-color:var(--components-alert-warning-background);border:1px solid var(--components-alert-warning-border) !important}nv-alert.feedback-warning>.close:focus,nv-alert.feedback-warning>.close:focus-within{outline:none}nv-alert.feedback-warning>.close:focus-visible,nv-alert.feedback-warning>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-warning-border);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-alert.feedback-error{background-color:var(--components-alert-error-background);border:1px solid var(--components-alert-error-border) !important}nv-alert.feedback-error>.close:focus,nv-alert.feedback-error>.close:focus-within{outline:none}nv-alert.feedback-error>.close:focus-visible,nv-alert.feedback-error>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-error-border);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-alert.feedback-success{background-color:var(--components-alert-success-background);border:1px solid var(--components-alert-success-border) !important}nv-alert.feedback-success>.close:focus,nv-alert.feedback-success>.close:focus-within{outline:none}nv-alert.feedback-success>.close:focus-visible,nv-alert.feedback-success>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-success-border);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-alert.feedback-neutral{background-color:var(--components-alert-neutral-background);border:1px solid var(--components-alert-neutral-border) !important}nv-alert.feedback-neutral>.close:focus,nv-alert.feedback-neutral>.close:focus-within{outline:none}nv-alert.feedback-neutral>.close:focus-visible,nv-alert.feedback-neutral>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-neutral-border);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-alert>nv-icon.icon-information{color:var(--components-alert-information-icon)}nv-alert>nv-icon.icon-warning{color:var(--components-alert-warning-icon)}nv-alert>nv-icon.icon-error{color:var(--components-alert-error-icon)}nv-alert>nv-icon.icon-success{color:var(--components-alert-success-icon)}nv-alert>nv-icon.icon-neutral{color:var(--components-alert-neutral-icon)}nv-alert>.content{display:flex;padding:var(--alert-padding);padding-right:calc(var(--alert-padding) + var(--icon-md) + var(--spacing-1));padding-left:0;flex-direction:column;gap:var(--alert-gap-y)}nv-alert>.content>.heading{color:var(--components-alert-content-title);font-size:var(--alert-heading-font-size);line-height:var(--alert-heading-line-height);font-weight:var(--alert-heading-font-weight)}nv-alert>.content>.message{color:var(--components-alert-content-description);font-size:var(--alert-message-font-size);line-height:var(--alert-message-line-height)}nv-alert>.close{border-radius:var(--alert-radius);position:absolute;display:flex;top:var(--alert-icon-position-y);right:var(--alert-icon-position-x);padding:0;border:none;background:none;cursor:pointer}";
|
|
13
13
|
const NvAlertStyle0 = nvAlertCss;
|
|
14
14
|
|
|
15
15
|
const NvAlert = class {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-B-1F0q3j.js');
|
|
4
4
|
var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
|
|
5
5
|
var collapse_animation16e3af45 = require('./collapse.animation-16e3af45-CChx_tQJ.js');
|
|
6
6
|
var fade_animation71e8e34c = require('./fade.animation-71e8e34c-BAw_TYsB.js');
|
|
@@ -167,6 +167,9 @@ const NvFielddropdownitemcheck = class {
|
|
|
167
167
|
* Disables the item, preventing any user interaction.
|
|
168
168
|
*/
|
|
169
169
|
this.disabled = false;
|
|
170
|
+
//#endregion EVENTS
|
|
171
|
+
/****************************************************************************/
|
|
172
|
+
//#region METHODS
|
|
170
173
|
/**
|
|
171
174
|
* when the child <nv-fieldcheckbox> change its `checked` state,
|
|
172
175
|
* update `this.checked` and emit `itemChecked`.
|
|
@@ -195,8 +198,11 @@ const NvFielddropdownitemcheck = class {
|
|
|
195
198
|
}
|
|
196
199
|
};
|
|
197
200
|
}
|
|
201
|
+
//#endregion METHODS
|
|
202
|
+
/****************************************************************************/
|
|
203
|
+
//#region RENDER
|
|
198
204
|
render() {
|
|
199
|
-
return (index.h(index.Host, { key: '
|
|
205
|
+
return (index.h(index.Host, { key: 'cb922f0c0224c950ab5a87783028f2909eb1e39c', onClick: this.handleClick }, index.h("nv-fieldcheckbox", { key: '6f8748022131a8cd31b0f69851313f80c330172a', checked: this.checked, name: this.label || this.value, label: this.label || this.value, labelPlacement: "after", description: this.description, disabled: this.disabled, tabindex: "-1", onCheckedChanged: this.onFieldcheckboxChanged }, index.h("slot", { key: '20d1014accc6cfc00658703057b25037175287af' }), index.h("slot", { key: 'a7e61eed6bc72d3a14096cac2c195629a0ce2928', name: "main" }), index.h("slot", { key: '93f6bce370ac36f1ce3e0f2c1d9cdd598c14cb14', name: "label" }), index.h("slot", { key: '837359fc1fea49e0dea221039dc7466cdc86b757', name: "description" }))));
|
|
200
206
|
}
|
|
201
207
|
get el() { return index.getElement(this); }
|
|
202
208
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-B-1F0q3j.js');
|
|
4
4
|
require('react');
|
|
5
5
|
|
|
6
6
|
const nvBreadcrumbsCss = "nv-breadcrumbs{display:block}nv-breadcrumbs>ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--breadcrumb-padding-y)}nv-breadcrumbs nv-breadcrumb:last-child [data-scope=separator],nv-breadcrumbs nv-breadcrumb:last-child [slot=separator]{display:none}";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-B-1F0q3j.js');
|
|
4
4
|
var constants23aaef7b = require('./constants-23aaef7b-Cj2b-su0.js');
|
|
5
5
|
var _commonjsHelpers1789f0cf = require('./_commonjsHelpers-1789f0cf-BJu3ubxk.js');
|
|
6
6
|
require('react');
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-B-1F0q3j.js');
|
|
4
4
|
var dom_utilsAc71e0ef = require('./dom.utils-ac71e0ef-CmIwRr6O.js');
|
|
5
5
|
var constants23aaef7b = require('./constants-23aaef7b-Cj2b-su0.js');
|
|
6
6
|
require('react');
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-B-1F0q3j.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 constants23aaef7b = require('./constants-23aaef7b-Cj2b-su0.js');
|
package/dist/cjs/{nv-fielddropdownitem.entry-m6TjyMp3.js → nv-fielddropdownitem.entry-B0wCnSfT.js}
RENAMED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-B-1F0q3j.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}";
|
package/dist/cjs/{nv-fieldmultiselect.entry-PhmD9JYp.js → nv-fieldmultiselect.entry-DuPOvire.js}
RENAMED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-B-1F0q3j.js');
|
|
4
4
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
5
5
|
require('react');
|
|
6
6
|
|
|
@@ -12,6 +12,7 @@ const NvFieldmultiselect = class {
|
|
|
12
12
|
index.registerInstance(this, hostRef);
|
|
13
13
|
this.valueChanged = index.createEvent(this, "valueChanged");
|
|
14
14
|
this.filterTextChanged = index.createEvent(this, "filterTextChanged");
|
|
15
|
+
this.isBulkOperation = false;
|
|
15
16
|
/**
|
|
16
17
|
* Sets the ID for the input element and the for attribute of the associated
|
|
17
18
|
* label. If no ID is provided, a random one will be automatically generated
|
|
@@ -119,6 +120,9 @@ const NvFieldmultiselect = class {
|
|
|
119
120
|
this.isSelectAllSectionVisible = true;
|
|
120
121
|
// Add the flag to the class
|
|
121
122
|
this.preventBlurClose = false;
|
|
123
|
+
this.handleMouseDownPreventBlur = () => {
|
|
124
|
+
this.preventBlurClose = true;
|
|
125
|
+
};
|
|
122
126
|
/**
|
|
123
127
|
* Handle badge close for options mode.
|
|
124
128
|
*/
|
|
@@ -305,6 +309,11 @@ const NvFieldmultiselect = class {
|
|
|
305
309
|
*/
|
|
306
310
|
this.handleInputBlurSlots = () => {
|
|
307
311
|
setTimeout(() => {
|
|
312
|
+
// Honor preventBlurClose to avoid closing when interacting inside the popover
|
|
313
|
+
if (this.preventBlurClose) {
|
|
314
|
+
this.preventBlurClose = false;
|
|
315
|
+
return; // Don't close the popover
|
|
316
|
+
}
|
|
308
317
|
if (!this.el.contains(document.activeElement)) {
|
|
309
318
|
// Close the popover without affecting the divider
|
|
310
319
|
this.open = false;
|
|
@@ -341,24 +350,33 @@ const NvFieldmultiselect = class {
|
|
|
341
350
|
this.toggleSelectAllOptions = (selectAll) => {
|
|
342
351
|
if (!this.options)
|
|
343
352
|
return;
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
353
|
+
this.isBulkOperation = true; // Set flag to suppress individual emissions
|
|
354
|
+
try {
|
|
355
|
+
// Get visible and enabled option values from DOM
|
|
356
|
+
const visibleOptionValues = this.getVisibleEnabledOptionItems();
|
|
357
|
+
console.info('[SelectAll][Options] toggleSelectAllOptions called. selectAll:', selectAll, 'visibleOptionValues:', visibleOptionValues, 'Current value:', this.value);
|
|
358
|
+
if (selectAll) {
|
|
359
|
+
// Select all visible options - merge with existing selections
|
|
360
|
+
this.value = [...new Set([...this.value, ...visibleOptionValues])];
|
|
361
|
+
}
|
|
362
|
+
else {
|
|
363
|
+
// Deselect only the visible options, keep others that might be filtered out
|
|
364
|
+
this.value = this.value.filter(val => !visibleOptionValues.includes(val));
|
|
365
|
+
}
|
|
366
|
+
console.info('[SelectAll][Options] New value after toggle:', this.value);
|
|
367
|
+
// Emit the change event
|
|
368
|
+
this.valueChanged.emit(this.value);
|
|
369
|
+
// Synchronize child components
|
|
370
|
+
this.syncChildComponents();
|
|
371
|
+
// Reorder content to move selected items to top
|
|
372
|
+
this.reorderOptionsContent();
|
|
350
373
|
}
|
|
351
|
-
|
|
352
|
-
//
|
|
353
|
-
|
|
374
|
+
finally {
|
|
375
|
+
// Defer reset to next frame to ensure any async child emissions are ignored
|
|
376
|
+
requestAnimationFrame(() => {
|
|
377
|
+
this.isBulkOperation = false; // Reset flag
|
|
378
|
+
});
|
|
354
379
|
}
|
|
355
|
-
console.info('[SelectAll][Options] New value after toggle:', this.value);
|
|
356
|
-
// Emit the change event
|
|
357
|
-
this.valueChanged.emit(this.value);
|
|
358
|
-
// Synchronize child components
|
|
359
|
-
this.syncChildComponents();
|
|
360
|
-
// Reorder content to move selected items to top
|
|
361
|
-
this.reorderOptionsContent();
|
|
362
380
|
};
|
|
363
381
|
/**
|
|
364
382
|
* Toggles the selection state of all non-disabled slot items.
|
|
@@ -367,31 +385,40 @@ const NvFieldmultiselect = class {
|
|
|
367
385
|
this.toggleSelectAllSlots = (selectAll) => {
|
|
368
386
|
if (this.options)
|
|
369
387
|
return; // Only for slots mode
|
|
370
|
-
//
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
388
|
+
this.isBulkOperation = true; // Set flag to suppress individual emissions
|
|
389
|
+
try {
|
|
390
|
+
// Get visible and enabled items
|
|
391
|
+
const items = this.getVisibleEnabledSlotItems();
|
|
392
|
+
console.info('[SelectAll][Slots] toggleSelectAllSlots called. selectAll:', selectAll, 'visible slot items:', items.map(item => item.getAttribute('value') || item.getAttribute('label')), 'Current value:', this.value);
|
|
393
|
+
if (selectAll) {
|
|
394
|
+
// Select all visible items
|
|
395
|
+
const allActiveValues = items
|
|
396
|
+
.map(item => item.getAttribute('value') || item.getAttribute('label') || '')
|
|
397
|
+
.filter(value => value !== '');
|
|
398
|
+
this.value = [...new Set([...this.value, ...allActiveValues])];
|
|
399
|
+
}
|
|
400
|
+
else {
|
|
401
|
+
// Deselect only the visible items, keep others that might be filtered out
|
|
402
|
+
const visibleValues = items
|
|
403
|
+
.map(item => item.getAttribute('value') || item.getAttribute('label') || '')
|
|
404
|
+
.filter(value => value !== '');
|
|
405
|
+
this.value = this.value.filter(val => !visibleValues.includes(val));
|
|
406
|
+
}
|
|
407
|
+
console.info('[SelectAll][Slots] New value after toggle:', this.value);
|
|
408
|
+
// Emit the change event
|
|
409
|
+
this.valueChanged.emit(this.value);
|
|
410
|
+
// Force synchronization with a small delay to ensure DOM is updated
|
|
411
|
+
requestAnimationFrame(() => {
|
|
412
|
+
this.syncChildComponents();
|
|
413
|
+
this.reorderSlotContent();
|
|
414
|
+
});
|
|
379
415
|
}
|
|
380
|
-
|
|
381
|
-
//
|
|
382
|
-
|
|
383
|
-
.
|
|
384
|
-
|
|
385
|
-
this.value = this.value.filter(val => !visibleValues.includes(val));
|
|
416
|
+
finally {
|
|
417
|
+
// Defer reset to next frame to ensure any async child emissions are ignored
|
|
418
|
+
requestAnimationFrame(() => {
|
|
419
|
+
this.isBulkOperation = false; // Reset flag
|
|
420
|
+
});
|
|
386
421
|
}
|
|
387
|
-
console.info('[SelectAll][Slots] New value after toggle:', this.value);
|
|
388
|
-
// Emit the change event
|
|
389
|
-
this.valueChanged.emit(this.value);
|
|
390
|
-
// Force synchronization with a small delay to ensure DOM is updated
|
|
391
|
-
requestAnimationFrame(() => {
|
|
392
|
-
this.syncChildComponents();
|
|
393
|
-
this.reorderSlotContent();
|
|
394
|
-
});
|
|
395
422
|
};
|
|
396
423
|
/**
|
|
397
424
|
* Handle click on the select all checkbox in options mode.
|
|
@@ -443,16 +470,10 @@ const NvFieldmultiselect = class {
|
|
|
443
470
|
width: '0',
|
|
444
471
|
height: '0',
|
|
445
472
|
pointerEvents: 'none',
|
|
446
|
-
}, tabIndex: -1, "aria-hidden": "true", autoComplete: this.autocomplete, name: this.name, onFocus: this.handleInputFocusOptions }), index.h("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickOptions, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusOptions, "aria-label": this.label, "aria-controls": `${this.inputId}-listbox`, "data-scope": "focusable", role: "button" }, index.h("span", null, this.placeholder)))), this.error && (index.h("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), this.filterable && this.filterText.length > 0 && (index.h("nv-iconbutton", { "data-scope": "clear-filter", name: "x", size: "md", emphasis: "lower", "aria-label": "Clear filter text", tabindex: "-1", title: "Clear filter text", onMouseDown: ()
|
|
447
|
-
this.preventBlurClose = true;
|
|
448
|
-
}, onClick: this.clearFilterText })), 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', title: this.open ? 'Hide dropdown' : 'Show dropdown', onMouseDown: () => {
|
|
449
|
-
this.preventBlurClose = true;
|
|
450
|
-
}, onClick: this.togglePopoverOptions })), index.h("slot", { name: "after-input" })), index.h("div", { id: `${this.inputId}-listbox`, slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, this.shouldShowToggleAllOptionsButton() && (index.h("div", { class: "select-all-container" }, index.h("div", { class: "select-all-header" }, this.isSelectAllSectionVisible && (index.h("nv-fieldcheckbox", { checked: this.getSelectAllCheckboxStateOptions() === 'checked', indeterminate: this.getSelectAllCheckboxStateOptions() ===
|
|
473
|
+
}, tabIndex: -1, "aria-hidden": "true", autoComplete: this.autocomplete, name: this.name, onFocus: this.handleInputFocusOptions }), index.h("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickOptions, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusOptions, "aria-label": this.label, "aria-controls": `${this.inputId}-listbox`, "data-scope": "focusable", role: "button" }, index.h("span", null, this.placeholder)))), this.error && (index.h("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), this.filterable && this.filterText.length > 0 && (index.h("nv-iconbutton", { "data-scope": "clear-filter", name: "x", size: "md", emphasis: "lower", "aria-label": "Clear filter text", tabindex: "-1", title: "Clear filter text", onMouseDown: this.handleMouseDownPreventBlur, onClick: this.clearFilterText })), 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', title: this.open ? 'Hide dropdown' : 'Show dropdown', onMouseDown: this.handleMouseDownPreventBlur, onClick: this.togglePopoverOptions })), index.h("slot", { name: "after-input" })), index.h("div", { id: `${this.inputId}-listbox`, slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {}, onMouseDown: this.handleMouseDownPreventBlur }, this.shouldShowToggleAllOptionsButton() && (index.h("div", { class: "select-all-container" }, index.h("div", { class: "select-all-header" }, this.isSelectAllSectionVisible && (index.h("nv-fieldcheckbox", { checked: this.getSelectAllCheckboxStateOptions() === 'checked', indeterminate: this.getSelectAllCheckboxStateOptions() ===
|
|
451
474
|
'indeterminate', label: this.getSelectAllCheckboxStateOptions() === 'unchecked'
|
|
452
475
|
? this.selectAllLabel
|
|
453
|
-
: this.deselectAllLabel, onMouseDown:
|
|
454
|
-
this.preventBlurClose = true;
|
|
455
|
-
}, onClick: this.handleSelectAllCheckboxOptionsClick }))))), index.h("ul", { role: "listbox", "aria-multiselectable": "true" }, this.options.map(option => (index.h("nv-fielddropdownitemcheck", { role: "option", label: option.label, description: option.description, value: option.value, checked: this.value.includes(option.value), disabled: option.disabled })))))), this.renderDescriptions()));
|
|
476
|
+
: this.deselectAllLabel, onMouseDown: this.handleMouseDownPreventBlur, onClick: this.handleSelectAllCheckboxOptionsClick }))))), index.h("ul", { role: "listbox", "aria-multiselectable": "true" }, this.options.map(option => (index.h("nv-fielddropdownitemcheck", { role: "option", label: option.label, description: option.description, value: option.value, checked: this.value.includes(option.value), disabled: option.disabled })))))), this.renderDescriptions()));
|
|
456
477
|
};
|
|
457
478
|
/**
|
|
458
479
|
* Renders the component in slots mode
|
|
@@ -465,16 +486,10 @@ const NvFieldmultiselect = class {
|
|
|
465
486
|
width: '0',
|
|
466
487
|
height: '0',
|
|
467
488
|
pointerEvents: 'none',
|
|
468
|
-
}, tabIndex: -1, "aria-hidden": "true", autoComplete: this.autocomplete, name: this.name, onFocus: this.handleInputFocusSlots }), index.h("p", { id: this.inputId, class: "non-filterable-text", "aria-label": this.label, onClick: this.handleInputContainerClickSlots, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusSlots, "aria-controls": `${this.inputId}-listbox`, "data-scope": "focusable", role: "button" }, index.h("span", null, this.placeholder)))), this.error && (index.h("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), this.filterable && this.filterText.length > 0 && (index.h("nv-iconbutton", { name: "x", size: "md", emphasis: "lower", tabindex: "-1", onMouseDown: ()
|
|
469
|
-
this.preventBlurClose = true;
|
|
470
|
-
}, onClick: this.clearFilterText, "aria-label": "Clear filter text" })), 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', title: this.open ? 'Hide dropdown' : 'Show dropdown', onMouseDown: () => {
|
|
471
|
-
this.preventBlurClose = true;
|
|
472
|
-
}, onClick: this.togglePopoverSlots })), index.h("slot", { name: "after-input" })), index.h("div", { id: `${this.inputId}-listbox`, slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, this.shouldShowToggleAllSlotButton() && (index.h("div", { class: "select-all-container" }, index.h("div", { class: "select-all-header" }, this.isSelectAllSectionVisible && (index.h("nv-fieldcheckbox", { checked: this.getSelectAllCheckboxStateSlots() === 'checked', indeterminate: this.getSelectAllCheckboxStateSlots() ===
|
|
489
|
+
}, tabIndex: -1, "aria-hidden": "true", autoComplete: this.autocomplete, name: this.name, onFocus: this.handleInputFocusSlots }), index.h("p", { id: this.inputId, class: "non-filterable-text", "aria-label": this.label, onClick: this.handleInputContainerClickSlots, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusSlots, "aria-controls": `${this.inputId}-listbox`, "data-scope": "focusable", role: "button" }, index.h("span", null, this.placeholder)))), this.error && (index.h("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), this.filterable && this.filterText.length > 0 && (index.h("nv-iconbutton", { name: "x", size: "md", emphasis: "lower", tabindex: "-1", onMouseDown: this.handleMouseDownPreventBlur, onClick: this.clearFilterText, "aria-label": "Clear filter text" })), 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', title: this.open ? 'Hide dropdown' : 'Show dropdown', onMouseDown: this.handleMouseDownPreventBlur, onClick: this.togglePopoverSlots })), index.h("slot", { name: "after-input" })), index.h("div", { id: `${this.inputId}-listbox`, slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {}, onMouseDown: this.handleMouseDownPreventBlur }, this.shouldShowToggleAllSlotButton() && (index.h("div", { class: "select-all-container" }, index.h("div", { class: "select-all-header" }, this.isSelectAllSectionVisible && (index.h("nv-fieldcheckbox", { checked: this.getSelectAllCheckboxStateSlots() === 'checked', indeterminate: this.getSelectAllCheckboxStateSlots() ===
|
|
473
490
|
'indeterminate', label: this.getSelectAllCheckboxStateSlots() === 'unchecked'
|
|
474
491
|
? this.selectAllLabel
|
|
475
|
-
: this.deselectAllLabel, onMouseDown:
|
|
476
|
-
this.preventBlurClose = true;
|
|
477
|
-
}, onClick: this.handleSelectAllCheckboxSlotsClick }))))), index.h("slot", { name: "content" }))), this.renderDescriptions()));
|
|
492
|
+
: this.deselectAllLabel, onMouseDown: this.handleMouseDownPreventBlur, onClick: this.handleSelectAllCheckboxSlotsClick }))))), index.h("slot", { name: "content" }))), this.renderDescriptions()));
|
|
478
493
|
};
|
|
479
494
|
}
|
|
480
495
|
//#endregion EVENTS
|
|
@@ -503,7 +518,12 @@ const NvFieldmultiselect = class {
|
|
|
503
518
|
this.reorderOptionsContent();
|
|
504
519
|
}
|
|
505
520
|
watchValueHandler() {
|
|
506
|
-
console.info('[Watch:value] Value changed:', this.value);
|
|
521
|
+
console.info('[Watch:value] Value changed:', this.value, 'isBulkOperation:', this.isBulkOperation);
|
|
522
|
+
// Skip processing during bulk operations
|
|
523
|
+
if (this.isBulkOperation) {
|
|
524
|
+
console.info('[Watch:value] Skipping syncChildComponents and options update due to bulk operation');
|
|
525
|
+
return;
|
|
526
|
+
}
|
|
507
527
|
// Synchronize child components when value changes programmatically
|
|
508
528
|
if (this.el && this.el.isConnected) {
|
|
509
529
|
this.syncChildComponents();
|
|
@@ -548,7 +568,9 @@ const NvFieldmultiselect = class {
|
|
|
548
568
|
* @param {CustomEvent} event - The event object containing the selected value and its checked state.
|
|
549
569
|
*/
|
|
550
570
|
handleItemChecked(event) {
|
|
551
|
-
if (this.disabled || this.readonly) {
|
|
571
|
+
if (this.disabled || this.readonly || this.isBulkOperation) {
|
|
572
|
+
// Skip processing itemChecked events during bulk operations
|
|
573
|
+
console.info('[Event:itemChecked] Skipped due to bulk operation or disabled/readonly', event.detail);
|
|
552
574
|
return;
|
|
553
575
|
}
|
|
554
576
|
const { value, checked } = event.detail;
|
|
@@ -556,21 +578,23 @@ const NvFieldmultiselect = class {
|
|
|
556
578
|
if (value !== undefined && value !== null) {
|
|
557
579
|
const newValue = [...this.value];
|
|
558
580
|
const valueIndex = newValue.indexOf(value);
|
|
581
|
+
let hasChanged = false;
|
|
559
582
|
if (checked && valueIndex === -1) {
|
|
560
583
|
newValue.push(value);
|
|
584
|
+
hasChanged = true;
|
|
561
585
|
}
|
|
562
586
|
else if (!checked && valueIndex > -1) {
|
|
563
587
|
newValue.splice(valueIndex, 1);
|
|
588
|
+
hasChanged = true;
|
|
564
589
|
}
|
|
565
590
|
console.info('[Event:itemChecked] newValue after update:', newValue);
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
591
|
+
if (hasChanged) {
|
|
592
|
+
this.value = newValue;
|
|
593
|
+
this.valueChanged.emit(this.value);
|
|
594
|
+
this.syncChildComponents();
|
|
595
|
+
}
|
|
571
596
|
// Preserve the filter text in the input
|
|
572
597
|
if (this.filterable && this.inputElement) {
|
|
573
|
-
// Keep the current filter text in the input
|
|
574
598
|
this.inputElement.value = this.filterText;
|
|
575
599
|
}
|
|
576
600
|
}
|
|
@@ -598,7 +622,11 @@ const NvFieldmultiselect = class {
|
|
|
598
622
|
*/
|
|
599
623
|
connectedCallback() {
|
|
600
624
|
console.info('[Lifecycle] connectedCallback - value:', this.value);
|
|
601
|
-
|
|
625
|
+
// Bind once and reuse the same reference for add/remove to avoid leaks
|
|
626
|
+
if (!this._boundHandleClickOutside) {
|
|
627
|
+
this._boundHandleClickOutside = this.handleClickOutside.bind(this);
|
|
628
|
+
}
|
|
629
|
+
document.addEventListener('click', this._boundHandleClickOutside);
|
|
602
630
|
}
|
|
603
631
|
/**
|
|
604
632
|
* Set the mode state and handle options change.
|
|
@@ -656,7 +684,9 @@ const NvFieldmultiselect = class {
|
|
|
656
684
|
*/
|
|
657
685
|
disconnectedCallback() {
|
|
658
686
|
console.info('[Lifecycle] disconnectedCallback - value:', this.value);
|
|
659
|
-
|
|
687
|
+
if (this._boundHandleClickOutside) {
|
|
688
|
+
document.removeEventListener('click', this._boundHandleClickOutside);
|
|
689
|
+
}
|
|
660
690
|
}
|
|
661
691
|
//#endregion LIFECYCLE
|
|
662
692
|
/****************************************************************************/
|
|
@@ -1185,13 +1215,23 @@ const NvFieldmultiselect = class {
|
|
|
1185
1215
|
const itemValue = item.getAttribute('value') || item.getAttribute('label') || '';
|
|
1186
1216
|
const shouldBeChecked = this.value.includes(itemValue);
|
|
1187
1217
|
console.info('[syncChildComponents] itemValue:', itemValue, 'shouldBeChecked:', shouldBeChecked, 'item.checked(before):', item.checked);
|
|
1188
|
-
if
|
|
1189
|
-
|
|
1190
|
-
|
|
1191
|
-
|
|
1192
|
-
|
|
1193
|
-
|
|
1194
|
-
|
|
1218
|
+
// Only update if the checked state differs to avoid triggering unnecessary events
|
|
1219
|
+
if (item.checked !== shouldBeChecked) {
|
|
1220
|
+
// Set attribute and property, but avoid triggering itemChecked during bulk
|
|
1221
|
+
if (this.isBulkOperation) {
|
|
1222
|
+
// Directly update the DOM attribute to avoid triggering the setter
|
|
1223
|
+
if (shouldBeChecked) {
|
|
1224
|
+
item.setAttribute('checked', '');
|
|
1225
|
+
}
|
|
1226
|
+
else {
|
|
1227
|
+
item.removeAttribute('checked');
|
|
1228
|
+
}
|
|
1229
|
+
// Update internal state without emitting events (assumes nv-fielddropdownitemcheck respects this)
|
|
1230
|
+
item.checked = shouldBeChecked;
|
|
1231
|
+
}
|
|
1232
|
+
else {
|
|
1233
|
+
item.checked = shouldBeChecked;
|
|
1234
|
+
}
|
|
1195
1235
|
}
|
|
1196
1236
|
console.info('[syncChildComponents] itemValue:', itemValue, 'item.checked(after):', item.checked);
|
|
1197
1237
|
});
|