@esri/calcite-components 1.0.0-beta.89 → 1.0.0-beta.91

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

@@ -1,12 +1,13 @@
 /*!
  * 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.89
+ * v1.0.0-beta.91
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { getSlotted, setRequestedIcon, toAriaBoolean } from "../../utils/dom";
 import { DURATIONS, SLOTS, TEXT } from "./resources";
 import { StatusIcons } from "./interfaces";
+import { connectOpenCloseComponent, disconnectOpenCloseComponent } from "../../utils/openCloseComponent";
 /**
  * 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.
@@ -23,8 +24,14 @@ export class Alert {
     //  Properties
     //
     //---------------------------------------------------------------------------
-    /** When true, the component is active. */
+    /**
+     * When true, opens the combobox
+     *
+     * @deprecated use open instead
+     */
     this.active = false;
+    /** When true, opens the dropdown */
+    this.open = false;
     /** When true, the component closes automatically (recommended for passive, non-blocking alerts). */
     this.autoDismiss = false;
     /** Specifies the duration before the component automatically closes (only use with `autoDismiss`). */
@@ -52,40 +59,40 @@ export class Alert {
     this.queueLength = 0;
     /** is the alert queued */
     this.queued = false;
-    this.setContainerEl = (el) => {
-      this.containerEl = el;
-      this.containerEl.addEventListener("transitionstart", this.transitionStartHandler);
-    };
     this.autoDismissTimeoutId = null;
     this.trackTimer = Date.now();
-    this.activeTransitionProp = "opacity";
+    this.openTransitionProp = "opacity";
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.setTransitionEl = (el) => {
+      this.transitionEl = el;
+      connectOpenCloseComponent(this);
+    };
     /** close and emit calciteInternalAlertSync event with the updated queue payload */
     this.closeAlert = () => {
       this.autoDismissTimeoutId = null;
       this.queued = false;
-      this.active = false;
+      this.open = false;
       this.queue = this.queue.filter((el) => el !== this.el);
       this.determineActiveAlert();
       this.calciteInternalAlertSync.emit({ queue: this.queue });
     };
-    this.transitionStartHandler = (event) => {
-      if (event.propertyName === this.activeTransitionProp && event.target === this.containerEl) {
-        this.active ? this.onBeforeOpen() : this.onBeforeClose();
-      }
-    };
-    this.transitionEnd = (event) => {
-      if (event.propertyName === this.activeTransitionProp && event.target === this.containerEl) {
-        this.active ? this.onOpen() : this.onClose();
-      }
-    };
   }
-  watchActive() {
-    if (this.active && !this.queued) {
+  activeHandler(value) {
+    this.open = value;
+  }
+  openHandler(value) {
+    if (this.open && !this.queued) {
       this.calciteInternalAlertRegister.emit();
+      this.active = value;
     }
-    if (!this.active) {
+    if (!this.open) {
       this.queue = this.queue.filter((el) => el !== this.el);
       this.calciteInternalAlertSync.emit({ queue: this.queue });
+      this.active = false;
     }
   }
   updateRequestedIcon() {
@@ -103,17 +110,20 @@ export class Alert {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
-    if (this.active && !this.queued) {
+    const open = this.open || this.active;
+    if (open && !this.queued) {
+      this.activeHandler(open);
+      this.openHandler(open);
       this.calciteInternalAlertRegister.emit();
     }
+    connectOpenCloseComponent(this);
   }
   componentWillLoad() {
     this.requestedIcon = setRequestedIcon(StatusIcons, this.icon, this.color);
   }
   disconnectedCallback() {
-    var _a;
     window.clearTimeout(this.autoDismissTimeoutId);
-    (_a = this.containerEl) === null || _a === void 0 ? void 0 : _a.removeEventListener("transitionstart", this.transitionStartHandler);
+    disconnectOpenCloseComponent(this);
   }
   render() {
     const closeButton = (h("button", { "aria-label": this.intlClose, class: "alert-close", onClick: this.closeAlert, ref: (el) => (this.closeButton = el), type: "button" },
@@ -129,7 +139,7 @@ export class Alert {
           container: true,
           queued,
           [placement]: true
-        }, onTransitionEnd: this.transitionEnd, ref: this.setContainerEl },
+        }, ref: this.setTransitionEl },
         requestedIcon ? (h("div", { class: "alert-icon" },
           h("calcite-icon", { icon: requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null,
         h("div", { class: "alert-content" },
@@ -151,7 +161,7 @@ export class Alert {
   }
   // when an alert is first registered, trigger a queue sync
   alertRegister() {
-    if (this.active && !this.queue.includes(this.el)) {
+    if (this.open && !this.queue.includes(this.el)) {
       this.queued = true;
       this.queue.push(this.el);
     }
@@ -176,11 +186,6 @@ export class Alert {
       this.closeButton.focus();
     }
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  //--------------------------------------------------------------------------
   /** determine which alert is active */
   determineActiveAlert() {
     var _a;
@@ -232,13 +237,34 @@ export class Alert {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
-        "text": "When true, the component is active."
+        "tags": [{
+            "name": "deprecated",
+            "text": "use open instead"
+          }],
+        "text": "When true, opens the combobox"
       },
       "attribute": "active",
       "reflect": true,
       "defaultValue": "false"
     },
+    "open": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, opens the dropdown"
+      },
+      "attribute": "open",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "autoDismiss": {
       "type": "boolean",
       "mutable": false,
@@ -415,7 +441,7 @@ export class Alert {
       "method": "calciteAlertBeforeClose",
       "name": "calciteAlertBeforeClose",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],
@@ -430,7 +456,7 @@ export class Alert {
       "method": "calciteAlertClose",
       "name": "calciteAlertClose",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],
@@ -445,7 +471,7 @@ export class Alert {
       "method": "calciteAlertBeforeOpen",
       "name": "calciteAlertBeforeOpen",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],
@@ -460,7 +486,7 @@ export class Alert {
       "method": "calciteAlertOpen",
       "name": "calciteAlertOpen",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],
@@ -475,7 +501,7 @@ export class Alert {
       "method": "calciteInternalAlertSync",
       "name": "calciteInternalAlertSync",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [{
@@ -498,7 +524,7 @@ export class Alert {
       "method": "calciteInternalAlertRegister",
       "name": "calciteInternalAlertRegister",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [{
@@ -537,7 +563,10 @@ export class Alert {
   static get elementRef() { return "el"; }
   static get watchers() { return [{
       "propName": "active",
-      "methodName": "watchActive"
+      "methodName": "activeHandler"
+    }, {
+      "propName": "open",
+      "methodName": "openHandler"
     }, {
       "propName": "icon",
       "methodName": "updateRequestedIcon"

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.89
+ * v1.0.0-beta.91
  */
 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.89
+ * v1.0.0-beta.91
  */
 export const TEXT = {
   intlClose: "Close"

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

@@ -75,7 +75,7 @@
 }
 
 :host([hidden]) {
-  display: none;
+  display: none !important;
 }
 
 :host {

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.89
+ * v1.0.0-beta.91
  */
 import { Component, Element, h, Prop, State } from "@stencil/core";
 import { isValidHex } from "../color-picker/utils";

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

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

@@ -102,7 +102,7 @@
 }
 
 :host([hidden]) {
-  display: none;
+  display: none !important;
 }
 
 :host([disabled]) {
@@ -157,27 +157,6 @@
   padding: 0.5rem;
 }
 
-h1.heading {
-  font-size: var(--calcite-font-size-2);
-  line-height: 1.5rem;
-}
-
-h2.heading {
-  font-size: var(--calcite-font-size-1);
-  line-height: 1.5rem;
-}
-
-h3.heading {
-  font-size: var(--calcite-font-size-0);
-  line-height: 1.25rem;
-}
-
-h4.heading, 
-h5.heading {
-  font-size: var(--calcite-font-size--1);
-  line-height: 1rem;
-}
-
 .header {
   justify-content: flex-start;
   padding: 0px;

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.89
+ * v1.0.0-beta.91
  */
 import { Component, Element, Event, h, Host, Prop } from "@stencil/core";
 import { CSS, HEADING_LEVEL, ICONS, SLOTS, TEXT } from "./resources";
@@ -470,7 +470,7 @@ export class Block {
       "method": "calciteBlockToggle",
       "name": "calciteBlockToggle",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],

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.89
+ * v1.0.0-beta.91
  */
 export const CSS = {
   article: "article",

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

@@ -75,7 +75,7 @@
 }
 
 :host([hidden]) {
-  display: none;
+  display: none !important;
 }
 
 :host {

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

@@ -1,12 +1,13 @@
 /*!
  * 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.89
+ * v1.0.0-beta.91
  */
 import { Component, Element, Event, Prop, h, Host } from "@stencil/core";
 import { getElementDir, toAriaBoolean } from "../../utils/dom";
 import { CSS, ICONS, TEXT } from "./resources";
 import { guid } from "../../utils/guid";
+import { isActivationKey } from "../../utils/key";
 /**
  * @slot - A slot for adding content to the block section.
  */
@@ -29,7 +30,7 @@ export class BlockSection {
     //
     // --------------------------------------------------------------------------
     this.handleHeaderKeyDown = (event) => {
-      if (event.key === " " || event.key === "Enter") {
+      if (isActivationKey(event.key)) {
         this.toggleSection();
         event.preventDefault();
         event.stopPropagation();
@@ -215,7 +216,7 @@ export class BlockSection {
       "method": "calciteBlockSectionToggle",
       "name": "calciteBlockSectionToggle",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],

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.89
+ * v1.0.0-beta.91
  */
 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.89
+ * v1.0.0-beta.91
  */
 export const CSS = {
   content: "content",

package/dist/collection/components/button/button.css

@@ -75,7 +75,7 @@
 }
 
 :host([hidden]) {
-  display: none;
+  display: none !important;
 }
 
 :host([disabled]) {

package/dist/collection/components/button/button.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.89
+ * v1.0.0-beta.91
  */
 import "form-request-submit-polyfill/form-request-submit-polyfill";
 import { Component, Element, h, Method, Prop, Build, State, Watch } from "@stencil/core";

package/dist/collection/components/button/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.89
+ * v1.0.0-beta.91
  */
 export {};

package/dist/collection/components/button/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.89
+ * v1.0.0-beta.91
  */
 export const CSS = {
   buttonLoader: "calcite-button--loader",

package/dist/collection/components/card/card.css

@@ -75,7 +75,7 @@
 }
 
 :host([hidden]) {
-  display: none;
+  display: none !important;
 }
 
 :host {
@@ -102,17 +102,17 @@
   border-radius: var(--calcite-border-radius-base);
 }
 :host .calcite-card-container:hover {
+  z-index: 1;
   --tw-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08), 0 2px 8px 0 rgba(0, 0, 0, 0.04);
   --tw-shadow-colored: 0 4px 16px 0 var(--tw-shadow-color), 0 2px 8px 0 var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  z-index: 1;
 }
 :host .calcite-card-container:active {
+  z-index: 1;
   --tw-shadow: 0 1px 6px -1px rgba(0, 0, 0, 0.16), 0 1px 2px -1px rgba(0, 0, 0, 0.08);
   --tw-shadow-colored: 0 1px 6px -1px var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   transition-duration: 75ms;
-  z-index: 1;
 }
 
 .container {

package/dist/collection/components/card/card.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.89
+ * v1.0.0-beta.91
  */
 import { Component, Element, Event, h, Prop } from "@stencil/core";
 import { getSlotted, toAriaBoolean } from "../../utils/dom";
@@ -285,7 +285,7 @@ export class Card {
       "method": "calciteCardSelect",
       "name": "calciteCardSelect",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],

package/dist/collection/components/card/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.89
+ * v1.0.0-beta.91
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/checkbox/checkbox.css

@@ -75,7 +75,7 @@
 }
 
 :host([hidden]) {
-  display: none;
+  display: none !important;
 }
 
 :host([disabled]) {

package/dist/collection/components/checkbox/checkbox.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.89
+ * v1.0.0-beta.91
  */
 import { Component, Element, Event, h, Host, Method, Prop } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -10,6 +10,7 @@ import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { connectForm, disconnectForm } from "../../utils/form";
 import { updateHostInteraction } from "../../utils/interactive";
 import { toAriaBoolean } from "../../utils/dom";
+import { isActivationKey } from "../../utils/key";
 export class Checkbox {
   constructor() {
     //--------------------------------------------------------------------------
@@ -63,7 +64,7 @@ export class Checkbox {
       }
     };
     this.keyDownHandler = (event) => {
-      if (event.key === " " || event.key === "Enter") {
+      if (isActivationKey(event.key)) {
         this.toggle();
         event.preventDefault();
       }
@@ -330,7 +331,7 @@ export class Checkbox {
       "method": "calciteInternalCheckboxBlur",
       "name": "calciteInternalCheckboxBlur",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [{
@@ -348,7 +349,7 @@ export class Checkbox {
       "method": "calciteCheckboxChange",
       "name": "calciteCheckboxChange",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],
@@ -363,7 +364,7 @@ export class Checkbox {
       "method": "calciteInternalCheckboxFocus",
       "name": "calciteInternalCheckboxFocus",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [{

package/dist/collection/components/chip/chip.css

@@ -75,7 +75,7 @@
 }
 
 :host([hidden]) {
-  display: none;
+  display: none !important;
 }
 
 :host([scale=s]) {
@@ -144,12 +144,10 @@
   padding-inline: var(--calcite-chip-spacing-unit-l);
 }
 
-:host([dismissible]) span,
 :host([closable]) span {
   padding-inline: var(--calcite-chip-spacing-unit-l) var(--calcite-chip-spacing-unit-s);
 }
 
-:host([icon]:not([dismissible])) span,
 :host([icon]:not([closable])) span {
   padding-block: 0;
   padding-inline: var(--calcite-chip-spacing-unit-l);

package/dist/collection/components/chip/chip.js

@@ -1,9 +1,9 @@
 /*!
  * 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.89
+ * v1.0.0-beta.91
  */
-import { Component, h, Prop, Event, Element, Method } from "@stencil/core";
+import { Component, h, Prop, Event, Element, Method, Watch } from "@stencil/core";
 import { getSlotted } from "../../utils/dom";
 import { guid } from "../../utils/guid";
 import { CSS, TEXT, SLOTS, ICONS } from "./resources";
@@ -55,6 +55,12 @@ export class Chip {
     };
     this.guid = guid();
   }
+  handleDismissible(value) {
+    this.closable = value;
+  }
+  handleClosable(value) {
+    this.dismissible = value;
+  }
   // --------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -62,6 +68,12 @@ export class Chip {
   // --------------------------------------------------------------------------
   connectedCallback() {
     connectConditionalSlotComponent(this);
+    if (this.dismissible) {
+      this.handleDismissible(this.dismissible);
+    }
+    if (this.closable) {
+      this.handleClosable(this.closable);
+    }
   }
   disconnectedCallback() {
     disconnectConditionalSlotComponent(this);
@@ -96,7 +108,7 @@ export class Chip {
       this.icon ? iconEl : null,
       h("span", { class: CSS.title, id: this.guid },
         h("slot", null)),
-      this.closable || this.dismissible ? closeButton : null));
+      this.closable ? closeButton : null));
   }
   static get is() { return "calcite-chip"; }
   static get encapsulation() { return "shadow"; }
@@ -314,7 +326,7 @@ export class Chip {
       "method": "calciteChipDismiss",
       "name": "calciteChipDismiss",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],
@@ -350,4 +362,11 @@ export class Chip {
     }
   }; }
   static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "dismissible",
+      "methodName": "handleDismissible"
+    }, {
+      "propName": "closable",
+      "methodName": "handleClosable"
+    }]; }
 }