angular-gridster2/fesm2022/angular-gridster2.mjs.map

Angular gridster 2

{"version":3,"file":"angular-gridster2.mjs","sources":["../../../projects/angular-gridster2/src/lib/gridsterConfig.interface.ts","../../../projects/angular-gridster2/src/lib/gridsterCompact.service.ts","../../../projects/angular-gridster2/src/lib/gridsterConfig.constant.ts","../../../projects/angular-gridster2/src/lib/gridsterUtils.service.ts","../../../projects/angular-gridster2/src/lib/gridsterEmptyCell.service.ts","../../../projects/angular-gridster2/src/lib/gridsterRenderer.service.ts","../../../projects/angular-gridster2/src/lib/gridsterPreview.component.ts","../../../projects/angular-gridster2/src/lib/gridster.component.ts","../../../projects/angular-gridster2/src/lib/gridster.html","../../../projects/angular-gridster2/src/lib/gridsterPush.service.ts","../../../projects/angular-gridster2/src/lib/gridsterScroll.service.ts","../../../projects/angular-gridster2/src/lib/gridsterSwap.service.ts","../../../projects/angular-gridster2/src/lib/gridsterDraggable.service.ts","../../../projects/angular-gridster2/src/lib/gridsterPushResize.service.ts","../../../projects/angular-gridster2/src/lib/gridsterResizable.service.ts","../../../projects/angular-gridster2/src/lib/gridsterItem.component.ts","../../../projects/angular-gridster2/src/lib/gridsterItem.html","../../../projects/angular-gridster2/src/lib/gridsterItem.interface.ts","../../../projects/angular-gridster2/src/lib/gridster.interface.ts","../../../projects/angular-gridster2/src/lib/gridster.module.ts","../../../projects/angular-gridster2/src/public_api.ts","../../../projects/angular-gridster2/src/angular-gridster2.ts"],"sourcesContent":["import { GridsterComponentInterface } from './gridster.interface';\nimport {\n  GridsterItem,\n  GridsterItemComponentInterface\n} from './gridsterItem.interface';\n\nexport type gridTypes =\n  | 'fit'\n  | 'scrollVertical'\n  | 'scrollHorizontal'\n  | 'fixed'\n  | 'verticalFixed'\n  | 'horizontalFixed';\nexport type displayGrids = 'always' | 'onDrag&Resize' | 'none';\nexport type compactTypes =\n  | 'none'\n  | 'compactUp'\n  | 'compactLeft'\n  | 'compactUp&Left'\n  | 'compactLeft&Up'\n  | 'compactRight'\n  | 'compactUp&Right'\n  | 'compactRight&Up'\n  | 'compactDown'\n  | 'compactDown&Left'\n  | 'compactLeft&Down'\n  | 'compactDown&Right'\n  | 'compactRight&Down';\n\nexport enum GridType {\n  Fit = 'fit',\n  ScrollVertical = 'scrollVertical',\n  ScrollHorizontal = 'scrollHorizontal',\n  Fixed = 'fixed',\n  VerticalFixed = 'verticalFixed',\n  HorizontalFixed = 'horizontalFixed'\n}\n\nexport enum DisplayGrid {\n  Always = 'always',\n  OnDragAndResize = 'onDrag&Resize',\n  None = 'none'\n}\n\nexport enum CompactType {\n  None = 'none',\n  CompactUp = 'compactUp',\n  CompactLeft = 'compactLeft',\n  CompactUpAndLeft = 'compactUp&Left',\n  CompactLeftAndUp = 'compactLeft&Up',\n  CompactRight = 'compactRight',\n  CompactUpAndRight = 'compactUp&Right',\n  CompactRightAndUp = 'compactRight&Up',\n  CompactDown = 'compactDown',\n  CompactDownAndLeft = 'compactDown&Left',\n  CompactLeftAndDown = 'compactLeft&Down',\n  CompactDownAndRight = 'compactDown&Right',\n  CompactRightAndDown = 'compactRight&Down'\n}\n\nexport enum DirTypes {\n  LTR = 'ltr',\n  RTL = 'rtl'\n}\n\nexport type dirTypes = 'ltr' | 'rtl';\n\nexport interface GridsterConfig {\n  gridType?: gridTypes;\n  scale?: number;\n  fixedColWidth?: number;\n  fixedRowHeight?: number;\n  keepFixedHeightInMobile?: boolean;\n  keepFixedWidthInMobile?: boolean;\n  setGridSize?: boolean;\n  compactType?: compactTypes;\n  mobileBreakpoint?: number;\n  allowMultiLayer?: boolean;\n  defaultLayerIndex?: number;\n  maxLayerIndex?: number;\n  baseLayerIndex?: number;\n  minCols?: number;\n  maxCols?: number;\n  minRows?: number;\n  maxRows?: number;\n  defaultItemCols?: number;\n  defaultItemRows?: number;\n  maxItemCols?: number;\n  maxItemRows?: number;\n  minItemCols?: number;\n  minItemRows?: number;\n  minItemArea?: number;\n  maxItemArea?: number;\n  addEmptyRowsCount?: number;\n  rowHeightRatio?: number;\n  margin?: number;\n  outerMargin?: boolean;\n  outerMarginTop?: number | null;\n  outerMarginRight?: number | null;\n  outerMarginBottom?: number | null;\n  outerMarginLeft?: number | null;\n  useTransformPositioning?: boolean;\n  scrollSensitivity?: number | null;\n  scrollSpeed?: number;\n  initCallback?: (gridster: GridsterComponentInterface) => void;\n  destroyCallback?: (gridster: GridsterComponentInterface) => void;\n  gridSizeChangedCallback?: (gridster: GridsterComponentInterface) => void;\n  itemChangeCallback?: (\n    item: GridsterItem,\n    itemComponent: GridsterItemComponentInterface\n  ) => void;\n  itemResizeCallback?: (\n    item: GridsterItem,\n    itemComponent: GridsterItemComponentInterface\n  ) => void;\n  itemInitCallback?: (\n    item: GridsterItem,\n    itemComponent: GridsterItemComponentInterface\n  ) => void;\n  itemRemovedCallback?: (\n    item: GridsterItem,\n    itemComponent: GridsterItemComponentInterface\n  ) => void;\n  itemValidateCallback?: (item: GridsterItem) => boolean;\n  draggable?: Draggable;\n  resizable?: Resizable;\n  swap?: boolean;\n  swapWhileDragging?: boolean;\n  pushItems?: boolean;\n  disablePushOnDrag?: boolean;\n  disablePushOnResize?: boolean;\n  disableAutoPositionOnConflict?: boolean;\n  pushDirections?: PushDirections;\n  pushResizeItems?: boolean;\n  displayGrid?: displayGrids;\n  disableWindowResize?: boolean;\n  disableWarnings?: boolean;\n  scrollToNewItems?: boolean;\n  disableScrollHorizontal?: boolean;\n  disableScrollVertical?: boolean;\n  enableBoundaryControl?: boolean;\n  enableEmptyCellClick?: boolean;\n  enableEmptyCellContextMenu?: boolean;\n  enableEmptyCellDrop?: boolean;\n  enableEmptyCellDrag?: boolean;\n  enableOccupiedCellDrop?: boolean;\n  emptyCellClickCallback?: (event: MouseEvent, item: GridsterItem) => void;\n  emptyCellContextMenuCallback?: (\n    event: MouseEvent,\n    item: GridsterItem\n  ) => void;\n  emptyCellDropCallback?: (event: DragEvent, item: GridsterItem) => void;\n  emptyCellDragCallback?: (event: MouseEvent, item: GridsterItem) => void;\n  emptyCellDragMaxCols?: number;\n  emptyCellDragMaxRows?: number;\n  ignoreMarginInRow?: boolean;\n  dirType?: dirTypes;\n  api?: {\n    resize?: () => void;\n    optionsChanged?: () => void;\n    getNextPossiblePosition?: (newItem: GridsterItem) => boolean;\n    getFirstPossiblePosition?: (item: GridsterItem) => GridsterItem;\n    getLastPossiblePosition?: (item: GridsterItem) => GridsterItem;\n    getItemComponent?: (\n      item: GridsterItem\n    ) => GridsterItemComponentInterface | undefined;\n  };\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  [propName: string]: any;\n}\n\nexport interface DragBase {\n  enabled?: boolean;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  stop?: (\n    item: GridsterItem,\n    itemComponent: GridsterItemComponentInterface,\n    event: MouseEvent\n  ) => Promise<any> | void;\n  start?: (\n    item: GridsterItem,\n    itemComponent: GridsterItemComponentInterface,\n    event: MouseEvent\n  ) => void;\n  delayStart?: number;\n}\n\nexport interface Draggable extends DragBase {\n  ignoreContentClass?: string;\n  ignoreContent?: boolean;\n  dragHandleClass?: string;\n  dropOverItems?: boolean;\n  dropOverItemsCallback?: (\n    source: GridsterItem,\n    target: GridsterItem,\n    grid?: GridsterComponentInterface\n  ) => void;\n}\n\nexport interface Resizable extends DragBase {\n  handles?: {\n    s: boolean;\n    e: boolean;\n    n: boolean;\n    w: boolean;\n    se: boolean;\n    ne: boolean;\n    sw: boolean;\n    nw: boolean;\n  };\n}\n\nexport interface PushDirections {\n  north: boolean;\n  east: boolean;\n  south: boolean;\n  west: boolean;\n}\n","import { GridsterComponentInterface } from './gridster.interface';\nimport {\n  GridsterItem,\n  GridsterItemComponentInterface\n} from './gridsterItem.interface';\nimport { CompactType } from './gridsterConfig.interface';\n\nexport class GridsterCompact {\n  constructor(private gridster: GridsterComponentInterface) {}\n\n  destroy(): void {\n    this.gridster = null!;\n  }\n\n  checkCompact(): void {\n    if (this.gridster.$options.compactType !== CompactType.None) {\n      if (this.gridster.$options.compactType === CompactType.CompactUp) {\n        this.checkCompactMovement('y', -1);\n      } else if (\n        this.gridster.$options.compactType === CompactType.CompactLeft\n      ) {\n        this.checkCompactMovement('x', -1);\n      } else if (\n        this.gridster.$options.compactType === CompactType.CompactUpAndLeft\n      ) {\n        this.checkCompactMovement('y', -1);\n        this.checkCompactMovement('x', -1);\n      } else if (\n        this.gridster.$options.compactType === CompactType.CompactLeftAndUp\n      ) {\n        this.checkCompactMovement('x', -1);\n        this.checkCompactMovement('y', -1);\n      } else if (\n        this.gridster.$options.compactType === CompactType.CompactRight\n      ) {\n        this.checkCompactMovement('x', 1);\n      } else if (\n        this.gridster.$options.compactType === CompactType.CompactUpAndRight\n      ) {\n        this.checkCompactMovement('y', -1);\n        this.checkCompactMovement('x', 1);\n      } else if (\n        this.gridster.$options.compactType === CompactType.CompactRightAndUp\n      ) {\n        this.checkCompactMovement('x', 1);\n        this.checkCompactMovement('y', -1);\n      } else if (\n        this.gridster.$options.compactType === CompactType.CompactDown\n      ) {\n        this.checkCompactMovement('y', 1);\n      } else if (\n        this.gridster.$options.compactType === CompactType.CompactDownAndLeft\n      ) {\n        this.checkCompactMovement('y', 1);\n        this.checkCompactMovement('x', -1);\n      } else if (\n        this.gridster.$options.compactType === CompactType.CompactDownAndRight\n      ) {\n        this.checkCompactMovement('y', 1);\n        this.checkCompactMovement('x', 1);\n      } else if (\n        this.gridster.$options.compactType === CompactType.CompactLeftAndDown\n      ) {\n        this.checkCompactMovement('x', -1);\n        this.checkCompactMovement('y', 1);\n      } else if (\n        this.gridster.$options.compactType === CompactType.CompactRightAndDown\n      ) {\n        this.checkCompactMovement('x', 1);\n        this.checkCompactMovement('y', 1);\n      }\n    }\n  }\n\n  checkCompactItem(item: GridsterItem): void {\n    if (this.gridster.$options.compactType !== CompactType.None) {\n      if (this.gridster.$options.compactType === CompactType.CompactUp) {\n        this.moveTillCollision(item, 'y', -1);\n      } else if (\n        this.gridster.$options.compactType === CompactType.CompactLeft\n      ) {\n        this.moveTillCollision(item, 'x', -1);\n      } else if (\n        this.gridster.$options.compactType === CompactType.CompactUpAndLeft\n      ) {\n        this.moveTillCollision(item, 'y', -1);\n        this.moveTillCollision(item, 'x', -1);\n      } else if (\n        this.gridster.$options.compactType === CompactType.CompactLeftAndUp\n      ) {\n        this.moveTillCollision(item, 'x', -1);\n        this.moveTillCollision(item, 'y', -1);\n      } else if (\n        this.gridster.$options.compactType === CompactType.CompactUpAndRight\n      ) {\n        this.moveTillCollision(item, 'y', -1);\n        this.moveTillCollision(item, 'x', 1);\n      } else if (\n        this.gridster.$options.compactType === CompactType.CompactDown\n      ) {\n        this.moveTillCollision(item, 'y', 1);\n      } else if (\n        this.gridster.$options.compactType === CompactType.CompactDownAndLeft\n      ) {\n        this.moveTillCollision(item, 'y', 1);\n        this.moveTillCollision(item, 'x', -1);\n      } else if (\n        this.gridster.$options.compactType === CompactType.CompactLeftAndDown\n      ) {\n        this.moveTillCollision(item, 'x', -1);\n        this.moveTillCollision(item, 'y', 1);\n      } else if (\n        this.gridster.$options.compactType === CompactType.CompactDownAndRight\n      ) {\n        this.moveTillCollision(item, 'y', 1);\n        this.moveTillCollision(item, 'x', 1);\n      } else if (\n        this.gridster.$options.compactType === CompactType.CompactRightAndDown\n      ) {\n        this.moveTillCollision(item, 'x', 1);\n        this.moveTillCollision(item, 'y', 1);\n      }\n    }\n  }\n\n  private checkCompactMovement(direction: 'x' | 'y', delta: number): void {\n    let widgetMoved = false;\n    this.gridster.grid.forEach((widget: GridsterItemComponentInterface) => {\n      if (widget.$item.compactEnabled !== false) {\n        const moved = this.moveTillCollision(widget.$item, direction, delta);\n        if (moved) {\n          widgetMoved = true;\n          widget.item[direction] = widget.$item[direction];\n          widget.itemChanged();\n        }\n      }\n    });\n    if (widgetMoved) {\n      this.checkCompact();\n    }\n  }\n\n  private moveTillCollision(\n    item: GridsterItem,\n    direction: 'x' | 'y',\n    delta: number\n  ): boolean {\n    item[direction] += delta;\n    if (this.gridster.checkCollision(item)) {\n      item[direction] -= delta;\n      return false;\n    } else {\n      this.moveTillCollision(item, direction, delta);\n      return true;\n    }\n  }\n}\n","import {\n  CompactType,\n  DirTypes,\n  DisplayGrid,\n  GridsterConfig,\n  GridType\n} from './gridsterConfig.interface';\n\nexport const GridsterConfigService: GridsterConfig = {\n  gridType: GridType.Fit, // 'fit' will fit the items in the container without scroll;\n  scale: 1, // scale param to zoom in/zoom out\n  // 'scrollVertical' will fit on width and height of the items will be the same as the width\n  // 'scrollHorizontal' will fit on height and width of the items will be the same as the height\n  // 'fixed' will set the rows and columns dimensions based on fixedColWidth and fixedRowHeight options\n  // 'verticalFixed' will set the rows to fixedRowHeight and columns width will fit the space available\n  // 'horizontalFixed' will set the columns to fixedColWidth and rows height will fit the space available\n  fixedColWidth: 250, // fixed col width for gridType: 'fixed'\n  fixedRowHeight: 250, // fixed row height for gridType: 'fixed'\n  keepFixedHeightInMobile: false, // keep the height from fixed gridType in mobile layout\n  keepFixedWidthInMobile: false, // keep the width from fixed gridType in mobile layout\n  setGridSize: false, // sets grid size depending on content\n  compactType: CompactType.None, // compact items: 'none' | 'compactUp' | 'compactLeft' | 'compactUp&Left' | 'compactLeft&Up'\n  mobileBreakpoint: 640, // if the screen is not wider that this, remove the grid layout and stack the items\n  useBodyForBreakpoint: false, // whether to use the body width to determine the mobile breakpoint. Uses the element width when false.\n  allowMultiLayer: false,\n  defaultLayerIndex: 0,\n  maxLayerIndex: 2,\n  baseLayerIndex: 1,\n  minCols: 1, // minimum amount of columns in the grid\n  maxCols: 100, // maximum amount of columns in the grid\n  minRows: 1, // minimum amount of rows in the grid\n  maxRows: 100, // maximum amount of rows in the grid\n  defaultItemCols: 1, // default width of an item in columns\n  defaultItemRows: 1, // default height of an item in rows\n  maxItemCols: 50, // max item number of cols\n  maxItemRows: 50, // max item number of rows\n  minItemCols: 1, // min item number of columns\n  minItemRows: 1, // min item number of rows\n  minItemArea: 1, // min item area: cols * rows\n  maxItemArea: 2500, // max item area: cols * rows\n  addEmptyRowsCount: 0, // add a number of extra empty rows at the end\n  rowHeightRatio: 1, // row height ratio from column width\n  margin: 10, // margin between grid items\n  outerMargin: true, // if margins will apply to the sides of the container\n  outerMarginTop: null, // override outer margin for grid\n  outerMarginRight: null, // override outer margin for grid\n  outerMarginBottom: null, // override outer margin for grid\n  outerMarginLeft: null, // override outer margin for grid\n  useTransformPositioning: true, // toggle between transform or top/left positioning of items\n  scrollSensitivity: 10, // margin of the dashboard where to start scrolling\n  scrollSpeed: 20, // how much to scroll each mouse move when in the scrollSensitivity zone\n  initCallback: undefined, // callback to call after grid has initialized. Arguments: gridsterComponent\n  destroyCallback: undefined, // callback to call after grid has destroyed. Arguments: gridsterComponent\n  gridSizeChangedCallback: undefined, // callback to call after grid has changed size. Arguments: gridsterComponent\n  itemChangeCallback: undefined, // callback to call for each item when is changes x, y, rows, cols.\n  // Arguments: gridsterItem, gridsterItemComponent\n  itemResizeCallback: undefined, // callback to call for each item when width/height changes.\n  // Arguments: gridsterItem, gridsterItemComponent\n  itemInitCallback: undefined, // callback to call for each item when is initialized.\n  // Arguments: gridsterItem, gridsterItemComponent\n  itemRemovedCallback: undefined, // callback to call for each item when is initialized.\n  // Arguments: gridsterItem, gridsterItemComponent\n  itemValidateCallback: undefined, // callback to call to validate item position/size. Return true if valid.\n  // Arguments: gridsterItem\n  enableEmptyCellClick: false, // enable empty cell click events\n  enableEmptyCellContextMenu: false, // enable empty cell context menu (right click) events\n  enableEmptyCellDrop: false, // enable empty cell drop events\n  enableEmptyCellDrag: false, // enable empty cell drag events\n  enableOccupiedCellDrop: false, // enable occupied cell drop events\n  emptyCellClickCallback: undefined, // empty cell click callback\n  emptyCellContextMenuCallback: undefined, // empty cell context menu (right click) callback\n  emptyCellDropCallback: undefined, // empty cell drag drop callback. HTML5 Drag & Drop\n  emptyCellDragCallback: undefined, // empty cell drag and create item like excel cell selection\n  emptyCellDragMaxCols: 50, // limit empty cell drag max cols\n  emptyCellDragMaxRows: 50, // limit empty cell drag max rows\n  // Arguments: event, gridsterItem{x, y, rows: defaultItemRows, cols: defaultItemCols}\n  ignoreMarginInRow: false, // ignore the gap between rows for items which span multiple rows (see #162, #224)\n  draggable: {\n    delayStart: 0, // milliseconds to delay the start of drag, useful for touch interaction\n    enabled: false, // enable/disable draggable items\n    ignoreContentClass: 'gridster-item-content', // default content class to ignore the drag event from\n    ignoreContent: false, // if true drag will start only from elements from `dragHandleClass`\n    dragHandleClass: 'drag-handler', // drag event only from this class. If `ignoreContent` is true.\n    stop: undefined, // callback when dragging an item stops.  Accepts Promise return to cancel/approve drag.\n    start: undefined, // callback when dragging an item starts.\n    // Arguments: item, gridsterItem, event\n    dropOverItems: false, // enable drop items on top other item\n    dropOverItemsCallback: undefined // callback on drop over another item\n    // Arguments: source, target, gridComponent\n  },\n  resizable: {\n    delayStart: 0, // milliseconds to delay the start of resize, useful for touch interaction\n    enabled: false, // enable/disable resizable items\n    handles: {\n      s: true,\n      e: true,\n      n: true,\n      w: true,\n      se: true,\n      ne: true,\n      sw: true,\n      nw: true\n    }, // resizable edges of an item\n    stop: undefined, // callback when resizing an item stops. Accepts Promise return to cancel/approve resize.\n    start: undefined // callback when resizing an item starts.\n    // Arguments: item, gridsterItem, event\n  },\n  swap: true, // allow items to switch position if drop on top of another\n  swapWhileDragging: false, // allow items to switch position while dragging\n  pushItems: false, // push items when resizing and dragging\n  disablePushOnDrag: false, // disable push on drag\n  disablePushOnResize: false, // disable push on resize\n  pushDirections: { north: true, east: true, south: true, west: true }, // control the directions items are pushed\n  pushResizeItems: false, // on resize of item will shrink adjacent items\n  displayGrid: DisplayGrid.OnDragAndResize, // display background grid of rows and columns\n  disableWindowResize: false, // disable the window on resize listener. This will stop grid to recalculate on window resize.\n  disableWarnings: false, // disable console log warnings about misplacement of grid items\n  scrollToNewItems: false, // scroll to new items placed in a scrollable view\n  disableScrollHorizontal: false, // disable horizontal scrolling\n  disableScrollVertical: false, // disable vertical scrolling\n  enableBoundaryControl: false, // enable boundary control while dragging items\n  disableAutoPositionOnConflict: false, // disable auto-position of items on conflict state,\n  dirType: DirTypes.LTR // page direction, rtl=right to left ltr= left to right, if you use rtl language set dirType to rtl\n};\n","import { GridsterComponentInterface } from './gridster.interface';\n\nexport class GridsterUtils {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  static merge(obj1: any, obj2: any, properties: any): any {\n    for (const p in obj2) {\n      if (obj2[p] !== void 0 && properties.hasOwnProperty(p)) {\n        if (typeof obj2[p] === 'object') {\n          // create an empty object for the property if obj1 does not already have one.\n          if (!(p in obj1)) {\n            obj1[p] = {};\n          }\n          obj1[p] = GridsterUtils.merge(obj1[p], obj2[p], properties[p]);\n        } else {\n          obj1[p] = obj2[p];\n        }\n      }\n    }\n\n    return obj1;\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  static checkTouchEvent(e: any): void {\n    if (e.clientX === undefined && e.touches) {\n      if (e.touches && e.touches.length) {\n        e.clientX = e.touches[0].clientX;\n        e.clientY = e.touches[0].clientY;\n      } else if (e.changedTouches && e.changedTouches.length) {\n        e.clientX = e.changedTouches[0].clientX;\n        e.clientY = e.changedTouches[0].clientY;\n      }\n    }\n  }\n\n  static checkContentClassForEvent(\n    gridster: GridsterComponentInterface,\n    e: MouseEvent\n  ): boolean {\n    if (gridster.$options.draggable.ignoreContent) {\n      if (\n        !GridsterUtils.checkDragHandleClass(\n          e.target as HTMLElement,\n          e.currentTarget as HTMLElement,\n          gridster.$options.draggable.dragHandleClass,\n          gridster.$options.draggable.ignoreContentClass\n        )\n      ) {\n        return true;\n      }\n    } else {\n      if (\n        GridsterUtils.checkContentClass(\n          e.target as HTMLElement,\n          e.currentTarget as HTMLElement,\n          gridster.$options.draggable.ignoreContentClass\n        )\n      ) {\n        return true;\n      }\n    }\n    return false;\n  }\n\n  static checkContentClassForEmptyCellClickEvent(\n    gridster: GridsterComponentInterface,\n    e: MouseEvent\n  ): boolean {\n    return (\n      GridsterUtils.checkContentClass(\n        e.target as HTMLElement,\n        e.currentTarget as HTMLElement,\n        gridster.$options.draggable.ignoreContentClass\n      ) ||\n      GridsterUtils.checkContentClass(\n        e.target as HTMLElement,\n        e.currentTarget as HTMLElement,\n        gridster.$options.draggable.dragHandleClass\n      )\n    );\n  }\n\n  static checkDragHandleClass(\n    target: HTMLElement,\n    current: HTMLElement,\n    dragHandleClass: string,\n    ignoreContentClass\n  ): boolean {\n    if (!target || target === current) {\n      return false;\n    }\n    if (target.hasAttribute('class')) {\n      const classnames = target.getAttribute('class')!.split(' ');\n      if (classnames.indexOf(dragHandleClass) > -1) {\n        return true;\n      }\n      if (classnames.indexOf(ignoreContentClass) > -1) {\n        return false;\n      }\n    }\n    return GridsterUtils.checkDragHandleClass(\n      target.parentNode as HTMLElement,\n      current,\n      dragHandleClass,\n      ignoreContentClass\n    );\n  }\n\n  static checkContentClass(\n    target: HTMLElement,\n    current: HTMLElement,\n    contentClass: string\n  ): boolean {\n    if (!target || target === current) {\n      return false;\n    }\n    if (\n      target.hasAttribute('class') &&\n      target.getAttribute('class')!.split(' ').indexOf(contentClass) > -1\n    ) {\n      return true;\n    } else {\n      return GridsterUtils.checkContentClass(\n        target.parentNode as HTMLElement,\n        current,\n        contentClass\n      );\n    }\n  }\n\n  static compareItems(\n    a: { x: number; y: number },\n    b: { x: number; y: number }\n  ): number {\n    if (a.y > b.y) {\n      return -1;\n    } else if (a.y < b.y) {\n      return 1;\n    } else if (a.x > b.x) {\n      return -1;\n    } else {\n      return 1;\n    }\n  }\n}\n","import { GridsterUtils } from './gridsterUtils.service';\nimport { GridsterComponentInterface } from './gridster.interface';\nimport { GridsterItem } from './gridsterItem.interface';\n\nexport class GridsterEmptyCell {\n  initialItem: GridsterItem | null;\n  removeEmptyCellClickListenerFn: (() => void) | null;\n  removeEmptyCellTouchendListenerFn: (() => void) | null;\n  removeEmptyCellContextMenuListenerFn: (() => void) | null;\n  removeEmptyCellDropListenerFn: (() => void) | null;\n  removeEmptyCellMousedownListenerFn: (() => void) | null;\n  removeEmptyCellTouchstartListenerFn: (() => void) | null;\n  removeWindowMousemoveListenerFn: () => void;\n  removeWindowTouchmoveListenerFn: () => void;\n  removeWindowMouseupListenerFn: () => void;\n  removeWindowTouchendListenerFn: () => void;\n  removeEmptyCellDragoverListenerFn: (() => void) | null;\n  removeDocumentDragendListenerFn: (() => void) | null;\n\n  constructor(private gridster: GridsterComponentInterface) {}\n\n  destroy(): void {\n    if (this.gridster.previewStyle) {\n      this.gridster.previewStyle();\n    }\n    this.gridster.movingItem = null;\n    this.initialItem = this.gridster = null!;\n    if (this.removeDocumentDragendListenerFn) {\n      this.removeDocumentDragendListenerFn();\n      this.removeDocumentDragendListenerFn = null;\n    }\n  }\n\n  updateOptions(): void {\n    if (\n      this.gridster.$options.enableEmptyCellClick &&\n      !this.removeEmptyCellClickListenerFn &&\n      this.gridster.options.emptyCellClickCallback\n    ) {\n      this.removeEmptyCellClickListenerFn = this.gridster.renderer.listen(\n        this.gridster.el,\n        'click',\n        this.emptyCellClickCb\n      );\n      this.removeEmptyCellTouchendListenerFn = this.gridster.renderer.listen(\n        this.gridster.el,\n        'touchend',\n        this.emptyCellClickCb\n      );\n    } else if (\n      !this.gridster.$options.enableEmptyCellClick &&\n      this.removeEmptyCellClickListenerFn &&\n      this.removeEmptyCellTouchendListenerFn\n    ) {\n      this.removeEmptyCellClickListenerFn();\n      this.removeEmptyCellTouchendListenerFn();\n      this.removeEmptyCellClickListenerFn = null;\n      this.removeEmptyCellTouchendListenerFn = null;\n    }\n    if (\n      this.gridster.$options.enableEmptyCellContextMenu &&\n      !this.removeEmptyCellContextMenuListenerFn &&\n      this.gridster.options.emptyCellContextMenuCallback\n    ) {\n      this.removeEmptyCellContextMenuListenerFn = this.gridster.renderer.listen(\n        this.gridster.el,\n        'contextmenu',\n        this.emptyCellContextMenuCb\n      );\n    } else if (\n      !this.gridster.$options.enableEmptyCellContextMenu &&\n      this.removeEmptyCellContextMenuListenerFn\n    ) {\n      this.removeEmptyCellContextMenuListenerFn();\n      this.removeEmptyCellContextMenuListenerFn = null;\n    }\n    if (\n      this.gridster.$options.enableEmptyCellDrop &&\n      !this.removeEmptyCellDropListenerFn &&\n      this.gridster.options.emptyCellDropCallback\n    ) {\n      this.removeEmptyCellDropListenerFn = this.gridster.renderer.listen(\n        this.gridster.el,\n        'drop',\n        this.emptyCellDragDrop\n      );\n      this.gridster.zone.runOutsideAngular(() => {\n        this.removeEmptyCellDragoverListenerFn = this.gridster.renderer.listen(\n          this.gridster.el,\n          'dragover',\n          this.emptyCellDragOver\n        );\n      });\n      this.removeDocumentDragendListenerFn = this.gridster.renderer.listen(\n        'document',\n        'dragend',\n        () => {\n          this.gridster.movingItem = null;\n          this.gridster.previewStyle();\n        }\n      );\n    } else if (\n      !this.gridster.$options.enableEmptyCellDrop &&\n      this.removeEmptyCellDropListenerFn &&\n      this.removeEmptyCellDragoverListenerFn &&\n      this.removeDocumentDragendListenerFn\n    ) {\n      this.removeEmptyCellDropListenerFn();\n      this.removeEmptyCellDragoverListenerFn();\n      this.removeDocumentDragendListenerFn();\n      this.removeEmptyCellDragoverListenerFn = null;\n      this.removeEmptyCellDropListenerFn = null;\n      this.removeDocumentDragendListenerFn = null;\n    }\n    if (\n      this.gridster.$options.enableEmptyCellDrag &&\n      !this.removeEmptyCellMousedownListenerFn &&\n      this.gridster.options.emptyCellDragCallback\n    ) {\n      this.removeEmptyCellMousedownListenerFn = this.gridster.renderer.listen(\n        this.gridster.el,\n        'mousedown',\n        this.emptyCellMouseDown\n      );\n      this.removeEmptyCellTouchstartListenerFn = this.gridster.renderer.listen(\n        this.gridster.el,\n        'touchstart',\n        this.emptyCellMouseDown\n      );\n    } else if (\n      !this.gridster.$options.enableEmptyCellDrag &&\n      this.removeEmptyCellMousedownListenerFn &&\n      this.removeEmptyCellTouchstartListenerFn\n    ) {\n      this.removeEmptyCellMousedownListenerFn();\n      this.removeEmptyCellTouchstartListenerFn();\n      this.removeEmptyCellMousedownListenerFn = null;\n      this.removeEmptyCellTouchstartListenerFn = null;\n    }\n  }\n\n  emptyCellClickCb = (e: MouseEvent): void => {\n    if (\n      !this.gridster ||\n      this.gridster.movingItem ||\n      GridsterUtils.checkContentClassForEmptyCellClickEvent(this.gridster, e)\n    ) {\n      return;\n    }\n    const item = this.getValidItemFromEvent(e);\n    if (!item) {\n      return;\n    }\n    if (this.gridster.options.emptyCellClickCallback) {\n      this.gridster.options.emptyCellClickCallback(e, item);\n    }\n    this.gridster.cdRef.markForCheck();\n  };\n\n  emptyCellContextMenuCb = (e: MouseEvent): void => {\n    if (\n      this.gridster.movingItem ||\n      GridsterUtils.checkContentClassForEmptyCellClickEvent(this.gridster, e)\n    ) {\n      return;\n    }\n    e.preventDefault();\n    e.stopPropagation();\n    const item = this.getValidItemFromEvent(e);\n    if (!item) {\n      return;\n    }\n    if (this.gridster.options.emptyCellContextMenuCallback) {\n      this.gridster.options.emptyCellContextMenuCallback(e, item);\n    }\n    this.gridster.cdRef.markForCheck();\n  };\n\n  emptyCellDragDrop = (e: DragEvent): void => {\n    const item = this.getValidItemFromEvent(e);\n    if (!item) {\n      return;\n    }\n    if (this.gridster.options.emptyCellDropCallback) {\n      this.gridster.options.emptyCellDropCallback(e, item);\n    }\n    this.gridster.cdRef.markForCheck();\n  };\n\n  emptyCellDragOver = (e: DragEvent): void => {\n    e.preventDefault();\n    e.stopPropagation();\n    const item = this.getValidItemFromEvent(e);\n    if (item) {\n      if (e.dataTransfer) {\n        e.dataTransfer.dropEffect = 'move';\n      }\n      this.gridster.movingItem = item;\n    } else {\n      if (e.dataTransfer) {\n        e.dataTransfer.dropEffect = 'none';\n      }\n      this.gridster.movingItem = null;\n    }\n    this.gridster.previewStyle();\n  };\n\n  emptyCellMouseDown = (e: MouseEvent): void => {\n    if (\n      GridsterUtils.checkContentClassForEmptyCellClickEvent(this.gridster, e)\n    ) {\n      return;\n    }\n    e.preventDefault();\n    e.stopPropagation();\n    const item = this.getValidItemFromEvent(e);\n    const leftMouseButtonCode = 1;\n    if (\n      !item ||\n      (e.buttons !== leftMouseButtonCode && !(e instanceof TouchEvent))\n    ) {\n      return;\n    }\n    this.initialItem = item;\n    this.gridster.movingItem = item;\n    this.gridster.previewStyle();\n    this.gridster.zone.runOutsideAngular(() => {\n      this.removeWindowMousemoveListenerFn = this.gridster.renderer.listen(\n        'window',\n        'mousemove',\n        this.emptyCellMouseMove\n      );\n      this.removeWindowTouchmoveListenerFn = this.gridster.renderer.listen(\n        'window',\n        'touchmove',\n        this.emptyCellMouseMove\n      );\n    });\n    this.removeWindowMouseupListenerFn = this.gridster.renderer.listen(\n      'window',\n      'mouseup',\n      this.emptyCellMouseUp\n    );\n    this.removeWindowTouchendListenerFn = this.gridster.renderer.listen(\n      'window',\n      'touchend',\n      this.emptyCellMouseUp\n    );\n  };\n\n  emptyCellMouseMove = (e: MouseEvent): void => {\n    e.preventDefault();\n    e.stopPropagation();\n    const item = this.getValidItemFromEvent(e, this.initialItem);\n    if (!item) {\n      return;\n    }\n\n    this.gridster.movingItem = item;\n    this.gridster.previewStyle();\n  };\n\n  emptyCellMouseUp = (e: MouseEvent): void => {\n    this.removeWindowMousemoveListenerFn();\n    this.removeWindowTouchmoveListenerFn();\n    this.removeWindowMouseupListenerFn();\n    this.removeWindowTouchendListenerFn();\n    const item = this.getValidItemFromEvent(e, this.initialItem);\n    if (item) {\n      this.gridster.movingItem = item;\n    }\n    if (\n      this.gridster.options.emptyCellDragCallback &&\n      this.gridster.movingItem\n    ) {\n      this.gridster.options.emptyCellDragCallback(e, this.gridster.movingItem);\n    }\n    setTimeout(() => {\n      this.initialItem = null;\n      if (this.gridster) {\n        this.gridster.movingItem = null;\n        this.gridster.previewStyle();\n      }\n    });\n    this.gridster.cdRef.markForCheck();\n  };\n\n  getPixelsX(e: MouseEvent, rect: ClientRect): number {\n    const scale = this.gridster.options.scale;\n    if (scale) {\n      return (\n        (e.clientX - rect.left) / scale +\n        this.gridster.el.scrollLeft -\n        this.gridster.gridRenderer.getLeftMargin()\n      );\n    }\n    return (\n      e.clientX +\n      this.gridster.el.scrollLeft -\n      rect.left -\n      this.gridster.gridRenderer.getLeftMargin()\n    );\n  }\n\n  getPixelsY(e: MouseEvent, rect: ClientRect): number {\n    const scale = this.gridster.options.scale;\n    if (scale) {\n      return (\n        (e.clientY - rect.top) / scale +\n        this.gridster.el.scrollTop -\n        this.gridster.gridRenderer.getTopMargin()\n      );\n    }\n    return (\n      e.clientY +\n      this.gridster.el.scrollTop -\n      rect.top -\n      this.gridster.gridRenderer.getTopMargin()\n    );\n  }\n\n  getValidItemFromEvent(\n    e: MouseEvent,\n    oldItem?: GridsterItem | null\n  ): GridsterItem | undefined {\n    e.preventDefault();\n    e.stopPropagation();\n    GridsterUtils.checkTouchEvent(e);\n    const rect = this.gridster.el.getBoundingClientRect();\n    const x = this.getPixelsX(e, rect);\n    const y = this.getPixelsY(e, rect);\n    const item: GridsterItem = {\n      x: this.gridster.pixelsToPositionX(x, Math.floor, true),\n      y: this.gridster.pixelsToPositionY(y, Math.floor, true),\n      cols: this.gridster.$options.defaultItemCols,\n      rows: this.gridster.$options.defaultItemRows\n    };\n    if (oldItem) {\n      item.cols = Math.min(\n        Math.abs(oldItem.x - item.x) + 1,\n        this.gridster.$options.emptyCellDragMaxCols\n      );\n      item.rows = Math.min(\n        Math.abs(oldItem.y - item.y) + 1,\n        this.gridster.$options.emptyCellDragMaxRows\n      );\n      if (oldItem.x < item.x) {\n        item.x = oldItem.x;\n      } else if (\n        oldItem.x - item.x >\n        this.gridster.$options.emptyCellDragMaxCols - 1\n      ) {\n        item.x = this.gridster.movingItem ? this.gridster.movingItem.x : 0;\n      }\n      if (oldItem.y < item.y) {\n        item.y = oldItem.y;\n      } else if (\n        oldItem.y - item.y >\n        this.gridster.$options.emptyCellDragMaxRows - 1\n      ) {\n        item.y = this.gridster.movingItem ? this.gridster.movingItem.y : 0;\n      }\n    }\n    if (\n      !this.gridster.$options.enableOccupiedCellDrop &&\n      this.gridster.checkCollision(item)\n    ) {\n      return;\n    }\n    return item;\n  }\n}\n","import { Renderer2 } from '@angular/core';\n\nimport { GridsterComponentInterface } from './gridster.interface';\nimport { DirTypes, GridType } from './gridsterConfig.interface';\nimport { GridsterItem } from './gridsterItem.interface';\nimport {\n  CommonGridStyle,\n  GridColumnCachedStyle,\n  GridRowCachedStyle\n} from './gridsterRenderer.interface';\n\nexport class GridsterRenderer {\n  /**\n   * Caches the last grid column styles.\n   * This improves the grid responsiveness by caching and reusing the last style object instead of creating a new one.\n   */\n  private lastGridColumnStyles: Record<number, GridColumnCachedStyle> = {};\n\n  /**\n   * Caches the last grid column styles.\n   * This improves the grid responsiveness by caching and reusing the last style object instead of creating a new one.\n   */\n  private lastGridRowStyles: Record<number, GridRowCachedStyle> = {};\n\n  constructor(private gridster: GridsterComponentInterface) {}\n\n  destroy(): void {\n    this.gridster = null!;\n  }\n\n  updateItem(el: Element, item: GridsterItem, renderer: Renderer2): void {\n    if (this.gridster.mobile) {\n      this.clearCellPosition(renderer, el);\n      if (this.gridster.$options.keepFixedHeightInMobile) {\n        renderer.setStyle(\n          el,\n          'height',\n          (item.rows - 1) * this.gridster.$options.margin +\n            item.rows * this.gridster.$options.fixedRowHeight +\n            'px'\n        );\n      } else {\n        renderer.setStyle(\n          el,\n          'height',\n          (item.rows * this.gridster.curWidth) / item.cols + 'px'\n        );\n      }\n      if (this.gridster.$options.keepFixedWidthInMobile) {\n        renderer.setStyle(\n          el,\n          'width',\n          this.gridster.$options.fixedColWidth + 'px'\n        );\n      } else {\n        renderer.setStyle(el, 'width', '');\n      }\n\n      renderer.setStyle(\n        el,\n        'margin-bottom',\n        this.gridster.$options.margin + 'px'\n      );\n      renderer.setStyle(el, DirTypes.LTR ? 'margin-right' : 'margin-left', '');\n    } else {\n      const x = Math.round(this.gridster.curColWidth * item.x);\n      const y = Math.round(this.gridster.curRowHeight * item.y);\n      const width =\n        this.gridster.curColWidth * item.cols - this.gridster.$options.margin;\n      const height =\n        this.gridster.curRowHeight * item.rows - this.gridster.$options.margin;\n      // set the cell style\n      this.setCellPosition(renderer, el, x, y);\n      renderer.setStyle(el, 'width', width + 'px');\n      renderer.setStyle(el, 'height', height + 'px');\n      let marginBottom: string | null = null;\n      let marginRight: string | null = null;\n      if (this.gridster.$options.outerMargin) {\n        if (this.gridster.rows === item.rows + item.y) {\n          if (this.gridster.$options.outerMarginBottom !== null) {\n            marginBottom = this.gridster.$options.outerMarginBottom + 'px';\n          } else {\n            marginBottom = this.gridster.$options.margin + 'px';\n          }\n        }\n        if (this.gridster.columns === item.cols + item.x) {\n          if (this.gridster.$options.outerMarginBottom !== null) {\n            marginRight = this.gridster.$options.outerMarginRight + 'px';\n          } else {\n            marginRight = this.gridster.$options.margin + 'px';\n          }\n        }\n      }\n\n      renderer.setStyle(el, 'margin-bottom', marginBottom);\n      renderer.setStyle(\n        el,\n        DirTypes.LTR ? 'margin-right' : 'margin-left',\n        marginRight\n      );\n    }\n  }\n\n  updateGridster(): void {\n    let addClass = '';\n    let removeClass1 = '';\n    let removeClass2 = '';\n    let removeClass3 = '';\n    if (this.gridster.$options.gridType === GridType.Fit) {\n      addClass = GridType.Fit;\n      removeClass1 = GridType.ScrollVertical;\n      removeClass2 = GridType.ScrollHorizontal;\n      removeClass3 = GridType.Fixed;\n    } else if (this.gridster.$options.gridType === GridType.ScrollVertical) {\n      this.gridster.curRowHeight =\n        this.gridster.curColWidth * this.gridster.$options.rowHeightRatio;\n      addClass = GridType.ScrollVertical;\n      removeClass1 = GridType.Fit;\n      removeClass2 = GridType.ScrollHorizontal;\n      removeClass3 = GridType.Fixed;\n    } else if (this.gridster.$options.gridType === GridType.ScrollHorizontal) {\n      const widthRatio = this.gridster.$options.rowHeightRatio;\n      const calWidthRatio = widthRatio >= 1 ? widthRatio : widthRatio + 1;\n      this.gridster.curColWidth = this.gridster.curRowHeight * calWidthRatio;\n      addClass = GridType.ScrollHorizontal;\n      removeClass1 = GridType.Fit;\n      removeClass2 = GridType.ScrollVertical;\n      removeClass3 = GridType.Fixed;\n    } else if (this.gridster.$options.gridType === GridType.Fixed) {\n      this.gridster.curColWidth =\n        this.gridster.$options.fixedColWidth +\n        (this.gridster.$options.ignoreMarginInRow\n          ? 0\n          : this.gridster.$options.margin);\n      this.gridster.curRowHeight =\n        this.gridster.$options.fixedRowHeight +\n        (this.gridster.$options.ignoreMarginInRow\n          ? 0\n          : this.gridster.$options.margin);\n      addClass = GridType.Fixed;\n      removeClass1 = GridType.Fit;\n      removeClass2 = GridType.ScrollVertical;\n      removeClass3 = GridType.ScrollHorizontal;\n    } else if (this.gridster.$options.gridType === GridType.VerticalFixed) {\n      this.gridster.curRowHeight =\n        this.gridster.$options.fixedRowHeight +\n        (this.gridster.$options.ignoreMarginInRow\n          ? 0\n          : this.gridster.$options.margin);\n      addClass = GridType.ScrollVertical;\n      removeClass1 = GridType.Fit;\n      removeClass2 = GridType.ScrollHorizontal;\n      removeClass3 = GridType.Fixed;\n    } else if (this.gridster.$options.gridType === GridType.HorizontalFixed) {\n      this.gridster.curColWidth =\n        this.gridster.$options.fixedColWidth +\n        (this.gridster.$options.ignoreMarginInRow\n          ? 0\n          : this.gridster.$options.margin);\n      addClass = GridType.ScrollHorizontal;\n      removeClass1 = GridType.Fit;\n      removeClass2 = GridType.ScrollVertical;\n      removeClass3 = GridType.Fixed;\n    }\n\n    if (\n      this.gridster.mobile ||\n      (this.gridster.$options.setGridSize &&\n        this.gridster.$options.gridType !== GridType.Fit)\n    ) {\n      this.gridster.renderer.removeClass(this.gridster.el, addClass);\n    } else {\n      this.gridster.renderer.addClass(this.gridster.el, addClass);\n    }\n    this.gridster.renderer.removeClass(this.gridster.el, removeClass1);\n    this.gridster.renderer.removeClass(this.gridster.el, removeClass2);\n    this.gridster.renderer.removeClass(this.gridster.el, removeClass3);\n  }\n\n  getGridColumnStyle(i: number): CommonGridStyle {\n    // generates the new style\n    const newPos: GridColumnCachedStyle = {\n      left: this.gridster.curColWidth * i,\n      width: this.gridster.curColWidth - this.gridster.$options.margin,\n      height:\n        this.gridster.gridRows.length * this.gridster.curRowHeight -\n        this.gridster.$options.margin,\n      style: {}\n    };\n    newPos.style = {\n      ...this.getLeftPosition(newPos.left),\n      width: newPos.width + 'px',\n      height: newPos.height + 'px'\n    };\n\n    // use the last cached style if it has same values as the generated one\n    const last = this.lastGridColumnStyles[i];\n    if (\n      last &&\n      last.left === newPos.left &&\n      last.width === newPos.width &&\n      last.height === newPos.height\n    ) {\n      return last.style;\n    }\n\n    // cache and set new style\n    this.lastGridColumnStyles[i] = newPos;\n    return newPos.style;\n  }\n\n  getGridRowStyle(i: number): CommonGridStyle {\n    // generates the new style\n    const newPos: GridRowCachedStyle = {\n      top: this.gridster.curRowHeight * i,\n      width:\n        this.gridster.gridColumns.length * this.gridster.curColWidth +\n        this.gridster.$options.margin,\n      height: this.gridster.curRowHeight - this.gridster.$options.margin,\n      style: {}\n    };\n    newPos.style = {\n      ...this.getTopPosition(newPos.top),\n      width: newPos.width + 'px',\n      height: newPos.height + 'px'\n    };\n\n    // use the last cached style if it has same values as the generated one\n    const last = this.lastGridRowStyles[i];\n    if (\n      last &&\n      last.top === newPos.top &&\n      last.width === newPos.width &&\n      last.height === newPos.height\n    ) {\n      return last.style;\n    }\n\n    // cache and set new style\n    this.lastGridRowStyles[i] = newPos;\n    return newPos.style;\n  }\n\n  getLeftPosition(d: number): { left: string } | { transform: string } {\n    const dPosition = this.gridster.$options.dirType === DirTypes.RTL ? -d : d;\n    if (this.gridster.$options.useTransformPositioning) {\n      return {\n        transform: 'translateX(' + dPosition + 'px)'\n      };\n    } else {\n      return {\n        left: this.getLeftMargin() + dPosition + 'px'\n      };\n    }\n  }\n\n  getTopPosition(d: number): { top: string } | { transform: string } {\n    if (this.gridster.$options.useTransformPositioning) {\n      return {\n        transform: 'translateY(' + d + 'px)'\n      };\n    } else {\n      return {\n        top: this.getTopMargin() + d + 'px'\n      };\n    }\n  }\n\n  clearCellPosition(renderer: Renderer2, el: Element): void {\n    if (this.gridster.$options.useTransformPositioning) {\n      renderer.setStyle(el, 'transform', '');\n    } else {\n      renderer.setStyle(el, 'top', '');\n      renderer.setStyle(el, 'left', '');\n    }\n  }\n\n  setCellPosition(\n    renderer: Renderer2,\n    el: Element,\n    x: number,\n    y: number\n  ): void {\n    const xPosition = this.gridster.$options.dirType === DirTypes.RTL ? -x : x;\n    if (this.gridster.$options.useTransformPositioning) {\n      const transform = 'translate3d(' + xPosition + 'px, ' + y + 'px, 0)';\n      renderer.setStyle(el, 'transform', transform);\n    } else {\n      renderer.setStyle(el, 'left', this.getLeftMargin() + xPosition + 'px');\n      renderer.setStyle(el, 'top', this.getTopMargin() + y + 'px');\n    }\n  }\n\n  getLeftMargin(): number {\n    if (this.gridster.$options.outerMargin) {\n      if (this.gridster.$options.outerMarginLeft !== null) {\n        return this.gridster.$options.outerMarginLeft;\n      } else {\n        return this.gridster.$options.margin;\n      }\n    } else {\n      return 0;\n    }\n  }\n\n  getTopMargin(): number {\n    if (this.gridster.$options.outerMargin) {\n      if (this.gridster.$options.outerMarginTop !== null) {\n        return this.gridster.$options.outerMarginTop;\n      } else {\n        return this.gridster.$options.margin;\n      }\n    } else {\n      return 0;\n    }\n  }\n}\n","import {\n  Component,\n  ElementRef,\n  EventEmitter,\n  Input,\n  OnDestroy,\n  OnInit,\n  Renderer2,\n  ViewEncapsulation\n} from '@angular/core';\nimport { Subscription } from 'rxjs';\nimport { GridsterItem } from './gridsterItem.interface';\nimport { GridsterRenderer } from './gridsterRenderer.service';\n\n@Component({\n  selector: 'gridster-preview',\n  template: '',\n  styleUrls: ['./gridsterPreview.css'],\n  encapsulation: ViewEncapsulation.None,\n  standalone: true\n})\nexport class GridsterPreviewComponent implements OnInit, OnDestroy {\n  @Input() previewStyle$: EventEmitter<GridsterItem | null>;\n  @Input() gridRenderer: GridsterRenderer;\n  private el: HTMLElement;\n  private sub: Subscription;\n\n  constructor(el: ElementRef, private renderer: Renderer2) {\n    this.el = el.nativeElement;\n  }\n\n  ngOnInit(): void {\n    this.sub = this.previewStyle$.subscribe(options =>\n      this.previewStyle(options)\n    );\n  }\n\n  ngOnDestroy(): void {\n    if(this.sub) {\n      this.sub.unsubscribe();\n    }\n  }\n\n  private previewStyle(item: GridsterItem | null): void {\n    if (item) {\n      this.renderer.setStyle(this.el, 'display', 'block');\n      this.gridRenderer.updateItem(this.el, item, this.renderer);\n    } else {\n      this.renderer.setStyle(this.el, 'display', '');\n    }\n  }\n}\n","import { NgStyle } from '@angular/common';\nimport {\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  EventEmitter,\n  Inject,\n  Input,\n  NgZone,\n  OnChanges,\n  OnDestroy,\n  OnInit,\n  Renderer2,\n  SimpleChanges,\n  ViewEncapsulation\n} from '@angular/core';\nimport { debounceTime, Subject, switchMap, takeUntil, timer } from 'rxjs';\nimport { GridsterComponentInterface } from './gridster.interface';\nimport { GridsterCompact } from './gridsterCompact.service';\n\nimport { GridsterConfigService } from './gridsterConfig.constant';\nimport type { GridsterConfig } from './gridsterConfig.interface';\nimport { GridType } from './gridsterConfig.interface';\nimport { GridsterConfigS } from './gridsterConfigS.interface';\nimport { GridsterEmptyCell } from './gridsterEmptyCell.service';\nimport {\n  GridsterItem,\n  GridsterItemCompone