import { h } from "@stencil/core";
import { setColor } from "../../utils/utils";
import { setupTruncationTooltip } from "../../utils/truncation-tooltip";
/**
 * @part content - The text content container
 */
export class PdsText {
    constructor() {
        this.truncationCleanup = null;
        /**
         * Determines what semantic text tag to render.
         */
        this.tag = 'p';
    }
    handleTruncateChange(newValue) {
        if (newValue) {
            this.initTruncationTooltip();
        }
        else {
            this.destroyTruncationTooltip();
        }
    }
    componentDidLoad() {
        if (this.truncate) {
            this.initTruncationTooltip();
        }
    }
    disconnectedCallback() {
        this.destroyTruncationTooltip();
    }
    initTruncationTooltip() {
        // Clean up any existing tooltip before setting up a new one
        this.destroyTruncationTooltip();
        if (this.contentEl) {
            this.truncationCleanup = setupTruncationTooltip({
                hostEl: this.el,
                contentEl: this.contentEl,
                getTooltipText: () => this.el.textContent || '',
            });
        }
    }
    destroyTruncationTooltip() {
        if (this.truncationCleanup) {
            this.truncationCleanup();
            this.truncationCleanup = null;
        }
    }
    render() {
        const Tag = this.tag;
        const typeClasses = `
      pds-text
      ${this.align !== undefined && this.align.trim() !== ''
            ? `pds-text--align-${this.align}`
            : ''}
      ${this.gutter !== undefined && this.gutter.trim() !== ''
            ? `pds-text--gutter-${this.gutter}`
            : ''}
      ${this.size !== undefined && this.size.trim() !== ''
            ? `pds-text--size-${this.size}`
            : ''}
      ${this.weight !== undefined && this.weight.trim() !== ''
            ? `pds-text--weight-${this.weight}`
            : ''}
      ${this.decoration !== undefined && this.decoration.trim() !== ''
            ? `pds-text--decoration-${this.decoration}`
            : ''}
    `;
        return (h(Tag, { key: '1d4952d18c09b26a5f2c7f64574be86c90cca553', ref: (el) => (this.contentEl = el), style: this.color && setColor(this.color), class: typeClasses, part: "content", tabIndex: this.truncate ? 0 : undefined }, h("slot", { key: '62a5caff5274601b79f35025c9382e2430118cdc' })));
    }
    static get is() { return "pds-text"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["pds-text.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pds-text.css"]
        };
    }
    static get properties() {
        return {
            "align": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'start' | 'center' | 'end' | 'justify'",
                    "resolved": "\"center\" | \"end\" | \"justify\" | \"start\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Sets the text alignment."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "align"
            },
            "color": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Sets the text color."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "color"
            },
            "decoration": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'strikethrough' | 'underline-dotted'",
                    "resolved": "\"strikethrough\" | \"underline-dotted\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Sets the text decoration."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "decoration"
            },
            "gutter": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | '2xs'",
                    "resolved": "\"2xl\" | \"2xs\" | \"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Set the bottom margin for the text."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "gutter"
            },
            "italic": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If set or `true`, the text will be italic."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "italic"
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "| '2xl'\n    | 'xl'\n    | 'lg'\n    | 'md'\n    | 'sm'\n    | 'xs'\n    | '2xs'\n    | 'h1'\n    | 'h2'\n    | 'h3'\n    | 'h4'\n    | 'h5'\n    | 'h6'",
                    "resolved": "\"2xl\" | \"2xs\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Sets the font size."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "size"
            },
            "weight": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "| 'extra-light'\n    | 'light'\n    | 'regular'\n    | 'medium'\n    | 'semibold'\n    | 'bold'",
                    "resolved": "\"bold\" | \"extra-light\" | \"light\" | \"medium\" | \"regular\" | \"semibold\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Sets the font weight."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "weight"
            },
            "tag": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "| 'h1'\n    | 'h2'\n    | 'h3'\n    | 'h4'\n    | 'h5'\n    | 'h6'\n    | 'p'\n    | 'span'\n    | 'code'\n    | 'pre'\n    | 'strong'\n    | 'em'",
                    "resolved": "\"code\" | \"em\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"p\" | \"pre\" | \"span\" | \"strong\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Determines what semantic text tag to render."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "tag",
                "defaultValue": "'p'"
            },
            "truncate": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If set or `true`, the text will be truncated. Must add a `width` to the element.\nWhen text overflows, a tooltip showing the full text will appear on hover/focus.\nNote: When truncate is enabled, the element automatically receives tabindex=\"0\" for keyboard accessibility."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "truncate"
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "truncate",
                "methodName": "handleTruncateChange"
            }];
    }
}
//# sourceMappingURL=pds-text.js.map
