'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-9a9efa1c.js');
const index$1 = require('./index-5a88e57b.js');
const plus = require('./plus-339686b5.js');

const pnAnimatedTileCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-animated-tile .pn-animated-tile__container{position:relative;border-radius:2.4rem;height:56rem;cursor:default}pn-animated-tile .pn-animated-tile__content{position:relative;display:flex;height:100%;width:100%;background-color:transparent}pn-animated-tile [slot=side-a],pn-animated-tile [slot=side-b]{position:absolute;align-self:stretch;top:0;left:0;width:100%;height:100%}pn-animated-tile [slot=side-a]{padding:0;opacity:1}pn-animated-tile [slot=side-b]{z-index:-1;padding:2.4rem 2.4rem 7rem 2.4rem;opacity:0;transform:translateY(50px)}pn-animated-tile .pn-animated-tile__toggle{z-index:2;position:absolute;bottom:2.4rem;right:2.4rem;padding:0.8rem;border-radius:50%;border:none;cursor:pointer;background-color:#ffffff;transition:background-color 0.45s ease-in-out}pn-animated-tile .pn-animated-tile__toggle pn-icon{background-color:#ffffff;transition:background-color 0.45s ease-in-out, transform 0.45s ease-in-out 0.5s}pn-animated-tile .pn-animated-tile__toggle:hover{background-color:#e9e6e5}pn-animated-tile .pn-animated-tile__toggle:hover pn-icon{background-color:#e9e6e5}pn-animated-tile .button-tooltip{display:none}.cat-animate [slot=side-a],.cat-animate [slot=side-b]{transition:opacity 0.45s ease-in-out, transform 0.45s ease-in-out 0.5s}.cat-animate.fade [slot=side-a]{opacity:0;z-index:-1}.cat-animate.fade [slot=side-b]{z-index:1;opacity:1;transform:translateY(0);transition-delay:0.5s}.cat-animate.fade--reversed [slot=side-a]{opacity:1;transition-delay:0.5s}.cat-animate.fade--reversed [slot=side-b]{opacity:0;transform:translateY(50px)}.cat-animate.toggle.animate pn-icon{transform:rotate(45deg)}[data-cat-theme=white] .pn-animated-tile__container{background-color:#ffffff}[data-cat-theme=white] .pn-animated-tile__toggle{background-color:#00a0d6}[data-cat-theme=white] .pn-animated-tile__toggle pn-icon{background-color:#00a0d6}[data-cat-theme=white] .pn-animated-tile__toggle pn-icon svg>path{fill:#ffffff}[data-cat-theme=white] .pn-animated-tile__toggle:hover{background-color:#005d92}[data-cat-theme=white] .pn-animated-tile__toggle:hover pn-icon{background-color:#005d92}[data-cat-theme=white] .pn-animated-tile__toggle:focus,[data-cat-theme=white] .pn-animated-tile__toggle:focus-visible{outline-color:#005d92}[data-cat-theme=coral400] .pn-animated-tile__container{background-color:#f06365}[data-cat-theme=coral400] .pn-animated-tile__toggle{background-color:#ffffff}[data-cat-theme=coral400] .pn-animated-tile__toggle pn-icon{background-color:#ffffff}[data-cat-theme=coral400] .pn-animated-tile__toggle pn-icon svg>path{fill:#f06365}[data-cat-theme=coral400] .pn-animated-tile__toggle:focus,[data-cat-theme=coral400] .pn-animated-tile__toggle:focus-visible{outline-color:#f06365}[data-cat-theme=private] .pn-animated-tile__container{background-color:#00a0d6}[data-cat-theme=private] .pn-animated-tile__toggle{background-color:#ffffff}[data-cat-theme=private] .pn-animated-tile__toggle pn-icon{background-color:#ffffff}[data-cat-theme=private] .pn-animated-tile__toggle pn-icon svg>path{fill:#00a0d6}[data-cat-theme=private] .pn-animated-tile__toggle:focus,[data-cat-theme=private] .pn-animated-tile__toggle:focus-visible{outline-color:#00a0d6}[data-cat-theme=business] .pn-animated-tile__container{background-color:#0d234b}[data-cat-theme=business] .pn-animated-tile__toggle{background-color:#ffffff}[data-cat-theme=business] .pn-animated-tile__toggle pn-icon{background-color:#ffffff}[data-cat-theme=business] .pn-animated-tile__toggle pn-icon svg>path{fill:#0d234b}[data-cat-theme=business] .pn-animated-tile__toggle:focus,[data-cat-theme=business] .pn-animated-tile__toggle:focus-visible{outline-color:#0d234b}[data-cat-theme=hybrid] .pn-animated-tile__container{background-color:#e9e6e5}[data-cat-theme=hybrid] .pn-animated-tile__toggle{background-color:#ffffff}[data-cat-theme=hybrid] .pn-animated-tile__toggle pn-icon{background-color:#ffffff}[data-cat-theme=hybrid] .pn-animated-tile__toggle pn-icon svg>path{fill:#005d92}[data-cat-theme=hybrid] .pn-animated-tile__toggle:focus,[data-cat-theme=hybrid] .pn-animated-tile__toggle:focus-visible{outline-color:#005d92}[data-cat-firstpage-only=true] [slot=side-b],[data-cat-firstpage-only=true] .pn-animated-tile__toggle{display:none}";
const PnAnimatedTileStyle0 = pnAnimatedTileCss;

const PnAnimatedTile = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.toggled = false;
        this.transitionClassName = '';
        this.animateIcon = '';
    }
    get hostElement() { return index.getElement(this); }
    onClickHandler = () => {
        this.toggled = !this.toggled;
    };
    onToggledHandler() {
        this.transitionClassName = index$1.classNames({ 'fade': this.toggled, 'fade--reversed': !this.toggled });
        this.animateIcon = index$1.classNames({ 'animate': this.toggled, '': !this.toggled });
    }
    render() {
        return (index.h(index.Host, { key: 'ec2fa6234e759656fe4d0d40099248ba9feea212' }, index.h("div", { key: '6457a5c6f9776c7846ea89f6fad9236f21ebd2ec', class: "pn-animated-tile__container" }, index.h("div", { key: '5d4d15ad4016ab78e43ba598d464309d825a171d', class: `pn-animated-tile__content cat-animate ${this.transitionClassName}` }, index.h("slot", { key: '8669f993453f1999ada8eaa342cb6daaca5827e0', name: "side-a" }), index.h("slot", { key: '96e3b5ea3e2ae3f67f329a8ab7fc06b0961e8689', name: "side-b" })), index.h("button", { key: '7a45847b51d43175e422b55705f6e9130394e03a', type: "button", "aria-label": "Read more", class: `pn-animated-tile__toggle cat-animate toggle ${this.animateIcon}`, onClick: this.onClickHandler }, index.h("pn-icon", { key: '79c94d44537ca72618b1460becb62bfe39b0021d', icon: plus.plus })))));
    }
    static get watchers() { return {
        "toggled": ["onToggledHandler"]
    }; }
};
PnAnimatedTile.style = PnAnimatedTileStyle0;

exports.pn_animated_tile = PnAnimatedTile;

//# sourceMappingURL=pn-animated-tile.cjs.entry.js.map