import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-a53686b3.js';
import { U as UtilBreakpointObserverBreakpoints } from './p-cdcaf0eb.js';

const utilBreakpointObserverCss = ".sc-digi-util-breakpoint-observer-h .digi-util-breakpoint-observer.sc-digi-util-breakpoint-observer{--SMALL:small;--MEDIUM:medium;--LARGE:large;--XLARGE:xlarge}.sc-digi-util-breakpoint-observer-h .digi-util-breakpoint-observer__observer.sc-digi-util-breakpoint-observer{--digi--util-breakpoint-observer--breakpoint:var(--SMALL);border:0;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;pointer-events:none;transition:transform 0.01s;transform:rotate(0deg)}@media (min-width: 48rem){.sc-digi-util-breakpoint-observer-h .digi-util-breakpoint-observer__observer.sc-digi-util-breakpoint-observer{--digi--util-breakpoint-observer--breakpoint:var(--MEDIUM);transform:rotate(10deg)}}@media (min-width: 61.9375rem){.sc-digi-util-breakpoint-observer-h .digi-util-breakpoint-observer__observer.sc-digi-util-breakpoint-observer{--digi--util-breakpoint-observer--breakpoint:var(--LARGE);transform:rotate(20deg)}}@media (min-width: 75rem){.sc-digi-util-breakpoint-observer-h .digi-util-breakpoint-observer__observer.sc-digi-util-breakpoint-observer{--digi--util-breakpoint-observer--breakpoint:var(--XLARGE);transform:rotate(30deg)}}";
const DigiUtilBreakpointObserverStyle0 = utilBreakpointObserverCss;

const UtilBreakpointObserver = /*@__PURE__*/ proxyCustomElement(class UtilBreakpointObserver extends H {
    constructor() {
        super();
        this.__registerHost();
        this.afOnChange = createEvent(this, "afOnChange", 7);
        this.afOnSmall = createEvent(this, "afOnSmall", 7);
        this.afOnMedium = createEvent(this, "afOnMedium", 7);
        this.afOnLarge = createEvent(this, "afOnLarge", 7);
        this.afOnXLarge = createEvent(this, "afOnXLarge", 7);
    }
    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: '2401a348a719b634b60ef6b186da7cf297c16743' }, h("div", { key: '06625da48adae31e39f21e78d27987f6a595b808', class: "digi-util-breakpoint-observer" }, h("div", { key: 'd925d3ce668b84f45f85666becfd66196979c304', ref: (el) => (this._observer = el), onTransitionEnd: (e) => this.handleBreakpoint(e), class: "digi-util-breakpoint-observer__observer" }), h("slot", { key: '20f02ba8824f6c6d9c44f417670fc3e19c3a1e4b' }))));
    }
    get hostElement() { return this; }
    static get style() { return DigiUtilBreakpointObserverStyle0; }
}, [6, "digi-util-breakpoint-observer"]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["digi-util-breakpoint-observer"];
    components.forEach(tagName => { switch (tagName) {
        case "digi-util-breakpoint-observer":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, UtilBreakpointObserver);
            }
            break;
    } });
}

export { UtilBreakpointObserver as U, defineCustomElement as d };
