import { DragDropModule } from '@angular/cdk/drag-drop';
import { CommonModule } from '@angular/common';
import { Component, Inject, Input, Optional, inject, model, signal } from '@angular/core';
import { toObservable } from '@angular/core/rxjs-interop';
import { FormBuilder, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatRadioModule } from '@angular/material/radio';
import { NgmInputModule, NgmHierarchySelectComponent } from '@metad/ocap-angular/common';
import { NgmControlsModule } from '@metad/ocap-angular/controls';
import { NgmOcapCoreService, OcapCoreModule } from '@metad/ocap-angular/core';
import { FilterSelectionType, ParameterControlEnum, getEntityDimensions, getEntityHierarchy, isNil, uuid } from '@metad/ocap-core';
import { TranslateModule } from '@ngx-translate/core';
import { filter, map } from 'rxjs';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
import * as i2 from "@angular/material/dialog";
import * as i3 from "@angular/common";
import * as i4 from "@angular/cdk/drag-drop";
import * as i5 from "@angular/material/input";
import * as i6 from "@angular/material/form-field";
import * as i7 from "@angular/material/button";
import * as i8 from "@angular/material/button-toggle";
import * as i9 from "@angular/material/icon";
import * as i10 from "@angular/material/radio";
import * as i11 from "@angular/material/checkbox";
import * as i12 from "@ngx-translate/core";
import * as i13 from "@metad/ocap-angular/core";
import * as i14 from "@metad/ocap-angular/controls";
import * as i15 from "@metad/ocap-angular/common";
export class NgmParameterCreateComponent {
    #coreService;
    get availableMembers() {
        return this.formGroup.get('availableMembers');
    }
    get name() {
        return this.formGroup.get('name');
    }
    get paramType() {
        return this.formGroup.get('paramType');
    }
    get dataType() {
        return this.formGroup.get('dataType');
    }
    get value() {
        return this.formGroup.get('value');
    }
    get dimension() {
        return this.formGroup.value.dimension;
    }
    get hierarchy() {
        return this.formGroup.value.hierarchy;
    }
    get slicer() {
        return this._slicer;
    }
    set slicer(value) {
        this._slicer.members = value?.members ?? [];
        this.setAvailableMembers(this._slicer.members.map((member) => ({ ...member, isDefault: member.isDefault ?? false })));
    }
    constructor(_formBuilder, _dialogRef, data) {
        this._formBuilder = _formBuilder;
        this._dialogRef = _dialogRef;
        this.data = data;
        this.ParameterControlEnum = ParameterControlEnum;
        this.#coreService = inject(NgmOcapCoreService);
        this.appearance = 'fill';
        this.label = 'Parameter';
        this.dataSettings = model();
        this.entityType = model();
        /**
         * 编辑模式, 否则为创建模式
         */
        this.edit = signal(false);
        this.memberTreeOptions = {
            selectionType: FilterSelectionType.Multiple,
            initialLevel: 1,
            searchable: true
        };
        this.formGroup = this._formBuilder.group({
            __id__: uuid(),
            name: ['', [Validators.required, this.forbiddenNameValidator()]],
            caption: null,
            dimension: null,
            hierarchy: null,
            paramType: null,
            value: null,
            dataType: null,
            members: [],
            availableMembers: this._formBuilder.array([])
        });
        this._slicer = { members: [] };
        this.dimensions$ = toObservable(this.entityType).pipe(map((entityType) => getEntityDimensions(entityType)));
        this.dimension$ = this.formGroup.valueChanges.pipe(filter((value) => !isNil(value.dimension)), map((value) => ({
            dimension: value.dimension,
            hierarchy: value.hierarchy
        })));
        if (this.data) {
            this.dataSettings.set(this.data.dataSettings);
            this.entityType.set(this.data.entityType);
            if (this.data.name) {
                this.edit.set(true);
                const property = this.entityType()?.parameters?.[this.data.name];
                this.formGroup.patchValue(property ?? {});
                this.slicer = {
                    ...this.slicer,
                    members: [...(property.availableMembers ?? [])]
                };
            }
            else {
                this.formGroup.patchValue(this.data.dimension);
            }
        }
    }
    onApply() {
        this.#coreService.updateEntity({
            type: 'Parameter',
            dataSettings: this.dataSettings(),
            parameter: {
                ...this.formGroup.value,
                members: this.formGroup.value.availableMembers.filter((member) => member.isDefault)
            }
        });
        this._dialogRef.close();
    }
    create(item) {
        return this._formBuilder.group(item ?? {
            value: [null, Validators.required],
            label: null,
            isDefault: null
        });
    }
    setAvailableMembers(members) {
        this.availableMembers.clear(); // .reset()
        members?.forEach((member) => {
            this.availableMembers.push(this.create(member));
        });
    }
    add() {
        this.availableMembers.push(this.create());
    }
    remove(i) {
        this.availableMembers.removeAt(i);
    }
    forbiddenNameValidator() {
        return (control) => {
            const forbidden = !this.edit &&
                this.entityType()?.parameters &&
                !!Object.values(this.entityType().parameters).find((item) => item.name === control.value);
            return forbidden ? { forbiddenName: { value: control.value } } : null;
        };
    }
    onHierarchyChange(hierarchy) {
        this.formGroup.patchValue({
            dimension: getEntityHierarchy(this.entityType(), hierarchy)?.dimension,
            hierarchy: hierarchy
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: NgmParameterCreateComponent, deps: [{ token: i1.FormBuilder }, { token: i2.MatDialogRef, optional: true }, { token: MAT_DIALOG_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", type: NgmParameterCreateComponent, isStandalone: true, selector: "ngm-parameter-create", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, dataSettings: { classPropertyName: "dataSettings", publicName: "dataSettings", isSignal: true, isRequired: false, transformFunction: null }, entityType: { classPropertyName: "entityType", publicName: "entityType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dataSettings: "dataSettingsChange", entityType: "entityTypeChange" }, ngImport: i0, template: "<div class=\"ngm-theme-dark dark w-[300px] shrink-0 flex flex-col justify-start overflow-auto bg-bluegray-700 text-white p-4 group\">\n  <div class=\"w-full flex justify-start items-center mb-2\" cdkDrag cdkDragRootElement=\".cdk-overlay-pane\" cdkDragHandle>\n    <mat-icon displayDensity=\"cosy\" class=\"-ml-2 opacity-0 group-hover:opacity-80\">drag_indicator</mat-icon>\n    @if (edit()) {\n      <span class=\"text-lg pointer-events-none\">\n        {{ 'Ngm.Property.EditParameter' | translate: {Default: \"Edit Parameter\"} }}\n      </span>\n    } @else {\n      <span class=\"text-lg pointer-events-none\">\n        {{ 'Ngm.Property.CREATE_PARAMETER' | translate: {Default: \"Create Parameter\"} }}\n      </span>\n    }\n  </div>\n\n  <form [formGroup]=\"formGroup\" class=\"flex-1\">\n    <div class=\"flex flex-col justify-start items-stretch\">\n      <mat-form-field appearance=\"fill\" color=\"accent\">\n        <mat-label>{{ 'Ngm.Property.Name' | translate: {Default: \"Name\"} }}</mat-label>\n        <input matInput formControlName=\"name\" required>\n        <mat-error *ngIf=\"name.invalid\">{{ 'Ngm.Property.NameRequired' | translate: {Default: \"Name Required\"} }}</mat-error>\n      </mat-form-field>\n\n      <mat-form-field appearance=\"fill\" color=\"accent\">\n        <mat-label>{{ 'Ngm.Property.Caption' | translate: {Default: \"Caption\"} }}</mat-label>\n        <input matInput formControlName=\"caption\">\n      </mat-form-field>\n    </div>\n\n    <div class=\"flex flex-col justify-start items-start gap-4 py-4 px-2\">\n      <mat-radio-group formControlName=\"paramType\" class=\"flex flex-col justify-start items-start gap-4\">\n        <mat-radio-button [value]=\"ParameterControlEnum.Input\">\n          {{ 'Ngm.Property.Input' | translate: {Default: \"Input\"} }}\n        </mat-radio-button>\n        <mat-radio-button [value]=\"ParameterControlEnum.Select\">\n          {{ 'Ngm.Property.Select' | translate: {Default: \"Select\"} }}\n        </mat-radio-button>\n        <mat-radio-button [value]=\"ParameterControlEnum.Dimensions\">\n          {{ 'Ngm.Property.Dimensions' | translate: {Default: \"Dimensions\"} }}\n        </mat-radio-button>\n      </mat-radio-group>\n    </div>\n  </form>\n\n  <div class=\"flex w-full h-10\"></div>\n\n  <div class=\"flex justify-start\">\n    <div ngmButtonGroup>\n        <button mat-raised-button color=\"accent\" cdkFocusInitial [disabled]=\"formGroup.invalid\" (click)=\"onApply()\">\n            {{ 'Ngm.Common.Apply' | translate: {Default: 'Apply'} }}\n        </button>\n        <button mat-button mat-dialog-close>\n            {{ 'Ngm.Common.Cancel' | translate: {Default: 'Cancel'} }}\n        </button>\n    </div>\n  </div>\n</div>\n\n<div class=\"mat-typography min-w-[300px] flex-1 flex flex-col justify-start items-stretch p-4 overflow-hidden\" cdkDropListGroup>\n\n  <div *ngIf=\"paramType.value === ParameterControlEnum.Input\" class=\"flex flex-col justify-start items-start gap-8\">\n    <div class=\"flex flex-col justify-start items-start gap-2\">\n      <label>{{ 'Ngm.Property.ValueType' | translate: {Default: \"Value Type\"} }}</label>\n      <mat-button-toggle-group displayDensity=\"compact\" ngmAppearance=\"outline\" color=\"accent\"\n        [formControl]=\"dataType\">\n        <mat-button-toggle disableRipple value=\"number\">Number</mat-button-toggle>\n        <mat-button-toggle disableRipple value=\"string\">String</mat-button-toggle>\n        <mat-button-toggle disableRipple value=\"boolean\">Boolean</mat-button-toggle>\n        <mat-button-toggle disableRipple value=\"date\">Date</mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n\n    <ngm-input label=\"{{ 'Ngm.Property.DefaultValue' | translate: {Default: 'Default Value'} }}\" \n      [formControl]=\"value\"\n      [type]=\"dataType.value\"\n    ></ngm-input>\n    \n  </div>\n\n  <div *ngIf=\"paramType.value === ParameterControlEnum.Select\"  class=\"flex-1 overflow-y-auto\">\n    <div class=\"text-lg\">{{ 'Ngm.Property.AvailableMembers' | translate: {Default: \"Available Members\"} }}</div>\n    <div *ngFor=\"let item of availableMembers.controls; let i = index;\" class=\"flex justify-start items-center gap-2 group\"\n      [formGroup]=\"$any(item)\"\n    >\n      <mat-checkbox formControlName=\"isDefault\">\n        {{ 'Ngm.Property.IsDefault' | translate: {Default: \"Is Default\"} }}\n      </mat-checkbox>\n      <mat-form-field appearance=\"fill\">\n        <mat-label>{{ 'Ngm.Common.VALUE' | translate: {Default: \"Value\"} }}</mat-label>\n        <input matInput formControlName=\"value\">\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\">\n        <mat-label>{{ 'Ngm.Common.LABEL' | translate: {Default: \"Label\"} }}</mat-label>\n        <input matInput formControlName=\"label\">\n      </mat-form-field>\n\n      <button mat-icon-button ngmAppearance=\"danger\" displayDensity=\"cosy\" class=\"opacity-0 group-hover:opacity-100\" (click)=\"remove(i)\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n\n    <button mat-stroked-button displayDensity=\"cosy\" ngmAppearance=\"dashed\" (click)=\"add()\">\n      {{ 'Ngm.Property.ADD_PARAMETER_MEMBER' | translate: {Default: \"Add Member\"} }}\n    </button>\n  </div>\n\n  <div *ngIf=\"paramType.value === ParameterControlEnum.Dimensions\" class=\"flex-1 w-full max-w-full flex flex-col justify-start items-stretch\">\n    <ngm-hierarchy-select appearance=\"fill\"\n      [label]=\" 'Ngm.Property.Dimension' | translate: {Default: 'Dimension' } \"\n      [dimensions]=\"dimensions$ | async\"\n      [ngModel]=\"hierarchy\"\n      (ngModelChange)=\"onHierarchyChange($event)\"\n    ></ngm-hierarchy-select>\n    <ngm-member-tree class=\"flex-1 w-full h-full\"\n      [dataSettings]=\"dataSettings()\"\n      [dimension]=\"dimension$ | async\"\n      [options]=\"memberTreeOptions\"\n      [(ngModel)]=\"slicer\"\n    ></ngm-member-tree>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:row;flex:1;max-width:100%}.mat-radio-button{margin-right:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: DragDropModule }, { 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: "directive", type: i4.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i8.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i8.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i10.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i10.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i11.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i12.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: OcapCoreModule }, { kind: "directive", type: i13.DensityDirective, selector: "[displayDensity]", inputs: ["displayDensity"] }, { kind: "directive", type: i13.AppearanceDirective, selector: "[ngmAppearance]", inputs: ["color", "ngmAppearance", "outline", "hero", "acrylic", "opacity", "dashed", "danger"] }, { kind: "directive", type: i13.ButtonGroupDirective, selector: "[ngmButtonGroup]" }, { kind: "ngmodule", type: NgmControlsModule }, { kind: "component", type: i14.NgmMemberTreeComponent, selector: "ngm-member-tree", inputs: ["dataSettings", "dimension", "options", "appearance", "disabled"], outputs: ["loadingChanging"] }, { kind: "ngmodule", type: NgmInputModule }, { kind: "component", type: i15.NgmInputComponent, selector: "ngm-input", inputs: ["label", "placeholder", "type", "defaultValue", "valueKey", "options", "disabled"], outputs: ["blur"] }, { kind: "component", type: NgmHierarchySelectComponent, selector: "ngm-hierarchy-select", inputs: ["color", "disabled", "label", "appearance", "dimensions"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: NgmParameterCreateComponent, decorators: [{
            type: Component,
            args: [{ standalone: true, selector: 'ngm-parameter-create', imports: [
                        CommonModule,
                        FormsModule,
                        ReactiveFormsModule,
                        DragDropModule,
                        MatInputModule,
                        MatButtonModule,
                        MatFormFieldModule,
                        MatButtonToggleModule,
                        MatIconModule,
                        MatRadioModule,
                        MatDialogModule,
                        MatCheckboxModule,
                        TranslateModule,
                        OcapCoreModule,
                        NgmControlsModule,
                        NgmInputModule,
                        NgmHierarchySelectComponent
                    ], template: "<div class=\"ngm-theme-dark dark w-[300px] shrink-0 flex flex-col justify-start overflow-auto bg-bluegray-700 text-white p-4 group\">\n  <div class=\"w-full flex justify-start items-center mb-2\" cdkDrag cdkDragRootElement=\".cdk-overlay-pane\" cdkDragHandle>\n    <mat-icon displayDensity=\"cosy\" class=\"-ml-2 opacity-0 group-hover:opacity-80\">drag_indicator</mat-icon>\n    @if (edit()) {\n      <span class=\"text-lg pointer-events-none\">\n        {{ 'Ngm.Property.EditParameter' | translate: {Default: \"Edit Parameter\"} }}\n      </span>\n    } @else {\n      <span class=\"text-lg pointer-events-none\">\n        {{ 'Ngm.Property.CREATE_PARAMETER' | translate: {Default: \"Create Parameter\"} }}\n      </span>\n    }\n  </div>\n\n  <form [formGroup]=\"formGroup\" class=\"flex-1\">\n    <div class=\"flex flex-col justify-start items-stretch\">\n      <mat-form-field appearance=\"fill\" color=\"accent\">\n        <mat-label>{{ 'Ngm.Property.Name' | translate: {Default: \"Name\"} }}</mat-label>\n        <input matInput formControlName=\"name\" required>\n        <mat-error *ngIf=\"name.invalid\">{{ 'Ngm.Property.NameRequired' | translate: {Default: \"Name Required\"} }}</mat-error>\n      </mat-form-field>\n\n      <mat-form-field appearance=\"fill\" color=\"accent\">\n        <mat-label>{{ 'Ngm.Property.Caption' | translate: {Default: \"Caption\"} }}</mat-label>\n        <input matInput formControlName=\"caption\">\n      </mat-form-field>\n    </div>\n\n    <div class=\"flex flex-col justify-start items-start gap-4 py-4 px-2\">\n      <mat-radio-group formControlName=\"paramType\" class=\"flex flex-col justify-start items-start gap-4\">\n        <mat-radio-button [value]=\"ParameterControlEnum.Input\">\n          {{ 'Ngm.Property.Input' | translate: {Default: \"Input\"} }}\n        </mat-radio-button>\n        <mat-radio-button [value]=\"ParameterControlEnum.Select\">\n          {{ 'Ngm.Property.Select' | translate: {Default: \"Select\"} }}\n        </mat-radio-button>\n        <mat-radio-button [value]=\"ParameterControlEnum.Dimensions\">\n          {{ 'Ngm.Property.Dimensions' | translate: {Default: \"Dimensions\"} }}\n        </mat-radio-button>\n      </mat-radio-group>\n    </div>\n  </form>\n\n  <div class=\"flex w-full h-10\"></div>\n\n  <div class=\"flex justify-start\">\n    <div ngmButtonGroup>\n        <button mat-raised-button color=\"accent\" cdkFocusInitial [disabled]=\"formGroup.invalid\" (click)=\"onApply()\">\n            {{ 'Ngm.Common.Apply' | translate: {Default: 'Apply'} }}\n        </button>\n        <button mat-button mat-dialog-close>\n            {{ 'Ngm.Common.Cancel' | translate: {Default: 'Cancel'} }}\n        </button>\n    </div>\n  </div>\n</div>\n\n<div class=\"mat-typography min-w-[300px] flex-1 flex flex-col justify-start items-stretch p-4 overflow-hidden\" cdkDropListGroup>\n\n  <div *ngIf=\"paramType.value === ParameterControlEnum.Input\" class=\"flex flex-col justify-start items-start gap-8\">\n    <div class=\"flex flex-col justify-start items-start gap-2\">\n      <label>{{ 'Ngm.Property.ValueType' | translate: {Default: \"Value Type\"} }}</label>\n      <mat-button-toggle-group displayDensity=\"compact\" ngmAppearance=\"outline\" color=\"accent\"\n        [formControl]=\"dataType\">\n        <mat-button-toggle disableRipple value=\"number\">Number</mat-button-toggle>\n        <mat-button-toggle disableRipple value=\"string\">String</mat-button-toggle>\n        <mat-button-toggle disableRipple value=\"boolean\">Boolean</mat-button-toggle>\n        <mat-button-toggle disableRipple value=\"date\">Date</mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n\n    <ngm-input label=\"{{ 'Ngm.Property.DefaultValue' | translate: {Default: 'Default Value'} }}\" \n      [formControl]=\"value\"\n      [type]=\"dataType.value\"\n    ></ngm-input>\n    \n  </div>\n\n  <div *ngIf=\"paramType.value === ParameterControlEnum.Select\"  class=\"flex-1 overflow-y-auto\">\n    <div class=\"text-lg\">{{ 'Ngm.Property.AvailableMembers' | translate: {Default: \"Available Members\"} }}</div>\n    <div *ngFor=\"let item of availableMembers.controls; let i = index;\" class=\"flex justify-start items-center gap-2 group\"\n      [formGroup]=\"$any(item)\"\n    >\n      <mat-checkbox formControlName=\"isDefault\">\n        {{ 'Ngm.Property.IsDefault' | translate: {Default: \"Is Default\"} }}\n      </mat-checkbox>\n      <mat-form-field appearance=\"fill\">\n        <mat-label>{{ 'Ngm.Common.VALUE' | translate: {Default: \"Value\"} }}</mat-label>\n        <input matInput formControlName=\"value\">\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\">\n        <mat-label>{{ 'Ngm.Common.LABEL' | translate: {Default: \"Label\"} }}</mat-label>\n        <input matInput formControlName=\"label\">\n      </mat-form-field>\n\n      <button mat-icon-button ngmAppearance=\"danger\" displayDensity=\"cosy\" class=\"opacity-0 group-hover:opacity-100\" (click)=\"remove(i)\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n\n    <button mat-stroked-button displayDensity=\"cosy\" ngmAppearance=\"dashed\" (click)=\"add()\">\n      {{ 'Ngm.Property.ADD_PARAMETER_MEMBER' | translate: {Default: \"Add Member\"} }}\n    </button>\n  </div>\n\n  <div *ngIf=\"paramType.value === ParameterControlEnum.Dimensions\" class=\"flex-1 w-full max-w-full flex flex-col justify-start items-stretch\">\n    <ngm-hierarchy-select appearance=\"fill\"\n      [label]=\" 'Ngm.Property.Dimension' | translate: {Default: 'Dimension' } \"\n      [dimensions]=\"dimensions$ | async\"\n      [ngModel]=\"hierarchy\"\n      (ngModelChange)=\"onHierarchyChange($event)\"\n    ></ngm-hierarchy-select>\n    <ngm-member-tree class=\"flex-1 w-full h-full\"\n      [dataSettings]=\"dataSettings()\"\n      [dimension]=\"dimension$ | async\"\n      [options]=\"memberTreeOptions\"\n      [(ngModel)]=\"slicer\"\n    ></ngm-member-tree>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:row;flex:1;max-width:100%}.mat-radio-button{margin-right:1rem}\n"] }]
        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2.MatDialogRef, decorators: [{
                    type: Optional
                }] }, { type: undefined, decorators: [{
                    type: Optional
                }, {
                    type: Inject,
                    args: [MAT_DIALOG_DATA]
                }] }], propDecorators: { appearance: [{
                type: Input
            }], label: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 