@nova-design-system/nova-webcomponents 3.0.0-beta.30 → 3.0.0-beta.31
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/blazor-docs.json +944 -1609
- package/dist/cjs/{app-globals-d8cbb987.js → app-globals-69764290.js} +2 -2
- package/dist/cjs/{app-globals-d8cbb987.js.map → app-globals-69764290.js.map} +1 -1
- package/dist/cjs/{index-c50face0.js → index-72b8a9ad.js} +856 -497
- package/dist/cjs/index-72b8a9ad.js.map +1 -0
- package/dist/cjs/loader.cjs.js +3 -3
- package/dist/cjs/native.cjs.js +4 -4
- package/dist/cjs/native.cjs.js.map +1 -1
- package/dist/cjs/nv-alert.cjs.entry.js +22 -9
- package/dist/cjs/nv-alert.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-avatar.cjs.entry.js +8 -11
- package/dist/cjs/nv-avatar.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-badge.cjs.entry.js +145 -0
- package/dist/cjs/nv-badge.cjs.entry.js.map +1 -0
- package/dist/cjs/nv-base.cjs.entry.js +1 -1
- package/dist/cjs/nv-button.cjs.entry.js +40 -8
- package/dist/cjs/nv-button.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-col.cjs.entry.js +1 -2
- package/dist/cjs/nv-col.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-datagrid.cjs.entry.js +31 -5
- package/dist/cjs/nv-datagrid.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-datagridbody.cjs.entry.js +1 -1
- package/dist/cjs/nv-datagridcolumn.cjs.entry.js +1 -3
- package/dist/cjs/nv-datagridcolumn.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-datagriddatacell.cjs.entry.js +1 -2
- package/dist/cjs/nv-datagriddatacell.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-datagridhead.cjs.entry.js +1 -1
- package/dist/cjs/nv-datagridrow.cjs.entry.js +1 -1
- package/dist/cjs/nv-fieldcheckbox.cjs.entry.js +40 -9
- package/dist/cjs/nv-fieldcheckbox.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fielddropdown.cjs.entry.js +59 -20
- package/dist/cjs/nv-fielddropdown.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fielddropdownitem.cjs.entry.js +13 -7
- package/dist/cjs/nv-fielddropdownitem.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fieldnumber.cjs.entry.js +48 -22
- package/dist/cjs/nv-fieldnumber.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fieldpassword.cjs.entry.js +65 -24
- package/dist/cjs/nv-fieldpassword.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fieldradio.cjs.entry.js +29 -11
- package/dist/cjs/nv-fieldradio.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fieldselect.cjs.entry.js +65 -24
- package/dist/cjs/nv-fieldselect.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fieldtext.cjs.entry.js +55 -25
- package/dist/cjs/nv-fieldtext.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fieldtextarea.cjs.entry.js +61 -23
- package/dist/cjs/nv-fieldtextarea.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fieldtoggle.cjs.entry.js +21 -8
- package/dist/cjs/nv-fieldtoggle.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-icon.cjs.entry.js +5 -10
- package/dist/cjs/nv-icon.cjs.entry.js.map +1 -1
- package/dist/cjs/{nv-iconbutton_2.cjs.entry.js → nv-iconbutton.cjs.entry.js} +44 -31
- package/dist/cjs/nv-iconbutton.cjs.entry.js.map +1 -0
- package/dist/cjs/nv-loader.cjs.entry.js +35 -0
- package/dist/cjs/nv-loader.cjs.entry.js.map +1 -0
- package/dist/cjs/nv-menu.cjs.entry.js +21 -2
- package/dist/cjs/nv-menu.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-menuitem.cjs.entry.js +7 -3
- package/dist/cjs/nv-menuitem.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-popover.cjs.entry.js +49 -13
- package/dist/cjs/nv-popover.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-row.cjs.entry.js +2 -2
- package/dist/cjs/nv-stack.cjs.entry.js +8 -6
- package/dist/cjs/nv-stack.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-table.cjs.entry.js +28 -7
- package/dist/cjs/nv-table.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-tablebody.cjs.entry.js +2 -2
- package/dist/cjs/nv-tablecolumn.cjs.entry.js +16 -5
- package/dist/cjs/nv-tablecolumn.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-tabledatacell.cjs.entry.js +18 -3
- package/dist/cjs/nv-tabledatacell.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-tablehead.cjs.entry.js +2 -2
- package/dist/cjs/nv-tablerow.cjs.entry.js +2 -2
- package/dist/cjs/nv-tooltip.cjs.entry.js +12 -3
- package/dist/cjs/nv-tooltip.cjs.entry.js.map +1 -1
- package/dist/collection/collection-manifest.json +1 -3
- package/dist/collection/components/nv-alert/nv-alert.js +37 -8
- package/dist/collection/components/nv-alert/nv-alert.js.map +1 -1
- package/dist/collection/components/nv-avatar/nv-avatar.js +31 -10
- package/dist/collection/components/nv-avatar/nv-avatar.js.map +1 -1
- package/dist/collection/components/nv-badge/nv-badge.css +20 -20
- package/dist/collection/components/nv-badge/nv-badge.js +54 -10
- package/dist/collection/components/nv-badge/nv-badge.js.map +1 -1
- package/dist/collection/components/nv-button/nv-button.js +53 -7
- package/dist/collection/components/nv-button/nv-button.js.map +1 -1
- package/dist/collection/components/nv-col/nv-col.js +2 -3
- package/dist/collection/components/nv-col/nv-col.js.map +1 -1
- package/dist/collection/components/nv-datagrid/nv-datagrid.js +42 -4
- package/dist/collection/components/nv-datagrid/nv-datagrid.js.map +1 -1
- package/dist/collection/components/nv-datagridcolumn/nv-datagridcolumn.js +4 -4
- package/dist/collection/components/nv-datagridcolumn/nv-datagridcolumn.js.map +1 -1
- package/dist/collection/components/nv-datagriddatacell/nv-datagriddatacell.js +2 -3
- package/dist/collection/components/nv-datagriddatacell/nv-datagriddatacell.js.map +1 -1
- package/dist/collection/components/nv-fieldcheckbox/nv-fieldcheckbox.js +73 -8
- package/dist/collection/components/nv-fieldcheckbox/nv-fieldcheckbox.js.map +1 -1
- package/dist/collection/components/nv-fielddropdown/nv-fielddropdown.css +17 -6
- package/dist/collection/components/nv-fielddropdown/nv-fielddropdown.js +87 -18
- package/dist/collection/components/nv-fielddropdown/nv-fielddropdown.js.map +1 -1
- package/dist/collection/components/nv-fielddropdownitem/nv-fielddropdownitem.css +9 -17
- package/dist/collection/components/nv-fielddropdownitem/nv-fielddropdownitem.js +19 -5
- package/dist/collection/components/nv-fielddropdownitem/nv-fielddropdownitem.js.map +1 -1
- package/dist/collection/components/nv-fieldnumber/nv-fieldnumber.css +1 -1
- package/dist/collection/components/nv-fieldnumber/nv-fieldnumber.js +80 -20
- package/dist/collection/components/nv-fieldnumber/nv-fieldnumber.js.map +1 -1
- package/dist/collection/components/nv-fieldpassword/nv-fieldpassword.js +102 -23
- package/dist/collection/components/nv-fieldpassword/nv-fieldpassword.js.map +1 -1
- package/dist/collection/components/nv-fieldradio/nv-fieldradio.js +52 -10
- package/dist/collection/components/nv-fieldradio/nv-fieldradio.js.map +1 -1
- package/dist/collection/components/nv-fieldselect/nv-fieldselect.css +1 -1
- package/dist/collection/components/nv-fieldselect/nv-fieldselect.js +93 -22
- package/dist/collection/components/nv-fieldselect/nv-fieldselect.js.map +1 -1
- package/dist/collection/components/nv-fieldtext/nv-fieldtext.js +96 -24
- package/dist/collection/components/nv-fieldtext/nv-fieldtext.js.map +1 -1
- package/dist/collection/components/nv-fieldtextarea/nv-fieldtextarea.js +101 -25
- package/dist/collection/components/nv-fieldtextarea/nv-fieldtextarea.js.map +1 -1
- package/dist/collection/components/nv-fieldtoggle/nv-fieldtoggle.js +40 -7
- package/dist/collection/components/nv-fieldtoggle/nv-fieldtoggle.js.map +1 -1
- package/dist/collection/components/nv-icon/nv-icon.js +20 -9
- package/dist/collection/components/nv-icon/nv-icon.js.map +1 -1
- package/dist/collection/components/nv-iconbutton/nv-iconbutton.js +58 -9
- package/dist/collection/components/nv-iconbutton/nv-iconbutton.js.map +1 -1
- package/dist/collection/components/nv-loader/nv-loader.js +12 -2
- package/dist/collection/components/nv-loader/nv-loader.js.map +1 -1
- package/dist/collection/components/nv-menu/nv-menu.js +28 -1
- package/dist/collection/components/nv-menu/nv-menu.js.map +1 -1
- package/dist/collection/components/nv-menuitem/nv-menuitem.js +14 -2
- package/dist/collection/components/nv-menuitem/nv-menuitem.js.map +1 -1
- package/dist/collection/components/nv-popover/nv-popover.js +72 -14
- package/dist/collection/components/nv-popover/nv-popover.js.map +1 -1
- package/dist/collection/components/nv-row/nv-row.js +1 -1
- package/dist/collection/components/nv-stack/nv-stack.js +17 -5
- package/dist/collection/components/nv-stack/nv-stack.js.map +1 -1
- package/dist/collection/components/nv-table/nv-table.js +39 -6
- package/dist/collection/components/nv-table/nv-table.js.map +1 -1
- package/dist/collection/components/nv-tablebody/nv-tablebody.js +1 -1
- package/dist/collection/components/nv-tablecolumn/nv-tablecolumn.js +25 -4
- package/dist/collection/components/nv-tablecolumn/nv-tablecolumn.js.map +1 -1
- package/dist/collection/components/nv-tabledatacell/nv-tabledatacell.js +23 -2
- package/dist/collection/components/nv-tabledatacell/nv-tabledatacell.js.map +1 -1
- package/dist/collection/components/nv-tablehead/nv-tablehead.js +1 -1
- package/dist/collection/components/nv-tablerow/nv-tablerow.js +1 -1
- package/dist/collection/components/nv-tooltip/nv-tooltip.js +17 -2
- package/dist/collection/components/nv-tooltip/nv-tooltip.js.map +1 -1
- package/dist/components/index.js +3 -3
- package/dist/components/nv-alert.js +23 -10
- package/dist/components/nv-alert.js.map +1 -1
- package/dist/components/nv-avatar.js +9 -12
- package/dist/components/nv-avatar.js.map +1 -1
- package/dist/components/nv-badge.js +173 -1
- package/dist/components/nv-badge.js.map +1 -1
- package/dist/components/nv-base.js +1 -1
- package/dist/components/nv-button.js +41 -9
- package/dist/components/nv-button.js.map +1 -1
- package/dist/components/nv-col.js +1 -2
- package/dist/components/nv-col.js.map +1 -1
- package/dist/components/nv-datagrid.js +31 -5
- package/dist/components/nv-datagrid.js.map +1 -1
- package/dist/components/nv-datagridbody.js +1 -1
- package/dist/components/nv-datagridcolumn.js +1 -3
- package/dist/components/nv-datagridcolumn.js.map +1 -1
- package/dist/components/nv-datagriddatacell.js +1 -2
- package/dist/components/nv-datagriddatacell.js.map +1 -1
- package/dist/components/nv-datagridhead.js +1 -1
- package/dist/components/nv-datagridrow.js +1 -1
- package/dist/components/nv-fieldcheckbox.js +152 -1
- package/dist/components/nv-fieldcheckbox.js.map +1 -1
- package/dist/components/nv-fielddropdown.js +64 -25
- package/dist/components/nv-fielddropdown.js.map +1 -1
- package/dist/components/nv-fielddropdownitem.js +1 -1
- package/dist/components/nv-fieldnumber.js +49 -23
- package/dist/components/nv-fieldnumber.js.map +1 -1
- package/dist/components/nv-fieldpassword.js +68 -27
- package/dist/components/nv-fieldpassword.js.map +1 -1
- package/dist/components/nv-fieldradio.js +29 -11
- package/dist/components/nv-fieldradio.js.map +1 -1
- package/dist/components/nv-fieldselect.js +66 -25
- package/dist/components/nv-fieldselect.js.map +1 -1
- package/dist/components/nv-fieldtext.js +56 -26
- package/dist/components/nv-fieldtext.js.map +1 -1
- package/dist/components/nv-fieldtextarea.js +62 -24
- package/dist/components/nv-fieldtextarea.js.map +1 -1
- package/dist/components/nv-fieldtoggle.js +21 -8
- package/dist/components/nv-fieldtoggle.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 +22 -3
- package/dist/components/nv-menu.js.map +1 -1
- package/dist/components/nv-menuitem.js +8 -4
- package/dist/components/nv-menuitem.js.map +1 -1
- package/dist/components/nv-popover.js +1 -1
- package/dist/components/nv-row.js +2 -2
- package/dist/components/nv-stack.js +8 -6
- package/dist/components/nv-stack.js.map +1 -1
- package/dist/components/nv-table.js +28 -7
- package/dist/components/nv-table.js.map +1 -1
- package/dist/components/nv-tablebody.js +2 -2
- package/dist/components/nv-tablecolumn.js +16 -5
- package/dist/components/nv-tablecolumn.js.map +1 -1
- package/dist/components/nv-tabledatacell.js +18 -3
- package/dist/components/nv-tabledatacell.js.map +1 -1
- package/dist/components/nv-tablehead.js +2 -2
- package/dist/components/nv-tablerow.js +2 -2
- package/dist/components/nv-tooltip.js +13 -4
- package/dist/components/nv-tooltip.js.map +1 -1
- package/dist/components/{p-d506ae63.js → p-0caa4741.js} +836 -491
- package/dist/components/p-0caa4741.js.map +1 -0
- package/dist/components/{p-d5dd3def.js → p-1fa35ae5.js} +51 -15
- package/dist/components/p-1fa35ae5.js.map +1 -0
- package/dist/components/{p-d70df149.js → p-39e93e5b.js} +6 -11
- package/dist/components/p-39e93e5b.js.map +1 -0
- package/dist/components/{p-a1aa8970.js → p-3ef4ded9.js} +10 -4
- package/dist/components/p-3ef4ded9.js.map +1 -0
- package/dist/components/{p-ae6a0d80.js → p-c08a278d.js} +207 -172
- package/dist/components/p-c08a278d.js.map +1 -0
- package/dist/components/{p-b12abc99.js → p-ca5c171f.js} +15 -9
- package/dist/components/p-ca5c171f.js.map +1 -0
- package/dist/components/{p-8bec002e.js → p-f0d5586a.js} +46 -13
- package/dist/components/p-f0d5586a.js.map +1 -0
- package/dist/docs.d.ts +8 -0
- package/dist/docs.json +941 -1590
- package/dist/esm/{app-globals-eea8674a.js → app-globals-c5484a00.js} +2 -2
- package/dist/esm/{app-globals-eea8674a.js.map → app-globals-c5484a00.js.map} +1 -1
- package/dist/esm/{index-e7b35c14.js → index-b6f70e4a.js} +856 -497
- package/dist/esm/index-b6f70e4a.js.map +1 -0
- package/dist/esm/loader.js +4 -4
- package/dist/esm/native.js +5 -5
- package/dist/esm/native.js.map +1 -1
- package/dist/esm/nv-alert.entry.js +22 -9
- package/dist/esm/nv-alert.entry.js.map +1 -1
- package/dist/esm/nv-avatar.entry.js +8 -11
- package/dist/esm/nv-avatar.entry.js.map +1 -1
- package/dist/esm/nv-badge.entry.js +141 -0
- package/dist/esm/nv-badge.entry.js.map +1 -0
- package/dist/esm/nv-base.entry.js +1 -1
- package/dist/esm/nv-button.entry.js +40 -8
- package/dist/esm/nv-button.entry.js.map +1 -1
- package/dist/esm/nv-col.entry.js +1 -2
- package/dist/esm/nv-col.entry.js.map +1 -1
- package/dist/esm/nv-datagrid.entry.js +31 -5
- package/dist/esm/nv-datagrid.entry.js.map +1 -1
- package/dist/esm/nv-datagridbody.entry.js +1 -1
- package/dist/esm/nv-datagridcolumn.entry.js +1 -3
- package/dist/esm/nv-datagridcolumn.entry.js.map +1 -1
- package/dist/esm/nv-datagriddatacell.entry.js +1 -2
- package/dist/esm/nv-datagriddatacell.entry.js.map +1 -1
- package/dist/esm/nv-datagridhead.entry.js +1 -1
- package/dist/esm/nv-datagridrow.entry.js +1 -1
- package/dist/esm/nv-fieldcheckbox.entry.js +40 -9
- package/dist/esm/nv-fieldcheckbox.entry.js.map +1 -1
- package/dist/esm/nv-fielddropdown.entry.js +59 -20
- package/dist/esm/nv-fielddropdown.entry.js.map +1 -1
- package/dist/esm/nv-fielddropdownitem.entry.js +13 -7
- package/dist/esm/nv-fielddropdownitem.entry.js.map +1 -1
- package/dist/esm/nv-fieldnumber.entry.js +48 -22
- package/dist/esm/nv-fieldnumber.entry.js.map +1 -1
- package/dist/esm/nv-fieldpassword.entry.js +65 -24
- package/dist/esm/nv-fieldpassword.entry.js.map +1 -1
- package/dist/esm/nv-fieldradio.entry.js +29 -11
- package/dist/esm/nv-fieldradio.entry.js.map +1 -1
- package/dist/esm/nv-fieldselect.entry.js +65 -24
- package/dist/esm/nv-fieldselect.entry.js.map +1 -1
- package/dist/esm/nv-fieldtext.entry.js +55 -25
- package/dist/esm/nv-fieldtext.entry.js.map +1 -1
- package/dist/esm/nv-fieldtextarea.entry.js +61 -23
- package/dist/esm/nv-fieldtextarea.entry.js.map +1 -1
- package/dist/esm/nv-fieldtoggle.entry.js +21 -8
- package/dist/esm/nv-fieldtoggle.entry.js.map +1 -1
- package/dist/esm/nv-icon.entry.js +5 -10
- package/dist/esm/nv-icon.entry.js.map +1 -1
- package/dist/esm/{nv-iconbutton_2.entry.js → nv-iconbutton.entry.js} +45 -31
- package/dist/esm/nv-iconbutton.entry.js.map +1 -0
- package/dist/esm/nv-loader.entry.js +31 -0
- package/dist/esm/nv-loader.entry.js.map +1 -0
- package/dist/esm/nv-menu.entry.js +21 -2
- package/dist/esm/nv-menu.entry.js.map +1 -1
- package/dist/esm/nv-menuitem.entry.js +7 -3
- package/dist/esm/nv-menuitem.entry.js.map +1 -1
- package/dist/esm/nv-popover.entry.js +49 -13
- package/dist/esm/nv-popover.entry.js.map +1 -1
- package/dist/esm/nv-row.entry.js +2 -2
- package/dist/esm/nv-stack.entry.js +8 -6
- package/dist/esm/nv-stack.entry.js.map +1 -1
- package/dist/esm/nv-table.entry.js +28 -7
- package/dist/esm/nv-table.entry.js.map +1 -1
- package/dist/esm/nv-tablebody.entry.js +2 -2
- package/dist/esm/nv-tablecolumn.entry.js +16 -5
- package/dist/esm/nv-tablecolumn.entry.js.map +1 -1
- package/dist/esm/nv-tabledatacell.entry.js +18 -3
- package/dist/esm/nv-tabledatacell.entry.js.map +1 -1
- package/dist/esm/nv-tablehead.entry.js +2 -2
- package/dist/esm/nv-tablerow.entry.js +2 -2
- package/dist/esm/nv-tooltip.entry.js +12 -3
- package/dist/esm/nv-tooltip.entry.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-01262eaf.entry.js +2 -0
- package/dist/native/p-01262eaf.entry.js.map +1 -0
- package/dist/native/p-0bf2007c.entry.js +2 -0
- package/dist/native/p-0bf2007c.entry.js.map +1 -0
- package/dist/native/{p-69ca8c88.entry.js → p-11faaf31.entry.js} +2 -2
- package/dist/native/p-11faaf31.entry.js.map +1 -0
- package/dist/native/p-17dba26d.entry.js +2 -0
- package/dist/native/{p-c8f36510.entry.js → p-2a6ca749.entry.js} +2 -2
- package/dist/native/p-2a6ca749.entry.js.map +1 -0
- package/dist/native/{p-91d30cd7.entry.js → p-31367928.entry.js} +2 -2
- package/dist/native/p-31367928.entry.js.map +1 -0
- package/dist/native/p-327fa1a0.entry.js +2 -0
- package/dist/native/{p-dbade286.entry.js → p-380bcc2b.entry.js} +2 -2
- package/dist/native/p-380bcc2b.entry.js.map +1 -0
- package/dist/native/p-47c78fe4.entry.js +2 -0
- package/dist/native/p-47c78fe4.entry.js.map +1 -0
- package/dist/native/{p-305951e4.entry.js → p-4a64f5b0.entry.js} +2 -2
- package/dist/native/p-4a64f5b0.entry.js.map +1 -0
- package/dist/native/{p-13070761.entry.js → p-50c31094.entry.js} +2 -2
- package/dist/native/p-50c31094.entry.js.map +1 -0
- package/dist/native/{p-a59ec107.entry.js → p-605f8b3d.entry.js} +2 -2
- package/dist/native/p-605f8b3d.entry.js.map +1 -0
- package/dist/native/p-64ae9a21.entry.js +2 -0
- package/dist/native/p-64ae9a21.entry.js.map +1 -0
- package/dist/native/{p-20c7fc4d.entry.js → p-6e8bcd5b.entry.js} +2 -2
- package/dist/native/p-6e8bcd5b.entry.js.map +1 -0
- package/dist/native/{p-92e3e334.entry.js → p-6eb50254.entry.js} +2 -2
- package/dist/native/p-6eb50254.entry.js.map +1 -0
- package/dist/native/p-6ef216c4.js +3 -0
- package/dist/native/p-6ef216c4.js.map +1 -0
- package/dist/native/{p-1aaee302.entry.js → p-7701e4cc.entry.js} +2 -2
- package/dist/native/p-7701e4cc.entry.js.map +1 -0
- package/dist/native/p-86947929.entry.js +2 -0
- package/dist/native/{p-982e474f.entry.js.map → p-86947929.entry.js.map} +1 -1
- package/dist/native/p-8f95f4fa.entry.js +2 -0
- package/dist/native/p-8f95f4fa.entry.js.map +1 -0
- package/dist/native/{p-12eaebd6.entry.js → p-919cf3ec.entry.js} +2 -2
- package/dist/native/p-919cf3ec.entry.js.map +1 -0
- package/dist/native/p-93eea6e1.entry.js +2 -0
- package/dist/native/{p-e842220b.entry.js.map → p-93eea6e1.entry.js.map} +1 -1
- package/dist/native/p-95714583.js +2 -0
- package/dist/native/p-9f89229b.entry.js +2 -0
- package/dist/native/{p-2fca31c0.entry.js.map → p-9f89229b.entry.js.map} +1 -1
- package/dist/native/p-9fe47948.entry.js +2 -0
- package/dist/native/p-9fe47948.entry.js.map +1 -0
- package/dist/native/{p-7b2d8b8c.entry.js → p-a89f5542.entry.js} +2 -2
- package/dist/native/p-a89f5542.entry.js.map +1 -0
- package/dist/native/p-afbc5259.entry.js +2 -0
- package/dist/native/p-afbc5259.entry.js.map +1 -0
- package/dist/native/p-b3ec71c9.entry.js +2 -0
- package/dist/native/p-bbe9a373.entry.js +2 -0
- package/dist/native/p-c2dfee1a.entry.js +2 -0
- package/dist/native/p-c5e3e234.entry.js +2 -0
- package/dist/native/p-c5e3e234.entry.js.map +1 -0
- package/dist/native/{p-36d5158c.entry.js → p-c85d031d.entry.js} +3 -3
- package/dist/native/p-c85d031d.entry.js.map +1 -0
- package/dist/native/{p-5b4bdbe2.entry.js → p-d4277c50.entry.js} +2 -2
- package/dist/native/p-d4277c50.entry.js.map +1 -0
- package/dist/native/p-dacd68ab.entry.js +2 -0
- package/dist/native/p-dacd68ab.entry.js.map +1 -0
- package/dist/native/p-de9d0b05.entry.js +2 -0
- package/dist/native/p-de9d0b05.entry.js.map +1 -0
- package/dist/native/{p-65ad60eb.entry.js → p-df6c9137.entry.js} +2 -2
- package/dist/native/p-df6c9137.entry.js.map +1 -0
- package/dist/native/p-e05b0c4a.entry.js +2 -0
- package/dist/native/p-e05b0c4a.entry.js.map +1 -0
- package/dist/native/{p-330c929d.entry.js → p-e71fc762.entry.js} +2 -2
- package/dist/native/p-ef7f605a.entry.js +2 -0
- package/dist/native/p-f2e31579.entry.js +2 -0
- package/dist/native/{p-671699bf.entry.js.map → p-f2e31579.entry.js.map} +1 -1
- package/dist/types/components/nv-fieldtextarea/nv-fieldtextarea.d.ts +2 -2
- package/dist/types/components.d.ts +8 -337
- package/dist/vscode-data.json +4 -328
- package/hydrate/index.js +1858 -2215
- package/hydrate/index.mjs +1858 -2215
- package/package.json +1 -1
- package/dist/cjs/index-c50face0.js.map +0 -1
- package/dist/cjs/nv-badge_2.cjs.entry.js +0 -159
- package/dist/cjs/nv-badge_2.cjs.entry.js.map +0 -1
- package/dist/cjs/nv-fieldmultiselect.cjs.entry.js +0 -1038
- package/dist/cjs/nv-fieldmultiselect.cjs.entry.js.map +0 -1
- package/dist/cjs/nv-iconbutton_2.cjs.entry.js.map +0 -1
- package/dist/collection/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.css +0 -12
- package/dist/collection/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.docs.js +0 -6
- package/dist/collection/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.docs.js.map +0 -1
- package/dist/collection/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.js +0 -171
- package/dist/collection/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.js.map +0 -1
- package/dist/collection/components/nv-fieldmultiselect/nv-fieldmultiselect.css +0 -201
- package/dist/collection/components/nv-fieldmultiselect/nv-fieldmultiselect.docs.js +0 -257
- package/dist/collection/components/nv-fieldmultiselect/nv-fieldmultiselect.docs.js.map +0 -1
- package/dist/collection/components/nv-fieldmultiselect/nv-fieldmultiselect.js +0 -1578
- package/dist/collection/components/nv-fieldmultiselect/nv-fieldmultiselect.js.map +0 -1
- package/dist/components/nv-fielddropdownitemcheck.d.ts +0 -11
- package/dist/components/nv-fielddropdownitemcheck.js +0 -8
- package/dist/components/nv-fielddropdownitemcheck.js.map +0 -1
- package/dist/components/nv-fieldmultiselect.d.ts +0 -11
- package/dist/components/nv-fieldmultiselect.js +0 -1129
- package/dist/components/nv-fieldmultiselect.js.map +0 -1
- package/dist/components/p-5ce661bd.js +0 -125
- package/dist/components/p-5ce661bd.js.map +0 -1
- package/dist/components/p-8bec002e.js.map +0 -1
- package/dist/components/p-a1aa8970.js.map +0 -1
- package/dist/components/p-a4802979.js +0 -151
- package/dist/components/p-a4802979.js.map +0 -1
- package/dist/components/p-ae6a0d80.js.map +0 -1
- package/dist/components/p-b12abc99.js.map +0 -1
- package/dist/components/p-d506ae63.js.map +0 -1
- package/dist/components/p-d5dd3def.js.map +0 -1
- package/dist/components/p-d70df149.js.map +0 -1
- package/dist/components/p-e4641c41.js +0 -72
- package/dist/components/p-e4641c41.js.map +0 -1
- package/dist/esm/index-e7b35c14.js.map +0 -1
- package/dist/esm/nv-badge_2.entry.js +0 -154
- package/dist/esm/nv-badge_2.entry.js.map +0 -1
- package/dist/esm/nv-fieldmultiselect.entry.js +0 -1034
- package/dist/esm/nv-fieldmultiselect.entry.js.map +0 -1
- package/dist/esm/nv-iconbutton_2.entry.js.map +0 -1
- package/dist/native/p-0fbb962b.entry.js +0 -2
- package/dist/native/p-0fbb962b.entry.js.map +0 -1
- package/dist/native/p-12eaebd6.entry.js.map +0 -1
- package/dist/native/p-13070761.entry.js.map +0 -1
- package/dist/native/p-1aaee302.entry.js.map +0 -1
- package/dist/native/p-1c689ec7.entry.js +0 -2
- package/dist/native/p-1c689ec7.entry.js.map +0 -1
- package/dist/native/p-20c7fc4d.entry.js.map +0 -1
- package/dist/native/p-2fca31c0.entry.js +0 -2
- package/dist/native/p-305951e4.entry.js.map +0 -1
- package/dist/native/p-306d1f04.entry.js +0 -2
- package/dist/native/p-306d1f04.entry.js.map +0 -1
- package/dist/native/p-36d5158c.entry.js.map +0 -1
- package/dist/native/p-39dbb15b.entry.js +0 -2
- package/dist/native/p-39dbb15b.entry.js.map +0 -1
- package/dist/native/p-3f912745.entry.js +0 -2
- package/dist/native/p-3f912745.entry.js.map +0 -1
- package/dist/native/p-4e351d8e.entry.js +0 -2
- package/dist/native/p-4e351d8e.entry.js.map +0 -1
- package/dist/native/p-589eb477.entry.js +0 -2
- package/dist/native/p-5b4bdbe2.entry.js.map +0 -1
- package/dist/native/p-65ad60eb.entry.js.map +0 -1
- package/dist/native/p-671699bf.entry.js +0 -2
- package/dist/native/p-69ca8c88.entry.js.map +0 -1
- package/dist/native/p-7a7b9b95.entry.js +0 -2
- package/dist/native/p-7b2d8b8c.entry.js.map +0 -1
- package/dist/native/p-7b3a4cbf.entry.js +0 -2
- package/dist/native/p-7b3a4cbf.entry.js.map +0 -1
- package/dist/native/p-91d30cd7.entry.js.map +0 -1
- package/dist/native/p-92e3e334.entry.js.map +0 -1
- package/dist/native/p-982e474f.entry.js +0 -2
- package/dist/native/p-a03df637.entry.js +0 -2
- package/dist/native/p-a03df637.entry.js.map +0 -1
- package/dist/native/p-a5582014.entry.js +0 -2
- package/dist/native/p-a5582014.entry.js.map +0 -1
- package/dist/native/p-a59ec107.entry.js.map +0 -1
- package/dist/native/p-a7a3c45f.entry.js +0 -2
- package/dist/native/p-a7be7540.entry.js +0 -2
- package/dist/native/p-a7be7540.entry.js.map +0 -1
- package/dist/native/p-a8c0fefa.entry.js +0 -2
- package/dist/native/p-a8c0fefa.entry.js.map +0 -1
- package/dist/native/p-b4aea326.js +0 -3
- package/dist/native/p-b4aea326.js.map +0 -1
- package/dist/native/p-c8f36510.entry.js.map +0 -1
- package/dist/native/p-d3d682a7.entry.js +0 -2
- package/dist/native/p-d4c0a1e0.entry.js +0 -2
- package/dist/native/p-dbade286.entry.js.map +0 -1
- package/dist/native/p-e842220b.entry.js +0 -2
- package/dist/native/p-eeb6a3dc.js +0 -2
- package/dist/native/p-f7b96c42.entry.js +0 -2
- package/dist/types/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.d.ts +0 -52
- package/dist/types/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.docs.d.ts +0 -4
- package/dist/types/components/nv-fieldmultiselect/nv-fieldmultiselect.d.ts +0 -405
- package/dist/types/components/nv-fieldmultiselect/nv-fieldmultiselect.docs.d.ts +0 -4
- /package/dist/native/{p-a7a3c45f.entry.js.map → p-17dba26d.entry.js.map} +0 -0
- /package/dist/native/{p-d4c0a1e0.entry.js.map → p-327fa1a0.entry.js.map} +0 -0
- /package/dist/native/{p-eeb6a3dc.js.map → p-95714583.js.map} +0 -0
- /package/dist/native/{p-589eb477.entry.js.map → p-b3ec71c9.entry.js.map} +0 -0
- /package/dist/native/{p-7a7b9b95.entry.js.map → p-bbe9a373.entry.js.map} +0 -0
- /package/dist/native/{p-d3d682a7.entry.js.map → p-c2dfee1a.entry.js.map} +0 -0
- /package/dist/native/{p-330c929d.entry.js.map → p-e71fc762.entry.js.map} +0 -0
- /package/dist/native/{p-f7b96c42.entry.js.map → p-ef7f605a.entry.js.map} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nv-fieldcheckbox.js","sourceRoot":"","sources":["../../../src/components/nv-fieldcheckbox/nv-fieldcheckbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Watch,\n Event,\n EventEmitter,\n Listen,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { type FieldLabelPlacement } from '../../utils/constants';\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 * @slot checked-icon - Content to be placed as the checked icon, will override the checkedIcon prop.\n * @slot indeterminate-icon - Content to be placed as the indeterminate icon, will override the indeterminateIcon prop.\n */\n@Component({\n tag: 'nv-fieldcheckbox',\n styleUrl: 'nv-fieldcheckbox.scss',\n shadow: false,\n})\nexport class NvFieldcheckbox {\n @Element() el!: HTMLNvFieldcheckboxElement;\n\n /****************************************************************************/\n //#region DEPRECATED\n\n /**\n * Message define a 'hint ' message for the Field.\n * @deprecated Use `description` instead.\n * */\n @Prop()\n readonly message?: string;\n\n /**\n * The text for the validation message.\n * @deprecated Use `errorDescription` instead.\n * */\n @Prop()\n readonly validation?: string;\n\n /**\n * When true, the label will be placed before the checkbox.\n * @deprecated Use `labelPlacement = end` instead.\n * */\n @Prop()\n readonly labelBefore?: boolean = false;\n\n componentWillRender() {\n if (this.message) {\n this.description = this.message;\n }\n\n if (this.labelBefore) {\n this.labelPlacement = 'before';\n }\n\n if (this.validation) {\n this.errorDescription = this.validation;\n }\n }\n\n //#endregion DEPRECATED\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * Sets the ID for the radio button’s input element and the for attribute of\n * the associated label. If no ID is provided, a random one will be\n * automatically generated to ensure unique identification, facilitating\n * proper label association and accessibility.\n */\n @Prop({ reflect: true })\n readonly inputId: string = uuidv4();\n\n /**\n * The name attribute for the checkbox input, used to reference the form data\n * after submission.\n */\n @Prop({ reflect: true })\n readonly name?: string;\n\n /**\n * The value attribute of the checkbox input, representing the value sent on\n * form submission when the checkbox is checked. When the form is submitted,\n * the data will consist of a name=value pair.\n */\n @Prop({ reflect: true })\n readonly value?: string;\n\n /**\n * The label displayed next to the checkbox.\n */\n @Prop({ reflect: true })\n readonly label?: string;\n\n /**\n * Determines the position of the label relative to the checkbox, either\n * 'start' (before) or 'end' (after).\n */\n @Prop({ reflect: true, mutable: true })\n labelPlacement: `${FieldLabelPlacement}`;\n\n /**\n * Hides the label visually while still keeping it available for screen\n * readers.\n */\n @Prop({ reflect: true })\n readonly hideLabel: boolean = false;\n\n /**\n * A description providing additional context or information about the\n * checkbox.\n */\n @Prop({ reflect: true, mutable: true })\n description?: string;\n\n /**\n * Signals that there is an error associated with the checkbox, which can\n * trigger visual cues.\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 checkbox.\n */\n @Prop({ reflect: true, mutable: true })\n errorDescription?: string;\n\n /**\n * Indicates whether the checkbox is checked or not.\n */\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /**\n * Indicates whether the checkbox is in an indeterminate state, typically used\n * for hierarchical checkboxes.\n */\n @Prop({ reflect: true, mutable: true })\n indeterminate: boolean = false;\n\n /**\n * Disables the checkbox, preventing user interaction.\n */\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /**\n * Sets the checkbox to read-only, preventing user changes but still allowing\n * focus and selection of text.\n */\n @Prop({ reflect: true })\n readonly readonly: boolean = false;\n\n /**\n * Marks the checkbox as required, indicating that it must be checked for\n * form submission.\n */\n @Prop({ reflect: true })\n readonly required: boolean = false;\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Emits when the checked state changes.\n * @bind checked\n */\n @Event()\n checkedChanged: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region WATCHERS\n\n /**\n * Watches for changes to the checked state and emits the new value.\n * @param {boolean} checked - The new value of the checked state.\n */\n @Watch('checked')\n onCheckedChanged(checked: boolean) {\n this.checkedChanged.emit(checked);\n }\n\n /**\n * Listens for the change event on the checkbox input element and updates the\n * checked state.\n * @param {Event} event - The change event.\n */\n @Listen('change')\n handleChange(event: Event) {\n const target = event.target as HTMLInputElement;\n\n if (target.type === 'checkbox' && target.id === this.inputId) {\n if (this.readonly || this.disabled) {\n event.preventDefault();\n return;\n }\n\n if (this.indeterminate) {\n this.indeterminate = false;\n }\n\n this.checked = target.checked;\n }\n }\n\n //#endregion WATCHERS\n /****************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n class={clsx(\n this.labelPlacement === 'before' && 'label-placement-before',\n this.error && 'error',\n )}\n >\n <div class=\"input-container\">\n <input\n type=\"checkbox\"\n id={this.inputId}\n name={this.name}\n autocomplete=\"off\"\n value={this.value}\n checked={Boolean(this.checked)}\n disabled={this.disabled || this.readonly}\n readonly={this.readonly && !this.required}\n required={this.required}\n indeterminate={this.indeterminate}\n ref={el => {\n if (el) {\n el.indeterminate = this.indeterminate;\n }\n }}\n />\n <span class=\"icon\">\n {this.checked && !this.indeterminate && (\n <slot name=\"checked-icon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n >\n <path\n d=\"M11.6667 3.5L5.25004 9.91667L2.33337 7\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </slot>\n )}\n {this.indeterminate && (\n <slot name=\"indeterminate-icon\">\n <svg\n class=\"indeterminate-svg\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n >\n <path\n d=\"M2.9165 7H11.0832\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </slot>\n )}\n </span>\n </div>\n\n <div class=\"text-container\">\n {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n <label\n htmlFor={this.inputId}\n class={clsx(this.hideLabel && 'visually-hidden')}\n >\n <slot name=\"label\">{this.label}</slot>\n </label>\n )}\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 </div>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"]}
|
|
1
|
+
{"version":3,"file":"nv-fieldcheckbox.js","sourceRoot":"","sources":["../../../src/components/nv-fieldcheckbox/nv-fieldcheckbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Watch,\n Event,\n EventEmitter,\n Listen,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { type FieldLabelPlacement } from '../../utils/constants';\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 * @slot checked-icon - Content to be placed as the checked icon, will override the checkedIcon prop.\n * @slot indeterminate-icon - Content to be placed as the indeterminate icon, will override the indeterminateIcon prop.\n */\n@Component({\n tag: 'nv-fieldcheckbox',\n styleUrl: 'nv-fieldcheckbox.scss',\n shadow: false,\n})\nexport class NvFieldcheckbox {\n @Element() el!: HTMLNvFieldcheckboxElement;\n\n /****************************************************************************/\n //#region DEPRECATED\n\n /**\n * Message define a 'hint ' message for the Field.\n * @deprecated Use `description` instead.\n * */\n @Prop()\n readonly message?: string;\n\n /**\n * The text for the validation message.\n * @deprecated Use `errorDescription` instead.\n * */\n @Prop()\n readonly validation?: string;\n\n /**\n * When true, the label will be placed before the checkbox.\n * @deprecated Use `labelPlacement = end` instead.\n * */\n @Prop()\n readonly labelBefore?: boolean = false;\n\n componentWillRender() {\n if (this.message) {\n this.description = this.message;\n }\n\n if (this.labelBefore) {\n this.labelPlacement = 'before';\n }\n\n if (this.validation) {\n this.errorDescription = this.validation;\n }\n }\n\n //#endregion DEPRECATED\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * Sets the ID for the radio button’s input element and the for attribute of\n * the associated label. If no ID is provided, a random one will be\n * automatically generated to ensure unique identification, facilitating\n * proper label association and accessibility.\n */\n @Prop({ reflect: true })\n readonly inputId: string = uuidv4();\n\n /**\n * The name attribute for the checkbox input, used to reference the form data\n * after submission.\n */\n @Prop({ reflect: true })\n readonly name?: string;\n\n /**\n * The value attribute of the checkbox input, representing the value sent on\n * form submission when the checkbox is checked. When the form is submitted,\n * the data will consist of a name=value pair.\n */\n @Prop({ reflect: true })\n readonly value?: string;\n\n /**\n * The label displayed next to the checkbox.\n */\n @Prop({ reflect: true })\n readonly label?: string;\n\n /**\n * Determines the position of the label relative to the checkbox, either\n * 'start' (before) or 'end' (after).\n */\n @Prop({ reflect: true, mutable: true })\n labelPlacement: `${FieldLabelPlacement}`;\n\n /**\n * Hides the label visually while still keeping it available for screen\n * readers.\n */\n @Prop({ reflect: true })\n readonly hideLabel: boolean = false;\n\n /**\n * A description providing additional context or information about the\n * checkbox.\n */\n @Prop({ reflect: true, mutable: true })\n description?: string;\n\n /**\n * Signals that there is an error associated with the checkbox, which can\n * trigger visual cues.\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 checkbox.\n */\n @Prop({ reflect: true, mutable: true })\n errorDescription?: string;\n\n /**\n * Indicates whether the checkbox is checked or not.\n */\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /**\n * Indicates whether the checkbox is in an indeterminate state, typically used\n * for hierarchical checkboxes.\n */\n @Prop({ reflect: true, mutable: true })\n indeterminate: boolean = false;\n\n /**\n * Disables the checkbox, preventing user interaction.\n */\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /**\n * Sets the checkbox to read-only, preventing user changes but still allowing\n * focus and selection of text.\n */\n @Prop({ reflect: true })\n readonly readonly: boolean = false;\n\n /**\n * Marks the checkbox as required, indicating that it must be checked for\n * form submission.\n */\n @Prop({ reflect: true })\n readonly required: boolean = false;\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Emits when the checked state changes.\n * @bind checked\n */\n @Event()\n checkedChanged: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region WATCHERS\n\n /**\n * Watches for changes to the checked state and emits the new value.\n * @param {boolean} checked - The new value of the checked state.\n */\n @Watch('checked')\n onCheckedChanged(checked: boolean) {\n this.checkedChanged.emit(checked);\n }\n\n /**\n * Listens for the change event on the checkbox input element and updates the\n * checked state.\n * @param {Event} event - The change event.\n */\n @Listen('change')\n handleChange(event: Event) {\n const target = event.target as HTMLInputElement;\n\n if (target.type === 'checkbox' && target.id === this.inputId) {\n if (this.readonly || this.disabled) {\n event.preventDefault();\n return;\n }\n\n if (this.indeterminate) {\n this.indeterminate = false;\n }\n\n this.checked = target.checked;\n }\n }\n\n //#endregion WATCHERS\n /****************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n class={clsx(\n this.labelPlacement === 'before' && 'label-placement-before',\n this.error && 'error',\n )}\n >\n <div class=\"input-container\">\n <input\n type=\"checkbox\"\n id={this.inputId}\n name={this.name}\n autocomplete=\"off\"\n value={this.value}\n checked={Boolean(this.checked)}\n disabled={this.disabled || this.readonly}\n readonly={this.readonly && !this.required}\n required={this.required}\n indeterminate={this.indeterminate}\n ref={el => {\n if (el) {\n el.indeterminate = this.indeterminate;\n }\n }}\n />\n <span class=\"icon\">\n {this.checked && !this.indeterminate && (\n <slot name=\"checked-icon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n >\n <path\n d=\"M11.6667 3.5L5.25004 9.91667L2.33337 7\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </slot>\n )}\n {this.indeterminate && (\n <slot name=\"indeterminate-icon\">\n <svg\n class=\"indeterminate-svg\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n >\n <path\n d=\"M2.9165 7H11.0832\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </slot>\n )}\n </span>\n </div>\n\n <div class=\"text-container\">\n {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n <label\n htmlFor={this.inputId}\n class={clsx(this.hideLabel && 'visually-hidden')}\n >\n <slot name=\"label\">{this.label}</slot>\n </label>\n )}\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 </div>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"]}
|
|
@@ -47,7 +47,23 @@ nv-fielddropdown label {
|
|
|
47
47
|
}
|
|
48
48
|
nv-fielddropdown nv-popover {
|
|
49
49
|
width: 100%;
|
|
50
|
-
|
|
50
|
+
}
|
|
51
|
+
nv-fielddropdown div[data-scope=popover] {
|
|
52
|
+
width: 100%;
|
|
53
|
+
padding: var(--list-custom-padding);
|
|
54
|
+
background-color: var(--components-list-custom-background);
|
|
55
|
+
border: 1px solid var(--components-list-custom-border);
|
|
56
|
+
}
|
|
57
|
+
nv-fielddropdown ul[slot=content] {
|
|
58
|
+
gap: var(--list-custom-gap-y);
|
|
59
|
+
display: flex;
|
|
60
|
+
flex-direction: column;
|
|
61
|
+
}
|
|
62
|
+
nv-fielddropdown hr {
|
|
63
|
+
border: none;
|
|
64
|
+
height: 1px;
|
|
65
|
+
background-color: var(--components-list-custom-separator);
|
|
66
|
+
margin: 0;
|
|
51
67
|
}
|
|
52
68
|
nv-fielddropdown .input-wrapper {
|
|
53
69
|
display: flex;
|
|
@@ -182,11 +198,6 @@ nv-fielddropdown .error-description {
|
|
|
182
198
|
line-height: var(--form-description-line-height);
|
|
183
199
|
color: var(--components-form-text-description-error);
|
|
184
200
|
}
|
|
185
|
-
nv-fielddropdown hr {
|
|
186
|
-
border: none;
|
|
187
|
-
border-top: 1px solid var(--dropdown-divider-color, #ccc);
|
|
188
|
-
margin: 0.5rem 0;
|
|
189
|
-
}
|
|
190
201
|
|
|
191
202
|
.input-container.focus-within,
|
|
192
203
|
.input-container:hover {
|
|
@@ -11,6 +11,63 @@ import { v4 as uuidv4 } from "uuid";
|
|
|
11
11
|
*/
|
|
12
12
|
export class NVFieldDropDown {
|
|
13
13
|
constructor() {
|
|
14
|
+
/****************************************************************************/
|
|
15
|
+
//#region PROPERTIES
|
|
16
|
+
/**
|
|
17
|
+
* Sets the ID for the input element and the for attribute of the associated
|
|
18
|
+
* label. If no ID is provided, a random one will be automatically generated
|
|
19
|
+
* to ensure unique identification, facilitating proper label association and
|
|
20
|
+
* accessibility.
|
|
21
|
+
*/
|
|
22
|
+
this.inputId = uuidv4();
|
|
23
|
+
/**
|
|
24
|
+
* State of the dropdown popover.
|
|
25
|
+
*/
|
|
26
|
+
this.open = false;
|
|
27
|
+
/**
|
|
28
|
+
* The autocomplete prop helps users fill out the input field faster by
|
|
29
|
+
* suggesting entries they’ve used before, like their email or address.
|
|
30
|
+
* You can turn it on to make forms more convenient or off to ensure users
|
|
31
|
+
* always type in fresh data.
|
|
32
|
+
*/
|
|
33
|
+
this.autocomplete = 'off';
|
|
34
|
+
/**
|
|
35
|
+
* Marks the input field as required, ensuring that the user must fill it out
|
|
36
|
+
* before submitting the form.
|
|
37
|
+
*/
|
|
38
|
+
this.required = false;
|
|
39
|
+
/**
|
|
40
|
+
* Alters the input field’s appearance to indicate an error, helping users
|
|
41
|
+
* identify fields that need correction.
|
|
42
|
+
* @validator error
|
|
43
|
+
*/
|
|
44
|
+
this.error = false;
|
|
45
|
+
/**
|
|
46
|
+
* Display the input field’s content without allowing users to change it.
|
|
47
|
+
* Users can still click on it, select, and copy the text, but they won’t be
|
|
48
|
+
* able to type or delete anything.
|
|
49
|
+
*/
|
|
50
|
+
this.readonly = false;
|
|
51
|
+
/**
|
|
52
|
+
* The disabled prop lets you turn off the input field so that users can’t
|
|
53
|
+
* type in it. When disabled, the field is grayed out and won’t respond to
|
|
54
|
+
* clicks or touches.
|
|
55
|
+
*/
|
|
56
|
+
this.disabled = false;
|
|
57
|
+
/**
|
|
58
|
+
* The text to display when no items match the filter.
|
|
59
|
+
*/
|
|
60
|
+
this.emptyresult = 'No results found';
|
|
61
|
+
/**
|
|
62
|
+
* The text entered by the user for filtering dropdown items.
|
|
63
|
+
*/
|
|
64
|
+
this.filterText = '';
|
|
65
|
+
/**
|
|
66
|
+
* Enables or disables the filtering feature for the dropdown items.
|
|
67
|
+
*/
|
|
68
|
+
this.filterable = false;
|
|
69
|
+
this.isFilterable = this.filterable;
|
|
70
|
+
this.selectedValues = new Set();
|
|
14
71
|
/**
|
|
15
72
|
* Handle click on the input container.
|
|
16
73
|
* @param {MouseEvent} event - The click event.
|
|
@@ -94,24 +151,6 @@ export class NVFieldDropDown {
|
|
|
94
151
|
this.popoverElement.hide();
|
|
95
152
|
}
|
|
96
153
|
};
|
|
97
|
-
this.inputId = uuidv4();
|
|
98
|
-
this.label = undefined;
|
|
99
|
-
this.description = undefined;
|
|
100
|
-
this.placeholder = undefined;
|
|
101
|
-
this.name = undefined;
|
|
102
|
-
this.open = false;
|
|
103
|
-
this.autocomplete = 'off';
|
|
104
|
-
this.value = undefined;
|
|
105
|
-
this.required = false;
|
|
106
|
-
this.error = false;
|
|
107
|
-
this.errorDescription = undefined;
|
|
108
|
-
this.readonly = false;
|
|
109
|
-
this.disabled = false;
|
|
110
|
-
this.emptyresult = 'No results found';
|
|
111
|
-
this.filterText = '';
|
|
112
|
-
this.filterable = false;
|
|
113
|
-
this.isFilterable = this.filterable;
|
|
114
|
-
this.selectedValues = new Set();
|
|
115
154
|
}
|
|
116
155
|
handleItemSelected(event) {
|
|
117
156
|
if (this.disabled || this.readonly)
|
|
@@ -379,6 +418,8 @@ export class NVFieldDropDown {
|
|
|
379
418
|
"tags": [],
|
|
380
419
|
"text": "Sets the ID for the input element and the for attribute of the associated\nlabel. If no ID is provided, a random one will be automatically generated\nto ensure unique identification, facilitating proper label association and\naccessibility."
|
|
381
420
|
},
|
|
421
|
+
"getter": false,
|
|
422
|
+
"setter": false,
|
|
382
423
|
"attribute": "input-id",
|
|
383
424
|
"reflect": true,
|
|
384
425
|
"defaultValue": "uuidv4()"
|
|
@@ -397,6 +438,8 @@ export class NVFieldDropDown {
|
|
|
397
438
|
"tags": [],
|
|
398
439
|
"text": "Lets you define the text that explains what users should enter in the text\ninput field. It\u2019s a crucial element for making forms clear and\nuser-friendly."
|
|
399
440
|
},
|
|
441
|
+
"getter": false,
|
|
442
|
+
"setter": false,
|
|
400
443
|
"attribute": "label",
|
|
401
444
|
"reflect": true
|
|
402
445
|
},
|
|
@@ -414,6 +457,8 @@ export class NVFieldDropDown {
|
|
|
414
457
|
"tags": [],
|
|
415
458
|
"text": "Add helpful hints or extra information under the text input field. This is\nwhere you can clarify what users should enter or provide additional\ninstructions, making the form easier to fill out correctly."
|
|
416
459
|
},
|
|
460
|
+
"getter": false,
|
|
461
|
+
"setter": false,
|
|
417
462
|
"attribute": "description",
|
|
418
463
|
"reflect": true
|
|
419
464
|
},
|
|
@@ -431,6 +476,8 @@ export class NVFieldDropDown {
|
|
|
431
476
|
"tags": [],
|
|
432
477
|
"text": "Display temporary text inside the input field to give users a hint about\nwhat to type. It\u2019s a great way to provide examples or suggestions directly\nin the field before they start typing.\nThe placeholder is displayed only when the filterable option is enabled."
|
|
433
478
|
},
|
|
479
|
+
"getter": false,
|
|
480
|
+
"setter": false,
|
|
434
481
|
"attribute": "placeholder",
|
|
435
482
|
"reflect": true
|
|
436
483
|
},
|
|
@@ -448,6 +495,8 @@ export class NVFieldDropDown {
|
|
|
448
495
|
"tags": [],
|
|
449
496
|
"text": "Defines the name attribute of the input field, which is crucial for form\nsubmission. This value is used as the key in the key-value pair sent to\nthe server, representing the input\u2019s data in form submissions. It should be\nunique within the form to avoid conflicts."
|
|
450
497
|
},
|
|
498
|
+
"getter": false,
|
|
499
|
+
"setter": false,
|
|
451
500
|
"attribute": "name",
|
|
452
501
|
"reflect": true
|
|
453
502
|
},
|
|
@@ -465,6 +514,8 @@ export class NVFieldDropDown {
|
|
|
465
514
|
"tags": [],
|
|
466
515
|
"text": "State of the dropdown popover."
|
|
467
516
|
},
|
|
517
|
+
"getter": false,
|
|
518
|
+
"setter": false,
|
|
468
519
|
"attribute": "open",
|
|
469
520
|
"reflect": true,
|
|
470
521
|
"defaultValue": "false"
|
|
@@ -489,6 +540,8 @@ export class NVFieldDropDown {
|
|
|
489
540
|
"tags": [],
|
|
490
541
|
"text": "The autocomplete prop helps users fill out the input field faster by\nsuggesting entries they\u2019ve used before, like their email or address.\nYou can turn it on to make forms more convenient or off to ensure users\nalways type in fresh data."
|
|
491
542
|
},
|
|
543
|
+
"getter": false,
|
|
544
|
+
"setter": false,
|
|
492
545
|
"attribute": "autocomplete",
|
|
493
546
|
"reflect": true,
|
|
494
547
|
"defaultValue": "'off'"
|
|
@@ -507,6 +560,8 @@ export class NVFieldDropDown {
|
|
|
507
560
|
"tags": [],
|
|
508
561
|
"text": "Specifies the value of the input field, which determines the text displayed\nwithin the field. This prop is typically used in controlled components\nwhere the input\u2019s value is managed by the component\u2019s state."
|
|
509
562
|
},
|
|
563
|
+
"getter": false,
|
|
564
|
+
"setter": false,
|
|
510
565
|
"attribute": "value",
|
|
511
566
|
"reflect": true
|
|
512
567
|
},
|
|
@@ -524,6 +579,8 @@ export class NVFieldDropDown {
|
|
|
524
579
|
"tags": [],
|
|
525
580
|
"text": "Marks the input field as required, ensuring that the user must fill it out\nbefore submitting the form."
|
|
526
581
|
},
|
|
582
|
+
"getter": false,
|
|
583
|
+
"setter": false,
|
|
527
584
|
"attribute": "required",
|
|
528
585
|
"reflect": true,
|
|
529
586
|
"defaultValue": "false"
|
|
@@ -545,6 +602,8 @@ export class NVFieldDropDown {
|
|
|
545
602
|
}],
|
|
546
603
|
"text": "Alters the input field\u2019s appearance to indicate an error, helping users\nidentify fields that need correction."
|
|
547
604
|
},
|
|
605
|
+
"getter": false,
|
|
606
|
+
"setter": false,
|
|
548
607
|
"attribute": "error",
|
|
549
608
|
"reflect": true,
|
|
550
609
|
"defaultValue": "false"
|
|
@@ -566,6 +625,8 @@ export class NVFieldDropDown {
|
|
|
566
625
|
}],
|
|
567
626
|
"text": "A description that appears when there is an error related to the dropdown\nfield."
|
|
568
627
|
},
|
|
628
|
+
"getter": false,
|
|
629
|
+
"setter": false,
|
|
569
630
|
"attribute": "error-description",
|
|
570
631
|
"reflect": true
|
|
571
632
|
},
|
|
@@ -583,6 +644,8 @@ export class NVFieldDropDown {
|
|
|
583
644
|
"tags": [],
|
|
584
645
|
"text": "Display the input field\u2019s content without allowing users to change it.\nUsers can still click on it, select, and copy the text, but they won\u2019t be\nable to type or delete anything."
|
|
585
646
|
},
|
|
647
|
+
"getter": false,
|
|
648
|
+
"setter": false,
|
|
586
649
|
"attribute": "readonly",
|
|
587
650
|
"reflect": true,
|
|
588
651
|
"defaultValue": "false"
|
|
@@ -601,6 +664,8 @@ export class NVFieldDropDown {
|
|
|
601
664
|
"tags": [],
|
|
602
665
|
"text": "The disabled prop lets you turn off the input field so that users can\u2019t\ntype in it. When disabled, the field is grayed out and won\u2019t respond to\nclicks or touches."
|
|
603
666
|
},
|
|
667
|
+
"getter": false,
|
|
668
|
+
"setter": false,
|
|
604
669
|
"attribute": "disabled",
|
|
605
670
|
"reflect": true,
|
|
606
671
|
"defaultValue": "false"
|
|
@@ -619,6 +684,8 @@ export class NVFieldDropDown {
|
|
|
619
684
|
"tags": [],
|
|
620
685
|
"text": "The text to display when no items match the filter."
|
|
621
686
|
},
|
|
687
|
+
"getter": false,
|
|
688
|
+
"setter": false,
|
|
622
689
|
"attribute": "emptyresult",
|
|
623
690
|
"reflect": true,
|
|
624
691
|
"defaultValue": "'No results found'"
|
|
@@ -637,6 +704,8 @@ export class NVFieldDropDown {
|
|
|
637
704
|
"tags": [],
|
|
638
705
|
"text": "Enables or disables the filtering feature for the dropdown items."
|
|
639
706
|
},
|
|
707
|
+
"getter": false,
|
|
708
|
+
"setter": false,
|
|
640
709
|
"attribute": "filterable",
|
|
641
710
|
"reflect": true,
|
|
642
711
|
"defaultValue": "false"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nv-fielddropdown.js","sourceRoot":"","sources":["../../../src/components/nv-fielddropdown/nv-fielddropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["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';\nimport { DropdownItemSelectedEventDetail } from '../nv-fielddropdownitem/DropdownItemSelectedEventDetail';\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\n@Component({\n tag: 'nv-fielddropdown',\n styleUrl: 'nv-fielddropdown.scss',\n shadow: false,\n formAssociated: true,\n})\nexport class NVFieldDropDown {\n @Element() el: HTMLNvFielddropdownElement;\n private inputElement!: HTMLInputElement;\n private popoverElement!: HTMLNvPopoverElement;\n\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * Sets the ID for the input element and the for attribute of the associated\n * label. If no ID is provided, a random one will be automatically generated\n * to ensure unique identification, facilitating proper label association and\n * accessibility.\n */\n @Prop({ reflect: true })\n readonly inputId: string = uuidv4();\n\n /**\n * Lets you define the text that explains what users should enter in the text\n * input field. It’s a crucial element for making forms clear and\n * user-friendly.\n */\n @Prop({ reflect: true })\n readonly label: string;\n\n /**\n * Add helpful hints or extra information under the text input field. This is\n * where you can clarify what users should enter or provide additional\n * instructions, making the form easier to fill out correctly.\n */\n @Prop({ reflect: true })\n readonly description: string;\n\n /**\n * Display temporary text inside the input field to give users a hint about\n * what to type. It’s a great way to provide examples or suggestions directly\n * in the field before they start typing.\n * The placeholder is displayed only when the filterable option is enabled.\n */\n @Prop({ reflect: true })\n readonly placeholder: string;\n\n /**\n * Defines the name attribute of the input field, which is crucial for form\n * submission. This value is used as the key in the key-value pair sent to\n * the server, representing the input’s data in form submissions. It should be\n * unique within the form to avoid conflicts.\n */\n @Prop({ reflect: true })\n readonly name: string;\n\n /**\n * State of the dropdown popover.\n */\n @Prop({ reflect: true, mutable: true })\n open: boolean = false;\n\n /**\n * The autocomplete prop helps users fill out the input field faster by\n * suggesting entries they’ve used before, like their email or address.\n * You can turn it on to make forms more convenient or off to ensure users\n * always type in fresh data.\n */\n @Prop({ reflect: true })\n readonly autocomplete: `${TextInputAutocomplete}` = 'off';\n\n /**\n * Specifies the value of the input field, which determines the text displayed\n * within the field. This prop is typically used in controlled components\n * where the input’s value is managed by the component’s state.\n */\n @Prop({ reflect: true, mutable: true })\n value: string;\n\n /**\n * Marks the input field as required, ensuring that the user must fill it out\n * before submitting the form.\n */\n @Prop({ reflect: true })\n readonly required: boolean = false;\n\n /**\n * Alters the input field’s appearance to indicate an error, helping users\n * identify fields that need correction.\n * @validator error\n */\n @Prop({ reflect: true })\n readonly error: boolean = false;\n\n /**\n * A description that appears when there is an error related to the dropdown\n * field.\n * @validator message\n */\n @Prop({ reflect: true })\n readonly errorDescription: string;\n\n /**\n * Display the input field’s content without allowing users to change it.\n * Users can still click on it, select, and copy the text, but they won’t be\n * able to type or delete anything.\n */\n @Prop({ reflect: true })\n readonly readonly: boolean = false;\n\n /**\n * The disabled prop lets you turn off the input field so that users can’t\n * type in it. When disabled, the field is grayed out and won’t respond to\n * clicks or touches.\n */\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /**\n * The text to display when no items match the filter.\n */\n @Prop({ reflect: true })\n readonly emptyresult: string = 'No results found';\n\n /**\n * The text entered by the user for filtering dropdown items.\n */\n @State()\n filterText: string = '';\n\n /**\n * Enables or disables the filtering feature for the dropdown items.\n */\n @Prop({ reflect: true, mutable: true })\n filterable: boolean = false;\n\n @State()\n isFilterable: boolean = this.filterable;\n\n @State()\n selectedValues: Set<string> = new Set();\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Event emitted when an item is selected.\n */\n @Event()\n dropdownItemSelected: EventEmitter<DropdownItemSelectedEventDetail>;\n\n @Listen('itemSelected')\n handleItemSelected(event: CustomEvent<DropdownItemSelectedEventDetail>) {\n if (this.disabled || this.readonly) return;\n\n // Retrieve all nv-fielddropdownitem elements present in the dropdown.\n const items = Array.from(\n this.el.querySelectorAll('nv-fielddropdownitem'),\n ) as HTMLNvFielddropdownitemElement[];\n\n // For each item, remove the 'selected' attribute and the 'selected' class.\n items.forEach(item => {\n if (item !== event.target) {\n item.removeAttribute('selected');\n item.classList.remove('selected');\n }\n });\n\n // Update the value and emit the event with the selected item.\n this.value = event.detail.value;\n (event.target as HTMLNvFielddropdownitemElement).setAttribute(\n 'selected',\n 'true',\n );\n (event.target as HTMLElement).classList.add('selected');\n this.dropdownItemSelected.emit(event.detail);\n\n // Close the popover after selecting.\n if (this.popoverElement) {\n this.popoverElement.hide();\n }\n }\n\n /**\n * Emitted when the input value changes.\n * @bind value\n */\n @Event()\n valueChanged: EventEmitter<string>;\n\n @Listen('openChanged')\n handleOpenChanged(event: CustomEvent<boolean>) {\n this.open = event.detail; // Update `open` based on the popover state\n }\n\n @Watch('filterable')\n watchFilterableHandler(newValue: boolean) {\n this.isFilterable = newValue;\n this.filterable = newValue;\n }\n\n @Watch('value')\n watchValueHandler() {\n // Handle value change and update the corresponding dropdown item if it exists\n this.setInitialSelection();\n }\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region METHODS\n\n /**\n * Subscribe to click outside event.\n */\n connectedCallback() {\n document.addEventListener('click', this.handleClickOutside.bind(this));\n\n // Handle pre-selection during component initialization\n this.setInitialSelection();\n\n // Apply filtering if the dropdown is filterable and there is a value\n if (this.filterable && this.value) {\n this.filterText = this.value.toLowerCase();\n this.filterItems(); // Update the visibility of items\n } else {\n // Ensure all items are visible if no filtering is applied\n this.resetFilter();\n }\n }\n\n /**\n * Set the initial selection based on the current value and update the inputElement value.\n */\n private setInitialSelection() {\n const items = Array.from(\n this.el.querySelectorAll('nv-fielddropdownitem'),\n ) as HTMLNvFielddropdownitemElement[];\n\n const selectedItem = items.find(\n item =>\n item.getAttribute('label') === this.value ||\n item.getAttribute('value') === this.value ||\n item.textContent?.trim() === this.value,\n );\n\n // Remove 'selected' from all items first to reset the state\n items.forEach(item => {\n item.removeAttribute('selected');\n item.classList.remove('selected');\n });\n\n if (selectedItem) {\n // Add the `selected` attribute and `selected` class for visual styling\n selectedItem.setAttribute('selected', 'true');\n selectedItem.classList.add('selected');\n\n // Update the value and inputElement value to reflect the pre-selected item\n this.value =\n selectedItem.getAttribute('label') ||\n selectedItem.getAttribute('value') ||\n selectedItem.textContent?.trim() ||\n '';\n if (this.inputElement) {\n this.inputElement.value = this.value;\n }\n }\n }\n\n /**\n * Unsubscribe from click outside event.\n */\n disconnectedCallback() {\n document.removeEventListener('click', this.handleClickOutside.bind(this));\n }\n\n /**\n * Handle click on the input container.\n * @param {MouseEvent} event - The click event.\n */\n private handleInputContainerClick = (event: MouseEvent) => {\n if (this.disabled || this.readonly) {\n return; // Do nothing if the dropdown is disabled or read-only\n }\n\n const target = event.target as HTMLElement;\n\n // Check if it is the paragraph or another part of the container\n if (target.tagName === 'P' || target.tagName === 'SPAN') {\n this.open = true;\n this.popoverElement.show();\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 /**\n * Handle input change.\n * @param {Event} event - The input event.\n */\n private handleInput = (event: Event) => {\n if (!this.filterable) return; // Do not filter if `filterable` is false\n if (this.disabled || this.readonly) {\n return; // Do not toggle the state if the dropdown is disabled or read-only\n }\n const input = event.target as HTMLInputElement;\n this.filterText = input.value.toLowerCase();\n this.value = input.value; // Update the value\n this.valueChanged.emit(input.value); // Emit an event if needed\n this.filterItems(); // Update the visibility of items\n };\n\n /**\n * Filter dropdown items based on the text entered by the user.\n * If no items are found, display a message indicating no results.\n */\n private filterItems() {\n const items = Array.from(\n this.el.querySelectorAll('nv-fielddropdownitem'),\n ) as HTMLNvFielddropdownitemElement[];\n\n // Remove the \"no results found\" item if it exists\n const existingEmptyItem = this.el.querySelector(\n 'nv-fielddropdownitem[data-empty]',\n );\n if (existingEmptyItem) {\n existingEmptyItem.remove();\n }\n\n let hasVisibleItems = false;\n\n // Iterate over all items and adjust their visibility\n items.forEach(item => {\n const textContent = item.textContent?.toLowerCase() || ''; // Get the textual content of the slot\n const value = item.value?.toLowerCase() || ''; // Get the value of the `value` attribute\n\n // Check if the filtered text is present either in the value or in the textual content\n const shouldShow =\n value.includes(this.filterText) ||\n textContent.includes(this.filterText);\n\n item.style.display = shouldShow ? '' : 'none'; // Hide or show the item\n\n if (shouldShow) {\n hasVisibleItems = true;\n }\n });\n\n // If no items are visible, add the \"no results found\" item\n if (!hasVisibleItems) {\n const emptyItem = document.createElement('nv-fielddropdownitem');\n emptyItem.setAttribute('data-empty', 'true');\n emptyItem.setAttribute('disabled', 'true');\n emptyItem.textContent = this.emptyresult;\n this.el.querySelector('ul[slot=\"content\"]')?.appendChild(emptyItem);\n }\n }\n\n /**\n * Reset the filter and make all items visible.\n */\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 /**\n * Retrieves the current filter text entered by the user.\n * @returns {string} The filter text.\n */\n @Method()\n async getFilterText(): Promise<string> {\n return this.filterText;\n }\n\n /**\n * Handle click outside the component.\n * @param {MouseEvent} event - The click event.\n */\n private handleClickOutside(event: MouseEvent) {\n if (\n this.el.contains(event.target as Node) ||\n (this.inputElement && this.inputElement.contains(event.target as Node))\n ) {\n // If the click is inside the component or on the input, do not close the popover\n return;\n }\n\n this.popoverElement.hide(); // Close the popover if the click is outside the component\n }\n\n /**\n * Handle input focus.\n */\n private handleInputFocus = () => {\n if (this.disabled || this.readonly) {\n return; // Do not toggle the state if the dropdown is disabled or read-only\n }\n this.open = true; // Force the popover to open\n };\n\n /**\n * Handle input blur.\n */\n private handleInputBlur = () => {\n // Use a delay to check if the focus is still within the popover\n setTimeout(() => {\n if (!this.el.contains(document.activeElement)) {\n this.open = false;\n this.popoverElement.hide(); // Close the popover if the focus is outside the component\n }\n }, 150);\n };\n\n /**\n * Toggle the dropdown popover.\n * @returns {void}\n */\n private togglePopover = (): void => {\n if (this.disabled || this.readonly) {\n return; // Do not toggle if disabled or read-only\n }\n\n this.open = !this.open;\n if (this.open) {\n this.popoverElement.show();\n\n // Si le dropdown n'est pas filtrable, focus sur le premier élément\n if (!this.filterable) {\n this.focusFirstItem();\n }\n } else {\n this.popoverElement.hide();\n }\n };\n\n @Listen('keydown', { passive: false })\n handleKeyDown(event: KeyboardEvent) {\n if (!this.open) {\n if (event.key === 'ArrowDown') {\n this.open = true;\n this.popoverElement.show();\n\n if (!this.filterable) {\n // Focus sur le premier élément si ce n'est pas filtrable\n this.focusFirstItem();\n }\n\n event.preventDefault();\n return;\n }\n return;\n }\n\n // Vérifiez si le popover est défini avant de chercher les items\n if (!this.popoverElement) {\n console.warn('Popover element is not defined');\n return;\n }\n\n const items = Array.from(\n this.el.querySelectorAll('nv-fielddropdownitem:not([data-empty])'),\n ) as HTMLNvFielddropdownitemElement[];\n\n // Vérifiez si les items existent\n if (items.length === 0) {\n console.warn('No dropdown items found to navigate');\n return;\n }\n\n let currentIndex = items.findIndex(item =>\n item.classList.contains('highlighted'),\n );\n\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n currentIndex = (currentIndex + 1) % items.length;\n this.updateHighlightedItem(items, currentIndex);\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n currentIndex = (currentIndex - 1 + items.length) % items.length;\n this.updateHighlightedItem(items, currentIndex);\n } else if (event.key === 'Enter' && currentIndex >= 0) {\n event.preventDefault();\n items[currentIndex].click();\n } else if (event.key === 'Escape') {\n event.preventDefault();\n this.open = false;\n this.popoverElement.hide();\n if (this.inputElement) {\n this.inputElement.blur();\n }\n }\n }\n\n private updateHighlightedItem(\n items: HTMLNvFielddropdownitemElement[],\n index: number,\n ) {\n items.forEach((item, i) => {\n if (i === index) {\n item.classList.add('highlighted');\n item.setAttribute('tabindex', '0');\n if (!item.checkVisibility()) {\n console.log('Item not focused');\n }\n\n item.focus(); // Forcer le focus ici\n item.scrollIntoView({ block: 'nearest' });\n } else {\n item.classList.remove('highlighted');\n item.setAttribute('tabindex', '-1');\n }\n });\n }\n\n private focusFirstItem() {\n const firstItem = this.el.querySelector('nv-fielddropdownitem');\n if (firstItem) {\n (firstItem as HTMLElement).focus();\n this.updateHighlightedItem(\n Array.from(\n this.el.querySelectorAll('nv-fielddropdownitem'),\n ) as HTMLNvFielddropdownitemElement[],\n 0,\n );\n } else {\n console.warn('No first item found to focus');\n }\n }\n\n //#endregion METHODS\n /****************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host>\n {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n <label htmlFor={this.inputId}>\n <slot name=\"label\">{this.label}</slot>\n </label>\n )}\n\n <nv-popover\n ref={el => (this.popoverElement = el as HTMLNvPopoverElement)}\n triggerMode=\"controlled\"\n placement=\"bottom-start\"\n open={this.open}\n >\n <div class=\"input-wrapper\" slot=\"trigger\">\n <slot name=\"before-input\"></slot>\n\n <div\n class=\"input-container\"\n onClick={this.handleInputContainerClick}\n >\n <slot name=\"leading-input\"></slot>\n\n {this.isFilterable || this.disabled || this.readonly ? (\n <input\n id={this.inputId}\n type=\"search\"\n ref={e => (this.inputElement = e)}\n autocomplete={this.autocomplete}\n placeholder={this.placeholder}\n name={this.name}\n value={this.value}\n required={this.required}\n disabled={this.disabled}\n readOnly={this.readonly}\n onInput={this.handleInput}\n onFocus={this.handleInputFocus}\n onBlur={this.handleInputBlur}\n onKeyDown={this.handleKeyDown} // Gérer les touches fléchées ici\n />\n ) : (\n <p\n id={this.inputId}\n class=\"non-filterable-text\"\n onClick={this.handleInputContainerClick}\n tabIndex={0} // Ajout du tabindex pour permettre de le focus\n onKeyDown={this.handleKeyDown} // Gérer les touches fléchées ici également\n onFocus={this.handleInputFocus}\n >\n <span>{this.value || this.placeholder}</span>\n </p>\n )}\n\n <nv-iconbutton\n class=\"toggle-dropdown-icon\"\n name={this.open ? 'chevron-top' : 'chevron-down'}\n size=\"md\"\n emphasis=\"lower\"\n aria-label={this.open ? 'Hide dropdown' : 'Show dropdown'}\n aria-pressed={this.open.toString()}\n onClick={this.togglePopover}\n />\n </div>\n\n <slot name=\"after-input\"></slot>\n </div>\n\n <slot name=\"content\"></slot>\n </nv-popover>\n\n {(this.description ||\n this.el.querySelector('[slot=\"description\"]')) && (\n <div class=\"description\">\n <slot name=\"description\">{this.description}</slot>\n </div>\n )}\n\n {(this.errorDescription ||\n this.el.querySelector('[slot=\"error-description\"]')) && (\n <div hidden={!this.error} class=\"error-description\">\n <slot name=\"error-description\">{this.errorDescription}</slot>\n </div>\n )}\n </Host>\n );\n }\n //#endregion RENDER\n}\n"]}
|
|
1
|
+
{"version":3,"file":"nv-fielddropdown.js","sourceRoot":"","sources":["../../../src/components/nv-fielddropdown/nv-fielddropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["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';\nimport { DropdownItemSelectedEventDetail } from '../nv-fielddropdownitem/DropdownItemSelectedEventDetail';\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\n@Component({\n tag: 'nv-fielddropdown',\n styleUrl: 'nv-fielddropdown.scss',\n shadow: false,\n formAssociated: true,\n})\nexport class NVFieldDropDown {\n @Element() el: HTMLNvFielddropdownElement;\n private inputElement!: HTMLInputElement;\n private popoverElement!: HTMLNvPopoverElement;\n\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * Sets the ID for the input element and the for attribute of the associated\n * label. If no ID is provided, a random one will be automatically generated\n * to ensure unique identification, facilitating proper label association and\n * accessibility.\n */\n @Prop({ reflect: true })\n readonly inputId: string = uuidv4();\n\n /**\n * Lets you define the text that explains what users should enter in the text\n * input field. It’s a crucial element for making forms clear and\n * user-friendly.\n */\n @Prop({ reflect: true })\n readonly label: string;\n\n /**\n * Add helpful hints or extra information under the text input field. This is\n * where you can clarify what users should enter or provide additional\n * instructions, making the form easier to fill out correctly.\n */\n @Prop({ reflect: true })\n readonly description: string;\n\n /**\n * Display temporary text inside the input field to give users a hint about\n * what to type. It’s a great way to provide examples or suggestions directly\n * in the field before they start typing.\n * The placeholder is displayed only when the filterable option is enabled.\n */\n @Prop({ reflect: true })\n readonly placeholder: string;\n\n /**\n * Defines the name attribute of the input field, which is crucial for form\n * submission. This value is used as the key in the key-value pair sent to\n * the server, representing the input’s data in form submissions. It should be\n * unique within the form to avoid conflicts.\n */\n @Prop({ reflect: true })\n readonly name: string;\n\n /**\n * State of the dropdown popover.\n */\n @Prop({ reflect: true, mutable: true })\n open: boolean = false;\n\n /**\n * The autocomplete prop helps users fill out the input field faster by\n * suggesting entries they’ve used before, like their email or address.\n * You can turn it on to make forms more convenient or off to ensure users\n * always type in fresh data.\n */\n @Prop({ reflect: true })\n readonly autocomplete: `${TextInputAutocomplete}` = 'off';\n\n /**\n * Specifies the value of the input field, which determines the text displayed\n * within the field. This prop is typically used in controlled components\n * where the input’s value is managed by the component’s state.\n */\n @Prop({ reflect: true, mutable: true })\n value: string;\n\n /**\n * Marks the input field as required, ensuring that the user must fill it out\n * before submitting the form.\n */\n @Prop({ reflect: true })\n readonly required: boolean = false;\n\n /**\n * Alters the input field’s appearance to indicate an error, helping users\n * identify fields that need correction.\n * @validator error\n */\n @Prop({ reflect: true })\n readonly error: boolean = false;\n\n /**\n * A description that appears when there is an error related to the dropdown\n * field.\n * @validator message\n */\n @Prop({ reflect: true })\n readonly errorDescription: string;\n\n /**\n * Display the input field’s content without allowing users to change it.\n * Users can still click on it, select, and copy the text, but they won’t be\n * able to type or delete anything.\n */\n @Prop({ reflect: true })\n readonly readonly: boolean = false;\n\n /**\n * The disabled prop lets you turn off the input field so that users can’t\n * type in it. When disabled, the field is grayed out and won’t respond to\n * clicks or touches.\n */\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /**\n * The text to display when no items match the filter.\n */\n @Prop({ reflect: true })\n readonly emptyresult: string = 'No results found';\n\n /**\n * The text entered by the user for filtering dropdown items.\n */\n @State()\n filterText: string = '';\n\n /**\n * Enables or disables the filtering feature for the dropdown items.\n */\n @Prop({ reflect: true, mutable: true })\n filterable: boolean = false;\n\n @State()\n isFilterable: boolean = this.filterable;\n\n @State()\n selectedValues: Set<string> = new Set();\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Event emitted when an item is selected.\n */\n @Event()\n dropdownItemSelected: EventEmitter<DropdownItemSelectedEventDetail>;\n\n @Listen('itemSelected')\n handleItemSelected(event: CustomEvent<DropdownItemSelectedEventDetail>) {\n if (this.disabled || this.readonly) return;\n\n // Retrieve all nv-fielddropdownitem elements present in the dropdown.\n const items = Array.from(\n this.el.querySelectorAll('nv-fielddropdownitem'),\n ) as HTMLNvFielddropdownitemElement[];\n\n // For each item, remove the 'selected' attribute and the 'selected' class.\n items.forEach(item => {\n if (item !== event.target) {\n item.removeAttribute('selected');\n item.classList.remove('selected');\n }\n });\n\n // Update the value and emit the event with the selected item.\n this.value = event.detail.value;\n (event.target as HTMLNvFielddropdownitemElement).setAttribute(\n 'selected',\n 'true',\n );\n (event.target as HTMLElement).classList.add('selected');\n this.dropdownItemSelected.emit(event.detail);\n\n // Close the popover after selecting.\n if (this.popoverElement) {\n this.popoverElement.hide();\n }\n }\n\n /**\n * Emitted when the input value changes.\n * @bind value\n */\n @Event()\n valueChanged: EventEmitter<string>;\n\n @Listen('openChanged')\n handleOpenChanged(event: CustomEvent<boolean>) {\n this.open = event.detail; // Update `open` based on the popover state\n }\n\n @Watch('filterable')\n watchFilterableHandler(newValue: boolean) {\n this.isFilterable = newValue;\n this.filterable = newValue;\n }\n\n @Watch('value')\n watchValueHandler() {\n // Handle value change and update the corresponding dropdown item if it exists\n this.setInitialSelection();\n }\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region METHODS\n\n /**\n * Subscribe to click outside event.\n */\n connectedCallback() {\n document.addEventListener('click', this.handleClickOutside.bind(this));\n\n // Handle pre-selection during component initialization\n this.setInitialSelection();\n\n // Apply filtering if the dropdown is filterable and there is a value\n if (this.filterable && this.value) {\n this.filterText = this.value.toLowerCase();\n this.filterItems(); // Update the visibility of items\n } else {\n // Ensure all items are visible if no filtering is applied\n this.resetFilter();\n }\n }\n\n /**\n * Set the initial selection based on the current value and update the inputElement value.\n */\n private setInitialSelection() {\n const items = Array.from(\n this.el.querySelectorAll('nv-fielddropdownitem'),\n ) as HTMLNvFielddropdownitemElement[];\n\n const selectedItem = items.find(\n item =>\n item.getAttribute('label') === this.value ||\n item.getAttribute('value') === this.value ||\n item.textContent?.trim() === this.value,\n );\n\n // Remove 'selected' from all items first to reset the state\n items.forEach(item => {\n item.removeAttribute('selected');\n item.classList.remove('selected');\n });\n\n if (selectedItem) {\n // Add the `selected` attribute and `selected` class for visual styling\n selectedItem.setAttribute('selected', 'true');\n selectedItem.classList.add('selected');\n\n // Update the value and inputElement value to reflect the pre-selected item\n this.value =\n selectedItem.getAttribute('label') ||\n selectedItem.getAttribute('value') ||\n selectedItem.textContent?.trim() ||\n '';\n if (this.inputElement) {\n this.inputElement.value = this.value;\n }\n }\n }\n\n /**\n * Unsubscribe from click outside event.\n */\n disconnectedCallback() {\n document.removeEventListener('click', this.handleClickOutside.bind(this));\n }\n\n /**\n * Handle click on the input container.\n * @param {MouseEvent} event - The click event.\n */\n private handleInputContainerClick = (event: MouseEvent) => {\n if (this.disabled || this.readonly) {\n return; // Do nothing if the dropdown is disabled or read-only\n }\n\n const target = event.target as HTMLElement;\n\n // Check if it is the paragraph or another part of the container\n if (target.tagName === 'P' || target.tagName === 'SPAN') {\n this.open = true;\n this.popoverElement.show();\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 /**\n * Handle input change.\n * @param {Event} event - The input event.\n */\n private handleInput = (event: Event) => {\n if (!this.filterable) return; // Do not filter if `filterable` is false\n if (this.disabled || this.readonly) {\n return; // Do not toggle the state if the dropdown is disabled or read-only\n }\n const input = event.target as HTMLInputElement;\n this.filterText = input.value.toLowerCase();\n this.value = input.value; // Update the value\n this.valueChanged.emit(input.value); // Emit an event if needed\n this.filterItems(); // Update the visibility of items\n };\n\n /**\n * Filter dropdown items based on the text entered by the user.\n * If no items are found, display a message indicating no results.\n */\n private filterItems() {\n const items = Array.from(\n this.el.querySelectorAll('nv-fielddropdownitem'),\n ) as HTMLNvFielddropdownitemElement[];\n\n // Remove the \"no results found\" item if it exists\n const existingEmptyItem = this.el.querySelector(\n 'nv-fielddropdownitem[data-empty]',\n );\n if (existingEmptyItem) {\n existingEmptyItem.remove();\n }\n\n let hasVisibleItems = false;\n\n // Iterate over all items and adjust their visibility\n items.forEach(item => {\n const textContent = item.textContent?.toLowerCase() || ''; // Get the textual content of the slot\n const value = item.value?.toLowerCase() || ''; // Get the value of the `value` attribute\n\n // Check if the filtered text is present either in the value or in the textual content\n const shouldShow =\n value.includes(this.filterText) ||\n textContent.includes(this.filterText);\n\n item.style.display = shouldShow ? '' : 'none'; // Hide or show the item\n\n if (shouldShow) {\n hasVisibleItems = true;\n }\n });\n\n // If no items are visible, add the \"no results found\" item\n if (!hasVisibleItems) {\n const emptyItem = document.createElement('nv-fielddropdownitem');\n emptyItem.setAttribute('data-empty', 'true');\n emptyItem.setAttribute('disabled', 'true');\n emptyItem.textContent = this.emptyresult;\n this.el.querySelector('ul[slot=\"content\"]')?.appendChild(emptyItem);\n }\n }\n\n /**\n * Reset the filter and make all items visible.\n */\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 /**\n * Retrieves the current filter text entered by the user.\n * @returns {string} The filter text.\n */\n @Method()\n async getFilterText(): Promise<string> {\n return this.filterText;\n }\n\n /**\n * Handle click outside the component.\n * @param {MouseEvent} event - The click event.\n */\n private handleClickOutside(event: MouseEvent) {\n if (\n this.el.contains(event.target as Node) ||\n (this.inputElement && this.inputElement.contains(event.target as Node))\n ) {\n // If the click is inside the component or on the input, do not close the popover\n return;\n }\n\n this.popoverElement.hide(); // Close the popover if the click is outside the component\n }\n\n /**\n * Handle input focus.\n */\n private handleInputFocus = () => {\n if (this.disabled || this.readonly) {\n return; // Do not toggle the state if the dropdown is disabled or read-only\n }\n this.open = true; // Force the popover to open\n };\n\n /**\n * Handle input blur.\n */\n private handleInputBlur = () => {\n // Use a delay to check if the focus is still within the popover\n setTimeout(() => {\n if (!this.el.contains(document.activeElement)) {\n this.open = false;\n this.popoverElement.hide(); // Close the popover if the focus is outside the component\n }\n }, 150);\n };\n\n /**\n * Toggle the dropdown popover.\n * @returns {void}\n */\n private togglePopover = (): void => {\n if (this.disabled || this.readonly) {\n return; // Do not toggle if disabled or read-only\n }\n\n this.open = !this.open;\n if (this.open) {\n this.popoverElement.show();\n\n // Si le dropdown n'est pas filtrable, focus sur le premier élément\n if (!this.filterable) {\n this.focusFirstItem();\n }\n } else {\n this.popoverElement.hide();\n }\n };\n\n @Listen('keydown', { passive: false })\n handleKeyDown(event: KeyboardEvent) {\n if (!this.open) {\n if (event.key === 'ArrowDown') {\n this.open = true;\n this.popoverElement.show();\n\n if (!this.filterable) {\n // Focus sur le premier élément si ce n'est pas filtrable\n this.focusFirstItem();\n }\n\n event.preventDefault();\n return;\n }\n return;\n }\n\n // Vérifiez si le popover est défini avant de chercher les items\n if (!this.popoverElement) {\n console.warn('Popover element is not defined');\n return;\n }\n\n const items = Array.from(\n this.el.querySelectorAll('nv-fielddropdownitem:not([data-empty])'),\n ) as HTMLNvFielddropdownitemElement[];\n\n // Vérifiez si les items existent\n if (items.length === 0) {\n console.warn('No dropdown items found to navigate');\n return;\n }\n\n let currentIndex = items.findIndex(item =>\n item.classList.contains('highlighted'),\n );\n\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n currentIndex = (currentIndex + 1) % items.length;\n this.updateHighlightedItem(items, currentIndex);\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n currentIndex = (currentIndex - 1 + items.length) % items.length;\n this.updateHighlightedItem(items, currentIndex);\n } else if (event.key === 'Enter' && currentIndex >= 0) {\n event.preventDefault();\n items[currentIndex].click();\n } else if (event.key === 'Escape') {\n event.preventDefault();\n this.open = false;\n this.popoverElement.hide();\n if (this.inputElement) {\n this.inputElement.blur();\n }\n }\n }\n\n private updateHighlightedItem(\n items: HTMLNvFielddropdownitemElement[],\n index: number,\n ) {\n items.forEach((item, i) => {\n if (i === index) {\n item.classList.add('highlighted');\n item.setAttribute('tabindex', '0');\n if (!item.checkVisibility()) {\n console.log('Item not focused');\n }\n\n item.focus(); // Forcer le focus ici\n item.scrollIntoView({ block: 'nearest' });\n } else {\n item.classList.remove('highlighted');\n item.setAttribute('tabindex', '-1');\n }\n });\n }\n\n private focusFirstItem() {\n const firstItem = this.el.querySelector('nv-fielddropdownitem');\n if (firstItem) {\n (firstItem as HTMLElement).focus();\n this.updateHighlightedItem(\n Array.from(\n this.el.querySelectorAll('nv-fielddropdownitem'),\n ) as HTMLNvFielddropdownitemElement[],\n 0,\n );\n } else {\n console.warn('No first item found to focus');\n }\n }\n\n //#endregion METHODS\n /****************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host>\n {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n <label htmlFor={this.inputId}>\n <slot name=\"label\">{this.label}</slot>\n </label>\n )}\n\n <nv-popover\n ref={el => (this.popoverElement = el as HTMLNvPopoverElement)}\n triggerMode=\"controlled\"\n placement=\"bottom-start\"\n open={this.open}\n >\n <div class=\"input-wrapper\" slot=\"trigger\">\n <slot name=\"before-input\"></slot>\n\n <div\n class=\"input-container\"\n onClick={this.handleInputContainerClick}\n >\n <slot name=\"leading-input\"></slot>\n\n {this.isFilterable || this.disabled || this.readonly ? (\n <input\n id={this.inputId}\n type=\"search\"\n ref={e => (this.inputElement = e)}\n autocomplete={this.autocomplete}\n placeholder={this.placeholder}\n name={this.name}\n value={this.value}\n required={this.required}\n disabled={this.disabled}\n readOnly={this.readonly}\n onInput={this.handleInput}\n onFocus={this.handleInputFocus}\n onBlur={this.handleInputBlur}\n onKeyDown={this.handleKeyDown} // Gérer les touches fléchées ici\n />\n ) : (\n <p\n id={this.inputId}\n class=\"non-filterable-text\"\n onClick={this.handleInputContainerClick}\n tabIndex={0} // Ajout du tabindex pour permettre de le focus\n onKeyDown={this.handleKeyDown} // Gérer les touches fléchées ici également\n onFocus={this.handleInputFocus}\n >\n <span>{this.value || this.placeholder}</span>\n </p>\n )}\n\n <nv-iconbutton\n class=\"toggle-dropdown-icon\"\n name={this.open ? 'chevron-top' : 'chevron-down'}\n size=\"md\"\n emphasis=\"lower\"\n aria-label={this.open ? 'Hide dropdown' : 'Show dropdown'}\n aria-pressed={this.open.toString()}\n onClick={this.togglePopover}\n />\n </div>\n\n <slot name=\"after-input\"></slot>\n </div>\n\n <slot name=\"content\"></slot>\n </nv-popover>\n\n {(this.description ||\n this.el.querySelector('[slot=\"description\"]')) && (\n <div class=\"description\">\n <slot name=\"description\">{this.description}</slot>\n </div>\n )}\n\n {(this.errorDescription ||\n this.el.querySelector('[slot=\"error-description\"]')) && (\n <div hidden={!this.error} class=\"error-description\">\n <slot name=\"error-description\">{this.errorDescription}</slot>\n </div>\n )}\n </Host>\n );\n }\n //#endregion RENDER\n}\n"]}
|
|
@@ -2,9 +2,8 @@ nv-fielddropdownitem {
|
|
|
2
2
|
display: flex;
|
|
3
3
|
align-items: center;
|
|
4
4
|
justify-content: space-between;
|
|
5
|
-
max-width: 300px;
|
|
6
5
|
width: 100%;
|
|
7
|
-
padding: var(--
|
|
6
|
+
padding: var(--list-custom-item-padding-y) var(--list-custom-item-padding-x);
|
|
8
7
|
font-size: var(--menu-contextual-item-font-size);
|
|
9
8
|
font-weight: var(--menu-contextual-item-font-weight);
|
|
10
9
|
color: var(--components-menu-contextual-item-content);
|
|
@@ -13,18 +12,20 @@ nv-fielddropdownitem {
|
|
|
13
12
|
cursor: pointer;
|
|
14
13
|
}
|
|
15
14
|
nv-fielddropdownitem:hover, nv-fielddropdownitem:focus, nv-fielddropdownitem:focus-within {
|
|
16
|
-
background-color: var(--components-
|
|
15
|
+
background-color: var(--components-list-custom-item-background-hover);
|
|
17
16
|
color: var(--components-menu-contextual-item-content-hover);
|
|
18
17
|
}
|
|
19
|
-
nv-fielddropdownitem.selected {
|
|
20
|
-
background-color: var(--components-menu-contextual-item-background-selected);
|
|
21
|
-
color: var(--components-menu-contextual-item-content-selected);
|
|
22
|
-
}
|
|
23
18
|
nv-fielddropdownitem[disabled]:not([disabled=false]) {
|
|
24
19
|
cursor: not-allowed;
|
|
25
20
|
background-color: unset;
|
|
26
21
|
color: var(--components-menu-contextual-item-content-disabled);
|
|
27
22
|
}
|
|
23
|
+
nv-fielddropdownitem .dropdown-item-text-wrapper {
|
|
24
|
+
display: flex;
|
|
25
|
+
flex-grow: 1;
|
|
26
|
+
align-items: center;
|
|
27
|
+
justify-content: space-between;
|
|
28
|
+
}
|
|
28
29
|
nv-fielddropdownitem [data-scope=text] {
|
|
29
30
|
flex-grow: 1;
|
|
30
31
|
overflow: hidden;
|
|
@@ -32,15 +33,6 @@ nv-fielddropdownitem [data-scope=text] {
|
|
|
32
33
|
white-space: nowrap;
|
|
33
34
|
}
|
|
34
35
|
nv-fielddropdownitem .selection-icon {
|
|
35
|
-
|
|
36
|
-
color: var(--components-menu-contextual-item-icon-selected);
|
|
36
|
+
color: var(--components-list-custom-item-content-default);
|
|
37
37
|
align-self: center;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
:root {
|
|
41
|
-
--components-menu-contextual-item-background-selected: #f5f6f7;
|
|
42
|
-
--components-menu-contextual-item-content-selected: #171f22;
|
|
43
|
-
--components-menu-contextual-item-icon-selected: #007f00;
|
|
44
|
-
--components-menu-contextual-item-background-hover: #f5f6f7;
|
|
45
|
-
--components-menu-contextual-item-content-hover: #171f22;
|
|
46
38
|
}
|
|
@@ -4,6 +4,16 @@ import { Host, h, } from "@stencil/core";
|
|
|
4
4
|
*/
|
|
5
5
|
export class NvFielddropdownitem {
|
|
6
6
|
constructor() {
|
|
7
|
+
/****************************************************************************/
|
|
8
|
+
//#region PROPERTIES
|
|
9
|
+
/**
|
|
10
|
+
* Disables the item, preventing any user interaction.
|
|
11
|
+
*/
|
|
12
|
+
this.disabled = false;
|
|
13
|
+
/**
|
|
14
|
+
* Indicates if the item is selected.
|
|
15
|
+
*/
|
|
16
|
+
this.selected = false;
|
|
7
17
|
this.handleClick = () => {
|
|
8
18
|
if (!this.disabled) {
|
|
9
19
|
let itemValue = this.value || '';
|
|
@@ -23,10 +33,6 @@ export class NvFielddropdownitem {
|
|
|
23
33
|
});
|
|
24
34
|
}
|
|
25
35
|
};
|
|
26
|
-
this.disabled = false;
|
|
27
|
-
this.selected = false;
|
|
28
|
-
this.value = undefined;
|
|
29
|
-
this.label = undefined;
|
|
30
36
|
}
|
|
31
37
|
//#endregion EVENTS
|
|
32
38
|
/****************************************************************************/
|
|
@@ -44,7 +50,7 @@ export class NvFielddropdownitem {
|
|
|
44
50
|
//#region RENDER
|
|
45
51
|
render() {
|
|
46
52
|
const showDefaultLayout = this.isNullOrEmptyOrWhitespace(this.label);
|
|
47
|
-
return (h(Host, { key: '0b0070ad824841f49bf5c24423131c46c41ef4ef', role: "menuitem", tabindex: this.disabled ? '-1' : '0', onClick: this.handleClick, class: { selected: this.selected } }, showDefaultLayout ? (h("slot", null)) : (h("div", { class: "
|
|
53
|
+
return (h(Host, { key: '0b0070ad824841f49bf5c24423131c46c41ef4ef', role: "menuitem", tabindex: this.disabled ? '-1' : '0', onClick: this.handleClick, class: { selected: this.selected } }, showDefaultLayout ? (h("slot", null)) : (h("div", { class: "dropdown-item-text-wrapper" }, h("span", { "data-scope": "text" }, this.label), this.selected && (h("nv-icon", { name: "check", "aria-hidden": "true", class: "selection-icon" }))))));
|
|
48
54
|
}
|
|
49
55
|
static get is() { return "nv-fielddropdownitem"; }
|
|
50
56
|
static get originalStyleUrls() {
|
|
@@ -73,6 +79,8 @@ export class NvFielddropdownitem {
|
|
|
73
79
|
"tags": [],
|
|
74
80
|
"text": "Disables the item, preventing any user interaction."
|
|
75
81
|
},
|
|
82
|
+
"getter": false,
|
|
83
|
+
"setter": false,
|
|
76
84
|
"attribute": "disabled",
|
|
77
85
|
"reflect": true,
|
|
78
86
|
"defaultValue": "false"
|
|
@@ -91,6 +99,8 @@ export class NvFielddropdownitem {
|
|
|
91
99
|
"tags": [],
|
|
92
100
|
"text": "Indicates if the item is selected."
|
|
93
101
|
},
|
|
102
|
+
"getter": false,
|
|
103
|
+
"setter": false,
|
|
94
104
|
"attribute": "selected",
|
|
95
105
|
"reflect": true,
|
|
96
106
|
"defaultValue": "false"
|
|
@@ -109,6 +119,8 @@ export class NvFielddropdownitem {
|
|
|
109
119
|
"tags": [],
|
|
110
120
|
"text": "Value associated with the item."
|
|
111
121
|
},
|
|
122
|
+
"getter": false,
|
|
123
|
+
"setter": false,
|
|
112
124
|
"attribute": "value",
|
|
113
125
|
"reflect": true
|
|
114
126
|
},
|
|
@@ -126,6 +138,8 @@ export class NvFielddropdownitem {
|
|
|
126
138
|
"tags": [],
|
|
127
139
|
"text": "Label used as the value for the default layout."
|
|
128
140
|
},
|
|
141
|
+
"getter": false,
|
|
142
|
+
"setter": false,
|
|
129
143
|
"attribute": "label",
|
|
130
144
|
"reflect": true
|
|
131
145
|
}
|