@tft/interact 12.4.0 → 12.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/bundles/tft-interact.umd.js +147 -104
  2. package/bundles/tft-interact.umd.js.map +1 -1
  3. package/esm2015/lib/directives/account-for-scale.directive.js +4 -17
  4. package/esm2015/lib/directives/account-for-scale.directive.js.map +1 -1
  5. package/esm2015/lib/directives/account-for-scale.directive.metadata.json +1 -1
  6. package/esm2015/lib/directives/apply-scale.directive.js +26 -0
  7. package/esm2015/lib/directives/apply-scale.directive.js.map +1 -0
  8. package/esm2015/lib/directives/apply-scale.directive.metadata.json +1 -0
  9. package/esm2015/lib/directives/drag-root.directive.js +8 -11
  10. package/esm2015/lib/directives/drag-root.directive.js.map +1 -1
  11. package/esm2015/lib/directives/drag-root.directive.metadata.json +1 -1
  12. package/esm2015/lib/directives/draggable.directive.js +12 -12
  13. package/esm2015/lib/directives/draggable.directive.js.map +1 -1
  14. package/esm2015/lib/directives/draggable.directive.metadata.json +1 -1
  15. package/esm2015/lib/directives/dropzone.directive.js +9 -5
  16. package/esm2015/lib/directives/dropzone.directive.js.map +1 -1
  17. package/esm2015/lib/directives/dropzone.directive.metadata.json +1 -1
  18. package/esm2015/lib/directives/index.js +1 -0
  19. package/esm2015/lib/directives/index.js.map +1 -1
  20. package/esm2015/lib/directives/index.metadata.json +1 -1
  21. package/esm2015/lib/directives/resizable.directive.js +1 -1
  22. package/esm2015/lib/directives/resizable.directive.js.map +1 -1
  23. package/esm2015/lib/interact.module.js +15 -1
  24. package/esm2015/lib/interact.module.js.map +1 -1
  25. package/esm2015/lib/interact.module.metadata.json +1 -1
  26. package/esm2015/lib/models/interact.js +2 -0
  27. package/esm2015/lib/models/interact.js.map +1 -1
  28. package/esm2015/lib/models/interact.metadata.json +1 -1
  29. package/esm2015/lib/services/interact.service.js +39 -24
  30. package/esm2015/lib/services/interact.service.js.map +1 -1
  31. package/esm2015/lib/services/interact.service.metadata.json +1 -1
  32. package/esm2015/tft-interact.js +2 -2
  33. package/esm2015/tft-interact.js.map +1 -1
  34. package/esm2015/tft-interact.metadata.json +1 -1
  35. package/fesm2015/tft-interact.js +128 -89
  36. package/fesm2015/tft-interact.js.map +1 -1
  37. package/lib/directives/account-for-scale.directive.d.ts +3 -7
  38. package/lib/directives/apply-scale.directive.d.ts +8 -0
  39. package/lib/directives/drag-root.directive.d.ts +2 -1
  40. package/lib/directives/draggable.directive.d.ts +2 -1
  41. package/lib/directives/dropzone.directive.d.ts +7 -5
  42. package/lib/directives/index.d.ts +1 -0
  43. package/lib/interact.module.d.ts +3 -0
  44. package/lib/models/interact.d.ts +6 -0
  45. package/lib/services/interact.service.d.ts +4 -2
  46. package/package.json +1 -1
  47. package/tft-interact-12.5.0.tgz +0 -0
  48. package/tft-interact.d.ts +2 -2
  49. package/tft-interact.metadata.json +1 -1
  50. package/tft-interact-12.4.0.tgz +0 -0
@@ -1 +1 @@
1
- {"version":3,"file":"interact.js","sourceRoot":"","sources":["../../../../../../libs/interact/src/lib/models/interact.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,mBAAmB,GAAG,SAAS,CAAC;AAC7C;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAU;IACjC,MAAM,EAAE,CAAC;IACT,MAAM,EAAE,CAAC;IACT,aAAa,EAAE,IAAI;CACpB,CAAC;AACF;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAS;IAC/B,KAAK,EAAE,IAAI;IACX,MAAM,EAAE,IAAI;IACZ,aAAa,EAAE,IAAI;CACpB,CAAA;AACD;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAa;IACvC,CAAC,EAAE,CAAC;IACJ,CAAC,EAAE,CAAC;IACJ,aAAa,EAAE,IAAI;CACpB,CAAA","sourcesContent":["import { DropzoneDirective, DraggableDirective, GesturableDirective, ResizableDirective } from '../directives';\nimport { Point, DragEvent, ResizeEvent, Interactable, DropEvent, GestureEvent } from '@interactjs/types';\nimport { BehaviorSubject, Observable } from 'rxjs';\n\nexport const DEFAULT_REGISTRY_ID = 'DEFAULT';\n/**\n * Default initial value for Delta BehaviorSubject\n */\nexport const defaultDelta: Delta = {\n deltaX: 0,\n deltaY: 0,\n targetElement: null\n};\n/**\n * Default initial value for Size BehaviorSubject\n */\nexport const defaultSize: Size = {\n width: null,\n height: null,\n targetElement: null\n}\n/**\n * Default initial value for Position BehaviorSubject\n */\nexport const defaultPosition: Position = {\n x: 0,\n y: 0,\n targetElement: null\n}\n/**\n * The shape of the state/events/behavior system for each dropzone\n * and the DEFAULT_REGISTRY_ID system (for drop components initialized outside\n * of a dropzone).\n */\nexport interface InteractableSystem {\n deltas$: BehaviorSubject<Delta>;\n position$: BehaviorSubject<Position>;\n size$: BehaviorSubject<Size & Delta>;\n\n interactable$: Observable<TftCoords>;\n}\n/**\n * The key map of InteractableSystems. One for the drag components\n * that originated outside of a dropzone, plus one for each dropzone.\n */\nexport interface InteractableRegistry {\n [key: string]: InteractableSystem\n}\n\n/**\n * HTMLElement with helpful drag directives attached to facilitate moving drag data between dropzones\n */\nexport type TftDragElement = HTMLElement & {\n dragRef?: DraggableDirective\n dragOrigin?: DropzoneDirective\n dropTarget?: DropzoneDirective\n}\n\n/**\n * HTMLElement with helpful drag directives attached to facilitate moving drag data between dropzones\n */\n export type TftResizeElement = HTMLElement & {\n resizeRef?: ResizableDirective\n}\n\n/**\n * Extends the interact drop events by adding reference to the dropped components drag\n * directive to the html element. This gives the dropzone access to things like data\n * and parent dropzone of the dropped component.\n */\nexport type NgDropEvent = DropEvent & {\n draggable: Interactable & {\n target: TftDragElement;\n };\n relatedTarget: TftDragElement;\n};\n/**\n * Extends the interact resize events by adding a reference to the dragRef\n * directive to the html element.\n */\nexport type NgResizeEvent = ResizeEvent & {\n draggable: Interactable & {\n target: TftDragElement;\n };\n};\n/**\n * We extend the interact DragEvent a little here, adding to the target element references for:\n * - the component we are dragging (dragRef)\n * - the dropzone component where the drag component originated (dragOrigin)\n * - the dropzone component that it was dropped in (dropTarget)\n * This helps us to pass references to directive classes as events like dragenter and drag exit happens.\n * We use these references to emit a (mostly) consistent event across drag, drop, resize event.\n */\nexport type NgDragEvent = DragEvent & {\n dropzone: { target: HTMLElement},\n target: TftDragElement\n};\n/**\n * Event emitted when resizing, dragging, dropping\n */\nexport interface TftInteractableEvent {\n dragRef: DraggableDirective;\n dragOrigin?: DropzoneDirective;\n dropTarget?: DropzoneDirective;\n positionInDropTarget: Point;\n}\n/**\n * Event emitted on drop\n */\nexport interface TftDropEvent extends TftInteractableEvent {\n interactEvent: NgDropEvent\n}\n/**\n * Event emitted on drag\n */\nexport interface TftDragEvent extends TftInteractableEvent {\n interactEvent: NgDragEvent\n}\n/**\n * Event emitted on resize\n */\nexport interface TftResizeEvent extends TftInteractableEvent {\n interactEvent: ResizeEvent,\n resizeRef: ResizableDirective\n}\n\nexport type TftCoords= Delta & Position & Size;\n\nexport interface Delta {\n deltaX: number | null;\n deltaY: number | null;\n targetElement: TftDragElement | null;\n}\n\nexport interface Position {\n x: number | null;\n y: number | null;\n targetElement: TftDragElement | null;\n}\n\nexport interface Size {\n width: number | null;\n height: number | null;\n targetElement: TftResizeElement | null;\n}\n\nexport interface TftGestureEvent {\n gestureRef: GesturableDirective;\n interactEvent: GestureEvent;\n}\n"]}
1
+ {"version":3,"file":"interact.js","sourceRoot":"","sources":["../../../../../../libs/interact/src/lib/models/interact.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAQ/C,MAAM,CAAC,MAAM,oBAAoB,GAAG,IAAI,cAAc,CAAqB,6BAA6B,CAAC,CAAC;AAE1G,MAAM,CAAC,MAAM,mBAAmB,GAAG,SAAS,CAAC;AAC7C;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAU;IACjC,MAAM,EAAE,CAAC;IACT,MAAM,EAAE,CAAC;IACT,aAAa,EAAE,IAAI;CACpB,CAAC;AACF;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAS;IAC/B,KAAK,EAAE,IAAI;IACX,MAAM,EAAE,IAAI;IACZ,aAAa,EAAE,IAAI;CACpB,CAAA;AACD;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAa;IACvC,CAAC,EAAE,CAAC;IACJ,CAAC,EAAE,CAAC;IACJ,aAAa,EAAE,IAAI;CACpB,CAAA","sourcesContent":["import { DropzoneDirective, DraggableDirective, GesturableDirective, ResizableDirective } from '../directives';\nimport { Point, DragEvent, ResizeEvent, Interactable, DropEvent, GestureEvent } from '@interactjs/types';\nimport { BehaviorSubject, Observable } from 'rxjs';\nimport { InjectionToken } from '@angular/core';\n\n\n\nexport type CssDimensionUnit = 'px' | 'em';\nexport interface InteractRootConfig {\n cssDimensionUnit: CssDimensionUnit;\n}\nexport const INTERACT_ROOT_CONFIG = new InjectionToken<InteractRootConfig>('INTERACT_ROOT_CONFIG_PARAMS');\n\nexport const DEFAULT_REGISTRY_ID = 'DEFAULT';\n/**\n * Default initial value for Delta BehaviorSubject\n */\nexport const defaultDelta: Delta = {\n deltaX: 0,\n deltaY: 0,\n targetElement: null\n};\n/**\n * Default initial value for Size BehaviorSubject\n */\nexport const defaultSize: Size = {\n width: null,\n height: null,\n targetElement: null\n}\n/**\n * Default initial value for Position BehaviorSubject\n */\nexport const defaultPosition: Position = {\n x: 0,\n y: 0,\n targetElement: null\n}\n/**\n * The shape of the state/events/behavior system for each dropzone\n * and the DEFAULT_REGISTRY_ID system (for drop components initialized outside\n * of a dropzone).\n */\nexport interface InteractableSystem {\n deltas$: BehaviorSubject<Delta>;\n position$: BehaviorSubject<Position>;\n size$: BehaviorSubject<Size & Delta>;\n\n interactable$: Observable<TftCoords>;\n}\n/**\n * The key map of InteractableSystems. One for the drag components\n * that originated outside of a dropzone, plus one for each dropzone.\n */\nexport interface InteractableRegistry {\n [key: string]: InteractableSystem\n}\n\n/**\n * HTMLElement with helpful drag directives attached to facilitate moving drag data between dropzones\n */\nexport type TftDragElement = HTMLElement & {\n dragRef?: DraggableDirective\n dragOrigin?: DropzoneDirective\n dropTarget?: DropzoneDirective\n}\n\n/**\n * HTMLElement with helpful drag directives attached to facilitate moving drag data between dropzones\n */\n export type TftResizeElement = HTMLElement & {\n resizeRef?: ResizableDirective\n}\n\n/**\n * Extends the interact drop events by adding reference to the dropped components drag\n * directive to the html element. This gives the dropzone access to things like data\n * and parent dropzone of the dropped component.\n */\nexport type NgDropEvent = DropEvent & {\n draggable: Interactable & {\n target: TftDragElement;\n };\n relatedTarget: TftDragElement;\n};\n/**\n * Extends the interact resize events by adding a reference to the dragRef\n * directive to the html element.\n */\nexport type NgResizeEvent = ResizeEvent & {\n draggable: Interactable & {\n target: TftDragElement;\n };\n};\n/**\n * We extend the interact DragEvent a little here, adding to the target element references for:\n * - the component we are dragging (dragRef)\n * - the dropzone component where the drag component originated (dragOrigin)\n * - the dropzone component that it was dropped in (dropTarget)\n * This helps us to pass references to directive classes as events like dragenter and drag exit happens.\n * We use these references to emit a (mostly) consistent event across drag, drop, resize event.\n */\nexport type NgDragEvent = DragEvent & {\n dropzone: { target: HTMLElement},\n target: TftDragElement\n};\n/**\n * Event emitted when resizing, dragging, dropping\n */\nexport interface TftInteractableEvent {\n dragRef: DraggableDirective;\n dragOrigin?: DropzoneDirective;\n dropTarget?: DropzoneDirective;\n positionInDropTarget: Point;\n}\n/**\n * Event emitted on drop\n */\nexport interface TftDropEvent extends TftInteractableEvent {\n interactEvent: NgDropEvent\n}\n/**\n * Event emitted on drag\n */\nexport interface TftDragEvent extends TftInteractableEvent {\n interactEvent: NgDragEvent\n}\n/**\n * Event emitted on resize\n */\nexport interface TftResizeEvent extends TftInteractableEvent {\n interactEvent: ResizeEvent,\n resizeRef: ResizableDirective\n}\n\nexport type TftCoords= Delta & Position & Size;\n\nexport interface Delta {\n deltaX: number | null;\n deltaY: number | null;\n targetElement: TftDragElement | null;\n}\n\nexport interface Position {\n x: number | null;\n y: number | null;\n targetElement: TftDragElement | null;\n}\n\nexport interface Size {\n width: number | null;\n height: number | null;\n targetElement: TftResizeElement | null;\n}\n\nexport interface TftGestureEvent {\n gestureRef: GesturableDirective;\n interactEvent: GestureEvent;\n}\n"]}
@@ -1 +1 @@
1
- [{"__symbolic":"module","version":4,"metadata":{"DEFAULT_REGISTRY_ID":"DEFAULT","defaultDelta":{"deltaX":0,"deltaY":0,"targetElement":null},"defaultSize":{"width":null,"height":null,"targetElement":null},"defaultPosition":{"x":0,"y":0,"targetElement":null},"InteractableSystem":{"__symbolic":"interface"},"InteractableRegistry":{"__symbolic":"interface"},"TftDragElement":{"__symbolic":"interface"},"TftResizeElement":{"__symbolic":"interface"},"NgDropEvent":{"__symbolic":"interface"},"NgResizeEvent":{"__symbolic":"interface"},"NgDragEvent":{"__symbolic":"interface"},"TftInteractableEvent":{"__symbolic":"interface"},"TftDropEvent":{"__symbolic":"interface"},"TftDragEvent":{"__symbolic":"interface"},"TftResizeEvent":{"__symbolic":"interface"},"TftCoords":{"__symbolic":"interface"},"Delta":{"__symbolic":"interface"},"Position":{"__symbolic":"interface"},"Size":{"__symbolic":"interface"},"TftGestureEvent":{"__symbolic":"interface"}}}]
1
+ [{"__symbolic":"module","version":4,"metadata":{"CssDimensionUnit":{"__symbolic":"interface"},"InteractRootConfig":{"__symbolic":"interface"},"INTERACT_ROOT_CONFIG":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":11,"character":40},"arguments":["INTERACT_ROOT_CONFIG_PARAMS"]},"DEFAULT_REGISTRY_ID":"DEFAULT","defaultDelta":{"deltaX":0,"deltaY":0,"targetElement":null},"defaultSize":{"width":null,"height":null,"targetElement":null},"defaultPosition":{"x":0,"y":0,"targetElement":null},"InteractableSystem":{"__symbolic":"interface"},"InteractableRegistry":{"__symbolic":"interface"},"TftDragElement":{"__symbolic":"interface"},"TftResizeElement":{"__symbolic":"interface"},"NgDropEvent":{"__symbolic":"interface"},"NgResizeEvent":{"__symbolic":"interface"},"NgDragEvent":{"__symbolic":"interface"},"TftInteractableEvent":{"__symbolic":"interface"},"TftDropEvent":{"__symbolic":"interface"},"TftDragEvent":{"__symbolic":"interface"},"TftResizeEvent":{"__symbolic":"interface"},"TftCoords":{"__symbolic":"interface"},"Delta":{"__symbolic":"interface"},"Position":{"__symbolic":"interface"},"Size":{"__symbolic":"interface"},"TftGestureEvent":{"__symbolic":"interface"}}}]
@@ -1,17 +1,21 @@
1
- import { Injectable, RendererFactory2, NgZone } from '@angular/core';
1
+ import { Injectable, RendererFactory2, NgZone, Inject, Optional } from '@angular/core';
2
2
  import { BehaviorSubject, combineLatest } from 'rxjs';
3
3
  import { tap, map, shareReplay } from 'rxjs/operators';
4
- import { defaultPosition, defaultSize, defaultDelta, DEFAULT_REGISTRY_ID } from '../models';
4
+ import { defaultPosition, defaultSize, defaultDelta, DEFAULT_REGISTRY_ID, INTERACT_ROOT_CONFIG } from '../models';
5
5
  import * as i0 from "@angular/core";
6
+ import * as i1 from "../models/interact";
6
7
  export class InteractService {
7
- constructor(rendererFactory, ngZone) {
8
+ constructor(rendererFactory, ngZone, rootConfig) {
8
9
  this.rendererFactory = rendererFactory;
9
10
  this.ngZone = ngZone;
11
+ this.rootConfig = rootConfig;
10
12
  this._interactableIndex = 0;
11
13
  this._dropzoneIndex = 0;
12
14
  // TODO: consider using Map here
13
15
  this.dragRegistrySystem = {};
16
+ this.cssUnit = 'px';
14
17
  this.renderer = this.rendererFactory.createRenderer(null, null);
18
+ this.cssUnit = (rootConfig === null || rootConfig === void 0 ? void 0 : rootConfig.cssDimensionUnit) || 'px';
15
19
  }
16
20
  addDeltaToPosition(delta, position) {
17
21
  return {
@@ -119,8 +123,8 @@ export class InteractService {
119
123
  this.dragRegistrySystem[registryId][interactId].size$.next({ deltaX, deltaY, width, height, targetElement });
120
124
  }
121
125
  interactableExistOnRegistry(interactId, registryId = DEFAULT_REGISTRY_ID) {
122
- return this.dragRegistrySystem.hasOwnProperty(registryId)
123
- && this.dragRegistrySystem[registryId].hasOwnProperty(interactId);
126
+ // eslint-disable-next-line no-prototype-builtins
127
+ return this.dragRegistrySystem.hasOwnProperty(registryId) && this.dragRegistrySystem[registryId].hasOwnProperty(interactId);
124
128
  }
125
129
  /**
126
130
  * Uses renderer to set width and height of angular component
@@ -134,14 +138,16 @@ export class InteractService {
134
138
  return;
135
139
  const accountForScaleDirective = (_a = target.resizeRef) === null || _a === void 0 ? void 0 : _a.account_for_scale_dir;
136
140
  if (accountForScaleDirective) {
137
- const { scaleX, scaleY } = accountForScaleDirective;
138
- const scaledWidth = width / scaleX;
139
- const scaledHeight = height / scaleY;
140
- this.renderer.setStyle(target, 'width', `${scaledWidth}px`);
141
- this.renderer.setStyle(target, 'height', `${scaledHeight}px`);
141
+ const { scale } = accountForScaleDirective;
142
+ const scaledWidth = width / scale;
143
+ const scaledHeight = height / scale;
144
+ this.renderer.setStyle(target, 'width', `${scaledWidth}${this.cssUnit}`);
145
+ this.renderer.setStyle(target, 'height', `${scaledHeight}${this.cssUnit}`);
146
+ }
147
+ else {
148
+ this.renderer.setStyle(target, 'width', `${width}${this.cssUnit}`);
149
+ this.renderer.setStyle(target, 'height', `${height}${this.cssUnit}`);
142
150
  }
143
- this.renderer.setStyle(target, 'width', `${width}px`);
144
- this.renderer.setStyle(target, 'height', `${height}px`);
145
151
  }
146
152
  /**
147
153
  * Uses renderer to set position of angular component
@@ -150,17 +156,19 @@ export class InteractService {
150
156
  * @param target the element to transform
151
157
  */
152
158
  setElementTransform(x, y, position) {
153
- var _a, _b, _c, _d;
159
+ var _a, _b;
154
160
  if (!(position === null || position === void 0 ? void 0 : position.targetElement))
155
161
  return;
156
- if ((_b = (_a = position.targetElement) === null || _a === void 0 ? void 0 : _a.dragRef) === null || _b === void 0 ? void 0 : _b.account_for_scale_dir) {
157
- const { scaleX, scaleY } = (_d = (_c = position.targetElement) === null || _c === void 0 ? void 0 : _c.dragRef) === null || _d === void 0 ? void 0 : _d.account_for_scale_dir;
158
- this.renderer.setStyle(position.targetElement, 'left', `${x / scaleX}px`);
159
- this.renderer.setStyle(position.targetElement, 'top', `${y / scaleY}px`);
162
+ const dragRef = (_a = position.targetElement) === null || _a === void 0 ? void 0 : _a.dragRef;
163
+ const accountForScaleDirective = (dragRef === null || dragRef === void 0 ? void 0 : dragRef.account_for_scale_dir) || ((_b = dragRef === null || dragRef === void 0 ? void 0 : dragRef.dragRoot) === null || _b === void 0 ? void 0 : _b.account_for_scale_dir);
164
+ if (accountForScaleDirective) {
165
+ const { scale } = accountForScaleDirective;
166
+ this.renderer.setStyle(position.targetElement, 'left', `${x / scale}${this.cssUnit}`);
167
+ this.renderer.setStyle(position.targetElement, 'top', `${y / scale}${this.cssUnit}`);
160
168
  }
161
169
  else {
162
- this.renderer.setStyle(position.targetElement, 'left', `${x}px`);
163
- this.renderer.setStyle(position.targetElement, 'top', `${y}px`);
170
+ this.renderer.setStyle(position.targetElement, 'left', `${x}${this.cssUnit}`);
171
+ this.renderer.setStyle(position.targetElement, 'top', `${y}${this.cssUnit}`);
164
172
  }
165
173
  }
166
174
  /**
@@ -170,24 +178,31 @@ export class InteractService {
170
178
  * @param y the position along the y axis
171
179
  */
172
180
  createTransformString(x, y) {
173
- return `translate3d(${x}px, ${y}px, 0)`;
181
+ return `translate3d(${x}${this.cssUnit}, ${y}${this.cssUnit}, 0)`;
174
182
  }
175
- calculatePositionInElement(zoneElement, dragElement) {
183
+ calculatePositionInElement(zoneElement, dragElement, scale) {
176
184
  // TODO: this calculation may not cover a lot of scenarios, keep an eye out for possible improvements
177
185
  const zoneRect = zoneElement.getBoundingClientRect();
178
186
  const dragRect = dragElement.getBoundingClientRect();
179
- return {
187
+ const position = scale
188
+ ? {
189
+ x: (dragRect.left - zoneRect.left) / scale || 1,
190
+ y: (dragRect.top - zoneRect.top) / scale || 1
191
+ } : {
180
192
  x: dragRect.left - zoneRect.left,
181
193
  y: dragRect.top - zoneRect.top
182
194
  };
195
+ // console.log({ y:position.y, drt:dragRect.top, zrt: zoneRect.top})
196
+ return position;
183
197
  }
184
198
  }
185
- InteractService.ɵprov = i0.ɵɵdefineInjectable({ factory: function InteractService_Factory() { return new InteractService(i0.ɵɵinject(i0.RendererFactory2), i0.ɵɵinject(i0.NgZone)); }, token: InteractService, providedIn: "root" });
199
+ InteractService.ɵprov = i0.ɵɵdefineInjectable({ factory: function InteractService_Factory() { return new InteractService(i0.ɵɵinject(i0.RendererFactory2), i0.ɵɵinject(i0.NgZone), i0.ɵɵinject(i1.INTERACT_ROOT_CONFIG, 8)); }, token: InteractService, providedIn: "root" });
186
200
  InteractService.decorators = [
187
201
  { type: Injectable, args: [{ providedIn: 'root' },] }
188
202
  ];
189
203
  InteractService.ctorParameters = () => [
190
204
  { type: RendererFactory2 },
191
- { type: NgZone }
205
+ { type: NgZone },
206
+ { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [INTERACT_ROOT_CONFIG,] }] }
192
207
  ];
193
208
  //# sourceMappingURL=interact.service.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"interact.service.js","sourceRoot":"","sources":["../../../../../../libs/interact/src/lib/services/interact.service.ts"],"names":[],"mappings":"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","sourcesContent":["\nimport { Injectable, Renderer2, RendererFactory2, NgZone } from '@angular/core';\nimport { BehaviorSubject, Observable, combineLatest } from 'rxjs';\nimport { tap, map, shareReplay } from 'rxjs/operators';\nimport {\n TftCoords, Delta, Size, Position, InteractableRegistry,\n defaultPosition, defaultSize, defaultDelta, DEFAULT_REGISTRY_ID, TftDragElement, TftResizeElement\n} from '../models';\n\n@Injectable({providedIn: 'root'})\nexport class InteractService {\n\n private _interactableIndex = 0;\n private _dropzoneIndex = 0;\n private renderer: Renderer2;\n\n // TODO: consider using Map here\n readonly dragRegistrySystem: { [key: string]: InteractableRegistry } = { };\n\n constructor(\n private rendererFactory: RendererFactory2,\n private ngZone: NgZone\n ) {\n this.renderer = this.rendererFactory.createRenderer(null, null);\n }\n\n addDeltaToPosition(delta: Delta, position: Position) {\n return {\n x: delta.deltaX + position.x,\n y: delta.deltaY + position.y,\n targetElement: position.targetElement || delta.targetElement\n }\n }\n\n addRegistryToSystem(customRegistryId: string | null = null) {\n const registryId = customRegistryId || this.createDropzoneId(this._dropzoneIndex++);\n this.dragRegistrySystem[registryId] = {};\n return registryId;\n }\n\n addDraggableToRegistry(customRegistryId = null, interactableId: string | null = null ) {\n const registryId = customRegistryId || DEFAULT_REGISTRY_ID;\n // if we pass an id to createInteractableId then it is used when creating the interactable\n // and returned, otherwise a an id is created for the draggable.\n const key = this.createInteractableId(interactableId );\n if (!Object.prototype.hasOwnProperty.call(this.dragRegistrySystem, registryId)) {\n this.dragRegistrySystem[registryId] = {};\n }\n this.dragRegistrySystem[registryId][key] = this.createInteractableState(defaultPosition, defaultSize, defaultDelta);\n return key\n }\n\n destroyInteractable(interactableId: string, registryId = DEFAULT_REGISTRY_ID) {\n if(this.dragRegistrySystem[registryId][interactableId]) {\n delete this.dragRegistrySystem[registryId][interactableId];\n }\n }\n\n subscribeToInteractable(interactableId: string, registryId = DEFAULT_REGISTRY_ID) {\n return this.dragRegistrySystem[registryId][interactableId];\n }\n\n createInteractableState(initialPosition: Position, initialSize: Size, initialDelta: Delta ) {\n\n const deltas$ = new BehaviorSubject(initialDelta);\n // tracks the size of the element\n const size$ = new BehaviorSubject({...initialSize, ...initialDelta});\n // Stream of positions as they change\n const position$ = new BehaviorSubject(initialPosition);\n\n // All draggable data mapped together\n const interactable$: Observable<TftCoords> = combineLatest([\n size$.pipe(\n // startWith({...initialSize, ...initialDelta}),\n shareReplay(1),\n // filter(resizeEvent => !!resizeEvent.targetElement),\n tap(({deltaX, deltaY, width, height, targetElement}) => {\n this.ngZone.runOutsideAngular(() => {\n this.setElementSize(width, height, targetElement);\n });\n // only reposition if necessary i.e when resizing left or up\n if(deltaX || deltaY) {\n deltas$.next({deltaX, deltaY, targetElement});\n }\n })\n ),\n deltas$.pipe(\n shareReplay(1),\n tap((delta) => {\n const position = position$.value;\n const newPosition = this.addDeltaToPosition(delta, position);\n position$.next(newPosition);\n })\n ),\n position$.pipe(\n shareReplay(1),\n tap( position => {\n this.ngZone.runOutsideAngular(() => {\n this.setElementTransform(position.x, position.y, position);\n })\n })\n )\n ]).pipe(\n shareReplay(1),\n map( ([size, deltas, position]): TftCoords=> {\n return {\n x: position.x,\n y: position.y,\n deltaX: deltas.deltaX,\n deltaY: deltas.deltaY,\n width: size.width,\n height: size.height,\n targetElement: size.targetElement || position.targetElement || deltas.targetElement\n }\n }),\n )\n // TODO: update system to handle only returning interactable$\n return {\n deltas$,\n position$,\n size$,\n interactable$\n }\n }\n\n createInteractableId(customInteractableId: string | null = null) {\n return customInteractableId || `interactable${this._interactableIndex++}`\n }\n\n createDropzoneId(index: number) {\n return `dropzone${index}`\n }\n\n getInteractableState( interactableId: string, registryId = DEFAULT_REGISTRY_ID) {\n return this.dragRegistrySystem[registryId][interactableId].interactable$;\n }\n\n updateDeltas(interactId: string, registryId: string, { deltaX, deltaY }, targetElement) {\n if (!this.interactableExistOnRegistry(interactId, registryId)) return;\n this.dragRegistrySystem[registryId][interactId].deltas$.next({ deltaX, deltaY, targetElement })\n }\n\n updatePosition(interactId: string, registryId: string, { x, y }, targetElement) {\n if (!this.interactableExistOnRegistry(interactId, registryId)) return;\n this.dragRegistrySystem[registryId][interactId].position$.next({ x, y, targetElement })\n }\n\n updateSize(interactId: string, registryId: string, { deltaX, deltaY, width, height }, targetElement) {\n if (!this.interactableExistOnRegistry(interactId, registryId)) return\n this.dragRegistrySystem[registryId][interactId].size$.next({deltaX, deltaY, width, height, targetElement});\n }\n\n interactableExistOnRegistry(interactId: string, registryId = DEFAULT_REGISTRY_ID) {\n return this.dragRegistrySystem.hasOwnProperty(registryId)\n && this.dragRegistrySystem[registryId].hasOwnProperty(interactId);\n }\n /**\n * Uses renderer to set width and height of angular component\n * @param width the desired width of component\n * @param height the desired height of component\n * @param target the element to transform\n */\n setElementSize(width: number, height: number, target: TftResizeElement) {\n if(!target) return;\n\n const accountForScaleDirective = target.resizeRef?.account_for_scale_dir\n if (accountForScaleDirective) {\n const { scaleX, scaleY } = accountForScaleDirective\n const scaledWidth = width / scaleX;\n const scaledHeight = height / scaleY;\n this.renderer.setStyle(target, 'width', `${scaledWidth}px`);\n this.renderer.setStyle(target, 'height', `${scaledHeight}px`);\n }\n this.renderer.setStyle(target, 'width', `${width}px`);\n this.renderer.setStyle(target, 'height', `${height}px`);\n }\n /**\n * Uses renderer to set position of angular component\n * @param x position on x axis\n * @param y position on y axis\n * @param target the element to transform\n */\n setElementTransform(x: number, y: number, position: Position ) {\n if(!position?.targetElement) return;\n\n if (position.targetElement?.dragRef?.account_for_scale_dir) {\n const {scaleX, scaleY} = position.targetElement?.dragRef?.account_for_scale_dir;\n this.renderer.setStyle(position.targetElement, 'left', `${x / scaleX}px`);\n this.renderer.setStyle(position.targetElement, 'top', `${y / scaleY}px`);\n } else {\n this.renderer.setStyle(position.targetElement, 'left', `${x}px`);\n this.renderer.setStyle(position.targetElement, 'top', `${y}px`);\n }\n }\n /**\n * Generates a translate string for the x and y arguments passed to\n * be passed to css transform\n * @param x the position along the x axis\n * @param y the position along the y axis\n */\n createTransformString(x: number, y: number) {\n return `translate3d(${x}px, ${y}px, 0)`\n }\n\n calculatePositionInElement(zoneElement: Interact.Element, dragElement: TftDragElement) {\n // TODO: this calculation may not cover a lot of scenarios, keep an eye out for possible improvements\n const zoneRect = zoneElement.getBoundingClientRect();\n const dragRect = dragElement.getBoundingClientRect();\n return {\n x: dragRect.left - zoneRect.left,\n y: dragRect.top - zoneRect.top\n }\n }\n}\n"]}
1
+ {"version":3,"file":"interact.service.js","sourceRoot":"","sources":["../../../../../../libs/interact/src/lib/services/interact.service.ts"],"names":[],"mappings":"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","sourcesContent":["\nimport { Injectable, Renderer2, RendererFactory2, NgZone, Inject, InjectionToken, Optional, AfterViewInit } from '@angular/core';\nimport { BehaviorSubject, Observable, combineLatest } from 'rxjs';\nimport { tap, map, shareReplay } from 'rxjs/operators';\nimport {\n TftCoords, Delta, Size, Position, InteractableRegistry,\n defaultPosition, defaultSize, defaultDelta, DEFAULT_REGISTRY_ID, TftDragElement, TftResizeElement, INTERACT_ROOT_CONFIG, InteractRootConfig\n} from '../models';\n\n\n\n@Injectable({providedIn: 'root'})\nexport class InteractService {\n\n private _interactableIndex = 0;\n private _dropzoneIndex = 0;\n private renderer: Renderer2;\n\n // TODO: consider using Map here\n readonly dragRegistrySystem: { [key: string]: InteractableRegistry } = { };\n private cssUnit = 'px'\n constructor(\n private rendererFactory: RendererFactory2,\n private ngZone: NgZone,\n @Optional() @Inject(INTERACT_ROOT_CONFIG) public rootConfig\n ) {\n this.renderer = this.rendererFactory.createRenderer(null, null);\n this.cssUnit = rootConfig?.cssDimensionUnit || 'px';\n }\n\n addDeltaToPosition(delta: Delta, position: Position) {\n return {\n x: delta.deltaX + position.x,\n y: delta.deltaY + position.y,\n targetElement: position.targetElement || delta.targetElement\n }\n }\n\n addRegistryToSystem(customRegistryId: string | null = null) {\n const registryId = customRegistryId || this.createDropzoneId(this._dropzoneIndex++);\n this.dragRegistrySystem[registryId] = {};\n return registryId;\n }\n\n addDraggableToRegistry(customRegistryId = null, interactableId: string | null = null ) {\n const registryId = customRegistryId || DEFAULT_REGISTRY_ID;\n // if we pass an id to createInteractableId then it is used when creating the interactable\n // and returned, otherwise a an id is created for the draggable.\n const key = this.createInteractableId(interactableId );\n if (!Object.prototype.hasOwnProperty.call(this.dragRegistrySystem, registryId)) {\n this.dragRegistrySystem[registryId] = {};\n }\n this.dragRegistrySystem[registryId][key] = this.createInteractableState(defaultPosition, defaultSize, defaultDelta);\n return key\n }\n\n destroyInteractable(interactableId: string, registryId = DEFAULT_REGISTRY_ID) {\n if(this.dragRegistrySystem[registryId][interactableId]) {\n delete this.dragRegistrySystem[registryId][interactableId];\n }\n }\n\n subscribeToInteractable(interactableId: string, registryId = DEFAULT_REGISTRY_ID) {\n return this.dragRegistrySystem[registryId][interactableId];\n }\n\n createInteractableState(initialPosition: Position, initialSize: Size, initialDelta: Delta ) {\n\n const deltas$ = new BehaviorSubject(initialDelta);\n // tracks the size of the element\n const size$ = new BehaviorSubject({...initialSize, ...initialDelta});\n // Stream of positions as they change\n const position$ = new BehaviorSubject(initialPosition);\n\n // All draggable data mapped together\n const interactable$: Observable<TftCoords> = combineLatest([\n size$.pipe(\n // startWith({...initialSize, ...initialDelta}),\n shareReplay(1),\n // filter(resizeEvent => !!resizeEvent.targetElement),\n tap(({deltaX, deltaY, width, height, targetElement}) => {\n this.ngZone.runOutsideAngular(() => {\n this.setElementSize(width, height, targetElement);\n });\n // only reposition if necessary i.e when resizing left or up\n if(deltaX || deltaY) {\n deltas$.next({deltaX, deltaY, targetElement});\n }\n })\n ),\n deltas$.pipe(\n shareReplay(1),\n tap((delta) => {\n const position = position$.value;\n const newPosition = this.addDeltaToPosition(delta, position);\n position$.next(newPosition);\n })\n ),\n position$.pipe(\n shareReplay(1),\n tap( position => {\n this.ngZone.runOutsideAngular(() => {\n this.setElementTransform(position.x, position.y, position);\n })\n })\n )\n ]).pipe(\n shareReplay(1),\n map( ([size, deltas, position]): TftCoords=> {\n return {\n x: position.x,\n y: position.y,\n deltaX: deltas.deltaX,\n deltaY: deltas.deltaY,\n width: size.width,\n height: size.height,\n targetElement: size.targetElement || position.targetElement || deltas.targetElement\n }\n }),\n )\n // TODO: update system to handle only returning interactable$\n return {\n deltas$,\n position$,\n size$,\n interactable$\n }\n }\n\n createInteractableId(customInteractableId: string | null = null) {\n return customInteractableId || `interactable${this._interactableIndex++}`\n }\n\n createDropzoneId(index: number) {\n return `dropzone${index}`\n }\n\n getInteractableState( interactableId: string, registryId = DEFAULT_REGISTRY_ID) {\n return this.dragRegistrySystem[registryId][interactableId].interactable$;\n }\n\n updateDeltas(interactId: string, registryId: string, { deltaX, deltaY }, targetElement) {\n if (!this.interactableExistOnRegistry(interactId, registryId)) return;\n this.dragRegistrySystem[registryId][interactId].deltas$.next({ deltaX, deltaY, targetElement })\n }\n\n updatePosition(interactId: string, registryId: string, { x, y }, targetElement) {\n if (!this.interactableExistOnRegistry(interactId, registryId)) return;\n this.dragRegistrySystem[registryId][interactId].position$.next({ x, y, targetElement })\n }\n\n updateSize(interactId: string, registryId: string, { deltaX, deltaY, width, height }, targetElement) {\n if (!this.interactableExistOnRegistry(interactId, registryId)) return\n this.dragRegistrySystem[registryId][interactId].size$.next({deltaX, deltaY, width, height, targetElement});\n }\n\n interactableExistOnRegistry(interactId: string, registryId = DEFAULT_REGISTRY_ID) {\n // eslint-disable-next-line no-prototype-builtins\n return this.dragRegistrySystem.hasOwnProperty(registryId) && this.dragRegistrySystem[registryId].hasOwnProperty(interactId);\n }\n /**\n * Uses renderer to set width and height of angular component\n * @param width the desired width of component\n * @param height the desired height of component\n * @param target the element to transform\n */\n setElementSize(width: number, height: number, target: TftResizeElement) {\n if(!target) return;\n const accountForScaleDirective = target.resizeRef?.account_for_scale_dir\n if (accountForScaleDirective) {\n const { scale } = accountForScaleDirective\n const scaledWidth = width / scale;\n const scaledHeight = height / scale;\n this.renderer.setStyle(target, 'width', `${scaledWidth}${this.cssUnit}`);\n this.renderer.setStyle(target, 'height', `${scaledHeight}${this.cssUnit}`);\n } else {\n this.renderer.setStyle(target, 'width', `${width}${this.cssUnit}`);\n this.renderer.setStyle(target, 'height', `${height}${this.cssUnit}`);\n }\n }\n /**\n * Uses renderer to set position of angular component\n * @param x position on x axis\n * @param y position on y axis\n * @param target the element to transform\n */\n setElementTransform(x: number, y: number, position: Position ) {\n if(!position?.targetElement) return;\n const dragRef = position.targetElement?.dragRef;\n const accountForScaleDirective = dragRef?.account_for_scale_dir || dragRef?.dragRoot?.account_for_scale_dir\n if (accountForScaleDirective) {\n const {scale} = accountForScaleDirective;\n this.renderer.setStyle(position.targetElement, 'left', `${x / scale}${this.cssUnit}`);\n this.renderer.setStyle(position.targetElement, 'top', `${y / scale}${this.cssUnit}`);\n } else {\n this.renderer.setStyle(position.targetElement, 'left', `${x}${this.cssUnit}`);\n this.renderer.setStyle(position.targetElement, 'top', `${y}${this.cssUnit}`);\n }\n }\n /**\n * Generates a translate string for the x and y arguments passed to\n * be passed to css transform\n * @param x the position along the x axis\n * @param y the position along the y axis\n */\n createTransformString(x: number, y: number) {\n return `translate3d(${x}${this.cssUnit}, ${y}${this.cssUnit}, 0)`\n }\n\n calculatePositionInElement(zoneElement: Interact.Element, dragElement: TftDragElement, scale?: number) {\n // TODO: this calculation may not cover a lot of scenarios, keep an eye out for possible improvements\n const zoneRect = zoneElement.getBoundingClientRect();\n const dragRect = dragElement.getBoundingClientRect();\n const position = scale\n ? {\n x: (dragRect.left - zoneRect.left) / scale || 1,\n y: (dragRect.top - zoneRect.top) / scale || 1\n } : {\n x: dragRect.left - zoneRect.left,\n y: dragRect.top - zoneRect.top\n };\n // console.log({ y:position.y, drt:dragRect.top, zrt: zoneRect.top})\n return position;\n }\n}\n"]}
@@ -1 +1 @@
1
- [{"__symbolic":"module","version":4,"metadata":{"InteractService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":9,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"RendererFactory2","line":20,"character":29},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":21,"character":20}]}],"addDeltaToPosition":[{"__symbolic":"method"}],"addRegistryToSystem":[{"__symbolic":"method"}],"addDraggableToRegistry":[{"__symbolic":"method"}],"destroyInteractable":[{"__symbolic":"method"}],"subscribeToInteractable":[{"__symbolic":"method"}],"createInteractableState":[{"__symbolic":"method"}],"createInteractableId":[{"__symbolic":"method"}],"createDropzoneId":[{"__symbolic":"method"}],"getInteractableState":[{"__symbolic":"method"}],"updateDeltas":[{"__symbolic":"method"}],"updatePosition":[{"__symbolic":"method"}],"updateSize":[{"__symbolic":"method"}],"interactableExistOnRegistry":[{"__symbolic":"method"}],"setElementSize":[{"__symbolic":"method"}],"setElementTransform":[{"__symbolic":"method"}],"createTransformString":[{"__symbolic":"method"}],"calculatePositionInElement":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}}}}]
1
+ [{"__symbolic":"module","version":4,"metadata":{"InteractService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":11,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":24,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":24,"character":17},"arguments":[{"__symbolic":"reference","module":"../models","name":"INTERACT_ROOT_CONFIG","line":24,"character":24}]}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"RendererFactory2","line":22,"character":29},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":23,"character":20},null]}],"addDeltaToPosition":[{"__symbolic":"method"}],"addRegistryToSystem":[{"__symbolic":"method"}],"addDraggableToRegistry":[{"__symbolic":"method"}],"destroyInteractable":[{"__symbolic":"method"}],"subscribeToInteractable":[{"__symbolic":"method"}],"createInteractableState":[{"__symbolic":"method"}],"createInteractableId":[{"__symbolic":"method"}],"createDropzoneId":[{"__symbolic":"method"}],"getInteractableState":[{"__symbolic":"method"}],"updateDeltas":[{"__symbolic":"method"}],"updatePosition":[{"__symbolic":"method"}],"updateSize":[{"__symbolic":"method"}],"interactableExistOnRegistry":[{"__symbolic":"method"}],"setElementSize":[{"__symbolic":"method"}],"setElementTransform":[{"__symbolic":"method"}],"createTransformString":[{"__symbolic":"method"}],"calculatePositionInElement":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}}}}]
@@ -2,6 +2,6 @@
2
2
  * Generated bundle index. Do not edit.
3
3
  */
4
4
  export * from './index';
5
- export { AccountForScaleDirective as ɵf, DragPreviewDirective as ɵg, DragRootDirective as ɵe, DraggableDirective as ɵa, DropzoneDirective as ɵc, GesturableDirective as ɵd, ResizableDirective as ɵb } from './lib/directives';
6
- export { ArrayOfNPipe as ɵh } from './lib/pipes/array-of-n.pipe';
5
+ export { AccountForScaleDirective as ɵf, ApplyScaleDirective as ɵg, DragPreviewDirective as ɵh, DragRootDirective as ɵe, DraggableDirective as ɵa, DropzoneDirective as ɵc, GesturableDirective as ɵd, ResizableDirective as ɵb } from './lib/directives';
6
+ export { ArrayOfNPipe as ɵi } from './lib/pipes/array-of-n.pipe';
7
7
  //# sourceMappingURL=tft-interact.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"tft-interact.js","sourceRoot":"","sources":["../../../../libs/interact/src/tft-interact.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,SAAS,CAAC;AAExB,OAAO,EAAC,wBAAwB,IAAI,EAAE,EAAC,oBAAoB,IAAI,EAAE,EAAC,iBAAiB,IAAI,EAAE,EAAC,kBAAkB,IAAI,EAAE,EAAC,iBAAiB,IAAI,EAAE,EAAC,mBAAmB,IAAI,EAAE,EAAC,kBAAkB,IAAI,EAAE,EAAC,MAAM,kBAAkB,CAAC;AACvN,OAAO,EAAC,YAAY,IAAI,EAAE,EAAC,MAAM,6BAA6B,CAAC","sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n\nexport {AccountForScaleDirective as ɵf,DragPreviewDirective as ɵg,DragRootDirective as ɵe,DraggableDirective as ɵa,DropzoneDirective as ɵc,GesturableDirective as ɵd,ResizableDirective as ɵb} from './lib/directives';\nexport {ArrayOfNPipe as ɵh} from './lib/pipes/array-of-n.pipe';"]}
1
+ {"version":3,"file":"tft-interact.js","sourceRoot":"","sources":["../../../../libs/interact/src/tft-interact.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,SAAS,CAAC;AAExB,OAAO,EAAC,wBAAwB,IAAI,EAAE,EAAC,mBAAmB,IAAI,EAAE,EAAC,oBAAoB,IAAI,EAAE,EAAC,iBAAiB,IAAI,EAAE,EAAC,kBAAkB,IAAI,EAAE,EAAC,iBAAiB,IAAI,EAAE,EAAC,mBAAmB,IAAI,EAAE,EAAC,kBAAkB,IAAI,EAAE,EAAC,MAAM,kBAAkB,CAAC;AACjP,OAAO,EAAC,YAAY,IAAI,EAAE,EAAC,MAAM,6BAA6B,CAAC","sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n\nexport {AccountForScaleDirective as ɵf,ApplyScaleDirective as ɵg,DragPreviewDirective as ɵh,DragRootDirective as ɵe,DraggableDirective as ɵa,DropzoneDirective as ɵc,GesturableDirective as ɵd,ResizableDirective as ɵb} from './lib/directives';\nexport {ArrayOfNPipe as ɵi} from './lib/pipes/array-of-n.pipe';"]}
@@ -1 +1 @@
1
- [{"__symbolic":"module","version":4,"metadata":{},"exports":[{"from":"./index"},{"from":"./lib/directives","export":[{"name":"AccountForScaleDirective","as":"ɵf"},{"name":"DragPreviewDirective","as":"ɵg"},{"name":"DragRootDirective","as":"ɵe"},{"name":"DraggableDirective","as":"ɵa"},{"name":"DropzoneDirective","as":"ɵc"},{"name":"GesturableDirective","as":"ɵd"},{"name":"ResizableDirective","as":"ɵb"}]},{"from":"./lib/pipes/array-of-n.pipe","export":[{"name":"ArrayOfNPipe","as":"ɵh"}]}]}]
1
+ [{"__symbolic":"module","version":4,"metadata":{},"exports":[{"from":"./index"},{"from":"./lib/directives","export":[{"name":"AccountForScaleDirective","as":"ɵf"},{"name":"ApplyScaleDirective","as":"ɵg"},{"name":"DragPreviewDirective","as":"ɵh"},{"name":"DragRootDirective","as":"ɵe"},{"name":"DraggableDirective","as":"ɵa"},{"name":"DropzoneDirective","as":"ɵc"},{"name":"GesturableDirective","as":"ɵd"},{"name":"ResizableDirective","as":"ɵb"}]},{"from":"./lib/pipes/array-of-n.pipe","export":[{"name":"ArrayOfNPipe","as":"ɵi"}]}]}]