UNPKG

@rxap/table-system

Version:

This package provides a set of Angular directives, components, and services to enhance data tables with features like row expansion, full-text search, and row selection with checkboxes. It includes modules for easy integration of these features into exist

385 lines (368 loc) 24.4 kB
import * as i0 from '@angular/core'; import { Injectable, Component, ChangeDetectionStrategy, Inject, Input, TemplateRef, ViewContainerRef, ChangeDetectorRef, Directive, NgModule, ContentChild, HostListener } from '@angular/core'; import { SelectionModel } from '@angular/cdk/collections'; import { map, distinctUntilChanged, tap, debounceTime, filter } from 'rxjs/operators'; import { EMPTY, BehaviorSubject } from 'rxjs'; import * as i2 from '@angular/material/checkbox'; import { MatCheckboxModule } from '@angular/material/checkbox'; import * as i3 from '@angular/cdk/table'; import { CdkTable } from '@angular/cdk/table'; import { AsyncPipe, NgIf } from '@angular/common'; import * as i1 from '@angular/forms'; import { NgModel } from '@angular/forms'; import { RXAP_TABLE_FILTER } from '@rxap/material-table-system'; import * as i1$1 from '@angular/cdk/portal'; import { TemplatePortal, PortalModule } from '@angular/cdk/portal'; import { trigger, state, style, transition, animate } from '@angular/animations'; import * as i2$1 from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon'; import * as i1$2 from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button'; class SelectRowService { constructor() { this.selectionModel = new SelectionModel(true); this.selectedRows$ = this.selectionModel.changed.pipe(map(() => this.selectionModel.selected)); } get selectedRows() { return this.selectionModel.selected; } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SelectRowService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); } static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SelectRowService }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SelectRowService, decorators: [{ type: Injectable }], ctorParameters: () => [] }); class CheckboxHeaderCellComponent { constructor(cdkTable, selectRow) { this.cdkTable = cdkTable; this.selectRow = selectRow; this.indeterminate$ = EMPTY; this.checked$ = EMPTY; } ngOnInit() { this.indeterminate$ = this.selectRow.selectedRows$.pipe(map(selectedRows => !!selectedRows.length && this.cdkTable['_data'].length !== selectedRows.length)); this.checked$ = this.selectRow.selectedRows$.pipe(map(selectedRows => !!selectedRows.length && this.cdkTable['_data'].length === selectedRows.length)); } onChange($event) { if ($event.checked) { this.selectRow.selectionModel.select(...this.cdkTable['_data']); } else { this.selectRow.selectionModel.clear(); } } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: CheckboxHeaderCellComponent, deps: [{ token: CdkTable }, { token: SelectRowService }], target: i0.ɵɵFactoryTarget.Component }); } static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: CheckboxHeaderCellComponent, isStandalone: true, selector: "th[rxap-checkbox-header-cell]", ngImport: i0, template: "<mat-checkbox\n (change)=\"onChange($event)\"\n [checked]=\"(checked$ | async) ?? false\"\n [indeterminate]=\"indeterminate$ | async\">\n</mat-checkbox>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: CheckboxHeaderCellComponent, decorators: [{ type: Component, args: [{ selector: 'th[rxap-checkbox-header-cell]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatCheckboxModule, AsyncPipe], template: "<mat-checkbox\n (change)=\"onChange($event)\"\n [checked]=\"(checked$ | async) ?? false\"\n [indeterminate]=\"indeterminate$ | async\">\n</mat-checkbox>\n" }] }], ctorParameters: () => [{ type: i3.CdkTable, decorators: [{ type: Inject, args: [CdkTable] }] }, { type: SelectRowService }] }); class CheckboxCellComponent { constructor(selectRow) { this.selectRow = selectRow; } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: CheckboxCellComponent, deps: [{ token: SelectRowService }], target: i0.ɵɵFactoryTarget.Component }); } static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: CheckboxCellComponent, isStandalone: true, selector: "td[rxap-checkbox-cell]", inputs: { element: "element" }, ngImport: i0, template: "<mat-checkbox\n (change)=\"selectRow.selectionModel.toggle(element)\"\n [checked]=\"selectRow.selectionModel.isSelected(element)\">\n</mat-checkbox>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: CheckboxCellComponent, decorators: [{ type: Component, args: [{ selector: 'td[rxap-checkbox-cell]', changeDetection: ChangeDetectionStrategy.Default, imports: [MatCheckboxModule], template: "<mat-checkbox\n (change)=\"selectRow.selectionModel.toggle(element)\"\n [checked]=\"selectRow.selectionModel.isSelected(element)\">\n</mat-checkbox>\n" }] }], ctorParameters: () => [{ type: SelectRowService, decorators: [{ type: Inject, args: [SelectRowService] }] }], propDecorators: { element: [{ type: Input, args: [{ required: true }] }] } }); class AllRowsSelectedDirective { constructor(template, viewContainerRef, cdr, selectRowService, cdkTable) { this.template = template; this.viewContainerRef = viewContainerRef; this.cdr = cdr; this.selectRowService = selectRowService; this.cdkTable = cdkTable; } ngOnDestroy() { this._subscription?.unsubscribe(); } ngOnInit() { this._subscription = this.selectRowService.selectedRows$.pipe(map(selectedRows => !!selectedRows.length && selectedRows.length === this.cdkTable['_data'].length), distinctUntilChanged(), tap(selectedAllRows => { this.viewContainerRef.clear(); if (selectedAllRows) { this.viewContainerRef.createEmbeddedView(this.template, { $implicit: this.selectRowService.selectedRows }); } this.cdr.detectChanges(); })).subscribe(); } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AllRowsSelectedDirective, deps: [{ token: TemplateRef }, { token: ViewContainerRef }, { token: ChangeDetectorRef }, { token: SelectRowService }, { token: CdkTable }], target: i0.ɵɵFactoryTarget.Directive }); } static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: AllRowsSelectedDirective, isStandalone: true, selector: "[rxapAllRowsSelected]", ngImport: i0 }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AllRowsSelectedDirective, decorators: [{ type: Directive, args: [{ selector: '[rxapAllRowsSelected]', standalone: true, }] }], ctorParameters: () => [{ type: i0.TemplateRef, decorators: [{ type: Inject, args: [TemplateRef] }] }, { type: i0.ViewContainerRef, decorators: [{ type: Inject, args: [ViewContainerRef] }] }, { type: i0.ChangeDetectorRef, decorators: [{ type: Inject, args: [ChangeDetectorRef] }] }, { type: SelectRowService, decorators: [{ type: Inject, args: [SelectRowService] }] }, { type: i3.CdkTable, decorators: [{ type: Inject, args: [CdkTable] }] }] }); class SelectRowModule { static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SelectRowModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); } static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: SelectRowModule, imports: [AllRowsSelectedDirective], exports: [AllRowsSelectedDirective] }); } static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SelectRowModule, providers: [SelectRowService] }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SelectRowModule, decorators: [{ type: NgModule, args: [{ imports: [AllRowsSelectedDirective], exports: [ AllRowsSelectedDirective, ], providers: [SelectRowService], }] }] }); class TableFullTextSearchService { constructor() { this.change = new BehaviorSubject(''); } get current() { return this.change.value; } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: TableFullTextSearchService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); } static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: TableFullTextSearchService }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: TableFullTextSearchService, decorators: [{ type: Injectable }] }); class TableFilterInputDirective { constructor(ngModel, stringFilterService) { this.ngModel = ngModel; this.stringFilterService = stringFilterService; } ngOnDestroy() { this._subscription?.unsubscribe(); } ngOnInit() { this._subscription = this.ngModel.valueChanges ?.pipe(debounceTime(128), tap((value) => this.stringFilterService.change.next(value && value.length >= 3 ? value : null))) .subscribe(); } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: TableFilterInputDirective, deps: [{ token: NgModel }, { token: RXAP_TABLE_FILTER }], target: i0.ɵɵFactoryTarget.Directive }); } static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: TableFilterInputDirective, isStandalone: true, selector: "input[ngModel][rxapTableFilterInput]", ngImport: i0 }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: TableFilterInputDirective, decorators: [{ type: Directive, args: [{ selector: 'input[ngModel][rxapTableFilterInput]', standalone: true, }] }], ctorParameters: () => [{ type: i1.NgModel, decorators: [{ type: Inject, args: [NgModel] }] }, { type: TableFullTextSearchService, decorators: [{ type: Inject, args: [RXAP_TABLE_FILTER] }] }] }); class ExpandRowContentDirective { static ngTemplateContextGuard(dir, ctx) { return true; } constructor(template) { this.template = template; } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ExpandRowContentDirective, deps: [{ token: TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); } static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: ExpandRowContentDirective, isStandalone: true, selector: "[rxapExpandRowContent]", ngImport: i0 }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ExpandRowContentDirective, decorators: [{ type: Directive, args: [{ selector: '[rxapExpandRowContent]', standalone: true, }] }], ctorParameters: () => [{ type: i0.TemplateRef, decorators: [{ type: Inject, args: [TemplateRef] }] }] }); /** * @deprecated use from @rxap/material-table-system */ class ExpandRowService { constructor() { this.expandedRow = new BehaviorSubject(null); } toggleRow(row) { if (this.expandedRow.value === row) { this.expandedRow.next(null); } else { this.expandedRow.next(row); } } isExpanded(row) { return this.expandedRow.value === row; } isExpanded$(row) { return this.expandedRow.pipe(map((expandedRow) => expandedRow === row)); } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ExpandRowService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); } static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ExpandRowService }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ExpandRowService, decorators: [{ type: Injectable }] }); class ExpandRowContainerComponent { constructor(viewContainerRef, expandCell) { this.viewContainerRef = viewContainerRef; this.expandCell = expandCell; this.portal = null; } ngOnDestroy() { this._subscription?.unsubscribe(); } ngAfterContentInit() { if (this.expandCellContent) { this._subscription = this.expandCell.isExpanded$(this.element).pipe(filter(Boolean), tap(() => { if (!this.portal) { this.portal = new TemplatePortal(this.expandCellContent.template, this.viewContainerRef, { $implicit: this.element }); } })).subscribe(); } } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ExpandRowContainerComponent, deps: [{ token: ViewContainerRef }, { token: ExpandRowService }], target: i0.ɵɵFactoryTarget.Component }); } static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: ExpandRowContainerComponent, isStandalone: true, selector: "td[rxap-expand-row]", inputs: { element: ["rxap-expand-row", "element"] }, queries: [{ propertyName: "expandCellContent", first: true, predicate: ExpandRowContentDirective, descendants: true }], ngImport: i0, template: "<div [@detailExpand]=\"(expandCell.isExpanded$(element) | async) ? 'expanded' : 'collapsed'\" class=\"element-detail\">\n <ng-content></ng-content>\n <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\n</div>\n", styles: [".element-detail{overflow:hidden;display:flex}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "pipe", type: 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: "19.2.1", ngImport: i0, type: ExpandRowContainerComponent, decorators: [{ type: Component, args: [{ selector: 'td[rxap-expand-row]', 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)')), ]), ], imports: [PortalModule, AsyncPipe], template: "<div [@detailExpand]=\"(expandCell.isExpanded$(element) | async) ? 'expanded' : 'collapsed'\" class=\"element-detail\">\n <ng-content></ng-content>\n <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\n</div>\n", styles: [".element-detail{overflow:hidden;display:flex}\n"] }] }], ctorParameters: () => [{ type: i0.ViewContainerRef, decorators: [{ type: Inject, args: [ViewContainerRef] }] }, { type: ExpandRowService, decorators: [{ type: Inject, args: [ExpandRowService] }] }], propDecorators: { element: [{ type: Input, args: [{ required: true, alias: 'rxap-expand-row', }] }], expandCellContent: [{ type: ContentChild, args: [ExpandRowContentDirective] }] } }); class ExpandControlsCellComponent { constructor(expandCell) { this.expandCell = expandCell; } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ExpandControlsCellComponent, deps: [{ token: ExpandRowService }], target: i0.ɵɵFactoryTarget.Component }); } static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: ExpandControlsCellComponent, isStandalone: true, selector: "td[rxap-expand-controls-cell]", inputs: { element: ["rxap-expand-controls-cell", "element"] }, ngImport: i0, template: "<button type=\"button\" mat-icon-button>\n <mat-icon *ngIf=\"expandCell.isExpanded$(element) | async; else notExpanded\">expand_more</mat-icon>\n <ng-template #notExpanded>\n <mat-icon>keyboard_arrow_right</mat-icon>\n </ng-template>\n</button>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ExpandControlsCellComponent, decorators: [{ type: Component, args: [{ selector: 'td[rxap-expand-controls-cell]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButtonModule, NgIf, MatIconModule, AsyncPipe], template: "<button type=\"button\" mat-icon-button>\n <mat-icon *ngIf=\"expandCell.isExpanded$(element) | async; else notExpanded\">expand_more</mat-icon>\n <ng-template #notExpanded>\n <mat-icon>keyboard_arrow_right</mat-icon>\n </ng-template>\n</button>\n" }] }], ctorParameters: () => [{ type: ExpandRowService, decorators: [{ type: Inject, args: [ExpandRowService] }] }], propDecorators: { element: [{ type: Input, args: [{ required: true, alias: 'rxap-expand-controls-cell', }] }] } }); class ExpandRowDirective { get isExpanded() { return this.expandCell.isExpanded(this.element); } constructor(expandCell) { this.expandCell = expandCell; } onClick() { this.expandCell.toggleRow(this.element); } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ExpandRowDirective, deps: [{ token: ExpandRowService }], target: i0.ɵɵFactoryTarget.Directive }); } static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: ExpandRowDirective, isStandalone: true, selector: "tr[rxapExpandRow]", inputs: { element: ["rxapExpandRow", "element"] }, host: { listeners: { "expanded-row": "isExpanded()", "click": "onClick()" } }, ngImport: i0 }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ExpandRowDirective, decorators: [{ type: Directive, args: [{ selector: 'tr[rxapExpandRow]', standalone: true, }] }], ctorParameters: () => [{ type: ExpandRowService, decorators: [{ type: Inject, args: [ExpandRowService] }] }], propDecorators: { isExpanded: [{ type: HostListener, args: ['expanded-row'] }], element: [{ type: Input, args: [{ required: true, alias: 'rxapExpandRow', }] }], onClick: [{ type: HostListener, args: ['click'] }] } }); /** * @deprecated use from @rxap/material-table-system */ class ExpandRowModule { static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ExpandRowModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); } static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: ExpandRowModule, imports: [ExpandRowDirective], exports: [ExpandRowDirective] }); } static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ExpandRowModule, providers: [ExpandRowService] }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ExpandRowModule, decorators: [{ type: NgModule, args: [{ imports: [ExpandRowDirective], exports: [ ExpandRowDirective, ], providers: [ExpandRowService], }] }] }); // region select-row checkbox-header-cell // endregion /** * Generated bundle index. Do not edit. */ export { AllRowsSelectedDirective, CheckboxCellComponent, CheckboxHeaderCellComponent, ExpandControlsCellComponent, ExpandRowContainerComponent, ExpandRowContentDirective, ExpandRowDirective, ExpandRowModule, ExpandRowService, SelectRowModule, SelectRowService, TableFilterInputDirective, TableFullTextSearchService }; //# sourceMappingURL=rxap-table-system.mjs.map