@c8y/ngx-components 1022.33.0 → 1022.34.0

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

@@ -7,7 +7,8 @@ import { map, startWith, switchMap, shareReplay, distinctUntilChanged, filter, t
 import * as i2$1 from '@angular/router';
 import { RouterLink, RouterOutlet } from '@angular/router';
 import * as i3 from '@c8y/ngx-components';
-import { CoreModule, HumanizeAppNamePipe, ModalComponent, C8yTranslatePipe, BuiltInActionType, gettext as gettext$1, Status, DataGridModule, GENERIC_FILE_TYPE, ColorInputComponent } from '@c8y/ngx-components';
+import { ModalComponent, C8yTranslatePipe, C8yTranslateDirective, ListItemComponent, ListItemIconComponent, ListItemCheckboxComponent, AppIconComponent, ListItemBodyComponent, HumanizeAppNamePipe, CoreModule, BuiltInActionType, Status, BreadcrumbComponent, BreadcrumbItemComponent, TitleComponent, HelpComponent, ActionBarItemComponent, IconDirective, EmptyStateComponent, LoadingComponent, DataGridComponent, gettext as gettext$1, GENERIC_FILE_TYPE, ColorInputComponent } from '@c8y/ngx-components';
+import { gettext } from '@c8y/ngx-components/gettext';
 import * as i1 from '@c8y/client';
 import { ApplicationType } from '@c8y/client';
 import { saveAs } from 'file-saver';
@@ -15,18 +16,19 @@ import * as i3$1 from '@c8y/ngx-components/static-assets/data';
 import * as i1$3 from 'ngx-bootstrap/modal';
 import * as i2 from '@angular/forms';
 import { ReactiveFormsModule, FormsModule, FormControl } from '@angular/forms';
-import * as i4 from '@angular/common';
-import { NgIf, NgForOf, AsyncPipe } from '@angular/common';
+import * as i5 from '@angular/common';
+import { NgIf, AsyncPipe, NgForOf } from '@angular/common';
 import { uniqBy, cloneDeep } from 'lodash-es';
 import * as i1$1 from '@c8y/ngx-components/branding/shared/lazy/add-branding-modal';
-import { gettext } from '@c8y/ngx-components/gettext';
 import * as i1$4 from 'ngx-bootstrap/popover';
 import { PopoverModule } from 'ngx-bootstrap/popover';
-import * as i4$1 from 'ngx-bootstrap/collapse';
+import * as i4 from 'ngx-bootstrap/collapse';
 import { CollapseModule } from 'ngx-bootstrap/collapse';
 import { StaticAssetsFilePickerComponent } from '@c8y/ngx-components/static-assets';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { EditorComponent } from '@c8y/ngx-components/editor';
+import { StaticAssetsFileListComponent } from '@c8y/ngx-components/static-assets/modal';
+import * as i2$2 from '@ngx-translate/core';
 
 class ApplyBrandingToAppService {
     constructor(apps) {
@@ -98,11 +100,25 @@ class ApplyBrandingToAppModalComponent {
         return this.formBuilder.group(tagsFormMap);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.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: "19.2.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: "ngmodule", type: CoreModule }, { kind: "component", type: i3.AppIconComponent, selector: "c8y-app-icon", inputs: ["contextPath", "name", "app"] }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.HumanizeAppNamePipe, name: "humanizeAppName" }, { kind: "component", type: i3.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "component", type: i3.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i3.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i3.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i3.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: i3.ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.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: "pipe", type: AsyncPipe, name: "async" }, { 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: "pipe", type: C8yTranslatePipe, name: "translate" }, { 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: "pipe", type: HumanizeAppNamePipe, name: "humanizeAppName" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ApplyBrandingToAppModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-apply-branding-to-app-modal', standalone: true, imports: [NgIf, ReactiveFormsModule, CoreModule], 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" }]
+            args: [{ selector: 'c8y-apply-branding-to-app-modal', standalone: true, imports: [
+                        NgIf,
+                        AsyncPipe,
+                        ReactiveFormsModule,
+                        ModalComponent,
+                        C8yTranslatePipe,
+                        C8yTranslateDirective,
+                        ListItemComponent,
+                        ListItemIconComponent,
+                        ListItemCheckboxComponent,
+                        AppIconComponent,
+                        ListItemBodyComponent,
+                        HumanizeAppNamePipe,
+                        NgForOf
+                    ], 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" }]
         }], ctorParameters: () => [{ type: ApplyBrandingToAppService }, { type: i2.FormBuilder }], propDecorators: { currentTags: [{
                 type: Input
             }] } });
@@ -346,7 +362,7 @@ class BrandingComponent {
             {
                 type: 'preview',
                 icon: 'external-link',
-                text: gettext$1('Open preview'),
+                text: gettext('Open preview'),
                 callback: async (entry, _reload) => {
                     this.brandings.openPreviewForBranding(entry.name);
                 }
@@ -354,7 +370,7 @@ class BrandingComponent {
             {
                 type: 'duplicate',
                 icon: 'copy',
-                text: gettext$1('Duplicate'),
+                text: gettext('Duplicate'),
                 callback: async (entry, _reload) => {
                     await this.duplicateVersion(entry);
                     this.refresh();
@@ -363,7 +379,7 @@ class BrandingComponent {
             {
                 type: 'apply-to-app',
                 icon: 'form',
-                text: gettext$1('Apply to specific apps'),
+                text: gettext('Apply to specific apps'),
                 callback: async (entry, _reload) => {
                     await this.applyToApps(entry);
                     this.refresh();
@@ -372,7 +388,7 @@ class BrandingComponent {
             {
                 type: 'set-as-default',
                 icon: 'globe1',
-                text: gettext$1('Set as global'),
+                text: gettext('Set as global'),
                 showIf: (entry) => {
                     if (entry.tags?.includes('latest')) {
                         return false;
@@ -381,7 +397,7 @@ class BrandingComponent {
                 },
                 callback: async (entry, _reload) => {
                     try {
-                        await this.confirmModal.confirm(gettext$1('Set as global branding'), gettext$1('Are you sure that you want to set this variant as the global branding? By doing so, this variant will be applied to all apps that do not have a specific branding applied. Do you want to proceed?'), Status.INFO);
+                        await this.confirmModal.confirm(gettext('Set as global branding'), gettext('Are you sure that you want to set this variant as the global branding? By doing so, this variant will be applied to all apps that do not have a specific branding applied. Do you want to proceed?'), Status.INFO);
                     }
                     catch {
                         // did not confirm
@@ -401,7 +417,7 @@ class BrandingComponent {
                 },
                 callback: async (entry, _reload) => {
                     try {
-                        await this.confirmModal.confirm(gettext$1('Delete branding variant'), gettext$1('You are about to delete this branding variant. This action cannot be undone. Do you want to proceed?'), Status.DANGER);
+                        await this.confirmModal.confirm(gettext('Delete branding variant'), gettext('You are about to delete this branding variant. This action cannot be undone. Do you want to proceed?'), Status.DANGER);
                     }
                     catch {
                         // did not confirm
@@ -418,13 +434,13 @@ class BrandingComponent {
         this.columns = [
             {
                 name: 'name',
-                header: gettext$1('Name'),
+                header: gettext('Name'),
                 path: 'name',
                 filterable: true,
                 cellRendererComponent: BrandingNameCellRendererComponent
             },
             {
-                name: gettext$1('Applied to`Applications a branding applies to (table column header)`'),
+                name: gettext('Applied to`Applications a branding applies to (table column header)`'),
                 path: 'tags',
                 filterable: false,
                 cellCSSClassName: 'small',
@@ -433,13 +449,13 @@ class BrandingComponent {
             },
             {
                 name: 'owner',
-                header: gettext$1('Owner'),
+                header: gettext('Owner'),
                 path: 'owner',
                 filterable: false
             },
             {
                 name: 'lastUpdated',
-                header: gettext$1('Last updated'),
+                header: gettext('Last updated'),
                 path: 'lastUpdated',
                 filterable: false
             }
@@ -455,7 +471,7 @@ class BrandingComponent {
         }), shareReplay({ refCount: true, bufferSize: 1 }));
     }
     async deleteAllBrandings(publicOptions) {
-        const result = await this.confirmModal.confirm(gettext$1('Delete all branding variants'), gettext$1(`<p class="m-b-8">
+        const result = await this.confirmModal.confirm(gettext('Delete all branding variants'), gettext(`<p class="m-b-8">
           This action will permanently remove all custom branding variants. Your tenant will revert
           to the default branding.
         </p>
@@ -465,7 +481,7 @@ class BrandingComponent {
         </p>
         <p>
           Are you sure you want to continue?
-        </p>`), Status.DANGER, { cancel: gettext$1('Cancel'), ok: gettext$1('Delete all') });
+        </p>`), Status.DANGER, { cancel: gettext('Cancel'), ok: gettext('Delete all') });
         if (result === false || (typeof result === 'object' && !result.confirmed)) {
             return;
         }
@@ -530,7 +546,7 @@ class BrandingComponent {
         return this.router.navigate([brandingName, 'edit'], { relativeTo: this.activatedRoute });
     }
     async getStartedUsingBranding() {
-        const result = await this.confirmModal.confirm(gettext$1(`Get started using branding variants`), gettext$1(`<p class="m-b-8">Confirming this action creates two branding variants:</p>
+        const result = await this.confirmModal.confirm(gettext(`Get started using branding variants`), gettext(`<p class="m-b-8">Confirming this action creates two branding variants:</p>
         <ul class="m-b-8 p-l-16">
           <li>A default copy of your current global branding</li>
           <li>Your new customizable variant.</li>
@@ -596,11 +612,25 @@ class BrandingComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.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: "14.0.0", version: "19.2.15", type: BrandingComponent, isStandalone: true, selector: "c8y-branding", ngImport: i0, template: "<c8y-title translate>Branding</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>\n\n<ng-container *ngIf=\"availableBrandingVariants$ | async as brandingVariant; else loading\">\n  <c8y-action-bar-item\n    *ngIf=\"brandingVariant.publicOptions\"\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  <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  <c8y-action-bar-item\n    *ngIf=\"brandingVariant.publicOptions\"\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  <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      <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        *ngIf=\"!brandingVariant.publicOptions\"\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    </c8y-data-grid>\n  </div>\n</ng-container>\n\n<ng-template #loading>\n  <c8y-loading></c8y-loading>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "component", type: i3.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "component", type: i3.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i3.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: i3.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "component", type: i3.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: i3.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: "component", type: i3.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "ngmodule", type: DataGridModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: BrandingComponent, isStandalone: true, selector: "c8y-branding", ngImport: i0, template: "<c8y-title translate>Branding</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<ng-container *ngIf=\"availableBrandingVariants$ | async as brandingVariant; else loading\">\n  <c8y-action-bar-item\n    *ngIf=\"brandingVariant.publicOptions\"\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  <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  <c8y-action-bar-item\n    *ngIf=\"brandingVariant.publicOptions\"\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  <c8y-help [src]=\"'/docs/enterprise-tenant/customization/#to-configure-branding-settings'\"></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      <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        *ngIf=\"!brandingVariant.publicOptions\"\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    </c8y-data-grid>\n  </div>\n</ng-container>\n\n<ng-template #loading>\n  <c8y-loading></c8y-loading>\n</ng-template>\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: "pipe", type: C8yTranslatePipe, name: "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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BrandingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-branding', standalone: true, imports: [CoreModule, DataGridModule], template: "<c8y-title translate>Branding</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>\n\n<ng-container *ngIf=\"availableBrandingVariants$ | async as brandingVariant; else loading\">\n  <c8y-action-bar-item\n    *ngIf=\"brandingVariant.publicOptions\"\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  <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  <c8y-action-bar-item\n    *ngIf=\"brandingVariant.publicOptions\"\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  <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      <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        *ngIf=\"!brandingVariant.publicOptions\"\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    </c8y-data-grid>\n  </div>\n</ng-container>\n\n<ng-template #loading>\n  <c8y-loading></c8y-loading>\n</ng-template>\n" }]
+            args: [{ selector: 'c8y-branding', standalone: true, imports: [
+                        BreadcrumbComponent,
+                        BreadcrumbItemComponent,
+                        TitleComponent,
+                        HelpComponent,
+                        ActionBarItemComponent,
+                        IconDirective,
+                        C8yTranslateDirective,
+                        C8yTranslatePipe,
+                        EmptyStateComponent,
+                        LoadingComponent,
+                        DataGridComponent,
+                        NgIf,
+                        AsyncPipe
+                    ], template: "<c8y-title translate>Branding</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<ng-container *ngIf=\"availableBrandingVariants$ | async as brandingVariant; else loading\">\n  <c8y-action-bar-item\n    *ngIf=\"brandingVariant.publicOptions\"\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  <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  <c8y-action-bar-item\n    *ngIf=\"brandingVariant.publicOptions\"\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  <c8y-help [src]=\"'/docs/enterprise-tenant/customization/#to-configure-branding-settings'\"></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      <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        *ngIf=\"!brandingVariant.publicOptions\"\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    </c8y-data-grid>\n  </div>\n</ng-container>\n\n<ng-template #loading>\n  <c8y-loading></c8y-loading>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i1$2.StoreBrandingService }, { type: i2$1.ActivatedRoute }, { type: i3.AppStateService }, { type: i1.ApplicationService }, { type: i3.ZipService }, { type: i3$1.StaticAssetsService }, { type: i2$1.Router }, { type: i1$3.BsModalService }, { type: i3.ModalService }, { type: i1$2.BrandingVersionService }, { type: i1$1.AddBrandingModalService }, { type: i3.AlertService }, { type: BrandingImportModalService }, { type: i1$2.BrandingTrackingService }] });
 
 class BrandingFormComponent {
@@ -685,7 +715,7 @@ class BrandingFormComponent {
         this.messageBannerService.showBanner();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.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: "19.2.15", type: BrandingFormComponent, isStandalone: true, selector: "c8y-branding-form", host: { classAttribute: "d-contents" }, ngImport: i0, template: "<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'\"></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: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i4.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: "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$1.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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.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: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BrandingFormComponent, decorators: [{
             type: Component,
@@ -695,7 +725,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         CollapseModule,
                         StaticAssetsFilePickerComponent,
                         EditorComponent
-                    ], template: "<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'\"></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" }]
+                    ], 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" }]
         }], ctorParameters: () => [{ type: i2.FormBuilder }, { type: i3.MessageBannerService }] });
 
 const formStructure = {
@@ -1106,11 +1136,11 @@ class BrandingThemeFormComponent {
         return this.addDarkThemePrefix ? 'dark-' : '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.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: "19.2.15", type: BrandingThemeFormComponent, isStandalone: true, selector: "c8y-branding-theme-form", host: { classAttribute: "d-contents" }, ngImport: i0, template: "<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'\"></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'\"></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'\"></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'\"></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'\"></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: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { 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: "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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.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: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", 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: "<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'\"></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'\"></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'\"></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'\"></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'\"></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" }]
+            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 }] });
 
 class EditBrandingRouterOutletComponent {
@@ -1233,16 +1263,59 @@ class EditBrandingRouterOutletComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.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: "19.2.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: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "component", type: i3.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.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: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "component", type: i3.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", 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 }] });
 
+class BrandingAssetsComponent {
+    constructor(clipboard, filesService, translate) {
+        this.clipboard = clipboard;
+        this.filesService = filesService;
+        this.translate = translate;
+        this.filterOptions = [
+            {
+                label: gettext('All'),
+                value: []
+            },
+            {
+                label: gettext('Images'),
+                value: this.filesService.mapGenericFileTypesToExtensions([GENERIC_FILE_TYPE.IMAGE])
+            },
+            {
+                label: gettext('Fonts'),
+                value: this.filesService.mapGenericFileTypesToExtensions([GENERIC_FILE_TYPE.FONT])
+            }
+        ];
+        this.supportedFileExtensions = this.filterOptions[0].value;
+    }
+    onItemSelected(file) {
+        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: "19.2.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: "14.0.0", version: "19.2.15", type: BrandingAssetsComponent, isStandalone: true, selector: "c8y-branding-assets", ngImport: i0, template: "<c8y-title translate>Branding assets</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      <option\n        *ngFor=\"let filterOption of filterOptions\"\n        [ngValue]=\"filterOption.value\"\n      >\n        {{ filterOption.label | translate }}\n      </option>\n    </select>\n  </div>\n</c8y-action-bar-item>\n\n<div class=\"card content-fullpage\">\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: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BrandingAssetsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-branding-assets', standalone: true, imports: [
+                        StaticAssetsFileListComponent,
+                        TitleComponent,
+                        BreadcrumbComponent,
+                        BreadcrumbItemComponent,
+                        C8yTranslateDirective,
+                        C8yTranslatePipe,
+                        ActionBarItemComponent,
+                        NgForOf,
+                        FormsModule
+                    ], template: "<c8y-title translate>Branding assets</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      <option\n        *ngFor=\"let filterOption of filterOptions\"\n        [ngValue]=\"filterOption.value\"\n      >\n        {{ filterOption.label | translate }}\n      </option>\n    </select>\n  </div>\n</c8y-action-bar-item>\n\n<div class=\"card content-fullpage\">\n  <c8y-static-assets-file-list\n    [supportedFileExtensions]=\"supportedFileExtensions\"\n    (itemSelected)=\"onItemSelected($event)\"\n  ></c8y-static-assets-file-list>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i3.ClipboardService }, { type: i3.FilesService }, { type: i2$2.TranslateService }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ApplyBrandingToAppService, BrandingComponent, BrandingFormComponent, BrandingImportModalComponent, BrandingImportModalService, BrandingTagsCellRendererComponent, BrandingTagsHeaderCellRendererComponent, BrandingThemeFormComponent, EditBrandingRouterOutletComponent };
+export { ApplyBrandingToAppService, BrandingAssetsComponent, BrandingComponent, BrandingFormComponent, BrandingImportModalComponent, BrandingImportModalService, BrandingTagsCellRendererComponent, BrandingTagsHeaderCellRendererComponent, BrandingThemeFormComponent, EditBrandingRouterOutletComponent };
 //# sourceMappingURL=c8y-ngx-components-branding-shared-lazy.mjs.map