@esri/calcite-components 1.0.0-beta.71 → 1.0.0-beta.75

package/dist/collection/components/calcite-alert/calcite-alert.css

@@ -1,53 +1,48 @@
 /* mixins & extensions */
-
 @keyframes in {
   0% {
     opacity: 0;
   }
-
   100% {
     opacity: 1;
   }
 }
-
 @keyframes in-down {
   0% {
     opacity: 0;
     transform: translate3D(0, -5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-up {
   0% {
     opacity: 0;
     transform: translate3D(0, 5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-scale {
   0% {
     opacity: 0;
     transform: scale3D(0.95, 0.95, 1);
   }
-
   100% {
     opacity: 1;
     transform: scale3D(1, 1, 1);
   }
 }
-
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
 }
 
 .calcite-animate {
@@ -75,9 +70,8 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -91,40 +85,30 @@
 *
 * @prop --calcite-alert-width: the width of the alert
 */
-
 :host([scale=s]) {
   --calcite-alert-width: 40em;
   --calcite-alert-spacing-token-small: 0.5rem;
   --calcite-alert-spacing-token-large: 0.75rem;
 }
-
-:host([scale=s]) slot[name=title]::slotted(*),
-:host([scale=s]) *::slotted([slot=title]) {
+:host([scale=s]) slot[name=title]::slotted(*), :host([scale=s]) *::slotted([slot=title]) {
   font-size: var(--calcite-font-size--1);
   line-height: 1.375;
 }
-
-:host([scale=s]) slot[name=message]::slotted(*),
-:host([scale=s]) *::slotted([slot=message]) {
+:host([scale=s]) slot[name=message]::slotted(*), :host([scale=s]) *::slotted([slot=message]) {
   font-size: var(--calcite-font-size--2);
   line-height: 1.375;
 }
-
-:host([scale=s]) slot[name=link]::slotted(*),
-:host([scale=s]) *::slotted([slot=link]) {
+:host([scale=s]) slot[name=link]::slotted(*), :host([scale=s]) *::slotted([slot=link]) {
   font-size: var(--calcite-font-size--2);
   line-height: 1.375;
 }
-
 :host([scale=s]) .alert-queue-count {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
 }
-
 :host([scale=s]) .container {
   --calcite-alert-min-height: 3.5rem;
 }
-
 :host([scale=s]) .alert-close {
   padding: 0.5rem;
 }
@@ -134,30 +118,22 @@
   --calcite-alert-spacing-token-small: 0.75rem;
   --calcite-alert-spacing-token-large: 1rem;
 }
-
-:host([scale=m]) slot[name=title]::slotted(*),
-:host([scale=m]) *::slotted([slot=title]) {
+:host([scale=m]) slot[name=title]::slotted(*), :host([scale=m]) *::slotted([slot=title]) {
   font-size: var(--calcite-font-size-0);
   line-height: 1.375;
 }
-
-:host([scale=m]) slot[name=message]::slotted(*),
-:host([scale=m]) *::slotted([slot=message]) {
+:host([scale=m]) slot[name=message]::slotted(*), :host([scale=m]) *::slotted([slot=message]) {
   font-size: var(--calcite-font-size--1);
   line-height: 1.375;
 }
-
-:host([scale=m]) slot[name=link]::slotted(*),
-:host([scale=m]) *::slotted([slot=link]) {
+:host([scale=m]) slot[name=link]::slotted(*), :host([scale=m]) *::slotted([slot=link]) {
   font-size: var(--calcite-font-size--1);
   line-height: 1.375;
 }
-
 :host([scale=m]) .alert-queue-count {
   margin-left: 0.75rem;
   margin-right: 0.75rem;
 }
-
 :host([scale=m]) .container {
   --calcite-alert-min-height: 4.1875rem;
 }
@@ -167,55 +143,46 @@
   --calcite-alert-spacing-token-small: 1rem;
   --calcite-alert-spacing-token-large: 1.25rem;
 }
-
-:host([scale=l]) slot[name=title]::slotted(*),
-:host([scale=l]) *::slotted([slot=title]) {
+:host([scale=l]) slot[name=title]::slotted(*), :host([scale=l]) *::slotted([slot=title]) {
+  margin-bottom: 0.25rem;
   font-size: var(--calcite-font-size-1);
   line-height: 1.375;
-  margin-bottom: 0.25rem;
 }
-
-:host([scale=l]) slot[name=message]::slotted(*),
-:host([scale=l]) *::slotted([slot=message]) {
+:host([scale=l]) slot[name=message]::slotted(*), :host([scale=l]) *::slotted([slot=message]) {
   font-size: var(--calcite-font-size-0);
   line-height: 1.375;
 }
-
-:host([scale=l]) slot[name=link]::slotted(*),
-:host([scale=l]) *::slotted([slot=link]) {
+:host([scale=l]) slot[name=link]::slotted(*), :host([scale=l]) *::slotted([slot=link]) {
   font-size: var(--calcite-font-size-0);
   line-height: 1.375;
 }
-
 :host([scale=l]) .alert-queue-count {
   margin-left: 1rem;
   margin-right: 1rem;
 }
-
 :host([scale=l]) .container {
   --calcite-alert-min-height: 5.625rem;
 }
 
 :host {
+  --calcite-alert-edge-distance: 2rem;
   display: block;
 }
-
 :host .container {
-  box-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);
-  display: flex;
-  position: fixed;
-  justify-content: center;
-  align-items: center;
   pointer-events: none;
-  margin-top: 0;
-  margin-bottom: 0;
+  position: fixed;
+  margin-top: 0px;
+  margin-bottom: 0px;
   margin-left: auto;
   margin-right: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   background-color: var(--calcite-ui-foreground-1);
   opacity: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  --tw-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);
+  --tw-shadow-colored: 0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   border-radius: var(--calcite-border-radius);
   border-top: 0px solid transparent;
   border-left: 1px solid var(--calcite-ui-border-3);
@@ -223,18 +190,37 @@
   border-bottom: 1px solid var(--calcite-ui-border-3);
   min-height: var(--calcite-alert-min-height);
   width: var(--calcite-alert-width);
-  max-width: 90%;
+  max-width: calc(100% - (var(--calcite-alert-edge-distance) * 2 + 2px));
   max-height: 0;
   z-index: 101;
-  transform: translate3d(0, 1.5rem, 0);
-  transition: 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88), all 0.15s ease-in-out;
+  transition: var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), all var(--calcite-animation-timing) ease-in-out;
+}
+:host .container.bottom, :host .container.top {
+  inset-inline-end: 0;
+  inset-inline-start: 0;
+}
+:host .container[class*=bottom] {
+  transform: translate3d(0, var(--calcite-alert-edge-distance), 0);
+  inset-block-end: var(--calcite-alert-edge-distance);
+}
+:host .container[class*=top] {
+  transform: translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), 0);
+  inset-block-start: var(--calcite-alert-edge-distance);
+}
+:host .container[class*=-start] {
+  inset-inline-start: var(--calcite-alert-edge-distance);
+  inset-inline-end: auto;
+}
+:host .container[class*=-end] {
+  inset-inline-end: var(--calcite-alert-edge-distance);
+  inset-inline-start: auto;
 }
 
 .container {
   display: flex;
   width: 100%;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
 }
 
 .alert-close {
@@ -242,161 +228,145 @@
   outline-color: transparent;
   transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
 }
-
 .alert-close:focus {
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: -2px;
 }
 
 :host([active]) .container:not(.queued) {
-  opacity: 1;
   max-height: 100%;
   border-top-width: 2px;
-  transform: translate3d(0, -1.5rem, 0);
+  opacity: 1;
   pointer-events: initial;
 }
+:host([active]) .container:not(.queued)[class*=bottom] {
+  transform: translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), inherit);
+}
+:host([active]) .container:not(.queued)[class*=top] {
+  transform: translate3d(0, var(--calcite-alert-edge-distance), inherit);
+}
 
-slot[name=title]::slotted(*),
-*::slotted([slot=title]) {
-  font-weight: var(--calcite-font-weight-medium);
+slot[name=title]::slotted(*), *::slotted([slot=title]) {
   font-size: var(--calcite-font-size-0);
   line-height: 1.375;
+  font-weight: var(--calcite-font-weight-medium);
   color: var(--calcite-ui-text-1);
 }
 
-slot[name=message]::slotted(*),
-*::slotted([slot=message]) {
+slot[name=message]::slotted(*), *::slotted([slot=message]) {
+  margin: 0px;
   display: inline;
-  margin: 0;
-  margin-right: 0.5rem;
-  font-weight: var(--calcite-font-weight-normal);
   font-size: var(--calcite-font-size--1);
   line-height: 1.375;
+  font-weight: var(--calcite-font-weight-normal);
   color: var(--calcite-ui-text-2);
+  margin-inline-end: 0.5rem;
 }
 
-slot[name=link]::slotted(*),
-*::slotted([slot=link]) {
-  color: var(--calcite-ui-text-link);
+slot[name=link]::slotted(*), *::slotted([slot=link]) {
   display: inline-flex;
-}
-
-.calcite--rtl slot[name=message]::slotted(*),
-.calcite--rtl *::slotted([slot=message]) {
-  margin-left: 0.5rem;
-  margin-right: unset;
+  color: var(--calcite-ui-text-link);
 }
 
 .alert-content {
+  transition-property: all;
+  transition-duration: var(--calcite-animation-timing);
+  transition-timing-function: ease-in-out;
+  transition-delay: 0s;
   padding: var(--calcite-alert-spacing-token-small) var(--calcite-alert-spacing-token-large);
-  flex: 0 0 auto;
-  transition: all 0.15s ease-in-out;
-  word-wrap: break-word;
   overflow-wrap: break-word;
   background-color: var(--calcite-ui-foreground-1);
   flex: 1 1 auto;
   min-width: 0;
-  padding: var(--calcite-alert-spacing-token-small) var(--calcite-alert-spacing-token-small) var(--calcite-alert-spacing-token-small) 0;
+  padding-block: var(--calcite-alert-spacing-token-small);
+  padding-inline: 0 var(--calcite-alert-spacing-token-small);
   border-bottom-left-radius: var(--calcite-border-radius);
   border-bottom-right-radius: var(--calcite-border-radius);
 }
-
 .alert-content:first-of-type:not(:only-child) {
-  padding-left: var(--calcite-alert-spacing-token-large);
+  padding-inline-start: var(--calcite-alert-spacing-token-large);
 }
-
 .alert-content:only-child {
   padding: var(--calcite-alert-spacing-token-small);
 }
 
-.calcite--rtl .alert-content {
-  padding: var(--calcite-alert-spacing-token-small) 0 var(--calcite-alert-spacing-token-small) var(--calcite-alert-spacing-token-small);
-}
-
-.calcite--rtl .alert-content:first-of-type:not(:only-child) {
-  padding-right: var(--calcite-alert-spacing-token-large);
-}
-
 .alert-icon {
+  transition-property: all;
+  transition-duration: var(--calcite-animation-timing);
+  transition-timing-function: ease-in-out;
+  transition-delay: 0s;
   padding: var(--calcite-alert-spacing-token-small) var(--calcite-alert-spacing-token-large);
   flex: 0 0 auto;
-  transition: all 0.15s ease-in-out;
-  padding-top: 0;
-  padding-bottom: 0;
   display: flex;
-  align-self: stretch;
   align-items: center;
+  align-self: stretch;
   background-color: var(--calcite-ui-foreground-1);
+  padding-top: 0px;
+  padding-bottom: 0px;
 }
 
 .alert-close {
+  transition-property: all;
+  transition-duration: var(--calcite-animation-timing);
+  transition-timing-function: ease-in-out;
+  transition-delay: 0s;
   padding: var(--calcite-alert-spacing-token-small) var(--calcite-alert-spacing-token-large);
   flex: 0 0 auto;
-  transition: all 0.15s ease-in-out;
-  padding-top: 0;
-  padding-bottom: 0;
+  cursor: pointer;
   align-self: stretch;
-  background-color: var(--calcite-ui-foreground-1);
   border-style: none;
+  background-color: var(--calcite-ui-foreground-1);
+  padding-top: 0px;
+  padding-bottom: 0px;
+  color: var(--calcite-ui-text-3);
   outline: 2px solid transparent;
   outline-offset: 2px;
-  cursor: pointer;
-  color: var(--calcite-ui-text-3);
   overflow: hidden;
-  border-bottom-right-radius: var(--calcite-border-radius);
+  border-end-end-radius: var(--calcite-border-radius);
 }
-
 .alert-close:hover, .alert-close:focus {
-  color: var(--calcite-ui-text-1);
   background-color: var(--calcite-ui-foreground-2);
+  color: var(--calcite-ui-text-1);
 }
-
 .alert-close:active {
   background-color: var(--calcite-ui-foreground-3);
 }
 
-.calcite--rtl .alert-close {
-  border-bottom-left-radius: var(--calcite-border-radius);
-  border-bottom-right-radius: unset;
-}
-
 .alert-queue-count {
+  visibility: hidden;
   display: flex;
+  cursor: default;
   align-items: center;
   justify-content: space-around;
   align-self: stretch;
-  overflow: hidden;
-  visibility: hidden;
-  font-weight: var(--calcite-font-weight-medium);
+  background-color: var(--calcite-ui-foreground-1);
   text-align: center;
+  font-weight: var(--calcite-font-weight-medium);
   color: var(--calcite-ui-text-2);
-  background-color: var(--calcite-ui-foreground-1);
   opacity: 0;
-  cursor: default;
+  transition-property: all;
+  transition-duration: var(--calcite-animation-timing);
+  transition-timing-function: ease-in-out;
+  transition-delay: 0s;
+  overflow: hidden;
   border-left: 0px solid transparent;
   border-right: 0px solid transparent;
   border-top-right-radius: 0;
-  transition: all 0.15s ease-in-out;
 }
-
 .alert-queue-count.active {
   visibility: visible;
   opacity: 1;
 }
 
 :host([auto-dismiss]) > .alert-queue-count {
-  border-right: 0px solid transparent;
-}
-
-:host([auto-dismiss]) .calcite--rtl > .alert-queue-count {
-  border-left: 0px solid transparent;
+  border-inline-end: 0px solid transparent;
 }
 
 .alert-dismiss-progress {
-  display: block;
   position: absolute;
-  left: 0;
-  right: 0;
+  left: 0px;
+  right: 0px;
+  display: block;
   width: 100%;
   overflow: hidden;
   top: -2px;
@@ -404,27 +374,20 @@ slot[name=link]::slotted(*),
   z-index: 103;
   border-radius: var(--calcite-border-radius) var(--calcite-border-radius) 0 0;
 }
-
 .alert-dismiss-progress:after {
-  top: 0;
-  right: 0;
-  display: block;
   position: absolute;
+  top: 0px;
+  display: block;
   height: 2px;
   content: "";
   background-color: var(--calcite-alert-dismiss-progress-background);
   z-index: 104;
-}
-
-.calcite--rtl .alert-dismiss-progress:after {
-  left: 0;
-  right: initial;
+  inset-inline-end: 0;
 }
 
 :host([color=blue]) .container {
   border-top-color: var(--calcite-ui-info);
 }
-
 :host([color=blue]) .container .alert-icon {
   color: var(--calcite-ui-info);
 }
@@ -432,7 +395,6 @@ slot[name=link]::slotted(*),
 :host([color=red]) .container {
   border-top-color: var(--calcite-ui-danger);
 }
-
 :host([color=red]) .container .alert-icon {
   color: var(--calcite-ui-danger);
 }
@@ -440,7 +402,6 @@ slot[name=link]::slotted(*),
 :host([color=yellow]) .container {
   border-top-color: var(--calcite-ui-warning);
 }
-
 :host([color=yellow]) .container .alert-icon {
   color: var(--calcite-ui-warning);
 }
@@ -448,7 +409,6 @@ slot[name=link]::slotted(*),
 :host([color=green]) .container {
   border-top-color: var(--calcite-ui-success);
 }
-
 :host([color=green]) .container .alert-icon {
   color: var(--calcite-ui-success);
 }
@@ -467,12 +427,15 @@ slot[name=link]::slotted(*),
 
 @keyframes dismissProgress {
   0% {
-    width: 0;
+    width: 0px;
+  }
+  0% {
     opacity: 0.75;
   }
-
   100% {
     width: 100%;
+  }
+  100% {
     opacity: 1;
   }
 }

package/dist/collection/components/calcite-alert/calcite-alert.js

@@ -3,10 +3,9 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
-import { getElementDir, setRequestedIcon } from "../../utils/dom";
+import { setRequestedIcon } from "../../utils/dom";
 import { DURATIONS, SLOTS, TEXT } from "./resources";
 import { StatusIcons } from "./interfaces";
-import { CSS_UTILITY } from "../../utils/resources";
 /** Alerts are meant to provide a way to communicate urgent or important information to users, frequently as a result of an action they took in your app. Alerts are positioned
  * at the bottom of the page. Multiple opened alerts will be added to a queue, allowing users to dismiss them in the order they are provided.
  */
@@ -34,7 +33,9 @@ export class CalciteAlert {
      * @default "Close"
      */
     this.intlClose = TEXT.intlClose;
-    /** specify the scale of the button, defaults to m */
+    /** specify the placement of the alert */
+    this.placement = "bottom";
+    /** specify the scale of the alert, defaults to m */
     this.scale = "m";
     //--------------------------------------------------------------------------
     //
@@ -49,6 +50,7 @@ export class CalciteAlert {
     this.queued = false;
     this.autoDismissTimeoutId = null;
     this.trackTimer = Date.now();
+    this.activeTransitionProp = "opacity";
     /** close and emit the closed alert and the queue */
     this.closeAlert = () => {
       this.autoDismissTimeoutId = null;
@@ -57,10 +59,19 @@ export class CalciteAlert {
       this.queue = this.queue.filter((e) => e !== this.el);
       this.determineActiveAlert();
       this.calciteAlertSync.emit({ queue: this.queue });
-      this.calciteAlertClose.emit({
-        el: this.el,
-        queue: this.queue
-      });
+    };
+    this.transitionEnd = (event) => {
+      if (event.propertyName === this.activeTransitionProp) {
+        this.active
+          ? this.calciteAlertOpen.emit({
+            el: this.el,
+            queue: this.queue
+          })
+          : this.calciteAlertClose.emit({
+            el: this.el,
+            queue: this.queue
+          });
+      }
     };
   }
   watchActive() {
@@ -101,21 +112,20 @@ export class CalciteAlert {
     window.clearTimeout(this.autoDismissTimeoutId);
   }
   render() {
-    const dir = getElementDir(this.el);
     const closeButton = (h("button", { "aria-label": this.intlClose, class: "alert-close", onClick: this.closeAlert, ref: (el) => (this.closeButton = el), type: "button" },
       h("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : "s" })));
     const queueText = `+${this.queueLength > 2 ? this.queueLength - 1 : 1}`;
     const queueCount = (h("div", { class: `${this.queueLength > 1 ? "active " : ""}alert-queue-count` },
       h("calcite-chip", { scale: this.scale, value: queueText }, queueText)));
-    const { active, autoDismiss, label, queued, requestedIcon } = this;
+    const { active, autoDismiss, label, placement, queued, requestedIcon } = this;
     const role = autoDismiss ? "alert" : "alertdialog";
     const hidden = !active;
     return (h(Host, { "aria-hidden": hidden.toString(), "aria-label": label, "calcite-hydrated-hidden": hidden, role: role },
       h("div", { class: {
           container: true,
           queued,
-          [CSS_UTILITY.rtl]: dir === "rtl"
-        } },
+          [placement]: true
+        }, onTransitionEnd: this.transitionEnd },
         requestedIcon ? (h("div", { class: "alert-icon" },
           h("calcite-icon", { icon: requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null,
         h("div", { class: "alert-content" },
@@ -181,12 +191,8 @@ export class CalciteAlert {
   }
   /** emit the opened alert and the queue */
   openAlert() {
-    clearTimeout(this.queueTimeout);
+    window.clearTimeout(this.queueTimeout);
     this.queueTimeout = window.setTimeout(() => (this.queued = false), 300);
-    this.calciteAlertOpen.emit({
-      el: this.el,
-      queue: this.queue
-    });
   }
   static get is() { return "calcite-alert"; }
   static get encapsulation() { return "shadow"; }
@@ -334,6 +340,29 @@ export class CalciteAlert {
       "attribute": "label",
       "reflect": false
     },
+    "placement": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "AlertPlacement",
+        "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"top\" | \"top-end\" | \"top-start\"",
+        "references": {
+          "AlertPlacement": {
+            "location": "import",
+            "path": "./interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "specify the placement of the alert"
+      },
+      "attribute": "placement",
+      "reflect": false,
+      "defaultValue": "\"bottom\""
+    },
     "scale": {
       "type": "string",
       "mutable": false,
@@ -351,7 +380,7 @@ export class CalciteAlert {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "specify the scale of the button, defaults to m"
+        "text": "specify the scale of the alert, defaults to m"
       },
       "attribute": "scale",
       "reflect": true,