@c8y/ngx-components 1006.6.36 → 1006.6.40

package/fesm2015/c8y-ngx-components.js

@@ -1,11 +1,11 @@
 import { __decorate, __awaiter, __param } from 'tslib';
-import { InjectionToken, Injector, ɵɵdefineInjectable, ɵɵinject, INJECTOR, Injectable, Optional, Inject, isDevMode, ViewContainerRef, Component, Pipe, LOCALE_ID, NgModule, ElementRef, Renderer2, Input, Directive, TemplateRef, ComponentFactoryResolver, EventEmitter, Output, HostBinding, APP_INITIALIZER, ViewChild, Attribute, ContentChild, ContentChildren, SecurityContext, HostListener, NgZone, ViewChildren, ChangeDetectorRef, Type, ChangeDetectionStrategy, forwardRef, Host } from '@angular/core';
+import { InjectionToken, Injector, ɵɵdefineInjectable, ɵɵinject, INJECTOR, Injectable, Optional, Inject, isDevMode, ViewContainerRef, Component, Pipe, EventEmitter, ElementRef, ChangeDetectorRef, Input, Directive, LOCALE_ID, NgModule, Renderer2, TemplateRef, ComponentFactoryResolver, Output, HostBinding, APP_INITIALIZER, ViewChild, Attribute, ContentChild, ContentChildren, SecurityContext, HostListener, NgZone, ViewChildren, Type, ChangeDetectionStrategy, forwardRef, Host } from '@angular/core';
 import { NavigationEnd, Router, RouterModule as RouterModule$1, RouterLinkActive, PRIMARY_OUTLET, ActivatedRoute } from '@angular/router';
-import { of, defer, combineLatest, isObservable, from, race, Subject, BehaviorSubject, pipe, EMPTY, timer, merge as merge$1, fromEvent, fromEventPattern, NEVER } from 'rxjs';
+import { of, defer, combineLatest, isObservable, from, race, Subject, BehaviorSubject, pipe, EMPTY, timer, merge as merge$1, fromEvent, fromEventPattern, ReplaySubject, NEVER } from 'rxjs';
 import { filter, merge, startWith, switchMap, map, distinctUntilChanged, shareReplay, scan, combineLatest as combineLatest$1, debounceTime, first, tap, catchError, take, debounce, finalize, takeUntil, mergeMap, expand, every, toArray } from 'rxjs/operators';
-import { flatten, isFunction, sortBy, camelCase, isUndefined, keys, matches, upperFirst, each, mapValues, mapKeys, get as get$1, assign, filter as filter$1, clone, map as map$1, isEmpty as isEmpty$1, find as find$1, includes, orderBy, flow, isNil, pick, omitBy, chunk, union, without, parseInt as parseInt$1, remove, transform, identity, forEach, cloneDeep, some, findIndex } from 'lodash-es';
+import { flatten, isFunction, sortBy, camelCase, isUndefined, keys, matches, upperFirst, each, mapValues, mapKeys, get as get$1, isEqual, assign, filter as filter$1, isString, clone, map as map$1, isEmpty as isEmpty$1, find as find$1, includes, orderBy, flow, isNil, pick, omitBy, chunk, union, without, parseInt as parseInt$1, remove, transform, identity, forEach, cloneDeep, some, findIndex } from 'lodash-es';
 import { SystemOptionsService, TenantOptionsService, ApiService, DataModule } from '@c8y/ngx-components/api';
-import { ApplicationService, FetchClient, OperationStatus, UserService, InventoryService, BasicAuth, CookieAuth, TenantService, Realtime, TenantLoginOptionsService, Client, PasswordStrength, SystemOptionsService as SystemOptionsService$1, QueriesUtil } from '@c8y/client';
+import { ApplicationService, FetchClient, OperationStatus, UserService, InventoryService, BasicAuth, CookieAuth, TenantService, Realtime, TenantLoginOptionsService, Client, PasswordStrength, QueriesUtil } from '@c8y/client';
 import { TranslateService as TranslateService$1, TranslateParser, TranslateDefaultParser, TranslateLoader, TranslateCompiler, TranslateFakeCompiler, MissingTranslationHandler, TranslateStore, USE_STORE, USE_DEFAULT_LANG, USE_EXTEND, DEFAULT_LANGUAGE, TranslateModule } from '@ngx-translate/core';
 import { get, find, negate, isUndefined as isUndefined$1, sortBy as sortBy$1, isEmpty } from 'lodash';
 import { formatDate, registerLocaleData, CommonModule as CommonModule$1, LocationStrategy } from '@angular/common';
@@ -3136,7 +3136,7 @@ const MESSAGES = {
         }
     },
     '^Error updating tenant! Cannot insert second configuration for Password code grant internal/Bad Request$': {
-        gettext: gettext('This login mode was already set by other admin, please refresh page to update data')
+        gettext: gettext('This login mode was already set by another administrator. Refresh the page to update the data.')
     },
 };
 
@@ -3225,6 +3225,100 @@ TranslateParserCustom = __decorate([
     Injectable()
 ], TranslateParserCustom);
 
+/**
+ * This is temporary fallback directive that is used to handle HTML blocks translation on maintenance versions
+ * in version 10.9.4 and later, this is replaced by default translate directive.
+ */
+let ForceHtmlTranslateDirective = class ForceHtmlTranslateDirective {
+    constructor(translateService, element, _ref) {
+        this.translateService = translateService;
+        this.element = element;
+        this._ref = _ref;
+        /**
+         * Used to trigger events when html is replaced by directive.
+         */
+        this.htmlUpdateEvent = new EventEmitter();
+        // subscribe to onTranslationChange event, in case the translations of the current lang change
+        if (!this.onTranslationChangeSub) {
+            this.onTranslationChangeSub = this.translateService.onTranslationChange.subscribe((event) => {
+                if (event.lang === this.translateService.currentLang) {
+                    this.checkNodes();
+                }
+            });
+        }
+        // subscribe to onLangChange event, in case the language changes
+        if (!this.onLangChangeSub) {
+            this.onLangChangeSub = this.translateService.onLangChange.subscribe((event) => {
+                this.checkNodes();
+            });
+        }
+        // subscribe to onDefaultLangChange event, in case the default language changes
+        if (!this.onDefaultLangChangeSub) {
+            this.onDefaultLangChangeSub = this.translateService.onDefaultLangChange.subscribe((event) => {
+                this.checkNodes();
+            });
+        }
+    }
+    set translateParams(params) {
+        if (!isEqual(this.currentParams, params)) {
+            this.currentParams = params;
+            this.checkNodes();
+        }
+    }
+    ngAfterViewChecked() {
+        this.checkNodes();
+    }
+    checkNodes() {
+        if (this.isLookupKeyMissing()) {
+            this.element.nativeElement.lookupKey = this.getLookupKey();
+        }
+        this.translateAndUpdateHtmlContent();
+        this.htmlUpdateEvent.emit();
+    }
+    ngOnDestroy() {
+        if (this.onLangChangeSub) {
+            this.onLangChangeSub.unsubscribe();
+        }
+        if (this.onDefaultLangChangeSub) {
+            this.onDefaultLangChangeSub.unsubscribe();
+        }
+        if (this.onTranslationChangeSub) {
+            this.onTranslationChangeSub.unsubscribe();
+        }
+        this.htmlUpdateEvent.complete();
+    }
+    /**
+     * Builds lookup key from innerHTML, removes comments (that might be added by Angular) and trims it.
+     */
+    getLookupKey() {
+        return this.element.nativeElement.innerHTML.replace(/<!--.*?-->/gs, '').trim();
+    }
+    isLookupKeyMissing() {
+        return !this.element.nativeElement.lookupKey;
+    }
+    lookupKeyExist() {
+        return this.element.nativeElement.lookupKey;
+    }
+    translateAndUpdateHtmlContent() {
+        if (this.lookupKeyExist()) {
+            this.element.nativeElement.innerHTML = this.translateService.instant(this.element.nativeElement.lookupKey, this.currentParams || {});
+        }
+    }
+};
+ForceHtmlTranslateDirective.ctorParameters = () => [
+    { type: TranslateService$1 },
+    { type: ElementRef },
+    { type: ChangeDetectorRef }
+];
+__decorate([
+    Input()
+], ForceHtmlTranslateDirective.prototype, "translateParams", null);
+ForceHtmlTranslateDirective = __decorate([
+    Directive({
+        selector: '[forceHtmlTranslate]'
+    })
+], ForceHtmlTranslateDirective);
+
 var I18nModule_1;
 // Load these as a side effect
 try {
@@ -3299,8 +3393,9 @@ let I18nModule = I18nModule_1 = class I18nModule {
 };
 I18nModule = I18nModule_1 = __decorate([
     NgModule({
-        exports: [TranslateModule],
-        imports: [HttpClientModule]
+        exports: [TranslateModule, ForceHtmlTranslateDirective],
+        imports: [HttpClientModule],
+        declarations: [ForceHtmlTranslateDirective]
     })
 ], I18nModule);
 
@@ -6216,6 +6311,7 @@ let LoginService = class LoginService {
         };
         this.passwordStrengthSetting = {
             enforcePasswordStrength: false,
+            passwordStrengthValidity: false,
             greenMinLength: this.GREEN_MIN_LENGTH_DEFAULT
         };
         this.localhostRegExp = new RegExp('localhost');
@@ -6283,14 +6379,47 @@ let LoginService = class LoginService {
         return this.passwordStrengthSetting.greenMinLength;
     }
     /**
-     * Checks if password strength is enforced.
-     * @return true if enforced.
+     * Checks if password strength is enforced for system
+     * by retrieving value of `enforceStrength` property from loginOptions response
+     * @return boolean value, true if enforced, false otherwise.
      */
     getEnforcePasswordStrength() {
         const loginOption = this.getLoginOption();
-        this.passwordStrengthSetting.enforcePasswordStrength = get$1(loginOption, 'enforceStrength', 'false') === 'true' ? true : false;
+        const enforcePasswordStrength = get$1(loginOption, 'enforceStrength');
+        if (isString(enforcePasswordStrength)) {
+            this.passwordStrengthSetting.enforcePasswordStrength = enforcePasswordStrength === 'true' ? true : false;
+        }
+        else {
+            this.passwordStrengthSetting.enforcePasswordStrength = !!enforcePasswordStrength;
+        }
         return this.passwordStrengthSetting.enforcePasswordStrength;
     }
+    /**
+     * Checks if password strength is enforced for particular tenant
+     * by retrieving value of `strengthValidity` property from loginOptions response
+     * @return boolean value, true if enforced, false otherwise.
+     */
+    getPasswordStrengthValidity() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const loginOption = this.getLoginOption();
+            const strengthValidity = get$1(loginOption, 'strengthValidity');
+            if (isString(strengthValidity)) {
+                this.passwordStrengthSetting.passwordStrengthValidity = strengthValidity === 'true' ? true : false;
+            }
+            else {
+                this.passwordStrengthSetting.passwordStrengthValidity = !!strengthValidity;
+            }
+            return this.passwordStrengthSetting.passwordStrengthValidity;
+        });
+    }
+    /**
+     * Function determines if enforced strength checks should be enabled for current tenant
+     * based on properties retrieved from loginOptions
+     * @return boolean value, true if strength is enforced for tenant, false otherwise.
+     */
+    getPasswordStrengthEnforced() {
+        return this.getEnforcePasswordStrength() || this.getPasswordStrengthValidity();
+    }
     /**
      * Clears all backend errors.
      */
@@ -6806,7 +6935,7 @@ UserTotpSetupComponent = __decorate([
 ], UserTotpSetupComponent);
 
 let UserEditComponent = class UserEditComponent {
-    constructor(state, translate, passwordService, modalConfirmService, bsModalService, alert, userService, tenantLoginOptionsService) {
+    constructor(state, translate, passwordService, modalConfirmService, bsModalService, alert, userService, tenantLoginOptionsService, tenantService) {
         this.state = state;
         this.translate = translate;
         this.passwordService = passwordService;
@@ -6815,6 +6944,7 @@ let UserEditComponent = class UserEditComponent {
         this.alert = alert;
         this.userService = userService;
         this.tenantLoginOptionsService = tenantLoginOptionsService;
+        this.tenantService = tenantService;
         this.loading = false;
         this.onUser = new EventEmitter();
         this.onLanguage = new EventEmitter();
@@ -6829,6 +6959,9 @@ let UserEditComponent = class UserEditComponent {
     get user() { return this._user; }
     ngOnInit() {
         return __awaiter(this, void 0, void 0, function* () {
+            const currentTenant = (yield this.tenantService.current()).data;
+            const { enabledOnSystemLevel, enabledOnTenantLevel } = yield this.tenantService.getTfaSettings(currentTenant);
+            this.isTfaEnabled = enabledOnSystemLevel || enabledOnTenantLevel;
             yield this.initializeTotpSettings();
         });
     }
@@ -6887,7 +7020,8 @@ UserEditComponent.ctorParameters = () => [
     { type: BsModalService },
     { type: AlertService },
     { type: UserService },
-    { type: TenantLoginOptionsService }
+    { type: TenantLoginOptionsService },
+    { type: TenantService }
 ];
 __decorate([
     Input()
@@ -6910,7 +7044,7 @@ __decorate([
 UserEditComponent = __decorate([
     Component({
         selector: 'c8y-user-edit',
-        template: "<form #userForm=\"ngForm\" (ngSubmit)=\"userForm.form.valid && save()\">\n  <div class=\"alert alert-warning\" role=\"alert\" *ngIf=\"userIsExternal\" translate>\n    You cannot edit the user since it is managed via your authorization server.\n  </div>\n  <c8y-form-group>\n    <label translate for=\"userName\">Username (e.g. email)</label>\n    <input\n      id=\"userName\"\n      class=\"form-control\"\n      [(ngModel)]=\"user.userName\"\n      name=\"userName\"\n      autocomplete=\"off\"\n      required\n      maxlength=\"254\"\n      placeholder=\"{{ 'e.g. joe.doe@example.com`LOCALIZE`' | translate }}\"\n      [disabled]=\"user.id\"\n      c8yDefaultValidation=\"user\"\n    />\n  </c8y-form-group>\n\n  <c8y-form-group>\n    <label translate for=\"displayName\">Login alias</label>\n    <input\n      id=\"displayName\"\n      class=\"form-control\"\n      [(ngModel)]=\"user.displayName\"\n      name=\"displayName\"\n      autocomplete=\"off\"\n      maxlength=\"254\"\n      placeholder=\"{{ 'e.g. joe.doe`LOCALIZE`' | translate }}\"\n      [disabled]=\"userIsExternal\"\n      c8yDefaultValidation=\"loginAlias\"\n    />\n  </c8y-form-group>\n\n  <c8y-form-group [hasWarning]=\"!user.email\">\n    <label translate for=\"userEmail\">Email</label>\n    <input\n      id=\"userEmail\"\n      class=\"form-control\"\n      type=\"email\"\n      name=\"email\"\n      [maxlength]=\"254\"\n      autocomplete=\"off\"\n      placeholder=\"{{ 'e.g. joe.doe@example.com`LOCALIZE`' | translate }}\"\n      [(ngModel)]=\"user.email\"\n      email\n      [required]=\"user.newsletter\"\n      [disabled]=\"userIsExternal\"\n    />\n    <c8y-messages>\n      <c8y-message *ngIf=\"!user.email\" translate\n        >Note that email is required to reset password.</c8y-message\n      >\n    </c8y-messages>\n  </c8y-form-group>\n\n  <div class=\"row\" style=\"margin-left:-15px; margin-right:-15px\">\n    <div class=\"col-sm-6\">\n      <c8y-form-group>\n        <label translate for=\"userFirstName\">First name</label>\n        <input\n          id=\"userFirstName\"\n          class=\"form-control\"\n          autocomplete=\"off\"\n          maxlength=\"50\"\n          name=\"firstName\"\n          [(ngModel)]=\"user.firstName\"\n          [disabled]=\"userIsExternal\"\n        />\n      </c8y-form-group>\n    </div>\n    <div class=\"col-sm-6\">\n      <c8y-form-group>\n        <label translate for=\"userLastName\">Last name</label>\n        <input\n          class=\"form-control\"\n          autocomplete=\"off\"\n          maxlength=\"50\"\n          name=\"lastName\"\n          [(ngModel)]=\"user.lastName\"\n          [disabled]=\"userIsExternal\"\n        />\n      </c8y-form-group>\n    </div>\n  </div>\n\n  <c8y-form-group>\n    <label translate for=\"userTelephone\">Telephone</label>\n    <input\n      id=\"userTelephone\"\n      class=\"form-control\"\n      autocomplete=\"off\"\n      name=\"phone\"\n      maxlength=\"254\"\n      [(ngModel)]=\"user.phone\"\n      placeholder=\"{{ 'e.g. +49 9 876 543 210`LOCALIZE`' | translate }}\"\n      c8yPhoneValidation\n      c8yDefaultValidation=\"phoneNumber\"\n      [required]=\"user.twoFactorAuthenticationEnabled\"\n      [disabled]=\"userIsExternal\"\n    />\n  </c8y-form-group>\n\n  <c8y-form-group>\n    <label translate for=\"userLang\">Language</label>\n    <div class=\"c8y-select-wrapper\">\n      <select\n        id=\"userLang\"\n        class=\"form-control\"\n        #selectLang\n        name=\"lang\"\n        [(ngModel)]=\"lang\"\n        (change)=\"onLanguage.emit(selectLang.value)\"\n        [disabled]=\"userIsExternal\"\n      >\n        <option *ngFor=\"let lang of langs\" [value]=\"lang\">{{\n          translate.getNativeLanguage(lang)\n        }}</option>\n      </select>\n      <span></span>\n    </div>\n  </c8y-form-group>\n\n  <div class=\"form-group\" *ngIf=\"!userIsExternal\">\n    <label class=\"control-label\">{{ 'Login options' | translate }}</label>\n    <c8y-new-password (password)=\"onNewPasswordChanged($event)\"></c8y-new-password>\n    <button\n      title=\"{{ 'Set up two-factor authentication' | translate }}\"\n      class=\"btn btn-default\"\n      type=\"button\"\n      (click)=\"setupTotp()\"\n      translate\n      *ngIf=\"userCanSetupTotp && !userHasActiveTotp\"\n    >\n      Set up two-factor authentication\n    </button>\n  </div>\n\n  <c8y-form-group *ngIf=\"!!(state.state$ | async).newsletter\">\n    <label translate>Newsletter</label>\n    <label class=\"c8y-checkbox\">\n      <input\n        type=\"checkbox\"\n        name=\"newsletter\"\n        [(ngModel)]=\"user.newsletter\"\n        [disabled]=\"userIsExternal\"\n      />\n      <span></span>\n      {{ 'Send me information about outages, maintenance or updates.' | translate }}\n    </label>\n  </c8y-form-group>\n\n  <div class=\"modal-footer\">\n    <button\n      title=\"{{ 'Cancel' | translate }}\"\n      class=\"btn btn-default\"\n      type=\"button\"\n      (click)=\"cancel()\"\n      translate\n    >\n      Cancel\n    </button>\n    <button\n      title=\"{{ 'Save' | translate }}\"\n      class=\"btn btn-primary\"\n      type=\"submit\"\n      [disabled]=\"!userForm.form.valid || userForm.form.pristine || loading || userIsExternal\"\n      translate\n    >\n      Save\n    </button>\n  </div>\n</form>\n"
+        template: "<form #userForm=\"ngForm\" (ngSubmit)=\"userForm.form.valid && save()\">\n  <div class=\"alert alert-warning\" role=\"alert\" *ngIf=\"userIsExternal\" translate>\n    You cannot edit the user since it is managed via your authorization server.\n  </div>\n  <c8y-form-group>\n    <label translate for=\"userName\">Username (e.g. email)</label>\n    <input\n      id=\"userName\"\n      class=\"form-control\"\n      [(ngModel)]=\"user.userName\"\n      name=\"userName\"\n      autocomplete=\"off\"\n      required\n      maxlength=\"254\"\n      placeholder=\"{{ 'e.g. joe.doe@example.com`LOCALIZE`' | translate }}\"\n      [disabled]=\"user.id\"\n      c8yDefaultValidation=\"user\"\n    />\n  </c8y-form-group>\n\n  <c8y-form-group>\n    <label translate for=\"displayName\">Login alias</label>\n    <input\n      id=\"displayName\"\n      class=\"form-control\"\n      [(ngModel)]=\"user.displayName\"\n      name=\"displayName\"\n      autocomplete=\"off\"\n      maxlength=\"254\"\n      placeholder=\"{{ 'e.g. joe.doe`LOCALIZE`' | translate }}\"\n      [disabled]=\"userIsExternal\"\n      c8yDefaultValidation=\"loginAlias\"\n    />\n  </c8y-form-group>\n\n  <c8y-form-group [hasWarning]=\"!user.email\">\n    <label translate for=\"userEmail\">Email</label>\n    <input\n      id=\"userEmail\"\n      class=\"form-control\"\n      type=\"email\"\n      name=\"email\"\n      [maxlength]=\"254\"\n      autocomplete=\"off\"\n      placeholder=\"{{ 'e.g. joe.doe@example.com`LOCALIZE`' | translate }}\"\n      [(ngModel)]=\"user.email\"\n      email\n      [required]=\"user.newsletter\"\n      [disabled]=\"userIsExternal\"\n    />\n    <c8y-messages>\n      <c8y-message *ngIf=\"!user.email\" translate\n        >Note that email is required to reset password.</c8y-message\n      >\n    </c8y-messages>\n  </c8y-form-group>\n\n  <div class=\"row\" style=\"margin-left:-15px; margin-right:-15px\">\n    <div class=\"col-sm-6\">\n      <c8y-form-group>\n        <label translate for=\"userFirstName\">First name</label>\n        <input\n          id=\"userFirstName\"\n          class=\"form-control\"\n          autocomplete=\"off\"\n          maxlength=\"50\"\n          name=\"firstName\"\n          [(ngModel)]=\"user.firstName\"\n          [disabled]=\"userIsExternal\"\n        />\n      </c8y-form-group>\n    </div>\n    <div class=\"col-sm-6\">\n      <c8y-form-group>\n        <label translate for=\"userLastName\">Last name</label>\n        <input\n          class=\"form-control\"\n          autocomplete=\"off\"\n          maxlength=\"50\"\n          name=\"lastName\"\n          [(ngModel)]=\"user.lastName\"\n          [disabled]=\"userIsExternal\"\n        />\n      </c8y-form-group>\n    </div>\n  </div>\n\n  <c8y-form-group>\n    <label translate for=\"userTelephone\">Telephone</label>\n    <input\n      id=\"userTelephone\"\n      class=\"form-control\"\n      autocomplete=\"off\"\n      name=\"phone\"\n      maxlength=\"254\"\n      [(ngModel)]=\"user.phone\"\n      placeholder=\"{{ 'e.g. +49 9 876 543 210`LOCALIZE`' | translate }}\"\n      c8yPhoneValidation\n      c8yDefaultValidation=\"phoneNumber\"\n      [required]=\"user.twoFactorAuthenticationEnabled\"\n      [disabled]=\"userIsExternal\"\n    />\n  </c8y-form-group>\n\n  <c8y-form-group>\n    <label translate for=\"userLang\">Language</label>\n    <div class=\"c8y-select-wrapper\">\n      <select\n        id=\"userLang\"\n        class=\"form-control\"\n        #selectLang\n        name=\"lang\"\n        [(ngModel)]=\"lang\"\n        (change)=\"onLanguage.emit(selectLang.value)\"\n        [disabled]=\"userIsExternal\"\n      >\n        <option *ngFor=\"let lang of langs\" [value]=\"lang\">{{\n          translate.getNativeLanguage(lang)\n        }}</option>\n      </select>\n      <span></span>\n    </div>\n  </c8y-form-group>\n\n  <div class=\"form-group\" *ngIf=\"!userIsExternal\">\n    <label class=\"control-label\">{{ 'Login options' | translate }}</label>\n    <c8y-new-password (password)=\"onNewPasswordChanged($event)\"></c8y-new-password>\n    <button\n      title=\"{{ 'Set up two-factor authentication' | translate }}\"\n      class=\"btn btn-default\"\n      type=\"button\"\n      (click)=\"setupTotp()\"\n      translate\n      *ngIf=\"userCanSetupTotp && !userHasActiveTotp && isTfaEnabled\"\n    >\n      Set up two-factor authentication\n    </button>\n  </div>\n\n  <c8y-form-group *ngIf=\"!!(state.state$ | async).newsletter\">\n    <label translate>Newsletter</label>\n    <label class=\"c8y-checkbox\">\n      <input\n        type=\"checkbox\"\n        name=\"newsletter\"\n        [(ngModel)]=\"user.newsletter\"\n        [disabled]=\"userIsExternal\"\n      />\n      <span></span>\n      {{ 'Send me information about outages, maintenance or updates.' | translate }}\n    </label>\n  </c8y-form-group>\n\n  <div class=\"modal-footer\">\n    <button\n      title=\"{{ 'Cancel' | translate }}\"\n      class=\"btn btn-default\"\n      type=\"button\"\n      (click)=\"cancel()\"\n      translate\n    >\n      Cancel\n    </button>\n    <button\n      title=\"{{ 'Save' | translate }}\"\n      class=\"btn btn-primary\"\n      type=\"submit\"\n      [disabled]=\"!userForm.form.valid || userForm.form.pristine || loading || userIsExternal\"\n      translate\n    >\n      Save\n    </button>\n  </div>\n</form>\n"
     })
 ], UserEditComponent);
 
@@ -7259,15 +7393,16 @@ PasswordStrengthComponent = __decorate([
 ], PasswordStrengthComponent);
 
 let NewPasswordComponent = class NewPasswordComponent {
-    constructor(systemOptions) {
-        this.systemOptions = systemOptions;
+    constructor(loginService) {
+        this.loginService = loginService;
         this.password = new EventEmitter();
         this.model = {};
-        this.enforcePasswordStrength = false;
         this.changePassword = false;
+        this.passwordEnforced = false;
     }
     ngOnInit() {
-        this.loadEnforcePasswordStrength();
+        this.loadPasswordStrengthSettings();
+        this.minlength = this.loginService.getGreenMinLength();
     }
     newPasswordChanged() {
         this.password.emit({
@@ -7275,20 +7410,14 @@ let NewPasswordComponent = class NewPasswordComponent {
             passwordStrength: this.model.strength
         });
     }
-    loadEnforcePasswordStrength() {
+    loadPasswordStrengthSettings() {
         return __awaiter(this, void 0, void 0, function* () {
-            try {
-                const { data } = yield this.systemOptions.detail({
-                    category: 'password',
-                    key: 'enforce.strength'
-                });
-                this.enforcePasswordStrength = data.value === 'true';
-            }
-            catch (e) {
-                // do nothing;
-            }
+            this.passwordEnforced = yield this.loginService.getEnforcePasswordStrength();
         });
     }
+    showPasswordStrength() {
+        return this.model.newPassword && this.model.newPassword.length >= this.minlength;
+    }
     toggleChangePassword() {
         this.changePassword = !this.changePassword;
         if (!this.changePassword) {
@@ -7298,7 +7427,7 @@ let NewPasswordComponent = class NewPasswordComponent {
     }
 };
 NewPasswordComponent.ctorParameters = () => [
-    { type: SystemOptionsService$1 }
+    { type: LoginService }
 ];
 __decorate([
     Output()
@@ -7306,7 +7435,7 @@ __decorate([
 NewPasswordComponent = __decorate([
     Component({
         selector: 'c8y-new-password',
-        template: "<div class=\"form-group\">\n  <button type=\"button\" class=\"btn btn-default\" (click)=\"toggleChangePassword()\">\n    <ng-container *ngIf=\"!changePassword\">\n      {{ 'Change password' | translate }}\n    </ng-container>\n    <ng-container *ngIf=\"changePassword\">\n      {{ 'Cancel password change' | translate }}\n    </ng-container>\n  </button>\n</div>\n\n<div *ngIf=\"changePassword\">\n  <c8y-form-group>\n    <label for=\"newPassword\" translate>Password</label>\n    <input\n      id=\"newPassword\"\n      [(ngModel)]=\"model.newPassword\"\n      #newPassword=\"ngModel\"\n      (change)=\"newPasswordChanged()\"\n      type=\"password\"\n      name=\"newPassword\"\n      class=\"form-control\"\n      placeholder=\"{{ 'e.g. my_new_password' | translate }}\"\n      required\n      c8yDefaultValidation=\"password\"\n      autocomplete=\"new-password\"\n    />\n  </c8y-form-group>\n\n  <c8y-form-group>\n    <label for=\"newConfirmPassword\" translate>Confirm password</label>\n    <input\n      id=\"newConfirmPassword\"\n      [(ngModel)]=\"model.newPasswordConfirm\"\n      #newPasswordConfirm=\"ngModel\"\n      type=\"password\"\n      name=\"newPasswordConfirm\"\n      class=\"form-control\"\n      placeholder=\"{{ 'e.g. my_new_password' | translate }}\"\n      required\n      passwordConfirm=\"newPassword\"\n      autocomplete=\"new-password\"\n    />\n  </c8y-form-group>\n\n  <c8y-password-strength\n    [password]=\"model.newPassword\"\n    [hidden]=\"!model.newPassword\"\n    (strength)=\"model.strength = $event\"\n  ></c8y-password-strength>\n\n  <c8y-password-check-list\n    [password]=\"model.newPassword\"\n    [hidden]=\"!enforcePasswordStrength\"\n  ></c8y-password-check-list>\n</div>\n",
+        template: "<div class=\"form-group\">\n  <button type=\"button\" class=\"btn btn-default\" (click)=\"toggleChangePassword()\">\n    <ng-container *ngIf=\"!changePassword\">\n      {{ 'Change password' | translate }}\n    </ng-container>\n    <ng-container *ngIf=\"changePassword\">\n      {{ 'Cancel password change' | translate }}\n    </ng-container>\n  </button>\n</div>\n\n<div *ngIf=\"changePassword\">\n  <c8y-form-group>\n    <label for=\"newPassword\" translate>Password</label>\n    <input\n      id=\"newPassword\"\n      [(ngModel)]=\"model.newPassword\"\n      #newPassword=\"ngModel\"\n      (change)=\"newPasswordChanged()\"\n      type=\"password\"\n      name=\"newPassword\"\n      class=\"form-control\"\n      placeholder=\"{{ 'e.g. my_new_password' | translate }}\"\n      required\n      c8yDefaultValidation=\"password\"\n      autocomplete=\"new-password\"\n    />\n  </c8y-form-group>\n\n  <c8y-form-group>\n    <label for=\"newConfirmPassword\" translate>Confirm password</label>\n    <input\n      id=\"newConfirmPassword\"\n      [(ngModel)]=\"model.newPasswordConfirm\"\n      #newPasswordConfirm=\"ngModel\"\n      type=\"password\"\n      name=\"newPasswordConfirm\"\n      class=\"form-control\"\n      placeholder=\"{{ 'e.g. my_new_password' | translate }}\"\n      required\n      passwordConfirm=\"newPassword\"\n      autocomplete=\"new-password\"\n    />\n  </c8y-form-group>\n\n  <c8y-password-strength\n    [password]=\"model.newPassword\"\n    [hidden]=\"!showPasswordStrength()\"\n    (strength)=\"model.strength = $event\"\n  ></c8y-password-strength>\n\n  <c8y-password-check-list\n    [password]=\"model.newPassword\"\n    [hidden]=\"!passwordEnforced\"\n  ></c8y-password-check-list>\n</div>\n",
         viewProviders: [{ provide: ControlContainer, useExisting: NgForm }]
     })
 ], NewPasswordComponent);
@@ -7361,6 +7490,7 @@ ValidationPattern.messages = {
     opcuaBrowsePath: gettext('Invalid OPC UA URI.'),
     password: gettext('Password must have at least 8 characters and no more than 32 and can only contain letters, numbers and following symbols: `~!@#$%^&*()_|+-=?;:\'",.<>{}[]\\/'),
     passwordConfirm: gettext('Passwords do not match.'),
+    passwordStrength: gettext('Password not good enough, password must be stronger (green).'),
     phoneNumber: gettext('Invalid phone number format. Only digits, spaces, slashes ("/") and dashes ("-") allowed.'),
     required: gettext('This field is required.'),
     tenantId: gettext('May contain lowercase letters, digits, hyphens and underscores. ' +
@@ -9217,9 +9347,9 @@ let ChangePasswordComponent = class ChangePasswordComponent {
             tenantId: '',
             email: '',
             newPassword: '',
-            newPasswordConfirm: ''
+            newPasswordConfirm: '',
+            passwordStrengthEnforced: false
         };
-        this.enforcePasswordStrength = false;
         this.emailReadOnly = false;
         this.TOKEN_PARAM = 'token';
         this.EMAIL_PARAM = 'email';
@@ -9229,7 +9359,7 @@ let ChangePasswordComponent = class ChangePasswordComponent {
             this.model.tenantId = this.loginService.getTenant();
             this.model.email = this.options.get(this.EMAIL_PARAM, '');
             this.emailReadOnly = !!this.model.email;
-            this.enforcePasswordStrength = this.loginService.getEnforcePasswordStrength();
+            this.model.passwordStrengthEnforced = this.loginService.getEnforcePasswordStrength();
         });
     }
     changePassword() {
@@ -9277,7 +9407,7 @@ __decorate([
 ChangePasswordComponent = __decorate([
     Component({
         selector: 'c8y-change-password',
-        template: "<form\n  role=\"form\"\n  class=\"loginForm\"\n  (ngSubmit)=\"changePassword()\"\n  #changePasswordForm=\"ngForm\"\n  novalidate\n>\n  <c8y-form-group class=\"tenantField\" id=\"tenantField\" *ngIf=\"loginService.showTenant()\">\n    <label translate>Tenant ID</label>\n    <input\n      [(ngModel)]=\"model.tenantId\"\n      #tenantId=\"ngModel\"\n      type=\"text\"\n      name=\"tenantId\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      class=\"form-control\"\n      placeholder=\"{{ 'Tenant ID' | translate }}\"\n      required\n    />\n  </c8y-form-group>\n\n  <c8y-form-group>\n    <label translate>Email address</label>\n    <input\n      [(ngModel)]=\"model.email\"\n      #email=\"ngModel\"\n      type=\"text\"\n      name=\"email\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      class=\"form-control\"\n      placeholder=\"{{ 'Email address' | translate }}\"\n      email\n      required\n      [readonly]=\"emailReadOnly\"\n    />\n  </c8y-form-group>\n\n  <c8y-form-group>\n    <label translate>New password</label>\n    <input\n      [(ngModel)]=\"model.newPassword\"\n      #newPassword=\"ngModel\"\n      type=\"password\"\n      name=\"newPassword\"\n      class=\"form-control\"\n      placeholder=\"{{ 'New password' | translate }}\"\n      [pattern]=\"passwordPattern\"\n      autocomplete=\"new-password\"\n      required\n    />\n    <c8y-messages>\n      <c8y-message\n        name=\"pattern\"\n        [text]=\"loginService.ERROR_MESSAGES.pattern_newPassword\"\n      ></c8y-message>\n    </c8y-messages>\n  </c8y-form-group>\n\n  <c8y-form-group>\n    <label translate>Confirm password</label>\n    <input\n      [(ngModel)]=\"model.newPasswordConfirm\"\n      #newPasswordConfirm=\"ngModel\"\n      type=\"password\"\n      name=\"newPasswordConfirm\"\n      class=\"form-control\"\n      placeholder=\"{{ 'Confirm password' | translate }}\"\n      passwordConfirm=\"newPassword\"\n      autocomplete=\"new-password\"\n      required\n    />\n    <c8y-messages>\n      <c8y-message\n        name=\"passwordConfirm\"\n        [text]=\"loginService.ERROR_MESSAGES.passwordConfirm\"\n      ></c8y-message>\n    </c8y-messages>\n  </c8y-form-group>\n\n  <c8y-password-strength\n    [password]=\"model.newPassword\"\n    [hidden]=\"!model.newPassword\"\n  ></c8y-password-strength>\n  <c8y-password-check-list\n    [password]=\"model.newPassword\"\n    [hidden]=\"!model.newPassword || !enforcePasswordStrength\"\n  ></c8y-password-check-list>\n\n  <button\n    title=\"{{ 'Set password' | translate }}\"\n    [disabled]=\"!changePasswordForm.form.valid || isLoading\"\n    type=\"submit\"\n    class=\"btn btn-primary btn-lg btn-block form-group\"\n    translate\n  >\n    Set password\n  </button>\n</form>\n"
+        template: "<form\n  role=\"form\"\n  class=\"loginForm\"\n  (ngSubmit)=\"changePassword()\"\n  #changePasswordForm=\"ngForm\"\n  novalidate\n>\n\n  <div\n    class=\"legend form-block center\"\n    translate\n  >\n    Change password\n  </div>\n\n  <c8y-form-group class=\"tenantField\" id=\"tenantField\" *ngIf=\"loginService.showTenant()\">\n    <label translate>Tenant ID</label>\n    <input\n      [(ngModel)]=\"model.tenantId\"\n      #tenantId=\"ngModel\"\n      type=\"text\"\n      name=\"tenantId\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      class=\"form-control\"\n      placeholder=\"{{ 'Tenant ID' | translate }}\"\n      required\n    />\n  </c8y-form-group>\n\n  <c8y-form-group>\n    <label translate>Email address</label>\n    <input\n      [(ngModel)]=\"model.email\"\n      #email=\"ngModel\"\n      type=\"text\"\n      name=\"email\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      class=\"form-control\"\n      placeholder=\"{{ 'Email address' | translate }}\"\n      email\n      required\n      [readonly]=\"emailReadOnly\"\n    />\n  </c8y-form-group>\n\n  <div class=\"row content-flex-50\">\n    <div class=\"col-7\">\n      <c8y-form-group>\n        <label translate>New password</label>\n        <input\n          [(ngModel)]=\"model.newPassword\"\n          #newPassword=\"ngModel\"\n          type=\"password\"\n          name=\"newPassword\"\n          class=\"form-control\"\n          placeholder=\"{{ 'New password' | translate }}\"\n          [pattern]=\"passwordPattern\"\n          autocomplete=\"new-password\"\n          [passwordStrengthEnforced]=\"model.passwordStrengthEnforced\"\n          required\n        />\n        <c8y-messages>\n          <c8y-message\n            name=\"pattern\"\n            [text]=\"loginService.ERROR_MESSAGES.pattern_newPassword\"\n          ></c8y-message>\n        </c8y-messages>\n      </c8y-form-group>\n\n      <c8y-form-group>\n        <label translate>Confirm password</label>\n        <input\n          [(ngModel)]=\"model.newPasswordConfirm\"\n          #newPasswordConfirm=\"ngModel\"\n          type=\"password\"\n          name=\"newPasswordConfirm\"\n          class=\"form-control\"\n          placeholder=\"{{ 'Confirm password' | translate }}\"\n          passwordConfirm=\"newPassword\"\n          autocomplete=\"new-password\"\n          required\n        />\n        <c8y-messages>\n          <c8y-message\n            name=\"passwordConfirm\"\n            [text]=\"loginService.ERROR_MESSAGES.passwordConfirm\"\n          ></c8y-message>\n        </c8y-messages>\n      </c8y-form-group>\n    </div>\n    <div class=\"col-5\">\n      <c8y-password-strength\n        [password]=\"model.newPassword\"\n        [hidden]=\"!model.newPassword\"\n      ></c8y-password-strength>\n      <c8y-password-check-list\n        class=\"m-t-32\"\n        [password]=\"model.newPassword\"\n        [hidden]=\"!model.newPassword || !model.passwordStrengthEnforced\"\n      ></c8y-password-check-list>\n    </div>\n  </div>\n\n  <button\n    title=\"{{ 'Set password' | translate }}\"\n    [disabled]=\"!changePasswordForm.form.valid || isLoading\"\n    type=\"submit\"\n    class=\"btn btn-primary btn-lg btn-block form-group\"\n    translate\n  >\n    Set password\n  </button>\n</form>\n"
     })
 ], ChangePasswordComponent);
 
@@ -9366,7 +9496,7 @@ let CredentialsComponent = class CredentialsComponent {
     }
     handleNoPhoneNumberProvided() {
         this.onChangeView.emit({ view: LoginViews.ProvidePhoneNumber, credentials: this.model });
-        this.alert.warning(gettext('Two-factor authentication has been turned on for this account. Please provide your phone number above to save it in your user profile and start receiving verification codes via SMS.'));
+        this.alert.warning(gettext('Two-factor authentication has been turned on for this account. Provide your phone number above to save it in your user profile and start receiving verification codes via SMS.'));
     }
 };
 CredentialsComponent.ctorParameters = () => [
@@ -9600,6 +9730,54 @@ TotpAuthComponent = __decorate([
     })
 ], TotpAuthComponent);
 
+let StrengthValidatorService = class StrengthValidatorService {
+    constructor(passwordService) {
+        this.passwordService = passwordService;
+    }
+    isStrong(password) {
+        return this.isPasswordGreen(this.passwordService.getStrengthColor(password).passwordStrength);
+    }
+    isPasswordGreen(strength) {
+        return strength === PasswordStrength.GREEN;
+    }
+};
+StrengthValidatorService.ctorParameters = () => [
+    { type: PasswordService }
+];
+StrengthValidatorService.ngInjectableDef = ɵɵdefineInjectable({ factory: function StrengthValidatorService_Factory() { return new StrengthValidatorService(ɵɵinject(PasswordService)); }, token: StrengthValidatorService, providedIn: "root" });
+StrengthValidatorService = __decorate([
+    Injectable({
+        providedIn: 'root'
+    })
+], StrengthValidatorService);
+
+var PasswordStrengthValidatorDirective_1;
+let PasswordStrengthValidatorDirective = PasswordStrengthValidatorDirective_1 = class PasswordStrengthValidatorDirective {
+    constructor(passwordService) {
+        this.passwordService = passwordService;
+    }
+    set passwordStrengthEnforced(value) {
+        this.forced = value;
+    }
+    validate(control) {
+        const strengthFulfilled = this.passwordService.isStrong(control.value || '');
+        const enforcementForcedAndNotFulfilled = this.forced && !strengthFulfilled;
+        return enforcementForcedAndNotFulfilled ? { passwordStrength: true } : null;
+    }
+};
+PasswordStrengthValidatorDirective.ctorParameters = () => [
+    { type: StrengthValidatorService }
+];
+__decorate([
+    Input()
+], PasswordStrengthValidatorDirective.prototype, "passwordStrengthEnforced", null);
+PasswordStrengthValidatorDirective = PasswordStrengthValidatorDirective_1 = __decorate([
+    Directive({
+        selector: '[passwordStrengthEnforced]',
+        providers: [{ provide: NG_VALIDATORS, useExisting: PasswordStrengthValidatorDirective_1, multi: true }]
+    })
+], PasswordStrengthValidatorDirective);
+
 var LoginModule_1;
 /**
  * The angular module definition for the login.
@@ -9623,7 +9801,8 @@ LoginModule = LoginModule_1 = __decorate([
             RecoverPasswordComponent,
             ChangePasswordComponent,
             CredentialsComponent,
-            TotpAuthComponent
+            TotpAuthComponent,
+            PasswordStrengthValidatorDirective
         ],
         imports: [
             FormsModule$1,
@@ -12643,24 +12822,86 @@ GuideHrefDirective = __decorate([
 ], GuideHrefDirective);
 
 let GuideDocsComponent = class GuideDocsComponent {
-    constructor(docs) {
+    constructor(docs, el, renderer) {
         this.docs = docs;
+        this.el = el;
+        this.renderer = renderer;
+        this.destroyed$ = new ReplaySubject(1);
     }
     ngOnInit() {
         this.baseUrl = this.docs.getBaseUrl();
     }
+    /**
+     * After content is initialized we subscribe for translation events, then we are able to modify
+     * anchor just as C8yGuideHrefDirective does.
+     */
+    ngAfterContentInit() {
+        if (this.translateDirective) {
+            this.translateDirective.htmlUpdateEvent
+                .pipe(takeUntil(this.destroyed$))
+                .subscribe(() => {
+                this.replaceAnchorAttributes();
+            });
+        }
+        else {
+            this.replaceAnchorAttributes();
+        }
+    }
+    /**
+     * Find and modify anchor elements
+     */
+    replaceAnchorAttributes() {
+        const anchors = this.findGuideAnchors(this.el.nativeElement);
+        anchors.forEach(a => {
+            const guideHref = `${this.baseUrl}/${a.getAttribute('c8y-guide-href')}`;
+            this.renderer.setAttribute(a, 'href', guideHref);
+            if (!a.hasAttribute('target')) {
+                this.renderer.setAttribute(a, 'target', '_blank');
+            }
+        });
+    }
+    /**
+     * Recursive function, returns array of Anchor elements inside HTMLElement.
+     */
+    findGuideAnchors(el) {
+        const isAnchor = () => el.nodeName === 'A';
+        const hasGuideHrefAttr = () => !!el.attributes.getNamedItem('c8y-guide-href');
+        const hasChildren = () => el.childNodes && el.childNodes.length > 0;
+        let result = [];
+        if (isAnchor() && hasGuideHrefAttr()) {
+            result.push(el);
+        }
+        else if (hasChildren()) {
+            el.childNodes.forEach((node) => {
+                const searchResult = this.findGuideAnchors(node);
+                if (searchResult) {
+                    result = [...result, ...searchResult];
+                }
+            });
+        }
+        return result;
+    }
     ngAfterViewInit() {
         this.links.forEach(guide => {
             guide.baseHref = this.baseUrl;
         });
     }
+    ngOnDestroy() {
+        this.destroyed$.next(true);
+        this.destroyed$.complete();
+    }
 };
 GuideDocsComponent.ctorParameters = () => [
-    { type: DocsService }
+    { type: DocsService },
+    { type: ElementRef },
+    { type: Renderer2 }
 ];
 __decorate([
     ContentChildren(GuideHrefDirective, { descendants: true })
 ], GuideDocsComponent.prototype, "links", void 0);
+__decorate([
+    ContentChild(ForceHtmlTranslateDirective, { static: false })
+], GuideDocsComponent.prototype, "translateDirective", void 0);
 GuideDocsComponent = __decorate([
     Component({
         selector: '[c8y-guide-docs]',
@@ -13598,7 +13839,7 @@ __decorate([
 WidgetsDashboardComponent = __decorate([
     Component({
         selector: 'c8y-widgets-dashboard',
-        template: "<c8y-title *ngIf=\"!!settings.title\">\n  {{ settings.title | translate }}\n</c8y-title>\n\n<c8y-action-bar-item [placement]=\"'right'\" *ngIf=\"onAddWidget.observers.length\">\n  <button\n    class=\"btn btn-link\"\n    [disabled]=\"settings.isFrozen || settings.isDisabled\"\n    (click)=\"onAddWidget.emit()\"\n  >\n    <i c8yIcon=\"plus-circle\"></i> {{ 'Add widget' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'right'\" *ngIf=\"onEditDashboard.observers.length\">\n  <button\n    class=\"btn btn-link\"\n    [disabled]=\"settings.isFrozen || settings.isDisabled\"\n    (click)=\"onEditDashboard.emit()\"\n  >\n    <i c8yIcon=\"pencil\"></i> {{ 'Edit' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'right'\" *ngIf=\"settings.allowFullscreen\">\n  <button class=\"btn btn-link\" (click)=\"toggleFullscreen()\">\n    <i [c8yIcon]=\"fullScreen() ? 'compress' : 'expand'\"></i> {{ 'Full screen' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  itemClass=\"navbar-form\"\n  *ngIf=\"onFreeze.observers.length\"\n>\n  <button\n    title=\"{{ 'Lock/unlock this dashboard' | translate }}\"\n    class=\"btn btn-default\"\n    [ngClass]=\"{ active: settings.isFrozen }\"\n    (click)=\"onFreeze.emit(settings)\"\n    [disabled]=\"settings.isDisabled\"\n    uib-btn-checkbox\n  >\n    <i [c8yIcon]=\"settings.isFrozen ? 'lock' : 'unlock'\"></i>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'more'\"\n  [priority]=\"-3000\"\n  *ngIf=\"settings.canDelete && onDeleteDashboard.observers.length\"\n>\n  <button (click)=\"onDeleteDashboard.emit()\" [disabled]=\"settings.isFrozen || settings.isDisabled\">\n    <i c8yIcon=\"trash\"></i>&nbsp;<span translate>Delete dashboard</span>\n  </button>\n</c8y-action-bar-item>\n\n<!-- empty state -->\n<div class=\"c8y-empty-state text-center\" *ngIf=\"!settings.isLoading && widgets.length === 0\">\n  <h1 class=\"c8y-icon c8y-icon-device c8y-icon-duocolor\"></h1>\n  <h3 translate>No widgets to display.</h3>\n  <div *ngIf=\"!settings.isFrozen && onAddWidget.observers.length\">\n    <p translate>Add widgets to this dashboard.</p>\n    <div>\n      <button\n        [disabled]=\"settings.isFrozen || settings.isDisabled\"\n        (click)=\"onAddWidget.emit()\"\n        class=\"btn btn-primary\"\n        translate\n      >\n        Add widget\n      </button>\n    </div>\n    <p c8y-guide-docs>\n      <small translate\n        >Find out more in the\n        <a c8y-guide-href=\"users-guide/cockpit/#dashboards\">User guide`KEEP_ORIGINAL`</a>.</small\n      >\n    </p>\n  </div>\n</div>\n<!-- /.empty settings -->\n\n<div class=\"col-xs-12 text-center\" *ngIf=\"settings.isLoading\">\n  <div class=\"spinner\" style=\"position: relative;\">\n    <div class=\"rect1\"></div>\n    <div class=\"rect2\"></div>\n    <div class=\"rect3\"></div>\n    <div class=\"rect4\"></div>\n    <div class=\"rect5\"></div>\n  </div>\n</div>\n\n<c8y-dashboard\n  (dashboardChange)=\"onChangeDashboard.emit($event)\"\n  #dashboard\n  *ngIf=\"!settings.isLoading\"\n>\n  <c8y-dashboard-child\n    *ngFor=\"let widget of widgets\"\n    [x]=\"widget._x\"\n    [y]=\"widget._y\"\n    [width]=\"widget._width || settings.defaultWidth\"\n    [height]=\"widget._height || settings.defaultHeight\"\n    [margin]=\"settings.widgetMargin\"\n    [isFrozen]=\"settings.isFrozen || settings.isDisabled\"\n    [class]=\"widget.classes\"\n    [data]=\"widget\"\n    [useIntersection]=\"true\"\n    (changeStart)=\"onChangeStart.emit({ widget: widget, source: child, dashboard: dashboard })\"\n    (changeEnd)=\"onChangeEnd.emit({ widget: widget, source: child, dashboard: dashboard })\"\n    #child\n  >\n    <c8y-dashboard-child-title>\n      <span *ngIf=\"settings.translateWidgetTitle\"> {{ widget.title | translate }}</span>\n      <span *ngIf=\"!settings.translateWidgetTitle\">\n        {{ widget.title }}\n      </span>\n    </c8y-dashboard-child-title>\n    <c8y-dashboard-child-action *ngIf=\"onEditWidget.observers.length\">\n      <button (click)=\"onEditWidget.emit({ widget: widget, source: child, dashboard: dashboard })\">\n        <i c8yIcon=\"pencil\"></i>&nbsp;<span translate>Edit</span>\n      </button>\n    </c8y-dashboard-child-action>\n    <c8y-dashboard-child-action *ngIf=\"onDeleteWidget.observers.length\">\n      <button\n        (click)=\"onDeleteWidget.emit({ widget: widget, source: child, dashboard: dashboard })\"\n      >\n        <i c8yIcon=\"trash\"></i>&nbsp;<span translate>Remove</span>\n      </button>\n    </c8y-dashboard-child-action>\n    <c8y-dynamic-component\n      [componentId]=\"widget.componentId || widget.name\"\n      [config]=\"\n        widget.templateUrl || widget.widgetComponent\n          ? { child: widget, dashboard: contextDashboard, context: context }\n          : widget.config\n      \"\n      *ngIf=\"child.intersected\"\n    ></c8y-dynamic-component>\n  </c8y-dashboard-child>\n</c8y-dashboard>\n",
+        template: "<c8y-title *ngIf=\"!!settings.title\">\n  {{ settings.title | translate }}\n</c8y-title>\n\n<c8y-action-bar-item [placement]=\"'right'\" *ngIf=\"onAddWidget.observers.length\">\n  <button\n    class=\"btn btn-link\"\n    [disabled]=\"settings.isFrozen || settings.isDisabled\"\n    (click)=\"onAddWidget.emit()\"\n  >\n    <i c8yIcon=\"plus-circle\"></i> {{ 'Add widget' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'right'\" *ngIf=\"onEditDashboard.observers.length\">\n  <button\n    class=\"btn btn-link\"\n    [disabled]=\"settings.isFrozen || settings.isDisabled\"\n    (click)=\"onEditDashboard.emit()\"\n  >\n    <i c8yIcon=\"pencil\"></i> {{ 'Edit' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'right'\" *ngIf=\"settings.allowFullscreen\">\n  <button class=\"btn btn-link\" (click)=\"toggleFullscreen()\">\n    <i [c8yIcon]=\"fullScreen() ? 'compress' : 'expand'\"></i> {{ 'Full screen' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  itemClass=\"navbar-form\"\n  *ngIf=\"onFreeze.observers.length\"\n>\n  <button\n    title=\"{{ 'Lock/unlock this dashboard' | translate }}\"\n    class=\"btn btn-default\"\n    [ngClass]=\"{ active: settings.isFrozen }\"\n    (click)=\"onFreeze.emit(settings)\"\n    [disabled]=\"settings.isDisabled\"\n    uib-btn-checkbox\n  >\n    <i [c8yIcon]=\"settings.isFrozen ? 'lock' : 'unlock'\"></i>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'more'\"\n  [priority]=\"-3000\"\n  *ngIf=\"settings.canDelete && onDeleteDashboard.observers.length\"\n>\n  <button (click)=\"onDeleteDashboard.emit()\" [disabled]=\"settings.isFrozen || settings.isDisabled\">\n    <i c8yIcon=\"trash\"></i>&nbsp;<span translate>Delete dashboard</span>\n  </button>\n</c8y-action-bar-item>\n\n<!-- empty state -->\n<div class=\"c8y-empty-state text-center\" *ngIf=\"!settings.isLoading && widgets.length === 0\">\n  <h1 class=\"c8y-icon c8y-icon-device c8y-icon-duocolor\"></h1>\n  <h3 translate>No widgets to display.</h3>\n  <div *ngIf=\"!settings.isFrozen && onAddWidget.observers.length\">\n    <p translate>Add widgets to this dashboard.</p>\n    <div>\n      <button\n        [disabled]=\"settings.isFrozen || settings.isDisabled\"\n        (click)=\"onAddWidget.emit()\"\n        class=\"btn btn-primary\"\n        translate\n      >\n        Add widget\n      </button>\n    </div>\n    <p c8y-guide-docs>\n      <small forceHtmlTranslate ngNonBindable\n        >Find out more in the\n        <a c8y-guide-href=\"users-guide/cockpit/#dashboards\">User guide`KEEP_ORIGINAL`</a>.</small\n      >\n    </p>\n  </div>\n</div>\n<!-- /.empty settings -->\n\n<div class=\"col-xs-12 text-center\" *ngIf=\"settings.isLoading\">\n  <div class=\"spinner\" style=\"position: relative;\">\n    <div class=\"rect1\"></div>\n    <div class=\"rect2\"></div>\n    <div class=\"rect3\"></div>\n    <div class=\"rect4\"></div>\n    <div class=\"rect5\"></div>\n  </div>\n</div>\n\n<c8y-dashboard\n  (dashboardChange)=\"onChangeDashboard.emit($event)\"\n  #dashboard\n  *ngIf=\"!settings.isLoading\"\n>\n  <c8y-dashboard-child\n    *ngFor=\"let widget of widgets\"\n    [x]=\"widget._x\"\n    [y]=\"widget._y\"\n    [width]=\"widget._width || settings.defaultWidth\"\n    [height]=\"widget._height || settings.defaultHeight\"\n    [margin]=\"settings.widgetMargin\"\n    [isFrozen]=\"settings.isFrozen || settings.isDisabled\"\n    [class]=\"widget.classes\"\n    [data]=\"widget\"\n    [useIntersection]=\"true\"\n    (changeStart)=\"onChangeStart.emit({ widget: widget, source: child, dashboard: dashboard })\"\n    (changeEnd)=\"onChangeEnd.emit({ widget: widget, source: child, dashboard: dashboard })\"\n    #child\n  >\n    <c8y-dashboard-child-title>\n      <span *ngIf=\"settings.translateWidgetTitle\"> {{ widget.title | translate }}</span>\n      <span *ngIf=\"!settings.translateWidgetTitle\">\n        {{ widget.title }}\n      </span>\n    </c8y-dashboard-child-title>\n    <c8y-dashboard-child-action *ngIf=\"onEditWidget.observers.length\">\n      <button (click)=\"onEditWidget.emit({ widget: widget, source: child, dashboard: dashboard })\">\n        <i c8yIcon=\"pencil\"></i>&nbsp;<span translate>Edit</span>\n      </button>\n    </c8y-dashboard-child-action>\n    <c8y-dashboard-child-action *ngIf=\"onDeleteWidget.observers.length\">\n      <button\n        (click)=\"onDeleteWidget.emit({ widget: widget, source: child, dashboard: dashboard })\"\n      >\n        <i c8yIcon=\"trash\"></i>&nbsp;<span translate>Remove</span>\n      </button>\n    </c8y-dashboard-child-action>\n    <c8y-dynamic-component\n      [componentId]=\"widget.componentId || widget.name\"\n      [config]=\"\n        widget.templateUrl || widget.widgetComponent\n          ? { child: widget, dashboard: contextDashboard, context: context }\n          : widget.config\n      \"\n      *ngIf=\"child.intersected\"\n    ></c8y-dynamic-component>\n  </c8y-dashboard-child>\n</c8y-dashboard>\n",
         host: {
             style: `
       display: block;
@@ -14580,5 +14821,5 @@ class CustomDeviceGridColumn extends BaseDeviceGridColumn {
  * Generated bundle index. Do not edit.
  */
 
-export { ActionBarService, ActionService, AlarmsDeviceGridColumn, AlertService, AppStateService, AuthenticationModule, BaseDeviceGridColumn, BootstrapComponent, BreadcrumbService, C8yStepper, C8yStepperButtons, CachedLocaleDictionaryService, CellRendererContext, CellRendererDefDirective, CommonModule, ConfirmModalComponent, ContextRouteComponent, CoreModule, CustomDeviceGridColumn, DashboardChildActionComponent, DashboardChildChange, DashboardChildComponent, DashboardChildTitleComponent, DashboardComponent, DashboardModule, DataGridComponent, DataGridModule, DefaultValidationDirective, DeviceGridComponent, DeviceGridModule, DeviceGridService, DeviceStatusComponent, DeviceStatusModule, DocsModule, DocsService, DropAreaComponent, DropAreaModule, DynamicComponentComponent, DynamicComponentModule, DynamicComponentService, EmptyComponent, FilteringActionType, FormGroupComponent, FormsModule, GroupDeviceGridColumn, GuideDocsComponent, GuideHrefDirective, HOOK_ACTION, HOOK_ACTION_BAR, HOOK_BREADCRUMB, HOOK_COMPONENT, HOOK_COMPONENTS, HOOK_DOCS, HOOK_NAVIGATOR_NODES, HOOK_ONCE_ROUTE, HOOK_OPTIONS, HOOK_PATTERN_MESSAGES, HOOK_SEARCH, HOOK_TABS, HeaderBarComponent, HeaderCellRendererDefDirective, HeaderModule, HeaderService, HighlightComponent, HumanizeAppNamePipe, HumanizePipe, ICON_LIST, ImeiDeviceGridColumn, InputGroupListComponent, JsonValidationPrettifierDirective, ListGroupComponent, ListGroupModule, LoginService, LoginViews, MaxValidationDirective, MessageDirective, MessagesComponent, MinValidationDirective, ModalModule, ModalService, ModelDeviceGridColumn, NameDeviceGridColumn, NavigatorIconComponent, NavigatorItemComponent, NavigatorNode, NavigatorNodeRoot, NavigatorService, NewPasswordComponent, OptionsService, PasswordCheckListComponent, PasswordConfirm, PasswordConfirmModalComponent, PasswordService, PasswordStrengthCheckerService, PasswordStrengthComponent, Permissions, PhoneValidationDirective, PopoverConfirmComponent, ProvidePhoneNumberComponent, PushStatusLabels, QuickLinkModule, RegistrationDateDeviceGridColumn, RouterModule, RouterService, SchemaFormComponent, SearchModule, SearchService, SelectComponent, SelectModule, SendStatusLabels, SerialNumberDeviceGridColumn, SmsChallengeComponent, StateService, Status, StatusDeviceGridColumn, StepperModule, SystemIdDeviceGridColumn, TabsService, TextAreaRowHeightDirective, TitleComponent, TotpChallengeComponent, TotpSetupComponent, TranslateService, TypeaheadComponent, UserMenuService, UserTotpRevokeComponent, ValidationPattern, ViewContext, WidgetsDashboardComponent, _, deviceAvailabilityIconMap, fromFactories, fromTrigger, getActivatedRoute, gettext, initializeServices, minColumnGridTrackSize, operationStatusClasses, operationStatusIcons, ratiosByColumnTypes, resolveInjectedFactories, routes, sortByPriority, stateToFactory, statusAlert, statusClasses, statusIcons, tooltips, ɵ0, ApplicationOptions as ɵa, translateLoaderFactory as ɵb, ActionOutletComponent as ɵba, ActionComponent as ɵbb, AlertModule as ɵbc, AlertOutletComponent as ɵbd, AlertComponent as ɵbe, AlertDetailsComponent as ɵbf, AlertTextComponent as ɵbg, BootstrapModule as ɵbh, CookieBannerComponent as ɵbi, TitleOutletComponent as ɵbj, AppIconComponent as ɵbk, AppSwitcherComponent as ɵbl, RightDrawerComponent as ɵbm, UserModule as ɵbn, UserMenuOutletComponent as ɵbo, UserEditComponent as ɵbp, UserEditModalComponent as ɵbq, UserMenuItemComponent as ɵbr, UserTotpSetupComponent as ɵbs, InputGroupListContainerDirective as ɵbt, RequiredInputPlaceholderDirective as ɵbu, IpRangeInputListComponent as ɵbv, FilterInputComponent as ɵbw, ModalComponent as ɵbx, SearchOutletComponent as ɵby, SearchComponent as ɵbz, localePathFactory as ɵc, BreadcrumbModule as ɵca, BreadcrumbComponent as ɵcb, BreadcrumbItemComponent as ɵcc, BreadcrumbOutletComponent as ɵcd, NavigatorModule as ɵce, NavigatorOutletComponent as ɵcf, NavigatorNodeComponent as ɵcg, LoginModule as ɵch, LoginComponent as ɵci, RecoverPasswordComponent as ɵcj, ChangePasswordComponent as ɵck, CredentialsComponent as ɵcl, TotpAuthComponent as ɵcm, TabsModule as ɵcn, TabsOutletComponent as ɵco, TabComponent as ɵcp, CellRendererComponent as ɵcq, FilteringFormRendererDefDirective as ɵcr, FilteringFormRendererComponent as ɵcs, ColumnDirective as ɵct, FilteringFormComponent as ɵcu, StatusCellRendererComponent as ɵcv, NameCellRendererComponent as ɵcw, ModelCellRendererComponent as ɵcx, SerialNumberCellRendererComponent as ɵcy, GroupCellRendererComponent as ɵcz, languagesFactory as ɵd, RegistrationDateCellRendererComponent as ɵda, AlarmsCellRendererComponent as ɵdb, ListItemComponent as ɵdc, ListItemFooterComponent as ɵdd, ListItemActionComponent as ɵde, ListItemCollapseComponent as ɵdf, ListItemIconComponent as ɵdg, ListItemBodyComponent as ɵdh, ListItemCheckboxComponent as ɵdi, ListItemRadioComponent as ɵdj, C8yStepperIcon as ɵdk, C8yStepperProgress as ɵdl, RouterTabsResolver as ɵdn, ContextRouteGuard as ɵdo, QuickLinkComponent as ɵdp, localeId as ɵe, I18nModule as ɵf, MESSAGES as ɵg, LOCALE_PATH as ɵh, LANGUAGES as ɵi, TranslateCustomLoader as ɵj, TranslateParserCustom as ɵk, MissingTranslationCustomHandler as ɵl, PatternMessagesService as ɵm, IconDirective as ɵn, ICONS as ɵo, OutletDirective as ɵp, ShortenUserNamePipe as ɵq, ForOfDirective as ɵr, LoadMoreComponent as ɵs, MapFunctionPipe as ɵt, ProgressBarComponent as ɵu, UserPreferencesService as ɵv, ActionBarModule as ɵw, ActionBarComponent as ɵx, ActionBarItemComponent as ɵy, ActionModule as ɵz };
+export { ActionBarService, ActionService, AlarmsDeviceGridColumn, AlertService, AppStateService, AuthenticationModule, BaseDeviceGridColumn, BootstrapComponent, BreadcrumbService, C8yStepper, C8yStepperButtons, CachedLocaleDictionaryService, CellRendererContext, CellRendererDefDirective, CommonModule, ConfirmModalComponent, ContextRouteComponent, CoreModule, CustomDeviceGridColumn, DashboardChildActionComponent, DashboardChildChange, DashboardChildComponent, DashboardChildTitleComponent, DashboardComponent, DashboardModule, DataGridComponent, DataGridModule, DefaultValidationDirective, DeviceGridComponent, DeviceGridModule, DeviceGridService, DeviceStatusComponent, DeviceStatusModule, DocsModule, DocsService, DropAreaComponent, DropAreaModule, DynamicComponentComponent, DynamicComponentModule, DynamicComponentService, EmptyComponent, FilteringActionType, FormGroupComponent, FormsModule, GroupDeviceGridColumn, GuideDocsComponent, GuideHrefDirective, HOOK_ACTION, HOOK_ACTION_BAR, HOOK_BREADCRUMB, HOOK_COMPONENT, HOOK_COMPONENTS, HOOK_DOCS, HOOK_NAVIGATOR_NODES, HOOK_ONCE_ROUTE, HOOK_OPTIONS, HOOK_PATTERN_MESSAGES, HOOK_SEARCH, HOOK_TABS, HeaderBarComponent, HeaderCellRendererDefDirective, HeaderModule, HeaderService, HighlightComponent, HumanizeAppNamePipe, HumanizePipe, ICON_LIST, ImeiDeviceGridColumn, InputGroupListComponent, JsonValidationPrettifierDirective, ListGroupComponent, ListGroupModule, LoginService, LoginViews, MaxValidationDirective, MessageDirective, MessagesComponent, MinValidationDirective, ModalModule, ModalService, ModelDeviceGridColumn, NameDeviceGridColumn, NavigatorIconComponent, NavigatorItemComponent, NavigatorNode, NavigatorNodeRoot, NavigatorService, NewPasswordComponent, OptionsService, PasswordCheckListComponent, PasswordConfirm, PasswordConfirmModalComponent, PasswordService, PasswordStrengthCheckerService, PasswordStrengthComponent, Permissions, PhoneValidationDirective, PopoverConfirmComponent, ProvidePhoneNumberComponent, PushStatusLabels, QuickLinkModule, RegistrationDateDeviceGridColumn, RouterModule, RouterService, SchemaFormComponent, SearchModule, SearchService, SelectComponent, SelectModule, SendStatusLabels, SerialNumberDeviceGridColumn, SmsChallengeComponent, StateService, Status, StatusDeviceGridColumn, StepperModule, SystemIdDeviceGridColumn, TabsService, TextAreaRowHeightDirective, TitleComponent, TotpChallengeComponent, TotpSetupComponent, TranslateService, TypeaheadComponent, UserMenuService, UserTotpRevokeComponent, ValidationPattern, ViewContext, WidgetsDashboardComponent, _, deviceAvailabilityIconMap, fromFactories, fromTrigger, getActivatedRoute, gettext, initializeServices, minColumnGridTrackSize, operationStatusClasses, operationStatusIcons, ratiosByColumnTypes, resolveInjectedFactories, routes, sortByPriority, stateToFactory, statusAlert, statusClasses, statusIcons, tooltips, ɵ0, ApplicationOptions as ɵa, translateLoaderFactory as ɵb, ActionModule as ɵba, ActionOutletComponent as ɵbb, ActionComponent as ɵbc, AlertModule as ɵbd, AlertOutletComponent as ɵbe, AlertComponent as ɵbf, AlertDetailsComponent as ɵbg, AlertTextComponent as ɵbh, BootstrapModule as ɵbi, CookieBannerComponent as ɵbj, TitleOutletComponent as ɵbk, AppIconComponent as ɵbl, AppSwitcherComponent as ɵbm, RightDrawerComponent as ɵbn, UserModule as ɵbo, UserMenuOutletComponent as ɵbp, UserEditComponent as ɵbq, UserEditModalComponent as ɵbr, UserMenuItemComponent as ɵbs, UserTotpSetupComponent as ɵbt, InputGroupListContainerDirective as ɵbu, RequiredInputPlaceholderDirective as ɵbv, IpRangeInputListComponent as ɵbw, FilterInputComponent as ɵbx, ModalComponent as ɵby, SearchOutletComponent as ɵbz, localePathFactory as ɵc, SearchComponent as ɵca, BreadcrumbModule as ɵcb, BreadcrumbComponent as ɵcc, BreadcrumbItemComponent as ɵcd, BreadcrumbOutletComponent as ɵce, NavigatorModule as ɵcf, NavigatorOutletComponent as ɵcg, NavigatorNodeComponent as ɵch, LoginModule as ɵci, LoginComponent as ɵcj, RecoverPasswordComponent as ɵck, ChangePasswordComponent as ɵcl, CredentialsComponent as ɵcm, TotpAuthComponent as ɵcn, PasswordStrengthValidatorDirective as ɵco, StrengthValidatorService as ɵcp, TabsModule as ɵcq, TabsOutletComponent as ɵcr, TabComponent as ɵcs, CellRendererComponent as ɵct, FilteringFormRendererDefDirective as ɵcu, FilteringFormRendererComponent as ɵcv, ColumnDirective as ɵcw, FilteringFormComponent as ɵcx, StatusCellRendererComponent as ɵcy, NameCellRendererComponent as ɵcz, languagesFactory as ɵd, ModelCellRendererComponent as ɵda, SerialNumberCellRendererComponent as ɵdb, GroupCellRendererComponent as ɵdc, RegistrationDateCellRendererComponent as ɵdd, AlarmsCellRendererComponent as ɵde, ListItemComponent as ɵdf, ListItemFooterComponent as ɵdg, ListItemActionComponent as ɵdh, ListItemCollapseComponent as ɵdi, ListItemIconComponent as ɵdj, ListItemBodyComponent as ɵdk, ListItemCheckboxComponent as ɵdl, ListItemRadioComponent as ɵdm, C8yStepperIcon as ɵdn, C8yStepperProgress as ɵdo, RouterTabsResolver as ɵdq, ContextRouteGuard as ɵdr, QuickLinkComponent as ɵds, localeId as ɵe, I18nModule as ɵf, ForceHtmlTranslateDirective as ɵg, MESSAGES as ɵh, LOCALE_PATH as ɵi, LANGUAGES as ɵj, TranslateCustomLoader as ɵk, TranslateParserCustom as ɵl, MissingTranslationCustomHandler as ɵm, PatternMessagesService as ɵn, IconDirective as ɵo, ICONS as ɵp, OutletDirective as ɵq, ShortenUserNamePipe as ɵr, ForOfDirective as ɵs, LoadMoreComponent as ɵt, MapFunctionPipe as ɵu, ProgressBarComponent as ɵv, UserPreferencesService as ɵw, ActionBarModule as ɵx, ActionBarComponent as ɵy, ActionBarItemComponent as ɵz };
 //# sourceMappingURL=c8y-ngx-components.js.map