@nova-design-system/nova-webcomponents 3.14.0-beta.0 → 3.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{collapse.animation-23b7d61b.js → collapse.animation-47397763.js} +2 -5
- package/dist/cjs/collapse.animation-47397763.js.map +1 -0
- package/dist/cjs/{constants-f5633903.js → constants-52f6f8e9.js} +1 -10
- package/dist/{native/p-51602221.js.map → cjs/constants-52f6f8e9.js.map} +1 -1
- package/dist/cjs/{fade.animation-9294e9ee.js → fade.animation-cf6eba0d.js} +3 -3
- package/dist/cjs/fade.animation-cf6eba0d.js.map +1 -0
- package/dist/cjs/{grow.animation-f1cef0ad.js → grow.animation-9258ba63.js} +2 -2
- package/dist/cjs/{grow.animation-f1cef0ad.js.map → grow.animation-9258ba63.js.map} +1 -1
- package/dist/cjs/index-c56424e5.js +0 -4
- package/dist/cjs/index.cjs.js +8 -12
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/native.cjs.js +1 -1
- package/dist/cjs/nv-accordion-item.cjs.entry.js +1 -1
- package/dist/cjs/nv-alert.cjs.entry.js +3 -3
- package/dist/cjs/nv-avatar.cjs.entry.js +1 -1
- package/dist/cjs/nv-badge_2.cjs.entry.js +9 -9
- package/dist/cjs/nv-badge_2.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-button.cjs.entry.js +1 -1
- package/dist/cjs/nv-calendar.cjs.entry.js +1 -1
- package/dist/cjs/nv-datagrid.cjs.entry.js +1 -1
- package/dist/cjs/nv-dialog.cjs.entry.js +1 -1
- package/dist/cjs/nv-dialogfooter_2.cjs.entry.js +1 -1
- package/dist/cjs/nv-fieldcheckbox.cjs.entry.js +1 -1
- package/dist/cjs/nv-fieldcheckbox.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-fieldtime.cjs.entry.js +1 -1
- package/dist/cjs/nv-icon.cjs.entry.js +2 -2
- package/dist/cjs/nv-icon.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-notification.cjs.entry.js +9 -70
- package/dist/cjs/nv-notification.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-popover.cjs.entry.js +3 -3
- package/dist/cjs/nv-row.cjs.entry.js +1 -1
- package/dist/cjs/nv-stack.cjs.entry.js +1 -1
- package/dist/cjs/nv-table.cjs.entry.js +2 -2
- package/dist/cjs/nv-toggle.cjs.entry.js +3 -3
- package/dist/cjs/nv-toggle.cjs.entry.js.map +1 -1
- package/dist/cjs/nv-togglebutton.cjs.entry.js +1 -1
- package/dist/cjs/nv-togglebuttongroup.cjs.entry.js +1 -1
- package/dist/cjs/nv-tooltip.cjs.entry.js +1 -1
- package/dist/cjs/slide.animation-bedfc827.js +70 -0
- package/dist/cjs/slide.animation-bedfc827.js.map +1 -0
- package/dist/collection/animations/collapse.animation.js +1 -4
- package/dist/collection/animations/collapse.animation.js.map +1 -1
- package/dist/collection/animations/fade.animation.js +2 -2
- package/dist/collection/animations/fade.animation.js.map +1 -1
- package/dist/collection/animations/slide.animation.js +29 -51
- package/dist/collection/animations/slide.animation.js.map +1 -1
- package/dist/collection/collection-manifest.json +0 -1
- package/dist/collection/components/nv-badge/nv-badge.js +7 -7
- package/dist/collection/components/nv-badge/nv-badge.js.map +1 -1
- package/dist/collection/components/nv-fieldcheckbox/nv-fieldcheckbox.css +0 -1
- package/dist/collection/components/nv-icon/nv-icons.js +3 -1
- package/dist/collection/components/nv-icon/nv-icons.js.map +1 -1
- package/dist/collection/components/nv-menuitem/nv-menuitem.js +1 -1
- package/dist/collection/components/nv-notification/nv-notification.js +6 -104
- package/dist/collection/components/nv-notification/nv-notification.js.map +1 -1
- package/dist/collection/components/nv-notification/styles/nv-notification.css +6 -6
- package/dist/collection/components/nv-popover/nv-popover.js +1 -1
- package/dist/collection/components/nv-row/nv-row.js +1 -1
- package/dist/collection/components/nv-stack/nv-stack.js +1 -1
- package/dist/collection/components/nv-table/nv-table.js +2 -2
- package/dist/collection/components/nv-toggle/nv-toggle.css +23 -13
- package/dist/collection/components/nv-toggle/nv-toggle.js +2 -2
- package/dist/collection/components/nv-togglebutton/nv-togglebutton.js +1 -1
- package/dist/collection/components/nv-togglebuttongroup/nv-togglebuttongroup.js +1 -1
- package/dist/collection/components/nv-tooltip/nv-tooltip.js +1 -1
- package/dist/collection/utils/constants.js +0 -9
- package/dist/collection/utils/constants.js.map +1 -1
- package/dist/components/index.js +8 -6
- package/dist/components/index.js.map +1 -1
- package/dist/components/nv-accordion-item.js +1 -1
- package/dist/components/nv-accordion.js +3 -3
- package/dist/components/nv-alert.js +4 -4
- package/dist/components/nv-avatar.js +2 -2
- package/dist/components/nv-badge.js +1 -1
- package/dist/components/nv-breadcrumb.js +2 -2
- package/dist/components/nv-button.js +1 -1
- package/dist/components/nv-calendar.js +1 -1
- package/dist/components/nv-datagrid.js +3 -3
- package/dist/components/nv-dialog.js +4 -4
- package/dist/components/nv-dialogfooter.js +1 -1
- package/dist/components/nv-fieldcheckbox.js +1 -1
- package/dist/components/nv-fielddate.js +5 -5
- package/dist/components/nv-fielddaterange.js +5 -5
- package/dist/components/nv-fielddropdown.js +4 -4
- package/dist/components/nv-fielddropdownitem.js +1 -1
- package/dist/components/nv-fielddropdownitemcheck.js +1 -1
- package/dist/components/nv-fieldmultiselect.js +6 -6
- package/dist/components/nv-fieldnumber.js +1 -1
- package/dist/components/nv-fieldpassword.js +2 -2
- package/dist/components/nv-fieldselect.js +2 -2
- package/dist/components/nv-fieldslider.js +3 -3
- package/dist/components/nv-fieldtext.js +1 -1
- package/dist/components/nv-fieldtime.js +4 -4
- package/dist/components/nv-icon.js +1 -1
- package/dist/components/nv-iconbutton.js +1 -1
- package/dist/components/nv-menu.js +3 -3
- package/dist/components/nv-menuitem.js +1 -1
- package/dist/components/nv-notification.js +11 -74
- package/dist/components/nv-notification.js.map +1 -1
- package/dist/components/nv-popover.js +1 -1
- package/dist/components/nv-row.js +1 -1
- package/dist/components/nv-stack.js +1 -1
- package/dist/components/nv-table.js +2 -2
- package/dist/components/nv-toggle.js +3 -3
- package/dist/components/nv-toggle.js.map +1 -1
- package/dist/components/nv-togglebutton.js +1 -1
- package/dist/components/nv-togglebuttongroup.js +1 -1
- package/dist/components/nv-tooltip.js +1 -1
- package/dist/components/{p-00cbf2a1.js → p-1172e9bb.js} +2 -2
- package/dist/components/p-1172e9bb.js.map +1 -0
- package/dist/components/{p-51602221.js → p-2277cfc8.js} +2 -11
- package/dist/components/p-2277cfc8.js.map +1 -0
- package/dist/components/{p-95857e4f.js → p-2de17259.js} +2 -2
- package/dist/components/{p-95857e4f.js.map → p-2de17259.js.map} +1 -1
- package/dist/components/{p-3cd7a66f.js → p-31591941.js} +2 -5
- package/dist/components/p-31591941.js.map +1 -0
- package/dist/components/{p-ee8944f3.js → p-60244646.js} +4 -4
- package/dist/components/{p-ee8944f3.js.map → p-60244646.js.map} +1 -1
- package/dist/components/{p-54161bad.js → p-68fa3890.js} +2 -2
- package/dist/components/{p-54161bad.js.map → p-68fa3890.js.map} +1 -1
- package/dist/components/{p-a45cacdf.js → p-6ffba98c.js} +2 -2
- package/dist/components/{p-a45cacdf.js.map → p-6ffba98c.js.map} +1 -1
- package/dist/components/{p-aaf0b787.js → p-8439219d.js} +2 -2
- package/dist/components/{p-aaf0b787.js.map → p-8439219d.js.map} +1 -1
- package/dist/components/{p-086a46af.js → p-85825688.js} +4 -4
- package/dist/components/{p-086a46af.js.map → p-85825688.js.map} +1 -1
- package/dist/components/{p-51a43ac6.js → p-930caa42.js} +4 -4
- package/dist/components/{p-51a43ac6.js.map → p-930caa42.js.map} +1 -1
- package/dist/components/{p-c8956181.js → p-942f6619.js} +2 -2
- package/dist/components/{p-c8956181.js.map → p-942f6619.js.map} +1 -1
- package/dist/components/{p-7426b20f.js → p-ac91582e.js} +2 -2
- package/dist/components/{p-7426b20f.js.map → p-ac91582e.js.map} +1 -1
- package/dist/components/{p-44862b81.js → p-c59eccf1.js} +3 -3
- package/dist/components/{p-44862b81.js.map → p-c59eccf1.js.map} +1 -1
- package/dist/components/{p-6926e6f6.js → p-d4d310dd.js} +2 -2
- package/dist/components/{p-6926e6f6.js.map → p-d4d310dd.js.map} +1 -1
- package/dist/components/{p-f4ae2239.js → p-e0cd7e3a.js} +3 -3
- package/dist/components/p-e0cd7e3a.js.map +1 -0
- package/dist/components/{p-368c8700.js → p-e5dff125.js} +11 -11
- package/dist/components/{p-368c8700.js.map → p-e5dff125.js.map} +1 -1
- package/dist/components/{p-a823b8e9.js → p-e6c04562.js} +2 -2
- package/dist/components/{p-a823b8e9.js.map → p-e6c04562.js.map} +1 -1
- package/dist/components/{p-1af3591a.js → p-eb443b26.js} +3 -3
- package/dist/components/{p-1af3591a.js.map → p-eb443b26.js.map} +1 -1
- package/dist/components/p-eda2f9f3.js +68 -0
- package/dist/components/p-eda2f9f3.js.map +1 -0
- package/dist/components/{p-a271e3be.js → p-ee0df37f.js} +3 -3
- package/dist/components/p-ee0df37f.js.map +1 -0
- package/dist/components/{p-4697bd56.js → p-fb560fa3.js} +2 -2
- package/dist/components/{p-4697bd56.js.map → p-fb560fa3.js.map} +1 -1
- package/dist/esm/{collapse.animation-6e0b08df.js → collapse.animation-acda1bf5.js} +2 -5
- package/dist/esm/collapse.animation-acda1bf5.js.map +1 -0
- package/dist/esm/{constants-69bafca2.js → constants-d0f19e7b.js} +2 -11
- package/dist/esm/constants-d0f19e7b.js.map +1 -0
- package/dist/esm/{fade.animation-9b939939.js → fade.animation-eb454088.js} +3 -3
- package/dist/esm/{fade.animation-9b939939.js.map → fade.animation-eb454088.js.map} +1 -1
- package/dist/esm/{grow.animation-03fa5c19.js → grow.animation-5b2abb3a.js} +2 -2
- package/dist/esm/{grow.animation-03fa5c19.js.map → grow.animation-5b2abb3a.js.map} +1 -1
- package/dist/esm/index-a1936cd0.js +0 -4
- package/dist/esm/index.js +8 -6
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/native.js +1 -1
- package/dist/esm/nv-accordion-item.entry.js +1 -1
- package/dist/esm/nv-alert.entry.js +3 -3
- package/dist/esm/nv-avatar.entry.js +1 -1
- package/dist/esm/nv-badge_2.entry.js +9 -9
- package/dist/esm/nv-badge_2.entry.js.map +1 -1
- package/dist/esm/nv-button.entry.js +1 -1
- package/dist/esm/nv-calendar.entry.js +1 -1
- package/dist/esm/nv-datagrid.entry.js +1 -1
- package/dist/esm/nv-dialog.entry.js +1 -1
- package/dist/esm/nv-dialogfooter_2.entry.js +1 -1
- package/dist/esm/nv-fieldcheckbox.entry.js +1 -1
- package/dist/esm/nv-fieldcheckbox.entry.js.map +1 -1
- package/dist/esm/nv-fieldtime.entry.js +1 -1
- package/dist/esm/nv-icon.entry.js +2 -2
- package/dist/esm/nv-icon.entry.js.map +1 -1
- package/dist/esm/nv-notification.entry.js +9 -70
- package/dist/esm/nv-notification.entry.js.map +1 -1
- package/dist/esm/nv-popover.entry.js +3 -3
- package/dist/esm/nv-row.entry.js +1 -1
- package/dist/esm/nv-stack.entry.js +1 -1
- package/dist/esm/nv-table.entry.js +2 -2
- package/dist/esm/nv-toggle.entry.js +3 -3
- package/dist/esm/nv-toggle.entry.js.map +1 -1
- package/dist/esm/nv-togglebutton.entry.js +1 -1
- package/dist/esm/nv-togglebuttongroup.entry.js +1 -1
- package/dist/esm/nv-tooltip.entry.js +1 -1
- package/dist/esm/slide.animation-f444aa0b.js +68 -0
- package/dist/esm/slide.animation-f444aa0b.js.map +1 -0
- package/dist/native/index.esm.js +1 -1
- package/dist/native/index.esm.js.map +1 -1
- package/dist/native/native.css +1 -1
- package/dist/native/native.esm.js +1 -1
- package/dist/native/native.esm.js.map +1 -1
- package/dist/native/{p-4ec61dec.entry.js → p-08582c21.entry.js} +2 -2
- package/dist/native/p-0e488b3d.entry.js +2 -0
- package/dist/native/p-0e488b3d.entry.js.map +1 -0
- package/dist/native/{p-224b1a01.entry.js → p-1f01fb64.entry.js} +2 -2
- package/dist/native/{p-6c7a9a21.entry.js → p-225a05bf.entry.js} +2 -2
- package/dist/native/p-2277cfc8.js +2 -0
- package/dist/native/p-2277cfc8.js.map +1 -0
- package/dist/native/p-25f2ce81.entry.js +2 -0
- package/dist/native/p-31591941.js +2 -0
- package/dist/native/p-31591941.js.map +1 -0
- package/dist/native/{p-fa177c39.entry.js → p-3784efdc.entry.js} +2 -2
- package/dist/native/{p-08322093.entry.js → p-3f861ddc.entry.js} +2 -2
- package/dist/native/{p-5c697133.entry.js → p-40c4a221.entry.js} +2 -2
- package/dist/native/p-40c4a221.entry.js.map +1 -0
- package/dist/native/{p-6d13a851.entry.js → p-52b8c872.entry.js} +2 -2
- package/dist/native/{p-48774d0c.entry.js → p-5a43fe48.entry.js} +2 -2
- package/dist/native/p-6290951d.entry.js +2 -0
- package/dist/native/p-6290951d.entry.js.map +1 -0
- package/dist/native/{p-d2c9247b.entry.js → p-788e9ee5.entry.js} +2 -2
- package/dist/native/{p-d882f417.entry.js → p-7bbcf477.entry.js} +2 -2
- package/dist/native/{p-47da1926.entry.js → p-81952a3c.entry.js} +2 -2
- package/dist/native/p-81952a3c.entry.js.map +1 -0
- package/dist/native/{p-6cb6679b.entry.js → p-8c823928.entry.js} +2 -2
- package/dist/native/{p-c7b7ffaf.entry.js → p-cfd5785e.entry.js} +2 -2
- package/dist/native/p-d88c416f.entry.js +2 -0
- package/dist/native/p-d88c416f.entry.js.map +1 -0
- package/dist/native/{p-c66565f8.entry.js → p-d95ee31e.entry.js} +2 -2
- package/dist/native/p-da2c7d3c.entry.js +2 -0
- package/dist/native/{p-1504e28b.entry.js.map → p-da2c7d3c.entry.js.map} +1 -1
- package/dist/native/p-eda2f9f3.js +2 -0
- package/dist/native/p-eda2f9f3.js.map +1 -0
- package/dist/native/{p-a271e3be.js → p-ee0df37f.js} +2 -2
- package/dist/native/{p-a271e3be.js.map → p-ee0df37f.js.map} +1 -1
- package/dist/native/{p-b32d0a5a.entry.js → p-ee516944.entry.js} +2 -2
- package/dist/native/{p-e2c99ce2.entry.js → p-f5eb047e.entry.js} +2 -2
- package/dist/native/p-fb560fa3.js +2 -0
- package/dist/types/animations/slide.animation.d.ts +4 -15
- package/dist/types/components/nv-badge/nv-badge.d.ts +1 -1
- package/dist/types/components/nv-icon/nv-icons.d.ts +1 -1
- package/dist/types/components/nv-notification/nv-notification.d.ts +0 -18
- package/dist/types/components.d.ts +3 -60
- package/dist/types/utils/constants.d.ts +0 -8
- package/dist/vscode-data.json +7 -38
- package/hydrate/index.js +59 -206
- package/hydrate/index.mjs +59 -206
- package/package.json +3 -9
- package/dist/cjs/collapse.animation-23b7d61b.js.map +0 -1
- package/dist/cjs/constants-f5633903.js.map +0 -1
- package/dist/cjs/fade.animation-9294e9ee.js.map +0 -1
- package/dist/cjs/nv-notificationcontainer.cjs.entry.js +0 -43
- package/dist/cjs/nv-notificationcontainer.cjs.entry.js.map +0 -1
- package/dist/cjs/slide.animation-8bc27ed6.js +0 -92
- package/dist/cjs/slide.animation-8bc27ed6.js.map +0 -1
- package/dist/collection/components/nv-notificationcontainer/nv-notificationcontainer.css +0 -61
- package/dist/collection/components/nv-notificationcontainer/nv-notificationcontainer.docs.js +0 -7
- package/dist/collection/components/nv-notificationcontainer/nv-notificationcontainer.docs.js.map +0 -1
- package/dist/collection/components/nv-notificationcontainer/nv-notificationcontainer.js +0 -76
- package/dist/collection/components/nv-notificationcontainer/nv-notificationcontainer.js.map +0 -1
- package/dist/components/nv-notificationcontainer.d.ts +0 -11
- package/dist/components/nv-notificationcontainer.js +0 -59
- package/dist/components/nv-notificationcontainer.js.map +0 -1
- package/dist/components/p-00cbf2a1.js.map +0 -1
- package/dist/components/p-3cd7a66f.js.map +0 -1
- package/dist/components/p-51602221.js.map +0 -1
- package/dist/components/p-a271e3be.js.map +0 -1
- package/dist/components/p-c7401a7d.js +0 -90
- package/dist/components/p-c7401a7d.js.map +0 -1
- package/dist/components/p-f4ae2239.js.map +0 -1
- package/dist/esm/collapse.animation-6e0b08df.js.map +0 -1
- package/dist/esm/constants-69bafca2.js.map +0 -1
- package/dist/esm/nv-notificationcontainer.entry.js +0 -39
- package/dist/esm/nv-notificationcontainer.entry.js.map +0 -1
- package/dist/esm/slide.animation-f761030b.js +0 -90
- package/dist/esm/slide.animation-f761030b.js.map +0 -1
- package/dist/native/p-1504e28b.entry.js +0 -2
- package/dist/native/p-19090193.entry.js +0 -2
- package/dist/native/p-19090193.entry.js.map +0 -1
- package/dist/native/p-29df974e.entry.js +0 -2
- package/dist/native/p-29df974e.entry.js.map +0 -1
- package/dist/native/p-3cd7a66f.js +0 -2
- package/dist/native/p-3cd7a66f.js.map +0 -1
- package/dist/native/p-45506c37.entry.js +0 -2
- package/dist/native/p-45506c37.entry.js.map +0 -1
- package/dist/native/p-4697bd56.js +0 -2
- package/dist/native/p-47da1926.entry.js.map +0 -1
- package/dist/native/p-51602221.js +0 -2
- package/dist/native/p-5c697133.entry.js.map +0 -1
- package/dist/native/p-74b129e9.entry.js +0 -2
- package/dist/native/p-758e0d4a.entry.js +0 -2
- package/dist/native/p-758e0d4a.entry.js.map +0 -1
- package/dist/native/p-c7401a7d.js +0 -2
- package/dist/native/p-c7401a7d.js.map +0 -1
- package/dist/types/components/nv-notificationcontainer/nv-notificationcontainer.d.ts +0 -19
- package/dist/types/components/nv-notificationcontainer/nv-notificationcontainer.docs.d.ts +0 -4
- package/postinstall.js +0 -15
- /package/dist/native/{p-4ec61dec.entry.js.map → p-08582c21.entry.js.map} +0 -0
- /package/dist/native/{p-224b1a01.entry.js.map → p-1f01fb64.entry.js.map} +0 -0
- /package/dist/native/{p-6c7a9a21.entry.js.map → p-225a05bf.entry.js.map} +0 -0
- /package/dist/native/{p-74b129e9.entry.js.map → p-25f2ce81.entry.js.map} +0 -0
- /package/dist/native/{p-fa177c39.entry.js.map → p-3784efdc.entry.js.map} +0 -0
- /package/dist/native/{p-08322093.entry.js.map → p-3f861ddc.entry.js.map} +0 -0
- /package/dist/native/{p-6d13a851.entry.js.map → p-52b8c872.entry.js.map} +0 -0
- /package/dist/native/{p-48774d0c.entry.js.map → p-5a43fe48.entry.js.map} +0 -0
- /package/dist/native/{p-d2c9247b.entry.js.map → p-788e9ee5.entry.js.map} +0 -0
- /package/dist/native/{p-d882f417.entry.js.map → p-7bbcf477.entry.js.map} +0 -0
- /package/dist/native/{p-6cb6679b.entry.js.map → p-8c823928.entry.js.map} +0 -0
- /package/dist/native/{p-c7b7ffaf.entry.js.map → p-cfd5785e.entry.js.map} +0 -0
- /package/dist/native/{p-c66565f8.entry.js.map → p-d95ee31e.entry.js.map} +0 -0
- /package/dist/native/{p-b32d0a5a.entry.js.map → p-ee516944.entry.js.map} +0 -0
- /package/dist/native/{p-e2c99ce2.entry.js.map → p-f5eb047e.entry.js.map} +0 -0
- /package/dist/native/{p-4697bd56.js.map → p-fb560fa3.js.map} +0 -0
|
@@ -3,15 +3,15 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
const index = require('./index-c56424e5.js');
|
|
6
|
-
const constants = require('./constants-
|
|
7
|
-
const collapse_animation = require('./collapse.animation-
|
|
8
|
-
const fade_animation = require('./fade.animation-
|
|
6
|
+
const constants = require('./constants-52f6f8e9.js');
|
|
7
|
+
const collapse_animation = require('./collapse.animation-47397763.js');
|
|
8
|
+
const fade_animation = require('./fade.animation-cf6eba0d.js');
|
|
9
9
|
require('./style-value-types.es-eea2f16f.js');
|
|
10
|
-
const slide_animation = require('./slide.animation-
|
|
10
|
+
const slide_animation = require('./slide.animation-bedfc827.js');
|
|
11
11
|
const timeline_animation = require('./timeline.animation-2878afb6.js');
|
|
12
12
|
const v4 = require('./v4-7014b8b0.js');
|
|
13
13
|
|
|
14
|
-
const nvNotificationCss = "nv-notification{display:block}nv-notification [data-scope=container]{display:flex;position:relative;max-width:512px;width:100%;padding:var(--notification-padding);align-items:flex-start;gap:var(--notification-gap-x);border-radius:var(--notification-radius);border-style:solid;box-shadow:0 var(--shadow-y-axis-lg-1, 4px) var(--shadow-blur-lg-1, 6px) var(--shadow-spread-lg-1, -2px) var(--shadow-color-opacity-1, rgba(14, 14, 14, 0.06)), 0 var(--shadow-y-axis-lg-2, 10px) var(--shadow-blur-lg-2, 15px) var(--shadow-spread-lg-2, -3px) var(--shadow-color-opacity-2, rgba(14, 14, 14, 0.1))}nv-notification [data-scope=container]
|
|
14
|
+
const nvNotificationCss = "nv-notification{display:block}nv-notification [data-scope=container]{display:flex;position:relative;max-width:512px;width:100%;padding:var(--notification-padding);align-items:flex-start;gap:var(--notification-gap-x);border-radius:var(--notification-radius);border-style:solid;box-shadow:0 var(--shadow-y-axis-lg-1, 4px) var(--shadow-blur-lg-1, 6px) var(--shadow-spread-lg-1, -2px) var(--shadow-color-opacity-1, rgba(14, 14, 14, 0.06)), 0 var(--shadow-y-axis-lg-2, 10px) var(--shadow-blur-lg-2, 15px) var(--shadow-spread-lg-2, -3px) var(--shadow-color-opacity-2, rgba(14, 14, 14, 0.1))}nv-notification [data-scope=container]>nv-icon{flex-shrink:0}nv-notification [data-scope=container] [data-scope=dismiss]{padding:var(--button-sm-icon-button-padding, 8px);justify-content:center;align-items:center;gap:var(--button-sm-gap, 6px);display:flex;position:absolute;right:8px;top:8px;border-radius:var(--button-sm-border-radius, 4px);background:var(--components-button-lower-background, rgba(255, 255, 255, 0));color:var(--components-button-lower-icon)}nv-notification [data-scope=container] [data-scope=content]{display:flex;padding-right:var(--notification-padding-right);flex-direction:column;align-items:flex-start;gap:var(--notification-gap-y);flex:1 0 0}nv-notification [data-scope=container] [data-scope=content] [data-scope=heading]{display:flex;align-items:flex-start;gap:var(--notification-gap-x);align-self:stretch;color:var(--components-notification-content-title);font-size:var(--notification-title-font-size);font-style:normal;font-weight:500;line-height:20px;}nv-notification [data-scope=container] [data-scope=content] [data-scope=message]{display:flex;flex-direction:column;align-items:flex-start;gap:var(--notification-gap-y);align-self:stretch;color:var(--components-notification-content-description);font-variant-numeric:lining-nums tabular-nums slashed-zero;font-size:var(--font-size-sm, 14px);font-style:normal;font-weight:400;line-height:var(--line-height-sm, 20px)}nv-notification [data-scope=container] [data-scope=content] [data-scope=actions]{display:flex;padding:var(--spacing-2, 8px) 0;padding-bottom:0px;align-items:flex-start;gap:var(--notification-gap-x);align-self:stretch;margin-left:calc(-1 * var(--button-sm-padding-x))}nv-notification[feedback=information] [data-scope=container]{background-color:var(--components-notification-information-background);border-color:var(--components-notification-information-border)}nv-notification[feedback=information] [data-scope=container]>nv-icon{color:var(--components-notification-information-icon)}nv-notification[feedback=information]>[data-scope=close]:focus,nv-notification[feedback=information]>[data-scope=close]:focus-within{outline:none}nv-notification[feedback=information]>[data-scope=close]:focus-visible,nv-notification[feedback=information]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-information-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-notification[feedback=warning] [data-scope=container]{background-color:var(--components-notification-warning-background);border-color:var(--components-notification-warning-border)}nv-notification[feedback=warning] [data-scope=container]>nv-icon{color:var(--components-notification-warning-icon)}nv-notification[feedback=warning]>[data-scope=close]:focus,nv-notification[feedback=warning]>[data-scope=close]:focus-within{outline:none}nv-notification[feedback=warning]>[data-scope=close]:focus-visible,nv-notification[feedback=warning]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-warning-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-notification[feedback=error] [data-scope=container]{background-color:var(--components-notification-error-background);border-color:var(--components-notification-error-border)}nv-notification[feedback=error] [data-scope=container]>nv-icon{color:var(--components-notification-error-icon)}nv-notification[feedback=error]>[data-scope=close]:focus,nv-notification[feedback=error]>[data-scope=close]:focus-within{outline:none}nv-notification[feedback=error]>[data-scope=close]:focus-visible,nv-notification[feedback=error]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-error-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-notification[feedback=success] [data-scope=container]{background-color:var(--components-notification-success-background);border-color:var(--components-notification-success-border)}nv-notification[feedback=success] [data-scope=container]>nv-icon{color:var(--components-notification-success-icon)}nv-notification[feedback=success]>[data-scope=close]:focus,nv-notification[feedback=success]>[data-scope=close]:focus-within{outline:none}nv-notification[feedback=success]>[data-scope=close]:focus-visible,nv-notification[feedback=success]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-success-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-notification[feedback=neutral] [data-scope=container]{background-color:var(--components-notification-neutral-background);border-color:var(--components-notification-neutral-border)}nv-notification[feedback=neutral] [data-scope=container]>nv-icon{color:var(--components-notification-neutral-icon)}nv-notification[feedback=neutral]>[data-scope=close]:focus,nv-notification[feedback=neutral]>[data-scope=close]:focus-within{outline:none}nv-notification[feedback=neutral]>[data-scope=close]:focus-visible,nv-notification[feedback=neutral]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-neutral-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-notification[emphasis=high] [data-scope=container]{border-width:1px;border-left-width:var(--notification-border-width-high-emphasis);padding-left:calc(var(--notification-padding) - var(--notification-border-width-high-emphasis) + 1px)}nv-notification[emphasis=medium] [data-scope=container]{border-width:var(--notification-border-width-low-emphasis);border-color:var(--color-content-low-border, #E3E3E3)}";
|
|
15
15
|
const NvNotificationStyle0 = nvNotificationCss;
|
|
16
16
|
|
|
17
17
|
const NvNotification = class {
|
|
@@ -44,11 +44,6 @@ const NvNotification = class {
|
|
|
44
44
|
* Controls the visibility of the notification.
|
|
45
45
|
*/
|
|
46
46
|
this.hidden = false; // eslint-disable-line @stencil-community/reserved-member-names
|
|
47
|
-
/**
|
|
48
|
-
* When true, the notification will be hidden initially, but internal changes
|
|
49
|
-
* will not be in a controlled state. Good for animating the notification in.
|
|
50
|
-
*/
|
|
51
|
-
this.initiallyHidden = false;
|
|
52
47
|
//#endregion EVENTS
|
|
53
48
|
/****************************************************************************/
|
|
54
49
|
//#region INTERNAL
|
|
@@ -70,22 +65,9 @@ const NvNotification = class {
|
|
|
70
65
|
//#endregion PROPERTIES
|
|
71
66
|
/****************************************************************************/
|
|
72
67
|
//#region METHODS
|
|
73
|
-
/**
|
|
74
|
-
* Dismisses the notification with an animation, after the animation is
|
|
75
|
-
* complete, the hiddenChanged event will be emitted with the value of true,
|
|
76
|
-
* and the hidden prop will be set to true.
|
|
77
|
-
*/
|
|
78
68
|
async dismiss() {
|
|
79
69
|
await this.dismissAnimation();
|
|
80
70
|
}
|
|
81
|
-
/**
|
|
82
|
-
* Sets the hidden prop to false, and shows the notification with an
|
|
83
|
-
* animation, after the animation is complete, the hiddenChanged event will be
|
|
84
|
-
* emitted with the value of false.
|
|
85
|
-
*/
|
|
86
|
-
async show() {
|
|
87
|
-
await this.showAnimation();
|
|
88
|
-
}
|
|
89
71
|
getDefaultIcon() {
|
|
90
72
|
var _a;
|
|
91
73
|
return (_a = this.iconByFeedback[this.feedback]) !== null && _a !== void 0 ? _a : 'info-circle';
|
|
@@ -103,55 +85,14 @@ const NvNotification = class {
|
|
|
103
85
|
getMessageId() {
|
|
104
86
|
return this.message ? `nv-notification-${this.uid}-message` : null;
|
|
105
87
|
}
|
|
106
|
-
async showAnimation() {
|
|
107
|
-
this.hidden = false;
|
|
108
|
-
const { setFadeIn } = fade_animation.useFade(this.container);
|
|
109
|
-
const { expand } = collapse_animation.useCollapse(this.el, {
|
|
110
|
-
duration: 300,
|
|
111
|
-
overflow: 'visible',
|
|
112
|
-
});
|
|
113
|
-
const { slideY, setSlideY } = slide_animation.useSlide(this.container, {
|
|
114
|
-
duration: 300,
|
|
115
|
-
});
|
|
116
|
-
setSlideY(-100);
|
|
117
|
-
setFadeIn();
|
|
118
|
-
await timeline_animation.parallel(slideY({ from: -100, to: 0 }), expand).start();
|
|
119
|
-
this.hiddenChanged.emit(false);
|
|
120
|
-
}
|
|
121
|
-
getSlideDestination(pos) {
|
|
122
|
-
switch (pos) {
|
|
123
|
-
case constants.NotificationPosition.TopRight:
|
|
124
|
-
case constants.NotificationPosition.BottomRight:
|
|
125
|
-
return { axis: 'x', to: 100 }; // right
|
|
126
|
-
case constants.NotificationPosition.TopLeft:
|
|
127
|
-
case constants.NotificationPosition.BottomLeft:
|
|
128
|
-
return { axis: 'x', to: -100 }; // left
|
|
129
|
-
case constants.NotificationPosition.TopCenter:
|
|
130
|
-
return { axis: 'y', to: -100 }; // up
|
|
131
|
-
case constants.NotificationPosition.BottomCenter:
|
|
132
|
-
return { axis: 'y', to: 100 }; // down
|
|
133
|
-
default:
|
|
134
|
-
return { axis: 'x', to: 100 }; // fallback
|
|
135
|
-
}
|
|
136
|
-
}
|
|
137
88
|
async dismissAnimation() {
|
|
138
|
-
var _a;
|
|
139
|
-
const position = (_a = this.el
|
|
140
|
-
.closest('nv-notificationcontainer')) === null || _a === void 0 ? void 0 : _a.getAttribute('position');
|
|
141
|
-
const destination = this.getSlideDestination(position);
|
|
142
89
|
const { fadeOut } = fade_animation.useFade(this.container, { duration: 300 });
|
|
143
|
-
const {
|
|
144
|
-
duration: 500,
|
|
145
|
-
});
|
|
90
|
+
const { slideOut } = slide_animation.useSlide(this.container, { duration: 800 });
|
|
146
91
|
const { collapse } = collapse_animation.useCollapse(this.el, {
|
|
147
|
-
duration:
|
|
92
|
+
duration: 800,
|
|
148
93
|
overflow: 'visible',
|
|
149
94
|
});
|
|
150
|
-
|
|
151
|
-
? slideX({ from: 0, to: destination.to })
|
|
152
|
-
: slideY({ from: 0, to: destination.to });
|
|
153
|
-
setSlideReset();
|
|
154
|
-
await timeline_animation.parallel(fadeOut, slide, collapse).start();
|
|
95
|
+
await timeline_animation.parallel(fadeOut, slideOut, collapse).start();
|
|
155
96
|
this.hidden = true;
|
|
156
97
|
this.hiddenChanged.emit(true);
|
|
157
98
|
}
|
|
@@ -162,15 +103,13 @@ const NvNotification = class {
|
|
|
162
103
|
this.headingSlot = this.el.querySelector('[slot="heading"]');
|
|
163
104
|
this.messageSlot = this.el.querySelector('[slot="content"]');
|
|
164
105
|
this.actionsSlot = this.el.querySelector('[slot="actions"]');
|
|
165
|
-
if (this.initiallyHidden)
|
|
166
|
-
this.hidden = true;
|
|
167
106
|
}
|
|
168
107
|
//#endregion LIFECYCLE
|
|
169
108
|
/****************************************************************************/
|
|
170
109
|
//#region RENDER
|
|
171
110
|
render() {
|
|
172
111
|
var _a, _b, _c;
|
|
173
|
-
return (index.h(index.Host, { key: '
|
|
112
|
+
return (index.h(index.Host, { key: '9146cea4ed72801aadf2fb4b7e44895038c98437', role: this.getAriaRole(), "aria-live": this.getAriaLive(), "aria-atomic": true, "aria-labelledby": (_a = this.getHeadingId()) !== null && _a !== void 0 ? _a : null, "aria-describedby": (_b = this.getMessageId()) !== null && _b !== void 0 ? _b : null, tabindex: "-1" }, index.h("div", { key: 'beed9ae5f6fac1b0c6d103dd75a41e0aede84041', "data-scope": "container", ref: el => (this.container = el) }, this.dismissible && (index.h("button", { key: '8e17f33867c2563de719dc1b0f0e2d4ae39ad1a6', "data-scope": "dismiss", type: "button", onClick: this.dismiss.bind(this) }, index.h("nv-icon", { key: 'cb8850135bb2383e33a16671569547611b55e434', name: "x", size: "sm" }))), index.h("nv-icon", { key: 'f5f58e1c3a94d854841271eb12af047322b2f0b4', name: (_c = this.icon) !== null && _c !== void 0 ? _c : this.getDefaultIcon(), size: "md" }), index.h("div", { key: '9c6f6bb0315cd25260d483472a24832031ce45da', "data-scope": "content" }, (this.heading || this.headingSlot) && (index.h("p", { key: '1013d6b6790f75682a1db0e43293b61e614f1c07', id: this.getHeadingId(), "data-scope": "heading" }, index.h("slot", { key: '844a7bccf6f365d4e59dfdec9b3c9096cbeda798', name: "heading" }, this.heading))), (this.message || this.messageSlot) && (index.h("p", { key: '6688e9dc927f6164ce60f27b84fdbeb257296504', id: this.getMessageId(), "data-scope": "message" }, index.h("slot", { key: 'f0c0790faa40411970575240a081f0f0bf0e9aff', name: "content" }, this.message))), this.actionsSlot && (index.h("div", { key: '0ba946edf5b3a8410da3b375e589613a2674fd15', "data-scope": "actions" }, index.h("slot", { key: '0360ab92db66957f0290569c39307ced2be5922d', name: "actions" })))))));
|
|
174
113
|
}
|
|
175
114
|
get el() { return index.getElement(this); }
|
|
176
115
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"nv-notification.entry.cjs.js","mappings":"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","names":["uuidv4","FeedbackColors","useFade","useCollapse","useSlide","parallel","NotificationPosition","h","Host"],"sources":["src/components/nv-notification/styles/nv-notification.scss?tag=nv-notification","src/components/nv-notification/nv-notification.tsx"],"sourcesContent":["@use \"sass:map\";\n@use \"./mixins\" as *;\n@import \"../../../styles/focus-ring\";\n\nnv-notification {\n @include root-styles();\n\n [data-scope=\"container\"] {\n @include container-styles();\n\n [data-scope=\"icon\"] {\n @include icon-styles();\n }\n\n [data-scope=\"dismiss\"] {\n @include dismiss-btn-styles();\n }\n\n [data-scope=\"content\"] {\n @include content-styles();\n\n [data-scope=\"heading\"] {\n @include header-styles();\n }\n\n [data-scope=\"message\"] {\n @include message-styles();\n }\n\n [data-scope=\"actions\"] {\n @include actions-styles();\n }\n }\n }\n\n @each $feedback in $feedback-variants {\n &[feedback=\"#{$feedback}\"] {\n [data-scope=\"container\"] {\n @include feedback-color($feedback);\n\n [data-scope=\"icon\"] {\n @include icon-color($feedback);\n }\n }\n\n & > [data-scope=\"close\"] {\n @include focus-ring(map.get($border-color-map, $feedback));\n }\n }\n }\n\n @each $emphasis in $emphasis-variants {\n &[emphasis=\"#{$emphasis}\"] {\n [data-scope=\"container\"] {\n @include emphasis-styles($emphasis);\n }\n }\n }\n}","import {\n Component,\n Host,\n h,\n Prop,\n Method,\n Element,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport {\n FeedbackColors,\n NotificationEmphasis,\n NotificationPosition,\n} from '../../utils/constants';\nimport { type IconName } from '../nv-icon/nv-icons';\nimport { useCollapse, useFade, useSlide, parallel } from '../../animations';\n\ntype AriaRole = 'status' | 'alert';\ntype AriaLive = 'polite' | 'assertive';\n\n/**\n * @slot heading - Use this slot to insert HTML as the notification title.\n * @slot content - Use this slot to insert HTML as the notification message.\n * @slot actions - Use this slot for custom actions.\n */\n@Component({\n tag: 'nv-notification',\n styleUrl: 'styles/nv-notification.scss',\n shadow: false,\n})\nexport class NvNotification {\n @Element() el: HTMLNvNotificationElement;\n private container: HTMLElement;\n private headingSlot: HTMLElement;\n private messageSlot: HTMLElement;\n private actionsSlot: HTMLElement;\n\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * Set a unique ID for the notification. Used for aria attributes and managing\n * multiple notifications.\n */\n @Prop({ reflect: true })\n readonly uid: string = uuidv4();\n\n /**\n * Specifies the notification type which determines the color and default icon.\n */\n @Prop({ reflect: true })\n readonly feedback: `${FeedbackColors}` = 'information';\n\n /**\n * Adjusts the emphasis to make the notification more or less visually\n * prominent to users. Use this to draw attention to important actions or\n * reduce focus on less critical ones\n */\n @Prop({ reflect: true })\n readonly emphasis: `${NotificationEmphasis}` = 'medium';\n\n /**\n * Short and concise text for the notification title.\n */\n @Prop({ reflect: true })\n readonly heading: string;\n\n /**\n * Main content for the notification. For more complex content, use the\n * content slot instead.\n */\n @Prop({ reflect: true })\n readonly message: string;\n\n /**\n * Icon associated with the notification, defaults vary based on the feedback\n * type.\n */\n @Prop({ reflect: true })\n readonly icon: string;\n\n /**\n * Allows the notification to be dismissed via a close button (x). The\n * notification is not dismissible unless explicitly enabled.\n */\n @Prop({ reflect: true })\n readonly dismissible: boolean = false;\n\n /**\n * Controls the visibility of the notification.\n */\n @Prop({ reflect: true, mutable: true })\n hidden: boolean = false; // eslint-disable-line @stencil-community/reserved-member-names\n\n /**\n * When true, the notification will be hidden initially, but internal changes\n * will not be in a controlled state. Good for animating the notification in.\n */\n @Prop({ reflect: true })\n readonly initiallyHidden: boolean = false;\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region METHODS\n\n /**\n * Dismisses the notification with an animation, after the animation is\n * complete, the hiddenChanged event will be emitted with the value of true,\n * and the hidden prop will be set to true.\n */\n @Method()\n async dismiss() {\n await this.dismissAnimation();\n }\n\n /**\n * Sets the hidden prop to false, and shows the notification with an\n * animation, after the animation is complete, the hiddenChanged event will be\n * emitted with the value of false.\n */\n @Method()\n async show() {\n await this.showAnimation();\n }\n\n //#endregion METHODS\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Emits when the 'hidden' prop changes, reflecting a change in visibility.\n * Passes hidden value to the detail.\n * @bind hidden\n */\n @Event()\n hiddenChanged: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region INTERNAL\n\n private iconByFeedback: Record<FeedbackColors, IconName> = {\n [FeedbackColors.Warning]: 'alert-circle',\n [FeedbackColors.Information]: 'info-circle',\n [FeedbackColors.Success]: 'circle-check',\n [FeedbackColors.Error]: 'alert-triangle',\n [FeedbackColors.Neutral]: 'help',\n };\n\n private roleByFeedback: Record<FeedbackColors, AriaRole> = {\n [FeedbackColors.Error]: 'alert',\n [FeedbackColors.Warning]: 'alert',\n [FeedbackColors.Information]: 'status',\n [FeedbackColors.Success]: 'status',\n [FeedbackColors.Neutral]: 'status',\n };\n\n private getDefaultIcon(): IconName {\n return this.iconByFeedback[this.feedback] ?? 'info-circle';\n }\n\n private getAriaRole(): AriaRole {\n return this.roleByFeedback[this.feedback] ?? 'status';\n }\n\n private getAriaLive(): AriaLive {\n return this.getAriaRole() === 'alert' ? 'assertive' : 'polite';\n }\n\n private getHeadingId(): string | null {\n return this.heading ? `nv-notification-${this.uid}-heading` : null;\n }\n\n private getMessageId(): string | null {\n return this.message ? `nv-notification-${this.uid}-message` : null;\n }\n\n private async showAnimation() {\n this.hidden = false;\n\n const { setFadeIn } = useFade(this.container);\n const { expand } = useCollapse(this.el, {\n duration: 300,\n overflow: 'visible',\n });\n const { slideY, setSlideY } = useSlide(this.container, {\n duration: 300,\n });\n\n setSlideY(-100);\n setFadeIn();\n await parallel(slideY({ from: -100, to: 0 }), expand).start();\n\n this.hiddenChanged.emit(false);\n }\n\n private getSlideDestination(pos?: NotificationPosition): {\n /** The axis to slide. */\n axis: 'x' | 'y';\n /** The destination value. */\n to: number;\n } {\n switch (pos) {\n case NotificationPosition.TopRight:\n case NotificationPosition.BottomRight:\n return { axis: 'x', to: 100 }; // right\n case NotificationPosition.TopLeft:\n case NotificationPosition.BottomLeft:\n return { axis: 'x', to: -100 }; // left\n case NotificationPosition.TopCenter:\n return { axis: 'y', to: -100 }; // up\n case NotificationPosition.BottomCenter:\n return { axis: 'y', to: 100 }; // down\n default:\n return { axis: 'x', to: 100 }; // fallback\n }\n }\n\n private async dismissAnimation() {\n const position = this.el\n .closest('nv-notificationcontainer')\n ?.getAttribute('position') as NotificationPosition | undefined;\n\n const destination = this.getSlideDestination(position);\n\n const { fadeOut } = useFade(this.container, { duration: 300 });\n const { slideX, slideY, setSlideReset } = useSlide(this.container, {\n duration: 500,\n });\n const { collapse } = useCollapse(this.el, {\n duration: 500,\n overflow: 'visible',\n });\n const slide =\n destination.axis === 'x'\n ? slideX({ from: 0, to: destination.to })\n : slideY({ from: 0, to: destination.to });\n\n setSlideReset();\n await parallel(fadeOut, slide, collapse).start();\n\n this.hidden = true;\n this.hiddenChanged.emit(true);\n }\n\n //#endregion INTERNAL\n /****************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n this.headingSlot = this.el.querySelector('[slot=\"heading\"]');\n this.messageSlot = this.el.querySelector('[slot=\"content\"]');\n this.actionsSlot = this.el.querySelector('[slot=\"actions\"]');\n\n if (this.initiallyHidden) this.hidden = true;\n }\n\n //#endregion LIFECYCLE\n /****************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n role={this.getAriaRole()}\n aria-live={this.getAriaLive()}\n aria-atomic\n aria-labelledby={this.getHeadingId() ?? null}\n aria-describedby={this.getMessageId() ?? null}\n tabindex=\"-1\"\n >\n <div data-scope=\"container\" ref={el => (this.container = el)}>\n {this.dismissible && (\n <button\n data-scope=\"dismiss\"\n type=\"button\"\n onClick={this.dismiss.bind(this)}\n >\n <nv-icon name=\"x\" size=\"sm\" />\n </button>\n )}\n\n <nv-icon\n name={this.icon ?? this.getDefaultIcon()}\n size=\"md\"\n data-scope=\"icon\"\n ></nv-icon>\n\n <div data-scope=\"content\">\n {(this.heading || this.headingSlot) && (\n <p id={this.getHeadingId()} data-scope=\"heading\">\n <slot name=\"heading\">{this.heading}</slot>\n </p>\n )}\n {(this.message || this.messageSlot) && (\n <p id={this.getMessageId()} data-scope=\"message\">\n <slot name=\"content\">{this.message}</slot>\n </p>\n )}\n\n {this.actionsSlot && (\n <div data-scope=\"actions\">\n <slot name=\"actions\"></slot>\n </div>\n )}\n </div>\n </div>\n </Host>\n );\n }\n // #endregion RENDER\n}\n"],"version":3}
|
|
1
|
+
{"file":"nv-notification.entry.cjs.js","mappings":";;;;;;;;;;;;;AAAA,MAAM,iBAAiB,GAAG,yqMAAyqM,CAAC;AACpsM,6BAAe,iBAAiB;;MC4BnB,cAAc;IAL3B;;;;;;;;;QAoBW,QAAG,GAAWA,KAAM,EAAE,CAAC;;;;QAMvB,aAAQ,GAAwB,aAAa,CAAC;;;;;;QAQ9C,aAAQ,GAA8B,QAAQ,CAAC;;;;;QA2B/C,gBAAW,GAAY,KAAK,CAAC;;;;QAMtC,WAAM,GAAY,KAAK,CAAC;;;;QA2BhB,mBAAc,GAAqC;YACzD,CAACC,wBAAc,CAAC,OAAO,GAAG,cAAc;YACxC,CAACA,wBAAc,CAAC,WAAW,GAAG,aAAa;YAC3C,CAACA,wBAAc,CAAC,OAAO,GAAG,cAAc;YACxC,CAACA,wBAAc,CAAC,KAAK,GAAG,gBAAgB;YACxC,CAACA,wBAAc,CAAC,OAAO,GAAG,MAAM;SACjC,CAAC;QAEM,mBAAc,GAAqC;YACzD,CAACA,wBAAc,CAAC,KAAK,GAAG,OAAO;YAC/B,CAACA,wBAAc,CAAC,OAAO,GAAG,OAAO;YACjC,CAACA,wBAAc,CAAC,WAAW,GAAG,QAAQ;YACtC,CAACA,wBAAc,CAAC,OAAO,GAAG,QAAQ;YAClC,CAACA,wBAAc,CAAC,OAAO,GAAG,QAAQ;SACnC,CAAC;KAkGH;;;;IApIC,MAAM,OAAO;QACX,MAAM,IAAI,CAAC,gBAAgB,EAAE,CAAC;KAC/B;IAkCO,cAAc;;QACpB,OAAO,MAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,mCAAI,aAAa,CAAC;KAC5D;IAEO,WAAW;;QACjB,OAAO,MAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,mCAAI,QAAQ,CAAC;KACvD;IAEO,WAAW;QACjB,OAAO,IAAI,CAAC,WAAW,EAAE,KAAK,OAAO,GAAG,WAAW,GAAG,QAAQ,CAAC;KAChE;IAEO,YAAY;QAClB,OAAO,IAAI,CAAC,OAAO,GAAG,mBAAmB,IAAI,CAAC,GAAG,UAAU,GAAG,IAAI,CAAC;KACpE;IAEO,YAAY;QAClB,OAAO,IAAI,CAAC,OAAO,GAAG,mBAAmB,IAAI,CAAC,GAAG,UAAU,GAAG,IAAI,CAAC;KACpE;IAEO,MAAM,gBAAgB;QAC5B,MAAM,EAAE,OAAO,EAAE,GAAGC,sBAAO,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC;QAC/D,MAAM,EAAE,QAAQ,EAAE,GAAGC,wBAAQ,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC;QACjE,MAAM,EAAE,QAAQ,EAAE,GAAGC,8BAAW,CAAC,IAAI,CAAC,EAAE,EAAE;YACxC,QAAQ,EAAE,GAAG;YACb,QAAQ,EAAE,SAAS;SACpB,CAAC,CAAC;QAEH,MAAMC,2BAAQ,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,KAAK,EAAE,CAAC;QACpD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACnB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC/B;;;;IAMD,iBAAiB;QACf,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;QAC7D,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;QAC7D,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;KAC9D;;;;IAMD,MAAM;;QACJ,QACEC,QAACC,UAAI,qDACH,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,eACb,IAAI,CAAC,WAAW,EAAE,0CAEZ,MAAA,IAAI,CAAC,YAAY,EAAE,mCAAI,IAAI,sBAC1B,MAAA,IAAI,CAAC,YAAY,EAAE,mCAAI,IAAI,EAC7C,QAAQ,EAAC,IAAI,IAEbD,gFAAgB,WAAW,EAAC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,IACzD,IAAI,CAAC,WAAW,KACfA,mFACa,SAAS,EACpB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAEhCA,sEAAS,IAAI,EAAC,GAAG,EAAC,IAAI,EAAC,IAAI,GAAG,CACvB,CACV,EAEDA,sEACE,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,mCAAI,IAAI,CAAC,cAAc,EAAE,EACxC,IAAI,EAAC,IAAI,GACA,EAEXA,gFAAgB,SAAS,IACtB,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW,MAChCA,gEAAG,EAAE,EAAE,IAAI,CAAC,YAAY,EAAE,gBAAa,SAAS,IAC9CA,mEAAM,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAQ,CACxC,CACL,EACA,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW,MAChCA,gEAAG,EAAE,EAAE,IAAI,CAAC,YAAY,EAAE,gBAAa,SAAS,IAC9CA,mEAAM,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAQ,CACxC,CACL,EAEA,IAAI,CAAC,WAAW,KACfA,gFAAgB,SAAS,IACvBA,mEAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACP,CACG,CACF,CACD,EACP;KACH;;;;;;;","names":["uuidv4","FeedbackColors","useFade","useSlide","useCollapse","parallel","h","Host"],"sources":["src/components/nv-notification/styles/nv-notification.scss?tag=nv-notification","src/components/nv-notification/nv-notification.tsx"],"sourcesContent":["@use \"sass:map\";\n@use \"./mixins\" as *;\n@import \"../../../styles/focus-ring\";\n\nnv-notification {\n @include root-styles();\n\n [data-scope=\"container\"] {\n @include container-styles();\n & > nv-icon {\n @include icon-styles();\n }\n\n [data-scope=\"dismiss\"] {\n @include dismiss-btn-styles();\n }\n\n [data-scope=\"content\"] {\n @include content-styles();\n\n [data-scope=\"heading\"] {\n @include header-styles();\n }\n\n [data-scope=\"message\"] {\n @include message-styles();\n }\n\n [data-scope=\"actions\"] {\n @include actions-styles();\n }\n }\n }\n\n @each $feedback in $feedback-variants {\n &[feedback=\"#{$feedback}\"] {\n [data-scope=\"container\"] {\n @include feedback-color($feedback);\n & > nv-icon {\n @include icon-color($feedback);\n }\n }\n\n & > [data-scope=\"close\"] {\n @include focus-ring(map.get($border-color-map, $feedback));\n }\n }\n }\n\n @each $emphasis in $emphasis-variants {\n &[emphasis=\"#{$emphasis}\"] {\n [data-scope=\"container\"] {\n @include emphasis-styles($emphasis);\n }\n }\n }\n}","import {\n Component,\n Host,\n h,\n Prop,\n Method,\n Element,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { FeedbackColors, NotificationEmphasis } from '../../utils/constants';\nimport { type IconName } from '../nv-icon/nv-icons';\nimport { useCollapse, useFade, useSlide, parallel } from '../../animations';\n\ntype AriaRole = 'status' | 'alert';\ntype AriaLive = 'polite' | 'assertive';\n\n/**\n * @slot heading - Use this slot to insert HTML as the notification title.\n * @slot content - Use this slot to insert HTML as the notification message.\n * @slot actions - Use this slot for custom actions.\n */\n@Component({\n tag: 'nv-notification',\n styleUrl: 'styles/nv-notification.scss',\n shadow: false,\n})\nexport class NvNotification {\n @Element() el: HTMLNvNotificationElement;\n private container: HTMLElement;\n private headingSlot: HTMLElement;\n private messageSlot: HTMLElement;\n private actionsSlot: HTMLElement;\n\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * Set a unique ID for the notification. Used for aria attributes and managing\n * multiple notifications.\n */\n @Prop({ reflect: true })\n readonly uid: string = uuidv4();\n\n /**\n * Specifies the notification type which determines the color and default icon.\n */\n @Prop({ reflect: true })\n readonly feedback: `${FeedbackColors}` = 'information';\n\n /**\n * Adjusts the emphasis to make the notification more or less visually\n * prominent to users. Use this to draw attention to important actions or\n * reduce focus on less critical ones\n */\n @Prop({ reflect: true })\n readonly emphasis: `${NotificationEmphasis}` = 'medium';\n\n /**\n * Short and concise text for the notification title.\n */\n @Prop({ reflect: true })\n readonly heading: string;\n\n /**\n * Main content for the notification. For more complex content, use the\n * content slot instead.\n */\n @Prop({ reflect: true })\n readonly message: string;\n\n /**\n * Icon associated with the notification, defaults vary based on the feedback\n * type.\n */\n @Prop({ reflect: true })\n readonly icon: string;\n\n /**\n * Allows the notification to be dismissed via a close button (x). The\n * notification is not dismissible unless explicitly enabled.\n */\n @Prop({ reflect: true })\n readonly dismissible: boolean = false;\n\n /**\n * Controls the visibility of the notification.\n */\n @Prop({ reflect: true, mutable: true })\n hidden: boolean = false; // eslint-disable-line @stencil-community/reserved-member-names\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region METHODS\n\n @Method()\n async dismiss() {\n await this.dismissAnimation();\n }\n\n //#endregion METHODS\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Emits when the 'hidden' prop changes, reflecting a change in visibility.\n * Passes hidden value to the detail.\n * @bind hidden\n */\n @Event()\n hiddenChanged: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region INTERNAL\n\n private iconByFeedback: Record<FeedbackColors, IconName> = {\n [FeedbackColors.Warning]: 'alert-circle',\n [FeedbackColors.Information]: 'info-circle',\n [FeedbackColors.Success]: 'circle-check',\n [FeedbackColors.Error]: 'alert-triangle',\n [FeedbackColors.Neutral]: 'help',\n };\n\n private roleByFeedback: Record<FeedbackColors, AriaRole> = {\n [FeedbackColors.Error]: 'alert',\n [FeedbackColors.Warning]: 'alert',\n [FeedbackColors.Information]: 'status',\n [FeedbackColors.Success]: 'status',\n [FeedbackColors.Neutral]: 'status',\n };\n\n private getDefaultIcon(): IconName {\n return this.iconByFeedback[this.feedback] ?? 'info-circle';\n }\n\n private getAriaRole(): AriaRole {\n return this.roleByFeedback[this.feedback] ?? 'status';\n }\n\n private getAriaLive(): AriaLive {\n return this.getAriaRole() === 'alert' ? 'assertive' : 'polite';\n }\n\n private getHeadingId(): string | null {\n return this.heading ? `nv-notification-${this.uid}-heading` : null;\n }\n\n private getMessageId(): string | null {\n return this.message ? `nv-notification-${this.uid}-message` : null;\n }\n\n private async dismissAnimation() {\n const { fadeOut } = useFade(this.container, { duration: 300 });\n const { slideOut } = useSlide(this.container, { duration: 800 });\n const { collapse } = useCollapse(this.el, {\n duration: 800,\n overflow: 'visible',\n });\n\n await parallel(fadeOut, slideOut, collapse).start();\n this.hidden = true;\n this.hiddenChanged.emit(true);\n }\n\n //#endregion INTERNAL\n /****************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n this.headingSlot = this.el.querySelector('[slot=\"heading\"]');\n this.messageSlot = this.el.querySelector('[slot=\"content\"]');\n this.actionsSlot = this.el.querySelector('[slot=\"actions\"]');\n }\n\n //#endregion LIFECYCLE\n /****************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n role={this.getAriaRole()}\n aria-live={this.getAriaLive()}\n aria-atomic\n aria-labelledby={this.getHeadingId() ?? null}\n aria-describedby={this.getMessageId() ?? null}\n tabindex=\"-1\"\n >\n <div data-scope=\"container\" ref={el => (this.container = el)}>\n {this.dismissible && (\n <button\n data-scope=\"dismiss\"\n type=\"button\"\n onClick={this.dismiss.bind(this)}\n >\n <nv-icon name=\"x\" size=\"sm\" />\n </button>\n )}\n\n <nv-icon\n name={this.icon ?? this.getDefaultIcon()}\n size=\"md\"\n ></nv-icon>\n\n <div data-scope=\"content\">\n {(this.heading || this.headingSlot) && (\n <p id={this.getHeadingId()} data-scope=\"heading\">\n <slot name=\"heading\">{this.heading}</slot>\n </p>\n )}\n {(this.message || this.messageSlot) && (\n <p id={this.getMessageId()} data-scope=\"message\">\n <slot name=\"content\">{this.message}</slot>\n </p>\n )}\n\n {this.actionsSlot && (\n <div data-scope=\"actions\">\n <slot name=\"actions\"></slot>\n </div>\n )}\n </div>\n </div>\n </Host>\n );\n }\n // #endregion RENDER\n}\n"],"version":3}
|
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
const index = require('./index-c56424e5.js');
|
|
6
|
-
const fade_animation = require('./fade.animation-
|
|
7
|
-
const grow_animation = require('./grow.animation-
|
|
6
|
+
const fade_animation = require('./fade.animation-cf6eba0d.js');
|
|
7
|
+
const grow_animation = require('./grow.animation-9258ba63.js');
|
|
8
8
|
require('./style-value-types.es-eea2f16f.js');
|
|
9
9
|
const events_utils = require('./events.utils-52846a7d.js');
|
|
10
10
|
|
|
@@ -2384,7 +2384,7 @@ const NvPopover = class {
|
|
|
2384
2384
|
/****************************************************************************/
|
|
2385
2385
|
//#region RENDER
|
|
2386
2386
|
render() {
|
|
2387
|
-
return (index.h(index.Host, { key: '
|
|
2387
|
+
return (index.h(index.Host, { key: 'dc7ef1862f1a1da4b32e02bee827f81545df73d1' }, index.h("slot", { key: '7535c2ba2b1f600c237602c68a04c85fd9d6d98b', name: "trigger" }), index.h("div", { key: '8e7907e2fda20d35b00642eca0507aa20e56f7cb', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (index.h("div", { key: '4e081e84e9597b69351253d1c1b89c115cdcfd9a', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), index.h("slot", { key: '5bcd80588e9746db974cee69c5963b698665d105', name: "content" }))));
|
|
2388
2388
|
}
|
|
2389
2389
|
get el() { return index.getElement(this); }
|
|
2390
2390
|
static get watchers() { return {
|
|
@@ -14,7 +14,7 @@ const NvRow = class {
|
|
|
14
14
|
/****************************************************************************/
|
|
15
15
|
//#region RENDER
|
|
16
16
|
render() {
|
|
17
|
-
return (index.h(index.Host, { key: '
|
|
17
|
+
return (index.h(index.Host, { key: '8415bdad0106bd3d836996c617a749294e0c19e2' }, index.h("slot", { key: '77c069ced0dc25c4169945877c388f30d27fdc4f' })));
|
|
18
18
|
}
|
|
19
19
|
};
|
|
20
20
|
NvRow.style = NvRowStyle0;
|
|
@@ -23,7 +23,7 @@ const NvStack = class {
|
|
|
23
23
|
/****************************************************************************/
|
|
24
24
|
//#region RENDER
|
|
25
25
|
render() {
|
|
26
|
-
return (index.h(index.Host, { key: '
|
|
26
|
+
return (index.h(index.Host, { key: '66123f22ad4a6ebefe8663c795274eb900d2c178', class: clsx.clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, index.h("slot", { key: '7b3d395c3490664f0e2f337a04f69cc717ed6c0e' })));
|
|
27
27
|
}
|
|
28
28
|
};
|
|
29
29
|
NvStack.style = NvStackStyle0;
|
|
@@ -315,14 +315,14 @@ const NvTable = class {
|
|
|
315
315
|
const rows = !this.table || this.table === undefined || this.parsedData.length === 0
|
|
316
316
|
? []
|
|
317
317
|
: this.table.data;
|
|
318
|
-
return (index.h(index.Host, { key: '
|
|
318
|
+
return (index.h(index.Host, { key: 'ea0b3237145fbc199d356010f1e001797afc52d6' }, index.h("div", { key: 'd3bf41bad48e549d1799b2c8e55a308a7d767973', class: "hidden" }, index.h("slot", { key: '8263220ebd266240b16228b67f8d215d7d56afd7' })), index.h("slot", { key: '36d43d6870cf9a6021521579c0507afd1fe85081', name: "before" }), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (index.h("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (index.h("table", { class: "table" }, this.parsedColumns.length > 0 && headerGroups.length > 0 && (index.h("thead", { class: "table-header" }, index.h("tr", null, headerGroups &&
|
|
319
319
|
headerGroups.map(col => {
|
|
320
320
|
return (index.h("th", { key: col.name }, this.renderTemplate(this.headerTemplateCache.get(col.name), {}) || col.header));
|
|
321
321
|
})))), index.h("tbody", { class: "table-body" }, !rows || rows.length === 0 ? (index.h("tr", null, index.h("td", { colSpan: headerGroups.length || 12, class: "no-data" }, this.noDataMessage))) : (rows.map(row => (index.h("tr", { key: JSON.stringify(row) }, headerGroups.map(col => {
|
|
322
322
|
var _a;
|
|
323
323
|
return (index.h("td", null, this.renderTemplate(this.templateCache.get(col.name), row) ||
|
|
324
324
|
((_a = row[col.name]) !== null && _a !== void 0 ? _a : this.fallbackValue)));
|
|
325
|
-
})))))))), index.h("slot", { key: '
|
|
325
|
+
})))))))), index.h("slot", { key: '233b61e9099f58ca0eeeb7d0f7fdc7bd71bc9065', name: "after" })));
|
|
326
326
|
}
|
|
327
327
|
get el() { return index.getElement(this); }
|
|
328
328
|
static get watchers() { return {
|
|
@@ -6,7 +6,7 @@ const index = require('./index-c56424e5.js');
|
|
|
6
6
|
const clsx = require('./clsx-fc789adc.js');
|
|
7
7
|
const v4 = require('./v4-7014b8b0.js');
|
|
8
8
|
|
|
9
|
-
const nvToggleCss = "nv-toggle{display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-toggle:not([disabled],[readonly]) input,nv-toggle:not([disabled],[readonly]) label{cursor:pointer}nv-toggle.label-placement-before{flex-direction:row-reverse}nv-toggle[disabled]{opacity:0.5}nv-toggle 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-toggle label.visually-hidden{position:absolute;padding:0;border:0;overflow:hidden;white-space:nowrap;width:1px;height:1px;margin:-1px;clip:rect(0, 0, 0, 0)}nv-toggle .input-container{position:relative;color:var(--components-form-shape-foreground-default)}nv-toggle .input-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--components-form-shape-foreground-disabled)}nv-toggle .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-
|
|
9
|
+
const nvToggleCss = "nv-toggle{display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-toggle:not([disabled],[readonly]) input,nv-toggle:not([disabled],[readonly]) label{cursor:pointer}nv-toggle.label-placement-before{flex-direction:row-reverse}nv-toggle[disabled]{opacity:0.5}nv-toggle 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-toggle label.visually-hidden{position:absolute;padding:0;border:0;overflow:hidden;white-space:nowrap;width:1px;height:1px;margin:-1px;clip:rect(0, 0, 0, 0)}nv-toggle .input-container{position:relative;color:var(--components-form-shape-foreground-default)}nv-toggle .input-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--components-form-shape-foreground-disabled)}nv-toggle .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-toggle-border-default);background:var(--components-toggle-background-default)}nv-toggle .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-toggle-shape-default);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:25%;transform:translate(-50%, -50%)}nv-toggle .input-container input[type=checkbox]:hover{border-color:var(--components-toggle-border-hover)}nv-toggle .input-container input[type=checkbox]:hover::after{background-color:var(--components-toggle-shape-hover)}nv-toggle .input-container input[type=checkbox]:focus{border-color:var(--components-toggle-border-default)}nv-toggle .input-container input[type=checkbox]:focus::after{background-color:var(--components-toggle-shape-default)}nv-toggle .input-container input[type=checkbox]:focus,nv-toggle .input-container input[type=checkbox]:focus-within{outline:none}nv-toggle .input-container input[type=checkbox]:focus-visible,nv-toggle .input-container input[type=checkbox]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-toggle .input-container input[type=checkbox]:checked{background:var(--components-toggle-background-default-checked);border-color:var(--components-toggle-border-default-checked)}nv-toggle .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-toggle-shape-default-checked);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:75%;transform:translate(-50%, -50%)}nv-toggle .input-container input[type=checkbox]:checked:focus{background:var(--components-toggle-background-default-checked);border-color:var(--components-toggle-border-default-checked)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]){box-shadow:unset;background:var(--components-toggle-background-disabled);border-color:var(--components-toggle-border-default)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]):checked{background:var(--components-toggle-background-disabled-checked);border-color:var(--components-toggle-border-disabled-checked)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]):checked::after{background-color:var(--components-toggle-shape-disabled-checked)}nv-toggle .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-toggle .text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}";
|
|
10
10
|
const NvToggleStyle0 = nvToggleCss;
|
|
11
11
|
|
|
12
12
|
const NvToggle = class {
|
|
@@ -66,8 +66,8 @@ const NvToggle = class {
|
|
|
66
66
|
/****************************************************************************/
|
|
67
67
|
//#region RENDER
|
|
68
68
|
render() {
|
|
69
|
-
return (index.h(index.Host, { key: '
|
|
70
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
69
|
+
return (index.h(index.Host, { key: 'db161d2edfcf7f83381b6431c8bc70a22c04fbf3', class: clsx.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: '086d6c429b4b7bcaa23093b13d30cf6ba21912f8', class: "input-container" }, index.h("input", { key: 'e83f407f2c3643c245198131a7991545b73dde78', 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 })), index.h("div", { key: 'eb5af410d1c643c70a4364948bf8fad9d54e74df', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '54793fd81258bee7676801f23da4f5fb554242bf', htmlFor: this.inputId, class: clsx.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '6af650d9677d1eb0f8cfa77cbcd6318f2d6f8aaf', name: "label" }, this.label))), (this.description ||
|
|
70
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '2c157429288779ad6cc18d4e318e64830a657c54', class: "description" }, index.h("slot", { key: 'fcfae2a0d7cdcc76d4b23c4b376c8e2496e11bb5', name: "description" }, this.description))))));
|
|
71
71
|
}
|
|
72
72
|
static get formAssociated() { return true; }
|
|
73
73
|
get el() { return index.getElement(this); }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"nv-toggle.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,WAAW,GAAG,uoHAAuoH,CAAC;AAC5pH,uBAAe,WAAW;;MCyBb,QAAQ;IANrB;;;;;;;;;;;QAmBW,YAAO,GAAWA,KAAM,EAAE,CAAC;;;;;QAgC3B,cAAS,GAAY,KAAK,CAAC;;QAWpC,YAAO,GAAY,KAAK,CAAC;;QAIhB,aAAQ,GAAY,KAAK,CAAC;;;;;QAO1B,aAAQ,GAAY,KAAK,CAAC;KA2FpC;;;;;;;;IArEC,gBAAgB,CAAC,OAAgB;QAC/B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACnC;;;;;;IAQD,YAAY,CAAC,KAAY;QACvB,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;QAEhD,IAAI,MAAM,CAAC,IAAI,KAAK,UAAU,IAAI,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC,OAAO,EAAE;YAC5D,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;gBAClC,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO;aACR;YAED,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;SAC/B;KACF;;;;IAMD,MAAM;QACJ,QACEC,QAACC,UAAI,qDACH,KAAK,EAAEC,SAAI,CACT,IAAI,CAAC,cAAc,KAAK,QAAQ,IAAI,wBAAwB,CAC7D,IAEDF,kEAAK,KAAK,EAAC,iBAAiB,IAC1BA,oEACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,YAAY,EAAC,KAAK,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,EAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EACxC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACvB,CACE,EAENA,kEAAK,KAAK,EAAC,gBAAgB,IACxB,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,MACrDA,oEACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAEE,SAAI,CAAC,IAAI,CAAC,SAAS,IAAI,iBAAiB,CAAC,IAEhDF,mEAAM,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAChC,CACT,EAEA,CAAC,IAAI,CAAC,WAAW;YAChB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAC,MAC7CA,kEAAK,KAAK,EAAC,aAAa,IACtBA,mEAAM,IAAI,EAAC,aAAa,IAAE,IAAI,CAAC,WAAW,CAAQ,CAC9C,CACP,CACG,CACD,EACP;KACH;;;;;;;;;;;","names":["uuidv4","h","Host","clsx"],"sources":["src/components/nv-toggle/nv-toggle.scss?tag=nv-toggle","src/components/nv-toggle/nv-toggle.tsx"],"sourcesContent":["@use \"../../styles/utils\" as utils;\n@import \"../../styles/focus-ring\";\n\n@mixin root-styles() {\n display: inline-flex;\n align-items: flex-start;\n gap: var(--form-gap-x);\n position: relative;\n\n &:not([disabled], [readonly]) {\n input,\n label {\n cursor: pointer;\n }\n }\n}\n\n@mixin label-before-styles() {\n flex-direction: row-reverse;\n}\n\n@mixin label-styles() {\n align-self: stretch;\n color: var(--components-form-text-label-default);\n font-family: \"TT Norms Pro\", sans-serif;\n font-size: var(--form-label-font-size);\n font-style: normal;\n font-weight: 500;\n line-height: var(--form-label-line-height);\n}\n\n@mixin description-styles() {\n align-self: stretch;\n color: var(--components-form-text-description-default);\n font-family: \"TT Norms Pro\", sans-serif;\n font-size: var(--form-description-font-size);\n font-style: normal;\n font-weight: 450;\n line-height: var(--form-description-line-height);\n}\n\n@mixin text-container-styles() {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex: 1 0 0;\n}\n\n@mixin input-container-styles() {\n position: relative;\n color: var(--components-form-shape-foreground-default);\n\n &:has(input[type=\"checkbox\"]:disabled:not([readonly])) {\n color: var(--components-form-shape-foreground-disabled);\n }\n}\n\n@mixin input-styles() {\n appearance: none;\n position: relative;\n display: flex;\n width: var(--form-toggle-width);\n height: var(--form-toggle-height);\n flex-direction: column;\n align-items: flex-start;\n border-radius: var(--form-toggle-radius);\n border-width: var(--form-toggle-border-width);\n border-style: solid;\n border-color: var(--components-form-field-border-default);\n background: var(--components-form-field-background-default);\n\n &::after {\n content: '';\n display: block;\n width: var(--form-toggle-switch-dot-default);\n height: var(--form-toggle-switch-dot-default);\n background-color: var(--components-form-shape-foreground-switch-dot);\n border-radius: var(--radius-rounded-full);\n position: absolute;\n top: 50%;\n left: 25%;\n transform: translate(-50%, -50%);\n }\n\n &:hover {\n border-color: var(--components-form-field-border-hover);\n }\n\n &:focus {\n border-color: var(--components-form-field-border-default);\n }\n\n @include focus-ring();\n\n &:checked {\n background: var(--components-form-field-background-checked);\n border-color: var(--components-form-field-background-checked);\n\n &::after {\n content: '';\n display: block;\n width: var(--form-toggle-switch-dot-default);\n height: var(--form-toggle-switch-dot-default);\n background-color: var(--components-form-shape-foreground-default);\n border-radius: var(--radius-rounded-full);\n position: absolute;\n top: 50%;\n left: 75%;\n transform: translate(-50%, -50%);\n }\n\n &:focus {\n background: var(--components-form-field-background-checked);\n border-color: var(--components-form-field-border-focus);\n }\n }\n\n &:disabled:not([readonly]) {\n box-shadow: unset;\n background: var(--components-form-field-background-disabled);\n border-color: var(--components-form-field-border-default);\n\n &:checked {\n &::after {\n background-color: var(--components-form-shape-foreground-disabled);\n }\n }\n }\n}\n\nnv-toggle {\n @include root-styles();\n\n &.label-placement-before {\n @include label-before-styles();\n }\n\n &[disabled] {\n // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n // opacity: var(--components-form-opacity-disabled); Error: Invalid value for --components-form-opacity-disabled (expected a <number> but got \"50px\")\n opacity: 0.5;\n }\n label {\n @include label-styles();\n\n &.visually-hidden {\n @include utils.visually-hidden();\n }\n }\n\n .input-container {\n @include input-container-styles();\n\n input[type=\"checkbox\"] {\n @include input-styles();\n }\n }\n\n .description {\n @include description-styles();\n }\n\n .text-container {\n @include text-container-styles();\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Watch,\n Event,\n EventEmitter,\n Listen,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { type LabelPlacement } from '../../utils/constants';\n\n/**\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n */\n@Component({\n tag: 'nv-toggle',\n styleUrl: 'nv-toggle.scss',\n shadow: false,\n formAssociated: true,\n})\nexport class NvToggle {\n @Element() el!: HTMLNvToggleElement;\n\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * Sets the ID for the radio button’s input element and the for attribute of\n * the associated label. If no ID is provided, a random one will be\n * automatically generated to ensure unique identification, facilitating\n * proper label association and accessibility.\n */\n @Prop({ reflect: true })\n readonly inputId: string = uuidv4();\n\n /**\n * The name attribute for the toggle input, used to reference the form data\n * after submission.\n */\n @Prop({ reflect: true })\n readonly name?: string;\n\n /**\n * The value attribute of the toggle input, representing the value sent on\n * form submission when the toggle is checked.\n */\n @Prop({ reflect: true })\n readonly value?: string;\n\n /** The label displayed next to the toggle.*/\n @Prop({ reflect: true })\n readonly label?: string;\n\n /**\n * Determines the position of the label relative to the toggle, either\n * 'start' (before) or 'end' (after).\n */\n @Prop({ reflect: true })\n readonly labelPlacement: `${LabelPlacement}`;\n\n /**\n * Hides the label visually while still keeping it available for screen\n * readers.\n */\n @Prop({ reflect: true })\n readonly hideLabel: boolean = false;\n\n /**\n * A description providing additional context or information about the\n * toggle.\n */\n @Prop({ reflect: true })\n readonly description?: string;\n\n /** Indicates whether the toggle is checked or not. */\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /** Disables the toggle, preventing user interaction. */\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /**\n * Sets the toggle to read-only, preventing user changes but still allowing\n * focus and selection of text.\n */\n @Prop({ reflect: true })\n readonly readonly: boolean = false;\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Emits when the checked state changes.\n * @bind checked\n */\n @Event()\n checkedChanged: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region WATCHERS\n\n /**\n * Watches for changes to the checked state and emits the new value.\n * @param {boolean} checked - The new value of the checked state.\n */\n @Watch('checked')\n onCheckedChanged(checked: boolean) {\n this.checkedChanged.emit(checked);\n }\n\n /**\n * Listens for the change event on the toggle input element and updates the checked state.\n * the checked state of the host elements.\n * @param {Event} event - The change event.\n */\n @Listen('change')\n handleChange(event: Event) {\n const target = event.target as HTMLInputElement;\n\n if (target.type === 'checkbox' && target.id === this.inputId) {\n if (this.readonly || this.disabled) {\n event.preventDefault();\n return;\n }\n\n this.checked = target.checked;\n }\n }\n\n //#endregion WATCHERS\n /****************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n class={clsx(\n this.labelPlacement === 'before' && 'label-placement-before',\n )}\n >\n <div class=\"input-container\">\n <input\n type=\"checkbox\"\n id={this.inputId}\n name={this.name}\n autocomplete=\"off\"\n value={this.value}\n checked={Boolean(this.checked)}\n disabled={this.disabled || this.readonly}\n readonly={this.readonly}\n />\n </div>\n\n <div class=\"text-container\">\n {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n <label\n htmlFor={this.inputId}\n class={clsx(this.hideLabel && 'visually-hidden')}\n >\n <slot name=\"label\">{this.label}</slot>\n </label>\n )}\n\n {(this.description ||\n this.el.querySelector('[slot=\"description\"]')) && (\n <div class=\"description\">\n <slot name=\"description\">{this.description}</slot>\n </div>\n )}\n </div>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}
|
|
1
|
+
{"file":"nv-toggle.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,WAAW,GAAG,siIAAsiI,CAAC;AAC3jI,uBAAe,WAAW;;MCyBb,QAAQ;IANrB;;;;;;;;;;;QAmBW,YAAO,GAAWA,KAAM,EAAE,CAAC;;;;;QAgC3B,cAAS,GAAY,KAAK,CAAC;;QAWpC,YAAO,GAAY,KAAK,CAAC;;QAIhB,aAAQ,GAAY,KAAK,CAAC;;;;;QAO1B,aAAQ,GAAY,KAAK,CAAC;KA2FpC;;;;;;;;IArEC,gBAAgB,CAAC,OAAgB;QAC/B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACnC;;;;;;IAQD,YAAY,CAAC,KAAY;QACvB,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;QAEhD,IAAI,MAAM,CAAC,IAAI,KAAK,UAAU,IAAI,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC,OAAO,EAAE;YAC5D,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;gBAClC,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO;aACR;YAED,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;SAC/B;KACF;;;;IAMD,MAAM;QACJ,QACEC,QAACC,UAAI,qDACH,KAAK,EAAEC,SAAI,CACT,IAAI,CAAC,cAAc,KAAK,QAAQ,IAAI,wBAAwB,CAC7D,IAEDF,kEAAK,KAAK,EAAC,iBAAiB,IAC1BA,oEACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,YAAY,EAAC,KAAK,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,EAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EACxC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACvB,CACE,EAENA,kEAAK,KAAK,EAAC,gBAAgB,IACxB,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,MACrDA,oEACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAEE,SAAI,CAAC,IAAI,CAAC,SAAS,IAAI,iBAAiB,CAAC,IAEhDF,mEAAM,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAChC,CACT,EAEA,CAAC,IAAI,CAAC,WAAW;YAChB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAC,MAC7CA,kEAAK,KAAK,EAAC,aAAa,IACtBA,mEAAM,IAAI,EAAC,aAAa,IAAE,IAAI,CAAC,WAAW,CAAQ,CAC9C,CACP,CACG,CACD,EACP;KACH;;;;;;;;;;;","names":["uuidv4","h","Host","clsx"],"sources":["src/components/nv-toggle/nv-toggle.scss?tag=nv-toggle","src/components/nv-toggle/nv-toggle.tsx"],"sourcesContent":["@use \"../../styles/utils\" as utils;\n@import \"../../styles/focus-ring\";\n\n@mixin root-styles() {\n display: inline-flex;\n align-items: flex-start;\n gap: var(--form-gap-x);\n position: relative;\n\n &:not([disabled], [readonly]) {\n input,\n label {\n cursor: pointer;\n }\n }\n}\n\n@mixin label-before-styles() {\n flex-direction: row-reverse;\n}\n\n@mixin label-styles() {\n align-self: stretch;\n color: var(--components-form-text-label-default);\n font-family: \"TT Norms Pro\", sans-serif;\n font-size: var(--form-label-font-size);\n font-style: normal;\n font-weight: 500;\n line-height: var(--form-label-line-height);\n}\n\n@mixin description-styles() {\n align-self: stretch;\n color: var(--components-form-text-description-default);\n font-family: \"TT Norms Pro\", sans-serif;\n font-size: var(--form-description-font-size);\n font-style: normal;\n font-weight: 450;\n line-height: var(--form-description-line-height);\n}\n\n@mixin text-container-styles() {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex: 1 0 0;\n}\n\n@mixin input-container-styles() {\n position: relative;\n color: var(--components-form-shape-foreground-default);\n\n &:has(input[type=\"checkbox\"]:disabled:not([readonly])) {\n color: var(--components-form-shape-foreground-disabled);\n }\n}\n\n@mixin input-styles() {\n appearance: none;\n position: relative;\n display: flex;\n width: var(--form-toggle-width);\n height: var(--form-toggle-height);\n flex-direction: column;\n align-items: flex-start;\n border-radius: var(--form-toggle-radius);\n border-width: var(--form-toggle-border-width);\n border-style: solid;\n border-color: var(--components-toggle-border-default);\n background: var(--components-toggle-background-default);\n\n &::after {\n content: '';\n display: block;\n width: var(--form-toggle-switch-dot-default);\n height: var(--form-toggle-switch-dot-default);\n background-color: var(--components-toggle-shape-default);\n border-radius: var(--radius-rounded-full);\n position: absolute;\n top: 50%;\n left: 25%;\n transform: translate(-50%, -50%);\n }\n\n &:hover {\n border-color: var(--components-toggle-border-hover); \n \n &::after {\n background-color: var(--components-toggle-shape-hover);\n }\n }\n\n &:focus {\n border-color: var(--components-toggle-border-default);\n\n &::after {\n background-color: var(--components-toggle-shape-default);\n }\n }\n\n @include focus-ring();\n\n &:checked {\n background: var(--components-toggle-background-default-checked);\n border-color: var(--components-toggle-border-default-checked);\n\n &::after {\n content: '';\n display: block;\n width: var(--form-toggle-switch-dot-default);\n height: var(--form-toggle-switch-dot-default);\n background-color: var(--components-toggle-shape-default-checked);\n border-radius: var(--radius-rounded-full);\n position: absolute;\n top: 50%;\n left: 75%;\n transform: translate(-50%, -50%);\n }\n\n &:focus {\n background: var(--components-toggle-background-default-checked);\n border-color: var(--components-toggle-border-default-checked);\n }\n }\n\n &:disabled:not([readonly]) {\n box-shadow: unset;\n background: var(--components-toggle-background-disabled);\n border-color: var(--components-toggle-border-default);\n\n &:checked {\n background: var(--components-toggle-background-disabled-checked);\n border-color: var(--components-toggle-border-disabled-checked);\n &::after {\n background-color: var(--components-toggle-shape-disabled-checked);\n }\n }\n }\n}\n\nnv-toggle {\n @include root-styles();\n\n &.label-placement-before {\n @include label-before-styles();\n }\n\n &[disabled] {\n // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n // opacity: var(--components-form-opacity-disabled); Error: Invalid value for --components-form-opacity-disabled (expected a <number> but got \"50px\")\n opacity: 0.5;\n }\n label {\n @include label-styles();\n\n &.visually-hidden {\n @include utils.visually-hidden();\n }\n }\n\n .input-container {\n @include input-container-styles();\n\n input[type=\"checkbox\"] {\n @include input-styles();\n }\n }\n\n .description {\n @include description-styles();\n }\n\n .text-container {\n @include text-container-styles();\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Watch,\n Event,\n EventEmitter,\n Listen,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { type LabelPlacement } from '../../utils/constants';\n\n/**\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n */\n@Component({\n tag: 'nv-toggle',\n styleUrl: 'nv-toggle.scss',\n shadow: false,\n formAssociated: true,\n})\nexport class NvToggle {\n @Element() el!: HTMLNvToggleElement;\n\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * Sets the ID for the radio button’s input element and the for attribute of\n * the associated label. If no ID is provided, a random one will be\n * automatically generated to ensure unique identification, facilitating\n * proper label association and accessibility.\n */\n @Prop({ reflect: true })\n readonly inputId: string = uuidv4();\n\n /**\n * The name attribute for the toggle input, used to reference the form data\n * after submission.\n */\n @Prop({ reflect: true })\n readonly name?: string;\n\n /**\n * The value attribute of the toggle input, representing the value sent on\n * form submission when the toggle is checked.\n */\n @Prop({ reflect: true })\n readonly value?: string;\n\n /** The label displayed next to the toggle.*/\n @Prop({ reflect: true })\n readonly label?: string;\n\n /**\n * Determines the position of the label relative to the toggle, either\n * 'start' (before) or 'end' (after).\n */\n @Prop({ reflect: true })\n readonly labelPlacement: `${LabelPlacement}`;\n\n /**\n * Hides the label visually while still keeping it available for screen\n * readers.\n */\n @Prop({ reflect: true })\n readonly hideLabel: boolean = false;\n\n /**\n * A description providing additional context or information about the\n * toggle.\n */\n @Prop({ reflect: true })\n readonly description?: string;\n\n /** Indicates whether the toggle is checked or not. */\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /** Disables the toggle, preventing user interaction. */\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /**\n * Sets the toggle to read-only, preventing user changes but still allowing\n * focus and selection of text.\n */\n @Prop({ reflect: true })\n readonly readonly: boolean = false;\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Emits when the checked state changes.\n * @bind checked\n */\n @Event()\n checkedChanged: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region WATCHERS\n\n /**\n * Watches for changes to the checked state and emits the new value.\n * @param {boolean} checked - The new value of the checked state.\n */\n @Watch('checked')\n onCheckedChanged(checked: boolean) {\n this.checkedChanged.emit(checked);\n }\n\n /**\n * Listens for the change event on the toggle input element and updates the checked state.\n * the checked state of the host elements.\n * @param {Event} event - The change event.\n */\n @Listen('change')\n handleChange(event: Event) {\n const target = event.target as HTMLInputElement;\n\n if (target.type === 'checkbox' && target.id === this.inputId) {\n if (this.readonly || this.disabled) {\n event.preventDefault();\n return;\n }\n\n this.checked = target.checked;\n }\n }\n\n //#endregion WATCHERS\n /****************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n class={clsx(\n this.labelPlacement === 'before' && 'label-placement-before',\n )}\n >\n <div class=\"input-container\">\n <input\n type=\"checkbox\"\n id={this.inputId}\n name={this.name}\n autocomplete=\"off\"\n value={this.value}\n checked={Boolean(this.checked)}\n disabled={this.disabled || this.readonly}\n readonly={this.readonly}\n />\n </div>\n\n <div class=\"text-container\">\n {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n <label\n htmlFor={this.inputId}\n class={clsx(this.hideLabel && 'visually-hidden')}\n >\n <slot name=\"label\">{this.label}</slot>\n </label>\n )}\n\n {(this.description ||\n this.el.querySelector('[slot=\"description\"]')) && (\n <div class=\"description\">\n <slot name=\"description\">{this.description}</slot>\n </div>\n )}\n </div>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}
|
|
@@ -48,7 +48,7 @@ const NvTogglebutton = class {
|
|
|
48
48
|
/****************************************************************************/
|
|
49
49
|
//#region RENDER
|
|
50
50
|
render() {
|
|
51
|
-
return (index.h(index.Host, { key: '
|
|
51
|
+
return (index.h(index.Host, { key: 'cb15a84c7e7cc27a80773613f31b98168eee8475', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, index.h("slot", { key: '32d6b9394088d88c4671fb7809ad6aa85b240fff' })));
|
|
52
52
|
}
|
|
53
53
|
};
|
|
54
54
|
NvTogglebutton.style = NvTogglebuttonStyle0;
|
|
@@ -156,7 +156,7 @@ const NvTogglebuttongroup = class {
|
|
|
156
156
|
/****************************************************************************/
|
|
157
157
|
//#region RENDER
|
|
158
158
|
render() {
|
|
159
|
-
return (index.h(index.Host, { key: '
|
|
159
|
+
return (index.h(index.Host, { key: 'ce185699fabd71bb5c22e5a0d73df88067acb9d6' }, index.h("slot", { key: 'a1e375fb1e8660f3fdb75d96f18db20735a3a64d' })));
|
|
160
160
|
}
|
|
161
161
|
get el() { return index.getElement(this); }
|
|
162
162
|
static get watchers() { return {
|
|
@@ -46,7 +46,7 @@ const NvTooltip = class {
|
|
|
46
46
|
/****************************************************************************/
|
|
47
47
|
//#region RENDER
|
|
48
48
|
render() {
|
|
49
|
-
return (index.h(index.Host, { key: '
|
|
49
|
+
return (index.h(index.Host, { key: 'e0b68e5ade824e2b0f9c5e5cac140349412c919d' }, index.h("slot", { key: 'd61a58d034818fdba87b4ab17ce903bbb13a47ff' }), index.h("nv-popover", { key: '408df675045f95adf270025f83285b2e125873c5', triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, index.h("p", { key: 'e4f860f09f5e5ef83b5e704c271781f41a643e59', slot: "content" }, this.message), index.h("slot", { key: '2e2e4dcae68651d734696e718c59389f712562df', name: "content" }))));
|
|
50
50
|
}
|
|
51
51
|
get el() { return index.getElement(this); }
|
|
52
52
|
};
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
const fade_animation = require('./fade.animation-cf6eba0d.js');
|
|
4
|
+
const styleValueTypes_es = require('./style-value-types.es-eea2f16f.js');
|
|
5
|
+
|
|
6
|
+
const useSlide = (node, { duration } = { duration: 200 }) => {
|
|
7
|
+
const nodeStyler = fade_animation.index(node);
|
|
8
|
+
/**
|
|
9
|
+
* Will animate the translateX to 100%, sliding the element to the right.
|
|
10
|
+
*/
|
|
11
|
+
function slideOut() {
|
|
12
|
+
return new Promise(resolve => {
|
|
13
|
+
styleValueTypes_es.animate({
|
|
14
|
+
from: { x: 0 },
|
|
15
|
+
to: { x: 100 },
|
|
16
|
+
ease: styleValueTypes_es.easeOut,
|
|
17
|
+
duration,
|
|
18
|
+
onUpdate(latest) {
|
|
19
|
+
nodeStyler.set({ transform: `translateX(${latest.x}%)` });
|
|
20
|
+
},
|
|
21
|
+
onComplete() {
|
|
22
|
+
resolve();
|
|
23
|
+
},
|
|
24
|
+
});
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* Applies the slideOut styles without animating, useful when initial state
|
|
29
|
+
* is slid out.
|
|
30
|
+
*/
|
|
31
|
+
function setSlideOut() {
|
|
32
|
+
node.style.transform = 'translateX(100%)';
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* Applies the slideIn styles without animating, useful when initial state
|
|
36
|
+
* is slid in.
|
|
37
|
+
*/
|
|
38
|
+
function setSlideIn() {
|
|
39
|
+
node.style.transform = '';
|
|
40
|
+
}
|
|
41
|
+
/**
|
|
42
|
+
* Will animate the translateX from 100% to 0%, sliding the element in from the right.
|
|
43
|
+
*/
|
|
44
|
+
function slideIn() {
|
|
45
|
+
return new Promise(resolve => {
|
|
46
|
+
styleValueTypes_es.animate({
|
|
47
|
+
from: { x: 100 },
|
|
48
|
+
to: { x: 0 },
|
|
49
|
+
duration,
|
|
50
|
+
onUpdate(latest) {
|
|
51
|
+
nodeStyler.set({ transform: `translateX(${latest.x}%)` });
|
|
52
|
+
},
|
|
53
|
+
onComplete() {
|
|
54
|
+
resolve();
|
|
55
|
+
node.style.removeProperty('transform');
|
|
56
|
+
},
|
|
57
|
+
});
|
|
58
|
+
});
|
|
59
|
+
}
|
|
60
|
+
return {
|
|
61
|
+
slideIn,
|
|
62
|
+
slideOut,
|
|
63
|
+
setSlideOut,
|
|
64
|
+
setSlideIn,
|
|
65
|
+
};
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
exports.useSlide = useSlide;
|
|
69
|
+
|
|
70
|
+
//# sourceMappingURL=slide.animation-bedfc827.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"slide.animation-bedfc827.js","mappings":";;;;;MAQM,QAAQ,GAAG,CACf,IAAiB,EACjB,EAAE,QAAQ,KAAmB,EAAE,QAAQ,EAAE,GAAG,EAAE;IAE9C,MAAM,UAAU,GAAGA,oBAAM,CAAC,IAAI,CAAC,CAAC;;;;IAKhC,SAAS,QAAQ;QACf,OAAO,IAAI,OAAO,CAAO,OAAO;YAC9BC,0BAAO,CAAC;gBACN,IAAI,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE;gBACd,EAAE,EAAE,EAAE,CAAC,EAAE,GAAG,EAAE;gBACd,IAAI,EAAEC,0BAAO;gBACb,QAAQ;gBACR,QAAQ,CAAC,MAAM;oBACb,UAAU,CAAC,GAAG,CAAC,EAAE,SAAS,EAAE,cAAc,MAAM,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;iBAC3D;gBACD,UAAU;oBACR,OAAO,EAAE,CAAC;iBACX;aACF,CAAC,CAAC;SACJ,CAAC,CAAC;KACJ;;;;;IAMD,SAAS,WAAW;QAClB,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,kBAAkB,CAAC;KAC3C;;;;;IAMD,SAAS,UAAU;QACjB,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,EAAE,CAAC;KAC3B;;;;IAKD,SAAS,OAAO;QACd,OAAO,IAAI,OAAO,CAAO,OAAO;YAC9BD,0BAAO,CAAC;gBACN,IAAI,EAAE,EAAE,CAAC,EAAE,GAAG,EAAE;gBAChB,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE;gBACZ,QAAQ;gBACR,QAAQ,CAAC,MAAM;oBACb,UAAU,CAAC,GAAG,CAAC,EAAE,SAAS,EAAE,cAAc,MAAM,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;iBAC3D;gBACD,UAAU;oBACR,OAAO,EAAE,CAAC;oBACV,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;iBACxC;aACF,CAAC,CAAC;SACJ,CAAC,CAAC;KACJ;IAED,OAAO;QACL,OAAO;QACP,QAAQ;QACR,WAAW;QACX,UAAU;KACX,CAAC;AACJ;;;;","names":["styler","animate","easeOut"],"sources":["src/animations/slide.animation.ts"],"sourcesContent":["import { animate, easeOut } from 'popmotion';\nimport styler from 'stylefire';\n\nexport type SlideOptions = {\n /** How long the animation should take in ms @default 200 */\n duration?: number;\n};\n\nconst useSlide = (\n node: HTMLElement,\n { duration }: SlideOptions = { duration: 200 },\n) => {\n const nodeStyler = styler(node);\n\n /**\n * Will animate the translateX to 100%, sliding the element to the right.\n */\n function slideOut() {\n return new Promise<void>(resolve => {\n animate({\n from: { x: 0 },\n to: { x: 100 },\n ease: easeOut,\n duration,\n onUpdate(latest) {\n nodeStyler.set({ transform: `translateX(${latest.x}%)` });\n },\n onComplete() {\n resolve();\n },\n });\n });\n }\n\n /**\n * Applies the slideOut styles without animating, useful when initial state\n * is slid out.\n */\n function setSlideOut() {\n node.style.transform = 'translateX(100%)';\n }\n\n /**\n * Applies the slideIn styles without animating, useful when initial state\n * is slid in.\n */\n function setSlideIn() {\n node.style.transform = '';\n }\n\n /**\n * Will animate the translateX from 100% to 0%, sliding the element in from the right.\n */\n function slideIn() {\n return new Promise<void>(resolve => {\n animate({\n from: { x: 100 },\n to: { x: 0 },\n duration,\n onUpdate(latest) {\n nodeStyler.set({ transform: `translateX(${latest.x}%)` });\n },\n onComplete() {\n resolve();\n node.style.removeProperty('transform');\n },\n });\n });\n }\n\n return {\n slideIn,\n slideOut,\n setSlideOut,\n setSlideIn,\n };\n};\n\nexport { useSlide };\n"],"version":3}
|
|
@@ -90,13 +90,10 @@ const useCollapse = (node, { duration = 200, overflow = 'hidden' } = {}) => {
|
|
|
90
90
|
* Expand: animate from 0 box to the element's natural box (height + margins),
|
|
91
91
|
* then restore `height: auto` and computed margins.
|
|
92
92
|
*/
|
|
93
|
-
|
|
93
|
+
function expand() {
|
|
94
94
|
stop();
|
|
95
|
-
// Make sure any pending screen updates are done
|
|
96
|
-
await new Promise(resolve => requestAnimationFrame(resolve));
|
|
97
95
|
return new Promise(resolve => {
|
|
98
96
|
// Let the element size naturally to measure the target box
|
|
99
|
-
// await next animation frame
|
|
100
97
|
setStyle({
|
|
101
98
|
height: '',
|
|
102
99
|
marginTop: '',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"collapse.animation.js","sourceRoot":"","sources":["../../src/animations/collapse.animation.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"collapse.animation.js","sourceRoot":"","sources":["../../src/animations/collapse.animation.ts"],"names":[],"mappings":"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","sourcesContent":["import { animate, cubicBezier } from 'popmotion';\n\nexport type CollapseOptions = {\n /**\n * Duration of the expand/collapse animation in milliseconds.\n * @default 200\n */\n duration?: number;\n\n /**\n * Set the overflow state while animating.\n * @default \"hidden\"\n */\n overflow?: 'hidden' | 'visible';\n};\n\n/**\n * Read current box metrics (height + vertical margins).\n * @param {HTMLElement} node - The element to measure.\n * @returns {object} The box metrics.\n */\nfunction getBoxMetrics(node: HTMLElement) {\n const rectHeight = node.getBoundingClientRect().height;\n const style = getComputedStyle(node);\n const marginTop = parseFloat(style.marginTop) || 0;\n const marginBottom = parseFloat(style.marginBottom) || 0;\n const total = rectHeight + marginTop + marginBottom;\n return { height: rectHeight, marginTop, marginBottom, total };\n}\n\nconst useCollapse = (\n node: HTMLElement,\n { duration = 200, overflow = 'hidden' }: CollapseOptions = {},\n) => {\n let currentAnimation: ReturnType<typeof animate> | null = null;\n\n const stop = () => {\n if (currentAnimation) {\n currentAnimation.stop();\n currentAnimation = null;\n }\n };\n\n const setStyle = (styles: Partial<CSSStyleDeclaration>) => {\n for (const [k, v] of Object.entries(styles)) {\n node.style[k] = v as string;\n }\n };\n\n /** Instantly apply collapsed styles (no animation). */\n function setCollapsed() {\n stop();\n setStyle({\n height: '0px',\n marginTop: '0px',\n marginBottom: '0px',\n overflow,\n });\n }\n\n /** Instantly apply expanded styles (no animation). */\n function setExpanded() {\n stop();\n setStyle({\n height: '',\n marginTop: '',\n marginBottom: '',\n overflow: '',\n });\n }\n\n /**\n * Collapse: animate from current box (height + margins) down to 0.\n */\n function collapse() {\n stop();\n return new Promise<void>(resolve => {\n const { height, marginTop, marginBottom, total } = getBoxMetrics(node);\n\n // Lock current box\n setStyle({\n height: `${height}px`,\n marginTop: `${marginTop}px`,\n marginBottom: `${marginBottom}px`,\n overflow,\n willChange: 'height, margin',\n });\n\n const denom = total > 0 ? total : 0.0001; // avoid divide-by-zero\n\n currentAnimation = animate({\n from: total,\n to: 0,\n duration,\n ease: cubicBezier(0.2, 0, 0, 1),\n onUpdate: v => {\n const ratio = v / denom;\n setStyle({\n height: `${height * ratio}px`,\n marginTop: `${marginTop * ratio}px`,\n marginBottom: `${marginBottom * ratio}px`,\n });\n },\n onComplete: () => {\n setStyle({\n height: '0px',\n marginTop: '0px',\n marginBottom: '0px',\n willChange: '',\n });\n resolve();\n },\n });\n });\n }\n\n /**\n * Expand: animate from 0 box to the element's natural box (height + margins),\n * then restore `height: auto` and computed margins.\n */\n function expand() {\n stop();\n return new Promise<void>(resolve => {\n // Let the element size naturally to measure the target box\n setStyle({\n height: '',\n marginTop: '',\n marginBottom: '',\n overflow,\n });\n const { height, marginTop, marginBottom, total } = getBoxMetrics(node);\n\n // Start locked at zero box\n setStyle({\n height: '0px',\n marginTop: '0px',\n marginBottom: '0px',\n willChange: 'height, margin',\n });\n\n const denom = total > 0 ? total : 0.0001;\n\n currentAnimation = animate({\n from: 0,\n to: total,\n duration,\n ease: cubicBezier(0.2, 0, 0, 1),\n onUpdate: v => {\n const ratio = v / denom;\n setStyle({\n height: `${height * ratio}px`,\n marginTop: `${marginTop * ratio}px`,\n marginBottom: `${marginBottom * ratio}px`,\n });\n },\n onComplete: () => {\n // Restore natural layout\n setStyle({\n height: '',\n marginTop: '',\n marginBottom: '',\n overflow: '',\n willChange: '',\n });\n resolve();\n },\n });\n });\n }\n\n return { collapse, expand, setCollapsed, setExpanded };\n};\n\nexport { useCollapse };\n"]}
|
|
@@ -27,14 +27,14 @@ const useFade = (node, { duration } = { duration: 200 }) => {
|
|
|
27
27
|
* is hidden.
|
|
28
28
|
*/
|
|
29
29
|
function setFadeOut() {
|
|
30
|
-
|
|
30
|
+
node.style.opacity = '0';
|
|
31
31
|
}
|
|
32
32
|
/**
|
|
33
33
|
* Applies the fadeIn styles without animating, useful when initial state
|
|
34
34
|
* is visible.
|
|
35
35
|
*/
|
|
36
36
|
function setFadeIn() {
|
|
37
|
-
|
|
37
|
+
node.style.opacity = '1';
|
|
38
38
|
}
|
|
39
39
|
/**
|
|
40
40
|
* Will animate the opacity to 0, once complete, the opacity style attribute
|