@c8y/ngx-components 1022.28.2 → 1022.30.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.
- package/context-dashboard/widget-config.component.d.ts +3 -1
- package/context-dashboard/widget-config.component.d.ts.map +1 -1
- package/context-dashboard/widget-config.service.d.ts +14 -8
- package/context-dashboard/widget-config.service.d.ts.map +1 -1
- package/core/dynamic-component/dynamic-component.model.d.ts +26 -0
- package/core/dynamic-component/dynamic-component.model.d.ts.map +1 -1
- package/core/index.d.ts +1 -0
- package/core/index.d.ts.map +1 -1
- package/core/resizable-grid/index.d.ts +2 -0
- package/core/resizable-grid/index.d.ts.map +1 -0
- package/core/resizable-grid/resizable-grid.component.d.ts +114 -0
- package/core/resizable-grid/resizable-grid.component.d.ts.map +1 -0
- package/dashboard-manager/devicemanagement/c8y-ngx-components-dashboard-manager-devicemanagement.d.ts.map +1 -0
- package/dashboard-manager/devicemanagement/index.d.ts +2 -0
- package/dashboard-manager/devicemanagement/index.d.ts.map +1 -0
- package/fesm2022/c8y-ngx-components-context-dashboard.mjs +27 -15
- package/fesm2022/c8y-ngx-components-context-dashboard.mjs.map +1 -1
- package/fesm2022/c8y-ngx-components-dashboard-manager-devicemanagement.mjs +19 -0
- package/fesm2022/c8y-ngx-components-dashboard-manager-devicemanagement.mjs.map +1 -0
- package/fesm2022/c8y-ngx-components.mjs +332 -1
- package/fesm2022/c8y-ngx-components.mjs.map +1 -1
- package/locales/locales.pot +3 -0
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { AfterContentInit, OnDestroy } from '@angular/core';
|
|
2
2
|
import { NgForm } from '@angular/forms';
|
|
3
|
-
import { BottomDrawerRef, DynamicComponentDefinition, Widget } from '@c8y/ngx-components';
|
|
3
|
+
import { BottomDrawerRef, DynamicComponentDefinition, Widget, WIDGET_CONFIGURATION_GRID_SIZE } from '@c8y/ngx-components';
|
|
4
4
|
import { Subject } from 'rxjs';
|
|
5
5
|
import { ContextDashboardManagedObject, ContextWidgetConfig } from './context-dashboard.model';
|
|
6
6
|
import { ContextDashboardService } from './context-dashboard.service';
|
|
@@ -21,6 +21,7 @@ export declare class WidgetConfigComponent implements AfterContentInit, OnDestro
|
|
|
21
21
|
context: any;
|
|
22
22
|
componentLabel: string;
|
|
23
23
|
mo: ContextDashboardManagedObject;
|
|
24
|
+
identifier: `${string}-${string}-${string}-${string}-${string}`;
|
|
24
25
|
styling: {
|
|
25
26
|
headerClass: string;
|
|
26
27
|
contentClass: string;
|
|
@@ -72,6 +73,7 @@ export declare class WidgetConfigComponent implements AfterContentInit, OnDestro
|
|
|
72
73
|
readonly description: "The widget has no background.";
|
|
73
74
|
}];
|
|
74
75
|
};
|
|
76
|
+
WIDGET_CONFIGURATION_GRID_SIZE: typeof WIDGET_CONFIGURATION_GRID_SIZE;
|
|
75
77
|
configForm: NgForm;
|
|
76
78
|
/**
|
|
77
79
|
* Used as wrapper component to inject providers.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"widget-config.component.d.ts","sourceRoot":"","sources":["../../context-dashboard/widget-config.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAa,SAAS,EAAa,MAAM,eAAe,CAAC;AAClF,OAAO,EAAE,MAAM,EAAe,MAAM,gBAAgB,CAAC;AACrD,OAAO,EACL,eAAe,EACf,0BAA0B,EAC1B,MAAM,
|
|
1
|
+
{"version":3,"file":"widget-config.component.d.ts","sourceRoot":"","sources":["../../context-dashboard/widget-config.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAa,SAAS,EAAa,MAAM,eAAe,CAAC;AAClF,OAAO,EAAE,MAAM,EAAe,MAAM,gBAAgB,CAAC;AACrD,OAAO,EACL,eAAe,EACf,0BAA0B,EAC1B,MAAM,EAWN,8BAA8B,EAC/B,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAO,OAAO,EAAuB,MAAM,MAAM,CAAC;AAEzD,OAAO,EACL,6BAA6B,EAC7B,mBAAmB,EAGpB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AACtE,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,yBAAyB,EAAE,MAAM,8CAA8C,CAAC;AACzF,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;;AAKjD,qBAwBa,qBAAsB,YAAW,gBAAgB,EAAE,SAAS;IAkDrE,OAAO,CAAC,aAAa;IACrB,OAAO,CAAC,eAAe;IAChB,uBAAuB,EAAE,uBAAuB;IAChD,mBAAmB,EAAE,mBAAmB;IApDjD,YAAY,EAAE,0BAA0B,EAAE,CAAC;IAC3C,UAAU,EAAE,0BAA0B,EAAE,CAAC;IACzC,QAAQ,EAAE,0BAA0B,CAAC;IACrC,aAAa,mBAAiB;IAC9B,UAAU,SAAM;IAChB,OAAO,EAAE,GAAG,CAAC;IACb,cAAc,EAAE,MAAM,CAAC;IACvB,EAAE,EAAE,6BAA6B,CAAC;IAClC,UAAU,sDAAuB;IACjC,OAAO;;;MAGL;IACF,cAAc;;;MAGZ;IACF,OAAO,EAAE,GAAG,CAAC;IACb,YAAY,EAAE,mBAAmB,CAAC;IAClC,SAAS,UAAS;IAClB,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAAqD;IACpE,8BAA8B,wCAAkC;IAGhE,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,gBAAgB,mCAA6B;IAE7C,IAAI,MAAM,YAET;IAED,IAAI,qBAAqB,IAAI,OAAO,CAEnC;IAED,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,CAGpB;IAEH,OAAO,CAAC,SAAS,CAAe;IAChC,OAAO,CAAC,KAAK,CAA0B;IACvC,OAAO,CAAC,OAAO,CAAyB;gBAG9B,aAAa,EAAE,aAAa,EAC5B,eAAe,EAAE,eAAe,CAAC,qBAAqB,CAAC,EACxD,uBAAuB,EAAE,uBAAuB,EAChD,mBAAmB,EAAE,mBAAmB;IAG3C,kBAAkB,IAAI,OAAO,CAAC,IAAI,CAAC;IAmBzC,cAAc,IAAI,OAAO;IASzB,qBAAqB;IAUf,IAAI;IAwCV,MAAM,CAAC,GAAG,KAAA,EAAE,IAAI,GAAE,QAAQ,GAAG,QAAmB;IA2BhD,MAAM;IAUN,WAAW;IAKX,qBAAqB;IAKf,KAAK;IAMX,QAAQ,CAAC,SAAS,UAAQ;IAiB1B,WAAW,IAAI,IAAI;IAOnB,OAAO,CAAC,WAAW;IAgBnB,OAAO,CAAC,uBAAuB;IAc/B,OAAO,CAAC,eAAe;IAsBvB,OAAO,CAAC,mBAAmB;IAc3B,OAAO,CAAC,4BAA4B;yCArRzB,qBAAqB;2CAArB,qBAAqB;CA+SjC"}
|
|
@@ -8,6 +8,11 @@ import * as i0 from "@angular/core";
|
|
|
8
8
|
export declare class WidgetConfigService {
|
|
9
9
|
private widgetConfigSectionService;
|
|
10
10
|
private _currentConfig$;
|
|
11
|
+
private _instanceId$;
|
|
12
|
+
/**
|
|
13
|
+
* The unique identifier of the current widget instance.
|
|
14
|
+
*/
|
|
15
|
+
instanceId$: Observable<string>;
|
|
11
16
|
/**
|
|
12
17
|
* The preview of the currently selected widget. If `null` no preview is shown
|
|
13
18
|
* (except if the selected widget has no configuration).
|
|
@@ -75,7 +80,7 @@ export declare class WidgetConfigService {
|
|
|
75
80
|
* Updates the configuration of the selected widget.
|
|
76
81
|
* @param change The change to apply to the configuration.
|
|
77
82
|
* @param force If set to true, the configuration will be updated even if no changes are made. Also concurrency checks are ignored and no change is emitted on the component.
|
|
78
|
-
*
|
|
83
|
+
* Use with caution and only if you want to reset the configuration to some default.
|
|
79
84
|
*/
|
|
80
85
|
updateConfig(change: Partial<ContextWidgetConfig>, force?: boolean): void;
|
|
81
86
|
/**
|
|
@@ -86,8 +91,9 @@ export declare class WidgetConfigService {
|
|
|
86
91
|
/**
|
|
87
92
|
* Select a widget
|
|
88
93
|
* @param selected The widget to select.
|
|
94
|
+
* @param identifier An optional unique identifier for the widget instance. Only used if the widget is not new.
|
|
89
95
|
*/
|
|
90
|
-
selectWidget(selected: DynamicComponentDefinition): void;
|
|
96
|
+
selectWidget(selected: DynamicComponentDefinition, identifier?: string): void;
|
|
91
97
|
/**
|
|
92
98
|
* Deselect the currently selected.
|
|
93
99
|
*/
|
|
@@ -95,12 +101,12 @@ export declare class WidgetConfigService {
|
|
|
95
101
|
/**
|
|
96
102
|
* Enables a preview.
|
|
97
103
|
* @param preview If set to true, the view component of the current widget will be taken to render the preview.
|
|
98
|
-
*
|
|
99
|
-
*
|
|
104
|
+
* If set to a DynamicComponentDefinition, the preview will be rendered with the given component.
|
|
105
|
+
* If set to a TemplateRef, the preview will be rendered with the given template.
|
|
100
106
|
*/
|
|
101
107
|
setPreview(preview: true | DynamicComponentDefinition | TemplateRef<any>): void;
|
|
102
108
|
/**
|
|
103
|
-
* By default, no sections are added to the configuration.
|
|
109
|
+
* By default, no sections are added to the configuration. But to ensure
|
|
104
110
|
* backwards compatibility with old plugins, we check if the default asset selector
|
|
105
111
|
* and config section should be shown.
|
|
106
112
|
* @param selectedWidget The currently selected widget.
|
|
@@ -112,9 +118,9 @@ export declare class WidgetConfigService {
|
|
|
112
118
|
* Sections should not be added by default anymore. But to ensure backwards compatibility, we
|
|
113
119
|
* check if the default selector should be shown. We assume that a default selector will be shown
|
|
114
120
|
* when:
|
|
115
|
-
*
|
|
116
|
-
*
|
|
117
|
-
*
|
|
121
|
+
* 1. The widget has a dynamic component for configuration (which is also deprecated).
|
|
122
|
+
* OR
|
|
123
|
+
* 2. The widget has not disabled the default selector.
|
|
118
124
|
*/
|
|
119
125
|
private isDefaultDeviceSelectorNeeded;
|
|
120
126
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"widget-config.service.d.ts","sourceRoot":"","sources":["../../context-dashboard/widget-config.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,WAAW,EAAE,MAAM,eAAe,CAAC;AACxD,OAAO,EACL,yBAAyB,EACzB,0BAA0B,EAI3B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,eAAe,EAQf,UAAU,EAOX,MAAM,MAAM,CAAC;AACd,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,EACL,mBAAmB,EAEpB,MAAM,+CAA+C,CAAC;AACvD,OAAO,EAAE,0BAA0B,EAAE,MAAM,iDAAiD,CAAC;;AAI7F,qBAGa,mBAAmB;
|
|
1
|
+
{"version":3,"file":"widget-config.service.d.ts","sourceRoot":"","sources":["../../context-dashboard/widget-config.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,WAAW,EAAE,MAAM,eAAe,CAAC;AACxD,OAAO,EACL,yBAAyB,EACzB,0BAA0B,EAI3B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,eAAe,EAQf,UAAU,EAOX,MAAM,MAAM,CAAC;AACd,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,EACL,mBAAmB,EAEpB,MAAM,+CAA+C,CAAC;AACvD,OAAO,EAAE,0BAA0B,EAAE,MAAM,iDAAiD,CAAC;;AAI7F,qBAGa,mBAAmB;IAoHlB,OAAO,CAAC,0BAA0B;IAnH9C,OAAO,CAAC,eAAe,CAAkD;IACzE,OAAO,CAAC,YAAY,CAA4C;IAEhE;;OAEG;IACH,WAAW,qBAAoC;IAE/C;;;OAGG;IACH,QAAQ,wEAAmF;IAE3F;;OAEG;IACH,SAAS,8CAAyD;IAElE;;OAEG;IACH,kBAAkB,6CAAwD;IAE1E;;;QAGI;IACJ,IAAI,aAAa,wBAEhB;IAED;;;OAGG;IACH,cAAc,kCAAuC;IAErD;;;;;OAKG;IACH,gBAAgB,EAAE,UAAU,CAAC,mBAAmB,EAAE,CAAC,CA+BjD;IAEF;;OAEG;IACH,UAAU,sDAER;IAEF;;OAEG;IACH,UAAU,sBAAoE;IAE9E;;;;;OAKG;IACH,iBAAiB,gEAUf;IAEF,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAO;IAC1C,OAAO,CAAC,aAAa,CAAsC;IAC3D,OAAO,CAAC,kBAAkB,CAAuB;IAEjD,OAAO,CAAC,mBAAmB,CAEmC;gBAE1C,0BAA0B,EAAE,0BAA0B;IAmB1E;;;OAGG;IACH,eAAe,CAAC,CAAC,KAAK,UAAU,CAAC,CAAC,CAAC;IAQnC;;OAEG;IACH,eAAe,CACb,QAAQ,EAAE,CAAC,MAAM,CAAC,EAAE,mBAAmB,KAAK,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,GAAG,UAAU,CAAC,OAAO,CAAC;IAK9F;;OAEG;IACH,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC;IAqB3B;;;;;OAKG;IACH,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,mBAAmB,CAAC,EAAE,KAAK,UAAQ;IAQhE;;;OAGG;IACH,UAAU,CAAC,MAAM,EAAE,mBAAmB;IAItC;;;;OAIG;IACH,YAAY,CAAC,QAAQ,EAAE,0BAA0B,EAAE,UAAU,GAAE,MAAa;IAK5E;;OAEG;IACH,cAAc;IAQd;;;;;OAKG;IACH,UAAU,CAAC,OAAO,EAAE,IAAI,GAAG,0BAA0B,GAAG,WAAW,CAAC,GAAG,CAAC;IAIxE;;;;;;;OAOG;IACH,OAAO,CAAC,wBAAwB;IAoChC;;;;;;;OAOG;IACH,OAAO,CAAC,6BAA6B;IAcrC;;;;OAIG;IACH,OAAO,CAAC,6BAA6B;yCAhT1B,mBAAmB;6CAAnB,mBAAmB;CAyT/B"}
|
|
@@ -214,14 +214,40 @@ export interface WidgetDataType {
|
|
|
214
214
|
*/
|
|
215
215
|
import?: (config: any) => any | Promise<any>;
|
|
216
216
|
}
|
|
217
|
+
/**
|
|
218
|
+
* The configuration size view is divided into configuration and preview.
|
|
219
|
+
* The configuration can be collapsed, half or full (preview hidden).
|
|
220
|
+
*/
|
|
221
|
+
export declare enum WIDGET_CONFIGURATION_GRID_SIZE {
|
|
222
|
+
COLLAPSED = "0px",
|
|
223
|
+
HALF = "560px",
|
|
224
|
+
FULL = "100%"
|
|
225
|
+
}
|
|
217
226
|
export interface WidgetSettings {
|
|
218
227
|
/**
|
|
219
228
|
* Avoids to show the widget in the "add widget" modal
|
|
220
229
|
*/
|
|
221
230
|
noNewWidgets?: boolean;
|
|
231
|
+
/**
|
|
232
|
+
* Indicates that the widget was upgraded from an angularjs widget.
|
|
233
|
+
*/
|
|
222
234
|
upgrade?: boolean;
|
|
235
|
+
/**
|
|
236
|
+
* The size of the configuration view. If provided as string, it needs to be a valid CSS size (e.g. '400px' or '50%').
|
|
237
|
+
* If not provided, the default size is '560px' (WidgetConfigurationGridSize.HALF).
|
|
238
|
+
*/
|
|
239
|
+
configurationViewGridSize?: WIDGET_CONFIGURATION_GRID_SIZE | string;
|
|
240
|
+
/**
|
|
241
|
+
* The default settings when the widget is added to a dashboard.
|
|
242
|
+
*/
|
|
223
243
|
widgetDefaults?: {
|
|
244
|
+
/**
|
|
245
|
+
* The grid width of the widget when added to a dashboard.
|
|
246
|
+
*/
|
|
224
247
|
_width?: number;
|
|
248
|
+
/**
|
|
249
|
+
* The grid height of the widget when added to a dashboard.
|
|
250
|
+
*/
|
|
225
251
|
_height?: number;
|
|
226
252
|
[key: string]: any;
|
|
227
253
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dynamic-component.model.d.ts","sourceRoot":"","sources":["../../../core/dynamic-component/dynamic-component.model.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"dynamic-component.model.d.ts","sourceRoot":"","sources":["../../../core/dynamic-component/dynamic-component.model.ts"],"names":[],"mappings":"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"}
|
package/core/index.d.ts
CHANGED
|
@@ -44,6 +44,7 @@ export * from './core.module';
|
|
|
44
44
|
export * from './wizard/index';
|
|
45
45
|
export * from './time-interval/index';
|
|
46
46
|
export * from './date-time-picker/index';
|
|
47
|
+
export * from './resizable-grid';
|
|
47
48
|
export * from './time-picker/index';
|
|
48
49
|
export * from './asset-types/index';
|
|
49
50
|
export * from './audit-log/index';
|
package/core/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../core/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kCAAkC,CAAC;AACjD,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gCAAgC,CAAC;AAC/C,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../core/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kCAAkC,CAAC;AACjD,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gCAAgC,CAAC;AAC/C,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../core/resizable-grid/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC"}
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
import { ElementRef, AfterViewInit, Renderer2, OnChanges, OnDestroy, SimpleChanges, OnInit } from '@angular/core';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
export declare class ResizableGridComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {
|
|
4
|
+
private renderer;
|
|
5
|
+
/**
|
|
6
|
+
* Initial width of the left column (A). Can be any valid CSS width value (e.g., '50%', '300px').
|
|
7
|
+
*/
|
|
8
|
+
leftColumnWidth: string;
|
|
9
|
+
/**
|
|
10
|
+
* Optional key for localStorage to persist the left column width between sessions.
|
|
11
|
+
*/
|
|
12
|
+
trackId: string | null;
|
|
13
|
+
/**
|
|
14
|
+
* Minimum width (in pixels) before a column is considered collapsed.
|
|
15
|
+
*/
|
|
16
|
+
collapseThreshold: number;
|
|
17
|
+
/**
|
|
18
|
+
* Reference to the left column element.
|
|
19
|
+
*/
|
|
20
|
+
colA: ElementRef<HTMLDivElement>;
|
|
21
|
+
/**
|
|
22
|
+
* Reference to the right column element.
|
|
23
|
+
*/
|
|
24
|
+
colB: ElementRef<HTMLDivElement>;
|
|
25
|
+
/**
|
|
26
|
+
* True if the user is currently resizing the grid.
|
|
27
|
+
*/
|
|
28
|
+
isResizing: boolean;
|
|
29
|
+
/**
|
|
30
|
+
* CSS width value for the left column (A).
|
|
31
|
+
* Used for dynamic styling via HostBinding.
|
|
32
|
+
*/
|
|
33
|
+
private _colAWidth;
|
|
34
|
+
/**
|
|
35
|
+
* Public getter for aria-valuenow
|
|
36
|
+
*/
|
|
37
|
+
get colAWidthPercent(): number;
|
|
38
|
+
/**
|
|
39
|
+
* X position of the mouse when resizing starts.
|
|
40
|
+
*/
|
|
41
|
+
private startX;
|
|
42
|
+
/**
|
|
43
|
+
* Pixel width of column A when resizing starts.
|
|
44
|
+
*/
|
|
45
|
+
private startColAWidthPx;
|
|
46
|
+
/**
|
|
47
|
+
* Last known non-collapsed width of column A (for restore logic).
|
|
48
|
+
*/
|
|
49
|
+
private lastKnownNonCollapsedWidth;
|
|
50
|
+
colAId: string;
|
|
51
|
+
colBId: string;
|
|
52
|
+
private resizeStep;
|
|
53
|
+
/**
|
|
54
|
+
* Creates an instance of ResizableGridComponent.
|
|
55
|
+
* @param renderer Angular Renderer2 for DOM manipulation.
|
|
56
|
+
*/
|
|
57
|
+
constructor(renderer: Renderer2);
|
|
58
|
+
ngOnInit(): void;
|
|
59
|
+
/**
|
|
60
|
+
* Angular lifecycle hook. Sets up initial column width after view initialization.
|
|
61
|
+
*/
|
|
62
|
+
ngAfterViewInit(): void;
|
|
63
|
+
/**
|
|
64
|
+
* Angular lifecycle hook. Handles changes to input properties.
|
|
65
|
+
* @param changes Object containing changed input properties.
|
|
66
|
+
*/
|
|
67
|
+
ngOnChanges(changes: SimpleChanges): void;
|
|
68
|
+
/**
|
|
69
|
+
* Angular lifecycle hook. Cleans up cursor style if resizing is active.
|
|
70
|
+
*/
|
|
71
|
+
ngOnDestroy(): void;
|
|
72
|
+
/**
|
|
73
|
+
* Mouse down event handler for starting resize.
|
|
74
|
+
* @param event MouseEvent
|
|
75
|
+
*/
|
|
76
|
+
onMouseDown(event: MouseEvent): void;
|
|
77
|
+
/**
|
|
78
|
+
* Mouse move event handler for resizing columns.
|
|
79
|
+
* @param event MouseEvent
|
|
80
|
+
*/
|
|
81
|
+
onMouseMove(event: MouseEvent): void;
|
|
82
|
+
/**
|
|
83
|
+
* Mouse up event handler for ending resize and applying collapse logic.
|
|
84
|
+
*/
|
|
85
|
+
onMouseUp(): void;
|
|
86
|
+
/**
|
|
87
|
+
* Keyboard event handler for resizing columns with arrow keys.
|
|
88
|
+
* @param event KeyboardEvent
|
|
89
|
+
*/
|
|
90
|
+
onKeyDown(event: KeyboardEvent): void;
|
|
91
|
+
/**
|
|
92
|
+
* Sets up the initial width of the left column, using localStorage if trackId is provided.
|
|
93
|
+
*/
|
|
94
|
+
private setupInitialWidth;
|
|
95
|
+
/**
|
|
96
|
+
* Updates the column A width and handles boundaries.
|
|
97
|
+
* @param targetWidthPx The desired width in pixels for column A.
|
|
98
|
+
* @param applyCollapseImmediately If true, calls checkAndApplyCollapse directly.
|
|
99
|
+
*/
|
|
100
|
+
private updateColumnWidth;
|
|
101
|
+
/**
|
|
102
|
+
* Checks if either column should be collapsed based on their widths and applies the appropriate classes/styles.
|
|
103
|
+
* @param colAWidth Width of column A in pixels
|
|
104
|
+
* @param colBWidth Width of column B in pixels
|
|
105
|
+
*/
|
|
106
|
+
private checkAndApplyCollapse;
|
|
107
|
+
/**
|
|
108
|
+
* Removes collapse/expand classes from both columns.
|
|
109
|
+
*/
|
|
110
|
+
private removeCollapseClasses;
|
|
111
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ResizableGridComponent, never>;
|
|
112
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<ResizableGridComponent, "c8y-resizable-grid", never, { "leftColumnWidth": { "alias": "leftColumnWidth"; "required": false; }; "trackId": { "alias": "trackId"; "required": false; }; "collapseThreshold": { "alias": "collapseThreshold"; "required": false; }; }, {}, never, ["[left-pane]", "[right-pane]"], true, never>;
|
|
113
|
+
}
|
|
114
|
+
//# sourceMappingURL=resizable-grid.component.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"resizable-grid.component.d.ts","sourceRoot":"","sources":["../../../core/resizable-grid/resizable-grid.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,UAAU,EAEV,aAAa,EACb,SAAS,EAET,SAAS,EACT,SAAS,EACT,aAAa,EAGb,MAAM,EACP,MAAM,eAAe,CAAC;;AAIvB,qBAWa,sBAAuB,YAAW,MAAM,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS;IAoE5E,OAAO,CAAC,QAAQ;IAnE5B;;OAEG;IACM,eAAe,SAAS;IACjC;;OAEG;IACM,OAAO,EAAE,MAAM,GAAG,IAAI,CAAQ;IACvC;;OAEG;IACM,iBAAiB,SAAO;IAEjC;;OAEG;IACgB,IAAI,EAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IACrD;;OAEG;IACgB,IAAI,EAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAErD;;OAEG;IAEH,UAAU,UAAS;IAEnB;;;OAGG;IAEH,OAAO,CAAC,UAAU,CAAS;IAE3B;;OAEG;IACH,IAAI,gBAAgB,IAAI,MAAM,CAK7B;IAED;;OAEG;IACH,OAAO,CAAC,MAAM,CAAK;IACnB;;OAEG;IACH,OAAO,CAAC,gBAAgB,CAAK;IAC7B;;OAEG;IACH,OAAO,CAAC,0BAA0B,CAAuB;IAGzD,MAAM,EAAG,MAAM,CAAC;IAChB,MAAM,EAAG,MAAM,CAAC;IAChB,OAAO,CAAC,UAAU,CAAM;IAExB;;;OAGG;gBACiB,QAAQ,EAAE,SAAS;IAGvC,QAAQ;IAMR;;OAEG;IACH,eAAe;IAIf;;;OAGG;IACH,WAAW,CAAC,OAAO,EAAE,aAAa;IAMlC;;OAEG;IACH,WAAW;IAMX;;;OAGG;IACH,WAAW,CAAC,KAAK,EAAE,UAAU;IAgC7B;;;OAGG;IAEH,WAAW,CAAC,KAAK,EAAE,UAAU;IAS7B;;OAEG;IAEH,SAAS;IAeT;;;OAGG;IACH,SAAS,CAAC,KAAK,EAAE,aAAa;IAmD9B;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAwBzB;;;;OAIG;IACH,OAAO,CAAC,iBAAiB;IA8BzB;;;;OAIG;IACH,OAAO,CAAC,qBAAqB;IAiC7B;;OAEG;IACH,OAAO,CAAC,qBAAqB;yCA1UlB,sBAAsB;2CAAtB,sBAAsB;CAuVlC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"c8y-ngx-components-dashboard-manager-devicemanagement.d.ts","sourceRoot":"","sources":["../../../dashboard-manager/devicemanagement/c8y-ngx-components-dashboard-manager-devicemanagement.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,cAAc,SAAS,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../dashboard-manager/devicemanagement/index.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,+BAA+B,8HAU3C,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { Injectable, Component, inject, InjectionToken, EventEmitter, Output, Input, TemplateRef, ViewChild, Optional, Inject, HostListener, HostBinding, NgModule } from '@angular/core';
|
|
3
3
|
import * as i2 from '@c8y/ngx-components';
|
|
4
|
-
import { gettext, IconDirective, C8yTranslatePipe, Permissions, ContextRouteService, Status, NavigatorNode, NEW_DASHBOARD_ROUTER_STATE_PROP, getActivatedRoute, ViewContext, TabsOutletComponent, memoize, hookGeneric, ExtensionPointForPlugins, fromTriggerOnce, getInjectedHooks, stateToFactory, ListGroupModule, C8yComponentOutlet, AlertService, DynamicComponentModule, DynamicComponentComponent, sortByPriority, isPromise, CoreModule, C8yTranslateDirective, HighlightComponent, EmptyStateComponent, FormGroupComponent, RequiredInputPlaceholderDirective, ProductExperienceDirective, DashboardChildChange, CopyDashboardDisabledReason, TitleComponent, ActionBarItemComponent, HelpComponent, WidgetsDashboardComponent, DatePipe, hookRoute, hookTab, hookNavigator } from '@c8y/ngx-components';
|
|
4
|
+
import { gettext, IconDirective, C8yTranslatePipe, Permissions, ContextRouteService, Status, NavigatorNode, NEW_DASHBOARD_ROUTER_STATE_PROP, getActivatedRoute, ViewContext, TabsOutletComponent, memoize, hookGeneric, ExtensionPointForPlugins, fromTriggerOnce, getInjectedHooks, stateToFactory, ListGroupModule, C8yComponentOutlet, AlertService, DynamicComponentModule, DynamicComponentComponent, sortByPriority, isPromise, CoreModule, WIDGET_CONFIGURATION_GRID_SIZE, C8yTranslateDirective, HighlightComponent, EmptyStateComponent, FormGroupComponent, RequiredInputPlaceholderDirective, ProductExperienceDirective, ResizableGridComponent, DashboardChildChange, CopyDashboardDisabledReason, TitleComponent, ActionBarItemComponent, HelpComponent, WidgetsDashboardComponent, DatePipe, hookRoute, hookTab, hookNavigator } from '@c8y/ngx-components';
|
|
5
5
|
import * as i1 from '@angular/router';
|
|
6
6
|
import { RouterOutlet, ActivatedRoute, RouterModule } from '@angular/router';
|
|
7
7
|
import { of, Subject, from, combineLatest, map as map$1, timer, BehaviorSubject, tap as tap$1, withLatestFrom, mergeMap as mergeMap$1, shareReplay as shareReplay$1, merge, scan, debounceTime, isObservable, iif } from 'rxjs';
|
|
@@ -1965,6 +1965,11 @@ class WidgetConfigService {
|
|
|
1965
1965
|
constructor(widgetConfigSectionService) {
|
|
1966
1966
|
this.widgetConfigSectionService = widgetConfigSectionService;
|
|
1967
1967
|
this._currentConfig$ = new BehaviorSubject(null);
|
|
1968
|
+
this._instanceId$ = new BehaviorSubject(null);
|
|
1969
|
+
/**
|
|
1970
|
+
* The unique identifier of the current widget instance.
|
|
1971
|
+
*/
|
|
1972
|
+
this.instanceId$ = this._instanceId$.asObservable();
|
|
1968
1973
|
/**
|
|
1969
1974
|
* The preview of the currently selected widget. If `null` no preview is shown
|
|
1970
1975
|
* (except if the selected widget has no configuration).
|
|
@@ -2091,7 +2096,7 @@ class WidgetConfigService {
|
|
|
2091
2096
|
* Updates the configuration of the selected widget.
|
|
2092
2097
|
* @param change The change to apply to the configuration.
|
|
2093
2098
|
* @param force If set to true, the configuration will be updated even if no changes are made. Also concurrency checks are ignored and no change is emitted on the component.
|
|
2094
|
-
*
|
|
2099
|
+
* Use with caution and only if you want to reset the configuration to some default.
|
|
2095
2100
|
*/
|
|
2096
2101
|
updateConfig(change, force = false) {
|
|
2097
2102
|
if (force) {
|
|
@@ -2110,9 +2115,11 @@ class WidgetConfigService {
|
|
|
2110
2115
|
/**
|
|
2111
2116
|
* Select a widget
|
|
2112
2117
|
* @param selected The widget to select.
|
|
2118
|
+
* @param identifier An optional unique identifier for the widget instance. Only used if the widget is not new.
|
|
2113
2119
|
*/
|
|
2114
|
-
selectWidget(selected) {
|
|
2120
|
+
selectWidget(selected, identifier = null) {
|
|
2115
2121
|
this.selected$.next(selected);
|
|
2122
|
+
this._instanceId$.next(identifier);
|
|
2116
2123
|
}
|
|
2117
2124
|
/**
|
|
2118
2125
|
* Deselect the currently selected.
|
|
@@ -2122,18 +2129,19 @@ class WidgetConfigService {
|
|
|
2122
2129
|
this.preview$.next(null);
|
|
2123
2130
|
this.configChangeReset$.next();
|
|
2124
2131
|
this._currentConfig$.next(null);
|
|
2132
|
+
this._instanceId$.next(null);
|
|
2125
2133
|
}
|
|
2126
2134
|
/**
|
|
2127
2135
|
* Enables a preview.
|
|
2128
2136
|
* @param preview If set to true, the view component of the current widget will be taken to render the preview.
|
|
2129
|
-
*
|
|
2130
|
-
*
|
|
2137
|
+
* If set to a DynamicComponentDefinition, the preview will be rendered with the given component.
|
|
2138
|
+
* If set to a TemplateRef, the preview will be rendered with the given template.
|
|
2131
2139
|
*/
|
|
2132
2140
|
setPreview(preview) {
|
|
2133
2141
|
this.preview$.next(preview);
|
|
2134
2142
|
}
|
|
2135
2143
|
/**
|
|
2136
|
-
* By default, no sections are added to the configuration.
|
|
2144
|
+
* By default, no sections are added to the configuration. But to ensure
|
|
2137
2145
|
* backwards compatibility with old plugins, we check if the default asset selector
|
|
2138
2146
|
* and config section should be shown.
|
|
2139
2147
|
* @param selectedWidget The currently selected widget.
|
|
@@ -2173,9 +2181,9 @@ class WidgetConfigService {
|
|
|
2173
2181
|
* Sections should not be added by default anymore. But to ensure backwards compatibility, we
|
|
2174
2182
|
* check if the default selector should be shown. We assume that a default selector will be shown
|
|
2175
2183
|
* when:
|
|
2176
|
-
*
|
|
2177
|
-
*
|
|
2178
|
-
*
|
|
2184
|
+
* 1. The widget has a dynamic component for configuration (which is also deprecated).
|
|
2185
|
+
* OR
|
|
2186
|
+
* 2. The widget has not disabled the default selector.
|
|
2179
2187
|
*/
|
|
2180
2188
|
isDefaultDeviceSelectorNeeded(selectedWidget, config) {
|
|
2181
2189
|
if (!selectedWidget.loadConfigComponent && !selectedWidget.configComponent) {
|
|
@@ -2375,6 +2383,7 @@ class WidgetConfigComponent {
|
|
|
2375
2383
|
this.widgetConfigService = widgetConfigService;
|
|
2376
2384
|
this.searchChange$ = new Subject();
|
|
2377
2385
|
this.searchTerm = '';
|
|
2386
|
+
this.identifier = crypto.randomUUID();
|
|
2378
2387
|
this.styling = {
|
|
2379
2388
|
headerClass: 'panel-title-regular',
|
|
2380
2389
|
contentClass: 'panel-content-light'
|
|
@@ -2385,6 +2394,7 @@ class WidgetConfigComponent {
|
|
|
2385
2394
|
};
|
|
2386
2395
|
this.isUpgrade = false;
|
|
2387
2396
|
this.possibleStyling = { WIDGET_HEADER_CLASSES, WIDGET_CONTENT_CLASSES };
|
|
2397
|
+
this.WIDGET_CONFIGURATION_GRID_SIZE = WIDGET_CONFIGURATION_GRID_SIZE;
|
|
2388
2398
|
/**
|
|
2389
2399
|
* Used as wrapper component to inject providers.
|
|
2390
2400
|
*/
|
|
@@ -2445,7 +2455,7 @@ class WidgetConfigComponent {
|
|
|
2445
2455
|
config: omit(this.widgetConfig, ['settings', 'displaySettings']),
|
|
2446
2456
|
title: this.selected.data.title,
|
|
2447
2457
|
componentId: this.selected.id,
|
|
2448
|
-
id: this.isEdit ? this.current.data.id :
|
|
2458
|
+
id: this.isEdit ? this.current.data.id : this.identifier,
|
|
2449
2459
|
classes: this.getStyle(),
|
|
2450
2460
|
...(!this.isEdit ? this.widgetConfig.settings.widgetDefaults : {})
|
|
2451
2461
|
};
|
|
@@ -2465,14 +2475,15 @@ class WidgetConfigComponent {
|
|
|
2465
2475
|
this.isUpgrade = !!get(cmp, 'data.settings.upgrade');
|
|
2466
2476
|
this.contextDashboardService.formDisabled = this.isUpgrade;
|
|
2467
2477
|
if (this.isEdit) {
|
|
2468
|
-
const { _x, _y, _width, _height, classes, title } = this.current.data;
|
|
2478
|
+
const { id, _x, _y, _width, _height, classes, title } = this.current.data;
|
|
2469
2479
|
this.selected.data = { ...this.selected.data, _x, _y, _width, _height, classes, title };
|
|
2480
|
+
this.identifier = id;
|
|
2470
2481
|
}
|
|
2471
2482
|
this.widgetConfig = cloneDeep(this.composeWidgetConfig(this.selected, this.context));
|
|
2472
2483
|
this.selected.data.title = this.selected.data.title || cmp.label;
|
|
2473
2484
|
this.componentLabel = cmp.label;
|
|
2474
2485
|
this.widgetConfigService.initConfig(this.widgetConfig);
|
|
2475
|
-
this.widgetConfigService.selectWidget(this.selected);
|
|
2486
|
+
this.widgetConfigService.selectWidget(this.selected, this.identifier);
|
|
2476
2487
|
}
|
|
2477
2488
|
search() {
|
|
2478
2489
|
if (this.searchTerm.length > 0) {
|
|
@@ -2585,7 +2596,7 @@ class WidgetConfigComponent {
|
|
|
2585
2596
|
return widgetConfig;
|
|
2586
2597
|
}
|
|
2587
2598
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: WidgetConfigComponent, deps: [{ token: WidgetService }, { token: i2.BottomDrawerRef }, { token: ContextDashboardService }, { token: WidgetConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2588
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: WidgetConfigComponent, isStandalone: true, selector: "c8y-widget-config", host: { classAttribute: "d-contents" }, viewQueries: [{ propertyName: "configForm", first: true, predicate: ["configForm"], descendants: true }], ngImport: i0, template: "<!-- select widget -->\n<ng-container *ngIf=\"!(widgetConfigService.selected$ | async)\">\n <div class=\"card-header j-c-center separator\">\n <div class=\"h4 text-center\">\n {{ 'Select widget' | translate }}\n </div>\n </div>\n <div class=\"card-inner-scroll fit-h bg-level-2\">\n <div\n class=\"bg-level-0 p-l-24 p-r-24 p-t-8 p-b-8 sticky-header-top-0 elevation-md\"\n style=\"z-index: 2\"\n >\n <div class=\"row\">\n <div class=\"col-sm-6 col-sm-offset-3\">\n <div class=\"input-group input-group-search\">\n <input\n class=\"form-control\"\n [attr.aria-label]=\"'Search' | translate\"\n placeholder=\"{{ 'Search\u2026' | translate }}\"\n type=\"text\"\n data-cy=\"widget-config--Search\"\n [(ngModel)]=\"searchTerm\"\n [ngModelOptions]=\"{ standalone: true }\"\n (keydown)=\"searchChange$.next($event)\"\n />\n <span class=\"input-group-btn\">\n <button\n class=\"btn btn-dot\"\n title=\"{{ 'Search' | translate }}\"\n type=\"button\"\n (click)=\"resetSearch()\"\n >\n <i [c8yIcon]=\"searchTerm.length === 0 ? 'search' : 'close'\"></i>\n </button>\n </span>\n </div>\n </div>\n </div>\n </div>\n <div class=\"card-block\">\n <div class=\"card-group p-l-24 p-r-24 d-grid grid__col--auto-300 gap-24 card-select m-b-0\">\n <button\n class=\"btn-clean d-col card m-b-0\"\n [title]=\"cmp.description || cmp.label | translate\"\n type=\"button\"\n data-cy=\"widget-config--widget-list\"\n *ngFor=\"let cmp of searchResult || components\"\n (click)=\"select(cmp)\"\n >\n <div\n class=\"border-bottom\"\n role=\"presentation\"\n >\n <ng-container *ngIf=\"!cmp.previewImage; else previewImage\">\n <div class=\"h1\"><i c8yIcon=\"file-image-o\"></i></div>\n <small translate>Preview not available</small>\n </ng-container>\n <ng-template #previewImage>\n <img\n class=\"widget-thumbnail\"\n alt=\"{{ cmp.label | translate }}\"\n [src]=\"cmp.previewImage\"\n />\n </ng-template>\n </div>\n <div class=\"card-block\">\n <p class=\"card-title text-truncate text-medium\">\n <c8y-highlight\n text=\"{{ cmp.label | translate }}\"\n [pattern]=\"searchTerm\"\n ></c8y-highlight>\n </p>\n <p\n class=\"small text-default\"\n style=\"white-space: wrap\"\n >\n {{ cmp.description | translate }}\n </p>\n </div>\n </button>\n <c8y-ui-empty-state\n class=\"p-24 grid__col--fullspan\"\n [icon]=\"'search'\"\n [title]=\"'No widgets found.' | translate\"\n [subtitle]=\"' Rephrase your search term.' | translate\"\n *ngIf=\"searchResult && searchResult.length === 0\"\n >\n <button\n class=\"btn btn-primary\"\n title=\"{{ 'Reset search' | translate }}\"\n type=\"button\"\n (click)=\"resetSearch()\"\n >\n {{ 'Reset search' | translate }}\n </button>\n </c8y-ui-empty-state>\n </div>\n </div>\n </div>\n <div class=\"card-footer text-center separator flex-no-shrink\">\n <button\n class=\"btn btn-default\"\n title=\"{{ 'Cancel' | translate }}\"\n type=\"button\"\n data-cy=\"widget-config--cancel-widget\"\n (click)=\"close()\"\n >\n {{ 'Cancel' | translate }}\n </button>\n </div>\n</ng-container>\n\n<!-- widget configuration -->\n<ng-container *ngIf=\"!!(widgetConfigService.selected$ | async)\">\n <div class=\"card-header d-block separator-bottom flex-no-shrink\">\n <div\n class=\"h3 p-t-16\"\n title=\"{{ selected?.label | translate }}\"\n >\n <span>{{ selected?.label | translate }}</span>\n <button\n class=\"btn btn-default btn-sm m-l-8\"\n [title]=\"'Change widget' | translate\"\n (click)=\"backToWidgetSelection(); (false)\"\n >\n <i c8yIcon=\"replace\"></i>\n {{ 'Change widget' | translate }}\n </button>\n </div>\n <div\n class=\"p-t-8\"\n *ngIf=\"selected\"\n >\n <p>\n {{ selected.description | translate }}\n </p>\n </div>\n </div>\n\n <div class=\"d-grid grid__col--560-auto min-height-0 flex-grow\">\n <div class=\"bg-level-1 inner-scroll\">\n <div class=\"p-16 flex-no-shrink separator-bottom bg-level-1\">\n <c8y-form-group>\n <label\n for=\"widgetTitle\"\n translate\n >\n Widget title\n </label>\n <input\n class=\"form-control\"\n id=\"widgetTitle\"\n placeholder=\"{{ 'e.g.' | translate }} {{ componentLabel | translate }}\"\n name=\"title\"\n type=\"text\"\n required\n [(ngModel)]=\"selected?.data.title\"\n />\n </c8y-form-group>\n </div>\n\n <c8y-ui-empty-state\n class=\"p-24\"\n [icon]=\"'settings'\"\n [title]=\"'No configuration needed.' | translate\"\n [subtitle]=\"'This widget does not need any specific configuration.' | translate\"\n [horizontal]=\"true\"\n *ngIf=\"!(widgetConfigService.hasConfig$ | async)\"\n ></c8y-ui-empty-state>\n <div>\n <form\n name=\"form\"\n #configForm=\"ngForm\"\n >\n <ng-container *ngIf=\"widgetConfigService.hasConfig$ | async\">\n <ng-container *ngIf=\"widgetConfigService.providers$ | async as providers\">\n <ng-container\n *c8yComponentOutlet=\"widgetConfigRoot; providers: providers\"\n ></ng-container>\n </ng-container>\n </ng-container>\n </form>\n </div>\n </div>\n <div class=\"inner-scroll p-32 p-t-0\">\n <c8y-widget-preview [previewClasses]=\"getStyle(true)\"></c8y-widget-preview>\n\n <c8y-appearance-settings\n [(themeClass)]=\"styling.contentClass\"\n [(headerClass)]=\"styling.headerClass\"\n [possibleStylingTheme]=\"possibleStyling.WIDGET_CONTENT_CLASSES\"\n [possibleStylingHeader]=\"possibleStyling.WIDGET_HEADER_CLASSES\"\n [defaultThemeClass]=\"defaultStyling.contentClass\"\n [defaultHeaderClass]=\"defaultStyling.headerClass\"\n [columns]=\"2\"\n ></c8y-appearance-settings>\n </div>\n </div>\n\n <div class=\"card-footer separator text-center\">\n <button\n class=\"btn btn-default\"\n title=\"{{ 'Cancel' | translate }}\"\n type=\"button\"\n data-cy=\"widget-config--cancel-widget\"\n (click)=\"close()\"\n >\n {{ 'Cancel' | translate }}\n </button>\n <button\n class=\"btn btn-primary\"\n title=\"{{ 'Save' | translate }}\"\n type=\"submit\"\n data-cy=\"widget-config--save-widget\"\n (click)=\"save()\"\n [disabled]=\"(contextDashboardService.formDisabled$ | async) || isSaveDisabled()\"\n c8yProductExperience\n [actionName]=\"current ? 'editWidget' : 'createWidget'\"\n [actionData]=\"{ widgetName: selected && selected.id }\"\n >\n {{ 'Save' | translate }}\n </button>\n </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: C8yComponentOutlet, selector: "[c8yComponentOutlet]", inputs: ["c8yComponentOutlet", "c8yComponentOutletInjector", "c8yComponentOutletEnvironmentInjector", "c8yComponentOutletProviders", "c8yComponentOutletInitialState"] }, { kind: "component", type: WidgetPreviewComponent, selector: "c8y-widget-preview", inputs: ["previewClasses"] }, { kind: "component", type: AppearanceSettingsComponent, selector: "c8y-appearance-settings", inputs: ["themeClass", "headerClass", "defaultThemeClass", "defaultHeaderClass", "dashboardSettings", "possibleStylingTheme", "possibleStylingHeader", "columns"], outputs: ["themeClassChange", "headerClassChange", "onChange"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
|
|
2599
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: WidgetConfigComponent, isStandalone: true, selector: "c8y-widget-config", host: { classAttribute: "d-contents" }, viewQueries: [{ propertyName: "configForm", first: true, predicate: ["configForm"], descendants: true }], ngImport: i0, template: "<!-- select widget -->\n<ng-container *ngIf=\"!(widgetConfigService.selected$ | async)\">\n <div class=\"card-header j-c-center separator\">\n <div class=\"h4 text-center\">\n {{ 'Select widget' | translate }}\n </div>\n </div>\n <div class=\"card-inner-scroll fit-h bg-level-2\">\n <div\n class=\"bg-level-0 p-l-24 p-r-24 p-t-8 p-b-8 sticky-header-top-0 elevation-md\"\n style=\"z-index: 2\"\n >\n <div class=\"row\">\n <div class=\"col-sm-6 col-sm-offset-3\">\n <div class=\"input-group input-group-search\">\n <input\n class=\"form-control\"\n [attr.aria-label]=\"'Search' | translate\"\n placeholder=\"{{ 'Search\u2026' | translate }}\"\n type=\"text\"\n data-cy=\"widget-config--Search\"\n [(ngModel)]=\"searchTerm\"\n [ngModelOptions]=\"{ standalone: true }\"\n (keydown)=\"searchChange$.next($event)\"\n />\n <span class=\"input-group-btn\">\n <button\n class=\"btn btn-dot\"\n title=\"{{ 'Search' | translate }}\"\n type=\"button\"\n (click)=\"resetSearch()\"\n >\n <i [c8yIcon]=\"searchTerm.length === 0 ? 'search' : 'close'\"></i>\n </button>\n </span>\n </div>\n </div>\n </div>\n </div>\n <div class=\"card-block\">\n <div class=\"card-group p-l-24 p-r-24 d-grid grid__col--auto-300 gap-24 card-select m-b-0\">\n <button\n class=\"btn-clean d-col card m-b-0\"\n [title]=\"cmp.description || cmp.label | translate\"\n type=\"button\"\n data-cy=\"widget-config--widget-list\"\n *ngFor=\"let cmp of searchResult || components\"\n (click)=\"select(cmp)\"\n >\n <div\n class=\"border-bottom\"\n role=\"presentation\"\n >\n <ng-container *ngIf=\"!cmp.previewImage; else previewImage\">\n <div class=\"h1\"><i c8yIcon=\"file-image-o\"></i></div>\n <small translate>Preview not available</small>\n </ng-container>\n <ng-template #previewImage>\n <img\n class=\"widget-thumbnail\"\n alt=\"{{ cmp.label | translate }}\"\n [src]=\"cmp.previewImage\"\n />\n </ng-template>\n </div>\n <div class=\"card-block\">\n <p class=\"card-title text-truncate text-medium\">\n <c8y-highlight\n text=\"{{ cmp.label | translate }}\"\n [pattern]=\"searchTerm\"\n ></c8y-highlight>\n </p>\n <p\n class=\"small text-default\"\n style=\"white-space: wrap\"\n >\n {{ cmp.description | translate }}\n </p>\n </div>\n </button>\n <c8y-ui-empty-state\n class=\"p-24 grid__col--fullspan\"\n [icon]=\"'search'\"\n [title]=\"'No widgets found.' | translate\"\n [subtitle]=\"' Rephrase your search term.' | translate\"\n *ngIf=\"searchResult && searchResult.length === 0\"\n >\n <button\n class=\"btn btn-primary\"\n title=\"{{ 'Reset search' | translate }}\"\n type=\"button\"\n (click)=\"resetSearch()\"\n >\n {{ 'Reset search' | translate }}\n </button>\n </c8y-ui-empty-state>\n </div>\n </div>\n </div>\n <div class=\"card-footer text-center separator flex-no-shrink\">\n <button\n class=\"btn btn-default\"\n title=\"{{ 'Cancel' | translate }}\"\n type=\"button\"\n data-cy=\"widget-config--cancel-widget\"\n (click)=\"close()\"\n >\n {{ 'Cancel' | translate }}\n </button>\n </div>\n</ng-container>\n\n<!-- widget configuration -->\n<ng-container *ngIf=\"!!(widgetConfigService.selected$ | async)\">\n <div class=\"card-header d-block separator-bottom flex-no-shrink\">\n <div\n class=\"h3 p-t-16\"\n title=\"{{ selected?.label | translate }}\"\n >\n <span>{{ selected?.label | translate }}</span>\n <button\n class=\"btn btn-default btn-sm m-l-8\"\n [title]=\"'Change widget' | translate\"\n (click)=\"backToWidgetSelection(); (false)\"\n >\n <i c8yIcon=\"replace\"></i>\n {{ 'Change widget' | translate }}\n </button>\n </div>\n <div\n class=\"p-t-8\"\n *ngIf=\"selected\"\n >\n <p>\n {{ selected.description | translate }}\n </p>\n </div>\n </div>\n\n <c8y-resizable-grid\n class=\"min-height-0 flex-grow\"\n [trackId]=\"'c8y-widget-resizable-grid-size-' + (widgetConfigService.instanceId$ | async)\"\n [leftColumnWidth]=\"\n (widgetConfigService.currentConfig$ | async)?.settings?.configurationViewGridSize ||\n WIDGET_CONFIGURATION_GRID_SIZE.HALF\n \"\n >\n <div\n class=\"bg-level-1 inner-scroll\"\n left-pane\n >\n <div class=\"p-16 flex-no-shrink separator-bottom bg-level-1\">\n <c8y-form-group>\n <label\n for=\"widgetTitle\"\n translate\n >\n Widget title\n </label>\n <input\n class=\"form-control\"\n id=\"widgetTitle\"\n placeholder=\"{{ 'e.g.' | translate }} {{ componentLabel | translate }}\"\n name=\"title\"\n type=\"text\"\n required\n [(ngModel)]=\"selected?.data.title\"\n />\n </c8y-form-group>\n </div>\n\n <c8y-ui-empty-state\n class=\"p-24\"\n [icon]=\"'settings'\"\n [title]=\"'No configuration needed.' | translate\"\n [subtitle]=\"'This widget does not need any specific configuration.' | translate\"\n [horizontal]=\"true\"\n *ngIf=\"!(widgetConfigService.hasConfig$ | async)\"\n ></c8y-ui-empty-state>\n <div>\n <form\n name=\"form\"\n #configForm=\"ngForm\"\n >\n <ng-container *ngIf=\"widgetConfigService.hasConfig$ | async\">\n <ng-container *ngIf=\"widgetConfigService.providers$ | async as providers\">\n <ng-container\n *c8yComponentOutlet=\"widgetConfigRoot; providers: providers\"\n ></ng-container>\n </ng-container>\n </ng-container>\n </form>\n </div>\n </div>\n <div\n class=\"inner-scroll p-32 p-t-0\"\n right-pane\n >\n <c8y-widget-preview [previewClasses]=\"getStyle(true)\"></c8y-widget-preview>\n\n <c8y-appearance-settings\n [(themeClass)]=\"styling.contentClass\"\n [(headerClass)]=\"styling.headerClass\"\n [possibleStylingTheme]=\"possibleStyling.WIDGET_CONTENT_CLASSES\"\n [possibleStylingHeader]=\"possibleStyling.WIDGET_HEADER_CLASSES\"\n [defaultThemeClass]=\"defaultStyling.contentClass\"\n [defaultHeaderClass]=\"defaultStyling.headerClass\"\n [columns]=\"2\"\n ></c8y-appearance-settings>\n </div>\n </c8y-resizable-grid>\n <div class=\"card-footer separator text-center\">\n <button\n class=\"btn btn-default\"\n title=\"{{ 'Cancel' | translate }}\"\n type=\"button\"\n data-cy=\"widget-config--cancel-widget\"\n (click)=\"close()\"\n >\n {{ 'Cancel' | translate }}\n </button>\n <button\n class=\"btn btn-primary\"\n title=\"{{ 'Save' | translate }}\"\n type=\"submit\"\n data-cy=\"widget-config--save-widget\"\n (click)=\"save()\"\n [disabled]=\"(contextDashboardService.formDisabled$ | async) || isSaveDisabled()\"\n c8yProductExperience\n [actionName]=\"current ? 'editWidget' : 'createWidget'\"\n [actionData]=\"{ widgetName: selected && selected.id }\"\n >\n {{ 'Save' | translate }}\n </button>\n </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: C8yComponentOutlet, selector: "[c8yComponentOutlet]", inputs: ["c8yComponentOutlet", "c8yComponentOutletInjector", "c8yComponentOutletEnvironmentInjector", "c8yComponentOutletProviders", "c8yComponentOutletInitialState"] }, { kind: "component", type: WidgetPreviewComponent, selector: "c8y-widget-preview", inputs: ["previewClasses"] }, { kind: "component", type: AppearanceSettingsComponent, selector: "c8y-appearance-settings", inputs: ["themeClass", "headerClass", "defaultThemeClass", "defaultHeaderClass", "dashboardSettings", "possibleStylingTheme", "possibleStylingHeader", "columns"], outputs: ["themeClassChange", "headerClassChange", "onChange"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: ResizableGridComponent, selector: "c8y-resizable-grid", inputs: ["leftColumnWidth", "trackId", "collapseThreshold"] }] }); }
|
|
2589
2600
|
}
|
|
2590
2601
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: WidgetConfigComponent, decorators: [{
|
|
2591
2602
|
type: Component,
|
|
@@ -2604,8 +2615,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
2604
2615
|
AppearanceSettingsComponent,
|
|
2605
2616
|
ProductExperienceDirective,
|
|
2606
2617
|
C8yTranslatePipe,
|
|
2607
|
-
AsyncPipe
|
|
2608
|
-
|
|
2618
|
+
AsyncPipe,
|
|
2619
|
+
ResizableGridComponent
|
|
2620
|
+
], standalone: true, template: "<!-- select widget -->\n<ng-container *ngIf=\"!(widgetConfigService.selected$ | async)\">\n <div class=\"card-header j-c-center separator\">\n <div class=\"h4 text-center\">\n {{ 'Select widget' | translate }}\n </div>\n </div>\n <div class=\"card-inner-scroll fit-h bg-level-2\">\n <div\n class=\"bg-level-0 p-l-24 p-r-24 p-t-8 p-b-8 sticky-header-top-0 elevation-md\"\n style=\"z-index: 2\"\n >\n <div class=\"row\">\n <div class=\"col-sm-6 col-sm-offset-3\">\n <div class=\"input-group input-group-search\">\n <input\n class=\"form-control\"\n [attr.aria-label]=\"'Search' | translate\"\n placeholder=\"{{ 'Search\u2026' | translate }}\"\n type=\"text\"\n data-cy=\"widget-config--Search\"\n [(ngModel)]=\"searchTerm\"\n [ngModelOptions]=\"{ standalone: true }\"\n (keydown)=\"searchChange$.next($event)\"\n />\n <span class=\"input-group-btn\">\n <button\n class=\"btn btn-dot\"\n title=\"{{ 'Search' | translate }}\"\n type=\"button\"\n (click)=\"resetSearch()\"\n >\n <i [c8yIcon]=\"searchTerm.length === 0 ? 'search' : 'close'\"></i>\n </button>\n </span>\n </div>\n </div>\n </div>\n </div>\n <div class=\"card-block\">\n <div class=\"card-group p-l-24 p-r-24 d-grid grid__col--auto-300 gap-24 card-select m-b-0\">\n <button\n class=\"btn-clean d-col card m-b-0\"\n [title]=\"cmp.description || cmp.label | translate\"\n type=\"button\"\n data-cy=\"widget-config--widget-list\"\n *ngFor=\"let cmp of searchResult || components\"\n (click)=\"select(cmp)\"\n >\n <div\n class=\"border-bottom\"\n role=\"presentation\"\n >\n <ng-container *ngIf=\"!cmp.previewImage; else previewImage\">\n <div class=\"h1\"><i c8yIcon=\"file-image-o\"></i></div>\n <small translate>Preview not available</small>\n </ng-container>\n <ng-template #previewImage>\n <img\n class=\"widget-thumbnail\"\n alt=\"{{ cmp.label | translate }}\"\n [src]=\"cmp.previewImage\"\n />\n </ng-template>\n </div>\n <div class=\"card-block\">\n <p class=\"card-title text-truncate text-medium\">\n <c8y-highlight\n text=\"{{ cmp.label | translate }}\"\n [pattern]=\"searchTerm\"\n ></c8y-highlight>\n </p>\n <p\n class=\"small text-default\"\n style=\"white-space: wrap\"\n >\n {{ cmp.description | translate }}\n </p>\n </div>\n </button>\n <c8y-ui-empty-state\n class=\"p-24 grid__col--fullspan\"\n [icon]=\"'search'\"\n [title]=\"'No widgets found.' | translate\"\n [subtitle]=\"' Rephrase your search term.' | translate\"\n *ngIf=\"searchResult && searchResult.length === 0\"\n >\n <button\n class=\"btn btn-primary\"\n title=\"{{ 'Reset search' | translate }}\"\n type=\"button\"\n (click)=\"resetSearch()\"\n >\n {{ 'Reset search' | translate }}\n </button>\n </c8y-ui-empty-state>\n </div>\n </div>\n </div>\n <div class=\"card-footer text-center separator flex-no-shrink\">\n <button\n class=\"btn btn-default\"\n title=\"{{ 'Cancel' | translate }}\"\n type=\"button\"\n data-cy=\"widget-config--cancel-widget\"\n (click)=\"close()\"\n >\n {{ 'Cancel' | translate }}\n </button>\n </div>\n</ng-container>\n\n<!-- widget configuration -->\n<ng-container *ngIf=\"!!(widgetConfigService.selected$ | async)\">\n <div class=\"card-header d-block separator-bottom flex-no-shrink\">\n <div\n class=\"h3 p-t-16\"\n title=\"{{ selected?.label | translate }}\"\n >\n <span>{{ selected?.label | translate }}</span>\n <button\n class=\"btn btn-default btn-sm m-l-8\"\n [title]=\"'Change widget' | translate\"\n (click)=\"backToWidgetSelection(); (false)\"\n >\n <i c8yIcon=\"replace\"></i>\n {{ 'Change widget' | translate }}\n </button>\n </div>\n <div\n class=\"p-t-8\"\n *ngIf=\"selected\"\n >\n <p>\n {{ selected.description | translate }}\n </p>\n </div>\n </div>\n\n <c8y-resizable-grid\n class=\"min-height-0 flex-grow\"\n [trackId]=\"'c8y-widget-resizable-grid-size-' + (widgetConfigService.instanceId$ | async)\"\n [leftColumnWidth]=\"\n (widgetConfigService.currentConfig$ | async)?.settings?.configurationViewGridSize ||\n WIDGET_CONFIGURATION_GRID_SIZE.HALF\n \"\n >\n <div\n class=\"bg-level-1 inner-scroll\"\n left-pane\n >\n <div class=\"p-16 flex-no-shrink separator-bottom bg-level-1\">\n <c8y-form-group>\n <label\n for=\"widgetTitle\"\n translate\n >\n Widget title\n </label>\n <input\n class=\"form-control\"\n id=\"widgetTitle\"\n placeholder=\"{{ 'e.g.' | translate }} {{ componentLabel | translate }}\"\n name=\"title\"\n type=\"text\"\n required\n [(ngModel)]=\"selected?.data.title\"\n />\n </c8y-form-group>\n </div>\n\n <c8y-ui-empty-state\n class=\"p-24\"\n [icon]=\"'settings'\"\n [title]=\"'No configuration needed.' | translate\"\n [subtitle]=\"'This widget does not need any specific configuration.' | translate\"\n [horizontal]=\"true\"\n *ngIf=\"!(widgetConfigService.hasConfig$ | async)\"\n ></c8y-ui-empty-state>\n <div>\n <form\n name=\"form\"\n #configForm=\"ngForm\"\n >\n <ng-container *ngIf=\"widgetConfigService.hasConfig$ | async\">\n <ng-container *ngIf=\"widgetConfigService.providers$ | async as providers\">\n <ng-container\n *c8yComponentOutlet=\"widgetConfigRoot; providers: providers\"\n ></ng-container>\n </ng-container>\n </ng-container>\n </form>\n </div>\n </div>\n <div\n class=\"inner-scroll p-32 p-t-0\"\n right-pane\n >\n <c8y-widget-preview [previewClasses]=\"getStyle(true)\"></c8y-widget-preview>\n\n <c8y-appearance-settings\n [(themeClass)]=\"styling.contentClass\"\n [(headerClass)]=\"styling.headerClass\"\n [possibleStylingTheme]=\"possibleStyling.WIDGET_CONTENT_CLASSES\"\n [possibleStylingHeader]=\"possibleStyling.WIDGET_HEADER_CLASSES\"\n [defaultThemeClass]=\"defaultStyling.contentClass\"\n [defaultHeaderClass]=\"defaultStyling.headerClass\"\n [columns]=\"2\"\n ></c8y-appearance-settings>\n </div>\n </c8y-resizable-grid>\n <div class=\"card-footer separator text-center\">\n <button\n class=\"btn btn-default\"\n title=\"{{ 'Cancel' | translate }}\"\n type=\"button\"\n data-cy=\"widget-config--cancel-widget\"\n (click)=\"close()\"\n >\n {{ 'Cancel' | translate }}\n </button>\n <button\n class=\"btn btn-primary\"\n title=\"{{ 'Save' | translate }}\"\n type=\"submit\"\n data-cy=\"widget-config--save-widget\"\n (click)=\"save()\"\n [disabled]=\"(contextDashboardService.formDisabled$ | async) || isSaveDisabled()\"\n c8yProductExperience\n [actionName]=\"current ? 'editWidget' : 'createWidget'\"\n [actionData]=\"{ widgetName: selected && selected.id }\"\n >\n {{ 'Save' | translate }}\n </button>\n </div>\n</ng-container>\n" }]
|
|
2609
2621
|
}], ctorParameters: () => [{ type: WidgetService }, { type: i2.BottomDrawerRef }, { type: ContextDashboardService }, { type: WidgetConfigService }], propDecorators: { configForm: [{
|
|
2610
2622
|
type: ViewChild,
|
|
2611
2623
|
args: ['configForm', { static: false }]
|