ngx-filters/fesm2015/ngx-filters.js

This library was generated for all type of frameworks such as Angular Material, Prime Ng, etc. Providing Filters such as Number Box, TextBox, Date, Single Select, Multi Select And True/False Filters for grids or list.

import { EventEmitter, Component, Input, Output, Directive, InjectionToken, ɵɵdefineInjectable, ɵɵinject, INJECTOR, ComponentFactoryResolver, Injectable, Injector, Optional, Inject, ViewEncapsulation, ElementRef, ViewChild, ViewContainerRef, Pipe, PLATFORM_ID, NgModule } from '@angular/core';
import { isPlatformBrowser, CommonModule } from '@angular/common';
import * as moment from 'jalali-moment';
import { FormsModule } from '@angular/forms';

class NgxFilterConfig {
}

class NgxFilterBaseComponent {
}

class NgxDateFilter extends NgxFilterBaseComponent {
}

class DateComponent extends NgxDateFilter {
    constructor() {
        super(...arguments);
        this.valueChange = new EventEmitter();
    }
    ngOnInit() {
    }
}
DateComponent.decorators = [
    { type: Component, args: [{
                selector: 'ngx-date',
                template: "<div>\n  <label>{{label}}</label>\n  <input class=\"form-control\" [(ngModel)]=\"value\" type=\"date\" (ngModelChange)=\"valueChange.emit($event)\">\n\n</div>\n",
                styles: [""]
            },] }
];
DateComponent.propDecorators = {
    filter: [{ type: Input }],
    options: [{ type: Input }],
    label: [{ type: Input }],
    value: [{ type: Input }],
    valueChange: [{ type: Output }]
};

class NgxNumberBoxFilter extends NgxFilterBaseComponent {
    get prefixTextForHint() {
        var _a;
        if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.prefixTextForHint) {
            return this.options.prefixTextForHint;
        }
        return ' $';
    }
    get maxLabel() {
        var _a;
        if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.maxLabel) {
            return this.options.maxLabel;
        }
        return this.filterService.translator.maxLabel;
    }
    get minimumValue() {
        var _a;
        if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.minLabel) {
            return this.options.minLabel;
        }
        return this.filterService.translator.minimumLabel;
    }
    get isMoney() {
        var _a;
        return (_a = this.options) === null || _a === void 0 ? void 0 : _a.isMoney;
    }
    get amount() {
        var _a;
        if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.amountLabel) {
            return this.options.amountLabel;
        }
        return this.filterService.translator.amountLabel;
    }
}

class NumberBoxComponent extends NgxNumberBoxFilter {
    constructor() {
        super(...arguments);
        this.valueChange = new EventEmitter();
    }
    ngOnInit() {
    }
}
NumberBoxComponent.decorators = [
    { type: Component, args: [{
                selector: 'number-box',
                template: "<div>\n  <label>{{label}}</label>\n  <input class=\"form-control\" type=\"number\" [(ngModel)]=\"value\" (ngModelChange)=\"valueChange.emit($event)\">\n  <div\n    *ngIf=\"isMoney\">{{filter.value | separateThreeComma}}\n    {{prefixTextForHint}}</div>\n\n</div>\n",
                styles: [""]
            },] }
];
NumberBoxComponent.propDecorators = {
    filter: [{ type: Input }],
    options: [{ type: Input }],
    value: [{ type: Input }],
    valueChange: [{ type: Output }],
    label: [{ type: Input }]
};

class NgxTextBoxFilter extends NgxFilterBaseComponent {
}

class TextBoxComponent extends NgxTextBoxFilter {
    constructor() {
        super(...arguments);
        this.valueChange = new EventEmitter();
    }
    ngOnInit() {
    }
}
TextBoxComponent.decorators = [
    { type: Component, args: [{
                selector: 'app-text-box',
                template: "<div>\n  <label>{{label}}</label>\n  <input class=\"form-control\" type=\"text\" [(ngModel)]=\"value\" (ngModelChange)=\"valueChange.emit($event)\">\n</div>\n",
                styles: [""]
            },] }
];
TextBoxComponent.propDecorators = {
    filter: [{ type: Input }],
    value: [{ type: Input }],
    valueChange: [{ type: Output }],
    label: [{ type: Input }],
    options: [{ type: Input }]
};

class NgxTrueFalseFilter extends NgxFilterBaseComponent {
}

class TrueFalseComponent extends NgxTrueFalseFilter {
    constructor() {
        super(...arguments);
        this.valueChange = new EventEmitter();
    }
    ngOnInit() {
    }
}
TrueFalseComponent.decorators = [
    { type: Component, args: [{
                selector: 'app-true-false',
                template: "<p>true-false works!</p>\n",
                styles: [""]
            },] }
];
TrueFalseComponent.propDecorators = {
    label: [{ type: Input }],
    filter: [{ type: Input }],
    options: [{ type: Input }],
    value: [{ type: Input }],
    valueChange: [{ type: Output }]
};

class NgxSelectBoxFilter extends NgxFilterBaseComponent {
    filterSourceChange(src) {
        // if (this.options.source)
        // this.options? this.options.source = src: '';
    }
    get selectBoxOptions() {
        var _a, _b;
        return (_b = (_a = this.filter) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.selectBoxOptions;
    }
    get placeholder() {
        var _a;
        return (_a = this.selectBoxOptions) === null || _a === void 0 ? void 0 : _a.searchBoxPlaceholder;
    }
    get emptyText() {
        var _a;
        return (_a = this.selectBoxOptions) === null || _a === void 0 ? void 0 : _a.emptyText;
    }
    get lazyLoad() {
        var _a;
        return (_a = this.selectBoxOptions) === null || _a === void 0 ? void 0 : _a.lazyLoad;
    }
    get displayMember() {
        var _a;
        if (!((_a = this.selectBoxOptions) === null || _a === void 0 ? void 0 : _a.displayMember)) {
            return 'name';
        }
        return this.selectBoxOptions.displayMember;
    }
    get valueMember() {
        var _a;
        if (!((_a = this.selectBoxOptions) === null || _a === void 0 ? void 0 : _a.valueMember)) {
            return 'id';
        }
        return this.selectBoxOptions.valueMember;
    }
    get searcher() {
        var _a, _b;
        if ((_a = this.selectBoxOptions) === null || _a === void 0 ? void 0 : _a.searcher) {
            return (_b = this.selectBoxOptions) === null || _b === void 0 ? void 0 : _b.searcher;
        }
        return null;
    }
    get initSource() {
        var _a;
        if ((_a = this.selectBoxOptions) === null || _a === void 0 ? void 0 : _a.source) {
            return this.selectBoxOptions.source;
        }
        return [];
    }
    get compareWidth() {
        return this.selectBoxOptions['compareWith'];
    }
    get useMobileView() {
        var _a;
        return (_a = this.selectBoxOptions) === null || _a === void 0 ? void 0 : _a.useMobileView;
    }
    get hasSearch() {
        var _a;
        return (_a = this.selectBoxOptions) === null || _a === void 0 ? void 0 : _a.hasSearch;
    }
    get mobileViewType() {
        var _a;
        return (_a = this.selectBoxOptions) === null || _a === void 0 ? void 0 : _a.mobileViewType;
    }
    get maximumResultForShow() {
        var _a;
        return (_a = this.selectBoxOptions) === null || _a === void 0 ? void 0 : _a.maximumResultForShow;
    }
    get useInfiniteScroll() {
        var _a;
        return (_a = this.selectBoxOptions) === null || _a === void 0 ? void 0 : _a.useInfiniteScroll;
    }
    get noMoreResultLabel() {
        var _a;
        return (_a = this.selectBoxOptions) === null || _a === void 0 ? void 0 : _a.noMoreResultLabel;
    }
    get inFirstLoadCallSearcher() {
        var _a;
        return (_a = this.selectBoxOptions) === null || _a === void 0 ? void 0 : _a.afterViewInitCallSearcher;
    }
    get inFirstLoadSearcherValue() {
        var _a;
        return (_a = this.selectBoxOptions) === null || _a === void 0 ? void 0 : _a.inFirstLoadSearcherValue;
    }
    ngAfterViewInit() {
        // if (this.selectBoxOptions?.afterViewInitCallSearcher) {
        //   if (this.searcher) {
        //     this.searcher('').subscribe(z => {
        //       this.selectBoxOptions.source = z;
        //     });
        //   }
        // }
    }
}
NgxSelectBoxFilter.decorators = [
    { type: Directive, args: [{},] }
];

class NgxMultiSelectFilter extends NgxSelectBoxFilter {
}
NgxMultiSelectFilter.decorators = [
    { type: Directive, args: [{},] }
];

class MultiSelectBoxComponent extends NgxMultiSelectFilter {
    constructor() {
        super(...arguments);
        this.valueChange = new EventEmitter();
    }
    ngOnInit() {
    }
}
MultiSelectBoxComponent.decorators = [
    { type: Component, args: [{
                selector: 'app-multi-select-box',
                template: "<label>\n  <!--  {{label}}-->\n  <select multiple=\"multiple\" class=\"form-control ngx-filter-select\" (change)=\"valueChange.emit($event)\">\n    <option *ngFor=\"let op of initSource\">\n      {{op[displayMember]}}\n    </option>\n  </select>\n</label>\n",
                styles: [".ngx-filter-select{min-width:200px}"]
            },] }
];
MultiSelectBoxComponent.propDecorators = {
    label: [{ type: Input }],
    filter: [{ type: Input }],
    options: [{ type: Input }],
    value: [{ type: Input }],
    valueChange: [{ type: Output }]
};

class SelectBoxComponent extends NgxSelectBoxFilter {
    constructor() {
        super(...arguments);
        this.valueChange = new EventEmitter();
    }
    ngOnInit() {
    }
}
SelectBoxComponent.decorators = [
    { type: Component, args: [{
                selector: 'app-select-box',
                template: "<label>\n  <!--  {{label}}-->\n  <select class=\"form-control ngx-filter-select\" (change)=\"valueChange.emit($event)\">\n    <option *ngFor=\"let op of initSource\">\n      {{op[displayMember]}}\n    </option>\n  </select>\n</label>\n",
                styles: [".ngx-filter-select{min-width:200px}"]
            },] }
];
SelectBoxComponent.propDecorators = {
    label: [{ type: Input }],
    filter: [{ type: Input }],
    options: [{ type: Input }],
    value: [{ type: Input }],
    valueChange: [{ type: Output }]
};

class NgxConditionSelectorFilter extends NgxFilterBaseComponent {
}

class ConditionsSelectorComponent extends NgxConditionSelectorFilter {
    constructor() {
        super(...arguments);
        this.conditions = [];
        this.valueChange = new EventEmitter();
    }
    ngOnInit() {
    }
    onChangeValue(ev) {
        this.value = ev.target['value'];
        this.valueChange.emit(this.value);
    }
}
ConditionsSelectorComponent.decorators = [
    { type: Component, args: [{
                selector: 'ngx-filter-conditions-selector',
                template: "<div *ngIf=\"filter\" style=\";margin-bottom: 6px;max-width: 200px;width: 100%\">\n  <label>\n    {{label}}\n  </label>\n  <select [disabled]=\"filter.disabledCondition\" (change)=\"onChangeValue($event)\" class=\"form-control\"\n          style=\"width: 100%\">\n    <option [selected]=\"condition.key==value\" *ngFor=\"let condition of conditions\" [value]=\"condition.key\">\n      {{condition.label}}\n    </option>\n  </select>\n\n</div>\n",
                styles: [""]
            },] }
];
ConditionsSelectorComponent.propDecorators = {
    conditions: [{ type: Input }],
    filter: [{ type: Input }]
};

class PageFilter {
    constructor() {
        this.filters = [];
    }
}
class Filter {
    constructor() {
        this.options = new FilterOptions();
    }
}
class FilterOptions {
    constructor() {
        this.selectBoxOptions = new FilterSelectBoxOptions();
        this.numberBoxOptions = new FilterNumberBoxOptions();
        this.trueFalseOptions = new FilterTrueFalseOptions();
        this.dateTimeOptions = new FilterDateTimeOptions();
    }
}
class FilterTranslator {
    constructor(data) {
        this.conditionLabel = 'condition';
        this.betweenLabel = 'Between';
        this.containsLabel = 'Contains';
        this.notContainsLabel = 'NotContains';
        this.endWithLabel = 'EndsWith';
        this.equalLabel = 'Equal';
        this.exactLabel = 'Exact';
        this.greaterThanLabel = 'GreaterThan';
        this.greaterThanOrEqualLabel = 'GreaterThanOrEqual';
        this.lessThanLabel = 'LessThan';
        this.lessThanOrEqualLabel = 'LessThanOrEqual';
        this.notEqualLabel = 'NotEqual';
        this.startWithLabel = 'StartsWith';
        this.inRangeLabel = 'InRange';
        this.lastMonthLabel = 'LastMonth';
        this.lastWeekLabel = 'LastWeek';
        this.currentMonthLabel = 'CurrentMonth';
        this.currentWeekLabel = 'CurrentWeek';
        this.currentYearLabel = 'CurrentYear';
        this.toDayLabel = 'ToDay';
        this.fromLabel = 'from';
        this.toLabel = 'to';
        this.applyLabel = 'apply';
        this.amountLabel = 'Amount';
        this.minimumLabel = 'Minimum Value';
        this.maxLabel = 'Maximum Value';
        this.clearAllLabel = 'Clear All';
        if (data) {
            if (data.conditionLabel)
                this.conditionLabel = data.conditionLabel;
            if (data.betweenLabel)
                this.betweenLabel = data.betweenLabel;
            if (data.containsLabel)
                this.containsLabel = data.containsLabel;
            if (data.endWithLabel)
                this.endWithLabel = data.endWithLabel;
            if (data.equalLabel)
                this.equalLabel = data.equalLabel;
            if (data.exactLabel)
                this.exactLabel = data.exactLabel;
            if (data.greaterThanLabel)
                this.greaterThanLabel = data.greaterThanLabel;
            if (data.greaterThanOrEqualLabel)
                this.greaterThanOrEqualLabel = data.greaterThanOrEqualLabel;
            if (data.lessThanLabel)
                this.lessThanLabel = data.lessThanLabel;
            if (data.lessThanOrEqualLabel)
                this.lessThanOrEqualLabel = data.lessThanOrEqualLabel;
            if (data.notEqualLabel)
                this.notEqualLabel = data.notEqualLabel;
            if (data.startWithLabel)
                this.startWithLabel = data.startWithLabel;
            if (data.inRangeLabel)
                this.inRangeLabel = data.inRangeLabel;
            if (data.lastMonthLabel)
                this.lastMonthLabel = data.lastMonthLabel;
            if (data.toDayLabel)
                this.toDayLabel = data.toDayLabel;
            if (data.lastWeekLabel)
                this.lastWeekLabel = data.lastWeekLabel;
            if (data.currentMonthLabel)
                this.currentMonthLabel = data.currentMonthLabel;
            if (data.currentWeekLabel)
                this.currentWeekLabel = data.currentWeekLabel;
            if (data.currentYearLabel)
                this.currentYearLabel = data.currentYearLabel;
            if (data.fromLabel)
                this.fromLabel = data.fromLabel;
            if (data.toLabel)
                this.toLabel = data.toLabel;
            if (data.applyLabel)
                this.applyLabel = data.applyLabel;
            if (data.maxLabel)
                this.maxLabel = data.maxLabel;
            if (data.minimumLabel)
                this.minimumLabel = data.minimumLabel;
            if (data.amountLabel)
                this.amountLabel = data.amountLabel;
            if (data.notContainsLabel)
                this.notContainsLabel = data.notContainsLabel;
            if (data.clearAllLabel)
                this.clearAllLabel = data.clearAllLabel;
        }
    }
}
class FilterDateTimeOptions {
    constructor() {
        this.dateLabel = 'Date';
    }
}
class FilterTrueFalseOptions {
}
class FilterNumberBoxOptions {
}
class FilterSelectBoxOptions {
}
var LogicalOperator;
(function (LogicalOperator) {
    LogicalOperator["And"] = "And";
    LogicalOperator["Or"] = "Or";
})(LogicalOperator || (LogicalOperator = {}));
var ConditionOperator;
(function (ConditionOperator) {
    ConditionOperator["None"] = "None";
    ConditionOperator["Contains"] = "Contains";
    ConditionOperator["StartWith"] = "StartWith";
    ConditionOperator["EndWith"] = "EndWith";
    ConditionOperator["Equal"] = "Equal";
    ConditionOperator["NotEqual"] = "NotEqual";
    ConditionOperator["GreaterThan"] = "GreaterThan";
    ConditionOperator["GreaterThanOrEqual"] = "GreaterThanOrEqual";
    ConditionOperator["LessThan"] = "LessThan";
    ConditionOperator["LessThanOrEqual"] = "LessThanOrEqual";
    ConditionOperator["Between"] = "Between";
    ConditionOperator["Exact"] = "Exact";
    ConditionOperator["LastWeek"] = "LastWeek";
    ConditionOperator["LastMonth"] = "LastMonth";
    ConditionOperator["CurrentWeek"] = "CurrentWeek";
    ConditionOperator["CurrentMonth"] = "CurrentMonth";
    ConditionOperator["CurrentYear"] = "CurrentYear";
    ConditionOperator["InRange"] = "InRange";
    ConditionOperator["NotIn"] = "NotIn";
    ConditionOperator["NotContains"] = "NotContains";
    ConditionOperator["ToDay"] = "ToDay";
})(ConditionOperator || (ConditionOperator = {}));
var FilterTypes;
(function (FilterTypes) {
    FilterTypes[FilterTypes["DateTime"] = 1] = "DateTime";
    FilterTypes[FilterTypes["Number"] = 2] = "Number";
    FilterTypes[FilterTypes["SingleSelect"] = 3] = "SingleSelect";
    FilterTypes[FilterTypes["MultiSelect"] = 4] = "MultiSelect";
    FilterTypes[FilterTypes["TextBox"] = 5] = "TextBox";
    FilterTypes[FilterTypes["TrueFalse"] = 6] = "TrueFalse";
    FilterTypes[FilterTypes["ListCheck"] = 7] = "ListCheck";
})(FilterTypes || (FilterTypes = {}));
class NgxApplyFilterResult {
    constructor() {
        this.filters = [];
        this.filtersQueryString = '';
        this.filteredFilters = [];
    }
}

const NGX_FILTERS_CONFIGS = new InjectionToken('NGX_FILTERS_CONFIGS');

class NgxFiltersService {
    constructor(injector, configs, resolver) {
        this.resolver = resolver;
        this.translator = {};
        this.filtersComponent = {};
        this.conditionSource = [];
        this.useJalaliDate = false;
        const defaultConfigs = {
            trueFalseComponent: TrueFalseComponent,
            dateComponent: DateComponent,
            multiSelectBoxComponent: MultiSelectBoxComponent,
            selectBoxComponent: SelectBoxComponent,
            numberBoxComponent: NumberBoxComponent,
            textBoxComponent: TextBoxComponent,
            conditionSelectorComponent: ConditionsSelectorComponent,
            translator: new FilterTranslator(),
        };
        if (!configs) {
            configs = defaultConfigs;
        }
        else {
            configs = Object.assign(defaultConfigs, configs);
        }
        this._configs = configs;
        this.filtersComponent.textBox = this.resolver.resolveComponentFactory(configs.textBoxComponent);
        this.filtersComponent.numberBox = this.resolver
            .resolveComponentFactory(configs.numberBoxComponent);
        this.filtersComponent.date = this.resolver
            .resolveComponentFactory(configs.dateComponent);
        this.filtersComponent.selectBox = this.resolver.resolveComponentFactory(configs.selectBoxComponent);
        this.filtersComponent.multiSelectBox = this.resolver.resolveComponentFactory(configs.multiSelectBoxComponent);
        this.filtersComponent.trueFalse = this.resolver.resolveComponentFactory(configs.trueFalseComponent);
        this.filtersComponent.conditionSelector = this.resolver.resolveComponentFactory(configs.conditionSelectorComponent);
        this.translator = configs.translator;
    }
    getComponentFactory(filterType) {
        let component = null;
        switch (filterType) {
            case FilterTypes.DateTime:
                component = this._configs.dateComponent;
                break;
            //case FilterTypes.ListCheck:
            case FilterTypes.MultiSelect:
                component = this._configs.multiSelectBoxComponent;
                break;
            case FilterTypes.Number:
                component = this._configs.numberBoxComponent;
                break;
            case FilterTypes.SingleSelect:
                component = this._configs.selectBoxComponent;
                break;
            case FilterTypes.TextBox:
                component = this._configs.textBoxComponent;
                break;
            case FilterTypes.TrueFalse:
                component = this._configs.trueFalseComponent;
                break;
            default: {
                component = this._configs.conditionSelectorComponent;
            }
        }
        if (component)
            return this.resolver
                .resolveComponentFactory(component);
        return null;
    }
    checkHasFilter(filter) {
        let hasFilter = (this.noValueConditions.includes(filter.conditionOperator))
            ||
                (filter.type == FilterTypes.MultiSelect ? filter.values && filter.values.length > 0 : !!filter.value);
        if (!hasFilter) {
            if (filter.type === FilterTypes.Number && filter.value == 0) {
                hasFilter = true;
            }
            if (filter.type === FilterTypes.Number && filter.conditionOperator === ConditionOperator.Between && filter.valueTo) {
                filter.value = 0;
                hasFilter = true;
            }
        }
        return (hasFilter);
    }
    getConditionSource() {
        const conditions = [];
        for (let enumMember in ConditionOperator) {
            const condition = ConditionOperator[enumMember];
            const gcplat = this.getCondition(condition, null);
            if (gcplat) {
                conditions.push({
                    key: ConditionOperator[enumMember],
                    label: gcplat.label,
                    types: gcplat.types
                });
            }
        }
        return conditions;
    }
    getDefaultCondition(filterType) {
        switch (filterType) {
            case FilterTypes.MultiSelect:
            case FilterTypes.ListCheck: {
                return ConditionOperator.InRange;
            }
            case FilterTypes.TrueFalse:
            case FilterTypes.SingleSelect:
            case FilterTypes.Number: {
                return ConditionOperator.Equal;
            }
            case FilterTypes.TextBox: {
                return ConditionOperator.Contains;
            }
            case FilterTypes.DateTime: {
                return ConditionOperator.Between;
            }
        }
    }
    getConditionLabel(condition) {
        if (condition) {
            const conditionKey = condition[0].toLowerCase() + condition.substring(1);
            if (this.translator) {
                return this.translator[conditionKey + 'Label'];
            }
            else {
                return condition;
            }
        }
        return "";
    }
    getCondition(condition, filter) {
        condition = condition || filter.conditionOperator;
        const label = this.getConditionLabel(condition);
        switch (condition) {
            case ConditionOperator.Between:
                return { label, types: [FilterTypes.Number, FilterTypes.DateTime], hasValue: true };
            case ConditionOperator.Contains:
                return { label, types: [FilterTypes.TextBox], hasValue: true };
            case ConditionOperator.EndWith:
                return { label, types: [FilterTypes.TextBox], hasValue: true };
            case ConditionOperator.NotContains:
                return { label, types: [FilterTypes.TextBox], hasValue: true };
            case ConditionOperator.Equal:
                return { label, types: [FilterTypes.Number], hasValue: true };
            case ConditionOperator.Exact:
                return { label, types: [FilterTypes.DateTime, FilterTypes.TextBox], hasValue: true };
            case ConditionOperator.GreaterThan:
                return { label, types: [FilterTypes.Number, FilterTypes.DateTime], hasValue: true };
            case ConditionOperator.GreaterThanOrEqual:
                return { label, types: [FilterTypes.Number, FilterTypes.DateTime], hasValue: true };
            case ConditionOperator.LessThan:
                return { label, types: [FilterTypes.Number, FilterTypes.DateTime], hasValue: true };
            case ConditionOperator.LessThanOrEqual:
                return { label, types: [FilterTypes.Number, FilterTypes.DateTime], hasValue: true };
            case ConditionOperator.NotEqual:
                return { label, types: [FilterTypes.Number], hasValue: true };
            case ConditionOperator.StartWith:
                return { label, types: [FilterTypes.TextBox], hasValue: true };
            case ConditionOperator.InRange:
                return { label, types: [FilterTypes.ListCheck], hasValue: true };
            case ConditionOperator.LastMonth:
                return { label, types: [FilterTypes.DateTime], hasValue: false };
            case ConditionOperator.LastWeek:
                return { label, types: [FilterTypes.DateTime], hasValue: false };
            case ConditionOperator.CurrentMonth:
                return { label, types: [FilterTypes.DateTime], hasValue: false };
            case ConditionOperator.CurrentWeek:
                return { label, types: [FilterTypes.DateTime], hasValue: false };
            case ConditionOperator.CurrentYear:
                return { label, types: [FilterTypes.DateTime], hasValue: false };
            case ConditionOperator.ToDay:
                return { label, types: [FilterTypes.DateTime], hasValue: false };
        }
    }
    get noValueConditions() {
        return [
            ConditionOperator.LastWeek,
            ConditionOperator.LastMonth,
            ConditionOperator.CurrentYear,
            ConditionOperator.CurrentWeek,
            ConditionOperator.CurrentMonth,
            ConditionOperator.ToDay
        ];
    }
    getTime(dt) {
        if (!dt) {
            return '';
        }
        const date = new Date(dt);
        const day = date.getDate(); // yields date
        const month = date.getMonth() + 1; // yields month (add one as '.getMonth()' is zero indexed)
        const year = date.getFullYear(); // yields year
        const hour = date.getHours(); // yields hours
        const minute = date.getMinutes(); // yields minutes
        const second = date.getSeconds(); // yields seconds
        // After this construct a string with the above results as below
        return day + '/' + month + '/' + year + " " + hour + ':' + minute + ':' + second;
    }
    setValueForDateHasNoValue(filter) {
        if (filter.type === FilterTypes.DateTime) {
            const date = new Date();
            let fromDate = filter.value;
            let toDate = filter.valueTo;
            switch (filter.conditionOperator) {
                case ConditionOperator.LastWeek:
                    {
                        fromDate = date.setTime(date.getTime() - 6 * 24 * 60 * 60 * 1000);
                        toDate = date.setTime(date.getTime() - (date.getDay() ? date.getDay() : 7) * 24 * 60 * 60 * 1000);
                    }
                    break;
                case ConditionOperator.LastMonth:
                    {
                        fromDate = new Date(date.getFullYear(), date.getMonth() - 1, 1);
                        toDate = new Date(date.getFullYear(), date.getMonth(), 0);
                    }
                    break;
                case ConditionOperator.CurrentWeek:
                    {
                        const first = date.getDate() - date.getDay(); // First day is the day of the month - the day of the week
                        const last = first + 6; // last day is the first day + 6
                        fromDate = new Date(date.setDate(first)).toUTCString();
                        toDate = new Date(date.setDate(last)).toUTCString();
                    }
                    break;
                case ConditionOperator.CurrentMonth:
                    {
                        const y = date.getFullYear(), m = date.getMonth();
                        fromDate = new Date(y, m, 1);
                        toDate = new Date(y, m + 1, 0);
                    }
                    break;
                case ConditionOperator.CurrentYear:
                    {
                        fromDate = new Date(date.getFullYear(), 0, 1);
                        toDate = new Date(date.getFullYear() + 1, 0, 0);
                    }
                    break;
                case ConditionOperator.ToDay:
                    {
                        fromDate = date.setHours(0, 0, 0, 0);
                        const end = new Date();
                        end.setHours(23, 59, 59, 999);
                        toDate = end;
                    }
                    break;
            }
            filter.value = fromDate;
            filter.valueTo = toDate;
        }
    }
    clearFilter(filter) {
        filter.hasFilter = false;
        if (filter.type === FilterTypes.DateTime) {
            filter.conditionOperator = this.getDefaultCondition(filter.type);
        }
        switch (filter.type) {
            case FilterTypes.DateTime:
            case FilterTypes.Number:
            case FilterTypes.TextBox:
            case FilterTypes.SingleSelect:
            case FilterTypes.TrueFalse:
                {
                    filter.value = null;
                    filter.valueTo = null;
                }
                break;
            case FilterTypes.MultiSelect:
            case FilterTypes.ListCheck: {
                filter.values = null;
            }
        }
    }
    getDisplayLabel(filter, hasConditionName = true) {
        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
        let condition = this.getCondition(null, filter);
        if (!condition) {
            return ' ';
        }
        filter.conditionName = condition.label;
        if (this.noValueConditions.includes(filter.conditionOperator)) {
            return filter.conditionName;
        }
        let conditionName = hasConditionName ? filter.conditionName : '';
        if (!condition.hasValue) {
            return conditionName;
        }
        if (filter.type == FilterTypes.MultiSelect) {
            if (!filter.values) {
                return '';
            }
            return filter.values.map(z => { var _a, _b; return z[(_b = (_a = filter.options) === null || _a === void 0 ? void 0 : _a.selectBoxOptions) === null || _b === void 0 ? void 0 : _b.displayMember]; }).join(' ,');
        }
        else if (filter.type == FilterTypes.SingleSelect) {
            if (!filter.value) {
                return '';
            }
            return filter.value[(_b = (_a = filter.options) === null || _a === void 0 ? void 0 : _a.selectBoxOptions) === null || _b === void 0 ? void 0 : _b.displayMember];
        }
        else {
            if (!filter.value) {
                return '';
            }
            if (filter.type == FilterTypes.TrueFalse) {
                if (filter.value == true) {
                    filter.valueName = ((_d = (_c = filter === null || filter === void 0 ? void 0 : filter.options) === null || _c === void 0 ? void 0 : _c.trueFalseOptions) === null || _d === void 0 ? void 0 : _d.trueLabel) ? filter.options.trueFalseOptions.trueLabel : 'Yes';
                }
                else {
                    filter.valueName = ((_f = (_e = filter === null || filter === void 0 ? void 0 : filter.options) === null || _e === void 0 ? void 0 : _e.trueFalseOptions) === null || _f === void 0 ? void 0 : _f.falseLabel) ? filter.options.trueFalseOptions.falseLabel : 'No';
                }
                return `${filter.valueName}`;
            }
            if (filter.type == FilterTypes.DateTime) {
                if (!this.useJalaliDate) {
                    filter.valueName = moment(filter.value).format('YYYY/MM/DD');
                }
                else {
                    filter.valueName = moment(filter.value).format('jYYYY/jMM/jDD');
                }
                if (filter.conditionOperator == ConditionOperator.Between) {
                    conditionName = '';
                    const fromLabel = (this.translator.fromLabel) ? this.translator.fromLabel : 'from';
                    const toLabel = ((_g = this.translator) === null || _g === void 0 ? void 0 : _g.toLabel) ? this.translator.toLabel : 'to';
                    if (filter.valueTo) {
                        if (!this.useJalaliDate) {
                            filter.valueToName = moment(filter.valueTo).format('YYYY/MM/DD');
                        }
                        else {
                            filter.valueToName = moment(filter.valueTo).format('jYYYY/jMM/jDD');
                        }
                    }
                    else {
                        filter.valueToName = '...';
                    }
                    // filter.valueName = moment(filter.value).format('jYYYY/jMM/jDD');
                    return `${conditionName} ${fromLabel} ${filter.valueName} ${toLabel} ${filter.valueToName}`;
                }
                return `${conditionName} ${filter.valueName}`;
            }
            else {
                let prefix = (_j = (_h = filter.options) === null || _h === void 0 ? void 0 : _h.numberBoxOptions) === null || _j === void 0 ? void 0 : _j.prefixTextForHint;
                prefix = prefix ? prefix : '';
                if (!prefix && ((_l = (_k = filter.options) === null || _k === void 0 ? void 0 : _k.numberBoxOptions) === null || _l === void 0 ? void 0 : _l.isMoney)) {
                    prefix = '$';
                }
                if (((_o = (_m = filter.options) === null || _m === void 0 ? void 0 : _m.numberBoxOptions) === null || _o === void 0 ? void 0 : _o.isMoney) && filter.type == FilterTypes.Number) {
                    filter.valueName = this._money(filter.value);
                    filter.valueTo ? filter.valueToName = this._money(filter.valueTo) : '...';
                }
                else {
                    filter.valueName = filter.value;
                    filter.valueToName = filter.valueTo;
                }
                if (filter.conditionOperator == ConditionOperator.Between) {
                    conditionName = '';
                    const fromLabel = ((_p = this.translator) === null || _p === void 0 ? void 0 : _p.fromLabel) ? this.translator.fromLabel : 'from';
                    const toLabel = ((_q = this.translator) === null || _q === void 0 ? void 0 : _q.toLabel) ? this.translator.toLabel : 'to';
                    return `${conditionName} ${fromLabel} ${filter.valueName}${prefix} ${toLabel} ${filter.valueToName ? filter.valueToName : '...'}${prefix}`;
                }
                else {
                    return `${conditionName} ${filter.valueName}${prefix}`;
                }
            }
        }
    }
    toQueryString(queryObject) {
        const parts = [];
        Object.keys(queryObject).forEach((property) => {
            const value = queryObject[property];
            if (value !== undefined && value !== undefined) {
                parts.push(encodeURIComponent(property) + '=' + encodeURIComponent(value));
            }
        });
        return parts.join('&');
    }
    getFiltersInQueryString(filterBy) {
        let obj = '';
        filterBy.forEach((f, i) => {
            Object.keys(f).forEach((prop) => {
                const value = filterBy[i][prop];
                if (Array.isArray(value)) {
                    const values = value;
                    let bb = 0;
                    values.forEach((b) => {
                        if (b !== undefined && b !== null) {
                            obj =
                                obj +
                                    '&' +
                                    encodeURIComponent('filters') +
                                    `[${i}]` +
                                    '.' +
                                    `${encodeURIComponent(prop)}[${bb}]` +
                                    '=' +
                                    encodeURIComponent(b);
                            bb++;
                        }
                    });
                }
                else if (value !== undefined && value !== null) {
                    obj =
                        obj +
                            '&' +
                            encodeURIComponent('filters') +
                            `[${i}]` +
                            '.' +
                            encodeURIComponent(prop) +
                            '=' +
                            encodeURIComponent(value);
                }
            });
        });
        return obj;
    }
    getPageFilterInQueryString(queryObject) {
        let obj;
        if (queryObject && queryObject.filters) {
            const filterBy = queryObject.filters.slice();
            const query = new PageFilter();
            Object.keys(queryObject).forEach((o) => {
                // copy(slice) from queryObject
                query[o] = queryObject[o];
            });
            delete query.filters;
            obj = this.toQueryString(query);
            obj += this.getFiltersInQueryString(filterBy);
        }
        return obj;
    }
    _numberWithCommas(x) {
        var _a;
        return (_a = x === null || x === void 0 ? void 0 : x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')) !== null && _a !== void 0 ? _a : '';
    }
    _money(value) {
        if (value != null) {
            return this._numberWithCommas(value);
        }
        return '0';
    }
}
NgxFiltersService.ɵprov = ɵɵdefineInjectable({ factory: function NgxFiltersService_Factory() { return new NgxFiltersService(ɵɵinject(INJECTOR), ɵɵinject(NGX_FILTERS_CONFIGS, 8), ɵɵinject(ComponentFactoryResolver)); }, token: NgxFiltersService, providedIn: "root" });
NgxFiltersService.decorators = [
    { type: Injectable, args: [{
                providedIn: 'root'
            },] }
];
NgxFiltersService.ctorParameters = () => [
    { type: Injector },
    { type: NgxFilterConfig, decorators: [{ type: Optional }, { type: Inject, args: [NGX_FILTERS_CONFIGS,] }] },
    { type: ComponentFactoryResolver }
];

class NgxFiltersComponent {
    constructor(injector, filtersService, el) {
        this.filtersService = filtersService;
        this.el = el;
        this.filters = [];
        this.loading = true;
        this.filterCount = 0;
        this.filterCountChange = new EventEmitter();
        this.clear = new EventEmitter();
        this.filtersService.conditionSource = this.filtersService.getConditionSource();
    }
    ngOnInit() {
    }
    get filterTypes() {
        return FilterTypes;
    }
    onClear(filter) {
        this.filtersService.clearFilter(filter);
        this.filterCount -= 1;
        this.filterCountChange.emit(this.filterCount);
        this.clear.emit();
    }
    ngAfterViewInit() {
        this._setClassToDialogContainer(this.el, 'ngx-mat-cdk-no-border-radius', 'mat-dialog-container');
        this._setClassToDialogContainer(this.el, 'ngx-mat-cdk-filters-max-height', 'mat-dialog-content');
        setTimeout(() => {
            this.loading = false;
        }, 500);
    }
    _setClassToDialogContainer(el, className, targetSelect) {
        var _a, _b;
        if ((_a = el === null || el === void 0 ? void 0 : el.nativeElement) === null || _a === void 0 ? void 0 : _a.parentElement) {
            const cls = (_b = el.nativeElement.parentElement.closest(targetSelect)) === null || _b === void 0 ? void 0 : _b.classList;
            if (cls && !cls.contains(className)) {
                cls.add(className);
            }
        }
    }
}
NgxFiltersComponent.decorators = [
    { type: Component, args: [{
                selector: 'ngx-filters',
                template: "<ng-container *ngFor=\"let filter of filters\">\n  <ng-container *ngIf=\"!filter.hidden\">\n    <ngx-conditions-selector-filter\n      *ngIf=\"\n                      (filtersService.conditionSource | conditionFilter:filter).length > 0\n                       \"\n      [filter]=\"filter\"\n      [conditions]=\"filtersService.conditionSource | conditionFilter:filter\">\n    </ngx-conditions-selector-filter>\n\n    <ng-container [ngSwitch]=\"filter.type\">\n      <ng-container *ngSwitchCase=\"filterTypes.DateTime\">\n        <ngx-date-filter [filter]=\"filter\"></ngx-date-filter>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"filterTypes.TextBox\">\n        <ngx-text-filter [filter]=\"filter\"></ngx-text-filter>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"filterTypes.Number\">\n        <ngx-number-filter [filter]=\"filter\"></ngx-number-filter>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"filterTypes.SingleSelect\">\n        <ngx-select-filter [filter]=\"filter\"></ngx-select-filter>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"filterTypes.MultiSelect\">\n        <ngx-multi-select-filter [filter]=\"filter\"></ngx-multi-select-filter>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"filterTypes.TrueFalse\">\n        <ngx-true-false-filter [filter]=\"filter\"></ngx-true-false-filter>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</ng-container>\n\n<!--<ng-template #textBoxRef>-->\n\n<!--</ng-template>-->\n<!--<div class=\"ngx-mat-filters-wrapper\">-->\n<!--  <div [hidden]=\"loading\">-->\n<!--    <div class=\"ngx-mat-filter-items\" [class.xs]=\"isXs\">-->\n\n<!--      <ng-container *ngIf=\"filters && filters.length > 0\">-->\n<!--&lt;!&ndash;        <mat-accordion>&ndash;&gt;-->\n<!--          <div *ngFor=\"let filter of filters\" class=\"ngx-mat-filter-item\">-->\n<!--            <ng-container *ngIf=\"!filter.hidden\">-->\n<!--              <ng-container *ngIf=\"filter.type == filterTypes.TrueFalse\">-->\n<!--                <div-->\n<!--                  (click)=\"$event.stopPropagation();filter.value = !filter.value\"-->\n<!--                  class=\"filter-true-false ngx-mat-filters-header  mat-expansion-panel-header\"-->\n<!--                  [style.padding]=\"isXs? 0: ''\">-->\n<!--                  <div class=\"filter-header\">-->\n\n<!--                    <button *ngIf=\"filter.hasFilter\" [color]=\"matColor\"-->\n<!--                            (click)=\"$event.stopPropagation();filter.value=null;filter.hasFilter=false;clear.emit()\"-->\n<!--                            type=\"button\"-->\n<!--                            mat-icon-button>-->\n<!--                      &lt;!&ndash;                      <i class=\"fal fa-eraser\"></i>&ndash;&gt;-->\n<!--                      <ng-container [ngTemplateOutlet]=\"clearIconRef\">-->\n\n<!--                      </ng-container>-->\n<!--                      &lt;!&ndash;                      <ng-container *ngIf=\"filter.hasFilter\" [ngTemplateOutlet]=\"filterIconRef\">&ndash;&gt;-->\n\n<!--                      &lt;!&ndash;                      </ng-container>&ndash;&gt;-->\n\n<!--                      &lt;!&ndash;                      <mat-icon>cleaning_services</mat-icon>&ndash;&gt;-->\n<!--                    </button>-->\n<!--                    &lt;!&ndash;                    <i class=\"fal fa-filter text-success\"&ndash;&gt;-->\n<!--                    &lt;!&ndash;                       *ngIf=\"filter | hasFilter\"&ndash;&gt;-->\n<!--                    &lt;!&ndash;                    ></i>&ndash;&gt;-->\n<!--                    &lt;!&ndash;                    <mat-icon class=\"filter-text-success\" *ngIf=\"filter.hasFilter\">filter_alt</mat-icon>&ndash;&gt;-->\n<!--                    <div class=\"ngx-mat-filter-item-display-label\">-->\n<!--                      {{filter?.label}}-->\n<!--                    </div>-->\n<!--                  </div>-->\n\n<!--                  <div>-->\n<!--                    <mat-true-false-filter-->\n<!--                      [filter]=\"filter\"></mat-true-false-filter>-->\n<!--                  </div>-->\n<!--                </div>-->\n<!--              </ng-container>-->\n<!--              <ng-container *ngIf=\"filter.type != filterTypes.TrueFalse\">-->\n\n<!--&lt;!&ndash;                <mat-expansion-panel [style.width]=\"'100%'\" [expanded]=\"false\">&ndash;&gt;-->\n<!--&lt;!&ndash;                  <mat-expansion-panel-header class=\"ngx-mat-filters-header\" [style.padding]=\"isXs? 0: ''\">&ndash;&gt;-->\n<!--                    <div class=\"filter-header\">-->\n<!--                      <button *ngIf=\"filter.hasFilter\" [color]=\"matColor\"-->\n<!--                              (click)=\"$event.stopPropagation();onClear(filter)\"-->\n<!--                              type=\"button\"-->\n<!--                              mat-icon-button>-->\n<!--                        &lt;!&ndash;                        <i class=\"fal fa-eraser\"></i>&ndash;&gt;-->\n<!--                        <ng-container [ngTemplateOutlet]=\"clearIconRef\">-->\n\n<!--                        </ng-container>-->\n<!--                        &lt;!&ndash;                        <ng-container *ngIf=\"filter.hasFilter\" [ngTemplateOutlet]=\"filterIconRef\">&ndash;&gt;-->\n\n<!--                        &lt;!&ndash;                        </ng-container>&ndash;&gt;-->\n\n<!--                      </button>-->\n<!--                      &lt;!&ndash;                      <i class=\"fal fa-filter text-success\"&ndash;&gt;-->\n<!--                      &lt;!&ndash;                         *ngIf=\"filter | hasFilter\"></i>&ndash;&gt;-->\n\n<!--                      &lt;!&ndash;                      <mat-icon class=\"filter-text-success\" *ngIf=\"filter.hasFilter\">filter_alt</mat-icon>&ndash;&gt;-->\n\n<!--                      <div class=\"ngx-mat-filter-item-display-label\">-->\n\n<!--                        {{filter?.label}}-->\n<!--                        &lt;!&ndash;                        {{filtersService.getDisplayLabel(filter)}}&ndash;&gt;-->\n<!--                      </div>-->\n<!--                    </div>-->\n<!--&lt;!&ndash;                  </mat-expansion-panel-header>&ndash;&gt;-->\n<!--                  <ng-container-->\n<!--                    *ngIf=\"!filter.hiddenCondition\"-->\n<!--                  >-->\n<!--                    <ngx-filter-mat-conditions-selector-->\n<!--                      *ngIf=\"-->\n\n<!--                  (filtersService.conditionSource | conditionFilter:filter.type).length > 0-->\n<!--                   \"-->\n<!--                      [filter]=\"filter\"-->\n<!--                      [conditions]=\"filtersService.conditionSource | conditionFilter:filter.type\">-->\n<!--                    </ngx-filter-mat-conditions-selector>-->\n\n<!--                  </ng-container>-->\n<!--                  <ng-container [ngSwitch]=\"filter.type\">-->\n<!--                    <ng-container *ngSwitchCase=\"filterTypes.DateTime\">-->\n<!--                      <ng-container *ngIf=\"filtersService.useJalaliDate\">-->\n<!--&lt;!&ndash;                        <date-time-jalali-filter [filter]=\"filter\"></date-time-jalali-filter>&ndash;&gt;-->\n<!--                      </ng-container>-->\n<!--                      <ng-container *ngIf=\"!filtersService.useJalaliDate\">-->\n<!--&lt;!&ndash;                        <mat-date-time-filter [filter]=\"filter\"></mat-date-time-filter>&ndash;&gt;-->\n<!--                      </ng-container>-->\n\n<!--                    </ng-container>-->\n<!--                    <ng-container *ngSwitchCase=\"filterTypes.Number\">-->\n<!--&lt;!&ndash;                      <mat-number-box-filter [filter]=\"filter\"></mat-number-box-filter>&ndash;&gt;-->\n<!--                    </ng-container>-->\n<!--                    <ng-container *ngSwitchCase=\"filterTypes.MultiSelect\">-->\n<!--&lt;!&ndash;                      <mat-select-box-filter [filter]=\"filter\"></mat-select-box-filter>&ndash;&gt;-->\n<!--                    </ng-container>-->\n<!--                    <ng-container *ngSwitchCase=\"filterTypes.SingleSelect\">-->\n<!--&lt;!&ndash;                      <mat-select-box-filter [filter]=\"filter\"></mat-select-box-filter>&ndash;&gt;-->\n<!--                    </ng-container>-->\n<!--                    <ng-container *ngSwitchCase=\"filterTypes.TextBox\">-->\n<!--&lt;!&ndash;                      <mat-text-box-filter [filter]=\"filter\"></mat-text-box-filter>&ndash;&gt;-->\n<!--                    </ng-container>-->\n<!--                  </ng-container>-->\n\n<!--&lt;!&ndash;                </mat-expansion-panel>&ndash;&gt;-->\n<!--              </ng-container>-->\n\n<!--            </ng-container>-->\n\n<!--          </div>-->\n<!--&lt;!&ndash;        </mat-accordion>&ndash;&gt;-->\n\n\n<!--      </ng-container>-->\n\n<!--    </div>-->\n<!--    <div class=\"ngx-mat-filters-actions\"></div>-->\n<!--  </div>-->\n<!--  <div *ngIf=\"loading\" class=\"filter-spinner-container\">-->\n<!--&lt;!&ndash;    <mat-spinner [color]=\"matColor\" [strokeWidth]=\"4\" [diameter]=\"55\"></mat-spinner>&ndash;&gt;-->\n<!--  </div>-->\n\n<!--</div>-->\n\n<!--<ng-template #clearIconRef>-->\n<!--  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fi