@nova-design-system/nova-react 3.29.0 → 3.31.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/{constants-BReL3Lsa-DpB_ghPF.js → constants-gOKBmbgZ-CSoZ8z-G.js} +5 -0
- package/dist/cjs/generated/components.server.js +35 -1
- package/dist/cjs/index-BRxlcrvE.js +10395 -0
- package/dist/cjs/index.js +7 -1
- package/dist/cjs/{nv-accordion-item.entry-D1o0gC5w.js → nv-accordion-item.entry-DWi_bEQx.js} +3 -3
- package/dist/cjs/{nv-accordion.entry-DYJtq9Az.js → nv-accordion.entry-Bgn2CRYE.js} +2 -2
- package/dist/cjs/{nv-alert.entry-CMtCdHmk.js → nv-alert.entry-tkzdxYo4.js} +8 -8
- package/dist/cjs/{nv-avatar.entry-B6e7aG4W.js → nv-avatar.entry-C6xqQhws.js} +8 -8
- package/dist/cjs/{nv-badge_2.entry-RD3j0bJM.js → nv-badge_2.entry-poMKx9km.js} +5 -5
- package/dist/cjs/{nv-breadcrumb.entry-DgpqY2fr.js → nv-breadcrumb.entry-BTBUN3X8.js} +2 -2
- package/dist/cjs/{nv-breadcrumbs.entry-CZgcDUw5.js → nv-breadcrumbs.entry-DXdb_Gzf.js} +2 -2
- package/dist/cjs/{nv-button.entry-DR9NaRxG.js → nv-button.entry-IYrV4dVV.js} +7 -7
- package/dist/cjs/{nv-buttongroup.entry-qO8r7WqG.js → nv-buttongroup.entry-DpMhGqzQ.js} +2 -2
- package/dist/cjs/{nv-calendar.entry-DRlv3Xph.js → nv-calendar.entry-Clp-qYdU.js} +9 -9
- package/dist/cjs/{nv-col.entry-B7utJttP.js → nv-col.entry-BgIpEdn6.js} +2 -2
- package/dist/cjs/{nv-datagrid.entry-digYmlnA.js → nv-datagrid.entry-CmnSlQEN.js} +8 -8
- package/dist/cjs/{nv-datagridcolumn.entry-UwaDi-Hr.js → nv-datagridcolumn.entry-CfaOqHSs.js} +2 -2
- package/dist/cjs/{nv-datetest.entry-BJtWaM2T.js → nv-datetest.entry-DL0WPAUH.js} +2 -2
- package/dist/cjs/{nv-datetimetest.entry-WaNPcHxh.js → nv-datetimetest.entry-DoABznI1.js} +1 -1
- package/dist/cjs/{nv-dialog.entry-BI_mFT2G.js → nv-dialog.entry-C95UrJIU.js} +3 -3
- package/dist/cjs/{nv-dialogfooter_2.entry-DU2ClBUR.js → nv-dialogfooter_2.entry-Ccml86Uw.js} +6 -6
- package/dist/cjs/{nv-drawer.entry-BKF4CyOt.js → nv-drawer.entry-cXCjYVTV.js} +3 -3
- package/dist/cjs/{nv-drawerfooter_2.entry-BSyUs7_4.js → nv-drawerfooter_2.entry-Dq0IblnH.js} +6 -6
- package/dist/cjs/{nv-fieldcheckbox.entry-l5FWToQi.js → nv-fieldcheckbox.entry-CnP54xin.js} +5 -5
- package/dist/cjs/{nv-fielddate.entry-BfviesNp.js → nv-fielddate.entry-DZY75-mm.js} +7 -7
- package/dist/cjs/{nv-fielddaterange.entry-BvDkPLXG.js → nv-fielddaterange.entry-DkouN3iA.js} +7 -7
- package/dist/cjs/{nv-fielddropdown.entry-B-nYjuMt.js → nv-fielddropdown.entry-Bc3bobvr.js} +101 -23
- package/dist/cjs/{nv-fielddropdownitem.entry-Dxqyb9DN.js → nv-fielddropdownitem.entry-CmdskK1s.js} +2 -2
- package/dist/cjs/{nv-fieldmultiselect.entry-CgO1RP0W.js → nv-fieldmultiselect.entry-Bc6YFUA_.js} +1 -1
- package/dist/cjs/{nv-fieldnumber.entry-stgdLi7x.js → nv-fieldnumber.entry-DwvjJfV9.js} +5 -5
- package/dist/cjs/{nv-fieldpassword.entry-CHA3JAUd.js → nv-fieldpassword.entry-CUI2Jm-V.js} +5 -5
- package/dist/cjs/{nv-fieldradio.entry-DHavVjB-.js → nv-fieldradio.entry-CnLCvLBh.js} +4 -4
- package/dist/cjs/{nv-fieldselect.entry-Dq5AsOFt.js → nv-fieldselect.entry-DunLjNwe.js} +45 -7
- package/dist/cjs/{nv-fieldslider.entry-SlF3BBUW.js → nv-fieldslider.entry-Cp-6fToR.js} +4 -4
- package/dist/cjs/{nv-fieldtext.entry-BYCc8SyD.js → nv-fieldtext.entry-FJk12WoX.js} +5 -5
- package/dist/cjs/{nv-fieldtextarea.entry-96JCOb9L.js → nv-fieldtextarea.entry-Ci9B5-DX.js} +4 -4
- package/dist/cjs/{nv-fieldtime.entry-BdzjxkaK.js → nv-fieldtime.entry-DCSdECWn.js} +44 -44
- package/dist/cjs/{nv-icon.entry-CSRxi6BH.js → nv-icon.entry-DB18IDaU.js} +9 -9
- package/dist/cjs/{nv-iconbutton_2.entry-BtDxwMFD.js → nv-iconbutton_2.entry-CNR_poEm.js} +3 -3
- package/dist/cjs/{nv-menu.entry-aX39SPH8.js → nv-menu.entry-CxXHuTq3.js} +2 -2
- package/dist/cjs/{nv-menuitem.entry-DzSp52G2.js → nv-menuitem.entry-44XD7nfl.js} +2 -2
- package/dist/cjs/{nv-notification-bullet.entry-D2yOXj46.js → nv-notification-bullet.entry-Cn2OELYw.js} +1 -1
- package/dist/cjs/{nv-notification.entry-BRXHbtT8.js → nv-notification.entry-C8beqUzI.js} +19 -19
- package/dist/cjs/{nv-notificationcontainer.entry-YNIM2_ah.js → nv-notificationcontainer.entry-DgEstiLX.js} +2 -2
- package/dist/cjs/{nv-pagination-nav.entry-uY1nT9aT.js → nv-pagination-nav.entry-CIZPwFeF.js} +2 -2
- package/dist/cjs/{nv-paginationtable.entry-mr5KYXVC.js → nv-paginationtable.entry-woQZpVmb.js} +19 -3
- package/dist/cjs/{nv-popover.entry-_9ARKM70.js → nv-popover.entry-rHUUSzR-.js} +2 -2
- package/dist/cjs/{nv-row.entry-BMQvcqlU.js → nv-row.entry-DaERf8TD.js} +2 -2
- package/dist/cjs/nv-sidebar.entry-BI9me_HP.js +355 -0
- package/dist/cjs/{nv-sidebarcontent.entry-llnRwVuj.js → nv-sidebarcontent.entry-CtARsnjy.js} +2 -2
- package/dist/cjs/{nv-sidebardivider.entry--rQv8d5T.js → nv-sidebardivider.entry-C15Xk11m.js} +2 -2
- package/dist/cjs/{nv-sidebarfooter.entry-C5R0sUI_.js → nv-sidebarfooter.entry-DFMMvv_Q.js} +2 -2
- package/dist/cjs/{nv-sidebargroup.entry-DdrpLbU7.js → nv-sidebargroup.entry-DeWOA-0I.js} +2 -2
- package/dist/cjs/{nv-sidebarheader.entry-HuBPIsyf.js → nv-sidebarheader.entry-HtvbpvnX.js} +2 -2
- package/dist/cjs/{nv-sidebarlogo.entry-TZNPoqnA.js → nv-sidebarlogo.entry-Zxbpttzr.js} +2 -2
- package/dist/cjs/{nv-sidebarnavitem.entry-BWc3mF5I.js → nv-sidebarnavitem.entry-u4rbC1el.js} +3 -3
- package/dist/cjs/{nv-sidebarnavsubitem.entry-DekANwO8.js → nv-sidebarnavsubitem.entry-UouMn7hU.js} +2 -2
- package/dist/cjs/{nv-split.entry-BOwOB8FW.js → nv-split.entry-CUMbQNQB.js} +2 -2
- package/dist/cjs/{nv-stack.entry-CaTiSLGN.js → nv-stack.entry-D_F42KTD.js} +2 -2
- package/dist/cjs/nv-statusindicator.entry-BdRvU3iW.js +42 -0
- package/dist/cjs/{nv-table.entry-LFZaS0Dy.js → nv-table.entry-CKVH76OE.js} +3 -3
- package/dist/cjs/{nv-tableheader.entry-CK50S8xW.js → nv-tableheader.entry-btKwE14F.js} +2 -2
- package/dist/cjs/nv-tag.entry-BxYC7Lgo.js +85 -0
- package/dist/cjs/{nv-timetest.entry-A9elKwkf.js → nv-timetest.entry-CxXMIDZ_.js} +2 -2
- package/dist/cjs/{nv-toggle.entry-BGu-6rEs.js → nv-toggle.entry-C4uo7RRt.js} +3 -3
- package/dist/cjs/{nv-togglebutton.entry-BzAcBOgN.js → nv-togglebutton.entry-DJ-s5lgO.js} +2 -2
- package/dist/cjs/{nv-togglebuttongroup.entry-CIWp7IXc.js → nv-togglebuttongroup.entry-DJOCL_Qx.js} +2 -2
- package/dist/cjs/{nv-tooltip.entry-CoGkSHpv.js → nv-tooltip.entry-DndZWT1U.js} +2 -2
- package/dist/components/NvDatatable/NvDatatable.js +178 -61
- package/dist/components/NvDatatable/expandState.js +8 -0
- package/dist/components/NvDatatable/expandState.test.js +41 -0
- package/dist/components/NvDatatable/paginationState.js +9 -0
- package/dist/components/NvDatatable/paginationState.test.js +84 -0
- package/dist/generated/components.js +25 -2
- package/dist/generated/components.server.js +33 -1
- package/dist/types/components/NvDatatable/NvDatatable.d.ts +1 -1
- package/dist/types/components/NvDatatable/expandState.d.ts +5 -0
- package/dist/types/components/NvDatatable/expandState.test.d.ts +1 -0
- package/dist/types/components/NvDatatable/paginationState.d.ts +9 -0
- package/dist/types/components/NvDatatable/paginationState.test.d.ts +1 -0
- package/dist/types/components/NvDatatable/types.d.ts +17 -1
- package/dist/types/generated/components.d.ts +14 -1
- package/dist/types/generated/components.server.d.ts +14 -1
- package/package.json +1 -1
- package/dist/cjs/index-DgKzi_Pd.js +0 -10208
- package/dist/cjs/nv-sidebar.entry-C4HTjJmz.js +0 -181
package/dist/cjs/{nv-drawerfooter_2.entry-BSyUs7_4.js → nv-drawerfooter_2.entry-Dq0IblnH.js}
RENAMED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
4
|
-
var
|
|
3
|
+
var index = require('./index-BRxlcrvE.js');
|
|
4
|
+
var constantsGOKBmbgZ = require('./constants-gOKBmbgZ-CSoZ8z-G.js');
|
|
5
5
|
require('@stencil/react-output-target/runtime');
|
|
6
6
|
require('react');
|
|
7
7
|
require('react-dom');
|
|
@@ -85,15 +85,15 @@ const NvDrawerfooter = class {
|
|
|
85
85
|
// Set the default button type based on the form property
|
|
86
86
|
if (!this.primaryButtonType) {
|
|
87
87
|
this.primaryButtonRef.type = this.form
|
|
88
|
-
?
|
|
89
|
-
:
|
|
88
|
+
? constantsGOKBmbgZ.ButtonType.Submit
|
|
89
|
+
: constantsGOKBmbgZ.ButtonType.Button;
|
|
90
90
|
}
|
|
91
91
|
}
|
|
92
92
|
//#endregion LIFECYCLE
|
|
93
93
|
/****************************************************************************/
|
|
94
94
|
//#region RENDER
|
|
95
95
|
render() {
|
|
96
|
-
return (index.h(index.Host, { key: '
|
|
96
|
+
return (index.h(index.Host, { key: '2ade4dcb3320ee8c514733ec13ba426b3ac4aaf5' }, index.h("slot", { key: '8fb3bcd6539645049053168f079f44e213b54877' }, index.h(index.Fragment, { key: 'f6a2466e843703f36d347e5863e714a147f8bc9b' }, !this.undismissable && (index.h("nv-button", { key: '7d4bbfc76ffd9164f02fde26a10d7261ff239d23', onClick: this.handleCancel, emphasis: "low", size: "sm" }, this.cancelLabel)), index.h("nv-button", { key: 'a05c968d24da7c3fe320dfb74d0a88d4d6fa9f3b', ref: el => (this.primaryButtonRef = el), onClick: this.handlePrimary, disabled: this.disabled, danger: this.danger, size: "sm", emphasis: "high", form: this.form, type: this.primaryButtonType }, this.leadingIcon && (index.h("nv-icon", { key: 'a352b063ac4ca57fef730182462dea3c73d8203d', slot: "leading-icon", name: this.leadingIcon, size: "sm" })), this.primaryLabel, this.trailingIcon && (index.h("nv-icon", { key: 'bf249ca468d0e382723a28a3bbc730ed9c6defea', slot: "trailing-icon", name: this.trailingIcon, size: "sm" })))))));
|
|
97
97
|
}
|
|
98
98
|
static get formAssociated() { return true; }
|
|
99
99
|
get el() { return index.getElement(this); }
|
|
@@ -120,7 +120,7 @@ const NvDrawerheader = class {
|
|
|
120
120
|
/****************************************************************************/
|
|
121
121
|
//#region RENDER
|
|
122
122
|
render() {
|
|
123
|
-
return (index.h(index.Host, { key: '
|
|
123
|
+
return (index.h(index.Host, { key: 'a16aa0062df9ec7e2ddf452c5576575f14cdbb0b' }, index.h("slot", { key: '10d3c3d716e5c9f1c12c9e93d16bbfd30c8091dd' }, index.h(index.Fragment, { key: '2c4c2355b6974083fff08adf6291c33f1bf2a918' }, index.h("div", { key: '380dd38b59960f9f252e05c98496bf51b7a70f94', class: "heading" }, this.heading), index.h("div", { key: 'fb0565032b9988752837b25a9344be9c3f0957fe', class: "subheading" }, this.subheading)))));
|
|
124
124
|
}
|
|
125
125
|
get el() { return index.getElement(this); }
|
|
126
126
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-BRxlcrvE.js');
|
|
4
4
|
var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
|
|
5
5
|
var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
|
|
6
6
|
require('@stencil/react-output-target/runtime');
|
|
@@ -156,15 +156,15 @@ const NvFieldcheckbox = class {
|
|
|
156
156
|
? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
|
|
157
157
|
: undefined;
|
|
158
158
|
const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
|
|
159
|
-
return (index.h(index.Host, { key: '
|
|
159
|
+
return (index.h(index.Host, { key: 'cf30010511c7bdc27cb609f2a8ce939587c2464a', class: clsxChV9xqsO.clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, index.h("div", { key: '0cc70966eac1bb25c3d74f8cacdc0bb7f1f4a67f', class: "input-container" }, index.h("input", { key: '7ecb777e9a6ee8b4ec0dba7ba544d645e2d7151e', type: "checkbox", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly && !useNativeRequired, required: useNativeRequired ? this.required : undefined, tabindex: this.el.tabIndex, ...(ariaRequiredValue !== undefined && {
|
|
160
160
|
'aria-required': String(ariaRequiredValue),
|
|
161
161
|
}), indeterminate: this.indeterminate, ref: el => {
|
|
162
162
|
if (el) {
|
|
163
163
|
el.indeterminate = this.indeterminate;
|
|
164
164
|
}
|
|
165
|
-
} }), index.h("span", { key: '
|
|
166
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
167
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
165
|
+
} }), index.h("span", { key: 'b59ba654a3955d6620d70148522dce20be9599c5', class: "icon" }, this.checked && !this.indeterminate && (index.h("slot", { key: '275628f6c03bf7ee640d5732556e22912ce4fe0d', name: "checked-icon" }, index.h("svg", { key: 'd2c8d55cdef913b32e34955bd82cd78d4af15afd', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, index.h("path", { key: '0c43dea52342adf873b83d6e9d801b477cb383be', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (index.h("slot", { key: 'a31a5276a5b950cfc7f4e66f560c6568118ef7d9', name: "indeterminate-icon" }, index.h("svg", { key: 'af5cec22670fb50c45c03cd2ac127fc2584293af', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, index.h("path", { key: '8d78986ffb6be73c3cc81adb77fe5ff7948fe263', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), index.h("slot", { key: '1e240e12effef23f8f3d78eabaa7828a7cbb80a2' }), index.h("div", { key: 'd33b034460a714a67a7f403c26f3e87ff2c68138', class: "text-container" }, index.h("slot", { key: '05902b1b4af52b5f9c5139e5313fb4a93be7271b', name: "main" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '41914073c3c0341dfb71ef0ceaaf6640930b0fb7', htmlFor: this.inputId, class: clsxChV9xqsO.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: 'bc59332c91966fdc3943fe426dca3cadc33d28d4', name: "label" }, this.label))), (this.description ||
|
|
166
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '24f02b9d567ca21ddbbb4081835397c0a902b9f6', class: "description" }, index.h("slot", { key: '8b720bd362a70edde6ff1a8e886084364fff8559', name: "description" }, this.description)))), (this.errorDescription ||
|
|
167
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '7b969200e549177205d23aa8841b9c301d617ed1', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '103cb6bafca0867bf36b87dce97e9bf6cb29a1b8', name: "error-description" }, this.errorDescription))))));
|
|
168
168
|
}
|
|
169
169
|
static get formAssociated() { return true; }
|
|
170
170
|
get el() { return index.getElement(this); }
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-BRxlcrvE.js');
|
|
4
4
|
var inputmaskCSo292ul = require('./inputmask-CSo292ul-DlvupPk6.js');
|
|
5
5
|
var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
|
|
6
6
|
require('@stencil/react-output-target/runtime');
|
|
@@ -404,15 +404,15 @@ const NvFielddate = class {
|
|
|
404
404
|
? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
|
|
405
405
|
: undefined;
|
|
406
406
|
const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
|
|
407
|
-
return (index.h(index.Host, { key: '
|
|
408
|
-
this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '
|
|
407
|
+
return (index.h(index.Host, { key: '8a52688bd6a8739256310a59a7e78f6ac80598f2' }, ((this.label && this.label.length > 0) ||
|
|
408
|
+
this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '467bba7d225fe472f832226e39c03f2ccb32ce09', htmlFor: this.inputId }, index.h("slot", { key: 'c372e4c061d7708c10c66beb663dcc1acd6749c4', name: "label" }, this.label))), index.h("nv-popover", { key: '6019c2d41926414f7cb22d9c468c9102d376a192', ref: this.setPopoverRef, id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: '468aca7a419ee74bc06a33b6db1828d9f4d879d7', slot: "trigger", class: "input-wrapper" }, index.h("slot", { key: '7719e96c033ce988c2eb2a140933d41f6e0274f1', name: "before-input" }), index.h("div", { key: 'c9280aa0e17cbc7b11cfdf15523c2c02d7e21d7b', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '52a01c9fc92bf40435faf13b0492aab64d585adf', name: "leading-input" }), index.h("input", { key: '98701b6adb0eb857ed2411a96402874b41485055', id: this.inputId, ref: this.setInputRef, placeholder: this.placeholder ||
|
|
409
409
|
this.convertToInputmaskFormat(this.dateFormat), name: this.name, disabled: this.disabled, readOnly: this.readonly, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
|
|
410
410
|
'aria-required': String(ariaRequiredValue),
|
|
411
|
-
}), autofocus: this.autofocus, onInput: this.handleInput, onFocus: this.handleFocus, "data-scope": "date" }), this.error && (index.h("nv-icon", { key: '
|
|
411
|
+
}), autofocus: this.autofocus, onInput: this.handleInput, onFocus: this.handleFocus, "data-scope": "date" }), this.error && (index.h("nv-icon", { key: 'ce78e8ecefe12547f34304229201e4a2f7b313d6', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '512a15dca24742c33005e9beab9a4bafcd5c473e', name: "circle-check", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: '4ed638a61d62ce44b94effb942f3eab98d37c871', class: "toggle-calendar-icon", name: "calendar" //{this.open ? 'chevron-top' : 'chevron-down'}
|
|
412
412
|
,
|
|
413
|
-
size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), index.h("slot", { key: '
|
|
414
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
415
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
413
|
+
size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), index.h("slot", { key: '0cb23a55e9d8ac474f1c479d41ea95563cbe7a74', name: "after-input" })), index.h("div", { key: '62dfe1673077745f6cc90eb74d56ce00d11efa42', slot: "content" }, index.h("nv-calendar", { key: '033ad7d2c066741fb2178538da8b286c303b3f0f', onSingleDateChange: this.handleSingleDateChange.bind(this), dateFormat: this.dateFormat, singleValue: this.singleValue, firstDayOfWeek: this.firstDayOfWeek, numberOfCalendars: this.numberOfCalendars, min: this.min, max: this.max, locale: this.locale, shortcutsPlacement: this.shortcutsPlacement, showActions: this.showActions, shortcuts: this.shortcuts, showWeekNumbers: this.showWeekNumbers, disabledDates: this.disabledDates, onValueChanged: this.handleCalendarValueChanged }))), ((this.description && this.description.length > 0) ||
|
|
414
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'de333761b2cf725bbad48263c9b2f3b43d35e25d', class: "description" }, index.h("slot", { key: '9d10b90345e035fbf7b5cd1e8698f14560e704d5', name: "description" }, this.description))), (this.errorDescription ||
|
|
415
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '41ffe913883404441173d962461c5af824e4e27b', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (index.h("slot", { name: "error-description" })) : (this.errorDescription))), index.h("slot", { key: '0fb13823bd0fe37d1a1040cc1d6ef0b54982fa4c' })));
|
|
416
416
|
}
|
|
417
417
|
get el() { return index.getElement(this); }
|
|
418
418
|
static get watchers() { return {
|
package/dist/cjs/{nv-fielddaterange.entry-BvDkPLXG.js → nv-fielddaterange.entry-DkouN3iA.js}
RENAMED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-BRxlcrvE.js');
|
|
4
4
|
var inputmaskCSo292ul = require('./inputmask-CSo292ul-DlvupPk6.js');
|
|
5
5
|
var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
|
|
6
6
|
require('@stencil/react-output-target/runtime');
|
|
@@ -561,16 +561,16 @@ const NvFielddaterange = class {
|
|
|
561
561
|
? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
|
|
562
562
|
: undefined;
|
|
563
563
|
const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
|
|
564
|
-
return (index.h(index.Host, { key: '
|
|
565
|
-
this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '
|
|
564
|
+
return (index.h(index.Host, { key: '72eedbcf2b8150af17a0e13a86c64052b549df4f' }, ((this.label && this.label.length > 0) ||
|
|
565
|
+
this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '2d507287369342d26069438f814d2247f69a6eeb', htmlFor: this.startInputId }, index.h("slot", { key: 'f71c2562185885caaf171cdcc0d1a45a5a7c96bc', name: "label" }, this.label))), index.h("nv-popover", { key: '347378adcbad2af070de86932df99ea76a4f90d8', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: '999dd22805ca2b00fa6199361eccd72017aa99a9', slot: "trigger", class: "input-wrapper" }, index.h("slot", { key: 'ef74ae9271a4f27361fe4f86c721e53f5e4db338', name: "before-input" }), index.h("div", { key: '902ee11f0a85ce865de1b79f1e16e24f23acc696', class: "input-container" }, index.h("slot", { key: '353d326f48cf52c804216c5a4d693ad15c756eda', name: "leading-input" }), index.h("div", { key: 'f573a6474e1ffb54eac8dcff4b4ce809a72106b2', class: "range-inputs" }, index.h("input", { key: '0f68addf68a4bd26d9376b4cad6473330c463b1d', id: this.startInputId, type: "text", placeholder: this.startPlaceholder ||
|
|
566
566
|
this.convertToInputmaskFormat(this.dateFormat), name: this.startName, disabled: this.disabled, readOnly: this.readonly, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
|
|
567
567
|
'aria-required': String(ariaRequiredValue),
|
|
568
|
-
}), autofocus: this.autofocus, value: this.startValue, onInput: this.handleStartInput, onFocus: this.handleFocus, "data-scope": "date-range" }), index.h("div", { key: '
|
|
568
|
+
}), autofocus: this.autofocus, value: this.startValue, onInput: this.handleStartInput, onFocus: this.handleFocus, "data-scope": "date-range" }), index.h("div", { key: '7c4dea3b2844f542d09c5343890a057a198b8959', class: "range-separator" }), index.h("input", { key: 'e865a043d22ae844705c398bc989d76f03ba134b', id: this.endInputId, type: "text", placeholder: this.endPlaceholder ||
|
|
569
569
|
this.convertToInputmaskFormat(this.dateFormat), name: this.endName, disabled: this.disabled, readOnly: this.readonly, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
|
|
570
570
|
'aria-required': String(ariaRequiredValue),
|
|
571
|
-
}), value: this.endValue, onInput: this.handleEndInput, onFocus: this.handleFocus, "data-scope": "date-range" })), this.error && (index.h("nv-icon", { key: '
|
|
572
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
573
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
571
|
+
}), value: this.endValue, onInput: this.handleEndInput, onFocus: this.handleFocus, "data-scope": "date-range" })), this.error && (index.h("nv-icon", { key: '2487913e0ca5887989d59ecf36b54597d825f519', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '16fd2d6a50045042e92327c73af572e0569f5538', name: "circle-check", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: 'e1e8024fd38d402e774d33ea46e81217680e81f1', class: "toggle-calendar-icon", name: "calendar", size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), index.h("slot", { key: 'fb7bb98c40a92294cb8dae80b2148ac21c032389', name: "after-input" })), index.h("div", { key: '93537a1973acddbec91a051fd75d59da68851e0f', slot: "content" }, index.h("nv-calendar", { key: 'abbf6ec3e5934fe4e8d0e5bab097633b5dca1f13', ref: el => (this.calendarElement = el), onRangeDateChange: this.handleRangeDateChange.bind(this), onValueChanged: this.handleCalendarValueChanged.bind(this), onSingleDateChange: this.handleCancelDateChange.bind(this), dateFormat: this.dateFormat, value: this.value, firstDayOfWeek: this.firstDayOfWeek, numberOfCalendars: this.numberOfCalendars, min: this.min, max: this.max, locale: this.locale, shortcutsPlacement: this.shortcutsPlacement, showActions: this.showActions, shortcuts: this.shortcuts, showWeekNumbers: this.showWeekNumbers, disabledDates: this.disabledDates, selectionType: "range", "data-prevent-navigation": "true" }))), ((this.description && this.description.length > 0) ||
|
|
572
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '4783e7960e12b88d183f72b63e8f96d4d71b1a49', class: "description" }, index.h("slot", { key: '2f33e315d94e9fadb05d2d83b6291a93815f3b04', name: "description" }, this.description))), (this.errorDescription ||
|
|
573
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '4acabd61332b519bd969feea19736a5dd9664f9d', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (index.h("slot", { name: "error-description" })) : (this.errorDescription))), index.h("slot", { key: '6fe455b36e2ae0288a1d202057414da2450fc8ca' })));
|
|
574
574
|
}
|
|
575
575
|
get el() { return index.getElement(this); }
|
|
576
576
|
static get watchers() { return {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-BRxlcrvE.js');
|
|
4
4
|
var i18n_utilsCR9MpYzU = require('./i18n.utils-CR9MpYzU-ku0bScip.js');
|
|
5
5
|
var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
|
|
6
6
|
require('@stencil/react-output-target/runtime');
|
|
@@ -14,6 +14,7 @@ const NvFielddropdown = class {
|
|
|
14
14
|
index.registerInstance(this, hostRef);
|
|
15
15
|
this.valueChanged = index.createEvent(this, "valueChanged", 3);
|
|
16
16
|
this.filterTextChanged = index.createEvent(this, "filterTextChanged", 3);
|
|
17
|
+
this.cleared = index.createEvent(this, "cleared", 3);
|
|
17
18
|
this.openChanged = index.createEvent(this, "openChanged", 3);
|
|
18
19
|
this.dropdownItemSelected = index.createEvent(this, "dropdownItemSelected", 7);
|
|
19
20
|
/** Pre-computed search index for efficient filtering */
|
|
@@ -85,6 +86,13 @@ const NvFielddropdown = class {
|
|
|
85
86
|
* Enables or disables the filtering feature for the dropdown items.
|
|
86
87
|
*/
|
|
87
88
|
this.filterable = false;
|
|
89
|
+
/**
|
|
90
|
+
* Shows the inline clear (×) button when a value is selected (or when
|
|
91
|
+
* filterable and the user has typed). The programmatic `clear()` method
|
|
92
|
+
* works regardless of this prop — leave it off when you want to manage
|
|
93
|
+
* clearing the selection from outside the component.
|
|
94
|
+
*/
|
|
95
|
+
this.clearable = false;
|
|
88
96
|
/**
|
|
89
97
|
* When an item is selected by the user, the dropdown will continue to stay
|
|
90
98
|
* open.
|
|
@@ -178,10 +186,35 @@ const NvFielddropdown = class {
|
|
|
178
186
|
if (!this.el?.contains(event.target))
|
|
179
187
|
this.open = false;
|
|
180
188
|
};
|
|
189
|
+
/**
|
|
190
|
+
* Handles clicks on the inline clear button. When a value is already
|
|
191
|
+
* selected and the user has typed in a filter, clearing should dismiss
|
|
192
|
+
* the filter and revert the input to the selected label rather than
|
|
193
|
+
* wipe the selection. Always emits `cleared` so subscribers see one
|
|
194
|
+
* consistent signal regardless of which path ran.
|
|
195
|
+
* @param {MouseEvent} [event] - The click event from the clear button.
|
|
196
|
+
*/
|
|
197
|
+
this.handleClearButtonClick = (event) => {
|
|
198
|
+
// Keyboard-activated clicks have detail === 0; mouse clicks are >= 1.
|
|
199
|
+
// We only restore focus on keyboard activation so we don't steal focus
|
|
200
|
+
// from mouse users (and we don't reopen a closed popover via the focus
|
|
201
|
+
// listener on mouse clicks).
|
|
202
|
+
const isKeyboard = event?.detail === 0;
|
|
203
|
+
if (this.value && this.filterable && this.filterText?.length > 0) {
|
|
204
|
+
this.clearFilter();
|
|
205
|
+
this.cleared.emit();
|
|
206
|
+
if (isKeyboard)
|
|
207
|
+
this.focusField();
|
|
208
|
+
return;
|
|
209
|
+
}
|
|
210
|
+
this.clear();
|
|
211
|
+
if (isKeyboard)
|
|
212
|
+
this.focusField();
|
|
213
|
+
};
|
|
181
214
|
this.handleFilterInput = () => {
|
|
182
215
|
this.open = true;
|
|
183
|
-
this.filterText = this.inputElement
|
|
184
|
-
this.filterTextChanged.emit(this.
|
|
216
|
+
this.filterText = this.inputElement?.value ?? '';
|
|
217
|
+
this.filterTextChanged.emit(this.filterText);
|
|
185
218
|
clearTimeout(this.debounceTimer);
|
|
186
219
|
// Use longer debounce for fuzzy mode (Fuse.js needs more time)
|
|
187
220
|
// For fuzzy mode, use FUZZY_DEBOUNCE_DELAY (300ms), otherwise use this.debounceDelay
|
|
@@ -197,12 +230,12 @@ const NvFielddropdown = class {
|
|
|
197
230
|
return '';
|
|
198
231
|
if (this.filterText?.length)
|
|
199
232
|
return this.filterText;
|
|
200
|
-
if (this.options?.length > 1) {
|
|
201
|
-
const matchingItem = this.options
|
|
233
|
+
if ((this.options?.length ?? 0) > 1) {
|
|
234
|
+
const matchingItem = this.options?.find(option => option.value === this.value);
|
|
202
235
|
return matchingItem?.label ?? matchingItem?.value ?? this.value;
|
|
203
236
|
}
|
|
204
237
|
const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem'));
|
|
205
|
-
const matchingItem =
|
|
238
|
+
const matchingItem = this.findItemMatchingValue(items);
|
|
206
239
|
const selectedLabel = matchingItem
|
|
207
240
|
? matchingItem.label ??
|
|
208
241
|
matchingItem.textContent?.trim() ??
|
|
@@ -259,8 +292,13 @@ const NvFielddropdown = class {
|
|
|
259
292
|
event.relatedTarget.tagName.includes('NV-FIELDDROPDOWNITEM')) {
|
|
260
293
|
return;
|
|
261
294
|
}
|
|
262
|
-
|
|
263
|
-
|
|
295
|
+
// Toggle and clear are inline controls inside the trigger that should
|
|
296
|
+
// not open the popover when focused (keyboard or otherwise).
|
|
297
|
+
if (event.target === this.toggleElement)
|
|
298
|
+
return;
|
|
299
|
+
if (event.target === this.clearElement)
|
|
300
|
+
return;
|
|
301
|
+
this.open = true;
|
|
264
302
|
}
|
|
265
303
|
handleFocusOut(event) {
|
|
266
304
|
if (!(event.relatedTarget instanceof Node))
|
|
@@ -317,6 +355,32 @@ const NvFielddropdown = class {
|
|
|
317
355
|
this.setFilterInputToSelectedValue();
|
|
318
356
|
}, 0);
|
|
319
357
|
}
|
|
358
|
+
/**
|
|
359
|
+
* Clears the current selection. Resets the value to an empty string,
|
|
360
|
+
* removes the selected state from items, clears the filter text (when
|
|
361
|
+
* filterable) and emits `valueChanged` (and `filterTextChanged` when the
|
|
362
|
+
* filter was reset). Emits `cleared` when anything was actually reset.
|
|
363
|
+
*/
|
|
364
|
+
async clear() {
|
|
365
|
+
const hadValue = Boolean(this.value);
|
|
366
|
+
const hadFilterText = this.filterable && this.filterText?.length > 0;
|
|
367
|
+
if (hadValue) {
|
|
368
|
+
this.value = '';
|
|
369
|
+
this.valueChanged.emit('');
|
|
370
|
+
}
|
|
371
|
+
if (hadFilterText) {
|
|
372
|
+
this.filterText = '';
|
|
373
|
+
this.filterTextChanged.emit('');
|
|
374
|
+
this.filterItems();
|
|
375
|
+
}
|
|
376
|
+
if (hadValue || hadFilterText) {
|
|
377
|
+
this.cleared.emit();
|
|
378
|
+
}
|
|
379
|
+
// Wait for wrapper lifecycle to finish before resetting input display.
|
|
380
|
+
setTimeout(() => {
|
|
381
|
+
this.setFilterInputToSelectedValue();
|
|
382
|
+
}, 0);
|
|
383
|
+
}
|
|
320
384
|
/**
|
|
321
385
|
* Toggles the dropdown popover open state
|
|
322
386
|
* @param {boolean} open - The open state to set, if null, toggles the state
|
|
@@ -345,6 +409,21 @@ const NvFielddropdown = class {
|
|
|
345
409
|
return (this.inputElement.value = '');
|
|
346
410
|
this.inputElement.value = this.getSelectedLabel();
|
|
347
411
|
}
|
|
412
|
+
/**
|
|
413
|
+
* Finds the item that matches the current value. Falls back to matching by
|
|
414
|
+
* label when no item matches by value, so that consumers who pass a value
|
|
415
|
+
* matching only the label (e.g. `<nv-fielddropdownitem label="Item 2">`
|
|
416
|
+
* with `value="Item 2"`) still get the correct selected item.
|
|
417
|
+
* @param {HTMLNvFielddropdownitemElement[]} items - The dropdown items to search.
|
|
418
|
+
* @returns {HTMLNvFielddropdownitemElement | undefined} The matching item, or undefined if no match is found.
|
|
419
|
+
*/
|
|
420
|
+
findItemMatchingValue(items) {
|
|
421
|
+
if (!this.value)
|
|
422
|
+
return undefined;
|
|
423
|
+
const value = this.value;
|
|
424
|
+
return (items.find(item => item.value === value) ??
|
|
425
|
+
items.find(item => item.label === value));
|
|
426
|
+
}
|
|
348
427
|
// Will exclude detached items and data-empty
|
|
349
428
|
getFilterableItems() {
|
|
350
429
|
return Array.from(this.el.querySelectorAll('nv-fielddropdownitem:not([data-empty]):not([detached])'));
|
|
@@ -589,16 +668,10 @@ const NvFielddropdown = class {
|
|
|
589
668
|
}
|
|
590
669
|
async updateSelectedItem() {
|
|
591
670
|
const items = this.getAllItems();
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
}
|
|
597
|
-
else {
|
|
598
|
-
item.selected = false;
|
|
599
|
-
}
|
|
600
|
-
});
|
|
601
|
-
}
|
|
671
|
+
const matchingItem = this.findItemMatchingValue(items);
|
|
672
|
+
items.forEach(item => {
|
|
673
|
+
item.selected = Boolean(this.value) && item === matchingItem;
|
|
674
|
+
});
|
|
602
675
|
}
|
|
603
676
|
//#endregion METHODS
|
|
604
677
|
/****************************************************************************/
|
|
@@ -616,7 +689,9 @@ const NvFielddropdown = class {
|
|
|
616
689
|
componentDidRender() {
|
|
617
690
|
// Make sure to show the value when the field is disabled or readonly
|
|
618
691
|
// as we switch to an input instead of a p in that case
|
|
619
|
-
if (!this.filterable &&
|
|
692
|
+
if (!this.filterable &&
|
|
693
|
+
(this.disabled || this.readonly) &&
|
|
694
|
+
this.inputElement) {
|
|
620
695
|
this.inputElement.value = this.getSelectedLabel();
|
|
621
696
|
}
|
|
622
697
|
}
|
|
@@ -655,11 +730,14 @@ const NvFielddropdown = class {
|
|
|
655
730
|
? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
|
|
656
731
|
: undefined;
|
|
657
732
|
const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
|
|
658
|
-
return (index.h(index.Host, { key: '
|
|
733
|
+
return (index.h(index.Host, { key: '83aecee12e5f0fea2ddc293f1631dc4e55ab3764', 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: 'adfef46ef0163fb3c902df5df70b5c591a6dd7e1', htmlFor: this.inputId, onClick: this.syncToggleDropdown.bind(this) }, index.h("slot", { key: 'ed6bd8cc6fcace8604f934ba197c31589bf5e296', name: "label" }, this.label))), index.h("nv-popover", { key: '9dfa5dd021c2d0803a35b79fd58dd70422dbe6f0', triggerMode: "controlled", placement: "bottom-start", open: this.open, onOpenChanged: e => this.openChanged.emit(e.detail) }, index.h("div", { key: '62024e3fae662f316a932cce628e58e6917fc624', class: "input-wrapper", slot: "trigger" }, index.h("slot", { key: '61fe57f847075dc6e1447cc377e7e8f828700b43', name: "before-input" }), index.h("div", { key: '8139ffe5b0b7d37781c2b435ed1b9c94f2eea9de', class: "input-container" }, index.h("slot", { key: 'ab2515724a53a1b9e4081bd1944130cd435a0a92', 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
734
|
'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.
|
|
661
|
-
this.
|
|
662
|
-
this.
|
|
735
|
+
}), 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.clearable &&
|
|
736
|
+
!this.disabled &&
|
|
737
|
+
!this.readonly &&
|
|
738
|
+
(this.value || (this.filterable && this.filterText)) && (index.h("nv-iconbutton", { key: 'b467a3949af859fe4e9d19f810a19a8e1d1834c9', ref: el => (this.clearElement = el), "data-scope": "clear", name: "x", size: "md", emphasis: "lower", class: "clear-button", onMouseDown: (e) => e.preventDefault(), onClick: this.handleClearButtonClick, "aria-label": this.value ? 'Clear selection' : 'Clear input', title: this.value ? 'Clear selection' : 'Clear input' })), this.error && (index.h("nv-icon", { key: '2c05d617da93adddd4994c3063b0e6fe7be017c7', name: "alert-circle", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: '372a295a58b391a61d240d5133b427c3ddf1edba', "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: '95db16c591f0bf7dec95550260b9d6bcd7e084a9', name: "after-input" })), index.h("div", { key: '46372589dee8ff8509570bd1a3cc33763cf17869', slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, (this.options?.length ?? 0) > 0 && (index.h("ul", { key: 'dc2840ef3e798291e49ae179a978c5b3d277ffa2' }, 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: '750ef13e5911fe9bfc9a277b24150a1d3e631d4d', name: "content" }))), (this.description ||
|
|
739
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '34e1fbd85f790f0ea38502d10daadabf2c26c493', class: "description" }, index.h("slot", { key: '248779124cefa199c5ee3b664c1a26ddfab0d849', name: "description" }, this.description))), (this.errorDescription ||
|
|
740
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'dff99dce8c08ca76a620cf199147a72a0624b3be', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'fcdbc2a466f9d13593a5fb6d7a2ba719b0df19dd', name: "error-description" }, this.errorDescription)))));
|
|
663
741
|
}
|
|
664
742
|
static get formAssociated() { return true; }
|
|
665
743
|
get el() { return index.getElement(this); }
|
package/dist/cjs/{nv-fielddropdownitem.entry-Dxqyb9DN.js → nv-fielddropdownitem.entry-CmdskK1s.js}
RENAMED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-BRxlcrvE.js');
|
|
4
4
|
require('@stencil/react-output-target/runtime');
|
|
5
5
|
require('react');
|
|
6
6
|
require('react-dom');
|
|
@@ -60,7 +60,7 @@ const NvFielddropdownitem = class {
|
|
|
60
60
|
/****************************************************************************/
|
|
61
61
|
//#region RENDER
|
|
62
62
|
render() {
|
|
63
|
-
return (index.h(index.Host, { key: '
|
|
63
|
+
return (index.h(index.Host, { key: '9931decf5664d77d8c164859bc4046ca313e13a9', role: "menuitem", tabindex: '-1', onClick: this.handleSelected }, this.selected && (index.h("nv-icon", { key: 'aba64f319fb37bc8f471ebd65d00d0f17158fe41', name: "check", "aria-hidden": "true", "data-scope": "selected" })), index.h("slot", { key: 'ffafa2e39d704caa576d59bba459503be10f4ffc' }, index.h("div", { key: '065293dca56bfaec8f89910f88b92a52907fcf28', class: "text-wrapper" }, index.h("span", { key: '2f85b57db26203bc19b32047707f9281a6d906a0', "data-scope": "text" }, this.label)))));
|
|
64
64
|
}
|
|
65
65
|
get el() { return index.getElement(this); }
|
|
66
66
|
};
|
package/dist/cjs/{nv-fieldmultiselect.entry-CgO1RP0W.js → nv-fieldmultiselect.entry-Bc6YFUA_.js}
RENAMED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-BRxlcrvE.js');
|
|
4
4
|
var i18n_utilsCR9MpYzU = require('./i18n.utils-CR9MpYzU-ku0bScip.js');
|
|
5
5
|
var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
|
|
6
6
|
require('@stencil/react-output-target/runtime');
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-BRxlcrvE.js');
|
|
4
4
|
var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
|
|
5
5
|
require('@stencil/react-output-target/runtime');
|
|
6
6
|
require('react');
|
|
@@ -170,11 +170,11 @@ const NvFieldnumber = class {
|
|
|
170
170
|
? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
|
|
171
171
|
: undefined;
|
|
172
172
|
const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
|
|
173
|
-
return (index.h(index.Host, { key: '
|
|
173
|
+
return (index.h(index.Host, { key: 'bd60dd6875bab03a11f68c8cdeb40503dd11387b' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '9b11d71766cb20870e42e3d86509c30ec0bbc1df', htmlFor: this.inputId }, index.h("slot", { key: 'b1b84003346a9d9240a9a2072629701545eb8a4e', name: "label" }, this.label))), index.h("div", { key: 'de3100bb6e5d0befca657857b5011929621c0856', class: "input-wrapper" }, index.h("slot", { key: 'ae056ee9445d741e449ad926b998614e45268dd1', name: "before-input" }), index.h("div", { key: 'ec029f917a8472d207776b279e2a9ae2ed3c87d2', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '3156846b24658fb8b033345038ba8a19e5ed39cf', name: "leading-input" }), index.h("input", { key: '9978de0b82a67650629ccedc7f400d7f3e17810f', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: "number", autofocus: this.autofocus, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
|
|
174
174
|
'aria-required': String(ariaRequiredValue),
|
|
175
|
-
}), max: this.max, min: this.min, step: this.step, value: typeof this.value === 'number' ? this.value : undefined, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), index.h("slot", { key: '
|
|
176
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
177
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
175
|
+
}), max: this.max, min: this.min, step: this.step, value: typeof this.value === 'number' ? this.value : undefined, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), index.h("slot", { key: '6a65f9360ac4aae869f47a386f964d7121ee62b7', name: "trailing-input" }), this.error && (index.h("nv-icon", { key: '3f6d5f2ac11907170c57fffa8e080adaa9f2445d', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: 'f47db690daa520fe1611a72ef52bd4e8824843e0', name: "circle-check", class: "validation", size: "md" })), index.h("div", { key: '97d545f25f81e0089fadd33c53caf38aa8dbda85', class: "stepper" }, index.h("nv-iconbutton", { key: 'fa6e78061e8f90564aaed2416ee27996cbddf794', size: "md", name: "minus", emphasis: "lower", onClick: this.handleMinus, disabled: this.isMinValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }), index.h("nv-iconbutton", { key: 'efca8a29e9c5af8136ab557744e9642b60717915', size: "md", name: "plus", emphasis: "lower", onClick: this.handlePlus, disabled: this.isMaxValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }))), index.h("slot", { key: 'b99033fd0ecfbca1c791e1f0ad867fab41fc2716', name: "after-input" })), (this.description ||
|
|
176
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'fd843a1bb551f1d706de5045658356582667048d', class: "description" }, index.h("slot", { key: 'e9e1699a36a6485063eb4d90f920b1b48a03c280', name: "description" }, this.description))), (this.errorDescription ||
|
|
177
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '7216797fc4a37dee59086111e9160401f5567c09', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '93cee823eec935644372d062db6cd009a2f16357', name: "error-description" }, this.errorDescription)))));
|
|
178
178
|
}
|
|
179
179
|
static get formAssociated() { return true; }
|
|
180
180
|
get el() { return index.getElement(this); }
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-BRxlcrvE.js');
|
|
4
4
|
var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
|
|
5
5
|
require('@stencil/react-output-target/runtime');
|
|
6
6
|
require('react');
|
|
@@ -148,11 +148,11 @@ const NvFieldpassword = class {
|
|
|
148
148
|
? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
|
|
149
149
|
: undefined;
|
|
150
150
|
const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
|
|
151
|
-
return (index.h(index.Host, { key: '
|
|
151
|
+
return (index.h(index.Host, { key: 'e24affee3586427a9d7b2dbf2205dc4ac62b7491' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '3ce9065dc2d72992d5c6e3e856df4c1447717ed2', htmlFor: this.inputId }, index.h("slot", { key: 'ed16a44bfdcf67f371d0a1f083bc0d6e6009350b', name: "label" }, this.label))), index.h("div", { key: 'b43e17d340383e0b70bcb4fb5fa061d479baf46a', class: "input-wrapper" }, index.h("slot", { key: '2f101c6bf63c88fc4a6ad8aee5622097c133245b', name: "before-input" }), index.h("div", { key: '37fe8f5efd8f4374b9a237f4f5d1ebe9af9f6e05', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '4ca0f2ce27bded082e2fe49598ef6310db1ac0b3', name: "leading-input" }), index.h("input", { key: '302e86558f7843f44486b47987d37df6ac7f50ac', id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, type: this.showPasswordState ? 'text' : 'password', inputMode: this.mode, value: this.value, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
|
|
152
152
|
'aria-required': String(ariaRequiredValue),
|
|
153
|
-
}), maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), (this.success || this.error) && (index.h("nv-icon", { key: '
|
|
154
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
155
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
153
|
+
}), maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), (this.success || this.error) && (index.h("nv-icon", { key: 'c8874ce153ceddb132f9be42178bd3ff150005d2', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" })), !this.hidePasswordIcon && (index.h("nv-iconbutton", { key: '90b7e1f592e67ea60194b581931fa842af695ef4', name: this.showPasswordState ? 'eye' : 'eye-off', size: "md", emphasis: "lower", onClick: this.togglePasswordVisibility, "aria-label": this.showPasswordState ? 'Hide password' : 'Show password', "aria-pressed": this.showPasswordState.toString() }))), index.h("slot", { key: '71add973e9ce73cc172d074492a9dbb2c20caaf9', name: "after-input" })), (this.description ||
|
|
154
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'c2d8551e86c028619f2c7c810597353df24cf83a', class: "description" }, index.h("slot", { key: '8ebe471324eba4eb9734ccd5a3aa600cc44512d9', name: "description" }, this.description))), (this.errorDescription ||
|
|
155
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '71d0c4737a51c030ba8ca859d1fd0b26d5a48772', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '70e23fc8738958e2f2518079e0289a5a839903cd', name: "error-description" }, this.errorDescription)))));
|
|
156
156
|
}
|
|
157
157
|
static get formAssociated() { return true; }
|
|
158
158
|
get el() { return index.getElement(this); }
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-BRxlcrvE.js');
|
|
4
4
|
var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
|
|
5
5
|
var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
|
|
6
6
|
require('@stencil/react-output-target/runtime');
|
|
@@ -88,9 +88,9 @@ const NvFieldradio = class {
|
|
|
88
88
|
/****************************************************************************/
|
|
89
89
|
//#region RENDER
|
|
90
90
|
render() {
|
|
91
|
-
return (index.h(index.Host, { key: '
|
|
92
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
93
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
91
|
+
return (index.h(index.Host, { key: '53e418bfab22c9019f8efae9e474e6e729532a73', class: clsxChV9xqsO.clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, index.h("input", { key: '85ab7c010dfa893e9e92bebd39b845a604ca0069', type: "radio", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: this.checked, disabled: this.disabled }), index.h("div", { key: '851587d22af2d0739e5531f361cbefe3e282b914', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '475cad34dea78bd00bf822ccafbfb18ddba4264a', htmlFor: this.inputId }, index.h("slot", { key: 'd6c84f56f1913d97e71ce79fd112362f4880acd0', name: "label" }, this.label))), (this.description ||
|
|
92
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '8e1f4d0e9cbd00630cadde99923f2952d4dd492c', class: "description" }, index.h("slot", { key: 'dea3d8661dc83a237a8d290e02b365ea47491b51', name: "description" }, this.description))), (this.errorDescription ||
|
|
93
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'f67d73864db0c32013605343ac22f451b37047e9', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'ebd467b48c874db8b3649ec940d950f0d2218417', name: "error-description" }, this.errorDescription))))));
|
|
94
94
|
}
|
|
95
95
|
static get formAssociated() { return true; }
|
|
96
96
|
get el() { return index.getElement(this); }
|