/**
 * @license
 * Copyright Tyler Technologies, Inc. 
 * License: Apache-2.0
 */
import { __decorate } from "tslib";
import { attachShadowTemplate, coerceBoolean, CustomElement, FoundationProperty } from '@tylertech/forge-core';
import { BaseComponent } from '../core/base/base-component';
import { FocusIndicatorAdapter } from './focus-indicator-adapter';
import { FOCUS_INDICATOR_CONSTANTS } from './focus-indicator-constants';
import { FocusIndicatorFoundation } from './focus-indicator-foundation';
const template = '<template></template>';
const styles = ':host{--_focus-indicator-display:var(--forge-focus-indicator-display, flex);--_focus-indicator-width:var(--forge-focus-indicator-width, var(--forge-border-medium, 2px));--_focus-indicator-active-width:var(--forge-focus-indicator-active-width, 6px);--_focus-indicator-color:var(--forge-focus-indicator-color, var(--forge-theme-primary, #3f51b5));--_focus-indicator-shape:var(--forge-focus-indicator-shape, var(--forge-shape-extra-small, 1px));--_focus-indicator-duration:var(--forge-focus-indicator-duration, var(--forge-animation-duration-long4, 600ms));--_focus-indicator-easing:var(--forge-focus-indicator-easing, var(--forge-animation-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)));--_focus-indicator-shape-start-start:var(--forge-focus-indicator-shape-start-start, var(--_focus-indicator-shape));--_focus-indicator-shape-start-end:var(--forge-focus-indicator-shape-start-end, var(--_focus-indicator-shape));--_focus-indicator-shape-end-end:var(--forge-focus-indicator-shape-end-end, var(--_focus-indicator-shape));--_focus-indicator-shape-end-start:var(--forge-focus-indicator-shape-end-start, var(--_focus-indicator-shape));--_focus-indicator-outward-offset:var(--forge-focus-indicator-outward-offset, var(--forge-spacing-xxsmall, 4px));--_focus-indicator-inward-offset:var(--forge-focus-indicator-inward-offset, 0px);--_focus-indicator-offset-block:var(--forge-focus-indicator-offset-block, 0);--_focus-indicator-offset-inline:var(--forge-focus-indicator-offset-inline, 0)}:host{-webkit-animation-delay:0s,calc(var(--_focus-indicator-duration) * .25);animation-delay:0s,calc(var(--_focus-indicator-duration) * .25);-webkit-animation-duration:calc(var(--_focus-indicator-duration) * .25),calc(var(--_focus-indicator-duration) * .75);animation-duration:calc(var(--_focus-indicator-duration) * .25),calc(var(--_focus-indicator-duration) * .75);-webkit-animation-timing-function:var(--_focus-indicator-easing);animation-timing-function:var(--_focus-indicator-easing);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--_focus-indicator-color);display:none;pointer-events:none;position:absolute;margin-block:var(--_focus-indicator-offset-block);margin-inline:var(--_focus-indicator-offset-inline)}:host([hidden]){display:none}:host([active]){display:var(--_focus-indicator-display)}:host(:not([inward])){-webkit-animation-name:outward-grow,outward-shrink;animation-name:outward-grow,outward-shrink;border-end-end-radius:calc(var(--_focus-indicator-shape-end-end) + var(--_focus-indicator-outward-offset));border-end-start-radius:calc(var(--_focus-indicator-shape-end-start) + var(--_focus-indicator-outward-offset));border-start-end-radius:calc(var(--_focus-indicator-shape-start-end) + var(--_focus-indicator-outward-offset));border-start-start-radius:calc(var(--_focus-indicator-shape-start-start) + var(--_focus-indicator-outward-offset));inset:calc(-1 * var(--_focus-indicator-outward-offset));outline:var(--_focus-indicator-width) solid currentColor}:host([inward]){-webkit-animation-name:inward-grow,inward-shrink;animation-name:inward-grow,inward-shrink;border-end-end-radius:calc(var(--_focus-indicator-shape-end-end) - var(--_focus-indicator-inward-offset));border-end-start-radius:calc(var(--_focus-indicator-shape-end-start) - var(--_focus-indicator-inward-offset));border-start-end-radius:calc(var(--_focus-indicator-shape-start-end) - var(--_focus-indicator-inward-offset));border-start-start-radius:calc(var(--_focus-indicator-shape-start-start) - var(--_focus-indicator-inward-offset));border:var(--_focus-indicator-width) solid currentColor;inset:var(--_focus-indicator-inward-offset)}:host([circular]){--_focus-indicator-shape:var(--forge-focus-indicator-shape, 50%)}@-webkit-keyframes outward-grow{from{outline-width:0}to{outline-width:var(--_focus-indicator-active-width)}}@keyframes outward-grow{from{outline-width:0}to{outline-width:var(--_focus-indicator-active-width)}}@-webkit-keyframes outward-shrink{from{outline-width:var(--_focus-indicator-active-width)}}@keyframes outward-shrink{from{outline-width:var(--_focus-indicator-active-width)}}@-webkit-keyframes inward-grow{from{border-width:0}to{border-width:var(--_focus-indicator-active-width)}}@keyframes inward-grow{from{border-width:0}to{border-width:var(--_focus-indicator-active-width)}}@-webkit-keyframes inward-shrink{from{border-width:var(--_focus-indicator-active-width)}}@keyframes inward-shrink{from{border-width:var(--_focus-indicator-active-width)}}@media (prefers-reduced-motion){:host{-webkit-animation:none;animation:none}}';
/**
 * @tag forge-focus-indicator
 *
 * @summary Renders a focus indicator when an attached element matches `:focus-visible`.
 *
 * @property {HTMLElement} targetElement - The element to attach the focus indicator to.
 * @property {string} target - The id of the element to attach the focus indicator to.
 * @property {boolean} active - Controls whether the indicator is active.
 * @property {boolean} inward - Controls whether the indicator renders inward.
 * @property {boolean} circular - Controls whether the indicator renders circular.
 * @property {boolean} allowFocus - Controls whether the indicator renders when the target element matches `:focus` instead of `:focus-visible`.
 * @property {FocusIndicatorFocusMode} focusMode - The focus mode to use. Defaults to `focusin`.
 *
 * @attribute {string} target - The id of the element to attach the focus indicator to.
 * @attribute {boolean} active - Controls whether the indicator is active.
 * @attribute {boolean} inward - Controls whether the indicator renders inward.
 * @attribute {boolean} circular - Controls whether the indicator renders circular.
 * @attribute {boolean} allow-focus - Controls whether the indicator renders when the target element matches `:focus` instead of `:focus-visible`.
 * @attribute {FocusIndicatorFocusMode} focus-mode - The focus mode to use. Defaults to `focusin`.
 *
 * @cssproperty --forge-focus-indicator-active-width - The width of the focus indicator when active. When animating this is the max extent.
 * @cssproperty --forge-focus-indicator-color - The color of the focus indicator.
 * @cssproperty --forge-focus-indicator-duration - The animation duration.
 * @cssproperty --forge-focus-indicator-outward-offset - The offset of the focus indicator when outward.
 * @cssproperty --forge-focus-indicator-inward-offset - The offset of the focus indicator when inward.
 * @cssproperty --forge-focus-indicator-shape - The shape of the focus indicator.
 * @cssproperty --forge-focus-indicator-width - The width of the focus indicator when resting.
 * @cssproperty --forge-focus-indicator-shape-start-start - The start start shape.
 * @cssproperty --forge-focus-indicator-shape-start-end - The start end shape.
 * @cssproperty --forge-focus-indicator-shape-end-start - The end start shape.
 * @cssproperty --forge-focus-indicator-shape-end-end - The end end shape.
 * @cssproperty --forge-focus-indicator-offset-block - The block offset.
 * @cssproperty --forge-focus-indicator-offset-inline - The inline offset.
 *
 * @csspart indicator - The focus indicator element.
 */
let FocusIndicatorComponent = class FocusIndicatorComponent extends BaseComponent {
    static get observedAttributes() {
        return Object.values(FOCUS_INDICATOR_CONSTANTS.attributes);
    }
    constructor() {
        super();
        attachShadowTemplate(this, template, styles);
        this._foundation = new FocusIndicatorFoundation(new FocusIndicatorAdapter(this));
    }
    connectedCallback() {
        this._foundation.initialize();
    }
    disconnectedCallback() {
        this._foundation.destroy();
    }
    attributeChangedCallback(name, oldValue, newValue) {
        switch (name) {
            case FOCUS_INDICATOR_CONSTANTS.attributes.TARGET:
                this.target = newValue;
                break;
            case FOCUS_INDICATOR_CONSTANTS.attributes.ACTIVE:
                this.active = coerceBoolean(newValue);
                break;
            case FOCUS_INDICATOR_CONSTANTS.attributes.INWARD:
                this.inward = coerceBoolean(newValue);
                break;
            case FOCUS_INDICATOR_CONSTANTS.attributes.CIRCULAR:
                this.circular = coerceBoolean(newValue);
                break;
            case FOCUS_INDICATOR_CONSTANTS.attributes.ALLOW_FOCUS:
                this.allowFocus = coerceBoolean(newValue);
                break;
            case FOCUS_INDICATOR_CONSTANTS.attributes.FOCUS_MODE:
                this.focusMode = newValue;
                break;
        }
    }
};
__decorate([
    FoundationProperty()
], FocusIndicatorComponent.prototype, "targetElement", void 0);
__decorate([
    FoundationProperty()
], FocusIndicatorComponent.prototype, "target", void 0);
__decorate([
    FoundationProperty()
], FocusIndicatorComponent.prototype, "active", void 0);
__decorate([
    FoundationProperty()
], FocusIndicatorComponent.prototype, "inward", void 0);
__decorate([
    FoundationProperty()
], FocusIndicatorComponent.prototype, "circular", void 0);
__decorate([
    FoundationProperty()
], FocusIndicatorComponent.prototype, "allowFocus", void 0);
__decorate([
    FoundationProperty()
], FocusIndicatorComponent.prototype, "focusMode", void 0);
FocusIndicatorComponent = __decorate([
    CustomElement({
        name: FOCUS_INDICATOR_CONSTANTS.elementName
    })
], FocusIndicatorComponent);
export { FocusIndicatorComponent };
