/*!
 * Built with Stencil
 * By PostNord.
 */
import { Host, h } from "@stencil/core";
import { arrow_right, open_in_new } from "pn-design-assets/pn-assets/icons.js";
import { ripple, uuidv4 } from "../../../index";
/**
 * The card component is more than just a navigational element.
 * It is a flexible component that can be used as a product item, a clickable link card, etc...
 *
 * Setting the `href` prop will transform the entire `pn-card` into a clickable element.
 * If you need content to be interactable inside the card, do not use the `href` prop.
 *
 * @slot - The default slot is the primary content of the card. This is the same area where the `text` prop is located.
 * @slot image - Set a custom image/svg/illustration. Simply use an `img` tag with the slot "image".
 * @slot tags - Add `pn-tags` that will be positioned above the `label` and `overline` if used.
 * @slot header - The header content, same area that the `label` and `overline` props will appear.
 * @slot navigation - This slot is intended for one or more `pn-button` components.
 * Only use **without** the `href` prop. Having both at the same time makes the component inaccessible.
 *
 * @since v7.12.0
 */
export class PnCard {
    id = `pn-card-${uuidv4()}`;
    idTitle = `${this.id}-title`;
    visibleOutline = false;
    hostElement;
    /** Headline of the card. Will act as label for the link if there is no `href-label` set. */
    label;
    /** The label HTML tag. Default is `h3`. */
    labelTag = 'h3';
    /** Set a smaller text above the `label` text. */
    overline;
    /** Text content of the card. */
    text;
    /** Set a HTML id for the card. Optional and not required. */
    cardId = null;
    /**
     * Uee the horizontal card layout.
     * @category Features
     * */
    horizontal = false;
    /** Reverse the order of which the image will wrap. @category Features */
    reverse = false;
    /**
     * Select image aspect ratio. Example: '3/3', '16/9'.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio CSS documentation.}
     * @category Features
     * */
    aspectRatio = '';
    /** The card link. @category Href */
    href;
    /** The link text. @category Href */
    hrefLabel;
    /** The target attribute of the link. @category Href */
    target;
    /** The rel attribute of the link. @category Href */
    rel = 'noopener noreferrer';
    /** The link icon. Defaults to `arrow_right` or `open_in_new` if `target="_blank"`. @category Href */
    icon = null;
    watchCardId() {
        const id = this.cardId || this.id;
        this.idTitle = `${id}-title`;
    }
    /** Emitted when you click on the card link (if you use the `href` prop). */
    pnCard;
    componentWillLoad() {
        this.watchCardId();
    }
    isExternal() {
        return this.target === '_blank';
    }
    showTitle() {
        return !!this.label;
    }
    showHref() {
        return !!this.href && (this.hrefLabel || this.showTitle());
    }
    getTitleId() {
        return this.hrefLabel ? null : this.idTitle;
    }
    getLabelledby() {
        return this.hrefLabel ? null : this.showTitle() ? this.idTitle : null;
    }
    getIcon() {
        if (!!this.icon)
            return this.icon;
        return this.isExternal() ? open_in_new : arrow_right;
    }
    getHeadingTag() {
        const tags = ['h2', 'h3', 'h4', 'h5', 'h6', 'p'];
        return tags.includes(this.labelTag) ? this.labelTag : 'h3';
    }
    handleFocus({ type, target }) {
        this.visibleOutline = type === 'focus' && target.matches(':focus-visible');
    }
    handleClick(event) {
        ripple(event, this.hostElement, '.pn-card');
        this.pnCard.emit({ click: event });
    }
    render() {
        const TitleTag = this.getHeadingTag();
        return (h(Host, { key: '66bfbab30790857e909606b687989d845eef9c42' }, h("article", { key: 'eb3d30790de5f65da87dc40731b81fb9120c88db', id: this.cardId, class: "pn-card", "data-link": !!this.href, "data-horizontal": this.horizontal, "data-reverse": this.reverse, "data-focus": this.visibleOutline }, h("div", { key: '626daade06dd8b45c47e58cd5fbcef0322e3398f', class: "pn-card-image" }, h("picture", { key: '5f0539bf93afe3a8070c4e31bcabcd6e09f6cd5b', class: "pn-card-picture", style: { '--pn-card-aspect-ratio': this.aspectRatio || 'unset' } }, h("slot", { key: 'ead1ab12ad886e48daf022a26afc0deb29998d9e', name: "image" }))), h("div", { key: '79b1e1dcf658daf770ef2038770ad36d827d61fb', class: "pn-card-content" }, h("header", { key: '9b122547f47bace150f3dd17ccbe0ffe17a499b7', class: "pn-card-header" }, h("div", { key: 'eff03ae597d4d47ec6ef78634b9f1e3b3c65d420', class: "pn-card-tags" }, h("slot", { key: 'bce8ed2e135c2f7575923678477c278c82b26664', name: "tags" })), !!this.overline && h("p", { key: '4c5012ffa0d5e4054be3dc99fea4fd3d2d2e4383', class: "pn-card-label-overline" }, this.overline), !!this.label && (h(TitleTag, { key: 'a1a2a9ce01834943f3909a95dd4ac9c12c62fcc5', id: this.getTitleId(), class: "pn-card-label" }, this.label)), h("slot", { key: '7e231155db5155d5d4a5a272f845c6822235bb54', name: "header" })), h("section", { key: '118b273cd31a00de1fd16ee297bb206a33e7f977', class: "pn-card-section" }, !!this.text && h("p", { key: '66addec056571f3b511718cc8a4a60f64c3ac62b', class: "pn-card-section-paragraph" }, this.text), h("slot", { key: 'f9ec7149a4e48f59143b81470677be0b24791c8e' })), h("nav", { key: 'bb0ea19f4db135fd1b32496e167b67358df6ada8', class: "pn-card-navigation" }, this.showHref() && (h("a", { key: '182c9afcbb00b56c16b53ad15f12449e5feaf11a', class: "pn-card-link", href: this.href, target: this.target, rel: this.rel, "aria-labelledby": this.getLabelledby(), onClick: event => this.handleClick(event), onFocus: event => this.handleFocus(event), onBlur: event => this.handleFocus(event) }, this.hrefLabel, h("pn-icon", { key: '50ed52dbc3fd815c9d7b37542ad566a607e43da3', color: "blue700", icon: this.getIcon() }))), h("slot", { key: '6204a8a4944a85d522b4522352f67e73bc52792a', name: "navigation" }))))));
    }
    static get is() { return "pn-card"; }
    static get originalStyleUrls() {
        return {
            "$": ["pn-card.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pn-card.css"]
        };
    }
    static get properties() {
        return {
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Headline of the card. Will act as label for the link if there is no `href-label` set."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "label"
            },
            "labelTag": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p'",
                    "resolved": "\"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"p\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The label HTML tag. Default is `h3`."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "label-tag",
                "defaultValue": "'h3'"
            },
            "overline": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Set a smaller text above the `label` text."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "overline"
            },
            "text": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Text content of the card."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "text"
            },
            "cardId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Set a HTML id for the card. Optional and not required."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "card-id",
                "defaultValue": "null"
            },
            "horizontal": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "Features"
                        }],
                    "text": "Uee the horizontal card layout."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "horizontal",
                "defaultValue": "false"
            },
            "reverse": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "Features"
                        }],
                    "text": "Reverse the order of which the image will wrap."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "reverse",
                "defaultValue": "false"
            },
            "aspectRatio": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string | '3/3' | '16/9'",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "see",
                            "text": "{@link https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio CSS documentation.}"
                        }, {
                            "name": "category",
                            "text": "Features"
                        }],
                    "text": "Select image aspect ratio. Example: '3/3', '16/9'."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "aspect-ratio",
                "defaultValue": "''"
            },
            "href": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "Href"
                        }],
                    "text": "The card link."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "href"
            },
            "hrefLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "Href"
                        }],
                    "text": "The link text."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "href-label"
            },
            "target": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "Href"
                        }],
                    "text": "The target attribute of the link."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "target"
            },
            "rel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "Href"
                        }],
                    "text": "The rel attribute of the link."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "rel",
                "defaultValue": "'noopener noreferrer'"
            },
            "icon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "Href"
                        }],
                    "text": "The link icon. Defaults to `arrow_right` or `open_in_new` if `target=\"_blank\"`."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "icon",
                "defaultValue": "null"
            }
        };
    }
    static get states() {
        return {
            "visibleOutline": {}
        };
    }
    static get events() {
        return [{
                "method": "pnCard",
                "name": "pnCard",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when you click on the card link (if you use the `href` prop)."
                },
                "complexType": {
                    "original": "{ click: MouseEvent }",
                    "resolved": "{ click: MouseEvent; }",
                    "references": {
                        "MouseEvent": {
                            "location": "global",
                            "id": "global::MouseEvent"
                        }
                    }
                }
            }];
    }
    static get elementRef() { return "hostElement"; }
    static get watchers() {
        return [{
                "propName": "cardId",
                "methodName": "watchCardId"
            }];
    }
}
