import classNames from "classnames";
import { h, Host } from "@stencil/core";
import { plus } from "pn-design-assets/pn-assets/icons.js";
export class PnAnimatedTile {
    constructor() {
        this.toggled = false;
        this.transitionClassName = '';
        this.animateIcon = '';
    }
    hostElement;
    onClickHandler = () => {
        this.toggled = !this.toggled;
    };
    onToggledHandler() {
        this.transitionClassName = classNames({ 'fade': this.toggled, 'fade--reversed': !this.toggled });
        this.animateIcon = classNames({ 'animate': this.toggled, '': !this.toggled });
    }
    render() {
        return (h(Host, { key: 'ec2fa6234e759656fe4d0d40099248ba9feea212' }, h("div", { key: '6457a5c6f9776c7846ea89f6fad9236f21ebd2ec', class: "pn-animated-tile__container" }, h("div", { key: '5d4d15ad4016ab78e43ba598d464309d825a171d', class: `pn-animated-tile__content cat-animate ${this.transitionClassName}` }, h("slot", { key: '8669f993453f1999ada8eaa342cb6daaca5827e0', name: "side-a" }), h("slot", { key: '96e3b5ea3e2ae3f67f329a8ab7fc06b0961e8689', name: "side-b" })), h("button", { key: '7a45847b51d43175e422b55705f6e9130394e03a', type: "button", "aria-label": "Read more", class: `pn-animated-tile__toggle cat-animate toggle ${this.animateIcon}`, onClick: this.onClickHandler }, h("pn-icon", { key: '79c94d44537ca72618b1460becb62bfe39b0021d', icon: plus })))));
    }
    static get is() { return "pn-animated-tile"; }
    static get originalStyleUrls() {
        return {
            "$": ["pn-animated-tile.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pn-animated-tile.css"]
        };
    }
    static get states() {
        return {
            "toggled": {},
            "transitionClassName": {},
            "animateIcon": {}
        };
    }
    static get elementRef() { return "hostElement"; }
    static get watchers() {
        return [{
                "propName": "toggled",
                "methodName": "onToggledHandler"
            }];
    }
}
//# sourceMappingURL=pn-animated-tile.js.map
