@taiga-ui/cdk
Version:
Base library for creating Angular components and applications using Taiga UI principles regarding of actual visual appearance
93 lines (88 loc) • 4.06 kB
JavaScript
import * as i0 from '@angular/core';
import { Directive, inject, 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: "19.2.25", ngImport: i0, type: TuiResizable, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: TuiResizable, isStandalone: true, selector: "[tuiResizable]", usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiResizable, decorators: [{
type: Directive,
args: [{ selector: '[tuiResizable]' }]
}] });
class TuiResizer {
constructor() {
this.resizable = inject(TuiResizable);
this.x = Number.NaN;
this.y = Number.NaN;
this.width = 0;
this.height = 0;
this.tuiResizer = input([0, 0]);
this.tuiSizeChange = output();
}
get cursor() {
const tuiResizer = this.tuiResizer();
if (!tuiResizer[0]) {
return 'ns-resize';
}
if (!tuiResizer[1]) {
return 'ew-resize';
}
return tuiResizer[0] * tuiResizer[1] > 0 ? 'nwse-resize' : '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.onMove(x, y);
}
else {
this.onPointerUp();
}
}
onPointerUp() {
this.x = Number.NaN;
}
onMove(x, y) {
const tuiResizer = this.tuiResizer();
if (Number.isNaN(this.x)) {
return;
}
const { style } = this.resizable.nativeElement;
const size = [
this.width + tuiResizer[0] * (x - this.x),
this.height + tuiResizer[1] * (y - this.y),
];
if (tuiResizer[0]) {
style.width = tuiPx(size[0]);
}
if (tuiResizer[1]) {
style.height = tuiPx(size[1]);
}
this.tuiSizeChange.emit(size);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiResizer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.25", type: TuiResizer, isStandalone: true, selector: "[tuiResizer]", inputs: { tuiResizer: { classPropertyName: "tuiResizer", publicName: "tuiResizer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tuiSizeChange: "tuiSizeChange" }, host: { listeners: { "document:pointermove.zoneless": "onPointerMove($event)", "document:pointerup.zoneless": "onPointerUp()", "pointerdown.zoneless.prevent": "onPointerDown($event.x, $event.y)" }, properties: { "style.cursor": "cursor", "style.touchAction": "\"none\"" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiResizer, decorators: [{
type: Directive,
args: [{
selector: '[tuiResizer]',
host: {
'[style.cursor]': 'cursor',
'[style.touchAction]': '"none"',
'(document:pointermove.zoneless)': 'onPointerMove($event)',
'(document:pointerup.zoneless)': 'onPointerUp()',
'(pointerdown.zoneless.prevent)': 'onPointerDown($event.x, $event.y)',
},
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { TuiResizable, TuiResizer };
//# sourceMappingURL=taiga-ui-cdk-directives-resizer.mjs.map