@windui/snackbar - npm Package Compare versions

Comparing version 2.0.1 to 2.0.2

package.json

@@ -21,3 +21,3 @@ {
   "name": "@windui/snackbar",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "contributors": [
@@ -24,0 +24,0 @@ "Swôth <[e-mail]>"

windui.snackbar.js

@@ -1,298 +0,302 @@
-const WindUI = {
-    Snackbar: class Snackbar {
-        /**
-         * @param {Object} WindUI
-         * @param {Object} WindUI.options
-         * @param {Number} [WindUI.options.duration=3000] Default: 3000
-         * @param {Number} [WindUI.options.speed=500] Default: 500
-         * @param {('info'|'success'|'error'|'warning')} [WindUI.options.type=info] Default: info
-         * @param {('right'|'left')} [WindUI.options.align=right] Default: Right
-         * @param {('bottom'|'top')} [WindUI.options.position=bottom] Default: bottom
-         * @param {Object} [WindUI.options.components=null] Default: null
-         * @param {String} [WindUI.options.components.confirmText=Confirm] Default: Confirm
-         * @param {String} [WindUI.options.components.cancelText=Cancel] Default: Cancel
-         * @param {Function} [WindUI.options.components.confirmEvent]
-         * @param {Function} [WindUI.options.components.cancelEvent]
-         * @param {String} WindUI.title
-         * @param {String} WindUI.message
-         * @returns WindUI Snackbar
-         */
-        constructor(WindUI = {}) {
-            let { 
-                options, 
-                title, 
-                message 
-            } = WindUI;
+if (typeof WindUI == "undefined") {
+    Object.defineProperty(window, "WindUI", {
+        value: {}
+    });
+};
 
-            let $ = {
-                duration: 3000,
-                speed: 500,
-                type: "info",
-                align: "right",
-                position: "bottom",
-                components: null
-            };
+WindUI.Snackbar = class Snackbar {
+    /**
+     * @param {Object} WindUI
+     * @param {Object} WindUI.options
+     * @param {Number} [WindUI.options.duration=3000] Default: 3000
+     * @param {Number} [WindUI.options.speed=500] Default: 500
+     * @param {('info'|'success'|'error'|'warning')} [WindUI.options.type=info] Default: info
+     * @param {('right'|'left')} [WindUI.options.align=right] Default: Right
+     * @param {('bottom'|'top')} [WindUI.options.position=bottom] Default: bottom
+     * @param {Object} [WindUI.options.components=null] Default: null
+     * @param {String} [WindUI.options.components.confirmText=Confirm] Default: Confirm
+     * @param {String} [WindUI.options.components.cancelText=Cancel] Default: Cancel
+     * @param {Function} [WindUI.options.components.confirmEvent]
+     * @param {Function} [WindUI.options.components.cancelEvent]
+     * @param {String} WindUI.title
+     * @param {String} WindUI.message
+     * @returns WindUI Snackbar
+     */
+    constructor(WindUI = {}) {
+        let { 
+            options, 
+            title, 
+            message 
+        } = WindUI;
 
-            options = {
-                duration: options ? options["duration"] || $["duration"] : $["duration"],
-                position: options ? options["position"] || $["position"] : $["position"],
-                align: options ? options["align"] || $["align"] : $["align"],
-                speed: options ? options["speed"] || $["speed"] : $["speed"],
-                type: options ? options["type"] || $["type"] : $["type"],
-                components: options ? options["components"] || $["components"] : $["components"]
-            };
+        let $ = {
+            duration: 3000,
+            speed: 500,
+            type: "info",
+            align: "right",
+            position: "bottom",
+            components: null
+        };
 
-            let RightSnackbarList = document.querySelector("div#windui-right-snackbar-list");
-            let LeftSnackbarList = document.querySelector("div#windui-left-snackbar-list");
-            let SnackbarCSS = document.querySelector("style#windui-snackbar-style");
+        options = {
+            duration: options ? options["duration"] || $["duration"] : $["duration"],
+            position: options ? options["position"] || $["position"] : $["position"],
+            align: options ? options["align"] || $["align"] : $["align"],
+            speed: options ? options["speed"] || $["speed"] : $["speed"],
+            type: options ? options["type"] || $["type"] : $["type"],
+            components: options ? options["components"] || $["components"] : $["components"]
+        };
 
-            const ElementStyles = {
-                position: "fixed",
-                zIndex: 9999,
-                [options.position]: 0,
-                [options.align]: 0,
-                padding: "1.25rem",                    
-                display: "flex",
-                transition: "200ms all",
-                flexDirection: "column",
-                justifyContent: options.position == "top" ? "start" : "end",
-                alignItems: "end"
-            };
+        let RightSnackbarList = document.querySelector("div#windui-right-snackbar-list");
+        let LeftSnackbarList = document.querySelector("div#windui-left-snackbar-list");
+        let SnackbarCSS = document.querySelector("style#windui-snackbar-style");
 
-            if (!SnackbarCSS) {
-                const Styles = `
-                /*
-                * WindUI - Snackbar Styles
-                */
+        const ElementStyles = {
+            position: "fixed",
+            zIndex: 9999,
+            [options.position]: 0,
+            [options.align]: 0,
+            padding: "1.25rem",                    
+            display: "flex",
+            transition: "200ms all",
+            flexDirection: "column",
+            justifyContent: options.position == "top" ? "start" : "end",
+            alignItems: "end"
+        };
 
-                @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
+        if (!SnackbarCSS) {
+            const Styles = `
+            /*
+            * WindUI - Snackbar Styles
+            */
 
-                @-webkit-keyframes WUIfadeIn {
-                    from {
-                        transform: translateX(var(--wui-direction));
-                    }
-                    to {
-                        transform: translateX(0px);
-                    }
-                }
-        
-                @keyframes WUIfadeIn {
-                    from {
-                        transform: translateX(var(--wui-direction));
-                    }
-                    to {
-                        transform: translateX(0px);
-                    }
-                }
-        
-                @-webkit-keyframes WUIfadeOut {
-                    to {
-                        transform: translateX(var(--wui-direction));
-                        opacity: 0;
-                    }
-                }
-        
-                @keyframes WUIfadeOut {
-                    to {
-                        transform: translateX(var(--wui-direction));
-                        opacity: 0;
-                    }
-                }
+            @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
 
-                div.windui-snackbar {
-                    --windui-text-color: #050505;
-                    font-family: 'Poppins', sans-serif;
-                    animation-fill-mode: forwards;
-                    -webkit-animation-fill-mode: forwards;
-                    -webkit-animation: WUIfadeIn var(--wui-speed), WUIfadeOut var(--wui-speed) var(--wui-duration);
-                    animation: WUIfadeIn var(--wui-speed), WUIfadeOut var(--wui-speed) var(--wui-duration);
-                    background: linear-gradient(to bottom right, var(--wui-bg-1), var(--wui-bg-2));
-                    box-shadow: 0 15px 20px -5px var(--wui-shadow), 0 8px 10px -6px var(--wui-shadow);
-                    min-width: 20rem;
-                    margin-top: 1rem;
-                    padding: 1rem 1.25rem;
-                    border-radius: .5rem;
+            @-webkit-keyframes WUIfadeIn {
+                from {
+                    transform: translateX(var(--wui-direction));
                 }
-                div.windui-snackbar div.windui-components {
-                    display: flex;
-                    align-items-center;
-                    gap: 0 1rem;
-                    padding-top: .75rem;
+                to {
+                    transform: translateX(0px);
                 }
-                div.windui-snackbar div.windui-components button {
-                    color: var(--wui-bg-1);
-                    width: 100%;
-                    font-family: 'Poppins', sans-serif;
-                    height: 2rem;
-                    background: var(--windui-text-color);
-                    border: 0;
-                    outline: 0;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    border-radius: .5rem;
-                    letter-spacing: .05rem;
-                    cursor: pointer;
+            }
+    
+            @keyframes WUIfadeIn {
+                from {
+                    transform: translateX(var(--wui-direction));
                 }
-                div.windui-snackbar div.windui-components button svg {
-                    fill: var(--wui-bg-1);
-                    height: 50%;
-                    margin-right: .1rem;
+                to {
+                    transform: translateX(0px);
                 }
-                div.windui-snackbar div.windui-content {
-                    flex-shrink: 0;
-                    display: flex;
+            }
+    
+            @-webkit-keyframes WUIfadeOut {
+                to {
+                    transform: translateX(var(--wui-direction));
+                    opacity: 0;
                 }
-                div.windui-snackbar.windui-hidden {
+            }
+    
+            @keyframes WUIfadeOut {
+                to {
+                    transform: translateX(var(--wui-direction));
                     opacity: 0;
                 }
-                div.windui-snackbar div.windui-content svg {
-                    fill: var(--windui-text-color);
-                    margin-right: .5rem;
-                }
-                div.windui-snackbar div.windui-content div h1 {
-                    color: var(--windui-text-color);
-                    font-weight: bold;
-                    font-size: 1rem;
-                    margin: 0;
-                }
-                div.windui-snackbar div.windui-content div p {
-                    color: var(--windui-text-color);
-                    margin-top: 0px;
-                    margin-bottom: 0;
-                }
-                `;
+            }
 
-                const StyleElement = document.createElement("style");
-                StyleElement.innerHTML = Styles;
-                StyleElement.id = "windui-snackbar-style";
-                (document.head || document.body).appendChild(StyleElement);
-            };
+            div.windui-snackbar {
+                --windui-text-color: #050505;
+                font-family: 'Poppins', sans-serif;
+                animation-fill-mode: forwards;
+                -webkit-animation-fill-mode: forwards;
+                -webkit-animation: WUIfadeIn var(--wui-speed), WUIfadeOut var(--wui-speed) var(--wui-duration);
+                animation: WUIfadeIn var(--wui-speed), WUIfadeOut var(--wui-speed) var(--wui-duration);
+                background: linear-gradient(to bottom right, var(--wui-bg-1), var(--wui-bg-2));
+                box-shadow: 0 15px 20px -5px var(--wui-shadow), 0 8px 10px -6px var(--wui-shadow);
+                min-width: 20rem;
+                margin-top: 1rem;
+                padding: 1rem 1.25rem;
+                border-radius: .5rem;
+            }
+            div.windui-snackbar div.windui-components {
+                display: flex;
+                align-items-center;
+                gap: 0 1rem;
+                padding-top: .75rem;
+            }
+            div.windui-snackbar div.windui-components button {
+                color: var(--wui-bg-1);
+                width: 100%;
+                font-family: 'Poppins', sans-serif;
+                height: 2rem;
+                background: var(--windui-text-color);
+                border: 0;
+                outline: 0;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                border-radius: .5rem;
+                letter-spacing: .05rem;
+                cursor: pointer;
+            }
+            div.windui-snackbar div.windui-components button svg {
+                fill: var(--wui-bg-1);
+                height: 50%;
+                margin-right: .1rem;
+            }
+            div.windui-snackbar div.windui-content {
+                flex-shrink: 0;
+                display: flex;
+            }
+            div.windui-snackbar.windui-hidden {
+                opacity: 0;
+            }
+            div.windui-snackbar div.windui-content svg {
+                fill: var(--windui-text-color);
+                margin-right: .5rem;
+            }
+            div.windui-snackbar div.windui-content div h1 {
+                color: var(--windui-text-color);
+                font-weight: bold;
+                font-size: 1rem;
+                margin: 0;
+            }
+            div.windui-snackbar div.windui-content div p {
+                color: var(--windui-text-color);
+                margin-top: 0px;
+                margin-bottom: 0;
+            }
+            `;
 
-            if (options.align == "right" && !RightSnackbarList) {
-                const RightListElement = document.createElement("div");
-                Object.keys(ElementStyles).forEach(style => (RightListElement.style[style] = ElementStyles[style]));
-                RightListElement.id = "windui-right-snackbar-list";
-                RightSnackbarList = RightListElement;
-                document.body.appendChild(RightListElement);
-            };
+            const StyleElement = document.createElement("style");
+            StyleElement.innerHTML = Styles;
+            StyleElement.id = "windui-snackbar-style";
+            (document.head || document.body).appendChild(StyleElement);
+        };
 
-            if (options.align == "left" && !LeftSnackbarList) {
-                const LeftListElement = document.createElement("div");
-                Object.keys(ElementStyles).forEach(style => (LeftListElement.style[style] = ElementStyles[style]));
-                LeftListElement.id = "windui-left-snackbar-list";
-                LeftSnackbarList = LeftListElement;
-                document.body.appendChild(LeftListElement);
-            };
+        if (options.align == "right" && !RightSnackbarList) {
+            const RightListElement = document.createElement("div");
+            Object.keys(ElementStyles).forEach(style => (RightListElement.style[style] = ElementStyles[style]));
+            RightListElement.id = "windui-right-snackbar-list";
+            RightSnackbarList = RightListElement;
+            document.body.appendChild(RightListElement);
+        };
 
-            this.snackbar = {
-                id: Math.random().toString(36).substring(2),
-                parent: options.align == "left" ? LeftSnackbarList : RightSnackbarList,
-                title,
-                message,
-                ...options
-            };
+        if (options.align == "left" && !LeftSnackbarList) {
+            const LeftListElement = document.createElement("div");
+            Object.keys(ElementStyles).forEach(style => (LeftListElement.style[style] = ElementStyles[style]));
+            LeftListElement.id = "windui-left-snackbar-list";
+            LeftSnackbarList = LeftListElement;
+            document.body.appendChild(LeftListElement);
+        };
 
-            return this;
+        this.snackbar = {
+            id: Math.random().toString(36).substring(2),
+            parent: options.align == "left" ? LeftSnackbarList : RightSnackbarList,
+            title,
+            message,
+            ...options
         };
 
-        show() {
-            const SnackbarTypes = {
-                info: {
-                    color: [ '#67e8f9', '#38bdf8' ],
-                    shadow: 'rgba(56, 189, 248, 0.1)',
-                    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-.001 5.75c.69 0 1.251.56 1.251 1.25s-.561 1.25-1.251 1.25-1.249-.56-1.249-1.25.559-1.25 1.249-1.25zm2.001 12.25h-4v-1c.484-.179 1-.201 1-.735v-4.467c0-.534-.516-.618-1-.797v-1h3v6.265c0 .535.517.558 1 .735v.999z"/></svg>'
-                },
-                success: {
-                    color: [ '#34d399', '#22c55e' ],
-                    shadow: 'rgba(34, 197, 94, 0.1)',
-                    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1 17l-5-5.299 1.399-1.43 3.574 3.736 6.572-7.007 1.455 1.403-8 8.597z"/></svg>'
-                },
-                error: {
-                    color: [ '#fb7185', '#ef4444' ],
-                    shadow: 'rgba(239, 68, 68, 0.1)',
-                    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm4.151 17.943l-4.143-4.102-4.117 4.159-1.833-1.833 4.104-4.157-4.162-4.119 1.833-1.833 4.155 4.102 4.106-4.16 1.849 1.849-4.1 4.141 4.157 4.104-1.849 1.849z"/></svg>'
-                },
-                warning: {
-                    color: [ '#fde047', '#fbbf24' ],
-                    shadow: 'rgba(251, 191, 36, 0.1)',
-                    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.5 5h3l-1 10h-1l-1-10zm1.5 14.25c-.69 0-1.25-.56-1.25-1.25s.56-1.25 1.25-1.25 1.25.56 1.25 1.25-.56 1.25-1.25 1.25z"/></svg>'
-                }
-            };
+        return this;
+    };
 
-            const IsUnique = document.getElementById(this.snackbar.id) ? false : true;
-            if (!IsUnique) return false;
-            const SnackbarElement = document.createElement("div");
+    show() {
+        const SnackbarTypes = {
+            info: {
+                color: [ '#67e8f9', '#38bdf8' ],
+                shadow: 'rgba(56, 189, 248, 0.1)',
+                icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-.001 5.75c.69 0 1.251.56 1.251 1.25s-.561 1.25-1.251 1.25-1.249-.56-1.249-1.25.559-1.25 1.249-1.25zm2.001 12.25h-4v-1c.484-.179 1-.201 1-.735v-4.467c0-.534-.516-.618-1-.797v-1h3v6.265c0 .535.517.558 1 .735v.999z"/></svg>'
+            },
+            success: {
+                color: [ '#34d399', '#22c55e' ],
+                shadow: 'rgba(34, 197, 94, 0.1)',
+                icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1 17l-5-5.299 1.399-1.43 3.574 3.736 6.572-7.007 1.455 1.403-8 8.597z"/></svg>'
+            },
+            error: {
+                color: [ '#fb7185', '#ef4444' ],
+                shadow: 'rgba(239, 68, 68, 0.1)',
+                icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm4.151 17.943l-4.143-4.102-4.117 4.159-1.833-1.833 4.104-4.157-4.162-4.119 1.833-1.833 4.155 4.102 4.106-4.16 1.849 1.849-4.1 4.141 4.157 4.104-1.849 1.849z"/></svg>'
+            },
+            warning: {
+                color: [ '#fde047', '#fbbf24' ],
+                shadow: 'rgba(251, 191, 36, 0.1)',
+                icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.5 5h3l-1 10h-1l-1-10zm1.5 14.25c-.69 0-1.25-.56-1.25-1.25s.56-1.25 1.25-1.25 1.25.56 1.25 1.25-.56 1.25-1.25 1.25z"/></svg>'
+            }
+        };
 
-            const SnackbarHTML = `
-            <div id="${this.snackbar.id}" class="windui-snackbar" style="--wui-bg-1: ${SnackbarTypes[this.snackbar.type].color[0]}; --wui-bg-2: ${SnackbarTypes[this.snackbar.type].color[1]}; --wui-shadow: ${SnackbarTypes[this.snackbar.type].shadow}; --wui-speed: ${Number(this.snackbar.speed) / 1000}s; --wui-duration: ${(Number(this.snackbar.duration) - Number(this.snackbar.speed)) / 1000}s; --wui-direction: ${this.snackbar.align == "left" ? "-150%" : "150%"};">
-                <div class="windui-content">
-                    ${SnackbarTypes[this.snackbar.type].icon}
-                    <div>
-                        <h1>${this.snackbar.title || "Title not found!"}</h1>
-                        <p>${this.snackbar.message || "Message not found!"}</p>
-                    </div>
+        const IsUnique = document.getElementById(this.snackbar.id) ? false : true;
+        if (!IsUnique) return false;
+        const SnackbarElement = document.createElement("div");
+
+        const SnackbarHTML = `
+        <div id="${this.snackbar.id}" class="windui-snackbar" style="--wui-bg-1: ${SnackbarTypes[this.snackbar.type].color[0]}; --wui-bg-2: ${SnackbarTypes[this.snackbar.type].color[1]}; --wui-shadow: ${SnackbarTypes[this.snackbar.type].shadow}; --wui-speed: ${Number(this.snackbar.speed) / 1000}s; --wui-duration: ${(Number(this.snackbar.duration) - Number(this.snackbar.speed)) / 1000}s; --wui-direction: ${this.snackbar.align == "left" ? "-150%" : "150%"};">
+            <div class="windui-content">
+                ${SnackbarTypes[this.snackbar.type].icon}
+                <div>
+                    <h1>${this.snackbar.title || "Title not found!"}</h1>
+                    <p>${this.snackbar.message || "Message not found!"}</p>
                 </div>
-                ${this.snackbar.components ? `
-                    <div class="windui-components">
-                        <button id="confirm-btn">
-                            ${SnackbarTypes["success"].icon} ${this.snackbar.components.confirmText || "Confirm"}
-                        </button>
-                        <button id="cancel-btn">
-                            ${SnackbarTypes["error"].icon} ${this.snackbar.components.cancelText || "Cancel"}
-                        </button>
-                    </div>
-                ` : ``}
             </div>
-            `;
+            ${this.snackbar.components ? `
+                <div class="windui-components">
+                    <button id="confirm-btn">
+                        ${SnackbarTypes["success"].icon} ${this.snackbar.components.confirmText || "Confirm"}
+                    </button>
+                    <button id="cancel-btn">
+                        ${SnackbarTypes["error"].icon} ${this.snackbar.components.cancelText || "Cancel"}
+                    </button>
+                </div>
+            ` : ``}
+        </div>
+        `;
 
-            SnackbarElement.innerHTML = SnackbarHTML;
-            this.snackbar.parent.style.top = this.snackbar.position == "top" ? 0 : "";
-            this.snackbar.parent.style.bottom = this.snackbar.position == "bottom" ? 0 : "";
-            this.snackbar.parent.appendChild(SnackbarElement);
+        SnackbarElement.innerHTML = SnackbarHTML;
+        this.snackbar.parent.style.top = this.snackbar.position == "top" ? 0 : "";
+        this.snackbar.parent.style.bottom = this.snackbar.position == "bottom" ? 0 : "";
+        this.snackbar.parent.appendChild(SnackbarElement);
 
-            if (this.snackbar.components) {
-                const confirmBtn = SnackbarElement.querySelector("button#confirm-btn");
-                confirmBtn.addEventListener("click", event => {
-                    return (
-                        this.snackbar.components.confirmEvent || (({ $ }) => {
-                            return $.hide();
-                        })
-                    )({
-                        $: this,
-                        event
-                    });
+        if (this.snackbar.components) {
+            const confirmBtn = SnackbarElement.querySelector("button#confirm-btn");
+            confirmBtn.addEventListener("click", event => {
+                return (
+                    this.snackbar.components.confirmEvent || (({ $ }) => {
+                        return $.hide();
+                    })
+                )({
+                    $: this,
+                    event
                 });
+            });
 
-                const cancelBtn = SnackbarElement.querySelector("button#cancel-btn");
-                cancelBtn.addEventListener("click", event => {
-                    return (
-                        this.snackbar.components.cancelEvent || (({ $ }) => {
-                            return $.hide();
-                        })
-                    )({
-                        $: this,
-                        event
-                    });
+            const cancelBtn = SnackbarElement.querySelector("button#cancel-btn");
+            cancelBtn.addEventListener("click", event => {
+                return (
+                    this.snackbar.components.cancelEvent || (({ $ }) => {
+                        return $.hide();
+                    })
+                )({
+                    $: this,
+                    event
                 });
-            };
-
-            setTimeout(() => {
-                this.snackbar.parent.removeChild(SnackbarElement);
-            }, Number(this.snackbar.duration));
-            return true;
+            });
         };
 
-        hide() {
-            const SnackbarElement = document.getElementById(this.snackbar.id);
-            if (!SnackbarElement) return false;
-            SnackbarElement.style.transition = `${this.snackbar.speed}ms all`;
-            SnackbarElement.style.transform = `translateX(150%)`;
+        setTimeout(() => {
+            this.snackbar.parent.removeChild(SnackbarElement);
+        }, Number(this.snackbar.duration));
+        return true;
+    };
 
-            setTimeout(() => {
-                SnackbarElement.remove();
-            }, Number(this.snackbar.speed));
-            return true;
-        };
-    }
+    hide() {
+        const SnackbarElement = document.getElementById(this.snackbar.id);
+        if (!SnackbarElement) return false;
+        SnackbarElement.style.transition = `${this.snackbar.speed}ms all`;
+        SnackbarElement.style.transform = `translateX(150%)`;
+
+        setTimeout(() => {
+            SnackbarElement.remove();
+        }, Number(this.snackbar.speed));
+        return true;
+    };
 };
@@ -299,0 +303,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

282

increased by1.08%

Worsened metrics

Total package byte prevSize

15817

decreased by-5.9%

No dependency changes