import { DIALOG_DATA, DialogRef } from '@angular/cdk/dialog';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { CommonModule } from '@angular/common';
import { Component, inject, input, model, signal } from '@angular/core';
import { toObservable, toSignal } 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 { 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 { CubeParameterEnum, FilterSelectionType, getEntityDimensions, getEntityHierarchy, isNil, suuid, } from '@metad/ocap-core';
import { TranslateModule } from '@ngx-translate/core';
import { filter, map, startWith } from 'rxjs';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/forms";
import * as i3 from "@angular/cdk/drag-drop";
import * as i4 from "@angular/material/input";
import * as i5 from "@angular/material/form-field";
import * as i6 from "@angular/material/button";
import * as i7 from "@angular/material/button-toggle";
import * as i8 from "@angular/material/icon";
import * as i9 from "@angular/material/radio";
import * as i10 from "@angular/material/checkbox";
import * as i11 from "@ngx-translate/core";
import * as i12 from "@metad/ocap-angular/core";
import * as i13 from "@metad/ocap-angular/controls";
import * as i14 from "@metad/ocap-angular/common";
export class NgmParameterCreateComponent {
    #coreService;
    #dialogRef;
    #data;
    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() {
        this.eCubeParameterEnum = CubeParameterEnum;
        this.#coreService = inject(NgmOcapCoreService);
        this.#dialogRef = inject(DialogRef, { optional: true });
        this.#data = inject(DIALOG_DATA, { optional: true });
        this._formBuilder = inject(FormBuilder);
        // Inputs
        this.appearance = input('fill');
        this.dataSettings = model();
        this.entityType = model();
        // States
        /**
         * Edit mode, otherwise create mode
         */
        this.edit = signal(false);
        this.memberTreeOptions = {
            selectionType: FilterSelectionType.Multiple,
            initialLevel: 1,
            searchable: true
        };
        this.formGroup = this._formBuilder.group({
            __id__: suuid(),
            name: ['', [Validators.required, this.forbiddenNameValidator()]],
            caption: null,
            dimension: null,
            hierarchy: null,
            paramType: [CubeParameterEnum.Input, Validators.required],
            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
        })));
        this.inputType = toSignal(this.dataType.valueChanges.pipe(startWith(this.dataType.value), map((type) => type === 'string' ? 'text' : type)));
        if (this.#data) {
            this.dataSettings.set(this.#data.dataSettings);
            this.entityType.set(this.#data.entityType);
            if (this.#data.name || this.#data.parameter) {
                this.edit.set(true);
                const property = this.#data.parameter || 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() {
        const event = {
            type: 'Parameter',
            dataSettings: this.dataSettings(),
            parameter: {
                ...this.formGroup.value,
                members: this.formGroup.value.availableMembers.filter((member) => member.isDefault)
            }
        };
        this.#coreService.updateEntity(event);
        this.#dialogRef?.close(event);
    }
    create(item) {
        const _group = this._formBuilder.group({
            key: this._formBuilder.control(null, [Validators.required]),
            caption: null,
            isDefault: null
        });
        _group.patchValue(item ?? {});
        return _group;
    }
    setAvailableMembers(members) {
        this.availableMembers.clear();
        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
        });
    }
    onCancel() {
        this.#dialogRef?.close();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgmParameterCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NgmParameterCreateComponent, isStandalone: true, selector: "ngm-parameter-create", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, 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-4 cursor-move\" 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-xl font-semibold pointer-events-none\">\n        {{ 'Ngm.Property.EditParameter' | translate: {Default: \"Edit Parameter\"} }}\n      </span>\n    } @else {\n      <span class=\"text-xl font-semibold 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]=\"appearance()\" color=\"accent\">\n        <mat-label>{{ 'Ngm.Property.Name' | translate: {Default: \"Name\"} }}</mat-label>\n        <input matInput formControlName=\"name\" required>\n        @if (name.invalid) {\n          <mat-error>{{ 'Ngm.Property.NameRequired' | translate: {Default: \"Name Required\"} }}</mat-error>\n        }\n      </mat-form-field>\n\n      <mat-form-field [appearance]=\"appearance()\" 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]=\"eCubeParameterEnum.Input\">\n          {{ 'Ngm.Property.Input' | translate: {Default: \"Input\"} }}\n        </mat-radio-button>\n        <mat-radio-button [value]=\"eCubeParameterEnum.Select\">\n          {{ 'Ngm.Property.Select' | translate: {Default: \"Select\"} }}\n        </mat-radio-button>\n        <mat-radio-button [value]=\"eCubeParameterEnum.Dimension\">\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 (click)=\"onCancel()\">\n          {{ 'Ngm.Common.Cancel' | translate: {Default: 'Cancel'} }}\n        </button>\n    </div>\n  </div>\n</div>\n\n<div class=\"min-w-[400px] flex-1 flex flex-col justify-start items-stretch overflow-hidden\" cdkDropListGroup>\n  @if (paramType.value === eCubeParameterEnum.Input) {\n    <div class=\"flex flex-col justify-start items-start gap-8 p-4\">\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]=\"inputType()\"\n      />\n    </div>\n  }\n\n  @if (paramType.value === eCubeParameterEnum.Select) {\n    <div class=\"flex-1 p-4 overflow-y-auto\">\n      <div class=\"text-lg\">{{ 'Ngm.Property.AvailableMembers' | translate: {Default: \"Available Members\"} }}</div>\n      @for (item of availableMembers.controls; track i; let i = $index;) {\n        <div class=\"group flex justify-start items-center gap-2 mt-2\"\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]=\"appearance()\">\n            <mat-label>{{ 'Ngm.Common.Key' | translate: {Default: \"Key\"} }}</mat-label>\n            <input matInput formControlName=\"key\">\n          </mat-form-field>\n          <mat-form-field [appearance]=\"appearance()\">\n            <mat-label>{{ 'Ngm.Common.Caption' | translate: {Default: \"Caption\"} }}</mat-label>\n            <input matInput formControlName=\"caption\">\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\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\n  @if (paramType.value === eCubeParameterEnum.Dimension) {\n    <div class=\"flex-1 w-full max-w-full flex flex-col justify-start items-stretch\">\n      <ngm-hierarchy-select class=\"p-4\" [appearance]=\"appearance()\"\n        [label]=\" 'Ngm.Property.Dimension' | translate: {Default: 'Dimension' } \"\n        [dimensions]=\"dimensions$ | async\"\n        [ngModel]=\"hierarchy\"\n        (ngModelChange)=\"onHierarchyChange($event)\"\n      />\n      <ngm-member-tree class=\"flex-1 w-full min-h-[600px] p-4\"\n        [dataSettings]=\"dataSettings()\"\n        [dimension]=\"dimension$ | async\"\n        [options]=\"memberTreeOptions\"\n        [(ngModel)]=\"slicer\"\n      />\n    </div>\n  }\n</div>\n", styles: [":host{display:flex;overflow:hidden;border-radius:1.5rem;background-color:var(--color-components-card-bg)}.mat-radio-button{margin-right:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i3.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: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.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: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i7.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i7.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: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i9.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i9.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: MatCheckboxModule }, { kind: "component", type: i10.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: i11.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: OcapCoreModule }, { kind: "directive", type: i12.DensityDirective, selector: "[displayDensity]", inputs: ["displayDensity"] }, { kind: "directive", type: i12.AppearanceDirective, selector: "[ngmAppearance]", inputs: ["color", "ngmAppearance", "outline", "hero", "acrylic", "opacity", "dashed", "danger"] }, { kind: "directive", type: i12.ButtonGroupDirective, selector: "[ngmButtonGroup]" }, { kind: "ngmodule", type: NgmControlsModule }, { kind: "component", type: i13.NgmMemberTreeComponent, selector: "ngm-member-tree", inputs: ["dataSettings", "dimension", "options", "appearance", "disabled"], outputs: ["loadingChanging"] }, { kind: "ngmodule", type: NgmInputModule }, { kind: "component", type: i14.NgmInputComponent, selector: "ngm-input", inputs: ["label", "placeholder", "type", "defaultValue", "valueKey", "displayDensity", "options", "disabled", "simple"], outputs: ["blur"] }, { kind: "component", type: NgmHierarchySelectComponent, selector: "ngm-hierarchy-select", inputs: ["label", "appearance", "dimensions"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", 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,
                        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-4 cursor-move\" 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-xl font-semibold pointer-events-none\">\n        {{ 'Ngm.Property.EditParameter' | translate: {Default: \"Edit Parameter\"} }}\n      </span>\n    } @else {\n      <span class=\"text-xl font-semibold 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]=\"appearance()\" color=\"accent\">\n        <mat-label>{{ 'Ngm.Property.Name' | translate: {Default: \"Name\"} }}</mat-label>\n        <input matInput formControlName=\"name\" required>\n        @if (name.invalid) {\n          <mat-error>{{ 'Ngm.Property.NameRequired' | translate: {Default: \"Name Required\"} }}</mat-error>\n        }\n      </mat-form-field>\n\n      <mat-form-field [appearance]=\"appearance()\" 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]=\"eCubeParameterEnum.Input\">\n          {{ 'Ngm.Property.Input' | translate: {Default: \"Input\"} }}\n        </mat-radio-button>\n        <mat-radio-button [value]=\"eCubeParameterEnum.Select\">\n          {{ 'Ngm.Property.Select' | translate: {Default: \"Select\"} }}\n        </mat-radio-button>\n        <mat-radio-button [value]=\"eCubeParameterEnum.Dimension\">\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 (click)=\"onCancel()\">\n          {{ 'Ngm.Common.Cancel' | translate: {Default: 'Cancel'} }}\n        </button>\n    </div>\n  </div>\n</div>\n\n<div class=\"min-w-[400px] flex-1 flex flex-col justify-start items-stretch overflow-hidden\" cdkDropListGroup>\n  @if (paramType.value === eCubeParameterEnum.Input) {\n    <div class=\"flex flex-col justify-start items-start gap-8 p-4\">\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]=\"inputType()\"\n      />\n    </div>\n  }\n\n  @if (paramType.value === eCubeParameterEnum.Select) {\n    <div class=\"flex-1 p-4 overflow-y-auto\">\n      <div class=\"text-lg\">{{ 'Ngm.Property.AvailableMembers' | translate: {Default: \"Available Members\"} }}</div>\n      @for (item of availableMembers.controls; track i; let i = $index;) {\n        <div class=\"group flex justify-start items-center gap-2 mt-2\"\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]=\"appearance()\">\n            <mat-label>{{ 'Ngm.Common.Key' | translate: {Default: \"Key\"} }}</mat-label>\n            <input matInput formControlName=\"key\">\n          </mat-form-field>\n          <mat-form-field [appearance]=\"appearance()\">\n            <mat-label>{{ 'Ngm.Common.Caption' | translate: {Default: \"Caption\"} }}</mat-label>\n            <input matInput formControlName=\"caption\">\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\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\n  @if (paramType.value === eCubeParameterEnum.Dimension) {\n    <div class=\"flex-1 w-full max-w-full flex flex-col justify-start items-stretch\">\n      <ngm-hierarchy-select class=\"p-4\" [appearance]=\"appearance()\"\n        [label]=\" 'Ngm.Property.Dimension' | translate: {Default: 'Dimension' } \"\n        [dimensions]=\"dimensions$ | async\"\n        [ngModel]=\"hierarchy\"\n        (ngModelChange)=\"onHierarchyChange($event)\"\n      />\n      <ngm-member-tree class=\"flex-1 w-full min-h-[600px] p-4\"\n        [dataSettings]=\"dataSettings()\"\n        [dimension]=\"dimension$ | async\"\n        [options]=\"memberTreeOptions\"\n        [(ngModel)]=\"slicer\"\n      />\n    </div>\n  }\n</div>\n", styles: [":host{display:flex;overflow:hidden;border-radius:1.5rem;background-color:var(--color-components-card-bg)}.mat-radio-button{margin-right:1rem}\n"] }]
        }], ctorParameters: () => [] });
//# sourceMappingURL=data:application/json;base64, 