import { DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, HostBinding, Input, forwardRef, inject } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { FormBuilder, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { NgmCommonModule } from '@metad/ocap-angular/common';
import { NgmDSCoreService } from '@metad/ocap-angular/core';
import { isEmpty } from '@metad/ocap-core';
import { TranslateModule } from '@ngx-translate/core';
import { filter } from 'rxjs/operators';
import { NgmPropertySelectComponent } from '../property-select/property-select.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
import * as i2 from "@angular/material/icon";
import * as i3 from "@angular/material/button";
import * as i4 from "@angular/cdk/drag-drop";
import * as i5 from "@ngx-translate/core";
import * as i6 from "@metad/ocap-angular/core";
/**
 * The component `PropertySelect` array.
 *
 */
export class NgmPropertyArrayComponent {
    constructor() {
        this.formBuilder = inject(FormBuilder);
        this.formArray = this.formBuilder.array([]);
        this.valueSub = this.formArray.valueChanges
            .pipe(filter((value) => !isEmpty(value)), takeUntilDestroyed())
            .subscribe((value) => {
            this.onChange?.(value);
        });
    }
    get isEmpty() {
        return !this.formArray.length;
    }
    writeValue(obj) {
        this.setValue(obj ?? []);
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    setDisabledState(isDisabled) {
        isDisabled ? this.formArray.disable() : this.formArray.enable();
    }
    create(item) {
        return this.formBuilder.control(item || {
            dimension: null,
            members: []
        });
    }
    add() {
        this.formArray.push(this.create());
    }
    remove(i) {
        this.formArray.removeAt(i);
    }
    setValue(dimensions) {
        this.formArray.clear();
        dimensions?.forEach((dimension) => {
            this.formArray.push(this.create(dimension));
        });
    }
    drop(event) {
        moveItemInArray(this.formArray.controls, event.previousIndex, event.currentIndex);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgmPropertyArrayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NgmPropertyArrayComponent, isStandalone: true, selector: "ngm-property-array", inputs: { dataSettings: "dataSettings", entityType: "entityType", dsCoreService: "dsCoreService", capacities: "capacities" }, host: { properties: { "class.ngm-property-array__empty": "this.isEmpty" } }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                multi: true,
                useExisting: forwardRef(() => NgmPropertyArrayComponent)
            }
        ], ngImport: i0, template: "<div class=\"ngm-property-array__container flex flex-col justify-start items-stretch\"\n  cdkDropList\n  (cdkDropListDropped)=\"drop($event)\"\n>\n\n  @if (isEmpty) {\n    <button mat-button color=\"primary\" ngmAppearance=\"dashed\" (click)=\"add()\">\n      <mat-icon fontSet=\"material-icons-round\">playlist_add</mat-icon>\n      {{ 'Ngm.Property.ADD_DIMENSION' | translate: {Default: 'Add Dimension'} }}\n    </button>\n  }\n\n  @for (item of formArray.controls; track i; let i = $index;) {\n    <ngm-property-select class=\"group\" cdkDragBoundary=\".ngm-property-array__container\" cdkDrag\n      [formControl]=\"$any(item)\"\n      [dataSettings]=\"dataSettings\"\n      [entityType]=\"entityType\"\n      [dsCoreService]=\"dsCoreService\"\n      [capacities]=\"capacities\"\n    >\n      <mat-icon ngmPrefix cdkDragHandle>drag_indicator</mat-icon>\n\n      <button ngmSuffix mat-icon-button color=\"warn\" class=\"opacity-0 group-hover:opacity-100\" displayDensity=\"compact\"\n        (click)=\"remove(i); $event.stopPropagation(); $event.preventDefault()\">\n        <mat-icon>clear</mat-icon>\n      </button>\n\n    </ngm-property-select>\n  }\n</div>\n\n@if (!isEmpty) {\n  <button class=\"add\" mat-button color=\"primary\" ngmAppearance=\"dashed\" (click)=\"add()\">\n    <mat-icon fontSet=\"material-icons-round\">playlist_add</mat-icon>\n    {{ 'Ngm.Property.ADD_DIMENSION' | translate: {Default: 'Add Dimension'} }}\n  </button>\n}", styles: [":host{display:flex;flex-direction:column}.add{margin-top:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: NgmCommonModule }, { kind: "directive", type: i6.DensityDirective, selector: "[displayDensity]", inputs: ["displayDensity"] }, { kind: "directive", type: i6.AppearanceDirective, selector: "[ngmAppearance]", inputs: ["color", "ngmAppearance", "outline", "hero", "acrylic", "opacity", "dashed", "danger"] }, { kind: "component", type: NgmPropertySelectComponent, selector: "ngm-property-select", inputs: ["label", "capacities", "required", "editable", "showAttributes", "dataSettings", "entityType", "restrictedDimensions", "dsCoreService", "syntax", "disabled", "displayDensity"], outputs: ["valueChange", "calculationChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgmPropertyArrayComponent, decorators: [{
            type: Component,
            args: [{ standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngm-property-array', providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            multi: true,
                            useExisting: forwardRef(() => NgmPropertyArrayComponent)
                        }
                    ], imports: [
                        CommonModule,
                        ReactiveFormsModule,
                        MatIconModule,
                        MatButtonModule,
                        DragDropModule,
                        TranslateModule,
                        NgmCommonModule,
                        NgmPropertySelectComponent
                    ], template: "<div class=\"ngm-property-array__container flex flex-col justify-start items-stretch\"\n  cdkDropList\n  (cdkDropListDropped)=\"drop($event)\"\n>\n\n  @if (isEmpty) {\n    <button mat-button color=\"primary\" ngmAppearance=\"dashed\" (click)=\"add()\">\n      <mat-icon fontSet=\"material-icons-round\">playlist_add</mat-icon>\n      {{ 'Ngm.Property.ADD_DIMENSION' | translate: {Default: 'Add Dimension'} }}\n    </button>\n  }\n\n  @for (item of formArray.controls; track i; let i = $index;) {\n    <ngm-property-select class=\"group\" cdkDragBoundary=\".ngm-property-array__container\" cdkDrag\n      [formControl]=\"$any(item)\"\n      [dataSettings]=\"dataSettings\"\n      [entityType]=\"entityType\"\n      [dsCoreService]=\"dsCoreService\"\n      [capacities]=\"capacities\"\n    >\n      <mat-icon ngmPrefix cdkDragHandle>drag_indicator</mat-icon>\n\n      <button ngmSuffix mat-icon-button color=\"warn\" class=\"opacity-0 group-hover:opacity-100\" displayDensity=\"compact\"\n        (click)=\"remove(i); $event.stopPropagation(); $event.preventDefault()\">\n        <mat-icon>clear</mat-icon>\n      </button>\n\n    </ngm-property-select>\n  }\n</div>\n\n@if (!isEmpty) {\n  <button class=\"add\" mat-button color=\"primary\" ngmAppearance=\"dashed\" (click)=\"add()\">\n    <mat-icon fontSet=\"material-icons-round\">playlist_add</mat-icon>\n    {{ 'Ngm.Property.ADD_DIMENSION' | translate: {Default: 'Add Dimension'} }}\n  </button>\n}", styles: [":host{display:flex;flex-direction:column}.add{margin-top:.5rem}\n"] }]
        }], propDecorators: { dataSettings: [{
                type: Input
            }], entityType: [{
                type: Input
            }], dsCoreService: [{
                type: Input
            }], capacities: [{
                type: Input
            }], isEmpty: [{
                type: HostBinding,
                args: ['class.ngm-property-array__empty']
            }] } });
//# sourceMappingURL=data:application/json;base64, 