import { Component, ChangeDetectionStrategy, ChangeDetectorRef, ElementRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FirstUppercaseLocalizeSAPipe } from '@anglr/common';
import { RelationsNodeBase, RelationsNodeHeaderSAComponent, RelationNodeInputSAComponent } from '@anglr/dynamic/relations-editor';
import { TitledDialogService } from '@anglr/common/material';
import { extend } from '@jscrpt/common';
import { lastValueFrom } from '@jscrpt/common/rxjs';
import { ConfigureNodeEndpointSAComponent } from '../../../components';
import * as i0 from "@angular/core";
import * as i1 from "@anglr/common/material";
import * as i2 from "@angular/common";
//TODO: create mixin
/**
 * Relations node component for component outputs
 */
export class ComponentOutputsNodeSAComponent extends RelationsNodeBase {
    //######################### protected properties - template bindings #########################
    /**
     * Gets component outputs
     */
    get endpoints() {
        var _a, _b;
        if (!this.metadata) {
            return [];
        }
        (_a = this.metadata).relationsOptions ?? (_a.relationsOptions = {
            outputs: []
        });
        return ((_b = this.metadata.relationsOptions).outputs ?? (_b.outputs = []));
    }
    //######################### constructor #########################
    constructor(changeDetector, element, dialog) {
        super(changeDetector, element);
        this.dialog = dialog;
    }
    //######################### protected methods - template bindings #########################
    /**
     * Adds new output endpoint
     */
    async addEndpoint() {
        const param = {
            name: '',
            defaultValue: null,
            skipInit: false,
            allowSkipInit: true,
        };
        if (await this.configureEndpoint(param)) {
            this.endpoints.push(param);
            this.history.getNewState();
        }
    }
    /**
     * Removes endpoint
     * @param endpoint - Endpoint to be removed
     */
    removeEndpoint(endpoint) {
        const index = this.endpoints.indexOf(endpoint);
        if (index >= 0) {
            this.endpoints.splice(index, 1);
            this.history.getNewState();
        }
    }
    /**
     * Configures endpoint
     * @param endpoint - Endpoint to be configured
     */
    async configureEndpoint(endpoint) {
        const original = JSON.parse(JSON.stringify(endpoint));
        const result = await lastValueFrom(this.dialog.open(ConfigureNodeEndpointSAComponent, {
            title: 'configure component output',
            width: '60vw',
            data: endpoint
        }).afterClosed());
        if (!result) {
            extend(endpoint, original);
        }
        else {
            this.history.getNewState();
        }
        return result ?? false;
    }
}
ComponentOutputsNodeSAComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ComponentOutputsNodeSAComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.TitledDialogService }], target: i0.ɵɵFactoryTarget.Component });
ComponentOutputsNodeSAComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: ComponentOutputsNodeSAComponent, isStandalone: true, selector: "component-outputs-node", usesInheritance: true, ngImport: i0, template: "<relations-node-header [parent]=\"this\" [destroySubject]=\"destroySubject\" [name]=\"'component inputs'|firstUppercaseLocalize\"></relations-node-header>\n\n<div class=\"node-content\">\n    <div class=\"inputs-outputs\">\n        <div class=\"inputs\">\n            <div class=\"input\" *ngFor=\"let endpoint of endpoints\">\n                <relation-node-input [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" [name]=\"endpoint.name\" [parent]=\"this\"></relation-node-input>\n\n                <div class=\"dynamic-flex-row\">\n                    <div>{{endpoint.name}}</div>\n\n                    <button type=\"button\" class=\"dynamic-btn-icon dynamic-margin-horizontal-extra-small\" (click)=\"$event.preventDefault(); $event.stopPropagation(); configureEndpoint(endpoint)\">\n                        <span class=\"fas fa-cog\"></span>\n                    </button>\n\n                    <button type=\"button\" class=\"dynamic-btn-icon\" (click)=\"$event.preventDefault(); $event.stopPropagation(); removeEndpoint(endpoint)\">\n                        <span class=\"fas fa-times\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"dynamic-flex-row\">\n                <button type=\"button\" class=\"dynamic-btn-icon dynamic-margin-left-extra-small\" (click)=\"$event.preventDefault(); $event.stopPropagation(); addEndpoint()\">\n                    <span class=\"fas fa-plus\"></span>\n                </button>\n            </div>\n        </div>\n\n        <div class=\"outputs\">\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: RelationsNodeHeaderSAComponent, selector: "relations-node-header", inputs: ["parent", "destroySubject", "name"] }, { kind: "component", type: RelationNodeInputSAComponent, selector: "relation-node-input" }, { kind: "pipe", type: FirstUppercaseLocalizeSAPipe, name: "firstUppercaseLocalize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ComponentOutputsNodeSAComponent, decorators: [{
            type: Component,
            args: [{ selector: 'component-outputs-node', standalone: true, imports: [
                        CommonModule,
                        RelationsNodeHeaderSAComponent,
                        RelationNodeInputSAComponent,
                        FirstUppercaseLocalizeSAPipe,
                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<relations-node-header [parent]=\"this\" [destroySubject]=\"destroySubject\" [name]=\"'component inputs'|firstUppercaseLocalize\"></relations-node-header>\n\n<div class=\"node-content\">\n    <div class=\"inputs-outputs\">\n        <div class=\"inputs\">\n            <div class=\"input\" *ngFor=\"let endpoint of endpoints\">\n                <relation-node-input [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" [name]=\"endpoint.name\" [parent]=\"this\"></relation-node-input>\n\n                <div class=\"dynamic-flex-row\">\n                    <div>{{endpoint.name}}</div>\n\n                    <button type=\"button\" class=\"dynamic-btn-icon dynamic-margin-horizontal-extra-small\" (click)=\"$event.preventDefault(); $event.stopPropagation(); configureEndpoint(endpoint)\">\n                        <span class=\"fas fa-cog\"></span>\n                    </button>\n\n                    <button type=\"button\" class=\"dynamic-btn-icon\" (click)=\"$event.preventDefault(); $event.stopPropagation(); removeEndpoint(endpoint)\">\n                        <span class=\"fas fa-times\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"dynamic-flex-row\">\n                <button type=\"button\" class=\"dynamic-btn-icon dynamic-margin-left-extra-small\" (click)=\"$event.preventDefault(); $event.stopPropagation(); addEndpoint()\">\n                    <span class=\"fas fa-plus\"></span>\n                </button>\n            </div>\n        </div>\n\n        <div class=\"outputs\">\n        </div>\n    </div>\n</div>\n" }]
        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.TitledDialogService }] });
//# sourceMappingURL=componentOutputsNode.component.js.map