import * as i3 from '@angular/cdk/listbox';
import { CdkListboxModule } from '@angular/cdk/listbox';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { inject, input, model, output, computed, Component, ChangeDetectionStrategy, signal, ViewContainerRef, effect, forwardRef, Input, NgModule } from '@angular/core';
import { toObservable, toSignal } from '@angular/core/rxjs-interop';
import * as i2 from '@angular/forms';
import { FormsModule, ReactiveFormsModule, FormBuilder, Validators, NG_VALUE_ACCESSOR } from '@angular/forms';
import * as i5$1 from '@angular/material/form-field';
import { MatFormFieldModule } from '@angular/material/form-field';
import * as i4$1 from '@angular/material/input';
import { MatInputModule } from '@angular/material/input';
import * as i4 from '@angular/material/list';
import { MatListModule } from '@angular/material/list';
import * as i9 from '@angular/material/radio';
import { MatRadioModule } from '@angular/material/radio';
import * as i5 from '@angular/material/slider';
import { MatSliderModule } from '@angular/material/slider';
import * as i7 from '@metad/ocap-angular/common';
import { NgmCommonModule, NgmInputModule, NgmHierarchySelectComponent, NgmDisplayBehaviourComponent, NgmInputComponent } from '@metad/ocap-angular/common';
import * as i8 from '@metad/ocap-angular/controls';
import { NgmControlsModule } from '@metad/ocap-angular/controls';
import * as i12 from '@metad/ocap-angular/core';
import { NgmDSCoreService, attrModel, linkedModel, OcapCoreModule, NgmOcapCoreService } from '@metad/ocap-angular/core';
import { CubeParameterEnum, DisplayBehaviour, pick, isEqual, isVariableProperty, FilterSelectionType, suuid, getEntityDimensions, isNil, getEntityHierarchy, parameterFormatter, nonNullable } from '@metad/ocap-core';
import { map, filter, distinctUntilChanged, switchMap, combineLatestWith, of, startWith } from 'rxjs';
import { DialogRef, DIALOG_DATA, Dialog } from '@angular/cdk/dialog';
import * as i3$1 from '@angular/cdk/drag-drop';
import { DragDropModule } from '@angular/cdk/drag-drop';
import * as i6 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import * as i7$1 from '@angular/material/button-toggle';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import * as i10 from '@angular/material/checkbox';
import { MatCheckboxModule } from '@angular/material/checkbox';
import * as i8$1 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import * as i11 from '@ngx-translate/core';
import { TranslateModule } from '@ngx-translate/core';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatDialog } from '@angular/material/dialog';
import { MatDividerModule } from '@angular/material/divider';
import * as i3$2 from '@angular/cdk/menu';
import { CdkMenuModule } from '@angular/cdk/menu';

class NgmParameterComponent {
    constructor() {
        this.eCubeParameterEnum = CubeParameterEnum;
        this.dsCoreService = inject(NgmDSCoreService);
        // Inputs
        this.dataSettings = input();
        this.dataSettings$ = toObservable(this.dataSettings);
        this.parameter = model();
        this.parameter$ = toObservable(this.parameter);
        // @Input() get parameter(): ParameterProperty {
        //   return this.parameter$.value
        // }
        // set parameter(value) {
        //   this.parameter$.next(value)
        // }
        // private parameter$ = new BehaviorSubject<ParameterProperty>(null)
        // @Input() displayBehaviour: DisplayBehaviour
        this.displayBehaviour = input(DisplayBehaviour.auto);
        // @Input() options: ParameterOptions
        this.options = input();
        // @Input() appearance: NgmAppearance
        this.appearance = input();
        // Outputs
        this.parameterChange = output();
        // get availableMembers() {
        //   return this.parameter()?.availableMembers ?? []
        // }
        // get members() {
        //   return this.parameter()?.members
        // }
        // set members(members) {
        //   if (!isEqual(members, this.parameter()?.members)) {
        //     this.parameter = {
        //       ...this.parameter,
        //       members
        //     }
        //     this.changeParameter()
        //   }
        // }
        this.members = attrModel(this.parameter, 'members');
        this.dataSource$ = this.dataSettings$.pipe(map((dataSettings) => dataSettings?.dataSource), filter((value) => !!value), distinctUntilChanged(), switchMap((dataSource) => this.dsCoreService.getDataSource(dataSource)));
        this.dataSource = toSignal(this.dataSource$);
        this.dimension$ = this.parameter$.pipe(filter((value) => !!value?.dimension), map((parameter) => pick(parameter, 'dimension', 'hierarchy')), distinctUntilChanged(isEqual));
        this.members$ = this.dimension$.pipe(combineLatestWith(this.dataSettings$.pipe(map((dataSettings) => dataSettings?.entitySet), filter((value) => !!value), distinctUntilChanged()), this.dataSource$), switchMap(([parameter, entity, dataSource]) => dataSource.discoverMDMembers(entity, parameter)), map((members) => members?.map((item) => ({
            key: item.memberKey,
            value: item.memberKey,
            caption: item.memberCaption
        }))));
        this.availableMembers$ = this.parameter$.pipe(map((parameter) => parameter?.availableMembers), distinctUntilChanged(), switchMap((availableMembers) => (availableMembers?.length ? of(availableMembers) : this.members$)));
        this.variableProperty = toSignal(this.parameter$.pipe(map((parameter) => isVariableProperty(parameter) ? parameter : null)));
        this.entitySet = computed(() => this.dataSettings()?.entitySet);
        this._parameters = toSignal(this.dataSource$.pipe(switchMap((dataSource) => dataSource.selectOptions()), map((options) => options.parameters?.[this.entitySet()])));
        this.parameterValue = linkedModel({
            initialValue: null,
            compute: () => this._parameters()?.[this.parameter().name] ?? this.parameter().value,
            update: (value) => {
                this.dataSource().updateParameters(this.entitySet(), (parameters) => {
                    return { ...parameters, [this.parameter().name]: value };
                });
            }
        });
        this.valueList = linkedModel({
            initialValue: [],
            compute: () => this.parameterValue() == null ? [] : [this.parameterValue()],
            update: (value) => {
                this.parameterValue.set(value[0] ?? null);
            }
        });
        this.availableMembers = computed(() => {
            const availableMembers = this.parameter()?.availableMembers ?? [];
            const value = this.parameter()?.value;
            if (typeof value === 'string' && !availableMembers.some((member) => member.key === value)) {
                availableMembers.push({
                    key: value,
                    caption: value,
                });
            }
            return availableMembers;
        });
        this.slicer = {};
    }
    // @Output() parameterChange = new EventEmitter<ParameterProperty>()
    get multiple() {
        return this.options()?.selectionType === FilterSelectionType.Multiple;
    }
    get paramType() {
        return this.parameter()?.paramType;
    }
    // private changeParameter$ = new Subject<void>()
    // private changeSub = this.changeParameter$
    //   .pipe(debounceTime(500), takeUntilDestroyed())
    //   .subscribe(() => this.parameterChange.emit(this.parameter()))
    // constructor() {
    //   effect(() => {
    //     console.log('parameter', this.parameter(), this.availableMembers(), this.valueList())
    //   })
    // }
    compareWith(a, b) {
        return a.key === b.key;
    }
    updateParameterValue(event) {
        this.parameterValue.set(event);
        //   this.parameter = {
        //     ...this.parameter,
        //     value: event
        //   }
        //   this.changeParameter()
    }
    // changeParameter() {
    //   // this.changeParameter$.next()
    //   this.parameterValue.set(this.parameter().value)
    // }
    onSlicerChange(slicer) {
        this.updateParameterValue(slicer.members);
    }
    onSlicerEnd(event) {
        this.updateParameterValue(event.value);
    }
    onBlur(event) {
        this.updateParameterValue(event.target.value);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgmParameterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NgmParameterComponent, isStandalone: true, selector: "ngm-parameter", inputs: { dataSettings: { classPropertyName: "dataSettings", publicName: "dataSettings", isSignal: true, isRequired: false, transformFunction: null }, parameter: { classPropertyName: "parameter", publicName: "parameter", isSignal: true, isRequired: false, transformFunction: null }, displayBehaviour: { classPropertyName: "displayBehaviour", publicName: "displayBehaviour", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { parameter: "parameterChange", parameterChange: "parameterChange" }, host: { classAttribute: "ngm-parameter" }, ngImport: i0, template: "@switch (paramType) {\n  @case(eCubeParameterEnum.Input) {\n    @if (options()?.slider) {\n      <mat-slider class=\"w-full\"\n        [step]=\"options()?.sliderStep || 1\"\n        [min]=\"options()?.sliderMin || 0\"\n        [max]=\"options()?.sliderMax || 100\"\n        [discrete]=\"options()?.showThumbLabel\"\n        [showTickMarks]=\"options()?.showTickMarks\"\n        [color]=\"options()?.sliderColor\"\n        >\n        <input matSliderThumb [ngModel]=\"parameterValue()\" (dragEnd)=\"onSlicerEnd($event)\">\n      </mat-slider>\n    } @else {\n      <ngm-input class=\"block w-full px-2\" [ngModel]=\"parameterValue()\" [type]=\"parameter().dataType ?? 'string'\"\n        (blur)=\"onBlur($event)\"\n      />\n    }\n  }\n  @case(eCubeParameterEnum.Select) {\n    <ul role=\"list\" class=\"w-full flex-1 flex flex-col justify-start items-start\" cdkListbox\n      [(ngModel)]=\"valueList\"\n    >\n      @for (option of availableMembers(); track option.key; let i = $index) {\n        <li role=\"listitem\" class=\"radio-item w-full flex items-center px-2 py-1.5 rounded-lg cursor-pointer hover:bg-hover-bg\" [cdkOption]=\"option.key\">\n          <input id=\"default-radio-{{i}}\" name=\"parameter-radio\" type=\"radio\" [checked]=\"option.key === valueList()?.[0]\"\n            class=\"w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600\"\n          >\n          <label for=\"default-radio-{{i}}\" class=\"ms-2 text-sm font-medium text-gray-900 dark:text-gray-300\">{{ option.caption }}</label>\n        </li>\n      }\n    </ul>\n  }\n  @case(eCubeParameterEnum.Dimension) {\n    <!-- For now, use the simplified version: display dimension members in a flat format -->\n    @if (multiple) {\n      <mat-selection-list class=\"flex-1\"\n        [multiple]=\"true\"\n        [displayDensity]=\"appearance()?.displayDensity\"\n        [compareWith]=\"compareWith\"\n        [(ngModel)]=\"members\"\n      >\n        <mat-list-option *ngFor=\"let availableMember of availableMembers$ | async\" [value]=\"availableMember\">\n          <ngm-display-behaviour [option]=\"availableMember\" [displayBehaviour]=\"displayBehaviour()\" />\n        </mat-list-option>\n      </mat-selection-list>\n    }@else {\n      <mat-selection-list class=\"flex-1\"\n        [multiple]=\"false\"\n        [displayDensity]=\"appearance()?.displayDensity\"\n        [compareWith]=\"compareWith\"\n        [(ngModel)]=\"members\"\n      >\n        <mat-list-option *ngFor=\"let availableMember of availableMembers$ | async\" [value]=\"availableMember\">\n          <ngm-display-behaviour [option]=\"availableMember\" [displayBehaviour]=\"displayBehaviour()\" />\n        </mat-list-option>\n      </mat-selection-list>\n    }\n  }\n}\n\n<!-- todo dimension$ change to referenceDimension -->\n@if (variableProperty()?.referenceDimension) {\n  <ngm-member-tree class=\"flex-1\"\n    [dataSettings]=\"dataSettings()\"\n    [dimension]=\"dimension$ | async\"\n    [options]=\"options()\"\n    [ngModel]=\"slicer\"\n    (ngModelChange)=\"onSlicerChange($event)\"\n  />\n}\n", styles: [":host{padding:.25rem}.radio-item[aria-selected=true] input{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity))}.mat-mdc-slider{width:calc(100% - 30px);margin-left:auto;margin-right:auto;display:block}.mat-mdc-slider-thumb-label-showing.mat-mdc-slider-horizontal{margin-top:1rem;margin-left:1rem;margin-right:1rem}.mat-mdc-slider-thumb-label-showing.mat-mdc-slider-vertical{margin-left:1rem;margin-top:1rem;margin-bottom:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: CdkListboxModule }, { kind: "directive", type: i3.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i3.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i4.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i4.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i5.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i5.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "ngmodule", type: OcapCoreModule }, { kind: "directive", type: i12.DensityDirective, selector: "[displayDensity]", inputs: ["displayDensity"] }, { kind: "ngmodule", type: NgmCommonModule }, { kind: "component", type: i7.NgmDisplayBehaviourComponent, selector: "ngm-display-behaviour", inputs: ["displayBehaviour", "excludeSelected", "option", "highlight"] }, { kind: "component", type: i7.NgmInputComponent, selector: "ngm-input", inputs: ["label", "placeholder", "type", "defaultValue", "valueKey", "displayDensity", "options", "disabled", "simple"], outputs: ["blur"] }, { kind: "ngmodule", type: NgmControlsModule }, { kind: "component", type: i8.NgmMemberTreeComponent, selector: "ngm-member-tree", inputs: ["dataSettings", "dimension", "options", "appearance", "disabled"], outputs: ["loadingChanging"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgmParameterComponent, decorators: [{
            type: Component,
            args: [{ standalone: true, imports: [
                        CommonModule,
                        FormsModule,
                        ReactiveFormsModule,
                        CdkListboxModule,
                        MatFormFieldModule,
                        MatInputModule,
                        MatRadioModule,
                        MatListModule,
                        MatSliderModule,
                        OcapCoreModule,
                        NgmCommonModule,
                        NgmControlsModule
                    ], changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngm-parameter', host: {
                        class: 'ngm-parameter'
                    }, template: "@switch (paramType) {\n  @case(eCubeParameterEnum.Input) {\n    @if (options()?.slider) {\n      <mat-slider class=\"w-full\"\n        [step]=\"options()?.sliderStep || 1\"\n        [min]=\"options()?.sliderMin || 0\"\n        [max]=\"options()?.sliderMax || 100\"\n        [discrete]=\"options()?.showThumbLabel\"\n        [showTickMarks]=\"options()?.showTickMarks\"\n        [color]=\"options()?.sliderColor\"\n        >\n        <input matSliderThumb [ngModel]=\"parameterValue()\" (dragEnd)=\"onSlicerEnd($event)\">\n      </mat-slider>\n    } @else {\n      <ngm-input class=\"block w-full px-2\" [ngModel]=\"parameterValue()\" [type]=\"parameter().dataType ?? 'string'\"\n        (blur)=\"onBlur($event)\"\n      />\n    }\n  }\n  @case(eCubeParameterEnum.Select) {\n    <ul role=\"list\" class=\"w-full flex-1 flex flex-col justify-start items-start\" cdkListbox\n      [(ngModel)]=\"valueList\"\n    >\n      @for (option of availableMembers(); track option.key; let i = $index) {\n        <li role=\"listitem\" class=\"radio-item w-full flex items-center px-2 py-1.5 rounded-lg cursor-pointer hover:bg-hover-bg\" [cdkOption]=\"option.key\">\n          <input id=\"default-radio-{{i}}\" name=\"parameter-radio\" type=\"radio\" [checked]=\"option.key === valueList()?.[0]\"\n            class=\"w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600\"\n          >\n          <label for=\"default-radio-{{i}}\" class=\"ms-2 text-sm font-medium text-gray-900 dark:text-gray-300\">{{ option.caption }}</label>\n        </li>\n      }\n    </ul>\n  }\n  @case(eCubeParameterEnum.Dimension) {\n    <!-- For now, use the simplified version: display dimension members in a flat format -->\n    @if (multiple) {\n      <mat-selection-list class=\"flex-1\"\n        [multiple]=\"true\"\n        [displayDensity]=\"appearance()?.displayDensity\"\n        [compareWith]=\"compareWith\"\n        [(ngModel)]=\"members\"\n      >\n        <mat-list-option *ngFor=\"let availableMember of availableMembers$ | async\" [value]=\"availableMember\">\n          <ngm-display-behaviour [option]=\"availableMember\" [displayBehaviour]=\"displayBehaviour()\" />\n        </mat-list-option>\n      </mat-selection-list>\n    }@else {\n      <mat-selection-list class=\"flex-1\"\n        [multiple]=\"false\"\n        [displayDensity]=\"appearance()?.displayDensity\"\n        [compareWith]=\"compareWith\"\n        [(ngModel)]=\"members\"\n      >\n        <mat-list-option *ngFor=\"let availableMember of availableMembers$ | async\" [value]=\"availableMember\">\n          <ngm-display-behaviour [option]=\"availableMember\" [displayBehaviour]=\"displayBehaviour()\" />\n        </mat-list-option>\n      </mat-selection-list>\n    }\n  }\n}\n\n<!-- todo dimension$ change to referenceDimension -->\n@if (variableProperty()?.referenceDimension) {\n  <ngm-member-tree class=\"flex-1\"\n    [dataSettings]=\"dataSettings()\"\n    [dimension]=\"dimension$ | async\"\n    [options]=\"options()\"\n    [ngModel]=\"slicer\"\n    (ngModelChange)=\"onSlicerChange($event)\"\n  />\n}\n", styles: [":host{padding:.25rem}.radio-item[aria-selected=true] input{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity))}.mat-mdc-slider{width:calc(100% - 30px);margin-left:auto;margin-right:auto;display:block}.mat-mdc-slider-thumb-label-showing.mat-mdc-slider-horizontal{margin-top:1rem;margin-left:1rem;margin-right:1rem}.mat-mdc-slider-thumb-label-showing.mat-mdc-slider-vertical{margin-left:1rem;margin-top:1rem;margin-bottom:1rem}\n"] }]
        }] });

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$1.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i3$1.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$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.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$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i7$1.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$1.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: i8.NgmMemberTreeComponent, selector: "ngm-member-tree", inputs: ["dataSettings", "dimension", "options", "appearance", "disabled"], outputs: ["loadingChanging"] }, { kind: "ngmodule", type: NgmInputModule }, { kind: "component", type: i7.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: () => [] });

class NgmParameterSelectComponent {
    #dialog;
    #viewContainerRef;
    constructor() {
        this.eCubeParameterEnum = CubeParameterEnum;
        this._dialog = inject(MatDialog);
        this.#dialog = inject(Dialog, { optional: true });
        this.#viewContainerRef = inject(ViewContainerRef);
        this.appearance = 'fill';
        this.label = 'Parameter';
        this.placeholder = '@';
        this.dataSettings = input();
        this.entityType = input();
        // formControl = new FormControl()
        this.parameters$ = toObservable(this.entityType).pipe(map((entityType) => {
            return Object.keys(entityType?.parameters ?? {}).map((key) => ({
                key: parameterFormatter(key),
                caption: entityType.parameters[key].caption || key,
                value: entityType.parameters[key]
            }));
        }));
        this.model = model(null);
        effect(() => {
            if (nonNullable(this.model())) {
                this.onChange?.(this.model());
            }
        }, { allowSignalWrites: true });
    }
    writeValue(obj) {
        // this.formControl.setValue(obj)
        if (obj) {
            this.model.set(obj);
        }
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    setDisabledState(isDisabled) {
        this.disabled = isDisabled;
    }
    onOptionSelected(event) {
        //
    }
    async openCreate() {
        this.#dialog
            .open(NgmParameterCreateComponent, {
            viewContainerRef: this.#viewContainerRef,
            data: {
                dataSettings: this.dataSettings(),
                entityType: this.entityType()
            }
        })
            .closed
            .subscribe((result) => {
            //
        });
    }
    openEditParameter(key) {
        this.#dialog
            .open(NgmParameterCreateComponent, {
            viewContainerRef: this.#viewContainerRef,
            data: {
                dataSettings: this.dataSettings(),
                entityType: this.entityType(),
                name: key
            }
        })
            .closed
            .subscribe((result) => {
            if (result) {
                console.log(result);
            }
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgmParameterSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NgmParameterSelectComponent, isStandalone: true, selector: "ngm-parameter-select", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, displayDensity: { classPropertyName: "displayDensity", publicName: "displayDensity", isSignal: false, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { model: "modelChange" }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                multi: true,
                useExisting: forwardRef(() => NgmParameterSelectComponent)
            }
        ], ngImport: i0, template: "<ngm-input searchable [label]=\"label\" [placeholder]=\"placeholder\"\n  [options]=\"parameters$ | async\"\n  valueKey=\"key\"\n  [(ngModel)]=\"model\"\n>\n  <div ngmSuffix class=\"ngm-input__suffix flex items-center\">\n    <button mat-icon-button displayDensity=\"compact\" [cdkMenuTriggerFor]=\"paramMenu\"\n      (click)=\"$event.stopPropagation(); $event.preventDefault()\">\n      <mat-icon>alternate_email</mat-icon>\n    </button>\n\n    <ng-content select=\"[ngmSuffix]\"></ng-content>\n  </div>\n\n  <ng-template ngmOptionContent let-option>\n    <button mat-icon-button displayDensity=\"cosy\" (click)=\"openEditParameter(option.name)\">\n      <mat-icon fontSet=\"material-icons-outlined\">edit</mat-icon>\n    </button>\n  </ng-template>\n</ngm-input>\n\n<ng-template #paramMenu>\n  <div cdkMenu class=\"cdk-menu__large\">\n    @for (parameter of parameters$ | async; track parameter.key) {\n      <div cdkMenuItemRadio \n        [cdkMenuItemChecked]=\"model() === parameter.key\"\n        (cdkMenuItemTriggered)=\"model.set(parameter.key)\"\n      >\n        <ngm-display-behaviour class=\"grow\" [option]=\"parameter\" />\n        <button type=\"button\" class=\"shrink-0 w-7 h-7 flex justify-center items-center rounded-full text-text-secondary hover:text-text-primary hover:bg-hover-bg\"\n          (click)=\"$event.stopPropagation(); openEditParameter(parameter.value.name)\">\n          <i class=\"ri-edit-line\"></i>\n        </button>\n      </div>\n    }\n\n    <div class=\"w-full border-t border-solid border-divider-deep my-1\"></div>\n\n    <button cdkMenuItem class=\"!border border-dashed border-divider-regular\"\n      (click)=\"$event.stopPropagation();openCreate()\">\n      {{ 'Ngm.Property.CreateParameter' | translate: {Default: \"Create Parameter\"} }}\n    </button>\n  </div>\n</ng-template>\n", styles: [":host{display:flex;min-width:100px;flex-direction:column;align-items:stretch;justify-content:flex-start}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { 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: ReactiveFormsModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "ngmodule", type: CdkMenuModule }, { kind: "directive", type: i3$2.CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: i3$2.CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "directive", type: i3$2.CdkMenuItemRadio, selector: "[cdkMenuItemRadio]", exportAs: ["cdkMenuItemRadio"] }, { kind: "directive", type: i3$2.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatAutocompleteModule }, { 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: "component", type: NgmDisplayBehaviourComponent, selector: "ngm-display-behaviour", inputs: ["displayBehaviour", "excludeSelected", "option", "highlight"] }, { kind: "component", type: NgmInputComponent, selector: "ngm-input", inputs: ["label", "placeholder", "type", "defaultValue", "valueKey", "displayDensity", "options", "disabled", "simple"], outputs: ["blur"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgmParameterSelectComponent, decorators: [{
            type: Component,
            args: [{ standalone: true, selector: 'ngm-parameter-select', providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            multi: true,
                            useExisting: forwardRef(() => NgmParameterSelectComponent)
                        }
                    ], imports: [
                        CommonModule,
                        FormsModule,
                        ReactiveFormsModule,
                        DragDropModule,
                        CdkMenuModule,
                        MatInputModule,
                        MatButtonModule,
                        MatIconModule,
                        MatDividerModule,
                        MatAutocompleteModule,
                        TranslateModule,
                        OcapCoreModule,
                        NgmDisplayBehaviourComponent,
                        NgmInputComponent
                    ], template: "<ngm-input searchable [label]=\"label\" [placeholder]=\"placeholder\"\n  [options]=\"parameters$ | async\"\n  valueKey=\"key\"\n  [(ngModel)]=\"model\"\n>\n  <div ngmSuffix class=\"ngm-input__suffix flex items-center\">\n    <button mat-icon-button displayDensity=\"compact\" [cdkMenuTriggerFor]=\"paramMenu\"\n      (click)=\"$event.stopPropagation(); $event.preventDefault()\">\n      <mat-icon>alternate_email</mat-icon>\n    </button>\n\n    <ng-content select=\"[ngmSuffix]\"></ng-content>\n  </div>\n\n  <ng-template ngmOptionContent let-option>\n    <button mat-icon-button displayDensity=\"cosy\" (click)=\"openEditParameter(option.name)\">\n      <mat-icon fontSet=\"material-icons-outlined\">edit</mat-icon>\n    </button>\n  </ng-template>\n</ngm-input>\n\n<ng-template #paramMenu>\n  <div cdkMenu class=\"cdk-menu__large\">\n    @for (parameter of parameters$ | async; track parameter.key) {\n      <div cdkMenuItemRadio \n        [cdkMenuItemChecked]=\"model() === parameter.key\"\n        (cdkMenuItemTriggered)=\"model.set(parameter.key)\"\n      >\n        <ngm-display-behaviour class=\"grow\" [option]=\"parameter\" />\n        <button type=\"button\" class=\"shrink-0 w-7 h-7 flex justify-center items-center rounded-full text-text-secondary hover:text-text-primary hover:bg-hover-bg\"\n          (click)=\"$event.stopPropagation(); openEditParameter(parameter.value.name)\">\n          <i class=\"ri-edit-line\"></i>\n        </button>\n      </div>\n    }\n\n    <div class=\"w-full border-t border-solid border-divider-deep my-1\"></div>\n\n    <button cdkMenuItem class=\"!border border-dashed border-divider-regular\"\n      (click)=\"$event.stopPropagation();openCreate()\">\n      {{ 'Ngm.Property.CreateParameter' | translate: {Default: \"Create Parameter\"} }}\n    </button>\n  </div>\n</ng-template>\n", styles: [":host{display:flex;min-width:100px;flex-direction:column;align-items:stretch;justify-content:flex-start}\n"] }]
        }], ctorParameters: () => [], propDecorators: { appearance: [{
                type: Input
            }], label: [{
                type: Input
            }], placeholder: [{
                type: Input
            }], disabled: [{
                type: Input
            }], displayDensity: [{
                type: Input
            }] } });

class NgmParameterModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgmParameterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: NgmParameterModule, imports: [NgmParameterComponent,
            NgmParameterCreateComponent,
            NgmParameterSelectComponent], exports: [NgmParameterComponent,
            NgmParameterCreateComponent,
            NgmParameterSelectComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgmParameterModule, imports: [NgmParameterComponent,
            NgmParameterCreateComponent,
            NgmParameterSelectComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgmParameterModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [
                        NgmParameterComponent,
                        NgmParameterCreateComponent,
                        NgmParameterSelectComponent
                    ],
                    exports: [
                        NgmParameterComponent,
                        NgmParameterCreateComponent,
                        NgmParameterSelectComponent
                    ],
                    declarations: [],
                    providers: []
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { NgmParameterComponent, NgmParameterCreateComponent, NgmParameterModule, NgmParameterSelectComponent };
//# sourceMappingURL=metad-ocap-angular-parameter.mjs.map
