import { Component, Inject, ViewEncapsulation } from "@angular/core";
import { UntypedFormControl } from "@angular/forms";
import { MAT_DIALOG_DATA } from "@angular/material/dialog";
import { ReplaySubject, Subject } from "rxjs";
import { takeUntil } from "rxjs/operators";
import * as i0 from "@angular/core";
import * as i1 from "../../services/translation-registry.service";
import * as i2 from "@angular/material/dialog";
import * as i3 from "@angular/common";
import * as i4 from "@angular/forms";
import * as i5 from "@angular/material/input";
import * as i6 from "@angular/material/form-field";
import * as i7 from "@angular/material/icon";
import * as i8 from "../button/button";
import * as i9 from "@angular/material/checkbox";
import * as i10 from "@angular/material/button";
import * as i11 from "../../directives/search-field.directive";
import * as i12 from "../../directives/form.directive";
import * as i13 from "../../directives/scrollbar/scrollbar.directive";
import * as i14 from "../../directives/tooltip/tooltip-renderer.directive";
export class SelectDialog {
    constructor(trans, dialogRef, data) {
        this.trans = trans;
        this.dialogRef = dialogRef;
        this.data = data;
        this.task = {
            name: 'LANG.CHOOSE_ALL',
            checked: false,
            subtasks: []
        };
        this.allComplete = false;
        this.taskFilterCtrl = new UntypedFormControl();
        /** list of filtered by search keyword */
        this.filteredTask = new ReplaySubject(1);
        this.ngUnsubscribe = new Subject();
        this.data.list.map(item => {
            item.checked = !!item.checked;
            this.task.subtasks.push(item);
        });
    }
    ngOnInit() {
        this.trans.getLanguageSubject$.pipe(takeUntil(this.ngUnsubscribe)).subscribe((res) => {
            if (res) {
                this.LANG = this.trans.getObjectLang(res);
            }
        });
        this.filteredTask.next(this.task.subtasks.slice());
        // listen for search field value changes
        this.taskFilterCtrl.valueChanges
            .pipe(takeUntil(this.ngUnsubscribe))
            .subscribe(() => {
            this.filterBanks();
        });
    }
    filterBanks() {
        if (!this.task.subtasks) {
            return;
        }
        // get the search keyword
        let search = this.taskFilterCtrl.value;
        if (!search) {
            this.filteredTask.next(this.task.subtasks.slice());
            return;
        }
        else {
            search = search.toLowerCase();
        }
        // filter the banks
        this.filteredTask.next(this.task.subtasks.filter(bank => bank.name.toLowerCase().indexOf(search) > -1));
    }
    ngOnDestroy() {
        this.ngUnsubscribe.next();
        this.ngUnsubscribe.complete();
    }
    updateAllComplete() {
        this.allComplete = this.task.subtasks != null && this.task.subtasks.every(t => t.checked);
    }
    someComplete() {
        if (this.task.subtasks == null) {
            return false;
        }
        return this.task.subtasks.filter(t => t.checked).length > 0 && !this.allComplete;
    }
    setAll(checked) {
        this.allComplete = checked;
        if (this.task.subtasks == null) {
            return;
        }
        this.task.subtasks.forEach(t => t.checked = checked);
    }
    isEllipsisActive(e) {
        return e ? (e.clientWidth < e.scrollWidth) : false;
    }
    filterFunction(listTask) {
        return listTask.filter(i => i.checked);
    }
    removeCheckedNodeList(item) {
        item.checked = false;
        this.updateAllComplete();
    }
    onCloseClick() {
        this.dialogRef.close();
    }
    ;
    onAddClick() {
        const selectData = this.task.subtasks.filter(i => i.checked);
        this.dialogRef.close(selectData);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectDialog, deps: [{ token: i1.TranslateLibraryService }, { token: i2.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SelectDialog, selector: "qms-select-dialog", ngImport: i0, template: "<div class=\"dialog-container\">\n  <div class=\"dialog-header\">\n    <h3 class=\"dialog-header__title\">{{data.title}}</h3>\n    <button qms-btn-icon color=\"light\" (click)=\"onCloseClick()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n  <div class=\"col-12\">\n    <div class=\"search-wrapper\">\n      <mat-form-field class=\"w100\" qms-form qms-search-field>\n        <input\n          type=\"text\"\n          placeholder=\"{{ LANG.SEARCH }}\"\n          matInput\n          [formControl]=\"taskFilterCtrl\"\n        />\n        <button qms-btn-icon color=\"light\" matSuffix>\n          <mat-icon>search</mat-icon>\n        </button>\n      </mat-form-field>\n    </div>\n  </div>\n  <hr class=\"mt5 mb5\" />\n\n  <div class=\"col-12\">\n    <section class=\"section-checkbox\" qms-scrollbar>\n      <span class=\"title-list-section\">\n        <mat-checkbox\n          qms-group-options\n          color=\"default\"\n          [checked]=\"allComplete\"\n          [indeterminate]=\"someComplete()\"\n          (change)=\"setAll($event.checked)\"\n        >\n          {{LANG.CHOOSE_ALL}}\n        </mat-checkbox>\n      </span>\n      <span class=\"list-section\">\n        <ul>\n          <li *ngFor=\"let subtask of filteredTask | async\">\n            <mat-checkbox\n              qms-group-options\n              color=\"default\"\n              [(ngModel)]=\"subtask.checked\"\n              (ngModelChange)=\"updateAllComplete()\"\n            >\n              {{subtask.name}}\n            </mat-checkbox>\n          </li>\n        </ul>\n      </span>\n    </section>\n  </div>\n  <hr class=\"mt5 mb5\" />\n  <div class=\"col-12\">\n    <h4 class=\"text-selected\">{{LANG.SELECTED}}</h4>\n    <div class=\"panel__item qms-scrollbar\">\n      <div\n        class=\"related__item__inline\"\n        *ngFor=\"let item of filterFunction(task.subtasks)\"\n      >\n        <button\n          mat-button\n          class=\"related__item__content\"\n          qms-tool-tip=\"{{\n          isEllipsisActive(itemName) ? item.name : ''\n        }}\"\n          mode=\"dark\"\n        >\n          <span class=\"related__item__content_name\" #itemName\n            >{{ item.name }}</span\n          >\n          <mat-icon (click)=\"removeCheckedNodeList(item)\">cancel</mat-icon>\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"col-12 mt20 text-right\">\n    <button qms-btn-text (click)=\"onCloseClick()\" class=\"mr10\">\n      <span>{{ LANG.CANCEL }}</span>\n    </button>\n    <button qms-btn (click)=\"onAddClick()\">\n      <span>{{ LANG.ADD}}</span>\n    </button>\n  </div>\n</div>\n", styles: [".mr10{margin-right:10px}.mt5{margin-bottom:5px}.mb5{margin-top:5px}.w100{width:100%}.text-right{text-align:right}.mt20{margin-top:20px}.text-selected{color:#0009;font-size:12px;line-height:16px;margin-top:1rem}.dialog-container{font-family:Open Sans,sans-serif}.dialog-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.dialog-header h3{font-size:16px}.dialog-header .qms-btn-icon{width:30px;height:30px;line-height:30px}.section-checkbox{height:190px;overflow-y:auto}.section-checkbox .mat-checkbox-inner-container{margin-right:15px}.title-list-section .mat-checkbox-label{font-weight:600;font-size:12px;line-height:16px;color:var(--default-color)}.title-list-section .mat-mdc-checkbox.qms-group-options.mat-checkbox-checked{background:transparent}.list-section ul{list-style-type:none;margin-top:4px;padding-left:0}.list-section .mat-mdc-checkbox.qms-group-options.mat-checkbox-checked{background:transparent}.panel__item{height:100px;margin-top:12px;overflow-x:hidden;overflow-y:auto;padding-right:5px;width:100%;max-width:100%;display:flex;flex-wrap:wrap;align-content:flex-start}.panel__item .related__item__inline{max-width:100%}.panel__item .related__item__content{height:32px;line-height:32px;background-color:var(--related-item-background);max-width:100%;margin-bottom:5px;margin-left:2.5px;margin-right:2.5px}.panel__item .related__item__content .mat-icon{color:var(--related-mat-icon-color);font-size:24px}.panel__item .related__item__content span.related__item__content_name{display:inline-block;width:auto;width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.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: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.QMSButton, selector: "button[qms-btn], button[qms-btn-lg], button[qms-btn-outlined],\n               button[qms-btn-outlined-lg], button[qms-btn-text], button[qms-btn-text-lg],\n               button[qms-btn-fab],button[qms-btn-fab-sm],button[qms-btn-fab-ext],\n               button[qms-btn-fab-outlined],button[qms-btn-fab-outlined-sm],button[qms-btn-fab-outlined-ext]", inputs: ["disabled", "color"], exportAs: ["qmsButton"] }, { kind: "component", type: i8.QMSButtonIcon, selector: "button[qms-btn-icon]", inputs: ["disabled", "color", "active"], exportAs: ["qmsButtonIcon"] }, { kind: "component", type: i9.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i10.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i11.QMSSearchFieldDirective, selector: "mat-form-field[qms-search-field]", inputs: ["isLoading"] }, { kind: "directive", type: i12.QMSFormFieldDirective, selector: "[qms-form]" }, { kind: "directive", type: i12.QMSGroupOptionDirective, selector: "[qms-group-options]", inputs: ["label"] }, { kind: "directive", type: i12.AutocompleteOffDirective, selector: "[qms-group-options]" }, { kind: "directive", type: i13.QMSScrollbarDirective, selector: "[qms-scrollbar]", inputs: ["isNoneBackground"] }, { kind: "directive", type: i14.QMSToolTipRendererDirective, selector: "[qms-tool-tip]", inputs: ["showToolTip", "mode", "qms-tool-tip", "contentTemplate", "position"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectDialog, decorators: [{
            type: Component,
            args: [{ selector: 'qms-select-dialog', encapsulation: ViewEncapsulation.None, template: "<div class=\"dialog-container\">\n  <div class=\"dialog-header\">\n    <h3 class=\"dialog-header__title\">{{data.title}}</h3>\n    <button qms-btn-icon color=\"light\" (click)=\"onCloseClick()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n  <div class=\"col-12\">\n    <div class=\"search-wrapper\">\n      <mat-form-field class=\"w100\" qms-form qms-search-field>\n        <input\n          type=\"text\"\n          placeholder=\"{{ LANG.SEARCH }}\"\n          matInput\n          [formControl]=\"taskFilterCtrl\"\n        />\n        <button qms-btn-icon color=\"light\" matSuffix>\n          <mat-icon>search</mat-icon>\n        </button>\n      </mat-form-field>\n    </div>\n  </div>\n  <hr class=\"mt5 mb5\" />\n\n  <div class=\"col-12\">\n    <section class=\"section-checkbox\" qms-scrollbar>\n      <span class=\"title-list-section\">\n        <mat-checkbox\n          qms-group-options\n          color=\"default\"\n          [checked]=\"allComplete\"\n          [indeterminate]=\"someComplete()\"\n          (change)=\"setAll($event.checked)\"\n        >\n          {{LANG.CHOOSE_ALL}}\n        </mat-checkbox>\n      </span>\n      <span class=\"list-section\">\n        <ul>\n          <li *ngFor=\"let subtask of filteredTask | async\">\n            <mat-checkbox\n              qms-group-options\n              color=\"default\"\n              [(ngModel)]=\"subtask.checked\"\n              (ngModelChange)=\"updateAllComplete()\"\n            >\n              {{subtask.name}}\n            </mat-checkbox>\n          </li>\n        </ul>\n      </span>\n    </section>\n  </div>\n  <hr class=\"mt5 mb5\" />\n  <div class=\"col-12\">\n    <h4 class=\"text-selected\">{{LANG.SELECTED}}</h4>\n    <div class=\"panel__item qms-scrollbar\">\n      <div\n        class=\"related__item__inline\"\n        *ngFor=\"let item of filterFunction(task.subtasks)\"\n      >\n        <button\n          mat-button\n          class=\"related__item__content\"\n          qms-tool-tip=\"{{\n          isEllipsisActive(itemName) ? item.name : ''\n        }}\"\n          mode=\"dark\"\n        >\n          <span class=\"related__item__content_name\" #itemName\n            >{{ item.name }}</span\n          >\n          <mat-icon (click)=\"removeCheckedNodeList(item)\">cancel</mat-icon>\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"col-12 mt20 text-right\">\n    <button qms-btn-text (click)=\"onCloseClick()\" class=\"mr10\">\n      <span>{{ LANG.CANCEL }}</span>\n    </button>\n    <button qms-btn (click)=\"onAddClick()\">\n      <span>{{ LANG.ADD}}</span>\n    </button>\n  </div>\n</div>\n", styles: [".mr10{margin-right:10px}.mt5{margin-bottom:5px}.mb5{margin-top:5px}.w100{width:100%}.text-right{text-align:right}.mt20{margin-top:20px}.text-selected{color:#0009;font-size:12px;line-height:16px;margin-top:1rem}.dialog-container{font-family:Open Sans,sans-serif}.dialog-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.dialog-header h3{font-size:16px}.dialog-header .qms-btn-icon{width:30px;height:30px;line-height:30px}.section-checkbox{height:190px;overflow-y:auto}.section-checkbox .mat-checkbox-inner-container{margin-right:15px}.title-list-section .mat-checkbox-label{font-weight:600;font-size:12px;line-height:16px;color:var(--default-color)}.title-list-section .mat-mdc-checkbox.qms-group-options.mat-checkbox-checked{background:transparent}.list-section ul{list-style-type:none;margin-top:4px;padding-left:0}.list-section .mat-mdc-checkbox.qms-group-options.mat-checkbox-checked{background:transparent}.panel__item{height:100px;margin-top:12px;overflow-x:hidden;overflow-y:auto;padding-right:5px;width:100%;max-width:100%;display:flex;flex-wrap:wrap;align-content:flex-start}.panel__item .related__item__inline{max-width:100%}.panel__item .related__item__content{height:32px;line-height:32px;background-color:var(--related-item-background);max-width:100%;margin-bottom:5px;margin-left:2.5px;margin-right:2.5px}.panel__item .related__item__content .mat-icon{color:var(--related-mat-icon-color);font-size:24px}.panel__item .related__item__content span.related__item__content_name{display:inline-block;width:auto;width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
        }], ctorParameters: () => [{ type: i1.TranslateLibraryService }, { type: i2.MatDialogRef }, { type: undefined, decorators: [{
                    type: Inject,
                    args: [MAT_DIALOG_DATA]
                }] }] });
//# sourceMappingURL=data:application/json;base64, 