import { DOCUMENT } from '@angular/common';
import { ChangeDetectorRef, Component, EventEmitter, HostBinding, Inject, Input, Output, TemplateRef, ViewChild } from '@angular/core';
import { I18nService } from 'ng-devui/i18n';
import { BehaviorSubject, fromEvent, of } from 'rxjs';
import { debounceTime, map, switchMap } from 'rxjs/operators';
import { TABLE_TH } from '../th.token';
import * as i0 from "@angular/core";
import * as i1 from "ng-devui/i18n";
import * as i2 from "@angular/common";
import * as i3 from "@angular/forms";
import * as i4 from "@angular/cdk/scrolling";
import * as i5 from "ng-devui/checkbox";
import * as i6 from "ng-devui/dropdown";
export class FilterComponent {
    constructor(ref, i18n, thComponent, doc) {
        this.ref = ref;
        this.i18n = i18n;
        this.thComponent = thComponent;
        this.doc = doc;
        this.filterMultiple = true;
        this.showFilterIcon = false;
        this.filterIconActiveChange = new EventEmitter(true);
        this.filterChange = new EventEmitter();
        this.filterToggle = new EventEmitter();
        this.checkedListForFilter = [];
        this.filterListDisplay = [];
        this.searchText = '';
        this.isFilterHidden = false;
        this.DEBONCE_TIME = 300;
        this.onContainerScroll = () => {
            this.closeFilter(this.filterDropdown);
        };
        this.i18nCommonText = this.i18n.getI18nText().common;
        this.document = this.doc;
    }
    get canShow() {
        return this.showFilterIcon || this.filterIconActive || this.filterIconActiveInner;
    }
    ngOnInit() {
        if (!this.searchFn) {
            this.searchFn = (item) => {
                return of((this.filterList ? this.filterList : [])
                    .filter(value => value.name.toLowerCase().includes(item.toLowerCase())));
            };
        }
        this.i18nSubscription = this.i18n.langChange().subscribe((data) => {
            this.i18nCommonText = data.common;
        });
    }
    ngOnChanges(changes) {
        if (changes['filterList'] || changes['filterMultiple'] || changes['filterIconActive']) {
            if (this.filterIconActive !== undefined) {
                return;
            }
            if (this.filterList) {
                if (!this.filterMultiple) {
                    this.selectedItem = this.filterList.filter(item => item.selected)[0];
                    this.filterIconActiveInner = (this.selectedItem !== undefined && !!Object.keys(this.selectedItem).length);
                }
                else {
                    const checkedList = this.filterList.filter(item => item.checked);
                    if (checkedList.length) {
                        this.filterIconActiveInner = true;
                    }
                    else {
                        this.filterIconActiveInner = false;
                    }
                }
            }
            this.filterIconActiveChange.emit(this.filterIconActiveInner);
        }
    }
    closeFilter(dropdown) {
        dropdown.toggle();
    }
    getFilterDataMultiple() {
        // 兼容当前当用户未传入id时，使用name做重名判断
        const keyValue = this.checkedListForFilter.length
            ? Object.prototype.hasOwnProperty.call(this.checkedListForFilter[0], 'id') ? 'id' : 'name' : '';
        const checkedList = this.removeDuplication(this.checkedListForFilter, keyValue).filter(item => item.checked);
        this.setFilterIconActive(checkedList);
        this.filterChange.emit(checkedList);
    }
    removeDuplication(array, key) {
        const hash = {};
        return array.reduceRight((item, next) => {
            if (!hash[next[key]]) {
                hash[next[key]] = true;
                item.push(next);
            }
            return item;
        }, []);
    }
    setFilterIconActive(checkedData) {
        if (Array.isArray(checkedData) ? checkedData.length : checkedData) {
            this.filterIconActiveInner = true;
        }
        else {
            this.filterIconActiveInner = false;
        }
        this.filterIconActiveChange.emit(this.filterIconActiveInner);
    }
    getFilterDataRadio(item) {
        this.selectedItem = item;
        this.setFilterIconActive(item);
        this.filterChange.emit(item);
    }
    canFilter(isOpen) {
        let changeResult = Promise.resolve(true);
        if (this.beforeFilter) {
            const result = this.beforeFilter(isOpen);
            if (typeof result !== 'undefined') {
                if (result.then) {
                    changeResult = result;
                }
                else if (result.subscribe) {
                    changeResult = result.toPromise();
                }
                else {
                    changeResult = Promise.resolve(result);
                }
            }
        }
        return changeResult;
    }
    resetSources() {
        this.checkedListForFilter = [];
        if (this.sourceSubscription) {
            this.sourceSubscription.unsubscribe();
        }
        if (this.filterSubscription) {
            this.filterSubscription.unsubscribe();
        }
    }
    showFilterContent($event) {
        if (this.closeWhenScroll) {
            const tableViewElement = this.thComponent.tableViewRefElement.nativeElement.querySelector('.devui-scrollbar.scroll-view');
            if ($event) {
                this.document.addEventListener('scroll', this.onContainerScroll);
                if (tableViewElement) {
                    tableViewElement.addEventListener('scroll', this.onContainerScroll);
                }
            }
            else {
                this.document.removeEventListener('scroll', this.onContainerScroll);
                if (tableViewElement) {
                    tableViewElement.removeEventListener('scroll', this.onContainerScroll);
                }
            }
        }
        this.searchText = '';
        this.canFilter(!$event).then((change) => {
            if (!$event) {
                this.resetSources();
                return;
            }
            if (!change) {
                this.isFilterHidden = true;
                return;
            }
            this.isFilterHidden = false;
            if (!this.customFilterTemplate) {
                this.registerFilterChange();
            }
        });
        const keyValue = this.checkedListForFilter.length
            ? Object.prototype.hasOwnProperty.call(this.checkedListForFilter[0], 'id') ? 'id' : 'name' : '';
        const checkedList = this.removeDuplication(this.checkedListForFilter, keyValue).filter(item => item.checked);
        this.filterToggle.emit({
            isOpen: $event,
            checklist: checkedList
        });
    }
    filterCheckAll($event) {
        this.filterHalfChecked = false;
        // 全选时只针对当前面板操作，全不选时针对所有数据
        if ($event) {
            this.filterListDisplay.forEach(item => {
                item.checked = $event;
                this.checkedListForFilter.push(item);
            });
        }
        else {
            this.filterList.forEach(item => {
                item.checked = $event;
                this.checkedListForFilter.push(item);
            });
        }
    }
    setHalfChecked() {
        this.filterHalfChecked = false;
        const checked = this.filterListDisplay.filter(item => item.checked);
        if (checked.length === this.filterListDisplay.length) {
            this.filterAllChecked = true;
        }
        else if (checked.length > 0) {
            this.filterHalfChecked = true;
        }
        else {
            this.filterAllChecked = false;
            this.filterHalfChecked = false;
        }
    }
    checkboxChange($event, item) {
        this.checkedListForFilter.push(item);
        this.setHalfChecked();
    }
    searchInputValueChangeEvent() {
        this.filterSubscription = fromEvent(this.searchElement, 'input')
            .pipe(map((e) => e.target.value), debounceTime(this.DEBONCE_TIME) // hard code need refactory
        )
            .subscribe(term => {
            return this.sourceSubject.next(term);
        });
    }
    registerFilterChange() {
        this.sourceSubject = new BehaviorSubject('');
        setTimeout(() => {
            this.searchElement = this.document.querySelector('.data-table-column-filter-content input');
            this.searchInputValueChangeEvent();
        });
        this.sourceSubscription = this.sourceSubject.pipe(switchMap(term => this.searchFn(term))).subscribe(options => {
            this.filterListDisplay = options;
            this.checkedListForFilter.push(...options.filter(item => item.checked));
            this.setHalfChecked();
            this.ref.markForCheck();
        });
    }
    ngOnDestroy() {
        if (this.i18nSubscription) {
            this.i18nSubscription.unsubscribe();
        }
        this.resetSources();
    }
}
FilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: FilterComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.I18nService }, { token: TABLE_TH }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: FilterComponent, selector: "d-table-filter", inputs: { beforeFilter: "beforeFilter", customFilterTemplate: "customFilterTemplate", extraFilterTemplate: "extraFilterTemplate", searchFn: "searchFn", filterList: "filterList", filterIconActive: "filterIconActive", filterMultiple: "filterMultiple", filterBoxWidth: "filterBoxWidth", filterBoxHeight: "filterBoxHeight", column: "column", closeWhenScroll: "closeWhenScroll", showFilterIcon: "showFilterIcon" }, outputs: { filterIconActiveChange: "filterIconActiveChange", filterChange: "filterChange", filterToggle: "filterToggle" }, host: { properties: { "class.devui-icon-show": "this.canShow" } }, viewQueries: [{ propertyName: "filterDropdown", first: true, predicate: ["filterDropdown"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<span\n  dDropDown\n  appendToBody\n  [appendToBodyDirections]=\"['centerDown', 'centerUp', 'rightDown', 'leftDown', 'rightUp', 'leftUp']\"\n  [closeScope]=\"'blank'\"\n  (toggleEvent)=\"showFilterContent($event)\"\n  #filterDropdown=\"d-dropdown\"\n>\n  <span dDropDownToggle>\n    <i\n      class=\"filter-icon\"\n      [ngClass]=\"{\n        'filter-icon-active': filterIconActive || filterIconActiveInner,\n        'filter-icon-visiable': showFilterIcon\n      }\"\n    >\n      <svg\n        width=\"16px\"\n        height=\"16px\"\n        viewBox=\"0 0 16 16\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      >\n        <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n          <g>\n            <polygon points=\"10.0085775 7 10.0085775 15 6 13 6 7 2 3 2 1 14 1 14 3\"></polygon>\n          </g>\n        </g>\n      </svg>\n    </i>\n  </span>\n  <div\n    dDropDownMenu\n    class=\"devui-dropdown-menu\"\n    [ngClass]=\"{ 'filter-content-hidden': isFilterHidden }\"\n    [style.width]=\"filterBoxWidth || '250px'\"\n    [ngStyle]=\"{ 'min-height': filterBoxHeight ? filterBoxHeight : '60px' }\"\n  >\n    <ng-template\n      *ngIf=\"filterDropdown.isOpen\"\n      [ngTemplateOutlet]=\"customFilterTemplate || (filterMultiple ? filterContentTmplForMultiple : filterContentTmplForRadio)\"\n      [ngTemplateOutletContext]=\"{\n        $implicit: this,\n        filterListDisplay: filterListDisplay,\n        dropdown: filterDropdown,\n        column: column\n      }\"\n    >\n    </ng-template>\n  </div>\n</span>\n\n<ng-template #filterContentTmplForMultiple let-filterListMultiple=\"filterListDisplay\" let-dropdown=\"dropdown\">\n  <div class=\"data-table-column-filter-content filter-bg filter-font-color\" [style.width]=\"filterBoxWidth\" [style.height]=\"filterBoxHeight\">\n    <div class=\"filter-search-container\">\n      <input\n        name=\"select\"\n        type=\"text\"\n        autocomplete=\"off\"\n        [placeholder]=\"i18nCommonText?.searchPlaceholder\"\n        [(ngModel)]=\"searchText\"\n        class=\"devui-form-control devui-input devui-search-in-dropdown\"\n      />\n    </div>\n    <div class=\"filter-options\">\n      <d-checkbox\n        style=\"display: inline-block\"\n        [label]=\"i18nCommonText?.checkAll\"\n        (change)=\"filterCheckAll($event)\"\n        [halfchecked]=\"filterHalfChecked\"\n        [(ngModel)]=\"filterAllChecked\"\n      >\n      </d-checkbox>\n      <ng-container *ngIf=\"extraFilterTemplate\">\n        <ng-template\n          [ngTemplateOutlet]=\"extraFilterTemplate\"\n          [ngTemplateOutletContext]=\"{ checked: filterAllChecked, halfChecked: filterHalfChecked }\"\n        >\n        </ng-template>\n      </ng-container>\n      <div class=\"line\"></div>\n      <cdk-virtual-scroll-viewport\n        itemSize=\"30\"\n        minBufferPx=\"300\"\n        maxBufferPx=\"500\"\n        class=\"normal-filter-list-container devui-scrollbar\"\n        [style.height]=\"filterBoxHeight ? 'calc(' + filterBoxHeight + ' - 180px)' : 30 * (filterListMultiple?.length || 1) + 'px'\"\n        [style.maxHeight]=\"filterBoxHeight ? 'none' : '250px'\"\n      >\n        <div *cdkVirtualFor=\"let item of filterListMultiple\" class=\"checkbox-group\">\n          <d-checkbox [label]=\"item.name\" [(ngModel)]=\"item.checked\" (change)=\"checkboxChange($event, item)\"> </d-checkbox>\n        </div>\n        <div class=\"no-data-container\" *ngIf=\"!filterListMultiple?.length\">{{ i18nCommonText?.noData }}</div>\n      </cdk-virtual-scroll-viewport>\n    </div>\n    <div class=\"line\"></div>\n    <div style=\"text-align: center\">\n      <span class=\"button-style\" (click)=\"getFilterDataMultiple(); closeFilter(dropdown)\">{{ i18nCommonText?.btnOk }}</span>\n    </div>\n  </div>\n</ng-template>\n<ng-template #filterContentTmplForRadio let-filterListRadio=\"filterListDisplay\" let-dropdown=\"dropdown\">\n  <div class=\"data-table-column-filter-content filter-bg filter-font-color\" [style.width]=\"filterBoxWidth\" [style.height]=\"filterBoxHeight\">\n    <div>\n      <input\n        name=\"select\"\n        type=\"text\"\n        autocomplete=\"off\"\n        [placeholder]=\"i18nCommonText?.searchPlaceholder\"\n        [(ngModel)]=\"searchText\"\n        class=\"devui-form-control devui-input devui-search-in-dropdown\"\n      />\n    </div>\n    <div class=\"filter-options\" role=\"menu\">\n      <div class=\"normal-filter-list-container devui-scrollbar\" role=\"menuitem\" [style.maxHeight]=\"filterBoxHeight ? 'none' : '350px'\">\n        <div\n          [title]=\"item.name\"\n          *ngFor=\"let item of filterListRadio\"\n          class=\"drop-down-item\"\n          [ngClass]=\"{ 'filter-item-active': selectedItem === item }\"\n          (click)=\"getFilterDataRadio(item); closeFilter(dropdown)\"\n        >\n          {{ item.name }}\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".devui-font-size-base{font-size:12px;font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:12px;font-size:var(--devui-font-size, 12px);font-weight:400;line-height:1.5}.devui-font-size-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px);font-weight:700;line-height:1.5}.devui-font-size-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px);font-weight:700;line-height:1.5}.devui-font-size-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px);font-weight:700;line-height:1.5}:host{text-align:right}:host.devui-icon-show{display:block}.data-table-column-filter-content{background:#ffffff;background:var(--devui-connected-overlay-bg, #ffffff);border-radius:2px;border-radius:var(--devui-border-radius, 2px)}.data-table-column-filter-content .drop-down-item{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.data-table-column-filter-content .line{width:calc(100% - 20px);margin-left:10px}.data-table-column-filter-content>.filter-options>d-checkbox{height:30px;padding:0 10px}.data-table-column-filter-content .checkbox-group{padding:0 10px}.filter-content-hidden{display:none!important}.line{height:1px;background:#f2f2f3;background:var(--devui-dividing-line, #f2f2f3);margin-top:5px;margin-bottom:5px}.checkbox-group{height:30px}.button-style{display:inline-block;width:45%;font-size:12px;font-size:var(--devui-font-size, 12px);color:#252b3a;color:var(--devui-text, #252b3a);text-align:center;line-height:20px;cursor:pointer}.button-style:hover{color:#5e7ce0;color:var(--devui-brand, #5e7ce0)}::ng-deep .filter-options .normal-filter-list-container .cdk-virtual-scroll-content-wrapper{width:100%}::ng-deep .filter-options .normal-filter-list-container .cdk-virtual-scroll-content-wrapper .no-data-container{padding:0 10px;line-height:30px}.filter-options ::ng-deep .devui-checkbox>label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.normal-filter-list-container{overflow-y:auto}.icon-filter-style{color:#f2f2f3;color:var(--devui-dividing-line, #f2f2f3);cursor:pointer;margin-left:20px}.label-style{font-size:12px;font-size:var(--devui-font-size, 12px);color:#252b3a;color:var(--devui-text, #252b3a);letter-spacing:0;margin-left:10px}.email-style{font-size:12px;font-size:var(--devui-font-size, 12px);color:#babbc0;color:var(--devui-placeholder, #babbc0);letter-spacing:0;margin-left:10px}.overlay-mask{position:fixed;top:0;bottom:0;right:0;left:0;z-index:9}.drop-down-item{padding:0 10px;height:30px;line-height:30px;cursor:pointer}.drop-down-item:hover{background:#f2f2f3;background:var(--devui-list-item-hover-bg, #f2f2f3);color:#252b3a;color:var(--devui-list-item-hover-text, #252b3a)}.filter-item-active{background:#f2f5fc;background:var(--devui-list-item-active-bg, #f2f5fc);color:#252b3a;color:var(--devui-list-item-active-text, #252b3a)}.edit-padding-fix{margin-top:-6px;margin-bottom:-6px}.filter-icon{display:inline-block;vertical-align:-3px;visibility:hidden;cursor:pointer;height:16px;margin-top:-1px}.filter-icon>svg g{fill:#d7d8da;fill:var(--devui-shape-icon-fill, #d7d8da)}.filter-icon:hover>svg g{fill:#babbc0;fill:var(--devui-shape-icon-fill-active, #babbc0)}.filter-icon-visiable{visibility:visible}.filter-icon-active{visibility:visible!important}.filter-icon-active>svg g{fill:#5e7ce0;fill:var(--devui-brand, #5e7ce0)}.filter-icon-active:hover>svg g{fill:#5e7ce0;fill:var(--devui-brand, #5e7ce0)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i4.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i4.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i5.CheckBoxComponent, selector: "d-checkbox", inputs: ["name", "label", "cssClass", "color", "disabled", "isShowTitle", "title", "labelTemplate", "halfchecked", "showAnimation", "beforeChange"], outputs: ["change"] }, { kind: "directive", type: i6.DropDownDirective, selector: "[dDropDown]", inputs: ["isOpen", "disabled", "showAnimation", "trigger", "closeScope", "closeOnMouseLeaveMenu"], outputs: ["toggleEvent"], exportAs: ["d-dropdown"] }, { kind: "directive", type: i6.DropDownMenuDirective, selector: "[dDropDownMenu]", exportAs: ["d-dropdown-menu"] }, { kind: "directive", type: i6.DropDownToggleDirective, selector: "[dDropDownToggle]", inputs: ["toggleOnFocus", "autoFocus"], exportAs: ["d-dropdown-toggle"] }, { kind: "component", type: i6.DropDownAppendToBodyComponent, selector: "[dDropDown][appendToBody]", inputs: ["alignOrigin", "appendToBodyDirections"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: FilterComponent, decorators: [{
            type: Component,
            args: [{ selector: 'd-table-filter', template: "<span\n  dDropDown\n  appendToBody\n  [appendToBodyDirections]=\"['centerDown', 'centerUp', 'rightDown', 'leftDown', 'rightUp', 'leftUp']\"\n  [closeScope]=\"'blank'\"\n  (toggleEvent)=\"showFilterContent($event)\"\n  #filterDropdown=\"d-dropdown\"\n>\n  <span dDropDownToggle>\n    <i\n      class=\"filter-icon\"\n      [ngClass]=\"{\n        'filter-icon-active': filterIconActive || filterIconActiveInner,\n        'filter-icon-visiable': showFilterIcon\n      }\"\n    >\n      <svg\n        width=\"16px\"\n        height=\"16px\"\n        viewBox=\"0 0 16 16\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      >\n        <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n          <g>\n            <polygon points=\"10.0085775 7 10.0085775 15 6 13 6 7 2 3 2 1 14 1 14 3\"></polygon>\n          </g>\n        </g>\n      </svg>\n    </i>\n  </span>\n  <div\n    dDropDownMenu\n    class=\"devui-dropdown-menu\"\n    [ngClass]=\"{ 'filter-content-hidden': isFilterHidden }\"\n    [style.width]=\"filterBoxWidth || '250px'\"\n    [ngStyle]=\"{ 'min-height': filterBoxHeight ? filterBoxHeight : '60px' }\"\n  >\n    <ng-template\n      *ngIf=\"filterDropdown.isOpen\"\n      [ngTemplateOutlet]=\"customFilterTemplate || (filterMultiple ? filterContentTmplForMultiple : filterContentTmplForRadio)\"\n      [ngTemplateOutletContext]=\"{\n        $implicit: this,\n        filterListDisplay: filterListDisplay,\n        dropdown: filterDropdown,\n        column: column\n      }\"\n    >\n    </ng-template>\n  </div>\n</span>\n\n<ng-template #filterContentTmplForMultiple let-filterListMultiple=\"filterListDisplay\" let-dropdown=\"dropdown\">\n  <div class=\"data-table-column-filter-content filter-bg filter-font-color\" [style.width]=\"filterBoxWidth\" [style.height]=\"filterBoxHeight\">\n    <div class=\"filter-search-container\">\n      <input\n        name=\"select\"\n        type=\"text\"\n        autocomplete=\"off\"\n        [placeholder]=\"i18nCommonText?.searchPlaceholder\"\n        [(ngModel)]=\"searchText\"\n        class=\"devui-form-control devui-input devui-search-in-dropdown\"\n      />\n    </div>\n    <div class=\"filter-options\">\n      <d-checkbox\n        style=\"display: inline-block\"\n        [label]=\"i18nCommonText?.checkAll\"\n        (change)=\"filterCheckAll($event)\"\n        [halfchecked]=\"filterHalfChecked\"\n        [(ngModel)]=\"filterAllChecked\"\n      >\n      </d-checkbox>\n      <ng-container *ngIf=\"extraFilterTemplate\">\n        <ng-template\n          [ngTemplateOutlet]=\"extraFilterTemplate\"\n          [ngTemplateOutletContext]=\"{ checked: filterAllChecked, halfChecked: filterHalfChecked }\"\n        >\n        </ng-template>\n      </ng-container>\n      <div class=\"line\"></div>\n      <cdk-virtual-scroll-viewport\n        itemSize=\"30\"\n        minBufferPx=\"300\"\n        maxBufferPx=\"500\"\n        class=\"normal-filter-list-container devui-scrollbar\"\n        [style.height]=\"filterBoxHeight ? 'calc(' + filterBoxHeight + ' - 180px)' : 30 * (filterListMultiple?.length || 1) + 'px'\"\n        [style.maxHeight]=\"filterBoxHeight ? 'none' : '250px'\"\n      >\n        <div *cdkVirtualFor=\"let item of filterListMultiple\" class=\"checkbox-group\">\n          <d-checkbox [label]=\"item.name\" [(ngModel)]=\"item.checked\" (change)=\"checkboxChange($event, item)\"> </d-checkbox>\n        </div>\n        <div class=\"no-data-container\" *ngIf=\"!filterListMultiple?.length\">{{ i18nCommonText?.noData }}</div>\n      </cdk-virtual-scroll-viewport>\n    </div>\n    <div class=\"line\"></div>\n    <div style=\"text-align: center\">\n      <span class=\"button-style\" (click)=\"getFilterDataMultiple(); closeFilter(dropdown)\">{{ i18nCommonText?.btnOk }}</span>\n    </div>\n  </div>\n</ng-template>\n<ng-template #filterContentTmplForRadio let-filterListRadio=\"filterListDisplay\" let-dropdown=\"dropdown\">\n  <div class=\"data-table-column-filter-content filter-bg filter-font-color\" [style.width]=\"filterBoxWidth\" [style.height]=\"filterBoxHeight\">\n    <div>\n      <input\n        name=\"select\"\n        type=\"text\"\n        autocomplete=\"off\"\n        [placeholder]=\"i18nCommonText?.searchPlaceholder\"\n        [(ngModel)]=\"searchText\"\n        class=\"devui-form-control devui-input devui-search-in-dropdown\"\n      />\n    </div>\n    <div class=\"filter-options\" role=\"menu\">\n      <div class=\"normal-filter-list-container devui-scrollbar\" role=\"menuitem\" [style.maxHeight]=\"filterBoxHeight ? 'none' : '350px'\">\n        <div\n          [title]=\"item.name\"\n          *ngFor=\"let item of filterListRadio\"\n          class=\"drop-down-item\"\n          [ngClass]=\"{ 'filter-item-active': selectedItem === item }\"\n          (click)=\"getFilterDataRadio(item); closeFilter(dropdown)\"\n        >\n          {{ item.name }}\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".devui-font-size-base{font-size:12px;font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:12px;font-size:var(--devui-font-size, 12px);font-weight:400;line-height:1.5}.devui-font-size-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px);font-weight:700;line-height:1.5}.devui-font-size-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px);font-weight:700;line-height:1.5}.devui-font-size-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px);font-weight:700;line-height:1.5}:host{text-align:right}:host.devui-icon-show{display:block}.data-table-column-filter-content{background:#ffffff;background:var(--devui-connected-overlay-bg, #ffffff);border-radius:2px;border-radius:var(--devui-border-radius, 2px)}.data-table-column-filter-content .drop-down-item{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.data-table-column-filter-content .line{width:calc(100% - 20px);margin-left:10px}.data-table-column-filter-content>.filter-options>d-checkbox{height:30px;padding:0 10px}.data-table-column-filter-content .checkbox-group{padding:0 10px}.filter-content-hidden{display:none!important}.line{height:1px;background:#f2f2f3;background:var(--devui-dividing-line, #f2f2f3);margin-top:5px;margin-bottom:5px}.checkbox-group{height:30px}.button-style{display:inline-block;width:45%;font-size:12px;font-size:var(--devui-font-size, 12px);color:#252b3a;color:var(--devui-text, #252b3a);text-align:center;line-height:20px;cursor:pointer}.button-style:hover{color:#5e7ce0;color:var(--devui-brand, #5e7ce0)}::ng-deep .filter-options .normal-filter-list-container .cdk-virtual-scroll-content-wrapper{width:100%}::ng-deep .filter-options .normal-filter-list-container .cdk-virtual-scroll-content-wrapper .no-data-container{padding:0 10px;line-height:30px}.filter-options ::ng-deep .devui-checkbox>label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.normal-filter-list-container{overflow-y:auto}.icon-filter-style{color:#f2f2f3;color:var(--devui-dividing-line, #f2f2f3);cursor:pointer;margin-left:20px}.label-style{font-size:12px;font-size:var(--devui-font-size, 12px);color:#252b3a;color:var(--devui-text, #252b3a);letter-spacing:0;margin-left:10px}.email-style{font-size:12px;font-size:var(--devui-font-size, 12px);color:#babbc0;color:var(--devui-placeholder, #babbc0);letter-spacing:0;margin-left:10px}.overlay-mask{position:fixed;top:0;bottom:0;right:0;left:0;z-index:9}.drop-down-item{padding:0 10px;height:30px;line-height:30px;cursor:pointer}.drop-down-item:hover{background:#f2f2f3;background:var(--devui-list-item-hover-bg, #f2f2f3);color:#252b3a;color:var(--devui-list-item-hover-text, #252b3a)}.filter-item-active{background:#f2f5fc;background:var(--devui-list-item-active-bg, #f2f5fc);color:#252b3a;color:var(--devui-list-item-active-text, #252b3a)}.edit-padding-fix{margin-top:-6px;margin-bottom:-6px}.filter-icon{display:inline-block;vertical-align:-3px;visibility:hidden;cursor:pointer;height:16px;margin-top:-1px}.filter-icon>svg g{fill:#d7d8da;fill:var(--devui-shape-icon-fill, #d7d8da)}.filter-icon:hover>svg g{fill:#babbc0;fill:var(--devui-shape-icon-fill-active, #babbc0)}.filter-icon-visiable{visibility:visible}.filter-icon-active{visibility:visible!important}.filter-icon-active>svg g{fill:#5e7ce0;fill:var(--devui-brand, #5e7ce0)}.filter-icon-active:hover>svg g{fill:#5e7ce0;fill:var(--devui-brand, #5e7ce0)}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.I18nService }, { type: undefined, decorators: [{
                    type: Inject,
                    args: [TABLE_TH]
                }] }, { type: undefined, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }]; }, propDecorators: { beforeFilter: [{
                type: Input
            }], customFilterTemplate: [{
                type: Input
            }], extraFilterTemplate: [{
                type: Input
            }], searchFn: [{
                type: Input
            }], filterList: [{
                type: Input
            }], filterIconActive: [{
                type: Input
            }], filterMultiple: [{
                type: Input
            }], filterBoxWidth: [{
                type: Input
            }], filterBoxHeight: [{
                type: Input
            }], column: [{
                type: Input
            }], closeWhenScroll: [{
                type: Input
            }], showFilterIcon: [{
                type: Input
            }], filterIconActiveChange: [{
                type: Output
            }], filterChange: [{
                type: Output
            }], filterToggle: [{
                type: Output
            }], canShow: [{
                type: HostBinding,
                args: ['class.devui-icon-show']
            }], filterDropdown: [{
                type: ViewChild,
                args: ['filterDropdown']
            }] } });
//# sourceMappingURL=data:application/json;base64, 