@esri/calcite-components 1.0.0-next.294 → 1.0.0-next.298

package/dist/collection/components/calcite-icon/assets/calcite-icon/ringsLargest24.json

@@ -0,0 +1 @@
+"M13.511 21.668l.262.976a10.862 10.862 0 1 1 8.871-8.871l-.976-.262A9.878 9.878 0 0 0 21.795 12 9.8 9.8 0 1 0 12 21.795a9.878 9.878 0 0 0 1.511-.127zm1.883-13.062A4.8 4.8 0 1 0 12 16.8c.069 0 .133-.017.201-.02l-.264-.987a3.798 3.798 0 1 1 3.856-3.856l.987.264c.003-.068.02-.132.02-.201a4.785 4.785 0 0 0-1.406-3.394zM13 13l2.524 9.42a9.768 9.768 0 0 0 6.896-6.896z"

package/dist/collection/components/calcite-icon/assets/calcite-icon/ringsLargest32.json

@@ -0,0 +1 @@
+"M18.293 28.587l.26.971A13.937 13.937 0 0 1 16 29.8 13.8 13.8 0 0 1 6.242 6.242 13.8 13.8 0 0 1 29.8 16a13.938 13.938 0 0 1-.241 2.553l-.972-.26A12.93 12.93 0 0 0 28.8 16 12.8 12.8 0 0 0 6.95 6.95 12.8 12.8 0 0 0 16 28.8a12.927 12.927 0 0 0 2.293-.213zm2.516-17.396a6.81 6.81 0 1 0-4.079 11.564l-.268-1.003a5.8 5.8 0 1 1 5.291-5.29l1.001.268a6.79 6.79 0 0 0-1.945-5.539zM17 17l3.534 13.188a13.675 13.675 0 0 0 9.654-9.654z"

package/dist/collection/components/calcite-icon/assets/calcite-icon/ringsSmallest16.json

@@ -0,0 +1 @@
+"M9.887 15.042a1.738 1.738 0 0 0 .304.44 7.816 7.816 0 1 1 4.914-4.276 1.747 1.747 0 0 0-.308-.284l-.505-.353a6.85 6.85 0 1 0-4.62 4.014zM8 4a4 4 0 0 0 0 8 3.934 3.934 0 0 0 .447-.045L8.002 11H8a3 3 0 1 1 3-3c0 .084-.018.164-.025.246l.918.643A3.973 3.973 0 0 0 8 4zm5.792 8.356L9 9l2.473 5.303a5.874 5.874 0 0 0 2.32-1.947z"

package/dist/collection/components/calcite-icon/assets/calcite-icon/ringsSmallest24.json

@@ -0,0 +1 @@
+"M14.958 21.341l.425.91a10.825 10.825 0 1 1 6.234-5.354l-.832-.582a9.781 9.781 0 1 0-5.827 5.026zM12 7.2a4.8 4.8 0 1 0 .803 9.519l-.445-.955c-.12.011-.235.036-.358.036a3.8 3.8 0 1 1 3.721-3.031l.857.6A4.746 4.746 0 0 0 16.8 12 4.8 4.8 0 0 0 12 7.2zm1 5.8l4.122 8.839a9.79 9.79 0 0 0 3.865-3.246z"

package/dist/collection/components/calcite-icon/assets/calcite-icon/ringsSmallest32.json

@@ -0,0 +1 @@
+"M20.185 29.113l.017.03a13.784 13.784 0 1 1 8.015-6.72l-.03-.027-.798-.558a12.765 12.765 0 1 0-7.614 6.397zm.624-17.922a6.808 6.808 0 1 0-3.62 11.498l-.45-.963a5.799 5.799 0 1 1 4.77-4.004l.87.608a6.805 6.805 0 0 0-1.57-7.139zm6.373 12.639L16 16l5.77 12.374a13.707 13.707 0 0 0 5.412-4.544z"

package/dist/collection/components/calcite-icon/assets/calcite-icon/ringsXBar16.json

@@ -0,0 +1 @@
+"M8.5 14.828a1.74 1.74 0 0 0-.43.968c-.023 0-.046.004-.07.004a7.8 7.8 0 1 1 7.762-8.55h-1.006A6.799 6.799 0 1 0 8 14.8c.186 0 .369-.013.55-.028zM8 4a4 4 0 0 0 0 8 3.956 3.956 0 0 0 1.212-.207 1.88 1.88 0 0 1-.135-.312 1.768 1.768 0 0 1-.535-.536 2.998 2.998 0 1 1 2.352-3.695h1.03A3.997 3.997 0 0 0 8 4zm2 5v1h6V9zm4.414 2.013l-1.502 1.79-1.066-1.79h-1.088l1.461 2.302L9.8 16h1.033l1.854-2.153L13.967 16h1.097l-1.684-2.685 2.046-2.302z"

package/dist/collection/components/calcite-icon/assets/calcite-icon/ringsXBar24.json

@@ -0,0 +1 @@
+"M13.125 22.425v.316A10.925 10.925 0 0 1 12 22.8 10.8 10.8 0 1 1 22.75 11h-1a9.868 9.868 0 1 0-8.488 10.71 1.997 1.997 0 0 0-.137.715zM12 7.2a4.8 4.8 0 0 0 0 9.6v-.114a2.668 2.668 0 0 1 .183-.905c-.062.003-.12.019-.183.019a3.8 3.8 0 1 1 3.65-4.8h1.042A4.8 4.8 0 0 0 12 7.2zm2 6.8h9v-1h-9zm5.101 4.938l2.774-3.488V15h-.844L18.5 18.182 15.969 15h-.844S14.018 16.16 14 16.685V17h1.125v-.315a2.117 2.117 0 0 1 .228-.947l2.546 3.2-2.774 3.487v.45h.844l2.531-3.182 2.531 3.182h.844s1.107-1.16 1.125-1.685V21h-1.125v.189a2.12 2.12 0 0 1-.229.948z"

package/dist/collection/components/calcite-icon/assets/calcite-icon/ringsXBar32.json

@@ -0,0 +1 @@
+"M17.636 29.29v.404A13.993 13.993 0 0 1 16 29.8 13.8 13.8 0 0 1 6.242 6.242 13.786 13.786 0 0 1 29.752 15h-1A12.793 12.793 0 0 0 6.948 6.95 12.8 12.8 0 0 0 16 28.8a12.95 12.95 0 0 0 1.738-.13 1.998 1.998 0 0 0-.102.62zM11.19 11.191A6.797 6.797 0 0 0 16 22.797c.065 0 .129-.008.193-.01a1.978 1.978 0 0 1-.103-.605v-.394A5.802 5.802 0 1 1 21.702 15h1.013a6.786 6.786 0 0 0-11.524-3.809zM30 18v-1H18v1zm-1 9.584a2.37 2.37 0 0 1-.444 1.334l-3.497-4.458 3.85-4.76v-.587h-1.12l-3.557 4.371-3.437-4.368h-1.123c-.015.016-1.509 1.588-1.532 2.281l-.05.603h1.496v-.603a2.312 2.312 0 0 1 .402-1.333l3.497 4.458-3.8 4.759v.619h1.07l3.556-4.402 3.438 4.402h1.138c.155-.166 1.495-1.66 1.517-2.315l.05-.585H29z"

package/dist/collection/components/calcite-icon/assets/calcite-icon/ungroupItems16.json

@@ -0,0 +1 @@
+"M8 0v1H3V0H0v3h1v5H0v3h3v-1h2V9H3V8H2V3h1V2h5v1h1v2h1V3h1V0zM2 10H1V9h1zm0-8H1V1h1zm8 0H9V1h1zm6 6V5h-3v1H8V5H5v3h1v5H5v3h3v-1h5v1h3v-3h-1V8zM6 6h1v1H6zm1 9H6v-1h1zm6-1H8v-1H7V8h1V7h5v1h1v5h-1zm2 1h-1v-1h1zm-1-8V6h1v1z"

package/dist/collection/components/calcite-icon/assets/calcite-icon/ungroupItems24.json

@@ -0,0 +1 @@
+"M12 2v1H5V2H2v3h1v7H2v3h3v-1h4v-1H5v-1H4V5h1V4h7v1h1v4h1V5h1V2zM4 14H3v-1h1zM4 4H3V3h1zm10 0h-1V3h1zm8 8V9h-3v1h-7V9H9v3h1v7H9v3h3v-1h7v1h3v-3h-1v-7zm-12-2h1v1h-1zm1 11h-1v-1h1zm8-1h-7v-1h-1v-7h1v-1h7v1h1v7h-1zm2 1h-1v-1h1zm-1-10v-1h1v1z"

package/dist/collection/components/calcite-icon/assets/calcite-icon/ungroupItems32.json

@@ -0,0 +1 @@
+"M11 19H6v-1H5V6h1V5h12v1h1v5h1V6h1V3h-3v1H6V3H3v3h1v12H3v3h3v-1h5zm8-15h1v1h-1zM4 4h1v1H4zm1 16H4v-1h1zm24-6v-3h-3v1H14v-1h-3v3h1v12h-1v3h3v-1h12v1h3v-3h-1V14zm-17-2h1v1h-1zm1 16h-1v-1h1zm13-1H14v-1h-1V14h1v-1h12v1h1v12h-1zm2 1h-1v-1h1zm-1-15v-1h1v1z"

package/dist/collection/components/calcite-icon/assets/calcite-icon/ungroupLayoutElements16.json

@@ -0,0 +1 @@
+"M2 2v5h13V2zm12 4H3V3h11zM2 14h6V8H2zm1-5h4v4H3zm6 5h6V8H9zm1-5h4v4h-4z"

package/dist/collection/components/calcite-icon/assets/calcite-icon/ungroupLayoutElements24.json

@@ -0,0 +1 @@
+"M2 3v7h20V3zm19 6H3V4h18zm-8 12h9v-9h-9zm1-8h7v7h-7zM2 21h9v-9H2zm1-8h7v7H3z"

package/dist/collection/components/calcite-icon/assets/calcite-icon/ungroupLayoutElements32.json

@@ -0,0 +1 @@
+"M3 5v9h26V5zm25 8H4V6h24zM3.041 27.958h11.917V16.042H3.042zm.917-11h10.083v10.084H3.96zm13.083 11h11.917V16.042H17.043zm.917-11h10.084v10.084H17.957z"

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

@@ -84,23 +84,23 @@
   display: none;
 }
 
-:host([scale=s]) .calcite-inline-editable__controls-wrapper {
+:host([scale=s]) .controls-wrapper {
   height: 1.5rem;
 }
 
-:host([scale=m]) .calcite-inline-editable__controls-wrapper {
+:host([scale=m]) .controls-wrapper {
   height: 2rem;
 }
 
-:host([scale=l]) .calcite-inline-editable__controls-wrapper {
+:host([scale=l]) .controls-wrapper {
   height: 2.75rem;
 }
 
-:host(:not([editing-enabled]):not([disabled])) .calcite-inline-editable__wrapper:hover {
+:host(:not([editing-enabled]):not([disabled])) .wrapper:hover {
   background-color: var(--calcite-ui-foreground-2);
 }
 
-.calcite-inline-editable__wrapper {
+.wrapper {
   box-sizing: border-box;
   display: flex;
   justify-content: space-between;
@@ -111,60 +111,14 @@
   transition-delay: 0s;
 }
 
-.calcite-inline-editable__wrapper .calcite-inline-editable__input-wrapper {
+.wrapper .input-wrapper {
   flex: 1 1 0%;
 }
 
-.calcite-inline-editable__controls-wrapper {
+.controls-wrapper {
   display: flex;
 }
 
-:host([disabled]) .calcite-inline-editable__cancel-editing-button-wrapper {
+:host([disabled]) .cancel-editing-button-wrapper {
   border-color: var(--calcite-ui-border-2);
-}
-
-:host::slotted(*) .calcite-input__element-wrapper textarea,
-:host::slotted(*) .calcite-input__element-wrapper input {
-  transition-property: all;
-  transition-duration: 150ms;
-  transition-timing-function: ease-in-out;
-  transition-delay: 0s;
-}
-
-:host(:not([editing-enabled]))::slotted(*) .calcite-input__element-wrapper {
-  background-color: transparent;
-}
-
-:host(:not([editing-enabled]))::slotted(*) .sc-calcite-input {
-  display: none;
-}
-
-:host(:not([editing-enabled]))::slotted(*) .calcite-input__element-wrapper {
-  display: flex;
-  cursor: pointer;
-}
-
-:host(:not([editing-enabled]))::slotted(*) .calcite-input__element-wrapper textarea,
-:host(:not([editing-enabled]))::slotted(*) .calcite-input__element-wrapper input {
-  display: flex;
-  cursor: pointer;
-  padding-left: 0;
-  border-color: transparent;
-}
-
-:host(:not([editing-enabled])):not([disabled]):hover::slotted(*) textarea,
-:host(:not([editing-enabled])):not([disabled]):hover::slotted(*) input {
-  background-color: var(--calcite-ui-foreground-2);
-}
-
-:host([dir=rtl]):not([editing-enabled])::slotted(*) .calcite-input__element-wrapper textarea,
-:host([dir=rtl]):not([editing-enabled])::slotted(*) .calcite-input__element-wrapper input {
-  padding-left: unset;
-  padding-right: 0;
-}
-
-[dir=rtl] :host:not([editing-enabled])::slotted(*) .calcite-input__element-wrapper textarea,
-[dir=rtl] :host:not([editing-enabled])::slotted(*) .calcite-input__element-wrapper input {
-  padding-left: unset;
-  padding-right: 0;
 }

package/dist/collection/components/calcite-inline-editable/calcite-inline-editable.js

@@ -36,39 +36,38 @@ export class CalciteInlineEditable {
      * @default "Save"
      */
     this.intlConfirmChanges = TEXT.intlConfirmChanges;
-    this.editingCancelTransitionProp = "border-top-color";
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
     this.transitionEnd = (event) => {
-      if (!this.editingEnabled && event.propertyName === this.editingCancelTransitionProp) {
+      if (!this.editingEnabled && !!this.shouldEmitCancel) {
         this.calciteInlineEditableEditingCancel.emit(event);
       }
     };
     this.enableEditing = () => {
-      this.htmlInput.tabIndex = undefined;
       this.valuePriorToEditing = this.inputElement.value;
       this.editingEnabled = true;
       this.inputElement.setFocus();
       this.calciteInlineEditableEnableEditingChange.emit();
     };
     this.disableEditing = () => {
-      this.htmlInput.tabIndex = -1;
       this.editingEnabled = false;
     };
-    this.cancelEditingEnd = () => {
-      this.enableEditingButton.setFocus();
-      this.el.removeEventListener("calciteInlineEditableEditingCancel", this.cancelEditingEnd);
-    };
     this.cancelEditing = () => {
       this.inputElement.value = this.valuePriorToEditing;
-      this.el.addEventListener("calciteInlineEditableEditingCancel", this.cancelEditingEnd);
       this.disableEditing();
+      this.enableEditingButton.setFocus();
     };
     this.escapeKeyHandler = async (e) => {
       if (e.key !== "Escape") {
+        if (e.key === "Tab" && this.shouldShowControls) {
+          if (!e.shiftKey && e.target === this.inputElement) {
+            e.preventDefault();
+            this.cancelEditingButton.setFocus();
+          }
+          if (!!e.shiftKey && e.target === this.cancelEditingButton) {
+            e.preventDefault();
+            e.stopPropagation();
+            this.inputElement.setFocus();
+          }
+        }
         return;
       }
       this.cancelEditing();
@@ -97,6 +96,7 @@ export class CalciteInlineEditable {
           this.loading = true;
           await this.afterConfirm();
           this.disableEditing();
+          this.enableEditingButton.setFocus();
         }
       }
       catch (e) {
@@ -109,11 +109,23 @@ export class CalciteInlineEditable {
   disabledWatcher(disabled) {
     this.inputElement.disabled = disabled;
   }
+  editingEnabledWatcher(newValue, oldValue) {
+    this.inputElement.editingEnabled = newValue;
+    if (!newValue && !!oldValue) {
+      this.shouldEmitCancel = true;
+    }
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
+  connectedCallback() {
+    connectLabel(this);
+  }
+  disconnectedCallback() {
+    disconnectLabel(this);
+  }
   componentWillLoad() {
     this.inputElement = this.el.querySelector("calcite-input");
     this.inputElement.disabled = this.disabled;
@@ -121,27 +133,18 @@ export class CalciteInlineEditable {
     this.scale =
       this.scale || this.inputElement.scale || getElementProp(this.el, "scale", undefined);
   }
-  componentDidLoad() {
-    this.htmlInput = this.inputElement.querySelector("input");
-    if (!this.editingEnabled) {
-      this.htmlInput.tabIndex = -1;
-    }
-  }
-  connectedCallback() {
-    connectLabel(this);
-  }
-  disconnectedCallback() {
-    disconnectLabel(this);
-  }
   render() {
     return (h("div", { class: CSS.wrapper, onClick: this.enableEditingHandler, onKeyDown: this.escapeKeyHandler, onTransitionEnd: this.transitionEnd },
       h("div", { class: CSS.inputWrapper },
         h("slot", null)),
       h("div", { class: CSS.controlsWrapper },
-        !this.editingEnabled && (h("calcite-button", { appearance: "transparent", class: CSS.enableEditingButton, color: "neutral", disabled: this.disabled, iconStart: "pencil", label: this.intlEnableEditing, onClick: this.enableEditingHandler, ref: (el) => (this.enableEditingButton = el), scale: this.scale })),
+        h("calcite-button", { appearance: "transparent", class: CSS.enableEditingButton, color: "neutral", disabled: this.disabled, iconStart: "pencil", label: this.intlEnableEditing, onClick: this.enableEditingHandler, ref: (el) => (this.enableEditingButton = el), scale: this.scale, style: {
+            opacity: this.editingEnabled ? "0" : "1",
+            width: this.editingEnabled ? "0" : "inherit"
+          } }),
         this.shouldShowControls && [
           h("div", { class: CSS.cancelEditingButtonWrapper },
-            h("calcite-button", { appearance: "transparent", class: CSS.cancelEditingButton, color: "neutral", disabled: this.disabled, iconStart: "x", label: this.intlCancelEditing, onClick: this.cancelEditingHandler, scale: this.scale })),
+            h("calcite-button", { appearance: "transparent", class: CSS.cancelEditingButton, color: "neutral", disabled: this.disabled, iconStart: "x", label: this.intlCancelEditing, onClick: this.cancelEditingHandler, ref: (el) => (this.cancelEditingButton = el), scale: this.scale })),
           h("calcite-button", { appearance: "solid", class: CSS.confirmChangesButton, color: "blue", disabled: this.disabled, iconStart: "check", label: this.intlConfirmChanges, loading: this.loading, onClick: this.confirmChangesHandler, scale: this.scale })
         ])));
   }
@@ -155,9 +158,6 @@ export class CalciteInlineEditable {
       this.disableEditing();
     }
   }
-  onLabelClick() {
-    this.setFocus();
-  }
   //--------------------------------------------------------------------------
   //
   //  Public Methods
@@ -172,11 +172,19 @@ export class CalciteInlineEditable {
       (_b = this.enableEditingButton) === null || _b === void 0 ? void 0 : _b.setFocus();
     }
   }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  onLabelClick() {
+    this.setFocus();
+  }
   get shouldShowControls() {
     return this.editingEnabled && this.controls;
   }
   static get is() { return "calcite-inline-editable"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
     "$": ["calcite-inline-editable.scss"]
   }; }
@@ -438,6 +446,9 @@ export class CalciteInlineEditable {
   static get watchers() { return [{
       "propName": "disabled",
       "methodName": "disabledWatcher"
+    }, {
+      "propName": "editingEnabled",
+      "methodName": "editingEnabledWatcher"
     }]; }
   static get listeners() { return [{
       "name": "calciteInputBlur",

package/dist/collection/components/calcite-inline-editable/resources.js

@@ -3,13 +3,13 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 export const CSS = {
-  wrapper: "calcite-inline-editable__wrapper",
-  confirmChangesButton: "calcite-inline-editable__confirm-changes-button",
-  cancelEditingButton: "calcite-inline-editable__cancel-editing-button",
-  inputWrapper: "calcite-inline-editable__input-wrapper",
-  cancelEditingButtonWrapper: "calcite-inline-editable__cancel-editing-button-wrapper",
-  enableEditingButton: "calcite-inline-editable__enable-editing-button",
-  controlsWrapper: "calcite-inline-editable__controls-wrapper"
+  wrapper: "wrapper",
+  confirmChangesButton: "confirm-changes-button",
+  cancelEditingButton: "cancel-editing-button",
+  inputWrapper: "input-wrapper",
+  cancelEditingButtonWrapper: "cancel-editing-button-wrapper",
+  enableEditingButton: "enable-editing-button",
+  controlsWrapper: "controls-wrapper"
 };
 export const TEXT = {
   intlEnablingEditing: "Click to edit",