/*!
 * Built with Stencil
 * By PostNord.
 */
'use strict';

var index = require('./index-CfUQZtlH.js');
var open_in_new = require('./open_in_new-B-zmn5xr.js');
var index$1 = require('./index.cjs.js');

const pnTileCss = () => `${index.transformTag("pn-tile")}{position:relative;display:block}${index.transformTag("pn-tile")} .pn-tile{position:relative;overflow:hidden;word-break:break-word;text-align:center;border-radius:0.5em;padding:clamp(0.75em, 3vw, 1.5em);height:100%;color:#2d2013;background-color:#ffffff;box-shadow:0em 0.0625em 0.125em 0em rgba(20, 20, 20, 0.11), 0em 0.1875em 0.4375em 0em rgba(0, 0, 0, 0.13);display:flex;flex-wrap:wrap;flex-direction:column;align-items:center;justify-content:flex-start;gap:clamp(1em, 5vw, 1.5em);outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:box-shadow, background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-tile")} .pn-tile{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-tile")} .pn-tile .pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background-color:#005d92;transform:translate(-50%, -50%) scale(0);opacity:0.1;pointer-events:none;z-index:3}@keyframes ripple{to{transform:translate(-50%, -50%) scale(1);opacity:0}}${index.transformTag("pn-tile")} .pn-tile[data-horizontal]{text-align:left;flex-direction:row;flex-wrap:nowrap;gap:clamp(1em, 5vw, 1.5em)}${index.transformTag("pn-tile")} .pn-tile[data-horizontal] .pn-tile-illustration[data-circle]:before{clip-path:ellipse(0% 100% at 0% 50%)}${index.transformTag("pn-tile")} .pn-tile[data-horizontal] .pn-tile-text{flex-grow:2}${index.transformTag("pn-tile")} .pn-tile[data-href][data-focus]{outline-color:#005d92;box-shadow:0em 0em 0em 0em rgba(20, 20, 20, 0.11), 0em 0em 0em 0em rgba(0, 0, 0, 0.13)}${index.transformTag("pn-tile")} .pn-tile[data-href]:hover{background-color:rgba(183, 235, 252, 0.3)}${index.transformTag("pn-tile")} .pn-tile[data-href]:hover .pn-tile-illustration[data-circle]:before,${index.transformTag("pn-tile")} .pn-tile[data-href]:focus-within .pn-tile-illustration[data-circle]:before{clip-path:ellipse(100% 50% at 50% -25%)}${index.transformTag("pn-tile")} .pn-tile[data-href]:hover[data-horizontal] .pn-tile-illustration[data-circle]:before,${index.transformTag("pn-tile")} .pn-tile[data-href]:focus-within[data-horizontal] .pn-tile-illustration[data-circle]:before{clip-path:ellipse(50% 100% at -25% 50%)}${index.transformTag("pn-tile")} .pn-tile[data-href]:hover .pn-tile-link,${index.transformTag("pn-tile")} .pn-tile[data-href]:focus-within .pn-tile-link{color:#0d234b;text-decoration-color:#0d234b}${index.transformTag("pn-tile")} .pn-tile[data-href]:hover ${index.transformTag("pn-icon")} .pn-icon-svg path,${index.transformTag("pn-tile")} .pn-tile[data-href]:focus-within ${index.transformTag("pn-icon")} .pn-icon-svg path{fill:#0d234b}${index.transformTag("pn-tile")} .pn-tile-illustration{z-index:2;flex:1 1;max-width:7.5em;max-height:7.5em}${index.transformTag("pn-tile")} .pn-tile-illustration[data-icon]{flex:0 0}${index.transformTag("pn-tile")} .pn-tile-illustration[data-icon] ${index.transformTag("pn-icon")}{padding:1em;border-radius:50%;background-color:#e0f8ff}${index.transformTag("pn-tile")} .pn-tile-illustration[data-icon] ${index.transformTag("pn-icon")}>svg{font-size:2em}${index.transformTag("pn-tile")} .pn-tile-illustration-slot{display:block;height:100%;width:100%}${index.transformTag("pn-tile")} .pn-tile-illustration[data-circle]:before{content:"";position:absolute;z-index:-1;top:0;left:0;width:100%;height:100%;background-color:rgba(183, 235, 252, 0.7);background-color:rgba(183, 235, 252, 0.7);clip-path:ellipse(100% 0% at 50% 0%);transition-property:clip-path;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-tile")} .pn-tile-illustration[data-circle]:before{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-tile")} .pn-tile-text{z-index:3;flex:1 1;display:flex;flex-direction:column;gap:0.5em}${index.transformTag("pn-tile")} .pn-tile-link{cursor:pointer;color:#005d92;text-decoration:underline;text-decoration-color:transparent;-webkit-tap-highlight-color:transparent;transition-property:color, text-decoration-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-tile")} .pn-tile-link{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-tile")} .pn-tile-link:focus{outline:0;text-decoration-color:#0d234b;color:#0d234b}${index.transformTag("pn-tile")} .pn-tile-link:after{content:"";position:absolute;top:0;left:0;height:100%;width:100%;opacity:0}${index.transformTag("pn-tile")} .pn-tile-title{font-family:inherit;font-weight:700;font-size:clamp(1.25em, 3vw, 1.5em);margin:0em}${index.transformTag("pn-tile")} .pn-tile-title ${index.transformTag("pn-icon")}{margin-left:0.25em;vertical-align:middle}${index.transformTag("pn-tile")} .pn-tile-slot{font-weight:400;color:#5e554a;display:flex;flex-direction:column;gap:0.25em}${index.transformTag("pn-tile")} .pn-tile-paragraph,${index.transformTag("pn-tile")} .pn-tile p{font-size:0.875em}${index.transformTag("pn-tile")} .pn-tile-paragraph:last-child,${index.transformTag("pn-tile")} .pn-tile p:last-child{margin:0em}`;

const PnTile = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.pnTile = index.createEvent(this, "pnTile");
    }
    mo;
    tile;
    illustrationSlot;
    visibleOutline = false;
    get hostElement() { return index.getElement(this); }
    /** 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(() => index.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) {
        index$1.ripple(event, this.tile);
        this.pnTile.emit({ click: event });
    }
    render() {
        return (index.h(index.Host, { key: 'eb3815f93d4355e80969c381cadd22789b1a5b05' }, index.h("div", { key: 'a8dad16643d664975ee27f3fc3e0249730662efb', class: "pn-tile", "data-horizontal": this.horizontal, "data-href": !!this.url, "data-focus": this.visibleOutline, ref: el => (this.tile = el) }, index.h("div", { key: '474e4c248a0ddfab550be16dcff172fc01f84e0a', class: "pn-tile-illustration", "data-circle": !!this.url, "data-icon": this.showIcon(), role: "presentation", hidden: !this.showImage() }, this.showPropIllustration() ? (index.h("pn-illustration", { illustration: this.illustration })) : (this.showIcon() && index.h("pn-icon", { color: "blue700", icon: this.icon })), index.h("div", { key: '2d5962def32bc5d7a3432cd5062d0a164f167454', class: "pn-tile-illustration-slot", hidden: !this.showSlotIllustration(), ref: el => (this.illustrationSlot = el) }, index.h("slot", { key: 'ceb86fe161d9256249fdc65c83199a0231899e9b', name: "illustration" }))), index.h("div", { key: '74ad199309a7ae8f6c576bc2c97c958f364dc868', class: "pn-tile-text" }, index.h("h3", { key: 'eb6e12a3496d11c3ecb79bf122cbfd604b8081ef', class: "pn-tile-title" }, this.url ? (index.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() && index.h("pn-icon", { key: '13c2495d9a94dc9d3f530543e47549683b985c59', icon: open_in_new.open_in_new, small: true, color: "blue700" })), index.h("div", { key: '4ce12374c5bbdf54809d8b1d2f99cb6efbc01266', class: "pn-tile-slot" }, !!this.text && index.h("p", { key: '2cdbc99beff7480c18f561b2f16f72953367b43f', class: "pn-tile-paragraph" }, this.text), index.h("slot", { key: 'f786d7b65a270acb9be13ce0cfb1d2e3bfe34b8a' }))))));
    }
};
PnTile.style = pnTileCss();

exports.pn_tile = PnTile;
