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

package/dist/collection/components/icon/icon.js

@@ -1,11 +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.
- * v1.0.0-beta.81
+ * v1.0.0-beta.84
  */
 import { Build, Component, Element, h, Host, Prop, State, Watch } from "@stencil/core";
 import { CSS } from "./resources";
-import { getElementDir } from "../../utils/dom";
+import { getElementDir, toAriaBoolean } from "../../utils/dom";
 import { fetchIcon, scaleToPx } from "./utils";
 import { createObserver } from "../../utils/observers";
 export class Icon {
@@ -54,7 +54,7 @@ export class Icon {
     const size = scaleToPx[scale];
     const semantic = !!textLabel;
     const paths = [].concat(pathData || "");
-    return (h(Host, { "aria-hidden": (!semantic).toString(), "aria-label": semantic ? textLabel : null, role: semantic ? "img" : null },
+    return (h(Host, { "aria-hidden": toAriaBoolean(!semantic), "aria-label": semantic ? textLabel : null, role: semantic ? "img" : null },
       h("svg", { class: {
           [CSS.flipRtl]: dir === "rtl" && flipRtl,
           svg: true

package/dist/collection/components/icon/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 CSS = {
   icon: "icon",

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

@@ -1,18 +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 { getAssetPath } from "@stencil/core";
 /**
  * Icon data cache.
  * Exported for testing purposes.
+ *
  * @private
  */
 export const iconCache = {};
 /**
  * Icon request cache.
  * Exported for testing purposes.
+ *
  * @private
  */
 export const requestCache = {};
@@ -45,6 +47,8 @@ export async function fetchIcon({ icon, scale }) {
 /**
  * Normalize the icon name to match the path data module exports.
  * Exported for testing purposes.
+ *
+ * @param name
  * @private
  */
 export function normalizeIconName(name) {

package/dist/collection/components/inline-editable/inline-editable.css

@@ -103,10 +103,7 @@
   display: flex;
   justify-content: space-between;
   background-color: var(--calcite-ui-foreground-1);
-  transition-property: all;
-  transition-duration: var(--calcite-animation-timing);
-  transition-timing-function: ease-in-out;
-  transition-delay: 0s;
+  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
 }
 .wrapper .input-wrapper {
   flex: 1 1 0%;

package/dist/collection/components/inline-editable/inline-editable.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, Event, h, Listen, Method, Prop, Watch } from "@stencil/core";
 import { getElementProp, getSlotted } from "../../utils/dom";
@@ -27,30 +27,31 @@ export class InlineEditable {
     this.loading = false;
     /** specify whether save/cancel controls should be displayed when editingEnabled is true, defaults to false */
     this.controls = false;
-    /** specify text to be user for the enable editing button's aria-label, defaults to `Click to edit`
+    /**
+     * specify text to be user for the enable editing button's aria-label, defaults to `Click to edit`
+     *
      * @default "Click to edit"
      */
     this.intlEnableEditing = TEXT.intlEnablingEditing;
-    /** specify text to be user for the cancel editing button's aria-label, defaults to `Cancel`
+    /**
+     * specify text to be user for the cancel editing button's aria-label, defaults to `Cancel`
+     *
      * @default "Cancel"
      */
     this.intlCancelEditing = TEXT.intlCancelEditing;
-    /** specify text to be user for the confirm changes button's aria-label, defaults to `Save`
+    /**
+     * specify text to be user for the confirm changes button's aria-label, defaults to `Save`
+     *
      * @default "Save"
      */
     this.intlConfirmChanges = TEXT.intlConfirmChanges;
     this.mutationObserver = createObserver("mutation", () => this.mutationObserverCallback());
-    this.transitionEnd = () => {
-      if (!this.editingEnabled && !!this.shouldEmitCancel) {
-        this.calciteInlineEditableEditCancel.emit();
-      }
-    };
     this.enableEditing = () => {
       var _a, _b;
       this.valuePriorToEditing = (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.value;
       this.editingEnabled = true;
       (_b = this.inputElement) === null || _b === void 0 ? void 0 : _b.setFocus();
-      this.calciteInlineEditableEnableEditingChange.emit();
+      this.calciteInternalInlineEditableEnableEditingChange.emit();
     };
     this.disableEditing = () => {
       this.editingEnabled = false;
@@ -61,6 +62,9 @@ export class InlineEditable {
       }
       this.disableEditing();
       this.enableEditingButton.setFocus();
+      if (!this.editingEnabled && !!this.shouldEmitCancel) {
+        this.calciteInlineEditableEditCancel.emit();
+      }
     };
     this.escapeKeyHandler = async (e) => {
       var _a;
@@ -145,7 +149,7 @@ export class InlineEditable {
     updateHostInteraction(this);
   }
   render() {
-    return (h("div", { class: CSS.wrapper, onClick: this.enableEditingHandler, onKeyDown: this.escapeKeyHandler, onTransitionEnd: this.transitionEnd },
+    return (h("div", { class: CSS.wrapper, onClick: this.enableEditingHandler, onKeyDown: this.escapeKeyHandler },
       h("div", { class: CSS.inputWrapper },
         h("slot", null)),
       h("div", { class: CSS.controlsWrapper },
@@ -428,8 +432,8 @@ export class InlineEditable {
         "references": {}
       }
     }, {
-      "method": "calciteInlineEditableEnableEditingChange",
-      "name": "calciteInlineEditableEnableEditingChange",
+      "method": "calciteInternalInlineEditableEnableEditingChange",
+      "name": "calciteInternalInlineEditableEnableEditingChange",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -473,7 +477,7 @@ export class InlineEditable {
       "methodName": "editingEnabledWatcher"
     }]; }
   static get listeners() { return [{
-      "name": "calciteInputBlur",
+      "name": "calciteInternalInputBlur",
       "method": "blurHandler",
       "target": undefined,
       "capture": false,

package/dist/collection/components/inline-editable/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 CSS = {
   wrapper: "wrapper",

package/dist/collection/components/input/input.css

@@ -82,9 +82,10 @@
   display: block;
 }
 
-:host([scale=s]) input, :host([scale=s]) .prefix, :host([scale=s]) .suffix {
+:host([scale=s]) input,  :host([scale=s]) .prefix,  :host([scale=s]) .suffix {
   height: 1.5rem;
-  padding: 0.5rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
 }
@@ -92,7 +93,7 @@
   height: 1.5rem;
   min-height: 1.5rem;
 }
-:host([scale=s]) .number-button-wrapper, :host([scale=s]) .action-wrapper calcite-button, :host([scale=s]) .action-wrapper calcite-button button {
+:host([scale=s]) .number-button-wrapper,  :host([scale=s]) .action-wrapper calcite-button,  :host([scale=s]) .action-wrapper calcite-button button {
   height: 1.5rem;
 }
 :host([scale=s]) input[type=file] {
@@ -112,16 +113,17 @@
   line-height: 1rem;
 }
 
-:host([scale=m]) input, :host([scale=m]) .prefix, :host([scale=m]) .suffix {
+:host([scale=m]) input,  :host([scale=m]) .prefix,  :host([scale=m]) .suffix {
   height: 2rem;
-  padding: 0.75rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
 }
 :host([scale=m]) textarea {
   min-height: 2rem;
 }
-:host([scale=m]) .number-button-wrapper, :host([scale=m]) .action-wrapper calcite-button, :host([scale=m]) .action-wrapper calcite-button button {
+:host([scale=m]) .number-button-wrapper,  :host([scale=m]) .action-wrapper calcite-button,  :host([scale=m]) .action-wrapper calcite-button button {
   height: 2rem;
 }
 :host([scale=m]) input[type=file] {
@@ -141,16 +143,17 @@
   line-height: 1rem;
 }
 
-:host([scale=l]) input, :host([scale=l]) .prefix, :host([scale=l]) .suffix {
+:host([scale=l]) input,  :host([scale=l]) .prefix,  :host([scale=l]) .suffix {
   height: 2.75rem;
-  padding: 1rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
 }
 :host([scale=l]) textarea {
   min-height: 2.75rem;
 }
-:host([scale=l]) .number-button-wrapper, :host([scale=l]) .action-wrapper calcite-button, :host([scale=l]) .action-wrapper calcite-button button {
+:host([scale=l]) .number-button-wrapper,  :host([scale=l]) .action-wrapper calcite-button,  :host([scale=l]) .action-wrapper calcite-button button {
   height: 2.75rem;
 }
 :host([scale=l]) input[type=file] {
@@ -188,7 +191,7 @@
 
 :host textarea,
 :host input {
-  transition: var(--calcite-animation-timing), height 0s;
+  transition: var(--calcite-animation-timing), height 0, outline-offset 0s;
   -webkit-appearance: none;
   position: relative;
   margin: 0px;
@@ -209,46 +212,46 @@
   -webkit-appearance: none;
 }
 
-:host input, :host textarea {
+:host input,  :host textarea {
   border-width: 1px;
   border-style: solid;
   border-color: var(--calcite-ui-border-input);
   color: var(--calcite-ui-text-1);
 }
-:host input::placeholder, :host input:-ms-input-placeholder, :host input::-ms-input-placeholder, :host textarea::placeholder, :host textarea:-ms-input-placeholder, :host textarea::-ms-input-placeholder {
+:host input::placeholder,  :host input:-ms-input-placeholder,  :host input::-ms-input-placeholder,  :host textarea::placeholder,  :host textarea:-ms-input-placeholder,  :host textarea::-ms-input-placeholder {
   font-weight: var(--calcite-font-weight-normal);
   color: var(--calcite-ui-text-3);
 }
-:host input:focus, :host textarea:focus {
+:host input:focus,  :host textarea:focus {
   border-color: var(--calcite-ui-brand);
   color: var(--calcite-ui-text-1);
 }
-:host input[readonly], :host textarea[readonly] {
+:host input[readonly],  :host textarea[readonly] {
   background-color: var(--calcite-ui-background);
   font-weight: var(--calcite-font-weight-medium);
 }
-:host input[readonly]:focus, :host textarea[readonly]:focus {
+:host input[readonly]:focus,  :host textarea[readonly]:focus {
   color: var(--calcite-ui-text-1);
 }
 :host calcite-icon {
   color: var(--calcite-ui-text-3);
 }
 
-:host textarea, :host input {
-  outline-offset: 0;
+:host textarea, 
+:host input {
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
 }
 
-:host textarea:focus, :host input:focus {
+:host textarea:focus, 
+:host input:focus {
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: -2px;
 }
 
-:host([status=invalid]) input, :host([status=invalid]) textarea {
+:host([status=invalid]) input,  :host([status=invalid]) textarea {
   border-color: var(--calcite-ui-danger);
 }
-:host([status=invalid]) input:focus, :host([status=invalid]) textarea:focus {
+:host([status=invalid]) input:focus,  :host([status=invalid]) textarea:focus {
   outline: 2px solid var(--calcite-ui-danger);
   outline-offset: -2px;
 }
@@ -290,19 +293,22 @@
   position: absolute;
   z-index: 10;
   display: block;
-  transition-property: all;
-  transition-duration: var(--calcite-animation-timing);
-  transition-timing-function: ease-in-out;
-  transition-delay: 0s;
+  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
 }
 
-input[type=text]::-ms-clear, input[type=text]::-ms-reveal {
+input[type=text]::-ms-clear, 
+input[type=text]::-ms-reveal {
   display: none;
   height: 0px;
   width: 0px;
 }
 
-input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration, input[type=date]::-webkit-clear-button, input[type=time]::-webkit-clear-button {
+input[type=search]::-webkit-search-decoration, 
+input[type=search]::-webkit-search-cancel-button, 
+input[type=search]::-webkit-search-results-button, 
+input[type=search]::-webkit-search-results-decoration, 
+input[type=date]::-webkit-clear-button, 
+input[type=time]::-webkit-clear-button {
   display: none;
 }
 
@@ -321,24 +327,16 @@ input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-searc
   border-style: solid;
   border-color: var(--calcite-ui-border-input);
   background-color: var(--calcite-ui-foreground-1);
-  outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
   border-inline-start-width: 0px;
 }
 .clear-button:hover {
   background-color: var(--calcite-ui-foreground-2);
-  transition-property: all;
-  transition-duration: var(--calcite-animation-timing);
-  transition-timing-function: ease-in-out;
-  transition-delay: 0s;
+  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
 }
 .clear-button:hover calcite-icon {
   color: var(--calcite-ui-text-1);
-  transition-property: all;
-  transition-duration: var(--calcite-animation-timing);
-  transition-timing-function: ease-in-out;
-  transition-delay: 0s;
+  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
 }
 .clear-button:active {
   background-color: var(--calcite-ui-foreground-3);
@@ -368,7 +366,8 @@ input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-searc
   display: flex;
 }
 
-.prefix, .suffix {
+.prefix, 
+.suffix {
   box-sizing: border-box;
   display: flex;
   height: auto;
@@ -420,10 +419,7 @@ input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-searc
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  transition-property: all;
-  transition-duration: var(--calcite-animation-timing);
-  transition-timing-function: ease-in-out;
-  transition-delay: 0s;
+  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
 }
 
 :host([number-button-type=vertical]) .wrapper {
@@ -431,7 +427,8 @@ input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-searc
   display: flex;
 }
 
-:host([number-button-type=vertical]) input, :host([number-button-type=vertical]) textarea {
+:host([number-button-type=vertical]) input, 
+:host([number-button-type=vertical]) textarea {
   order: 2;
 }
 
@@ -442,7 +439,7 @@ input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-searc
   transform: rotate(-90deg);
 }
 
-.number-button-item.number-button-item--horizontal[data-adjustment=down], .number-button-item.number-button-item--horizontal[data-adjustment=up] {
+.number-button-item.number-button-item--horizontal[data-adjustment=down],  .number-button-item.number-button-item--horizontal[data-adjustment=up] {
   order: 1;
   max-height: 100%;
   min-height: 100%;
@@ -511,18 +508,12 @@ input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-searc
   padding-bottom: 0px;
   padding-left: 0.5rem;
   padding-right: 0.5rem;
-  transition-property: all;
-  transition-duration: var(--calcite-animation-timing);
-  transition-timing-function: ease-in-out;
-  transition-delay: 0s;
+  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
   border-inline-start-width: 0px;
 }
 .number-button-item calcite-icon {
   pointer-events: none;
-  transition-property: all;
-  transition-duration: var(--calcite-animation-timing);
-  transition-timing-function: ease-in-out;
-  transition-delay: 0s;
+  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
 }
 .number-button-item:focus {
   background-color: var(--calcite-ui-foreground-2);
@@ -533,6 +524,9 @@ input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-searc
 .number-button-item:active {
   background-color: var(--calcite-ui-foreground-3);
 }
+.number-button-item:disabled {
+  pointer-events: none;
+}
 
 .wrapper {
   position: relative;
@@ -625,10 +619,7 @@ input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-searc
 
 :host .inline-child {
   background-color: transparent;
-  transition-property: all;
-  transition-duration: var(--calcite-animation-timing);
-  transition-timing-function: ease-in-out;
-  transition-delay: 0s;
+  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
 }
 :host .inline-child .editing-enabled {
   background-color: inherit;