@taiga-ui/kit
Version:
Taiga UI Angular main components kit
70 lines • 11.6 kB
JavaScript
import { ChangeDetectionStrategy, Component, inject, Input, Output, signal, ViewEncapsulation, } from '@angular/core';
import { MutationObserverService, WA_MUTATION_OBSERVER_INIT, } from '@ng-web-apis/mutation-observer';
import { ResizeObserverService } from '@ng-web-apis/resize-observer';
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
import { BehaviorSubject, debounce, filter, map, Subject, timer } from 'rxjs';
import { TUI_TILES_REORDER } from './tiles.tokens';
import * as i0 from "@angular/core";
class TuiTilesComponent {
constructor() {
this.el$ = new Subject();
this.handler = inject(TUI_TILES_REORDER);
this.debounce = 0;
this.orderChange = this.el$.pipe(debounce(() => timer(this.debounce)), filter(this.filter.bind(this)), map((element) => this.reorder(element)));
this.element = signal(null);
this.el = tuiInjectElement();
this.order$ = new BehaviorSubject(new Map());
}
set order(map) {
this.order$.next(map);
}
get order() {
return this.order$.value;
}
rearrange(element) {
this.el$.next(element);
}
filter(element) {
return !!this.element() && !!element && this.element() !== element;
}
reorder(element) {
const elements = Array.from(this.el.children);
const currentIndex = elements.indexOf(this.element() || element);
const newIndex = elements.indexOf(element);
const order = this.order.size
? new Map(this.order)
: new Map(elements.map((_, index) => [index, index]));
this.order$.next(this.handler(order, currentIndex, newIndex));
return this.order$.value;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiTilesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiTilesComponent, isStandalone: true, selector: "tui-tiles", inputs: { debounce: "debounce", order: "order" }, outputs: { orderChange: "orderChange" }, host: { listeners: { "pointerleave.zoneless": "rearrange()" } }, providers: [
ResizeObserverService,
MutationObserverService,
{
provide: WA_MUTATION_OBSERVER_INIT,
useValue: { childList: true },
},
], ngImport: i0, template: '<ng-content />', isInline: true, styles: ["tui-tiles{position:relative;z-index:0;display:grid;grid-auto-flow:dense;justify-items:stretch}tui-tiles._dragged tui-tile>.t-wrapper{pointer-events:none}tui-tiles._dragged tui-tile:not(._dragged)>.t-wrapper,tui-tiles:not(._dragged) tui-tile._dragged>.t-wrapper{transition-property:all;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;transition-delay:1ms}tui-tile>.t-wrapper{position:absolute;z-index:0;border-radius:inherit}tui-tile._dragged>.t-wrapper,tui-tile:has(tui-tile._dragged)>.t-wrapper{z-index:1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
export { TuiTilesComponent };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiTilesComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'tui-tiles', template: '<ng-content />', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
ResizeObserverService,
MutationObserverService,
{
provide: WA_MUTATION_OBSERVER_INIT,
useValue: { childList: true },
},
], host: {
'(pointerleave.zoneless)': 'rearrange()',
}, styles: ["tui-tiles{position:relative;z-index:0;display:grid;grid-auto-flow:dense;justify-items:stretch}tui-tiles._dragged tui-tile>.t-wrapper{pointer-events:none}tui-tiles._dragged tui-tile:not(._dragged)>.t-wrapper,tui-tiles:not(._dragged) tui-tile._dragged>.t-wrapper{transition-property:all;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;transition-delay:1ms}tui-tile>.t-wrapper{position:absolute;z-index:0;border-radius:inherit}tui-tile._dragged>.t-wrapper,tui-tile:has(tui-tile._dragged)>.t-wrapper{z-index:1}\n"] }]
}], propDecorators: { debounce: [{
type: Input
}], orderChange: [{
type: Output
}], order: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGlsZXMuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2l0L2NvbXBvbmVudHMvdGlsZXMvdGlsZXMuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDSCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULE1BQU0sRUFDTixLQUFLLEVBQ0wsTUFBTSxFQUNOLE1BQU0sRUFDTixpQkFBaUIsR0FDcEIsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUNILHVCQUF1QixFQUN2Qix5QkFBeUIsR0FDNUIsTUFBTSxnQ0FBZ0MsQ0FBQztBQUN4QyxPQUFPLEVBQUMscUJBQXFCLEVBQUMsTUFBTSw4QkFBOEIsQ0FBQztBQUNuRSxPQUFPLEVBQUMsZ0JBQWdCLEVBQUMsTUFBTSx5QkFBeUIsQ0FBQztBQUN6RCxPQUFPLEVBQUMsZUFBZSxFQUFFLFFBQVEsRUFBRSxNQUFNLEVBQUUsR0FBRyxFQUFFLE9BQU8sRUFBRSxLQUFLLEVBQUMsTUFBTSxNQUFNLENBQUM7QUFFNUUsT0FBTyxFQUFDLGlCQUFpQixFQUFDLE1BQU0sZ0JBQWdCLENBQUM7O0FBRWpELE1BbUJhLGlCQUFpQjtJQW5COUI7UUFvQnFCLFFBQUcsR0FBRyxJQUFJLE9BQU8sRUFBdUIsQ0FBQztRQUN6QyxZQUFPLEdBQUcsTUFBTSxDQUFDLGlCQUFpQixDQUFDLENBQUM7UUFHOUMsYUFBUSxHQUFHLENBQUMsQ0FBQztRQUdKLGdCQUFXLEdBQUcsSUFBSSxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQ3ZDLFFBQVEsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDLEVBQ3BDLE1BQU0sQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxFQUM5QixHQUFHLENBQUMsQ0FBQyxPQUFPLEVBQUUsRUFBRSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FDMUMsQ0FBQztRQUVjLFlBQU8sR0FBRyxNQUFNLENBQWlCLElBQUksQ0FBQyxDQUFDO1FBQ3ZDLE9BQUUsR0FBRyxnQkFBZ0IsRUFBRSxDQUFDO1FBRXhCLFdBQU0sR0FBRyxJQUFJLGVBQWUsQ0FBQyxJQUFJLEdBQUcsRUFBa0IsQ0FBQyxDQUFDO0tBK0IzRTtJQTdCRyxJQUNXLEtBQUssQ0FBQyxHQUF3QjtRQUNyQyxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztJQUMxQixDQUFDO0lBRUQsSUFBVyxLQUFLO1FBQ1osT0FBTyxJQUFJLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQztJQUM3QixDQUFDO0lBRU0sU0FBUyxDQUFDLE9BQWlCO1FBQzlCLElBQUksQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDO0lBQzNCLENBQUM7SUFFTyxNQUFNLENBQUMsT0FBaUI7UUFDNUIsT0FBTyxDQUFDLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRSxJQUFJLENBQUMsQ0FBQyxPQUFPLElBQUksSUFBSSxDQUFDLE9BQU8sRUFBRSxLQUFLLE9BQU8sQ0FBQztJQUN2RSxDQUFDO0lBRU8sT0FBTyxDQUFDLE9BQWdCO1FBQzVCLE1BQU0sUUFBUSxHQUFHLEtBQUssQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUM5QyxNQUFNLFlBQVksR0FBRyxRQUFRLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxPQUFPLEVBQUUsSUFBSSxPQUFPLENBQUMsQ0FBQztRQUNqRSxNQUFNLFFBQVEsR0FBRyxRQUFRLENBQUMsT0FBTyxDQUFDLE9BQU8sQ0FBQyxDQUFDO1FBQzNDLE1BQU0sS0FBSyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSTtZQUN6QixDQUFDLENBQUMsSUFBSSxHQUFHLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQztZQUNyQixDQUFDLENBQUMsSUFBSSxHQUFHLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsRUFBRSxLQUFLLEVBQUUsRUFBRSxDQUFDLENBQUMsS0FBSyxFQUFFLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUUxRCxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLEtBQUssRUFBRSxZQUFZLEVBQUUsUUFBUSxDQUFDLENBQUMsQ0FBQztRQUU5RCxPQUFPLElBQUksQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDO0lBQzdCLENBQUM7K0dBL0NRLGlCQUFpQjttR0FBakIsaUJBQWlCLG9OQVpmO1lBQ1AscUJBQXFCO1lBQ3JCLHVCQUF1QjtZQUN2QjtnQkFDSSxPQUFPLEVBQUUseUJBQXlCO2dCQUNsQyxRQUFRLEVBQUUsRUFBQyxTQUFTLEVBQUUsSUFBSSxFQUFDO2FBQzlCO1NBQ0osMEJBWFMsZ0JBQWdCOztTQWdCakIsaUJBQWlCOzRGQUFqQixpQkFBaUI7a0JBbkI3QixTQUFTO2lDQUNNLElBQUksWUFDTixXQUFXLFlBQ1gsZ0JBQWdCLGlCQUVYLGlCQUFpQixDQUFDLElBQUksbUJBQ3BCLHVCQUF1QixDQUFDLE1BQU0sYUFDcEM7d0JBQ1AscUJBQXFCO3dCQUNyQix1QkFBdUI7d0JBQ3ZCOzRCQUNJLE9BQU8sRUFBRSx5QkFBeUI7NEJBQ2xDLFFBQVEsRUFBRSxFQUFDLFNBQVMsRUFBRSxJQUFJLEVBQUM7eUJBQzlCO3FCQUNKLFFBQ0s7d0JBQ0YseUJBQXlCLEVBQUUsYUFBYTtxQkFDM0M7OEJBT00sUUFBUTtzQkFEZCxLQUFLO2dCQUlVLFdBQVc7c0JBRDFCLE1BQU07Z0JBYUksS0FBSztzQkFEZixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgICBDb21wb25lbnQsXG4gICAgaW5qZWN0LFxuICAgIElucHV0LFxuICAgIE91dHB1dCxcbiAgICBzaWduYWwsXG4gICAgVmlld0VuY2Fwc3VsYXRpb24sXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtcbiAgICBNdXRhdGlvbk9ic2VydmVyU2VydmljZSxcbiAgICBXQV9NVVRBVElPTl9PQlNFUlZFUl9JTklULFxufSBmcm9tICdAbmctd2ViLWFwaXMvbXV0YXRpb24tb2JzZXJ2ZXInO1xuaW1wb3J0IHtSZXNpemVPYnNlcnZlclNlcnZpY2V9IGZyb20gJ0BuZy13ZWItYXBpcy9yZXNpemUtb2JzZXJ2ZXInO1xuaW1wb3J0IHt0dWlJbmplY3RFbGVtZW50fSBmcm9tICdAdGFpZ2EtdWkvY2RrL3V0aWxzL2RvbSc7XG5pbXBvcnQge0JlaGF2aW9yU3ViamVjdCwgZGVib3VuY2UsIGZpbHRlciwgbWFwLCBTdWJqZWN0LCB0aW1lcn0gZnJvbSAncnhqcyc7XG5cbmltcG9ydCB7VFVJX1RJTEVTX1JFT1JERVJ9IGZyb20gJy4vdGlsZXMudG9rZW5zJztcblxuQENvbXBvbmVudCh7XG4gICAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgICBzZWxlY3RvcjogJ3R1aS10aWxlcycsXG4gICAgdGVtcGxhdGU6ICc8bmctY29udGVudCAvPicsXG4gICAgc3R5bGVVcmxzOiBbJy4vdGlsZXMuc3R5bGUubGVzcyddLFxuICAgIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gICAgcHJvdmlkZXJzOiBbXG4gICAgICAgIFJlc2l6ZU9ic2VydmVyU2VydmljZSxcbiAgICAgICAgTXV0YXRpb25PYnNlcnZlclNlcnZpY2UsXG4gICAgICAgIHtcbiAgICAgICAgICAgIHByb3ZpZGU6IFdBX01VVEFUSU9OX09CU0VSVkVSX0lOSVQsXG4gICAgICAgICAgICB1c2VWYWx1ZToge2NoaWxkTGlzdDogdHJ1ZX0sXG4gICAgICAgIH0sXG4gICAgXSxcbiAgICBob3N0OiB7XG4gICAgICAgICcocG9pbnRlcmxlYXZlLnpvbmVsZXNzKSc6ICdyZWFycmFuZ2UoKScsXG4gICAgfSxcbn0pXG5leHBvcnQgY2xhc3MgVHVpVGlsZXNDb21wb25lbnQge1xuICAgIHByaXZhdGUgcmVhZG9ubHkgZWwkID0gbmV3IFN1YmplY3Q8RWxlbWVudCB8IHVuZGVmaW5lZD4oKTtcbiAgICBwcml2YXRlIHJlYWRvbmx5IGhhbmRsZXIgPSBpbmplY3QoVFVJX1RJTEVTX1JFT1JERVIpO1xuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgZGVib3VuY2UgPSAwO1xuXG4gICAgQE91dHB1dCgpXG4gICAgcHVibGljIHJlYWRvbmx5IG9yZGVyQ2hhbmdlID0gdGhpcy5lbCQucGlwZShcbiAgICAgICAgZGVib3VuY2UoKCkgPT4gdGltZXIodGhpcy5kZWJvdW5jZSkpLFxuICAgICAgICBmaWx0ZXIodGhpcy5maWx0ZXIuYmluZCh0aGlzKSksXG4gICAgICAgIG1hcCgoZWxlbWVudCkgPT4gdGhpcy5yZW9yZGVyKGVsZW1lbnQpKSxcbiAgICApO1xuXG4gICAgcHVibGljIHJlYWRvbmx5IGVsZW1lbnQgPSBzaWduYWw8RWxlbWVudCB8IG51bGw+KG51bGwpO1xuICAgIHB1YmxpYyByZWFkb25seSBlbCA9IHR1aUluamVjdEVsZW1lbnQoKTtcblxuICAgIHB1YmxpYyByZWFkb25seSBvcmRlciQgPSBuZXcgQmVoYXZpb3JTdWJqZWN0KG5ldyBNYXA8bnVtYmVyLCBudW1iZXI+KCkpO1xuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgc2V0IG9yZGVyKG1hcDogTWFwPG51bWJlciwgbnVtYmVyPikge1xuICAgICAgICB0aGlzLm9yZGVyJC5uZXh0KG1hcCk7XG4gICAgfVxuXG4gICAgcHVibGljIGdldCBvcmRlcigpOiBNYXA8bnVtYmVyLCBudW1iZXI+IHtcbiAgICAgICAgcmV0dXJuIHRoaXMub3JkZXIkLnZhbHVlO1xuICAgIH1cblxuICAgIHB1YmxpYyByZWFycmFuZ2UoZWxlbWVudD86IEVsZW1lbnQpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5lbCQubmV4dChlbGVtZW50KTtcbiAgICB9XG5cbiAgICBwcml2YXRlIGZpbHRlcihlbGVtZW50PzogRWxlbWVudCk6IGVsZW1lbnQgaXMgRWxlbWVudCB7XG4gICAgICAgIHJldHVybiAhIXRoaXMuZWxlbWVudCgpICYmICEhZWxlbWVudCAmJiB0aGlzLmVsZW1lbnQoKSAhPT0gZWxlbWVudDtcbiAgICB9XG5cbiAgICBwcml2YXRlIHJlb3JkZXIoZWxlbWVudDogRWxlbWVudCk6IE1hcDxudW1iZXIsIG51bWJlcj4ge1xuICAgICAgICBjb25zdCBlbGVtZW50cyA9IEFycmF5LmZyb20odGhpcy5lbC5jaGlsZHJlbik7XG4gICAgICAgIGNvbnN0IGN1cnJlbnRJbmRleCA9IGVsZW1lbnRzLmluZGV4T2YodGhpcy5lbGVtZW50KCkgfHwgZWxlbWVudCk7XG4gICAgICAgIGNvbnN0IG5ld0luZGV4ID0gZWxlbWVudHMuaW5kZXhPZihlbGVtZW50KTtcbiAgICAgICAgY29uc3Qgb3JkZXIgPSB0aGlzLm9yZGVyLnNpemVcbiAgICAgICAgICAgID8gbmV3IE1hcCh0aGlzLm9yZGVyKVxuICAgICAgICAgICAgOiBuZXcgTWFwKGVsZW1lbnRzLm1hcCgoXywgaW5kZXgpID0+IFtpbmRleCwgaW5kZXhdKSk7XG5cbiAgICAgICAgdGhpcy5vcmRlciQubmV4dCh0aGlzLmhhbmRsZXIob3JkZXIsIGN1cnJlbnRJbmRleCwgbmV3SW5kZXgpKTtcblxuICAgICAgICByZXR1cm4gdGhpcy5vcmRlciQudmFsdWU7XG4gICAgfVxufVxuIl19