neo.mjs 4.6.3 → 4.6.4

package/examples/toast/MainContainer.mjs

@@ -44,7 +44,7 @@ class MainContainer extends Viewport {
                 style    : {paddingBottom: '40px', marginLeft: '10px'}
             }, {
                 module   : TextField,
-                labelText: 'tile',
+                labelText: 'title',
                 name     : 'title'
             }, {
                 module   : TextField,
@@ -57,7 +57,7 @@ class MainContainer extends Viewport {
                 store    : {data: [{name: 'tl'}, {name: 'tc'}, {name: 'tr'}, {name: 'bl'}, {name: 'bc'}, {name: 'br'}]}
             }, {
                 module   : SelectField,
-                labelText: 'slideDirection = down',
+                labelText: 'slideDirection = right',
                 name     : 'slideDirection',
                 store    : {data: [{name: 'down'}, {name: 'up'}, {name: 'left'}, {name: 'right'}]}
             }, {

package/examples/toast/MainContainerController.mjs

@@ -1,5 +1,5 @@
 import ComponentController from '../../src/controller/Component.mjs';
-import Toast               from '../../src/dialog/Toast.mjs';
+import Toast               from '../../src/component/Toast.mjs';
 
 /**
  * @class Neo.examples.toast.MainContainerController

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "4.6.3",
+    "version": "4.6.4",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/resources/scss/src/component/Toast.scss

@@ -0,0 +1,191 @@
+.neo-toast {
+    z-index         : 20; // ensure to be on top of table headers
+    align-items     : center;
+    background-color: v(toast-background-color);
+    border-radius   : 0.5rem;
+    box-shadow      : 0 0.25rem 0.5rem v(toast-shadow-color);
+    color           : v(toast-color);
+    display         : flex;
+    position        : fixed;
+    transition      : bottom .3s ease-out, top .3s ease-out;
+
+    .neo-toast-inner {
+        align-items: center;
+        display    : flex;
+
+        &.neo-toast-has-title {
+            .neo-toast-text {
+                text-align: left;
+            }
+        }
+
+        & > div {
+            padding: 0.25em 0.5em;
+        }
+
+        .neo-toast-icon {
+            border-right: 2px solid v(toast-color);
+            flex        : 1;
+            font-size   : 1.5em;
+        }
+
+        .neo-toast-text {
+            padding   : 0.25em 1em;
+            text-align: center;
+
+            .neo-toast-msg {
+                font-size: 0.8em;
+            }
+
+            .neo-toast-title {
+                padding-bottom: 0.2em;
+                text-transform: uppercase;
+            }
+        }
+
+        .neo-toast-close {
+            background : transparent;
+            border     : 0;
+            color      : inherit;
+            cursor     : pointer;
+            font-size  : 1.5rem;
+            line-height: 1.5;
+            margin-left: auto;
+        }
+    }
+}
+
+// ui: danger
+.neo-toast-danger {
+    background-color: v(toast-danger-background-color);
+    color: v(toast-danger-color);
+
+    & > div {
+
+        .neo-toast-inner {
+
+            .neo-toast-icon {
+                border-right: 2px solid v(toast-danger-color);
+            }
+        }
+    }
+}
+
+// ui: success
+.neo-toast-success {
+    background-color: v(toast-success-background-color);
+    color: v(toast-success-color);
+
+    & > div {
+
+        .neo-toast-inner {
+
+            .neo-toast-icon {
+                border-right: 2px solid v(toast-success-color);
+            }
+        }
+    }
+}
+
+/* Toast positions */
+.neo-toast-tr {
+    right: 1rem;
+    top  : 1rem;
+}
+
+.neo-toast-tc {
+    left     : 50%;
+    top      : 1rem;
+    transform: translateX(-50%);
+}
+
+.neo-toast-tl {
+    left: 1rem;
+    top : 1rem;
+}
+
+.neo-toast-br {
+    bottom: 1rem;
+    right : 1rem;
+}
+
+.neo-toast-bc {
+    bottom   : 1rem;
+    left     : 50%;
+    transform: translateX(-50%);
+}
+
+.neo-toast-bl {
+    bottom: 1rem;
+    left  : 1rem;
+}
+
+/* Toast slide-in animation */
+@keyframes neo-toast-slide-down-in {
+    from {
+        transform: translateY(-150%);
+    }
+    to {
+        transform: translateY(0);
+    }
+}
+
+@keyframes neo-toast-slide-up-in {
+    from {
+        transform: translateY(150%);
+    }
+    to {
+        transform: translateY(0);
+    }
+}
+
+@keyframes neo-toast-slide-left-in {
+    from {
+        transform: translateX(-150%);
+    }
+    to {
+        transform: translateX(0);
+    }
+}
+
+@keyframes neo-toast-slide-right-in {
+    from {
+        transform: translateX(150%);
+    }
+    to {
+        transform: translateX(0);
+    }
+}
+
+/* Add the slide-in animation to the toast when the slide-in class is added */
+.neo-toast-slide-down-in {
+    animation: neo-toast-slide-down-in 0.25s ease-out;
+}
+
+.neo-toast-slide-up-in {
+    animation: neo-toast-slide-up-in 0.25s ease-out;
+}
+
+.neo-toast-slide-left-in {
+    animation: neo-toast-slide-left-in 0.25s ease-out;
+}
+
+.neo-toast-slide-right-in {
+    animation: neo-toast-slide-right-in 0.25s ease-out;
+}
+
+/* Toast fade-out animation */
+@keyframes neo-toast-fade-out {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}
+
+/* Add the fade-out animation to the toast when the fade-out class is added */
+.neo-toast-fade-out {
+    animation          : neo-toast-fade-out 0.25s ease-out;
+    animation-fill-mode: forwards;
+}

package/resources/scss/theme-dark/component/Toast.scss

@@ -0,0 +1,21 @@
+$neoMap: map-merge($neoMap, (
+    'toast-background-color'        : lightblue,
+    'toast-color'                   : #083741,
+    'toast-danger-background-color' : #e6adad,
+    'toast-danger-color'            : #410808,
+    'toast-shadow-color'            : rgba(255, 255, 255, 0.15),
+    'toast-success-background-color': #b7e6ad,
+    'toast-success-color'           : #124108
+));
+
+@if $useCssVars == true {
+  :root .neo-theme-dark { // .neo-toast
+    --toast-background-color        : #{neo(toast-background-color)};
+    --toast-color                   : #{neo(toast-color)};
+    --toast-shadow-color            : #{neo(toast-shadow-color)};
+    --toast-danger-background-color : #{neo(toast-danger-background-color)};
+    --toast-danger-color            : #{neo(toast-danger-color)};
+    --toast-success-background-color: #{neo(toast-success-background-color)};
+    --toast-success-color           : #{neo(toast-success-color)};
+  }
+}

package/resources/scss/theme-light/component/Toast.scss

@@ -0,0 +1,21 @@
+$neoMap: map-merge($neoMap, (
+    'toast-background-color'        : lightblue,
+    'toast-color'                   : #083741,
+    'toast-danger-background-color' : #e6adad,
+    'toast-danger-color'            : #410808,
+    'toast-shadow-color'            : rgba(0, 0, 0, 0.15),
+    'toast-success-background-color': #b7e6ad,
+    'toast-success-color'           : #124108
+));
+
+@if $useCssVars == true {
+  :root .neo-theme-light { // .neo-toast
+    --toast-background-color        : #{neo(toast-background-color)};
+    --toast-color                   : #{neo(toast-color)};
+    --toast-shadow-color            : #{neo(toast-shadow-color)};
+    --toast-danger-background-color : #{neo(toast-danger-background-color)};
+    --toast-danger-color            : #{neo(toast-danger-color)};
+    --toast-success-background-color: #{neo(toast-success-background-color)};
+    --toast-success-color           : #{neo(toast-success-color)};
+  }
+}

package/src/{dialog → component}/Toast.mjs

@@ -3,7 +3,7 @@ import ToastManager from '../manager/Toast.mjs';
 import NeoArray     from "../util/Array.mjs";
 
 /**
- * @class Neo.dialog.Toast
+ * @class Neo.component.Toast
  * @extends Neo.component.Base
  *
  * @example
@@ -16,7 +16,7 @@ import NeoArray     from "../util/Array.mjs";
             iconCls         : 'fa fa-bell', // null
             maxWidth        : 300,          // 250
             position        : 'br',         // 'tr'
-            slideDirection  : 'right',      // 'down'
+            slideDirection  : 'right',      // 'right'
             title           : 'Alarm Clock' // null
         })
  */
@@ -28,11 +28,10 @@ class Toast extends Base {
      */
     running = false
     /**
-     * Used by the ToastManager
-     * @member {String|null} toastManagerId=null
-     * @private
+     * Timeout in ms after which the toast is removed
+     * @member {Number} timeout=3000
      */
-    toastManagerId = null
+    timeout = 3000
 
     static getStaticConfig() {return {
         /**
@@ -52,24 +51,15 @@ class Toast extends Base {
 
     static getConfig() {return {
         /**
-         * @member {String} className='Neo.dialog.Toast'
+         * @member {String} className='Neo.component.Toast'
          * @protected
          */
-        className: 'Neo.dialog.Toast',
+        className: 'Neo.component.Toast',
         /**
          * @member {String} ntype='toast'
          * @protected
          */
         ntype: 'toast',
-
-        /**
-         * @member {Boolean} autoMount=true
-         */
-        autoMount: true,
-        /**
-         * @member {Boolean} autoRender=true
-         */
-        autoRender: true,
         /**
          * @member {String[]} baseCls=['neo-toast']
          * @protected
@@ -110,14 +100,9 @@ class Toast extends Base {
         /**
          * Describes which direction from which side the toasts slides-in
          * This creates a cls `neo-toast-slide-${direction}-in`
-         * @member {'down'|'up'|'left'|'right'} slideDirection_=null
-         */
-        slideDirection_: 'down',
-        /**
-         * Timeout in ms after which the toast is removed
-         * @member {Number} timeout_=3000
+         * @member {'down'|'up'|'left'|'right'} slideDirection_='right'
          */
-        timeout_: 3000,
+        slideDirection_: 'right',
         /**
          * Adds a title to the toast
          * @member {Number} title_=null
@@ -138,6 +123,9 @@ class Toast extends Base {
         }]}
     }}
 
+    /**
+     * @param {Object} config
+     */
     construct(config) {
         super.construct(config);
 
@@ -146,7 +134,9 @@ class Toast extends Base {
         // click listener for close
         me.addDomListeners([
             {click: {fn: me.unregister, delegate: '.neo-toast-close', scope: me}}
-        ])
+        ]);
+
+        ToastManager.register(me);
     }
 
     /**
@@ -176,7 +166,6 @@ class Toast extends Base {
      * Using the afterSetMsg to trigger the setup of the dom
      * A new container is added as an item.
      * We cannot use the vdom here.
-     *
      * @param {String|null} value
      * @param {String|null} oldValue
      */
@@ -186,19 +175,6 @@ class Toast extends Base {
         vdom.innerHTML = value;
     }
 
-    /**
-     * @param {String|null} value
-     * @param {String|null} oldValue
-     */
-    afterSetTitle(value, oldValue) {
-        let vdom = this.getTextRootVdom().cn[0],
-            clsFn = !!value ? 'add' : 'remove';
-
-        vdom.removeDom = Neo.isEmpty(value);
-        vdom.innerHTML = value;
-        NeoArray[clsFn](vdom.cls, 'neo-toast-has-title');
-    }
-
     /**
      * Apply a cls, based on the position
      * @param {String} value
@@ -218,17 +194,35 @@ class Toast extends Base {
     }
 
     /**
-     * Close the toast after the timeout if not closable
-     * @param {Number} value
-     * @param {Number} oldValue
+     * Close the toast after the mounted if not closable
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
      */
-    async afterSetTimeout(value, oldValue) {
-        if (!this.closable && value) {
-            await Neo.timeout(value);
-            this.unregister();
+    afterSetMounted(value, oldValue) {
+        super.afterSetMounted(value, oldValue);
+
+        let me = this;
+
+        if (!me.closable && value) {
+            setTimeout(() => {
+                this.destroy(true);
+            }, me.timeout)
         }
     }
 
+    /**
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     */
+    afterSetTitle(value, oldValue) {
+        let vdom = this.getTextRootVdom().cn[0],
+            clsFn = !!value ? 'add' : 'remove';
+
+        vdom.removeDom = Neo.isEmpty(value);
+        vdom.innerHTML = value;
+        NeoArray[clsFn](vdom.cls, 'neo-toast-has-title');
+    }
+
     /**
      * Triggered before the position config gets changed
      * @param {String} value
@@ -250,32 +244,36 @@ class Toast extends Base {
     }
 
     /**
-     * This is a dialog, so we have to add an item to be able to
-     * @returns {vdom}
+     *
      */
-    getVdomInner() {
-        return this.vdom.cn[0];
+    async destroy(...args) {
+        let me = this;
+
+        me.addDomListeners({
+            animationend: function () {
+                ToastManager.removeToast(me.id);
+                ToastManager.unregister(me);
+                me.destroy(true);
+            }
+        });
+
+        me.addCls('neo-toast-fade-out')
     }
 
+    /**
+     * This is a dialog, so we have to add an item to be able to
+     * @returns {Object} vdom
+     */
     getTextRootVdom() {
         return this.getVdomInner().cn[1];
     }
 
     /**
-     * After the close-click or timeout, we unregister the toast
-     * from the ToastManager
+     * This is a dialog, so we have to add an item to be able to
+     * @returns {Object} vdom
      */
-    unregister() {
-        let me = this;
-
-        me.addDomListeners({
-            animationend: function () {
-                ToastManager.removeToast(me.toastManagerId);
-                me.destroy(true);
-            }
-        })
-
-        me.addCls('neo-toast-fade-out');
+    getVdomInner() {
+        return this.vdom.cn[0];
     }
 }
 

package/src/manager/Toast.mjs

@@ -1,4 +1,5 @@
-import Base from './Base.mjs';
+import Base     from './Base.mjs';
+import NeoArray from "../util/Array.mjs";
 
 /**
  * See Neo.dialog.Toast for examples
@@ -8,37 +9,29 @@ import Base from './Base.mjs';
  */
 class Toast extends Base {
     /**
-     * This is the default config for the Neo.dialog.Toast
-     * @member {Object}
+     * Using a default margin between the item
+     * If you switch the distance to the top or bottom you have to change this value accordingly
+     * @member {Number} defaultMargin=16
      */
-    defaultToastConfig = {
-        closable      : false,
-        cls           : ['neo-toast'],
-        maxWidth      : 250,
-        position      : 'tr',
-        running       : false,
-        slideDirection: 'down',
-        timeout       : 3000,
-        title         : null
-    }
+    defaultMargin = 16
     /**
      * Currently only 1 is supported, because they would overlap
-     * @member {1} maxToasts=1
+     * @member {Number} maxToasts=3
      */
-    maxToasts = 1
+    maxToasts = 3
     /**
      * Counts the currently running Toasts per area
      * @member {Object} running
      */
     running = {
-        bc: 0, bl: 0, br: 0,
-        tc: 0, tl: 0, tr: 0
+        bc: [], bl: [], br: [],
+        tc: [], tl: [], tr: []
     }
     /**
      * If you prefer your own class to open, override here
-     * @member {String} toastClass='Neo.dialog.Toast'
+     * @member {String} toastClass='Neo.component.Toast'
      */
-    toastClass = 'Neo.dialog.Toast'
+    toastClass = 'Neo.component.Toast'
 
     static getConfig() {return {
         /**
@@ -53,37 +46,26 @@ class Toast extends Base {
         singleton: true
     }}
 
+    /**
+     * @param {Object} config
+     */
     construct(config) {
         super.construct(config);
         Neo.toast = this.createToast.bind(this);
     }
 
-    /**
-     * @param {Object} item
-     */
-    register(item) {
-        super.register(item);
-        this.runQueue();
-    }
-
-    /**
-     * Removes a collection item passed by reference or key
-     * @param {Object|String} item
-     */
-    unregister(item) {
-        super.unregister(item);
-        this.runQueue();
-    }
-
     /**
      * Create the Toast definition and pass it to the Collection
-     *
      * @param {Object} toast
-     * @returns {Object}
+     * @returns {String|null}
      */
     createToast(toast) {
-        let me = this,
-            id;
+        let me = this;
+
+        if (toast.position && !me.running[toast.position]) {
+            Neo.logError('[Neo.manager.Toast] Supported values for slideDirection are: tl, tc, tr, bl, bc, br');
+            return null;
+        }
 
         if (!toast.msg || !toast.appName) {
             !toast.msg     && Neo.logError('[Neo.manager.Toast] Toast has to define a msg');
@@ -91,18 +73,49 @@ class Toast extends Base {
             return null;
         }
 
-        id = Neo.core.IdGenerator.getId('toastmanager-toast');
-
-        toast = {
-            id,
-            toastManagerId: id,
-            ...me.defaultToastConfig,
+        toast = Neo.create({
+            className: this.toastClass,
             ...toast
-        };
+        });
 
-        me.register(toast);
+        toast.on({
+            mounted: me.updateItemsInPosition,
+            scope  : me
+        })
 
-        return toast.toastManagerId;
+        return toast.id;
+    }
+
+    /**
+     * Find the first toast based on the maximum allowed toasts
+     * @returns {*}
+     * @private
+     */
+    findFirstToast() {
+        let me = this,
+            firstToast, item;
+
+        me.filters = [{property: 'running', value: false}];
+
+        for (item of me.map.values()) {
+            if (me.running[item.position].length < me.maxToasts) {
+                firstToast = item;
+                firstToast.running = true;
+                break;
+            }
+        }
+
+        me.clearFilters();
+
+        return firstToast;
+    }
+
+    /**
+     * @param {Object} item
+     */
+    register(item) {
+        super.register(item);
+        this.runQueue();
     }
 
     /**
@@ -110,11 +123,20 @@ class Toast extends Base {
      * @param {String} toastId
      */
     removeToast(toastId) {
-        let me = this;
+        let me    = this,
+            toast = me.get(toastId),
+            position;
+
+        if (!toast) {
+            return;
+        }
+
+        position = toast.position;
 
         // decrease total of displayed toasts for a position
-        me.running[me.map.get(toastId).position]--;
-        me.unregister(toastId);
+        NeoArray.remove(me.running[position], toastId);
+
+        me.updateItemsInPosition(toastId);
     }
 
     /**
@@ -131,36 +153,59 @@ class Toast extends Base {
         }
     }
 
+    /**
+     * @param {Neo.component.Toast} toast
+     */
     showToast(toast) {
-        let toastConfig = Neo.clone(toast);
+        toast.render(true);
+
         // increase total of displayed toasts for a position
-        this.running[toastConfig.position]++
-        // Neo.create does not allow to pass an id
-        delete toastConfig.id;
-        Neo.create(this.toastClass, toastConfig);
+        this.running[toast.position].unshift(toast.id);
+
+        // todo: we could use a mounted listener
+        setTimeout(() => {
+            this.updateItemsInPosition(toast.id);
+        }, 50);
     }
 
     /**
-     * Find the first toast based on the maximum allowed toasts
-     * @returns {*}
+     * Removes a collection item passed by reference or key
+     * @param {Object|String} item
      */
-    findFirstToast() {
-        let me = this,
-            firstToast, item;
-
-        me.filters = [{property: 'running', value: false}];
-        me.filter();
+    unregister(item) {
+        super.unregister(item);
+        this.runQueue();
+    }
 
-        for (item of me.map.values()) {
-            if (me.running[item.position] < me.maxToasts) {
-                firstToast = item;
-                break;
-            }
+    /**
+     * To handle multiple toasts we handle the exact position
+     * from the top or bottom
+     * @param {String} id
+     * @returns {Promise<void>}
+     */
+    async updateItemsInPosition(id) {
+        let me            = this,
+            toast         = me.get(id),
+            position      = toast.position,
+            positionArray = me.running[position],
+            acc           = 0,
+            margin        = me.defaultMargin,
+            moveTo        = position.substring(0, 1) === 't' ? 'top' : 'bottom',
+            component, componentId, index, moveObj, rects;
+
+        rects = await toast.getDomRect(positionArray);
+
+        for ([index, componentId] of positionArray.entries()) {
+            component = Neo.getComponent(componentId);
+            moveObj   = {};
+
+            acc = acc + margin;
+            moveObj[moveTo] = acc + 'px';
+            component.style = moveObj;
+            component.update();
+
+            acc = acc + rects[index].height;
         }
-
-        me.clearFilters();
-
-        return firstToast;
     }
 }
 

package/resources/scss/src/dialog/Toast.scss

@@ -1,190 +0,0 @@
-.neo-toast {
-  z-index: 20; // ensure to be on top of table headers
-  align-items: center;
-  background-color: v(toast-background-color);
-  border-radius: 0.5rem;
-  box-shadow: 0 0.25rem 0.5rem v(toast-shadow-color);
-  color: v(toast-color);
-  display: flex;
-  position: fixed;
-
-  .neo-toast-inner {
-    align-items: center;
-    display: flex;
-
-    &.neo-toast-has-title {
-      .neo-toast-text {
-        text-align: left;
-      }
-    }
-
-    & > div {
-      padding: 0.25em 0.5em;
-    }
-
-    .neo-toast-icon {
-      border-right: 2px solid v(toast-color);
-      flex: 1;
-      font-size: 1.5em;
-    }
-
-    .neo-toast-text {
-      padding: 0.25em 1em;
-      text-align: center;
-
-      .neo-toast-msg {
-        font-size: 0.8em;
-      }
-
-      .neo-toast-title {
-        padding-bottom: 0.2em;
-        text-transform: uppercase;
-      }
-    }
-
-    .neo-toast-close {
-      background: transparent;
-      border: 0;
-      color: inherit;
-      cursor: pointer;
-      font-size: 1.5rem;
-      line-height: 1.5;
-      margin-left: auto;
-    }
-  }
-}
-
-// ui: danger
-.neo-toast-danger {
-  background-color: v(toast-danger-background-color);
-  color: v(toast-danger-color);
-
-  & > div {
-
-    .neo-toast-inner {
-
-      .neo-toast-icon {
-        border-right: 2px solid v(toast-danger-color);
-      }
-    }
-  }
-}
-
-// ui: success
-.neo-toast-success {
-  background-color: v(toast-success-background-color);
-  color: v(toast-success-color);
-
-  & > div {
-
-    .neo-toast-inner {
-
-      .neo-toast-icon {
-        border-right: 2px solid v(toast-success-color);
-      }
-    }
-  }
-}
-
-/* Toast positions */
-.neo-toast-tr {
-  right: 1rem;
-  top: 1rem;
-}
-
-.neo-toast-tc {
-  left: 50%;
-  top: 1rem;
-  transform: translateX(-50%);
-}
-
-.neo-toast-tl {
-  left: 1rem;
-  top: 1rem;
-}
-
-.neo-toast-br {
-  bottom: 1rem;
-  right: 1rem;
-}
-
-.neo-toast-bc {
-  bottom: 1rem;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.neo-toast-bl {
-  bottom: 1rem;
-  left: 1rem;
-}
-
-/* Toast slide-in animation */
-@keyframes neo-toast-slide-down-in {
-  from {
-    transform: translateY(-150%);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes neo-toast-slide-up-in {
-  from {
-    transform: translateY(150%);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes neo-toast-slide-left-in {
-  from {
-    transform: translateX(-150%);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-@keyframes neo-toast-slide-right-in {
-  from {
-    transform: translateX(150%);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-/* Add the slide-in animation to the toast when the slide-in class is added */
-.neo-toast-slide-down-in {
-  animation: neo-toast-slide-down-in 0.25s ease-out;
-}
-
-.neo-toast-slide-up-in {
-  animation: neo-toast-slide-up-in 0.25s ease-out;
-}
-
-.neo-toast-slide-left-in {
-  animation: neo-toast-slide-left-in 0.25s ease-out;
-}
-
-.neo-toast-slide-right-in {
-  animation: neo-toast-slide-right-in 0.25s ease-out;
-}
-
-/* Toast fade-out animation */
-@keyframes neo-toast-fade-out {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
-/* Add the fade-out animation to the toast when the fade-out class is added */
-.neo-toast-fade-out {
-  animation: neo-toast-fade-out 0.25s ease-out;
-  animation-fill-mode: forwards;
-}

package/resources/scss/theme-dark/dialog/Toast.scss

@@ -1,13 +0,0 @@
-$neoMap: map-merge($neoMap, (
-        'toast-background-color'   : #083741,
-        'toast-color'              : lightblue,
-        'toast-shadow-color'        : rgba(255, 255, 255, 0.15)
-));
-
-@if $useCssVars == true {
-  :root .neo-theme-dark { // .neo-button
-    --toast-background-color  : #{neo(toast-background-color)};
-    --toast-color             : #{neo(toast-color)};
-    --toast-shadow-color      : #{neo(toast-shadow-color)};
-  }
-}

package/resources/scss/theme-light/dialog/Toast.scss

@@ -1,25 +0,0 @@
-$neoMap: map-merge($neoMap, (
-        'toast-background-color'   : lightblue,
-        'toast-color'              : #083741,
-        'toast-shadow-color'        : rgba(0, 0, 0, 0.15),
-  // ui: danger
-        'toast-danger-background-color'   : #e6adad,
-        'toast-danger-color'              : #410808,
-  // ui: success
-        'toast-success-background-color'   : #b7e6ad,
-        'toast-success-color'              : #124108,
-));
-
-@if $useCssVars == true {
-  :root .neo-theme-light { // .neo-button
-    --toast-background-color  : #{neo(toast-background-color)};
-    --toast-color             : #{neo(toast-color)};
-    --toast-shadow-color      : #{neo(toast-shadow-color)};
-    // ui: danger
-    --toast-danger-background-color  : #{neo(toast-danger-background-color)};
-    --toast-danger-color             : #{neo(toast-danger-color)};
-    // ui: success
-    --toast-success-background-color  : #{neo(toast-success-background-color)};
-    --toast-success-color             : #{neo(toast-success-color)};
-  }
-}