@c8y/ngx-components 1023.5.3 → 1023.7.0

package/fesm2022/c8y-ngx-components-widgets-implementations-device-control-message.mjs

@@ -72,10 +72,10 @@ class DeviceControlMessageWidgetViewComponent {
             this.alert.addServerFailure(e);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: DeviceControlMessageWidgetViewComponent, deps: [{ token: i1.AlertService }, { token: i2.OperationService }, { token: i3.TranslateService }, { token: i4.ContextDashboardComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: DeviceControlMessageWidgetViewComponent, isStandalone: true, selector: "c8y-device-control-message-widget-view", inputs: { config: "config" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"operationSupportedByDevice$ | async\" class=\"input-group p-16\">\n  <input\n    type=\"text\"\n    class=\"form-control\"\n    data-cy=\"c8y-device-control-message-widget-view--message-textbox\"\n    [(ngModel)]=\"messageToBeSent\"\n    placeholder=\"{{ 'Message' | translate }}\"\n  />\n  <span class=\"input-group-btn\">\n    <button\n      title=\"{{ 'Send' | translate }}\"\n      class=\"btn btn-primary\"\n      data-cy=\"c8y-device-control-message-widget-view--send-button\"\n      (click)=\"sendMessage()\"\n      [disabled]=\"!messageToBeSent\"\n      translate\n    >\n      Send\n    </button>\n  </span>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DeviceControlMessageWidgetViewComponent, deps: [{ token: i1.AlertService }, { token: i2.OperationService }, { token: i3.TranslateService }, { token: i4.ContextDashboardComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: DeviceControlMessageWidgetViewComponent, isStandalone: true, selector: "c8y-device-control-message-widget-view", inputs: { config: "config" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"operationSupportedByDevice$ | async\" class=\"input-group p-16\">\n  <input\n    type=\"text\"\n    class=\"form-control\"\n    data-cy=\"c8y-device-control-message-widget-view--message-textbox\"\n    [(ngModel)]=\"messageToBeSent\"\n    placeholder=\"{{ 'Message' | translate }}\"\n  />\n  <span class=\"input-group-btn\">\n    <button\n      title=\"{{ 'Send' | translate }}\"\n      class=\"btn btn-primary\"\n      data-cy=\"c8y-device-control-message-widget-view--send-button\"\n      (click)=\"sendMessage()\"\n      [disabled]=\"!messageToBeSent\"\n      translate\n    >\n      Send\n    </button>\n  </span>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: DeviceControlMessageWidgetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DeviceControlMessageWidgetViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-device-control-message-widget-view', standalone: true, imports: [CoreModule, ReactiveFormsModule], template: "<div *ngIf=\"operationSupportedByDevice$ | async\" class=\"input-group p-16\">\n  <input\n    type=\"text\"\n    class=\"form-control\"\n    data-cy=\"c8y-device-control-message-widget-view--message-textbox\"\n    [(ngModel)]=\"messageToBeSent\"\n    placeholder=\"{{ 'Message' | translate }}\"\n  />\n  <span class=\"input-group-btn\">\n    <button\n      title=\"{{ 'Send' | translate }}\"\n      class=\"btn btn-primary\"\n      data-cy=\"c8y-device-control-message-widget-view--send-button\"\n      (click)=\"sendMessage()\"\n      [disabled]=\"!messageToBeSent\"\n      translate\n    >\n      Send\n    </button>\n  </span>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.AlertService }, { type: i2.OperationService }, { type: i3.TranslateService }, { type: i4.ContextDashboardComponent, decorators: [{

package/fesm2022/c8y-ngx-components-widgets-implementations-device-control-message.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"c8y-ngx-components-widgets-implementations-device-control-message.mjs","sources":["../../widgets/implementations/device-control-message/device-control-message-widget-view/device-control-message-widget-view.component.ts","../../widgets/implementations/device-control-message/device-control-message-widget-view/device-control-message-widget-view.component.html","../../widgets/implementations/device-control-message/c8y-ngx-components-widgets-implementations-device-control-message.ts"],"sourcesContent":["import { Component, Input, OnChanges, OnDestroy, OnInit, Optional } from '@angular/core';\nimport { gettext } from '@c8y/ngx-components/gettext';\nimport {\n  AlertService,\n  CoreModule,\n  DynamicComponent,\n  DynamicComponentAlert,\n  DynamicComponentAlertAggregator\n} from '@c8y/ngx-components';\nimport { IManagedObject, OperationService } from '@c8y/client';\nimport { TranslateService } from '@ngx-translate/core';\nimport { BehaviorSubject, Observable, Subscription } from 'rxjs';\nimport { map, shareReplay } from 'rxjs/operators';\nimport { ContextDashboardComponent } from '@c8y/ngx-components/context-dashboard';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nexport type DeviceControlMessageWidgetConfig = { device?: IManagedObject };\n\n@Component({\n  selector: 'c8y-device-control-message-widget-view',\n  templateUrl: './device-control-message-widget-view.component.html',\n  standalone: true,\n  imports: [CoreModule, ReactiveFormsModule]\n})\nexport class DeviceControlMessageWidgetViewComponent\n  implements OnChanges, DynamicComponent, OnDestroy, OnInit\n{\n  @Input() config: DeviceControlMessageWidgetConfig;\n  operationSupportedByDevice$: Observable<boolean>;\n  messageToBeSent = '';\n  alerts: DynamicComponentAlertAggregator;\n  private readonly operationAttribute = 'c8y_Message';\n  private currentDevice = new BehaviorSubject<IManagedObject | null>(null);\n  private operationSupportedByDeviceSubscription: Subscription;\n\n  constructor(\n    private alert: AlertService,\n    private operation: OperationService,\n    private translate: TranslateService,\n    @Optional() private dashboard: ContextDashboardComponent\n  ) {\n    this.operationSupportedByDevice$ = this.currentDevice.pipe(\n      map(device => {\n        if (!device) {\n          return false;\n        }\n        const supportedOperations = device.c8y_SupportedOperations;\n        if (supportedOperations && Array.isArray(supportedOperations)) {\n          return supportedOperations.includes(this.operationAttribute);\n        }\n        return false;\n      }),\n      shareReplay({ refCount: true, bufferSize: 1 })\n    );\n  }\n\n  ngOnInit(): void {\n    if (this.dashboard?.isDeviceTypeDashboard && this.dashboard?.context?.id) {\n      this.currentDevice.next(this.dashboard.context);\n    }\n    this.operationSupportedByDeviceSubscription = this.operationSupportedByDevice$.subscribe(\n      supported => {\n        if (!supported) {\n          this.alerts.addAlerts(\n            new DynamicComponentAlert({\n              type: 'warning',\n              text: gettext('Operation not supported by this device')\n            })\n          );\n        } else {\n          this.alerts.clear();\n        }\n      }\n    );\n  }\n\n  ngOnDestroy(): void {\n    this.operationSupportedByDeviceSubscription?.unsubscribe();\n  }\n\n  ngOnChanges(): void {\n    if (!this.dashboard?.isDeviceTypeDashboard && this.config.device) {\n      this.currentDevice.next(this.config.device);\n    }\n  }\n\n  async sendMessage() {\n    const msg = this.messageToBeSent;\n    const operationDescription = this.translate.instant(gettext('Send message \"{{msg}}\"'), { msg });\n    try {\n      await this.operation.create({\n        deviceId: this.currentDevice.value?.id,\n        description: operationDescription,\n        [this.operationAttribute]: { text: msg }\n      });\n      this.alert.success(gettext('Message will be sent.'));\n      this.messageToBeSent = '';\n    } catch (e) {\n      this.alert.addServerFailure(e);\n    }\n  }\n}\n","<div *ngIf=\"operationSupportedByDevice$ | async\" class=\"input-group p-16\">\n  <input\n    type=\"text\"\n    class=\"form-control\"\n    data-cy=\"c8y-device-control-message-widget-view--message-textbox\"\n    [(ngModel)]=\"messageToBeSent\"\n    placeholder=\"{{ 'Message' | translate }}\"\n  />\n  <span class=\"input-group-btn\">\n    <button\n      title=\"{{ 'Send' | translate }}\"\n      class=\"btn btn-primary\"\n      data-cy=\"c8y-device-control-message-widget-view--send-button\"\n      (click)=\"sendMessage()\"\n      [disabled]=\"!messageToBeSent\"\n      translate\n    >\n      Send\n    </button>\n  </span>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;;MAwBa,uCAAuC,CAAA;AAWlD,IAAA,WAAA,CACU,KAAmB,EACnB,SAA2B,EAC3B,SAA2B,EACf,SAAoC,EAAA;QAHhD,IAAA,CAAA,KAAK,GAAL,KAAK;QACL,IAAA,CAAA,SAAS,GAAT,SAAS;QACT,IAAA,CAAA,SAAS,GAAT,SAAS;QACG,IAAA,CAAA,SAAS,GAAT,SAAS;QAV/B,IAAA,CAAA,eAAe,GAAG,EAAE;QAEH,IAAA,CAAA,kBAAkB,GAAG,aAAa;AAC3C,QAAA,IAAA,CAAA,aAAa,GAAG,IAAI,eAAe,CAAwB,IAAI,CAAC;AAStE,QAAA,IAAI,CAAC,2BAA2B,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CACxD,GAAG,CAAC,MAAM,IAAG;YACX,IAAI,CAAC,MAAM,EAAE;AACX,gBAAA,OAAO,KAAK;YACd;AACA,YAAA,MAAM,mBAAmB,GAAG,MAAM,CAAC,uBAAuB;YAC1D,IAAI,mBAAmB,IAAI,KAAK,CAAC,OAAO,CAAC,mBAAmB,CAAC,EAAE;gBAC7D,OAAO,mBAAmB,CAAC,QAAQ,CAAC,IAAI,CAAC,kBAAkB,CAAC;YAC9D;AACA,YAAA,OAAO,KAAK;AACd,QAAA,CAAC,CAAC,EACF,WAAW,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,EAAE,CAAC,CAC/C;IACH;IAEA,QAAQ,GAAA;AACN,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE,qBAAqB,IAAI,IAAI,CAAC,SAAS,EAAE,OAAO,EAAE,EAAE,EAAE;YACxE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC;QACjD;QACA,IAAI,CAAC,sCAAsC,GAAG,IAAI,CAAC,2BAA2B,CAAC,SAAS,CACtF,SAAS,IAAG;YACV,IAAI,CAAC,SAAS,EAAE;AACd,gBAAA,IAAI,CAAC,MAAM,CAAC,SAAS,CACnB,IAAI,qBAAqB,CAAC;AACxB,oBAAA,IAAI,EAAE,SAAS;AACf,oBAAA,IAAI,EAAE,OAAO,CAAC,wCAAwC;AACvD,iBAAA,CAAC,CACH;YACH;iBAAO;AACL,gBAAA,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE;YACrB;AACF,QAAA,CAAC,CACF;IACH;IAEA,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,sCAAsC,EAAE,WAAW,EAAE;IAC5D;IAEA,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,qBAAqB,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE;YAChE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC;QAC7C;IACF;AAEA,IAAA,MAAM,WAAW,GAAA;AACf,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,eAAe;AAChC,QAAA,MAAM,oBAAoB,GAAG,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,wBAAwB,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC;AAC/F,QAAA,IAAI;AACF,YAAA,MAAM,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;AAC1B,gBAAA,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,EAAE;AACtC,gBAAA,WAAW,EAAE,oBAAoB;gBACjC,CAAC,IAAI,CAAC,kBAAkB,GAAG,EAAE,IAAI,EAAE,GAAG;AACvC,aAAA,CAAC;YACF,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,uBAAuB,CAAC,CAAC;AACpD,YAAA,IAAI,CAAC,eAAe,GAAG,EAAE;QAC3B;QAAE,OAAO,CAAC,EAAE;AACV,YAAA,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC;QAChC;IACF;8GA5EW,uCAAuC,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,YAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,yBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAvC,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,uCAAuC,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,wCAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECxBpD,ioBAqBA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDCY,UAAU,kzBAAE,mBAAmB,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,IAAA,EAAA,WAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAE9B,uCAAuC,EAAA,UAAA,EAAA,CAAA;kBANnD,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,wCAAwC,cAEtC,IAAI,EAAA,OAAA,EACP,CAAC,UAAU,EAAE,mBAAmB,CAAC,EAAA,QAAA,EAAA,ioBAAA,EAAA;;0BAiBvC;yCAZM,MAAM,EAAA,CAAA;sBAAd;;;AE3BH;;AAEG;;;;"}
+{"version":3,"file":"c8y-ngx-components-widgets-implementations-device-control-message.mjs","sources":["../../widgets/implementations/device-control-message/device-control-message-widget-view/device-control-message-widget-view.component.ts","../../widgets/implementations/device-control-message/device-control-message-widget-view/device-control-message-widget-view.component.html","../../widgets/implementations/device-control-message/c8y-ngx-components-widgets-implementations-device-control-message.ts"],"sourcesContent":["import { Component, Input, OnChanges, OnDestroy, OnInit, Optional } from '@angular/core';\nimport { gettext } from '@c8y/ngx-components/gettext';\nimport {\n  AlertService,\n  CoreModule,\n  DynamicComponent,\n  DynamicComponentAlert,\n  DynamicComponentAlertAggregator\n} from '@c8y/ngx-components';\nimport { IManagedObject, OperationService } from '@c8y/client';\nimport { TranslateService } from '@ngx-translate/core';\nimport { BehaviorSubject, Observable, Subscription } from 'rxjs';\nimport { map, shareReplay } from 'rxjs/operators';\nimport { ContextDashboardComponent } from '@c8y/ngx-components/context-dashboard';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nexport type DeviceControlMessageWidgetConfig = { device?: IManagedObject };\n\n@Component({\n  selector: 'c8y-device-control-message-widget-view',\n  templateUrl: './device-control-message-widget-view.component.html',\n  standalone: true,\n  imports: [CoreModule, ReactiveFormsModule]\n})\nexport class DeviceControlMessageWidgetViewComponent\n  implements OnChanges, DynamicComponent, OnDestroy, OnInit\n{\n  @Input() config: DeviceControlMessageWidgetConfig;\n  operationSupportedByDevice$: Observable<boolean>;\n  messageToBeSent = '';\n  alerts: DynamicComponentAlertAggregator;\n  private readonly operationAttribute = 'c8y_Message';\n  private currentDevice = new BehaviorSubject<IManagedObject | null>(null);\n  private operationSupportedByDeviceSubscription: Subscription;\n\n  constructor(\n    private alert: AlertService,\n    private operation: OperationService,\n    private translate: TranslateService,\n    @Optional() private dashboard: ContextDashboardComponent\n  ) {\n    this.operationSupportedByDevice$ = this.currentDevice.pipe(\n      map(device => {\n        if (!device) {\n          return false;\n        }\n        const supportedOperations = device.c8y_SupportedOperations;\n        if (supportedOperations && Array.isArray(supportedOperations)) {\n          return supportedOperations.includes(this.operationAttribute);\n        }\n        return false;\n      }),\n      shareReplay({ refCount: true, bufferSize: 1 })\n    );\n  }\n\n  ngOnInit(): void {\n    if (this.dashboard?.isDeviceTypeDashboard && this.dashboard?.context?.id) {\n      this.currentDevice.next(this.dashboard.context);\n    }\n    this.operationSupportedByDeviceSubscription = this.operationSupportedByDevice$.subscribe(\n      supported => {\n        if (!supported) {\n          this.alerts.addAlerts(\n            new DynamicComponentAlert({\n              type: 'warning',\n              text: gettext('Operation not supported by this device')\n            })\n          );\n        } else {\n          this.alerts.clear();\n        }\n      }\n    );\n  }\n\n  ngOnDestroy(): void {\n    this.operationSupportedByDeviceSubscription?.unsubscribe();\n  }\n\n  ngOnChanges(): void {\n    if (!this.dashboard?.isDeviceTypeDashboard && this.config.device) {\n      this.currentDevice.next(this.config.device);\n    }\n  }\n\n  async sendMessage() {\n    const msg = this.messageToBeSent;\n    const operationDescription = this.translate.instant(gettext('Send message \"{{msg}}\"'), { msg });\n    try {\n      await this.operation.create({\n        deviceId: this.currentDevice.value?.id,\n        description: operationDescription,\n        [this.operationAttribute]: { text: msg }\n      });\n      this.alert.success(gettext('Message will be sent.'));\n      this.messageToBeSent = '';\n    } catch (e) {\n      this.alert.addServerFailure(e);\n    }\n  }\n}\n","<div *ngIf=\"operationSupportedByDevice$ | async\" class=\"input-group p-16\">\n  <input\n    type=\"text\"\n    class=\"form-control\"\n    data-cy=\"c8y-device-control-message-widget-view--message-textbox\"\n    [(ngModel)]=\"messageToBeSent\"\n    placeholder=\"{{ 'Message' | translate }}\"\n  />\n  <span class=\"input-group-btn\">\n    <button\n      title=\"{{ 'Send' | translate }}\"\n      class=\"btn btn-primary\"\n      data-cy=\"c8y-device-control-message-widget-view--send-button\"\n      (click)=\"sendMessage()\"\n      [disabled]=\"!messageToBeSent\"\n      translate\n    >\n      Send\n    </button>\n  </span>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/c8y-ngx-components-widgets-implementations-device-management-welcome.mjs

@@ -84,10 +84,10 @@ class WelcomeToDeviceManagementComponent {
         }
         return navNode;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: WelcomeToDeviceManagementComponent, deps: [{ token: i1.Router }, { token: i2.NavigatorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: WelcomeToDeviceManagementComponent, isStandalone: true, selector: "c8y-welcome-to-devicemanagement", ngImport: i0, template: "<div\n  class=\"welcome-widget\"\n  tabindex=\"0\"\n>\n  <div\n    class=\"p-16 text-center\"\n    *ngIf=\"isLoading\"\n  >\n    <c8y-loading></c8y-loading>\n  </div>\n  <div\n    class=\"d-flex fit-h\"\n    *ngIf=\"!isLoading\"\n  >\n    <div class=\"col-xs-12 a-s-stretch col-md-12\">\n      <div class=\"card-group interact-grid fit-h\">\n        <div\n          class=\"col-xs-4 no-gutter\"\n          *ngFor=\"let link of quickLinks\"\n        >\n          <button\n            class=\"btn-clean card text-pre-normal\"\n            [title]=\"link.label | translate\"\n            type=\"button\"\n            [ngClass]=\"{ 'm-b-0': true }\"\n            (click)=\"link.click ? link.click() : false\"\n            c8yProductExperience\n            [actionName]=\"'welcomeWidgetClicked'\"\n            [actionData]=\"{ link: link.label }\"\n            data-cy=\"devicemanagement-welcome--quick-link\"\n          >\n            <c8y-quick-link\n              [icon]=\"link.icon\"\n              [label]=\"link.label\"\n            ></c8y-quick-link>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: QuickLinkComponent, selector: "c8y-quick-link", inputs: ["icon", "label"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WelcomeToDeviceManagementComponent, deps: [{ token: i1.Router }, { token: i2.NavigatorService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: WelcomeToDeviceManagementComponent, isStandalone: true, selector: "c8y-welcome-to-devicemanagement", ngImport: i0, template: "<div\n  class=\"welcome-widget\"\n  tabindex=\"0\"\n>\n  <div\n    class=\"p-16 text-center\"\n    *ngIf=\"isLoading\"\n  >\n    <c8y-loading></c8y-loading>\n  </div>\n  <div\n    class=\"d-flex fit-h\"\n    *ngIf=\"!isLoading\"\n  >\n    <div class=\"col-xs-12 a-s-stretch col-md-12\">\n      <div class=\"card-group interact-grid fit-h\">\n        <div\n          class=\"col-xs-4 no-gutter\"\n          *ngFor=\"let link of quickLinks\"\n        >\n          <button\n            class=\"btn-clean card text-pre-normal\"\n            [title]=\"link.label | translate\"\n            type=\"button\"\n            [ngClass]=\"{ 'm-b-0': true }\"\n            (click)=\"link.click ? link.click() : false\"\n            c8yProductExperience\n            [actionName]=\"'welcomeWidgetClicked'\"\n            [actionData]=\"{ link: link.label }\"\n            data-cy=\"devicemanagement-welcome--quick-link\"\n          >\n            <c8y-quick-link\n              [icon]=\"link.icon\"\n              [label]=\"link.label\"\n            ></c8y-quick-link>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: QuickLinkComponent, selector: "c8y-quick-link", inputs: ["icon", "label"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: WelcomeToDeviceManagementComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WelcomeToDeviceManagementComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-welcome-to-devicemanagement', imports: [
                         NgIf,
@@ -104,11 +104,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
  * @deprecated
  */
 class DeviceManagementWelcomeWidgetModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: DeviceManagementWelcomeWidgetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: DeviceManagementWelcomeWidgetModule, imports: [CoreModule, QuickLinkModule, RouterModule, WelcomeToDeviceManagementComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: DeviceManagementWelcomeWidgetModule, imports: [CoreModule, QuickLinkModule, RouterModule, WelcomeToDeviceManagementComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DeviceManagementWelcomeWidgetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: DeviceManagementWelcomeWidgetModule, imports: [CoreModule, QuickLinkModule, RouterModule, WelcomeToDeviceManagementComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DeviceManagementWelcomeWidgetModule, imports: [CoreModule, QuickLinkModule, RouterModule, WelcomeToDeviceManagementComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: DeviceManagementWelcomeWidgetModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DeviceManagementWelcomeWidgetModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CoreModule, QuickLinkModule, RouterModule, WelcomeToDeviceManagementComponent]

package/fesm2022/c8y-ngx-components-widgets-implementations-device-management-welcome.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"c8y-ngx-components-widgets-implementations-device-management-welcome.mjs","sources":["../../widgets/implementations/device-management-welcome/welcome.component.ts","../../widgets/implementations/device-management-welcome/welcome.component.html","../../widgets/implementations/device-management-welcome/device-management-welcome-widget.module.ts","../../widgets/implementations/device-management-welcome/c8y-ngx-components-widgets-implementations-device-management-welcome.ts"],"sourcesContent":["import { Component, OnDestroy, OnInit } from '@angular/core';\nimport { Router } from '@angular/router';\nimport { gettext } from '@c8y/ngx-components/gettext';\nimport {\n  DocLink,\n  NavigatorNode,\n  NavigatorService,\n  LoadingComponent,\n  ProductExperienceDirective,\n  QuickLinkComponent,\n  C8yTranslatePipe\n} from '@c8y/ngx-components';\nimport { Subscription } from 'rxjs';\nimport { NgIf, NgFor, NgClass } from '@angular/common';\n\ntype QuickLink = Pick<DocLink, 'label' | 'click' | 'icon'>;\n\n@Component({\n  selector: 'c8y-welcome-to-devicemanagement',\n  templateUrl: './welcome.component.html',\n  imports: [\n    NgIf,\n    LoadingComponent,\n    NgFor,\n    ProductExperienceDirective,\n    NgClass,\n    QuickLinkComponent,\n    C8yTranslatePipe\n  ]\n})\nexport class WelcomeToDeviceManagementComponent implements OnInit, OnDestroy {\n  quickLinks: QuickLink[] = [];\n  isLoading = true;\n\n  private navNodes: NavigatorNode[];\n  private navSubscription: Subscription;\n\n  constructor(\n    private router: Router,\n    private navigator: NavigatorService\n  ) {}\n\n  async ngOnInit() {\n    this.navSubscription = this.navigator.items$.subscribe(nodes => {\n      this.navNodes = nodes;\n      this.createAllDevicesQuickLink();\n      this.createQuicklinkRegisterDevice();\n      this.createQuicklinkAddGroup();\n      this.createAddDeviceProfileQuickLink();\n      this.createAddSoftwareQuickLink();\n      this.createAddFirmwareQuickLink();\n      this.isLoading = false;\n    });\n  }\n\n  ngOnDestroy() {\n    if (this.navSubscription && !this.navSubscription.closed) {\n      this.navSubscription.unsubscribe();\n    }\n  }\n\n  private createAllDevicesQuickLink() {\n    this.createQuickLinkToNavNode(['Devices', 'All devices']);\n  }\n\n  private createQuicklinkRegisterDevice() {\n    this.createQuickLinkToNavNode(['Devices', 'Registration'], {\n      label: gettext('Register device')\n    });\n  }\n\n  private createQuicklinkAddGroup() {\n    this.createQuickLinkToNavNode(['Groups'], {\n      label: gettext('Add group'),\n      icon: 'c8y-group-add',\n      click: async () =>\n        await this.router.navigate(['group'], { queryParams: { showAddGroup: true } })\n    });\n  }\n\n  private createAddDeviceProfileQuickLink() {\n    this.createQuickLinkToNavNode(['Management', 'Device profiles'], {\n      label: gettext('Add device profile')\n    });\n  }\n\n  private createAddSoftwareQuickLink() {\n    this.createQuickLinkToNavNode(['Management', 'Software repository'], {\n      label: gettext('Add software')\n    });\n  }\n\n  private createAddFirmwareQuickLink() {\n    this.createQuickLinkToNavNode(['Management', 'Firmware repository'], {\n      label: gettext('Add firmware')\n    });\n  }\n\n  private createQuickLinkToNavNode(\n    navNodePathLabels: string[],\n    quickLinkOverrides: Partial<DocLink> = {}\n  ) {\n    const navNode = this.findVisibleNavNode(navNodePathLabels);\n\n    if (!navNode) {\n      return;\n    }\n\n    const quickLink = {\n      icon: navNode.icon,\n      label: navNode.label,\n      click: async () => {\n        await this.router.navigateByUrl(navNode.path);\n      },\n      ...quickLinkOverrides\n    };\n    this.quickLinks.push(quickLink);\n  }\n\n  private findVisibleNavNode(\n    navNodePathLabels: string[],\n    navNodes: NavigatorNode[] = this.navNodes\n  ): NavigatorNode {\n    const currentLabel = navNodePathLabels.shift();\n    const navNode = navNodes.find(navNode => !navNode.hidden && navNode.label === currentLabel);\n    if (navNode && navNodePathLabels.length > 0) {\n      return this.findVisibleNavNode(navNodePathLabels, navNode.children);\n    }\n    return navNode;\n  }\n}\n","<div\n  class=\"welcome-widget\"\n  tabindex=\"0\"\n>\n  <div\n    class=\"p-16 text-center\"\n    *ngIf=\"isLoading\"\n  >\n    <c8y-loading></c8y-loading>\n  </div>\n  <div\n    class=\"d-flex fit-h\"\n    *ngIf=\"!isLoading\"\n  >\n    <div class=\"col-xs-12 a-s-stretch col-md-12\">\n      <div class=\"card-group interact-grid fit-h\">\n        <div\n          class=\"col-xs-4 no-gutter\"\n          *ngFor=\"let link of quickLinks\"\n        >\n          <button\n            class=\"btn-clean card text-pre-normal\"\n            [title]=\"link.label | translate\"\n            type=\"button\"\n            [ngClass]=\"{ 'm-b-0': true }\"\n            (click)=\"link.click ? link.click() : false\"\n            c8yProductExperience\n            [actionName]=\"'welcomeWidgetClicked'\"\n            [actionData]=\"{ link: link.label }\"\n            data-cy=\"devicemanagement-welcome--quick-link\"\n          >\n            <c8y-quick-link\n              [icon]=\"link.icon\"\n              [label]=\"link.label\"\n            ></c8y-quick-link>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { RouterModule } from '@angular/router';\nimport { CoreModule, QuickLinkModule } from '@c8y/ngx-components';\nimport { WelcomeToDeviceManagementComponent } from './welcome.component';\n\n/**\n * @deprecated\n */\n@NgModule({\n  imports: [CoreModule, QuickLinkModule, RouterModule, WelcomeToDeviceManagementComponent]\n})\nexport class DeviceManagementWelcomeWidgetModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"c8y-ngx-components-widgets-implementations-device-management-welcome.mjs","sources":["../../widgets/implementations/device-management-welcome/welcome.component.ts","../../widgets/implementations/device-management-welcome/welcome.component.html","../../widgets/implementations/device-management-welcome/device-management-welcome-widget.module.ts","../../widgets/implementations/device-management-welcome/c8y-ngx-components-widgets-implementations-device-management-welcome.ts"],"sourcesContent":["import { Component, OnDestroy, OnInit } from '@angular/core';\nimport { Router } from '@angular/router';\nimport { gettext } from '@c8y/ngx-components/gettext';\nimport {\n  DocLink,\n  NavigatorNode,\n  NavigatorService,\n  LoadingComponent,\n  ProductExperienceDirective,\n  QuickLinkComponent,\n  C8yTranslatePipe\n} from '@c8y/ngx-components';\nimport { Subscription } from 'rxjs';\nimport { NgIf, NgFor, NgClass } from '@angular/common';\n\ntype QuickLink = Pick<DocLink, 'label' | 'click' | 'icon'>;\n\n@Component({\n  selector: 'c8y-welcome-to-devicemanagement',\n  templateUrl: './welcome.component.html',\n  imports: [\n    NgIf,\n    LoadingComponent,\n    NgFor,\n    ProductExperienceDirective,\n    NgClass,\n    QuickLinkComponent,\n    C8yTranslatePipe\n  ]\n})\nexport class WelcomeToDeviceManagementComponent implements OnInit, OnDestroy {\n  quickLinks: QuickLink[] = [];\n  isLoading = true;\n\n  private navNodes: NavigatorNode[];\n  private navSubscription: Subscription;\n\n  constructor(\n    private router: Router,\n    private navigator: NavigatorService\n  ) {}\n\n  async ngOnInit() {\n    this.navSubscription = this.navigator.items$.subscribe(nodes => {\n      this.navNodes = nodes;\n      this.createAllDevicesQuickLink();\n      this.createQuicklinkRegisterDevice();\n      this.createQuicklinkAddGroup();\n      this.createAddDeviceProfileQuickLink();\n      this.createAddSoftwareQuickLink();\n      this.createAddFirmwareQuickLink();\n      this.isLoading = false;\n    });\n  }\n\n  ngOnDestroy() {\n    if (this.navSubscription && !this.navSubscription.closed) {\n      this.navSubscription.unsubscribe();\n    }\n  }\n\n  private createAllDevicesQuickLink() {\n    this.createQuickLinkToNavNode(['Devices', 'All devices']);\n  }\n\n  private createQuicklinkRegisterDevice() {\n    this.createQuickLinkToNavNode(['Devices', 'Registration'], {\n      label: gettext('Register device')\n    });\n  }\n\n  private createQuicklinkAddGroup() {\n    this.createQuickLinkToNavNode(['Groups'], {\n      label: gettext('Add group'),\n      icon: 'c8y-group-add',\n      click: async () =>\n        await this.router.navigate(['group'], { queryParams: { showAddGroup: true } })\n    });\n  }\n\n  private createAddDeviceProfileQuickLink() {\n    this.createQuickLinkToNavNode(['Management', 'Device profiles'], {\n      label: gettext('Add device profile')\n    });\n  }\n\n  private createAddSoftwareQuickLink() {\n    this.createQuickLinkToNavNode(['Management', 'Software repository'], {\n      label: gettext('Add software')\n    });\n  }\n\n  private createAddFirmwareQuickLink() {\n    this.createQuickLinkToNavNode(['Management', 'Firmware repository'], {\n      label: gettext('Add firmware')\n    });\n  }\n\n  private createQuickLinkToNavNode(\n    navNodePathLabels: string[],\n    quickLinkOverrides: Partial<DocLink> = {}\n  ) {\n    const navNode = this.findVisibleNavNode(navNodePathLabels);\n\n    if (!navNode) {\n      return;\n    }\n\n    const quickLink = {\n      icon: navNode.icon,\n      label: navNode.label,\n      click: async () => {\n        await this.router.navigateByUrl(navNode.path);\n      },\n      ...quickLinkOverrides\n    };\n    this.quickLinks.push(quickLink);\n  }\n\n  private findVisibleNavNode(\n    navNodePathLabels: string[],\n    navNodes: NavigatorNode[] = this.navNodes\n  ): NavigatorNode {\n    const currentLabel = navNodePathLabels.shift();\n    const navNode = navNodes.find(navNode => !navNode.hidden && navNode.label === currentLabel);\n    if (navNode && navNodePathLabels.length > 0) {\n      return this.findVisibleNavNode(navNodePathLabels, navNode.children);\n    }\n    return navNode;\n  }\n}\n","<div\n  class=\"welcome-widget\"\n  tabindex=\"0\"\n>\n  <div\n    class=\"p-16 text-center\"\n    *ngIf=\"isLoading\"\n  >\n    <c8y-loading></c8y-loading>\n  </div>\n  <div\n    class=\"d-flex fit-h\"\n    *ngIf=\"!isLoading\"\n  >\n    <div class=\"col-xs-12 a-s-stretch col-md-12\">\n      <div class=\"card-group interact-grid fit-h\">\n        <div\n          class=\"col-xs-4 no-gutter\"\n          *ngFor=\"let link of quickLinks\"\n        >\n          <button\n            class=\"btn-clean card text-pre-normal\"\n            [title]=\"link.label | translate\"\n            type=\"button\"\n            [ngClass]=\"{ 'm-b-0': true }\"\n            (click)=\"link.click ? link.click() : false\"\n            c8yProductExperience\n            [actionName]=\"'welcomeWidgetClicked'\"\n            [actionData]=\"{ link: link.label }\"\n            data-cy=\"devicemanagement-welcome--quick-link\"\n          >\n            <c8y-quick-link\n              [icon]=\"link.icon\"\n              [label]=\"link.label\"\n            ></c8y-quick-link>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { RouterModule } from '@angular/router';\nimport { CoreModule, QuickLinkModule } from '@c8y/ngx-components';\nimport { WelcomeToDeviceManagementComponent } from './welcome.component';\n\n/**\n * @deprecated\n */\n@NgModule({\n  imports: [CoreModule, QuickLinkModule, RouterModule, WelcomeToDeviceManagementComponent]\n})\nexport class DeviceManagementWelcomeWidgetModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/c8y-ngx-components-widgets-implementations-help-and-service-widget.mjs

@@ -95,10 +95,10 @@ class HelpAndServiceViewComponent {
     findNavigatorNode(nodeName, navNodes = []) {
         return navNodes.find((node) => node.label === nodeName);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: HelpAndServiceViewComponent, deps: [{ token: i1.DocsService }, { token: i1.AppStateService }, { token: i1.NavigatorService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: HelpAndServiceViewComponent, isStandalone: true, selector: "c8y-help-and-service-view", ngImport: i0, template: "<div class=\"card-group-block\">\n  <a\n    class=\"card card--btn\"\n    title=\"{{ link.label | translate }}\"\n    role=\"button\"\n    [attr.target]=\"link.target\"\n    *ngFor=\"let link of links$ | async\"\n    rel=\"noopener noreferrer\"\n    [href]=\"link.url ? link.url : '#'\"\n    (click)=\"openLink(link, $event)\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE.HELP_AND_SERVICE_LINKS.EVENTS.HELP_AND_SERVICE_LINKS\"\n    [actionData]=\"{\n      component: PRODUCT_EXPERIENCE.HELP_AND_SERVICE_LINKS.COMPONENTS.HELP_AND_SERVICE_COMPONENT,\n      action: link.label\n    }\"\n  >\n    <div class=\"card-block text-center\">\n      <div class=\"icon-32\">\n        <i\n          class=\"c8y-icon-duocolor\"\n          [c8yIcon]=\"link.icon\"\n        ></i>\n      </div>\n      <small class=\"text-muted\">{{ link.label | translate }}</small>\n    </div>\n  </a>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HelpAndServiceViewComponent, deps: [{ token: i1.DocsService }, { token: i1.AppStateService }, { token: i1.NavigatorService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: HelpAndServiceViewComponent, isStandalone: true, selector: "c8y-help-and-service-view", ngImport: i0, template: "<div class=\"card-group-block\">\n  <a\n    class=\"card card--btn\"\n    title=\"{{ link.label | translate }}\"\n    role=\"button\"\n    [attr.target]=\"link.target\"\n    *ngFor=\"let link of links$ | async\"\n    rel=\"noopener noreferrer\"\n    [href]=\"link.url ? link.url : '#'\"\n    (click)=\"openLink(link, $event)\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE.HELP_AND_SERVICE_LINKS.EVENTS.HELP_AND_SERVICE_LINKS\"\n    [actionData]=\"{\n      component: PRODUCT_EXPERIENCE.HELP_AND_SERVICE_LINKS.COMPONENTS.HELP_AND_SERVICE_COMPONENT,\n      action: link.label\n    }\"\n  >\n    <div class=\"card-block text-center\">\n      <div class=\"icon-32\">\n        <i\n          class=\"c8y-icon-duocolor\"\n          [c8yIcon]=\"link.icon\"\n        ></i>\n      </div>\n      <small class=\"text-muted\">{{ link.label | translate }}</small>\n    </div>\n  </a>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: HelpAndServiceViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HelpAndServiceViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-help-and-service-view', standalone: true, imports: [CoreModule, ReactiveFormsModule], template: "<div class=\"card-group-block\">\n  <a\n    class=\"card card--btn\"\n    title=\"{{ link.label | translate }}\"\n    role=\"button\"\n    [attr.target]=\"link.target\"\n    *ngFor=\"let link of links$ | async\"\n    rel=\"noopener noreferrer\"\n    [href]=\"link.url ? link.url : '#'\"\n    (click)=\"openLink(link, $event)\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE.HELP_AND_SERVICE_LINKS.EVENTS.HELP_AND_SERVICE_LINKS\"\n    [actionData]=\"{\n      component: PRODUCT_EXPERIENCE.HELP_AND_SERVICE_LINKS.COMPONENTS.HELP_AND_SERVICE_COMPONENT,\n      action: link.label\n    }\"\n  >\n    <div class=\"card-block text-center\">\n      <div class=\"icon-32\">\n        <i\n          class=\"c8y-icon-duocolor\"\n          [c8yIcon]=\"link.icon\"\n        ></i>\n      </div>\n      <small class=\"text-muted\">{{ link.label | translate }}</small>\n    </div>\n  </a>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.DocsService }, { type: i1.AppStateService }, { type: i1.NavigatorService }, { type: i2.Router }] });

package/fesm2022/c8y-ngx-components-widgets-implementations-help-and-service-widget.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"c8y-ngx-components-widgets-implementations-help-and-service-widget.mjs","sources":["../../widgets/implementations/help-and-service-widget/help-and-service.model.ts","../../widgets/implementations/help-and-service-widget/help-and-service-view/help-and-service-view.component.ts","../../widgets/implementations/help-and-service-widget/help-and-service-view/help-and-service-view.component.html","../../widgets/implementations/help-and-service-widget/c8y-ngx-components-widgets-implementations-help-and-service-widget.ts"],"sourcesContent":["export const PRODUCT_EXPERIENCE_HELP_AND_SERVICE_WIDGET = {\n  HELP_AND_SERVICE_LINKS: {\n    EVENTS: { HELP_AND_SERVICE_LINKS: 'helpAndServiceLinks' },\n    COMPONENTS: { HELP_AND_SERVICE_COMPONENT: 'right-drawer' },\n    ACTIONS: {},\n    RESULTS: {}\n  }\n} as const;\n","import { Component } from '@angular/core';\nimport { Router } from '@angular/router';\nimport { gettext } from '@c8y/ngx-components/gettext';\nimport {\n  AppStateService,\n  CoreModule,\n  DocLink,\n  DocLinkWithLabel,\n  DocsService,\n  NavigatorNode,\n  NavigatorService\n} from '@c8y/ngx-components';\nimport { combineLatest } from 'rxjs';\nimport { map } from 'rxjs/operators';\nimport { PRODUCT_EXPERIENCE_HELP_AND_SERVICE_WIDGET } from '../help-and-service.model';\nimport { ReactiveFormsModule } from '@angular/forms';\n\n@Component({\n  selector: 'c8y-help-and-service-view',\n  templateUrl: './help-and-service-view.component.html',\n  standalone: true,\n  imports: [CoreModule, ReactiveFormsModule]\n})\nexport class HelpAndServiceViewComponent {\n  PRODUCT_EXPERIENCE = PRODUCT_EXPERIENCE_HELP_AND_SERVICE_WIDGET;\n  links$ = combineLatest([this.docs.items$, this.navigatorService.items$]).pipe(\n    map(([links, navigatorNodes]) => this.handleDocLinks([...links], navigatorNodes))\n  );\n\n  constructor(\n    public docs: DocsService,\n    private appStateService: AppStateService,\n    private navigatorService: NavigatorService,\n    private router: Router\n  ) {}\n\n  openLink(link: DocLink, $event) {\n    if (link.click) {\n      $event.preventDefault();\n      link.click();\n    }\n  }\n\n  private handleDocLinks(links: DocLink[], navigatorNodes: NavigatorNode[]): DocLink[] {\n    const groupLink = this.createAddGroupDocLink(navigatorNodes);\n\n    if (groupLink) {\n      links.push(groupLink);\n    }\n    return this.replaceDocsLinksWithMainOne(links);\n  }\n\n  private createAddGroupDocLink(navigatorNodes: NavigatorNode[]): DocLink | undefined {\n    let docLink: DocLink;\n    const groupsNodeLabel = gettext('Groups');\n    const groupsNode = this.findNavigatorNode(groupsNodeLabel, navigatorNodes);\n\n    if (groupsNode) {\n      docLink = {\n        type: 'quicklink',\n        icon: 'c8y-icon c8y-icon-group-add',\n        label: gettext('Add group'),\n        url: '/group',\n        click: () => this.router.navigate([docLink.url], { queryParams: { showAddGroup: true } })\n      };\n    }\n    return docLink;\n  }\n\n  private replaceDocsLinksWithMainOne(links: DocLink[]): DocLink[] {\n    const DOCS_PATH = '/docs/';\n    let firstDocsLink = true;\n\n    return links\n      .map(link => {\n        const isDocsLink = link.url && /\\/docs\\/(?!legal-notices)/.test(link.url);\n        if (isDocsLink) {\n          if (firstDocsLink) {\n            firstDocsLink = false;\n            // Replace the first /docs/ link with the main one\n            return {\n              icon: 'book-shelf',\n              label: gettext('User documentation'),\n              url: this.docs.getUserGuideLink(DOCS_PATH),\n              type: 'doc',\n              target: '_blank'\n            } as DocLinkWithLabel;\n          } else {\n            // Filter out subsequent /docs/ links\n            return null;\n          }\n        } else {\n          return {\n            ...link,\n            target: this.isCurrentApp(link) ? null : '_blank'\n          };\n        }\n      })\n      .filter(link => link !== null);\n  }\n\n  private isCurrentApp(link: DocLink): boolean {\n    const currentApp = this.appStateService.state.app;\n    const destinationAppPath = (link.url?.split('/apps/')[1] || '').split('/')[0];\n    return currentApp.contextPath === destinationAppPath;\n  }\n\n  private findNavigatorNode(nodeName: string, navNodes: NavigatorNode[] = []): NavigatorNode {\n    return navNodes.find((node: NavigatorNode) => node.label === nodeName);\n  }\n}\n","<div class=\"card-group-block\">\n  <a\n    class=\"card card--btn\"\n    title=\"{{ link.label | translate }}\"\n    role=\"button\"\n    [attr.target]=\"link.target\"\n    *ngFor=\"let link of links$ | async\"\n    rel=\"noopener noreferrer\"\n    [href]=\"link.url ? link.url : '#'\"\n    (click)=\"openLink(link, $event)\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE.HELP_AND_SERVICE_LINKS.EVENTS.HELP_AND_SERVICE_LINKS\"\n    [actionData]=\"{\n      component: PRODUCT_EXPERIENCE.HELP_AND_SERVICE_LINKS.COMPONENTS.HELP_AND_SERVICE_COMPONENT,\n      action: link.label\n    }\"\n  >\n    <div class=\"card-block text-center\">\n      <div class=\"icon-32\">\n        <i\n          class=\"c8y-icon-duocolor\"\n          [c8yIcon]=\"link.icon\"\n        ></i>\n      </div>\n      <small class=\"text-muted\">{{ link.label | translate }}</small>\n    </div>\n  </a>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;AAAO,MAAM,0CAA0C,GAAG;AACxD,IAAA,sBAAsB,EAAE;AACtB,QAAA,MAAM,EAAE,EAAE,sBAAsB,EAAE,qBAAqB,EAAE;AACzD,QAAA,UAAU,EAAE,EAAE,0BAA0B,EAAE,cAAc,EAAE;AAC1D,QAAA,OAAO,EAAE,EAAE;AACX,QAAA,OAAO,EAAE;AACV;CACO;;MCgBG,2BAA2B,CAAA;AAMtC,IAAA,WAAA,CACS,IAAiB,EAChB,eAAgC,EAChC,gBAAkC,EAClC,MAAc,EAAA;QAHf,IAAA,CAAA,IAAI,GAAJ,IAAI;QACH,IAAA,CAAA,eAAe,GAAf,eAAe;QACf,IAAA,CAAA,gBAAgB,GAAhB,gBAAgB;QAChB,IAAA,CAAA,MAAM,GAAN,MAAM;QAThB,IAAA,CAAA,kBAAkB,GAAG,0CAA0C;QAC/D,IAAA,CAAA,MAAM,GAAG,aAAa,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAC3E,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,IAAI,CAAC,cAAc,CAAC,CAAC,GAAG,KAAK,CAAC,EAAE,cAAc,CAAC,CAAC,CAClF;IAOE;IAEH,QAAQ,CAAC,IAAa,EAAE,MAAM,EAAA;AAC5B,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,MAAM,CAAC,cAAc,EAAE;YACvB,IAAI,CAAC,KAAK,EAAE;QACd;IACF;IAEQ,cAAc,CAAC,KAAgB,EAAE,cAA+B,EAAA;QACtE,MAAM,SAAS,GAAG,IAAI,CAAC,qBAAqB,CAAC,cAAc,CAAC;QAE5D,IAAI,SAAS,EAAE;AACb,YAAA,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC;QACvB;AACA,QAAA,OAAO,IAAI,CAAC,2BAA2B,CAAC,KAAK,CAAC;IAChD;AAEQ,IAAA,qBAAqB,CAAC,cAA+B,EAAA;AAC3D,QAAA,IAAI,OAAgB;AACpB,QAAA,MAAM,eAAe,GAAG,OAAO,CAAC,QAAQ,CAAC;QACzC,MAAM,UAAU,GAAG,IAAI,CAAC,iBAAiB,CAAC,eAAe,EAAE,cAAc,CAAC;QAE1E,IAAI,UAAU,EAAE;AACd,YAAA,OAAO,GAAG;AACR,gBAAA,IAAI,EAAE,WAAW;AACjB,gBAAA,IAAI,EAAE,6BAA6B;AACnC,gBAAA,KAAK,EAAE,OAAO,CAAC,WAAW,CAAC;AAC3B,gBAAA,GAAG,EAAE,QAAQ;gBACb,KAAK,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,EAAE,WAAW,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,EAAE;aACzF;QACH;AACA,QAAA,OAAO,OAAO;IAChB;AAEQ,IAAA,2BAA2B,CAAC,KAAgB,EAAA;QAClD,MAAM,SAAS,GAAG,QAAQ;QAC1B,IAAI,aAAa,GAAG,IAAI;AAExB,QAAA,OAAO;aACJ,GAAG,CAAC,IAAI,IAAG;AACV,YAAA,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,IAAI,2BAA2B,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC;YACzE,IAAI,UAAU,EAAE;gBACd,IAAI,aAAa,EAAE;oBACjB,aAAa,GAAG,KAAK;;oBAErB,OAAO;AACL,wBAAA,IAAI,EAAE,YAAY;AAClB,wBAAA,KAAK,EAAE,OAAO,CAAC,oBAAoB,CAAC;wBACpC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC;AAC1C,wBAAA,IAAI,EAAE,KAAK;AACX,wBAAA,MAAM,EAAE;qBACW;gBACvB;qBAAO;;AAEL,oBAAA,OAAO,IAAI;gBACb;YACF;iBAAO;gBACL,OAAO;AACL,oBAAA,GAAG,IAAI;AACP,oBAAA,MAAM,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG;iBAC1C;YACH;AACF,QAAA,CAAC;aACA,MAAM,CAAC,IAAI,IAAI,IAAI,KAAK,IAAI,CAAC;IAClC;AAEQ,IAAA,YAAY,CAAC,IAAa,EAAA;QAChC,MAAM,UAAU,GAAG,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,GAAG;QACjD,MAAM,kBAAkB,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AAC7E,QAAA,OAAO,UAAU,CAAC,WAAW,KAAK,kBAAkB;IACtD;AAEQ,IAAA,iBAAiB,CAAC,QAAgB,EAAE,QAAA,GAA4B,EAAE,EAAA;AACxE,QAAA,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC,IAAmB,KAAK,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC;IACxE;8GAtFW,2BAA2B,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,WAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,eAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,MAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA3B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,2BAA2B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,2BAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECvBxC,q4BA4BA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDPY,UAAU,iaAAE,mBAAmB,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,IAAA,EAAA,WAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAE9B,2BAA2B,EAAA,UAAA,EAAA,CAAA;kBANvC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,2BAA2B,cAEzB,IAAI,EAAA,OAAA,EACP,CAAC,UAAU,EAAE,mBAAmB,CAAC,EAAA,QAAA,EAAA,q4BAAA,EAAA;;;AErB5C;;AAEG;;;;"}
+{"version":3,"file":"c8y-ngx-components-widgets-implementations-help-and-service-widget.mjs","sources":["../../widgets/implementations/help-and-service-widget/help-and-service.model.ts","../../widgets/implementations/help-and-service-widget/help-and-service-view/help-and-service-view.component.ts","../../widgets/implementations/help-and-service-widget/help-and-service-view/help-and-service-view.component.html","../../widgets/implementations/help-and-service-widget/c8y-ngx-components-widgets-implementations-help-and-service-widget.ts"],"sourcesContent":["export const PRODUCT_EXPERIENCE_HELP_AND_SERVICE_WIDGET = {\n  HELP_AND_SERVICE_LINKS: {\n    EVENTS: { HELP_AND_SERVICE_LINKS: 'helpAndServiceLinks' },\n    COMPONENTS: { HELP_AND_SERVICE_COMPONENT: 'right-drawer' },\n    ACTIONS: {},\n    RESULTS: {}\n  }\n} as const;\n","import { Component } from '@angular/core';\nimport { Router } from '@angular/router';\nimport { gettext } from '@c8y/ngx-components/gettext';\nimport {\n  AppStateService,\n  CoreModule,\n  DocLink,\n  DocLinkWithLabel,\n  DocsService,\n  NavigatorNode,\n  NavigatorService\n} from '@c8y/ngx-components';\nimport { combineLatest } from 'rxjs';\nimport { map } from 'rxjs/operators';\nimport { PRODUCT_EXPERIENCE_HELP_AND_SERVICE_WIDGET } from '../help-and-service.model';\nimport { ReactiveFormsModule } from '@angular/forms';\n\n@Component({\n  selector: 'c8y-help-and-service-view',\n  templateUrl: './help-and-service-view.component.html',\n  standalone: true,\n  imports: [CoreModule, ReactiveFormsModule]\n})\nexport class HelpAndServiceViewComponent {\n  PRODUCT_EXPERIENCE = PRODUCT_EXPERIENCE_HELP_AND_SERVICE_WIDGET;\n  links$ = combineLatest([this.docs.items$, this.navigatorService.items$]).pipe(\n    map(([links, navigatorNodes]) => this.handleDocLinks([...links], navigatorNodes))\n  );\n\n  constructor(\n    public docs: DocsService,\n    private appStateService: AppStateService,\n    private navigatorService: NavigatorService,\n    private router: Router\n  ) {}\n\n  openLink(link: DocLink, $event) {\n    if (link.click) {\n      $event.preventDefault();\n      link.click();\n    }\n  }\n\n  private handleDocLinks(links: DocLink[], navigatorNodes: NavigatorNode[]): DocLink[] {\n    const groupLink = this.createAddGroupDocLink(navigatorNodes);\n\n    if (groupLink) {\n      links.push(groupLink);\n    }\n    return this.replaceDocsLinksWithMainOne(links);\n  }\n\n  private createAddGroupDocLink(navigatorNodes: NavigatorNode[]): DocLink | undefined {\n    let docLink: DocLink;\n    const groupsNodeLabel = gettext('Groups');\n    const groupsNode = this.findNavigatorNode(groupsNodeLabel, navigatorNodes);\n\n    if (groupsNode) {\n      docLink = {\n        type: 'quicklink',\n        icon: 'c8y-icon c8y-icon-group-add',\n        label: gettext('Add group'),\n        url: '/group',\n        click: () => this.router.navigate([docLink.url], { queryParams: { showAddGroup: true } })\n      };\n    }\n    return docLink;\n  }\n\n  private replaceDocsLinksWithMainOne(links: DocLink[]): DocLink[] {\n    const DOCS_PATH = '/docs/';\n    let firstDocsLink = true;\n\n    return links\n      .map(link => {\n        const isDocsLink = link.url && /\\/docs\\/(?!legal-notices)/.test(link.url);\n        if (isDocsLink) {\n          if (firstDocsLink) {\n            firstDocsLink = false;\n            // Replace the first /docs/ link with the main one\n            return {\n              icon: 'book-shelf',\n              label: gettext('User documentation'),\n              url: this.docs.getUserGuideLink(DOCS_PATH),\n              type: 'doc',\n              target: '_blank'\n            } as DocLinkWithLabel;\n          } else {\n            // Filter out subsequent /docs/ links\n            return null;\n          }\n        } else {\n          return {\n            ...link,\n            target: this.isCurrentApp(link) ? null : '_blank'\n          };\n        }\n      })\n      .filter(link => link !== null);\n  }\n\n  private isCurrentApp(link: DocLink): boolean {\n    const currentApp = this.appStateService.state.app;\n    const destinationAppPath = (link.url?.split('/apps/')[1] || '').split('/')[0];\n    return currentApp.contextPath === destinationAppPath;\n  }\n\n  private findNavigatorNode(nodeName: string, navNodes: NavigatorNode[] = []): NavigatorNode {\n    return navNodes.find((node: NavigatorNode) => node.label === nodeName);\n  }\n}\n","<div class=\"card-group-block\">\n  <a\n    class=\"card card--btn\"\n    title=\"{{ link.label | translate }}\"\n    role=\"button\"\n    [attr.target]=\"link.target\"\n    *ngFor=\"let link of links$ | async\"\n    rel=\"noopener noreferrer\"\n    [href]=\"link.url ? link.url : '#'\"\n    (click)=\"openLink(link, $event)\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE.HELP_AND_SERVICE_LINKS.EVENTS.HELP_AND_SERVICE_LINKS\"\n    [actionData]=\"{\n      component: PRODUCT_EXPERIENCE.HELP_AND_SERVICE_LINKS.COMPONENTS.HELP_AND_SERVICE_COMPONENT,\n      action: link.label\n    }\"\n  >\n    <div class=\"card-block text-center\">\n      <div class=\"icon-32\">\n        <i\n          class=\"c8y-icon-duocolor\"\n          [c8yIcon]=\"link.icon\"\n        ></i>\n      </div>\n      <small class=\"text-muted\">{{ link.label | translate }}</small>\n    </div>\n  </a>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/c8y-ngx-components-widgets-implementations-html-widget.mjs

@@ -244,10 +244,10 @@ class HtmlWidgetConfigService {
             }
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: HtmlWidgetConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: HtmlWidgetConfigService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HtmlWidgetConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HtmlWidgetConfigService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: HtmlWidgetConfigService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HtmlWidgetConfigService, decorators: [{
             type: Injectable
         }] });
 
@@ -287,10 +287,10 @@ class AdvancedSettingsComponent {
         this.htmlWidgetConfigService.save(config);
         this.htmlWidgetConfigService.configChanged$.next(config);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AdvancedSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AdvancedSettingsComponent, isStandalone: true, selector: "c8y-html-widget-advanced-settings", inputs: { devMode: "devMode", cssEncapsulation: "cssEncapsulation" }, ngImport: i0, template: "<fieldset class=\"c8y-fieldset m-t-0\">\n  <legend>{{ 'Developer mode' | translate }}</legend>\n\n  <div class=\"d-flex a-i-center p-b-16\">\n    <label class=\"c8y-switch\">\n      <input\n        type=\"checkbox\"\n        [ngModel]=\"devMode\"\n        (change)=\"toggleAdvancedMode()\"\n        [disabled]=\"!canChangeSettings\"\n      />\n      <span></span>\n      <span>{{ 'Advanced developer mode' | translate }}</span>\n    </label>\n\n    <button class=\"btn-help\"\n      [attr.aria-label]=\"'Help' | translate\"\n      [popover]=\"devMode ? disableAdvanced : enableAdvanced\"\n      container=\"body\"\n      placement=\"right\"\n      triggers=\"focus\"\n      type=\"button\"\n    ></button>\n\n    <ng-template #enableAdvanced>\n      <p class=\"text-16 text-bold p-b-8\">\n        <i [c8yIcon]=\"'imac-settings'\"></i>\n        {{ 'Advanced developer mode' | translate }}\n      </p>\n      <p class=\"p-b-8\" translate>\n        Create custom widgets by modifying a basic WebComponent with HTML and JavaScript. This\n        <strong>unsupported</strong>\n        feature is ideal for rapid prototyping and simple customizations.\n      </p>\n      <p class=\"p-b-8\" translate>\n        For production environments, we recommend our fully-supported Angular-based\n        <a href=\"https://styleguide.cumulocity.com\" target=\"_blank\">Web SDK</a>.\n        <br />\n        Enable advanced developer mode to start coding!\n      </p>\n    </ng-template>\n\n    <ng-template #disableAdvanced>\n      <p class=\"text-16 text-bold p-b-8\">\n        {{ 'Advanced developer mode' | translate }}\n      </p>\n      <p class=\"p-b-8\" translate>\n        The advanced developer mode is enabled for this widget allowing to build extensive Web\n        Components.\n      </p>\n      <p class=\"p-b-8\" translate>\n        You can disable this mode again, but it will reset the current code.\n      </p>\n    </ng-template>\n\n    <ng-container *ngIf=\"!devMode\">\n      <label\n        class=\"c8y-switch m-l-auto\"\n      >\n        <input\n          type=\"checkbox\"\n          (change)=\"changeOption('cssEncapsulation')\"\n          [disabled]=\"!canChangeSettings\"\n          [ngModel]=\"cssEncapsulation\"\n        />\n        <span></span>\n        <span>{{ 'CSS encapsulation' | translate }}</span>\n      </label>\n      <button\n        class=\"btn-help m-0\"\n        [attr.aria-label]=\"'Help' | translate\"\n        popover=\"{{ CSS_ENCAPSULATION_HELP_CONTEXT | translate }}\"\n        triggers=\"focus\"\n        placement=\"left\"\n        container=\"body\"\n        type=\"button\"\n      ></button>\n    </ng-container>\n\n  </div>\n</fieldset>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AdvancedSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AdvancedSettingsComponent, isStandalone: true, selector: "c8y-html-widget-advanced-settings", inputs: { devMode: "devMode", cssEncapsulation: "cssEncapsulation" }, ngImport: i0, template: "<fieldset class=\"c8y-fieldset m-t-0\">\n  <legend>{{ 'Developer mode' | translate }}</legend>\n\n  <div class=\"d-flex a-i-center p-b-16\">\n    <label class=\"c8y-switch\">\n      <input\n        type=\"checkbox\"\n        [ngModel]=\"devMode\"\n        (change)=\"toggleAdvancedMode()\"\n        [disabled]=\"!canChangeSettings\"\n      />\n      <span></span>\n      <span>{{ 'Advanced developer mode' | translate }}</span>\n    </label>\n\n    <button class=\"btn-help\"\n      [attr.aria-label]=\"'Help' | translate\"\n      [popover]=\"devMode ? disableAdvanced : enableAdvanced\"\n      container=\"body\"\n      placement=\"right\"\n      triggers=\"focus\"\n      type=\"button\"\n    ></button>\n\n    <ng-template #enableAdvanced>\n      <p class=\"text-16 text-bold p-b-8\">\n        <i [c8yIcon]=\"'imac-settings'\"></i>\n        {{ 'Advanced developer mode' | translate }}\n      </p>\n      <p class=\"p-b-8\" translate>\n        Create custom widgets by modifying a basic WebComponent with HTML and JavaScript. This\n        <strong>unsupported</strong>\n        feature is ideal for rapid prototyping and simple customizations.\n      </p>\n      <p class=\"p-b-8\" translate>\n        For production environments, we recommend our fully-supported Angular-based\n        <a href=\"https://styleguide.cumulocity.com\" target=\"_blank\">Web SDK</a>.\n        <br />\n        Enable advanced developer mode to start coding!\n      </p>\n    </ng-template>\n\n    <ng-template #disableAdvanced>\n      <p class=\"text-16 text-bold p-b-8\">\n        {{ 'Advanced developer mode' | translate }}\n      </p>\n      <p class=\"p-b-8\" translate>\n        The advanced developer mode is enabled for this widget allowing to build extensive Web\n        Components.\n      </p>\n      <p class=\"p-b-8\" translate>\n        You can disable this mode again, but it will reset the current code.\n      </p>\n    </ng-template>\n\n    <ng-container *ngIf=\"!devMode\">\n      <label\n        class=\"c8y-switch m-l-auto\"\n      >\n        <input\n          type=\"checkbox\"\n          (change)=\"changeOption('cssEncapsulation')\"\n          [disabled]=\"!canChangeSettings\"\n          [ngModel]=\"cssEncapsulation\"\n        />\n        <span></span>\n        <span>{{ 'CSS encapsulation' | translate }}</span>\n      </label>\n      <button\n        class=\"btn-help m-0\"\n        [attr.aria-label]=\"'Help' | translate\"\n        popover=\"{{ CSS_ENCAPSULATION_HELP_CONTEXT | translate }}\"\n        triggers=\"focus\"\n        placement=\"left\"\n        container=\"body\"\n        type=\"button\"\n      ></button>\n    </ng-container>\n\n  </div>\n</fieldset>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AdvancedSettingsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AdvancedSettingsComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [IconDirective, NgIf, TooltipModule, PopoverModule, C8yTranslatePipe, FormsModule], selector: 'c8y-html-widget-advanced-settings', template: "<fieldset class=\"c8y-fieldset m-t-0\">\n  <legend>{{ 'Developer mode' | translate }}</legend>\n\n  <div class=\"d-flex a-i-center p-b-16\">\n    <label class=\"c8y-switch\">\n      <input\n        type=\"checkbox\"\n        [ngModel]=\"devMode\"\n        (change)=\"toggleAdvancedMode()\"\n        [disabled]=\"!canChangeSettings\"\n      />\n      <span></span>\n      <span>{{ 'Advanced developer mode' | translate }}</span>\n    </label>\n\n    <button class=\"btn-help\"\n      [attr.aria-label]=\"'Help' | translate\"\n      [popover]=\"devMode ? disableAdvanced : enableAdvanced\"\n      container=\"body\"\n      placement=\"right\"\n      triggers=\"focus\"\n      type=\"button\"\n    ></button>\n\n    <ng-template #enableAdvanced>\n      <p class=\"text-16 text-bold p-b-8\">\n        <i [c8yIcon]=\"'imac-settings'\"></i>\n        {{ 'Advanced developer mode' | translate }}\n      </p>\n      <p class=\"p-b-8\" translate>\n        Create custom widgets by modifying a basic WebComponent with HTML and JavaScript. This\n        <strong>unsupported</strong>\n        feature is ideal for rapid prototyping and simple customizations.\n      </p>\n      <p class=\"p-b-8\" translate>\n        For production environments, we recommend our fully-supported Angular-based\n        <a href=\"https://styleguide.cumulocity.com\" target=\"_blank\">Web SDK</a>.\n        <br />\n        Enable advanced developer mode to start coding!\n      </p>\n    </ng-template>\n\n    <ng-template #disableAdvanced>\n      <p class=\"text-16 text-bold p-b-8\">\n        {{ 'Advanced developer mode' | translate }}\n      </p>\n      <p class=\"p-b-8\" translate>\n        The advanced developer mode is enabled for this widget allowing to build extensive Web\n        Components.\n      </p>\n      <p class=\"p-b-8\" translate>\n        You can disable this mode again, but it will reset the current code.\n      </p>\n    </ng-template>\n\n    <ng-container *ngIf=\"!devMode\">\n      <label\n        class=\"c8y-switch m-l-auto\"\n      >\n        <input\n          type=\"checkbox\"\n          (change)=\"changeOption('cssEncapsulation')\"\n          [disabled]=\"!canChangeSettings\"\n          [ngModel]=\"cssEncapsulation\"\n        />\n        <span></span>\n        <span>{{ 'CSS encapsulation' | translate }}</span>\n      </label>\n      <button\n        class=\"btn-help m-0\"\n        [attr.aria-label]=\"'Help' | translate\"\n        popover=\"{{ CSS_ENCAPSULATION_HELP_CONTEXT | translate }}\"\n        triggers=\"focus\"\n        placement=\"left\"\n        container=\"body\"\n        type=\"button\"\n      ></button>\n    </ng-container>\n\n  </div>\n</fieldset>\n" }]
         }], propDecorators: { devMode: [{
@@ -410,10 +410,10 @@ class HtmlAiChatFeedbackComponent {
         this.htmlWidgetConfigService.configChanged$.next(newConfig);
         this.htmlWidgetConfigService.widgetConfigService.updateConfig({ config: newConfig }, true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: HtmlAiChatFeedbackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: HtmlAiChatFeedbackComponent, isStandalone: true, selector: "c8y-html-ai-chat-feedback", inputs: { step: "step" }, host: { classAttribute: "agent-step-feedback" }, usesOnChanges: true, ngImport: i0, template: "@if (!step.reasoning && !code) {\n  <div [innerHTML]=\"step.text | markdownToHtml | async\"></div>\n}\n@if (code) {\n  <div [innerHTML]=\"textBeforeCode | markdownToHtml | async\"></div>\n}\n@if (label) {\n  <c8y-list-group class=\"m-t-16 m-b-16\">\n    <c8y-li\n      [active]=\"!loading\"\n      [collapsed]=\"collapsed\"\n    >\n      <c8y-li-icon>\n        <span\n          class=\"btn-ai btn-ai-hint btn-sm\"\n          [ngClass]=\"{ working: loading }\"\n        >\n          <span></span>\n        </span>\n      </c8y-li-icon>\n      <c8y-li-body>\n        {{ label }}\n      </c8y-li-body>\n\n      @if (canCollapse) {\n        <c8y-li-collapse>\n          @if (step.reasoning) {\n            <div [innerHTML]=\"step.reasoning | markdownToHtml | async\"></div>\n          } @else if (code) {\n            <pre\n              class=\"fit-w\"\n              style=\"max-height: 320px\"\n              >{{ code }}</pre\n            >\n            @if (!loading) {\n              <button\n                class=\"btn btn-default btn-sm\"\n                [attr.aria-label]=\"'Revert to this version' | translate\"\n                [tooltip]=\"'Revert to this version' | translate\"\n                container=\"body\"\n                (click)=\"revert()\"\n              >\n                <i c8yIcon=\"undo\"></i>\n              </button>\n            }\n          } @else if (step) {\n            <pre\n              class=\"fit-w\"\n              style=\"max-height: 320px\"\n              >{{ step | json }}</pre\n            >\n          }\n        </c8y-li-collapse>\n      }\n    </c8y-li>\n  </c8y-list-group>\n}\n\n@if (code) {\n  <div [innerHTML]=\"textAfterCode | markdownToHtml | async\"></div>\n}\n", dependencies: [{ kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: MarkdownToHtmlPipe, name: "markdownToHtml" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HtmlAiChatFeedbackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: HtmlAiChatFeedbackComponent, isStandalone: true, selector: "c8y-html-ai-chat-feedback", inputs: { step: "step" }, host: { classAttribute: "agent-step-feedback" }, usesOnChanges: true, ngImport: i0, template: "@if (!step.reasoning && !code) {\n  <div [innerHTML]=\"step.text | markdownToHtml | async\"></div>\n}\n@if (code) {\n  <div [innerHTML]=\"textBeforeCode | markdownToHtml | async\"></div>\n}\n@if (label) {\n  <c8y-list-group class=\"m-t-16 m-b-16\">\n    <c8y-li\n      [active]=\"!loading\"\n      [collapsed]=\"collapsed\"\n    >\n      <c8y-li-icon>\n        <span\n          class=\"btn-ai btn-ai-hint btn-sm\"\n          [ngClass]=\"{ working: loading }\"\n        >\n          <span></span>\n        </span>\n      </c8y-li-icon>\n      <c8y-li-body>\n        {{ label }}\n      </c8y-li-body>\n\n      @if (canCollapse) {\n        <c8y-li-collapse>\n          @if (step.reasoning) {\n            <div [innerHTML]=\"step.reasoning | markdownToHtml | async\"></div>\n          } @else if (code) {\n            <pre\n              class=\"fit-w\"\n              style=\"max-height: 320px\"\n              >{{ code }}</pre\n            >\n            @if (!loading) {\n              <button\n                class=\"btn btn-default btn-sm\"\n                [attr.aria-label]=\"'Revert to this version' | translate\"\n                [tooltip]=\"'Revert to this version' | translate\"\n                container=\"body\"\n                (click)=\"revert()\"\n              >\n                <i c8yIcon=\"undo\"></i>\n              </button>\n            }\n          } @else if (step) {\n            <pre\n              class=\"fit-w\"\n              style=\"max-height: 320px\"\n              >{{ step | json }}</pre\n            >\n          }\n        </c8y-li-collapse>\n      }\n    </c8y-li>\n  </c8y-list-group>\n}\n\n@if (code) {\n  <div [innerHTML]=\"textAfterCode | markdownToHtml | async\"></div>\n}\n", dependencies: [{ kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: MarkdownToHtmlPipe, name: "markdownToHtml" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: HtmlAiChatFeedbackComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HtmlAiChatFeedbackComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-html-ai-chat-feedback', imports: [
                         ListGroupComponent,
@@ -584,10 +584,10 @@ class HtmlFrameComponent {
             : this.config.css, this.config.options.cssEncapsulation);
         return webComponentScript;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: HtmlFrameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.3", type: HtmlFrameComponent, isStandalone: true, selector: "c8y-html-frame", inputs: { config: "config", device: "device", useSalt: "useSalt" }, host: { classAttribute: "d-contents" }, viewQueries: [{ propertyName: "hostElement", first: true, predicate: ["hostElement"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngFor=\"let alert of alerts\">\n  <div\n    class=\"alert m-8\"\n    role=\"alert\"\n    [ngClass]=\"{\n      'alert-danger': alert.type === 'danger',\n      'alert-warning': alert.type === 'warning',\n      'alert-info': alert.type === 'info',\n      'alert-success': alert.type === 'success'\n    }\"\n  >\n    <p><strong translate>There was an issue in the HTML widget:</strong></p>\n    <pre>{{ alert.text }}</pre>\n  </div>\n</ng-container>\n<div\n  class=\"fit-w fit-h\"\n  #hostElement\n></div>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HtmlFrameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.15", type: HtmlFrameComponent, isStandalone: true, selector: "c8y-html-frame", inputs: { config: "config", device: "device", useSalt: "useSalt" }, host: { classAttribute: "d-contents" }, viewQueries: [{ propertyName: "hostElement", first: true, predicate: ["hostElement"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngFor=\"let alert of alerts\">\n  <div\n    class=\"alert m-8\"\n    role=\"alert\"\n    [ngClass]=\"{\n      'alert-danger': alert.type === 'danger',\n      'alert-warning': alert.type === 'warning',\n      'alert-info': alert.type === 'info',\n      'alert-success': alert.type === 'success'\n    }\"\n  >\n    <p><strong translate>There was an issue in the HTML widget:</strong></p>\n    <pre>{{ alert.text }}</pre>\n  </div>\n</ng-container>\n<div\n  class=\"fit-w fit-h\"\n  #hostElement\n></div>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: HtmlFrameComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HtmlFrameComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [NgFor, NgClass], selector: 'c8y-html-frame', host: { class: 'd-contents' }, template: "<ng-container *ngFor=\"let alert of alerts\">\n  <div\n    class=\"alert m-8\"\n    role=\"alert\"\n    [ngClass]=\"{\n      'alert-danger': alert.type === 'danger',\n      'alert-warning': alert.type === 'warning',\n      'alert-info': alert.type === 'info',\n      'alert-success': alert.type === 'success'\n    }\"\n  >\n    <p><strong translate>There was an issue in the HTML widget:</strong></p>\n    <pre>{{ alert.text }}</pre>\n  </div>\n</ng-container>\n<div\n  class=\"fit-w fit-h\"\n  #hostElement\n></div>\n" }]
         }], ctorParameters: () => [], propDecorators: { config: [{
@@ -596,7 +596,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                 type: Input
             }], useSalt: [{
                 type: Input
-            }] } });
+            }], hostElement: [{ type: i0.ViewChild, args: ['hostElement', { isSignal: true }] }] } });
 
 class WidgetCodeEditorComponent {
     constructor() {
@@ -674,10 +674,10 @@ class WidgetCodeEditorComponent {
         }
         this.configService.changeCss(code);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: WidgetCodeEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: WidgetCodeEditorComponent, isStandalone: true, selector: "c8y-widget-code-editor", inputs: { mode: "mode", config: "config" }, viewQueries: [{ propertyName: "editorComponent", first: true, predicate: EditorComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<c8y-widget-config-feedback>\n  <div class=\"d-flex\">\n    @if (config?.devMode && !config?.legacy) {\n      <span\n        class=\"tag tag--warning text-12\"\n        translate\n      >\n        Advanced developer mode\n      </span>\n    }\n  </div>\n  <div class=\"d-flex\">\n    @if (config?.legacy) {\n      <span\n        class=\"tag tag--warning text-12\"\n        [title]=\"\n          'This widget is in legacy mode. Consider to upgrade this to a new HTML widget. Read our documentation on details to transform your widget'\n            | translate\n        \"\n        translate\n      >\n        Legacy mode\n      </span>\n    }\n  </div>\n</c8y-widget-config-feedback>\n\n<div class=\"d-flex d-col fit-h fit-w\">\n  <c8y-html-widget-advanced-settings\n    [devMode]=\"config?.devMode\"\n    [cssEncapsulation]=\"config?.options?.cssEncapsulation\"\n  ></c8y-html-widget-advanced-settings>\n\n  <fieldset class=\"c8y-fieldset p-0 overflow-hidden\">\n    <legend class=\"m-l-16 p-l-0\">{{ 'Code' | translate }}</legend>\n\n    <div class=\"btn-group btn-group-sm m-l-0 p-t-8 p-b-8 p-l-16 p-r-16 fit-w d-flex\">\n      <button\n        class=\"btn btn-default\"\n        [attr.aria-label]=\"'Undo' | translate\"\n        [tooltip]=\"'Undo' | translate\"\n        placement=\"top\"\n        container=\"body\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"undo()\"\n      >\n        <i [c8yIcon]=\"'undo'\"></i>\n      </button>\n\n      <button\n        class=\"btn btn-default\"\n        [attr.aria-label]=\"'Redo' | translate\"\n        [tooltip]=\"'Redo' | translate\"\n        placement=\"top\"\n        container=\"body\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"redo()\"\n      >\n        <i [c8yIcon]=\"'redo'\"></i>\n      </button>\n\n      <button\n        class=\"btn btn-default\"\n        [attr.aria-label]=\"'Format code' | translate\"\n        [tooltip]=\"'Format code' | translate\"\n        placement=\"top\"\n        container=\"body\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"formatCode()\"\n      >\n        <i [c8yIcon]=\"'format-align-left'\"></i>\n      </button>\n\n      <label class=\"c8y-switch m-l-auto\">\n        <input\n          type=\"checkbox\"\n          [checked]=\"isAutoSaveEnabled\"\n          (change)=\"isAutoSaveEnabled = !isAutoSaveEnabled\"\n        />\n        <span></span>\n        <span translate>Auto save</span>\n      </label>\n    </div>\n\n    <div\n      class=\"btn-toolbar m-0 p-relative\"\n      role=\"toolbar\"\n    >\n      <c8y-tabs-outlet\n        class=\"elevation-none\"\n        [outletName]=\"TAB_OUTLET_NAME\"\n        [orientation]=\"'horizontal'\"\n        [openFirstTab]=\"false\"\n      ></c8y-tabs-outlet>\n      <c8y-tab\n        [icon]=\"'code'\"\n        [label]=\"(config?.devMode ? TAB_WEBCOMPONENT_LABEL : TAB_HTML_LABEL) | translate\"\n        [priority]=\"100\"\n        [showAlways]=\"true\"\n        [tabsOutlet]=\"TAB_OUTLET_NAME\"\n        [isActive]=\"mode === 'code'\"\n        (onSelect)=\"switchMode('code')\"\n      ></c8y-tab>\n      @if (!config?.devMode && !config?.legacy) {\n        <c8y-tab\n          [icon]=\"'c8y-css'\"\n          [label]=\"TAB_CSS_LABEL | translate\"\n          [priority]=\"0\"\n          [tabsOutlet]=\"TAB_OUTLET_NAME\"\n          [isActive]=\"mode === 'css'\"\n          (onSelect)=\"switchMode('css')\"\n        ></c8y-tab>\n      }\n    </div>\n\n    @if (!isLoading) {\n      @if (!(mode === 'css' && config?.devMode)) {\n        <c8y-editor\n          class=\"flex-grow d-block\"\n          style=\"height: 450px\"\n          [ngModel]=\"value\"\n          (ngModelChange)=\"changeCode($event)\"\n          [editorOptions]=\"{\n            language,\n            tabSize: 2,\n            insertSpaces: true,\n            minimap: { enabled: false }\n          }\"\n          (editorInit)=\"editorLoaded($event)\"\n        ></c8y-editor>\n      }\n    } @else {\n      <c8y-loading></c8y-loading>\n    }\n  </fieldset>\n</div>\n", dependencies: [{ kind: "component", type: EditorComponent, selector: "c8y-editor", inputs: ["editorOptions", "theme"], outputs: ["editorInit"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: WidgetConfigFeedbackComponent, selector: "c8y-widget-config-feedback" }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i2$1.TabsOutletComponent, selector: "c8y-tabs-outlet,c8y-ui-tabs", inputs: ["tabs", "orientation", "navigatorOpen", "outletName", "context", "openFirstTab", "hasHeader"] }, { kind: "component", type: i2$1.TabComponent, selector: "c8y-tab", inputs: ["path", "label", "icon", "priority", "orientation", "injector", "tabsOutlet", "isActive", "text", "showAlways"], outputs: ["onSelect"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: AdvancedSettingsComponent, selector: "c8y-html-widget-advanced-settings", inputs: ["devMode", "cssEncapsulation"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WidgetCodeEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: WidgetCodeEditorComponent, isStandalone: true, selector: "c8y-widget-code-editor", inputs: { mode: "mode", config: "config" }, viewQueries: [{ propertyName: "editorComponent", first: true, predicate: EditorComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<c8y-widget-config-feedback>\n  <div class=\"d-flex\">\n    @if (config?.devMode && !config?.legacy) {\n      <span\n        class=\"tag tag--warning text-12\"\n        translate\n      >\n        Advanced developer mode\n      </span>\n    }\n  </div>\n  <div class=\"d-flex\">\n    @if (config?.legacy) {\n      <span\n        class=\"tag tag--warning text-12\"\n        [title]=\"\n          'This widget is in legacy mode. Consider to upgrade this to a new HTML widget. Read our documentation on details to transform your widget'\n            | translate\n        \"\n        translate\n      >\n        Legacy mode\n      </span>\n    }\n  </div>\n</c8y-widget-config-feedback>\n\n<div class=\"d-flex d-col fit-h fit-w\">\n  <c8y-html-widget-advanced-settings\n    [devMode]=\"config?.devMode\"\n    [cssEncapsulation]=\"config?.options?.cssEncapsulation\"\n  ></c8y-html-widget-advanced-settings>\n\n  <fieldset class=\"c8y-fieldset p-0 overflow-hidden\">\n    <legend class=\"m-l-16 p-l-0\">{{ 'Code' | translate }}</legend>\n\n    <div class=\"btn-group btn-group-sm m-l-0 p-t-8 p-b-8 p-l-16 p-r-16 fit-w d-flex\">\n      <button\n        class=\"btn btn-default\"\n        [attr.aria-label]=\"'Undo' | translate\"\n        [tooltip]=\"'Undo' | translate\"\n        placement=\"top\"\n        container=\"body\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"undo()\"\n      >\n        <i [c8yIcon]=\"'undo'\"></i>\n      </button>\n\n      <button\n        class=\"btn btn-default\"\n        [attr.aria-label]=\"'Redo' | translate\"\n        [tooltip]=\"'Redo' | translate\"\n        placement=\"top\"\n        container=\"body\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"redo()\"\n      >\n        <i [c8yIcon]=\"'redo'\"></i>\n      </button>\n\n      <button\n        class=\"btn btn-default\"\n        [attr.aria-label]=\"'Format code' | translate\"\n        [tooltip]=\"'Format code' | translate\"\n        placement=\"top\"\n        container=\"body\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"formatCode()\"\n      >\n        <i [c8yIcon]=\"'format-align-left'\"></i>\n      </button>\n\n      <label class=\"c8y-switch m-l-auto\">\n        <input\n          type=\"checkbox\"\n          [checked]=\"isAutoSaveEnabled\"\n          (change)=\"isAutoSaveEnabled = !isAutoSaveEnabled\"\n        />\n        <span></span>\n        <span translate>Auto save</span>\n      </label>\n    </div>\n\n    <div\n      class=\"btn-toolbar m-0 p-relative\"\n      role=\"toolbar\"\n    >\n      <c8y-tabs-outlet\n        class=\"elevation-none\"\n        [outletName]=\"TAB_OUTLET_NAME\"\n        [orientation]=\"'horizontal'\"\n        [openFirstTab]=\"false\"\n      ></c8y-tabs-outlet>\n      <c8y-tab\n        [icon]=\"'code'\"\n        [label]=\"(config?.devMode ? TAB_WEBCOMPONENT_LABEL : TAB_HTML_LABEL) | translate\"\n        [priority]=\"100\"\n        [showAlways]=\"true\"\n        [tabsOutlet]=\"TAB_OUTLET_NAME\"\n        [isActive]=\"mode === 'code'\"\n        (onSelect)=\"switchMode('code')\"\n      ></c8y-tab>\n      @if (!config?.devMode && !config?.legacy) {\n        <c8y-tab\n          [icon]=\"'c8y-css'\"\n          [label]=\"TAB_CSS_LABEL | translate\"\n          [priority]=\"0\"\n          [tabsOutlet]=\"TAB_OUTLET_NAME\"\n          [isActive]=\"mode === 'css'\"\n          (onSelect)=\"switchMode('css')\"\n        ></c8y-tab>\n      }\n    </div>\n\n    @if (!isLoading) {\n      @if (!(mode === 'css' && config?.devMode)) {\n        <c8y-editor\n          class=\"flex-grow d-block\"\n          style=\"height: 450px\"\n          [ngModel]=\"value\"\n          (ngModelChange)=\"changeCode($event)\"\n          [editorOptions]=\"{\n            language,\n            tabSize: 2,\n            insertSpaces: true,\n            minimap: { enabled: false }\n          }\"\n          (editorInit)=\"editorLoaded($event)\"\n        ></c8y-editor>\n      }\n    } @else {\n      <c8y-loading></c8y-loading>\n    }\n  </fieldset>\n</div>\n", dependencies: [{ kind: "component", type: EditorComponent, selector: "c8y-editor", inputs: ["editorOptions", "theme"], outputs: ["editorInit"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: WidgetConfigFeedbackComponent, selector: "c8y-widget-config-feedback" }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i2$1.TabsOutletComponent, selector: "c8y-tabs-outlet,c8y-ui-tabs", inputs: ["tabs", "orientation", "navigatorOpen", "outletName", "context", "openFirstTab", "hasHeader"] }, { kind: "component", type: i2$1.TabComponent, selector: "c8y-tab", inputs: ["path", "label", "icon", "priority", "orientation", "injector", "tabsOutlet", "isActive", "text", "showAlways"], outputs: ["onSelect"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: AdvancedSettingsComponent, selector: "c8y-html-widget-advanced-settings", inputs: ["devMode", "cssEncapsulation"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: WidgetCodeEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WidgetCodeEditorComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [
                         EditorComponent,
@@ -720,10 +720,10 @@ class HtmlWidgetConfigComponent {
         // it here.
         this.htmlWidgetConfigService.destroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: HtmlWidgetConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: HtmlWidgetConfigComponent, isStandalone: true, selector: "c8y-html-widget-config", viewQueries: [{ propertyName: "htmlPreviewTemplate", first: true, predicate: ["htmlPreview"], descendants: true }], ngImport: i0, template: "<c8y-widget-code-editor\n  [config]=\"htmlWidgetConfigService.config$ | async\"\n  [mode]=\"'code'\"\n></c8y-widget-code-editor>\n\n<ng-template #htmlPreview>\n  <c8y-html-frame\n    [config]=\"htmlWidgetConfigService.codeEditorChangeConfig$ | async\"\n    [device]=\"(widgetConfigService.currentConfig$ | async).device\"\n    [useSalt]=\"true\"\n  ></c8y-html-frame>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: HtmlFrameComponent, selector: "c8y-html-frame", inputs: ["config", "device", "useSalt"] }, { kind: "component", type: WidgetCodeEditorComponent, selector: "c8y-widget-code-editor", inputs: ["mode", "config"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HtmlWidgetConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: HtmlWidgetConfigComponent, isStandalone: true, selector: "c8y-html-widget-config", viewQueries: [{ propertyName: "htmlPreviewTemplate", first: true, predicate: ["htmlPreview"], descendants: true }], ngImport: i0, template: "<c8y-widget-code-editor\n  [config]=\"htmlWidgetConfigService.config$ | async\"\n  [mode]=\"'code'\"\n></c8y-widget-code-editor>\n\n<ng-template #htmlPreview>\n  <c8y-html-frame\n    [config]=\"htmlWidgetConfigService.codeEditorChangeConfig$ | async\"\n    [device]=\"(widgetConfigService.currentConfig$ | async).device\"\n    [useSalt]=\"true\"\n  ></c8y-html-frame>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: HtmlFrameComponent, selector: "c8y-html-frame", inputs: ["config", "device", "useSalt"] }, { kind: "component", type: WidgetCodeEditorComponent, selector: "c8y-widget-code-editor", inputs: ["mode", "config"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: HtmlWidgetConfigComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HtmlWidgetConfigComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-html-widget-config', standalone: true, imports: [RouterModule, FormsModule, AsyncPipe, HtmlFrameComponent, WidgetCodeEditorComponent], template: "<c8y-widget-code-editor\n  [config]=\"htmlWidgetConfigService.config$ | async\"\n  [mode]=\"'code'\"\n></c8y-widget-code-editor>\n\n<ng-template #htmlPreview>\n  <c8y-html-frame\n    [config]=\"htmlWidgetConfigService.codeEditorChangeConfig$ | async\"\n    [device]=\"(widgetConfigService.currentConfig$ | async).device\"\n    [useSalt]=\"true\"\n  ></c8y-html-frame>\n</ng-template>\n" }]
         }], propDecorators: { htmlPreviewTemplate: [{
@@ -755,10 +755,10 @@ class HtmlWidgetPropertiesSelectorComponent {
         const content = '${this.c8yContext' + path + '}';
         await this.clipboardService.writeText(content);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: HtmlWidgetPropertiesSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: HtmlWidgetPropertiesSelectorComponent, isStandalone: true, selector: "c8y-html-widget-properties-selector", host: { classAttribute: "bg-level-1" }, ngImport: i0, template: "<div\n  class=\"d-flex m-b-8\"\n  style=\"margin-top: -16px\"\n>\n  <em\n    class=\"m-l-24 text-muted\"\n    translate\n  >\n    How to use properties in the widget\n  </em>\n  <button\n    class=\"btn-help btn-help--sm\"\n    [attr.aria-label]=\"'Help' | translate\"\n    [popover]=\"helpContent\"\n    placement=\"right\"\n    triggers=\"focus\"\n    container=\"body\"\n    type=\"button\"\n  ></button>\n</div>\n<c8y-asset-property-list\n  class=\"inner-scroll bg-inherit d-block\"\n  style=\"max-height: 450px\"\n  [asset]=\"(widgetConfigService.currentConfig$ | async).device\"\n  [config]=\"{\n    selectMode: 'none',\n    expansionMode: 'expandedByDefault',\n    filterable: false,\n    allowDragAndDrop: true\n  }\"\n>\n  <button\n    class=\"btn-dot btn fit-h\"\n    [attr.aria-label]=\"'Copy' | translate\"\n    tooltip=\"{{ 'Copy' | translate }}\"\n    type=\"button\"\n    *c8yAssetPropertyAction=\"let context\"\n    [delay]=\"500\"\n    (click)=\"copyProperty(context)\"\n  >\n    <i class=\"dlt-c8y-icon-copy\"></i>\n  </button>\n</c8y-asset-property-list>\n\n<ng-template #helpContent>\n  <p\n    class=\"p-b-8\"\n    translate\n  >\n    Click the copy icon next to a property, then paste it into the HTML editor below as a template\n    literal.\n  </p>\n</ng-template>\n", dependencies: [{ kind: "component", type: AssetPropertyListComponent, selector: "c8y-asset-property-list", inputs: ["config", "asset", "extraProperties"], outputs: ["selectedProperties"] }, { kind: "directive", type: AssetPropertyActionDirective, selector: "[c8yAssetPropertyAction]" }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HtmlWidgetPropertiesSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: HtmlWidgetPropertiesSelectorComponent, isStandalone: true, selector: "c8y-html-widget-properties-selector", host: { classAttribute: "bg-level-1" }, ngImport: i0, template: "<div\n  class=\"d-flex m-b-8\"\n  style=\"margin-top: -16px\"\n>\n  <em\n    class=\"m-l-24 text-muted\"\n    translate\n  >\n    How to use properties in the widget\n  </em>\n  <button\n    class=\"btn-help btn-help--sm\"\n    [attr.aria-label]=\"'Help' | translate\"\n    [popover]=\"helpContent\"\n    placement=\"right\"\n    triggers=\"focus\"\n    container=\"body\"\n    type=\"button\"\n  ></button>\n</div>\n<c8y-asset-property-list\n  class=\"inner-scroll bg-inherit d-block\"\n  style=\"max-height: 450px\"\n  [asset]=\"(widgetConfigService.currentConfig$ | async).device\"\n  [config]=\"{\n    selectMode: 'none',\n    expansionMode: 'expandedByDefault',\n    filterable: false,\n    allowDragAndDrop: true\n  }\"\n>\n  <button\n    class=\"btn-dot btn fit-h\"\n    [attr.aria-label]=\"'Copy' | translate\"\n    tooltip=\"{{ 'Copy' | translate }}\"\n    type=\"button\"\n    *c8yAssetPropertyAction=\"let context\"\n    [delay]=\"500\"\n    (click)=\"copyProperty(context)\"\n  >\n    <i class=\"dlt-c8y-icon-copy\"></i>\n  </button>\n</c8y-asset-property-list>\n\n<ng-template #helpContent>\n  <p\n    class=\"p-b-8\"\n    translate\n  >\n    Click the copy icon next to a property, then paste it into the HTML editor below as a template\n    literal.\n  </p>\n</ng-template>\n", dependencies: [{ kind: "component", type: AssetPropertyListComponent, selector: "c8y-asset-property-list", inputs: ["config", "asset", "extraProperties"], outputs: ["selectedProperties"] }, { kind: "directive", type: AssetPropertyActionDirective, selector: "[c8yAssetPropertyAction]" }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: HtmlWidgetPropertiesSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HtmlWidgetPropertiesSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-html-widget-properties-selector', host: {
                         class: 'bg-level-1'
@@ -794,10 +794,10 @@ class HtmlWidgetComponent {
             }
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: HtmlWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: HtmlWidgetComponent, isStandalone: true, selector: "c8y-html-widget", inputs: { config: "config" }, ngImport: i0, template: "<c8y-html-frame\n  [config]=\"config.config\"\n  [device]=\"config.device\"\n></c8y-html-frame>\n", dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "component", type: HtmlFrameComponent, selector: "c8y-html-frame", inputs: ["config", "device", "useSalt"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HtmlWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: HtmlWidgetComponent, isStandalone: true, selector: "c8y-html-widget", inputs: { config: "config" }, ngImport: i0, template: "<c8y-html-frame\n  [config]=\"config.config\"\n  [device]=\"config.device\"\n></c8y-html-frame>\n", dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "component", type: HtmlFrameComponent, selector: "c8y-html-frame", inputs: ["config", "device", "useSalt"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: HtmlWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HtmlWidgetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-html-widget', standalone: true, imports: [RouterModule, HtmlFrameComponent], template: "<c8y-html-frame\n  [config]=\"config.config\"\n  [device]=\"config.device\"\n></c8y-html-frame>\n" }]
         }], propDecorators: { config: [{