import { h, Host } from "@stencil/core";
import { UtilBreakpointObserverBreakpoints } from "./util-breakpoint-observer-breakpoints.enum";
/**
 * @componentType utility
 * @slot default - Kan innehålla vad som helst
 * @enums UtilBreakpointObserverBreakpoints - util-breakpoint-observer-breakpoints.enum.ts
 * @swedishName Breakpoint Observer
 *
 */
export class UtilBreakpointObserver {
    componentDidLoad() {
        this.handleBreakpoint();
    }
    handleBreakpoint(e) {
        const observerCSSVariables = window.getComputedStyle(this._observer);
        const value = observerCSSVariables.getPropertyValue('--digi--util-breakpoint-observer--breakpoint');
        this.afOnChange.emit({ value, e });
        switch (value) {
            case UtilBreakpointObserverBreakpoints.SMALL:
                this.afOnSmall.emit({ value, e });
                break;
            case UtilBreakpointObserverBreakpoints.MEDIUM:
                this.afOnMedium.emit({ value, e });
                break;
            case UtilBreakpointObserverBreakpoints.LARGE:
                this.afOnLarge.emit({ value, e });
                break;
            case UtilBreakpointObserverBreakpoints.XLARGE:
                this.afOnXLarge.emit({ value, e });
        }
    }
    render() {
        return (h(Host, { key: '1bf96336017e1cde539c6e3052ef1713a3b4dba1' }, h("div", { key: 'a27cdafe003d9ea0dc6ae1e835beb9be4f220668', class: "digi-util-breakpoint-observer" }, h("div", { key: '1f6b04b187a97efd64da61d1bcb1a824b343336b', ref: (el) => (this._observer = el), onTransitionEnd: (e) => this.handleBreakpoint(e), class: "digi-util-breakpoint-observer__observer" }), h("slot", { key: '67603f4f2832820c4ceea5592fe4b50be88ea7fe' }))));
    }
    static get is() { return "digi-util-breakpoint-observer"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() {
        return {
            "$": ["util-breakpoint-observer.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["util-breakpoint-observer.css"]
        };
    }
    static get events() {
        return [{
                "method": "afOnChange",
                "name": "afOnChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "At page load and at change of breakpoint on page"
                        }],
                    "text": "Vid inl\u00E4sning av sida samt vid uppdatering av brytpunkt"
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "afOnSmall",
                "name": "afOnSmall",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "At breakpoint 'small'"
                        }],
                    "text": "Vid brytpunkt 'small'"
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "afOnMedium",
                "name": "afOnMedium",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "At breakpoint 'medium'"
                        }],
                    "text": "Vid brytpunkt 'medium'"
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "afOnLarge",
                "name": "afOnLarge",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "At breakpoint 'large'"
                        }],
                    "text": "Vid brytpunkt 'large'"
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "afOnXLarge",
                "name": "afOnXLarge",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "At breakpoint 'xlarge'"
                        }],
                    "text": "Vid brytpunkt 'xlarge'"
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "hostElement"; }
}
