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

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

@@ -1,7 +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 { Component, Element, Event, h, Listen, Method, Prop, Watch } from "@stencil/core";
 import { getElementProp } from "../../utils/dom";
 import { TEXT, CSS } from "./resources";
-import { connectLabel, disconnectLabel } from "../../utils/label";
+import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 /**
  * @slot - A slot for adding a `calcite-input`.
  */
@@ -32,42 +36,38 @@ export class CalciteInlineEditable {
      * @default "Save"
      */
     this.intlConfirmChanges = TEXT.intlConfirmChanges;
-    this.onLabelClick = () => {
-      this.setFocus();
-    };
-    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();
@@ -96,6 +96,7 @@ export class CalciteInlineEditable {
           this.loading = true;
           await this.afterConfirm();
           this.disableEditing();
+          this.enableEditingButton.setFocus();
         }
       }
       catch (e) {
@@ -108,38 +109,42 @@ export class CalciteInlineEditable {
   disabledWatcher(disabled) {
     this.inputElement.disabled = disabled;
   }
+  editingEnabledWatcher(newValue, oldValue) {
+    this.inputElement.editingEnabled = newValue;
+    if (!newValue && !!oldValue) {
+      this.shouldEmitCancel = true;
+    }
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
-  componentWillLoad() {
-    this.inputElement = this.el.querySelector("calcite-input");
-    this.inputElement.disabled = this.disabled;
-    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);
   }
+  componentWillLoad() {
+    this.inputElement = this.el.querySelector("calcite-input");
+    this.inputElement.disabled = this.disabled;
+    this.inputElement.label = this.inputElement.label || getLabelText(this);
+    this.scale =
+      this.scale || this.inputElement.scale || getElementProp(this.el, "scale", undefined);
+  }
   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 })
         ])));
   }
@@ -167,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"]
   }; }
@@ -263,8 +276,8 @@ export class CalciteInlineEditable {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Click to edit\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Click to edit\""
           }],
         "text": "specify text to be user for the enable editing button's aria-label, defaults to `Click to edit`"
       },
@@ -284,8 +297,8 @@ export class CalciteInlineEditable {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Cancel\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Cancel\""
           }],
         "text": "specify text to be user for the cancel editing button's aria-label, defaults to `Cancel`"
       },
@@ -305,8 +318,8 @@ export class CalciteInlineEditable {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Save\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Save\""
           }],
         "text": "specify text to be user for the confirm changes button's aria-label, defaults to `Save`"
       },
@@ -364,8 +377,8 @@ export class CalciteInlineEditable {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -382,8 +395,8 @@ export class CalciteInlineEditable {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -400,8 +413,8 @@ export class CalciteInlineEditable {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -433,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

@@ -1,11 +1,15 @@
+/*!
+ * 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 = {
-  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",