@lrnwebcomponents/simple-toast - npm Package Compare versions

Comparing version 7.0.0 to 7.0.1

custom-elements.json

@@ -6,3 +6,3 @@ {
       "name": "simple-toast-el",
-      "description": "Events:\n\n  * `opened-changed` {`CustomEvent<{ value: any; }>`} - \n\nAttributes:\n\n  * `text` {`string`} - \n\n  * `duration` {`number`} - \n\n  * `opened` {`boolean`} - \n\n  * `accent-color` {`string`} - a selected accent-\"color\": grey, red, pink, purple, etc.\n\n  * `dark` {`boolean`} - make the default theme dark?\n\nProperties:\n\n  * `text` {`string`} - \n\n  * `duration` {`number`} - \n\n  * `opened` {`boolean`} - \n\n  * `accentColor` {`string`} - a selected accent-\"color\": grey, red, pink, purple, etc.\n\n  * `dark` {`boolean`} - make the default theme dark?\n\n  * `colors` - ",
+      "description": "Events:\n\n  * `opened-changed` {`CustomEvent<{ value: any; }>`} - \n\nAttributes:\n\n  * `text` {`string`} - \n\n  * `alwaysvisible` {`boolean`} - \n\n  * `duration` {`number`} - \n\n  * `opened` {`boolean`} - \n\n  * `accent-color` {`string`} - a selected accent-\"color\": grey, red, pink, purple, etc.\n\n  * `dark` {`boolean`} - make the default theme dark?\n\nProperties:\n\n  * `text` {`string`} - \n\n  * `alwaysvisible` {`boolean`} - \n\n  * `duration` {`number`} - \n\n  * `opened` {`boolean`} - \n\n  * `accentColor` {`string`} - a selected accent-\"color\": grey, red, pink, purple, etc.\n\n  * `dark` {`boolean`} - make the default theme dark?\n\n  * `colors` - ",
       "attributes": [
@@ -14,2 +14,7 @@ {
         {
+          "name": "alwaysvisible",
+          "description": "`alwaysvisible` {`boolean`} - \n\nProperty: alwaysvisible\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
           "name": "duration",
@@ -40,3 +45,3 @@ "description": "`duration` {`number`} - \n\nProperty: duration\n\nDefault: 3000"
       "name": "simple-toast",
-      "description": "`simple-toast`\n`A singular toast / message for conistency`\n\nAttributes:\n\n  * `opened` {`boolean`} - Opened state of the toast, use event to change\n\n  * `text` {`string`} - Plain text based message to display\n\n  * `class-style` {`string`} - Class name, fit-bottom being a useful one\n\n  * `close-text` {`string`} - Text for the close button\n\n  * `duration` {`number`} - How long the toast message should be displayed\n\n  * `event-callback` {`string`} - Event callback when hide is called\n\n  * `close-button` {`boolean`} - If there should be a close button shown\n\n  * `accent-color` {`string`} - a selected accent-\"color\": grey, red, pink, purple, etc.\n\n  * `dark` {`boolean`} - make the default theme dark?\n\nProperties:\n\n  * `opened` {`boolean`} - Opened state of the toast, use event to change\n\n  * `text` {`string`} - Plain text based message to display\n\n  * `classStyle` {`string`} - Class name, fit-bottom being a useful one\n\n  * `closeText` {`string`} - Text for the close button\n\n  * `duration` {`number`} - How long the toast message should be displayed\n\n  * `eventCallback` {`string`} - Event callback when hide is called\n\n  * `closeButton` {`boolean`} - If there should be a close button shown\n\n  * `accentColor` {`string`} - a selected accent-\"color\": grey, red, pink, purple, etc.\n\n  * `dark` {`boolean`} - make the default theme dark?\n\n  * `colors` - ",
+      "description": "`simple-toast`\n`A singular toast / message for conistency`\n\nAttributes:\n\n  * `opened` {`boolean`} - Opened state of the toast, use event to change\n\n  * `text` {`string`} - Plain text based message to display\n\n  * `class-style` {`string`} - Class name, fit-bottom being a useful one\n\n  * `close-text` {`string`} - Text for the close button\n\n  * `duration` {`number`} - How long the toast message should be displayed\n\n  * `event-callback` {`string`} - Event callback when hide is called\n\n  * `close-button` {`boolean`} - If there should be a close button shown\n\n  * `accent-color` {`string`} - a selected accent-\"color\": grey, red, pink, purple, etc.\n\n  * `dark` {`boolean`} - make the default theme dark?\n\nProperties:\n\n  * `opened` {`boolean`} - Opened state of the toast, use event to change\n\n  * `text` {`string`} - Plain text based message to display\n\n  * `classStyle` {`string`} - Class name, fit-bottom being a useful one\n\n  * `closeText` {`string`} - Text for the close button\n\n  * `duration` {`number`} - How long the toast message should be displayed\n\n  * `eventCallback` {`string`} - Event callback when hide is called\n\n  * `closeButton` {`boolean`} - If there should be a close button shown\n\n  * `windowControllers` - \n\n  * `accentColor` {`string`} - a selected accent-\"color\": grey, red, pink, purple, etc.\n\n  * `dark` {`boolean`} - make the default theme dark?\n\n  * `colors` - ",
       "attributes": [
@@ -83,47 +88,2 @@ {
       ]
-    },
-    {
-      "name": "simple-toast",
-      "description": "`simple-toast`\n`A singular toast / message for conistency`\n\nAttributes:\n\n  * `opened` {`boolean`} - Opened state of the toast, use event to change\n\n  * `text` {`string`} - Plain text based message to display\n\n  * `class-style` {`string`} - Class name, fit-bottom being a useful one\n\n  * `close-text` {`string`} - Text for the close button\n\n  * `duration` {`number`} - How long the toast message should be displayed\n\n  * `event-callback` {`string`} - Event callback when hide is called\n\n  * `close-button` {`boolean`} - If there should be a close button shown\n\n  * `accent-color` {`string`} - a selected accent-\"color\": grey, red, pink, purple, etc.\n\n  * `dark` {`boolean`} - make the default theme dark?\n\nProperties:\n\n  * `opened` {`boolean`} - Opened state of the toast, use event to change\n\n  * `text` {`string`} - Plain text based message to display\n\n  * `classStyle` {`string`} - Class name, fit-bottom being a useful one\n\n  * `closeText` {`string`} - Text for the close button\n\n  * `duration` {`number`} - How long the toast message should be displayed\n\n  * `eventCallback` {`string`} - Event callback when hide is called\n\n  * `closeButton` {`boolean`} - If there should be a close button shown\n\n  * `accentColor` {`string`} - a selected accent-\"color\": grey, red, pink, purple, etc.\n\n  * `dark` {`boolean`} - make the default theme dark?\n\n  * `colors` - ",
-      "attributes": [
-        {
-          "name": "opened",
-          "description": "`opened` {`boolean`} - Opened state of the toast, use event to change\n\nProperty: opened",
-          "valueSet": "v"
-        },
-        {
-          "name": "text",
-          "description": "`text` {`string`} - Plain text based message to display\n\nProperty: text"
-        },
-        {
-          "name": "class-style",
-          "description": "`class-style` {`string`} - Class name, fit-bottom being a useful one\n\nProperty: classStyle"
-        },
-        {
-          "name": "close-text",
-          "description": "`close-text` {`string`} - Text for the close button\n\nProperty: closeText"
-        },
-        {
-          "name": "duration",
-          "description": "`duration` {`number`} - How long the toast message should be displayed\n\nProperty: duration"
-        },
-        {
-          "name": "event-callback",
-          "description": "`event-callback` {`string`} - Event callback when hide is called\n\nProperty: eventCallback"
-        },
-        {
-          "name": "close-button",
-          "description": "`close-button` {`boolean`} - If there should be a close button shown\n\nProperty: closeButton",
-          "valueSet": "v"
-        },
-        {
-          "name": "accent-color",
-          "description": "`accent-color` {`string`} - a selected accent-\"color\": grey, red, pink, purple, etc.\n\nProperty: accentColor\n\nDefault: grey"
-        },
-        {
-          "name": "dark",
-          "description": "`dark` {`boolean`} - make the default theme dark?\n\nProperty: dark\n\nDefault: false",
-          "valueSet": "v"
-        }
-      ]
     }
@@ -130,0 +90,0 @@ ],

lib/simple-toast-el.js

@@ -30,6 +30,8 @@ import { html, css } from "lit";
           from {
-            bottom: 0;
+            display: flex;
+            bottom: var(--simple-toast-bottom-offscreen, 0px);
             opacity: 0;
           }
           to {
+            display: flex;
             bottom: var(--simple-toast-bottom, 40px);
@@ -41,6 +43,8 @@ opacity: 1;
           from {
-            bottom: 0;
+            display: flex;
+            bottom: var(--simple-toast-bottom-offscreen, 0px);
             opacity: 0;
           }
           to {
+            display: flex;
             bottom: var(--simple-toast-bottom, 40px);
@@ -52,2 +56,3 @@ opacity: 1;
           from {
+            display: flex;
             bottom: var(--simple-toast-bottom, 40px);
@@ -57,3 +62,4 @@ opacity: 1;
           to {
-            bottom: 0;
+            display: flex;
+            bottom: var(--simple-toast-bottom-offscreen, 0px);
             opacity: 0;
@@ -64,2 +70,3 @@ }
           from {
+            display: flex;
             bottom: var(--simple-toast-bottom, 40px);
@@ -69,6 +76,31 @@ opacity: 1;
           to {
-            bottom: 0;
+            display: flex;
+            bottom: var(--simple-toast-bottom-offscreen, 0px);
             opacity: 0;
           }
         }
+        @-webkit-keyframes forcedfadeout {
+          from {
+            display: flex;
+            bottom: var(--simple-toast-bottom, 40px);
+            opacity: 1;
+          }
+          to {
+            display: flex;
+            bottom: var(--simple-toast-bottom-offscreen, 0px);
+            opacity: 0;
+          }
+        }
+        @keyframes forcedfadeout {
+          from {
+            display: flex;
+            bottom: var(--simple-toast-bottom, 40px);
+            opacity: 1;
+          }
+          to {
+            display: flex;
+            bottom: var(--simple-toast-bottom-offscreen, 0px);
+            opacity: 0;
+          }
+        }
       `,
@@ -82,17 +114,20 @@ ];
       text: { type: String },
+      alwaysvisible: { type: Boolean },
       duration: { type: Number },
-      opened: { type: Boolean },
+      opened: { type: Boolean, reflect: true },
     };
   }
 
+  _onAnimationEnd(e) {
+    if (e.animationName == "fadeout" || e.animationName == "forcedfadeout") {
+      this.hide();
+    }
+  }
   constructor() {
     super();
     this.text = "";
+    this.alwaysvisible = false;
     this.duration = 3000;
     this.opened = false;
-    this.addEventListener("animationend", (e) => {
-      if (e.animationName == "fadeout") {
-        this.opened = false;
-      }
-    });
+    this.addEventListener("animationend", this._onAnimationEnd);
   }
@@ -115,8 +150,20 @@
         } else {
-          this.hide();
+          this.style.animation = "none";
+          setTimeout(() => {
+            if (!this.alwaysvisible && !this.awaitingMerlinInput) {
+              this.style.animation =
+                "fadein 0.3s, fadeout 0.6s " + this.duration / 1000 + "s";
+            } else {
+              this.style.animation = "fadein 0.3s";
+            }
+          }, 600);
         }
       }
       if (propName === "duration" && this[propName]) {
-        this.style.animation =
-          "fadein 0.2s, fadeout 0.2s " + this[propName] / 1000 + "s";
+        if (!this.alwaysvisible && !this.awaitingMerlinInput) {
+          this.style.animation =
+            "fadein 0.3s, fadeout 0.6s " + this[propName] / 1000 + "s";
+        } else {
+          this.style.animation = "fadein 0.3s";
+        }
       }
@@ -140,2 +187,3 @@ });
     this.classList.remove("show");
+    this.opened = false;
   }
@@ -142,0 +190,0 @@ show(text = "") {

package.json

@@ -22,3 +22,3 @@ {
   },
-  "version": "7.0.0",
+  "version": "7.0.1",
   "description": "A singular toast / message for conistency",
@@ -35,3 +35,3 @@ "repository": {
     "start": "yarn run dev",
-    "build": "gulp --gulpfile=gulpfile.cjs && node --experimental-json-modules ../../node_modules/.bin/rollup --config && prettier --ignore-path ../../.prettierignore --write \"**/*.{js,json}\" && wca analyze \"**/*.js\" --format vscode --outFile custom-elements.json",
+    "build": "gulp --gulpfile=gulpfile.cjs && node --experimental-json-modules ../../node_modules/.bin/rollup --config && prettier --ignore-path ../../.prettierignore --write \"**/*.{js,json}\" && wca analyze \"{*,lib/**}.js\" --format vscode --outFile custom-elements.json",
     "dev": "concurrently --kill-others \"yarn run watch\" \"yarn run serve\"",
@@ -49,8 +49,8 @@ "watch": "gulp dev --gulpfile=gulpfile.cjs",
   "dependencies": {
-    "@lrnwebcomponents/simple-colors": "^7.0.0",
-    "lit": "^2.7.2"
+    "@lrnwebcomponents/simple-colors": "^7.0.1",
+    "lit": "^2.7.4"
   },
   "devDependencies": {
     "@lrnwebcomponents/deduping-fix": "^7.0.0",
-    "@lrnwebcomponents/storybook-utilities": "^7.0.0",
+    "@lrnwebcomponents/storybook-utilities": "^7.0.1",
     "@open-wc/testing": "3.0.4",
@@ -75,3 +75,3 @@ "@polymer/iron-component-page": "github:PolymerElements/iron-component-page",
   ],
-  "gitHead": "619ebdfc0aac017516b65f4e6eb1c12080dff39e"
+  "gitHead": "7087ebc5fd7f631a2a78ad40af08384933139929"
 }

simple-toast.js

@@ -159,2 +159,3 @@ /**
     super();
+    this.windowControllers = new AbortController();
     this.setDefaultToast();
@@ -166,7 +167,10 @@ }
       "simple-toast-hide",
-      this.hideSimpleToast.bind(this)
+      this.hideSimpleToast.bind(this),
+      { signal: this.windowControllers.signal }
     );
+
     window.addEventListener(
       "simple-toast-show",
-      this.showSimpleToast.bind(this)
+      this.showSimpleToast.bind(this),
+      { signal: this.windowControllers.signal }
     );
@@ -178,10 +182,4 @@ }
   disconnectedCallback() {
-    window.removeEventListener(
-      "simple-toast-hide",
-      this.hideSimpleToast.bind(this)
-    );
-    window.removeEventListener(
-      "simple-toast-show",
-      this.showSimpleToast.bind(this)
-    );
+    this.windowControllers.abort();
+
     super.disconnectedCallback();
@@ -188,0 +186,0 @@ }

simple-toast.umd.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("lit"),require("@lrnwebcomponents/simple-colors/simple-colors.js")):"function"==typeof define&&define.amd?define(["exports","lit","@lrnwebcomponents/simple-colors/simple-colors.js"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).SimpleToast={},t.lit,t.simpleColors_js)}(this,(function(t,e,n){"use strict";function o(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);e&&(o=o.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,o)}return n}function i(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?o(Object(n),!0).forEach((function(e){l(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function a(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,w(o.key),o)}}function s(t,e,n){return e&&a(t.prototype,e),n&&a(t,n),Object.defineProperty(t,"prototype",{writable:!1}),t}function l(t,e,n){return(e=w(e))in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function c(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&p(t,e)}function u(t){return u=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},u(t)}function p(t,e){return p=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},p(t,e)}function d(t,e){if(e&&("object"==typeof e||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t)}function f(t){var e=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var n,o=u(t);if(e){var i=u(this).constructor;n=Reflect.construct(o,arguments,i)}else n=o.apply(this,arguments);return d(this,n)}}function h(t,e){for(;!Object.prototype.hasOwnProperty.call(t,e)&&null!==(t=u(t)););return t}function y(){return y="undefined"!=typeof Reflect&&Reflect.get?Reflect.get.bind():function(t,e,n){var o=h(t,e);if(o){var i=Object.getOwnPropertyDescriptor(o,e);return i.get?i.get.call(arguments.length<3?t:n):i.value}},y.apply(this,arguments)}function m(t,e){return e||(e=t.slice(0)),Object.freeze(Object.defineProperties(t,{raw:{value:Object.freeze(e)}}))}function b(t){return function(t){if(Array.isArray(t))return v(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||function(t,e){if(!t)return;if("string"==typeof t)return v(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return v(t,e)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function v(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,o=new Array(e);n<e;n++)o[n]=t[n];return o}function w(t){var e=function(t,e){if("object"!=typeof t||null===t)return t;var n=t[Symbol.toPrimitive];if(void 0!==n){var o=n.call(t,e||"default");if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(t,"string");return"symbol"==typeof e?e:String(e)}var g,k,x,O,S=function(t){c(o,t);var n=f(o);function o(){var t;return r(this,o),(t=n.call(this)).text="",t.duration=3e3,t.opened=!1,t.addEventListener("animationend",(function(e){"fadeout"==e.animationName&&(t.opened=!1)})),t}return s(o,[{key:"updated",value:function(t){var e=this;y(u(o.prototype),"updated",this).call(this,t),t.forEach((function(t,n){"opened"===n&&void 0!==t&&(e.dispatchEvent(new CustomEvent("opened-changed",{detail:{value:e[n]}})),e[n]?e.show(e.text):e.hide()),"duration"===n&&e[n]&&(e.style.animation="fadein 0.2s, fadeout 0.2s "+e[n]/1e3+"s")}))}},{key:"render",value:function(){return e.html(g||(g=m(["<span><span>","</span><slot></slot></span>"])),this.text)}},{key:"firstUpdated",value:function(t){y(u(o.prototype),"updated",this).call(this,t),this.style.setProperty("aria-live","assertive"),this.style.setProperty("role","alert"),this.style.setProperty("aria-atomic","true"),this.style.setProperty("aria-relevant","all")}},{key:"hide",value:function(){this.classList.remove("show")}},{key:"show",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";this.text=t,this.classList.add("show")}}],[{key:"tag",get:function(){return"simple-toast-el"}},{key:"styles",get:function(){return[].concat(b(y(u(o),"styles",this)),[e.css(k||(k=m(["\n        :host {\n          display: none;\n          justify-content: center;\n          position: fixed;\n          min-width: 100px;\n          text-align: center;\n          color: var(--simple-colors-default-theme-accent-1, white);\n          background-color: var(--simple-colors-default-theme-accent-12, black);\n          border-radius: var(--simple-toast-border-radius, 2px);\n          border: var(--simple-toast-border, none);\n          font-size: var(--simple-toast-font-size, 1em);\n          font-family: var(--simple-toast-font-family, sans-serif);\n        }\n        :host(.show) {\n          display: flex;\n        }\n        @-webkit-keyframes fadein {\n          from {\n            bottom: 0;\n            opacity: 0;\n          }\n          to {\n            bottom: var(--simple-toast-bottom, 40px);\n            opacity: 1;\n          }\n        }\n        @keyframes fadein {\n          from {\n            bottom: 0;\n            opacity: 0;\n          }\n          to {\n            bottom: var(--simple-toast-bottom, 40px);\n            opacity: 1;\n          }\n        }\n        @-webkit-keyframes fadeout {\n          from {\n            bottom: var(--simple-toast-bottom, 40px);\n            opacity: 1;\n          }\n          to {\n            bottom: 0;\n            opacity: 0;\n          }\n        }\n        @keyframes fadeout {\n          from {\n            bottom: var(--simple-toast-bottom, 40px);\n            opacity: 1;\n          }\n          to {\n            bottom: 0;\n            opacity: 0;\n          }\n        }\n      "])))])}},{key:"properties",get:function(){return i(i({},y(u(o),"properties",this)),{},{text:{type:String},duration:{type:Number},opened:{type:Boolean}})}}]),o}(n.SimpleColors);customElements.define(S.tag,S),window.SimpleToast=window.SimpleToast||{},window.SimpleToast.requestAvailability=function(){return window.SimpleToast.instance||(window.SimpleToast.instance=document.createElement("simple-toast"),document.body.appendChild(window.SimpleToast.instance)),window.SimpleToast.instance};var j=window.SimpleToast.requestAvailability(),T=function(t){c(o,t);var n=f(o);function o(){var t;return r(this,o),(t=n.call(this)).setDefaultToast(),t}return s(o,[{key:"render",value:function(){return e.html(x||(x=m([' <simple-toast-el\n      id="toast"\n      accent-color="','"\n      ?dark="','"\n      text="','"\n      duration="','"\n      ?opened="','"\n      @opened-changed="','"\n      .class="','"\n    >\n      <slot></slot>\n      <button .hidden="','" @click="','">\n        ',"\n      </button>\n    </simple-toast-el>"])),this.accentColor,this.dark,this.text,this.duration,this.opened,this.openedChanged,this.classStyle,!this.closeButton,this.hide,this.closeText)}},{key:"connectedCallback",value:function(){y(u(o.prototype),"connectedCallback",this).call(this),window.addEventListener("simple-toast-hide",this.hideSimpleToast.bind(this)),window.addEventListener("simple-toast-show",this.showSimpleToast.bind(this))}},{key:"disconnectedCallback",value:function(){window.removeEventListener("simple-toast-hide",this.hideSimpleToast.bind(this)),window.removeEventListener("simple-toast-show",this.showSimpleToast.bind(this)),y(u(o.prototype),"disconnectedCallback",this).call(this)}},{key:"hideSimpleToast",value:function(t){this.hide()}},{key:"openedChanged",value:function(t){this.opened=t.detail.value}},{key:"setDefaultToast",value:function(){for(this.opened=!1,this.text="Saved",this.classStyle="",this.closeText="Close",this.duration=3e3,this.accentColor="grey",this.dark=!1,this.eventCallback=null,this.closeButton=!0;null!==this.firstChild;)this.removeChild(this.firstChild)}},{key:"showSimpleToast",value:function(t){this.setDefaultToast(),t.detail.duration&&(this.duration=t.detail.duration),t.detail.text&&(this.text=t.detail.text),t.detail.classStyle&&(this.classStyle=t.detail.classStyle),t.detail.closeText&&(this.closeText=t.detail.closeText),t.detail.closeButton&&(this.closeButton=t.detail.closeButton),t.detail.eventCallback&&(this.eventCallback=t.detail.eventCallback),t.detail.slot&&this.appendChild(t.detail.slot),t.detail.accentColor&&(this.accentColor=t.detail.accentColor),t.detail.dark&&(this.dark=t.detail.dark),this.show()}},{key:"show",value:function(t){this.opened=!0}},{key:"hide",value:function(t){if(this.eventCallback){var e=new CustomEvent(this.eventCallback,{bubbles:!0,cancelable:!0,detail:!0,composed:!0});this.dispatchEvent(e)}this.opened=!1}}],[{key:"styles",get:function(){return[].concat(b(y(u(o),"styles",this)),[e.css(O||(O=m(["\n        :host {\n          display: block;\n        }\n\n        :host([hidden]) {\n          display: none;\n        }\n\n        simple-toast-el {\n          box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);\n          width: var(--simple-toast-width, auto);\n          color: var(\n            --simple-toast-color,\n            var(--simple-colors-default-theme-accent-1, white)\n          );\n          background-color: var(\n            --simple-toast-bg,\n            var(--simple-colors-default-theme-accent-12, black)\n          );\n          top: var(--simple-toast-top);\n          margin: var(--simple-toast-margin, 8px);\n          padding: var(--simple-toast-padding, 16px);\n          left: var(--simple-toast-left, 36px);\n          bottom: var(--simple-toast-bottom, 36px);\n          right: var(--simple-toast-right);\n          border: var(--simple-toast-border);\n          z-index: var(--simple-toast-z-index, 1000);\n          font-size: var(--simple-toast-font-size);\n        }\n\n        button {\n          margin-left: 8px;\n        }\n      "])))])}},{key:"properties",get:function(){return i(i({},y(u(o),"properties",this)),{},{opened:{type:Boolean,reflect:!0},text:{type:String},classStyle:{type:String,attribute:"class-style"},closeText:{type:String,attribute:"close-text"},duration:{type:Number},eventCallback:{type:String,attribute:"event-callback"},closeButton:{type:Boolean,reflect:!0,attribute:"close-button"}})}},{key:"tag",get:function(){return"simple-toast"}}]),o}(n.SimpleColors);customElements.define(T.tag,T),t.SimpleToast=T,t.SimpleToastStore=j,Object.defineProperty(t,"__esModule",{value:!0})}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("lit"),require("@lrnwebcomponents/simple-colors/simple-colors.js")):"function"==typeof define&&define.amd?define(["exports","lit","@lrnwebcomponents/simple-colors/simple-colors.js"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).SimpleToast={},t.lit,t.simpleColors_js)}(this,(function(t,e,n){"use strict";function o(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);e&&(o=o.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,o)}return n}function i(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?o(Object(n),!0).forEach((function(e){l(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function a(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,w(o.key),o)}}function s(t,e,n){return e&&a(t.prototype,e),n&&a(t,n),Object.defineProperty(t,"prototype",{writable:!1}),t}function l(t,e,n){return(e=w(e))in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function c(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&u(t,e)}function p(t){return p=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},p(t)}function u(t,e){return u=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},u(t,e)}function f(t,e){if(e&&("object"==typeof e||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t)}function d(t){var e=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var n,o=p(t);if(e){var i=p(this).constructor;n=Reflect.construct(o,arguments,i)}else n=o.apply(this,arguments);return f(this,n)}}function y(t,e){for(;!Object.prototype.hasOwnProperty.call(t,e)&&null!==(t=p(t)););return t}function m(){return m="undefined"!=typeof Reflect&&Reflect.get?Reflect.get.bind():function(t,e,n){var o=y(t,e);if(o){var i=Object.getOwnPropertyDescriptor(o,e);return i.get?i.get.call(arguments.length<3?t:n):i.value}},m.apply(this,arguments)}function h(t,e){return e||(e=t.slice(0)),Object.freeze(Object.defineProperties(t,{raw:{value:Object.freeze(e)}}))}function b(t){return function(t){if(Array.isArray(t))return v(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||function(t,e){if(!t)return;if("string"==typeof t)return v(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return v(t,e)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function v(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,o=new Array(e);n<e;n++)o[n]=t[n];return o}function w(t){var e=function(t,e){if("object"!=typeof t||null===t)return t;var n=t[Symbol.toPrimitive];if(void 0!==n){var o=n.call(t,e||"default");if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(t,"string");return"symbol"==typeof e?e:String(e)}var g,x,k,O,S=function(t){c(o,t);var n=d(o);function o(){var t;return r(this,o),(t=n.call(this)).text="",t.alwaysvisible=!1,t.duration=3e3,t.opened=!1,t.addEventListener("animationend",t._onAnimationEnd),t}return s(o,[{key:"_onAnimationEnd",value:function(t){"fadeout"!=t.animationName&&"forcedfadeout"!=t.animationName||this.hide()}},{key:"updated",value:function(t){var e=this;m(p(o.prototype),"updated",this).call(this,t),t.forEach((function(t,n){"opened"===n&&void 0!==t&&(e.dispatchEvent(new CustomEvent("opened-changed",{detail:{value:e[n]}})),e[n]?e.show(e.text):(e.style.animation="none",setTimeout((function(){e.alwaysvisible||e.awaitingMerlinInput?e.style.animation="fadein 0.3s":e.style.animation="fadein 0.3s, fadeout 0.6s "+e.duration/1e3+"s"}),600))),"duration"===n&&e[n]&&(e.alwaysvisible||e.awaitingMerlinInput?e.style.animation="fadein 0.3s":e.style.animation="fadein 0.3s, fadeout 0.6s "+e[n]/1e3+"s")}))}},{key:"render",value:function(){return e.html(g||(g=h(["<span><span>","</span><slot></slot></span>"])),this.text)}},{key:"firstUpdated",value:function(t){m(p(o.prototype),"updated",this).call(this,t),this.style.setProperty("aria-live","assertive"),this.style.setProperty("role","alert"),this.style.setProperty("aria-atomic","true"),this.style.setProperty("aria-relevant","all")}},{key:"hide",value:function(){this.classList.remove("show"),this.opened=!1}},{key:"show",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";this.text=t,this.classList.add("show")}}],[{key:"tag",get:function(){return"simple-toast-el"}},{key:"styles",get:function(){return[].concat(b(m(p(o),"styles",this)),[e.css(x||(x=h(["\n        :host {\n          display: none;\n          justify-content: center;\n          position: fixed;\n          min-width: 100px;\n          text-align: center;\n          color: var(--simple-colors-default-theme-accent-1, white);\n          background-color: var(--simple-colors-default-theme-accent-12, black);\n          border-radius: var(--simple-toast-border-radius, 2px);\n          border: var(--simple-toast-border, none);\n          font-size: var(--simple-toast-font-size, 1em);\n          font-family: var(--simple-toast-font-family, sans-serif);\n        }\n        :host(.show) {\n          display: flex;\n        }\n        @-webkit-keyframes fadein {\n          from {\n            display: flex;\n            bottom: var(--simple-toast-bottom-offscreen, 0px);\n            opacity: 0;\n          }\n          to {\n            display: flex;\n            bottom: var(--simple-toast-bottom, 40px);\n            opacity: 1;\n          }\n        }\n        @keyframes fadein {\n          from {\n            display: flex;\n            bottom: var(--simple-toast-bottom-offscreen, 0px);\n            opacity: 0;\n          }\n          to {\n            display: flex;\n            bottom: var(--simple-toast-bottom, 40px);\n            opacity: 1;\n          }\n        }\n        @-webkit-keyframes fadeout {\n          from {\n            display: flex;\n            bottom: var(--simple-toast-bottom, 40px);\n            opacity: 1;\n          }\n          to {\n            display: flex;\n            bottom: var(--simple-toast-bottom-offscreen, 0px);\n            opacity: 0;\n          }\n        }\n        @keyframes fadeout {\n          from {\n            display: flex;\n            bottom: var(--simple-toast-bottom, 40px);\n            opacity: 1;\n          }\n          to {\n            display: flex;\n            bottom: var(--simple-toast-bottom-offscreen, 0px);\n            opacity: 0;\n          }\n        }\n        @-webkit-keyframes forcedfadeout {\n          from {\n            display: flex;\n            bottom: var(--simple-toast-bottom, 40px);\n            opacity: 1;\n          }\n          to {\n            display: flex;\n            bottom: var(--simple-toast-bottom-offscreen, 0px);\n            opacity: 0;\n          }\n        }\n        @keyframes forcedfadeout {\n          from {\n            display: flex;\n            bottom: var(--simple-toast-bottom, 40px);\n            opacity: 1;\n          }\n          to {\n            display: flex;\n            bottom: var(--simple-toast-bottom-offscreen, 0px);\n            opacity: 0;\n          }\n        }\n      "])))])}},{key:"properties",get:function(){return i(i({},m(p(o),"properties",this)),{},{text:{type:String},alwaysvisible:{type:Boolean},duration:{type:Number},opened:{type:Boolean,reflect:!0}})}}]),o}(n.SimpleColors);customElements.define(S.tag,S),window.SimpleToast=window.SimpleToast||{},window.SimpleToast.requestAvailability=function(){return window.SimpleToast.instance||(window.SimpleToast.instance=document.createElement("simple-toast"),document.body.appendChild(window.SimpleToast.instance)),window.SimpleToast.instance};var j=window.SimpleToast.requestAvailability(),C=function(t){c(o,t);var n=d(o);function o(){var t;return r(this,o),(t=n.call(this)).windowControllers=new AbortController,t.setDefaultToast(),t}return s(o,[{key:"render",value:function(){return e.html(k||(k=h([' <simple-toast-el\n      id="toast"\n      accent-color="','"\n      ?dark="','"\n      text="','"\n      duration="','"\n      ?opened="','"\n      @opened-changed="','"\n      .class="','"\n    >\n      <slot></slot>\n      <button .hidden="','" @click="','">\n        ',"\n      </button>\n    </simple-toast-el>"])),this.accentColor,this.dark,this.text,this.duration,this.opened,this.openedChanged,this.classStyle,!this.closeButton,this.hide,this.closeText)}},{key:"connectedCallback",value:function(){m(p(o.prototype),"connectedCallback",this).call(this),window.addEventListener("simple-toast-hide",this.hideSimpleToast.bind(this),{signal:this.windowControllers.signal}),window.addEventListener("simple-toast-show",this.showSimpleToast.bind(this),{signal:this.windowControllers.signal})}},{key:"disconnectedCallback",value:function(){this.windowControllers.abort(),m(p(o.prototype),"disconnectedCallback",this).call(this)}},{key:"hideSimpleToast",value:function(t){this.hide()}},{key:"openedChanged",value:function(t){this.opened=t.detail.value}},{key:"setDefaultToast",value:function(){for(this.opened=!1,this.text="Saved",this.classStyle="",this.closeText="Close",this.duration=3e3,this.accentColor="grey",this.dark=!1,this.eventCallback=null,this.closeButton=!0;null!==this.firstChild;)this.removeChild(this.firstChild)}},{key:"showSimpleToast",value:function(t){this.setDefaultToast(),t.detail.duration&&(this.duration=t.detail.duration),t.detail.text&&(this.text=t.detail.text),t.detail.classStyle&&(this.classStyle=t.detail.classStyle),t.detail.closeText&&(this.closeText=t.detail.closeText),t.detail.closeButton&&(this.closeButton=t.detail.closeButton),t.detail.eventCallback&&(this.eventCallback=t.detail.eventCallback),t.detail.slot&&this.appendChild(t.detail.slot),t.detail.accentColor&&(this.accentColor=t.detail.accentColor),t.detail.dark&&(this.dark=t.detail.dark),this.show()}},{key:"show",value:function(t){this.opened=!0}},{key:"hide",value:function(t){if(this.eventCallback){var e=new CustomEvent(this.eventCallback,{bubbles:!0,cancelable:!0,detail:!0,composed:!0});this.dispatchEvent(e)}this.opened=!1}}],[{key:"styles",get:function(){return[].concat(b(m(p(o),"styles",this)),[e.css(O||(O=h(["\n        :host {\n          display: block;\n        }\n\n        :host([hidden]) {\n          display: none;\n        }\n\n        simple-toast-el {\n          box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);\n          width: var(--simple-toast-width, auto);\n          color: var(\n            --simple-toast-color,\n            var(--simple-colors-default-theme-accent-1, white)\n          );\n          background-color: var(\n            --simple-toast-bg,\n            var(--simple-colors-default-theme-accent-12, black)\n          );\n          top: var(--simple-toast-top);\n          margin: var(--simple-toast-margin, 8px);\n          padding: var(--simple-toast-padding, 16px);\n          left: var(--simple-toast-left, 36px);\n          bottom: var(--simple-toast-bottom, 36px);\n          right: var(--simple-toast-right);\n          border: var(--simple-toast-border);\n          z-index: var(--simple-toast-z-index, 1000);\n          font-size: var(--simple-toast-font-size);\n        }\n\n        button {\n          margin-left: 8px;\n        }\n      "])))])}},{key:"properties",get:function(){return i(i({},m(p(o),"properties",this)),{},{opened:{type:Boolean,reflect:!0},text:{type:String},classStyle:{type:String,attribute:"class-style"},closeText:{type:String,attribute:"close-text"},duration:{type:Number},eventCallback:{type:String,attribute:"event-callback"},closeButton:{type:Boolean,reflect:!0,attribute:"close-button"}})}},{key:"tag",get:function(){return"simple-toast"}}]),o}(n.SimpleColors);customElements.define(C.tag,C),t.SimpleToast=C,t.SimpleToastStore=j,Object.defineProperty(t,"__esModule",{value:!0})}));

src/simple-toast.js

@@ -159,2 +159,3 @@ /**
     super();
+    this.windowControllers = new AbortController();
     this.setDefaultToast();
@@ -166,7 +167,10 @@ }
       "simple-toast-hide",
-      this.hideSimpleToast.bind(this)
+      this.hideSimpleToast.bind(this),
+      { signal: this.windowControllers.signal }
     );
+
     window.addEventListener(
       "simple-toast-show",
-      this.showSimpleToast.bind(this)
+      this.showSimpleToast.bind(this),
+      { signal: this.windowControllers.signal }
     );
@@ -178,10 +182,4 @@ }
   disconnectedCallback() {
-    window.removeEventListener(
-      "simple-toast-hide",
-      this.hideSimpleToast.bind(this)
-    );
-    window.removeEventListener(
-      "simple-toast-show",
-      this.showSimpleToast.bind(this)
-    );
+    this.windowControllers.abort();
+
     super.disconnectedCallback();
@@ -188,0 +186,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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

78675

decreased by-9.01%

Number of package files

20

decreased by-4.76%

Lines of code

1212

decreased by-23.34%

Dependency changes

• Updated@lrnwebcomponents/simple-colors@^7.0.1

• Updatedlit@^2.7.4