@esri/calcite-components 1.0.0-beta.81 → 1.0.0-beta.84

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

@@ -1,19 +1,20 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.81
+ * v1.0.0-beta.84
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
-import { getSlotted, setRequestedIcon } from "../../utils/dom";
+import { getSlotted, setRequestedIcon, toAriaBoolean } from "../../utils/dom";
 import { DURATIONS, SLOTS, TEXT } from "./resources";
 import { StatusIcons } from "./interfaces";
-/** 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
+/**
+ * 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 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.)
+ * @slot title - A slot for optionally adding a title to the component.
+ * @slot message - A slot for adding main text to the component.
+ * @slot link - A slot for optionally adding an action to take from the alert (undo, try again, link to page, etc.)
  */
 export class Alert {
   constructor() {
@@ -22,21 +23,23 @@ export class Alert {
     //  Properties
     //
     //---------------------------------------------------------------------------
-    /** Is the alert currently active or not */
+    /** When true, the component is active. */
     this.active = false;
-    /** Close the alert automatically (recommended for passive, non-blocking alerts) */
+    /** When true, the component closes automatically (recommended for passive, non-blocking alerts). */
     this.autoDismiss = false;
-    /** Duration of autoDismiss (only used with `autoDismiss`) */
+    /** Specifies the duration before the component automatically closes (only use with `autoDismiss`). */
     this.autoDismissDuration = this.autoDismiss ? "medium" : null;
-    /** Color for the alert (will apply to top border and icon) */
+    /** Specifies the color for the component (will apply to top border and icon). */
     this.color = "blue";
-    /** string to override English close text
+    /**
+     * Specifies the text label for the close button.
+     *
      * @default "Close"
      */
     this.intlClose = TEXT.intlClose;
-    /** specify the placement of the alert */
+    /** Specifies the placement of the component */
     this.placement = "bottom";
-    /** specify the scale of the alert, defaults to m */
+    /** Specifies the size of the component. */
     this.scale = "m";
     //--------------------------------------------------------------------------
     //
@@ -49,39 +52,44 @@ export class Alert {
     this.queueLength = 0;
     /** is the alert queued */
     this.queued = false;
+    this.setContainerDiv = (el) => {
+      this.containerDiv = el;
+      this.containerDiv.addEventListener("transitionrun", this.transitionRunHandler);
+    };
     this.autoDismissTimeoutId = null;
     this.trackTimer = Date.now();
     this.activeTransitionProp = "opacity";
-    /** close and emit the closed alert and the queue */
+    /** close and emit calciteInternalAlertSync event with the updated queue payload */
     this.closeAlert = () => {
       this.autoDismissTimeoutId = 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.calciteInternalAlertSync.emit({ queue: this.queue });
+    };
+    /* *
+    - `transitionrun` fires when the transition is created at the start of any delay and is not cancellable once started.
+    - if there is no transition delay, both `transitionrun` and `transitionstart` are fired at the same time.
+    */
+    this.transitionRunHandler = (event) => {
+      if (event.propertyName === this.activeTransitionProp) {
+        this.active ? this.emitOpenCloseEvent("beforeOpen") : this.emitOpenCloseEvent("beforeClose");
+      }
     };
     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
-          });
+        this.active ? this.emitOpenCloseEvent("open") : this.emitOpenCloseEvent("close");
       }
     };
   }
   watchActive() {
     if (this.active && !this.queued) {
-      this.calciteAlertRegister.emit();
+      this.calciteInternalAlertRegister.emit();
     }
     if (!this.active) {
       this.queue = this.queue.filter((e) => e !== this.el);
-      this.calciteAlertSync.emit({ queue: this.queue });
+      this.calciteInternalAlertSync.emit({ queue: this.queue });
     }
   }
   updateRequestedIcon() {
@@ -100,7 +108,7 @@ export class Alert {
   //--------------------------------------------------------------------------
   connectedCallback() {
     if (this.active && !this.queued) {
-      this.calciteAlertRegister.emit();
+      this.calciteInternalAlertRegister.emit();
     }
   }
   componentWillLoad() {
@@ -108,6 +116,9 @@ export class Alert {
   }
   disconnectedCallback() {
     window.clearTimeout(this.autoDismissTimeoutId);
+    if (this.containerDiv) {
+      this.containerDiv.removeEventListener("transitionrun", this.transitionRunHandler);
+    }
   }
   render() {
     const closeButton = (h("button", { "aria-label": this.intlClose, class: "alert-close", onClick: this.closeAlert, ref: (el) => (this.closeButton = el), type: "button" },
@@ -118,12 +129,12 @@ export class Alert {
     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 },
+    return (h(Host, { "aria-hidden": toAriaBoolean(hidden), "aria-label": label, "calcite-hydrated-hidden": hidden, role: role },
       h("div", { class: {
           container: true,
           queued,
           [placement]: true
-        }, onTransitionEnd: this.transitionEnd },
+        }, onTransitionEnd: this.transitionEnd, ref: this.setContainerDiv },
         requestedIcon ? (h("div", { class: "alert-icon" },
           h("calcite-icon", { icon: requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null,
         h("div", { class: "alert-content" },
@@ -141,14 +152,15 @@ export class Alert {
     }
     this.queueLength = this.queue.length;
     this.determineActiveAlert();
+    event.stopPropagation();
   }
-  // when an alert is first registered, trigger a queue sync to get queue
+  // when an alert is first registered, trigger a queue sync
   alertRegister() {
     if (this.active && !this.queue.includes(this.el)) {
       this.queued = true;
       this.queue.push(this.el);
     }
-    this.calciteAlertSync.emit({ queue: this.queue });
+    this.calciteInternalAlertSync.emit({ queue: this.queue });
     this.determineActiveAlert();
   }
   //--------------------------------------------------------------------------
@@ -188,11 +200,25 @@ export class Alert {
       return;
     }
   }
-  /** emit the opened alert and the queue */
+  /** remove queued class after animation completes */
   openAlert() {
     window.clearTimeout(this.queueTimeout);
     this.queueTimeout = window.setTimeout(() => (this.queued = false), 300);
   }
+  emitOpenCloseEvent(componentVisibilityState) {
+    const payload = {
+      el: this.el,
+      queue: this.queue
+    };
+    const emitComponentState = {
+      beforeOpen: () => this.calciteAlertBeforeOpen.emit(payload),
+      open: () => this.calciteAlertOpen.emit(payload),
+      beforeClose: () => this.calciteAlertBeforeClose.emit(payload),
+      close: () => this.calciteAlertClose.emit(payload)
+    };
+    (emitComponentState[componentVisibilityState] ||
+      emitComponentState["The component state is unknown."])();
+  }
   static get is() { return "calcite-alert"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
@@ -214,7 +240,7 @@ export class Alert {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Is the alert currently active or not"
+        "text": "When true, the component is active."
       },
       "attribute": "active",
       "reflect": true,
@@ -232,7 +258,7 @@ export class Alert {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Close the alert automatically (recommended for passive, non-blocking alerts)"
+        "text": "When true, the component closes automatically (recommended for passive, non-blocking alerts)."
       },
       "attribute": "auto-dismiss",
       "reflect": false,
@@ -255,7 +281,7 @@ export class Alert {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Duration of autoDismiss (only used with `autoDismiss`)"
+        "text": "Specifies the duration before the component automatically closes (only use with `autoDismiss`)."
       },
       "attribute": "auto-dismiss-duration",
       "reflect": true,
@@ -278,7 +304,7 @@ export class Alert {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Color for the alert (will apply to top border and icon)"
+        "text": "Specifies the color for the component (will apply to top border and icon)."
       },
       "attribute": "color",
       "reflect": true,
@@ -296,7 +322,7 @@ export class Alert {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "when used as a boolean set to true, show a default recommended icon. You can\nalso pass a calcite-ui-icon name to this prop to display a requested icon"
+        "text": "When true, shows a default recommended icon. Alternatively,\npass a Calcite UI Icon name to display a specific icon."
       },
       "attribute": "icon",
       "reflect": true
@@ -316,7 +342,7 @@ export class Alert {
             "name": "default",
             "text": "\"Close\""
           }],
-        "text": "string to override English close text"
+        "text": "Specifies the text label for the close button."
       },
       "attribute": "intl-close",
       "reflect": false,
@@ -334,7 +360,7 @@ export class Alert {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Accessible name for the component"
+        "text": "Specifies an accessible name for the component."
       },
       "attribute": "label",
       "reflect": false
@@ -356,7 +382,7 @@ export class Alert {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "specify the placement of the alert"
+        "text": "Specifies the placement of the component"
       },
       "attribute": "placement",
       "reflect": false,
@@ -379,7 +405,7 @@ export class Alert {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "specify the scale of the alert, defaults to m"
+        "text": "Specifies the size of the component."
       },
       "attribute": "scale",
       "reflect": true,
@@ -393,6 +419,25 @@ export class Alert {
     "requestedIcon": {}
   }; }
   static get events() { return [{
+      "method": "calciteAlertBeforeClose",
+      "name": "calciteAlertBeforeClose",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "{\n    el: HTMLCalciteAlertElement;\n    queue: HTMLCalciteAlertElement[];\n  }",
+        "resolved": "{ el: HTMLCalciteAlertElement; queue: HTMLCalciteAlertElement[]; }",
+        "references": {
+          "HTMLCalciteAlertElement": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
       "method": "calciteAlertClose",
       "name": "calciteAlertClose",
       "bubbles": true,
@@ -400,12 +445,35 @@ export class Alert {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Fired when an alert is closed"
+        "text": ""
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+        "original": "{\n    el: HTMLCalciteAlertElement;\n    queue: HTMLCalciteAlertElement[];\n  }",
+        "resolved": "{ el: HTMLCalciteAlertElement; queue: HTMLCalciteAlertElement[]; }",
+        "references": {
+          "HTMLCalciteAlertElement": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "calciteAlertBeforeOpen",
+      "name": "calciteAlertBeforeOpen",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "{\n    el: HTMLCalciteAlertElement;\n    queue: HTMLCalciteAlertElement[];\n  }",
+        "resolved": "{ el: HTMLCalciteAlertElement; queue: HTMLCalciteAlertElement[]; }",
+        "references": {
+          "HTMLCalciteAlertElement": {
+            "location": "global"
+          }
+        }
       }
     }, {
       "method": "calciteAlertOpen",
@@ -415,16 +483,20 @@ export class Alert {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Fired when an alert is opened"
+        "text": ""
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+        "original": "{\n    el: HTMLCalciteAlertElement;\n    queue: HTMLCalciteAlertElement[];\n  }",
+        "resolved": "{ el: HTMLCalciteAlertElement; queue: HTMLCalciteAlertElement[]; }",
+        "references": {
+          "HTMLCalciteAlertElement": {
+            "location": "global"
+          }
+        }
       }
     }, {
-      "method": "calciteAlertSync",
-      "name": "calciteAlertSync",
+      "method": "calciteInternalAlertSync",
+      "name": "calciteInternalAlertSync",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -433,7 +505,7 @@ export class Alert {
             "name": "internal",
             "text": undefined
           }],
-        "text": "Fired to sync queue when opened or closed"
+        "text": "Fires to sync queue when opened or closed."
       },
       "complexType": {
         "original": "any",
@@ -441,8 +513,8 @@ export class Alert {
         "references": {}
       }
     }, {
-      "method": "calciteAlertRegister",
-      "name": "calciteAlertRegister",
+      "method": "calciteInternalAlertRegister",
+      "name": "calciteInternalAlertRegister",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -451,7 +523,7 @@ export class Alert {
             "name": "internal",
             "text": undefined
           }],
-        "text": "Fired when an alert is added to dom - used to receive initial queue"
+        "text": "Fires when the component is added to DOM - used to receive initial queue."
       },
       "complexType": {
         "original": "any",
@@ -495,13 +567,13 @@ export class Alert {
       "methodName": "updateDuration"
     }]; }
   static get listeners() { return [{
-      "name": "calciteAlertSync",
+      "name": "calciteInternalAlertSync",
       "method": "alertSync",
       "target": "window",
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteAlertRegister",
+      "name": "calciteInternalAlertRegister",
       "method": "alertRegister",
       "target": "window",
       "capture": false,

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.81
+ * v1.0.0-beta.84
  */
 export var StatusIcons;
 (function (StatusIcons) {

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.81
+ * v1.0.0-beta.84
  */
 export const TEXT = {
   intlClose: "Close"
@@ -16,3 +16,6 @@ export const SLOTS = {
   message: "message",
   link: "link"
 };
+export const CSS = {
+  container: "container"
+};

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

@@ -80,8 +80,8 @@
 
 :host {
   display: inline-block;
-  border-radius: 50%;
   overflow: hidden;
+  border-radius: 50%;
 }
 
 :host([scale=s]) {

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.81
+ * v1.0.0-beta.84
  */
 import { Component, Element, h, Prop, State } from "@stencil/core";
 import { isValidHex } from "../color-picker/utils";
@@ -14,7 +14,7 @@ export class Avatar {
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** specify the scale of the avatar, defaults to m */
+    /** Specifies the size of the component. */
     this.scale = "m";
     //--------------------------------------------------------------------------
     //
@@ -105,7 +105,7 @@ export class Avatar {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "specify the scale of the avatar, defaults to m"
+        "text": "Specifies the size of the component."
       },
       "attribute": "scale",
       "reflect": true,
@@ -123,7 +123,7 @@ export class Avatar {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "src to an image (remember to add a token if the user is private)"
+        "text": "Specifies the `src` to an image (remember to add a token if the user is private)."
       },
       "attribute": "thumbnail",
       "reflect": false
@@ -140,7 +140,7 @@ export class Avatar {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "full name of the user"
+        "text": "Specifies the full name of the user."
       },
       "attribute": "full-name",
       "reflect": false
@@ -157,7 +157,7 @@ export class Avatar {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "user name"
+        "text": "Specifies the username of the user."
       },
       "attribute": "username",
       "reflect": false
@@ -174,7 +174,7 @@ export class Avatar {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "unique id for user"
+        "text": "Specifies the unique id of the user."
       },
       "attribute": "user-id",
       "reflect": false

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

@@ -1,12 +1,14 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.81
+ * v1.0.0-beta.84
  */
 import { hexToRGB } from "../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
+ *
+ * @param str
  */
 export function stringToHex(str) {
   let hash = 0;
@@ -22,6 +24,8 @@ export function stringToHex(str) {
 }
 /**
  * Find the hue of a color given the separate RGB color channels
+ *
+ * @param rgb
  */
 export function rgbToHue(rgb) {
   let { r, g, b } = rgb;
@@ -50,6 +54,7 @@ export function rgbToHue(rgb) {
 }
 /**
  * For a hex color, find the hue
+ *
  * @param hex {string} - form of "#------"
  */
 export function hexToHue(hex) {

package/dist/collection/components/block/block.css

@@ -171,7 +171,8 @@ h3.heading {
   line-height: 1.25rem;
 }
 
-h4.heading, h5.heading {
+h4.heading, 
+h5.heading {
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
 }
@@ -205,9 +206,7 @@ h4.heading, h5.heading {
   border-style: none;
   padding: 0px;
   font-family: inherit;
-  outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
   text-align: initial;
   background-color: transparent;
 }
@@ -246,7 +245,7 @@ calcite-handle {
   word-break: break-word;
 }
 
-.summary {
+.description {
   margin-top: 0.125rem;
   padding: 0px;
   font-size: var(--calcite-font-size--2);
@@ -316,6 +315,9 @@ calcite-handle {
 
 .content {
   animation: in var(--calcite-internal-animation-timing-slow) ease-in-out;
+}
+
+.content--spaced {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
   padding-top: 0.5rem;