/**
 * @license
 * Copyright Tyler Technologies, Inc. 
 * License: Apache-2.0
 */
import { __decorate } from "tslib";
import { CustomElement, attachShadowTemplate, FoundationProperty, coerceBoolean } from '@tylertech/forge-core';
import { StateLayerAdapter } from './state-layer-adapter';
import { StateLayerFoundation } from './state-layer-foundation';
import { STATE_LAYER_CONSTANTS } from './state-layer-constants';
import { BaseComponent } from '../core/base/base-component';
const template = '<template><div class=\"forge-state-layer\" part=\"surface\"></div></template>';
const styles = ':host{--_state-layer-display:var(--forge-state-layer-display, flex)}:host{border-radius:inherit;position:absolute;inset:0;overflow:hidden;display:var(--_state-layer-display);margin:auto;pointer-events:none;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}:host([disabled]){display:none}.forge-state-layer{--_state-layer-color:var(--forge-state-layer-color, var(--forge-theme-on-surface, #000000));--_state-layer-hover-color:var(--forge-state-layer-hover-color, var(--_state-layer-color));--_state-layer-hover-opacity:var(--forge-state-layer-hover-opacity, 0.08);--_state-layer-pressed-color:var(--forge-state-layer-pressed-color, var(--_state-layer-color));--_state-layer-pressed-opacity:var(--forge-state-layer-pressed-opacity, 0.12);--_state-layer-hover-duration:var(--forge-state-layer-hover-duration, 15ms);--_state-layer-pressed-duration:var(--forge-state-layer-pressed-duration, 105ms);--_state-layer-animation-duration:var(--forge-state-layer-animation-duration, 375ms)}.forge-state-layer::after,.forge-state-layer::before{content:\"\";opacity:0;position:absolute}.forge-state-layer::before{background-color:var(--_state-layer-hover-color);inset:0;-webkit-transition:opacity var(--_state-layer-hover-duration) linear,background-color var(--_state-layer-hover-duration) linear;transition:opacity var(--_state-layer-hover-duration) linear,background-color var(--_state-layer-hover-duration) linear}.forge-state-layer::after{background:radial-gradient(closest-side,var(--_state-layer-pressed-color) max(100% - 70px,65%),transparent 100%);-webkit-transform-origin:center center;transform-origin:center center;-webkit-transition:opacity var(--_state-layer-animation-duration) linear;transition:opacity var(--_state-layer-animation-duration) linear}.forge-state-layer--hovered::before{background-color:var(--_state-layer-hover-color);opacity:var(--_state-layer-hover-opacity)}.forge-state-layer--pressed::after{opacity:var(--_state-layer-pressed-opacity);-webkit-transition-duration:var(--_state-layer-pressed-duration);transition-duration:var(--_state-layer-pressed-duration)}@media screen and (forced-colors:active){:host{display:none}}';
/**
 * @tag forge-state-layer
 *
 * @summary State layers show the interaction status of an element.
 *
 * @description
 * A state layer is a semi-transparent overlay on an element that indicates its interaction
 * state. State layers provide a systematic approach to visualizing states by using opacity.
 * A layer can be applied to an entire element or in a circular shape. Only one state layer
 * can be applied at a given time.
 *
 * @property {HTMLElement} targetElement - The element to attach the state layer to.
 * @property {string} target - The id of the element to attach the state layer to.
 * @property {boolean} disabled - Controls whether the state layer is disabled.
 *
 * @attribute {string} target - The id of the element to attach the state layer to.
 * @attribute {boolean} disabled - Controls whether the state layer is disabled.
 *
 * @cssproperty --forge-state-layer-color - The color of the state layer. Defaults to the on-surface theme.
 * @cssproperty --forge-state-layer-hover-color - The color of the state layer when hovered.
 * @cssproperty --forge-state-layer-hover-opacity - The opacity of the state layer when hovered.
 * @cssproperty --forge-state-layer-pressed-color - The color of the state layer when pressed.
 * @cssproperty --forge-state-layer-pressed-opacity - The opacity of the state layer when pressed.
 * @cssproperty --forge-state-layer-hover-duration - The duration of the hover animation.
 * @cssproperty --forge-state-layer-animation-duration - The duration of the animation.
 * @cssproperty --forge-state-layer-pressed-duration - The duration of the pressed animation.
 *
 * @csspart surface - The surface element.
 */
let StateLayerComponent = class StateLayerComponent extends BaseComponent {
    static get observedAttributes() {
        return [
            STATE_LAYER_CONSTANTS.attributes.TARGET,
            STATE_LAYER_CONSTANTS.attributes.DISABLED
        ];
    }
    constructor() {
        super();
        attachShadowTemplate(this, template, styles);
        this._foundation = new StateLayerFoundation(new StateLayerAdapter(this));
    }
    connectedCallback() {
        this._foundation.initialize();
    }
    disconnectedCallback() {
        this._foundation.disconnect();
    }
    attributeChangedCallback(name, oldValue, newValue) {
        switch (name) {
            case STATE_LAYER_CONSTANTS.attributes.TARGET:
                this.target = newValue;
                break;
            case STATE_LAYER_CONSTANTS.attributes.DISABLED:
                this.disabled = coerceBoolean(newValue);
                break;
        }
    }
    /**
     * Triggers the animation to run.
     *
     * Note: If coordinates are not provided, the transition will originate from the center of the target element.
     *
     * @param {StateLayerCoords} [coords] - The coordinates to play the animation from.
     */
    playAnimation(coords) {
        this._foundation.playAnimation(coords);
    }
};
__decorate([
    FoundationProperty()
], StateLayerComponent.prototype, "targetElement", void 0);
__decorate([
    FoundationProperty()
], StateLayerComponent.prototype, "target", void 0);
__decorate([
    FoundationProperty()
], StateLayerComponent.prototype, "disabled", void 0);
StateLayerComponent = __decorate([
    CustomElement({
        name: STATE_LAYER_CONSTANTS.elementName
    })
], StateLayerComponent);
export { StateLayerComponent };
