import { ContentChild, Directive, Input } from '@angular/core';
import { LayoutComponentRendererSADirective } from '@anglr/dynamic/layout';
import { nameof } from '@jscrpt/common';
import { Subscription } from 'rxjs';
import * as i0 from "@angular/core";
/**
 * Applies min dimensions to designed element, so it can be visible event when it is empty
 */
export class DesignerMinDimensionSADirective {
    constructor() {
        /**
         * Indication whether is min dimensions active
         */
        this.active = false;
        /**
         * Subscriptions created during initialization
         */
        this.initSubscriptions = new Subscription();
        /**
         * Minimal height of element
         */
        this.minHeight = '';
        /**
         * Minimal width of element
         */
        this.minWidth = '';
        //######################### public properties - inputs #########################
        /**
         * Indication whether is flow of this component horizontal or vertical
         */
        this.horizontal = false;
        /**
         * Indication whether can drop children inside of this
         */
        this.canDrop = false;
        /**
         * Layout editor metadata
         */
        this.editorMetadata = null;
    }
    //######################### public methods - implementation of OnInit #########################
    /**
     * Initialize component
     */
    ngOnInit() {
        this.observer = new MutationObserver(changes => {
            for (const change of changes) {
                if (change.target instanceof HTMLElement) {
                    this.updatedDimensions(change.target);
                }
            }
        });
        this.initSubscriptions.add(this.layoutComponentRendererDirective?.componentElementChange.subscribe(element => {
            if (!element) {
                this.observer?.disconnect();
                return;
            }
            this.element = element;
            this.init();
        }));
    }
    //######################### public methods - implementation of OnChanges #########################
    /**
     * Called when input value changes
     */
    ngOnChanges(changes) {
        if (nameof('editorMetadata') in changes) {
            this.init();
        }
    }
    //######################### public methods - implementation of OnDestroy #########################
    /**
     * Called when component is destroyed
     */
    ngOnDestroy() {
        this.observer?.disconnect();
        this.initSubscriptions.unsubscribe();
    }
    //######################### protected methods #########################
    /**
     * Initialize watching for children
     */
    init() {
        if (!this.element || !this.editorMetadata) {
            return;
        }
        const element = this.editorMetadata.getChildrenContainer?.(this.element) ?? this.element;
        this.minHeight = element.style.minHeight;
        this.minWidth = element.style.minWidth;
        this.updatedDimensions(element);
        this.observer?.observe(element, {
            childList: true,
        });
    }
    /**
     * Updates min dimensions if empty
     * @param element - Element to be checked for changes
     */
    updatedDimensions(element) {
        const nodesArray = [];
        element.childNodes.forEach(node => nodesArray.push(node));
        const contentsLength = nodesArray.filter(itm => itm.nodeName != '#comment').length;
        if ((contentsLength && !this.active) ||
            (!contentsLength && this.active)) {
            return;
        }
        //deactivate, children are present
        if (contentsLength) {
            //only placeholder is present
            if (element.children.length === 1 && element.children.item(0)?.classList.contains('drag-placeholder')) {
                return;
            }
            this.active = false;
            if (this.horizontal) {
                element.style.minWidth = this.minWidth;
            }
            else {
                element.style.minHeight = this.minHeight;
            }
        }
        //activate, children are not present
        else {
            this.active = true;
            if (this.horizontal) {
                element.style.minWidth = this.canDrop ? '30px' : '10px';
            }
            else {
                element.style.minHeight = this.canDrop ? '30px' : '10px';
            }
        }
    }
}
DesignerMinDimensionSADirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DesignerMinDimensionSADirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
DesignerMinDimensionSADirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.4", type: DesignerMinDimensionSADirective, isStandalone: true, selector: "[designerMinWidth]", inputs: { horizontal: "horizontal", canDrop: "canDrop", editorMetadata: "editorMetadata" }, queries: [{ propertyName: "layoutComponentRendererDirective", first: true, predicate: LayoutComponentRendererSADirective, descendants: true, static: true }], usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DesignerMinDimensionSADirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[designerMinWidth]',
                    standalone: true
                }]
        }], propDecorators: { layoutComponentRendererDirective: [{
                type: ContentChild,
                args: [LayoutComponentRendererSADirective, { static: true }]
            }], horizontal: [{
                type: Input
            }], canDrop: [{
                type: Input
            }], editorMetadata: [{
                type: Input
            }] } });
//# sourceMappingURL=designerMinDimension.directive.js.map