@umbraco-ui/uui-toast-notification 1.0.0-alpha.0 → 1.0.0-rc.2

package/README.md

@@ -1,6 +1,6 @@
 # uui-toast-notification
 
-![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-toast-notification?logoColor=%231B264F)
+[![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-toast-notification?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-toast-notification)
 
 Umbraco style toast-notification component.
 

package/custom-elements.json

@@ -7,8 +7,8 @@
       "attributes": [
         {
           "name": "color",
-          "description": "Changes the look of the notification to one of the predefined, symbolic looks. Example set this to danger for errors.",
-          "type": "\"\"|\"primary\"|\"positive\"|\"warning\"|\"danger\"",
+          "description": "Changes the color of the notification to one of the predefined, symbolic colors. Example: set this to danger to indicate errors.",
+          "type": "'' | 'default' | 'positive' | 'warning' | 'danger'",
           "default": "\"\\\"\\\"\""
         },
         {
@@ -33,8 +33,8 @@
         {
           "name": "color",
           "attribute": "color",
-          "description": "Changes the look of the notification to one of the predefined, symbolic looks. Example set this to danger for errors.",
-          "type": "\"\"|\"primary\"|\"positive\"|\"warning\"|\"danger\"",
+          "description": "Changes the color of the notification to one of the predefined, symbolic colors. Example: set this to danger to indicate errors.",
+          "type": "'' | 'default' | 'positive' | 'warning' | 'danger'",
           "default": "\"\\\"\\\"\""
         },
         {

package/lib/index.js

@@ -37,8 +37,8 @@ let UUIToastNotificationElement = class extends LitElement {
     this._timer = null;
     this._pauseTimer = false;
     this.isOpen = false;
-    this._animate = false;
     this._open = false;
+    this._animate = false;
     this._requestAnimationUpdate = 0;
     this.addEventListener("keyup", (event) => {
       if (event.key === "Escape") {
@@ -94,7 +94,12 @@ let UUIToastNotificationElement = class extends LitElement {
     demandCustomElement(this, "uui-icon");
   }
   _getAnimationDuration() {
-    return parseInt(getComputedStyle(this).getPropertyValue("--uui-toast-notification-animation-duration"), 10) || 480;
+    return parseInt(
+      getComputedStyle(this).getPropertyValue(
+        "--uui-toast-notification-animation-duration"
+      ),
+      10
+    ) || 480;
   }
   _makeOpen() {
     if (this._open === true) {
@@ -112,7 +117,9 @@ let UUIToastNotificationElement = class extends LitElement {
         this.setAttribute("is-open", "");
         this.style.height = this._toastEl.getBoundingClientRect().height + "px";
         this._animate = true;
-        this.dispatchEvent(new UUIToastNotificationEvent(UUIToastNotificationEvent.OPENING));
+        this.dispatchEvent(
+          new UUIToastNotificationEvent(UUIToastNotificationEvent.OPENING)
+        );
         this._animationTimeout = window.setTimeout(() => {
           var _a;
           if (this.isOpen === true) {
@@ -121,7 +128,9 @@ let UUIToastNotificationElement = class extends LitElement {
             if (this._pauseTimer === false) {
               (_a = this._timer) == null ? void 0 : _a.start();
             }
-            this.dispatchEvent(new UUIToastNotificationEvent(UUIToastNotificationEvent.OPENED));
+            this.dispatchEvent(
+              new UUIToastNotificationEvent(UUIToastNotificationEvent.OPENED)
+            );
           }
         }, this._getAnimationDuration());
       });
@@ -132,7 +141,10 @@ let UUIToastNotificationElement = class extends LitElement {
     if (this._open === false) {
       return;
     }
-    const event = new UUIToastNotificationEvent(UUIToastNotificationEvent.CLOSING, { cancelable: true });
+    const event = new UUIToastNotificationEvent(
+      UUIToastNotificationEvent.CLOSING,
+      { cancelable: true }
+    );
     this.dispatchEvent(event);
     if (event.defaultPrevented === true) {
       return;
@@ -153,7 +165,9 @@ let UUIToastNotificationElement = class extends LitElement {
         this._animationTimeout = window.setTimeout(() => {
           if (this.isOpen === false) {
             this._animate = false;
-            this.dispatchEvent(new UUIToastNotificationEvent(UUIToastNotificationEvent.CLOSED));
+            this.dispatchEvent(
+              new UUIToastNotificationEvent(UUIToastNotificationEvent.CLOSED)
+            );
             if (this.parentNode) {
               this.parentNode.removeChild(this);
             }
@@ -169,7 +183,7 @@ let UUIToastNotificationElement = class extends LitElement {
           <div id="close">
             <uui-button
               .label=${"close"}
-              ?color=${this.color}
+              .color=${this.color}
               .look=${this.color ? "primary" : "default"}
               @click=${() => this.open = false}>
               <uui-icon
@@ -261,7 +275,7 @@ UUIToastNotificationElement.styles = [
         color: var(--uui-color-text,#060606);
         border-color: var(--uui-color-surface,#fff);
       }
-      :host([color='primary']) #toast > div {
+      :host([color='default']) #toast > div {
         background-color: var(--uui-color-default,#1b264f);
         color: var(--uui-color-default-contrast,#fff);
         border-color: var(--uui-color-default-standalone,rgb(28, 35, 59));

package/lib/uui-toast-notification.element.d.ts

@@ -11,12 +11,12 @@ import { LitElement } from 'lit';
 export declare class UUIToastNotificationElement extends LitElement {
     static styles: import("lit").CSSResult[];
     /**
-     * Changes the look of the notification to one of the predefined, symbolic looks. Example set this to danger for errors.
-     * @type {""|"primary"|"positive"|"warning"|"danger"}
+     * Changes the color of the notification to one of the predefined, symbolic colors. Example: set this to danger to indicate errors.
+     * @type {'' | 'default' | 'positive' | 'warning' | 'danger'}
      * @attr
      * @default ""
      */
-    color: string;
+    color: '' | 'default' | 'positive' | 'warning' | 'danger';
     private _autoClose;
     /**
      * Set an auto-close timer.
@@ -35,13 +35,13 @@ export declare class UUIToastNotificationElement extends LitElement {
      */
     resumeAutoClose(): void;
     private _onOpenTimerComplete;
+    private _toastEl;
     private _timer;
     private _pauseTimer;
-    private _toastEl;
-    private _animationTimeout?;
     protected isOpen: boolean;
-    private _animate;
     private _open;
+    private _animate;
+    private _animationTimeout?;
     /**
      * define if this toast should open or close.
      * @type boolean

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-toast-notification",
-  "version": "1.0.0-alpha.0",
+  "version": "1.0.0-rc.2",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,11 +30,11 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.0.0-alpha.0",
-    "@umbraco-ui/uui-button": "1.0.0-alpha.0",
-    "@umbraco-ui/uui-css": "1.0.0-alpha.0",
-    "@umbraco-ui/uui-icon": "1.0.0-alpha.0",
-    "@umbraco-ui/uui-icon-registry-essential": "1.0.0-alpha.0"
+    "@umbraco-ui/uui-base": "1.0.0-rc.2",
+    "@umbraco-ui/uui-button": "1.0.0-rc.2",
+    "@umbraco-ui/uui-css": "1.0.0-rc.2",
+    "@umbraco-ui/uui-icon": "1.0.0-rc.2",
+    "@umbraco-ui/uui-icon-registry-essential": "1.0.0-rc.2"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
@@ -45,5 +45,5 @@
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-toast-notification",
-  "gitHead": "7d7608bf2fb63a8a077fcd8f0346dea73584b878"
+  "gitHead": "436dd8d9fff81481feb88f06b461167c98dac91a"
 }