@taiga-ui/addon-table
Version:
A library to display tabled data with filters, search, group actions, etc.
66 lines • 13.1 kB
JavaScript
import { isPlatformServer } from '@angular/common';
import { ChangeDetectionStrategy, Component, computed, EventEmitter, inject, Input, Output, PLATFORM_ID, signal, ViewChild, } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
import { TuiPresent } from '@taiga-ui/kit/directives/present';
import { map, of, Subject, switchMap, timer } from 'rxjs';
import { TUI_TABLE_OPTIONS } from '../table.options';
import * as i0 from "@angular/core";
import * as i1 from "@taiga-ui/kit/directives/present";
class TuiTableExpand {
constructor() {
this.el = tuiInjectElement();
this.server = isPlatformServer(inject(PLATFORM_ID));
this.transitioning = signal(false);
this.contentHeight = computed((_ = this.expanded()) => this.update());
this.visible$ = new Subject();
this.sub = this.visible$
.pipe(switchMap((v) => (v ? timer(500).pipe(map(() => v)) : of(v))), takeUntilDestroyed())
.subscribe((visible) => this.el.classList.toggle('_visible', visible));
this.expandedChange = new EventEmitter();
this.expanded = signal(inject(TUI_TABLE_OPTIONS).open);
}
set expandedSetter(open) {
this.expanded.set(open);
this.transitioning.set(true);
}
toggle() {
this.expanded.set(!this.expanded());
this.transitioning.set(true);
this.expandedChange.emit(this.expanded());
}
update() {
if (!this.content || this.server) {
return 0;
}
const el = this.content.nativeElement;
el.style.setProperty('display', 'block');
const height = el.getBoundingClientRect().height;
el.style.removeProperty('display');
return height;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiTableExpand, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiTableExpand, isStandalone: true, selector: "tui-table-expand", inputs: { expandedSetter: ["expanded", "expandedSetter"] }, outputs: { expandedChange: "expandedChange" }, host: { attributes: { "ngSkipHydration": "true" }, listeners: { "tuiPresentChange": "visible$.next($event)" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }], hostDirectives: [{ directive: i1.TuiPresent, outputs: ["tuiPresentChange", "tuiPresentChange"] }], ngImport: i0, template: "<div\n #content\n class=\"t-content\"\n [class.t-content_open]=\"expanded() && !transitioning()\"\n>\n <ng-content />\n</div>\n\n<div\n class=\"t-filler\"\n [class.t-filler_open]=\"expanded()\"\n [style.--t-height.px]=\"contentHeight()\"\n (animationcancel)=\"transitioning.set(false)\"\n (animationend)=\"transitioning.set(false)\"\n (animationstart)=\"transitioning.set(true)\"\n></div>\n", styles: ["@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes open{0%{block-size:0}to{block-size:var(--t-height)}}@keyframes close{0%{block-size:var(--t-height)}to{block-size:0}}:host{display:contents}:host:not(._visible){--tui-duration: 0ms}.t-content{display:none}.t-content_open{display:contents}.t-content_open ::ng-deep tr{animation:fade-in var(--tui-duration)}.t-filler{animation:close calc(var(--tui-duration) + 1ms)}.t-filler_open{animation:open calc(var(--tui-duration) + 1ms)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
export { TuiTableExpand };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiTableExpand, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'tui-table-expand', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
{
directive: TuiPresent,
outputs: ['tuiPresentChange'],
},
], host: {
ngSkipHydration: 'true',
'(tuiPresentChange)': 'visible$.next($event)',
}, template: "<div\n #content\n class=\"t-content\"\n [class.t-content_open]=\"expanded() && !transitioning()\"\n>\n <ng-content />\n</div>\n\n<div\n class=\"t-filler\"\n [class.t-filler_open]=\"expanded()\"\n [style.--t-height.px]=\"contentHeight()\"\n (animationcancel)=\"transitioning.set(false)\"\n (animationend)=\"transitioning.set(false)\"\n (animationstart)=\"transitioning.set(true)\"\n></div>\n", styles: ["@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes open{0%{block-size:0}to{block-size:var(--t-height)}}@keyframes close{0%{block-size:var(--t-height)}to{block-size:0}}:host{display:contents}:host:not(._visible){--tui-duration: 0ms}.t-content{display:none}.t-content_open{display:contents}.t-content_open ::ng-deep tr{animation:fade-in var(--tui-duration)}.t-filler{animation:close calc(var(--tui-duration) + 1ms)}.t-filler_open{animation:open calc(var(--tui-duration) + 1ms)}\n"] }]
}], propDecorators: { content: [{
type: ViewChild,
args: ['content', { static: true }]
}], expandedChange: [{
type: Output
}], expandedSetter: [{
type: Input,
args: ['expanded']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFibGUtZXhwYW5kLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FkZG9uLXRhYmxlL2NvbXBvbmVudHMvdGFibGUvdGFibGUtZXhwYW5kL3RhYmxlLWV4cGFuZC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hZGRvbi10YWJsZS9jb21wb25lbnRzL3RhYmxlL3RhYmxlLWV4cGFuZC90YWJsZS1leHBhbmQudGVtcGxhdGUuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsZ0JBQWdCLEVBQUMsTUFBTSxpQkFBaUIsQ0FBQztBQUVqRCxPQUFPLEVBQ0gsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxRQUFRLEVBQ1IsWUFBWSxFQUNaLE1BQU0sRUFDTixLQUFLLEVBQ0wsTUFBTSxFQUNOLFdBQVcsRUFDWCxNQUFNLEVBQ04sU0FBUyxHQUNaLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBQyxrQkFBa0IsRUFBQyxNQUFNLDRCQUE0QixDQUFDO0FBQzlELE9BQU8sRUFBQyxnQkFBZ0IsRUFBQyxNQUFNLHlCQUF5QixDQUFDO0FBQ3pELE9BQU8sRUFBQyxVQUFVLEVBQUMsTUFBTSxrQ0FBa0MsQ0FBQztBQUM1RCxPQUFPLEVBQUMsR0FBRyxFQUFFLEVBQUUsRUFBRSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBQyxNQUFNLE1BQU0sQ0FBQztBQUV4RCxPQUFPLEVBQUMsaUJBQWlCLEVBQUMsTUFBTSxrQkFBa0IsQ0FBQzs7O0FBRW5ELE1BaUJhLGNBQWM7SUFqQjNCO1FBcUJxQixPQUFFLEdBQUcsZ0JBQWdCLEVBQUUsQ0FBQztRQUN4QixXQUFNLEdBQUcsZ0JBQWdCLENBQUMsTUFBTSxDQUFDLFdBQVcsQ0FBQyxDQUFDLENBQUM7UUFFN0Msa0JBQWEsR0FBRyxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDOUIsa0JBQWEsR0FBRyxRQUFRLENBQUMsQ0FBQyxDQUFDLEdBQUcsSUFBSSxDQUFDLFFBQVEsRUFBRSxFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUMsQ0FBQztRQUNqRSxhQUFRLEdBQUcsSUFBSSxPQUFPLEVBQVcsQ0FBQztRQUNsQyxRQUFHLEdBQUcsSUFBSSxDQUFDLFFBQVE7YUFDakMsSUFBSSxDQUNELFNBQVMsQ0FBQyxDQUFDLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLEdBQUcsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLEVBQzdELGtCQUFrQixFQUFFLENBQ3ZCO2FBQ0EsU0FBUyxDQUFDLENBQUMsT0FBTyxFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLFNBQVMsQ0FBQyxNQUFNLENBQUMsVUFBVSxFQUFFLE9BQU8sQ0FBQyxDQUFDLENBQUM7UUFHM0QsbUJBQWMsR0FBRyxJQUFJLFlBQVksRUFBVyxDQUFDO1FBRTdDLGFBQVEsR0FBRyxNQUFNLENBQUMsTUFBTSxDQUFDLGlCQUFpQixDQUFDLENBQUMsSUFBSSxDQUFDLENBQUM7S0E2QnJFO0lBM0JHLElBQ1csY0FBYyxDQUFDLElBQWE7UUFDbkMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDeEIsSUFBSSxDQUFDLGFBQWEsQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDakMsQ0FBQztJQUVNLE1BQU07UUFDVCxJQUFJLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQyxDQUFDO1FBQ3BDLElBQUksQ0FBQyxhQUFhLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQzdCLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQyxDQUFDO0lBQzlDLENBQUM7SUFFTyxNQUFNO1FBQ1YsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLElBQUksSUFBSSxDQUFDLE1BQU0sRUFBRTtZQUM5QixPQUFPLENBQUMsQ0FBQztTQUNaO1FBRUQsTUFBTSxFQUFFLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxhQUFhLENBQUM7UUFFdEMsRUFBRSxDQUFDLEtBQUssQ0FBQyxXQUFXLENBQUMsU0FBUyxFQUFFLE9BQU8sQ0FBQyxDQUFDO1FBRXpDLE1BQU0sTUFBTSxHQUFHLEVBQUUsQ0FBQyxxQkFBcUIsRUFBRSxDQUFDLE1BQU0sQ0FBQztRQUVqRCxFQUFFLENBQUMsS0FBSyxDQUFDLGNBQWMsQ0FBQyxTQUFTLENBQUMsQ0FBQztRQUVuQyxPQUFPLE1BQU0sQ0FBQztJQUNsQixDQUFDOytHQWhEUSxjQUFjO21HQUFkLGNBQWMsNmZDdEMzQixzYUFnQkE7O1NEc0JhLGNBQWM7NEZBQWQsY0FBYztrQkFqQjFCLFNBQVM7aUNBQ00sSUFBSSxZQUNOLGtCQUFrQixtQkFHWCx1QkFBdUIsQ0FBQyxNQUFNLGtCQUMvQjt3QkFDWjs0QkFDSSxTQUFTLEVBQUUsVUFBVTs0QkFDckIsT0FBTyxFQUFFLENBQUMsa0JBQWtCLENBQUM7eUJBQ2hDO3FCQUNKLFFBQ0s7d0JBQ0YsZUFBZSxFQUFFLE1BQU07d0JBQ3ZCLG9CQUFvQixFQUFFLHVCQUF1QjtxQkFDaEQ7OEJBSWdCLE9BQU87c0JBRHZCLFNBQVM7dUJBQUMsU0FBUyxFQUFFLEVBQUMsTUFBTSxFQUFFLElBQUksRUFBQztnQkFpQnBCLGNBQWM7c0JBRDdCLE1BQU07Z0JBTUksY0FBYztzQkFEeEIsS0FBSzt1QkFBQyxVQUFVIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtpc1BsYXRmb3JtU2VydmVyfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHR5cGUge0VsZW1lbnRSZWZ9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtcbiAgICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgICBDb21wb25lbnQsXG4gICAgY29tcHV0ZWQsXG4gICAgRXZlbnRFbWl0dGVyLFxuICAgIGluamVjdCxcbiAgICBJbnB1dCxcbiAgICBPdXRwdXQsXG4gICAgUExBVEZPUk1fSUQsXG4gICAgc2lnbmFsLFxuICAgIFZpZXdDaGlsZCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge3Rha2VVbnRpbERlc3Ryb3llZH0gZnJvbSAnQGFuZ3VsYXIvY29yZS9yeGpzLWludGVyb3AnO1xuaW1wb3J0IHt0dWlJbmplY3RFbGVtZW50fSBmcm9tICdAdGFpZ2EtdWkvY2RrL3V0aWxzL2RvbSc7XG5pbXBvcnQge1R1aVByZXNlbnR9IGZyb20gJ0B0YWlnYS11aS9raXQvZGlyZWN0aXZlcy9wcmVzZW50JztcbmltcG9ydCB7bWFwLCBvZiwgU3ViamVjdCwgc3dpdGNoTWFwLCB0aW1lcn0gZnJvbSAncnhqcyc7XG5cbmltcG9ydCB7VFVJX1RBQkxFX09QVElPTlN9IGZyb20gJy4uL3RhYmxlLm9wdGlvbnMnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxuICAgIHNlbGVjdG9yOiAndHVpLXRhYmxlLWV4cGFuZCcsXG4gICAgdGVtcGxhdGVVcmw6ICcuL3RhYmxlLWV4cGFuZC50ZW1wbGF0ZS5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi90YWJsZS1leHBhbmQuc3R5bGUubGVzcyddLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICAgIGhvc3REaXJlY3RpdmVzOiBbXG4gICAgICAgIHtcbiAgICAgICAgICAgIGRpcmVjdGl2ZTogVHVpUHJlc2VudCxcbiAgICAgICAgICAgIG91dHB1dHM6IFsndHVpUHJlc2VudENoYW5nZSddLFxuICAgICAgICB9LFxuICAgIF0sXG4gICAgaG9zdDoge1xuICAgICAgICBuZ1NraXBIeWRyYXRpb246ICd0cnVlJyxcbiAgICAgICAgJyh0dWlQcmVzZW50Q2hhbmdlKSc6ICd2aXNpYmxlJC5uZXh0KCRldmVudCknLFxuICAgIH0sXG59KVxuZXhwb3J0IGNsYXNzIFR1aVRhYmxlRXhwYW5kIHtcbiAgICBAVmlld0NoaWxkKCdjb250ZW50Jywge3N0YXRpYzogdHJ1ZX0pXG4gICAgcHJpdmF0ZSByZWFkb25seSBjb250ZW50PzogRWxlbWVudFJlZjxIVE1MRWxlbWVudD47XG5cbiAgICBwcml2YXRlIHJlYWRvbmx5IGVsID0gdHVpSW5qZWN0RWxlbWVudCgpO1xuICAgIHByaXZhdGUgcmVhZG9ubHkgc2VydmVyID0gaXNQbGF0Zm9ybVNlcnZlcihpbmplY3QoUExBVEZPUk1fSUQpKTtcblxuICAgIHByb3RlY3RlZCByZWFkb25seSB0cmFuc2l0aW9uaW5nID0gc2lnbmFsKGZhbHNlKTtcbiAgICBwcm90ZWN0ZWQgcmVhZG9ubHkgY29udGVudEhlaWdodCA9IGNvbXB1dGVkKChfID0gdGhpcy5leHBhbmRlZCgpKSA9PiB0aGlzLnVwZGF0ZSgpKTtcbiAgICBwcm90ZWN0ZWQgcmVhZG9ubHkgdmlzaWJsZSQgPSBuZXcgU3ViamVjdDxib29sZWFuPigpO1xuICAgIHByb3RlY3RlZCByZWFkb25seSBzdWIgPSB0aGlzLnZpc2libGUkXG4gICAgICAgIC5waXBlKFxuICAgICAgICAgICAgc3dpdGNoTWFwKCh2KSA9PiAodiA/IHRpbWVyKDUwMCkucGlwZShtYXAoKCkgPT4gdikpIDogb2YodikpKSxcbiAgICAgICAgICAgIHRha2VVbnRpbERlc3Ryb3llZCgpLFxuICAgICAgICApXG4gICAgICAgIC5zdWJzY3JpYmUoKHZpc2libGUpID0+IHRoaXMuZWwuY2xhc3NMaXN0LnRvZ2dsZSgnX3Zpc2libGUnLCB2aXNpYmxlKSk7XG5cbiAgICBAT3V0cHV0KClcbiAgICBwdWJsaWMgcmVhZG9ubHkgZXhwYW5kZWRDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPGJvb2xlYW4+KCk7XG5cbiAgICBwdWJsaWMgcmVhZG9ubHkgZXhwYW5kZWQgPSBzaWduYWwoaW5qZWN0KFRVSV9UQUJMRV9PUFRJT05TKS5vcGVuKTtcblxuICAgIEBJbnB1dCgnZXhwYW5kZWQnKVxuICAgIHB1YmxpYyBzZXQgZXhwYW5kZWRTZXR0ZXIob3BlbjogYm9vbGVhbikge1xuICAgICAgICB0aGlzLmV4cGFuZGVkLnNldChvcGVuKTtcbiAgICAgICAgdGhpcy50cmFuc2l0aW9uaW5nLnNldCh0cnVlKTtcbiAgICB9XG5cbiAgICBwdWJsaWMgdG9nZ2xlKCk6IHZvaWQge1xuICAgICAgICB0aGlzLmV4cGFuZGVkLnNldCghdGhpcy5leHBhbmRlZCgpKTtcbiAgICAgICAgdGhpcy50cmFuc2l0aW9uaW5nLnNldCh0cnVlKTtcbiAgICAgICAgdGhpcy5leHBhbmRlZENoYW5nZS5lbWl0KHRoaXMuZXhwYW5kZWQoKSk7XG4gICAgfVxuXG4gICAgcHJpdmF0ZSB1cGRhdGUoKTogbnVtYmVyIHtcbiAgICAgICAgaWYgKCF0aGlzLmNvbnRlbnQgfHwgdGhpcy5zZXJ2ZXIpIHtcbiAgICAgICAgICAgIHJldHVybiAwO1xuICAgICAgICB9XG5cbiAgICAgICAgY29uc3QgZWwgPSB0aGlzLmNvbnRlbnQubmF0aXZlRWxlbWVudDtcblxuICAgICAgICBlbC5zdHlsZS5zZXRQcm9wZXJ0eSgnZGlzcGxheScsICdibG9jaycpO1xuXG4gICAgICAgIGNvbnN0IGhlaWdodCA9IGVsLmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpLmhlaWdodDtcblxuICAgICAgICBlbC5zdHlsZS5yZW1vdmVQcm9wZXJ0eSgnZGlzcGxheScpO1xuXG4gICAgICAgIHJldHVybiBoZWlnaHQ7XG4gICAgfVxufVxuIiwiPGRpdlxuICAgICNjb250ZW50XG4gICAgY2xhc3M9XCJ0LWNvbnRlbnRcIlxuICAgIFtjbGFzcy50LWNvbnRlbnRfb3Blbl09XCJleHBhbmRlZCgpICYmICF0cmFuc2l0aW9uaW5nKClcIlxuPlxuICAgIDxuZy1jb250ZW50IC8+XG48L2Rpdj5cblxuPGRpdlxuICAgIGNsYXNzPVwidC1maWxsZXJcIlxuICAgIFtjbGFzcy50LWZpbGxlcl9vcGVuXT1cImV4cGFuZGVkKClcIlxuICAgIFtzdHlsZS4tLXQtaGVpZ2h0LnB4XT1cImNvbnRlbnRIZWlnaHQoKVwiXG4gICAgKGFuaW1hdGlvbmNhbmNlbCk9XCJ0cmFuc2l0aW9uaW5nLnNldChmYWxzZSlcIlxuICAgIChhbmltYXRpb25lbmQpPVwidHJhbnNpdGlvbmluZy5zZXQoZmFsc2UpXCJcbiAgICAoYW5pbWF0aW9uc3RhcnQpPVwidHJhbnNpdGlvbmluZy5zZXQodHJ1ZSlcIlxuPjwvZGl2PlxuIl19