/**
 * @license
 * Copyright Tyler Technologies, Inc. 
 * License: Apache-2.0
 */
import { __decorate } from "tslib";
import { attachShadowTemplate, coerceBoolean, CustomElement, getShadowElement } from '@tylertech/forge-core';
import { BaseComponent } from '../core/base/base-component';
import { BACKDROP_CONSTANTS } from './backdrop-constants';
const template = '<template><div class=\"forge-backdrop\" part=\"root\"></div></template>';
const styles = '@-webkit-keyframes enter{from{opacity:0}to{opacity:var(--_backdrop-opacity)}}@keyframes enter{from{opacity:0}to{opacity:var(--_backdrop-opacity)}}@-webkit-keyframes exit{from{opacity:var(--_backdrop-opacity)}to{opacity:0}}@keyframes exit{from{opacity:var(--_backdrop-opacity)}to{opacity:0}}:host{display:contents}:host([hidden]){display:none}.forge-backdrop{--_backdrop-background:var(--forge-backdrop-background, #000);--_backdrop-opacity:var(--forge-backdrop-opacity, 0.54);--_backdrop-z-index:var(--forge-backdrop-z-index, var(--forge-z-index-backdrop, 7));--_backdrop-enter-animation-duration:var(--forge-backdrop-enter-animation-duration, var(--forge-animation-duration-short4, 200ms));--_backdrop-enter-animation-easing:var(--forge-backdrop-enter-animation-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_backdrop-exit-animation-duration:var(--forge-backdrop-exit-animation-duration, var(--forge-animation-duration-short1, 50ms));--_backdrop-exit-animation-easing:var(--forge-backdrop-exit-animation-easing, var(--forge-animation-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15)))}.forge-backdrop{position:absolute;inset:0;contain:content;z-index:var(--_backdrop-z-index);background:var(--_backdrop-background);opacity:0;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host([fixed]) .forge-backdrop{position:fixed}:host([visible]) .forge-backdrop{opacity:var(--_backdrop-opacity)}:host([visible]) .forge-backdrop.entering{-webkit-animation-name:enter;animation-name:enter;-webkit-animation-duration:var(--_backdrop-enter-animation-duration);animation-duration:var(--_backdrop-enter-animation-duration);-webkit-animation-timing-function:var(--_backdrop-enter-animation-easing);animation-timing-function:var(--_backdrop-enter-animation-easing)}:host([visible]) .forge-backdrop.exiting{-webkit-animation-name:exit;animation-name:exit;-webkit-animation-duration:var(--_backdrop-exit-animation-duration);animation-duration:var(--_backdrop-exit-animation-duration);-webkit-animation-timing-function:var(--_backdrop-exit-animation-easing);animation-timing-function:var(--_backdrop-exit-animation-easing)}';
/**
 * @tag forge-backdrop
 */
let BackdropComponent = class BackdropComponent extends BaseComponent {
    static get observedAttributes() {
        return Object.values(BACKDROP_CONSTANTS.observedAttributes);
    }
    constructor() {
        super();
        this._visible = false;
        this._fixed = false;
        attachShadowTemplate(this, template, styles);
        this._rootElement = getShadowElement(this, BACKDROP_CONSTANTS.selectors.ROOT);
    }
    disconnectedCallback() {
        if (this._animationController) {
            this._animationController.abort();
            this._animationController = undefined;
        }
        this.classList.remove(BACKDROP_CONSTANTS.classes.ENTERING, BACKDROP_CONSTANTS.classes.EXITING);
    }
    attributeChangedCallback(name, oldValue, newValue) {
        switch (name) {
            case BACKDROP_CONSTANTS.attributes.VISIBLE:
                this.visible = coerceBoolean(newValue);
                break;
            case BACKDROP_CONSTANTS.attributes.FIXED:
                this.fixed = coerceBoolean(newValue);
                break;
        }
    }
    async _applyVisibility(visible, { animate } = { animate: true }) {
        if (this._visible === visible) {
            return;
        }
        this._visible = visible;
        if (!this.isConnected) {
            this.toggleAttribute(BACKDROP_CONSTANTS.attributes.VISIBLE, this._visible);
            return Promise.resolve();
        }
        if (!animate) {
            this.toggleAttribute(BACKDROP_CONSTANTS.attributes.VISIBLE, this._visible);
            return;
        }
        const isVisible = this._visible;
        const className = isVisible ? BACKDROP_CONSTANTS.classes.ENTERING : BACKDROP_CONSTANTS.classes.EXITING;
        if (this._animationController) {
            this._animationController.abort();
            this._rootElement.classList.remove(BACKDROP_CONSTANTS.classes.ENTERING, BACKDROP_CONSTANTS.classes.EXITING);
        }
        this._animationController = new AbortController();
        const animationComplete = new Promise(resolve => {
            var _a;
            this._rootElement.addEventListener('animationend', () => {
                if (!isVisible) {
                    this.removeAttribute(BACKDROP_CONSTANTS.attributes.VISIBLE);
                }
                this._rootElement.classList.remove(className);
                resolve();
            }, { once: true, signal: (_a = this._animationController) === null || _a === void 0 ? void 0 : _a.signal });
        });
        if (isVisible) {
            this.setAttribute(BACKDROP_CONSTANTS.attributes.VISIBLE, '');
        }
        this._rootElement.classList.add(className);
        return animationComplete;
    }
    show() {
        this._applyVisibility(true, { animate: false });
    }
    hide() {
        this._applyVisibility(false, { animate: false });
    }
    fadeIn() {
        return this._applyVisibility(true);
    }
    fadeOut() {
        return this._applyVisibility(false);
    }
    get visible() {
        return this._visible;
    }
    set visible(value) {
        value = Boolean(value);
        if (this._visible !== value) {
            this._applyVisibility(value);
        }
    }
    get fixed() {
        return this._fixed;
    }
    set fixed(value) {
        value = Boolean(value);
        if (this._fixed !== value) {
            this._fixed = value;
            this.toggleAttribute(BACKDROP_CONSTANTS.attributes.FIXED, this._fixed);
        }
    }
};
BackdropComponent = __decorate([
    CustomElement({
        name: BACKDROP_CONSTANTS.elementName
    })
], BackdropComponent);
export { BackdropComponent };
