@taiga-ui/addon-table
Version:
A library to display tabled data with filters, search, group actions, etc.
120 lines (115 loc) • 10.9 kB
JavaScript
import * as i0 from '@angular/core';
import { linkedSignal, inject, model, input, ChangeDetectionStrategy, Component } from '@angular/core';
import { TUI_TABLE_SHOW_HIDE_MESSAGE } from '@taiga-ui/addon-table/tokens';
import { TUI_STRINGIFY } from '@taiga-ui/cdk/constants';
import { TuiButton } from '@taiga-ui/core/components/button';
import { TuiIcon } from '@taiga-ui/core/components/icon';
import * as i1 from '@taiga-ui/kit/components/tiles';
import { tuiTilesShift, TUI_TILES_REORDER, TuiTiles } from '@taiga-ui/kit/components/tiles';
import { PolymorpheusOutlet } from '@taiga-ui/polymorpheus';
import { tuiCreateOptions } from '@taiga-ui/cdk/utils/di';
const TUI_REORDER_DEFAULT_OPTIONS = {
icons: {
hide: '.eye-off',
show: '.eye',
drag: '.grip-vertical',
},
};
const [TUI_REORDER_OPTIONS, tuiReorderOptionsProvider] = tuiCreateOptions(TUI_REORDER_DEFAULT_OPTIONS);
class TuiReorder {
constructor() {
this.dragging = false;
this.order = new Map();
this.unsortedItems = linkedSignal({
source: () => this.items(),
computation: (items, previous) => {
const previousUnsortedItems = previous?.value ?? [];
if (items.length !== previousUnsortedItems.length ||
!items.every((item) => previousUnsortedItems.includes(item))) {
return items;
}
return previousUnsortedItems;
},
});
this.options = inject(TUI_REORDER_OPTIONS);
this.showHideText = inject(TUI_TABLE_SHOW_HIDE_MESSAGE);
this.enabled = model([]);
this.items = model([]);
this.content = input(TUI_STRINGIFY);
}
onDrag() {
this.dragging = true;
}
onDrop() {
if (!this.dragging) {
return;
}
this.dragging = false;
this.updateItems();
}
isEnabled(item) {
return this.enabled().includes(item);
}
getIcon(item) {
return this.isEnabled(item) ? this.options.icons.hide : this.options.icons.show;
}
toggle(toggled) {
this.enabled.update((enabled) => this.isEnabled(toggled)
? enabled.filter((item) => item !== toggled)
: enabled.concat(toggled));
this.updateEnabled();
}
move(index, direction) {
const oldIndex = this.order.get(index) ?? index;
if ((!oldIndex && direction < 0) ||
(oldIndex === this.unsortedItems().length - 1 && direction > 0)) {
return;
}
const newIndex = oldIndex + direction;
const oldItem = Array.from(this.order.values()).findIndex((item) => item === newIndex);
this.order.set(index, newIndex);
this.order.set(oldItem, oldIndex);
this.order = new Map(this.order);
this.updateItems();
}
getSortedItems() {
const unsortedItems = this.unsortedItems();
const items = Array.from({ length: unsortedItems.length });
unsortedItems.forEach((item, index) => {
items[this.order.get(index) ?? index] = item;
});
return items;
}
updateItems() {
this.items.set(this.getSortedItems());
this.updateEnabled();
}
updateEnabled() {
this.enabled.set(this.getSortedItems().filter((item) => this.isEnabled(item)));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiReorder, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TuiReorder, isStandalone: true, selector: "tui-reorder", inputs: { enabled: { classPropertyName: "enabled", publicName: "enabled", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { enabled: "enabledChange", items: "itemsChange" }, host: { listeners: { "focusout.stop": "(0)", "pointerdown.zoneless": "onDrag()", "document:pointerup.zoneless": "onDrop()" } }, providers: [
{
provide: TUI_TILES_REORDER,
useValue: tuiTilesShift,
},
], ngImport: i0, template: "<tui-tiles\n class=\"t-wrapper\"\n [(order)]=\"order\"\n>\n @for (item of unsortedItems(); track item) {\n <tui-tile [style.order]=\"order.get($index)\">\n <div\n class=\"t-item\"\n [class.t-item_disabled]=\"!isEnabled(item)\"\n >\n <div\n tuiTileHandle\n class=\"t-draggable\"\n >\n <tui-icon\n class=\"t-icon\"\n [icon]=\"options.icons.drag\"\n />\n <ng-container\n *polymorpheusOutlet=\"content() as template; context: {$implicit: item, index: $index}\"\n >\n {{ template }}\n </ng-container>\n </div>\n <button\n appearance=\"icon\"\n size=\"xs\"\n tuiIconButton\n type=\"button\"\n class=\"t-button\"\n [iconStart]=\"getIcon(item)\"\n (click)=\"toggle(item)\"\n (keydown.arrowDown.prevent)=\"move($index, 1)\"\n (keydown.arrowUp.prevent)=\"move($index, -1)\"\n >\n {{ showHideText() }}\n </button>\n </div>\n </tui-tile>\n }\n</tui-tiles>\n", styles: [":host{display:block;font:var(--tui-typography-body-s);padding:.5rem 0;-webkit-user-select:none;user-select:none}.t-wrapper{grid-auto-rows:2rem}.t-draggable{cursor:ns-resize;flex:1 1 auto}.t-item{transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;display:flex;block-size:2rem;align-items:center;padding:0 .75rem;background:var(--tui-background-base)}.t-item_disabled{opacity:var(--tui-disabled-opacity)}.t-item_disabled .t-button{color:var(--tui-text-primary);opacity:1}.t-item:hover{background:var(--tui-background-base-alt)}.t-item:hover .t-button{opacity:1}.t-icon{margin-inline-end:.5rem;color:var(--tui-text-tertiary)}.t-icon:before{font-size:1rem}.t-button{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;margin-inline-start:auto;opacity:0}.t-button:focus{opacity:1}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "component", type: i1.TuiTilesComponent, selector: "tui-tiles", inputs: ["debounce", "order"], outputs: ["orderChange"] }, { kind: "component", type: i1.TuiTile, selector: "tui-tile", inputs: ["width", "height"] }, { kind: "directive", type: i1.TuiTileHandle, selector: "[tuiTileHandle]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiReorder, decorators: [{
type: Component,
args: [{ selector: 'tui-reorder', imports: [PolymorpheusOutlet, TuiButton, TuiIcon, TuiTiles], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
{
provide: TUI_TILES_REORDER,
useValue: tuiTilesShift,
},
], host: {
'(focusout.stop)': '(0)',
'(pointerdown.zoneless)': 'onDrag()',
'(document:pointerup.zoneless)': 'onDrop()',
}, template: "<tui-tiles\n class=\"t-wrapper\"\n [(order)]=\"order\"\n>\n @for (item of unsortedItems(); track item) {\n <tui-tile [style.order]=\"order.get($index)\">\n <div\n class=\"t-item\"\n [class.t-item_disabled]=\"!isEnabled(item)\"\n >\n <div\n tuiTileHandle\n class=\"t-draggable\"\n >\n <tui-icon\n class=\"t-icon\"\n [icon]=\"options.icons.drag\"\n />\n <ng-container\n *polymorpheusOutlet=\"content() as template; context: {$implicit: item, index: $index}\"\n >\n {{ template }}\n </ng-container>\n </div>\n <button\n appearance=\"icon\"\n size=\"xs\"\n tuiIconButton\n type=\"button\"\n class=\"t-button\"\n [iconStart]=\"getIcon(item)\"\n (click)=\"toggle(item)\"\n (keydown.arrowDown.prevent)=\"move($index, 1)\"\n (keydown.arrowUp.prevent)=\"move($index, -1)\"\n >\n {{ showHideText() }}\n </button>\n </div>\n </tui-tile>\n }\n</tui-tiles>\n", styles: [":host{display:block;font:var(--tui-typography-body-s);padding:.5rem 0;-webkit-user-select:none;user-select:none}.t-wrapper{grid-auto-rows:2rem}.t-draggable{cursor:ns-resize;flex:1 1 auto}.t-item{transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;display:flex;block-size:2rem;align-items:center;padding:0 .75rem;background:var(--tui-background-base)}.t-item_disabled{opacity:var(--tui-disabled-opacity)}.t-item_disabled .t-button{color:var(--tui-text-primary);opacity:1}.t-item:hover{background:var(--tui-background-base-alt)}.t-item:hover .t-button{opacity:1}.t-icon{margin-inline-end:.5rem;color:var(--tui-text-tertiary)}.t-icon:before{font-size:1rem}.t-button{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;margin-inline-start:auto;opacity:0}.t-button:focus{opacity:1}\n"] }]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { TUI_REORDER_DEFAULT_OPTIONS, TUI_REORDER_OPTIONS, TuiReorder, tuiReorderOptionsProvider };
//# sourceMappingURL=taiga-ui-addon-table-components-reorder.mjs.map