@nova-design-system/nova-react 3.0.0-beta.43 → 3.0.0-beta.44

package/dist/cjs/nv-alert.entry-CwZcD170.js

@@ -0,0 +1,173 @@
+'use strict';
+
+var index = require('./index-BZCQTWfv.js');
+var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
+var constants98e2dcc2 = require('./constants-98e2dcc2-C0SBCapP.js');
+var timeline_animation1b88f052 = require('./timeline.animation-1b88f052-B8-vCVrY.js');
+var fade_animation2a077983 = require('./fade.animation-2a077983-aKN0EDTo.js');
+require('react');
+
+const nvAlertCss = "nv-alert{display:flex !important;align-items:flex-start;position:relative;gap:var(--alert-gap-x);border-radius:var(--alert-radius);font-family:\"TT Norms Pro\", \"Montserrat\", sans-serif}nv-alert>nv-icon{margin-left:var(--alert-icon-position-x);margin-top:var(--alert-icon-position-y)}nv-alert.feedback-information{background-color:var(--components-alert-information-background);border:1px solid var(--components-alert-information-border) !important}nv-alert.feedback-information>.close:focus,nv-alert.feedback-information>.close:focus-within{outline:none}nv-alert.feedback-information>.close:focus-visible,nv-alert.feedback-information>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-information-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-warning{background-color:var(--components-alert-warning-background);border:1px solid var(--components-alert-warning-border) !important}nv-alert.feedback-warning>.close:focus,nv-alert.feedback-warning>.close:focus-within{outline:none}nv-alert.feedback-warning>.close:focus-visible,nv-alert.feedback-warning>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-warning-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-error{background-color:var(--components-alert-error-background);border:1px solid var(--components-alert-error-border) !important}nv-alert.feedback-error>.close:focus,nv-alert.feedback-error>.close:focus-within{outline:none}nv-alert.feedback-error>.close:focus-visible,nv-alert.feedback-error>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-error-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-success{background-color:var(--components-alert-success-background);border:1px solid var(--components-alert-success-border) !important}nv-alert.feedback-success>.close:focus,nv-alert.feedback-success>.close:focus-within{outline:none}nv-alert.feedback-success>.close:focus-visible,nv-alert.feedback-success>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-success-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-neutral{background-color:var(--components-alert-neutral-background);border:1px solid var(--components-alert-neutral-border) !important}nv-alert.feedback-neutral>.close:focus,nv-alert.feedback-neutral>.close:focus-within{outline:none}nv-alert.feedback-neutral>.close:focus-visible,nv-alert.feedback-neutral>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-neutral-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert>nv-icon.icon-information{color:var(--components-alert-information-icon)}nv-alert>nv-icon.icon-warning{color:var(--components-alert-warning-icon)}nv-alert>nv-icon.icon-error{color:var(--components-alert-error-icon)}nv-alert>nv-icon.icon-success{color:var(--components-alert-success-icon)}nv-alert>nv-icon.icon-neutral{color:var(--components-alert-neutral-icon)}nv-alert>.content{display:flex;padding:var(--alert-padding);padding-left:0;flex-direction:column;gap:var(--alert-gap-y)}nv-alert>.content>.heading{color:var(--components-alert-content-title);font-size:var(--alert-heading-font-size);line-height:var(--alert-heading-line-height);font-weight:var(--alert-heading-font-weight)}nv-alert>.content>.message{color:var(--components-alert-content-description);font-size:var(--alert-message-font-size);line-height:var(--alert-message-line-height)}nv-alert>.close{border-radius:var(--alert-radius);position:absolute;display:flex;top:var(--alert-icon-position-y);right:var(--alert-icon-position-x);padding:0;border:none;background:none;cursor:pointer}";
+const NvAlertStyle0 = nvAlertCss;
+
+const NvAlert = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.hiddenChanged = index.createEvent(this, "hiddenChanged");
+        this.hiddenChangedComplete = index.createEvent(this, "hiddenChangedComplete");
+        this.closeClicked = index.createEvent(this, "closeClicked");
+        //#endregion DEPRECATED
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Specifies the alert type which determines the color and default icon.
+         */
+        this.feedback = 'information';
+        /**
+         * Allows the alert to be dismissed via a close button (x). The alert is not
+         * dismissible unless explicitly enabled.
+         */
+        this.dismissible = false;
+        /**
+         * When true, the alert does not automatically close upon dismissing.
+         * Useful for externally controlled component behavior.
+         */
+        this.preventAutoClose = false;
+        /**
+         * Controls the visibility of the alert. Will animate with fade and collapse.
+         */
+        this.hidden = false; // eslint-disable-line @stencil-community/reserved-member-names
+        /**
+         * When true, the alert will not animate when it is hidden or shown.
+         */
+        this.hasNoAnimations = false;
+        //#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 constants98e2dcc2.FeedbackColors.Warning:
+                    return 'alert-circle';
+                case constants98e2dcc2.FeedbackColors.Information:
+                    return 'info-circle';
+                case constants98e2dcc2.FeedbackColors.Success:
+                    return 'circle-check';
+                case constants98e2dcc2.FeedbackColors.Error:
+                    return 'alert-circle';
+                case constants98e2dcc2.FeedbackColors.Neutral:
+                    return 'help';
+                default:
+                    return 'info-circle';
+            }
+        };
+    }
+    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);
+        await this.updateVisibility(hidden);
+        this.hiddenChangedComplete.emit(hidden);
+    }
+    /**
+     * Updates the visibility state of the alert with optional animations
+     * @param {boolean} hidden - Whether the alert should be hidden
+     */
+    async updateVisibility(hidden) {
+        if (this.hasNoAnimations) {
+            this.toggleHiddenClass(hidden);
+            return;
+        }
+        const { fadeIn, fadeOut } = fade_animation2a077983.useFade(this.ref, { duration: 150 });
+        const { collapse, expand } = timeline_animation1b88f052.useCollapse(this.ref, { duration: 150 });
+        if (hidden) {
+            await timeline_animation1b88f052.timeline(fadeOut, collapse).start();
+            this.toggleHiddenClass(true);
+        }
+        else {
+            this.toggleHiddenClass(false);
+            await timeline_animation1b88f052.timeline(expand, fadeIn).start();
+        }
+    }
+    /**
+     * Toggles the 'hidden' class on the element
+     * @param {boolean} hidden - Whether to add or remove the hidden class
+     */
+    toggleHiddenClass(hidden) {
+        this.ref.classList.toggle('hidden', 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) {
+            this.ref.classList.add('hidden');
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        var _a;
+        return (index.h(index.Host, { key: '4c91e200a6eb2f11ecde0ee6bd5fbed8a7f9fe42', role: "alert", class: clsx297c1ffe.clsx('root', `feedback-${this.feedback}`) }, index.h("nv-icon", { key: '35ab5320ea3817717bd8328ab969a88a09e7bad2', name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.getDefaultIcon(), class: `icon-${this.feedback}`, size: "md" }), index.h("div", { key: '5b152a1762c2a6ac637f7fe237ebe29954aa1a00', class: "content" }, this.heading && index.h("p", { key: 'c955254210c0df22004ac3eed3b5d91a847dcb7b', class: "heading" }, this.heading), this.message && index.h("p", { key: '623ef5fb99dbdaa15255e49262994474f78efb71', class: "message" }, this.message), index.h("slot", { key: '05b862a15f47eeef8381e91665104c75a100294c' })), this.dismissible && (index.h("button", { key: '6f7cb842fca3d0ec2c2bd1201454b906821721fb', class: "close", type: "button", onClick: this.handleDismiss }, index.h("nv-icon", { key: 'dfbc3e788b9c5d71528d7604602a9418c555e17b', name: "x", size: "sm" })))));
+    }
+    get ref() { return index.getElement(this); }
+    static get watchers() { return {
+        "hidden": ["handleHiddenChange"]
+    }; }
+};
+NvAlert.style = NvAlertStyle0;
+
+exports.nv_alert = NvAlert;

package/dist/cjs/nv-alert.entry-CxSN1zpW.js

@@ -0,0 +1,173 @@
+'use strict';
+
+var index = require('./index-CIcUUomJ.js');
+var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
+var constants98e2dcc2 = require('./constants-98e2dcc2-C0SBCapP.js');
+var timeline_animation1b88f052 = require('./timeline.animation-1b88f052-B8-vCVrY.js');
+var fade_animation2a077983 = require('./fade.animation-2a077983-aKN0EDTo.js');
+require('react');
+
+const nvAlertCss = "nv-alert{display:flex !important;align-items:flex-start;position:relative;gap:var(--alert-gap-x);border-radius:var(--alert-radius);font-family:\"TT Norms Pro\", \"Montserrat\", sans-serif}nv-alert>nv-icon{margin-left:var(--alert-icon-position-x);margin-top:var(--alert-icon-position-y)}nv-alert.feedback-information{background-color:var(--components-alert-information-background);border:1px solid var(--components-alert-information-border) !important}nv-alert.feedback-information>.close:focus,nv-alert.feedback-information>.close:focus-within{outline:none}nv-alert.feedback-information>.close:focus-visible,nv-alert.feedback-information>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-information-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-warning{background-color:var(--components-alert-warning-background);border:1px solid var(--components-alert-warning-border) !important}nv-alert.feedback-warning>.close:focus,nv-alert.feedback-warning>.close:focus-within{outline:none}nv-alert.feedback-warning>.close:focus-visible,nv-alert.feedback-warning>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-warning-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-error{background-color:var(--components-alert-error-background);border:1px solid var(--components-alert-error-border) !important}nv-alert.feedback-error>.close:focus,nv-alert.feedback-error>.close:focus-within{outline:none}nv-alert.feedback-error>.close:focus-visible,nv-alert.feedback-error>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-error-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-success{background-color:var(--components-alert-success-background);border:1px solid var(--components-alert-success-border) !important}nv-alert.feedback-success>.close:focus,nv-alert.feedback-success>.close:focus-within{outline:none}nv-alert.feedback-success>.close:focus-visible,nv-alert.feedback-success>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-success-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-neutral{background-color:var(--components-alert-neutral-background);border:1px solid var(--components-alert-neutral-border) !important}nv-alert.feedback-neutral>.close:focus,nv-alert.feedback-neutral>.close:focus-within{outline:none}nv-alert.feedback-neutral>.close:focus-visible,nv-alert.feedback-neutral>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-neutral-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert>nv-icon.icon-information{color:var(--components-alert-information-icon)}nv-alert>nv-icon.icon-warning{color:var(--components-alert-warning-icon)}nv-alert>nv-icon.icon-error{color:var(--components-alert-error-icon)}nv-alert>nv-icon.icon-success{color:var(--components-alert-success-icon)}nv-alert>nv-icon.icon-neutral{color:var(--components-alert-neutral-icon)}nv-alert>.content{display:flex;padding:var(--alert-padding);padding-left:0;flex-direction:column;gap:var(--alert-gap-y)}nv-alert>.content>.heading{color:var(--components-alert-content-title);font-size:var(--alert-heading-font-size);line-height:var(--alert-heading-line-height);font-weight:var(--alert-heading-font-weight)}nv-alert>.content>.message{color:var(--components-alert-content-description);font-size:var(--alert-message-font-size);line-height:var(--alert-message-line-height)}nv-alert>.close{border-radius:var(--alert-radius);position:absolute;display:flex;top:var(--alert-icon-position-y);right:var(--alert-icon-position-x);padding:0;border:none;background:none;cursor:pointer}";
+const NvAlertStyle0 = nvAlertCss;
+
+const NvAlert = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.hiddenChanged = index.createEvent(this, "hiddenChanged");
+        this.hiddenChangedComplete = index.createEvent(this, "hiddenChangedComplete");
+        this.closeClicked = index.createEvent(this, "closeClicked");
+        //#endregion DEPRECATED
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Specifies the alert type which determines the color and default icon.
+         */
+        this.feedback = 'information';
+        /**
+         * Allows the alert to be dismissed via a close button (x). The alert is not
+         * dismissible unless explicitly enabled.
+         */
+        this.dismissible = false;
+        /**
+         * When true, the alert does not automatically close upon dismissing.
+         * Useful for externally controlled component behavior.
+         */
+        this.preventAutoClose = false;
+        /**
+         * Controls the visibility of the alert. Will animate with fade and collapse.
+         */
+        this.hidden = false; // eslint-disable-line @stencil-community/reserved-member-names
+        /**
+         * When true, the alert will not animate when it is hidden or shown.
+         */
+        this.hasNoAnimations = false;
+        //#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 constants98e2dcc2.FeedbackColors.Warning:
+                    return 'alert-circle';
+                case constants98e2dcc2.FeedbackColors.Information:
+                    return 'info-circle';
+                case constants98e2dcc2.FeedbackColors.Success:
+                    return 'circle-check';
+                case constants98e2dcc2.FeedbackColors.Error:
+                    return 'alert-circle';
+                case constants98e2dcc2.FeedbackColors.Neutral:
+                    return 'help';
+                default:
+                    return 'info-circle';
+            }
+        };
+    }
+    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);
+        await this.updateVisibility(hidden);
+        this.hiddenChangedComplete.emit(hidden);
+    }
+    /**
+     * Updates the visibility state of the alert with optional animations
+     * @param {boolean} hidden - Whether the alert should be hidden
+     */
+    async updateVisibility(hidden) {
+        if (this.hasNoAnimations) {
+            this.toggleHiddenClass(hidden);
+            return;
+        }
+        const { fadeIn, fadeOut } = fade_animation2a077983.useFade(this.ref, { duration: 150 });
+        const { collapse, expand } = timeline_animation1b88f052.useCollapse(this.ref, { duration: 150 });
+        if (hidden) {
+            await timeline_animation1b88f052.timeline(fadeOut, collapse).start();
+            this.toggleHiddenClass(true);
+        }
+        else {
+            this.toggleHiddenClass(false);
+            await timeline_animation1b88f052.timeline(expand, fadeIn).start();
+        }
+    }
+    /**
+     * Toggles the 'hidden' class on the element
+     * @param {boolean} hidden - Whether to add or remove the hidden class
+     */
+    toggleHiddenClass(hidden) {
+        this.ref.classList.toggle('hidden', 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) {
+            this.ref.classList.add('hidden');
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        var _a;
+        return (index.h(index.Host, { key: '4c91e200a6eb2f11ecde0ee6bd5fbed8a7f9fe42', role: "alert", class: clsx297c1ffe.clsx('root', `feedback-${this.feedback}`) }, index.h("nv-icon", { key: '35ab5320ea3817717bd8328ab969a88a09e7bad2', name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.getDefaultIcon(), class: `icon-${this.feedback}`, size: "md" }), index.h("div", { key: '5b152a1762c2a6ac637f7fe237ebe29954aa1a00', class: "content" }, this.heading && index.h("p", { key: 'c955254210c0df22004ac3eed3b5d91a847dcb7b', class: "heading" }, this.heading), this.message && index.h("p", { key: '623ef5fb99dbdaa15255e49262994474f78efb71', class: "message" }, this.message), index.h("slot", { key: '05b862a15f47eeef8381e91665104c75a100294c' })), this.dismissible && (index.h("button", { key: '6f7cb842fca3d0ec2c2bd1201454b906821721fb', class: "close", type: "button", onClick: this.handleDismiss }, index.h("nv-icon", { key: 'dfbc3e788b9c5d71528d7604602a9418c555e17b', name: "x", size: "sm" })))));
+    }
+    get ref() { return index.getElement(this); }
+    static get watchers() { return {
+        "hidden": ["handleHiddenChange"]
+    }; }
+};
+NvAlert.style = NvAlertStyle0;
+
+exports.nv_alert = NvAlert;

package/dist/cjs/nv-alert.entry-DsoqN5tQ.js

@@ -0,0 +1,173 @@
+'use strict';
+
+var index = require('./index-CtI3SivD.js');
+var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
+var constants98e2dcc2 = require('./constants-98e2dcc2-C0SBCapP.js');
+var timeline_animation1b88f052 = require('./timeline.animation-1b88f052-B8-vCVrY.js');
+var fade_animation2a077983 = require('./fade.animation-2a077983-aKN0EDTo.js');
+require('react');
+
+const nvAlertCss = "nv-alert{display:flex !important;align-items:flex-start;position:relative;gap:var(--alert-gap-x);border-radius:var(--alert-radius);font-family:\"TT Norms Pro\", \"Montserrat\", sans-serif}nv-alert>nv-icon{margin-left:var(--alert-icon-position-x);margin-top:var(--alert-icon-position-y)}nv-alert.feedback-information{background-color:var(--components-alert-information-background);border:1px solid var(--components-alert-information-border) !important}nv-alert.feedback-information>.close:focus,nv-alert.feedback-information>.close:focus-within{outline:none}nv-alert.feedback-information>.close:focus-visible,nv-alert.feedback-information>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-information-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-warning{background-color:var(--components-alert-warning-background);border:1px solid var(--components-alert-warning-border) !important}nv-alert.feedback-warning>.close:focus,nv-alert.feedback-warning>.close:focus-within{outline:none}nv-alert.feedback-warning>.close:focus-visible,nv-alert.feedback-warning>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-warning-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-error{background-color:var(--components-alert-error-background);border:1px solid var(--components-alert-error-border) !important}nv-alert.feedback-error>.close:focus,nv-alert.feedback-error>.close:focus-within{outline:none}nv-alert.feedback-error>.close:focus-visible,nv-alert.feedback-error>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-error-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-success{background-color:var(--components-alert-success-background);border:1px solid var(--components-alert-success-border) !important}nv-alert.feedback-success>.close:focus,nv-alert.feedback-success>.close:focus-within{outline:none}nv-alert.feedback-success>.close:focus-visible,nv-alert.feedback-success>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-success-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-neutral{background-color:var(--components-alert-neutral-background);border:1px solid var(--components-alert-neutral-border) !important}nv-alert.feedback-neutral>.close:focus,nv-alert.feedback-neutral>.close:focus-within{outline:none}nv-alert.feedback-neutral>.close:focus-visible,nv-alert.feedback-neutral>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-neutral-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert>nv-icon.icon-information{color:var(--components-alert-information-icon)}nv-alert>nv-icon.icon-warning{color:var(--components-alert-warning-icon)}nv-alert>nv-icon.icon-error{color:var(--components-alert-error-icon)}nv-alert>nv-icon.icon-success{color:var(--components-alert-success-icon)}nv-alert>nv-icon.icon-neutral{color:var(--components-alert-neutral-icon)}nv-alert>.content{display:flex;padding:var(--alert-padding);padding-left:0;flex-direction:column;gap:var(--alert-gap-y)}nv-alert>.content>.heading{color:var(--components-alert-content-title);font-size:var(--alert-heading-font-size);line-height:var(--alert-heading-line-height);font-weight:var(--alert-heading-font-weight)}nv-alert>.content>.message{color:var(--components-alert-content-description);font-size:var(--alert-message-font-size);line-height:var(--alert-message-line-height)}nv-alert>.close{border-radius:var(--alert-radius);position:absolute;display:flex;top:var(--alert-icon-position-y);right:var(--alert-icon-position-x);padding:0;border:none;background:none;cursor:pointer}";
+const NvAlertStyle0 = nvAlertCss;
+
+const NvAlert = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.hiddenChanged = index.createEvent(this, "hiddenChanged");
+        this.hiddenChangedComplete = index.createEvent(this, "hiddenChangedComplete");
+        this.closeClicked = index.createEvent(this, "closeClicked");
+        //#endregion DEPRECATED
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Specifies the alert type which determines the color and default icon.
+         */
+        this.feedback = 'information';
+        /**
+         * Allows the alert to be dismissed via a close button (x). The alert is not
+         * dismissible unless explicitly enabled.
+         */
+        this.dismissible = false;
+        /**
+         * When true, the alert does not automatically close upon dismissing.
+         * Useful for externally controlled component behavior.
+         */
+        this.preventAutoClose = false;
+        /**
+         * Controls the visibility of the alert. Will animate with fade and collapse.
+         */
+        this.hidden = false; // eslint-disable-line @stencil-community/reserved-member-names
+        /**
+         * When true, the alert will not animate when it is hidden or shown.
+         */
+        this.hasNoAnimations = false;
+        //#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 constants98e2dcc2.FeedbackColors.Warning:
+                    return 'alert-circle';
+                case constants98e2dcc2.FeedbackColors.Information:
+                    return 'info-circle';
+                case constants98e2dcc2.FeedbackColors.Success:
+                    return 'circle-check';
+                case constants98e2dcc2.FeedbackColors.Error:
+                    return 'alert-circle';
+                case constants98e2dcc2.FeedbackColors.Neutral:
+                    return 'help';
+                default:
+                    return 'info-circle';
+            }
+        };
+    }
+    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);
+        await this.updateVisibility(hidden);
+        this.hiddenChangedComplete.emit(hidden);
+    }
+    /**
+     * Updates the visibility state of the alert with optional animations
+     * @param {boolean} hidden - Whether the alert should be hidden
+     */
+    async updateVisibility(hidden) {
+        if (this.hasNoAnimations) {
+            this.toggleHiddenClass(hidden);
+            return;
+        }
+        const { fadeIn, fadeOut } = fade_animation2a077983.useFade(this.ref, { duration: 150 });
+        const { collapse, expand } = timeline_animation1b88f052.useCollapse(this.ref, { duration: 150 });
+        if (hidden) {
+            await timeline_animation1b88f052.timeline(fadeOut, collapse).start();
+            this.toggleHiddenClass(true);
+        }
+        else {
+            this.toggleHiddenClass(false);
+            await timeline_animation1b88f052.timeline(expand, fadeIn).start();
+        }
+    }
+    /**
+     * Toggles the 'hidden' class on the element
+     * @param {boolean} hidden - Whether to add or remove the hidden class
+     */
+    toggleHiddenClass(hidden) {
+        this.ref.classList.toggle('hidden', 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) {
+            this.ref.classList.add('hidden');
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        var _a;
+        return (index.h(index.Host, { key: '4c91e200a6eb2f11ecde0ee6bd5fbed8a7f9fe42', role: "alert", class: clsx297c1ffe.clsx('root', `feedback-${this.feedback}`) }, index.h("nv-icon", { key: '35ab5320ea3817717bd8328ab969a88a09e7bad2', name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.getDefaultIcon(), class: `icon-${this.feedback}`, size: "md" }), index.h("div", { key: '5b152a1762c2a6ac637f7fe237ebe29954aa1a00', class: "content" }, this.heading && index.h("p", { key: 'c955254210c0df22004ac3eed3b5d91a847dcb7b', class: "heading" }, this.heading), this.message && index.h("p", { key: '623ef5fb99dbdaa15255e49262994474f78efb71', class: "message" }, this.message), index.h("slot", { key: '05b862a15f47eeef8381e91665104c75a100294c' })), this.dismissible && (index.h("button", { key: '6f7cb842fca3d0ec2c2bd1201454b906821721fb', class: "close", type: "button", onClick: this.handleDismiss }, index.h("nv-icon", { key: 'dfbc3e788b9c5d71528d7604602a9418c555e17b', name: "x", size: "sm" })))));
+    }
+    get ref() { return index.getElement(this); }
+    static get watchers() { return {
+        "hidden": ["handleHiddenChange"]
+    }; }
+};
+NvAlert.style = NvAlertStyle0;
+
+exports.nv_alert = NvAlert;