@c8y/ngx-components 1023.59.1 → 1023.61.2

package/fesm2022/c8y-ngx-components-widgets-implementations-image.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"c8y-ngx-components-widgets-implementations-image.mjs","sources":["../../widgets/implementations/image/image-widget.model.ts","../../widgets/implementations/image/image-widget.service.ts","../../widgets/implementations/image/image-widget-config/image-widget-config.component.ts","../../widgets/implementations/image/image-widget-config/image-widget-config.component.html","../../widgets/implementations/image/image-widget-view/image-widget-view.component.ts","../../widgets/implementations/image/image-widget-view/image-widget-view.component.html","../../widgets/implementations/image/c8y-ngx-components-widgets-implementations-image.ts"],"sourcesContent":["export interface ImageWidgetConfig {\n  imageBinaryId: string;\n  styling?: ImageWidgetConfigStyling;\n}\n\nexport interface ImageWidgetConfigStyling {\n  objectFit: string;\n  objectPositionX: string;\n  objectPositionY: string;\n}\n\nexport interface ImageWidgetStyle {\n  [key: string]: string;\n}\n\nexport const defaultObjectFitValue = 'contain';\nexport const defaultObjectPositionValue = 'center';\n","import { Injectable } from '@angular/core';\nimport {\n  IManagedObject,\n  IManagedObjectBinary,\n  InventoryService,\n  InventoryBinaryService\n} from '@c8y/client';\nimport { gettext } from '@c8y/ngx-components/gettext';\nimport { AlertService, FilesService } from '@c8y/ngx-components';\nimport { TranslateService } from '@ngx-translate/core';\nimport {\n  defaultObjectPositionValue,\n  ImageWidgetConfig,\n  ImageWidgetStyle\n} from './image-widget.model';\n\n@Injectable({ providedIn: 'root' })\nexport class ImageWidgetService {\n  constructor(\n    private inventory: InventoryService,\n    private fileService: FilesService,\n    private alert: AlertService,\n    private translate: TranslateService,\n    private binary: InventoryBinaryService\n  ) {}\n\n  async getImageDetails(\n    imageBinaryId: string | null\n  ): Promise<{ file: File; base64: string; c8y_SHA256: string }> {\n    if (!imageBinaryId) {\n      return null;\n    }\n\n    try {\n      const { data: imageBinaryMo } = await this.inventory.detail(imageBinaryId);\n      const file = await this.fileService.getFile(imageBinaryMo as IManagedObjectBinary);\n      const base64 = await this.fileService.toBase64(file);\n      return {\n        file,\n        base64: base64 as string,\n        c8y_SHA256: imageBinaryMo.c8y_SHA256\n      };\n    } catch (e) {\n      const text = this.translate.instant(\n        gettext('Unable to retrieve image with id: {{ imageBinaryId }}'),\n        { imageBinaryId }\n      );\n      this.alert.danger(text, e?.data);\n    }\n\n    return null;\n  }\n\n  async uploadFile(\n    file: File,\n    options: {\n      dashboardMoId?: string;\n      isDeviceTypeDashboard?: boolean;\n    } = {}\n  ): Promise<string> {\n    const hash = await this.fileService.getHashSumOfFile(file);\n    const fileDetails = { c8y_SHA256: hash };\n    const globalImage = !options?.dashboardMoId || options?.isDeviceTypeDashboard;\n    const partialBinaryMo: Partial<IManagedObject> = !globalImage\n      ? { ...fileDetails }\n      : { ...fileDetails, c8y_Global: {} };\n    const { data: mo } = await this.binary.create(file, partialBinaryMo);\n    if (options?.dashboardMoId) {\n      await this.inventory.childAdditionsAdd(mo, options?.dashboardMoId);\n    }\n    return mo.id;\n  }\n\n  getStyling(config: ImageWidgetConfig): ImageWidgetStyle | null {\n    if (!config.styling?.objectFit || config.styling?.objectFit === 'full-width') {\n      return null;\n    }\n    return {\n      'object-fit': config.styling.objectFit,\n      'object-position': `${config.styling?.objectPositionX || defaultObjectPositionValue} ${\n        config.styling?.objectPositionY || defaultObjectPositionValue\n      }`\n    };\n  }\n}\n","import { AsyncPipe, NgClass, NgForOf, NgIf, NgStyle } from '@angular/common';\nimport {\n  AfterViewInit,\n  Component,\n  Input,\n  OnDestroy,\n  OnInit,\n  Optional,\n  QueryList,\n  TemplateRef,\n  ViewChildren\n} from '@angular/core';\nimport {\n  ControlContainer,\n  FormBuilder,\n  FormGroup,\n  NgForm,\n  ReactiveFormsModule,\n  Validators\n} from '@angular/forms';\nimport { gettext } from '@c8y/ngx-components/gettext';\nimport {\n  AlertService,\n  C8yTranslatePipe,\n  C8yValidators,\n  DropAreaComponent,\n  FilesService,\n  FormGroupComponent,\n  LoadingComponent,\n  MessageDirective,\n  MessagesComponent,\n  OnBeforeSave\n} from '@c8y/ngx-components';\nimport { WidgetConfigComponent, WidgetConfigService } from '@c8y/ngx-components/context-dashboard';\nimport { get } from 'lodash-es';\nimport { BehaviorSubject, merge, Observable, Subject } from 'rxjs';\nimport {\n  distinctUntilChanged,\n  filter,\n  map,\n  shareReplay,\n  switchMap,\n  takeUntil,\n  tap\n} from 'rxjs/operators';\nimport {\n  defaultObjectFitValue,\n  defaultObjectPositionValue,\n  ImageWidgetConfig,\n  ImageWidgetConfigStyling,\n  ImageWidgetStyle\n} from '../image-widget.model';\nimport { ImageWidgetService } from '../image-widget.service';\n\n@Component({\n  selector: 'c8y-image-widget-config',\n  templateUrl: './image-widget-config.component.html',\n  viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],\n  standalone: true,\n  imports: [\n    ReactiveFormsModule,\n    FormGroupComponent,\n    MessagesComponent,\n    MessageDirective,\n    C8yTranslatePipe,\n    AsyncPipe,\n    NgIf,\n    NgStyle,\n    NgClass,\n    NgForOf,\n    DropAreaComponent,\n    LoadingComponent\n  ]\n})\nexport class ImageWidgetConfigComponent implements OnInit, OnDestroy, OnBeforeSave, AfterViewInit {\n  @Input() config: ImageWidgetConfig;\n  imageBinaryId$ = new BehaviorSubject<string>(null);\n  imageSrc$: Observable<string>;\n  loading = false;\n  formGroup: FormGroup;\n  fileFromConfig: File;\n  styling: ImageWidgetStyle | null;\n  destroyed$ = new Subject<void>();\n  objectFitOptions = [\n    {\n      label: gettext('Contain`verb, image fitting option`'),\n      value: 'contain',\n      description: gettext(\n        'The image is entirely displayed within the widget while preserving the aspect ratio.'\n      )\n    },\n    {\n      label: gettext('Cover`verb, image fitting option`'),\n      value: 'cover',\n      description: gettext(\n        'The image is resized to fill the widget while preserving the aspect ratio. Overflowing areas are clipped.'\n      )\n    },\n    {\n      label: gettext('Fill`verb, image fitting option`'),\n      value: 'fill',\n      description: gettext(\n        'The image is stretched to fill the widget, overriding the aspect-ratio.'\n      )\n    },\n    {\n      label: gettext('Full width`image fitting option`'),\n      value: 'full-width',\n      description: gettext(\n        `The image is resized to fit the widget's width while preserving the aspect ratio. Overflowing area is scrollable.`\n      )\n    }\n  ];\n\n  @ViewChildren('imagePreview') imagePreviewTemplate!: QueryList<TemplateRef<any>>;\n\n  constructor(\n    private formBuilder: FormBuilder,\n    private form: NgForm,\n    private fileService: FilesService,\n    private alert: AlertService,\n    private imageWidget: ImageWidgetService,\n    @Optional() private widgetConfig: WidgetConfigComponent,\n    private widgetConfigService: WidgetConfigService\n  ) {}\n\n  async onBeforeSave(config?: ImageWidgetConfig): Promise<boolean> {\n    if (this.formGroup.invalid) {\n      return false;\n    }\n\n    const fileFromForm = this.getFileFromFormValue(this.formGroup.value);\n    if (fileFromForm && fileFromForm !== this.fileFromConfig) {\n      try {\n        const imageBinaryId = await this.imageWidget.uploadFile(fileFromForm, {\n          dashboardMoId: this.getDashboardMoId(),\n          isDeviceTypeDashboard: this.widgetConfig?.isDeviceTypeDashboard\n        });\n        Object.assign(config, { imageBinaryId });\n      } catch (e) {\n        this.alert.danger(gettext('Unable to upload image.'), e?.data);\n        return false;\n      }\n    }\n    const styling: ImageWidgetConfigStyling = this.formGroup.value.styling;\n    Object.assign(config, { styling });\n\n    return true;\n  }\n\n  ngOnInit() {\n    this.initForm();\n    const imageFromConfig = this.imageBinaryId$.pipe(\n      filter(id => !!id),\n      distinctUntilChanged(),\n      tap(() => (this.loading = true)),\n      switchMap(imageBinaryId => this.imageWidget.getImageDetails(imageBinaryId)),\n      tap(details => {\n        this.loading = false;\n        this.fileFromConfig = details.file;\n        if (details) {\n          this.formGroup.patchValue({ images: [{ file: details.file, name: details.file.name }] });\n        }\n      }),\n      map(details => details?.base64),\n      shareReplay(1)\n    );\n    const selectedFile = this.formGroup.valueChanges.pipe(\n      map(value => this.getFileFromFormValue(value)),\n      distinctUntilChanged(),\n      switchMap(file => (file ? this.fileService.toBase64(file) : Promise.resolve('')))\n    );\n    this.imageSrc$ = merge(imageFromConfig, selectedFile).pipe(\n      map(base64 => (base64 ? (base64 as string) : ''))\n    );\n    this.imageBinaryId$.next(this.config?.imageBinaryId);\n  }\n\n  ngAfterViewInit(): void {\n    this.imagePreviewTemplate.changes.pipe(takeUntil(this.destroyed$)).subscribe(template => {\n      this.widgetConfigService.setPreview(template.first);\n    });\n  }\n\n  ngOnDestroy(): void {\n    this.destroyed$.next();\n    this.destroyed$.complete();\n  }\n\n  private getDashboardMoId(): string | null {\n    return get(this.widgetConfig, 'mo.id', null);\n  }\n\n  private async initForm(): Promise<void> {\n    const stylingFormGroup = this.formBuilder.group({\n      objectFit: [\n        // fallback to 'full-width' for old legacy widgets, newly created widgets should use defaultObjectFitValue\n        this.config.imageBinaryId && !this.config.styling ? 'full-width' : defaultObjectFitValue,\n        [Validators.required]\n      ],\n      objectPositionX: [defaultObjectPositionValue, [Validators.required]],\n      objectPositionY: [defaultObjectPositionValue, [Validators.required]]\n    });\n    this.formGroup = this.formBuilder.group({\n      images: [\n        null,\n        [\n          Validators.required,\n          Validators.minLength(1),\n          Validators.maxLength(1),\n          C8yValidators.filesValidator({ maximumFileSizeInKb: 1000, typePrefix: 'image/' })\n        ]\n      ],\n      styling: stylingFormGroup\n    });\n    this.form.form.addControl('config', this.formGroup);\n    this.formGroup.patchValue(this.config);\n    this.formGroup.valueChanges\n      .pipe(takeUntil(this.destroyed$))\n      .subscribe(changes => this.setStyling(changes));\n  }\n\n  private getFileFromFormValue(formValue: any): File | null {\n    const images: any[] = formValue?.images || [];\n    return images[0]?.file || null;\n  }\n\n  private setStyling(config: ImageWidgetConfig): void {\n    this.styling = this.imageWidget.getStyling(config);\n  }\n}\n","<div [formGroup]=\"formGroup\">\n  <fieldset class=\"c8y-fieldset\">\n    <legend>{{ 'Image' | translate }}</legend>\n    <c8y-form-group class=\"m-b-16\">\n      <c8y-drop-area\n        class=\"drop-area-sm\"\n        [icon]=\"'upload'\"\n        formControlName=\"images\"\n        [accept]=\"'image'\"\n        [maxAllowedFiles]=\"1\"\n      ></c8y-drop-area>\n      <c8y-messages>\n        <c8y-message\n          name=\"maxFileSizeReached\"\n          [text]=\"\n            'The maximum image size is {{ maxFileSize }} kB. The selected image has a size of {{ actualFileSize }} kB.'\n              | translate\n          \"\n        ></c8y-message>\n        <c8y-message\n          name=\"wrongFileType\"\n          [text]=\"'Wrong file type, select an image.' | translate\"\n        ></c8y-message>\n        <c8y-message\n          name=\"maxlength\"\n          [text]=\"'Only select one image.' | translate\"\n        ></c8y-message>\n        <c8y-message\n          name=\"required\"\n          [text]=\"'An image is required.' | translate\"\n        ></c8y-message>\n        <c8y-message\n          name=\"minlength\"\n          [text]=\"'An image is required.' | translate\"\n        ></c8y-message>\n      </c8y-messages>\n    </c8y-form-group>\n  </fieldset>\n\n  <div *ngIf=\"imageSrc$ | async as src\">\n    <fieldset class=\"c8y-fieldset\">\n      <legend>\n        {{ 'Size and alignment' | translate }}\n      </legend>\n      <div [formGroupName]=\"'styling'\">\n        <c8y-form-group class=\"form-group-sm m-b-0\">\n          <label class=\"m-b-4\">\n            {{ 'Image display' | translate }}\n          </label>\n          <ul class=\"list-group separator-top-bottom\">\n            <li\n              class=\"list-group-item d-flex a-i-center p-l-0\"\n              *ngFor=\"let objectFitOption of objectFitOptions; let i = index\"\n            >\n              <label class=\"c8y-radio\">\n                <input\n                  type=\"radio\"\n                  [id]=\"'groupradiocontentclass' + i\"\n                  formControlName=\"objectFit\"\n                  [value]=\"objectFitOption.value\"\n                />\n                <span></span>\n                <span class=\"l-h-1\">\n                  {{ objectFitOption.label | translate }}\n                  <br />\n                  <small class=\"text-muted\">\n                    {{ objectFitOption.description | translate }}\n                  </small>\n                </span>\n              </label>\n            </li>\n          </ul>\n        </c8y-form-group>\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <c8y-form-group class=\"form-group-sm\">\n              <label>{{ 'Horizontal alignment' | translate }}</label>\n              <div class=\"c8y-select-wrapper\">\n                <select\n                  class=\"form-control\"\n                  formControlName=\"objectPositionX\"\n                >\n                  <option [ngValue]=\"'left'\">\n                    {{ 'left`horizontal alignment`' | translate }}\n                  </option>\n                  <option [ngValue]=\"'center'\">\n                    {{ 'center`horizontal alignment`' | translate }}\n                  </option>\n                  <option [ngValue]=\"'right'\">\n                    {{ 'right`horizontal alignment`' | translate }}\n                  </option>\n                </select>\n              </div>\n            </c8y-form-group>\n          </div>\n          <div class=\"col-md-6\">\n            <c8y-form-group class=\"form-group-sm\">\n              <label>{{ 'Vertical alignment' | translate }}</label>\n              <div class=\"c8y-select-wrapper\">\n                <select\n                  class=\"form-control\"\n                  formControlName=\"objectPositionY\"\n                >\n                  <option [ngValue]=\"'top'\">\n                    {{ 'top`vertical alignment`' | translate }}\n                  </option>\n                  <option [ngValue]=\"'center'\">\n                    {{ 'center`vertical alignment`' | translate }}\n                  </option>\n                  <option [ngValue]=\"'bottom'\">\n                    {{ 'bottom`vertical alignment`' | translate }}\n                  </option>\n                </select>\n              </div>\n            </c8y-form-group>\n          </div>\n        </div>\n      </div>\n    </fieldset>\n    <ng-template #imagePreview>\n      <img\n        [ngStyle]=\"styling\"\n        [src]=\"src\"\n        [ngClass]=\"styling ? 'fit-h fit-w' : 'img-responsive'\"\n      />\n    </ng-template>\n  </div>\n  <div\n    class=\"d-flex j-c-center\"\n    *ngIf=\"loading\"\n  >\n    <c8y-loading></c8y-loading>\n  </div>\n</div>\n","import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';\nimport { BehaviorSubject, Observable } from 'rxjs';\nimport { distinctUntilChanged, shareReplay, switchMap, tap } from 'rxjs/operators';\nimport { ImageWidgetConfig, ImageWidgetStyle } from '../image-widget.model';\nimport { ImageWidgetService } from '../image-widget.service';\nimport { EmptyStateComponent, LoadingComponent } from '@c8y/ngx-components';\nimport { AsyncPipe, NgClass, NgIf, NgStyle } from '@angular/common';\n\n@Component({\n  selector: 'c8y-image-widget-view',\n  templateUrl: './image-widget-view.component.html',\n  standalone: true,\n  imports: [NgIf, NgClass, AsyncPipe, NgStyle, LoadingComponent, EmptyStateComponent]\n})\nexport class ImageWidgetViewComponent implements OnChanges {\n  @Input() config: ImageWidgetConfig;\n  imageBinaryId$ = new BehaviorSubject<string>(null);\n  imageDetails$: Observable<{\n    file: File;\n    base64: string;\n  }>;\n  styling: ImageWidgetStyle | null;\n  loading = true;\n\n  constructor(private imageWidget: ImageWidgetService) {\n    this.imageDetails$ = this.imageBinaryId$.pipe(\n      distinctUntilChanged(),\n      tap(() => (this.loading = true)),\n      switchMap(imageBinaryId => this.imageWidget.getImageDetails(imageBinaryId)),\n      tap(() => (this.loading = false)),\n      shareReplay(1)\n    );\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes.config) {\n      const value = changes.config.currentValue as ImageWidgetConfig;\n      this.imageBinaryId$.next(value.imageBinaryId);\n      this.setStyling(value);\n    }\n  }\n\n  private setStyling(config: ImageWidgetConfig): void {\n    this.styling = this.imageWidget.getStyling(config);\n  }\n}\n","<ng-container *ngIf=\"imageDetails$ | async as details; else empty\">\n  <img\n    [src]=\"details.base64\"\n    [title]=\"details.file.name\"\n    [ngClass]=\"styling ? 'fit-h fit-w' : 'img-responsive'\"\n    [ngStyle]=\"styling\"\n  />\n</ng-container>\n\n<ng-template #empty>\n  <div class=\"d-flex fit-h fit-w j-c-center a-i-center\" *ngIf=\"!loading\">\n    <c8y-ui-empty-state\n      class=\"fit-w\"\n      [icon]=\"'no-image'\"\n      [title]=\"'No image to display.' | translate\"\n      [subtitle]=\"'Upload an image.' | translate\"\n      [horizontal]=\"true\"\n    ></c8y-ui-empty-state>\n  </div>\n</ng-template>\n<div class=\"d-flex fit-h fit-w j-c-center a-i-center\" *ngIf=\"loading\">\n  <c8y-loading></c8y-loading>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1","i3.ImageWidgetService","i1.ImageWidgetService"],"mappings":"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"}
+{"version":3,"file":"c8y-ngx-components-widgets-implementations-image.mjs","sources":["../../widgets/implementations/image/image-widget.model.ts","../../widgets/implementations/image/image-widget.service.ts","../../widgets/implementations/image/image-widget-config/image-widget-config.component.ts","../../widgets/implementations/image/image-widget-config/image-widget-config.component.html","../../widgets/implementations/image/image-widget-view/image-widget-view.component.ts","../../widgets/implementations/image/image-widget-view/image-widget-view.component.html","../../widgets/implementations/image/c8y-ngx-components-widgets-implementations-image.ts"],"sourcesContent":["export interface ImageWidgetConfig {\n  imageBinaryId: string;\n  styling?: ImageWidgetConfigStyling;\n}\n\nexport interface ImageWidgetConfigStyling {\n  objectFit: string;\n  objectPositionX: string;\n  objectPositionY: string;\n}\n\nexport interface ImageWidgetStyle {\n  [key: string]: string;\n}\n\nexport const defaultObjectFitValue = 'contain';\nexport const defaultObjectPositionValue = 'center';\n","import { Injectable } from '@angular/core';\nimport {\n  IManagedObject,\n  IManagedObjectBinary,\n  InventoryService,\n  InventoryBinaryService\n} from '@c8y/client';\nimport { gettext } from '@c8y/ngx-components/gettext';\nimport { AlertService, FilesService } from '@c8y/ngx-components';\nimport { TranslateService } from '@ngx-translate/core';\nimport {\n  defaultObjectPositionValue,\n  ImageWidgetConfig,\n  ImageWidgetStyle\n} from './image-widget.model';\n\n@Injectable({ providedIn: 'root' })\nexport class ImageWidgetService {\n  constructor(\n    private inventory: InventoryService,\n    private fileService: FilesService,\n    private alert: AlertService,\n    private translate: TranslateService,\n    private binary: InventoryBinaryService\n  ) {}\n\n  async getImageDetails(\n    imageBinaryId: string | null\n  ): Promise<{ file: File; base64: string; c8y_SHA256: string }> {\n    if (!imageBinaryId) {\n      return null;\n    }\n\n    try {\n      const { data: imageBinaryMo } = await this.inventory.detail(imageBinaryId);\n      const file = await this.fileService.getFile(imageBinaryMo as IManagedObjectBinary);\n      const base64 = await this.fileService.toBase64(file);\n      return {\n        file,\n        base64: base64 as string,\n        c8y_SHA256: imageBinaryMo.c8y_SHA256\n      };\n    } catch (e) {\n      const text = this.translate.instant(\n        gettext('Unable to retrieve image with id: {{ imageBinaryId }}'),\n        { imageBinaryId }\n      );\n      this.alert.danger(text, e?.data);\n    }\n\n    return null;\n  }\n\n  async uploadFile(\n    file: File,\n    options: {\n      dashboardMoId?: string;\n      isDeviceTypeDashboard?: boolean;\n    } = {}\n  ): Promise<string> {\n    const hash = await this.fileService.getHashSumOfFile(file);\n    const fileDetails = { c8y_SHA256: hash };\n    const globalImage = !options?.dashboardMoId || options?.isDeviceTypeDashboard;\n    const partialBinaryMo: Partial<IManagedObject> = !globalImage\n      ? { ...fileDetails }\n      : { ...fileDetails, c8y_Global: {} };\n    const { data: mo } = await this.binary.create(file, partialBinaryMo);\n    if (options?.dashboardMoId) {\n      await this.inventory.childAdditionsAdd(mo, options?.dashboardMoId);\n    }\n    return mo.id;\n  }\n\n  getStyling(config: ImageWidgetConfig): ImageWidgetStyle | null {\n    if (!config.styling?.objectFit || config.styling?.objectFit === 'full-width') {\n      return null;\n    }\n    return {\n      'object-fit': config.styling.objectFit,\n      'object-position': `${config.styling?.objectPositionX || defaultObjectPositionValue} ${\n        config.styling?.objectPositionY || defaultObjectPositionValue\n      }`\n    };\n  }\n}\n","import { AsyncPipe, NgClass, NgStyle } from '@angular/common';\nimport {\n  AfterViewInit,\n  Component,\n  Input,\n  OnDestroy,\n  OnInit,\n  Optional,\n  QueryList,\n  TemplateRef,\n  ViewChildren\n} from '@angular/core';\nimport {\n  ControlContainer,\n  FormBuilder,\n  FormGroup,\n  NgForm,\n  ReactiveFormsModule,\n  Validators\n} from '@angular/forms';\nimport { gettext } from '@c8y/ngx-components/gettext';\nimport {\n  AlertService,\n  C8yTranslatePipe,\n  C8yValidators,\n  DropAreaComponent,\n  FilesService,\n  FormGroupComponent,\n  LoadingComponent,\n  MessageDirective,\n  MessagesComponent,\n  ListGroupModule,\n  OnBeforeSave\n} from '@c8y/ngx-components';\nimport { WidgetConfigComponent, WidgetConfigService } from '@c8y/ngx-components/context-dashboard';\nimport { get } from 'lodash-es';\nimport { BehaviorSubject, merge, Observable, Subject } from 'rxjs';\nimport {\n  distinctUntilChanged,\n  filter,\n  map,\n  shareReplay,\n  switchMap,\n  takeUntil,\n  tap\n} from 'rxjs/operators';\nimport {\n  defaultObjectFitValue,\n  defaultObjectPositionValue,\n  ImageWidgetConfig,\n  ImageWidgetConfigStyling,\n  ImageWidgetStyle\n} from '../image-widget.model';\nimport { ImageWidgetService } from '../image-widget.service';\n\n@Component({\n  selector: 'c8y-image-widget-config',\n  templateUrl: './image-widget-config.component.html',\n  viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],\n  standalone: true,\n  imports: [\n    ReactiveFormsModule,\n    FormGroupComponent,\n    MessagesComponent,\n    ListGroupModule,\n    MessageDirective,\n    C8yTranslatePipe,\n    AsyncPipe,\n    NgStyle,\n    NgClass,\n    DropAreaComponent,\n    LoadingComponent\n  ]\n})\nexport class ImageWidgetConfigComponent implements OnInit, OnDestroy, OnBeforeSave, AfterViewInit {\n  @Input() config: ImageWidgetConfig;\n  imageBinaryId$ = new BehaviorSubject<string>(null);\n  imageSrc$: Observable<string>;\n  loading = false;\n  formGroup: FormGroup;\n  fileFromConfig: File;\n  styling: ImageWidgetStyle | null;\n  destroyed$ = new Subject<void>();\n  objectFitOptions = [\n    {\n      label: gettext('Contain`verb, image fitting option`'),\n      value: 'contain',\n      description: gettext(\n        'The image is entirely displayed within the widget while preserving the aspect ratio.'\n      )\n    },\n    {\n      label: gettext('Cover`verb, image fitting option`'),\n      value: 'cover',\n      description: gettext(\n        'The image is resized to fill the widget while preserving the aspect ratio. Overflowing areas are clipped.'\n      )\n    },\n    {\n      label: gettext('Fill`verb, image fitting option`'),\n      value: 'fill',\n      description: gettext(\n        'The image is stretched to fill the widget, overriding the aspect-ratio.'\n      )\n    },\n    {\n      label: gettext('Full width`image fitting option`'),\n      value: 'full-width',\n      description: gettext(\n        `The image is resized to fit the widget's width while preserving the aspect ratio. Overflowing area is scrollable.`\n      )\n    }\n  ];\n\n  @ViewChildren('imagePreview') imagePreviewTemplate!: QueryList<TemplateRef<any>>;\n\n  constructor(\n    private formBuilder: FormBuilder,\n    private form: NgForm,\n    private fileService: FilesService,\n    private alert: AlertService,\n    private imageWidget: ImageWidgetService,\n    @Optional() private widgetConfig: WidgetConfigComponent,\n    private widgetConfigService: WidgetConfigService\n  ) {}\n\n  async onBeforeSave(config?: ImageWidgetConfig): Promise<boolean> {\n    if (this.formGroup.invalid) {\n      return false;\n    }\n\n    const fileFromForm = this.getFileFromFormValue(this.formGroup.value);\n    if (fileFromForm && fileFromForm !== this.fileFromConfig) {\n      try {\n        const imageBinaryId = await this.imageWidget.uploadFile(fileFromForm, {\n          dashboardMoId: this.getDashboardMoId(),\n          isDeviceTypeDashboard: this.widgetConfig?.isDeviceTypeDashboard\n        });\n        Object.assign(config, { imageBinaryId });\n      } catch (e) {\n        this.alert.danger(gettext('Unable to upload image.'), e?.data);\n        return false;\n      }\n    }\n    const styling: ImageWidgetConfigStyling = this.formGroup.value.styling;\n    Object.assign(config, { styling });\n\n    return true;\n  }\n\n  ngOnInit() {\n    this.initForm();\n    const imageFromConfig = this.imageBinaryId$.pipe(\n      filter(id => !!id),\n      distinctUntilChanged(),\n      tap(() => (this.loading = true)),\n      switchMap(imageBinaryId => this.imageWidget.getImageDetails(imageBinaryId)),\n      tap(details => {\n        this.loading = false;\n        this.fileFromConfig = details.file;\n        if (details) {\n          this.formGroup.patchValue({ images: [{ file: details.file, name: details.file.name }] });\n        }\n      }),\n      map(details => details?.base64),\n      shareReplay(1)\n    );\n    const selectedFile = this.formGroup.valueChanges.pipe(\n      map(value => this.getFileFromFormValue(value)),\n      distinctUntilChanged(),\n      switchMap(file => (file ? this.fileService.toBase64(file) : Promise.resolve('')))\n    );\n    this.imageSrc$ = merge(imageFromConfig, selectedFile).pipe(\n      map(base64 => (base64 ? (base64 as string) : ''))\n    );\n    this.imageBinaryId$.next(this.config?.imageBinaryId);\n  }\n\n  ngAfterViewInit(): void {\n    this.imagePreviewTemplate.changes.pipe(takeUntil(this.destroyed$)).subscribe(template => {\n      this.widgetConfigService.setPreview(template.first);\n    });\n  }\n\n  ngOnDestroy(): void {\n    this.destroyed$.next();\n    this.destroyed$.complete();\n  }\n\n  private getDashboardMoId(): string | null {\n    return get(this.widgetConfig, 'mo.id', null);\n  }\n\n  private async initForm(): Promise<void> {\n    const stylingFormGroup = this.formBuilder.group({\n      objectFit: [\n        // fallback to 'full-width' for old legacy widgets, newly created widgets should use defaultObjectFitValue\n        this.config.imageBinaryId && !this.config.styling ? 'full-width' : defaultObjectFitValue,\n        [Validators.required]\n      ],\n      objectPositionX: [defaultObjectPositionValue, [Validators.required]],\n      objectPositionY: [defaultObjectPositionValue, [Validators.required]]\n    });\n    this.formGroup = this.formBuilder.group({\n      images: [\n        null,\n        [\n          Validators.required,\n          Validators.minLength(1),\n          Validators.maxLength(1),\n          C8yValidators.filesValidator({ maximumFileSizeInKb: 1000, typePrefix: 'image/' })\n        ]\n      ],\n      styling: stylingFormGroup\n    });\n    this.form.form.addControl('config', this.formGroup);\n    this.formGroup.patchValue(this.config);\n    this.formGroup.valueChanges\n      .pipe(takeUntil(this.destroyed$))\n      .subscribe(changes => this.setStyling(changes));\n  }\n\n  private getFileFromFormValue(formValue: any): File | null {\n    const images: any[] = formValue?.images || [];\n    return images[0]?.file || null;\n  }\n\n  private setStyling(config: ImageWidgetConfig): void {\n    this.styling = this.imageWidget.getStyling(config);\n  }\n}\n","<div [formGroup]=\"formGroup\">\n  <fieldset class=\"c8y-fieldset\">\n    <legend>{{ 'Image' | translate }}</legend>\n    <c8y-form-group class=\"m-b-16\">\n      <c8y-drop-area\n        class=\"drop-area-sm\"\n        [icon]=\"'upload'\"\n        formControlName=\"images\"\n        [accept]=\"'image'\"\n        [maxAllowedFiles]=\"1\"\n      ></c8y-drop-area>\n      <c8y-messages>\n        <c8y-message\n          name=\"maxFileSizeReached\"\n          [text]=\"\n            'The maximum image size is {{ maxFileSize }} kB. The selected image has a size of {{ actualFileSize }} kB.'\n              | translate\n          \"\n        ></c8y-message>\n        <c8y-message\n          name=\"wrongFileType\"\n          [text]=\"'Wrong file type, select an image.' | translate\"\n        ></c8y-message>\n        <c8y-message\n          name=\"maxlength\"\n          [text]=\"'Only select one image.' | translate\"\n        ></c8y-message>\n        <c8y-message\n          name=\"required\"\n          [text]=\"'An image is required.' | translate\"\n        ></c8y-message>\n        <c8y-message\n          name=\"minlength\"\n          [text]=\"'An image is required.' | translate\"\n        ></c8y-message>\n      </c8y-messages>\n    </c8y-form-group>\n  </fieldset>\n\n  @if (imageSrc$ | async; as src) {\n    <div [formGroupName]=\"'styling'\">\n      <fieldset class=\"c8y-fieldset\">\n        <legend>\n          {{ 'Image display' | translate }}\n        </legend>\n        <c8y-form-group class=\"form-group-sm m-b-0\">\n          <c8y-list-group\n            class=\"no-border-last p-b-16\"\n            role=\"list\"\n          >\n            @for (\n              objectFitOption of objectFitOptions;\n              track objectFitOption.value;\n              let i = $index\n            ) {\n              <c8y-li role=\"listitem\">\n                <label class=\"c8y-radio\">\n                  <input\n                    type=\"radio\"\n                    [id]=\"'groupradiocontentclass' + i\"\n                    formControlName=\"objectFit\"\n                    [value]=\"objectFitOption.value\"\n                  />\n                  <span></span>\n                  <span class=\"l-h-1\">\n                    {{ objectFitOption.label | translate }}\n                    <br />\n                    <small class=\"text-muted\">\n                      {{ objectFitOption.description | translate }}\n                    </small>\n                  </span>\n                </label>\n              </c8y-li>\n            }\n          </c8y-list-group>\n        </c8y-form-group>\n      </fieldset>\n      <fieldset class=\"c8y-fieldset\">\n        <legend>\n          {{ 'Image alignment' | translate }}\n        </legend>\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <c8y-form-group class=\"form-group-sm\">\n              <label>{{ 'Horizontal`alignment`' | translate }}</label>\n              <div class=\"c8y-select-wrapper\">\n                <select\n                  class=\"form-control\"\n                  formControlName=\"objectPositionX\"\n                >\n                  <option [ngValue]=\"'left'\">\n                    {{ 'left`horizontal alignment`' | translate }}\n                  </option>\n                  <option [ngValue]=\"'center'\">\n                    {{ 'center`horizontal alignment`' | translate }}\n                  </option>\n                  <option [ngValue]=\"'right'\">\n                    {{ 'right`horizontal alignment`' | translate }}\n                  </option>\n                </select>\n              </div>\n            </c8y-form-group>\n          </div>\n          <div class=\"col-md-6\">\n            <c8y-form-group class=\"form-group-sm\">\n              <label>{{ 'Vertical`alignment`' | translate }}</label>\n              <div class=\"c8y-select-wrapper\">\n                <select\n                  class=\"form-control\"\n                  formControlName=\"objectPositionY\"\n                >\n                  <option [ngValue]=\"'top'\">\n                    {{ 'top`vertical alignment`' | translate }}\n                  </option>\n                  <option [ngValue]=\"'center'\">\n                    {{ 'center`vertical alignment`' | translate }}\n                  </option>\n                  <option [ngValue]=\"'bottom'\">\n                    {{ 'bottom`vertical alignment`' | translate }}\n                  </option>\n                </select>\n              </div>\n            </c8y-form-group>\n          </div>\n        </div>\n      </fieldset>\n      <ng-template #imagePreview>\n        <img\n          [ngStyle]=\"styling\"\n          alt=\"{{ 'Image preview' | translate }}\"\n          [src]=\"src\"\n          [ngClass]=\"styling ? 'fit-h fit-w' : 'img-responsive'\"\n        />\n      </ng-template>\n    </div>\n  }\n  @if (loading) {\n    <div class=\"d-flex j-c-center\">\n      <c8y-loading></c8y-loading>\n    </div>\n  }\n</div>\n","import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';\nimport { BehaviorSubject, Observable } from 'rxjs';\nimport { distinctUntilChanged, shareReplay, switchMap, tap } from 'rxjs/operators';\nimport { ImageWidgetConfig, ImageWidgetStyle } from '../image-widget.model';\nimport { ImageWidgetService } from '../image-widget.service';\nimport { EmptyStateComponent, LoadingComponent } from '@c8y/ngx-components';\nimport { AsyncPipe, NgClass, NgIf, NgStyle } from '@angular/common';\n\n@Component({\n  selector: 'c8y-image-widget-view',\n  templateUrl: './image-widget-view.component.html',\n  standalone: true,\n  imports: [NgIf, NgClass, AsyncPipe, NgStyle, LoadingComponent, EmptyStateComponent]\n})\nexport class ImageWidgetViewComponent implements OnChanges {\n  @Input() config: ImageWidgetConfig;\n  imageBinaryId$ = new BehaviorSubject<string>(null);\n  imageDetails$: Observable<{\n    file: File;\n    base64: string;\n  }>;\n  styling: ImageWidgetStyle | null;\n  loading = true;\n\n  constructor(private imageWidget: ImageWidgetService) {\n    this.imageDetails$ = this.imageBinaryId$.pipe(\n      distinctUntilChanged(),\n      tap(() => (this.loading = true)),\n      switchMap(imageBinaryId => this.imageWidget.getImageDetails(imageBinaryId)),\n      tap(() => (this.loading = false)),\n      shareReplay(1)\n    );\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes.config) {\n      const value = changes.config.currentValue as ImageWidgetConfig;\n      this.imageBinaryId$.next(value.imageBinaryId);\n      this.setStyling(value);\n    }\n  }\n\n  private setStyling(config: ImageWidgetConfig): void {\n    this.styling = this.imageWidget.getStyling(config);\n  }\n}\n","<ng-container *ngIf=\"imageDetails$ | async as details; else empty\">\n  <img\n    [src]=\"details.base64\"\n    [title]=\"details.file.name\"\n    [ngClass]=\"styling ? 'fit-h fit-w' : 'img-responsive'\"\n    [ngStyle]=\"styling\"\n  />\n</ng-container>\n\n<ng-template #empty>\n  <div class=\"d-flex fit-h fit-w j-c-center a-i-center\" *ngIf=\"!loading\">\n    <c8y-ui-empty-state\n      class=\"fit-w\"\n      [icon]=\"'no-image'\"\n      [title]=\"'No image to display.' | translate\"\n      [subtitle]=\"'Upload an image.' | translate\"\n      [horizontal]=\"true\"\n    ></c8y-ui-empty-state>\n  </div>\n</ng-template>\n<div class=\"d-flex fit-h fit-w j-c-center a-i-center\" *ngIf=\"loading\">\n  <c8y-loading></c8y-loading>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1","i3.ImageWidgetService","i1.ImageWidgetService"],"mappings":";;;;;;;;;;;;;;;AAeO,MAAM,qBAAqB,GAAG;AAC9B,MAAM,0BAA0B,GAAG;;MCC7B,kBAAkB,CAAA;IAC7B,WAAA,CACU,SAA2B,EAC3B,WAAyB,EACzB,KAAmB,EACnB,SAA2B,EAC3B,MAA8B,EAAA;QAJ9B,IAAA,CAAA,SAAS,GAAT,SAAS;QACT,IAAA,CAAA,WAAW,GAAX,WAAW;QACX,IAAA,CAAA,KAAK,GAAL,KAAK;QACL,IAAA,CAAA,SAAS,GAAT,SAAS;QACT,IAAA,CAAA,MAAM,GAAN,MAAM;IACb;IAEH,MAAM,eAAe,CACnB,aAA4B,EAAA;QAE5B,IAAI,CAAC,aAAa,EAAE;AAClB,YAAA,OAAO,IAAI;QACb;AAEA,QAAA,IAAI;AACF,YAAA,MAAM,EAAE,IAAI,EAAE,aAAa,EAAE,GAAG,MAAM,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,aAAa,CAAC;YAC1E,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,aAAqC,CAAC;YAClF,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC;YACpD,OAAO;gBACL,IAAI;AACJ,gBAAA,MAAM,EAAE,MAAgB;gBACxB,UAAU,EAAE,aAAa,CAAC;aAC3B;QACH;QAAE,OAAO,CAAC,EAAE;AACV,YAAA,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,OAAO,CACjC,OAAO,CAAC,uDAAuD,CAAC,EAChE,EAAE,aAAa,EAAE,CAClB;YACD,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI,CAAC;QAClC;AAEA,QAAA,OAAO,IAAI;IACb;AAEA,IAAA,MAAM,UAAU,CACd,IAAU,EACV,UAGI,EAAE,EAAA;QAEN,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,IAAI,CAAC;AAC1D,QAAA,MAAM,WAAW,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE;QACxC,MAAM,WAAW,GAAG,CAAC,OAAO,EAAE,aAAa,IAAI,OAAO,EAAE,qBAAqB;QAC7E,MAAM,eAAe,GAA4B,CAAC;AAChD,cAAE,EAAE,GAAG,WAAW;cAChB,EAAE,GAAG,WAAW,EAAE,UAAU,EAAE,EAAE,EAAE;AACtC,QAAA,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE,GAAG,MAAM,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,eAAe,CAAC;AACpE,QAAA,IAAI,OAAO,EAAE,aAAa,EAAE;AAC1B,YAAA,MAAM,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC,EAAE,EAAE,OAAO,EAAE,aAAa,CAAC;QACpE;QACA,OAAO,EAAE,CAAC,EAAE;IACd;AAEA,IAAA,UAAU,CAAC,MAAyB,EAAA;AAClC,QAAA,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,IAAI,MAAM,CAAC,OAAO,EAAE,SAAS,KAAK,YAAY,EAAE;AAC5E,YAAA,OAAO,IAAI;QACb;QACA,OAAO;AACL,YAAA,YAAY,EAAE,MAAM,CAAC,OAAO,CAAC,SAAS;AACtC,YAAA,iBAAiB,EAAE,CAAA,EAAG,MAAM,CAAC,OAAO,EAAE,eAAe,IAAI,0BAA0B,CAAA,CAAA,EACjF,MAAM,CAAC,OAAO,EAAE,eAAe,IAAI,0BACrC,CAAA;SACD;IACH;+GAlEW,kBAAkB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,YAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,YAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,sBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA;AAAlB,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,kBAAkB,cADL,MAAM,EAAA,CAAA,CAAA;;4FACnB,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAD9B,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE;;;MC0DrB,0BAA0B,CAAA;AA0CrC,IAAA,WAAA,CACU,WAAwB,EACxB,IAAY,EACZ,WAAyB,EACzB,KAAmB,EACnB,WAA+B,EACnB,YAAmC,EAC/C,mBAAwC,EAAA;QANxC,IAAA,CAAA,WAAW,GAAX,WAAW;QACX,IAAA,CAAA,IAAI,GAAJ,IAAI;QACJ,IAAA,CAAA,WAAW,GAAX,WAAW;QACX,IAAA,CAAA,KAAK,GAAL,KAAK;QACL,IAAA,CAAA,WAAW,GAAX,WAAW;QACC,IAAA,CAAA,YAAY,GAAZ,YAAY;QACxB,IAAA,CAAA,mBAAmB,GAAnB,mBAAmB;AA/C7B,QAAA,IAAA,CAAA,cAAc,GAAG,IAAI,eAAe,CAAS,IAAI,CAAC;QAElD,IAAA,CAAA,OAAO,GAAG,KAAK;AAIf,QAAA,IAAA,CAAA,UAAU,GAAG,IAAI,OAAO,EAAQ;AAChC,QAAA,IAAA,CAAA,gBAAgB,GAAG;AACjB,YAAA;AACE,gBAAA,KAAK,EAAE,OAAO,CAAC,qCAAqC,CAAC;AACrD,gBAAA,KAAK,EAAE,SAAS;AAChB,gBAAA,WAAW,EAAE,OAAO,CAClB,sFAAsF;AAEzF,aAAA;AACD,YAAA;AACE,gBAAA,KAAK,EAAE,OAAO,CAAC,mCAAmC,CAAC;AACnD,gBAAA,KAAK,EAAE,OAAO;AACd,gBAAA,WAAW,EAAE,OAAO,CAClB,2GAA2G;AAE9G,aAAA;AACD,YAAA;AACE,gBAAA,KAAK,EAAE,OAAO,CAAC,kCAAkC,CAAC;AAClD,gBAAA,KAAK,EAAE,MAAM;AACb,gBAAA,WAAW,EAAE,OAAO,CAClB,yEAAyE;AAE5E,aAAA;AACD,YAAA;AACE,gBAAA,KAAK,EAAE,OAAO,CAAC,kCAAkC,CAAC;AAClD,gBAAA,KAAK,EAAE,YAAY;AACnB,gBAAA,WAAW,EAAE,OAAO,CAClB,CAAA,iHAAA,CAAmH;AAEtH;SACF;IAYE;IAEH,MAAM,YAAY,CAAC,MAA0B,EAAA;AAC3C,QAAA,IAAI,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE;AAC1B,YAAA,OAAO,KAAK;QACd;AAEA,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;QACpE,IAAI,YAAY,IAAI,YAAY,KAAK,IAAI,CAAC,cAAc,EAAE;AACxD,YAAA,IAAI;gBACF,MAAM,aAAa,GAAG,MAAM,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,YAAY,EAAE;AACpE,oBAAA,aAAa,EAAE,IAAI,CAAC,gBAAgB,EAAE;AACtC,oBAAA,qBAAqB,EAAE,IAAI,CAAC,YAAY,EAAE;AAC3C,iBAAA,CAAC;gBACF,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,aAAa,EAAE,CAAC;YAC1C;YAAE,OAAO,CAAC,EAAE;AACV,gBAAA,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,yBAAyB,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC;AAC9D,gBAAA,OAAO,KAAK;YACd;QACF;QACA,MAAM,OAAO,GAA6B,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO;QACtE,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC;AAElC,QAAA,OAAO,IAAI;IACb;IAEA,QAAQ,GAAA;QACN,IAAI,CAAC,QAAQ,EAAE;QACf,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAC9C,MAAM,CAAC,EAAE,IAAI,CAAC,CAAC,EAAE,CAAC,EAClB,oBAAoB,EAAE,EACtB,GAAG,CAAC,OAAO,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC,EAChC,SAAS,CAAC,aAAa,IAAI,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC,EAC3E,GAAG,CAAC,OAAO,IAAG;AACZ,YAAA,IAAI,CAAC,OAAO,GAAG,KAAK;AACpB,YAAA,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC,IAAI;YAClC,IAAI,OAAO,EAAE;gBACX,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC;YAC1F;AACF,QAAA,CAAC,CAAC,EACF,GAAG,CAAC,OAAO,IAAI,OAAO,EAAE,MAAM,CAAC,EAC/B,WAAW,CAAC,CAAC,CAAC,CACf;QACD,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CACnD,GAAG,CAAC,KAAK,IAAI,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC,EAC9C,oBAAoB,EAAE,EACtB,SAAS,CAAC,IAAI,KAAK,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAClF;AACD,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC,IAAI,CACxD,GAAG,CAAC,MAAM,KAAK,MAAM,GAAI,MAAiB,GAAG,EAAE,CAAC,CAAC,CAClD;QACD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,aAAa,CAAC;IACtD;IAEA,eAAe,GAAA;AACb,QAAA,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,QAAQ,IAAG;YACtF,IAAI,CAAC,mBAAmB,CAAC,UAAU,CAAC,QAAQ,CAAC,KAAK,CAAC;AACrD,QAAA,CAAC,CAAC;IACJ;IAEA,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;AACtB,QAAA,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE;IAC5B;IAEQ,gBAAgB,GAAA;QACtB,OAAO,GAAG,CAAC,IAAI,CAAC,YAAY,EAAE,OAAO,EAAE,IAAI,CAAC;IAC9C;AAEQ,IAAA,MAAM,QAAQ,GAAA;AACpB,QAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC9C,YAAA,SAAS,EAAE;;AAET,gBAAA,IAAI,CAAC,MAAM,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,GAAG,YAAY,GAAG,qBAAqB;gBACxF,CAAC,UAAU,CAAC,QAAQ;AACrB,aAAA;YACD,eAAe,EAAE,CAAC,0BAA0B,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;YACpE,eAAe,EAAE,CAAC,0BAA0B,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC;AACpE,SAAA,CAAC;QACF,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AACtC,YAAA,MAAM,EAAE;gBACN,IAAI;AACJ,gBAAA;AACE,oBAAA,UAAU,CAAC,QAAQ;AACnB,oBAAA,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC;AACvB,oBAAA,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC;AACvB,oBAAA,aAAa,CAAC,cAAc,CAAC,EAAE,mBAAmB,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE;AACjF;AACF,aAAA;AACD,YAAA,OAAO,EAAE;AACV,SAAA,CAAC;AACF,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC;QACnD,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC;QACtC,IAAI,CAAC,SAAS,CAAC;AACZ,aAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC;AAC/B,aAAA,SAAS,CAAC,OAAO,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IACnD;AAEQ,IAAA,oBAAoB,CAAC,SAAc,EAAA;AACzC,QAAA,MAAM,MAAM,GAAU,SAAS,EAAE,MAAM,IAAI,EAAE;QAC7C,OAAO,MAAM,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,IAAI;IAChC;AAEQ,IAAA,UAAU,CAAC,MAAyB,EAAA;QAC1C,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,MAAM,CAAC;IACpD;+GA3JW,0BAA0B,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAAA,IAAA,CAAA,WAAA,EAAA,EAAA,EAAA,KAAA,EAAAA,IAAA,CAAA,MAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,YAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,YAAA,EAAA,EAAA,EAAA,KAAA,EAAAC,kBAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,qBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,mBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA1B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,0BAA0B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,yBAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,sBAAA,EAAA,SAAA,EAAA,CAAA,cAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC1EvC,i4JA8IA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDjFI,mBAAmB,6kDACnB,kBAAkB,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,YAAA,EAAA,YAAA,EAAA,cAAA,EAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAClB,iBAAiB,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACjB,eAAe,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,aAAA,EAAA,cAAA,EAAA,OAAA,EAAA,WAAA,EAAA,YAAA,CAAA,EAAA,OAAA,EAAA,CAAA,iBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACf,gBAAgB,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAGhB,OAAO,2EACP,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACP,iBAAiB,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,OAAA,EAAA,SAAA,EAAA,MAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,YAAA,EAAA,aAAA,EAAA,SAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,wBAAA,EAAA,QAAA,CAAA,EAAA,OAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACjB,gBAAgB,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,UAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EALhB,gBAAgB,EAAA,IAAA,EAAA,WAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAChB,SAAS,mCATI,CAAC,EAAE,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC,EAAA,CAAA,CAAA;;4FAgBxD,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBAnBtC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,yBAAyB,EAAA,aAAA,EAEpB,CAAC,EAAE,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC,EAAA,UAAA,EACvD,IAAI,EAAA,OAAA,EACP;wBACP,mBAAmB;wBACnB,kBAAkB;wBAClB,iBAAiB;wBACjB,eAAe;wBACf,gBAAgB;wBAChB,gBAAgB;wBAChB,SAAS;wBACT,OAAO;wBACP,OAAO;wBACP,iBAAiB;wBACjB;AACD,qBAAA,EAAA,QAAA,EAAA,i4JAAA,EAAA;;0BAkDE;;sBA/CF;;sBAuCA,YAAY;uBAAC,cAAc;;;MEpGjB,wBAAwB,CAAA;AAUnC,IAAA,WAAA,CAAoB,WAA+B,EAAA;QAA/B,IAAA,CAAA,WAAW,GAAX,WAAW;AAR/B,QAAA,IAAA,CAAA,cAAc,GAAG,IAAI,eAAe,CAAS,IAAI,CAAC;QAMlD,IAAA,CAAA,OAAO,GAAG,IAAI;AAGZ,QAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAC3C,oBAAoB,EAAE,EACtB,GAAG,CAAC,OAAO,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC,EAChC,SAAS,CAAC,aAAa,IAAI,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC,EAC3E,GAAG,CAAC,OAAO,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,CAAC,EACjC,WAAW,CAAC,CAAC,CAAC,CACf;IACH;AAEA,IAAA,WAAW,CAAC,OAAsB,EAAA;AAChC,QAAA,IAAI,OAAO,CAAC,MAAM,EAAE;AAClB,YAAA,MAAM,KAAK,GAAG,OAAO,CAAC,MAAM,CAAC,YAAiC;YAC9D,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC;AAC7C,YAAA,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;QACxB;IACF;AAEQ,IAAA,UAAU,CAAC,MAAyB,EAAA;QAC1C,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,MAAM,CAAC;IACpD;+GA9BW,wBAAwB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAAC,kBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAxB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,wBAAwB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECdrC,uuBAuBA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDXY,IAAI,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAa,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,gBAAgB,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,UAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,mBAAmB,+GAAzD,SAAS,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FAEvB,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBANpC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,uBAAuB,EAAA,UAAA,EAErB,IAAI,EAAA,OAAA,EACP,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,gBAAgB,EAAE,mBAAmB,CAAC,EAAA,QAAA,EAAA,uuBAAA,EAAA;;sBAGlF;;;AEfH;;AAEG;;;;"}

package/fesm2022/c8y-ngx-components-widgets-implementations-info-gauge.mjs

@@ -13,7 +13,6 @@ import { NgxEchartsModule, NGX_ECHARTS_CONFIG } from 'ngx-echarts';
 import { gettext } from '@c8y/ngx-components/gettext';
 import * as i1$3 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, Validators, NgForm, ControlContainer, ReactiveFormsModule } from '@angular/forms';
-import * as i5 from '@c8y/ngx-components/datapoint-selector';
 import { DatapointSelectorModule } from '@c8y/ngx-components/datapoint-selector';
 import { EditorComponent, MonacoEditorMarkerValidatorDirective } from '@c8y/ngx-components/editor';
 import * as i4 from 'ngx-bootstrap/collapse';
@@ -78,10 +77,10 @@ class InfoGaugeCurrentMeasurementPipe {
         }
         return { color, strokeDashOffset };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InfoGaugeCurrentMeasurementPipe, deps: [{ token: i1.MeasurementRealtimeService }, { token: i1.AlertService }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: InfoGaugeCurrentMeasurementPipe, isStandalone: true, name: "infoGaugeCurrentMeasurement" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: InfoGaugeCurrentMeasurementPipe, deps: [{ token: i1.MeasurementRealtimeService }, { token: i1.AlertService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.17", ngImport: i0, type: InfoGaugeCurrentMeasurementPipe, isStandalone: true, name: "infoGaugeCurrentMeasurement" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InfoGaugeCurrentMeasurementPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: InfoGaugeCurrentMeasurementPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'infoGaugeCurrentMeasurement',
@@ -743,10 +742,10 @@ class RadialGaugeService {
             return clampedValue;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RadialGaugeService, deps: [{ token: i1.DatePipe }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RadialGaugeService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: RadialGaugeService, deps: [{ token: i1.DatePipe }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: RadialGaugeService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RadialGaugeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: RadialGaugeService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -812,14 +811,14 @@ class RadialGaugeViewComponent {
     onChartInit(ec) {
         this.echartsInstance = ec;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RadialGaugeViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: RadialGaugeViewComponent, isStandalone: true, selector: "c8y-radial-gauge", inputs: { activeDatapointGauge: "activeDatapointGauge", measurement: "measurement", fractionSize: "fractionSize", gaugeOptions: "gaugeOptions", selectedPresetId: "selectedPresetId" }, host: { classAttribute: "c8y-radial-gauge" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: RadialGaugeViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: RadialGaugeViewComponent, isStandalone: true, selector: "c8y-radial-gauge", inputs: { activeDatapointGauge: "activeDatapointGauge", measurement: "measurement", fractionSize: "fractionSize", gaugeOptions: "gaugeOptions", selectedPresetId: "selectedPresetId" }, host: { classAttribute: "c8y-radial-gauge" }, providers: [
             MeasurementRealtimeService,
             RadialGaugeService,
             { provide: NGX_ECHARTS_CONFIG, useFactory: () => ({ echarts: () => import('echarts') }) }
         ], viewQueries: [{ propertyName: "chart", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"p-absolute fit-w fit-h\"\n  data-cy=\"c8y-radial-gauge--chart\"\n  #chart\n  echarts\n  [options]=\"chartOptions$ | async\"\n  (chartInit)=\"onChartInit($event)\"\n></div>\n", dependencies: [{ kind: "ngmodule", type: NgxEchartsModule }, { kind: "directive", type: i1$1.NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RadialGaugeViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: RadialGaugeViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-radial-gauge', host: { class: 'c8y-radial-gauge' }, providers: [
                         MeasurementRealtimeService,
@@ -886,10 +885,10 @@ class InfoGaugeWidgetViewComponent {
             datapoint.__target = { name, id };
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InfoGaugeWidgetViewComponent, deps: [{ token: i2.ContextDashboardComponent, optional: true }, { token: i1.DynamicComponentComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: InfoGaugeWidgetViewComponent, isStandalone: true, selector: "c8y-info-gauge-widget-view", inputs: { config: "config" }, host: { classAttribute: "d-contents" }, providers: [MeasurementRealtimeService], usesOnChanges: true, ngImport: i0, template: "@if (isInfoGauge) {\n  <div class=\"label-value-unit-gauge new-radial\">\n    @if (activeDatapointLabels?.length && isInfoGauge) {\n      <div class=\"gauge-legend\">\n        @for (dp of activeDatapointLabels; track dp) {\n          @if (dp | infoGaugeCurrentMeasurement | async; as measurement) {\n            <label\n              class=\"text-truncate\"\n              title=\"{{ dp.label }}\"\n            >\n              {{ dp.label }}\n            </label>\n            @if (!measurement.notFound) {\n              <h3\n                class=\"text-truncate\"\n                title=\"{{ measurement.value | number: fractionSize }} {{\n                  dp.unit || measurement.unit\n                }}\"\n              >\n                {{ measurement.value | number: fractionSize }} {{ dp.unit || measurement.unit }}\n              </h3>\n            } @else {\n              <h3>--</h3>\n            }\n            <p class=\"text-muted m-b-8\">\n              <small>\n                <div>{{ measurement.date | c8yDate: 'mediumDate' }}</div>\n                <div>{{ measurement.date | c8yDate: 'mediumTime' }}</div>\n              </small>\n            </p>\n          }\n        }\n      </div>\n    }\n    @if (activeDatapointGauge && isInfoGauge) {\n      @if (activeDatapointGauge | infoGaugeCurrentMeasurement: true | async; as measurement) {\n        <div class=\"gauge-svg\">\n          <svg\n            height=\"214px\"\n            width=\"214px\"\n            viewBox=\"0 0 214 214\"\n            version=\"1.1\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n          >\n            <desc>radial gauge</desc>\n            <g\n              id=\"scale\"\n              stroke=\"none\"\n              stroke-width=\"1\"\n              fill=\"none\"\n              fill-rule=\"evenodd\"\n              stroke-dasharray=\"1,5\"\n            >\n              <circle\n                id=\"Oval\"\n                stroke=\"#CACECE\"\n                stroke-width=\"7\"\n                cx=\"107\"\n                cy=\"107\"\n                r=\"103\"\n              ></circle>\n              <rect\n                id=\"mask\"\n                height=\"214\"\n                stroke=\"none\"\n                fill-rule=\"evenodd\"\n                x=\"0\"\n                y=\"0\"\n                width=\"214\"\n                transform=\"rotate(-45 290 182)\"\n              ></rect>\n            </g>\n            <path\n              class=\"track\"\n              d=\"M 107 27 a 80 80 0 1 0.1 0 Z\"\n              transform=\"rotate(-135 107 107)\"\n            ></path>\n            <path\n              class=\"track-value\"\n              [ngStyle]=\"{\n                stroke: measurement.color,\n                'stroke-dashoffset': -measurement.strokeDashOffset\n              }\"\n              d=\"M 107 27 a 80 80 0 1 0.1 0 Z\"\n              transform=\"rotate(-135 107 107)\"\n            ></path>\n            <foreignObject\n              class=\"d-flex a-i-center j-c-center\"\n              height=\"100%\"\n              width=\"100%\"\n              requiredFeatures=\"http://www.w3.org/TR/SVG11/feature#Extensibility\"\n            >\n              <div\n                class=\"d-flex d-col fit-h a-i-center j-c-center\"\n                style=\"padding: 3rem\"\n                xmlns=\"http://www.w3.org/1999/xhtml\"\n              >\n                <p\n                  class=\"text-truncate text-center\"\n                  title=\"{{ activeDatapointGauge.label }}\"\n                >\n                  {{ activeDatapointGauge.label }}\n                </p>\n                @if (!measurement.notFound) {\n                  <p\n                    class=\"center-value text-truncate\"\n                    title=\"{{ measurement.value | number: fractionSize }}\"\n                  >\n                    {{ measurement.value | number: fractionSize }}\n                  </p>\n                } @else {\n                  <p class=\"center-value\">--</p>\n                }\n                <p class=\"center-unit strong\">\n                  {{ activeDatapointGauge.unit || measurement.unit }}\n                </p>\n                <div class=\"center-date-time\">{{ measurement.date | c8yDate: 'mediumDate' }}</div>\n                <div class=\"center-date-time\">{{ measurement.date | c8yDate: 'mediumTime' }}</div>\n              </div>\n            </foreignObject>\n          </svg>\n        </div>\n      }\n    }\n    <div class=\"clearfix\"></div>\n  </div>\n}\n@if (!isInfoGauge) {\n  @if (activeDatapointGauge | infoGaugeCurrentMeasurement | async; as measurement) {\n    <c8y-radial-gauge\n      [activeDatapointGauge]=\"activeDatapointGauge\"\n      [measurement]=\"measurement\"\n      [fractionSize]=\"config.fractionSize\"\n      [gaugeOptions]=\"config.gaugeOptions\"\n      [selectedPresetId]=\"config.selectedPresetId\"\n    ></c8y-radial-gauge>\n  }\n}\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: RadialGaugeViewComponent, selector: "c8y-radial-gauge", inputs: ["activeDatapointGauge", "measurement", "fractionSize", "gaugeOptions", "selectedPresetId"] }, { kind: "pipe", type: InfoGaugeCurrentMeasurementPipe, name: "infoGaugeCurrentMeasurement" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: InfoGaugeWidgetViewComponent, deps: [{ token: i2.ContextDashboardComponent, optional: true }, { token: i1.DynamicComponentComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: InfoGaugeWidgetViewComponent, isStandalone: true, selector: "c8y-info-gauge-widget-view", inputs: { config: "config" }, host: { classAttribute: "d-contents" }, providers: [MeasurementRealtimeService], usesOnChanges: true, ngImport: i0, template: "@if (isInfoGauge) {\n  <div class=\"label-value-unit-gauge new-radial\">\n    @if (activeDatapointLabels?.length && isInfoGauge) {\n      <div class=\"gauge-legend\">\n        @for (dp of activeDatapointLabels; track dp) {\n          @if (dp | infoGaugeCurrentMeasurement | async; as measurement) {\n            <label\n              class=\"text-truncate\"\n              title=\"{{ dp.label }}\"\n            >\n              {{ dp.label }}\n            </label>\n            @if (!measurement.notFound) {\n              <h3\n                class=\"text-truncate\"\n                title=\"{{ measurement.value | number: fractionSize }} {{\n                  dp.unit || measurement.unit\n                }}\"\n              >\n                {{ measurement.value | number: fractionSize }} {{ dp.unit || measurement.unit }}\n              </h3>\n            } @else {\n              <h3>--</h3>\n            }\n            <p class=\"text-muted m-b-8\">\n              <small>\n                <div>{{ measurement.date | c8yDate: 'mediumDate' }}</div>\n                <div>{{ measurement.date | c8yDate: 'mediumTime' }}</div>\n              </small>\n            </p>\n          }\n        }\n      </div>\n    }\n    @if (activeDatapointGauge && isInfoGauge) {\n      @if (activeDatapointGauge | infoGaugeCurrentMeasurement: true | async; as measurement) {\n        <div class=\"gauge-svg\">\n          <svg\n            height=\"214px\"\n            width=\"214px\"\n            viewBox=\"0 0 214 214\"\n            version=\"1.1\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n          >\n            <desc>radial gauge</desc>\n            <g\n              id=\"scale\"\n              stroke=\"none\"\n              stroke-width=\"1\"\n              fill=\"none\"\n              fill-rule=\"evenodd\"\n              stroke-dasharray=\"1,5\"\n            >\n              <circle\n                id=\"Oval\"\n                stroke=\"#CACECE\"\n                stroke-width=\"7\"\n                cx=\"107\"\n                cy=\"107\"\n                r=\"103\"\n              ></circle>\n              <rect\n                id=\"mask\"\n                height=\"214\"\n                stroke=\"none\"\n                fill-rule=\"evenodd\"\n                x=\"0\"\n                y=\"0\"\n                width=\"214\"\n                transform=\"rotate(-45 290 182)\"\n              ></rect>\n            </g>\n            <path\n              class=\"track\"\n              d=\"M 107 27 a 80 80 0 1 0.1 0 Z\"\n              transform=\"rotate(-135 107 107)\"\n            ></path>\n            <path\n              class=\"track-value\"\n              [ngStyle]=\"{\n                stroke: measurement.color,\n                'stroke-dashoffset': -measurement.strokeDashOffset\n              }\"\n              d=\"M 107 27 a 80 80 0 1 0.1 0 Z\"\n              transform=\"rotate(-135 107 107)\"\n            ></path>\n            <foreignObject\n              class=\"d-flex a-i-center j-c-center\"\n              height=\"100%\"\n              width=\"100%\"\n              requiredFeatures=\"http://www.w3.org/TR/SVG11/feature#Extensibility\"\n            >\n              <div\n                class=\"d-flex d-col fit-h a-i-center j-c-center\"\n                style=\"padding: 3rem\"\n                xmlns=\"http://www.w3.org/1999/xhtml\"\n              >\n                <p\n                  class=\"text-truncate text-center\"\n                  title=\"{{ activeDatapointGauge.label }}\"\n                >\n                  {{ activeDatapointGauge.label }}\n                </p>\n                @if (!measurement.notFound) {\n                  <p\n                    class=\"center-value text-truncate\"\n                    title=\"{{ measurement.value | number: fractionSize }}\"\n                  >\n                    {{ measurement.value | number: fractionSize }}\n                  </p>\n                } @else {\n                  <p class=\"center-value\">--</p>\n                }\n                <p class=\"center-unit strong\">\n                  {{ activeDatapointGauge.unit || measurement.unit }}\n                </p>\n                <div class=\"center-date-time\">{{ measurement.date | c8yDate: 'mediumDate' }}</div>\n                <div class=\"center-date-time\">{{ measurement.date | c8yDate: 'mediumTime' }}</div>\n              </div>\n            </foreignObject>\n          </svg>\n        </div>\n      }\n    }\n    <div class=\"clearfix\"></div>\n  </div>\n}\n@if (!isInfoGauge) {\n  @if (activeDatapointGauge | infoGaugeCurrentMeasurement | async; as measurement) {\n    <c8y-radial-gauge\n      [activeDatapointGauge]=\"activeDatapointGauge\"\n      [measurement]=\"measurement\"\n      [fractionSize]=\"config.fractionSize\"\n      [gaugeOptions]=\"config.gaugeOptions\"\n      [selectedPresetId]=\"config.selectedPresetId\"\n    ></c8y-radial-gauge>\n  }\n}\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: RadialGaugeViewComponent, selector: "c8y-radial-gauge", inputs: ["activeDatapointGauge", "measurement", "fractionSize", "gaugeOptions", "selectedPresetId"] }, { kind: "pipe", type: InfoGaugeCurrentMeasurementPipe, name: "infoGaugeCurrentMeasurement" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InfoGaugeWidgetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: InfoGaugeWidgetViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-info-gauge-widget-view', host: { class: 'd-contents' }, providers: [MeasurementRealtimeService], standalone: true, imports: [
                         NgStyle,
@@ -943,8 +942,8 @@ class PresetPreviewComponent {
         this.onTouched();
         this.onPresetChange.emit(presetId);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PresetPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: PresetPreviewComponent, isStandalone: true, selector: "c8y-preset-preview", inputs: { ALL_GAUGE_PRESETS: "ALL_GAUGE_PRESETS" }, outputs: { onPresetChange: "onPresetChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PresetPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: PresetPreviewComponent, isStandalone: true, selector: "c8y-preset-preview", inputs: { ALL_GAUGE_PRESETS: "ALL_GAUGE_PRESETS" }, outputs: { onPresetChange: "onPresetChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => PresetPreviewComponent),
@@ -952,7 +951,7 @@ class PresetPreviewComponent {
             }
         ], ngImport: i0, template: "<div class=\"d-grid grid__col--4-4-4 gap-4\">\n  <button\n    class=\"c8y-radial-gauge__preset preset-{{ preset.id }}\"\n    [class.selected]=\"preset.id === selectedPresetId\"\n    [attr.aria-label]=\"preset.name | translate\"\n    type=\"button\"\n    *ngFor=\"let preset of ALL_GAUGE_PRESETS\"\n    (click)=\"emitPresetChange(preset.id)\"\n  >\n    <c8y-radial-gauge\n      class=\"c8y-radial-gauge--square\"\n      *ngIf=\"preset.id !== 'custom'\"\n      [activeDatapointGauge]=\"activeDatapointGauge\"\n      [measurement]=\"measurement\"\n      [fractionSize]=\"2\"\n      [selectedPresetId]=\"preset.id\"\n      [gaugeOptions]=\"preset\"\n    ></c8y-radial-gauge>\n    <span>{{ preset.name | translate }}</span>\n  </button>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RadialGaugeViewComponent, selector: "c8y-radial-gauge", inputs: ["activeDatapointGauge", "measurement", "fractionSize", "gaugeOptions", "selectedPresetId"] }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PresetPreviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PresetPreviewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-preset-preview', standalone: true, imports: [CommonModule, RadialGaugeViewComponent], providers: [
                         {
@@ -967,21 +966,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Output
             }] } });
 
-function ensureAtLeastOneDatapointSelectedAndActive(datapointListAttributes) {
-    return (control) => {
-        const formValue = control.value;
-        for (const listAttributeName of datapointListAttributes) {
-            const valueForList = formValue[listAttributeName];
-            if (!valueForList || !Array.isArray(valueForList)) {
-                continue;
-            }
-            if (valueForList.find(dp => dp.__active)) {
-                return null;
-            }
-        }
-        return { noActiveDatapoint: true };
-    };
-}
 class InfoGaugeWidgetConfigComponent {
     set previewMapSet(template) {
         if (template) {
@@ -997,12 +981,6 @@ class InfoGaugeWidgetConfigComponent {
         this.widgetConfigService = widgetConfigService;
         this.dynamicComponent = dynamicComponent;
         this.datapointSelectionConfig = {};
-        this.defaultFormOptions = {
-            showRedRange: true,
-            showYellowRange: true,
-            showRange: true,
-            selectableChartRenderTypes: []
-        };
         this.showAdvancedOptions = false;
         this.gaugeOptionsString = '';
         this.showAdvancedOptionsLabel = gettext('Show advanced options');
@@ -1032,12 +1010,6 @@ class InfoGaugeWidgetConfigComponent {
             this.datapointSelectionConfig.contextAsset = this.widgetConfig?.context;
         }
         this.initForm();
-        if (this.config?.datapointsLabels) {
-            this.formGroup.patchValue({ datapointsLabels: this.config.datapointsLabels });
-        }
-        if (this.config?.datapointsGauge) {
-            this.formGroup.patchValue({ datapointsGauge: this.config.datapointsGauge });
-        }
         if (typeof this.config?.fractionSize === 'number' && !Number.isNaN(this.config?.fractionSize)) {
             this.formGroup.patchValue({ fractionSize: this.config.fractionSize });
         }
@@ -1052,14 +1024,25 @@ class InfoGaugeWidgetConfigComponent {
         if (isRadialGauge) {
             this.setupRadialGauge();
         }
-        this.formGroup.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(value => {
-            if (value.datapointsGauge) {
-                this.activeDatapointGauge = value.datapointsGauge.find(dp => dp.__active);
+        this.widgetConfigService.currentConfig$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((config) => {
+            const { datapointsGauge, datapointsLabels } = config;
+            if (datapointsGauge) {
+                this.activeDatapointGauge = datapointsGauge.find(dp => dp.__active);
             }
-            if (value.datapointsLabels) {
-                this.activeDatapointLabel = value.datapointsLabels.find(dp => dp.__active);
+            if (datapointsLabels) {
+                this.activeDatapointLabel = datapointsLabels.find(dp => dp.__active);
             }
-            // this.previewConfig = { ...this.previewConfig, gaugeOptions: this.gaugeOptions };
+            this.datapointsLabels = datapointsLabels;
+            this.datapointsGauge = datapointsGauge;
+            this.previewConfig = {
+                ...this.previewConfig,
+                datapointsGauge,
+                datapointsLabels
+            };
+        });
+        this.formGroup.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(value => {
             this.previewConfig = {
                 ...this.previewConfig,
                 ...value,
@@ -1184,19 +1167,13 @@ class InfoGaugeWidgetConfigComponent {
                     Validators.max(this.limits.numberOfDecimalPlacesMax)
                 ]
             ],
-            datapointsLabels: this.formBuilder.control(new Array(), []),
-            datapointsGauge: this.formBuilder.control(new Array(), []),
             gaugePresetId: [this.config.selectedPresetId || 'default']
-        }, {
-            validators: [
-                ensureAtLeastOneDatapointSelectedAndActive(['datapointsLabels', 'datapointsGauge'])
-            ]
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InfoGaugeWidgetConfigComponent, deps: [{ token: i1$3.FormBuilder }, { token: i1$3.NgForm }, { token: i2.WidgetConfigComponent }, { token: i2.WidgetConfigService }, { token: i1.DynamicComponentComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: InfoGaugeWidgetConfigComponent, isStandalone: true, selector: "c8y-info-gauge-widget-config", inputs: { config: "config" }, providers: [MeasurementRealtimeService], viewQueries: [{ propertyName: "editorComponent", first: true, predicate: EditorComponent, descendants: true }, { propertyName: "previewMapSet", first: true, predicate: ["gaugePreview"], descendants: true }], ngImport: i0, template: "<form\n  class=\"fit-h\"\n  [formGroup]=\"formGroup\"\n>\n  @if (isInfoGauge) {\n    <div class=\"m-l-16 m-r-16\">\n      <c8y-form-group class=\"p-t-8\">\n        <label translate>Decimal places</label>\n        <input\n          class=\"form-control\"\n          name=\"fractionSize\"\n          type=\"number\"\n          formControlName=\"fractionSize\"\n          step=\"1\"\n        />\n        <c8y-messages [show]=\"formGroup.controls.fractionSize.errors\"></c8y-messages>\n      </c8y-form-group>\n      @if (formGroup.errors?.noActiveDatapoint) {\n        <div\n          class=\"alert alert-info\"\n          role=\"alert\"\n          translate\n        >\n          At least one data point for the labels or the gauge needs to be selected.\n        </div>\n      }\n      <c8y-datapoint-selection-list\n        class=\"bg-inherit separator-top p-t-16 d-block\"\n        listTitle=\"{{ 'Multiple label and value pairs' | translate }}\"\n        name=\"datapoints\"\n        [defaultFormOptions]=\"defaultFormOptions\"\n        [config]=\"datapointSelectionConfig\"\n        [minActiveCount]=\"0\"\n        formControlName=\"datapointsLabels\"\n      ></c8y-datapoint-selection-list>\n\n      <c8y-datapoint-selection-list\n        class=\"bg-inherit separator-top p-t-16 d-block\"\n        listTitle=\"{{ 'Gauge`display`' | translate }}\"\n        name=\"datapoints\"\n        [defaultFormOptions]=\"defaultFormOptions\"\n        [config]=\"datapointSelectionConfig\"\n        [minActiveCount]=\"0\"\n        [maxActiveCount]=\"1\"\n        formControlName=\"datapointsGauge\"\n      ></c8y-datapoint-selection-list>\n    </div>\n  } @else {\n    <c8y-datapoint-selection-list\n      class=\"bg-inherit d-block\"\n      listTitle=\"{{ 'Data points`display`' | translate }}\"\n      name=\"datapoints\"\n      [defaultFormOptions]=\"defaultFormOptions\"\n      [config]=\"datapointSelectionConfig\"\n      [minActiveCount]=\"0\"\n      [maxActiveCount]=\"1\"\n      formControlName=\"datapointsGauge\"\n    ></c8y-datapoint-selection-list>\n\n    <c8y-form-group class=\"p-t-8 p-r-16 p-l-16\">\n      <label translate>Decimal places</label>\n      <input\n        class=\"form-control\"\n        name=\"fractionSize\"\n        type=\"number\"\n        formControlName=\"fractionSize\"\n        step=\"1\"\n      />\n      <c8y-messages [show]=\"formGroup.controls.fractionSize.errors\"></c8y-messages>\n    </c8y-form-group>\n\n    <div class=\"form-group p-r-16 p-l-16 m-b-0\">\n      <legend>\n        {{ 'Presets' | translate }}\n      </legend>\n      <c8y-preset-preview\n        formControlName=\"gaugePresetId\"\n        [ALL_GAUGE_PRESETS]=\"ALL_GAUGE_PRESETS\"\n        (onPresetChange)=\"onRadioPresetChange($event)\"\n      ></c8y-preset-preview>\n    </div>\n\n    <div class=\"p-16\">\n      <button\n        class=\"btn btn-default\"\n        aria-controls=\"advancedCollapse\"\n        [attr.aria-expanded]=\"showAdvancedOptions\"\n        type=\"button\"\n        (click)=\"showAdvancedOptions = !showAdvancedOptions\"\n      >\n        {{ showAdvancedOptions ? hideAdvancedOptionsLabel : showAdvancedOptionsLabel }}\n      </button>\n    </div>\n\n    <div\n      class=\"collapse\"\n      id=\"advancedCollapse\"\n      [collapse]=\"!showAdvancedOptions\"\n      [isAnimated]=\"true\"\n    >\n      <div\n        class=\"fit-h\"\n        style=\"min-height: 400px\"\n      >\n        <c8y-editor\n          [ngModel]=\"gaugeOptionsString\"\n          (ngModelChange)=\"gaugeJSONChange($event)\"\n          (editorInit)=\"assignSchema()\"\n          [ngModelOptions]=\"{ standalone: true }\"\n          monacoEditorMarkerValidator\n        ></c8y-editor>\n      </div>\n    </div>\n  }\n</form>\n\n<ng-template #gaugePreview>\n  @if (\n    (this.formGroup.value.datapointsGauge?.length > 0 && activeDatapointGauge) ||\n    (this.formGroup.value.datapointsLabels?.length > 0 && activeDatapointLabel)\n  ) {\n    <div style=\"height: 300px\">\n      <c8y-info-gauge-widget-view [config]=\"previewConfig\"></c8y-info-gauge-widget-view>\n    </div>\n  } @else {\n    <div class=\"d-col a-i-start j-c-center\">\n      <c8y-ui-empty-state\n        [icon]=\"'c8y-data-points'\"\n        [title]=\"'No data points selected' | translate\"\n        [subtitle]=\"'Select data point to render content' | translate\"\n        [horizontal]=\"false\"\n        data-cy=\"info-gauge--empty-state-no-data-point-selected\"\n      >\n        <p c8y-guide-docs>\n          <small\n            translate\n            ngNonBindable\n          >\n            Find out more in the\n            <a c8y-guide-href=\"/docs/cockpit/widgets-collection/#info-gauge\">user documentation</a>.\n          </small>\n        </p>\n      </c8y-ui-empty-state>\n    </div>\n  }\n</ng-template>\n", dependencies: [{ kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: i1.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.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: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "ngmodule", type: CollapseModule }, { kind: "directive", type: i4.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: EditorComponent, selector: "c8y-editor", inputs: ["editorOptions", "theme"], outputs: ["editorInit"] }, { kind: "directive", type: MonacoEditorMarkerValidatorDirective, selector: "c8y-editor [monacoEditorMarkerValidator]" }, { kind: "ngmodule", type: DatapointSelectorModule }, { kind: "component", type: i5.DatapointSelectionListComponent, selector: "c8y-datapoint-selection-list", inputs: ["actions", "allowDragAndDrop", "config", "defaultFormOptions", "maxActiveCount", "minActiveCount", "resolveContext", "listTitle"], outputs: ["isValid", "change"] }, { kind: "component", type: PresetPreviewComponent, selector: "c8y-preset-preview", inputs: ["ALL_GAUGE_PRESETS"], outputs: ["onPresetChange"] }, { kind: "component", type: InfoGaugeWidgetViewComponent, selector: "c8y-info-gauge-widget-view", inputs: ["config"] }, { kind: "component", type: GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: InfoGaugeWidgetConfigComponent, deps: [{ token: i1$3.FormBuilder }, { token: i1$3.NgForm }, { token: i2.WidgetConfigComponent }, { token: i2.WidgetConfigService }, { token: i1.DynamicComponentComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: InfoGaugeWidgetConfigComponent, isStandalone: true, selector: "c8y-info-gauge-widget-config", inputs: { config: "config" }, providers: [MeasurementRealtimeService], viewQueries: [{ propertyName: "editorComponent", first: true, predicate: EditorComponent, descendants: true }, { propertyName: "previewMapSet", first: true, predicate: ["gaugePreview"], descendants: true }], ngImport: i0, template: "<form\n  class=\"fit-h\"\n  [formGroup]=\"formGroup\"\n>\n  @if (isInfoGauge) {\n    <div class=\"m-l-16 m-r-16\">\n      <c8y-form-group class=\"p-t-8\">\n        <label translate>Decimal places</label>\n        <input\n          class=\"form-control\"\n          name=\"fractionSize\"\n          type=\"number\"\n          formControlName=\"fractionSize\"\n          step=\"1\"\n        />\n        <c8y-messages [show]=\"formGroup.controls.fractionSize.errors\"></c8y-messages>\n      </c8y-form-group>\n      @if (formGroup.errors?.noActiveDatapoint) {\n        <div\n          class=\"alert alert-info\"\n          role=\"alert\"\n          translate\n        >\n          At least one data point for the labels or the gauge needs to be selected.\n        </div>\n      }\n    </div>\n  } @else {\n    <c8y-form-group class=\"p-t-8 p-r-16 p-l-16\">\n      <label translate>Decimal places</label>\n      <input\n        class=\"form-control\"\n        name=\"fractionSize\"\n        type=\"number\"\n        formControlName=\"fractionSize\"\n        step=\"1\"\n      />\n      <c8y-messages [show]=\"formGroup.controls.fractionSize.errors\"></c8y-messages>\n    </c8y-form-group>\n\n    <div class=\"form-group p-r-16 p-l-16 m-b-0\">\n      <legend>\n        {{ 'Presets' | translate }}\n      </legend>\n      <c8y-preset-preview\n        formControlName=\"gaugePresetId\"\n        [ALL_GAUGE_PRESETS]=\"ALL_GAUGE_PRESETS\"\n        (onPresetChange)=\"onRadioPresetChange($event)\"\n      ></c8y-preset-preview>\n    </div>\n\n    <div class=\"p-16\">\n      <button\n        class=\"btn btn-default\"\n        aria-controls=\"advancedCollapse\"\n        [attr.aria-expanded]=\"showAdvancedOptions\"\n        type=\"button\"\n        (click)=\"showAdvancedOptions = !showAdvancedOptions\"\n      >\n        {{ showAdvancedOptions ? hideAdvancedOptionsLabel : showAdvancedOptionsLabel }}\n      </button>\n    </div>\n\n    <div\n      class=\"collapse\"\n      id=\"advancedCollapse\"\n      [collapse]=\"!showAdvancedOptions\"\n      [isAnimated]=\"true\"\n    >\n      <div\n        class=\"fit-h\"\n        style=\"min-height: 400px\"\n      >\n        <c8y-editor\n          [ngModel]=\"gaugeOptionsString\"\n          (ngModelChange)=\"gaugeJSONChange($event)\"\n          (editorInit)=\"assignSchema()\"\n          [ngModelOptions]=\"{ standalone: true }\"\n          monacoEditorMarkerValidator\n        ></c8y-editor>\n      </div>\n    </div>\n  }\n</form>\n\n<ng-template #gaugePreview>\n  @if (\n    (datapointsGauge?.length > 0 && activeDatapointGauge) ||\n    (datapointsLabels?.length > 0 && activeDatapointLabel)\n  ) {\n    <div>\n      <c8y-info-gauge-widget-view [config]=\"previewConfig\"></c8y-info-gauge-widget-view>\n    </div>\n  } @else {\n    <div class=\"d-col a-i-start j-c-center\">\n      <c8y-ui-empty-state\n        [icon]=\"'c8y-data-points'\"\n        [title]=\"'No data points selected' | translate\"\n        [subtitle]=\"'Select data point to render content' | translate\"\n        [horizontal]=\"false\"\n        data-cy=\"info-gauge--empty-state-no-data-point-selected\"\n      >\n        <p c8y-guide-docs>\n          <small\n            translate\n            ngNonBindable\n          >\n            Find out more in the\n            <a c8y-guide-href=\"/docs/cockpit/widgets-collection/#info-gauge\">user documentation</a>.\n          </small>\n        </p>\n      </c8y-ui-empty-state>\n    </div>\n  }\n</ng-template>\n", dependencies: [{ kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: i1.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.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: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "ngmodule", type: CollapseModule }, { kind: "directive", type: i4.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: EditorComponent, selector: "c8y-editor", inputs: ["editorOptions", "theme"], outputs: ["editorInit"] }, { kind: "directive", type: MonacoEditorMarkerValidatorDirective, selector: "c8y-editor [monacoEditorMarkerValidator]" }, { kind: "ngmodule", type: DatapointSelectorModule }, { kind: "component", type: PresetPreviewComponent, selector: "c8y-preset-preview", inputs: ["ALL_GAUGE_PRESETS"], outputs: ["onPresetChange"] }, { kind: "component", type: InfoGaugeWidgetViewComponent, selector: "c8y-info-gauge-widget-view", inputs: ["config"] }, { kind: "component", type: GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InfoGaugeWidgetConfigComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: InfoGaugeWidgetConfigComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-info-gauge-widget-config', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], providers: [MeasurementRealtimeService], standalone: true, imports: [
                         FormGroupComponent,
@@ -1211,7 +1188,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         PresetPreviewComponent,
                         InfoGaugeWidgetViewComponent,
                         GuideDocsComponent
-                    ], template: "<form\n  class=\"fit-h\"\n  [formGroup]=\"formGroup\"\n>\n  @if (isInfoGauge) {\n    <div class=\"m-l-16 m-r-16\">\n      <c8y-form-group class=\"p-t-8\">\n        <label translate>Decimal places</label>\n        <input\n          class=\"form-control\"\n          name=\"fractionSize\"\n          type=\"number\"\n          formControlName=\"fractionSize\"\n          step=\"1\"\n        />\n        <c8y-messages [show]=\"formGroup.controls.fractionSize.errors\"></c8y-messages>\n      </c8y-form-group>\n      @if (formGroup.errors?.noActiveDatapoint) {\n        <div\n          class=\"alert alert-info\"\n          role=\"alert\"\n          translate\n        >\n          At least one data point for the labels or the gauge needs to be selected.\n        </div>\n      }\n      <c8y-datapoint-selection-list\n        class=\"bg-inherit separator-top p-t-16 d-block\"\n        listTitle=\"{{ 'Multiple label and value pairs' | translate }}\"\n        name=\"datapoints\"\n        [defaultFormOptions]=\"defaultFormOptions\"\n        [config]=\"datapointSelectionConfig\"\n        [minActiveCount]=\"0\"\n        formControlName=\"datapointsLabels\"\n      ></c8y-datapoint-selection-list>\n\n      <c8y-datapoint-selection-list\n        class=\"bg-inherit separator-top p-t-16 d-block\"\n        listTitle=\"{{ 'Gauge`display`' | translate }}\"\n        name=\"datapoints\"\n        [defaultFormOptions]=\"defaultFormOptions\"\n        [config]=\"datapointSelectionConfig\"\n        [minActiveCount]=\"0\"\n        [maxActiveCount]=\"1\"\n        formControlName=\"datapointsGauge\"\n      ></c8y-datapoint-selection-list>\n    </div>\n  } @else {\n    <c8y-datapoint-selection-list\n      class=\"bg-inherit d-block\"\n      listTitle=\"{{ 'Data points`display`' | translate }}\"\n      name=\"datapoints\"\n      [defaultFormOptions]=\"defaultFormOptions\"\n      [config]=\"datapointSelectionConfig\"\n      [minActiveCount]=\"0\"\n      [maxActiveCount]=\"1\"\n      formControlName=\"datapointsGauge\"\n    ></c8y-datapoint-selection-list>\n\n    <c8y-form-group class=\"p-t-8 p-r-16 p-l-16\">\n      <label translate>Decimal places</label>\n      <input\n        class=\"form-control\"\n        name=\"fractionSize\"\n        type=\"number\"\n        formControlName=\"fractionSize\"\n        step=\"1\"\n      />\n      <c8y-messages [show]=\"formGroup.controls.fractionSize.errors\"></c8y-messages>\n    </c8y-form-group>\n\n    <div class=\"form-group p-r-16 p-l-16 m-b-0\">\n      <legend>\n        {{ 'Presets' | translate }}\n      </legend>\n      <c8y-preset-preview\n        formControlName=\"gaugePresetId\"\n        [ALL_GAUGE_PRESETS]=\"ALL_GAUGE_PRESETS\"\n        (onPresetChange)=\"onRadioPresetChange($event)\"\n      ></c8y-preset-preview>\n    </div>\n\n    <div class=\"p-16\">\n      <button\n        class=\"btn btn-default\"\n        aria-controls=\"advancedCollapse\"\n        [attr.aria-expanded]=\"showAdvancedOptions\"\n        type=\"button\"\n        (click)=\"showAdvancedOptions = !showAdvancedOptions\"\n      >\n        {{ showAdvancedOptions ? hideAdvancedOptionsLabel : showAdvancedOptionsLabel }}\n      </button>\n    </div>\n\n    <div\n      class=\"collapse\"\n      id=\"advancedCollapse\"\n      [collapse]=\"!showAdvancedOptions\"\n      [isAnimated]=\"true\"\n    >\n      <div\n        class=\"fit-h\"\n        style=\"min-height: 400px\"\n      >\n        <c8y-editor\n          [ngModel]=\"gaugeOptionsString\"\n          (ngModelChange)=\"gaugeJSONChange($event)\"\n          (editorInit)=\"assignSchema()\"\n          [ngModelOptions]=\"{ standalone: true }\"\n          monacoEditorMarkerValidator\n        ></c8y-editor>\n      </div>\n    </div>\n  }\n</form>\n\n<ng-template #gaugePreview>\n  @if (\n    (this.formGroup.value.datapointsGauge?.length > 0 && activeDatapointGauge) ||\n    (this.formGroup.value.datapointsLabels?.length > 0 && activeDatapointLabel)\n  ) {\n    <div style=\"height: 300px\">\n      <c8y-info-gauge-widget-view [config]=\"previewConfig\"></c8y-info-gauge-widget-view>\n    </div>\n  } @else {\n    <div class=\"d-col a-i-start j-c-center\">\n      <c8y-ui-empty-state\n        [icon]=\"'c8y-data-points'\"\n        [title]=\"'No data points selected' | translate\"\n        [subtitle]=\"'Select data point to render content' | translate\"\n        [horizontal]=\"false\"\n        data-cy=\"info-gauge--empty-state-no-data-point-selected\"\n      >\n        <p c8y-guide-docs>\n          <small\n            translate\n            ngNonBindable\n          >\n            Find out more in the\n            <a c8y-guide-href=\"/docs/cockpit/widgets-collection/#info-gauge\">user documentation</a>.\n          </small>\n        </p>\n      </c8y-ui-empty-state>\n    </div>\n  }\n</ng-template>\n" }]
+                    ], template: "<form\n  class=\"fit-h\"\n  [formGroup]=\"formGroup\"\n>\n  @if (isInfoGauge) {\n    <div class=\"m-l-16 m-r-16\">\n      <c8y-form-group class=\"p-t-8\">\n        <label translate>Decimal places</label>\n        <input\n          class=\"form-control\"\n          name=\"fractionSize\"\n          type=\"number\"\n          formControlName=\"fractionSize\"\n          step=\"1\"\n        />\n        <c8y-messages [show]=\"formGroup.controls.fractionSize.errors\"></c8y-messages>\n      </c8y-form-group>\n      @if (formGroup.errors?.noActiveDatapoint) {\n        <div\n          class=\"alert alert-info\"\n          role=\"alert\"\n          translate\n        >\n          At least one data point for the labels or the gauge needs to be selected.\n        </div>\n      }\n    </div>\n  } @else {\n    <c8y-form-group class=\"p-t-8 p-r-16 p-l-16\">\n      <label translate>Decimal places</label>\n      <input\n        class=\"form-control\"\n        name=\"fractionSize\"\n        type=\"number\"\n        formControlName=\"fractionSize\"\n        step=\"1\"\n      />\n      <c8y-messages [show]=\"formGroup.controls.fractionSize.errors\"></c8y-messages>\n    </c8y-form-group>\n\n    <div class=\"form-group p-r-16 p-l-16 m-b-0\">\n      <legend>\n        {{ 'Presets' | translate }}\n      </legend>\n      <c8y-preset-preview\n        formControlName=\"gaugePresetId\"\n        [ALL_GAUGE_PRESETS]=\"ALL_GAUGE_PRESETS\"\n        (onPresetChange)=\"onRadioPresetChange($event)\"\n      ></c8y-preset-preview>\n    </div>\n\n    <div class=\"p-16\">\n      <button\n        class=\"btn btn-default\"\n        aria-controls=\"advancedCollapse\"\n        [attr.aria-expanded]=\"showAdvancedOptions\"\n        type=\"button\"\n        (click)=\"showAdvancedOptions = !showAdvancedOptions\"\n      >\n        {{ showAdvancedOptions ? hideAdvancedOptionsLabel : showAdvancedOptionsLabel }}\n      </button>\n    </div>\n\n    <div\n      class=\"collapse\"\n      id=\"advancedCollapse\"\n      [collapse]=\"!showAdvancedOptions\"\n      [isAnimated]=\"true\"\n    >\n      <div\n        class=\"fit-h\"\n        style=\"min-height: 400px\"\n      >\n        <c8y-editor\n          [ngModel]=\"gaugeOptionsString\"\n          (ngModelChange)=\"gaugeJSONChange($event)\"\n          (editorInit)=\"assignSchema()\"\n          [ngModelOptions]=\"{ standalone: true }\"\n          monacoEditorMarkerValidator\n        ></c8y-editor>\n      </div>\n    </div>\n  }\n</form>\n\n<ng-template #gaugePreview>\n  @if (\n    (datapointsGauge?.length > 0 && activeDatapointGauge) ||\n    (datapointsLabels?.length > 0 && activeDatapointLabel)\n  ) {\n    <div>\n      <c8y-info-gauge-widget-view [config]=\"previewConfig\"></c8y-info-gauge-widget-view>\n    </div>\n  } @else {\n    <div class=\"d-col a-i-start j-c-center\">\n      <c8y-ui-empty-state\n        [icon]=\"'c8y-data-points'\"\n        [title]=\"'No data points selected' | translate\"\n        [subtitle]=\"'Select data point to render content' | translate\"\n        [horizontal]=\"false\"\n        data-cy=\"info-gauge--empty-state-no-data-point-selected\"\n      >\n        <p c8y-guide-docs>\n          <small\n            translate\n            ngNonBindable\n          >\n            Find out more in the\n            <a c8y-guide-href=\"/docs/cockpit/widgets-collection/#info-gauge\">user documentation</a>.\n          </small>\n        </p>\n      </c8y-ui-empty-state>\n    </div>\n  }\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i1$3.FormBuilder }, { type: i1$3.NgForm }, { type: i2.WidgetConfigComponent }, { type: i2.WidgetConfigService }, { type: i1.DynamicComponentComponent, decorators: [{
                     type: Optional
                 }] }], propDecorators: { config: [{