@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.
Files changed (86) hide show
  1. package/dist/cjs/{constants-BReL3Lsa-DpB_ghPF.js → constants-gOKBmbgZ-CSoZ8z-G.js} +5 -0
  2. package/dist/cjs/generated/components.server.js +35 -1
  3. package/dist/cjs/index-BRxlcrvE.js +10395 -0
  4. package/dist/cjs/index.js +7 -1
  5. package/dist/cjs/{nv-accordion-item.entry-D1o0gC5w.js → nv-accordion-item.entry-DWi_bEQx.js} +3 -3
  6. package/dist/cjs/{nv-accordion.entry-DYJtq9Az.js → nv-accordion.entry-Bgn2CRYE.js} +2 -2
  7. package/dist/cjs/{nv-alert.entry-CMtCdHmk.js → nv-alert.entry-tkzdxYo4.js} +8 -8
  8. package/dist/cjs/{nv-avatar.entry-B6e7aG4W.js → nv-avatar.entry-C6xqQhws.js} +8 -8
  9. package/dist/cjs/{nv-badge_2.entry-RD3j0bJM.js → nv-badge_2.entry-poMKx9km.js} +5 -5
  10. package/dist/cjs/{nv-breadcrumb.entry-DgpqY2fr.js → nv-breadcrumb.entry-BTBUN3X8.js} +2 -2
  11. package/dist/cjs/{nv-breadcrumbs.entry-CZgcDUw5.js → nv-breadcrumbs.entry-DXdb_Gzf.js} +2 -2
  12. package/dist/cjs/{nv-button.entry-DR9NaRxG.js → nv-button.entry-IYrV4dVV.js} +7 -7
  13. package/dist/cjs/{nv-buttongroup.entry-qO8r7WqG.js → nv-buttongroup.entry-DpMhGqzQ.js} +2 -2
  14. package/dist/cjs/{nv-calendar.entry-DRlv3Xph.js → nv-calendar.entry-Clp-qYdU.js} +9 -9
  15. package/dist/cjs/{nv-col.entry-B7utJttP.js → nv-col.entry-BgIpEdn6.js} +2 -2
  16. package/dist/cjs/{nv-datagrid.entry-digYmlnA.js → nv-datagrid.entry-CmnSlQEN.js} +8 -8
  17. package/dist/cjs/{nv-datagridcolumn.entry-UwaDi-Hr.js → nv-datagridcolumn.entry-CfaOqHSs.js} +2 -2
  18. package/dist/cjs/{nv-datetest.entry-BJtWaM2T.js → nv-datetest.entry-DL0WPAUH.js} +2 -2
  19. package/dist/cjs/{nv-datetimetest.entry-WaNPcHxh.js → nv-datetimetest.entry-DoABznI1.js} +1 -1
  20. package/dist/cjs/{nv-dialog.entry-BI_mFT2G.js → nv-dialog.entry-C95UrJIU.js} +3 -3
  21. package/dist/cjs/{nv-dialogfooter_2.entry-DU2ClBUR.js → nv-dialogfooter_2.entry-Ccml86Uw.js} +6 -6
  22. package/dist/cjs/{nv-drawer.entry-BKF4CyOt.js → nv-drawer.entry-cXCjYVTV.js} +3 -3
  23. package/dist/cjs/{nv-drawerfooter_2.entry-BSyUs7_4.js → nv-drawerfooter_2.entry-Dq0IblnH.js} +6 -6
  24. package/dist/cjs/{nv-fieldcheckbox.entry-l5FWToQi.js → nv-fieldcheckbox.entry-CnP54xin.js} +5 -5
  25. package/dist/cjs/{nv-fielddate.entry-BfviesNp.js → nv-fielddate.entry-DZY75-mm.js} +7 -7
  26. package/dist/cjs/{nv-fielddaterange.entry-BvDkPLXG.js → nv-fielddaterange.entry-DkouN3iA.js} +7 -7
  27. package/dist/cjs/{nv-fielddropdown.entry-B-nYjuMt.js → nv-fielddropdown.entry-Bc3bobvr.js} +101 -23
  28. package/dist/cjs/{nv-fielddropdownitem.entry-Dxqyb9DN.js → nv-fielddropdownitem.entry-CmdskK1s.js} +2 -2
  29. package/dist/cjs/{nv-fieldmultiselect.entry-CgO1RP0W.js → nv-fieldmultiselect.entry-Bc6YFUA_.js} +1 -1
  30. package/dist/cjs/{nv-fieldnumber.entry-stgdLi7x.js → nv-fieldnumber.entry-DwvjJfV9.js} +5 -5
  31. package/dist/cjs/{nv-fieldpassword.entry-CHA3JAUd.js → nv-fieldpassword.entry-CUI2Jm-V.js} +5 -5
  32. package/dist/cjs/{nv-fieldradio.entry-DHavVjB-.js → nv-fieldradio.entry-CnLCvLBh.js} +4 -4
  33. package/dist/cjs/{nv-fieldselect.entry-Dq5AsOFt.js → nv-fieldselect.entry-DunLjNwe.js} +45 -7
  34. package/dist/cjs/{nv-fieldslider.entry-SlF3BBUW.js → nv-fieldslider.entry-Cp-6fToR.js} +4 -4
  35. package/dist/cjs/{nv-fieldtext.entry-BYCc8SyD.js → nv-fieldtext.entry-FJk12WoX.js} +5 -5
  36. package/dist/cjs/{nv-fieldtextarea.entry-96JCOb9L.js → nv-fieldtextarea.entry-Ci9B5-DX.js} +4 -4
  37. package/dist/cjs/{nv-fieldtime.entry-BdzjxkaK.js → nv-fieldtime.entry-DCSdECWn.js} +44 -44
  38. package/dist/cjs/{nv-icon.entry-CSRxi6BH.js → nv-icon.entry-DB18IDaU.js} +9 -9
  39. package/dist/cjs/{nv-iconbutton_2.entry-BtDxwMFD.js → nv-iconbutton_2.entry-CNR_poEm.js} +3 -3
  40. package/dist/cjs/{nv-menu.entry-aX39SPH8.js → nv-menu.entry-CxXHuTq3.js} +2 -2
  41. package/dist/cjs/{nv-menuitem.entry-DzSp52G2.js → nv-menuitem.entry-44XD7nfl.js} +2 -2
  42. package/dist/cjs/{nv-notification-bullet.entry-D2yOXj46.js → nv-notification-bullet.entry-Cn2OELYw.js} +1 -1
  43. package/dist/cjs/{nv-notification.entry-BRXHbtT8.js → nv-notification.entry-C8beqUzI.js} +19 -19
  44. package/dist/cjs/{nv-notificationcontainer.entry-YNIM2_ah.js → nv-notificationcontainer.entry-DgEstiLX.js} +2 -2
  45. package/dist/cjs/{nv-pagination-nav.entry-uY1nT9aT.js → nv-pagination-nav.entry-CIZPwFeF.js} +2 -2
  46. package/dist/cjs/{nv-paginationtable.entry-mr5KYXVC.js → nv-paginationtable.entry-woQZpVmb.js} +19 -3
  47. package/dist/cjs/{nv-popover.entry-_9ARKM70.js → nv-popover.entry-rHUUSzR-.js} +2 -2
  48. package/dist/cjs/{nv-row.entry-BMQvcqlU.js → nv-row.entry-DaERf8TD.js} +2 -2
  49. package/dist/cjs/nv-sidebar.entry-BI9me_HP.js +355 -0
  50. package/dist/cjs/{nv-sidebarcontent.entry-llnRwVuj.js → nv-sidebarcontent.entry-CtARsnjy.js} +2 -2
  51. package/dist/cjs/{nv-sidebardivider.entry--rQv8d5T.js → nv-sidebardivider.entry-C15Xk11m.js} +2 -2
  52. package/dist/cjs/{nv-sidebarfooter.entry-C5R0sUI_.js → nv-sidebarfooter.entry-DFMMvv_Q.js} +2 -2
  53. package/dist/cjs/{nv-sidebargroup.entry-DdrpLbU7.js → nv-sidebargroup.entry-DeWOA-0I.js} +2 -2
  54. package/dist/cjs/{nv-sidebarheader.entry-HuBPIsyf.js → nv-sidebarheader.entry-HtvbpvnX.js} +2 -2
  55. package/dist/cjs/{nv-sidebarlogo.entry-TZNPoqnA.js → nv-sidebarlogo.entry-Zxbpttzr.js} +2 -2
  56. package/dist/cjs/{nv-sidebarnavitem.entry-BWc3mF5I.js → nv-sidebarnavitem.entry-u4rbC1el.js} +3 -3
  57. package/dist/cjs/{nv-sidebarnavsubitem.entry-DekANwO8.js → nv-sidebarnavsubitem.entry-UouMn7hU.js} +2 -2
  58. package/dist/cjs/{nv-split.entry-BOwOB8FW.js → nv-split.entry-CUMbQNQB.js} +2 -2
  59. package/dist/cjs/{nv-stack.entry-CaTiSLGN.js → nv-stack.entry-D_F42KTD.js} +2 -2
  60. package/dist/cjs/nv-statusindicator.entry-BdRvU3iW.js +42 -0
  61. package/dist/cjs/{nv-table.entry-LFZaS0Dy.js → nv-table.entry-CKVH76OE.js} +3 -3
  62. package/dist/cjs/{nv-tableheader.entry-CK50S8xW.js → nv-tableheader.entry-btKwE14F.js} +2 -2
  63. package/dist/cjs/nv-tag.entry-BxYC7Lgo.js +85 -0
  64. package/dist/cjs/{nv-timetest.entry-A9elKwkf.js → nv-timetest.entry-CxXMIDZ_.js} +2 -2
  65. package/dist/cjs/{nv-toggle.entry-BGu-6rEs.js → nv-toggle.entry-C4uo7RRt.js} +3 -3
  66. package/dist/cjs/{nv-togglebutton.entry-BzAcBOgN.js → nv-togglebutton.entry-DJ-s5lgO.js} +2 -2
  67. package/dist/cjs/{nv-togglebuttongroup.entry-CIWp7IXc.js → nv-togglebuttongroup.entry-DJOCL_Qx.js} +2 -2
  68. package/dist/cjs/{nv-tooltip.entry-CoGkSHpv.js → nv-tooltip.entry-DndZWT1U.js} +2 -2
  69. package/dist/components/NvDatatable/NvDatatable.js +178 -61
  70. package/dist/components/NvDatatable/expandState.js +8 -0
  71. package/dist/components/NvDatatable/expandState.test.js +41 -0
  72. package/dist/components/NvDatatable/paginationState.js +9 -0
  73. package/dist/components/NvDatatable/paginationState.test.js +84 -0
  74. package/dist/generated/components.js +25 -2
  75. package/dist/generated/components.server.js +33 -1
  76. package/dist/types/components/NvDatatable/NvDatatable.d.ts +1 -1
  77. package/dist/types/components/NvDatatable/expandState.d.ts +5 -0
  78. package/dist/types/components/NvDatatable/expandState.test.d.ts +1 -0
  79. package/dist/types/components/NvDatatable/paginationState.d.ts +9 -0
  80. package/dist/types/components/NvDatatable/paginationState.test.d.ts +1 -0
  81. package/dist/types/components/NvDatatable/types.d.ts +17 -1
  82. package/dist/types/generated/components.d.ts +14 -1
  83. package/dist/types/generated/components.server.d.ts +14 -1
  84. package/package.json +1 -1
  85. package/dist/cjs/index-DgKzi_Pd.js +0 -10208
  86. package/dist/cjs/nv-sidebar.entry-C4HTjJmz.js +0 -181
@@ -1,7 +1,7 @@
1
1
  'use strict';
2
2
 
3
- var index = require('./index-DgKzi_Pd.js');
4
- var constantsBReL3Lsa = require('./constants-BReL3Lsa-DpB_ghPF.js');
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
- ? constantsBReL3Lsa.ButtonType.Submit
89
- : constantsBReL3Lsa.ButtonType.Button;
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: '280e30ae22c734269f8181a96ac0418d2c3bd5db' }, index.h("slot", { key: '9e435bc05507e06906121b49b4b486daff032ade' }, index.h(index.Fragment, { key: '1b38093cb1e7af2a16f5c465b9f7d0d79e39ea58' }, !this.undismissable && (index.h("nv-button", { key: 'a341887eb32885c375c393a8a13064c38b99cd48', onClick: this.handleCancel, emphasis: "low", size: "sm" }, this.cancelLabel)), index.h("nv-button", { key: '58ec1ef9f3e2e4647cea49bd89455da601976aff', 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: '4ade73bea4bf75f845b07418e0dc3f5c032cff2e', slot: "leading-icon", name: this.leadingIcon, size: "sm" })), this.primaryLabel, this.trailingIcon && (index.h("nv-icon", { key: '02e4cba8e8f39664cf0ee052fe8d5df4ef580949', slot: "trailing-icon", name: this.trailingIcon, size: "sm" })))))));
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: '7f7a5091089b48e34ca8161d37062a760d04cb04' }, index.h("slot", { key: '32a03c7930e82a38a3e26d6cd1726dd1ac9f246c' }, index.h(index.Fragment, { key: 'ef9d6e52ac2918691ec04df4cb7e7703d5e3d0ee' }, index.h("div", { key: '2a4c59cf0e68d17014b977dbcd15d7b76b63b396', class: "heading" }, this.heading), index.h("div", { key: '70820933a33c13e39db4bb3178d270ddb780afdf', class: "subheading" }, this.subheading)))));
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-DgKzi_Pd.js');
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: 'd7af71859fcbf45833c17977e7f524d12d7ec516', class: clsxChV9xqsO.clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, index.h("div", { key: 'c636a80f3d538843e76b48f4bc6387064fdbcb6f', class: "input-container" }, index.h("input", { key: 'd5ca4e3d2166b89cd92aecd2b393f03d0d78b769', 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 && {
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: 'b51e2d55382e69519d3764f4f9c7087ccfd24235', class: "icon" }, this.checked && !this.indeterminate && (index.h("slot", { key: 'cd70b0132a720ebf866fe21d1b53bbab89cda62f', name: "checked-icon" }, index.h("svg", { key: 'f1a9166fa75cbd37c2a0f1850b937de00f77a51e', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, index.h("path", { key: '2886dee16859f19b7dc630a100cbfd110c2e9eb7', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (index.h("slot", { key: '68eb14e2bbf5726a27023714f67de50d8e24ad83', name: "indeterminate-icon" }, index.h("svg", { key: '671dc1afed5b3b9d71efff519009c8384da49ec1', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, index.h("path", { key: '956838789fbac27422e0db8f13c4e2a8abc64c74', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), index.h("slot", { key: 'a93af1189444b1c96ea689eff29b7fa1e5b726c6' }), index.h("div", { key: '1bd695cb83a2010267d6ce1ce8dc6902dd62adf4', class: "text-container" }, index.h("slot", { key: 'b4e3088cf9469842b403d0eeb3122a85d08ce710', name: "main" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'f5326d69a430d60577fac4cbb6229cd26292cb6f', htmlFor: this.inputId, class: clsxChV9xqsO.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '56e52bbf5e0fed0e49b255a23a1c7fdabf69df13', name: "label" }, this.label))), (this.description ||
166
- this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'ca56f06cc4c3493e27d31de804f695bbe8a77231', class: "description" }, index.h("slot", { key: '46bd6a8deed8dfa6390b0994776a5c31aca16fdf', name: "description" }, this.description)))), (this.errorDescription ||
167
- this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'c1a5b14f4397a495e6ad340a6ae3a45e9f2c82fa', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'b8e10251f26ec1d541a1acad5d6bda0fc57b589d', name: "error-description" }, this.errorDescription))))));
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-DgKzi_Pd.js');
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: '373ddbc08a6b5d6ca6f2ac368f0ec84067539313' }, ((this.label && this.label.length > 0) ||
408
- this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '8373d2e38786f41bda23dd8fe9d345d24fb27710', htmlFor: this.inputId }, index.h("slot", { key: '8ded993892e5eef5caec76081eff5d3ed2db695a', name: "label" }, this.label))), index.h("nv-popover", { key: '0a394aab113c9a964f7495481d728416b1b7b041', ref: this.setPopoverRef, id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: 'ae7e1a4d7454b09969335a4772e77ba137a12389', slot: "trigger", class: "input-wrapper" }, index.h("slot", { key: '7b744ada5b12dca2ffaca4690f27a9a77240ea55', name: "before-input" }), index.h("div", { key: '9eb02599b7d7b6ee1835756525d8646d8a50be73', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '882a358dd1f0865a0c46ca5d9c5f8fe4689de616', name: "leading-input" }), index.h("input", { key: '2f8603d625b8fbfe8a5287e5512fdb2b7309004b', id: this.inputId, ref: this.setInputRef, placeholder: this.placeholder ||
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: 'ae611c7990a9ee817fcd8fec5c3c6068b995310d', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '3fa08699f440d9dcbd9612965a3f1cf88b17a83c', name: "circle-check", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: 'ee781c688e8bc62d17250dd4ec198e5706641cf7', class: "toggle-calendar-icon", name: "calendar" //{this.open ? 'chevron-top' : 'chevron-down'}
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: 'ab360fe2a6d5ceb48899ba05e404548995348e96', name: "after-input" })), index.h("div", { key: '8379e7defd054c642fe0d25cd8f3890c351811b1', slot: "content" }, index.h("nv-calendar", { key: '316df6f492d8d684ba91429fe5e499330329d0a7', 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: '9bad6d56684e9fea1298b5338ed32c04f3ab364c', class: "description" }, index.h("slot", { key: '180f3d6aac34ed02bf7ac351319327d701d4a419', name: "description" }, this.description))), (this.errorDescription ||
415
- this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'b62cfbae2fec4d1e4c6d15f3bd3cf8e0936ec28f', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (index.h("slot", { name: "error-description" })) : (this.errorDescription))), index.h("slot", { key: '6c4f47488a757c5808ed1bbe8bcedaa5dce60da2' })));
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 {
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var index = require('./index-DgKzi_Pd.js');
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: '659fbd943d7f088b0dde4ad6ae9eac2fd719d58d' }, ((this.label && this.label.length > 0) ||
565
- this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '5ec3a4df845c445ce2c4b45798677c9ba1c79f04', htmlFor: this.startInputId }, index.h("slot", { key: 'ac22f1a6d6f49a2feb2a92a1ff9045422785ef64', name: "label" }, this.label))), index.h("nv-popover", { key: 'd4ac345011bce61f263df887fa9eebc210659145', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: '6f13372e3bea5b40ed7bc82ffea0fa4f85f6e450', slot: "trigger", class: "input-wrapper" }, index.h("slot", { key: '4403b049058b231017eea3be6a1045312d805d75', name: "before-input" }), index.h("div", { key: 'df2603a90a1e7740311c8a4b1a85a051ed8efff0', class: "input-container" }, index.h("slot", { key: '37554324ba2bb1f25446c97db50546e0a33b5af8', name: "leading-input" }), index.h("div", { key: '0e99431473e98409bdf883acfd7e50823e6fc3c2', class: "range-inputs" }, index.h("input", { key: '7077a4a95fd264466c44f4f96fd9b6236887b731', id: this.startInputId, type: "text", placeholder: this.startPlaceholder ||
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: '8f84668eb682306ff6751044fb715dfbccc38e6b', class: "range-separator" }), index.h("input", { key: '1e7045f9501a04e14d4f726171abd07cbce0e004', id: this.endInputId, type: "text", placeholder: this.endPlaceholder ||
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: 'a82a7ea123f900eda3eb82cb1a70796ffc0248da', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '176e92373cb84d7cd873637818eba98b51a69646', name: "circle-check", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: 'd7069a77fa7fdca3b8202fed9fdfe8af082fdaf6', 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: '1ef543db2799a3242ed0a9ef8a5058b002fb885b', name: "after-input" })), index.h("div", { key: 'b47f6bbc98772ba7b0aa680737bf278b716aa237', slot: "content" }, index.h("nv-calendar", { key: '6008dda7daff3c40f20475996f8215ae8b6c457a', 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: 'bd3c9e7650cea0ae6e30418c1ed15e2e21241576', class: "description" }, index.h("slot", { key: 'c87eb17e1b5624c7d3b5b31644919c4a473ea135', name: "description" }, this.description))), (this.errorDescription ||
573
- this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'e9cb169a418080a3c374f5d36fdc7c09845a52f6', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (index.h("slot", { name: "error-description" })) : (this.errorDescription))), index.h("slot", { key: 'ea7d3580a7007bcdc85eb096ccdbf683d7a1d906' })));
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-DgKzi_Pd.js');
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.value;
184
- this.filterTextChanged.emit(this.inputElement.value);
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.find(option => option.value === this.value);
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 = items.find(item => item.value === this.value);
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
- if (event.target != this.toggleElement)
263
- this.open = true;
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
- if (this.value) {
593
- items.forEach(item => {
594
- if (item.value === this.value) {
595
- item.selected = true;
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 && (this.disabled || this.readonly)) {
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: 'b41a60470da47b175fac17a8bc88b8719b56cc14', 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: 'adf93f21febb5404b931b821595eed91b24da55b', htmlFor: this.inputId, onClick: this.syncToggleDropdown.bind(this) }, index.h("slot", { key: 'c8b8256e6e06695a3b6778cec0a696bc0713e6dc', name: "label" }, this.label))), index.h("nv-popover", { key: '66895b00c801a5c1889da8bc73d9f519d3fe4b70', triggerMode: "controlled", placement: "bottom-start", open: this.open, onOpenChanged: e => this.openChanged.emit(e.detail) }, index.h("div", { key: 'e468646cb1d08f7f26a8c427040d14f843279fd0', class: "input-wrapper", slot: "trigger" }, index.h("slot", { key: 'd5567eb82b1e9230507963ed7ca76656f1415855', name: "before-input" }), index.h("div", { key: '872a8f01aeba95f52209e8dbe2bb1cff3c65c46f', class: "input-container" }, index.h("slot", { key: 'f8038d509899b3dbe895c9f042f39a1274d1b681', 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 && {
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.filterable && this.filterText && (index.h("nv-iconbutton", { key: 'b5b48972a2529eee9dd2fd68871859bf289d472a', 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: '2cca314634242b1e697ba2b26298b095f0742582', name: "alert-circle", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: 'eac277cbb66ac82547d5c4c6a6aec3443f2fb593', "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: '25f05b5425937ca89e1c8c4f2be9fbde2e39959a', name: "after-input" })), index.h("div", { key: '064a1701a6f4678e1443d7e028f3681e2e41dfd9', slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, this.options?.length > 0 && (index.h("ul", { key: 'a9e489d4eb5551044f43a5aacaed94457ddbcacc' }, 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: '4dda850901378ea3416260e1c0adda7af9a153c7', name: "content" }))), (this.description ||
661
- this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'a878da5beb9572bc8d3a318d3879517ee84c7bac', class: "description" }, index.h("slot", { key: '04618e824a1b5d67a4ccbe70f13d9ca818f607bd', name: "description" }, this.description))), (this.errorDescription ||
662
- this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '007314310806e8dcc5b2b48af65bc66de4ba9f7a', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '237a4e37e5869f8b66c631559027ec6551005ec6', name: "error-description" }, this.errorDescription)))));
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); }
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var index = require('./index-DgKzi_Pd.js');
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: '40733c82ff3f46a260e536b8a5cfe95a06a5ef4c', role: "menuitem", tabindex: '-1', onClick: this.handleSelected }, index.h("slot", { key: 'a0fcbde0a3d70e8493d9c38428ea14d36d71fb84' }, index.h("div", { key: 'a88818483f7fe88d5e7d562bccf9c247c8189442', class: "text-wrapper" }, index.h("span", { key: '80cbccdb3cf0d86c22130a399f6cf70c7bc8c32b', "data-scope": "text" }, this.label))), this.selected && (index.h("nv-icon", { key: 'b89ab45c47eb08b37c29f93c78036121a33ab041', name: "check", "aria-hidden": "true", "data-scope": "selected" }))));
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
  };
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var index = require('./index-DgKzi_Pd.js');
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-DgKzi_Pd.js');
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: 'a26895be78d7080e86d761ce0cb3b918f352f1d9' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '2b3f13fa1bb3564b1e384bcf080fa666e480147a', htmlFor: this.inputId }, index.h("slot", { key: '03d7432458720d231948341a552102c865fe07ff', name: "label" }, this.label))), index.h("div", { key: '1a01b65d78732da4ef177cf86c4f13ecfde31f1e', class: "input-wrapper" }, index.h("slot", { key: 'bad1d59a59eecc2f4c45d16818ac521916d71731', name: "before-input" }), index.h("div", { key: '295e8c0f1953673fedb9a48784f507823f45e7af', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '54a81573b069471adbcda4e1bbaff97fc1fe1eeb', name: "leading-input" }), index.h("input", { key: '067f32480f74f78a33192a0761e46a7e04bc886b', 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 && {
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: '6e652469a6ef16dd590349db418397626a64e9ba', name: "trailing-input" }), this.error && (index.h("nv-icon", { key: '2a4eae5e0fd7a26d21315e0d76e09bac7bf22bed', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '7d33539993e294ab5cbc31e60903daa664743ee3', name: "circle-check", class: "validation", size: "md" })), index.h("div", { key: '33a87b9c4446d718d34ba04faaf3ab0cffaa5941', class: "stepper" }, index.h("nv-iconbutton", { key: '6830b021b13acc955d0e333ae65bfec4efb8616d', size: "md", name: "minus", emphasis: "lower", onClick: this.handleMinus, disabled: this.isMinValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }), index.h("nv-iconbutton", { key: 'c83226f3dbdbf009c9a7748abea950a30b975a77', size: "md", name: "plus", emphasis: "lower", onClick: this.handlePlus, disabled: this.isMaxValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }))), index.h("slot", { key: '1ad95195471abf0962b958cf32088552f4b51205', name: "after-input" })), (this.description ||
176
- this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'b6d229a54b3c88d53b787047d5c94ebfa197d2ab', class: "description" }, index.h("slot", { key: 'd33c1f6c4015594e0096e70828934b859da40883', name: "description" }, this.description))), (this.errorDescription ||
177
- this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '80e7c2709f0d83d427829f6e92b376dff51dbe87', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '5fb07dba33795dfb968ad5b5c3d3ae8726c0a754', name: "error-description" }, this.errorDescription)))));
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-DgKzi_Pd.js');
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: '30f853d7d12cd12f4093c3a185e497eb5374fecd' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'a0a4557d38448ea9101f255b8080eb298107906e', htmlFor: this.inputId }, index.h("slot", { key: '76eccd0d2ef97d4a714f9d72f736e7b8a3b1ac9d', name: "label" }, this.label))), index.h("div", { key: 'd1042d63c628c26614aabe08155848f265dd67d1', class: "input-wrapper" }, index.h("slot", { key: '1412d40db63a8a1bcea9a941ca0c263d3227cbbc', name: "before-input" }), index.h("div", { key: '683b678a05a524258ee6924148c2bea9be68690a', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '34f2878c425e6544ab7862cb1e3e892da399c23f', name: "leading-input" }), index.h("input", { key: '153fa6a7aac31180e6355dcf7a0b3e2fbaa75ce0', 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 && {
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: '3b024daa690eb7ff8d34da6000d37ce6ae182112', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" })), !this.hidePasswordIcon && (index.h("nv-iconbutton", { key: 'c8877e4d7d2c106161bfd1b27e3e3dc664cec313', 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: 'c3b428593383be23101c2dead68421f620e25d38', name: "after-input" })), (this.description ||
154
- this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '56a5ebc137e6864570626e0ce75aca0fff6314d3', class: "description" }, index.h("slot", { key: 'eb8c5141c3a79359ca606defea0c0b7dbc0f5bd6', name: "description" }, this.description))), (this.errorDescription ||
155
- this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '4aaf597ca070227517d231b7e673e0db280ccab1', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '6815df2fc9b2ec36cfe1f88cebaeaf88e11ec882', name: "error-description" }, this.errorDescription)))));
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-DgKzi_Pd.js');
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: '66de1f9bfcf3981e3cfc94ac1bc1c7fa1940676d', class: clsxChV9xqsO.clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, index.h("input", { key: 'ee32e5617e50888d9064d7d4d00fbdaf55b97e89', 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: '16f867329f8c9a735c9728a466fd49ff1b9b8e8a', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '50bbb783254086da1f6c4ff3ce6ae432567d5585', htmlFor: this.inputId }, index.h("slot", { key: 'd6801fd892c2b82c39eb8b2b906ad0d148edd63f', name: "label" }, this.label))), (this.description ||
92
- this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '6810da8129a5e70a6069a5212b6755017efe9856', class: "description" }, index.h("slot", { key: '70539fb3789af1183fe92fbd9fdb18520633ef97', name: "description" }, this.description))), (this.errorDescription ||
93
- this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '9c8059dd1f5335c99a28a84eb5db7ed0726933bd', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'ec4c1d7a36cb892c2a97593a6e3341f69791a721', name: "error-description" }, this.errorDescription))))));
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); }