@nova-design-system/nova-webcomponents 3.0.0-beta.17

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

@@ -0,0 +1,61 @@
+import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
+const NvAlertDocs = {
+    component: 'nv-alert',
+    subcomponents: ['nv-button'],
+    stories: [
+        {
+            name: 'Default',
+            args: { message: 'This is an alert!' },
+            template: h("nv-alert", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.feedback),
+            template: (h("div", { "data-class": "flex flex-col gap-4" }, h("nv-alert", { "data-storybook-args": true, feedback: "information", heading: "Default: Information" }), h("nv-alert", { "data-storybook-args": true, feedback: "warning", heading: "Warning" }), h("nv-alert", { "data-storybook-args": true, feedback: "error", heading: "Error" }), h("nv-alert", { "data-storybook-args": true, feedback: "success", heading: "Success" }), h("nv-alert", { "data-storybook-args": true, feedback: "neutral", heading: "Neutral" }))),
+        },
+        {
+            name: nameof(x => x.message),
+            args: { message: 'custom message' },
+            template: (h("nv-alert", { "data-storybook-args": true }, h("nv-button", null, "With additional actions"))),
+        },
+        {
+            name: nameof(x => x.heading),
+            args: {
+                heading: 'Custom Heading',
+                message: 'The content is rendered below the heading.',
+            },
+            template: h("nv-alert", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.icon),
+            args: { icon: 'user', message: 'You can change the default icon.' },
+            template: h("nv-alert", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.dismissible),
+            args: { dismissible: true, message: 'You can close this alert.' },
+            template: h("nv-alert", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.preventAutoClose),
+            args: {
+                preventAutoClose: true,
+                dismissible: true,
+                message: 'Prevent auto close enabled.',
+            },
+            template: h("nv-alert", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.hidden),
+            args: { hidden: true, message: 'This is hidden until changed.' },
+            template: h("nv-alert", { "data-storybook-args": true }),
+        },
+        {
+            name: 'DefaultSlot',
+            description: 'The default slot can be used to add additional content to the alert.',
+            template: (h("nv-alert", { "data-storybook-args": true }, h("img", { src: "https://picsum.photos/200/200", "data-class": "rounded-md" }))),
+        },
+    ],
+};
+export default NvAlertDocs;
+//# sourceMappingURL=nv-alert.docs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nv-alert.docs.js","sourceRoot":"","sources":["../../../src/components/nv-alert/nv-alert.docs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAGlC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,MAAM,WAAW,GAAiC;IAChD,SAAS,EAAE,UAAU;IACrB,aAAa,EAAE,CAAC,WAAW,CAAC;IAC5B,OAAO,EAAE;QACP;YACE,IAAI,EAAE,SAAS;YACf,IAAI,EAAE,EAAE,OAAO,EAAE,mBAAmB,EAAE;YACtC,QAAQ,EAAE,8CAAyC;SACpD;QACD;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC;YACjD,QAAQ,EAAE,CACR,yBAAgB,qBAAqB;gBACnC,6CAEE,QAAQ,EAAC,aAAa,EACtB,OAAO,EAAC,sBAAsB,GACpB;gBAEZ,6CAEE,QAAQ,EAAC,SAAS,EAClB,OAAO,EAAC,SAAS,GACP;gBAEZ,6CAEE,QAAQ,EAAC,OAAO,EAChB,OAAO,EAAC,OAAO,GACL;gBAEZ,6CAEE,QAAQ,EAAC,SAAS,EAClB,OAAO,EAAC,SAAS,GACP;gBAEZ,6CAEE,QAAQ,EAAC,SAAS,EAClB,OAAO,EAAC,SAAS,GACP,CACR,CACP;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;YAChD,IAAI,EAAE,EAAE,OAAO,EAAE,gBAAgB,EAAE;YACnC,QAAQ,EAAE,CACR;gBACE,+CAA8C,CACrC,CACZ;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;YAChD,IAAI,EAAE;gBACJ,OAAO,EAAE,gBAAgB;gBACzB,OAAO,EAAE,4CAA4C;aACtD;YACD,QAAQ,EAAE,8CAAyC;SACpD;QACD;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;YAC7C,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,EAAE;YACnE,QAAQ,EAAE,8CAAyC;SACpD;QACD;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC;YACpD,IAAI,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,OAAO,EAAE,2BAA2B,EAAE;YACjE,QAAQ,EAAE,8CAAyC;SACpD;QACD;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC;YACzD,IAAI,EAAE;gBACJ,gBAAgB,EAAE,IAAI;gBACtB,WAAW,EAAE,IAAI;gBACjB,OAAO,EAAE,6BAA6B;aACvC;YACD,QAAQ,EAAE,8CAAyC;SACpD;QACD;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC;YAC/C,IAAI,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,+BAA+B,EAAE;YAChE,QAAQ,EAAE,8CAAyC;SACpD;QACD;YACE,IAAI,EAAE,aAAa;YACnB,WAAW,EACT,sEAAsE;YACxE,QAAQ,EAAE,CACR;gBACE,WAAK,GAAG,EAAC,+BAA+B,gBAAY,YAAY,GAAG,CAC1D,CACZ;SACF;KACF;CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvAlertDocs: NovaDocs<Components.NvAlert> = {\n  component: 'nv-alert',\n  subcomponents: ['nv-button'],\n  stories: [\n    {\n      name: 'Default',\n      args: { message: 'This is an alert!' },\n      template: <nv-alert data-storybook-args></nv-alert>,\n    },\n    {\n      name: nameof<Components.NvAlert>(x => x.feedback),\n      template: (\n        <div data-class=\"flex flex-col gap-4\">\n          <nv-alert\n            data-storybook-args\n            feedback=\"information\"\n            heading=\"Default: Information\"\n          ></nv-alert>\n\n          <nv-alert\n            data-storybook-args\n            feedback=\"warning\"\n            heading=\"Warning\"\n          ></nv-alert>\n\n          <nv-alert\n            data-storybook-args\n            feedback=\"error\"\n            heading=\"Error\"\n          ></nv-alert>\n\n          <nv-alert\n            data-storybook-args\n            feedback=\"success\"\n            heading=\"Success\"\n          ></nv-alert>\n\n          <nv-alert\n            data-storybook-args\n            feedback=\"neutral\"\n            heading=\"Neutral\"\n          ></nv-alert>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvAlert>(x => x.message),\n      args: { message: 'custom message' },\n      template: (\n        <nv-alert data-storybook-args>\n          <nv-button>With additional actions</nv-button>\n        </nv-alert>\n      ),\n    },\n    {\n      name: nameof<Components.NvAlert>(x => x.heading),\n      args: {\n        heading: 'Custom Heading',\n        message: 'The content is rendered below the heading.',\n      },\n      template: <nv-alert data-storybook-args></nv-alert>,\n    },\n    {\n      name: nameof<Components.NvAlert>(x => x.icon),\n      args: { icon: 'user', message: 'You can change the default icon.' },\n      template: <nv-alert data-storybook-args></nv-alert>,\n    },\n    {\n      name: nameof<Components.NvAlert>(x => x.dismissible),\n      args: { dismissible: true, message: 'You can close this alert.' },\n      template: <nv-alert data-storybook-args></nv-alert>,\n    },\n    {\n      name: nameof<Components.NvAlert>(x => x.preventAutoClose),\n      args: {\n        preventAutoClose: true,\n        dismissible: true,\n        message: 'Prevent auto close enabled.',\n      },\n      template: <nv-alert data-storybook-args></nv-alert>,\n    },\n    {\n      name: nameof<Components.NvAlert>(x => x.hidden),\n      args: { hidden: true, message: 'This is hidden until changed.' },\n      template: <nv-alert data-storybook-args></nv-alert>,\n    },\n    {\n      name: 'DefaultSlot',\n      description:\n        'The default slot can be used to add additional content to the alert.',\n      template: (\n        <nv-alert data-storybook-args>\n          <img src=\"https://picsum.photos/200/200\" data-class=\"rounded-md\" />\n        </nv-alert>\n      ),\n    },\n  ],\n};\n\nexport default NvAlertDocs;\n"]}

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

@@ -0,0 +1,355 @@
+import { Host, h, } from "@stencil/core";
+import clsx from "clsx";
+import { FeedbackColors, } from "../../utils/constants";
+import { useCollapse, useFade, timeline } from "../../animations";
+/**
+ * @slot default - Use this slot to insert HTML into the alert content.
+ */
+export class NvAlert {
+    constructor() {
+        //#endregion WATCHERS
+        /****************************************************************************/
+        //#region METHODS
+        /**
+         * Handles the dismissal of the alert, considering the preventAutoClose prop.
+         * Passes the original event from the close button to the close event detail.
+         * @param {MouseEvent} originalEvent - The original event from the close button.
+         */
+        this.handleDismiss = (originalEvent) => {
+            if (!this.preventAutoClose) {
+                this.hidden = true;
+            }
+            this.closeClicked.emit(originalEvent);
+        };
+        /**
+         * By default an icon is linked to the feedback type
+         * @returns {string} - The default icon name.
+         */
+        this.getDefaultIcon = () => {
+            switch (this.feedback) {
+                case FeedbackColors.Warning:
+                    return 'alert-circle';
+                case FeedbackColors.Information:
+                    return 'info-circle';
+                case FeedbackColors.Success:
+                    return 'circle-check';
+                case FeedbackColors.Error:
+                    return 'alert-circle';
+                case FeedbackColors.Neutral:
+                    return 'help';
+                default:
+                    return 'info-circle';
+            }
+        };
+        this.color = undefined;
+        this.feedback = 'information';
+        this.message = undefined;
+        this.heading = undefined;
+        this.icon = undefined;
+        this.dismissible = false;
+        this.preventAutoClose = false;
+        this.hidden = false;
+    }
+    componentWillRender() {
+        if (this.color) {
+            switch (this.color) {
+                case 'primary':
+                    this.feedback = 'warning';
+                    break;
+                case 'secondary':
+                    this.feedback = 'information';
+                    break;
+                case 'neutral':
+                    this.feedback = 'information';
+                    break;
+                default:
+                    this.feedback = this.color;
+            }
+        }
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region WATCHERS
+    /**
+     * Used for 2 way binding with the hidden property.
+     * Triggers open and close animations.
+     * @param {boolean} hidden - The visibility state of the alert.
+     */
+    async handleHiddenChange(hidden) {
+        this.hiddenChanged.emit(hidden);
+        const { fadeIn, fadeOut } = useFade(this.ref, { duration: 150 });
+        const { collapse, expand } = useCollapse(this.ref, { duration: 150 });
+        if (hidden === true)
+            await timeline(fadeOut, collapse).start();
+        if (hidden === false)
+            await timeline(expand, fadeIn).start();
+        this.hiddenChangedComplete.emit(hidden);
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        if (this.color) {
+            switch (this.color) {
+                case 'primary':
+                    this.feedback = 'warning';
+                    break;
+                case 'secondary':
+                    this.feedback = 'information';
+                    break;
+                case 'neutral':
+                    this.feedback = 'information';
+                    break;
+                default:
+                    this.feedback = this.color;
+            }
+        }
+        if (this.hidden) {
+            const { setCollapsed } = useCollapse(this.ref);
+            const { setFadeOut } = useFade(this.ref);
+            setCollapsed();
+            setFadeOut();
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        var _a;
+        return (h(Host, { key: '6df6a1c8f72ca1291f3ba03242225fb63b43e6dd', role: "alert", class: clsx('root', `feedback-${this.feedback}`) }, h("nv-icon", { key: '51b6e7d130b4c81e1de48c511dfe2edc52de5bfb', name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.getDefaultIcon(), class: `icon-${this.feedback}`, size: "md" }), h("div", { key: 'dac06159b49e2a6caf48245a8131dcd6d530c346', class: "content" }, this.heading && h("p", { key: '8fb6805d964174a0c5808e49152f4c047cba1f82', class: "heading" }, this.heading), this.message && h("p", { key: 'ff5a70d54c760651e3cfa7dfff40095d9599e448', class: "message" }, this.message), h("slot", { key: '546aff25cadda8a402e2b45b2f4f039a7e3a7ecc' })), this.dismissible && (h("button", { key: 'a43b47df76ede8cf646b9c8430532848b73008f4', class: "close", type: "button", onClick: this.handleDismiss }, h("nv-icon", { key: 'cef62db2b2234101c49a44c80ebfa9224220ec0b', name: "x", size: "sm" })))));
+    }
+    static get is() { return "nv-alert"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nv-alert.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nv-alert.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "`${DeprecatedSemanticColors}`",
+                    "resolved": "\"error\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\"",
+                    "references": {
+                        "DeprecatedSemanticColors": {
+                            "location": "import",
+                            "path": "../../utils/constants",
+                            "id": "src/utils/constants.ts::DeprecatedSemanticColors"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "use feedback instead."
+                        }],
+                    "text": "Defines color of the alert."
+                },
+                "attribute": "color",
+                "reflect": false
+            },
+            "feedback": {
+                "type": "string",
+                "mutable": true,
+                "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 alert type which determines the color and default icon."
+                },
+                "attribute": "feedback",
+                "reflect": true,
+                "defaultValue": "'information'"
+            },
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Main content of the alert. For more complex content, use the default slot\ninstead."
+                },
+                "attribute": "message",
+                "reflect": true
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Short and concise text for the alert title."
+                },
+                "attribute": "heading",
+                "reflect": true
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon associated with the alert, defaults vary based on the feedback type."
+                },
+                "attribute": "icon",
+                "reflect": true
+            },
+            "dismissible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allows the alert to be dismissed via a close button (x). The alert is not\ndismissible unless explicitly enabled."
+                },
+                "attribute": "dismissible",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "preventAutoClose": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, the alert does not automatically close upon dismissing.\nUseful for externally controlled component behavior."
+                },
+                "attribute": "prevent-auto-close",
+                "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 alert. Will animate with fade and collapse."
+                },
+                "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": {}
+                }
+            }, {
+                "method": "hiddenChangedComplete",
+                "name": "hiddenChangedComplete",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the animations complete, detail includes the hidden value."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "closeClicked",
+                "name": "closeClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the close button is clicked."
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "ref"; }
+    static get watchers() {
+        return [{
+                "propName": "hidden",
+                "methodName": "handleHiddenChange"
+            }];
+    }
+}
+//# sourceMappingURL=nv-alert.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nv-alert.js","sourceRoot":"","sources":["../../../src/components/nv-alert/nv-alert.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Watch,\n  Element,\n} from '@stencil/core';\nimport clsx from 'clsx';\n\nimport {\n  DeprecatedSemanticColors,\n  FeedbackColors,\n} from '../../utils/constants';\nimport { useCollapse, useFade, timeline } from '../../animations';\n\n/**\n * @slot default - Use this slot to insert HTML into the alert content.\n */\n@Component({\n  tag: 'nv-alert',\n  styleUrl: 'nv-alert.scss',\n  shadow: false,\n})\nexport class NvAlert {\n  @Element() ref: HTMLNvAlertElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Defines color of the alert.\n   * @deprecated use feedback instead.\n   */\n  @Prop()\n  readonly color: `${DeprecatedSemanticColors}`;\n\n  componentWillRender() {\n    if (this.color) {\n      switch (this.color) {\n        case 'primary' as DeprecatedSemanticColors:\n          this.feedback = 'warning' as FeedbackColors;\n          break;\n        case 'secondary' as DeprecatedSemanticColors:\n          this.feedback = 'information' as FeedbackColors;\n          break;\n        case 'neutral' as DeprecatedSemanticColors:\n          this.feedback = 'information' as FeedbackColors;\n          break;\n        default:\n          this.feedback = this.color as FeedbackColors;\n      }\n    }\n  }\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Specifies the alert type which determines the color and default icon.\n   */\n  @Prop({ reflect: true, mutable: true })\n  feedback: `${FeedbackColors}` = 'information';\n\n  /**\n   * Main content of the alert. For more complex content, use the default slot\n   * instead.\n   */\n  @Prop({ reflect: true })\n  readonly message: string;\n\n  /**\n   * Short and concise text for the alert title.\n   */\n  @Prop({ reflect: true })\n  readonly heading: string;\n\n  /**\n   * Icon associated with the alert, defaults vary based on the feedback type.\n   */\n  @Prop({ reflect: true })\n  readonly icon: string;\n\n  /**\n   * Allows the alert to be dismissed via a close button (x). The alert is not\n   * dismissible unless explicitly enabled.\n   */\n  @Prop({ reflect: true })\n  readonly dismissible: boolean = false;\n\n  /**\n   * When true, the alert does not automatically close upon dismissing.\n   * Useful for externally controlled component behavior.\n   */\n  @Prop({ reflect: true })\n  readonly preventAutoClose: boolean = false;\n\n  /**\n   * Controls the visibility of the alert. Will animate with fade and collapse.\n   */\n  @Prop({ reflect: true, mutable: true })\n  hidden: boolean = false; // eslint-disable-line @stencil-community/reserved-member-names\n\n  //#endregion PROPERTIES\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  /**\n   * Emitted when the animations complete, detail includes the hidden value.\n   */\n  @Event()\n  hiddenChangedComplete: EventEmitter<boolean>;\n\n  /**\n   * Emitted when the close button is clicked.\n   */\n  @Event()\n  closeClicked: EventEmitter<MouseEvent>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Used for 2 way binding with the hidden property.\n   * Triggers open and close animations.\n   * @param {boolean} hidden - The visibility state of the alert.\n   */\n  @Watch('hidden')\n  async handleHiddenChange(hidden: boolean) {\n    this.hiddenChanged.emit(hidden);\n\n    const { fadeIn, fadeOut } = useFade(this.ref, { duration: 150 });\n    const { collapse, expand } = useCollapse(this.ref, { duration: 150 });\n\n    if (hidden === true) await timeline(fadeOut, collapse).start();\n    if (hidden === false) await timeline(expand, fadeIn).start();\n\n    this.hiddenChangedComplete.emit(hidden);\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles the dismissal of the alert, considering the preventAutoClose prop.\n   * Passes the original event from the close button to the close event detail.\n   * @param {MouseEvent} originalEvent - The original event from the close button.\n   */\n  private handleDismiss = (originalEvent?: MouseEvent) => {\n    if (!this.preventAutoClose) {\n      this.hidden = true;\n    }\n\n    this.closeClicked.emit(originalEvent);\n  };\n\n  /**\n   * By default an icon is linked to the feedback type\n   * @returns {string} - The default icon name.\n   */\n  private getDefaultIcon = () => {\n    switch (this.feedback) {\n      case FeedbackColors.Warning:\n        return 'alert-circle';\n      case FeedbackColors.Information:\n        return 'info-circle';\n      case FeedbackColors.Success:\n        return 'circle-check';\n      case FeedbackColors.Error:\n        return 'alert-circle';\n      case FeedbackColors.Neutral:\n        return 'help';\n      default:\n        return 'info-circle';\n    }\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (this.color) {\n      switch (this.color) {\n        case 'primary' as DeprecatedSemanticColors:\n          this.feedback = 'warning' as FeedbackColors;\n          break;\n        case 'secondary' as DeprecatedSemanticColors:\n          this.feedback = 'information' as FeedbackColors;\n          break;\n        case 'neutral' as DeprecatedSemanticColors:\n          this.feedback = 'information' as FeedbackColors;\n          break;\n        default:\n          this.feedback = this.color as FeedbackColors;\n      }\n    }\n\n    if (this.hidden) {\n      const { setCollapsed } = useCollapse(this.ref);\n      const { setFadeOut } = useFade(this.ref);\n\n      setCollapsed();\n      setFadeOut();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host role=\"alert\" class={clsx('root', `feedback-${this.feedback}`)}>\n        <nv-icon\n          name={this.icon ?? this.getDefaultIcon()}\n          class={`icon-${this.feedback}`}\n          size=\"md\"\n        ></nv-icon>\n\n        <div class=\"content\">\n          {this.heading && <p class=\"heading\">{this.heading}</p>}\n\n          {this.message && <p class=\"message\">{this.message}</p>}\n\n          <slot></slot>\n        </div>\n\n        {this.dismissible && (\n          <button class=\"close\" type=\"button\" onClick={this.handleDismiss}>\n            <nv-icon name=\"x\" size=\"sm\" />\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}

package/dist/collection/components/nv-avatar/nv-avatar.css

@@ -0,0 +1,154 @@
+/* Variants */
+nv-icon {
+  display: inline-block;
+  width: fit-content;
+  height: fit-content;
+  color: inherit;
+}
+nv-icon > .nv-icon-xs {
+  width: var(--spacing-3);
+  height: var(--spacing-3);
+  stroke-width: 1.2px;
+}
+nv-icon > .nv-icon-sm {
+  width: var(--spacing-4);
+  height: var(--spacing-4);
+  stroke-width: 1.5px;
+}
+nv-icon > .nv-icon-md {
+  width: var(--spacing-5);
+  height: var(--spacing-5);
+  stroke-width: 1.6px;
+}
+nv-icon > .nv-icon-lg {
+  width: var(--spacing-6);
+  height: var(--spacing-6);
+  stroke-width: 1.8px;
+}
+nv-icon > .nv-icon-xl {
+  width: var(--spacing-7);
+  height: var(--spacing-7);
+  stroke-width: 1.9px;
+}
+
+/* Variants */
+/* Define maps for size-related variables */
+/* Define maps for color-related variables */
+nv-avatar {
+  align-items: center !important;
+  background-color: var(--components-avatar-background-1);
+  border-radius: var(--radius-rounded-full) !important;
+  display: flex !important;
+  flex-shrink: 0 !important;
+  font-family: "TT Norms Pro", sans-serif;
+  font-style: normal;
+  font-weight: var(--font-weight-medium-emphasis);
+  justify-content: center !important;
+  leading-trim: both;
+  line-height: 1 !important;
+  text-align: center;
+  text-edge: cap;
+  text-transform: uppercase;
+}
+nv-avatar.avatar-color-1 {
+  background-color: var(--components-avatar-background-1);
+  color: var(--components-avatar-content-1);
+}
+nv-avatar.avatar-color-2 {
+  background-color: var(--components-avatar-background-2);
+  color: var(--components-avatar-content-2);
+}
+nv-avatar.avatar-color-3 {
+  background-color: var(--components-avatar-background-3);
+  color: var(--components-avatar-content-3);
+}
+nv-avatar.avatar-color-4 {
+  background-color: var(--components-avatar-background-4);
+  color: var(--components-avatar-content-4);
+}
+nv-avatar.avatar-color-5 {
+  background-color: var(--components-avatar-background-5);
+  color: var(--components-avatar-content-5);
+}
+nv-avatar.avatar-color-6 {
+  background-color: var(--components-avatar-background-6);
+  color: var(--components-avatar-content-6);
+}
+nv-avatar.avatar-color-7 {
+  background-color: var(--components-avatar-background-7);
+  color: var(--components-avatar-content-7);
+}
+nv-avatar.avatar-color-8 {
+  background-color: var(--components-avatar-background-8);
+  color: var(--components-avatar-content-8);
+}
+nv-avatar.avatar-color-9 {
+  background-color: var(--components-avatar-background-9);
+  color: var(--components-avatar-content-9);
+}
+nv-avatar.avatar-color-10 {
+  background-color: var(--components-avatar-background-10);
+  color: var(--components-avatar-content-10);
+}
+nv-avatar img {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  object-position: center;
+  border-radius: 50%;
+}
+nv-avatar.avatar-xs {
+  width: var(--avatar-xs-size);
+  height: var(--avatar-xs-size);
+  font-size: var(--avatar-xs-font-size);
+  line-height: var(--avatar-xs-font-size);
+}
+nv-avatar.avatar-xs nv-icon > svg {
+  width: var(--spacing-3);
+  height: var(--spacing-3);
+  stroke-width: 1.2px;
+}
+nv-avatar.avatar-sm {
+  width: var(--avatar-sm-size);
+  height: var(--avatar-sm-size);
+  font-size: var(--avatar-sm-font-size);
+  line-height: var(--avatar-sm-font-size);
+}
+nv-avatar.avatar-sm nv-icon > svg {
+  width: var(--spacing-4);
+  height: var(--spacing-4);
+  stroke-width: 1.5px;
+}
+nv-avatar.avatar-md {
+  width: var(--avatar-md-size);
+  height: var(--avatar-md-size);
+  font-size: var(--avatar-md-font-size);
+  line-height: var(--avatar-md-font-size);
+}
+nv-avatar.avatar-md nv-icon > svg {
+  width: var(--spacing-5);
+  height: var(--spacing-5);
+  stroke-width: 1.6px;
+}
+nv-avatar.avatar-lg {
+  width: var(--avatar-lg-size);
+  height: var(--avatar-lg-size);
+  font-size: var(--avatar-lg-font-size);
+  line-height: var(--avatar-lg-font-size);
+}
+nv-avatar.avatar-lg nv-icon > svg {
+  width: var(--spacing-6);
+  height: var(--spacing-6);
+  stroke-width: 1.8px;
+}
+nv-avatar.avatar-xl {
+  width: var(--avatar-xl-size);
+  height: var(--avatar-xl-size);
+  font-size: var(--avatar-xl-font-size);
+  line-height: var(--avatar-xl-font-size);
+}
+nv-avatar.avatar-xl nv-icon > svg {
+  width: var(--spacing-7);
+  height: var(--spacing-7);
+  stroke-width: 1.9px;
+}

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

@@ -0,0 +1,42 @@
+import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
+const NvAvatarDocs = {
+    component: 'nv-avatar',
+    subcomponents: ['nv-icon'],
+    stories: [
+        {
+            name: 'Default',
+            template: h("nv-avatar", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.size),
+            template: (h("div", { "data-class": "flex gap-4 items-center" }, h("nv-avatar", { "data-storybook-args": true, initials: "xs", size: "xs" }), h("nv-avatar", { "data-storybook-args": true, initials: "sm", size: "sm" }), h("nv-avatar", { "data-storybook-args": true, initials: "md", size: "md" }), h("nv-avatar", { "data-storybook-args": true, initials: "lg", size: "lg" }), h("nv-avatar", { "data-storybook-args": true, initials: "xl", size: "xl" }), h("nv-avatar", { "data-storybook-args": true, size: "xs" }), h("nv-avatar", { "data-storybook-args": true, size: "sm" }), h("nv-avatar", { "data-storybook-args": true, size: "md" }), h("nv-avatar", { "data-storybook-args": true, size: "lg" }), h("nv-avatar", { "data-storybook-args": true, size: "xl" }))),
+        },
+        {
+            name: nameof(x => x.color),
+            template: (h("div", { "data-class": "flex gap-4" }, h("nv-avatar", { "data-storybook-args": true, initials: "1", color: "1" }), h("nv-avatar", { "data-storybook-args": true, initials: "2", color: "2" }), h("nv-avatar", { "data-storybook-args": true, initials: "3", color: "3" }), h("nv-avatar", { "data-storybook-args": true, initials: "4", color: "4" }), h("nv-avatar", { "data-storybook-args": true, initials: "5", color: "5" }), h("nv-avatar", { "data-storybook-args": true, initials: "6", color: "6" }), h("nv-avatar", { "data-storybook-args": true, initials: "7", color: "7" }), h("nv-avatar", { "data-storybook-args": true, initials: "8", color: "8" }), h("nv-avatar", { "data-storybook-args": true, initials: "9", color: "9" }), h("nv-avatar", { "data-storybook-args": true, initials: "10", color: "10" }))),
+        },
+        {
+            name: nameof(x => x.initials),
+            args: { initials: 'AB' },
+            template: h("nv-avatar", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.alt),
+            args: { alt: 'User profile picture', src: 'https://picsum.photos/200' },
+            template: h("nv-avatar", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.src),
+            args: { src: 'https://picsum.photos/200' },
+            template: h("nv-avatar", { "data-storybook-args": true }),
+        },
+        {
+            name: 'SlotIcon',
+            description: 'Add an icon to the avatar using the slot',
+            template: (h("nv-avatar", { "data-storybook-args": true }, h("nv-icon", { slot: "icon", name: "calendar" }))),
+        },
+    ],
+};
+export default NvAvatarDocs;
+//# sourceMappingURL=nv-avatar.docs.js.map