/**
 * @license
 * Copyright 2023 Tyler Technologies, Inc. 
 * License: Apache-2.0
 */
import { __decorate } from "tslib";
import { attachShadowTemplate, CustomElement, FoundationProperty } from '@tylertech/forge-core';
import { BaseComponent } from '../core/base/base-component';
import { BackdropAdapter } from './backdrop-adapter';
import { BACKDROP_CONSTANTS } from './backdrop-constants';
import { BackdropFoundation } from './backdrop-foundation';
const template = '<template><div class=\"forge-backdrop\" part=\"root\"></div></template>';
const styles = '.forge-backdrop{z-index:7;z-index:var(--forge-z-index-backdrop,7);background-color:rgba(0,0,0,.54);background-color:var(--forge-backdrop-theme-background,rgba(0,0,0,.54));position:absolute;top:0;bottom:0;left:0;right:0;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;-webkit-transition:opacity 150ms 0s cubic-bezier(0, 0, .2, 1);transition:opacity 150ms 0s cubic-bezier(0, 0, .2, 1);opacity:0}:host{display:block}:host([hidden]){display:none}:host([fixed]) .forge-backdrop{position:fixed}:host([appearance=light]){--forge-backdrop-theme-background:rgba(255, 255, 255, 0.54)}:host([appearance=dark]){--forge-backdrop-theme-background:rgba(0, 0, 0, 0.54)}';
/**
 * A web component that renders a backdrop covering its parent container with a semi-opaque element.
 *
 * @tag forge-backdrop
 */
let BackdropComponent = class BackdropComponent extends BaseComponent {
    constructor() {
        super();
        attachShadowTemplate(this, template, styles);
        this._foundation = new BackdropFoundation(new BackdropAdapter(this));
    }
    static get observedAttributes() {
        return [
            BACKDROP_CONSTANTS.attributes.DELAY,
            BACKDROP_CONSTANTS.attributes.MAX_OPACITY
        ];
    }
    connectedCallback() {
        if (this.hasAttribute(BACKDROP_CONSTANTS.attributes.DELAY) && this.getAttribute(BACKDROP_CONSTANTS.attributes.DELAY)) {
            const inDelay = Number(this.getAttribute(BACKDROP_CONSTANTS.attributes.DELAY));
            this.delay = inDelay >= 0 ? inDelay : BACKDROP_CONSTANTS.numbers.DELAY;
        }
        if (this.hasAttribute(BACKDROP_CONSTANTS.attributes.MAX_OPACITY)) {
            const inMaxOpacity = Number(this.getAttribute(BACKDROP_CONSTANTS.attributes.MAX_OPACITY));
            this.maxOpacity = inMaxOpacity >= 0 && inMaxOpacity <= 1 ? inMaxOpacity : BACKDROP_CONSTANTS.numbers.OPACITY;
        }
        this._foundation.initialize();
    }
    disconnectedCallback() {
        this._foundation.disconnect();
    }
    attributeChangedCallback(name, oldValue, newValue) {
        switch (name) {
            case BACKDROP_CONSTANTS.attributes.DELAY:
                const delayValue = Number(newValue);
                this.delay = delayValue >= 0 ? delayValue : BACKDROP_CONSTANTS.numbers.DELAY;
                break;
            case BACKDROP_CONSTANTS.attributes.MAX_OPACITY:
                const opacityValue = Number(newValue);
                this.maxOpacity = opacityValue >= 0 && opacityValue <= 1 ? opacityValue : BACKDROP_CONSTANTS.numbers.OPACITY;
                break;
            case BACKDROP_CONSTANTS.attributes.APPEARANCE:
                this.appearance = newValue;
                break;
        }
    }
    /**
     * Starts the fade-out animation to animate the backdrop to 0% opacity.
     */
    fadeOut() {
        return this._foundation.fadeOut();
    }
    /**
     * Starts the fade-in animation to animate the backdrop to max opacity.
     */
    fadeIn() {
        return this._foundation.fadeIn();
    }
};
__decorate([
    FoundationProperty()
], BackdropComponent.prototype, "delay", void 0);
__decorate([
    FoundationProperty()
], BackdropComponent.prototype, "appearance", void 0);
__decorate([
    FoundationProperty()
], BackdropComponent.prototype, "maxOpacity", void 0);
BackdropComponent = __decorate([
    CustomElement({
        name: BACKDROP_CONSTANTS.elementName
    })
], BackdropComponent);
export { BackdropComponent };
