@dragonworks/ngx-dashboard 21.0.0 → 21.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -23,7 +23,7 @@ import { isPlatformBrowser } from '@angular/common';
|
|
|
23
23
|
|
|
24
24
|
// Auto-generated by scripts/generate-versions.js
|
|
25
25
|
// Do not edit manually
|
|
26
|
-
const NGX_DASHBOARD_VERSION = '21.
|
|
26
|
+
const NGX_DASHBOARD_VERSION = '21.1.1';
|
|
27
27
|
|
|
28
28
|
/**
|
|
29
29
|
* Maximum number of columns supported by the grid.
|
|
@@ -208,6 +208,8 @@ const DEFAULT_RESERVED_SPACE = {
|
|
|
208
208
|
left: 0
|
|
209
209
|
};
|
|
210
210
|
|
|
211
|
+
/** Sentinel widget type ID for unresolved/unknown widget types */
|
|
212
|
+
const UNKNOWN_WIDGET_TYPEID = '__internal/unknown-widget';
|
|
211
213
|
function createFactoryFromComponent(component) {
|
|
212
214
|
return {
|
|
213
215
|
...component.metadata,
|
|
@@ -223,15 +225,15 @@ function createFactoryFromComponent(component) {
|
|
|
223
225
|
|
|
224
226
|
class UnknownWidgetComponent {
|
|
225
227
|
static metadata = {
|
|
226
|
-
widgetTypeid:
|
|
228
|
+
widgetTypeid: UNKNOWN_WIDGET_TYPEID,
|
|
227
229
|
name: $localize `:@@ngx.dashboard.unknown.widget.name:Unknown Widget`,
|
|
228
230
|
description: $localize `:@@ngx.dashboard.unknown.widget.description:Fallback widget for unknown widget types`,
|
|
229
231
|
svgIcon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240Zm40 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>',
|
|
230
232
|
};
|
|
231
233
|
state = signal({
|
|
232
234
|
originalWidgetTypeid: 'unknown',
|
|
233
|
-
}, ...(ngDevMode ? [{ debugName: "state" }] : []));
|
|
234
|
-
tooltipText = computed(() => `${this.state().originalWidgetTypeid}`, ...(ngDevMode ? [{ debugName: "tooltipText" }] : []));
|
|
235
|
+
}, ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
|
|
236
|
+
tooltipText = computed(() => `${this.state().originalWidgetTypeid}`, ...(ngDevMode ? [{ debugName: "tooltipText" }] : /* istanbul ignore next */ []));
|
|
235
237
|
dashboardSetState(state) {
|
|
236
238
|
if (state && typeof state === 'object' && 'originalWidgetTypeid' in state) {
|
|
237
239
|
this.state.set(state);
|
|
@@ -240,14 +242,14 @@ class UnknownWidgetComponent {
|
|
|
240
242
|
dashboardGetState() {
|
|
241
243
|
return this.state();
|
|
242
244
|
}
|
|
243
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
244
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.
|
|
245
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UnknownWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
246
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: UnknownWidgetComponent, isStandalone: true, selector: "lib-unknown-widget", ngImport: i0, template: `
|
|
245
247
|
<div class="unknown-widget-container" [matTooltip]="tooltipText()">
|
|
246
248
|
<mat-icon class="unknown-widget-icon">error_outline</mat-icon>
|
|
247
249
|
</div>
|
|
248
250
|
`, isInline: true, styles: [".unknown-widget-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:var(--mat-sys-error);border-radius:8px;container-type:size}.unknown-widget-icon{color:var(--mat-sys-on-error);font-size:clamp(12px,75cqmin,68px);width:clamp(12px,75cqmin,68px);height:clamp(12px,75cqmin,68px)}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
249
251
|
}
|
|
250
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
252
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UnknownWidgetComponent, decorators: [{
|
|
251
253
|
type: Component,
|
|
252
254
|
args: [{ selector: 'lib-unknown-widget', imports: [MatIconModule, MatTooltipModule], template: `
|
|
253
255
|
<div class="unknown-widget-container" [matTooltip]="tooltipText()">
|
|
@@ -258,9 +260,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
258
260
|
|
|
259
261
|
// dashboard.service.ts
|
|
260
262
|
class DashboardService {
|
|
261
|
-
#widgetTypes = signal([], ...(ngDevMode ? [{ debugName: "#widgetTypes" }] : []));
|
|
263
|
+
#widgetTypes = signal([], ...(ngDevMode ? [{ debugName: "#widgetTypes" }] : /* istanbul ignore next */ []));
|
|
262
264
|
#widgetFactoryMap = new Map();
|
|
263
265
|
#sharedStateProviders = new Map();
|
|
266
|
+
#pendingSharedStates = new Map();
|
|
264
267
|
#unknownWidgetFactory = createFactoryFromComponent(UnknownWidgetComponent);
|
|
265
268
|
widgetTypes = this.#widgetTypes.asReadonly(); // make the widget list available as a readonly signal
|
|
266
269
|
registerWidgetType(widget, sharedStateProvider) {
|
|
@@ -274,6 +277,13 @@ class DashboardService {
|
|
|
274
277
|
if (sharedStateProvider) {
|
|
275
278
|
const provider = this.#resolveProvider(sharedStateProvider);
|
|
276
279
|
this.#sharedStateProviders.set(widgetTypeid, provider);
|
|
280
|
+
// Drain any buffered shared state from a prior loadDashboard that ran
|
|
281
|
+
// before this widget type was registered (e.g. lazy-loaded modules).
|
|
282
|
+
if (this.#pendingSharedStates.has(widgetTypeid)) {
|
|
283
|
+
const registered = this.#sharedStateProviders.get(widgetTypeid);
|
|
284
|
+
registered.setSharedState(this.#pendingSharedStates.get(widgetTypeid));
|
|
285
|
+
this.#pendingSharedStates.delete(widgetTypeid);
|
|
286
|
+
}
|
|
277
287
|
}
|
|
278
288
|
this.#widgetTypes.set([...this.#widgetTypes(), widget]);
|
|
279
289
|
}
|
|
@@ -343,13 +353,19 @@ class DashboardService {
|
|
|
343
353
|
const provider = this.#sharedStateProviders.get(widgetTypeid);
|
|
344
354
|
if (provider) {
|
|
345
355
|
provider.setSharedState(state);
|
|
356
|
+
this.#pendingSharedStates.delete(widgetTypeid);
|
|
357
|
+
}
|
|
358
|
+
else {
|
|
359
|
+
// Buffer for a widget type that hasn't been registered yet. Replaces
|
|
360
|
+
// any prior buffered value so a second loadDashboard wins.
|
|
361
|
+
this.#pendingSharedStates.set(widgetTypeid, state);
|
|
346
362
|
}
|
|
347
363
|
}
|
|
348
364
|
}
|
|
349
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
350
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.
|
|
365
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DashboardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
366
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DashboardService, providedIn: 'root' });
|
|
351
367
|
}
|
|
352
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
368
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DashboardService, decorators: [{
|
|
353
369
|
type: Injectable,
|
|
354
370
|
args: [{
|
|
355
371
|
providedIn: 'root',
|
|
@@ -566,10 +582,36 @@ const initialWidgetManagementState = {
|
|
|
566
582
|
widgetsById: {},
|
|
567
583
|
};
|
|
568
584
|
const withWidgetManagement = () => signalStoreFeature(withState(initialWidgetManagementState),
|
|
569
|
-
// Computed cells array -
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
585
|
+
// Computed cells array with self-healing for late-registered widget types.
|
|
586
|
+
// When loadDashboard() runs before all widget types are registered, unresolved
|
|
587
|
+
// cells get an unknown fallback factory. This computed transparently re-resolves
|
|
588
|
+
// them when new types register, so templates see real widgets replace placeholders.
|
|
589
|
+
withComputed((store) => {
|
|
590
|
+
const dashboardService = inject(DashboardService);
|
|
591
|
+
return {
|
|
592
|
+
cells: computed(() => {
|
|
593
|
+
const widgets = Object.values(store.widgetsById());
|
|
594
|
+
const hasUnresolved = widgets.some((cell) => cell.widgetFactory.widgetTypeid === UNKNOWN_WIDGET_TYPEID);
|
|
595
|
+
// Fast path: skip widgetTypes() dependency when all widgets are resolved.
|
|
596
|
+
// This is safe because registerWidgetType() prevents re-registration of
|
|
597
|
+
// existing types, so once healed, a widget's factory cannot change.
|
|
598
|
+
if (!hasUnresolved)
|
|
599
|
+
return widgets;
|
|
600
|
+
// Establishes reactive dependency on registration changes
|
|
601
|
+
dashboardService.widgetTypes();
|
|
602
|
+
return widgets.map((cell) => {
|
|
603
|
+
if (cell.widgetFactory.widgetTypeid === UNKNOWN_WIDGET_TYPEID &&
|
|
604
|
+
cell.widgetTypeid) {
|
|
605
|
+
const resolvedFactory = dashboardService.getFactory(cell.widgetTypeid);
|
|
606
|
+
if (resolvedFactory.widgetTypeid !== UNKNOWN_WIDGET_TYPEID) {
|
|
607
|
+
return { ...cell, widgetFactory: resolvedFactory };
|
|
608
|
+
}
|
|
609
|
+
}
|
|
610
|
+
return cell;
|
|
611
|
+
});
|
|
612
|
+
}),
|
|
613
|
+
};
|
|
614
|
+
}), withMethods((store) => ({
|
|
573
615
|
addWidget(cell) {
|
|
574
616
|
const widgetKey = WidgetIdUtils.toString(cell.widgetId);
|
|
575
617
|
patchState(store, {
|
|
@@ -606,6 +648,7 @@ withComputed((store) => ({
|
|
|
606
648
|
col,
|
|
607
649
|
rowSpan: 1,
|
|
608
650
|
colSpan: 1,
|
|
651
|
+
widgetTypeid: widgetFactory.widgetTypeid,
|
|
609
652
|
widgetFactory,
|
|
610
653
|
widgetState,
|
|
611
654
|
};
|
|
@@ -902,6 +945,10 @@ const withResize = () => signalStoreFeature(withState(initialResizeState), withM
|
|
|
902
945
|
},
|
|
903
946
|
})));
|
|
904
947
|
|
|
948
|
+
/** Returns the intended widget type ID, falling back to the factory's type ID */
|
|
949
|
+
function effectiveWidgetTypeid(cell) {
|
|
950
|
+
return cell.widgetTypeid ?? cell.widgetFactory.widgetTypeid;
|
|
951
|
+
}
|
|
905
952
|
const initialState = {
|
|
906
953
|
dashboardId: '',
|
|
907
954
|
};
|
|
@@ -981,8 +1028,8 @@ withMethods((store) => ({
|
|
|
981
1028
|
}
|
|
982
1029
|
// Collect widget types in use for shared state collection
|
|
983
1030
|
const activeWidgetTypes = new Set(widgetsToExport
|
|
984
|
-
.filter((cell) => cell
|
|
985
|
-
.map((cell) => cell
|
|
1031
|
+
.filter((cell) => effectiveWidgetTypeid(cell) !== UNKNOWN_WIDGET_TYPEID)
|
|
1032
|
+
.map((cell) => effectiveWidgetTypeid(cell)));
|
|
986
1033
|
// Collect shared states from DashboardService
|
|
987
1034
|
const sharedStatesMap = store.dashboardService.collectSharedStates(activeWidgetTypes);
|
|
988
1035
|
const sharedStates = sharedStatesMap.size > 0
|
|
@@ -995,7 +1042,7 @@ withMethods((store) => ({
|
|
|
995
1042
|
columns: exportColumns,
|
|
996
1043
|
gutterSize: store.gutterSize(),
|
|
997
1044
|
cells: widgetsToExport
|
|
998
|
-
.filter((cell) => cell
|
|
1045
|
+
.filter((cell) => effectiveWidgetTypeid(cell) !== UNKNOWN_WIDGET_TYPEID)
|
|
999
1046
|
.map((cell) => {
|
|
1000
1047
|
const cellIdString = CellIdUtils.toString(cell.cellId);
|
|
1001
1048
|
const currentState = liveWidgetStates.get(cellIdString);
|
|
@@ -1008,7 +1055,7 @@ withMethods((store) => ({
|
|
|
1008
1055
|
rowSpan: cell.rowSpan,
|
|
1009
1056
|
colSpan: cell.colSpan,
|
|
1010
1057
|
flat: cell.flat,
|
|
1011
|
-
widgetTypeid: cell
|
|
1058
|
+
widgetTypeid: effectiveWidgetTypeid(cell),
|
|
1012
1059
|
widgetState: currentState !== undefined ? currentState : cell.widgetState,
|
|
1013
1060
|
};
|
|
1014
1061
|
}),
|
|
@@ -1034,6 +1081,7 @@ withMethods((store) => ({
|
|
|
1034
1081
|
rowSpan: cellData.rowSpan,
|
|
1035
1082
|
colSpan: cellData.colSpan,
|
|
1036
1083
|
flat: cellData.flat,
|
|
1084
|
+
widgetTypeid: cellData.widgetTypeid,
|
|
1037
1085
|
widgetFactory: factory,
|
|
1038
1086
|
widgetState: cellData.widgetState,
|
|
1039
1087
|
};
|
|
@@ -1089,8 +1137,8 @@ class CellSettingsDialogComponent {
|
|
|
1089
1137
|
};
|
|
1090
1138
|
this.dialogRef.close(newData);
|
|
1091
1139
|
}
|
|
1092
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1093
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.
|
|
1140
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CellSettingsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1141
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: CellSettingsDialogComponent, isStandalone: true, selector: "lib-cell-settings-dialog", ngImport: i0, template: `
|
|
1094
1142
|
<h2 mat-dialog-title i18n="@@ngx.dashboard.cell.settings.title">
|
|
1095
1143
|
Cell Display Settings
|
|
1096
1144
|
</h2>
|
|
@@ -1156,7 +1204,7 @@ class CellSettingsDialogComponent {
|
|
|
1156
1204
|
</mat-dialog-actions>
|
|
1157
1205
|
`, isInline: true, styles: ["mat-dialog-content{display:block;overflow-y:auto;overflow-x:hidden;padding-top:.5rem}.cell-info{margin:0 0 1.5rem;padding-bottom:1rem}.radio-group{width:100%}mat-radio-group{display:block}mat-radio-button{width:100%;display:block;margin-bottom:1rem}mat-radio-button:last-child{margin-bottom:0}.radio-option{margin-left:.75rem;padding:.25rem 0}.option-title{display:block;margin-bottom:.25rem}.option-description{display:block}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i4$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i4$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1158
1206
|
}
|
|
1159
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1207
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CellSettingsDialogComponent, decorators: [{
|
|
1160
1208
|
type: Component,
|
|
1161
1209
|
args: [{ selector: 'lib-cell-settings-dialog', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
1162
1210
|
FormsModule,
|
|
@@ -1247,10 +1295,10 @@ class DefaultCellSettingsDialogProvider extends CellSettingsDialogProvider {
|
|
|
1247
1295
|
const result = await firstValueFrom(dialogRef.afterClosed());
|
|
1248
1296
|
return result;
|
|
1249
1297
|
}
|
|
1250
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1251
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.
|
|
1298
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DefaultCellSettingsDialogProvider, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
|
|
1299
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DefaultCellSettingsDialogProvider, providedIn: 'root' });
|
|
1252
1300
|
}
|
|
1253
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1301
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DefaultCellSettingsDialogProvider, decorators: [{
|
|
1254
1302
|
type: Injectable,
|
|
1255
1303
|
args: [{
|
|
1256
1304
|
providedIn: 'root',
|
|
@@ -1274,7 +1322,7 @@ const CELL_SETTINGS_DIALOG_PROVIDER = new InjectionToken('CellSettingsDialogProv
|
|
|
1274
1322
|
});
|
|
1275
1323
|
|
|
1276
1324
|
class CellContextMenuService {
|
|
1277
|
-
#activeMenu = signal(null, ...(ngDevMode ? [{ debugName: "#activeMenu" }] : []));
|
|
1325
|
+
#activeMenu = signal(null, ...(ngDevMode ? [{ debugName: "#activeMenu" }] : /* istanbul ignore next */ []));
|
|
1278
1326
|
activeMenu = this.#activeMenu.asReadonly();
|
|
1279
1327
|
show(x, y, items) {
|
|
1280
1328
|
this.#activeMenu.set({ x, y, items });
|
|
@@ -1282,26 +1330,26 @@ class CellContextMenuService {
|
|
|
1282
1330
|
hide() {
|
|
1283
1331
|
this.#activeMenu.set(null);
|
|
1284
1332
|
}
|
|
1285
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1286
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.
|
|
1333
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CellContextMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1334
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CellContextMenuService });
|
|
1287
1335
|
}
|
|
1288
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1336
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CellContextMenuService, decorators: [{
|
|
1289
1337
|
type: Injectable
|
|
1290
1338
|
}] });
|
|
1291
1339
|
|
|
1292
1340
|
// cell.component.ts
|
|
1293
1341
|
class CellComponent {
|
|
1294
|
-
widgetId = input.required(...(ngDevMode ? [{ debugName: "widgetId" }] : [])); // Unique widget instance identifier
|
|
1295
|
-
cellId = input.required(...(ngDevMode ? [{ debugName: "cellId" }] : [])); // Current grid position
|
|
1296
|
-
widgetFactory = input(undefined, ...(ngDevMode ? [{ debugName: "widgetFactory" }] : []));
|
|
1297
|
-
widgetState = input(undefined, ...(ngDevMode ? [{ debugName: "widgetState" }] : []));
|
|
1298
|
-
isEditMode = input(false, ...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
|
|
1299
|
-
flat = input(undefined, ...(ngDevMode ? [{ debugName: "flat" }] : []));
|
|
1300
|
-
row = model.required(...(ngDevMode ? [{ debugName: "row" }] : []));
|
|
1301
|
-
column = model.required(...(ngDevMode ? [{ debugName: "column" }] : []));
|
|
1302
|
-
rowSpan = input(1, ...(ngDevMode ? [{ debugName: "rowSpan" }] : []));
|
|
1303
|
-
colSpan = input(1, ...(ngDevMode ? [{ debugName: "colSpan" }] : []));
|
|
1304
|
-
draggable = input(false, ...(ngDevMode ? [{ debugName: "draggable" }] : []));
|
|
1342
|
+
widgetId = input.required(...(ngDevMode ? [{ debugName: "widgetId" }] : /* istanbul ignore next */ [])); // Unique widget instance identifier
|
|
1343
|
+
cellId = input.required(...(ngDevMode ? [{ debugName: "cellId" }] : /* istanbul ignore next */ [])); // Current grid position
|
|
1344
|
+
widgetFactory = input(undefined, ...(ngDevMode ? [{ debugName: "widgetFactory" }] : /* istanbul ignore next */ []));
|
|
1345
|
+
widgetState = input(undefined, ...(ngDevMode ? [{ debugName: "widgetState" }] : /* istanbul ignore next */ []));
|
|
1346
|
+
isEditMode = input(false, ...(ngDevMode ? [{ debugName: "isEditMode" }] : /* istanbul ignore next */ []));
|
|
1347
|
+
flat = input(undefined, ...(ngDevMode ? [{ debugName: "flat" }] : /* istanbul ignore next */ []));
|
|
1348
|
+
row = model.required(...(ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []));
|
|
1349
|
+
column = model.required(...(ngDevMode ? [{ debugName: "column" }] : /* istanbul ignore next */ []));
|
|
1350
|
+
rowSpan = input(1, ...(ngDevMode ? [{ debugName: "rowSpan" }] : /* istanbul ignore next */ []));
|
|
1351
|
+
colSpan = input(1, ...(ngDevMode ? [{ debugName: "colSpan" }] : /* istanbul ignore next */ []));
|
|
1352
|
+
draggable = input(false, ...(ngDevMode ? [{ debugName: "draggable" }] : /* istanbul ignore next */ []));
|
|
1305
1353
|
dragStart = output();
|
|
1306
1354
|
dragEnd = output();
|
|
1307
1355
|
edit = output();
|
|
@@ -1322,20 +1370,20 @@ class CellComponent {
|
|
|
1322
1370
|
// Document event listeners cleanup function
|
|
1323
1371
|
// Performance: Only created when actively resizing, not for every cell
|
|
1324
1372
|
#documentListeners;
|
|
1325
|
-
isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
|
|
1326
|
-
gridRowStyle = computed(() => `${this.row()} / span ${this.rowSpan()}`, ...(ngDevMode ? [{ debugName: "gridRowStyle" }] : []));
|
|
1327
|
-
gridColumnStyle = computed(() => `${this.column()} / span ${this.colSpan()}`, ...(ngDevMode ? [{ debugName: "gridColumnStyle" }] : []));
|
|
1373
|
+
isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []));
|
|
1374
|
+
gridRowStyle = computed(() => `${this.row()} / span ${this.rowSpan()}`, ...(ngDevMode ? [{ debugName: "gridRowStyle" }] : /* istanbul ignore next */ []));
|
|
1375
|
+
gridColumnStyle = computed(() => `${this.column()} / span ${this.colSpan()}`, ...(ngDevMode ? [{ debugName: "gridColumnStyle" }] : /* istanbul ignore next */ []));
|
|
1328
1376
|
isResizing = computed(() => {
|
|
1329
1377
|
const resizeData = this.#store.resizeData();
|
|
1330
1378
|
return resizeData
|
|
1331
1379
|
? CellIdUtils.equals(resizeData.cellId, this.cellId())
|
|
1332
1380
|
: false;
|
|
1333
|
-
}, ...(ngDevMode ? [{ debugName: "isResizing" }] : []));
|
|
1334
|
-
isDragActive = computed(() => !!this.#store.dragData(), ...(ngDevMode ? [{ debugName: "isDragActive" }] : []));
|
|
1381
|
+
}, ...(ngDevMode ? [{ debugName: "isResizing" }] : /* istanbul ignore next */ []));
|
|
1382
|
+
isDragActive = computed(() => !!this.#store.dragData(), ...(ngDevMode ? [{ debugName: "isDragActive" }] : /* istanbul ignore next */ []));
|
|
1335
1383
|
resizeData = this.#store.resizeData;
|
|
1336
1384
|
gridCellDimensions = this.#store.gridCellDimensions;
|
|
1337
|
-
resizeDirection = signal(null, ...(ngDevMode ? [{ debugName: "resizeDirection" }] : []));
|
|
1338
|
-
resizeStartPos = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "resizeStartPos" }] : []));
|
|
1385
|
+
resizeDirection = signal(null, ...(ngDevMode ? [{ debugName: "resizeDirection" }] : /* istanbul ignore next */ []));
|
|
1386
|
+
resizeStartPos = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "resizeStartPos" }] : /* istanbul ignore next */ []));
|
|
1339
1387
|
constructor() {
|
|
1340
1388
|
// widget creation - triggers when factory or state changes
|
|
1341
1389
|
effect(() => {
|
|
@@ -1570,10 +1618,10 @@ class CellComponent {
|
|
|
1570
1618
|
// Fall back to stored state if widget doesn't implement dashboardGetState
|
|
1571
1619
|
return this.widgetState();
|
|
1572
1620
|
}
|
|
1573
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1574
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
1621
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1622
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: CellComponent, isStandalone: true, selector: "lib-cell", inputs: { widgetId: { classPropertyName: "widgetId", publicName: "widgetId", isSignal: true, isRequired: true, transformFunction: null }, cellId: { classPropertyName: "cellId", publicName: "cellId", isSignal: true, isRequired: true, transformFunction: null }, widgetFactory: { classPropertyName: "widgetFactory", publicName: "widgetFactory", isSignal: true, isRequired: false, transformFunction: null }, widgetState: { classPropertyName: "widgetState", publicName: "widgetState", isSignal: true, isRequired: false, transformFunction: null }, isEditMode: { classPropertyName: "isEditMode", publicName: "isEditMode", isSignal: true, isRequired: false, transformFunction: null }, flat: { classPropertyName: "flat", publicName: "flat", isSignal: true, isRequired: false, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, rowSpan: { classPropertyName: "rowSpan", publicName: "rowSpan", isSignal: true, isRequired: false, transformFunction: null }, colSpan: { classPropertyName: "colSpan", publicName: "colSpan", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { row: "rowChange", column: "columnChange", dragStart: "dragStart", dragEnd: "dragEnd", edit: "edit", delete: "delete", settings: "settings", resizeStart: "resizeStart", resizeMove: "resizeMove", resizeEnd: "resizeEnd" }, host: { properties: { "style.grid-row": "gridRowStyle()", "style.grid-column": "gridColumnStyle()", "class.is-dragging": "isDragging()", "class.drag-active": "isDragActive()", "class.flat": "flat() === true" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<!-- cell.component.html -->\n<div\n class=\"cell\"\n [class.is-resizing]=\"isResizing()\"\n [class.flat]=\"flat() === true\"\n [draggable]=\"draggable()\"\n (dragstart)=\"onDragStart($event)\"\n (dragend)=\"onDragEnd()\"\n (contextmenu)=\"onContextMenu($event)\"\n>\n <div class=\"content-area\">\n <ng-template #container></ng-template>\n </div>\n @if (isEditMode() && !isDragging()) {\n <!-- Right resize handle -->\n <div\n class=\"resize-handle resize-handle--right\"\n (mousedown)=\"onResizeStart($event, 'horizontal')\"\n >\n <div class=\"resize-handle-line\"></div>\n </div>\n <!-- Bottom resize handle -->\n <div\n class=\"resize-handle resize-handle--bottom\"\n (mousedown)=\"onResizeStart($event, 'vertical')\"\n >\n <div class=\"resize-handle-line\"></div>\n </div>\n }\n</div>\n\n@if (isResizing()) {\n<div class=\"resize-preview\" i18n=\"@@ngx.dashboard.cell.resize.dimensions\">\n {{ resizeData()?.previewColSpan ?? colSpan() }} \u00D7\n {{ resizeData()?.previewRowSpan ?? rowSpan() }}\n</div>\n}\n", styles: [":host{display:block;width:100%;height:100%;position:relative;z-index:1;container-type:inline-size}:host(.drag-active):not(.is-dragging){pointer-events:none}:host(.is-dragging){z-index:100;opacity:.5;pointer-events:none}:host(.is-dragging) .content-area{pointer-events:none}:host(:hover) .resize-handle{opacity:1}.cell{width:100%;height:100%;border-radius:4px;box-shadow:0 2px 6px #0000001a;padding:0;box-sizing:border-box;overflow:hidden;position:relative;container-type:inline-size}.cell:hover{box-shadow:0 4px 10px #00000026;transform:translateY(-2px)}.cell.flat{box-shadow:none;border:none}.cell.flat:hover{box-shadow:none;transform:none;border-color:#bdbdbd}.cell.resizing{-webkit-user-select:none;user-select:none}.content-area{width:100%;height:100%;overflow:auto;pointer-events:auto;position:relative;z-index:1}.content-area:hover{transform:initial}:host(:not(.is-dragging)) .cell.flat .content-area{pointer-events:auto}:host(:not(.is-dragging)) .cell.flat .content-area:hover{transform:initial}.resize-handle{position:absolute;z-index:20}.resize-handle--right{cursor:col-resize;width:16px;height:100%;right:-8px;top:0;display:flex;align-items:center;justify-content:center;opacity:0}.resize-handle--right:hover{opacity:1}.resize-handle--right:hover .resize-handle-line{background-color:var(--mat-sys-primary-container)}.resize-handle--bottom{cursor:row-resize;width:100%;height:16px;bottom:-8px;left:0;display:flex;align-items:center;justify-content:center;opacity:0}.resize-handle--bottom:hover{opacity:1}.resize-handle--bottom:hover .resize-handle-line{background-color:var(--mat-sys-primary-container)}.resize-handle-line{background-color:#0000001a}.resize-handle--right .resize-handle-line{width:8px;height:40px;border-radius:2px}.resize-handle--bottom .resize-handle-line{width:40px;height:8px;border-radius:2px}.resize-preview{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--mat-sys-primary);color:var(--mat-sys-on-primary);padding:4px 12px;border-radius:4px;font-size:14px;font-weight:500;pointer-events:none;z-index:30}.cell.is-resizing{opacity:.6}.cell.is-resizing .resize-handle{background-color:#2196f380}:root .cursor-col-resize{cursor:col-resize!important}:root .cursor-row-resize{cursor:row-resize!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1575
1623
|
}
|
|
1576
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1624
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CellComponent, decorators: [{
|
|
1577
1625
|
type: Component,
|
|
1578
1626
|
args: [{ selector: 'lib-cell', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1579
1627
|
'[style.grid-row]': 'gridRowStyle()',
|
|
@@ -1588,21 +1636,21 @@ class DashboardViewerComponent {
|
|
|
1588
1636
|
#store = inject(DashboardStore);
|
|
1589
1637
|
#renderer = inject(Renderer2);
|
|
1590
1638
|
#destroyRef = inject(DestroyRef);
|
|
1591
|
-
cellComponents = viewChildren(CellComponent, ...(ngDevMode ? [{ debugName: "cellComponents" }] : []));
|
|
1592
|
-
gridElement = viewChild('gridElement', ...(ngDevMode ? [{ debugName: "gridElement" }] : []));
|
|
1593
|
-
rows = input.required(...(ngDevMode ? [{ debugName: "rows" }] : []));
|
|
1594
|
-
columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : []));
|
|
1595
|
-
gutterSize = input('1em', ...(ngDevMode ? [{ debugName: "gutterSize" }] : []));
|
|
1596
|
-
gutters = computed(() => this.columns() + 1, ...(ngDevMode ? [{ debugName: "gutters" }] : []));
|
|
1639
|
+
cellComponents = viewChildren(CellComponent, ...(ngDevMode ? [{ debugName: "cellComponents" }] : /* istanbul ignore next */ []));
|
|
1640
|
+
gridElement = viewChild('gridElement', ...(ngDevMode ? [{ debugName: "gridElement" }] : /* istanbul ignore next */ []));
|
|
1641
|
+
rows = input.required(...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
|
|
1642
|
+
columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
|
|
1643
|
+
gutterSize = input('1em', ...(ngDevMode ? [{ debugName: "gutterSize" }] : /* istanbul ignore next */ []));
|
|
1644
|
+
gutters = computed(() => this.columns() + 1, ...(ngDevMode ? [{ debugName: "gutters" }] : /* istanbul ignore next */ []));
|
|
1597
1645
|
// Selection feature
|
|
1598
|
-
enableSelection = input(false, ...(ngDevMode ? [{ debugName: "enableSelection" }] : []));
|
|
1646
|
+
enableSelection = input(false, ...(ngDevMode ? [{ debugName: "enableSelection" }] : /* istanbul ignore next */ []));
|
|
1599
1647
|
selectionComplete = output();
|
|
1600
1648
|
// store signals - read-only
|
|
1601
1649
|
cells = this.#store.cells;
|
|
1602
1650
|
// Selection state
|
|
1603
|
-
isSelecting = signal(false, ...(ngDevMode ? [{ debugName: "isSelecting" }] : []));
|
|
1604
|
-
selectionStart = signal(null, ...(ngDevMode ? [{ debugName: "selectionStart" }] : []));
|
|
1605
|
-
selectionCurrent = signal(null, ...(ngDevMode ? [{ debugName: "selectionCurrent" }] : []));
|
|
1651
|
+
isSelecting = signal(false, ...(ngDevMode ? [{ debugName: "isSelecting" }] : /* istanbul ignore next */ []));
|
|
1652
|
+
selectionStart = signal(null, ...(ngDevMode ? [{ debugName: "selectionStart" }] : /* istanbul ignore next */ []));
|
|
1653
|
+
selectionCurrent = signal(null, ...(ngDevMode ? [{ debugName: "selectionCurrent" }] : /* istanbul ignore next */ []));
|
|
1606
1654
|
// Computed selection bounds (normalized)
|
|
1607
1655
|
selectionBounds = computed(() => {
|
|
1608
1656
|
const start = this.selectionStart();
|
|
@@ -1615,10 +1663,10 @@ class DashboardViewerComponent {
|
|
|
1615
1663
|
startCol: Math.min(start.col, current.col),
|
|
1616
1664
|
endCol: Math.max(start.col, current.col),
|
|
1617
1665
|
};
|
|
1618
|
-
}, ...(ngDevMode ? [{ debugName: "selectionBounds" }] : []));
|
|
1666
|
+
}, ...(ngDevMode ? [{ debugName: "selectionBounds" }] : /* istanbul ignore next */ []));
|
|
1619
1667
|
// Generate array for template iteration
|
|
1620
|
-
rowNumbers = computed(() => Array.from({ length: this.rows() }, (_, i) => i + 1), ...(ngDevMode ? [{ debugName: "rowNumbers" }] : []));
|
|
1621
|
-
colNumbers = computed(() => Array.from({ length: this.columns() }, (_, i) => i + 1), ...(ngDevMode ? [{ debugName: "colNumbers" }] : []));
|
|
1668
|
+
rowNumbers = computed(() => Array.from({ length: this.rows() }, (_, i) => i + 1), ...(ngDevMode ? [{ debugName: "rowNumbers" }] : /* istanbul ignore next */ []));
|
|
1669
|
+
colNumbers = computed(() => Array.from({ length: this.columns() }, (_, i) => i + 1), ...(ngDevMode ? [{ debugName: "colNumbers" }] : /* istanbul ignore next */ []));
|
|
1622
1670
|
// Document-level event listeners (cleanup needed)
|
|
1623
1671
|
#mouseMoveListener;
|
|
1624
1672
|
#mouseUpListener;
|
|
@@ -1724,10 +1772,10 @@ class DashboardViewerComponent {
|
|
|
1724
1772
|
this.#mouseUpListener = undefined;
|
|
1725
1773
|
}
|
|
1726
1774
|
}
|
|
1727
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1728
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
1775
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DashboardViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1776
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DashboardViewerComponent, isStandalone: true, selector: "ngx-dashboard-viewer", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, gutterSize: { classPropertyName: "gutterSize", publicName: "gutterSize", isSignal: true, isRequired: false, transformFunction: null }, enableSelection: { classPropertyName: "enableSelection", publicName: "enableSelection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionComplete: "selectionComplete" }, host: { properties: { "style.--rows": "rows()", "style.--columns": "columns()", "style.--gutter-size": "gutterSize()", "style.--gutters": "gutters()" } }, viewQueries: [{ propertyName: "cellComponents", predicate: CellComponent, descendants: true, isSignal: true }, { propertyName: "gridElement", first: true, predicate: ["gridElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Dashboard viewer - read-only grid -->\n<div class=\"grid top-grid\" #gridElement>\n @for (cell of cells(); track cell.widgetId) {\n <lib-cell\n class=\"grid-cell\"\n [widgetId]=\"cell.widgetId\"\n [cellId]=\"cell.cellId\"\n [isEditMode]=\"false\"\n [draggable]=\"false\"\n [row]=\"cell.row\"\n [column]=\"cell.col\"\n [rowSpan]=\"cell.rowSpan\"\n [colSpan]=\"cell.colSpan\"\n [flat]=\"cell.flat\"\n [widgetFactory]=\"cell.widgetFactory\"\n [widgetState]=\"cell.widgetState\"\n >\n </lib-cell>\n }\n</div>\n\n<!-- Selection overlay grid - mirror of main grid for cell selection -->\n@if (enableSelection()) {\n <div class=\"selection-overlay-grid\">\n @for (row of rowNumbers(); track row) {\n @for (col of colNumbers(); track col) {\n <div\n class=\"selection-ghost-cell\"\n [class.selected]=\"isCellSelected(row, col)\"\n [class.selecting]=\"isSelecting()\"\n [style.grid-row]=\"row\"\n [style.grid-column]=\"col\"\n (mousedown)=\"onGhostCellMouseDown($event, row, col)\"\n (mouseenter)=\"onGhostCellMouseEnter(row, col)\"\n ></div>\n }\n }\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{--cell-size: calc( 100cqi / var(--columns) - var(--gutter-size) * var(--gutters) / var(--columns) );--tile-size: calc(var(--cell-size) + var(--gutter-size));--tile-offset: calc( var(--gutter-size) + var(--cell-size) + var(--gutter-size) / 2 );display:block;container-type:inline-size;box-sizing:border-box;aspect-ratio:var(--columns)/var(--rows);width:100%;height:auto;position:relative;background-color:var(--mat-sys-surface-container)}.grid{display:grid;gap:var(--gutter-size);padding:var(--gutter-size);width:100%;height:100%;box-sizing:border-box;grid-template-columns:repeat(var(--columns),var(--cell-size));grid-template-rows:repeat(var(--rows),var(--cell-size))}.grid-cell{pointer-events:none}.grid-cell:not(.flat){pointer-events:auto;cursor:default}.grid-cell:not(.flat) .content-area{pointer-events:none}.top-grid{z-index:2;pointer-events:none}.selection-overlay-grid{position:absolute;top:0;left:0;width:100%;height:100%;display:grid;gap:var(--gutter-size);padding:var(--gutter-size);grid-template-columns:repeat(var(--columns),var(--cell-size));grid-template-rows:repeat(var(--rows),var(--cell-size));z-index:5;pointer-events:auto;-webkit-user-select:none;user-select:none}.selection-ghost-cell{cursor:crosshair;transition:background-color .1s ease,border-radius .1s ease;border-radius:2px}.selection-ghost-cell:hover:not(.selecting){background-color:var(--mat-sys-primary);opacity:.08}.selection-ghost-cell.selected{background-color:var(--mat-sys-primary);opacity:.25;border-radius:4px}.selection-ghost-cell.selecting{cursor:crosshair}\n"], dependencies: [{ kind: "component", type: CellComponent, selector: "lib-cell", inputs: ["widgetId", "cellId", "widgetFactory", "widgetState", "isEditMode", "flat", "row", "column", "rowSpan", "colSpan", "draggable"], outputs: ["rowChange", "columnChange", "dragStart", "dragEnd", "edit", "delete", "settings", "resizeStart", "resizeMove", "resizeEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1729
1777
|
}
|
|
1730
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1778
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DashboardViewerComponent, decorators: [{
|
|
1731
1779
|
type: Component,
|
|
1732
1780
|
args: [{ selector: 'ngx-dashboard-viewer', standalone: true, imports: [CellComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1733
1781
|
'[style.--rows]': 'rows()',
|
|
@@ -1745,11 +1793,11 @@ class CellContextMenuComponent {
|
|
|
1745
1793
|
menuPosition = computed(() => {
|
|
1746
1794
|
const menu = this.menuService.activeMenu();
|
|
1747
1795
|
return menu ? { left: `${menu.x}px`, top: `${menu.y}px` } : { left: '0px', top: '0px' };
|
|
1748
|
-
}, ...(ngDevMode ? [{ debugName: "menuPosition" }] : []));
|
|
1796
|
+
}, ...(ngDevMode ? [{ debugName: "menuPosition" }] : /* istanbul ignore next */ []));
|
|
1749
1797
|
menuItems = computed(() => {
|
|
1750
1798
|
const menu = this.menuService.activeMenu();
|
|
1751
1799
|
return menu?.items || [];
|
|
1752
|
-
}, ...(ngDevMode ? [{ debugName: "menuItems" }] : []));
|
|
1800
|
+
}, ...(ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []));
|
|
1753
1801
|
constructor() {
|
|
1754
1802
|
// Material Menu has a backdrop that blocks events from reaching other elements.
|
|
1755
1803
|
// When any right-click occurs while menu is open, we need to:
|
|
@@ -1810,8 +1858,8 @@ class CellContextMenuComponent {
|
|
|
1810
1858
|
this.menuService.hide();
|
|
1811
1859
|
}
|
|
1812
1860
|
}
|
|
1813
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1814
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
1861
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CellContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1862
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: CellContextMenuComponent, isStandalone: true, selector: "lib-cell-context-menu", viewQueries: [{ propertyName: "menuTrigger", first: true, predicate: ["menuTrigger"], descendants: true, read: MatMenuTrigger, isSignal: true }], ngImport: i0, template: `
|
|
1815
1863
|
<!-- Hidden trigger for menu positioned at exact mouse coordinates
|
|
1816
1864
|
|
|
1817
1865
|
IMPORTANT: Angular Material applies its own positioning logic to menus,
|
|
@@ -1865,7 +1913,7 @@ class CellContextMenuComponent {
|
|
|
1865
1913
|
</mat-menu>
|
|
1866
1914
|
`, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1867
1915
|
}
|
|
1868
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1916
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CellContextMenuComponent, decorators: [{
|
|
1869
1917
|
type: Component,
|
|
1870
1918
|
args: [{ selector: 'lib-cell-context-menu', standalone: true, imports: [MatMenuModule, MatIconModule, MatDividerModule, MatButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
1871
1919
|
<!-- Hidden trigger for menu positioned at exact mouse coordinates
|
|
@@ -1956,10 +2004,10 @@ class DefaultEmptyCellContextProvider extends EmptyCellContextProvider {
|
|
|
1956
2004
|
handleEmptyCellContext() {
|
|
1957
2005
|
// Default behavior: do nothing
|
|
1958
2006
|
}
|
|
1959
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1960
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.
|
|
2007
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DefaultEmptyCellContextProvider, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
|
|
2008
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DefaultEmptyCellContextProvider, providedIn: 'root' });
|
|
1961
2009
|
}
|
|
1962
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
2010
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DefaultEmptyCellContextProvider, decorators: [{
|
|
1963
2011
|
type: Injectable,
|
|
1964
2012
|
args: [{
|
|
1965
2013
|
providedIn: 'root',
|
|
@@ -1994,8 +2042,8 @@ const EMPTY_CELL_CONTEXT_PROVIDER = new InjectionToken('EmptyCellContextProvider
|
|
|
1994
2042
|
* of the context menu that appears when right-clicking on empty dashboard cells.
|
|
1995
2043
|
*/
|
|
1996
2044
|
class EmptyCellContextMenuService {
|
|
1997
|
-
#activeMenu = signal(null, ...(ngDevMode ? [{ debugName: "#activeMenu" }] : []));
|
|
1998
|
-
#lastSelectedWidgetTypeId = signal(null, ...(ngDevMode ? [{ debugName: "#lastSelectedWidgetTypeId" }] : []));
|
|
2045
|
+
#activeMenu = signal(null, ...(ngDevMode ? [{ debugName: "#activeMenu" }] : /* istanbul ignore next */ []));
|
|
2046
|
+
#lastSelectedWidgetTypeId = signal(null, ...(ngDevMode ? [{ debugName: "#lastSelectedWidgetTypeId" }] : /* istanbul ignore next */ []));
|
|
1999
2047
|
activeMenu = this.#activeMenu.asReadonly();
|
|
2000
2048
|
lastSelectedWidgetTypeId = this.#lastSelectedWidgetTypeId.asReadonly();
|
|
2001
2049
|
/**
|
|
@@ -2023,10 +2071,10 @@ class EmptyCellContextMenuService {
|
|
|
2023
2071
|
setLastSelection(widgetTypeId) {
|
|
2024
2072
|
this.#lastSelectedWidgetTypeId.set(widgetTypeId);
|
|
2025
2073
|
}
|
|
2026
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
2027
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.
|
|
2074
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EmptyCellContextMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2075
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EmptyCellContextMenuService, providedIn: 'root' });
|
|
2028
2076
|
}
|
|
2029
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
2077
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EmptyCellContextMenuService, decorators: [{
|
|
2030
2078
|
type: Injectable,
|
|
2031
2079
|
args: [{
|
|
2032
2080
|
providedIn: 'root',
|
|
@@ -2141,37 +2189,37 @@ class WidgetListContextMenuProvider extends EmptyCellContextProvider {
|
|
|
2141
2189
|
'Ensure you are using a compatible version of the dashboard component.');
|
|
2142
2190
|
}
|
|
2143
2191
|
}
|
|
2144
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
2145
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.
|
|
2192
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: WidgetListContextMenuProvider, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
|
|
2193
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: WidgetListContextMenuProvider });
|
|
2146
2194
|
}
|
|
2147
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
2195
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: WidgetListContextMenuProvider, decorators: [{
|
|
2148
2196
|
type: Injectable
|
|
2149
2197
|
}] });
|
|
2150
2198
|
|
|
2151
2199
|
// drop-zone.component.ts
|
|
2152
2200
|
class DropZoneComponent {
|
|
2153
2201
|
// Required inputs
|
|
2154
|
-
row = input.required(...(ngDevMode ? [{ debugName: "row" }] : []));
|
|
2155
|
-
col = input.required(...(ngDevMode ? [{ debugName: "col" }] : []));
|
|
2156
|
-
index = input.required(...(ngDevMode ? [{ debugName: "index" }] : []));
|
|
2202
|
+
row = input.required(...(ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []));
|
|
2203
|
+
col = input.required(...(ngDevMode ? [{ debugName: "col" }] : /* istanbul ignore next */ []));
|
|
2204
|
+
index = input.required(...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
|
|
2157
2205
|
// Optional inputs with defaults
|
|
2158
|
-
highlight = input(false, ...(ngDevMode ? [{ debugName: "highlight" }] : []));
|
|
2159
|
-
highlightInvalid = input(false, ...(ngDevMode ? [{ debugName: "highlightInvalid" }] : []));
|
|
2160
|
-
highlightResize = input(false, ...(ngDevMode ? [{ debugName: "highlightResize" }] : []));
|
|
2161
|
-
editMode = input(false, ...(ngDevMode ? [{ debugName: "editMode" }] : []));
|
|
2206
|
+
highlight = input(false, ...(ngDevMode ? [{ debugName: "highlight" }] : /* istanbul ignore next */ []));
|
|
2207
|
+
highlightInvalid = input(false, ...(ngDevMode ? [{ debugName: "highlightInvalid" }] : /* istanbul ignore next */ []));
|
|
2208
|
+
highlightResize = input(false, ...(ngDevMode ? [{ debugName: "highlightResize" }] : /* istanbul ignore next */ []));
|
|
2209
|
+
editMode = input(false, ...(ngDevMode ? [{ debugName: "editMode" }] : /* istanbul ignore next */ []));
|
|
2162
2210
|
// Outputs
|
|
2163
2211
|
dragEnter = output();
|
|
2164
2212
|
dragExit = output();
|
|
2165
2213
|
dragOver = output();
|
|
2166
2214
|
dragDrop = output();
|
|
2167
2215
|
// Computed properties
|
|
2168
|
-
dropZoneId = computed(() => `drop-zone-${this.row()}-${this.col()}`, ...(ngDevMode ? [{ debugName: "dropZoneId" }] : []));
|
|
2216
|
+
dropZoneId = computed(() => `drop-zone-${this.row()}-${this.col()}`, ...(ngDevMode ? [{ debugName: "dropZoneId" }] : /* istanbul ignore next */ []));
|
|
2169
2217
|
dropData = computed(() => ({
|
|
2170
2218
|
row: this.row(),
|
|
2171
2219
|
col: this.col(),
|
|
2172
|
-
}), ...(ngDevMode ? [{ debugName: "dropData" }] : []));
|
|
2220
|
+
}), ...(ngDevMode ? [{ debugName: "dropData" }] : /* istanbul ignore next */ []));
|
|
2173
2221
|
// Abstract drag state from store
|
|
2174
|
-
dragData = computed(() => this.#store.dragData(), ...(ngDevMode ? [{ debugName: "dragData" }] : []));
|
|
2222
|
+
dragData = computed(() => this.#store.dragData(), ...(ngDevMode ? [{ debugName: "dragData" }] : /* istanbul ignore next */ []));
|
|
2175
2223
|
// Computed drop effect based on drag data and validity
|
|
2176
2224
|
dropEffect = computed(() => {
|
|
2177
2225
|
const data = this.dragData();
|
|
@@ -2179,7 +2227,7 @@ class DropZoneComponent {
|
|
|
2179
2227
|
return 'none';
|
|
2180
2228
|
}
|
|
2181
2229
|
return data.kind === 'cell' ? 'move' : 'copy';
|
|
2182
|
-
}, ...(ngDevMode ? [{ debugName: "dropEffect" }] : []));
|
|
2230
|
+
}, ...(ngDevMode ? [{ debugName: "dropEffect" }] : /* istanbul ignore next */ []));
|
|
2183
2231
|
#store = inject(DashboardStore);
|
|
2184
2232
|
#elementRef = inject(ElementRef);
|
|
2185
2233
|
#dashboardService = inject(DashboardService);
|
|
@@ -2257,10 +2305,10 @@ class DropZoneComponent {
|
|
|
2257
2305
|
});
|
|
2258
2306
|
}
|
|
2259
2307
|
}
|
|
2260
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
2261
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
2308
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DropZoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2309
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DropZoneComponent, isStandalone: true, selector: "lib-drop-zone", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, col: { classPropertyName: "col", publicName: "col", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, highlight: { classPropertyName: "highlight", publicName: "highlight", isSignal: true, isRequired: false, transformFunction: null }, highlightInvalid: { classPropertyName: "highlightInvalid", publicName: "highlightInvalid", isSignal: true, isRequired: false, transformFunction: null }, highlightResize: { classPropertyName: "highlightResize", publicName: "highlightResize", isSignal: true, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragEnter: "dragEnter", dragExit: "dragExit", dragOver: "dragOver", dragDrop: "dragDrop" }, ngImport: i0, template: "<!-- drop-zone.component.html -->\n<div\n class=\"drop-zone\"\n [class.drop-zone--highlight]=\"highlight() && !highlightInvalid()\"\n [class.drop-zone--invalid]=\"highlightInvalid()\"\n [class.drop-zone--resize]=\"highlightResize()\"\n [style.grid-row]=\"row()\"\n [style.grid-column]=\"col()\"\n (dragenter)=\"onDragEnter($event)\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n (contextmenu)=\"onContextMenu($event)\"\n>\n @if (editMode()) {\n <div class=\"edit-mode-cell-number\">\n {{ index() }}<br />\n {{ row() }},{{ col() }}\n </div>\n }\n</div>\n", styles: [".drop-zone{width:100%;height:100%;z-index:0;align-self:stretch;justify-self:stretch;display:block;box-sizing:border-box}.drop-zone--active,.drop-zone--highlight{background-color:#80808080}.drop-zone--invalid{background-color:light-dark(color-mix(in srgb,var(--mat-sys-error) 40%,white),color-mix(in srgb,var(--mat-sys-error) 80%,black))}.drop-zone--resize{background-color:#2196f34d;outline:1px solid rgba(33,150,243,.6)}.edit-mode-cell-number{font-size:10px;line-height:1.1;color:#64646499;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:-1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2262
2310
|
}
|
|
2263
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
2311
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DropZoneComponent, decorators: [{
|
|
2264
2312
|
type: Component,
|
|
2265
2313
|
args: [{ selector: 'lib-drop-zone', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- drop-zone.component.html -->\n<div\n class=\"drop-zone\"\n [class.drop-zone--highlight]=\"highlight() && !highlightInvalid()\"\n [class.drop-zone--invalid]=\"highlightInvalid()\"\n [class.drop-zone--resize]=\"highlightResize()\"\n [style.grid-row]=\"row()\"\n [style.grid-column]=\"col()\"\n (dragenter)=\"onDragEnter($event)\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n (contextmenu)=\"onContextMenu($event)\"\n>\n @if (editMode()) {\n <div class=\"edit-mode-cell-number\">\n {{ index() }}<br />\n {{ row() }},{{ col() }}\n </div>\n }\n</div>\n", styles: [".drop-zone{width:100%;height:100%;z-index:0;align-self:stretch;justify-self:stretch;display:block;box-sizing:border-box}.drop-zone--active,.drop-zone--highlight{background-color:#80808080}.drop-zone--invalid{background-color:light-dark(color-mix(in srgb,var(--mat-sys-error) 40%,white),color-mix(in srgb,var(--mat-sys-error) 80%,black))}.drop-zone--resize{background-color:#2196f34d;outline:1px solid rgba(33,150,243,.6)}.edit-mode-cell-number{font-size:10px;line-height:1.1;color:#64646499;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:-1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%;height:100%}\n"] }]
|
|
2266
2314
|
}], propDecorators: { row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: true }] }], col: [{ type: i0.Input, args: [{ isSignal: true, alias: "col", required: true }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: true }] }], highlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlight", required: false }] }], highlightInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightInvalid", required: false }] }], highlightResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightResize", required: false }] }], editMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editMode", required: false }] }], dragEnter: [{ type: i0.Output, args: ["dragEnter"] }], dragExit: [{ type: i0.Output, args: ["dragExit"] }], dragOver: [{ type: i0.Output, args: ["dragOver"] }], dragDrop: [{ type: i0.Output, args: ["dragDrop"] }] } });
|
|
@@ -2285,11 +2333,11 @@ class EmptyCellContextMenuComponent {
|
|
|
2285
2333
|
return menu
|
|
2286
2334
|
? { left: `${menu.x}px`, top: `${menu.y}px` }
|
|
2287
2335
|
: { left: '0px', top: '0px' };
|
|
2288
|
-
}, ...(ngDevMode ? [{ debugName: "menuPosition" }] : []));
|
|
2336
|
+
}, ...(ngDevMode ? [{ debugName: "menuPosition" }] : /* istanbul ignore next */ []));
|
|
2289
2337
|
menuItems = computed(() => {
|
|
2290
2338
|
const menu = this.menuService.activeMenu();
|
|
2291
2339
|
return menu?.items || [];
|
|
2292
|
-
}, ...(ngDevMode ? [{ debugName: "menuItems" }] : []));
|
|
2340
|
+
}, ...(ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []));
|
|
2293
2341
|
constructor() {
|
|
2294
2342
|
// Material Menu has a backdrop that blocks events from reaching other elements.
|
|
2295
2343
|
// When any right-click occurs while menu is open, we need to:
|
|
@@ -2361,8 +2409,8 @@ class EmptyCellContextMenuComponent {
|
|
|
2361
2409
|
sanitizeSvg(svg) {
|
|
2362
2410
|
return this.#sanitizer.bypassSecurityTrustHtml(svg);
|
|
2363
2411
|
}
|
|
2364
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
2365
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
2412
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EmptyCellContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2413
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: EmptyCellContextMenuComponent, isStandalone: true, selector: "lib-empty-cell-context-menu", viewQueries: [{ propertyName: "menuTrigger", first: true, predicate: ["menuTrigger"], descendants: true, read: MatMenuTrigger, isSignal: true }], ngImport: i0, template: `
|
|
2366
2414
|
<!-- Hidden trigger for menu positioned at exact mouse coordinates
|
|
2367
2415
|
|
|
2368
2416
|
IMPORTANT: Angular Material applies its own positioning logic to menus,
|
|
@@ -2422,7 +2470,7 @@ class EmptyCellContextMenuComponent {
|
|
|
2422
2470
|
</mat-menu>
|
|
2423
2471
|
`, isInline: true, styles: [":host{display:contents}.empty-cell-widget-menu{max-height:400px;overflow-y:auto}.widget-icon{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;vertical-align:middle}.widget-icon :deep(svg){width:20px;height:20px;fill:currentColor}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2424
2472
|
}
|
|
2425
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
2473
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EmptyCellContextMenuComponent, decorators: [{
|
|
2426
2474
|
type: Component,
|
|
2427
2475
|
args: [{ selector: 'lib-empty-cell-context-menu', standalone: true, imports: [
|
|
2428
2476
|
MatMenuModule,
|
|
@@ -2493,15 +2541,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
2493
2541
|
// dashboard-editor.component.ts
|
|
2494
2542
|
class DashboardEditorComponent {
|
|
2495
2543
|
bottomGridRef = viewChild.required('bottomGrid');
|
|
2496
|
-
dropZones = viewChildren(DropZoneComponent, ...(ngDevMode ? [{ debugName: "dropZones" }] : []));
|
|
2497
|
-
cellComponents = viewChildren(CellComponent, ...(ngDevMode ? [{ debugName: "cellComponents" }] : []));
|
|
2544
|
+
dropZones = viewChildren(DropZoneComponent, ...(ngDevMode ? [{ debugName: "dropZones" }] : /* istanbul ignore next */ []));
|
|
2545
|
+
cellComponents = viewChildren(CellComponent, ...(ngDevMode ? [{ debugName: "cellComponents" }] : /* istanbul ignore next */ []));
|
|
2498
2546
|
#store = inject(DashboardStore);
|
|
2499
2547
|
#destroyRef = inject(DestroyRef);
|
|
2500
2548
|
#resizeObserver;
|
|
2501
|
-
rows = input.required(...(ngDevMode ? [{ debugName: "rows" }] : []));
|
|
2502
|
-
columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : []));
|
|
2503
|
-
gutterSize = input('1em', ...(ngDevMode ? [{ debugName: "gutterSize" }] : []));
|
|
2504
|
-
gutters = computed(() => this.columns() + 1, ...(ngDevMode ? [{ debugName: "gutters" }] : []));
|
|
2549
|
+
rows = input.required(...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
|
|
2550
|
+
columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
|
|
2551
|
+
gutterSize = input('1em', ...(ngDevMode ? [{ debugName: "gutterSize" }] : /* istanbul ignore next */ []));
|
|
2552
|
+
gutters = computed(() => this.columns() + 1, ...(ngDevMode ? [{ debugName: "gutters" }] : /* istanbul ignore next */ []));
|
|
2505
2553
|
// store signals
|
|
2506
2554
|
cells = this.#store.cells;
|
|
2507
2555
|
highlightedZones = this.#store.highlightedZones;
|
|
@@ -2523,7 +2571,7 @@ class DashboardEditorComponent {
|
|
|
2523
2571
|
}
|
|
2524
2572
|
}
|
|
2525
2573
|
return positions;
|
|
2526
|
-
}, ...(ngDevMode ? [{ debugName: "dropzonePositions" }] : []));
|
|
2574
|
+
}, ...(ngDevMode ? [{ debugName: "dropzonePositions" }] : /* istanbul ignore next */ []));
|
|
2527
2575
|
// Helper method for template
|
|
2528
2576
|
createCellId(row, col) {
|
|
2529
2577
|
return CellIdUtils.create(row, col);
|
|
@@ -2595,12 +2643,12 @@ class DashboardEditorComponent {
|
|
|
2595
2643
|
this.#store.handleDrop(event.data, event.target);
|
|
2596
2644
|
// Note: Store handles all validation and error handling internally
|
|
2597
2645
|
}
|
|
2598
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
2599
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
2646
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DashboardEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2647
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DashboardEditorComponent, isStandalone: true, selector: "ngx-dashboard-editor", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, gutterSize: { classPropertyName: "gutterSize", publicName: "gutterSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--rows": "rows()", "style.--columns": "columns()", "style.--gutter-size": "gutterSize()", "style.--gutters": "gutters()", "class.is-edit-mode": "true" } }, providers: [
|
|
2600
2648
|
CellContextMenuService,
|
|
2601
2649
|
], viewQueries: [{ propertyName: "bottomGridRef", first: true, predicate: ["bottomGrid"], descendants: true, isSignal: true }, { propertyName: "dropZones", predicate: DropZoneComponent, descendants: true, isSignal: true }, { propertyName: "cellComponents", predicate: CellComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- dashboard-editor.component.html -->\n<div class=\"grid-container\">\n <!-- Bottom grid with drop zones -->\n <div class=\"grid\" id=\"bottom-grid\" #bottomGrid>\n @for (position of dropzonePositions(); track position.id) {\n <lib-drop-zone\n class=\"drop-zone\"\n [row]=\"position.row\"\n [col]=\"position.col\"\n [index]=\"position.index\"\n [highlight]=\"highlightMap().has(createCellId(position.row, position.col))\"\n [highlightInvalid]=\"\n invalidHighlightMap().has(createCellId(position.row, position.col))\n \"\n [highlightResize]=\"\n resizePreviewMap().has(createCellId(position.row, position.col))\n \"\n [editMode]=\"true\"\n (dragEnter)=\"onDragEnter($event)\"\n (dragExit)=\"onDragExit()\"\n (dragOver)=\"onDragOver($event)\"\n (dragDrop)=\"onDragDrop($event)\"\n ></lib-drop-zone>\n }\n </div>\n\n <!-- Top grid with interactive cells -->\n <div class=\"grid\" id=\"top-grid\">\n @for (cell of cells(); track cell.widgetId) {\n <lib-cell\n class=\"grid-cell\"\n [widgetId]=\"cell.widgetId\"\n [cellId]=\"cell.cellId\"\n [isEditMode]=\"true\"\n [draggable]=\"true\"\n [row]=\"cell.row\"\n [column]=\"cell.col\"\n [rowSpan]=\"cell.rowSpan\"\n [colSpan]=\"cell.colSpan\"\n [flat]=\"cell.flat\"\n [widgetFactory]=\"cell.widgetFactory\"\n [widgetState]=\"cell.widgetState\"\n (dragStart)=\"onCellDragStart($event)\"\n (dragEnd)=\"dragEnd()\"\n (delete)=\"onCellDelete($event)\"\n (settings)=\"onCellSettings($event)\"\n (resizeStart)=\"onCellResizeStart($event)\"\n (resizeMove)=\"onCellResizeMove($event)\"\n (resizeEnd)=\"onCellResizeEnd($event)\"\n >\n </lib-cell>\n }\n </div>\n</div>\n\n<!-- Context menus -->\n<lib-cell-context-menu></lib-cell-context-menu>\n<lib-empty-cell-context-menu></lib-empty-cell-context-menu>\n", styles: ["@charset \"UTF-8\";:host{--cell-size: calc( 100cqi / var(--columns) - var(--gutter-size) * var(--gutters) / var(--columns) );--tile-size: calc(var(--cell-size) + var(--gutter-size));--tile-offset: calc( var(--gutter-size) + var(--cell-size) + var(--gutter-size) / 2 );display:block;container-type:inline-size;box-sizing:border-box;aspect-ratio:var(--columns)/var(--rows);width:100%;height:auto}:host .grid{background-image:linear-gradient(to right,rgba(100,100,100,.12) 1px,transparent 1px),linear-gradient(to bottom,rgba(100,100,100,.12) 1px,transparent 1px),linear-gradient(to bottom,rgba(100,100,100,.12) 1px,transparent 1px);background-size:var(--tile-size) var(--tile-size),var(--tile-size) var(--tile-size),100% 1px;background-position:var(--tile-offset) var(--tile-offset),var(--tile-offset) var(--tile-offset),bottom;background-repeat:repeat,repeat,no-repeat}.grid-container{position:relative;width:100%;height:100%}.grid{display:grid;gap:var(--gutter-size);padding:var(--gutter-size);position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;align-items:stretch;justify-items:stretch;grid-template-columns:repeat(var(--columns),var(--cell-size));grid-template-rows:repeat(var(--rows),var(--cell-size))}#bottom-grid{z-index:1}#top-grid{z-index:2;pointer-events:none}.grid-cell{pointer-events:auto}.grid-cell.is-dragging{pointer-events:none;opacity:.5}\n"], dependencies: [{ kind: "component", type: CellComponent, selector: "lib-cell", inputs: ["widgetId", "cellId", "widgetFactory", "widgetState", "isEditMode", "flat", "row", "column", "rowSpan", "colSpan", "draggable"], outputs: ["rowChange", "columnChange", "dragStart", "dragEnd", "edit", "delete", "settings", "resizeStart", "resizeMove", "resizeEnd"] }, { kind: "component", type: DropZoneComponent, selector: "lib-drop-zone", inputs: ["row", "col", "index", "highlight", "highlightInvalid", "highlightResize", "editMode"], outputs: ["dragEnter", "dragExit", "dragOver", "dragDrop"] }, { kind: "component", type: CellContextMenuComponent, selector: "lib-cell-context-menu" }, { kind: "component", type: EmptyCellContextMenuComponent, selector: "lib-empty-cell-context-menu" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2602
2650
|
}
|
|
2603
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
2651
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DashboardEditorComponent, decorators: [{
|
|
2604
2652
|
type: Component,
|
|
2605
2653
|
args: [{ selector: 'ngx-dashboard-editor', standalone: true, imports: [
|
|
2606
2654
|
CellComponent,
|
|
@@ -2627,7 +2675,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
2627
2675
|
*/
|
|
2628
2676
|
class DashboardBridgeService {
|
|
2629
2677
|
// Map of registered dashboard instances with their reactive dimensions
|
|
2630
|
-
dashboards = signal(new Map(), ...(ngDevMode ? [{ debugName: "dashboards" }] : []));
|
|
2678
|
+
dashboards = signal(new Map(), ...(ngDevMode ? [{ debugName: "dashboards" }] : /* istanbul ignore next */ []));
|
|
2631
2679
|
/**
|
|
2632
2680
|
* Register a dashboard store instance using its dashboard ID
|
|
2633
2681
|
*/
|
|
@@ -2678,7 +2726,7 @@ class DashboardBridgeService {
|
|
|
2678
2726
|
}
|
|
2679
2727
|
// Return dimensions from first available dashboard with fallback for undefined
|
|
2680
2728
|
return dashboardEntries[0].dimensions() || { width: 100, height: 100 };
|
|
2681
|
-
}, ...(ngDevMode ? [{ debugName: "availableDimensions" }] : []));
|
|
2729
|
+
}, ...(ngDevMode ? [{ debugName: "availableDimensions" }] : /* istanbul ignore next */ []));
|
|
2682
2730
|
/**
|
|
2683
2731
|
* Start drag operation on the first available dashboard
|
|
2684
2732
|
* (Widget lists need some dashboard to coordinate with during drag)
|
|
@@ -2701,15 +2749,15 @@ class DashboardBridgeService {
|
|
|
2701
2749
|
/**
|
|
2702
2750
|
* Get all registered dashboard IDs
|
|
2703
2751
|
*/
|
|
2704
|
-
registeredDashboards = computed(() => Array.from(this.dashboards().keys()), ...(ngDevMode ? [{ debugName: "registeredDashboards" }] : []));
|
|
2752
|
+
registeredDashboards = computed(() => Array.from(this.dashboards().keys()), ...(ngDevMode ? [{ debugName: "registeredDashboards" }] : /* istanbul ignore next */ []));
|
|
2705
2753
|
/**
|
|
2706
2754
|
* Get the number of registered dashboards
|
|
2707
2755
|
*/
|
|
2708
|
-
dashboardCount = computed(() => this.dashboards().size, ...(ngDevMode ? [{ debugName: "dashboardCount" }] : []));
|
|
2756
|
+
dashboardCount = computed(() => this.dashboards().size, ...(ngDevMode ? [{ debugName: "dashboardCount" }] : /* istanbul ignore next */ []));
|
|
2709
2757
|
/**
|
|
2710
2758
|
* Check if any dashboards are registered
|
|
2711
2759
|
*/
|
|
2712
|
-
hasDashboards = computed(() => this.dashboards().size > 0, ...(ngDevMode ? [{ debugName: "hasDashboards" }] : []));
|
|
2760
|
+
hasDashboards = computed(() => this.dashboards().size > 0, ...(ngDevMode ? [{ debugName: "hasDashboards" }] : /* istanbul ignore next */ []));
|
|
2713
2761
|
/**
|
|
2714
2762
|
* Update registration for a dashboard store when its ID becomes available
|
|
2715
2763
|
*/
|
|
@@ -2744,10 +2792,10 @@ class DashboardBridgeService {
|
|
|
2744
2792
|
getAllDashboards() {
|
|
2745
2793
|
return this.dashboards();
|
|
2746
2794
|
}
|
|
2747
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
2748
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.
|
|
2795
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DashboardBridgeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2796
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DashboardBridgeService, providedIn: 'root' });
|
|
2749
2797
|
}
|
|
2750
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
2798
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DashboardBridgeService, decorators: [{
|
|
2751
2799
|
type: Injectable,
|
|
2752
2800
|
args: [{ providedIn: 'root' }]
|
|
2753
2801
|
}] });
|
|
@@ -2762,8 +2810,8 @@ class DashboardViewportService {
|
|
|
2762
2810
|
platformId = inject(PLATFORM_ID);
|
|
2763
2811
|
destroyRef = inject(DestroyRef);
|
|
2764
2812
|
store = inject(DashboardStore);
|
|
2765
|
-
viewportSize = signal({ width: 0, height: 0 }, ...(ngDevMode ? [{ debugName: "viewportSize" }] : []));
|
|
2766
|
-
reservedSpace = signal(DEFAULT_RESERVED_SPACE, ...(ngDevMode ? [{ debugName: "reservedSpace" }] : []));
|
|
2813
|
+
viewportSize = signal({ width: 0, height: 0 }, ...(ngDevMode ? [{ debugName: "viewportSize" }] : /* istanbul ignore next */ []));
|
|
2814
|
+
reservedSpace = signal(DEFAULT_RESERVED_SPACE, ...(ngDevMode ? [{ debugName: "reservedSpace" }] : /* istanbul ignore next */ []));
|
|
2767
2815
|
resizeObserver = null;
|
|
2768
2816
|
constructor() {
|
|
2769
2817
|
if (isPlatformBrowser(this.platformId)) {
|
|
@@ -2821,7 +2869,7 @@ class DashboardViewportService {
|
|
|
2821
2869
|
width: Math.max(0, viewport.width - reserved.left - reserved.right),
|
|
2822
2870
|
height: Math.max(0, viewport.height - reserved.top - reserved.bottom)
|
|
2823
2871
|
};
|
|
2824
|
-
}, ...(ngDevMode ? [{ debugName: "availableSpace" }] : []));
|
|
2872
|
+
}, ...(ngDevMode ? [{ debugName: "availableSpace" }] : /* istanbul ignore next */ []));
|
|
2825
2873
|
/**
|
|
2826
2874
|
* Calculate dashboard constraints for this dashboard instance
|
|
2827
2875
|
*/
|
|
@@ -2862,11 +2910,11 @@ class DashboardViewportService {
|
|
|
2862
2910
|
maxHeight: Math.max(0, maxHeight),
|
|
2863
2911
|
constrainedBy
|
|
2864
2912
|
};
|
|
2865
|
-
}, ...(ngDevMode ? [{ debugName: "constraints" }] : []));
|
|
2866
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
2867
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.
|
|
2913
|
+
}, ...(ngDevMode ? [{ debugName: "constraints" }] : /* istanbul ignore next */ []));
|
|
2914
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DashboardViewportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2915
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DashboardViewportService });
|
|
2868
2916
|
}
|
|
2869
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
2917
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DashboardViewportService, decorators: [{
|
|
2870
2918
|
type: Injectable
|
|
2871
2919
|
}], ctorParameters: () => [] });
|
|
2872
2920
|
|
|
@@ -2884,17 +2932,17 @@ class DashboardComponent {
|
|
|
2884
2932
|
store = this.#store;
|
|
2885
2933
|
viewport = this.#viewport;
|
|
2886
2934
|
// Component inputs
|
|
2887
|
-
dashboardData = input.required(...(ngDevMode ? [{ debugName: "dashboardData" }] : []));
|
|
2888
|
-
editMode = input(false, ...(ngDevMode ? [{ debugName: "editMode" }] : []));
|
|
2889
|
-
reservedSpace = input(...(ngDevMode ? [undefined, { debugName: "reservedSpace" }] : []));
|
|
2890
|
-
enableSelection = input(false, ...(ngDevMode ? [{ debugName: "enableSelection" }] : []));
|
|
2935
|
+
dashboardData = input.required(...(ngDevMode ? [{ debugName: "dashboardData" }] : /* istanbul ignore next */ []));
|
|
2936
|
+
editMode = input(false, ...(ngDevMode ? [{ debugName: "editMode" }] : /* istanbul ignore next */ []));
|
|
2937
|
+
reservedSpace = input(...(ngDevMode ? [undefined, { debugName: "reservedSpace" }] : /* istanbul ignore next */ []));
|
|
2938
|
+
enableSelection = input(false, ...(ngDevMode ? [{ debugName: "enableSelection" }] : /* istanbul ignore next */ []));
|
|
2891
2939
|
// Component outputs
|
|
2892
2940
|
selectionComplete = output();
|
|
2893
2941
|
// Store signals - shared by both child components
|
|
2894
2942
|
cells = this.#store.cells;
|
|
2895
2943
|
// ViewChild references for export/import functionality
|
|
2896
|
-
dashboardEditor = viewChild(DashboardEditorComponent, ...(ngDevMode ? [{ debugName: "dashboardEditor" }] : []));
|
|
2897
|
-
dashboardViewer = viewChild(DashboardViewerComponent, ...(ngDevMode ? [{ debugName: "dashboardViewer" }] : []));
|
|
2944
|
+
dashboardEditor = viewChild(DashboardEditorComponent, ...(ngDevMode ? [{ debugName: "dashboardEditor" }] : /* istanbul ignore next */ []));
|
|
2945
|
+
dashboardViewer = viewChild(DashboardViewerComponent, ...(ngDevMode ? [{ debugName: "dashboardViewer" }] : /* istanbul ignore next */ []));
|
|
2898
2946
|
// Track if we're in the middle of preserving states
|
|
2899
2947
|
#isPreservingStates = false;
|
|
2900
2948
|
// Track if component has been initialized
|
|
@@ -3022,10 +3070,10 @@ class DashboardComponent {
|
|
|
3022
3070
|
this.#isPreservingStates = false;
|
|
3023
3071
|
}
|
|
3024
3072
|
}
|
|
3025
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
3026
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
3073
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3074
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DashboardComponent, isStandalone: true, selector: "ngx-dashboard", inputs: { dashboardData: { classPropertyName: "dashboardData", publicName: "dashboardData", isSignal: true, isRequired: true, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null }, reservedSpace: { classPropertyName: "reservedSpace", publicName: "reservedSpace", isSignal: true, isRequired: false, transformFunction: null }, enableSelection: { classPropertyName: "enableSelection", publicName: "enableSelection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionComplete: "selectionComplete" }, host: { properties: { "style.--rows": "store.rows()", "style.--columns": "store.columns()", "style.--gutter-size": "store.gutterSize()", "style.--gutters": "store.columns() + 1", "class.is-edit-mode": "editMode()", "style.max-width.px": "viewport.constraints().maxWidth", "style.max-height.px": "viewport.constraints().maxHeight" } }, providers: [DashboardStore, DashboardViewportService], viewQueries: [{ propertyName: "dashboardEditor", first: true, predicate: DashboardEditorComponent, descendants: true, isSignal: true }, { propertyName: "dashboardViewer", first: true, predicate: DashboardViewerComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<!-- dashboard.component.html -->\n<div class=\"grid-container\">\n @if (editMode()) {\n <!-- Full editor with drag & drop capabilities -->\n <ngx-dashboard-editor\n [rows]=\"store.rows()\"\n [columns]=\"store.columns()\"\n [gutterSize]=\"store.gutterSize()\"\n ></ngx-dashboard-editor>\n } @else {\n <!-- Read-only viewer -->\n <ngx-dashboard-viewer\n [rows]=\"store.rows()\"\n [columns]=\"store.columns()\"\n [gutterSize]=\"store.gutterSize()\"\n [enableSelection]=\"enableSelection()\"\n (selectionComplete)=\"selectionComplete.emit($event)\"\n ></ngx-dashboard-viewer>\n }\n</div>\n", styles: [":host{display:block;container-type:inline-size;box-sizing:border-box;aspect-ratio:var(--columns)/var(--rows);width:100%;height:auto}.grid-container{position:relative;width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: DashboardViewerComponent, selector: "ngx-dashboard-viewer", inputs: ["rows", "columns", "gutterSize", "enableSelection"], outputs: ["selectionComplete"] }, { kind: "component", type: DashboardEditorComponent, selector: "ngx-dashboard-editor", inputs: ["rows", "columns", "gutterSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3027
3075
|
}
|
|
3028
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
3076
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DashboardComponent, decorators: [{
|
|
3029
3077
|
type: Component,
|
|
3030
3078
|
args: [{ selector: 'ngx-dashboard', standalone: true, imports: [DashboardViewerComponent, DashboardEditorComponent], providers: [DashboardStore, DashboardViewportService], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
3031
3079
|
'[style.--rows]': 'store.rows()',
|
|
@@ -3045,14 +3093,14 @@ class WidgetListComponent {
|
|
|
3045
3093
|
#renderer = inject(Renderer2);
|
|
3046
3094
|
#bridge = inject(DashboardBridgeService);
|
|
3047
3095
|
// Input to track collapsed state for tooltip display
|
|
3048
|
-
collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
|
|
3049
|
-
activeWidget = signal(null, ...(ngDevMode ? [{ debugName: "activeWidget" }] : []));
|
|
3096
|
+
collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
|
|
3097
|
+
activeWidget = signal(null, ...(ngDevMode ? [{ debugName: "activeWidget" }] : /* istanbul ignore next */ []));
|
|
3050
3098
|
// Get grid cell dimensions from bridge service (uses first available dashboard)
|
|
3051
3099
|
gridCellDimensions = this.#bridge.availableDimensions;
|
|
3052
3100
|
widgets = computed(() => this.#service.widgetTypes().map((w) => ({
|
|
3053
3101
|
...w.metadata,
|
|
3054
3102
|
safeSvgIcon: this.#sanitizer.bypassSecurityTrustHtml(w.metadata.svgIcon),
|
|
3055
|
-
})), ...(ngDevMode ? [{ debugName: "widgets" }] : []));
|
|
3103
|
+
})), ...(ngDevMode ? [{ debugName: "widgets" }] : /* istanbul ignore next */ []));
|
|
3056
3104
|
onDragStart(event, widget) {
|
|
3057
3105
|
if (!event.dataTransfer)
|
|
3058
3106
|
return;
|
|
@@ -3104,10 +3152,10 @@ class WidgetListComponent {
|
|
|
3104
3152
|
// Using $localize for the template pattern
|
|
3105
3153
|
return $localize `:@@ngx.dashboard.widget.list.item.ariaLabel:${widget.name} widget: ${widget.description}`;
|
|
3106
3154
|
}
|
|
3107
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
3108
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
3155
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: WidgetListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3156
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: WidgetListComponent, isStandalone: true, selector: "ngx-dashboard-widget-list", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- widget-list.component.html -->\n<div\n class=\"widget-list\"\n role=\"list\"\n i18n-aria-label=\"@@ngx.dashboard.widget.list.available\"\n aria-label=\"Available widgets\"\n>\n @for (widget of widgets(); track widget.widgetTypeid) {\n <div\n class=\"widget-list-item\"\n [class.active]=\"activeWidget() === widget.widgetTypeid\"\n draggable=\"true\"\n (dragstart)=\"onDragStart($event, widget)\"\n (dragend)=\"onDragEnd()\"\n role=\"listitem\"\n [attr.aria-grabbed]=\"activeWidget() === widget.widgetTypeid\"\n [attr.aria-label]=\"getWidgetAriaLabel(widget)\"\n [matTooltip]=\"widget.description\"\n [matTooltipDisabled]=\"!collapsed()\"\n matTooltipPosition=\"right\"\n tabindex=\"0\"\n >\n <div class=\"icon\" [innerHTML]=\"widget.safeSvgIcon\" aria-hidden=\"true\"></div>\n <div class=\"content\">\n <strong>{{ widget.name }}</strong>\n <small>{{ widget.description }}</small>\n </div>\n </div>\n }\n</div>\n", styles: [":host{background-color:var(--mat-sys-surface-container, #f5f5f5);container-type:inline-size}.widget-list{display:flex;flex-direction:column;gap:var(--mat-sys-spacing-2, 8px)}@container (max-width: 200px){.widget-list{gap:var(--mat-sys-spacing-1, 4px)}}@container (min-width: 400px){.widget-list{gap:var(--mat-sys-spacing-3, 12px)}}.widget-list-item{display:flex;align-items:start;gap:var(--mat-sys-spacing-3, 12px);background-color:var(--mat-sys-surface, #ffffff);border:1px solid var(--mat-sys-outline-variant, #c7c7c7);padding:var(--mat-sys-spacing-3, 12px);border-radius:var(--mat-sys-corner-small, 4px);cursor:grab;transition:background-color var(--mat-sys-motion-duration-medium2, .3s) var(--mat-sys-motion-easing-standard, ease-in-out),border-color var(--mat-sys-motion-duration-medium2, .3s) var(--mat-sys-motion-easing-standard, ease-in-out),box-shadow var(--mat-sys-motion-duration-medium2, .3s) var(--mat-sys-motion-easing-standard, ease-in-out);box-shadow:var(--mat-sys-elevation-level1, 0 1px 2px rgba(0, 0, 0, .05))}@container (max-width: 200px){.widget-list-item{padding:var(--mat-sys-spacing-2, 8px);gap:var(--mat-sys-spacing-2, 8px)}}@container (min-width: 400px){.widget-list-item{padding:var(--mat-sys-spacing-4, 16px);gap:var(--mat-sys-spacing-4, 16px)}}.widget-list-item .icon{width:clamp(20px,4vw,28px);height:clamp(20px,4vw,28px);flex-shrink:0;color:var(--mat-sys-on-surface-variant, #5f5f5f);transition:color var(--mat-sys-motion-duration-short2, .15s) var(--mat-sys-motion-easing-standard, ease-in-out)}.widget-list-item .icon ::ng-deep svg{width:100%;height:100%;display:block}.widget-list-item .content{display:flex;flex-direction:column;line-height:1.2;color:var(--mat-sys-on-surface, #1c1c1c);flex:1;min-width:0}.widget-list-item .content strong{color:var(--mat-sys-on-surface, #1c1c1c);font-weight:500;font-size:clamp(.875rem,2.5vw,1rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.widget-list-item .content small{color:var(--mat-sys-on-surface-variant, #5f5f5f);font-size:clamp(.75rem,2vw,.875rem);margin-top:var(--mat-sys-spacing-1, 4px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.widget-list-item:hover{background-color:var(--mat-sys-surface-container-low, #f0f0f0);box-shadow:var(--mat-sys-elevation-level2, 0 2px 4px rgba(0, 0, 0, .1))}.widget-list-item:hover .icon{color:var(--mat-sys-on-surface, #1c1c1c)}.widget-list-item:active{cursor:grabbing;background-color:var(--mat-sys-surface-container, #f5f5f5)}.widget-list-item.active{background-color:var(--mat-sys-primary-container, #e6f2ff);border-color:var(--mat-sys-primary, #1976d2);color:var(--mat-sys-on-primary-container, #004a99)}.widget-list-item.active .content strong{color:var(--mat-sys-on-primary-container, #004a99)}.widget-list-item.active .content small{color:var(--mat-sys-on-primary-container, #004a99);opacity:.8}.widget-list-item.active .icon{color:var(--mat-sys-on-primary-container, #004a99)}.drag-ghost{position:absolute;top:0;left:0;z-index:9999;margin:0;pointer-events:none;display:flex;align-items:center;justify-content:center;box-sizing:border-box;background-color:var(--mat-sys-surface, #ffffff);border:1px solid var(--mat-sys-outline-variant, #c7c7c7);border-radius:var(--mat-sys-corner-small, 4px);box-shadow:var(--mat-sys-elevation-level3, 0 4px 6px rgba(0, 0, 0, .15));opacity:.8}.drag-ghost .icon{display:flex;align-items:center;justify-content:center;color:var(--mat-sys-on-surface-variant, #5f5f5f);opacity:.6}.drag-ghost .icon ::ng-deep svg{display:block}\n"], dependencies: [{ kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3109
3157
|
}
|
|
3110
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
3158
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: WidgetListComponent, decorators: [{
|
|
3111
3159
|
type: Component,
|
|
3112
3160
|
args: [{ selector: 'ngx-dashboard-widget-list', standalone: true, imports: [MatTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- widget-list.component.html -->\n<div\n class=\"widget-list\"\n role=\"list\"\n i18n-aria-label=\"@@ngx.dashboard.widget.list.available\"\n aria-label=\"Available widgets\"\n>\n @for (widget of widgets(); track widget.widgetTypeid) {\n <div\n class=\"widget-list-item\"\n [class.active]=\"activeWidget() === widget.widgetTypeid\"\n draggable=\"true\"\n (dragstart)=\"onDragStart($event, widget)\"\n (dragend)=\"onDragEnd()\"\n role=\"listitem\"\n [attr.aria-grabbed]=\"activeWidget() === widget.widgetTypeid\"\n [attr.aria-label]=\"getWidgetAriaLabel(widget)\"\n [matTooltip]=\"widget.description\"\n [matTooltipDisabled]=\"!collapsed()\"\n matTooltipPosition=\"right\"\n tabindex=\"0\"\n >\n <div class=\"icon\" [innerHTML]=\"widget.safeSvgIcon\" aria-hidden=\"true\"></div>\n <div class=\"content\">\n <strong>{{ widget.name }}</strong>\n <small>{{ widget.description }}</small>\n </div>\n </div>\n }\n</div>\n", styles: [":host{background-color:var(--mat-sys-surface-container, #f5f5f5);container-type:inline-size}.widget-list{display:flex;flex-direction:column;gap:var(--mat-sys-spacing-2, 8px)}@container (max-width: 200px){.widget-list{gap:var(--mat-sys-spacing-1, 4px)}}@container (min-width: 400px){.widget-list{gap:var(--mat-sys-spacing-3, 12px)}}.widget-list-item{display:flex;align-items:start;gap:var(--mat-sys-spacing-3, 12px);background-color:var(--mat-sys-surface, #ffffff);border:1px solid var(--mat-sys-outline-variant, #c7c7c7);padding:var(--mat-sys-spacing-3, 12px);border-radius:var(--mat-sys-corner-small, 4px);cursor:grab;transition:background-color var(--mat-sys-motion-duration-medium2, .3s) var(--mat-sys-motion-easing-standard, ease-in-out),border-color var(--mat-sys-motion-duration-medium2, .3s) var(--mat-sys-motion-easing-standard, ease-in-out),box-shadow var(--mat-sys-motion-duration-medium2, .3s) var(--mat-sys-motion-easing-standard, ease-in-out);box-shadow:var(--mat-sys-elevation-level1, 0 1px 2px rgba(0, 0, 0, .05))}@container (max-width: 200px){.widget-list-item{padding:var(--mat-sys-spacing-2, 8px);gap:var(--mat-sys-spacing-2, 8px)}}@container (min-width: 400px){.widget-list-item{padding:var(--mat-sys-spacing-4, 16px);gap:var(--mat-sys-spacing-4, 16px)}}.widget-list-item .icon{width:clamp(20px,4vw,28px);height:clamp(20px,4vw,28px);flex-shrink:0;color:var(--mat-sys-on-surface-variant, #5f5f5f);transition:color var(--mat-sys-motion-duration-short2, .15s) var(--mat-sys-motion-easing-standard, ease-in-out)}.widget-list-item .icon ::ng-deep svg{width:100%;height:100%;display:block}.widget-list-item .content{display:flex;flex-direction:column;line-height:1.2;color:var(--mat-sys-on-surface, #1c1c1c);flex:1;min-width:0}.widget-list-item .content strong{color:var(--mat-sys-on-surface, #1c1c1c);font-weight:500;font-size:clamp(.875rem,2.5vw,1rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.widget-list-item .content small{color:var(--mat-sys-on-surface-variant, #5f5f5f);font-size:clamp(.75rem,2vw,.875rem);margin-top:var(--mat-sys-spacing-1, 4px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.widget-list-item:hover{background-color:var(--mat-sys-surface-container-low, #f0f0f0);box-shadow:var(--mat-sys-elevation-level2, 0 2px 4px rgba(0, 0, 0, .1))}.widget-list-item:hover .icon{color:var(--mat-sys-on-surface, #1c1c1c)}.widget-list-item:active{cursor:grabbing;background-color:var(--mat-sys-surface-container, #f5f5f5)}.widget-list-item.active{background-color:var(--mat-sys-primary-container, #e6f2ff);border-color:var(--mat-sys-primary, #1976d2);color:var(--mat-sys-on-primary-container, #004a99)}.widget-list-item.active .content strong{color:var(--mat-sys-on-primary-container, #004a99)}.widget-list-item.active .content small{color:var(--mat-sys-on-primary-container, #004a99);opacity:.8}.widget-list-item.active .icon{color:var(--mat-sys-on-primary-container, #004a99)}.drag-ghost{position:absolute;top:0;left:0;z-index:9999;margin:0;pointer-events:none;display:flex;align-items:center;justify-content:center;box-sizing:border-box;background-color:var(--mat-sys-surface, #ffffff);border:1px solid var(--mat-sys-outline-variant, #c7c7c7);border-radius:var(--mat-sys-corner-small, 4px);box-shadow:var(--mat-sys-elevation-level3, 0 4px 6px rgba(0, 0, 0, .15));opacity:.8}.drag-ghost .icon{display:flex;align-items:center;justify-content:center;color:var(--mat-sys-on-surface-variant, #5f5f5f);opacity:.6}.drag-ghost .icon ::ng-deep svg{display:block}\n"] }]
|
|
3113
3161
|
}], propDecorators: { collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }] } });
|