import { DragDropModule } from '@angular/cdk/drag-drop';
import { CommonModule } from '@angular/common';
import { Component, forwardRef, Input } from '@angular/core';
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
import { EntityCapacity, OcapCoreModule } from '@metad/ocap-angular/core';
import { C_MEASURES, isPropertyMeasure, Syntax } from '@metad/ocap-core';
import { BehaviorSubject, Subject } from 'rxjs';
import { MatSidenavModule } from '@angular/material/sidenav';
import { NgmEntitySchemaComponent } from '../entity-schema/entity-schema.component';
import { ResizerModule } from '@metad/ocap-angular/common';
import { TranslateModule } from '@ngx-translate/core';
import { MatIconModule } from '@angular/material/icon';
import { MonacoEditorModule } from 'ngx-monaco-editor';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatButtonModule } from '@angular/material/button';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/forms";
import * as i3 from "@ngx-translate/core";
import * as i4 from "@angular/cdk/drag-drop";
import * as i5 from "@angular/material/sidenav";
import * as i6 from "@angular/material/icon";
import * as i7 from "@angular/material/tooltip";
import * as i8 from "@angular/material/button";
import * as i9 from "ngx-monaco-editor";
import * as i10 from "@metad/ocap-angular/common";
import * as i11 from "@metad/ocap-angular/core";
export class NgmFormulaEditorComponent {
    constructor() {
        this.Syntax = Syntax;
        this.EntityCapacity = EntityCapacity;
        this.editorOptions = {
            theme: 'vs',
            automaticLayout: true,
            language: 'sql'
        };
        this.editor$ = new BehaviorSubject(null);
        this.cursorSelection$ = new Subject();
        this.calculations = [];
        this._statement = '';
    }
    // CodeEditor
    get editor() {
        return this.editor$.value;
    }
    get statement() {
        return this._statement;
    }
    set statement(value) {
        this._statement = value;
        this._onChange?.(this._statement);
    }
    writeValue(obj) {
        this._statement = obj;
    }
    registerOnChange(fn) {
        this._onChange = fn;
    }
    registerOnTouched(fn) { }
    setDisabledState(isDisabled) { }
    onInit(editor) {
        this.editor$.next(editor);
        this.editor.onDidChangeCursorSelection((e) => {
            this.cursorSelection$.next(e);
        });
    }
    onResized(event) {
        this.editor?.layout();
    }
    drop(event) {
        if (event.container.id === 'ngm-formula-editor') {
            if (event.previousContainer.id === 'ngm-formula-editor__entity-schema') {
                if (isPropertyMeasure(event.item.data)) {
                    this.insert(`[${C_MEASURES}].[${event.item.data.name}]`);
                }
                else {
                    this.insert(event.item.data.name);
                }
            }
        }
    }
    insert(text) {
        this.editor?.trigger('keyboard', 'type', { text: text });
    }
    formatDocument() {
        this.editor?.getAction('editor.action.formatDocument').run();
    }
    openHelpLink() {
        window.open(this.helpLink, '_blank');
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: NgmFormulaEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: NgmFormulaEditorComponent, isStandalone: true, selector: "ngm-formula-editor", inputs: { dataSettings: "dataSettings", helpLink: "helpLink", editorOptions: "editorOptions" }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                multi: true,
                useExisting: forwardRef(() => NgmFormulaEditorComponent)
            }
        ], ngImport: i0, template: "<mat-drawer-container class=\"flex-1\" [hasBackdrop]=\"false\" autosize cdkDropListGroup>\n    <mat-drawer #drawer mode=\"side\" position=\"end\" ngmResizer [resizerWidth]=\"330\" class=\"ngm-formula-editor__drawer\">\n        <div ngmResizerBar resizerBarPosition=\"left\" cdkDrag style=\"z-index: 2;\"></div>\n        \n        <ngm-entity-schema class=\"flex-1\"\n            id=\"ngm-formula-editor__entity-schema\"\n            cdkDropList\n            [cdkDropListData]=\"[]\"\n\n            [dataSettings]=\"dataSettings\"\n            [capacities]=\"[\n                EntityCapacity.Dimension,\n                EntityCapacity.Hierarchy,\n                EntityCapacity.Measure,\n                EntityCapacity.Calculation\n            ]\"\n        >\n        </ngm-entity-schema>\n    </mat-drawer>\n    <mat-drawer-content class=\"flex flex-col justify-start items-stretch\">\n        <div class=\"flex justify-between items-center\">\n           <span>\n            {{ 'Ngm.Formula.Editor.EditFormula' | translate: {Default: \"Edit Formula\"} }}\n           </span>\n\n           <div class=\"flex justify-around items-center gap-2\">\n                <!-- <button mat-icon-button displayDensity=\"cosy\" [matTooltip]=\"'Ngm.Formula.Editor.Format' | translate: {Default: 'Format'}\"\n                    (click)=\"formatDocument()\">\n                    <mat-icon >text_format</mat-icon>\n                </button> -->\n\n                <button mat-icon-button *ngIf=\"helpLink\" displayDensity=\"cosy\" (click)=\"openHelpLink()\" [matTooltip]=\"'Ngm.Formula.Editor.Help' | translate: {Default: 'Help'}\" >\n                    <mat-icon>help_outline</mat-icon>\n                </button>\n\n                <button mat-icon-button displayDensity=\"cosy\" class=\"ngm-formula-editor__drawer-anchor\"\n                    (click)=\"drawer.toggle()\"\n                >\n                    <mat-icon *ngIf=\"drawer.opened\">chevron_right</mat-icon>\n                    <mat-icon *ngIf=\"!drawer.opened\">menu_open</mat-icon>\n                </button>\n           </div>\n        </div>\n\n        <div style=\"flex: 1; width: 100%; overflow: hidden;\">\n            <ngx-monaco-editor id=\"ngm-formula-editor\" style=\"width: 100%;\" [ngStyle]=\"{'height': 'calc(100% - 1rem)'}\"\n                cdkDropList\n                [cdkDropListData]=\"calculations\"\n                (cdkDropListDropped)=\"drop($event)\"\n                [options]=\"editorOptions\"\n                [(ngModel)]=\"statement\"\n                (resized)=\"onResized($event)\"\n                (onInit)=\"onInit($event)\"\n            ></ngx-monaco-editor>\n        </div>\n    </mat-drawer-content>\n</mat-drawer-container>\n", styles: [":host{display:flex}.mat-drawer-content{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i5.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i5.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i5.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MonacoEditorModule }, { kind: "component", type: i9.EditorComponent, selector: "ngx-monaco-editor", inputs: ["options", "model"] }, { kind: "component", type: NgmEntitySchemaComponent, selector: "ngm-entity-schema", inputs: ["dsCoreService", "appearance", "selectedHierarchy", "capacities", "dataSettings"] }, { kind: "ngmodule", type: ResizerModule }, { kind: "directive", type: i10.ResizerDirective, selector: "[ngmResizer]", inputs: ["resizerWidth", "resizerHeight", "ngmResizerDisabled"], outputs: ["resizerWidthChange", "resizerHeightChange"] }, { kind: "directive", type: i10.ResizerBarDirective, selector: "[ngmResizerBar]", inputs: ["resizerBarPosition"] }, { kind: "ngmodule", type: OcapCoreModule }, { kind: "directive", type: i11.DensityDirective, selector: "[displayDensity]", inputs: ["displayDensity"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: NgmFormulaEditorComponent, decorators: [{
            type: Component,
            args: [{ standalone: true, imports: [
                        CommonModule,
                        FormsModule,
                        TranslateModule,
                        DragDropModule,
                        MatSidenavModule,
                        MatIconModule,
                        MatTooltipModule,
                        MatButtonModule,
                        MonacoEditorModule,
                        NgmEntitySchemaComponent,
                        ResizerModule,
                        OcapCoreModule,
                    ], selector: 'ngm-formula-editor', providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            multi: true,
                            useExisting: forwardRef(() => NgmFormulaEditorComponent)
                        }
                    ], template: "<mat-drawer-container class=\"flex-1\" [hasBackdrop]=\"false\" autosize cdkDropListGroup>\n    <mat-drawer #drawer mode=\"side\" position=\"end\" ngmResizer [resizerWidth]=\"330\" class=\"ngm-formula-editor__drawer\">\n        <div ngmResizerBar resizerBarPosition=\"left\" cdkDrag style=\"z-index: 2;\"></div>\n        \n        <ngm-entity-schema class=\"flex-1\"\n            id=\"ngm-formula-editor__entity-schema\"\n            cdkDropList\n            [cdkDropListData]=\"[]\"\n\n            [dataSettings]=\"dataSettings\"\n            [capacities]=\"[\n                EntityCapacity.Dimension,\n                EntityCapacity.Hierarchy,\n                EntityCapacity.Measure,\n                EntityCapacity.Calculation\n            ]\"\n        >\n        </ngm-entity-schema>\n    </mat-drawer>\n    <mat-drawer-content class=\"flex flex-col justify-start items-stretch\">\n        <div class=\"flex justify-between items-center\">\n           <span>\n            {{ 'Ngm.Formula.Editor.EditFormula' | translate: {Default: \"Edit Formula\"} }}\n           </span>\n\n           <div class=\"flex justify-around items-center gap-2\">\n                <!-- <button mat-icon-button displayDensity=\"cosy\" [matTooltip]=\"'Ngm.Formula.Editor.Format' | translate: {Default: 'Format'}\"\n                    (click)=\"formatDocument()\">\n                    <mat-icon >text_format</mat-icon>\n                </button> -->\n\n                <button mat-icon-button *ngIf=\"helpLink\" displayDensity=\"cosy\" (click)=\"openHelpLink()\" [matTooltip]=\"'Ngm.Formula.Editor.Help' | translate: {Default: 'Help'}\" >\n                    <mat-icon>help_outline</mat-icon>\n                </button>\n\n                <button mat-icon-button displayDensity=\"cosy\" class=\"ngm-formula-editor__drawer-anchor\"\n                    (click)=\"drawer.toggle()\"\n                >\n                    <mat-icon *ngIf=\"drawer.opened\">chevron_right</mat-icon>\n                    <mat-icon *ngIf=\"!drawer.opened\">menu_open</mat-icon>\n                </button>\n           </div>\n        </div>\n\n        <div style=\"flex: 1; width: 100%; overflow: hidden;\">\n            <ngx-monaco-editor id=\"ngm-formula-editor\" style=\"width: 100%;\" [ngStyle]=\"{'height': 'calc(100% - 1rem)'}\"\n                cdkDropList\n                [cdkDropListData]=\"calculations\"\n                (cdkDropListDropped)=\"drop($event)\"\n                [options]=\"editorOptions\"\n                [(ngModel)]=\"statement\"\n                (resized)=\"onResized($event)\"\n                (onInit)=\"onInit($event)\"\n            ></ngx-monaco-editor>\n        </div>\n    </mat-drawer-content>\n</mat-drawer-container>\n", styles: [":host{display:flex}.mat-drawer-content{display:flex}\n"] }]
        }], propDecorators: { dataSettings: [{
                type: Input
            }], helpLink: [{
                type: Input
            }], editorOptions: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 