import { HeadingTag } from "../../../globals/HeadingTag";
import { h, Host, } from "@stencil/core";
/** A short description about `pn-versa-card` */
export class PnVersaCard {
    constructor() {
        this.label = undefined;
        this.heading = undefined;
        this.preamble = undefined;
        this.imageGrow = false;
        this.horizontal = false;
        this.imgAlignment = 'left';
        this.hasImageCover = false;
        this.alignMiddle = false;
        this.center = false;
        this.roundImage = false;
        this.headingLevel = 'h3';
        this.opacity = 90;
        this.transparentBackground = false;
        this.showImage = false;
        this.showRte = false;
        this.showCta = false;
    }
    hostElement;
    cx(parts) {
        return parts.filter(Boolean).join(' ');
    }
    get hasImageCoverText() {
        return !!(this.label || this.heading || this.preamble || this.showRte || this.showCta);
    }
    get normalizedOpacity() {
        return Math.min(100, Math.max(0, this.opacity ?? 90));
    }
    // This getter reads the data-card-color attribute, which is used to set CSS variables for background and text colors in the SCSS file. It returns the color value or null if not set.
    get cardColor() {
        const value = this.hostElement.getAttribute('data-card-color')?.trim().toLowerCase();
        return value || null;
    }
    get hasBg() {
        return !!this.cardColor;
    }
    get cardClass() {
        return this.cx([
            'pn-versa-card',
            // modifiers      
            this.horizontal && 'pn-versa-card-horizontal',
            this.horizontal && this.imgAlignment === 'right' && 'pn-versa-card-horizontal--imgRight',
            this.hasBg && 'pn-versa-card-hasBg',
            this.hasImageCover && 'pn-versa-card-hasImageCover', // can be true without text, just means image covers whole card without text on top
            this.hasImageCover && this.hasImageCoverText && 'pn-versa-card-hasImageCoverText', //has to have imageCover true AND imageCoverText in order for class to be set
            this.roundImage && 'pn-versa-card-hasRoundedImage',
            this.center && 'pn-versa-card-center',
            this.alignMiddle && 'pn-versa-card-alignMiddle',
            this.imageGrow && 'pn-versa-card-imageGrow',
            this.hasBg && this.transparentBackground && 'pn-versa-card-transparentBackground',
        ]);
    }
    get showContent() {
        return this.showTextContent || this.showCta;
    }
    get showTextContent() {
        return !!(this.label || this.heading || this.preamble || this.showRte);
    }
    componentWillLoad() {
        this.showImage = !!this.hostElement.querySelector('[slot="image"]');
        this.showRte = !!this.hostElement.querySelector('[slot="rte"]');
        this.showCta = !!this.hostElement.querySelector('[slot="cta"]');
    }
    render() {
        return (h(Host, { key: '68795fe8f1d2c350e5a75587f4f3a4c5c7aa36c9' }, h("div", { key: '56ed337bc840a49cb2cabac58296816a863476d0', class: this.cardClass, style: { '--pn-versa-opacity': `${this.normalizedOpacity / 100}` } }, this.showImage && (h("div", { key: '819b335ef80afc4a7acdcdc4b8de3aa778f5848b', class: "pn-versa-card-imageWrapper" }, h("slot", { key: '29ec92758424d1ab78ec647a88960b30ef831296', name: "image" }))), this.showContent && (h("div", { key: '52f708312839f2026574e4c26e4d5cc7dd19d9c7', class: "pn-versa-card-content" }, this.showTextContent && h("div", { key: 'f945d3960dab715386493f01d798d81eec49f47d', class: "pn-versa-card-textContent" }, this.label && (h("span", { key: 'acf5de375907dbf4699d450cd8f358a68475808d', class: "pn-versa-card-label" }, this.label)), this.heading && (h(HeadingTag, { key: 'e2cdc9c1662c77184010fc6a5179b47959a637e9', cssClass: "pn-versa-card-heading", level: this.headingLevel }, this.heading)), this.preamble && (h("p", { key: '82c6e264660a5acc5227f9db0f0a7c5777e37d83', class: "pn-versa-card-preamble" }, this.preamble)), this.showRte && h("div", { key: '1025d88c618f24e63d8b75cf3fb62262d98015e0', class: "pn-versa-card-RTEtext" }, h("slot", { key: 'ec7cadcd2950cdb5d697f1bdd059d5ece1473168', name: "rte" }))), this.showCta && h("div", { key: '7ae363ccac0b3ea35559c97d0a45b8629c8c310e', class: "pn-versa-card-linkwrapper" }, h("slot", { key: 'e0d30dd052fab2dd5a3af805f67628b26e71750b', name: "cta" })))))));
    }
    static get is() { return "pn-versa-card"; }
    static get originalStyleUrls() {
        return {
            "$": ["pn-versa-card.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pn-versa-card.css"]
        };
    }
    static get properties() {
        return {
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "label",
                "reflect": false
            },
            "heading": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "heading",
                "reflect": false
            },
            "preamble": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "preamble",
                "reflect": false
            },
            "imageGrow": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "image-grow",
                "reflect": false,
                "defaultValue": "false"
            },
            "horizontal": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "horizontal",
                "reflect": false,
                "defaultValue": "false"
            },
            "imgAlignment": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'left' | 'right'",
                    "resolved": "\"left\" | \"right\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "img-alignment",
                "reflect": false,
                "defaultValue": "'left'"
            },
            "hasImageCover": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "has-image-cover",
                "reflect": false,
                "defaultValue": "false"
            },
            "alignMiddle": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "align-middle",
                "reflect": false,
                "defaultValue": "false"
            },
            "center": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "center",
                "reflect": false,
                "defaultValue": "false"
            },
            "roundImage": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "round-image",
                "reflect": false,
                "defaultValue": "false"
            },
            "headingLevel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'",
                    "resolved": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "heading-level",
                "reflect": false,
                "defaultValue": "'h3'"
            },
            "opacity": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "opacity",
                "reflect": false,
                "defaultValue": "90"
            },
            "transparentBackground": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "transparent-background",
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "showImage": {},
            "showRte": {},
            "showCta": {}
        };
    }
    static get elementRef() { return "hostElement"; }
}
//# sourceMappingURL=pn-versa-card.js.map
