import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, Inject, Input, Optional, computed, inject, signal } from '@angular/core';
import { toObservable, toSignal } from '@angular/core/rxjs-interop';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
import { MatDividerModule } from '@angular/material/divider';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';
import { MatSelectModule } from '@angular/material/select';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { NgmCommonModule } from '@metad/ocap-angular/common';
import { DisplayDensity, NgmDSCoreService, OcapCoreModule } from '@metad/ocap-angular/core';
import { DisplayBehaviour, FilterSelectionType, PresentationEnum, TreeSelectionMode, getEntityProperty } from '@metad/ocap-core';
import { TranslateModule } from '@ngx-translate/core';
import { merge } from 'lodash-es';
import { filter, map, switchMap } from 'rxjs';
import { NgmMemberListComponent } from '../member-list/member-list.component';
import { NgmMemberTreeComponent } from '../member-tree/member-tree.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/material/dialog";
import * as i2 from "@angular/common";
import * as i3 from "@angular/forms";
import * as i4 from "@ngx-translate/core";
import * as i5 from "@angular/material/icon";
import * as i6 from "@angular/material/slide-toggle";
import * as i7 from "@angular/material/divider";
import * as i8 from "@angular/material/list";
import * as i9 from "@angular/material/form-field";
import * as i10 from "@angular/material/select";
import * as i11 from "@angular/material/core";
import * as i12 from "@angular/material/button";
import * as i13 from "@angular/cdk/drag-drop";
import * as i14 from "@metad/ocap-angular/common";
import * as i15 from "@metad/ocap-angular/core";
export class NgmValueHelpComponent {
    get dataSettings() {
        return this.dataSettings$();
    }
    set dataSettings(value) {
        this.dataSettings$.set(value);
    }
    get dimension() {
        return this._dimension();
    }
    set dimension(value) {
        this._dimension.set(value);
    }
    /**
     * 绑定 Slicer 只取其 members 属性
     */
    get slicerModel() {
        return this.slicer;
    }
    set slicerModel(value) {
        this.slicer.members = value.members;
    }
    // get hierarchy() {
    //   return this.dimension?.hierarchy
    // }
    // set hierarchy(value) {
    //   this.dimension = {
    //     ...this.dimension,
    //     hierarchy: value
    //   }
    // }
    get showAllMember() {
        return this.options?.showAllMember;
    }
    set showAllMember(value) {
        this.options = {
            ...(this.options ?? {}),
            showAllMember: value
        };
    }
    get onlyLeaves() {
        return this.options?.onlyLeaves;
    }
    set onlyLeaves(value) {
        this.options = {
            ...(this.options ?? {}),
            onlyLeaves: value
        };
    }
    get excludeSelected() {
        return this.slicer.exclude;
    }
    set excludeSelected(value) {
        this.slicer = {
            ...this.slicer,
            exclude: value
        };
    }
    get selectionType() {
        return this.options?.selectionType;
    }
    set selectionType(value) {
        this.options = {
            ...(this.options ?? {}),
            selectionType: value
        };
    }
    get treeSelectionMode() {
        return this.options?.treeSelectionMode;
    }
    set treeSelectionMode(value) {
        this.options = {
            ...(this.options ?? {}),
            treeSelectionMode: value
        };
    }
    get selectedMembers() {
        return this.slicer?.members;
    }
    constructor(dialogRef, data) {
        this.dialogRef = dialogRef;
        this.data = data;
        this.DISPLAY_BEHAVIOUR = DisplayBehaviour;
        this.FilterSelectionType = FilterSelectionType;
        this.TreeSelectionMode = TreeSelectionMode;
        this.PresentationEnum = PresentationEnum;
        this.dsCoreService = inject(NgmDSCoreService, { optional: true });
        this.dataSettings$ = signal(null);
        this._dimension = signal(null);
        this.options = {
            stickyHeader: true
        };
        this.appearance = {
            displayDensity: DisplayDensity.cosy,
            appearance: 'standard'
        };
        this.slicer = {};
        this.expandAvailables = false;
        this.displayBehaviour = computed(() => this._dimension()?.displayBehaviour ?? DisplayBehaviour.auto); // Default (null / undefined) to auto
        this.hierarchy = computed(() => this._dimension()?.hierarchy || this._dimension()?.dimension); // Hierarchy default same as dimension
        this.entityType = toSignal(toObservable(this.dataSettings$).pipe(filter((dataSettings) => !!dataSettings?.dataSource && !!dataSettings?.entitySet), switchMap((dataSettings) => this.dsCoreService.selectEntitySet(dataSettings.dataSource, dataSettings.entitySet)), map((entitySet) => entitySet?.entityType)));
        this.hierarchies = computed(() => {
            const entityType = this.entityType();
            const dimension = this._dimension();
            if (entityType && dimension) {
                const hierarchies = getEntityProperty(entityType, dimension)?.hierarchies;
                if (hierarchies?.length) {
                    this.presentation = this.presentation ?? PresentationEnum.Hierarchy;
                }
                return hierarchies;
            }
            return [];
        });
        if (data?.dsCoreService) {
            this.dsCoreService = data.dsCoreService;
        }
    }
    ngOnInit() {
        if (this.data) {
            this.dataSettings = this.data.dataSettings;
            this.dimension = this.data.dimension;
            if (this.data.options) {
                this.options = merge(this.options, this.data.options);
            }
            this.slicer = {
                ...(this.data.slicer ?? {})
            };
        }
    }
    setDisplayBehaviour(value) {
        this._dimension.update((state) => ({
            ...state,
            displayBehaviour: value
        }));
    }
    setHierarchy(hierarchy) {
        this._dimension.update((state) => ({
            ...state,
            hierarchy
        }));
    }
    deleteMember(i) {
        const members = [...this.slicer.members];
        members.splice(i, 1);
        this.slicer = {
            ...this.slicer,
            members
        };
    }
    clearSelection() {
        this.slicer = {
            ...this.slicer,
            members: []
        };
    }
    close() {
        this.dialogRef.close({
            ...this.slicer,
            dimension: {
                ...this.dimension,
                // Default to descriptionOnly
                // displayBehaviour: this.dimension.displayBehaviour ?? DisplayBehaviour.descriptionOnly
            }
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgmValueHelpComponent, deps: [{ token: i1.MatDialogRef, optional: true }, { token: MAT_DIALOG_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NgmValueHelpComponent, isStandalone: true, selector: "ngm-value-help", inputs: { dataSettings: "dataSettings", dimension: "dimension", options: "options", appearance: "appearance" }, host: { classAttribute: "ngm-value-help" }, ngImport: i0, template: "<div mat-dialog-title cdkDrag cdkDragRootElement=\".cdk-overlay-pane\" cdkDragHandle>\n    {{ 'Ngm.Controls.ValueHelp.Title' | translate: {Default: 'Set Filters for ' + dimension?.dimension, value: dimension?.dimension} }}\n</div>\n\n<div class=\"flex px-4\">\n    <div class=\"ngm-value-help__available-members\">\n        <div class=\"ngm-value-help__available\">\n            <div class=\"sub-title\">\n                {{ 'Ngm.Controls.ValueHelp.AvailableMembers' | translate: {Default: \"Available Members\"} }}\n                <button mat-icon-button (click)=\"expandAvailables=!expandAvailables\">\n                    <mat-icon *ngIf=\"expandAvailables\">keyboard_arrow_up</mat-icon>\n                    <mat-icon *ngIf=\"!expandAvailables\">keyboard_arrow_down</mat-icon>\n                </button>\n            </div>\n\n            <div [ngStyle]=\"{height: expandAvailables ? '120px' : '0' }\" class=\"ngm-value-help__options flex flex-col justify-start items-start gap-2\">\n\n                <div class=\"flex flex-wrap justify-start items-center gap-2\">\n                    <mat-form-field appearance=\"fill\">\n                        <mat-label>\n                            {{ 'Ngm.Controls.ValueHelp.DisplayBehaviour' | translate: {Default: \"Display Behaviour\"} }}\n                        </mat-label>\n                        <mat-select [ngModel]=\"displayBehaviour()\" (ngModelChange)=\"setDisplayBehaviour($event)\">\n                            <mat-option [value]=\"DISPLAY_BEHAVIOUR.descriptionOnly\">\n                                {{ 'Ngm.Common.DisplayBehaviour_Description' | translate: {Default: \"Description\"} }}\n                            </mat-option>\n                            <mat-option [value]=\"DISPLAY_BEHAVIOUR.descriptionAndId\">\n                                {{ 'Ngm.Common.DisplayBehaviour_DescriptionID' | translate: {Default: \"Description ID\"} }}\n                            </mat-option>\n                            <mat-option [value]=\"DISPLAY_BEHAVIOUR.idAndDescription\">\n                                {{ 'Ngm.Common.DisplayBehaviour_IDDescription' | translate: {Default: \"ID Description\"} }}\n                            </mat-option>\n                            <mat-option [value]=\"DISPLAY_BEHAVIOUR.idOnly\">\n                                {{ 'Ngm.Common.DisplayBehaviour_ID' | translate: {Default: \"ID\"} }}\n                            </mat-option>\n                            <!-- null can't be selected in mat-select, so use '' as default value -->\n                            <mat-option [value]=\"''\">\n                                {{ 'Ngm.Common.DisplayBehaviour_Auto' | translate: {Default: \"Auto\"} }}\n                            </mat-option>\n                          </mat-select>\n                    </mat-form-field>\n    \n                    <mat-form-field appearance=\"fill\">\n                        <mat-label>\n                            {{ 'Ngm.Controls.ValueHelp.Hierarchy' | translate: {Default: \"Hierarchy\"} }}\n                        </mat-label>\n                        <mat-select [ngModel]=\"hierarchy()\" (ngModelChange)=\"setHierarchy($event)\">\n                          @for (hierarchy of hierarchies(); track hierarchy.name) {\n                            <mat-option [value]=\"hierarchy.name\">{{hierarchy.caption}}</mat-option>\n                          }\n                        </mat-select>\n                    </mat-form-field>\n                </div>\n\n                <div class=\"flex flex-wrap justify-start items-center gap-2 mx-2\">\n                    <!-- <mat-slide-toggle>\n                        {{ 'Ngm.Controls.ValueHelp.ShowUnbookedMembers' | translate: {Default: \"Show Unbooked\"} }}\n                    </mat-slide-toggle> -->\n                    <mat-slide-toggle [(ngModel)]=\"showAllMember\">\n                        {{ 'Ngm.Controls.ValueHelp.ShowAllMember' | translate: {Default: \"Show 'All' Member\"} }}\n                    </mat-slide-toggle>\n                    <mat-slide-toggle [(ngModel)]=\"onlyLeaves\">\n                        {{ 'Ngm.Controls.ValueHelp.ShowOnlyLeaves' | translate: {Default: \"Only Leaves\"} }}\n                    </mat-slide-toggle>\n                    <mat-slide-toggle [(ngModel)]=\"excludeSelected\">\n                        {{ 'Ngm.Controls.ValueHelp.ExcludeSelectedMembers' | translate: {Default: \"Exclude Selected\"} }}\n                    </mat-slide-toggle>\n                </div>\n\n            </div>\n\n        </div>\n        <mat-divider></mat-divider>\n\n        <div class=\"ngm-value-help__members pt-2 flex flex-col\">\n          @if (presentation === PresentationEnum.Hierarchy) {\n            <ngm-member-tree class=\"w-full flex-1\"\n                [displayDensity]=\"appearance?.displayDensity\"\n                [appearance]=\"appearance\"\n                [dataSettings]=\"dataSettings\"\n                [dimension]=\"dimension\"\n                [options]=\"options\"\n                [(ngModel)]=\"slicerModel\"\n            />\n          } @else {\n            <ngm-member-list class=\"w-full flex-1\"\n                [displayDensity]=\"appearance?.displayDensity\"\n                [appearance]=\"appearance\"\n                [dataSettings]=\"dataSettings\"\n                [dimension]=\"dimension\"\n                [options]=\"options\"\n                [(ngModel)]=\"slicerModel\"\n            />\n          }\n        </div>\n    </div>\n\n    <mat-divider [vertical]=\"true\"></mat-divider>\n\n    <div class=\"ngm-value-help__selected\">\n        <div class=\"ngm-value-help__selected-members flex flex-col gap-2\">\n            <div class=\"sub-title\">\n                {{ 'Ngm.Controls.ValueHelp.SelectedMembers' | translate: {Default: \"Selected Members\"} }}\n            </div>\n\n            <div class=\"ngm-value-help__selected-members-list\" displayDensity=\"compact\">\n                <mat-list class=\"ngm-list\">\n                  @for (member of selectedMembers; track member.key; let i = $index) {\n                    <mat-list-item class=\"group\">\n                        <div class=\"flex items-center overflow-hidden\">\n                            <ngm-display-behaviour class=\"flex-1 overflow-hidden\"\n                                [displayBehaviour]=\"displayBehaviour()\"\n                                [option]=\"member\"\n                                [excludeSelected]=\"excludeSelected\">\n                            </ngm-display-behaviour>\n                            <mat-icon class=\"cursor-pointer shrink-0 opacity-0 group-hover:opacity-100\" color=\"warn\"\n                                (click)=\"deleteMember(i)\">remove_circle_outline</mat-icon>\n                        </div>\n                        <mat-divider></mat-divider>\n                    </mat-list-item>\n                  }\n                </mat-list>\n            </div>\n            \n            <button mat-button color=\"accent\" (click)=\"clearSelection()\">\n                {{ 'Ngm.Controls.ValueHelp.ClearSelection' | translate: {Default: \"Clear Selection\"} }}\n            </button>\n        </div>\n\n        <div class=\"ngm-value-help__settings grid grid-cols-1 md:grid-cols-2 gap-2\">\n            <mat-form-field class=\"col-span-1\" appearance=\"fill\">\n                <mat-label>\n                    {{ 'Ngm.Controls.ValueHelp.SelectionType' | translate: {Default: \"Selection Type\"} }}\n                </mat-label>\n                <mat-select [(ngModel)]=\"selectionType\">\n                  <mat-option [value]=\"FilterSelectionType.Single\">\n                    {{ 'Ngm.Common.SelectionType_Single' | translate: {Default: \"Single\"} }}\n                  </mat-option>\n                  <mat-option [value]=\"FilterSelectionType.Multiple\">\n                    {{ 'Ngm.Common.SelectionType_Multiple' | translate: {Default: \"Multiple\"} }}\n                  </mat-option>\n                </mat-select>\n            </mat-form-field>\n\n            <mat-form-field class=\"col-span-1\" appearance=\"fill\">\n                <mat-label>\n                    {{ 'Ngm.Controls.ValueHelp.Presentation' | translate: {Default: \"Presentation\"} }}\n                </mat-label>\n                <mat-select [(ngModel)]=\"presentation\">\n                    <mat-option [value]=\"PresentationEnum.Flat\">\n                        {{ 'Ngm.Common.Presentation_Flat' | translate: {Default: \"Flat\"} }}\n                    </mat-option>\n                    <mat-option [value]=\"PresentationEnum.Hierarchy\">\n                        {{ 'Ngm.Common.Presentation_Hierarchy' | translate: {Default: \"Hierarchy\"} }}\n                    </mat-option>\n                </mat-select>\n            </mat-form-field>\n\n            <mat-form-field *ngIf=\"presentation === PresentationEnum.Hierarchy && selectionType === FilterSelectionType.Multiple\"\n                class=\"col-span-2\"\n                appearance=\"fill\"\n                >\n                <mat-label>\n                    {{ 'Ngm.Controls.ValueHelp.HierarchySelectionMode' | translate: {Default: \"Hierarchy Selection Mode\"} }}\n                </mat-label>\n                <mat-select [(ngModel)]=\"treeSelectionMode\">\n                    <mat-option [value]=\"TreeSelectionMode.Individual\">\n                        {{ 'Ngm.Common.HierarchySelectionMode_Individual' | translate: {Default: \"Individual\"} }}\n                    </mat-option>\n                    <mat-option [value]=\"TreeSelectionMode.SelfDescendants\">\n                        {{ 'Ngm.Common.HierarchySelectionMode_SelfDescendants' | translate: {Default: \"Self & Descendants\"} }}\n                    </mat-option>\n                    <mat-option [value]=\"TreeSelectionMode.DescendantsOnly\">\n                        {{ 'Ngm.Common.HierarchySelectionMode_DescendantsOnly' | translate: {Default: \"Descendants Only\"} }}\n                    </mat-option>\n                    <mat-option [value]=\"TreeSelectionMode.SelfChildren\">\n                        {{ 'Ngm.Common.HierarchySelectionMode_SelfChildren' | translate: {Default: \"Self & Children\"} }}\n                    </mat-option>\n                    <mat-option [value]=\"TreeSelectionMode.ChildrenOnly\">\n                        {{ 'Ngm.Common.HierarchySelectionMode_ChildrenOnly' | translate: {Default: \"Children Only\"} }}\n                    </mat-option>\n                </mat-select>\n            </mat-form-field>\n        </div>\n    </div>\n</div>\n\n<div matDialogActions align=\"end\" class=\"flex justify-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)=\"close()\">\n            {{ 'Ngm.Common.Apply' | translate: {Default: \"Apply\"} }}\n          </button>\n    </div>\n</div>\n", styles: [":host{max-width:100%}.mat-divider.mat-divider-vertical{margin:0 10px}.ngm-value-help__available .sub-title{display:flex;justify-content:space-between;align-items:center}.ngm-value-help__available-members{display:flex;flex-direction:column;width:500px;flex:1}.ngm-value-help__available-members .ngm-value-help__members{flex:1;min-height:300px}.ngm-value-help__options{overflow:hidden;transition-duration:.3s}.ngm-value-help__selected{display:flex;flex-direction:column;max-width:300px;overflow:hidden}.ngm-value-help__selected-members{flex:1;min-height:200px;min-width:20rem;max-width:100%;display:flex;flex-direction:column;margin-bottom:10px}.ngm-value-help__selected-members .ngm-value-help__selected-members-list{flex:1;max-height:300px;overflow-y:auto;overflow-x:hidden}.ngm-value-help__selected-members .ngm-value-help__selected-members-list .mdc-list-item.mdc-list-item--with-one-line{--mdc-list-list-item-container-shape: 5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i6.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i8.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i8.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i9.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i9.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i10.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: i11.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i12.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i12.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: NgmCommonModule }, { kind: "directive", type: i13.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: i13.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i14.NgmDisplayBehaviourComponent, selector: "ngm-display-behaviour", inputs: ["displayBehaviour", "excludeSelected", "option", "highlight"] }, { kind: "directive", type: i15.DensityDirective, selector: "[displayDensity]", inputs: ["displayDensity"] }, { kind: "directive", type: i15.ButtonGroupDirective, selector: "[ngmButtonGroup]" }, { kind: "ngmodule", type: OcapCoreModule }, { kind: "component", type: NgmMemberListComponent, selector: "ngm-member-list", inputs: ["dataSettings", "dimension", "options", "appearance", "disabled"], outputs: ["loadingChanging"] }, { kind: "component", type: 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: NgmValueHelpComponent, decorators: [{
            type: Component,
            args: [{ standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngm-value-help', host: {
                        class: 'ngm-value-help'
                    }, imports: [
                        CommonModule,
                        FormsModule,
                        TranslateModule,
                        MatDialogModule,
                        MatIconModule,
                        MatSlideToggleModule,
                        MatDividerModule,
                        MatListModule,
                        MatFormFieldModule,
                        MatSelectModule,
                        MatButtonModule,
                        NgmCommonModule,
                        OcapCoreModule,
                        NgmMemberListComponent,
                        NgmMemberTreeComponent
                    ], template: "<div mat-dialog-title cdkDrag cdkDragRootElement=\".cdk-overlay-pane\" cdkDragHandle>\n    {{ 'Ngm.Controls.ValueHelp.Title' | translate: {Default: 'Set Filters for ' + dimension?.dimension, value: dimension?.dimension} }}\n</div>\n\n<div class=\"flex px-4\">\n    <div class=\"ngm-value-help__available-members\">\n        <div class=\"ngm-value-help__available\">\n            <div class=\"sub-title\">\n                {{ 'Ngm.Controls.ValueHelp.AvailableMembers' | translate: {Default: \"Available Members\"} }}\n                <button mat-icon-button (click)=\"expandAvailables=!expandAvailables\">\n                    <mat-icon *ngIf=\"expandAvailables\">keyboard_arrow_up</mat-icon>\n                    <mat-icon *ngIf=\"!expandAvailables\">keyboard_arrow_down</mat-icon>\n                </button>\n            </div>\n\n            <div [ngStyle]=\"{height: expandAvailables ? '120px' : '0' }\" class=\"ngm-value-help__options flex flex-col justify-start items-start gap-2\">\n\n                <div class=\"flex flex-wrap justify-start items-center gap-2\">\n                    <mat-form-field appearance=\"fill\">\n                        <mat-label>\n                            {{ 'Ngm.Controls.ValueHelp.DisplayBehaviour' | translate: {Default: \"Display Behaviour\"} }}\n                        </mat-label>\n                        <mat-select [ngModel]=\"displayBehaviour()\" (ngModelChange)=\"setDisplayBehaviour($event)\">\n                            <mat-option [value]=\"DISPLAY_BEHAVIOUR.descriptionOnly\">\n                                {{ 'Ngm.Common.DisplayBehaviour_Description' | translate: {Default: \"Description\"} }}\n                            </mat-option>\n                            <mat-option [value]=\"DISPLAY_BEHAVIOUR.descriptionAndId\">\n                                {{ 'Ngm.Common.DisplayBehaviour_DescriptionID' | translate: {Default: \"Description ID\"} }}\n                            </mat-option>\n                            <mat-option [value]=\"DISPLAY_BEHAVIOUR.idAndDescription\">\n                                {{ 'Ngm.Common.DisplayBehaviour_IDDescription' | translate: {Default: \"ID Description\"} }}\n                            </mat-option>\n                            <mat-option [value]=\"DISPLAY_BEHAVIOUR.idOnly\">\n                                {{ 'Ngm.Common.DisplayBehaviour_ID' | translate: {Default: \"ID\"} }}\n                            </mat-option>\n                            <!-- null can't be selected in mat-select, so use '' as default value -->\n                            <mat-option [value]=\"''\">\n                                {{ 'Ngm.Common.DisplayBehaviour_Auto' | translate: {Default: \"Auto\"} }}\n                            </mat-option>\n                          </mat-select>\n                    </mat-form-field>\n    \n                    <mat-form-field appearance=\"fill\">\n                        <mat-label>\n                            {{ 'Ngm.Controls.ValueHelp.Hierarchy' | translate: {Default: \"Hierarchy\"} }}\n                        </mat-label>\n                        <mat-select [ngModel]=\"hierarchy()\" (ngModelChange)=\"setHierarchy($event)\">\n                          @for (hierarchy of hierarchies(); track hierarchy.name) {\n                            <mat-option [value]=\"hierarchy.name\">{{hierarchy.caption}}</mat-option>\n                          }\n                        </mat-select>\n                    </mat-form-field>\n                </div>\n\n                <div class=\"flex flex-wrap justify-start items-center gap-2 mx-2\">\n                    <!-- <mat-slide-toggle>\n                        {{ 'Ngm.Controls.ValueHelp.ShowUnbookedMembers' | translate: {Default: \"Show Unbooked\"} }}\n                    </mat-slide-toggle> -->\n                    <mat-slide-toggle [(ngModel)]=\"showAllMember\">\n                        {{ 'Ngm.Controls.ValueHelp.ShowAllMember' | translate: {Default: \"Show 'All' Member\"} }}\n                    </mat-slide-toggle>\n                    <mat-slide-toggle [(ngModel)]=\"onlyLeaves\">\n                        {{ 'Ngm.Controls.ValueHelp.ShowOnlyLeaves' | translate: {Default: \"Only Leaves\"} }}\n                    </mat-slide-toggle>\n                    <mat-slide-toggle [(ngModel)]=\"excludeSelected\">\n                        {{ 'Ngm.Controls.ValueHelp.ExcludeSelectedMembers' | translate: {Default: \"Exclude Selected\"} }}\n                    </mat-slide-toggle>\n                </div>\n\n            </div>\n\n        </div>\n        <mat-divider></mat-divider>\n\n        <div class=\"ngm-value-help__members pt-2 flex flex-col\">\n          @if (presentation === PresentationEnum.Hierarchy) {\n            <ngm-member-tree class=\"w-full flex-1\"\n                [displayDensity]=\"appearance?.displayDensity\"\n                [appearance]=\"appearance\"\n                [dataSettings]=\"dataSettings\"\n                [dimension]=\"dimension\"\n                [options]=\"options\"\n                [(ngModel)]=\"slicerModel\"\n            />\n          } @else {\n            <ngm-member-list class=\"w-full flex-1\"\n                [displayDensity]=\"appearance?.displayDensity\"\n                [appearance]=\"appearance\"\n                [dataSettings]=\"dataSettings\"\n                [dimension]=\"dimension\"\n                [options]=\"options\"\n                [(ngModel)]=\"slicerModel\"\n            />\n          }\n        </div>\n    </div>\n\n    <mat-divider [vertical]=\"true\"></mat-divider>\n\n    <div class=\"ngm-value-help__selected\">\n        <div class=\"ngm-value-help__selected-members flex flex-col gap-2\">\n            <div class=\"sub-title\">\n                {{ 'Ngm.Controls.ValueHelp.SelectedMembers' | translate: {Default: \"Selected Members\"} }}\n            </div>\n\n            <div class=\"ngm-value-help__selected-members-list\" displayDensity=\"compact\">\n                <mat-list class=\"ngm-list\">\n                  @for (member of selectedMembers; track member.key; let i = $index) {\n                    <mat-list-item class=\"group\">\n                        <div class=\"flex items-center overflow-hidden\">\n                            <ngm-display-behaviour class=\"flex-1 overflow-hidden\"\n                                [displayBehaviour]=\"displayBehaviour()\"\n                                [option]=\"member\"\n                                [excludeSelected]=\"excludeSelected\">\n                            </ngm-display-behaviour>\n                            <mat-icon class=\"cursor-pointer shrink-0 opacity-0 group-hover:opacity-100\" color=\"warn\"\n                                (click)=\"deleteMember(i)\">remove_circle_outline</mat-icon>\n                        </div>\n                        <mat-divider></mat-divider>\n                    </mat-list-item>\n                  }\n                </mat-list>\n            </div>\n            \n            <button mat-button color=\"accent\" (click)=\"clearSelection()\">\n                {{ 'Ngm.Controls.ValueHelp.ClearSelection' | translate: {Default: \"Clear Selection\"} }}\n            </button>\n        </div>\n\n        <div class=\"ngm-value-help__settings grid grid-cols-1 md:grid-cols-2 gap-2\">\n            <mat-form-field class=\"col-span-1\" appearance=\"fill\">\n                <mat-label>\n                    {{ 'Ngm.Controls.ValueHelp.SelectionType' | translate: {Default: \"Selection Type\"} }}\n                </mat-label>\n                <mat-select [(ngModel)]=\"selectionType\">\n                  <mat-option [value]=\"FilterSelectionType.Single\">\n                    {{ 'Ngm.Common.SelectionType_Single' | translate: {Default: \"Single\"} }}\n                  </mat-option>\n                  <mat-option [value]=\"FilterSelectionType.Multiple\">\n                    {{ 'Ngm.Common.SelectionType_Multiple' | translate: {Default: \"Multiple\"} }}\n                  </mat-option>\n                </mat-select>\n            </mat-form-field>\n\n            <mat-form-field class=\"col-span-1\" appearance=\"fill\">\n                <mat-label>\n                    {{ 'Ngm.Controls.ValueHelp.Presentation' | translate: {Default: \"Presentation\"} }}\n                </mat-label>\n                <mat-select [(ngModel)]=\"presentation\">\n                    <mat-option [value]=\"PresentationEnum.Flat\">\n                        {{ 'Ngm.Common.Presentation_Flat' | translate: {Default: \"Flat\"} }}\n                    </mat-option>\n                    <mat-option [value]=\"PresentationEnum.Hierarchy\">\n                        {{ 'Ngm.Common.Presentation_Hierarchy' | translate: {Default: \"Hierarchy\"} }}\n                    </mat-option>\n                </mat-select>\n            </mat-form-field>\n\n            <mat-form-field *ngIf=\"presentation === PresentationEnum.Hierarchy && selectionType === FilterSelectionType.Multiple\"\n                class=\"col-span-2\"\n                appearance=\"fill\"\n                >\n                <mat-label>\n                    {{ 'Ngm.Controls.ValueHelp.HierarchySelectionMode' | translate: {Default: \"Hierarchy Selection Mode\"} }}\n                </mat-label>\n                <mat-select [(ngModel)]=\"treeSelectionMode\">\n                    <mat-option [value]=\"TreeSelectionMode.Individual\">\n                        {{ 'Ngm.Common.HierarchySelectionMode_Individual' | translate: {Default: \"Individual\"} }}\n                    </mat-option>\n                    <mat-option [value]=\"TreeSelectionMode.SelfDescendants\">\n                        {{ 'Ngm.Common.HierarchySelectionMode_SelfDescendants' | translate: {Default: \"Self & Descendants\"} }}\n                    </mat-option>\n                    <mat-option [value]=\"TreeSelectionMode.DescendantsOnly\">\n                        {{ 'Ngm.Common.HierarchySelectionMode_DescendantsOnly' | translate: {Default: \"Descendants Only\"} }}\n                    </mat-option>\n                    <mat-option [value]=\"TreeSelectionMode.SelfChildren\">\n                        {{ 'Ngm.Common.HierarchySelectionMode_SelfChildren' | translate: {Default: \"Self & Children\"} }}\n                    </mat-option>\n                    <mat-option [value]=\"TreeSelectionMode.ChildrenOnly\">\n                        {{ 'Ngm.Common.HierarchySelectionMode_ChildrenOnly' | translate: {Default: \"Children Only\"} }}\n                    </mat-option>\n                </mat-select>\n            </mat-form-field>\n        </div>\n    </div>\n</div>\n\n<div matDialogActions align=\"end\" class=\"flex justify-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)=\"close()\">\n            {{ 'Ngm.Common.Apply' | translate: {Default: \"Apply\"} }}\n          </button>\n    </div>\n</div>\n", styles: [":host{max-width:100%}.mat-divider.mat-divider-vertical{margin:0 10px}.ngm-value-help__available .sub-title{display:flex;justify-content:space-between;align-items:center}.ngm-value-help__available-members{display:flex;flex-direction:column;width:500px;flex:1}.ngm-value-help__available-members .ngm-value-help__members{flex:1;min-height:300px}.ngm-value-help__options{overflow:hidden;transition-duration:.3s}.ngm-value-help__selected{display:flex;flex-direction:column;max-width:300px;overflow:hidden}.ngm-value-help__selected-members{flex:1;min-height:200px;min-width:20rem;max-width:100%;display:flex;flex-direction:column;margin-bottom:10px}.ngm-value-help__selected-members .ngm-value-help__selected-members-list{flex:1;max-height:300px;overflow-y:auto;overflow-x:hidden}.ngm-value-help__selected-members .ngm-value-help__selected-members-list .mdc-list-item.mdc-list-item--with-one-line{--mdc-list-list-item-container-shape: 5px}\n"] }]
        }], ctorParameters: () => [{ type: i1.MatDialogRef, decorators: [{
                    type: Optional
                }] }, { type: undefined, decorators: [{
                    type: Optional
                }, {
                    type: Inject,
                    args: [MAT_DIALOG_DATA]
                }] }], propDecorators: { dataSettings: [{
                type: Input
            }], dimension: [{
                type: Input
            }], options: [{
                type: Input
            }], appearance: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 