@koalarx/ui
Version:
Koala UI is a Design System developed in Angular whose objective is to facilitate and make your development faster and simpler, making this framework your greatest ally.
504 lines (499 loc) • 63.1 kB
JavaScript
import * as i15 from '@angular/material/paginator';
import { MatPaginatorIntl, MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
import * as i0 from '@angular/core';
import { Injectable, Component, ChangeDetectionStrategy, Input, ViewChild, NgModule } from '@angular/core';
import * as i9 from '@koalarx/ui/dynamic-component';
import { KoalaDynamicComponent, KoalaDynamicComponentModule } from '@koalarx/ui/dynamic-component';
import { Observable, BehaviorSubject, merge } from 'rxjs';
import { first, startWith, switchMap, debounceTime, map } from 'rxjs/operators';
import { __awaiter } from 'tslib';
import { SelectionModel } from '@angular/cdk/collections';
import * as i2 from '@koalarx/ui/form';
import { FormAbstract, KoalaFormModule } from '@koalarx/ui/form';
import * as i12 from '@angular/material/table';
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
import { delay } from '@koalarx/utils/operators/delay';
import { randomString } from '@koalarx/utils/operators/string';
import * as i1 from '@angular/forms';
import { UntypedFormControl } from '@angular/forms';
import * as i13 from '@angular/material/sort';
import { MatSort, MatSortModule } from '@angular/material/sort';
import { koala } from '@koalarx/utils';
import { trigger, state, style, transition, animate } from '@angular/animations';
import * as i3 from 'ngx-device-detector';
import * as i4 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i5 from '@angular/material/checkbox';
import * as i6 from '@angular/material/button';
import * as i7 from '@angular/material/icon';
import * as i8 from '@angular/material/progress-spinner';
import * as i10 from '@koalarx/ui/button';
import { KoalaButtonModule } from '@koalarx/ui/button';
import * as i11 from '@angular/material/menu';
import { MatMenuModule } from '@angular/material/menu';
import * as i14 from '@angular/material/tooltip';
import { MatTooltipModule } from '@angular/material/tooltip';
import { KoalaFolderPageModule } from '@koalarx/ui/folder-page';
class PaginationProvider extends MatPaginatorIntl {
constructor() {
super();
this.getRangeLabel = (page, pageSize, length) => {
if (length === 0 || pageSize === 0) {
return `0 / ${length}`;
}
length = Math.max(length, 0);
const startIndex = page * pageSize;
const endIndex = startIndex < length ? Math.min(startIndex + pageSize, length) : startIndex + pageSize;
return `${startIndex + 1} - ${endIndex} / ${length}`;
};
this.getAndInitTranslations();
}
getAndInitTranslations() {
this.itemsPerPageLabel = "Itens por Página";
this.firstPageLabel = "Primeira Página";
this.nextPageLabel = "Próxima Página";
this.previousPageLabel = "Página Anterior";
this.lastPageLabel = "Última Página";
this.changes.next();
}
}
PaginationProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PaginationProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
PaginationProvider.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PaginationProvider });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PaginationProvider, decorators: [{
type: Injectable
}], ctorParameters: function () { return []; } });
class ListBuilder {
constructor() {
this.config = {};
}
service(service, type = "all", resultIndexName, qtdResultIndexName) {
var _a, _b, _c, _d, _e, _f, _g, _h;
this.config.typeRequest = type;
this.config.responseIndexName = resultIndexName;
this.config.responseQtdResultIndexName = response => { var _a; return (_a = response[qtdResultIndexName !== null && qtdResultIndexName !== void 0 ? qtdResultIndexName : '']) !== null && _a !== void 0 ? _a : []; };
this.config.columnSort = (_c = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.filterParams) === null || _b === void 0 ? void 0 : _b.getValue()) === null || _c === void 0 ? void 0 : _c.sort;
this.config.sortDirection = (_g = (_f = (_e = (_d = this.config) === null || _d === void 0 ? void 0 : _d.filterParams) === null || _e === void 0 ? void 0 : _e.getValue()) === null || _f === void 0 ? void 0 : _f.order) !== null && _g !== void 0 ? _g : 'asc';
const response = service((_h = this.config.filterParams) !== null && _h !== void 0 ? _h : null);
if (response instanceof Promise) {
this.config.request = new Observable(observe => {
response.then(response => observe.next(response))
.catch(error => observe.error(error));
}).pipe(first());
}
else {
this.config.request = new Observable(observe => {
var _a;
service((_a = this.config.filterParams) !== null && _a !== void 0 ? _a : null).pipe(first()).subscribe(observe);
}).pipe(first());
}
return this;
}
filterConfig(config) {
this.config.filterFormConfig = config;
return this;
}
defaultFilter(config) {
this.config.filterParams = new BehaviorSubject(config);
return this;
}
pageSize(size) {
this.config.pageSize = size;
return this;
}
columns(columns) {
this.config.columnsToShowInList = columns;
return this;
}
itemColumn(item) {
var _a;
(((_a = this.config.itemsList) === null || _a === void 0 ? void 0 : _a.length) > 0) ?
this.config.itemsList.push(item) :
this.config.itemsList = [item];
return this;
}
actionList(item) {
var _a, _b, _c;
((_b = (_a = this.config.itemsMenuListOptions) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0 > 0) ?
(_c = this.config.itemsMenuListOptions) === null || _c === void 0 ? void 0 : _c.push(item) :
this.config.itemsMenuListOptions = [item];
return this;
}
getDataSource(fn) {
this.config.getDataSource = fn;
return this;
}
getSelectionList(fn) {
this.config.getSelectionList = fn;
return this;
}
emptyListComponent(component, data) {
this.config.emptyListComponent = new KoalaDynamicComponent(component, data);
return this;
}
errorListComponent(component, data) {
this.config.errorListComponent = new KoalaDynamicComponent(component, data);
return this;
}
disableCheckboxItemList(fn) {
this.config.disabledCheckboxItemList = fn;
return this;
}
setSubList(config) {
this.config.subListConfig = config;
return this;
}
defineBtnCollapseSubListConfig(config) {
this.config.btnCollapseSubListConfig = config;
return this;
}
hidePaginator(hide = true) {
this.config.hidePaginator = hide;
return this;
}
setCustomClass(className) {
this.config.customClass = className;
return this;
}
getConfig() {
this.config.reload = new BehaviorSubject(false);
return this.config;
}
setLimitOptions(options) {
this.config.limitOptions = options;
}
addLimitOption(limit) {
if (!this.config.limitOptions)
this.config.limitOptions = [10, 20, 30, 50, 100];
this.config.limitOptions.push(limit);
}
}
class KoalaListService {
build() {
return new ListBuilder();
}
}
KoalaListService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KoalaListService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
KoalaListService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KoalaListService, providedIn: "any" });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KoalaListService, decorators: [{
type: Injectable,
args: [{ providedIn: "any" }]
}] });
class ListAbstract extends FormAbstract {
constructor(requestFunction, requestResponseFunction, formSearch) {
super(formSearch);
this.requestFunction = requestFunction;
this.requestResponseFunction = requestResponseFunction;
this.selection = new SelectionModel(true, []);
this.limitOptions = [10, 20, 30, 50, 100];
this.showMenuList = false;
this.allSelected$ = new BehaviorSubject(false);
this.dataSource = new MatTableDataSource([]);
this.typeRequest = 'onDemand';
this.filterParams = new BehaviorSubject(null);
this.filterError$ = new BehaviorSubject(null);
this.tableId = randomString(20, { uppercase: true, lowercase: true });
}
selectAll() {
this.isAllSelected() ?
this.selection.clear() :
this.dataSource.data.forEach(item => {
var _a, _b;
if ((((_a = this.config) === null || _a === void 0 ? void 0 : _a.disabledCheckboxItemList) && !this.config.disabledCheckboxItemList(item)) ||
!((_b = this.config) === null || _b === void 0 ? void 0 : _b.disabledCheckboxItemList)) {
this.selection.select(item);
}
});
this.isAllSelected();
}
defineStatusSelectAll(status) {
this.allSelected$.next(status);
return this.allSelected$.getValue();
}
selectItem() {
setTimeout(() => {
this.showMenuList = this.selection.hasValue();
this.isAllSelected();
}, 50);
}
search(filter) {
var _a, _b, _c, _d, _e, _f, _g, _h;
return __awaiter(this, void 0, void 0, function* () {
this.loading(true);
this.selection.clear();
if (this.paginator) {
this.paginator.firstPage();
}
this.filterParams.next({
params: filter,
sort: (_b = (_a = this.sort) === null || _a === void 0 ? void 0 : _a.active) !== null && _b !== void 0 ? _b : '',
order: (_d = (_c = this.sort) === null || _c === void 0 ? void 0 : _c.direction) !== null && _d !== void 0 ? _d : 'asc',
page: (_f = (_e = this.paginator) === null || _e === void 0 ? void 0 : _e.pageIndex) !== null && _f !== void 0 ? _f : 0,
limit: (_h = (_g = this.paginator) === null || _g === void 0 ? void 0 : _g.pageSize) !== null && _h !== void 0 ? _h : 30
});
});
}
onDestroy() {
var _a, _b;
(_a = this.subscriptionSortList) === null || _a === void 0 ? void 0 : _a.unsubscribe();
(_b = this.subscriptionList) === null || _b === void 0 ? void 0 : _b.unsubscribe();
clearInterval(this.intervalSortList);
}
afterViewInit() {
return __awaiter(this, void 0, void 0, function* () {
let tentativas = 0;
let stop = false;
do {
tentativas++;
yield delay(400);
if (this.sort || this.emptyListComponent) {
this.prepareSearch().then();
if (this.emptyListComponent)
stop = true;
}
else if (tentativas > 10) {
stop = true;
}
} while (!this.sort && !stop);
});
}
prepareSearch() {
var _a, _b;
return __awaiter(this, void 0, void 0, function* () {
this.intervalSortList = setInterval(() => {
if (this.sort && !this.subscriptionSortList) {
this.subscriptionSortList = this.sort.sortChange.subscribe(() => {
var _a, _b, _c, _d, _e;
const filter = (_a = this.filterParams.value) !== null && _a !== void 0 ? _a : {};
filter.sort = (_c = (_b = this.sort) === null || _b === void 0 ? void 0 : _b.active) !== null && _c !== void 0 ? _c : '';
filter.order = (_e = (_d = this.sort) === null || _d === void 0 ? void 0 : _d.direction) !== null && _e !== void 0 ? _e : '';
this.filterParams.next(filter);
});
}
else if (!this.sort && this.subscriptionSortList) {
this.subscriptionSortList.unsubscribe();
}
}, 50);
if (this.typeRequest === 'onDemand') {
this.subscriptionList = merge((_b = (_a = this.paginator) === null || _a === void 0 ? void 0 : _a.page) !== null && _b !== void 0 ? _b : new Observable(), this.filterParams).pipe(startWith({}), switchMap(() => new Observable(observe => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
this.loading(true);
this.selection.clear();
if (this.filterParams.value) {
this.filterParams.value.sort = (_d = (_b = (_a = this.sort) === null || _a === void 0 ? void 0 : _a.active) !== null && _b !== void 0 ? _b : (_c = this.config) === null || _c === void 0 ? void 0 : _c.columnSort) !== null && _d !== void 0 ? _d : '';
this.filterParams.value.order = (_h = (_f = (_e = this.sort) === null || _e === void 0 ? void 0 : _e.direction) !== null && _f !== void 0 ? _f : (_g = this.config) === null || _g === void 0 ? void 0 : _g.sortDirection) !== null && _h !== void 0 ? _h : '';
this.filterParams.value.page = (_k = (_j = this.paginator) === null || _j === void 0 ? void 0 : _j.pageIndex) !== null && _k !== void 0 ? _k : 0;
this.filterParams.value.limit = (_m = (_l = this.paginator) === null || _l === void 0 ? void 0 : _l.pageSize) !== null && _m !== void 0 ? _m : 30;
}
observe.next(true);
})), debounceTime(300), switchMap(() => this.runRequestFunction()), map((response) => {
this.loading(false);
this.scrollTableToTop();
return this.requestResponseFunction(response);
})).subscribe();
}
else {
if (this.paginator)
this.dataSource.paginator = this.paginator;
this.subscriptionList = this.filterParams.pipe(startWith({}), debounceTime(300), switchMap(() => this.runRequestFunction()), map((response) => {
this.loading(false);
this.scrollTableToTop();
return this.requestResponseFunction(response);
})).subscribe();
}
if (this.emptyListComponent) {
do {
yield delay(301);
if (this.sort) {
if (this.typeRequest === "onDemand") {
this.sort.sortChange.subscribe(() => {
if (this.paginator)
this.paginator.pageIndex = 0;
});
}
else {
this.dataSource.sort = this.sort;
}
}
} while (!this.sort);
}
});
}
isAllSelected() {
var _a;
const numSelected = this.selection.selected.length;
const numRows = (((_a = this.config) === null || _a === void 0 ? void 0 : _a.disabledCheckboxItemList) ?
this.dataSource.data.filter(item => {
var _a;
return !(((_a = this.config) === null || _a === void 0 ? void 0 : _a.disabledCheckboxItemList)
? this.config.disabledCheckboxItemList(item)
: '');
}) :
this.dataSource.data).length;
return this.defineStatusSelectAll(numSelected === numRows);
}
runRequestFunction() {
return new Observable(observe => {
this.requestFunction().pipe(first()).subscribe({
next: response => observe.next(response),
error: err => {
if (this.errorListComponent) {
this.filterError$.next(err);
this.errorListComponent.data = err;
}
this.loading(false);
observe.next([]);
}
});
});
}
scrollTableToTop() {
var _a, _b;
(_b = (_a = document.getElementById(this.tableId)) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.scrollTo({ top: 0 });
}
}
class ListComponent extends ListAbstract {
constructor(fb, dynamicFormService, deviceService) {
super(() => { var _a, _b; return (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.request) !== null && _b !== void 0 ? _b : new Observable(); }, (response) => {
var _a, _b, _c, _d, _e, _f, _g;
this.responseRequest = response;
this.dataSource.data = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.responseIndexName)
? (this.config.responseIndexName
? response[this.config.responseIndexName]
: [])
: response;
if ((_b = this.config) === null || _b === void 0 ? void 0 : _b.getDataSource)
(_c = this.config) === null || _c === void 0 ? void 0 : _c.getDataSource(this.dataSource.data);
this.qtdListResult = ((_d = this.config) === null || _d === void 0 ? void 0 : _d.responseQtdResultIndexName)
? (_e = this.config.responseQtdResultIndexName(response)) !== null && _e !== void 0 ? _e : 0
: (_g = (_f = this.dataSource.data) === null || _f === void 0 ? void 0 : _f.length) !== null && _g !== void 0 ? _g : 0;
}, () => { var _a; return (_a = this.formFilter) !== null && _a !== void 0 ? _a : fb.group({}); });
this.fb = fb;
this.dynamicFormService = dynamicFormService;
this.deviceService = deviceService;
this.hidePaginator = false;
this.sortDirection = 'asc';
this.typeRequest = 'all';
this.showAdvancedFilter = false;
this.qtdListResult = 0;
this.expandedElement = false;
}
ngOnInit() {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
this.initConfig();
this.formFilter = this.fb.group({
formSearch: (_c = (_b = (_a = this.filterFormConfig) === null || _a === void 0 ? void 0 : _a.main) === null || _b === void 0 ? void 0 : _b.form) !== null && _c !== void 0 ? _c : [''],
formAdvancedSearch: (_f = (_e = (_d = this.filterFormConfig) === null || _d === void 0 ? void 0 : _d.advanced) === null || _e === void 0 ? void 0 : _e.form) !== null && _f !== void 0 ? _f : ['']
});
this.loading(true);
if (this.filterFormConfig) {
(_j = (_h = (_g = this.filterFormConfig) === null || _g === void 0 ? void 0 : _g.main) === null || _h === void 0 ? void 0 : _h.formConfig) === null || _j === void 0 ? void 0 : _j.map(item => {
item.class += ' padding-none w-99';
return item;
});
(_m = (_l = (_k = this.filterFormConfig) === null || _k === void 0 ? void 0 : _k.advanced) === null || _l === void 0 ? void 0 : _l.formConfig) === null || _m === void 0 ? void 0 : _m.map(item => {
item.class += ' padding-none';
return item;
});
if ((_o = this.filterFormConfig) === null || _o === void 0 ? void 0 : _o.checkAndSearch) {
this.formFilter.addControl(this.filterFormConfig.checkAndSearch.formControlName, new UntypedFormControl((_p = this.filterFormConfig.checkAndSearch.isChecked) !== null && _p !== void 0 ? _p : false));
}
}
if (this.config.getSelectionList)
this.config.getSelectionList(this.selection);
if (this.reload) {
this.reload.subscribe((reload) => __awaiter(this, void 0, void 0, function* () {
if (reload) {
yield this.filterSubmit();
}
}));
}
}
ngOnDestroy() {
super.onDestroy();
}
ngAfterViewInit() {
super.afterViewInit().then();
}
filterSubmit() {
const _super = Object.create(null, {
search: { get: () => super.search }
});
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
return __awaiter(this, void 0, void 0, function* () {
this.showAdvancedFilter = false;
yield delay(1);
let dados = koala(((_b = (_a = this.filterFormConfig) === null || _a === void 0 ? void 0 : _a.main) === null || _b === void 0 ? void 0 : _b.form)
? this.dynamicFormService.emitData((_d = (_c = this.filterFormConfig) === null || _c === void 0 ? void 0 : _c.main) === null || _d === void 0 ? void 0 : _d.form)
: {})
.object()
.merge(((_f = (_e = this.filterFormConfig) === null || _e === void 0 ? void 0 : _e.advanced) === null || _f === void 0 ? void 0 : _f.form)
? this.dynamicFormService.emitData((_h = (_g = this.filterFormConfig) === null || _g === void 0 ? void 0 : _g.advanced) === null || _h === void 0 ? void 0 : _h.form)
: {})
.getValue();
if ((_j = this.filterFormConfig) === null || _j === void 0 ? void 0 : _j.checkAndSearch) {
const controlName = this.filterFormConfig.checkAndSearch.formControlName;
dados[controlName] = this.formFilter.get(controlName).value;
}
yield _super.search.call(this, dados);
});
}
toogleFilter() {
this.showAdvancedFilter = !this.showAdvancedFilter;
}
haveOptionsOnItemLine(item) {
return this.itemsMenuListOptions.filter(option => option.havePermission && (!option.showByItemList ||
option.showByItemList(item))).length > 0;
}
hasFooter() {
return !!this.itemsList.find(item => !!item.footer);
}
initConfig() {
var _a, _b, _c, _d, _e, _f, _g, _h;
this.columnSort = (_a = this.config.columnSort) !== null && _a !== void 0 ? _a : null;
this.sortDirection = (_b = this.config.sortDirection) !== null && _b !== void 0 ? _b : 'asc';
this.itemsMenuListOptions = (_c = this.config.itemsMenuListOptions) !== null && _c !== void 0 ? _c : [];
this.typeRequest = (_d = this.config.typeRequest) !== null && _d !== void 0 ? _d : 'all';
this.qtdListResult = (_e = this.config.qtdListResult) !== null && _e !== void 0 ? _e : 0;
this.columnsToShowInList = this.config.columnsToShowInList;
this.itemsList = this.config.itemsList.map(item => {
if (!item.dblClick) {
item.dblClick = () => {
};
}
return item;
});
this.showAdvancedFilter = this.config.showAdvancedFilter;
this.filterFormConfig = this.config.filterFormConfig;
this.request = this.config.request;
this.reload = this.config.reload;
this.responseIndexName = this.config.responseIndexName;
this.responseQtdResultIndexName = this.config.responseQtdResultIndexName;
this.filterParams = (_f = this.config.filterParams) !== null && _f !== void 0 ? _f : new BehaviorSubject(null);
this.emptyListComponent = this.config.emptyListComponent;
this.errorListComponent = this.config.errorListComponent;
this.pageSize = (_g = this.config.pageSize) !== null && _g !== void 0 ? _g : 30;
this.disabledCheckboxItemList = this.config.disabledCheckboxItemList;
this.subListConfig = this.config.subListConfig;
this.btnCollapseSubListConfig = this.config.btnCollapseSubListConfig;
this.hidePaginator = this.config.hidePaginator;
this.customClass = this.config.customClass;
this.limitOptions = (_h = this.config.limitOptions) !== null && _h !== void 0 ? _h : this.limitOptions;
}
}
ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ListComponent, deps: [{ token: i1.UntypedFormBuilder }, { token: i2.KoalaDynamicFormService }, { token: i3.DeviceDetectorService }], target: i0.ɵɵFactoryTarget.Component });
ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ListComponent, selector: "koala-list", inputs: { config: "config" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"list-container\" [ngClass]=\"customClass\">\n <div *ngIf=\"filterFormConfig\" class=\"list-filter\">\n <form (ngSubmit)=\"filterSubmit()\" [formGroup]=\"formFilter\">\n <div class=\"main\">\n <koala-dynamic-form\n *ngIf=\"filterFormConfig.main\"\n [form]=\"filterFormConfig.main.form\"\n [formConfig]=\"filterFormConfig.main.formConfig\"\n [setValues]=\"filterFormConfig.main.setValues\"\n [showFields]=\"filterFormConfig.main.showFields\"\n [tabIndexStart]=\"filterFormConfig.main.tabIndexStart\">\n </koala-dynamic-form>\n <ul>\n <li *ngIf=\"filterFormConfig.advanced\" class=\"option\">\n <button (click)=\"toogleFilter()\" color=\"primary\" mat-icon-button matTooltip=\"Filtro Avan\u00E7ado\"\n matTooltipPosition=\"below\" type=\"button\">\n <mat-icon>tune</mat-icon>\n </button>\n </li>\n <li *ngIf=\"filterFormConfig.checkAndSearch\" class=\"checkbox-filter\">\n <mat-checkbox (click)=\"filterSubmit()\"\n [formControlName]=\"filterFormConfig.checkAndSearch.formControlName\">\n {{filterFormConfig.checkAndSearch.label}}\n </mat-checkbox>\n </li>\n <li class=\"option\">\n <koala-submit\n [btnSubmitDisabled]=\"btnSubmitDisabled\"\n [fg]=\"formFilter\"\n [iconButton]=\"true\"\n [loader]=\"loader\"\n icon=\"search\">\n </koala-submit>\n </li>\n </ul>\n </div>\n <div *ngIf=\"filterFormConfig.advanced\" [ngClass]=\"{'show': showAdvancedFilter}\" class=\"advanced\">\n <div class=\"container-filter\">\n <koala-dynamic-form\n [form]=\"filterFormConfig.advanced.form\"\n [formConfig]=\"filterFormConfig.advanced.formConfig\"\n [setValues]=\"filterFormConfig.advanced.setValues\"\n [showFields]=\"filterFormConfig.advanced.showFields\"\n [tabIndexStart]=\"filterFormConfig.advanced.tabIndexStart\">\n </koala-dynamic-form>\n </div>\n </div>\n </form>\n </div>\n <nav class=\"menu-list\">\n <ul class=\"menu\">\n <li *ngIf=\"selection.hasValue()\">\n <ng-content select=\"[itemsSelectList]\"></ng-content>\n </li>\n <li *ngIf=\"selection.hasValue()\" class=\"text-center\">|</li>\n <li>\n <ng-content select=\"[itemsList]\"></ng-content>\n </li>\n </ul>\n </nav>\n <div *ngIf=\"loader | async\" class=\"spinner-container\" [ngClass]=\"{\n 'no-filter': !filterFormConfig\n }\">\n <mat-spinner color=\"primary\" diameter=\"40\"></mat-spinner>\n </div>\n <div class=\"list\">\n <table\n *ngIf=\"!emptyListComponent || (emptyListComponent && dataSource?.data?.length > 0) else emptyList\"\n [dataSource]=\"dataSource\"\n [matSortActive]=\"columnSort\"\n [id]=\"tableId\"\n multiTemplateDataRows\n class=\"table-hover\"\n mat-table\n matSort\n [matSortDirection]=\"sortDirection\" matSortDisableClear>\n <ng-container matColumnDef=\"select\">\n <th *matHeaderCellDef mat-header-cell>\n <mat-checkbox (change)=\"$event ? selectAll() : null\"\n [checked]=\"selection.hasValue() && allSelected$ | async\"\n [indeterminate]=\"selection.hasValue() && !(allSelected$ | async)\">\n </mat-checkbox>\n </th>\n <td *matCellDef=\"let item\" mat-cell>\n <mat-checkbox *ngIf=\"disabledCheckboxItemList ? !disabledCheckboxItemList(item) : true\"\n (change)=\"$event ? selection.toggle(item) : null\"\n (click)=\"$event.stopPropagation(); selectItem();\"\n [checked]=\"selection.isSelected(item)\">\n </mat-checkbox>\n </td>\n <td *matFooterCellDef mat-footer-cell></td>\n </ng-container>\n\n <ng-container *ngIf=\"subListConfig && btnCollapseSubListConfig\" matColumnDef=\"collapseButton\">\n <th *matHeaderCellDef mat-header-cell></th>\n <td *matCellDef=\"let item\" mat-cell>\n <koala-button\n *ngIf=\"btnCollapseSubListConfig.show(item)\"\n (click)=\"expandedElement = expandedElement === item ? null : item\"\n [koalaIcon]=\"btnCollapseSubListConfig.koalaIcon\"\n [icon]=\"btnCollapseSubListConfig.icon\"\n [tooltip]=\"btnCollapseSubListConfig.tooltip\"\n [color]=\"btnCollapseSubListConfig.iconColor\"\n [backgroundColor]=\"btnCollapseSubListConfig.backgroundColor\"\n [koalaIconSize]=\"22\">\n </koala-button>\n </td>\n <td *matFooterCellDef mat-footer-cell></td>\n </ng-container>\n\n <ng-container *ngFor=\"let itemList of itemsList\" [matColumnDef]=\"itemList.columnDef\">\n <th *matHeaderCellDef [mat-sort-header]=\"itemList.sortHeader\" [disabled]=\"!itemList.sortHeader\" mat-header-cell>{{itemList.label}}</th>\n <td (dblclick)=\"itemList.dblClick(item)\" *matCellDef=\"let item\" mat-cell>\n\t <koala-dynamic-component *ngIf=\"itemList.itemComponent else itemText\"\n\t [dynamicComponent]=\"itemList.itemComponent(item)\"></koala-dynamic-component>\n\t <ng-template #itemText>\n\t {{itemList.itemNameProperty(item)}}\n\t </ng-template>\n </td>\n <td *matFooterCellDef mat-footer-cell>\n <koala-dynamic-component *ngIf=\"itemList.footer?.itemComponent else itemFooterText\"\n [dynamicComponent]=\"itemList.footer?.itemComponent(responseRequest)\"></koala-dynamic-component>\n <ng-template #itemFooterText>\n {{itemList.footer?.itemNameProperty(responseRequest)}}\n </ng-template>\n </td>\n </ng-container>\n\n <ng-container *ngIf=\"subListConfig && btnCollapseSubListConfig\" matColumnDef=\"koalaListDetails\">\n <th *matHeaderCellDef mat-header-cell></th>\n <td *matCellDef=\"let item\" [attr.colspan]=\"columnsToShowInList.length\" mat-cell>\n <div class=\"item-detail\" [@detailExpand]=\"item == expandedElement ? 'expanded' : 'collapsed'\">\n <koala-list [config]=\"subListConfig(item)\"></koala-list>\n </div>\n </td>\n <td *matFooterCellDef mat-footer-cell></td>\n </ng-container>\n\n <ng-container matColumnDef=\"options\">\n <th *matHeaderCellDef mat-header-cell></th>\n <td *matCellDef=\"let item\" mat-cell>\n <div *ngIf=\"haveOptionsOnItemLine(item)\">\n <button [matMenuTriggerFor]=\"options\" mat-icon-button type=\"button\">\n <i class='material-icons'>more_vert</i>\n </button>\n <mat-menu #options=\"matMenu\" class=\"menu-list\" yPosition=\"below\">\n\t <div *ngFor=\"let option of itemsMenuListOptions\">\n\t <button\n\t\t (click)=\"option.action(item)\"\n\t\t *ngIf=\"option.havePermission && (\n\t\t !option.showByItemList ||\n\t\t option.showByItemList(item)\n\t )\"\n\t\t mat-menu-item>\n\t <mat-icon>{{option.icon}}</mat-icon>\n\t <span>{{option.name}}</span>\n\t </button>\n\t </div>\n </mat-menu>\n </div>\n </td>\n <td *matFooterCellDef mat-footer-cell></td>\n </ng-container>\n\n <tr *matHeaderRowDef=\"columnsToShowInList; sticky: true\" mat-header-row></tr>\n <tr *matRowDef=\"let item; columns: columnsToShowInList;\" mat-row></tr>\n <ng-container *ngIf=\"subListConfig && btnCollapseSubListConfig\">\n <tr mat-row *matRowDef=\"let row; columns: ['koalaListDetails']\" class=\"item-detail-row\"></tr>\n </ng-container>\n <ng-container *ngIf=\"hasFooter()\">\n <tr *matFooterRowDef=\"columnsToShowInList; sticky: true\" mat-footer-row></tr>\n </ng-container>\n </table>\n <ng-template #emptyList>\n <koala-dynamic-component *ngIf=\"!(filterError$ | async) else errorList\" [dynamicComponent]=\"emptyListComponent\"></koala-dynamic-component>\n <ng-template #errorList>\n <koala-dynamic-component [dynamicComponent]=\"errorListComponent\"></koala-dynamic-component>\n </ng-template>\n </ng-template>\n </div>\n <div *ngIf=\"!hidePaginator\" class=\"content-paginator\">\n <mat-paginator\n [length]=\"qtdListResult\"\n [pageSizeOptions]=\"limitOptions\"\n [pageSize]=\"pageSize\"\n showFirstLastButtons>\n </mat-paginator>\n </div>\n</div>\n", styles: [".list-container{border-radius:10px;margin:0 auto;overflow-x:hidden;width:calc(100% - 40px);position:relative}.list-container .spinner-container{position:absolute;width:100%;height:calc(100vh - 320px);top:100px;left:0;background:rgba(0,0,0,.15);z-index:2;display:flex;align-items:center;justify-content:center}.list-container .spinner-container.no-filter{top:40px}.list-container .list{display:block;height:calc(100vh - 320px);overflow-y:auto;position:relative;top:0;width:100%;z-index:1}.list-container .list table:not(.table-not-selection) .mat-header-cell:first-child,.list-container .list .mat-header-cell:last-child,.list-container .list .mat-header-cell.mat-column-collapseButton{width:5%}.list-container .list .mat-header-cell:last-child{text-align:center}.list-container .list .mat-header-row,.list-container .list .mat-row,.list-container .list .mat-footer-row{height:35px}.list-container .list .mat-row .mat-icon-button{height:35px;line-height:35px;width:35px}.list-container .list tr.detail-row:not(.expanded-row){height:0}.list-container .list .element-detail{display:flex;overflow:hidden}.list-container .list table{position:relative;width:100%;font-family:OpenSans,sans-serif;font-size:1em}.list-container .list table.table-hover tr{cursor:pointer;transition:.2s}.list-container .list table th:first-child,.list-container .list table td:first-child{padding:0 8px 0 20px}.list-container .list table th{font-size:.7em;padding:0 8px;font-family:OpenSans,sans-serif;line-height:1em}.list-container .list table td{font-size:.8em;padding:0 8px;font-family:OpenSans,sans-serif}.list-container .list table th:last-child,.list-container .list table td:last-child{padding:0 20px 0 8px}.list-container .list .mat-list-item-content,.list-container .list .mat-list-item-content .mat-list-text{padding:0}.list-container .list-filter{box-shadow:0 1px 3px #0000004d;height:60px;position:relative;z-index:3}.list-container .list-filter .main{display:flex;justify-content:space-between;font-size:1.05em;height:60px;overflow:hidden;padding-left:2.5px;position:relative;width:100%}.list-container .list-filter .main koala-dynamic-form{width:100%}.list-container .list-filter .main mat-form-field{display:inline-block}.list-container .list-filter .main .mat-form-field-appearance-fill .mat-form-field-flex{background:transparent}.list-container .list-filter .main .mat-form-field .mat-form-field-wrapper{padding-bottom:0}.list-container .list-filter .main .mat-form-field-underline,.list-container .list-filter .main .mat-form-field-appearance-legacy .mat-form-field-subscript-wrapper,.list-container .list-filter .main .mat-form-field-wrapper .mat-form-field-subscript-wrapper{display:none}.list-container .list-filter ul{display:flex;align-items:center;font-size:0;list-style:none;margin:0;padding:0 15px 0 0;position:relative;text-align:right}.list-container .list-filter ul li{display:inline-block;font-size:14px;padding:5px;position:relative}.list-container .list-filter ul li.option button{transition:.2s}.list-container .list-filter ul li.option button:hover{background:rgba(0,0,0,.1)}.list-container .list-filter ul li.checkbox-filter{text-align:center}.list-container .list-filter ul li.checkbox-filter .checkbox-inline{top:-5px}.list-container .list-filter ul li.checkbox-filter input[type=checkbox]{margin-left:0}.list-container .list-filter ul li.checkbox-filter label{padding:0!important;width:auto}.list-container .list-filter .advanced{border-top:1px solid #dddddd;box-shadow:0 3px 10px #0000004d;height:0;overflow-x:hidden;overflow-y:auto;position:absolute;top:60px;transition:.2s;width:100%;z-index:1}.list-container .list-filter .advanced .container-filter{padding:15px}.list-container .list-filter .advanced.show{height:360px}.list-container nav.menu-list{height:40px;margin:0;padding:3px 0;position:relative;transition:.2s;width:100%;z-index:2;box-sizing:border-box}.list-container nav.menu-list ul.menu{float:left;font-size:0;list-style:none;margin:0;padding:0 10px;position:relative;text-align:left}.list-container nav.menu-list ul.menu li{color:#616161;display:inline-block;font-size:16px;padding:0 4px}.list-container nav.menu-list ul.menu li button.mat-button,.list-container nav.menu-list ul.menu li button.koala-icon-button{display:inline-block}.list-container .content-paginator mat-paginator .mat-paginator-container{height:40px!important;min-height:40px!important}.list-container .content-paginator mat-paginator .mat-paginator-container .mat-paginator-page-size-select{height:40px;margin-top:0!important}.list-container .content-paginator mat-paginator .mat-paginator-container .mat-paginator-range-label{margin-top:3px}.list-container .content-paginator{position:relative;background:transparent!important;z-index:2;box-shadow:-3px 1px 3px #0000004d}.list-container .item-detail{overflow:hidden}.list-container tr.item-detail-row{height:0!important}.list-container tr.item-detail-row .list-container{width:100%!important}.list-container tr.item-detail-row .list-container .list{height:auto!important;max-height:250px!important}.list-container tr.item-detail-row .list-container nav.menu-list{display:none}@media (max-width: 900px){.list-container{width:100%;box-shadow:none!important;padding:15px 10px 15px 15px;box-sizing:border-box}.list-container .list{height:auto;overflow:visible;overflow:initial}.list-container .list-filter .main{justify-content:flex-end}}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i2.BtnSubmitComponent, selector: "koala-submit", inputs: ["fg", "color", "btnLabel", "btnSubmitDisabled", "loader", "iconButton", "icon", "iconColor"] }, { kind: "component", type: i2.DynamicFormComponent, selector: "koala-dynamic-form", inputs: ["form", "formConfig", "showFields", "showFieldsMoreItensConfig", "setValues", "tabIndexStart"] }, { kind: "component", type: i9.KoalaDynamicComponentFactory, selector: "koala-dynamic-component", inputs: ["dynamicComponent"] }, { kind: "component", type: i10.ButtonComponent, selector: "koala-button", inputs: ["color", "backgroundColor", "icon", "text", "tooltip", "disabled", "koalaIcon", "koalaIconSize"] }, { kind: "component", type: i11.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i11.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i12.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i12.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i12.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i12.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i12.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i12.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i12.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i12.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i12.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i12.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i12.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i12.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i12.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i12.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i13.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i13.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i14.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i15.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: ListComponent, selector: "koala-list", inputs: ["config"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], animations: [
trigger('detailExpand', [
state('collapsed', style({ height: '0px', minHeight: '0' })),
state('expanded', style({ height: '*' })),
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
]),
], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ListComponent, decorators: [{
type: Component,
args: [{ selector: 'koala-list', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
trigger('detailExpand', [
state('collapsed', style({ height: '0px', minHeight: '0' })),
state('expanded', style({ height: '*' })),
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
]),
], template: "<div class=\"list-container\" [ngClass]=\"customClass\">\n <div *ngIf=\"filterFormConfig\" class=\"list-filter\">\n <form (ngSubmit)=\"filterSubmit()\" [formGroup]=\"formFilter\">\n <div class=\"main\">\n <koala-dynamic-form\n *ngIf=\"filterFormConfig.main\"\n [form]=\"filterFormConfig.main.form\"\n [formConfig]=\"filterFormConfig.main.formConfig\"\n [setValues]=\"filterFormConfig.main.setValues\"\n [showFields]=\"filterFormConfig.main.showFields\"\n [tabIndexStart]=\"filterFormConfig.main.tabIndexStart\">\n </koala-dynamic-form>\n <ul>\n <li *ngIf=\"filterFormConfig.advanced\" class=\"option\">\n <button (click)=\"toogleFilter()\" color=\"primary\" mat-icon-button matTooltip=\"Filtro Avan\u00E7ado\"\n matTooltipPosition=\"below\" type=\"button\">\n <mat-icon>tune</mat-icon>\n </button>\n </li>\n <li *ngIf=\"filterFormConfig.checkAndSearch\" class=\"checkbox-filter\">\n <mat-checkbox (click)=\"filterSubmit()\"\n [formControlName]=\"filterFormConfig.checkAndSearch.formControlName\">\n {{filterFormConfig.checkAndSearch.label}}\n </mat-checkbox>\n </li>\n <li class=\"option\">\n <koala-submit\n [btnSubmitDisabled]=\"btnSubmitDisabled\"\n [fg]=\"formFilter\"\n [iconButton]=\"true\"\n [loader]=\"loader\"\n icon=\"search\">\n </koala-submit>\n </li>\n </ul>\n </div>\n <div *ngIf=\"filterFormConfig.advanced\" [ngClass]=\"{'show': showAdvancedFilter}\" class=\"advanced\">\n <div class=\"container-filter\">\n <koala-dynamic-form\n [form]=\"filterFormConfig.advanced.form\"\n [formConfig]=\"filterFormConfig.advanced.formConfig\"\n [setValues]=\"filterFormConfig.advanced.setValues\"\n [showFields]=\"filterFormConfig.advanced.showFields\"\n [tabIndexStart]=\"filterFormConfig.advanced.tabIndexStart\">\n </koala-dynamic-form>\n </div>\n </div>\n </form>\n </div>\n <nav class=\"menu-list\">\n <ul class=\"menu\">\n <li *ngIf=\"selection.hasValue()\">\n <ng-content select=\"[itemsSelectList]\"></ng-content>\n </li>\n <li *ngIf=\"selection.hasValue()\" class=\"text-center\">|</li>\n <li>\n <ng-content select=\"[itemsList]\"></ng-content>\n </li>\n </ul>\n </nav>\n <div *ngIf=\"loader | async\" class=\"spinner-container\" [ngClass]=\"{\n 'no-filter': !filterFormConfig\n }\">\n <mat-spinner color=\"primary\" diameter=\"40\"></mat-spinner>\n </div>\n <div class=\"list\">\n <table\n *ngIf=\"!emptyListComponent || (emptyListComponent && dataSource?.data?.length > 0) else emptyList\"\n [dataSource]=\"dataSource\"\n [matSortActive]=\"columnSort\"\n [id]=\"tableId\"\n multiTemplateDataRows\n class=\"table-hover\"\n mat-table\n matSort\n [matSortDirection]=\"sortDirection\" matSortDisableClear>\n <ng-container matColumnDef=\"select\">\n <th *matHeaderCellDef mat-header-cell>\n <mat-checkbox (change)=\"$event ? selectAll() : null\"\n [checked]=\"selection.hasValue() && allSelected$ | async\"\n [indeterminate]=\"selection.hasValue() && !(allSelected$ | async)\">\n </mat-checkbox>\n </th>\n <td *matCellDef=\"let item\" mat-cell>\n <mat-checkbox *ngIf=\"disabledCheckboxItemList ? !disabledCheckboxItemList(item) : true\"\n (change)=\"$event ? selection.toggle(item) : null\"\n (click)=\"$event.stopPropagation(); selectItem();\"\n [checked]=\"selection.isSelected(item)\">\n </mat-checkbox>\n </td>\n <td *matFooterCellDef mat-footer-cell></td>\n </ng-container>\n\n <ng-container *ngIf=\"subListConfig &