@yinuo-ngm/server 1.0.15 → 1.0.16

package/www/browser/chunk-LVPSURVU.js

@@ -1,4615 +0,0 @@
-import {
-  TaskActionsComponent
-} from "./chunk-TVORF3SF.js";
-import "./chunk-Y7JBZHNK.js";
-import "./chunk-Z7FJIV62.js";
-import {
-  NzDrawerModule
-} from "./chunk-7FC7DN65.js";
-import {
-  NzModalModule
-} from "./chunk-FLSUSPBD.js";
-import {
-  TaskStateService
-} from "./chunk-SS73S33S.js";
-import {
-  NzCardModule
-} from "./chunk-ZZA5NVAI.js";
-import {
-  NzSelectModule
-} from "./chunk-ETTBRXVA.js";
-import {
-  PageLayoutComponent
-} from "./chunk-6QMSEZPT.js";
-import "./chunk-RBWIWNTL.js";
-import {
-  NzBadgeModule
-} from "./chunk-DEGQJKKZ.js";
-import {
-  ProjectContextStore
-} from "./chunk-TEW4MY4J.js";
-import "./chunk-APGQRYWX.js";
-import {
-  ApiClient,
-  NzMessageService
-} from "./chunk-2YSUXBGC.js";
-import {
-  FormsModule,
-  NzButtonModule,
-  NzIconModule,
-  NzInputModule,
-  NzSpaceModule,
-  NzTooltipModule
-} from "./chunk-RUXJCM3V.js";
-import "./chunk-VYNQPZQO.js";
-import {
-  Router
-} from "./chunk-665WC4RU.js";
-import {
-  CommonModule,
-  HttpParams,
-  NgStyle
-} from "./chunk-3MCIETCQ.js";
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  EnvironmentInjector,
-  EventEmitter,
-  FactoryTarget,
-  HostBinding,
-  Inject,
-  Injectable,
-  Input,
-  NgModule,
-  NgZone,
-  Output,
-  Renderer2,
-  Subject,
-  ViewChild,
-  ViewEncapsulation,
-  __decorate,
-  __spreadProps,
-  __spreadValues,
-  afterNextRender,
-  computed,
-  core_exports,
-  debounceTime,
-  effect,
-  firstValueFrom,
-  forwardRef,
-  inject,
-  runInInjectionContext,
-  signal,
-  switchMap,
-  takeUntil,
-  timer,
-  untracked,
-  viewChild,
-  ɵɵngDeclareClassMetadata,
-  ɵɵngDeclareComponent,
-  ɵɵngDeclareFactory,
-  ɵɵngDeclareInjector,
-  ɵɵngDeclareNgModule
-} from "./chunk-XQY5SPGI.js";
-
-// angular:jit:style:inline:src\app\pages\dashboard\dashboard.component.ts;CiAgICA6aG9zdHsKICAgICAgaGVpZ2h0OiAxMDAlOwogICAgICBkaXNwbGF5OiBibG9jazsKICAgICAgcG9zaXRpb246IHJlbGF0aXZlOwogICAgICB0cmFuc2l0aW9uOiB3aWR0aCAwLjJzOwogICAgfQogICAgOmhvc3QuY29sbGFwc2VkIHsKICAgICAgd2lkdGg6IGNhbGMoMTAwJSAtIDM2MHB4KTsKICAgIH0KICAgIC5zaWRlLXBhbmVsIHsKICAgICAgcG9zaXRpb246IGZpeGVkOwogICAgICB0b3A6IDA7CiAgICAgIHJpZ2h0OiAwOwogICAgICBoZWlnaHQ6IDEwMHZoOwogICAgICB3aWR0aDogMzYwcHg7CiAgICAgIGJhY2tncm91bmQ6ICNmZmY7CiAgICAgIGJveC1zaGFkb3c6IC04cHggMCAyNHB4IHJnYmEoMCwwLDAsLjEyKTsKICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVYKDEwMCUpOwogICAgICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gMC4ycyBlYXNlOwogICAgICB6LWluZGV4OiAxMDAwOwogICAgICBkaXNwbGF5OiBmbGV4OwogICAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uOwogICAgfQogICAgLnNpZGUtcGFuZWwub3BlbiB7CiAgICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWCgwKTsKICAgIH0KCiAgICAuc2lkZS1oZWFkZXJ7CiAgICAgIGhlaWdodDogNTZweDsKICAgICAgcGFkZGluZzogMCAxMnB4OwogICAgICBkaXNwbGF5OiBmbGV4OwogICAgICBhbGlnbi1pdGVtczogY2VudGVyOwogICAgICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47CiAgICAgIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCByZ2JhKDAsMCwwLC4wNik7CiAgICB9CiAgICAuc2lkZS1ib2R5ewogICAgICBmbGV4OiAxOwogICAgICBvdmVyZmxvdzogaGlkZGVuOwogICAgfQogIA==
-var dashboard_component_default = "/* angular:styles/component:less;d3a924ccfa0f5b8e2ab6167ab3b23f602bd22a2b18b4453a2443a23049360ad0;D:\\ng-manager\\webapp\\src\\app\\pages\\dashboard\\dashboard.component.ts */\n:host {\n  height: 100%;\n  display: block;\n  position: relative;\n  transition: width 0.2s;\n}\n:host.collapsed {\n  width: calc(100% - 360px);\n}\n.side-panel {\n  position: fixed;\n  top: 0;\n  right: 0;\n  height: 100vh;\n  width: 360px;\n  background: #fff;\n  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);\n  transform: translateX(100%);\n  transition: transform 0.2s ease;\n  z-index: 1000;\n  display: flex;\n  flex-direction: column;\n}\n.side-panel.open {\n  transform: translateX(0);\n}\n.side-header {\n  height: 56px;\n  padding: 0 12px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.06);\n}\n.side-body {\n  flex: 1;\n  overflow: hidden;\n}\n/*# sourceMappingURL=dashboard.component.css.map */\n";
-
-// angular:jit:style:src\app\pages\dashboard\components\add-widget-drawer\add-widget-drawer.component.less
-var add_widget_drawer_component_default = "/* src/app/pages/dashboard/components/add-widget-drawer/add-widget-drawer.component.less */\n.list {\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n}\n.list .topbar {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 16px;\n}\n.list .topbar nz-input-wrapper {\n  width: 100%;\n  border-radius: 18px;\n}\n.list .items {\n  flex: 1 1 auto;\n  overflow: auto;\n  height: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 8px;\n  overflow-x: hidden;\n  overflow-y: auto;\n}\n.list .items .item {\n  border-radius: 3px;\n  padding: 10px 10px;\n  cursor: pointer;\n}\n.list .items .item:hover,\n.list .items .item.active {\n  background: var(--app-primary-3);\n}\n.list .items .item .row {\n  display: flex;\n  gap: 10px;\n  align-items: center;\n  overflow: hidden;\n  justify-content: space-between;\n}\n.list .items .item .row .icon {\n  font-size: 28px;\n  flex: 0 0 auto;\n  position: relative;\n  border-radius: 50% 50%;\n  width: 48px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--app-primary-1);\n}\n.list .items .item .row .info {\n  flex: 1 1 auto;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  overflow: hidden;\n}\n.list .items .item .row .info .name {\n  font-weight: 600;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.list .items .item .row .info .description {\n  font-size: 13px;\n  color: var(--app-text-secondary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.list .items .item .row .actions {\n  flex: 0 0 auto;\n}\n/*# sourceMappingURL=add-widget-drawer.component.css.map */\n";
-
-// src/app/pages/dashboard/services/dashboard-api.service.ts
-var DashboardApiService = class DashboardApiService2 {
-  api = inject(ApiClient);
-  getInfo(projectId) {
-    return this.api.get(`/api/dashboard/getInfo/${projectId}`);
-  }
-  update(projectId, doc) {
-    return this.api.post(`/api/dashboard/update/${projectId}`, doc);
-  }
-  widgets(projectId) {
-    return this.api.get(`/api/dashboard/widgets/${projectId}`);
-  }
-  addWidget(projectId, data) {
-    const { x, y } = data;
-    return this.api.get(`/api/dashboard/addWidget/${projectId}/${data.widgetKey}/${x}/${y}`);
-  }
-  removeWidget(projectId, widgetId) {
-    return this.api.delete(`/api/dashboard/removeWidget/${projectId}/${widgetId}`);
-  }
-  updateItemConfig(projectId, widgetId, config) {
-    return this.api.post(`/api/dashboard/updateItemConfig/${projectId}/${widgetId}`, config);
-  }
-  killPort(port) {
-    return this.api.get(`/api/dashboard/killPort/${port}`);
-  }
-};
-DashboardApiService = __decorate([
-  Injectable({
-    providedIn: "root"
-  })
-], DashboardApiService);
-
-// src/app/pages/dashboard/services/dashboard-layout.service.ts
-var DashboardLayoutService = class DashboardLayoutService2 {
-  api = inject(DashboardApiService);
-  _doc = signal(null);
-  items = computed(() => this._doc()?.items ?? []);
-  updatedAt = computed(() => this._doc()?.updatedAt ?? 0);
-  widgets = signal([]);
-  saveTimer = null;
-  async load(projectId) {
-    try {
-      const doc = await firstValueFrom(this.api.getInfo(projectId));
-      this._doc.set(doc);
-      return;
-    } catch {
-      this._doc.set({
-        version: 1,
-        projectId,
-        updatedAt: Date.now(),
-        items: []
-      });
-    }
-  }
-  setItems(projectId, items) {
-    const cur = this._doc();
-    if (!cur)
-      return;
-    this._doc.set(__spreadProps(__spreadValues({}, cur), { items }));
-    this.scheduleAutoSave(projectId);
-  }
-  /**
-   * 调度一次自动保存（防抖）
-   * @param projectId
-   * @param ms 毫秒，默认 10 秒
-   */
-  scheduleAutoSave(projectId, ms = 1e4) {
-    if (this.saveTimer)
-      clearTimeout(this.saveTimer);
-    this.saveTimer = setTimeout(() => {
-      this.flushSave(projectId).catch(() => void 0);
-    }, ms);
-  }
-  async flushSave(projectId) {
-    if (this.saveTimer) {
-      clearTimeout(this.saveTimer);
-      this.saveTimer = null;
-    }
-    const doc = this._doc();
-    if (!doc)
-      return;
-    const saved = await firstValueFrom(this.api.update(projectId, doc));
-    this._doc.set(saved);
-    return;
-  }
-  add(widget) {
-    console.log("add widget", widget);
-    const cur = this._doc();
-    if (!cur)
-      return;
-    this._doc.set(__spreadProps(__spreadValues({}, cur), {
-      items: [...cur.items, widget]
-    }));
-    setTimeout(() => {
-      const { x, y } = widget;
-      this.api.addWidget(cur.projectId, {
-        widgetKey: widget.key,
-        x,
-        y
-      }).subscribe((doc) => {
-        this._doc.set(doc);
-        this.getWidgets();
-      });
-    }, 0);
-  }
-  remove(widgetId) {
-    const cur = this._doc();
-    if (!cur)
-      return;
-    this.api.removeWidget(cur.projectId, widgetId).subscribe((doc) => {
-      this._doc.set(doc);
-      this.getWidgets();
-    });
-  }
-  killProcess(port) {
-    this.api.killPort(Number(port)).subscribe((res) => {
-      console.log("Killed port", port);
-    });
-  }
-  getWidgets() {
-    const cur = this._doc();
-    ;
-    if (!cur)
-      return;
-    this.api.widgets(cur.projectId).subscribe((widgets) => {
-      this.widgets.set(widgets);
-    });
-  }
-  updateConfig(projectId, widgetId, config) {
-    const cur = this._doc();
-    if (!cur)
-      return;
-    this.api.updateItemConfig(projectId, widgetId, config).subscribe((doc) => {
-      this._doc.set(doc);
-    });
-  }
-};
-DashboardLayoutService = __decorate([
-  Injectable({ providedIn: "root" })
-], DashboardLayoutService);
-
-// src/app/pages/dashboard/components/add-widget-drawer/add-widget-drawer.component.ts
-var AddWidgetDrawerComponent = class AddWidgetDrawerComponent2 {
-  layout = inject(DashboardLayoutService);
-  add = new EventEmitter();
-  keyword = signal("");
-  widgets = this.layout.widgets;
-  filtered = computed(() => {
-    const k = this.keyword().trim().toLowerCase();
-    if (!k)
-      return this.widgets();
-    return this.widgets().filter((w) => (w.title + (w.desc ?? "")).toLowerCase().includes(k));
-  });
-  constructor() {
-  }
-  addWidget(widget) {
-    this.add.emit(widget);
-  }
-  static ctorParameters = () => [];
-  static propDecorators = {
-    add: [{ type: Output }]
-  };
-};
-AddWidgetDrawerComponent = __decorate([
-  Component({
-    selector: "app-add-widget-drawer",
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [
-      CommonModule,
-      FormsModule,
-      NzIconModule,
-      NzInputModule,
-      NzButtonModule,
-      NzTooltipModule
-    ],
-    template: `
-    <div class="list">
-      <div class="topbar">
-        <nz-input-wrapper>
-            <nz-icon class="search-icon" nzInputPrefix nzType="search" />
-            <input
-              nz-input
-              placeholder=""
-              [ngModel]="keyword()"
-              (ngModelChange)="keyword.set($event)"
-            />
-          </nz-input-wrapper>
-      </div>
-      <div class="items">
-        @for (it of filtered(); track it.key) {
-          <div
-            class="item"
-          >
-            <div class="row">
-              <div class="icon">
-                <nz-icon
-                  [nzType]="it.icon || 'appstore'"
-                  nzTheme="outline"
-                />
-              </div>
-              <div class="info">
-                <div class="name">{{ it.title }}</div>
-                <div class="description">{{ it.desc }}</div>
-              </div>
-              <div class="actions">
-                <button nz-button nzType="primary" nzSize="small" nzTooltip="\u6DFB\u52A0\u90E8\u4EF6" (click)="addWidget(it)">
-                  <nz-icon nzType="plus" />
-                </button>
-              </div>
-            </div>
-          </div>
-        }
-      </div>
-    </div>
-  `,
-    styles: [add_widget_drawer_component_default]
-  })
-], AddWidgetDrawerComponent);
-
-// angular:jit:style:inline:src\app\pages\dashboard\components\dashboard-canvas\dashboard-canvas.component.ts;CiAgICA6aG9zdCB7IGRpc3BsYXk6IGJsb2NrOyBoZWlnaHQ6IDEwMCU7IH0KICAgIGdyaWRzdGVyIHsgZGlzcGxheTpibG9jazsgaGVpZ2h0OjEwMCU7YmFja2dyb3VuZDogdmFyKC0tYXBwLXByaW1hcnktMSk7IH0KICAgIGdyaWRzdGVyLWl0ZW17CiAgICAgIGJvcmRlci1yYWRpdXM6IDEwcHg7CiAgICB9CiAgICAuY2FyZCB7CiAgICAgIGhlaWdodDogMTAwJTsKICAgICAgYmFja2dyb3VuZDogI2ZmZjsKICAgICAgYm9yZGVyLXJhZGl1czogMTBweDsKICAgICAgYm94LXNoYWRvdzogMCAycHggMTBweCByZ2JhKDAsMCwwLC4wNik7CiAgICAgIG92ZXJmbG93OiBoaWRkZW47CiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTsKICAgIH0KCiAgICAuY2FyZC5lZGl0LW1vZGUgeyB1c2VyLXNlbGVjdDogbm9uZTsgfQoKICAgIC8qIG92ZXJsYXkg5Y+q5YGa6KeG6KeJ5bGC77yM5LiN5oum5oiq5LqL5Lu2ICovCiAgICAuY2FyZC1vdmVybGF5ewogICAgICBwb3NpdGlvbjphYnNvbHV0ZTsgaW5zZXQ6MDsKICAgICAgYmFja2dyb3VuZDogcmdiYSgyNTUsMjU1LDI1NSwwLjU1KTsKICAgICAgZGlzcGxheTpmbGV4OyBqdXN0aWZ5LWNvbnRlbnQ6Y2VudGVyOyBhbGlnbi1pdGVtczpjZW50ZXI7CiAgICAgIHBvaW50ZXItZXZlbnRzOm5vbmU7CiAgICAgIHotaW5kZXg6IDI7CiAgICB9CiAgICAucmVtb3ZlLWJ1dHRvbnsKICAgICAgcG9zaXRpb246IGFic29sdXRlOwogICAgICByaWdodDogMTZweDsKICAgICAgdG9wOiAxNnB4OwogICAgICB6LWluZGV4OiAzOwogICAgICBiYWNrZ3JvdW5kOiB2YXIoLS1hcHAtcHJpbWFyeS0xKTsKICAgICAgY29sb3I6IHZhcigtLWFwcC1wcmltYXJ5KTsKICAgICAgdHJhbnNpdGlvbjogYWxsIDAuM3M7CiAgICAgICY6aG92ZXJ7CiAgICAgICAgYmFja2dyb3VuZDogdmFyKC0tYXBwLXByaW1hcnkpOwogICAgICAgIGNvbG9yOiAjZmZmOwogICAgICB9CiAgICB9CiAgICAuY2FyZC1vdmVybGF5IGJ1dHRvbiB7IHBvaW50ZXItZXZlbnRzOm5vbmU7IGJvcmRlci1yYWRpdXM6IDIwcHg7IH0KICAgIC50aXRsZXsgZm9udC1zaXplOiAxMnB4OyBjb2xvcjogcmdiYSgwLDAsMCwuNzUpOyB9CgogICAgLmNhcmQtYm9keXsKICAgICAgcG9zaXRpb246IHJlbGF0aXZlOwogICAgICBoZWlnaHQ6IDEwMCU7CiAgICB9CiAgICAuY2FyZC5lZGl0LW1vZGUgLmNhcmQtYm9keSB7Y3Vyc29yOiBtb3ZlO3BvaW50ZXItZXZlbnRzOiBub25lO29wYWNpdHk6IDAuODt9CiAg
-var dashboard_canvas_component_default = "/* angular:styles/component:less;3ab85a83069fb8a7a44891e4777bc7750f9c48bc10e18ecb82108c144f5f463c;D:\\ng-manager\\webapp\\src\\app\\pages\\dashboard\\components\\dashboard-canvas\\dashboard-canvas.component.ts */\n:host {\n  display: block;\n  height: 100%;\n}\ngridster {\n  display: block;\n  height: 100%;\n  background: var(--app-primary-1);\n}\ngridster-item {\n  border-radius: 10px;\n}\n.card {\n  height: 100%;\n  background: #fff;\n  border-radius: 10px;\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);\n  overflow: hidden;\n  position: relative;\n}\n.card.edit-mode {\n  -webkit-user-select: none;\n  user-select: none;\n}\n.card-overlay {\n  position: absolute;\n  inset: 0;\n  background: rgba(255, 255, 255, 0.55);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  pointer-events: none;\n  z-index: 2;\n}\n.remove-button {\n  position: absolute;\n  right: 16px;\n  top: 16px;\n  z-index: 3;\n  background: var(--app-primary-1);\n  color: var(--app-primary);\n  transition: all 0.3s;\n}\n.remove-button:hover {\n  background: var(--app-primary);\n  color: #fff;\n}\n.card-overlay button {\n  pointer-events: none;\n  border-radius: 20px;\n}\n.title {\n  font-size: 12px;\n  color: rgba(0, 0, 0, 0.75);\n}\n.card-body {\n  position: relative;\n  height: 100%;\n}\n.card.edit-mode .card-body {\n  cursor: move;\n  pointer-events: none;\n  opacity: 0.8;\n}\n/*# sourceMappingURL=dashboard-canvas.component.css.map */\n";
-
-// node_modules/angular-gridster2/fesm2022/angular-gridster2.mjs
-var GridType;
-(function(GridType2) {
-  GridType2["Fit"] = "fit";
-  GridType2["ScrollVertical"] = "scrollVertical";
-  GridType2["ScrollHorizontal"] = "scrollHorizontal";
-  GridType2["Fixed"] = "fixed";
-  GridType2["VerticalFixed"] = "verticalFixed";
-  GridType2["HorizontalFixed"] = "horizontalFixed";
-})(GridType || (GridType = {}));
-var DisplayGrid;
-(function(DisplayGrid2) {
-  DisplayGrid2["Always"] = "always";
-  DisplayGrid2["OnDragAndResize"] = "onDrag&Resize";
-  DisplayGrid2["None"] = "none";
-})(DisplayGrid || (DisplayGrid = {}));
-var CompactType;
-(function(CompactType2) {
-  CompactType2["None"] = "none";
-  CompactType2["CompactUp"] = "compactUp";
-  CompactType2["CompactLeft"] = "compactLeft";
-  CompactType2["CompactUpAndLeft"] = "compactUp&Left";
-  CompactType2["CompactLeftAndUp"] = "compactLeft&Up";
-  CompactType2["CompactRight"] = "compactRight";
-  CompactType2["CompactUpAndRight"] = "compactUp&Right";
-  CompactType2["CompactRightAndUp"] = "compactRight&Up";
-  CompactType2["CompactDown"] = "compactDown";
-  CompactType2["CompactDownAndLeft"] = "compactDown&Left";
-  CompactType2["CompactLeftAndDown"] = "compactLeft&Down";
-  CompactType2["CompactDownAndRight"] = "compactDown&Right";
-  CompactType2["CompactRightAndDown"] = "compactRight&Down";
-  CompactType2["CompactGrid"] = "compactGrid";
-})(CompactType || (CompactType = {}));
-var DirTypes;
-(function(DirTypes2) {
-  DirTypes2["LTR"] = "ltr";
-  DirTypes2["RTL"] = "rtl";
-})(DirTypes || (DirTypes = {}));
-var GridsterCompact = class {
-  gridster;
-  constructor(gridster) {
-    this.gridster = gridster;
-  }
-  destroy() {
-    this.gridster = null;
-  }
-  checkCompact() {
-    if (this.gridster.$options.compactType !== CompactType.None) {
-      if (this.gridster.$options.compactType === CompactType.CompactUp) {
-        this.checkCompactMovement("y", -1);
-      } else if (this.gridster.$options.compactType === CompactType.CompactLeft) {
-        this.checkCompactMovement("x", -1);
-      } else if (this.gridster.$options.compactType === CompactType.CompactUpAndLeft) {
-        this.checkCompactMovement("y", -1);
-        this.checkCompactMovement("x", -1);
-      } else if (this.gridster.$options.compactType === CompactType.CompactLeftAndUp) {
-        this.checkCompactMovement("x", -1);
-        this.checkCompactMovement("y", -1);
-      } else if (this.gridster.$options.compactType === CompactType.CompactRight) {
-        this.checkCompactMovement("x", 1);
-      } else if (this.gridster.$options.compactType === CompactType.CompactUpAndRight) {
-        this.checkCompactMovement("y", -1);
-        this.checkCompactMovement("x", 1);
-      } else if (this.gridster.$options.compactType === CompactType.CompactRightAndUp) {
-        this.checkCompactMovement("x", 1);
-        this.checkCompactMovement("y", -1);
-      } else if (this.gridster.$options.compactType === CompactType.CompactDown) {
-        this.checkCompactMovement("y", 1);
-      } else if (this.gridster.$options.compactType === CompactType.CompactDownAndLeft) {
-        this.checkCompactMovement("y", 1);
-        this.checkCompactMovement("x", -1);
-      } else if (this.gridster.$options.compactType === CompactType.CompactDownAndRight) {
-        this.checkCompactMovement("y", 1);
-        this.checkCompactMovement("x", 1);
-      } else if (this.gridster.$options.compactType === CompactType.CompactLeftAndDown) {
-        this.checkCompactMovement("x", -1);
-        this.checkCompactMovement("y", 1);
-      } else if (this.gridster.$options.compactType === CompactType.CompactRightAndDown) {
-        this.checkCompactMovement("x", 1);
-        this.checkCompactMovement("y", 1);
-      } else if (this.gridster.$options.compactType === CompactType.CompactGrid) {
-        this.checkCompactGrid();
-      }
-    }
-  }
-  checkCompactItem(item) {
-    if (this.gridster.$options.compactType !== CompactType.None) {
-      if (this.gridster.$options.compactType === CompactType.CompactUp) {
-        this.moveTillCollision(item, "y", -1);
-      } else if (this.gridster.$options.compactType === CompactType.CompactLeft) {
-        this.moveTillCollision(item, "x", -1);
-      } else if (this.gridster.$options.compactType === CompactType.CompactUpAndLeft) {
-        this.moveTillCollision(item, "y", -1);
-        this.moveTillCollision(item, "x", -1);
-      } else if (this.gridster.$options.compactType === CompactType.CompactLeftAndUp) {
-        this.moveTillCollision(item, "x", -1);
-        this.moveTillCollision(item, "y", -1);
-      } else if (this.gridster.$options.compactType === CompactType.CompactUpAndRight) {
-        this.moveTillCollision(item, "y", -1);
-        this.moveTillCollision(item, "x", 1);
-      } else if (this.gridster.$options.compactType === CompactType.CompactDown) {
-        this.moveTillCollision(item, "y", 1);
-      } else if (this.gridster.$options.compactType === CompactType.CompactDownAndLeft) {
-        this.moveTillCollision(item, "y", 1);
-        this.moveTillCollision(item, "x", -1);
-      } else if (this.gridster.$options.compactType === CompactType.CompactLeftAndDown) {
-        this.moveTillCollision(item, "x", -1);
-        this.moveTillCollision(item, "y", 1);
-      } else if (this.gridster.$options.compactType === CompactType.CompactDownAndRight) {
-        this.moveTillCollision(item, "y", 1);
-        this.moveTillCollision(item, "x", 1);
-      } else if (this.gridster.$options.compactType === CompactType.CompactRightAndDown) {
-        this.moveTillCollision(item, "x", 1);
-        this.moveTillCollision(item, "y", 1);
-      } else if (this.gridster.$options.compactType === CompactType.CompactGrid) {
-        this.moveToGridPosition(item);
-      }
-    }
-  }
-  checkCompactMovement(direction, delta) {
-    let widgetMoved = false;
-    this.gridster.grid.forEach((widget) => {
-      if (widget.$item.compactEnabled !== false) {
-        const moved = this.moveTillCollision(widget.$item, direction, delta);
-        if (moved) {
-          widgetMoved = true;
-          widget.item[direction] = widget.$item[direction];
-          widget.itemChanged();
-        }
-      }
-    });
-    if (widgetMoved) {
-      this.checkCompact();
-    }
-  }
-  moveTillCollision(item, direction, delta) {
-    item[direction] += delta;
-    if (this.gridster.checkCollision(item)) {
-      item[direction] -= delta;
-      return false;
-    } else {
-      this.moveTillCollision(item, direction, delta);
-      return true;
-    }
-  }
-  checkCompactGrid() {
-    const sortedItems = this.gridster.grid.filter((widget) => widget.$item.compactEnabled !== false).sort((a, b) => {
-      if (a.$item.y !== b.$item.y) {
-        return a.$item.y - b.$item.y;
-      }
-      return a.$item.x - b.$item.x;
-    });
-    let currentY = 0;
-    let currentX = 0;
-    let maxYInRow = 0;
-    sortedItems.forEach((widget) => {
-      const item = widget.$item;
-      if (currentX + item.cols > this.gridster.columns) {
-        currentY = maxYInRow;
-        currentX = 0;
-        maxYInRow = currentY;
-      }
-      const oldX = item.x;
-      const oldY = item.y;
-      item.x = currentX;
-      item.y = currentY;
-      if (oldX !== item.x || oldY !== item.y) {
-        widget.item.x = item.x;
-        widget.item.y = item.y;
-        widget.itemChanged();
-      }
-      currentX += item.cols;
-      maxYInRow = Math.max(maxYInRow, currentY + item.rows);
-    });
-  }
-  moveToGridPosition(item) {
-    let currentY = 0;
-    let currentX = 0;
-    let maxYInRow = 0;
-    const sortedItems = this.gridster.grid.filter((widget) => widget.$item !== item).sort((a, b) => {
-      if (a.$item.y !== b.$item.y) {
-        return a.$item.y - b.$item.y;
-      }
-      return a.$item.x - b.$item.x;
-    });
-    for (const widget of sortedItems) {
-      const existingItem = widget.$item;
-      if (currentX + existingItem.cols > this.gridster.columns) {
-        currentY = maxYInRow;
-        currentX = 0;
-        maxYInRow = currentY;
-      }
-      if (currentY < existingItem.y + existingItem.rows && currentY + item.rows > existingItem.y && currentX < existingItem.x + existingItem.cols && currentX + item.cols > existingItem.x) {
-        currentX = existingItem.x + existingItem.cols;
-        currentY = existingItem.y;
-        maxYInRow = Math.max(maxYInRow, currentY + existingItem.rows);
-      } else {
-        currentX += existingItem.cols;
-        maxYInRow = Math.max(maxYInRow, currentY + existingItem.rows);
-      }
-    }
-    if (currentX + item.cols > this.gridster.columns) {
-      currentY = maxYInRow;
-      currentX = 0;
-    }
-    item.x = currentX;
-    item.y = currentY;
-  }
-};
-var GridsterConfigService = {
-  gridType: GridType.Fit,
-  // 'fit' will fit the items in the container without scroll;
-  scale: 1,
-  // scale param to zoom in/zoom out
-  // 'scrollVertical' will fit on width and height of the items will be the same as the width
-  // 'scrollHorizontal' will fit on height and width of the items will be the same as the height
-  // 'fixed' will set the rows and columns dimensions based on fixedColWidth and fixedRowHeight options
-  // 'verticalFixed' will set the rows to fixedRowHeight and columns width will fit the space available
-  // 'horizontalFixed' will set the columns to fixedColWidth and rows height will fit the space available
-  fixedColWidth: 250,
-  // fixed col width for gridType: 'fixed'
-  fixedRowHeight: 250,
-  // fixed row height for gridType: 'fixed'
-  keepFixedHeightInMobile: false,
-  // keep the height from fixed gridType in mobile layout
-  keepFixedWidthInMobile: false,
-  // keep the width from fixed gridType in mobile layout
-  setGridSize: false,
-  // sets grid size depending on content
-  compactType: CompactType.None,
-  // compact items: 'none' | 'compactUp' | 'compactLeft' | 'compactUp&Left' | 'compactLeft&Up'
-  mobileBreakpoint: 640,
-  // if the screen is not wider that this, remove the grid layout and stack the items
-  useBodyForBreakpoint: false,
-  // whether to use the body width to determine the mobile breakpoint. Uses the element width when false.
-  allowMultiLayer: false,
-  defaultLayerIndex: 0,
-  maxLayerIndex: 2,
-  baseLayerIndex: 1,
-  minCols: 1,
-  // minimum amount of columns in the grid
-  maxCols: 100,
-  // maximum amount of columns in the grid
-  minRows: 1,
-  // minimum amount of rows in the grid
-  maxRows: 100,
-  // maximum amount of rows in the grid
-  defaultItemCols: 1,
-  // default width of an item in columns
-  defaultItemRows: 1,
-  // default height of an item in rows
-  itemAspectRatio: void 0,
-  // set a fixed aspect ratio for an item to have in cols/rows e.g. 1/1 or 4/3 or 16/9
-  maxItemCols: 50,
-  // max item number of cols
-  maxItemRows: 50,
-  // max item number of rows
-  minItemCols: 1,
-  // min item number of columns
-  minItemRows: 1,
-  // min item number of rows
-  minItemArea: 1,
-  // min item area: cols * rows
-  maxItemArea: 2500,
-  // max item area: cols * rows
-  addEmptyRowsCount: 0,
-  // add a number of extra empty rows at the end
-  rowHeightRatio: 1,
-  // row height ratio from column width
-  margin: 10,
-  // margin between grid items
-  outerMargin: true,
-  // if margins will apply to the sides of the container
-  outerMarginTop: null,
-  // override outer margin for grid
-  outerMarginRight: null,
-  // override outer margin for grid
-  outerMarginBottom: null,
-  // override outer margin for grid
-  outerMarginLeft: null,
-  // override outer margin for grid
-  useTransformPositioning: true,
-  // toggle between transform or top/left positioning of items
-  scrollSensitivity: 10,
-  // margin of the dashboard where to start scrolling
-  scrollSpeed: 20,
-  // how much to scroll each mouse move when in the scrollSensitivity zone
-  initCallback: void 0,
-  // callback to call after grid has initialized. Arguments: gridsterComponent
-  destroyCallback: void 0,
-  // callback to call after grid has destroyed. Arguments: gridsterComponent
-  gridSizeChangedCallback: void 0,
-  // callback to call after grid has changed size. Arguments: gridsterComponent
-  itemChangeCallback: void 0,
-  // callback to call for each item when is changes x, y, rows, cols.
-  // Arguments: gridsterItem, gridsterItemComponent
-  itemResizeCallback: void 0,
-  // callback to call for each item when width/height changes.
-  // Arguments: gridsterItem, gridsterItemComponent
-  itemInitCallback: void 0,
-  // callback to call for each item when is initialized.
-  // Arguments: gridsterItem, gridsterItemComponent
-  itemRemovedCallback: void 0,
-  // callback to call for each item when is initialized.
-  // Arguments: gridsterItem, gridsterItemComponent
-  itemValidateCallback: void 0,
-  // callback to call to validate item position/size. Return true if valid.
-  // Arguments: gridsterItem
-  enableEmptyCellClick: false,
-  // enable empty cell click events
-  enableEmptyCellContextMenu: false,
-  // enable empty cell context menu (right click) events
-  enableEmptyCellDrop: false,
-  // enable empty cell drop events
-  enableEmptyCellDrag: false,
-  // enable empty cell drag events
-  enableOccupiedCellDrop: false,
-  // enable occupied cell drop events
-  emptyCellClickCallback: void 0,
-  // empty cell click callback
-  emptyCellContextMenuCallback: void 0,
-  // empty cell context menu (right click) callback
-  emptyCellDropCallback: void 0,
-  // empty cell drag drop callback. HTML5 Drag & Drop
-  emptyCellDragCallback: void 0,
-  // empty cell drag and create item like excel cell selection
-  emptyCellDragMaxCols: 50,
-  // limit empty cell drag max cols
-  emptyCellDragMaxRows: 50,
-  // limit empty cell drag max rows
-  // Arguments: event, gridsterItem{x, y, rows: defaultItemRows, cols: defaultItemCols}
-  ignoreMarginInRow: false,
-  // ignore the gap between rows for items which span multiple rows (see #162, #224)
-  draggable: {
-    delayStart: 0,
-    // milliseconds to delay the start of drag, useful for touch interaction
-    enabled: false,
-    // enable/disable draggable items
-    ignoreContentClass: "gridster-item-content",
-    // default content class to ignore the drag event from
-    ignoreContent: false,
-    // if true drag will start only from elements from `dragHandleClass`
-    dragHandleClass: "drag-handler",
-    // drag event only from this class. If `ignoreContent` is true.
-    stop: void 0,
-    // callback when dragging an item stops.  Accepts Promise return to cancel/approve drag.
-    start: void 0,
-    // callback when dragging an item starts.
-    // Arguments: item, gridsterItem, event
-    dropOverItems: false,
-    // enable drop items on top other item
-    dropOverItemsCallback: void 0
-    // callback on drop over another item
-    // Arguments: source, target, gridComponent
-  },
-  resizable: {
-    delayStart: 0,
-    // milliseconds to delay the start of resize, useful for touch interaction
-    enabled: false,
-    // enable/disable resizable items
-    handles: {
-      s: true,
-      e: true,
-      n: true,
-      w: true,
-      se: true,
-      ne: true,
-      sw: true,
-      nw: true
-    },
-    // resizable edges of an item
-    stop: void 0,
-    // callback when resizing an item stops. Accepts Promise return to cancel/approve resize.
-    start: void 0
-    // callback when resizing an item starts.
-    // Arguments: item, gridsterItem, event
-  },
-  swap: true,
-  // allow items to switch position if drop on top of another
-  swapWhileDragging: false,
-  // allow items to switch position while dragging
-  pushItems: false,
-  // push items when resizing and dragging
-  disablePushOnDrag: false,
-  // disable push on drag
-  disablePushOnResize: false,
-  // disable push on resize
-  pushDirections: { north: true, east: true, south: true, west: true },
-  // control the directions items are pushed
-  pushResizeItems: false,
-  // on resize of item will shrink adjacent items
-  displayGrid: DisplayGrid.OnDragAndResize,
-  // display background grid of rows and columns
-  disableWindowResize: false,
-  // disable the window on resize listener. This will stop grid to recalculate on window resize.
-  disableWarnings: false,
-  // disable console log warnings about misplacement of grid items
-  scrollToNewItems: false,
-  // scroll to new items placed in a scrollable view
-  disableScrollHorizontal: false,
-  // disable horizontal scrolling
-  disableScrollVertical: false,
-  // disable vertical scrolling
-  enableBoundaryControl: false,
-  // enable boundary control while dragging items
-  disableAutoPositionOnConflict: false,
-  // disable auto-position of items on conflict state,
-  dirType: DirTypes.LTR
-  // page direction, rtl=right to left ltr= left to right, if you use rtl language set dirType to rtl
-};
-var GridsterUtils = class _GridsterUtils {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  static merge(obj1, obj2, properties) {
-    for (const p in obj2) {
-      if (obj2[p] !== void 0 && properties.hasOwnProperty(p)) {
-        if (typeof obj2[p] === "object") {
-          if (!(p in obj1)) {
-            obj1[p] = {};
-          }
-          obj1[p] = _GridsterUtils.merge(obj1[p], obj2[p], properties[p]);
-        } else {
-          obj1[p] = obj2[p];
-        }
-      }
-    }
-    return obj1;
-  }
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  static checkTouchEvent(e) {
-    if (e.clientX === void 0 && e.touches) {
-      if (e.touches && e.touches.length) {
-        e.clientX = e.touches[0].clientX;
-        e.clientY = e.touches[0].clientY;
-      } else if (e.changedTouches && e.changedTouches.length) {
-        e.clientX = e.changedTouches[0].clientX;
-        e.clientY = e.changedTouches[0].clientY;
-      }
-    }
-  }
-  static checkContentClassForEvent(gridster, e) {
-    if (gridster.$options.draggable.ignoreContent) {
-      if (!_GridsterUtils.checkDragHandleClass(e.target, e.currentTarget, gridster.$options.draggable.dragHandleClass, gridster.$options.draggable.ignoreContentClass)) {
-        return true;
-      }
-    } else {
-      if (_GridsterUtils.checkContentClass(e.target, e.currentTarget, gridster.$options.draggable.ignoreContentClass)) {
-        return true;
-      }
-    }
-    return false;
-  }
-  static checkContentClassForEmptyCellClickEvent(gridster, e) {
-    return _GridsterUtils.checkContentClass(e.target, e.currentTarget, gridster.$options.draggable.ignoreContentClass) || _GridsterUtils.checkContentClass(e.target, e.currentTarget, gridster.$options.draggable.dragHandleClass);
-  }
-  static checkDragHandleClass(target, current, dragHandleClass, ignoreContentClass) {
-    if (!target || target === current) {
-      return false;
-    }
-    if (target.hasAttribute("class")) {
-      const classnames = target.getAttribute("class").split(" ");
-      if (classnames.indexOf(dragHandleClass) > -1) {
-        return true;
-      }
-      if (classnames.indexOf(ignoreContentClass) > -1) {
-        return false;
-      }
-    }
-    return _GridsterUtils.checkDragHandleClass(target.parentNode, current, dragHandleClass, ignoreContentClass);
-  }
-  static checkContentClass(target, current, contentClass) {
-    if (!target || target === current) {
-      return false;
-    }
-    if (target.hasAttribute("class") && target.getAttribute("class").split(" ").indexOf(contentClass) > -1) {
-      return true;
-    } else {
-      return _GridsterUtils.checkContentClass(target.parentNode, current, contentClass);
-    }
-  }
-  static compareItems(a, b) {
-    if (a.y > b.y) {
-      return -1;
-    } else if (a.y < b.y) {
-      return 1;
-    } else if (a.x > b.x) {
-      return -1;
-    } else {
-      return 1;
-    }
-  }
-};
-var GridsterEmptyCell = class {
-  gridster;
-  initialItem;
-  removeEmptyCellClickListenerFn;
-  removeEmptyCellTouchendListenerFn;
-  removeEmptyCellContextMenuListenerFn;
-  removeEmptyCellDropListenerFn;
-  removeEmptyCellMousedownListenerFn;
-  removeEmptyCellTouchstartListenerFn;
-  removeWindowMousemoveListenerFn;
-  removeWindowTouchmoveListenerFn;
-  removeWindowMouseupListenerFn;
-  removeWindowTouchendListenerFn;
-  removeEmptyCellDragoverListenerFn;
-  removeDocumentDragendListenerFn;
-  constructor(gridster) {
-    this.gridster = gridster;
-  }
-  destroy() {
-    if (this.gridster.previewStyle) {
-      this.gridster.previewStyle();
-    }
-    this.gridster.movingItem = null;
-    this.initialItem = this.gridster = null;
-    if (this.removeDocumentDragendListenerFn) {
-      this.removeDocumentDragendListenerFn();
-      this.removeDocumentDragendListenerFn = null;
-    }
-  }
-  updateOptions() {
-    if (this.gridster.$options.enableEmptyCellClick && !this.removeEmptyCellClickListenerFn && this.gridster.options.emptyCellClickCallback) {
-      this.removeEmptyCellClickListenerFn = this.gridster.renderer.listen(this.gridster.el, "click", this.emptyCellClickCb);
-      this.removeEmptyCellTouchendListenerFn = this.gridster.renderer.listen(this.gridster.el, "touchend", this.emptyCellClickCb);
-    } else if (!this.gridster.$options.enableEmptyCellClick && this.removeEmptyCellClickListenerFn && this.removeEmptyCellTouchendListenerFn) {
-      this.removeEmptyCellClickListenerFn();
-      this.removeEmptyCellTouchendListenerFn();
-      this.removeEmptyCellClickListenerFn = null;
-      this.removeEmptyCellTouchendListenerFn = null;
-    }
-    if (this.gridster.$options.enableEmptyCellContextMenu && !this.removeEmptyCellContextMenuListenerFn && this.gridster.options.emptyCellContextMenuCallback) {
-      this.removeEmptyCellContextMenuListenerFn = this.gridster.renderer.listen(this.gridster.el, "contextmenu", this.emptyCellContextMenuCb);
-    } else if (!this.gridster.$options.enableEmptyCellContextMenu && this.removeEmptyCellContextMenuListenerFn) {
-      this.removeEmptyCellContextMenuListenerFn();
-      this.removeEmptyCellContextMenuListenerFn = null;
-    }
-    if (this.gridster.$options.enableEmptyCellDrop && !this.removeEmptyCellDropListenerFn && this.gridster.options.emptyCellDropCallback) {
-      this.removeEmptyCellDropListenerFn = this.gridster.renderer.listen(this.gridster.el, "drop", this.emptyCellDragDrop);
-      this.gridster.zone.runOutsideAngular(() => {
-        this.removeEmptyCellDragoverListenerFn = this.gridster.renderer.listen(this.gridster.el, "dragover", this.emptyCellDragOver);
-      });
-      this.removeDocumentDragendListenerFn = this.gridster.renderer.listen("document", "dragend", () => {
-        this.gridster.movingItem = null;
-        this.gridster.previewStyle();
-      });
-    } else if (!this.gridster.$options.enableEmptyCellDrop && this.removeEmptyCellDropListenerFn && this.removeEmptyCellDragoverListenerFn && this.removeDocumentDragendListenerFn) {
-      this.removeEmptyCellDropListenerFn();
-      this.removeEmptyCellDragoverListenerFn();
-      this.removeDocumentDragendListenerFn();
-      this.removeEmptyCellDragoverListenerFn = null;
-      this.removeEmptyCellDropListenerFn = null;
-      this.removeDocumentDragendListenerFn = null;
-    }
-    if (this.gridster.$options.enableEmptyCellDrag && !this.removeEmptyCellMousedownListenerFn && this.gridster.options.emptyCellDragCallback) {
-      this.removeEmptyCellMousedownListenerFn = this.gridster.renderer.listen(this.gridster.el, "mousedown", this.emptyCellMouseDown);
-      this.removeEmptyCellTouchstartListenerFn = this.gridster.renderer.listen(this.gridster.el, "touchstart", this.emptyCellMouseDown);
-    } else if (!this.gridster.$options.enableEmptyCellDrag && this.removeEmptyCellMousedownListenerFn && this.removeEmptyCellTouchstartListenerFn) {
-      this.removeEmptyCellMousedownListenerFn();
-      this.removeEmptyCellTouchstartListenerFn();
-      this.removeEmptyCellMousedownListenerFn = null;
-      this.removeEmptyCellTouchstartListenerFn = null;
-    }
-  }
-  emptyCellClickCb = (e) => {
-    if (!this.gridster || this.gridster.movingItem || GridsterUtils.checkContentClassForEmptyCellClickEvent(this.gridster, e)) {
-      return;
-    }
-    const item = this.getValidItemFromEvent(e);
-    if (!item) {
-      return;
-    }
-    if (this.gridster.options.emptyCellClickCallback) {
-      this.gridster.options.emptyCellClickCallback(e, item);
-    }
-    this.gridster.cdRef.markForCheck();
-  };
-  emptyCellContextMenuCb = (e) => {
-    if (this.gridster.movingItem || GridsterUtils.checkContentClassForEmptyCellClickEvent(this.gridster, e)) {
-      return;
-    }
-    e.preventDefault();
-    e.stopPropagation();
-    const item = this.getValidItemFromEvent(e);
-    if (!item) {
-      return;
-    }
-    if (this.gridster.options.emptyCellContextMenuCallback) {
-      this.gridster.options.emptyCellContextMenuCallback(e, item);
-    }
-    this.gridster.cdRef.markForCheck();
-  };
-  emptyCellDragDrop = (e) => {
-    const item = this.getValidItemFromEvent(e);
-    if (!item) {
-      return;
-    }
-    if (this.gridster.options.emptyCellDropCallback) {
-      this.gridster.options.emptyCellDropCallback(e, item);
-    }
-    this.gridster.cdRef.markForCheck();
-  };
-  emptyCellDragOver = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    const item = this.getValidItemFromEvent(e);
-    if (item) {
-      if (e.dataTransfer) {
-        e.dataTransfer.dropEffect = "move";
-      }
-      this.gridster.movingItem = item;
-    } else {
-      if (e.dataTransfer) {
-        e.dataTransfer.dropEffect = "none";
-      }
-      this.gridster.movingItem = null;
-    }
-    this.gridster.previewStyle();
-  };
-  emptyCellMouseDown = (e) => {
-    if (GridsterUtils.checkContentClassForEmptyCellClickEvent(this.gridster, e)) {
-      return;
-    }
-    e.preventDefault();
-    e.stopPropagation();
-    const item = this.getValidItemFromEvent(e);
-    const leftMouseButtonCode = 1;
-    if (!item || e.buttons !== leftMouseButtonCode && !(e instanceof TouchEvent)) {
-      return;
-    }
-    this.initialItem = item;
-    this.gridster.movingItem = item;
-    this.gridster.previewStyle();
-    this.gridster.zone.runOutsideAngular(() => {
-      this.removeWindowMousemoveListenerFn = this.gridster.renderer.listen("window", "mousemove", this.emptyCellMouseMove);
-      this.removeWindowTouchmoveListenerFn = this.gridster.renderer.listen("window", "touchmove", this.emptyCellMouseMove);
-    });
-    this.removeWindowMouseupListenerFn = this.gridster.renderer.listen("window", "mouseup", this.emptyCellMouseUp);
-    this.removeWindowTouchendListenerFn = this.gridster.renderer.listen("window", "touchend", this.emptyCellMouseUp);
-  };
-  emptyCellMouseMove = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    const item = this.getValidItemFromEvent(e, this.initialItem);
-    if (!item) {
-      return;
-    }
-    this.gridster.movingItem = item;
-    this.gridster.previewStyle();
-  };
-  emptyCellMouseUp = (e) => {
-    this.removeWindowMousemoveListenerFn();
-    this.removeWindowTouchmoveListenerFn();
-    this.removeWindowMouseupListenerFn();
-    this.removeWindowTouchendListenerFn();
-    const item = this.getValidItemFromEvent(e, this.initialItem);
-    if (item) {
-      this.gridster.movingItem = item;
-    }
-    if (this.gridster.options.emptyCellDragCallback && this.gridster.movingItem) {
-      this.gridster.options.emptyCellDragCallback(e, this.gridster.movingItem);
-    }
-    setTimeout(() => {
-      this.initialItem = null;
-      if (this.gridster) {
-        this.gridster.movingItem = null;
-        this.gridster.previewStyle();
-      }
-    });
-    this.gridster.cdRef.markForCheck();
-  };
-  getPixelsX(e, rect) {
-    const scale = this.gridster.options.scale;
-    if (scale) {
-      return (e.clientX - rect.left) / scale + this.gridster.el.scrollLeft - this.gridster.gridRenderer.getLeftMargin();
-    }
-    return e.clientX + this.gridster.el.scrollLeft - rect.left - this.gridster.gridRenderer.getLeftMargin();
-  }
-  getPixelsY(e, rect) {
-    const scale = this.gridster.options.scale;
-    if (scale) {
-      return (e.clientY - rect.top) / scale + this.gridster.el.scrollTop - this.gridster.gridRenderer.getTopMargin();
-    }
-    return e.clientY + this.gridster.el.scrollTop - rect.top - this.gridster.gridRenderer.getTopMargin();
-  }
-  getValidItemFromEvent(e, oldItem) {
-    e.preventDefault();
-    e.stopPropagation();
-    GridsterUtils.checkTouchEvent(e);
-    const rect = this.gridster.el.getBoundingClientRect();
-    const x = this.getPixelsX(e, rect);
-    const y = this.getPixelsY(e, rect);
-    const item = {
-      x: this.gridster.pixelsToPositionX(x, Math.floor, true),
-      y: this.gridster.pixelsToPositionY(y, Math.floor, true),
-      cols: this.gridster.$options.defaultItemCols,
-      rows: this.gridster.$options.defaultItemRows
-    };
-    if (oldItem) {
-      item.cols = Math.min(Math.abs(oldItem.x - item.x) + 1, this.gridster.$options.emptyCellDragMaxCols);
-      item.rows = Math.min(Math.abs(oldItem.y - item.y) + 1, this.gridster.$options.emptyCellDragMaxRows);
-      if (oldItem.x < item.x) {
-        item.x = oldItem.x;
-      } else if (oldItem.x - item.x > this.gridster.$options.emptyCellDragMaxCols - 1) {
-        item.x = this.gridster.movingItem ? this.gridster.movingItem.x : 0;
-      }
-      if (oldItem.y < item.y) {
-        item.y = oldItem.y;
-      } else if (oldItem.y - item.y > this.gridster.$options.emptyCellDragMaxRows - 1) {
-        item.y = this.gridster.movingItem ? this.gridster.movingItem.y : 0;
-      }
-    }
-    if (!this.gridster.$options.enableOccupiedCellDrop && this.gridster.checkCollision(item)) {
-      return;
-    }
-    return item;
-  }
-};
-var GridsterRenderer = class {
-  gridster;
-  /**
-   * Caches the last grid column styles.
-   * This improves the grid responsiveness by caching and reusing the last style object instead of creating a new one.
-   */
-  lastGridColumnStyles = {};
-  /**
-   * Caches the last grid column styles.
-   * This improves the grid responsiveness by caching and reusing the last style object instead of creating a new one.
-   */
-  lastGridRowStyles = {};
-  constructor(gridster) {
-    this.gridster = gridster;
-  }
-  destroy() {
-    this.gridster = null;
-  }
-  updateItem(el, item, renderer) {
-    if (this.gridster.mobile) {
-      this.clearCellPosition(renderer, el);
-      if (this.gridster.$options.keepFixedHeightInMobile) {
-        renderer.setStyle(el, "height", (item.rows - 1) * this.gridster.$options.margin + item.rows * this.gridster.$options.fixedRowHeight + "px");
-      } else {
-        renderer.setStyle(el, "height", item.rows * this.gridster.curWidth / item.cols + "px");
-      }
-      if (this.gridster.$options.keepFixedWidthInMobile) {
-        renderer.setStyle(el, "width", this.gridster.$options.fixedColWidth + "px");
-      } else {
-        renderer.setStyle(el, "width", "");
-      }
-      renderer.setStyle(el, "margin-bottom", this.gridster.$options.margin + "px");
-      renderer.setStyle(el, DirTypes.LTR ? "margin-right" : "margin-left", "");
-    } else {
-      const x = Math.round(this.gridster.curColWidth * item.x);
-      const y = Math.round(this.gridster.curRowHeight * item.y);
-      const width = this.gridster.curColWidth * item.cols - this.gridster.$options.margin;
-      const height = this.gridster.curRowHeight * item.rows - this.gridster.$options.margin;
-      this.setCellPosition(renderer, el, x, y);
-      renderer.setStyle(el, "width", width + "px");
-      renderer.setStyle(el, "height", height + "px");
-      let marginBottom = null;
-      let marginRight = null;
-      if (this.gridster.$options.outerMargin) {
-        if (this.gridster.rows === item.rows + item.y) {
-          if (this.gridster.$options.outerMarginBottom !== null) {
-            marginBottom = this.gridster.$options.outerMarginBottom + "px";
-          } else {
-            marginBottom = this.gridster.$options.margin + "px";
-          }
-        }
-        if (this.gridster.columns === item.cols + item.x) {
-          if (this.gridster.$options.outerMarginBottom !== null) {
-            marginRight = this.gridster.$options.outerMarginRight + "px";
-          } else {
-            marginRight = this.gridster.$options.margin + "px";
-          }
-        }
-      }
-      renderer.setStyle(el, "margin-bottom", marginBottom);
-      renderer.setStyle(el, this.gridster.$options.dirType === DirTypes.LTR ? "margin-right" : "margin-left", marginRight);
-    }
-  }
-  updateGridster() {
-    let addClass = "";
-    let removeClass1 = "";
-    let removeClass2 = "";
-    let removeClass3 = "";
-    if (this.gridster.$options.gridType === GridType.Fit) {
-      addClass = GridType.Fit;
-      removeClass1 = GridType.ScrollVertical;
-      removeClass2 = GridType.ScrollHorizontal;
-      removeClass3 = GridType.Fixed;
-    } else if (this.gridster.$options.gridType === GridType.ScrollVertical) {
-      this.gridster.curRowHeight = this.gridster.curColWidth * this.gridster.$options.rowHeightRatio;
-      addClass = GridType.ScrollVertical;
-      removeClass1 = GridType.Fit;
-      removeClass2 = GridType.ScrollHorizontal;
-      removeClass3 = GridType.Fixed;
-    } else if (this.gridster.$options.gridType === GridType.ScrollHorizontal) {
-      const widthRatio = this.gridster.$options.rowHeightRatio;
-      const calWidthRatio = widthRatio >= 1 ? widthRatio : widthRatio + 1;
-      this.gridster.curColWidth = this.gridster.curRowHeight * calWidthRatio;
-      addClass = GridType.ScrollHorizontal;
-      removeClass1 = GridType.Fit;
-      removeClass2 = GridType.ScrollVertical;
-      removeClass3 = GridType.Fixed;
-    } else if (this.gridster.$options.gridType === GridType.Fixed) {
-      this.gridster.curColWidth = this.gridster.$options.fixedColWidth + (this.gridster.$options.ignoreMarginInRow ? 0 : this.gridster.$options.margin);
-      this.gridster.curRowHeight = this.gridster.$options.fixedRowHeight + (this.gridster.$options.ignoreMarginInRow ? 0 : this.gridster.$options.margin);
-      addClass = GridType.Fixed;
-      removeClass1 = GridType.Fit;
-      removeClass2 = GridType.ScrollVertical;
-      removeClass3 = GridType.ScrollHorizontal;
-    } else if (this.gridster.$options.gridType === GridType.VerticalFixed) {
-      this.gridster.curRowHeight = this.gridster.$options.fixedRowHeight + (this.gridster.$options.ignoreMarginInRow ? 0 : this.gridster.$options.margin);
-      addClass = GridType.ScrollVertical;
-      removeClass1 = GridType.Fit;
-      removeClass2 = GridType.ScrollHorizontal;
-      removeClass3 = GridType.Fixed;
-    } else if (this.gridster.$options.gridType === GridType.HorizontalFixed) {
-      this.gridster.curColWidth = this.gridster.$options.fixedColWidth + (this.gridster.$options.ignoreMarginInRow ? 0 : this.gridster.$options.margin);
-      addClass = GridType.ScrollHorizontal;
-      removeClass1 = GridType.Fit;
-      removeClass2 = GridType.ScrollVertical;
-      removeClass3 = GridType.Fixed;
-    }
-    if (this.gridster.mobile || this.gridster.$options.setGridSize && this.gridster.$options.gridType !== GridType.Fit) {
-      this.gridster.renderer.removeClass(this.gridster.el, addClass);
-    } else {
-      this.gridster.renderer.addClass(this.gridster.el, addClass);
-    }
-    this.gridster.renderer.removeClass(this.gridster.el, removeClass1);
-    this.gridster.renderer.removeClass(this.gridster.el, removeClass2);
-    this.gridster.renderer.removeClass(this.gridster.el, removeClass3);
-  }
-  getGridColumnStyle(i) {
-    const newPos = {
-      left: this.gridster.curColWidth * i,
-      width: this.gridster.curColWidth - this.gridster.$options.margin,
-      height: this.gridster.gridRows.length * this.gridster.curRowHeight - this.gridster.$options.margin,
-      style: {}
-    };
-    newPos.style = __spreadProps(__spreadValues({}, this.getLeftPosition(newPos.left)), {
-      width: newPos.width + "px",
-      height: newPos.height + "px"
-    });
-    const last = this.lastGridColumnStyles[i];
-    if (last && last.left === newPos.left && last.width === newPos.width && last.height === newPos.height) {
-      return last.style;
-    }
-    this.lastGridColumnStyles[i] = newPos;
-    return newPos.style;
-  }
-  getGridRowStyle(i) {
-    const newPos = {
-      top: this.gridster.curRowHeight * i,
-      width: this.gridster.gridColumns.length * this.gridster.curColWidth + this.gridster.$options.margin,
-      height: this.gridster.curRowHeight - this.gridster.$options.margin,
-      style: {}
-    };
-    newPos.style = __spreadProps(__spreadValues({}, this.getTopPosition(newPos.top)), {
-      width: newPos.width + "px",
-      height: newPos.height + "px"
-    });
-    const last = this.lastGridRowStyles[i];
-    if (last && last.top === newPos.top && last.width === newPos.width && last.height === newPos.height) {
-      return last.style;
-    }
-    this.lastGridRowStyles[i] = newPos;
-    return newPos.style;
-  }
-  getLeftPosition(d) {
-    const dPosition = this.gridster.$options.dirType === DirTypes.RTL ? -d : d;
-    if (this.gridster.$options.useTransformPositioning) {
-      return {
-        transform: "translateX(" + dPosition + "px)"
-      };
-    } else {
-      return {
-        left: this.getLeftMargin() + dPosition + "px"
-      };
-    }
-  }
-  getTopPosition(d) {
-    if (this.gridster.$options.useTransformPositioning) {
-      return {
-        transform: "translateY(" + d + "px)"
-      };
-    } else {
-      return {
-        top: this.getTopMargin() + d + "px"
-      };
-    }
-  }
-  clearCellPosition(renderer, el) {
-    if (this.gridster.$options.useTransformPositioning) {
-      renderer.setStyle(el, "transform", "");
-    } else {
-      renderer.setStyle(el, "top", "");
-      renderer.setStyle(el, "left", "");
-    }
-  }
-  setCellPosition(renderer, el, x, y) {
-    const xPosition = this.gridster.$options.dirType === DirTypes.RTL ? -x : x;
-    if (this.gridster.$options.useTransformPositioning) {
-      const transform = "translate3d(" + xPosition + "px, " + y + "px, 0)";
-      renderer.setStyle(el, "transform", transform);
-    } else {
-      renderer.setStyle(el, "left", this.getLeftMargin() + xPosition + "px");
-      renderer.setStyle(el, "top", this.getTopMargin() + y + "px");
-    }
-  }
-  getLeftMargin() {
-    if (this.gridster.$options.outerMargin) {
-      if (this.gridster.$options.outerMarginLeft !== null) {
-        return this.gridster.$options.outerMarginLeft;
-      } else {
-        return this.gridster.$options.margin;
-      }
-    } else {
-      return 0;
-    }
-  }
-  getTopMargin() {
-    if (this.gridster.$options.outerMargin) {
-      if (this.gridster.$options.outerMarginTop !== null) {
-        return this.gridster.$options.outerMarginTop;
-      } else {
-        return this.gridster.$options.margin;
-      }
-    } else {
-      return 0;
-    }
-  }
-};
-var GridsterPreviewComponent = class _GridsterPreviewComponent {
-  renderer;
-  gridRenderer;
-  el;
-  constructor(el, renderer) {
-    this.renderer = renderer;
-    this.el = el.nativeElement;
-  }
-  previewStyle(item) {
-    if (item) {
-      this.renderer.setStyle(this.el, "display", "block");
-      this.gridRenderer.updateItem(this.el, item, this.renderer);
-    } else {
-      this.renderer.setStyle(this.el, "display", "");
-    }
-  }
-  static \u0275fac = \u0275\u0275ngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: core_exports, type: _GridsterPreviewComponent, deps: [{ token: ElementRef }, { token: Renderer2 }], target: FactoryTarget.Component });
-  static \u0275cmp = \u0275\u0275ngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", type: _GridsterPreviewComponent, isStandalone: true, selector: "gridster-preview", inputs: { gridRenderer: "gridRenderer" }, ngImport: core_exports, template: "", isInline: true, styles: ["gridster-preview{position:absolute;display:none;background:#00000026}\n"], encapsulation: ViewEncapsulation.None });
-};
-\u0275\u0275ngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: core_exports, type: GridsterPreviewComponent, decorators: [{
-  type: Component,
-  args: [{ selector: "gridster-preview", template: "", encapsulation: ViewEncapsulation.None, styles: ["gridster-preview{position:absolute;display:none;background:#00000026}\n"] }]
-}], ctorParameters: () => [{ type: ElementRef }, { type: Renderer2 }], propDecorators: { gridRenderer: [{
-  type: Input
-}] } });
-var GridsterComponent = class _GridsterComponent {
-  renderer;
-  cdRef;
-  zone;
-  gridsterPreview = viewChild.required(GridsterPreviewComponent);
-  options;
-  movingItem;
-  el;
-  $options;
-  mobile;
-  curWidth;
-  curHeight;
-  grid;
-  columns = 0;
-  rows = 0;
-  curColWidth;
-  curRowHeight;
-  gridColumns = [];
-  gridRows = [];
-  windowResize;
-  dragInProgress;
-  emptyCell;
-  compact;
-  gridRenderer;
-  calculateLayout$ = new Subject();
-  resize$ = new Subject();
-  destroy$ = new Subject();
-  constructor(el, renderer, cdRef, zone) {
-    this.renderer = renderer;
-    this.cdRef = cdRef;
-    this.zone = zone;
-    this.el = el.nativeElement;
-    this.$options = JSON.parse(JSON.stringify(GridsterConfigService));
-    this.mobile = false;
-    this.curWidth = 0;
-    this.curHeight = 0;
-    this.grid = [];
-    this.curColWidth = 0;
-    this.curRowHeight = 0;
-    this.dragInProgress = false;
-    this.emptyCell = new GridsterEmptyCell(this);
-    this.compact = new GridsterCompact(this);
-    this.gridRenderer = new GridsterRenderer(this);
-  }
-  // ------ Function for swapWhileDragging option
-  // identical to checkCollision() except that here we add boundaries.
-  static checkCollisionTwoItemsForSwaping(item, item2) {
-    const horizontalBoundaryItem1 = item.cols === 1 ? 0 : 1;
-    const horizontalBoundaryItem2 = item2.cols === 1 ? 0 : 1;
-    const verticalBoundaryItem1 = item.rows === 1 ? 0 : 1;
-    const verticalBoundaryItem2 = item2.rows === 1 ? 0 : 1;
-    return item.x + horizontalBoundaryItem1 < item2.x + item2.cols && item.x + item.cols > item2.x + horizontalBoundaryItem2 && item.y + verticalBoundaryItem1 < item2.y + item2.rows && item.y + item.rows > item2.y + verticalBoundaryItem2;
-  }
-  checkCollisionTwoItems(item, item2) {
-    const collision = item.x < item2.x + item2.cols && item.x + item.cols > item2.x && item.y < item2.y + item2.rows && item.y + item.rows > item2.y;
-    if (!collision) {
-      return false;
-    }
-    if (!this.$options.allowMultiLayer) {
-      return true;
-    }
-    const defaultLayerIndex = this.$options.defaultLayerIndex;
-    const layerIndex = item.layerIndex === void 0 ? defaultLayerIndex : item.layerIndex;
-    const layerIndex2 = item2.layerIndex === void 0 ? defaultLayerIndex : item2.layerIndex;
-    return layerIndex === layerIndex2;
-  }
-  ngOnInit() {
-    if (this.options.initCallback) {
-      this.options.initCallback(this);
-    }
-    this.calculateLayout$.pipe(debounceTime(0), takeUntil(this.destroy$)).subscribe(() => this.calculateLayout());
-    this.resize$.pipe(
-      // Cancel previously scheduled DOM timer if `calculateLayout()` has been called
-      // within this time range.
-      switchMap(() => timer(100)),
-      takeUntil(this.destroy$)
-    ).subscribe(() => this.resize());
-  }
-  ngOnChanges(changes) {
-    if (changes.options) {
-      this.setOptions();
-      this.options.api = {
-        optionsChanged: this.optionsChanged,
-        resize: this.onResize,
-        getNextPossiblePosition: this.getNextPossiblePosition,
-        getFirstPossiblePosition: this.getFirstPossiblePosition,
-        getLastPossiblePosition: this.getLastPossiblePosition,
-        getItemComponent: (item) => this.getItemComponent(item)
-      };
-      this.columns = this.$options.minCols;
-      this.rows = this.$options.minRows + this.$options.addEmptyRowsCount;
-      this.setGridSize();
-      this.calculateLayout();
-    }
-  }
-  resize() {
-    let height;
-    let width;
-    if (this.$options.gridType === "fit" && !this.mobile) {
-      width = this.el.offsetWidth;
-      height = this.el.offsetHeight;
-    } else {
-      width = this.el.clientWidth;
-      height = this.el.clientHeight;
-    }
-    if ((width !== this.curWidth || height !== this.curHeight) && this.checkIfToResize()) {
-      this.onResize();
-    }
-  }
-  setOptions() {
-    this.$options = GridsterUtils.merge(this.$options, this.options, this.$options);
-    if (!this.$options.disableWindowResize && !this.windowResize) {
-      this.windowResize = this.renderer.listen("window", "resize", this.onResize);
-    } else if (this.$options.disableWindowResize && this.windowResize) {
-      this.windowResize();
-      this.windowResize = null;
-    }
-    this.emptyCell.updateOptions();
-  }
-  optionsChanged = () => {
-    this.setOptions();
-    let widgetsIndex = this.grid.length - 1;
-    let widget;
-    for (; widgetsIndex >= 0; widgetsIndex--) {
-      widget = this.grid[widgetsIndex];
-      widget.updateOptions();
-    }
-    this.calculateLayout();
-  };
-  ngOnDestroy() {
-    this.destroy$.next();
-    if (this.windowResize) {
-      this.windowResize();
-    }
-    if (this.options && this.options.destroyCallback) {
-      this.options.destroyCallback(this);
-    }
-    if (this.options && this.options.api) {
-      this.options.api.resize = void 0;
-      this.options.api.optionsChanged = void 0;
-      this.options.api.getNextPossiblePosition = void 0;
-      this.options.api = void 0;
-    }
-    this.emptyCell.destroy();
-    this.emptyCell = null;
-    this.compact.destroy();
-    this.compact = null;
-  }
-  onResize = () => {
-    if (this.el.clientWidth) {
-      if (this.options.setGridSize) {
-        this.renderer.setStyle(this.el, "width", "");
-        this.renderer.setStyle(this.el, "height", "");
-      }
-      this.setGridSize();
-      this.calculateLayout();
-    }
-  };
-  checkIfToResize() {
-    const clientWidth = this.el.clientWidth;
-    const offsetWidth = this.el.offsetWidth;
-    const scrollWidth = this.el.scrollWidth;
-    const clientHeight = this.el.clientHeight;
-    const offsetHeight = this.el.offsetHeight;
-    const scrollHeight = this.el.scrollHeight;
-    const verticalScrollPresent = clientWidth < offsetWidth && scrollHeight > offsetHeight && scrollHeight - offsetHeight < offsetWidth - clientWidth;
-    const horizontalScrollPresent = clientHeight < offsetHeight && scrollWidth > offsetWidth && scrollWidth - offsetWidth < offsetHeight - clientHeight;
-    if (verticalScrollPresent) {
-      return false;
-    }
-    return !horizontalScrollPresent;
-  }
-  checkIfMobile() {
-    if (this.$options.useBodyForBreakpoint) {
-      return this.$options.mobileBreakpoint > document.body.clientWidth;
-    } else {
-      return this.$options.mobileBreakpoint > this.curWidth;
-    }
-  }
-  setGridSize() {
-    const el = this.el;
-    let width;
-    let height;
-    if (this.$options.setGridSize || this.$options.gridType === GridType.Fit && !this.mobile) {
-      width = el.offsetWidth;
-      height = el.offsetHeight;
-    } else {
-      width = el.clientWidth;
-      height = el.clientHeight;
-    }
-    this.curWidth = width;
-    this.curHeight = height;
-  }
-  setGridDimensions() {
-    this.setGridSize();
-    if (!this.mobile && this.checkIfMobile()) {
-      this.mobile = !this.mobile;
-      this.renderer.addClass(this.el, "mobile");
-    } else if (this.mobile && !this.checkIfMobile()) {
-      this.mobile = !this.mobile;
-      this.renderer.removeClass(this.el, "mobile");
-    }
-    let rows = this.$options.minRows;
-    let columns = this.$options.minCols;
-    let widgetsIndex = this.grid.length - 1;
-    let widget;
-    for (; widgetsIndex >= 0; widgetsIndex--) {
-      widget = this.grid[widgetsIndex];
-      if (!widget.notPlaced) {
-        rows = Math.max(rows, widget.$item.y + widget.$item.rows);
-        columns = Math.max(columns, widget.$item.x + widget.$item.cols);
-      }
-    }
-    rows += this.$options.addEmptyRowsCount;
-    if (this.columns !== columns || this.rows !== rows) {
-      this.columns = columns;
-      this.rows = rows;
-      if (this.options.gridSizeChangedCallback) {
-        this.options.gridSizeChangedCallback(this);
-      }
-    }
-  }
-  calculateLayout() {
-    if (this.compact) {
-      this.compact.checkCompact();
-    }
-    this.setGridDimensions();
-    if (this.$options.outerMargin) {
-      let marginWidth = -this.$options.margin;
-      if (this.$options.outerMarginLeft !== null) {
-        marginWidth += this.$options.outerMarginLeft;
-        this.renderer.setStyle(this.el, "padding-left", this.$options.outerMarginLeft + "px");
-      } else {
-        marginWidth += this.$options.margin;
-        this.renderer.setStyle(this.el, "padding-left", this.$options.margin + "px");
-      }
-      if (this.$options.outerMarginRight !== null) {
-        marginWidth += this.$options.outerMarginRight;
-        this.renderer.setStyle(this.el, "padding-right", this.$options.outerMarginRight + "px");
-      } else {
-        marginWidth += this.$options.margin;
-        this.renderer.setStyle(this.el, "padding-right", this.$options.margin + "px");
-      }
-      this.curColWidth = (this.curWidth - marginWidth) / this.columns;
-      let marginHeight = -this.$options.margin;
-      if (this.$options.outerMarginTop !== null) {
-        marginHeight += this.$options.outerMarginTop;
-        this.renderer.setStyle(this.el, "padding-top", this.$options.outerMarginTop + "px");
-      } else {
-        marginHeight += this.$options.margin;
-        this.renderer.setStyle(this.el, "padding-top", this.$options.margin + "px");
-      }
-      if (this.$options.outerMarginBottom !== null) {
-        marginHeight += this.$options.outerMarginBottom;
-        this.renderer.setStyle(this.el, "padding-bottom", this.$options.outerMarginBottom + "px");
-      } else {
-        marginHeight += this.$options.margin;
-        this.renderer.setStyle(this.el, "padding-bottom", this.$options.margin + "px");
-      }
-      this.curRowHeight = (this.curHeight - marginHeight) / this.rows * this.$options.rowHeightRatio;
-    } else {
-      this.curColWidth = (this.curWidth + this.$options.margin) / this.columns;
-      this.curRowHeight = (this.curHeight + this.$options.margin) / this.rows * this.$options.rowHeightRatio;
-      this.renderer.setStyle(this.el, "padding-left", "0px");
-      this.renderer.setStyle(this.el, "padding-right", "0px");
-      this.renderer.setStyle(this.el, "padding-top", "0px");
-      this.renderer.setStyle(this.el, "padding-bottom", "0px");
-    }
-    this.gridRenderer.updateGridster();
-    if (this.$options.setGridSize) {
-      this.renderer.addClass(this.el, "gridSize");
-      if (!this.mobile) {
-        this.renderer.setStyle(this.el, "width", this.columns * this.curColWidth + this.$options.margin + "px");
-        this.renderer.setStyle(this.el, "height", this.rows * this.curRowHeight + this.$options.margin + "px");
-      }
-    } else {
-      this.renderer.removeClass(this.el, "gridSize");
-      this.renderer.setStyle(this.el, "width", "");
-      this.renderer.setStyle(this.el, "height", "");
-    }
-    this.updateGrid();
-    let widgetsIndex = this.grid.length - 1;
-    let widget;
-    for (; widgetsIndex >= 0; widgetsIndex--) {
-      widget = this.grid[widgetsIndex];
-      widget.setSize();
-      widget.drag.toggle();
-      widget.resize.toggle();
-    }
-    this.resize$.next();
-  }
-  updateGrid() {
-    if (this.$options.displayGrid === "always" && !this.mobile) {
-      this.renderer.addClass(this.el, "display-grid");
-    } else if (this.$options.displayGrid === "onDrag&Resize" && this.dragInProgress) {
-      this.renderer.addClass(this.el, "display-grid");
-    } else if (this.$options.displayGrid === "none" || !this.dragInProgress || this.mobile) {
-      this.renderer.removeClass(this.el, "display-grid");
-    }
-    this.setGridDimensions();
-    this.gridColumns.length = _GridsterComponent.getNewArrayLength(this.columns, this.curWidth, this.curColWidth);
-    this.gridRows.length = _GridsterComponent.getNewArrayLength(this.rows, this.curHeight, this.curRowHeight);
-    this.cdRef.markForCheck();
-  }
-  addItem(itemComponent) {
-    if (itemComponent.$item.cols === void 0) {
-      itemComponent.$item.cols = this.$options.defaultItemCols;
-      itemComponent.item.cols = itemComponent.$item.cols;
-      itemComponent.itemChanged();
-    }
-    if (itemComponent.$item.rows === void 0) {
-      itemComponent.$item.rows = this.$options.defaultItemRows;
-      itemComponent.item.rows = itemComponent.$item.rows;
-      itemComponent.itemChanged();
-    }
-    if (itemComponent.$item.x === -1 || itemComponent.$item.y === -1) {
-      this.autoPositionItem(itemComponent);
-    } else if (this.checkCollision(itemComponent.$item)) {
-      if (!this.$options.disableWarnings) {
-        itemComponent.notPlaced = true;
-        console.warn("Can't be placed in the bounds of the dashboard, trying to auto position!/n" + JSON.stringify(itemComponent.item, ["cols", "rows", "x", "y"]));
-      }
-      if (!this.$options.disableAutoPositionOnConflict) {
-        this.autoPositionItem(itemComponent);
-      } else {
-        itemComponent.notPlaced = true;
-      }
-    }
-    this.grid.push(itemComponent);
-    this.calculateLayout$.next();
-  }
-  removeItem(itemComponent) {
-    this.grid.splice(this.grid.indexOf(itemComponent), 1);
-    this.calculateLayout$.next();
-    if (this.options.itemRemovedCallback) {
-      this.options.itemRemovedCallback(itemComponent.item, itemComponent);
-    }
-    if (this.movingItem && this.movingItem === itemComponent.$item) {
-      this.movingItem = null;
-      this.previewStyle();
-    }
-  }
-  checkCollision(item, checkRatio) {
-    let collision = false;
-    if (this.options.itemValidateCallback) {
-      collision = !this.options.itemValidateCallback(item);
-    }
-    if (!collision && this.checkGridCollision(item, checkRatio)) {
-      collision = true;
-    }
-    if (!collision) {
-      const c = this.findItemWithItem(item);
-      if (c) {
-        collision = c;
-      }
-    }
-    return collision;
-  }
-  checkGridCollision(item, checkRatio = false) {
-    const noNegativePosition = item.y > -1 && item.x > -1;
-    const maxGridCols = item.cols + item.x <= this.$options.maxCols;
-    const maxGridRows = item.rows + item.y <= this.$options.maxRows;
-    const maxItemCols = item.maxItemCols === void 0 ? this.$options.maxItemCols : item.maxItemCols;
-    const minItemCols = item.minItemCols === void 0 ? this.$options.minItemCols : item.minItemCols;
-    const maxItemRows = item.maxItemRows === void 0 ? this.$options.maxItemRows : item.maxItemRows;
-    const minItemRows = item.minItemRows === void 0 ? this.$options.minItemRows : item.minItemRows;
-    const inColsLimits = item.cols <= maxItemCols && item.cols >= minItemCols;
-    const inRowsLimits = item.rows <= maxItemRows && item.rows >= minItemRows;
-    let inRatio = true;
-    if (checkRatio) {
-      const itemAspectRatio = item.itemAspectRatio || this.$options.itemAspectRatio;
-      if (itemAspectRatio) {
-        inRatio = item.cols / item.rows === itemAspectRatio;
-      }
-    }
-    const minAreaLimit = item.minItemArea === void 0 ? this.$options.minItemArea : item.minItemArea;
-    const maxAreaLimit = item.maxItemArea === void 0 ? this.$options.maxItemArea : item.maxItemArea;
-    const area = item.cols * item.rows;
-    const inMinArea = minAreaLimit <= area;
-    const inMaxArea = maxAreaLimit >= area;
-    return !(noNegativePosition && maxGridCols && maxGridRows && inRatio && inColsLimits && inRowsLimits && inMinArea && inMaxArea);
-  }
-  findItemWithItem(item) {
-    let widgetsIndex = 0;
-    let widget;
-    for (; widgetsIndex < this.grid.length; widgetsIndex++) {
-      widget = this.grid[widgetsIndex];
-      if (widget.$item !== item && this.checkCollisionTwoItems(widget.$item, item)) {
-        return widget;
-      }
-    }
-    return false;
-  }
-  findItemsWithItem(item) {
-    const a = [];
-    let widgetsIndex = 0;
-    let widget;
-    for (; widgetsIndex < this.grid.length; widgetsIndex++) {
-      widget = this.grid[widgetsIndex];
-      if (widget.$item !== item && this.checkCollisionTwoItems(widget.$item, item)) {
-        a.push(widget);
-      }
-    }
-    return a;
-  }
-  autoPositionItem(itemComponent) {
-    if (this.getNextPossiblePosition(itemComponent.$item)) {
-      itemComponent.notPlaced = false;
-      itemComponent.item.x = itemComponent.$item.x;
-      itemComponent.item.y = itemComponent.$item.y;
-      itemComponent.itemChanged();
-    } else {
-      itemComponent.notPlaced = true;
-      if (!this.$options.disableWarnings) {
-        console.warn("Can't be placed in the bounds of the dashboard!/n" + JSON.stringify(itemComponent.item, ["cols", "rows", "x", "y"]));
-      }
-    }
-  }
-  getNextPossiblePosition = (newItem, startingFrom = {}) => {
-    if (newItem.cols === -1) {
-      newItem.cols = this.$options.defaultItemCols;
-    }
-    if (newItem.rows === -1) {
-      newItem.rows = this.$options.defaultItemRows;
-    }
-    this.setGridDimensions();
-    let rowsIndex = startingFrom.y || 0;
-    let colsIndex;
-    for (; rowsIndex < this.rows; rowsIndex++) {
-      newItem.y = rowsIndex;
-      colsIndex = startingFrom.x || 0;
-      for (; colsIndex < this.columns; colsIndex++) {
-        newItem.x = colsIndex;
-        if (!this.checkCollision(newItem)) {
-          return true;
-        }
-      }
-    }
-    const canAddToRows = this.$options.maxRows >= this.rows + newItem.rows;
-    const canAddToColumns = this.$options.maxCols >= this.columns + newItem.cols;
-    const addToRows = this.rows <= this.columns && canAddToRows;
-    if (!addToRows && canAddToColumns) {
-      newItem.x = this.columns;
-      newItem.y = 0;
-      return true;
-    } else if (canAddToRows) {
-      newItem.y = this.rows;
-      newItem.x = 0;
-      return true;
-    }
-    return false;
-  };
-  getFirstPossiblePosition = (item) => {
-    const tmpItem = Object.assign({}, item);
-    this.getNextPossiblePosition(tmpItem);
-    return tmpItem;
-  };
-  getLastPossiblePosition = (item) => {
-    let farthestItem = { y: 0, x: 0 };
-    farthestItem = this.grid.reduce((prev, curr) => {
-      const currCoords = {
-        y: curr.$item.y + curr.$item.rows - 1,
-        x: curr.$item.x + curr.$item.cols - 1
-      };
-      if (GridsterUtils.compareItems(prev, currCoords) === 1) {
-        return currCoords;
-      } else {
-        return prev;
-      }
-    }, farthestItem);
-    const tmpItem = Object.assign({}, item);
-    this.getNextPossiblePosition(tmpItem, farthestItem);
-    return tmpItem;
-  };
-  pixelsToPositionX(x, roundingMethod, noLimit) {
-    const position = roundingMethod(x / this.curColWidth);
-    if (noLimit) {
-      return position;
-    } else {
-      return Math.max(position, 0);
-    }
-  }
-  pixelsToPositionY(y, roundingMethod, noLimit) {
-    const position = roundingMethod(y / this.curRowHeight);
-    if (noLimit) {
-      return position;
-    } else {
-      return Math.max(position, 0);
-    }
-  }
-  positionXToPixels(x) {
-    return x * this.curColWidth;
-  }
-  positionYToPixels(y) {
-    return y * this.curRowHeight;
-  }
-  getItemComponent(item) {
-    return this.grid.find((c) => c.item === item);
-  }
-  // ------ Functions for swapWhileDragging option
-  // identical to checkCollision() except that this function calls findItemWithItemForSwaping() instead of findItemWithItem()
-  checkCollisionForSwaping(item) {
-    let collision = false;
-    if (this.options.itemValidateCallback) {
-      collision = !this.options.itemValidateCallback(item);
-    }
-    if (!collision && this.checkGridCollision(item)) {
-      collision = true;
-    }
-    if (!collision) {
-      const c = this.findItemWithItemForSwapping(item);
-      if (c) {
-        collision = c;
-      }
-    }
-    return collision;
-  }
-  // identical to findItemWithItem() except that this function calls checkCollisionTwoItemsForSwaping() instead of checkCollisionTwoItems()
-  findItemWithItemForSwapping(item) {
-    let widgetsIndex = this.grid.length - 1;
-    let widget;
-    for (; widgetsIndex > -1; widgetsIndex--) {
-      widget = this.grid[widgetsIndex];
-      if (widget.$item !== item && _GridsterComponent.checkCollisionTwoItemsForSwaping(widget.$item, item)) {
-        return widget;
-      }
-    }
-    return false;
-  }
-  previewStyle(drag = false) {
-    const preview = this.gridsterPreview();
-    if (this.movingItem) {
-      if (this.compact && drag) {
-        this.compact.checkCompactItem(this.movingItem);
-      }
-      preview.previewStyle(this.movingItem);
-    } else {
-      preview.previewStyle(null);
-    }
-  }
-  // ------ End of functions for swapWhileDragging option
-  // eslint-disable-next-line @typescript-eslint/member-ordering
-  static getNewArrayLength(length, overallSize, size) {
-    const newLength = Math.max(length, Math.floor(overallSize / size));
-    if (newLength < 0) {
-      return 0;
-    }
-    if (Number.isFinite(newLength)) {
-      return Math.floor(newLength);
-    }
-    return 0;
-  }
-  static \u0275fac = \u0275\u0275ngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: core_exports, type: _GridsterComponent, deps: [{ token: ElementRef }, { token: Renderer2 }, { token: ChangeDetectorRef }, { token: NgZone }], target: FactoryTarget.Component });
-  static \u0275cmp = \u0275\u0275ngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: _GridsterComponent, isStandalone: true, selector: "gridster", inputs: { options: "options" }, viewQueries: [{ propertyName: "gridsterPreview", first: true, predicate: GridsterPreviewComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: core_exports, template: '@for (column of gridColumns; track i; let i = $index) {\n<div\n  class="gridster-column"\n  [ngStyle]="gridRenderer.getGridColumnStyle(i)"\n></div>\n} @for (row of gridRows; track i; let i = $index) {\n<div class="gridster-row" [ngStyle]="gridRenderer.getGridRowStyle(i)"></div>\n}\n<ng-content></ng-content>\n<gridster-preview\n  [gridRenderer]="gridRenderer"\n  class="gridster-preview"\n></gridster-preview>\n', styles: ["gridster{position:relative;box-sizing:border-box;background:gray;width:100%;height:100%;-webkit-user-select:none;user-select:none;display:block}gridster.fit{overflow-x:hidden;overflow-y:hidden}gridster.scrollVertical{overflow-x:hidden;overflow-y:auto}gridster.scrollHorizontal{overflow-x:auto;overflow-y:hidden}gridster.fixed{overflow:auto}gridster.mobile{overflow-x:hidden;overflow-y:auto}gridster.mobile gridster-item{position:relative}gridster.gridSize{height:initial;width:initial}gridster.gridSize.fit{height:100%;width:100%}gridster .gridster-column,gridster .gridster-row{position:absolute;display:none;transition:.3s;box-sizing:border-box}gridster.display-grid .gridster-column,gridster.display-grid .gridster-row{display:block}gridster .gridster-column{border-left:1px solid white;border-right:1px solid white}gridster .gridster-row{border-top:1px solid white;border-bottom:1px solid white}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: GridsterPreviewComponent, selector: "gridster-preview", inputs: ["gridRenderer"] }], encapsulation: ViewEncapsulation.None });
-};
-\u0275\u0275ngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: core_exports, type: GridsterComponent, decorators: [{
-  type: Component,
-  args: [{ selector: "gridster", encapsulation: ViewEncapsulation.None, imports: [NgStyle, GridsterPreviewComponent], template: '@for (column of gridColumns; track i; let i = $index) {\n<div\n  class="gridster-column"\n  [ngStyle]="gridRenderer.getGridColumnStyle(i)"\n></div>\n} @for (row of gridRows; track i; let i = $index) {\n<div class="gridster-row" [ngStyle]="gridRenderer.getGridRowStyle(i)"></div>\n}\n<ng-content></ng-content>\n<gridster-preview\n  [gridRenderer]="gridRenderer"\n  class="gridster-preview"\n></gridster-preview>\n', styles: ["gridster{position:relative;box-sizing:border-box;background:gray;width:100%;height:100%;-webkit-user-select:none;user-select:none;display:block}gridster.fit{overflow-x:hidden;overflow-y:hidden}gridster.scrollVertical{overflow-x:hidden;overflow-y:auto}gridster.scrollHorizontal{overflow-x:auto;overflow-y:hidden}gridster.fixed{overflow:auto}gridster.mobile{overflow-x:hidden;overflow-y:auto}gridster.mobile gridster-item{position:relative}gridster.gridSize{height:initial;width:initial}gridster.gridSize.fit{height:100%;width:100%}gridster .gridster-column,gridster .gridster-row{position:absolute;display:none;transition:.3s;box-sizing:border-box}gridster.display-grid .gridster-column,gridster.display-grid .gridster-row{display:block}gridster .gridster-column{border-left:1px solid white;border-right:1px solid white}gridster .gridster-row{border-top:1px solid white;border-bottom:1px solid white}\n"] }]
-}], ctorParameters: () => [{ type: ElementRef, decorators: [{
-  type: Inject,
-  args: [ElementRef]
-}] }, { type: Renderer2, decorators: [{
-  type: Inject,
-  args: [Renderer2]
-}] }, { type: ChangeDetectorRef, decorators: [{
-  type: Inject,
-  args: [ChangeDetectorRef]
-}] }, { type: NgZone, decorators: [{
-  type: Inject,
-  args: [NgZone]
-}] }], propDecorators: { gridsterPreview: [{ type: ViewChild, args: [forwardRef(() => GridsterPreviewComponent), { isSignal: true }] }], options: [{
-  type: Input
-}] } });
-var GridsterPush = class {
-  fromSouth;
-  fromNorth;
-  fromEast;
-  fromWest;
-  pushedItems;
-  pushedItemsTemp;
-  pushedItemsTempPath;
-  pushedItemsPath;
-  gridsterItem;
-  gridster;
-  pushedItemsOrder;
-  tryPattern;
-  iteration = 0;
-  constructor(gridsterItem) {
-    this.pushedItems = [];
-    this.pushedItemsTemp = [];
-    this.pushedItemsTempPath = [];
-    this.pushedItemsPath = [];
-    this.gridsterItem = gridsterItem;
-    this.gridster = gridsterItem.gridster;
-    this.tryPattern = {
-      fromEast: [this.tryWest, this.trySouth, this.tryNorth, this.tryEast],
-      fromWest: [this.tryEast, this.trySouth, this.tryNorth, this.tryWest],
-      fromNorth: [this.trySouth, this.tryEast, this.tryWest, this.tryNorth],
-      fromSouth: [this.tryNorth, this.tryEast, this.tryWest, this.trySouth]
-    };
-    this.fromSouth = "fromSouth";
-    this.fromNorth = "fromNorth";
-    this.fromEast = "fromEast";
-    this.fromWest = "fromWest";
-  }
-  destroy() {
-    this.gridster = this.gridsterItem = null;
-  }
-  pushItems(direction, disable) {
-    if (this.gridster.$options.pushItems && !disable) {
-      this.pushedItemsOrder = [];
-      this.iteration = 0;
-      const pushed = this.push(this.gridsterItem, direction);
-      if (!pushed) {
-        this.restoreTempItems();
-      }
-      this.pushedItemsOrder = [];
-      this.pushedItemsTemp = [];
-      this.pushedItemsTempPath = [];
-      return pushed;
-    } else {
-      return false;
-    }
-  }
-  restoreTempItems() {
-    let i = this.pushedItemsTemp.length - 1;
-    for (; i > -1; i--) {
-      this.removeFromTempPushed(this.pushedItemsTemp[i]);
-    }
-  }
-  restoreItems() {
-    let i = 0;
-    const l = this.pushedItems.length;
-    let pushedItem;
-    for (; i < l; i++) {
-      pushedItem = this.pushedItems[i];
-      pushedItem.$item.x = pushedItem.item.x || 0;
-      pushedItem.$item.y = pushedItem.item.y || 0;
-      pushedItem.setSize();
-    }
-    this.pushedItems = [];
-    this.pushedItemsPath = [];
-  }
-  setPushedItems() {
-    let i = 0;
-    const l = this.pushedItems.length;
-    let pushedItem;
-    for (; i < l; i++) {
-      pushedItem = this.pushedItems[i];
-      pushedItem.checkItemChanges(pushedItem.$item, pushedItem.item);
-    }
-    this.pushedItems = [];
-    this.pushedItemsPath = [];
-  }
-  checkPushBack() {
-    let i = this.pushedItems.length - 1;
-    let change = false;
-    for (; i > -1; i--) {
-      if (this.checkPushedItem(this.pushedItems[i], i)) {
-        change = true;
-      }
-    }
-    if (change) {
-      this.checkPushBack();
-    }
-  }
-  push(gridsterItem, direction) {
-    if (this.iteration > 100) {
-      console.warn("max iteration reached");
-      return false;
-    }
-    if (this.gridster.checkGridCollision(gridsterItem.$item)) {
-      return false;
-    }
-    if (direction === "") {
-      return false;
-    }
-    const conflicts = this.gridster.findItemsWithItem(gridsterItem.$item);
-    const invert = direction === this.fromNorth || direction === this.fromWest;
-    conflicts.sort((a, b) => {
-      if (invert) {
-        return b.$item.y - a.$item.y || b.$item.x - a.$item.x;
-      } else {
-        return a.$item.y - b.$item.y || a.$item.x - b.$item.x;
-      }
-    });
-    let i = 0;
-    let itemCollision;
-    let makePush = true;
-    const pushedItems = [];
-    for (; i < conflicts.length; i++) {
-      itemCollision = conflicts[i];
-      if (itemCollision === this.gridsterItem) {
-        continue;
-      }
-      if (!itemCollision.canBeDragged()) {
-        makePush = false;
-        break;
-      }
-      const p = this.pushedItemsTemp.indexOf(itemCollision);
-      if (p > -1 && this.pushedItemsTempPath[p].length > 10) {
-        makePush = false;
-        break;
-      }
-      if (this.tryPattern[direction][0].call(this, itemCollision, gridsterItem)) {
-        this.pushedItemsOrder.push(itemCollision);
-        pushedItems.push(itemCollision);
-      } else if (this.tryPattern[direction][1].call(this, itemCollision, gridsterItem)) {
-        this.pushedItemsOrder.push(itemCollision);
-        pushedItems.push(itemCollision);
-      } else if (this.tryPattern[direction][2].call(this, itemCollision, gridsterItem)) {
-        this.pushedItemsOrder.push(itemCollision);
-        pushedItems.push(itemCollision);
-      } else if (this.tryPattern[direction][3].call(this, itemCollision, gridsterItem)) {
-        this.pushedItemsOrder.push(itemCollision);
-        pushedItems.push(itemCollision);
-      } else {
-        makePush = false;
-        break;
-      }
-    }
-    if (!makePush) {
-      i = this.pushedItemsOrder.lastIndexOf(pushedItems[0]);
-      if (i > -1) {
-        let j = this.pushedItemsOrder.length - 1;
-        for (; j >= i; j--) {
-          itemCollision = this.pushedItemsOrder[j];
-          this.pushedItemsOrder.pop();
-          this.removeFromTempPushed(itemCollision);
-          this.removeFromPushedItem(itemCollision);
-        }
-      }
-    }
-    this.iteration++;
-    return makePush;
-  }
-  trySouth(gridsterItemCollide, gridsterItem) {
-    if (!this.gridster.$options.pushDirections.south) {
-      return false;
-    }
-    this.addToTempPushed(gridsterItemCollide);
-    gridsterItemCollide.$item.y = gridsterItem.$item.y + gridsterItem.$item.rows;
-    if (this.push(gridsterItemCollide, this.fromNorth)) {
-      gridsterItemCollide.setSize();
-      this.addToPushed(gridsterItemCollide);
-      return true;
-    } else {
-      this.removeFromTempPushed(gridsterItemCollide);
-    }
-    return false;
-  }
-  tryNorth(gridsterItemCollide, gridsterItem) {
-    if (!this.gridster.$options.pushDirections.north) {
-      return false;
-    }
-    this.addToTempPushed(gridsterItemCollide);
-    gridsterItemCollide.$item.y = gridsterItem.$item.y - gridsterItemCollide.$item.rows;
-    if (this.push(gridsterItemCollide, this.fromSouth)) {
-      gridsterItemCollide.setSize();
-      this.addToPushed(gridsterItemCollide);
-      return true;
-    } else {
-      this.removeFromTempPushed(gridsterItemCollide);
-    }
-    return false;
-  }
-  tryEast(gridsterItemCollide, gridsterItem) {
-    if (!this.gridster.$options.pushDirections.east) {
-      return false;
-    }
-    this.addToTempPushed(gridsterItemCollide);
-    gridsterItemCollide.$item.x = gridsterItem.$item.x + gridsterItem.$item.cols;
-    if (this.push(gridsterItemCollide, this.fromWest)) {
-      gridsterItemCollide.setSize();
-      this.addToPushed(gridsterItemCollide);
-      return true;
-    } else {
-      this.removeFromTempPushed(gridsterItemCollide);
-    }
-    return false;
-  }
-  tryWest(gridsterItemCollide, gridsterItem) {
-    if (!this.gridster.$options.pushDirections.west) {
-      return false;
-    }
-    this.addToTempPushed(gridsterItemCollide);
-    gridsterItemCollide.$item.x = gridsterItem.$item.x - gridsterItemCollide.$item.cols;
-    if (this.push(gridsterItemCollide, this.fromEast)) {
-      gridsterItemCollide.setSize();
-      this.addToPushed(gridsterItemCollide);
-      return true;
-    } else {
-      this.removeFromTempPushed(gridsterItemCollide);
-    }
-    return false;
-  }
-  addToTempPushed(gridsterItem) {
-    let i = this.pushedItemsTemp.indexOf(gridsterItem);
-    if (i === -1) {
-      i = this.pushedItemsTemp.push(gridsterItem) - 1;
-      this.pushedItemsTempPath[i] = [];
-    }
-    this.pushedItemsTempPath[i].push({
-      x: gridsterItem.$item.x,
-      y: gridsterItem.$item.y
-    });
-  }
-  removeFromTempPushed(gridsterItem) {
-    const i = this.pushedItemsTemp.indexOf(gridsterItem);
-    const tempPosition = this.pushedItemsTempPath[i].pop();
-    if (!tempPosition) {
-      return;
-    }
-    gridsterItem.$item.x = tempPosition.x;
-    gridsterItem.$item.y = tempPosition.y;
-    gridsterItem.setSize();
-    if (!this.pushedItemsTempPath[i].length) {
-      this.pushedItemsTemp.splice(i, 1);
-      this.pushedItemsTempPath.splice(i, 1);
-    }
-  }
-  addToPushed(gridsterItem) {
-    if (this.pushedItems.indexOf(gridsterItem) < 0) {
-      this.pushedItems.push(gridsterItem);
-      this.pushedItemsPath.push([
-        { x: gridsterItem.item.x || 0, y: gridsterItem.item.y || 0 },
-        { x: gridsterItem.$item.x, y: gridsterItem.$item.y }
-      ]);
-    } else {
-      const i = this.pushedItems.indexOf(gridsterItem);
-      this.pushedItemsPath[i].push({
-        x: gridsterItem.$item.x,
-        y: gridsterItem.$item.y
-      });
-    }
-  }
-  removeFromPushed(i) {
-    if (i > -1) {
-      this.pushedItems.splice(i, 1);
-      this.pushedItemsPath.splice(i, 1);
-    }
-  }
-  removeFromPushedItem(gridsterItem) {
-    const i = this.pushedItems.indexOf(gridsterItem);
-    if (i > -1) {
-      this.pushedItemsPath[i].pop();
-      if (!this.pushedItemsPath.length) {
-        this.pushedItems.splice(i, 1);
-        this.pushedItemsPath.splice(i, 1);
-      }
-    }
-  }
-  checkPushedItem(pushedItem, i) {
-    const path = this.pushedItemsPath[i];
-    let j = path.length - 2;
-    let lastPosition;
-    let x;
-    let y;
-    let change = false;
-    for (; j > -1; j--) {
-      lastPosition = path[j];
-      x = pushedItem.$item.x;
-      y = pushedItem.$item.y;
-      pushedItem.$item.x = lastPosition.x;
-      pushedItem.$item.y = lastPosition.y;
-      if (!this.gridster.findItemWithItem(pushedItem.$item)) {
-        pushedItem.setSize();
-        path.splice(j + 1, path.length - j - 1);
-        change = true;
-      } else {
-        pushedItem.$item.x = x;
-        pushedItem.$item.y = y;
-      }
-    }
-    if (path.length < 2) {
-      this.removeFromPushed(i);
-    }
-    return change;
-  }
-};
-var scrollSensitivity;
-var scrollSpeed;
-var intervalDuration = 50;
-var gridsterElement;
-var resizeEvent;
-var resizeEventType;
-var intervalE;
-var intervalW;
-var intervalN;
-var intervalS;
-function scroll(gridster, left, top, width, height, event, lastMouse, calculateItemPosition, resize, resizeEventScrollType) {
-  scrollSensitivity = gridster.$options.scrollSensitivity;
-  scrollSpeed = gridster.$options.scrollSpeed;
-  gridsterElement = gridster.el;
-  resizeEvent = resize;
-  resizeEventType = resizeEventScrollType;
-  const offsetWidth = gridsterElement.offsetWidth;
-  const offsetHeight = gridsterElement.offsetHeight;
-  const offsetLeft = gridsterElement.scrollLeft;
-  const offsetTop = gridsterElement.scrollTop;
-  const elemTopOffset = top - offsetTop;
-  const elemBottomOffset = offsetHeight + offsetTop - top - height;
-  const { clientX, clientY } = event;
-  if (!gridster.$options.disableScrollVertical) {
-    if (lastMouse.clientY < clientY && elemBottomOffset < scrollSensitivity) {
-      cancelN();
-      if (resizeEvent && resizeEventType && !resizeEventType.south || intervalS) {
-        return;
-      }
-      intervalS = startVertical(1, calculateItemPosition, lastMouse);
-    } else if (lastMouse.clientY > clientY && offsetTop > 0 && elemTopOffset < scrollSensitivity) {
-      cancelS();
-      if (resizeEvent && resizeEventType && !resizeEventType.north || intervalN) {
-        return;
-      }
-      intervalN = startVertical(-1, calculateItemPosition, lastMouse);
-    } else if (lastMouse.clientY !== clientY) {
-      cancelVertical();
-    }
-  }
-  const elemRightOffset = offsetLeft + offsetWidth - left - width;
-  const elemLeftOffset = left - offsetLeft;
-  if (!gridster.$options.disableScrollHorizontal) {
-    const isRTL = gridster.$options.dirType === DirTypes.RTL;
-    const moveRight = lastMouse.clientX < clientX;
-    const moveLeft = lastMouse.clientX > clientX;
-    const shouldScrollRight = isRTL ? moveLeft : moveRight;
-    const shouldScrollLeft = isRTL ? moveRight : moveLeft;
-    if (shouldScrollRight && elemRightOffset <= scrollSensitivity) {
-      cancelW();
-      if (resizeEvent && resizeEventType && !resizeEventType.east || intervalE)
-        return;
-      intervalE = startHorizontal(1, calculateItemPosition, lastMouse, isRTL);
-    } else if (shouldScrollLeft && offsetLeft > 0 && elemLeftOffset < scrollSensitivity) {
-      cancelE();
-      if (resizeEvent && resizeEventType && !resizeEventType.west || intervalW)
-        return;
-      intervalW = startHorizontal(-1, calculateItemPosition, lastMouse, isRTL);
-    } else if (lastMouse.clientX !== clientX) {
-      cancelHorizontal();
-    }
-  }
-}
-function startVertical(sign, calculateItemPosition, lastMouse) {
-  let clientY = lastMouse.clientY;
-  return window.setInterval(() => {
-    if (!gridsterElement || sign === -1 && gridsterElement.scrollTop - scrollSpeed < 0) {
-      cancelVertical();
-    }
-    gridsterElement.scrollTop += sign * scrollSpeed;
-    clientY += sign * scrollSpeed;
-    calculateItemPosition({ clientX: lastMouse.clientX, clientY });
-  }, intervalDuration);
-}
-function startHorizontal(sign, calculateItemPosition, lastMouse, isRTL) {
-  let clientX = lastMouse.clientX;
-  return window.setInterval(() => {
-    if (!gridsterElement) {
-      cancelHorizontal();
-      return;
-    }
-    const scrollAmount = sign * scrollSpeed;
-    const left = isRTL ? -scrollAmount : scrollAmount;
-    gridsterElement.scrollBy({ left, behavior: "auto" });
-    clientX += left;
-    calculateItemPosition({ clientX, clientY: lastMouse.clientY });
-  }, intervalDuration);
-}
-function cancelScroll() {
-  cancelHorizontal();
-  cancelVertical();
-  gridsterElement = null;
-}
-function cancelHorizontal() {
-  cancelE();
-  cancelW();
-}
-function cancelVertical() {
-  cancelN();
-  cancelS();
-}
-function cancelE() {
-  if (intervalE) {
-    clearInterval(intervalE);
-    intervalE = 0;
-  }
-}
-function cancelW() {
-  if (intervalW) {
-    clearInterval(intervalW);
-    intervalW = 0;
-  }
-}
-function cancelS() {
-  if (intervalS) {
-    clearInterval(intervalS);
-    intervalS = 0;
-  }
-}
-function cancelN() {
-  if (intervalN) {
-    clearInterval(intervalN);
-    intervalN = 0;
-  }
-}
-var GridsterSwap = class {
-  swapedItem;
-  gridsterItem;
-  gridster;
-  constructor(gridsterItem) {
-    this.gridsterItem = gridsterItem;
-    this.gridster = gridsterItem.gridster;
-  }
-  destroy() {
-    this.gridster = this.gridsterItem = this.swapedItem = null;
-  }
-  swapItems() {
-    if (this.gridster.$options.swap) {
-      this.checkSwapBack();
-      this.checkSwap(this.gridsterItem);
-    }
-  }
-  checkSwapBack() {
-    if (this.swapedItem) {
-      const x = this.swapedItem.$item.x;
-      const y = this.swapedItem.$item.y;
-      this.swapedItem.$item.x = this.swapedItem.item.x || 0;
-      this.swapedItem.$item.y = this.swapedItem.item.y || 0;
-      if (this.gridster.checkCollision(this.swapedItem.$item)) {
-        this.swapedItem.$item.x = x;
-        this.swapedItem.$item.y = y;
-      } else {
-        this.swapedItem.setSize();
-        this.gridsterItem.$item.x = this.gridsterItem.item.x || 0;
-        this.gridsterItem.$item.y = this.gridsterItem.item.y || 0;
-        this.swapedItem = void 0;
-      }
-    }
-  }
-  restoreSwapItem() {
-    if (this.swapedItem) {
-      this.swapedItem.$item.x = this.swapedItem.item.x || 0;
-      this.swapedItem.$item.y = this.swapedItem.item.y || 0;
-      this.swapedItem.setSize();
-      this.swapedItem = void 0;
-    }
-  }
-  setSwapItem() {
-    if (this.swapedItem) {
-      this.swapedItem.checkItemChanges(this.swapedItem.$item, this.swapedItem.item);
-      this.swapedItem = void 0;
-    }
-  }
-  checkSwap(pushedBy) {
-    let gridsterItemCollision;
-    if (this.gridster.$options.swapWhileDragging) {
-      gridsterItemCollision = this.gridster.checkCollisionForSwaping(pushedBy.$item);
-    } else {
-      gridsterItemCollision = this.gridster.checkCollision(pushedBy.$item);
-    }
-    if (gridsterItemCollision && gridsterItemCollision !== true && gridsterItemCollision.canBeDragged()) {
-      const gridsterItemCollide = gridsterItemCollision;
-      const copyCollisionX = gridsterItemCollide.$item.x;
-      const copyCollisionY = gridsterItemCollide.$item.y;
-      const copyX = pushedBy.$item.x;
-      const copyY = pushedBy.$item.y;
-      const diffX = copyX - copyCollisionX;
-      const diffY = copyY - copyCollisionY;
-      gridsterItemCollide.$item.x = pushedBy.item.x - diffX;
-      gridsterItemCollide.$item.y = pushedBy.item.y - diffY;
-      pushedBy.$item.x = gridsterItemCollide.item.x + diffX;
-      pushedBy.$item.y = gridsterItemCollide.item.y + diffY;
-      if (this.gridster.checkCollision(gridsterItemCollide.$item) || this.gridster.checkCollision(pushedBy.$item)) {
-        pushedBy.$item.x = copyX;
-        pushedBy.$item.y = copyY;
-        gridsterItemCollide.$item.x = copyCollisionX;
-        gridsterItemCollide.$item.y = copyCollisionY;
-      } else {
-        gridsterItemCollide.setSize();
-        this.swapedItem = gridsterItemCollide;
-        if (this.gridster.$options.swapWhileDragging) {
-          this.gridsterItem.checkItemChanges(this.gridsterItem.$item, this.gridsterItem.item);
-          this.setSwapItem();
-        }
-      }
-    }
-  }
-};
-var GRIDSTER_ITEM_RESIZABLE_HANDLER_CLASS = "gridster-item-resizable-handler";
-var Direction;
-(function(Direction2) {
-  Direction2["UP"] = "UP";
-  Direction2["DOWN"] = "DOWN";
-  Direction2["LEFT"] = "LEFT";
-  Direction2["RIGHT"] = "RIGHT";
-})(Direction || (Direction = {}));
-var GridsterDraggable = class {
-  zone;
-  gridsterItem;
-  gridster;
-  lastMouse;
-  offsetLeft;
-  offsetTop;
-  margin;
-  outerMarginTop;
-  outerMarginRight;
-  outerMarginBottom;
-  outerMarginLeft;
-  diffTop;
-  diffLeft;
-  originalClientX;
-  originalClientY;
-  top;
-  left;
-  height;
-  width;
-  positionX;
-  positionY;
-  positionXBackup;
-  positionYBackup;
-  enabled;
-  mousemove;
-  mouseup;
-  mouseleave;
-  cancelOnBlur;
-  touchmove;
-  touchend;
-  touchcancel;
-  mousedown;
-  touchstart;
-  push;
-  swap;
-  path;
-  collision = false;
-  constructor(gridsterItem, gridster, zone) {
-    this.zone = zone;
-    this.gridsterItem = gridsterItem;
-    this.gridster = gridster;
-    this.lastMouse = {
-      clientX: 0,
-      clientY: 0
-    };
-    this.path = [];
-  }
-  destroy() {
-    if (this.gridster.previewStyle) {
-      this.gridster.previewStyle(true);
-    }
-    this.gridsterItem = this.gridster = this.collision = null;
-    if (this.mousedown) {
-      this.mousedown();
-      this.touchstart();
-    }
-  }
-  dragStart(e) {
-    if (e.which && e.which !== 1 || this.gridster.dragInProgress) {
-      return;
-    }
-    if (this.gridster.options.draggable && this.gridster.options.draggable.start) {
-      this.gridster.options.draggable.start(this.gridsterItem.item, this.gridsterItem, e);
-    }
-    e.stopPropagation();
-    e.preventDefault();
-    this.zone.runOutsideAngular(() => {
-      this.mousemove = this.gridsterItem.renderer.listen("document", "mousemove", this.dragMove);
-      this.touchmove = this.gridster.renderer.listen(this.gridster.el, "touchmove", this.dragMove);
-    });
-    this.mouseup = this.gridsterItem.renderer.listen("document", "mouseup", this.dragStop);
-    this.mouseleave = this.gridsterItem.renderer.listen("document", "mouseleave", this.dragStop);
-    this.cancelOnBlur = this.gridsterItem.renderer.listen("window", "blur", this.dragStop);
-    this.touchend = this.gridsterItem.renderer.listen("document", "touchend", this.dragStop);
-    this.touchcancel = this.gridsterItem.renderer.listen("document", "touchcancel", this.dragStop);
-    this.gridsterItem.renderer.addClass(this.gridsterItem.el, "gridster-item-moving");
-    this.margin = this.gridster.$options.margin;
-    this.outerMarginTop = this.gridster.$options.outerMarginTop;
-    this.outerMarginRight = this.gridster.$options.outerMarginRight;
-    this.outerMarginBottom = this.gridster.$options.outerMarginBottom;
-    this.outerMarginLeft = this.gridster.$options.outerMarginLeft;
-    this.offsetLeft = this.gridster.el.scrollLeft - this.gridster.el.offsetLeft;
-    this.offsetTop = this.gridster.el.scrollTop - this.gridster.el.offsetTop;
-    this.left = this.gridsterItem.left - this.margin;
-    this.top = this.gridsterItem.top - this.margin;
-    this.originalClientX = e.clientX;
-    this.originalClientY = e.clientY;
-    this.width = this.gridsterItem.width;
-    this.height = this.gridsterItem.height;
-    if (this.gridster.$options.dirType === DirTypes.RTL) {
-      this.diffLeft = e.clientX - this.gridster.el.scrollWidth + this.gridsterItem.left;
-    } else {
-      this.diffLeft = e.clientX + this.offsetLeft - this.margin - this.left;
-    }
-    this.diffTop = e.clientY + this.offsetTop - this.margin - this.top;
-    this.gridster.movingItem = this.gridsterItem.$item;
-    this.gridster.previewStyle(true);
-    this.push = new GridsterPush(this.gridsterItem);
-    this.swap = new GridsterSwap(this.gridsterItem);
-    this.gridster.dragInProgress = true;
-    this.gridster.updateGrid();
-    this.path.push({
-      x: this.gridsterItem.item.x || 0,
-      y: this.gridsterItem.item.y || 0
-    });
-  }
-  dragMove = (e) => {
-    e.stopPropagation();
-    e.preventDefault();
-    GridsterUtils.checkTouchEvent(e);
-    let directions = this.getDirections(e);
-    if (this.gridster.options.enableBoundaryControl) {
-      if (directions.includes(Direction.UP) && this.gridsterItem.el.getBoundingClientRect().top < this.gridster.el.getBoundingClientRect().top + (this.outerMarginTop ?? this.margin)) {
-        directions = directions.filter((direction) => direction != Direction.UP);
-        e = new MouseEvent(e.type, {
-          clientX: e.clientX,
-          clientY: this.lastMouse.clientY
-        });
-      }
-      if (directions.includes(Direction.LEFT) && this.gridsterItem.el.getBoundingClientRect().left < this.gridster.el.getBoundingClientRect().left + (this.outerMarginLeft ?? this.margin)) {
-        directions = directions.filter((direction) => direction != Direction.LEFT);
-        e = new MouseEvent(e.type, {
-          clientX: this.lastMouse.clientX,
-          clientY: e.clientY
-        });
-      }
-      if (directions.includes(Direction.RIGHT) && this.gridsterItem.el.getBoundingClientRect().right > this.gridster.el.getBoundingClientRect().right - (this.outerMarginRight ?? this.margin)) {
-        directions = directions.filter((direction) => direction != Direction.RIGHT);
-        e = new MouseEvent(e.type, {
-          clientX: this.lastMouse.clientX,
-          clientY: e.clientY
-        });
-      }
-      if (directions.includes(Direction.DOWN) && this.gridsterItem.el.getBoundingClientRect().bottom > this.gridster.el.getBoundingClientRect().bottom - (this.outerMarginBottom ?? this.margin)) {
-        directions = directions.filter((direction) => direction != Direction.DOWN);
-        e = new MouseEvent(e.type, {
-          clientX: e.clientX,
-          clientY: this.lastMouse.clientY
-        });
-      }
-    }
-    if (directions.length) {
-      this.offsetLeft = this.gridster.el.scrollLeft - this.gridster.el.offsetLeft;
-      this.offsetTop = this.gridster.el.scrollTop - this.gridster.el.offsetTop;
-      scroll(this.gridster, this.left, this.top, this.width, this.height, e, this.lastMouse, this.calculateItemPositionFromMousePosition);
-      this.calculateItemPositionFromMousePosition(e);
-    }
-  };
-  calculateItemPositionFromMousePosition = (e) => {
-    if (this.gridster.options.scale) {
-      this.calculateItemPositionWithScale(e, this.gridster.options.scale);
-    } else {
-      this.calculateItemPositionWithoutScale(e);
-    }
-    this.calculateItemPosition();
-    this.lastMouse.clientX = e.clientX;
-    this.lastMouse.clientY = e.clientY;
-    this.zone.run(() => {
-      this.gridster.updateGrid();
-    });
-  };
-  calculateItemPositionWithScale(e, scale) {
-    if (this.gridster.$options.dirType === DirTypes.RTL) {
-      this.left = this.gridster.el.scrollWidth - this.originalClientX + (e.clientX - this.originalClientX) / scale + this.diffLeft;
-    } else {
-      this.left = this.originalClientX + (e.clientX - this.originalClientX) / scale + this.offsetLeft - this.diffLeft;
-    }
-    this.top = this.originalClientY + (e.clientY - this.originalClientY) / scale + this.offsetTop - this.diffTop;
-  }
-  calculateItemPositionWithoutScale(e) {
-    const isRTL = this.gridster.$options.dirType === DirTypes.RTL;
-    if (isRTL) {
-      this.left = this.gridster.el.offsetWidth - (e.clientX + this.offsetLeft - this.diffLeft);
-    } else {
-      this.left = e.clientX + this.offsetLeft - this.diffLeft;
-    }
-    this.top = e.clientY + this.offsetTop - this.diffTop;
-  }
-  dragStop = (e) => {
-    e.stopPropagation();
-    e.preventDefault();
-    cancelScroll();
-    this.cancelOnBlur();
-    this.mousemove();
-    this.mouseup();
-    this.mouseleave();
-    this.touchmove();
-    this.touchend();
-    this.touchcancel();
-    this.gridsterItem.renderer.removeClass(this.gridsterItem.el, "gridster-item-moving");
-    this.gridster.dragInProgress = false;
-    this.gridster.updateGrid();
-    this.path = [];
-    if (this.gridster.options.draggable && this.gridster.options.draggable.stop) {
-      Promise.resolve(this.gridster.options.draggable.stop(this.gridsterItem.item, this.gridsterItem, e)).then(this.makeDrag, this.cancelDrag);
-    } else {
-      this.makeDrag();
-    }
-    setTimeout(() => {
-      if (this.gridster) {
-        this.gridster.movingItem = null;
-        this.gridster.previewStyle(true);
-      }
-    });
-  };
-  cancelDrag = () => {
-    this.gridsterItem.$item.x = this.gridsterItem.item.x || 0;
-    this.gridsterItem.$item.y = this.gridsterItem.item.y || 0;
-    this.gridsterItem.setSize();
-    if (this.push) {
-      this.push.restoreItems();
-    }
-    if (this.swap) {
-      this.swap.restoreSwapItem();
-    }
-    if (this.push) {
-      this.push.destroy();
-      this.push = null;
-    }
-    if (this.swap) {
-      this.swap.destroy();
-      this.swap = null;
-    }
-  };
-  makeDrag = () => {
-    if (this.gridster.$options.draggable.dropOverItems && this.gridster.options.draggable && this.gridster.options.draggable.dropOverItemsCallback && this.collision && this.collision !== true && this.collision.$item) {
-      this.gridster.options.draggable.dropOverItemsCallback(this.gridsterItem.item, this.collision.item, this.gridster);
-    }
-    this.collision = false;
-    this.gridsterItem.setSize();
-    this.gridsterItem.checkItemChanges(this.gridsterItem.$item, this.gridsterItem.item);
-    if (this.push) {
-      this.push.setPushedItems();
-    }
-    if (this.swap) {
-      this.swap.setSwapItem();
-    }
-    if (this.push) {
-      this.push.destroy();
-      this.push = null;
-    }
-    if (this.swap) {
-      this.swap.destroy();
-      this.swap = null;
-    }
-  };
-  calculateItemPosition() {
-    this.gridster.movingItem = this.gridsterItem.$item;
-    this.positionX = this.gridster.pixelsToPositionX(this.left, Math.round);
-    this.positionY = this.gridster.pixelsToPositionY(this.top, Math.round);
-    this.positionXBackup = this.gridsterItem.$item.x;
-    this.positionYBackup = this.gridsterItem.$item.y;
-    this.gridsterItem.$item.x = this.positionX;
-    if (this.gridster.checkGridCollision(this.gridsterItem.$item)) {
-      this.gridsterItem.$item.x = this.positionXBackup;
-    }
-    this.gridsterItem.$item.y = this.positionY;
-    if (this.gridster.checkGridCollision(this.gridsterItem.$item)) {
-      this.gridsterItem.$item.y = this.positionYBackup;
-    }
-    this.gridster.gridRenderer.setCellPosition(this.gridsterItem.renderer, this.gridsterItem.el, this.left, this.top);
-    if (this.positionXBackup !== this.gridsterItem.$item.x || this.positionYBackup !== this.gridsterItem.$item.y) {
-      const lastPosition = this.path[this.path.length - 1];
-      let direction = "";
-      if (lastPosition.x < this.gridsterItem.$item.x) {
-        direction = this.push.fromWest;
-      } else if (lastPosition.x > this.gridsterItem.$item.x) {
-        direction = this.push.fromEast;
-      } else if (lastPosition.y < this.gridsterItem.$item.y) {
-        direction = this.push.fromNorth;
-      } else if (lastPosition.y > this.gridsterItem.$item.y) {
-        direction = this.push.fromSouth;
-      }
-      this.push.pushItems(direction, this.gridster.$options.disablePushOnDrag);
-      this.swap.swapItems();
-      this.collision = this.gridster.checkCollision(this.gridsterItem.$item);
-      if (this.collision) {
-        this.gridsterItem.$item.x = this.positionXBackup;
-        this.gridsterItem.$item.y = this.positionYBackup;
-        if (this.gridster.$options.draggable.dropOverItems && this.collision !== true && this.collision.$item) {
-          this.gridster.movingItem = null;
-        }
-      } else {
-        this.path.push({
-          x: this.gridsterItem.$item.x,
-          y: this.gridsterItem.$item.y
-        });
-      }
-      this.push.checkPushBack();
-    } else {
-      this.collision = false;
-    }
-    this.gridster.previewStyle(true);
-  }
-  toggle() {
-    const enableDrag = this.gridsterItem.canBeDragged();
-    if (!this.enabled && enableDrag) {
-      this.enabled = !this.enabled;
-      this.mousedown = this.gridsterItem.renderer.listen(this.gridsterItem.el, "mousedown", this.dragStartDelay);
-      this.touchstart = this.gridsterItem.renderer.listen(this.gridsterItem.el, "touchstart", this.dragStartDelay);
-    } else if (this.enabled && !enableDrag) {
-      this.enabled = !this.enabled;
-      this.mousedown();
-      this.touchstart();
-    }
-  }
-  dragStartDelay = (e) => {
-    const target = e.target;
-    if (target.classList.contains(GRIDSTER_ITEM_RESIZABLE_HANDLER_CLASS)) {
-      return;
-    }
-    if (GridsterUtils.checkContentClassForEvent(this.gridster, e)) {
-      return;
-    }
-    GridsterUtils.checkTouchEvent(e);
-    if (!this.gridster.$options.draggable.delayStart) {
-      this.dragStart(e);
-      return;
-    }
-    const timeout = setTimeout(() => {
-      this.dragStart(e);
-      cancelDrag();
-    }, this.gridster.$options.draggable.delayStart);
-    const cancelMouse = this.gridsterItem.renderer.listen("document", "mouseup", cancelDrag);
-    const cancelMouseLeave = this.gridsterItem.renderer.listen("document", "mouseleave", cancelDrag);
-    const cancelOnBlur = this.gridsterItem.renderer.listen("window", "blur", cancelDrag);
-    const cancelTouchMove = this.gridsterItem.renderer.listen("document", "touchmove", cancelMove);
-    const cancelTouchEnd = this.gridsterItem.renderer.listen("document", "touchend", cancelDrag);
-    const cancelTouchCancel = this.gridsterItem.renderer.listen("document", "touchcancel", cancelDrag);
-    function cancelMove(eventMove) {
-      GridsterUtils.checkTouchEvent(eventMove);
-      if (Math.abs(eventMove.clientX - e.clientX) > 9 || Math.abs(eventMove.clientY - e.clientY) > 9) {
-        cancelDrag();
-      }
-    }
-    function cancelDrag() {
-      clearTimeout(timeout);
-      cancelOnBlur();
-      cancelMouse();
-      cancelMouseLeave();
-      cancelTouchMove();
-      cancelTouchEnd();
-      cancelTouchCancel();
-    }
-  };
-  /**
-   * Returns the list of directions for given mouse event
-   * @param e Mouse event
-   * */
-  getDirections(e) {
-    const directions = [];
-    if (this.lastMouse.clientX === 0 && this.lastMouse.clientY === 0) {
-      this.lastMouse.clientY = e.clientY;
-      this.lastMouse.clientX = e.clientX;
-    }
-    if (this.lastMouse.clientY > e.clientY) {
-      directions.push(Direction.UP);
-    }
-    if (this.lastMouse.clientY < e.clientY) {
-      directions.push(Direction.DOWN);
-    }
-    if (this.lastMouse.clientX < e.clientX) {
-      directions.push(Direction.RIGHT);
-    }
-    if (this.lastMouse.clientX > e.clientX) {
-      directions.push(Direction.LEFT);
-    }
-    return directions;
-  }
-};
-var GridsterPushResize = class {
-  fromSouth;
-  fromNorth;
-  fromEast;
-  fromWest;
-  pushedItems;
-  pushedItemsPath;
-  gridsterItem;
-  gridster;
-  tryPattern;
-  constructor(gridsterItem) {
-    this.pushedItems = [];
-    this.pushedItemsPath = [];
-    this.gridsterItem = gridsterItem;
-    this.gridster = gridsterItem.gridster;
-    this.tryPattern = {
-      fromEast: this.tryWest,
-      fromWest: this.tryEast,
-      fromNorth: this.trySouth,
-      fromSouth: this.tryNorth
-    };
-    this.fromSouth = "fromSouth";
-    this.fromNorth = "fromNorth";
-    this.fromEast = "fromEast";
-    this.fromWest = "fromWest";
-  }
-  destroy() {
-    this.gridster = this.gridsterItem = null;
-  }
-  pushItems(direction) {
-    if (this.gridster.$options.pushResizeItems) {
-      return this.push(this.gridsterItem, direction);
-    } else {
-      return false;
-    }
-  }
-  restoreItems() {
-    let i = 0;
-    const l = this.pushedItems.length;
-    let pushedItem;
-    for (; i < l; i++) {
-      pushedItem = this.pushedItems[i];
-      pushedItem.$item.x = pushedItem.item.x || 0;
-      pushedItem.$item.y = pushedItem.item.y || 0;
-      pushedItem.$item.cols = pushedItem.item.cols || 1;
-      pushedItem.$item.row = pushedItem.item.row || 1;
-      pushedItem.setSize();
-    }
-    this.pushedItems = [];
-    this.pushedItemsPath = [];
-  }
-  setPushedItems() {
-    let i = 0;
-    const l = this.pushedItems.length;
-    let pushedItem;
-    for (; i < l; i++) {
-      pushedItem = this.pushedItems[i];
-      pushedItem.checkItemChanges(pushedItem.$item, pushedItem.item);
-    }
-    this.pushedItems = [];
-    this.pushedItemsPath = [];
-  }
-  checkPushBack() {
-    let i = this.pushedItems.length - 1;
-    let change = false;
-    for (; i > -1; i--) {
-      if (this.checkPushedItem(this.pushedItems[i], i)) {
-        change = true;
-      }
-    }
-    if (change) {
-      this.checkPushBack();
-    }
-  }
-  push(gridsterItem, direction) {
-    const gridsterItemCollision = this.gridster.checkCollision(gridsterItem.$item);
-    if (gridsterItemCollision && gridsterItemCollision !== true && gridsterItemCollision !== this.gridsterItem && gridsterItemCollision.canBeResized()) {
-      if (this.tryPattern[direction].call(this, gridsterItemCollision, gridsterItem, direction)) {
-        return true;
-      }
-    } else if (gridsterItemCollision === false) {
-      return true;
-    }
-    return false;
-  }
-  trySouth(gridsterItemCollide, gridsterItem, direction) {
-    const backUpY = gridsterItemCollide.$item.y;
-    const backUpRows = gridsterItemCollide.$item.rows;
-    gridsterItemCollide.$item.y = gridsterItem.$item.y + gridsterItem.$item.rows;
-    gridsterItemCollide.$item.rows = backUpRows + backUpY - gridsterItemCollide.$item.y;
-    if (!this.gridster.checkCollisionTwoItems(gridsterItemCollide.$item, gridsterItem.$item) && !this.gridster.checkGridCollision(gridsterItemCollide.$item)) {
-      gridsterItemCollide.setSize();
-      this.addToPushed(gridsterItemCollide);
-      this.push(gridsterItem, direction);
-      return true;
-    } else {
-      gridsterItemCollide.$item.y = backUpY;
-      gridsterItemCollide.$item.rows = backUpRows;
-    }
-    return false;
-  }
-  tryNorth(gridsterItemCollide, gridsterItem, direction) {
-    const backUpRows = gridsterItemCollide.$item.rows;
-    gridsterItemCollide.$item.rows = gridsterItem.$item.y - gridsterItemCollide.$item.y;
-    if (!this.gridster.checkCollisionTwoItems(gridsterItemCollide.$item, gridsterItem.$item) && !this.gridster.checkGridCollision(gridsterItemCollide.$item)) {
-      gridsterItemCollide.setSize();
-      this.addToPushed(gridsterItemCollide);
-      this.push(gridsterItem, direction);
-      return true;
-    } else {
-      gridsterItemCollide.$item.rows = backUpRows;
-    }
-    return false;
-  }
-  tryEast(gridsterItemCollide, gridsterItem, direction) {
-    const backUpX = gridsterItemCollide.$item.x;
-    const backUpCols = gridsterItemCollide.$item.cols;
-    gridsterItemCollide.$item.x = gridsterItem.$item.x + gridsterItem.$item.cols;
-    gridsterItemCollide.$item.cols = backUpCols + backUpX - gridsterItemCollide.$item.x;
-    if (!this.gridster.checkCollisionTwoItems(gridsterItemCollide.$item, gridsterItem.$item) && !this.gridster.checkGridCollision(gridsterItemCollide.$item)) {
-      gridsterItemCollide.setSize();
-      this.addToPushed(gridsterItemCollide);
-      this.push(gridsterItem, direction);
-      return true;
-    } else {
-      gridsterItemCollide.$item.x = backUpX;
-      gridsterItemCollide.$item.cols = backUpCols;
-    }
-    return false;
-  }
-  tryWest(gridsterItemCollide, gridsterItem, direction) {
-    const backUpCols = gridsterItemCollide.$item.cols;
-    gridsterItemCollide.$item.cols = gridsterItem.$item.x - gridsterItemCollide.$item.x;
-    if (!this.gridster.checkCollisionTwoItems(gridsterItemCollide.$item, gridsterItem.$item) && !this.gridster.checkGridCollision(gridsterItemCollide.$item)) {
-      gridsterItemCollide.setSize();
-      this.addToPushed(gridsterItemCollide);
-      this.push(gridsterItem, direction);
-      return true;
-    } else {
-      gridsterItemCollide.$item.cols = backUpCols;
-    }
-    return false;
-  }
-  addToPushed(gridsterItem) {
-    if (this.pushedItems.indexOf(gridsterItem) < 0) {
-      this.pushedItems.push(gridsterItem);
-      this.pushedItemsPath.push([
-        {
-          x: gridsterItem.item.x || 0,
-          y: gridsterItem.item.y || 0,
-          cols: gridsterItem.item.cols || 0,
-          rows: gridsterItem.item.rows || 0
-        },
-        {
-          x: gridsterItem.$item.x,
-          y: gridsterItem.$item.y,
-          cols: gridsterItem.$item.cols,
-          rows: gridsterItem.$item.rows
-        }
-      ]);
-    } else {
-      const i = this.pushedItems.indexOf(gridsterItem);
-      this.pushedItemsPath[i].push({
-        x: gridsterItem.$item.x,
-        y: gridsterItem.$item.y,
-        cols: gridsterItem.$item.cols,
-        rows: gridsterItem.$item.rows
-      });
-    }
-  }
-  removeFromPushed(i) {
-    if (i > -1) {
-      this.pushedItems.splice(i, 1);
-      this.pushedItemsPath.splice(i, 1);
-    }
-  }
-  checkPushedItem(pushedItem, i) {
-    const path = this.pushedItemsPath[i];
-    let j = path.length - 2;
-    let lastPosition;
-    let x;
-    let y;
-    let cols;
-    let rows;
-    for (; j > -1; j--) {
-      lastPosition = path[j];
-      x = pushedItem.$item.x;
-      y = pushedItem.$item.y;
-      cols = pushedItem.$item.cols;
-      rows = pushedItem.$item.rows;
-      pushedItem.$item.x = lastPosition.x;
-      pushedItem.$item.y = lastPosition.y;
-      pushedItem.$item.cols = lastPosition.cols;
-      pushedItem.$item.rows = lastPosition.rows;
-      if (!this.gridster.findItemWithItem(pushedItem.$item)) {
-        pushedItem.setSize();
-        path.splice(j + 1, path.length - 1 - j);
-      } else {
-        pushedItem.$item.x = x;
-        pushedItem.$item.y = y;
-        pushedItem.$item.cols = cols;
-        pushedItem.$item.rows = rows;
-      }
-    }
-    if (path.length < 2) {
-      this.removeFromPushed(i);
-      return true;
-    }
-    return false;
-  }
-};
-var GridsterResizable = class {
-  zone;
-  gridsterItem;
-  gridster;
-  lastMouse;
-  itemBackup = { x: 0, y: 0, cols: 0, rows: 0 };
-  resizeEventScrollType;
-  /**
-   * The direction function may reference any of the `GridsterResizable` class methods, that are
-   * responsible for gridster resize when the `dragmove` event is being handled. E.g. it may reference
-   * the `handleNorth` method when the north handle is pressed and moved by a mouse.
-   */
-  directionFunction = null;
-  resizeEnabled;
-  resizableHandles;
-  mousemove;
-  mouseup;
-  mouseleave;
-  cancelOnBlur;
-  touchmove;
-  touchend;
-  touchcancel;
-  push;
-  pushResize;
-  minHeight;
-  minWidth;
-  offsetTop;
-  offsetLeft;
-  diffTop;
-  diffLeft;
-  diffRight;
-  diffBottom;
-  margin;
-  outerMarginTop;
-  outerMarginRight;
-  outerMarginBottom;
-  outerMarginLeft;
-  originalClientX;
-  originalClientY;
-  top;
-  left;
-  bottom;
-  right;
-  width;
-  height;
-  hasRatio;
-  constructor(gridsterItem, gridster, zone) {
-    this.zone = zone;
-    this.gridsterItem = gridsterItem;
-    this.gridster = gridster;
-    this.lastMouse = {
-      clientX: 0,
-      clientY: 0
-    };
-    this.resizeEventScrollType = {
-      west: false,
-      east: false,
-      north: false,
-      south: false
-    };
-  }
-  destroy() {
-    this.gridster?.previewStyle();
-    this.gridster = this.gridsterItem = null;
-  }
-  dragStart(e) {
-    if (e.which && e.which !== 1 || this.gridster.dragInProgress) {
-      return;
-    }
-    if (this.gridster.options.resizable && this.gridster.options.resizable.start) {
-      this.gridster.options.resizable.start(this.gridsterItem.item, this.gridsterItem, e);
-    }
-    e.stopPropagation();
-    e.preventDefault();
-    this.zone.runOutsideAngular(() => {
-      this.mousemove = this.gridsterItem.renderer.listen("document", "mousemove", this.dragMove);
-      this.touchmove = this.gridster.renderer.listen(this.gridster.el, "touchmove", this.dragMove);
-    });
-    this.mouseup = this.gridsterItem.renderer.listen("document", "mouseup", this.dragStop);
-    this.mouseleave = this.gridsterItem.renderer.listen("document", "mouseleave", this.dragStop);
-    this.cancelOnBlur = this.gridsterItem.renderer.listen("window", "blur", this.dragStop);
-    this.touchend = this.gridsterItem.renderer.listen("document", "touchend", this.dragStop);
-    this.touchcancel = this.gridsterItem.renderer.listen("document", "touchcancel", this.dragStop);
-    this.gridsterItem.renderer.addClass(this.gridsterItem.el, "gridster-item-resizing");
-    this.lastMouse.clientX = e.clientX;
-    this.lastMouse.clientY = e.clientY;
-    this.left = this.gridsterItem.left;
-    this.top = this.gridsterItem.top;
-    this.originalClientX = e.clientX;
-    this.originalClientY = e.clientY;
-    this.width = this.gridsterItem.width;
-    this.height = this.gridsterItem.height;
-    this.bottom = this.gridsterItem.top + this.gridsterItem.height;
-    this.right = this.gridsterItem.left + this.gridsterItem.width;
-    this.margin = this.gridster.$options.margin;
-    this.outerMarginTop = this.gridster.$options.outerMarginTop;
-    this.outerMarginRight = this.gridster.$options.outerMarginRight;
-    this.outerMarginBottom = this.gridster.$options.outerMarginBottom;
-    this.outerMarginLeft = this.gridster.$options.outerMarginLeft;
-    this.offsetLeft = this.gridster.el.scrollLeft - this.gridster.el.offsetLeft;
-    this.offsetTop = this.gridster.el.scrollTop - this.gridster.el.offsetTop;
-    this.diffLeft = e.clientX + this.offsetLeft - this.left;
-    this.diffRight = e.clientX + this.offsetLeft - this.right;
-    this.diffTop = e.clientY + this.offsetTop - this.top;
-    this.diffBottom = e.clientY + this.offsetTop - this.bottom;
-    this.minHeight = this.gridster.positionYToPixels(this.gridsterItem.$item.minItemRows || this.gridster.$options.minItemRows) - this.margin;
-    this.minWidth = this.gridster.positionXToPixels(this.gridsterItem.$item.minItemCols || this.gridster.$options.minItemCols) - this.margin;
-    this.gridster.movingItem = this.gridsterItem.$item;
-    this.gridster.previewStyle();
-    this.push = new GridsterPush(this.gridsterItem);
-    this.pushResize = new GridsterPushResize(this.gridsterItem);
-    this.gridster.dragInProgress = true;
-    this.hasRatio = !!(this.gridster.$options.itemAspectRatio || this.gridsterItem.$item.itemAspectRatio);
-    this.itemBackup = { x: 0, y: 0, cols: 0, rows: 0 };
-    this.gridster.updateGrid();
-    const { classList } = e.target;
-    if (classList.contains("handle-n")) {
-      this.resizeEventScrollType.north = true;
-      this.directionFunction = this.handleNorth;
-    } else if (classList.contains("handle-w")) {
-      if (this.gridster.$options.dirType === DirTypes.RTL) {
-        this.resizeEventScrollType.east = true;
-        this.directionFunction = this.handleEast;
-      } else {
-        this.resizeEventScrollType.west = true;
-        this.directionFunction = this.handleWest;
-      }
-    } else if (classList.contains("handle-s")) {
-      this.resizeEventScrollType.south = true;
-      this.directionFunction = this.handleSouth;
-    } else if (classList.contains("handle-e")) {
-      if (this.gridster.$options.dirType === DirTypes.RTL) {
-        this.resizeEventScrollType.west = true;
-        this.directionFunction = this.handleWest;
-      } else {
-        this.resizeEventScrollType.east = true;
-        this.directionFunction = this.handleEast;
-      }
-    } else if (classList.contains("handle-nw")) {
-      if (this.gridster.$options.dirType === DirTypes.RTL) {
-        this.resizeEventScrollType.north = true;
-        this.resizeEventScrollType.east = true;
-        this.directionFunction = this.handleNorthEast;
-      } else {
-        this.resizeEventScrollType.north = true;
-        this.resizeEventScrollType.west = true;
-        this.directionFunction = this.handleNorthWest;
-      }
-    } else if (classList.contains("handle-ne")) {
-      if (this.gridster.$options.dirType === DirTypes.RTL) {
-        this.resizeEventScrollType.north = true;
-        this.resizeEventScrollType.west = true;
-        this.directionFunction = this.handleNorthWest;
-      } else {
-        this.resizeEventScrollType.north = true;
-        this.resizeEventScrollType.east = true;
-        this.directionFunction = this.handleNorthEast;
-      }
-    } else if (classList.contains("handle-sw")) {
-      if (this.gridster.$options.dirType === DirTypes.RTL) {
-        this.resizeEventScrollType.south = true;
-        this.resizeEventScrollType.east = true;
-        this.directionFunction = this.handleSouthEast;
-      } else {
-        this.resizeEventScrollType.south = true;
-        this.resizeEventScrollType.west = true;
-        this.directionFunction = this.handleSouthWest;
-      }
-    } else if (classList.contains("handle-se")) {
-      if (this.gridster.$options.dirType === DirTypes.RTL) {
-        this.resizeEventScrollType.south = true;
-        this.resizeEventScrollType.west = true;
-        this.directionFunction = this.handleSouthWest;
-      } else {
-        this.resizeEventScrollType.south = true;
-        this.resizeEventScrollType.east = true;
-        this.directionFunction = this.handleSouthEast;
-      }
-    }
-  }
-  dragMove = (e) => {
-    if (this.directionFunction === null) {
-      throw new Error("The `directionFunction` has not been set before calling `dragMove`.");
-    }
-    e.stopPropagation();
-    e.preventDefault();
-    GridsterUtils.checkTouchEvent(e);
-    this.offsetTop = this.gridster.el.scrollTop - this.gridster.el.offsetTop;
-    this.offsetLeft = this.gridster.el.scrollLeft - this.gridster.el.offsetLeft;
-    scroll(this.gridster, this.left, this.top, this.width, this.height, e, this.lastMouse, this.directionFunction, true, this.resizeEventScrollType);
-    const scale = this.gridster.options.scale || 1;
-    this.directionFunction({
-      clientX: this.originalClientX + (e.clientX - this.originalClientX) / scale,
-      clientY: this.originalClientY + (e.clientY - this.originalClientY) / scale
-    });
-    this.lastMouse.clientX = e.clientX;
-    this.lastMouse.clientY = e.clientY;
-    this.zone.run(() => {
-      this.gridster.updateGrid();
-    });
-  };
-  dragStop = (e) => {
-    e.stopPropagation();
-    e.preventDefault();
-    cancelScroll();
-    this.mousemove();
-    this.mouseup();
-    this.mouseleave();
-    this.cancelOnBlur();
-    this.touchmove();
-    this.touchend();
-    this.touchcancel();
-    this.gridster.dragInProgress = false;
-    this.resizeEventScrollType = {
-      west: false,
-      east: false,
-      north: false,
-      south: false
-    };
-    this.gridster.updateGrid();
-    if (this.gridster.options.resizable && this.gridster.options.resizable.stop) {
-      Promise.resolve(this.gridster.options.resizable.stop(this.gridsterItem.item, this.gridsterItem, e)).then(this.makeResize, this.cancelResize);
-    } else {
-      this.makeResize();
-    }
-    setTimeout(() => {
-      this.gridsterItem.renderer.removeClass(this.gridsterItem.el, "gridster-item-resizing");
-      if (this.gridster) {
-        this.gridster.movingItem = null;
-        this.gridster.previewStyle();
-      }
-    });
-  };
-  cancelResize = () => {
-    this.gridsterItem.$item.cols = this.gridsterItem.item.cols || 1;
-    this.gridsterItem.$item.rows = this.gridsterItem.item.rows || 1;
-    this.gridsterItem.$item.x = this.gridsterItem.item.x || 0;
-    this.gridsterItem.$item.y = this.gridsterItem.item.y || 0;
-    this.gridsterItem.setSize();
-    this.push.restoreItems();
-    this.pushResize.restoreItems();
-    this.push.destroy();
-    this.push = null;
-    this.pushResize.destroy();
-    this.pushResize = null;
-  };
-  makeResize = () => {
-    this.gridsterItem.setSize();
-    this.gridsterItem.checkItemChanges(this.gridsterItem.$item, this.gridsterItem.item);
-    this.push.setPushedItems();
-    this.pushResize.setPushedItems();
-    this.push.destroy();
-    this.push = null;
-    this.pushResize.destroy();
-    this.pushResize = null;
-  };
-  check = (direction) => {
-    this.hasRatio && this.enforceAspectRatio();
-    this.pushResize.pushItems(direction);
-    this.push.pushItems(direction, this.gridster.$options.disablePushOnResize);
-    if (this.gridster.checkCollision(this.gridsterItem.$item, true)) {
-      this.resetItem(this.hasRatio);
-      return false;
-    }
-    this.gridster.previewStyle();
-    this.pushResize.checkPushBack();
-    this.push.checkPushBack();
-    return true;
-  };
-  getNewNorthPosition = (e) => {
-    this.top = e.clientY + this.offsetTop - this.diffTop;
-    this.height = this.bottom - this.top;
-    if (this.minHeight > this.height) {
-      this.height = this.minHeight;
-      this.top = this.bottom - this.minHeight;
-    } else if (this.gridster.options.enableBoundaryControl) {
-      this.top = Math.max(0, this.top);
-      this.height = this.bottom - this.top;
-    }
-    const marginTop = this.gridster.options.pushItems ? this.margin : 0;
-    return this.gridster.pixelsToPositionY(this.top + marginTop, Math.floor);
-  };
-  handleNorth = (e) => {
-    const newPosition = this.getNewNorthPosition(e);
-    if (this.gridsterItem.$item.y !== newPosition) {
-      this.makeItemBackup();
-      this.gridsterItem.$item.rows += this.gridsterItem.$item.y - newPosition;
-      this.gridsterItem.$item.y = newPosition;
-      if (!this.check(this.pushResize.fromSouth)) {
-        return;
-      }
-    }
-    this.setItemTop(this.top);
-    this.setItemHeight(this.height);
-  };
-  getNewWestPosition = (e) => {
-    const clientX = this.gridster.$options.dirType === DirTypes.RTL ? this.originalClientX + (this.originalClientX - e.clientX) : e.clientX;
-    this.left = clientX + this.offsetLeft - this.diffLeft;
-    this.width = this.right - this.left;
-    if (this.minWidth > this.width) {
-      this.width = this.minWidth;
-      this.left = this.right - this.minWidth;
-    } else if (this.gridster.options.enableBoundaryControl) {
-      this.left = Math.max(0, this.left);
-      this.width = this.right - this.left;
-    }
-    const marginLeft = this.gridster.options.pushItems ? this.margin : 0;
-    return this.gridster.pixelsToPositionX(this.left + marginLeft, Math.floor);
-  };
-  handleWest = (e) => {
-    const newPosition = this.getNewWestPosition(e);
-    if (this.gridsterItem.$item.x !== newPosition) {
-      this.makeItemBackup();
-      this.gridsterItem.$item.cols += this.gridsterItem.$item.x - newPosition;
-      this.gridsterItem.$item.x = newPosition;
-      if (!this.check(this.pushResize.fromEast)) {
-        return;
-      }
-    }
-    this.setItemLeft(this.left);
-    this.setItemWidth(this.width);
-  };
-  getNewSouthPosition = (e) => {
-    this.height = e.clientY + this.offsetTop - this.diffBottom - this.top;
-    if (this.minHeight > this.height) {
-      this.height = this.minHeight;
-    }
-    this.bottom = this.top + this.height;
-    if (this.gridster.options.enableBoundaryControl) {
-      const margin = this.outerMarginBottom ?? this.margin;
-      const box = this.gridster.el.getBoundingClientRect();
-      this.bottom = Math.min(this.bottom, box.bottom - box.top - 2 * margin);
-      this.height = this.bottom - this.top;
-    }
-    const marginBottom = this.gridster.options.pushItems ? 0 : this.margin;
-    return this.gridster.pixelsToPositionY(this.bottom + marginBottom, Math.ceil);
-  };
-  handleSouth = (e) => {
-    const newPosition = this.getNewSouthPosition(e);
-    if (this.gridsterItem.$item.y + this.gridsterItem.$item.rows !== newPosition) {
-      this.makeItemBackup();
-      this.gridsterItem.$item.rows = newPosition - this.gridsterItem.$item.y;
-      if (!this.check(this.pushResize.fromNorth)) {
-        return;
-      }
-    }
-    this.setItemHeight(this.height);
-  };
-  getNewEastPosition = (e) => {
-    const clientX = this.gridster.$options.dirType === DirTypes.RTL ? this.originalClientX + (this.originalClientX - e.clientX) : e.clientX;
-    this.width = clientX + this.offsetLeft - this.diffRight - this.left;
-    if (this.minWidth > this.width) {
-      this.width = this.minWidth;
-    }
-    this.right = this.left + this.width;
-    if (this.gridster.options.enableBoundaryControl) {
-      const margin = this.outerMarginRight ?? this.margin;
-      const box = this.gridster.el.getBoundingClientRect();
-      this.right = Math.min(this.right, box.right - box.left - 2 * margin);
-      this.width = this.right - this.left;
-    }
-    const marginRight = this.gridster.options.pushItems ? 0 : this.margin;
-    return this.gridster.pixelsToPositionX(this.right + marginRight, Math.ceil);
-  };
-  handleEast = (e) => {
-    const newPosition = this.getNewEastPosition(e);
-    if (this.gridsterItem.$item.x + this.gridsterItem.$item.cols !== newPosition) {
-      this.makeItemBackup();
-      this.gridsterItem.$item.cols = newPosition - this.gridsterItem.$item.x;
-      if (!this.check(this.pushResize.fromWest)) {
-        return;
-      }
-    }
-    this.setItemWidth(this.width);
-  };
-  handleNorthWest = (e) => {
-    const newNorth = this.getNewNorthPosition(e);
-    const newWest = this.getNewWestPosition(e);
-    if (this.gridsterItem.$item.y !== newNorth || this.gridsterItem.$item.x !== newWest) {
-      this.makeItemBackup();
-      this.gridsterItem.$item.rows += this.gridsterItem.$item.y - newNorth;
-      this.gridsterItem.$item.y = newNorth;
-      this.gridsterItem.$item.cols += this.gridsterItem.$item.x - newWest;
-      this.gridsterItem.$item.x = newWest;
-      if (!this.check(this.pushResize.fromSouth)) {
-        return;
-      }
-    }
-    this.setItemTop(this.top);
-    this.setItemHeight(this.height);
-    this.setItemLeft(this.left);
-    this.setItemWidth(this.width);
-  };
-  handleNorthEast = (e) => {
-    const newNorth = this.getNewNorthPosition(e);
-    const newEast = this.getNewEastPosition(e);
-    if (this.gridsterItem.$item.y !== newNorth || this.gridsterItem.$item.x + this.gridsterItem.$item.cols !== newEast) {
-      this.makeItemBackup();
-      this.gridsterItem.$item.rows += this.gridsterItem.$item.y - newNorth;
-      this.gridsterItem.$item.y = newNorth;
-      this.gridsterItem.$item.cols = newEast - this.gridsterItem.$item.x;
-      if (!this.check(this.pushResize.fromSouth)) {
-        return;
-      }
-    }
-    this.setItemTop(this.top);
-    this.setItemHeight(this.height);
-    this.setItemWidth(this.width);
-  };
-  handleSouthWest = (e) => {
-    const newSouth = this.getNewSouthPosition(e);
-    const newWest = this.getNewWestPosition(e);
-    if (this.gridsterItem.$item.y + this.gridsterItem.$item.rows !== newSouth || this.gridsterItem.$item.x !== newWest) {
-      this.makeItemBackup();
-      this.gridsterItem.$item.rows = newSouth - this.gridsterItem.$item.y;
-      this.gridsterItem.$item.cols += this.gridsterItem.$item.x - newWest;
-      this.gridsterItem.$item.x = newWest;
-      if (!this.check(this.pushResize.fromNorth)) {
-        return;
-      }
-    }
-    this.setItemLeft(this.left);
-    this.setItemHeight(this.height);
-    this.setItemWidth(this.width);
-  };
-  handleSouthEast = (e) => {
-    const newSouth = this.getNewSouthPosition(e);
-    const newEast = this.getNewEastPosition(e);
-    if (this.gridsterItem.$item.y + this.gridsterItem.$item.rows !== newSouth || this.gridsterItem.$item.x + this.gridsterItem.$item.cols !== newEast) {
-      this.makeItemBackup();
-      this.gridsterItem.$item.rows = newSouth - this.gridsterItem.$item.y;
-      this.gridsterItem.$item.cols = newEast - this.gridsterItem.$item.x;
-      if (!this.check(this.pushResize.fromNorth)) {
-        return;
-      }
-    }
-    this.setItemHeight(this.height);
-    this.setItemWidth(this.width);
-  };
-  makeItemBackup() {
-    this.itemBackup.x = this.gridsterItem.$item.x;
-    this.itemBackup.y = this.gridsterItem.$item.y;
-    this.itemBackup.cols = this.gridsterItem.$item.cols;
-    this.itemBackup.rows = this.gridsterItem.$item.rows;
-  }
-  resetItem(soft = false) {
-    if (this.gridsterItem.$item.x !== this.itemBackup.x) {
-      this.gridsterItem.$item.x = this.itemBackup.x;
-      if (!soft) {
-        this.left = this.gridster.positionXToPixels(this.gridsterItem.$item.x);
-        this.setItemLeft(this.left);
-      }
-    }
-    if (this.gridsterItem.$item.y !== this.itemBackup.y) {
-      this.gridsterItem.$item.y = this.itemBackup.y;
-      if (!soft) {
-        this.top = this.gridster.positionYToPixels(this.gridsterItem.$item.y);
-        this.setItemTop(this.top);
-      }
-    }
-    if (this.gridsterItem.$item.cols !== this.itemBackup.cols) {
-      this.gridsterItem.$item.cols = this.itemBackup.cols;
-      if (!soft) {
-        this.setItemWidth(this.gridster.positionXToPixels(this.gridsterItem.$item.cols) - this.margin);
-      }
-    }
-    if (this.gridsterItem.$item.rows !== this.itemBackup.rows) {
-      this.gridsterItem.$item.rows = this.itemBackup.rows;
-      if (!soft) {
-        this.setItemHeight(this.gridster.positionYToPixels(this.gridsterItem.$item.rows) - this.margin);
-      }
-    }
-  }
-  toggle() {
-    this.resizeEnabled = this.gridsterItem.canBeResized();
-    this.resizableHandles = this.gridsterItem.getResizableHandles();
-  }
-  dragStartDelay(e) {
-    GridsterUtils.checkTouchEvent(e);
-    if (!this.gridster.$options.resizable.delayStart) {
-      this.dragStart(e);
-      return;
-    }
-    const timeout = setTimeout(() => {
-      this.dragStart(e);
-      cancelDrag();
-    }, this.gridster.$options.resizable.delayStart);
-    const { cancelMouse, cancelMouseLeave, cancelOnBlur, cancelTouchMove, cancelTouchEnd, cancelTouchCancel } = this.zone.runOutsideAngular(() => {
-      const cancelMouse2 = this.gridsterItem.renderer.listen("document", "mouseup", cancelDrag);
-      const cancelMouseLeave2 = this.gridsterItem.renderer.listen("document", "mouseleave", cancelDrag);
-      const cancelOnBlur2 = this.gridsterItem.renderer.listen("window", "blur", cancelDrag);
-      const cancelTouchMove2 = this.gridsterItem.renderer.listen("document", "touchmove", cancelMove);
-      const cancelTouchEnd2 = this.gridsterItem.renderer.listen("document", "touchend", cancelDrag);
-      const cancelTouchCancel2 = this.gridsterItem.renderer.listen("document", "touchcancel", cancelDrag);
-      return {
-        cancelMouse: cancelMouse2,
-        cancelMouseLeave: cancelMouseLeave2,
-        cancelOnBlur: cancelOnBlur2,
-        cancelTouchMove: cancelTouchMove2,
-        cancelTouchEnd: cancelTouchEnd2,
-        cancelTouchCancel: cancelTouchCancel2
-      };
-    });
-    function cancelMove(eventMove) {
-      GridsterUtils.checkTouchEvent(eventMove);
-      if (Math.abs(eventMove.clientX - e.clientX) > 9 || Math.abs(eventMove.clientY - e.clientY) > 9) {
-        cancelDrag();
-      }
-    }
-    function cancelDrag() {
-      clearTimeout(timeout);
-      cancelOnBlur();
-      cancelMouse();
-      cancelMouseLeave();
-      cancelTouchMove();
-      cancelTouchEnd();
-      cancelTouchCancel();
-    }
-  }
-  setItemTop(top) {
-    this.gridster.gridRenderer.setCellPosition(this.gridsterItem.renderer, this.gridsterItem.el, this.left, top);
-  }
-  setItemLeft(left) {
-    this.gridster.gridRenderer.setCellPosition(this.gridsterItem.renderer, this.gridsterItem.el, left, this.top);
-  }
-  setItemHeight(height) {
-    this.gridsterItem.renderer.setStyle(this.gridsterItem.el, "height", height + "px");
-  }
-  setItemWidth(width) {
-    this.gridsterItem.renderer.setStyle(this.gridsterItem.el, "width", width + "px");
-  }
-  /**
-   * Enforces the aspect ratio by recalculating grid positions based on current pixel dimensions
-   */
-  enforceAspectRatio() {
-    const aspectRatio = this.gridsterItem.$item.itemAspectRatio || this.gridster.$options.itemAspectRatio;
-    if (!aspectRatio) {
-      return;
-    }
-    const targetRatio = aspectRatio * (this.gridster.curColWidth / this.gridster.curRowHeight);
-    const minCols = this.gridsterItem.$item.minItemCols || this.gridster.$options.minItemCols;
-    const minRows = this.gridsterItem.$item.minItemRows || this.gridster.$options.minItemRows;
-    const minWidth = this.gridster.positionXToPixels(minCols) - this.margin;
-    const minHeight = this.gridster.positionYToPixels(minRows) - this.margin;
-    const maxCols = this.gridsterItem.$item.maxItemCols || this.gridster.$options.maxItemCols || 0;
-    const maxRows = this.gridsterItem.$item.maxItemRows || this.gridster.$options.maxItemRows || 0;
-    const maxWidth = maxCols ? this.gridster.positionXToPixels(maxCols) - this.margin : Number.MAX_VALUE;
-    const maxHeight = maxRows ? this.gridster.positionYToPixels(maxRows) - this.margin : Number.MAX_VALUE;
-    let newWidth = this.width;
-    let newHeight = this.height;
-    if (this.resizeEventScrollType.north || this.resizeEventScrollType.south) {
-      newWidth = this.height * targetRatio;
-      if (newWidth < minWidth) {
-        newWidth = minWidth;
-        newHeight = minWidth / targetRatio;
-      } else if (newWidth > maxWidth) {
-        newWidth = maxWidth;
-        newHeight = maxWidth / targetRatio;
-      }
-    } else if (this.resizeEventScrollType.east || this.resizeEventScrollType.west) {
-      newHeight = this.width / targetRatio;
-      if (newHeight < minHeight) {
-        newHeight = minHeight;
-        newWidth = minHeight * targetRatio;
-      } else if (newHeight > maxHeight) {
-        newHeight = maxHeight;
-        newWidth = maxHeight * targetRatio;
-      }
-    }
-    if (this.gridster.options.enableBoundaryControl) {
-      const box = this.gridster.el.getBoundingClientRect();
-      const margin = Math.max(this.outerMarginTop || this.margin, this.outerMarginRight || this.margin, this.outerMarginBottom || this.margin, this.outerMarginLeft || this.margin);
-      const maxRight = box.width - 2 * margin;
-      const maxBottom = box.height - 2 * margin;
-      if (this.resizeEventScrollType.west) {
-        if (this.right - newWidth < 0) {
-          newWidth = this.right;
-          newHeight = newWidth / targetRatio;
-        }
-      } else if (this.resizeEventScrollType.east) {
-        if (this.left + newWidth > maxRight) {
-          newWidth = maxRight - this.left;
-          newHeight = newWidth / targetRatio;
-        }
-      }
-      if (this.resizeEventScrollType.north) {
-        if (this.bottom - newHeight < 0) {
-          newHeight = this.bottom;
-          newWidth = newHeight * targetRatio;
-        }
-      } else if (this.resizeEventScrollType.south) {
-        if (this.top + newHeight > maxBottom) {
-          newHeight = maxBottom - this.top;
-          newWidth = newHeight * targetRatio;
-        }
-      }
-    }
-    this.width = newWidth;
-    this.height = newHeight;
-    if (this.resizeEventScrollType.west) {
-      this.left = this.right - this.width;
-    }
-    if (this.resizeEventScrollType.north) {
-      this.top = this.bottom - this.height;
-    }
-    const marginLeft = this.gridster.options.pushItems ? 0 : this.margin;
-    const marginTop = this.gridster.options.pushItems ? 0 : this.margin;
-    const marginRight = this.gridster.options.pushItems ? this.margin : 0;
-    const marginBottom = this.gridster.options.pushItems ? this.margin : 0;
-    this.gridsterItem.$item.x = this.gridster.pixelsToPositionX(this.left + marginLeft, Math.floor);
-    this.gridsterItem.$item.y = this.gridster.pixelsToPositionY(this.top + marginTop, Math.floor);
-    this.gridsterItem.$item.cols = this.gridster.pixelsToPositionX(this.width + marginRight, Math.ceil);
-    this.gridsterItem.$item.rows = this.gridster.pixelsToPositionY(this.height + marginBottom, Math.ceil);
-    this.setItemTop(this.top);
-    this.setItemLeft(this.left);
-    this.setItemWidth(this.width);
-    this.setItemHeight(this.height);
-  }
-};
-var GridsterItemComponent = class _GridsterItemComponent {
-  renderer;
-  zone;
-  item;
-  itemInit = new EventEmitter();
-  itemChange = new EventEmitter();
-  itemResize = new EventEmitter();
-  $item;
-  el;
-  gridster;
-  top;
-  left;
-  width;
-  height;
-  drag;
-  resize;
-  notPlaced;
-  init;
-  get zIndex() {
-    return this.getLayerIndex() + this.gridster.$options.baseLayerIndex;
-  }
-  constructor(el, gridster, renderer, zone) {
-    this.renderer = renderer;
-    this.zone = zone;
-    this.el = el.nativeElement;
-    this.$item = {
-      cols: -1,
-      rows: -1,
-      x: -1,
-      y: -1
-    };
-    this.gridster = gridster;
-    this.drag = new GridsterDraggable(this, gridster, this.zone);
-    this.resize = new GridsterResizable(this, gridster, this.zone);
-  }
-  ngOnInit() {
-    this.gridster.addItem(this);
-  }
-  ngOnChanges(changes) {
-    if (changes.item) {
-      this.updateOptions();
-      if (!this.init) {
-        this.gridster.calculateLayout$.next();
-      }
-    }
-    if (changes.item && changes.item.previousValue) {
-      this.setSize();
-    }
-  }
-  updateOptions() {
-    this.$item = GridsterUtils.merge(this.$item, this.item, {
-      cols: void 0,
-      rows: void 0,
-      x: void 0,
-      y: void 0,
-      layerIndex: void 0,
-      dragEnabled: void 0,
-      resizeEnabled: void 0,
-      compactEnabled: void 0,
-      itemAspectRatio: void 0,
-      maxItemRows: void 0,
-      minItemRows: void 0,
-      maxItemCols: void 0,
-      minItemCols: void 0,
-      maxItemArea: void 0,
-      minItemArea: void 0,
-      resizableHandles: {
-        s: void 0,
-        e: void 0,
-        n: void 0,
-        w: void 0,
-        se: void 0,
-        ne: void 0,
-        sw: void 0,
-        nw: void 0
-      }
-    });
-  }
-  ngOnDestroy() {
-    this.gridster.removeItem(this);
-    this.drag.destroy();
-    this.resize.destroy();
-    this.gridster = this.drag = this.resize = null;
-  }
-  setSize() {
-    this.renderer.setStyle(this.el, "display", this.notPlaced ? "" : "block");
-    this.gridster.gridRenderer.updateItem(this.el, this.$item, this.renderer);
-    this.updateItemSize();
-  }
-  updateItemSize() {
-    const top = this.$item.y * this.gridster.curRowHeight;
-    const left = this.$item.x * this.gridster.curColWidth;
-    const width = this.$item.cols * this.gridster.curColWidth - this.gridster.$options.margin;
-    const height = this.$item.rows * this.gridster.curRowHeight - this.gridster.$options.margin;
-    this.top = top;
-    this.left = left;
-    if (!this.init && width > 0 && height > 0) {
-      this.init = true;
-      if (this.item.initCallback) {
-        this.item.initCallback(this.item, this);
-      }
-      if (this.gridster.options.itemInitCallback) {
-        this.gridster.options.itemInitCallback(this.item, this);
-      }
-      this.itemInit.next({ item: this.item, itemComponent: this });
-      if (this.gridster.$options.scrollToNewItems) {
-        this.el.scrollIntoView({
-          block: "end",
-          inline: "nearest",
-          behavior: "smooth"
-        });
-      }
-    }
-    if (width !== this.width || height !== this.height) {
-      this.width = width;
-      this.height = height;
-      if (this.gridster.options.itemResizeCallback) {
-        this.gridster.options.itemResizeCallback(this.item, this);
-      }
-      this.itemResize.next({ item: this.item, itemComponent: this });
-    }
-  }
-  itemChanged() {
-    if (this.gridster.options.itemChangeCallback) {
-      this.gridster.options.itemChangeCallback(this.item, this);
-    }
-    this.itemChange.next({ item: this.item, itemComponent: this });
-  }
-  checkItemChanges(newValue, oldValue) {
-    if (newValue.rows === oldValue.rows && newValue.cols === oldValue.cols && newValue.x === oldValue.x && newValue.y === oldValue.y) {
-      return;
-    }
-    if (this.gridster.checkCollision(this.$item)) {
-      this.$item.x = oldValue.x || 0;
-      this.$item.y = oldValue.y || 0;
-      this.$item.cols = oldValue.cols || 1;
-      this.$item.rows = oldValue.rows || 1;
-      this.setSize();
-    } else {
-      this.item.cols = this.$item.cols;
-      this.item.rows = this.$item.rows;
-      this.item.x = this.$item.x;
-      this.item.y = this.$item.y;
-      this.gridster.calculateLayout$.next();
-      this.itemChanged();
-    }
-  }
-  canBeDragged() {
-    const gridDragEnabled = this.gridster.$options.draggable.enabled;
-    const itemDragEnabled = this.$item.dragEnabled === void 0 ? gridDragEnabled : this.$item.dragEnabled;
-    return !this.gridster.mobile && gridDragEnabled && itemDragEnabled;
-  }
-  canBeResized() {
-    const gridResizable = this.gridster.$options.resizable.enabled;
-    const itemResizable = this.$item.resizeEnabled === void 0 ? gridResizable : this.$item.resizeEnabled;
-    return !this.gridster.mobile && gridResizable && itemResizable;
-  }
-  getResizableHandles() {
-    const gridResizableHandles = this.gridster.$options.resizable.handles;
-    const itemResizableHandles = this.$item.resizableHandles;
-    if (itemResizableHandles === void 0) {
-      return gridResizableHandles;
-    }
-    return __spreadValues(__spreadValues({}, gridResizableHandles), itemResizableHandles);
-  }
-  bringToFront(offset) {
-    if (offset && offset <= 0) {
-      return;
-    }
-    const layerIndex = this.getLayerIndex();
-    const topIndex = this.gridster.$options.maxLayerIndex;
-    if (layerIndex < topIndex) {
-      const targetIndex = offset ? layerIndex + offset : topIndex;
-      this.item.layerIndex = this.$item.layerIndex = targetIndex > topIndex ? topIndex : targetIndex;
-    }
-  }
-  sendToBack(offset) {
-    if (offset && offset <= 0) {
-      return;
-    }
-    const layerIndex = this.getLayerIndex();
-    if (layerIndex > 0) {
-      const targetIndex = offset ? layerIndex - offset : 0;
-      this.item.layerIndex = this.$item.layerIndex = targetIndex < 0 ? 0 : targetIndex;
-    }
-  }
-  getLayerIndex() {
-    if (this.item.layerIndex !== void 0) {
-      return this.item.layerIndex;
-    }
-    if (this.gridster.$options.defaultLayerIndex !== void 0) {
-      return this.gridster.$options.defaultLayerIndex;
-    }
-    return 0;
-  }
-  static \u0275fac = \u0275\u0275ngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: core_exports, type: _GridsterItemComponent, deps: [{ token: ElementRef }, { token: GridsterComponent }, { token: Renderer2 }, { token: NgZone }], target: FactoryTarget.Component });
-  static \u0275cmp = \u0275\u0275ngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: _GridsterItemComponent, isStandalone: true, selector: "gridster-item", inputs: { item: "item" }, outputs: { itemInit: "itemInit", itemChange: "itemChange", itemResize: "itemResize" }, host: { properties: { "style.z-index": "this.zIndex" } }, usesOnChanges: true, ngImport: core_exports, template: '<ng-content></ng-content>\n@if (resize.resizableHandles?.s && resize.resizeEnabled) {\n<div\n  (mousedown)="resize.dragStartDelay($event)"\n  (touchstart)="resize.dragStartDelay($event)"\n  class="gridster-item-resizable-handler handle-s"\n></div>\n} @if (resize.resizableHandles?.e && resize.resizeEnabled) {\n<div\n  (mousedown)="resize.dragStartDelay($event)"\n  (touchstart)="resize.dragStartDelay($event)"\n  class="gridster-item-resizable-handler handle-e"\n></div>\n} @if (resize.resizableHandles?.n && resize.resizeEnabled) {\n<div\n  (mousedown)="resize.dragStartDelay($event)"\n  (touchstart)="resize.dragStartDelay($event)"\n  class="gridster-item-resizable-handler handle-n"\n></div>\n} @if (resize.resizableHandles?.w && resize.resizeEnabled) {\n<div\n  (mousedown)="resize.dragStartDelay($event)"\n  (touchstart)="resize.dragStartDelay($event)"\n  class="gridster-item-resizable-handler handle-w"\n></div>\n} @if (resize.resizableHandles?.se && resize.resizeEnabled) {\n<div\n  (mousedown)="resize.dragStartDelay($event)"\n  (touchstart)="resize.dragStartDelay($event)"\n  class="gridster-item-resizable-handler handle-se"\n></div>\n} @if (resize.resizableHandles?.ne && resize.resizeEnabled) {\n<div\n  (mousedown)="resize.dragStartDelay($event)"\n  (touchstart)="resize.dragStartDelay($event)"\n  class="gridster-item-resizable-handler handle-ne"\n></div>\n} @if (resize.resizableHandles?.sw && resize.resizeEnabled) {\n<div\n  (mousedown)="resize.dragStartDelay($event)"\n  (touchstart)="resize.dragStartDelay($event)"\n  class="gridster-item-resizable-handler handle-sw"\n></div>\n} @if (resize.resizableHandles?.nw && resize.resizeEnabled) {\n<div\n  (mousedown)="resize.dragStartDelay($event)"\n  (touchstart)="resize.dragStartDelay($event)"\n  class="gridster-item-resizable-handler handle-nw"\n></div>\n}\n', styles: ["gridster-item{box-sizing:border-box;z-index:1;position:absolute;overflow:hidden;transition:.3s;display:none;background:#fff;-webkit-user-select:text;user-select:text}gridster-item.gridster-item-moving{cursor:move}gridster-item.gridster-item-resizing,gridster-item.gridster-item-moving{transition:0s;z-index:2;box-shadow:0 0 5px 5px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.gridster-item-resizable-handler{position:absolute;z-index:2}.gridster-item-resizable-handler.handle-n{cursor:ns-resize;height:10px;right:0;top:0;left:0}.gridster-item-resizable-handler.handle-e{cursor:ew-resize;width:10px;bottom:0;right:0;top:0}.gridster-item-resizable-handler.handle-s{cursor:ns-resize;height:10px;right:0;bottom:0;left:0}.gridster-item-resizable-handler.handle-w{cursor:ew-resize;width:10px;left:0;top:0;bottom:0}.gridster-item-resizable-handler.handle-ne{cursor:ne-resize;width:10px;height:10px;right:0;top:0}.gridster-item-resizable-handler.handle-nw{cursor:nw-resize;width:10px;height:10px;left:0;top:0}.gridster-item-resizable-handler.handle-se{cursor:se-resize;width:0;height:0;right:0;bottom:0;border-style:solid;border-width:0 0 10px 10px;border-color:transparent}.gridster-item-resizable-handler.handle-sw{cursor:sw-resize;width:10px;height:10px;left:0;bottom:0}gridster-item:hover .gridster-item-resizable-handler.handle-se{border-color:transparent transparent #ccc}\n"], encapsulation: ViewEncapsulation.None });
-};
-\u0275\u0275ngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: core_exports, type: GridsterItemComponent, decorators: [{
-  type: Component,
-  args: [{ selector: "gridster-item", encapsulation: ViewEncapsulation.None, standalone: true, template: '<ng-content></ng-content>\n@if (resize.resizableHandles?.s && resize.resizeEnabled) {\n<div\n  (mousedown)="resize.dragStartDelay($event)"\n  (touchstart)="resize.dragStartDelay($event)"\n  class="gridster-item-resizable-handler handle-s"\n></div>\n} @if (resize.resizableHandles?.e && resize.resizeEnabled) {\n<div\n  (mousedown)="resize.dragStartDelay($event)"\n  (touchstart)="resize.dragStartDelay($event)"\n  class="gridster-item-resizable-handler handle-e"\n></div>\n} @if (resize.resizableHandles?.n && resize.resizeEnabled) {\n<div\n  (mousedown)="resize.dragStartDelay($event)"\n  (touchstart)="resize.dragStartDelay($event)"\n  class="gridster-item-resizable-handler handle-n"\n></div>\n} @if (resize.resizableHandles?.w && resize.resizeEnabled) {\n<div\n  (mousedown)="resize.dragStartDelay($event)"\n  (touchstart)="resize.dragStartDelay($event)"\n  class="gridster-item-resizable-handler handle-w"\n></div>\n} @if (resize.resizableHandles?.se && resize.resizeEnabled) {\n<div\n  (mousedown)="resize.dragStartDelay($event)"\n  (touchstart)="resize.dragStartDelay($event)"\n  class="gridster-item-resizable-handler handle-se"\n></div>\n} @if (resize.resizableHandles?.ne && resize.resizeEnabled) {\n<div\n  (mousedown)="resize.dragStartDelay($event)"\n  (touchstart)="resize.dragStartDelay($event)"\n  class="gridster-item-resizable-handler handle-ne"\n></div>\n} @if (resize.resizableHandles?.sw && resize.resizeEnabled) {\n<div\n  (mousedown)="resize.dragStartDelay($event)"\n  (touchstart)="resize.dragStartDelay($event)"\n  class="gridster-item-resizable-handler handle-sw"\n></div>\n} @if (resize.resizableHandles?.nw && resize.resizeEnabled) {\n<div\n  (mousedown)="resize.dragStartDelay($event)"\n  (touchstart)="resize.dragStartDelay($event)"\n  class="gridster-item-resizable-handler handle-nw"\n></div>\n}\n', styles: ["gridster-item{box-sizing:border-box;z-index:1;position:absolute;overflow:hidden;transition:.3s;display:none;background:#fff;-webkit-user-select:text;user-select:text}gridster-item.gridster-item-moving{cursor:move}gridster-item.gridster-item-resizing,gridster-item.gridster-item-moving{transition:0s;z-index:2;box-shadow:0 0 5px 5px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.gridster-item-resizable-handler{position:absolute;z-index:2}.gridster-item-resizable-handler.handle-n{cursor:ns-resize;height:10px;right:0;top:0;left:0}.gridster-item-resizable-handler.handle-e{cursor:ew-resize;width:10px;bottom:0;right:0;top:0}.gridster-item-resizable-handler.handle-s{cursor:ns-resize;height:10px;right:0;bottom:0;left:0}.gridster-item-resizable-handler.handle-w{cursor:ew-resize;width:10px;left:0;top:0;bottom:0}.gridster-item-resizable-handler.handle-ne{cursor:ne-resize;width:10px;height:10px;right:0;top:0}.gridster-item-resizable-handler.handle-nw{cursor:nw-resize;width:10px;height:10px;left:0;top:0}.gridster-item-resizable-handler.handle-se{cursor:se-resize;width:0;height:0;right:0;bottom:0;border-style:solid;border-width:0 0 10px 10px;border-color:transparent}.gridster-item-resizable-handler.handle-sw{cursor:sw-resize;width:10px;height:10px;left:0;bottom:0}gridster-item:hover .gridster-item-resizable-handler.handle-se{border-color:transparent transparent #ccc}\n"] }]
-}], ctorParameters: () => [{ type: ElementRef, decorators: [{
-  type: Inject,
-  args: [ElementRef]
-}] }, { type: GridsterComponent }, { type: Renderer2, decorators: [{
-  type: Inject,
-  args: [Renderer2]
-}] }, { type: NgZone, decorators: [{
-  type: Inject,
-  args: [NgZone]
-}] }], propDecorators: { item: [{
-  type: Input
-}], itemInit: [{
-  type: Output
-}], itemChange: [{
-  type: Output
-}], itemResize: [{
-  type: Output
-}], zIndex: [{
-  type: HostBinding,
-  args: ["style.z-index"]
-}] } });
-var GridsterModule = class _GridsterModule {
-  static \u0275fac = \u0275\u0275ngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: core_exports, type: _GridsterModule, deps: [], target: FactoryTarget.NgModule });
-  static \u0275mod = \u0275\u0275ngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.13", ngImport: core_exports, type: _GridsterModule, imports: [GridsterComponent, GridsterItemComponent], exports: [GridsterComponent, GridsterItemComponent] });
-  static \u0275inj = \u0275\u0275ngDeclareInjector({ minVersion: "12.0.0", version: "20.3.13", ngImport: core_exports, type: _GridsterModule });
-};
-\u0275\u0275ngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: core_exports, type: GridsterModule, decorators: [{
-  type: NgModule,
-  args: [{
-    imports: [GridsterComponent, GridsterItemComponent],
-    exports: [GridsterComponent, GridsterItemComponent]
-  }]
-}] });
-
-// angular:jit:style:inline:src\app\pages\dashboard\components\widget-host\widget-host.component.ts;CiAgICA6aG9zdCB7IGRpc3BsYXk6YmxvY2s7IHdpZHRoOjEwMCU7IGhlaWdodDoxMDAlOyB9CiAgICAud2lkZ2V0LXNoZWxsIHsgd2lkdGg6MTAwJTsgaGVpZ2h0OjEwMCU7IH0KICAgIC53aWRnZXQtc2hlbGxbZGF0YS1maXQ9InNjcm9sbCJdIHsgb3ZlcmZsb3c6IGF1dG87IH0KICAgIC53aWRnZXQtc2hlbGxbZGF0YS1maXQ9InJlc3BvbnNpdmUiXSB7IG92ZXJmbG93OiBoaWRkZW47IH0KICAgIC53aWRnZXQtc2hlbGxbZGF0YS1maXQ9InNjYWxlIl0geyBvdmVyZmxvdzogaGlkZGVuOyB9CiAgICAud2lkZ2V0LXNjYWxlIHsgd2lkdGg6MTAwJTsgaGVpZ2h0OjEwMCU7IH0KICAgIA==
-var widget_host_component_default = "/* angular:styles/component:less;eedd081fc02c0d27f6ae4957e9501c8e6c07e15b995f5314c47fc7628829f6cd;D:\\ng-manager\\webapp\\src\\app\\pages\\dashboard\\components\\widget-host\\widget-host.component.ts */\n:host {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n.widget-shell {\n  width: 100%;\n  height: 100%;\n}\n.widget-shell[data-fit=scroll] {\n  overflow: auto;\n}\n.widget-shell[data-fit=responsive] {\n  overflow: hidden;\n}\n.widget-shell[data-fit=scale] {\n  overflow: hidden;\n}\n.widget-scale {\n  width: 100%;\n  height: 100%;\n}\n/*# sourceMappingURL=widget-host.component.css.map */\n";
-
-// angular:jit:style:inline:src\app\pages\dashboard\components\widgets\kill-port\kill-port-widget.component.ts;CiAgICAgIC5sb2dvIHsKICAgICAgICBkaXNwbGF5OiBmbGV4OwogICAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAgICAgICAgZ2FwOiA4cHg7CiAgICAgICAgcGFkZGluZzogMTJweCAyNHB4OwogICAgICAgIC5pY29uLXdyYXBwZXJ7CiAgICAgICAgICB3aWR0aDogMzJweDsKICAgICAgICAgIGhlaWdodDogMzJweDsKICAgICAgICAgIGZsZXg6IDAgMCBhdXRvOwogICAgICAgICAgZGlzcGxheTogZmxleDsKICAgICAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAgICAgICAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWFwcC1ncmF5KTsKICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDUwJSA1MCU7CiAgICAgICAgICBuei1pY29uIHsKICAgICAgICAgICAgZm9udC1zaXplOiAyMHB4OwogICAgICAgICAgIGNvbG9yOiB2YXIoLS1hcHAtcHJpbWFyeS01KTsKICAgICAgICAgIH0KICAgICAgICB9CiAgICAgICAgaDN7CiAgICAgICAgICBmbGV4OjEgMSBhdXRvOwogICAgICAgICAgZm9udC1zaXplOiAxOHB4OwogICAgICAgICAgbWFyZ2luOiAwOwogICAgICAgICAgZm9udC13ZWlnaHQ6IDUwMDsKICAgICAgICB9CiAgICAgIH0KICAgIA==
-var kill_port_widget_component_default = "/* angular:styles/component:less;e7a36c16014557c6fe4d8b012f4dd11a3014b7fe15e959c779063758022e9dcd;D:\\ng-manager\\webapp\\src\\app\\pages\\dashboard\\components\\widgets\\kill-port\\kill-port-widget.component.ts */\n.logo {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 24px;\n}\n.logo .icon-wrapper {\n  width: 32px;\n  height: 32px;\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--app-gray);\n  border-radius: 50% 50%;\n}\n.logo .icon-wrapper nz-icon {\n  font-size: 20px;\n  color: var(--app-primary-5);\n}\n.logo h3 {\n  flex: 1 1 auto;\n  font-size: 18px;\n  margin: 0;\n  font-weight: 500;\n}\n/*# sourceMappingURL=kill-port-widget.component.css.map */\n";
-
-// angular:jit:style:inline:src\app\pages\dashboard\components\widgets\widget-base.component.ts;CiAgICA6aG9zdCB7CiAgICAgICAgZGlzcGxheTogYmxvY2s7CiAgICAgICAgaGVpZ2h0OiAxMDAlOwogICAgfQoKICAgIC53aWRnZXQgewogICAgICAgIGhlaWdodDogMTAwJTsKICAgICAgICBwYWRkaW5nOiAxMnB4IDA7CiAgICAgICAgZGlzcGxheTogZmxleDsKICAgICAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uOwogICAgfQogICAgLmhlYWRlciB7CiAgICAgICAgZmxleCA6IDAgMCBhdXRvOwogICAgICAgIHBhZGRpbmc6MCAgMTZweDsKICAgICAgICBkaXNwbGF5OiBmbGV4OwogICAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAgICAgICAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuOwogICAgfQogICAgLnRpdGxlIHsKICAgICAgICBmb250LXNpemU6IDE4cHg7CiAgICAgICAgZm9udC13ZWlnaHQ6IDYwMDsKICAgICAgICBmbGV4OiAxIDEgYXV0bzsKICAgICAgICBvcGFjaXR5OiAwLjU7CiAgICB9CgogICAgLmFjdGlvbnMgewogICAgICAgIGZsZXg6IDAgMCBhdXRvOwogICAgfQoKICAgIC5jb250ZW50IHsKICAgICAgICBmbGV4OiAxIDEgYXV0bzsKICAgICAgICBkaXNwbGF5OiBmbGV4OwogICAgICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47CiAgICAgICAgd2lkdGg6IDEwMCU7CiAgICAgICAgaGVpZ2h0OiAwOwogICAgICAgIG92ZXJmbG93OiBoaWRkZW47IAogICAgfQogIA==
-var widget_base_component_default = "/* angular:styles/component:less;2c8ea08b71cb50bfb6e4b8048c789ba51268fb2af60482ef9226740649d8d8de;D:\\ng-manager\\webapp\\src\\app\\pages\\dashboard\\components\\widgets\\widget-base.component.ts */\n:host {\n  display: block;\n  height: 100%;\n}\n.widget {\n  height: 100%;\n  padding: 12px 0;\n  display: flex;\n  flex-direction: column;\n}\n.header {\n  flex: 0 0 auto;\n  padding: 0 16px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n.title {\n  font-size: 18px;\n  font-weight: 600;\n  flex: 1 1 auto;\n  opacity: 0.5;\n}\n.actions {\n  flex: 0 0 auto;\n}\n.content {\n  flex: 1 1 auto;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 0;\n  overflow: hidden;\n}\n/*# sourceMappingURL=widget-base.component.css.map */\n";
-
-// src/app/pages/dashboard/components/widgets/widget-base.component.ts
-var WidgetBaseComponent = class WidgetBaseComponent2 {
-  item;
-  static propDecorators = {
-    item: [{ type: Input }]
-  };
-};
-WidgetBaseComponent = __decorate([
-  Component({
-    selector: "app-widget-base",
-    imports: [CommonModule, NzButtonModule, NzIconModule],
-    template: `
-    <div class="widget">
-      <div class="header">
-        <div class="title">{{ item.title }}</div>
-          @if(item.configurable){
-          <div class="actions">
-            <ng-content select="actions"></ng-content>
-          </div>
-          }
-      </div>
-      <div class="content">
-        <ng-content></ng-content>
-      </div>
-    </div>
-  `,
-    styles: [widget_base_component_default]
-  })
-], WidgetBaseComponent);
-
-// src/app/pages/dashboard/components/widgets/kill-port/kill-port-widget.component.ts
-var KillPortWidgetComponent = class KillPortWidgetComponent2 {
-  item;
-  port = "";
-  api = inject(DashboardApiService);
-  msg = inject(NzMessageService);
-  spin = signal(false);
-  isPortValid() {
-    const portNumber = Number(this.port);
-    return Number.isInteger(portNumber) && portNumber > 0 && portNumber <= 65535;
-  }
-  killPort() {
-    if (!this.isPortValid()) {
-      this.msg.error("\u8BF7\u8F93\u5165\u6709\u6548\u7684\u7AEF\u53E3\u53F7\uFF081-65535\uFF09");
-      return;
-    }
-    this.spin.set(true);
-    this.api.killPort(Number(this.port)).subscribe({
-      next: (res) => {
-        if (res.killed.length === 0) {
-          this.msg.info(`\u7AEF\u53E3 ${this.port} \u6CA1\u6709\u88AB\u4EFB\u4F55\u8FDB\u7A0B\u5360\u7528`);
-          return;
-        }
-        this.port = "";
-        this.msg.success(`\u7AEF\u53E3 ${this.port} \u5DF2\u88AB\u7EC8\u6B62`);
-      },
-      error: (err) => {
-        console.error("Kill port error", err);
-        this.msg.error(`\u65E0\u6CD5\u7EC8\u6B62\u7AEF\u53E3 ${this.port}\uFF1A${err.message || err}`);
-      },
-      complete: () => {
-        this.spin.set(false);
-      }
-    });
-  }
-  static propDecorators = {
-    item: [{ type: Input }]
-  };
-};
-KillPortWidgetComponent = __decorate([
-  Component({
-    selector: "app-kill-port-widget",
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [
-      CommonModule,
-      FormsModule,
-      WidgetBaseComponent,
-      NzIconModule,
-      NzInputModule,
-      NzSpaceModule,
-      NzButtonModule
-    ],
-    template: `
-    <app-widget-base [item]="item">
-      <div class="logo">
-        <div class="icon-wrapper">
-          <nz-icon nzType="thunderbolt" nzTheme="outline" />
-        </div>
-        <h3>\u51C6\u5907\u597D\u7EC8\u6B62</h3>
-      </div>
-      <nz-space style="padding: 12px 24px;">
-        <input nz-input placeholder="\u8F93\u5165\u4E00\u4E2A\u7F51\u7EDC\u7AEF\u53E3" name="port" [(ngModel)]="port"  (keydown.enter)="killPort()" />
-        <button nz-button nzType="primary"  (click)="killPort()">
-          <nz-icon [nzType]="spin()?'loading' : 'thunderbolt'" nzTheme="outline" />
-          \u7EC8\u6B62
-        </button>
-      </nz-space>
-    </app-widget-base>
-  `,
-    styles: [kill_port_widget_component_default]
-  })
-], KillPortWidgetComponent);
-
-// angular:jit:template:src\app\pages\dashboard\components\widgets\news-feed\news-feed-widget.component.html
-var news_feed_widget_component_default = `<app-widget-base [item]="item">\r
-  <ng-container ngProjectAs="actions">\r
-    <button nz-button nzType="link" nzSize="small" (click)="reload()">\r
-      <nz-icon [nzType]="loading() ? 'loading' : 'reload'" nzTheme="outline" />\r
-    </button>\r
-    <button nz-button nzType="link" nzSize="small" (click)="openConfig()">\r
-      <nz-icon nzType="setting" nzTheme="outline" />\r
-    </button>\r
-    <!-- <button nz-button nzType="link" nzSize="small">\r
-          <nz-icon nzType="fullscreen" nzTheme="outline" />\r
-        </button> -->\r
-  </ng-container>\r
-  <div class="news-feed-widget">\r
-    @if (!hasConfig()) {\r
-      <div class="empty">\r
-        <div class="hint">\u672A\u914D\u7F6E RSS \u6E90</div>\r
-        <button nz-button nzType="default" nzSize="small" (click)="openConfig()">\u53BB\u914D\u7F6E</button>\r
-      </div>\r
-    } @else {\r
-      @if (errorMsg()) {\r
-        <div class="error">\r
-          <p>{{ errorMsg() }}</p>\r
-          <button nz-button nzType="link" nzSize="small" (click)="reload(true)">\u91CD\u8BD5</button>\r
-        </div>\r
-      } @else {\r
-        <div class="list">\r
-          @for (it of feedItems(); track it.link) {\r
-            <a class="row" [href]="it.link" target="_blank" rel="noreferrer">\r
-              <div class="t">{{ it.title }}</div>\r
-              <div class="m">\r
-                @if (it.pubDate) {\r
-                  <span class="d">{{ it.pubDate | date: 'yyyy-MM-dd HH:mm' }}</span>\r
-                }\r
-                @if (it.author) {\r
-                  <span class="a">{{ it.author }}</span>\r
-                }\r
-              </div>\r
-            </a>\r
-          }\r
-        </div>\r
-      }\r
-    }\r
-  </div>\r
-</app-widget-base>\r
-<nz-modal\r
-  nzCentered\r
-  [(nzVisible)]="isModalVisible"\r
-  nzTitle="\u914D\u7F6E\u90E8\u4EF6"\r
-  (nzOnCancel)="isModalVisible.set(false)"\r
-  [nzMaskClosable]="false"\r
->\r
-  <ng-container *nzModalContent>\r
-    <div class="modal-body">\r
-      <label>RSS\u6E90\u5730\u5740</label>\r
-      <nz-input-wrapper>\r
-        <input nz-input placeholder="\u8BF7\u8F93\u5165RSS\u6E90\u5730\u5740" [(ngModel)]="rssUrl" style="width: 100%" />\r
-        <nz-icon nzType="global" nzTheme="outline" nzInputPrefix />\r
-      </nz-input-wrapper>\r
-    </div>\r
-  </ng-container>\r
-\r
-  <ng-container *nzModalFooter>\r
-    <button nz-button nzType="primary" (click)="save()" [disabled]="!rssUrl().trim()">\u4FDD\u5B58</button>\r
-  </ng-container>\r
-</nz-modal>\r
-`;
-
-// angular:jit:style:src\app\pages\dashboard\components\widgets\news-feed\news-feed-widget.component.less
-var news_feed_widget_component_default2 = "/* src/app/pages/dashboard/components/widgets/news-feed/news-feed-widget.component.less */\n.news-feed-widget {\n  padding: 8px 12px;\n  height: 100%;\n  overflow: auto;\n}\n.empty {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  opacity: 0.75;\n}\n.list {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.row {\n  display: block;\n  padding: 8px;\n  border-radius: 8px;\n  text-decoration: none;\n  border: 1px solid rgba(0, 0, 0, 0.06);\n}\n.row:hover {\n  background: rgba(0, 0, 0, 0.02);\n}\n.t {\n  font-size: 13px;\n  line-height: 1.3;\n  color: rgba(0, 0, 0, 0.88);\n}\n.m {\n  margin-top: 4px;\n  display: flex;\n  gap: 10px;\n  font-size: 12px;\n  color: rgba(0, 0, 0, 0.45);\n}\n.error {\n  display: flex;\n  gap: 8px;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  color: #d4380d;\n}\n.error p {\n  width: 100%;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n.loading {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  opacity: 0.75;\n}\n.modal-body {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n}\n.modal-body label {\n  flex: 0 0 auto;\n  margin-right: 16px;\n  display: inline-block;\n  width: 100px;\n}\n.modal-body input {\n  flex: 1;\n  margin-left: 16px;\n}\n/*# sourceMappingURL=news-feed-widget.component.css.map */\n";
-
-// src/app/pages/dashboard/services/rss.service.ts
-var RssService = class RssService2 {
-  api = inject(ApiClient);
-  /**
-   * 预览 RSS 订阅源
-   * @param url RSS 订阅源 URL
-   * @param opts 选项
-   *  - limit: 限制返回的条目数量，默认 20
-   *  - force: 是否强制刷新，默认 false
-   *  - cacheSec: 缓存时间，单位秒，默认 300
-   * @returns RSS 订阅源内容
-   */
-  preview(url, opts) {
-    let params = new HttpParams().set("url", url);
-    if (opts?.limit)
-      params = params.set("limit", String(opts.limit));
-    if (opts?.cacheSec)
-      params = params.set("cacheSec", String(opts.cacheSec));
-    if (opts?.force)
-      params = params.set("force", "1");
-    return this.api.get("/api/rss/preview", params);
-  }
-};
-RssService = __decorate([
-  Injectable({
-    providedIn: "root"
-  })
-], RssService);
-
-// src/app/pages/dashboard/components/widgets/news-feed/news-feed-widget.component.ts
-var NewsFeedWidgetComponent = class NewsFeedWidgetComponent2 {
-  item;
-  layout = inject(DashboardLayoutService);
-  rss = inject(RssService);
-  cdr = inject(ChangeDetectorRef);
-  curConfig = signal(null);
-  rssUrl = signal("");
-  isModalVisible = signal(false);
-  loading = signal(false);
-  feedTitle = signal("");
-  feedItems = signal([]);
-  errorMsg = signal("");
-  hasConfig = computed(() => !!this.curConfig()?.rssUrl?.trim());
-  ngOnChanges(changes) {
-    if (changes["item"] && changes["item"].currentValue) {
-      const cfg = this.item?.config;
-      this.curConfig.set(cfg ? __spreadValues({}, cfg) : null);
-      if (cfg?.rssUrl)
-        this.reload(false);
-    }
-  }
-  openConfig() {
-    const cfg = this.item?.config;
-    this.rssUrl.set(cfg?.rssUrl ?? "");
-    this.isModalVisible.set(true);
-  }
-  reload(force = true) {
-    const cfg = this.curConfig() ?? this.item?.config;
-    const url = (cfg?.rssUrl ?? "").trim();
-    if (!url)
-      return;
-    this.loading.set(true);
-    this.errorMsg.set("");
-    const limit = cfg?.limit ?? 20;
-    const cacheSec = cfg?.cacheSec ?? 300;
-    this.rss.preview(url, { limit, cacheSec, force }).subscribe({
-      next: (data) => {
-        this.loading.set(false);
-        this.feedTitle.set(data.title ?? "");
-        this.feedItems.set(data.items ?? []);
-        if (this.feedTitle()) {
-          this.item.title = this.feedTitle();
-          this.cdr.markForCheck();
-        }
-      },
-      error: (err) => {
-        this.errorMsg.set(err?.error?.detail || err?.message || "\u52A0\u8F7D\u5931\u8D25");
-        this.loading.set(false);
-      }
-    });
-  }
-  save() {
-    const pid = this.item.projectId;
-    const rssUrl = (this.rssUrl() ?? "").trim();
-    if (!pid || !rssUrl)
-      return;
-    const prev = this.item?.config ?? {};
-    const next = __spreadProps(__spreadValues({}, prev), {
-      rssUrl,
-      limit: prev.limit ?? 20,
-      cacheSec: prev.cacheSec ?? 300
-    });
-    this.item.config = next;
-    this.curConfig.set(next);
-    this.layout.updateConfig(pid, this.item.id, next);
-    this.isModalVisible.set(false);
-    this.reload(true);
-  }
-  static propDecorators = {
-    item: [{ type: Input }]
-  };
-};
-NewsFeedWidgetComponent = __decorate([
-  Component({
-    selector: "app-news-feed-widget",
-    imports: [
-      CommonModule,
-      FormsModule,
-      NzInputModule,
-      NzButtonModule,
-      WidgetBaseComponent,
-      NzModalModule,
-      NzIconModule
-    ],
-    template: news_feed_widget_component_default,
-    styles: [news_feed_widget_component_default2]
-  })
-], NewsFeedWidgetComponent);
-
-// angular:jit:template:src\app\pages\dashboard\components\widgets\quick-task\quick-task-widget.component.html
-var quick_task_widget_component_default = `<app-widget-base [item]="item">\r
-  <ng-container ngProjectAs="actions">\r
-    <button nz-button nzType="link" nzSize="small" (click)="openConfig()">\r
-      <nz-icon nzType="setting" nzTheme="outline" />\r
-    </button>\r
-  </ng-container>\r
-  @if (item.configurable) {\r
-    <div class="configured-info" [class.no-config]="curConfig() === null">\r
-      @if (curConfig() === null) {\r
-        <nz-icon nzType="setting" nzTheme="fill" />\r
-        <button nz-button (click)="openConfig()" nzType="primary">\u914D\u7F6E\u90E8\u4EF6</button>\r
-      } @else {\r
-        <div class="item">\r
-          <div class="row" [nz-tooltip]="curConfig()?.description ?? ''" nzTooltipPlacement="right">\r
-            <div class="icon">\r
-              <nz-icon nzType="codepen-circle" nzTheme="outline" />\r
-              @if (curRuntime().status === 'running') {\r
-                <nz-badge nzStatus="processing" />\r
-              } @else if (curRuntime().status === 'stopping') {\r
-                <nz-badge nzStatus="warning" />\r
-              } @else {\r
-                <nz-badge nzStatus="default" />\r
-              }\r
-            </div>\r
-\r
-            <div class="info">\r
-              <div class="name" [title]="curConfig()?.taskName">{{ curConfig()?.taskName }}</div>\r
-              <div class="description">\r
-                {{\r
-                  curRuntime().status === 'running'\r
-                    ? '\u8FD0\u884C\u4E2D'\r
-                    : curRuntime().status === 'stopping'\r
-                      ? '\u505C\u6B62\u4E2D'\r
-                      : curRuntime().status === 'stopped'\r
-                        ? '\u5DF2\u505C\u6B62'\r
-                        : curConfig()?.description || '\u7A7A\u95F2\u4E2D'\r
-                }}\r
-              </div>\r
-            </div>\r
-          </div>\r
-        </div>\r
-        <div class="actions">\r
-          <app-task-actions\r
-            [isRunning]="isRunning()"\r
-            [isStopping]="isStopping()"\r
-            [isStopped]="isStopped()"\r
-            (toggle)="toggleTask()"\r
-          ></app-task-actions>\r
-          <button nz-button (click)="goToTask()" nzType="default">\r
-            <nz-icon nzType="schedule" nzTheme="outline" />\r
-            \u524D\u5F80\u4EFB\u52A1\u9875\r
-          </button>\r
-        </div>\r
-      }\r
-    </div>\r
-  }\r
-</app-widget-base>\r
-<nz-modal\r
-  nzCentered\r
-  [(nzVisible)]="isModalVisible"\r
-  nzTitle="\u914D\u7F6E\u90E8\u4EF6"\r
-  (nzOnCancel)="isModalVisible.set(false)"\r
-  [nzMaskClosable]="false"\r
->\r
-  <ng-container *nzModalContent>\r
-    <div class="modal-body">\r
-      <label>\u9009\u62E9\u4E00\u9879\u4EFB\u52A1</label>\r
-      <nz-select\r
-        nzPlaceHolder="\u8BF7\u9009\u62E9\u4EFB\u52A1"\r
-        [(ngModel)]="selectedTaskId"\r
-        [nzLoading]="loading()"\r
-        [nzDisabled]="loading()"\r
-        style="width: 100%"\r
-      >\r
-        @for (opt of taskOptions(); track opt.value) {\r
-          <nz-option [nzLabel]="opt.label" [nzValue]="opt.value"></nz-option>\r
-        }\r
-      </nz-select>\r
-    </div>\r
-  </ng-container>\r
-\r
-  <ng-container *nzModalFooter>\r
-    <button nz-button nzType="primary" (click)="save()" [disabled]="!selectedTaskId">\u4FDD\u5B58</button>\r
-  </ng-container>\r
-</nz-modal>\r
-`;
-
-// angular:jit:style:src\app\pages\dashboard\components\widgets\quick-task\quick-task-widget.component.less
-var quick_task_widget_component_default2 = '/* src/app/pages/dashboard/components/widgets/quick-task/quick-task-widget.component.less */\n.configured-info {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  width: 100%;\n  height: 100%;\n}\n.configured-info.no-config {\n  gap: 20px;\n}\n.configured-info.no-config nz-icon {\n  font-size: 48px;\n  color: var(--app-gray);\n}\n.configured-info .actions {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  justify-content: center;\n  gap: 8px;\n}\n.item {\n  width: 100%;\n  padding: 12px 16px;\n  cursor: pointer;\n}\n.item:hover,\n.item.active {\n  background: var(--app-primary-3);\n}\n.item .row {\n  display: flex;\n  gap: 10px;\n  align-items: center;\n  overflow: hidden;\n  justify-content: space-between;\n}\n.item .row .icon {\n  font-size: 36px;\n  flex: 0 0 auto;\n  position: relative;\n}\n.item .row .info {\n  flex: 1 1 auto;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  overflow: hidden;\n}\n.item .row .info .name {\n  font-weight: 600;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.item .row .info .description {\n  font-size: 13px;\n  color: var(--app-text-secondary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.item .badge {\n  font-size: 12px;\n  padding: 2px 8px;\n  border-radius: 999px;\n  border: 1px solid rgba(0, 0, 0, 0.2);\n  opacity: 0.85;\n}\n.item .badge[data-status=running] {\n  font-weight: 700;\n}\n.item .badge[data-status=stopped] {\n  opacity: 0.7;\n}\n.item .badge[data-status=failed] {\n  font-weight: 700;\n}\n.item .meta {\n  margin-top: 6px;\n  font-size: 12px;\n  opacity: 0.75;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n.item .meta .mono {\n  font-family:\n    ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    Consolas,\n    "Liberation Mono",\n    monospace;\n}\n.item .meta .sep {\n  opacity: 0.5;\n}\n.modal-body {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n}\n.modal-body label {\n  flex: 0 0 auto;\n  margin-right: 16px;\n  display: inline-block;\n  width: 120px;\n}\n.modal-body nz-select {\n  flex: 1;\n  margin-left: 16px;\n}\n/*# sourceMappingURL=quick-task-widget.component.css.map */\n';
-
-// src/app/pages/dashboard/components/widgets/quick-task/quick-task-widget.component.ts
-var QuickTaskWidgetComponent = class QuickTaskWidgetComponent2 {
-  item;
-  taskState = inject(TaskStateService);
-  layout = inject(DashboardLayoutService);
-  router = inject(Router);
-  isModalVisible = signal(false);
-  loading = signal(false);
-  curConfig = signal(null);
-  curRuntime = computed(() => {
-    const cfg = this.curConfig();
-    if (!cfg)
-      return { status: "idle" };
-    const taskId = cfg.taskId;
-    return this.taskState.getRuntime(taskId) || { status: "idle" };
-  });
-  isRunning = computed(() => this.curRuntime().status === "running");
-  isStopping = computed(() => this.curRuntime().status === "stopping");
-  isStopped = computed(() => {
-    const st = this.curRuntime().status;
-    return st === "idle" || st === "stopped" || st === "failed" || st === "success";
-  });
-  selectedTaskId = "";
-  /** 当前项目任务 rows */
-  rowsOfProject = computed(() => {
-    const pid = this.item.projectId;
-    if (!pid)
-      return [];
-    return this.taskState.rowsViewOf(pid)();
-  });
-  taskOptions = computed(() => {
-    const rows = this.rowsOfProject();
-    return rows.map((r) => ({
-      value: r.spec.id,
-      label: r.spec.name ?? r.spec.id,
-      description: r.spec.description ?? ""
-    }));
-  });
-  ngOnChanges(changes) {
-    if (changes["item"]) {
-      const cfg = this.item?.config;
-      this.curConfig.set(cfg ? __spreadValues({}, cfg) : null);
-    }
-  }
-  async openConfig() {
-    const pid = this.item.projectId;
-    if (!pid) {
-      this.isModalVisible.set(false);
-      return;
-    }
-    const cfg = this.item?.config;
-    this.selectedTaskId = cfg?.taskId ?? "";
-    this.isModalVisible.set(true);
-    this.loading.set(true);
-    try {
-      await this.taskState.ensureProjectLoaded(pid);
-    } finally {
-      this.loading.set(false);
-    }
-  }
-  save() {
-    const pid = this.item.projectId;
-    const taskId = (this.selectedTaskId ?? "").trim();
-    if (!pid || !taskId)
-      return;
-    const taskItem = this.rowsOfProject().find((r) => r.spec.id === taskId);
-    const taskName = taskItem?.spec.name ?? "";
-    const description = taskItem?.spec.description ?? "";
-    const next = { taskId, taskName, description };
-    this.item.config = next;
-    this.curConfig.set(next);
-    this.layout.updateConfig(pid, this.item.id, next);
-    this.isModalVisible.set(false);
-  }
-  toggleTask() {
-    if (this.curConfig() == null || !this.curConfig().taskId)
-      return;
-    const taskId = this.curConfig().taskId;
-    if (this.isRunning()) {
-      this.taskState.stopSelected(taskId);
-    } else if (this.isStopped()) {
-      this.taskState.startSelected(taskId);
-    }
-    this.goToTask();
-  }
-  async goToTask() {
-    const cfg = this.curConfig();
-    if (!cfg)
-      return;
-    const taskId = cfg.taskId;
-    this.taskState.select(taskId);
-    await this.router.navigate(["/tasks"]);
-  }
-  static propDecorators = {
-    item: [{ type: Input }]
-  };
-};
-QuickTaskWidgetComponent = __decorate([
-  Component({
-    selector: "app-quick-task-widget",
-    imports: [
-      CommonModule,
-      FormsModule,
-      WidgetBaseComponent,
-      NzButtonModule,
-      NzIconModule,
-      NzModalModule,
-      NzSelectModule,
-      NzBadgeModule,
-      NzTooltipModule,
-      TaskActionsComponent
-    ],
-    template: quick_task_widget_component_default,
-    styles: [quick_task_widget_component_default2]
-  })
-], QuickTaskWidgetComponent);
-
-// angular:jit:style:src\app\pages\dashboard\components\widgets\welcome\welcome-widget.component.less
-var welcome_widget_component_default = "/* src/app/pages/dashboard/components/widgets/welcome/welcome-widget.component.less */\n.logo {\n  width: 70px;\n  height: 70px;\n  border-radius: 50% 50%;\n  background-color: var(--app-primary-2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: 0 auto 16px auto;\n}\n.logo nz-icon {\n  font-size: 50px;\n}\nh2 {\n  text-align: center;\n  font-weight: 600;\n  flex: 0 0 auto;\n  margin-bottom: 8px;\n}\n.footer {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 30px 0;\n}\n.item {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 24px 16px;\n}\n.item p {\n  margin-bottom: 0;\n}\n.item .icon-wrapper {\n  width: 50px;\n  height: 50px;\n  margin-right: 12px;\n  flex: 0 0 auto;\n  background-color: var(--app-gray);\n  border-radius: 50% 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.item .icon-wrapper nz-icon {\n  font-size: 24px;\n  color: var(--app-primary-5);\n}\n/*# sourceMappingURL=welcome-widget.component.css.map */\n";
-
-// src/app/pages/dashboard/components/widgets/welcome/welcome-widget.component.ts
-var WelcomeWidgetComponent = class WelcomeWidgetComponent2 {
-  item;
-  removeWidget = new EventEmitter();
-  static propDecorators = {
-    item: [{ type: Input }],
-    removeWidget: [{ type: Output }]
-  };
-};
-WelcomeWidgetComponent = __decorate([
-  Component({
-    selector: "app-welcome-widget",
-    imports: [
-      CommonModule,
-      NzIconModule,
-      NzButtonModule,
-      WidgetBaseComponent
-    ],
-    template: `
-    <app-widget-base [item]="item">
-        <div class="logo">
-          <nz-icon nzType="proj:angular" nzTheme="outline" />
-        </div>
-          <h2>\u6B22\u8FCE\u6765\u5230\u65B0\u9879\u76EE\uFF01</h2>
-          <div class="item">
-            <div class="icon-wrapper">
-              <nz-icon nzType="dashboard" nzTheme="outline" />
-            </div>
-            <p>\u8FD9\u91CC\u662F\u9879\u76EE\u4EEA\u8868\u76D8\uFF0C\u4F60\u53EF\u4EE5\u70B9\u51FB\u53F3\u4E0A\u65B9\u7684\u201C\u81EA\u5B9A\u4E49\u201D\u6309\u94AE\u6765\u6DFB\u52A0\u90E8\u4EF6\u3002\u4F60\u7684\u6539\u52A8\u5C06\u4F1A\u81EA\u52A8\u4FDD\u5B58\u3002</p>
-          </div>
-          <div class="item">
-            <div class="icon-wrapper">
-              <nz-icon nzType="arrow-left" nzTheme="outline" />
-            </div>
-            <p>\u5DE6\u4FA7\u662F\u5404\u4E2A\u7BA1\u7406\u9875\u9762\u3002\u5728\u300C\u63D2\u4EF6\u300D\u9875\u9762\u53EF\u4EE5\u6DFB\u52A0\u65B0\u7684 Vue CLI \u63D2\u4EF6\uFF0C\u300C\u4F9D\u8D56\u300D\u9875\u9762\u7528\u4E8E\u7BA1\u7406\u9879\u76EE\u7684\u4F9D\u8D56\u5305\uFF0C\u300C\u914D\u7F6E\u300D\u9875\u9762\u7528\u4E8E\u914D\u7F6E\u5404\u79CD\u5DE5\u5177\uFF0C\u300C\u4EFB\u52A1\u300D\u9875\u9762\u7528\u4E8E\u8FD0\u884C\u5404\u4E2A\u811A\u672C\uFF08\u6BD4\u5982 webpack \u6253\u5305\uFF09\u3002</p>
-          </div>
-          <div class="item">
-            <div class="icon-wrapper">
-              <nz-icon nzType="home" nzTheme="outline" />
-            </div>
-            <p>\u70B9\u51FB\u5DE6\u4E0A\u65B9\u7684\u4E0B\u62C9\u83DC\u5355\u6216\u72B6\u6001\u680F\u4E0A\u7684\u5C0F\u623F\u5B50\u6309\u94AE\u6765\u8FD4\u56DE\u5230\u9879\u76EE\u7BA1\u7406\u5668\u3002</p>
-          </div>
-        <div class="footer">
-          <button nz-button nzType="primary" routerLink="/projects" nzSize="large" (click)="removeWidget.emit()">
-            <nz-icon nzType="check" nzTheme="outline" />
-            <span> \u4E86\u89E3 </span>
-          </button>
-        </div>
-    </app-widget-base>
-  `,
-    styles: [welcome_widget_component_default]
-  })
-], WelcomeWidgetComponent);
-
-// src/app/pages/dashboard/components/widget-host/widget-host.component.ts
-var WidgetHostComponent = class WidgetHostComponent2 {
-  item;
-  editMode = false;
-  remove = new EventEmitter();
-  static propDecorators = {
-    item: [{ type: Input }],
-    editMode: [{ type: Input }],
-    remove: [{ type: Output }]
-  };
-};
-WidgetHostComponent = __decorate([
-  Component({
-    selector: "app-widget-host",
-    imports: [
-      CommonModule,
-      WelcomeWidgetComponent,
-      QuickTaskWidgetComponent,
-      KillPortWidgetComponent,
-      NewsFeedWidgetComponent
-    ],
-    template: `
-    @if(item){
-        @switch (item.key) {
-        @case ('welcome') { <app-welcome-widget [item]="item" (removeWidget)="remove.emit(item)"></app-welcome-widget> }
-        @case ('quickTasks') { <app-quick-task-widget [item]="item"></app-quick-task-widget> }
-        @case ('killPort') { <app-kill-port-widget [item]="item"></app-kill-port-widget> }
-        @case ('newsFeed') { <app-news-feed-widget [item]="item"></app-news-feed-widget> }
-      }
-    }
-  `,
-    styles: [widget_host_component_default]
-  })
-], WidgetHostComponent);
-
-// src/app/pages/dashboard/components/dashboard-canvas/dashboard-canvas.component.ts
-var DashboardCanvasComponent = class DashboardCanvasComponent2 {
-  editMode = false;
-  items = [];
-  itemsChange = new EventEmitter();
-  remove = new EventEmitter();
-  kill = new EventEmitter();
-  patch = /* @__PURE__ */ new Map();
-  itemChange = (item, itemComp) => {
-    const id = itemComp.item.id;
-    if (!id)
-      return;
-    this.patch.set(id, {
-      x: item.x ?? itemComp.item.x,
-      y: item.y ?? itemComp.item.y,
-      cols: item.cols ?? itemComp.item.cols,
-      rows: item.rows ?? itemComp.item.rows
-    });
-  };
-  itemResize = (item, itemComp) => {
-  };
-  options = {
-    gridType: GridType.Fixed,
-    fixedColWidth: 90,
-    fixedRowHeight: 90,
-    margin: 10,
-    outerMargin: true,
-    compactType: CompactType.None,
-    pushItems: true,
-    // 调试时可开网格线，正式关掉
-    displayGrid: DisplayGrid.None,
-    resizable: {
-      enabled: true,
-      stop: () => this.emitSync()
-    },
-    draggable: {
-      enabled: false,
-      // ignoreContent: true,
-      // dragHandleClass: 'drag-handle', //  只允许手柄拖动
-      stop: () => this.emitSync()
-    },
-    itemChangeCallback: this.itemChange,
-    itemResizeCallback: this.itemResize
-  };
-  ngOnChanges(changes) {
-    const editMode = changes["editMode"];
-    if (editMode && editMode.currentValue != editMode.previousValue) {
-      this.options = __spreadProps(__spreadValues({}, this.options), {
-        draggable: __spreadProps(__spreadValues({}, this.options.draggable), { enabled: this.editMode }),
-        resizable: __spreadProps(__spreadValues({}, this.options.resizable), { enabled: this.editMode }),
-        fixedColWidth: this.editMode ? 70 : 90,
-        fixedRowHeight: this.editMode ? 70 : 90
-      });
-    }
-  }
-  emitSync() {
-    const next = this.items.map((it) => {
-      const p = this.patch.get(it.id);
-      return p ? __spreadValues(__spreadValues({}, it), p) : it;
-    });
-    this.patch.clear();
-    this.itemsChange.emit(next);
-  }
-  static propDecorators = {
-    editMode: [{ type: Input }],
-    items: [{ type: Input }],
-    itemsChange: [{ type: Output }],
-    remove: [{ type: Output }],
-    kill: [{ type: Output }]
-  };
-};
-DashboardCanvasComponent = __decorate([
-  Component({
-    selector: "app-dashboard-canvas",
-    standalone: true,
-    imports: [
-      CommonModule,
-      NzButtonModule,
-      NzIconModule,
-      GridsterComponent,
-      GridsterItemComponent,
-      WidgetHostComponent
-    ],
-    template: `
-    <gridster [options]="options">
-      @for (it of items; track it.id) {
-        <gridster-item [item]="it">
-          <div class="card" [class.edit-mode]="editMode">
-            <!-- \u7F16\u8F91\u6001\u906E\u7F69 -->
-            @if (editMode) {
-              <div class="card-overlay" aria-hidden="true">
-                <button nz-button nzType="primary" nzSize="large">
-                  <i nz-icon [nzType]="it.icon || 'appstore'" nzTheme="outline"></i>
-                  {{ it.title }}
-                </button>
-              </div>
-              <button nz-button nzType="text" nzSize="small" nz-tooltip="\u79FB\u9664\u90E8\u4EF6" class="remove-button" (click)="remove.emit(it.id)">
-                <nz-icon nzType="close" nzTheme="outline" />
-              </button>
-            }
-            <div class="card-body">
-              <app-widget-host [item]="it" [editMode]="editMode" (remove)="remove.emit($event.id)"></app-widget-host>
-            </div>
-          </div>
-        </gridster-item>
-      }
-    </gridster>
-  `,
-    styles: [dashboard_canvas_component_default]
-  })
-], DashboardCanvasComponent);
-
-// src/app/pages/dashboard/dashboard.component.ts
-var DashboardComponent = class DashboardComponent2 {
-  projectContext = inject(ProjectContextStore);
-  layout = inject(DashboardLayoutService);
-  envInjector = inject(EnvironmentInjector);
-  projectId = computed(() => this.projectContext.currentProjectId() || "");
-  editMode = signal(false);
-  items = computed(() => this.layout.items());
-  constructor() {
-    effect(() => {
-      const pid = this.projectId();
-      if (!pid)
-        return;
-      untracked(() => this.layout.load(pid));
-      runInInjectionContext(this.envInjector, () => {
-        afterNextRender(() => {
-          queueMicrotask(() => this.editMode.set(false));
-        });
-      });
-    });
-  }
-  toggleEdit() {
-    const next = !this.editMode();
-    this.editMode.set(next);
-    if (!next) {
-      this.layout.flushSave(this.projectId());
-    } else {
-      this.layout.getWidgets();
-    }
-  }
-  onItemsChange(next) {
-    this.layout.setItems(this.projectId(), next);
-  }
-  static ctorParameters = () => [];
-};
-DashboardComponent = __decorate([
-  Component({
-    selector: "app-dashboard.component",
-    imports: [
-      CommonModule,
-      NzButtonModule,
-      NzIconModule,
-      NzCardModule,
-      NzDrawerModule,
-      PageLayoutComponent,
-      DashboardCanvasComponent,
-      AddWidgetDrawerComponent
-    ],
-    host: {
-      "[class.collapsed]": "editMode()"
-    },
-    template: `
-    <app-page-layout [title]="'\u9879\u76EE\u4EEA\u8868\u76D8'" [isFullscreen]="true">
-      <ng-container ngProjectAs="actions">
-        <button nz-button nzType="primary" (click)="toggleEdit()">
-          <nz-icon [nzType]="editMode() ? 'check' : 'edit'" nzTheme="outline"></nz-icon>
-          {{ editMode() ? '\u5B8C\u6210' : '\u81EA\u5B9A\u4E49' }}
-        </button>
-      </ng-container>
-
-      <app-dashboard-canvas
-        [editMode]="editMode()"
-        [items]="items()"
-        (itemsChange)="onItemsChange($event)"
-        (remove)="layout.remove($event)"
-        (kill)="layout.killProcess($event)"
-      ></app-dashboard-canvas>
-    </app-page-layout>
-    <div class="side-panel" [class.open]="editMode()">
-      <div class="side-header">
-        <div class="title">\u6DFB\u52A0\u90E8\u4EF6</div>
-        <button nz-button nzType="text" (click)="editMode.set(false)">
-          <nz-icon nzType="close"></nz-icon>
-        </button>
-      </div>
-      <div class="side-body">
-        <app-add-widget-drawer (add)="layout.add($event)"></app-add-widget-drawer>
-      </div>
-    </div>
-  `,
-    styles: [dashboard_component_default]
-  })
-], DashboardComponent);
-export {
-  DashboardComponent
-};
-//# sourceMappingURL=chunk-LVPSURVU.js.map