@dragonworks/ngx-dashboard 20.3.1 → 21.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { CommonModule, isPlatformBrowser } from '@angular/common';
|
|
2
1
|
import * as i0 from '@angular/core';
|
|
3
2
|
import { signal, computed, ChangeDetectionStrategy, Component, inject, Injectable, InjectionToken, input, model, output, viewChild, ViewContainerRef, DestroyRef, Renderer2, effect, viewChildren, ElementRef, afterNextRender, PLATFORM_ID, untracked } from '@angular/core';
|
|
4
3
|
import { signalStoreFeature, withState, withMethods, patchState, withComputed, signalStore, withProps } from '@ngrx/signals';
|
|
@@ -20,10 +19,11 @@ import { MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
|
|
|
20
19
|
import * as i3 from '@angular/material/divider';
|
|
21
20
|
import { MatDividerModule } from '@angular/material/divider';
|
|
22
21
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
22
|
+
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 = '
|
|
26
|
+
const NGX_DASHBOARD_VERSION = '21.0.0';
|
|
27
27
|
|
|
28
28
|
/**
|
|
29
29
|
* Maximum number of columns supported by the grid.
|
|
@@ -240,14 +240,14 @@ class UnknownWidgetComponent {
|
|
|
240
240
|
dashboardGetState() {
|
|
241
241
|
return this.state();
|
|
242
242
|
}
|
|
243
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
244
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
243
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UnknownWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
244
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: UnknownWidgetComponent, isStandalone: true, selector: "lib-unknown-widget", ngImport: i0, template: `
|
|
245
245
|
<div class="unknown-widget-container" [matTooltip]="tooltipText()">
|
|
246
246
|
<mat-icon class="unknown-widget-icon">error_outline</mat-icon>
|
|
247
247
|
</div>
|
|
248
248
|
`, 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
249
|
}
|
|
250
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
250
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UnknownWidgetComponent, decorators: [{
|
|
251
251
|
type: Component,
|
|
252
252
|
args: [{ selector: 'lib-unknown-widget', imports: [MatIconModule, MatTooltipModule], template: `
|
|
253
253
|
<div class="unknown-widget-container" [matTooltip]="tooltipText()">
|
|
@@ -346,10 +346,10 @@ class DashboardService {
|
|
|
346
346
|
}
|
|
347
347
|
}
|
|
348
348
|
}
|
|
349
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
350
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
349
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DashboardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
350
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DashboardService, providedIn: 'root' });
|
|
351
351
|
}
|
|
352
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
352
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DashboardService, decorators: [{
|
|
353
353
|
type: Injectable,
|
|
354
354
|
args: [{
|
|
355
355
|
providedIn: 'root',
|
|
@@ -1089,145 +1089,144 @@ class CellSettingsDialogComponent {
|
|
|
1089
1089
|
};
|
|
1090
1090
|
this.dialogRef.close(newData);
|
|
1091
1091
|
}
|
|
1092
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1093
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1094
|
-
<h2 mat-dialog-title i18n="@@ngx.dashboard.cell.settings.title">
|
|
1095
|
-
Cell Display Settings
|
|
1096
|
-
</h2>
|
|
1097
|
-
<mat-dialog-content>
|
|
1098
|
-
<p class="cell-info" i18n="@@ngx.dashboard.cell.settings.cellId">
|
|
1099
|
-
Cell ID: <strong>{{ data.id }}</strong>
|
|
1100
|
-
</p>
|
|
1101
|
-
|
|
1102
|
-
<div class="radio-group">
|
|
1103
|
-
<mat-radio-group [(ngModel)]="selectedMode" name="displayMode">
|
|
1104
|
-
<mat-radio-button value="normal">
|
|
1105
|
-
<div class="radio-option">
|
|
1106
|
-
<div
|
|
1107
|
-
class="option-title"
|
|
1108
|
-
i18n="@@ngx.dashboard.cell.settings.mode.normal"
|
|
1109
|
-
>
|
|
1110
|
-
Normal
|
|
1111
|
-
</div>
|
|
1112
|
-
<div
|
|
1113
|
-
class="option-description"
|
|
1114
|
-
i18n="@@ngx.dashboard.cell.settings.mode.normal.description"
|
|
1115
|
-
>
|
|
1116
|
-
Standard cell display with full content visibility
|
|
1117
|
-
</div>
|
|
1118
|
-
</div>
|
|
1119
|
-
</mat-radio-button>
|
|
1120
|
-
|
|
1121
|
-
<mat-radio-button value="flat">
|
|
1122
|
-
<div class="radio-option">
|
|
1123
|
-
<div
|
|
1124
|
-
class="option-title"
|
|
1125
|
-
i18n="@@ngx.dashboard.cell.settings.mode.flat"
|
|
1126
|
-
>
|
|
1127
|
-
Flat
|
|
1128
|
-
</div>
|
|
1129
|
-
<div
|
|
1130
|
-
class="option-description"
|
|
1131
|
-
i18n="@@ngx.dashboard.cell.settings.mode.flat.description"
|
|
1132
|
-
>
|
|
1133
|
-
Simplified display with reduced visual emphasis
|
|
1134
|
-
</div>
|
|
1135
|
-
</div>
|
|
1136
|
-
</mat-radio-button>
|
|
1137
|
-
</mat-radio-group>
|
|
1138
|
-
</div>
|
|
1139
|
-
</mat-dialog-content>
|
|
1140
|
-
<mat-dialog-actions align="end">
|
|
1141
|
-
<button
|
|
1142
|
-
mat-button
|
|
1143
|
-
(click)="onCancel()"
|
|
1144
|
-
i18n="@@ngx.dashboard.common.cancel"
|
|
1145
|
-
>
|
|
1146
|
-
Cancel
|
|
1147
|
-
</button>
|
|
1148
|
-
<button
|
|
1149
|
-
mat-flat-button
|
|
1150
|
-
(click)="save()"
|
|
1151
|
-
[disabled]="selectedMode === currentMode"
|
|
1152
|
-
i18n="@@ngx.dashboard.common.apply"
|
|
1153
|
-
>
|
|
1154
|
-
Apply
|
|
1155
|
-
</button>
|
|
1156
|
-
</mat-dialog-actions>
|
|
1157
|
-
`, 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:
|
|
1092
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CellSettingsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1093
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: CellSettingsDialogComponent, isStandalone: true, selector: "lib-cell-settings-dialog", ngImport: i0, template: `
|
|
1094
|
+
<h2 mat-dialog-title i18n="@@ngx.dashboard.cell.settings.title">
|
|
1095
|
+
Cell Display Settings
|
|
1096
|
+
</h2>
|
|
1097
|
+
<mat-dialog-content>
|
|
1098
|
+
<p class="cell-info" i18n="@@ngx.dashboard.cell.settings.cellId">
|
|
1099
|
+
Cell ID: <strong>{{ data.id }}</strong>
|
|
1100
|
+
</p>
|
|
1101
|
+
|
|
1102
|
+
<div class="radio-group">
|
|
1103
|
+
<mat-radio-group [(ngModel)]="selectedMode" name="displayMode">
|
|
1104
|
+
<mat-radio-button value="normal">
|
|
1105
|
+
<div class="radio-option">
|
|
1106
|
+
<div
|
|
1107
|
+
class="option-title"
|
|
1108
|
+
i18n="@@ngx.dashboard.cell.settings.mode.normal"
|
|
1109
|
+
>
|
|
1110
|
+
Normal
|
|
1111
|
+
</div>
|
|
1112
|
+
<div
|
|
1113
|
+
class="option-description"
|
|
1114
|
+
i18n="@@ngx.dashboard.cell.settings.mode.normal.description"
|
|
1115
|
+
>
|
|
1116
|
+
Standard cell display with full content visibility
|
|
1117
|
+
</div>
|
|
1118
|
+
</div>
|
|
1119
|
+
</mat-radio-button>
|
|
1120
|
+
|
|
1121
|
+
<mat-radio-button value="flat">
|
|
1122
|
+
<div class="radio-option">
|
|
1123
|
+
<div
|
|
1124
|
+
class="option-title"
|
|
1125
|
+
i18n="@@ngx.dashboard.cell.settings.mode.flat"
|
|
1126
|
+
>
|
|
1127
|
+
Flat
|
|
1128
|
+
</div>
|
|
1129
|
+
<div
|
|
1130
|
+
class="option-description"
|
|
1131
|
+
i18n="@@ngx.dashboard.cell.settings.mode.flat.description"
|
|
1132
|
+
>
|
|
1133
|
+
Simplified display with reduced visual emphasis
|
|
1134
|
+
</div>
|
|
1135
|
+
</div>
|
|
1136
|
+
</mat-radio-button>
|
|
1137
|
+
</mat-radio-group>
|
|
1138
|
+
</div>
|
|
1139
|
+
</mat-dialog-content>
|
|
1140
|
+
<mat-dialog-actions align="end">
|
|
1141
|
+
<button
|
|
1142
|
+
mat-button
|
|
1143
|
+
(click)="onCancel()"
|
|
1144
|
+
i18n="@@ngx.dashboard.common.cancel"
|
|
1145
|
+
>
|
|
1146
|
+
Cancel
|
|
1147
|
+
</button>
|
|
1148
|
+
<button
|
|
1149
|
+
mat-flat-button
|
|
1150
|
+
(click)="save()"
|
|
1151
|
+
[disabled]="selectedMode === currentMode"
|
|
1152
|
+
i18n="@@ngx.dashboard.common.apply"
|
|
1153
|
+
>
|
|
1154
|
+
Apply
|
|
1155
|
+
</button>
|
|
1156
|
+
</mat-dialog-actions>
|
|
1157
|
+
`, 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
1158
|
}
|
|
1159
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1159
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CellSettingsDialogComponent, decorators: [{
|
|
1160
1160
|
type: Component,
|
|
1161
|
-
args: [{ selector: 'lib-cell-settings-dialog',
|
|
1162
|
-
CommonModule,
|
|
1161
|
+
args: [{ selector: 'lib-cell-settings-dialog', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
1163
1162
|
FormsModule,
|
|
1164
1163
|
MatDialogModule,
|
|
1165
1164
|
MatButtonModule,
|
|
1166
|
-
MatRadioModule
|
|
1167
|
-
], template: `
|
|
1168
|
-
<h2 mat-dialog-title i18n="@@ngx.dashboard.cell.settings.title">
|
|
1169
|
-
Cell Display Settings
|
|
1170
|
-
</h2>
|
|
1171
|
-
<mat-dialog-content>
|
|
1172
|
-
<p class="cell-info" i18n="@@ngx.dashboard.cell.settings.cellId">
|
|
1173
|
-
Cell ID: <strong>{{ data.id }}</strong>
|
|
1174
|
-
</p>
|
|
1175
|
-
|
|
1176
|
-
<div class="radio-group">
|
|
1177
|
-
<mat-radio-group [(ngModel)]="selectedMode" name="displayMode">
|
|
1178
|
-
<mat-radio-button value="normal">
|
|
1179
|
-
<div class="radio-option">
|
|
1180
|
-
<div
|
|
1181
|
-
class="option-title"
|
|
1182
|
-
i18n="@@ngx.dashboard.cell.settings.mode.normal"
|
|
1183
|
-
>
|
|
1184
|
-
Normal
|
|
1185
|
-
</div>
|
|
1186
|
-
<div
|
|
1187
|
-
class="option-description"
|
|
1188
|
-
i18n="@@ngx.dashboard.cell.settings.mode.normal.description"
|
|
1189
|
-
>
|
|
1190
|
-
Standard cell display with full content visibility
|
|
1191
|
-
</div>
|
|
1192
|
-
</div>
|
|
1193
|
-
</mat-radio-button>
|
|
1194
|
-
|
|
1195
|
-
<mat-radio-button value="flat">
|
|
1196
|
-
<div class="radio-option">
|
|
1197
|
-
<div
|
|
1198
|
-
class="option-title"
|
|
1199
|
-
i18n="@@ngx.dashboard.cell.settings.mode.flat"
|
|
1200
|
-
>
|
|
1201
|
-
Flat
|
|
1202
|
-
</div>
|
|
1203
|
-
<div
|
|
1204
|
-
class="option-description"
|
|
1205
|
-
i18n="@@ngx.dashboard.cell.settings.mode.flat.description"
|
|
1206
|
-
>
|
|
1207
|
-
Simplified display with reduced visual emphasis
|
|
1208
|
-
</div>
|
|
1209
|
-
</div>
|
|
1210
|
-
</mat-radio-button>
|
|
1211
|
-
</mat-radio-group>
|
|
1212
|
-
</div>
|
|
1213
|
-
</mat-dialog-content>
|
|
1214
|
-
<mat-dialog-actions align="end">
|
|
1215
|
-
<button
|
|
1216
|
-
mat-button
|
|
1217
|
-
(click)="onCancel()"
|
|
1218
|
-
i18n="@@ngx.dashboard.common.cancel"
|
|
1219
|
-
>
|
|
1220
|
-
Cancel
|
|
1221
|
-
</button>
|
|
1222
|
-
<button
|
|
1223
|
-
mat-flat-button
|
|
1224
|
-
(click)="save()"
|
|
1225
|
-
[disabled]="selectedMode === currentMode"
|
|
1226
|
-
i18n="@@ngx.dashboard.common.apply"
|
|
1227
|
-
>
|
|
1228
|
-
Apply
|
|
1229
|
-
</button>
|
|
1230
|
-
</mat-dialog-actions>
|
|
1165
|
+
MatRadioModule
|
|
1166
|
+
], template: `
|
|
1167
|
+
<h2 mat-dialog-title i18n="@@ngx.dashboard.cell.settings.title">
|
|
1168
|
+
Cell Display Settings
|
|
1169
|
+
</h2>
|
|
1170
|
+
<mat-dialog-content>
|
|
1171
|
+
<p class="cell-info" i18n="@@ngx.dashboard.cell.settings.cellId">
|
|
1172
|
+
Cell ID: <strong>{{ data.id }}</strong>
|
|
1173
|
+
</p>
|
|
1174
|
+
|
|
1175
|
+
<div class="radio-group">
|
|
1176
|
+
<mat-radio-group [(ngModel)]="selectedMode" name="displayMode">
|
|
1177
|
+
<mat-radio-button value="normal">
|
|
1178
|
+
<div class="radio-option">
|
|
1179
|
+
<div
|
|
1180
|
+
class="option-title"
|
|
1181
|
+
i18n="@@ngx.dashboard.cell.settings.mode.normal"
|
|
1182
|
+
>
|
|
1183
|
+
Normal
|
|
1184
|
+
</div>
|
|
1185
|
+
<div
|
|
1186
|
+
class="option-description"
|
|
1187
|
+
i18n="@@ngx.dashboard.cell.settings.mode.normal.description"
|
|
1188
|
+
>
|
|
1189
|
+
Standard cell display with full content visibility
|
|
1190
|
+
</div>
|
|
1191
|
+
</div>
|
|
1192
|
+
</mat-radio-button>
|
|
1193
|
+
|
|
1194
|
+
<mat-radio-button value="flat">
|
|
1195
|
+
<div class="radio-option">
|
|
1196
|
+
<div
|
|
1197
|
+
class="option-title"
|
|
1198
|
+
i18n="@@ngx.dashboard.cell.settings.mode.flat"
|
|
1199
|
+
>
|
|
1200
|
+
Flat
|
|
1201
|
+
</div>
|
|
1202
|
+
<div
|
|
1203
|
+
class="option-description"
|
|
1204
|
+
i18n="@@ngx.dashboard.cell.settings.mode.flat.description"
|
|
1205
|
+
>
|
|
1206
|
+
Simplified display with reduced visual emphasis
|
|
1207
|
+
</div>
|
|
1208
|
+
</div>
|
|
1209
|
+
</mat-radio-button>
|
|
1210
|
+
</mat-radio-group>
|
|
1211
|
+
</div>
|
|
1212
|
+
</mat-dialog-content>
|
|
1213
|
+
<mat-dialog-actions align="end">
|
|
1214
|
+
<button
|
|
1215
|
+
mat-button
|
|
1216
|
+
(click)="onCancel()"
|
|
1217
|
+
i18n="@@ngx.dashboard.common.cancel"
|
|
1218
|
+
>
|
|
1219
|
+
Cancel
|
|
1220
|
+
</button>
|
|
1221
|
+
<button
|
|
1222
|
+
mat-flat-button
|
|
1223
|
+
(click)="save()"
|
|
1224
|
+
[disabled]="selectedMode === currentMode"
|
|
1225
|
+
i18n="@@ngx.dashboard.common.apply"
|
|
1226
|
+
>
|
|
1227
|
+
Apply
|
|
1228
|
+
</button>
|
|
1229
|
+
</mat-dialog-actions>
|
|
1231
1230
|
`, 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"] }]
|
|
1232
1231
|
}], ctorParameters: () => [] });
|
|
1233
1232
|
|
|
@@ -1248,10 +1247,10 @@ class DefaultCellSettingsDialogProvider extends CellSettingsDialogProvider {
|
|
|
1248
1247
|
const result = await firstValueFrom(dialogRef.afterClosed());
|
|
1249
1248
|
return result;
|
|
1250
1249
|
}
|
|
1251
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1252
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1250
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DefaultCellSettingsDialogProvider, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
|
|
1251
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DefaultCellSettingsDialogProvider, providedIn: 'root' });
|
|
1253
1252
|
}
|
|
1254
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1253
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DefaultCellSettingsDialogProvider, decorators: [{
|
|
1255
1254
|
type: Injectable,
|
|
1256
1255
|
args: [{
|
|
1257
1256
|
providedIn: 'root',
|
|
@@ -1283,10 +1282,10 @@ class CellContextMenuService {
|
|
|
1283
1282
|
hide() {
|
|
1284
1283
|
this.#activeMenu.set(null);
|
|
1285
1284
|
}
|
|
1286
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1287
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1285
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CellContextMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1286
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CellContextMenuService });
|
|
1288
1287
|
}
|
|
1289
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1288
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CellContextMenuService, decorators: [{
|
|
1290
1289
|
type: Injectable
|
|
1291
1290
|
}] });
|
|
1292
1291
|
|
|
@@ -1434,18 +1433,24 @@ class CellComponent {
|
|
|
1434
1433
|
action: () => this.onEdit(),
|
|
1435
1434
|
disabled: !this.canEdit(),
|
|
1436
1435
|
},
|
|
1437
|
-
{
|
|
1438
|
-
label: $localize `:@@ngx.dashboard.cell.menu.settings:Settings`,
|
|
1439
|
-
icon: 'settings',
|
|
1440
|
-
action: () => this.onSettings(),
|
|
1441
|
-
},
|
|
1442
|
-
{ divider: true },
|
|
1443
|
-
{
|
|
1444
|
-
label: $localize `:@@ngx.dashboard.cell.menu.delete:Delete`,
|
|
1445
|
-
icon: 'delete',
|
|
1446
|
-
action: () => this.onDelete(),
|
|
1447
|
-
},
|
|
1448
1436
|
];
|
|
1437
|
+
// Add shared state entry if widget implements the method
|
|
1438
|
+
if (this.canEditSharedState()) {
|
|
1439
|
+
items.push({
|
|
1440
|
+
label: $localize `:@@ngx.dashboard.cell.menu.editShared:Edit Shared State`,
|
|
1441
|
+
icon: 'edit_document',
|
|
1442
|
+
action: () => this.onEditSharedState(),
|
|
1443
|
+
});
|
|
1444
|
+
}
|
|
1445
|
+
items.push({
|
|
1446
|
+
label: $localize `:@@ngx.dashboard.cell.menu.settings:Settings`,
|
|
1447
|
+
icon: 'settings',
|
|
1448
|
+
action: () => this.onSettings(),
|
|
1449
|
+
}, { divider: true }, {
|
|
1450
|
+
label: $localize `:@@ngx.dashboard.cell.menu.delete:Delete`,
|
|
1451
|
+
icon: 'delete',
|
|
1452
|
+
action: () => this.onDelete(),
|
|
1453
|
+
});
|
|
1449
1454
|
// Position menu at exact mouse coordinates
|
|
1450
1455
|
this.#contextMenuService.show(event.clientX, event.clientY, items);
|
|
1451
1456
|
}
|
|
@@ -1455,6 +1460,9 @@ class CellComponent {
|
|
|
1455
1460
|
}
|
|
1456
1461
|
return false;
|
|
1457
1462
|
}
|
|
1463
|
+
canEditSharedState() {
|
|
1464
|
+
return !!this.#widgetRef?.instance?.dashboardEditSharedState;
|
|
1465
|
+
}
|
|
1458
1466
|
onEdit() {
|
|
1459
1467
|
this.edit.emit(this.widgetId());
|
|
1460
1468
|
// Call the widget's edit dialog method if it exists
|
|
@@ -1462,6 +1470,11 @@ class CellComponent {
|
|
|
1462
1470
|
this.#widgetRef.instance.dashboardEditState();
|
|
1463
1471
|
}
|
|
1464
1472
|
}
|
|
1473
|
+
onEditSharedState() {
|
|
1474
|
+
if (this.#widgetRef?.instance?.dashboardEditSharedState) {
|
|
1475
|
+
this.#widgetRef.instance.dashboardEditSharedState();
|
|
1476
|
+
}
|
|
1477
|
+
}
|
|
1465
1478
|
onDelete() {
|
|
1466
1479
|
this.delete.emit(this.widgetId());
|
|
1467
1480
|
}
|
|
@@ -1557,19 +1570,19 @@ class CellComponent {
|
|
|
1557
1570
|
// Fall back to stored state if widget doesn't implement dashboardGetState
|
|
1558
1571
|
return this.widgetState();
|
|
1559
1572
|
}
|
|
1560
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1561
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1573
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1574
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 });
|
|
1562
1575
|
}
|
|
1563
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1576
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CellComponent, decorators: [{
|
|
1564
1577
|
type: Component,
|
|
1565
|
-
args: [{ selector: 'lib-cell', standalone: true, imports: [
|
|
1578
|
+
args: [{ selector: 'lib-cell', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1566
1579
|
'[style.grid-row]': 'gridRowStyle()',
|
|
1567
1580
|
'[style.grid-column]': 'gridColumnStyle()',
|
|
1568
1581
|
'[class.is-dragging]': 'isDragging()',
|
|
1569
1582
|
'[class.drag-active]': 'isDragActive()',
|
|
1570
1583
|
'[class.flat]': 'flat() === true',
|
|
1571
|
-
}, template: "<!-- cell.component.html -->\
|
|
1572
|
-
}], ctorParameters: () => [] });
|
|
1584
|
+
}, 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"] }]
|
|
1585
|
+
}], ctorParameters: () => [], propDecorators: { widgetId: [{ type: i0.Input, args: [{ isSignal: true, alias: "widgetId", required: true }] }], cellId: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellId", required: true }] }], widgetFactory: [{ type: i0.Input, args: [{ isSignal: true, alias: "widgetFactory", required: false }] }], widgetState: [{ type: i0.Input, args: [{ isSignal: true, alias: "widgetState", required: false }] }], isEditMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEditMode", required: false }] }], flat: [{ type: i0.Input, args: [{ isSignal: true, alias: "flat", required: false }] }], row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: true }] }, { type: i0.Output, args: ["rowChange"] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }, { type: i0.Output, args: ["columnChange"] }], rowSpan: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSpan", required: false }] }], colSpan: [{ type: i0.Input, args: [{ isSignal: true, alias: "colSpan", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], dragStart: [{ type: i0.Output, args: ["dragStart"] }], dragEnd: [{ type: i0.Output, args: ["dragEnd"] }], edit: [{ type: i0.Output, args: ["edit"] }], delete: [{ type: i0.Output, args: ["delete"] }], settings: [{ type: i0.Output, args: ["settings"] }], resizeStart: [{ type: i0.Output, args: ["resizeStart"] }], resizeMove: [{ type: i0.Output, args: ["resizeMove"] }], resizeEnd: [{ type: i0.Output, args: ["resizeEnd"] }], container: [{ type: i0.ViewChild, args: ['container', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
|
|
1573
1586
|
|
|
1574
1587
|
class DashboardViewerComponent {
|
|
1575
1588
|
#store = inject(DashboardStore);
|
|
@@ -1711,18 +1724,18 @@ class DashboardViewerComponent {
|
|
|
1711
1724
|
this.#mouseUpListener = undefined;
|
|
1712
1725
|
}
|
|
1713
1726
|
}
|
|
1714
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1715
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1727
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DashboardViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1728
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 });
|
|
1716
1729
|
}
|
|
1717
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1730
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DashboardViewerComponent, decorators: [{
|
|
1718
1731
|
type: Component,
|
|
1719
|
-
args: [{ selector: 'ngx-dashboard-viewer', standalone: true, imports: [CellComponent
|
|
1732
|
+
args: [{ selector: 'ngx-dashboard-viewer', standalone: true, imports: [CellComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1720
1733
|
'[style.--rows]': 'rows()',
|
|
1721
1734
|
'[style.--columns]': 'columns()',
|
|
1722
1735
|
'[style.--gutter-size]': 'gutterSize()',
|
|
1723
1736
|
'[style.--gutters]': 'gutters()',
|
|
1724
|
-
}, template: "<!-- Dashboard viewer - read-only grid -->\
|
|
1725
|
-
}], ctorParameters: () => [] });
|
|
1737
|
+
}, 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"] }]
|
|
1738
|
+
}], ctorParameters: () => [], propDecorators: { cellComponents: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => CellComponent), { isSignal: true }] }], gridElement: [{ type: i0.ViewChild, args: ['gridElement', { isSignal: true }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], gutterSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "gutterSize", required: false }] }], enableSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSelection", required: false }] }], selectionComplete: [{ type: i0.Output, args: ["selectionComplete"] }] } });
|
|
1726
1739
|
|
|
1727
1740
|
class CellContextMenuComponent {
|
|
1728
1741
|
menuTrigger = viewChild.required('menuTrigger', { read: MatMenuTrigger });
|
|
@@ -1797,8 +1810,8 @@ class CellContextMenuComponent {
|
|
|
1797
1810
|
this.menuService.hide();
|
|
1798
1811
|
}
|
|
1799
1812
|
}
|
|
1800
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1801
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1813
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CellContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1814
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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: `
|
|
1802
1815
|
<!-- Hidden trigger for menu positioned at exact mouse coordinates
|
|
1803
1816
|
|
|
1804
1817
|
IMPORTANT: Angular Material applies its own positioning logic to menus,
|
|
@@ -1852,7 +1865,7 @@ class CellContextMenuComponent {
|
|
|
1852
1865
|
</mat-menu>
|
|
1853
1866
|
`, 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 });
|
|
1854
1867
|
}
|
|
1855
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1868
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CellContextMenuComponent, decorators: [{
|
|
1856
1869
|
type: Component,
|
|
1857
1870
|
args: [{ selector: 'lib-cell-context-menu', standalone: true, imports: [MatMenuModule, MatIconModule, MatDividerModule, MatButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
1858
1871
|
<!-- Hidden trigger for menu positioned at exact mouse coordinates
|
|
@@ -1907,7 +1920,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
|
|
|
1907
1920
|
}
|
|
1908
1921
|
</mat-menu>
|
|
1909
1922
|
`, styles: [":host{display:contents}\n"] }]
|
|
1910
|
-
}], ctorParameters: () => [] });
|
|
1923
|
+
}], ctorParameters: () => [], propDecorators: { menuTrigger: [{ type: i0.ViewChild, args: ['menuTrigger', { ...{ read: MatMenuTrigger }, isSignal: true }] }] } });
|
|
1911
1924
|
|
|
1912
1925
|
/**
|
|
1913
1926
|
* Abstract provider for handling context menu events on empty dashboard cells.
|
|
@@ -1943,10 +1956,10 @@ class DefaultEmptyCellContextProvider extends EmptyCellContextProvider {
|
|
|
1943
1956
|
handleEmptyCellContext() {
|
|
1944
1957
|
// Default behavior: do nothing
|
|
1945
1958
|
}
|
|
1946
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1947
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1959
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DefaultEmptyCellContextProvider, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
|
|
1960
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DefaultEmptyCellContextProvider, providedIn: 'root' });
|
|
1948
1961
|
}
|
|
1949
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1962
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DefaultEmptyCellContextProvider, decorators: [{
|
|
1950
1963
|
type: Injectable,
|
|
1951
1964
|
args: [{
|
|
1952
1965
|
providedIn: 'root',
|
|
@@ -2010,10 +2023,10 @@ class EmptyCellContextMenuService {
|
|
|
2010
2023
|
setLastSelection(widgetTypeId) {
|
|
2011
2024
|
this.#lastSelectedWidgetTypeId.set(widgetTypeId);
|
|
2012
2025
|
}
|
|
2013
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2014
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
2026
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: EmptyCellContextMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2027
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: EmptyCellContextMenuService, providedIn: 'root' });
|
|
2015
2028
|
}
|
|
2016
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2029
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: EmptyCellContextMenuService, decorators: [{
|
|
2017
2030
|
type: Injectable,
|
|
2018
2031
|
args: [{
|
|
2019
2032
|
providedIn: 'root',
|
|
@@ -2128,10 +2141,10 @@ class WidgetListContextMenuProvider extends EmptyCellContextProvider {
|
|
|
2128
2141
|
'Ensure you are using a compatible version of the dashboard component.');
|
|
2129
2142
|
}
|
|
2130
2143
|
}
|
|
2131
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2132
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
2144
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: WidgetListContextMenuProvider, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
|
|
2145
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: WidgetListContextMenuProvider });
|
|
2133
2146
|
}
|
|
2134
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2147
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: WidgetListContextMenuProvider, decorators: [{
|
|
2135
2148
|
type: Injectable
|
|
2136
2149
|
}] });
|
|
2137
2150
|
|
|
@@ -2244,13 +2257,13 @@ class DropZoneComponent {
|
|
|
2244
2257
|
});
|
|
2245
2258
|
}
|
|
2246
2259
|
}
|
|
2247
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2248
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2260
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DropZoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2261
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 });
|
|
2249
2262
|
}
|
|
2250
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2263
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DropZoneComponent, decorators: [{
|
|
2251
2264
|
type: Component,
|
|
2252
|
-
args: [{ selector: 'lib-drop-zone', standalone: true, imports: [
|
|
2253
|
-
}] });
|
|
2265
|
+
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
|
+
}], 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"] }] } });
|
|
2254
2267
|
|
|
2255
2268
|
/**
|
|
2256
2269
|
* Context menu component for empty dashboard cells.
|
|
@@ -2348,135 +2361,134 @@ class EmptyCellContextMenuComponent {
|
|
|
2348
2361
|
sanitizeSvg(svg) {
|
|
2349
2362
|
return this.#sanitizer.bypassSecurityTrustHtml(svg);
|
|
2350
2363
|
}
|
|
2351
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2352
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2353
|
-
<!-- Hidden trigger for menu positioned at exact mouse coordinates
|
|
2354
|
-
|
|
2355
|
-
IMPORTANT: Angular Material applies its own positioning logic to menus,
|
|
2356
|
-
which by default offsets the menu from the trigger element to avoid overlap.
|
|
2357
|
-
To achieve precise positioning at mouse coordinates, we use these workarounds:
|
|
2358
|
-
|
|
2359
|
-
1. The trigger container is 1x1px (not 0x0) because Material needs a physical
|
|
2360
|
-
element to calculate position against. Zero-sized elements cause unpredictable
|
|
2361
|
-
positioning.
|
|
2362
|
-
|
|
2363
|
-
2. We use opacity:0 instead of visibility:hidden to keep the element in the
|
|
2364
|
-
layout flow while making it invisible.
|
|
2365
|
-
|
|
2366
|
-
3. The button itself is styled to 1x1px with no padding to serve as a precise
|
|
2367
|
-
anchor point for the menu.
|
|
2368
|
-
|
|
2369
|
-
4. The mat-menu uses [overlapTrigger]="true" to allow the menu to appear
|
|
2370
|
-
directly at the trigger position rather than offset from it.
|
|
2371
|
-
|
|
2372
|
-
This approach ensures the menu appears at the exact mouse coordinates passed
|
|
2373
|
-
from the empty cell context provider's right-click handler.
|
|
2374
|
-
-->
|
|
2375
|
-
<div
|
|
2376
|
-
style="position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none;"
|
|
2377
|
-
[style]="menuPosition()">
|
|
2378
|
-
<button
|
|
2379
|
-
mat-button
|
|
2380
|
-
#menuTrigger="matMenuTrigger"
|
|
2381
|
-
[matMenuTriggerFor]="contextMenu"
|
|
2382
|
-
style="width: 1px; height: 1px; padding: 0; min-width: 0; line-height: 0;">
|
|
2383
|
-
</button>
|
|
2384
|
-
</div>
|
|
2385
|
-
|
|
2386
|
-
<!-- Context menu with widget list -->
|
|
2387
|
-
<mat-menu
|
|
2388
|
-
#contextMenu="matMenu"
|
|
2389
|
-
[overlapTrigger]="true"
|
|
2390
|
-
class="empty-cell-widget-menu">
|
|
2391
|
-
@for (item of menuItems(); track $index) {
|
|
2392
|
-
@if (item.divider) {
|
|
2393
|
-
<mat-divider></mat-divider>
|
|
2394
|
-
} @else {
|
|
2395
|
-
<button
|
|
2396
|
-
mat-menu-item
|
|
2397
|
-
(click)="executeAction(item)"
|
|
2398
|
-
[disabled]="item.disabled"
|
|
2399
|
-
[attr.aria-label]="item.label">
|
|
2400
|
-
@if (item.svgIcon) {
|
|
2401
|
-
<div class="widget-icon" [innerHTML]="sanitizeSvg(item.svgIcon)"></div>
|
|
2402
|
-
} @else if (item.icon) {
|
|
2403
|
-
<mat-icon>{{ item.icon }}</mat-icon>
|
|
2404
|
-
}
|
|
2405
|
-
{{ item.label }}
|
|
2406
|
-
</button>
|
|
2407
|
-
}
|
|
2408
|
-
}
|
|
2409
|
-
</mat-menu>
|
|
2410
|
-
`, 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"] }
|
|
2364
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: EmptyCellContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2365
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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
|
+
<!-- Hidden trigger for menu positioned at exact mouse coordinates
|
|
2367
|
+
|
|
2368
|
+
IMPORTANT: Angular Material applies its own positioning logic to menus,
|
|
2369
|
+
which by default offsets the menu from the trigger element to avoid overlap.
|
|
2370
|
+
To achieve precise positioning at mouse coordinates, we use these workarounds:
|
|
2371
|
+
|
|
2372
|
+
1. The trigger container is 1x1px (not 0x0) because Material needs a physical
|
|
2373
|
+
element to calculate position against. Zero-sized elements cause unpredictable
|
|
2374
|
+
positioning.
|
|
2375
|
+
|
|
2376
|
+
2. We use opacity:0 instead of visibility:hidden to keep the element in the
|
|
2377
|
+
layout flow while making it invisible.
|
|
2378
|
+
|
|
2379
|
+
3. The button itself is styled to 1x1px with no padding to serve as a precise
|
|
2380
|
+
anchor point for the menu.
|
|
2381
|
+
|
|
2382
|
+
4. The mat-menu uses [overlapTrigger]="true" to allow the menu to appear
|
|
2383
|
+
directly at the trigger position rather than offset from it.
|
|
2384
|
+
|
|
2385
|
+
This approach ensures the menu appears at the exact mouse coordinates passed
|
|
2386
|
+
from the empty cell context provider's right-click handler.
|
|
2387
|
+
-->
|
|
2388
|
+
<div
|
|
2389
|
+
style="position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none;"
|
|
2390
|
+
[style]="menuPosition()">
|
|
2391
|
+
<button
|
|
2392
|
+
mat-button
|
|
2393
|
+
#menuTrigger="matMenuTrigger"
|
|
2394
|
+
[matMenuTriggerFor]="contextMenu"
|
|
2395
|
+
style="width: 1px; height: 1px; padding: 0; min-width: 0; line-height: 0;">
|
|
2396
|
+
</button>
|
|
2397
|
+
</div>
|
|
2398
|
+
|
|
2399
|
+
<!-- Context menu with widget list -->
|
|
2400
|
+
<mat-menu
|
|
2401
|
+
#contextMenu="matMenu"
|
|
2402
|
+
[overlapTrigger]="true"
|
|
2403
|
+
class="empty-cell-widget-menu">
|
|
2404
|
+
@for (item of menuItems(); track $index) {
|
|
2405
|
+
@if (item.divider) {
|
|
2406
|
+
<mat-divider></mat-divider>
|
|
2407
|
+
} @else {
|
|
2408
|
+
<button
|
|
2409
|
+
mat-menu-item
|
|
2410
|
+
(click)="executeAction(item)"
|
|
2411
|
+
[disabled]="item.disabled"
|
|
2412
|
+
[attr.aria-label]="item.label">
|
|
2413
|
+
@if (item.svgIcon) {
|
|
2414
|
+
<div class="widget-icon" [innerHTML]="sanitizeSvg(item.svgIcon)"></div>
|
|
2415
|
+
} @else if (item.icon) {
|
|
2416
|
+
<mat-icon>{{ item.icon }}</mat-icon>
|
|
2417
|
+
}
|
|
2418
|
+
{{ item.label }}
|
|
2419
|
+
</button>
|
|
2420
|
+
}
|
|
2421
|
+
}
|
|
2422
|
+
</mat-menu>
|
|
2423
|
+
`, 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 });
|
|
2411
2424
|
}
|
|
2412
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2425
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: EmptyCellContextMenuComponent, decorators: [{
|
|
2413
2426
|
type: Component,
|
|
2414
2427
|
args: [{ selector: 'lib-empty-cell-context-menu', standalone: true, imports: [
|
|
2415
2428
|
MatMenuModule,
|
|
2416
2429
|
MatIconModule,
|
|
2417
2430
|
MatDividerModule,
|
|
2418
|
-
MatButtonModule
|
|
2419
|
-
|
|
2420
|
-
|
|
2421
|
-
|
|
2422
|
-
|
|
2423
|
-
|
|
2424
|
-
|
|
2425
|
-
|
|
2426
|
-
|
|
2427
|
-
|
|
2428
|
-
|
|
2429
|
-
|
|
2430
|
-
|
|
2431
|
-
|
|
2432
|
-
|
|
2433
|
-
|
|
2434
|
-
|
|
2435
|
-
|
|
2436
|
-
|
|
2437
|
-
|
|
2438
|
-
|
|
2439
|
-
|
|
2440
|
-
|
|
2441
|
-
|
|
2442
|
-
|
|
2443
|
-
|
|
2444
|
-
style="
|
|
2445
|
-
|
|
2446
|
-
|
|
2447
|
-
|
|
2448
|
-
|
|
2449
|
-
|
|
2450
|
-
|
|
2451
|
-
|
|
2452
|
-
|
|
2453
|
-
|
|
2454
|
-
|
|
2455
|
-
|
|
2456
|
-
|
|
2457
|
-
|
|
2458
|
-
|
|
2459
|
-
|
|
2460
|
-
|
|
2461
|
-
|
|
2462
|
-
|
|
2463
|
-
|
|
2464
|
-
|
|
2465
|
-
|
|
2466
|
-
[
|
|
2467
|
-
|
|
2468
|
-
|
|
2469
|
-
|
|
2470
|
-
|
|
2471
|
-
|
|
2472
|
-
}
|
|
2473
|
-
|
|
2474
|
-
|
|
2475
|
-
|
|
2476
|
-
|
|
2477
|
-
</mat-menu>
|
|
2431
|
+
MatButtonModule
|
|
2432
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
2433
|
+
<!-- Hidden trigger for menu positioned at exact mouse coordinates
|
|
2434
|
+
|
|
2435
|
+
IMPORTANT: Angular Material applies its own positioning logic to menus,
|
|
2436
|
+
which by default offsets the menu from the trigger element to avoid overlap.
|
|
2437
|
+
To achieve precise positioning at mouse coordinates, we use these workarounds:
|
|
2438
|
+
|
|
2439
|
+
1. The trigger container is 1x1px (not 0x0) because Material needs a physical
|
|
2440
|
+
element to calculate position against. Zero-sized elements cause unpredictable
|
|
2441
|
+
positioning.
|
|
2442
|
+
|
|
2443
|
+
2. We use opacity:0 instead of visibility:hidden to keep the element in the
|
|
2444
|
+
layout flow while making it invisible.
|
|
2445
|
+
|
|
2446
|
+
3. The button itself is styled to 1x1px with no padding to serve as a precise
|
|
2447
|
+
anchor point for the menu.
|
|
2448
|
+
|
|
2449
|
+
4. The mat-menu uses [overlapTrigger]="true" to allow the menu to appear
|
|
2450
|
+
directly at the trigger position rather than offset from it.
|
|
2451
|
+
|
|
2452
|
+
This approach ensures the menu appears at the exact mouse coordinates passed
|
|
2453
|
+
from the empty cell context provider's right-click handler.
|
|
2454
|
+
-->
|
|
2455
|
+
<div
|
|
2456
|
+
style="position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none;"
|
|
2457
|
+
[style]="menuPosition()">
|
|
2458
|
+
<button
|
|
2459
|
+
mat-button
|
|
2460
|
+
#menuTrigger="matMenuTrigger"
|
|
2461
|
+
[matMenuTriggerFor]="contextMenu"
|
|
2462
|
+
style="width: 1px; height: 1px; padding: 0; min-width: 0; line-height: 0;">
|
|
2463
|
+
</button>
|
|
2464
|
+
</div>
|
|
2465
|
+
|
|
2466
|
+
<!-- Context menu with widget list -->
|
|
2467
|
+
<mat-menu
|
|
2468
|
+
#contextMenu="matMenu"
|
|
2469
|
+
[overlapTrigger]="true"
|
|
2470
|
+
class="empty-cell-widget-menu">
|
|
2471
|
+
@for (item of menuItems(); track $index) {
|
|
2472
|
+
@if (item.divider) {
|
|
2473
|
+
<mat-divider></mat-divider>
|
|
2474
|
+
} @else {
|
|
2475
|
+
<button
|
|
2476
|
+
mat-menu-item
|
|
2477
|
+
(click)="executeAction(item)"
|
|
2478
|
+
[disabled]="item.disabled"
|
|
2479
|
+
[attr.aria-label]="item.label">
|
|
2480
|
+
@if (item.svgIcon) {
|
|
2481
|
+
<div class="widget-icon" [innerHTML]="sanitizeSvg(item.svgIcon)"></div>
|
|
2482
|
+
} @else if (item.icon) {
|
|
2483
|
+
<mat-icon>{{ item.icon }}</mat-icon>
|
|
2484
|
+
}
|
|
2485
|
+
{{ item.label }}
|
|
2486
|
+
</button>
|
|
2487
|
+
}
|
|
2488
|
+
}
|
|
2489
|
+
</mat-menu>
|
|
2478
2490
|
`, 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"] }]
|
|
2479
|
-
}], ctorParameters: () => [] });
|
|
2491
|
+
}], ctorParameters: () => [], propDecorators: { menuTrigger: [{ type: i0.ViewChild, args: ['menuTrigger', { ...{ read: MatMenuTrigger }, isSignal: true }] }] } });
|
|
2480
2492
|
|
|
2481
2493
|
// dashboard-editor.component.ts
|
|
2482
2494
|
class DashboardEditorComponent {
|
|
@@ -2583,19 +2595,18 @@ class DashboardEditorComponent {
|
|
|
2583
2595
|
this.#store.handleDrop(event.data, event.target);
|
|
2584
2596
|
// Note: Store handles all validation and error handling internally
|
|
2585
2597
|
}
|
|
2586
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2587
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2598
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DashboardEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2599
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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: [
|
|
2588
2600
|
CellContextMenuService,
|
|
2589
|
-
], 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 -->\
|
|
2601
|
+
], 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 });
|
|
2590
2602
|
}
|
|
2591
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2603
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DashboardEditorComponent, decorators: [{
|
|
2592
2604
|
type: Component,
|
|
2593
2605
|
args: [{ selector: 'ngx-dashboard-editor', standalone: true, imports: [
|
|
2594
2606
|
CellComponent,
|
|
2595
|
-
CommonModule,
|
|
2596
2607
|
DropZoneComponent,
|
|
2597
2608
|
CellContextMenuComponent,
|
|
2598
|
-
EmptyCellContextMenuComponent
|
|
2609
|
+
EmptyCellContextMenuComponent
|
|
2599
2610
|
], providers: [
|
|
2600
2611
|
CellContextMenuService,
|
|
2601
2612
|
], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
@@ -2604,8 +2615,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
|
|
|
2604
2615
|
'[style.--gutter-size]': 'gutterSize()',
|
|
2605
2616
|
'[style.--gutters]': 'gutters()',
|
|
2606
2617
|
'[class.is-edit-mode]': 'true', // Always in edit mode
|
|
2607
|
-
}, template: "<!-- dashboard-editor.component.html -->\
|
|
2608
|
-
}], ctorParameters: () => [] });
|
|
2618
|
+
}, 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"] }]
|
|
2619
|
+
}], ctorParameters: () => [], propDecorators: { bottomGridRef: [{ type: i0.ViewChild, args: ['bottomGrid', { isSignal: true }] }], dropZones: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => DropZoneComponent), { isSignal: true }] }], cellComponents: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => CellComponent), { isSignal: true }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], gutterSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "gutterSize", required: false }] }] } });
|
|
2609
2620
|
|
|
2610
2621
|
// dashboard-bridge.service.ts
|
|
2611
2622
|
/**
|
|
@@ -2733,10 +2744,10 @@ class DashboardBridgeService {
|
|
|
2733
2744
|
getAllDashboards() {
|
|
2734
2745
|
return this.dashboards();
|
|
2735
2746
|
}
|
|
2736
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2737
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
2747
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DashboardBridgeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2748
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DashboardBridgeService, providedIn: 'root' });
|
|
2738
2749
|
}
|
|
2739
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2750
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DashboardBridgeService, decorators: [{
|
|
2740
2751
|
type: Injectable,
|
|
2741
2752
|
args: [{ providedIn: 'root' }]
|
|
2742
2753
|
}] });
|
|
@@ -2852,10 +2863,10 @@ class DashboardViewportService {
|
|
|
2852
2863
|
constrainedBy
|
|
2853
2864
|
};
|
|
2854
2865
|
}, ...(ngDevMode ? [{ debugName: "constraints" }] : []));
|
|
2855
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2856
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
2866
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DashboardViewportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2867
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DashboardViewportService });
|
|
2857
2868
|
}
|
|
2858
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2869
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DashboardViewportService, decorators: [{
|
|
2859
2870
|
type: Injectable
|
|
2860
2871
|
}], ctorParameters: () => [] });
|
|
2861
2872
|
|
|
@@ -3011,12 +3022,12 @@ class DashboardComponent {
|
|
|
3011
3022
|
this.#isPreservingStates = false;
|
|
3012
3023
|
}
|
|
3013
3024
|
}
|
|
3014
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3015
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3025
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3026
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 });
|
|
3016
3027
|
}
|
|
3017
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3028
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DashboardComponent, decorators: [{
|
|
3018
3029
|
type: Component,
|
|
3019
|
-
args: [{ selector: 'ngx-dashboard', standalone: true, imports: [
|
|
3030
|
+
args: [{ selector: 'ngx-dashboard', standalone: true, imports: [DashboardViewerComponent, DashboardEditorComponent], providers: [DashboardStore, DashboardViewportService], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
3020
3031
|
'[style.--rows]': 'store.rows()',
|
|
3021
3032
|
'[style.--columns]': 'store.columns()',
|
|
3022
3033
|
'[style.--gutter-size]': 'store.gutterSize()',
|
|
@@ -3024,8 +3035,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
|
|
|
3024
3035
|
'[class.is-edit-mode]': 'editMode()',
|
|
3025
3036
|
'[style.max-width.px]': 'viewport.constraints().maxWidth',
|
|
3026
3037
|
'[style.max-height.px]': 'viewport.constraints().maxHeight',
|
|
3027
|
-
}, template: "<!-- dashboard.component.html -->\
|
|
3028
|
-
}], ctorParameters: () => [] });
|
|
3038
|
+
}, 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"] }]
|
|
3039
|
+
}], ctorParameters: () => [], propDecorators: { dashboardData: [{ type: i0.Input, args: [{ isSignal: true, alias: "dashboardData", required: true }] }], editMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editMode", required: false }] }], reservedSpace: [{ type: i0.Input, args: [{ isSignal: true, alias: "reservedSpace", required: false }] }], enableSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSelection", required: false }] }], selectionComplete: [{ type: i0.Output, args: ["selectionComplete"] }], dashboardEditor: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DashboardEditorComponent), { isSignal: true }] }], dashboardViewer: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DashboardViewerComponent), { isSignal: true }] }] } });
|
|
3029
3040
|
|
|
3030
3041
|
// widget-list.component.ts
|
|
3031
3042
|
class WidgetListComponent {
|
|
@@ -3093,13 +3104,13 @@ class WidgetListComponent {
|
|
|
3093
3104
|
// Using $localize for the template pattern
|
|
3094
3105
|
return $localize `:@@ngx.dashboard.widget.list.item.ariaLabel:${widget.name} widget: ${widget.description}`;
|
|
3095
3106
|
}
|
|
3096
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3097
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3107
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: WidgetListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3108
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 });
|
|
3098
3109
|
}
|
|
3099
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3110
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: WidgetListComponent, decorators: [{
|
|
3100
3111
|
type: Component,
|
|
3101
|
-
args: [{ selector: 'ngx-dashboard-widget-list', standalone: true, imports: [MatTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- widget-list.component.html -->\
|
|
3102
|
-
}] });
|
|
3112
|
+
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
|
+
}], propDecorators: { collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }] } });
|
|
3103
3114
|
|
|
3104
3115
|
/*
|
|
3105
3116
|
* Public API Surface of ngx-dashboard
|