ngx-ui-builder
Version:
Angular - Render component ui with configurations
294 lines (285 loc) • 27.7 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, Component, ChangeDetectionStrategy, Input, forwardRef, ViewContainerRef, ViewChild, NgModule } from '@angular/core';
import { BehaviorSubject, Subject, filter, tap, map, debounceTime, takeUntil, Observable, lastValueFrom } from 'rxjs';
import * as i2 from '@angular/forms';
import { NgControl, NG_VALUE_ACCESSOR, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import { NubUtilsModule } from 'ngx-ui-builder/utils';
class NubTableService {
constructor() { }
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: NubTableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: NubTableService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: NubTableService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}], ctorParameters: function () { return []; } });
class NubTableCellComponent {
// Common cell properties
set cell(cell) {
this.localConfigs.cell = { ...cell };
}
;
set metadata(metadata) {
this.localConfigs.metadata = { ...metadata };
}
;
constructor(viewContainerRef) {
this.viewContainerRef = viewContainerRef;
this.localConfigs = {};
}
ngOnInit() {
const cell = this.viewContainerRef.createComponent(this.localConfigs.metadata.component);
cell.instance.cell = this.localConfigs.cell;
cell.instance.metadata = this.localConfigs.metadata;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: NubTableCellComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: NubTableCellComponent, selector: "nub-table-cell", inputs: { cell: "cell", metadata: "metadata" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: NubTableCellComponent, decorators: [{
type: Component,
args: [{
selector: 'nub-table-cell',
template: '',
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { cell: [{
type: Input
}], metadata: [{
type: Input
}] } });
class NubFilterComponent {
// Common cell properties
set column(column) {
this.localConfigs.column = { ...column };
}
constructor(injector, viewContainerRef) {
this.injector = injector;
this.viewContainerRef = viewContainerRef;
this.localConfigs = {};
}
ngOnInit() {
const injectorControl = this.injector.get(NgControl);
const cell = this.viewContainerRef.createComponent(this.localConfigs.column?.filter?.component);
injectorControl.valueAccessor = cell.instance;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: NubFilterComponent, deps: [{ token: i0.Injector }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: NubFilterComponent, selector: "nub-table-filter", inputs: { column: "column" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => NubFilterComponent),
multi: true
}
], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: NubFilterComponent, decorators: [{
type: Component,
args: [{
selector: 'nub-table-filter',
template: '',
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => NubFilterComponent),
multi: true
}
]
}]
}], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ViewContainerRef }]; }, propDecorators: { column: [{
type: Input
}] } });
class NubTableComponent {
set configs(configs) {
this.setConfigs(configs);
}
constructor() {
this.localConfigs = {
id: new Date().getTime(),
sortOrder: {},
columnOptions: [],
footer: {
configs: {
page: 1,
pageSize: 10,
pageSizes: [5, 10, 20, 50, 100]
}
}
};
this.tableMatrix$ = new BehaviorSubject([]);
this.obChangeWithData$ = new BehaviorSubject(undefined);
this.txtSearch = new FormControl();
this.filterFormGroup = new FormGroup({});
this._unsubscribeAll = new Subject();
}
ngOnInit() {
this.obChangeWithData$
.pipe(filter(data => data !== undefined), tap(data => this.buildTableMatrix(data ?? [])), map(value => value))
.subscribe();
this.txtSearch.valueChanges.pipe(debounceTime(this.localConfigs.search?.debounceTime || 300), takeUntil(this._unsubscribeAll)).subscribe(val => {
if (this.localConfigs.search) {
this.localConfigs.search.value = val;
}
this.refresh();
});
// Filter section
this.localConfigs.columnOptions.forEach((col) => {
if (col.filter) {
this.filterFormGroup.addControl(col.property, new FormControl(''));
this.filterFormGroup.controls[col.property].valueChanges.pipe(debounceTime(col.filter.debounceTime || 300), takeUntil(this._unsubscribeAll)).subscribe(() => {
this.refresh();
});
}
});
this.refresh();
}
ngAfterViewInit() {
if (this.localConfigs.footer?.component) {
const viewContainerRef = this.footerComponent;
viewContainerRef.clear();
const footerComponent = viewContainerRef.createComponent(this.localConfigs.footer?.component);
footerComponent.instance.configs = this.localConfigs.footer.configs || null;
}
}
ngOnDestroy() {
this._unsubscribeAll.next();
this._unsubscribeAll.complete();
}
async refresh() {
let data = [];
let totalItems;
if (!this.localConfigs.dataSource) {
this.obChangeWithData$.next(data);
}
let dataSource;
if (this.localConfigs.dataSource) {
dataSource = this.localConfigs.dataSource(this.buildQueryParams(), this);
}
if (dataSource instanceof Promise) {
({ data, totalItems } = await dataSource);
}
else if (dataSource instanceof Observable) {
({ data, totalItems } = await lastValueFrom(dataSource));
}
else {
({ data, totalItems } = dataSource ?? { data: [], totalItems: 0 });
}
if (this.localConfigs.footer?.configs) {
this.localConfigs.footer.configs.totalItems = totalItems;
}
this.obChangeWithData$.next(data);
}
buildQueryParams() {
let queryParams = Object.create(null);
if (this.localConfigs.search) {
queryParams.search = this.localConfigs.search.value || '';
}
if (this.localConfigs.columnOptions.some(col => !!col.filter)) {
queryParams.filter = this.filterFormGroup.getRawValue();
}
if (this.localConfigs.sortOrder) {
queryParams.sort = this.localConfigs.sortOrder || {};
}
if (!this.localConfigs.footer?.component && this.localConfigs.footer?.configs) {
Object.assign(queryParams, this.localConfigs.footer.configs);
}
if (this.localConfigs.mapQueryParams) {
queryParams = this.localConfigs.mapQueryParams(queryParams);
}
return new URLSearchParams(queryParams).toString();
}
buildTableMatrix(data) {
const result = [];
for (const index in data) {
// Build a row
const row = {
id: `${this.localConfigs.id}-${index}`,
data: data[index],
columns: [],
class: this.localConfigs.rowOptions?.class,
metadata: this.localConfigs.rowOptions,
};
// Build a column in row (cell)
const rowClone = Object.assign({}, row);
delete rowClone.columns;
for (const columnOption of this.localConfigs.columnOptions) {
const col = {
cell: {
title: columnOption.title,
data: data[index][columnOption.property],
},
metadata: { ...columnOption, row: rowClone },
};
row.columns?.push(col);
}
result.push(row);
}
this.tableMatrix$.next(result);
}
onChangeSortType(col) {
const sortTypes = ['', 'asc', 'desc'];
const idx = col.sort?.type ? sortTypes.findIndex(sortType => sortType === col.sort?.type) : 0;
if (col.sort) {
col.sort.type = sortTypes[idx + 1] || '';
}
this.localConfigs.sortOrder[col.property] = col.sort?.type;
return this.refresh();
}
/*-------------------Paging section-----------------*/
async setPageSize() {
await this.refresh();
return this.goToPage(0);
}
goToPage(pageIndex) {
if (this.localConfigs.footer?.configs) {
this.localConfigs.footer.configs.page = pageIndex + 1;
}
return this.refresh();
}
/*---------------End Paging section ----------------*/
setConfigs(configs) {
// Combine configs and local configs
this.localConfigs = { ...this.localConfigs, ...configs };
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: NubTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: NubTableComponent, selector: "nub-table", inputs: { configs: "configs" }, viewQueries: [{ propertyName: "footerComponent", first: true, predicate: ["footerComponent"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "\n\n<!-- Table Section -->\n<table>\n <caption *ngIf=\"localConfigs.caption\" [style.caption-side]=\"localConfigs.captionPosition\">{{localConfigs.caption}}</caption>\n\n <thead>\n <tr>\n <td\n *ngIf=\"localConfigs.search\"\n [attr.colspan]=\"localConfigs.columnOptions.length\"\n class=\"search-container\"\n [ngClass]=\"localConfigs.search.class\"\n >\n <!-- Search Section -->\n <label>\n {{ localConfigs.search.title }}\n <input\n type=\"text\"\n [title]=\"localConfigs.search.title\"\n [placeholder]=\"localConfigs.search.placeholder\"\n [formControl]=\"txtSearch\"\n />\n </label>\n </td>\n </tr>\n <tr [formGroup]=\"filterFormGroup\">\n <th class=\"title\" *ngFor=\"let col of localConfigs.columnOptions\">\n <div class=\"header-container\" (click)=\"!!col.sort && onChangeSortType(col)\">\n <span>{{ col.title }}</span>\n <span *ngIf=\"!!col.sort\" class=\"sorting\">\n <svg\n *ngIf=\"col.sort.type === 'asc'\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke-width=\"1.5\"\n stroke=\"currentColor\"\n >\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M19.5 8.25l-7.5 7.5-7.5-7.5\" />\n </svg>\n <svg\n *ngIf=\"col.sort.type === 'desc'\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke-width=\"1.5\"\n stroke=\"currentColor\"\n >\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 15.75l7.5-7.5 7.5 7.5\" />\n </svg>\n </span>\n </div>\n <div *ngIf=\"!!col.filter\" class=\"filtering\">\n <ng-container *ngIf=\"col.filter.component\">\n <nub-table-filter [column]=\"col\" [formControlName]=\"col.property\"></nub-table-filter>\n </ng-container>\n <ng-container *ngIf=\"!col.filter.component\">\n <input type=\"text\" [formControlName]=\"col.property\" />\n </ng-container>\n </div>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let row of tableMatrix$ | async\">\n <ng-container *ngFor=\"let column of row.columns\">\n <ng-container *ngIf=\"column.metadata['component']\">\n <nub-table-cell [cell]=\"column.cell\" [metadata]=\"column.metadata\"></nub-table-cell>\n </ng-container>\n <ng-container *ngIf=\"!column.metadata['component']\">\n <td>{{ column.cell['data'] }}</td>\n </ng-container>\n </ng-container>\n </tr>\n </tbody>\n <tfoot\n class=\"table-footer\"\n >\n <tr>\n <td\n [attr.colspan]=\"localConfigs.columnOptions.length\"\n >\n <ng-container *ngIf=\"!!localConfigs.footer?.component; else defaultFooter\" #footerComponent></ng-container>\n </td>\n </tr>\n </tfoot>\n</table>\n\n<ng-template #defaultFooter>\n <div class=\"footer-container\">\n <div class=\"settings\">\n <label>\n Items per page:\n <select [(ngModel)]=\"localConfigs.footer!.configs!.pageSize!\" (change)=\"setPageSize()\">\n <option *ngFor=\"let page of localConfigs.footer!.configs!.pageSizes\">\n <span>{{ page }}</span>\n </option>\n </select>\n </label>\n </div>\n <div class=\"pagination\">\n <div class=\"page-number\">\n {{(localConfigs.footer?.configs?.page! - 1) * localConfigs.footer?.configs?.pageSize! + 1}}\n -\n {{localConfigs.footer?.configs?.page! * localConfigs.footer?.configs?.pageSize!}}\n of\n {{localConfigs.footer?.configs?.totalItems}}\n </div>\n <div class=\"page-function\">\n <button type=\"button\" class=\"page-first\" (click)=\"goToPage(0)\"></button>\n <button type=\"button\" class=\"page-previous\" (click)=\"goToPage(localConfigs.footer?.configs?.page! > 1 ? localConfigs.footer?.configs?.page! - 2 : 0)\"></button>\n <button type=\"button\" class=\"page-next\" (click)=\"goToPage(localConfigs.footer?.configs?.page!)\"></button>\n <button type=\"button\" class=\"page-last\" (click)=\"goToPage(localConfigs.footer?.configs?.totalItems! / localConfigs.footer?.configs?.pageSize!)\"></button>\n </div>\n </div>\n </div>\n</ng-template>\n", styles: ["div.header-container{display:flex;align-items:center;justify-content:center}span.sorting{display:inline-block;width:24px;height:24px;margin-left:4px}.search-container{text-align:center}.footer-container{display:flex;align-items:center;justify-content:space-between}.pagination{display:flex;align-items:inherit;justify-content:flex-end}.page-number{margin-right:12px}.page-function button{border:none;background-color:#fff;width:26px;aspect-ratio:1 / 1}button.page-first{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' focusable='false'%3E%3Cpath d='M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z'%3E%3C/path%3E%3C/svg%3E\")}button.page-previous{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' focusable='false'%3E%3Cpath d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'%3E%3C/path%3E%3C/svg%3E\")}button.page-next{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' focusable='false'%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'%3E%3C/path%3E%3C/svg%3E\")}button.page-last{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' focusable='false'%3E%3Cpath d='M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z'%3E%3C/path%3E%3C/svg%3E\")}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: NubTableCellComponent, selector: "nub-table-cell", inputs: ["cell", "metadata"] }, { kind: "component", type: NubFilterComponent, selector: "nub-table-filter", inputs: ["column"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: NubTableComponent, decorators: [{
type: Component,
args: [{ selector: 'nub-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n\n<!-- Table Section -->\n<table>\n <caption *ngIf=\"localConfigs.caption\" [style.caption-side]=\"localConfigs.captionPosition\">{{localConfigs.caption}}</caption>\n\n <thead>\n <tr>\n <td\n *ngIf=\"localConfigs.search\"\n [attr.colspan]=\"localConfigs.columnOptions.length\"\n class=\"search-container\"\n [ngClass]=\"localConfigs.search.class\"\n >\n <!-- Search Section -->\n <label>\n {{ localConfigs.search.title }}\n <input\n type=\"text\"\n [title]=\"localConfigs.search.title\"\n [placeholder]=\"localConfigs.search.placeholder\"\n [formControl]=\"txtSearch\"\n />\n </label>\n </td>\n </tr>\n <tr [formGroup]=\"filterFormGroup\">\n <th class=\"title\" *ngFor=\"let col of localConfigs.columnOptions\">\n <div class=\"header-container\" (click)=\"!!col.sort && onChangeSortType(col)\">\n <span>{{ col.title }}</span>\n <span *ngIf=\"!!col.sort\" class=\"sorting\">\n <svg\n *ngIf=\"col.sort.type === 'asc'\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke-width=\"1.5\"\n stroke=\"currentColor\"\n >\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M19.5 8.25l-7.5 7.5-7.5-7.5\" />\n </svg>\n <svg\n *ngIf=\"col.sort.type === 'desc'\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke-width=\"1.5\"\n stroke=\"currentColor\"\n >\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 15.75l7.5-7.5 7.5 7.5\" />\n </svg>\n </span>\n </div>\n <div *ngIf=\"!!col.filter\" class=\"filtering\">\n <ng-container *ngIf=\"col.filter.component\">\n <nub-table-filter [column]=\"col\" [formControlName]=\"col.property\"></nub-table-filter>\n </ng-container>\n <ng-container *ngIf=\"!col.filter.component\">\n <input type=\"text\" [formControlName]=\"col.property\" />\n </ng-container>\n </div>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let row of tableMatrix$ | async\">\n <ng-container *ngFor=\"let column of row.columns\">\n <ng-container *ngIf=\"column.metadata['component']\">\n <nub-table-cell [cell]=\"column.cell\" [metadata]=\"column.metadata\"></nub-table-cell>\n </ng-container>\n <ng-container *ngIf=\"!column.metadata['component']\">\n <td>{{ column.cell['data'] }}</td>\n </ng-container>\n </ng-container>\n </tr>\n </tbody>\n <tfoot\n class=\"table-footer\"\n >\n <tr>\n <td\n [attr.colspan]=\"localConfigs.columnOptions.length\"\n >\n <ng-container *ngIf=\"!!localConfigs.footer?.component; else defaultFooter\" #footerComponent></ng-container>\n </td>\n </tr>\n </tfoot>\n</table>\n\n<ng-template #defaultFooter>\n <div class=\"footer-container\">\n <div class=\"settings\">\n <label>\n Items per page:\n <select [(ngModel)]=\"localConfigs.footer!.configs!.pageSize!\" (change)=\"setPageSize()\">\n <option *ngFor=\"let page of localConfigs.footer!.configs!.pageSizes\">\n <span>{{ page }}</span>\n </option>\n </select>\n </label>\n </div>\n <div class=\"pagination\">\n <div class=\"page-number\">\n {{(localConfigs.footer?.configs?.page! - 1) * localConfigs.footer?.configs?.pageSize! + 1}}\n -\n {{localConfigs.footer?.configs?.page! * localConfigs.footer?.configs?.pageSize!}}\n of\n {{localConfigs.footer?.configs?.totalItems}}\n </div>\n <div class=\"page-function\">\n <button type=\"button\" class=\"page-first\" (click)=\"goToPage(0)\"></button>\n <button type=\"button\" class=\"page-previous\" (click)=\"goToPage(localConfigs.footer?.configs?.page! > 1 ? localConfigs.footer?.configs?.page! - 2 : 0)\"></button>\n <button type=\"button\" class=\"page-next\" (click)=\"goToPage(localConfigs.footer?.configs?.page!)\"></button>\n <button type=\"button\" class=\"page-last\" (click)=\"goToPage(localConfigs.footer?.configs?.totalItems! / localConfigs.footer?.configs?.pageSize!)\"></button>\n </div>\n </div>\n </div>\n</ng-template>\n", styles: ["div.header-container{display:flex;align-items:center;justify-content:center}span.sorting{display:inline-block;width:24px;height:24px;margin-left:4px}.search-container{text-align:center}.footer-container{display:flex;align-items:center;justify-content:space-between}.pagination{display:flex;align-items:inherit;justify-content:flex-end}.page-number{margin-right:12px}.page-function button{border:none;background-color:#fff;width:26px;aspect-ratio:1 / 1}button.page-first{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' focusable='false'%3E%3Cpath d='M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z'%3E%3C/path%3E%3C/svg%3E\")}button.page-previous{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' focusable='false'%3E%3Cpath d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'%3E%3C/path%3E%3C/svg%3E\")}button.page-next{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' focusable='false'%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'%3E%3C/path%3E%3C/svg%3E\")}button.page-last{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' focusable='false'%3E%3Cpath d='M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z'%3E%3C/path%3E%3C/svg%3E\")}\n"] }]
}], ctorParameters: function () { return []; }, propDecorators: { configs: [{
type: Input
}], footerComponent: [{
type: ViewChild,
args: ['footerComponent', { read: ViewContainerRef }]
}] } });
class NubTableModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: NubTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.5", ngImport: i0, type: NubTableModule, declarations: [NubTableComponent,
NubTableCellComponent,
NubFilterComponent], imports: [CommonModule, FormsModule, ReactiveFormsModule, NubUtilsModule], exports: [NubTableComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: NubTableModule, imports: [CommonModule, FormsModule, ReactiveFormsModule, NubUtilsModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: NubTableModule, decorators: [{
type: NgModule,
args: [{
declarations: [
NubTableComponent,
NubTableCellComponent,
NubFilterComponent,
],
imports: [CommonModule, FormsModule, ReactiveFormsModule, NubUtilsModule],
exports: [NubTableComponent],
}]
}] });
/*
* Public API Surface of table
*/
/**
* Generated bundle index. Do not edit.
*/
export { NubTableComponent, NubTableModule, NubTableService };
//# sourceMappingURL=ngx-ui-builder-table.mjs.map