import { DragDropModule } from '@angular/cdk/drag-drop';
import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, HostBinding, Input, inject } from '@angular/core';
import { FormArray, FormBuilder, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
import { MatDividerModule } from '@angular/material/divider';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { NgmOcapCoreService, OcapCoreModule } from '@metad/ocap-angular/core';
import { calcOffsetRange, formatRangeCurrentPeriod, getEntityProperty } from '@metad/ocap-core';
import { TranslateModule } from '@ngx-translate/core';
import { BehaviorSubject, combineLatest, map, shareReplay, startWith } from 'rxjs';
import * as i0 from "@angular/core";
import * as i1 from "@metad/ocap-angular/core";
import * as i2 from "@angular/forms";
import * as i3 from "@angular/common";
import * as i4 from "@ngx-translate/core";
import * as i5 from "@angular/cdk/drag-drop";
import * as i6 from "@angular/material/dialog";
import * as i7 from "@angular/material/form-field";
import * as i8 from "@angular/material/select";
import * as i9 from "@angular/material/core";
import * as i10 from "@angular/material/expansion";
import * as i11 from "@angular/material/icon";
import * as i12 from "@angular/material/divider";
import * as i13 from "@angular/material/input";
import * as i14 from "@angular/material/button";
/**
 * 时间维度的 Filter 编辑界面
 */
export class NgmTimeFilterEditorComponent {
    get entityType() {
        return this.entityType$.value;
    }
    set entityType(value) {
        this.entityType$.next(value);
    }
    constructor(coreService, formBuilder) {
        this.coreService = coreService;
        this.formBuilder = formBuilder;
        this.isDialogContainer = true;
        this.data = inject(MAT_DIALOG_DATA, { optional: true });
        this._dialogRef = inject((MatDialogRef), { optional: true });
        this.entityType$ = new BehaviorSubject(null);
        this.formGroup = new FormGroup({
            dimension: new FormGroup({
                dimension: new FormControl(null),
                hierarchy: new FormControl(null)
            }),
            currentDate: new FormControl(),
            ranges: new FormArray([]),
            allowModifySelections: new FormControl(null),
            selectionType: new FormControl()
        });
        this.property$ = combineLatest([
            this.entityType$,
            this.formGroup
                .get('dimension')
                .get('dimension')
                .valueChanges.pipe(startWith(this.formGroup.value.dimension?.dimension))
        ]).pipe(map(([entityType, dimension]) => getEntityProperty(entityType, dimension)), shareReplay(1));
        this.hierarchies$ = this.property$.pipe(map((property) => property?.hierarchies));
        this.forControl = false;
        this.property$.subscribe();
    }
    ngOnInit() {
        if (this.data) {
            this.entityType = this.data.entityType;
            const current = this.coreService.execDateVariables(this.data.slicer.currentDate);
            this.data.slicer.ranges.forEach((range) => {
                const currentPeriod = formatRangeCurrentPeriod(current, range);
                const result = calcOffsetRange(current, range);
                this.ranges.push(this.buildRangeForm({
                    ...range,
                    currentPeriod,
                    result
                }));
            });
            this.formGroup.patchValue(this.data.slicer);
            this.forControl = this.data.forControl;
        }
        this.formGroup.valueChanges.subscribe((value) => {
            try {
                const current = this.coreService.execDateVariables(value.currentDate);
                value.ranges.forEach((range, i) => {
                    const currentPeriod = formatRangeCurrentPeriod(current, range);
                    const result = calcOffsetRange(current, range);
                    this.ranges.controls[i].patchValue({
                        currentPeriod,
                        result
                    }, { emitEvent: false });
                });
            }
            catch (err) {
                console.warn(err);
            }
        });
    }
    buildRangeForm(range) {
        const form = this.formBuilder.group({
            type: new FormControl(),
            granularity: new FormControl(),
            current: new FormGroup({
                direction: new FormControl(),
                granularity: new FormControl(),
                amount: new FormControl()
            }),
            lookBack: new FormControl(),
            lookAhead: new FormControl(),
            currentPeriod: new FormControl({ value: null, disabled: true }),
            formatter: new FormControl(),
            result: new FormControl()
        });
        if (range) {
            form.patchValue(range);
        }
        return form;
    }
    get ranges() {
        return this.formGroup.get('ranges');
    }
    addRange(event) {
        this.ranges.push(this.buildRangeForm());
        event?.preventDefault();
    }
    onApply() {
        this._dialogRef.close({
            ...this.formGroup.value
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgmTimeFilterEditorComponent, deps: [{ token: i1.NgmOcapCoreService }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NgmTimeFilterEditorComponent, isStandalone: true, selector: "ngm-time-filter-editor", inputs: { entityType: "entityType" }, host: { properties: { "class.ngm-dialog-container": "this.isDialogContainer" } }, ngImport: i0, template: "<header mat-dialog-title cdkDrag cdkDragRootElement=\".cdk-overlay-pane\" cdkDragHandle>\n  <h4 style=\"pointer-events: none;\" *ngIf=\"property$ | async as property\">\n    {{ 'Ngm.TimeFilter.SET_DATE_RANGE' | translate: {Default: \"Set Date Range for {{property.caption}}\", property: property.caption} }}\n  </h4>\n</header>\n\n<div mat-dialog-content [formGroup]=\"formGroup\">\n  <div class=\"ngm-timer-editor__header\" >\n    <mat-form-field appearance=\"fill\">\n      <mat-label>{{ 'Ngm.TimeFilter.CURRENT_DATE' | translate: {Default: \"Current Date\"} }}</mat-label>\n      <mat-select formControlName=\"currentDate\">\n        <mat-option value=\"SYSTEMTIME\">{{ 'Ngm.TimeFilter.SYSTEM_DATE' | translate: {Default: \"System Date\"} }}</mat-option>\n        <mat-option value=\"TODAY\">{{ 'Ngm.TimeFilter.USER_CURRENT_DATE' | translate: {Default: \"User Current Date\"} }}</mat-option>\n      </mat-select>\n    </mat-form-field>\n\n    <ng-container *ngIf=\"hierarchies$ | async as hierarchies\">\n      <mat-form-field appearance=\"fill\" formGroupName=\"dimension\">\n        <mat-label>{{ 'Ngm.Common.Hierarchy' | translate: {Default: \"Hierarchy\"} }}</mat-label>\n        <mat-select formControlName=\"hierarchy\">\n          <mat-option *ngFor=\"let hierarchy of hierarchies\" [value]=\"hierarchy.name\">{{hierarchy.caption}}</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ng-container>\n\n  </div>\n\n  <mat-accordion hideToggle formArrayName=\"ranges\" displayDensity=\"cosy\" class=\"\">\n    <mat-expansion-panel *ngFor=\"let range of ranges.controls; let i = index;\" [formGroupName]=\"i\">\n      <mat-expansion-panel-header class=\"pr-0\">\n        <mat-panel-title>\n          {{ 'Ngm.TimeFilter.RANGE' | translate: {Default: \"Range\"} }} {{i + 1}}: {{range.value.result?.[0]}} - {{range.value.result?.[1]}}\n        </mat-panel-title>\n        <mat-panel-description class=\"\">\n          <button mat-icon-button ngmAppearance=\"danger\" (click)=\"ranges.controls.splice(i, 1)\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </mat-panel-description>\n      </mat-expansion-panel-header>\n \n        <div class=\"flex flex-wrap gap-2\">\n          <mat-form-field appearance=\"fill\">\n            <mat-label>{{ 'Ngm.TimeFilter.RANGE_TYPE' | translate: {Default: \"Range Type\"} }}</mat-label>\n            <mat-select formControlName=\"type\" >\n              <mat-option value=\"Standard\">\n                {{ 'Ngm.TimeFilter.RANGE_TYPE_STANDARD' | translate: {Default: \"Standard\"} }}\n              </mat-option>\n              <mat-option value=\"Offset\">\n                {{ 'Ngm.TimeFilter.RANGE_TYPE_OFFSET' | translate: {Default: \"Offset\"} }}\n              </mat-option>\n            </mat-select>\n          </mat-form-field>\n\n          <mat-form-field appearance=\"fill\">\n            <mat-label>{{ 'Ngm.TimeFilter.GRANULARITY' | translate: {Default: \"Granularity\"} }}</mat-label>\n            <mat-select formControlName=\"granularity\">\n              <mat-option value=\"Year\">\n                {{ 'Ngm.TimeFilter.YEAR' | translate: {Default: \"Year\"} }}\n              </mat-option>\n              <mat-option value=\"Quarter\">\n                {{ 'Ngm.TimeFilter.QUARTER' | translate: {Default: \"Quarter\"} }}\n              </mat-option>\n              <mat-option value=\"Month\">\n                {{ 'Ngm.TimeFilter.MONTH' | translate: {Default: \"Month\"} }}\n              </mat-option>\n              <mat-option value=\"Week\">\n                {{ 'Ngm.TimeFilter.WEEK' | translate: {Default: \"Week\"} }}\n              </mat-option>\n              <mat-option value=\"Day\">\n                {{ 'Ngm.TimeFilter.DAY' | translate: {Default: \"Day\"} }}\n              </mat-option>\n            </mat-select>\n          </mat-form-field>\n    \n          <mat-form-field appearance=\"fill\">\n            <mat-label>{{ 'Ngm.TimeFilter.LOOK_BACK' | translate: {Default: \"Look Back\"} }}</mat-label>\n            <input matInput formControlName=\"lookBack\" type=\"number\">\n          </mat-form-field>\n    \n          <mat-form-field appearance=\"fill\">\n            <mat-label>{{ 'Ngm.TimeFilter.CURRENT_PERIOD' | translate: {Default: \"Current Period\"} }}</mat-label>\n            <input matInput formControlName=\"currentPeriod\" >\n          </mat-form-field>\n    \n          <mat-form-field appearance=\"fill\">\n            <mat-label>{{ 'Ngm.TimeFilter.LOOK_AHEAD' | translate: {Default: \"Look Ahead\"} }}</mat-label>\n            <input matInput formControlName=\"lookAhead\" type=\"number\">\n          </mat-form-field>\n          <mat-form-field appearance=\"fill\">\n            <mat-label>{{ 'Ngm.TimeFilter.FORMATTER' | translate: {Default: \"Formatter\"} }}</mat-label>\n            <input matInput formControlName=\"formatter\" type=\"string\">\n          </mat-form-field>\n        </div>\n\n        <div *ngIf=\"range.value.type==='Offset'\" formGroupName=\"current\" class=\"flex flex-wrap gap-2\">\n          <mat-form-field appearance=\"fill\">\n            <mat-label>{{ 'Ngm.TimeFilter.OFFSET_DIRECTION' | translate: {Default: \"Offset Direction\"} }}</mat-label>\n            <mat-select formControlName=\"direction\">\n              <mat-option value=\"LookBack\">\n                {{ 'Ngm.TimeFilter.LOOK_BACK' | translate: {Default: \"Look Back\"} }}\n              </mat-option>\n              <mat-option value=\"LookAhead\">\n                {{ 'Ngm.TimeFilter.LOOK_AHEAD' | translate: {Default: \"Look Ahead\"} }}\n              </mat-option>\n            </mat-select>\n          </mat-form-field>\n\n          <mat-form-field appearance=\"fill\" >\n            <mat-label>{{ 'Ngm.TimeFilter.GRANULARITY' | translate: {Default: \"Granularity\"} }}</mat-label>\n            <mat-select formControlName=\"granularity\">\n              <mat-option [value]=\"range.value.granularity\">{{range.value.granularity}}</mat-option>\n            </mat-select>\n          </mat-form-field>\n\n          <mat-form-field appearance=\"fill\">\n            <mat-label>{{ 'Ngm.TimeFilter.OFFSET_AMOUNT' | translate: {Default: \"Offset Amount\"} }}</mat-label>\n            <input matInput formControlName=\"amount\" type=\"number\">\n          </mat-form-field>\n        </div>\n      \n    </mat-expansion-panel>\n  </mat-accordion>\n\n  <button mat-stroked-button class=\"ngm-timer-editor__add\" color=\"primary\" ngmAppearance=\"dashed\" (click)=\"addRange($event)\">\n    <mat-icon>add</mat-icon>{{ 'Ngm.TimeFilter.ADD_TIME_RANGE' | translate: {Default: \"Add Time Range\"} }}\n  </button>\n\n  <div class=\"flex-1\"></div>\n\n  <div *ngIf=\"forControl\" class=\"flex flex-col\">\n    <mat-divider></mat-divider>\n    <div>{{ 'Ngm.TimeFilter.SETTINGS_FOR_USERS' | translate: {Default: \"Settings for Users\"} }}</div>\n    <mat-checkbox formControlName=\"allowModifySelections\">\n      {{ 'Ngm.TimeFilter.ALLOW_MODIFY_SELECTIONS' | translate: {Default: \"Allow viewers to modify selections\"} }}\n    </mat-checkbox>\n    <mat-form-field appearance=\"fill\">\n      <mat-label>{{ 'Ngm.TimeFilter.SELECTION_TYPE' | translate: {Default: \"Selection Type\"} }}</mat-label>\n      <mat-select formControlName=\"selectionType\">\n        <mat-option value=\"Multiple\">\n          {{ 'Ngm.TimeFilter.SELECTION_TYPE_MULTIPLE' | translate: {Default: \"Multiple\"} }}\n        </mat-option>\n        <mat-option value=\"Single\">\n          {{ 'Ngm.TimeFilter.SELECTION_TYPE_SINGLE' | translate: {Default: \"Single\"} }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n</div>\n\n<div mat-dialog-actions align=\"end\">\n  <div ngmButtonGroup>\n    <button mat-button mat-dialog-close>\n      {{ 'Ngm.Common.Cancel' | translate: {Default: \"Cancel\"} }}\n    </button>\n    <button mat-raised-button color=\"accent\" (click)=\"onApply()\" cdkFocusInitial>\n      {{ 'Ngm.Common.Apply' | translate: {Default: \"Apply\"} }}\n    </button>\n  </div>\n</div>\n", styles: [":host .mat-expansion-panel-header-description{justify-content:flex-end;margin-right:0}:host .ngm-timer-editor__header{display:flex;justify-content:space-between}.mat-expansion-panel-header{padding-right:0}.ngm-timer-editor__add{margin-top:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.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: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i6.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i6.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i6.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i6.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i10.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i10.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i10.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i10.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i10.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i13.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: i14.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i14.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: OcapCoreModule }, { kind: "directive", type: i1.DensityDirective, selector: "[displayDensity]", inputs: ["displayDensity"] }, { kind: "directive", type: i1.AppearanceDirective, selector: "[ngmAppearance]", inputs: ["color", "ngmAppearance", "outline", "hero", "acrylic", "opacity", "dashed", "danger"] }, { kind: "directive", type: i1.ButtonGroupDirective, selector: "[ngmButtonGroup]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgmTimeFilterEditorComponent, decorators: [{
            type: Component,
            args: [{ standalone: true, imports: [
                        CommonModule,
                        TranslateModule,
                        ReactiveFormsModule,
                        DragDropModule,
                        MatDialogModule,
                        MatFormFieldModule,
                        MatSelectModule,
                        MatExpansionModule,
                        MatIconModule,
                        MatDividerModule,
                        MatInputModule,
                        MatButtonModule,
                        OcapCoreModule
                    ], changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngm-time-filter-editor', template: "<header mat-dialog-title cdkDrag cdkDragRootElement=\".cdk-overlay-pane\" cdkDragHandle>\n  <h4 style=\"pointer-events: none;\" *ngIf=\"property$ | async as property\">\n    {{ 'Ngm.TimeFilter.SET_DATE_RANGE' | translate: {Default: \"Set Date Range for {{property.caption}}\", property: property.caption} }}\n  </h4>\n</header>\n\n<div mat-dialog-content [formGroup]=\"formGroup\">\n  <div class=\"ngm-timer-editor__header\" >\n    <mat-form-field appearance=\"fill\">\n      <mat-label>{{ 'Ngm.TimeFilter.CURRENT_DATE' | translate: {Default: \"Current Date\"} }}</mat-label>\n      <mat-select formControlName=\"currentDate\">\n        <mat-option value=\"SYSTEMTIME\">{{ 'Ngm.TimeFilter.SYSTEM_DATE' | translate: {Default: \"System Date\"} }}</mat-option>\n        <mat-option value=\"TODAY\">{{ 'Ngm.TimeFilter.USER_CURRENT_DATE' | translate: {Default: \"User Current Date\"} }}</mat-option>\n      </mat-select>\n    </mat-form-field>\n\n    <ng-container *ngIf=\"hierarchies$ | async as hierarchies\">\n      <mat-form-field appearance=\"fill\" formGroupName=\"dimension\">\n        <mat-label>{{ 'Ngm.Common.Hierarchy' | translate: {Default: \"Hierarchy\"} }}</mat-label>\n        <mat-select formControlName=\"hierarchy\">\n          <mat-option *ngFor=\"let hierarchy of hierarchies\" [value]=\"hierarchy.name\">{{hierarchy.caption}}</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ng-container>\n\n  </div>\n\n  <mat-accordion hideToggle formArrayName=\"ranges\" displayDensity=\"cosy\" class=\"\">\n    <mat-expansion-panel *ngFor=\"let range of ranges.controls; let i = index;\" [formGroupName]=\"i\">\n      <mat-expansion-panel-header class=\"pr-0\">\n        <mat-panel-title>\n          {{ 'Ngm.TimeFilter.RANGE' | translate: {Default: \"Range\"} }} {{i + 1}}: {{range.value.result?.[0]}} - {{range.value.result?.[1]}}\n        </mat-panel-title>\n        <mat-panel-description class=\"\">\n          <button mat-icon-button ngmAppearance=\"danger\" (click)=\"ranges.controls.splice(i, 1)\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </mat-panel-description>\n      </mat-expansion-panel-header>\n \n        <div class=\"flex flex-wrap gap-2\">\n          <mat-form-field appearance=\"fill\">\n            <mat-label>{{ 'Ngm.TimeFilter.RANGE_TYPE' | translate: {Default: \"Range Type\"} }}</mat-label>\n            <mat-select formControlName=\"type\" >\n              <mat-option value=\"Standard\">\n                {{ 'Ngm.TimeFilter.RANGE_TYPE_STANDARD' | translate: {Default: \"Standard\"} }}\n              </mat-option>\n              <mat-option value=\"Offset\">\n                {{ 'Ngm.TimeFilter.RANGE_TYPE_OFFSET' | translate: {Default: \"Offset\"} }}\n              </mat-option>\n            </mat-select>\n          </mat-form-field>\n\n          <mat-form-field appearance=\"fill\">\n            <mat-label>{{ 'Ngm.TimeFilter.GRANULARITY' | translate: {Default: \"Granularity\"} }}</mat-label>\n            <mat-select formControlName=\"granularity\">\n              <mat-option value=\"Year\">\n                {{ 'Ngm.TimeFilter.YEAR' | translate: {Default: \"Year\"} }}\n              </mat-option>\n              <mat-option value=\"Quarter\">\n                {{ 'Ngm.TimeFilter.QUARTER' | translate: {Default: \"Quarter\"} }}\n              </mat-option>\n              <mat-option value=\"Month\">\n                {{ 'Ngm.TimeFilter.MONTH' | translate: {Default: \"Month\"} }}\n              </mat-option>\n              <mat-option value=\"Week\">\n                {{ 'Ngm.TimeFilter.WEEK' | translate: {Default: \"Week\"} }}\n              </mat-option>\n              <mat-option value=\"Day\">\n                {{ 'Ngm.TimeFilter.DAY' | translate: {Default: \"Day\"} }}\n              </mat-option>\n            </mat-select>\n          </mat-form-field>\n    \n          <mat-form-field appearance=\"fill\">\n            <mat-label>{{ 'Ngm.TimeFilter.LOOK_BACK' | translate: {Default: \"Look Back\"} }}</mat-label>\n            <input matInput formControlName=\"lookBack\" type=\"number\">\n          </mat-form-field>\n    \n          <mat-form-field appearance=\"fill\">\n            <mat-label>{{ 'Ngm.TimeFilter.CURRENT_PERIOD' | translate: {Default: \"Current Period\"} }}</mat-label>\n            <input matInput formControlName=\"currentPeriod\" >\n          </mat-form-field>\n    \n          <mat-form-field appearance=\"fill\">\n            <mat-label>{{ 'Ngm.TimeFilter.LOOK_AHEAD' | translate: {Default: \"Look Ahead\"} }}</mat-label>\n            <input matInput formControlName=\"lookAhead\" type=\"number\">\n          </mat-form-field>\n          <mat-form-field appearance=\"fill\">\n            <mat-label>{{ 'Ngm.TimeFilter.FORMATTER' | translate: {Default: \"Formatter\"} }}</mat-label>\n            <input matInput formControlName=\"formatter\" type=\"string\">\n          </mat-form-field>\n        </div>\n\n        <div *ngIf=\"range.value.type==='Offset'\" formGroupName=\"current\" class=\"flex flex-wrap gap-2\">\n          <mat-form-field appearance=\"fill\">\n            <mat-label>{{ 'Ngm.TimeFilter.OFFSET_DIRECTION' | translate: {Default: \"Offset Direction\"} }}</mat-label>\n            <mat-select formControlName=\"direction\">\n              <mat-option value=\"LookBack\">\n                {{ 'Ngm.TimeFilter.LOOK_BACK' | translate: {Default: \"Look Back\"} }}\n              </mat-option>\n              <mat-option value=\"LookAhead\">\n                {{ 'Ngm.TimeFilter.LOOK_AHEAD' | translate: {Default: \"Look Ahead\"} }}\n              </mat-option>\n            </mat-select>\n          </mat-form-field>\n\n          <mat-form-field appearance=\"fill\" >\n            <mat-label>{{ 'Ngm.TimeFilter.GRANULARITY' | translate: {Default: \"Granularity\"} }}</mat-label>\n            <mat-select formControlName=\"granularity\">\n              <mat-option [value]=\"range.value.granularity\">{{range.value.granularity}}</mat-option>\n            </mat-select>\n          </mat-form-field>\n\n          <mat-form-field appearance=\"fill\">\n            <mat-label>{{ 'Ngm.TimeFilter.OFFSET_AMOUNT' | translate: {Default: \"Offset Amount\"} }}</mat-label>\n            <input matInput formControlName=\"amount\" type=\"number\">\n          </mat-form-field>\n        </div>\n      \n    </mat-expansion-panel>\n  </mat-accordion>\n\n  <button mat-stroked-button class=\"ngm-timer-editor__add\" color=\"primary\" ngmAppearance=\"dashed\" (click)=\"addRange($event)\">\n    <mat-icon>add</mat-icon>{{ 'Ngm.TimeFilter.ADD_TIME_RANGE' | translate: {Default: \"Add Time Range\"} }}\n  </button>\n\n  <div class=\"flex-1\"></div>\n\n  <div *ngIf=\"forControl\" class=\"flex flex-col\">\n    <mat-divider></mat-divider>\n    <div>{{ 'Ngm.TimeFilter.SETTINGS_FOR_USERS' | translate: {Default: \"Settings for Users\"} }}</div>\n    <mat-checkbox formControlName=\"allowModifySelections\">\n      {{ 'Ngm.TimeFilter.ALLOW_MODIFY_SELECTIONS' | translate: {Default: \"Allow viewers to modify selections\"} }}\n    </mat-checkbox>\n    <mat-form-field appearance=\"fill\">\n      <mat-label>{{ 'Ngm.TimeFilter.SELECTION_TYPE' | translate: {Default: \"Selection Type\"} }}</mat-label>\n      <mat-select formControlName=\"selectionType\">\n        <mat-option value=\"Multiple\">\n          {{ 'Ngm.TimeFilter.SELECTION_TYPE_MULTIPLE' | translate: {Default: \"Multiple\"} }}\n        </mat-option>\n        <mat-option value=\"Single\">\n          {{ 'Ngm.TimeFilter.SELECTION_TYPE_SINGLE' | translate: {Default: \"Single\"} }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n</div>\n\n<div mat-dialog-actions align=\"end\">\n  <div ngmButtonGroup>\n    <button mat-button mat-dialog-close>\n      {{ 'Ngm.Common.Cancel' | translate: {Default: \"Cancel\"} }}\n    </button>\n    <button mat-raised-button color=\"accent\" (click)=\"onApply()\" cdkFocusInitial>\n      {{ 'Ngm.Common.Apply' | translate: {Default: \"Apply\"} }}\n    </button>\n  </div>\n</div>\n", styles: [":host .mat-expansion-panel-header-description{justify-content:flex-end;margin-right:0}:host .ngm-timer-editor__header{display:flex;justify-content:space-between}.mat-expansion-panel-header{padding-right:0}.ngm-timer-editor__add{margin-top:1rem}\n"] }]
        }], ctorParameters: () => [{ type: i1.NgmOcapCoreService }, { type: i2.FormBuilder }], propDecorators: { isDialogContainer: [{
                type: HostBinding,
                args: ['class.ngm-dialog-container']
            }], entityType: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 