npm - @nova-design-system/nova-webcomponents - Versions diffs - 3.23.0 → 3.24.0 - Mend

@nova-design-system/nova-webcomponents 3.23.0 → 3.24.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.

Files changed (792) hide show

package/dist/collection/components/nv-menu/nv-menu.docs.js CHANGED Viewed

@@ -10,7 +10,7 @@ const NvMenuDocs = {
             name: 'Default',
             template: (h("nv-menu", { "data-storybook-args": true, "data-class": "pb-20" }, h("nv-iconbutton", { slot: "trigger", name: "menu", shape: "rounded" }), h("ul", { slot: "content" }, h("nv-menuitem", { icon: "user", shortcut: "\u2318K", id: "user-settings", label: "User settings" }), h("nv-menuitem", { icon: "bulb", shortcut: "\u2318F", id: "find-all-items", label: "Find all items" })))),
         },
-        // Open
+        // open
         {
             name: nameof(x => x.open),
             args: {
@@ -18,12 +18,12 @@ const NvMenuDocs = {
             },
             template: (h("nv-menu", { "data-storybook-args": true, "data-class": "pb-20" }, h("nv-iconbutton", { slot: "trigger", name: "menu", shape: "rounded" }), h("ul", { slot: "content" }, h("nv-menuitem", { icon: "user", shortcut: "\u2318K", id: "user-settings", label: "User settings" }), h("nv-menuitem", { icon: "bulb", shortcut: "\u2318F", id: "find-all-items", label: "Find all items" })))),
         },
-        // Nested
+        // nested
         {
             name: nameof(x => x.nested),
             template: (h("nv-menu", { "data-storybook-args": true, "data-class": "pb-20" }, h("nv-iconbutton", { name: "menu", slot: "trigger", shape: "rounded" }), h("ul", { slot: "content" }, h("nv-menuitem", { icon: "adjustments-up", shortcut: "\u2318U", id: "up", disabled: true, label: "This is disabled" }), h("nv-menu", { nested: true, placement: "right-start" }, h("nv-menuitem", { slot: "trigger", "has-submenu": true, icon: "cloud", label: "Cloud Functions" }), h("ul", { slot: "content" }, h("nv-menuitem", { icon: "upload", id: "upload", label: "Upload" }), h("nv-menuitem", { icon: "download", id: "download", label: "Download" }), h("nv-menu", { nested: true, placement: "right-start" }, h("nv-menuitem", { slot: "trigger", "has-submenu": true, icon: "engine", label: "Even more functions?" }), h("ul", { slot: "content" }, h("nv-menuitem", { id: "deep", label: "Deeply nested" }), h("nv-menuitem", { id: "nav", label: "Have you tried keyboard navigation?" })))))))),
         },
-        // DisableCloseOnSelect
+        // disableCloseOnSelect
         {
             name: nameof(x => x.disableCloseOnSelect),
             args: {
@@ -31,7 +31,7 @@ const NvMenuDocs = {
             },
             template: (h("nv-menu", { "data-storybook-args": true, "data-class": "pb-20" }, h("nv-iconbutton", { name: "menu", slot: "trigger", shape: "rounded" }), h("ul", { slot: "content" }, h("nv-menuitem", { icon: "adjustments-up", id: "no-close", label: "Select Me, I won't close" }), h("nv-menuitem", { icon: "activity", id: "no-close-either", label: "Me neither" })))),
         },
-        // Placement
+        // placement
         {
             name: nameof(x => x.placement),
             args: {
@@ -39,7 +39,7 @@ const NvMenuDocs = {
             },
             template: (h("nv-menu", { "data-storybook-args": true, "data-class": "p-20 flex justify-center" }, h("nv-iconbutton", { name: "menu", slot: "trigger", shape: "rounded" }), h("ul", { slot: "content" }, h("nv-menuitem", { icon: "help", id: "help", label: "Where am I?" })))),
         },
-        // Items
+        // items
         {
             name: nameof(x => x.items),
             args: {
@@ -102,6 +102,18 @@ const NvMenuDocs = {
             description: 'Use an hr element to create a separator between menu items.',
             template: (h("nv-menu", { "data-storybook-args": true, "data-class": "pb-20" }, h("nv-iconbutton", { name: "menu", slot: "trigger", shape: "rounded" }), h("ul", { slot: "content" }, h("nv-menuitem", { icon: "upload", id: "upload", label: "Upload" }), h("nv-menuitem", { icon: "download", id: "download", label: "Download" }), h("hr", null), h("nv-menuitem", { icon: "bulb", shortcut: "\u2318F", id: "find-all-items", label: "Find all items" })))),
         },
+        // SlotTrigger
+        {
+            name: 'SlotTrigger',
+            description: 'The button element that toggles the menu popover.',
+            template: (h("nv-menu", { "data-class": "pb-20" }, h("nv-iconbutton", { slot: "trigger", name: "menu", shape: "rounded" }), h("ul", { slot: "content" }, h("nv-menuitem", { icon: "user", id: "user", label: "User" })))),
+        },
+        // SlotContent
+        {
+            name: 'SlotContent',
+            description: 'The content of the menu, should be wrapped in a ul element containing nv-menuitem elements.',
+            template: (h("nv-menu", { "data-class": "pb-20" }, h("nv-iconbutton", { slot: "trigger", name: "menu", shape: "rounded" }), h("ul", { slot: "content" }, h("nv-menuitem", { icon: "user", id: "user-settings", label: "User settings" }), h("nv-menuitem", { icon: "bulb", id: "find-all-items", label: "Find all items" })))),
+        },
     ],
 };
 export default NvMenuDocs;

package/dist/collection/components/nv-menu/nv-menu.docs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nv-menu.docs.js","sourceRoot":"","sources":["../../../../src/components/nv-menu/nv-menu.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvMenuDocs: NovaDocs<Components.NvMenu> = {\n component: 'nv-menu',\n subcomponents: ['nv-menuitem', 'nv-iconbutton'],\n composedComponents: ['nv-menuitem'],\n stories: [\n // Default\n {\n name: 'Default',\n template: (\n <nv-menu data-storybook-args data-class=\"pb-20\">\n <nv-iconbutton\n slot=\"trigger\"\n name=\"menu\"\n shape=\"rounded\"\n ></nv-iconbutton>\n <ul slot=\"content\">\n <nv-menuitem\n icon=\"user\"\n shortcut=\"⌘K\"\n id=\"user-settings\"\n label=\"User settings\"\n ></nv-menuitem>\n <nv-menuitem\n icon=\"bulb\"\n shortcut=\"⌘F\"\n id=\"find-all-items\"\n label=\"Find all items\"\n ></nv-menuitem>\n </ul>\n </nv-menu>\n ),\n },\n // Open\n {\n name: nameof<Components.NvMenu>(x => x.open),\n args: {\n open: true,\n },\n template: (\n <nv-menu data-storybook-args data-class=\"pb-20\">\n <nv-iconbutton\n slot=\"trigger\"\n name=\"menu\"\n shape=\"rounded\"\n ></nv-iconbutton>\n <ul slot=\"content\">\n <nv-menuitem\n icon=\"user\"\n shortcut=\"⌘K\"\n id=\"user-settings\"\n label=\"User settings\"\n ></nv-menuitem>\n <nv-menuitem\n icon=\"bulb\"\n shortcut=\"⌘F\"\n id=\"find-all-items\"\n label=\"Find all items\"\n ></nv-menuitem>\n </ul>\n </nv-menu>\n ),\n },\n // Nested\n {\n name: nameof<Components.NvMenu>(x => x.nested),\n template: (\n <nv-menu data-storybook-args data-class=\"pb-20\">\n <nv-iconbutton\n name=\"menu\"\n slot=\"trigger\"\n shape=\"rounded\"\n ></nv-iconbutton>\n <ul slot=\"content\">\n <nv-menuitem\n icon=\"adjustments-up\"\n shortcut=\"⌘U\"\n id=\"up\"\n disabled\n label=\"This is disabled\"\n ></nv-menuitem>\n <nv-menu nested placement=\"right-start\">\n <nv-menuitem\n slot=\"trigger\"\n has-submenu\n icon=\"cloud\"\n label=\"Cloud Functions\"\n ></nv-menuitem>\n <ul slot=\"content\">\n <nv-menuitem\n icon=\"upload\"\n id=\"upload\"\n label=\"Upload\"\n ></nv-menuitem>\n <nv-menuitem\n icon=\"download\"\n id=\"download\"\n label=\"Download\"\n ></nv-menuitem>\n <nv-menu nested placement=\"right-start\">\n <nv-menuitem\n slot=\"trigger\"\n has-submenu\n icon=\"engine\"\n label=\"Even more functions?\"\n ></nv-menuitem>\n <ul slot=\"content\">\n <nv-menuitem id=\"deep\" label=\"Deeply nested\"></nv-menuitem>\n <nv-menuitem\n id=\"nav\"\n label=\"Have you tried keyboard navigation?\"\n ></nv-menuitem>\n </ul>\n </nv-menu>\n </ul>\n </nv-menu>\n </ul>\n </nv-menu>\n ),\n },\n // DisableCloseOnSelect\n {\n name: nameof<Components.NvMenu>(x => x.disableCloseOnSelect),\n args: {\n disableCloseOnSelect: true,\n },\n template: (\n <nv-menu data-storybook-args data-class=\"pb-20\">\n <nv-iconbutton\n name=\"menu\"\n slot=\"trigger\"\n shape=\"rounded\"\n ></nv-iconbutton>\n <ul slot=\"content\">\n <nv-menuitem\n icon=\"adjustments-up\"\n id=\"no-close\"\n label=\"Select Me, I won't close\"\n ></nv-menuitem>\n <nv-menuitem\n icon=\"activity\"\n id=\"no-close-either\"\n label=\"Me neither\"\n ></nv-menuitem>\n </ul>\n </nv-menu>\n ),\n },\n // Placement\n {\n name: nameof<Components.NvMenu>(x => x.placement),\n args: {\n placement: 'top-start',\n },\n template: (\n <nv-menu data-storybook-args data-class=\"p-20 flex justify-center\">\n <nv-iconbutton\n name=\"menu\"\n slot=\"trigger\"\n shape=\"rounded\"\n ></nv-iconbutton>\n <ul slot=\"content\">\n <nv-menuitem\n icon=\"help\"\n id=\"help\"\n label=\"Where am I?\"\n ></nv-menuitem>\n </ul>\n </nv-menu>\n ),\n },\n // Items\n {\n name: nameof<Components.NvMenu>(x => x.items),\n args: {\n items: [\n {\n label: 'Paramètres',\n icon: 'settings',\n shortcut: '⌘S',\n value: 'settings',\n },\n {\n label: 'Options avancées',\n icon: 'adjustments',\n hasSubmenu: true,\n value: 'advanced',\n submenuItems: [\n {\n label: 'Configuration',\n icon: 'settings',\n value: 'config',\n },\n {\n label: 'Sécurité',\n icon: 'shield',\n hasSubmenu: true,\n value: 'security',\n submenuItems: [\n {\n label: 'Permissions',\n icon: 'lock',\n value: 'permissions',\n },\n {\n label: 'Authentification',\n icon: 'user',\n value: 'authentication',\n },\n ],\n },\n ],\n },\n {\n label: 'Profil',\n icon: 'user',\n value: 'profile',\n disabled: true,\n },\n {\n label: 'Déconnexion',\n icon: 'logout',\n value: 'logout',\n },\n ],\n },\n template: (\n <nv-menu data-storybook-args data-class=\"pb-20\">\n <nv-iconbutton\n slot=\"trigger\"\n name=\"menu\"\n shape=\"rounded\"\n ></nv-iconbutton>\n </nv-menu>\n ),\n },\n // Separator\n {\n name: 'Separator',\n description:\n 'Use an hr element to create a separator between menu items.',\n template: (\n <nv-menu data-storybook-args data-class=\"pb-20\">\n <nv-iconbutton\n name=\"menu\"\n slot=\"trigger\"\n shape=\"rounded\"\n ></nv-iconbutton>\n <ul slot=\"content\">\n <nv-menuitem icon=\"upload\" id=\"upload\" label=\"Upload\"></nv-menuitem>\n <nv-menuitem\n icon=\"download\"\n id=\"download\"\n label=\"Download\"\n ></nv-menuitem>\n <hr />\n <nv-menuitem\n icon=\"bulb\"\n shortcut=\"⌘F\"\n id=\"find-all-items\"\n label=\"Find all items\"\n ></nv-menuitem>\n </ul>\n </nv-menu>\n ),\n },\n ],\n};\n\nexport default NvMenuDocs;\n"]}
1	+ {"version":3,"file":"nv-menu.docs.js","sourceRoot":"","sources":["../../../../src/components/nv-menu/nv-menu.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvMenuDocs: NovaDocs<Components.NvMenu> = {\n component: 'nv-menu',\n subcomponents: ['nv-menuitem', 'nv-iconbutton'],\n composedComponents: ['nv-menuitem'],\n stories: [\n // Default\n {\n name: 'Default',\n template: (\n <nv-menu data-storybook-args data-class=\"pb-20\">\n <nv-iconbutton\n slot=\"trigger\"\n name=\"menu\"\n shape=\"rounded\"\n ></nv-iconbutton>\n <ul slot=\"content\">\n <nv-menuitem\n icon=\"user\"\n shortcut=\"⌘K\"\n id=\"user-settings\"\n label=\"User settings\"\n ></nv-menuitem>\n <nv-menuitem\n icon=\"bulb\"\n shortcut=\"⌘F\"\n id=\"find-all-items\"\n label=\"Find all items\"\n ></nv-menuitem>\n </ul>\n </nv-menu>\n ),\n },\n // open\n {\n name: nameof<Components.NvMenu>(x => x.open),\n args: {\n open: true,\n },\n template: (\n <nv-menu data-storybook-args data-class=\"pb-20\">\n <nv-iconbutton\n slot=\"trigger\"\n name=\"menu\"\n shape=\"rounded\"\n ></nv-iconbutton>\n <ul slot=\"content\">\n <nv-menuitem\n icon=\"user\"\n shortcut=\"⌘K\"\n id=\"user-settings\"\n label=\"User settings\"\n ></nv-menuitem>\n <nv-menuitem\n icon=\"bulb\"\n shortcut=\"⌘F\"\n id=\"find-all-items\"\n label=\"Find all items\"\n ></nv-menuitem>\n </ul>\n </nv-menu>\n ),\n },\n // nested\n {\n name: nameof<Components.NvMenu>(x => x.nested),\n template: (\n <nv-menu data-storybook-args data-class=\"pb-20\">\n <nv-iconbutton\n name=\"menu\"\n slot=\"trigger\"\n shape=\"rounded\"\n ></nv-iconbutton>\n <ul slot=\"content\">\n <nv-menuitem\n icon=\"adjustments-up\"\n shortcut=\"⌘U\"\n id=\"up\"\n disabled\n label=\"This is disabled\"\n ></nv-menuitem>\n <nv-menu nested placement=\"right-start\">\n <nv-menuitem\n slot=\"trigger\"\n has-submenu\n icon=\"cloud\"\n label=\"Cloud Functions\"\n ></nv-menuitem>\n <ul slot=\"content\">\n <nv-menuitem\n icon=\"upload\"\n id=\"upload\"\n label=\"Upload\"\n ></nv-menuitem>\n <nv-menuitem\n icon=\"download\"\n id=\"download\"\n label=\"Download\"\n ></nv-menuitem>\n <nv-menu nested placement=\"right-start\">\n <nv-menuitem\n slot=\"trigger\"\n has-submenu\n icon=\"engine\"\n label=\"Even more functions?\"\n ></nv-menuitem>\n <ul slot=\"content\">\n <nv-menuitem id=\"deep\" label=\"Deeply nested\"></nv-menuitem>\n <nv-menuitem\n id=\"nav\"\n label=\"Have you tried keyboard navigation?\"\n ></nv-menuitem>\n </ul>\n </nv-menu>\n </ul>\n </nv-menu>\n </ul>\n </nv-menu>\n ),\n },\n // disableCloseOnSelect\n {\n name: nameof<Components.NvMenu>(x => x.disableCloseOnSelect),\n args: {\n disableCloseOnSelect: true,\n },\n template: (\n <nv-menu data-storybook-args data-class=\"pb-20\">\n <nv-iconbutton\n name=\"menu\"\n slot=\"trigger\"\n shape=\"rounded\"\n ></nv-iconbutton>\n <ul slot=\"content\">\n <nv-menuitem\n icon=\"adjustments-up\"\n id=\"no-close\"\n label=\"Select Me, I won't close\"\n ></nv-menuitem>\n <nv-menuitem\n icon=\"activity\"\n id=\"no-close-either\"\n label=\"Me neither\"\n ></nv-menuitem>\n </ul>\n </nv-menu>\n ),\n },\n // placement\n {\n name: nameof<Components.NvMenu>(x => x.placement),\n args: {\n placement: 'top-start',\n },\n template: (\n <nv-menu data-storybook-args data-class=\"p-20 flex justify-center\">\n <nv-iconbutton\n name=\"menu\"\n slot=\"trigger\"\n shape=\"rounded\"\n ></nv-iconbutton>\n <ul slot=\"content\">\n <nv-menuitem\n icon=\"help\"\n id=\"help\"\n label=\"Where am I?\"\n ></nv-menuitem>\n </ul>\n </nv-menu>\n ),\n },\n // items\n {\n name: nameof<Components.NvMenu>(x => x.items),\n args: {\n items: [\n {\n label: 'Paramètres',\n icon: 'settings',\n shortcut: '⌘S',\n value: 'settings',\n },\n {\n label: 'Options avancées',\n icon: 'adjustments',\n hasSubmenu: true,\n value: 'advanced',\n submenuItems: [\n {\n label: 'Configuration',\n icon: 'settings',\n value: 'config',\n },\n {\n label: 'Sécurité',\n icon: 'shield',\n hasSubmenu: true,\n value: 'security',\n submenuItems: [\n {\n label: 'Permissions',\n icon: 'lock',\n value: 'permissions',\n },\n {\n label: 'Authentification',\n icon: 'user',\n value: 'authentication',\n },\n ],\n },\n ],\n },\n {\n label: 'Profil',\n icon: 'user',\n value: 'profile',\n disabled: true,\n },\n {\n label: 'Déconnexion',\n icon: 'logout',\n value: 'logout',\n },\n ],\n },\n template: (\n <nv-menu data-storybook-args data-class=\"pb-20\">\n <nv-iconbutton\n slot=\"trigger\"\n name=\"menu\"\n shape=\"rounded\"\n ></nv-iconbutton>\n </nv-menu>\n ),\n },\n // Separator\n {\n name: 'Separator',\n description:\n 'Use an hr element to create a separator between menu items.',\n template: (\n <nv-menu data-storybook-args data-class=\"pb-20\">\n <nv-iconbutton\n name=\"menu\"\n slot=\"trigger\"\n shape=\"rounded\"\n ></nv-iconbutton>\n <ul slot=\"content\">\n <nv-menuitem icon=\"upload\" id=\"upload\" label=\"Upload\"></nv-menuitem>\n <nv-menuitem\n icon=\"download\"\n id=\"download\"\n label=\"Download\"\n ></nv-menuitem>\n <hr />\n <nv-menuitem\n icon=\"bulb\"\n shortcut=\"⌘F\"\n id=\"find-all-items\"\n label=\"Find all items\"\n ></nv-menuitem>\n </ul>\n </nv-menu>\n ),\n },\n // SlotTrigger\n {\n name: 'SlotTrigger',\n description: 'The button element that toggles the menu popover.',\n template: (\n <nv-menu data-class=\"pb-20\">\n <nv-iconbutton\n slot=\"trigger\"\n name=\"menu\"\n shape=\"rounded\"\n ></nv-iconbutton>\n <ul slot=\"content\">\n <nv-menuitem icon=\"user\" id=\"user\" label=\"User\"></nv-menuitem>\n </ul>\n </nv-menu>\n ),\n },\n // SlotContent\n {\n name: 'SlotContent',\n description:\n 'The content of the menu, should be wrapped in a ul element containing nv-menuitem elements.',\n template: (\n <nv-menu data-class=\"pb-20\">\n <nv-iconbutton\n slot=\"trigger\"\n name=\"menu\"\n shape=\"rounded\"\n ></nv-iconbutton>\n <ul slot=\"content\">\n <nv-menuitem\n icon=\"user\"\n id=\"user-settings\"\n label=\"User settings\"\n ></nv-menuitem>\n <nv-menuitem\n icon=\"bulb\"\n id=\"find-all-items\"\n label=\"Find all items\"\n ></nv-menuitem>\n </ul>\n </nv-menu>\n ),\n },\n ],\n};\n\nexport default NvMenuDocs;\n"]}

package/dist/collection/components/nv-menu/nv-menu.js CHANGED Viewed

@@ -39,8 +39,7 @@ export class NvMenu {
          */
         this.renderMenuItems = () => {
             return this.items.map(item => {
-                var _a;
-                if (item.hasSubmenu && ((_a = item.submenuItems) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                if (item.hasSubmenu && item.submenuItems?.length > 0) {
                     return (h("nv-menu", { nested: true, placement: "right-start", items: item.submenuItems }, h("nv-menuitem", { slot: "trigger", hasSubmenu: true, disabled: item.disabled, icon: item.icon, shortcut: item.shortcut, id: item.value, name: item.label, label: item.label, onMenuitemSelected: e => this.menuitemSelected.emit(e.detail) })));
                 }
                 return (h("nv-menuitem", { disabled: item.disabled, icon: item.icon, shortcut: item.shortcut, id: item.value, name: item.label, label: item.label, onMenuitemSelected: e => this.menuitemSelected.emit(e.detail) }));
@@ -123,7 +122,7 @@ export class NvMenu {
             return;
         }
         const menuContent = this.el.querySelector('[slot="content"]');
-        const menuItems = Array.from(menuContent.childNodes).filter(item => { var _a; return (_a = item.matches) === null || _a === void 0 ? void 0 : _a.call(item, 'nv-menuitem, nv-menu'); });
+        const menuItems = Array.from(menuContent.childNodes).filter(item => item.matches?.('nv-menuitem, nv-menu'));
         let currentIndex = menuItems.indexOf(document.activeElement);
         if (currentIndex === -1)
             currentIndex = menuItems.indexOf(document.activeElement.parentElement);
@@ -191,7 +190,7 @@ export class NvMenu {
         });
     }
     render() {
-        return (h(Host, { key: '1602501e810755ef8a625ea566203eaae32c52e7' }, h("slot", { key: '7a2b75f51e33820f5f608a44efc5b9659af54789', name: "trigger" }), h("nv-popover", { key: '2ac84fe36a9844dcf58f9f8d87fec16ae25c35b6', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open, onOpenChanged: this.handleOpenChanged.bind(this) }, this.items ? (h("ul", { slot: "content" }, this.renderMenuItems())) : (h("slot", { name: "content" })))));
+        return (h(Host, { key: '1139a5dbbbb52e2f32c5d1410b4bdb87156cfd60' }, h("slot", { key: 'f2202b254512643f0a16ebcda3715438a7c7aa2a', name: "trigger" }), h("nv-popover", { key: '2f49bd9af8ff253ab662b5054717e0d44690f47d', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open, onOpenChanged: this.handleOpenChanged.bind(this) }, this.items ? (h("ul", { slot: "content" }, this.renderMenuItems())) : (h("slot", { name: "content" })))));
     }
     static get is() { return "nv-menu"; }
     static get originalStyleUrls() {

package/dist/collection/components/nv-menu/nv-menu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nv-menu.js","sourceRoot":"","sources":["../../../../src/components/nv-menu/nv-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Listen,\n Event,\n EventEmitter,\n Method,\n} from '@stencil/core';\nimport type { Placement } from '@floating-ui/dom';\nimport { IconName } from '../nv-icon/nv-icons';\n\n/*\n @slot trigger - The button element that toggles the menu popover\n * @slot content - The content of the menu, should be wrapped in a ul element containing nv-menuitem elements\n /\n@Component({\n tag: 'nv-menu',\n styleUrl: 'nv-menu.scss',\n shadow: false,\n})\nexport class NvMenu {\n @Element() el: HTMLNvMenuElement;\n private triggerElement!: HTMLElement;\n private popoverElement!: HTMLNvPopoverElement;\n private isHandlingKeyDown: boolean = false;\n\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Use this to toggle the initial visibility of the menu, by default the menu\n * is hidden.\n /\n @Prop({ reflect: true, mutable: true })\n open: boolean = false;\n\n /\n Use this if the menu is nested inside another menu. This will prevent the\n * parent menu from closing when the child menu is opened.\n /\n @Prop({ reflect: true })\n readonly nested: boolean = false;\n\n /\n Use this to disable the menu from closing automatically when a menu item is\n * selected.\n /\n @Prop({ reflect: true })\n readonly disableCloseOnSelect: boolean = false;\n\n /\n Decides where the menu shows up next to the button it's linked to (above,\n * below, to the sides). If there isn't enough room, it will adjust its\n * position on the axis to fit on the screen, so users can always see it.\n /\n @Prop({ reflect: true })\n readonly placement: Placement = 'bottom-start';\n\n /\n List of items used to automatically generate dropdown items. This\n * provides an alternative to using the slot manually.\n \n @example\n * items = [{\n * \"label\": \"Option 1\",\n * \"value\": \"option1\",\n * },\n * {\n * \"label\": \"Option 2\",\n * \"value\": \"option2\",\n * }]\n /\n @Prop({ reflect: true })\n readonly items?: {\n /\n The label of the menu item.\n /\n label: string;\n /\n The value of the menu item.\n /\n value?: string;\n /\n Whether the menu item is disabled.\n /\n disabled?: boolean;\n /\n Whether the menu item has a submenu.\n /\n hasSubmenu?: boolean;\n /\n The icon of the menu item.\n /\n icon?: string;\n /\n The shortcut of the menu item.\n /\n shortcut?: string;\n /\n Whether the menu item is nested.\n /\n nested?: boolean;\n /\n The submenu items of the menu item.\n /\n submenuItems?: InstanceType<typeof NvMenu>['items'];\n }[];\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region METHODS\n\n /\n * Opens the menu.\n /\n @Method()\n async show() {\n this.open = true;\n }\n\n /\n Closes the menu.\n /\n @Method()\n async close() {\n this.open = false;\n }\n\n private focusFirstItem() {\n const firstButton = this.popoverElement.querySelector('nv-menuitem');\n if (firstButton) {\n requestAnimationFrame(() => firstButton.focus());\n }\n }\n\n private handleOpenChanged(event: CustomEvent<boolean>) {\n this.open = event.detail;\n const triggerHasFocus = this.triggerElement === document.activeElement;\n const triggerHasFocusVisible =\n this.triggerElement.matches(':focus-visible');\n if (triggerHasFocus && triggerHasFocusVisible) this.focusFirstItem();\n }\n\n //#endregion METHODS\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emitted from nv-menuitem elements with the corresponding id and name when\n * selected (via click or keyboard). This event listener can be attached to\n * either the nv-menu or the nv-menuitem element.\n /\n @Event({ bubbles: false })\n menuitemSelected: EventEmitter<\n HTMLNvMenuitemElementEventMap['menuitemSelected']\n >;\n\n //#endregion EVENTS\n /**************************************************************************/\n //#region LISTENERS\n\n / eslint-disable nova/native-event-listener /\n @Listen('menuitemSelected')\n handleMenuItemSelect(\n event: CustomEvent<HTMLNvMenuitemElementEventMap['menuitemSelected']>,\n ) {\n if (this.disableCloseOnSelect) return;\n if (event.detail.hasSubmenu) return;\n this.open = false;\n }\n / eslint-enable nova/native-event-listener /\n\n @Listen('keydown', { passive: false })\n handleKeydown(event: KeyboardEvent) {\n // If the menu is not open, check if the trigger is focused\n // and the user presses Enter or ArrowDown, open the menu\n if (!this.open) {\n if (\n (event.key === 'Enter' \|\|\n event.key === 'ArrowDown' \|\|\n event.key === ' ') &&\n document.activeElement === this.triggerElement\n ) {\n event.preventDefault();\n this.show();\n this.focusFirstItem();\n // Then, put the focus on the first menuitem\n const firstMenuItem = this.popoverElement.querySelector('nv-menuitem');\n if (firstMenuItem) {\n requestAnimationFrame(() => (firstMenuItem as HTMLElement).focus());\n }\n }\n return;\n }\n\n if (this.isHandlingKeyDown) return;\n this.isHandlingKeyDown = true;\n\n if (\n event.key === 'ArrowDown' \|\|\n event.key === 'ArrowUp' \|\|\n event.key === 'ArrowLeft' \|\|\n event.key === 'ArrowRight' \|\|\n event.key === 'Escape'\n ) {\n event.preventDefault();\n }\n\n if (event.key === 'Escape' && !this.nested) {\n this.close();\n this.triggerElement.focus();\n this.isHandlingKeyDown = false;\n return;\n }\n\n const menuContent = this.el.querySelector('[slot=\"content\"]');\n const menuItems = (\n Array.from(menuContent.childNodes) as Array<\n HTMLNvMenuitemElement \| HTMLNvMenuElement\n >\n ).filter(item => item.matches?.('nv-menuitem, nv-menu'));\n\n let currentIndex = menuItems.indexOf(\n document.activeElement as HTMLNvMenuitemElement,\n );\n if (currentIndex === -1)\n currentIndex = menuItems.indexOf(\n document.activeElement.parentElement as HTMLNvMenuitemElement,\n );\n if (\n currentIndex === -1 &&\n menuItems.find(item => item.matches('nv-menu[open]'))\n ) {\n this.isHandlingKeyDown = false;\n return;\n }\n\n if (event.key === 'ArrowDown' \|\| event.key === 'ArrowUp') {\n menuItems.forEach(item => {\n if (item.matches('nv-menu')) (item as HTMLNvMenuElement).close();\n });\n }\n\n if (event.key === 'ArrowDown') {\n let nextIndex = (currentIndex + 1) % menuItems.length;\n while (menuItems[nextIndex].matches('nv-menuitem[disabled]')) {\n nextIndex = (nextIndex + 1) % menuItems.length;\n }\n const nextFocusable = menuItems[nextIndex];\n if (nextFocusable.matches('nv-menuitem')) {\n nextFocusable.focus();\n } else if (nextFocusable.matches('nv-menu')) {\n nextFocusable.querySelector('nv-menuitem').focus();\n }\n }\n\n if (event.key === 'ArrowUp') {\n let prevIndex = (currentIndex - 1 + menuItems.length) % menuItems.length;\n while (menuItems[prevIndex].matches('nv-menuitem[disabled]')) {\n prevIndex = (prevIndex - 1 + menuItems.length) % menuItems.length;\n }\n const prevFocusable = menuItems[prevIndex];\n if (prevFocusable.matches('nv-menuitem')) {\n prevFocusable.focus();\n } else if (prevFocusable.matches('nv-menu')) {\n prevFocusable.querySelector('nv-menuitem').focus();\n }\n }\n\n if (event.key === 'ArrowRight') {\n const submenu = menuItems[currentIndex];\n if (!submenu.matches('nv-menu')) {\n this.isHandlingKeyDown = false;\n return;\n }\n (submenu as HTMLNvMenuElement).show();\n }\n\n if (event.key === 'ArrowLeft' && this.nested) {\n if (menuItems.find(item => item.matches('nv-menu[open]'))) {\n this.isHandlingKeyDown = false;\n return;\n }\n this.close();\n this.triggerElement.focus();\n }\n\n this.isHandlingKeyDown = false;\n }\n\n //#endregion LISTENERS\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n this.triggerElement = Array.from(this.el.children).find(child => {\n return child.getAttribute('slot') === 'trigger';\n }) as HTMLElement;\n }\n\n //#endregion LIFECYCLE\n /************************************************************************/\n //#region RENDER\n\n /\n * Generates menu items from the `items` property.\n * @param {MenuItem[]} items - The items to display in the menu.\n * @returns {HTMLElement[]} The rendered items.\n */\n private renderMenuItems = () => {\n return this.items.map(item => {\n if (item.hasSubmenu && item.submenuItems?.length > 0) {\n return (\n <nv-menu nested placement=\"right-start\" items={item.submenuItems}>\n <nv-menuitem\n slot=\"trigger\"\n hasSubmenu\n disabled={item.disabled}\n icon={item.icon as IconName}\n shortcut={item.shortcut}\n id={item.value}\n name={item.label}\n label={item.label}\n onMenuitemSelected={e => this.menuitemSelected.emit(e.detail)}\n ></nv-menuitem>\n </nv-menu>\n );\n }\n return (\n <nv-menuitem\n disabled={item.disabled}\n icon={item.icon as IconName}\n shortcut={item.shortcut}\n id={item.value}\n name={item.label}\n label={item.label}\n onMenuitemSelected={e => this.menuitemSelected.emit(e.detail)}\n ></nv-menuitem>\n );\n });\n };\n\n render() {\n return (\n <Host>\n <slot name=\"trigger\"></slot>\n <nv-popover\n ref={el => (this.popoverElement = el)}\n triggerMode=\"click\"\n triggerElement={this.triggerElement}\n placement={this.placement}\n nested={this.nested}\n open={this.open}\n onOpenChanged={this.handleOpenChanged.bind(this)}\n >\n {this.items ? (\n <ul slot=\"content\">{this.renderMenuItems()}</ul>\n ) : (\n <slot name=\"content\"></slot>\n )}\n </nv-popover>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"]}
1	+ {"version":3,"file":"nv-menu.js","sourceRoot":"","sources":["../../../../src/components/nv-menu/nv-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Listen,\n Event,\n EventEmitter,\n Method,\n} from '@stencil/core';\nimport type { Placement } from '@floating-ui/dom';\nimport { IconName } from '../nv-icon/nv-icons';\n\n/*\n @slot trigger - The button element that toggles the menu popover\n * @slot content - The content of the menu, should be wrapped in a ul element containing nv-menuitem elements\n /\n@Component({\n tag: 'nv-menu',\n styleUrl: 'nv-menu.scss',\n shadow: false,\n})\nexport class NvMenu {\n @Element() el: HTMLNvMenuElement;\n private triggerElement!: HTMLElement;\n private popoverElement!: HTMLNvPopoverElement;\n private isHandlingKeyDown: boolean = false;\n\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Use this to toggle the initial visibility of the menu, by default the menu\n * is hidden.\n /\n @Prop({ reflect: true, mutable: true })\n open: boolean = false;\n\n /\n Use this if the menu is nested inside another menu. This will prevent the\n * parent menu from closing when the child menu is opened.\n /\n @Prop({ reflect: true })\n readonly nested: boolean = false;\n\n /\n Use this to disable the menu from closing automatically when a menu item is\n * selected.\n /\n @Prop({ reflect: true })\n readonly disableCloseOnSelect: boolean = false;\n\n /\n Decides where the menu shows up next to the button it's linked to (above,\n * below, to the sides). If there isn't enough room, it will adjust its\n * position on the axis to fit on the screen, so users can always see it.\n /\n @Prop({ reflect: true })\n readonly placement: Placement = 'bottom-start';\n\n /\n List of items used to automatically generate dropdown items. This\n * provides an alternative to using the slot manually.\n \n @example\n * items = [{\n * \"label\": \"Option 1\",\n * \"value\": \"option1\",\n * },\n * {\n * \"label\": \"Option 2\",\n * \"value\": \"option2\",\n * }]\n /\n @Prop({ reflect: true })\n readonly items?: {\n /\n The label of the menu item.\n /\n label: string;\n /\n The value of the menu item.\n /\n value?: string;\n /\n Whether the menu item is disabled.\n /\n disabled?: boolean;\n /\n Whether the menu item has a submenu.\n /\n hasSubmenu?: boolean;\n /\n The icon of the menu item.\n /\n icon?: string;\n /\n The shortcut of the menu item.\n /\n shortcut?: string;\n /\n Whether the menu item is nested.\n /\n nested?: boolean;\n /\n The submenu items of the menu item.\n /\n submenuItems?: InstanceType<typeof NvMenu>['items'];\n }[];\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region METHODS\n\n /\n * Opens the menu.\n /\n @Method()\n async show() {\n this.open = true;\n }\n\n /\n Closes the menu.\n /\n @Method()\n async close() {\n this.open = false;\n }\n\n private focusFirstItem() {\n const firstButton = this.popoverElement.querySelector('nv-menuitem');\n if (firstButton) {\n requestAnimationFrame(() => firstButton.focus());\n }\n }\n\n private handleOpenChanged(event: CustomEvent<boolean>) {\n this.open = event.detail;\n const triggerHasFocus = this.triggerElement === document.activeElement;\n const triggerHasFocusVisible =\n this.triggerElement.matches(':focus-visible');\n if (triggerHasFocus && triggerHasFocusVisible) this.focusFirstItem();\n }\n\n //#endregion METHODS\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emitted from nv-menuitem elements with the corresponding id and name when\n * selected (via click or keyboard). This event listener can be attached to\n * either the nv-menu or the nv-menuitem element.\n /\n @Event({ bubbles: false })\n menuitemSelected: EventEmitter<\n HTMLNvMenuitemElementEventMap['menuitemSelected']\n >;\n\n //#endregion EVENTS\n /**************************************************************************/\n //#region LISTENERS\n\n / eslint-disable nova/native-event-listener /\n @Listen('menuitemSelected')\n handleMenuItemSelect(\n event: CustomEvent<HTMLNvMenuitemElementEventMap['menuitemSelected']>,\n ) {\n if (this.disableCloseOnSelect) return;\n if (event.detail.hasSubmenu) return;\n this.open = false;\n }\n / eslint-enable nova/native-event-listener /\n\n @Listen('keydown', { passive: false })\n handleKeydown(event: KeyboardEvent) {\n // If the menu is not open, check if the trigger is focused\n // and the user presses Enter or ArrowDown, open the menu\n if (!this.open) {\n if (\n (event.key === 'Enter' \|\|\n event.key === 'ArrowDown' \|\|\n event.key === ' ') &&\n document.activeElement === this.triggerElement\n ) {\n event.preventDefault();\n this.show();\n this.focusFirstItem();\n // Then, put the focus on the first menuitem\n const firstMenuItem = this.popoverElement.querySelector('nv-menuitem');\n if (firstMenuItem) {\n requestAnimationFrame(() => (firstMenuItem as HTMLElement).focus());\n }\n }\n return;\n }\n\n if (this.isHandlingKeyDown) return;\n this.isHandlingKeyDown = true;\n\n if (\n event.key === 'ArrowDown' \|\|\n event.key === 'ArrowUp' \|\|\n event.key === 'ArrowLeft' \|\|\n event.key === 'ArrowRight' \|\|\n event.key === 'Escape'\n ) {\n event.preventDefault();\n }\n\n if (event.key === 'Escape' && !this.nested) {\n this.close();\n this.triggerElement.focus();\n this.isHandlingKeyDown = false;\n return;\n }\n\n const menuContent = this.el.querySelector('[slot=\"content\"]');\n const menuItems = (\n Array.from(menuContent.childNodes) as Array<\n HTMLNvMenuitemElement \| HTMLNvMenuElement\n >\n ).filter(item => item.matches?.('nv-menuitem, nv-menu'));\n\n let currentIndex = menuItems.indexOf(\n document.activeElement as HTMLNvMenuitemElement,\n );\n if (currentIndex === -1)\n currentIndex = menuItems.indexOf(\n document.activeElement.parentElement as HTMLNvMenuitemElement,\n );\n if (\n currentIndex === -1 &&\n menuItems.find(item => item.matches('nv-menu[open]'))\n ) {\n this.isHandlingKeyDown = false;\n return;\n }\n\n if (event.key === 'ArrowDown' \|\| event.key === 'ArrowUp') {\n menuItems.forEach(item => {\n if (item.matches('nv-menu')) (item as HTMLNvMenuElement).close();\n });\n }\n\n if (event.key === 'ArrowDown') {\n let nextIndex = (currentIndex + 1) % menuItems.length;\n while (menuItems[nextIndex].matches('nv-menuitem[disabled]')) {\n nextIndex = (nextIndex + 1) % menuItems.length;\n }\n const nextFocusable = menuItems[nextIndex];\n if (nextFocusable.matches('nv-menuitem')) {\n nextFocusable.focus();\n } else if (nextFocusable.matches('nv-menu')) {\n nextFocusable.querySelector('nv-menuitem').focus();\n }\n }\n\n if (event.key === 'ArrowUp') {\n let prevIndex = (currentIndex - 1 + menuItems.length) % menuItems.length;\n while (menuItems[prevIndex].matches('nv-menuitem[disabled]')) {\n prevIndex = (prevIndex - 1 + menuItems.length) % menuItems.length;\n }\n const prevFocusable = menuItems[prevIndex];\n if (prevFocusable.matches('nv-menuitem')) {\n prevFocusable.focus();\n } else if (prevFocusable.matches('nv-menu')) {\n prevFocusable.querySelector('nv-menuitem').focus();\n }\n }\n\n if (event.key === 'ArrowRight') {\n const submenu = menuItems[currentIndex];\n if (!submenu.matches('nv-menu')) {\n this.isHandlingKeyDown = false;\n return;\n }\n (submenu as HTMLNvMenuElement).show();\n }\n\n if (event.key === 'ArrowLeft' && this.nested) {\n if (menuItems.find(item => item.matches('nv-menu[open]'))) {\n this.isHandlingKeyDown = false;\n return;\n }\n this.close();\n this.triggerElement.focus();\n }\n\n this.isHandlingKeyDown = false;\n }\n\n //#endregion LISTENERS\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n this.triggerElement = Array.from(this.el.children).find(child => {\n return child.getAttribute('slot') === 'trigger';\n }) as HTMLElement;\n }\n\n //#endregion LIFECYCLE\n /************************************************************************/\n //#region RENDER\n\n /\n * Generates menu items from the `items` property.\n * @param {MenuItem[]} items - The items to display in the menu.\n * @returns {HTMLElement[]} The rendered items.\n */\n private renderMenuItems = () => {\n return this.items.map(item => {\n if (item.hasSubmenu && item.submenuItems?.length > 0) {\n return (\n <nv-menu nested placement=\"right-start\" items={item.submenuItems}>\n <nv-menuitem\n slot=\"trigger\"\n hasSubmenu\n disabled={item.disabled}\n icon={item.icon as IconName}\n shortcut={item.shortcut}\n id={item.value}\n name={item.label}\n label={item.label}\n onMenuitemSelected={e => this.menuitemSelected.emit(e.detail)}\n ></nv-menuitem>\n </nv-menu>\n );\n }\n return (\n <nv-menuitem\n disabled={item.disabled}\n icon={item.icon as IconName}\n shortcut={item.shortcut}\n id={item.value}\n name={item.label}\n label={item.label}\n onMenuitemSelected={e => this.menuitemSelected.emit(e.detail)}\n ></nv-menuitem>\n );\n });\n };\n\n render() {\n return (\n <Host>\n <slot name=\"trigger\"></slot>\n <nv-popover\n ref={el => (this.popoverElement = el)}\n triggerMode=\"click\"\n triggerElement={this.triggerElement}\n placement={this.placement}\n nested={this.nested}\n open={this.open}\n onOpenChanged={this.handleOpenChanged.bind(this)}\n >\n {this.items ? (\n <ul slot=\"content\">{this.renderMenuItems()}</ul>\n ) : (\n <slot name=\"content\"></slot>\n )}\n </nv-popover>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"]}

package/dist/collection/components/nv-menuitem/nv-menuitem.js CHANGED Viewed

@@ -44,7 +44,7 @@ export class NvMenuitem {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '3c9a394f8af5ab7b57061ddfdd3e07b9fce17847', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && h("nv-icon", { key: '3f36901afb278a608f8eaeb423e8aca08c055187', name: this.icon }), h("slot", { key: 'a54ca41926c4f9374af669125529befc6ab454e2' }), this.label && h("span", { key: 'c83199ffd4e5559b22d06392edf5ad6c8e83cf96', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && h("kbd", { key: 'c7a052d69c1d8cd33238f9f88405596a46649e3c' }, this.shortcut), this.hasSubmenu && h("nv-icon", { key: '57de548ca08d6fb045223f242dee568a29b6270f', name: "chevron-right" })));
+        return (h(Host, { key: 'e21f532b90f018810befe6a03ef4cb75fe05aea2', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && h("nv-icon", { key: 'a63bdcae06b1311440ec95ecf002a8b9a130aea8', name: this.icon }), h("slot", { key: 'f25c0104369b8d70ce35d4bf74cf92c1bcdf66c6' }), this.label && h("span", { key: '5ab5691b53857876c8e13e91f975b41e255999da', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && h("kbd", { key: 'c93777342da74e2cba4dfbbdf6657814b3996f41' }, this.shortcut), this.hasSubmenu && h("nv-icon", { key: '87a58745651c54efb1c96841846363e377ee6fca', name: "chevron-right" })));
     }
     static get is() { return "nv-menuitem"; }
     static get originalStyleUrls() {
@@ -83,7 +83,7 @@ export class NvMenuitem {
                 "mutable": false,
                 "complexType": {
                     "original": "`${IconName}`",
-                    "resolved": "\"home\" | \"photo\" | \"map\" | \"filter\" | \"access-point-off\" | \"access-point\" | \"accessible\" | \"activity\" | \"address-book\" | \"adjustments-horizontal\" | \"adjustments-up\" | \"adjustments\" | \"affiliate\" | \"air-conditioning\" | \"alert-circle\" | \"alert-square-rounded\" | \"alert-triangle\" | \"align-center\" | \"align-left\" | \"align-right\" | \"app-window\" | \"apps\" | \"archive\" | \"areas\" | \"arrow-back-up\" | \"arrow-back\" | \"arrow-down-left\" | \"arrow-down-right\" | \"arrow-down\" | \"arrow-forward-up\" | \"arrow-forward\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up-left\" | \"arrow-up-right\" | \"arrow-up\" | \"arrows-diagonal\" | \"arrows-exchange\" | \"arrows-maximize\" | \"arrows-minimize\" | \"arrows-move\" | \"aspect-ratio\" | \"atom\" | \"ban\" | \"basket\" | \"battery-1\" | \"battery-2\" | \"battery-3\" | \"battery-4\" | \"battery-automotive\" | \"battery-charging\" | \"battery-eco\" | \"battery-off\" | \"battery\" | \"bell-bolt\" | \"bell-off\" | \"bell-ringing\" | \"bell\" | \"bike\" | \"bluetooth-connected\" | \"bluetooth-off\" | \"bluetooth\" | \"bolt-off\" | \"bolt\" | \"book\" | \"bookmark-off\" | \"bookmark\" | \"bookmarks\" | \"box-align-top\" | \"box-multiple\" | \"brand-facebook\" | \"brand-instagram\" | \"brand-linkedin\" | \"brand-x\" | \"brand-youtube\" | \"briefcase\" | \"brightness-down\" | \"brightness-up\" | \"browser-check\" | \"browser-plus\" | \"browser-x\" | \"browser\" | \"brush\" | \"building-bank\" | \"building-factory\" | \"building-lighthouse\" | \"building-store\" | \"building\" | \"bulb-off\" | \"bulb\" | \"cake\" | \"calendar-time\" | \"calendar\" | \"camera-off\" | \"camera\" | \"car-crane\" | \"car\" | \"caravan\" | \"cash-banknote\" | \"cash\" | \"cast\" | \"cell\" | \"charging-pile\" | \"chart-arcs\" | \"chart-area-line\" | \"chart-area\" | \"chart-arrows-vertical\" | \"chart-arrows\" | \"chart-bar\" | \"chart-bubble\" | \"chart-circles\" | \"chart-donut\" | \"chart-dots\" | \"chart-line\" | \"chart-pie\" | \"chart-radar\" | \"check\" | \"checkbox\" | \"checklist\" | \"checks\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-top\" | \"chevrons-left\" | \"chevrons-right\" | \"circle-caret-right\" | \"circle-check\" | \"circle-x\" | \"circuit-alternate\" | \"circuit-ground-digital\" | \"clipboard-check\" | \"clipboard-list\" | \"clipboard-plus\" | \"clipboard-text\" | \"clipboard-x\" | \"clipboard\" | \"clock-edit\" | \"clock\" | \"cloud-data-connection\" | \"cloud-download\" | \"cloud-rain\" | \"cloud-snow\" | \"cloud-upload\" | \"cloud\" | \"color-picker\" | \"color-swatch\" | \"columns-1\" | \"columns-2\" | \"columns-3\" | \"compass\" | \"contract\" | \"cookie\" | \"copy\" | \"cpu\" | \"crane\" | \"credit-card\" | \"crop\" | \"cross\" | \"crown\" | \"currency-bitcoin\" | \"currency-dollar\" | \"currency-ethereum\" | \"currency-euro\" | \"cut\" | \"dashboard\" | \"database\" | \"device-desktop\" | \"device-floppy\" | \"device-gamepad\" | \"device-laptop\" | \"device-mobile-rotated\" | \"device-mobile\" | \"device-tablet\" | \"device-watch\" | \"devices\" | \"dialpad\" | \"direction-horizontal\" | \"direction-sign\" | \"direction\" | \"discount\" | \"door-enter\" | \"door-exit\" | \"door-off\" | \"dots-vertical\" | \"dots\" | \"download\" | \"drone\" | \"droplet-filled\" | \"droplet-half\" | \"droplet\" | \"droplets\" | \"edit\" | \"empty\" | \"engine\" | \"equal-not\" | \"eraser-off\" | \"eraser\" | \"external-link\" | \"eye-off\" | \"eye\" | \"face-id\" | \"feather\" | \"file-alert\" | \"file-analytics\" | \"file-check\" | \"file-code\" | \"file-download\" | \"file-export\" | \"file-horizontal\" | \"file-import\" | \"file-plus\" | \"file-search\" | \"file-text-bookmark\" | \"file-text\" | \"file-type-bmp\" | \"file-type-css\" | \"file-type-csv\" | \"file-type-doc\" | \"file-type-html\" | \"file-type-jpg\" | \"file-type-js\" | \"file-type-pdf\" | \"file-type-png\" | \"file-type-ppt\" | \"file-type-xls\" | \"file-type-xml\" | \"file-type-zip\" | \"file-upload\" | \"file-x\" | \"file-zip\" | \"file\" | \"files-off\" | \"files\" | \"filter-off\" | \"filter-sort\" | \"fingerprint\" | \"fire-extinguisher\" | \"flag\" | \"flame\" | \"flip-horizontal\" | \"flip-vertical\" | \"folder-minus\" | \"folder-off\" | \"folder-plus\" | \"folder-x\" | \"folder\" | \"folders\" | \"frame\" | \"gas-station\" | \"gauge-off\" | \"gauge\" | \"gift\" | \"git-branch-delete\" | \"git-branch\" | \"git-cherry-pick\" | \"git-commit\" | \"git-compare\" | \"git-fork\" | \"git-merge\" | \"git-pull-request-closed\" | \"git-pull-request-draft\" | \"git-pull-request\" | \"gps\" | \"grid-dots\" | \"grip-horizontal\" | \"grip-vertical\" | \"hand-stop\" | \"hand-waving\" | \"hash\" | \"haze\" | \"headphones-off\" | \"headphones\" | \"headset\" | \"heart-off\" | \"heart\" | \"heartbeat\" | \"helicopter\" | \"helmet-swopp\" | \"helmet\" | \"help\" | \"history\" | \"hourglass-empty\" | \"hourglass-high\" | \"hourglass-low\" | \"hourglass-off\" | \"hourglass\" | \"inbox\" | \"info-circle\" | \"keyboard-hide\" | \"keyboard-show\" | \"keyboard\" | \"layout-board-split\" | \"layout-dashboard\" | \"layout-grid\" | \"layout-sidebar-left-collapse\" | \"layout-sidebar-left-expand\" | \"layout-sidebar-right-collapse\" | \"layout-sidebar-right-expand\" | \"layout\" | \"leaf\" | \"lifebuoy\" | \"link\" | \"list-search\" | \"list\" | \"loader\" | \"location\" | \"lock-off\" | \"lock-open\" | \"lock\" | \"login\" | \"logout\" | \"mail-forward\" | \"mail-opened\" | \"mail\" | \"map-pin-2\" | \"map-pin-off\" | \"map-pin\" | \"master-data\" | \"menu\" | \"message-dots\" | \"message-off\" | \"message\" | \"messages\" | \"microphone-off\" | \"microphone\" | \"minus\" | \"mist\" | \"moon\" | \"motorbike\" | \"mouse\" | \"movie\" | \"network\" | \"news\" | \"note\" | \"notebook\" | \"notes\" | \"offshore-station\" | \"package\" | \"palette\" | \"paperclip\" | \"pencil\" | \"phone-call\" | \"phone-calling\" | \"phone-check\" | \"phone-incoming\" | \"phone-off\" | \"phone-outgoing\" | \"phone\" | \"photo-off\" | \"pig\" | \"pin\" | \"pinned-off\" | \"pinned\" | \"plane-off\" | \"plane\" | \"plant\" | \"player-pause\" | \"player-play\" | \"player-skip-back\" | \"player-skip-forward\" | \"player-stop\" | \"player-track-next\" | \"player-track-prev\" | \"plug-connected\" | \"plug\" | \"plus\" | \"power-ac\" | \"power-dc\" | \"power\" | \"presentation-analytics\" | \"presentation\" | \"printer\" | \"propeller\" | \"published\" | \"puzzle-2\" | \"puzzle\" | \"pylon\" | \"qrcode\" | \"quotes-open\" | \"quotes\" | \"radar\" | \"radio\" | \"radioactive\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt\" | \"recharging\" | \"recycle\" | \"refresh-alert\" | \"refresh-off\" | \"refresh\" | \"repeat-once\" | \"repeat\" | \"replace\" | \"report-analytics\" | \"report-medical\" | \"report-search\" | \"report\" | \"ripple-off\" | \"ripple\" | \"rocket\" | \"rotate-2\" | \"rotate-clockwise-2\" | \"rotate-clockwise\" | \"rotate-dot\" | \"rotate\" | \"router\" | \"ruler-measure\" | \"sailboat\" | \"satellite\" | \"scale\" | \"school\" | \"scissors\" | \"scooter-electric\" | \"screenshot\" | \"search\" | \"seeding\" | \"select\" | \"selector\" | \"send\" | \"server\" | \"settings\" | \"shape\" | \"share-2\" | \"share\" | \"shield-check\" | \"shield-lock\" | \"shield-off\" | \"shield-x\" | \"shield\" | \"ship-off\" | \"ship\" | \"shopping-cart\" | \"sitemap\" | \"slash\" | \"smart-home\" | \"snowflake\" | \"solar-panel\" | \"sort-ascending-letters\" | \"sort-ascending-numbers\" | \"sort-descending-letters\" | \"sort-descending-numbers\" | \"spacing-horizontal\" | \"spacing-vertical\" | \"sparkles\" | \"speakerphone\" | \"stack\" | \"stairs\" | \"star\" | \"sun\" | \"sunrise\" | \"sunset\" | \"switch-horizontal\" | \"switch-vertical\" | \"table\" | \"tag\" | \"tank-empty-fill\" | \"tank-full-fill\" | \"tank-medium-fill\" | \"temperature-off\" | \"temperature\" | \"template\" | \"terminal\" | \"text-size\" | \"text\" | \"thumb-down\" | \"thumb-up\" | \"ticket\" | \"timeline\" | \"tir\" | \"tool\" | \"tools\" | \"train\" | \"trash-off\" | \"trash\" | \"tree\" | \"trees\" | \"truck-delivery\" | \"truck\" | \"umbrella\" | \"unlink\" | \"upload\" | \"user-circle\" | \"user-exclamation\" | \"user-minus\" | \"user-off\" | \"user-plus\" | \"user-worker\" | \"user\" | \"users\" | \"versions\" | \"video-minus\" | \"video-off\" | \"video-plus\" | \"video\" | \"volume-2\" | \"volume-3\" | \"volume\" | \"wallet\" | \"wand\" | \"wave\" | \"waves\" | \"wifi-off\" | \"wifi\" | \"wind-direction\" | \"wind\" | \"windmill\" | \"wood\" | \"world-code\" | \"world\" | \"writing\" | \"x\" | \"zoom-reset\"",
+                    "resolved": "\"home\" | \"photo\" | \"map\" | \"filter\" | \"access-point-off\" | \"access-point\" | \"accessible\" | \"activity\" | \"address-book\" | \"adjustments-horizontal\" | \"adjustments-up\" | \"adjustments\" | \"affiliate\" | \"air-conditioning\" | \"alert-circle\" | \"alert-square-rounded\" | \"alert-triangle\" | \"align-center\" | \"align-left\" | \"align-right\" | \"app-window\" | \"apps\" | \"archive\" | \"areas\" | \"arrow-back-up\" | \"arrow-back\" | \"arrow-down-left\" | \"arrow-down-right\" | \"arrow-down\" | \"arrow-forward-up\" | \"arrow-forward\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up-left\" | \"arrow-up-right\" | \"arrow-up\" | \"arrows-diagonal\" | \"arrows-exchange\" | \"arrows-maximize\" | \"arrows-minimize\" | \"arrows-move\" | \"aspect-ratio\" | \"atom\" | \"ban\" | \"basket\" | \"battery-1\" | \"battery-2\" | \"battery-3\" | \"battery-4\" | \"battery-automotive\" | \"battery-charging\" | \"battery-eco\" | \"battery-off\" | \"battery\" | \"bell-bolt\" | \"bell-off\" | \"bell-ringing\" | \"bell\" | \"bike\" | \"bluetooth-connected\" | \"bluetooth-off\" | \"bluetooth\" | \"bolt-off\" | \"bolt\" | \"book\" | \"bookmark-off\" | \"bookmark\" | \"bookmarks\" | \"box-align-top\" | \"box-multiple\" | \"brand-facebook\" | \"brand-instagram\" | \"brand-linkedin\" | \"brand-x\" | \"brand-youtube\" | \"briefcase\" | \"brightness-down\" | \"brightness-up\" | \"browser-check\" | \"browser-plus\" | \"browser-x\" | \"browser\" | \"brush\" | \"building-bank\" | \"building-factory\" | \"building-lighthouse\" | \"building-store\" | \"building\" | \"bulb-off\" | \"bulb\" | \"cake\" | \"calendar-time\" | \"calendar\" | \"camera-off\" | \"camera\" | \"car-crane\" | \"car\" | \"caravan\" | \"cash-banknote\" | \"cash\" | \"cast\" | \"cell\" | \"charging-pile\" | \"chart-arcs\" | \"chart-area-line\" | \"chart-area\" | \"chart-arrows-vertical\" | \"chart-arrows\" | \"chart-bar\" | \"chart-bubble\" | \"chart-circles\" | \"chart-donut\" | \"chart-dots\" | \"chart-line\" | \"chart-pie\" | \"chart-radar\" | \"check\" | \"checkbox\" | \"checklist\" | \"checks\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-top\" | \"chevrons-left\" | \"chevrons-right\" | \"circle-caret-right\" | \"circle-check\" | \"circle-x\" | \"circuit-alternate\" | \"circuit-ground-digital\" | \"clipboard-check\" | \"clipboard-list\" | \"clipboard-plus\" | \"clipboard-text\" | \"clipboard-x\" | \"clipboard\" | \"clock-edit\" | \"clock\" | \"cloud-data-connection\" | \"cloud-download\" | \"cloud-rain\" | \"cloud-snow\" | \"cloud-upload\" | \"cloud\" | \"color-picker\" | \"color-swatch\" | \"columns-1\" | \"columns-2\" | \"columns-3\" | \"compass\" | \"contract\" | \"cookie\" | \"copy\" | \"cpu\" | \"crane\" | \"credit-card\" | \"crop\" | \"cross\" | \"crown\" | \"currency-bitcoin\" | \"currency-dollar\" | \"currency-ethereum\" | \"currency-euro\" | \"cut\" | \"dashboard\" | \"database\" | \"device-desktop\" | \"device-floppy\" | \"device-gamepad\" | \"device-laptop\" | \"device-mobile-rotated\" | \"device-mobile\" | \"device-tablet\" | \"device-watch\" | \"devices\" | \"dialpad\" | \"direction-horizontal\" | \"direction-sign\" | \"direction\" | \"discount\" | \"door-enter\" | \"door-exit\" | \"door-off\" | \"dots-vertical\" | \"dots\" | \"download\" | \"drone\" | \"droplet-filled\" | \"droplet-half\" | \"droplet\" | \"droplets\" | \"edit\" | \"empty\" | \"engine\" | \"equal-not\" | \"eraser-off\" | \"eraser\" | \"external-link\" | \"eye-check\" | \"eye-off\" | \"eye\" | \"eyeglass2\" | \"face-id\" | \"feather\" | \"file-alert\" | \"file-analytics\" | \"file-check\" | \"file-code\" | \"file-download\" | \"file-export\" | \"file-horizontal\" | \"file-import\" | \"file-plus\" | \"file-search\" | \"file-text-bookmark\" | \"file-text\" | \"file-type-bmp\" | \"file-type-css\" | \"file-type-csv\" | \"file-type-doc\" | \"file-type-html\" | \"file-type-jpg\" | \"file-type-js\" | \"file-type-pdf\" | \"file-type-png\" | \"file-type-ppt\" | \"file-type-xls\" | \"file-type-xml\" | \"file-type-zip\" | \"file-upload\" | \"file-x\" | \"file-zip\" | \"file\" | \"files-off\" | \"files\" | \"filter-off\" | \"filter-sort\" | \"fingerprint\" | \"fire-extinguisher\" | \"flag\" | \"flame\" | \"flip-horizontal\" | \"flip-vertical\" | \"folder-minus\" | \"folder-off\" | \"folder-plus\" | \"folder-x\" | \"folder\" | \"folders\" | \"frame\" | \"gas-station\" | \"gauge-off\" | \"gauge\" | \"gift\" | \"git-branch-delete\" | \"git-branch\" | \"git-cherry-pick\" | \"git-commit\" | \"git-compare\" | \"git-fork\" | \"git-merge\" | \"git-pull-request-closed\" | \"git-pull-request-draft\" | \"git-pull-request\" | \"gps\" | \"grid-dots\" | \"grip-horizontal\" | \"grip-vertical\" | \"hand-stop\" | \"hand-waving\" | \"hash\" | \"haze\" | \"headphones-off\" | \"headphones\" | \"headset\" | \"heart-off\" | \"heart\" | \"heartbeat\" | \"helicopter\" | \"helmet-swopp\" | \"helmet\" | \"help\" | \"history\" | \"hourglass-empty\" | \"hourglass-high\" | \"hourglass-low\" | \"hourglass-off\" | \"hourglass\" | \"inbox\" | \"info-circle\" | \"keyboard-hide\" | \"keyboard-show\" | \"keyboard\" | \"layout-board-split\" | \"layout-dashboard\" | \"layout-grid\" | \"layout-sidebar-left-collapse\" | \"layout-sidebar-left-expand\" | \"layout-sidebar-right-collapse\" | \"layout-sidebar-right-expand\" | \"layout\" | \"leaf\" | \"lifebuoy\" | \"link\" | \"list-search\" | \"list\" | \"loader\" | \"location\" | \"lock-off\" | \"lock-open\" | \"lock\" | \"login\" | \"logout\" | \"mail-forward\" | \"mail-opened\" | \"mail\" | \"map-pin-2\" | \"map-pin-off\" | \"map-pin\" | \"master-data\" | \"menu\" | \"message-dots\" | \"message-off\" | \"message\" | \"messages\" | \"microphone-off\" | \"microphone\" | \"minus\" | \"mist\" | \"moon\" | \"motorbike\" | \"mouse\" | \"movie\" | \"network\" | \"news\" | \"note\" | \"notebook\" | \"notes\" | \"offshore-station\" | \"package\" | \"palette\" | \"paperclip\" | \"pencil\" | \"phone-call\" | \"phone-calling\" | \"phone-check\" | \"phone-incoming\" | \"phone-off\" | \"phone-outgoing\" | \"phone\" | \"photo-off\" | \"pig\" | \"pin\" | \"pinned-off\" | \"pinned\" | \"plane-off\" | \"plane\" | \"plant\" | \"player-pause\" | \"player-play\" | \"player-skip-back\" | \"player-skip-forward\" | \"player-stop\" | \"player-track-next\" | \"player-track-prev\" | \"plug-connected\" | \"plug\" | \"plus\" | \"power-ac\" | \"power-dc\" | \"power\" | \"presentation-analytics\" | \"presentation\" | \"printer\" | \"propeller\" | \"published\" | \"puzzle-2\" | \"puzzle\" | \"pylon\" | \"qrcode\" | \"quotes-open\" | \"quotes\" | \"radar\" | \"radio\" | \"radioactive\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt\" | \"recharging\" | \"recycle\" | \"refresh-alert\" | \"refresh-off\" | \"refresh\" | \"repeat-once\" | \"repeat\" | \"replace\" | \"report-analytics\" | \"report-medical\" | \"report-search\" | \"report\" | \"ripple-off\" | \"ripple\" | \"rocket\" | \"rotate-2\" | \"rotate-clockwise-2\" | \"rotate-clockwise\" | \"rotate-dot\" | \"rotate\" | \"router\" | \"ruler-measure\" | \"sailboat\" | \"satellite\" | \"scale\" | \"school\" | \"scissors\" | \"scooter-electric\" | \"screenshot\" | \"search\" | \"seeding\" | \"select\" | \"selector\" | \"send\" | \"server\" | \"settings\" | \"shape\" | \"share-2\" | \"share\" | \"shield-check\" | \"shield-lock\" | \"shield-off\" | \"shield-x\" | \"shield\" | \"ship-off\" | \"ship\" | \"shopping-cart\" | \"sitemap\" | \"slash\" | \"smart-home\" | \"snowflake\" | \"solar-panel\" | \"sort-ascending-letters\" | \"sort-ascending-numbers\" | \"sort-descending-letters\" | \"sort-descending-numbers\" | \"spacing-horizontal\" | \"spacing-vertical\" | \"sparkles\" | \"speakerphone\" | \"stack\" | \"stairs\" | \"star\" | \"sun\" | \"sunrise\" | \"sunset\" | \"switch-horizontal\" | \"switch-vertical\" | \"table\" | \"tag\" | \"tank-empty-fill\" | \"tank-full-fill\" | \"tank-medium-fill\" | \"temperature-off\" | \"temperature\" | \"template\" | \"terminal\" | \"text-size\" | \"text\" | \"thumb-down\" | \"thumb-up\" | \"ticket\" | \"timeline\" | \"tir\" | \"tool\" | \"tools\" | \"train\" | \"trash-off\" | \"trash\" | \"tree\" | \"trees\" | \"truck-delivery\" | \"truck\" | \"umbrella\" | \"unlink\" | \"upload\" | \"user-circle\" | \"user-exclamation\" | \"user-minus\" | \"user-off\" | \"user-plus\" | \"user-worker\" | \"user\" | \"users\" | \"versions\" | \"video-minus\" | \"video-off\" | \"video-plus\" | \"video\" | \"volume-2\" | \"volume-3\" | \"volume\" | \"wallet\" | \"wand\" | \"wave\" | \"waves\" | \"wifi-off\" | \"wifi\" | \"wind-direction\" | \"wind\" | \"windmill\" | \"wood\" | \"world-code\" | \"world\" | \"writing\" | \"x\" | \"zoom-reset\"",
                     "references": {
                         "IconName": {
                             "location": "import",

package/dist/collection/components/nv-notification/nv-notification.docs.js CHANGED Viewed

@@ -4,6 +4,7 @@ const NvNotificationDocs = {
     component: 'nv-notification',
     subcomponents: ['nv-icon', 'nv-button'],
     stories: [
+        // Default
         {
             name: 'Default',
             args: {
@@ -12,19 +13,23 @@ const NvNotificationDocs = {
             },
             template: h("nv-notification", { "data-storybook-args": true }),
         },
+        // emphasis
         {
             name: nameof(x => x.emphasis),
             template: (h("div", { "data-class": "flex flex-col" }, h("nv-notification", { "data-storybook-args": true, emphasis: "medium", heading: "Medium Emphasis", message: "This is a medium emphasis notification." }), h("nv-notification", { "data-storybook-args": true, emphasis: "high", heading: "High Emphasis", message: "This is a high emphasis notification." }))),
         },
+        // feedback
         {
             name: nameof(x => x.feedback),
             template: (h("div", { "data-class": "flex flex-col" }, h("nv-notification", { "data-storybook-args": true, feedback: "information", emphasis: "high", heading: "Information (High)", message: "High emphasis information notification.", dismissible: true, "data-class": "mb-4" }), h("nv-notification", { "data-storybook-args": true, feedback: "information", emphasis: "medium", heading: "Information (Medium)", message: "Medium emphasis information notification.", dismissible: true, "data-class": "mb-4" }), h("nv-notification", { "data-storybook-args": true, feedback: "warning", emphasis: "high", heading: "Warning (High)", message: "High emphasis warning notification.", dismissible: true, "data-class": "mb-4" }), h("nv-notification", { "data-storybook-args": true, feedback: "warning", emphasis: "medium", heading: "Warning (Medium)", message: "Medium emphasis warning notification.", dismissible: true, "data-class": "mb-4" }), h("nv-notification", { "data-storybook-args": true, feedback: "error", emphasis: "high", heading: "Error (High)", message: "High emphasis error notification.", dismissible: true, "data-class": "mb-4" }), h("nv-notification", { "data-storybook-args": true, feedback: "error", emphasis: "medium", heading: "Error (Medium)", message: "Medium emphasis error notification.", dismissible: true, "data-class": "mb-4" }), h("nv-notification", { "data-storybook-args": true, feedback: "success", emphasis: "high", heading: "Success (High)", message: "High emphasis success notification.", dismissible: true, "data-class": "mb-4" }), h("nv-notification", { "data-storybook-args": true, feedback: "success", emphasis: "medium", heading: "Success (Medium)", message: "Medium emphasis success notification.", dismissible: true, "data-class": "mb-4" }), h("nv-notification", { "data-storybook-args": true, feedback: "neutral", emphasis: "high", heading: "Neutral (High)", message: "High emphasis neutral notification.", dismissible: true, "data-class": "mb-4" }), h("nv-notification", { "data-storybook-args": true, feedback: "neutral", emphasis: "medium", heading: "Neutral (Medium)", message: "Medium emphasis neutral notification.", dismissible: true, "data-class": "mb-4" }))),
         },
+        // message
         {
             name: nameof(x => x.message),
             args: { message: 'Custom message content' },
             template: h("nv-notification", { "data-storybook-args": true }),
         },
+        // heading
         {
             name: nameof(x => x.heading),
             args: {
@@ -33,16 +38,19 @@ const NvNotificationDocs = {
             },
             template: h("nv-notification", { "data-storybook-args": true }),
         },
+        // icon
         {
             name: nameof(x => x.icon),
             args: { icon: 'user', message: 'You can change the default icon.' },
             template: h("nv-notification", { "data-storybook-args": true }),
         },
+        // dismissible
         {
             name: nameof(x => x.dismissible),
             args: { dismissible: true, message: 'You can close this notification.' },
             template: h("nv-notification", { "data-storybook-args": true }),
         },
+        // hidden
         {
             name: nameof(x => x.hidden),
             args: {
@@ -51,18 +59,41 @@ const NvNotificationDocs = {
             },
             template: h("nv-notification", { "data-storybook-args": true }),
         },
+        // uid
         {
-            name: 'HeadingSlot',
+            name: nameof(x => x.uid),
+            description: 'Set a unique ID for the notification. Used for aria attributes and managing multiple notifications.',
+            args: {
+                uid: 'custom-notification-id',
+                message: 'This notification has a custom UID.',
+            },
+            template: h("nv-notification", { "data-storybook-args": true }),
+        },
+        // initiallyHidden
+        {
+            name: nameof(x => x.initiallyHidden),
+            description: 'When true, the notification will be hidden initially, but internal changes will not be in a controlled state. Good for animating the notification in.',
+            args: {
+                initiallyHidden: true,
+                message: 'This notification starts hidden but can animate in.',
+            },
+            template: h("nv-notification", { "data-storybook-args": true }),
+        },
+        // SlotHeading
+        {
+            name: 'SlotHeading',
             description: 'The heading slot can be used to add custom HTML content as the notification title.',
             template: (h("nv-notification", { "data-storybook-args": true }, h("span", { slot: "heading" }, h("strong", null, "Custom"), " ", h("em", null, "HTML"), " Heading"))),
         },
+        // SlotContent
         {
-            name: 'ContentSlot',
+            name: 'SlotContent',
             description: 'The content slot can be used to add custom HTML content as the notification message.',
             template: (h("nv-notification", { "data-storybook-args": true }, h("div", { slot: "content" }, h("p", null, "Custom HTML content with ", h("strong", null, "formatting"), "."), h("ul", null, h("li", null, "List item 1"), h("li", null, "List item 2"))))),
         },
+        // SlotActions
         {
-            name: 'ActionsSlot',
+            name: 'SlotActions',
             description: 'The actions slot can be used to add custom actions to the notification. You should use low emphasis buttons.',
             template: (h("nv-notification", { "data-storybook-args": true, heading: "Notification with Actions", message: "This notification has custom action buttons." }, h("div", { slot: "actions" }, h("nv-button", { size: "sm", emphasis: "low" }, "Cancel"), h("nv-button", { size: "sm", emphasis: "low" }, "Confirm")))),
         },

package/dist/collection/components/nv-notification/nv-notification.docs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nv-notification.docs.js","sourceRoot":"","sources":["../../../../src/components/nv-notification/nv-notification.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvNotificationDocs: NovaDocs<Components.NvNotification> = {\n component: 'nv-notification',\n subcomponents: ['nv-icon', 'nv-button'],\n stories: [\n {\n name: 'Default',\n args: {\n message: 'Default notification content.',\n heading: 'Notification',\n },\n template: <nv-notification data-storybook-args></nv-notification>,\n },\n {\n name: nameof<Components.NvNotification>(x => x.emphasis),\n template: (\n <div data-class=\"flex flex-col\">\n <nv-notification\n data-storybook-args\n emphasis=\"medium\"\n heading=\"Medium Emphasis\"\n message=\"This is a medium emphasis notification.\"\n ></nv-notification>\n\n <nv-notification\n data-storybook-args\n emphasis=\"high\"\n heading=\"High Emphasis\"\n message=\"This is a high emphasis notification.\"\n ></nv-notification>\n </div>\n ),\n },\n {\n name: nameof<Components.NvNotification>(x => x.feedback),\n template: (\n <div data-class=\"flex flex-col\">\n <nv-notification\n data-storybook-args\n feedback=\"information\"\n emphasis=\"high\"\n heading=\"Information (High)\"\n message=\"High emphasis information notification.\"\n dismissible\n data-class=\"mb-4\"\n ></nv-notification>\n <nv-notification\n data-storybook-args\n feedback=\"information\"\n emphasis=\"medium\"\n heading=\"Information (Medium)\"\n message=\"Medium emphasis information notification.\"\n dismissible\n data-class=\"mb-4\"\n ></nv-notification>\n\n <nv-notification\n data-storybook-args\n feedback=\"warning\"\n emphasis=\"high\"\n heading=\"Warning (High)\"\n message=\"High emphasis warning notification.\"\n dismissible\n data-class=\"mb-4\"\n ></nv-notification>\n <nv-notification\n data-storybook-args\n feedback=\"warning\"\n emphasis=\"medium\"\n heading=\"Warning (Medium)\"\n message=\"Medium emphasis warning notification.\"\n dismissible\n data-class=\"mb-4\"\n ></nv-notification>\n\n <nv-notification\n data-storybook-args\n feedback=\"error\"\n emphasis=\"high\"\n heading=\"Error (High)\"\n message=\"High emphasis error notification.\"\n dismissible\n data-class=\"mb-4\"\n ></nv-notification>\n <nv-notification\n data-storybook-args\n feedback=\"error\"\n emphasis=\"medium\"\n heading=\"Error (Medium)\"\n message=\"Medium emphasis error notification.\"\n dismissible\n data-class=\"mb-4\"\n ></nv-notification>\n\n <nv-notification\n data-storybook-args\n feedback=\"success\"\n emphasis=\"high\"\n heading=\"Success (High)\"\n message=\"High emphasis success notification.\"\n dismissible\n data-class=\"mb-4\"\n ></nv-notification>\n <nv-notification\n data-storybook-args\n feedback=\"success\"\n emphasis=\"medium\"\n heading=\"Success (Medium)\"\n message=\"Medium emphasis success notification.\"\n dismissible\n data-class=\"mb-4\"\n ></nv-notification>\n\n <nv-notification\n data-storybook-args\n feedback=\"neutral\"\n emphasis=\"high\"\n heading=\"Neutral (High)\"\n message=\"High emphasis neutral notification.\"\n dismissible\n data-class=\"mb-4\"\n ></nv-notification>\n <nv-notification\n data-storybook-args\n feedback=\"neutral\"\n emphasis=\"medium\"\n heading=\"Neutral (Medium)\"\n message=\"Medium emphasis neutral notification.\"\n dismissible\n data-class=\"mb-4\"\n ></nv-notification>\n </div>\n ),\n },\n {\n name: nameof<Components.NvNotification>(x => x.message),\n args: { message: 'Custom message content' },\n template: <nv-notification data-storybook-args></nv-notification>,\n },\n {\n name: nameof<Components.NvNotification>(x => x.heading),\n args: {\n heading: 'Custom Heading',\n message: 'The content is rendered below the heading.',\n },\n template: <nv-notification data-storybook-args></nv-notification>,\n },\n {\n name: nameof<Components.NvNotification>(x => x.icon),\n args: { icon: 'user', message: 'You can change the default icon.' },\n template: <nv-notification data-storybook-args></nv-notification>,\n },\n {\n name: nameof<Components.NvNotification>(x => x.dismissible),\n args: { dismissible: true, message: 'You can close this notification.' },\n template: <nv-notification data-storybook-args></nv-notification>,\n },\n {\n name: nameof<Components.NvNotification>(x => x.hidden),\n args: {\n hidden: true,\n message: 'This notification is hidden until changed.',\n },\n template: <nv-notification data-storybook-args></nv-notification>,\n },\n {\n name: 'HeadingSlot',\n description:\n 'The heading slot can be used to add custom HTML content as the notification title.',\n template: (\n <nv-notification data-storybook-args>\n <span slot=\"heading\">\n <strong>Custom</strong> <em>HTML</em> Heading\n </span>\n </nv-notification>\n ),\n },\n {\n name: 'ContentSlot',\n description:\n 'The content slot can be used to add custom HTML content as the notification message.',\n template: (\n <nv-notification data-storybook-args>\n <div slot=\"content\">\n <p>\n Custom HTML content with <strong>formatting</strong>.\n </p>\n <ul>\n <li>List item 1</li>\n <li>List item 2</li>\n </ul>\n </div>\n </nv-notification>\n ),\n },\n {\n name: 'ActionsSlot',\n description:\n 'The actions slot can be used to add custom actions to the notification. You should use low emphasis buttons.',\n template: (\n <nv-notification\n data-storybook-args\n heading=\"Notification with Actions\"\n message=\"This notification has custom action buttons.\"\n >\n <div slot=\"actions\">\n <nv-button size=\"sm\" emphasis=\"low\">\n Cancel\n </nv-button>\n <nv-button size=\"sm\" emphasis=\"low\">\n Confirm\n </nv-button>\n </div>\n </nv-notification>\n ),\n },\n ],\n};\n\nexport default NvNotificationDocs;\n"]}
1	+ {"version":3,"file":"nv-notification.docs.js","sourceRoot":"","sources":["../../../../src/components/nv-notification/nv-notification.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvNotificationDocs: NovaDocs<Components.NvNotification> = {\n component: 'nv-notification',\n subcomponents: ['nv-icon', 'nv-button'],\n stories: [\n // Default\n {\n name: 'Default',\n args: {\n message: 'Default notification content.',\n heading: 'Notification',\n },\n template: <nv-notification data-storybook-args></nv-notification>,\n },\n // emphasis\n {\n name: nameof<Components.NvNotification>(x => x.emphasis),\n template: (\n <div data-class=\"flex flex-col\">\n <nv-notification\n data-storybook-args\n emphasis=\"medium\"\n heading=\"Medium Emphasis\"\n message=\"This is a medium emphasis notification.\"\n ></nv-notification>\n\n <nv-notification\n data-storybook-args\n emphasis=\"high\"\n heading=\"High Emphasis\"\n message=\"This is a high emphasis notification.\"\n ></nv-notification>\n </div>\n ),\n },\n // feedback\n {\n name: nameof<Components.NvNotification>(x => x.feedback),\n template: (\n <div data-class=\"flex flex-col\">\n <nv-notification\n data-storybook-args\n feedback=\"information\"\n emphasis=\"high\"\n heading=\"Information (High)\"\n message=\"High emphasis information notification.\"\n dismissible\n data-class=\"mb-4\"\n ></nv-notification>\n <nv-notification\n data-storybook-args\n feedback=\"information\"\n emphasis=\"medium\"\n heading=\"Information (Medium)\"\n message=\"Medium emphasis information notification.\"\n dismissible\n data-class=\"mb-4\"\n ></nv-notification>\n\n <nv-notification\n data-storybook-args\n feedback=\"warning\"\n emphasis=\"high\"\n heading=\"Warning (High)\"\n message=\"High emphasis warning notification.\"\n dismissible\n data-class=\"mb-4\"\n ></nv-notification>\n <nv-notification\n data-storybook-args\n feedback=\"warning\"\n emphasis=\"medium\"\n heading=\"Warning (Medium)\"\n message=\"Medium emphasis warning notification.\"\n dismissible\n data-class=\"mb-4\"\n ></nv-notification>\n\n <nv-notification\n data-storybook-args\n feedback=\"error\"\n emphasis=\"high\"\n heading=\"Error (High)\"\n message=\"High emphasis error notification.\"\n dismissible\n data-class=\"mb-4\"\n ></nv-notification>\n <nv-notification\n data-storybook-args\n feedback=\"error\"\n emphasis=\"medium\"\n heading=\"Error (Medium)\"\n message=\"Medium emphasis error notification.\"\n dismissible\n data-class=\"mb-4\"\n ></nv-notification>\n\n <nv-notification\n data-storybook-args\n feedback=\"success\"\n emphasis=\"high\"\n heading=\"Success (High)\"\n message=\"High emphasis success notification.\"\n dismissible\n data-class=\"mb-4\"\n ></nv-notification>\n <nv-notification\n data-storybook-args\n feedback=\"success\"\n emphasis=\"medium\"\n heading=\"Success (Medium)\"\n message=\"Medium emphasis success notification.\"\n dismissible\n data-class=\"mb-4\"\n ></nv-notification>\n\n <nv-notification\n data-storybook-args\n feedback=\"neutral\"\n emphasis=\"high\"\n heading=\"Neutral (High)\"\n message=\"High emphasis neutral notification.\"\n dismissible\n data-class=\"mb-4\"\n ></nv-notification>\n <nv-notification\n data-storybook-args\n feedback=\"neutral\"\n emphasis=\"medium\"\n heading=\"Neutral (Medium)\"\n message=\"Medium emphasis neutral notification.\"\n dismissible\n data-class=\"mb-4\"\n ></nv-notification>\n </div>\n ),\n },\n // message\n {\n name: nameof<Components.NvNotification>(x => x.message),\n args: { message: 'Custom message content' },\n template: <nv-notification data-storybook-args></nv-notification>,\n },\n // heading\n {\n name: nameof<Components.NvNotification>(x => x.heading),\n args: {\n heading: 'Custom Heading',\n message: 'The content is rendered below the heading.',\n },\n template: <nv-notification data-storybook-args></nv-notification>,\n },\n // icon\n {\n name: nameof<Components.NvNotification>(x => x.icon),\n args: { icon: 'user', message: 'You can change the default icon.' },\n template: <nv-notification data-storybook-args></nv-notification>,\n },\n // dismissible\n {\n name: nameof<Components.NvNotification>(x => x.dismissible),\n args: { dismissible: true, message: 'You can close this notification.' },\n template: <nv-notification data-storybook-args></nv-notification>,\n },\n // hidden\n {\n name: nameof<Components.NvNotification>(x => x.hidden),\n args: {\n hidden: true,\n message: 'This notification is hidden until changed.',\n },\n template: <nv-notification data-storybook-args></nv-notification>,\n },\n // uid\n {\n name: nameof<Components.NvNotification>(x => x.uid),\n description:\n 'Set a unique ID for the notification. Used for aria attributes and managing multiple notifications.',\n args: {\n uid: 'custom-notification-id',\n message: 'This notification has a custom UID.',\n },\n template: <nv-notification data-storybook-args></nv-notification>,\n },\n // initiallyHidden\n {\n name: nameof<Components.NvNotification>(x => x.initiallyHidden),\n description:\n 'When true, the notification will be hidden initially, but internal changes will not be in a controlled state. Good for animating the notification in.',\n args: {\n initiallyHidden: true,\n message: 'This notification starts hidden but can animate in.',\n },\n template: <nv-notification data-storybook-args></nv-notification>,\n },\n // SlotHeading\n {\n name: 'SlotHeading',\n description:\n 'The heading slot can be used to add custom HTML content as the notification title.',\n template: (\n <nv-notification data-storybook-args>\n <span slot=\"heading\">\n <strong>Custom</strong> <em>HTML</em> Heading\n </span>\n </nv-notification>\n ),\n },\n // SlotContent\n {\n name: 'SlotContent',\n description:\n 'The content slot can be used to add custom HTML content as the notification message.',\n template: (\n <nv-notification data-storybook-args>\n <div slot=\"content\">\n <p>\n Custom HTML content with <strong>formatting</strong>.\n </p>\n <ul>\n <li>List item 1</li>\n <li>List item 2</li>\n </ul>\n </div>\n </nv-notification>\n ),\n },\n // SlotActions\n {\n name: 'SlotActions',\n description:\n 'The actions slot can be used to add custom actions to the notification. You should use low emphasis buttons.',\n template: (\n <nv-notification\n data-storybook-args\n heading=\"Notification with Actions\"\n message=\"This notification has custom action buttons.\"\n >\n <div slot=\"actions\">\n <nv-button size=\"sm\" emphasis=\"low\">\n Cancel\n </nv-button>\n <nv-button size=\"sm\" emphasis=\"low\">\n Confirm\n </nv-button>\n </div>\n </nv-notification>\n ),\n },\n ],\n};\n\nexport default NvNotificationDocs;\n"]}

package/dist/collection/components/nv-notification/nv-notification.js CHANGED Viewed

@@ -78,12 +78,10 @@ export class NvNotification {
         await this.showAnimation();
     }
     getDefaultIcon() {
-        var _a;
-        return (_a = this.iconByFeedback[this.feedback]) !== null && _a !== void 0 ? _a : 'info-circle';
+        return this.iconByFeedback[this.feedback] ?? 'info-circle';
     }
     getAriaRole() {
-        var _a;
-        return (_a = this.roleByFeedback[this.feedback]) !== null && _a !== void 0 ? _a : 'status';
+        return this.roleByFeedback[this.feedback] ?? 'status';
     }
     getAriaLive() {
         return this.getAriaRole() === 'alert' ? 'assertive' : 'polite';
@@ -126,9 +124,9 @@ export class NvNotification {
         }
     }
     async dismissAnimation() {
-        var _a;
-        const position = (_a = this.el
-            .closest('nv-notificationcontainer')) === null || _a === void 0 ? void 0 : _a.getAttribute('position');
+        const position = this.el
+            .closest('nv-notificationcontainer')
+            ?.getAttribute('position');
         const destination = this.getSlideDestination(position);
         const { fadeOut } = useFade(this.container, { duration: 300 });
         const { slideX, slideY, setSlideReset } = useSlide(this.container, {
@@ -160,8 +158,7 @@ export class NvNotification {
     /****************************************************************************/
     //#region RENDER
     render() {
-        var _a, _b, _c;
-        return (h(Host, { key: 'cf0f39e0565a264b676e0ca569ec79169771d269', 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: 'ed2a5e50f0a6975c652f658e62a271c0b476f7d2', "data-scope": "container", ref: el => (this.container = el) }, this.dismissible && (h("button", { key: '9eccf1b9f29f581bf77255b9e2bebebfdc233302', "data-scope": "dismiss", type: "button", onClick: this.dismiss.bind(this) }, h("nv-icon", { key: '73890097ad80af4d86646bb83f2ae99878164db4', name: "x", size: "sm" }))), h("nv-icon", { key: 'c852478c25ae05d5219453234db95a420b5c5a1e', name: (_c = this.icon) !== null && _c !== void 0 ? _c : this.getDefaultIcon(), size: "md", "data-scope": "icon" }), h("div", { key: 'b06042bf55e8bedc07a60f23a27b07160776c0e0', "data-scope": "content" }, (this.heading || this.headingSlot) && (h("p", { key: '7666dfb18169cdfea8eb8c603b20a5ba7075824c', id: this.getHeadingId(), "data-scope": "heading" }, h("slot", { key: 'f6e651737cf630bb89d40b7664329596355a8ea0', name: "heading" }, this.heading))), (this.message || this.messageSlot) && (h("p", { key: 'ae5d89db2b36c4c81c7b46aada5f50bd6eb4aa90', id: this.getMessageId(), "data-scope": "message" }, h("slot", { key: '24d01abd694f7f9a316345f9d88716d1c0a47234', name: "content" }, this.message))), this.actionsSlot && (h("div", { key: 'a1aa0bcc33a42d7b36bcd364a155d41f527cc96a', "data-scope": "actions" }, h("slot", { key: 'b09c21bed0fd559bf2f694f861385444c2ddbbf0', name: "actions" })))))));
+        return (h(Host, { key: '64c79843ff7bdd1a4ae001a60a8db540947b8412', role: this.getAriaRole(), "aria-live": this.getAriaLive(), "aria-atomic": true, "aria-labelledby": this.getHeadingId() ?? null, "aria-describedby": this.getMessageId() ?? null, tabindex: "-1" }, h("div", { key: 'b51c9c3829b122476564726e20a1da112059035b', "data-scope": "container", ref: el => (this.container = el) }, this.dismissible && (h("button", { key: '3ee952fb7dc41f54fa35c88d12d4d512b96eece1', "data-scope": "dismiss", type: "button", onClick: this.dismiss.bind(this) }, h("nv-icon", { key: '4fa53d42ff6ea7b5e90a01cfcffec167368aece6', name: "x", size: "sm" }))), h("nv-icon", { key: 'e116c962672fb2237382b7dc2d3c6feae62bfced', name: this.icon ?? this.getDefaultIcon(), size: "md", "data-scope": "icon" }), h("div", { key: '62a1da7ac952aa704965aca61ba6f98eb12341a2', "data-scope": "content" }, (this.heading || this.headingSlot) && (h("p", { key: '4ddc91bc5568f54c6f8f3114720c0821c103f1c3', id: this.getHeadingId(), "data-scope": "heading" }, h("slot", { key: 'b7b7c678c995d68be52ca6711e55e5a8fa43fe68', name: "heading" }, this.heading))), (this.message || this.messageSlot) && (h("p", { key: '5e02782e07e7e2720cef3ec8c7f06321ce53940d', id: this.getMessageId(), "data-scope": "message" }, h("slot", { key: '4886e5e490c5f1baf429c48666fd715f43113a71', name: "content" }, this.message))), this.actionsSlot && (h("div", { key: '1d75b6276a8622bc607cf296336abc734e02320a', "data-scope": "actions" }, h("slot", { key: '6cab1b879e9b0582a415edd5d096a2b794b82ea4', name: "actions" })))))));
     }
     static get is() { return "nv-notification"; }
     static get originalStyleUrls() {