@taiga-ui/cdk
Version:
Base library for creating Angular components and applications using Taiga UI principles regarding of actual visual appearance
102 lines (97 loc) • 4.19 kB
JavaScript
import * as i0 from '@angular/core';
import { Directive, inject, EventEmitter, Input, Output } from '@angular/core';
import { TuiElement } from '@taiga-ui/cdk/directives/element';
import { tuiPx } from '@taiga-ui/cdk/utils/miscellaneous';
class TuiResizable extends TuiElement {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiResizable, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiResizable, isStandalone: true, selector: "[tuiResizable]", usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiResizable, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: '[tuiResizable]',
}]
}] });
class TuiResizer {
constructor() {
this.resizable = inject(TuiResizable);
this.x = NaN;
this.y = NaN;
this.width = 0;
this.height = 0;
this.tuiResizer = [0, 0];
this.tuiSizeChange = new EventEmitter();
}
get cursor() {
if (!this.tuiResizer[0]) {
return 'ns-resize';
}
if (!this.tuiResizer[1]) {
return 'ew-resize';
}
if (this.tuiResizer[0] * this.tuiResizer[1] > 0) {
return 'nwse-resize';
}
return 'nesw-resize';
}
onPointerDown(x, y) {
this.x = x;
this.y = y;
this.width = this.resizable.nativeElement.clientWidth;
this.height = this.resizable.nativeElement.clientHeight;
}
onPointerMove({ x, y, buttons }) {
if (!buttons) {
this.onPointerUp();
}
else {
this.onMove(x, y);
}
}
onPointerUp() {
this.x = NaN;
}
onMove(x, y) {
if (Number.isNaN(this.x)) {
return;
}
const { style } = this.resizable.nativeElement;
const size = [
this.width + this.tuiResizer[0] * (x - this.x),
this.height + this.tuiResizer[1] * (y - this.y),
];
if (this.tuiResizer[0]) {
style.width = tuiPx(size[0]);
}
if (this.tuiResizer[1]) {
style.height = tuiPx(size[1]);
}
this.tuiSizeChange.emit(size);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiResizer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiResizer, isStandalone: true, selector: "[tuiResizer]", inputs: { tuiResizer: "tuiResizer" }, outputs: { tuiSizeChange: "tuiSizeChange" }, host: { listeners: { "pointerdown.zoneless.prevent": "onPointerDown($event.x, $event.y)", "document:pointermove.zoneless": "onPointerMove($event)", "document:pointerup.zoneless": "onPointerUp()" }, properties: { "style.cursor": "cursor", "style.touchAction": "\"none\"" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiResizer, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: '[tuiResizer]',
host: {
'[style.cursor]': 'cursor',
'[style.touchAction]': '"none"',
'(pointerdown.zoneless.prevent)': 'onPointerDown($event.x, $event.y)',
'(document:pointermove.zoneless)': 'onPointerMove($event)',
'(document:pointerup.zoneless)': 'onPointerUp()',
},
}]
}], propDecorators: { tuiResizer: [{
type: Input
}], tuiSizeChange: [{
type: Output
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { TuiResizable, TuiResizer };
//# sourceMappingURL=taiga-ui-cdk-directives-resizer.mjs.map