import { Component, ChangeDetectionStrategy, ElementRef, Input, ChangeDetectorRef } from '@angular/core';
import { LayoutComponentRendererSADirective } from '@anglr/dynamic/layout';
import { Subscription } from 'rxjs';
import { LiveEventService } from '../../services';
import * as i0 from "@angular/core";
import * as i1 from "../../services";
/**
 * Component displaying layout designer layout overlay
 */
export class LayoutDesignerOverlayForSAComponent {
    //######################### constructor #########################
    constructor(element, changeDetector, liveEvents) {
        this.element = element;
        this.changeDetector = changeDetector;
        this.liveEvents = liveEvents;
        /**
         * Subscriptions created during initialization
         */
        this.initSubscriptions = new Subscription();
    }
    //######################### public methods - implementation of OnInit #########################
    /**
     * Initialize component
     */
    ngOnInit() {
        this.observer = new MutationObserver(() => this.changeDetector.detectChanges());
        //TODO: make this working, use existing html element
        this.htmlElement = this.layoutComponentRendererDirective?.componentRef?.hostView?.rootNodes?.[0];
        if (this.htmlElement) {
            this.observer?.observe(this.htmlElement, { attributeFilter: ['style'] });
        }
        this.initSubscriptions.add(this.liveEvents.enabledChange.subscribe(() => this.toggleLiveEvents()));
        this.toggleLiveEvents();
    }
    //######################### public methods - implementation of OnDestroy #########################
    /**
     * Called when component is destroyed
     */
    ngOnDestroy() {
        this.observer?.disconnect();
    }
    //######################### protected methods #########################
    /**
     * Toggles live events for element
     */
    toggleLiveEvents() {
        if (this.liveEvents.enabled) {
            this.element.nativeElement.style.pointerEvents = 'none';
        }
        else {
            this.element.nativeElement.style.pointerEvents = 'all';
        }
    }
}
LayoutDesignerOverlayForSAComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: LayoutDesignerOverlayForSAComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.LiveEventService }], target: i0.ɵɵFactoryTarget.Component });
LayoutDesignerOverlayForSAComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: LayoutDesignerOverlayForSAComponent, isStandalone: true, selector: "[layoutDesignerOverlayFor]", inputs: { layoutComponentRendererDirective: ["layoutDesignerOverlayFor", "layoutComponentRendererDirective"] }, ngImport: i0, template: "<div class=\"margin-top-div\" [style.height]=\"htmlElement?.style?.marginTop\"></div>\n<div class=\"margin-bottom-div\" [style.height]=\"htmlElement?.style?.marginBottom\"></div>\n<div class=\"margin-left-div\" [style.width]=\"htmlElement?.style?.marginLeft\"></div>\n<div class=\"margin-right-div\" [style.width]=\"htmlElement?.style?.marginRight\"></div>\n<div class=\"padding-top-div\" [style.height]=\"htmlElement?.style?.paddingTop\"></div>\n<div class=\"padding-bottom-div\" [style.height]=\"htmlElement?.style?.paddingBottom\"></div>\n<div class=\"padding-left-div\" [style.width]=\"htmlElement?.style?.paddingLeft\"></div>\n<div class=\"padding-right-div\" [style.width]=\"htmlElement?.style?.paddingRight\"></div>\n<div class=\"border-top-div\" [style.height]=\"htmlElement?.style?.borderTop\"></div>\n<div class=\"border-bottom-div\" [style.height]=\"htmlElement?.style?.borderBottom\"></div>\n<div class=\"border-left-div\" [style.width]=\"htmlElement?.style?.borderLeft\"></div>\n<div class=\"border-right-div\" [style.width]=\"htmlElement?.style?.borderRight\"></div>", changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: LayoutDesignerOverlayForSAComponent, decorators: [{
            type: Component,
            args: [{ selector: '[layoutDesignerOverlayFor]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"margin-top-div\" [style.height]=\"htmlElement?.style?.marginTop\"></div>\n<div class=\"margin-bottom-div\" [style.height]=\"htmlElement?.style?.marginBottom\"></div>\n<div class=\"margin-left-div\" [style.width]=\"htmlElement?.style?.marginLeft\"></div>\n<div class=\"margin-right-div\" [style.width]=\"htmlElement?.style?.marginRight\"></div>\n<div class=\"padding-top-div\" [style.height]=\"htmlElement?.style?.paddingTop\"></div>\n<div class=\"padding-bottom-div\" [style.height]=\"htmlElement?.style?.paddingBottom\"></div>\n<div class=\"padding-left-div\" [style.width]=\"htmlElement?.style?.paddingLeft\"></div>\n<div class=\"padding-right-div\" [style.width]=\"htmlElement?.style?.paddingRight\"></div>\n<div class=\"border-top-div\" [style.height]=\"htmlElement?.style?.borderTop\"></div>\n<div class=\"border-bottom-div\" [style.height]=\"htmlElement?.style?.borderBottom\"></div>\n<div class=\"border-left-div\" [style.width]=\"htmlElement?.style?.borderLeft\"></div>\n<div class=\"border-right-div\" [style.width]=\"htmlElement?.style?.borderRight\"></div>" }]
        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.LiveEventService }], propDecorators: { layoutComponentRendererDirective: [{
                type: Input,
                args: ['layoutDesignerOverlayFor']
            }] } });
//# sourceMappingURL=layoutDesignerOverlayFor.component.js.map