@nova-design-system/nova-webcomponents 3.12.0 → 3.13.0

package/dist/collection/components/nv-fieldtime/nv-fieldtime.docs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nv-fieldtime.docs.js","sourceRoot":"","sources":["../../../src/components/nv-fieldtime/nv-fieldtime.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 NvFieldtimeDocs: NovaDocs<Components.NvFieldtime> = {\n  component: 'nv-fieldtime',\n  badge: 'beta',\n  subcomponents: ['nv-icon'],\n  stories: [\n    {\n      name: 'Default',\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.value),\n      args: { value: '12:34:56' },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.label),\n      args: { label: 'Label' },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.readonly),\n      args: { readonly: true },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.disabled),\n      args: { disabled: true },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.required),\n      args: { required: true, label: 'Required' },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.name),\n      args: { name: 'name' },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.success),\n      args: { success: true },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.error),\n      args: { error: true },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.errorDescription),\n      args: { error: true, errorDescription: 'Error Description' },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.max),\n      args: { max: '20:59:59' },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.min),\n      args: { min: '01:00:00' },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.format),\n      args: { format: 'HH:mm:ss' },\n      template: (\n        <div data-class=\"flex flex-col gap-4 items-center w-full\">\n          <nv-fieldtime\n            data-class=\"w-full\"\n            label=\"format\"\n            data-storybook-args\n          />\n\n          <div data-class=\"flex flex-row gap-4 items-center w-full\">\n            <nv-fieldtime data-class=\"w-full\" label=\"hh\" format=\"hh\" />\n            <nv-fieldtime data-class=\"w-full\" label=\"HH\" format=\"HH\" />\n          </div>\n          <div data-class=\"flex flex-row gap-4 items-center w-full\">\n            <nv-fieldtime data-class=\"w-full\" label=\"hh:mm\" format=\"hh:mm\" />\n            <nv-fieldtime data-class=\"w-full\" label=\"HH:mm\" format=\"HH:mm\" />\n          </div>\n          <div data-class=\"flex flex-row gap-4 items-center w-full\">\n            <nv-fieldtime\n              data-class=\"w-full\"\n              label=\"hh:mm:ss\"\n              format=\"hh:mm:ss\"\n            />\n            <nv-fieldtime\n              data-class=\"w-full\"\n              label=\"HH:mm:ss\"\n              format=\"HH:mm:ss\"\n            />\n          </div>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.description),\n      args: { description: 'Description' },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.open),\n      args: { open: true },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.step),\n      args: { step: 7200000 },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.autofocus),\n      args: {\n        label: 'Autofocus',\n        autofocus: true,\n      },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: 'SlotLabel',\n      template: (\n        <nv-fieldtime data-storybook-args>\n          <span slot=\"label\">Label Slot</span>\n        </nv-fieldtime>\n      ),\n    },\n    {\n      name: 'SlotBeforeInput',\n      template: (\n        <nv-fieldtime data-storybook-args>\n          <span slot=\"before-input\">Before Input Slot</span>\n        </nv-fieldtime>\n      ),\n    },\n    {\n      name: 'SlotAfterInput',\n      template: (\n        <nv-fieldtime data-storybook-args>\n          <span slot=\"after-input\">After Input Slot</span>\n        </nv-fieldtime>\n      ),\n    },\n    {\n      name: 'SlotLeadingInput',\n      template: (\n        <nv-fieldtime data-storybook-args>\n          <nv-icon slot=\"leading-input\" name=\"clock\" />\n        </nv-fieldtime>\n      ),\n    },\n    {\n      name: 'SlotErrorDescription',\n      args: { error: true },\n      template: (\n        <nv-fieldtime data-storybook-args>\n          <span slot=\"error-description\">Error Description Slot</span>\n        </nv-fieldtime>\n      ),\n    },\n  ],\n};\n\nexport default NvFieldtimeDocs;\n"]}
+{"version":3,"file":"nv-fieldtime.docs.js","sourceRoot":"","sources":["../../../src/components/nv-fieldtime/nv-fieldtime.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 NvFieldtimeDocs: NovaDocs<Components.NvFieldtime> = {\n  component: 'nv-fieldtime',\n  subcomponents: ['nv-icon'],\n  stories: [\n    {\n      name: 'Default',\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.value),\n      args: { value: '12:34:56' },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.label),\n      args: { label: 'Label' },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.readonly),\n      args: { readonly: true },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.disabled),\n      args: { disabled: true },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.required),\n      args: { required: true, label: 'Required' },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.name),\n      args: { name: 'name' },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.success),\n      args: { success: true },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.error),\n      args: { error: true },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.errorDescription),\n      args: { error: true, errorDescription: 'Error Description' },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.max),\n      args: { max: '20:59:59' },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.min),\n      args: { min: '01:00:00' },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.format),\n      args: { format: 'HH:mm:ss' },\n      template: (\n        <div data-class=\"flex flex-col gap-4 items-center w-full\">\n          <nv-fieldtime\n            data-class=\"w-full\"\n            label=\"format\"\n            data-storybook-args\n          />\n\n          <div data-class=\"flex flex-row gap-4 items-center w-full\">\n            <nv-fieldtime data-class=\"w-full\" label=\"hh\" format=\"hh\" />\n            <nv-fieldtime data-class=\"w-full\" label=\"HH\" format=\"HH\" />\n          </div>\n          <div data-class=\"flex flex-row gap-4 items-center w-full\">\n            <nv-fieldtime data-class=\"w-full\" label=\"hh:mm\" format=\"hh:mm\" />\n            <nv-fieldtime data-class=\"w-full\" label=\"HH:mm\" format=\"HH:mm\" />\n          </div>\n          <div data-class=\"flex flex-row gap-4 items-center w-full\">\n            <nv-fieldtime\n              data-class=\"w-full\"\n              label=\"hh:mm:ss\"\n              format=\"hh:mm:ss\"\n            />\n            <nv-fieldtime\n              data-class=\"w-full\"\n              label=\"HH:mm:ss\"\n              format=\"HH:mm:ss\"\n            />\n          </div>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.description),\n      args: { description: 'Description' },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.open),\n      args: { open: true },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.step),\n      args: { step: 7200000 },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldtime>(x => x.autofocus),\n      args: {\n        label: 'Autofocus',\n        autofocus: true,\n      },\n      template: <nv-fieldtime data-storybook-args />,\n    },\n    {\n      name: 'SlotLabel',\n      template: (\n        <nv-fieldtime data-storybook-args>\n          <span slot=\"label\">Label Slot</span>\n        </nv-fieldtime>\n      ),\n    },\n    {\n      name: 'SlotBeforeInput',\n      template: (\n        <nv-fieldtime data-storybook-args>\n          <span slot=\"before-input\">Before Input Slot</span>\n        </nv-fieldtime>\n      ),\n    },\n    {\n      name: 'SlotAfterInput',\n      template: (\n        <nv-fieldtime data-storybook-args>\n          <span slot=\"after-input\">After Input Slot</span>\n        </nv-fieldtime>\n      ),\n    },\n    {\n      name: 'SlotLeadingInput',\n      template: (\n        <nv-fieldtime data-storybook-args>\n          <nv-icon slot=\"leading-input\" name=\"clock\" />\n        </nv-fieldtime>\n      ),\n    },\n    {\n      name: 'SlotErrorDescription',\n      args: { error: true },\n      template: (\n        <nv-fieldtime data-storybook-args>\n          <span slot=\"error-description\">Error Description Slot</span>\n        </nv-fieldtime>\n      ),\n    },\n  ],\n};\n\nexport default NvFieldtimeDocs;\n"]}

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

@@ -0,0 +1,72 @@
+import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
+const NvNotificationDocs = {
+    component: 'nv-notification',
+    subcomponents: ['nv-icon', 'nv-button'],
+    stories: [
+        {
+            name: 'Default',
+            args: {
+                message: 'Default notification content.',
+                heading: 'Notification',
+            },
+            template: h("nv-notification", { "data-storybook-args": true }),
+        },
+        {
+            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." }))),
+        },
+        {
+            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" }))),
+        },
+        {
+            name: nameof(x => x.message),
+            args: { message: 'Custom message content' },
+            template: h("nv-notification", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.heading),
+            args: {
+                heading: 'Custom Heading',
+                message: 'The content is rendered below the heading.',
+            },
+            template: h("nv-notification", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.icon),
+            args: { icon: 'user', message: 'You can change the default icon.' },
+            template: h("nv-notification", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.dismissible),
+            args: { dismissible: true, message: 'You can close this notification.' },
+            template: h("nv-notification", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.hidden),
+            args: {
+                hidden: true,
+                message: 'This notification is hidden until changed.',
+            },
+            template: h("nv-notification", { "data-storybook-args": true }),
+        },
+        {
+            name: 'HeadingSlot',
+            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"))),
+        },
+        {
+            name: 'ContentSlot',
+            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"))))),
+        },
+        {
+            name: 'ActionsSlot',
+            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")))),
+        },
+    ],
+};
+export default NvNotificationDocs;
+//# sourceMappingURL=nv-notification.docs.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,333 @@
+import { Host, h, } from "@stencil/core";
+import { v4 as uuidv4 } from "uuid";
+import { FeedbackColors } from "../../utils/constants";
+import { useCollapse, useFade, useSlide, parallel } from "../../animations";
+/**
+ * @slot heading - Use this slot to insert HTML as the notification title.
+ * @slot content - Use this slot to insert HTML as the notification message.
+ * @slot actions - Use this slot for custom actions.
+ */
+export class NvNotification {
+    constructor() {
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Set a unique ID for the notification. Used for aria attributes and managing
+         * multiple notifications.
+         */
+        this.uid = uuidv4();
+        /**
+         * Specifies the notification type which determines the color and default icon.
+         */
+        this.feedback = 'information';
+        /**
+         * Adjusts the emphasis to make the notification more or less visually
+         * prominent to users. Use this to draw attention to important actions or
+         * reduce focus on less critical ones
+         */
+        this.emphasis = 'medium';
+        /**
+         * Allows the notification to be dismissed via a close button (x). The
+         * notification is not dismissible unless explicitly enabled.
+         */
+        this.dismissible = false;
+        /**
+         * Controls the visibility of the notification.
+         */
+        this.hidden = false; // eslint-disable-line @stencil-community/reserved-member-names
+        //#endregion EVENTS
+        /****************************************************************************/
+        //#region INTERNAL
+        this.iconByFeedback = {
+            [FeedbackColors.Warning]: 'alert-circle',
+            [FeedbackColors.Information]: 'info-circle',
+            [FeedbackColors.Success]: 'circle-check',
+            [FeedbackColors.Error]: 'alert-triangle',
+            [FeedbackColors.Neutral]: 'help',
+        };
+        this.roleByFeedback = {
+            [FeedbackColors.Error]: 'alert',
+            [FeedbackColors.Warning]: 'alert',
+            [FeedbackColors.Information]: 'status',
+            [FeedbackColors.Success]: 'status',
+            [FeedbackColors.Neutral]: 'status',
+        };
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region METHODS
+    async dismiss() {
+        await this.dismissAnimation();
+    }
+    getDefaultIcon() {
+        var _a;
+        return (_a = this.iconByFeedback[this.feedback]) !== null && _a !== void 0 ? _a : 'info-circle';
+    }
+    getAriaRole() {
+        var _a;
+        return (_a = this.roleByFeedback[this.feedback]) !== null && _a !== void 0 ? _a : 'status';
+    }
+    getAriaLive() {
+        return this.getAriaRole() === 'alert' ? 'assertive' : 'polite';
+    }
+    getHeadingId() {
+        return this.heading ? `nv-notification-${this.uid}-heading` : null;
+    }
+    getMessageId() {
+        return this.message ? `nv-notification-${this.uid}-message` : null;
+    }
+    async dismissAnimation() {
+        const { fadeOut } = useFade(this.container, { duration: 300 });
+        const { slideOut } = useSlide(this.container, { duration: 800 });
+        const { collapse } = useCollapse(this.el, {
+            duration: 800,
+            overflow: 'visible',
+        });
+        await parallel(fadeOut, slideOut, collapse).start();
+        this.hidden = true;
+        this.hiddenChanged.emit(true);
+    }
+    //#endregion INTERNAL
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        this.headingSlot = this.el.querySelector('[slot="heading"]');
+        this.messageSlot = this.el.querySelector('[slot="content"]');
+        this.actionsSlot = this.el.querySelector('[slot="actions"]');
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        var _a, _b, _c;
+        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" })))))));
+    }
+    static get is() { return "nv-notification"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["styles/nv-notification.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["styles/nv-notification.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "uid": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set a unique ID for the notification. Used for aria attributes and managing\nmultiple notifications."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "uid",
+                "reflect": true,
+                "defaultValue": "uuidv4()"
+            },
+            "feedback": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "`${FeedbackColors}`",
+                    "resolved": "\"error\" | \"information\" | \"neutral\" | \"success\" | \"warning\"",
+                    "references": {
+                        "FeedbackColors": {
+                            "location": "import",
+                            "path": "../../utils/constants",
+                            "id": "src/utils/constants.ts::FeedbackColors"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the notification type which determines the color and default icon."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "feedback",
+                "reflect": true,
+                "defaultValue": "'information'"
+            },
+            "emphasis": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "`${NotificationEmphasis}`",
+                    "resolved": "\"high\" | \"medium\"",
+                    "references": {
+                        "NotificationEmphasis": {
+                            "location": "import",
+                            "path": "../../utils/constants",
+                            "id": "src/utils/constants.ts::NotificationEmphasis"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Adjusts the emphasis to make the notification more or less visually\nprominent to users. Use this to draw attention to important actions or\nreduce focus on less critical ones"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "emphasis",
+                "reflect": true,
+                "defaultValue": "'medium'"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Short and concise text for the notification title."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "heading",
+                "reflect": true
+            },
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Main content for the notification. For more complex content, use the\ncontent slot instead."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "message",
+                "reflect": true
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon associated with the notification, defaults vary based on the feedback\ntype."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "icon",
+                "reflect": true
+            },
+            "dismissible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allows the notification to be dismissed via a close button (x). The\nnotification is not dismissible unless explicitly enabled."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "dismissible",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "hidden": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the visibility of the notification."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "hidden",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "hiddenChanged",
+                "name": "hiddenChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "bind",
+                            "text": "hidden"
+                        }],
+                    "text": "Emits when the 'hidden' prop changes, reflecting a change in visibility.\nPasses hidden value to the detail."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "dismiss": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "*************************************************************************",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=nv-notification.js.map

package/dist/collection/components/nv-notification/nv-notification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nv-notification.js","sourceRoot":"","sources":["../../../src/components/nv-notification/nv-notification.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}