@spectrum-web-components/truncated 0.0.0-20241209155954

package/README.md

@@ -0,0 +1,49 @@
+## Description
+
+`<sp-truncated>` renders a line of text, truncating it if it overflows its container. When overflowing, a tooltip is automatically created
+that renders the entire non-truncated content.
+
+It is used like a `<span>` to contain potentially-long strings that are important for users to see, even when in small containers, like full
+names and email addresses.
+
+### Usage
+
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/truncated?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/truncated)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/truncated?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/truncated)
+
+```
+yarn add @spectrum-web-components/truncated
+```
+
+Import the side effectful registration of `<sp-truncated>` via:
+
+```
+import '@spectrum-web-components/truncated/sp-truncated.js';
+```
+
+When looking to leverage the `Truncated` base class as a type and/or for extension purposes, do so via:
+
+```
+import { Truncated } from '@spectrum-web-components/truncated';
+```
+
+## Example
+
+```html
+<sp-truncated>
+    This will truncate into a tooltip if there isn't enough space for it.
+</sp-truncated>
+```
+
+### With specific overflow content
+
+By default, tooltip text will be extracted from overflowing content. To provide your own overflow content, slot it into "overflow":
+
+```html
+<sp-truncated placement="right">
+    This is the inline content
+    <span slot="overflow">
+        And this overflow content will go into the tooltip, on the right
+    </span>
+</sp-truncated>
+```

package/package.json

@@ -0,0 +1,72 @@
+{
+    "name": "@spectrum-web-components/truncated",
+    "version": "0.0.0-20241209155954",
+    "publishConfig": {
+        "access": "public"
+    },
+    "description": "Web component implementation of a Spectrum design Truncated",
+    "license": "Apache-2.0",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/adobe/spectrum-web-components.git",
+        "directory": "tools/truncated"
+    },
+    "author": "",
+    "homepage": "https://adobe.github.io/spectrum-web-components/components/truncated",
+    "bugs": {
+        "url": "https://github.com/adobe/spectrum-web-components/issues"
+    },
+    "main": "src/index.js",
+    "module": "src/index.js",
+    "type": "module",
+    "exports": {
+        ".": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
+        "./package.json": "./package.json",
+        "./src/Truncated.js": {
+            "development": "./src/Truncated.dev.js",
+            "default": "./src/Truncated.js"
+        },
+        "./src/index.js": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
+        "./src/truncated.css.js": "./src/truncated.css.js",
+        "./sp-truncated": "./sp-truncated.js",
+        "./sp-truncated.js": {
+            "development": "./sp-truncated.dev.js",
+            "default": "./sp-truncated.js"
+        }
+    },
+    "scripts": {
+        "test": "echo \"Error: run tests from mono-repo root.\" && exit 1"
+    },
+    "files": [
+        "**/*.d.ts",
+        "**/*.js",
+        "**/*.js.map",
+        "custom-elements.json",
+        "!stories/",
+        "!test/"
+    ],
+    "keywords": [
+        "spectrum css",
+        "web components",
+        "lit-element",
+        "lit-html"
+    ],
+    "dependencies": {
+        "@spectrum-web-components/base": "0.0.0-20241209155954",
+        "@spectrum-web-components/overlay": "0.0.0-20241209155954",
+        "@spectrum-web-components/styles": "0.0.0-20241209155954",
+        "@spectrum-web-components/tooltip": "0.0.0-20241209155954"
+    },
+    "types": "./src/index.d.ts",
+    "customElements": "custom-elements.json",
+    "sideEffects": [
+        "./sp-*.js",
+        "./**/*.dev.js"
+    ]
+}

package/sp-truncated.d.ts

@@ -0,0 +1,6 @@
+import { Truncated } from './src/Truncated.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'sp-truncated': Truncated;
+    }
+}

package/sp-truncated.dev.js

@@ -0,0 +1,4 @@
+"use strict";
+import { Truncated } from "./src/Truncated.dev.js";
+customElements.define("sp-truncated", Truncated);
+//# sourceMappingURL=sp-truncated.dev.js.map

package/sp-truncated.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sp-truncated.ts"],
+  "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { Truncated } from './src/Truncated.dev.js'\n\ncustomElements.define('sp-truncated', Truncated);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-truncated': Truncated;\n    }\n}\n"],
+  "mappings": ";AAYA,SAAS,iBAAiB;AAE1B,eAAe,OAAO,gBAAgB,SAAS;",
+  "names": []
+}

package/sp-truncated.js

@@ -0,0 +1,2 @@
+"use strict";import{Truncated as e}from"./src/Truncated.js";customElements.define("sp-truncated",e);
+//# sourceMappingURL=sp-truncated.js.map

package/sp-truncated.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sp-truncated.ts"],
+  "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { Truncated } from './src/Truncated.js';\n\ncustomElements.define('sp-truncated', Truncated);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-truncated': Truncated;\n    }\n}\n"],
+  "mappings": "aAYA,OAAS,aAAAA,MAAiB,qBAE1B,eAAe,OAAO,eAAgBA,CAAS",
+  "names": ["Truncated"]
+}

package/src/Truncated.d.ts

@@ -0,0 +1,33 @@
+import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
+import type { Placement } from '@spectrum-web-components/overlay';
+import '@spectrum-web-components/overlay/sp-overlay.js';
+import '@spectrum-web-components/tooltip/sp-tooltip.js';
+/**
+ * @element sp-truncated
+ */
+export declare class Truncated extends SpectrumElement {
+    static get styles(): CSSResultArray;
+    /**
+     * @type {"top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end"}
+     */
+    placement: Placement;
+    successMessage: string;
+    hasCopied: boolean;
+    private fullText;
+    private overflowing;
+    private content;
+    private overlayEl?;
+    private slottedContent;
+    private slottedOverflow;
+    get hasCustomOverflow(): boolean;
+    private resizeObserver;
+    private mutationObserver;
+    render(): TemplateResult;
+    private renderTooltip;
+    protected firstUpdated(_changedProperties: PropertyValues<this>): void;
+    protected updated(changedProperties: PropertyValues<this>): void;
+    private handleOverflowSlotchange;
+    private handleClick;
+    private measureOverflow;
+    private copyText;
+}

package/src/Truncated.dev.js

@@ -0,0 +1,159 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+import {
+  html,
+  SpectrumElement
+} from "@spectrum-web-components/base";
+import "@spectrum-web-components/overlay/sp-overlay.js";
+import "@spectrum-web-components/tooltip/sp-tooltip.js";
+import {
+  property,
+  query,
+  queryAssignedElements,
+  queryAssignedNodes,
+  state
+} from "@spectrum-web-components/base/src/decorators.js";
+import styles from "./truncated.css.js";
+export class Truncated extends SpectrumElement {
+  constructor() {
+    super(...arguments);
+    this.placement = "top-start";
+    this.successMessage = "Copied to clipboard";
+    this.hasCopied = false;
+    this.fullText = "";
+    this.overflowing = false;
+    this.resizeObserver = new ResizeObserver(() => {
+      this.measureOverflow();
+    });
+    this.mutationObserver = new MutationObserver(() => {
+      this.copyText();
+    });
+  }
+  static get styles() {
+    return [styles];
+  }
+  get hasCustomOverflow() {
+    return this.slottedOverflow.length > 0;
+  }
+  render() {
+    return html`
+            <span id="content" @click=${this.handleClick}>
+                <slot></slot>
+            </span>
+            ${this.renderTooltip()}
+        `;
+  }
+  renderTooltip() {
+    if (!this.overflowing) {
+      return html`
+                <slot
+                    name="overflow"
+                    style="display: none"
+                    @slotchange=${this.handleOverflowSlotchange}
+                ></slot>
+            `;
+    }
+    return html`
+            <sp-overlay
+                id="overlay"
+                .triggerElement=${this}
+                .triggerInteraction=${"hover"}
+                type="hint"
+                placement=${this.placement}
+            >
+                <sp-tooltip name="tooltip">
+                    ${!this.hasCopied ? html`
+                              <slot
+                                  name="overflow"
+                                  @slotchange=${this.handleOverflowSlotchange}
+                              >
+                                  ${this.fullText}
+                              </slot>
+                          ` : this.successMessage}
+                </sp-tooltip>
+            </sp-overlay>
+        `;
+  }
+  firstUpdated(_changedProperties) {
+    this.resizeObserver.observe(this);
+    this.resizeObserver.observe(this.content);
+    this.copyText();
+    this.measureOverflow();
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("hasCopied") && this.hasCopied && this.overlayEl) {
+      this.overlayEl.open = true;
+    }
+  }
+  handleOverflowSlotchange() {
+    this.mutationObserver.disconnect();
+    if (!this.hasCustomOverflow) {
+      this.mutationObserver.observe(this.content, {
+        subtree: true,
+        childList: true,
+        characterData: true
+      });
+    }
+  }
+  handleClick() {
+    if (!this.overflowing) return;
+    const textToCopy = this.slottedContent.map((node) => {
+      var _a;
+      return (_a = node.textContent) != null ? _a : "";
+    }).join("").trim();
+    navigator.clipboard.writeText(textToCopy);
+    this.hasCopied = true;
+    setTimeout(() => {
+      this.hasCopied = false;
+    }, 6e3);
+  }
+  measureOverflow() {
+    this.overflowing = this.content.offsetWidth > this.clientWidth + 1;
+  }
+  // Copies just the textContent of slotted nodes into the tooltip to avoid duplicating the user's DOM
+  copyText() {
+    if (this.hasCustomOverflow) return;
+    this.fullText = this.slottedContent.map((node) => {
+      var _a;
+      return (_a = node.textContent) != null ? _a : "";
+    }).join("");
+  }
+}
+__decorateClass([
+  property()
+], Truncated.prototype, "placement", 2);
+__decorateClass([
+  property({ type: String, attribute: "success-message" })
+], Truncated.prototype, "successMessage", 2);
+__decorateClass([
+  state()
+], Truncated.prototype, "hasCopied", 2);
+__decorateClass([
+  state()
+], Truncated.prototype, "fullText", 2);
+__decorateClass([
+  state()
+], Truncated.prototype, "overflowing", 2);
+__decorateClass([
+  query("#content")
+], Truncated.prototype, "content", 2);
+__decorateClass([
+  query("#overlay")
+], Truncated.prototype, "overlayEl", 2);
+__decorateClass([
+  queryAssignedNodes({ flatten: true })
+], Truncated.prototype, "slottedContent", 2);
+__decorateClass([
+  queryAssignedElements({ slot: "overflow", flatten: true })
+], Truncated.prototype, "slottedOverflow", 2);
+//# sourceMappingURL=Truncated.dev.js.map

package/src/Truncated.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["Truncated.ts"],
+  "sourcesContent": ["/*\nCopyright 2021 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    PropertyValues,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport type { Overlay, Placement } from '@spectrum-web-components/overlay';\nimport '@spectrum-web-components/overlay/sp-overlay.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport {\n    property,\n    query,\n    queryAssignedElements,\n    queryAssignedNodes,\n    state,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport styles from './truncated.css.js';\n\n/**\n * @element sp-truncated\n */\nexport class Truncated extends SpectrumElement {\n    public static override get styles(): CSSResultArray {\n        return [styles];\n    }\n\n    /**\n     * @type {\"top\" | \"top-start\" | \"top-end\" | \"right\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left\" | \"left-start\" | \"left-end\"}\n     */\n    @property()\n    placement: Placement = 'top-start';\n\n    /*\n     * @type {String}\n     * @attr success-message\n     * @description The message to display when the text is copied to the clipboard after clicking on the truncated text\n     */\n    @property({ type: String, attribute: 'success-message' })\n    successMessage = 'Copied to clipboard';\n\n    @state()\n    hasCopied = false;\n\n    @state()\n    private fullText = '';\n\n    @state()\n    private overflowing = false;\n\n    @query('#content')\n    private content!: HTMLElement;\n\n    @query('#overlay')\n    private overlayEl?: Overlay;\n\n    @queryAssignedNodes({ flatten: true })\n    private slottedContent!: Node[];\n\n    // elements instead of nodes because, according to spec,\n    // flattened assignedNodes will return a slot's *children* if there are no assigned nodes.\n    // \u00AF\\_(\u30C4)_/\u00AF\n    @queryAssignedElements({ slot: 'overflow', flatten: true })\n    private slottedOverflow!: HTMLElement[];\n\n    get hasCustomOverflow(): boolean {\n        return this.slottedOverflow.length > 0;\n    }\n\n    private resizeObserver = new ResizeObserver(() => {\n        this.measureOverflow();\n    });\n\n    private mutationObserver = new MutationObserver(() => {\n        this.copyText();\n    });\n\n    override render(): TemplateResult {\n        /* eslint-disable lit-a11y/click-events-have-key-events */\n        return html`\n            <span id=\"content\" @click=${this.handleClick}>\n                <slot></slot>\n            </span>\n            ${this.renderTooltip()}\n        `;\n        /* eslint-enable lit-a11y/click-events-have-key-events */\n    }\n\n    private renderTooltip(): TemplateResult | undefined {\n        if (!this.overflowing) {\n            return html`\n                <slot\n                    name=\"overflow\"\n                    style=\"display: none\"\n                    @slotchange=${this.handleOverflowSlotchange}\n                ></slot>\n            `;\n        }\n        return html`\n            <sp-overlay\n                id=\"overlay\"\n                .triggerElement=${this as HTMLElement}\n                .triggerInteraction=${'hover'}\n                type=\"hint\"\n                placement=${this.placement}\n            >\n                <sp-tooltip name=\"tooltip\">\n                    ${!this.hasCopied\n                        ? html`\n                              <slot\n                                  name=\"overflow\"\n                                  @slotchange=${this.handleOverflowSlotchange}\n                              >\n                                  ${this.fullText}\n                              </slot>\n                          `\n                        : this.successMessage}\n                </sp-tooltip>\n            </sp-overlay>\n        `;\n    }\n\n    protected override firstUpdated(\n        _changedProperties: PropertyValues<this>\n    ): void {\n        this.resizeObserver.observe(this);\n        this.resizeObserver.observe(this.content);\n        this.copyText();\n        this.measureOverflow();\n    }\n\n    protected override updated(changedProperties: PropertyValues<this>): void {\n        super.updated(changedProperties);\n        if (\n            changedProperties.has('hasCopied') &&\n            this.hasCopied &&\n            this.overlayEl\n        ) {\n            // we know overlayEl exists because it couldn't copy the text otherwise\n            this.overlayEl.open = true;\n        }\n    }\n\n    private handleOverflowSlotchange(): void {\n        this.mutationObserver.disconnect();\n        if (!this.hasCustomOverflow) {\n            /* c8 ignore next 5 */\n            this.mutationObserver.observe(this.content, {\n                subtree: true,\n                childList: true,\n                characterData: true,\n            });\n        }\n    }\n\n    private handleClick(): void {\n        if (!this.overflowing) return;\n\n        const textToCopy = this.slottedContent\n            .map((node) => node.textContent ?? '')\n            .join('')\n            .trim();\n        navigator.clipboard.writeText(textToCopy);\n        this.hasCopied = true;\n        /* c8 ignore next 3 */\n        setTimeout(() => {\n            this.hasCopied = false;\n        }, 6000);\n    }\n\n    private measureOverflow(): void {\n        // Add 1 because Safari sometimes rounds by 1px, breaking the calculation otherwise\n        this.overflowing = this.content.offsetWidth > this.clientWidth + 1;\n    }\n\n    // Copies just the textContent of slotted nodes into the tooltip to avoid duplicating the user's DOM\n    private copyText(): void {\n        if (this.hasCustomOverflow) return;\n        this.fullText = this.slottedContent\n            .map((node) => node.textContent ?? '')\n            .join('');\n    }\n}\n"],
+  "mappings": ";;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,EAEA;AAAA,OAEG;AAEP,OAAO;AACP,OAAO;AACP;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACG;AAEP,OAAO,YAAY;AAKZ,aAAM,kBAAkB,gBAAgB;AAAA,EAAxC;AAAA;AASH,qBAAuB;AAQvB,0BAAiB;AAGjB,qBAAY;AAGZ,SAAQ,WAAW;AAGnB,SAAQ,cAAc;AAqBtB,SAAQ,iBAAiB,IAAI,eAAe,MAAM;AAC9C,WAAK,gBAAgB;AAAA,IACzB,CAAC;AAED,SAAQ,mBAAmB,IAAI,iBAAiB,MAAM;AAClD,WAAK,SAAS;AAAA,IAClB,CAAC;AAAA;AAAA,EApDD,WAA2B,SAAyB;AAChD,WAAO,CAAC,MAAM;AAAA,EAClB;AAAA,EAwCA,IAAI,oBAA6B;AAC7B,WAAO,KAAK,gBAAgB,SAAS;AAAA,EACzC;AAAA,EAUS,SAAyB;AAE9B,WAAO;AAAA,wCACyB,KAAK,WAAW;AAAA;AAAA;AAAA,cAG1C,KAAK,cAAc,CAAC;AAAA;AAAA,EAG9B;AAAA,EAEQ,gBAA4C;AAChD,QAAI,CAAC,KAAK,aAAa;AACnB,aAAO;AAAA;AAAA;AAAA;AAAA,kCAIe,KAAK,wBAAwB;AAAA;AAAA;AAAA,IAGvD;AACA,WAAO;AAAA;AAAA;AAAA,kCAGmB,IAAmB;AAAA,sCACf,OAAO;AAAA;AAAA,4BAEjB,KAAK,SAAS;AAAA;AAAA;AAAA,sBAGpB,CAAC,KAAK,YACF;AAAA;AAAA;AAAA,gDAGsB,KAAK,wBAAwB;AAAA;AAAA,oCAEzC,KAAK,QAAQ;AAAA;AAAA,8BAGvB,KAAK,cAAc;AAAA;AAAA;AAAA;AAAA,EAIzC;AAAA,EAEmB,aACf,oBACI;AACJ,SAAK,eAAe,QAAQ,IAAI;AAChC,SAAK,eAAe,QAAQ,KAAK,OAAO;AACxC,SAAK,SAAS;AACd,SAAK,gBAAgB;AAAA,EACzB;AAAA,EAEmB,QAAQ,mBAA+C;AACtE,UAAM,QAAQ,iBAAiB;AAC/B,QACI,kBAAkB,IAAI,WAAW,KACjC,KAAK,aACL,KAAK,WACP;AAEE,WAAK,UAAU,OAAO;AAAA,IAC1B;AAAA,EACJ;AAAA,EAEQ,2BAAiC;AACrC,SAAK,iBAAiB,WAAW;AACjC,QAAI,CAAC,KAAK,mBAAmB;AAEzB,WAAK,iBAAiB,QAAQ,KAAK,SAAS;AAAA,QACxC,SAAS;AAAA,QACT,WAAW;AAAA,QACX,eAAe;AAAA,MACnB,CAAC;AAAA,IACL;AAAA,EACJ;AAAA,EAEQ,cAAoB;AACxB,QAAI,CAAC,KAAK,YAAa;AAEvB,UAAM,aAAa,KAAK,eACnB,IAAI,CAAC,SAAM;AA5KxB;AA4K2B,wBAAK,gBAAL,YAAoB;AAAA,KAAE,EACpC,KAAK,EAAE,EACP,KAAK;AACV,cAAU,UAAU,UAAU,UAAU;AACxC,SAAK,YAAY;AAEjB,eAAW,MAAM;AACb,WAAK,YAAY;AAAA,IACrB,GAAG,GAAI;AAAA,EACX;AAAA,EAEQ,kBAAwB;AAE5B,SAAK,cAAc,KAAK,QAAQ,cAAc,KAAK,cAAc;AAAA,EACrE;AAAA;AAAA,EAGQ,WAAiB;AACrB,QAAI,KAAK,kBAAmB;AAC5B,SAAK,WAAW,KAAK,eAChB,IAAI,CAAC,SAAM;AAhMxB;AAgM2B,wBAAK,gBAAL,YAAoB;AAAA,KAAE,EACpC,KAAK,EAAE;AAAA,EAChB;AACJ;AAvJI;AAAA,EADC,SAAS;AAAA,GARD,UAST;AAQA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,kBAAkB,CAAC;AAAA,GAhB/C,UAiBT;AAGA;AAAA,EADC,MAAM;AAAA,GAnBE,UAoBT;AAGQ;AAAA,EADP,MAAM;AAAA,GAtBE,UAuBD;AAGA;AAAA,EADP,MAAM;AAAA,GAzBE,UA0BD;AAGA;AAAA,EADP,MAAM,UAAU;AAAA,GA5BR,UA6BD;AAGA;AAAA,EADP,MAAM,UAAU;AAAA,GA/BR,UAgCD;AAGA;AAAA,EADP,mBAAmB,EAAE,SAAS,KAAK,CAAC;AAAA,GAlC5B,UAmCD;AAMA;AAAA,EADP,sBAAsB,EAAE,MAAM,YAAY,SAAS,KAAK,CAAC;AAAA,GAxCjD,UAyCD;",
+  "names": []
+}

package/src/Truncated.js

@@ -0,0 +1,32 @@
+"use strict";var d=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var s=(l,o,e,r)=>{for(var t=r>1?void 0:r?m(o,e):o,a=l.length-1,n;a>=0;a--)(n=l[a])&&(t=(r?n(o,e,t):n(t))||t);return r&&t&&d(o,e,t),t};import{html as i,SpectrumElement as u}from"@spectrum-web-components/base";import"@spectrum-web-components/overlay/sp-overlay.js";import"@spectrum-web-components/tooltip/sp-tooltip.js";import{property as h,query as v,queryAssignedElements as c,queryAssignedNodes as f,state as p}from"@spectrum-web-components/base/src/decorators.js";import y from"./truncated.css.js";export class Truncated extends u{constructor(){super(...arguments);this.placement="top-start";this.successMessage="Copied to clipboard";this.hasCopied=!1;this.fullText="";this.overflowing=!1;this.resizeObserver=new ResizeObserver(()=>{this.measureOverflow()});this.mutationObserver=new MutationObserver(()=>{this.copyText()})}static get styles(){return[y]}get hasCustomOverflow(){return this.slottedOverflow.length>0}render(){return i`
+            <span id="content" @click=${this.handleClick}>
+                <slot></slot>
+            </span>
+            ${this.renderTooltip()}
+        `}renderTooltip(){return this.overflowing?i`
+            <sp-overlay
+                id="overlay"
+                .triggerElement=${this}
+                .triggerInteraction=${"hover"}
+                type="hint"
+                placement=${this.placement}
+            >
+                <sp-tooltip name="tooltip">
+                    ${this.hasCopied?this.successMessage:i`
+                              <slot
+                                  name="overflow"
+                                  @slotchange=${this.handleOverflowSlotchange}
+                              >
+                                  ${this.fullText}
+                              </slot>
+                          `}
+                </sp-tooltip>
+            </sp-overlay>
+        `:i`
+                <slot
+                    name="overflow"
+                    style="display: none"
+                    @slotchange=${this.handleOverflowSlotchange}
+                ></slot>
+            `}firstUpdated(e){this.resizeObserver.observe(this),this.resizeObserver.observe(this.content),this.copyText(),this.measureOverflow()}updated(e){super.updated(e),e.has("hasCopied")&&this.hasCopied&&this.overlayEl&&(this.overlayEl.open=!0)}handleOverflowSlotchange(){this.mutationObserver.disconnect(),this.hasCustomOverflow||this.mutationObserver.observe(this.content,{subtree:!0,childList:!0,characterData:!0})}handleClick(){if(!this.overflowing)return;const e=this.slottedContent.map(r=>{var t;return(t=r.textContent)!=null?t:""}).join("").trim();navigator.clipboard.writeText(e),this.hasCopied=!0,setTimeout(()=>{this.hasCopied=!1},6e3)}measureOverflow(){this.overflowing=this.content.offsetWidth>this.clientWidth+1}copyText(){this.hasCustomOverflow||(this.fullText=this.slottedContent.map(e=>{var r;return(r=e.textContent)!=null?r:""}).join(""))}}s([h()],Truncated.prototype,"placement",2),s([h({type:String,attribute:"success-message"})],Truncated.prototype,"successMessage",2),s([p()],Truncated.prototype,"hasCopied",2),s([p()],Truncated.prototype,"fullText",2),s([p()],Truncated.prototype,"overflowing",2),s([v("#content")],Truncated.prototype,"content",2),s([v("#overlay")],Truncated.prototype,"overlayEl",2),s([f({flatten:!0})],Truncated.prototype,"slottedContent",2),s([c({slot:"overflow",flatten:!0})],Truncated.prototype,"slottedOverflow",2);
+//# sourceMappingURL=Truncated.js.map

package/src/Truncated.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["Truncated.ts"],
+  "sourcesContent": ["/*\nCopyright 2021 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    PropertyValues,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport type { Overlay, Placement } from '@spectrum-web-components/overlay';\nimport '@spectrum-web-components/overlay/sp-overlay.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport {\n    property,\n    query,\n    queryAssignedElements,\n    queryAssignedNodes,\n    state,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport styles from './truncated.css.js';\n\n/**\n * @element sp-truncated\n */\nexport class Truncated extends SpectrumElement {\n    public static override get styles(): CSSResultArray {\n        return [styles];\n    }\n\n    /**\n     * @type {\"top\" | \"top-start\" | \"top-end\" | \"right\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left\" | \"left-start\" | \"left-end\"}\n     */\n    @property()\n    placement: Placement = 'top-start';\n\n    /*\n     * @type {String}\n     * @attr success-message\n     * @description The message to display when the text is copied to the clipboard after clicking on the truncated text\n     */\n    @property({ type: String, attribute: 'success-message' })\n    successMessage = 'Copied to clipboard';\n\n    @state()\n    hasCopied = false;\n\n    @state()\n    private fullText = '';\n\n    @state()\n    private overflowing = false;\n\n    @query('#content')\n    private content!: HTMLElement;\n\n    @query('#overlay')\n    private overlayEl?: Overlay;\n\n    @queryAssignedNodes({ flatten: true })\n    private slottedContent!: Node[];\n\n    // elements instead of nodes because, according to spec,\n    // flattened assignedNodes will return a slot's *children* if there are no assigned nodes.\n    // \u00AF\\_(\u30C4)_/\u00AF\n    @queryAssignedElements({ slot: 'overflow', flatten: true })\n    private slottedOverflow!: HTMLElement[];\n\n    get hasCustomOverflow(): boolean {\n        return this.slottedOverflow.length > 0;\n    }\n\n    private resizeObserver = new ResizeObserver(() => {\n        this.measureOverflow();\n    });\n\n    private mutationObserver = new MutationObserver(() => {\n        this.copyText();\n    });\n\n    override render(): TemplateResult {\n        /* eslint-disable lit-a11y/click-events-have-key-events */\n        return html`\n            <span id=\"content\" @click=${this.handleClick}>\n                <slot></slot>\n            </span>\n            ${this.renderTooltip()}\n        `;\n        /* eslint-enable lit-a11y/click-events-have-key-events */\n    }\n\n    private renderTooltip(): TemplateResult | undefined {\n        if (!this.overflowing) {\n            return html`\n                <slot\n                    name=\"overflow\"\n                    style=\"display: none\"\n                    @slotchange=${this.handleOverflowSlotchange}\n                ></slot>\n            `;\n        }\n        return html`\n            <sp-overlay\n                id=\"overlay\"\n                .triggerElement=${this as HTMLElement}\n                .triggerInteraction=${'hover'}\n                type=\"hint\"\n                placement=${this.placement}\n            >\n                <sp-tooltip name=\"tooltip\">\n                    ${!this.hasCopied\n                        ? html`\n                              <slot\n                                  name=\"overflow\"\n                                  @slotchange=${this.handleOverflowSlotchange}\n                              >\n                                  ${this.fullText}\n                              </slot>\n                          `\n                        : this.successMessage}\n                </sp-tooltip>\n            </sp-overlay>\n        `;\n    }\n\n    protected override firstUpdated(\n        _changedProperties: PropertyValues<this>\n    ): void {\n        this.resizeObserver.observe(this);\n        this.resizeObserver.observe(this.content);\n        this.copyText();\n        this.measureOverflow();\n    }\n\n    protected override updated(changedProperties: PropertyValues<this>): void {\n        super.updated(changedProperties);\n        if (\n            changedProperties.has('hasCopied') &&\n            this.hasCopied &&\n            this.overlayEl\n        ) {\n            // we know overlayEl exists because it couldn't copy the text otherwise\n            this.overlayEl.open = true;\n        }\n    }\n\n    private handleOverflowSlotchange(): void {\n        this.mutationObserver.disconnect();\n        if (!this.hasCustomOverflow) {\n            /* c8 ignore next 5 */\n            this.mutationObserver.observe(this.content, {\n                subtree: true,\n                childList: true,\n                characterData: true,\n            });\n        }\n    }\n\n    private handleClick(): void {\n        if (!this.overflowing) return;\n\n        const textToCopy = this.slottedContent\n            .map((node) => node.textContent ?? '')\n            .join('')\n            .trim();\n        navigator.clipboard.writeText(textToCopy);\n        this.hasCopied = true;\n        /* c8 ignore next 3 */\n        setTimeout(() => {\n            this.hasCopied = false;\n        }, 6000);\n    }\n\n    private measureOverflow(): void {\n        // Add 1 because Safari sometimes rounds by 1px, breaking the calculation otherwise\n        this.overflowing = this.content.offsetWidth > this.clientWidth + 1;\n    }\n\n    // Copies just the textContent of slotted nodes into the tooltip to avoid duplicating the user's DOM\n    private copyText(): void {\n        if (this.hasCustomOverflow) return;\n        this.fullText = this.slottedContent\n            .map((node) => node.textContent ?? '')\n            .join('');\n    }\n}\n"],
+  "mappings": "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",
+  "names": ["html", "SpectrumElement", "property", "query", "queryAssignedElements", "queryAssignedNodes", "state", "styles", "_changedProperties", "changedProperties", "textToCopy", "node", "_a", "__decorateClass"]
+}

package/src/index.d.ts

@@ -0,0 +1 @@
+export * from './Truncated.js';

package/src/index.dev.js

@@ -0,0 +1,3 @@
+"use strict";
+export * from "./Truncated.dev.js";
+//# sourceMappingURL=index.dev.js.map

package/src/index.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["index.ts"],
+  "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nexport * from './Truncated.dev.js'\n"],
+  "mappings": ";AAWA,cAAc;",
+  "names": []
+}

package/src/index.js

@@ -0,0 +1,2 @@
+"use strict";export*from"./Truncated.js";
+//# sourceMappingURL=index.js.map

package/src/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["index.ts"],
+  "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nexport * from './Truncated.js';\n"],
+  "mappings": "aAWA,WAAc",
+  "names": []
+}

package/src/truncated.css.d.ts

@@ -0,0 +1,2 @@
+declare const styles: import("@spectrum-web-components/base").CSSResult;
+export default styles;

package/src/truncated.css.dev.js

@@ -0,0 +1,7 @@
+"use strict";
+import { css } from "@spectrum-web-components/base";
+const styles = css`
+    :host{min-width:0;max-width:100%;white-space:nowrap;text-overflow:ellipsis;display:inline-block;overflow:hidden}
+`;
+export default styles;
+//# sourceMappingURL=truncated.css.dev.js.map

package/src/truncated.css.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["truncated.css.ts"],
+  "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n    :host{min-width:0;max-width:100%;white-space:nowrap;text-overflow:ellipsis;display:inline-block;overflow:hidden}\n`;\nexport default styles;"],
+  "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
+  "names": []
+}

package/src/truncated.css.js

@@ -0,0 +1,4 @@
+"use strict";import{css as e}from"@spectrum-web-components/base";const i=e`
+    :host{min-width:0;max-width:100%;white-space:nowrap;text-overflow:ellipsis;display:inline-block;overflow:hidden}
+`;export default i;
+//# sourceMappingURL=truncated.css.js.map

package/src/truncated.css.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["truncated.css.ts"],
+  "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n    :host{min-width:0;max-width:100%;white-space:nowrap;text-overflow:ellipsis;display:inline-block;overflow:hidden}\n`;\nexport default styles;"],
+  "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
+  "names": ["css", "styles"]
+}