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 { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } 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, FilterOperator, 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 { DIALOG_DATA, DialogRef } from '@angular/cdk/dialog';
import { CdkMenuModule } from '@angular/cdk/menu';
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/cdk/menu";
import * as i6 from "@angular/material/icon";
import * as i7 from "@angular/material/slide-toggle";
import * as i8 from "@angular/material/divider";
import * as i9 from "@angular/material/list";
import * as i10 from "@angular/material/form-field";
import * as i11 from "@angular/material/select";
import * as i12 from "@angular/material/core";
import * as i13 from "@angular/material/button";
import * as i14 from "@angular/cdk/drag-drop";
import * as i15 from "@metad/ocap-angular/common";
import * as i16 from "@metad/ocap-angular/core";
export class NgmValueHelpComponent {
    #data;
    #dialogRef;
    get dataSettings() {
        return this.dataSettings$();
    }
    set dataSettings(value) {
        this.dataSettings$.set(value);
    }
    get dimension() {
        return this._dimension();
    }
    set dimension(value) {
        this._dimension.set(value);
    }
    /**
     * Bind Slicer to only take its members attribute
     */
    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;
    }
    get data() {
        return this._data ?? this.#data;
    }
    constructor(dialogRef, _data) {
        this.dialogRef = dialogRef;
        this._data = _data;
        this.DISPLAY_BEHAVIOUR = DisplayBehaviour;
        this.FilterSelectionType = FilterSelectionType;
        this.TreeSelectionMode = TreeSelectionMode;
        this.PresentationEnum = PresentationEnum;
        this.eFilterOperator = FilterOperator;
        this.eDisplayBehaviour = DisplayBehaviour;
        this.dsCoreService = inject(NgmDSCoreService, { optional: true });
        this.#data = inject(DIALOG_DATA, { optional: true });
        this.#dialogRef = inject(DialogRef, { 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 [];
        });
        // Condition members
        this.memberForm = new FormGroup({
            type: new FormControl('Caption', [Validators.required]),
            value: new FormControl(''),
            operator: new FormControl(FilterOperator.Contains, [Validators.required])
        });
        if (this.data?.dsCoreService) {
            this.dsCoreService = this.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: []
        };
    }
    addMember() {
        const members = this.slicer.members ? [...this.slicer.members] : [];
        const member = { key: null, operator: this.memberForm.value.operator, };
        if (this.memberForm.value.type === 'Caption') {
            member.caption = this.memberForm.value.value;
        }
        else if (this.memberForm.value.type === 'UniqueName') {
            member.key = this.memberForm.value.value;
        }
        members.push(member);
        this.slicer = {
            ...this.slicer,
            members
        };
        this.memberForm.reset({ type: 'Caption', operator: FilterOperator.Contains, value: '' });
    }
    close() {
        const result = {
            ...this.slicer,
            dimension: {
                ...this.dimension,
                // Default to descriptionOnly
                // displayBehaviour: this.dimension.displayBehaviour ?? DisplayBehaviour.descriptionOnly
            }
        };
        if (this.dialogRef) {
            this.dialogRef.close(result);
        }
        if (this.#dialogRef) {
            this.#dialogRef.close(result);
        }
    }
    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 cdkDrag cdkDragRootElement=\".cdk-overlay-pane\" cdkDragHandle class=\"text-xl font-semibold p-3 cursor-move\">\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=\"flex justify-between items-center\">\n        <span class=\"text-base\">\n          {{ 'Ngm.Controls.ValueHelp.AvailableMembers' | translate: {Default: \"Available Members\"} }}\n        </span>\n        <button mat-icon-button (click)=\"expandAvailables=!expandAvailables\">\n          @if (expandAvailables) {\n            <mat-icon>keyboard_arrow_up</mat-icon>\n          } @else {\n            <mat-icon>keyboard_arrow_down</mat-icon>\n          }\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        <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=\"w-full flex justify-between items-center\">\n        <div>{{ 'Ngm.Controls.ValueHelp.SelectedMembers' | translate: {Default: \"Selected Members\"} }}</div>\n        <div>\n          <button type=\"button\" class=\"btn btn-secondary btn-sm w-7 h-7 rounded-full flex justify-center items-center\"\n            [cdkMenuTriggerFor]=\"filterMember\"\n            #conditionMemberTrigger=\"cdkMenuTriggerFor\"\n          ><i class=\"ri-add-line transition-transform\"\n            [class.rotate-45]=\"conditionMemberTrigger.isOpen()\"></i>\n          </button>\n        </div>\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                @if (member.operator) {\n                  <span class=\"border-[0.5px] border-solid border-divider-regular rounded-md mr-1 text-xs leading-3 p-1 font-mono bg-neutral-50\"\n                    [class.line-through]=\"excludeSelected\">\n                    {{ 'Ngm.Controls.ValueHelp.' + member.operator | translate: {Default: member.operator} }}\n                  </span>\n                }\n                <ngm-display-behaviour class=\"flex-1 overflow-hidden\"\n                  [displayBehaviour]=\"displayBehaviour()\"\n                  [option]=\"member\"\n                  [excludeSelected]=\"excludeSelected\"\n                />\n\n                  <button type=\"button\" class=\"w-6 h-6 flex justify-center items-center rounded-full cursor-pointer shrink-0 opacity-0 group-hover:opacity-100 text-text-warning hover:bg-hover-bg\"\n                    (click)=\"deleteMember(i)\">\n                    <i class=\"ri-close-line\"></i>\n                  </button>\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-option [value]=\"FilterSelectionType.SingleRange\">\n            {{ 'Ngm.Common.SelectionType_SingleRange' | translate: {Default: \"Single Range\"} }}\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      @if (presentation === PresentationEnum.Hierarchy && selectionType === FilterSelectionType.Multiple) {\n        <mat-form-field class=\"col-span-2\" appearance=\"fill\">\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      }\n    </div>\n  </div>\n</div>\n\n<div class=\"flex justify-end p-2 border-t border-dashed border-divider-deep\">\n  <div ngmButtonGroup>\n    <button mat-button (click)=\"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\n<ng-template #filterMember>\n  <div class=\"w-[360px] flex flex-col gap-2 p-4 border border-solid border-divider-regular rounded-2xl shadow-md bg-components-card-bg\">\n    <form [formGroup]=\"memberForm\" class=\"contents\">\n      <div class=\"w-full flex items-center gap-4\">\n        <div class=\"grow\">\n          <label>{{ 'Ngm.Controls.ValueHelp.Property' | translate: {Default: 'Property'} }}</label>\n          <ngm-select formControlName=\"type\" [selectOptions]=\"[\n            {\n              value: 'UniqueName',\n              label: ('Ngm.Controls.ValueHelp.UniqueName' | translate: {Default: 'Unique Name'}),\n            },\n            {\n              value: 'Caption',\n              label: ('Ngm.Controls.ValueHelp.Caption' | translate: {Default: 'Caption'}),\n            }\n          ]\" [displayBehaviour]=\"eDisplayBehaviour.descriptionOnly\" />\n        </div>\n\n        <div class=\"grow\">\n          <label>{{ 'Ngm.Controls.ValueHelp.Condition' | translate: {Default: 'Condition'} }}</label>\n          <ngm-select formControlName=\"operator\" [selectOptions]=\"[\n            {\n              value: eFilterOperator.Contains,\n              label: ('Ngm.Controls.ValueHelp.Contains' | translate: {Default: 'Contains'}),\n            },\n            {\n              value: eFilterOperator.StartsWith,\n              label: ('Ngm.Controls.ValueHelp.StartsWith' | translate: {Default: 'Starts With'}),\n            },\n            {\n              value: eFilterOperator.EndsWith,\n              label: ('Ngm.Controls.ValueHelp.EndsWith' | translate: {Default: 'Ends With'}),\n            },\n            {\n              value: eFilterOperator.NotContains,\n              label: ('Ngm.Controls.ValueHelp.NotContains' | translate: {Default: 'Not Contains'}),\n            },\n            {\n              value: eFilterOperator.NotStartsWith,\n              label: ('Ngm.Controls.ValueHelp.NotStartsWith' | translate: {Default: 'Not Starts With'}),\n            },\n            {\n              value: eFilterOperator.NotEndsWith,\n              label: ('Ngm.Controls.ValueHelp.NotEndsWith' | translate: {Default: 'Not Ends With'}),\n            }\n          ]\" />\n        </div>\n      </div>\n\n      <div class=\"w-full flex flex-col items-start mt-2\">\n        <label>{{ 'Ngm.Controls.ValueHelp.Value' | translate: {Default: 'Value'} }}</label>\n        <input type=\"text\" formControlName=\"value\" class=\"w-full appearance-none border border-transparent bg-components-input-bg-normal py-[7px] text-components-input-text-filled caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs px-3 radius-md system-sm-regular\" />\n      </div>\n    \n      <div class=\"w-full flex justify-end\">\n        <button type=\"button\" class=\"btn btn-primary btn-large\" (click)=\"addMember();conditionMemberTrigger.close();\">\n          {{ 'Ngm.Controls.ValueHelp.Add' | translate: {Default: 'Add'} }}\n        </button>\n      </div>\n    </form>\n  </div>\n</ng-template>", styles: [":host{max-width:100%;color:var(--color-text-primary)}.mat-divider.mat-divider-vertical{margin:0 10px}.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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CdkMenuModule }, { kind: "directive", type: i5.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.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: i8.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i9.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i9.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i10.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i11.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: i12.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i13.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i13.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: NgmCommonModule }, { kind: "directive", type: i14.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: i14.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i15.NgmDisplayBehaviourComponent, selector: "ngm-display-behaviour", inputs: ["displayBehaviour", "excludeSelected", "option", "highlight"] }, { kind: "component", type: i15.NgmSelectComponent, selector: "ngm-select", inputs: ["displayBehaviour", "displayDensity", "valueKey", "label", "placeholder", "searchable", "virtualScroll", "multiple", "selectOptions", "panelWidth", "allowInput"] }, { kind: "directive", type: i16.DensityDirective, selector: "[displayDensity]", inputs: ["displayDensity"] }, { kind: "directive", type: i16.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,
                        ReactiveFormsModule,
                        TranslateModule,
                        CdkMenuModule,
                        MatDialogModule,
                        MatIconModule,
                        MatSlideToggleModule,
                        MatDividerModule,
                        MatListModule,
                        MatFormFieldModule,
                        MatSelectModule,
                        MatButtonModule,
                        NgmCommonModule,
                        OcapCoreModule,
                        NgmMemberListComponent,
                        NgmMemberTreeComponent
                    ], template: "<div cdkDrag cdkDragRootElement=\".cdk-overlay-pane\" cdkDragHandle class=\"text-xl font-semibold p-3 cursor-move\">\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=\"flex justify-between items-center\">\n        <span class=\"text-base\">\n          {{ 'Ngm.Controls.ValueHelp.AvailableMembers' | translate: {Default: \"Available Members\"} }}\n        </span>\n        <button mat-icon-button (click)=\"expandAvailables=!expandAvailables\">\n          @if (expandAvailables) {\n            <mat-icon>keyboard_arrow_up</mat-icon>\n          } @else {\n            <mat-icon>keyboard_arrow_down</mat-icon>\n          }\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        <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=\"w-full flex justify-between items-center\">\n        <div>{{ 'Ngm.Controls.ValueHelp.SelectedMembers' | translate: {Default: \"Selected Members\"} }}</div>\n        <div>\n          <button type=\"button\" class=\"btn btn-secondary btn-sm w-7 h-7 rounded-full flex justify-center items-center\"\n            [cdkMenuTriggerFor]=\"filterMember\"\n            #conditionMemberTrigger=\"cdkMenuTriggerFor\"\n          ><i class=\"ri-add-line transition-transform\"\n            [class.rotate-45]=\"conditionMemberTrigger.isOpen()\"></i>\n          </button>\n        </div>\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                @if (member.operator) {\n                  <span class=\"border-[0.5px] border-solid border-divider-regular rounded-md mr-1 text-xs leading-3 p-1 font-mono bg-neutral-50\"\n                    [class.line-through]=\"excludeSelected\">\n                    {{ 'Ngm.Controls.ValueHelp.' + member.operator | translate: {Default: member.operator} }}\n                  </span>\n                }\n                <ngm-display-behaviour class=\"flex-1 overflow-hidden\"\n                  [displayBehaviour]=\"displayBehaviour()\"\n                  [option]=\"member\"\n                  [excludeSelected]=\"excludeSelected\"\n                />\n\n                  <button type=\"button\" class=\"w-6 h-6 flex justify-center items-center rounded-full cursor-pointer shrink-0 opacity-0 group-hover:opacity-100 text-text-warning hover:bg-hover-bg\"\n                    (click)=\"deleteMember(i)\">\n                    <i class=\"ri-close-line\"></i>\n                  </button>\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-option [value]=\"FilterSelectionType.SingleRange\">\n            {{ 'Ngm.Common.SelectionType_SingleRange' | translate: {Default: \"Single Range\"} }}\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      @if (presentation === PresentationEnum.Hierarchy && selectionType === FilterSelectionType.Multiple) {\n        <mat-form-field class=\"col-span-2\" appearance=\"fill\">\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      }\n    </div>\n  </div>\n</div>\n\n<div class=\"flex justify-end p-2 border-t border-dashed border-divider-deep\">\n  <div ngmButtonGroup>\n    <button mat-button (click)=\"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\n<ng-template #filterMember>\n  <div class=\"w-[360px] flex flex-col gap-2 p-4 border border-solid border-divider-regular rounded-2xl shadow-md bg-components-card-bg\">\n    <form [formGroup]=\"memberForm\" class=\"contents\">\n      <div class=\"w-full flex items-center gap-4\">\n        <div class=\"grow\">\n          <label>{{ 'Ngm.Controls.ValueHelp.Property' | translate: {Default: 'Property'} }}</label>\n          <ngm-select formControlName=\"type\" [selectOptions]=\"[\n            {\n              value: 'UniqueName',\n              label: ('Ngm.Controls.ValueHelp.UniqueName' | translate: {Default: 'Unique Name'}),\n            },\n            {\n              value: 'Caption',\n              label: ('Ngm.Controls.ValueHelp.Caption' | translate: {Default: 'Caption'}),\n            }\n          ]\" [displayBehaviour]=\"eDisplayBehaviour.descriptionOnly\" />\n        </div>\n\n        <div class=\"grow\">\n          <label>{{ 'Ngm.Controls.ValueHelp.Condition' | translate: {Default: 'Condition'} }}</label>\n          <ngm-select formControlName=\"operator\" [selectOptions]=\"[\n            {\n              value: eFilterOperator.Contains,\n              label: ('Ngm.Controls.ValueHelp.Contains' | translate: {Default: 'Contains'}),\n            },\n            {\n              value: eFilterOperator.StartsWith,\n              label: ('Ngm.Controls.ValueHelp.StartsWith' | translate: {Default: 'Starts With'}),\n            },\n            {\n              value: eFilterOperator.EndsWith,\n              label: ('Ngm.Controls.ValueHelp.EndsWith' | translate: {Default: 'Ends With'}),\n            },\n            {\n              value: eFilterOperator.NotContains,\n              label: ('Ngm.Controls.ValueHelp.NotContains' | translate: {Default: 'Not Contains'}),\n            },\n            {\n              value: eFilterOperator.NotStartsWith,\n              label: ('Ngm.Controls.ValueHelp.NotStartsWith' | translate: {Default: 'Not Starts With'}),\n            },\n            {\n              value: eFilterOperator.NotEndsWith,\n              label: ('Ngm.Controls.ValueHelp.NotEndsWith' | translate: {Default: 'Not Ends With'}),\n            }\n          ]\" />\n        </div>\n      </div>\n\n      <div class=\"w-full flex flex-col items-start mt-2\">\n        <label>{{ 'Ngm.Controls.ValueHelp.Value' | translate: {Default: 'Value'} }}</label>\n        <input type=\"text\" formControlName=\"value\" class=\"w-full appearance-none border border-transparent bg-components-input-bg-normal py-[7px] text-components-input-text-filled caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs px-3 radius-md system-sm-regular\" />\n      </div>\n    \n      <div class=\"w-full flex justify-end\">\n        <button type=\"button\" class=\"btn btn-primary btn-large\" (click)=\"addMember();conditionMemberTrigger.close();\">\n          {{ 'Ngm.Controls.ValueHelp.Add' | translate: {Default: 'Add'} }}\n        </button>\n      </div>\n    </form>\n  </div>\n</ng-template>", styles: [":host{max-width:100%;color:var(--color-text-primary)}.mat-divider.mat-divider-vertical{margin:0 10px}.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, 