@esri/calcite-components 5.2.0-next.102 → 5.2.0-next.104

package/dist/chunks/useInlineEdit.js

@@ -18,13 +18,16 @@ class UseInlineEdit {
     this.valuePriorToEditing = "";
   }
   enable() {
-    this.valuePriorToEditing = this.options.getValue();
+    this.captureValuePriorToEditing();
     this.options.setInlineEditing(true);
     requestAnimationFrame(() => {
       this.options.setFocus();
     });
     this.options.emitEnableEditingChange();
   }
+  captureValuePriorToEditing() {
+    this.valuePriorToEditing = this.options.getValue();
+  }
   disable() {
     this.options.setInlineEditing(false);
   }

package/dist/components/calcite-input/customElement.js

@@ -213,6 +213,9 @@ class Input extends LitElement {
     }
   }
   willUpdate(changes) {
+    if (changes.has("inlineEditing") && this.inlineEditing) {
+      this.inlineEditManager.captureValuePriorToEditing();
+    }
     if (changes.has("max")) {
       this.maxString = this.max?.toString() ?? void 0;
     }

package/dist/components/calcite-input-number/customElement.js

@@ -200,6 +200,9 @@ class InputNumber extends LitElement {
     }
   }
   willUpdate(changes) {
+    if (changes.has("inlineEditing") && this.inlineEditing) {
+      this.inlineEditManager.captureValuePriorToEditing();
+    }
     if (changes.has("max")) {
       this.maxString = this.max?.toString() || void 0;
     }

package/dist/components/calcite-input-text/customElement.js

@@ -163,6 +163,9 @@ class InputText extends LitElement {
     this.setPreviousValue(this.value);
   }
   willUpdate(changes) {
+    if (changes.has("inlineEditing") && this.inlineEditing) {
+      this.inlineEditManager.captureValuePriorToEditing();
+    }
     if (changes.has("icon")) {
       this.requestedIcon = setRequestedIcon({}, this.icon, "text");
     }

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

@@ -30,6 +30,8 @@ export abstract class InputTimeZone extends LitElement {
   accessor disabled: boolean;
   /** 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;
+  /** Specifies an accessible label for the component. */
+  accessor label: string | undefined;
   /** Specifies the component's label text. */
   accessor labelText: string | undefined;
   /**

package/dist/components/calcite-input-time-zone/customElement.js

@@ -233,7 +233,7 @@ class InputTimeZone extends LitElement {
     useLabel(this);
   }
   static {
-    this.properties = { selectedTimeZoneItem: [16, {}, { state: true }], timeZoneItems: [16, {}, { state: true }], clearable: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], labelText: 1, maxItems: [11, {}, { reflect: true, type: Number }], messageOverrides: [0, {}, { attribute: false }], mode: [3, {}, { reflect: true }], name: [3, {}, { reflect: true }], offsetStyle: [3, {}, { reflect: true }], open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], placeholder: 1, readOnly: [7, {}, { reflect: true, type: Boolean }], referenceDate: 1, required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], validationIcon: [3, { converter: stringOrBoolean }, { reflect: true }], validationMessage: 1, validity: [32, {}, { readOnly: true, attribute: false }], value: 1 };
+    this.properties = { selectedTimeZoneItem: [16, {}, { state: true }], timeZoneItems: [16, {}, { state: true }], clearable: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], label: 1, labelText: 1, maxItems: [11, {}, { reflect: true, type: Number }], messageOverrides: [0, {}, { attribute: false }], mode: [3, {}, { reflect: true }], name: [3, {}, { reflect: true }], offsetStyle: [3, {}, { reflect: true }], open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], placeholder: 1, readOnly: [7, {}, { reflect: true, type: Boolean }], referenceDate: 1, required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], validationIcon: [3, { converter: stringOrBoolean }, { reflect: true }], validationMessage: 1, validity: [32, {}, { readOnly: true, attribute: false }], value: 1 };
   }
   static {
     this.formAssociated = true;
@@ -404,7 +404,7 @@ class InputTimeZone extends LitElement {
     return !metadata.country || open || !selected ? label : getSelectedRegionTimeZoneLabel(label, metadata.country, this.messages);
   }
   render() {
-    return this.interactiveContainer({ disabled: this.disabled, children: html`<calcite-combobox .clearDisabled=${!this.clearable} .disabled=${this.disabled} .label=${this.messages.chooseTimeZone} .labelText=${this.labelText} lang=${this.messages._lang ?? nothing} .maxItems=${this.maxItems} @calciteComboboxBeforeClose=${this.onComboboxBeforeClose} @calciteComboboxBeforeOpen=${this.onComboboxBeforeOpen} @calciteComboboxChange=${this.onComboboxChange} @calciteComboboxClose=${this.onComboboxClose} @calciteComboboxOpen=${this.onComboboxOpen} .overlayPositioning=${this.overlayPositioning} .placeholder=${this.placeholder || this.messages[`${this.mode}Placeholder`]} placeholder-icon=search .readOnly=${this.readOnly} .required=${this.required} .scale=${this.scale} .selectionMode=${this.clearable ? "single" : "single-persist"} .status=${this.status} .topLayerDisabled=${this.topLayerDisabled} .validationIcon=${this.validationIcon} .validationMessage=${this.validationMessage} ${ref(this.comboboxRef)}>${this.renderItems()}<slot name=${SLOTS.labelContent} slot=${SLOTS$1.labelContent}></slot></calcite-combobox>` });
+    return this.interactiveContainer({ disabled: this.disabled, children: html`<calcite-combobox .clearDisabled=${!this.clearable} .disabled=${this.disabled} .label=${this.label || this.messages.chooseTimeZone} .labelText=${this.labelText} lang=${this.messages._lang ?? nothing} .maxItems=${this.maxItems} @calciteComboboxBeforeClose=${this.onComboboxBeforeClose} @calciteComboboxBeforeOpen=${this.onComboboxBeforeOpen} @calciteComboboxChange=${this.onComboboxChange} @calciteComboboxClose=${this.onComboboxClose} @calciteComboboxOpen=${this.onComboboxOpen} .overlayPositioning=${this.overlayPositioning} .placeholder=${this.placeholder || this.messages[`${this.mode}Placeholder`]} placeholder-icon=search .readOnly=${this.readOnly} .required=${this.required} .scale=${this.scale} .selectionMode=${this.clearable ? "single" : "single-persist"} .status=${this.status} .topLayerDisabled=${this.topLayerDisabled} .validationIcon=${this.validationIcon} .validationMessage=${this.validationMessage} ${ref(this.comboboxRef)}>${this.renderItems()}<slot name=${SLOTS.labelContent} slot=${SLOTS$1.labelContent}></slot></calcite-combobox>` });
   }
   renderItems() {
     if (this.mode === "region") {

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

@@ -0,0 +1,19 @@
+/// <reference path="../../index.d.ts" />
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+
+/** @slot  - A slot for adding text. */
+export abstract class Text extends LitElement {
+  /**
+   * Specifies the maximum number of lines to display before truncating the text with an ellipsis.
+   *
+   * @mdn [maxLines](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/line-clamp)
+   */
+  accessor maxLines: number | undefined;
+  /**
+   * Specifies the position of truncation ellipsis when text overflows.
+   * `truncatePosition` is ignored when `maxLines` is configured, as multi-line truncation always occurs at the end.
+   */
+  accessor truncatePosition: TruncatePosition | undefined;
+}
+
+export type TruncatePosition = "middle" | "end";

package/dist/components/calcite-text/customElement.js

@@ -0,0 +1,174 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as customElement } from "../../chunks/runtime.js";
+import { LitElement, safeClassMap } from "@arcgis/lumina";
+import { createRef, ref } from "lit/directives/ref.js";
+import { D as getAssignedTextNodesFromSlotEl, k as getTextWidth, E as slotChangeGetTextContent } from "../../chunks/dom.js";
+import { c as createObserver, u as updateRefObserver } from "../../chunks/observers.js";
+import { css, html } from "lit";
+const styles = css`:host{display:block;overflow-wrap:break-word;overflow:hidden;white-space:normal}:host([truncate-position=end]){text-overflow:ellipsis;white-space:nowrap}:host([truncate-position=middle]){white-space:nowrap}.text-container{overflow:inherit;text-overflow:inherit}:host([truncate-position=middle]:not([max-lines])) slot{display:none}:host(:not([truncate-position=middle])) .middle-truncated-text,:host([max-lines]) .middle-truncated-text{display:none}:host([max-lines]) .text-container{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--calcite-internal-text-max-lines, none);white-space:normal}:host([hidden]){display:none}[hidden]{display:none}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}`;
+const ELLIPSIS_CHAR = "…";
+const CSS = {
+  middleTruncatedText: "middle-truncated-text",
+  textContainer: "text-container",
+  assistiveText: "assistive-text"
+};
+class Text extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.assistiveTextSpanRef = createRef();
+    this.defaultSlotRef = createRef();
+    this.middleTruncatedSpanRef = createRef();
+    this.mutationObserver = createObserver("mutation", (mutations) => {
+      const assignedTextNodes = getAssignedTextNodesFromSlotEl(this.defaultSlotRef.value);
+      if (mutations.some(({ target }) => assignedTextNodes.includes(target))) {
+        this.setValue(assignedTextNodes.map((node) => node.textContent).join("").trim());
+      }
+    });
+    this.resizeObserver = createObserver("resize", () => {
+      this.handleTruncation();
+    });
+    this.renderedText = "";
+  }
+  static {
+    this.properties = { maxLines: [11, {}, { type: Number, reflect: true }], truncatePosition: [3, {}, { reflect: true }] };
+  }
+  static {
+    this.styles = styles;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.mutationObserver?.observe(this.el, {
+      characterData: true,
+      subtree: true
+    });
+  }
+  willUpdate(changes) {
+    if (changes.has("maxLines") && this.hasUpdated) {
+      if (!this.maxLines) {
+        this.clearTooltipTitle();
+      }
+      this.updateMaxLinesToken();
+    }
+  }
+  updated(changes) {
+    if (changes.has("truncatePosition") && !this.maxLines) {
+      this.handleTruncatePositionChange(changes.get("truncatePosition"));
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.resizeObserver?.disconnect();
+    this.mutationObserver?.disconnect();
+  }
+  clearTooltipTitle() {
+    this.textContainerEl.title = "";
+  }
+  getTruncatedText(text, maxWidth, font, letterSpacing) {
+    let startIndex = 0;
+    let endIndex = text.length;
+    const truncatedString = (index) => {
+      const leftCount = Math.ceil(index / 2);
+      const rightCount = Math.floor(index / 2);
+      return text.slice(0, leftCount) + ELLIPSIS_CHAR + text.slice(text.length - rightCount);
+    };
+    while (startIndex < endIndex) {
+      const mid = Math.ceil((startIndex + endIndex) / 2);
+      const optimalText = truncatedString(mid);
+      if (getTextWidth(optimalText, font, letterSpacing) <= maxWidth) {
+        startIndex = mid;
+      } else {
+        endIndex = mid - 1;
+      }
+    }
+    const optimalIndex = Math.max(0, startIndex);
+    if (optimalIndex <= 1) {
+      return ELLIPSIS_CHAR;
+    }
+    return truncatedString(optimalIndex);
+  }
+  handleDefaultSlotChange(event) {
+    this.setValue(slotChangeGetTextContent(event));
+  }
+  setValue(value) {
+    this.value = value;
+    this.renderedText = value;
+    this.handleTruncation();
+  }
+  handleTruncation() {
+    if (!this.textContainerEl) {
+      return;
+    }
+    const { truncatePosition, maxLines } = this;
+    if (this.isTruncatePositionMiddle()) {
+      this.truncateMiddleText();
+      this.assistiveTextSpanRef.value.textContent = this.value || "";
+    } else if (truncatePosition === "end" || maxLines && maxLines >= 1) {
+      this.syncTooltipState();
+    }
+  }
+  hasOverflow() {
+    return this.textContainerEl.scrollWidth > this.textContainerEl.clientWidth || this.textContainerEl.scrollHeight > this.textContainerEl.clientHeight;
+  }
+  syncTooltipState() {
+    if (this.hasOverflow()) {
+      this.setTooltipTitle();
+    } else {
+      this.clearTooltipTitle();
+    }
+  }
+  handleTruncatePositionChange(oldValue) {
+    const newValue = this.truncatePosition;
+    if (oldValue && !newValue) {
+      this.clearTooltipTitle();
+    } else {
+      this.handleTruncation();
+    }
+  }
+  setTooltipTitle() {
+    this.textContainerEl.title = this.value || "";
+  }
+  setMiddleTruncatedText(value) {
+    const middleTruncatedTextEl = this.middleTruncatedSpanRef.value;
+    if (!middleTruncatedTextEl) {
+      return;
+    }
+    middleTruncatedTextEl.textContent = value || "";
+  }
+  truncateMiddleText() {
+    requestAnimationFrame(() => {
+      if (!this.textContainerEl || !this.textContainerEl.clientWidth || this.maxLines || this.truncatePosition !== "middle") {
+        return;
+      }
+      const clientWidth = this.textContainerEl.clientWidth;
+      const computedStyle = getComputedStyle(this.el);
+      const font = computedStyle.font || `${computedStyle.fontSize} ${computedStyle.fontFamily}`;
+      const textWidth = getTextWidth(this.value, font, computedStyle.letterSpacing);
+      if (textWidth <= clientWidth) {
+        this.setMiddleTruncatedText(this.value);
+        this.clearTooltipTitle();
+      } else {
+        const middleTruncatedText = this.getTruncatedText(this.renderedText, clientWidth, font, computedStyle.letterSpacing);
+        this.setMiddleTruncatedText(middleTruncatedText);
+        this.setTooltipTitle();
+      }
+    });
+  }
+  updateMaxLinesToken() {
+    this.textContainerEl?.style.setProperty("--calcite-internal-text-max-lines", this.maxLines?.toString() || null);
+  }
+  setTextContainerRef(el) {
+    updateRefObserver(this.resizeObserver, this.textContainerEl, el);
+    this.textContainerEl = el;
+    this.updateMaxLinesToken();
+  }
+  isTruncatePositionMiddle() {
+    return this.truncatePosition === "middle" && !this.maxLines;
+  }
+  render() {
+    return html`<div class=${safeClassMap(CSS.textContainer)} ${ref(this.setTextContainerRef)}><slot @slotchange=${this.handleDefaultSlotChange} ${ref(this.defaultSlotRef)}></slot><span aria-hidden=true class=${safeClassMap(CSS.middleTruncatedText)} ${ref(this.middleTruncatedSpanRef)}></span>${this.isTruncatePositionMiddle() && html`<span aria-live=polite class=${safeClassMap(CSS.assistiveText)} ${ref(this.assistiveTextSpanRef)}></span>` || ""}</div>`;
+  }
+}
+customElement("calcite-text", Text);
+export {
+  Text
+};

package/dist/components/calcite-text/index.d.ts

@@ -0,0 +1 @@
+export * from "./customElement.js";

package/dist/components/calcite-text/index.js

@@ -0,0 +1 @@
+export * from "./customElement.js";