@nova-design-system/nova-react 3.1.0 → 3.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{index-Cn-oNJnW.js → index-BlWxX8x6.js} +2199 -1452
- package/dist/cjs/index.js +2 -1
- package/dist/cjs/{nv-alert.entry-BFwufSUQ.js → nv-alert.entry-BLGSitrm.js} +7 -7
- package/dist/cjs/{nv-avatar.entry-Do1K4s3s.js → nv-avatar.entry-CRcLMbEx.js} +7 -7
- package/dist/cjs/{nv-badge_2.entry-NTGHyFdg.js → nv-badge_2.entry-BtDAr7_d.js} +1 -1
- package/dist/cjs/{nv-breadcrumb.entry-oPVGJYlk.js → nv-breadcrumb.entry-PVDZoF9i.js} +1 -1
- package/dist/cjs/{nv-breadcrumbs.entry-BsOw153b.js → nv-breadcrumbs.entry-BY169s5F.js} +1 -1
- package/dist/cjs/{nv-button.entry-13tdBiRr.js → nv-button.entry-BpxpxFJP.js} +7 -7
- package/dist/cjs/{nv-calendar.entry-u9MgGb83.js → nv-calendar.entry-BobyjFdK.js} +389 -177
- package/dist/cjs/{nv-col.entry-DFhv-GI7.js → nv-col.entry-B4BJXJw-.js} +1 -1
- package/dist/cjs/{nv-datagrid.entry-BoB17gvI.js → nv-datagrid.entry-D5UVDiYl.js} +100 -108
- package/dist/cjs/{nv-datagridcolumn.entry-C3MYBmfS.js → nv-datagridcolumn.entry-dmpcmCIT.js} +2 -2
- package/dist/cjs/{nv-dialog.entry-OA3qL3Tx.js → nv-dialog.entry-BYovzkco.js} +3 -3
- package/dist/cjs/{nv-dialogfooter_2.entry-LAQYSiGV.js → nv-dialogfooter_2.entry-C9dhLKRM.js} +3 -3
- package/dist/cjs/{nv-fieldcheckbox.entry-CP7SDzVO.js → nv-fieldcheckbox.entry-BvFqY2dM.js} +1 -1
- package/dist/cjs/nv-fielddate.entry-CSpAcEXW.js +303 -0
- package/dist/cjs/nv-fielddaterange.entry-C14o96dd.js +439 -0
- package/dist/cjs/{nv-fielddropdown.entry-Nwric1vT.js → nv-fielddropdown.entry-C3VzNRhh.js} +84 -60
- package/dist/cjs/{nv-fielddropdownitem.entry-CiqSw5VL.js → nv-fielddropdownitem.entry-D4G4Ytus.js} +1 -1
- package/dist/cjs/{nv-fieldmultiselect.entry-QKNIBcW1.js → nv-fieldmultiselect.entry-Ci43ZvzC.js} +116 -104
- package/dist/cjs/nv-fieldnumber.entry-nvUi-64H.js +130 -0
- package/dist/cjs/nv-fieldpassword.entry-C2uqwDah.js +121 -0
- package/dist/cjs/{nv-fieldradio.entry-Dxc6ZCyb.js → nv-fieldradio.entry-DL2GdKqO.js} +1 -1
- package/dist/cjs/{nv-fieldselect.entry-Cys0KRyG.js → nv-fieldselect.entry-D4AIRE24.js} +2 -2
- package/dist/cjs/nv-fieldslider.entry-BNge4J69.js +665 -0
- package/dist/cjs/nv-fieldtext.entry-BI-fdkdX.js +123 -0
- package/dist/cjs/nv-fieldtextarea.entry-Ct0g9Qtb.js +198 -0
- package/dist/cjs/{nv-fieldtime.entry-BqxiFlLI.js → nv-fieldtime.entry-CmO96Py1.js} +67 -67
- package/dist/cjs/nv-icon.entry-TepdQ1jA.js +79 -0
- package/dist/cjs/{nv-iconbutton_2.entry-BLNrQz9Q.js → nv-iconbutton_2.entry-B7Xyut9H.js} +3 -3
- package/dist/cjs/{nv-menu.entry-7IDfPmZ8.js → nv-menu.entry-DHrRi_37.js} +2 -2
- package/dist/cjs/{nv-menuitem.entry-B9cjy7O8.js → nv-menuitem.entry-B_D1pSYa.js} +2 -2
- package/dist/cjs/{nv-popover.entry-ChLYZ3zY.js → nv-popover.entry-DyQPEQ4I.js} +2 -2
- package/dist/cjs/{nv-row.entry-DiLY8Vbc.js → nv-row.entry-CDTv7ikK.js} +2 -2
- package/dist/cjs/{nv-stack.entry-MpPzmg5_.js → nv-stack.entry-A78c6BVf.js} +2 -2
- package/dist/cjs/{nv-table.entry-cME3Zuq2.js → nv-table.entry-DkwcfdJM.js} +3 -3
- package/dist/cjs/{nv-tablecolumn.entry-DSctDxCS.js → nv-tablecolumn.entry-C8VNSpDf.js} +1 -1
- package/dist/cjs/{nv-toggle.entry-EBWm3Xy5.js → nv-toggle.entry-vxSyUDKZ.js} +3 -3
- package/dist/cjs/{nv-tooltip.entry-q6rJLq1C.js → nv-tooltip.entry-BQKXRp4d.js} +3 -3
- package/dist/generated/components.js +15 -3
- package/dist/types/generated/components.d.ts +8 -3
- package/package.json +1 -1
- package/dist/cjs/nv-fielddate.entry-CD7PX6yA.js +0 -269
- package/dist/cjs/nv-fielddaterange.entry-BVBVGmly.js +0 -353
- package/dist/cjs/nv-fieldnumber.entry-DfHcI-sO.js +0 -130
- package/dist/cjs/nv-fieldpassword.entry-b2pUmS8F.js +0 -121
- package/dist/cjs/nv-fieldtext.entry-DCZWLFFp.js +0 -123
- package/dist/cjs/nv-fieldtextarea.entry-DEeRdtZ7.js +0 -198
- package/dist/cjs/nv-icon.entry-CzEdUDdA.js +0 -79
- /package/dist/cjs/{constants-b97e736d-BzFAKCkR.js → constants-4faa1fae-BzFAKCkR.js} +0 -0
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-BlWxX8x6.js');
|
|
4
4
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
5
5
|
require('react');
|
|
6
6
|
|
|
7
|
-
const nvFielddropdownCss = "nv-fielddropdown{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box;max-width:480px}nv-fielddropdown[fluid]:not([fluid=false]){max-width:unset}nv-fielddropdown[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fielddropdown[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fielddropdown[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fielddropdown[hidden]:not([hidden=false]) label{display:none}nv-fielddropdown label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fielddropdown nv-popover{width:100%;display:block}nv-fielddropdown nv-popover [data-scope=popover]{width:100%;padding:var(--list-dropdown-padding);border-radius:var(--list-dropdown-radius);background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border)}nv-fielddropdown nv-popover [slot=content]{gap:var(--list-dropdown-gap-y);display:flex;flex-direction:column}nv-fielddropdown nv-popover hr{color:var(--components-list-dropdown-separator)}nv-fielddropdown .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fielddropdown .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out;position:relative;width:100%;min-height:40px}nv-fielddropdown .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddropdown .input-container:focus-within,nv-fielddropdown .input-container:focus-within:hover,nv-fielddropdown .input-container:focus,nv-fielddropdown .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fielddropdown .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fielddropdown .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fielddropdown .input-container input[type=search]::-webkit-search-decoration,nv-fielddropdown .input-container input[type=search]::-webkit-search-cancel-button,nv-fielddropdown .input-container input[type=search]::-webkit-search-results-button,nv-fielddropdown .input-container input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}nv-fielddropdown .input-container input,nv-fielddropdown .input-container p.non-filterable-text{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100
|
|
7
|
+
const nvFielddropdownCss = "nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range{background:var(--components-slider-track-filled-focus)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb{border-color:var(--components-slider-track-filled-focus)}nv-fieldslider[error] .slider-container .track-container .track .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:hover{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-handler-background-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:focus{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-error)}nv-fielddropdown{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box;max-width:480px}nv-fielddropdown[fluid]:not([fluid=false]){max-width:unset}nv-fielddropdown[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fielddropdown[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive-in-field)}nv-fielddropdown[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fielddropdown[hidden]:not([hidden=false]) label{display:none}nv-fielddropdown label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fielddropdown nv-popover{width:100%;display:block}nv-fielddropdown nv-popover [data-scope=popover]{width:100%;padding:var(--list-dropdown-padding);border-radius:var(--list-dropdown-radius);background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border)}nv-fielddropdown nv-popover [slot=content]{gap:var(--list-dropdown-gap-y);display:flex;flex-direction:column}nv-fielddropdown nv-popover hr{color:var(--components-list-dropdown-separator)}nv-fielddropdown nv-popover div[slot=content]{max-height:calc(90vh - var(--list-dropdown-padding) * 2);overflow-y:auto;position:relative}nv-fielddropdown nv-popover div[slot=content]::-webkit-scrollbar{width:6px;height:6px}nv-fielddropdown nv-popover div[slot=content]::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-fielddropdown nv-popover div[slot=content]::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-fielddropdown .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fielddropdown .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out;position:relative;width:100%;min-height:40px}nv-fielddropdown .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddropdown .input-container:focus-within,nv-fielddropdown .input-container:focus-within:hover,nv-fielddropdown .input-container:focus,nv-fielddropdown .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fielddropdown .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fielddropdown .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fielddropdown .input-container input[type=search]::-webkit-search-decoration,nv-fielddropdown .input-container input[type=search]::-webkit-search-cancel-button,nv-fielddropdown .input-container input[type=search]::-webkit-search-results-button,nv-fielddropdown .input-container input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}nv-fielddropdown .input-container input,nv-fielddropdown .input-container p.non-filterable-text{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%;}nv-fielddropdown .input-container input:focus,nv-fielddropdown .input-container p.non-filterable-text:focus{outline:none}nv-fielddropdown .input-container input::placeholder,nv-fielddropdown .input-container p.non-filterable-text::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fielddropdown .input-container input[type=password]::-ms-clear,nv-fielddropdown .input-container input[type=password]::-ms-reveal,nv-fielddropdown .input-container p.non-filterable-text[type=password]::-ms-clear,nv-fielddropdown .input-container p.non-filterable-text[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fielddropdown .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fielddropdown .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fielddropdown .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddropdown .non-filterable-text{display:block;border-radius:var(--form-field-radius);background-color:var(--nv-field-background);color:var(--components-form-field-content-text);font-size:var(--form-field-font-size);font-weight:500;line-height:var(--form-field-line-height);box-sizing:border-box;cursor:pointer;height:100%;min-height:40px}nv-fielddropdown .non-filterable-text span{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis}nv-fielddropdown .description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fielddropdown .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";
|
|
8
8
|
const NvFielddropdownStyle0 = nvFielddropdownCss;
|
|
9
9
|
|
|
10
10
|
const NvFielddropdown = class {
|
|
@@ -21,10 +21,6 @@ const NvFielddropdown = class {
|
|
|
21
21
|
* accessibility.
|
|
22
22
|
*/
|
|
23
23
|
this.inputId = v4A79185f4.v4();
|
|
24
|
-
/**
|
|
25
|
-
* State of the dropdown popover.
|
|
26
|
-
*/
|
|
27
|
-
this.open = false;
|
|
28
24
|
/**
|
|
29
25
|
* The autocomplete prop helps users fill out the input field faster by
|
|
30
26
|
* suggesting entries they've used before, like their email or address.
|
|
@@ -37,12 +33,6 @@ const NvFielddropdown = class {
|
|
|
37
33
|
* before submitting the form.
|
|
38
34
|
*/
|
|
39
35
|
this.required = false;
|
|
40
|
-
/**
|
|
41
|
-
* Alters the input field's appearance to indicate an error, helping users
|
|
42
|
-
* identify fields that need correction.
|
|
43
|
-
* @validator error
|
|
44
|
-
*/
|
|
45
|
-
this.error = false;
|
|
46
36
|
/**
|
|
47
37
|
* Display the input field's content without allowing users to change it.
|
|
48
38
|
* Users can still click on it, select, and copy the text, but they won't be
|
|
@@ -55,6 +45,20 @@ const NvFielddropdown = class {
|
|
|
55
45
|
* clicks or touches.
|
|
56
46
|
*/
|
|
57
47
|
this.disabled = false;
|
|
48
|
+
/**
|
|
49
|
+
* Alters the input field's appearance to indicate an error, helping users
|
|
50
|
+
* identify fields that need correction.
|
|
51
|
+
* @validator error
|
|
52
|
+
*/
|
|
53
|
+
this.error = false;
|
|
54
|
+
/**
|
|
55
|
+
* Defines the maximum height of the multiselect list when open.
|
|
56
|
+
*/
|
|
57
|
+
this.maxHeight = '';
|
|
58
|
+
/**
|
|
59
|
+
* State of the dropdown popover.
|
|
60
|
+
*/
|
|
61
|
+
this.open = false;
|
|
58
62
|
/**
|
|
59
63
|
* The text to display when no items match the filter.
|
|
60
64
|
*/
|
|
@@ -63,6 +67,11 @@ const NvFielddropdown = class {
|
|
|
63
67
|
* Enables or disables the filtering feature for the dropdown items.
|
|
64
68
|
*/
|
|
65
69
|
this.filterable = false;
|
|
70
|
+
/**
|
|
71
|
+
* Delay in milliseconds before the search is triggered when typing in the filter input.
|
|
72
|
+
* @default 300
|
|
73
|
+
*/
|
|
74
|
+
this.debounceDelay = 300;
|
|
66
75
|
/**
|
|
67
76
|
* Applies focus to the input field as soon as the component is mounted. This
|
|
68
77
|
* is equivalent to setting the native autofocus attribute on an <input>
|
|
@@ -76,7 +85,9 @@ const NvFielddropdown = class {
|
|
|
76
85
|
//#endregion PROPERTIES
|
|
77
86
|
/****************************************************************************/
|
|
78
87
|
//#region STATE
|
|
79
|
-
/**
|
|
88
|
+
/**
|
|
89
|
+
* The text entered by the user for filtering dropdown items.
|
|
90
|
+
*/
|
|
80
91
|
this.filterText = '';
|
|
81
92
|
this.selectedValues = new Set();
|
|
82
93
|
this.handleInputContainerClick = (event) => {
|
|
@@ -107,8 +118,15 @@ const NvFielddropdown = class {
|
|
|
107
118
|
}
|
|
108
119
|
const input = event.target;
|
|
109
120
|
this.open = true;
|
|
110
|
-
|
|
111
|
-
this.
|
|
121
|
+
// Clear any existing timer
|
|
122
|
+
if (this.debounceTimer) {
|
|
123
|
+
window.clearTimeout(this.debounceTimer);
|
|
124
|
+
}
|
|
125
|
+
// Set a new timer for filtering
|
|
126
|
+
this.debounceTimer = window.setTimeout(() => {
|
|
127
|
+
this.filterText = input.value.toLowerCase();
|
|
128
|
+
this.filterItems();
|
|
129
|
+
}, this.debounceDelay);
|
|
112
130
|
};
|
|
113
131
|
this.handleInputFocus = () => {
|
|
114
132
|
if (this.disabled || this.readonly)
|
|
@@ -144,6 +162,31 @@ const NvFielddropdown = class {
|
|
|
144
162
|
this.filterItems();
|
|
145
163
|
};
|
|
146
164
|
}
|
|
165
|
+
//#endregion EVENTS
|
|
166
|
+
/****************************************************************************/
|
|
167
|
+
//#region WATCHERS
|
|
168
|
+
handleOptionsChange(newValue) {
|
|
169
|
+
var _a;
|
|
170
|
+
if (!newValue)
|
|
171
|
+
return;
|
|
172
|
+
if (!this.value) {
|
|
173
|
+
const defaultValue = newValue.find(option => option.selected);
|
|
174
|
+
this.value = (_a = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _a !== void 0 ? _a : '';
|
|
175
|
+
this.updateSelectedItem(this.value);
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
watchValueHandler(newValue) {
|
|
179
|
+
this.valueChanged.emit(newValue);
|
|
180
|
+
}
|
|
181
|
+
//#endregion WATCHERS
|
|
182
|
+
/****************************************************************************/
|
|
183
|
+
//#region LISTENERS
|
|
184
|
+
handleOpenChanged(event) {
|
|
185
|
+
// Stop propagation to prevent the event from affecting parent components like dialogs
|
|
186
|
+
event.stopPropagation();
|
|
187
|
+
// Update `open` based on the popover state
|
|
188
|
+
this.open = event.detail;
|
|
189
|
+
}
|
|
147
190
|
handleDropdownItemSelected(event) {
|
|
148
191
|
if (this.disabled || this.readonly)
|
|
149
192
|
return;
|
|
@@ -160,25 +203,6 @@ const NvFielddropdown = class {
|
|
|
160
203
|
this.value = event.detail.value;
|
|
161
204
|
this.open = false;
|
|
162
205
|
}
|
|
163
|
-
handleOpenChanged(event) {
|
|
164
|
-
// Stop propagation to prevent the event from affecting parent components like dialogs
|
|
165
|
-
event.stopPropagation();
|
|
166
|
-
// Update `open` based on the popover state
|
|
167
|
-
this.open = event.detail;
|
|
168
|
-
}
|
|
169
|
-
watchValueHandler(newValue) {
|
|
170
|
-
this.valueChanged.emit(newValue);
|
|
171
|
-
}
|
|
172
|
-
handleOptionsChange(newValue) {
|
|
173
|
-
var _a;
|
|
174
|
-
if (!newValue)
|
|
175
|
-
return;
|
|
176
|
-
if (!this.value) {
|
|
177
|
-
const defaultValue = newValue.find(option => option.selected);
|
|
178
|
-
this.value = (_a = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _a !== void 0 ? _a : '';
|
|
179
|
-
this.updateSelectedItem(this.value);
|
|
180
|
-
}
|
|
181
|
-
}
|
|
182
206
|
handleBlur(event) {
|
|
183
207
|
const target = event.relatedTarget;
|
|
184
208
|
if (!(target instanceof Node) || !this.el.contains(target)) {
|
|
@@ -220,7 +244,27 @@ const NvFielddropdown = class {
|
|
|
220
244
|
this.open = false;
|
|
221
245
|
}
|
|
222
246
|
}
|
|
223
|
-
//#endregion
|
|
247
|
+
//#endregion LISTENERS
|
|
248
|
+
/****************************************************************************/
|
|
249
|
+
//#region LIFECYCLE
|
|
250
|
+
componentWillLoad() {
|
|
251
|
+
this.resetFilter();
|
|
252
|
+
if (this.filterable && this.filterText) {
|
|
253
|
+
this.filterItems();
|
|
254
|
+
}
|
|
255
|
+
if (this.options) {
|
|
256
|
+
this.handleOptionsChange(this.options);
|
|
257
|
+
}
|
|
258
|
+
}
|
|
259
|
+
componentDidLoad() {
|
|
260
|
+
if (this.value) {
|
|
261
|
+
this.updateSelectedItem(this.value);
|
|
262
|
+
}
|
|
263
|
+
if (this.inputElement) {
|
|
264
|
+
this.inputElement.value = this.getSelectedLabel();
|
|
265
|
+
}
|
|
266
|
+
}
|
|
267
|
+
//#endregion LIFECYCLE
|
|
224
268
|
/****************************************************************************/
|
|
225
269
|
//#region METHODS
|
|
226
270
|
/**
|
|
@@ -309,38 +353,18 @@ const NvFielddropdown = class {
|
|
|
309
353
|
}
|
|
310
354
|
//#endregion METHODS
|
|
311
355
|
/****************************************************************************/
|
|
312
|
-
//#region LIFECYCLE
|
|
313
|
-
componentWillLoad() {
|
|
314
|
-
this.resetFilter();
|
|
315
|
-
if (this.filterable && this.filterText) {
|
|
316
|
-
this.filterItems();
|
|
317
|
-
}
|
|
318
|
-
if (this.options) {
|
|
319
|
-
this.handleOptionsChange(this.options);
|
|
320
|
-
}
|
|
321
|
-
}
|
|
322
|
-
componentDidLoad() {
|
|
323
|
-
if (this.value) {
|
|
324
|
-
this.updateSelectedItem(this.value);
|
|
325
|
-
}
|
|
326
|
-
if (this.inputElement) {
|
|
327
|
-
this.inputElement.value = this.getSelectedLabel();
|
|
328
|
-
}
|
|
329
|
-
}
|
|
330
|
-
//#endregion LIFECYCLE
|
|
331
|
-
/****************************************************************************/
|
|
332
356
|
//#region RENDER
|
|
333
357
|
render() {
|
|
334
358
|
var _a;
|
|
335
|
-
return (index.h(index.Host, { key: '
|
|
336
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
337
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
359
|
+
return (index.h(index.Host, { key: '3864f366575665c4730dde8fd0d8e37c4ee11d82', role: "combobox", "aria-expanded": this.open.toString(), "aria-haspopup": "listbox", "aria-label": this.label }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '8ce42f691251468c6c054464ee3695e2bea90bd5', htmlFor: this.inputId }, index.h("slot", { key: '7e779704e1c3f9f6ee71455679c0e1d5d4ee8795', name: "label" }, this.label))), index.h("nv-popover", { key: '82cdd318e195ef44513684afba0e9c9772cad448', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: '1189c8fd06db511cb51721ac14cdc54ef286691c', class: "input-wrapper", slot: "trigger" }, index.h("slot", { key: '9069907e055d77a19c30c045e29eaf4bf998f9a0', name: "before-input" }), index.h("div", { key: '2c57f017b25754d4b5baf44e3457e95256dfdccf', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '939e749473e4df95a28fcf98e8b6d455408bff71', name: "leading-input" }), this.filterable || this.disabled || this.readonly ? (index.h("input", { "data-scope": "focusable", id: this.inputId, type: "search", ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.getSelectedLabel(), required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onFocus: this.handleInputFocus, onClick: this.handleInputFocus, onKeyDown: this.handleKeyDown })) : (index.h("p", { "data-scope": "focusable", id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClick, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocus }, this.getSelectedLabel() || this.value || this.placeholder)), this.filterable && this.filterText && this.open && (index.h("nv-iconbutton", { key: 'dcf54042b261665e5317ac122a93ca12fcedd9bc', name: "x", size: "md", emphasis: "lower", class: "clear-button", onClick: this.clearFilter, "aria-label": "Clear input" })), this.error && (index.h("nv-icon", { key: '3551957d94021648d731f97c1ba7ecdc8a325c15', name: "alert-circle", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: 'e8576d20f760219f236aa9ba52a34f762cc8d23e', "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopover, tabIndex: this.disabled ? -1 : 0 })), index.h("slot", { key: '48e9ae570e34cde3d20594a3f6518298ebbad02e', name: "after-input" })), index.h("div", { key: 'cec0a670f4158ca91aa45dcee7a5c25a584226f9', slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, ((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (index.h("ul", null, this.options.map(option => (index.h("nv-fielddropdownitem", { label: option.label, value: option.value, disabled: option.disabled, selected: option.value === this.value }))))) : (index.h("slot", { name: "content" })))), (this.description ||
|
|
360
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'e24dbfc170fb20e48ca2a474508a7c9beac6b87e', class: "description" }, index.h("slot", { key: '3b4429e2dd0b4f070309b00c6cba94cd343e7165', name: "description" }, this.description))), (this.errorDescription ||
|
|
361
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'b59ecbf446b142840f5c5933c505900abf126378', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'bf3c16d6a9fdc7a10741518153465a736eff808c', name: "error-description" }, this.errorDescription)))));
|
|
338
362
|
}
|
|
339
363
|
static get formAssociated() { return true; }
|
|
340
364
|
get el() { return index.getElement(this); }
|
|
341
365
|
static get watchers() { return {
|
|
342
|
-
"
|
|
343
|
-
"
|
|
366
|
+
"options": ["handleOptionsChange"],
|
|
367
|
+
"value": ["watchValueHandler"]
|
|
344
368
|
}; }
|
|
345
369
|
};
|
|
346
370
|
NvFielddropdown.style = NvFielddropdownStyle0;
|
package/dist/cjs/{nv-fielddropdownitem.entry-CiqSw5VL.js → nv-fielddropdownitem.entry-D4G4Ytus.js}
RENAMED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-BlWxX8x6.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-QKNIBcW1.js → nv-fieldmultiselect.entry-Ci43ZvzC.js}
RENAMED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-BlWxX8x6.js');
|
|
4
4
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
5
5
|
require('react');
|
|
6
6
|
|
|
7
|
-
const nvFieldmultiselectCss = "nv-fieldmultiselect{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box;max-width:480px}nv-fieldmultiselect[fluid]:not([fluid=false]){max-width:unset}nv-fieldmultiselect[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldmultiselect[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fieldmultiselect[required]:not([required=false])>label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fieldmultiselect label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fieldmultiselect nv-popover{width:100%;display:block}nv-fieldmultiselect nv-popover [data-scope=popover]{width:100%;padding:var(--list-dropdown-padding);border-radius:var(--list-dropdown-radius);background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border)}nv-fieldmultiselect nv-popover [slot=content]{gap:var(--list-dropdown-gap-y);display:flex;flex-direction:column}nv-fieldmultiselect nv-popover hr{color:var(--components-list-dropdown-separator)}nv-fieldmultiselect div[slot=content]::-webkit-scrollbar{width:6px;height:6px}nv-fieldmultiselect div[slot=content]::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-fieldmultiselect div[slot=content]::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-fieldmultiselect .input-wrapper-multiselect{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fieldmultiselect .input-container-multiselect{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out;position:relative;width:100%;min-height:40px;}nv-fieldmultiselect .input-container-multiselect:hover{border-color:var(--nv-field-border-hover)}nv-fieldmultiselect .input-container-multiselect:focus-within,nv-fieldmultiselect .input-container-multiselect:focus-within:hover,nv-fieldmultiselect .input-container-multiselect:focus,nv-fieldmultiselect .input-container-multiselect:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldmultiselect .input-container-multiselect:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldmultiselect .input-container-multiselect:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldmultiselect .input-container-multiselect>nv-badge{margin-left:var(--form-field-padding-x)}nv-fieldmultiselect .input-container-multiselect input,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%;width:100%;flex-grow:1;margin:0;min-height:100%;box-sizing:border-box}nv-fieldmultiselect .input-container-multiselect input:focus,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text:focus{outline:none}nv-fieldmultiselect .input-container-multiselect input::placeholder,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldmultiselect .input-container-multiselect>nv-iconbutton{border:0px;border-radius:0px}nv-fieldmultiselect .input-container-multiselect>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldmultiselect .input-container-multiselect nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldmultiselect .non-filterable-text{display:block;border-radius:var(--form-field-radius);background-color:var(--nv-field-background);color:var(--components-form-field-content-text);font-size:var(--form-field-font-size);font-weight:500;line-height:var(--form-field-line-height);box-sizing:border-box;cursor:pointer;height:100%;min-height:40px}nv-fieldmultiselect .non-filterable-text span{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis}nv-fieldmultiselect .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldmultiselect .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}.no-results-message{text-align:center;padding:10px;color:var(--components-form-text-description-error)}.multiselect-divider{display:block;width:100%;height:1px;background-color:var(--components-list-dropdown-separator);margin:var(--list-dropdown-item-padding-y) 0;border:0}";
|
|
7
|
+
const nvFieldmultiselectCss = "nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range{background:var(--components-slider-track-filled-focus)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb{border-color:var(--components-slider-track-filled-focus)}nv-fieldslider[error] .slider-container .track-container .track .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:hover{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-handler-background-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:focus{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldmultiselect{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box;max-width:480px}nv-fieldmultiselect[fluid]:not([fluid=false]){max-width:unset}nv-fieldmultiselect[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldmultiselect[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive-in-field)}nv-fieldmultiselect[required]:not([required=false])>label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fieldmultiselect label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fieldmultiselect nv-popover{width:100%;display:block}nv-fieldmultiselect nv-popover [data-scope=popover]{width:100%;padding:var(--list-dropdown-padding);border-radius:var(--list-dropdown-radius);background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border)}nv-fieldmultiselect nv-popover [slot=content]{gap:var(--list-dropdown-gap-y);display:flex;flex-direction:column}nv-fieldmultiselect nv-popover hr{color:var(--components-list-dropdown-separator)}nv-fieldmultiselect nv-popover div[slot=content]{max-height:calc(90vh - var(--list-dropdown-padding) * 2);overflow-y:auto;position:relative}nv-fieldmultiselect nv-popover div[slot=content]::-webkit-scrollbar{width:6px;height:6px}nv-fieldmultiselect nv-popover div[slot=content]::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-fieldmultiselect nv-popover div[slot=content]::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-fieldmultiselect .input-wrapper-multiselect{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fieldmultiselect .input-container-multiselect{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out;position:relative;width:100%;min-height:40px;}nv-fieldmultiselect .input-container-multiselect:hover{border-color:var(--nv-field-border-hover)}nv-fieldmultiselect .input-container-multiselect:focus-within,nv-fieldmultiselect .input-container-multiselect:focus-within:hover,nv-fieldmultiselect .input-container-multiselect:focus,nv-fieldmultiselect .input-container-multiselect:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldmultiselect .input-container-multiselect:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldmultiselect .input-container-multiselect:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldmultiselect .input-container-multiselect>nv-badge{margin-left:var(--form-field-padding-x)}nv-fieldmultiselect .input-container-multiselect input,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%;width:100%;flex-grow:1;margin:0;min-height:100%;box-sizing:border-box}nv-fieldmultiselect .input-container-multiselect input:focus,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text:focus{outline:none}nv-fieldmultiselect .input-container-multiselect input::placeholder,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldmultiselect .input-container-multiselect input[type=password]::-ms-clear,nv-fieldmultiselect .input-container-multiselect input[type=password]::-ms-reveal,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text[type=password]::-ms-clear,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldmultiselect .input-container-multiselect>nv-iconbutton{border:0px;border-radius:0px}nv-fieldmultiselect .input-container-multiselect>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldmultiselect .input-container-multiselect nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldmultiselect .non-filterable-text{display:block;border-radius:var(--form-field-radius);background-color:var(--nv-field-background);color:var(--components-form-field-content-text);font-size:var(--form-field-font-size);font-weight:500;line-height:var(--form-field-line-height);box-sizing:border-box;cursor:pointer;height:100%;min-height:40px}nv-fieldmultiselect .non-filterable-text span{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis}nv-fieldmultiselect .description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldmultiselect .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}.no-results-message{text-align:center;padding:10px;color:var(--components-form-text-description-error)}.multiselect-divider{display:block;width:100%;height:1px;background-color:var(--components-list-dropdown-separator);margin:var(--list-dropdown-item-padding-y) 0;border:0}";
|
|
8
8
|
const NvFieldmultiselectStyle0 = nvFieldmultiselectCss;
|
|
9
9
|
|
|
10
10
|
const NvFieldmultiselect = class {
|
|
@@ -22,27 +22,16 @@ const NvFieldmultiselect = class {
|
|
|
22
22
|
*/
|
|
23
23
|
this.inputId = v4A79185f4.v4();
|
|
24
24
|
/**
|
|
25
|
-
*
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
* Text for the badge showing the number of selected items.
|
|
25
|
+
* The autocomplete prop helps users fill out the input field faster by
|
|
26
|
+
* suggesting entries they've used before, like their email or address.
|
|
27
|
+
* You can turn it on to make forms more convenient or off to ensure users
|
|
28
|
+
* always type in fresh data.
|
|
30
29
|
*/
|
|
31
|
-
this.
|
|
32
|
-
/**
|
|
33
|
-
* The text to display when no items match the filter.
|
|
34
|
-
*/
|
|
35
|
-
this.emptyResult = 'No results found';
|
|
30
|
+
this.autocomplete = 'off';
|
|
36
31
|
/**
|
|
37
32
|
* Marks the input field as required.
|
|
38
33
|
*/
|
|
39
34
|
this.required = false;
|
|
40
|
-
/**
|
|
41
|
-
* Alters the input field's appearance to indicate an error, helping users
|
|
42
|
-
* identify fields that need correction.
|
|
43
|
-
* @validator error
|
|
44
|
-
*/
|
|
45
|
-
this.error = false;
|
|
46
35
|
/**
|
|
47
36
|
* Display the input field's content without allowing users to change it.
|
|
48
37
|
*/
|
|
@@ -52,35 +41,32 @@ const NvFieldmultiselect = class {
|
|
|
52
41
|
*/
|
|
53
42
|
this.disabled = false;
|
|
54
43
|
/**
|
|
55
|
-
*
|
|
44
|
+
* Alters the input field's appearance to indicate an error, helping users
|
|
45
|
+
* identify fields that need correction.
|
|
46
|
+
* @validator error
|
|
56
47
|
*/
|
|
57
|
-
this.
|
|
48
|
+
this.error = false;
|
|
58
49
|
/**
|
|
59
|
-
*
|
|
50
|
+
* Defines the maximum height of the multiselect list when open.
|
|
60
51
|
*/
|
|
61
|
-
this.
|
|
52
|
+
this.maxHeight = '';
|
|
62
53
|
/**
|
|
63
54
|
* State of the multiselect popover.
|
|
64
55
|
*/
|
|
65
56
|
this.open = false;
|
|
66
57
|
/**
|
|
67
|
-
*
|
|
68
|
-
*/
|
|
69
|
-
this.selectedValues = [];
|
|
70
|
-
/**
|
|
71
|
-
* Sorted options for display.
|
|
58
|
+
* The text to display when no items match the filter.
|
|
72
59
|
*/
|
|
73
|
-
this.
|
|
60
|
+
this.emptyResult = 'No results found';
|
|
74
61
|
/**
|
|
75
|
-
*
|
|
62
|
+
* Enables or disables the filtering feature for the multiselect items.
|
|
76
63
|
*/
|
|
77
|
-
this.
|
|
64
|
+
this.filterable = false;
|
|
78
65
|
/**
|
|
79
66
|
* Delay in milliseconds before the search is triggered when typing in the filter input.
|
|
80
67
|
* @default 300
|
|
81
68
|
*/
|
|
82
69
|
this.debounceDelay = 300;
|
|
83
|
-
this.isHandlingEscape = false;
|
|
84
70
|
/**
|
|
85
71
|
* Applies focus to the input field as soon as the component is mounted. This
|
|
86
72
|
* is equivalent to setting the native autofocus attribute on an <input>
|
|
@@ -91,6 +77,26 @@ const NvFieldmultiselect = class {
|
|
|
91
77
|
* Allows the field to stretch and fill the entire width of its container.
|
|
92
78
|
*/
|
|
93
79
|
this.fluid = false;
|
|
80
|
+
/**
|
|
81
|
+
* Text for the badge showing the number of selected items.
|
|
82
|
+
*/
|
|
83
|
+
this.badgeLabel = '';
|
|
84
|
+
//#endregion PROPERTIES
|
|
85
|
+
/****************************************************************************/
|
|
86
|
+
//#region STATE
|
|
87
|
+
/**
|
|
88
|
+
* The text entered by the user for filtering multiselect items.
|
|
89
|
+
*/
|
|
90
|
+
this.filterText = '';
|
|
91
|
+
/**
|
|
92
|
+
* List of selected values in the multiselect.
|
|
93
|
+
*/
|
|
94
|
+
this.selectedValues = [];
|
|
95
|
+
/**
|
|
96
|
+
* Sorted options for display.
|
|
97
|
+
*/
|
|
98
|
+
this.sortedOptions = [];
|
|
99
|
+
this.isHandlingEscape = false;
|
|
94
100
|
/**
|
|
95
101
|
* Handle badge close for options mode.
|
|
96
102
|
*/
|
|
@@ -300,76 +306,37 @@ const NvFieldmultiselect = class {
|
|
|
300
306
|
* @returns {any} The JSX for options mode
|
|
301
307
|
*/
|
|
302
308
|
this.renderOptionsMode = () => {
|
|
303
|
-
return (index.h(index.Host,
|
|
309
|
+
return (index.h(index.Host, { "aria-label": this.label, "aria-expanded": this.open.toString() }, (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, "data-scope": "focusable" })) : (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, "data-scope": "focusable" }, 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: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, 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()));
|
|
304
310
|
};
|
|
305
311
|
/**
|
|
306
312
|
* Renders the component in slots mode
|
|
307
313
|
* @returns {any} The JSX for slots mode
|
|
308
314
|
*/
|
|
309
315
|
this.renderSlotsMode = () => {
|
|
310
|
-
return (index.h(index.Host,
|
|
316
|
+
return (index.h(index.Host, { "aria-label": this.label, "aria-expanded": this.open.toString() }, (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, "data-scope": "focusable" })) : (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, "data-scope": "focusable" }, 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: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, index.h("slot", { name: "content" }))), this.renderDescriptions()));
|
|
311
317
|
};
|
|
312
318
|
}
|
|
313
|
-
//#endregion
|
|
319
|
+
//#endregion EVENTS
|
|
314
320
|
/****************************************************************************/
|
|
315
|
-
//#region
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
* Set the mode state and handle options change.
|
|
324
|
-
*/
|
|
325
|
-
componentWillLoad() {
|
|
326
|
-
var _a;
|
|
327
|
-
// Don't call handleOptionsChange if we are in slots mode
|
|
328
|
-
if (this.options) {
|
|
329
|
-
this.handleOptionsChange(this.options);
|
|
330
|
-
}
|
|
331
|
-
// Specific initialization for slots mode
|
|
332
|
-
if (!this.options) {
|
|
333
|
-
Promise.resolve().then(() => {
|
|
334
|
-
const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
|
|
335
|
-
// Initialize selectedValues with checked items
|
|
336
|
-
this.selectedValues = items
|
|
337
|
-
.filter(item => item.hasAttribute('checked'))
|
|
338
|
-
.map(item => item.getAttribute('value') || '');
|
|
339
|
-
// Force a reorder after initialization
|
|
340
|
-
requestAnimationFrame(() => {
|
|
341
|
-
this.reorderSlotContent();
|
|
342
|
-
});
|
|
343
|
-
});
|
|
344
|
-
}
|
|
345
|
-
// Initialize the sorted options array with the parsed options for initial rendering
|
|
346
|
-
if (this.options) {
|
|
347
|
-
this.sortedOptions = [...((_a = this.options) !== null && _a !== void 0 ? _a : [])];
|
|
348
|
-
}
|
|
349
|
-
// Apply filtering if the multiselect is filterable and there is a value
|
|
350
|
-
if (this.filterable && this.value) {
|
|
351
|
-
this.filterText = String(this.value).toLocaleLowerCase();
|
|
352
|
-
this.filterItems();
|
|
353
|
-
}
|
|
354
|
-
else {
|
|
355
|
-
// Reset visibility state of all dropdown items
|
|
356
|
-
this.resetFilter();
|
|
357
|
-
}
|
|
358
|
-
}
|
|
359
|
-
/**
|
|
360
|
-
* Force reorder if options mode in componentDidLoad because of the initial render not trigger @watch
|
|
361
|
-
*/
|
|
362
|
-
componentDidLoad() {
|
|
363
|
-
if (this.options) {
|
|
364
|
-
this.handleOptionsChange(this.options);
|
|
365
|
-
}
|
|
321
|
+
//#region WATCHERS
|
|
322
|
+
handleOptionsChange(newValue) {
|
|
323
|
+
if (!newValue)
|
|
324
|
+
return;
|
|
325
|
+
this.selectedValues = newValue
|
|
326
|
+
.filter(option => option.checked)
|
|
327
|
+
.map(option => option.value);
|
|
328
|
+
this.reorderOptionsContent();
|
|
366
329
|
}
|
|
367
330
|
/**
|
|
368
|
-
*
|
|
331
|
+
* Emitted when the value changes.
|
|
369
332
|
*/
|
|
370
|
-
|
|
371
|
-
|
|
333
|
+
watchValueHandler() {
|
|
334
|
+
// Handle value change and update the corresponding multiselect item if it exists
|
|
335
|
+
this.setInitialSelection();
|
|
372
336
|
}
|
|
337
|
+
//#endregion WATCHERS
|
|
338
|
+
/****************************************************************************/
|
|
339
|
+
//#region LISTENERS
|
|
373
340
|
/**
|
|
374
341
|
* Emitted when the input loses focus.
|
|
375
342
|
* @param {CustomEvent<boolean>} event - The event object containing the focus state.
|
|
@@ -427,21 +394,6 @@ const NvFieldmultiselect = class {
|
|
|
427
394
|
console.warn('Received itemChecked event with undefined or null value'); // Warning log
|
|
428
395
|
}
|
|
429
396
|
}
|
|
430
|
-
handleOptionsChange(newValue) {
|
|
431
|
-
if (!newValue)
|
|
432
|
-
return;
|
|
433
|
-
this.selectedValues = newValue
|
|
434
|
-
.filter(option => option.checked)
|
|
435
|
-
.map(option => option.value);
|
|
436
|
-
this.reorderOptionsContent();
|
|
437
|
-
}
|
|
438
|
-
/**
|
|
439
|
-
* Emitted when the value changes.
|
|
440
|
-
*/
|
|
441
|
-
watchValueHandler() {
|
|
442
|
-
// Handle value change and update the corresponding multiselect item if it exists
|
|
443
|
-
this.setInitialSelection();
|
|
444
|
-
}
|
|
445
397
|
// Add a listener for the slot content
|
|
446
398
|
handleSlotChange(event) {
|
|
447
399
|
// Check: we only want to reorder if it's the "content" slot
|
|
@@ -454,7 +406,67 @@ const NvFieldmultiselect = class {
|
|
|
454
406
|
});
|
|
455
407
|
}
|
|
456
408
|
}
|
|
457
|
-
//#endregion
|
|
409
|
+
//#endregion LISTENERS
|
|
410
|
+
/****************************************************************************/
|
|
411
|
+
//#region LIFECYCLE
|
|
412
|
+
/**
|
|
413
|
+
* Subscribe to click outside event.
|
|
414
|
+
*/
|
|
415
|
+
connectedCallback() {
|
|
416
|
+
document.addEventListener('click', this.handleClickOutside.bind(this));
|
|
417
|
+
}
|
|
418
|
+
/**
|
|
419
|
+
* Set the mode state and handle options change.
|
|
420
|
+
*/
|
|
421
|
+
componentWillLoad() {
|
|
422
|
+
var _a;
|
|
423
|
+
// Don't call handleOptionsChange if we are in slots mode
|
|
424
|
+
if (this.options) {
|
|
425
|
+
this.handleOptionsChange(this.options);
|
|
426
|
+
}
|
|
427
|
+
// Specific initialization for slots mode
|
|
428
|
+
if (!this.options) {
|
|
429
|
+
Promise.resolve().then(() => {
|
|
430
|
+
const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
|
|
431
|
+
// Initialize selectedValues with checked items
|
|
432
|
+
this.selectedValues = items
|
|
433
|
+
.filter(item => item.hasAttribute('checked'))
|
|
434
|
+
.map(item => item.getAttribute('value') || '');
|
|
435
|
+
// Force a reorder after initialization
|
|
436
|
+
requestAnimationFrame(() => {
|
|
437
|
+
this.reorderSlotContent();
|
|
438
|
+
});
|
|
439
|
+
});
|
|
440
|
+
}
|
|
441
|
+
// Initialize the sorted options array with the parsed options for initial rendering
|
|
442
|
+
if (this.options) {
|
|
443
|
+
this.sortedOptions = [...((_a = this.options) !== null && _a !== void 0 ? _a : [])];
|
|
444
|
+
}
|
|
445
|
+
// Apply filtering if the multiselect is filterable and there is a value
|
|
446
|
+
if (this.filterable && this.value) {
|
|
447
|
+
this.filterText = String(this.value).toLocaleLowerCase();
|
|
448
|
+
this.filterItems();
|
|
449
|
+
}
|
|
450
|
+
else {
|
|
451
|
+
// Reset visibility state of all dropdown items
|
|
452
|
+
this.resetFilter();
|
|
453
|
+
}
|
|
454
|
+
}
|
|
455
|
+
/**
|
|
456
|
+
* Force reorder if options mode in componentDidLoad because of the initial render not trigger @watch
|
|
457
|
+
*/
|
|
458
|
+
componentDidLoad() {
|
|
459
|
+
if (this.options) {
|
|
460
|
+
this.handleOptionsChange(this.options);
|
|
461
|
+
}
|
|
462
|
+
}
|
|
463
|
+
/**
|
|
464
|
+
* Unsubscribe from click outside event.
|
|
465
|
+
*/
|
|
466
|
+
disconnectedCallback() {
|
|
467
|
+
document.removeEventListener('click', this.handleClickOutside.bind(this));
|
|
468
|
+
}
|
|
469
|
+
//#endregion LIFECYCLE
|
|
458
470
|
/****************************************************************************/
|
|
459
471
|
//#region METHODS
|
|
460
472
|
/**
|