@nova-design-system/nova-react 3.23.0 → 3.25.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/README.md +1 -0
- package/dist/cjs/dom.utils-CuXVGECR-8VY5SfMZ.js +177 -0
- package/dist/cjs/events.utils-B6GgGra--01N__3wY.js +23 -0
- package/dist/cjs/generated/components.server.js +124 -58
- package/dist/cjs/{grow.animation-CvHGHBL4-DDIEYBK-.js → grow.animation-D7ep_aVl-BuXEDSK-.js} +0 -21
- package/dist/cjs/{i18n.utils-DOZbXX2L-BizoXo6c.js → i18n.utils-IlwlcG9l-ku0bScip.js} +14 -18
- package/dist/cjs/index-DUlunl9a.js +9696 -0
- package/dist/cjs/{nv-dialog.entry-O47Eol_7.js → index.esm-D3eWMME9-CG1TVKfu.js} +1 -296
- package/dist/cjs/index.js +5 -1
- package/dist/cjs/{nv-accordion-item.entry-B_l0-ux0.js → nv-accordion-item.entry-CqnjIt4R.js} +8 -7
- package/dist/cjs/{nv-accordion.entry-BX8_YuZF.js → nv-accordion.entry-Dx7FmGg_.js} +11 -14
- package/dist/cjs/{nv-alert.entry-DCWYR0OK.js → nv-alert.entry-BL3Pdcxd.js} +7 -6
- package/dist/cjs/nv-avatar.entry-2dFR4I9_.js +68 -0
- package/dist/cjs/nv-badge_2.entry-5FShR2Ax.js +218 -0
- package/dist/cjs/nv-breadcrumb.entry-Cfi32bBT.js +49 -0
- package/dist/cjs/nv-breadcrumbs.entry-BSgn3KUO.js +21 -0
- package/dist/cjs/nv-button.entry-BdQQ_LE7.js +166 -0
- package/dist/cjs/{nv-buttongroup.entry-BZaTKN_n.js → nv-buttongroup.entry-BM8CwXFK.js} +13 -7
- package/dist/cjs/{nv-calendar.entry-D9ESuu7C.js → nv-calendar.entry-CeKsMGOa.js} +39 -32
- package/dist/cjs/nv-col.entry-D-h2PGcz.js +38 -0
- package/dist/cjs/{nv-datagrid.entry-DcB5q2oC.js → nv-datagrid.entry-nOBIfqOS.js} +113 -255
- package/dist/cjs/{nv-datagridcolumn.entry-BhKOzXA6.js → nv-datagridcolumn.entry-BAzTU_KM.js} +2 -2
- package/dist/cjs/nv-dialog.entry-Bi2ZVSe2.js +299 -0
- package/dist/cjs/{nv-dialogfooter_2.entry-Dn16bI8a.js → nv-dialogfooter_2.entry-D6lzC-3S.js} +11 -29
- package/dist/cjs/nv-drawer.entry-Dp4AfBiF.js +445 -0
- package/dist/cjs/nv-drawerfooter_2.entry-DpWSsq6d.js +128 -0
- package/dist/cjs/nv-fieldcheckbox.entry-COA3LXnX.js +179 -0
- package/dist/cjs/{nv-fielddate.entry-B4P0U8QG.js → nv-fielddate.entry-B8r5RFXd.js} +20 -21
- package/dist/cjs/{nv-fielddaterange.entry-BORwYJ-k.js → nv-fielddaterange.entry-C6_Kq93P.js} +20 -19
- package/dist/cjs/{nv-fielddropdown.entry-DzBAIynY.js → nv-fielddropdown.entry-B2Dr5zHd.js} +51 -58
- package/dist/cjs/nv-fielddropdownitem.entry-DapivVnR.js +69 -0
- package/dist/cjs/{nv-fieldmultiselect.entry-DiqRreWh.js → nv-fieldmultiselect.entry-DSpQeiPx.js} +45 -49
- package/dist/cjs/nv-fieldnumber.entry-BwxR9sRr.js +189 -0
- package/dist/cjs/nv-fieldpassword.entry-BOSU-Skh.js +167 -0
- package/dist/cjs/nv-fieldradio.entry-ZFafNY5_.js +105 -0
- package/dist/cjs/nv-fieldselect.entry-CfWjQAd9.js +405 -0
- package/dist/cjs/{nv-fieldslider.entry-CozmnUfN.js → nv-fieldslider.entry-dDPcWUxs.js} +34 -16
- package/dist/cjs/nv-fieldtext.entry-Yaa-mkjJ.js +163 -0
- package/dist/cjs/{nv-fieldtextarea.entry-7UrKWDHg.js → nv-fieldtextarea.entry-Dp_l2pKZ.js} +18 -13
- package/dist/cjs/{nv-fieldtime.entry-DakOlLiO.js → nv-fieldtime.entry-CWxi4Uel.js} +38 -40
- package/dist/cjs/{nv-icon.entry-Db00kB2u.js → nv-icon.entry-Dci11W9S.js} +5 -5
- package/dist/cjs/nv-iconbutton_2.entry-A6FKFJT_.js +171 -0
- package/dist/cjs/{nv-menu.entry-CK2HdmBt.js → nv-menu.entry-BHaYP-9M.js} +11 -16
- package/dist/cjs/nv-menuitem.entry-Cm1vvN25.js +59 -0
- package/dist/cjs/nv-notification-bullet.entry-DRlS3Ybc.js +76 -0
- package/dist/cjs/nv-notification.entry-BeDmR-XC.js +176 -0
- package/dist/cjs/nv-notificationcontainer.entry-C3p_87Dg.js +41 -0
- package/dist/cjs/nv-paginationtable.entry-BzEqQOBa.js +231 -0
- package/dist/cjs/{nv-popover.entry-mLdLSp6n.js → nv-popover.entry-D2oFn9vL.js} +118 -46
- package/dist/cjs/nv-row.entry-hV1kxmrr.js +22 -0
- package/dist/cjs/{nv-sidebar.entry-inDVNJ4s.js → nv-sidebar.entry-BJrqJ8K7.js} +12 -8
- package/dist/cjs/nv-sidebarcontent.entry-CPfGF7nx.js +22 -0
- package/dist/cjs/{nv-sidebardivider.entry-D_yern0R.js → nv-sidebardivider.entry-D2wmzHCO.js} +4 -4
- package/dist/cjs/{nv-sidebarfooter.entry-Rkkn9TB_.js → nv-sidebarfooter.entry-C7fqCzjH.js} +4 -4
- package/dist/cjs/nv-sidebargroup.entry-qkXnxhs_.js +23 -0
- package/dist/cjs/{nv-sidebarheader.entry-CYpD_4pI.js → nv-sidebarheader.entry-DBsOmyQ0.js} +4 -4
- package/dist/cjs/{nv-sidebarlogo.entry-BgK03M1v.js → nv-sidebarlogo.entry-902Ht3UR.js} +4 -4
- package/dist/cjs/{nv-sidebarnavitem.entry-DglvcCOD.js → nv-sidebarnavitem.entry-CICrllp8.js} +11 -10
- package/dist/cjs/nv-sidebarnavsubitem.entry-Q9jjU_7D.js +35 -0
- package/dist/cjs/{nv-split.entry-mzg2F66T.js → nv-split.entry-BYIsE2wp.js} +51 -45
- package/dist/cjs/nv-stack.entry-DgE5ASGH.js +31 -0
- package/dist/cjs/{nv-table.entry-DkbNgxtI.js → nv-table.entry-DHXBu2n1.js} +9 -11
- package/dist/cjs/{nv-tableheader.entry-CRVFTQA-.js → nv-tableheader.entry-BijgOxcO.js} +5 -5
- package/dist/cjs/nv-toggle.entry-CMI1WdvV.js +82 -0
- package/dist/cjs/nv-togglebutton.entry-DAPETEmF.js +66 -0
- package/dist/cjs/{nv-togglebuttongroup.entry-BYXX5ejg.js → nv-togglebuttongroup.entry-CzDI1XCr.js} +14 -11
- package/dist/cjs/nv-tooltip.entry-DPoUP9iL.js +56 -0
- package/dist/cjs/slide.animation-CmH5d1of-BZuw607U.js +90 -0
- package/dist/components/NvDatatable/NvDatatable.js +69 -32
- package/dist/generated/components.js +38 -0
- package/dist/generated/components.server.js +120 -58
- package/dist/types/components/NvDatatable/NvDatatable.d.ts +1 -1
- package/dist/types/components/NvDatatable/types.d.ts +13 -3
- package/dist/types/generated/components.d.ts +63 -43
- package/dist/types/generated/components.server.d.ts +63 -43
- package/package.json +2 -2
- package/dist/cjs/index-CtjeeUI-.js +0 -39617
- package/dist/cjs/nv-avatar.entry-C_xZD3Lp.js +0 -68
- package/dist/cjs/nv-badge_2.entry-JjqANStV.js +0 -213
- package/dist/cjs/nv-breadcrumb.entry-DQZDn6cm.js +0 -46
- package/dist/cjs/nv-breadcrumbs.entry-Bz0GjhY_.js +0 -21
- package/dist/cjs/nv-button.entry-Br1DH9Vj.js +0 -164
- package/dist/cjs/nv-col.entry-CfgPMMxS.js +0 -38
- package/dist/cjs/nv-fieldcheckbox.entry-Bx6ArV_b.js +0 -177
- package/dist/cjs/nv-fielddropdownitem.entry-C_17isWd.js +0 -73
- package/dist/cjs/nv-fieldnumber.entry-C9O4UPp3.js +0 -187
- package/dist/cjs/nv-fieldpassword.entry-BfVJNT0A.js +0 -165
- package/dist/cjs/nv-fieldradio.entry-CG22oETM.js +0 -103
- package/dist/cjs/nv-fieldselect.entry-BPQEtrv2.js +0 -397
- package/dist/cjs/nv-fieldtext.entry-BD-z01ru.js +0 -163
- package/dist/cjs/nv-iconbutton_2.entry-CaKCa8NT.js +0 -168
- package/dist/cjs/nv-menuitem.entry-mKMqCAdz.js +0 -60
- package/dist/cjs/nv-notification-bullet.entry-DtbjtFxs.js +0 -77
- package/dist/cjs/nv-notification.entry-CLb0gNu3.js +0 -262
- package/dist/cjs/nv-notificationcontainer.entry-Cijivlm6.js +0 -41
- package/dist/cjs/nv-row.entry-C2C94fcv.js +0 -22
- package/dist/cjs/nv-sidebarcontent.entry-DxoljE15.js +0 -22
- package/dist/cjs/nv-sidebargroup.entry-C1p9qqxr.js +0 -23
- package/dist/cjs/nv-sidebarnavsubitem.entry-Dt1jKmC-.js +0 -35
- package/dist/cjs/nv-stack.entry-nnvjTrBy.js +0 -31
- package/dist/cjs/nv-toggle.entry-oC9TVkr1.js +0 -80
- package/dist/cjs/nv-togglebutton.entry-BTWCzbS9.js +0 -67
- package/dist/cjs/nv-tooltip.entry-OJGxfJEh.js +0 -55
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
4
|
-
var
|
|
3
|
+
var index = require('./index-DUlunl9a.js');
|
|
4
|
+
var i18n_utilsIlwlcG9l = require('./i18n.utils-IlwlcG9l-ku0bScip.js');
|
|
5
5
|
var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
|
|
6
6
|
require('@stencil/react-output-target/runtime');
|
|
7
7
|
require('react');
|
|
8
8
|
require('react-dom');
|
|
9
9
|
|
|
10
|
-
const nvFielddropdownCss =
|
|
10
|
+
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,nv-fielddropdown[aria-required=true] label::after{content:"*";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}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:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-label-line-height)}nv-fielddropdown nv-popover{width:100%;display:block}nv-fielddropdown nv-popover [data-scope=popover]{min-width:100%;width:max-content;max-width:400px;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]::-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 nv-popover div[slot=content]{max-height:calc(90vh - var(--list-dropdown-padding) * 2);overflow-y:auto;position:relative}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}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){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{position:relative;width:100%;min-height:40px}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:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);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:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--form-field-line-height)}nv-fielddropdown .input-container input,nv-fielddropdown .input-container p.non-filterable-text{}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 p.non-filterable-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;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:var(--font-weight-medium-emphasis);line-height:var(--form-field-line-height);box-sizing:border-box;cursor:pointer;height:100%;min-height:40px}nv-fielddropdown .input-container p.non-filterable-text span{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis}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-iconbutton:last-of-type{border-top-right-radius:var(--form-field-radius);border-bottom-right-radius:var(--form-field-radius)}nv-fielddropdown .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddropdown .description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), 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:var(--font-family-default), var(--font-family-fallback), 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)}`;
|
|
11
11
|
|
|
12
12
|
const NvFielddropdown = class {
|
|
13
13
|
constructor(hostRef) {
|
|
@@ -15,7 +15,7 @@ const NvFielddropdown = class {
|
|
|
15
15
|
this.valueChanged = index.createEvent(this, "valueChanged", 3);
|
|
16
16
|
this.filterTextChanged = index.createEvent(this, "filterTextChanged", 3);
|
|
17
17
|
this.openChanged = index.createEvent(this, "openChanged", 3);
|
|
18
|
-
this.dropdownItemSelected = index.createEvent(this, "dropdownItemSelected",
|
|
18
|
+
this.dropdownItemSelected = index.createEvent(this, "dropdownItemSelected", 7);
|
|
19
19
|
/** Pre-computed search index for efficient filtering */
|
|
20
20
|
this.indexedItems = [];
|
|
21
21
|
/** Raw items for worker initialization */
|
|
@@ -173,10 +173,9 @@ const NvFielddropdown = class {
|
|
|
173
173
|
* @param {MouseEvent} event - The click event.
|
|
174
174
|
*/
|
|
175
175
|
this.handleClickOutside = (event) => {
|
|
176
|
-
var _a;
|
|
177
176
|
if (!(event.target instanceof Node))
|
|
178
177
|
return;
|
|
179
|
-
if (!
|
|
178
|
+
if (!this.el?.contains(event.target))
|
|
180
179
|
this.open = false;
|
|
181
180
|
};
|
|
182
181
|
this.handleFilterInput = () => {
|
|
@@ -187,31 +186,31 @@ const NvFielddropdown = class {
|
|
|
187
186
|
// Use longer debounce for fuzzy mode (Fuse.js needs more time)
|
|
188
187
|
// For fuzzy mode, use FUZZY_DEBOUNCE_DELAY (300ms), otherwise use this.debounceDelay
|
|
189
188
|
const debounce = this.effectiveFilterMode === 'fuzzy'
|
|
190
|
-
?
|
|
189
|
+
? i18n_utilsIlwlcG9l.FUZZY_DEBOUNCE_DELAY
|
|
191
190
|
: this.debounceDelay;
|
|
192
191
|
this.debounceTimer = window.setTimeout(() => {
|
|
193
192
|
this.filterItems();
|
|
194
193
|
}, debounce);
|
|
195
194
|
};
|
|
196
195
|
this.getSelectedLabel = () => {
|
|
197
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
198
196
|
if (!this.value)
|
|
199
197
|
return '';
|
|
200
|
-
if (
|
|
198
|
+
if (this.filterText?.length)
|
|
201
199
|
return this.filterText;
|
|
202
|
-
if (
|
|
200
|
+
if (this.options?.length > 1) {
|
|
203
201
|
const matchingItem = this.options.find(option => option.value === this.value);
|
|
204
|
-
return
|
|
202
|
+
return matchingItem?.label ?? matchingItem?.value ?? this.value;
|
|
205
203
|
}
|
|
206
204
|
const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem'));
|
|
207
205
|
const matchingItem = items.find(item => item.value === this.value);
|
|
208
206
|
const selectedLabel = matchingItem
|
|
209
|
-
?
|
|
207
|
+
? matchingItem.label ??
|
|
208
|
+
matchingItem.textContent?.trim() ??
|
|
209
|
+
matchingItem.value
|
|
210
210
|
: '';
|
|
211
211
|
return selectedLabel;
|
|
212
212
|
};
|
|
213
213
|
}
|
|
214
|
-
/* eslint-enable nova/event-bubbling */
|
|
215
214
|
//#endregion EVENTS
|
|
216
215
|
/****************************************************************************/
|
|
217
216
|
//#region WATCHERS
|
|
@@ -235,9 +234,7 @@ const NvFielddropdown = class {
|
|
|
235
234
|
//#endregion WATCHERS
|
|
236
235
|
/****************************************************************************/
|
|
237
236
|
//#region LISTENERS
|
|
238
|
-
/* eslint-disable nova/native-event-listener */
|
|
239
237
|
handleDropdownItemSelected(event) {
|
|
240
|
-
event.stopPropagation();
|
|
241
238
|
if (this.disabled || this.readonly)
|
|
242
239
|
return;
|
|
243
240
|
if (!this.openOnSelect)
|
|
@@ -257,7 +254,6 @@ const NvFielddropdown = class {
|
|
|
257
254
|
this.setFilterInputToSelectedValue();
|
|
258
255
|
this.valueChanged.emit(event.detail.value);
|
|
259
256
|
}
|
|
260
|
-
/* eslint-enable nova/native-event-listener */
|
|
261
257
|
handleFocus(event) {
|
|
262
258
|
if (event.relatedTarget instanceof HTMLElement &&
|
|
263
259
|
event.relatedTarget.tagName.includes('NV-FIELDDROPDOWNITEM')) {
|
|
@@ -309,10 +305,9 @@ const NvFielddropdown = class {
|
|
|
309
305
|
//#region METHODS
|
|
310
306
|
/** Clears the filter text */
|
|
311
307
|
async clearFilter() {
|
|
312
|
-
var _a;
|
|
313
308
|
if (!this.filterable)
|
|
314
309
|
return;
|
|
315
|
-
if (
|
|
310
|
+
if (this.filterText?.length) {
|
|
316
311
|
this.filterText = '';
|
|
317
312
|
this.filterTextChanged.emit(this.filterText);
|
|
318
313
|
}
|
|
@@ -375,24 +370,20 @@ const NvFielddropdown = class {
|
|
|
375
370
|
}
|
|
376
371
|
focusField() {
|
|
377
372
|
const focusableItem = this.el.querySelector('[data-scope="focusable"]');
|
|
378
|
-
focusableItem
|
|
373
|
+
focusableItem?.focus();
|
|
379
374
|
}
|
|
380
375
|
/**
|
|
381
376
|
* Rebuilds the search index from current items (options prop or slot items).
|
|
382
377
|
*/
|
|
383
378
|
async rebuildSearchIndex() {
|
|
384
|
-
var _a;
|
|
385
379
|
const items = this.getFilterableItems();
|
|
386
380
|
// Build raw items array for indexing
|
|
387
|
-
this.rawItems = items.map((item, index) => {
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
label: item.label || ((_a = item.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || item.value || '',
|
|
392
|
-
});
|
|
393
|
-
});
|
|
381
|
+
this.rawItems = items.map((item, index) => ({
|
|
382
|
+
id: item.value || `item-${index}`,
|
|
383
|
+
label: item.label || item.textContent?.trim() || item.value || '',
|
|
384
|
+
}));
|
|
394
385
|
// Also include options prop items if present
|
|
395
|
-
if (
|
|
386
|
+
if (this.options?.length) {
|
|
396
387
|
this.options.forEach((opt, index) => {
|
|
397
388
|
this.rawItems.push({
|
|
398
389
|
id: opt.value || `opt-${index}`,
|
|
@@ -401,13 +392,13 @@ const NvFielddropdown = class {
|
|
|
401
392
|
});
|
|
402
393
|
}
|
|
403
394
|
// Build local index for main-thread search
|
|
404
|
-
this.indexedItems =
|
|
395
|
+
this.indexedItems = i18n_utilsIlwlcG9l.buildIndex(this.rawItems);
|
|
405
396
|
// Determine effective filter mode
|
|
406
|
-
this.effectiveFilterMode =
|
|
397
|
+
this.effectiveFilterMode = i18n_utilsIlwlcG9l.getEffectiveFilterMode(this.filterMode);
|
|
407
398
|
// Initialize worker if needed
|
|
408
399
|
const itemCount = this.rawItems.length;
|
|
409
|
-
const threshold =
|
|
410
|
-
if (
|
|
400
|
+
const threshold = i18n_utilsIlwlcG9l.clampWorkerThreshold(this.workerThreshold);
|
|
401
|
+
if (i18n_utilsIlwlcG9l.shouldUseWorker(itemCount, this.effectiveFilterMode, threshold)) {
|
|
411
402
|
await this.initWorker();
|
|
412
403
|
}
|
|
413
404
|
else {
|
|
@@ -421,12 +412,12 @@ const NvFielddropdown = class {
|
|
|
421
412
|
* Note: Fuzzy search now works on main thread with Fuse.js, so no mode change needed.
|
|
422
413
|
*/
|
|
423
414
|
async initWorker() {
|
|
424
|
-
if (!
|
|
415
|
+
if (!i18n_utilsIlwlcG9l.isWorkerSupported()) {
|
|
425
416
|
// Workers not supported - will use main thread (fuzzy still works with Fuse.js)
|
|
426
417
|
return;
|
|
427
418
|
}
|
|
428
419
|
if (!this.workerClient) {
|
|
429
|
-
this.workerClient = new
|
|
420
|
+
this.workerClient = new i18n_utilsIlwlcG9l.SearchWorkerClient();
|
|
430
421
|
// No fallback mode change needed - fuzzy works on main thread now
|
|
431
422
|
}
|
|
432
423
|
// Init will silently handle fallback if worker can't be created
|
|
@@ -447,7 +438,6 @@ const NvFielddropdown = class {
|
|
|
447
438
|
* If no items are found, display a message indicating no results.
|
|
448
439
|
*/
|
|
449
440
|
async filterItems() {
|
|
450
|
-
var _a;
|
|
451
441
|
if (this.controlledFilter)
|
|
452
442
|
return;
|
|
453
443
|
// Ensure index is built
|
|
@@ -462,7 +452,7 @@ const NvFielddropdown = class {
|
|
|
462
452
|
// Check if we should start filtering
|
|
463
453
|
if (this.filterText.length < this.startFilterAt) {
|
|
464
454
|
// Show all items up to maxResults
|
|
465
|
-
const effectiveMaxResults =
|
|
455
|
+
const effectiveMaxResults = i18n_utilsIlwlcG9l.clampMaxResults(this.maxResults);
|
|
466
456
|
let visibleCount = 0;
|
|
467
457
|
items.forEach(item => {
|
|
468
458
|
if (visibleCount < effectiveMaxResults) {
|
|
@@ -482,10 +472,10 @@ const NvFielddropdown = class {
|
|
|
482
472
|
}
|
|
483
473
|
// Determine if we should use worker
|
|
484
474
|
const itemCount = this.rawItems.length;
|
|
485
|
-
const threshold =
|
|
486
|
-
const useWorker =
|
|
475
|
+
const threshold = i18n_utilsIlwlcG9l.clampWorkerThreshold(this.workerThreshold);
|
|
476
|
+
const useWorker = i18n_utilsIlwlcG9l.shouldUseWorker(itemCount, this.effectiveFilterMode, threshold);
|
|
487
477
|
let result;
|
|
488
|
-
if (useWorker &&
|
|
478
|
+
if (useWorker && this.workerClient?.isReady) {
|
|
489
479
|
// Use worker for search
|
|
490
480
|
this.isSearching = true;
|
|
491
481
|
try {
|
|
@@ -494,7 +484,7 @@ const NvFielddropdown = class {
|
|
|
494
484
|
catch (error) {
|
|
495
485
|
console.error('Worker search failed, falling back to main thread:', error);
|
|
496
486
|
// Fall back to main thread search (now supports fuzzy with Fuse.js)
|
|
497
|
-
result =
|
|
487
|
+
result = i18n_utilsIlwlcG9l.search(this.indexedItems, {
|
|
498
488
|
query: this.filterText,
|
|
499
489
|
filterMode: this.effectiveFilterMode,
|
|
500
490
|
maxResults: this.maxResults,
|
|
@@ -508,7 +498,7 @@ const NvFielddropdown = class {
|
|
|
508
498
|
}
|
|
509
499
|
else {
|
|
510
500
|
// Use main thread search (now supports fuzzy mode with Fuse.js)
|
|
511
|
-
result =
|
|
501
|
+
result = i18n_utilsIlwlcG9l.search(this.indexedItems, {
|
|
512
502
|
query: this.filterText,
|
|
513
503
|
filterMode: this.effectiveFilterMode,
|
|
514
504
|
maxResults: this.maxResults,
|
|
@@ -539,16 +529,14 @@ const NvFielddropdown = class {
|
|
|
539
529
|
* // If no items match, a "no results" item is prepended to the list.
|
|
540
530
|
*/
|
|
541
531
|
applySearchResults(result, items) {
|
|
542
|
-
var _a;
|
|
543
532
|
// Create a Set of matching IDs for fast lookup
|
|
544
533
|
const matchingIds = new Set(result.ids);
|
|
545
534
|
let hasVisibleItems = false;
|
|
546
535
|
let visibleCount = 0;
|
|
547
|
-
const effectiveMaxResults =
|
|
536
|
+
const effectiveMaxResults = i18n_utilsIlwlcG9l.clampMaxResults(this.maxResults);
|
|
548
537
|
items.forEach(item => {
|
|
549
|
-
var _a;
|
|
550
538
|
const itemId = item.value || '';
|
|
551
|
-
const itemLabel = item.label ||
|
|
539
|
+
const itemLabel = item.label || item.textContent?.trim() || '';
|
|
552
540
|
// Check if this item matches (by ID or by re-running search on label)
|
|
553
541
|
const isMatch = matchingIds.has(itemId) ||
|
|
554
542
|
result.ids.some(id => {
|
|
@@ -570,7 +558,7 @@ const NvFielddropdown = class {
|
|
|
570
558
|
emptyItem.setAttribute('data-empty', 'true');
|
|
571
559
|
emptyItem.setAttribute('disabled', 'true');
|
|
572
560
|
emptyItem.textContent = this.emptyResult;
|
|
573
|
-
|
|
561
|
+
this.el.querySelector('div[slot="content"] ul')?.prepend(emptyItem);
|
|
574
562
|
}
|
|
575
563
|
else if (result.truncated) {
|
|
576
564
|
// Add truncation message if results were limited
|
|
@@ -587,13 +575,13 @@ const NvFielddropdown = class {
|
|
|
587
575
|
*/
|
|
588
576
|
addTruncatedMessage(shown, total) {
|
|
589
577
|
// Get the text template: use provided text or auto-detect from locale
|
|
590
|
-
const textTemplate = this.truncatedResultsText ||
|
|
578
|
+
const textTemplate = this.truncatedResultsText || i18n_utilsIlwlcG9l.getTruncatedResultsText(this.locale);
|
|
591
579
|
const truncatedItem = document.createElement('nv-fielddropdownitem');
|
|
592
580
|
truncatedItem.setAttribute('data-truncated', 'true');
|
|
593
581
|
truncatedItem.setAttribute('disabled', 'true');
|
|
594
582
|
truncatedItem.setAttribute('detached', 'true');
|
|
595
583
|
truncatedItem.className = 'truncated-message';
|
|
596
|
-
truncatedItem.textContent =
|
|
584
|
+
truncatedItem.textContent = i18n_utilsIlwlcG9l.formatTruncatedResults(textTemplate, shown, total);
|
|
597
585
|
const ul = this.el.querySelector('div[slot="content"] ul');
|
|
598
586
|
if (ul) {
|
|
599
587
|
ul.appendChild(truncatedItem);
|
|
@@ -636,7 +624,6 @@ const NvFielddropdown = class {
|
|
|
636
624
|
/****************************************************************************/
|
|
637
625
|
//#region RENDER
|
|
638
626
|
render() {
|
|
639
|
-
var _a;
|
|
640
627
|
// Check aria-required from multiple sources:
|
|
641
628
|
// 1. JavaScript prop (most reliable)
|
|
642
629
|
// 2. HTML attribute 'aria-required' (direct HTML)
|
|
@@ -668,20 +655,26 @@ const NvFielddropdown = class {
|
|
|
668
655
|
? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
|
|
669
656
|
: undefined;
|
|
670
657
|
const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
|
|
671
|
-
return (index.h(index.Host, { key: '
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
675
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
658
|
+
return (index.h(index.Host, { key: '0915d7a88c89a16adc2d27630b326c4fa426445b', 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: 'c4c614d2f0224a8a0fa10e4a12ddb5c7023a54d8', htmlFor: this.inputId, onClick: this.syncToggleDropdown.bind(this) }, index.h("slot", { key: '14b7f31b260e324a57559cd7fc566f8fcfe29c1e', name: "label" }, this.label))), index.h("nv-popover", { key: 'bffecd6ae3c0e6a5e5def096fd196d9d078cdee5', triggerMode: "controlled", placement: "bottom-start", open: this.open, onOpenChanged: e => this.openChanged.emit(e.detail) }, index.h("div", { key: 'b2f6dd569d553f61d22b31a96e2020d9a53ecf30', class: "input-wrapper", slot: "trigger" }, index.h("slot", { key: 'c1d3c314d3466fafa94d4b7f2bf124a70586ea98', name: "before-input" }), index.h("div", { key: '6f9a5e8eb390569a85b7d8e811995434fc478a31', class: "input-container" }, index.h("slot", { key: '57c396497f9fb4633b5814ec3e5791fffb4e29fc', 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, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
|
|
659
|
+
'aria-required': String(ariaRequiredValue),
|
|
660
|
+
}), disabled: this.disabled, readOnly: this.readonly, onInput: this.handleFilterInput })) : (index.h("p", { "data-scope": "focusable", id: this.inputId, ref: el => (this.selectElement = el), class: "non-filterable-text", tabIndex: this.disabled ? -1 : 0 }, this.getSelectedLabel() || this.value || this.placeholder)), this.filterable && this.filterText && (index.h("nv-iconbutton", { key: 'a317de934a5525a0f2fc8da60efb30e6f145e26b', name: "x", size: "md", emphasis: "lower", class: "clear-button", onClick: this.clearFilter.bind(this), "aria-label": "Clear input" })), this.error && (index.h("nv-icon", { key: '66f875b52c5aad0b3d337495e2b84479c539f40c', name: "alert-circle", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: '87d05a637e89e2d31621fdaf4da25a0472679790', "data-scope": "toggle-dropdown", ref: el => (this.toggleElement = el), name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', onClick: this.syncToggleDropdown.bind(this), tabIndex: this.disabled ? -1 : 0 })), index.h("slot", { key: '709fa474ef044a35a09ea9e03f2c2cb7f8beb499', name: "after-input" })), index.h("div", { key: '1c0599436e013c853b8d52411812d383095b7339', slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, this.options?.length > 0 && (index.h("ul", { key: '7d29e377eb3c90d20a0e8659a4404da0f603ce33' }, 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", { key: '76796c930183e266a8f13dceb70040e9a531bf4b', name: "content" }))), (this.description ||
|
|
661
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '5ce379ed837ce4045e29835f452615901a49e765', class: "description" }, index.h("slot", { key: '099b08d109920596d58aee26aa3a1f13ed5c8743', name: "description" }, this.description))), (this.errorDescription ||
|
|
662
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'f8357878d232e6d28714bcc7f3aa508fd33d4c84', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '3f76cd412d3b8cff001295bc68cc726f166788ab', name: "error-description" }, this.errorDescription)))));
|
|
676
663
|
}
|
|
677
664
|
static get formAssociated() { return true; }
|
|
678
665
|
get el() { return index.getElement(this); }
|
|
679
666
|
static get watchers() { return {
|
|
680
|
-
"open": [
|
|
681
|
-
|
|
682
|
-
|
|
667
|
+
"open": [{
|
|
668
|
+
"handleOpenChange": 0
|
|
669
|
+
}],
|
|
670
|
+
"value": [{
|
|
671
|
+
"handleValueChange": 0
|
|
672
|
+
}],
|
|
673
|
+
"options": [{
|
|
674
|
+
"handleOptionsChange": 0
|
|
675
|
+
}]
|
|
683
676
|
}; }
|
|
684
677
|
};
|
|
685
|
-
NvFielddropdown.style = nvFielddropdownCss;
|
|
678
|
+
NvFielddropdown.style = nvFielddropdownCss();
|
|
686
679
|
|
|
687
680
|
exports.nv_fielddropdown = NvFielddropdown;
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var index = require('./index-DUlunl9a.js');
|
|
4
|
+
require('@stencil/react-output-target/runtime');
|
|
5
|
+
require('react');
|
|
6
|
+
require('react-dom');
|
|
7
|
+
|
|
8
|
+
const nvFielddropdownitemCss = () => `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-fielddropdownitem{display:flex;gap:var(--list-select-gap-y);flex-wrap:wrap;align-items:center;width:100%;background-color:var(--components-list-select-option-background-default);padding:var(--list-select-option-padding);font-weight:var(--menu-contextual-item-font-weight);font-size:var(--list-select-font-size);line-height:var(--list-select-line-height);color:var(--components-list-select-option-content-default);border-radius:var(--list-select-option-radius);transition:background-color 150ms ease-out, color 150ms ease-out;cursor:pointer}nv-fielddropdownitem:not(:first-of-type){margin-top:var(--list-select-gap-y)}nv-fielddropdownitem:hover,nv-fielddropdownitem:focus,nv-fielddropdownitem:focus-within{background-color:var(--components-list-select-option-background-hover);color:var(--components-list-select-option-content-hover)}nv-fielddropdownitem:checked{background-color:var(--components-list-select-option-background-active);color:var(--components-list-select-option-content-active)}nv-fielddropdownitem:checked::after{order:1;margin-left:auto;content:"";display:inline-block;width:var(--spacing-5);height:var(--spacing-5);background-color:currentColor;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='nvicon_check' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6px' d='m5 12 5 5L20 7' vector-effect='non-scaling-stroke'%3E%3C/path%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='nvicon_check' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6px' d='m5 12 5 5L20 7' vector-effect='non-scaling-stroke'%3E%3C/path%3E%3C/svg%3E");mask-repeat:no-repeat;mask-position:center;mask-size:contain}nv-fielddropdownitem::checkmark{display:none}nv-fielddropdownitem:disabled,nv-fielddropdownitem:checked:disabled{color:var(--components-list-select-option-content-disabled);background-color:var(--components-list-select-option-background-default)}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;word-break:break-word;overflow-wrap:break-word;padding-right:var(--spacing-5)}nv-fielddropdownitem nv-icon[data-scope=selected]{color:var(--components-list-dropdown-item-label-default);align-self:center;margin-left:auto;position:absolute;right:var(--list-dropdown-item-padding-y)}`;
|
|
9
|
+
|
|
10
|
+
const NvFielddropdownitem = class {
|
|
11
|
+
constructor(hostRef) {
|
|
12
|
+
index.registerInstance(this, hostRef);
|
|
13
|
+
this.dropdownItemSelected = index.createEvent(this, "dropdownItemSelected", 7);
|
|
14
|
+
/****************************************************************************/
|
|
15
|
+
//#region PROPERTIES
|
|
16
|
+
/**
|
|
17
|
+
* Disables the item, preventing any user interaction.
|
|
18
|
+
*/
|
|
19
|
+
this.disabled = false;
|
|
20
|
+
/**
|
|
21
|
+
* Indicates if the item is selected.
|
|
22
|
+
*/
|
|
23
|
+
this.selected = false;
|
|
24
|
+
/**
|
|
25
|
+
* If detached, the item will not be filtered out or change the dropdown's
|
|
26
|
+
* selected item. Useful for actionable items, such as Add New item, etc.
|
|
27
|
+
*/
|
|
28
|
+
this.detached = false;
|
|
29
|
+
//#endregion EVENTS
|
|
30
|
+
/****************************************************************************/
|
|
31
|
+
//#region METHODS
|
|
32
|
+
this.handleSelected = () => {
|
|
33
|
+
if (this.disabled)
|
|
34
|
+
return;
|
|
35
|
+
this.dropdownItemSelected.emit({
|
|
36
|
+
label: this.label,
|
|
37
|
+
value: this.value,
|
|
38
|
+
detached: this.detached,
|
|
39
|
+
});
|
|
40
|
+
};
|
|
41
|
+
}
|
|
42
|
+
handleKeyDown(event) {
|
|
43
|
+
if (event.target !== this.el)
|
|
44
|
+
return;
|
|
45
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
46
|
+
event.preventDefault();
|
|
47
|
+
this.handleSelected();
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
//#endregion METHODS
|
|
51
|
+
/****************************************************************************/
|
|
52
|
+
//#region LIFECYCLE
|
|
53
|
+
componentWillRender() {
|
|
54
|
+
if (!this.value) {
|
|
55
|
+
const fallback = this.label ?? this.el.textContent;
|
|
56
|
+
this.value = fallback.replace(/\W+/g, ''); // Remove non-word characters
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
//#endregion LIFECYCLE
|
|
60
|
+
/****************************************************************************/
|
|
61
|
+
//#region RENDER
|
|
62
|
+
render() {
|
|
63
|
+
return (index.h(index.Host, { key: 'cc904014a9b842b78989983ea9bef85b77d78ccd', role: "menuitem", tabindex: '-1', onClick: this.handleSelected }, index.h("slot", { key: 'bea22ab46cadc0150ee379e2157fad80d11cccdd' }, index.h("div", { key: 'bd873a6664bee68e5e177ef04c14f68f2e0d3cf1', class: "text-wrapper" }, index.h("span", { key: '786a7be6c2aaf0d3cbc570f38ed45f2f23e742be', "data-scope": "text" }, this.label))), this.selected && (index.h("nv-icon", { key: 'a53bfcf17378c42bec4bbd970635dbd6ada1c3a4', name: "check", "aria-hidden": "true", "data-scope": "selected" }))));
|
|
64
|
+
}
|
|
65
|
+
get el() { return index.getElement(this); }
|
|
66
|
+
};
|
|
67
|
+
NvFielddropdownitem.style = nvFielddropdownitemCss();
|
|
68
|
+
|
|
69
|
+
exports.nv_fielddropdownitem = NvFielddropdownitem;
|