npm - @c8y/ngx-components - Versions diffs - 1022.16.2 → 1022.26.1 - Mend

@c8y/ngx-components 1022.16.2 → 1022.26.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (130) hide show

package/fesm2022/c8y-ngx-components-widgets-definitions-html-widget.mjs CHANGED Viewed

@@ -22,6 +22,12 @@ class HtmlWidgetConfigFactory {
                     groupsSelectable: true
                 }
             },
+            {
+                widgetId: defaultWidgetIds.HTML,
+                label: gettext('Asset properties'),
+                loadComponent: () => import('@c8y/ngx-components/widgets/implementations/html-widget').then(m => m.HtmlWidgetPropertiesSelectorComponent),
+                priority: 50
+            },
             {
                 widgetId: defaultWidgetIds.HTML,
                 providers: [HtmlWidgetConfigService],

package/fesm2022/c8y-ngx-components-widgets-definitions-html-widget.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"c8y-ngx-components-widgets-definitions-html-widget.mjs","sources":["../../widgets/definitions/html-widget/html-widget-config.factory.ts","../../widgets/definitions/html-widget/html-widget.factory.ts","../../widgets/definitions/html-widget/index.ts","../../widgets/definitions/html-widget/c8y-ngx-components-widgets-definitions-html-widget.ts"],"sourcesContent":["import { inject, Injectable } from '@angular/core';\nimport { ExtensionFactory, gettext, PreviewService } from '@c8y/ngx-components';\nimport {\n WidgetAssetSelectorComponent,\n WidgetConfigSectionDefinition\n} from '@c8y/ngx-components/context-dashboard';\nimport { HtmlWidgetConfigService } from '@c8y/ngx-components/widgets/implementations/html-widget';\nimport { map, Observable } from 'rxjs';\nimport { defaultWidgetIds } from '@c8y/ngx-components/widgets/definitions';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class HtmlWidgetConfigFactory implements ExtensionFactory<WidgetConfigSectionDefinition> {\n private readonly betaPreviewService = inject(PreviewService);\n private readonly baseWidgetConfigDefinition: WidgetConfigSectionDefinition[] = [\n {\n widgetId: defaultWidgetIds.HTML,\n providers: [HtmlWidgetConfigService],\n label: gettext('Asset selection'),\n loadComponent: () => Promise.resolve(WidgetAssetSelectorComponent),\n priority: 100,\n initialState: {\n isRequired: false,\n groupsSelectable: true\n }\n },\n {\n widgetId: defaultWidgetIds.HTML,\n providers: [HtmlWidgetConfigService],\n label: gettext('Settings'),\n loadComponent: () =>\n import('@c8y/ngx-components/widgets/implementations/html-widget').then(\n m => m.HtmlWidgetConfigComponent\n ),\n priority: 0,\n expanded: true\n }\n ];\n\n get(): Observable<WidgetConfigSectionDefinition[]> {\n return this.betaPreviewService.getState$('ui.html-widget.v2').pipe(\n map(state => {\n if (state) {\n return this.baseWidgetConfigDefinition;\n }\n return [];\n })\n );\n }\n}\n","import { inject, Injectable } from '@angular/core';\nimport {\n DynamicComponentDefinition,\n DynamicManagedObjectResolver,\n DynamicWidgetDefinition,\n ExtensionFactory,\n gettext,\n PreviewService\n} from '@c8y/ngx-components';\nimport { map, Observable } from 'rxjs';\nimport { defaultWidgetIds } from '@c8y/ngx-components/widgets/definitions';\nimport {\n exportConfigWithDevice,\n importConfigWithDevice\n} from '@c8y/ngx-components/widgets/import-export-config';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class HtmlWidgetFactory implements ExtensionFactory<DynamicComponentDefinition> {\n private readonly betaPreviewService = inject(PreviewService);\n private readonly baseWidgetDefinition: DynamicComponentDefinition = {\n id: defaultWidgetIds.HTML,\n label: gettext('HTML'),\n description: gettext(`Display custom HTML code.`),\n loadComponent: () =>\n import('@c8y/ngx-components/widgets/implementations/html-widget').then(\n m => m.HtmlWidgetComponent\n ),\n previewImage: 'c8y-style-assets/html-widget-pr.png',\n data: {\n settings: {\n schema: () =>\n import(\n 'c8y-schema-loader?interfaceName=HtmlWidgetConfig!@c8y/ngx-components/widgets/implementations/html-widget'\n ),\n export: exportConfigWithDevice,\n import: importConfigWithDevice,\n noNewWidgets: false,\n widgetDefaults: {\n _width: 8,\n _height: 4\n }\n }\n },\n resolve: {\n device: DynamicManagedObjectResolver\n }\n };\n\n get(): Observable<DynamicWidgetDefinition[]> {\n return this.betaPreviewService.getState$('ui.html-widget.v2').pipe(\n map(state => {\n if (state) {\n return [this.baseWidgetDefinition];\n }\n return [];\n })\n );\n }\n}\n","import { hookPreview, hookWidget } from '@c8y/ngx-components';\nimport { hookWidgetConfig } from '@c8y/ngx-components/context-dashboard';\nimport { HtmlWidgetConfigFactory } from './html-widget-config.factory';\nimport { HtmlWidgetFactory } from './html-widget.factory';\n\nexport const htmlWidgetProviders = [\n hookWidget(HtmlWidgetFactory),\n hookWidgetConfig(HtmlWidgetConfigFactory),\n hookPreview({\n key: 'ui.html-widget.v2',\n label: 'Improved HTML widget',\n description: () =>\n import('@c8y/style/markdown-files/html-widget-preview.md').then(m => m.default),\n settings: {\n reload: true\n }\n })\n];\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;;;;;MAaa,uBAAuB,CAAA;AAHpC,IAAA,WAAA,GAAA;AAImB,QAAA,IAAA,CAAA,kBAAkB,GAAG,MAAM,CAAC,cAAc,CAAC;AAC3C,QAAA,IAAA,CAAA,0BAA0B,GAAoC;AAC7E,YAAA;gBACE,QAAQ,EAAE,gBAAgB,CAAC,IAAI;gBAC/B,SAAS,EAAE,CAAC,uBAAuB,CAAC;AACpC,gBAAA,KAAK,EAAE,OAAO,CAAC,iBAAiB,CAAC;gBACjC,aAAa,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,4BAA4B,CAAC;AAClE,gBAAA,QAAQ,EAAE,GAAG;AACb,gBAAA,YAAY,EAAE;AACZ,oBAAA,UAAU,EAAE,KAAK;AACjB,oBAAA,gBAAgB,EAAE;AACnB;AACF,aAAA;AACD,YAAA;gBACE,QAAQ,EAAE,gBAAgB,CAAC,IAAI;gBAC/B,SAAS,EAAE,CAAC,uBAAuB,CAAC;AACpC,gBAAA,KAAK,EAAE,OAAO,CAAC,UAAU,CAAC;AAC1B,gBAAA,aAAa,EAAE,MACb,OAAO,yDAAyD,CAAC,CAAC,IAAI,CACpE,CAAC,IAAI,CAAC,CAAC,yBAAyB,CACjC;AACH,gBAAA,QAAQ,EAAE,CAAC;AACX,gBAAA,QAAQ,EAAE;AACX;SACF;AAYF;IAVC,GAAG,GAAA;AACD,QAAA,OAAO,IAAI,CAAC,kBAAkB,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC,IAAI,CAChE,GAAG,CAAC,KAAK,IAAG;YACV,IAAI,KAAK,EAAE;gBACT,OAAO,IAAI,CAAC,0BAA0B;;AAExC,YAAA,OAAO,EAAE;SACV,CAAC,CACH;;+~~GAnCQ~~,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA;AAAvB,IAAA,SAAA,IAAA,CAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,uBAAuB,cAFtB,MAAM,EAAA,CAAA,CAAA;;4FAEP,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAHnC,UAAU;AAAC,YAAA,IAAA,EAAA,CAAA;AACV,oBAAA,UAAU,EAAE;AACb,iBAAA;;;MCOY,iBAAiB,CAAA;AAH9B,IAAA,WAAA,GAAA;AAImB,QAAA,IAAA,CAAA,kBAAkB,GAAG,MAAM,CAAC,cAAc,CAAC;AAC3C,QAAA,IAAA,CAAA,oBAAoB,GAA+B;YAClE,EAAE,EAAE,gBAAgB,CAAC,IAAI;AACzB,YAAA,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC;AACtB,YAAA,WAAW,EAAE,OAAO,CAAC,CAAA,yBAAA,CAA2B,CAAC;AACjD,YAAA,aAAa,EAAE,MACb,OAAO,yDAAyD,CAAC,CAAC,IAAI,CACpE,CAAC,IAAI,CAAC,CAAC,mBAAmB,CAC3B;AACH,YAAA,YAAY,EAAE,qCAAqC;AACnD,YAAA,IAAI,EAAE;AACJ,gBAAA,QAAQ,EAAE;AACR,oBAAA,MAAM,EAAE,MACN,OACE,0GAA0G,CAC3G;AACH,oBAAA,MAAM,EAAE,sBAAsB;AAC9B,oBAAA,MAAM,EAAE,sBAAsB;AAC9B,oBAAA,YAAY,EAAE,KAAK;AACnB,oBAAA,cAAc,EAAE;AACd,wBAAA,MAAM,EAAE,CAAC;AACT,wBAAA,OAAO,EAAE;AACV;AACF;AACF,aAAA;AACD,YAAA,OAAO,EAAE;AACP,gBAAA,MAAM,EAAE;AACT;SACF;AAYF;IAVC,GAAG,GAAA;AACD,QAAA,OAAO,IAAI,CAAC,kBAAkB,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC,IAAI,CAChE,GAAG,CAAC,KAAK,IAAG;YACV,IAAI,KAAK,EAAE;AACT,gBAAA,OAAO,CAAC,IAAI,CAAC,oBAAoB,CAAC;;AAEpC,YAAA,OAAO,EAAE;SACV,CAAC,CACH;;+GAvCQ,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA;AAAjB,IAAA,SAAA,IAAA,CAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,iBAAiB,cAFhB,MAAM,EAAA,CAAA,CAAA;;4FAEP,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAH7B,UAAU;AAAC,YAAA,IAAA,EAAA,CAAA;AACV,oBAAA,UAAU,EAAE;AACb,iBAAA;;;ACbY,MAAA,mBAAmB,GAAG;IACjC,UAAU,CAAC,iBAAiB,CAAC;IAC7B,gBAAgB,CAAC,uBAAuB,CAAC;AACzC,IAAA,WAAW,CAAC;AACV,QAAA,GAAG,EAAE,mBAAmB;AACxB,QAAA,KAAK,EAAE,sBAAsB;AAC7B,QAAA,WAAW,EAAE,MACX,OAAO,kDAAkD,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC;AACjF,QAAA,QAAQ,EAAE;AACR,YAAA,MAAM,EAAE;AACT;KACF;;;AChBH;;AAEG;;;;"}
1	+ {"version":3,"file":"c8y-ngx-components-widgets-definitions-html-widget.mjs","sources":["../../widgets/definitions/html-widget/html-widget-config.factory.ts","../../widgets/definitions/html-widget/html-widget.factory.ts","../../widgets/definitions/html-widget/index.ts","../../widgets/definitions/html-widget/c8y-ngx-components-widgets-definitions-html-widget.ts"],"sourcesContent":["import { inject, Injectable } from '@angular/core';\nimport { ExtensionFactory, gettext, PreviewService } from '@c8y/ngx-components';\nimport {\n WidgetAssetSelectorComponent,\n WidgetConfigSectionDefinition\n} from '@c8y/ngx-components/context-dashboard';\nimport { HtmlWidgetConfigService } from '@c8y/ngx-components/widgets/implementations/html-widget';\nimport { map, Observable } from 'rxjs';\nimport { defaultWidgetIds } from '@c8y/ngx-components/widgets/definitions';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class HtmlWidgetConfigFactory implements ExtensionFactory<WidgetConfigSectionDefinition> {\n private readonly betaPreviewService = inject(PreviewService);\n private readonly baseWidgetConfigDefinition: WidgetConfigSectionDefinition[] = [\n {\n widgetId: defaultWidgetIds.HTML,\n providers: [HtmlWidgetConfigService],\n label: gettext('Asset selection'),\n loadComponent: () => Promise.resolve(WidgetAssetSelectorComponent),\n priority: 100,\n initialState: {\n isRequired: false,\n groupsSelectable: true\n }\n },\n {\n widgetId: defaultWidgetIds.HTML,\n label: gettext('Asset properties'),\n loadComponent: () =>\n import('@c8y/ngx-components/widgets/implementations/html-widget').then(\n m => m.HtmlWidgetPropertiesSelectorComponent\n ),\n priority: 50\n },\n {\n widgetId: defaultWidgetIds.HTML,\n providers: [HtmlWidgetConfigService],\n label: gettext('Settings'),\n loadComponent: () =>\n import('@c8y/ngx-components/widgets/implementations/html-widget').then(\n m => m.HtmlWidgetConfigComponent\n ),\n priority: 0,\n expanded: true\n }\n ];\n\n get(): Observable<WidgetConfigSectionDefinition[]> {\n return this.betaPreviewService.getState$('ui.html-widget.v2').pipe(\n map(state => {\n if (state) {\n return this.baseWidgetConfigDefinition;\n }\n return [];\n })\n );\n }\n}\n","import { inject, Injectable } from '@angular/core';\nimport {\n DynamicComponentDefinition,\n DynamicManagedObjectResolver,\n DynamicWidgetDefinition,\n ExtensionFactory,\n gettext,\n PreviewService\n} from '@c8y/ngx-components';\nimport { map, Observable } from 'rxjs';\nimport { defaultWidgetIds } from '@c8y/ngx-components/widgets/definitions';\nimport {\n exportConfigWithDevice,\n importConfigWithDevice\n} from '@c8y/ngx-components/widgets/import-export-config';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class HtmlWidgetFactory implements ExtensionFactory<DynamicComponentDefinition> {\n private readonly betaPreviewService = inject(PreviewService);\n private readonly baseWidgetDefinition: DynamicComponentDefinition = {\n id: defaultWidgetIds.HTML,\n label: gettext('HTML'),\n description: gettext(`Display custom HTML code.`),\n loadComponent: () =>\n import('@c8y/ngx-components/widgets/implementations/html-widget').then(\n m => m.HtmlWidgetComponent\n ),\n previewImage: 'c8y-style-assets/html-widget-pr.png',\n data: {\n settings: {\n schema: () =>\n import(\n 'c8y-schema-loader?interfaceName=HtmlWidgetConfig!@c8y/ngx-components/widgets/implementations/html-widget'\n ),\n export: exportConfigWithDevice,\n import: importConfigWithDevice,\n noNewWidgets: false,\n widgetDefaults: {\n _width: 8,\n _height: 4\n }\n }\n },\n resolve: {\n device: DynamicManagedObjectResolver\n }\n };\n\n get(): Observable<DynamicWidgetDefinition[]> {\n return this.betaPreviewService.getState$('ui.html-widget.v2').pipe(\n map(state => {\n if (state) {\n return [this.baseWidgetDefinition];\n }\n return [];\n })\n );\n }\n}\n","import { hookPreview, hookWidget } from '@c8y/ngx-components';\nimport { hookWidgetConfig } from '@c8y/ngx-components/context-dashboard';\nimport { HtmlWidgetConfigFactory } from './html-widget-config.factory';\nimport { HtmlWidgetFactory } from './html-widget.factory';\n\nexport const htmlWidgetProviders = [\n hookWidget(HtmlWidgetFactory),\n hookWidgetConfig(HtmlWidgetConfigFactory),\n hookPreview({\n key: 'ui.html-widget.v2',\n label: 'Improved HTML widget',\n description: () =>\n import('@c8y/style/markdown-files/html-widget-preview.md').then(m => m.default),\n settings: {\n reload: true\n }\n })\n];\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;;;;;MAaa,uBAAuB,CAAA;AAHpC,IAAA,WAAA,GAAA;AAImB,QAAA,IAAA,CAAA,kBAAkB,GAAG,MAAM,CAAC,cAAc,CAAC;AAC3C,QAAA,IAAA,CAAA,0BAA0B,GAAoC;AAC7E,YAAA;gBACE,QAAQ,EAAE,gBAAgB,CAAC,IAAI;gBAC/B,SAAS,EAAE,CAAC,uBAAuB,CAAC;AACpC,gBAAA,KAAK,EAAE,OAAO,CAAC,iBAAiB,CAAC;gBACjC,aAAa,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,4BAA4B,CAAC;AAClE,gBAAA,QAAQ,EAAE,GAAG;AACb,gBAAA,YAAY,EAAE;AACZ,oBAAA,UAAU,EAAE,KAAK;AACjB,oBAAA,gBAAgB,EAAE;AACnB;AACF,aAAA;AACD,YAAA;gBACE,QAAQ,EAAE,gBAAgB,CAAC,IAAI;AAC/B,gBAAA,KAAK,EAAE,OAAO,CAAC,kBAAkB,CAAC;AAClC,gBAAA,aAAa,EAAE,MACb,OAAO,yDAAyD,CAAC,CAAC,IAAI,CACpE,CAAC,IAAI,CAAC,CAAC,qCAAqC,CAC7C;AACH,gBAAA,QAAQ,EAAE;AACX,aAAA;AACD,YAAA;gBACE,QAAQ,EAAE,gBAAgB,CAAC,IAAI;gBAC/B,SAAS,EAAE,CAAC,uBAAuB,CAAC;AACpC,gBAAA,KAAK,EAAE,OAAO,CAAC,UAAU,CAAC;AAC1B,gBAAA,aAAa,EAAE,MACb,OAAO,yDAAyD,CAAC,CAAC,IAAI,CACpE,CAAC,IAAI,CAAC,CAAC,yBAAyB,CACjC;AACH,gBAAA,QAAQ,EAAE,CAAC;AACX,gBAAA,QAAQ,EAAE;AACX;SACF;AAYF;IAVC,GAAG,GAAA;AACD,QAAA,OAAO,IAAI,CAAC,kBAAkB,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC,IAAI,CAChE,GAAG,CAAC,KAAK,IAAG;YACV,IAAI,KAAK,EAAE;gBACT,OAAO,IAAI,CAAC,0BAA0B;;AAExC,YAAA,OAAO,EAAE;SACV,CAAC,CACH;;+GA5CQ,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA;AAAvB,IAAA,SAAA,IAAA,CAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,uBAAuB,cAFtB,MAAM,EAAA,CAAA,CAAA;;4FAEP,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAHnC,UAAU;AAAC,YAAA,IAAA,EAAA,CAAA;AACV,oBAAA,UAAU,EAAE;AACb,iBAAA;;;MCOY,iBAAiB,CAAA;AAH9B,IAAA,WAAA,GAAA;AAImB,QAAA,IAAA,CAAA,kBAAkB,GAAG,MAAM,CAAC,cAAc,CAAC;AAC3C,QAAA,IAAA,CAAA,oBAAoB,GAA+B;YAClE,EAAE,EAAE,gBAAgB,CAAC,IAAI;AACzB,YAAA,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC;AACtB,YAAA,WAAW,EAAE,OAAO,CAAC,CAAA,yBAAA,CAA2B,CAAC;AACjD,YAAA,aAAa,EAAE,MACb,OAAO,yDAAyD,CAAC,CAAC,IAAI,CACpE,CAAC,IAAI,CAAC,CAAC,mBAAmB,CAC3B;AACH,YAAA,YAAY,EAAE,qCAAqC;AACnD,YAAA,IAAI,EAAE;AACJ,gBAAA,QAAQ,EAAE;AACR,oBAAA,MAAM,EAAE,MACN,OACE,0GAA0G,CAC3G;AACH,oBAAA,MAAM,EAAE,sBAAsB;AAC9B,oBAAA,MAAM,EAAE,sBAAsB;AAC9B,oBAAA,YAAY,EAAE,KAAK;AACnB,oBAAA,cAAc,EAAE;AACd,wBAAA,MAAM,EAAE,CAAC;AACT,wBAAA,OAAO,EAAE;AACV;AACF;AACF,aAAA;AACD,YAAA,OAAO,EAAE;AACP,gBAAA,MAAM,EAAE;AACT;SACF;AAYF;IAVC,GAAG,GAAA;AACD,QAAA,OAAO,IAAI,CAAC,kBAAkB,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC,IAAI,CAChE,GAAG,CAAC,KAAK,IAAG;YACV,IAAI,KAAK,EAAE;AACT,gBAAA,OAAO,CAAC,IAAI,CAAC,oBAAoB,CAAC;;AAEpC,YAAA,OAAO,EAAE;SACV,CAAC,CACH;;+GAvCQ,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA;AAAjB,IAAA,SAAA,IAAA,CAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,iBAAiB,cAFhB,MAAM,EAAA,CAAA,CAAA;;4FAEP,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAH7B,UAAU;AAAC,YAAA,IAAA,EAAA,CAAA;AACV,oBAAA,UAAU,EAAE;AACb,iBAAA;;;ACbY,MAAA,mBAAmB,GAAG;IACjC,UAAU,CAAC,iBAAiB,CAAC;IAC7B,gBAAgB,CAAC,uBAAuB,CAAC;AACzC,IAAA,WAAW,CAAC;AACV,QAAA,GAAG,EAAE,mBAAmB;AACxB,QAAA,KAAK,EAAE,sBAAsB;AAC7B,QAAA,WAAW,EAAE,MACX,OAAO,kDAAkD,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC;AACjF,QAAA,QAAQ,EAAE;AACR,YAAA,MAAM,EAAE;AACT;KACF;;;AChBH;;AAEG;;;;"}

package/fesm2022/c8y-ngx-components-widgets-implementations-datapoints-graph.mjs CHANGED Viewed

@@ -3,7 +3,7 @@ import { inject, ViewChild, Input, Optional, Component } from '@angular/core';
 import * as i4 from '@angular/forms';
 import { FormBuilder, NgForm, Validators } from '@angular/forms';
 import * as i2 from '@c8y/ngx-components';
-import { WidgetTimeContextDateRangeService, gettext, CommonModule, CoreModule, FormsModule, AGGREGATION_ICONS, AGGREGATION_TEXTS } from '@c8y/ngx-components';
+import { WidgetTimeContextDateRangeService, GainsightService, gettext, CommonModule, CoreModule, FormsModule, AGGREGATION_ICONS, AGGREGATION_TEXTS } from '@c8y/ngx-components';
 import * as i2$1 from '@ngx-translate/core';
 import { TranslateService } from '@ngx-translate/core';
 import { takeUntil } from 'rxjs/operators';
@@ -19,7 +19,7 @@ import * as i5$1 from 'ngx-bootstrap/tooltip';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import * as i6 from 'ngx-bootstrap/popover';
 import { PopoverModule } from 'ngx-bootstrap/popover';
-import { DATE_SELECTION_EXTENDED, ChartsComponent, ChartEventsService, ChartAlarmsService } from '@c8y/ngx-components/echart';
+import { ChartHelpersService, DATE_SELECTION_EXTENDED, PRODUCT_EXPERIENCE_DATA_EXPLORER_AND_GRAPH, ChartsComponent, ChartEventsService, ChartAlarmsService } from '@c8y/ngx-components/echart';
 import { TimeContextComponent } from '@c8y/ngx-components/time-context';
 import * as i5 from '@angular/common';
 import { CommonModule as CommonModule$1 } from '@angular/common';
@@ -45,6 +45,8 @@ class DatapointsGraphWidgetConfigComponent {
         this.translate = inject(TranslateService);
         this.widgetTimeContextDateRangeService = inject(WidgetTimeContextDateRangeService);
         this.widgetConfigService = inject(WidgetConfigService);
+        this.chartHelpersService = inject(ChartHelpersService);
+        this.gainsightService = inject(GainsightService);
         this.DATE_SELECTION = DATE_SELECTION_EXTENDED;
         this.dateSelectionHelp = this.translate.instant(gettext(`Choose how to select a date range, the available options are:
   <ul class="m-l-0 p-l-8 m-t-8 m-b-0">
@@ -116,6 +118,12 @@ class DatapointsGraphWidgetConfigComponent {
                     ...(this.formGroup.value.events || [])
                 ]
             });
+            const configSummaryGS = this.chartHelpersService.getConfigSummaryForGainsight(config);
+            this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_DATA_EXPLORER_AND_GRAPH.EVENTS.DATA_EXPLORER_AND_GRAPH, {
+                component: PRODUCT_EXPERIENCE_DATA_EXPLORER_AND_GRAPH.COMPONENTS.DATA_EXPLORER_DETAILS,
+                action: PRODUCT_EXPERIENCE_DATA_EXPLORER_AND_GRAPH.ACTIONS.DATA_GRAPH_WIDGET_CONFIG,
+                ...configSummaryGS
+            });
             return true;
         }
         return false;
@@ -232,7 +240,7 @@ class DatapointsGraphWidgetConfigComponent {
             (this.config?.datapoints?.filter(dp => dp.__active)?.length || 0) > 0;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DatapointsGraphWidgetConfigComponent, deps: [{ token: i1.WidgetConfigComponent, optional: true }, { token: i1.ContextDashboardComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DatapointsGraphWidgetConfigComponent, isStandalone: true, selector: "c8y-datapoints-graph-widget-config", inputs: { config: "config" }, host: { classAttribute: "d-contents" }, providers: [ChartEventsService, ChartAlarmsService], viewQueries: [{ propertyName: "previewMapSet", first: true, predicate: ["dataPointsGraphPreview"], descendants: true }], ngImport: i0, template: "<div class=\"no-card-context\">\n  <div class=\"conf-col\">\n    <form [formGroup]=\"formGroup\">\n      <c8y-datapoint-selection-list\n        class=\"separator-bottom d-block\"\n        name=\"datapoints\"\n        [minActiveCount]=\"1\"\n        [defaultFormOptions]=\"datapointSelectDefaultFormOptions\"\n        [config]=\"datapointSelectionConfig\"\n        formControlName=\"datapoints\"\n      ></c8y-datapoint-selection-list>\n\n      <c8y-alarm-event-selection-list\n        class=\"separator-bottom d-block\"\n        name=\"alarms\"\n        formControlName=\"alarms\"\n        [timelineType]=\"'ALARM'\"\n        [datapoints]=\"config?.datapoints\"\n      ></c8y-alarm-event-selection-list>\n\n      <c8y-alarm-event-selection-list\n        class=\"bg-inherit\"\n        name=\"events\"\n        formControlName=\"events\"\n        [timelineType]=\"'EVENT'\"\n        [datapoints]=\"config?.datapoints\"\n      ></c8y-alarm-event-selection-list>\n\n      <label\n        [title]=\"'Number of decimal places' | translate\"\n        translate\n      >\n        Number of decimal places\n      </label>\n      <input\n        class=\"form-control\"\n        name=\"numberOfDecimalPlaces\"\n        type=\"number\"\n        formControlName=\"numberOfDecimalPlaces\"\n        [placeholder]=\"'e.g. {{ example }}' | translate: { example: 1 }\"\n      />\n      <c8y-messages\n        [show]=\"\n          formGroup.controls?.numberOfDecimalPlaces?.touched &&\n          formGroup?.controls?.numberOfDecimalPlaces?.errors\n        \"\n      ></c8y-messages>\n    </form>\n  </div>\n\n  <div class=\"p-t-32 separator-top\">\n    <div class=\"d-col fit-h\">\n      <div class=\"form-group p-t-8 form-group-sm d-flex a-i-center m-b-8\">\n        <div class=\"d-flex a-i-center m-r-4\">\n          <label\n            class=\"m-b-0\"\n            translate\n          >\n            Date selection\n          </label>\n          <button\n            class=\"btn-help btn-help--sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            [popover]=\"dateSelectionHelpTemplate\"\n            placement=\"bottom\"\n            triggers=\"focus\"\n            container=\"body\"\n            [adaptivePosition]=\"false\"\n          ></button>\n        </div>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control input-sm\"\n            [ngModel]=\"dateSelection\"\n            (ngModelChange)=\"dateSelectionChange($event)\"\n            [ngModelOptions]=\"{ standalone: true }\"\n          >\n            <option\n              title=\"{{ 'Dashboard time range' | translate }}\"\n              [value]=\"DATE_SELECTION.DASHBOARD_CONTEXT\"\n            >\n              {{ 'Dashboard time range' | translate }}\n            </option>\n            <option\n              title=\"{{ 'Widget configuration' | translate }}\"\n              [value]=\"DATE_SELECTION.CONFIG\"\n            >\n              {{ 'Widget configuration' | translate }}\n            </option>\n          </select>\n          <span></span>\n        </div>\n      </div>\n      <label\n        class=\"text-12\"\n        *ngIf=\"dateSelection === DATE_SELECTION.CONFIG\"\n      >\n        {{ 'Options' | translate }}\n      </label>\n      <c8y-time-context\n        *ngIf=\"dateSelection === DATE_SELECTION.CONFIG\"\n        [changedDateContext]=\"timeProps\"\n        [controlsAvailable]=\"{\n          realtime: true,\n          timeRange: true,\n          interval: true,\n          aggregation: true\n        }\"\n        (contextChange)=\"timePropsChanged($event)\"\n      ></c8y-time-context>\n\n      <form\n        class=\"d-block p-t-16\"\n        [formGroup]=\"formGroup\"\n      >\n        <label>{{ 'Display options' | translate }}</label>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Axis' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Y-axis helper lines' | translate\"\n            >\n              <input\n                name=\"yAxisSplitLines\"\n                type=\"checkbox\"\n                formControlName=\"yAxisSplitLines\"\n              />\n              <span></span>\n              <span translate>Y-axis helper lines</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'X-axis helper lines' | translate\"\n            >\n              <input\n                name=\"xAxisSplitLines\"\n                type=\"checkbox\"\n                formControlName=\"xAxisSplitLines\"\n              />\n              <span></span>\n              <span translate>X-axis helper lines</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Merge matching data points into single axis' | translate\"\n            >\n              <input\n                name=\"mergeMatchingDatapoints\"\n                type=\"checkbox\"\n                formControlName=\"mergeMatchingDatapoints\"\n              />\n              <span></span>\n              <span translate>Merge matching data points into single axis</span>\n              <button\n                class=\"btn-dot m-l-8\"\n                [attr.aria-label]=\"\n                  'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-info\"\n                  c8yIcon=\"info\"\n                ></i>\n              </button>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Force merge all data points into single axis' | translate\"\n            >\n              <input\n                name=\"forceMergeDatapoints\"\n                type=\"checkbox\"\n                formControlName=\"forceMergeDatapoints\"\n              />\n              <span></span>\n              <span translate>Force merge all datapoints into a single axis</span>\n              <button\n                class=\"btn-dot m-l-8\"\n                [attr.aria-label]=\"\n                  'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\\'s recommended to use this option for data points with similar values.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\\'s recommended to use this option for data points with similar values.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-info\"\n                  c8yIcon=\"info\"\n                ></i>\n              </button>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Alarms & events' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show vertical line on every occurrence' | translate\"\n            >\n              <input\n                name=\"displayMarkedLine\"\n                type=\"checkbox\"\n                formControlName=\"displayMarkedLine\"\n              />\n              <span></span>\n              <span translate>Show vertical line on every occurrence</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show icon when triggered' | translate\"\n            >\n              <input\n                name=\"displayMarkedPoint\"\n                type=\"checkbox\"\n                formControlName=\"displayMarkedPoint\"\n              />\n              <span></span>\n              <span translate>Show icon when triggered</span>\n              <button\n                class=\"btn-clean m-l-8\"\n                [attr.aria-label]=\"\n                  'Some alarms or events have no matching data points. No icons will be shown for them.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Some alarms or events have no matching data points. No icons will be shown for them.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                *ngIf=\"alarmsOrEventsHaveNoMatchingDps\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <input\n                  name=\"yAxisSplitLines\"\n                  type=\"checkbox\"\n                  formControlName=\"yAxisSplitLines\"\n                />\n                <span></span>\n                <span translate>Y-axis helper lines</span>\n              </button>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'X-axis helper lines' | translate\"\n            >\n              <input\n                name=\"xAxisSplitLines\"\n                type=\"checkbox\"\n                formControlName=\"xAxisSplitLines\"\n              />\n              <span></span>\n              <span translate>X-axis helper lines</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Merge matching data points into single axis' | translate\"\n            >\n              <input\n                name=\"mergeMatchingDatapoints\"\n                type=\"checkbox\"\n                formControlName=\"mergeMatchingDatapoints\"\n              />\n              <span></span>\n              <span translate>Merge matching data points into single axis</span>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Alarms & events' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show vertical line on every occurrence' | translate\"\n            >\n              <input\n                name=\"displayMarkedLine\"\n                type=\"checkbox\"\n                formControlName=\"displayMarkedLine\"\n              />\n              <span></span>\n              <span translate>Show vertical line on every occurrence</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show icon when triggered' | translate\"\n            >\n              <input\n                name=\"displayMarkedPoint\"\n                type=\"checkbox\"\n                formControlName=\"displayMarkedPoint\"\n              />\n              <span></span>\n              <span translate>Show icon when triggered</span>\n              <button\n                class=\"btn-clean m-l-8\"\n                [attr.aria-label]=\"\n                  'Some alarms or events have no matching data points. No icons will be shown for them.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Some alarms or events have no matching data points. No icons will be shown for them.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                *ngIf=\"alarmsOrEventsHaveNoMatchingDps\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-warning\"\n                  c8yIcon=\"exclamation-triangle\"\n                ></i>\n              </button>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Chart' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Enable date selection in the widget view.' | translate\"\n            >\n              <input\n                name=\"displayDateSelection\"\n                type=\"checkbox\"\n                formControlName=\"displayDateSelection\"\n              />\n              <span></span>\n              <span translate>Date selection in the widget view.</span>\n              <button\n                class=\"btn-clean m-l-8\"\n                [attr.aria-label]=\"\n                  'Date selection in widget view is not possible when using dashboard time range.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Date selection in widget view is not possible when using dashboard time range.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                *ngIf=\"dateSelection === DATE_SELECTION.DASHBOARD_CONTEXT\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-info\"\n                  c8yIcon=\"info\"\n                ></i>\n              </button>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Aggregation selection' | translate\"\n            >\n              <input\n                name=\"displayAggregationSelection\"\n                type=\"checkbox\"\n                formControlName=\"displayAggregationSelection\"\n              />\n              <span></span>\n              <span translate>Aggregation selection</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show labels and units' | translate\"\n            >\n              <input\n                name=\"showLabelAndUnit\"\n                type=\"checkbox\"\n                formControlName=\"showLabelAndUnit\"\n              />\n              <span></span>\n              <span translate>Display labels and units on Y-axis</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show slider' | translate\"\n            >\n              <input\n                name=\"showSlider\"\n                type=\"checkbox\"\n                formControlName=\"showSlider\"\n              />\n              <span></span>\n              <span translate>Show slider</span>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n      </form>\n    </div>\n  </div>\n</div>\n\n<ng-template #dataPointsGraphPreview>\n  <c8y-charts\n    class=\"d-block p-relative\"\n    *ngIf=\"activeDatapointsExists\"\n    [config]=\"config\"\n    [alerts]=\"alerts\"\n    (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n    (configChangeOnZoomOut)=\"updateDashboardTimeContext($event)\"\n  ></c8y-charts>\n\n  <c8y-ui-empty-state\n    class=\"d-block m-t-24\"\n    [icon]=\"'search'\"\n    [title]=\"'No data points selected' | translate\"\n    [subtitle]=\"'Select data point to render chart' | translate\"\n    *ngIf=\"!activeDatapointsExists\"\n  ></c8y-ui-empty-state>\n</ng-template>\n\n<ng-template #dateSelectionHelpTemplate>\n  <div [innerHTML]=\"dateSelectionHelp\"></div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.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: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i2.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i6.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: ChartsComponent, selector: "c8y-charts", inputs: ["config", "alerts"], outputs: ["configChangeOnZoomOut", "timeRangeChangeOnRealtime", "datapointOutOfSync", "updateAlarmsAndEvents", "isMarkedAreaEnabled"] }, { kind: "ngmodule", type: DatapointSelectorModule }, { kind: "component", type: i7.DatapointSelectionListComponent, selector: "c8y-datapoint-selection-list", inputs: ["actions", "allowDragAndDrop", "config", "defaultFormOptions", "maxActiveCount", "minActiveCount", "resolveContext", "listTitle"], outputs: ["isValid", "change"] }, { kind: "ngmodule", type: AlarmEventSelectorModule }, { kind: "component", type: i8.AlarmEventSelectionListComponent, selector: "c8y-alarm-event-selection-list", inputs: ["timelineType", "canRemove", "canEdit", "canDragAndDrop", "title", "addButtonLabel", "hideSource", "inline", "activeToggleAsSwitch", "omitProperties", "datapoints", "config"] }, { kind: "component", type: TimeContextComponent, selector: "c8y-time-context", inputs: ["changedDateContext", "controlsAvailable", "context"], outputs: ["contextChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DatapointsGraphWidgetConfigComponent, isStandalone: true, selector: "c8y-datapoints-graph-widget-config", inputs: { config: "config" }, host: { classAttribute: "d-contents" }, providers: [ChartEventsService, ChartAlarmsService, ChartHelpersService], viewQueries: [{ propertyName: "previewMapSet", first: true, predicate: ["dataPointsGraphPreview"], descendants: true }], ngImport: i0, template: "<div class=\"no-card-context\">\n  <div class=\"conf-col\">\n    <form [formGroup]=\"formGroup\">\n      <c8y-datapoint-selection-list\n        class=\"separator-bottom d-block\"\n        name=\"datapoints\"\n        [minActiveCount]=\"1\"\n        [defaultFormOptions]=\"datapointSelectDefaultFormOptions\"\n        [config]=\"datapointSelectionConfig\"\n        formControlName=\"datapoints\"\n      ></c8y-datapoint-selection-list>\n\n      <c8y-alarm-event-selection-list\n        class=\"separator-bottom d-block\"\n        name=\"alarms\"\n        formControlName=\"alarms\"\n        [timelineType]=\"'ALARM'\"\n        [datapoints]=\"config?.datapoints\"\n      ></c8y-alarm-event-selection-list>\n\n      <c8y-alarm-event-selection-list\n        class=\"bg-inherit\"\n        name=\"events\"\n        formControlName=\"events\"\n        [timelineType]=\"'EVENT'\"\n        [datapoints]=\"config?.datapoints\"\n      ></c8y-alarm-event-selection-list>\n\n      <label\n        [title]=\"'Number of decimal places' | translate\"\n        translate\n      >\n        Number of decimal places\n      </label>\n      <input\n        class=\"form-control\"\n        name=\"numberOfDecimalPlaces\"\n        type=\"number\"\n        formControlName=\"numberOfDecimalPlaces\"\n        [placeholder]=\"'e.g. {{ example }}' | translate: { example: 1 }\"\n      />\n      <c8y-messages\n        [show]=\"\n          formGroup.controls?.numberOfDecimalPlaces?.touched &&\n          formGroup?.controls?.numberOfDecimalPlaces?.errors\n        \"\n      ></c8y-messages>\n    </form>\n  </div>\n\n  <div class=\"p-t-32 separator-top\">\n    <div class=\"d-col fit-h\">\n      <div class=\"form-group p-t-8 form-group-sm d-flex a-i-center m-b-8\">\n        <div class=\"d-flex a-i-center m-r-4\">\n          <label\n            class=\"m-b-0\"\n            translate\n          >\n            Date selection\n          </label>\n          <button\n            class=\"btn-help btn-help--sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            [popover]=\"dateSelectionHelpTemplate\"\n            placement=\"bottom\"\n            triggers=\"focus\"\n            container=\"body\"\n            [adaptivePosition]=\"false\"\n          ></button>\n        </div>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control input-sm\"\n            [ngModel]=\"dateSelection\"\n            (ngModelChange)=\"dateSelectionChange($event)\"\n            [ngModelOptions]=\"{ standalone: true }\"\n          >\n            <option\n              title=\"{{ 'Dashboard time range' | translate }}\"\n              [value]=\"DATE_SELECTION.DASHBOARD_CONTEXT\"\n            >\n              {{ 'Dashboard time range' | translate }}\n            </option>\n            <option\n              title=\"{{ 'Widget configuration' | translate }}\"\n              [value]=\"DATE_SELECTION.CONFIG\"\n            >\n              {{ 'Widget configuration' | translate }}\n            </option>\n          </select>\n          <span></span>\n        </div>\n      </div>\n      <label\n        class=\"text-12\"\n        *ngIf=\"dateSelection === DATE_SELECTION.CONFIG\"\n      >\n        {{ 'Options' | translate }}\n      </label>\n      <c8y-time-context\n        *ngIf=\"dateSelection === DATE_SELECTION.CONFIG\"\n        [changedDateContext]=\"timeProps\"\n        [controlsAvailable]=\"{\n          realtime: true,\n          timeRange: true,\n          interval: true,\n          aggregation: true\n        }\"\n        (contextChange)=\"timePropsChanged($event)\"\n      ></c8y-time-context>\n\n      <form\n        class=\"d-block p-t-16\"\n        [formGroup]=\"formGroup\"\n      >\n        <label>{{ 'Display options' | translate }}</label>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Axis' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Y-axis helper lines' | translate\"\n            >\n              <input\n                name=\"yAxisSplitLines\"\n                type=\"checkbox\"\n                formControlName=\"yAxisSplitLines\"\n              />\n              <span></span>\n              <span translate>Y-axis helper lines</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'X-axis helper lines' | translate\"\n            >\n              <input\n                name=\"xAxisSplitLines\"\n                type=\"checkbox\"\n                formControlName=\"xAxisSplitLines\"\n              />\n              <span></span>\n              <span translate>X-axis helper lines</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Merge matching data points into single axis' | translate\"\n            >\n              <input\n                name=\"mergeMatchingDatapoints\"\n                type=\"checkbox\"\n                formControlName=\"mergeMatchingDatapoints\"\n              />\n              <span></span>\n              <span translate>Merge matching data points into single axis</span>\n              <button\n                class=\"btn-dot m-l-8\"\n                [attr.aria-label]=\"\n                  'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-info\"\n                  c8yIcon=\"info\"\n                ></i>\n              </button>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Force merge all data points into single axis' | translate\"\n            >\n              <input\n                name=\"forceMergeDatapoints\"\n                type=\"checkbox\"\n                formControlName=\"forceMergeDatapoints\"\n              />\n              <span></span>\n              <span translate>Force merge all datapoints into a single axis</span>\n              <button\n                class=\"btn-dot m-l-8\"\n                [attr.aria-label]=\"\n                  'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\\'s recommended to use this option for data points with similar values.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\\'s recommended to use this option for data points with similar values.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-info\"\n                  c8yIcon=\"info\"\n                ></i>\n              </button>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Alarms & events' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show vertical line on every occurrence' | translate\"\n            >\n              <input\n                name=\"displayMarkedLine\"\n                type=\"checkbox\"\n                formControlName=\"displayMarkedLine\"\n              />\n              <span></span>\n              <span translate>Show vertical line on every occurrence</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show icon when triggered' | translate\"\n            >\n              <input\n                name=\"displayMarkedPoint\"\n                type=\"checkbox\"\n                formControlName=\"displayMarkedPoint\"\n              />\n              <span></span>\n              <span translate>Show icon when triggered</span>\n              <button\n                class=\"btn-clean m-l-8\"\n                [attr.aria-label]=\"\n                  'Some alarms or events have no matching data points. No icons will be shown for them.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Some alarms or events have no matching data points. No icons will be shown for them.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                *ngIf=\"alarmsOrEventsHaveNoMatchingDps\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-warning\"\n                  c8yIcon=\"exclamation-triangle\"\n                ></i>\n              </button>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Chart' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Enable date selection in the widget view.' | translate\"\n            >\n              <input\n                name=\"displayDateSelection\"\n                type=\"checkbox\"\n                formControlName=\"displayDateSelection\"\n              />\n              <span></span>\n              <span translate>Date selection in the widget view.</span>\n              <button\n                class=\"btn-clean m-l-8\"\n                [attr.aria-label]=\"\n                  'Date selection in widget view is not possible when using dashboard time range.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Date selection in widget view is not possible when using dashboard time range.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                *ngIf=\"dateSelection === DATE_SELECTION.DASHBOARD_CONTEXT\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-info\"\n                  c8yIcon=\"info\"\n                ></i>\n              </button>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Aggregation selection' | translate\"\n            >\n              <input\n                name=\"displayAggregationSelection\"\n                type=\"checkbox\"\n                formControlName=\"displayAggregationSelection\"\n              />\n              <span></span>\n              <span translate>Aggregation selection</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show labels and units' | translate\"\n            >\n              <input\n                name=\"showLabelAndUnit\"\n                type=\"checkbox\"\n                formControlName=\"showLabelAndUnit\"\n              />\n              <span></span>\n              <span translate>Display labels and units on Y-axis</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show slider' | translate\"\n            >\n              <input\n                name=\"showSlider\"\n                type=\"checkbox\"\n                formControlName=\"showSlider\"\n              />\n              <span></span>\n              <span translate>Show slider</span>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n      </form>\n    </div>\n  </div>\n</div>\n\n<ng-template #dataPointsGraphPreview>\n  <c8y-charts\n    class=\"d-block p-relative\"\n    *ngIf=\"activeDatapointsExists\"\n    [config]=\"config\"\n    [alerts]=\"alerts\"\n    (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n    (configChangeOnZoomOut)=\"updateDashboardTimeContext($event)\"\n  ></c8y-charts>\n\n  <c8y-ui-empty-state\n    class=\"d-block m-t-24\"\n    [icon]=\"'search'\"\n    [title]=\"'No data points selected' | translate\"\n    [subtitle]=\"'Select data point to render chart' | translate\"\n    *ngIf=\"!activeDatapointsExists\"\n  ></c8y-ui-empty-state>\n</ng-template>\n\n<ng-template #dateSelectionHelpTemplate>\n  <div [innerHTML]=\"dateSelectionHelp\"></div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.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: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i2.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i6.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: ChartsComponent, selector: "c8y-charts", inputs: ["config", "alerts"], outputs: ["configChangeOnZoomOut", "timeRangeChangeOnRealtime", "datapointOutOfSync", "updateAlarmsAndEvents", "isMarkedAreaEnabled"] }, { kind: "ngmodule", type: DatapointSelectorModule }, { kind: "component", type: i7.DatapointSelectionListComponent, selector: "c8y-datapoint-selection-list", inputs: ["actions", "allowDragAndDrop", "config", "defaultFormOptions", "maxActiveCount", "minActiveCount", "resolveContext", "listTitle"], outputs: ["isValid", "change"] }, { kind: "ngmodule", type: AlarmEventSelectorModule }, { kind: "component", type: i8.AlarmEventSelectionListComponent, selector: "c8y-alarm-event-selection-list", inputs: ["timelineType", "canRemove", "canEdit", "canDragAndDrop", "title", "addButtonLabel", "hideSource", "inline", "activeToggleAsSwitch", "omitProperties", "datapoints", "config"] }, { kind: "component", type: TimeContextComponent, selector: "c8y-time-context", inputs: ["changedDateContext", "controlsAvailable", "timeContext", "context"], outputs: ["contextChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DatapointsGraphWidgetConfigComponent, decorators: [{
             type: Component,
@@ -246,7 +254,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         DatapointSelectorModule,
                         AlarmEventSelectorModule,
                         TimeContextComponent
-                    ], providers: [ChartEventsService, ChartAlarmsService], template: "<div class=\"no-card-context\">\n  <div class=\"conf-col\">\n    <form [formGroup]=\"formGroup\">\n      <c8y-datapoint-selection-list\n        class=\"separator-bottom d-block\"\n        name=\"datapoints\"\n        [minActiveCount]=\"1\"\n        [defaultFormOptions]=\"datapointSelectDefaultFormOptions\"\n        [config]=\"datapointSelectionConfig\"\n        formControlName=\"datapoints\"\n      ></c8y-datapoint-selection-list>\n\n      <c8y-alarm-event-selection-list\n        class=\"separator-bottom d-block\"\n        name=\"alarms\"\n        formControlName=\"alarms\"\n        [timelineType]=\"'ALARM'\"\n        [datapoints]=\"config?.datapoints\"\n      ></c8y-alarm-event-selection-list>\n\n      <c8y-alarm-event-selection-list\n        class=\"bg-inherit\"\n        name=\"events\"\n        formControlName=\"events\"\n        [timelineType]=\"'EVENT'\"\n        [datapoints]=\"config?.datapoints\"\n      ></c8y-alarm-event-selection-list>\n\n      <label\n        [title]=\"'Number of decimal places' | translate\"\n        translate\n      >\n        Number of decimal places\n      </label>\n      <input\n        class=\"form-control\"\n        name=\"numberOfDecimalPlaces\"\n        type=\"number\"\n        formControlName=\"numberOfDecimalPlaces\"\n        [placeholder]=\"'e.g. {{ example }}' | translate: { example: 1 }\"\n      />\n      <c8y-messages\n        [show]=\"\n          formGroup.controls?.numberOfDecimalPlaces?.touched &&\n          formGroup?.controls?.numberOfDecimalPlaces?.errors\n        \"\n      ></c8y-messages>\n    </form>\n  </div>\n\n  <div class=\"p-t-32 separator-top\">\n    <div class=\"d-col fit-h\">\n      <div class=\"form-group p-t-8 form-group-sm d-flex a-i-center m-b-8\">\n        <div class=\"d-flex a-i-center m-r-4\">\n          <label\n            class=\"m-b-0\"\n            translate\n          >\n            Date selection\n          </label>\n          <button\n            class=\"btn-help btn-help--sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            [popover]=\"dateSelectionHelpTemplate\"\n            placement=\"bottom\"\n            triggers=\"focus\"\n            container=\"body\"\n            [adaptivePosition]=\"false\"\n          ></button>\n        </div>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control input-sm\"\n            [ngModel]=\"dateSelection\"\n            (ngModelChange)=\"dateSelectionChange($event)\"\n            [ngModelOptions]=\"{ standalone: true }\"\n          >\n            <option\n              title=\"{{ 'Dashboard time range' | translate }}\"\n              [value]=\"DATE_SELECTION.DASHBOARD_CONTEXT\"\n            >\n              {{ 'Dashboard time range' | translate }}\n            </option>\n            <option\n              title=\"{{ 'Widget configuration' | translate }}\"\n              [value]=\"DATE_SELECTION.CONFIG\"\n            >\n              {{ 'Widget configuration' | translate }}\n            </option>\n          </select>\n          <span></span>\n        </div>\n      </div>\n      <label\n        class=\"text-12\"\n        *ngIf=\"dateSelection === DATE_SELECTION.CONFIG\"\n      >\n        {{ 'Options' | translate }}\n      </label>\n      <c8y-time-context\n        *ngIf=\"dateSelection === DATE_SELECTION.CONFIG\"\n        [changedDateContext]=\"timeProps\"\n        [controlsAvailable]=\"{\n          realtime: true,\n          timeRange: true,\n          interval: true,\n          aggregation: true\n        }\"\n        (contextChange)=\"timePropsChanged($event)\"\n      ></c8y-time-context>\n\n      <form\n        class=\"d-block p-t-16\"\n        [formGroup]=\"formGroup\"\n      >\n        <label>{{ 'Display options' | translate }}</label>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Axis' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Y-axis helper lines' | translate\"\n            >\n              <input\n                name=\"yAxisSplitLines\"\n                type=\"checkbox\"\n                formControlName=\"yAxisSplitLines\"\n              />\n              <span></span>\n              <span translate>Y-axis helper lines</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'X-axis helper lines' | translate\"\n            >\n              <input\n                name=\"xAxisSplitLines\"\n                type=\"checkbox\"\n                formControlName=\"xAxisSplitLines\"\n              />\n              <span></span>\n              <span translate>X-axis helper lines</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Merge matching data points into single axis' | translate\"\n            >\n              <input\n                name=\"mergeMatchingDatapoints\"\n                type=\"checkbox\"\n                formControlName=\"mergeMatchingDatapoints\"\n              />\n              <span></span>\n              <span translate>Merge matching data points into single axis</span>\n              <button\n                class=\"btn-dot m-l-8\"\n                [attr.aria-label]=\"\n                  'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-info\"\n                  c8yIcon=\"info\"\n                ></i>\n              </button>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Force merge all data points into single axis' | translate\"\n            >\n              <input\n                name=\"forceMergeDatapoints\"\n                type=\"checkbox\"\n                formControlName=\"forceMergeDatapoints\"\n              />\n              <span></span>\n              <span translate>Force merge all datapoints into a single axis</span>\n              <button\n                class=\"btn-dot m-l-8\"\n                [attr.aria-label]=\"\n                  'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\\'s recommended to use this option for data points with similar values.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\\'s recommended to use this option for data points with similar values.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-info\"\n                  c8yIcon=\"info\"\n                ></i>\n              </button>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Alarms & events' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show vertical line on every occurrence' | translate\"\n            >\n              <input\n                name=\"displayMarkedLine\"\n                type=\"checkbox\"\n                formControlName=\"displayMarkedLine\"\n              />\n              <span></span>\n              <span translate>Show vertical line on every occurrence</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show icon when triggered' | translate\"\n            >\n              <input\n                name=\"displayMarkedPoint\"\n                type=\"checkbox\"\n                formControlName=\"displayMarkedPoint\"\n              />\n              <span></span>\n              <span translate>Show icon when triggered</span>\n              <button\n                class=\"btn-clean m-l-8\"\n                [attr.aria-label]=\"\n                  'Some alarms or events have no matching data points. No icons will be shown for them.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Some alarms or events have no matching data points. No icons will be shown for them.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                *ngIf=\"alarmsOrEventsHaveNoMatchingDps\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <input\n                  name=\"yAxisSplitLines\"\n                  type=\"checkbox\"\n                  formControlName=\"yAxisSplitLines\"\n                />\n                <span></span>\n                <span translate>Y-axis helper lines</span>\n              </button>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'X-axis helper lines' | translate\"\n            >\n              <input\n                name=\"xAxisSplitLines\"\n                type=\"checkbox\"\n                formControlName=\"xAxisSplitLines\"\n              />\n              <span></span>\n              <span translate>X-axis helper lines</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Merge matching data points into single axis' | translate\"\n            >\n              <input\n                name=\"mergeMatchingDatapoints\"\n                type=\"checkbox\"\n                formControlName=\"mergeMatchingDatapoints\"\n              />\n              <span></span>\n              <span translate>Merge matching data points into single axis</span>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Alarms & events' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show vertical line on every occurrence' | translate\"\n            >\n              <input\n                name=\"displayMarkedLine\"\n                type=\"checkbox\"\n                formControlName=\"displayMarkedLine\"\n              />\n              <span></span>\n              <span translate>Show vertical line on every occurrence</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show icon when triggered' | translate\"\n            >\n              <input\n                name=\"displayMarkedPoint\"\n                type=\"checkbox\"\n                formControlName=\"displayMarkedPoint\"\n              />\n              <span></span>\n              <span translate>Show icon when triggered</span>\n              <button\n                class=\"btn-clean m-l-8\"\n                [attr.aria-label]=\"\n                  'Some alarms or events have no matching data points. No icons will be shown for them.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Some alarms or events have no matching data points. No icons will be shown for them.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                *ngIf=\"alarmsOrEventsHaveNoMatchingDps\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-warning\"\n                  c8yIcon=\"exclamation-triangle\"\n                ></i>\n              </button>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Chart' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Enable date selection in the widget view.' | translate\"\n            >\n              <input\n                name=\"displayDateSelection\"\n                type=\"checkbox\"\n                formControlName=\"displayDateSelection\"\n              />\n              <span></span>\n              <span translate>Date selection in the widget view.</span>\n              <button\n                class=\"btn-clean m-l-8\"\n                [attr.aria-label]=\"\n                  'Date selection in widget view is not possible when using dashboard time range.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Date selection in widget view is not possible when using dashboard time range.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                *ngIf=\"dateSelection === DATE_SELECTION.DASHBOARD_CONTEXT\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-info\"\n                  c8yIcon=\"info\"\n                ></i>\n              </button>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Aggregation selection' | translate\"\n            >\n              <input\n                name=\"displayAggregationSelection\"\n                type=\"checkbox\"\n                formControlName=\"displayAggregationSelection\"\n              />\n              <span></span>\n              <span translate>Aggregation selection</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show labels and units' | translate\"\n            >\n              <input\n                name=\"showLabelAndUnit\"\n                type=\"checkbox\"\n                formControlName=\"showLabelAndUnit\"\n              />\n              <span></span>\n              <span translate>Display labels and units on Y-axis</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show slider' | translate\"\n            >\n              <input\n                name=\"showSlider\"\n                type=\"checkbox\"\n                formControlName=\"showSlider\"\n              />\n              <span></span>\n              <span translate>Show slider</span>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n      </form>\n    </div>\n  </div>\n</div>\n\n<ng-template #dataPointsGraphPreview>\n  <c8y-charts\n    class=\"d-block p-relative\"\n    *ngIf=\"activeDatapointsExists\"\n    [config]=\"config\"\n    [alerts]=\"alerts\"\n    (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n    (configChangeOnZoomOut)=\"updateDashboardTimeContext($event)\"\n  ></c8y-charts>\n\n  <c8y-ui-empty-state\n    class=\"d-block m-t-24\"\n    [icon]=\"'search'\"\n    [title]=\"'No data points selected' | translate\"\n    [subtitle]=\"'Select data point to render chart' | translate\"\n    *ngIf=\"!activeDatapointsExists\"\n  ></c8y-ui-empty-state>\n</ng-template>\n\n<ng-template #dateSelectionHelpTemplate>\n  <div [innerHTML]=\"dateSelectionHelp\"></div>\n</ng-template>\n" }]
+                    ], providers: [ChartEventsService, ChartAlarmsService, ChartHelpersService], template: "<div class=\"no-card-context\">\n  <div class=\"conf-col\">\n    <form [formGroup]=\"formGroup\">\n      <c8y-datapoint-selection-list\n        class=\"separator-bottom d-block\"\n        name=\"datapoints\"\n        [minActiveCount]=\"1\"\n        [defaultFormOptions]=\"datapointSelectDefaultFormOptions\"\n        [config]=\"datapointSelectionConfig\"\n        formControlName=\"datapoints\"\n      ></c8y-datapoint-selection-list>\n\n      <c8y-alarm-event-selection-list\n        class=\"separator-bottom d-block\"\n        name=\"alarms\"\n        formControlName=\"alarms\"\n        [timelineType]=\"'ALARM'\"\n        [datapoints]=\"config?.datapoints\"\n      ></c8y-alarm-event-selection-list>\n\n      <c8y-alarm-event-selection-list\n        class=\"bg-inherit\"\n        name=\"events\"\n        formControlName=\"events\"\n        [timelineType]=\"'EVENT'\"\n        [datapoints]=\"config?.datapoints\"\n      ></c8y-alarm-event-selection-list>\n\n      <label\n        [title]=\"'Number of decimal places' | translate\"\n        translate\n      >\n        Number of decimal places\n      </label>\n      <input\n        class=\"form-control\"\n        name=\"numberOfDecimalPlaces\"\n        type=\"number\"\n        formControlName=\"numberOfDecimalPlaces\"\n        [placeholder]=\"'e.g. {{ example }}' | translate: { example: 1 }\"\n      />\n      <c8y-messages\n        [show]=\"\n          formGroup.controls?.numberOfDecimalPlaces?.touched &&\n          formGroup?.controls?.numberOfDecimalPlaces?.errors\n        \"\n      ></c8y-messages>\n    </form>\n  </div>\n\n  <div class=\"p-t-32 separator-top\">\n    <div class=\"d-col fit-h\">\n      <div class=\"form-group p-t-8 form-group-sm d-flex a-i-center m-b-8\">\n        <div class=\"d-flex a-i-center m-r-4\">\n          <label\n            class=\"m-b-0\"\n            translate\n          >\n            Date selection\n          </label>\n          <button\n            class=\"btn-help btn-help--sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            [popover]=\"dateSelectionHelpTemplate\"\n            placement=\"bottom\"\n            triggers=\"focus\"\n            container=\"body\"\n            [adaptivePosition]=\"false\"\n          ></button>\n        </div>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control input-sm\"\n            [ngModel]=\"dateSelection\"\n            (ngModelChange)=\"dateSelectionChange($event)\"\n            [ngModelOptions]=\"{ standalone: true }\"\n          >\n            <option\n              title=\"{{ 'Dashboard time range' | translate }}\"\n              [value]=\"DATE_SELECTION.DASHBOARD_CONTEXT\"\n            >\n              {{ 'Dashboard time range' | translate }}\n            </option>\n            <option\n              title=\"{{ 'Widget configuration' | translate }}\"\n              [value]=\"DATE_SELECTION.CONFIG\"\n            >\n              {{ 'Widget configuration' | translate }}\n            </option>\n          </select>\n          <span></span>\n        </div>\n      </div>\n      <label\n        class=\"text-12\"\n        *ngIf=\"dateSelection === DATE_SELECTION.CONFIG\"\n      >\n        {{ 'Options' | translate }}\n      </label>\n      <c8y-time-context\n        *ngIf=\"dateSelection === DATE_SELECTION.CONFIG\"\n        [changedDateContext]=\"timeProps\"\n        [controlsAvailable]=\"{\n          realtime: true,\n          timeRange: true,\n          interval: true,\n          aggregation: true\n        }\"\n        (contextChange)=\"timePropsChanged($event)\"\n      ></c8y-time-context>\n\n      <form\n        class=\"d-block p-t-16\"\n        [formGroup]=\"formGroup\"\n      >\n        <label>{{ 'Display options' | translate }}</label>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Axis' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Y-axis helper lines' | translate\"\n            >\n              <input\n                name=\"yAxisSplitLines\"\n                type=\"checkbox\"\n                formControlName=\"yAxisSplitLines\"\n              />\n              <span></span>\n              <span translate>Y-axis helper lines</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'X-axis helper lines' | translate\"\n            >\n              <input\n                name=\"xAxisSplitLines\"\n                type=\"checkbox\"\n                formControlName=\"xAxisSplitLines\"\n              />\n              <span></span>\n              <span translate>X-axis helper lines</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Merge matching data points into single axis' | translate\"\n            >\n              <input\n                name=\"mergeMatchingDatapoints\"\n                type=\"checkbox\"\n                formControlName=\"mergeMatchingDatapoints\"\n              />\n              <span></span>\n              <span translate>Merge matching data points into single axis</span>\n              <button\n                class=\"btn-dot m-l-8\"\n                [attr.aria-label]=\"\n                  'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-info\"\n                  c8yIcon=\"info\"\n                ></i>\n              </button>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Force merge all data points into single axis' | translate\"\n            >\n              <input\n                name=\"forceMergeDatapoints\"\n                type=\"checkbox\"\n                formControlName=\"forceMergeDatapoints\"\n              />\n              <span></span>\n              <span translate>Force merge all datapoints into a single axis</span>\n              <button\n                class=\"btn-dot m-l-8\"\n                [attr.aria-label]=\"\n                  'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\\'s recommended to use this option for data points with similar values.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\\'s recommended to use this option for data points with similar values.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-info\"\n                  c8yIcon=\"info\"\n                ></i>\n              </button>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Alarms & events' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show vertical line on every occurrence' | translate\"\n            >\n              <input\n                name=\"displayMarkedLine\"\n                type=\"checkbox\"\n                formControlName=\"displayMarkedLine\"\n              />\n              <span></span>\n              <span translate>Show vertical line on every occurrence</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show icon when triggered' | translate\"\n            >\n              <input\n                name=\"displayMarkedPoint\"\n                type=\"checkbox\"\n                formControlName=\"displayMarkedPoint\"\n              />\n              <span></span>\n              <span translate>Show icon when triggered</span>\n              <button\n                class=\"btn-clean m-l-8\"\n                [attr.aria-label]=\"\n                  'Some alarms or events have no matching data points. No icons will be shown for them.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Some alarms or events have no matching data points. No icons will be shown for them.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                *ngIf=\"alarmsOrEventsHaveNoMatchingDps\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-warning\"\n                  c8yIcon=\"exclamation-triangle\"\n                ></i>\n              </button>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Chart' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Enable date selection in the widget view.' | translate\"\n            >\n              <input\n                name=\"displayDateSelection\"\n                type=\"checkbox\"\n                formControlName=\"displayDateSelection\"\n              />\n              <span></span>\n              <span translate>Date selection in the widget view.</span>\n              <button\n                class=\"btn-clean m-l-8\"\n                [attr.aria-label]=\"\n                  'Date selection in widget view is not possible when using dashboard time range.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Date selection in widget view is not possible when using dashboard time range.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                *ngIf=\"dateSelection === DATE_SELECTION.DASHBOARD_CONTEXT\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-info\"\n                  c8yIcon=\"info\"\n                ></i>\n              </button>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Aggregation selection' | translate\"\n            >\n              <input\n                name=\"displayAggregationSelection\"\n                type=\"checkbox\"\n                formControlName=\"displayAggregationSelection\"\n              />\n              <span></span>\n              <span translate>Aggregation selection</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show labels and units' | translate\"\n            >\n              <input\n                name=\"showLabelAndUnit\"\n                type=\"checkbox\"\n                formControlName=\"showLabelAndUnit\"\n              />\n              <span></span>\n              <span translate>Display labels and units on Y-axis</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show slider' | translate\"\n            >\n              <input\n                name=\"showSlider\"\n                type=\"checkbox\"\n                formControlName=\"showSlider\"\n              />\n              <span></span>\n              <span translate>Show slider</span>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n      </form>\n    </div>\n  </div>\n</div>\n\n<ng-template #dataPointsGraphPreview>\n  <c8y-charts\n    class=\"d-block p-relative\"\n    *ngIf=\"activeDatapointsExists\"\n    [config]=\"config\"\n    [alerts]=\"alerts\"\n    (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n    (configChangeOnZoomOut)=\"updateDashboardTimeContext($event)\"\n  ></c8y-charts>\n\n  <c8y-ui-empty-state\n    class=\"d-block m-t-24\"\n    [icon]=\"'search'\"\n    [title]=\"'No data points selected' | translate\"\n    [subtitle]=\"'Select data point to render chart' | translate\"\n    *ngIf=\"!activeDatapointsExists\"\n  ></c8y-ui-empty-state>\n</ng-template>\n\n<ng-template #dateSelectionHelpTemplate>\n  <div [innerHTML]=\"dateSelectionHelp\"></div>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i1.WidgetConfigComponent, decorators: [{
                     type: Optional
                 }] }, { type: i1.ContextDashboardComponent, decorators: [{
@@ -343,7 +351,7 @@ class DatapointsGraphWidgetViewComponent {
             this.widgetTimeContextDateRangeService.updateInitialTimeRange(null);
         }
         if (timeProps.realtime !== this.displayConfig?.realtime ||
-            (timeProps.realtime === this.displayConfig?.realtime) === false) {
+            (!timeProps.realtime && !this.displayConfig?.realtime)) {
             const patchValues = {
                 dateFrom: new Date(timeProps.currentDateContextFromDate),
                 dateTo: new Date(timeProps.currentDateContextToDate),
@@ -472,7 +480,7 @@ class DatapointsGraphWidgetViewComponent {
         return form;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DatapointsGraphWidgetViewComponent, deps: [{ token: i4.FormBuilder }, { token: i2$1.TranslateService }, { token: i2.WidgetTimeContextDateRangeService }, { token: i1.ContextDashboardComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DatapointsGraphWidgetViewComponent, isStandalone: true, selector: "c8y-datapoints-graph-widget-view", inputs: { config: "config" }, providers: [ChartEventsService, ChartAlarmsService], viewQueries: [{ propertyName: "chartComponent", first: true, predicate: ChartsComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"p-l-16 p-r-16\">\n  <div class=\"d-flex gap-16 a-i-start\">\n    <div\n      class=\"btn-group btn-group-sm flex-no-shrink\"\n      *ngIf=\"\n        !displayConfig?.widgetInstanceGlobalTimeContext && displayConfig?.datapoints.length > 0 && displayConfig?.displayDateSelection || displayConfig?.displayAggregationSelection\n      \"\n    >\n      <button\n        class=\"btn btn-default\"\n        [attr.aria-label]=\"'Aggregation' | translate\"\n        tooltip=\"{{\n          (displayConfig?.aggregation\n            ? AGGREGATION_TEXTS[displayConfig.aggregation]\n            : AGGREGATION_TEXTS.undefined\n          ) | translate\n        }}\"\n        placement=\"top\"\n        container=\"body\"\n        type=\"button\"\n        [adaptivePosition]=\"false\"\n        [delay]=\"500\"\n      >\n        <i\n          class=\"icon-14\"\n          [c8yIcon]=\"\n            displayConfig?.aggregation\n              ? AGGREGATION_ICONS[displayConfig.aggregation]\n              : AGGREGATION_ICONS.undefined\n          \"\n        ></i>\n      </button>\n\n      <c8y-time-context\n        class=\"d-contents\"\n        (contextChange)=\"timePropsChanged($event)\"\n        [changedDateContext]=\"timeProps\"\n        [controlsAvailable]=\"{\n          realtime: true,\n          timeRange: displayConfig?.displayDateSelection,\n          interval: displayConfig?.displayDateSelection,\n          aggregation: displayConfig?.displayAggregationSelection\n        }\"\n      ></c8y-time-context>\n    </div>\n    <c8y-alarms-filter\n      class=\"d-contents form-group-sm\"\n      *ngIf=\"hasAtLeastOneAlarmActive\"\n      (filterApplied)=\"filterSeverity($event)\"\n    ></c8y-alarms-filter>\n\n    <div class=\"m-l-auto btn-group btn-group-sm flex-no-shrink\">\n      <button\n        class=\"btn btn-default\"\n        [attr.aria-label]=\"'Save as image' | translate\"\n        tooltip=\"{{ 'Save as image' | translate }}\"\n        container=\"body\"\n        type=\"button\"\n        (click)=\"chart.saveAsImage()\"\n        [adaptivePosition]=\"false\"\n      >\n        <i\n          class=\"icon-14\"\n          c8yIcon=\"image-file-checked\"\n        ></i>\n      </button>\n    </div>\n  </div>\n  <div\n    class=\"d-flex\"\n    style=\"align-items: center\"\n    *ngIf=\"displayConfig?.datapoints.length > 0\"\n  >\n    <button\n      class=\"btn-help btn-help--sm m-r-8\"\n      [attr.aria-label]=\"'Help' | translate\"\n      [popover]=\"legendHelpTemplate\"\n      placement=\"bottom\"\n      triggers=\"focus\"\n      container=\"body\"\n      [adaptivePosition]=\"false\"\n    ></button>\n    <div class=\"inner-scroll\">\n      <div class=\"flex-grow p-t-8 d-flex a-i-start gap-8 p-b-4\">\n        <div\n          class=\"c8y-datapoint-pill flex-no-shrink\"\n          title=\"{{ datapoint.label }} - {{ datapoint.__target.name }}\"\n          *ngFor=\"let datapoint of displayConfig.datapoints\"\n          [ngClass]=\"{ active: datapoint.__active }\"\n        >\n          <i\n            class=\"text-warning m-l-4\"\n            c8yIcon=\"exclamation-triangle\"\n            [tooltip]=\"'At least 1 data point must be active.' | translate\"\n            container=\"body\"\n            *ngIf=\"!hasAtLeastOneDatapointActive && datapoint.__active\"\n            [adaptivePosition]=\"false\"\n          ></i>\n          <button\n            class=\"c8y-datapoint-pill__btn\"\n            title=\"{{\n              (datapoint.__active ? hideDatapointLabel : showDatapointLabel) | translate\n            }} \"\n            type=\"button\"\n            (click)=\"toggleChart(datapoint)\"\n          >\n            <i\n              class=\"icon-14\"\n              [c8yIcon]=\"datapoint.__active ? 'eye text-primary' : 'eye-slash text-muted'\"\n            ></i>\n          </button>\n          <div class=\"c8y-datapoint-pill__label c8y-datapoint-pill__btn\">\n            <i\n              class=\"m-r-4 icon-14\"\n              c8yIcon=\"circle\"\n              [ngStyle]=\"{\n                color: datapoint.color\n              }\"\n            ></i>\n            <span\n              class=\"text-truncate\"\n              [ngClass]=\"{ 'text-muted': !datapoint.__active }\"\n            >\n              <span class=\"text-truncate\">\n                {{ datapoint.label }}\n              </span>\n              <small class=\"text-muted text-10\">\n                {{ datapoint.__target.name }}\n              </small>\n            </span>\n            <i\n              class=\"text-warning m-l-4\"\n              c8yIcon=\"exclamation-triangle\"\n              [tooltip]=\"\n                'Measurements received for this data point may be out of sync.' | translate\n              \"\n              container=\"body\"\n              *ngIf=\"datapointsOutOfSync.get(datapoint)\"\n              [adaptivePosition]=\"false\"\n            ></i>\n          </div>\n        </div>\n        <!-- Alarms  -->\n\n        <ng-container *ngFor=\"let alarm of alarms\">\n          <div\n            class=\"c8y-alarm-pill flex-no-shrink\"\n            title=\"{{ alarm.filters.type }} \"\n            *ngIf=\"alarm.__active\"\n          >\n            <i\n              class=\"text-warning m-l-4\"\n              c8yIcon=\"exclamation-triangle\"\n              [tooltip]=\"\n                'Alarm of this type is currently active and outside of the selected time range'\n                  | translate\n              \"\n              container=\"body\"\n              *ngIf=\"displayConfig?.activeAlarmTypesOutOfRange?.includes(alarm.filters.type)\"\n              [adaptivePosition]=\"false\"\n            ></i>\n            <button\n              class=\"c8y-alarm-pill__btn\"\n              title=\"{{ alarm.filters.type }} \"\n              type=\"button\"\n              (click)=\"toggleAlarmEventType(alarm)\"\n            >\n              <i\n                class=\"icon-14\"\n                [c8yIcon]=\"alarm.__hidden ? 'eye-slash text-muted' : 'eye text-primary'\"\n              ></i>\n            </button>\n            <button\n              class=\"c8y-alarm-pill__label c8y-alarm-pill__btn\"\n              (click)=\"toggleMarkedArea(alarm)\"\n              [ngClass]=\"{\n                active: !isMarkedAreaEnabled && alarm.filters.type === enabledMarkedAreaAlarmType\n              }\"\n            >\n              <span\n                class=\"circle-icon-wrapper circle-icon-wrapper--small m-r-4\"\n                [style.background-color]=\"alarm.color\"\n              >\n                <i\n                  class=\"stroked-icon\"\n                  c8yIcon=\"bell\"\n                ></i>\n              </span>\n              <span\n                class=\"text-truncate\"\n                [ngClass]=\"{ 'text-muted': alarm.__hidden }\"\n              >\n                <span class=\"text-truncate\">\n                  {{ alarm.filters.type }}\n                </span>\n                <small class=\"text-muted text-10\">\n                  {{ alarm.__target.name }}\n                </small>\n              </span>\n            </button>\n          </div>\n        </ng-container>\n\n        <!-- Events -->\n        <ng-container *ngFor=\"let event of events\">\n          <div\n            class=\"c8y-event-pill flex-no-shrink\"\n            title=\"{{ event.filters.type }}\"\n            *ngIf=\"event.__active\"\n          >\n            <button\n              class=\"c8y-event-pill__btn\"\n              title=\"{{ event.filters.type }} \"\n              type=\"button\"\n              (click)=\"toggleAlarmEventType(event)\"\n            >\n              <i\n                class=\"icon-14\"\n                [c8yIcon]=\"event.__hidden ? 'eye-slash text-muted' : 'eye text-primary'\"\n              ></i>\n            </button>\n            <div class=\"c8y-event-pill__label c8y-event-pill__btn\">\n              <span\n                class=\"circle-icon-wrapper circle-icon-wrapper--small m-r-4\"\n                [ngStyle]=\"{ 'background-color': event.color }\"\n              >\n                <i\n                  class=\"stroked-icon\"\n                  c8yIcon=\"online1\"\n                ></i>\n              </span>\n              <span\n                class=\"text-truncate\"\n                [ngClass]=\"{ 'text-muted': event.__hidden }\"\n              >\n                <span class=\"text-truncate\">\n                  {{ event.filters.type }}\n                </span>\n                <small class=\"text-muted text-10\">\n                  {{ event.__target.name }}\n                </small>\n              </span>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n\n<c8y-charts\n  #chart\n  [config]=\"displayConfig\"\n  [alerts]=\"alerts\"\n  (updateAlarmsAndEvents)=\"updateAlarmsAndEvents($event)\"\n  (configChangeOnZoomOut)=\"updateDashboardTimeContext($event)\"\n  (datapointOutOfSync)=\"handleDatapointOutOfSync($event)\"\n  (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n  (isMarkedAreaEnabled)=\"isMarkedAreaEnabled = $event\"\n></c8y-charts>\n\n<ng-template #legendHelpTemplate>\n  <div [innerHTML]=\"legendHelp\"></div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "ngmodule", type: CommonModule$1 }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ChartsComponent, selector: "c8y-charts", inputs: ["config", "alerts"], outputs: ["configChangeOnZoomOut", "timeRangeChangeOnRealtime", "datapointOutOfSync", "updateAlarmsAndEvents", "isMarkedAreaEnabled"] }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i6.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "ngmodule", type: AlarmsModule }, { kind: "component", type: i8$1.AlarmsFilterComponent, selector: "c8y-alarms-filter", inputs: ["contextSourceId"], outputs: ["onFilterApplied"] }, { kind: "component", type: TimeContextComponent, selector: "c8y-time-context", inputs: ["changedDateContext", "controlsAvailable", "context"], outputs: ["contextChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DatapointsGraphWidgetViewComponent, isStandalone: true, selector: "c8y-datapoints-graph-widget-view", inputs: { config: "config" }, providers: [ChartEventsService, ChartAlarmsService], viewQueries: [{ propertyName: "chartComponent", first: true, predicate: ChartsComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"p-l-16 p-r-16\">\n  <div class=\"d-flex gap-16 a-i-start\">\n    <div\n      class=\"btn-group btn-group-sm flex-no-shrink\"\n      *ngIf=\"\n        !displayConfig?.widgetInstanceGlobalTimeContext && displayConfig?.datapoints.length > 0 && displayConfig?.displayDateSelection || displayConfig?.displayAggregationSelection\n      \"\n    >\n      <button\n        class=\"btn btn-default\"\n        [attr.aria-label]=\"'Aggregation' | translate\"\n        tooltip=\"{{\n          (displayConfig?.aggregation\n            ? AGGREGATION_TEXTS[displayConfig.aggregation]\n            : AGGREGATION_TEXTS.undefined\n          ) | translate\n        }}\"\n        placement=\"top\"\n        container=\"body\"\n        type=\"button\"\n        [adaptivePosition]=\"false\"\n        [delay]=\"500\"\n      >\n        <i\n          class=\"icon-14\"\n          [c8yIcon]=\"\n            displayConfig?.aggregation\n              ? AGGREGATION_ICONS[displayConfig.aggregation]\n              : AGGREGATION_ICONS.undefined\n          \"\n        ></i>\n      </button>\n\n      <c8y-time-context\n        class=\"d-contents\"\n        (contextChange)=\"timePropsChanged($event)\"\n        [changedDateContext]=\"timeProps\"\n        [controlsAvailable]=\"{\n          realtime: true,\n          timeRange: displayConfig?.displayDateSelection,\n          interval: displayConfig?.displayDateSelection,\n          aggregation: displayConfig?.displayAggregationSelection\n        }\"\n      ></c8y-time-context>\n    </div>\n    <c8y-alarms-filter\n      class=\"d-contents form-group-sm\"\n      *ngIf=\"hasAtLeastOneAlarmActive\"\n      (filterApplied)=\"filterSeverity($event)\"\n    ></c8y-alarms-filter>\n\n    <div class=\"m-l-auto btn-group btn-group-sm flex-no-shrink\">\n      <button\n        class=\"btn btn-default\"\n        [attr.aria-label]=\"'Save as image' | translate\"\n        tooltip=\"{{ 'Save as image' | translate }}\"\n        container=\"body\"\n        type=\"button\"\n        (click)=\"chart.saveAsImage()\"\n        [adaptivePosition]=\"false\"\n      >\n        <i\n          class=\"icon-14\"\n          c8yIcon=\"image-file-checked\"\n        ></i>\n      </button>\n    </div>\n  </div>\n  <div\n    class=\"d-flex\"\n    style=\"align-items: center\"\n    *ngIf=\"displayConfig?.datapoints.length > 0\"\n  >\n    <button\n      class=\"btn-help btn-help--sm m-r-8\"\n      [attr.aria-label]=\"'Help' | translate\"\n      [popover]=\"legendHelpTemplate\"\n      placement=\"bottom\"\n      triggers=\"focus\"\n      container=\"body\"\n      [adaptivePosition]=\"false\"\n    ></button>\n    <div class=\"inner-scroll\">\n      <div class=\"flex-grow p-t-8 d-flex a-i-start gap-8 p-b-4\">\n        <div\n          class=\"c8y-datapoint-pill flex-no-shrink\"\n          title=\"{{ datapoint.label }} - {{ datapoint.__target.name }}\"\n          *ngFor=\"let datapoint of displayConfig.datapoints\"\n          [ngClass]=\"{ active: datapoint.__active }\"\n        >\n          <i\n            class=\"text-warning m-l-4\"\n            c8yIcon=\"exclamation-triangle\"\n            [tooltip]=\"'At least 1 data point must be active.' | translate\"\n            container=\"body\"\n            *ngIf=\"!hasAtLeastOneDatapointActive && datapoint.__active\"\n            [adaptivePosition]=\"false\"\n          ></i>\n          <button\n            class=\"c8y-datapoint-pill__btn\"\n            title=\"{{\n              (datapoint.__active ? hideDatapointLabel : showDatapointLabel) | translate\n            }} \"\n            type=\"button\"\n            (click)=\"toggleChart(datapoint)\"\n          >\n            <i\n              class=\"icon-14\"\n              [c8yIcon]=\"datapoint.__active ? 'eye text-primary' : 'eye-slash text-muted'\"\n            ></i>\n          </button>\n          <div class=\"c8y-datapoint-pill__label c8y-datapoint-pill__btn\">\n            <i\n              class=\"m-r-4 icon-14\"\n              c8yIcon=\"circle\"\n              [ngStyle]=\"{\n                color: datapoint.color\n              }\"\n            ></i>\n            <span\n              class=\"text-truncate\"\n              [ngClass]=\"{ 'text-muted': !datapoint.__active }\"\n            >\n              <span class=\"text-truncate\">\n                {{ datapoint.label }}\n              </span>\n              <small class=\"text-muted text-10\">\n                {{ datapoint.__target.name }}\n              </small>\n            </span>\n            <i\n              class=\"text-warning m-l-4\"\n              c8yIcon=\"exclamation-triangle\"\n              [tooltip]=\"\n                'Measurements received for this data point may be out of sync.' | translate\n              \"\n              container=\"body\"\n              *ngIf=\"datapointsOutOfSync.get(datapoint)\"\n              [adaptivePosition]=\"false\"\n            ></i>\n          </div>\n        </div>\n        <!-- Alarms  -->\n\n        <ng-container *ngFor=\"let alarm of alarms\">\n          <div\n            class=\"c8y-alarm-pill flex-no-shrink\"\n            title=\"{{ alarm.filters.type }} \"\n            *ngIf=\"alarm.__active\"\n          >\n            <i\n              class=\"text-warning m-l-4\"\n              c8yIcon=\"exclamation-triangle\"\n              [tooltip]=\"\n                'Alarm of this type is currently active and outside of the selected time range'\n                  | translate\n              \"\n              container=\"body\"\n              *ngIf=\"displayConfig?.activeAlarmTypesOutOfRange?.includes(alarm.filters.type)\"\n              [adaptivePosition]=\"false\"\n            ></i>\n            <button\n              class=\"c8y-alarm-pill__btn\"\n              title=\"{{ alarm.filters.type }} \"\n              type=\"button\"\n              (click)=\"toggleAlarmEventType(alarm)\"\n            >\n              <i\n                class=\"icon-14\"\n                [c8yIcon]=\"alarm.__hidden ? 'eye-slash text-muted' : 'eye text-primary'\"\n              ></i>\n            </button>\n            <button\n              class=\"c8y-alarm-pill__label c8y-alarm-pill__btn\"\n              (click)=\"toggleMarkedArea(alarm)\"\n              [ngClass]=\"{\n                active: !isMarkedAreaEnabled && alarm.filters.type === enabledMarkedAreaAlarmType\n              }\"\n            >\n              <span\n                class=\"circle-icon-wrapper circle-icon-wrapper--small m-r-4\"\n                [style.background-color]=\"alarm.color\"\n              >\n                <i\n                  class=\"stroked-icon\"\n                  c8yIcon=\"bell\"\n                ></i>\n              </span>\n              <span\n                class=\"text-truncate\"\n                [ngClass]=\"{ 'text-muted': alarm.__hidden }\"\n              >\n                <span class=\"text-truncate\">\n                  {{ alarm.filters.type }}\n                </span>\n                <small class=\"text-muted text-10\">\n                  {{ alarm.__target.name }}\n                </small>\n              </span>\n            </button>\n          </div>\n        </ng-container>\n\n        <!-- Events -->\n        <ng-container *ngFor=\"let event of events\">\n          <div\n            class=\"c8y-event-pill flex-no-shrink\"\n            title=\"{{ event.filters.type }}\"\n            *ngIf=\"event.__active\"\n          >\n            <button\n              class=\"c8y-event-pill__btn\"\n              title=\"{{ event.filters.type }} \"\n              type=\"button\"\n              (click)=\"toggleAlarmEventType(event)\"\n            >\n              <i\n                class=\"icon-14\"\n                [c8yIcon]=\"event.__hidden ? 'eye-slash text-muted' : 'eye text-primary'\"\n              ></i>\n            </button>\n            <div class=\"c8y-event-pill__label c8y-event-pill__btn\">\n              <span\n                class=\"circle-icon-wrapper circle-icon-wrapper--small m-r-4\"\n                [ngStyle]=\"{ 'background-color': event.color }\"\n              >\n                <i\n                  class=\"stroked-icon\"\n                  c8yIcon=\"online1\"\n                ></i>\n              </span>\n              <span\n                class=\"text-truncate\"\n                [ngClass]=\"{ 'text-muted': event.__hidden }\"\n              >\n                <span class=\"text-truncate\">\n                  {{ event.filters.type }}\n                </span>\n                <small class=\"text-muted text-10\">\n                  {{ event.__target.name }}\n                </small>\n              </span>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n\n<c8y-charts\n  #chart\n  [config]=\"displayConfig\"\n  [alerts]=\"alerts\"\n  (updateAlarmsAndEvents)=\"updateAlarmsAndEvents($event)\"\n  (configChangeOnZoomOut)=\"updateDashboardTimeContext($event)\"\n  (datapointOutOfSync)=\"handleDatapointOutOfSync($event)\"\n  (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n  (isMarkedAreaEnabled)=\"isMarkedAreaEnabled = $event\"\n></c8y-charts>\n\n<ng-template #legendHelpTemplate>\n  <div [innerHTML]=\"legendHelp\"></div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "ngmodule", type: CommonModule$1 }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ChartsComponent, selector: "c8y-charts", inputs: ["config", "alerts"], outputs: ["configChangeOnZoomOut", "timeRangeChangeOnRealtime", "datapointOutOfSync", "updateAlarmsAndEvents", "isMarkedAreaEnabled"] }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i6.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "ngmodule", type: AlarmsModule }, { kind: "component", type: i8$1.AlarmsFilterComponent, selector: "c8y-alarms-filter", inputs: ["contextSourceId"], outputs: ["onFilterApplied"] }, { kind: "component", type: TimeContextComponent, selector: "c8y-time-context", inputs: ["changedDateContext", "controlsAvailable", "timeContext", "context"], outputs: ["contextChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DatapointsGraphWidgetViewComponent, decorators: [{
             type: Component,