@esri/calcite-components 1.0.0-next.31 → 1.0.0-next.310

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

@@ -1,14 +1,19 @@
-import { Component, Element, Event, h, Host, Method, Listen, Prop, State, Watch } from "@stencil/core";
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * 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 { DURATIONS, TEXT } from "./calcite-alert.resources";
-import { StatusIcons } from "../../interfaces/StatusIcons";
+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.
  */
 /**
- * @slot alert-title - Title of the alert (optional)
- * @slot alert-message - Main text of the alert
- * @slot alert-link - Optional action to take from the alert (undo, try again, link to page, etc.)
+ * @slot title - Title of the alert (optional)
+ * @slot message - Main text of the alert
+ * @slot link - Optional action to take from the alert (undo, try again, link to page, etc.)
  */
 export class CalciteAlert {
   constructor() {
@@ -22,12 +27,12 @@ export class CalciteAlert {
     /** Close the alert automatically (recommended for passive, non-blocking alerts) */
     this.autoDismiss = false;
     /** Duration of autoDismiss (only used with `autoDismiss`) */
-    this.autoDismissDuration = this.autoDismiss
-      ? "medium"
-      : null;
+    this.autoDismissDuration = this.autoDismiss ? "medium" : null;
     /** Color for the alert (will apply to top border and icon) */
     this.color = "blue";
-    /** string to override English close text */
+    /** string to override English close text
+     * @default "Close"
+     */
     this.intlClose = TEXT.intlClose;
     /** specify the scale of the button, defaults to m */
     this.scale = "m";
@@ -42,10 +47,28 @@ export class CalciteAlert {
     this.queueLength = 0;
     /** is the alert queued */
     this.queued = false;
+    this.autoDismissTimeout = null;
+    this.trackTimer = new Date();
+    /** close and emit the closed alert and the queue */
+    this.closeAlert = () => {
+      if (this.autoDismissTimeout) {
+        this.autoDismissTimeout = null;
+      }
+      this.queued = false;
+      this.active = false;
+      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
+      });
+    };
   }
   watchActive() {
-    if (this.active && !this.queued)
+    if (this.active && !this.queued) {
       this.calciteAlertRegister.emit();
+    }
     if (!this.active) {
       this.queue = this.queue.filter((e) => e !== this.el);
       this.calciteAlertSync.emit({ queue: this.queue });
@@ -54,14 +77,21 @@ export class CalciteAlert {
   updateRequestedIcon() {
     this.requestedIcon = setRequestedIcon(StatusIcons, this.icon, this.color);
   }
+  updateDuration(newDuration, prevDuration) {
+    if (this.autoDismiss && prevDuration !== newDuration && this.autoDismissTimeout) {
+      window.clearTimeout(this.autoDismissTimeout);
+      this.autoDismissTimeout = window.setTimeout(() => this.closeAlert(), DURATIONS[this.autoDismissDuration] - (new Date().valueOf() - this.trackTimer.valueOf()));
+    }
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
-    if (this.active && !this.queued)
+    if (this.active && !this.queued) {
       this.calciteAlertRegister.emit();
+    }
   }
   componentWillLoad() {
     this.requestedIcon = setRequestedIcon(StatusIcons, this.icon, this.color);
@@ -69,26 +99,37 @@ export class CalciteAlert {
   componentDidLoad() {
     this.alertLinkEl = this.el.querySelectorAll("calcite-link")[0];
   }
+  disconnectedCallback() {
+    if (this.autoDismissTimeout) {
+      window.clearTimeout(this.autoDismissTimeout);
+    }
+  }
   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: "m" })));
+    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` },
-      "+",
-      this.queueLength > 2 ? this.queueLength - 1 : 1));
-    const progress = h("div", { class: "alert-dismiss-progress" });
-    const role = this.autoDismiss ? "alert" : "alertdialog";
-    const hidden = this.active ? "false" : "true";
-    return (h(Host, { active: this.active, "aria-hidden": hidden, dir: dir, queued: this.queued, role: role },
-      this.requestedIcon ? (h("div", { class: "alert-icon" },
-        h("calcite-icon", { icon: this.requestedIcon, scale: "m" }))) : null,
-      h("div", { class: "alert-content" },
-        h("slot", { name: "alert-title" }),
-        h("slot", { name: "alert-message" }),
-        h("slot", { name: "alert-link" })),
-      queueCount,
-      !this.autoDismiss ? closeButton : null,
-      this.active && !this.queued && this.autoDismiss ? progress : null));
+      h("calcite-chip", { scale: this.scale, value: queueText }, queueText)));
+    const { active, autoDismiss, label, queued, requestedIcon } = this;
+    const progressBar = h("div", { class: "alert-dismiss-progress" });
+    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"
+        } },
+        requestedIcon ? (h("div", { class: "alert-icon" },
+          h("calcite-icon", { icon: requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null,
+        h("div", { class: "alert-content" },
+          h("slot", { name: SLOTS.title }),
+          h("slot", { name: SLOTS.message }),
+          h("slot", { name: SLOTS.link })),
+        queueCount,
+        !autoDismiss ? closeButton : null,
+        active && !queued && autoDismiss ? progressBar : null)));
   }
   // when an alert is opened or closed, update queue and determine active alert
   alertSync(event) {
@@ -112,14 +153,17 @@ export class CalciteAlert {
   //  Public Methods
   //
   //--------------------------------------------------------------------------
-  /** focus either the slotted alert-link or the close button */
+  /** Sets focus on the component. */
   async setFocus() {
-    if (!this.closeButton && !this.alertLinkEl)
+    if (!this.closeButton && !this.alertLinkEl) {
       return;
-    else if (this.alertLinkEl)
+    }
+    else if (this.alertLinkEl) {
       this.alertLinkEl.setFocus();
-    else if (this.closeButton)
+    }
+    else if (this.closeButton) {
       this.closeButton.focus();
+    }
   }
   //--------------------------------------------------------------------------
   //
@@ -131,28 +175,19 @@ export class CalciteAlert {
     var _a;
     if (((_a = this.queue) === null || _a === void 0 ? void 0 : _a[0]) === this.el) {
       this.openAlert();
-      if (this.autoDismiss) {
-        setTimeout(() => this.closeAlert(), DURATIONS[this.autoDismissDuration]);
+      if (this.autoDismiss && !this.autoDismissTimeout) {
+        this.trackTimer = new Date();
+        this.autoDismissTimeout = window.setTimeout(() => this.closeAlert(), DURATIONS[this.autoDismissDuration]);
       }
     }
-    else
+    else {
       return;
-  }
-  /** close and emit the closed alert and the queue */
-  closeAlert() {
-    this.queued = false;
-    this.active = false;
-    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
-    });
+    }
   }
   /** emit the opened alert and the queue */
   openAlert() {
-    setTimeout(() => (this.queued = false), 300);
+    clearTimeout(this.queueTimeout);
+    this.queueTimeout = window.setTimeout(() => (this.queued = false), 300);
     this.calciteAlertOpen.emit({
       el: this.el,
       queue: this.queue
@@ -207,9 +242,14 @@ export class CalciteAlert {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "\"fast\" | \"medium\" | \"slow\"",
+        "original": "AlertDuration",
         "resolved": "\"fast\" | \"medium\" | \"slow\"",
-        "references": {}
+        "references": {
+          "AlertDuration": {
+            "location": "import",
+            "path": "./interfaces"
+          }
+        }
       },
       "required": false,
       "optional": false,
@@ -219,18 +259,18 @@ export class CalciteAlert {
       },
       "attribute": "auto-dismiss-duration",
       "reflect": true,
-      "defaultValue": "this.autoDismiss\n    ? \"medium\"\n    : null"
+      "defaultValue": "this.autoDismiss ? \"medium\" : null"
     },
     "color": {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "CalciteStatusColor",
+        "original": "StatusColor",
         "resolved": "\"blue\" | \"green\" | \"red\" | \"yellow\"",
         "references": {
-          "CalciteStatusColor": {
+          "StatusColor": {
             "location": "import",
-            "path": "../interfaces"
+            "path": "./interfaces"
           }
         }
       },
@@ -272,44 +312,41 @@ export class CalciteAlert {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "default",
+            "text": "\"Close\""
+          }],
         "text": "string to override English close text"
       },
       "attribute": "intl-close",
       "reflect": false,
       "defaultValue": "TEXT.intlClose"
     },
-    "scale": {
+    "label": {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "CalciteScale",
-        "resolved": "\"l\" | \"m\" | \"s\"",
-        "references": {
-          "CalciteScale": {
-            "location": "import",
-            "path": "../interfaces"
-          }
-        }
+        "original": "string",
+        "resolved": "string",
+        "references": {}
       },
-      "required": false,
+      "required": true,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "specify the scale of the button, defaults to m"
+        "text": "Accessible name for the component"
       },
-      "attribute": "scale",
-      "reflect": true,
-      "defaultValue": "\"m\""
+      "attribute": "label",
+      "reflect": false
     },
-    "theme": {
+    "scale": {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "CalciteTheme",
-        "resolved": "\"dark\" | \"light\"",
+        "original": "Scale",
+        "resolved": "\"l\" | \"m\" | \"s\"",
         "references": {
-          "CalciteTheme": {
+          "Scale": {
             "location": "import",
             "path": "../interfaces"
           }
@@ -319,10 +356,11 @@ export class CalciteAlert {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Select theme (light or dark)"
+        "text": "specify the scale of the button, defaults to m"
       },
-      "attribute": "theme",
-      "reflect": true
+      "attribute": "scale",
+      "reflect": true,
+      "defaultValue": "\"m\""
     }
   }; }
   static get states() { return {
@@ -369,8 +407,8 @@ export class CalciteAlert {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Fired to sync queue when opened or closed"
       },
@@ -387,8 +425,8 @@ export class CalciteAlert {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Fired when an alert is added to dom - used to receive initial queue"
       },
@@ -411,7 +449,7 @@ export class CalciteAlert {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "focus either the slotted alert-link or the close button",
+        "text": "Sets focus on the component.",
         "tags": []
       }
     }
@@ -426,6 +464,9 @@ export class CalciteAlert {
     }, {
       "propName": "color",
       "methodName": "updateRequestedIcon"
+    }, {
+      "propName": "autoDismissDuration",
+      "methodName": "updateDuration"
     }]; }
   static get listeners() { return [{
       "name": "calciteAlertSync",

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

@@ -0,0 +1,11 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+export var StatusIcons;
+(function (StatusIcons) {
+  StatusIcons["green"] = "checkCircle";
+  StatusIcons["yellow"] = "exclamationMarkTriangle";
+  StatusIcons["red"] = "exclamationMarkTriangle";
+  StatusIcons["blue"] = "lightbulb";
+})(StatusIcons || (StatusIcons = {}));

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

@@ -0,0 +1,17 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+export const TEXT = {
+  intlClose: "Close"
+};
+export const DURATIONS = {
+  slow: 14000,
+  medium: 10000,
+  fast: 6000
+};
+export const SLOTS = {
+  title: "title",
+  message: "message",
+  link: "link"
+};

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

@@ -1,6 +1,6 @@
 /* mixins & extensions */
 
-@keyframes calcite-fade-in {
+@keyframes in {
   0% {
     opacity: 0;
   }
@@ -10,7 +10,7 @@
   }
 }
 
-@keyframes calcite-fade-in-down {
+@keyframes in-down {
   0% {
     opacity: 0;
     transform: translate3D(0, -5px, 0);
@@ -22,7 +22,7 @@
   }
 }
 
-@keyframes calcite-fade-in-up {
+@keyframes in-up {
   0% {
     opacity: 0;
     transform: translate3D(0, 5px, 0);
@@ -34,7 +34,7 @@
   }
 }
 
-@keyframes calcite-fade-in-scale {
+@keyframes in-scale {
   0% {
     opacity: 0;
     transform: scale3D(0.95, 0.95, 1);
@@ -46,6 +46,36 @@
   }
 }
 
+:root {
+  --calcite-animation-timing: 300ms;
+}
+
+.calcite-animate {
+  opacity: 0;
+  animation-fill-mode: both;
+  animation-duration: var(--calcite-animation-timing);
+}
+
+.calcite-animate__in {
+  animation-name: in;
+}
+
+.calcite-animate__in-down {
+  animation-name: in-down;
+}
+
+.calcite-animate__in-up {
+  animation-name: in-up;
+}
+
+.calcite-animate__in-scale {
+  animation-name: in-scale;
+}
+
+/**
+* Currently only used in Checkbox.
+*/
+
 :root {
   --calcite-popper-transition: 150ms ease-in-out;
 }
@@ -54,33 +84,6 @@
   display: none;
 }
 
-:host-context([theme=dark]) {
-  --calcite-ui-blue-1: #00A0FF;
-  --calcite-ui-blue-2: #0087D7;
-  --calcite-ui-blue-3: #47BBFF;
-  --calcite-ui-green-1: #36DA43;
-  --calcite-ui-green-2: #11AD1D;
-  --calcite-ui-green-3: #44ED51;
-  --calcite-ui-yellow-1: #FFC900;
-  --calcite-ui-yellow-2: #F4B000;
-  --calcite-ui-yellow-3: #FFE24D;
-  --calcite-ui-red-1: #FE583E;
-  --calcite-ui-red-2: #F3381B;
-  --calcite-ui-red-3: #FF7465;
-  --calcite-ui-background: #202020;
-  --calcite-ui-foreground-1: #2b2b2b;
-  --calcite-ui-foreground-2: #353535;
-  --calcite-ui-foreground-3: #404040;
-  --calcite-ui-text-1: #ffffff;
-  --calcite-ui-text-2: #bfbfbf;
-  --calcite-ui-text-3: #9f9f9f;
-  --calcite-ui-border-1: #4a4a4a;
-  --calcite-ui-border-2: #404040;
-  --calcite-ui-border-3: #353535;
-  --calcite-ui-border-4: #757575;
-  --calcite-ui-border-5: #9f9f9f;
-}
-
 :host {
   display: inline-flex;
   justify-content: center;
@@ -92,19 +95,19 @@
 :host([scale=s]) {
   width: 1.5rem;
   height: 1.5rem;
-  font-size: 0.625rem;
+  font-size: var(--calcite-font-size--3);
 }
 
 :host([scale=m]) {
   width: 2rem;
   height: 2rem;
-  font-size: 0.75rem;
+  font-size: var(--calcite-font-size--2);
 }
 
 :host([scale=l]) {
-  width: 2.5rem;
-  height: 2.5rem;
-  font-size: 0.875rem;
+  width: 2.75rem;
+  height: 2.75rem;
+  font-size: var(--calcite-font-size-0);
 }
 
 .icon {
@@ -121,7 +124,7 @@
 }
 
 .initials {
-  font-weight: 700;
+  font-weight: var(--calcite-font-weight-bold);
   text-transform: uppercase;
   color: var(--calcite-ui-text-3);
 }

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

@@ -1,9 +1,19 @@
-import { Component, Element, h, Host, Prop, State } from "@stencil/core";
-import { getElementDir, getElementTheme } from "../../utils/dom";
-import { isValidHex } from "../calcite-color/utils";
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+import { Component, Element, h, Prop, State } from "@stencil/core";
+import { getElementDir } from "../../utils/dom";
+import { isValidHex } from "../calcite-color-picker/utils";
 import { hexToHue, stringToHex } from "./utils";
+import { getThemeName } from "../../utils/dom";
 export class CalciteAvatar {
   constructor() {
+    //--------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    //--------------------------------------------------------------------------
     /** specify the scale of the avatar, defaults to m */
     this.scale = "m";
     //--------------------------------------------------------------------------
@@ -19,16 +29,8 @@ export class CalciteAvatar {
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
-  connectedCallback() {
-    // prop validations
-    const scale = ["s", "m", "l"];
-    if (!scale.includes(this.scale))
-      this.scale = "m";
-  }
   render() {
-    const dir = getElementDir(this.el);
-    const content = this.determineContent();
-    return h(Host, { dir: dir }, content);
+    return this.determineContent();
   }
   //--------------------------------------------------------------------------
   //
@@ -36,19 +38,20 @@ export class CalciteAvatar {
   //
   //--------------------------------------------------------------------------
   determineContent() {
+    const dir = getElementDir(this.el);
     if (this.thumbnail && !this.error) {
-      return (h("img", { alt: "", class: "thumbnail", onError: () => (this.error = true), src: this.thumbnail }));
+      return (h("img", { alt: "", class: "thumbnail", dir: dir, onError: () => (this.error = true), src: this.thumbnail }));
     }
     const initials = this.generateInitials();
     const backgroundColor = this.generateFillColor();
-    return (h("span", { class: "background", style: { backgroundColor } }, initials ? (h("span", { "aria-hidden": "true", class: "initials" }, initials)) : (h("calcite-icon", { class: "icon", icon: "user", scale: this.scale, theme: this.theme }))));
+    return (h("span", { class: "background", dir: dir, style: { backgroundColor } }, initials ? (h("span", { "aria-hidden": "true", class: "initials" }, initials)) : (h("calcite-icon", { class: "icon", icon: "user", scale: this.scale }))));
   }
   /**
    * Generate a valid background color that is consistent and unique to this user
    */
   generateFillColor() {
-    const { userId, username, fullName } = this;
-    const theme = getElementTheme(this.el);
+    const { userId, username, fullName, el } = this;
+    const theme = getThemeName(el);
     const id = userId && `#${userId.substr(userId.length - 6)}`;
     const name = username || fullName || "";
     const hex = id && isValidHex(id) ? id : stringToHex(name);
@@ -86,30 +89,18 @@ export class CalciteAvatar {
     "$": ["calcite-avatar.css"]
   }; }
   static get properties() { return {
-    "theme": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "\"light\" | \"dark\"",
-        "resolved": "\"dark\" | \"light\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Select theme (light or dark)"
-      },
-      "attribute": "theme",
-      "reflect": true
-    },
     "scale": {
       "type": "string",
-      "mutable": true,
+      "mutable": false,
       "complexType": {
-        "original": "\"s\" | \"m\" | \"l\"",
+        "original": "Scale",
         "resolved": "\"l\" | \"m\" | \"s\"",
-        "references": {}
+        "references": {
+          "Scale": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
       },
       "required": false,
       "optional": false,

package/dist/collection/components/calcite-avatar/utils.js

@@ -1,4 +1,8 @@
-import { hexToRGB } from "../calcite-color/utils";
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+import { hexToRGB } from "../calcite-color-picker/utils";
 /**
  * Convert a string to a valid hex by hashing its contents
  * and using the hash as a seed for three distinct color values