@taiga-ui/addon-table
Version:
A library to display tabled data with filters, search, group actions, etc.
65 lines • 12.9 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: { 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: {
'(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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFibGUtZXhwYW5kLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FkZG9uLXRhYmxlL2NvbXBvbmVudHMvdGFibGUvdGFibGUtZXhwYW5kL3RhYmxlLWV4cGFuZC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hZGRvbi10YWJsZS9jb21wb25lbnRzL3RhYmxlL3RhYmxlLWV4cGFuZC90YWJsZS1leHBhbmQudGVtcGxhdGUuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsZ0JBQWdCLEVBQUMsTUFBTSxpQkFBaUIsQ0FBQztBQUVqRCxPQUFPLEVBQ0gsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxRQUFRLEVBQ1IsWUFBWSxFQUNaLE1BQU0sRUFDTixLQUFLLEVBQ0wsTUFBTSxFQUNOLFdBQVcsRUFDWCxNQUFNLEVBQ04sU0FBUyxHQUNaLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBQyxrQkFBa0IsRUFBQyxNQUFNLDRCQUE0QixDQUFDO0FBQzlELE9BQU8sRUFBQyxnQkFBZ0IsRUFBQyxNQUFNLHlCQUF5QixDQUFDO0FBQ3pELE9BQU8sRUFBQyxVQUFVLEVBQUMsTUFBTSxrQ0FBa0MsQ0FBQztBQUM1RCxPQUFPLEVBQUMsR0FBRyxFQUFFLEVBQUUsRUFBRSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBQyxNQUFNLE1BQU0sQ0FBQztBQUV4RCxPQUFPLEVBQUMsaUJBQWlCLEVBQUMsTUFBTSxrQkFBa0IsQ0FBQzs7O0FBRW5ELE1BZ0JhLGNBQWM7SUFoQjNCO1FBb0JxQixPQUFFLEdBQUcsZ0JBQWdCLEVBQUUsQ0FBQztRQUN4QixXQUFNLEdBQUcsZ0JBQWdCLENBQUMsTUFBTSxDQUFDLFdBQVcsQ0FBQyxDQUFDLENBQUM7UUFFN0Msa0JBQWEsR0FBRyxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDOUIsa0JBQWEsR0FBRyxRQUFRLENBQUMsQ0FBQyxDQUFDLEdBQUcsSUFBSSxDQUFDLFFBQVEsRUFBRSxFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUMsQ0FBQztRQUNqRSxhQUFRLEdBQUcsSUFBSSxPQUFPLEVBQVcsQ0FBQztRQUNsQyxRQUFHLEdBQUcsSUFBSSxDQUFDLFFBQVE7YUFDakMsSUFBSSxDQUNELFNBQVMsQ0FBQyxDQUFDLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLEdBQUcsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLEVBQzdELGtCQUFrQixFQUFFLENBQ3ZCO2FBQ0EsU0FBUyxDQUFDLENBQUMsT0FBTyxFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLFNBQVMsQ0FBQyxNQUFNLENBQUMsVUFBVSxFQUFFLE9BQU8sQ0FBQyxDQUFDLENBQUM7UUFHM0QsbUJBQWMsR0FBRyxJQUFJLFlBQVksRUFBVyxDQUFDO1FBRTdDLGFBQVEsR0FBRyxNQUFNLENBQUMsTUFBTSxDQUFDLGlCQUFpQixDQUFDLENBQUMsSUFBSSxDQUFDLENBQUM7S0E2QnJFO0lBM0JHLElBQ1csY0FBYyxDQUFDLElBQWE7UUFDbkMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDeEIsSUFBSSxDQUFDLGFBQWEsQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDakMsQ0FBQztJQUVNLE1BQU07UUFDVCxJQUFJLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQyxDQUFDO1FBQ3BDLElBQUksQ0FBQyxhQUFhLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQzdCLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQyxDQUFDO0lBQzlDLENBQUM7SUFFTyxNQUFNO1FBQ1YsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLElBQUksSUFBSSxDQUFDLE1BQU0sRUFBRTtZQUM5QixPQUFPLENBQUMsQ0FBQztTQUNaO1FBRUQsTUFBTSxFQUFFLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxhQUFhLENBQUM7UUFFdEMsRUFBRSxDQUFDLEtBQUssQ0FBQyxXQUFXLENBQUMsU0FBUyxFQUFFLE9BQU8sQ0FBQyxDQUFDO1FBRXpDLE1BQU0sTUFBTSxHQUFHLEVBQUUsQ0FBQyxxQkFBcUIsRUFBRSxDQUFDLE1BQU0sQ0FBQztRQUVqRCxFQUFFLENBQUMsS0FBSyxDQUFDLGNBQWMsQ0FBQyxTQUFTLENBQUMsQ0FBQztRQUVuQyxPQUFPLE1BQU0sQ0FBQztJQUNsQixDQUFDOytHQWhEUSxjQUFjO21HQUFkLGNBQWMsa2RDckMzQixzYUFnQkE7O1NEcUJhLGNBQWM7NEZBQWQsY0FBYztrQkFoQjFCLFNBQVM7aUNBQ00sSUFBSSxZQUNOLGtCQUFrQixtQkFHWCx1QkFBdUIsQ0FBQyxNQUFNLGtCQUMvQjt3QkFDWjs0QkFDSSxTQUFTLEVBQUUsVUFBVTs0QkFDckIsT0FBTyxFQUFFLENBQUMsa0JBQWtCLENBQUM7eUJBQ2hDO3FCQUNKLFFBQ0s7d0JBQ0Ysb0JBQW9CLEVBQUUsdUJBQXVCO3FCQUNoRDs4QkFJZ0IsT0FBTztzQkFEdkIsU0FBUzt1QkFBQyxTQUFTLEVBQUUsRUFBQyxNQUFNLEVBQUUsSUFBSSxFQUFDO2dCQWlCcEIsY0FBYztzQkFEN0IsTUFBTTtnQkFNSSxjQUFjO3NCQUR4QixLQUFLO3VCQUFDLFVBQVUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge2lzUGxhdGZvcm1TZXJ2ZXJ9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgdHlwZSB7RWxlbWVudFJlZn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge1xuICAgIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICAgIENvbXBvbmVudCxcbiAgICBjb21wdXRlZCxcbiAgICBFdmVudEVtaXR0ZXIsXG4gICAgaW5qZWN0LFxuICAgIElucHV0LFxuICAgIE91dHB1dCxcbiAgICBQTEFURk9STV9JRCxcbiAgICBzaWduYWwsXG4gICAgVmlld0NoaWxkLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7dGFrZVVudGlsRGVzdHJveWVkfSBmcm9tICdAYW5ndWxhci9jb3JlL3J4anMtaW50ZXJvcCc7XG5pbXBvcnQge3R1aUluamVjdEVsZW1lbnR9IGZyb20gJ0B0YWlnYS11aS9jZGsvdXRpbHMvZG9tJztcbmltcG9ydCB7VHVpUHJlc2VudH0gZnJvbSAnQHRhaWdhLXVpL2tpdC9kaXJlY3RpdmVzL3ByZXNlbnQnO1xuaW1wb3J0IHttYXAsIG9mLCBTdWJqZWN0LCBzd2l0Y2hNYXAsIHRpbWVyfSBmcm9tICdyeGpzJztcblxuaW1wb3J0IHtUVUlfVEFCTEVfT1BUSU9OU30gZnJvbSAnLi4vdGFibGUub3B0aW9ucyc7XG5cbkBDb21wb25lbnQoe1xuICAgIHN0YW5kYWxvbmU6IHRydWUsXG4gICAgc2VsZWN0b3I6ICd0dWktdGFibGUtZXhwYW5kJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vdGFibGUtZXhwYW5kLnRlbXBsYXRlLmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL3RhYmxlLWV4cGFuZC5zdHlsZS5sZXNzJ10sXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gICAgaG9zdERpcmVjdGl2ZXM6IFtcbiAgICAgICAge1xuICAgICAgICAgICAgZGlyZWN0aXZlOiBUdWlQcmVzZW50LFxuICAgICAgICAgICAgb3V0cHV0czogWyd0dWlQcmVzZW50Q2hhbmdlJ10sXG4gICAgICAgIH0sXG4gICAgXSxcbiAgICBob3N0OiB7XG4gICAgICAgICcodHVpUHJlc2VudENoYW5nZSknOiAndmlzaWJsZSQubmV4dCgkZXZlbnQpJyxcbiAgICB9LFxufSlcbmV4cG9ydCBjbGFzcyBUdWlUYWJsZUV4cGFuZCB7XG4gICAgQFZpZXdDaGlsZCgnY29udGVudCcsIHtzdGF0aWM6IHRydWV9KVxuICAgIHByaXZhdGUgcmVhZG9ubHkgY29udGVudD86IEVsZW1lbnRSZWY8SFRNTEVsZW1lbnQ+O1xuXG4gICAgcHJpdmF0ZSByZWFkb25seSBlbCA9IHR1aUluamVjdEVsZW1lbnQoKTtcbiAgICBwcml2YXRlIHJlYWRvbmx5IHNlcnZlciA9IGlzUGxhdGZvcm1TZXJ2ZXIoaW5qZWN0KFBMQVRGT1JNX0lEKSk7XG5cbiAgICBwcm90ZWN0ZWQgcmVhZG9ubHkgdHJhbnNpdGlvbmluZyA9IHNpZ25hbChmYWxzZSk7XG4gICAgcHJvdGVjdGVkIHJlYWRvbmx5IGNvbnRlbnRIZWlnaHQgPSBjb21wdXRlZCgoXyA9IHRoaXMuZXhwYW5kZWQoKSkgPT4gdGhpcy51cGRhdGUoKSk7XG4gICAgcHJvdGVjdGVkIHJlYWRvbmx5IHZpc2libGUkID0gbmV3IFN1YmplY3Q8Ym9vbGVhbj4oKTtcbiAgICBwcm90ZWN0ZWQgcmVhZG9ubHkgc3ViID0gdGhpcy52aXNpYmxlJFxuICAgICAgICAucGlwZShcbiAgICAgICAgICAgIHN3aXRjaE1hcCgodikgPT4gKHYgPyB0aW1lcig1MDApLnBpcGUobWFwKCgpID0+IHYpKSA6IG9mKHYpKSksXG4gICAgICAgICAgICB0YWtlVW50aWxEZXN0cm95ZWQoKSxcbiAgICAgICAgKVxuICAgICAgICAuc3Vic2NyaWJlKCh2aXNpYmxlKSA9PiB0aGlzLmVsLmNsYXNzTGlzdC50b2dnbGUoJ192aXNpYmxlJywgdmlzaWJsZSkpO1xuXG4gICAgQE91dHB1dCgpXG4gICAgcHVibGljIHJlYWRvbmx5IGV4cGFuZGVkQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxib29sZWFuPigpO1xuXG4gICAgcHVibGljIHJlYWRvbmx5IGV4cGFuZGVkID0gc2lnbmFsKGluamVjdChUVUlfVEFCTEVfT1BUSU9OUykub3Blbik7XG5cbiAgICBASW5wdXQoJ2V4cGFuZGVkJylcbiAgICBwdWJsaWMgc2V0IGV4cGFuZGVkU2V0dGVyKG9wZW46IGJvb2xlYW4pIHtcbiAgICAgICAgdGhpcy5leHBhbmRlZC5zZXQob3Blbik7XG4gICAgICAgIHRoaXMudHJhbnNpdGlvbmluZy5zZXQodHJ1ZSk7XG4gICAgfVxuXG4gICAgcHVibGljIHRvZ2dsZSgpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5leHBhbmRlZC5zZXQoIXRoaXMuZXhwYW5kZWQoKSk7XG4gICAgICAgIHRoaXMudHJhbnNpdGlvbmluZy5zZXQodHJ1ZSk7XG4gICAgICAgIHRoaXMuZXhwYW5kZWRDaGFuZ2UuZW1pdCh0aGlzLmV4cGFuZGVkKCkpO1xuICAgIH1cblxuICAgIHByaXZhdGUgdXBkYXRlKCk6IG51bWJlciB7XG4gICAgICAgIGlmICghdGhpcy5jb250ZW50IHx8IHRoaXMuc2VydmVyKSB7XG4gICAgICAgICAgICByZXR1cm4gMDtcbiAgICAgICAgfVxuXG4gICAgICAgIGNvbnN0IGVsID0gdGhpcy5jb250ZW50Lm5hdGl2ZUVsZW1lbnQ7XG5cbiAgICAgICAgZWwuc3R5bGUuc2V0UHJvcGVydHkoJ2Rpc3BsYXknLCAnYmxvY2snKTtcblxuICAgICAgICBjb25zdCBoZWlnaHQgPSBlbC5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKS5oZWlnaHQ7XG5cbiAgICAgICAgZWwuc3R5bGUucmVtb3ZlUHJvcGVydHkoJ2Rpc3BsYXknKTtcblxuICAgICAgICByZXR1cm4gaGVpZ2h0O1xuICAgIH1cbn1cbiIsIjxkaXZcbiAgICAjY29udGVudFxuICAgIGNsYXNzPVwidC1jb250ZW50XCJcbiAgICBbY2xhc3MudC1jb250ZW50X29wZW5dPVwiZXhwYW5kZWQoKSAmJiAhdHJhbnNpdGlvbmluZygpXCJcbj5cbiAgICA8bmctY29udGVudCAvPlxuPC9kaXY+XG5cbjxkaXZcbiAgICBjbGFzcz1cInQtZmlsbGVyXCJcbiAgICBbY2xhc3MudC1maWxsZXJfb3Blbl09XCJleHBhbmRlZCgpXCJcbiAgICBbc3R5bGUuLS10LWhlaWdodC5weF09XCJjb250ZW50SGVpZ2h0KClcIlxuICAgIChhbmltYXRpb25jYW5jZWwpPVwidHJhbnNpdGlvbmluZy5zZXQoZmFsc2UpXCJcbiAgICAoYW5pbWF0aW9uZW5kKT1cInRyYW5zaXRpb25pbmcuc2V0KGZhbHNlKVwiXG4gICAgKGFuaW1hdGlvbnN0YXJ0KT1cInRyYW5zaXRpb25pbmcuc2V0KHRydWUpXCJcbj48L2Rpdj5cbiJdfQ==