@taiga-ui/kit
Version:
Taiga UI Angular main components kit
69 lines • 9.49 kB
JavaScript
import { ChangeDetectionStrategy, Component, inject, Input, signal, ViewChild, } from '@angular/core';
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
import { TuiTileService } from './tile.service';
import { TuiTilesComponent } from './tiles.component';
import * as i0 from "@angular/core";
class TuiTile {
constructor() {
this.service = inject(TuiTileService);
this.tiles = inject(TuiTilesComponent);
this.dragged = signal(false);
this.width = 1;
this.height = 1;
this.element = tuiInjectElement();
}
onDrag(offset) {
const dragged = !Number.isNaN(offset[0]);
this.dragged.set(this.dragged() || dragged);
this.tiles.element.set(dragged ? this.element : null);
this.service.setOffset(offset);
if (dragged) {
this.tiles.el.classList.add('_dragged');
}
else {
this.tiles.el.classList.remove('_dragged');
}
}
ngAfterViewInit() {
if (this.wrapper) {
this.service.init(this.wrapper.nativeElement);
}
}
ngOnDestroy() {
if (this.tiles.element() === this.element) {
this.tiles.element.set(null);
}
}
get column() {
return `span var(--tui-width, ${this.width})`;
}
get row() {
return `span var(--tui-height, ${this.height})`;
}
onEnter() {
this.tiles.rearrange(this.element);
}
onTransitionEnd() {
this.dragged.set(false);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiTile, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiTile, isStandalone: true, selector: "tui-tile", inputs: { width: "width", height: "height" }, host: { listeners: { "pointerenter": "onEnter()" }, properties: { "class._dragged": "dragged()", "style.gridColumn": "column", "style.gridRow": "row" } }, providers: [TuiTileService], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true }], ngImport: i0, template: "<div\n #wrapper\n class=\"t-wrapper\"\n (transitionend.self)=\"onTransitionEnd()\"\n>\n <ng-content />\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
export { TuiTile };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiTile, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'tui-tile', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TuiTileService], host: {
'[class._dragged]': 'dragged()',
'[style.gridColumn]': 'column',
'[style.gridRow]': 'row',
'(pointerenter)': 'onEnter()',
}, template: "<div\n #wrapper\n class=\"t-wrapper\"\n (transitionend.self)=\"onTransitionEnd()\"\n>\n <ng-content />\n</div>\n" }]
}], propDecorators: { wrapper: [{
type: ViewChild,
args: ['wrapper']
}], width: [{
type: Input
}], height: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGlsZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9raXQvY29tcG9uZW50cy90aWxlcy90aWxlLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2tpdC9jb21wb25lbnRzL3RpbGVzL3RpbGUudGVtcGxhdGUuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDQSxPQUFPLEVBQ0gsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxNQUFNLEVBQ04sS0FBSyxFQUNMLE1BQU0sRUFDTixTQUFTLEdBQ1osTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFDLGdCQUFnQixFQUFDLE1BQU0seUJBQXlCLENBQUM7QUFFekQsT0FBTyxFQUFDLGNBQWMsRUFBQyxNQUFNLGdCQUFnQixDQUFDO0FBQzlDLE9BQU8sRUFBQyxpQkFBaUIsRUFBQyxNQUFNLG1CQUFtQixDQUFDOztBQUVwRCxNQWFhLE9BQU87SUFicEI7UUFpQnFCLFlBQU8sR0FBRyxNQUFNLENBQUMsY0FBYyxDQUFDLENBQUM7UUFDakMsVUFBSyxHQUFHLE1BQU0sQ0FBQyxpQkFBaUIsQ0FBQyxDQUFDO1FBRXpDLFlBQU8sR0FBRyxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUM7UUFHM0IsVUFBSyxHQUFHLENBQUMsQ0FBQztRQUdWLFdBQU0sR0FBRyxDQUFDLENBQUM7UUFFRixZQUFPLEdBQUcsZ0JBQWdCLEVBQUUsQ0FBQztLQTRDaEQ7SUExQ1UsTUFBTSxDQUFDLE1BQWlDO1FBQzNDLE1BQU0sT0FBTyxHQUFHLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUV6QyxJQUFJLENBQUMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsT0FBTyxFQUFFLElBQUksT0FBTyxDQUFDLENBQUM7UUFFNUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxPQUFPLENBQUMsR0FBRyxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDdEQsSUFBSSxDQUFDLE9BQU8sQ0FBQyxTQUFTLENBQUMsTUFBTSxDQUFDLENBQUM7UUFFL0IsSUFBSSxPQUFPLEVBQUU7WUFDVCxJQUFJLENBQUMsS0FBSyxDQUFDLEVBQUUsQ0FBQyxTQUFTLENBQUMsR0FBRyxDQUFDLFVBQVUsQ0FBQyxDQUFDO1NBQzNDO2FBQU07WUFDSCxJQUFJLENBQUMsS0FBSyxDQUFDLEVBQUUsQ0FBQyxTQUFTLENBQUMsTUFBTSxDQUFDLFVBQVUsQ0FBQyxDQUFDO1NBQzlDO0lBQ0wsQ0FBQztJQUVNLGVBQWU7UUFDbEIsSUFBSSxJQUFJLENBQUMsT0FBTyxFQUFFO1lBQ2QsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxhQUFhLENBQUMsQ0FBQztTQUNqRDtJQUNMLENBQUM7SUFFTSxXQUFXO1FBQ2QsSUFBSSxJQUFJLENBQUMsS0FBSyxDQUFDLE9BQU8sRUFBRSxLQUFLLElBQUksQ0FBQyxPQUFPLEVBQUU7WUFDdkMsSUFBSSxDQUFDLEtBQUssQ0FBQyxPQUFPLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxDQUFDO1NBQ2hDO0lBQ0wsQ0FBQztJQUVELElBQWMsTUFBTTtRQUNoQixPQUFPLHlCQUF5QixJQUFJLENBQUMsS0FBSyxHQUFHLENBQUM7SUFDbEQsQ0FBQztJQUVELElBQWMsR0FBRztRQUNiLE9BQU8sMEJBQTBCLElBQUksQ0FBQyxNQUFNLEdBQUcsQ0FBQztJQUNwRCxDQUFDO0lBRVMsT0FBTztRQUNiLElBQUksQ0FBQyxLQUFLLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQztJQUN2QyxDQUFDO0lBRVMsZUFBZTtRQUNyQixJQUFJLENBQUMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUM1QixDQUFDOytHQTFEUSxPQUFPO21HQUFQLE9BQU8sZ1FBUkwsQ0FBQyxjQUFjLENBQUMsOEhDbkIvQiw4SEFPQTs7U0RvQmEsT0FBTzs0RkFBUCxPQUFPO2tCQWJuQixTQUFTO2lDQUNNLElBQUksWUFDTixVQUFVLG1CQUVILHVCQUF1QixDQUFDLE1BQU0sYUFDcEMsQ0FBQyxjQUFjLENBQUMsUUFDckI7d0JBQ0Ysa0JBQWtCLEVBQUUsV0FBVzt3QkFDL0Isb0JBQW9CLEVBQUUsUUFBUTt3QkFDOUIsaUJBQWlCLEVBQUUsS0FBSzt3QkFDeEIsZ0JBQWdCLEVBQUUsV0FBVztxQkFDaEM7OEJBSWdCLE9BQU87c0JBRHZCLFNBQVM7dUJBQUMsU0FBUztnQkFTYixLQUFLO3NCQURYLEtBQUs7Z0JBSUMsTUFBTTtzQkFEWixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHR5cGUge0FmdGVyVmlld0luaXQsIEVsZW1lbnRSZWYsIE9uRGVzdHJveX0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge1xuICAgIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICAgIENvbXBvbmVudCxcbiAgICBpbmplY3QsXG4gICAgSW5wdXQsXG4gICAgc2lnbmFsLFxuICAgIFZpZXdDaGlsZCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge3R1aUluamVjdEVsZW1lbnR9IGZyb20gJ0B0YWlnYS11aS9jZGsvdXRpbHMvZG9tJztcblxuaW1wb3J0IHtUdWlUaWxlU2VydmljZX0gZnJvbSAnLi90aWxlLnNlcnZpY2UnO1xuaW1wb3J0IHtUdWlUaWxlc0NvbXBvbmVudH0gZnJvbSAnLi90aWxlcy5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxuICAgIHNlbGVjdG9yOiAndHVpLXRpbGUnLFxuICAgIHRlbXBsYXRlVXJsOiAnLi90aWxlLnRlbXBsYXRlLmh0bWwnLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICAgIHByb3ZpZGVyczogW1R1aVRpbGVTZXJ2aWNlXSxcbiAgICBob3N0OiB7XG4gICAgICAgICdbY2xhc3MuX2RyYWdnZWRdJzogJ2RyYWdnZWQoKScsXG4gICAgICAgICdbc3R5bGUuZ3JpZENvbHVtbl0nOiAnY29sdW1uJyxcbiAgICAgICAgJ1tzdHlsZS5ncmlkUm93XSc6ICdyb3cnLFxuICAgICAgICAnKHBvaW50ZXJlbnRlciknOiAnb25FbnRlcigpJyxcbiAgICB9LFxufSlcbmV4cG9ydCBjbGFzcyBUdWlUaWxlIGltcGxlbWVudHMgT25EZXN0cm95LCBBZnRlclZpZXdJbml0IHtcbiAgICBAVmlld0NoaWxkKCd3cmFwcGVyJylcbiAgICBwcml2YXRlIHJlYWRvbmx5IHdyYXBwZXI/OiBFbGVtZW50UmVmPEhUTUxFbGVtZW50PjtcblxuICAgIHByaXZhdGUgcmVhZG9ubHkgc2VydmljZSA9IGluamVjdChUdWlUaWxlU2VydmljZSk7XG4gICAgcHJpdmF0ZSByZWFkb25seSB0aWxlcyA9IGluamVjdChUdWlUaWxlc0NvbXBvbmVudCk7XG5cbiAgICBwcm90ZWN0ZWQgZHJhZ2dlZCA9IHNpZ25hbChmYWxzZSk7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyB3aWR0aCA9IDE7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBoZWlnaHQgPSAxO1xuXG4gICAgcHVibGljIHJlYWRvbmx5IGVsZW1lbnQgPSB0dWlJbmplY3RFbGVtZW50KCk7XG5cbiAgICBwdWJsaWMgb25EcmFnKG9mZnNldDogcmVhZG9ubHkgW251bWJlciwgbnVtYmVyXSk6IHZvaWQge1xuICAgICAgICBjb25zdCBkcmFnZ2VkID0gIU51bWJlci5pc05hTihvZmZzZXRbMF0pO1xuXG4gICAgICAgIHRoaXMuZHJhZ2dlZC5zZXQodGhpcy5kcmFnZ2VkKCkgfHwgZHJhZ2dlZCk7XG5cbiAgICAgICAgdGhpcy50aWxlcy5lbGVtZW50LnNldChkcmFnZ2VkID8gdGhpcy5lbGVtZW50IDogbnVsbCk7XG4gICAgICAgIHRoaXMuc2VydmljZS5zZXRPZmZzZXQob2Zmc2V0KTtcblxuICAgICAgICBpZiAoZHJhZ2dlZCkge1xuICAgICAgICAgICAgdGhpcy50aWxlcy5lbC5jbGFzc0xpc3QuYWRkKCdfZHJhZ2dlZCcpO1xuICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgdGhpcy50aWxlcy5lbC5jbGFzc0xpc3QucmVtb3ZlKCdfZHJhZ2dlZCcpO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgcHVibGljIG5nQWZ0ZXJWaWV3SW5pdCgpOiB2b2lkIHtcbiAgICAgICAgaWYgKHRoaXMud3JhcHBlcikge1xuICAgICAgICAgICAgdGhpcy5zZXJ2aWNlLmluaXQodGhpcy53cmFwcGVyLm5hdGl2ZUVsZW1lbnQpO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgcHVibGljIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgICAgICBpZiAodGhpcy50aWxlcy5lbGVtZW50KCkgPT09IHRoaXMuZWxlbWVudCkge1xuICAgICAgICAgICAgdGhpcy50aWxlcy5lbGVtZW50LnNldChudWxsKTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgIHByb3RlY3RlZCBnZXQgY29sdW1uKCk6IHN0cmluZyB7XG4gICAgICAgIHJldHVybiBgc3BhbiB2YXIoLS10dWktd2lkdGgsICR7dGhpcy53aWR0aH0pYDtcbiAgICB9XG5cbiAgICBwcm90ZWN0ZWQgZ2V0IHJvdygpOiBzdHJpbmcge1xuICAgICAgICByZXR1cm4gYHNwYW4gdmFyKC0tdHVpLWhlaWdodCwgJHt0aGlzLmhlaWdodH0pYDtcbiAgICB9XG5cbiAgICBwcm90ZWN0ZWQgb25FbnRlcigpOiB2b2lkIHtcbiAgICAgICAgdGhpcy50aWxlcy5yZWFycmFuZ2UodGhpcy5lbGVtZW50KTtcbiAgICB9XG5cbiAgICBwcm90ZWN0ZWQgb25UcmFuc2l0aW9uRW5kKCk6IHZvaWQge1xuICAgICAgICB0aGlzLmRyYWdnZWQuc2V0KGZhbHNlKTtcbiAgICB9XG59XG4iLCI8ZGl2XG4gICAgI3dyYXBwZXJcbiAgICBjbGFzcz1cInQtd3JhcHBlclwiXG4gICAgKHRyYW5zaXRpb25lbmQuc2VsZik9XCJvblRyYW5zaXRpb25FbmQoKVwiXG4+XG4gICAgPG5nLWNvbnRlbnQgLz5cbjwvZGl2PlxuIl19