@c8y/ngx-components 1023.17.3 → 1023.17.8

package/fesm2022/c8y-ngx-components-branding-shared-lazy.mjs

@@ -61,10 +61,10 @@ class ApplyBrandingToAppService {
             return dynamicOptionsUrl === undefined || dynamicOptionsUrl === true;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ApplyBrandingToAppService, deps: [{ token: i1.ApplicationService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ApplyBrandingToAppService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ApplyBrandingToAppService, deps: [{ token: i1.ApplicationService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ApplyBrandingToAppService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ApplyBrandingToAppService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ApplyBrandingToAppService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1.ApplicationService }] });
@@ -99,10 +99,10 @@ class ApplyBrandingToAppModalComponent {
         const tagsFormMap = tags.reduceRight((prev, curr) => Object.assign(prev, { [curr]: this.formBuilder.control(false) }), {});
         return this.formBuilder.group(tagsFormMap);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ApplyBrandingToAppModalComponent, deps: [{ token: ApplyBrandingToAppService }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: ApplyBrandingToAppModalComponent, isStandalone: true, selector: "c8y-apply-branding-to-app-modal", inputs: { currentTags: "currentTags" }, ngImport: i0, template: "<c8y-modal\n  [title]=\"'Apply branding to apps' | translate\"\n  [disabled]=\"!form || form.invalid || !brandableApps.length\"\n  [headerClasses]=\"'dialog-header'\"\n  (onDismiss)=\"cancel()\"\n  (onClose)=\"save()\"\n  [labels]=\"{ cancel: 'Cancel', ok: 'Save' }\"\n>\n  <ng-container c8y-modal-title>\n    <span c8yIcon=\"palette\"></span>\n  </ng-container>\n  <c8y-list-group\n    class=\"m-b-0 no-border-last\"\n    *ngIf=\"form\"\n    [formGroup]=\"form\"\n  >\n    <c8y-li>\n      <p\n        class=\"text-center text-medium\"\n        *ngIf=\"numberOfSelectedApps$ | async as numberOfApps; else noapps\"\n        translate\n      >\n        {{ numberOfApps }} apps selected for branding\n      </p>\n      <ng-template #noapps>\n        <p\n          class=\"text-center text-medium\"\n          translate\n        >\n          No apps selected for branding\n        </p>\n      </ng-template>\n    </c8y-li>\n    <c8y-li *ngFor=\"let app of brandableApps\">\n      <c8y-li-icon>\n        <c8y-app-icon\n          class=\"icon-40\"\n          [app]=\"app\"\n        ></c8y-app-icon>\n      </c8y-li-icon>\n      <c8y-li-checkbox\n        [attr.data-cy]=\"'branding-apply-branding-to-app-checkbox-' + app.contextPath\"\n        [formControlName]=\"app.contextPath\"\n      ></c8y-li-checkbox>\n      <c8y-li-body class=\"p-t-8 d-block\">{{ app | humanizeAppName | async }}</c8y-li-body>\n    </c8y-li>\n  </c8y-list-group>\n</c8y-modal>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "component", type: AppIconComponent, selector: "c8y-app-icon", inputs: ["contextPath", "name", "app"] }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: HumanizeAppNamePipe, name: "humanizeAppName" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ApplyBrandingToAppModalComponent, deps: [{ token: ApplyBrandingToAppService }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ApplyBrandingToAppModalComponent, isStandalone: true, selector: "c8y-apply-branding-to-app-modal", inputs: { currentTags: "currentTags" }, ngImport: i0, template: "<c8y-modal\n  [title]=\"'Apply branding to apps' | translate\"\n  [disabled]=\"!form || form.invalid || !brandableApps.length\"\n  [headerClasses]=\"'dialog-header'\"\n  (onDismiss)=\"cancel()\"\n  (onClose)=\"save()\"\n  [labels]=\"{ cancel: 'Cancel', ok: 'Save' }\"\n>\n  <ng-container c8y-modal-title>\n    <span c8yIcon=\"palette\"></span>\n  </ng-container>\n  <c8y-list-group\n    class=\"m-b-0 no-border-last\"\n    *ngIf=\"form\"\n    [formGroup]=\"form\"\n  >\n    <c8y-li>\n      <p\n        class=\"text-center text-medium\"\n        *ngIf=\"numberOfSelectedApps$ | async as numberOfApps; else noapps\"\n        translate\n      >\n        {{ numberOfApps }} apps selected for branding\n      </p>\n      <ng-template #noapps>\n        <p\n          class=\"text-center text-medium\"\n          translate\n        >\n          No apps selected for branding\n        </p>\n      </ng-template>\n    </c8y-li>\n    <c8y-li *ngFor=\"let app of brandableApps\">\n      <c8y-li-icon>\n        <c8y-app-icon\n          class=\"icon-40\"\n          [app]=\"app\"\n        ></c8y-app-icon>\n      </c8y-li-icon>\n      <c8y-li-checkbox\n        [attr.data-cy]=\"'branding-apply-branding-to-app-checkbox-' + app.contextPath\"\n        [formControlName]=\"app.contextPath\"\n      ></c8y-li-checkbox>\n      <c8y-li-body class=\"p-t-8 d-block\">{{ app | humanizeAppName | async }}</c8y-li-body>\n    </c8y-li>\n  </c8y-list-group>\n</c8y-modal>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "component", type: AppIconComponent, selector: "c8y-app-icon", inputs: ["contextPath", "name", "app"] }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: HumanizeAppNamePipe, name: "humanizeAppName" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ApplyBrandingToAppModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ApplyBrandingToAppModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-apply-branding-to-app-modal', standalone: true, imports: [
                         NgIf,
@@ -144,10 +144,10 @@ class BrandingTagsCellRendererComponent {
             });
         }), startWith(appContextPaths));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BrandingTagsCellRendererComponent, deps: [{ token: i3.CellRendererContext }, { token: i3.AppStateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: BrandingTagsCellRendererComponent, isStandalone: true, selector: "c8y-branding-tags-cell-renderer", ngImport: i0, template: "<div class=\"d-flex a-i-center gap-4 flex-wrap\">\n  <div\n    class=\"tag tag--success\"\n    *ngIf=\"hasLatestTag\"\n    translate\n  >\n    Global\n  </div>\n  <div\n    class=\"tag tag--info\"\n    *ngFor=\"let tag of appContextPathsOrApps$ | async\"\n    [attr.data-cy]=\"'branding-tags-cell-renderer--tag-' + (tag.contextPath ? tag.contextPath : tag)\"\n  >\n    {{ tag | humanizeAppName | async }}\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: HumanizeAppNamePipe, name: "humanizeAppName" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BrandingTagsCellRendererComponent, deps: [{ token: i3.CellRendererContext }, { token: i3.AppStateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: BrandingTagsCellRendererComponent, isStandalone: true, selector: "c8y-branding-tags-cell-renderer", ngImport: i0, template: "<div class=\"d-flex a-i-center gap-4 flex-wrap\">\n  <div\n    class=\"tag tag--success\"\n    *ngIf=\"hasLatestTag\"\n    translate\n  >\n    Global\n  </div>\n  <div\n    class=\"tag tag--info\"\n    *ngFor=\"let tag of appContextPathsOrApps$ | async\"\n    [attr.data-cy]=\"'branding-tags-cell-renderer--tag-' + (tag.contextPath ? tag.contextPath : tag)\"\n  >\n    {{ tag | humanizeAppName | async }}\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: HumanizeAppNamePipe, name: "humanizeAppName" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BrandingTagsCellRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BrandingTagsCellRendererComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-branding-tags-cell-renderer', standalone: true, imports: [NgIf, NgForOf, HumanizeAppNamePipe, AsyncPipe], template: "<div class=\"d-flex a-i-center gap-4 flex-wrap\">\n  <div\n    class=\"tag tag--success\"\n    *ngIf=\"hasLatestTag\"\n    translate\n  >\n    Global\n  </div>\n  <div\n    class=\"tag tag--info\"\n    *ngFor=\"let tag of appContextPathsOrApps$ | async\"\n    [attr.data-cy]=\"'branding-tags-cell-renderer--tag-' + (tag.contextPath ? tag.contextPath : tag)\"\n  >\n    {{ tag | humanizeAppName | async }}\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i3.CellRendererContext }, { type: i3.AppStateService }] });
@@ -251,10 +251,10 @@ class BrandingImportModalComponent {
     cancel() {
         this._reject();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BrandingImportModalComponent, deps: [{ token: i1$1.AddBrandingModalService }, { token: i3.ZipService }, { token: i3$1.StaticAssetsService }, { token: i1$2.StoreBrandingService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: BrandingImportModalComponent, isStandalone: true, selector: "c8y-branding-import-modal", viewQueries: [{ propertyName: "modal", first: true, predicate: ModalComponent, descendants: true, static: true }], ngImport: i0, template: "<c8y-modal\n  [title]=\"'Import branding variant'\"\n  [headerClasses]=\"'dialog-header'\"\n  (onDismiss)=\"cancel()\"\n  [labels]=\"{ cancel: 'Cancel' }\"\n>\n  <ng-container c8y-modal-title>\n    <span c8yIcon=\"import\"></span>\n  </ng-container>\n  <div class=\"p-t-16 p-b-16 p-l-24 p-r-24 separator-bottom\">\n    <p\n      class=\"text-medium text-center text-16\"\n      translate\n    >\n      Easily copy any branding variant from any tenant\n    </p>\n    <p translate class=\"p-t-8\">\n      Export the branding variant from the source tenant and import the .zip file here. This process\n      allows you to maintain consistent branding across multiple tenants efficiently.\n    </p>\n  </div>\n  <div\n    class=\"p-24 m-r-auto m-l-auto\"\n    style=\"max-width: 300px\"\n  >\n    <c8y-drop-area\n      [icon]=\"'upload'\"\n      (dropped)=\"droppedFile($event)\"\n      [files]=\"files\"\n      [accept]=\"'.zip'\"\n      [maxAllowedFiles]=\"1\"\n      [loading]=\"loading\"\n    ></c8y-drop-area>\n  </div>\n</c8y-modal>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: i3.DropAreaComponent, selector: "c8y-drop-area", inputs: ["formControl", "title", "message", "icon", "loadingMessage", "forceHideList", "alwaysShow", "clickToOpen", "loading", "progress", "maxAllowedFiles", "files", "maxFileSizeInMegaBytes", "accept"], outputs: ["dropped"] }, { kind: "component", type: i3.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BrandingImportModalComponent, deps: [{ token: i1$1.AddBrandingModalService }, { token: i3.ZipService }, { token: i3$1.StaticAssetsService }, { token: i1$2.StoreBrandingService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: BrandingImportModalComponent, isStandalone: true, selector: "c8y-branding-import-modal", viewQueries: [{ propertyName: "modal", first: true, predicate: ModalComponent, descendants: true, static: true }], ngImport: i0, template: "<c8y-modal\n  [title]=\"'Import branding variant'\"\n  [headerClasses]=\"'dialog-header'\"\n  (onDismiss)=\"cancel()\"\n  [labels]=\"{ cancel: 'Cancel' }\"\n>\n  <ng-container c8y-modal-title>\n    <span c8yIcon=\"import\"></span>\n  </ng-container>\n  <div class=\"p-t-16 p-b-16 p-l-24 p-r-24 separator-bottom\">\n    <p\n      class=\"text-medium text-center text-16\"\n      translate\n    >\n      Easily copy any branding variant from any tenant\n    </p>\n    <p translate class=\"p-t-8\">\n      Export the branding variant from the source tenant and import the .zip file here. This process\n      allows you to maintain consistent branding across multiple tenants efficiently.\n    </p>\n  </div>\n  <div\n    class=\"p-24 m-r-auto m-l-auto\"\n    style=\"max-width: 300px\"\n  >\n    <c8y-drop-area\n      [icon]=\"'upload'\"\n      (dropped)=\"droppedFile($event)\"\n      [files]=\"files\"\n      [accept]=\"'.zip'\"\n      [maxAllowedFiles]=\"1\"\n      [loading]=\"loading\"\n    ></c8y-drop-area>\n  </div>\n</c8y-modal>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: i3.DropAreaComponent, selector: "c8y-drop-area", inputs: ["formControl", "title", "message", "icon", "loadingMessage", "forceHideList", "alwaysShow", "clickToOpen", "loading", "progress", "maxAllowedFiles", "files", "maxFileSizeInMegaBytes", "accept"], outputs: ["dropped"] }, { kind: "component", type: i3.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BrandingImportModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BrandingImportModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-branding-import-modal', standalone: true, imports: [CoreModule], template: "<c8y-modal\n  [title]=\"'Import branding variant'\"\n  [headerClasses]=\"'dialog-header'\"\n  (onDismiss)=\"cancel()\"\n  [labels]=\"{ cancel: 'Cancel' }\"\n>\n  <ng-container c8y-modal-title>\n    <span c8yIcon=\"import\"></span>\n  </ng-container>\n  <div class=\"p-t-16 p-b-16 p-l-24 p-r-24 separator-bottom\">\n    <p\n      class=\"text-medium text-center text-16\"\n      translate\n    >\n      Easily copy any branding variant from any tenant\n    </p>\n    <p translate class=\"p-t-8\">\n      Export the branding variant from the source tenant and import the .zip file here. This process\n      allows you to maintain consistent branding across multiple tenants efficiently.\n    </p>\n  </div>\n  <div\n    class=\"p-24 m-r-auto m-l-auto\"\n    style=\"max-width: 300px\"\n  >\n    <c8y-drop-area\n      [icon]=\"'upload'\"\n      (dropped)=\"droppedFile($event)\"\n      [files]=\"files\"\n      [accept]=\"'.zip'\"\n      [maxAllowedFiles]=\"1\"\n      [loading]=\"loading\"\n    ></c8y-drop-area>\n  </div>\n</c8y-modal>\n" }]
         }], ctorParameters: () => [{ type: i1$1.AddBrandingModalService }, { type: i3.ZipService }, { type: i3$1.StaticAssetsService }, { type: i1$2.StoreBrandingService }], propDecorators: { modal: [{
@@ -282,10 +282,10 @@ class BrandingImportModalService {
         }
         return versionDetails;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BrandingImportModalService, deps: [{ token: i1$3.BsModalService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BrandingImportModalService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BrandingImportModalService, deps: [{ token: i1$3.BsModalService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BrandingImportModalService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BrandingImportModalService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BrandingImportModalService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -298,10 +298,10 @@ class BrandingNameCellRendererComponent {
         this.name = context.value;
         this.routerLink = `${this.router.url}/${context.item.name}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BrandingNameCellRendererComponent, deps: [{ token: i3.CellRendererContext }, { token: i2$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: BrandingNameCellRendererComponent, isStandalone: true, selector: "c8y-branding-name-cell-renderer", ngImport: i0, template: "<a [routerLink]=\"routerLink\">{{ name }}</a>\n", dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BrandingNameCellRendererComponent, deps: [{ token: i3.CellRendererContext }, { token: i2$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: BrandingNameCellRendererComponent, isStandalone: true, selector: "c8y-branding-name-cell-renderer", ngImport: i0, template: "<a [routerLink]=\"routerLink\">{{ name }}</a>\n", dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BrandingNameCellRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BrandingNameCellRendererComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-branding-name-cell-renderer', standalone: true, imports: [RouterLink], template: "<a [routerLink]=\"routerLink\">{{ name }}</a>\n" }]
         }], ctorParameters: () => [{ type: i3.CellRendererContext }, { type: i2$1.Router }] });
@@ -321,10 +321,10 @@ class BrandingTagsHeaderCellRendererComponent {
       </li>
     </ul>`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BrandingTagsHeaderCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: BrandingTagsHeaderCellRendererComponent, isStandalone: true, selector: "c8y-branding-tags-header-cell-renderer", ngImport: i0, template: "<div class=\"d-flex\">\n  <span\n    class=\"text-truncate\"\n    [title]=\"heading | translate\"\n  >\n    {{ heading | translate }}\n  </span>\n  <button\n    class=\"btn-help btn-help--sm a-s-center\"\n    [attr.aria-label]=\"'Help' | translate\"\n    [popover]=\"applyBrandingPopover\"\n    placement=\"bottom\"\n    triggers=\"focus\"\n    container=\"body\"\n    type=\"button\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <i c8yIcon=\"question-circle-o\"></i>\n  </button>\n  <ng-template #applyBrandingPopover>\n    <div [innerHTML]=\"popoverContent | translate\"></div>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1$4.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BrandingTagsHeaderCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: BrandingTagsHeaderCellRendererComponent, isStandalone: true, selector: "c8y-branding-tags-header-cell-renderer", ngImport: i0, template: "<div class=\"d-flex\">\n  <span\n    class=\"text-truncate\"\n    [title]=\"heading | translate\"\n  >\n    {{ heading | translate }}\n  </span>\n  <button\n    class=\"btn-help btn-help--sm a-s-center\"\n    [attr.aria-label]=\"'Help' | translate\"\n    [popover]=\"applyBrandingPopover\"\n    placement=\"bottom\"\n    triggers=\"focus\"\n    container=\"body\"\n    type=\"button\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <i c8yIcon=\"question-circle-o\"></i>\n  </button>\n  <ng-template #applyBrandingPopover>\n    <div [innerHTML]=\"popoverContent | translate\"></div>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1$4.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BrandingTagsHeaderCellRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BrandingTagsHeaderCellRendererComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-branding-tags-header-cell-renderer', standalone: true, imports: [PopoverModule, C8yTranslatePipe], template: "<div class=\"d-flex\">\n  <span\n    class=\"text-truncate\"\n    [title]=\"heading | translate\"\n  >\n    {{ heading | translate }}\n  </span>\n  <button\n    class=\"btn-help btn-help--sm a-s-center\"\n    [attr.aria-label]=\"'Help' | translate\"\n    [popover]=\"applyBrandingPopover\"\n    placement=\"bottom\"\n    triggers=\"focus\"\n    container=\"body\"\n    type=\"button\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <i c8yIcon=\"question-circle-o\"></i>\n  </button>\n  <ng-template #applyBrandingPopover>\n    <div [innerHTML]=\"popoverContent | translate\"></div>\n  </ng-template>\n</div>\n" }]
         }] });
@@ -621,10 +621,10 @@ class BrandingComponent {
             await this.applicationService.setPackageVersionTag(publicOptionsApp, version.version, removedTags);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BrandingComponent, deps: [{ token: i1$2.StoreBrandingService }, { token: i2$1.ActivatedRoute }, { token: i3.AppStateService }, { token: i1.ApplicationService }, { token: i3.ZipService }, { token: i3$1.StaticAssetsService }, { token: i2$1.Router }, { token: i1$3.BsModalService }, { token: i3.ModalService }, { token: i1$2.BrandingVersionService }, { token: i1$1.AddBrandingModalService }, { token: i3.AlertService }, { token: BrandingImportModalService }, { token: i1$2.BrandingTrackingService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: BrandingComponent, isStandalone: true, selector: "c8y-branding", ngImport: i0, template: "<c8y-title>{{ 'Branding' | translate }}</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'cog'\"\n    [label]=\"'Settings' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'palette'\"\n    [label]=\"'Branding' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'palette'\"\n    [label]=\"'Variants' | translate\"\n    [path]=\"'/branding-editor/variants'\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n@let brandingVariant = availableBrandingVariants$ | async;\n@if (!brandingVariant) {\n  <c8y-loading></c8y-loading>\n} @else {\n  @if (brandingVariant.publicOptions) {\n    <c8y-action-bar-item\n      [placement]=\"'right'\"\n      [priority]=\"30\"\n    >\n      <button\n        class=\"btn btn-link\"\n        (click)=\"addNewVersion()\"\n        data-cy=\"branding-add-branding-variant\"\n      >\n        <i c8yIcon=\"plus-circle\"></i>\n        <span translate>Add variant</span>\n      </button>\n    </c8y-action-bar-item>\n  }\n  <c8y-action-bar-item\n    [placement]=\"'right'\"\n    [priority]=\"20\"\n  >\n    <button\n      class=\"btn btn-link\"\n      data-cy=\"branding-import-branding\"\n      (click)=\"importBranding()\"\n    >\n      <i [c8yIcon]=\"'data-import'\"></i>\n      <span translate>Import variant</span>\n    </button>\n  </c8y-action-bar-item>\n\n  @if (brandingVariant.publicOptions) {\n    <c8y-action-bar-item\n      [placement]=\"'right'\"\n      [priority]=\"10\"\n    >\n      <button\n        class=\"btn btn-link\"\n        (click)=\"deleteAllBrandings(brandingVariant.publicOptions)\"\n        data-cy=\"branding-remove-all-brandings\"\n      >\n        <i [c8yIcon]=\"'trash-o'\"></i>\n        <span translate>Delete all variants</span>\n      </button>\n    </c8y-action-bar-item>\n  }\n\n  <c8y-help\n    [src]=\"'/docs/enterprise-tenant/customization/#to-configure-branding-settings'\"\n  ></c8y-help>\n\n  <div class=\"content-fullpage d-flex d-col border-top\">\n    <c8y-data-grid\n      [title]=\"'Branding variants' | translate\"\n      [columns]=\"columns\"\n      [actionControls]=\"actionControls\"\n      [pagination]=\"pagination\"\n      [displayOptions]=\"displayOptions\"\n      (onReload)=\"refresh()\"\n      [rows]=\"brandingVariant.variants\"\n    >\n      @if (!brandingVariant.publicOptions) {\n        <c8y-ui-empty-state\n          [icon]=\"'palette'\"\n          [title]=\"'No branding variants' | translate\"\n          [subtitle]=\"\n            'Personalize your experience with a theme-able interface. Create a unique look that aligns with your brand identity.'\n              | translate\n          \"\n          [horizontal]=\"false\"\n        >\n          <button\n            class=\"btn btn-default\"\n            data-cy=\"branding-get-started-using-branding\"\n            (click)=\"getStartedUsingBranding()\"\n            translate\n          >\n            Add branding variant\n          </button>\n        </c8y-ui-empty-state>\n      }\n    </c8y-data-grid>\n  </div>\n}\n", dependencies: [{ kind: "component", type: BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: DataGridComponent, selector: "c8y-data-grid", inputs: ["title", "loadMoreItemsLabel", "loadingItemsLabel", "showSearch", "refresh", "columns", "rows", "pagination", "childNodePagination", "infiniteScroll", "serverSideDataCallback", "selectable", "singleSelection", "selectionPrimaryKey", "displayOptions", "actionControls", "bulkActionControls", "headerActionControls", "searchText", "configureColumnsEnabled", "showCounterWarning", "activeClassName", "expandableRows", "treeGrid", "hideReload", "childNodesProperty", "parentNodeLabelProperty"], outputs: ["rowMouseOver", "rowMouseLeave", "rowClick", "onConfigChange", "onBeforeFilter", "onBeforeSearch", "onFilter", "itemsSelect", "onReload", "onAddCustomColumn", "onRemoveCustomColumn", "onColumnFilterReset", "onSort", "onPageSizeChange", "onColumnReordered", "onColumnVisibilityChange"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BrandingComponent, deps: [{ token: i1$2.StoreBrandingService }, { token: i2$1.ActivatedRoute }, { token: i3.AppStateService }, { token: i1.ApplicationService }, { token: i3.ZipService }, { token: i3$1.StaticAssetsService }, { token: i2$1.Router }, { token: i1$3.BsModalService }, { token: i3.ModalService }, { token: i1$2.BrandingVersionService }, { token: i1$1.AddBrandingModalService }, { token: i3.AlertService }, { token: BrandingImportModalService }, { token: i1$2.BrandingTrackingService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BrandingComponent, isStandalone: true, selector: "c8y-branding", ngImport: i0, template: "<c8y-title>{{ 'Branding' | translate }}</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'cog'\"\n    [label]=\"'Settings' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'palette'\"\n    [label]=\"'Branding' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'palette'\"\n    [label]=\"'Variants' | translate\"\n    [path]=\"'/branding-editor/variants'\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n@let brandingVariant = availableBrandingVariants$ | async;\n@if (!brandingVariant) {\n  <c8y-loading></c8y-loading>\n} @else {\n  @if (brandingVariant.publicOptions) {\n    <c8y-action-bar-item\n      [placement]=\"'right'\"\n      [priority]=\"30\"\n    >\n      <button\n        class=\"btn btn-link\"\n        (click)=\"addNewVersion()\"\n        data-cy=\"branding-add-branding-variant\"\n      >\n        <i c8yIcon=\"plus-circle\"></i>\n        <span translate>Add variant</span>\n      </button>\n    </c8y-action-bar-item>\n  }\n  <c8y-action-bar-item\n    [placement]=\"'right'\"\n    [priority]=\"20\"\n  >\n    <button\n      class=\"btn btn-link\"\n      data-cy=\"branding-import-branding\"\n      (click)=\"importBranding()\"\n    >\n      <i [c8yIcon]=\"'data-import'\"></i>\n      <span translate>Import variant</span>\n    </button>\n  </c8y-action-bar-item>\n\n  @if (brandingVariant.publicOptions) {\n    <c8y-action-bar-item\n      [placement]=\"'right'\"\n      [priority]=\"10\"\n    >\n      <button\n        class=\"btn btn-link\"\n        (click)=\"deleteAllBrandings(brandingVariant.publicOptions)\"\n        data-cy=\"branding-remove-all-brandings\"\n      >\n        <i [c8yIcon]=\"'trash-o'\"></i>\n        <span translate>Delete all variants</span>\n      </button>\n    </c8y-action-bar-item>\n  }\n\n  <c8y-help\n    [src]=\"'/docs/enterprise-tenant/customization/#to-configure-branding-settings'\"\n  ></c8y-help>\n\n  <div class=\"content-fullpage d-flex d-col border-top\">\n    <c8y-data-grid\n      [title]=\"'Branding variants' | translate\"\n      [columns]=\"columns\"\n      [actionControls]=\"actionControls\"\n      [pagination]=\"pagination\"\n      [displayOptions]=\"displayOptions\"\n      (onReload)=\"refresh()\"\n      [rows]=\"brandingVariant.variants\"\n    >\n      @if (!brandingVariant.publicOptions) {\n        <c8y-ui-empty-state\n          [icon]=\"'palette'\"\n          [title]=\"'No branding variants' | translate\"\n          [subtitle]=\"\n            'Personalize your experience with a theme-able interface. Create a unique look that aligns with your brand identity.'\n              | translate\n          \"\n          [horizontal]=\"false\"\n        >\n          <button\n            class=\"btn btn-default\"\n            data-cy=\"branding-get-started-using-branding\"\n            (click)=\"getStartedUsingBranding()\"\n            translate\n          >\n            Add branding variant\n          </button>\n        </c8y-ui-empty-state>\n      }\n    </c8y-data-grid>\n  </div>\n}\n", dependencies: [{ kind: "component", type: BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: DataGridComponent, selector: "c8y-data-grid", inputs: ["title", "loadMoreItemsLabel", "loadingItemsLabel", "showSearch", "refresh", "columns", "rows", "pagination", "childNodePagination", "infiniteScroll", "serverSideDataCallback", "selectable", "singleSelection", "selectionPrimaryKey", "displayOptions", "actionControls", "bulkActionControls", "headerActionControls", "searchText", "configureColumnsEnabled", "showCounterWarning", "activeClassName", "expandableRows", "treeGrid", "hideReload", "childNodesProperty", "parentNodeLabelProperty"], outputs: ["rowMouseOver", "rowMouseLeave", "rowClick", "onConfigChange", "onBeforeFilter", "onBeforeSearch", "onFilter", "itemsSelect", "onReload", "onAddCustomColumn", "onRemoveCustomColumn", "onColumnFilterReset", "onSort", "onPageSizeChange", "onColumnReordered", "onColumnVisibilityChange"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BrandingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BrandingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-branding', standalone: true, imports: [
                         BreadcrumbComponent,
@@ -723,10 +723,10 @@ class BrandingFormComponent {
     previewBanner() {
         this.messageBannerService.showBanner();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BrandingFormComponent, deps: [{ token: i2.FormBuilder }, { token: i3.MessageBannerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: BrandingFormComponent, isStandalone: true, selector: "c8y-branding-form", host: { classAttribute: "d-contents" }, ngImport: i0, template: "<c8y-help [src]=\"'/docs/enterprise-tenant/customization/#generic-tab'\"></c8y-help>\n\n<div\n  class=\"inner-scroll\"\n  [formGroup]=\"formGroup\"\n>\n  <!--  Title & Favicon-->\n  <div class=\"card-block\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4 class=\"text-normal text-right text-left-xs m-b-16\">\n          {{ 'Title & favicon' | translate }}\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div\n          class=\"row p-t-16 p-b-16\"\n          [formGroupName]=\"'genericApplicationOptions'\"\n        >\n          <div class=\"col-md-6\">\n            <c8y-form-group class=\"m-b-32\">\n              <label\n                for=\"globalTitle\"\n                translate\n              >\n                Title\n              </label>\n              <input\n                class=\"form-control\"\n                id=\"globalTitle\"\n                name=\"globalTitle\"\n                type=\"text\"\n                formControlName=\"globalTitle\"\n              />\n              <c8y-messages\n                [helpMessage]=\"'Title to display in the browser tab' | translate\"\n              ></c8y-messages>\n            </c8y-form-group>\n          </div>\n          <div class=\"col-md-6\">\n            <c8y-form-group>\n              <label translate>Favicon</label>\n              <c8y-static-assets-file-picker\n                name=\"faviconUrl\"\n                [supportedFileExtensions]=\"['ico']\"\n                [isCSSURL]=\"false\"\n                formControlName=\"faviconUrl\"\n              ></c8y-static-assets-file-picker>\n              <c8y-messages [helpMessage]=\"'Supported files: *.ico' | translate\"></c8y-messages>\n            </c8y-form-group>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"card-block separator-top\">\n    <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n      <h4\n        class=\"text-normal text-right text-left-xs m-b-16\"\n        translate\n      >\n        Dark theme\n      </h4>\n    </div>\n    <div class=\"col-xs-12 col-sm-9 col-md-10\">\n      <c8y-form-group class=\"m-b-32 p-t-8 m-t-4\">\n        <label class=\"c8y-switch\">\n          <input\n            class=\"form-control\"\n            name=\"darkThemeAvailable\"\n            type=\"checkbox\"\n            formControlName=\"darkThemeAvailable\"\n          />\n          <span></span>\n          <span translate>Enable dark theme support</span>\n        </label>\n      </c8y-form-group>\n    </div>\n  </div>\n  <!-- Typography -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n          translate\n        >\n          Typography\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <fieldset\n              class=\"c8y-fieldset p-24\"\n              [formGroupName]=\"'baseTypography'\"\n            >\n              <legend translate>Base typography</legend>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  for=\"font-url\"\n                  translate\n                >\n                  Fonts URL\n                </label>\n                <input\n                  class=\"form-control\"\n                  id=\"font-url\"\n                  placeholder=\"{{\n                    'e.g. {{ example }}' | translate : { example: 'https://fonts.googleapis.com/css?family=Roboto:400,500,700' }\n                  }}\"\n                  type=\"text\"\n                  formControlName=\"font-url\"\n                />\n                <c8y-messages [helpMessage]=\"'The Google fonts URL' | translate\"></c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"font-family-base\"\n                  for=\"font-family-base\"\n                  translate\n                >\n                  Base font stack\n                </label>\n                <input\n                  class=\"form-control\"\n                  id=\"font-family-base\"\n                  placeholder=\"{{ 'e.g. {{ example }}' | translate : {example: '&quot;Roboto&quot;, Arial, sans-serif'} }}\"\n                  name=\"font-family-base\"\n                  type=\"text\"\n                  formControlName=\"font-family-base\"\n                />\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n          <div class=\"col-md-6\">\n            <fieldset\n              class=\"c8y-fieldset p-24\"\n              [formGroupName]=\"'headingsAndNavigatorTypography'\"\n            >\n              <legend>{{ 'Headings & navigator' | translate }}</legend>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"font-family-headings\"\n                  for=\"font-family-headings\"\n                  translate\n                >\n                  Headings font stack\n                </label>\n                <input\n                  class=\"form-control\"\n                  id=\"font-family-headings\"\n                  placeholder=\"{{ 'e.g. {{ example }}' | translate : {example: '&quot;Roboto&quot;, Arial, sans-serif'} }}\"\n                  type=\"text\"\n                  formControlName=\"font-family-headings\"\n                />\n                <c8y-messages\n                  [helpMessage]=\"\n                    'Leave empty to use the same font as the base font stack' | translate\n                  \"\n                ></c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"navigator-font-family\"\n                  translate\n                >\n                  Navigator font stack\n                </label>\n                <div class=\"form-control-static\">\n                  <label class=\"c8y-radio radio-inline\">\n                    <input\n                      name=\"navigator-font-family\"\n                      type=\"radio\"\n                      formControlName=\"navigator-font-family\"\n                      [value]=\"'var(--font-family-base)'\"\n                    />\n                    <span></span>\n                    <span translate>Match base font stack</span>\n                  </label>\n                  <label\n                    class=\"c8y-radio radio-inline\"\n                    title=\"Radio Two\"\n                  >\n                    <input\n                      name=\"navigator-font-family\"\n                      type=\"radio\"\n                      formControlName=\"navigator-font-family\"\n                      [value]=\"'var(--font-family-headings)'\"\n                    />\n                    <span></span>\n                    <span translate>Match headings font stack</span>\n                  </label>\n                </div>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Cookie banner -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n          translate\n        >\n          Cookie banner\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <fieldset\n          class=\"c8y-fieldset p-24\"\n          [formGroupName]=\"'cookieBanner'\"\n        >\n          <legend translate>Cookie banner</legend>\n          <label class=\"c8y-switch\">\n            <input\n              class=\"form-control\"\n              name=\"cookieBannerEnabled\"\n              type=\"checkbox\"\n              [ngModelOptions]=\"{ standalone: true }\"\n              [ngModel]=\"!formGroup.value.cookieBanner.cookieBannerDisabled\"\n              (ngModelChange)=\"cockieBannerChange($event)\"\n            />\n            <span></span>\n            <span translate>Enable cookie banner</span>\n          </label>\n\n          <div\n            class=\"collapse\"\n            [collapse]=\"formGroup.value.cookieBanner.cookieBannerDisabled\"\n            [isAnimated]=\"true\"\n          >\n            <div\n              class=\"row\"\n              style=\"min-height: 227px\"\n            >\n              <ng-container *ngIf=\"formGroup.value.cookieBanner.cookieBannerDisabled !== true\">\n                <div class=\"col-md-6\">\n                  <c8y-form-group class=\"m-b-32\">\n                    <label\n                      for=\"cookieBannerTitle\"\n                      translate\n                    >\n                      Title\n                    </label>\n                    <input\n                      class=\"form-control\"\n                      id=\"cookieBannerTitle\"\n                      name=\"cookieBannerTitle\"\n                      type=\"text\"\n                      formControlName=\"cookieBannerTitle\"\n                    />\n                    <c8y-messages></c8y-messages>\n                  </c8y-form-group>\n                  <c8y-form-group class=\"m-b-32\">\n                    <label\n                      for=\"policyUrl\"\n                      translate\n                    >\n                      Link to privacy policy\n                    </label>\n                    <input\n                      class=\"form-control\"\n                      id=\"policyUrl\"\n                      name=\"policyUrl\"\n                      type=\"text\"\n                      formControlName=\"policyUrl\"\n                    />\n                    <c8y-messages></c8y-messages>\n                  </c8y-form-group>\n                  <c8y-form-group class=\"m-b-32\">\n                    <label\n                      for=\"policyVersion\"\n                      translate\n                    >\n                      Version of privacy policy\n                    </label>\n                    <input\n                      class=\"form-control\"\n                      id=\"policyVersion\"\n                      name=\"policyVersion\"\n                      type=\"text\"\n                      formControlName=\"policyVersion\"\n                    />\n                    <c8y-messages\n                      [helpMessage]=\"\n                        'Changing the version of the privacy policy invalidates already existing cookie consents.'\n                          | translate\n                      \"\n                    ></c8y-messages>\n                  </c8y-form-group>\n                </div>\n\n                <div class=\"col-md-6\">\n                  <c8y-form-group class=\"m-b-32\">\n                    <label\n                      for=\"cookieBannerText\"\n                      translate\n                    >\n                      Text\n                    </label>\n                    <textarea\n                      class=\"form-control\"\n                      id=\"cookieBannerText\"\n                      name=\"cookieBannerText\"\n                      rows=\"8\"\n                      formControlName=\"cookieBannerText\"\n                    ></textarea>\n                    <c8y-messages></c8y-messages>\n                  </c8y-form-group>\n                </div>\n              </ng-container>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n  </div>\n  <!-- Message banner -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n          translate\n        >\n          Message banner\n        </h4>\n      </div>\n\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <fieldset\n          class=\"c8y-fieldset p-24\"\n          [formGroupName]=\"'messageBanner'\"\n        >\n          <legend translate>Message banner</legend>\n\n          <label class=\"c8y-switch\">\n            <input\n              class=\"form-control\"\n              name=\"messageBannerEnabled\"\n              type=\"checkbox\"\n              formControlName=\"messageBannerEnabled\"\n            />\n            <span></span>\n            <span translate>Enable message banner</span>\n          </label>\n          <div\n            class=\"collapse\"\n            [collapse]=\"!formGroup.value.messageBanner.messageBannerEnabled\"\n            [isAnimated]=\"true\"\n          >\n            <div class=\"d-flex a-i-center gap-8 p-t-16 p-b-16\">\n              <fieldset class=\"c8y-fieldset p-16\">\n                <legend>{{ 'Message type' | translate }}</legend>\n                <label\n                  class=\"c8y-radio radio-inline\"\n                  title=\"{{ 'Info' | translate }}\"\n                >\n                  <input\n                    type=\"radio\"\n                    value=\"info\"\n                    formControlName=\"messageBannerType\"\n                  />\n                  <span></span>\n                  <span class=\"d-flex a-i-center\">\n                    <i\n                      class=\"text-info icon-16 m-r-4\"\n                      c8yIcon=\"info-circle\"\n                    ></i>\n                    Info\n                  </span>\n                </label>\n                <label\n                  class=\"c8y-radio radio-inline\"\n                  title=\"{{ 'Warning' | translate }}\"\n                >\n                  <input\n                    type=\"radio\"\n                    value=\"warning\"\n                    formControlName=\"messageBannerType\"\n                  />\n                  <span></span>\n                  <span class=\"d-flex a-i-center\">\n                    <i\n                      class=\"text-warning icon-16 m-r-4\"\n                      c8yIcon=\"warning\"\n                    ></i>\n                    {{ 'Warning' | translate }}\n                  </span>\n                </label>\n                <label\n                  class=\"c8y-radio radio-inline\"\n                  title=\"{{ 'Danger' | translate }}\"\n                >\n                  <input\n                    type=\"radio\"\n                    value=\"danger\"\n                    formControlName=\"messageBannerType\"\n                  />\n                  <span></span>\n                  <span class=\"d-flex a-i-center\">\n                    <i\n                      class=\"text-danger icon-16 m-r-4\"\n                      c8yIcon=\"exclamation-circle\"\n                    ></i>\n                    {{ 'Danger' | translate }}\n                  </span>\n                </label>\n                <label\n                  class=\"c8y-radio radio-inline\"\n                  title=\"{{ 'Success' | translate }}\"\n                >\n                  <input\n                    type=\"radio\"\n                    value=\"success\"\n                    formControlName=\"messageBannerType\"\n                  />\n                  <span></span>\n                  <span class=\"d-flex a-i-center\">\n                    <i\n                      class=\"text-success icon-16 m-r-4\"\n                      c8yIcon=\"check-circle\"\n                    ></i>\n                    {{ 'Success' | translate }}\n                  </span>\n                </label>\n                <label\n                  class=\"c8y-radio radio-inline\"\n                  title=\"{{ 'System' | translate }}\"\n                >\n                  <input\n                    type=\"radio\"\n                    value=\"system\"\n                    formControlName=\"messageBannerType\"\n                  />\n                  <span></span>\n                  <span>\n                    <i\n                      class=\"text-primary icon-16 m-r4\"\n                      c8yIcon=\"wrench\"\n                    ></i>\n                    {{ 'System' | translate }}\n                  </span>\n                </label>\n              </fieldset>\n            </div>\n\n            <c8y-form-group\n              class=\"m-b-32 p-b-32\"\n              [style]=\"{ height: '300px' }\"\n              *ngIf=\"formGroup.value.messageBanner.messageBannerEnabled\"\n            >\n              <label\n                for=\"messageBannerContent\"\n                translate\n              >\n                Message content\n              </label>\n              <c8y-editor\n                class=\"flex-grow form-control\"\n                style=\"height: 100%\"\n                formControlName=\"messageBannerContent\"\n                [editorOptions]=\"{language: 'markdown'}\"\n                monacoEditorMarkerValidator\n              ></c8y-editor>\n              <c8y-messages\n                [helpMessage]=\"messageBannerHelp | translate: messageBannerHelpParams\"\n              ></c8y-messages>\n              <c8y-messages></c8y-messages>\n            </c8y-form-group>\n\n            <button\n              class=\"btn btn-default\"\n              type=\"button\"\n              (click)=\"previewBanner()\"\n            >\n              <i\n                class=\"m-r-4\"\n                c8yIcon=\"eye\"\n              ></i>\n              <span translate>Preview banner</span>\n            </button>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i3.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i3.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i3.HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CollapseModule }, { kind: "directive", type: i4.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "component", type: StaticAssetsFilePickerComponent, selector: "c8y-static-assets-file-picker", inputs: ["isCSSURL", "staticAssetType", "supportedFileExtensions", "layout", "size"] }, { kind: "component", type: EditorComponent, selector: "c8y-editor", inputs: ["editorOptions", "theme"], outputs: ["editorInit"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BrandingFormComponent, deps: [{ token: i2.FormBuilder }, { token: i3.MessageBannerService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: BrandingFormComponent, isStandalone: true, selector: "c8y-branding-form", host: { classAttribute: "d-contents" }, ngImport: i0, template: "<c8y-help [src]=\"'/docs/enterprise-tenant/customization/#generic-tab'\"></c8y-help>\n\n<div\n  class=\"inner-scroll\"\n  [formGroup]=\"formGroup\"\n>\n  <!--  Title & Favicon-->\n  <div class=\"card-block\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4 class=\"text-normal text-right text-left-xs m-b-16\">\n          {{ 'Title & favicon' | translate }}\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div\n          class=\"row p-t-16 p-b-16\"\n          [formGroupName]=\"'genericApplicationOptions'\"\n        >\n          <div class=\"col-md-6\">\n            <c8y-form-group class=\"m-b-32\">\n              <label\n                for=\"globalTitle\"\n                translate\n              >\n                Title\n              </label>\n              <input\n                class=\"form-control\"\n                id=\"globalTitle\"\n                name=\"globalTitle\"\n                type=\"text\"\n                formControlName=\"globalTitle\"\n              />\n              <c8y-messages\n                [helpMessage]=\"'Title to display in the browser tab' | translate\"\n              ></c8y-messages>\n            </c8y-form-group>\n          </div>\n          <div class=\"col-md-6\">\n            <c8y-form-group>\n              <label translate>Favicon</label>\n              <c8y-static-assets-file-picker\n                name=\"faviconUrl\"\n                [supportedFileExtensions]=\"['ico']\"\n                [isCSSURL]=\"false\"\n                formControlName=\"faviconUrl\"\n              ></c8y-static-assets-file-picker>\n              <c8y-messages [helpMessage]=\"'Supported files: *.ico' | translate\"></c8y-messages>\n            </c8y-form-group>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"card-block separator-top\">\n    <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n      <h4\n        class=\"text-normal text-right text-left-xs m-b-16\"\n        translate\n      >\n        Dark theme\n      </h4>\n    </div>\n    <div class=\"col-xs-12 col-sm-9 col-md-10\">\n      <c8y-form-group class=\"m-b-32 p-t-8 m-t-4\">\n        <label class=\"c8y-switch\">\n          <input\n            class=\"form-control\"\n            name=\"darkThemeAvailable\"\n            type=\"checkbox\"\n            formControlName=\"darkThemeAvailable\"\n          />\n          <span></span>\n          <span translate>Enable dark theme support</span>\n        </label>\n      </c8y-form-group>\n    </div>\n  </div>\n  <!-- Typography -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n          translate\n        >\n          Typography\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <fieldset\n              class=\"c8y-fieldset p-24\"\n              [formGroupName]=\"'baseTypography'\"\n            >\n              <legend translate>Base typography</legend>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  for=\"font-url\"\n                  translate\n                >\n                  Fonts URL\n                </label>\n                <input\n                  class=\"form-control\"\n                  id=\"font-url\"\n                  placeholder=\"{{\n                    'e.g. {{ example }}' | translate : { example: 'https://fonts.googleapis.com/css?family=Roboto:400,500,700' }\n                  }}\"\n                  type=\"text\"\n                  formControlName=\"font-url\"\n                />\n                <c8y-messages [helpMessage]=\"'The Google fonts URL' | translate\"></c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"font-family-base\"\n                  for=\"font-family-base\"\n                  translate\n                >\n                  Base font stack\n                </label>\n                <input\n                  class=\"form-control\"\n                  id=\"font-family-base\"\n                  placeholder=\"{{ 'e.g. {{ example }}' | translate : {example: '&quot;Roboto&quot;, Arial, sans-serif'} }}\"\n                  name=\"font-family-base\"\n                  type=\"text\"\n                  formControlName=\"font-family-base\"\n                />\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n          <div class=\"col-md-6\">\n            <fieldset\n              class=\"c8y-fieldset p-24\"\n              [formGroupName]=\"'headingsAndNavigatorTypography'\"\n            >\n              <legend>{{ 'Headings & navigator' | translate }}</legend>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"font-family-headings\"\n                  for=\"font-family-headings\"\n                  translate\n                >\n                  Headings font stack\n                </label>\n                <input\n                  class=\"form-control\"\n                  id=\"font-family-headings\"\n                  placeholder=\"{{ 'e.g. {{ example }}' | translate : {example: '&quot;Roboto&quot;, Arial, sans-serif'} }}\"\n                  type=\"text\"\n                  formControlName=\"font-family-headings\"\n                />\n                <c8y-messages\n                  [helpMessage]=\"\n                    'Leave empty to use the same font as the base font stack' | translate\n                  \"\n                ></c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"navigator-font-family\"\n                  translate\n                >\n                  Navigator font stack\n                </label>\n                <div class=\"form-control-static\">\n                  <label class=\"c8y-radio radio-inline\">\n                    <input\n                      name=\"navigator-font-family\"\n                      type=\"radio\"\n                      formControlName=\"navigator-font-family\"\n                      [value]=\"'var(--font-family-base)'\"\n                    />\n                    <span></span>\n                    <span translate>Match base font stack</span>\n                  </label>\n                  <label\n                    class=\"c8y-radio radio-inline\"\n                    title=\"Radio Two\"\n                  >\n                    <input\n                      name=\"navigator-font-family\"\n                      type=\"radio\"\n                      formControlName=\"navigator-font-family\"\n                      [value]=\"'var(--font-family-headings)'\"\n                    />\n                    <span></span>\n                    <span translate>Match headings font stack</span>\n                  </label>\n                </div>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Cookie banner -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n          translate\n        >\n          Cookie banner\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <fieldset\n          class=\"c8y-fieldset p-24\"\n          [formGroupName]=\"'cookieBanner'\"\n        >\n          <legend translate>Cookie banner</legend>\n          <label class=\"c8y-switch\">\n            <input\n              class=\"form-control\"\n              name=\"cookieBannerEnabled\"\n              type=\"checkbox\"\n              [ngModelOptions]=\"{ standalone: true }\"\n              [ngModel]=\"!formGroup.value.cookieBanner.cookieBannerDisabled\"\n              (ngModelChange)=\"cockieBannerChange($event)\"\n            />\n            <span></span>\n            <span translate>Enable cookie banner</span>\n          </label>\n\n          <div\n            class=\"collapse\"\n            [collapse]=\"formGroup.value.cookieBanner.cookieBannerDisabled\"\n            [isAnimated]=\"true\"\n          >\n            <div\n              class=\"row\"\n              style=\"min-height: 227px\"\n            >\n              <ng-container *ngIf=\"formGroup.value.cookieBanner.cookieBannerDisabled !== true\">\n                <div class=\"col-md-6\">\n                  <c8y-form-group class=\"m-b-32\">\n                    <label\n                      for=\"cookieBannerTitle\"\n                      translate\n                    >\n                      Title\n                    </label>\n                    <input\n                      class=\"form-control\"\n                      id=\"cookieBannerTitle\"\n                      name=\"cookieBannerTitle\"\n                      type=\"text\"\n                      formControlName=\"cookieBannerTitle\"\n                    />\n                    <c8y-messages></c8y-messages>\n                  </c8y-form-group>\n                  <c8y-form-group class=\"m-b-32\">\n                    <label\n                      for=\"policyUrl\"\n                      translate\n                    >\n                      Link to privacy policy\n                    </label>\n                    <input\n                      class=\"form-control\"\n                      id=\"policyUrl\"\n                      name=\"policyUrl\"\n                      type=\"text\"\n                      formControlName=\"policyUrl\"\n                    />\n                    <c8y-messages></c8y-messages>\n                  </c8y-form-group>\n                  <c8y-form-group class=\"m-b-32\">\n                    <label\n                      for=\"policyVersion\"\n                      translate\n                    >\n                      Version of privacy policy\n                    </label>\n                    <input\n                      class=\"form-control\"\n                      id=\"policyVersion\"\n                      name=\"policyVersion\"\n                      type=\"text\"\n                      formControlName=\"policyVersion\"\n                    />\n                    <c8y-messages\n                      [helpMessage]=\"\n                        'Changing the version of the privacy policy invalidates already existing cookie consents.'\n                          | translate\n                      \"\n                    ></c8y-messages>\n                  </c8y-form-group>\n                </div>\n\n                <div class=\"col-md-6\">\n                  <c8y-form-group class=\"m-b-32\">\n                    <label\n                      for=\"cookieBannerText\"\n                      translate\n                    >\n                      Text\n                    </label>\n                    <textarea\n                      class=\"form-control\"\n                      id=\"cookieBannerText\"\n                      name=\"cookieBannerText\"\n                      rows=\"8\"\n                      formControlName=\"cookieBannerText\"\n                    ></textarea>\n                    <c8y-messages></c8y-messages>\n                  </c8y-form-group>\n                </div>\n              </ng-container>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n  </div>\n  <!-- Message banner -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n          translate\n        >\n          Message banner\n        </h4>\n      </div>\n\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <fieldset\n          class=\"c8y-fieldset p-24\"\n          [formGroupName]=\"'messageBanner'\"\n        >\n          <legend translate>Message banner</legend>\n\n          <label class=\"c8y-switch\">\n            <input\n              class=\"form-control\"\n              name=\"messageBannerEnabled\"\n              type=\"checkbox\"\n              formControlName=\"messageBannerEnabled\"\n            />\n            <span></span>\n            <span translate>Enable message banner</span>\n          </label>\n          <div\n            class=\"collapse\"\n            [collapse]=\"!formGroup.value.messageBanner.messageBannerEnabled\"\n            [isAnimated]=\"true\"\n          >\n            <div class=\"d-flex a-i-center gap-8 p-t-16 p-b-16\">\n              <fieldset class=\"c8y-fieldset p-16\">\n                <legend>{{ 'Message type' | translate }}</legend>\n                <label\n                  class=\"c8y-radio radio-inline\"\n                  title=\"{{ 'Info' | translate }}\"\n                >\n                  <input\n                    type=\"radio\"\n                    value=\"info\"\n                    formControlName=\"messageBannerType\"\n                  />\n                  <span></span>\n                  <span class=\"d-flex a-i-center\">\n                    <i\n                      class=\"text-info icon-16 m-r-4\"\n                      c8yIcon=\"info-circle\"\n                    ></i>\n                    Info\n                  </span>\n                </label>\n                <label\n                  class=\"c8y-radio radio-inline\"\n                  title=\"{{ 'Warning' | translate }}\"\n                >\n                  <input\n                    type=\"radio\"\n                    value=\"warning\"\n                    formControlName=\"messageBannerType\"\n                  />\n                  <span></span>\n                  <span class=\"d-flex a-i-center\">\n                    <i\n                      class=\"text-warning icon-16 m-r-4\"\n                      c8yIcon=\"warning\"\n                    ></i>\n                    {{ 'Warning' | translate }}\n                  </span>\n                </label>\n                <label\n                  class=\"c8y-radio radio-inline\"\n                  title=\"{{ 'Danger' | translate }}\"\n                >\n                  <input\n                    type=\"radio\"\n                    value=\"danger\"\n                    formControlName=\"messageBannerType\"\n                  />\n                  <span></span>\n                  <span class=\"d-flex a-i-center\">\n                    <i\n                      class=\"text-danger icon-16 m-r-4\"\n                      c8yIcon=\"exclamation-circle\"\n                    ></i>\n                    {{ 'Danger' | translate }}\n                  </span>\n                </label>\n                <label\n                  class=\"c8y-radio radio-inline\"\n                  title=\"{{ 'Success' | translate }}\"\n                >\n                  <input\n                    type=\"radio\"\n                    value=\"success\"\n                    formControlName=\"messageBannerType\"\n                  />\n                  <span></span>\n                  <span class=\"d-flex a-i-center\">\n                    <i\n                      class=\"text-success icon-16 m-r-4\"\n                      c8yIcon=\"check-circle\"\n                    ></i>\n                    {{ 'Success' | translate }}\n                  </span>\n                </label>\n                <label\n                  class=\"c8y-radio radio-inline\"\n                  title=\"{{ 'System' | translate }}\"\n                >\n                  <input\n                    type=\"radio\"\n                    value=\"system\"\n                    formControlName=\"messageBannerType\"\n                  />\n                  <span></span>\n                  <span>\n                    <i\n                      class=\"text-primary icon-16 m-r4\"\n                      c8yIcon=\"wrench\"\n                    ></i>\n                    {{ 'System' | translate }}\n                  </span>\n                </label>\n              </fieldset>\n            </div>\n\n            <c8y-form-group\n              class=\"m-b-32 p-b-32\"\n              [style]=\"{ height: '300px' }\"\n              *ngIf=\"formGroup.value.messageBanner.messageBannerEnabled\"\n            >\n              <label\n                for=\"messageBannerContent\"\n                translate\n              >\n                Message content\n              </label>\n              <c8y-editor\n                class=\"flex-grow form-control\"\n                style=\"height: 100%\"\n                formControlName=\"messageBannerContent\"\n                [editorOptions]=\"{language: 'markdown'}\"\n                monacoEditorMarkerValidator\n              ></c8y-editor>\n              <c8y-messages\n                [helpMessage]=\"messageBannerHelp | translate: messageBannerHelpParams\"\n              ></c8y-messages>\n              <c8y-messages></c8y-messages>\n            </c8y-form-group>\n\n            <button\n              class=\"btn btn-default\"\n              type=\"button\"\n              (click)=\"previewBanner()\"\n            >\n              <i\n                class=\"m-r-4\"\n                c8yIcon=\"eye\"\n              ></i>\n              <span translate>Preview banner</span>\n            </button>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i3.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i3.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i3.HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CollapseModule }, { kind: "directive", type: i4.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "component", type: StaticAssetsFilePickerComponent, selector: "c8y-static-assets-file-picker", inputs: ["isCSSURL", "staticAssetType", "supportedFileExtensions", "layout", "size"] }, { kind: "component", type: EditorComponent, selector: "c8y-editor", inputs: ["editorOptions", "theme"], outputs: ["editorInit"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BrandingFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BrandingFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-branding-form', standalone: true, host: { class: 'd-contents' }, imports: [
                         CoreModule,
@@ -1144,10 +1144,10 @@ class BrandingThemeFormComponent {
     getPrefix() {
         return this.addDarkThemePrefix ? 'dark-' : '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BrandingThemeFormComponent, deps: [{ token: i2$1.ActivatedRoute }, { token: i2.FormBuilder }, { token: i3.FilesService }, { token: i1$2.BrandingShadesService }, { token: i3.ThemeSwitcherService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: BrandingThemeFormComponent, isStandalone: true, selector: "c8y-branding-theme-form", host: { classAttribute: "d-contents" }, ngImport: i0, template: "<c8y-help [src]=\"'/docs/enterprise-tenant/customization/#light-dark-theme-tab'\"></c8y-help>\n\n<div\n  class=\"inner-scroll\"\n  [formGroup]=\"formGroup\"\n>\n  <!--   Logos -->\n  <div class=\"card-block\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n          translate\n        >\n          Logos\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend translate>Brand logo</legend>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"brand-logo-img\"\n                  translate\n                >\n                  Brand logo file\n                </label>\n                <c8y-static-assets-file-picker\n                  name=\"brand-logo-img\"\n                  [supportedFileExtensions]=\"imageFileExtensions\"\n                  [isCSSURL]=\"true\"\n                  [size]=\"150\"\n                  formControlName=\"brand-logo-img\"\n                ></c8y-static-assets-file-picker>\n                <c8y-messages [helpMessage]=\"'Supported files: *.png, *.svg, *.jpg' | translate\"></c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"brand-logo-img-height\"\n                  for=\"brand-logo-img-height\"\n                  translate\n                >\n                  Brand logo height\n                </label>\n                <input\n                  class=\"form-control\"\n                  id=\"brand-logo-img-height\"\n                  placeholder=\"{{ 'e.g. {{ example }}' | translate: { example: '50' } }}\"\n                  name=\"brand-logo-img-height\"\n                  type=\"number\"\n                  formControlName=\"brand-logo-img-height\"\n                />\n                <c8y-messages [helpMessage]=\"'Value is applied in px' | translate\"></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n          <div class=\"col-md-6\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend translate>Navigator logo</legend>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"navigator-platform-logo\"\n                  translate\n                >\n                  Navigator logo file\n                </label>\n                <c8y-static-assets-file-picker\n                  name=\"navigator-platform-logo\"\n                  [supportedFileExtensions]=\"imageFileExtensions\"\n                  [isCSSURL]=\"true\"\n                  [size]=\"150\"\n                  formControlName=\"navigator-platform-logo\"\n                ></c8y-static-assets-file-picker>\n                <c8y-messages [helpMessage]=\"'Supported files: *.png, *.svg, *.jpg' | translate\"></c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"navigator-platform-logo-height\"\n                  for=\"navigator-platform-logo-height\"\n                  translate\n                >\n                  Navigator logo height\n                </label>\n                <input\n                  class=\"form-control\"\n                  id=\"navigator-platform-logo-height\"\n                  placeholder=\"{{ 'e.g. {{ example }}' | translate: { example: '50' } }}\"\n                  name=\"navigator-platform-logo-height\"\n                  type=\"number\"\n                  [min]=\"1\"\n                  formControlName=\"navigator-platform-logo-height\"\n                />\n                <c8y-messages [helpMessage]=\"'Value is applied in px' | translate\"></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n          <div class=\"col-md-6\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend translate>Login image</legend>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"login-platform-animation-img\"\n                  translate\n                >\n                  Login image file\n                </label>\n                <c8y-static-assets-file-picker\n                  name=\"login-platform-animation-img\"\n                  [supportedFileExtensions]=\"imageFileExtensions\"\n                  [isCSSURL]=\"false\"\n                  [size]=\"150\"\n                  formControlName=\"login-platform-animation-img\"\n                ></c8y-static-assets-file-picker>\n                <c8y-messages [helpMessage]=\"'Supported files: *.png, *.svg, *.jpg' | translate\"></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!--  Brand colors -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n        >\n          {{ formStructure.brandColors.label | translate}}\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div class=\"row\">\n          <div class=\"col-md-4\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend>{{ formStructure.brandColors.brandColors.label | translate}}</legend>\n              <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of formStructure.brandColors.brandColors.colors\">\n                <label\n                  [title]=\"color.formControlName\"\n                  [for]=\"color.formControlName\"\n                >\n                  {{ color.label | translate }}\n                </label>\n                <c8y-color-input\n                  [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                  [formControlName]=\"color.formControlName\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n          <div class=\"col-md-8\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend>{{ formStructure.brandColors.shades.label | translate }}</legend>\n              <div class=\"row\">\n                <div class=\"col-md-6\" *ngFor=\"let colorColumn of formStructure.brandColors.shades.colorColumn\">\n                  <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of colorColumn\">\n                    <label\n                      [title]=\"color.formControlName\"\n                      [for]=\"color.formControlName\"\n                    >\n                      {{ color.label | translate }}\n                    </label>\n                    <c8y-color-input\n                      [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                      [formControlName]=\"color.formControlName\"\n                    ></c8y-color-input>\n                    <c8y-messages></c8y-messages>\n                  </c8y-form-group>\n                </div>\n              </div>\n              <button\n                class=\"btn btn-default btn-sm\"\n                type=\"button\"\n                data-cy=\"branding-reset-shades-button\"\n                (click)=\"regenerateShadesBasedOnPrimaryColor()\"\n                [disabled]=\"!(resetShadesButtonEnabled$ | async)\"\n              >\n                <i [c8yIcon]=\"'reset'\"></i>\n                <span translate>Reset shades</span>\n              </button>\n            </fieldset>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Status colors -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n        >\n          {{ formStructure.statusColors.label | translate }}\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div class=\"row\">\n          <div class=\"col-md-6\" *ngFor=\"let subCategory of formStructure.statusColors.subCategories\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend>{{ subCategory.label | translate }}</legend>\n              <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of subCategory.colors\">\n                <label\n                  [title]=\"color.formControlName\"\n                  [for]=\"color.formControlName\"\n                >\n                  {{ color.label | translate }}\n                </label>\n                <c8y-color-input\n                  [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                  [formControlName]=\"color.formControlName\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Generic -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n          translate\n        >\n          Generic\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend translate>Generic colors</legend>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"body-background-color\"\n                  for=\"body-background-color\"\n                  translate\n                >\n                  Body background color\n                </label>\n                <c8y-color-input\n                  name=\"body-background-color\"\n                  formControlName=\"body-background-color\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"text-color\"\n                  for=\"text-color\"\n                  translate\n                >\n                  Text color\n                </label>\n                <c8y-color-input\n                  name=\"text-color\"\n                  formControlName=\"text-color\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"text-muted\"\n                  for=\"text-muted\"\n                  translate\n                >\n                  Text muted color\n                </label>\n                <c8y-color-input\n                  name=\"text-muted\"\n                  formControlName=\"text-muted\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n          <div class=\"col-md-6\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend translate>Interactive</legend>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"link-color\"\n                  for=\"link-color\"\n                  translate\n                >\n                  Link color\n                </label>\n                <c8y-color-input\n                  name=\"link-color\"\n                  formControlName=\"link-color\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"link-hover-color\"\n                  for=\"link-hover-color\"\n                  translate\n                >\n                  Link hover color\n                </label>\n                <c8y-color-input\n                  name=\"link-hover-color\"\n                  formControlName=\"link-hover-color\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"btn-border-radius-base\"\n                  for=\"btn-border-radius-base\"\n                  translate\n                >\n                  Button border-radius\n                </label>\n                <input\n                  class=\"form-control\"\n                  placeholder=\"{{ 'e.g. 4' | translate }}\"\n                  name=\"btn-border-radius-base\"\n                  type=\"number\"\n                  formControlName=\"btn-border-radius-base\"\n                />\n                <c8y-messages [helpMessage]=\"'Value is applied in px' | translate\"></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Action bar -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n        >\n          {{ formStructure.actionBar.label | translate }}\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <fieldset class=\"c8y-fieldset p-24\" *ngFor=\"let colorColumn of formStructure.actionBar.colorColumns\">\n          <legend>{{ colorColumn.label | translate }}</legend>\n          <div class=\"row\">\n            <div class=\"col-md-6\" *ngFor=\"let subColorColumn of colorColumn.colorColumns\">\n              <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of subColorColumn\">\n                <label\n                  [title]=\"color.formControlName\"\n                  [for]=\"color.formControlName\"\n                >\n                  {{ color.label | translate }}\n                </label>\n                <c8y-color-input\n                  [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                  [formControlName]=\"color.formControlName\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n  </div>\n  <!-- Main header -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n        >\n          {{ formStructure.mainHeader.label | translate }}\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <fieldset class=\"c8y-fieldset p-24\" *ngFor=\"let colorColumn of formStructure.mainHeader.colorColumns\">\n          <legend>{{ colorColumn.label | translate }}</legend>\n          <div class=\"row\">\n            <div class=\"col-md-6\" *ngFor=\"let subColorColumn of colorColumn.colorColumns\">\n              <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of subColorColumn\">\n                <label\n                  [title]=\"color.formControlName\"\n                  [for]=\"color.formControlName\"\n                >\n                  {{ color.label | translate }}\n                </label>\n                <c8y-color-input\n                  [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                  [formControlName]=\"color.formControlName\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n  </div>\n  <!-- Navigator -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n        >\n          {{ formStructure.navigator.label }}\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div class=\"row\">\n          <div class=\"col-md-4\" *ngFor=\"let colorColumn of formStructure.navigator.colorColumns\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend>{{ colorColumn.label | translate }}</legend>\n              <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of colorColumn.colors\">\n                <label\n                  [title]=\"color.formControlName\"\n                  [for]=\"color.formControlName\"\n                >\n                  {{ color.label | translate }}\n                </label>\n                <c8y-color-input\n                  [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                  [formControlName]=\"color.formControlName\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Right drawer -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n        >\n          {{ formStructure.rightDrawer.label | translate }}\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div class=\"row\">\n          <div class=\"col-md-6\" *ngFor=\"let colorColumn of formStructure.rightDrawer.colorColumns\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend>{{ colorColumn.label | translate }}</legend>\n              <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of colorColumn.colors\">\n                <label\n                  [title]=\"color.formControlName\"\n                  [for]=\"color.formControlName\"\n                >\n                  {{ color.label | translate }}\n                </label>\n                <c8y-color-input\n                  [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                  [formControlName]=\"color.formControlName\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.MinValidationDirective, selector: "[min]", inputs: ["min"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "component", type: i3.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i3.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i3.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i3.HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.ColorInputComponent, selector: "c8y-color-input" }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: StaticAssetsFilePickerComponent, selector: "c8y-static-assets-file-picker", inputs: ["isCSSURL", "staticAssetType", "supportedFileExtensions", "layout", "size"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BrandingThemeFormComponent, deps: [{ token: i2$1.ActivatedRoute }, { token: i2.FormBuilder }, { token: i3.FilesService }, { token: i1$2.BrandingShadesService }, { token: i3.ThemeSwitcherService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: BrandingThemeFormComponent, isStandalone: true, selector: "c8y-branding-theme-form", host: { classAttribute: "d-contents" }, ngImport: i0, template: "<c8y-help [src]=\"'/docs/enterprise-tenant/customization/#light-dark-theme-tab'\"></c8y-help>\n\n<div\n  class=\"inner-scroll\"\n  [formGroup]=\"formGroup\"\n>\n  <!--   Logos -->\n  <div class=\"card-block\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n          translate\n        >\n          Logos\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend translate>Brand logo</legend>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"brand-logo-img\"\n                  translate\n                >\n                  Brand logo file\n                </label>\n                <c8y-static-assets-file-picker\n                  name=\"brand-logo-img\"\n                  [supportedFileExtensions]=\"imageFileExtensions\"\n                  [isCSSURL]=\"true\"\n                  [size]=\"150\"\n                  formControlName=\"brand-logo-img\"\n                ></c8y-static-assets-file-picker>\n                <c8y-messages [helpMessage]=\"'Supported files: *.png, *.svg, *.jpg' | translate\"></c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"brand-logo-img-height\"\n                  for=\"brand-logo-img-height\"\n                  translate\n                >\n                  Brand logo height\n                </label>\n                <input\n                  class=\"form-control\"\n                  id=\"brand-logo-img-height\"\n                  placeholder=\"{{ 'e.g. {{ example }}' | translate: { example: '50' } }}\"\n                  name=\"brand-logo-img-height\"\n                  type=\"number\"\n                  formControlName=\"brand-logo-img-height\"\n                />\n                <c8y-messages [helpMessage]=\"'Value is applied in px' | translate\"></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n          <div class=\"col-md-6\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend translate>Navigator logo</legend>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"navigator-platform-logo\"\n                  translate\n                >\n                  Navigator logo file\n                </label>\n                <c8y-static-assets-file-picker\n                  name=\"navigator-platform-logo\"\n                  [supportedFileExtensions]=\"imageFileExtensions\"\n                  [isCSSURL]=\"true\"\n                  [size]=\"150\"\n                  formControlName=\"navigator-platform-logo\"\n                ></c8y-static-assets-file-picker>\n                <c8y-messages [helpMessage]=\"'Supported files: *.png, *.svg, *.jpg' | translate\"></c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"navigator-platform-logo-height\"\n                  for=\"navigator-platform-logo-height\"\n                  translate\n                >\n                  Navigator logo height\n                </label>\n                <input\n                  class=\"form-control\"\n                  id=\"navigator-platform-logo-height\"\n                  placeholder=\"{{ 'e.g. {{ example }}' | translate: { example: '50' } }}\"\n                  name=\"navigator-platform-logo-height\"\n                  type=\"number\"\n                  [min]=\"1\"\n                  formControlName=\"navigator-platform-logo-height\"\n                />\n                <c8y-messages [helpMessage]=\"'Value is applied in px' | translate\"></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n          <div class=\"col-md-6\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend translate>Login image</legend>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"login-platform-animation-img\"\n                  translate\n                >\n                  Login image file\n                </label>\n                <c8y-static-assets-file-picker\n                  name=\"login-platform-animation-img\"\n                  [supportedFileExtensions]=\"imageFileExtensions\"\n                  [isCSSURL]=\"false\"\n                  [size]=\"150\"\n                  formControlName=\"login-platform-animation-img\"\n                ></c8y-static-assets-file-picker>\n                <c8y-messages [helpMessage]=\"'Supported files: *.png, *.svg, *.jpg' | translate\"></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!--  Brand colors -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n        >\n          {{ formStructure.brandColors.label | translate}}\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div class=\"row\">\n          <div class=\"col-md-4\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend>{{ formStructure.brandColors.brandColors.label | translate}}</legend>\n              <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of formStructure.brandColors.brandColors.colors\">\n                <label\n                  [title]=\"color.formControlName\"\n                  [for]=\"color.formControlName\"\n                >\n                  {{ color.label | translate }}\n                </label>\n                <c8y-color-input\n                  [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                  [formControlName]=\"color.formControlName\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n          <div class=\"col-md-8\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend>{{ formStructure.brandColors.shades.label | translate }}</legend>\n              <div class=\"row\">\n                <div class=\"col-md-6\" *ngFor=\"let colorColumn of formStructure.brandColors.shades.colorColumn\">\n                  <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of colorColumn\">\n                    <label\n                      [title]=\"color.formControlName\"\n                      [for]=\"color.formControlName\"\n                    >\n                      {{ color.label | translate }}\n                    </label>\n                    <c8y-color-input\n                      [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                      [formControlName]=\"color.formControlName\"\n                    ></c8y-color-input>\n                    <c8y-messages></c8y-messages>\n                  </c8y-form-group>\n                </div>\n              </div>\n              <button\n                class=\"btn btn-default btn-sm\"\n                type=\"button\"\n                data-cy=\"branding-reset-shades-button\"\n                (click)=\"regenerateShadesBasedOnPrimaryColor()\"\n                [disabled]=\"!(resetShadesButtonEnabled$ | async)\"\n              >\n                <i [c8yIcon]=\"'reset'\"></i>\n                <span translate>Reset shades</span>\n              </button>\n            </fieldset>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Status colors -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n        >\n          {{ formStructure.statusColors.label | translate }}\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div class=\"row\">\n          <div class=\"col-md-6\" *ngFor=\"let subCategory of formStructure.statusColors.subCategories\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend>{{ subCategory.label | translate }}</legend>\n              <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of subCategory.colors\">\n                <label\n                  [title]=\"color.formControlName\"\n                  [for]=\"color.formControlName\"\n                >\n                  {{ color.label | translate }}\n                </label>\n                <c8y-color-input\n                  [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                  [formControlName]=\"color.formControlName\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Generic -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n          translate\n        >\n          Generic\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend translate>Generic colors</legend>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"body-background-color\"\n                  for=\"body-background-color\"\n                  translate\n                >\n                  Body background color\n                </label>\n                <c8y-color-input\n                  name=\"body-background-color\"\n                  formControlName=\"body-background-color\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"text-color\"\n                  for=\"text-color\"\n                  translate\n                >\n                  Text color\n                </label>\n                <c8y-color-input\n                  name=\"text-color\"\n                  formControlName=\"text-color\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"text-muted\"\n                  for=\"text-muted\"\n                  translate\n                >\n                  Text muted color\n                </label>\n                <c8y-color-input\n                  name=\"text-muted\"\n                  formControlName=\"text-muted\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n          <div class=\"col-md-6\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend translate>Interactive</legend>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"link-color\"\n                  for=\"link-color\"\n                  translate\n                >\n                  Link color\n                </label>\n                <c8y-color-input\n                  name=\"link-color\"\n                  formControlName=\"link-color\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"link-hover-color\"\n                  for=\"link-hover-color\"\n                  translate\n                >\n                  Link hover color\n                </label>\n                <c8y-color-input\n                  name=\"link-hover-color\"\n                  formControlName=\"link-hover-color\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"btn-border-radius-base\"\n                  for=\"btn-border-radius-base\"\n                  translate\n                >\n                  Button border-radius\n                </label>\n                <input\n                  class=\"form-control\"\n                  placeholder=\"{{ 'e.g. 4' | translate }}\"\n                  name=\"btn-border-radius-base\"\n                  type=\"number\"\n                  formControlName=\"btn-border-radius-base\"\n                />\n                <c8y-messages [helpMessage]=\"'Value is applied in px' | translate\"></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Action bar -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n        >\n          {{ formStructure.actionBar.label | translate }}\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <fieldset class=\"c8y-fieldset p-24\" *ngFor=\"let colorColumn of formStructure.actionBar.colorColumns\">\n          <legend>{{ colorColumn.label | translate }}</legend>\n          <div class=\"row\">\n            <div class=\"col-md-6\" *ngFor=\"let subColorColumn of colorColumn.colorColumns\">\n              <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of subColorColumn\">\n                <label\n                  [title]=\"color.formControlName\"\n                  [for]=\"color.formControlName\"\n                >\n                  {{ color.label | translate }}\n                </label>\n                <c8y-color-input\n                  [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                  [formControlName]=\"color.formControlName\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n  </div>\n  <!-- Main header -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n        >\n          {{ formStructure.mainHeader.label | translate }}\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <fieldset class=\"c8y-fieldset p-24\" *ngFor=\"let colorColumn of formStructure.mainHeader.colorColumns\">\n          <legend>{{ colorColumn.label | translate }}</legend>\n          <div class=\"row\">\n            <div class=\"col-md-6\" *ngFor=\"let subColorColumn of colorColumn.colorColumns\">\n              <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of subColorColumn\">\n                <label\n                  [title]=\"color.formControlName\"\n                  [for]=\"color.formControlName\"\n                >\n                  {{ color.label | translate }}\n                </label>\n                <c8y-color-input\n                  [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                  [formControlName]=\"color.formControlName\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n  </div>\n  <!-- Navigator -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n        >\n          {{ formStructure.navigator.label }}\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div class=\"row\">\n          <div class=\"col-md-4\" *ngFor=\"let colorColumn of formStructure.navigator.colorColumns\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend>{{ colorColumn.label | translate }}</legend>\n              <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of colorColumn.colors\">\n                <label\n                  [title]=\"color.formControlName\"\n                  [for]=\"color.formControlName\"\n                >\n                  {{ color.label | translate }}\n                </label>\n                <c8y-color-input\n                  [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                  [formControlName]=\"color.formControlName\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Right drawer -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n        >\n          {{ formStructure.rightDrawer.label | translate }}\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div class=\"row\">\n          <div class=\"col-md-6\" *ngFor=\"let colorColumn of formStructure.rightDrawer.colorColumns\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend>{{ colorColumn.label | translate }}</legend>\n              <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of colorColumn.colors\">\n                <label\n                  [title]=\"color.formControlName\"\n                  [for]=\"color.formControlName\"\n                >\n                  {{ color.label | translate }}\n                </label>\n                <c8y-color-input\n                  [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                  [formControlName]=\"color.formControlName\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.MinValidationDirective, selector: "[min]", inputs: ["min"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "component", type: i3.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i3.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i3.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i3.HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.ColorInputComponent, selector: "c8y-color-input" }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: StaticAssetsFilePickerComponent, selector: "c8y-static-assets-file-picker", inputs: ["isCSSURL", "staticAssetType", "supportedFileExtensions", "layout", "size"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BrandingThemeFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BrandingThemeFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-branding-theme-form', standalone: true, host: { class: 'd-contents' }, imports: [CoreModule, FormsModule, StaticAssetsFilePickerComponent, ColorInputComponent], template: "<c8y-help [src]=\"'/docs/enterprise-tenant/customization/#light-dark-theme-tab'\"></c8y-help>\n\n<div\n  class=\"inner-scroll\"\n  [formGroup]=\"formGroup\"\n>\n  <!--   Logos -->\n  <div class=\"card-block\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n          translate\n        >\n          Logos\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend translate>Brand logo</legend>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"brand-logo-img\"\n                  translate\n                >\n                  Brand logo file\n                </label>\n                <c8y-static-assets-file-picker\n                  name=\"brand-logo-img\"\n                  [supportedFileExtensions]=\"imageFileExtensions\"\n                  [isCSSURL]=\"true\"\n                  [size]=\"150\"\n                  formControlName=\"brand-logo-img\"\n                ></c8y-static-assets-file-picker>\n                <c8y-messages [helpMessage]=\"'Supported files: *.png, *.svg, *.jpg' | translate\"></c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"brand-logo-img-height\"\n                  for=\"brand-logo-img-height\"\n                  translate\n                >\n                  Brand logo height\n                </label>\n                <input\n                  class=\"form-control\"\n                  id=\"brand-logo-img-height\"\n                  placeholder=\"{{ 'e.g. {{ example }}' | translate: { example: '50' } }}\"\n                  name=\"brand-logo-img-height\"\n                  type=\"number\"\n                  formControlName=\"brand-logo-img-height\"\n                />\n                <c8y-messages [helpMessage]=\"'Value is applied in px' | translate\"></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n          <div class=\"col-md-6\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend translate>Navigator logo</legend>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"navigator-platform-logo\"\n                  translate\n                >\n                  Navigator logo file\n                </label>\n                <c8y-static-assets-file-picker\n                  name=\"navigator-platform-logo\"\n                  [supportedFileExtensions]=\"imageFileExtensions\"\n                  [isCSSURL]=\"true\"\n                  [size]=\"150\"\n                  formControlName=\"navigator-platform-logo\"\n                ></c8y-static-assets-file-picker>\n                <c8y-messages [helpMessage]=\"'Supported files: *.png, *.svg, *.jpg' | translate\"></c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"navigator-platform-logo-height\"\n                  for=\"navigator-platform-logo-height\"\n                  translate\n                >\n                  Navigator logo height\n                </label>\n                <input\n                  class=\"form-control\"\n                  id=\"navigator-platform-logo-height\"\n                  placeholder=\"{{ 'e.g. {{ example }}' | translate: { example: '50' } }}\"\n                  name=\"navigator-platform-logo-height\"\n                  type=\"number\"\n                  [min]=\"1\"\n                  formControlName=\"navigator-platform-logo-height\"\n                />\n                <c8y-messages [helpMessage]=\"'Value is applied in px' | translate\"></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n          <div class=\"col-md-6\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend translate>Login image</legend>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"login-platform-animation-img\"\n                  translate\n                >\n                  Login image file\n                </label>\n                <c8y-static-assets-file-picker\n                  name=\"login-platform-animation-img\"\n                  [supportedFileExtensions]=\"imageFileExtensions\"\n                  [isCSSURL]=\"false\"\n                  [size]=\"150\"\n                  formControlName=\"login-platform-animation-img\"\n                ></c8y-static-assets-file-picker>\n                <c8y-messages [helpMessage]=\"'Supported files: *.png, *.svg, *.jpg' | translate\"></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!--  Brand colors -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n        >\n          {{ formStructure.brandColors.label | translate}}\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div class=\"row\">\n          <div class=\"col-md-4\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend>{{ formStructure.brandColors.brandColors.label | translate}}</legend>\n              <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of formStructure.brandColors.brandColors.colors\">\n                <label\n                  [title]=\"color.formControlName\"\n                  [for]=\"color.formControlName\"\n                >\n                  {{ color.label | translate }}\n                </label>\n                <c8y-color-input\n                  [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                  [formControlName]=\"color.formControlName\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n          <div class=\"col-md-8\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend>{{ formStructure.brandColors.shades.label | translate }}</legend>\n              <div class=\"row\">\n                <div class=\"col-md-6\" *ngFor=\"let colorColumn of formStructure.brandColors.shades.colorColumn\">\n                  <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of colorColumn\">\n                    <label\n                      [title]=\"color.formControlName\"\n                      [for]=\"color.formControlName\"\n                    >\n                      {{ color.label | translate }}\n                    </label>\n                    <c8y-color-input\n                      [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                      [formControlName]=\"color.formControlName\"\n                    ></c8y-color-input>\n                    <c8y-messages></c8y-messages>\n                  </c8y-form-group>\n                </div>\n              </div>\n              <button\n                class=\"btn btn-default btn-sm\"\n                type=\"button\"\n                data-cy=\"branding-reset-shades-button\"\n                (click)=\"regenerateShadesBasedOnPrimaryColor()\"\n                [disabled]=\"!(resetShadesButtonEnabled$ | async)\"\n              >\n                <i [c8yIcon]=\"'reset'\"></i>\n                <span translate>Reset shades</span>\n              </button>\n            </fieldset>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Status colors -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n        >\n          {{ formStructure.statusColors.label | translate }}\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div class=\"row\">\n          <div class=\"col-md-6\" *ngFor=\"let subCategory of formStructure.statusColors.subCategories\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend>{{ subCategory.label | translate }}</legend>\n              <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of subCategory.colors\">\n                <label\n                  [title]=\"color.formControlName\"\n                  [for]=\"color.formControlName\"\n                >\n                  {{ color.label | translate }}\n                </label>\n                <c8y-color-input\n                  [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                  [formControlName]=\"color.formControlName\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Generic -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n          translate\n        >\n          Generic\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend translate>Generic colors</legend>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"body-background-color\"\n                  for=\"body-background-color\"\n                  translate\n                >\n                  Body background color\n                </label>\n                <c8y-color-input\n                  name=\"body-background-color\"\n                  formControlName=\"body-background-color\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"text-color\"\n                  for=\"text-color\"\n                  translate\n                >\n                  Text color\n                </label>\n                <c8y-color-input\n                  name=\"text-color\"\n                  formControlName=\"text-color\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"text-muted\"\n                  for=\"text-muted\"\n                  translate\n                >\n                  Text muted color\n                </label>\n                <c8y-color-input\n                  name=\"text-muted\"\n                  formControlName=\"text-muted\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n          <div class=\"col-md-6\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend translate>Interactive</legend>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"link-color\"\n                  for=\"link-color\"\n                  translate\n                >\n                  Link color\n                </label>\n                <c8y-color-input\n                  name=\"link-color\"\n                  formControlName=\"link-color\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"link-hover-color\"\n                  for=\"link-hover-color\"\n                  translate\n                >\n                  Link hover color\n                </label>\n                <c8y-color-input\n                  name=\"link-hover-color\"\n                  formControlName=\"link-hover-color\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"btn-border-radius-base\"\n                  for=\"btn-border-radius-base\"\n                  translate\n                >\n                  Button border-radius\n                </label>\n                <input\n                  class=\"form-control\"\n                  placeholder=\"{{ 'e.g. 4' | translate }}\"\n                  name=\"btn-border-radius-base\"\n                  type=\"number\"\n                  formControlName=\"btn-border-radius-base\"\n                />\n                <c8y-messages [helpMessage]=\"'Value is applied in px' | translate\"></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Action bar -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n        >\n          {{ formStructure.actionBar.label | translate }}\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <fieldset class=\"c8y-fieldset p-24\" *ngFor=\"let colorColumn of formStructure.actionBar.colorColumns\">\n          <legend>{{ colorColumn.label | translate }}</legend>\n          <div class=\"row\">\n            <div class=\"col-md-6\" *ngFor=\"let subColorColumn of colorColumn.colorColumns\">\n              <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of subColorColumn\">\n                <label\n                  [title]=\"color.formControlName\"\n                  [for]=\"color.formControlName\"\n                >\n                  {{ color.label | translate }}\n                </label>\n                <c8y-color-input\n                  [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                  [formControlName]=\"color.formControlName\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n  </div>\n  <!-- Main header -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n        >\n          {{ formStructure.mainHeader.label | translate }}\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <fieldset class=\"c8y-fieldset p-24\" *ngFor=\"let colorColumn of formStructure.mainHeader.colorColumns\">\n          <legend>{{ colorColumn.label | translate }}</legend>\n          <div class=\"row\">\n            <div class=\"col-md-6\" *ngFor=\"let subColorColumn of colorColumn.colorColumns\">\n              <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of subColorColumn\">\n                <label\n                  [title]=\"color.formControlName\"\n                  [for]=\"color.formControlName\"\n                >\n                  {{ color.label | translate }}\n                </label>\n                <c8y-color-input\n                  [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                  [formControlName]=\"color.formControlName\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n  </div>\n  <!-- Navigator -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n        >\n          {{ formStructure.navigator.label }}\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div class=\"row\">\n          <div class=\"col-md-4\" *ngFor=\"let colorColumn of formStructure.navigator.colorColumns\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend>{{ colorColumn.label | translate }}</legend>\n              <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of colorColumn.colors\">\n                <label\n                  [title]=\"color.formControlName\"\n                  [for]=\"color.formControlName\"\n                >\n                  {{ color.label | translate }}\n                </label>\n                <c8y-color-input\n                  [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                  [formControlName]=\"color.formControlName\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Right drawer -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n        >\n          {{ formStructure.rightDrawer.label | translate }}\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div class=\"row\">\n          <div class=\"col-md-6\" *ngFor=\"let colorColumn of formStructure.rightDrawer.colorColumns\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend>{{ colorColumn.label | translate }}</legend>\n              <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of colorColumn.colors\">\n                <label\n                  [title]=\"color.formControlName\"\n                  [for]=\"color.formControlName\"\n                >\n                  {{ color.label | translate }}\n                </label>\n                <c8y-color-input\n                  [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                  [formControlName]=\"color.formControlName\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i2$1.ActivatedRoute }, { type: i2.FormBuilder }, { type: i3.FilesService }, { type: i1$2.BrandingShadesService }, { type: i3.ThemeSwitcherService }] });
@@ -1271,10 +1271,10 @@ class EditBrandingRouterOutletComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: EditBrandingRouterOutletComponent, deps: [{ token: i2$1.ActivatedRoute }, { token: i1$2.StoreBrandingService }, { token: i2$1.Router }, { token: i3.AlertService }, { token: i1$2.ApplyBrandingLocallyService }, { token: i3.AppStateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: EditBrandingRouterOutletComponent, isStandalone: true, selector: "c8y-edit-branding-router-outlet", ngImport: i0, template: "<c8y-title>{{ brandingName$ | async }}</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'cog'\"\n    [label]=\"'Settings' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'palette'\"\n    [label]=\"'Branding' | translate\"\n    [path]=\"'/branding-editor'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'cog'\"\n    [label]=\"brandingName$ | async\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<div class=\"card card--fullpage content-fullpage\">\n  <div class=\"card-header separator\">\n    <div class=\"card-title\">{{ brandingName$ | async }} \u2014 {{ tabName$ | async | translate }}</div>\n  </div>\n  <router-outlet\n    class=\"d-contents\"\n    (activate)=\"routeActivated($event)\"\n  ></router-outlet>\n\n  <div class=\"card-footer separator\">\n    <!-- footer content -->\n    <button\n      class=\"btn btn-default\"\n      data-cy=\"branding-cancel\"\n      (click)=\"cancel()\"\n      translate\n    >\n      Cancel\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      data-cy=\"branding-save\"\n      [disabled]=\"formControl.invalid\"\n      (click)=\"saveBranding()\"\n      translate\n    >\n      Save\n    </button>\n    <button\n      class=\"btn btn-default\"\n      data-cy=\"branding-save-as\"\n      [disabled]=\"formControl.invalid\"\n      (click)=\"openPreview()\"\n      translate\n    >\n      Open preview\n    </button>\n    <button\n      class=\"btn btn-default\"\n      data-cy=\"branding-set-as-latest\"\n      (click)=\"markAsActive()\"\n      [disabled]=\"isGlobalBranding$ | async\"\n      translate\n    >\n      Set as global\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: CoreModule }, { kind: "component", type: i3.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i3.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: i3.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EditBrandingRouterOutletComponent, deps: [{ token: i2$1.ActivatedRoute }, { token: i1$2.StoreBrandingService }, { token: i2$1.Router }, { token: i3.AlertService }, { token: i1$2.ApplyBrandingLocallyService }, { token: i3.AppStateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: EditBrandingRouterOutletComponent, isStandalone: true, selector: "c8y-edit-branding-router-outlet", ngImport: i0, template: "<c8y-title>{{ brandingName$ | async }}</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'cog'\"\n    [label]=\"'Settings' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'palette'\"\n    [label]=\"'Branding' | translate\"\n    [path]=\"'/branding-editor'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'cog'\"\n    [label]=\"brandingName$ | async\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<div class=\"card card--fullpage content-fullpage\">\n  <div class=\"card-header separator\">\n    <div class=\"card-title\">{{ brandingName$ | async }} \u2014 {{ tabName$ | async | translate }}</div>\n  </div>\n  <router-outlet\n    class=\"d-contents\"\n    (activate)=\"routeActivated($event)\"\n  ></router-outlet>\n\n  <div class=\"card-footer separator\">\n    <!-- footer content -->\n    <button\n      class=\"btn btn-default\"\n      data-cy=\"branding-cancel\"\n      (click)=\"cancel()\"\n      translate\n    >\n      Cancel\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      data-cy=\"branding-save\"\n      [disabled]=\"formControl.invalid\"\n      (click)=\"saveBranding()\"\n      translate\n    >\n      Save\n    </button>\n    <button\n      class=\"btn btn-default\"\n      data-cy=\"branding-save-as\"\n      [disabled]=\"formControl.invalid\"\n      (click)=\"openPreview()\"\n      translate\n    >\n      Open preview\n    </button>\n    <button\n      class=\"btn btn-default\"\n      data-cy=\"branding-set-as-latest\"\n      (click)=\"markAsActive()\"\n      [disabled]=\"isGlobalBranding$ | async\"\n      translate\n    >\n      Set as global\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: CoreModule }, { kind: "component", type: i3.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i3.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: i3.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: EditBrandingRouterOutletComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EditBrandingRouterOutletComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-edit-branding-router-outlet', standalone: true, imports: [RouterOutlet, CoreModule], template: "<c8y-title>{{ brandingName$ | async }}</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'cog'\"\n    [label]=\"'Settings' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'palette'\"\n    [label]=\"'Branding' | translate\"\n    [path]=\"'/branding-editor'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'cog'\"\n    [label]=\"brandingName$ | async\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<div class=\"card card--fullpage content-fullpage\">\n  <div class=\"card-header separator\">\n    <div class=\"card-title\">{{ brandingName$ | async }} \u2014 {{ tabName$ | async | translate }}</div>\n  </div>\n  <router-outlet\n    class=\"d-contents\"\n    (activate)=\"routeActivated($event)\"\n  ></router-outlet>\n\n  <div class=\"card-footer separator\">\n    <!-- footer content -->\n    <button\n      class=\"btn btn-default\"\n      data-cy=\"branding-cancel\"\n      (click)=\"cancel()\"\n      translate\n    >\n      Cancel\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      data-cy=\"branding-save\"\n      [disabled]=\"formControl.invalid\"\n      (click)=\"saveBranding()\"\n      translate\n    >\n      Save\n    </button>\n    <button\n      class=\"btn btn-default\"\n      data-cy=\"branding-save-as\"\n      [disabled]=\"formControl.invalid\"\n      (click)=\"openPreview()\"\n      translate\n    >\n      Open preview\n    </button>\n    <button\n      class=\"btn btn-default\"\n      data-cy=\"branding-set-as-latest\"\n      (click)=\"markAsActive()\"\n      [disabled]=\"isGlobalBranding$ | async\"\n      translate\n    >\n      Set as global\n    </button>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i2$1.ActivatedRoute }, { type: i1$2.StoreBrandingService }, { type: i2$1.Router }, { type: i3.AlertService }, { type: i1$2.ApplyBrandingLocallyService }, { type: i3.AppStateService }] });
@@ -1304,10 +1304,10 @@ class BrandingAssetsComponent {
         const successMessage = this.translate.instant(gettext('Copied asset file path to clipboard. You can use it e.g. in custom CSS.'));
         this.clipboard.writeText(file.path, { success: successMessage });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BrandingAssetsComponent, deps: [{ token: i3.ClipboardService }, { token: i3.FilesService }, { token: i2$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: BrandingAssetsComponent, isStandalone: true, selector: "c8y-branding-assets", ngImport: i0, template: "<c8y-title>{{ 'Branding assets' | translate }}</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'cog'\"\n    [label]=\"'Settings' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'palette'\"\n    [label]=\"'Branding' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'files'\"\n    [label]=\"'Branding assets' | translate\"\n    [path]=\"'/branding-editor/assets'\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item [placement]=\"'left'\">\n  <div class=\"c8y-select-wrapper\">\n    <select\n      class=\"form-control\"\n      [(ngModel)]=\"supportedFileExtensions\"\n    >\n      @for (filterOption of filterOptions; track $index) {\n        <option [ngValue]=\"filterOption.value\">\n          {{ filterOption.label | translate }}\n        </option>\n      }\n    </select>\n  </div>\n</c8y-action-bar-item>\n\n<div class=\"card content-fullpage inner-scroll\">\n  <c8y-static-assets-file-list\n    [supportedFileExtensions]=\"supportedFileExtensions\"\n    (itemSelected)=\"onItemSelected($event)\"\n  ></c8y-static-assets-file-list>\n</div>\n", dependencies: [{ kind: "component", type: StaticAssetsFileListComponent, selector: "c8y-static-assets-file-list", inputs: ["inModalView", "assetType", "supportedFileExtensions", "layout"], outputs: ["itemSelected"] }, { kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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.16", ngImport: i0, type: BrandingAssetsComponent, deps: [{ token: i3.ClipboardService }, { token: i3.FilesService }, { token: i2$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BrandingAssetsComponent, isStandalone: true, selector: "c8y-branding-assets", ngImport: i0, template: "<c8y-title>{{ 'Branding assets' | translate }}</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'cog'\"\n    [label]=\"'Settings' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'palette'\"\n    [label]=\"'Branding' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'files'\"\n    [label]=\"'Branding assets' | translate\"\n    [path]=\"'/branding-editor/assets'\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item [placement]=\"'left'\">\n  <div class=\"c8y-select-wrapper\">\n    <select\n      class=\"form-control\"\n      [(ngModel)]=\"supportedFileExtensions\"\n    >\n      @for (filterOption of filterOptions; track $index) {\n        <option [ngValue]=\"filterOption.value\">\n          {{ filterOption.label | translate }}\n        </option>\n      }\n    </select>\n  </div>\n</c8y-action-bar-item>\n\n<div class=\"card content-fullpage inner-scroll\">\n  <c8y-static-assets-file-list\n    [supportedFileExtensions]=\"supportedFileExtensions\"\n    (itemSelected)=\"onItemSelected($event)\"\n  ></c8y-static-assets-file-list>\n</div>\n", dependencies: [{ kind: "component", type: StaticAssetsFileListComponent, selector: "c8y-static-assets-file-list", inputs: ["inModalView", "assetType", "supportedFileExtensions", "layout"], outputs: ["itemSelected"] }, { kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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.15", ngImport: i0, type: BrandingAssetsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BrandingAssetsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-branding-assets', standalone: true, imports: [
                         StaticAssetsFileListComponent,