ngx-mat-cdk/esm2015/lib/ngx-mat-filters/filters/filters.component.js

Extra Components for Angular Material including Filters,Drag Drop File, MatSelect Mobile Version

import { Component, ElementRef, EventEmitter, Injector, Input, Output } from '@angular/core';
import { FiltersService } from './filters.service';
import { FilterTypes } from './filter-components/filters-base';
import { MediaTracker } from "../../shared/media-tracker";
import { NgxMatCdkUtilityService } from "../../shared/services/ngx-mat-cdk-utility.service";
export class FiltersComponent extends MediaTracker {
    constructor(injector, filtersService, el, utilityService) {
        super(injector);
        this.filtersService = filtersService;
        this.el = el;
        this.utilityService = utilityService;
        this.filters = [];
        this.loading = true;
        this.filterCount = 0;
        this.filterCountChange = new EventEmitter();
        this.clear = new EventEmitter();
        this.matColor = 'warn';
        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.utilityService.setClassToDialogContainer(this.el, 'ngx-mat-cdk-no-border-radius', 'mat-dialog-container');
        this.utilityService.setClassToDialogContainer(this.el, 'ngx-mat-cdk-filters-max-height', 'mat-dialog-content');
        setTimeout(() => {
            this.loading = false;
        }, 500);
    }
}
FiltersComponent.decorators = [
    { type: Component, args: [{
                selector: 'ngx-mat-filters-list',
                template: "<div class=\"ngx-mat-filters-wrapper\">\r\n  <div [hidden]=\"loading\">\r\n    <div class=\"ngx-mat-filter-items\" [class.xs]=\"isXs\">\r\n\r\n      <ng-container *ngIf=\"filters && filters.length > 0\">\r\n        <mat-accordion>\r\n          <div *ngFor=\"let filter of filters\" class=\"ngx-mat-filter-item\">\r\n            <ng-container *ngIf=\"!filter.hidden\">\r\n              <ng-container *ngIf=\"filter.type == filterTypes.TrueFalse\">\r\n                <div\r\n                  (click)=\"$event.stopPropagation();filter.value = !filter.value\"\r\n                  class=\"filter-true-false ngx-mat-filters-header  mat-expansion-panel-header\"\r\n                  [style.padding]=\"isXs? 0: ''\">\r\n                  <div class=\"filter-header\">\r\n\r\n                    <button *ngIf=\"filter.hasFilter\" [color]=\"matColor\"\r\n                            (click)=\"$event.stopPropagation();filter.value=null;filter.hasFilter=false;clear.emit()\"\r\n                            type=\"button\"\r\n                            mat-icon-button>\r\n                      <!--                      <i class=\"fal fa-eraser\"></i>-->\r\n                      <ng-container [ngTemplateOutlet]=\"clearIconRef\">\r\n\r\n                      </ng-container>\r\n                      <!--                      <ng-container *ngIf=\"filter.hasFilter\" [ngTemplateOutlet]=\"filterIconRef\">-->\r\n\r\n                      <!--                      </ng-container>-->\r\n\r\n                      <!--                      <mat-icon>cleaning_services</mat-icon>-->\r\n                    </button>\r\n                    <!--                    <i class=\"fal fa-filter text-success\"-->\r\n                    <!--                       *ngIf=\"filter | hasFilter\"-->\r\n                    <!--                    ></i>-->\r\n                    <!--                    <mat-icon class=\"filter-text-success\" *ngIf=\"filter.hasFilter\">filter_alt</mat-icon>-->\r\n                    <div class=\"ngx-mat-filter-item-display-label\">\r\n                      {{filter?.label}}\r\n                    </div>\r\n                  </div>\r\n\r\n                  <div>\r\n                    <true-false-filter\r\n                      [filter]=\"filter\"></true-false-filter>\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"filter.type != filterTypes.TrueFalse\">\r\n\r\n                <mat-expansion-panel [style.width]=\"'100%'\" [expanded]=\"false\">\r\n                  <mat-expansion-panel-header class=\"ngx-mat-filters-header\" [style.padding]=\"isXs? 0: ''\">\r\n                    <div class=\"filter-header\">\r\n                      <button *ngIf=\"filter.hasFilter\" [color]=\"matColor\"\r\n                              (click)=\"$event.stopPropagation();onClear(filter)\"\r\n                              type=\"button\"\r\n                              mat-icon-button>\r\n                        <!--                        <i class=\"fal fa-eraser\"></i>-->\r\n                        <ng-container [ngTemplateOutlet]=\"clearIconRef\">\r\n\r\n                        </ng-container>\r\n                        <!--                        <ng-container *ngIf=\"filter.hasFilter\" [ngTemplateOutlet]=\"filterIconRef\">-->\r\n\r\n                        <!--                        </ng-container>-->\r\n\r\n                      </button>\r\n                      <!--                      <i class=\"fal fa-filter text-success\"-->\r\n                      <!--                         *ngIf=\"filter | hasFilter\"></i>-->\r\n\r\n                      <!--                      <mat-icon class=\"filter-text-success\" *ngIf=\"filter.hasFilter\">filter_alt</mat-icon>-->\r\n\r\n                      <div class=\"ngx-mat-filter-item-display-label\">\r\n\r\n                        {{filter?.label}}\r\n                        <!--                        {{filtersService.getDisplayLabel(filter)}}-->\r\n                      </div>\r\n                    </div>\r\n                  </mat-expansion-panel-header>\r\n                  <ng-container\r\n                    *ngIf=\"!filter.hiddenCondition\"\r\n                  >\r\n                    <conditions-selector\r\n                      *ngIf=\"\r\n\r\n                  (filtersService.conditionSource | conditionFilter:filter.type).length > 0\r\n                   \"\r\n                      [filter]=\"filter\"\r\n                      [conditions]=\"filtersService.conditionSource | conditionFilter:filter.type\">\r\n                    </conditions-selector>\r\n\r\n                  </ng-container>\r\n                  <ng-container [ngSwitch]=\"filter.type\">\r\n                    <ng-container *ngSwitchCase=\"filterTypes.DateTime\">\r\n                      <ng-container *ngIf=\"filtersService.useJalaliDate\">\r\n                        <date-time-jalali-filter [filter]=\"filter\"></date-time-jalali-filter>\r\n                      </ng-container>\r\n                      <ng-container *ngIf=\"!filtersService.useJalaliDate\">\r\n                        <date-time-filter [filter]=\"filter\"></date-time-filter>\r\n                      </ng-container>\r\n\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"filterTypes.Number\">\r\n                      <number-box-filter [filter]=\"filter\"></number-box-filter>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"filterTypes.MultiSelect\">\r\n                      <select-box-filter [filter]=\"filter\"></select-box-filter>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"filterTypes.SingleSelect\">\r\n                      <select-box-filter [filter]=\"filter\"></select-box-filter>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"filterTypes.TextBox\">\r\n                      <text-box-filter [filter]=\"filter\"></text-box-filter>\r\n                    </ng-container>\r\n                  </ng-container>\r\n\r\n                </mat-expansion-panel>\r\n              </ng-container>\r\n\r\n            </ng-container>\r\n\r\n          </div>\r\n        </mat-accordion>\r\n\r\n\r\n      </ng-container>\r\n\r\n    </div>\r\n    <div class=\"ngx-mat-filters-actions\"></div>\r\n  </div>\r\n  <div *ngIf=\"loading\" class=\"filter-spinner-container\">\r\n    <mat-spinner [color]=\"matColor\" [strokeWidth]=\"4\" [diameter]=\"55\"></mat-spinner>\r\n  </div>\r\n\r\n</div>\r\n\r\n<ng-template #clearIconRef>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-eraser-fill\"\r\n       viewBox=\"0 0 16 16\">\r\n    <path\r\n      d=\"M8.086 2.207a2 2 0 0 1 2.828 0l3.879 3.879a2 2 0 0 1 0 2.828l-5.5 5.5A2 2 0 0 1 7.879 15H5.12a2 2 0 0 1-1.414-.586l-2.5-2.5a2 2 0 0 1 0-2.828l6.879-6.879zm.66 11.34L3.453 8.254 1.914 9.793a1 1 0 0 0 0 1.414l2.5 2.5a1 1 0 0 0 .707.293H7.88a1 1 0 0 0 .707-.293l.16-.16z\"/>\r\n  </svg>\r\n</ng-template>\r\n<ng-template #filterIconRef>\r\n  <svg class=\"filter-text-success\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\"\r\n       viewBox=\"0 0 16 16\">\r\n    <path\r\n      d=\"M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2z\"/>\r\n  </svg>\r\n</ng-template>\r\n",
                exportAs: 'charisFilter',
                styles: [".ngx-mat-filters-wrapper{min-height:100px;padding:20px 2px;position:relative}.ngx-mat-filter-item{display:flex;grid-gap:10px;grid-template-columns:120px auto;max-width:550px;position:relative}.ngx-mat-filter-item-display-label{font-size:1.1rem;margin-right:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ngx-mat-filters-wrapper .mat-expansion-panel-header{max-width:100%;padding:0 5px!important}.ngx-mat-filters-wrapper mat-form-field{max-width:100%}.ngx-mat-filter-items.xs .mat-expansion-panel-body{padding:0!important}ngx-mat-filters-list mat-form-field{flex:1}ngx-mat-filters-list .mat-form-field-wrapper{margin:0;padding:0}ngx-mat-filters-list .mat-expansion-panel{width:100%}ngx-mat-filters-list .filter-true-false,ngx-mat-filters-list .mat-expansion-panel{border-bottom:1px dashed #bdbdbd;box-shadow:none!important}.filters-component-wrapper{display:flex;flex-wrap:wrap;grid-gap:8px;width:100%}@media (max-width:400px){.ngx-mat-filter-item{grid-gap:0;grid-template-columns:auto}}.filter-true-false{align-items:center;display:flex;justify-content:space-between;width:100%}.ngx-mat-filters-header{height:42px!important}.filters-component-true-false-wrapper{display:flex;justify-content:flex-end;margin-left:8px}.filter-header{align-items:center;display:flex;width:100%}.filter-spinner,.filter-spinner-container{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.filter-spinner{z-index:2}.filter-text-success{color:#689f38;height:12px;left:1px;position:absolute;top:15px}"]
            },] }
];
FiltersComponent.ctorParameters = () => [
    { type: Injector },
    { type: FiltersService },
    { type: ElementRef },
    { type: NgxMatCdkUtilityService }
];
FiltersComponent.propDecorators = {
    filters: [{ type: Input }],
    filterCount: [{ type: Input }],
    filterCountChange: [{ type: Output }],
    clear: [{ type: Output }],
    matColor: [{ type: Input }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmlsdGVycy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiQzovVXNlcnMvQWxpcmV6YSBNb2hhbW1hZGkvc291cmNlL3JlcG9zL015TGlicmFyeS9Bbmd1bGFyLkxpYnJhcnkvbGlicy9wcm9qZWN0cy9uZ3gtbWF0LWNkay9zcmMvIiwic291cmNlcyI6WyJsaWIvbmd4LW1hdC1maWx0ZXJzL2ZpbHRlcnMvZmlsdGVycy5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUVMLFNBQVMsRUFDVCxVQUFVLEVBQ1YsWUFBWSxFQUNaLFFBQVEsRUFDUixLQUFLLEVBRUwsTUFBTSxFQUVQLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBQyxjQUFjLEVBQUMsTUFBTSxtQkFBbUIsQ0FBQztBQUNqRCxPQUFPLEVBQVMsV0FBVyxFQUFDLE1BQU0sa0NBQWtDLENBQUM7QUFDckUsT0FBTyxFQUFDLFlBQVksRUFBQyxNQUFNLDRCQUE0QixDQUFDO0FBQ3hELE9BQU8sRUFBQyx1QkFBdUIsRUFBQyxNQUFNLG1EQUFtRCxDQUFDO0FBVTFGLE1BQU0sT0FBTyxnQkFBaUIsU0FBUSxZQUFZO0lBUWhELFlBQ0UsUUFBa0IsRUFDWCxjQUE4QixFQUM3QixFQUEyQixFQUMzQixjQUF1QztRQUUvQyxLQUFLLENBQUMsUUFBUSxDQUFDLENBQUM7UUFKVCxtQkFBYyxHQUFkLGNBQWMsQ0FBZ0I7UUFDN0IsT0FBRSxHQUFGLEVBQUUsQ0FBeUI7UUFDM0IsbUJBQWMsR0FBZCxjQUFjLENBQXlCO1FBWHhDLFlBQU8sR0FBYSxFQUFFLENBQUM7UUFDaEMsWUFBTyxHQUFHLElBQUksQ0FBQztRQUNOLGdCQUFXLEdBQUcsQ0FBQyxDQUFDO1FBQ2Ysc0JBQWlCLEdBQUcsSUFBSSxZQUFZLEVBQVUsQ0FBQztRQUMvQyxVQUFLLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUM1QixhQUFRLEdBQWlCLE1BQU0sQ0FBQztRQVN2QyxJQUFJLENBQUMsY0FBYyxDQUFDLGVBQWUsR0FBRyxJQUFJLENBQUMsY0FBYyxDQUFDLGtCQUFrQixFQUFFLENBQUM7SUFDakYsQ0FBQztJQUVELFFBQVE7SUFDUixDQUFDO0lBRUQsSUFBSSxXQUFXO1FBQ2IsT0FBTyxXQUFXLENBQUM7SUFDckIsQ0FBQztJQUVELE9BQU8sQ0FBQyxNQUFjO1FBQ3BCLElBQUksQ0FBQyxjQUFjLENBQUMsV0FBVyxDQUFDLE1BQU0sQ0FBQyxDQUFDO1FBQ3hDLElBQUksQ0FBQyxXQUFXLElBQUksQ0FBQyxDQUFDO1FBQ3RCLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO1FBQzlDLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDcEIsQ0FBQztJQUdELGVBQWU7UUFFYixJQUFJLENBQUMsY0FBYyxDQUFDLHlCQUF5QixDQUFDLElBQUksQ0FBQyxFQUFFLEVBQUUsOEJBQThCLEVBQUUsc0JBQXNCLENBQUMsQ0FBQztRQUMvRyxJQUFJLENBQUMsY0FBYyxDQUFDLHlCQUF5QixDQUFDLElBQUksQ0FBQyxFQUFFLEVBQUUsZ0NBQWdDLEVBQUUsb0JBQW9CLENBQUMsQ0FBQztRQUUvRyxVQUFVLENBQUMsR0FBRyxFQUFFO1lBQ2QsSUFBSSxDQUFDLE9BQU8sR0FBRyxLQUFLLENBQUM7UUFDdkIsQ0FBQyxFQUFFLEdBQUcsQ0FBQyxDQUFDO0lBQ1YsQ0FBQzs7O1lBaERGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsc0JBQXNCO2dCQUNoQyxrM09BQXVDO2dCQUV2QyxRQUFRLEVBQUUsY0FBYzs7YUFFekI7OztZQWxCQyxRQUFRO1lBTUYsY0FBYztZQVJwQixVQUFVO1lBV0osdUJBQXVCOzs7c0JBVzVCLEtBQUs7MEJBRUwsS0FBSztnQ0FDTCxNQUFNO29CQUNOLE1BQU07dUJBQ04sS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XHJcbiAgQWZ0ZXJWaWV3SW5pdCxcclxuICBDb21wb25lbnQsXHJcbiAgRWxlbWVudFJlZixcclxuICBFdmVudEVtaXR0ZXIsXHJcbiAgSW5qZWN0b3IsXHJcbiAgSW5wdXQsXHJcbiAgT25Jbml0LFxyXG4gIE91dHB1dCxcclxuICBWaWV3RW5jYXBzdWxhdGlvblxyXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQge0ZpbHRlcnNTZXJ2aWNlfSBmcm9tICcuL2ZpbHRlcnMuc2VydmljZSc7XHJcbmltcG9ydCB7RmlsdGVyLCBGaWx0ZXJUeXBlc30gZnJvbSAnLi9maWx0ZXItY29tcG9uZW50cy9maWx0ZXJzLWJhc2UnO1xyXG5pbXBvcnQge01lZGlhVHJhY2tlcn0gZnJvbSBcIi4uLy4uL3NoYXJlZC9tZWRpYS10cmFja2VyXCI7XHJcbmltcG9ydCB7Tmd4TWF0Q2RrVXRpbGl0eVNlcnZpY2V9IGZyb20gXCIuLi8uLi9zaGFyZWQvc2VydmljZXMvbmd4LW1hdC1jZGstdXRpbGl0eS5zZXJ2aWNlXCI7XHJcbmltcG9ydCB7VGhlbWVQYWxldHRlfSBmcm9tIFwiQGFuZ3VsYXIvbWF0ZXJpYWwvY29yZS9jb21tb24tYmVoYXZpb3JzL2NvbG9yXCI7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ25neC1tYXQtZmlsdGVycy1saXN0JyxcclxuICB0ZW1wbGF0ZVVybDogJy4vZmlsdGVycy5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vZmlsdGVycy5jb21wb25lbnQuc2NzcyddLFxyXG4gIGV4cG9ydEFzOiAnY2hhcmlzRmlsdGVyJ1xyXG5cclxufSlcclxuZXhwb3J0IGNsYXNzIEZpbHRlcnNDb21wb25lbnQgZXh0ZW5kcyBNZWRpYVRyYWNrZXIgaW1wbGVtZW50cyBPbkluaXQsIEFmdGVyVmlld0luaXQge1xyXG4gIEBJbnB1dCgpIGZpbHRlcnM6IEZpbHRlcltdID0gW107XHJcbiAgbG9hZGluZyA9IHRydWU7XHJcbiAgQElucHV0KCkgZmlsdGVyQ291bnQgPSAwO1xyXG4gIEBPdXRwdXQoKSBmaWx0ZXJDb3VudENoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8bnVtYmVyPigpO1xyXG4gIEBPdXRwdXQoKSBjbGVhciA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcclxuICBASW5wdXQoKSBtYXRDb2xvcjogVGhlbWVQYWxldHRlID0gJ3dhcm4nO1xyXG5cclxuICBjb25zdHJ1Y3RvcihcclxuICAgIGluamVjdG9yOiBJbmplY3RvcixcclxuICAgIHB1YmxpYyBmaWx0ZXJzU2VydmljZTogRmlsdGVyc1NlcnZpY2UsXHJcbiAgICBwcml2YXRlIGVsOiBFbGVtZW50UmVmPEhUTUxFbGVtZW50PixcclxuICAgIHByaXZhdGUgdXRpbGl0eVNlcnZpY2U6IE5neE1hdENka1V0aWxpdHlTZXJ2aWNlXHJcbiAgKSB7XHJcbiAgICBzdXBlcihpbmplY3Rvcik7XHJcbiAgICB0aGlzLmZpbHRlcnNTZXJ2aWNlLmNvbmRpdGlvblNvdXJjZSA9IHRoaXMuZmlsdGVyc1NlcnZpY2UuZ2V0Q29uZGl0aW9uU291cmNlKCk7XHJcbiAgfVxyXG5cclxuICBuZ09uSW5pdCgpOiB2b2lkIHtcclxuICB9XHJcblxyXG4gIGdldCBmaWx0ZXJUeXBlcygpIHtcclxuICAgIHJldHVybiBGaWx0ZXJUeXBlcztcclxuICB9XHJcblxyXG4gIG9uQ2xlYXIoZmlsdGVyOiBGaWx0ZXIpOiB2b2lkIHtcclxuICAgIHRoaXMuZmlsdGVyc1NlcnZpY2UuY2xlYXJGaWx0ZXIoZmlsdGVyKTtcclxuICAgIHRoaXMuZmlsdGVyQ291bnQgLT0gMTtcclxuICAgIHRoaXMuZmlsdGVyQ291bnRDaGFuZ2UuZW1pdCh0aGlzLmZpbHRlckNvdW50KTtcclxuICAgIHRoaXMuY2xlYXIuZW1pdCgpO1xyXG4gIH1cclxuXHJcblxyXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpOiB2b2lkIHtcclxuXHJcbiAgICB0aGlzLnV0aWxpdHlTZXJ2aWNlLnNldENsYXNzVG9EaWFsb2dDb250YWluZXIodGhpcy5lbCwgJ25neC1tYXQtY2RrLW5vLWJvcmRlci1yYWRpdXMnLCAnbWF0LWRpYWxvZy1jb250YWluZXInKTtcclxuICAgIHRoaXMudXRpbGl0eVNlcnZpY2Uuc2V0Q2xhc3NUb0RpYWxvZ0NvbnRhaW5lcih0aGlzLmVsLCAnbmd4LW1hdC1jZGstZmlsdGVycy1tYXgtaGVpZ2h0JywgJ21hdC1kaWFsb2ctY29udGVudCcpO1xyXG5cclxuICAgIHNldFRpbWVvdXQoKCkgPT4ge1xyXG4gICAgICB0aGlzLmxvYWRpbmcgPSBmYWxzZTtcclxuICAgIH0sIDUwMCk7XHJcbiAgfVxyXG5cclxufVxyXG5cclxuIl19