@nova-design-system/nova-react 3.14.0 → 3.15.0

package/dist/cjs/nv-notification.entry-BiwnZCkF.js

@@ -1,178 +0,0 @@
-'use strict';
-
-var index = require('./index-CKAZvszR.js');
-var constantsD0f19e7b = require('./constants-d0f19e7b-s0SCO_vi.js');
-var collapse_animationAcda1bf5 = require('./collapse.animation-acda1bf5-BuORVmQv.js');
-var fade_animationEb454088 = require('./fade.animation-eb454088-Bma0SpTf.js');
-var styleValueTypes_esF5d10b79 = require('./style-value-types.es-f5d10b79-D0QCM8OB.js');
-var timeline_animation79215cd4 = require('./timeline.animation-79215cd4-KteJaZPb.js');
-var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
-require('react');
-
-const useSlide = (node, { duration } = { duration: 200 }) => {
-    const nodeStyler = fade_animationEb454088.index(node);
-    /**
-     * Will animate the translateX to 100%, sliding the element to the right.
-     */
-    function slideOut() {
-        return new Promise(resolve => {
-            styleValueTypes_esF5d10b79.animate({
-                from: { x: 0 },
-                to: { x: 100 },
-                ease: styleValueTypes_esF5d10b79.easeOut,
-                duration,
-                onUpdate(latest) {
-                    nodeStyler.set({ transform: `translateX(${latest.x}%)` });
-                },
-                onComplete() {
-                    resolve();
-                },
-            });
-        });
-    }
-    /**
-     * Applies the slideOut styles without animating, useful when initial state
-     * is slid out.
-     */
-    function setSlideOut() {
-        node.style.transform = 'translateX(100%)';
-    }
-    /**
-     * Applies the slideIn styles without animating, useful when initial state
-     * is slid in.
-     */
-    function setSlideIn() {
-        node.style.transform = '';
-    }
-    /**
-     * Will animate the translateX from 100% to 0%, sliding the element in from the right.
-     */
-    function slideIn() {
-        return new Promise(resolve => {
-            styleValueTypes_esF5d10b79.animate({
-                from: { x: 100 },
-                to: { x: 0 },
-                duration,
-                onUpdate(latest) {
-                    nodeStyler.set({ transform: `translateX(${latest.x}%)` });
-                },
-                onComplete() {
-                    resolve();
-                    node.style.removeProperty('transform');
-                },
-            });
-        });
-    }
-    return {
-        slideIn,
-        slideOut,
-        setSlideOut,
-        setSlideIn,
-    };
-};
-
-const nvNotificationCss = "nv-notification{display:block}nv-notification [data-scope=container]{display:flex;position:relative;max-width:512px;width:100%;padding:var(--notification-padding);align-items:flex-start;gap:var(--notification-gap-x);border-radius:var(--notification-radius);border-style:solid;box-shadow:0 var(--shadow-y-axis-lg-1, 4px) var(--shadow-blur-lg-1, 6px) var(--shadow-spread-lg-1, -2px) var(--shadow-color-opacity-1, rgba(14, 14, 14, 0.06)), 0 var(--shadow-y-axis-lg-2, 10px) var(--shadow-blur-lg-2, 15px) var(--shadow-spread-lg-2, -3px) var(--shadow-color-opacity-2, rgba(14, 14, 14, 0.1))}nv-notification [data-scope=container]>nv-icon{flex-shrink:0}nv-notification [data-scope=container] [data-scope=dismiss]{padding:var(--button-sm-icon-button-padding, 8px);justify-content:center;align-items:center;gap:var(--button-sm-gap, 6px);display:flex;position:absolute;right:8px;top:8px;border-radius:var(--button-sm-border-radius, 4px);background:var(--components-button-lower-background, rgba(255, 255, 255, 0));color:var(--components-button-lower-icon)}nv-notification [data-scope=container] [data-scope=content]{display:flex;padding-right:var(--notification-padding-right);flex-direction:column;align-items:flex-start;gap:var(--notification-gap-y);flex:1 0 0}nv-notification [data-scope=container] [data-scope=content] [data-scope=heading]{display:flex;align-items:flex-start;gap:var(--notification-gap-x);align-self:stretch;color:var(--components-notification-content-title);font-size:var(--notification-title-font-size);font-style:normal;font-weight:500;line-height:20px;}nv-notification [data-scope=container] [data-scope=content] [data-scope=message]{display:flex;flex-direction:column;align-items:flex-start;gap:var(--notification-gap-y);align-self:stretch;color:var(--components-notification-content-description);font-variant-numeric:lining-nums tabular-nums slashed-zero;font-size:var(--font-size-sm, 14px);font-style:normal;font-weight:400;line-height:var(--line-height-sm, 20px)}nv-notification [data-scope=container] [data-scope=content] [data-scope=actions]{display:flex;padding:var(--spacing-2, 8px) 0;padding-bottom:0px;align-items:flex-start;gap:var(--notification-gap-x);align-self:stretch;margin-left:calc(-1 * var(--button-sm-padding-x))}nv-notification[feedback=information] [data-scope=container]{background-color:var(--components-notification-information-background);border-color:var(--components-notification-information-border)}nv-notification[feedback=information] [data-scope=container]>nv-icon{color:var(--components-notification-information-icon)}nv-notification[feedback=information]>[data-scope=close]:focus,nv-notification[feedback=information]>[data-scope=close]:focus-within{outline:none}nv-notification[feedback=information]>[data-scope=close]:focus-visible,nv-notification[feedback=information]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-information-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-notification[feedback=warning] [data-scope=container]{background-color:var(--components-notification-warning-background);border-color:var(--components-notification-warning-border)}nv-notification[feedback=warning] [data-scope=container]>nv-icon{color:var(--components-notification-warning-icon)}nv-notification[feedback=warning]>[data-scope=close]:focus,nv-notification[feedback=warning]>[data-scope=close]:focus-within{outline:none}nv-notification[feedback=warning]>[data-scope=close]:focus-visible,nv-notification[feedback=warning]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-warning-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-notification[feedback=error] [data-scope=container]{background-color:var(--components-notification-error-background);border-color:var(--components-notification-error-border)}nv-notification[feedback=error] [data-scope=container]>nv-icon{color:var(--components-notification-error-icon)}nv-notification[feedback=error]>[data-scope=close]:focus,nv-notification[feedback=error]>[data-scope=close]:focus-within{outline:none}nv-notification[feedback=error]>[data-scope=close]:focus-visible,nv-notification[feedback=error]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-error-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-notification[feedback=success] [data-scope=container]{background-color:var(--components-notification-success-background);border-color:var(--components-notification-success-border)}nv-notification[feedback=success] [data-scope=container]>nv-icon{color:var(--components-notification-success-icon)}nv-notification[feedback=success]>[data-scope=close]:focus,nv-notification[feedback=success]>[data-scope=close]:focus-within{outline:none}nv-notification[feedback=success]>[data-scope=close]:focus-visible,nv-notification[feedback=success]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-success-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-notification[feedback=neutral] [data-scope=container]{background-color:var(--components-notification-neutral-background);border-color:var(--components-notification-neutral-border)}nv-notification[feedback=neutral] [data-scope=container]>nv-icon{color:var(--components-notification-neutral-icon)}nv-notification[feedback=neutral]>[data-scope=close]:focus,nv-notification[feedback=neutral]>[data-scope=close]:focus-within{outline:none}nv-notification[feedback=neutral]>[data-scope=close]:focus-visible,nv-notification[feedback=neutral]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-neutral-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-notification[emphasis=high] [data-scope=container]{border-width:1px;border-left-width:var(--notification-border-width-high-emphasis);padding-left:calc(var(--notification-padding) - var(--notification-border-width-high-emphasis) + 1px)}nv-notification[emphasis=medium] [data-scope=container]{border-width:var(--notification-border-width-low-emphasis);border-color:var(--color-content-low-border, #E3E3E3)}";
-const NvNotificationStyle0 = nvNotificationCss;
-
-const NvNotification = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.hiddenChanged = index.createEvent(this, "hiddenChanged");
-        /****************************************************************************/
-        //#region PROPERTIES
-        /**
-         * Set a unique ID for the notification. Used for aria attributes and managing
-         * multiple notifications.
-         */
-        this.uid = v4A79185f4.v4();
-        /**
-         * 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 = {
-            [constantsD0f19e7b.FeedbackColors.Warning]: 'alert-circle',
-            [constantsD0f19e7b.FeedbackColors.Information]: 'info-circle',
-            [constantsD0f19e7b.FeedbackColors.Success]: 'circle-check',
-            [constantsD0f19e7b.FeedbackColors.Error]: 'alert-triangle',
-            [constantsD0f19e7b.FeedbackColors.Neutral]: 'help',
-        };
-        this.roleByFeedback = {
-            [constantsD0f19e7b.FeedbackColors.Error]: 'alert',
-            [constantsD0f19e7b.FeedbackColors.Warning]: 'alert',
-            [constantsD0f19e7b.FeedbackColors.Information]: 'status',
-            [constantsD0f19e7b.FeedbackColors.Success]: 'status',
-            [constantsD0f19e7b.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 } = fade_animationEb454088.useFade(this.container, { duration: 300 });
-        const { slideOut } = useSlide(this.container, { duration: 800 });
-        const { collapse } = collapse_animationAcda1bf5.useCollapse(this.el, {
-            duration: 800,
-            overflow: 'visible',
-        });
-        await timeline_animation79215cd4.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 (index.h(index.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" }, index.h("div", { key: 'beed9ae5f6fac1b0c6d103dd75a41e0aede84041', "data-scope": "container", ref: el => (this.container = el) }, this.dismissible && (index.h("button", { key: '8e17f33867c2563de719dc1b0f0e2d4ae39ad1a6', "data-scope": "dismiss", type: "button", onClick: this.dismiss.bind(this) }, index.h("nv-icon", { key: 'cb8850135bb2383e33a16671569547611b55e434', name: "x", size: "sm" }))), index.h("nv-icon", { key: 'f5f58e1c3a94d854841271eb12af047322b2f0b4', name: (_c = this.icon) !== null && _c !== void 0 ? _c : this.getDefaultIcon(), size: "md" }), index.h("div", { key: '9c6f6bb0315cd25260d483472a24832031ce45da', "data-scope": "content" }, (this.heading || this.headingSlot) && (index.h("p", { key: '1013d6b6790f75682a1db0e43293b61e614f1c07', id: this.getHeadingId(), "data-scope": "heading" }, index.h("slot", { key: '844a7bccf6f365d4e59dfdec9b3c9096cbeda798', name: "heading" }, this.heading))), (this.message || this.messageSlot) && (index.h("p", { key: '6688e9dc927f6164ce60f27b84fdbeb257296504', id: this.getMessageId(), "data-scope": "message" }, index.h("slot", { key: 'f0c0790faa40411970575240a081f0f0bf0e9aff', name: "content" }, this.message))), this.actionsSlot && (index.h("div", { key: '0ba946edf5b3a8410da3b375e589613a2674fd15', "data-scope": "actions" }, index.h("slot", { key: '0360ab92db66957f0290569c39307ced2be5922d', name: "actions" })))))));
-    }
-    get el() { return index.getElement(this); }
-};
-NvNotification.style = NvNotificationStyle0;
-
-exports.nv_notification = NvNotification;