import { Component, ChangeDetectionStrategy, Input, Inject, ChangeDetectorRef, Optional } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatTabsModule } from '@angular/material/tabs';
import { LayoutComponentRendererSADirective } from '@anglr/dynamic/layout';
import { CastPipesModule, CommonUtilsModule, FirstUppercaseLocalizeSAPipe, HostDisplayFlexStyle } from '@anglr/common';
import { EditorHotkeys, MetadataHistoryManager, PackageManagerModule } from '@anglr/dynamic';
import { nameof } from '@jscrpt/common';
import { Subscription } from 'rxjs';
import { ComponentsPaletteSAComponent } from '../componentsPalette/componentsPalette.component';
import { ComponentsTreeSAComponent } from '../componentsTree/componentsTree.component';
import { PropertiesEditorSAComponent } from '../propertiesEditor/propertiesEditor.component';
import { LAYOUT_DESIGNER_COMPONENT_TRANSFORM } from '../../misc/providers';
import { LAYOUT_HISTORY_MANAGER } from '../../misc/tokens';
import { DndBusService, LayoutDndCoreModule } from '../../modules';
import { LayoutEditorDragPreviewSAComponent } from '../layoutEditorDragPreview/layoutEditorDragPreview.component';
import * as i0 from "@angular/core";
import * as i1 from "@anglr/dynamic";
import * as i2 from "../../modules/layoutDndCore/components/dndCorePreview/dndCorePreview.component";
import * as i3 from "../../modules/layoutDndCore/directives/dndCorePreviewTemplate/dndCorePreviewTemplate.directive";
import * as i4 from "../../../../src/modules/packageManager/components/packageManager/packageManager.component";
import * as i5 from "@angular/material/tabs";
import * as i6 from "@angular/common";
import * as i7 from "@anglr/common";
/**
 * Component that represents layout editor with palette, tree and properties
 */
export class LayoutEditorSAComponent {
    //######################### constructor #########################
    constructor(history, changeDetector, hotkeys) {
        this.history = history;
        this.changeDetector = changeDetector;
        this.hotkeys = hotkeys;
        //######################### protected properties #########################
        /**
         * Subscriptions created during initialization
         */
        this.initSubscriptions = new Subscription();
        //######################### public properties - inputs #########################
        /**
         * Metadata that are used for rendering
         */
        this.metadata = null;
        hotkeys === null || hotkeys === void 0 ? void 0 : hotkeys.init();
    }
    //######################### public methods - implementation of OnInit #########################
    /**
     * Initialize component
     */
    ngOnInit() {
        this.initSubscriptions.add(this.history.pop.subscribe(metadata => {
            this.metadata = metadata;
            this.changeDetector.detectChanges();
        }));
        if (this.hotkeys) {
            this.initSubscriptions.add(this.hotkeys.undo.subscribe(() => this.history.undo()));
            this.initSubscriptions.add(this.hotkeys.redo.subscribe(() => this.history.redo()));
        }
    }
    //######################### public methods - implementation of OnChanges #########################
    /**
     * Called when input value changes
     */
    ngOnChanges(changes) {
        if (nameof('metadata') in changes) {
            this.history.clean();
            if (this.metadata) {
                this.history.setInitialState(this.metadata);
            }
        }
    }
    //######################### public methods - implementation of OnDestroy #########################
    /**
     * Called when component is destroyed
     */
    ngOnDestroy() {
        var _a;
        this.initSubscriptions.unsubscribe();
        (_a = this.hotkeys) === null || _a === void 0 ? void 0 : _a.destroy();
    }
}
LayoutEditorSAComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: LayoutEditorSAComponent, deps: [{ token: LAYOUT_HISTORY_MANAGER }, { token: i0.ChangeDetectorRef }, { token: i1.EditorHotkeys, optional: true }], target: i0.ɵɵFactoryTarget.Component });
LayoutEditorSAComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: LayoutEditorSAComponent, isStandalone: true, selector: "layout-editor", inputs: { metadata: "metadata", packages: "packages", whiteList: "whiteList", blackList: "blackList" }, providers: [
        LAYOUT_DESIGNER_COMPONENT_TRANSFORM,
        DndBusService,
    ], usesOnChanges: true, ngImport: i0, template: "<div class=\"dynamic-flex-row dynamic-margin-top-big dynamic-flex-1\">\n    <mat-tab-group>\n        <mat-tab [label]=\"'hierarchy'|firstUppercaseLocalize|asRequired\">\n            <components-tree></components-tree>\n        </mat-tab>\n\n        <mat-tab [label]=\"'palette'|firstUppercaseLocalize|asRequired\">\n            <package-manager *ngIf=\"!(packages | isPresent)\"></package-manager>\n            <components-palette [packages]=\"packages\" [whiteList]=\"whiteList\" [blackList]=\"blackList\"></components-palette>\n        </mat-tab>\n    </mat-tab-group>\n\n    <div class=\"dynamic-flex-1 layout-content dynamic-thin-scrollbar\">\n        <ng-container [layoutComponentRenderer]=\"metadata\"></ng-container>\n    </div>\n\n    <properties-editor></properties-editor>\n</div>\n\n<dnd-core-drag-preview>\n    <layout-editor-drag-preview class=\"mat-elevation-z4\" *dndCorePreviewTemplate=\"let data\" [layoutMetadata]=\"data.dragData.metadata\"></layout-editor-drag-preview>\n</dnd-core-drag-preview>", styles: [":host{display: flex;}"], dependencies: [{ kind: "component", type: ComponentsTreeSAComponent, selector: "components-tree" }, { kind: "component", type: ComponentsPaletteSAComponent, selector: "components-palette", inputs: ["packages", "whiteList", "blackList"] }, { kind: "component", type: PropertiesEditorSAComponent, selector: "properties-editor" }, { kind: "ngmodule", type: LayoutDndCoreModule }, { kind: "component", type: i2.DndCorePreviewComponent, selector: "dnd-core-drag-preview" }, { kind: "directive", type: i3.DndCorePreviewTemplateDirective, selector: "[dndCorePreviewTemplate]", inputs: ["dndCorePreviewTemplateType"] }, { kind: "component", type: LayoutEditorDragPreviewSAComponent, selector: "layout-editor-drag-preview", inputs: ["layoutMetadata"] }, { kind: "directive", type: LayoutComponentRendererSADirective, selector: "[layoutComponentRenderer]", inputs: ["layoutComponentRenderer", "layoutComponentRendererInjector", "layoutComponentRendererDisableTransformer"], outputs: ["layoutComponentRendererComponentChange", "componentElementChange"], exportAs: ["layoutComponentRenderer"] }, { kind: "ngmodule", type: PackageManagerModule }, { kind: "component", type: i4.PackageManagerComponent, selector: "package-manager" }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i5.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i5.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "preserveContent", "backgroundColor"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: CommonUtilsModule }, { kind: "pipe", type: i7.IsPresentSAPipe, name: "isPresent" }, { kind: "pipe", type: FirstUppercaseLocalizeSAPipe, name: "firstUppercaseLocalize" }, { kind: "ngmodule", type: CastPipesModule }, { kind: "pipe", type: i7.AsRequiredTypePipe, name: "asRequired" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: LayoutEditorSAComponent, decorators: [{
            type: Component,
            args: [{ selector: 'layout-editor', providers: [
                        LAYOUT_DESIGNER_COMPONENT_TRANSFORM,
                        DndBusService,
                    ], standalone: true, imports: [
                        ComponentsTreeSAComponent,
                        ComponentsPaletteSAComponent,
                        PropertiesEditorSAComponent,
                        LayoutDndCoreModule,
                        LayoutEditorDragPreviewSAComponent,
                        LayoutComponentRendererSADirective,
                        PackageManagerModule,
                        MatTabsModule,
                        CommonModule,
                        CommonUtilsModule,
                        FirstUppercaseLocalizeSAPipe,
                        CastPipesModule,
                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dynamic-flex-row dynamic-margin-top-big dynamic-flex-1\">\n    <mat-tab-group>\n        <mat-tab [label]=\"'hierarchy'|firstUppercaseLocalize|asRequired\">\n            <components-tree></components-tree>\n        </mat-tab>\n\n        <mat-tab [label]=\"'palette'|firstUppercaseLocalize|asRequired\">\n            <package-manager *ngIf=\"!(packages | isPresent)\"></package-manager>\n            <components-palette [packages]=\"packages\" [whiteList]=\"whiteList\" [blackList]=\"blackList\"></components-palette>\n        </mat-tab>\n    </mat-tab-group>\n\n    <div class=\"dynamic-flex-1 layout-content dynamic-thin-scrollbar\">\n        <ng-container [layoutComponentRenderer]=\"metadata\"></ng-container>\n    </div>\n\n    <properties-editor></properties-editor>\n</div>\n\n<dnd-core-drag-preview>\n    <layout-editor-drag-preview class=\"mat-elevation-z4\" *dndCorePreviewTemplate=\"let data\" [layoutMetadata]=\"data.dragData.metadata\"></layout-editor-drag-preview>\n</dnd-core-drag-preview>", styles: [":host{display: flex;}"] }]
        }], ctorParameters: () => [{ type: i1.MetadataHistoryManager, decorators: [{
                    type: Inject,
                    args: [LAYOUT_HISTORY_MANAGER]
                }] }, { type: i0.ChangeDetectorRef }, { type: i1.EditorHotkeys, decorators: [{
                    type: Optional
                }] }], propDecorators: { metadata: [{
                type: Input
            }], packages: [{
                type: Input
            }], whiteList: [{
                type: Input
            }], blackList: [{
                type: Input
            }] } });
//# sourceMappingURL=layoutEditor.component.js.map