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

package/dist/collection/components/alert/alert.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.83
+ * v1.0.0-beta.84
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { getSlotted, setRequestedIcon, toAriaBoolean } from "../../utils/dom";
@@ -12,9 +12,9 @@ import { StatusIcons } from "./interfaces";
  * 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() {
@@ -23,23 +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";
     //--------------------------------------------------------------------------
     //
@@ -52,10 +52,14 @@ 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;
@@ -64,17 +68,18 @@ export class Alert {
       this.determineActiveAlert();
       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");
       }
     };
   }
@@ -111,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" },
@@ -126,7 +134,7 @@ export class Alert {
           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" },
@@ -146,7 +154,7 @@ export class Alert {
     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;
@@ -192,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 {
@@ -218,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,
@@ -236,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,
@@ -259,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,
@@ -282,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,
@@ -300,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
@@ -320,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,
@@ -338,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
@@ -360,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,
@@ -383,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,
@@ -397,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,
@@ -404,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",
@@ -419,12 +483,16 @@ 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": "calciteInternalAlertSync",
@@ -437,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",
@@ -455,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",

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.83
+ * 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.83
+ * 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.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.83
+ * 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,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.83
+ * v1.0.0-beta.84
  */
 import { hexToRGB } from "../color-picker/utils";
 /**

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;
 }
@@ -244,7 +245,7 @@ calcite-handle {
   word-break: break-word;
 }
 
-.summary {
+.description {
   margin-top: 0.125rem;
   padding: 0px;
   font-size: var(--calcite-font-size--2);
@@ -314,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;

package/dist/collection/components/block/block.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.83
+ * v1.0.0-beta.84
  */
 import { Component, Element, Event, h, Host, Prop } from "@stencil/core";
 import { CSS, HEADING_LEVEL, ICONS, SLOTS, TEXT } from "./resources";
@@ -67,6 +67,8 @@ export class Block {
      * When true, the block's content will be displayed.
      */
     this.open = false;
+    /** When true, removes padding for the slotted content */
+    this.disablePadding = false;
     this.guid = guid();
     // --------------------------------------------------------------------------
     //
@@ -121,10 +123,10 @@ export class Block {
     return hasIcon ? h("div", { class: CSS.icon }, iconEl) : null;
   }
   renderTitle() {
-    const { heading, headingLevel, summary } = this;
-    return heading || summary ? (h("div", { class: CSS.title },
+    const { heading, headingLevel, summary, description } = this;
+    return heading || summary || description ? (h("div", { class: CSS.title },
       h(Heading, { class: CSS.heading, level: headingLevel || HEADING_LEVEL }, heading),
-      summary ? h("div", { class: CSS.summary }, summary) : null)) : null;
+      summary || description ? (h("div", { class: CSS.description }, summary || description)) : null)) : null;
   }
   render() {
     const { collapsible, el, intlCollapse, intlExpand, loading, open, intlLoading } = this;
@@ -152,7 +154,10 @@ export class Block {
           [CSS.article]: true
         } },
         headerNode,
-        h("section", { "aria-expanded": toAriaBoolean(open), "aria-labelledby": buttonId, class: CSS.content, hidden: !open, id: regionId }, this.renderScrim()))));
+        h("section", { "aria-expanded": toAriaBoolean(open), "aria-labelledby": buttonId, class: {
+            content: true,
+            "content--spaced": !this.disablePadding
+          }, hidden: !open, id: regionId }, this.renderScrim()))));
   }
   static get is() { return "calcite-block"; }
   static get encapsulation() { return "shadow"; }
@@ -409,11 +414,49 @@ export class Block {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "use description instead"
+          }],
         "text": "Block summary."
       },
       "attribute": "summary",
       "reflect": false
+    },
+    "description": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Block description"
+      },
+      "attribute": "description",
+      "reflect": false
+    },
+    "disablePadding": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, removes padding for the slotted content"
+      },
+      "attribute": "disable-padding",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get events() { return [{

package/dist/collection/components/block/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.83
+ * v1.0.0-beta.84
  */
 export const CSS = {
   article: "article",
@@ -16,6 +16,7 @@ export const CSS = {
   header: "header",
   button: "button",
   summary: "summary",
+  description: "description",
   controlContainer: "control-container",
   valid: "valid",
   invalid: "invalid",

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

@@ -106,7 +106,8 @@
   color: var(--calcite-ui-text-2);
 }
 
-.toggle--switch, .section-header {
+.toggle--switch, 
+.section-header {
   margin-left: 0px;
   margin-right: 0px;
   margin-top: 0.25rem;
@@ -123,11 +124,13 @@
   font-size: var(--calcite-font-size--1);
   outline-color: transparent;
 }
-.toggle--switch:focus, .section-header:focus {
+.toggle--switch:focus, 
+.section-header:focus {
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: 2px;
 }
-.toggle--switch:hover, .section-header:hover {
+.toggle--switch:hover, 
+.section-header:hover {
   color: var(--calcite-ui-text-1);
 }
 

package/dist/collection/components/block-section/block-section.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.83
+ * v1.0.0-beta.84
  */
 import { Component, Element, Event, Prop, h, Host } from "@stencil/core";
 import { getElementDir, toAriaBoolean } from "../../utils/dom";

package/dist/collection/components/block-section/interfaces.js

@@ -1,6 +1,6 @@
 /*!
  * 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.83
+ * v1.0.0-beta.84
  */
 export {};

package/dist/collection/components/block-section/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.83
+ * v1.0.0-beta.84
  */
 export const CSS = {
   content: "content",