@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
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-aff3ed68.js';
|
|
2
|
-
import { F as FeedbackColors
|
|
3
|
-
import { u as useCollapse } from './p-
|
|
4
|
-
import { u as useFade } from './p-
|
|
2
|
+
import { F as FeedbackColors } from './p-2277cfc8.js';
|
|
3
|
+
import { u as useCollapse } from './p-31591941.js';
|
|
4
|
+
import { u as useFade } from './p-ee0df37f.js';
|
|
5
5
|
import './p-42ea6b74.js';
|
|
6
|
-
import { u as useSlide } from './p-
|
|
6
|
+
import { u as useSlide } from './p-eda2f9f3.js';
|
|
7
7
|
import { p as parallel } from './p-a52cd849.js';
|
|
8
|
-
import { d as defineCustomElement$2 } from './p-
|
|
8
|
+
import { d as defineCustomElement$2 } from './p-e0cd7e3a.js';
|
|
9
9
|
import { v as v4 } from './p-f5ff676c.js';
|
|
10
10
|
|
|
11
|
-
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]
|
|
11
|
+
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)}";
|
|
12
12
|
const NvNotificationStyle0 = nvNotificationCss;
|
|
13
13
|
|
|
14
14
|
const NvNotification$1 = /*@__PURE__*/ proxyCustomElement(class NvNotification extends H {
|
|
@@ -42,11 +42,6 @@ const NvNotification$1 = /*@__PURE__*/ proxyCustomElement(class NvNotification e
|
|
|
42
42
|
* Controls the visibility of the notification.
|
|
43
43
|
*/
|
|
44
44
|
this.hidden = false; // eslint-disable-line @stencil-community/reserved-member-names
|
|
45
|
-
/**
|
|
46
|
-
* When true, the notification will be hidden initially, but internal changes
|
|
47
|
-
* will not be in a controlled state. Good for animating the notification in.
|
|
48
|
-
*/
|
|
49
|
-
this.initiallyHidden = false;
|
|
50
45
|
//#endregion EVENTS
|
|
51
46
|
/****************************************************************************/
|
|
52
47
|
//#region INTERNAL
|
|
@@ -68,22 +63,9 @@ const NvNotification$1 = /*@__PURE__*/ proxyCustomElement(class NvNotification e
|
|
|
68
63
|
//#endregion PROPERTIES
|
|
69
64
|
/****************************************************************************/
|
|
70
65
|
//#region METHODS
|
|
71
|
-
/**
|
|
72
|
-
* Dismisses the notification with an animation, after the animation is
|
|
73
|
-
* complete, the hiddenChanged event will be emitted with the value of true,
|
|
74
|
-
* and the hidden prop will be set to true.
|
|
75
|
-
*/
|
|
76
66
|
async dismiss() {
|
|
77
67
|
await this.dismissAnimation();
|
|
78
68
|
}
|
|
79
|
-
/**
|
|
80
|
-
* Sets the hidden prop to false, and shows the notification with an
|
|
81
|
-
* animation, after the animation is complete, the hiddenChanged event will be
|
|
82
|
-
* emitted with the value of false.
|
|
83
|
-
*/
|
|
84
|
-
async show() {
|
|
85
|
-
await this.showAnimation();
|
|
86
|
-
}
|
|
87
69
|
getDefaultIcon() {
|
|
88
70
|
var _a;
|
|
89
71
|
return (_a = this.iconByFeedback[this.feedback]) !== null && _a !== void 0 ? _a : 'info-circle';
|
|
@@ -101,55 +83,14 @@ const NvNotification$1 = /*@__PURE__*/ proxyCustomElement(class NvNotification e
|
|
|
101
83
|
getMessageId() {
|
|
102
84
|
return this.message ? `nv-notification-${this.uid}-message` : null;
|
|
103
85
|
}
|
|
104
|
-
async showAnimation() {
|
|
105
|
-
this.hidden = false;
|
|
106
|
-
const { setFadeIn } = useFade(this.container);
|
|
107
|
-
const { expand } = useCollapse(this.el, {
|
|
108
|
-
duration: 300,
|
|
109
|
-
overflow: 'visible',
|
|
110
|
-
});
|
|
111
|
-
const { slideY, setSlideY } = useSlide(this.container, {
|
|
112
|
-
duration: 300,
|
|
113
|
-
});
|
|
114
|
-
setSlideY(-100);
|
|
115
|
-
setFadeIn();
|
|
116
|
-
await parallel(slideY({ from: -100, to: 0 }), expand).start();
|
|
117
|
-
this.hiddenChanged.emit(false);
|
|
118
|
-
}
|
|
119
|
-
getSlideDestination(pos) {
|
|
120
|
-
switch (pos) {
|
|
121
|
-
case NotificationPosition.TopRight:
|
|
122
|
-
case NotificationPosition.BottomRight:
|
|
123
|
-
return { axis: 'x', to: 100 }; // right
|
|
124
|
-
case NotificationPosition.TopLeft:
|
|
125
|
-
case NotificationPosition.BottomLeft:
|
|
126
|
-
return { axis: 'x', to: -100 }; // left
|
|
127
|
-
case NotificationPosition.TopCenter:
|
|
128
|
-
return { axis: 'y', to: -100 }; // up
|
|
129
|
-
case NotificationPosition.BottomCenter:
|
|
130
|
-
return { axis: 'y', to: 100 }; // down
|
|
131
|
-
default:
|
|
132
|
-
return { axis: 'x', to: 100 }; // fallback
|
|
133
|
-
}
|
|
134
|
-
}
|
|
135
86
|
async dismissAnimation() {
|
|
136
|
-
var _a;
|
|
137
|
-
const position = (_a = this.el
|
|
138
|
-
.closest('nv-notificationcontainer')) === null || _a === void 0 ? void 0 : _a.getAttribute('position');
|
|
139
|
-
const destination = this.getSlideDestination(position);
|
|
140
87
|
const { fadeOut } = useFade(this.container, { duration: 300 });
|
|
141
|
-
const {
|
|
142
|
-
duration: 500,
|
|
143
|
-
});
|
|
88
|
+
const { slideOut } = useSlide(this.container, { duration: 800 });
|
|
144
89
|
const { collapse } = useCollapse(this.el, {
|
|
145
|
-
duration:
|
|
90
|
+
duration: 800,
|
|
146
91
|
overflow: 'visible',
|
|
147
92
|
});
|
|
148
|
-
|
|
149
|
-
? slideX({ from: 0, to: destination.to })
|
|
150
|
-
: slideY({ from: 0, to: destination.to });
|
|
151
|
-
setSlideReset();
|
|
152
|
-
await parallel(fadeOut, slide, collapse).start();
|
|
93
|
+
await parallel(fadeOut, slideOut, collapse).start();
|
|
153
94
|
this.hidden = true;
|
|
154
95
|
this.hiddenChanged.emit(true);
|
|
155
96
|
}
|
|
@@ -160,15 +101,13 @@ const NvNotification$1 = /*@__PURE__*/ proxyCustomElement(class NvNotification e
|
|
|
160
101
|
this.headingSlot = this.el.querySelector('[slot="heading"]');
|
|
161
102
|
this.messageSlot = this.el.querySelector('[slot="content"]');
|
|
162
103
|
this.actionsSlot = this.el.querySelector('[slot="actions"]');
|
|
163
|
-
if (this.initiallyHidden)
|
|
164
|
-
this.hidden = true;
|
|
165
104
|
}
|
|
166
105
|
//#endregion LIFECYCLE
|
|
167
106
|
/****************************************************************************/
|
|
168
107
|
//#region RENDER
|
|
169
108
|
render() {
|
|
170
109
|
var _a, _b, _c;
|
|
171
|
-
return (h(Host, { key: '
|
|
110
|
+
return (h(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" }, h("div", { key: 'beed9ae5f6fac1b0c6d103dd75a41e0aede84041', "data-scope": "container", ref: el => (this.container = el) }, this.dismissible && (h("button", { key: '8e17f33867c2563de719dc1b0f0e2d4ae39ad1a6', "data-scope": "dismiss", type: "button", onClick: this.dismiss.bind(this) }, h("nv-icon", { key: 'cb8850135bb2383e33a16671569547611b55e434', name: "x", size: "sm" }))), h("nv-icon", { key: 'f5f58e1c3a94d854841271eb12af047322b2f0b4', name: (_c = this.icon) !== null && _c !== void 0 ? _c : this.getDefaultIcon(), size: "md" }), h("div", { key: '9c6f6bb0315cd25260d483472a24832031ce45da', "data-scope": "content" }, (this.heading || this.headingSlot) && (h("p", { key: '1013d6b6790f75682a1db0e43293b61e614f1c07', id: this.getHeadingId(), "data-scope": "heading" }, h("slot", { key: '844a7bccf6f365d4e59dfdec9b3c9096cbeda798', name: "heading" }, this.heading))), (this.message || this.messageSlot) && (h("p", { key: '6688e9dc927f6164ce60f27b84fdbeb257296504', id: this.getMessageId(), "data-scope": "message" }, h("slot", { key: 'f0c0790faa40411970575240a081f0f0bf0e9aff', name: "content" }, this.message))), this.actionsSlot && (h("div", { key: '0ba946edf5b3a8410da3b375e589613a2674fd15', "data-scope": "actions" }, h("slot", { key: '0360ab92db66957f0290569c39307ced2be5922d', name: "actions" })))))));
|
|
172
111
|
}
|
|
173
112
|
get el() { return this; }
|
|
174
113
|
static get style() { return NvNotificationStyle0; }
|
|
@@ -181,9 +120,7 @@ const NvNotification$1 = /*@__PURE__*/ proxyCustomElement(class NvNotification e
|
|
|
181
120
|
"icon": [513],
|
|
182
121
|
"dismissible": [516],
|
|
183
122
|
"hidden": [1540],
|
|
184
|
-
"
|
|
185
|
-
"dismiss": [64],
|
|
186
|
-
"show": [64]
|
|
123
|
+
"dismiss": [64]
|
|
187
124
|
}]);
|
|
188
125
|
function defineCustomElement$1() {
|
|
189
126
|
if (typeof customElements === "undefined") {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"nv-notification.js","mappings":"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","names":["NvNotification","uuidv4"],"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.js","mappings":"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","names":["NvNotification","uuidv4"],"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}
|
|
@@ -11,7 +11,7 @@ const NvRow$1 = /*@__PURE__*/ proxyCustomElement(class NvRow extends H {
|
|
|
11
11
|
/****************************************************************************/
|
|
12
12
|
//#region RENDER
|
|
13
13
|
render() {
|
|
14
|
-
return (h(Host, { key: '
|
|
14
|
+
return (h(Host, { key: '8415bdad0106bd3d836996c617a749294e0c19e2' }, h("slot", { key: '77c069ced0dc25c4169945877c388f30d27fdc4f' })));
|
|
15
15
|
}
|
|
16
16
|
static get style() { return NvRowStyle0; }
|
|
17
17
|
}, [4, "nv-row"]);
|
|
@@ -20,7 +20,7 @@ const NvStack$1 = /*@__PURE__*/ proxyCustomElement(class NvStack extends H {
|
|
|
20
20
|
/****************************************************************************/
|
|
21
21
|
//#region RENDER
|
|
22
22
|
render() {
|
|
23
|
-
return (h(Host, { key: '
|
|
23
|
+
return (h(Host, { key: '66123f22ad4a6ebefe8663c795274eb900d2c178', class: 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') }, h("slot", { key: '7b3d395c3490664f0e2f337a04f69cc717ed6c0e' })));
|
|
24
24
|
}
|
|
25
25
|
static get style() { return NvStackStyle0; }
|
|
26
26
|
}, [4, "nv-stack", {
|
|
@@ -312,14 +312,14 @@ const NvTable$1 = /*@__PURE__*/ proxyCustomElement(class NvTable extends H {
|
|
|
312
312
|
const rows = !this.table || this.table === undefined || this.parsedData.length === 0
|
|
313
313
|
? []
|
|
314
314
|
: this.table.data;
|
|
315
|
-
return (h(Host, { key: '
|
|
315
|
+
return (h(Host, { key: 'ea0b3237145fbc199d356010f1e001797afc52d6' }, h("div", { key: 'd3bf41bad48e549d1799b2c8e55a308a7d767973', class: "hidden" }, h("slot", { key: '8263220ebd266240b16228b67f8d215d7d56afd7' })), h("slot", { key: '36d43d6870cf9a6021521579c0507afd1fe85081', name: "before" }), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (h("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (h("table", { class: "table" }, this.parsedColumns.length > 0 && headerGroups.length > 0 && (h("thead", { class: "table-header" }, h("tr", null, headerGroups &&
|
|
316
316
|
headerGroups.map(col => {
|
|
317
317
|
return (h("th", { key: col.name }, this.renderTemplate(this.headerTemplateCache.get(col.name), {}) || col.header));
|
|
318
318
|
})))), h("tbody", { class: "table-body" }, !rows || rows.length === 0 ? (h("tr", null, h("td", { colSpan: headerGroups.length || 12, class: "no-data" }, this.noDataMessage))) : (rows.map(row => (h("tr", { key: JSON.stringify(row) }, headerGroups.map(col => {
|
|
319
319
|
var _a;
|
|
320
320
|
return (h("td", null, this.renderTemplate(this.templateCache.get(col.name), row) ||
|
|
321
321
|
((_a = row[col.name]) !== null && _a !== void 0 ? _a : this.fallbackValue)));
|
|
322
|
-
})))))))), h("slot", { key: '
|
|
322
|
+
})))))))), h("slot", { key: '233b61e9099f58ca0eeeb7d0f7fdc7bd71bc9065', name: "after" })));
|
|
323
323
|
}
|
|
324
324
|
get el() { return this; }
|
|
325
325
|
static get watchers() { return {
|
|
@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-
|
|
|
2
2
|
import { c as clsx } from './p-8a1a6e56.js';
|
|
3
3
|
import { v as v4 } from './p-f5ff676c.js';
|
|
4
4
|
|
|
5
|
-
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-
|
|
5
|
+
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}";
|
|
6
6
|
const NvToggleStyle0 = nvToggleCss;
|
|
7
7
|
|
|
8
8
|
const NvToggle$1 = /*@__PURE__*/ proxyCustomElement(class NvToggle extends H {
|
|
@@ -63,8 +63,8 @@ const NvToggle$1 = /*@__PURE__*/ proxyCustomElement(class NvToggle extends H {
|
|
|
63
63
|
/****************************************************************************/
|
|
64
64
|
//#region RENDER
|
|
65
65
|
render() {
|
|
66
|
-
return (h(Host, { key: '
|
|
67
|
-
this.el.querySelector('[slot="description"]')) && (h("div", { key: '
|
|
66
|
+
return (h(Host, { key: 'db161d2edfcf7f83381b6431c8bc70a22c04fbf3', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, h("div", { key: '086d6c429b4b7bcaa23093b13d30cf6ba21912f8', class: "input-container" }, 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 })), h("div", { key: 'eb5af410d1c643c70a4364948bf8fad9d54e74df', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '54793fd81258bee7676801f23da4f5fb554242bf', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, h("slot", { key: '6af650d9677d1eb0f8cfa77cbcd6318f2d6f8aaf', name: "label" }, this.label))), (this.description ||
|
|
67
|
+
this.el.querySelector('[slot="description"]')) && (h("div", { key: '2c157429288779ad6cc18d4e318e64830a657c54', class: "description" }, h("slot", { key: 'fcfae2a0d7cdcc76d4b23c4b376c8e2496e11bb5', name: "description" }, this.description))))));
|
|
68
68
|
}
|
|
69
69
|
static get formAssociated() { return true; }
|
|
70
70
|
get el() { return this; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"nv-toggle.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,uoHAAuoH,CAAC;AAC5pH,uBAAe,WAAW;;MCyBbA,UAAQ;IANrB;;;;;;;;;;;;QAmBW,YAAO,GAAWC,EAAM,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,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CACT,IAAI,CAAC,cAAc,KAAK,QAAQ,IAAI,wBAAwB,CAC7D,IAED,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,8DACE,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,EAEN,4DAAK,KAAK,EAAC,gBAAgB,IACxB,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,MACrD,8DACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,iBAAiB,CAAC,IAEhD,6DAAM,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAChC,CACT,EAEA,CAAC,IAAI,CAAC,WAAW;YAChB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAC,MAC7C,4DAAK,KAAK,EAAC,aAAa,IACtB,6DAAM,IAAI,EAAC,aAAa,IAAE,IAAI,CAAC,WAAW,CAAQ,CAC9C,CACP,CACG,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["NvToggle","uuidv4"],"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.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,siIAAsiI,CAAC;AAC3jI,uBAAe,WAAW;;MCyBbA,UAAQ;IANrB;;;;;;;;;;;;QAmBW,YAAO,GAAWC,EAAM,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,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CACT,IAAI,CAAC,cAAc,KAAK,QAAQ,IAAI,wBAAwB,CAC7D,IAED,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,8DACE,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,EAEN,4DAAK,KAAK,EAAC,gBAAgB,IACxB,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,MACrD,8DACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,iBAAiB,CAAC,IAEhD,6DAAM,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAChC,CACT,EAEA,CAAC,IAAI,CAAC,WAAW;YAChB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAC,MAC7C,4DAAK,KAAK,EAAC,aAAa,IACtB,6DAAM,IAAI,EAAC,aAAa,IAAE,IAAI,CAAC,WAAW,CAAQ,CAC9C,CACP,CACG,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["NvToggle","uuidv4"],"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}
|
|
@@ -45,7 +45,7 @@ const NvTogglebutton$1 = /*@__PURE__*/ proxyCustomElement(class NvTogglebutton e
|
|
|
45
45
|
/****************************************************************************/
|
|
46
46
|
//#region RENDER
|
|
47
47
|
render() {
|
|
48
|
-
return (h(Host, { key: '
|
|
48
|
+
return (h(Host, { key: 'cb15a84c7e7cc27a80773613f31b98168eee8475', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, h("slot", { key: '32d6b9394088d88c4671fb7809ad6aa85b240fff' })));
|
|
49
49
|
}
|
|
50
50
|
static get style() { return NvTogglebuttonStyle0; }
|
|
51
51
|
}, [4, "nv-togglebutton", {
|
|
@@ -153,7 +153,7 @@ const NvTogglebuttongroup$1 = /*@__PURE__*/ proxyCustomElement(class NvTogglebut
|
|
|
153
153
|
/****************************************************************************/
|
|
154
154
|
//#region RENDER
|
|
155
155
|
render() {
|
|
156
|
-
return (h(Host, { key: '
|
|
156
|
+
return (h(Host, { key: 'ce185699fabd71bb5c22e5a0d73df88067acb9d6' }, h("slot", { key: 'a1e375fb1e8660f3fdb75d96f18db20735a3a64d' })));
|
|
157
157
|
}
|
|
158
158
|
get el() { return this; }
|
|
159
159
|
static get watchers() { return {
|
|
@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-
|
|
|
2
2
|
import { c as clsx } from './p-8a1a6e56.js';
|
|
3
3
|
import { v as v4 } from './p-f5ff676c.js';
|
|
4
4
|
|
|
5
|
-
const nvFieldcheckboxCss = "nv-fieldcheckbox{--nv-fieldcheckbox-border-default:var(\n --components-form-field-border-default\n );--nv-fieldcheckbox-border-hover:var(--components-form-field-border-hover);--nv-fieldcheckbox-border-focus:var(--components-form-field-border-default);--nv-fieldcheckbox-background-default:var(\n --components-form-field-background-default\n );--nv-fieldcheckbox-background-checked:var(\n --components-form-field-background-checked\n );--nv-fieldcheckbox-background-disabled:var(\n --components-form-field-background-disabled\n );--nv-fieldcheckbox-focus-box-shadow:var(--color-focus-brand);--nv-fieldcheckbox-color-checked:var(\n --components-form-shape-foreground-default\n );--nv-fieldcheckbox-color-disabled:var(\n --components-form-shape-foreground-disabled\n );--nv-fieldcheckbox-outline-color:var(--color-focus-brand);display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-fieldcheckbox:not([disabled],[readonly]) input,nv-fieldcheckbox:not([disabled],[readonly]) label{cursor:pointer}nv-fieldcheckbox.error>.input-container{--nv-fieldcheckbox-border-default:var(--components-form-field-border-error);--nv-fieldcheckbox-border-hover:var(--nv-fieldcheckbox-border-default);--nv-fieldcheckbox-border-focus:var(--components-form-field-border-error);--nv-fieldcheckbox-focus-box-shadow:var(--color-focus-destructive);--nv-fieldcheckbox-color-disabled:var(\n --components-form-shape-foreground-disabled-error\n );--nv-fieldcheckbox-background-checked:var(\n --components-form-field-background-error\n );--nv-fieldcheckbox-outline-color:var(--color-focus-destructive)}nv-fieldcheckbox.label-placement-before{flex-direction:row-reverse}nv-fieldcheckbox[disabled]:not([disabled=false]){opacity:0.5}nv-fieldcheckbox>.input-container{position:relative;color:var(--nv-fieldcheckbox-color-checked)}nv-fieldcheckbox>.input-container input[type=checkbox][readonly]{opacity:0.5}nv-fieldcheckbox>.input-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--nv-fieldcheckbox-color-disabled)}nv-fieldcheckbox>.input-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-checkbox-size);height:var(--form-checkbox-size);flex-direction:column;align-items:flex-start;border-radius:var(--form-checkbox-radius);border-width:var(--form-checkbox-border-width);border-style:solid;border-color:var(--nv-fieldcheckbox-border-default);background:var(--nv-fieldcheckbox-background-default)}nv-fieldcheckbox>.input-container input[type=checkbox]:hover{border-color:var(--nv-fieldcheckbox-border-hover)}nv-fieldcheckbox>.input-container input[type=checkbox]:focus{border-color:var(--nv-fieldcheckbox-border-focus)}nv-fieldcheckbox>.input-container input[type=checkbox]:focus,nv-fieldcheckbox>.input-container input[type=checkbox]:focus-within{outline:none}nv-fieldcheckbox>.input-container input[type=checkbox]:focus-visible,nv-fieldcheckbox>.input-container input[type=checkbox]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--nv-fieldcheckbox-outline-color);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-fieldcheckbox>.input-container input[type=checkbox]:checked,nv-fieldcheckbox>.input-container input[type=checkbox]:indeterminate{background:var(--nv-fieldcheckbox-background-checked);border-color:var(--nv-fieldcheckbox-background-checked)}nv-fieldcheckbox>.input-container input[type=checkbox]:disabled:not([readonly]){background:var(--nv-fieldcheckbox-background-disabled);border-color:var(--nv-fieldcheckbox-border-default)}nv-fieldcheckbox>.input-container input[type=checkbox][readonly]{opacity:0.5}nv-fieldcheckbox>.input-container .icon{pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center}nv-fieldcheckbox>.input-container .icon svg{width:var(--form-checkbox-icon-size);height:var(--form-checkbox-icon-size);fill:none;stroke:currentcolor;stroke-width:var(--form-checkbox-icon-stroke);flex-shrink:0}nv-fieldcheckbox>.text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}nv-fieldcheckbox>.text-container label{align-self:stretch;
|
|
5
|
+
const nvFieldcheckboxCss = "nv-fieldcheckbox{--nv-fieldcheckbox-border-default:var(\n --components-form-field-border-default\n );--nv-fieldcheckbox-border-hover:var(--components-form-field-border-hover);--nv-fieldcheckbox-border-focus:var(--components-form-field-border-default);--nv-fieldcheckbox-background-default:var(\n --components-form-field-background-default\n );--nv-fieldcheckbox-background-checked:var(\n --components-form-field-background-checked\n );--nv-fieldcheckbox-background-disabled:var(\n --components-form-field-background-disabled\n );--nv-fieldcheckbox-focus-box-shadow:var(--color-focus-brand);--nv-fieldcheckbox-color-checked:var(\n --components-form-shape-foreground-default\n );--nv-fieldcheckbox-color-disabled:var(\n --components-form-shape-foreground-disabled\n );--nv-fieldcheckbox-outline-color:var(--color-focus-brand);display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-fieldcheckbox:not([disabled],[readonly]) input,nv-fieldcheckbox:not([disabled],[readonly]) label{cursor:pointer}nv-fieldcheckbox.error>.input-container{--nv-fieldcheckbox-border-default:var(--components-form-field-border-error);--nv-fieldcheckbox-border-hover:var(--nv-fieldcheckbox-border-default);--nv-fieldcheckbox-border-focus:var(--components-form-field-border-error);--nv-fieldcheckbox-focus-box-shadow:var(--color-focus-destructive);--nv-fieldcheckbox-color-disabled:var(\n --components-form-shape-foreground-disabled-error\n );--nv-fieldcheckbox-background-checked:var(\n --components-form-field-background-error\n );--nv-fieldcheckbox-outline-color:var(--color-focus-destructive)}nv-fieldcheckbox.label-placement-before{flex-direction:row-reverse}nv-fieldcheckbox[disabled]:not([disabled=false]){opacity:0.5}nv-fieldcheckbox>.input-container{position:relative;color:var(--nv-fieldcheckbox-color-checked)}nv-fieldcheckbox>.input-container input[type=checkbox][readonly]{opacity:0.5}nv-fieldcheckbox>.input-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--nv-fieldcheckbox-color-disabled)}nv-fieldcheckbox>.input-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-checkbox-size);height:var(--form-checkbox-size);flex-direction:column;align-items:flex-start;border-radius:var(--form-checkbox-radius);border-width:var(--form-checkbox-border-width);border-style:solid;border-color:var(--nv-fieldcheckbox-border-default);background:var(--nv-fieldcheckbox-background-default)}nv-fieldcheckbox>.input-container input[type=checkbox]:hover{border-color:var(--nv-fieldcheckbox-border-hover)}nv-fieldcheckbox>.input-container input[type=checkbox]:focus{border-color:var(--nv-fieldcheckbox-border-focus)}nv-fieldcheckbox>.input-container input[type=checkbox]:focus,nv-fieldcheckbox>.input-container input[type=checkbox]:focus-within{outline:none}nv-fieldcheckbox>.input-container input[type=checkbox]:focus-visible,nv-fieldcheckbox>.input-container input[type=checkbox]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--nv-fieldcheckbox-outline-color);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-fieldcheckbox>.input-container input[type=checkbox]:checked,nv-fieldcheckbox>.input-container input[type=checkbox]:indeterminate{background:var(--nv-fieldcheckbox-background-checked);border-color:var(--nv-fieldcheckbox-background-checked)}nv-fieldcheckbox>.input-container input[type=checkbox]:disabled:not([readonly]){background:var(--nv-fieldcheckbox-background-disabled);border-color:var(--nv-fieldcheckbox-border-default)}nv-fieldcheckbox>.input-container input[type=checkbox][readonly]{opacity:0.5}nv-fieldcheckbox>.input-container .icon{pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center}nv-fieldcheckbox>.input-container .icon svg{width:var(--form-checkbox-icon-size);height:var(--form-checkbox-icon-size);fill:none;stroke:currentcolor;stroke-width:var(--form-checkbox-icon-stroke);flex-shrink:0}nv-fieldcheckbox>.text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}nv-fieldcheckbox>.text-container label{align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--form-label-font-weight);line-height:var(--form-label-line-height)}nv-fieldcheckbox>.text-container 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-fieldcheckbox>.text-container .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:var(--form-description-font-weight);line-height:var(--form-description-line-height)}nv-fieldcheckbox>.text-container .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:var(--form-description-font-weight);line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";
|
|
6
6
|
const NvFieldcheckboxStyle0 = nvFieldcheckboxCss;
|
|
7
7
|
|
|
8
8
|
const NvFieldcheckbox = /*@__PURE__*/ proxyCustomElement(class NvFieldcheckbox extends H {
|
|
@@ -169,4 +169,4 @@ defineCustomElement();
|
|
|
169
169
|
|
|
170
170
|
export { NvFieldcheckbox as N, defineCustomElement as d };
|
|
171
171
|
|
|
172
|
-
//# sourceMappingURL=p-
|
|
172
|
+
//# sourceMappingURL=p-1172e9bb.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"p-1172e9bb.js","mappings":"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","names":["uuidv4"],"sources":["src/components/nv-fieldcheckbox/nv-fieldcheckbox.scss?tag=nv-fieldcheckbox","src/components/nv-fieldcheckbox/nv-fieldcheckbox.tsx"],"sourcesContent":["@use \"../../styles/utils\" as utils;\n@import '../../styles/focus-ring';\n\n@mixin fieldcheckbox-variables() {\n --nv-fieldcheckbox-border-default: var(\n --components-form-field-border-default\n );\n --nv-fieldcheckbox-border-hover: var(--components-form-field-border-hover);\n --nv-fieldcheckbox-border-focus: var(--components-form-field-border-default);\n --nv-fieldcheckbox-background-default: var(\n --components-form-field-background-default\n );\n --nv-fieldcheckbox-background-checked: var(\n --components-form-field-background-checked\n );\n --nv-fieldcheckbox-background-disabled: var(\n --components-form-field-background-disabled\n );\n --nv-fieldcheckbox-focus-box-shadow: var(--color-focus-brand);\n --nv-fieldcheckbox-color-checked: var(\n --components-form-shape-foreground-default\n );\n --nv-fieldcheckbox-color-disabled: var(\n --components-form-shape-foreground-disabled\n );\n --nv-fieldcheckbox-outline-color: var(--color-focus-brand);\n}\n\n@mixin fieldcheckbox-error-variables() {\n --nv-fieldcheckbox-border-default: var(--components-form-field-border-error);\n --nv-fieldcheckbox-border-hover: var(--nv-fieldcheckbox-border-default);\n --nv-fieldcheckbox-border-focus: var(--components-form-field-border-error);\n --nv-fieldcheckbox-focus-box-shadow: var(--color-focus-destructive);\n --nv-fieldcheckbox-color-disabled: var(\n --components-form-shape-foreground-disabled-error\n );\n --nv-fieldcheckbox-background-checked: var(\n --components-form-field-background-error\n );\n --nv-fieldcheckbox-outline-color: var(--color-focus-destructive);\n}\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: var(--form-label-font-weight);\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: var(--form-description-font-weight);\n line-height: var(--form-description-line-height);\n}\n\n@mixin error-description-styles() {\n @include description-styles();\n\n color: var(--components-form-text-description-error);\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(--nv-fieldcheckbox-color-checked);\n\n input[type='checkbox'][readonly] {\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: 0.5;\n }\n\n &:has(input[type='checkbox']:disabled:not([readonly])) {\n color: var(--nv-fieldcheckbox-color-disabled);\n }\n}\n\n@mixin input-styles() {\n appearance: none;\n position: relative;\n display: flex;\n width: var(--form-checkbox-size);\n height: var(--form-checkbox-size);\n flex-direction: column;\n align-items: flex-start;\n border-radius: var(--form-checkbox-radius);\n border-width: var(--form-checkbox-border-width);\n border-style: solid;\n border-color: var(--nv-fieldcheckbox-border-default);\n background: var(--nv-fieldcheckbox-background-default);\n\n &:hover {\n border-color: var(--nv-fieldcheckbox-border-hover);\n }\n\n &:focus {\n border-color: var(--nv-fieldcheckbox-border-focus);\n }\n\n @include focus-ring(var(--nv-fieldcheckbox-outline-color));\n\n &:checked,\n &:indeterminate {\n background: var(--nv-fieldcheckbox-background-checked);\n border-color: var(--nv-fieldcheckbox-background-checked);\n }\n\n &:disabled:not([readonly]) {\n background: var(--nv-fieldcheckbox-background-disabled);\n border-color: var(--nv-fieldcheckbox-border-default);\n }\n\n &[readonly] {\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: 0.5;\n }\n}\n\n@mixin icon-styles() {\n pointer-events: none;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n\n svg {\n width: var(--form-checkbox-icon-size);\n height: var(--form-checkbox-icon-size);\n fill: none;\n stroke: currentcolor;\n stroke-width: var(--form-checkbox-icon-stroke);\n flex-shrink: 0;\n }\n}\n\nnv-fieldcheckbox {\n @include fieldcheckbox-variables();\n @include root-styles();\n\n &.error > .input-container {\n @include fieldcheckbox-error-variables();\n }\n\n &.label-placement-before {\n @include label-before-styles();\n }\n\n &[disabled]:not([disabled='false']) {\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: 0.5;\n }\n\n > .input-container {\n @include input-container-styles();\n\n input[type='checkbox'] {\n @include input-styles();\n }\n\n .icon {\n @include icon-styles();\n }\n }\n\n > .text-container {\n @include text-container-styles();\n\n label {\n @include label-styles();\n &.visually-hidden {\n @include utils.visually-hidden();\n }\n }\n\n .description {\n @include description-styles();\n }\n\n .error-description {\n @include error-description-styles();\n }\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 default - Next to the label and description.\n * @slot main - Replaces the label and description.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n * @slot checked-icon - Content to be placed as the checked icon, will override the checkedIcon prop.\n * @slot indeterminate-icon - Content to be placed as the indeterminate icon, will override the indeterminateIcon prop.\n */\n@Component({\n tag: 'nv-fieldcheckbox',\n styleUrl: 'nv-fieldcheckbox.scss',\n formAssociated: true,\n shadow: false,\n})\nexport class NvFieldcheckbox {\n @Element() el!: HTMLNvFieldcheckboxElement;\n\n /****************************************************************************/\n //#region DEPRECATED\n\n /**\n * Message define a 'hint ' message for the Field.\n * @deprecated Use `description` instead.\n * */\n @Prop({ reflect: true })\n readonly message?: string;\n\n /**\n * The text for the validation message.\n * @deprecated Use `errorDescription` and set the error prop instead.\n * */\n @Prop({ reflect: true })\n readonly validation?: string;\n\n /**\n * When true, the label will be placed before the checkbox.\n * @deprecated Use `labelPlacement = end` instead.\n * */\n @Prop({ reflect: true })\n readonly labelBefore?: boolean = false;\n\n //#endregion DEPRECATED\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * Sets the ID for the radio button’s input element and the for attribute of\n * the associated label. If no ID is provided, a random one will be\n * automatically generated to ensure unique identification, facilitating\n * proper label association and accessibility.\n */\n @Prop({ reflect: true })\n readonly inputId: string = uuidv4();\n\n /**\n * The name attribute for the checkbox input, used to reference the form data\n * after submission.\n */\n @Prop({ reflect: true })\n readonly name?: string;\n\n /**\n * The value attribute of the checkbox input, representing the value sent on\n * form submission when the checkbox is checked. When the form is submitted,\n * the data will consist of a name=value pair.\n */\n @Prop({ reflect: true })\n readonly value?: string;\n\n /**\n * The label displayed next to the checkbox.\n */\n @Prop({ reflect: true })\n readonly label?: string;\n\n /**\n * Determines the position of the label relative to the checkbox, either\n * 'start' (before) or 'end' (after).\n */\n @Prop({ reflect: true, mutable: true })\n labelPlacement: `${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 * checkbox.\n */\n @Prop({ reflect: true, mutable: true })\n description?: string;\n\n /**\n * Signals that there is an error associated with the checkbox, which can\n * trigger visual cues.\n * @validator error\n */\n @Prop({ reflect: true, mutable: true })\n error: boolean = false;\n\n /**\n * A description that appears when there is an error related to the checkbox.\n * @validator message\n */\n @Prop({ reflect: true, mutable: true })\n errorDescription?: string;\n\n /**\n * Indicates whether the checkbox is checked or not.\n */\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /**\n * Indicates whether the checkbox is in an indeterminate state, typically used\n * for hierarchical checkboxes.\n */\n @Prop({ reflect: true, mutable: true })\n indeterminate: boolean = false;\n\n /**\n * Disables the checkbox, preventing user interaction.\n */\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /**\n * Sets the checkbox to read-only, preventing user changes but still allowing\n * focus and selection of text.\n */\n @Prop({ reflect: true })\n readonly readonly: boolean = false;\n\n /**\n * Marks the checkbox as required, indicating that it must be checked for\n * form submission.\n */\n @Prop({ reflect: true })\n readonly required: boolean = false;\n\n /**\n * Applies focus to the input field as soon as the component is mounted. This\n * is equivalent to setting the native autofocus attribute on an <input>\n * element.\n */\n @Prop({ reflect: true })\n // eslint-disable-next-line @stencil-community/reserved-member-names\n readonly autofocus: boolean = false;\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region 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 LISTENERS\n\n /**\n * Listens for the change event on the checkbox input element and updates the\n * checked state.\n * @param {Event} event - The change event.\n */\n @Listen('change')\n handleChange(event: Event) {\n const target = event.target as HTMLInputElement;\n\n if (target.type === 'checkbox' && target.id === this.inputId) {\n if (this.readonly || this.disabled) {\n event.preventDefault();\n return;\n }\n\n if (this.indeterminate) {\n this.indeterminate = false;\n }\n\n this.checked = target.checked;\n }\n }\n\n //#endregion LISTENERS\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 //#endregion WATCHERS\n /****************************************************************************/\n //#region LIFECYCLE\n\n componentWillRender() {\n if (this.message) {\n this.description = this.message;\n }\n\n if (this.labelBefore) {\n this.labelPlacement = 'before';\n }\n\n if (this.validation) {\n this.errorDescription = this.validation;\n this.error = true;\n }\n }\n\n //#endregion LIFECYCLE\n /****************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n class={clsx(\n this.labelPlacement === 'before' && 'label-placement-before',\n this.error && 'error',\n )}\n >\n <div class=\"input-container\">\n <input\n type=\"checkbox\"\n id={this.inputId}\n name={this.name}\n autofocus={this.autofocus}\n autocomplete=\"off\"\n value={this.value}\n checked={Boolean(this.checked)}\n disabled={this.disabled || this.readonly}\n readonly={this.readonly && !this.required}\n required={this.required}\n indeterminate={this.indeterminate}\n ref={el => {\n if (el) {\n el.indeterminate = this.indeterminate;\n }\n }}\n />\n <span class=\"icon\">\n {this.checked && !this.indeterminate && (\n <slot name=\"checked-icon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n >\n <path\n d=\"M11.6667 3.5L5.25004 9.91667L2.33337 7\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </slot>\n )}\n {this.indeterminate && (\n <slot name=\"indeterminate-icon\">\n <svg\n class=\"indeterminate-svg\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n >\n <path\n d=\"M2.9165 7H11.0832\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </slot>\n )}\n </span>\n </div>\n\n <slot></slot>\n\n <div class=\"text-container\">\n <slot name=\"main\">\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 </slot>\n\n {(this.errorDescription ||\n this.el.querySelector('[slot=\"error-description\"]')) && (\n <div hidden={!this.error} class=\"error-description\">\n <slot name=\"error-description\">{this.errorDescription}</slot>\n </div>\n )}\n </div>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}
|
|
@@ -1,12 +1,3 @@
|
|
|
1
|
-
var NotificationPosition;
|
|
2
|
-
(function (NotificationPosition) {
|
|
3
|
-
NotificationPosition["TopRight"] = "top-right";
|
|
4
|
-
NotificationPosition["TopLeft"] = "top-left";
|
|
5
|
-
NotificationPosition["TopCenter"] = "top-center";
|
|
6
|
-
NotificationPosition["BottomRight"] = "bottom-right";
|
|
7
|
-
NotificationPosition["BottomLeft"] = "bottom-left";
|
|
8
|
-
NotificationPosition["BottomCenter"] = "bottom-center";
|
|
9
|
-
})(NotificationPosition || (NotificationPosition = {}));
|
|
10
1
|
var FeedbackColors;
|
|
11
2
|
(function (FeedbackColors) {
|
|
12
3
|
FeedbackColors["Information"] = "information";
|
|
@@ -280,6 +271,6 @@ const CUSTOM_MONTH_NAMES = {
|
|
|
280
271
|
],
|
|
281
272
|
};
|
|
282
273
|
|
|
283
|
-
export { ButtonSize as B, CUSTOM_DAY_NAMES as C, DeprecatedSemanticColors as D, FeedbackColors as F, GlobalFilterPosition as G, IconButtonShape as I, LoaderColors as L,
|
|
274
|
+
export { ButtonSize as B, CUSTOM_DAY_NAMES as C, DeprecatedSemanticColors as D, FeedbackColors as F, GlobalFilterPosition as G, IconButtonShape as I, LoaderColors as L, NotificationEmphasis as N, SemanticSizes as S, ToggleButtonEmphasis as T, WEEK_ABBREVIATIONS as W, ButtonEmphasis as a, ButtonType as b, ToggleButtonSize as c, LabelPlacement as d, TextInputAutocomplete as e, TimeType as f, SortingPossibility as g, CUSTOM_MONTH_NAMES as h };
|
|
284
275
|
|
|
285
|
-
//# sourceMappingURL=p-
|
|
276
|
+
//# sourceMappingURL=p-2277cfc8.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"p-2277cfc8.js","mappings":"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","names":[],"sources":["src/utils/constants.ts"],"sourcesContent":["import { WeekAbbreviations } from '../interfaces/localization';\n\nexport enum FeedbackColors {\n Information = 'information',\n Warning = 'warning',\n Success = 'success',\n Error = 'error',\n Neutral = 'neutral',\n}\nexport enum DeprecatedSemanticColors {\n Neutral = 'neutral',\n Primary = 'primary',\n Secondary = 'secondary',\n Success = 'success',\n Error = 'error',\n}\nexport enum SemanticSizes {\n ExtraSmall = 'xs',\n Small = 'sm',\n Medium = 'md',\n Large = 'lg',\n ExtraLarge = 'xl',\n}\nexport enum ButtonSize {\n ExtraSmall = 'xs',\n Small = 'sm',\n Medium = 'md',\n Large = 'lg',\n}\nexport enum ButtonEmphasis {\n High = 'high',\n Medium = 'medium',\n Low = 'low',\n Lower = 'lower',\n}\nexport enum ButtonType {\n Submit = 'submit',\n Reset = 'reset',\n Button = 'button',\n}\nexport enum NotificationEmphasis {\n Medium = 'medium',\n High = 'high',\n}\nexport enum ToggleButtonEmphasis {\n High = 'high',\n Low = 'low',\n}\nexport enum ToggleButtonSize {\n ExtraSmall = 'xs',\n Small = 'sm',\n Medium = 'md',\n Large = 'lg',\n}\nexport enum IconButtonShape {\n Square = 'square',\n Rounded = 'rounded',\n}\nexport enum LoaderColors {\n High = 'brand',\n Low = 'white',\n}\nexport enum LabelPlacement {\n Before = 'before',\n After = 'after',\n}\n\nexport enum TextInputAutocomplete {\n On = 'on',\n Off = 'off',\n Section = 'section-*',\n Shipping = 'shipping',\n Billing = 'billing',\n Home = 'home',\n Work = 'work',\n Mobile = 'mobile',\n Fax = 'fax',\n Pager = 'pager',\n Tel = 'tel',\n TelCountryCode = 'tel-country-code',\n TelNational = 'tel-national',\n TelAreaCode = 'tel-area-code',\n TelLocal = 'tel-local',\n TelLocalPrefix = 'tel-local-prefix',\n TelLocalSuffix = 'tel-local-suffix',\n TelExtension = 'tel-extension',\n Email = 'email',\n IMProtocol = 'impp',\n Name = 'name',\n HonorificPrefix = 'honorific-prefix',\n GivenName = 'given-name',\n AdditionalName = 'additional-name',\n FamilyName = 'family-name',\n HonorificSuffix = 'honorific-suffix',\n Nickname = 'nickname',\n Username = 'username',\n NewPassword = 'new-password',\n CurrentPassword = 'current-password',\n OneTimeCode = 'one-time-code',\n OrganizationTitle = 'organization-title',\n Organization = 'organization',\n StreetAddress = 'street-address',\n AddressLine1 = 'address-line1',\n AddressLine2 = 'address-line2',\n AddressLine3 = 'address-line3',\n AddressLevel4 = 'address-level4',\n AddressLevel3 = 'address-level3',\n AddressLevel2 = 'address-level2',\n AddressLevel1 = 'address-level1',\n Country = 'country',\n CountryName = 'country-name',\n PostalCode = 'postal-code',\n CCName = 'cc-name',\n CCGivenName = 'cc-given-name',\n CCAdditionalName = 'cc-additional-name',\n CCFamilyName = 'cc-family-name',\n CCNumber = 'cc-number',\n CCExp = 'cc-exp',\n CCExpMonth = 'cc-exp-month',\n CCExpYear = 'cc-exp-year',\n CCCSC = 'cc-csc',\n CCType = 'cc-type',\n TransactionCurrency = 'transaction-currency',\n TransactionAmount = 'transaction-amount',\n Language = 'language',\n Bday = 'bday',\n BdayDay = 'bday-day',\n BdayMonth = 'bday-month',\n BdayYear = 'bday-year',\n Sex = 'sex',\n Url = 'url',\n Photo = 'photo',\n}\n\nexport enum TimeType {\n Hours = 'hours',\n Minutes = 'minutes',\n Seconds = 'seconds',\n}\n\nexport enum GlobalFilterPosition {\n End = 'end',\n Start = 'start',\n Center = 'center',\n}\nexport enum SortingPossibility {\n Asc = 'asc',\n Desc = 'desc',\n}\n\nexport const WEEK_ABBREVIATIONS: WeekAbbreviations = {\n 'fr-FR': 'Sem', // Semaine\n 'fr-BE': 'Sem', // Semaine\n 'nl-BE': 'W', // Week\n 'en-BE': 'W', // Week\n 'en-US': 'W', // Week\n 'en-GB': 'W', // Week\n 'es-ES': 'Sem', // Semana\n 'de-DE': 'KW', // Kalenderwoche\n 'it-IT': 'Set', // Settimana\n 'pt-PT': 'Sem', // Semana\n 'nl-NL': 'W', // Week\n 'pl-PL': 'Tyd', // Tydzień\n 'ru-RU': 'Нед', // Неделя\n 'ja-JP': '週', // Shū\n 'zh-CN': '周', // Zhōu\n 'ko-KR': '주', // Ju\n};\n\nexport const CUSTOM_DAY_NAMES: { [key: string]: string[] } = {\n 'fr-BE': ['Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa', 'Di'],\n 'nl-BE': ['Ma', 'Di', 'Wo', 'Do', 'Vr', 'Za', 'Zo'],\n 'de-DE': ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'],\n 'en-BE': ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],\n 'en-US': ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],\n 'en-GB': ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],\n};\n\nexport const CUSTOM_MONTH_NAMES: { [key: string]: string[] } = {\n 'fr-BE': [\n 'Jan',\n 'Fev',\n 'Mar',\n 'Avr',\n 'Mai',\n 'Jun',\n 'Jul',\n 'Aou',\n 'Sep',\n 'Oct',\n 'Nov',\n 'Dec',\n ],\n 'nl-BE': [\n 'Jan',\n 'Feb',\n 'Maa',\n 'Apr',\n 'Mei',\n 'Jun',\n 'Jul',\n 'Aug',\n 'Sep',\n 'Okt',\n 'Nov',\n 'Dec',\n ],\n 'de-DE': [\n 'Jan',\n 'Feb',\n 'Mär',\n 'Apr',\n 'Mai',\n 'Jun',\n 'Jul',\n 'Aug',\n 'Sep',\n 'Okt',\n 'Nov',\n 'Dez',\n ],\n 'en-BE': [\n 'Jan',\n 'Feb',\n 'Mar',\n 'Apr',\n 'May',\n 'Jun',\n 'Jul',\n 'Aug',\n 'Sep',\n 'Oct',\n 'Nov',\n 'Dec',\n ],\n 'en-US': [\n 'Jan',\n 'Feb',\n 'Mar',\n 'Apr',\n 'May',\n 'Jun',\n 'Jul',\n 'Aug',\n 'Sep',\n 'Oct',\n 'Nov',\n 'Dec',\n ],\n 'en-GB': [\n 'Jan',\n 'Feb',\n 'Mar',\n 'Apr',\n 'May',\n 'Jun',\n 'Jul',\n 'Aug',\n 'Sep',\n 'Oct',\n 'Nov',\n 'Dec',\n ],\n};\n"],"version":3}
|