ng-zorro-antd-resizable.mjs 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559
  1. import * as i0 from '@angular/core';
  2. import { inject, Injectable, EventEmitter, booleanAttribute, numberAttribute, Output, Input, Directive, HostListener, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
  3. import { takeUntil, filter } from 'rxjs/operators';
  4. import * as i3 from 'ng-zorro-antd/core/services';
  5. import { NzDestroyService } from 'ng-zorro-antd/core/services';
  6. import { isTouchEvent, ensureInBounds, fromEventOutsideAngular } from 'ng-zorro-antd/core/util';
  7. import { DOCUMENT } from '@angular/common';
  8. import { Subject, merge } from 'rxjs';
  9. import * as i2 from '@angular/cdk/platform';
  10. import { normalizePassiveListenerOptions } from '@angular/cdk/platform';
  11. /**
  12. * Use of this source code is governed by an MIT-style license that can be
  13. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  14. */
  15. function getEventWithPoint(event) {
  16. return isTouchEvent(event) ? event.touches[0] || event.changedTouches[0] : event;
  17. }
  18. /**
  19. * Use of this source code is governed by an MIT-style license that can be
  20. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  21. */
  22. class NzResizableService {
  23. ngZone;
  24. document = inject(DOCUMENT);
  25. listeners = new Map();
  26. /**
  27. * The `OutsideAngular` prefix means that the subject will emit events outside of the Angular zone,
  28. * so that becomes a bit more descriptive for those who'll maintain the code in the future:
  29. * ```ts
  30. * nzResizableService.handleMouseDownOutsideAngular$.subscribe(event => {
  31. * console.log(Zone.current); // <root>
  32. * console.log(NgZone.isInAngularZone()); // false
  33. * });
  34. * ```
  35. */
  36. handleMouseDownOutsideAngular$ = new Subject();
  37. documentMouseUpOutsideAngular$ = new Subject();
  38. documentMouseMoveOutsideAngular$ = new Subject();
  39. mouseEnteredOutsideAngular$ = new Subject();
  40. constructor(ngZone) {
  41. this.ngZone = ngZone;
  42. }
  43. startResizing(event) {
  44. const _isTouchEvent = isTouchEvent(event);
  45. this.clearListeners();
  46. const moveEvent = _isTouchEvent ? 'touchmove' : 'mousemove';
  47. const upEvent = _isTouchEvent ? 'touchend' : 'mouseup';
  48. const moveEventHandler = (e) => {
  49. this.documentMouseMoveOutsideAngular$.next(e);
  50. };
  51. const upEventHandler = (e) => {
  52. this.documentMouseUpOutsideAngular$.next(e);
  53. this.clearListeners();
  54. };
  55. this.listeners.set(moveEvent, moveEventHandler);
  56. this.listeners.set(upEvent, upEventHandler);
  57. this.ngZone.runOutsideAngular(() => {
  58. this.listeners.forEach((handler, name) => {
  59. this.document.addEventListener(name, handler);
  60. });
  61. });
  62. }
  63. clearListeners() {
  64. this.listeners.forEach((handler, name) => {
  65. this.document.removeEventListener(name, handler);
  66. });
  67. this.listeners.clear();
  68. }
  69. ngOnDestroy() {
  70. this.handleMouseDownOutsideAngular$.complete();
  71. this.documentMouseUpOutsideAngular$.complete();
  72. this.documentMouseMoveOutsideAngular$.complete();
  73. this.mouseEnteredOutsideAngular$.complete();
  74. this.clearListeners();
  75. }
  76. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzResizableService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
  77. static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzResizableService });
  78. }
  79. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzResizableService, decorators: [{
  80. type: Injectable
  81. }], ctorParameters: () => [{ type: i0.NgZone }] });
  82. class NzResizableDirective {
  83. elementRef;
  84. renderer;
  85. nzResizableService;
  86. platform;
  87. ngZone;
  88. destroy$;
  89. nzBounds = 'parent';
  90. nzMaxHeight;
  91. nzMaxWidth;
  92. nzMinHeight = 40;
  93. nzMinWidth = 40;
  94. nzGridColumnCount = -1;
  95. nzMaxColumn = -1;
  96. nzMinColumn = -1;
  97. nzLockAspectRatio = false;
  98. nzPreview = false;
  99. nzDisabled = false;
  100. nzResize = new EventEmitter();
  101. nzResizeEnd = new EventEmitter();
  102. nzResizeStart = new EventEmitter();
  103. resizing = false;
  104. elRect;
  105. currentHandleEvent = null;
  106. ghostElement = null;
  107. el;
  108. sizeCache = null;
  109. constructor(elementRef, renderer, nzResizableService, platform, ngZone, destroy$) {
  110. this.elementRef = elementRef;
  111. this.renderer = renderer;
  112. this.nzResizableService = nzResizableService;
  113. this.platform = platform;
  114. this.ngZone = ngZone;
  115. this.destroy$ = destroy$;
  116. this.nzResizableService.handleMouseDownOutsideAngular$.pipe(takeUntil(this.destroy$)).subscribe(event => {
  117. if (this.nzDisabled) {
  118. return;
  119. }
  120. this.resizing = true;
  121. this.nzResizableService.startResizing(event.mouseEvent);
  122. this.currentHandleEvent = event;
  123. if (this.nzResizeStart.observers.length) {
  124. this.ngZone.run(() => this.nzResizeStart.emit({ mouseEvent: event.mouseEvent, direction: event.direction }));
  125. }
  126. this.elRect = this.el.getBoundingClientRect();
  127. });
  128. this.nzResizableService.documentMouseUpOutsideAngular$
  129. .pipe(takeUntil(this.destroy$), filter(Boolean))
  130. .subscribe(event => {
  131. if (this.resizing) {
  132. this.resizing = false;
  133. this.nzResizableService.documentMouseUpOutsideAngular$.next(null);
  134. this.endResize(event);
  135. }
  136. });
  137. this.nzResizableService.documentMouseMoveOutsideAngular$.pipe(takeUntil(this.destroy$)).subscribe(event => {
  138. if (this.resizing) {
  139. this.resize(event);
  140. }
  141. });
  142. }
  143. setPosition() {
  144. const position = getComputedStyle(this.el).position;
  145. if (position === 'static' || !position) {
  146. this.renderer.setStyle(this.el, 'position', 'relative');
  147. }
  148. }
  149. calcSize(width, height, ratio) {
  150. let newWidth;
  151. let newHeight;
  152. let maxWidth;
  153. let maxHeight;
  154. let col = 0;
  155. let spanWidth = 0;
  156. let minWidth = this.nzMinWidth;
  157. let boundWidth = Infinity;
  158. let boundHeight = Infinity;
  159. if (this.nzBounds === 'parent') {
  160. const parent = this.renderer.parentNode(this.el);
  161. if (parent instanceof HTMLElement) {
  162. const parentRect = parent.getBoundingClientRect();
  163. boundWidth = parentRect.width;
  164. boundHeight = parentRect.height;
  165. }
  166. }
  167. else if (this.nzBounds === 'window') {
  168. if (typeof window !== 'undefined') {
  169. boundWidth = window.innerWidth;
  170. boundHeight = window.innerHeight;
  171. }
  172. }
  173. else if (this.nzBounds && this.nzBounds.nativeElement && this.nzBounds.nativeElement instanceof HTMLElement) {
  174. const boundsRect = this.nzBounds.nativeElement.getBoundingClientRect();
  175. boundWidth = boundsRect.width;
  176. boundHeight = boundsRect.height;
  177. }
  178. maxWidth = ensureInBounds(this.nzMaxWidth, boundWidth);
  179. // eslint-disable-next-line prefer-const
  180. maxHeight = ensureInBounds(this.nzMaxHeight, boundHeight);
  181. if (this.nzGridColumnCount !== -1) {
  182. spanWidth = maxWidth / this.nzGridColumnCount;
  183. minWidth = this.nzMinColumn !== -1 ? spanWidth * this.nzMinColumn : minWidth;
  184. maxWidth = this.nzMaxColumn !== -1 ? spanWidth * this.nzMaxColumn : maxWidth;
  185. }
  186. if (ratio !== -1) {
  187. if (/(left|right)/i.test(this.currentHandleEvent.direction)) {
  188. newWidth = Math.min(Math.max(width, minWidth), maxWidth);
  189. newHeight = Math.min(Math.max(newWidth / ratio, this.nzMinHeight), maxHeight);
  190. if (newHeight >= maxHeight || newHeight <= this.nzMinHeight) {
  191. newWidth = Math.min(Math.max(newHeight * ratio, minWidth), maxWidth);
  192. }
  193. }
  194. else {
  195. newHeight = Math.min(Math.max(height, this.nzMinHeight), maxHeight);
  196. newWidth = Math.min(Math.max(newHeight * ratio, minWidth), maxWidth);
  197. if (newWidth >= maxWidth || newWidth <= minWidth) {
  198. newHeight = Math.min(Math.max(newWidth / ratio, this.nzMinHeight), maxHeight);
  199. }
  200. }
  201. }
  202. else {
  203. newWidth = Math.min(Math.max(width, minWidth), maxWidth);
  204. newHeight = Math.min(Math.max(height, this.nzMinHeight), maxHeight);
  205. }
  206. if (this.nzGridColumnCount !== -1) {
  207. col = Math.round(newWidth / spanWidth);
  208. newWidth = col * spanWidth;
  209. }
  210. return {
  211. col,
  212. width: newWidth,
  213. height: newHeight
  214. };
  215. }
  216. resize(event) {
  217. const elRect = this.elRect;
  218. const resizeEvent = getEventWithPoint(event);
  219. const handleEvent = getEventWithPoint(this.currentHandleEvent.mouseEvent);
  220. let width = elRect.width;
  221. let height = elRect.height;
  222. const ratio = this.nzLockAspectRatio ? width / height : -1;
  223. switch (this.currentHandleEvent.direction) {
  224. case 'bottomRight':
  225. width = resizeEvent.clientX - elRect.left;
  226. height = resizeEvent.clientY - elRect.top;
  227. break;
  228. case 'bottomLeft':
  229. width = elRect.width + handleEvent.clientX - resizeEvent.clientX;
  230. height = resizeEvent.clientY - elRect.top;
  231. break;
  232. case 'topRight':
  233. width = resizeEvent.clientX - elRect.left;
  234. height = elRect.height + handleEvent.clientY - resizeEvent.clientY;
  235. break;
  236. case 'topLeft':
  237. width = elRect.width + handleEvent.clientX - resizeEvent.clientX;
  238. height = elRect.height + handleEvent.clientY - resizeEvent.clientY;
  239. break;
  240. case 'top':
  241. height = elRect.height + handleEvent.clientY - resizeEvent.clientY;
  242. break;
  243. case 'right':
  244. width = resizeEvent.clientX - elRect.left;
  245. break;
  246. case 'bottom':
  247. height = resizeEvent.clientY - elRect.top;
  248. break;
  249. case 'left':
  250. width = elRect.width + handleEvent.clientX - resizeEvent.clientX;
  251. }
  252. const size = this.calcSize(width, height, ratio);
  253. this.sizeCache = { ...size };
  254. // Re-enter the Angular zone and run the change detection only if there're any `nzResize` listeners,
  255. // e.g.: `<div nz-resizable (nzResize)="..."></div>`.
  256. if (this.nzResize.observers.length) {
  257. this.ngZone.run(() => {
  258. this.nzResize.emit({
  259. ...size,
  260. mouseEvent: event,
  261. direction: this.currentHandleEvent.direction
  262. });
  263. });
  264. }
  265. if (this.nzPreview) {
  266. this.previewResize(size);
  267. }
  268. }
  269. endResize(event) {
  270. this.removeGhostElement();
  271. const size = this.sizeCache
  272. ? { ...this.sizeCache }
  273. : {
  274. width: this.elRect.width,
  275. height: this.elRect.height
  276. };
  277. // Re-enter the Angular zone and run the change detection only if there're any `nzResizeEnd` listeners,
  278. // e.g.: `<div nz-resizable (nzResizeEnd)="..."></div>`.
  279. if (this.nzResizeEnd.observers.length) {
  280. this.ngZone.run(() => {
  281. this.nzResizeEnd.emit({
  282. ...size,
  283. mouseEvent: event,
  284. direction: this.currentHandleEvent.direction
  285. });
  286. });
  287. }
  288. this.sizeCache = null;
  289. this.currentHandleEvent = null;
  290. }
  291. previewResize({ width, height }) {
  292. this.createGhostElement();
  293. this.renderer.setStyle(this.ghostElement, 'width', `${width}px`);
  294. this.renderer.setStyle(this.ghostElement, 'height', `${height}px`);
  295. }
  296. createGhostElement() {
  297. if (!this.ghostElement) {
  298. this.ghostElement = this.renderer.createElement('div');
  299. this.renderer.setAttribute(this.ghostElement, 'class', 'nz-resizable-preview');
  300. }
  301. this.renderer.appendChild(this.el, this.ghostElement);
  302. }
  303. removeGhostElement() {
  304. if (this.ghostElement) {
  305. this.renderer.removeChild(this.el, this.ghostElement);
  306. }
  307. }
  308. ngAfterViewInit() {
  309. if (!this.platform.isBrowser) {
  310. return;
  311. }
  312. this.el = this.elementRef.nativeElement;
  313. this.setPosition();
  314. fromEventOutsideAngular(this.el, 'mouseenter')
  315. .pipe(takeUntil(this.destroy$))
  316. .subscribe(() => {
  317. this.nzResizableService.mouseEnteredOutsideAngular$.next(true);
  318. });
  319. fromEventOutsideAngular(this.el, 'mouseleave')
  320. .pipe(takeUntil(this.destroy$))
  321. .subscribe(() => {
  322. this.nzResizableService.mouseEnteredOutsideAngular$.next(false);
  323. });
  324. }
  325. ngOnDestroy() {
  326. this.ghostElement = null;
  327. this.sizeCache = null;
  328. }
  329. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzResizableDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: NzResizableService }, { token: i2.Platform }, { token: i0.NgZone }, { token: i3.NzDestroyService }], target: i0.ɵɵFactoryTarget.Directive });
  330. static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.2", type: NzResizableDirective, isStandalone: true, selector: "[nz-resizable]", inputs: { nzBounds: "nzBounds", nzMaxHeight: "nzMaxHeight", nzMaxWidth: "nzMaxWidth", nzMinHeight: ["nzMinHeight", "nzMinHeight", numberAttribute], nzMinWidth: ["nzMinWidth", "nzMinWidth", numberAttribute], nzGridColumnCount: ["nzGridColumnCount", "nzGridColumnCount", numberAttribute], nzMaxColumn: ["nzMaxColumn", "nzMaxColumn", numberAttribute], nzMinColumn: ["nzMinColumn", "nzMinColumn", numberAttribute], nzLockAspectRatio: ["nzLockAspectRatio", "nzLockAspectRatio", booleanAttribute], nzPreview: ["nzPreview", "nzPreview", booleanAttribute], nzDisabled: ["nzDisabled", "nzDisabled", booleanAttribute] }, outputs: { nzResize: "nzResize", nzResizeEnd: "nzResizeEnd", nzResizeStart: "nzResizeStart" }, host: { properties: { "class.nz-resizable-resizing": "resizing", "class.nz-resizable-disabled": "nzDisabled" }, classAttribute: "nz-resizable" }, providers: [NzResizableService, NzDestroyService], exportAs: ["nzResizable"], ngImport: i0 });
  331. }
  332. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzResizableDirective, decorators: [{
  333. type: Directive,
  334. args: [{
  335. selector: '[nz-resizable]',
  336. exportAs: 'nzResizable',
  337. providers: [NzResizableService, NzDestroyService],
  338. host: {
  339. class: 'nz-resizable',
  340. '[class.nz-resizable-resizing]': 'resizing',
  341. '[class.nz-resizable-disabled]': 'nzDisabled'
  342. }
  343. }]
  344. }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: NzResizableService }, { type: i2.Platform }, { type: i0.NgZone }, { type: i3.NzDestroyService }], propDecorators: { nzBounds: [{
  345. type: Input
  346. }], nzMaxHeight: [{
  347. type: Input
  348. }], nzMaxWidth: [{
  349. type: Input
  350. }], nzMinHeight: [{
  351. type: Input,
  352. args: [{ transform: numberAttribute }]
  353. }], nzMinWidth: [{
  354. type: Input,
  355. args: [{ transform: numberAttribute }]
  356. }], nzGridColumnCount: [{
  357. type: Input,
  358. args: [{ transform: numberAttribute }]
  359. }], nzMaxColumn: [{
  360. type: Input,
  361. args: [{ transform: numberAttribute }]
  362. }], nzMinColumn: [{
  363. type: Input,
  364. args: [{ transform: numberAttribute }]
  365. }], nzLockAspectRatio: [{
  366. type: Input,
  367. args: [{ transform: booleanAttribute }]
  368. }], nzPreview: [{
  369. type: Input,
  370. args: [{ transform: booleanAttribute }]
  371. }], nzDisabled: [{
  372. type: Input,
  373. args: [{ transform: booleanAttribute }]
  374. }], nzResize: [{
  375. type: Output
  376. }], nzResizeEnd: [{
  377. type: Output
  378. }], nzResizeStart: [{
  379. type: Output
  380. }] } });
  381. /**
  382. * Use of this source code is governed by an MIT-style license that can be
  383. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  384. */
  385. class NzResizeHandleMouseDownEvent {
  386. direction;
  387. mouseEvent;
  388. constructor(direction, mouseEvent) {
  389. this.direction = direction;
  390. this.mouseEvent = mouseEvent;
  391. }
  392. }
  393. const passiveEventListenerOptions = normalizePassiveListenerOptions({ passive: true });
  394. class NzResizeHandleComponent {
  395. nzResizableService;
  396. renderer;
  397. host;
  398. destroy$;
  399. nzDirection = 'bottomRight';
  400. nzCursorType = 'window';
  401. nzMouseDown = new EventEmitter();
  402. constructor(nzResizableService, renderer, host, destroy$) {
  403. this.nzResizableService = nzResizableService;
  404. this.renderer = renderer;
  405. this.host = host;
  406. this.destroy$ = destroy$;
  407. }
  408. ngOnInit() {
  409. this.nzResizableService.mouseEnteredOutsideAngular$.pipe(takeUntil(this.destroy$)).subscribe(entered => {
  410. if (entered) {
  411. this.renderer.addClass(this.host.nativeElement, 'nz-resizable-handle-box-hover');
  412. }
  413. else {
  414. this.renderer.removeClass(this.host.nativeElement, 'nz-resizable-handle-box-hover');
  415. }
  416. });
  417. // Note: since Chrome 56 defaults document level `touchstart` listener to passive.
  418. // The element `touchstart` listener is not passive by default
  419. // We never call `preventDefault()` on it, so we're safe making it passive too.
  420. merge(fromEventOutsideAngular(this.host.nativeElement, 'mousedown', passiveEventListenerOptions), fromEventOutsideAngular(this.host.nativeElement, 'touchstart', passiveEventListenerOptions))
  421. .pipe(takeUntil(this.destroy$))
  422. .subscribe((event) => {
  423. this.nzResizableService.handleMouseDownOutsideAngular$.next(new NzResizeHandleMouseDownEvent(this.nzDirection, event));
  424. });
  425. }
  426. onPointerDown(event) {
  427. event.target.setPointerCapture(event.pointerId);
  428. }
  429. onPointerUp(event) {
  430. event.target.releasePointerCapture(event.pointerId);
  431. }
  432. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzResizeHandleComponent, deps: [{ token: NzResizableService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i3.NzDestroyService }], target: i0.ɵɵFactoryTarget.Component });
  433. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: NzResizeHandleComponent, isStandalone: true, selector: "nz-resize-handle, [nz-resize-handle]", inputs: { nzDirection: "nzDirection", nzCursorType: "nzCursorType" }, outputs: { nzMouseDown: "nzMouseDown" }, host: { listeners: { "pointerdown": "onPointerDown($event)", "pointerup": "onPointerUp($event)" }, properties: { "class.nz-resizable-handle-top": "nzDirection === 'top'", "class.nz-resizable-handle-right": "nzDirection === 'right'", "class.nz-resizable-handle-bottom": "nzDirection === 'bottom'", "class.nz-resizable-handle-left": "nzDirection === 'left'", "class.nz-resizable-handle-topRight": "nzDirection === 'topRight'", "class.nz-resizable-handle-bottomRight": "nzDirection === 'bottomRight'", "class.nz-resizable-handle-bottomLeft": "nzDirection === 'bottomLeft'", "class.nz-resizable-handle-topLeft": "nzDirection === 'topLeft'", "class.nz-resizable-handle-cursor-type-grid": "nzCursorType === 'grid'", "class.nz-resizable-handle-cursor-type-window": "nzCursorType === 'window'" }, classAttribute: "nz-resizable-handle" }, providers: [NzDestroyService], exportAs: ["nzResizeHandle"], ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
  434. }
  435. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzResizeHandleComponent, decorators: [{
  436. type: Component,
  437. args: [{
  438. selector: 'nz-resize-handle, [nz-resize-handle]',
  439. exportAs: 'nzResizeHandle',
  440. template: ` <ng-content></ng-content> `,
  441. changeDetection: ChangeDetectionStrategy.OnPush,
  442. host: {
  443. class: 'nz-resizable-handle',
  444. '[class.nz-resizable-handle-top]': `nzDirection === 'top'`,
  445. '[class.nz-resizable-handle-right]': `nzDirection === 'right'`,
  446. '[class.nz-resizable-handle-bottom]': `nzDirection === 'bottom'`,
  447. '[class.nz-resizable-handle-left]': `nzDirection === 'left'`,
  448. '[class.nz-resizable-handle-topRight]': `nzDirection === 'topRight'`,
  449. '[class.nz-resizable-handle-bottomRight]': `nzDirection === 'bottomRight'`,
  450. '[class.nz-resizable-handle-bottomLeft]': `nzDirection === 'bottomLeft'`,
  451. '[class.nz-resizable-handle-topLeft]': `nzDirection === 'topLeft'`,
  452. '[class.nz-resizable-handle-cursor-type-grid]': `nzCursorType === 'grid'`,
  453. '[class.nz-resizable-handle-cursor-type-window]': `nzCursorType === 'window'`
  454. },
  455. providers: [NzDestroyService]
  456. }]
  457. }], ctorParameters: () => [{ type: NzResizableService }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i3.NzDestroyService }], propDecorators: { nzDirection: [{
  458. type: Input
  459. }], nzCursorType: [{
  460. type: Input
  461. }], nzMouseDown: [{
  462. type: Output
  463. }], onPointerDown: [{
  464. type: HostListener,
  465. args: ['pointerdown', ['$event']]
  466. }], onPointerUp: [{
  467. type: HostListener,
  468. args: ['pointerup', ['$event']]
  469. }] } });
  470. /**
  471. * Use of this source code is governed by an MIT-style license that can be
  472. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  473. */
  474. const DEFAULT_RESIZE_DIRECTION = [
  475. 'bottomRight',
  476. 'topRight',
  477. 'bottomLeft',
  478. 'topLeft',
  479. 'bottom',
  480. 'right',
  481. 'top',
  482. 'left'
  483. ];
  484. function normalizeResizeHandleOptions(value) {
  485. return value.map(val => {
  486. if (typeof val === 'string') {
  487. return {
  488. direction: val,
  489. cursorType: 'window'
  490. };
  491. }
  492. return val;
  493. });
  494. }
  495. class NzResizeHandlesComponent {
  496. nzDirections = DEFAULT_RESIZE_DIRECTION;
  497. resizeHandleOptions = normalizeResizeHandleOptions(this.nzDirections);
  498. ngOnChanges(changes) {
  499. if (changes.nzDirections) {
  500. this.resizeHandleOptions = normalizeResizeHandleOptions(changes.nzDirections.currentValue);
  501. }
  502. }
  503. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzResizeHandlesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
  504. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: NzResizeHandlesComponent, isStandalone: true, selector: "nz-resize-handles", inputs: { nzDirections: "nzDirections" }, exportAs: ["nzResizeHandles"], usesOnChanges: true, ngImport: i0, template: `
  505. @for (option of resizeHandleOptions; track option) {
  506. <nz-resize-handle [nzDirection]="option.direction" [nzCursorType]="option.cursorType" />
  507. }
  508. `, isInline: true, dependencies: [{ kind: "component", type: NzResizeHandleComponent, selector: "nz-resize-handle, [nz-resize-handle]", inputs: ["nzDirection", "nzCursorType"], outputs: ["nzMouseDown"], exportAs: ["nzResizeHandle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
  509. }
  510. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzResizeHandlesComponent, decorators: [{
  511. type: Component,
  512. args: [{
  513. selector: 'nz-resize-handles',
  514. exportAs: 'nzResizeHandles',
  515. template: `
  516. @for (option of resizeHandleOptions; track option) {
  517. <nz-resize-handle [nzDirection]="option.direction" [nzCursorType]="option.cursorType" />
  518. }
  519. `,
  520. changeDetection: ChangeDetectionStrategy.OnPush,
  521. imports: [NzResizeHandleComponent]
  522. }]
  523. }], propDecorators: { nzDirections: [{
  524. type: Input
  525. }] } });
  526. /**
  527. * Use of this source code is governed by an MIT-style license that can be
  528. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  529. */
  530. class NzResizableModule {
  531. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzResizableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
  532. static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: NzResizableModule, imports: [NzResizableDirective, NzResizeHandleComponent, NzResizeHandlesComponent], exports: [NzResizableDirective, NzResizeHandleComponent, NzResizeHandlesComponent] });
  533. static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzResizableModule });
  534. }
  535. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzResizableModule, decorators: [{
  536. type: NgModule,
  537. args: [{
  538. imports: [NzResizableDirective, NzResizeHandleComponent, NzResizeHandlesComponent],
  539. exports: [NzResizableDirective, NzResizeHandleComponent, NzResizeHandlesComponent]
  540. }]
  541. }] });
  542. /**
  543. * Use of this source code is governed by an MIT-style license that can be
  544. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  545. */
  546. /**
  547. * Generated bundle index. Do not edit.
  548. */
  549. export { DEFAULT_RESIZE_DIRECTION, NzResizableDirective, NzResizableModule, NzResizableService, NzResizeHandleComponent, NzResizeHandleMouseDownEvent, NzResizeHandlesComponent, getEventWithPoint };
  550. //# sourceMappingURL=ng-zorro-antd-resizable.mjs.map