@esri/calcite-components 5.2.0-next.3 → 5.2.0-next.31

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

@@ -3,12 +3,13 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, nothing, safeClassMap } from "@arcgis/lumina";
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
+import { g as getLabelText } from "../../chunks/label.js";
+import { u as useLabel } from "../../chunks/useLabel.js";
 import { a as slotChangeGetAssignedElements } from "../../chunks/dom.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
-const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block}:host([scale=s]) .controls-wrapper{block-size:1.5rem}:host([scale=m]) .controls-wrapper{block-size:2rem}:host([scale=l]) .controls-wrapper{block-size:2.75rem}.wrapper{box-sizing:border-box;display:flex;justify-content:space-between;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;background-color:var(--calcite-inline-editable-background-color, var(--calcite-color-foreground-1))}.wrapper .input-wrapper{flex:1 1 0%}:host(:not([editing-enabled]):not([disabled])) .wrapper:hover{background-color:var(--calcite-inline-editable-background-color-hover, var(--calcite-color-foreground-2))}.controls-wrapper{display:flex}.cancel-editing-button[appearance=transparent][kind=neutral]{--calcite-internal-button-text-color: var(--calcite-color-text-3);--calcite-internal-button-border-block-start-color: var(--calcite-color-border-input);--calcite-internal-button-border-block-end-color: var(--calcite-color-border-input)}.cancel-editing-button[appearance=transparent][kind=neutral]:hover{--calcite-internal-button-text-color: var(--calcite-color-text-1)}.enable-editing-button--hidden{pointer-events:none;opacity:0;inline-size:0}.enable-editing-button[appearance=transparent][kind=neutral]{--calcite-internal-button-background-color: transparent}calcite-button{--calcite-button-background-color: var(--calcite-inline-editable-button-background-color);--calcite-button-corner-radius: var(--calcite-inline-editable-button-corner-radius);--calcite-button-loader-color: var(--calcite-inline-editable-button-loader-color);--calcite-button-text-color: var(--calcite-inline-editable-button-text-color)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block}:host([scale=s]) .controls-wrapper{block-size:1.5rem}:host([scale=m]) .controls-wrapper{block-size:2rem}:host([scale=l]) .controls-wrapper{block-size:2.75rem}.wrapper{box-sizing:border-box;display:flex;justify-content:space-between;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;background-color:var(--calcite-inline-editable-background-color, var(--calcite-color-foreground-1))}.wrapper .input-wrapper{flex:1 1 0%}:host(:not([editing-enabled]):not([disabled])) .wrapper:hover{background-color:var(--calcite-inline-editable-background-color-hover, var(--calcite-color-foreground-2))}.controls-wrapper{display:flex}.enable-editing-button--hidden{pointer-events:none;opacity:0;inline-size:0}.enable-editing-button{--calcite-action-text-color: var(--calcite-inline-editable-button-text-color, var(--calcite-color-text-1))}.enable-editing-button,.confirm-changes-button,.cancel-editing-button{margin-inline-start:var(--calcite-space-2xs)}calcite-action{--calcite-action-background-color: var(--calcite-inline-editable-button-background-color);--calcite-action-corner-radius: var(--calcite-inline-editable-button-corner-radius);--calcite-action-loader-color: var(--calcite-inline-editable-button-loader-color);--calcite-action-text-color: var(--calcite-inline-editable-button-text-color)}calcite-action:hover{--calcite-action-background-color-hover: var( --calcite-inline-editable-button-background-color-hover, var(--calcite-inline-editable-button-background-color) );--calcite-action-text-color-press: var( --calcite-inline-editable-button-text-color-press, var(--calcite-inline-editable-button-text-color) )}calcite-action:active{--calcite-action-background-color-press: var( --calcite-inline-editable-button-background-color-press, var(--calcite-inline-editable-button-background-color) );--calcite-action-text-color-press: var( --calcite-inline-editable-button-text-color-press, var(--calcite-inline-editable-button-text-color) )}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`;
 const CSS = {
   wrapper: "wrapper",
   confirmChangesButton: "confirm-changes-button",
@@ -28,11 +29,15 @@ class InlineEditable extends LitElement {
   constructor() {
     super();
     this.cancelEditingButtonRef = createRef();
+    this.confirmChangesButtonRef = createRef();
     this._editingEnabled = false;
     this.enableEditingButtonRef = createRef();
+    this.shouldEmitCancel = false;
+    this.valuePriorToEditing = "";
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
     this.interactiveContainer = useInteractive(this);
+    this.labelable = useLabel(this);
     this.controls = false;
     this.disabled = false;
     this.loading = false;
@@ -41,6 +46,9 @@ class InlineEditable extends LitElement {
     this.calciteInlineEditableEditConfirm = createEvent({ cancelable: false });
     this.calciteInternalInlineEditableEnableEditingChange = createEvent({ cancelable: false });
     this.listen("calciteInternalInputBlur", this.blurHandler);
+    this.listen("calciteInternalInputNumberBlur", this.blurHandler);
+    this.listen("calciteInternalInputTextBlur", this.blurHandler);
+    this.listen("keydown", this.escapeKeyHandler);
   }
   static {
     this.properties = { afterConfirm: [0, {}, { attribute: false }], controls: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], editingEnabled: [7, {}, { reflect: true, type: Boolean }], loading: [7, {}, { reflect: true, type: Boolean }], messageOverrides: [0, {}, { attribute: false }], scale: [3, {}, { reflect: true }] };
@@ -67,14 +75,6 @@ class InlineEditable extends LitElement {
   async setFocus(options) {
     return this.focusSetter(() => this.inputEl, options);
   }
-  connectedCallback() {
-    super.connectedCallback();
-    connectLabel(this);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    disconnectLabel(this);
-  }
   editingEnabledWatcher(newValue, oldValue) {
     if (this.inputEl) {
       this.inputEl.editingEnabled = newValue;
@@ -89,7 +89,7 @@ class InlineEditable extends LitElement {
     }
   }
   async handleDefaultSlotChange(event) {
-    const inputElement = slotChangeGetAssignedElements(event).filter((el) => el.matches("calcite-input"))[0];
+    const inputElement = slotChangeGetAssignedElements(event).filter((el) => el.matches("calcite-input, calcite-input-number, calcite-input-text"))[0];
     this.inputEl = inputElement;
     if (!inputElement) {
       return;
@@ -102,7 +102,7 @@ class InlineEditable extends LitElement {
     this.setFocus();
   }
   enableEditing() {
-    this.valuePriorToEditing = this.inputEl?.value;
+    this.valuePriorToEditing = this.inputEl?.value ?? "";
     this.editingEnabled = true;
     this.inputEl?.setFocus();
     this.calciteInternalInlineEditableEnableEditingChange.emit();
@@ -129,11 +129,25 @@ class InlineEditable extends LitElement {
       this.cancelEditing();
     }
     if (event.key === "Tab" && this.shouldShowControls) {
-      if (!event.shiftKey && event.target === this.inputEl) {
+      const confirmChangesButton = this.confirmChangesButtonRef.value;
+      const cancelEditingButton = this.cancelEditingButtonRef.value;
+      const composedPath = event.composedPath();
+      const tabFromInput = this.inputEl ? composedPath.includes(this.inputEl) : false;
+      const tabFromConfirm = confirmChangesButton ? composedPath.includes(confirmChangesButton) : false;
+      const tabFromCancel = cancelEditingButton ? composedPath.includes(cancelEditingButton) : false;
+      if (!event.shiftKey && tabFromConfirm) {
+        event.preventDefault();
+        cancelEditingButton?.setFocus();
+      }
+      if (!event.shiftKey && (tabFromInput || !tabFromConfirm && !tabFromCancel)) {
+        event.preventDefault();
+        confirmChangesButton?.setFocus();
+      }
+      if (!!event.shiftKey && tabFromCancel) {
         event.preventDefault();
-        this.cancelEditingButtonRef.value.setFocus();
+        confirmChangesButton?.setFocus();
       }
-      if (!!event.shiftKey && event.target === this.cancelEditingButtonRef.value) {
+      if (!!event.shiftKey && tabFromConfirm) {
         event.preventDefault();
         this.inputEl?.setFocus();
       }
@@ -168,12 +182,12 @@ class InlineEditable extends LitElement {
     }
   }
   render() {
-    return this.interactiveContainer({ disabled: this.disabled, children: html`<div class=${safeClassMap(CSS.wrapper)} @click=${this.enableEditingHandler} @keydown=${this.escapeKeyHandler}><div class=${safeClassMap(CSS.inputWrapper)}><slot @slotchange=${this.handleDefaultSlotChange}></slot></div><div class=${safeClassMap(CSS.controlsWrapper)}><calcite-button appearance=transparent class=${safeClassMap({
+    return this.interactiveContainer({ disabled: this.disabled, children: html`<div class=${safeClassMap(CSS.wrapper)} @click=${this.enableEditingHandler}><div class=${safeClassMap(CSS.inputWrapper)}><slot @slotchange=${this.handleDefaultSlotChange}></slot></div><div class=${safeClassMap(CSS.controlsWrapper)}><calcite-action .ariaLabel=${this.messages.enableEditing} class=${safeClassMap({
       [CSS.enableEditingButton]: true,
       [CSS.enableEditingButtonHidden]: this.editingEnabled
-    })} .iconStart=${ICONS.pencil} kind=neutral .label=${this.messages.enableEditing} @click=${this.enableEditingHandler} .scale=${this.scale} title=${this.messages.enableEditing ?? nothing} type=button ${ref(this.enableEditingButtonRef)}></calcite-button>${this.shouldShowControls && [
-      html`<div class=${safeClassMap(CSS.cancelEditingButtonWrapper)}><calcite-button appearance=transparent class=${safeClassMap(CSS.cancelEditingButton)} .iconStart=${ICONS.close} kind=neutral .label=${this.messages.cancelEditing} @click=${this.cancelEditingHandler} .scale=${this.scale} title=${this.messages.cancelEditing ?? nothing} type=button ${ref(this.cancelEditingButtonRef)}></calcite-button></div>`,
-      html`<calcite-button appearance=solid class=${safeClassMap(CSS.confirmChangesButton)} .iconStart=${ICONS.check} kind=brand .label=${this.messages.confirmChanges} .loading=${this.loading} @click=${this.confirmChangesHandler} .scale=${this.scale} title=${this.messages.confirmChanges ?? nothing} type=button></calcite-button>`
+    })} .icon=${ICONS.pencil} @click=${this.enableEditingHandler} .scale=${this.scale} .text=${this.messages.enableEditing} title=${this.messages.enableEditing ?? nothing} type=button ${ref(this.enableEditingButtonRef)}></calcite-action>${this.shouldShowControls && [
+      html`<calcite-action .ariaLabel=${this.messages.confirmChanges} class=${safeClassMap(CSS.confirmChangesButton)} .icon=${ICONS.check} .loading=${this.loading} @click=${this.confirmChangesHandler} .scale=${this.scale} .text=${this.messages.confirmChanges} title=${this.messages.confirmChanges ?? nothing} type=button ${ref(this.confirmChangesButtonRef)}></calcite-action>`,
+      html`<div class=${safeClassMap(CSS.cancelEditingButtonWrapper)}><calcite-action .ariaLabel=${this.messages.cancelEditing} class=${safeClassMap(CSS.cancelEditingButton)} .icon=${ICONS.close} @click=${this.cancelEditingHandler} .scale=${this.scale} .text=${this.messages.cancelEditing} title=${this.messages.cancelEditing ?? nothing} type=button ${ref(this.cancelEditingButtonRef)}></calcite-action></div>`
     ] || ""}</div></div>` });
   }
 }

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

@@ -1,2 +1,2 @@
-import "../calcite-button/index.js";
+import "../calcite-action/index.js";
 export * from "./customElement.js";

package/dist/components/calcite-input/customElement.d.ts

@@ -25,6 +25,14 @@ import type { InputPlacement } from "./interfaces.js";
  * @cssproperty [--calcite-input-actions-icon-color-press] - Specifies the icon color of the component's `clearable` and `number-button-type` elements when pressed.
  * @cssproperty [--calcite-input-loading-background-color] - When `loading`, specifies the background color of the component's `loading` element.
  * @cssproperty [--calcite-input-loading-fill-color] - When `loading`, specifies the fill color of the component's `loading` element.
+ * @cssproperty [--calcite-input-inline-editable-background-color-hover] - When `inline-editable` is enabled, specifies the background color of the component, its inline editable elements and slotted `calcite-action` wrappers, when hovered.
+ * @cssproperty [--calcite-input-inline-editable-control-background-color] - When `inline-editable` is enabled, specifies the background color of the component's inline editable controls.
+ * @cssproperty [--calcite-input-inline-editable-control-background-color-hover] - When `inline-editable` is enabled, specifies the background color of the component's inline editable controls, when hovered.
+ * @cssproperty [--calcite-input-inline-editable-control-background-color-press] - When `inline-editable` is enabled, specifies the background color of the component's inline editable controls, when pressed.
+ * @cssproperty [--calcite-input-inline-editable-control-corner-radius] - When `inline-editable` is enabled, specifies the corner radius of the component's inline editable controls.
+ * @cssproperty [--calcite-input-inline-editable-control-loader-color] - When `inline-editable` is enabled, specifies the loader color of the component's inline editable controls.
+ * @cssproperty [--calcite-input-inline-editable-control-text-color] - When `inline-editable` is enabled, specifies the text color of the component's inline editable controls.
+ * @cssproperty [--calcite-input-inline-editable-control-text-color-press] - When `inline-editable` is enabled, specifies the text color of the component's inline editable controls, when pressed or hovered.
  * @slot [action] - A slot for positioning a `calcite-action` or other interactive content adjacent to the component.
  * @slot [label-content] - A slot for rendering content next to the component's `labelText`.
  */
@@ -35,7 +43,7 @@ export abstract class Input extends LitElement {
    *
    * @see [MDN - step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern)
    */
-  accessor accept: string;
+  accessor accept: string | undefined;
   /**
    * Specifies the text alignment of the component's `value`.
    *
@@ -48,7 +56,7 @@ export abstract class Input extends LitElement {
    *
    * @see [MDN - autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
    */
-  accessor autocomplete: AutoFill;
+  accessor autocomplete: AutoFill | undefined;
   /**
    * When `true` and the component has a `value`, a clear button is displayed. The clear button shows by default for `"search"`, `"time"`, and `"date"` types.
    *
@@ -68,12 +76,8 @@ export abstract class Input extends LitElement {
    * @see [MDN - files](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/files)
    */
   accessor files: FileList | undefined;
-  /**
-   * Specifies the `id` of the component's associated form.
-   *
-   * When not set, the component is associated with its ancestor form element, if one exists.
-   */
-  accessor form: string;
+  /** Specifies the `id` of the component's associated form. When not set, the component is associated with its ancestor form element, if one exists. */
+  accessor form: string | undefined;
   /**
    * When `true`, number values are displayed with a group separator corresponding to the language and country format.
    *
@@ -81,17 +85,31 @@ export abstract class Input extends LitElement {
    */
   accessor groupSeparator: boolean;
   /** When `true`, displays a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. */
-  accessor icon: IconName | boolean;
+  accessor icon: IconName | boolean | undefined;
   /**
    * When `true` and the element direction is right-to-left (`"rtl"`), flips the component`s `icon`.
    *
    * @default false
    */
   accessor iconFlipRtl: boolean;
+  /**
+   * When `true`, enables the component's built-in inline editable behavior.
+   *
+   * @default false
+   */
+  accessor inlineEditable: boolean;
+  /** Specifies a callback to be executed when saving inline editable changes */
+  accessor inlineEditableAfterConfirm: () => Promise<void>;
+  /**
+   * When `true` and `inlineEditable` is `true`, displays the component's built-in inline editable save and cancel controls.
+   *
+   * @default false
+   */
+  accessor inlineEditableControls: boolean;
   /** Specifies an accessible label for the component. */
-  accessor label: string;
+  accessor label: string | undefined;
   /** Specifies the component's label text. */
-  accessor labelText: string;
+  accessor labelText: string | undefined;
   /**
    * When `true`, a busy indicator is displayed.
    *
@@ -104,19 +122,26 @@ export abstract class Input extends LitElement {
    *
    * @see [MDN - max](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max)
    */
-  accessor max: number;
+  accessor max: number | undefined;
   /**
    * When the component resides in a form,
    * specifies the maximum length of text for the component's `value`.
    *
    * @see [MDN - maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength)
    */
-  accessor maxLength: number;
-  /** Overrides individual strings used by the component. */
+  accessor maxLength: number | undefined;
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
   accessor messageOverrides: {
-      clear?: string;
-      loading?: string;
-      required?: string;
+      cancelInlineEditing?: string | undefined;
+      clear?: string | undefined;
+      confirmInlineEditingChanges?: string | undefined;
+      enableInlineEditing?: string | undefined;
+      loading?: string | undefined;
+      required?: string | undefined;
   };
   /**
    * When the component resides in a form,
@@ -124,14 +149,14 @@ export abstract class Input extends LitElement {
    *
    * @see [MDN - min](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min)
    */
-  accessor min: number;
+  accessor min: number | undefined;
   /**
    * When the component resides in a form,
    * specifies the minimum length of text for the component's `value`.
    *
    * @see [MDN - minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength)
    */
-  accessor minLength: number;
+  accessor minLength: number | undefined;
   /**
    * When `true` and `type` is `"email"` or `"file"`, the component can accept more than one value.
    * Read the native attribute's documentation on MDN for more info.
@@ -147,7 +172,7 @@ export abstract class Input extends LitElement {
    *
    * @see [MDN - name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name)
    */
-  accessor name: string;
+  accessor name: string | undefined;
   /**
    * When `type="number"`, specifies the placement of the buttons.
    *
@@ -155,7 +180,7 @@ export abstract class Input extends LitElement {
    */
   accessor numberButtonType: InputPlacement;
   /** Specifies the Unicode numeral system used by the component for localization. */
-  accessor numberingSystem: NumberingSystem;
+  accessor numberingSystem: NumberingSystem | undefined;
   /**
    * When the component resides in a form,
    * specifies a regular expression (regex) pattern the component's `value` must match for validation.
@@ -163,15 +188,15 @@ export abstract class Input extends LitElement {
    *
    * @see [MDN - step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern)
    */
-  accessor pattern: string;
+  accessor pattern: string | undefined;
   /**
    * Specifies the component's placeholder text.
    *
    * @see [MDN - placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder)
    */
-  accessor placeholder: string;
+  accessor placeholder: string | undefined;
   /** Specifies text to display at the start of the component. */
-  accessor prefixText: string;
+  accessor prefixText: string | undefined;
   /**
    * When `true`, the component's `value` can be read, but cannot be modified.
    *
@@ -203,9 +228,9 @@ export abstract class Input extends LitElement {
    *
    * @see [MDN - step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step)
    */
-  accessor step: number | "any";
+  accessor step: number | "any" | undefined;
   /** Specifies text to display at the end of the component. */
-  accessor suffixText: string;
+  accessor suffixText: string | undefined;
   /**
    * Specifies the component type.
    *
@@ -215,9 +240,9 @@ export abstract class Input extends LitElement {
    */
   accessor type: "color" | "date" | "datetime-local" | "email" | "file" | "image" | "month" | "number" | "password" | "search" | "tel" | "text" | "time" | "url" | "week";
   /** Specifies the validation icon to display under the component. */
-  accessor validationIcon: IconName | boolean;
+  accessor validationIcon: IconName | boolean | undefined;
   /** Specifies the validation message to display under the component. */
-  accessor validationMessage: string;
+  accessor validationMessage: string | undefined;
   /**
    * The component's current validation state.
    *
@@ -237,10 +262,19 @@ export abstract class Input extends LitElement {
   setFocus(options?: FocusOptions): Promise<void>;
   /** Fires each time a new `value` is typed and committed. */
   readonly calciteInputChange: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when built-in inline editable is cancelled. */
+  readonly calciteInputInlineEditableCancel: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when built-in inline editable is enabled. */
+  readonly calciteInputInlineEditableChange: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when built-in inline editable is confirmed. */
+  readonly calciteInputInlineEditableConfirm: import("@arcgis/lumina").TargetedEvent<this, void>;
   /** Fires each time a new `value` is typed. */
   readonly calciteInputInput: import("@arcgis/lumina").TargetedEvent<this, void>;
   readonly "@eventTypes": {
     calciteInputChange: Input["calciteInputChange"]["detail"];
+    calciteInputInlineEditableCancel: Input["calciteInputInlineEditableCancel"]["detail"];
+    calciteInputInlineEditableChange: Input["calciteInputInlineEditableChange"]["detail"];
+    calciteInputInlineEditableConfirm: Input["calciteInputInlineEditableConfirm"]["detail"];
     calciteInputInput: Input["calciteInputInput"]["detail"];
   };
 }