@nova-design-system/nova-webcomponents 3.15.0 → 3.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{index-c56424e5.js → index-93d3b2f8.js} +9 -6
- package/dist/cjs/index-93d3b2f8.js.map +1 -0
- package/dist/cjs/index.cjs.js +6 -1
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/native.cjs.js +2 -2
- package/dist/cjs/nv-accordion-item.cjs.entry.js +2 -2
- package/dist/cjs/nv-accordion-item.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-accordion.cjs.entry.js +6 -6
- package/dist/cjs/nv-accordion.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-alert.cjs.entry.js +2 -2
- package/dist/cjs/nv-alert.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-avatar.cjs.entry.js +2 -2
- package/dist/cjs/nv-avatar.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-badge_2.cjs.entry.js +1 -1
- package/dist/cjs/nv-breadcrumb.cjs.entry.js +2 -2
- package/dist/cjs/nv-breadcrumb.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-breadcrumbs.cjs.entry.js +1 -1
- package/dist/cjs/nv-button.cjs.entry.js +3 -9
- package/dist/cjs/nv-button.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-buttongroup.cjs.entry.js +1 -1
- package/dist/cjs/nv-calendar.cjs.entry.js +1 -1
- package/dist/cjs/nv-col.cjs.entry.js +1 -1
- package/dist/cjs/nv-datagrid.cjs.entry.js +177 -10
- package/dist/cjs/nv-datagrid.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-datagridcolumn.cjs.entry.js +1 -1
- package/dist/cjs/nv-dialog.cjs.entry.js +32 -29
- package/dist/cjs/nv-dialog.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-dialogfooter_2.cjs.entry.js +2 -2
- package/dist/cjs/nv-dialogfooter_2.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fieldcheckbox.cjs.entry.js +2 -2
- package/dist/cjs/nv-fieldcheckbox.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fielddate.cjs.entry.js +51 -26
- package/dist/cjs/nv-fielddate.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fielddaterange.cjs.entry.js +68 -42
- package/dist/cjs/nv-fielddaterange.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fielddropdown.cjs.entry.js +33 -7
- package/dist/cjs/nv-fielddropdown.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fielddropdownitem.cjs.entry.js +1 -1
- package/dist/cjs/nv-fieldmultiselect.cjs.entry.js +187 -156
- package/dist/cjs/nv-fieldmultiselect.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fieldnumber.cjs.entry.js +2 -2
- package/dist/cjs/nv-fieldnumber.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fieldpassword.cjs.entry.js +2 -2
- package/dist/cjs/nv-fieldpassword.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fieldradio.cjs.entry.js +2 -2
- package/dist/cjs/nv-fieldradio.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fieldselect.cjs.entry.js +2 -2
- package/dist/cjs/nv-fieldselect.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fieldslider.cjs.entry.js +2 -2
- package/dist/cjs/nv-fieldslider.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fieldtext.cjs.entry.js +2 -2
- package/dist/cjs/nv-fieldtext.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fieldtextarea.cjs.entry.js +2 -2
- package/dist/cjs/nv-fieldtextarea.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fieldtime.cjs.entry.js +25 -12
- package/dist/cjs/nv-fieldtime.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-icon.cjs.entry.js +2 -2
- package/dist/cjs/nv-icon.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-iconbutton_2.cjs.entry.js +2 -2
- package/dist/cjs/nv-iconbutton_2.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-menu.cjs.entry.js +24 -9
- package/dist/cjs/nv-menu.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-menuitem.cjs.entry.js +1 -1
- package/dist/cjs/nv-notification.cjs.entry.js +2 -2
- package/dist/cjs/nv-notification.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-notificationcontainer.cjs.entry.js +1 -1
- package/dist/cjs/nv-popover.cjs.entry.js +67 -61
- package/dist/cjs/nv-popover.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-row.cjs.entry.js +1 -1
- package/dist/cjs/nv-split.cjs.entry.js +339 -0
- package/dist/cjs/nv-split.cjs.entry.js.map +1 -0
- package/dist/cjs/nv-stack.cjs.entry.js +2 -2
- package/dist/cjs/nv-table.cjs.entry.js +216 -310
- package/dist/cjs/nv-table.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-toggle.cjs.entry.js +2 -2
- package/dist/cjs/nv-toggle.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-togglebutton.cjs.entry.js +1 -1
- package/dist/cjs/nv-togglebuttongroup.cjs.entry.js +2 -2
- package/dist/cjs/nv-togglebuttongroup.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-tooltip.cjs.entry.js +1 -1
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/nv-accordion/nv-accordion.js +12 -9
- package/dist/collection/components/nv-accordion/nv-accordion.js.map +1 -1
- package/dist/collection/components/nv-accordion-item/nv-accordion-item.js.map +1 -1
- package/dist/collection/components/nv-accordion-item/styles/nv-accordion-item.css +1 -1
- package/dist/collection/components/nv-alert/nv-alert.css +1 -1
- package/dist/collection/components/nv-avatar/nv-avatar.css +1 -1
- package/dist/collection/components/nv-breadcrumb/nv-breadcrumb.css +1 -1
- package/dist/collection/components/nv-button/nv-button.js +1 -13
- package/dist/collection/components/nv-button/nv-button.js.map +1 -1
- package/dist/collection/components/nv-button/styles/nv-button.css +1 -1
- package/dist/collection/components/nv-datagrid/nv-datagrid.css +2 -2
- package/dist/collection/components/nv-dialog/nv-dialog.css +2 -2
- package/dist/collection/components/nv-dialog/nv-dialog.docs.js +13 -0
- package/dist/collection/components/nv-dialog/nv-dialog.docs.js.map +1 -1
- package/dist/collection/components/nv-dialog/nv-dialog.js +30 -27
- package/dist/collection/components/nv-dialog/nv-dialog.js.map +1 -1
- package/dist/collection/components/nv-dialogheader/nv-dialogheader.css +4 -4
- package/dist/collection/components/nv-fieldcheckbox/nv-fieldcheckbox.css +3 -3
- package/dist/collection/components/nv-fielddate/nv-fielddate.js +49 -24
- package/dist/collection/components/nv-fielddate/nv-fielddate.js.map +1 -1
- package/dist/collection/components/nv-fielddate/styles/nv-fielddate.css +8 -8
- package/dist/collection/components/nv-fielddaterange/nv-fielddaterange.js +66 -43
- package/dist/collection/components/nv-fielddaterange/nv-fielddaterange.js.map +1 -1
- package/dist/collection/components/nv-fielddaterange/styles/nv-fielddaterange.css +8 -8
- package/dist/collection/components/nv-fielddropdown/nv-fielddropdown.docs.js +26 -4
- package/dist/collection/components/nv-fielddropdown/nv-fielddropdown.docs.js.map +1 -1
- package/dist/collection/components/nv-fielddropdown/nv-fielddropdown.js +32 -4
- package/dist/collection/components/nv-fielddropdown/nv-fielddropdown.js.map +1 -1
- package/dist/collection/components/nv-fielddropdown/styles/nv-fielddropdown.css +9 -9
- package/dist/collection/components/nv-fieldmultiselect/nv-fieldmultiselect.js +186 -153
- package/dist/collection/components/nv-fieldmultiselect/nv-fieldmultiselect.js.map +1 -1
- package/dist/collection/components/nv-fieldmultiselect/styles/nv-fieldmultiselect.css +9 -9
- package/dist/collection/components/nv-fieldnumber/nv-fieldnumber.css +8 -8
- package/dist/collection/components/nv-fieldpassword/nv-fieldpassword.css +8 -8
- package/dist/collection/components/nv-fieldradio/nv-fieldradio.css +3 -3
- package/dist/collection/components/nv-fieldselect/nv-fieldselect.css +12 -12
- package/dist/collection/components/nv-fieldslider/styles/nv-fieldslider.css +7 -7
- package/dist/collection/components/nv-fieldtext/nv-fieldtext.css +8 -8
- package/dist/collection/components/nv-fieldtext/nv-fieldtext.docs.js +9 -1
- package/dist/collection/components/nv-fieldtext/nv-fieldtext.docs.js.map +1 -1
- package/dist/collection/components/nv-fieldtextarea/nv-fieldtextarea.css +8 -8
- package/dist/collection/components/nv-fieldtime/nv-fieldtime.docs.js +22 -0
- package/dist/collection/components/nv-fieldtime/nv-fieldtime.docs.js.map +1 -1
- package/dist/collection/components/nv-fieldtime/nv-fieldtime.js +24 -9
- package/dist/collection/components/nv-fieldtime/nv-fieldtime.js.map +1 -1
- package/dist/collection/components/nv-fieldtime/styles/nv-fieldtime.css +8 -8
- package/dist/collection/components/nv-icon/nv-icons.js +6 -1
- package/dist/collection/components/nv-icon/nv-icons.js.map +1 -1
- package/dist/collection/components/nv-iconbutton/nv-iconbutton.css +2 -2
- package/dist/collection/components/nv-menu/nv-menu.docs.js +7 -0
- package/dist/collection/components/nv-menu/nv-menu.docs.js.map +1 -1
- package/dist/collection/components/nv-menu/nv-menu.js +26 -8
- package/dist/collection/components/nv-menu/nv-menu.js.map +1 -1
- package/dist/collection/components/nv-menuitem/nv-menuitem.js +1 -1
- package/dist/collection/components/nv-notification/styles/nv-notification.css +2 -2
- package/dist/collection/components/nv-popover/nv-popover.docs.js +11 -0
- package/dist/collection/components/nv-popover/nv-popover.docs.js.map +1 -1
- package/dist/collection/components/nv-popover/nv-popover.js +66 -60
- package/dist/collection/components/nv-popover/nv-popover.js.map +1 -1
- package/dist/collection/components/nv-split/nv-split.docs.js +41 -0
- package/dist/collection/components/nv-split/nv-split.docs.js.map +1 -0
- package/dist/collection/components/nv-split/nv-split.js +549 -0
- package/dist/collection/components/nv-split/nv-split.js.map +1 -0
- package/dist/collection/components/nv-split/styles/nv-split.css +96 -0
- package/dist/collection/components/nv-stack/nv-stack.js +1 -1
- package/dist/collection/components/nv-table/nv-table.docs.js +16 -155
- package/dist/collection/components/nv-table/nv-table.docs.js.map +1 -1
- package/dist/collection/components/nv-table/nv-table.js +68 -496
- package/dist/collection/components/nv-table/nv-table.js.map +1 -1
- package/dist/collection/components/nv-table/nv-table.utils.js +175 -0
- package/dist/collection/components/nv-table/nv-table.utils.js.map +1 -0
- package/dist/collection/components/nv-table/styles/nv-table.css +84 -0
- package/dist/collection/components/nv-table/test/nv-table.utils.test.js +604 -0
- package/dist/collection/components/nv-table/test/nv-table.utils.test.js.map +1 -0
- package/dist/collection/components/nv-toggle/nv-toggle.css +3 -3
- package/dist/collection/components/nv-togglebuttongroup/nv-togglebuttongroup.docs.js +1 -0
- package/dist/collection/components/nv-togglebuttongroup/nv-togglebuttongroup.docs.js.map +1 -1
- package/dist/collection/components/nv-togglebuttongroup/nv-togglebuttongroup.js +1 -3
- package/dist/collection/components/nv-togglebuttongroup/nv-togglebuttongroup.js.map +1 -1
- package/dist/components/index.js +7 -2
- package/dist/components/index.js.map +1 -1
- package/dist/components/nv-accordion-item.js +1 -1
- package/dist/components/nv-accordion.js +10 -10
- package/dist/components/nv-accordion.js.map +1 -1
- package/dist/components/nv-alert.js +3 -3
- package/dist/components/nv-alert.js.map +1 -1
- package/dist/components/nv-avatar.js +3 -3
- package/dist/components/nv-avatar.js.map +1 -1
- package/dist/components/nv-badge.js +1 -1
- package/dist/components/nv-breadcrumb.js +4 -4
- package/dist/components/nv-breadcrumb.js.map +1 -1
- package/dist/components/nv-breadcrumbs.js +1 -1
- package/dist/components/nv-button.js +1 -1
- package/dist/components/nv-buttongroup.js +1 -1
- package/dist/components/nv-calendar.js +1 -1
- package/dist/components/nv-col.js +1 -1
- package/dist/components/nv-datagrid.js +174 -7
- package/dist/components/nv-datagrid.js.map +1 -1
- package/dist/components/nv-datagridcolumn.js +1 -1
- package/dist/components/nv-dialog.js +37 -34
- 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.js +57 -32
- package/dist/components/nv-fielddate.js.map +1 -1
- package/dist/components/nv-fielddaterange.js +74 -48
- package/dist/components/nv-fielddaterange.js.map +1 -1
- package/dist/components/nv-fielddropdown.js +40 -13
- 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 +196 -164
- package/dist/components/nv-fieldmultiselect.js.map +1 -1
- package/dist/components/nv-fieldnumber.js +1 -1
- package/dist/components/nv-fieldpassword.js +5 -5
- package/dist/components/nv-fieldpassword.js.map +1 -1
- package/dist/components/nv-fieldradio.js +2 -2
- package/dist/components/nv-fieldradio.js.map +1 -1
- package/dist/components/nv-fieldselect.js +5 -5
- package/dist/components/nv-fieldselect.js.map +1 -1
- package/dist/components/nv-fieldslider.js +6 -6
- package/dist/components/nv-fieldslider.js.map +1 -1
- package/dist/components/nv-fieldtext.js +1 -1
- package/dist/components/nv-fieldtextarea.js +2 -2
- package/dist/components/nv-fieldtextarea.js.map +1 -1
- package/dist/components/nv-fieldtime.js +31 -17
- 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 +30 -13
- package/dist/components/nv-menu.js.map +1 -1
- package/dist/components/nv-menuitem.js +1 -1
- package/dist/components/nv-notification.js +3 -3
- package/dist/components/nv-notification.js.map +1 -1
- package/dist/components/nv-notificationcontainer.js +1 -1
- package/dist/components/nv-popover.js +1 -1
- package/dist/components/nv-row.js +1 -1
- package/dist/components/{nv-tablecolumn.d.ts → nv-split.d.ts} +4 -4
- package/dist/components/nv-split.js +366 -0
- package/dist/components/nv-split.js.map +1 -0
- package/dist/components/nv-stack.js +2 -2
- package/dist/components/nv-table.js +216 -328
- package/dist/components/nv-table.js.map +1 -1
- package/dist/components/nv-toggle.js +2 -2
- package/dist/components/nv-toggle.js.map +1 -1
- package/dist/components/nv-togglebutton.js +1 -1
- package/dist/components/nv-togglebuttongroup.js +2 -2
- package/dist/components/nv-togglebuttongroup.js.map +1 -1
- package/dist/components/nv-tooltip.js +1 -1
- package/dist/components/{p-00cbf2a1.js → p-0d5ed1d7.js} +3 -3
- package/dist/components/p-0d5ed1d7.js.map +1 -0
- package/dist/components/{p-54161bad.js → p-0e6f41c7.js} +2 -2
- package/dist/components/{p-54161bad.js.map → p-0e6f41c7.js.map} +1 -1
- package/dist/components/{p-0c42fafb.js → p-0fd23531.js} +6 -6
- package/dist/components/{p-0c42fafb.js.map → p-0fd23531.js.map} +1 -1
- package/dist/components/{p-a823b8e9.js → p-1639703f.js} +2 -2
- package/dist/components/{p-a823b8e9.js.map → p-1639703f.js.map} +1 -1
- package/dist/components/{p-e5c62ea8.js → p-2cc83e0c.js} +3 -3
- package/dist/components/{p-e5c62ea8.js.map → p-2cc83e0c.js.map} +1 -1
- package/dist/components/{p-3763c9c4.js → p-31478080.js} +3 -3
- package/dist/components/{p-3763c9c4.js.map → p-31478080.js.map} +1 -1
- package/dist/components/{p-178fa27e.js → p-378e3127.js} +6 -6
- package/dist/components/{p-178fa27e.js.map → p-378e3127.js.map} +1 -1
- package/dist/components/{p-51876ca1.js → p-429e01f3.js} +3 -3
- package/dist/components/p-429e01f3.js.map +1 -0
- package/dist/components/p-47d499b4.js +88 -0
- package/dist/components/p-47d499b4.js.map +1 -0
- package/dist/components/{p-aff3ed68.js → p-5829b9f7.js} +5 -2
- package/dist/components/p-5829b9f7.js.map +1 -0
- package/dist/components/{p-ee8944f3.js → p-63595ea1.js} +68 -62
- package/dist/components/p-63595ea1.js.map +1 -0
- package/dist/components/{p-1af3591a.js → p-6f2b257e.js} +3 -3
- package/dist/components/{p-1af3591a.js.map → p-6f2b257e.js.map} +1 -1
- package/dist/components/{p-4fc01a78.js → p-7112612c.js} +5 -5
- package/dist/components/p-7112612c.js.map +1 -0
- package/dist/components/{p-7426b20f.js → p-715e5235.js} +3 -3
- package/dist/components/{p-7426b20f.js.map → p-715e5235.js.map} +1 -1
- package/dist/components/{p-31e262bd.js → p-7b5102c8.js} +5 -5
- package/dist/components/{p-31e262bd.js.map → p-7b5102c8.js.map} +1 -1
- package/dist/components/{p-fda58a76.js → p-98429fd7.js} +2 -2
- package/dist/components/{p-fda58a76.js.map → p-98429fd7.js.map} +1 -1
- package/dist/components/p-9e7468e3.js +185 -0
- package/dist/components/p-9e7468e3.js.map +1 -0
- package/dist/components/{p-75200cc0.js → p-df5d76a5.js} +3 -3
- package/dist/components/{p-75200cc0.js.map → p-df5d76a5.js.map} +1 -1
- package/dist/components/{p-51459a44.js → p-f2bac2aa.js} +4 -4
- package/dist/components/{p-51459a44.js.map → p-f2bac2aa.js.map} +1 -1
- package/dist/esm/{index-a1936cd0.js → index-dc2723f3.js} +9 -6
- package/dist/esm/index-dc2723f3.js.map +1 -0
- package/dist/esm/index.js +6 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/loader.js +3 -3
- package/dist/esm/native.js +3 -3
- package/dist/esm/nv-accordion-item.entry.js +2 -2
- package/dist/esm/nv-accordion-item.entry.js.map +1 -1
- package/dist/esm/nv-accordion.entry.js +6 -6
- package/dist/esm/nv-accordion.entry.js.map +1 -1
- package/dist/esm/nv-alert.entry.js +2 -2
- package/dist/esm/nv-alert.entry.js.map +1 -1
- package/dist/esm/nv-avatar.entry.js +2 -2
- package/dist/esm/nv-avatar.entry.js.map +1 -1
- package/dist/esm/nv-badge_2.entry.js +1 -1
- package/dist/esm/nv-breadcrumb.entry.js +2 -2
- package/dist/esm/nv-breadcrumb.entry.js.map +1 -1
- package/dist/esm/nv-breadcrumbs.entry.js +1 -1
- package/dist/esm/nv-button.entry.js +3 -9
- package/dist/esm/nv-button.entry.js.map +1 -1
- package/dist/esm/nv-buttongroup.entry.js +1 -1
- package/dist/esm/nv-calendar.entry.js +1 -1
- package/dist/esm/nv-col.entry.js +1 -1
- package/dist/esm/nv-datagrid.entry.js +172 -5
- package/dist/esm/nv-datagrid.entry.js.map +1 -1
- package/dist/esm/nv-datagridcolumn.entry.js +1 -1
- package/dist/esm/nv-dialog.entry.js +32 -29
- package/dist/esm/nv-dialog.entry.js.map +1 -1
- package/dist/esm/nv-dialogfooter_2.entry.js +2 -2
- package/dist/esm/nv-dialogfooter_2.entry.js.map +1 -1
- package/dist/esm/nv-fieldcheckbox.entry.js +2 -2
- package/dist/esm/nv-fieldcheckbox.entry.js.map +1 -1
- package/dist/esm/nv-fielddate.entry.js +51 -26
- package/dist/esm/nv-fielddate.entry.js.map +1 -1
- package/dist/esm/nv-fielddaterange.entry.js +68 -42
- package/dist/esm/nv-fielddaterange.entry.js.map +1 -1
- package/dist/esm/nv-fielddropdown.entry.js +33 -7
- package/dist/esm/nv-fielddropdown.entry.js.map +1 -1
- package/dist/esm/nv-fielddropdownitem.entry.js +1 -1
- package/dist/esm/nv-fieldmultiselect.entry.js +187 -156
- package/dist/esm/nv-fieldmultiselect.entry.js.map +1 -1
- package/dist/esm/nv-fieldnumber.entry.js +2 -2
- package/dist/esm/nv-fieldnumber.entry.js.map +1 -1
- package/dist/esm/nv-fieldpassword.entry.js +2 -2
- package/dist/esm/nv-fieldpassword.entry.js.map +1 -1
- package/dist/esm/nv-fieldradio.entry.js +2 -2
- package/dist/esm/nv-fieldradio.entry.js.map +1 -1
- package/dist/esm/nv-fieldselect.entry.js +2 -2
- package/dist/esm/nv-fieldselect.entry.js.map +1 -1
- package/dist/esm/nv-fieldslider.entry.js +2 -2
- package/dist/esm/nv-fieldslider.entry.js.map +1 -1
- package/dist/esm/nv-fieldtext.entry.js +2 -2
- package/dist/esm/nv-fieldtext.entry.js.map +1 -1
- package/dist/esm/nv-fieldtextarea.entry.js +2 -2
- package/dist/esm/nv-fieldtextarea.entry.js.map +1 -1
- package/dist/esm/nv-fieldtime.entry.js +25 -12
- package/dist/esm/nv-fieldtime.entry.js.map +1 -1
- package/dist/esm/nv-icon.entry.js +2 -2
- package/dist/esm/nv-icon.entry.js.map +1 -1
- package/dist/esm/nv-iconbutton_2.entry.js +2 -2
- package/dist/esm/nv-iconbutton_2.entry.js.map +1 -1
- package/dist/esm/nv-menu.entry.js +24 -9
- package/dist/esm/nv-menu.entry.js.map +1 -1
- package/dist/esm/nv-menuitem.entry.js +1 -1
- package/dist/esm/nv-notification.entry.js +2 -2
- package/dist/esm/nv-notification.entry.js.map +1 -1
- package/dist/esm/nv-notificationcontainer.entry.js +1 -1
- package/dist/esm/nv-popover.entry.js +67 -61
- package/dist/esm/nv-popover.entry.js.map +1 -1
- package/dist/esm/nv-row.entry.js +1 -1
- package/dist/esm/nv-split.entry.js +335 -0
- package/dist/esm/nv-split.entry.js.map +1 -0
- package/dist/esm/nv-stack.entry.js +2 -2
- package/dist/esm/nv-table.entry.js +216 -310
- package/dist/esm/nv-table.entry.js.map +1 -1
- package/dist/esm/nv-toggle.entry.js +2 -2
- package/dist/esm/nv-toggle.entry.js.map +1 -1
- package/dist/esm/nv-togglebutton.entry.js +1 -1
- package/dist/esm/nv-togglebuttongroup.entry.js +2 -2
- package/dist/esm/nv-togglebuttongroup.entry.js.map +1 -1
- package/dist/esm/nv-tooltip.entry.js +1 -1
- package/dist/native/index.esm.js +1 -1
- package/dist/native/index.esm.js.map +1 -1
- package/dist/native/native.css +1 -1
- package/dist/native/native.esm.js +1 -1
- package/dist/native/native.esm.js.map +1 -1
- package/dist/native/p-107e80c6.entry.js +2 -0
- package/dist/native/p-107e80c6.entry.js.map +1 -0
- package/dist/native/{p-5c697133.entry.js → p-112d096c.entry.js} +2 -2
- package/dist/native/p-14e622e1.entry.js +2 -0
- package/dist/native/p-14e622e1.entry.js.map +1 -0
- package/dist/native/p-217de553.entry.js +2 -0
- package/dist/native/p-217de553.entry.js.map +1 -0
- package/dist/native/{p-85f8f11a.entry.js → p-230af58a.entry.js} +2 -2
- package/dist/native/p-2364aefa.entry.js +2 -0
- package/dist/native/p-2364aefa.entry.js.map +1 -0
- package/dist/native/p-23ee0384.entry.js +2 -0
- package/dist/native/{p-29f68e07.entry.js.map → p-23ee0384.entry.js.map} +1 -1
- package/dist/native/p-26513cbd.entry.js +2 -0
- package/dist/native/p-26513cbd.entry.js.map +1 -0
- package/dist/native/p-278613a3.entry.js +2 -0
- package/dist/native/{p-6cb6679b.entry.js.map → p-278613a3.entry.js.map} +1 -1
- package/dist/native/p-2dfd786f.entry.js +2 -0
- package/dist/native/{p-29df974e.entry.js.map → p-2dfd786f.entry.js.map} +1 -1
- package/dist/native/{p-d0a33e64.js → p-3060df80.js} +3 -3
- package/dist/native/p-3060df80.js.map +1 -0
- package/dist/native/p-4dc7483d.entry.js +2 -0
- package/dist/native/{p-c7b7ffaf.entry.js.map → p-4dc7483d.entry.js.map} +1 -1
- package/dist/native/p-4eaf417d.entry.js +13 -0
- package/dist/native/p-4eaf417d.entry.js.map +1 -0
- package/dist/native/p-5039ceb8.entry.js +2 -0
- package/dist/native/p-5039ceb8.entry.js.map +1 -0
- package/dist/native/{p-08322093.entry.js → p-52d2c0ae.entry.js} +2 -2
- package/dist/native/p-638967bf.entry.js +2 -0
- package/dist/native/p-638967bf.entry.js.map +1 -0
- package/dist/native/{p-19090193.entry.js → p-647a0765.entry.js} +2 -2
- package/dist/native/p-68dc02be.entry.js +2 -0
- package/dist/native/p-68dc02be.entry.js.map +1 -0
- package/dist/native/p-6d427897.entry.js +2 -0
- package/dist/native/{p-92931ab8.entry.js.map → p-6d427897.entry.js.map} +1 -1
- package/dist/native/{p-1504e28b.entry.js → p-701b48a4.entry.js} +2 -2
- package/dist/native/p-7c9bf981.entry.js +2 -0
- package/dist/native/p-835abdb9.entry.js +2 -0
- package/dist/native/{p-f5120223.entry.js.map → p-835abdb9.entry.js.map} +1 -1
- package/dist/native/{p-464bb197.entry.js → p-83765537.entry.js} +2 -2
- package/dist/native/p-88f9fca5.entry.js +2 -0
- package/dist/native/p-88f9fca5.entry.js.map +1 -0
- package/dist/native/{p-d2c9247b.entry.js → p-8e423742.entry.js} +3 -3
- package/dist/native/{p-d2c9247b.entry.js.map → p-8e423742.entry.js.map} +1 -1
- package/dist/native/{p-d882f417.entry.js → p-91fab6c2.entry.js} +2 -2
- package/dist/native/p-91fab6c2.entry.js.map +1 -0
- package/dist/native/p-95184ea2.entry.js +2 -0
- package/dist/native/p-95184ea2.entry.js.map +1 -0
- package/dist/native/p-9613087c.entry.js +2 -0
- package/dist/native/{p-2781637d.entry.js.map → p-9613087c.entry.js.map} +1 -1
- package/dist/native/{p-94dc9c41.entry.js → p-9d7e099f.entry.js} +2 -2
- package/dist/native/p-a6fc987a.entry.js +2 -0
- package/dist/native/p-a6fc987a.entry.js.map +1 -0
- package/dist/native/{p-1235c007.entry.js → p-acabac31.entry.js} +2 -2
- package/dist/native/p-acada158.entry.js +2 -0
- package/dist/native/p-acada158.entry.js.map +1 -0
- package/dist/native/p-b06f0e61.entry.js +2 -0
- package/dist/native/p-b06f0e61.entry.js.map +1 -0
- package/dist/native/p-b4c15f25.entry.js +2 -0
- package/dist/native/p-b4c15f25.entry.js.map +1 -0
- package/dist/native/{p-74b129e9.entry.js → p-bcf41cd0.entry.js} +2 -2
- package/dist/native/{p-c66565f8.entry.js → p-cb0293ec.entry.js} +2 -2
- package/dist/native/p-ce97ce24.entry.js +2 -0
- package/dist/native/p-ce97ce24.entry.js.map +1 -0
- package/dist/native/p-d0db5e72.entry.js +2 -0
- package/dist/native/p-d0db5e72.entry.js.map +1 -0
- package/dist/native/p-d7f444fb.entry.js +2 -0
- package/dist/native/p-d7f444fb.entry.js.map +1 -0
- package/dist/native/p-d878e90a.entry.js +2 -0
- package/dist/native/p-d878e90a.entry.js.map +1 -0
- package/dist/native/{p-e2c99ce2.entry.js → p-d94bf052.entry.js} +2 -2
- package/dist/native/p-ddc41f1f.entry.js +2 -0
- package/dist/native/p-ddc41f1f.entry.js.map +1 -0
- package/dist/native/p-f30e0be6.entry.js +2 -0
- package/dist/native/p-f30e0be6.entry.js.map +1 -0
- package/dist/native/p-f3c73492.entry.js +2 -0
- package/dist/native/{p-b32d0a5a.entry.js.map → p-f3c73492.entry.js.map} +1 -1
- package/dist/native/{p-9c5d6827.entry.js → p-fa78d8eb.entry.js} +2 -2
- package/dist/types/components/nv-accordion/nv-accordion.d.ts +2 -4
- package/dist/types/components/nv-button/nv-button.d.ts +0 -1
- package/dist/types/components/nv-dialog/nv-dialog.d.ts +9 -8
- package/dist/types/components/nv-fielddate/nv-fielddate.d.ts +6 -3
- package/dist/types/components/nv-fielddaterange/nv-fielddaterange.d.ts +5 -4
- package/dist/types/components/nv-fielddropdown/nv-fielddropdown.d.ts +3 -1
- package/dist/types/components/nv-fieldmultiselect/nv-fieldmultiselect.d.ts +12 -11
- package/dist/types/components/nv-fieldtime/nv-fieldtime.d.ts +1 -0
- package/dist/types/components/nv-icon/nv-icons.d.ts +1 -1
- package/dist/types/components/nv-menu/nv-menu.d.ts +4 -1
- package/dist/types/components/nv-popover/nv-popover.d.ts +10 -8
- package/dist/types/components/nv-split/nv-split.d.ts +128 -0
- package/dist/types/components/nv-split/nv-split.docs.d.ts +4 -0
- package/dist/types/components/nv-table/nv-table.d.ts +6 -87
- package/dist/types/components/nv-table/nv-table.utils.d.ts +129 -0
- package/dist/types/components/nv-table/test/nv-table.utils.test.d.ts +1 -0
- package/dist/types/components/nv-togglebuttongroup/nv-togglebuttongroup.d.ts +0 -2
- package/dist/types/components.d.ts +102 -200
- package/dist/vscode-data.json +43 -41
- package/hydrate/index.js +1148 -783
- package/hydrate/index.mjs +1148 -783
- package/package.json +10 -10
- package/dist/cjs/dom.utils-4d43f69a.js +0 -170
- package/dist/cjs/dom.utils-4d43f69a.js.map +0 -1
- package/dist/cjs/index-c56424e5.js.map +0 -1
- package/dist/cjs/nv-tablecolumn.cjs.entry.js +0 -21
- package/dist/cjs/nv-tablecolumn.cjs.entry.js.map +0 -1
- package/dist/collection/components/nv-table/nv-table.css +0 -35
- package/dist/collection/components/nv-tablecolumn/nv-tablecolumn.docs.js +0 -6
- package/dist/collection/components/nv-tablecolumn/nv-tablecolumn.docs.js.map +0 -1
- package/dist/collection/components/nv-tablecolumn/nv-tablecolumn.js +0 -52
- package/dist/collection/components/nv-tablecolumn/nv-tablecolumn.js.map +0 -1
- package/dist/components/nv-tablecolumn.js +0 -38
- package/dist/components/nv-tablecolumn.js.map +0 -1
- package/dist/components/p-00cbf2a1.js.map +0 -1
- package/dist/components/p-4fc01a78.js.map +0 -1
- package/dist/components/p-51876ca1.js.map +0 -1
- package/dist/components/p-5d14ba3f.js +0 -88
- package/dist/components/p-5d14ba3f.js.map +0 -1
- package/dist/components/p-95857e4f.js +0 -191
- package/dist/components/p-95857e4f.js.map +0 -1
- package/dist/components/p-aff3ed68.js.map +0 -1
- package/dist/components/p-cb34aa4f.js +0 -167
- package/dist/components/p-cb34aa4f.js.map +0 -1
- package/dist/components/p-ee8944f3.js.map +0 -1
- package/dist/esm/dom.utils-ac71e0ef.js +0 -167
- package/dist/esm/dom.utils-ac71e0ef.js.map +0 -1
- package/dist/esm/index-a1936cd0.js.map +0 -1
- package/dist/esm/nv-tablecolumn.entry.js +0 -17
- package/dist/esm/nv-tablecolumn.entry.js.map +0 -1
- package/dist/native/p-0a99c6fb.entry.js +0 -2
- package/dist/native/p-0a99c6fb.entry.js.map +0 -1
- package/dist/native/p-1ad1bff9.entry.js +0 -2
- package/dist/native/p-1ad1bff9.entry.js.map +0 -1
- package/dist/native/p-1c83f540.entry.js +0 -2
- package/dist/native/p-1c83f540.entry.js.map +0 -1
- package/dist/native/p-224b1a01.entry.js +0 -2
- package/dist/native/p-224b1a01.entry.js.map +0 -1
- package/dist/native/p-234cfa2e.entry.js +0 -2
- package/dist/native/p-2781637d.entry.js +0 -2
- package/dist/native/p-29df974e.entry.js +0 -2
- package/dist/native/p-29f68e07.entry.js +0 -2
- package/dist/native/p-45506c37.entry.js +0 -2
- package/dist/native/p-45506c37.entry.js.map +0 -1
- package/dist/native/p-48774d0c.entry.js +0 -13
- package/dist/native/p-48774d0c.entry.js.map +0 -1
- package/dist/native/p-4ec61dec.entry.js +0 -2
- package/dist/native/p-4ec61dec.entry.js.map +0 -1
- package/dist/native/p-5f0776cb.entry.js +0 -2
- package/dist/native/p-5f0776cb.entry.js.map +0 -1
- package/dist/native/p-6c7a9a21.entry.js +0 -2
- package/dist/native/p-6c7a9a21.entry.js.map +0 -1
- package/dist/native/p-6cb6679b.entry.js +0 -2
- package/dist/native/p-6d13a851.entry.js +0 -2
- package/dist/native/p-6d13a851.entry.js.map +0 -1
- package/dist/native/p-87784622.entry.js +0 -2
- package/dist/native/p-87784622.entry.js.map +0 -1
- package/dist/native/p-92931ab8.entry.js +0 -2
- package/dist/native/p-9a46baa9.entry.js +0 -2
- package/dist/native/p-9a46baa9.entry.js.map +0 -1
- package/dist/native/p-a34beedf.entry.js +0 -2
- package/dist/native/p-a34beedf.entry.js.map +0 -1
- package/dist/native/p-a69dbcef.entry.js +0 -2
- package/dist/native/p-a69dbcef.entry.js.map +0 -1
- package/dist/native/p-b32d0a5a.entry.js +0 -2
- package/dist/native/p-bc01787b.entry.js +0 -2
- package/dist/native/p-bc01787b.entry.js.map +0 -1
- package/dist/native/p-c7b7ffaf.entry.js +0 -2
- package/dist/native/p-cb34aa4f.js +0 -2
- package/dist/native/p-cb34aa4f.js.map +0 -1
- package/dist/native/p-cea942b9.entry.js +0 -2
- package/dist/native/p-cea942b9.entry.js.map +0 -1
- package/dist/native/p-d0a33e64.js.map +0 -1
- package/dist/native/p-d0ef1bbb.entry.js +0 -2
- package/dist/native/p-d0ef1bbb.entry.js.map +0 -1
- package/dist/native/p-d882f417.entry.js.map +0 -1
- package/dist/native/p-dd023fd6.entry.js +0 -2
- package/dist/native/p-dd023fd6.entry.js.map +0 -1
- package/dist/native/p-e765a624.entry.js +0 -2
- package/dist/native/p-e765a624.entry.js.map +0 -1
- package/dist/native/p-f0cbfb3d.entry.js +0 -2
- package/dist/native/p-f0cbfb3d.entry.js.map +0 -1
- package/dist/native/p-f5120223.entry.js +0 -2
- package/dist/native/p-fa177c39.entry.js +0 -2
- package/dist/native/p-fa177c39.entry.js.map +0 -1
- package/dist/types/components/nv-tablecolumn/nv-tablecolumn.d.ts +0 -13
- package/dist/types/components/nv-tablecolumn/nv-tablecolumn.docs.d.ts +0 -4
- /package/dist/native/{p-5c697133.entry.js.map → p-112d096c.entry.js.map} +0 -0
- /package/dist/native/{p-85f8f11a.entry.js.map → p-230af58a.entry.js.map} +0 -0
- /package/dist/native/{p-08322093.entry.js.map → p-52d2c0ae.entry.js.map} +0 -0
- /package/dist/native/{p-19090193.entry.js.map → p-647a0765.entry.js.map} +0 -0
- /package/dist/native/{p-1504e28b.entry.js.map → p-701b48a4.entry.js.map} +0 -0
- /package/dist/native/{p-234cfa2e.entry.js.map → p-7c9bf981.entry.js.map} +0 -0
- /package/dist/native/{p-464bb197.entry.js.map → p-83765537.entry.js.map} +0 -0
- /package/dist/native/{p-94dc9c41.entry.js.map → p-9d7e099f.entry.js.map} +0 -0
- /package/dist/native/{p-1235c007.entry.js.map → p-acabac31.entry.js.map} +0 -0
- /package/dist/native/{p-74b129e9.entry.js.map → p-bcf41cd0.entry.js.map} +0 -0
- /package/dist/native/{p-c66565f8.entry.js.map → p-cb0293ec.entry.js.map} +0 -0
- /package/dist/native/{p-e2c99ce2.entry.js.map → p-d94bf052.entry.js.map} +0 -0
- /package/dist/native/{p-9c5d6827.entry.js.map → p-fa78d8eb.entry.js.map} +0 -0
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["nvFieldselectCss","NvFieldselectStyle0","NvFieldselect","constructor","hostRef","this","computedDisplayValue","internalReadonly","inputId","uuidv4","disabled","readonly","required","error","success","multiple","value","displayValue","autofocus","fluid","handleSelectChange","event","select","target","selectedValues","Array","from","selectedOptions","map","option","slice","join","valueChanged","emit","setFormValue","handleSelectContainerClick","selectElement","focus","updateDisplayValueWatcher","newValue","updateDisplayValue","split","val","trim","options","forEach","selected","includes","handleDisplayValueChange","handleReadonlyChange","handleOptionsChange","selectedOption","find","opt","selectedLabels","key","getLabelFromId","filter","label","ensureSelectElement","textContent","internals","el","querySelector","componentWillRender","message","description","validation","errorDescription","componentWillLoad","attachInternals","formElement","closest","input","document","createElement","type","name","appendChild","componentDidLoad","v","render","h","Host","htmlFor","class","onClick","id","ref","onChange","length","size","emphasis","tabindex"],"sources":["src/components/nv-fieldselect/nv-fieldselect.scss?tag=nv-fieldselect","src/components/nv-fieldselect/nv-fieldselect.tsx"],"sourcesContent":["@import '../../styles/form-field';\n\n@mixin form-field-select-wrapper() {\n display: flex;\n flex-wrap: wrap;\n align-items: stretch;\n align-self: stretch;\n}\n\n@mixin form-field-select-container() {\n position: relative;\n display: flex;\n flex-grow: 1;\n justify-content: center;\n align-items: center;\n align-self: stretch;\n border-radius: var(--form-field-radius);\n border-width: 1px;\n border-style: solid;\n border-color: var(--nv-field-border-default);\n opacity: var(--components-form-opacity-default);\n background: var(--nv-field-background);\n transition: all 150ms ease-out;\n\n &:hover {\n border-color: var(--nv-field-border-hover);\n }\n\n &:focus-within {\n border-color: var(--nv-field-border-focus);\n box-shadow: 0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow);\n }\n\n &:has(select:disabled) {\n // opacity: var(--components-form-opacity-disabled, 0.5); broken token generation, is 50px instead of 0.5\n opacity: 0.5;\n background-color: var(--components-form-field-background-disabled);\n border-color: var(--nv-field-border-disabled);\n }\n}\n\n@mixin form-field-select() {\n display: flex;\n align-items: center;\n flex: 1 0 0;\n overflow: hidden;\n background-color: transparent;\n color: var(--components-form-field-content-text);\n text-overflow: ellipsis;\n font-size: var(--form-field-font-size);\n font-style: normal;\n font-weight: 500;\n height: var(--form-field-line-height);\n padding: var(--form-field-padding-y) var(--form-field-padding-x);\n box-sizing: content-box;\n -webkit-appearance: none;\n -moz-appearance: none;\n cursor: pointer;\n\n &:focus {\n outline: none;\n }\n\n &::placeholder {\n overflow: hidden;\n color: var(--components-form-field-content-placeholder);\n text-overflow: ellipsis;\n font-family: 'TT Norms Pro', sans-serif;\n font-size: var(--form-field-font-size);\n font-style: normal;\n font-weight: 400;\n line-height: var(--form-field-line-height);\n }\n}\n\n@mixin form-field-multi-select() {\n height: 100%;\n box-sizing: border-box;\n}\n\n@mixin form-field-select-icons() {\n position: absolute;\n right: 0;\n top: 0;\n pointer-events: none;\n}\n\nnv-fieldselect {\n @include form-field-variables();\n @include form-field-root();\n\n &[fluid]:not([fluid=\"false\"]) {\n @include form-field-fluid();\n }\n\n &[readonly]:not([readonly='false']) {\n @include form-field-readonly-variables();\n }\n\n &[display-value]:not([display-value='false']) {\n @include form-field-readonly-variables();\n }\n\n &[error]:not([error='false']) {\n @include form-field-error-variables();\n }\n\n &[success]:not([success='false']) {\n @include form-field-success-variables();\n }\n\n &[required]:not([required='false']) label {\n @include form-field-label-required();\n }\n\n &[multiple]:not([multiple='false']) {\n .select-wrapper > .select-container {\n > .select-icons {\n top: var(--form-field-padding-y);\n right: var(--form-field-padding-x);\n }\n > select {\n @include form-field-multi-select();\n background-color: var(--color-level-05-background);\n border-radius: var(--form-field-radius);\n }\n }\n }\n\n label {\n @include form-field-label();\n }\n\n .select-wrapper {\n @include form-field-select-wrapper();\n\n .select-container {\n @include form-field-select-container();\n\n > .select-icons {\n @include form-field-select-icons();\n > nv-iconbutton {\n @include form-field-action();\n }\n }\n\n input {\n @include form-field-input();\n\n &:read-only {\n // opacity: var(--components-form-opacity-disabled, 0.5); broken token generation, is 50px instead of 0.5\n opacity: 0.5;\n background-color: var(\n --components-form-field-background-readonly,\n rgb(0 0 0 / 10%)\n );\n border-color: var(--nv-field-border-readonly);\n }\n }\n\n select {\n @include form-field-select();\n\n & option {\n font-size: var(--form-field-font-size, 16px);\n font-style: normal;\n font-weight: 500;\n line-height: var(--form-field-line-height, 24px);\n background-color: var(--color-level-05-background);\n color: var(--components-form-field-content-text);\n }\n\n &.hidden {\n display: none;\n }\n }\n\n nv-icon.readonly-icon {\n @include form-field-icon();\n }\n\n nv-icon.validation {\n @include form-field-icon();\n }\n }\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 Prop,\n Event,\n EventEmitter,\n Watch,\n Element,\n State,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\n/**\n * @slot default - Content to be placed inside the select element.\n * @slot leading-input - Content to be placed before the select input, within the select container.\n * @slot before-input - Content to be placed before the select input, outside the select container.\n * @slot after-input - Content to be placed after the select input, outside the select 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-fieldselect',\n shadow: false,\n formAssociated: true,\n styleUrl: 'nv-fieldselect.scss',\n})\nexport class NvFieldselect {\n @Element() el: HTMLNvFieldselectElement;\n private selectElement!: HTMLSelectElement;\n private internals: ElementInternals;\n\n /****************************************************************************/\n //#region DEPRECATED\n\n /**\n * Message defines a 'hint ' message for the Select Field.\n * @deprecated Use `description` instead.\n */\n @Prop({ reflect: true })\n readonly message: string;\n\n /**\n * Add the message to the validation state.\n * @deprecated Use `errorDescription` and set the error prop instead.\n */\n @Prop({ reflect: true })\n readonly validation: string;\n\n //#endregion DEPRECATED\n /****************************************************************************/\n //#region STATES\n\n @State()\n private computedDisplayValue: string = '';\n\n @State()\n private internalReadonly: boolean = false;\n\n /**\n * Options to display in the select.\n * Format: [{ label: string, value: string, selected?: boolean, disabled?: boolean }]\n */\n @Prop({ reflect: false })\n readonly options?: Array<{\n /**\n * The label of the option\n */\n label: string;\n /**\n * The value of the option\n */\n value: string;\n /**\n * Whether the option is selected\n */\n selected?: boolean;\n /**\n * Whether the option is disabled\n */\n disabled?: boolean;\n }>;\n\n //#endregion STATES\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * Sets the ID for the select 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 choose in the\n * select 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 select field. This is\n * where you can clarify what users should choose or provide additional\n * instructions, making the form easier to fill out correctly.\n */\n @Prop({ reflect: true, mutable: true })\n description?: string;\n\n /**\n * Defines the name attribute of the select 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 selected 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 * The disabled prop lets you turn off the select field so that users can’t\n * choose something. 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 * Display the select 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 change or delete anything.\n */\n @Prop({ reflect: true })\n readonly readonly: boolean = false;\n\n /**\n * Marks the select 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 select field’s appearance to indicate an error, helping users\n * identify fields that need correction.\n * @validator error\n */\n @Prop({ reflect: true, mutable: true })\n error: boolean = false;\n\n /**\n * Show a helpful message under the select field when there’s a problem. It\n * explains what’s wrong and how users can fix it, making the error easier to\n * understand and resolve.\n * @validator message\n */\n @Prop({ reflect: true, mutable: true })\n errorDescription: string;\n\n /**\n * Changes the select field’s appearance to indicate successful input or\n * validation.\n */\n @Prop({ reflect: true })\n readonly success: boolean = false;\n\n /**\n * When enabled, allows the select to handle multiple selections.\n */\n @Prop({ reflect: true })\n readonly multiple: boolean = false;\n\n /**\n * The value of the select field.\n * - If `multiple` is `false`, it's a single string.\n * - If `multiple` is `true`, it's a comma-separated string of selected values.\n */\n @Prop({ reflect: true, mutable: true })\n value: string = '';\n\n /**\n * When enabled, displays the value element instead of the label when readonly.\n * By default, the label is displayed in readonly mode. Also it automatically\n * sets the component to readonly.\n */\n @Prop({ reflect: true })\n readonly displayValue: boolean = false;\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 a <select>\n * element.\n */\n @Prop({ reflect: true })\n // eslint-disable-next-line @stencil-community/reserved-member-names\n readonly autofocus: boolean = false;\n\n /**\n * Allows the field to stretch and fill the entire width of its container.\n */\n @Prop({ reflect: true })\n readonly fluid: boolean = false;\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Emitted when the selected value changes.\n * @bind value\n */\n @Event()\n valueChanged: EventEmitter<string>; // Emit as a string\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region WATCHERS\n\n /**\n * Updates the display value when the value property changes. This watcher is\n * used to update the display value when the selected value changes. This is\n * necessary for readonly select fields to display the selected value.\n * @internal This watcher is not intended to be called outside of the component.\n * @param {string} newValue - The new value of the select field.\n */\n @Watch('value')\n updateDisplayValueWatcher(newValue: string) {\n this.updateDisplayValue();\n\n if (this.selectElement) {\n const selectedValues = newValue.split(',').map(val => val.trim());\n const options = this.selectElement.options;\n\n if (options) {\n Array.from(options).forEach(option => {\n option.selected = this.multiple\n ? selectedValues.includes(option.value)\n : option.value === selectedValues[0];\n });\n\n if (!this.multiple) {\n this.selectElement.value = newValue; // Only set when not multiple\n }\n } else {\n this.selectElement.value = selectedValues[0] || '';\n }\n }\n\n // Update form value\n this.setFormValue();\n }\n\n /**\n * Watcher for the displayValue prop to ensure internalReadonly is true when displayValue is true.\n * @param {boolean} newValue - The new value of displayValue.\n */\n @Watch('displayValue')\n handleDisplayValueChange(newValue: boolean) {\n this.internalReadonly = newValue; // Set internalReadonly to true if displayValue is true\n\n if (this.readonly) {\n this.internalReadonly = true;\n }\n }\n\n /**\n * Watcher for the readonly prop to ensure internalReadonly is true when readonly is true.\n * @param {boolean} newValue - The new value of readonly.\n */\n @Watch('readonly')\n handleReadonlyChange(newValue: boolean) {\n this.internalReadonly = newValue; // Set internalReadonly to true if displayValue is true\n\n if (this.displayValue) {\n this.internalReadonly = true;\n }\n }\n\n /**\n * Handle options change and update the internal state\n * @param {typeof this.options} newValue - The new value of options\n */\n @Watch('options')\n handleOptionsChange(newValue: typeof this.options) {\n if (!newValue) return;\n\n // Update the value if an option is pre-selected\n const selectedOption = newValue.find(opt => opt.selected);\n if (selectedOption) {\n this.value = selectedOption.value;\n }\n }\n\n //#endregion WATCHERS\n /****************************************************************************/\n //#region METHODS\n\n /**\n * Handles the change event on the select element. This method is used to\n * update the value property when the selected options change. It is also\n * used to emit the selectChanged event when the selected value changes.\n * @param {Event} event - The change event on the select element.\n * @emits selectChanged\n */\n private readonly handleSelectChange = (event: Event) => {\n const select = event.target as HTMLSelectElement;\n let selectedValues: string[] = Array.from(select.selectedOptions).map(\n option => option.value,\n );\n\n if (!this.multiple) {\n selectedValues = selectedValues.slice(0, 1);\n }\n\n this.value = this.multiple\n ? selectedValues.join(', ')\n : selectedValues[0] || '';\n this.valueChanged.emit(this.value);\n\n // Update form value\n this.setFormValue();\n };\n\n /**\n * Handles focus when the select container is clicked.\n */\n private readonly handleSelectContainerClick = () => {\n if (!this.internalReadonly && this.selectElement) {\n this.selectElement.focus();\n }\n };\n\n /**\n * Updates the display value of the select field. This method is used to\n * update the display value when the selected value changes. This is necessary\n * for readonly select fields to display the selected value. This method is\n * called in the componentDidLoad lifecycle hook and the updateDisplayValueWatcher\n * watcher.\n * @internal This method is not intended to be called outside of the component.\n */\n private updateDisplayValue(): void {\n if (this.internalReadonly && !this.displayValue) {\n if (this.multiple) {\n const selectedLabels = this.value\n .split(',')\n .map(key => key.trim())\n .map(key => this.getLabelFromId(key) || '')\n .filter(label => label !== '');\n this.computedDisplayValue = selectedLabels.join(', ') || '';\n } else {\n this.computedDisplayValue = this.getLabelFromId(this.value) || '';\n }\n } else if (this.internalReadonly && this.displayValue) {\n this.computedDisplayValue = this.value || '';\n }\n }\n\n /**\n * Retrieves the label from the <option> elements based on the provided key (value).\n * This method uses the id or value attribute directly from the <select> options.\n * @param {string} key - The key (value) for which to find the corresponding label.\n * @returns {string} The label if found; otherwise, an empty string.\n */\n private getLabelFromId(key: string): string {\n this.ensureSelectElement();\n if (!this.selectElement) {\n return '';\n }\n\n // Cache the option list\n const options = this.selectElement.options;\n\n if (options) {\n const option = Array.from(options).find(option => option.value === key);\n return option ? option.textContent.trim() || '' : '';\n } else {\n return '';\n }\n }\n\n /**\n * Sets the value of the form element for form submission. This method is\n * called when the selected value changes or when the value property is set.\n * @internal This method is not intended to be called outside of the component.\n */\n private setFormValue(): void {\n this.internals.setFormValue(this.value);\n }\n\n /**\n * Ensures the select element is available. This method is used to ensure\n * the select element is available before attempting to access it.\n * @internal This method is not intended to be called outside of the component.\n */\n private ensureSelectElement(): void {\n if (!this.selectElement) {\n this.selectElement = this.el.querySelector('select') as HTMLSelectElement;\n }\n }\n\n //#endregion METHODS\n /****************************************************************************/\n //#region LIFECYCLE\n\n componentWillRender() {\n this.updateDisplayValue(); // Ensure display value is updated before render\n\n if (this.message) {\n this.description = this.message;\n }\n\n if (this.validation) {\n this.errorDescription = this.validation;\n this.error = true;\n }\n }\n\n /**\n * Lifecycle method that is called before the component is rendered. This is\n * where the internal state is set up before rendering occurs.\n */\n componentWillLoad() {\n // Set internalReadonly based on the readonly prop\n this.internalReadonly = this.readonly;\n\n // Ensure internalReadonly is true if displayValue is true during loading\n if (this.displayValue) {\n this.internalReadonly = true;\n }\n\n if ('attachInternals' in this.el) {\n this.internals = (\n this.el as HTMLElement & {\n /**\n * Attach the element to the form internals.\n * @returns {ElementInternals} - The element internals object.\n */\n attachInternals: () => ElementInternals;\n }\n ).attachInternals();\n } else {\n // Fallback logic for browsers without attachInternals support\n this.internals = {\n setFormValue: (value: string) => {\n const formElement = this.el.closest('form');\n if (formElement) {\n const input = document.createElement('input');\n input.type = 'hidden';\n input.name = this.name;\n input.value = value;\n formElement.appendChild(input);\n }\n },\n } as ElementInternals;\n }\n\n // Initialize value as an empty string if multiple is true\n if (this.multiple && typeof this.value !== 'string') {\n this.value = '';\n }\n\n // Parse initial options if present\n if (this.options) {\n this.handleOptionsChange(this.options);\n }\n }\n\n /**\n * Lifecycle method that is called after the component has been rendered.\n * This is where the display value is updated and the initial select element's\n * state is set.\n */\n componentDidLoad() {\n this.updateDisplayValue();\n\n if (this.selectElement) {\n // Only set the value for single selection, skip for multiple\n if (!this.multiple) {\n this.selectElement.value = this.value;\n }\n\n const selectedValues = this.multiple\n ? this.value.split(',').map(v => v.trim())\n : [this.value];\n\n const options = this.selectElement.options;\n\n if (options) {\n Array.from(options).forEach(option => {\n option.selected = this.multiple\n ? selectedValues.includes(option.value)\n : option.value === selectedValues[0];\n });\n } else {\n // Handle case where there are no options\n this.selectElement.value = selectedValues[0] || '';\n }\n }\n\n // Set the initial form value\n this.setFormValue();\n }\n\n //#endregion LIFECYCLE\n /****************************************************************************/\n //#region RENDERING\n\n /**\n * The render method creates the HTML structure for the component, including\n * the label, select element, and any error or description messages. It also\n * applies the appropriate CSS classes based on the readonly state and\n * displayValue prop. This method is called when the component is rendered.\n * @returns {HTMLStencilElement} The HTML element to 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 <div class=\"select-wrapper\">\n <slot name=\"before-input\"></slot>\n\n <div\n class=\"select-container\"\n onClick={this.handleSelectContainerClick}\n >\n <slot name=\"leading-input\"></slot>\n\n {this.internalReadonly && (\n <input\n id={this.inputId + '-readonly'}\n type=\"text\"\n value={this.computedDisplayValue}\n readonly\n class=\"readonly-input\"\n aria-readonly=\"true\"\n aria-label={this.label}\n aria-describedby={\n this.error\n ? `${this.inputId}-error`\n : `${this.inputId}-description`\n }\n />\n )}\n\n <select\n id={this.inputId}\n ref={el => (this.selectElement = el)}\n name={this.name}\n autofocus={this.autofocus}\n disabled={this.disabled}\n required={this.required}\n multiple={this.multiple}\n onChange={this.handleSelectChange}\n class={this.internalReadonly ? 'hidden' : ''}\n aria-label={this.label}\n aria-describedby={\n this.error\n ? `${this.inputId}-error`\n : `${this.inputId}-description`\n }\n >\n {this.options && this.options.length > 0 ? (\n this.options.map(option => (\n <option\n value={option.value}\n selected={option.selected}\n disabled={option.disabled}\n >\n {option.label}\n </option>\n ))\n ) : (\n <slot />\n )}\n </select>\n <div class=\"select-icons\">\n {this.error && (\n <nv-icon name=\"alert-circle\" class=\"validation\" size=\"md\" />\n )}\n {this.success && (\n <nv-icon name=\"circle-check\" class=\"validation\" size=\"md\" />\n )}\n\n {!this.multiple && (\n <nv-iconbutton\n name=\"chevron-down\"\n size=\"md\"\n emphasis=\"lower\"\n tabindex={-1}\n />\n )}\n </div>\n </div>\n\n <slot name=\"after-input\"></slot>\n </div>\n\n {(this.description ||\n this.el.querySelector('[slot=\"description\"]')) && (\n <div class=\"description\" id={`${this.inputId}-description`}>\n <slot name=\"description\">{this.description}</slot>\n </div>\n )}\n\n {(this.errorDescription ||\n this.el.querySelector('[slot=\"error-description\"]')) && (\n <div class=\"error-description\" id={`${this.inputId}-error`}>\n <slot name=\"error-description\">{this.errorDescription}</slot>\n </div>\n )}\n </Host>\n );\n }\n\n //#endregion RENDERING\n}\n"],"mappings":"oGAAA,MAAMA,EAAmB,29SACzB,MAAAC,EAAeD,E,MC2BFE,EAAa,MAN1B,WAAAC,CAAAC,G,qDAiCUC,KAAAC,qBAA+B,GAG/BD,KAAAE,iBAA4B,MAqC3BF,KAAAG,QAAkBC,IAiClBJ,KAAAK,SAAoB,MAQpBL,KAAAM,SAAoB,MAOpBN,KAAAO,SAAoB,MAQ7BP,KAAAQ,MAAiB,MAgBRR,KAAAS,QAAmB,MAMnBT,KAAAU,SAAoB,MAQ7BV,KAAAW,MAAgB,GAQPX,KAAAY,aAAwB,MASxBZ,KAAAa,UAAqB,MAMrBb,KAAAc,MAAiB,MAuGTd,KAAAe,mBAAsBC,IACrC,MAAMC,EAASD,EAAME,OACrB,IAAIC,EAA2BC,MAAMC,KAAKJ,EAAOK,iBAAiBC,KAChEC,GAAUA,EAAOb,QAGnB,IAAKX,KAAKU,SAAU,CAClBS,EAAiBA,EAAeM,MAAM,EAAG,E,CAG3CzB,KAAKW,MAAQX,KAAKU,SACdS,EAAeO,KAAK,MACpBP,EAAe,IAAM,GACzBnB,KAAK2B,aAAaC,KAAK5B,KAAKW,OAG5BX,KAAK6B,cAAc,EAMJ7B,KAAA8B,2BAA6B,KAC5C,IAAK9B,KAAKE,kBAAoBF,KAAK+B,cAAe,CAChD/B,KAAK+B,cAAcC,O,GAtGvB,yBAAAC,CAA0BC,GACxBlC,KAAKmC,qBAEL,GAAInC,KAAK+B,cAAe,CACtB,MAAMZ,EAAiBe,EAASE,MAAM,KAAKb,KAAIc,GAAOA,EAAIC,SAC1D,MAAMC,EAAUvC,KAAK+B,cAAcQ,QAEnC,GAAIA,EAAS,CACXnB,MAAMC,KAAKkB,GAASC,SAAQhB,IAC1BA,EAAOiB,SAAWzC,KAAKU,SACnBS,EAAeuB,SAASlB,EAAOb,OAC/Ba,EAAOb,QAAUQ,EAAe,EAAE,IAGxC,IAAKnB,KAAKU,SAAU,CAClBV,KAAK+B,cAAcpB,MAAQuB,C,MAExB,CACLlC,KAAK+B,cAAcpB,MAAQQ,EAAe,IAAM,E,EAKpDnB,KAAK6B,c,CAQP,wBAAAc,CAAyBT,GACvBlC,KAAKE,iBAAmBgC,EAExB,GAAIlC,KAAKM,SAAU,CACjBN,KAAKE,iBAAmB,I,EAS5B,oBAAA0C,CAAqBV,GACnBlC,KAAKE,iBAAmBgC,EAExB,GAAIlC,KAAKY,aAAc,CACrBZ,KAAKE,iBAAmB,I,EAS5B,mBAAA2C,CAAoBX,GAClB,IAAKA,EAAU,OAGf,MAAMY,EAAiBZ,EAASa,MAAKC,GAAOA,EAAIP,WAChD,GAAIK,EAAgB,CAClB9C,KAAKW,MAAQmC,EAAenC,K,EAmDxB,kBAAAwB,GACN,GAAInC,KAAKE,mBAAqBF,KAAKY,aAAc,CAC/C,GAAIZ,KAAKU,SAAU,CACjB,MAAMuC,EAAiBjD,KAAKW,MACzByB,MAAM,KACNb,KAAI2B,GAAOA,EAAIZ,SACff,KAAI2B,GAAOlD,KAAKmD,eAAeD,IAAQ,KACvCE,QAAOC,GAASA,IAAU,KAC7BrD,KAAKC,qBAAuBgD,EAAevB,KAAK,OAAS,E,KACpD,CACL1B,KAAKC,qBAAuBD,KAAKmD,eAAenD,KAAKW,QAAU,E,OAE5D,GAAIX,KAAKE,kBAAoBF,KAAKY,aAAc,CACrDZ,KAAKC,qBAAuBD,KAAKW,OAAS,E,EAUtC,cAAAwC,CAAeD,GACrBlD,KAAKsD,sBACL,IAAKtD,KAAK+B,cAAe,CACvB,MAAO,E,CAIT,MAAMQ,EAAUvC,KAAK+B,cAAcQ,QAEnC,GAAIA,EAAS,CACX,MAAMf,EAASJ,MAAMC,KAAKkB,GAASQ,MAAKvB,GAAUA,EAAOb,QAAUuC,IACnE,OAAO1B,EAASA,EAAO+B,YAAYjB,QAAU,GAAK,E,KAC7C,CACL,MAAO,E,EASH,YAAAT,GACN7B,KAAKwD,UAAU3B,aAAa7B,KAAKW,M,CAQ3B,mBAAA2C,GACN,IAAKtD,KAAK+B,cAAe,CACvB/B,KAAK+B,cAAgB/B,KAAKyD,GAAGC,cAAc,S,EAQ/C,mBAAAC,GACE3D,KAAKmC,qBAEL,GAAInC,KAAK4D,QAAS,CAChB5D,KAAK6D,YAAc7D,KAAK4D,O,CAG1B,GAAI5D,KAAK8D,WAAY,CACnB9D,KAAK+D,iBAAmB/D,KAAK8D,WAC7B9D,KAAKQ,MAAQ,I,EAQjB,iBAAAwD,GAEEhE,KAAKE,iBAAmBF,KAAKM,SAG7B,GAAIN,KAAKY,aAAc,CACrBZ,KAAKE,iBAAmB,I,CAG1B,GAAI,oBAAqBF,KAAKyD,GAAI,CAChCzD,KAAKwD,UACHxD,KAAKyD,GAOLQ,iB,KACG,CAELjE,KAAKwD,UAAY,CACf3B,aAAelB,IACb,MAAMuD,EAAclE,KAAKyD,GAAGU,QAAQ,QACpC,GAAID,EAAa,CACf,MAAME,EAAQC,SAASC,cAAc,SACrCF,EAAMG,KAAO,SACbH,EAAMI,KAAOxE,KAAKwE,KAClBJ,EAAMzD,MAAQA,EACduD,EAAYO,YAAYL,E,IAOhC,GAAIpE,KAAKU,iBAAmBV,KAAKW,QAAU,SAAU,CACnDX,KAAKW,MAAQ,E,CAIf,GAAIX,KAAKuC,QAAS,CAChBvC,KAAK6C,oBAAoB7C,KAAKuC,Q,EASlC,gBAAAmC,GACE1E,KAAKmC,qBAEL,GAAInC,KAAK+B,cAAe,CAEtB,IAAK/B,KAAKU,SAAU,CAClBV,KAAK+B,cAAcpB,MAAQX,KAAKW,K,CAGlC,MAAMQ,EAAiBnB,KAAKU,SACxBV,KAAKW,MAAMyB,MAAM,KAAKb,KAAIoD,GAAKA,EAAErC,SACjC,CAACtC,KAAKW,OAEV,MAAM4B,EAAUvC,KAAK+B,cAAcQ,QAEnC,GAAIA,EAAS,CACXnB,MAAMC,KAAKkB,GAASC,SAAQhB,IAC1BA,EAAOiB,SAAWzC,KAAKU,SACnBS,EAAeuB,SAASlB,EAAOb,OAC/Ba,EAAOb,QAAUQ,EAAe,EAAE,G,KAEnC,CAELnB,KAAK+B,cAAcpB,MAAQQ,EAAe,IAAM,E,EAKpDnB,KAAK6B,c,CAcP,MAAA+C,GACE,OACEC,EAACC,EAAI,CAAA5B,IAAA,6CACDlD,KAAKqD,OAASrD,KAAKyD,GAAGC,cAAc,oBACpCmB,EAAA,SAAA3B,IAAA,2CAAO6B,QAAS/E,KAAKG,SACnB0E,EAAA,QAAA3B,IAAA,2CAAMsB,KAAK,SAASxE,KAAKqD,QAI7BwB,EAAA,OAAA3B,IAAA,2CAAK8B,MAAM,kBACTH,EAAA,QAAA3B,IAAA,2CAAMsB,KAAK,iBAEXK,EAAA,OAAA3B,IAAA,2CACE8B,MAAM,mBACNC,QAASjF,KAAK8B,4BAEd+C,EAAA,QAAA3B,IAAA,2CAAMsB,KAAK,kBAEVxE,KAAKE,kBACJ2E,EAAA,SAAA3B,IAAA,2CACEgC,GAAIlF,KAAKG,QAAU,YACnBoE,KAAK,OACL5D,MAAOX,KAAKC,qBACZK,SAAQ,KACR0E,MAAM,iBAAgB,gBACR,OAAM,aACRhF,KAAKqD,MAAK,mBAEpBrD,KAAKQ,MACD,GAAGR,KAAKG,gBACR,GAAGH,KAAKG,wBAKlB0E,EAAA,UAAA3B,IAAA,2CACEgC,GAAIlF,KAAKG,QACTgF,IAAK1B,GAAOzD,KAAK+B,cAAgB0B,EACjCe,KAAMxE,KAAKwE,KACX3D,UAAWb,KAAKa,UAChBR,SAAUL,KAAKK,SACfE,SAAUP,KAAKO,SACfG,SAAUV,KAAKU,SACf0E,SAAUpF,KAAKe,mBACfiE,MAAOhF,KAAKE,iBAAmB,SAAW,GAAE,aAChCF,KAAKqD,MAAK,mBAEpBrD,KAAKQ,MACD,GAAGR,KAAKG,gBACR,GAAGH,KAAKG,uBAGbH,KAAKuC,SAAWvC,KAAKuC,QAAQ8C,OAAS,EACrCrF,KAAKuC,QAAQhB,KAAIC,GACfqD,EAAA,UACElE,MAAOa,EAAOb,MACd8B,SAAUjB,EAAOiB,SACjBpC,SAAUmB,EAAOnB,UAEhBmB,EAAO6B,SAIZwB,EAAA,cAGJA,EAAA,OAAA3B,IAAA,2CAAK8B,MAAM,gBACRhF,KAAKQ,OACJqE,EAAA,WAAA3B,IAAA,2CAASsB,KAAK,eAAeQ,MAAM,aAAaM,KAAK,OAEtDtF,KAAKS,SACJoE,EAAA,WAAA3B,IAAA,2CAASsB,KAAK,eAAeQ,MAAM,aAAaM,KAAK,QAGrDtF,KAAKU,UACLmE,EAAA,iBAAA3B,IAAA,2CACEsB,KAAK,eACLc,KAAK,KACLC,SAAS,QACTC,UAAW,MAMnBX,EAAA,QAAA3B,IAAA,2CAAMsB,KAAK,kBAGXxE,KAAK6D,aACL7D,KAAKyD,GAAGC,cAAc,0BACtBmB,EAAA,OAAA3B,IAAA,2CAAK8B,MAAM,cAAcE,GAAI,GAAGlF,KAAKG,uBACnC0E,EAAA,QAAA3B,IAAA,2CAAMsB,KAAK,eAAexE,KAAK6D,eAIjC7D,KAAK+D,kBACL/D,KAAKyD,GAAGC,cAAc,gCACtBmB,EAAA,OAAA3B,IAAA,2CAAK8B,MAAM,oBAAoBE,GAAI,GAAGlF,KAAKG,iBACzC0E,EAAA,QAAA3B,IAAA,2CAAMsB,KAAK,qBAAqBxE,KAAK+D,mB","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["nvTogglebuttongroupCss","NvTogglebuttongroupStyle0","NvTogglebuttongroup","constructor","hostRef","this","exclusive","enforceValue","emphasis","size","setActiveToggleButtons","el","querySelectorAll","forEach","toggleButtonEl","btn","asToggleButton","active","_a","value","includes","setEmphasisToggleButtons","setSizeToggleButtons","setupMutationObserver","mutationObserver","MutationObserver","mutations","mutation","type","addedNodes","length","observe","childList","subtree","element","HTMLElement","onValueChanged","newValue","valueChanged","emit","onEmphasisChanged","onSizeChanged","onToggled","event","valueSet","Set","detail","has","toggle","delete","add","componentWillLoad","disconnectedCallback","disconnect","render","h","Host","key"],"sources":["src/components/nv-togglebuttongroup/styles/nv-togglebuttongroup.scss?tag=nv-togglebuttongroup","src/components/nv-togglebuttongroup/nv-togglebuttongroup.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n\nnv-togglebuttongroup {\n @include root-styles();\n\n &[emphasis=\"high\"] {\n @include high-emphasis-styles();\n }\n &[emphasis=\"low\"] {\n @include low-emphasis-styles();\n }\n @each $size in $sizes {\n &[size=\"#{$size}\"] {\n @include size-styles($size);\n \n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Listen,\n Watch,\n Element,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport { ToggleButtonEmphasis, ToggleButtonSize } from '../../utils/constants';\n\n/**\n * @deprecated [EXPERIMENTAL]\n * @experimental This component is still in development and subject to change in future releases.\n * @slot default - Child content of the component, pass the nv-togglebutton components here.\n */\n@Component({\n tag: 'nv-togglebuttongroup',\n styleUrl: 'styles/nv-togglebuttongroup.scss',\n shadow: false,\n})\nexport class NvTogglebuttongroup {\n @Element() el!: HTMLNvTogglebuttongroupElement;\n private mutationObserver: MutationObserver;\n\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * The active toggle buttons in the group. Is an array of one string when in\n * exclusive mode, and an array of strings when in non-exclusive mode.\n */\n @Prop({ reflect: false, mutable: true })\n value: string[];\n\n /**\n * Activates single-selection mode so only one button can be active at a time.\n */\n @Prop({ reflect: true })\n readonly exclusive: boolean = false;\n\n /**\n * Ensures at least one toggle stays selected at all times.\n */\n @Prop({ reflect: true })\n readonly enforceValue: boolean = false;\n\n /**\n * Make it more or less visually prominent to users.\n */\n @Prop({ reflect: true })\n readonly emphasis: `${ToggleButtonEmphasis}` = 'high';\n\n /**\n * Determines how large or small the togglebutton appears, allowing for\n * customization of the togglebutton's dimensions to fit different design\n * specifications and user needs.\n */\n @Prop({ reflect: true })\n readonly size: `${ToggleButtonSize}` = 'md';\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region METHODS\n\n /**\n * Sets the active state of all toggle buttons depending on the value of the\n * group.\n */\n private setActiveToggleButtons = () => {\n this.el.querySelectorAll('nv-togglebutton').forEach(toggleButtonEl => {\n const btn = NvTogglebuttongroup.asToggleButton(toggleButtonEl);\n if (!btn) return;\n btn.active = (this.value ?? []).includes(btn.value);\n });\n };\n\n /**\n * Sets the emphasis of all toggle buttons to the same value.\n */\n private setEmphasisToggleButtons = () => {\n this.el.querySelectorAll('nv-togglebutton').forEach(toggleButtonEl => {\n const btn = NvTogglebuttongroup.asToggleButton(toggleButtonEl);\n if (!btn) return;\n btn.emphasis = this.emphasis;\n });\n };\n\n /**\n * Sets the size of all toggle buttons to the same value.\n */\n private setSizeToggleButtons = () => {\n this.el.querySelectorAll('nv-togglebutton').forEach(toggleButtonEl => {\n const btn = NvTogglebuttongroup.asToggleButton(toggleButtonEl);\n if (!btn) return;\n btn.size = this.size;\n });\n };\n\n /**\n * Sets up the MutationObserver to watch for changes in child elements\n */\n private setupMutationObserver = (): void => {\n this.mutationObserver = new MutationObserver(mutations => {\n mutations.forEach(mutation => {\n if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {\n this.setEmphasisToggleButtons();\n this.setSizeToggleButtons();\n }\n });\n });\n\n this.mutationObserver.observe(this.el, {\n childList: true,\n subtree: true,\n });\n };\n\n /**\n * Narrow Type used locally to interact with nv-togglebutton child elements.\n * @param {Element} element - The element to check.\n * @returns {(HTMLElement & {\n * active: boolean;\n * value: string;\n * emphasis: `${ToggleButtonEmphasis}`;\n * size: `${ToggleButtonSize}`;\n * }) | null} The element as a toggle button, or null if it is not a toggle button.\n */\n private static asToggleButton(element: Element):\n | (HTMLElement & {\n /**\n * Whether the button is active or not. Will not toggle automatically but\n * needs to be controlled externally.\n */\n active: boolean;\n /**\n * The value to associated with the button when selected in a\n * Togglebuttongroup.\n */\n value: string;\n /**\n * Make it more or less visually prominent to users.\n */\n emphasis: `${ToggleButtonEmphasis}`;\n /**\n * Determines how large or small the togglebutton appears, allowing for\n * customization of the togglebutton's dimensions to fit different design\n * specifications and user needs.\n */\n size: `${ToggleButtonSize}`;\n })\n | null {\n return element instanceof HTMLElement\n ? (element as unknown as HTMLElement & {\n /**\n * Whether the button is active or not. Will not toggle automatically but\n * needs to be controlled externally.\n */\n active: boolean;\n /**\n * The value to associated with the button when selected in a\n * Togglebuttongroup.\n */\n value: string;\n /**\n * Make it more or less visually prominent to users.\n */\n emphasis: `${ToggleButtonEmphasis}`;\n /**\n * Determines how large or small the togglebutton appears, allowing for\n * customization of the togglebutton's dimensions to fit different design\n * specifications and user needs.\n */\n size: `${ToggleButtonSize}`;\n })\n : null;\n }\n //#endregion METHODS\n /****************************************************************************/\n //#region WATCHERS\n\n @Watch('value')\n onValueChanged(newValue: typeof this.value) {\n this.setActiveToggleButtons();\n this.valueChanged.emit(newValue);\n }\n\n @Watch('emphasis')\n onEmphasisChanged() {\n this.setEmphasisToggleButtons();\n }\n\n @Watch('size')\n onSizeChanged() {\n this.setSizeToggleButtons();\n }\n\n @Listen('toggled')\n onToggled(event: CustomEvent<HTMLNvTogglebuttonElementEventMap['toggled']>) {\n const valueSet = new Set(this.value);\n\n if (this.exclusive && this.enforceValue) {\n this.value = [event.detail.value];\n return;\n }\n\n if (this.exclusive) {\n if (valueSet.has(event.detail.value)) {\n this.value = [];\n } else {\n this.value = [event.detail.value];\n }\n return;\n }\n\n toggle: if (event.detail.active) {\n if (this.enforceValue && valueSet.size === 1) break toggle;\n valueSet.delete(event.detail.value);\n } else {\n valueSet.add(event.detail.value);\n }\n this.value = [...valueSet];\n }\n\n //#endregion WATCHERS\n /****************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n this.setActiveToggleButtons();\n this.setEmphasisToggleButtons();\n this.setSizeToggleButtons();\n this.setupMutationObserver();\n }\n\n disconnectedCallback() {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n }\n }\n\n //#endregion LIFECYCLE\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Emitted when the selected toggle buttons change.\n * @bind value\n */\n @Event()\n valueChanged: EventEmitter<string[]>;\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host>\n <slot></slot>\n </Host>\n );\n }\n\n // #endregion RENDER\n}\n"],"mappings":"gEAAA,MAAMA,EAAyB,k8BAC/B,MAAAC,EAAeD,E,MCsBFE,EAAmB,MALhC,WAAAC,CAAAC,G,qDAuBWC,KAAAC,UAAqB,MAMrBD,KAAAE,aAAwB,MAMxBF,KAAAG,SAAsC,OAQtCH,KAAAI,KAA8B,KAU/BJ,KAAAK,uBAAyB,KAC/BL,KAAKM,GAAGC,iBAAiB,mBAAmBC,SAAQC,I,MAClD,MAAMC,EAAMb,EAAoBc,eAAeF,GAC/C,IAAKC,EAAK,OACVA,EAAIE,SAAUC,EAAAb,KAAKc,SAAK,MAAAD,SAAA,EAAAA,EAAI,IAAIE,SAASL,EAAII,MAAM,GACnD,EAMId,KAAAgB,yBAA2B,KACjChB,KAAKM,GAAGC,iBAAiB,mBAAmBC,SAAQC,IAClD,MAAMC,EAAMb,EAAoBc,eAAeF,GAC/C,IAAKC,EAAK,OACVA,EAAIP,SAAWH,KAAKG,QAAQ,GAC5B,EAMIH,KAAAiB,qBAAuB,KAC7BjB,KAAKM,GAAGC,iBAAiB,mBAAmBC,SAAQC,IAClD,MAAMC,EAAMb,EAAoBc,eAAeF,GAC/C,IAAKC,EAAK,OACVA,EAAIN,KAAOJ,KAAKI,IAAI,GACpB,EAMIJ,KAAAkB,sBAAwB,KAC9BlB,KAAKmB,iBAAmB,IAAIC,kBAAiBC,IAC3CA,EAAUb,SAAQc,IAChB,GAAIA,EAASC,OAAS,aAAeD,EAASE,WAAWC,OAAS,EAAG,CACnEzB,KAAKgB,2BACLhB,KAAKiB,sB,IAEP,IAGJjB,KAAKmB,iBAAiBO,QAAQ1B,KAAKM,GAAI,CACrCqB,UAAW,KACXC,QAAS,MACT,C,CAaI,qBAAOjB,CAAekB,GAwB5B,OAAOA,aAAmBC,YACrBD,EAsBD,I,CAON,cAAAE,CAAeC,GACbhC,KAAKK,yBACLL,KAAKiC,aAAaC,KAAKF,E,CAIzB,iBAAAG,GACEnC,KAAKgB,0B,CAIP,aAAAoB,GACEpC,KAAKiB,sB,CAIP,SAAAoB,CAAUC,GACR,MAAMC,EAAW,IAAIC,IAAIxC,KAAKc,OAE9B,GAAId,KAAKC,WAAaD,KAAKE,aAAc,CACvCF,KAAKc,MAAQ,CAACwB,EAAMG,OAAO3B,OAC3B,M,CAGF,GAAId,KAAKC,UAAW,CAClB,GAAIsC,EAASG,IAAIJ,EAAMG,OAAO3B,OAAQ,CACpCd,KAAKc,MAAQ,E,KACR,CACLd,KAAKc,MAAQ,CAACwB,EAAMG,OAAO3B,M,CAE7B,M,CAGF6B,EAAQ,GAAIL,EAAMG,OAAO7B,OAAQ,CAC/B,GAAIZ,KAAKE,cAAgBqC,EAASnC,OAAS,EAAG,MAAMuC,EACpDJ,EAASK,OAAON,EAAMG,OAAO3B,M,KACxB,CACLyB,EAASM,IAAIP,EAAMG,OAAO3B,M,CAE5Bd,KAAKc,MAAQ,IAAIyB,E,CAOnB,iBAAAO,GACE9C,KAAKK,yBACLL,KAAKgB,2BACLhB,KAAKiB,uBACLjB,KAAKkB,uB,CAGP,oBAAA6B,GACE,GAAI/C,KAAKmB,iBAAkB,CACzBnB,KAAKmB,iBAAiB6B,Y,EAmB1B,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,QAAAE,IAAA,6C","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as e,c as r,h as a,H as t,g as o}from"./p-d0a33e64.js";import{c as i}from"./p-8a1a6e56.js";import{v as n}from"./p-f5ff676c.js";const l='nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range{background:var(--components-slider-track-filled-focus)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb{border-color:var(--components-slider-track-filled-focus)}nv-fieldslider[error] .slider-container .track-container .track .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:hover{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-handler-background-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:focus{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldtextarea{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box;max-width:480px}nv-fieldtextarea[fluid]:not([fluid=false]){max-width:unset}nv-fieldtextarea[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-fieldtextarea[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive-in-field)}nv-fieldtextarea[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--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-success)}nv-fieldtextarea[required]:not([required=false]) label::after{content:"*";color:var(--components-form-text-required);font-weight:700}nv-fieldtextarea 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-fieldtextarea .textarea-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldtextarea .textarea-wrapper .textarea-container{display:flex;flex-grow:1;padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);justify-content:center;align-items:center;gap:var(--form-field-gap);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);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldtextarea .textarea-wrapper .textarea-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldtextarea .textarea-wrapper .textarea-container:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldtextarea .textarea-wrapper .textarea-container:has(textarea:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldtextarea .textarea-wrapper .textarea-container:has(textarea:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldtextarea .textarea-wrapper .textarea-container textarea{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height)}nv-fieldtextarea .textarea-wrapper .textarea-container textarea::-webkit-scrollbar{width:6px;height:6px}nv-fieldtextarea .textarea-wrapper .textarea-container textarea::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-fieldtextarea .textarea-wrapper .textarea-container textarea::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-fieldtextarea .textarea-wrapper .textarea-container textarea:focus{outline:none}nv-fieldtextarea .textarea-wrapper .textarea-container textarea::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-fieldtextarea .textarea-wrapper .textarea-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldtextarea .description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);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-fieldtextarea .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);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)}';const d=l;const s=class{constructor(a){e(this,a);this.valueChanged=r(this,"valueChanged",7);this.inputId=n();this.disabled=false;this.readonly=false;this.required=false;this.error=false;this.success=false;this.rows=3;this.resize="vertical";this.autosize=false;this.autofocus=false;this.fluid=false;this.handleTextarea=e=>{const r=e.target;this.value=r.value;this.valueChanged.emit(r.value)};this.handleTextareaContainerClick=()=>{this.textareaElement.focus()}}rowsChanged(){if(this.autosize){this.adjustTextareaHeight()}}autosizeChanged(){var e;if(this.autosize){this.adjustTextareaHeight()}else{(e=this.textareaElement)===null||e===void 0?void 0:e.style.removeProperty("height")}}handleValueChange(){if(this.autosize){this.adjustTextareaHeight()}}adjustTextareaHeight(){if(this.textareaElement&&this.autosize){requestAnimationFrame((()=>{requestAnimationFrame((()=>{this.textareaElement.style.height="auto";const e=window.getComputedStyle(this.textareaElement);const r=parseFloat(e.lineHeight);const a=parseFloat(e.paddingTop);const t=parseFloat(e.paddingBottom);const o=parseFloat(e.borderTopWidth);const i=parseFloat(e.borderBottomWidth);const n=r*this.rows+a+t+o+i;this.textareaElement.style.minHeight=`${n}px`;this.textareaElement.style.height=this.textareaElement.scrollHeight+"px"}))}))}}componentWillRender(){if(this.message){this.description=this.message}if(this.validation){this.errorDescription=this.validation;this.error=true}}componentDidLoad(){if(this.autosize){this.adjustTextareaHeight()}}render(){return a(t,{key:"8f7f14974b855a44e88a951ff0795e11e3ab7d61"},(this.label||this.el.querySelector('[slot="label"]'))&&a("label",{key:"9b438132196d7bc75cc4efdae736451bd7a23cdc",htmlFor:this.inputId},a("slot",{key:"f64e341eccefed72152326fadd9287f056842634",name:"label"},this.label)),a("div",{key:"454213728d3b455d602a21653c1fc784bc411477",class:"textarea-wrapper"},a("div",{key:"9ab87f44cf9622ca7c389d797a7e777eda7621d9",class:"textarea-container",onClick:this.handleTextareaContainerClick},a("textarea",{key:"d8c66568fa9c581063e2b9f531f3442020d07b70",id:this.inputId,ref:e=>this.textareaElement=e,placeholder:this.placeholder,autofocus:this.autofocus,name:this.name,disabled:this.disabled,readOnly:this.readonly,required:this.required,maxlength:this.maxlength,minlength:this.minlength,autocomplete:"off",value:this.value,onInput:this.handleTextarea,rows:this.rows,class:i(this.resize==="none"&&"resize-none",this.resize==="vertical"&&"resize-y",this.resize==="horizontal"&&"resize-x",this.resize==="both"&&"resize")}))),(this.description||this.el.querySelector('[slot="description"]'))&&a("div",{key:"92700f5775053107569d2a2a0857c939a882debb",class:"description"},a("slot",{key:"d38ebd52d5d08ffe286acbee11e8733023c45824",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&a("div",{key:"872008326796f477c7c48ee2e8eec60ca51135ba",hidden:!this.error,class:"error-description"},a("slot",{key:"eae9c837562d2b39bbe5813390c9bf63d86dcf36",name:"error-description"},this.errorDescription)))}static get formAssociated(){return true}get el(){return o(this)}static get watchers(){return{rows:["rowsChanged"],autosize:["autosizeChanged"],value:["handleValueChange"]}}};s.style=d;export{s as nv_fieldtextarea};
|
|
2
|
-
//# sourceMappingURL=p-dd023fd6.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["nvFieldtextareaCss","NvFieldtextareaStyle0","NvFieldtextarea","constructor","hostRef","this","inputId","uuidv4","disabled","readonly","required","error","success","rows","resize","autosize","autofocus","fluid","handleTextarea","event","textarea","target","value","valueChanged","emit","handleTextareaContainerClick","textareaElement","focus","rowsChanged","adjustTextareaHeight","autosizeChanged","_a","style","removeProperty","handleValueChange","requestAnimationFrame","height","computedStyle","window","getComputedStyle","lineHeight","parseFloat","paddingTop","paddingBottom","borderTopWidth","borderBottomWidth","minHeight","scrollHeight","componentWillRender","message","description","validation","errorDescription","componentDidLoad","render","h","Host","key","label","el","querySelector","htmlFor","name","class","onClick","id","ref","e","placeholder","readOnly","maxlength","minlength","autocomplete","onInput","clsx","hidden"],"sources":["src/components/nv-fieldtextarea/nv-fieldtextarea.scss?tag=nv-fieldtextarea","src/components/nv-fieldtextarea/nv-fieldtextarea.tsx"],"sourcesContent":["@import \"../../styles/form-field\";\n@import \"../../styles/scrollbar\";\n\n@mixin form-field-textarea-wrapper() {\n display: flex;\n flex-wrap: wrap;\n gap: var(--form-gap-x);\n align-items: stretch;\n align-self: stretch;\n}\n\n@mixin form-field-textarea-container() {\n display: flex;\n flex-grow: 1;\n padding: calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);\n justify-content: center;\n align-items: center;\n gap: var(--form-field-gap);\n align-self: stretch;\n border-radius: var(--form-field-radius);\n border-width: 1px;\n border-style: solid;\n border-color: var(--nv-field-border-default);\n opacity: var(--components-form-opacity-default);\n background: var(--nv-field-background);\n transition: all 150ms ease-out;\n\n &:hover {\n border-color: var(--nv-field-border-hover);\n }\n\n &:focus-within {\n border-color: var(--nv-field-border-focus);\n box-shadow: 0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow);\n }\n // Keep ReadOnly before Disabled\n &:has(textarea:read-only) {\n // opacity: var(--components-form-opacity-readonly, 0.5); broken token generation, is 50px instead of 0.5\n opacity: 0.5;\n background-color: var(--components-form-field-background-readonly);\n border-color: var(--nv-field-border-readonly);\n }\n\n &:has(textarea:disabled) {\n // opacity: var(--components-form-opacity-disabled, 0.5); broken token generation, is 50px instead of 0.5\n opacity: 0.5;\n background-color: var(--components-form-field-background-disabled);\n border-color: var(--nv-field-border-disabled);\n }\n}\n\n@mixin form-field-textarea() {\n @include scrollbar();\n display: flex;\n align-items: center;\n flex: 1 0 0;\n overflow: hidden;\n background-color: transparent;\n color: var(--components-form-field-content-text);\n text-overflow: ellipsis;\n font-size: var(--form-field-font-size);\n font-style: normal;\n font-weight: 500;\n line-height: var(--form-field-line-height);\n\n &:focus {\n outline: none;\n }\n\n &::placeholder {\n overflow: hidden;\n color: var(--components-form-field-content-placeholder);\n text-overflow: ellipsis;\n font-family: \"TT Norms Pro\", sans-serif;\n font-size: var(--form-field-font-size);\n font-style: normal;\n font-weight: 400;\n line-height: var(--form-field-line-height);\n }\n}\n\nnv-fieldtextarea {\n @include form-field-variables();\n @include form-field-root();\n\n &[fluid]:not([fluid=\"false\"]) {\n @include form-field-fluid();\n }\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 &[success]:not([success=\"false\"]) {\n @include form-field-success-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 .textarea-wrapper {\n @include form-field-textarea-wrapper();\n\n .textarea-container {\n @include form-field-textarea-container();\n\n textarea {\n @include form-field-textarea();\n }\n\n nv-icon.validation {\n @include form-field-icon();\n }\n }\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 Prop,\n Event,\n EventEmitter,\n Element,\n Watch,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\nimport clsx from 'clsx';\n\n/**\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-fieldtextarea',\n shadow: false,\n formAssociated: true,\n styleUrl: 'nv-fieldtextarea.scss',\n})\nexport class NvFieldtextarea {\n @Element() el: HTMLNvFieldtextareaElement;\n private textareaElement!: HTMLTextAreaElement;\n\n /****************************************************************************/\n //#region DEPRECATED\n\n /**\n * Message defines a 'hint ' message for the Text Field.\n * @deprecated Use `description` instead.\n */\n @Prop({ reflect: true })\n readonly message: string;\n\n /**\n * Add the message to the validation state.\n * @deprecated Use `errorDescription` and set the error prop instead.\n */\n @Prop({ reflect: true })\n readonly validation: string;\n\n //#endregion DEPRECATED\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 * textarea 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 textarea 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, mutable: true })\n description: string;\n\n /**\n * Display temporary text inside the textarea 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 */\n @Prop({ reflect: true })\n readonly placeholder: string;\n\n /**\n * Defines the name attribute of the textarea 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 textarea’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 * Specifies the value of the textarea field, which determines the text displayed\n * within the field. This prop is typically used in controlled components\n * where the textarea’s value is managed by the component’s state.\n */\n @Prop({ reflect: true, mutable: true })\n value: string;\n\n /**\n * The disabled prop lets you turn off the textarea 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 * Display the textarea 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 * Marks the textarea 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 textarea field’s appearance to indicate an error, helping users\n * identify fields that need correction.\n * @validator error\n */\n @Prop({ reflect: true, mutable: true })\n error: boolean = false;\n\n /**\n * Show a helpful message under the textarea field when there’s a problem. It\n * explains what’s wrong and how users can fix it, making the error easier to\n * understand and resolve.\n * @validator message\n */\n @Prop({ reflect: true, mutable: true })\n errorDescription: string;\n\n /**\n * Changes the textarea field’s appearance to indicate successful textarea or\n * validation.\n */\n @Prop({ reflect: true })\n readonly success: boolean = false;\n\n /**\n * Limits how many characters users can type into the textarea field. It’s\n * helpful for making sure users don’t enter too much information, keeping\n * their textarea within the allowed limit.\n */\n @Prop({ reflect: true })\n readonly maxlength: number;\n\n /**\n * Ensures that users type at least a certain number of characters into the\n * textarea field. It’s a way to make sure users provide enough information\n * before moving on.\n */\n @Prop({ reflect: true })\n readonly minlength: number;\n\n /**\n * The number of visible text lines for the control. The default is 3. This\n * can be useful when you want to limit the size of the textarea field or when\n * you want to make the textarea field smaller to fit a specific layout. The\n * textarea field will expand vertically to fit the text as the user types.\n */\n @Prop({ reflect: true })\n readonly rows: number = 3;\n\n /**\n * Controls the resize property of a textarea. It can be set to none, both,\n * horizontal, or vertical. The default is vertical.\n */\n @Prop({ reflect: true })\n readonly resize: 'none' | 'both' | 'horizontal' | 'vertical' = 'vertical';\n\n /**\n * Enable this to make the textarea automatically resize as the user types,\n * adjusting the height to fit the content. For the best experience, avoid\n * vertical resizing, as it’s controlled by this feature. Horizontal resizing\n * can still be allowed if desired.\n */\n @Prop({ reflect: true })\n readonly autosize: boolean = false;\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 a <textarea>\n * element.\n */\n @Prop({ reflect: true })\n // eslint-disable-next-line @stencil-community/reserved-member-names\n readonly autofocus: boolean = false;\n\n /**\n * Allows the field to stretch and fill the entire width of its container.\n */\n @Prop({ reflect: true })\n readonly fluid: boolean = false;\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Emitted when the textarea value changes.\n * @bind value\n */\n @Event()\n valueChanged: EventEmitter<string>;\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region WATCHERS\n\n /**\n * If autosize is true, we need to make sure to update the min-height when\n * the rows change.\n */\n @Watch('rows')\n rowsChanged() {\n if (this.autosize) {\n this.adjustTextareaHeight();\n }\n }\n\n /**\n * If autosize is true, we need to make sure to update the height and\n * min-height, if false, we need to remove the height property.\n */\n @Watch('autosize')\n autosizeChanged() {\n if (this.autosize) {\n this.adjustTextareaHeight();\n } else {\n this.textareaElement?.style.removeProperty('height');\n }\n }\n\n /**\n * Make sure to adjust the height of the textarea when the value changes\n * programmatically or by typing when autosize is on.\n */\n @Watch('value')\n handleValueChange() {\n if (this.autosize) {\n this.adjustTextareaHeight();\n }\n }\n\n //#endregion WATCHERS\n /****************************************************************************/\n //#region METHODS\n\n private handleTextarea = (event: Event) => {\n const textarea = event.target as HTMLTextAreaElement;\n this.value = textarea.value;\n this.valueChanged.emit(textarea.value);\n };\n\n private handleTextareaContainerClick = () => {\n this.textareaElement.focus();\n };\n\n private adjustTextareaHeight() {\n if (this.textareaElement && this.autosize) {\n /**\n * The first requestAnimationFrame ensures that the DOM has applied any\n * pending changes (e.g., value updates or attribute changes) before\n * proceeding to the next frame.\n */\n requestAnimationFrame(() => {\n /**\n * The second requestAnimationFrame ensures that the browser has fully\n * recalculated layout and styles based on the updated DOM, such as\n * recalculating scrollHeight for the textarea after the new value is\n * rendered.\n */\n requestAnimationFrame(() => {\n this.textareaElement.style.height = 'auto';\n\n const computedStyle = window.getComputedStyle(this.textareaElement);\n const lineHeight = parseFloat(computedStyle.lineHeight);\n const paddingTop = parseFloat(computedStyle.paddingTop);\n const paddingBottom = parseFloat(computedStyle.paddingBottom);\n const borderTopWidth = parseFloat(computedStyle.borderTopWidth);\n const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth);\n\n // Calculate min-height based on rows\n const minHeight =\n lineHeight * this.rows +\n paddingTop +\n paddingBottom +\n borderTopWidth +\n borderBottomWidth;\n\n this.textareaElement.style.minHeight = `${minHeight}px`;\n this.textareaElement.style.height =\n this.textareaElement.scrollHeight + 'px';\n });\n });\n }\n }\n\n //#endregion METHODS\n /****************************************************************************/\n //#region LIFECYCLE\n\n componentWillRender() {\n if (this.message) {\n this.description = this.message;\n }\n\n if (this.validation) {\n this.errorDescription = this.validation;\n this.error = true;\n }\n }\n\n componentDidLoad() {\n if (this.autosize) {\n this.adjustTextareaHeight();\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 <div class=\"textarea-wrapper\">\n <div\n class=\"textarea-container\"\n onClick={this.handleTextareaContainerClick}\n >\n <textarea\n id={this.inputId}\n ref={e => (this.textareaElement = e)}\n placeholder={this.placeholder}\n autofocus={this.autofocus}\n name={this.name}\n disabled={this.disabled}\n readOnly={this.readonly}\n required={this.required}\n maxlength={this.maxlength}\n minlength={this.minlength}\n autocomplete=\"off\"\n value={this.value}\n onInput={this.handleTextarea}\n rows={this.rows}\n class={clsx(\n this.resize === 'none' && 'resize-none',\n this.resize === 'vertical' && 'resize-y',\n this.resize === 'horizontal' && 'resize-x',\n this.resize === 'both' && 'resize',\n )}\n />\n </div>\n </div>\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\n //#endregion RENDER\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as o,h as t,H as e,g as n}from"./p-d0a33e64.js";import{c as r}from"./p-8a1a6e56.js";const i='nv-iconbutton.root{display:inline-flex;justify-content:center;align-items:center;font-style:normal;font-weight:500;font-family:"TT Norms Pro", sans-serif;transition:background-color 150ms ease-out;height:fit-content;width:fit-content}nv-iconbutton.size-xs{padding:var(--button-xs-icon-button-padding);gap:var(--button-xs-gap);border-radius:var(--button-xs-border-radius);line-height:var(--button-xs-line-height);font-size:var(--button-xs-font-size)}nv-iconbutton.size-sm{padding:var(--button-sm-icon-button-padding);gap:var(--button-sm-gap);border-radius:var(--button-sm-border-radius);line-height:var(--button-sm-line-height);font-size:var(--button-sm-font-size)}nv-iconbutton.size-md{padding:var(--button-md-icon-button-padding);gap:var(--button-md-gap);border-radius:var(--button-md-border-radius);line-height:var(--button-md-line-height);font-size:var(--button-md-font-size)}nv-iconbutton.size-lg{padding:var(--button-lg-icon-button-padding);gap:var(--button-lg-gap);border-radius:var(--button-lg-border-radius);line-height:var(--button-lg-line-height);font-size:var(--button-lg-font-size)}nv-iconbutton.emphasis-high{background:var(--components-button-high-background);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text)}nv-iconbutton.emphasis-high:hover{background:var(--components-button-high-background-hover);color:var(--components-button-high-text-hover)}nv-iconbutton.emphasis-high:focus,nv-iconbutton.emphasis-high:focus-within{outline:none}nv-iconbutton.emphasis-high:focus-visible,nv-iconbutton.emphasis-high:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-high:disabled{background:var(--components-button-high-background);color:var(--components-button-high-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-high nv-icon>svg{color:var(--components-button-high-icon)}nv-iconbutton.emphasis-medium{background:var(--components-button-medium-background);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text)}nv-iconbutton.emphasis-medium:hover{background:var(--components-button-medium-background-hover);color:var(--components-button-medium-text-hover)}nv-iconbutton.emphasis-medium:focus,nv-iconbutton.emphasis-medium:focus-within{outline:none}nv-iconbutton.emphasis-medium:focus-visible,nv-iconbutton.emphasis-medium:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-medium:disabled{background:var(--components-button-medium-background);color:var(--components-button-medium-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-medium nv-icon>svg{color:var(--components-button-medium-icon)}nv-iconbutton.emphasis-low{background:var(--components-button-low-background);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text)}nv-iconbutton.emphasis-low:hover{background:var(--components-button-low-background-hover);color:var(--components-button-low-text-hover)}nv-iconbutton.emphasis-low:focus,nv-iconbutton.emphasis-low:focus-within{outline:none}nv-iconbutton.emphasis-low:focus-visible,nv-iconbutton.emphasis-low:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-low:disabled{background:var(--components-button-low-background);color:var(--components-button-low-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-low nv-icon>svg{color:var(--components-button-low-icon)}nv-iconbutton.emphasis-lower{background:var(--components-button-lower-background);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text)}nv-iconbutton.emphasis-lower:hover{background:var(--components-button-lower-background-hover);color:var(--components-button-lower-text-hover)}nv-iconbutton.emphasis-lower:focus,nv-iconbutton.emphasis-lower:focus-within{outline:none}nv-iconbutton.emphasis-lower:focus-visible,nv-iconbutton.emphasis-lower:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-lower:disabled{background:var(--components-button-lower-background);color:var(--components-button-lower-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-lower nv-icon>svg{color:var(--components-button-lower-icon)}nv-iconbutton.loading [slot=leading-icon]{display:none}nv-iconbutton.shape-rounded{border-radius:var(--radius-rounded-full)}';const a=i;const s=class{constructor(t){o(this,t);if(t.$hostElement$["s-ei"]){this.internals=t.$hostElement$["s-ei"]}else{this.internals=t.$hostElement$.attachInternals();t.$hostElement$["s-ei"]=this.internals}this.size="md";this.emphasis="high";this.loading=false;this.disabled=false;this.active=false;this.type="button";this.shape="square";this.handleClick=o=>{var t,e,n,r;if(this.disabled){o.preventDefault();return}if(this.type==="submit"){(e=(t=this.internals)===null||t===void 0?void 0:t.form)===null||e===void 0?void 0:e.requestSubmit()}if(this.type==="reset"){(r=(n=this.internals)===null||n===void 0?void 0:n.form)===null||r===void 0?void 0:r.reset()}}}handleLoadingChange(o){this.loading=o;this.disabled=o}handleDisabledChange(o){if(this.loading){this.disabled=this.loading}else{this.disabled=o}}handleKeyDown(o){if(o.key==="Enter"||o.key===" "){o.preventDefault();this.el.click()}}handleTouchStart(o){if(o.touches.length>1)return;o.preventDefault();this.el.click()}componentWillLoad(){if(this.loading){this.disabled=this.loading}}render(){return t(e,{key:"21aa46431d8a9f64cfc6fba04a04b72de31c74a4",role:"button",type:this.type,tabindex:"0",disabled:this.disabled?true:undefined,class:r("root",`size-${this.size}`,`emphasis-${this.emphasis}`,this.loading&&"loading",`shape-${this.shape}`),onClick:this.handleClick},this.loading&&t("nv-loader",{key:"c2df9292a9c49f178e6e160dedeac3fe99776322",size:this.size}),!this.loading&&t("nv-icon",{key:"b7053d9e3a71a1464b41b021f41fe36c6591f114",name:this.name,size:this.size}),t("slot",{key:"70e8576ea565651df7dca6221cfed4160f86f025"}))}static get formAssociated(){return true}get el(){return n(this)}static get watchers(){return{loading:["handleLoadingChange"],disabled:["handleDisabledChange"]}}};s.style=a;const l='@keyframes rotation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}nv-loader{display:inline-block;position:relative;aspect-ratio:1/1;border-radius:9999px;color:inherit}nv-loader.size-xs{width:var(--loader-size-xs);height:var(--loader-size-xs)}nv-loader.size-xs::before,nv-loader.size-xs::after{content:" ";position:absolute;top:0;left:0;border-radius:inherit;width:100%;height:100%}nv-loader.size-xs::before{content:" ";border:calc(var(--loader-size-xs) / 10) solid;opacity:0.3}nv-loader.size-xs::after{content:" ";border-top:calc(var(--loader-size-xs) / 10) solid transparent;border-left:calc(var(--loader-size-xs) / 10) solid transparent;border-right:calc(var(--loader-size-xs) / 10) solid transparent;border-bottom:calc(var(--loader-size-xs) / 10) solid;animation:rotation 1s linear infinite}nv-loader.size-sm{width:var(--loader-size-sm);height:var(--loader-size-sm)}nv-loader.size-sm::before,nv-loader.size-sm::after{content:" ";position:absolute;top:0;left:0;border-radius:inherit;width:100%;height:100%}nv-loader.size-sm::before{content:" ";border:calc(var(--loader-size-sm) / 10) solid;opacity:0.3}nv-loader.size-sm::after{content:" ";border-top:calc(var(--loader-size-sm) / 10) solid transparent;border-left:calc(var(--loader-size-sm) / 10) solid transparent;border-right:calc(var(--loader-size-sm) / 10) solid transparent;border-bottom:calc(var(--loader-size-sm) / 10) solid;animation:rotation 1s linear infinite}nv-loader.size-md{width:var(--loader-size-md);height:var(--loader-size-md)}nv-loader.size-md::before,nv-loader.size-md::after{content:" ";position:absolute;top:0;left:0;border-radius:inherit;width:100%;height:100%}nv-loader.size-md::before{content:" ";border:calc(var(--loader-size-md) / 10) solid;opacity:0.3}nv-loader.size-md::after{content:" ";border-top:calc(var(--loader-size-md) / 10) solid transparent;border-left:calc(var(--loader-size-md) / 10) solid transparent;border-right:calc(var(--loader-size-md) / 10) solid transparent;border-bottom:calc(var(--loader-size-md) / 10) solid;animation:rotation 1s linear infinite}nv-loader.size-lg{width:var(--loader-size-lg);height:var(--loader-size-lg)}nv-loader.size-lg::before,nv-loader.size-lg::after{content:" ";position:absolute;top:0;left:0;border-radius:inherit;width:100%;height:100%}nv-loader.size-lg::before{content:" ";border:calc(var(--loader-size-lg) / 10) solid;opacity:0.3}nv-loader.size-lg::after{content:" ";border-top:calc(var(--loader-size-lg) / 10) solid transparent;border-left:calc(var(--loader-size-lg) / 10) solid transparent;border-right:calc(var(--loader-size-lg) / 10) solid transparent;border-bottom:calc(var(--loader-size-lg) / 10) solid;animation:rotation 1s linear infinite}nv-loader.size-xl{width:var(--loader-size-xl);height:var(--loader-size-xl)}nv-loader.size-xl::before,nv-loader.size-xl::after{content:" ";position:absolute;top:0;left:0;border-radius:inherit;width:100%;height:100%}nv-loader.size-xl::before{content:" ";border:calc(var(--loader-size-xl) / 10) solid;opacity:0.3}nv-loader.size-xl::after{content:" ";border-top:calc(var(--loader-size-xl) / 10) solid transparent;border-left:calc(var(--loader-size-xl) / 10) solid transparent;border-right:calc(var(--loader-size-xl) / 10) solid transparent;border-bottom:calc(var(--loader-size-xl) / 10) solid;animation:rotation 1s linear infinite}nv-loader.color-brand::before{border-color:var(--components-loader-brand-background);opacity:1}nv-loader.color-brand::after{border-bottom-color:var(--components-loader-brand-foreground)}nv-loader.color-white::before{border-color:var(--components-loader-white-background);opacity:1}nv-loader.color-white::after{border-bottom-color:var(--components-loader-white-foreground)}';const d=l;const c=class{constructor(t){o(this,t);this.size="md"}render(){return t(e,{key:"932c76ef978e21bdab5a3502daadcdd7ecd05af4",class:r(this.size&&`size-${this.size}`,this.color&&`color-${this.color}`)})}};c.style=d;export{s as nv_iconbutton,c as nv_loader};
|
|
2
|
-
//# sourceMappingURL=p-e765a624.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["nvIconbuttonCss","NvIconbuttonStyle0","NvIconbutton","constructor","hostRef","this","size","emphasis","loading","disabled","active","type","shape","handleClick","event","preventDefault","_b","_a","internals","form","requestSubmit","_d","_c","reset","handleLoadingChange","handleDisabledChange","handleKeyDown","key","el","click","handleTouchStart","touches","length","componentWillLoad","render","h","Host","role","tabindex","undefined","class","clsx","onClick","name","nvLoaderCss","NvLoaderStyle0","NvLoader","color"],"sources":["src/components/nv-iconbutton/nv-iconbutton.scss?tag=nv-iconbutton","src/components/nv-iconbutton/nv-iconbutton.tsx","src/components/nv-loader/nv-loader.scss?tag=nv-loader","src/components/nv-loader/nv-loader.tsx"],"sourcesContent":["@use \"sass:map\";\n@import \"../../styles/focus-ring\";\n\n/* Variants */\n$button-sizes: (\"xs\", \"sm\", \"md\", \"lg\");\n$button-emphasis: (\"high\", \"medium\", \"low\", \"lower\");\n\n/* Define maps for size-related variables */\n$button-icon-button-padding: (\n \"xs\": var(--button-xs-icon-button-padding),\n \"sm\": var(--button-sm-icon-button-padding),\n \"md\": var(--button-md-icon-button-padding),\n \"lg\": var(--button-lg-icon-button-padding)\n);\n\n$button-gap: (\n \"xs\": var(--button-xs-gap),\n \"sm\": var(--button-sm-gap),\n \"md\": var(--button-md-gap),\n \"lg\": var(--button-lg-gap)\n);\n\n$button-border-radius: (\n \"xs\": var(--button-xs-border-radius),\n \"sm\": var(--button-sm-border-radius),\n \"md\": var(--button-md-border-radius),\n \"lg\": var(--button-lg-border-radius)\n);\n\n$button-line-height: (\n \"xs\": var(--button-xs-line-height),\n \"sm\": var(--button-sm-line-height),\n \"md\": var(--button-md-line-height),\n \"lg\": var(--button-lg-line-height)\n);\n\n$button-font-size: (\n \"xs\": var(--button-xs-font-size),\n \"sm\": var(--button-sm-font-size),\n \"md\": var(--button-md-font-size),\n \"lg\": var(--button-lg-font-size)\n);\n\n/* Define maps for emphasis-related variables */\n$components-button-background: (\n \"high\": var(--components-button-high-background),\n \"medium\": var(--components-button-medium-background),\n \"low\": var(--components-button-low-background),\n \"lower\": var(--components-button-lower-background)\n);\n\n$components-button-border: (\n \"high\": var(--components-button-high-border),\n \"medium\": var(--components-button-medium-border),\n \"low\": var(--components-button-low-border),\n \"lower\": var(--components-button-lower-border)\n);\n\n$components-button-text: (\n \"high\": var(--components-button-high-text),\n \"medium\": var(--components-button-medium-text),\n \"low\": var(--components-button-low-text),\n \"lower\": var(--components-button-lower-text)\n);\n\n$components-button-background-hover: (\n \"high\": var(--components-button-high-background-hover),\n \"medium\": var(--components-button-medium-background-hover),\n \"low\": var(--components-button-low-background-hover),\n \"lower\": var(--components-button-lower-background-hover)\n);\n\n$components-button-text-hover: (\n \"high\": var(--components-button-high-text-hover),\n \"medium\": var(--components-button-medium-text-hover),\n \"low\": var(--components-button-low-text-hover),\n \"lower\": var(--components-button-lower-text-hover)\n);\n\n$components-button-icon: (\n \"high\": var(--components-button-high-icon),\n \"medium\": var(--components-button-medium-icon),\n \"low\": var(--components-button-low-icon),\n \"lower\": var(--components-button-lower-icon)\n);\n\n@mixin root-styles() {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n font-style: normal;\n font-weight: 500;\n font-family: \"TT Norms Pro\", sans-serif;\n transition: background-color 150ms ease-out;\n height: fit-content;\n width: fit-content;\n}\n\n@mixin size-styles($size) {\n padding: map.get($button-icon-button-padding, $size);\n gap: map.get($button-gap, $size);\n border-radius: map.get($button-border-radius, $size);\n line-height: map.get($button-line-height, $size);\n font-size: map.get($button-font-size, $size);\n}\n\n@mixin emphasis-styles($emphasis) {\n background: map.get($components-button-background, $emphasis);\n border: 1px solid map.get($components-button-border, $emphasis);\n color: map.get($components-button-text, $emphasis);\n\n &:hover {\n background: map.get($components-button-background-hover, $emphasis);\n color: map.get($components-button-text-hover, $emphasis);\n }\n\n @include focus-ring();\n\n &:disabled {\n background: map.get($components-button-background, $emphasis);\n color: map.get($components-button-text, $emphasis);\n opacity: 0.5;\n cursor: not-allowed;\n box-shadow: none;\n }\n\n & nv-icon > svg {\n color: map.get($components-button-icon, $emphasis);\n }\n}\n\nnv-iconbutton {\n &.root {\n @include root-styles();\n }\n\n @each $size in $button-sizes {\n &.size-#{$size} {\n @include size-styles($size);\n }\n }\n\n @each $emphasis in $button-emphasis {\n &.emphasis-#{$emphasis} {\n @include emphasis-styles($emphasis);\n }\n }\n\n &.loading {\n [slot=\"leading-icon\"] {\n display: none;\n }\n }\n\n &.shape-rounded {\n border-radius: var(--radius-rounded-full);\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n AttachInternals,\n Element,\n Watch,\n Listen,\n} from '@stencil/core';\nimport clsx from 'clsx';\n\nimport {\n ButtonSize,\n ButtonEmphasis,\n ButtonType,\n IconButtonShape,\n} from '../../utils/constants';\nimport { IconName } from '../nv-icon/nv-icons';\n\n/**\n * @slot default - Content of the button.\n */\n@Component({\n tag: 'nv-iconbutton',\n shadow: false,\n formAssociated: true,\n styleUrl: 'nv-iconbutton.scss',\n scoped: false,\n})\nexport class NvIconbutton {\n @AttachInternals() internals: ElementInternals;\n @Element() el: HTMLNvIconbuttonElement;\n\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * Determines how large or small the button appears, allowing for\n * customization of the button's dimensions to fit different design\n * specifications and user needs.\n */\n @Prop({ reflect: true })\n readonly size: `${ButtonSize}` = 'md';\n\n /**\n * Adjusts the button’s emphasis to make it more or less visually prominent\n * to users. Use this to draw attention to important actions or reduce focus\n * on less critical ones.\n */\n @Prop({ reflect: true })\n readonly emphasis: `${ButtonEmphasis}` = 'high';\n\n /**\n * Set this to true to show a spinner on the button, letting users know that\n * their action is being processed. It helps improve user experience by\n * indicating ongoing activities. The icon is not displayed when the button\n * is loading. Also, the button is disabled. If you want to disable the\n * button, it is not possible. It is automatically disabled when loading.\n */\n @Prop({ reflect: true, mutable: true })\n loading: boolean = false;\n\n /**\n * Disables the button, preventing user interaction.\n */\n @Prop({ mutable: true, reflect: true })\n disabled: boolean = false;\n\n /**\n * Makes the button look active when it’s within a compatible component\n * like a button group.\n */\n @Prop({ reflect: true })\n readonly active: boolean = false;\n\n /**\n * Choose the icon you want to display. This also sets the aria-label for\n * improved accessibility, helping users who rely on screen readers.\n * The icon is not displayed when the button is loading.\n */\n @Prop({ reflect: true })\n readonly name: `${IconName}` | string;\n\n /**\n * Sets the button type to control its function in forms. Use 'submit' to send\n * form data, 'reset' to clear the form, or 'button' for a standard button\n * that doesn’t interact with form submission by default.\n */\n @Prop({ reflect: true })\n readonly type: `${ButtonType}` = 'button';\n\n /**\n * Sets the shape of the button. Choose between square and rounded.\n */\n @Prop({ reflect: true })\n readonly shape: `${IconButtonShape}` = 'square';\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region METHODS\n\n /**\n * Handles form-related actions when the button is clicked.\n * - Submits the form if the button type is 'submit'.\n * - Resets the form if the button type is 'reset'.\n * @param {Event} event - The click event.\n */\n private handleClick = (event: Event) => {\n if (this.disabled) {\n event.preventDefault();\n return;\n }\n\n if (this.type === 'submit') {\n this.internals?.form?.requestSubmit();\n }\n if (this.type === 'reset') {\n this.internals?.form?.reset();\n }\n };\n\n //#endregion METHODS\n /****************************************************************************/\n //#region WATCHERS\n\n @Watch('loading')\n handleLoadingChange(loading: boolean) {\n this.loading = loading;\n this.disabled = loading;\n }\n\n @Watch('disabled')\n handleDisabledChange(disabled: boolean) {\n if (this.loading) {\n this.disabled = this.loading;\n } else {\n this.disabled = disabled;\n }\n }\n\n //#endregion WATCHERS\n /****************************************************************************/\n //#region EVENTS\n\n @Listen('keydown', { passive: false })\n handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.el.click();\n }\n }\n\n @Listen('touchstart', { passive: false })\n handleTouchStart(event: TouchEvent) {\n if (event.touches.length > 1) return;\n event.preventDefault();\n this.el.click();\n }\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n if (this.loading) {\n this.disabled = this.loading;\n }\n }\n\n //#endregion LIFECYCLE\n /****************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n role=\"button\"\n type={this.type}\n tabindex=\"0\"\n disabled={this.disabled ? true : undefined}\n class={clsx(\n 'root',\n `size-${this.size}`,\n `emphasis-${this.emphasis}`,\n this.loading && 'loading',\n `shape-${this.shape}`,\n )}\n onClick={this.handleClick}\n >\n {this.loading && <nv-loader size={this.size}></nv-loader>}\n\n {!this.loading && <nv-icon name={this.name} size={this.size} />}\n\n <slot></slot>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n","@use \"sass:map\";\n\n/* Variants */\n$loader-sizes: (\"xs\", \"sm\", \"md\", \"lg\", \"xl\");\n$loader-color: (\"brand\", \"white\");\n\n/* Define maps for color-related variables */\n$components-loader-background: (\n \"brand\": var(--components-loader-brand-background),\n \"white\": var(--components-loader-white-background)\n);\n\n$components-loader-foreground: (\n \"brand\": var(--components-loader-brand-foreground),\n \"white\": var(--components-loader-white-foreground)\n);\n\n/* Define maps for size-related variables */\n$components-loader-size: (\n \"xs\": var(--loader-size-xs),\n \"sm\": var(--loader-size-sm),\n \"md\": var(--loader-size-md),\n \"lg\": var(--loader-size-lg),\n \"xl\": var(--loader-size-xl)\n);\n\n@mixin root-styles() {\n display: inline-block;\n position: relative;\n aspect-ratio: 1 / 1;\n border-radius: 9999px;\n color: inherit;\n}\n\n@mixin size-styles($size) {\n $loader-size: map.get($components-loader-size, $size);\n $border-size: calc($loader-size / 10);\n\n width: $loader-size;\n height: $loader-size;\n\n &::before,\n &::after {\n content: \" \";\n position: absolute;\n top: 0;\n left: 0;\n border-radius: inherit;\n width: 100%;\n height: 100%;\n }\n\n &::before {\n content: \" \";\n border: $border-size solid;\n opacity: 0.3;\n }\n\n &::after {\n content: \" \";\n border-top: $border-size solid transparent;\n border-left: $border-size solid transparent;\n border-right: $border-size solid transparent;\n border-bottom: $border-size solid;\n animation: rotation 1s linear infinite;\n }\n}\n\n@mixin color-styles($color) {\n &::before {\n border-color: map.get($components-loader-background, $color);\n opacity: 1;\n }\n\n &::after {\n border-bottom-color: map.get($components-loader-foreground, $color);\n }\n}\n\n@keyframes rotation {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\nnv-loader {\n @include root-styles();\n\n @each $size in $loader-sizes {\n &.size-#{$size} {\n @include size-styles($size);\n }\n }\n\n @each $color in $loader-color {\n &.color-#{$color} {\n @include color-styles($color);\n }\n }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\nimport { SemanticSizes, LoaderColors } from '../../utils/constants';\n\n@Component({\n tag: 'nv-loader',\n styleUrl: 'nv-loader.scss',\n shadow: false,\n})\nexport class NvLoader {\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * Choose the size of the loader to best fit your application’s needs, whether\n * it’s a small spinner for subtle loading indicators or a large one for more\n * prominent displays.\n */\n @Prop({ reflect: true })\n readonly size: `${SemanticSizes}` = 'md';\n\n /**\n * Choose the color of the loader. Options are primary and white to keep the\n * design consistent and ensure the loader stands out or blends in\n * appropriately with your application’s interface.\n */\n @Prop({ reflect: true })\n readonly color: `${LoaderColors}`;\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region RENDER\n\n /* <slot> empty to force rendering change */\n render() {\n return (\n <Host\n class={clsx(\n this.size && `size-${this.size}`,\n this.color && `color-${this.color}`,\n )}\n ></Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"mappings":"6FAAA,MAAMA,EAAkB,qqJACxB,MAAAC,EAAeD,E,MC6BFE,EAAY,MAPzB,WAAAC,CAAAC,G,0KAoBWC,KAAAC,KAAwB,KAQxBD,KAAAE,SAAgC,OAUzCF,KAAAG,QAAmB,MAMnBH,KAAAI,SAAoB,MAOXJ,KAAAK,OAAkB,MAgBlBL,KAAAM,KAAwB,SAMxBN,KAAAO,MAA8B,SAY/BP,KAAAQ,YAAeC,I,YACrB,GAAIT,KAAKI,SAAU,CACjBK,EAAMC,iBACN,M,CAGF,GAAIV,KAAKM,OAAS,SAAU,EAC1BK,GAAAC,EAAAZ,KAAKa,aAAS,MAAAD,SAAA,SAAAA,EAAEE,QAAI,MAAAH,SAAA,SAAAA,EAAEI,e,CAExB,GAAIf,KAAKM,OAAS,QAAS,EACzBU,GAAAC,EAAAjB,KAAKa,aAAS,MAAAI,SAAA,SAAAA,EAAEH,QAAI,MAAAE,SAAA,SAAAA,EAAEE,O,GAS1B,mBAAAC,CAAoBhB,GAClBH,KAAKG,QAAUA,EACfH,KAAKI,SAAWD,C,CAIlB,oBAAAiB,CAAqBhB,GACnB,GAAIJ,KAAKG,QAAS,CAChBH,KAAKI,SAAWJ,KAAKG,O,KAChB,CACLH,KAAKI,SAAWA,C,EASpB,aAAAiB,CAAcZ,GACZ,GAAIA,EAAMa,MAAQ,SAAWb,EAAMa,MAAQ,IAAK,CAC9Cb,EAAMC,iBACNV,KAAKuB,GAAGC,O,EAKZ,gBAAAC,CAAiBhB,GACf,GAAIA,EAAMiB,QAAQC,OAAS,EAAG,OAC9BlB,EAAMC,iBACNV,KAAKuB,GAAGC,O,CAOV,iBAAAI,GACE,GAAI5B,KAAKG,QAAS,CAChBH,KAAKI,SAAWJ,KAAKG,O,EAQzB,MAAA0B,GACE,OACEC,EAACC,EAAI,CAAAT,IAAA,2CACHU,KAAK,SACL1B,KAAMN,KAAKM,KACX2B,SAAS,IACT7B,SAAUJ,KAAKI,SAAW,KAAO8B,UACjCC,MAAOC,EACL,OACA,QAAQpC,KAAKC,OACb,YAAYD,KAAKE,WACjBF,KAAKG,SAAW,UAChB,SAASH,KAAKO,SAEhB8B,QAASrC,KAAKQ,aAEbR,KAAKG,SAAW2B,EAAA,aAAAR,IAAA,2CAAWrB,KAAMD,KAAKC,QAErCD,KAAKG,SAAW2B,EAAA,WAAAR,IAAA,2CAASgB,KAAMtC,KAAKsC,KAAMrC,KAAMD,KAAKC,OAEvD6B,EAAA,QAAAR,IAAA,6C,6KClMR,MAAMiB,EAAc,wmHACpB,MAAAC,EAAeD,E,MCSFE,EAAQ,MALrB,WAAA3C,CAAAC,G,UAeWC,KAAAC,KAA2B,I,CAepC,MAAA4B,GACE,OACEC,EAACC,EAAI,CAAAT,IAAA,2CACHa,MAAOC,EACLpC,KAAKC,MAAQ,QAAQD,KAAKC,OAC1BD,KAAK0C,OAAS,SAAS1C,KAAK0C,U","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as e,c as o,h as r,H as i,g as t}from"./p-d0a33e64.js";import{v as n}from"./p-f5ff676c.js";const d='nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range{background:var(--components-slider-track-filled-focus)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb{border-color:var(--components-slider-track-filled-focus)}nv-fieldslider[error] .slider-container .track-container .track .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:hover{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-handler-background-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:focus{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-error)}nv-fielddropdown{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box;max-width:480px}nv-fielddropdown[fluid]:not([fluid=false]){max-width:unset}nv-fielddropdown[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fielddropdown[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive-in-field)}nv-fielddropdown[required]:not([required=false]) label::after{content:"*";color:var(--components-form-text-required);font-weight:700}nv-fielddropdown[hidden]:not([hidden=false]) label{display:none}nv-fielddropdown label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fielddropdown nv-popover{width:100%;display:block}nv-fielddropdown nv-popover [data-scope=popover]{width:100%;padding:var(--list-dropdown-padding);border-radius:var(--list-dropdown-radius);background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border)}nv-fielddropdown nv-popover [slot=content]{gap:var(--list-dropdown-gap-y);display:flex;flex-direction:column}nv-fielddropdown nv-popover hr{color:var(--components-list-dropdown-separator)}nv-fielddropdown nv-popover div[slot=content]{max-height:calc(90vh - var(--list-dropdown-padding) * 2);overflow-y:auto;position:relative}nv-fielddropdown nv-popover div[slot=content]::-webkit-scrollbar{width:6px;height:6px}nv-fielddropdown nv-popover div[slot=content]::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-fielddropdown nv-popover div[slot=content]::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-fielddropdown .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);width:100%;}nv-fielddropdown .input-container input:focus,nv-fielddropdown .input-container p.non-filterable-text:focus{outline:none}nv-fielddropdown .input-container input::placeholder,nv-fielddropdown .input-container p.non-filterable-text::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:"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 input[type=password]::-ms-clear,nv-fielddropdown .input-container input[type=password]::-ms-reveal,nv-fielddropdown .input-container p.non-filterable-text[type=password]::-ms-clear,nv-fielddropdown .input-container p.non-filterable-text[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fielddropdown .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fielddropdown .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fielddropdown .input-container>nv-iconbutton:last-of-type{border-top-right-radius:var(--form-field-radius);border-bottom-right-radius:var(--form-field-radius)}nv-fielddropdown .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddropdown .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{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);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{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);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)}';const l=d;const a=class{constructor(r){e(this,r);this.valueChanged=o(this,"valueChanged",7);this.dropdownItemSelected=o(this,"dropdownItemSelected",7);this.inputId=n();this.autocomplete="off";this.required=false;this.readonly=false;this.disabled=false;this.error=false;this.maxHeight="";this.open=false;this.emptyResult="No results found";this.filterable=false;this.debounceDelay=300;this.autofocus=false;this.fluid=false;this.filterText="";this.selectedValues=new Set;this.handleInputContainerClick=e=>{if(this.disabled||this.readonly){return}const o=e.target;if(o.tagName==="P"||o.tagName==="SPAN"){this.open=true;const e=this.el.querySelector(".input-container");if(e){e.classList.add("focus-within");const o=()=>{e.classList.remove("focus-within")};this.popoverElement.addEventListener("hide",o)}}};this.handleInput=e=>{if(!this.filterable)return;if(this.disabled||this.readonly){return}const o=e.target;this.open=true;if(this.debounceTimer){window.clearTimeout(this.debounceTimer)}this.debounceTimer=window.setTimeout((()=>{this.filterText=o.value.toLowerCase();this.filterItems()}),this.debounceDelay)};this.handleInputFocus=()=>{if(this.disabled||this.readonly)return;this.open=true};this.togglePopover=()=>{if(this.disabled||this.readonly)return;this.open=!this.open};this.getSelectedLabel=()=>{var e,o,r,i,t,n;if(!this.value)return"";if(((e=this.options)===null||e===void 0?void 0:e.length)>1){const e=this.options.find((e=>e.value===this.value));return(r=(o=e===null||e===void 0?void 0:e.label)!==null&&o!==void 0?o:e===null||e===void 0?void 0:e.value)!==null&&r!==void 0?r:this.value}const d=Array.from(this.el.querySelectorAll("nv-fielddropdownitem"));const l=d.find((e=>e.value===this.value));const a=l?(n=(i=l.label)!==null&&i!==void 0?i:(t=l.textContent)===null||t===void 0?void 0:t.trim())!==null&&n!==void 0?n:l.value:"";return a};this.clearFilter=()=>{if(!this.filterable)return;this.filterText="";this.inputElement.value=this.getSelectedLabel();this.inputElement.focus();this.filterItems()}}handleOptionsChange(e){var o;if(!e)return;if(!this.value){const r=e.find((e=>e.selected));this.value=(o=r===null||r===void 0?void 0:r.value)!==null&&o!==void 0?o:"";this.updateSelectedItem(this.value)}}watchValueHandler(e){this.valueChanged.emit(e)}handleOpenChanged(e){e.stopPropagation();this.open=e.detail}handleDropdownItemSelected(e){if(this.disabled||this.readonly)return;const o=Array.from(this.el.querySelectorAll("nv-fielddropdownitem"));o.forEach((o=>{if(o!==e.target){o.removeAttribute("selected")}else{o.setAttribute("selected","true")}}));this.clearFilter();this.value=e.detail.value;this.open=false}handleBlur(e){const o=e.relatedTarget;if(!(o instanceof Node)||!this.el.contains(o)){this.open=false;if(this.inputElement){this.filterText="";this.inputElement.value=this.getSelectedLabel();setTimeout((()=>{this.filterItems()}),200)}}}handleKeyDown(e){if(!this.el)return;if(!this.open){if(e.key==="ArrowDown"){this.open=true;e.preventDefault();return}return}const o=Array.from(this.el.querySelectorAll("nv-fielddropdownitem:not([disabled]):not([hidden])"));let r=o.findIndex((e=>e.classList.contains("highlighted")));if(e.key==="ArrowDown"){e.preventDefault();r=(r+1)%o.length;this.updateHighlightedItem(o,r)}else if(e.key==="ArrowUp"){e.preventDefault();r=(r-1+o.length)%o.length;this.updateHighlightedItem(o,r)}else if(e.key==="Escape"){e.preventDefault();this.open=false}}componentWillLoad(){this.resetFilter();if(this.filterable&&this.filterText){this.filterItems()}if(this.options){this.handleOptionsChange(this.options)}}componentDidLoad(){if(this.value){this.updateSelectedItem(this.value)}if(this.inputElement){this.inputElement.value=this.getSelectedLabel()}}async getFilterText(){return this.filterText}filterItems(){var e;const o=Array.from(this.el.querySelectorAll("nv-fielddropdownitem"));const r=this.el.querySelector("nv-fielddropdownitem[data-empty]");if(r){r.remove()}let i=false;o.forEach((e=>{var o,r;const t=((o=e.textContent)===null||o===void 0?void 0:o.toLowerCase())||"";const n=((r=e.value)===null||r===void 0?void 0:r.toLowerCase())||"";const d=n.includes(this.filterText)||t.includes(this.filterText);if(d)e.removeAttribute("hidden");else e.setAttribute("hidden","");if(d){i=true}}));if(!i){const o=document.createElement("nv-fielddropdownitem");o.setAttribute("data-empty","true");o.setAttribute("disabled","true");o.textContent=this.emptyResult;(e=this.el.querySelector('ul[slot="content"]'))===null||e===void 0?void 0:e.appendChild(o)}}resetFilter(){const e=Array.from(this.el.querySelectorAll("nv-fielddropdownitem"));e.forEach((e=>{e.style.display=""}))}updateHighlightedItem(e,o){e.forEach(((e,r)=>{if(r===o){e.classList.add("highlighted");e.focus();e.scrollIntoView({block:"nearest"})}else{e.classList.remove("highlighted")}}))}updateSelectedItem(e){if(!e)return;const o=Array.from(this.el.querySelectorAll("nv-fielddropdownitem"));const r=o.find((o=>{var r;const i=o.getAttribute("label");const t=o.getAttribute("value");const n=(r=o.textContent)===null||r===void 0?void 0:r.trim();return i===e||t===e||n===e}));o.forEach((e=>{if(e===r){e.setAttribute("selected","")}else{e.removeAttribute("selected")}}))}render(){var e;return r(i,{key:"da19368ad4006df880581a7a0d7c1be1d2249008",role:"combobox","aria-expanded":this.open.toString(),"aria-haspopup":"listbox","aria-label":this.label},(this.label||this.el.querySelector('[slot="label"]'))&&r("label",{key:"38c0a47d3f85ccb50173a5d5322cc4e5ea577b85",htmlFor:this.inputId},r("slot",{key:"9a97d0960a2f36dd0d9853ed41796708129068ac",name:"label"},this.label)),r("nv-popover",{key:"69aabf648cf0890133c48250d8a851516e4266f9",ref:e=>this.popoverElement=e,triggerMode:"controlled",placement:"bottom-start",open:this.open},r("div",{key:"10cca5b4b91cee8f8149b01df3daa4d36d44a85c",class:"input-wrapper",slot:"trigger"},r("slot",{key:"583d0903e75dcc3255fc29ccde93e117797ce41e",name:"before-input"}),r("div",{key:"8b2101b0cfecbff145469cab9a86ec381ee01f00",class:"input-container",onClick:this.handleInputContainerClick},r("slot",{key:"5e2c78f28c2df9c6ab8d4c41fae39faf308d74de",name:"leading-input"}),this.filterable||this.disabled||this.readonly?r("input",{"data-scope":"focusable",id:this.inputId,type:"search",ref:e=>this.inputElement=e,autofocus:this.autofocus,autocomplete:this.autocomplete,placeholder:this.placeholder,name:this.name,value:this.getSelectedLabel(),required:this.required,disabled:this.disabled,readOnly:this.readonly,onInput:this.handleInput,onFocus:this.handleInputFocus,onClick:this.handleInputFocus,onKeyDown:this.handleKeyDown}):r("p",{"data-scope":"focusable",id:this.inputId,class:"non-filterable-text",onClick:this.handleInputContainerClick,tabIndex:this.disabled?-1:0,onKeyDown:this.handleKeyDown,onFocus:this.handleInputFocus},this.getSelectedLabel()||this.value||this.placeholder),this.filterable&&this.filterText&&this.open&&r("nv-iconbutton",{key:"8b6f29fc7eba80edfba731ea2b5e3a2e23045aae",name:"x",size:"md",emphasis:"lower",class:"clear-button",onClick:this.clearFilter,"aria-label":"Clear input"}),this.error&&r("nv-icon",{key:"8e808491b0aa3fedf657a9009fb94e6e4f46f4fa",name:"alert-circle",class:"validation",size:"md"}),r("nv-iconbutton",{key:"2e20d15804b70243e2f83d463dbb6d3c617c5263","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})),r("slot",{key:"6a9fd16a090be92ef9a003e048db8daec58b7419",name:"after-input"})),r("div",{key:"0efb0e793cd3b8d41f5884ffb34a86e0d298f217",slot:"content",style:this.maxHeight?{maxHeight:this.maxHeight}:{}},((e=this.options)===null||e===void 0?void 0:e.length)>0?r("ul",null,this.options.map((e=>r("nv-fielddropdownitem",{label:e.label,value:e.value,disabled:e.disabled,selected:e.value===this.value})))):r("slot",{name:"content"}))),(this.description||this.el.querySelector('[slot="description"]'))&&r("div",{key:"34e787b02ab0ccb02dafb93e12b600d845c96442",class:"description"},r("slot",{key:"ac8b3085ac8507c3ae243a71392167851a1d5755",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&r("div",{key:"e1a1bf22b2c5f932a31342493d3b8fbb84f31f1e",hidden:!this.error,class:"error-description"},r("slot",{key:"843a2ccfbaf3037747069918dd990d329ae98fbc",name:"error-description"},this.errorDescription)))}static get formAssociated(){return true}get el(){return t(this)}static get watchers(){return{options:["handleOptionsChange"],value:["watchValueHandler"]}}};a.style=l;export{a as nv_fielddropdown};
|
|
2
|
-
//# sourceMappingURL=p-f0cbfb3d.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["nvFielddropdownCss","NvFielddropdownStyle0","NvFielddropdown","constructor","hostRef","this","inputId","uuidv4","autocomplete","required","readonly","disabled","error","maxHeight","open","emptyResult","filterable","debounceDelay","autofocus","fluid","filterText","selectedValues","Set","handleInputContainerClick","event","target","tagName","inputContainer","el","querySelector","classList","add","removeFocusWithin","remove","popoverElement","addEventListener","handleInput","input","debounceTimer","window","clearTimeout","setTimeout","value","toLowerCase","filterItems","handleInputFocus","togglePopover","getSelectedLabel","_a","options","length","matchingItem","find","option","_c","_b","label","items","Array","from","querySelectorAll","item","selectedLabel","_f","_d","_e","textContent","trim","clearFilter","inputElement","focus","handleOptionsChange","newValue","defaultValue","selected","updateSelectedItem","watchValueHandler","valueChanged","emit","handleOpenChanged","stopPropagation","detail","handleDropdownItemSelected","forEach","removeAttribute","setAttribute","handleBlur","relatedTarget","Node","contains","handleKeyDown","key","preventDefault","currentIndex","findIndex","updateHighlightedItem","componentWillLoad","resetFilter","componentDidLoad","getFilterText","existingEmptyItem","hasVisibleItems","shouldShow","includes","emptyItem","document","createElement","appendChild","style","display","index","i","scrollIntoView","block","itemLabel","getAttribute","itemValue","itemText","render","h","Host","role","toString","htmlFor","name","ref","triggerMode","placement","class","slot","onClick","id","type","e","placeholder","readOnly","onInput","onFocus","onKeyDown","tabIndex","size","emphasis","map","description","errorDescription","hidden"],"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@import '../../../styles/scrollbar';\n\nnv-fielddropdown {\n @include form-field-variables();\n @include form-field-root();\n\n &[fluid]:not([fluid='false']) {\n @include form-field-fluid();\n }\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 &[hidden]:not([hidden='false']) label {\n display: none;\n }\n\n label {\n @include form-field-label();\n }\n\n nv-popover {\n @include form-field-popover();\n\n div[slot='content'] {\n @include scrollbar();\n max-height: calc(90vh - var(--list-dropdown-padding) * 2);\n overflow-y: auto;\n position: relative;\n }\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';\n\nimport { v4 as uuidv4 } from 'uuid';\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 * Timer for debouncing input events.\n * Private property preferred over @State as it:\n * - Doesn't need to trigger re-renders\n * - Is purely for internal logic\n * - Improves performance by avoiding Stencil's reactivity system\n */\n private debounceTimer: number;\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 * 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 * 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 * 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 * 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 * 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 * Defines the maximum height of the multiselect list when open.\n */\n @Prop({ reflect: true })\n readonly maxHeight: string = '';\n\n /**\n * State of the dropdown popover.\n */\n @Prop({ reflect: true, mutable: true })\n open: 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 })\n readonly filterable: boolean = false;\n\n /**\n * List of options used to automatically generate dropdown items. This\n * provides an alternative to using the slot manually.\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: false })\n readonly options?: {\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 /**\n * Delay in milliseconds before the search is triggered when typing in the filter input.\n * @default 300\n */\n @Prop({ reflect: true })\n readonly debounceDelay: number = 300;\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 /**\n * Allows the field to stretch and fill the entire width of its container.\n */\n @Prop({ reflect: true })\n readonly fluid: boolean = false;\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region STATE\n\n /**\n * The text entered by the user for filtering dropdown items.\n */\n @State()\n filterText: string = '';\n\n @State()\n selectedValues: Set<string> = new Set();\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 //#endregion EVENTS\n /****************************************************************************/\n //#region WATCHERS\n\n @Watch('options')\n handleOptionsChange(newValue: typeof this.options) {\n if (!newValue) return;\n\n if (!this.value) {\n const defaultValue = newValue.find(option => option.selected);\n this.value = defaultValue?.value ?? '';\n this.updateSelectedItem(this.value);\n }\n }\n\n @Watch('value')\n watchValueHandler(newValue: typeof this.value) {\n this.valueChanged.emit(newValue);\n }\n\n //#endregion WATCHERS\n /****************************************************************************/\n //#region LISTENERS\n\n @Listen('openChanged')\n handleOpenChanged(event: CustomEvent<boolean>) {\n // Stop propagation to prevent the event from affecting parent components like dialogs\n event.stopPropagation();\n\n // Update `open` based on the popover state\n this.open = event.detail;\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.clearFilter();\n this.value = event.detail.value;\n this.open = false;\n }\n\n @Listen('blur', { capture: true })\n handleBlur(event: FocusEvent) {\n const target = event.relatedTarget;\n if (!(target instanceof Node) || !this.el.contains(target)) {\n this.open = false;\n\n if (this.inputElement) {\n this.filterText = '';\n this.inputElement.value = this.getSelectedLabel();\n setTimeout(() => {\n this.filterItems();\n }, 200);\n }\n }\n }\n\n @Listen('keydown', { passive: false })\n handleKeyDown(event: KeyboardEvent) {\n if (!this.el) return;\n if (!this.open) {\n if (event.key === 'ArrowDown') {\n this.open = true;\n\n event.preventDefault();\n return;\n }\n return;\n }\n\n const items = Array.from(\n this.el.querySelectorAll(\n 'nv-fielddropdownitem:not([disabled]):not([hidden])',\n ),\n ) as HTMLNvFielddropdownitemElement[];\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 LISTENERS\n /****************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n this.resetFilter();\n\n if (this.filterable && this.filterText) {\n this.filterItems();\n }\n if (this.options) {\n this.handleOptionsChange(this.options);\n }\n }\n\n componentDidLoad() {\n if (this.value) {\n this.updateSelectedItem(this.value);\n }\n if (this.inputElement) {\n this.inputElement.value = this.getSelectedLabel();\n }\n }\n\n //#endregion LIFECYCLE\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 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.open = true;\n\n // Clear any existing timer\n if (this.debounceTimer) {\n window.clearTimeout(this.debounceTimer);\n }\n\n // Set a new timer for filtering\n this.debounceTimer = window.setTimeout(() => {\n this.filterText = input.value.toLowerCase();\n this.filterItems();\n }, this.debounceDelay);\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 if (shouldShow) item.removeAttribute('hidden');\n else item.setAttribute('hidden', '');\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 this.open = true;\n };\n\n private togglePopover = () => {\n if (this.disabled || this.readonly) return;\n this.open = !this.open;\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 getSelectedLabel = (): string => {\n if (!this.value) return '';\n\n if (this.options?.length > 1) {\n const matchingItem = this.options.find(\n option => option.value === this.value,\n );\n return matchingItem?.label ?? matchingItem?.value ?? this.value;\n }\n\n const items = Array.from(\n this.el.querySelectorAll('nv-fielddropdownitem'),\n ) as HTMLNvFielddropdownitemElement[];\n\n const matchingItem = items.find(item => item.value === this.value);\n\n const selectedLabel = matchingItem\n ? matchingItem.label ??\n matchingItem.textContent?.trim() ??\n matchingItem.value\n : '';\n\n return selectedLabel;\n };\n\n private clearFilter = () => {\n if (!this.filterable) return;\n\n this.filterText = '';\n this.inputElement.value = this.getSelectedLabel();\n this.inputElement.focus();\n this.filterItems();\n };\n\n private updateSelectedItem(value: string) {\n if (!value) return;\n\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 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\n //#endregion METHODS\n /****************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n role=\"combobox\"\n aria-expanded={this.open.toString()}\n aria-haspopup=\"listbox\"\n aria-label={this.label}\n >\n {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n <label htmlFor={this.inputId}>\n <slot name=\"label\">{this.label}</slot>\n </label>\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.filterable || this.disabled || this.readonly ? (\n <input\n data-scope=\"focusable\"\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 onClick={this.handleInputFocus}\n onKeyDown={this.handleKeyDown}\n />\n ) : (\n <p\n data-scope=\"focusable\"\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 {this.getSelectedLabel() || this.value || this.placeholder}\n </p>\n )}\n\n {this.filterable && 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\n slot=\"content\"\n style={this.maxHeight ? { maxHeight: this.maxHeight } : {}}\n >\n {this.options?.length > 0 ? (\n <ul>\n {this.options.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\n //#endregion RENDER\n /****************************************************************************/\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{h as e,r as i,c as t,H as r,g as n}from"./p-d0a33e64.js";import{c as s}from"./p-8a1a6e56.js";import{v as a}from"./p-f5ff676c.js";function o(e){if(Number.isInteger(e))return 0;const i=e.toString();const t=i.split(".")[1];return t?t.length:0}function l(e,i,t){return Math.max(i,Math.min(t,e))}function d(e,i,t){if(t===i)return 0;return(e-i)/(t-i)*100}function c(e,i,t,r){const n=l(e,i,t);const s=o(r);if(s>0){const e=Math.pow(10,s);const a=Math.round((n-i)*e);const o=Math.round(r*e);const d=Math.round(a/o);const c=d*o;const f=i+c/e;return l(parseFloat(f.toFixed(s)),i,t)}const a=(n-i)/r;const d=Math.round(a);const c=i+d*r;return l(c,i,t)}function f(e,i,t){const r=[];for(let n=e;n<=i;n+=t){r.push(Number(n.toFixed(10)))}if(r[r.length-1]!==i){r.push(i)}return r}function h(e,i){if(!i||i.length===0)return e;let t=i[0].value;let r=Math.abs(e-t);for(const n of i){const i=Math.abs(e-n.value);if(i<r){r=i;t=n.value}}return t}function u(e,i){const t=o(i);if(t>0){return e.toFixed(t)}return String(e)}const v=i=>{const{value:t,min:r,max:n,step:s,rawPosition:a,isDragging:o,snap:c,disabled:f,readonly:h,onKeyDown:v,labelBeforeValue:b,labelAfterValue:p}=i;let m=t;if(o&&!c){m=l(a,r,n)}const k=d(m,r,n);return e("div",{class:"thumb",style:{left:`${k}%`},role:"slider","aria-valuemin":r,"aria-valuemax":n,"aria-valuenow":t,"aria-disabled":f?"true":undefined,"aria-readonly":h?"true":undefined,tabindex:f?-1:0,onKeyDown:v},e("div",{class:"thumb-tooltip"},b&&e("span",{class:"label-before"},b),u(t,s),p&&e("span",{class:"label-after"},p)))};const b=i=>{const{rangeValue:t,rawRangePosition:r,activeDragThumb:n,isDragging:s,snap:a,min:o,max:c,step:f,disabled:h,readonly:v,onKeyDown:b,labelBeforeValue:p,labelAfterValue:m}=i;const[k,g]=t;let y=k;let x=g;if(s&&!a){const[e,i]=r;if(n==="left"){y=l(e,o,Math.min(g,c))}else if(n==="right"){x=l(i,Math.max(k,o),c)}}const w=d(y,o,c);const V=d(x,o,c);return[e("div",{class:"track-range",style:{left:`${w}%`,width:`${V-w}%`}}),e("div",{class:"thumb thumb-left",style:{left:`${w}%`},role:"slider","aria-valuemin":o,"aria-valuemax":c,"aria-valuenow":k,"aria-disabled":h?"true":undefined,"aria-readonly":v?"true":undefined,"data-thumb":"left",tabindex:h?-1:0,onKeyDown:b},e("div",{class:"thumb-tooltip"},p&&e("span",{class:"label-before"},p),u(k,f),m&&e("span",{class:"label-after"},m))),e("div",{class:"thumb thumb-right",style:{left:`${V}%`},role:"slider","aria-valuemin":o,"aria-valuemax":c,"aria-valuenow":g,"aria-disabled":h?"true":undefined,"aria-readonly":v?"true":undefined,"data-thumb":"right",tabindex:h?-1:0,onKeyDown:b},e("div",{class:"thumb-tooltip"},p&&e("span",{class:"label-before"},p),u(g,f),m&&e("span",{class:"label-after"},m)))]};const p=i=>{const{ticks:t,min:r,max:n}=i;if(t.length===0){return null}return e("div",{class:"track-ticks"},t.map((i=>{const t=d(i.value,r,n);return e("div",{class:"track-tick",style:{left:`${t}%`}},i.label&&e("div",{class:"tick-label"},i.label))})))};const m=i=>{const{range:t,hasField:r,value:n,rangeValue:a,index:o,inputId:l,min:d,max:c,step:f,disabled:h,readonly:u,onInput:v,labelBeforeValue:b,labelAfterValue:p,name:m,endName:k}=i;const g=t?a[o]:n;const y=t?{"data-index":o.toString()}:{};let x;if(t){if(o===0){x=m||""}else{x=k||(m?`${m}-end`:"")}}else{x=m||""}const w=e=>{e.stopPropagation();const i=e.detail;if(isNaN(i)){return}v({value:i,index:o})};return r?e("div",{class:s(!r&&"hidden-input")},e("nv-fieldnumber",Object.assign({id:l,value:g,min:d,max:c,step:f,disabled:h,readonly:u,name:x},y,{onInput:e=>e.stopPropagation(),onValueChanged:w}),b&&e("span",{class:"label-before",slot:"leading-input"},b),p&&e("span",{class:"label-after",slot:"trailing-input"},p))):e("input",{id:l,type:"hidden",value:g,disabled:h,readonly:u,name:x})};const k='nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range{background:var(--components-slider-track-filled-focus)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb{border-color:var(--components-slider-track-filled-focus)}nv-fieldslider[error] .slider-container .track-container .track .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:hover{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-handler-background-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:focus{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldslider{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box;max-width:480px}nv-fieldslider .slider-container{width:100%;display:flex;flex-direction:row;align-items:center;gap:var(--form-gap-x)}nv-fieldslider .slider-container .track-container{position:relative;flex:1;height:calc(var(--slider-handler-size-min) + 0.25rem);padding:calc(var(--slider-handler-size-min) / 2) 0}nv-fieldslider .slider-container .track-container .track{position:relative;height:var(--slider-track-height);background:var(--components-slider-track-background);border-radius:var(--slider-track-radius);cursor:pointer;touch-action:none;user-select:none}nv-fieldslider .slider-container .track-container .track::after{content:"";position:absolute;top:calc(-13px + var(--slider-track-height) / 2);left:0;width:100%;height:26px;background:rgba(255, 255, 255, 0)}nv-fieldslider .slider-container .track-container .track .track-range{position:absolute;top:0;height:var(--slider-track-height);background:var(--components-slider-track-filled-default);border-radius:var(--slider-track-radius);pointer-events:none}nv-fieldslider .slider-container .track-container .track .thumb{position:absolute;top:50%;width:var(--slider-handler-size-min);height:var(--slider-handler-size-min);background:#ffffff;border:var(--slider-handler-stroke) solid var(--components-slider-track-filled-default);border-radius:50%;transform:translate(-50%, -50%);z-index:1;cursor:grab;touch-action:none;user-select:none;transition:width 0.2s, height 0.2s, box-shadow 0.2s, background-color 0.2s}nv-fieldslider .slider-container .track-container .track .thumb:after{content:"";position:absolute;top:-7px;left:-7px;width:calc(100% + 14px);height:calc(100% + 14px);background:rgba(255, 255, 255, 0)}nv-fieldslider .slider-container .track-container .track .thumb:hover{width:var(--slider-handler-size-max);height:var(--slider-handler-size-max);border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container .track .thumb:focus{width:var(--slider-handler-size-min);height:var(--slider-handler-size-min);border-color:var(--components-slider-track-filled-focus);outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1);transition:outline;background:var(--components-slider-handler-background-focus)}nv-fieldslider .slider-container .track-container .track .thumb:active{cursor:grabbing;background:var(--components-slider-handler-background-hover)}nv-fieldslider .slider-container .track-container .track .thumb .thumb-tooltip{position:absolute;top:25px;left:50%;background-color:var(--components-tooltip-background);color:var(--components-tooltip-text);padding:5px;border-radius:var(--tooltip-radius);font-size:var(--tooltip-font-size);z-index:10;pointer-events:none;user-select:none;opacity:0;transition:opacity 0.3s ease-in-out;transform:translateX(-50%);backface-visibility:hidden;-webkit-font-smoothing:antialiased;transform-style:preserve-3d}nv-fieldslider .slider-container .track-container .track .thumb .thumb-tooltip:after{content:"";background:var(--components-tooltip-background);box-shadow:none;border:none;position:absolute;border-bottom-color:transparent;border-right-color:transparent;width:6px;height:6px;transform:rotate(45deg);border-radius:1px;top:-3px;left:50%;margin-left:-3px;backface-visibility:hidden;will-change:transform, opacity}nv-fieldslider .slider-container .track-container .track .thumb:hover .thumb-tooltip,nv-fieldslider .slider-container .track-container .track .thumb:active .thumb-tooltip,nv-fieldslider .slider-container .track-container .track .thumb:focus .thumb-tooltip{opacity:1}nv-fieldslider .slider-container .track-container .track-ticks{position:relative;height:1rem;margin-top:0.25rem}nv-fieldslider .slider-container .track-container .track-ticks .track-tick{position:absolute;top:0;width:var(--slider-tick-height);height:var(--slider-tick-height);background:var(--components-form-field-border-default);border-radius:50%;transform:translate(-50%, 0);pointer-events:none}nv-fieldslider .slider-container .track-container .track-ticks .track-tick:first-of-type{transform:translate(0, 0)}nv-fieldslider .slider-container .track-container .track-ticks .track-tick:last-of-type{transform:translate(-100%, 0)}nv-fieldslider .slider-container .track-container .track-ticks .track-tick .tick-label{position:absolute;top:calc(var(--slider-tick-height) + 0.25rem);left:50%;color:var(--components-form-field-border-default);transform:translateX(-50%);white-space:nowrap}.track-tick-first nv-fieldslider .slider-container .track-container .track-ticks .track-tick .tick-label{left:0;transform:translateX(0)}.track-tick-last nv-fieldslider .slider-container .track-container .track-ticks .track-tick .tick-label{left:100%;transform:translateX(-100%)}nv-fieldslider .slider-container .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;width:90px;flex-grow:unset}nv-fieldslider .slider-container .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldslider .slider-container .input-container:focus-within,nv-fieldslider .slider-container .input-container:focus-within:hover,nv-fieldslider .slider-container .input-container:focus,nv-fieldslider .slider-container .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-fieldslider .slider-container .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-fieldslider .slider-container .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldslider .slider-container .input-container input{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%;}nv-fieldslider .slider-container .input-container input:focus{outline:none}nv-fieldslider .slider-container .input-container input::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-fieldslider .slider-container .input-container input[type=password]::-ms-clear,nv-fieldslider .slider-container .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldslider .slider-container .input-container .label-before{margin-left:var(--spacing-2);color:var(--components-form-field-icon-default)}nv-fieldslider .slider-container .input-container .label-after{margin-right:var(--spacing-2);color:var(--components-form-field-icon-default)}nv-fieldslider[fluid]:not([fluid=false]){max-width:unset}nv-fieldslider[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive-in-field)}nv-fieldslider[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--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-success)}nv-fieldslider[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-fieldslider[readonly]:not([readonly=false]) .track,nv-fieldslider[readonly]:not([readonly=false]) .thumb{cursor:default}nv-fieldslider 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-fieldslider nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldslider[hide-label]:not([hide-label=false]) label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}nv-fieldslider[has-field]:not([has-field=false]) .thumb-tooltip{display:none}nv-fieldslider>.description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);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-fieldslider>.error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);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)}nv-fieldslider>.error-description[hidden]{display:none}';const g=k;const y=class{constructor(e){i(this,e);this.valueChanged=t(this,"valueChanged",7);this.startInputId=a();this.endInputId=a();this.hideLabel=false;this.hasField=false;this.range=false;this.disabled=false;this.readonly=false;this.error=false;this.success=false;this.value=[0];this.step=1;this.snap=false;this.snapTicks=false;this.min=0;this.max=100;this.showTicks=false;this.fluid=false;this.isDragging=false;this.activeDragThumb="single";this.internalTicks=[];this.rawPosition=0;this.rawRangePosition=[0,0];this.valueInternal=0;this.rangeValueInternal=[0,0];this.parseValue=()=>{if(typeof this.value==="string"){console.error("Sliders require a number or array of numbers to be passed in the value prop.");return}if(this.range&&this.value.length!==2){console.error("Range sliders require an array of two values to be passed in the value prop.");return}if(!this.range&&this.value.length!==1){console.error("Single sliders require a single value as an array to be passed in the value prop.");return}this.valueInternal=this.value[0];this.rangeValueInternal=[this.value[0],this.value[1]]};this.onTrackInteraction=e=>{if(this.disabled||this.readonly){return}const i=e.currentTarget.getBoundingClientRect();const t=l((e.clientX-i.left)/i.width*100,0,100);const r=this.min+t/100*(this.max-this.min);this.rawPosition=r;if(this.range){const e=d(this.rangeValueInternal[0],this.min,this.max);const i=d(this.rangeValueInternal[1],this.min,this.max);const n=Math.abs(t-e);const s=Math.abs(t-i);if(n<=s){this.activeDragThumb="left";this.rawRangePosition=[r,this.rawRangePosition[1]];this.handleValueChange([r,this.rangeValueInternal[1]])}else{this.activeDragThumb="right";this.rawRangePosition=[this.rawRangePosition[0],r];this.handleValueChange([this.rangeValueInternal[0],r])}}else{this.activeDragThumb="single";this.rawPosition=r;this.handleValueChange(r)}this.isDragging=true;this.registerGlobalEvents()};this.onPointerMove=e=>{if(!this.isDragging||this.disabled||this.readonly){return}const i=this.el.querySelector(".track");if(!i)return;const t=i.getBoundingClientRect();const r=l((e.clientX-t.left)/t.width*100,0,100);const n=this.min+r/100*(this.max-this.min);if(this.range){if(this.activeDragThumb==="left"){this.rawRangePosition=[n,this.rawRangePosition[1]];this.handleValueChange([n,this.rangeValueInternal[1]])}else{this.rawRangePosition=[this.rawRangePosition[0],n];this.handleValueChange([this.rangeValueInternal[0],n])}}else{this.rawPosition=n;this.handleValueChange(n)}};this.onPointerUp=()=>{this.isDragging=false;this.removeGlobalEvents()};this.onKeyDown=e=>{if(this.disabled||this.readonly){return}let i;const t=e.shiftKey?10:1;const r=this.step*t;if(this.range){const t=e.target.getAttribute("data-thumb");const n=t==="left"?0:1;const s=[...this.rangeValueInternal];switch(e.key){case"ArrowRight":case"ArrowUp":s[n]+=r;break;case"ArrowLeft":case"ArrowDown":s[n]-=r;break;case"Home":s[n]=this.min;break;case"End":s[n]=this.max;break;case"PageUp":s[n]+=r*10;break;case"PageDown":s[n]-=r*10;break;default:return}i=s}else{switch(e.key){case"ArrowRight":case"ArrowUp":i=this.valueInternal+r;break;case"ArrowLeft":case"ArrowDown":i=this.valueInternal-r;break;case"Home":i=this.min;break;case"End":i=this.max;break;case"PageUp":i=this.valueInternal+r*10;break;case"PageDown":i=this.valueInternal-r*10;break;default:return}}e.preventDefault();this.handleValueChange(i)};this.handleFieldChange=e=>{const i=e.value;if(isNaN(i)){return}if(this.range){const t=e.index===0?0:1;const r=[...this.rangeValueInternal];r[t]=i;this.handleValueChange(r)}else{this.handleValueChange(i)}}}validateValue(e){const i=l(e,this.min,this.max);if(this.snapTicks&&this.internalTicks&&this.internalTicks.length>0){return h(i,this.internalTicks)}return c(i,this.min,this.max,this.step)}handleValueChange(e){if(this.disabled||this.readonly){return}if(this.range){if(Array.isArray(e)&&e.length===2){const i=[Math.min(e[0],e[1]),Math.max(e[0],e[1])];const t=[this.validateValue(i[0]),this.validateValue(i[1])];if(t[0]!==this.rangeValueInternal[0]||t[1]!==this.rangeValueInternal[1]){this.rangeValueInternal=t;this.value=this.rangeValueInternal;this.valueChanged.emit(this.rangeValueInternal)}}}else{if(typeof e==="number"){const i=this.validateValue(e);if(i!==this.valueInternal){this.valueInternal=i;this.value=[this.valueInternal];this.valueChanged.emit([this.valueInternal])}}}}generateDisplayTicks(){if(this.ticks&&this.ticks.length>0){this.internalTicks=[...this.ticks].sort(((e,i)=>e.value-i.value));return}if(!this.showTicks){this.internalTicks=[];return}const e=f(this.min,this.max,this.step);this.internalTicks=e.map((e=>({value:e})))}registerGlobalEvents(){document.addEventListener("pointermove",this.onPointerMove);document.addEventListener("pointerup",this.onPointerUp);document.addEventListener("pointercancel",this.onPointerUp)}removeGlobalEvents(){document.removeEventListener("pointermove",this.onPointerMove);document.removeEventListener("pointerup",this.onPointerUp);document.removeEventListener("pointercancel",this.onPointerUp)}onValueChange(){this.parseValue()}onConfigChange(){this.generateDisplayTicks();if(this.range){this.handleValueChange(this.rangeValueInternal)}else{this.handleValueChange(this.valueInternal)}}onRangeChange(e){if(e){this.rangeValueInternal=[this.min,this.valueInternal]}else{this.valueInternal=this.rangeValueInternal[1]}}connectedCallback(){this.parseValue();this.generateDisplayTicks();if(this.range){if(!Array.isArray(this.rangeValueInternal)||this.rangeValueInternal.length!==2){this.rangeValueInternal=[this.min,this.max]}this.handleValueChange(this.rangeValueInternal);this.rawRangePosition=[this.rangeValueInternal[0],this.rangeValueInternal[1]]}else{this.handleValueChange(this.valueInternal);this.rawPosition=this.valueInternal}}componentWillLoad(){if(this.value.length===1&&this.range){this.value=[this.value[0],this.value[0]]}else if(this.value.length===2&&!this.range){this.value=[this.value[0]]}}disconnectedCallback(){this.removeGlobalEvents()}render(){return e(r,{key:"5256401116f099a480f35552c3a38072c60d74ed"},(this.label||this.el.querySelector('[slot="label"]'))&&e("label",{key:"ae1c59b2561f0b007d3f6da3ef379a32fe2ff449",htmlFor:this.startInputId},e("slot",{key:"6d0b7e287276082ea680fc7fdfaabe428648df03",name:"label"},this.label)),e("div",{key:"3c09727930e4d7bbde1f1ad578fb87e18f04c8dc",class:"slider-container"},this.range?e(m,{range:this.range,hasField:this.hasField,value:this.valueInternal,rangeValue:this.rangeValueInternal,index:0,inputId:this.startInputId,min:this.min,max:this.max,step:this.step,disabled:this.disabled,readonly:this.readonly,onInput:this.handleFieldChange,labelBeforeValue:this.labelBeforeValue,labelAfterValue:this.labelAfterValue,name:this.name,endName:this.endName}):null,e("div",{key:"db7e57716f9fc13e9ecd2e81c4126ccd8ceade9f",class:"track-container"},e("div",{key:"8b5cc8d661b8179fa71c6729291e72bc743dcb13",class:"track",onPointerDown:this.onTrackInteraction},this.range?e(b,{rangeValue:this.rangeValueInternal,rawRangePosition:this.rawRangePosition,activeDragThumb:this.activeDragThumb,isDragging:this.isDragging,snap:this.snap,min:this.min,max:this.max,step:this.step,disabled:this.disabled,readonly:this.readonly,onKeyDown:this.onKeyDown,labelBeforeValue:this.labelBeforeValue,labelAfterValue:this.labelAfterValue}):e(v,{value:this.valueInternal,min:this.min,max:this.max,step:this.step,rawPosition:this.rawPosition,isDragging:this.isDragging,snap:this.snap,disabled:this.disabled,readonly:this.readonly,onKeyDown:this.onKeyDown,labelBeforeValue:this.labelBeforeValue,labelAfterValue:this.labelAfterValue})),e(p,{key:"4f7ee0f6eccff4a2539b9f33c9f1dd68e0e8afa1",ticks:this.internalTicks,min:this.min,max:this.max})),this.range?e(m,{range:this.range,hasField:this.hasField,value:this.valueInternal,rangeValue:this.rangeValueInternal,index:1,inputId:this.endInputId,min:this.min,max:this.max,step:this.step,disabled:this.disabled,readonly:this.readonly,onInput:this.handleFieldChange,labelBeforeValue:this.labelBeforeValue,labelAfterValue:this.labelAfterValue,name:this.name,endName:this.endName}):e(m,{range:this.range,hasField:this.hasField,value:this.valueInternal,rangeValue:this.rangeValueInternal,inputId:this.startInputId,min:this.min,max:this.max,step:this.step,disabled:this.disabled,readonly:this.readonly,onInput:this.handleFieldChange,labelBeforeValue:this.labelBeforeValue,labelAfterValue:this.labelAfterValue,name:this.name})),(this.success||this.description||this.el.querySelector('[slot="description"]'))&&e("div",{key:"40b921d84578b1d7ae18fa5f1ebcc34cc1678df2",class:"description"},this.success&&e("nv-icon",{key:"c0c7e52eb9118154f18280fdcb09ca4a5db63c74",name:"circle-check",class:"validation",size:"md"}),e("slot",{key:"2d764e1dabf08abb3271de1f8c2cf6f8418d9d5d",name:"description"},this.description)),(this.error||this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&e("div",{key:"96f9424431a2adcca98f4619350e6d34c2037bc2",class:"error-description",hidden:!this.error},this.error&&e("nv-icon",{key:"b77e2b14a5f4e9cdf49c173f5fbf24d6a3f081ff",name:"alert-circle",class:"validation",size:"md"}),e("slot",{key:"f04a20c146d54c405669109436b28bf9ad99ebd8",name:"error-description"},this.errorDescription)))}static get formAssociated(){return true}get el(){return n(this)}static get watchers(){return{value:["onValueChange"],min:["onConfigChange"],max:["onConfigChange"],step:["onConfigChange"],ticks:["onConfigChange"],showTicks:["onConfigChange"],snap:["onConfigChange"],snapTicks:["onConfigChange"],range:["onRangeChange"]}}};y.style=g;export{y as nv_fieldslider};
|
|
2
|
-
//# sourceMappingURL=p-f5120223.entry.js.map
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as t,c as s,h as e,H as a,g as i}from"./p-d0a33e64.js";import{d as n,e as o}from"./p-cb34aa4f.js";const r="nv-table{display:block}nv-table .hidden{display:none}nv-table table{border-collapse:collapse;border-color:inherit;text-indent:0;width:100%}nv-table th{text-align:left;border-bottom:1px solid var(--components-datagrid-header-border);height:var(--spacing-12);padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-md);font-weight:700;color:var(--components-datagrid-header-text)}nv-table td{border-bottom:1px solid var(--components-datagrid-body-border);height:var(--spacing-12);max-height:var(--spacing-14);padding:var(--spacing-2) var(--spacing-4);font-size:var(--font-size-md);font-weight:400;color:var(--components-datagrid-body-text);white-space:nowrap;text-overflow:ellipsis}nv-table tbody>tr:hover{background:var(--color-interaction-container-neutral-background-hover)}";const l=r;const h=class{constructor(e){t(this,e);this.action=s(this,"action",7);this.templateCache=new Map;this.headerTemplateCache=new Map;this.parsedColumns=[];this.parsedData=[];this.table=null;this.data=[];this.columnsConfig=[];this.fallbackValue="N/A";this.noDataMessage="No data available";this.noColumnsNoDataMessage="No data or columns available to display."}cacheTemplates(){const t=Array.from(this.el.querySelectorAll("nv-tablecolumn"));t.forEach((t=>{const s=t.name;const e=t.querySelector('[slot="cell"]');if(e){const t=n(e);this.templateCache.set(s,t)}const a=t.querySelector('[slot="header"]');if(a){const t=n(a);this.headerTemplateCache.set(s,t)}else{const e=t.header;if(e){const t=document.createElement("div");t.textContent=e;this.headerTemplateCache.set(s,t)}}}))}parseDataAndColumns(){if(this.dataJson){this.parseJsonData(this.dataJson)}else if(this.data&&this.data.length>0){this.parseDataArray(this.data,this.parsedData)}if(this.columnsConfigJson){this.parseJsonColumns(this.columnsConfigJson,this.parsedColumns)}else if(this.columnsConfig&&this.columnsConfig.length>0){this.parseColumnsArray(this.columnsConfig,this.parsedColumns)}else if(this.headerTemplateCache.size>0){const t=Array.from(this.headerTemplateCache.keys());const s=t.map((t=>Object.assign({},{name:t,header:t?t.charAt(0).toUpperCase()+t.slice(1):""})));this.parseColumnsArray(s,this.parsedColumns)}else if(this.parsedData.length>0){const t=this.parsedData[0];const s=Object.keys(t).map((t=>({name:t,header:t.charAt(0).toUpperCase()+t.slice(1)})));this.parseColumnsArray(s,this.parsedColumns)}}deepEqual(t,s){return JSON.stringify(t)===JSON.stringify(s)}parseDataArray(t,s){const e=Array.isArray(t)?t:[];const a=Array.isArray(s)?s:[];if(this.deepEqual(e,a)){return}this.parsedData=Array.isArray(t)?t:[]}parseColumnsArray(t,s){const e=Array.isArray(t)?t:[];const a=Array.isArray(s)?s:[];if(this.deepEqual(e,a)){return}this.parsedColumns=e}initializeTable(){this.table=null;if(this.parsedColumns.length>0){this.table={columns:this.parsedColumns,data:this.getTableData()}}else{this.table=null}}getTableData(){if(this.parsedData&&Array.isArray(this.parsedData)&&this.parsedData.length>0){return[...this.parsedData]}else{return[]}}replaceKeyWithValue(t,s){var e;return(e=s.split(".").reduce(((t,s)=>t&&t[s]!==undefined?t[s]:undefined),t))!==null&&e!==void 0?e:this.fallbackValue}renderTemplate(t,s){if(!t){return null}const a=t instanceof HTMLTemplateElement?t.content:t;const i=n(a);i.querySelectorAll("*").forEach((t=>{this.replacePlaceholdersTextContent(t,s);this.replacePlaceholdersAttributes(t,s);this.replacePlaceholdersProperties(t,s)}));i.querySelectorAll("[data-bind-event]").forEach((t=>{const e=t.getAttribute("data-bind-event")||"";const a=e.split(":");if(!e.includes(":")||a.length<2){console.warn("Invalid data-bind-event format:",e);return}const i=a[0];const n=a[1];const o=a.length>2?a[2]:null;t.addEventListener(i,(()=>{var t;const e=(t=o===null||o===void 0?void 0:o.split(","))!==null&&t!==void 0?t:[];const a=e.reduce(((t,e)=>{t[e]=s===null||s===void 0?void 0:s[e];return t}),{});const i={keyAction:n,details:a};this.action.emit(i)}))}));setTimeout((()=>{i.querySelectorAll("*").forEach((t=>{if(typeof t.connectedCallback==="function"){t.connectedCallback()}}))}),0);return e("div",{ref:t=>{if(t){t.innerHTML="";t.appendChild(i)}}})}replacePlaceholdersTextContent(t,s){t.childNodes.forEach((t=>{if(t.nodeType===Node.TEXT_NODE){t.textContent=t.textContent.replace(/__([\w.]+)__/g,((t,e)=>this.replaceKeyWithValue(s,e)))}}))}replacePlaceholdersAttributes(t,s){Array.from(t.attributes).forEach((t=>{if(t.value.includes("__")){t.value=t.value.replace(/__([\w.]+)__/g,((t,e)=>this.replaceKeyWithValue(s,e)))}}))}replacePlaceholdersProperties(t,s){const e=new Set;Object.keys(t).forEach((t=>e.add(t)));let a=Object.getPrototypeOf(t);while(a&&a!==HTMLElement.prototype){Object.keys(a).forEach((t=>e.add(t)));a=Object.getPrototypeOf(a)}e.forEach((e=>{if(typeof t[e]!=="function"&&!e.startsWith("on")&&!o.has(e)){try{const a=t[e];if(typeof a==="string"&&a.includes("__")){t[e]=a.replace(/__([\w.]+)__/g,((t,e)=>this.replaceKeyWithValue(s,e)))}}catch(t){console.warn(`Could not assign property ${e}:`,t.message)}}}))}parseColumns(t,s){this.parseColumnsArray(t,s)}parseJsonColumns(t,s){try{const e=t?JSON.parse(t):[];this.parseColumnsArray(e,s)}catch(t){console.error("Invalid JSON format for columnsConfigJson:",t.message);this.parsedColumns=[]}}parseData(t,s){this.parseDataArray(t,s)}parseJsonData(t){try{const s=t?JSON.parse(t):[];this.parseDataArray(s,this.parsedData)}catch(t){console.error("Invalid JSON format for dataJson:",t.message);this.parsedData=[]}}handleParsedChange(){this.initializeTable()}componentWillLoad(){this.cacheTemplates();this.parseDataAndColumns()}render(){const t=!this.table||this.table===undefined||this.parsedColumns.length===0?[]:this.table.columns;const s=!this.table||this.table===undefined||this.parsedData.length===0?[]:this.table.data;return e(a,{key:"08082f0800c32a59606968aa2a80cfa3c2f07960"},e("div",{key:"f55f5409f45d90ef072abb09006ef6366e7e8c95",class:"hidden"},e("slot",{key:"0b5326e8c7c6f97f419819744a132335d4435bb4"})),e("slot",{key:"07d4538957b466ed332cd598e2c132d85a801979",name:"before"}),this.parsedColumns.length===0&&this.parsedData.length===0?e("div",{class:"no-data"},this.noColumnsNoDataMessage):e("table",{class:"table"},this.parsedColumns.length>0&&t.length>0&&e("thead",{class:"table-header"},e("tr",null,t&&t.map((t=>e("th",{key:t.name},this.renderTemplate(this.headerTemplateCache.get(t.name),{})||t.header))))),e("tbody",{class:"table-body"},!s||s.length===0?e("tr",null,e("td",{colSpan:t.length||12,class:"no-data"},this.noDataMessage)):s.map((s=>e("tr",{key:JSON.stringify(s)},t.map((t=>{var a;return e("td",null,this.renderTemplate(this.templateCache.get(t.name),s)||((a=s[t.name])!==null&&a!==void 0?a:this.fallbackValue))}))))))),e("slot",{key:"1f505261da2c2e05511940ec90f7375981cb0823",name:"after"}))}get el(){return i(this)}static get watchers(){return{columnsConfig:["parseColumns"],columnsConfigJson:["parseJsonColumns"],data:["parseData"],dataJson:["parseJsonData"],parsedColumns:["handleParsedChange"],parsedData:["handleParsedChange"]}}};h.style=l;export{h as nv_table};
|
|
2
|
-
//# sourceMappingURL=p-fa177c39.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["nvTableCss","NvTableStyle0","NvTable","constructor","hostRef","this","templateCache","Map","headerTemplateCache","parsedColumns","parsedData","table","data","columnsConfig","fallbackValue","noDataMessage","noColumnsNoDataMessage","cacheTemplates","columns","Array","from","el","querySelectorAll","forEach","col","key","name","cellSlot","querySelector","element","deepCopyElement","set","headerSlot","header","headerDiv","document","createElement","textContent","parseDataAndColumns","dataJson","parseJsonData","length","parseDataArray","columnsConfigJson","parseJsonColumns","parseColumnsArray","size","headerKeys","keys","arrayColumnsConfig","map","Object","assign","charAt","toUpperCase","slice","firstRow","deepEqual","a","b","JSON","stringify","newValue","oldValue","safeNewValue","isArray","safeOldValue","initializeTable","getTableData","replaceKeyWithValue","obj","path","_a","split","reduce","acc","undefined","renderTemplate","template","row","templateContent","HTMLTemplateElement","content","replacePlaceholdersTextContent","replacePlaceholdersAttributes","replacePlaceholdersProperties","bindEvent","getAttribute","splitted","includes","console","warn","eventType","keyAction","details","addEventListener","keyValue","action","emit","setTimeout","child","connectedCallback","h","ref","innerHTML","appendChild","childNodes","node","nodeType","Node","TEXT_NODE","replace","_","attributes","attr","value","properties","Set","add","proto","getPrototypeOf","HTMLElement","prototype","prop","startsWith","excludedProps","has","error","message","parseColumns","newItems","parse","e","parseData","handleParsedChange","componentWillLoad","render","headerGroups","rows","Host","class","get","colSpan"],"sources":["src/components/nv-table/nv-table.scss?tag=nv-table","src/components/nv-table/nv-table.tsx"],"sourcesContent":["@mixin root-styles() {\n display: block;\n}\n\nnv-table {\n @include root-styles();\n\n .hidden {\n display: none;\n }\n\n table {\n border-collapse: collapse;\n border-color: inherit;\n text-indent: 0;\n width: 100%;\n }\n th {\n text-align: left;\n border-bottom: 1px solid var(--components-datagrid-header-border);\n height: var(--spacing-12);\n padding: var(--spacing-3) var(--spacing-4);\n font-size: var(--font-size-md);\n font-weight: 700;\n color: var(--components-datagrid-header-text);\n }\n td {\n border-bottom: 1px solid var(--components-datagrid-body-border);\n height: var(--spacing-12);\n max-height: var(--spacing-14);\n padding: var(--spacing-2) var(--spacing-4);\n font-size: var(--font-size-md);\n font-weight: 400;\n color: var(--components-datagrid-body-text);\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n tbody > tr:hover {\n background: var(--color-interaction-container-neutral-background-hover);\n }\n}\n\n// https://tailwindcss.com/docs/table-layout","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport {\n Component,\n Host,\n Prop,\n State,\n h,\n Element,\n Watch,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport { ColumnConfig } from '../../interfaces/ColumnConfig';\nimport { deepCopyElement, excludedProps } from '../../utils/dom.utils';\n\n/**\n * Helper interface to define the table structure\n */\ninterface Table {\n /**\n * Configuration of the columns of the table\n */\n columns: ColumnConfig[];\n\n /**\n * Data to be displayed in the table\n */\n data: any[];\n}\n\n/**\n * @slot default - Slot for the composed table columns\n * @slot before - Use this slot to insert HTML before the table.\n * @slot after - Use this slot to insert HTML after the table.\n *\n * @deprecated [EXPERIMENTAL]\n * @experimental - This component is used as a base for the nv-datagrid component. Do not use it directly.\n */\n@Component({\n tag: 'nv-table',\n styleUrl: 'nv-table.scss',\n shadow: false,\n})\nexport class NvTable {\n @Element() el: HTMLNvTableElement;\n\n private readonly templateCache = new Map<string, Element>();\n private readonly headerTemplateCache = new Map<string, Element>();\n\n /****************************************************************************/\n //#region STATES\n\n @State()\n parsedColumns: ColumnConfig[] = [];\n\n @State()\n parsedData: any[] = [];\n\n @State()\n private table: Table = null;\n\n //#endregion STATES\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * Data to be displayed in the table\n */\n @Prop({ reflect: true })\n readonly data: any[] = [];\n\n /**\n * Configuration of the columns of the table\n */\n @Prop({ reflect: true })\n readonly columnsConfig: ColumnConfig[] = [];\n\n /**\n * Data to be displayed in the table\n */\n @Prop({ reflect: true })\n readonly dataJson?: string;\n\n /**\n * Configuration of the columns of the table\n */\n @Prop({ reflect: true })\n readonly columnsConfigJson?: string;\n\n /**\n * Fallback value to be displayed when data is not available\n */\n @Prop({ reflect: true })\n readonly fallbackValue: string = 'N/A';\n\n /**\n * Message to be displayed when no data is available\n */\n @Prop({ reflect: true })\n readonly noDataMessage: string = 'No data available';\n\n /**\n * The message to display when there are no columns or data available.\n * @default 'No data or columns available to display.'\n */\n @Prop({ reflect: true })\n readonly noColumnsNoDataMessage: string =\n 'No data or columns available to display.';\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region METHODS\n\n /**\n * Caches templates for cells and headers upfront to improve performance.\n */\n private cacheTemplates() {\n const columns = Array.from(this.el.querySelectorAll('nv-tablecolumn'));\n\n columns.forEach((col: HTMLNvTablecolumnElement) => {\n const key = col.name;\n const cellSlot = col.querySelector('[slot=\"cell\"]');\n\n if (cellSlot) {\n const element = deepCopyElement(cellSlot as HTMLElement);\n this.templateCache.set(key, element);\n }\n\n const headerSlot = col.querySelector('[slot=\"header\"]');\n\n if (headerSlot) {\n const element = deepCopyElement(headerSlot as HTMLElement);\n this.headerTemplateCache.set(key, element);\n } else {\n const header = col.header;\n\n if (header) {\n const headerDiv = document.createElement('div');\n headerDiv.textContent = header;\n this.headerTemplateCache.set(key, headerDiv);\n }\n }\n });\n }\n\n private parseDataAndColumns() {\n if (this.dataJson) {\n this.parseJsonData(this.dataJson);\n } else if (this.data && this.data.length > 0) {\n this.parseDataArray(this.data, this.parsedData);\n }\n\n if (this.columnsConfigJson) {\n this.parseJsonColumns(this.columnsConfigJson, this.parsedColumns);\n } else if (this.columnsConfig && this.columnsConfig.length > 0) {\n this.parseColumnsArray(this.columnsConfig, this.parsedColumns);\n } else if (this.headerTemplateCache.size > 0) {\n const headerKeys = Array.from(this.headerTemplateCache.keys());\n const arrayColumnsConfig = headerKeys.map<ColumnConfig>(key => ({\n ...{}, // Ensure no prototype inheritance\n name: key,\n header: key ? key.charAt(0).toUpperCase() + key.slice(1) : '',\n }));\n\n this.parseColumnsArray(arrayColumnsConfig, this.parsedColumns);\n } else if (this.parsedData.length > 0) {\n const firstRow = this.parsedData[0];\n const arrayColumnsConfig = Object.keys(firstRow).map<ColumnConfig>(\n key => ({\n name: key,\n header: key.charAt(0).toUpperCase() + key.slice(1),\n }),\n );\n\n this.parseColumnsArray(arrayColumnsConfig, this.parsedColumns);\n }\n }\n\n private deepEqual(a: any, b: any): boolean {\n return JSON.stringify(a) === JSON.stringify(b);\n }\n\n /**\n * Parses the data array and sets the state accordingly\n * @param {any[]} newValue - New value of the data array\n * @param {any[]} oldValue - Old value of the data array\n * @returns {void}\n */\n private parseDataArray(newValue: any[], oldValue: any[]) {\n // Ensure both are arrays for proper comparison\n const safeNewValue = Array.isArray(newValue) ? newValue : [];\n const safeOldValue = Array.isArray(oldValue) ? oldValue : [];\n\n if (this.deepEqual(safeNewValue, safeOldValue)) {\n return; // Deep comparison\n }\n\n this.parsedData = Array.isArray(newValue) ? newValue : [];\n }\n\n /**\n * Parses the columns array and sets the state accordingly\n * @param {ColumnConfig[]} newValue - New value of the columns array\n * @param {ColumnConfig[]} oldValue - Old value of the columns array\n * @returns {void}\n */\n private parseColumnsArray(\n newValue: ColumnConfig[] | null | undefined,\n oldValue: ColumnConfig[] | null | undefined,\n ) {\n // Ensure both are arrays for proper comparison\n const safeNewValue = Array.isArray(newValue) ? newValue : [];\n const safeOldValue = Array.isArray(oldValue) ? oldValue : [];\n\n // Use a proper deep comparison function (e.g., Lodash's isEqual)\n if (this.deepEqual(safeNewValue, safeOldValue)) {\n return;\n }\n\n // Assign only after confirming changes\n this.parsedColumns = safeNewValue;\n }\n\n private initializeTable() {\n // Clear the previous table instance (if any)\n this.table = null;\n\n if (this.parsedColumns.length > 0) {\n this.table = {\n columns: this.parsedColumns,\n data: this.getTableData(),\n };\n } else {\n this.table = null;\n }\n }\n\n private getTableData(): any[] {\n if (\n this.parsedData &&\n Array.isArray(this.parsedData) &&\n this.parsedData.length > 0\n ) {\n return [...this.parsedData];\n } else {\n return [];\n }\n }\n\n // Helper function to get nested property value\n private replaceKeyWithValue(obj: any, path: string) {\n return (\n path\n .split('.')\n .reduce(\n (acc, key) => (acc && acc[key] !== undefined ? acc[key] : undefined),\n obj,\n ) ?? this.fallbackValue\n );\n }\n\n private renderTemplate(template: Element | undefined, row: any) {\n if (!template) {\n return null;\n }\n\n // Handle <template> elements correctly\n const templateContent =\n template instanceof HTMLTemplateElement ? template.content : template;\n const element = deepCopyElement(templateContent as HTMLElement);\n\n // Replace placeholders in text content, attributes, and properties\n element.querySelectorAll('*').forEach(el => {\n // Replace placeholders in text content\n this.replacePlaceholdersTextContent(el, row);\n\n // Replace placeholders in attributes\n this.replacePlaceholdersAttributes(el, row);\n\n // Replace placeholders in properties\n this.replacePlaceholdersProperties(el, row);\n });\n\n // Handle `data-bind-event`\n element.querySelectorAll('[data-bind-event]').forEach(el => {\n const bindEvent = el.getAttribute('data-bind-event') || '';\n const splitted = bindEvent.split(':');\n\n if (!bindEvent.includes(':') || splitted.length < 2) {\n console.warn('Invalid data-bind-event format:', bindEvent);\n return;\n }\n\n const eventType = splitted[0];\n const keyAction = splitted[1];\n const details = splitted.length > 2 ? splitted[2] : null;\n\n el.addEventListener(eventType, () => {\n const keys = details?.split(',') ?? [];\n\n // Convert keys into a single object instead of an array of objects\n const keyValue = keys.reduce((acc, key) => {\n acc[key] = row?.[key];\n return acc;\n }, {} as Record<string, any>);\n\n const action = { keyAction, details: keyValue };\n\n this.action.emit(action);\n });\n });\n\n // Ensure Web Components are properly connected\n setTimeout(() => {\n element.querySelectorAll('*').forEach(child => {\n if (typeof (child as any).connectedCallback === 'function') {\n (child as any).connectedCallback();\n }\n });\n }, 0);\n\n return (\n <div\n ref={el => {\n if (el) {\n el.innerHTML = ''; // Remove existing content\n el.appendChild(element); // Append new element\n }\n }}\n ></div>\n );\n }\n\n private replacePlaceholdersTextContent(element: Element, row: any) {\n // ✅ Replace placeholders in text content\n element.childNodes.forEach(node => {\n if (node.nodeType === Node.TEXT_NODE) {\n node.textContent = node.textContent.replace(/__([\\w.]+)__/g, (_, key) =>\n this.replaceKeyWithValue(row, key),\n );\n }\n });\n }\n\n private replacePlaceholdersAttributes(element: Element, row: any) {\n // ✅ Replace placeholders in attributes\n Array.from(element.attributes).forEach(attr => {\n if (attr.value.includes('__')) {\n attr.value = attr.value.replace(/__([\\w.]+)__/g, (_, key) =>\n this.replaceKeyWithValue(row, key),\n );\n }\n });\n }\n\n private replacePlaceholdersProperties(element: Element, row: any) {\n // ✅ Dynamically extract relevant properties\n const properties = new Set<string>();\n\n // Collect only own enumerable properties\n Object.keys(element).forEach(key => properties.add(key));\n\n // Collect inherited properties from prototypes (HTMLElement -> Element -> Node)\n let proto = Object.getPrototypeOf(element);\n while (proto && proto !== HTMLElement.prototype) {\n Object.keys(proto).forEach(key => properties.add(key));\n proto = Object.getPrototypeOf(proto);\n }\n\n // ✅ Filter and copy only non-function properties and exclude irrelevant ones\n properties.forEach(prop => {\n if (\n typeof (element as any)[prop] !== 'function' && // Ignore methods\n !prop.startsWith('on') && // Ignore event listeners (onclick, oninput, etc.)\n !excludedProps.has(prop) // 🚨 Prevent text duplication and irrelevant props\n ) {\n try {\n const value = element[prop];\n\n // ✅ Replace placeholders only if the value is a string\n if (typeof value === 'string' && value.includes('__')) {\n element[prop] = value.replace(/__([\\w.]+)__/g, (_, key: string) =>\n this.replaceKeyWithValue(row, key),\n ) as any; // ✅ TypeScript safe\n }\n } catch (error) {\n console.warn(`Could not assign property ${prop}:`, error.message);\n }\n }\n });\n }\n\n //#endregion METHODS\n /****************************************************************************/\n //#region WATCHERS\n\n @Watch('columnsConfig')\n parseColumns(newValue: ColumnConfig[], oldValue: ColumnConfig[]) {\n this.parseColumnsArray(newValue, oldValue);\n }\n\n @Watch('columnsConfigJson')\n parseJsonColumns(newValue: string | undefined, oldValue: ColumnConfig[]) {\n try {\n const newItems = newValue ? JSON.parse(newValue) : [];\n\n this.parseColumnsArray(newItems, oldValue);\n } catch (e) {\n console.error('Invalid JSON format for columnsConfigJson:', e.message);\n this.parsedColumns = [];\n }\n }\n\n @Watch('data')\n parseData(newValue: any[], oldValue: any[]) {\n this.parseDataArray(newValue, oldValue);\n }\n\n @Watch('dataJson')\n parseJsonData(newValue: string | undefined) {\n try {\n const newItems = newValue ? JSON.parse(newValue) : [];\n\n this.parseDataArray(newItems, this.parsedData);\n } catch (e) {\n console.error('Invalid JSON format for dataJson:', e.message);\n this.parsedData = [];\n }\n }\n\n @Watch('parsedColumns')\n @Watch('parsedData')\n handleParsedChange() {\n this.initializeTable();\n }\n\n //#endregion WATCHERS\n /****************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n this.cacheTemplates();\n\n this.parseDataAndColumns();\n }\n\n //#endregion LIFECYCLE\n /****************************************************************************/\n //#region EVENTS\n\n @Event()\n action: EventEmitter<{\n /**\n * Key action to be performed\n */\n keyAction: string;\n\n /**\n * Details of the action to be performed\n */\n details: any;\n }>;\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region RENDER\n\n render() {\n const headerGroups =\n !this.table || this.table === undefined || this.parsedColumns.length === 0\n ? []\n : this.table.columns;\n\n const rows =\n !this.table || this.table === undefined || this.parsedData.length === 0\n ? []\n : this.table.data;\n\n return (\n <Host>\n <div class=\"hidden\">\n <slot></slot>\n </div>\n\n <slot name=\"before\"></slot>\n\n {this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (\n <div class=\"no-data\">{this.noColumnsNoDataMessage}</div>\n ) : (\n <table class=\"table\">\n {this.parsedColumns.length > 0 && headerGroups.length > 0 && (\n <thead class=\"table-header\">\n <tr>\n {headerGroups &&\n headerGroups.map(col => {\n return (\n <th key={col.name}>\n {this.renderTemplate(\n this.headerTemplateCache.get(col.name),\n {},\n ) || col.header}\n </th>\n );\n })}\n </tr>\n </thead>\n )}\n <tbody class=\"table-body\">\n {!rows || rows.length === 0 ? (\n <tr>\n <td colSpan={headerGroups.length || 12} class=\"no-data\">\n {this.noDataMessage}\n </td>\n </tr>\n ) : (\n rows.map(row => (\n <tr key={JSON.stringify(row)}>\n {headerGroups.map(col => (\n <td>\n {this.renderTemplate(\n this.templateCache.get(col.name),\n row,\n ) ||\n (row[col.name] ?? this.fallbackValue)}\n </td>\n ))}\n </tr>\n ))\n )}\n </tbody>\n </table>\n )}\n\n <slot name=\"after\"></slot>\n </Host>\n );\n }\n // #endregion RENDER\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
export declare class NvTablecolumn {
|
|
2
|
-
/****************************************************************************/
|
|
3
|
-
/**
|
|
4
|
-
* Name of the column and data accessor
|
|
5
|
-
*/
|
|
6
|
-
readonly name: string;
|
|
7
|
-
/**
|
|
8
|
-
* Header of the column to be displayed
|
|
9
|
-
*/
|
|
10
|
-
readonly header?: string;
|
|
11
|
-
/****************************************************************************/
|
|
12
|
-
render(): any;
|
|
13
|
-
}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|