import { h } from "@stencil/core";
import classNames from "classnames";
import { DataTestIdsEnum } from "../../../constants/dataTestIds.enum";
import { ELLIPSIS } from "../../../constants/htmlStrings";
export class TrimText {
    constructor() {
        this.overflow = false;
        this.checkOverflow = () => {
            if (this.hiddenTextRef && this.trimRef) {
                const hiddenWidth = this.hiddenTextRef.offsetWidth;
                const containerWidth = this.trimRef.offsetWidth;
                // Batch state updates to minimize re-renders
                if (this.overflow !== hiddenWidth > containerWidth) {
                    this.overflow = hiddenWidth > containerWidth;
                }
            }
        };
    }
    componentDidLoad() {
        this.setupResizeObserver();
        // Initial check after DOM elements exist
        requestAnimationFrame(() => this.checkOverflow());
    }
    disconnectedCallback() {
        var _a;
        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
    }
    setupResizeObserver() {
        this.resizeObserver = new ResizeObserver(() => {
            this.checkOverflow();
        });
        if (this.trimRef) {
            this.resizeObserver.observe(this.trimRef);
        }
    }
    render() {
        var _a;
        const trimmedText = this.getTrimmedText();
        return (h("span", { key: 'ac93b04c526cdd459d2d8fbde47f8c92c0972962', ref: el => (this.trimRef = el), class: classNames('trim', this.class, { overflow: this.overflow }), "data-testid": (_a = this.dataTestId) !== null && _a !== void 0 ? _a : DataTestIdsEnum.trim }, h("span", { key: '910754779290a8d1468a03a48bc00a797173f940', ref: el => (this.hiddenTextRef = el), class: "hidden-text-ref" }, this.text), this.overflow ? (h("div", { class: "trim-wrapper" }, h("span", { class: "left" }, h("span", null, trimmedText.left)), h("span", { class: "ellipsis" }, ELLIPSIS), h("span", { class: "right" }, h("span", null, trimmedText.right)))) : (h("span", null, this.text))));
    }
    getTrimmedText() {
        const middleIndex = Math.floor(this.text.length / 2);
        return {
            left: this.text.slice(0, middleIndex),
            right: this.text.slice(middleIndex),
        };
    }
    static get is() { return "trim-text"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["trim-text.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["trim-text.css"]
        };
    }
    static get properties() {
        return {
            "text": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "text",
                "reflect": false
            },
            "class": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "class",
                "reflect": false
            },
            "dataTestId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "data-test-id",
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "overflow": {}
        };
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=trim-text.js.map
