@esri/calcite-components 1.0.0-next.293 → 1.0.0-next.297

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"]
   }; }
@@ -268,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`"
       },
@@ -289,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`"
       },
@@ -310,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`"
       },
@@ -369,8 +377,8 @@ export class CalciteInlineEditable {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -387,8 +395,8 @@ export class CalciteInlineEditable {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -405,8 +413,8 @@ export class CalciteInlineEditable {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -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",