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

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";