@nova-design-system/nova-react 3.0.0-beta.43 → 3.0.0-beta.45
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-CinzsZ8D.js → index-S09Gr7Tw.js} +180 -218
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/{nv-alert.entry-BVY_rxey.js → nv-alert.entry-DH8Qd2s2.js} +1 -1
- package/dist/cjs/{nv-avatar.entry-pREKtiv2.js → nv-avatar.entry-B3-elLZC.js} +1 -1
- package/dist/cjs/{nv-badge_2.entry-wDuiCwys.js → nv-badge_2.entry-D15EDzX0.js} +2 -2
- package/dist/cjs/{nv-base.entry-DwtTXK_n.js → nv-base.entry-D-_RUZTX.js} +1 -1
- package/dist/cjs/{nv-breadcrumb.entry-B0hIeE83.js → nv-breadcrumb.entry-DG49Nj1L.js} +2 -2
- package/dist/cjs/{nv-breadcrumbs.entry-Cq0LsIFs.js → nv-breadcrumbs.entry-BqJO5pbN.js} +1 -1
- package/dist/cjs/{nv-button.entry-DaSGnB1L.js → nv-button.entry-CN9kB98T.js} +6 -4
- package/dist/cjs/{nv-calendar.entry-BC6NDsVl.js → nv-calendar.entry-CMEgSU64.js} +6 -6
- package/dist/cjs/{nv-col.entry-DNUY559i.js → nv-col.entry-wcZ9HHAb.js} +1 -1
- package/dist/cjs/{nv-datagrid.entry-Cp8RCSEv.js → nv-datagrid.entry-GCLeN2qT.js} +32 -5
- package/dist/cjs/{nv-datagridcolumn.entry-CR9_1fsZ.js → nv-datagridcolumn.entry-lgIz71UU.js} +1 -1
- package/dist/cjs/{nv-dialog.entry-BjTJ5FFL.js → nv-dialog.entry-DfY0TaYp.js} +17 -13
- package/dist/cjs/{nv-dialogfooter_2.entry-DJkKzEgO.js → nv-dialogfooter_2.entry-OByWsulH.js} +6 -6
- package/dist/cjs/{nv-fieldcheckbox.entry-C0DmeqXD.js → nv-fieldcheckbox.entry-Bqpe9BK3.js} +2 -2
- package/dist/cjs/{nv-fielddate.entry-DRX2mfZL.js → nv-fielddate.entry-DJePv6tR.js} +1 -1
- package/dist/cjs/{nv-fielddaterange.entry-ka3JiDvT.js → nv-fielddaterange.entry--YC750sX.js} +1 -1
- package/dist/cjs/{nv-fielddropdown.entry-DUAKFYgw.js → nv-fielddropdown.entry-BPlTlc_S.js} +45 -75
- package/dist/cjs/{nv-fielddropdownitem.entry-BsbvJERH.js → nv-fielddropdownitem.entry-zwoGySum.js} +7 -9
- package/dist/cjs/{nv-fieldmultiselect.entry-DFr-ZICs.js → nv-fieldmultiselect.entry-Bg_v0LUF.js} +7 -49
- package/dist/cjs/{nv-fieldnumber.entry-ezdDvJh_.js → nv-fieldnumber.entry-BLNaq7yr.js} +1 -1
- package/dist/cjs/{nv-fieldpassword.entry-D4a8SnGr.js → nv-fieldpassword.entry-iSEdS5R8.js} +1 -1
- package/dist/cjs/{nv-fieldradio.entry-Co7WX2vI.js → nv-fieldradio.entry-Dov4vZkh.js} +1 -1
- package/dist/cjs/{nv-fieldselect.entry-sTbv_flF.js → nv-fieldselect.entry-NmpesarX.js} +1 -1
- package/dist/cjs/{nv-fieldtext.entry-DRPCH6Sf.js → nv-fieldtext.entry-r6oQajRS.js} +1 -1
- package/dist/cjs/{nv-fieldtextarea.entry-BwJCUiVW.js → nv-fieldtextarea.entry-CJ2yQkfi.js} +1 -1
- package/dist/cjs/{nv-fieldtime.entry-uU-IET2k.js → nv-fieldtime.entry-Bxoj6N53.js} +1 -1
- package/dist/cjs/nv-icon.entry-CWKRt8F0.js +79 -0
- package/dist/cjs/{nv-iconbutton_2.entry-Dx4usGkY.js → nv-iconbutton_2.entry-CnbscpNn.js} +1 -1
- package/dist/cjs/{nv-menu.entry-D3qvf_0H.js → nv-menu.entry-wC7oSruP.js} +1 -1
- package/dist/cjs/{nv-menuitem.entry-3t6TixM7.js → nv-menuitem.entry-BVSa1vrS.js} +1 -1
- package/dist/cjs/{nv-popover.entry-Bv6kuTK_.js → nv-popover.entry-ChP1we3l.js} +12 -10
- package/dist/cjs/{nv-row.entry-BPK1Li7w.js → nv-row.entry-D6FeFpzG.js} +1 -1
- package/dist/cjs/{nv-stack.entry-ByaO-0TJ.js → nv-stack.entry-zjJmztkO.js} +1 -1
- package/dist/cjs/{nv-table.entry-C7Hd57Iq.js → nv-table.entry-CGX0jsR3.js} +2 -2
- package/dist/cjs/{nv-tablecolumn.entry-BDCw_45v.js → nv-tablecolumn.entry-Cwdmo_RY.js} +1 -1
- package/dist/cjs/{nv-toggle.entry-BTqGH_H0.js → nv-toggle.entry-BvToMkI2.js} +2 -2
- package/dist/cjs/{nv-tooltip.entry-BDZfrLHv.js → nv-tooltip.entry-DZ7_lB-p.js} +2 -2
- package/dist/generated/components.js +3 -3
- package/dist/types/generated/components.d.ts +3 -5
- package/package.json +1 -1
- package/dist/cjs/index-C8UfzrMI.js +0 -26405
- package/dist/cjs/nv-alert.entry-8esWDUyU.js +0 -173
- package/dist/cjs/nv-avatar.entry-CO6bt4k6.js +0 -67
- package/dist/cjs/nv-badge_2.entry-xfXsesV0.js +0 -195
- package/dist/cjs/nv-base.entry-BO-6krwg.js +0 -71
- package/dist/cjs/nv-breadcrumb.entry-DTwjCmMI.js +0 -45
- package/dist/cjs/nv-breadcrumbs.entry-jn5hRjpQ.js +0 -20
- package/dist/cjs/nv-button.entry-DxzA6-My.js +0 -162
- package/dist/cjs/nv-calendar.entry-DKz-iBnp.js +0 -1036
- package/dist/cjs/nv-col.entry-X7jkNThH.js +0 -37
- package/dist/cjs/nv-datagrid.entry-DL-Fyo4l.js +0 -3671
- package/dist/cjs/nv-datagridcolumn.entry-CyTG5E7M.js +0 -18
- package/dist/cjs/nv-dialog.entry-Do_uALC6.js +0 -784
- package/dist/cjs/nv-dialogfooter_2.entry-DJ8qS9q6.js +0 -134
- package/dist/cjs/nv-fieldcheckbox.entry-DoGQX-5D.js +0 -137
- package/dist/cjs/nv-fielddate.entry-D-PjbYaA.js +0 -278
- package/dist/cjs/nv-fielddaterange.entry-BrC5jKLp.js +0 -355
- package/dist/cjs/nv-fielddropdown.entry-MsUR1kVe.js +0 -391
- package/dist/cjs/nv-fielddropdownitem.entry-DRM-Zljt.js +0 -70
- package/dist/cjs/nv-fieldmultiselect.entry-Dr8FfT_W.js +0 -1060
- package/dist/cjs/nv-fieldnumber.entry-DZsM1vmO.js +0 -126
- package/dist/cjs/nv-fieldpassword.entry-Biw__M2W.js +0 -115
- package/dist/cjs/nv-fieldradio.entry-ZL7KgEZ7.js +0 -102
- package/dist/cjs/nv-fieldselect.entry-D6eRsM9T.js +0 -365
- package/dist/cjs/nv-fieldtext.entry-DKdxC2cG.js +0 -119
- package/dist/cjs/nv-fieldtextarea.entry-Dc_TGlmI.js +0 -194
- package/dist/cjs/nv-fieldtime.entry-CXRtpWt1.js +0 -1011
- package/dist/cjs/nv-icon.entry-iipuvT3D.js +0 -79
- package/dist/cjs/nv-icon.entry-xltjoSa2.js +0 -79
- package/dist/cjs/nv-iconbutton_2.entry-BsXvYbCi.js +0 -163
- package/dist/cjs/nv-menu.entry-DFEYw_KZ.js +0 -227
- package/dist/cjs/nv-menuitem.entry-BeTXOtir.js +0 -58
- package/dist/cjs/nv-popover.entry-Zt25YeAv.js +0 -1960
- package/dist/cjs/nv-row.entry-Bwzlub3i.js +0 -21
- package/dist/cjs/nv-stack.entry-bhess4lQ.js +0 -30
- package/dist/cjs/nv-table.entry-D3U4dFcw.js +0 -338
- package/dist/cjs/nv-tablecolumn.entry-BzwWPlLf.js +0 -18
- package/dist/cjs/nv-toggle.entry-DXpNGkbz.js +0 -79
- package/dist/cjs/nv-tooltip.entry-CvCZZV88.js +0 -44
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-S09Gr7Tw.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}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 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)}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>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{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-fielddropdown .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)}";
|
|
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}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)}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>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{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-fielddropdown .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)}";
|
|
8
8
|
const NvFielddropdownStyle0 = nvFielddropdownCss;
|
|
9
9
|
|
|
10
10
|
const NvFielddropdown = class {
|
|
@@ -107,6 +107,7 @@ const NvFielddropdown = class {
|
|
|
107
107
|
return;
|
|
108
108
|
}
|
|
109
109
|
const input = event.target;
|
|
110
|
+
this.open = true;
|
|
110
111
|
this.filterText = input.value.toLowerCase();
|
|
111
112
|
this.filterItems();
|
|
112
113
|
};
|
|
@@ -119,21 +120,27 @@ const NvFielddropdown = class {
|
|
|
119
120
|
if (this.disabled || this.readonly)
|
|
120
121
|
return;
|
|
121
122
|
this.open = !this.open;
|
|
122
|
-
if (this.open && !this.filterable) {
|
|
123
|
-
this.focusFirstItem();
|
|
124
|
-
}
|
|
125
123
|
};
|
|
126
124
|
this.getSelectedLabel = () => {
|
|
127
|
-
var _a, _b, _c;
|
|
125
|
+
var _a, _b, _c, _d, _e;
|
|
126
|
+
if (!this.value)
|
|
127
|
+
return '';
|
|
128
|
+
if (this.parsedOptions.length > 1) {
|
|
129
|
+
const matchingItem = this.parsedOptions.find(option => option.value === this.value);
|
|
130
|
+
return (_b = (_a = matchingItem === null || matchingItem === void 0 ? void 0 : matchingItem.label) !== null && _a !== void 0 ? _a : matchingItem === null || matchingItem === void 0 ? void 0 : matchingItem.value) !== null && _b !== void 0 ? _b : this.value;
|
|
131
|
+
}
|
|
128
132
|
const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem'));
|
|
129
|
-
const matchingItem = items.find(item => item.
|
|
130
|
-
|
|
131
|
-
? (
|
|
133
|
+
const matchingItem = items.find(item => item.value === this.value);
|
|
134
|
+
const selectedLabel = matchingItem
|
|
135
|
+
? (_e = (_c = matchingItem.label) !== null && _c !== void 0 ? _c : (_d = matchingItem.textContent) === null || _d === void 0 ? void 0 : _d.trim()) !== null && _e !== void 0 ? _e : matchingItem.value
|
|
132
136
|
: '';
|
|
137
|
+
return selectedLabel;
|
|
133
138
|
};
|
|
134
139
|
this.clearFilter = () => {
|
|
140
|
+
if (!this.filterable)
|
|
141
|
+
return;
|
|
135
142
|
this.filterText = '';
|
|
136
|
-
this.inputElement.value =
|
|
143
|
+
this.inputElement.value = this.getSelectedLabel();
|
|
137
144
|
this.inputElement.focus();
|
|
138
145
|
this.filterItems();
|
|
139
146
|
};
|
|
@@ -150,6 +157,7 @@ const NvFielddropdown = class {
|
|
|
150
157
|
item.setAttribute('selected', 'true');
|
|
151
158
|
}
|
|
152
159
|
});
|
|
160
|
+
this.clearFilter();
|
|
153
161
|
this.value = event.detail.value;
|
|
154
162
|
this.open = false;
|
|
155
163
|
}
|
|
@@ -161,23 +169,18 @@ const NvFielddropdown = class {
|
|
|
161
169
|
this.filterable = newValue;
|
|
162
170
|
}
|
|
163
171
|
watchValueHandler(newValue) {
|
|
164
|
-
if (newValue) {
|
|
165
|
-
this.updateSelectedItem(newValue);
|
|
166
|
-
}
|
|
167
172
|
this.valueChanged.emit(newValue);
|
|
168
173
|
}
|
|
169
174
|
handleOptionsChange(newValue) {
|
|
175
|
+
var _a;
|
|
170
176
|
if (newValue) {
|
|
171
177
|
try {
|
|
172
178
|
const parsedOpts = JSON.parse(newValue);
|
|
173
179
|
this.parsedOptions = [...parsedOpts];
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
this.value =
|
|
177
|
-
|
|
178
|
-
// Wait for items to be rendered
|
|
179
|
-
this.updateSelectedItem(selectedOption.value);
|
|
180
|
-
});
|
|
180
|
+
if (!this.value) {
|
|
181
|
+
const defaultValue = parsedOpts.find(option => option.selected);
|
|
182
|
+
this.value = (_a = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _a !== void 0 ? _a : '';
|
|
183
|
+
this.updateSelectedItem(this.value);
|
|
181
184
|
}
|
|
182
185
|
}
|
|
183
186
|
catch (error) {
|
|
@@ -193,26 +196,27 @@ const NvFielddropdown = class {
|
|
|
193
196
|
const target = event.relatedTarget;
|
|
194
197
|
if (!(target instanceof Node) || !this.el.contains(target)) {
|
|
195
198
|
this.open = false;
|
|
199
|
+
if (this.inputElement) {
|
|
200
|
+
this.filterText = '';
|
|
201
|
+
this.inputElement.value = this.getSelectedLabel();
|
|
202
|
+
setTimeout(() => {
|
|
203
|
+
this.filterItems();
|
|
204
|
+
}, 200);
|
|
205
|
+
}
|
|
196
206
|
}
|
|
197
207
|
}
|
|
198
208
|
handleKeyDown(event) {
|
|
209
|
+
if (!this.el)
|
|
210
|
+
return;
|
|
199
211
|
if (!this.open) {
|
|
200
212
|
if (event.key === 'ArrowDown') {
|
|
201
213
|
this.open = true;
|
|
202
|
-
if (!this.filterable) {
|
|
203
|
-
// Focus on the first item if it is not filterable
|
|
204
|
-
this.focusFirstItem();
|
|
205
|
-
}
|
|
206
214
|
event.preventDefault();
|
|
207
215
|
return;
|
|
208
216
|
}
|
|
209
217
|
return;
|
|
210
218
|
}
|
|
211
|
-
const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem:not([
|
|
212
|
-
if (items.length === 0) {
|
|
213
|
-
console.warn('No dropdown items found to navigate');
|
|
214
|
-
return;
|
|
215
|
-
}
|
|
219
|
+
const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem:not([disabled]):not([hidden])'));
|
|
216
220
|
let currentIndex = items.findIndex(item => item.classList.contains('highlighted'));
|
|
217
221
|
if (event.key === 'ArrowDown') {
|
|
218
222
|
event.preventDefault();
|
|
@@ -239,31 +243,6 @@ const NvFielddropdown = class {
|
|
|
239
243
|
async getFilterText() {
|
|
240
244
|
return this.filterText;
|
|
241
245
|
}
|
|
242
|
-
/**
|
|
243
|
-
* Set the initial selection based on the current value and update the
|
|
244
|
-
* inputElement value.
|
|
245
|
-
*/
|
|
246
|
-
setInitialSelection() {
|
|
247
|
-
if (!this.value)
|
|
248
|
-
return;
|
|
249
|
-
const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem'));
|
|
250
|
-
const selectedItem = items.find(item => item.getAttribute('value') === this.value);
|
|
251
|
-
items.forEach(item => {
|
|
252
|
-
item.removeAttribute('selected');
|
|
253
|
-
item.classList.remove('selected');
|
|
254
|
-
});
|
|
255
|
-
if (selectedItem) {
|
|
256
|
-
selectedItem.setAttribute('selected', 'true');
|
|
257
|
-
selectedItem.classList.add('selected');
|
|
258
|
-
this.value = selectedItem.getAttribute('value');
|
|
259
|
-
if (this.inputElement) {
|
|
260
|
-
this.inputElement.value = this.value;
|
|
261
|
-
}
|
|
262
|
-
}
|
|
263
|
-
else {
|
|
264
|
-
console.warn('No matching item found for value:', this.value);
|
|
265
|
-
}
|
|
266
|
-
}
|
|
267
246
|
/**
|
|
268
247
|
* Filter dropdown items based on the text entered by the user.
|
|
269
248
|
* If no items are found, display a message indicating no results.
|
|
@@ -285,7 +264,10 @@ const NvFielddropdown = class {
|
|
|
285
264
|
// Check if the filtered text is present either in the value or in the textual content
|
|
286
265
|
const shouldShow = value.includes(this.filterText) ||
|
|
287
266
|
textContent.includes(this.filterText);
|
|
288
|
-
|
|
267
|
+
if (shouldShow)
|
|
268
|
+
item.removeAttribute('hidden');
|
|
269
|
+
else
|
|
270
|
+
item.setAttribute('hidden', '');
|
|
289
271
|
if (shouldShow) {
|
|
290
272
|
hasVisibleItems = true;
|
|
291
273
|
}
|
|
@@ -318,17 +300,9 @@ const NvFielddropdown = class {
|
|
|
318
300
|
}
|
|
319
301
|
});
|
|
320
302
|
}
|
|
321
|
-
focusFirstItem() {
|
|
322
|
-
const firstItem = this.el.querySelector('nv-fielddropdownitem');
|
|
323
|
-
if (firstItem) {
|
|
324
|
-
firstItem.focus();
|
|
325
|
-
this.updateHighlightedItem(Array.from(this.el.querySelectorAll('nv-fielddropdownitem')), 0);
|
|
326
|
-
}
|
|
327
|
-
else {
|
|
328
|
-
console.warn('nv-fielddropdown: no first item found to focus');
|
|
329
|
-
}
|
|
330
|
-
}
|
|
331
303
|
updateSelectedItem(value) {
|
|
304
|
+
if (!value)
|
|
305
|
+
return;
|
|
332
306
|
const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem'));
|
|
333
307
|
const matchingItem = items.find(item => {
|
|
334
308
|
var _a;
|
|
@@ -345,38 +319,34 @@ const NvFielddropdown = class {
|
|
|
345
319
|
item.removeAttribute('selected');
|
|
346
320
|
}
|
|
347
321
|
});
|
|
348
|
-
if (matchingItem && this.inputElement) {
|
|
349
|
-
this.inputElement.value = value;
|
|
350
|
-
}
|
|
351
322
|
}
|
|
352
323
|
//#endregion METHODS
|
|
353
324
|
/****************************************************************************/
|
|
354
325
|
//#region LIFECYCLE
|
|
355
326
|
componentWillLoad() {
|
|
356
327
|
this.resetFilter();
|
|
357
|
-
this.setInitialSelection();
|
|
358
328
|
if (this.filterable && this.filterText) {
|
|
359
329
|
this.filterItems();
|
|
360
330
|
}
|
|
361
331
|
if (this.options) {
|
|
362
332
|
this.handleOptionsChange(this.options);
|
|
363
333
|
}
|
|
364
|
-
if (this.value) {
|
|
365
|
-
this.updateSelectedItem(this.value);
|
|
366
|
-
}
|
|
367
334
|
}
|
|
368
335
|
componentDidLoad() {
|
|
369
336
|
if (this.value) {
|
|
370
337
|
this.updateSelectedItem(this.value);
|
|
371
338
|
}
|
|
339
|
+
if (this.inputElement) {
|
|
340
|
+
this.inputElement.value = this.getSelectedLabel();
|
|
341
|
+
}
|
|
372
342
|
}
|
|
373
343
|
//#endregion LIFECYCLE
|
|
374
344
|
/****************************************************************************/
|
|
375
345
|
//#region RENDER
|
|
376
346
|
render() {
|
|
377
|
-
return (index.h(index.Host, { key: '
|
|
378
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
379
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
347
|
+
return (index.h(index.Host, { key: '0fb1d2326cefd85ffd337307a0a0dd74acda8a14', 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: 'bf6f4116b86cca549e7f9b65a17e1cb35b06ef60', htmlFor: this.inputId }, index.h("slot", { key: 'a81ad465e6a08e1bc9463c9d91c5d2cd05805e39', name: "label" }, this.label))), index.h("nv-popover", { key: '8c90cf3f3f08455b41b31681c4377d5404dd4b31', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: '756eb9ff31134ece738ea9748a88837ec4979ddf', class: "input-wrapper", slot: "trigger" }, index.h("slot", { key: '1853a781eedfeea6aae57ed94c452524e4e69e83', name: "before-input" }), index.h("div", { key: '26c839ffc62cb1747de5099725695de6c213a220', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '8685a92ee488f99dda4cbfe6bdd59e347e3ce0ce', name: "leading-input" }), this.isFilterable || 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.isFilterable && this.filterText && this.open && (index.h("nv-iconbutton", { key: '1fa4ea0ef878980847d667431c9e52b18de1a4b1', name: "x", size: "md", emphasis: "lower", class: "clear-button", onClick: this.clearFilter, "aria-label": "Clear input" })), this.error && (index.h("nv-icon", { key: '77aa0f468d8c6488595ffc2305480174c18d3069', name: "alert-circle", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: '9954a5b1910693b0be417d27da8f9005467d99f3', "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: '0e258c9b03e4dbcfe94b577ffaf77f2379a9c9a3', name: "after-input" })), index.h("div", { key: 'b697df1d8c64c9d2eaf09e427cd49c9d5ec0a323', slot: "content" }, this.parsedOptions.length > 0 ? (index.h("ul", null, this.parsedOptions.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 ||
|
|
348
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '7a783fcd4da5623ad478e4a03fb454e093e7fc8e', class: "description" }, index.h("slot", { key: '93c4c95ca8e8e4bf50086fb861b126aa7f5f828a', name: "description" }, this.description))), (this.errorDescription ||
|
|
349
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '8a0de0edb2a7855d478a40059e19f2f26f2ed681', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '93b87131ac4e8371815e7c82ef6e15ebcff2bc88', name: "error-description" }, this.errorDescription)))));
|
|
380
350
|
}
|
|
381
351
|
static get formAssociated() { return true; }
|
|
382
352
|
get el() { return index.getElement(this); }
|
package/dist/cjs/{nv-fielddropdownitem.entry-BsbvJERH.js → nv-fielddropdownitem.entry-zwoGySum.js}
RENAMED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-S09Gr7Tw.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}";
|
|
@@ -25,33 +25,31 @@ const NvFielddropdownitem = class {
|
|
|
25
25
|
/****************************************************************************/
|
|
26
26
|
//#region METHODS
|
|
27
27
|
this.handleSelected = () => {
|
|
28
|
-
if (this.disabled
|
|
28
|
+
if (this.disabled)
|
|
29
29
|
return;
|
|
30
|
-
this.selected = true;
|
|
31
30
|
this.dropdownItemSelected.emit({
|
|
32
31
|
label: this.label,
|
|
33
32
|
value: this.value,
|
|
34
|
-
selected: this.selected,
|
|
35
|
-
disabled: this.disabled,
|
|
36
33
|
});
|
|
37
34
|
};
|
|
38
35
|
}
|
|
39
36
|
handleKeyDown(event) {
|
|
37
|
+
var _a, _b;
|
|
40
38
|
if (event.target !== this.el)
|
|
41
39
|
return;
|
|
42
40
|
if (event.key === 'Enter' || event.key === ' ') {
|
|
43
41
|
event.preventDefault();
|
|
44
42
|
this.handleSelected();
|
|
43
|
+
(_b = (_a = this.el
|
|
44
|
+
.closest('nv-fielddropdown')) === null || _a === void 0 ? void 0 : _a.querySelector("[data-scope='focusable']")) === null || _b === void 0 ? void 0 : _b.focus();
|
|
45
45
|
}
|
|
46
46
|
}
|
|
47
47
|
//#endregion METHODS
|
|
48
48
|
/****************************************************************************/
|
|
49
49
|
//#region LIFECYCLE
|
|
50
50
|
componentWillLoad() {
|
|
51
|
-
this.composed = Boolean(this.el.children.length);
|
|
52
|
-
}
|
|
53
|
-
componentDidLoad() {
|
|
54
51
|
var _a;
|
|
52
|
+
this.composed = Boolean(this.el.children.length);
|
|
55
53
|
if (!this.value) {
|
|
56
54
|
const fallback = (_a = this.label) !== null && _a !== void 0 ? _a : this.el.textContent;
|
|
57
55
|
this.value = fallback.replace(/\W+/g, ''); // Remove non-word characters
|
|
@@ -61,7 +59,7 @@ const NvFielddropdownitem = class {
|
|
|
61
59
|
/****************************************************************************/
|
|
62
60
|
//#region RENDER
|
|
63
61
|
render() {
|
|
64
|
-
return (index.h(index.Host, { key: '
|
|
62
|
+
return (index.h(index.Host, { key: '8f867e8c456eae541561024d5194e1582504e85b', role: "menuitem", tabindex: '-1', onClick: this.handleSelected }, index.h("slot", { key: '2f26847b783458cde7a99d69269b0e15f381cdb8' }), !this.composed && (index.h("div", { key: '22229450f3e1492d1f71cbd9e89c6e0204cee201', class: "text-wrapper" }, index.h("span", { key: 'a5c691f3addf577acd848b6fe72c23388d116584', "data-scope": "text" }, this.label))), this.selected && (index.h("nv-icon", { key: '02232856ec60e9b741ced372a9d05def5d822cc6', name: "check", "aria-hidden": "true", "data-scope": "selected" }))));
|
|
65
63
|
}
|
|
66
64
|
get el() { return index.getElement(this); }
|
|
67
65
|
};
|
package/dist/cjs/{nv-fieldmultiselect.entry-DFr-ZICs.js → nv-fieldmultiselect.entry-Bg_v0LUF.js}
RENAMED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-S09Gr7Tw.js');
|
|
4
4
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
5
5
|
require('react');
|
|
6
6
|
|
|
@@ -101,7 +101,7 @@ const NvFieldmultiselect = class {
|
|
|
101
101
|
* element.
|
|
102
102
|
*/
|
|
103
103
|
this.autofocus = false;
|
|
104
|
-
/**
|
|
104
|
+
/**
|
|
105
105
|
* Handle badge close for options mode.
|
|
106
106
|
*/
|
|
107
107
|
this.handleBadgeCloseOptions = () => {
|
|
@@ -141,7 +141,6 @@ const NvFieldmultiselect = class {
|
|
|
141
141
|
if (this.isHandlingEscape) {
|
|
142
142
|
return;
|
|
143
143
|
}
|
|
144
|
-
this.open = false;
|
|
145
144
|
this.filterText = '';
|
|
146
145
|
// Only reorder based on the mode
|
|
147
146
|
if (this.modeState === 'options') {
|
|
@@ -163,7 +162,6 @@ const NvFieldmultiselect = class {
|
|
|
163
162
|
if (!this.el.contains(document.activeElement)) {
|
|
164
163
|
// Close the popover without affecting the divider
|
|
165
164
|
this.open = false;
|
|
166
|
-
this.popoverElement.hide();
|
|
167
165
|
// Reset filter if needed
|
|
168
166
|
if (this.filterable) {
|
|
169
167
|
this.filterText = '';
|
|
@@ -183,7 +181,6 @@ const NvFieldmultiselect = class {
|
|
|
183
181
|
const target = event.target;
|
|
184
182
|
if (target.tagName === 'P' || target.tagName === 'SPAN') {
|
|
185
183
|
this.open = true;
|
|
186
|
-
this.popoverElement.show();
|
|
187
184
|
const inputContainer = this.el.querySelector('.input-container');
|
|
188
185
|
if (inputContainer) {
|
|
189
186
|
inputContainer.classList.add('focus-within');
|
|
@@ -205,7 +202,6 @@ const NvFieldmultiselect = class {
|
|
|
205
202
|
const target = event.target;
|
|
206
203
|
if (target.tagName === 'P' || target.tagName === 'SPAN') {
|
|
207
204
|
this.open = true;
|
|
208
|
-
this.popoverElement.show();
|
|
209
205
|
const inputContainer = this.el.querySelector('.input-container');
|
|
210
206
|
if (inputContainer) {
|
|
211
207
|
inputContainer.classList.add('focus-within');
|
|
@@ -287,7 +283,6 @@ const NvFieldmultiselect = class {
|
|
|
287
283
|
if (!this.el.contains(document.activeElement)) {
|
|
288
284
|
// Close the popover without affecting the divider
|
|
289
285
|
this.open = false;
|
|
290
|
-
this.popoverElement.hide();
|
|
291
286
|
// Reset filter if needed
|
|
292
287
|
if (this.filterable) {
|
|
293
288
|
this.filterText = '';
|
|
@@ -303,16 +298,7 @@ const NvFieldmultiselect = class {
|
|
|
303
298
|
if (this.disabled || this.readonly) {
|
|
304
299
|
return;
|
|
305
300
|
}
|
|
306
|
-
|
|
307
|
-
this.handlePopoverClose();
|
|
308
|
-
}
|
|
309
|
-
else {
|
|
310
|
-
this.open = true;
|
|
311
|
-
this.popoverElement.show();
|
|
312
|
-
if (!this.filterable) {
|
|
313
|
-
this.focusFirstItem();
|
|
314
|
-
}
|
|
315
|
-
}
|
|
301
|
+
this.open = !this.open;
|
|
316
302
|
};
|
|
317
303
|
/**
|
|
318
304
|
* Toggle the multiselect popover for slots mode.
|
|
@@ -321,16 +307,7 @@ const NvFieldmultiselect = class {
|
|
|
321
307
|
if (this.disabled || this.readonly) {
|
|
322
308
|
return;
|
|
323
309
|
}
|
|
324
|
-
|
|
325
|
-
this.handlePopoverClose();
|
|
326
|
-
}
|
|
327
|
-
else {
|
|
328
|
-
this.open = true;
|
|
329
|
-
this.popoverElement.show();
|
|
330
|
-
if (!this.filterable) {
|
|
331
|
-
this.focusFirstItem();
|
|
332
|
-
}
|
|
333
|
-
}
|
|
310
|
+
this.open = !this.open;
|
|
334
311
|
};
|
|
335
312
|
//#endregion METHODS
|
|
336
313
|
/****************************************************************************/
|
|
@@ -368,14 +345,6 @@ const NvFieldmultiselect = class {
|
|
|
368
345
|
if (this.modeState === 'options') {
|
|
369
346
|
this.handleOptionsChange(this.options);
|
|
370
347
|
}
|
|
371
|
-
// Add the listener for the hide event
|
|
372
|
-
requestAnimationFrame(() => {
|
|
373
|
-
if (this.popoverElement) {
|
|
374
|
-
this.popoverElement.addEventListener('hide', () => {
|
|
375
|
-
this.handlePopoverClose();
|
|
376
|
-
});
|
|
377
|
-
}
|
|
378
|
-
});
|
|
379
348
|
// Specific initialization for slots mode
|
|
380
349
|
if (this.modeState === 'slots') {
|
|
381
350
|
Promise.resolve().then(() => {
|
|
@@ -419,12 +388,6 @@ const NvFieldmultiselect = class {
|
|
|
419
388
|
*/
|
|
420
389
|
disconnectedCallback() {
|
|
421
390
|
document.removeEventListener('click', this.handleClickOutside.bind(this));
|
|
422
|
-
// Remove the listener for the hide event
|
|
423
|
-
if (this.popoverElement) {
|
|
424
|
-
this.popoverElement.removeEventListener('hide', () => {
|
|
425
|
-
this.handlePopoverClose();
|
|
426
|
-
});
|
|
427
|
-
}
|
|
428
391
|
}
|
|
429
392
|
/**
|
|
430
393
|
* Emitted when the input loses focus.
|
|
@@ -434,15 +397,13 @@ const NvFieldmultiselect = class {
|
|
|
434
397
|
// Update the open state of popover
|
|
435
398
|
this.open = event.detail;
|
|
436
399
|
if (this.open) {
|
|
400
|
+
// Filter items only if there is filter text
|
|
437
401
|
if (this.filterText) {
|
|
438
402
|
this.filterItems();
|
|
439
403
|
}
|
|
440
404
|
}
|
|
441
|
-
else if (this.modeState === 'options') {
|
|
442
|
-
this.reorderOptionsContent();
|
|
443
|
-
}
|
|
444
405
|
else {
|
|
445
|
-
this.
|
|
406
|
+
this.handlePopoverClose();
|
|
446
407
|
}
|
|
447
408
|
}
|
|
448
409
|
/**
|
|
@@ -866,8 +827,7 @@ const NvFieldmultiselect = class {
|
|
|
866
827
|
(this.inputElement && this.inputElement.contains(event.target))) {
|
|
867
828
|
return;
|
|
868
829
|
}
|
|
869
|
-
|
|
870
|
-
this.handlePopoverClose();
|
|
830
|
+
this.open = false;
|
|
871
831
|
}
|
|
872
832
|
/**
|
|
873
833
|
* Handle keyboard events & arrow key navigation.
|
|
@@ -879,7 +839,6 @@ const NvFieldmultiselect = class {
|
|
|
879
839
|
if (!this.open) {
|
|
880
840
|
if (event.key === 'ArrowDown') {
|
|
881
841
|
this.open = true;
|
|
882
|
-
this.popoverElement.show();
|
|
883
842
|
// Focus on the first item if the list is not filterable
|
|
884
843
|
if (!this.filterable) {
|
|
885
844
|
requestAnimationFrame(() => {
|
|
@@ -942,7 +901,6 @@ const NvFieldmultiselect = class {
|
|
|
942
901
|
setTimeout(() => {
|
|
943
902
|
this.isHandlingEscape = false;
|
|
944
903
|
this.open = false;
|
|
945
|
-
this.popoverElement.hide();
|
|
946
904
|
}, 150);
|
|
947
905
|
if (this.inputElement) {
|
|
948
906
|
this.inputElement.blur();
|