@nova-design-system/nova-webcomponents 3.0.0-beta.41 → 3.0.0-beta.43
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/_commonjsHelpers-b3309d7b.js +12 -0
- package/dist/cjs/_commonjsHelpers-b3309d7b.js.map +1 -0
- package/dist/cjs/{constants-79d2cdfc.js → constants-bcd6b2e2.js} +100 -2
- package/dist/cjs/constants-bcd6b2e2.js.map +1 -0
- package/dist/cjs/{index-5910ba06.js → index-9bda5507.js} +1364 -1182
- package/dist/cjs/index-9bda5507.js.map +1 -0
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/inputmask-76b7b93f.js +3763 -0
- package/dist/cjs/inputmask-76b7b93f.js.map +1 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/native.cjs.js +3 -3
- package/dist/cjs/native.cjs.js.map +1 -1
- package/dist/cjs/nv-alert.cjs.entry.js +3 -3
- package/dist/cjs/nv-alert.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-avatar.cjs.entry.js +3 -3
- package/dist/cjs/nv-avatar.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-badge_2.cjs.entry.js +16 -5
- package/dist/cjs/nv-badge_2.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-base.cjs.entry.js +2 -2
- package/dist/cjs/nv-breadcrumb.cjs.entry.js +2 -2
- package/dist/cjs/nv-breadcrumbs.cjs.entry.js +2 -2
- package/dist/cjs/nv-button.cjs.entry.js +3 -3
- package/dist/cjs/nv-calendar.cjs.entry.js +77 -22
- package/dist/cjs/nv-calendar.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-col.cjs.entry.js +2 -2
- package/dist/cjs/nv-datagrid.cjs.entry.js +267 -5
- package/dist/cjs/nv-datagrid.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-datagridcolumn.cjs.entry.js +2 -2
- package/dist/cjs/nv-dialog.cjs.entry.js +15 -10
- package/dist/cjs/nv-dialog.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-dialogfooter_2.cjs.entry.js +4 -4
- package/dist/cjs/nv-fieldcheckbox.cjs.entry.js +6 -6
- package/dist/cjs/nv-fieldcheckbox.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fielddate.cjs.entry.js +281 -0
- package/dist/cjs/nv-fielddate.cjs.entry.js.map +1 -0
- package/dist/cjs/nv-fielddaterange.cjs.entry.js +358 -0
- package/dist/cjs/nv-fielddaterange.cjs.entry.js.map +1 -0
- package/dist/cjs/nv-fielddropdown.cjs.entry.js +13 -24
- package/dist/cjs/nv-fielddropdown.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fielddropdownitem.cjs.entry.js +2 -2
- package/dist/cjs/nv-fieldmultiselect.cjs.entry.js +22 -30
- package/dist/cjs/nv-fieldmultiselect.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fieldnumber.cjs.entry.js +9 -6
- package/dist/cjs/nv-fieldnumber.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fieldpassword.cjs.entry.js +5 -13
- package/dist/cjs/nv-fieldpassword.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fieldradio.cjs.entry.js +4 -4
- package/dist/cjs/nv-fieldradio.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fieldselect.cjs.entry.js +7 -7
- package/dist/cjs/nv-fieldselect.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fieldtext.cjs.entry.js +5 -5
- package/dist/cjs/nv-fieldtext.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fieldtextarea.cjs.entry.js +4 -4
- package/dist/cjs/nv-fieldtextarea.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fieldtime.cjs.entry.js +12 -12
- package/dist/cjs/nv-fieldtime.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-icon.cjs.entry.js +4 -4
- package/dist/cjs/nv-icon.cjs.entry.js.map +1 -1
- package/dist/cjs/{nv-iconbutton.cjs.entry.js → nv-iconbutton_2.cjs.entry.js} +44 -3
- package/dist/cjs/nv-iconbutton_2.cjs.entry.js.map +1 -0
- package/dist/cjs/nv-menu.cjs.entry.js +5 -5
- package/dist/cjs/nv-menu.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-menuitem.cjs.entry.js +5 -5
- package/dist/cjs/nv-menuitem.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-popover.cjs.entry.js +31 -18
- package/dist/cjs/nv-popover.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-row.cjs.entry.js +2 -2
- package/dist/cjs/nv-stack.cjs.entry.js +2 -2
- package/dist/cjs/nv-table.cjs.entry.js +3 -3
- package/dist/cjs/nv-tablecolumn.cjs.entry.js +1 -1
- package/dist/cjs/nv-toggle.cjs.entry.js +3 -3
- package/dist/cjs/nv-toggle.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-tooltip.cjs.entry.js +3 -3
- package/dist/cjs/nv-tooltip.cjs.entry.js.map +1 -1
- package/dist/collection/collection-manifest.json +4 -2
- package/dist/collection/components/nv-alert/nv-alert.js +2 -2
- package/dist/collection/components/nv-alert/nv-alert.js.map +1 -1
- package/dist/collection/components/nv-avatar/nv-avatar.js +8 -8
- package/dist/collection/components/nv-avatar/nv-avatar.js.map +1 -1
- package/dist/collection/components/nv-badge/nv-badge.js +4 -4
- package/dist/collection/components/nv-badge/nv-badge.js.map +1 -1
- package/dist/collection/components/nv-base/nv-base.js +1 -1
- package/dist/collection/components/nv-breadcrumb/nv-breadcrumb.js +1 -1
- package/dist/collection/components/nv-breadcrumbs/nv-breadcrumbs.js +1 -1
- package/dist/collection/components/nv-button/nv-button.js +1 -1
- package/dist/collection/components/nv-calendar/nv-calendar.css +13 -8
- package/dist/collection/components/nv-calendar/nv-calendar.js +82 -24
- package/dist/collection/components/nv-calendar/nv-calendar.js.map +1 -1
- package/dist/collection/components/nv-col/nv-col.js +1 -1
- package/dist/collection/components/nv-datagrid/nv-datagrid.docs.js +24 -0
- package/dist/collection/components/nv-datagrid/nv-datagrid.docs.js.map +1 -1
- package/dist/collection/components/nv-datagrid/nv-datagrid.js +89 -6
- package/dist/collection/components/nv-datagrid/nv-datagrid.js.map +1 -1
- package/dist/collection/components/nv-datagridcolumn/nv-datagridcolumn.js +1 -1
- package/dist/collection/components/nv-dialog/nv-dialog.js +13 -8
- package/dist/collection/components/nv-dialog/nv-dialog.js.map +1 -1
- package/dist/collection/components/nv-dialogfooter/nv-dialogfooter.js +1 -1
- package/dist/collection/components/nv-dialogheader/nv-dialogheader.js +1 -1
- package/dist/collection/components/nv-fieldcheckbox/nv-fieldcheckbox.css +56 -40
- package/dist/collection/components/nv-fieldcheckbox/nv-fieldcheckbox.js +7 -7
- package/dist/collection/components/nv-fieldcheckbox/nv-fieldcheckbox.js.map +1 -1
- package/dist/collection/components/nv-fielddate/nv-fielddate.docs.js +335 -0
- package/dist/collection/components/nv-fielddate/nv-fielddate.docs.js.map +1 -0
- package/dist/collection/components/nv-fielddate/nv-fielddate.js +845 -0
- package/dist/collection/components/nv-fielddate/nv-fielddate.js.map +1 -0
- package/dist/collection/components/nv-fielddate/styles/nv-fielddate.css +165 -0
- package/dist/collection/components/nv-fielddaterange/nv-fielddaterange.docs.js +284 -0
- package/dist/collection/components/nv-fielddaterange/nv-fielddaterange.docs.js.map +1 -0
- package/dist/collection/components/nv-fielddaterange/nv-fielddaterange.js +988 -0
- package/dist/collection/components/nv-fielddaterange/nv-fielddaterange.js.map +1 -0
- package/dist/collection/components/nv-fielddaterange/styles/nv-fielddaterange.css +192 -0
- package/dist/collection/components/nv-fielddropdown/nv-fielddropdown.js +11 -22
- package/dist/collection/components/nv-fielddropdown/nv-fielddropdown.js.map +1 -1
- package/dist/collection/components/nv-fielddropdown/styles/nv-fielddropdown.css +14 -16
- package/dist/collection/components/nv-fielddropdownitem/nv-fielddropdownitem.js +1 -1
- package/dist/collection/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.css +1 -0
- package/dist/collection/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.js +12 -1
- package/dist/collection/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.js.map +1 -1
- package/dist/collection/components/nv-fieldmultiselect/nv-fieldmultiselect.css +22 -24
- package/dist/collection/components/nv-fieldmultiselect/nv-fieldmultiselect.docs.js +1 -4
- package/dist/collection/components/nv-fieldmultiselect/nv-fieldmultiselect.docs.js.map +1 -1
- package/dist/collection/components/nv-fieldmultiselect/nv-fieldmultiselect.js +19 -48
- package/dist/collection/components/nv-fieldmultiselect/nv-fieldmultiselect.js.map +1 -1
- package/dist/collection/components/nv-fieldnumber/nv-fieldnumber.css +17 -21
- package/dist/collection/components/nv-fieldnumber/nv-fieldnumber.docs.js +1 -1
- package/dist/collection/components/nv-fieldnumber/nv-fieldnumber.docs.js.map +1 -1
- package/dist/collection/components/nv-fieldnumber/nv-fieldnumber.js +9 -6
- package/dist/collection/components/nv-fieldnumber/nv-fieldnumber.js.map +1 -1
- package/dist/collection/components/nv-fieldpassword/nv-fieldpassword.css +9 -10
- package/dist/collection/components/nv-fieldpassword/nv-fieldpassword.docs.js +1 -1
- package/dist/collection/components/nv-fieldpassword/nv-fieldpassword.docs.js.map +1 -1
- package/dist/collection/components/nv-fieldpassword/nv-fieldpassword.js +3 -11
- package/dist/collection/components/nv-fieldpassword/nv-fieldpassword.js.map +1 -1
- package/dist/collection/components/nv-fieldradio/nv-fieldradio.js +5 -5
- package/dist/collection/components/nv-fieldradio/nv-fieldradio.js.map +1 -1
- package/dist/collection/components/nv-fieldselect/nv-fieldselect.css +30 -15
- package/dist/collection/components/nv-fieldselect/nv-fieldselect.js +8 -8
- package/dist/collection/components/nv-fieldselect/nv-fieldselect.js.map +1 -1
- package/dist/collection/components/nv-fieldtext/nv-fieldtext.css +15 -16
- package/dist/collection/components/nv-fieldtext/nv-fieldtext.docs.js +1 -1
- package/dist/collection/components/nv-fieldtext/nv-fieldtext.docs.js.map +1 -1
- package/dist/collection/components/nv-fieldtext/nv-fieldtext.js +6 -6
- package/dist/collection/components/nv-fieldtext/nv-fieldtext.js.map +1 -1
- package/dist/collection/components/nv-fieldtextarea/nv-fieldtextarea.js +5 -5
- package/dist/collection/components/nv-fieldtextarea/nv-fieldtextarea.js.map +1 -1
- package/dist/collection/components/nv-fieldtime/nv-fieldtime.js +11 -11
- package/dist/collection/components/nv-fieldtime/nv-fieldtime.js.map +1 -1
- package/dist/collection/components/nv-fieldtime/{nv-fieldtime.css → styles/nv-fieldtime.css} +20 -32
- package/dist/collection/components/nv-icon/nv-icon.js +8 -8
- package/dist/collection/components/nv-icon/nv-icon.js.map +1 -1
- package/dist/collection/components/nv-iconbutton/nv-iconbutton.js +31 -1
- package/dist/collection/components/nv-iconbutton/nv-iconbutton.js.map +1 -1
- package/dist/collection/components/nv-loader/nv-loader.js +1 -1
- package/dist/collection/components/nv-menu/nv-menu.css +3 -0
- package/dist/collection/components/nv-menu/nv-menu.docs.js +6 -6
- package/dist/collection/components/nv-menu/nv-menu.docs.js.map +1 -1
- package/dist/collection/components/nv-menu/nv-menu.js +11 -12
- package/dist/collection/components/nv-menu/nv-menu.js.map +1 -1
- package/dist/collection/components/nv-menuitem/nv-menuitem.css +3 -0
- package/dist/collection/components/nv-menuitem/nv-menuitem.js +27 -9
- package/dist/collection/components/nv-menuitem/nv-menuitem.js.map +1 -1
- package/dist/collection/components/nv-popover/nv-popover.css +5 -5
- package/dist/collection/components/nv-popover/nv-popover.docs.js +3 -3
- package/dist/collection/components/nv-popover/nv-popover.docs.js.map +1 -1
- package/dist/collection/components/nv-popover/nv-popover.js +38 -37
- package/dist/collection/components/nv-popover/nv-popover.js.map +1 -1
- package/dist/collection/components/nv-row/nv-row.js +1 -1
- package/dist/collection/components/nv-stack/nv-stack.js +1 -1
- package/dist/collection/components/nv-table/nv-table.js +2 -2
- package/dist/collection/components/nv-toggle/nv-toggle.js +9 -9
- package/dist/collection/components/nv-toggle/nv-toggle.js.map +1 -1
- package/dist/collection/components/nv-tooltip/nv-tooltip.css +1 -1
- package/dist/collection/components/nv-tooltip/nv-tooltip.js +4 -4
- package/dist/collection/components/nv-tooltip/nv-tooltip.js.map +1 -1
- package/dist/collection/utils/constants.js +94 -0
- package/dist/collection/utils/constants.js.map +1 -1
- package/dist/collection/utils/input.utils.js +20 -0
- package/dist/collection/utils/input.utils.js.map +1 -0
- package/dist/collection/utils/test/input.utils.test.js +42 -0
- package/dist/collection/utils/test/input.utils.test.js.map +1 -0
- package/dist/components/index.js +2 -2
- package/dist/components/nv-alert.js +5 -5
- package/dist/components/nv-alert.js.map +1 -1
- package/dist/components/nv-avatar.js +11 -11
- package/dist/components/nv-avatar.js.map +1 -1
- package/dist/components/nv-badge.js +1 -1
- package/dist/components/nv-base.js +2 -2
- package/dist/components/nv-breadcrumb.js +4 -4
- package/dist/components/nv-breadcrumbs.js +2 -2
- package/dist/components/nv-button.js +1 -1
- package/dist/components/nv-calendar.js +1 -1039
- package/dist/components/nv-calendar.js.map +1 -1
- package/dist/components/nv-col.js +2 -2
- package/dist/components/nv-datagrid.js +272 -7
- package/dist/components/nv-datagrid.js.map +1 -1
- package/dist/components/nv-datagridcolumn.js +2 -2
- package/dist/components/nv-dialog.js +20 -15
- package/dist/components/nv-dialog.js.map +1 -1
- package/dist/components/nv-dialogfooter.js +1 -1
- package/dist/components/nv-dialogheader.js +1 -1
- package/dist/components/nv-fieldcheckbox.js +1 -1
- package/dist/components/nv-fielddate.d.ts +11 -0
- package/dist/components/nv-fielddate.js +359 -0
- package/dist/components/nv-fielddate.js.map +1 -0
- package/dist/components/nv-fielddaterange.d.ts +11 -0
- package/dist/components/nv-fielddaterange.js +440 -0
- package/dist/components/nv-fielddaterange.js.map +1 -0
- package/dist/components/nv-fielddropdown.js +18 -29
- package/dist/components/nv-fielddropdown.js.map +1 -1
- package/dist/components/nv-fielddropdownitem.js +1 -1
- package/dist/components/nv-fielddropdownitemcheck.js +1 -1
- package/dist/components/nv-fieldmultiselect.js +30 -40
- package/dist/components/nv-fieldmultiselect.js.map +1 -1
- package/dist/components/nv-fieldnumber.js +25 -10
- package/dist/components/nv-fieldnumber.js.map +1 -1
- package/dist/components/nv-fieldpassword.js +8 -16
- package/dist/components/nv-fieldpassword.js.map +1 -1
- package/dist/components/nv-fieldradio.js +6 -6
- package/dist/components/nv-fieldradio.js.map +1 -1
- package/dist/components/nv-fieldselect.js +24 -12
- package/dist/components/nv-fieldselect.js.map +1 -1
- package/dist/components/nv-fieldtext.js +9 -9
- package/dist/components/nv-fieldtext.js.map +1 -1
- package/dist/components/nv-fieldtextarea.js +6 -6
- package/dist/components/nv-fieldtextarea.js.map +1 -1
- package/dist/components/nv-fieldtime.js +16 -16
- package/dist/components/nv-fieldtime.js.map +1 -1
- package/dist/components/nv-icon.js +1 -1
- package/dist/components/nv-iconbutton.js +1 -1
- package/dist/components/nv-loader.js +1 -1
- package/dist/components/nv-menu.js +12 -12
- package/dist/components/nv-menu.js.map +1 -1
- package/dist/components/nv-menuitem.js +1 -1
- package/dist/components/nv-popover.js +1 -1
- package/dist/components/nv-row.js +2 -2
- package/dist/components/nv-stack.js +2 -2
- package/dist/components/nv-table.js +3 -3
- package/dist/components/nv-tablecolumn.js +1 -1
- package/dist/components/nv-toggle.js +10 -10
- package/dist/components/nv-toggle.js.map +1 -1
- package/dist/components/nv-tooltip.js +1 -1
- package/dist/components/{p-d17558a8.js → p-057ae4f2.js} +41 -1201
- package/dist/components/p-057ae4f2.js.map +1 -0
- package/dist/components/{p-ba145f46.js → p-1a4f9c97.js} +5 -5
- package/dist/components/{p-ba145f46.js.map → p-1a4f9c97.js.map} +1 -1
- package/dist/components/{p-77d0fedc.js → p-1c45c0f2.js} +1283 -1208
- package/dist/components/p-1c45c0f2.js.map +1 -0
- package/dist/components/{p-11cc38e0.js → p-1e095bba.js} +21 -6
- package/dist/components/p-1e095bba.js.map +1 -0
- package/dist/components/{p-4bb5eb79.js → p-1fad2529.js} +16 -5
- package/dist/components/p-1fad2529.js.map +1 -0
- package/dist/components/{p-f201db34.js → p-3a3ba5b1.js} +3 -3
- package/dist/components/{p-f201db34.js.map → p-3a3ba5b1.js.map} +1 -1
- package/dist/components/p-3aa6f6dc.js +1104 -0
- package/dist/components/p-3aa6f6dc.js.map +1 -0
- package/dist/components/{p-69543282.js → p-4c6ba63c.js} +8 -7
- package/dist/components/p-4c6ba63c.js.map +1 -0
- package/dist/components/{p-a633892a.js → p-4c6d8df7.js} +3 -3
- package/dist/components/{p-a633892a.js.map → p-4c6d8df7.js.map} +1 -1
- package/dist/components/p-55202370.js +172 -0
- package/dist/components/p-55202370.js.map +1 -0
- package/dist/components/{p-1657eba4.js → p-56716b97.js} +7 -7
- package/dist/components/{p-1657eba4.js.map → p-56716b97.js.map} +1 -1
- package/dist/components/{p-33f9bdb1.js → p-7f142767.js} +7 -7
- package/dist/components/{p-33f9bdb1.js.map → p-7f142767.js.map} +1 -1
- package/dist/components/{p-b316c35d.js → p-8348db09.js} +99 -3
- package/dist/components/p-8348db09.js.map +1 -0
- package/dist/components/p-89fb308b.js +3761 -0
- package/dist/components/p-89fb308b.js.map +1 -0
- package/dist/components/{p-4b184820.js → p-9476354d.js} +4 -4
- package/dist/components/{p-4b184820.js.map → p-9476354d.js.map} +1 -1
- package/dist/components/{p-fad78896.js → p-a8b5969f.js} +8 -8
- package/dist/components/p-a8b5969f.js.map +1 -0
- package/dist/components/{p-f77c3072.js → p-ebf24fd0.js} +11 -11
- package/dist/components/p-ebf24fd0.js.map +1 -0
- package/dist/docs.json +1822 -151
- package/dist/esm/_commonjsHelpers-1789f0cf.js +9 -0
- package/dist/esm/_commonjsHelpers-1789f0cf.js.map +1 -0
- package/dist/esm/{constants-75e6d7f0.js → constants-98e2dcc2.js} +99 -3
- package/dist/esm/constants-98e2dcc2.js.map +1 -0
- package/dist/esm/{index-fac2d5d2.js → index-1fb7a9a6.js} +1364 -1182
- package/dist/esm/index-1fb7a9a6.js.map +1 -0
- package/dist/esm/index.js +1 -1
- package/dist/esm/inputmask-edcad3c1.js +3761 -0
- package/dist/esm/inputmask-edcad3c1.js.map +1 -0
- package/dist/esm/loader.js +3 -3
- package/dist/esm/native.js +4 -4
- package/dist/esm/native.js.map +1 -1
- package/dist/esm/nv-alert.entry.js +3 -3
- package/dist/esm/nv-alert.entry.js.map +1 -1
- package/dist/esm/nv-avatar.entry.js +3 -3
- package/dist/esm/nv-avatar.entry.js.map +1 -1
- package/dist/esm/nv-badge_2.entry.js +16 -5
- package/dist/esm/nv-badge_2.entry.js.map +1 -1
- package/dist/esm/nv-base.entry.js +2 -2
- package/dist/esm/nv-breadcrumb.entry.js +2 -2
- package/dist/esm/nv-breadcrumbs.entry.js +2 -2
- package/dist/esm/nv-button.entry.js +3 -3
- package/dist/esm/nv-calendar.entry.js +73 -18
- package/dist/esm/nv-calendar.entry.js.map +1 -1
- package/dist/esm/nv-col.entry.js +2 -2
- package/dist/esm/nv-datagrid.entry.js +267 -5
- package/dist/esm/nv-datagrid.entry.js.map +1 -1
- package/dist/esm/nv-datagridcolumn.entry.js +2 -2
- package/dist/esm/nv-dialog.entry.js +15 -10
- package/dist/esm/nv-dialog.entry.js.map +1 -1
- package/dist/esm/nv-dialogfooter_2.entry.js +4 -4
- package/dist/esm/nv-fieldcheckbox.entry.js +6 -6
- package/dist/esm/nv-fieldcheckbox.entry.js.map +1 -1
- package/dist/esm/nv-fielddate.entry.js +277 -0
- package/dist/esm/nv-fielddate.entry.js.map +1 -0
- package/dist/esm/nv-fielddaterange.entry.js +354 -0
- package/dist/esm/nv-fielddaterange.entry.js.map +1 -0
- package/dist/esm/nv-fielddropdown.entry.js +13 -24
- package/dist/esm/nv-fielddropdown.entry.js.map +1 -1
- package/dist/esm/nv-fielddropdownitem.entry.js +2 -2
- package/dist/esm/nv-fieldmultiselect.entry.js +22 -30
- package/dist/esm/nv-fieldmultiselect.entry.js.map +1 -1
- package/dist/esm/nv-fieldnumber.entry.js +9 -6
- package/dist/esm/nv-fieldnumber.entry.js.map +1 -1
- package/dist/esm/nv-fieldpassword.entry.js +5 -13
- package/dist/esm/nv-fieldpassword.entry.js.map +1 -1
- package/dist/esm/nv-fieldradio.entry.js +4 -4
- package/dist/esm/nv-fieldradio.entry.js.map +1 -1
- package/dist/esm/nv-fieldselect.entry.js +7 -7
- package/dist/esm/nv-fieldselect.entry.js.map +1 -1
- package/dist/esm/nv-fieldtext.entry.js +5 -5
- package/dist/esm/nv-fieldtext.entry.js.map +1 -1
- package/dist/esm/nv-fieldtextarea.entry.js +4 -4
- package/dist/esm/nv-fieldtextarea.entry.js.map +1 -1
- package/dist/esm/nv-fieldtime.entry.js +12 -12
- package/dist/esm/nv-fieldtime.entry.js.map +1 -1
- package/dist/esm/nv-icon.entry.js +4 -4
- package/dist/esm/nv-icon.entry.js.map +1 -1
- package/dist/esm/{nv-iconbutton.entry.js → nv-iconbutton_2.entry.js} +44 -4
- package/dist/esm/nv-iconbutton_2.entry.js.map +1 -0
- package/dist/esm/nv-menu.entry.js +5 -5
- package/dist/esm/nv-menu.entry.js.map +1 -1
- package/dist/esm/nv-menuitem.entry.js +5 -5
- package/dist/esm/nv-menuitem.entry.js.map +1 -1
- package/dist/esm/nv-popover.entry.js +31 -18
- package/dist/esm/nv-popover.entry.js.map +1 -1
- package/dist/esm/nv-row.entry.js +2 -2
- package/dist/esm/nv-stack.entry.js +2 -2
- package/dist/esm/nv-table.entry.js +3 -3
- package/dist/esm/nv-tablecolumn.entry.js +1 -1
- package/dist/esm/nv-toggle.entry.js +3 -3
- package/dist/esm/nv-toggle.entry.js.map +1 -1
- package/dist/esm/nv-tooltip.entry.js +3 -3
- package/dist/esm/nv-tooltip.entry.js.map +1 -1
- package/dist/native/index.esm.js +1 -1
- package/dist/native/native.esm.js +1 -1
- package/dist/native/native.esm.js.map +1 -1
- package/dist/native/p-0462f723.js +2 -0
- package/dist/native/p-0462f723.js.map +1 -0
- package/dist/native/{p-8664ab16.entry.js → p-048486e0.entry.js} +3 -3
- package/dist/native/p-048486e0.entry.js.map +1 -0
- package/dist/native/{p-fca807b4.entry.js → p-04c6048a.entry.js} +3 -3
- package/dist/native/{p-fca807b4.entry.js.map → p-04c6048a.entry.js.map} +1 -1
- package/dist/native/p-1a46cb52.entry.js +2 -0
- package/dist/native/p-2281d5ef.entry.js +2 -0
- package/dist/native/p-2281d5ef.entry.js.map +1 -0
- package/dist/native/p-22a45102.entry.js +2 -0
- package/dist/native/p-22a45102.entry.js.map +1 -0
- package/dist/native/p-2ed540e3.entry.js +2 -0
- package/dist/native/p-2ed540e3.entry.js.map +1 -0
- package/dist/native/p-31184fdd.entry.js +2 -0
- package/dist/native/p-31184fdd.entry.js.map +1 -0
- package/dist/native/p-314d2b34.entry.js +2 -0
- package/dist/native/p-314d2b34.entry.js.map +1 -0
- package/dist/native/p-332c5d6c.entry.js +2 -0
- package/dist/native/p-332c5d6c.entry.js.map +1 -0
- package/dist/native/p-3af5bcc1.entry.js +2 -0
- package/dist/native/p-3af5bcc1.entry.js.map +1 -0
- package/dist/native/{p-e36e956b.entry.js → p-442f04f9.entry.js} +2 -2
- package/dist/native/{p-af60740c.entry.js → p-45577c7f.entry.js} +2 -2
- package/dist/native/p-45577c7f.entry.js.map +1 -0
- package/dist/native/p-464ef88f.entry.js +2 -0
- package/dist/native/p-464ef88f.entry.js.map +1 -0
- package/dist/native/p-46aa1136.entry.js +2 -0
- package/dist/native/{p-27ad7af2.entry.js → p-4a440970.entry.js} +2 -2
- package/dist/native/p-4a440970.entry.js.map +1 -0
- package/dist/native/p-4dc1d036.entry.js +2 -0
- package/dist/native/{p-e9e77494.entry.js → p-514101d6.entry.js} +2 -2
- package/dist/native/p-514101d6.entry.js.map +1 -0
- package/dist/native/p-53aa81dd.js +10 -0
- package/dist/native/p-53aa81dd.js.map +1 -0
- package/dist/native/{p-1a3d2a74.entry.js → p-56e98443.entry.js} +2 -2
- package/dist/native/p-56e98443.entry.js.map +1 -0
- package/dist/native/{p-b316c35d.js → p-59768ee5.js} +2 -2
- package/dist/native/p-59768ee5.js.map +1 -0
- package/dist/native/{p-edee1c1f.entry.js → p-62df7dd4.entry.js} +2 -2
- package/dist/native/p-665db087.entry.js +2 -0
- package/dist/native/p-68b5a92c.entry.js +2 -0
- package/dist/native/{p-b58c661b.entry.js → p-6a629671.entry.js} +2 -2
- package/dist/native/p-7fade532.entry.js +2 -0
- package/dist/native/p-7fade532.entry.js.map +1 -0
- package/dist/native/p-913907fb.entry.js +2 -0
- package/dist/native/p-913907fb.entry.js.map +1 -0
- package/dist/native/p-942f8e92.entry.js +2 -0
- package/dist/native/p-942f8e92.entry.js.map +1 -0
- package/dist/native/p-9f5e4dfc.entry.js +2 -0
- package/dist/native/p-9f5e4dfc.entry.js.map +1 -0
- package/dist/native/p-ab002252.js +3 -0
- package/dist/native/p-ab002252.js.map +1 -0
- package/dist/native/{p-fde56f9c.entry.js → p-ab84ff42.entry.js} +2 -2
- package/dist/native/{p-fde56f9c.entry.js.map → p-ab84ff42.entry.js.map} +1 -1
- package/dist/native/{p-487b81bd.entry.js → p-b052f1cb.entry.js} +2 -2
- package/dist/native/{p-9795090f.entry.js → p-bdabd495.entry.js} +2 -2
- package/dist/native/p-bdabd495.entry.js.map +1 -0
- package/dist/native/p-be4fc827.entry.js +2 -0
- package/dist/native/p-be4fc827.entry.js.map +1 -0
- package/dist/native/{p-184cd119.entry.js → p-c10e5113.entry.js} +2 -2
- package/dist/native/{p-491f4605.entry.js → p-d5cbf5c8.entry.js} +2 -2
- package/dist/native/{p-491f4605.entry.js.map → p-d5cbf5c8.entry.js.map} +1 -1
- package/dist/native/{p-69fb1c9d.entry.js → p-db2902d6.entry.js} +2 -2
- package/dist/native/p-ecc28398.entry.js +2 -0
- package/dist/native/p-ecc28398.entry.js.map +1 -0
- package/dist/native/p-ed595c96.entry.js +2 -0
- package/dist/native/p-ed595c96.entry.js.map +1 -0
- package/dist/native/p-f5e0d5c5.entry.js +2 -0
- package/dist/native/p-f5e0d5c5.entry.js.map +1 -0
- package/dist/native/p-f89b7d06.entry.js +2 -0
- package/dist/types/components/nv-calendar/nv-calendar.d.ts +7 -0
- package/dist/types/components/nv-datagrid/nv-datagrid.d.ts +21 -0
- package/dist/types/components/nv-dialog/nv-dialog.d.ts +1 -0
- package/dist/types/components/nv-fielddate/nv-fielddate.d.ts +192 -0
- package/dist/types/components/nv-fielddate/nv-fielddate.docs.d.ts +4 -0
- package/dist/types/components/nv-fielddaterange/nv-fielddaterange.d.ts +206 -0
- package/dist/types/components/nv-fielddaterange/nv-fielddaterange.docs.d.ts +4 -0
- package/dist/types/components/nv-fielddropdown/nv-fielddropdown.d.ts +1 -3
- package/dist/types/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.d.ts +2 -0
- package/dist/types/components/nv-fieldmultiselect/nv-fieldmultiselect.d.ts +1 -11
- package/dist/types/components/nv-fieldnumber/nv-fieldnumber.d.ts +1 -0
- package/dist/types/components/nv-fieldpassword/nv-fieldpassword.d.ts +0 -1
- package/dist/types/components/nv-iconbutton/nv-iconbutton.d.ts +3 -0
- package/dist/types/components/nv-menu/nv-menu.d.ts +2 -3
- package/dist/types/components/nv-menuitem/nv-menuitem.d.ts +20 -16
- package/dist/types/components/nv-popover/nv-popover.d.ts +7 -4
- package/dist/types/components.d.ts +2344 -974
- package/dist/types/utils/constants.d.ts +6 -0
- package/dist/types/utils/input.utils.d.ts +8 -0
- package/dist/types/utils/test/input.utils.test.d.ts +1 -0
- package/hydrate/index.d.ts +22 -5
- package/hydrate/index.js +6403 -1242
- package/hydrate/index.mjs +6403 -1242
- package/package.json +7 -3
- package/dist/cjs/constants-79d2cdfc.js.map +0 -1
- package/dist/cjs/index-5910ba06.js.map +0 -1
- package/dist/cjs/nv-iconbutton.cjs.entry.js.map +0 -1
- package/dist/cjs/nv-loader.cjs.entry.js +0 -35
- package/dist/cjs/nv-loader.cjs.entry.js.map +0 -1
- package/dist/components/p-11cc38e0.js.map +0 -1
- package/dist/components/p-4bb5eb79.js.map +0 -1
- package/dist/components/p-69543282.js.map +0 -1
- package/dist/components/p-77d0fedc.js.map +0 -1
- package/dist/components/p-96605453.js +0 -172
- package/dist/components/p-96605453.js.map +0 -1
- package/dist/components/p-b316c35d.js.map +0 -1
- package/dist/components/p-d17558a8.js.map +0 -1
- package/dist/components/p-f77c3072.js.map +0 -1
- package/dist/components/p-fad78896.js.map +0 -1
- package/dist/esm/constants-75e6d7f0.js.map +0 -1
- package/dist/esm/index-fac2d5d2.js.map +0 -1
- package/dist/esm/nv-iconbutton.entry.js.map +0 -1
- package/dist/esm/nv-loader.entry.js +0 -31
- package/dist/esm/nv-loader.entry.js.map +0 -1
- package/dist/native/p-0a2a9f8b.entry.js +0 -2
- package/dist/native/p-0a2a9f8b.entry.js.map +0 -1
- package/dist/native/p-12d08abc.entry.js +0 -2
- package/dist/native/p-12d08abc.entry.js.map +0 -1
- package/dist/native/p-15be3d96.entry.js +0 -2
- package/dist/native/p-15be3d96.entry.js.map +0 -1
- package/dist/native/p-1a3d2a74.entry.js.map +0 -1
- package/dist/native/p-27ad7af2.entry.js.map +0 -1
- package/dist/native/p-2b2a10f9.entry.js +0 -2
- package/dist/native/p-2b2a10f9.entry.js.map +0 -1
- package/dist/native/p-359f0f53.entry.js +0 -2
- package/dist/native/p-359f0f53.entry.js.map +0 -1
- package/dist/native/p-3b65037c.entry.js +0 -2
- package/dist/native/p-3be2c9a1.entry.js +0 -2
- package/dist/native/p-4283f375.entry.js +0 -2
- package/dist/native/p-5439afb8.js +0 -3
- package/dist/native/p-5439afb8.js.map +0 -1
- package/dist/native/p-554f7b44.entry.js +0 -2
- package/dist/native/p-554f7b44.entry.js.map +0 -1
- package/dist/native/p-729c9d45.entry.js +0 -2
- package/dist/native/p-729c9d45.entry.js.map +0 -1
- package/dist/native/p-78f08578.entry.js +0 -2
- package/dist/native/p-78f08578.entry.js.map +0 -1
- package/dist/native/p-8664ab16.entry.js.map +0 -1
- package/dist/native/p-87bd53df.entry.js +0 -2
- package/dist/native/p-87bd53df.entry.js.map +0 -1
- package/dist/native/p-8d6516a3.entry.js +0 -2
- package/dist/native/p-8d6516a3.entry.js.map +0 -1
- package/dist/native/p-951baf95.entry.js +0 -2
- package/dist/native/p-9795090f.entry.js.map +0 -1
- package/dist/native/p-af60740c.entry.js.map +0 -1
- package/dist/native/p-b316c35d.js.map +0 -1
- package/dist/native/p-b7bc918b.entry.js +0 -2
- package/dist/native/p-cda56476.entry.js +0 -2
- package/dist/native/p-cda56476.entry.js.map +0 -1
- package/dist/native/p-d1bf4d77.entry.js +0 -2
- package/dist/native/p-d7665a07.entry.js +0 -2
- package/dist/native/p-d7665a07.entry.js.map +0 -1
- package/dist/native/p-daeb7e22.entry.js +0 -2
- package/dist/native/p-daeb7e22.entry.js.map +0 -1
- package/dist/native/p-e9e77494.entry.js.map +0 -1
- package/dist/native/p-f1585fc2.entry.js +0 -2
- package/dist/native/p-f1585fc2.entry.js.map +0 -1
- package/dist/native/p-f3579407.entry.js +0 -2
- package/dist/native/p-f3579407.entry.js.map +0 -1
- /package/dist/native/{p-3be2c9a1.entry.js.map → p-1a46cb52.entry.js.map} +0 -0
- /package/dist/native/{p-e36e956b.entry.js.map → p-442f04f9.entry.js.map} +0 -0
- /package/dist/native/{p-d1bf4d77.entry.js.map → p-46aa1136.entry.js.map} +0 -0
- /package/dist/native/{p-4283f375.entry.js.map → p-4dc1d036.entry.js.map} +0 -0
- /package/dist/native/{p-edee1c1f.entry.js.map → p-62df7dd4.entry.js.map} +0 -0
- /package/dist/native/{p-951baf95.entry.js.map → p-665db087.entry.js.map} +0 -0
- /package/dist/native/{p-b7bc918b.entry.js.map → p-68b5a92c.entry.js.map} +0 -0
- /package/dist/native/{p-b58c661b.entry.js.map → p-6a629671.entry.js.map} +0 -0
- /package/dist/native/{p-487b81bd.entry.js.map → p-b052f1cb.entry.js.map} +0 -0
- /package/dist/native/{p-184cd119.entry.js.map → p-c10e5113.entry.js.map} +0 -0
- /package/dist/native/{p-69fb1c9d.entry.js.map → p-db2902d6.entry.js.map} +0 -0
- /package/dist/native/{p-3b65037c.entry.js.map → p-f89b7d06.entry.js.map} +0 -0
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-
|
|
2
|
-
import { d as defineCustomElement$6 } from './p-
|
|
3
|
-
import { d as defineCustomElement$5 } from './p-
|
|
4
|
-
import { d as defineCustomElement$4 } from './p-
|
|
5
|
-
import { d as defineCustomElement$3 } from './p-
|
|
6
|
-
import { d as defineCustomElement$2 } from './p-
|
|
1
|
+
import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-1c45c0f2.js';
|
|
2
|
+
import { d as defineCustomElement$6 } from './p-9476354d.js';
|
|
3
|
+
import { d as defineCustomElement$5 } from './p-ebf24fd0.js';
|
|
4
|
+
import { d as defineCustomElement$4 } from './p-1e095bba.js';
|
|
5
|
+
import { d as defineCustomElement$3 } from './p-3a3ba5b1.js';
|
|
6
|
+
import { d as defineCustomElement$2 } from './p-057ae4f2.js';
|
|
7
7
|
import { v as v4 } from './p-f5ff676c.js';
|
|
8
8
|
|
|
9
|
-
const nvFielddropdownCss = "nv-fielddropdown{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box}nv-fielddropdown[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fielddropdown[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fielddropdown[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fielddropdown label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fielddropdown nv-popover{width:100%;display:block}nv-fielddropdown nv-popover [data-scope=popover]{width:100%;padding:var(--list-dropdown-padding);border-radius:var(--list-dropdown-radius);background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border)}nv-fielddropdown nv-popover [slot=content]{gap:var(--list-dropdown-gap-y);display:flex;flex-direction:column}nv-fielddropdown nv-popover hr{color:var(--components-list-dropdown-separator)}nv-fielddropdown .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fielddropdown .input-container{display:flex;flex-grow:1;
|
|
9
|
+
const nvFielddropdownCss = "nv-fielddropdown{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box}nv-fielddropdown[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fielddropdown[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fielddropdown[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fielddropdown label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fielddropdown nv-popover{width:100%;display:block}nv-fielddropdown nv-popover [data-scope=popover]{width:100%;padding:var(--list-dropdown-padding);border-radius:var(--list-dropdown-radius);background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border)}nv-fielddropdown nv-popover [slot=content]{gap:var(--list-dropdown-gap-y);display:flex;flex-direction:column}nv-fielddropdown nv-popover hr{color:var(--components-list-dropdown-separator)}nv-fielddropdown .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fielddropdown .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out;position:relative;width:100%;min-height:40px}nv-fielddropdown .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddropdown .input-container:focus-within,nv-fielddropdown .input-container:focus-within:hover,nv-fielddropdown .input-container:focus,nv-fielddropdown .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fielddropdown .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fielddropdown .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fielddropdown .input-container input[type=search]::-webkit-search-decoration,nv-fielddropdown .input-container input[type=search]::-webkit-search-cancel-button,nv-fielddropdown .input-container input[type=search]::-webkit-search-results-button,nv-fielddropdown .input-container input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}nv-fielddropdown .input-container input,nv-fielddropdown .input-container p.non-filterable-text{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height)}nv-fielddropdown .input-container input:focus,nv-fielddropdown .input-container p.non-filterable-text:focus{outline:none}nv-fielddropdown .input-container input::placeholder,nv-fielddropdown .input-container p.non-filterable-text::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fielddropdown .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fielddropdown .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fielddropdown .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddropdown .non-filterable-text{display:block;border-radius:var(--form-field-radius);background-color:var(--nv-field-background);color:var(--components-form-field-content-text);font-size:var(--form-field-font-size);font-weight:500;line-height:var(--form-field-line-height);box-sizing:border-box;cursor:pointer;height:100%;min-height:40px}nv-fielddropdown .non-filterable-text span{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis}nv-fielddropdown .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fielddropdown .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";
|
|
10
10
|
const NvFielddropdownStyle0 = nvFielddropdownCss;
|
|
11
11
|
|
|
12
12
|
const NvFielddropdown$1 = /*@__PURE__*/ proxyCustomElement(class NvFielddropdown extends H {
|
|
@@ -113,13 +113,6 @@ const NvFielddropdown$1 = /*@__PURE__*/ proxyCustomElement(class NvFielddropdown
|
|
|
113
113
|
this.filterText = input.value.toLowerCase();
|
|
114
114
|
this.filterItems();
|
|
115
115
|
};
|
|
116
|
-
this.handleClickOutside = (event) => {
|
|
117
|
-
if (this.el.contains(event.target) ||
|
|
118
|
-
(this.inputElement && this.inputElement.contains(event.target))) {
|
|
119
|
-
return;
|
|
120
|
-
}
|
|
121
|
-
this.open = false;
|
|
122
|
-
};
|
|
123
116
|
this.handleInputFocus = () => {
|
|
124
117
|
if (this.disabled || this.readonly)
|
|
125
118
|
return;
|
|
@@ -141,6 +134,12 @@ const NvFielddropdown$1 = /*@__PURE__*/ proxyCustomElement(class NvFielddropdown
|
|
|
141
134
|
? (_c = (_a = matchingItem.label) !== null && _a !== void 0 ? _a : (_b = matchingItem.textContent) === null || _b === void 0 ? void 0 : _b.trim()) !== null && _c !== void 0 ? _c : matchingItem.value
|
|
142
135
|
: '';
|
|
143
136
|
};
|
|
137
|
+
this.clearFilter = () => {
|
|
138
|
+
this.filterText = '';
|
|
139
|
+
this.inputElement.value = '';
|
|
140
|
+
this.inputElement.focus();
|
|
141
|
+
this.filterItems();
|
|
142
|
+
};
|
|
144
143
|
}
|
|
145
144
|
handleDropdownItemSelected(event) {
|
|
146
145
|
if (this.disabled || this.readonly)
|
|
@@ -168,6 +167,7 @@ const NvFielddropdown$1 = /*@__PURE__*/ proxyCustomElement(class NvFielddropdown
|
|
|
168
167
|
if (newValue) {
|
|
169
168
|
this.updateSelectedItem(newValue);
|
|
170
169
|
}
|
|
170
|
+
this.valueChanged.emit(newValue);
|
|
171
171
|
}
|
|
172
172
|
handleOptionsChange(newValue) {
|
|
173
173
|
if (newValue) {
|
|
@@ -230,9 +230,6 @@ const NvFielddropdown$1 = /*@__PURE__*/ proxyCustomElement(class NvFielddropdown
|
|
|
230
230
|
else if (event.key === 'Escape') {
|
|
231
231
|
event.preventDefault();
|
|
232
232
|
this.open = false;
|
|
233
|
-
if (this.inputElement) {
|
|
234
|
-
this.inputElement.blur();
|
|
235
|
-
}
|
|
236
233
|
}
|
|
237
234
|
}
|
|
238
235
|
//#endregion EVENTS
|
|
@@ -358,15 +355,12 @@ const NvFielddropdown$1 = /*@__PURE__*/ proxyCustomElement(class NvFielddropdown
|
|
|
358
355
|
//#endregion METHODS
|
|
359
356
|
/****************************************************************************/
|
|
360
357
|
//#region LIFECYCLE
|
|
361
|
-
|
|
362
|
-
document.addEventListener('click', this.handleClickOutside.bind(this));
|
|
358
|
+
componentWillLoad() {
|
|
363
359
|
this.resetFilter();
|
|
364
360
|
this.setInitialSelection();
|
|
365
361
|
if (this.filterable && this.filterText) {
|
|
366
362
|
this.filterItems();
|
|
367
363
|
}
|
|
368
|
-
}
|
|
369
|
-
componentWillLoad() {
|
|
370
364
|
if (this.options) {
|
|
371
365
|
this.handleOptionsChange(this.options);
|
|
372
366
|
}
|
|
@@ -375,22 +369,17 @@ const NvFielddropdown$1 = /*@__PURE__*/ proxyCustomElement(class NvFielddropdown
|
|
|
375
369
|
}
|
|
376
370
|
}
|
|
377
371
|
componentDidLoad() {
|
|
378
|
-
document.addEventListener('click', this.handleClickOutside.bind(this));
|
|
379
|
-
// Check again after complete rendering
|
|
380
372
|
if (this.value) {
|
|
381
373
|
this.updateSelectedItem(this.value);
|
|
382
374
|
}
|
|
383
375
|
}
|
|
384
|
-
disconnectedCallback() {
|
|
385
|
-
document.removeEventListener('click', this.handleClickOutside.bind(this));
|
|
386
|
-
}
|
|
387
376
|
//#endregion LIFECYCLE
|
|
388
377
|
/****************************************************************************/
|
|
389
378
|
//#region RENDER
|
|
390
379
|
render() {
|
|
391
|
-
return (h(Host, { key: '
|
|
392
|
-
this.el.querySelector('[slot="description"]')) && (h("div", { key: '
|
|
393
|
-
this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '
|
|
380
|
+
return (h(Host, { key: '189f41e526d7245f4d5fae078d2bea1528a9a8d1' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '91d5c635c4d37f5d6d3fef0e6dd3212009d1be35', htmlFor: this.inputId }, h("slot", { key: 'e749e641f077753464eaa21289ebf71c0b6f673b', name: "label" }, this.label))), h("nv-popover", { key: 'c3c0456e9937745b4784c7b858b9cfadcf4e7240', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { key: '1ad04f70880de711e371267859950d272f78902f', class: "input-wrapper", slot: "trigger" }, h("slot", { key: '99ff9d306c69aba7e5eb033feae1a05f7dcb01f6', name: "before-input" }), h("div", { key: '7afb87ecb3eacaf7510abd5b6b02645ba355f719', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: 'fe3749cdf9f25f0b7fd52949c955b1804fd65630', name: "leading-input" }), this.isFilterable || this.disabled || this.readonly ? (h("input", { id: this.inputId, type: "search", ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.getSelectedLabel(), required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onFocus: this.handleInputFocus, onKeyDown: this.handleKeyDown })) : (h("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClick, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocus }, h("span", null, this.getSelectedLabel() || this.value || this.placeholder))), this.isFilterable && this.filterText && this.open && (h("nv-iconbutton", { key: '9806da726e4dce22f0a73664b482a405cb7cc071', name: "x", size: "md", emphasis: "lower", class: "clear-button", onClick: this.clearFilter, "aria-label": "Clear input" })), this.error && (h("nv-icon", { key: '781fb90765533615737da8c294ce497f22dbd9c6', name: "alert-circle", class: "validation", size: "md" })), h("nv-iconbutton", { key: '1060f3a91606d26c3368299623b0d8211df5f6ec', "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopover, tabIndex: this.disabled ? -1 : 0 })), h("slot", { key: 'b123b91bb2c09f77010bef649d11a27bf16cb3ab', name: "after-input" })), h("div", { key: '94234acfe1881c11b3e6fadda0f234d036ea47ef', slot: "content" }, this.parsedOptions.length > 0 ? (h("ul", null, this.parsedOptions.map(option => (h("nv-fielddropdownitem", { label: option.label, value: option.value, disabled: option.disabled, selected: option.value === this.value }))))) : (h("slot", { name: "content" })))), (this.description ||
|
|
381
|
+
this.el.querySelector('[slot="description"]')) && (h("div", { key: '26de437b142f81e21145ac4f6a15c7e6aecfbfa7', class: "description" }, h("slot", { key: '6c95582790d276567ad9e1619a949419a72f54c1', name: "description" }, this.description))), (this.errorDescription ||
|
|
382
|
+
this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '6ac20b9462e708a456e61c8e3721a585b03e696e', hidden: !this.error, class: "error-description" }, h("slot", { key: '1def9c4e17495a831ea9702ae121c64e812df9b6', name: "error-description" }, this.errorDescription)))));
|
|
394
383
|
}
|
|
395
384
|
static get formAssociated() { return true; }
|
|
396
385
|
get el() { return this; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"nv-fielddropdown.js","mappings":"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","names":["NvFielddropdown","uuidv4"],"sources":["src/components/nv-fielddropdown/styles/nv-fielddropdown.scss?tag=nv-fielddropdown","src/components/nv-fielddropdown/nv-fielddropdown.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n@import '../../../styles/form-field';\n\nnv-fielddropdown {\n @include form-field-variables();\n @include form-field-root();\n\n &[readonly]:not([readonly='false']) {\n @include form-field-readonly-variables();\n }\n\n &[error]:not([error='false']) {\n @include form-field-error-variables();\n }\n\n &[required]:not([required='false']) label {\n @include form-field-label-required();\n }\n\n label {\n @include form-field-label();\n }\n\n nv-popover {\n @include form-field-popover();\n }\n\n .input-wrapper {\n @include form-field-input-wrapper();\n @include input-wrapper-styles();\n }\n\n .input-container {\n @include form-field-input-container();\n @include input-container-styles();\n\n input,\n p.non-filterable-text {\n @include form-field-input();\n @include input-styles();\n }\n\n .toggle-dropdown-icon {\n @include toggle-dropdown-icon-styles();\n }\n\n nv-icon.validation {\n @include form-field-icon();\n @include validation-icon-styles();\n }\n }\n\n .non-filterable-text {\n @include non-filterable-text-styles();\n }\n\n .description {\n @include form-field-description();\n }\n\n .error-description {\n @include form-field-error-description();\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n State,\n Listen,\n Event,\n EventEmitter,\n Watch,\n Method,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { TextInputAutocomplete } from '../../utils/constants';\n\n/**\n * @slot content - Use a <ul></ul> tag for the slot, and place <nv-dropdownitem> elements inside.\n * @slot leading-input - Content to be placed before the input text, within the input container.\n * @slot before-input - Content to be placed before the input text, outside the input container.\n * @slot after-input - Content to be placed after the input text, outside the input container.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n tag: 'nv-fielddropdown',\n styleUrl: 'styles/nv-fielddropdown.scss',\n shadow: false,\n formAssociated: true,\n})\nexport class NvFielddropdown {\n @Element() el: HTMLNvFielddropdownElement;\n private inputElement!: HTMLInputElement;\n private popoverElement!: HTMLNvPopoverElement;\n\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * Sets the ID for the input element and the for attribute of the associated\n * label. If no ID is provided, a random one will be automatically generated\n * to ensure unique identification, facilitating proper label association and\n * accessibility.\n */\n @Prop({ reflect: true })\n readonly inputId: string = uuidv4();\n\n /**\n * Lets you define the text that explains what users should enter in the text\n * input field. It's a crucial element for making forms clear and\n * user-friendly.\n */\n @Prop({ reflect: true })\n readonly label: string;\n\n /**\n * Add helpful hints or extra information under the text input field. This is\n * where you can clarify what users should enter or provide additional\n * instructions, making the form easier to fill out correctly.\n */\n @Prop({ reflect: true })\n readonly description: string;\n\n /**\n * Display temporary text inside the input field to give users a hint about\n * what to type. It's a great way to provide examples or suggestions directly\n * in the field before they start typing.\n * The placeholder is displayed only when the filterable option is enabled.\n */\n @Prop({ reflect: true })\n readonly placeholder: string;\n\n /**\n * Defines the name attribute of the input field, which is crucial for form\n * submission. This value is used as the key in the key-value pair sent to\n * the server, representing the input's data in form submissions. It should be\n * unique within the form to avoid conflicts.\n */\n @Prop({ reflect: true })\n readonly name: string;\n\n /**\n * State of the dropdown popover.\n */\n @Prop({ reflect: true, mutable: true })\n open: boolean = false;\n\n /**\n * The autocomplete prop helps users fill out the input field faster by\n * suggesting entries they've used before, like their email or address.\n * You can turn it on to make forms more convenient or off to ensure users\n * always type in fresh data.\n */\n @Prop({ reflect: true })\n readonly autocomplete: `${TextInputAutocomplete}` = 'off';\n\n /**\n * Specifies the value of the input field, which determines the text displayed\n * within the field. This prop is typically used in controlled components\n * where the input's value is managed by the component's state.\n */\n @Prop({ reflect: true, mutable: true })\n value: string;\n\n /**\n * Marks the input field as required, ensuring that the user must fill it out\n * before submitting the form.\n */\n @Prop({ reflect: true })\n readonly required: boolean = false;\n\n /**\n * Alters the input field's appearance to indicate an error, helping users\n * identify fields that need correction.\n * @validator error\n */\n @Prop({ reflect: true })\n readonly error: boolean = false;\n\n /**\n * A description that appears when there is an error related to the dropdown\n * field.\n * @validator message\n */\n @Prop({ reflect: true })\n readonly errorDescription: string;\n\n /**\n * Display the input field's content without allowing users to change it.\n * Users can still click on it, select, and copy the text, but they won't be\n * able to type or delete anything.\n */\n @Prop({ reflect: true })\n readonly readonly: boolean = false;\n\n /**\n * The disabled prop lets you turn off the input field so that users can't\n * type in it. When disabled, the field is grayed out and won't respond to\n * clicks or touches.\n */\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /**\n * The text to display when no items match the filter.\n */\n @Prop({ reflect: true })\n readonly emptyResult: string = 'No results found';\n\n /**\n * Enables or disables the filtering feature for the dropdown items.\n */\n @Prop({ reflect: true, mutable: true })\n filterable: boolean = false;\n\n /**\n * List of options available in the dropdown. The options are passed as a JSON\n * string.\n *\n * @example\n * options=[{\n * \"label\": \"Option 1\",\n * \"value\": \"option1\",\n * \"selected\": true\n * },\n * {\n * \"label\": \"Option 2\",\n * \"value\": \"option2\"\n * }]\n */\n @Prop({ reflect: true })\n readonly options?: string;\n\n /**\n * Applies focus to the input field as soon as the component is mounted. This\n * is equivalent to setting the native autofocus attribute on an <input>\n * element.\n */\n @Prop({ reflect: true })\n // eslint-disable-next-line @stencil-community/reserved-member-names\n readonly autofocus: boolean = false;\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region STATE\n\n /** The text entered by the user for filtering dropdown items. */\n @State()\n filterText: string = '';\n\n @State()\n isFilterable: boolean = this.filterable;\n\n @State()\n selectedValues: Set<string> = new Set();\n\n /**\n * Options configuration for the dropdown items.\n */\n @State()\n parsedOptions: Array<{\n /** Label to display for the option */\n label: string;\n /** Value associated with the option */\n value: string;\n /** Whether this option is disabled */\n disabled?: boolean;\n /** Whether this option is pre-selected */\n selected?: boolean;\n }> = [];\n\n //#endregion STATE\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Emitted when the input value changes.\n * @bind value\n */\n @Event()\n valueChanged: EventEmitter<string>;\n\n /**\n * Event emitted when an item is clicked.\n */\n @Event()\n dropdownItemSelected: EventEmitter<\n HTMLNvFielddropdownitemElementEventMap['dropdownItemSelected']\n >;\n\n @Listen('dropdownItemSelected')\n handleDropdownItemSelected(\n event: CustomEvent<\n HTMLNvFielddropdownitemElementEventMap['dropdownItemSelected']\n >,\n ) {\n if (this.disabled || this.readonly) return;\n\n const items = Array.from(\n this.el.querySelectorAll('nv-fielddropdownitem'),\n ) as HTMLNvFielddropdownitemElement[];\n\n items.forEach(item => {\n if (item !== event.target) {\n item.removeAttribute('selected');\n } else {\n item.setAttribute('selected', 'true');\n }\n });\n\n this.value = event.detail.value;\n this.open = false;\n }\n\n @Listen('openChanged')\n handleOpenChanged(event: CustomEvent<boolean>) {\n this.open = event.detail; // Update `open` based on the popover state\n }\n\n @Watch('filterable')\n watchFilterableHandler(newValue: boolean) {\n this.isFilterable = newValue;\n this.filterable = newValue;\n }\n\n @Watch('value')\n watchValueHandler(newValue: string) {\n if (newValue) {\n this.updateSelectedItem(newValue);\n }\n }\n\n @Watch('options')\n handleOptionsChange(newValue: string) {\n if (newValue) {\n try {\n const parsedOpts = JSON.parse(newValue);\n this.parsedOptions = [...parsedOpts];\n const selectedOption = this.parsedOptions.find(opt => opt.selected);\n\n if (selectedOption) {\n this.value = selectedOption.value;\n requestAnimationFrame(() => {\n // Wait for items to be rendered\n this.updateSelectedItem(selectedOption.value);\n });\n }\n } catch (error) {\n console.error('nv-fielddropdown: error parsing options:', error);\n this.parsedOptions = [];\n }\n } else {\n this.parsedOptions = [];\n }\n }\n\n @Listen('blur', { capture: true })\n handleBlur(event: FocusEvent) {\n const target = event.relatedTarget;\n\n if (!(target instanceof Node) || !this.el.contains(target)) {\n this.open = false;\n }\n }\n\n @Listen('keydown', { passive: false })\n handleKeyDown(event: KeyboardEvent) {\n if (!this.open) {\n if (event.key === 'ArrowDown') {\n this.open = true;\n\n if (!this.filterable) {\n // Focus on the first item if it is not filterable\n this.focusFirstItem();\n }\n\n event.preventDefault();\n return;\n }\n return;\n }\n\n const items = Array.from(\n this.el.querySelectorAll('nv-fielddropdownitem:not([data-empty])'),\n ) as HTMLNvFielddropdownitemElement[];\n\n if (items.length === 0) {\n console.warn('No dropdown items found to navigate');\n return;\n }\n\n let currentIndex = items.findIndex(item =>\n item.classList.contains('highlighted'),\n );\n\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n currentIndex = (currentIndex + 1) % items.length;\n this.updateHighlightedItem(items, currentIndex);\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n currentIndex = (currentIndex - 1 + items.length) % items.length;\n this.updateHighlightedItem(items, currentIndex);\n } else if (event.key === 'Escape') {\n event.preventDefault();\n this.open = false;\n if (this.inputElement) {\n this.inputElement.blur();\n }\n }\n }\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region METHODS\n\n /**\n * Retrieves the current filter text entered by the user.\n * @returns {string} The filter text.\n */\n @Method()\n async getFilterText(): Promise<string> {\n return this.filterText;\n }\n\n /**\n * Set the initial selection based on the current value and update the\n * inputElement value.\n */\n private setInitialSelection() {\n if (!this.value) return;\n\n const items = Array.from(\n this.el.querySelectorAll('nv-fielddropdownitem'),\n ) as HTMLNvFielddropdownitemElement[];\n\n const selectedItem = items.find(\n item => item.getAttribute('value') === this.value,\n );\n\n items.forEach(item => {\n item.removeAttribute('selected');\n item.classList.remove('selected');\n });\n\n if (selectedItem) {\n selectedItem.setAttribute('selected', 'true');\n selectedItem.classList.add('selected');\n this.value = selectedItem.getAttribute('value');\n if (this.inputElement) {\n this.inputElement.value = this.value;\n }\n } else {\n console.warn('No matching item found for value:', this.value);\n }\n }\n\n private handleInputContainerClick = (event: MouseEvent) => {\n if (this.disabled || this.readonly) {\n return;\n }\n\n const target = event.target as HTMLElement;\n\n if (target.tagName === 'P' || target.tagName === 'SPAN') {\n this.open = true;\n\n // Simulate focus to trigger \"focus-within\" style\n const inputContainer = this.el.querySelector(\n '.input-container',\n ) as HTMLElement;\n if (inputContainer) {\n inputContainer.classList.add('focus-within');\n\n // Remove the \"focus-within\" class after a delay or when the popover is closed\n const removeFocusWithin = () => {\n inputContainer.classList.remove('focus-within');\n };\n\n // Or remove the class when the popover is closed\n this.popoverElement.addEventListener('hide', removeFocusWithin);\n }\n }\n };\n\n private handleInput = (event: Event) => {\n if (!this.filterable) return;\n if (this.disabled || this.readonly) {\n return;\n }\n\n const input = event.target as HTMLInputElement;\n this.filterText = input.value.toLowerCase();\n this.filterItems();\n };\n\n /**\n * Filter dropdown items based on the text entered by the user.\n * If no items are found, display a message indicating no results.\n */\n private filterItems() {\n const items = Array.from(\n this.el.querySelectorAll('nv-fielddropdownitem'),\n ) as HTMLNvFielddropdownitemElement[];\n\n // Remove the \"no results found\" item if it exists\n const existingEmptyItem = this.el.querySelector(\n 'nv-fielddropdownitem[data-empty]',\n );\n if (existingEmptyItem) {\n existingEmptyItem.remove();\n }\n\n let hasVisibleItems = false;\n\n // Iterate over all items and adjust their visibility\n items.forEach(item => {\n const textContent = item.textContent?.toLowerCase() || ''; // Get the textual content of the slot\n const value = item.value?.toLowerCase() || ''; // Get the value of the `value` attribute\n\n // Check if the filtered text is present either in the value or in the textual content\n const shouldShow =\n value.includes(this.filterText) ||\n textContent.includes(this.filterText);\n\n item.style.display = shouldShow ? '' : 'none'; // Hide or show the item\n\n if (shouldShow) {\n hasVisibleItems = true;\n }\n });\n\n // If no items are visible, add the \"no results found\" item\n if (!hasVisibleItems) {\n const emptyItem = document.createElement('nv-fielddropdownitem');\n emptyItem.setAttribute('data-empty', 'true');\n emptyItem.setAttribute('disabled', 'true');\n emptyItem.textContent = this.emptyResult;\n this.el.querySelector('ul[slot=\"content\"]')?.appendChild(emptyItem);\n }\n }\n\n /** Reset the filter and make all items visible. */\n private resetFilter() {\n const items = Array.from(\n this.el.querySelectorAll('nv-fielddropdownitem'),\n ) as HTMLNvFielddropdownitemElement[];\n\n items.forEach(item => {\n item.style.display = '';\n });\n }\n\n private handleClickOutside = (event: MouseEvent) => {\n if (\n this.el.contains(event.target as Node) ||\n (this.inputElement && this.inputElement.contains(event.target as Node))\n ) {\n return;\n }\n\n this.open = false;\n };\n\n private handleInputFocus = () => {\n if (this.disabled || this.readonly) return;\n\n this.open = true;\n };\n\n private togglePopover = () => {\n if (this.disabled || this.readonly) return;\n\n this.open = !this.open;\n\n if (this.open && !this.filterable) {\n this.focusFirstItem();\n }\n };\n\n private updateHighlightedItem(\n items: HTMLNvFielddropdownitemElement[],\n index: number,\n ) {\n items.forEach((item, i) => {\n if (i === index) {\n item.classList.add('highlighted');\n item.focus();\n item.scrollIntoView({ block: 'nearest' });\n } else {\n item.classList.remove('highlighted');\n }\n });\n }\n\n private focusFirstItem() {\n const firstItem = this.el.querySelector('nv-fielddropdownitem');\n if (firstItem) {\n (firstItem as HTMLElement).focus();\n this.updateHighlightedItem(\n Array.from(\n this.el.querySelectorAll('nv-fielddropdownitem'),\n ) as HTMLNvFielddropdownitemElement[],\n 0,\n );\n } else {\n console.warn('nv-fielddropdown: no first item found to focus');\n }\n }\n\n private updateSelectedItem(value: string) {\n const items = Array.from(\n this.el.querySelectorAll('nv-fielddropdownitem'),\n ) as HTMLNvFielddropdownitemElement[];\n\n const matchingItem = items.find(item => {\n const itemLabel = item.getAttribute('label');\n const itemValue = item.getAttribute('value');\n const itemText = item.textContent?.trim();\n\n return itemLabel === value || itemValue === value || itemText === value;\n });\n\n items.forEach(item => {\n if (item === matchingItem) {\n item.setAttribute('selected', '');\n } else {\n item.removeAttribute('selected');\n }\n });\n\n if (matchingItem && this.inputElement) {\n this.inputElement.value = value;\n }\n }\n\n private getSelectedLabel = (): string => {\n const items = Array.from(\n this.el.querySelectorAll('nv-fielddropdownitem'),\n ) as HTMLNvFielddropdownitemElement[];\n\n const matchingItem = items.find(\n item => item.getAttribute('value') === this.value,\n );\n return matchingItem\n ? matchingItem.label ??\n matchingItem.textContent?.trim() ??\n matchingItem.value\n : '';\n };\n\n //#endregion METHODS\n /****************************************************************************/\n //#region LIFECYCLE\n\n connectedCallback() {\n document.addEventListener('click', this.handleClickOutside.bind(this));\n\n this.resetFilter();\n this.setInitialSelection();\n\n if (this.filterable && this.filterText) {\n this.filterItems();\n }\n }\n\n componentWillLoad() {\n if (this.options) {\n this.handleOptionsChange(this.options);\n }\n\n if (this.value) {\n this.updateSelectedItem(this.value);\n }\n }\n\n componentDidLoad() {\n document.addEventListener('click', this.handleClickOutside.bind(this));\n\n // Check again after complete rendering\n if (this.value) {\n this.updateSelectedItem(this.value);\n }\n }\n\n disconnectedCallback() {\n document.removeEventListener('click', this.handleClickOutside.bind(this));\n }\n\n //#endregion LIFECYCLE\n /****************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host>\n {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n <label htmlFor={this.inputId}>\n <slot name=\"label\">{this.label}</slot>\n </label>\n )}\n\n <nv-popover\n ref={el => (this.popoverElement = el as HTMLNvPopoverElement)}\n triggerMode=\"controlled\"\n placement=\"bottom-start\"\n open={this.open}\n >\n <div class=\"input-wrapper\" slot=\"trigger\">\n <slot name=\"before-input\"></slot>\n\n <div\n class=\"input-container\"\n onClick={this.handleInputContainerClick}\n >\n <slot name=\"leading-input\"></slot>\n\n {this.isFilterable || this.disabled || this.readonly ? (\n <input\n id={this.inputId}\n type=\"search\"\n ref={e => (this.inputElement = e)}\n autofocus={this.autofocus}\n autocomplete={this.autocomplete}\n placeholder={this.placeholder}\n name={this.name}\n value={this.getSelectedLabel()}\n required={this.required}\n disabled={this.disabled}\n readOnly={this.readonly}\n onInput={this.handleInput}\n onFocus={this.handleInputFocus}\n onKeyDown={this.handleKeyDown}\n />\n ) : (\n <p\n id={this.inputId}\n class=\"non-filterable-text\"\n onClick={this.handleInputContainerClick}\n tabIndex={this.disabled ? -1 : 0}\n onKeyDown={this.handleKeyDown}\n onFocus={this.handleInputFocus}\n >\n <span>\n {this.getSelectedLabel() || this.value || this.placeholder}\n </span>\n </p>\n )}\n\n <nv-iconbutton\n class=\"toggle-dropdown-icon\"\n name={this.open ? 'chevron-top' : 'chevron-down'}\n size=\"md\"\n emphasis=\"lower\"\n aria-label={this.open ? 'Hide dropdown' : 'Show dropdown'}\n aria-pressed={this.open.toString()}\n onClick={this.togglePopover}\n tabIndex={this.disabled ? -1 : 0}\n />\n </div>\n\n <slot name=\"after-input\"></slot>\n </div>\n\n <div slot=\"content\">\n {this.parsedOptions.length > 0 ? (\n <ul>\n {this.parsedOptions.map(option => (\n <nv-fielddropdownitem\n label={option.label}\n value={option.value}\n disabled={option.disabled}\n selected={option.value === this.value}\n />\n ))}\n </ul>\n ) : (\n <slot name=\"content\"></slot>\n )}\n </div>\n </nv-popover>\n\n {(this.description ||\n this.el.querySelector('[slot=\"description\"]')) && (\n <div class=\"description\">\n <slot name=\"description\">{this.description}</slot>\n </div>\n )}\n\n {(this.errorDescription ||\n this.el.querySelector('[slot=\"error-description\"]')) && (\n <div hidden={!this.error} class=\"error-description\">\n <slot name=\"error-description\">{this.errorDescription}</slot>\n </div>\n )}\n </Host>\n );\n }\n //#endregion RENDER\n}\n"],"version":3}
|
|
1
|
+
{"file":"nv-fielddropdown.js","mappings":"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","names":["NvFielddropdown","uuidv4"],"sources":["src/components/nv-fielddropdown/styles/nv-fielddropdown.scss?tag=nv-fielddropdown","src/components/nv-fielddropdown/nv-fielddropdown.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n@import '../../../styles/form-field';\n\nnv-fielddropdown {\n @include form-field-variables();\n @include form-field-root();\n\n &[readonly]:not([readonly='false']) {\n @include form-field-readonly-variables();\n }\n\n &[error]:not([error='false']) {\n @include form-field-error-variables();\n }\n\n &[required]:not([required='false']) label {\n @include form-field-label-required();\n }\n\n label {\n @include form-field-label();\n }\n\n nv-popover {\n @include form-field-popover();\n }\n\n .input-wrapper {\n @include form-field-input-wrapper();\n @include input-wrapper-styles();\n }\n\n .input-container {\n @include form-field-input-container();\n @include input-container-styles();\n\n input[type=\"search\"]::-webkit-search-decoration,\n input[type=\"search\"]::-webkit-search-cancel-button,\n input[type=\"search\"]::-webkit-search-results-button,\n input[type=\"search\"]::-webkit-search-results-decoration {\n -webkit-appearance:none;\n }\n\n input,\n p.non-filterable-text {\n @include form-field-input();\n }\n\n > nv-iconbutton {\n @include form-field-action();\n }\n\n nv-icon.validation {\n @include form-field-icon();\n }\n }\n\n .non-filterable-text {\n @include non-filterable-text-styles();\n }\n\n .description {\n @include form-field-description();\n }\n\n .error-description {\n @include form-field-error-description();\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n State,\n Listen,\n Event,\n EventEmitter,\n Watch,\n Method,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { TextInputAutocomplete } from '../../utils/constants';\n\n/**\n * @slot content - Use a <ul></ul> tag for the slot, and place <nv-dropdownitem> elements inside.\n * @slot leading-input - Content to be placed before the input text, within the input container.\n * @slot before-input - Content to be placed before the input text, outside the input container.\n * @slot after-input - Content to be placed after the input text, outside the input container.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n tag: 'nv-fielddropdown',\n styleUrl: 'styles/nv-fielddropdown.scss',\n shadow: false,\n formAssociated: true,\n})\nexport class NvFielddropdown {\n @Element() el: HTMLNvFielddropdownElement;\n private inputElement!: HTMLInputElement;\n private popoverElement!: HTMLNvPopoverElement;\n\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * Sets the ID for the input element and the for attribute of the associated\n * label. If no ID is provided, a random one will be automatically generated\n * to ensure unique identification, facilitating proper label association and\n * accessibility.\n */\n @Prop({ reflect: true })\n readonly inputId: string = uuidv4();\n\n /**\n * Lets you define the text that explains what users should enter in the text\n * input field. It's a crucial element for making forms clear and\n * user-friendly.\n */\n @Prop({ reflect: true })\n readonly label: string;\n\n /**\n * Add helpful hints or extra information under the text input field. This is\n * where you can clarify what users should enter or provide additional\n * instructions, making the form easier to fill out correctly.\n */\n @Prop({ reflect: true })\n readonly description: string;\n\n /**\n * Display temporary text inside the input field to give users a hint about\n * what to type. It's a great way to provide examples or suggestions directly\n * in the field before they start typing.\n * The placeholder is displayed only when the filterable option is enabled.\n */\n @Prop({ reflect: true })\n readonly placeholder: string;\n\n /**\n * Defines the name attribute of the input field, which is crucial for form\n * submission. This value is used as the key in the key-value pair sent to\n * the server, representing the input's data in form submissions. It should be\n * unique within the form to avoid conflicts.\n */\n @Prop({ reflect: true })\n readonly name: string;\n\n /**\n * State of the dropdown popover.\n */\n @Prop({ reflect: true, mutable: true })\n open: boolean = false;\n\n /**\n * The autocomplete prop helps users fill out the input field faster by\n * suggesting entries they've used before, like their email or address.\n * You can turn it on to make forms more convenient or off to ensure users\n * always type in fresh data.\n */\n @Prop({ reflect: true })\n readonly autocomplete: `${TextInputAutocomplete}` = 'off';\n\n /**\n * Specifies the value of the input field, which determines the text displayed\n * within the field. This prop is typically used in controlled components\n * where the input's value is managed by the component's state.\n */\n @Prop({ reflect: true, mutable: true })\n value: string;\n\n /**\n * Marks the input field as required, ensuring that the user must fill it out\n * before submitting the form.\n */\n @Prop({ reflect: true })\n readonly required: boolean = false;\n\n /**\n * Alters the input field's appearance to indicate an error, helping users\n * identify fields that need correction.\n * @validator error\n */\n @Prop({ reflect: true })\n readonly error: boolean = false;\n\n /**\n * A description that appears when there is an error related to the dropdown\n * field.\n * @validator message\n */\n @Prop({ reflect: true })\n readonly errorDescription: string;\n\n /**\n * Display the input field's content without allowing users to change it.\n * Users can still click on it, select, and copy the text, but they won't be\n * able to type or delete anything.\n */\n @Prop({ reflect: true })\n readonly readonly: boolean = false;\n\n /**\n * The disabled prop lets you turn off the input field so that users can't\n * type in it. When disabled, the field is grayed out and won't respond to\n * clicks or touches.\n */\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /**\n * The text to display when no items match the filter.\n */\n @Prop({ reflect: true })\n readonly emptyResult: string = 'No results found';\n\n /**\n * Enables or disables the filtering feature for the dropdown items.\n */\n @Prop({ reflect: true, mutable: true })\n filterable: boolean = false;\n\n /**\n * List of options available in the dropdown. The options are passed as a JSON\n * string.\n *\n * @example\n * options=[{\n * \"label\": \"Option 1\",\n * \"value\": \"option1\",\n * \"selected\": true\n * },\n * {\n * \"label\": \"Option 2\",\n * \"value\": \"option2\"\n * }]\n */\n @Prop({ reflect: true })\n readonly options?: string;\n\n /**\n * Applies focus to the input field as soon as the component is mounted. This\n * is equivalent to setting the native autofocus attribute on an <input>\n * element.\n */\n @Prop({ reflect: true })\n // eslint-disable-next-line @stencil-community/reserved-member-names\n readonly autofocus: boolean = false;\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region STATE\n\n /** The text entered by the user for filtering dropdown items. */\n @State()\n filterText: string = '';\n\n @State()\n isFilterable: boolean = this.filterable;\n\n @State()\n selectedValues: Set<string> = new Set();\n\n /**\n * Options configuration for the dropdown items.\n */\n @State()\n parsedOptions: Array<{\n /** Label to display for the option */\n label: string;\n /** Value associated with the option */\n value: string;\n /** Whether this option is disabled */\n disabled?: boolean;\n /** Whether this option is pre-selected */\n selected?: boolean;\n }> = [];\n\n //#endregion STATE\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Emitted when the input value changes.\n * @bind value\n */\n @Event()\n valueChanged: EventEmitter<string>;\n\n /**\n * Event emitted when an item is clicked.\n */\n @Event()\n dropdownItemSelected: EventEmitter<\n HTMLNvFielddropdownitemElementEventMap['dropdownItemSelected']\n >;\n\n @Listen('dropdownItemSelected')\n handleDropdownItemSelected(\n event: CustomEvent<\n HTMLNvFielddropdownitemElementEventMap['dropdownItemSelected']\n >,\n ) {\n if (this.disabled || this.readonly) return;\n\n const items = Array.from(\n this.el.querySelectorAll('nv-fielddropdownitem'),\n ) as HTMLNvFielddropdownitemElement[];\n\n items.forEach(item => {\n if (item !== event.target) {\n item.removeAttribute('selected');\n } else {\n item.setAttribute('selected', 'true');\n }\n });\n\n this.value = event.detail.value;\n this.open = false;\n }\n\n @Listen('openChanged')\n handleOpenChanged(event: CustomEvent<boolean>) {\n this.open = event.detail; // Update `open` based on the popover state\n }\n\n @Watch('filterable')\n watchFilterableHandler(newValue: boolean) {\n this.isFilterable = newValue;\n this.filterable = newValue;\n }\n\n @Watch('value')\n watchValueHandler(newValue: string) {\n if (newValue) {\n this.updateSelectedItem(newValue);\n }\n this.valueChanged.emit(newValue);\n }\n\n @Watch('options')\n handleOptionsChange(newValue: string) {\n if (newValue) {\n try {\n const parsedOpts = JSON.parse(newValue);\n this.parsedOptions = [...parsedOpts];\n const selectedOption = this.parsedOptions.find(opt => opt.selected);\n\n if (selectedOption) {\n this.value = selectedOption.value;\n requestAnimationFrame(() => {\n // Wait for items to be rendered\n this.updateSelectedItem(selectedOption.value);\n });\n }\n } catch (error) {\n console.error('nv-fielddropdown: error parsing options:', error);\n this.parsedOptions = [];\n }\n } else {\n this.parsedOptions = [];\n }\n }\n\n @Listen('blur', { capture: true })\n handleBlur(event: FocusEvent) {\n const target = event.relatedTarget;\n\n if (!(target instanceof Node) || !this.el.contains(target)) {\n this.open = false;\n }\n }\n\n @Listen('keydown', { passive: false })\n handleKeyDown(event: KeyboardEvent) {\n if (!this.open) {\n if (event.key === 'ArrowDown') {\n this.open = true;\n\n if (!this.filterable) {\n // Focus on the first item if it is not filterable\n this.focusFirstItem();\n }\n\n event.preventDefault();\n return;\n }\n return;\n }\n\n const items = Array.from(\n this.el.querySelectorAll('nv-fielddropdownitem:not([data-empty])'),\n ) as HTMLNvFielddropdownitemElement[];\n\n if (items.length === 0) {\n console.warn('No dropdown items found to navigate');\n return;\n }\n\n let currentIndex = items.findIndex(item =>\n item.classList.contains('highlighted'),\n );\n\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n currentIndex = (currentIndex + 1) % items.length;\n this.updateHighlightedItem(items, currentIndex);\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n currentIndex = (currentIndex - 1 + items.length) % items.length;\n this.updateHighlightedItem(items, currentIndex);\n } else if (event.key === 'Escape') {\n event.preventDefault();\n this.open = false;\n }\n }\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region METHODS\n\n /**\n * Retrieves the current filter text entered by the user.\n * @returns {string} The filter text.\n */\n @Method()\n async getFilterText(): Promise<string> {\n return this.filterText;\n }\n\n /**\n * Set the initial selection based on the current value and update the\n * inputElement value.\n */\n private setInitialSelection() {\n if (!this.value) return;\n\n const items = Array.from(\n this.el.querySelectorAll('nv-fielddropdownitem'),\n ) as HTMLNvFielddropdownitemElement[];\n\n const selectedItem = items.find(\n item => item.getAttribute('value') === this.value,\n );\n\n items.forEach(item => {\n item.removeAttribute('selected');\n item.classList.remove('selected');\n });\n\n if (selectedItem) {\n selectedItem.setAttribute('selected', 'true');\n selectedItem.classList.add('selected');\n this.value = selectedItem.getAttribute('value');\n if (this.inputElement) {\n this.inputElement.value = this.value;\n }\n } else {\n console.warn('No matching item found for value:', this.value);\n }\n }\n\n private handleInputContainerClick = (event: MouseEvent) => {\n if (this.disabled || this.readonly) {\n return;\n }\n\n const target = event.target as HTMLElement;\n\n if (target.tagName === 'P' || target.tagName === 'SPAN') {\n this.open = true;\n\n // Simulate focus to trigger \"focus-within\" style\n const inputContainer = this.el.querySelector(\n '.input-container',\n ) as HTMLElement;\n if (inputContainer) {\n inputContainer.classList.add('focus-within');\n\n // Remove the \"focus-within\" class after a delay or when the popover is closed\n const removeFocusWithin = () => {\n inputContainer.classList.remove('focus-within');\n };\n\n // Or remove the class when the popover is closed\n this.popoverElement.addEventListener('hide', removeFocusWithin);\n }\n }\n };\n\n private handleInput = (event: Event) => {\n if (!this.filterable) return;\n if (this.disabled || this.readonly) {\n return;\n }\n\n const input = event.target as HTMLInputElement;\n this.filterText = input.value.toLowerCase();\n this.filterItems();\n };\n\n /**\n * Filter dropdown items based on the text entered by the user.\n * If no items are found, display a message indicating no results.\n */\n private filterItems() {\n const items = Array.from(\n this.el.querySelectorAll('nv-fielddropdownitem'),\n ) as HTMLNvFielddropdownitemElement[];\n\n // Remove the \"no results found\" item if it exists\n const existingEmptyItem = this.el.querySelector(\n 'nv-fielddropdownitem[data-empty]',\n );\n if (existingEmptyItem) {\n existingEmptyItem.remove();\n }\n\n let hasVisibleItems = false;\n\n // Iterate over all items and adjust their visibility\n items.forEach(item => {\n const textContent = item.textContent?.toLowerCase() || ''; // Get the textual content of the slot\n const value = item.value?.toLowerCase() || ''; // Get the value of the `value` attribute\n\n // Check if the filtered text is present either in the value or in the textual content\n const shouldShow =\n value.includes(this.filterText) ||\n textContent.includes(this.filterText);\n\n item.style.display = shouldShow ? '' : 'none'; // Hide or show the item\n\n if (shouldShow) {\n hasVisibleItems = true;\n }\n });\n\n // If no items are visible, add the \"no results found\" item\n if (!hasVisibleItems) {\n const emptyItem = document.createElement('nv-fielddropdownitem');\n emptyItem.setAttribute('data-empty', 'true');\n emptyItem.setAttribute('disabled', 'true');\n emptyItem.textContent = this.emptyResult;\n this.el.querySelector('ul[slot=\"content\"]')?.appendChild(emptyItem);\n }\n }\n\n /** Reset the filter and make all items visible. */\n private resetFilter() {\n const items = Array.from(\n this.el.querySelectorAll('nv-fielddropdownitem'),\n ) as HTMLNvFielddropdownitemElement[];\n\n items.forEach(item => {\n item.style.display = '';\n });\n }\n\n private handleInputFocus = () => {\n if (this.disabled || this.readonly) return;\n\n this.open = true;\n };\n\n private togglePopover = () => {\n if (this.disabled || this.readonly) return;\n\n this.open = !this.open;\n\n if (this.open && !this.filterable) {\n this.focusFirstItem();\n }\n };\n\n private updateHighlightedItem(\n items: HTMLNvFielddropdownitemElement[],\n index: number,\n ) {\n items.forEach((item, i) => {\n if (i === index) {\n item.classList.add('highlighted');\n item.focus();\n item.scrollIntoView({ block: 'nearest' });\n } else {\n item.classList.remove('highlighted');\n }\n });\n }\n\n private focusFirstItem() {\n const firstItem = this.el.querySelector('nv-fielddropdownitem');\n if (firstItem) {\n (firstItem as HTMLElement).focus();\n this.updateHighlightedItem(\n Array.from(\n this.el.querySelectorAll('nv-fielddropdownitem'),\n ) as HTMLNvFielddropdownitemElement[],\n 0,\n );\n } else {\n console.warn('nv-fielddropdown: no first item found to focus');\n }\n }\n\n private updateSelectedItem(value: string) {\n const items = Array.from(\n this.el.querySelectorAll('nv-fielddropdownitem'),\n ) as HTMLNvFielddropdownitemElement[];\n\n const matchingItem = items.find(item => {\n const itemLabel = item.getAttribute('label');\n const itemValue = item.getAttribute('value');\n const itemText = item.textContent?.trim();\n\n return itemLabel === value || itemValue === value || itemText === value;\n });\n\n items.forEach(item => {\n if (item === matchingItem) {\n item.setAttribute('selected', '');\n } else {\n item.removeAttribute('selected');\n }\n });\n\n if (matchingItem && this.inputElement) {\n this.inputElement.value = value;\n }\n }\n\n private getSelectedLabel = (): string => {\n const items = Array.from(\n this.el.querySelectorAll('nv-fielddropdownitem'),\n ) as HTMLNvFielddropdownitemElement[];\n\n const matchingItem = items.find(\n item => item.getAttribute('value') === this.value,\n );\n return matchingItem\n ? matchingItem.label ??\n matchingItem.textContent?.trim() ??\n matchingItem.value\n : '';\n };\n\n private clearFilter = () => {\n this.filterText = '';\n this.inputElement.value = '';\n this.inputElement.focus();\n this.filterItems();\n };\n\n //#endregion METHODS\n /****************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n this.resetFilter();\n this.setInitialSelection();\n\n if (this.filterable && this.filterText) {\n this.filterItems();\n }\n if (this.options) {\n this.handleOptionsChange(this.options);\n }\n if (this.value) {\n this.updateSelectedItem(this.value);\n }\n }\n\n componentDidLoad() {\n if (this.value) {\n this.updateSelectedItem(this.value);\n }\n }\n\n //#endregion LIFECYCLE\n /****************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host>\n {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n <label htmlFor={this.inputId}>\n <slot name=\"label\">{this.label}</slot>\n </label>\n )}\n\n <nv-popover\n ref={el => (this.popoverElement = el as HTMLNvPopoverElement)}\n triggerMode=\"controlled\"\n placement=\"bottom-start\"\n open={this.open}\n >\n <div class=\"input-wrapper\" slot=\"trigger\">\n <slot name=\"before-input\"></slot>\n\n <div\n class=\"input-container\"\n onClick={this.handleInputContainerClick}\n >\n <slot name=\"leading-input\"></slot>\n\n {this.isFilterable || this.disabled || this.readonly ? (\n <input\n id={this.inputId}\n type=\"search\"\n ref={e => (this.inputElement = e)}\n autofocus={this.autofocus}\n autocomplete={this.autocomplete}\n placeholder={this.placeholder}\n name={this.name}\n value={this.getSelectedLabel()}\n required={this.required}\n disabled={this.disabled}\n readOnly={this.readonly}\n onInput={this.handleInput}\n onFocus={this.handleInputFocus}\n onKeyDown={this.handleKeyDown}\n />\n ) : (\n <p\n id={this.inputId}\n class=\"non-filterable-text\"\n onClick={this.handleInputContainerClick}\n tabIndex={this.disabled ? -1 : 0}\n onKeyDown={this.handleKeyDown}\n onFocus={this.handleInputFocus}\n >\n <span>\n {this.getSelectedLabel() || this.value || this.placeholder}\n </span>\n </p>\n )}\n\n {this.isFilterable && this.filterText && this.open && (\n <nv-iconbutton\n name=\"x\"\n size=\"md\"\n emphasis=\"lower\"\n class=\"clear-button\"\n onClick={this.clearFilter}\n aria-label=\"Clear input\"\n />\n )}\n\n {this.error && (\n <nv-icon name=\"alert-circle\" class=\"validation\" size=\"md\" />\n )}\n\n <nv-iconbutton\n data-scope=\"toggle-dropdown\"\n name={this.open ? 'chevron-top' : 'chevron-down'}\n size=\"md\"\n emphasis=\"lower\"\n aria-label={this.open ? 'Hide dropdown' : 'Show dropdown'}\n aria-pressed={this.open.toString()}\n onClick={this.togglePopover}\n tabIndex={this.disabled ? -1 : 0}\n />\n </div>\n\n <slot name=\"after-input\"></slot>\n </div>\n\n <div slot=\"content\">\n {this.parsedOptions.length > 0 ? (\n <ul>\n {this.parsedOptions.map(option => (\n <nv-fielddropdownitem\n label={option.label}\n value={option.value}\n disabled={option.disabled}\n selected={option.value === this.value}\n />\n ))}\n </ul>\n ) : (\n <slot name=\"content\"></slot>\n )}\n </div>\n </nv-popover>\n\n {(this.description ||\n this.el.querySelector('[slot=\"description\"]')) && (\n <div class=\"description\">\n <slot name=\"description\">{this.description}</slot>\n </div>\n )}\n\n {(this.errorDescription ||\n this.el.querySelector('[slot=\"error-description\"]')) && (\n <div hidden={!this.error} class=\"error-description\">\n <slot name=\"error-description\">{this.errorDescription}</slot>\n </div>\n )}\n </Host>\n );\n }\n //#endregion RENDER\n}\n"],"version":3}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { N as NvFielddropdownitem$1, d as defineCustomElement$1 } from './p-
|
|
1
|
+
import { N as NvFielddropdownitem$1, d as defineCustomElement$1 } from './p-9476354d.js';
|
|
2
2
|
|
|
3
3
|
const NvFielddropdownitem = NvFielddropdownitem$1;
|
|
4
4
|
const defineCustomElement = defineCustomElement$1;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { N as NvFielddropdownitemcheck$1, d as defineCustomElement$1 } from './p-
|
|
1
|
+
import { N as NvFielddropdownitemcheck$1, d as defineCustomElement$1 } from './p-1fad2529.js';
|
|
2
2
|
|
|
3
3
|
const NvFielddropdownitemcheck = NvFielddropdownitemcheck$1;
|
|
4
4
|
const defineCustomElement = defineCustomElement$1;
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-
|
|
2
|
-
import { d as defineCustomElement$8 } from './p-
|
|
3
|
-
import { d as defineCustomElement$7 } from './p-
|
|
4
|
-
import { d as defineCustomElement$6 } from './p-
|
|
5
|
-
import { d as defineCustomElement$5 } from './p-
|
|
6
|
-
import { d as defineCustomElement$4 } from './p-
|
|
7
|
-
import { d as defineCustomElement$3 } from './p-
|
|
8
|
-
import { d as defineCustomElement$2 } from './p-
|
|
1
|
+
import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-1c45c0f2.js';
|
|
2
|
+
import { d as defineCustomElement$8 } from './p-7f142767.js';
|
|
3
|
+
import { d as defineCustomElement$7 } from './p-55202370.js';
|
|
4
|
+
import { d as defineCustomElement$6 } from './p-1fad2529.js';
|
|
5
|
+
import { d as defineCustomElement$5 } from './p-ebf24fd0.js';
|
|
6
|
+
import { d as defineCustomElement$4 } from './p-1e095bba.js';
|
|
7
|
+
import { d as defineCustomElement$3 } from './p-3a3ba5b1.js';
|
|
8
|
+
import { d as defineCustomElement$2 } from './p-057ae4f2.js';
|
|
9
9
|
import { v as v4 } from './p-f5ff676c.js';
|
|
10
10
|
|
|
11
|
-
const nvFieldmultiselectCss = "nv-fieldmultiselect{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box}nv-fieldmultiselect[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldmultiselect[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fieldmultiselect[required]:not([required=false])>label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fieldmultiselect label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fieldmultiselect nv-popover{width:100%;display:block}nv-fieldmultiselect nv-popover [data-scope=popover]{width:100%;padding:var(--list-dropdown-padding);border-radius:var(--list-dropdown-radius);background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border)}nv-fieldmultiselect nv-popover [slot=content]{gap:var(--list-dropdown-gap-y);display:flex;flex-direction:column}nv-fieldmultiselect nv-popover hr{color:var(--components-list-dropdown-separator)}nv-fieldmultiselect .input-wrapper-multiselect{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fieldmultiselect .input-container-multiselect{display:flex;flex-grow:1;
|
|
11
|
+
const nvFieldmultiselectCss = "nv-fieldmultiselect{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box}nv-fieldmultiselect[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldmultiselect[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fieldmultiselect[required]:not([required=false])>label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fieldmultiselect label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fieldmultiselect nv-popover{width:100%;display:block}nv-fieldmultiselect nv-popover [data-scope=popover]{width:100%;padding:var(--list-dropdown-padding);border-radius:var(--list-dropdown-radius);background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border)}nv-fieldmultiselect nv-popover [slot=content]{gap:var(--list-dropdown-gap-y);display:flex;flex-direction:column}nv-fieldmultiselect nv-popover hr{color:var(--components-list-dropdown-separator)}nv-fieldmultiselect .input-wrapper-multiselect{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fieldmultiselect .input-container-multiselect{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out;position:relative;width:100%;min-height:40px;}nv-fieldmultiselect .input-container-multiselect:hover{border-color:var(--nv-field-border-hover)}nv-fieldmultiselect .input-container-multiselect:focus-within,nv-fieldmultiselect .input-container-multiselect:focus-within:hover,nv-fieldmultiselect .input-container-multiselect:focus,nv-fieldmultiselect .input-container-multiselect:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldmultiselect .input-container-multiselect:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldmultiselect .input-container-multiselect:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldmultiselect .input-container-multiselect>nv-badge{margin-left:var(--form-field-padding-x)}nv-fieldmultiselect .input-container-multiselect input,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%;flex-grow:1;margin:0;min-height:100%;box-sizing:border-box}nv-fieldmultiselect .input-container-multiselect input:focus,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text:focus{outline:none}nv-fieldmultiselect .input-container-multiselect input::placeholder,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldmultiselect .input-container-multiselect>nv-iconbutton{border:0px;border-radius:0px}nv-fieldmultiselect .input-container-multiselect>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldmultiselect .input-container-multiselect nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldmultiselect .non-filterable-text{display:block;border-radius:var(--form-field-radius);background-color:var(--nv-field-background);color:var(--components-form-field-content-text);font-size:var(--form-field-font-size);font-weight:500;line-height:var(--form-field-line-height);box-sizing:border-box;cursor:pointer;height:100%;min-height:40px}nv-fieldmultiselect .non-filterable-text span{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis}nv-fieldmultiselect .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldmultiselect .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}.no-results-message{text-align:center;padding:10px;color:var(--components-form-text-description-error)}.multiselect-divider{display:block;width:100%;height:1px;background-color:var(--components-list-dropdown-separator);margin:var(--list-dropdown-item-padding-y) 0;border:0}";
|
|
12
12
|
const NvFieldmultiselectStyle0 = nvFieldmultiselectCss;
|
|
13
13
|
|
|
14
14
|
const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmultiselect extends H {
|
|
@@ -337,6 +337,23 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
|
|
|
337
337
|
}
|
|
338
338
|
}
|
|
339
339
|
};
|
|
340
|
+
//#endregion METHODS
|
|
341
|
+
/****************************************************************************/
|
|
342
|
+
//#region RENDER
|
|
343
|
+
/**
|
|
344
|
+
* Renders the component in options mode
|
|
345
|
+
* @returns {any} The JSX for options mode
|
|
346
|
+
*/
|
|
347
|
+
this.renderOptionsMode = () => {
|
|
348
|
+
return (h(Host, null, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { htmlFor: this.inputId }, h("slot", { name: "label" }, this.label))), h("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { class: "input-wrapper-multiselect", slot: "trigger" }, h("slot", { name: "before-input" }), h("div", { class: "input-container-multiselect" }, h("slot", { name: "leading-input" }), h("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: this.selectedValues.length > 0, hidden: this.selectedValues.length <= 0, label: `${this.selectedValues.length} ${this.badgeLabel}`, "aria-label": `Clear all ${this.selectedValues.length} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseOptions }), this.isFilterable || this.disabled || this.readonly ? (h("input", { type: "text", id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.value, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputOptions, onFocus: this.handleInputFocusOptions, onBlur: this.handleInputBlurOptions, onKeyDown: this.handleKeyDown })) : (h("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickOptions, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusOptions, role: "combobox", "aria-expanded": this.open }, h("span", null, this.value || this.placeholder))), this.error && (h("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), h("nv-iconbutton", { "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopoverOptions })), h("slot", { name: "after-input" })), h("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: { 'max-height': this.maxHeight, 'overflow-y': 'auto' } }, h("ul", { role: "content" }, this.parsedOptions.map(option => (h("nv-fielddropdownitemcheck", { label: option.label, description: option.description, value: option.value, checked: this.selectedValues.includes(option.value), disabled: option.disabled }))), h("hr", { class: "multiselect-divider", style: { display: 'none' } })))), this.renderDescriptions()));
|
|
349
|
+
};
|
|
350
|
+
/**
|
|
351
|
+
* Renders the component in slots mode
|
|
352
|
+
* @returns {any} The JSX for slots mode
|
|
353
|
+
*/
|
|
354
|
+
this.renderSlotsMode = () => {
|
|
355
|
+
return (h(Host, null, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { htmlFor: this.inputId }, h("slot", { name: "label" }, this.label))), h("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { class: "input-wrapper-multiselect", slot: "trigger" }, h("slot", { name: "before-input" }), h("div", { class: "input-container-multiselect", onClick: this.handleInputContainerClickSlots }, h("slot", { name: "leading-input" }), h("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: this.selectedValues.length > 0, hidden: this.selectedValues.length <= 0, label: `${this.selectedValues.length} ${this.badgeLabel}`, "aria-label": `Clear all ${this.selectedValues.length} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseSlots }), this.isFilterable || this.disabled || this.readonly ? (h("input", { id: this.inputId, ref: e => (this.inputElement = e), autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.value, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputSlots, onFocus: this.handleInputFocusSlots, onBlur: this.handleInputBlurSlots, onKeyDown: this.handleKeyDown })) : (h("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickSlots, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusSlots, role: "combobox", "aria-expanded": this.open }, h("span", null, this.value || this.placeholder))), this.error && (h("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), h("nv-iconbutton", { "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopoverSlots })), h("slot", { name: "after-input" })), h("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: { 'max-height': this.maxHeight, 'overflow-y': 'auto' } }, h("slot", { name: "content" }))), this.renderDescriptions()));
|
|
356
|
+
};
|
|
340
357
|
}
|
|
341
358
|
//#endregion PROPERTIES
|
|
342
359
|
/****************************************************************************/
|
|
@@ -351,7 +368,7 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
|
|
|
351
368
|
* Set the mode state and handle options change.
|
|
352
369
|
*/
|
|
353
370
|
componentWillLoad() {
|
|
354
|
-
this.modeState = this.
|
|
371
|
+
this.modeState = this.options ? 'options' : 'slots';
|
|
355
372
|
// Don't call handleOptionsChange if we are in slots mode
|
|
356
373
|
if (this.modeState === 'options') {
|
|
357
374
|
this.handleOptionsChange(this.options);
|
|
@@ -435,7 +452,7 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
|
|
|
435
452
|
}
|
|
436
453
|
/**
|
|
437
454
|
* Listen for the `itemChecked` event emitted by child items.
|
|
438
|
-
* @param {CustomEvent
|
|
455
|
+
* @param {CustomEvent} event - The event object containing the selected value and its checked state.
|
|
439
456
|
*/
|
|
440
457
|
handleItemChecked(event) {
|
|
441
458
|
if (this.disabled || this.readonly) {
|
|
@@ -997,13 +1014,6 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
|
|
|
997
1014
|
if (existingMessage)
|
|
998
1015
|
existingMessage.remove();
|
|
999
1016
|
}
|
|
1000
|
-
/**
|
|
1001
|
-
* Watch for changes in the mode prop and update modeState accordingly
|
|
1002
|
-
* @param {string} newValue - The new mode value
|
|
1003
|
-
*/
|
|
1004
|
-
handleModeChange(newValue) {
|
|
1005
|
-
this.modeState = newValue;
|
|
1006
|
-
}
|
|
1007
1017
|
manageDivider(ul, selectedItems, unselectedItems) {
|
|
1008
1018
|
let divider = ul.querySelector('hr.multiselect-divider');
|
|
1009
1019
|
if (!divider) {
|
|
@@ -1022,23 +1032,6 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
|
|
|
1022
1032
|
divider.style.display = 'none';
|
|
1023
1033
|
}
|
|
1024
1034
|
}
|
|
1025
|
-
//#endregion METHODS
|
|
1026
|
-
/****************************************************************************/
|
|
1027
|
-
//#region RENDER
|
|
1028
|
-
/**
|
|
1029
|
-
* Renders the component in options mode
|
|
1030
|
-
* @returns {any} The JSX for options mode
|
|
1031
|
-
*/
|
|
1032
|
-
renderOptionsMode() {
|
|
1033
|
-
return (h(Host, null, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { htmlFor: this.inputId }, h("slot", { name: "label" }, this.label))), h("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { class: "input-wrapper-multiselect", slot: "trigger" }, h("slot", { name: "before-input" }), h("div", { class: "input-container-multiselect" }, h("slot", { name: "leading-input" }), h("nv-badge", { slot: "leading-input", "prevent-auto-close": "true", color: "10", dismissible: this.selectedValues.length > 0, hidden: this.selectedValues.length <= 0, label: `${this.selectedValues.length} ${this.badgeLabel}`, "aria-label": `Clear all ${this.selectedValues.length} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseOptions }), this.isFilterable || this.disabled || this.readonly ? (h("input", { id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.value, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputOptions, onFocus: this.handleInputFocusOptions, onBlur: this.handleInputBlurOptions, onKeyDown: this.handleKeyDown })) : (h("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickOptions, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusOptions, role: "combobox", "aria-expanded": this.open }, h("span", null, this.value || this.placeholder))), h("nv-iconbutton", { class: "toggle-dropdown-icon", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopoverOptions })), h("slot", { name: "after-input" })), h("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: { 'max-height': this.maxHeight, 'overflow-y': 'auto' } }, h("ul", { role: "content" }, this.parsedOptions.map(option => (h("nv-fielddropdownitemcheck", { label: option.label, description: option.description, value: option.value, checked: this.selectedValues.includes(option.value), disabled: option.disabled }))), h("hr", { class: "multiselect-divider", style: { display: 'none' } })))), this.renderDescriptions()));
|
|
1034
|
-
}
|
|
1035
|
-
/**
|
|
1036
|
-
* Renders the component in slots mode
|
|
1037
|
-
* @returns {any} The JSX for slots mode
|
|
1038
|
-
*/
|
|
1039
|
-
renderSlotsMode() {
|
|
1040
|
-
return (h(Host, null, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { htmlFor: this.inputId }, h("slot", { name: "label" }, this.label))), h("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { class: "input-wrapper-multiselect", slot: "trigger" }, h("slot", { name: "before-input" }), h("div", { class: "input-container-multiselect", onClick: this.handleInputContainerClickSlots }, h("slot", { name: "leading-input" }, h("p", null, "No leading input")), h("nv-badge", { slot: "leading-input", "prevent-auto-close": "true", color: "10", dismissible: this.selectedValues.length > 0, hidden: this.selectedValues.length <= 0, label: `${this.selectedValues.length} ${this.badgeLabel}`, "aria-label": `Clear all ${this.selectedValues.length} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseSlots }), this.isFilterable || this.disabled || this.readonly ? (h("input", { id: this.inputId, ref: e => (this.inputElement = e), autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.value, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputSlots, onFocus: this.handleInputFocusSlots, onBlur: this.handleInputBlurSlots, onKeyDown: this.handleKeyDown })) : (h("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickSlots, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusSlots, role: "combobox", "aria-expanded": this.open }, h("span", null, this.value || this.placeholder))), h("nv-iconbutton", { class: "toggle-dropdown-icon", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopoverSlots })), h("slot", { name: "after-input" })), h("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: { 'max-height': this.maxHeight, 'overflow-y': 'auto' } }, h("slot", { name: "content" }))), this.renderDescriptions()));
|
|
1041
|
-
}
|
|
1042
1035
|
/**
|
|
1043
1036
|
* Renders description and error description sections
|
|
1044
1037
|
* @returns {any} The JSX for descriptions
|
|
@@ -1064,8 +1057,7 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
|
|
|
1064
1057
|
static get watchers() { return {
|
|
1065
1058
|
"options": ["handleOptionsChange"],
|
|
1066
1059
|
"value": ["watchValueHandler"],
|
|
1067
|
-
"filterable": ["watchFilterableHandler"]
|
|
1068
|
-
"mode": ["handleModeChange"]
|
|
1060
|
+
"filterable": ["watchFilterableHandler"]
|
|
1069
1061
|
}; }
|
|
1070
1062
|
static get style() { return NvFieldmultiselectStyle0; }
|
|
1071
1063
|
}, [68, "nv-fieldmultiselect", {
|
|
@@ -1086,7 +1078,6 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
|
|
|
1086
1078
|
"filterable": [1540],
|
|
1087
1079
|
"value": [1537],
|
|
1088
1080
|
"open": [1540],
|
|
1089
|
-
"mode": [513],
|
|
1090
1081
|
"options": [513],
|
|
1091
1082
|
"debounceDelay": [514, "debounce-delay"],
|
|
1092
1083
|
"autofocus": [516],
|
|
@@ -1103,8 +1094,7 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
|
|
|
1103
1094
|
}, [[0, "openChanged", "handleOpenChanged"], [0, "itemChecked", "handleItemChecked"], [0, "slotchange", "handleSlotChange"], [0, "keydown", "handleKeyDown"]], {
|
|
1104
1095
|
"options": ["handleOptionsChange"],
|
|
1105
1096
|
"value": ["watchValueHandler"],
|
|
1106
|
-
"filterable": ["watchFilterableHandler"]
|
|
1107
|
-
"mode": ["handleModeChange"]
|
|
1097
|
+
"filterable": ["watchFilterableHandler"]
|
|
1108
1098
|
}]);
|
|
1109
1099
|
function defineCustomElement$1() {
|
|
1110
1100
|
if (typeof customElements === "undefined") {
|