@nova-design-system/nova-webcomponents 3.0.0-beta.31 → 3.0.0-beta.33
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 +370 -128
- package/dist/cjs/{app-globals-69764290.js → app-globals-6b0931bc.js} +2 -2
- package/dist/cjs/app-globals-6b0931bc.js.map +1 -0
- package/dist/cjs/{constants-33057c89.js → constants-9525a915.js} +7 -1
- package/dist/cjs/constants-9525a915.js.map +1 -0
- package/dist/cjs/{index-72b8a9ad.js → index-ddc37f87.js} +22 -10
- package/dist/cjs/index-ddc37f87.js.map +1 -0
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +3 -3
- package/dist/cjs/native.cjs.js +3 -3
- package/dist/cjs/nv-alert.cjs.entry.js +3 -3
- package/dist/cjs/nv-avatar.cjs.entry.js +4 -4
- package/dist/cjs/nv-avatar.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-badge.cjs.entry.js +4 -4
- package/dist/cjs/nv-badge.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-base.cjs.entry.js +2 -3
- package/dist/cjs/nv-base.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-breadcrumb.cjs.entry.js +47 -0
- package/dist/cjs/nv-breadcrumb.cjs.entry.js.map +1 -0
- package/dist/cjs/nv-breadcrumbs.cjs.entry.js +23 -0
- package/dist/cjs/nv-breadcrumbs.cjs.entry.js.map +1 -0
- package/dist/cjs/nv-button.cjs.entry.js +4 -4
- package/dist/cjs/nv-button.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-col.cjs.entry.js +2 -2
- package/dist/cjs/nv-datagrid.cjs.entry.js +4 -4
- package/dist/cjs/nv-datagrid.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-datagridbody.cjs.entry.js +2 -2
- package/dist/cjs/nv-datagridcolumn.cjs.entry.js +2 -2
- package/dist/cjs/nv-datagriddatacell.cjs.entry.js +2 -2
- package/dist/cjs/nv-datagridhead.cjs.entry.js +2 -2
- package/dist/cjs/nv-datagridrow.cjs.entry.js +2 -2
- package/dist/cjs/nv-fieldcheckbox.cjs.entry.js +5 -5
- package/dist/cjs/nv-fielddropdown.cjs.entry.js +64 -25
- package/dist/cjs/nv-fielddropdown.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fielddropdownitem.cjs.entry.js +2 -2
- package/dist/cjs/nv-fieldnumber.cjs.entry.js +4 -4
- package/dist/cjs/nv-fieldpassword.cjs.entry.js +4 -4
- package/dist/cjs/nv-fieldpassword.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fieldradio.cjs.entry.js +4 -4
- package/dist/cjs/nv-fieldselect.cjs.entry.js +9 -9
- package/dist/cjs/nv-fieldselect.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fieldtext.cjs.entry.js +4 -4
- package/dist/cjs/nv-fieldtext.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fieldtextarea.cjs.entry.js +46 -44
- package/dist/cjs/nv-fieldtextarea.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fieldtoggle.cjs.entry.js +3 -3
- package/dist/cjs/nv-icon.cjs.entry.js +3 -3
- package/dist/cjs/nv-icon.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-iconbutton.cjs.entry.js +3 -3
- package/dist/cjs/nv-iconbutton.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-loader.cjs.entry.js +2 -2
- package/dist/cjs/nv-menu.cjs.entry.js +7 -44
- package/dist/cjs/nv-menu.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-menuitem.cjs.entry.js +30 -3
- package/dist/cjs/nv-menuitem.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-popover.cjs.entry.js +21 -7
- package/dist/cjs/nv-popover.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-row.cjs.entry.js +2 -2
- package/dist/cjs/nv-stack.cjs.entry.js +2 -2
- package/dist/cjs/nv-table.cjs.entry.js +3 -3
- package/dist/cjs/nv-tablebody.cjs.entry.js +2 -2
- package/dist/cjs/nv-tablecolumn.cjs.entry.js +2 -2
- package/dist/cjs/nv-tabledatacell.cjs.entry.js +2 -2
- 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 +6 -5
- package/dist/cjs/nv-tooltip.cjs.entry.js.map +1 -1
- package/dist/collection/collection-manifest.json +3 -1
- package/dist/collection/components/nv-alert/nv-alert.js +1 -1
- package/dist/collection/components/nv-avatar/nv-avatar.css +0 -33
- package/dist/collection/components/nv-avatar/nv-avatar.js +1 -1
- package/dist/collection/components/nv-badge/nv-badge.css +0 -33
- package/dist/collection/components/nv-badge/nv-badge.js +2 -2
- package/dist/collection/components/nv-base/nv-base.js +1 -2
- package/dist/collection/components/nv-base/nv-base.js.map +1 -1
- package/dist/collection/components/nv-breadcrumb/nv-breadcrumb.css +14 -0
- package/dist/collection/components/nv-breadcrumb/nv-breadcrumb.docs.js +6 -0
- package/dist/collection/components/nv-breadcrumb/nv-breadcrumb.docs.js.map +1 -0
- package/dist/collection/components/nv-breadcrumb/nv-breadcrumb.js +111 -0
- package/dist/collection/components/nv-breadcrumb/nv-breadcrumb.js.map +1 -0
- package/dist/collection/components/nv-breadcrumbs/nv-breadcrumbs.css +12 -0
- package/dist/collection/components/nv-breadcrumbs/nv-breadcrumbs.docs.js +34 -0
- package/dist/collection/components/nv-breadcrumbs/nv-breadcrumbs.docs.js.map +1 -0
- package/dist/collection/components/nv-breadcrumbs/nv-breadcrumbs.js +22 -0
- package/dist/collection/components/nv-breadcrumbs/nv-breadcrumbs.js.map +1 -0
- package/dist/collection/components/nv-button/nv-button.docs.js +5 -0
- package/dist/collection/components/nv-button/nv-button.docs.js.map +1 -1
- package/dist/collection/components/nv-button/nv-button.js +3 -3
- package/dist/collection/components/nv-button/nv-button.js.map +1 -1
- package/dist/collection/components/nv-button/{nv-button.css → styles/nv-button.css} +25 -60
- package/dist/collection/components/nv-col/nv-col.js +1 -1
- package/dist/collection/components/nv-datagrid/nv-datagrid.js +3 -3
- package/dist/collection/components/nv-datagrid/nv-datagrid.js.map +1 -1
- package/dist/collection/components/nv-datagridbody/nv-datagridbody.js +1 -1
- package/dist/collection/components/nv-datagridcolumn/nv-datagridcolumn.js +1 -1
- package/dist/collection/components/nv-datagriddatacell/nv-datagriddatacell.js +1 -1
- package/dist/collection/components/nv-datagridhead/nv-datagridhead.js +1 -1
- package/dist/collection/components/nv-datagridrow/nv-datagridrow.js +1 -1
- package/dist/collection/components/nv-fieldcheckbox/nv-fieldcheckbox.js +4 -4
- package/dist/collection/components/nv-fielddropdown/nv-fielddropdown.css +13 -9
- package/dist/collection/components/nv-fielddropdown/nv-fielddropdown.docs.js +8 -19
- package/dist/collection/components/nv-fielddropdown/nv-fielddropdown.docs.js.map +1 -1
- package/dist/collection/components/nv-fielddropdown/nv-fielddropdown.js +63 -24
- package/dist/collection/components/nv-fielddropdown/nv-fielddropdown.js.map +1 -1
- package/dist/collection/components/nv-fielddropdownitem/nv-fielddropdownitem.js +1 -1
- package/dist/collection/components/nv-fieldnumber/nv-fieldnumber.js +3 -3
- package/dist/collection/components/nv-fieldpassword/nv-fieldpassword.js +5 -5
- package/dist/collection/components/nv-fieldpassword/nv-fieldpassword.js.map +1 -1
- package/dist/collection/components/nv-fieldradio/nv-fieldradio.js +3 -3
- package/dist/collection/components/nv-fieldselect/nv-fieldselect.js +10 -10
- package/dist/collection/components/nv-fieldselect/nv-fieldselect.js.map +1 -1
- package/dist/collection/components/nv-fieldtext/nv-fieldtext.docs.js +1 -1
- package/dist/collection/components/nv-fieldtext/nv-fieldtext.docs.js.map +1 -1
- package/dist/collection/components/nv-fieldtext/nv-fieldtext.js +5 -5
- package/dist/collection/components/nv-fieldtext/nv-fieldtext.js.map +1 -1
- package/dist/collection/components/nv-fieldtextarea/nv-fieldtextarea.js +46 -42
- package/dist/collection/components/nv-fieldtextarea/nv-fieldtextarea.js.map +1 -1
- package/dist/collection/components/nv-fieldtoggle/nv-fieldtoggle.js +2 -2
- package/dist/collection/components/nv-icon/nv-icon.js +3 -3
- package/dist/collection/components/nv-icon/nv-icon.js.map +1 -1
- package/dist/collection/components/nv-icon/{nv-icon.css → styles/nv-icon.css} +0 -1
- package/dist/collection/components/nv-iconbutton/nv-iconbutton.js +10 -4
- package/dist/collection/components/nv-iconbutton/nv-iconbutton.js.map +1 -1
- package/dist/collection/components/nv-loader/nv-loader.js +1 -1
- package/dist/collection/components/nv-menu/nv-menu.js +11 -48
- package/dist/collection/components/nv-menu/nv-menu.js.map +1 -1
- package/dist/collection/components/nv-menuitem/nv-menuitem.js +88 -4
- package/dist/collection/components/nv-menuitem/nv-menuitem.js.map +1 -1
- package/dist/collection/components/nv-popover/nv-popover.js +20 -6
- package/dist/collection/components/nv-popover/nv-popover.js.map +1 -1
- package/dist/collection/components/nv-row/nv-row.js +1 -1
- package/dist/collection/components/nv-stack/nv-stack.js +1 -1
- package/dist/collection/components/nv-table/nv-table.js +2 -2
- package/dist/collection/components/nv-tablebody/nv-tablebody.js +1 -1
- package/dist/collection/components/nv-tablecolumn/nv-tablecolumn.js +1 -1
- package/dist/collection/components/nv-tabledatacell/nv-tabledatacell.js +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 +31 -4
- package/dist/collection/components/nv-tooltip/nv-tooltip.js.map +1 -1
- package/dist/collection/dev/dev-components.js +1 -1
- package/dist/collection/dev/dev-components.js.map +1 -1
- package/dist/collection/templates/navigation.docs.js +13 -0
- package/dist/collection/templates/navigation.docs.js.map +1 -0
- package/dist/collection/utils/constants.js +5 -0
- package/dist/collection/utils/constants.js.map +1 -1
- package/dist/components/index.js +4 -4
- package/dist/components/nv-alert.js +4 -4
- package/dist/components/nv-avatar.js +5 -5
- package/dist/components/nv-avatar.js.map +1 -1
- package/dist/components/nv-badge.js +5 -5
- package/dist/components/nv-badge.js.map +1 -1
- package/dist/components/nv-base.js +2 -3
- package/dist/components/nv-base.js.map +1 -1
- package/dist/components/nv-breadcrumb.d.ts +11 -0
- package/dist/components/nv-breadcrumb.js +83 -0
- package/dist/components/nv-breadcrumb.js.map +1 -0
- package/dist/components/nv-breadcrumbs.d.ts +11 -0
- package/dist/components/nv-breadcrumbs.js +37 -0
- package/dist/components/nv-breadcrumbs.js.map +1 -0
- package/dist/components/nv-button.js +5 -5
- package/dist/components/nv-button.js.map +1 -1
- package/dist/components/nv-col.js +2 -2
- package/dist/components/nv-datagrid.js +4 -4
- package/dist/components/nv-datagrid.js.map +1 -1
- package/dist/components/nv-datagridbody.js +2 -2
- package/dist/components/nv-datagridcolumn.js +2 -2
- package/dist/components/nv-datagriddatacell.js +2 -2
- package/dist/components/nv-datagridhead.js +2 -2
- package/dist/components/nv-datagridrow.js +2 -2
- package/dist/components/nv-fieldcheckbox.js +5 -5
- package/dist/components/nv-fielddropdown.js +69 -30
- package/dist/components/nv-fielddropdown.js.map +1 -1
- package/dist/components/nv-fielddropdownitem.js +1 -1
- package/dist/components/nv-fieldnumber.js +5 -5
- package/dist/components/nv-fieldpassword.js +7 -7
- package/dist/components/nv-fieldpassword.js.map +1 -1
- package/dist/components/nv-fieldradio.js +4 -4
- package/dist/components/nv-fieldselect.js +11 -11
- package/dist/components/nv-fieldselect.js.map +1 -1
- package/dist/components/nv-fieldtext.js +5 -5
- package/dist/components/nv-fieldtext.js.map +1 -1
- package/dist/components/nv-fieldtextarea.js +48 -45
- package/dist/components/nv-fieldtextarea.js.map +1 -1
- package/dist/components/nv-fieldtoggle.js +3 -3
- 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 +9 -46
- package/dist/components/nv-menu.js.map +1 -1
- package/dist/components/nv-menuitem.js +34 -6
- 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 +2 -2
- package/dist/components/nv-table.js +3 -3
- package/dist/components/nv-tablebody.js +2 -2
- package/dist/components/nv-tablecolumn.js +2 -2
- package/dist/components/nv-tabledatacell.js +2 -2
- package/dist/components/nv-tablehead.js +2 -2
- package/dist/components/nv-tablerow.js +2 -2
- package/dist/components/nv-tooltip.js +1 -63
- package/dist/components/nv-tooltip.js.map +1 -1
- package/dist/components/{p-ca5c171f.js → p-09a2a880.js} +4 -4
- package/dist/components/{p-ca5c171f.js.map → p-09a2a880.js.map} +1 -1
- package/dist/components/{p-f0d5586a.js → p-0cdf2cc7.js} +6 -6
- package/dist/components/p-0cdf2cc7.js.map +1 -0
- package/dist/components/{p-c08a278d.js → p-3a65a05e.js} +6 -2
- package/dist/components/p-3a65a05e.js.map +1 -0
- package/dist/components/{p-0caa4741.js → p-3b209e94.js} +17 -3
- package/dist/components/{p-c08a278d.js.map → p-3b209e94.js.map} +1 -1
- package/dist/{esm/constants-e9bee611.js → components/p-74407727.js} +7 -1
- package/dist/components/p-74407727.js.map +1 -0
- package/dist/components/{p-39e93e5b.js → p-a61d9ce8.js} +4 -4
- package/dist/{native/p-d4277c50.entry.js.map → components/p-a61d9ce8.js.map} +1 -1
- package/dist/components/{p-3ef4ded9.js → p-b7462fc2.js} +3 -3
- package/dist/components/{p-3ef4ded9.js.map → p-b7462fc2.js.map} +1 -1
- package/dist/components/{p-1fa35ae5.js → p-ce67d70c.js} +23 -9
- package/dist/components/p-ce67d70c.js.map +1 -0
- package/dist/components/p-e7131c30.js +69 -0
- package/dist/components/p-e7131c30.js.map +1 -0
- package/dist/docs.json +377 -143
- package/dist/esm/{app-globals-c5484a00.js → app-globals-246d6b7c.js} +2 -2
- package/dist/esm/app-globals-246d6b7c.js.map +1 -0
- package/dist/{components/p-a15ddd42.js → esm/constants-7b642e1d.js} +7 -1
- package/dist/esm/constants-7b642e1d.js.map +1 -0
- package/dist/esm/{index-b6f70e4a.js → index-cd557d0a.js} +22 -10
- package/dist/esm/index-cd557d0a.js.map +1 -0
- package/dist/esm/index.js +1 -1
- package/dist/esm/loader.js +4 -4
- package/dist/esm/native.js +4 -4
- package/dist/esm/nv-alert.entry.js +3 -3
- package/dist/esm/nv-avatar.entry.js +4 -4
- package/dist/esm/nv-avatar.entry.js.map +1 -1
- package/dist/esm/nv-badge.entry.js +4 -4
- package/dist/esm/nv-badge.entry.js.map +1 -1
- package/dist/esm/nv-base.entry.js +2 -3
- package/dist/esm/nv-base.entry.js.map +1 -1
- package/dist/esm/nv-breadcrumb.entry.js +43 -0
- package/dist/esm/nv-breadcrumb.entry.js.map +1 -0
- package/dist/esm/nv-breadcrumbs.entry.js +19 -0
- package/dist/esm/nv-breadcrumbs.entry.js.map +1 -0
- package/dist/esm/nv-button.entry.js +4 -4
- package/dist/esm/nv-button.entry.js.map +1 -1
- package/dist/esm/nv-col.entry.js +2 -2
- package/dist/esm/nv-datagrid.entry.js +4 -4
- package/dist/esm/nv-datagrid.entry.js.map +1 -1
- package/dist/esm/nv-datagridbody.entry.js +2 -2
- package/dist/esm/nv-datagridcolumn.entry.js +2 -2
- package/dist/esm/nv-datagriddatacell.entry.js +2 -2
- package/dist/esm/nv-datagridhead.entry.js +2 -2
- package/dist/esm/nv-datagridrow.entry.js +2 -2
- package/dist/esm/nv-fieldcheckbox.entry.js +5 -5
- package/dist/esm/nv-fielddropdown.entry.js +64 -25
- package/dist/esm/nv-fielddropdown.entry.js.map +1 -1
- package/dist/esm/nv-fielddropdownitem.entry.js +2 -2
- package/dist/esm/nv-fieldnumber.entry.js +4 -4
- package/dist/esm/nv-fieldpassword.entry.js +4 -4
- package/dist/esm/nv-fieldpassword.entry.js.map +1 -1
- package/dist/esm/nv-fieldradio.entry.js +4 -4
- package/dist/esm/nv-fieldselect.entry.js +9 -9
- package/dist/esm/nv-fieldselect.entry.js.map +1 -1
- package/dist/esm/nv-fieldtext.entry.js +4 -4
- package/dist/esm/nv-fieldtext.entry.js.map +1 -1
- package/dist/esm/nv-fieldtextarea.entry.js +46 -44
- package/dist/esm/nv-fieldtextarea.entry.js.map +1 -1
- package/dist/esm/nv-fieldtoggle.entry.js +3 -3
- package/dist/esm/nv-icon.entry.js +3 -3
- package/dist/esm/nv-icon.entry.js.map +1 -1
- package/dist/esm/nv-iconbutton.entry.js +3 -3
- package/dist/esm/nv-iconbutton.entry.js.map +1 -1
- package/dist/esm/nv-loader.entry.js +2 -2
- package/dist/esm/nv-menu.entry.js +7 -44
- package/dist/esm/nv-menu.entry.js.map +1 -1
- package/dist/esm/nv-menuitem.entry.js +30 -3
- package/dist/esm/nv-menuitem.entry.js.map +1 -1
- package/dist/esm/nv-popover.entry.js +22 -8
- package/dist/esm/nv-popover.entry.js.map +1 -1
- package/dist/esm/nv-row.entry.js +2 -2
- package/dist/esm/nv-stack.entry.js +2 -2
- package/dist/esm/nv-table.entry.js +3 -3
- package/dist/esm/nv-tablebody.entry.js +2 -2
- package/dist/esm/nv-tablecolumn.entry.js +2 -2
- package/dist/esm/nv-tabledatacell.entry.js +2 -2
- 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 +6 -5
- package/dist/esm/nv-tooltip.entry.js.map +1 -1
- package/dist/native/index.esm.js +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-0710efd7.entry.js +2 -0
- package/dist/native/p-0710efd7.entry.js.map +1 -0
- package/dist/native/p-0f9262ed.entry.js +2 -0
- package/dist/native/{p-dacd68ab.entry.js → p-10a06059.entry.js} +2 -2
- package/dist/native/p-10a06059.entry.js.map +1 -0
- package/dist/native/p-132b8588.entry.js +2 -0
- package/dist/native/{p-c5e3e234.entry.js.map → p-132b8588.entry.js.map} +1 -1
- package/dist/native/p-2063c768.entry.js +2 -0
- package/dist/native/p-2063c768.entry.js.map +1 -0
- package/dist/native/p-2ac838b8.entry.js +2 -0
- package/dist/native/p-2ac838b8.entry.js.map +1 -0
- package/dist/native/p-38d3eee3.js +2 -0
- package/dist/native/p-38d3eee3.js.map +1 -0
- package/dist/native/{p-d4277c50.entry.js → p-3e9521a0.entry.js} +2 -2
- package/dist/native/p-3e9521a0.entry.js.map +1 -0
- package/dist/native/{p-11faaf31.entry.js → p-40f4828a.entry.js} +2 -2
- package/dist/native/p-44cc8b59.entry.js +2 -0
- package/dist/native/p-44cc8b59.entry.js.map +1 -0
- package/dist/native/p-45aa0c68.entry.js +2 -0
- package/dist/native/p-45aa0c68.entry.js.map +1 -0
- package/dist/native/p-4f30312d.entry.js +2 -0
- package/dist/native/p-4f30312d.entry.js.map +1 -0
- package/dist/native/p-52a7f936.entry.js +2 -0
- package/dist/native/{p-50c31094.entry.js → p-5d0dc7c8.entry.js} +2 -2
- package/dist/native/p-5d67a825.entry.js +2 -0
- package/dist/native/{p-47c78fe4.entry.js.map → p-5d67a825.entry.js.map} +1 -1
- package/dist/native/p-5e467b49.entry.js +2 -0
- package/dist/native/p-6c1b9c89.entry.js +2 -0
- package/dist/native/{p-b3ec71c9.entry.js.map → p-6c1b9c89.entry.js.map} +1 -1
- package/dist/native/p-74407727.js +2 -0
- package/dist/native/p-74407727.js.map +1 -0
- package/dist/native/{p-df6c9137.entry.js → p-74778f5f.entry.js} +2 -2
- package/dist/native/p-87b93cc2.entry.js +2 -0
- package/dist/native/p-8f0984b0.entry.js +2 -0
- package/dist/native/p-8f0984b0.entry.js.map +1 -0
- package/dist/native/p-907c3eda.entry.js +2 -0
- package/dist/native/p-91d4b4d7.entry.js +2 -0
- package/dist/native/{p-9f89229b.entry.js → p-9341cf9d.entry.js} +2 -2
- package/dist/native/{p-6ef216c4.js → p-9b093b92.js} +3 -3
- package/dist/native/p-9b093b92.js.map +1 -0
- package/dist/native/{p-31367928.entry.js → p-9cef006d.entry.js} +2 -2
- package/dist/native/{p-01262eaf.entry.js → p-a9b6461b.entry.js} +2 -2
- package/dist/native/p-a9b6461b.entry.js.map +1 -0
- package/dist/native/{p-a89f5542.entry.js → p-b902c7c0.entry.js} +2 -2
- package/dist/native/p-bbc45099.entry.js +2 -0
- package/dist/native/{p-919cf3ec.entry.js → p-c59e3500.entry.js} +2 -2
- package/dist/native/{p-4a64f5b0.entry.js → p-d0f83d1f.entry.js} +2 -2
- package/dist/native/{p-4a64f5b0.entry.js.map → p-d0f83d1f.entry.js.map} +1 -1
- package/dist/native/p-e390557d.entry.js +2 -0
- package/dist/native/p-e390557d.entry.js.map +1 -0
- package/dist/native/p-e56d3715.entry.js +2 -0
- package/dist/native/p-e56d3715.entry.js.map +1 -0
- package/dist/native/{p-e05b0c4a.entry.js → p-e5fbe545.entry.js} +2 -2
- package/dist/native/p-eade52d4.entry.js +2 -0
- package/dist/native/p-eade52d4.entry.js.map +1 -0
- package/dist/native/p-eda8cd9d.entry.js +2 -0
- package/dist/native/p-ee78addb.entry.js +2 -0
- package/dist/native/p-ee78addb.entry.js.map +1 -0
- package/dist/native/p-f1545844.entry.js +2 -0
- package/dist/native/p-f1545844.entry.js.map +1 -0
- package/dist/native/{p-6eb50254.entry.js → p-f2ea8aa9.entry.js} +2 -2
- package/dist/native/{p-6eb50254.entry.js.map → p-f2ea8aa9.entry.js.map} +1 -1
- package/dist/native/p-f42e87b5.entry.js +2 -0
- package/dist/native/{p-0bf2007c.entry.js → p-f4ecacf6.entry.js} +2 -2
- package/dist/native/{p-c85d031d.entry.js → p-f7db0785.entry.js} +3 -3
- package/dist/native/{p-c85d031d.entry.js.map → p-f7db0785.entry.js.map} +1 -1
- package/dist/types/components/nv-base/nv-base.docs.d.ts +1 -1
- package/dist/types/components/nv-breadcrumb/nv-breadcrumb.d.ts +30 -0
- package/dist/types/components/nv-breadcrumb/nv-breadcrumb.docs.d.ts +4 -0
- package/dist/types/components/nv-breadcrumbs/nv-breadcrumbs.d.ts +6 -0
- package/dist/types/components/nv-breadcrumbs/nv-breadcrumbs.docs.d.ts +4 -0
- package/dist/types/components/nv-fielddropdown/nv-fielddropdown.d.ts +4 -1
- package/dist/types/components/nv-fieldpassword/nv-fieldpassword.d.ts +1 -1
- package/dist/types/components/nv-fieldselect/nv-fieldselect.d.ts +1 -1
- package/dist/types/components/nv-fieldtext/nv-fieldtext.d.ts +1 -1
- package/dist/types/components/nv-fieldtextarea/nv-fieldtextarea.d.ts +5 -9
- package/dist/types/components/nv-iconbutton/nv-iconbutton.d.ts +2 -2
- package/dist/types/components/nv-menu/nv-menu.d.ts +4 -5
- package/dist/types/components/nv-menuitem/nv-menuitem.d.ts +25 -1
- package/dist/types/components/nv-popover/nv-popover.d.ts +7 -0
- package/dist/types/components/nv-tooltip/nv-tooltip.d.ts +6 -1
- package/dist/types/components.d.ts +97 -17
- package/dist/types/nova-docs.d.ts +46 -24
- package/dist/types/templates/navigation.docs.d.ts +3 -0
- package/dist/types/utils/constants.d.ts +4 -0
- package/dist/vscode-data.json +113 -72
- package/hydrate/index.js +322 -188
- package/hydrate/index.mjs +322 -188
- package/package.json +17 -15
- package/dist/cjs/app-globals-69764290.js.map +0 -1
- package/dist/cjs/constants-33057c89.js.map +0 -1
- package/dist/cjs/index-72b8a9ad.js.map +0 -1
- package/dist/collection/components/nv-icon/test/nv-icon.test.js +0 -25
- package/dist/collection/components/nv-icon/test/nv-icon.test.js.map +0 -1
- package/dist/components/p-0caa4741.js.map +0 -1
- package/dist/components/p-1fa35ae5.js.map +0 -1
- package/dist/components/p-39e93e5b.js.map +0 -1
- package/dist/components/p-a15ddd42.js.map +0 -1
- package/dist/components/p-f0d5586a.js.map +0 -1
- package/dist/esm/app-globals-c5484a00.js.map +0 -1
- package/dist/esm/constants-e9bee611.js.map +0 -1
- package/dist/esm/index-b6f70e4a.js.map +0 -1
- package/dist/native/p-01262eaf.entry.js.map +0 -1
- package/dist/native/p-17dba26d.entry.js +0 -2
- package/dist/native/p-2a6ca749.entry.js +0 -2
- package/dist/native/p-2a6ca749.entry.js.map +0 -1
- package/dist/native/p-327fa1a0.entry.js +0 -2
- package/dist/native/p-380bcc2b.entry.js +0 -2
- package/dist/native/p-380bcc2b.entry.js.map +0 -1
- package/dist/native/p-47c78fe4.entry.js +0 -2
- package/dist/native/p-605f8b3d.entry.js +0 -2
- package/dist/native/p-605f8b3d.entry.js.map +0 -1
- package/dist/native/p-64ae9a21.entry.js +0 -2
- package/dist/native/p-64ae9a21.entry.js.map +0 -1
- package/dist/native/p-6e8bcd5b.entry.js +0 -2
- package/dist/native/p-6e8bcd5b.entry.js.map +0 -1
- package/dist/native/p-6ef216c4.js.map +0 -1
- package/dist/native/p-7701e4cc.entry.js +0 -2
- package/dist/native/p-7701e4cc.entry.js.map +0 -1
- package/dist/native/p-86947929.entry.js +0 -2
- package/dist/native/p-8f95f4fa.entry.js +0 -2
- package/dist/native/p-93eea6e1.entry.js +0 -2
- package/dist/native/p-95714583.js +0 -2
- package/dist/native/p-95714583.js.map +0 -1
- package/dist/native/p-9fe47948.entry.js +0 -2
- package/dist/native/p-9fe47948.entry.js.map +0 -1
- package/dist/native/p-a15ddd42.js +0 -2
- package/dist/native/p-a15ddd42.js.map +0 -1
- package/dist/native/p-afbc5259.entry.js +0 -2
- package/dist/native/p-afbc5259.entry.js.map +0 -1
- package/dist/native/p-b3ec71c9.entry.js +0 -2
- package/dist/native/p-bbe9a373.entry.js +0 -2
- package/dist/native/p-c2dfee1a.entry.js +0 -2
- package/dist/native/p-c5e3e234.entry.js +0 -2
- package/dist/native/p-dacd68ab.entry.js.map +0 -1
- package/dist/native/p-de9d0b05.entry.js +0 -2
- package/dist/native/p-de9d0b05.entry.js.map +0 -1
- package/dist/native/p-e71fc762.entry.js +0 -2
- package/dist/native/p-e71fc762.entry.js.map +0 -1
- package/dist/native/p-ef7f605a.entry.js +0 -2
- package/dist/native/p-f2e31579.entry.js +0 -2
- package/dist/types/components/nv-icon/test/nv-icon.test.d.ts +0 -1
- /package/dist/native/{p-bbe9a373.entry.js.map → p-0f9262ed.entry.js.map} +0 -0
- /package/dist/native/{p-11faaf31.entry.js.map → p-40f4828a.entry.js.map} +0 -0
- /package/dist/native/{p-f2e31579.entry.js.map → p-52a7f936.entry.js.map} +0 -0
- /package/dist/native/{p-50c31094.entry.js.map → p-5d0dc7c8.entry.js.map} +0 -0
- /package/dist/native/{p-86947929.entry.js.map → p-5e467b49.entry.js.map} +0 -0
- /package/dist/native/{p-df6c9137.entry.js.map → p-74778f5f.entry.js.map} +0 -0
- /package/dist/native/{p-ef7f605a.entry.js.map → p-87b93cc2.entry.js.map} +0 -0
- /package/dist/native/{p-17dba26d.entry.js.map → p-907c3eda.entry.js.map} +0 -0
- /package/dist/native/{p-8f95f4fa.entry.js.map → p-91d4b4d7.entry.js.map} +0 -0
- /package/dist/native/{p-9f89229b.entry.js.map → p-9341cf9d.entry.js.map} +0 -0
- /package/dist/native/{p-31367928.entry.js.map → p-9cef006d.entry.js.map} +0 -0
- /package/dist/native/{p-a89f5542.entry.js.map → p-b902c7c0.entry.js.map} +0 -0
- /package/dist/native/{p-327fa1a0.entry.js.map → p-bbc45099.entry.js.map} +0 -0
- /package/dist/native/{p-919cf3ec.entry.js.map → p-c59e3500.entry.js.map} +0 -0
- /package/dist/native/{p-e05b0c4a.entry.js.map → p-e5fbe545.entry.js.map} +0 -0
- /package/dist/native/{p-93eea6e1.entry.js.map → p-eda8cd9d.entry.js.map} +0 -0
- /package/dist/native/{p-c2dfee1a.entry.js.map → p-f42e87b5.entry.js.map} +0 -0
- /package/dist/native/{p-0bf2007c.entry.js.map → p-f4ecacf6.entry.js.map} +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["nvIconbuttonCss","NvIconbuttonStyle0","NvIconbutton","constructor","hostRef","this","size","emphasis","loading","disabled","active","type","shape","handleClick","event","preventDefault","_b","_a","internals","form","requestSubmit","_d","_c","reset","handleLoadingChange","handleDisabledChange","componentWillLoad","render","h","Host","key","role","tabindex","undefined","class","clsx","onClick","name"],"sources":["src/components/nv-iconbutton/nv-iconbutton.scss?tag=nv-iconbutton","src/components/nv-iconbutton/nv-iconbutton.tsx"],"sourcesContent":["@use \"sass:map\";\n@import \"../../styles/focus-ring\";\n\n/* Variants */\n$button-sizes: (\"xs\", \"sm\", \"md\", \"lg\");\n$button-emphasis: (\"high\", \"medium\", \"low\", \"lower\");\n\n/* Define maps for size-related variables */\n$button-icon-button-padding: (\n \"xs\": var(--button-xs-icon-button-padding),\n \"sm\": var(--button-sm-icon-button-padding),\n \"md\": var(--button-md-icon-button-padding),\n \"lg\": var(--button-lg-icon-button-padding)\n);\n\n$button-gap: (\n \"xs\": var(--button-xs-gap),\n \"sm\": var(--button-sm-gap),\n \"md\": var(--button-md-gap),\n \"lg\": var(--button-lg-gap)\n);\n\n$button-border-radius: (\n \"xs\": var(--button-xs-border-radius),\n \"sm\": var(--button-sm-border-radius),\n \"md\": var(--button-md-border-radius),\n \"lg\": var(--button-lg-border-radius)\n);\n\n$button-line-height: (\n \"xs\": var(--button-xs-line-height),\n \"sm\": var(--button-sm-line-height),\n \"md\": var(--button-md-line-height),\n \"lg\": var(--button-lg-line-height)\n);\n\n$button-font-size: (\n \"xs\": var(--button-xs-font-size),\n \"sm\": var(--button-sm-font-size),\n \"md\": var(--button-md-font-size),\n \"lg\": var(--button-lg-font-size)\n);\n\n/* Define maps for emphasis-related variables */\n$components-button-background: (\n \"high\": var(--components-button-high-background),\n \"medium\": var(--components-button-medium-background),\n \"low\": var(--components-button-low-background),\n \"lower\": var(--components-button-lower-background)\n);\n\n$components-button-border: (\n \"high\": var(--components-button-high-border),\n \"medium\": var(--components-button-medium-border),\n \"low\": var(--components-button-low-border),\n \"lower\": var(--components-button-lower-border)\n);\n\n$components-button-text: (\n \"high\": var(--components-button-high-text),\n \"medium\": var(--components-button-medium-text),\n \"low\": var(--components-button-low-text),\n \"lower\": var(--components-button-lower-text)\n);\n\n$components-button-background-hover: (\n \"high\": var(--components-button-high-background-hover),\n \"medium\": var(--components-button-medium-background-hover),\n \"low\": var(--components-button-low-background-hover),\n \"lower\": var(--components-button-lower-background-hover)\n);\n\n$components-button-text-hover: (\n \"high\": var(--components-button-high-text-hover),\n \"medium\": var(--components-button-medium-text-hover),\n \"low\": var(--components-button-low-text-hover),\n \"lower\": var(--components-button-lower-text-hover)\n);\n\n$components-button-icon: (\n \"high\": var(--components-button-high-icon),\n \"medium\": var(--components-button-medium-icon),\n \"low\": var(--components-button-low-icon),\n \"lower\": var(--components-button-lower-icon)\n);\n\n@mixin root-styles() {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n font-style: normal;\n font-weight: 500;\n font-family: \"TT Norms Pro\", sans-serif;\n transition: background-color 150ms ease-out;\n height: fit-content;\n width: fit-content;\n}\n\n@mixin size-styles($size) {\n padding: map.get($button-icon-button-padding, $size);\n gap: map.get($button-gap, $size);\n border-radius: map.get($button-border-radius, $size);\n line-height: map.get($button-line-height, $size);\n font-size: map.get($button-font-size, $size);\n}\n\n@mixin emphasis-styles($emphasis) {\n background: map.get($components-button-background, $emphasis);\n border: 1px solid map.get($components-button-border, $emphasis);\n color: map.get($components-button-text, $emphasis);\n\n &:hover {\n background: map.get($components-button-background-hover, $emphasis);\n color: map.get($components-button-text-hover, $emphasis);\n }\n\n @include focus-ring();\n\n &:disabled {\n background: map.get($components-button-background, $emphasis);\n color: map.get($components-button-text, $emphasis);\n opacity: 0.5;\n cursor: not-allowed;\n box-shadow: none;\n }\n\n & nv-icon > svg {\n color: map.get($components-button-icon, $emphasis);\n }\n}\n\nnv-iconbutton {\n &.root {\n @include root-styles();\n }\n\n @each $size in $button-sizes {\n &.size-#{$size} {\n @include size-styles($size);\n }\n }\n\n @each $emphasis in $button-emphasis {\n &.emphasis-#{$emphasis} {\n @include emphasis-styles($emphasis);\n }\n }\n\n &.loading {\n [slot=\"leading-icon\"] {\n display: none;\n }\n }\n\n &.shape-rounded {\n border-radius: var(--radius-rounded-full);\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n AttachInternals,\n Element,\n Watch,\n} from '@stencil/core';\nimport clsx from 'clsx';\n\nimport {\n ButtonSize,\n ButtonEmphasis,\n ButtonType,\n IconButtonShape,\n} from '../../utils/constants';\nimport { IconName } from '../nv-icon/nv-icons';\n\n/**\n * @slot default - Content of the button.\n */\n@Component({\n tag: 'nv-iconbutton',\n shadow: false,\n formAssociated: true,\n styleUrl: 'nv-iconbutton.scss',\n scoped: false,\n})\nexport class NvIconbutton {\n @AttachInternals() internals: ElementInternals;\n @Element() el: HTMLNvIconbuttonElement;\n\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * Determines how large or small the button appears, allowing for\n * customization of the button's dimensions to fit different design\n * specifications and user needs.\n */\n @Prop({ reflect: true })\n readonly size: `${ButtonSize}` = 'md';\n\n /**\n * Adjusts the button’s emphasis to make it more or less visually prominent\n * to users. Use this to draw attention to important actions or reduce focus\n * on less critical ones.\n */\n @Prop({ reflect: true })\n readonly emphasis: `${ButtonEmphasis}` = 'high';\n\n /**\n * Set this to true to show a spinner on the button, letting users know that\n * their action is being processed. It helps improve user experience by\n * indicating ongoing activities. The icon is not displayed when the button\n * is loading. Also, the button is disabled. If you want to disable the\n * button, it is not possible. It is automatically disabled when loading.\n */\n @Prop({ reflect: true, mutable: true })\n loading: boolean = false;\n\n /**\n * Disables the button, preventing user interaction.\n */\n @Prop({ mutable: true, reflect: true })\n disabled: boolean = false;\n\n /**\n * Makes the button look active when it’s within a compatible component\n * like a button group.\n */\n @Prop({ reflect: true })\n readonly active: boolean = false;\n\n /**\n * Choose the icon you want to display. This also sets the aria-label for\n * improved accessibility, helping users who rely on screen readers.\n * The icon is not displayed when the button is loading.\n */\n @Prop({ reflect: true })\n readonly name: `${IconName}` | string;\n\n /**\n * Sets the button type to control its function in forms. Use 'submit' to send\n * form data, 'reset' to clear the form, or 'button' for a standard button\n * that doesn’t interact with form submission by default.\n */\n @Prop({ reflect: true })\n readonly type: `${ButtonType}` = 'button';\n\n /**\n * Sets the shape of the button. Choose between square and rounded.\n */\n @Prop({ reflect: true })\n readonly shape: `${IconButtonShape}` = 'square';\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region METHODS\n\n /**\n * Handles form-related actions when the button is clicked.\n * - Submits the form if the button type is 'submit'.\n * - Resets the form if the button type is 'reset'.\n * @param {Event} event - The click event.\n */\n private handleClick = (event: Event) => {\n if (this.disabled) {\n event.preventDefault();\n return;\n }\n\n if (this.type === 'submit') {\n this.internals?.form?.requestSubmit();\n }\n if (this.type === 'reset') {\n this.internals?.form?.reset();\n }\n };\n\n //#endregion METHODS\n /****************************************************************************/\n //#region WATCHERS\n\n @Watch('loading')\n handleLoadingChange(loading: boolean) {\n this.loading = loading;\n this.disabled = loading;\n }\n\n @Watch('disabled')\n handleDisabledChange(disabled: boolean) {\n if (this.loading) {\n this.disabled = this.loading;\n } else {\n this.disabled = disabled;\n }\n }\n\n //#endregion WATCHERS\n /****************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n if (this.loading) {\n this.disabled = this.loading;\n }\n }\n\n //#endregion LIFECYCLE\n /****************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n role=\"button\"\n type={this.type}\n tabindex=\"0\"\n disabled={this.disabled ? true : undefined}\n class={clsx(\n 'root',\n `size-${this.size}`,\n `emphasis-${this.emphasis}`,\n this.loading && 'loading',\n `shape-${this.shape}`,\n )}\n onClick={this.handleClick}\n >\n {this.loading && <nv-loader size={this.size}></nv-loader>}\n\n {!this.loading && <nv-icon name={this.name} size={this.size} />}\n\n <slot></slot>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"mappings":"6FAAA,MAAMA,EAAkB,6nJACxB,MAAAC,EAAeD,E,MC4BFE,EAAY,MAPzB,WAAAC,CAAAC,G,0KAoBWC,KAAAC,KAAwB,KAQxBD,KAAAE,SAAgC,OAUzCF,KAAAG,QAAmB,MAMnBH,KAAAI,SAAoB,MAOXJ,KAAAK,OAAkB,MAgBlBL,KAAAM,KAAwB,SAMxBN,KAAAO,MAA8B,SAY/BP,KAAAQ,YAAeC,I,YACrB,GAAIT,KAAKI,SAAU,CACjBK,EAAMC,iBACN,M,CAGF,GAAIV,KAAKM,OAAS,SAAU,EAC1BK,GAAAC,EAAAZ,KAAKa,aAAS,MAAAD,SAAA,SAAAA,EAAEE,QAAI,MAAAH,SAAA,SAAAA,EAAEI,e,CAExB,GAAIf,KAAKM,OAAS,QAAS,EACzBU,GAAAC,EAAAjB,KAAKa,aAAS,MAAAI,SAAA,SAAAA,EAAEH,QAAI,MAAAE,SAAA,SAAAA,EAAEE,O,GAS1B,mBAAAC,CAAoBhB,GAClBH,KAAKG,QAAUA,EACfH,KAAKI,SAAWD,C,CAIlB,oBAAAiB,CAAqBhB,GACnB,GAAIJ,KAAKG,QAAS,CAChBH,KAAKI,SAAWJ,KAAKG,O,KAChB,CACLH,KAAKI,SAAWA,C,EAQpB,iBAAAiB,GACE,GAAIrB,KAAKG,QAAS,CAChBH,KAAKI,SAAWJ,KAAKG,O,EAQzB,MAAAmB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,SACLpB,KAAMN,KAAKM,KACXqB,SAAS,IACTvB,SAAUJ,KAAKI,SAAW,KAAOwB,UACjCC,MAAOC,EACL,OACA,QAAQ9B,KAAKC,OACb,YAAYD,KAAKE,WACjBF,KAAKG,SAAW,UAChB,SAASH,KAAKO,SAEhBwB,QAAS/B,KAAKQ,aAEbR,KAAKG,SAAWoB,EAAA,aAAAE,IAAA,2CAAWxB,KAAMD,KAAKC,QAErCD,KAAKG,SAAWoB,EAAA,WAAAE,IAAA,2CAASO,KAAMhC,KAAKgC,KAAM/B,KAAMD,KAAKC,OAEvDsB,EAAA,QAAAE,IAAA,6C","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as e,c as o,h as t,a as n,g as i}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as e,c as o,h as t,a as n,g as i}from"./p-9b093b92.js";import{c as r}from"./p-8a1a6e56.js";import{v as a}from"./p-f5ff676c.js";const l='nv-fieldtoggle{display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-fieldtoggle:not([disabled],[readonly]) input,nv-fieldtoggle:not([disabled],[readonly]) label{cursor:pointer}nv-fieldtoggle.label-placement-before{flex-direction:row-reverse}nv-fieldtoggle[disabled]{opacity:0.5}nv-fieldtoggle label{align-self:stretch;color:var(--components-form-text-label-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fieldtoggle .input-container{position:relative;color:var(--components-form-shape-foreground-default)}nv-fieldtoggle .input-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--components-form-shape-foreground-disabled)}nv-fieldtoggle .input-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-toggle-width);height:var(--form-toggle-height);flex-direction:column;align-items:flex-start;border-radius:var(--form-toggle-radius);border-width:var(--form-toggle-border-width);border-style:solid;border-color:var(--components-form-field-border-default);background:var(--components-form-field-background-default)}nv-fieldtoggle .input-container input[type=checkbox]::after{content:"";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-form-shape-foreground-switch-dot);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:25%;transform:translate(-50%, -50%)}nv-fieldtoggle .input-container input[type=checkbox]:hover{border-color:var(--components-form-field-border-hover)}nv-fieldtoggle .input-container input[type=checkbox]:focus{border-color:var(--components-form-field-border-default)}nv-fieldtoggle .input-container input[type=checkbox]:focus,nv-fieldtoggle .input-container input[type=checkbox]:focus-within{outline:none}nv-fieldtoggle .input-container input[type=checkbox]:focus-visible,nv-fieldtoggle .input-container input[type=checkbox]:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-fieldtoggle .input-container input[type=checkbox]:checked{background:var(--components-form-field-background-checked);border-color:var(--components-form-field-background-checked)}nv-fieldtoggle .input-container input[type=checkbox]:checked::after{content:"";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-form-shape-foreground-default);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:75%;transform:translate(-50%, -50%)}nv-fieldtoggle .input-container input[type=checkbox]:checked:focus{background:var(--components-form-field-background-checked);border-color:var(--components-form-field-border-focus)}nv-fieldtoggle .input-container input[type=checkbox]:disabled:not([readonly]){box-shadow:unset;background:var(--components-form-field-background-disabled);border-color:var(--components-form-field-border-default)}nv-fieldtoggle .input-container input[type=checkbox]:disabled:not([readonly]):checked::after{background-color:var(--components-form-shape-foreground-disabled)}nv-fieldtoggle .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:450;line-height:var(--form-description-line-height)}nv-fieldtoggle .text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}';const c=l;const d=class{constructor(t){e(this,t);this.checkedChanged=o(this,"checkedChanged",7);this.inputId=a();this.hideLabel=false;this.checked=false;this.disabled=false;this.readonly=false}onCheckedChanged(e){this.checkedChanged.emit(e)}handleChange(e){const o=e.target;if(o.type==="checkbox"&&o.id===this.inputId){if(this.readonly||this.disabled){e.preventDefault();return}this.checked=o.checked}}render(){return t(n,{key:"ed329e4f412fe907483baaba3c41601df1b4d42b",class:r(this.labelPlacement==="before"&&"label-placement-before")},t("div",{key:"007e241bbcefa7f1cab09beef0f14a5617bcffb5",class:"input-container"},t("input",{key:"95d37868390b5f562b90bc1f9160c8545ca1d99c",type:"checkbox",id:this.inputId,name:this.name,autocomplete:"off",value:this.value,checked:Boolean(this.checked),disabled:this.disabled||this.readonly,readonly:this.readonly})),t("div",{key:"bdd17bd03068f5da78a1a8c69fe672d77bd19c5b",class:"text-container"},(this.label||this.el.querySelector('[slot="label"]'))&&t("label",{key:"24809a89cb508d48a3c67dd495481ea06f287bfd",htmlFor:this.inputId,class:r(this.hideLabel&&"visually-hidden")},t("slot",{key:"a8babfbc290a8f9f3da56145246ade9d1ad6f775",name:"label"},this.label)),(this.description||this.el.querySelector('[slot="description"]'))&&t("div",{key:"075a518f042244c5823bd1bee758462ea111f1cd",class:"description"},t("slot",{key:"c3ac97a983611c0568c0e0753f3c57870fb61cb1",name:"description"},this.description))))}get el(){return i(this)}static get watchers(){return{checked:["onCheckedChanged"]}}};d.style=c;export{d as nv_fieldtoggle};
|
|
2
|
+
//# sourceMappingURL=p-b902c7c0.entry.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as a,h as e,a as c}from"./p-9b093b92.js";const b="";const s=b;const t=class{constructor(e){a(this,e)}render(){return e(c,{key:"57d72ca018eb61884bcc91df678d8c97c44463b5"},e("thead",{key:"30a4ab6720e842aa5fcbebe66f3de4a7fa1aa9e1"},e("slot",{key:"03ac5c8da1260aa29acb359e2b6fe53fb36bfac4"})))}};t.style=s;export{t as nv_tablehead};
|
|
2
|
+
//# sourceMappingURL=p-bbc45099.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as e,c as r,h as o,a as d,g as i}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as e,c as r,h as o,a as d,g as i}from"./p-9b093b92.js";import{c as a}from"./p-8a1a6e56.js";import{v as n}from"./p-f5ff676c.js";const t='nv-fieldradio{--nv-fieldradio-border-default:var(--components-form-field-border-default);--nv-fieldradio-border-hover:var(--components-form-field-border-hover);--nv-fieldradio-border-focus:var(--components-form-field-border-default);--nv-fieldradio-background-default:var(--components-form-field-background-default);--nv-fieldradio-background-checked:var(--components-form-field-background-checked);--nv-fieldradio-background-disabled:var(--components-form-field-background-disabled);--nv-fieldradio-focus-box-shadow:var(--color-focus-brand);--nv-fieldradio-dot-color-checked:var(--components-form-shape-foreground-default);--nv-fieldradio-dot-color-disabled:var(--components-form-shape-foreground-disabled);--nv-fieldradio-outline-color:var(--color-focus-brand);display:inline-flex;align-items:flex-start;gap:var(--form-gap-x)}nv-fieldradio:not([disabled]) input,nv-fieldradio:not([disabled]) label,nv-fieldradio[disabled=false] input,nv-fieldradio[disabled=false] label{cursor:pointer}nv-fieldradio.error{--nv-fieldradio-border-default:var(--components-form-field-border-error);--nv-fieldradio-border-hover:var(--nv-fieldradio-border-default);--nv-fieldradio-border-focus:var(--components-form-field-border-error);--nv-fieldradio-background-checked:var(--components-form-field-background-error);--nv-fieldradio-focus-box-shadow:var(--color-focus-destructive);--nv-fieldradio-dot-color-checked:var(--components-form-shape-foreground-default);--nv-fieldradio-dot-color-disabled:var(--components-form-field-border-error);--nv-fieldradio-outline-color:var(--color-focus-destructive)}nv-fieldradio.label-placement-before{flex-direction:row-reverse}nv-fieldradio[disabled]{opacity:0.5}nv-fieldradio label{align-self:stretch;color:var(--components-form-text-label-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--form-label-font-weight);line-height:var(--form-label-line-height)}nv-fieldradio input[type=radio]{appearance:none;position:relative;display:flex;width:var(--form-radio-size);height:var(--form-radio-size);padding:var(--form-radio-inner-circle-padding);flex-direction:column;align-items:flex-start;border-radius:var(--radius-rounded-full);border-width:var(--form-radio-border-width);border-style:solid;border-color:var(--nv-fieldradio-border-default);background:var(--nv-fieldradio-background-default)}nv-fieldradio input[type=radio]:hover{border-color:var(--nv-fieldradio-border-hover)}nv-fieldradio input[type=radio]:focus{border-color:var(--nv-fieldradio-border-focus)}nv-fieldradio input[type=radio]:focus,nv-fieldradio input[type=radio]:focus-within{outline:none}nv-fieldradio input[type=radio]:focus-visible,nv-fieldradio input[type=radio]:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--nv-fieldradio-outline-color);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-fieldradio input[type=radio]:checked{background:var(--nv-fieldradio-background-checked);border-color:var(--nv-fieldradio-background-checked)}nv-fieldradio input[type=radio]:checked:hover,nv-fieldradio input[type=radio]:checked:focus{border-color:var(--nv-fieldradio-background-checked);background:var(--nv-fieldradio-background-checked)}nv-fieldradio input[type=radio]:checked::before{content:"";position:absolute;top:50%;right:50%;transform:translate(50%, -50%);left:0;width:var(--form-radio-inner-circle-size);height:var(--form-radio-inner-circle-size);flex-shrink:0;border-radius:var(--radius-rounded-full);background:var(--nv-fieldradio-dot-color-checked)}nv-fieldradio input[type=radio]:disabled{border-radius:var(--radius-rounded-full);border-width:var(--form-radio-border-width);border-style:solid;border-color:var(--nv-fieldradio-border-default);background:var(--nv-fieldradio-background-disabled)}nv-fieldradio input[type=radio]:disabled:checked::before{background:var(--nv-fieldradio-dot-color-disabled)}nv-fieldradio input[type=radio]:disabled:hover{border-color:var(--nv-fieldradio-border-default);background:var(--nv-fieldradio-background-disabled)}nv-fieldradio .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:var(--form-description-font-weight);line-height:var(--form-description-line-height)}nv-fieldradio .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:var(--form-description-font-weight);line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fieldradio .text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}';const l=t;const f=class{constructor(o){e(this,o);this.checkedChanged=r(this,"checkedChanged",7);this.labelBefore=false;this.inputId=n();this.error=false;this.checked=false;this.disabled=false}componentWillRender(){if(this.message){this.description=this.message}if(this.labelBefore){this.labelPlacement="before"}}handleCheckedChange(e){this.checkedChanged.emit(e)}handleChange(e){const r=e.target;if((r===null||r===void 0?void 0:r.type)==="radio"){Array.from(document.getElementsByTagName("nv-fieldradio")).forEach((e=>{if(e.name===this.name){e.checked=false}}));this.checked=r.checked}}render(){return o(d,{key:"c180e5204343412df6b2539cd46d7bd53d2d7f19",class:a(this.labelPlacement==="before"&&"label-placement-before",this.error&&"error")},o("input",{key:"778a3ddc598a81df45f6eecda4660f95af48795a",type:"radio",id:this.inputId,name:this.name,autocomplete:"off",value:this.value,checked:this.checked,disabled:this.disabled}),o("div",{key:"82e3e9ed3cdcd5918f824e5956e720ba04ec3160",class:"text-container"},(this.label||this.el.querySelector('[slot="label"]'))&&o("label",{key:"b906d712188ef0ba06c177021b81b9b8132e2d58",htmlFor:this.inputId},o("slot",{key:"2c81a91a98d2d4739d6b912a0018826830b17c7f",name:"label"},this.label)),(this.description||this.el.querySelector('[slot="description"]'))&&o("div",{key:"1caa426f06d0d5fcb9fe59e58be7000c854fceb9",class:"description"},o("slot",{key:"ba454a12b8f535db62945a145c665f189624dc61",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&o("div",{key:"bf7a31b55f2716cb6436b595d0d96a1974c9c313",hidden:!this.error,class:"error-description"},o("slot",{key:"9a3b54c1e06d7e42eee9c4ca8e213270b66306b6",name:"error-description"},this.errorDescription))))}static get formAssociated(){return true}get el(){return i(this)}static get watchers(){return{checked:["handleCheckedChange"]}}};f.style=l;export{f as nv_fieldradio};
|
|
2
|
+
//# sourceMappingURL=p-c59e3500.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as e,c as r,h as o,a as t,g as i}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as e,c as r,h as o,a as t,g as i}from"./p-9b093b92.js";import{v as n}from"./p-f5ff676c.js";const d='nv-fieldtext{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box}nv-fieldtext[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldtext[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fieldtext[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fieldtext[required]:not([required=false]) label::after{content:"*";color:var(--components-form-text-required);font-weight:700}nv-fieldtext label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fieldtext .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldtext .input-wrapper .input-container{display:flex;flex-grow:1;padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);justify-content:center;align-items:center;gap:var(--form-field-gap);align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldtext .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldtext .input-wrapper .input-container:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldtext .input-wrapper .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldtext .input-wrapper .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldtext .input-wrapper .input-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height)}nv-fieldtext .input-wrapper .input-container input:focus{outline:none}nv-fieldtext .input-wrapper .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:"TT Norms Pro", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldtext .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldtext .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldtext .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}';const a=d;const l=class{constructor(o){e(this,o);this.valueChanged=r(this,"valueChanged",7);this.inputId=n();this.type="text";this.disabled=false;this.readonly=false;this.required=false;this.error=false;this.success=false;this.multiple=false;this.handleInput=e=>{const r=e.target;this.value=r.value;this.valueChanged.emit(r.value)};this.handleInputContainerClick=()=>{this.inputElement.focus()}}componentWillRender(){if(this.textInputType){this.type=this.textInputType}if(this.message){this.description=this.message}if(this.validation){this.errorDescription=this.validation;this.error=true}}render(){return o(t,{key:"515758fdb12fd8df454fb1d1113356b20fc1600b"},(this.label||this.el.querySelector('[slot="label"]'))&&o("label",{key:"fc24e70454352dfbf2df977f3287fba276c67cd1",htmlFor:this.inputId},o("slot",{key:"422c1c9bd42de0a998b8fc45e000c6a30d9a49f3",name:"label"},this.label)),o("div",{key:"b1ad372ab559d8245ce184c6abceafa468e449f0",class:"input-wrapper"},o("slot",{key:"e30624a7b5db6510db337a408bc069de37bbdbea",name:"before-input"}),o("div",{key:"13657397c9ac78dc97f9b94b8fdbd46126aceb16",class:"input-container",onClick:this.handleInputContainerClick},o("slot",{key:"edf3ee8cc920870aa907f1bbbeaca6cc8d38219c",name:"leading-input"}),o("input",{key:"afab7a4f2575e5e8a1e675aee9b21e90803db7a6",id:this.inputId,ref:e=>this.inputElement=e,placeholder:this.placeholder,name:this.name,type:this.type,disabled:this.disabled,readOnly:this.readonly,required:this.required,maxlength:this.maxlength,minlength:this.minlength,pattern:this.pattern,autocomplete:this.autocomplete,multiple:this.multiple,value:this.value,onInput:this.handleInput}),this.error&&o("nv-icon",{key:"8f9746766d8ca61d34671e7957b46a256a54e726",name:"alert-circle",class:"validation",size:"sm"}),this.success&&o("nv-icon",{key:"99abc485edd96a5d772f83339d02141896e99dd9",name:"circle-check",class:"validation",size:"sm"})),o("slot",{key:"4a0bc519345614a07968e3e7c5d25efc9ba40a02",name:"after-input"})),(this.description||this.el.querySelector('[slot="description"]'))&&o("div",{key:"d46001bfd7c7a485a9c4dcfa93beafb65dda7b5c",class:"description"},o("slot",{key:"7580203ed856a803d5dc6d264e10c72c3714de06",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&o("div",{key:"52ee56aa45e9876b075237f3ddb89618a34567e9",hidden:!this.error,class:"error-description"},o("slot",{key:"8ee7a5a7cbbcce96e8a94651c140e163a0545286",name:"error-description"},this.errorDescription)))}static get formAssociated(){return true}get el(){return i(this)}};l.style=a;export{l as nv_fieldtext};
|
|
2
|
+
//# sourceMappingURL=p-d0f83d1f.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["nvFieldtextCss","NvFieldtextStyle0","NvFieldtext","constructor","hostRef","this","inputId","uuidv4","type","disabled","readonly","required","error","success","multiple","handleInput","event","input","target","value","valueChanged","emit","handleInputContainerClick","inputElement","focus","componentWillRender","textInputType","message","description","validation","errorDescription","render","h","Host","key","label","el","querySelector","htmlFor","name","class","onClick","id","ref","e","placeholder","readOnly","maxlength","minlength","pattern","autocomplete","onInput","size","hidden"],"sources":["src/components/nv-fieldtext/nv-fieldtext.scss?tag=nv-fieldtext","src/components/nv-fieldtext/nv-fieldtext.tsx"],"sourcesContent":["@import \"../../styles/form-field\";\n\nnv-fieldtext {\n @include form-field-variables();\n @include form-field-root();\n\n &[readonly]:not([readonly=\"false\"]) {\n @include form-field-readonly-variables();\n }\n\n &[error]:not([error=\"false\"]) {\n @include form-field-error-variables();\n }\n\n &[success]:not([success=\"false\"]) {\n @include form-field-success-variables();\n }\n\n &[required]:not([required=\"false\"]) label {\n @include form-field-label-required();\n }\n\n label {\n @include form-field-label();\n }\n\n .input-wrapper {\n @include form-field-input-wrapper();\n\n .input-container {\n @include form-field-input-container();\n\n input {\n @include form-field-input();\n }\n\n nv-icon.validation {\n @include form-field-icon();\n }\n }\n }\n\n .description {\n @include form-field-description();\n }\n\n .error-description {\n @include form-field-error-description();\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { TextInputAutocomplete } from '../../utils/constants';\n\n/**\n * @slot leading-input - Content to be placed before the input text, within the input container.\n * @slot before-input - Content to be placed before the input text, outside the input container.\n * @slot after-input - Content to be placed after the input text, outside the input container.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n tag: 'nv-fieldtext',\n shadow: false,\n formAssociated: true,\n styleUrl: 'nv-fieldtext.scss',\n})\nexport class NvFieldtext {\n @Element() el: HTMLNvFieldtextElement;\n private inputElement!: HTMLInputElement;\n\n /****************************************************************************/\n //#region DEPRECATED\n\n /**\n * Message defines a 'hint ' message for the Text Field.\n * @deprecated use description instead.\n */\n @Prop()\n readonly message: string;\n\n /**\n * Add the message to the validation state.\n * @deprecated use errorDescription and set the error prop instead.\n */\n @Prop()\n readonly validation: string;\n\n /**\n * Type of the input.\n * @deprecated use type instead.\n */\n @Prop()\n readonly textInputType: 'text' | 'tel' | 'email';\n\n componentWillRender() {\n if (this.textInputType) {\n this.type = this.textInputType;\n }\n\n if (this.message) {\n this.description = this.message;\n }\n\n if (this.validation) {\n this.errorDescription = this.validation;\n this.error = true;\n }\n }\n\n //#endregion DEPRECATED\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * Sets the ID for the input element and the for attribute of the associated\n * label. If no ID is provided, a random one will be automatically generated\n * to ensure unique identification, facilitating proper label association and\n * accessibility.\n */\n @Prop({ reflect: true })\n readonly inputId: string = uuidv4();\n\n /**\n * Lets you define the text that explains what users should enter in the text\n * 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, mutable: true })\n 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 */\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 * 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 * The type prop lets you specify what kind of information the input field\n * should accept. Choose 'text' for general words or sentences, 'tel' for\n * phone numbers, or 'email' for email addresses. This makes sure users get\n * the right keyboard and validation for what they need to enter.\n */\n @Prop({ reflect: true, mutable: true })\n type: 'text' | 'tel' | 'email' = 'text';\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 * 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 * 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, mutable: true })\n error: boolean = false;\n\n /**\n * A description that appears when there is an error related to the textfield\n * field.\n * @validator message\n */\n @Prop({ reflect: true, mutable: true })\n errorDescription: string;\n\n /**\n * Changes the input field’s appearance to indicate successful input or\n * validation.\n */\n @Prop({ reflect: true })\n readonly success: boolean = false;\n\n /**\n * Limits how many characters users can type into the input field. It’s\n * helpful for making sure users don’t enter too much information, keeping\n * their input within the allowed limit.\n */\n @Prop({ reflect: true })\n readonly maxlength: number;\n\n /**\n * Ensures that users type at least a certain number of characters into the\n * input field. It’s a way to make sure users provide enough information\n * before moving on.\n */\n @Prop({ reflect: true })\n readonly minlength: number;\n\n /**\n * Set rules for how the input should be formatted. For example, you can\n * require that a phone number includes only digits or that an email address\n * has the correct format. If users don’t follow these rules, they’ll get a\n * prompt to correct their input.\n */\n @Prop({ reflect: true })\n readonly pattern: string;\n\n /**\n * The autocomplete prop helps users fill out the input field faster by\n * suggesting entries they’ve used before, like their email or address.\n * You can turn it on to make forms more convenient or off to ensure users\n * always type in fresh data.\n */\n @Prop({ reflect: true })\n readonly autocomplete: `${TextInputAutocomplete}`;\n\n /**\n * When used with the email input type, this prop enables the field to accept\n * multiple email addresses. Users can enter several addresses, separating\n * each one with a comma, allowing the form to handle multiple recipients.\n */\n @Prop({ reflect: true })\n readonly multiple: boolean = false;\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Emitted when the input value changes.\n * @bind value\n */\n @Event()\n valueChanged: EventEmitter<string>;\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region METHODS\n\n /**\n * Handles the input event on the input element.\n * Emits the inputChanged event with the new value.\n * @param {Event} event - Event object of the input event.\n */\n private handleInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n this.value = input.value;\n this.valueChanged.emit(input.value);\n };\n\n /**\n * Handles focus when the input container is clicked.\n */\n private handleInputContainerClick = () => {\n this.inputElement.focus();\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 <div class=\"input-wrapper\">\n <slot name=\"before-input\"></slot>\n\n <div class=\"input-container\" onClick={this.handleInputContainerClick}>\n <slot name=\"leading-input\"></slot>\n\n <input\n id={this.inputId}\n ref={e => (this.inputElement = e)}\n placeholder={this.placeholder}\n name={this.name}\n type={this.type}\n disabled={this.disabled}\n readOnly={this.readonly}\n required={this.required}\n maxlength={this.maxlength}\n minlength={this.minlength}\n pattern={this.pattern}\n autocomplete={this.autocomplete}\n multiple={this.multiple}\n value={this.value}\n onInput={this.handleInput}\n />\n\n {this.error && (\n <nv-icon name=\"alert-circle\" class=\"validation\" size=\"sm\" />\n )}\n {this.success && (\n <nv-icon name=\"circle-check\" class=\"validation\" size=\"sm\" />\n )}\n </div>\n\n <slot name=\"after-input\"></slot>\n </div>\n\n {(this.description ||\n this.el.querySelector('[slot=\"description\"]')) && (\n <div class=\"description\">\n <slot name=\"description\">{this.description}</slot>\n </div>\n )}\n\n {(this.errorDescription ||\n this.el.querySelector('[slot=\"error-description\"]')) && (\n <div hidden={!this.error} class=\"error-description\">\n <slot name=\"error-description\">{this.errorDescription}</slot>\n </div>\n )}\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"mappings":"oGAAA,MAAMA,EAAiB,itJACvB,MAAAC,EAAeD,E,MC0BFE,EAAW,MANxB,WAAAC,CAAAC,G,qDA4DWC,KAAAC,QAAkBC,IAkD3BF,KAAAG,KAAiC,OAQxBH,KAAAI,SAAoB,MAQpBJ,KAAAK,SAAoB,MAOpBL,KAAAM,SAAoB,MAQ7BN,KAAAO,MAAiB,MAeRP,KAAAQ,QAAmB,MA0CnBR,KAAAS,SAAoB,MAsBrBT,KAAAU,YAAeC,IACrB,MAAMC,EAAQD,EAAME,OACpBb,KAAKc,MAAQF,EAAME,MACnBd,KAAKe,aAAaC,KAAKJ,EAAME,MAAM,EAM7Bd,KAAAiB,0BAA4B,KAClCjB,KAAKkB,aAAaC,OAAO,C,CApM3B,mBAAAC,GACE,GAAIpB,KAAKqB,cAAe,CACtBrB,KAAKG,KAAOH,KAAKqB,a,CAGnB,GAAIrB,KAAKsB,QAAS,CAChBtB,KAAKuB,YAAcvB,KAAKsB,O,CAG1B,GAAItB,KAAKwB,WAAY,CACnBxB,KAAKyB,iBAAmBzB,KAAKwB,WAC7BxB,KAAKO,MAAQ,I,EAgMjB,MAAAmB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,6CACD7B,KAAK8B,OAAS9B,KAAK+B,GAAGC,cAAc,oBACpCL,EAAA,SAAAE,IAAA,2CAAOI,QAASjC,KAAKC,SACnB0B,EAAA,QAAAE,IAAA,2CAAMK,KAAK,SAASlC,KAAK8B,QAI7BH,EAAA,OAAAE,IAAA,2CAAKM,MAAM,iBACTR,EAAA,QAAAE,IAAA,2CAAMK,KAAK,iBAEXP,EAAA,OAAAE,IAAA,2CAAKM,MAAM,kBAAkBC,QAASpC,KAAKiB,2BACzCU,EAAA,QAAAE,IAAA,2CAAMK,KAAK,kBAEXP,EAAA,SAAAE,IAAA,2CACEQ,GAAIrC,KAAKC,QACTqC,IAAKC,GAAMvC,KAAKkB,aAAeqB,EAC/BC,YAAaxC,KAAKwC,YAClBN,KAAMlC,KAAKkC,KACX/B,KAAMH,KAAKG,KACXC,SAAUJ,KAAKI,SACfqC,SAAUzC,KAAKK,SACfC,SAAUN,KAAKM,SACfoC,UAAW1C,KAAK0C,UAChBC,UAAW3C,KAAK2C,UAChBC,QAAS5C,KAAK4C,QACdC,aAAc7C,KAAK6C,aACnBpC,SAAUT,KAAKS,SACfK,MAAOd,KAAKc,MACZgC,QAAS9C,KAAKU,cAGfV,KAAKO,OACJoB,EAAA,WAAAE,IAAA,2CAASK,KAAK,eAAeC,MAAM,aAAaY,KAAK,OAEtD/C,KAAKQ,SACJmB,EAAA,WAAAE,IAAA,2CAASK,KAAK,eAAeC,MAAM,aAAaY,KAAK,QAIzDpB,EAAA,QAAAE,IAAA,2CAAMK,KAAK,kBAGXlC,KAAKuB,aACLvB,KAAK+B,GAAGC,cAAc,0BACtBL,EAAA,OAAAE,IAAA,2CAAKM,MAAM,eACTR,EAAA,QAAAE,IAAA,2CAAMK,KAAK,eAAelC,KAAKuB,eAIjCvB,KAAKyB,kBACLzB,KAAK+B,GAAGC,cAAc,gCACtBL,EAAA,OAAAE,IAAA,2CAAKmB,QAAShD,KAAKO,MAAO4B,MAAM,qBAC9BR,EAAA,QAAAE,IAAA,2CAAMK,KAAK,qBAAqBlC,KAAKyB,mB","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["nvFieldtextCss","NvFieldtextStyle0","NvFieldtext","constructor","hostRef","this","inputId","uuidv4","type","disabled","readonly","required","error","success","multiple","handleInput","event","input","target","value","valueChanged","emit","handleInputContainerClick","inputElement","focus","componentWillRender","textInputType","message","description","validation","errorDescription","render","h","Host","key","label","el","querySelector","htmlFor","name","class","onClick","id","ref","e","placeholder","readOnly","maxlength","minlength","pattern","autocomplete","onInput","size","hidden"],"sources":["src/components/nv-fieldtext/nv-fieldtext.scss?tag=nv-fieldtext","src/components/nv-fieldtext/nv-fieldtext.tsx"],"sourcesContent":["@import \"../../styles/form-field\";\n\nnv-fieldtext {\n @include form-field-variables();\n @include form-field-root();\n\n &[readonly]:not([readonly=\"false\"]) {\n @include form-field-readonly-variables();\n }\n\n &[error]:not([error=\"false\"]) {\n @include form-field-error-variables();\n }\n\n &[success]:not([success=\"false\"]) {\n @include form-field-success-variables();\n }\n\n &[required]:not([required=\"false\"]) label {\n @include form-field-label-required();\n }\n\n label {\n @include form-field-label();\n }\n\n .input-wrapper {\n @include form-field-input-wrapper();\n\n .input-container {\n @include form-field-input-container();\n\n input {\n @include form-field-input();\n }\n\n nv-icon.validation {\n @include form-field-icon();\n }\n }\n }\n\n .description {\n @include form-field-description();\n }\n\n .error-description {\n @include form-field-error-description();\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { TextInputAutocomplete } from '../../utils/constants';\n\n/**\n * @slot leading-input - Content to be placed before the input text, within the input container.\n * @slot before-input - Content to be placed before the input text, outside the input container.\n * @slot after-input - Content to be placed after the input text, outside the input container.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n tag: 'nv-fieldtext',\n shadow: false,\n formAssociated: true,\n styleUrl: 'nv-fieldtext.scss',\n})\nexport class NvFieldtext {\n @Element() el: HTMLNvFieldtextElement;\n private inputElement!: HTMLInputElement;\n\n /****************************************************************************/\n //#region DEPRECATED\n\n /**\n * Message defines a 'hint ' message for the Text Field.\n * @deprecated use description instead.\n */\n @Prop()\n readonly message: string;\n\n /**\n * Add the message to the validation state.\n * @deprecated use errorDescription and set the error prop instead.\n */\n @Prop()\n readonly validation: string;\n\n /**\n * Type of the input.\n * @deprecated use type instead.\n */\n @Prop()\n readonly textInputType: 'text' | 'tel' | 'email';\n\n componentWillRender() {\n if (this.textInputType) {\n this.type = this.textInputType;\n }\n\n if (this.message) {\n this.description = this.message;\n }\n\n if (this.validation) {\n this.errorDescription = this.validation;\n this.error = true;\n }\n }\n\n //#endregion DEPRECATED\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * Sets the ID for the input element and the for attribute of the associated\n * label. If no ID is provided, a random one will be automatically generated\n * to ensure unique identification, facilitating proper label association and\n * accessibility.\n */\n @Prop({ reflect: true })\n readonly inputId: string = uuidv4();\n\n /**\n * Lets you define the text that explains what users should enter in the text\n * 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, mutable: true })\n 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 */\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 * 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 * The type prop lets you specify what kind of information the input field\n * should accept. Choose 'text' for general words or sentences, 'tel' for\n * phone numbers, or 'email' for email addresses. This makes sure users get\n * the right keyboard and validation for what they need to enter.\n */\n @Prop({ reflect: true, mutable: true })\n type: 'text' | 'tel' | 'email' = 'text';\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 * 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 * 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, mutable: true })\n error: boolean = false;\n\n /**\n * A description that appears when there is an error related to the textfield\n * field.\n * @validator message\n */\n @Prop({ reflect: true, mutable: true })\n errorDescription: string;\n\n /**\n * Changes the input field’s appearance to indicate successful input or\n * validation.\n */\n @Prop({ reflect: true })\n readonly success: boolean = false;\n\n /**\n * Limits how many characters users can type into the input field. It’s\n * helpful for making sure users don’t enter too much information, keeping\n * their input within the allowed limit.\n */\n @Prop({ reflect: true })\n readonly maxlength: number;\n\n /**\n * Ensures that users type at least a certain number of characters into the\n * input field. It’s a way to make sure users provide enough information\n * before moving on.\n */\n @Prop({ reflect: true })\n readonly minlength: number;\n\n /**\n * Set rules for how the input should be formatted. For example, you can\n * require that a phone number includes only digits or that an email address\n * has the correct format. If users don’t follow these rules, they’ll get a\n * prompt to correct their input after the form is submitted.\n */\n @Prop({ reflect: true })\n readonly pattern: string;\n\n /**\n * The autocomplete prop helps users fill out the input field faster by\n * suggesting entries they’ve used before, like their email or address.\n * You can turn it on to make forms more convenient or off to ensure users\n * always type in fresh data.\n */\n @Prop({ reflect: true })\n readonly autocomplete: `${TextInputAutocomplete}`;\n\n /**\n * When used with the email input type, this prop enables the field to accept\n * multiple email addresses. Users can enter several addresses, separating\n * each one with a comma, allowing the form to handle multiple recipients.\n */\n @Prop({ reflect: true })\n readonly multiple: boolean = false;\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Emitted when the input value changes.\n * @bind value\n */\n @Event()\n valueChanged: EventEmitter<string>;\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region METHODS\n\n /**\n * Handles the input event on the input element.\n * Emits the inputChanged event with the new value.\n * @param {Event} event - Event object of the input event.\n */\n private handleInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n this.value = input.value;\n this.valueChanged.emit(input.value);\n };\n\n /**\n * Handles focus when the input container is clicked.\n */\n private handleInputContainerClick = () => {\n this.inputElement.focus();\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 <div class=\"input-wrapper\">\n <slot name=\"before-input\"></slot>\n\n <div class=\"input-container\" onClick={this.handleInputContainerClick}>\n <slot name=\"leading-input\"></slot>\n\n <input\n id={this.inputId}\n ref={e => (this.inputElement = e)}\n placeholder={this.placeholder}\n name={this.name}\n type={this.type}\n disabled={this.disabled}\n readOnly={this.readonly}\n required={this.required}\n maxlength={this.maxlength}\n minlength={this.minlength}\n pattern={this.pattern}\n autocomplete={this.autocomplete}\n multiple={this.multiple}\n value={this.value}\n onInput={this.handleInput}\n />\n\n {this.error && (\n <nv-icon name=\"alert-circle\" class=\"validation\" size=\"sm\" />\n )}\n {this.success && (\n <nv-icon name=\"circle-check\" class=\"validation\" size=\"sm\" />\n )}\n </div>\n\n <slot name=\"after-input\"></slot>\n </div>\n\n {(this.description ||\n this.el.querySelector('[slot=\"description\"]')) && (\n <div class=\"description\">\n <slot name=\"description\">{this.description}</slot>\n </div>\n )}\n\n {(this.errorDescription ||\n this.el.querySelector('[slot=\"error-description\"]')) && (\n <div hidden={!this.error} class=\"error-description\">\n <slot name=\"error-description\">{this.errorDescription}</slot>\n </div>\n )}\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"mappings":"oGAAA,MAAMA,EAAiB,itJACvB,MAAAC,EAAeD,E,MC0BFE,EAAW,MANxB,WAAAC,CAAAC,G,qDA4DWC,KAAAC,QAAkBC,IAkD3BF,KAAAG,KAAiC,OAQxBH,KAAAI,SAAoB,MAQpBJ,KAAAK,SAAoB,MAOpBL,KAAAM,SAAoB,MAQ7BN,KAAAO,MAAiB,MAeRP,KAAAQ,QAAmB,MA0CnBR,KAAAS,SAAoB,MAsBrBT,KAAAU,YAAeC,IACrB,MAAMC,EAAQD,EAAME,OACpBb,KAAKc,MAAQF,EAAME,MACnBd,KAAKe,aAAaC,KAAKJ,EAAME,MAAM,EAM7Bd,KAAAiB,0BAA4B,KAClCjB,KAAKkB,aAAaC,OAAO,C,CApM3B,mBAAAC,GACE,GAAIpB,KAAKqB,cAAe,CACtBrB,KAAKG,KAAOH,KAAKqB,a,CAGnB,GAAIrB,KAAKsB,QAAS,CAChBtB,KAAKuB,YAAcvB,KAAKsB,O,CAG1B,GAAItB,KAAKwB,WAAY,CACnBxB,KAAKyB,iBAAmBzB,KAAKwB,WAC7BxB,KAAKO,MAAQ,I,EAgMjB,MAAAmB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,6CACD7B,KAAK8B,OAAS9B,KAAK+B,GAAGC,cAAc,oBACpCL,EAAA,SAAAE,IAAA,2CAAOI,QAASjC,KAAKC,SACnB0B,EAAA,QAAAE,IAAA,2CAAMK,KAAK,SAASlC,KAAK8B,QAI7BH,EAAA,OAAAE,IAAA,2CAAKM,MAAM,iBACTR,EAAA,QAAAE,IAAA,2CAAMK,KAAK,iBAEXP,EAAA,OAAAE,IAAA,2CAAKM,MAAM,kBAAkBC,QAASpC,KAAKiB,2BACzCU,EAAA,QAAAE,IAAA,2CAAMK,KAAK,kBAEXP,EAAA,SAAAE,IAAA,2CACEQ,GAAIrC,KAAKC,QACTqC,IAAKC,GAAMvC,KAAKkB,aAAeqB,EAC/BC,YAAaxC,KAAKwC,YAClBN,KAAMlC,KAAKkC,KACX/B,KAAMH,KAAKG,KACXC,SAAUJ,KAAKI,SACfqC,SAAUzC,KAAKK,SACfC,SAAUN,KAAKM,SACfoC,UAAW1C,KAAK0C,UAChBC,UAAW3C,KAAK2C,UAChBC,QAAS5C,KAAK4C,QACdC,aAAc7C,KAAK6C,aACnBpC,SAAUT,KAAKS,SACfK,MAAOd,KAAKc,MACZgC,QAAS9C,KAAKU,cAGfV,KAAKO,OACJoB,EAAA,WAAAE,IAAA,2CAASK,KAAK,eAAeC,MAAM,aAAaY,KAAK,OAEtD/C,KAAKQ,SACJmB,EAAA,WAAAE,IAAA,2CAASK,KAAK,eAAeC,MAAM,aAAaY,KAAK,QAIzDpB,EAAA,QAAAE,IAAA,2CAAMK,KAAK,kBAGXlC,KAAKuB,aACLvB,KAAK+B,GAAGC,cAAc,0BACtBL,EAAA,OAAAE,IAAA,2CAAKM,MAAM,eACTR,EAAA,QAAAE,IAAA,2CAAMK,KAAK,eAAelC,KAAKuB,eAIjCvB,KAAKyB,kBACLzB,KAAK+B,GAAGC,cAAc,gCACtBL,EAAA,OAAAE,IAAA,2CAAKmB,QAAShD,KAAKO,MAAO4B,MAAM,qBAC9BR,EAAA,QAAAE,IAAA,2CAAMK,KAAK,qBAAqBlC,KAAKyB,mB","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,c as r,h as t,a,g as o}from"./p-9b093b92.js";import{c as i}from"./p-8a1a6e56.js";import{v as n}from"./p-f5ff676c.js";const d='nv-fieldtextarea{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box}nv-fieldtextarea[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldtextarea[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fieldtextarea[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fieldtextarea[required]:not([required=false]) label::after{content:"*";color:var(--components-form-text-required);font-weight:700}nv-fieldtextarea label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fieldtextarea .textarea-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldtextarea .textarea-wrapper .textarea-container{display:flex;flex-grow:1;padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);justify-content:center;align-items:center;gap:var(--form-field-gap);align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldtextarea .textarea-wrapper .textarea-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldtextarea .textarea-wrapper .textarea-container:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldtextarea .textarea-wrapper .textarea-container:has(textarea:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldtextarea .textarea-wrapper .textarea-container:has(textarea:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldtextarea .textarea-wrapper .textarea-container textarea{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height)}nv-fieldtextarea .textarea-wrapper .textarea-container textarea:focus{outline:none}nv-fieldtextarea .textarea-wrapper .textarea-container textarea::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:"TT Norms Pro", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldtextarea .textarea-wrapper .textarea-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldtextarea .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldtextarea .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}';const s=d;const l=class{constructor(t){e(this,t);this.valueChanged=r(this,"valueChanged",7);this.inputId=n();this.disabled=false;this.readonly=false;this.required=false;this.error=false;this.success=false;this.rows=3;this.resize="vertical";this.autosize=false;this.handleTextarea=e=>{const r=e.target;this.value=r.value;this.valueChanged.emit(r.value)};this.handleTextareaContainerClick=()=>{this.textareaElement.focus()}}componentWillRender(){if(this.message){this.description=this.message}if(this.validation){this.errorDescription=this.validation;this.error=true}}rowsChanged(){if(this.autosize){this.adjustTextareaHeight()}}autosizeChanged(){var e;if(this.autosize){this.adjustTextareaHeight()}else{(e=this.textareaElement)===null||e===void 0?void 0:e.style.removeProperty("height")}}handleValueChange(){if(this.autosize){this.adjustTextareaHeight()}}adjustTextareaHeight(){if(this.textareaElement&&this.autosize){requestAnimationFrame((()=>{requestAnimationFrame((()=>{this.textareaElement.style.height="auto";const e=window.getComputedStyle(this.textareaElement);const r=parseFloat(e.lineHeight);const t=parseFloat(e.paddingTop);const a=parseFloat(e.paddingBottom);const o=parseFloat(e.borderTopWidth);const i=parseFloat(e.borderBottomWidth);const n=r*this.rows+t+a+o+i;this.textareaElement.style.minHeight=`${n}px`;this.textareaElement.style.height=this.textareaElement.scrollHeight+"px"}))}))}}componentDidLoad(){if(this.autosize){this.adjustTextareaHeight()}}render(){return t(a,{key:"683a4bf119b61bd928fca68484adafc290242542"},(this.label||this.el.querySelector('[slot="label"]'))&&t("label",{key:"9ee48a620c7d7b5bf13181b4bf2cc013267a98cc",htmlFor:this.inputId},t("slot",{key:"28b618f5639aa84748319ee17e081e67730b85a5",name:"label"},this.label)),t("div",{key:"4086bb637f43dd332d078dc2edef046ab08f5bd6",class:"textarea-wrapper"},t("div",{key:"ee38cea5b14938865de2416d309952357527528c",class:"textarea-container",onClick:this.handleTextareaContainerClick},t("textarea",{key:"fe35a432fe0f737dc49bc37a2a2fdc56c95cef4d",id:this.inputId,ref:e=>this.textareaElement=e,placeholder:this.placeholder,name:this.name,disabled:this.disabled,readOnly:this.readonly,required:this.required,maxlength:this.maxlength,minlength:this.minlength,autocomplete:"off",value:this.value,onInput:this.handleTextarea,rows:this.rows,class:i(this.resize==="none"&&"resize-none",this.resize==="vertical"&&"resize-y",this.resize==="horizontal"&&"resize-x",this.resize==="both"&&"resize")}))),(this.description||this.el.querySelector('[slot="description"]'))&&t("div",{key:"e44539c99f51bf28978c87eea681286959570446",class:"description"},t("slot",{key:"1fc80c66fa30871035cc47e2de35fd7ce390f766",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&t("div",{key:"ecb5d0b11d5b9fb3175824abcc0bcc98433b2dbf",hidden:!this.error,class:"error-description"},t("slot",{key:"28063a5373418b506d30a30fb524cca294024daf",name:"error-description"},this.errorDescription)))}static get formAssociated(){return true}get el(){return o(this)}static get watchers(){return{rows:["rowsChanged"],autosize:["autosizeChanged"],value:["handleValueChange"]}}};l.style=s;export{l as nv_fieldtextarea};
|
|
2
|
+
//# sourceMappingURL=p-e390557d.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["nvFieldtextareaCss","NvFieldtextareaStyle0","NvFieldtextarea","constructor","hostRef","this","inputId","uuidv4","disabled","readonly","required","error","success","rows","resize","autosize","handleTextarea","event","textarea","target","value","valueChanged","emit","handleTextareaContainerClick","textareaElement","focus","componentWillRender","message","description","validation","errorDescription","rowsChanged","adjustTextareaHeight","autosizeChanged","_a","style","removeProperty","handleValueChange","requestAnimationFrame","height","computedStyle","window","getComputedStyle","lineHeight","parseFloat","paddingTop","paddingBottom","borderTopWidth","borderBottomWidth","minHeight","scrollHeight","componentDidLoad","render","h","Host","key","label","el","querySelector","htmlFor","name","class","onClick","id","ref","e","placeholder","readOnly","maxlength","minlength","autocomplete","onInput","clsx","hidden"],"sources":["src/components/nv-fieldtextarea/nv-fieldtextarea.scss?tag=nv-fieldtextarea","src/components/nv-fieldtextarea/nv-fieldtextarea.tsx"],"sourcesContent":["@import \"../../styles/form-field\";\n\n@mixin form-field-textarea-wrapper() {\n display: flex;\n flex-wrap: wrap;\n gap: var(--form-gap-x);\n align-items: stretch;\n align-self: stretch;\n}\n\n@mixin form-field-textarea-container() {\n display: flex;\n flex-grow: 1;\n padding: calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);\n justify-content: center;\n align-items: center;\n gap: var(--form-field-gap);\n align-self: stretch;\n border-radius: var(--form-field-radius);\n border-width: 1px;\n border-style: solid;\n border-color: var(--nv-field-border-default);\n opacity: var(--components-form-opacity-default);\n background: var(--nv-field-background);\n transition: all 150ms ease-out;\n\n &:hover {\n border-color: var(--nv-field-border-hover);\n }\n\n &:focus-within {\n border-color: var(--nv-field-border-focus);\n box-shadow: 0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow);\n }\n // Keep ReadOnly before Disabled\n &:has(textarea:read-only) {\n // opacity: var(--components-form-opacity-readonly, 0.5); broken token generation, is 50px instead of 0.5\n opacity: 0.5;\n background-color: var(--components-form-field-background-readonly);\n border-color: var(--nv-field-border-readonly);\n }\n\n &:has(textarea:disabled) {\n // opacity: var(--components-form-opacity-disabled, 0.5); broken token generation, is 50px instead of 0.5\n opacity: 0.5;\n background-color: var(--components-form-field-background-disabled);\n border-color: var(--nv-field-border-disabled);\n }\n}\n\n@mixin form-field-textarea() {\n display: flex;\n align-items: center;\n flex: 1 0 0;\n overflow: hidden;\n background-color: transparent;\n color: var(--components-form-field-content-text);\n text-overflow: ellipsis;\n font-size: var(--form-field-font-size);\n font-style: normal;\n font-weight: 500;\n line-height: var(--form-field-line-height);\n\n &:focus {\n outline: none;\n }\n\n &::placeholder {\n overflow: hidden;\n color: var(--components-form-field-content-placeholder);\n text-overflow: ellipsis;\n font-family: \"TT Norms Pro\", sans-serif;\n font-size: var(--form-field-font-size);\n font-style: normal;\n font-weight: 400;\n line-height: var(--form-field-line-height);\n }\n}\n\nnv-fieldtextarea {\n @include form-field-variables();\n @include form-field-root();\n\n &[readonly]:not([readonly=\"false\"]) {\n @include form-field-readonly-variables();\n }\n\n &[error]:not([error=\"false\"]) {\n @include form-field-error-variables();\n }\n\n &[success]:not([success=\"false\"]) {\n @include form-field-success-variables();\n }\n\n &[required]:not([required=\"false\"]) label {\n @include form-field-label-required();\n }\n\n label {\n @include form-field-label();\n }\n\n .textarea-wrapper {\n @include form-field-textarea-wrapper();\n\n .textarea-container {\n @include form-field-textarea-container();\n\n textarea {\n @include form-field-textarea();\n }\n\n nv-icon.validation {\n @include form-field-icon();\n }\n }\n }\n\n .description {\n @include form-field-description();\n }\n\n .error-description {\n @include form-field-error-description();\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n Watch,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\nimport clsx from 'clsx';\n\n/**\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n tag: 'nv-fieldtextarea',\n shadow: false,\n formAssociated: true,\n styleUrl: 'nv-fieldtextarea.scss',\n})\nexport class NvFieldtextarea {\n @Element() el: HTMLNvFieldtextareaElement;\n private textareaElement!: HTMLTextAreaElement;\n\n /****************************************************************************/\n //#region DEPRECATED\n\n /**\n * Message defines a 'hint ' message for the Text Field.\n * @deprecated use description instead.\n */\n @Prop()\n readonly message: string;\n\n /**\n * Add the message to the validation state.\n * @deprecated use errorDescription and set the error prop instead.\n */\n @Prop()\n readonly validation: string;\n\n componentWillRender() {\n if (this.message) {\n this.description = this.message;\n }\n\n if (this.validation) {\n this.errorDescription = this.validation;\n this.error = true;\n }\n }\n\n //#endregion DEPRECATED\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * Sets the ID for the input element and the for attribute of the associated\n * label. If no ID is provided, a random one will be automatically generated\n * to ensure unique identification, facilitating proper label association and\n * accessibility.\n */\n @Prop({ reflect: true })\n readonly inputId: string = uuidv4();\n\n /**\n * Lets you define the text that explains what users should enter in the text\n * textarea field. It’s a crucial element for making forms clear and\n * user-friendly.\n */\n @Prop({ reflect: true })\n readonly label: string;\n\n /**\n * Add helpful hints or extra information under the text textarea field. This is\n * where you can clarify what users should enter or provide additional\n * instructions, making the form easier to fill out correctly.\n */\n @Prop({ reflect: true, mutable: true })\n description: string;\n\n /**\n * Display temporary text inside the textarea field to give users a hint about\n * what to type. It’s a great way to provide examples or suggestions directly\n * in the field before they start typing.\n */\n @Prop({ reflect: true })\n readonly placeholder: string;\n\n /**\n * Defines the name attribute of the textarea field, which is crucial for form\n * submission. This value is used as the key in the key-value pair sent to\n * the server, representing the textarea’s data in form submissions. It should be\n * unique within the form to avoid conflicts\n */\n @Prop({ reflect: true })\n readonly name: string;\n\n /**\n * Specifies the value of the textarea field, which determines the text displayed\n * within the field. This prop is typically used in controlled components\n * where the textarea’s value is managed by the component’s state.\n */\n @Prop({ reflect: true, mutable: true })\n value: string;\n\n /**\n * The disabled prop lets you turn off the textarea field so that users can’t\n * type in it. When disabled, the field is grayed out and won’t respond to#\n * clicks or touches.\n */\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /**\n * Display the textarea field’s content without allowing users to change it.\n * Users can still click on it, select, and copy the text, but they won’t be\n * able to type or delete anything.\n */\n @Prop({ reflect: true })\n readonly readonly: boolean = false;\n\n /**\n * Marks the textarea field as required, ensuring that the user must fill it out\n * before submitting the form.\n */\n @Prop({ reflect: true })\n readonly required: boolean = false;\n\n /**\n * Alters the textarea field’s appearance to indicate an error, helping users\n * identify fields that need correction.\n * @validator error\n */\n @Prop({ reflect: true, mutable: true })\n error: boolean = false;\n\n /**\n * Show a helpful message under the textarea field when there’s a problem. It\n * explains what’s wrong and how users can fix it, making the error easier to\n * understand and resolve.\n * @validator message\n */\n @Prop({ reflect: true, mutable: true })\n errorDescription: string;\n\n /**\n * Changes the textarea field’s appearance to indicate successful textarea or\n * validation.\n */\n @Prop({ reflect: true })\n readonly success: boolean = false;\n\n /**\n * Limits how many characters users can type into the textarea field. It’s\n * helpful for making sure users don’t enter too much information, keeping\n * their textarea within the allowed limit.\n */\n @Prop({ reflect: true })\n readonly maxlength: number;\n\n /**\n * Ensures that users type at least a certain number of characters into the\n * textarea field. It’s a way to make sure users provide enough information\n * before moving on.\n */\n @Prop({ reflect: true })\n readonly minlength: number;\n\n /**\n * The number of visible text lines for the control. The default is 3. This\n * can be useful when you want to limit the size of the textarea field or when\n * you want to make the textarea field smaller to fit a specific layout. The\n * textarea field will expand vertically to fit the text as the user types.\n */\n @Prop({ reflect: true })\n readonly rows: number = 3;\n\n /**\n * Controls the resize property of a textarea. It can be set to none, both,\n * horizontal, or vertical. The default is vertical.\n */\n @Prop({ reflect: true })\n readonly resize: 'none' | 'both' | 'horizontal' | 'vertical' = 'vertical';\n\n /**\n * Enable this to make the textarea automatically resize as the user types,\n * adjusting the height to fit the content. For the best experience, avoid\n * vertical resizing, as it’s controlled by this feature. Horizontal resizing\n * can still be allowed if desired.\n */\n @Prop({ reflect: true })\n readonly autosize: boolean = false;\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Emitted when the textarea value changes.\n * @bind value\n */\n @Event()\n valueChanged: EventEmitter<string>;\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region WATCHERS\n\n /**\n * If autosize is true, we need to make sure to update the min-height when\n * the rows change.\n */\n @Watch('rows')\n rowsChanged() {\n if (this.autosize) {\n this.adjustTextareaHeight();\n }\n }\n\n /**\n * If autosize is true, we need to make sure to update the height and\n * min-height, if false, we need to remove the height property.\n */\n @Watch('autosize')\n autosizeChanged() {\n if (this.autosize) {\n this.adjustTextareaHeight();\n } else {\n this.textareaElement?.style.removeProperty('height');\n }\n }\n\n /**\n * Make sure to adjust the height of the textarea when the value changes\n * programmatically or by typing when autosize is on.\n */\n @Watch('value')\n handleValueChange() {\n if (this.autosize) {\n this.adjustTextareaHeight();\n }\n }\n\n //#endregion WATCHERS\n /****************************************************************************/\n //#region METHODS\n\n private handleTextarea = (event: Event) => {\n const textarea = event.target as HTMLTextAreaElement;\n this.value = textarea.value;\n this.valueChanged.emit(textarea.value);\n };\n\n private handleTextareaContainerClick = () => {\n this.textareaElement.focus();\n };\n\n private adjustTextareaHeight() {\n if (this.textareaElement && this.autosize) {\n /**\n * The first requestAnimationFrame ensures that the DOM has applied any\n * pending changes (e.g., value updates or attribute changes) before\n * proceeding to the next frame.\n */\n requestAnimationFrame(() => {\n /**\n * The second requestAnimationFrame ensures that the browser has fully\n * recalculated layout and styles based on the updated DOM, such as\n * recalculating scrollHeight for the textarea after the new value is\n * rendered.\n */\n requestAnimationFrame(() => {\n this.textareaElement.style.height = 'auto';\n\n const computedStyle = window.getComputedStyle(this.textareaElement);\n const lineHeight = parseFloat(computedStyle.lineHeight);\n const paddingTop = parseFloat(computedStyle.paddingTop);\n const paddingBottom = parseFloat(computedStyle.paddingBottom);\n const borderTopWidth = parseFloat(computedStyle.borderTopWidth);\n const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth);\n\n // Calculate min-height based on rows\n const minHeight =\n lineHeight * this.rows +\n paddingTop +\n paddingBottom +\n borderTopWidth +\n borderBottomWidth;\n\n this.textareaElement.style.minHeight = `${minHeight}px`;\n this.textareaElement.style.height =\n this.textareaElement.scrollHeight + 'px';\n });\n });\n }\n }\n\n //#endregion METHODS\n /****************************************************************************/\n //#region LIFECYCLE\n\n componentDidLoad() {\n if (this.autosize) {\n this.adjustTextareaHeight();\n }\n }\n\n //#endregion LIFECYCLE\n /****************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host>\n {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n <label htmlFor={this.inputId}>\n <slot name=\"label\">{this.label}</slot>\n </label>\n )}\n\n <div class=\"textarea-wrapper\">\n <div\n class=\"textarea-container\"\n onClick={this.handleTextareaContainerClick}\n >\n <textarea\n id={this.inputId}\n ref={e => (this.textareaElement = e)}\n placeholder={this.placeholder}\n name={this.name}\n disabled={this.disabled}\n readOnly={this.readonly}\n required={this.required}\n maxlength={this.maxlength}\n minlength={this.minlength}\n autocomplete=\"off\"\n value={this.value}\n onInput={this.handleTextarea}\n rows={this.rows}\n class={clsx(\n this.resize === 'none' && 'resize-none',\n this.resize === 'vertical' && 'resize-y',\n this.resize === 'horizontal' && 'resize-x',\n this.resize === 'both' && 'resize',\n )}\n />\n </div>\n </div>\n\n {(this.description ||\n this.el.querySelector('[slot=\"description\"]')) && (\n <div class=\"description\">\n <slot name=\"description\">{this.description}</slot>\n </div>\n )}\n\n {(this.errorDescription ||\n this.el.querySelector('[slot=\"error-description\"]')) && (\n <div hidden={!this.error} class=\"error-description\">\n <slot name=\"error-description\">{this.errorDescription}</slot>\n </div>\n )}\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"mappings":"mIAAA,MAAMA,EAAqB,21JAC3B,MAAAC,EAAeD,E,MCuBFE,EAAe,MAN5B,WAAAC,CAAAC,G,qDAiDWC,KAAAC,QAAkBC,IAiDlBF,KAAAG,SAAoB,MAQpBH,KAAAI,SAAoB,MAOpBJ,KAAAK,SAAoB,MAQ7BL,KAAAM,MAAiB,MAgBRN,KAAAO,QAAmB,MAyBnBP,KAAAQ,KAAe,EAOfR,KAAAS,OAAsD,WAStDT,KAAAU,SAAoB,MAwDrBV,KAAAW,eAAkBC,IACxB,MAAMC,EAAWD,EAAME,OACvBd,KAAKe,MAAQF,EAASE,MACtBf,KAAKgB,aAAaC,KAAKJ,EAASE,MAAM,EAGhCf,KAAAkB,6BAA+B,KACrClB,KAAKmB,gBAAgBC,OAAO,C,CAtN9B,mBAAAC,GACE,GAAIrB,KAAKsB,QAAS,CAChBtB,KAAKuB,YAAcvB,KAAKsB,O,CAG1B,GAAItB,KAAKwB,WAAY,CACnBxB,KAAKyB,iBAAmBzB,KAAKwB,WAC7BxB,KAAKM,MAAQ,I,EAsKjB,WAAAoB,GACE,GAAI1B,KAAKU,SAAU,CACjBV,KAAK2B,sB,EAST,eAAAC,G,MACE,GAAI5B,KAAKU,SAAU,CACjBV,KAAK2B,sB,KACA,EACLE,EAAA7B,KAAKmB,mBAAe,MAAAU,SAAA,SAAAA,EAAEC,MAAMC,eAAe,S,EAS/C,iBAAAC,GACE,GAAIhC,KAAKU,SAAU,CACjBV,KAAK2B,sB,EAkBD,oBAAAA,GACN,GAAI3B,KAAKmB,iBAAmBnB,KAAKU,SAAU,CAMzCuB,uBAAsB,KAOpBA,uBAAsB,KACpBjC,KAAKmB,gBAAgBW,MAAMI,OAAS,OAEpC,MAAMC,EAAgBC,OAAOC,iBAAiBrC,KAAKmB,iBACnD,MAAMmB,EAAaC,WAAWJ,EAAcG,YAC5C,MAAME,EAAaD,WAAWJ,EAAcK,YAC5C,MAAMC,EAAgBF,WAAWJ,EAAcM,eAC/C,MAAMC,EAAiBH,WAAWJ,EAAcO,gBAChD,MAAMC,EAAoBJ,WAAWJ,EAAcQ,mBAGnD,MAAMC,EACJN,EAAatC,KAAKQ,KAClBgC,EACAC,EACAC,EACAC,EAEF3C,KAAKmB,gBAAgBW,MAAMc,UAAY,GAAGA,MAC1C5C,KAAKmB,gBAAgBW,MAAMI,OACzBlC,KAAKmB,gBAAgB0B,aAAe,IAAI,GAC1C,G,EASR,gBAAAC,GACE,GAAI9C,KAAKU,SAAU,CACjBV,KAAK2B,sB,EAQT,MAAAoB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,6CACDlD,KAAKmD,OAASnD,KAAKoD,GAAGC,cAAc,oBACpCL,EAAA,SAAAE,IAAA,2CAAOI,QAAStD,KAAKC,SACnB+C,EAAA,QAAAE,IAAA,2CAAMK,KAAK,SAASvD,KAAKmD,QAI7BH,EAAA,OAAAE,IAAA,2CAAKM,MAAM,oBACTR,EAAA,OAAAE,IAAA,2CACEM,MAAM,qBACNC,QAASzD,KAAKkB,8BAEd8B,EAAA,YAAAE,IAAA,2CACEQ,GAAI1D,KAAKC,QACT0D,IAAKC,GAAM5D,KAAKmB,gBAAkByC,EAClCC,YAAa7D,KAAK6D,YAClBN,KAAMvD,KAAKuD,KACXpD,SAAUH,KAAKG,SACf2D,SAAU9D,KAAKI,SACfC,SAAUL,KAAKK,SACf0D,UAAW/D,KAAK+D,UAChBC,UAAWhE,KAAKgE,UAChBC,aAAa,MACblD,MAAOf,KAAKe,MACZmD,QAASlE,KAAKW,eACdH,KAAMR,KAAKQ,KACXgD,MAAOW,EACLnE,KAAKS,SAAW,QAAU,cAC1BT,KAAKS,SAAW,YAAc,WAC9BT,KAAKS,SAAW,cAAgB,WAChCT,KAAKS,SAAW,QAAU,eAMhCT,KAAKuB,aACLvB,KAAKoD,GAAGC,cAAc,0BACtBL,EAAA,OAAAE,IAAA,2CAAKM,MAAM,eACTR,EAAA,QAAAE,IAAA,2CAAMK,KAAK,eAAevD,KAAKuB,eAIjCvB,KAAKyB,kBACLzB,KAAKoD,GAAGC,cAAc,gCACtBL,EAAA,OAAAE,IAAA,2CAAKkB,QAASpE,KAAKM,MAAOkD,MAAM,qBAC9BR,EAAA,QAAAE,IAAA,2CAAMK,KAAK,qBAAqBvD,KAAKyB,mB","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,c as n,h as t,a as o,g as i}from"./p-9b093b92.js";const r="nv-menuitem{display:flex;align-items:center;max-width:300px;width:100vw;font-size:var(--menu-contextual-item-font-size);font-weight:var(--menu-contextual-item-font-weight);color:var(--components-menu-contextual-item-content);border-radius:var(--menu-contextual-item-radius);gap:var(--menu-contextual-item-gap-x);padding:var(--menu-contextual-item-padding-y) var(--menu-contextual-item-padding-x);transition:background-color 150ms ease-out;cursor:pointer}nv-menuitem:hover,nv-menuitem:focus,nv-menuitem:focus-within{background-color:var(--components-menu-contextual-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-menuitem kbd{color:var(--components-menu-contextual-item-shortcut)}nv-menuitem [data-scope=text]{margin-right:auto}nv-menuitem[disabled]:not([disabled=false]){cursor:unset;background-color:unset;color:var(--components-menu-contextual-item-content-disabled)}nv-menu{display:inline-block;position:relative}nv-menu:has([fluid]:not([fluid=false])){display:block}nv-menu nv-popover{display:unset}nv-menu nv-popover [data-scope=popover]{background-color:transparent !important;padding:0 !important}nv-menu [slot=content]{padding:var(--menu-contextual-padding-y) var(--menu-contextual-padding-x);border-radius:var(--menu-contextual-radius);gap:var(--menu-contextual-gap-y);background-color:var(--components-menu-contextual-background);border-color:var(--components-menu-contextual-border);display:flex;flex-direction:column}nv-menu nv-menu[open]:not([open=false])>nv-menuitem{background-color:var(--components-menu-contextual-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-menu hr{display:block;margin:var(--menu-contextual-divider-padding-top) var(--menu-contextual-divider-padding-x) var(--menu-contextual-divider-padding-bottom) var(--menu-contextual-divider-padding-x)}";const a=r;const s=class{constructor(t){e(this,t);this.menuitemSelected=n(this,"menuitemSelected",7);this.isHandlingKeyDown=false;this.open=false;this.nested=false;this.disableCloseOnSelect=false;this.placement=this.nested?"right-start":"bottom-end"}async show(){this.open=true}async close(){this.open=false}handleMenuItemSelect(e){if(this.disableCloseOnSelect)return;if(e.detail.hasSubmenu)return;this.open=false}handleKeydown(e){if(!this.open)return;if(this.isHandlingKeyDown)return;this.isHandlingKeyDown=true;if(e.key==="ArrowDown"||e.key==="ArrowUp"||e.key==="ArrowLeft"||e.key==="ArrowRight"||e.key==="Escape"){e.preventDefault()}if(e.key==="Escape"&&!this.nested){this.close();this.triggerElement.focus();this.isHandlingKeyDown=false;return}const n=this.el.querySelector('[slot="content"]');const t=Array.from(n.childNodes).filter((e=>{var n;return(n=e.matches)===null||n===void 0?void 0:n.call(e,"nv-menuitem, nv-menu")}));let o=t.indexOf(document.activeElement);if(o===-1)o=t.indexOf(document.activeElement.parentElement);if(o===-1&&t.find((e=>e.matches("nv-menu[open]")))){this.isHandlingKeyDown=false;return}if(e.key==="ArrowDown"||e.key==="ArrowUp"){t.forEach((e=>{if(e.matches("nv-menu"))e.close()}))}if(e.key==="ArrowDown"){let e=(o+1)%t.length;while(t[e].matches("nv-menuitem[disabled]")){e=(e+1)%t.length}const n=t[e];if(n.matches("nv-menuitem"))n.focus();else if(n.matches("nv-menu"))n.querySelector("nv-menuitem").focus()}if(e.key==="ArrowUp"){let e=(o-1+t.length)%t.length;while(t[e].matches("nv-menuitem[disabled]")){e=(e-1+t.length)%t.length}const n=t[e];if(n.matches("nv-menuitem"))n.focus();else if(n.matches("nv-menu"))n.querySelector("nv-menuitem").focus()}if(e.key==="ArrowRight"){const e=t[o];if(!e.matches("nv-menu")){this.isHandlingKeyDown=false;return}e.show()}if(e.key==="ArrowLeft"&&this.nested){if(t.find((e=>e.matches("nv-menu[open]")))){this.isHandlingKeyDown=false;return}this.close();this.triggerElement.focus()}this.isHandlingKeyDown=false}handleOpenChanged(e){if(e.target===this.el.querySelector("nv-popover")){this.open=e.detail}const n=this.triggerElement===document.activeElement;const t=this.triggerElement.matches(":focus-visible");if(n&&t)this.focusFirstItem()}focusFirstItem(){const e=this.popoverElement.querySelector("nv-menuitem");if(e){requestAnimationFrame((()=>e.focus()))}}componentWillLoad(){this.triggerElement=Array.from(this.el.children).find((e=>e.getAttribute("slot")==="trigger"))}render(){return t(o,{key:"2916995a257343bb849c8e64938850e0167d5491"},t("slot",{key:"012e521f58fd4b603f90c4eb6bef29c71e05586e",name:"trigger"}),t("nv-popover",{key:"187f89fd4dad78f8ebc99082ad936fced52b81d3",ref:e=>this.popoverElement=e,triggerMode:"click",triggerElement:this.triggerElement,placement:this.placement,nested:this.nested,open:this.open},t("slot",{key:"3d94bcc4a617fd475f3e6057f10e25a3aae772fd",name:"content"})))}get el(){return i(this)}};s.style=a;export{s as nv_menu};
|
|
2
|
+
//# sourceMappingURL=p-e56d3715.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["nvMenuCss","NvMenuStyle0","NvMenu","constructor","hostRef","this","isHandlingKeyDown","open","nested","disableCloseOnSelect","placement","show","close","handleMenuItemSelect","event","detail","hasSubmenu","handleKeydown","key","preventDefault","triggerElement","focus","menuContent","el","querySelector","menuItems","Array","from","childNodes","filter","item","_a","matches","call","currentIndex","indexOf","document","activeElement","parentElement","find","forEach","nextIndex","length","nextFocusable","prevIndex","prevFocusable","submenu","handleOpenChanged","target","triggerHasFocus","triggerHasFocusVisible","focusFirstItem","firstButton","popoverElement","requestAnimationFrame","componentWillLoad","children","child","getAttribute","render","h","Host","name","ref","triggerMode"],"sources":["src/components/nv-menu/nv-menu.scss?tag=nv-menu","src/components/nv-menu/nv-menu.tsx"],"sourcesContent":["@use \"../nv-menuitem/nv-menuitem\" as nv-menuitem;\n\n@mixin root-styles() {\n display: inline-block;\n position: relative;\n\n &:has([fluid]:not([fluid=\"false\"])) {\n display: block;\n }\n}\n\n@mixin content-styles() {\n padding: var(--menu-contextual-padding-y) \n var(--menu-contextual-padding-x);\n border-radius: var(--menu-contextual-radius);\n gap: var(--menu-contextual-gap-y);\n background-color: var(--components-menu-contextual-background);\n border-color: var(--components-menu-contextual-border);\n display: flex;\n flex-direction: column;\n}\n\n@mixin separator-styles() {\n display: block;\n margin: var(--menu-contextual-divider-padding-top) \n var(--menu-contextual-divider-padding-x) \n var(--menu-contextual-divider-padding-bottom) \n var(--menu-contextual-divider-padding-x) ;\n}\n\nnv-menu {\n @include root-styles();\n\n nv-popover {\n display: unset;\n \n [data-scope=popover]{\n background-color: transparent !important;\n padding: 0 !important;\n }\n }\n\n [slot=\"content\"] {\n @include content-styles();\n }\n\n nv-menu[open]:not([open=\"false\"]) {\n > nv-menuitem {\n @include nv-menuitem.focused-styles();\n }\n }\n\n hr {\n @include separator-styles();\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Listen,\n Event,\n EventEmitter,\n Method,\n} from '@stencil/core';\nimport type { Placement } from '@floating-ui/dom';\nimport type { MenuitemSelectedEventDetail } from '../nv-menuitem/nv-menuitem';\n\n/**\n * @slot trigger - Button to toggle the menu popover.\n * @slot content - Use an <ul></ul> tag for the slot, and place <nv-menuitem> elements inside.\n */\n@Component({\n tag: 'nv-menu',\n styleUrl: 'nv-menu.scss',\n shadow: false,\n})\nexport class NvMenu {\n @Element() el: HTMLNvMenuElement;\n private triggerElement!: HTMLElement;\n private popoverElement!: HTMLNvPopoverElement;\n private isHandlingKeyDown: boolean = false;\n\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * Use this to toggle the initial visibility of the menu, by default the menu\n * is hidden.\n */\n @Prop({ reflect: true, mutable: true })\n open: boolean = false;\n\n /**\n * Use this if the menu is nested inside another menu. This will prevent the\n * parent menu from closing when the child menu is opened.\n */\n @Prop()\n readonly nested: boolean = false;\n\n /**\n * Use this to disable the menu from closing automatically when a menu item is\n * selected.\n */\n @Prop()\n readonly disableCloseOnSelect: boolean = false;\n\n /**\n * Decides where the menu shows up next to the button it’s linked to (above,\n * below, to the sides). If there isn’t enough room, it will adjust its\n * position on the axis to fit on the screen, so users can always see it.\n */\n @Prop()\n readonly placement: Placement = this.nested ? 'right-start' : 'bottom-end';\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region METHODS\n\n /**\n * Opens the menu.\n */\n @Method()\n async show() {\n this.open = true;\n }\n\n /**\n * Closes the menu.\n */\n @Method()\n async close() {\n this.open = false;\n }\n\n //#endregion METHODS\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Emitted from nv-menuitem elements with the corresponding id and name when\n * selected (via click or keyboard). This event listener can be attached to\n * either the nv-menu or the nv-menuitem element.\n */\n @Event()\n menuitemSelected: EventEmitter<MenuitemSelectedEventDetail>;\n\n @Listen('menuitemSelected')\n handleMenuItemSelect(event: CustomEvent<MenuitemSelectedEventDetail>) {\n if (this.disableCloseOnSelect) return;\n if (event.detail.hasSubmenu) return;\n\n this.open = false;\n }\n\n @Listen('keydown', { passive: false })\n handleKeydown(event: KeyboardEvent) {\n if (!this.open) return;\n if (this.isHandlingKeyDown) return;\n\n this.isHandlingKeyDown = true;\n\n if (\n event.key === 'ArrowDown' ||\n event.key === 'ArrowUp' ||\n event.key === 'ArrowLeft' ||\n event.key === 'ArrowRight' ||\n event.key === 'Escape'\n ) {\n event.preventDefault();\n }\n\n if (event.key === 'Escape' && !this.nested) {\n this.close();\n this.triggerElement.focus();\n this.isHandlingKeyDown = false;\n return;\n }\n\n const menuContent = this.el.querySelector('[slot=\"content\"]');\n const menuItems = (\n Array.from(menuContent.childNodes) as Array<\n HTMLNvMenuitemElement | HTMLNvMenuElement\n >\n ).filter(item => item.matches?.('nv-menuitem, nv-menu'));\n\n let currentIndex = menuItems.indexOf(\n document.activeElement as HTMLNvMenuitemElement,\n );\n if (currentIndex === -1)\n currentIndex = menuItems.indexOf(\n document.activeElement.parentElement as HTMLNvMenuitemElement,\n );\n if (\n currentIndex === -1 &&\n menuItems.find(item => item.matches('nv-menu[open]'))\n ) {\n this.isHandlingKeyDown = false;\n return;\n }\n\n if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n menuItems.forEach(item => {\n if (item.matches('nv-menu')) (item as HTMLNvMenuElement).close();\n });\n }\n\n if (event.key === 'ArrowDown') {\n let nextIndex = (currentIndex + 1) % menuItems.length;\n while (menuItems[nextIndex].matches('nv-menuitem[disabled]')) {\n nextIndex = (nextIndex + 1) % menuItems.length;\n }\n const nextFocusable = menuItems[nextIndex];\n if (nextFocusable.matches('nv-menuitem')) nextFocusable.focus();\n else if (nextFocusable.matches('nv-menu'))\n nextFocusable.querySelector('nv-menuitem').focus();\n }\n\n if (event.key === 'ArrowUp') {\n let prevIndex = (currentIndex - 1 + menuItems.length) % menuItems.length;\n while (menuItems[prevIndex].matches('nv-menuitem[disabled]')) {\n prevIndex = (prevIndex - 1 + menuItems.length) % menuItems.length;\n }\n const prevFocusable = menuItems[prevIndex];\n if (prevFocusable.matches('nv-menuitem')) prevFocusable.focus();\n else if (prevFocusable.matches('nv-menu'))\n prevFocusable.querySelector('nv-menuitem').focus();\n }\n\n if (event.key === 'ArrowRight') {\n const submenu = menuItems[currentIndex];\n if (!submenu.matches('nv-menu')) {\n this.isHandlingKeyDown = false;\n return;\n }\n\n (submenu as HTMLNvMenuElement).show();\n }\n\n if (event.key === 'ArrowLeft' && this.nested) {\n if (menuItems.find(item => item.matches('nv-menu[open]'))) {\n this.isHandlingKeyDown = false;\n return;\n }\n this.close();\n this.triggerElement.focus();\n }\n\n this.isHandlingKeyDown = false;\n }\n\n @Listen('openChanged')\n handleOpenChanged(event: CustomEvent<boolean>) {\n if (event.target === this.el.querySelector('nv-popover')) {\n this.open = event.detail;\n }\n\n const triggerHasFocus = this.triggerElement === document.activeElement;\n const triggerHasFocusVisible =\n this.triggerElement.matches(':focus-visible');\n\n if (triggerHasFocus && triggerHasFocusVisible) this.focusFirstItem();\n }\n\n private focusFirstItem() {\n const firstButton = this.popoverElement.querySelector('nv-menuitem');\n if (firstButton) {\n requestAnimationFrame(() => firstButton.focus());\n }\n }\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n this.triggerElement = Array.from(this.el.children).find(child => {\n return child.getAttribute('slot') === 'trigger';\n }) as HTMLElement;\n }\n\n //#endregion LIFECYCLE\n /****************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host>\n <slot name=\"trigger\"></slot>\n\n <nv-popover\n ref={el => (this.popoverElement = el)}\n triggerMode=\"click\"\n triggerElement={this.triggerElement}\n placement={this.placement}\n nested={this.nested}\n open={this.open}\n >\n <slot name=\"content\"></slot>\n </nv-popover>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"mappings":"gEAAA,MAAMA,EAAY,i0DAClB,MAAAC,EAAeD,E,MCsBFE,EAAM,MALnB,WAAAC,CAAAC,G,6DASUC,KAAAC,kBAA6B,MAUrCD,KAAAE,KAAgB,MAOPF,KAAAG,OAAkB,MAOlBH,KAAAI,qBAAgC,MAQhCJ,KAAAK,UAAuBL,KAAKG,OAAS,cAAgB,Y,CAU9D,UAAMG,GACJN,KAAKE,KAAO,I,CAOd,WAAMK,GACJP,KAAKE,KAAO,K,CAgBd,oBAAAM,CAAqBC,GACnB,GAAIT,KAAKI,qBAAsB,OAC/B,GAAIK,EAAMC,OAAOC,WAAY,OAE7BX,KAAKE,KAAO,K,CAId,aAAAU,CAAcH,GACZ,IAAKT,KAAKE,KAAM,OAChB,GAAIF,KAAKC,kBAAmB,OAE5BD,KAAKC,kBAAoB,KAEzB,GACEQ,EAAMI,MAAQ,aACdJ,EAAMI,MAAQ,WACdJ,EAAMI,MAAQ,aACdJ,EAAMI,MAAQ,cACdJ,EAAMI,MAAQ,SACd,CACAJ,EAAMK,gB,CAGR,GAAIL,EAAMI,MAAQ,WAAab,KAAKG,OAAQ,CAC1CH,KAAKO,QACLP,KAAKe,eAAeC,QACpBhB,KAAKC,kBAAoB,MACzB,M,CAGF,MAAMgB,EAAcjB,KAAKkB,GAAGC,cAAc,oBAC1C,MAAMC,EACJC,MAAMC,KAAKL,EAAYM,YAGvBC,QAAOC,IAAI,IAAAC,EAAI,OAAAA,EAAAD,EAAKE,WAAO,MAAAD,SAAA,SAAAA,EAAAE,KAAAH,EAAG,uBAAuB,IAEvD,IAAII,EAAeT,EAAUU,QAC3BC,SAASC,eAEX,GAAIH,KAAkB,EACpBA,EAAeT,EAAUU,QACvBC,SAASC,cAAcC,eAE3B,GACEJ,KAAkB,GAClBT,EAAUc,MAAKT,GAAQA,EAAKE,QAAQ,mBACpC,CACA3B,KAAKC,kBAAoB,MACzB,M,CAGF,GAAIQ,EAAMI,MAAQ,aAAeJ,EAAMI,MAAQ,UAAW,CACxDO,EAAUe,SAAQV,IAChB,GAAIA,EAAKE,QAAQ,WAAaF,EAA2BlB,OAAO,G,CAIpE,GAAIE,EAAMI,MAAQ,YAAa,CAC7B,IAAIuB,GAAaP,EAAe,GAAKT,EAAUiB,OAC/C,MAAOjB,EAAUgB,GAAWT,QAAQ,yBAA0B,CAC5DS,GAAaA,EAAY,GAAKhB,EAAUiB,M,CAE1C,MAAMC,EAAgBlB,EAAUgB,GAChC,GAAIE,EAAcX,QAAQ,eAAgBW,EAActB,aACnD,GAAIsB,EAAcX,QAAQ,WAC7BW,EAAcnB,cAAc,eAAeH,O,CAG/C,GAAIP,EAAMI,MAAQ,UAAW,CAC3B,IAAI0B,GAAaV,EAAe,EAAIT,EAAUiB,QAAUjB,EAAUiB,OAClE,MAAOjB,EAAUmB,GAAWZ,QAAQ,yBAA0B,CAC5DY,GAAaA,EAAY,EAAInB,EAAUiB,QAAUjB,EAAUiB,M,CAE7D,MAAMG,EAAgBpB,EAAUmB,GAChC,GAAIC,EAAcb,QAAQ,eAAgBa,EAAcxB,aACnD,GAAIwB,EAAcb,QAAQ,WAC7Ba,EAAcrB,cAAc,eAAeH,O,CAG/C,GAAIP,EAAMI,MAAQ,aAAc,CAC9B,MAAM4B,EAAUrB,EAAUS,GAC1B,IAAKY,EAAQd,QAAQ,WAAY,CAC/B3B,KAAKC,kBAAoB,MACzB,M,CAGDwC,EAA8BnC,M,CAGjC,GAAIG,EAAMI,MAAQ,aAAeb,KAAKG,OAAQ,CAC5C,GAAIiB,EAAUc,MAAKT,GAAQA,EAAKE,QAAQ,mBAAmB,CACzD3B,KAAKC,kBAAoB,MACzB,M,CAEFD,KAAKO,QACLP,KAAKe,eAAeC,O,CAGtBhB,KAAKC,kBAAoB,K,CAI3B,iBAAAyC,CAAkBjC,GAChB,GAAIA,EAAMkC,SAAW3C,KAAKkB,GAAGC,cAAc,cAAe,CACxDnB,KAAKE,KAAOO,EAAMC,M,CAGpB,MAAMkC,EAAkB5C,KAAKe,iBAAmBgB,SAASC,cACzD,MAAMa,EACJ7C,KAAKe,eAAeY,QAAQ,kBAE9B,GAAIiB,GAAmBC,EAAwB7C,KAAK8C,gB,CAG9C,cAAAA,GACN,MAAMC,EAAc/C,KAAKgD,eAAe7B,cAAc,eACtD,GAAI4B,EAAa,CACfE,uBAAsB,IAAMF,EAAY/B,S,EAQ5C,iBAAAkC,GACElD,KAAKe,eAAiBM,MAAMC,KAAKtB,KAAKkB,GAAGiC,UAAUjB,MAAKkB,GAC/CA,EAAMC,aAAa,UAAY,W,CAQ1C,MAAAC,GACE,OACEC,EAACC,EAAI,CAAA3C,IAAA,4CACH0C,EAAA,QAAA1C,IAAA,2CAAM4C,KAAK,YAEXF,EAAA,cAAA1C,IAAA,2CACE6C,IAAKxC,GAAOlB,KAAKgD,eAAiB9B,EAClCyC,YAAY,QACZ5C,eAAgBf,KAAKe,eACrBV,UAAWL,KAAKK,UAChBF,OAAQH,KAAKG,OACbD,KAAMF,KAAKE,MAEXqD,EAAA,QAAA1C,IAAA,2CAAM4C,KAAK,a","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as e,c as t,h as o,a as i,g as n}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as e,c as t,h as o,a as i,g as n}from"./p-9b093b92.js";const s="nv-fielddropdownitem{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--list-custom-item-padding-y) var(--list-custom-item-padding-x);font-size:var(--menu-contextual-item-font-size);font-weight:var(--menu-contextual-item-font-weight);color:var(--components-menu-contextual-item-content);border-radius:var(--menu-contextual-item-radius);transition:background-color 150ms ease-out, color 150ms ease-out;cursor:pointer}nv-fielddropdownitem:hover,nv-fielddropdownitem:focus,nv-fielddropdownitem:focus-within{background-color:var(--components-list-custom-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-fielddropdownitem[disabled]:not([disabled=false]){cursor:not-allowed;background-color:unset;color:var(--components-menu-contextual-item-content-disabled)}nv-fielddropdownitem .dropdown-item-text-wrapper{display:flex;flex-grow:1;align-items:center;justify-content:space-between}nv-fielddropdownitem [data-scope=text]{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nv-fielddropdownitem .selection-icon{color:var(--components-list-custom-item-content-default);align-self:center}";const r=s;const a=class{constructor(o){e(this,o);this.itemSelected=t(this,"itemSelected",7);this.disabled=false;this.selected=false;this.handleClick=()=>{if(!this.disabled){let e=this.value||"";if(!e){e=Array.from(this.el.childNodes).map((e=>{var t;return(t=e.textContent)===null||t===void 0?void 0:t.trim()})).filter((e=>e&&e.length>0)).join(" ")||""}this.selected=!this.selected;this.itemSelected.emit({label:this.label,value:e,selected:this.selected,disabled:this.disabled})}}}isNullOrEmptyOrWhitespace(e){return!e||e.trim().length===0}render(){const e=this.isNullOrEmptyOrWhitespace(this.label);return o(i,{key:"e482a762c7b011389f1f1312b14f1686e38528aa",role:"menuitem",tabindex:this.disabled?"-1":"0",onClick:this.handleClick,class:{selected:this.selected}},e?o("slot",null):o("div",{class:"dropdown-item-text-wrapper"},o("span",{"data-scope":"text"},this.label),this.selected&&o("nv-icon",{name:"check","aria-hidden":"true",class:"selection-icon"})))}get el(){return n(this)}};a.style=r;export{a as nv_fielddropdownitem};
|
|
2
|
+
//# sourceMappingURL=p-e5fbe545.entry.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as a,h as r,a as e}from"./p-9b093b92.js";const b="nv-breadcrumbs{display:block}nv-breadcrumbs>ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-1)}nv-breadcrumbs nv-breadcrumb:last-child [data-scope=separator],nv-breadcrumbs nv-breadcrumb:last-child [slot=separator]{display:none}";const s=b;const c=class{constructor(r){a(this,r)}render(){return r(e,{key:"5ab0f09cb86a92464ffcd06d8129543539bdcddf",role:"navigation","aria-label":"breadcrumbs"},r("ol",{key:"a7624a2400d9a91ec477694bbd3600960e198981"},r("slot",{key:"7c4102ceebe110377bf212e0695bdec6b455ea74"})))}};c.style=s;export{c as nv_breadcrumbs};
|
|
2
|
+
//# sourceMappingURL=p-eade52d4.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["nvBreadcrumbsCss","NvBreadcrumbsStyle0","NvBreadcrumbs","render","h","Host","key","role"],"sources":["src/components/nv-breadcrumbs/nv-breadcrumbs.scss?tag=nv-breadcrumbs","src/components/nv-breadcrumbs/nv-breadcrumbs.tsx"],"sourcesContent":["@mixin root-styles() {\n display: block;\n}\n\n@mixin list-styles() {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--spacing-1);\n}\n\n@mixin breadcrumb-styles() {\n &:last-child {\n [data-scope=\"separator\"], [slot=\"separator\"] {\n display: none;\n }\n }\n}\n\nnv-breadcrumbs {\n @include root-styles();\n > ol {\n @include list-styles();\n }\n nv-breadcrumb {\n @include breadcrumb-styles();\n }\n}\n","import { Component, Host, h } from '@stencil/core';\n\n/**\n * @slot default - Child content of the component.\n */\n@Component({\n tag: 'nv-breadcrumbs',\n styleUrl: 'nv-breadcrumbs.scss',\n shadow: false,\n})\nexport class NvBreadcrumbs {\n //#region RENDER\n\n render() {\n return (\n <Host role=\"navigation\" aria-label=\"breadcrumbs\">\n <ol>\n <slot></slot>\n </ol>\n </Host>\n );\n }\n\n // #endregion RENDER\n}\n"],"mappings":"kDAAA,MAAMA,EAAmB,2PACzB,MAAAC,EAAeD,E,MCSFE,EAAa,M,yBAGxB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,aAAY,aAAY,eACjCH,EAAA,MAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,8C","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as a,h as e,a as c}from"./p-9b093b92.js";const s="";const t=s;const r=class{constructor(e){a(this,e)}render(){return e(c,{key:"2982f199f488077a91812c214b0e881a0e32e1ec"},e("th",{key:"cc46a9eb1aa232a8068308d7e7175aed89f007c1"},e("slot",{key:"bd1f13adfd55b1c4ae8dab30d7aea33c9079f3e0"})))}};r.style=t;export{r as nv_datagridcolumn};
|
|
2
|
+
//# sourceMappingURL=p-eda8cd9d.entry.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,c as t,h as n,a,g as o}from"./p-9b093b92.js";const c="nv-menuitem{display:flex;align-items:center;max-width:300px;width:100vw;font-size:var(--menu-contextual-item-font-size);font-weight:var(--menu-contextual-item-font-weight);color:var(--components-menu-contextual-item-content);border-radius:var(--menu-contextual-item-radius);gap:var(--menu-contextual-item-gap-x);padding:var(--menu-contextual-item-padding-y) var(--menu-contextual-item-padding-x);transition:background-color 150ms ease-out;cursor:pointer}nv-menuitem:hover,nv-menuitem:focus,nv-menuitem:focus-within{background-color:var(--components-menu-contextual-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-menuitem kbd{color:var(--components-menu-contextual-item-shortcut)}nv-menuitem [data-scope=text]{margin-right:auto}nv-menuitem[disabled]:not([disabled=false]){cursor:unset;background-color:unset;color:var(--components-menu-contextual-item-content-disabled)}";const i=c;const s=class{constructor(n){e(this,n);this.menuitemSelected=t(this,"menuitemSelected",7);this.disabled=false;this.hasSubmenu=false}handleMenuItemSelect(e){if(this.disabled){e.stopPropagation();return}this.menuitemSelected.emit({id:this.el.id,name:this.name,hasSubmenu:this.hasSubmenu})}handleClick(e){this.handleMenuItemSelect(e)}handleKeyDown(e){if(e.key==="Enter"){const t=document.activeElement;if(t&&t.tagName==="NV-MENUITEM"&&!t.hasAttribute("has-submenu")){e.preventDefault();this.handleMenuItemSelect(e)}}}render(){return n(a,{key:"a67dc0ea59f24f8e603b85fca99a95727559f749",role:"menuitem",tabindex:this.disabled?"-1":"0"},this.icon&&n("nv-icon",{key:"5f9b024b930199552cbcb25c20b8acb85cb49dc7",name:this.icon}),n("span",{key:"096c9c5ea2cc697c7eb4de9c43dff60e06751e89","data-scope":"text"},n("slot",{key:"87e3815be0751cf1bf4e31dacc3a1658c4d7fdf4"})),this.shortcut&&!this.hasSubmenu&&n("kbd",{key:"e0bfbf8cb85eab0b935b37963d52ff14c844db2b"},this.shortcut),this.hasSubmenu&&n("nv-icon",{key:"869adf3673781fb5d21ca493118bfc4e5b56d9c4",name:"chevron-right"}))}get el(){return o(this)}};s.style=i;export{s as nv_menuitem};
|
|
2
|
+
//# sourceMappingURL=p-ee78addb.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["nvMenuitemCss","NvMenuitemStyle0","NvMenuitem","constructor","hostRef","this","disabled","hasSubmenu","handleMenuItemSelect","event","stopPropagation","menuitemSelected","emit","id","el","name","handleClick","handleKeyDown","key","activeElement","document","tagName","hasAttribute","preventDefault","render","h","Host","role","tabindex","icon","shortcut"],"sources":["src/components/nv-menuitem/nv-menuitem.scss?tag=nv-menuitem","src/components/nv-menuitem/nv-menuitem.tsx"],"sourcesContent":["@mixin root-styles() {\n display: flex;\n align-items: center;\n max-width: 300px;\n width: 100vw;\n font-size: var(--menu-contextual-item-font-size);\n font-weight: var(--menu-contextual-item-font-weight);\n color: var(--components-menu-contextual-item-content);\n border-radius: var(--menu-contextual-item-radius);\n gap: var(--menu-contextual-item-gap-x);\n padding: var(--menu-contextual-item-padding-y) var(--menu-contextual-item-padding-x);\n transition: background-color 150ms ease-out;\n cursor: pointer;\n &:hover, &:focus, &:focus-within {\n @include focused-styles();\n }\n}\n\n@mixin focused-styles() {\n background-color: var(--components-menu-contextual-item-background-hover);\n color: var(--components-menu-contextual-item-content-hover);\n}\n\n@mixin disabled-styles() {\n cursor: unset;\n background-color: unset;\n color: var(--components-menu-contextual-item-content-disabled);\n}\n\n@mixin text-styles() {\n margin-right: auto;\n}\n\n@mixin shortcut-styles() {\n color: var(--components-menu-contextual-item-shortcut);\n}\n\nnv-menuitem {\n @include root-styles();\n\n kbd {\n @include shortcut-styles();\n }\n\n [data-scope=\"text\"] {\n @include text-styles();\n }\n\n &[disabled]:not([disabled=\"false\"]) {\n @include disabled-styles();\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n Listen,\n} from '@stencil/core';\n\nimport { IconName } from '../nv-icon/nv-icons';\n\nexport type MenuitemSelectedEventDetail = {\n /**\n * The id of the menu item that was selected.\n */\n id?: HTMLElement['id'];\n /**\n * The name of the menu item that was selected.\n */\n name?: string;\n /**\n * Indicates if the menu item has a nested submenu.\n */\n hasSubmenu?: boolean;\n};\n\n/**\n * @slot default - The content to render, usually just text\n */\n@Component({\n tag: 'nv-menuitem',\n styleUrl: 'nv-menuitem.scss',\n shadow: false,\n})\nexport class NvMenuitem {\n @Element() el: HTMLNvMenuitemElement;\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * Choose the icon you want to display. This also sets the aria-label for\n * improved accessibility, helping users who rely on screen readers.\n * The icon is not displayed when the button is loading.\n */\n @Prop({ reflect: true })\n readonly icon: `${IconName}`;\n\n /**\n * Disables the item, preventing user interaction.\n */\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /**\n * Show a shortcut key for the action represented in the menu item.\n */\n @Prop({ reflect: true })\n readonly shortcut: string;\n\n /**\n * If the menu item has a submenu, the a caret icon will be displayed.\n */\n @Prop({ reflect: true })\n readonly hasSubmenu: boolean = false;\n\n /**\n * Represents the identifier or name associated with the menu item. This value\n * will be emitted as part of the event data when the menu item is selected,\n * enabling event handlers to identify the chosen item.\n */\n @Prop({ reflect: true })\n readonly name: string;\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Fires when the menu item is selected (click or keypress). Will include the\n * id and name of the menu item.\n */\n @Event()\n menuitemSelected: EventEmitter<MenuitemSelectedEventDetail>;\n\n private handleMenuItemSelect(event: Event) {\n // If the element is disabled, stop propagation\n if (this.disabled) {\n event.stopPropagation();\n return;\n }\n\n this.menuitemSelected.emit({\n id: this.el.id,\n name: this.name,\n hasSubmenu: this.hasSubmenu,\n });\n }\n\n @Listen('click', { capture: true })\n handleClick(event: MouseEvent) {\n this.handleMenuItemSelect(event);\n }\n\n @Listen('keydown', { passive: false })\n handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Enter') {\n const activeElement = document.activeElement as HTMLNvMenuitemElement;\n if (\n activeElement &&\n activeElement.tagName === 'NV-MENUITEM' &&\n !activeElement.hasAttribute('has-submenu')\n ) {\n event.preventDefault();\n this.handleMenuItemSelect(event);\n }\n }\n }\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host role=\"menuitem\" tabindex={this.disabled ? '-1' : '0'}>\n {this.icon && <nv-icon name={this.icon}></nv-icon>}\n <span data-scope=\"text\">\n <slot></slot>\n </span>\n {this.shortcut && !this.hasSubmenu && <kbd>{this.shortcut}</kbd>}\n {this.hasSubmenu && <nv-icon name=\"chevron-right\"></nv-icon>}\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"mappings":"2DAAA,MAAMA,EAAgB,84BACtB,MAAAC,EAAeD,E,MCmCFE,EAAU,MALvB,WAAAC,CAAAC,G,6DAsBWC,KAAAC,SAAoB,MAYpBD,KAAAE,WAAsB,K,CAqBvB,oBAAAC,CAAqBC,GAE3B,GAAIJ,KAAKC,SAAU,CACjBG,EAAMC,kBACN,M,CAGFL,KAAKM,iBAAiBC,KAAK,CACzBC,GAAIR,KAAKS,GAAGD,GACZE,KAAMV,KAAKU,KACXR,WAAYF,KAAKE,Y,CAKrB,WAAAS,CAAYP,GACVJ,KAAKG,qBAAqBC,E,CAI5B,aAAAQ,CAAcR,GACZ,GAAIA,EAAMS,MAAQ,QAAS,CACzB,MAAMC,EAAgBC,SAASD,cAC/B,GACEA,GACAA,EAAcE,UAAY,gBACzBF,EAAcG,aAAa,eAC5B,CACAb,EAAMc,iBACNlB,KAAKG,qBAAqBC,E,GAShC,MAAAe,GACE,OACEC,EAACC,EAAI,CAAAR,IAAA,2CAACS,KAAK,WAAWC,SAAUvB,KAAKC,SAAW,KAAO,KACpDD,KAAKwB,MAAQJ,EAAA,WAAAP,IAAA,2CAASH,KAAMV,KAAKwB,OAClCJ,EAAA,QAAAP,IAAA,wDAAiB,QACfO,EAAA,QAAAP,IAAA,8CAEDb,KAAKyB,WAAazB,KAAKE,YAAckB,EAAA,OAAAP,IAAA,4CAAMb,KAAKyB,UAChDzB,KAAKE,YAAckB,EAAA,WAAAP,IAAA,2CAASH,KAAK,kB","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as o,c as e,h as a,a as n,g as i}from"./p-9b093b92.js";import{c}from"./p-8a1a6e56.js";import{u as s,t}from"./p-42301d8f.js";import{u as r}from"./p-1daca48a.js";const d="nv-badge{padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);height:fit-content;width:fit-content}nv-badge.with-gap{padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);height:fit-content;width:fit-content;gap:var(--badge-gap-x)}nv-badge:not(.with-gap){padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);height:fit-content;width:fit-content}nv-badge.badge-1{color:var(--color-rainbow-1-text);background-color:var(--color-rainbow-1-background)}nv-badge.badge-1 .close:focus,nv-badge.badge-1 .close:focus-within{outline:none}nv-badge.badge-1 .close:focus-visible,nv-badge.badge-1 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-1-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-1 nv-icon{color:var(--color-rainbow-1-icon)}nv-badge.badge-2{color:var(--color-rainbow-2-text);background-color:var(--color-rainbow-2-background)}nv-badge.badge-2 .close:focus,nv-badge.badge-2 .close:focus-within{outline:none}nv-badge.badge-2 .close:focus-visible,nv-badge.badge-2 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-2-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-2 nv-icon{color:var(--color-rainbow-2-icon)}nv-badge.badge-3{color:var(--color-rainbow-3-text);background-color:var(--color-rainbow-3-background)}nv-badge.badge-3 .close:focus,nv-badge.badge-3 .close:focus-within{outline:none}nv-badge.badge-3 .close:focus-visible,nv-badge.badge-3 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-3-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-3 nv-icon{color:var(--color-rainbow-3-icon)}nv-badge.badge-4{color:var(--color-rainbow-4-text);background-color:var(--color-rainbow-4-background)}nv-badge.badge-4 .close:focus,nv-badge.badge-4 .close:focus-within{outline:none}nv-badge.badge-4 .close:focus-visible,nv-badge.badge-4 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-4-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-4 nv-icon{color:var(--color-rainbow-4-icon)}nv-badge.badge-5{color:var(--color-rainbow-5-text);background-color:var(--color-rainbow-5-background)}nv-badge.badge-5 .close:focus,nv-badge.badge-5 .close:focus-within{outline:none}nv-badge.badge-5 .close:focus-visible,nv-badge.badge-5 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-5-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-5 nv-icon{color:var(--color-rainbow-5-icon)}nv-badge.badge-6{color:var(--color-rainbow-6-text);background-color:var(--color-rainbow-6-background)}nv-badge.badge-6 .close:focus,nv-badge.badge-6 .close:focus-within{outline:none}nv-badge.badge-6 .close:focus-visible,nv-badge.badge-6 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-6-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-6 nv-icon{color:var(--color-rainbow-6-icon)}nv-badge.badge-7{color:var(--color-rainbow-7-text);background-color:var(--color-rainbow-7-background)}nv-badge.badge-7 .close:focus,nv-badge.badge-7 .close:focus-within{outline:none}nv-badge.badge-7 .close:focus-visible,nv-badge.badge-7 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-7-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-7 nv-icon{color:var(--color-rainbow-7-icon)}nv-badge.badge-8{color:var(--color-rainbow-8-text);background-color:var(--color-rainbow-8-background)}nv-badge.badge-8 .close:focus,nv-badge.badge-8 .close:focus-within{outline:none}nv-badge.badge-8 .close:focus-visible,nv-badge.badge-8 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-8-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-8 nv-icon{color:var(--color-rainbow-8-icon)}nv-badge.badge-9{color:var(--color-rainbow-9-text);background-color:var(--color-rainbow-9-background)}nv-badge.badge-9 .close:focus,nv-badge.badge-9 .close:focus-within{outline:none}nv-badge.badge-9 .close:focus-visible,nv-badge.badge-9 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-9-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-9 nv-icon{color:var(--color-rainbow-9-icon)}nv-badge.badge-10{color:var(--color-rainbow-10-text);background-color:var(--color-rainbow-10-background)}nv-badge.badge-10 .close:focus,nv-badge.badge-10 .close:focus-within{outline:none}nv-badge.badge-10 .close:focus-visible,nv-badge.badge-10 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-10-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-10 nv-icon{color:var(--color-rainbow-10-icon)}nv-badge span{font-size:var(--font-size-xs);line-height:var(--line-height-xs) !important}nv-badge nv-icon>svg.icon-xs{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-sm{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-md{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-lg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-xl{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge .close{padding:0;line-height:0;border:none;background:none;cursor:pointer;color:inherit;display:inline-flex;align-items:center;aspect-ratio:1/1;border-radius:var(--radius-rounded-full)}";const l=d;const b=class{constructor(a){o(this,a);this.closeClicked=e(this,"closeClicked",7);this.hiddenChanged=e(this,"hiddenChanged",7);this.hiddenChangedComplete=e(this,"hiddenChangedComplete",7);this.dismissal=false;this.color="1";this.label=null;this.leadIcon=null;this.dismissible=false;this.hidden=false;this._isHidden=this.hidden;this.preventAutoClose=false;this.handleClose=o=>{if(!this.preventAutoClose){this.hidden=true}this.closeClicked.emit(o)}}handleDismissalChange(o){this.dismissible=o}handleIconChange(o){this.leadIcon=o}async handleHiddenChange(o){this.hiddenChanged.emit(o);if(this._isHidden===true)this._isHidden=o;const{fadeIn:e,fadeOut:a}=r(this.ref,{duration:150});const{collapse:n,expand:i}=s(this.ref,{duration:150});if(o===true)await t(a,n).start();if(o===false)await t(i,e).start();this.hiddenChangedComplete.emit(o);if(this._isHidden===false)this._isHidden=o}componentWillLoad(){if(this.dismissal){this.dismissible=this.dismissal}if(this.icon!=null&&this.icon!=""){this.leadIcon=this.icon}if(this.hidden){const{setCollapsed:o}=s(this.ref);const{setFadeOut:e}=r(this.ref);o();e()}}render(){return a(n,{key:"f0b9bf1d1a32c72f9d8176300d06875f0258f068",class:c(`badge-${this.color}`,{"has-close":this.dismissible,"with-gap":this.dismissible||this.label,"visually-hidden":this._isHidden})},a("slot",{key:"967f6cceadd13f1a7758696b0ddb9b77d256caac",name:"leading-icon"},this.leadIcon&&a("nv-icon",{key:"683ccf19e6281ab8fded9e217f61a67d835a7b37",slot:"leading-icon",name:this.leadIcon,size:"sm"})),this.label&&a("span",{key:"e01b6071da8bdc73d7708e91c67afe9bc2819095"},this.label),this.dismissible&&a("button",{key:"f8040e70acd910c63fa377837fc13316a321366c",onClick:this.handleClose,class:"close",type:"button"},a("nv-icon",{key:"405cee0cdcdab3a470086ccbd3aa5b46c5e0e2ea",name:"x",size:"sm"})))}get ref(){return i(this)}static get watchers(){return{dismissal:["handleDismissalChange"],icon:["handleIconChange"],hidden:["handleHiddenChange"]}}};b.style=l;export{b as nv_badge};
|
|
2
|
+
//# sourceMappingURL=p-f1545844.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["nvBadgeCss","NvBadgeStyle0","NvBadge","constructor","hostRef","this","dismissal","color","label","leadIcon","dismissible","hidden","_isHidden","preventAutoClose","handleClose","originalEvent","closeClicked","emit","handleDismissalChange","handleIconChange","icon","handleHiddenChange","hiddenChanged","fadeIn","fadeOut","useFade","ref","duration","collapse","expand","useCollapse","timeline","start","hiddenChangedComplete","componentWillLoad","setCollapsed","setFadeOut","render","h","Host","key","class","clsx","name","slot","size","onClick","type"],"sources":["src/components/nv-badge/nv-badge.scss?tag=nv-badge","src/components/nv-badge/nv-badge.tsx"],"sourcesContent":["@use \"sass:map\";\n@use \"../nv-icon/styles/mixins\" as icon;\n@import \"../../styles/focus-ring\";\n\n/* Variants */\n$badge-colors: (\"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\", \"10\");\n\n/* Define maps for color-related variables */\n$color-rainbow-text: (\n \"1\": var(--color-rainbow-1-text),\n \"2\": var(--color-rainbow-2-text),\n \"3\": var(--color-rainbow-3-text),\n \"4\": var(--color-rainbow-4-text),\n \"5\": var(--color-rainbow-5-text),\n \"6\": var(--color-rainbow-6-text),\n \"7\": var(--color-rainbow-7-text),\n \"8\": var(--color-rainbow-8-text),\n \"9\": var(--color-rainbow-9-text),\n \"10\": var(--color-rainbow-10-text)\n);\n\n$color-rainbow-icon: (\n \"1\": var(--color-rainbow-1-icon),\n \"2\": var(--color-rainbow-2-icon),\n \"3\": var(--color-rainbow-3-icon),\n \"4\": var(--color-rainbow-4-icon),\n \"5\": var(--color-rainbow-5-icon),\n \"6\": var(--color-rainbow-6-icon),\n \"7\": var(--color-rainbow-7-icon),\n \"8\": var(--color-rainbow-8-icon),\n \"9\": var(--color-rainbow-9-icon),\n \"10\": var(--color-rainbow-10-icon)\n);\n\n$color-rainbow-background: (\n \"1\": var(--color-rainbow-1-background),\n \"2\": var(--color-rainbow-2-background),\n \"3\": var(--color-rainbow-3-background),\n \"4\": var(--color-rainbow-4-background),\n \"5\": var(--color-rainbow-5-background),\n \"6\": var(--color-rainbow-6-background),\n \"7\": var(--color-rainbow-7-background),\n \"8\": var(--color-rainbow-8-background),\n \"9\": var(--color-rainbow-9-background),\n \"10\": var(--color-rainbow-10-background)\n);\n\n@mixin root-styles() {\n padding: var(--badge-padding-y) var(--badge-padding-x);\n display: inline-flex !important; // override the display: none in [hidden] css\n vertical-align: middle;\n align-items: center;\n border-radius: var(--radius-rounded-full);\n height: fit-content;\n width: fit-content;\n}\n\n@mixin root-styles-with-gap() {\n @include root-styles();\n gap: var(--badge-gap-x);\n}\n\n@mixin badge-color($badge-number) {\n color: map.get($color-rainbow-text, $badge-number);\n background-color: map.get($color-rainbow-background, $badge-number);\n .close {\n @include focus-ring(var(--color-rainbow-#{$badge-number}-content), 0.2);\n }\n}\n\n@mixin icon-color($badge-number) {\n color: map.get($color-rainbow-icon, $badge-number);\n}\n\n@mixin type-settings($font-size, $line-height) {\n font-size: var(--font-size-xs);\n line-height: var(--line-height-xs) !important;\n}\n\nnv-badge {\n @include root-styles();\n\n //gap styles\n &.with-gap {\n @include root-styles-with-gap();\n }\n\n &:not(.with-gap) {\n @include root-styles();\n }\n\n // color styles\n @each $i in $badge-colors {\n &.badge-#{$i} {\n @include badge-color($i);\n nv-icon {\n @include icon-color($i);\n }\n }\n }\n\n //label styles\n & span {\n @include type-settings(xs, xs);\n }\n\n // nv-icon styles\n & nv-icon > svg {\n @each $size, $config in icon.$size-variants {\n &.icon-#{$size} {\n @include icon.icon-size-and-stroke(\n map.get(map.get(icon.$size-variants, \"xs\"), size),\n map.get(map.get(icon.$size-variants, \"xs\"), stroke)\n );\n }\n }\n }\n\n .close {\n padding: 0;\n line-height: 0;\n border: none;\n background: none;\n cursor: pointer;\n color: inherit;\n display: inline-flex;\n align-items: center;\n aspect-ratio: 1/1;\n border-radius: var(--radius-rounded-full);\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Watch,\n Element,\n State,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { useFade, useCollapse, timeline } from '../../animations';\n\n/**\n * @slot leading-icon - Icon before the label.\n */\n@Component({\n tag: 'nv-badge',\n styleUrl: 'nv-badge.scss',\n shadow: false,\n})\nexport class NvBadge {\n @Element() ref: HTMLNvBadgeElement;\n\n /****************************************************************************/\n //#region DEPRECATED\n\n /**\n * Whether the badge is dismissible.\n * @deprecated use dismissible instead.\n */\n @Prop()\n readonly dismissal: boolean = false;\n\n /**\n * The icon to display in the badge.\n * @deprecated use leadIcon or slot=\"leading-icon\" instead.\n */\n @Prop()\n readonly icon: string;\n\n /**\n * The location of the icon in the badge.\n * @deprecated only leadIcon now.\n */\n @Prop({ reflect: true })\n readonly iconLocation: 'left' | 'right';\n\n //#endregion DEPRECATED\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * The color of the badge. Use a string between 1 to 10\n */\n @Prop({ reflect: true })\n readonly color?: string = '1';\n\n /**\n * Main content of the badge.\n */\n @Prop({ reflect: true })\n readonly label?: string | null = null;\n\n /**\n * The lead icon of the badge.\n */\n @Prop({ reflect: true, mutable: true })\n leadIcon?: string | null = null;\n\n /**\n * Whether the badge is dismissible.\n */\n @Prop({ reflect: true, mutable: true })\n dismissible: boolean = false;\n\n /**\n * Controls the visibility of the badge. Will animate with fade and collapse.\n */\n @Prop({ reflect: true, mutable: true })\n hidden: boolean = false; // eslint-disable-line @stencil-community/reserved-member-names\n @State()\n private _isHidden: boolean = this.hidden;\n\n /**\n * When true, the alert does not automatically close upon dismissing.\n * Useful for externally controlled component behavior.\n */\n @Prop({ reflect: true })\n readonly preventAutoClose: boolean = false;\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Emitted when the badge is dismissed.\n */\n @Event()\n closeClicked: EventEmitter<MouseEvent>;\n\n /**\n * Emits when the 'hidden' prop changes, reflecting a change in visibility.\n * Passes hidden value to the detail.\n */\n @Event()\n hiddenChanged: EventEmitter<boolean>;\n\n /**\n * Emitted when the animations complete, detail includes the hidden value.\n */\n @Event()\n hiddenChangedComplete: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region WATCHERS\n\n /**\n * Handles the dismissal prop change.\n * @param {boolean} dismissal - The new dismissal value.\n */\n @Watch('dismissal')\n handleDismissalChange(dismissal: boolean) {\n this.dismissible = dismissal;\n }\n\n /**\n * Handles the icon prop change.\n * @param {string} icon - The new icon value.\n */\n @Watch('icon')\n handleIconChange(icon: string) {\n this.leadIcon = icon;\n }\n\n /**\n * Handles the hidden prop change.\n * @param {boolean} hidden - The new hidden value.\n */\n @Watch('hidden')\n async handleHiddenChange(hidden: boolean) {\n this.hiddenChanged.emit(hidden);\n if (this._isHidden === true) this._isHidden = hidden;\n\n const { fadeIn, fadeOut } = useFade(this.ref, { duration: 150 });\n const { collapse, expand } = useCollapse(this.ref, { duration: 150 });\n\n if (hidden === true) await timeline(fadeOut, collapse).start();\n if (hidden === false) await timeline(expand, fadeIn).start();\n\n this.hiddenChangedComplete.emit(hidden);\n\n if (this._isHidden === false) this._isHidden = hidden;\n }\n\n //#endregion WATCHERS\n /****************************************************************************/\n //#region LIFECYCLE\n\n /**\n * Component will load.\n */\n componentWillLoad() {\n if (this.dismissal) {\n this.dismissible = this.dismissal;\n }\n\n if (this.icon != null && this.icon != '') {\n this.leadIcon = this.icon;\n }\n\n if (this.hidden) {\n const { setCollapsed } = useCollapse(this.ref);\n const { setFadeOut } = useFade(this.ref);\n\n setCollapsed();\n setFadeOut();\n }\n }\n\n //#endregion LIFECYCLE\n /****************************************************************************/\n //#region METHODS\n\n /**\n * Handles the close button click.\n * @param {MouseEvent} originalEvent - The original event.\n */\n private readonly handleClose = (originalEvent?: MouseEvent) => {\n if (!this.preventAutoClose) {\n this.hidden = true;\n }\n\n this.closeClicked.emit(originalEvent);\n };\n\n //#endregion METHODS\n /****************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n class={clsx(`badge-${this.color}`, {\n 'has-close': this.dismissible,\n 'with-gap': this.dismissible || this.label,\n 'visually-hidden': this._isHidden,\n })}\n >\n <slot name=\"leading-icon\">\n {this.leadIcon && (\n <nv-icon\n slot=\"leading-icon\"\n name={this.leadIcon}\n size=\"sm\"\n ></nv-icon>\n )}\n </slot>\n {this.label && <span>{this.label}</span>}\n {this.dismissible && (\n <button onClick={this.handleClose} class=\"close\" type=\"button\">\n <nv-icon name=\"x\" size=\"sm\" />\n </button>\n )}\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"mappings":"yKAAA,MAAMA,EAAa,+0LACnB,MAAAC,EAAeD,E,MCqBFE,EAAO,MALpB,WAAAC,CAAAC,G,+JAgBWC,KAAAC,UAAqB,MAwBrBD,KAAAE,MAAiB,IAMjBF,KAAAG,MAAwB,KAMjCH,KAAAI,SAA2B,KAM3BJ,KAAAK,YAAuB,MAMvBL,KAAAM,OAAkB,MAEVN,KAAAO,UAAqBP,KAAKM,OAOzBN,KAAAQ,iBAA4B,MAoGpBR,KAAAS,YAAeC,IAC9B,IAAKV,KAAKQ,iBAAkB,CAC1BR,KAAKM,OAAS,I,CAGhBN,KAAKW,aAAaC,KAAKF,EAAc,C,CAvEvC,qBAAAG,CAAsBZ,GACpBD,KAAKK,YAAcJ,C,CAQrB,gBAAAa,CAAiBC,GACff,KAAKI,SAAWW,C,CAQlB,wBAAMC,CAAmBV,GACvBN,KAAKiB,cAAcL,KAAKN,GACxB,GAAIN,KAAKO,YAAc,KAAMP,KAAKO,UAAYD,EAE9C,MAAMY,OAAEA,EAAMC,QAAEA,GAAYC,EAAQpB,KAAKqB,IAAK,CAAEC,SAAU,MAC1D,MAAMC,SAAEA,EAAQC,OAAEA,GAAWC,EAAYzB,KAAKqB,IAAK,CAAEC,SAAU,MAE/D,GAAIhB,IAAW,WAAYoB,EAASP,EAASI,GAAUI,QACvD,GAAIrB,IAAW,YAAaoB,EAASF,EAAQN,GAAQS,QAErD3B,KAAK4B,sBAAsBhB,KAAKN,GAEhC,GAAIN,KAAKO,YAAc,MAAOP,KAAKO,UAAYD,C,CAUjD,iBAAAuB,GACE,GAAI7B,KAAKC,UAAW,CAClBD,KAAKK,YAAcL,KAAKC,S,CAG1B,GAAID,KAAKe,MAAQ,MAAQf,KAAKe,MAAQ,GAAI,CACxCf,KAAKI,SAAWJ,KAAKe,I,CAGvB,GAAIf,KAAKM,OAAQ,CACf,MAAMwB,aAAEA,GAAiBL,EAAYzB,KAAKqB,KAC1C,MAAMU,WAAEA,GAAeX,EAAQpB,KAAKqB,KAEpCS,IACAC,G,EAwBJ,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAOC,EAAK,SAASrC,KAAKE,QAAS,CACjC,YAAaF,KAAKK,YAClB,WAAYL,KAAKK,aAAeL,KAAKG,MACrC,kBAAmBH,KAAKO,aAG1B0B,EAAA,QAAAE,IAAA,2CAAMG,KAAK,gBACRtC,KAAKI,UACJ6B,EAAA,WAAAE,IAAA,2CACEI,KAAK,eACLD,KAAMtC,KAAKI,SACXoC,KAAK,QAIVxC,KAAKG,OAAS8B,EAAA,QAAAE,IAAA,4CAAOnC,KAAKG,OAC1BH,KAAKK,aACJ4B,EAAA,UAAAE,IAAA,2CAAQM,QAASzC,KAAKS,YAAa2B,MAAM,QAAQM,KAAK,UACpDT,EAAA,WAAAE,IAAA,2CAASG,KAAK,IAAIE,KAAK,Q","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as e,c as r,h as o,a as i,g as
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as e,c as r,h as o,a as i,g as a}from"./p-9b093b92.js";import{v as t}from"./p-f5ff676c.js";const d='nv-fieldpassword{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box}nv-fieldpassword[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldpassword[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fieldpassword[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fieldpassword[required]:not([required=false]) label::after{content:"*";color:var(--components-form-text-required);font-weight:700}nv-fieldpassword label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fieldpassword .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldpassword .input-wrapper .input-container{display:flex;flex-grow:1;padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);justify-content:center;align-items:center;gap:var(--form-field-gap);align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default);background:var(--nv-field-background);transition:all 150ms ease-out;position:relative}nv-fieldpassword .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldpassword .input-wrapper .input-container:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldpassword .input-wrapper .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldpassword .input-wrapper .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldpassword .input-wrapper .input-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height)}nv-fieldpassword .input-wrapper .input-container input:focus{outline:none}nv-fieldpassword .input-wrapper .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:"TT Norms Pro", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldpassword .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default);position:absolute;right:50px}nv-fieldpassword .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldpassword .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fieldpassword .toggle-password-icon{position:absolute;right:-1px;border:0 solid transparent !important}';const s=d;const n=class{constructor(o){e(this,o);this.valueChanged=r(this,"valueChanged",7);this.inputId=t();this.disabled=false;this.readonly=false;this.required=false;this.error=false;this.success=false;this.mode="text";this.autocomplete="off";this.hidePasswordIcon=false;this.showPassword=false;this.showPasswordState=this.showPassword;this.handleInputContainerClick=()=>{this.inputElement.focus()};this.togglePasswordVisibility=()=>{this.showPasswordState=!this.showPasswordState};this.handleKeyDown=e=>{if(e.key===" "){e.preventDefault();setTimeout((()=>{this.togglePasswordVisibility()}),0)}};this.handleInput=e=>{const r=e.target;this.value=r.value;this.valueChanged.emit(r.value)}}handleShowPasswordChange(e){this.showPasswordState=e}render(){return o(i,{key:"77ade2d0b5b4282b16925957709433d047a730c7"},(this.label||this.el.querySelector('[slot="label"]'))&&o("label",{key:"158f0347fa53cebea4b89ceee56c8d92c801861f",htmlFor:this.inputId},o("slot",{key:"6ad0d4a2b7d0e6c32249f8ecfc221523999a7e86",name:"label"},this.label)),o("div",{key:"7cab4de8be04d0cbdbaee4b3ea64fcb6d9043ca5",class:"input-wrapper"},o("slot",{key:"808e2c1308b7e095f5207cd9a9198c4667bf2310",name:"before-input"}),o("div",{key:"23f6b0833be73faef6d46dcf0c007c1c16c59681",class:"input-container",onClick:this.handleInputContainerClick},o("slot",{key:"f53ff33bc75dd2417cac55a39e1f24875375c564",name:"leading-input"}),o("input",{key:"70e7e28f957224c7613a1da4b2156afeba706d14",id:this.inputId,ref:e=>this.inputElement=e,autocomplete:this.autocomplete,placeholder:this.placeholder,name:this.name,type:this.showPasswordState?"text":"password",inputMode:this.mode,value:this.value,required:this.required,maxlength:this.maxlength,minlength:this.minlength,pattern:this.pattern,disabled:this.disabled,readOnly:this.readonly,onInput:this.handleInput}),!this.hidePasswordIcon&&o("nv-iconbutton",{key:"96742eeecc9de1bf4ae753fc8c64c2e436e5af86",class:"toggle-password-icon",name:this.showPasswordState?"eye":"eye-off",size:"md",emphasis:"lower",onClick:this.togglePasswordVisibility,onKeyDown:this.handleKeyDown,"aria-label":this.showPasswordState?"Hide password":"Show password","aria-pressed":this.showPasswordState.toString()}),(this.success||this.error)&&o("nv-icon",{key:"71666d2e39bc4fe5057ec014cc788f3b734c0e69",name:this.success?"circle-check":"alert-circle",class:"validation",size:"md"})),o("slot",{key:"7d232c975753c74ce8419b6258dd63f7ca7ab811",name:"after-input"})),(this.description||this.el.querySelector('[slot="description"]'))&&o("div",{key:"f9330dd27bce24c81d2fb58c0da7a8de079deb87",class:"description"},o("slot",{key:"61b9f61075435d7854603aa9e4700a755e0eeb4f",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&o("div",{key:"f4e9183622a9451baa054eea9eb7113b38aa72c2",hidden:!this.error,class:"error-description"},o("slot",{key:"234af9d31bc011493f700f34a707305a8fb421d4",name:"error-description"},this.errorDescription)))}static get formAssociated(){return true}get el(){return a(this)}static get watchers(){return{showPassword:["handleShowPasswordChange"]}}};n.style=s;export{n as nv_fieldpassword};
|
|
2
|
+
//# sourceMappingURL=p-f2ea8aa9.entry.js.map
|