import { __decorate, __metadata } from "tslib";
import { h, Host } from "@stencil/core";
import { balBrowser } from "../../utils/browser";
import { updateBalAnimated } from "../../utils/config";
import { balDevice } from "../../utils/device";
import { startFocusVisible } from "../../utils/focus-visible";
import { debounce, rIC, rOnLoad } from "../../utils/helpers";
import { Logger } from "../../utils/log";
export class App {
    constructor() {
        this.debouncedNotify = debounce(() => this.notifyResize(), 100);
        /**
         * Disables all animation inside the bal-app. Can be used for simplify e2e testing.
         */
        this.animated = true;
        /**
         * @internal Is `true` when DS components are ready to be shown.
         */
        this.ready = false;
        this.notifyResize = async () => {
            if (balBrowser.hasDocument && balBrowser.hasWindow) {
                const doc = document.documentElement;
                doc.style.setProperty('--bal-app-height', `${window.innerHeight}px`);
            }
        };
    }
    createLogger(log) {
        this.log = log;
    }
    connectedCallback() {
        if (this.animated === false) {
            updateBalAnimated(this.animated);
        }
        if (balBrowser.hasWindow) {
            window.addEventListener('resize', this.debouncedNotify);
            this.debouncedNotify();
        }
    }
    componentDidLoad() {
        rIC(() => {
            this.ready = true;
            startFocusVisible();
        });
        rOnLoad(() => {
            if (balBrowser.hasDocument && balBrowser.hasWindow) {
                const doc = document.documentElement;
                doc.classList.add('lcp-ready');
                this.balAppReady.emit();
            }
        });
    }
    disconnectedCallback() {
        if (balBrowser.hasWindow) {
            window.removeEventListener('resize', this.debouncedNotify);
        }
    }
    async setFocus(elements) {
        if (this.focusVisible) {
            this.focusVisible.setFocus(elements);
        }
    }
    render() {
        return (h(Host, { key: 'e6229236201fea92c4ccb1812f2f280a06130889', class: {
                'bal-app': true,
                'bal-app--safari': balBrowser.isSafari,
                'bal-app--touch': balDevice.hasTouchScreen,
            } }, h("slot", { key: '7712c7609c709dbe754eaf5700fd43ca3992a39f' })));
    }
    static get is() { return "bal-app"; }
    static get originalStyleUrls() {
        return {
            "$": ["bal-app.sass"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["bal-app.css"]
        };
    }
    static get properties() {
        return {
            "animated": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Disables all animation inside the bal-app. Can be used for simplify e2e testing."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "animated",
                "defaultValue": "true"
            },
            "ready": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": "Is `true` when DS components are ready to be shown."
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "ready",
                "defaultValue": "false"
            }
        };
    }
    static get events() {
        return [{
                "method": "balAppReady",
                "name": "balAppReady",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when app is ready and painted."
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }];
    }
    static get methods() {
        return {
            "setFocus": {
                "complexType": {
                    "signature": "(elements: HTMLElement[]) => Promise<void>",
                    "parameters": [{
                            "name": "elements",
                            "type": "HTMLElement[]",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "HTMLElement": {
                            "location": "global",
                            "id": "global::HTMLElement"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "el"; }
}
__decorate([
    Logger('bal-app'),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Function]),
    __metadata("design:returntype", void 0)
], App.prototype, "createLogger", null);
