import { DragDropModule } from '@angular/cdk/drag-drop';
import { CommonModule } from '@angular/common';
import { Component, forwardRef, inject, input, Input, ViewContainerRef } from '@angular/core';
import { toObservable } from '@angular/core/rxjs-interop';
import { FormControl, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatButtonModule } from '@angular/material/button';
import { MatDialog } from '@angular/material/dialog';
import { MatDividerModule } from '@angular/material/divider';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatMenuModule } from '@angular/material/menu';
import { MatRadioModule } from '@angular/material/radio';
import { NgmDisplayBehaviourComponent, NgmSelectComponent } from '@metad/ocap-angular/common';
import { filterSearch, OcapCoreModule } from '@metad/ocap-angular/core';
import { ParameterControlEnum, parameterFormatter } from '@metad/ocap-core';
import { TranslateModule } from '@ngx-translate/core';
import { combineLatest, firstValueFrom, map, startWith } from 'rxjs';
import { NgmParameterCreateComponent } from '../parameter-create/parameter-create.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/forms";
import * as i3 from "@angular/material/input";
import * as i4 from "@angular/material/button";
import * as i5 from "@angular/material/icon";
import * as i6 from "@angular/material/menu";
import * as i7 from "@angular/material/radio";
import * as i8 from "@angular/material/divider";
import * as i9 from "@angular/material/autocomplete";
import * as i10 from "@angular/material/core";
import * as i11 from "@ngx-translate/core";
import * as i12 from "@metad/ocap-angular/core";
export class NgmParameterSelectComponent {
    constructor() {
        this.ParameterControlEnum = ParameterControlEnum;
        this._dialog = inject(MatDialog);
        this.#viewContainerRef = inject(ViewContainerRef);
        this.appearance = 'fill';
        this.label = 'Parameter';
        this.placeholder = '@';
        this.dataSettings = input();
        this.entityType = input();
        this.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.selectOptions$ = combineLatest([this.parameters$, this.formControl.valueChanges.pipe(startWith(null))]).pipe(map(([parameters, value]) => filterSearch(parameters, value)));
    }
    #viewContainerRef;
    get value() {
        return this.formControl.value;
    }
    set value(value) {
        this.formControl.setValue(value);
        this.onChange?.(value);
    }
    writeValue(obj) {
        this.formControl.setValue(obj);
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    setDisabledState(isDisabled) {
        this.disabled = isDisabled;
    }
    onOptionSelected(event) {
        //
    }
    async openCreate() {
        await firstValueFrom(this._dialog
            .open(NgmParameterCreateComponent, {
            viewContainerRef: this.#viewContainerRef,
            data: {
                dataSettings: this.dataSettings,
                entityType: this.entityType
            }
        })
            .afterClosed());
    }
    openEditParameter(key) {
        this._dialog
            .open(NgmParameterCreateComponent, {
            viewContainerRef: this.#viewContainerRef,
            data: {
                dataSettings: this.dataSettings(),
                entityType: this.entityType(),
                name: key
            }
        })
            .afterClosed()
            .subscribe((result) => {
            if (result) {
                console.log(result);
            }
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: NgmParameterSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", 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 } }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                multi: true,
                useExisting: forwardRef(() => NgmParameterSelectComponent)
            }
        ], ngImport: i0, template: "<ngm-select searchable [label]=\"label\" [placeholder]=\"placeholder\"\n  [selectOptions]=\"selectOptions$ | async\"\n  valueKey=\"key\"\n  [(ngModel)]=\"value\"\n>\n  <div ngmSuffix class=\"ngm-input__suffix flex items-center\">\n    <button mat-icon-button displayDensity=\"compact\" [matMenuTriggerFor]=\"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    \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-select>\n\n<label class=\"ngm-input-label\">\n  {{ label }}\n</label>\n\n<div class=\"w-full relative flex items-center bg-gray-50 rounded-md\">\n  <div class=\"absolute left-0 max-w-[75%] overflow-hidden flex items-center px-1\">\n    <ng-content select=\"[ngmPrefix]\"></ng-content>\n  </div>\n\n  <div class=\"ngm-input__suffix flex items-center\">\n    <button mat-icon-button displayDensity=\"compact\" [matMenuTriggerFor]=\"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  <input #search matInput class=\"ngm-input-element ngm-w-full\"\n    [class.ngm-input__searching]=\"!!formControl.value\"\n    [placeholder]=\"placeholder\"\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [matAutocomplete]=\"auto\"\n  >\n</div>\n\n<mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\"\n  class=\"ngm-density__compact\"\n  (optionSelected)=\"onOptionSelected($event)\"\n>\n    <mat-option *ngFor=\"let parameter of selectOptions$ | async\" [value]=\"parameter.value\">{{parameter.label || parameter.value}}</mat-option>\n</mat-autocomplete>\n\n\n<mat-radio-group [(ngModel)]=\"value\">\n  <mat-menu #paramMenu=\"matMenu\" class=\"ngm-density__compact\">\n    @for (parameter of parameters$ | async; track $index) {\n      <button mat-menu-item disableRipple (click)=\"$event.stopPropagation();\">\n        <div class=\"flex justify-between items-center\">\n          <mat-radio-button [value]=\"parameter.key\">\n            <ngm-display-behaviour [option]=\"parameter\" />\n          </mat-radio-button>\n  \n          <button mat-icon-button displayDensity=\"cosy\" (click)=\"openEditParameter(parameter.value.name)\">\n            <mat-icon fontSet=\"material-icons-outlined\">edit</mat-icon>\n          </button>\n        </div>\n      </button>\n    }\n\n    <mat-divider></mat-divider>\n\n    <button mat-menu-item ngmAppearance=\"dashed\"\n      (click)=\"$event.stopPropagation();openCreate()\">\n      {{ 'Ngm.Property.CreateParameter' | translate: {Default: \"Create Parameter\"} }}\n    </button>\n  </mat-menu>\n</mat-radio-group>\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: "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: DragDropModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i7.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i7.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: MatDividerModule }, { kind: "component", type: i8.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i9.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i10.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i9.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { 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: "component", type: NgmSelectComponent, selector: "ngm-select", inputs: ["displayBehaviour", "displayDensity", "valueKey", "label", "placeholder", "searchable", "virtualScroll", "validators", "multiple", "selectOptions", "panelWidth"] }, { kind: "component", type: NgmDisplayBehaviourComponent, selector: "ngm-display-behaviour", inputs: ["displayBehaviour", "excludeSelected", "option", "highlight"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", 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,
                        MatInputModule,
                        MatButtonModule,
                        MatIconModule,
                        MatMenuModule,
                        MatRadioModule,
                        MatDividerModule,
                        MatAutocompleteModule,
                        TranslateModule,
                        OcapCoreModule,
                        NgmSelectComponent,
                        NgmDisplayBehaviourComponent
                    ], template: "<ngm-select searchable [label]=\"label\" [placeholder]=\"placeholder\"\n  [selectOptions]=\"selectOptions$ | async\"\n  valueKey=\"key\"\n  [(ngModel)]=\"value\"\n>\n  <div ngmSuffix class=\"ngm-input__suffix flex items-center\">\n    <button mat-icon-button displayDensity=\"compact\" [matMenuTriggerFor]=\"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    \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-select>\n\n<label class=\"ngm-input-label\">\n  {{ label }}\n</label>\n\n<div class=\"w-full relative flex items-center bg-gray-50 rounded-md\">\n  <div class=\"absolute left-0 max-w-[75%] overflow-hidden flex items-center px-1\">\n    <ng-content select=\"[ngmPrefix]\"></ng-content>\n  </div>\n\n  <div class=\"ngm-input__suffix flex items-center\">\n    <button mat-icon-button displayDensity=\"compact\" [matMenuTriggerFor]=\"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  <input #search matInput class=\"ngm-input-element ngm-w-full\"\n    [class.ngm-input__searching]=\"!!formControl.value\"\n    [placeholder]=\"placeholder\"\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [matAutocomplete]=\"auto\"\n  >\n</div>\n\n<mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\"\n  class=\"ngm-density__compact\"\n  (optionSelected)=\"onOptionSelected($event)\"\n>\n    <mat-option *ngFor=\"let parameter of selectOptions$ | async\" [value]=\"parameter.value\">{{parameter.label || parameter.value}}</mat-option>\n</mat-autocomplete>\n\n\n<mat-radio-group [(ngModel)]=\"value\">\n  <mat-menu #paramMenu=\"matMenu\" class=\"ngm-density__compact\">\n    @for (parameter of parameters$ | async; track $index) {\n      <button mat-menu-item disableRipple (click)=\"$event.stopPropagation();\">\n        <div class=\"flex justify-between items-center\">\n          <mat-radio-button [value]=\"parameter.key\">\n            <ngm-display-behaviour [option]=\"parameter\" />\n          </mat-radio-button>\n  \n          <button mat-icon-button displayDensity=\"cosy\" (click)=\"openEditParameter(parameter.value.name)\">\n            <mat-icon fontSet=\"material-icons-outlined\">edit</mat-icon>\n          </button>\n        </div>\n      </button>\n    }\n\n    <mat-divider></mat-divider>\n\n    <button mat-menu-item ngmAppearance=\"dashed\"\n      (click)=\"$event.stopPropagation();openCreate()\">\n      {{ 'Ngm.Property.CreateParameter' | translate: {Default: \"Create Parameter\"} }}\n    </button>\n  </mat-menu>\n</mat-radio-group>\n", styles: [":host{display:flex;min-width:100px;flex-direction:column;align-items:stretch;justify-content:flex-start}\n"] }]
        }], propDecorators: { appearance: [{
                type: Input
            }], label: [{
                type: Input
            }], placeholder: [{
                type: Input
            }], disabled: [{
                type: Input
            }], displayDensity: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 