/*!
 * Built with Stencil
 * By PostNord.
 */
import { Host, h, forceUpdate } from "@stencil/core";
import { open_in_new } from "pn-design-assets/pn-assets/icons.js";
import { ripple } from "../../../globals/helpers";
/**
 * The `pn-tile` is a navigational element that is intended to be accompanied by an illustration.
 *
 * It is very important that you use the `label` and `url`. This component renders an `a` element if the URL prop is set,
 * so you do not need to wrap or nest the tile in another `a` element. Doing so makes the component inaccessible.
 *
 * @slot illustration - Set a custom SVG. We recommend you use the `pn-illustration` component.
 * This is the same as the `illustration` prop.
 */
export class PnTile {
    mo;
    tile;
    illustrationSlot;
    visibleOutline = false;
    hostElement;
    /** Label of the link. This is required for the component to be accessible. */
    label;
    /** Set a string of text for the tile. Same as the default slot. @since v7.12.0 */
    text;
    /** The link of the tile. This is required for the component to be accessible. @category href */
    url;
    /** The target attribute of the link. @category href */
    target;
    /** The rel attribute of the link. @category href */
    rel = 'noopener noreferrer';
    /** The SVG content of an illustration. @category Image */
    illustration;
    /** The SVG content of a decorative icon. @since v7.12.0 @category Image */
    icon;
    /** Use the horizontal tile. @category Layout */
    horizontal = false;
    /**
     * Emitted when the link is clicked. Use the `click` property to `preventDefault`
     * if you wish to perform the navigation programmatically.
     * @since v7.12.0
     **/
    pnTile;
    connectedCallback() {
        this.mo = new MutationObserver(() => forceUpdate(this.hostElement));
        this.mo.observe(this.hostElement, { subtree: true, childList: true });
    }
    disconnectedCallback() {
        this.mo?.disconnect();
    }
    isExternal() {
        return this.target === '_blank';
    }
    showIcon() {
        return !!this.icon && !this.showSlotIllustration();
    }
    showPropIllustration() {
        return !!this.illustration && !this.showSlotIllustration();
    }
    showSlotIllustration() {
        return !!this.illustrationSlot?.querySelector('[slot="illustration"]');
    }
    showImage() {
        return this.showIcon() || this.showPropIllustration() || this.showSlotIllustration();
    }
    handleFocus({ type, target }) {
        this.visibleOutline = type === 'focus' && target.matches(':focus-visible');
    }
    clickHandler(event) {
        ripple(event, this.tile);
        this.pnTile.emit({ click: event });
    }
    render() {
        return (h(Host, { key: 'eb3815f93d4355e80969c381cadd22789b1a5b05' }, h("div", { key: 'a8dad16643d664975ee27f3fc3e0249730662efb', class: "pn-tile", "data-horizontal": this.horizontal, "data-href": !!this.url, "data-focus": this.visibleOutline, ref: el => (this.tile = el) }, h("div", { key: '474e4c248a0ddfab550be16dcff172fc01f84e0a', class: "pn-tile-illustration", "data-circle": !!this.url, "data-icon": this.showIcon(), role: "presentation", hidden: !this.showImage() }, this.showPropIllustration() ? (h("pn-illustration", { illustration: this.illustration })) : (this.showIcon() && h("pn-icon", { color: "blue700", icon: this.icon })), h("div", { key: '2d5962def32bc5d7a3432cd5062d0a164f167454', class: "pn-tile-illustration-slot", hidden: !this.showSlotIllustration(), ref: el => (this.illustrationSlot = el) }, h("slot", { key: 'ceb86fe161d9256249fdc65c83199a0231899e9b', name: "illustration" }))), h("div", { key: '74ad199309a7ae8f6c576bc2c97c958f364dc868', class: "pn-tile-text" }, h("h3", { key: 'eb6e12a3496d11c3ecb79bf122cbfd604b8081ef', class: "pn-tile-title" }, this.url ? (h("a", { class: "pn-tile-link", href: this.url, target: this.target, rel: !this.rel && this.isExternal() ? 'noopener noreferrer' : this.rel, onClick: e => this.clickHandler(e), onFocus: event => this.handleFocus(event), onBlur: event => this.handleFocus(event) }, this.label)) : (this.label), this.isExternal() && h("pn-icon", { key: '13c2495d9a94dc9d3f530543e47549683b985c59', icon: open_in_new, small: true, color: "blue700" })), h("div", { key: '4ce12374c5bbdf54809d8b1d2f99cb6efbc01266', class: "pn-tile-slot" }, !!this.text && h("p", { key: '2cdbc99beff7480c18f561b2f16f72953367b43f', class: "pn-tile-paragraph" }, this.text), h("slot", { key: 'f786d7b65a270acb9be13ce0cfb1d2e3bfe34b8a' }))))));
    }
    static get is() { return "pn-tile"; }
    static get originalStyleUrls() {
        return {
            "$": ["pn-tile.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pn-tile.css"]
        };
    }
    static get properties() {
        return {
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Label of the link. This is required for the component to be accessible."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "label"
            },
            "text": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "since",
                            "text": "v7.12.0"
                        }],
                    "text": "Set a string of text for the tile. Same as the default slot."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "text"
            },
            "url": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "href"
                        }],
                    "text": "The link of the tile. This is required for the component to be accessible."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "url"
            },
            "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'"
            },
            "illustration": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "Image"
                        }],
                    "text": "The SVG content of an illustration."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "illustration"
            },
            "icon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "since",
                            "text": "v7.12.0"
                        }, {
                            "name": "category",
                            "text": "Image"
                        }],
                    "text": "The SVG content of a decorative icon."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "icon"
            },
            "horizontal": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "Layout"
                        }],
                    "text": "Use the horizontal tile."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "horizontal",
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "visibleOutline": {}
        };
    }
    static get events() {
        return [{
                "method": "pnTile",
                "name": "pnTile",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "since",
                            "text": "v7.12.0"
                        }],
                    "text": "Emitted when the link is clicked. Use the `click` property to `preventDefault`\nif you wish to perform the navigation programmatically."
                },
                "complexType": {
                    "original": "{ click: MouseEvent }",
                    "resolved": "{ click: MouseEvent; }",
                    "references": {
                        "MouseEvent": {
                            "location": "global",
                            "id": "global::MouseEvent"
                        }
                    }
                }
            }];
    }
    static get elementRef() { return "hostElement"; }
}
