@esri/calcite-components 1.0.0-beta.67 → 1.0.0-beta.70

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

@@ -230,14 +230,6 @@
   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;
 }
 
-@media only screen and (max-width: 860px) {
-  :host .container {
-    width: 100%;
-    max-width: 100%;
-    border-radius: 0;
-  }
-}
-
 .container {
   display: flex;
   width: 100%;
@@ -264,12 +256,6 @@
   pointer-events: initial;
 }
 
-@media only screen and (max-width: 860px) {
-  :host([active]) .container:not(.queued) {
-    transform: translate3d(0, 0, 0);
-  }
-}
-
 slot[name=title]::slotted(*),
 *::slotted([slot=title]) {
   font-weight: var(--calcite-font-weight-medium);
@@ -315,12 +301,6 @@ slot[name=link]::slotted(*),
   border-bottom-right-radius: var(--calcite-border-radius);
 }
 
-@media only screen and (max-width: 860px) {
-  .alert-content {
-    padding: 1rem;
-  }
-}
-
 .alert-content:first-of-type:not(:only-child) {
   padding-left: var(--calcite-alert-spacing-token-large);
 }
@@ -329,12 +309,6 @@ slot[name=link]::slotted(*),
   padding: var(--calcite-alert-spacing-token-small);
 }
 
-@media only screen and (max-width: 860px) {
-  .alert-content {
-    padding: var(--calcite-alert-spacing-token-large) var(--calcite-alert-spacing-token-small) var(--calcite-alert-spacing-token-large) 0;
-  }
-}
-
 .calcite--rtl .alert-content {
   padding: var(--calcite-alert-spacing-token-small) 0 var(--calcite-alert-spacing-token-small) var(--calcite-alert-spacing-token-small);
 }
@@ -343,12 +317,6 @@ slot[name=link]::slotted(*),
   padding-right: var(--calcite-alert-spacing-token-large);
 }
 
-@media only screen and (max-width: 860px) {
-  .calcite--rtl .alert-content {
-    padding: var(--calcite-alert-spacing-token-large) 0 var(--calcite-alert-spacing-token-large) var(--calcite-alert-spacing-token-small);
-  }
-}
-
 .alert-icon {
   padding: var(--calcite-alert-spacing-token-small) var(--calcite-alert-spacing-token-large);
   flex: 0 0 auto;
@@ -361,18 +329,6 @@ slot[name=link]::slotted(*),
   background-color: var(--calcite-ui-foreground-1);
 }
 
-@media only screen and (max-width: 860px) {
-  .alert-icon {
-    padding: 1rem;
-  }
-}
-
-@media only screen and (min-width: 860px) {
-  .alert-icon {
-    border-bottom-left-radius: var(--calcite-border-radius);
-  }
-}
-
 .alert-close {
   padding: var(--calcite-alert-spacing-token-small) var(--calcite-alert-spacing-token-large);
   flex: 0 0 auto;
@@ -390,12 +346,6 @@ slot[name=link]::slotted(*),
   border-bottom-right-radius: var(--calcite-border-radius);
 }
 
-@media only screen and (max-width: 860px) {
-  .alert-close {
-    padding: 1rem;
-  }
-}
-
 .alert-close:hover, .alert-close:focus {
   color: var(--calcite-ui-text-1);
   background-color: var(--calcite-ui-foreground-2);
@@ -405,12 +355,6 @@ slot[name=link]::slotted(*),
   background-color: var(--calcite-ui-foreground-3);
 }
 
-@media only screen and (max-width: 860px) {
-  .alert-close {
-    border-radius: 0;
-  }
-}
-
 .calcite--rtl .alert-close {
   border-bottom-left-radius: var(--calcite-border-radius);
   border-bottom-right-radius: unset;
@@ -440,12 +384,6 @@ slot[name=link]::slotted(*),
   opacity: 1;
 }
 
-@media only screen and (min-width: 860px) {
-  .alert-queue-count.active {
-    border-bottom-right-radius: var(--calcite-border-radius);
-  }
-}
-
 :host([auto-dismiss]) > .alert-queue-count {
   border-right: 0px solid transparent;
 }

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

@@ -1,3 +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.
+ */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { getElementDir, setRequestedIcon } from "../../utils/dom";
 import { DURATIONS, SLOTS, TEXT } from "./resources";
@@ -293,8 +297,8 @@ export class CalciteAlert {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Close\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Close\""
           }],
         "text": "string to override English close text"
       },
@@ -387,8 +391,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"
       },
@@ -405,8 +409,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"
       },

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

@@ -1,3 +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.
+ */
 export var StatusIcons;
 (function (StatusIcons) {
   StatusIcons["green"] = "checkCircle";

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

@@ -1,3 +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.
+ */
 export const TEXT = {
   intlClose: "Close"
 };

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

@@ -1,3 +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.
+ */
 import { Component, Element, h, Prop, State } from "@stencil/core";
 import { getElementDir } from "../../utils/dom";
 import { isValidHex } from "../calcite-color-picker/utils";

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

@@ -1,3 +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.
+ */
 import { hexToRGB } from "../calcite-color-picker/utils";
 /**
  * Convert a string to a valid hex by hashing its contents

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

@@ -210,10 +210,10 @@ h5.heading {
   padding-right: 0;
   border-style: none;
   cursor: pointer;
-  text-align: left;
   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;
 }
 
@@ -237,10 +237,8 @@ calcite-handle {
 
 .title {
   margin: 0;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 0;
-  padding-bottom: 0;
+  padding-inline: 0.75rem;
+  padding-block: 0px;
 }
 
 .header .title .heading {
@@ -266,7 +264,8 @@ calcite-handle {
 }
 
 .icon {
-  margin-left: 0.75rem;
+  margin-inline-start: 0.75rem;
+  margin-inline-end: 0px;
 }
 
 .status-icon.valid {
@@ -277,13 +276,32 @@ calcite-handle {
   color: var(--calcite-ui-danger);
 }
 
+.status-icon.loading {
+  animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  50% {
+    transform: rotate(180deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 .toggle-icon {
-  margin-right: 1rem;
   align-self: center;
   color: var(--calcite-ui-text-3);
   transition-property: color;
   transition-duration: 150ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  margin-inline-end: 1rem;
+  margin-inline-start: 0px;
 }
 
 .toggle:hover .toggle-icon {
@@ -309,16 +327,6 @@ calcite-action-menu {
   grid-area: menu;
 }
 
-.calcite--rtl .toggle-icon {
-  margin-right: 0;
-  margin-left: 1rem;
-}
-
-.calcite--rtl .icon {
-  margin-left: 0;
-  margin-right: 0.75rem;
-}
-
 :host([open]) {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
@@ -338,9 +346,4 @@ calcite-action-menu {
 
 :host([disabled]) .header-container {
   opacity: 0.5;
-}
-
-:host([drag-handle]) .calcite--rtl .title {
-  padding-left: 0;
-  padding-right: 0.25rem;
 }

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

@@ -1,7 +1,10 @@
+/*!
+ * 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, Prop } from "@stencil/core";
 import { CSS, HEADING_LEVEL, ICONS, SLOTS, TEXT } from "./resources";
-import { CSS_UTILITY } from "../../utils/resources";
-import { getElementDir, getSlotted } from "../../utils/dom";
+import { getSlotted } from "../../utils/dom";
 import { CalciteHeading } from "../functional/CalciteHeading";
 /**
  * @slot - A slot for adding content to the block.
@@ -65,15 +68,16 @@ export class CalciteBlock {
     return [loading || disabled ? h("calcite-scrim", { loading: loading }) : null, defaultSlot];
   }
   renderIcon() {
-    var _a;
     const { el, status } = this;
-    const icon = (_a = ICONS[status]) !== null && _a !== void 0 ? _a : false;
-    const hasIcon = getSlotted(el, SLOTS.icon) || icon;
-    const iconEl = !icon ? (h("slot", { name: SLOTS.icon })) : (h("calcite-icon", { class: {
+    const showingLoadingStatus = this.loading && !this.open;
+    const statusIcon = showingLoadingStatus ? ICONS.refresh : ICONS[status];
+    const hasIcon = getSlotted(el, SLOTS.icon) || statusIcon;
+    const iconEl = !statusIcon ? (h("slot", { name: SLOTS.icon })) : (h("calcite-icon", { class: {
         [CSS.statusIcon]: true,
         [CSS.valid]: status == "valid",
-        [CSS.invalid]: status == "invalid"
-      }, icon: icon, scale: "m" }));
+        [CSS.invalid]: status == "invalid",
+        [CSS.loading]: showingLoadingStatus
+      }, icon: statusIcon, scale: "m" }));
     return hasIcon ? h("div", { class: CSS.icon }, iconEl) : null;
   }
   render() {
@@ -96,11 +100,9 @@ export class CalciteBlock {
         h("slot", { name: SLOTS.control }))) : null,
       hasMenuActions ? (h("calcite-action-menu", { label: this.intlOptions || TEXT.options },
         h("slot", { name: SLOTS.headerMenuActions }))) : null));
-    const rtl = getElementDir(el) === "rtl";
     return (h(Host, { tabIndex: disabled ? -1 : null },
       h("article", { "aria-busy": loading.toString(), class: {
-          [CSS.article]: true,
-          [CSS_UTILITY.rtl]: rtl
+          [CSS.article]: true
         } },
         headerNode,
         h("div", { class: CSS.content, hidden: !open }, this.renderScrim()))));
@@ -253,8 +255,8 @@ export class CalciteBlock {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Loading\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Loading\""
           }],
         "text": "string to override English loading text"
       },
@@ -274,8 +276,8 @@ export class CalciteBlock {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Options\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Options\""
           }],
         "text": "Text string used for the actions menu"
       },

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

@@ -1,3 +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.
+ */
 export const CSS = {
   article: "article",
   content: "content",
@@ -13,7 +17,8 @@ export const CSS = {
   summary: "summary",
   controlContainer: "control-container",
   valid: "valid",
-  invalid: "invalid"
+  invalid: "invalid",
+  loading: "loading"
 };
 export const TEXT = {
   collapse: "Collapse",
@@ -30,6 +35,7 @@ export const ICONS = {
   opened: "chevron-up",
   closed: "chevron-down",
   valid: "check-circle",
-  invalid: "exclamation-mark-triangle"
+  invalid: "exclamation-mark-triangle",
+  refresh: "refresh"
 };
 export const HEADING_LEVEL = 4;

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

@@ -155,6 +155,7 @@
   margin-top: 0;
   margin-bottom: 0;
   text-align: initial;
+  word-wrap: anywhere;
 }
 
 .toggle--switch calcite-switch {

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

@@ -1,3 +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.
+ */
 import { Component, Element, Event, Prop, h } from "@stencil/core";
 import { getElementDir } from "../../utils/dom";
 import { CSS_UTILITY } from "../../utils/resources";

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

@@ -1 +1,5 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 export {};

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

@@ -1,3 +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.
+ */
 export const CSS = {
   content: "content",
   invalid: "invalid",

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

@@ -702,19 +702,19 @@
   border-left-width: 1px;
 }
 
-:host([appearance=transparent]:not(.calcite-inline-editable__enable-editing-button)) button,
-:host([appearance=transparent]:not(.calcite-inline-editable__enable-editing-button)) a {
+:host([appearance=transparent]:not(.enable-editing-button)) button,
+:host([appearance=transparent]:not(.enable-editing-button)) a {
   background-color: transparent;
 }
 
-:host([appearance=transparent]:not(.calcite-inline-editable__enable-editing-button)) button:hover, :host([appearance=transparent]:not(.calcite-inline-editable__enable-editing-button)) button:focus,
-:host([appearance=transparent]:not(.calcite-inline-editable__enable-editing-button)) a:hover,
-:host([appearance=transparent]:not(.calcite-inline-editable__enable-editing-button)) a:focus {
+:host([appearance=transparent]:not(.enable-editing-button)) button:hover, :host([appearance=transparent]:not(.enable-editing-button)) button:focus,
+:host([appearance=transparent]:not(.enable-editing-button)) a:hover,
+:host([appearance=transparent]:not(.enable-editing-button)) a:focus {
   background-color: var(--calcite-button-transparent-hover);
 }
 
-:host([appearance=transparent]:not(.calcite-inline-editable__enable-editing-button)) button:active,
-:host([appearance=transparent]:not(.calcite-inline-editable__enable-editing-button)) a:active {
+:host([appearance=transparent]:not(.enable-editing-button)) button:active,
+:host([appearance=transparent]:not(.enable-editing-button)) a:active {
   background-color: var(--calcite-button-transparent-press);
 }
 
@@ -768,13 +768,13 @@
   color: var(--calcite-ui-danger);
 }
 
-:host([appearance=transparent][color=neutral]:not(.calcite-inline-editable__cancel-editing-button)) button,
-:host([appearance=transparent][color=neutral]:not(.calcite-inline-editable__cancel-editing-button)) a,
-:host([appearance=transparent][color=neutral]:not(.calcite-inline-editable__cancel-editing-button)) calcite-loader {
+:host([appearance=transparent][color=neutral]:not(.cancel-editing-button)) button,
+:host([appearance=transparent][color=neutral]:not(.cancel-editing-button)) a,
+:host([appearance=transparent][color=neutral]:not(.cancel-editing-button)) calcite-loader {
   color: var(--calcite-ui-text-1);
 }
 
-:host([appearance=transparent][color=neutral].calcite-inline-editable__cancel-editing-button) button {
+:host([appearance=transparent][color=neutral].cancel-editing-button) button {
   color: var(--calcite-ui-text-3);
   border-top-width: 1px;
   border-top-color: var(--calcite-ui-border-input);
@@ -784,18 +784,24 @@
   border-top-style: solid;
 }
 
-:host([appearance=transparent][color=neutral].calcite-inline-editable__cancel-editing-button) button:not(.content--slotted) {
+:host([appearance=transparent][color=neutral].cancel-editing-button) button:not(.content--slotted) {
   --calcite-button-padding-y: 0;
 }
 
-:host([appearance=transparent][color=neutral].calcite-inline-editable__cancel-editing-button) button:hover {
+:host([appearance=transparent][color=neutral].cancel-editing-button) button:hover {
   color: var(--calcite-ui-text-1);
 }
 
-:host([appearance=transparent][color=neutral].calcite-inline-editable__enable-editing-button) button {
+:host([appearance=transparent][color=neutral].enable-editing-button) button {
   background-color: transparent;
 }
 
+:host(.confirm-changes-button) button:focus,
+:host(.cancel-editing-button) button:focus,
+:host(.enable-editing-button) button:focus {
+  outline-offset: -2px;
+}
+
 :host([appearance=transparent][color=inverse]) button,
 :host([appearance=transparent][color=inverse]) a,
 :host([appearance=transparent][color=inverse]) calcite-loader {

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

@@ -1,6 +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.
+ */
+import "form-request-submit-polyfill/form-request-submit-polyfill";
 import { Component, Element, h, Method, Prop, Build, State, Watch } from "@stencil/core";
 import { CSS, TEXT } from "./resources";
-import { getElementDir, queryElementRoots, closestElementCrossShadowBoundary } from "../../utils/dom";
+import { closestElementCrossShadowBoundary, getElementDir } from "../../utils/dom";
 import { CSS_UTILITY } from "../../utils/resources";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { createObserver } from "../../utils/observers";
@@ -44,46 +49,23 @@ export class CalciteButton {
     this.hasContent = false;
     /** determine if loader present for styling purposes */
     this.hasLoader = false;
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
-    this.onLabelClick = (event) => {
-      this.handleClick(event);
-      this.setFocus();
-    };
     // act on a requested or nearby form based on type
-    this.handleClick = (e) => {
-      const { childElType, form, el, type } = this;
+    this.handleClick = () => {
+      const { childElType, formEl, type } = this;
       // this.type refers to type attribute, not child element type
       if (childElType === "button" && type !== "button") {
-        const targetForm = form
-          ? queryElementRoots(el, `#${form}`)
-          : closestElementCrossShadowBoundary(el, "form");
-        if (targetForm) {
-          const targetFormSubmitFunction = targetForm.onsubmit;
-          switch (type) {
-            case "submit":
-              if (targetFormSubmitFunction) {
-                targetFormSubmitFunction();
-              }
-              else if (targetForm.checkValidity()) {
-                targetForm.submit();
-              }
-              else {
-                targetForm.reportValidity();
-              }
-              break;
-            case "reset":
-              targetForm.reset();
-              break;
-          }
+        if (type === "submit") {
+          formEl === null || formEl === void 0 ? void 0 : formEl.requestSubmit();
+        }
+        else if (type === "reset") {
+          formEl === null || formEl === void 0 ? void 0 : formEl.reset();
         }
-        e.preventDefault();
       }
     };
   }
+  hrefHandler(href) {
+    this.childElType = href ? "a" : "button";
+  }
   loadingChanged(newValue, oldValue) {
     if (!!newValue && !oldValue) {
       this.hasLoader = true;
@@ -104,11 +86,13 @@ export class CalciteButton {
     this.hasLoader = this.loading;
     this.setupTextContentObserver();
     connectLabel(this);
+    this.formEl = closestElementCrossShadowBoundary(this.el, this.form ? `#${this.form}` : "form");
   }
   disconnectedCallback() {
     var _a;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     disconnectLabel(this);
+    this.formEl = null;
   }
   componentWillLoad() {
     if (Build.isBrowser) {
@@ -153,6 +137,15 @@ export class CalciteButton {
     var _a;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
   }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  onLabelClick() {
+    this.handleClick();
+    this.setFocus();
+  }
   static get is() { return "calcite-button"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
@@ -351,8 +344,8 @@ export class CalciteButton {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Loading\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Loading\""
           }],
         "text": "string to override English loading text"
       },
@@ -423,7 +416,10 @@ export class CalciteButton {
       "required": false,
       "optional": true,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "\u2013 this property is no longer needed if placed inside a form."
+          }],
         "text": "The form ID to associate with the component"
       },
       "attribute": "form",
@@ -547,6 +543,7 @@ export class CalciteButton {
     }
   }; }
   static get states() { return {
+    "childElType": {},
     "hasContent": {},
     "hasLoader": {}
   }; }
@@ -570,6 +567,9 @@ export class CalciteButton {
   }; }
   static get elementRef() { return "el"; }
   static get watchers() { return [{
+      "propName": "href",
+      "methodName": "hrefHandler"
+    }, {
       "propName": "loading",
       "methodName": "loadingChanged"
     }]; }

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

@@ -1 +1,5 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 export {};

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

@@ -1,3 +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.
+ */
 export const CSS = {
   buttonLoader: "calcite-button--loader",
   content: "content",