@c8y/ngx-components 1023.70.0 → 1023.75.1

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

@@ -103,7 +103,7 @@ class AddBrandingModalComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AddBrandingModalComponent, deps: [{ token: i1.StoreBrandingService }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: AddBrandingModalComponent, isStandalone: true, selector: "c8y-add-branding-modal", inputs: { duplicateBranding: "duplicateBranding" }, ngImport: i0, template: "<c8y-modal\n  [title]=\"duplicateBranding ? 'Duplicate Branding' : 'Create Branding'\"\n  [headerClasses]=\"'dialog-header'\"\n  (onDismiss)=\"cancel()\"\n  (onClose)=\"save()\"\n  [disabled]=\"form.invalid\"\n  [labels]=\"{ cancel: 'Cancel', ok: 'Save' }\"\n>\n<ng-container c8y-modal-title>\n  <span [c8yIcon]=\"'palette'\"></span>\n</ng-container>\n  <div [formGroup]=\"form\" class=\"p-24\">\n    <c8y-form-group>\n      <label\n        for=\"brandingName\"\n        translate\n      >\n        Branding name\n      </label>\n      <input\n        class=\"form-control\"\n        name=\"brandingName\"\n        id=\"brandingName\"\n        type=\"text\"\n        formControlName=\"brandingName\"\n        placeholder=\"{{'e.g. {{ example }}' | translate : { example: 'main-branding' } }}\"\n      />\n      <c8y-messages [helpMessage]=\"'Upper case letters not allowed' | translate\">\n        <c8y-message *ngFor=\"let message of messages\"\n          [name]=\"message.name\"\n          [text]=\"message.text | translate\"\n        ></c8y-message>\n      </c8y-messages>\n    </c8y-form-group>\n  </div>\n</c8y-modal>\n", dependencies: [{ kind: "component", type: ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.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: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: AddBrandingModalComponent, isStandalone: true, selector: "c8y-add-branding-modal", inputs: { duplicateBranding: "duplicateBranding" }, ngImport: i0, template: "<c8y-modal\n  [title]=\"duplicateBranding ? 'Duplicate Branding' : 'Create Branding'\"\n  [headerClasses]=\"'dialog-header'\"\n  (onDismiss)=\"cancel()\"\n  (onClose)=\"save()\"\n  [disabled]=\"form.invalid\"\n  [labels]=\"{ cancel: 'Cancel', ok: 'Save' }\"\n>\n<ng-container c8y-modal-title>\n  <span [c8yIcon]=\"'palette'\"></span>\n</ng-container>\n  <div [formGroup]=\"form\" class=\"p-24\">\n    <c8y-form-group>\n      <label\n        for=\"brandingName\"\n        translate\n      >\n        Branding name\n      </label>\n      <input\n        class=\"form-control\"\n        name=\"brandingName\"\n        id=\"brandingName\"\n        type=\"text\"\n        formControlName=\"brandingName\"\n        placeholder=\"{{'e.g. {{ example }}' | translate : { example: 'main-branding' } }}\"\n      />\n      <c8y-messages [helpMessage]=\"'Upper case letters not allowed' | translate\">\n        <c8y-message *ngFor=\"let message of messages\"\n          [name]=\"message.name\"\n          [text]=\"message.text | translate\"\n        ></c8y-message>\n      </c8y-messages>\n    </c8y-form-group>\n  </div>\n</c8y-modal>\n", dependencies: [{ kind: "component", type: ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage", "additionalMessages"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.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: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AddBrandingModalComponent, decorators: [{
             type: Component,

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

@@ -1 +1 @@
-{"version":3,"file":"c8y-ngx-components-branding-shared-lazy-add-branding-modal.mjs","sources":["../../branding/shared/lazy/add-branding-modal/add-branding-modal.component.ts","../../branding/shared/lazy/add-branding-modal/add-branding-modal.component.html","../../branding/shared/lazy/add-branding-modal/add-branding-modal.service.ts","../../branding/shared/lazy/add-branding-modal/c8y-ngx-components-branding-shared-lazy-add-branding-modal.ts"],"sourcesContent":["import { Component, Input } from '@angular/core';\nimport { StoreBrandingService } from '@c8y/ngx-components/branding/shared/data';\nimport {\n  AbstractControl,\n  FormBuilder,\n  ReactiveFormsModule,\n  ValidatorFn,\n  Validators\n} from '@angular/forms';\nimport {\n  C8yTranslateDirective,\n  C8yTranslatePipe,\n  FormGroupComponent,\n  IconDirective,\n  MessageDirective,\n  MessagesComponent,\n  ModalComponent\n} from '@c8y/ngx-components';\nimport { gettext } from '@c8y/ngx-components/gettext';\nimport { NgForOf } from '@angular/common';\n\n@Component({\n  selector: 'c8y-add-branding-modal',\n  templateUrl: './add-branding-modal.component.html',\n  standalone: true,\n  imports: [\n    ModalComponent,\n    IconDirective,\n    FormGroupComponent,\n    MessagesComponent,\n    MessageDirective,\n    C8yTranslateDirective,\n    C8yTranslatePipe,\n    NgForOf,\n    ReactiveFormsModule\n  ]\n})\nexport class AddBrandingModalComponent {\n  @Input() duplicateBranding = false;\n  form: ReturnType<typeof this.initForm>;\n  namesAlreadyTaken: string[] = [];\n  loading = true;\n\n  result = new Promise<ReturnType<typeof this.initForm>['value']>((resolve, reject) => {\n    this._resovle = resolve;\n    this._reject = reject;\n  });\n\n  messages = [\n    {\n      name: 'nameAlreadyTaken',\n      text: gettext('The provided name is already taken.')\n    },\n    {\n      name: 'onlyLowerCaseCharacters',\n      text: gettext('Only lower case characters are allowed.')\n    },\n    {\n      name: 'shouldStartWithLowerCaseLetterOrNumber',\n      text: gettext('Should start with a lower case letter or a number.')\n    },\n    {\n      name: 'invalidCharacters',\n      text: gettext('Invalid character \"{{ invalidCharacter }}\". Only a-z, 0-9 and - are allowed.')\n    }\n  ] as const;\n\n  private _resovle: (value: ReturnType<typeof this.initForm>['value']) => void;\n  private _reject: (reason?: any) => void;\n\n  constructor(\n    private branding: StoreBrandingService,\n    private formBuilder: FormBuilder\n  ) {\n    this.form = this.initForm();\n    this.getExistingBrandingVersions();\n  }\n\n  async getExistingBrandingVersions() {\n    try {\n      const { variants } = await this.branding.loadBrandingVariants();\n      this.namesAlreadyTaken = variants.map(variant => variant.version);\n    } catch (e) {\n      console.warn(e);\n    }\n    this.loading = false;\n  }\n\n  initForm() {\n    return this.formBuilder.group({\n      brandingName: [\n        '',\n        [Validators.required, this.ensureProperVariantName(), this.ensureNotExistingName()]\n      ]\n    });\n  }\n\n  cancel() {\n    this._reject();\n  }\n\n  save() {\n    this._resovle(this.form.value);\n  }\n\n  private ensureNotExistingName(): ValidatorFn {\n    return (control: AbstractControl) => {\n      if (typeof control.value === 'string') {\n        const lowercaseName = control.value.toLowerCase();\n        const nameAlreadyTaken = this.namesAlreadyTaken.some(name =>\n          name.toLowerCase().startsWith(lowercaseName + '-')\n        );\n        if (nameAlreadyTaken) {\n          return { nameAlreadyTaken: {} };\n        }\n      }\n      return null;\n    };\n  }\n\n  private ensureProperVariantName(): ValidatorFn {\n    return (control: AbstractControl) => {\n      if (typeof control.value === 'string') {\n        const value = control.value;\n        if (/[A-Z]/.test(value)) {\n          return {\n            onlyLowerCaseCharacters: {}\n          };\n        }\n        if (!/^[a-z0-9]+/.test(value)) {\n          return {\n            shouldStartWithLowerCaseLetterOrNumber: {}\n          };\n        }\n\n        const matches = /[^a-z0-9-]/.exec(value);\n        if (matches) {\n          return {\n            invalidCharacters: {\n              invalidCharacter: matches[0]\n            }\n          };\n        }\n      }\n      return null;\n    };\n  }\n}\n","<c8y-modal\n  [title]=\"duplicateBranding ? 'Duplicate Branding' : 'Create Branding'\"\n  [headerClasses]=\"'dialog-header'\"\n  (onDismiss)=\"cancel()\"\n  (onClose)=\"save()\"\n  [disabled]=\"form.invalid\"\n  [labels]=\"{ cancel: 'Cancel', ok: 'Save' }\"\n>\n<ng-container c8y-modal-title>\n  <span [c8yIcon]=\"'palette'\"></span>\n</ng-container>\n  <div [formGroup]=\"form\" class=\"p-24\">\n    <c8y-form-group>\n      <label\n        for=\"brandingName\"\n        translate\n      >\n        Branding name\n      </label>\n      <input\n        class=\"form-control\"\n        name=\"brandingName\"\n        id=\"brandingName\"\n        type=\"text\"\n        formControlName=\"brandingName\"\n        placeholder=\"{{'e.g. {{ example }}' | translate : { example: 'main-branding' } }}\"\n      />\n      <c8y-messages [helpMessage]=\"'Upper case letters not allowed' | translate\">\n        <c8y-message *ngFor=\"let message of messages\"\n          [name]=\"message.name\"\n          [text]=\"message.text | translate\"\n        ></c8y-message>\n      </c8y-messages>\n    </c8y-form-group>\n  </div>\n</c8y-modal>\n","import { Injectable } from '@angular/core';\nimport { AddBrandingModalComponent } from './add-branding-modal.component';\nimport { BsModalService } from 'ngx-bootstrap/modal';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class AddBrandingModalService {\n  constructor(private modal: BsModalService) {}\n\n  async openAddBrandingModal() {\n    let versionDetails: Awaited<AddBrandingModalComponent['result']>;\n    try {\n      const modalRef = this.modal.show(AddBrandingModalComponent, {\n        class: 'modal-sm',\n        ariaDescribedby: 'modal-body',\n        ariaLabelledBy: 'modal-title',\n        ignoreBackdropClick: true,\n        keyboard: false\n      });\n      versionDetails = await modalRef.content.result;\n    } catch (e) {\n      // modal closed\n      return;\n    }\n\n    return versionDetails;\n  }\n\n  async openDuplicateBrandingModal() {\n    let versionDetails: Awaited<AddBrandingModalComponent['result']>;\n    try {\n      const modalRef = this.modal.show(AddBrandingModalComponent, {\n        class: 'modal-sm',\n        ariaDescribedby: 'modal-body',\n        ariaLabelledBy: 'modal-title',\n        initialState: { duplicateBranding: true },\n        ignoreBackdropClick: true,\n        keyboard: false\n      });\n      versionDetails = await modalRef.content.result;\n    } catch (e) {\n      // modal closed\n      return;\n    }\n\n    return versionDetails;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1"],"mappings":"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"}
+{"version":3,"file":"c8y-ngx-components-branding-shared-lazy-add-branding-modal.mjs","sources":["../../branding/shared/lazy/add-branding-modal/add-branding-modal.component.ts","../../branding/shared/lazy/add-branding-modal/add-branding-modal.component.html","../../branding/shared/lazy/add-branding-modal/add-branding-modal.service.ts","../../branding/shared/lazy/add-branding-modal/c8y-ngx-components-branding-shared-lazy-add-branding-modal.ts"],"sourcesContent":["import { Component, Input } from '@angular/core';\nimport { StoreBrandingService } from '@c8y/ngx-components/branding/shared/data';\nimport {\n  AbstractControl,\n  FormBuilder,\n  ReactiveFormsModule,\n  ValidatorFn,\n  Validators\n} from '@angular/forms';\nimport {\n  C8yTranslateDirective,\n  C8yTranslatePipe,\n  FormGroupComponent,\n  IconDirective,\n  MessageDirective,\n  MessagesComponent,\n  ModalComponent\n} from '@c8y/ngx-components';\nimport { gettext } from '@c8y/ngx-components/gettext';\nimport { NgForOf } from '@angular/common';\n\n@Component({\n  selector: 'c8y-add-branding-modal',\n  templateUrl: './add-branding-modal.component.html',\n  standalone: true,\n  imports: [\n    ModalComponent,\n    IconDirective,\n    FormGroupComponent,\n    MessagesComponent,\n    MessageDirective,\n    C8yTranslateDirective,\n    C8yTranslatePipe,\n    NgForOf,\n    ReactiveFormsModule\n  ]\n})\nexport class AddBrandingModalComponent {\n  @Input() duplicateBranding = false;\n  form: ReturnType<typeof this.initForm>;\n  namesAlreadyTaken: string[] = [];\n  loading = true;\n\n  result = new Promise<ReturnType<typeof this.initForm>['value']>((resolve, reject) => {\n    this._resovle = resolve;\n    this._reject = reject;\n  });\n\n  messages = [\n    {\n      name: 'nameAlreadyTaken',\n      text: gettext('The provided name is already taken.')\n    },\n    {\n      name: 'onlyLowerCaseCharacters',\n      text: gettext('Only lower case characters are allowed.')\n    },\n    {\n      name: 'shouldStartWithLowerCaseLetterOrNumber',\n      text: gettext('Should start with a lower case letter or a number.')\n    },\n    {\n      name: 'invalidCharacters',\n      text: gettext('Invalid character \"{{ invalidCharacter }}\". Only a-z, 0-9 and - are allowed.')\n    }\n  ] as const;\n\n  private _resovle: (value: ReturnType<typeof this.initForm>['value']) => void;\n  private _reject: (reason?: any) => void;\n\n  constructor(\n    private branding: StoreBrandingService,\n    private formBuilder: FormBuilder\n  ) {\n    this.form = this.initForm();\n    this.getExistingBrandingVersions();\n  }\n\n  async getExistingBrandingVersions() {\n    try {\n      const { variants } = await this.branding.loadBrandingVariants();\n      this.namesAlreadyTaken = variants.map(variant => variant.version);\n    } catch (e) {\n      console.warn(e);\n    }\n    this.loading = false;\n  }\n\n  initForm() {\n    return this.formBuilder.group({\n      brandingName: [\n        '',\n        [Validators.required, this.ensureProperVariantName(), this.ensureNotExistingName()]\n      ]\n    });\n  }\n\n  cancel() {\n    this._reject();\n  }\n\n  save() {\n    this._resovle(this.form.value);\n  }\n\n  private ensureNotExistingName(): ValidatorFn {\n    return (control: AbstractControl) => {\n      if (typeof control.value === 'string') {\n        const lowercaseName = control.value.toLowerCase();\n        const nameAlreadyTaken = this.namesAlreadyTaken.some(name =>\n          name.toLowerCase().startsWith(lowercaseName + '-')\n        );\n        if (nameAlreadyTaken) {\n          return { nameAlreadyTaken: {} };\n        }\n      }\n      return null;\n    };\n  }\n\n  private ensureProperVariantName(): ValidatorFn {\n    return (control: AbstractControl) => {\n      if (typeof control.value === 'string') {\n        const value = control.value;\n        if (/[A-Z]/.test(value)) {\n          return {\n            onlyLowerCaseCharacters: {}\n          };\n        }\n        if (!/^[a-z0-9]+/.test(value)) {\n          return {\n            shouldStartWithLowerCaseLetterOrNumber: {}\n          };\n        }\n\n        const matches = /[^a-z0-9-]/.exec(value);\n        if (matches) {\n          return {\n            invalidCharacters: {\n              invalidCharacter: matches[0]\n            }\n          };\n        }\n      }\n      return null;\n    };\n  }\n}\n","<c8y-modal\n  [title]=\"duplicateBranding ? 'Duplicate Branding' : 'Create Branding'\"\n  [headerClasses]=\"'dialog-header'\"\n  (onDismiss)=\"cancel()\"\n  (onClose)=\"save()\"\n  [disabled]=\"form.invalid\"\n  [labels]=\"{ cancel: 'Cancel', ok: 'Save' }\"\n>\n<ng-container c8y-modal-title>\n  <span [c8yIcon]=\"'palette'\"></span>\n</ng-container>\n  <div [formGroup]=\"form\" class=\"p-24\">\n    <c8y-form-group>\n      <label\n        for=\"brandingName\"\n        translate\n      >\n        Branding name\n      </label>\n      <input\n        class=\"form-control\"\n        name=\"brandingName\"\n        id=\"brandingName\"\n        type=\"text\"\n        formControlName=\"brandingName\"\n        placeholder=\"{{'e.g. {{ example }}' | translate : { example: 'main-branding' } }}\"\n      />\n      <c8y-messages [helpMessage]=\"'Upper case letters not allowed' | translate\">\n        <c8y-message *ngFor=\"let message of messages\"\n          [name]=\"message.name\"\n          [text]=\"message.text | translate\"\n        ></c8y-message>\n      </c8y-messages>\n    </c8y-form-group>\n  </div>\n</c8y-modal>\n","import { Injectable } from '@angular/core';\nimport { AddBrandingModalComponent } from './add-branding-modal.component';\nimport { BsModalService } from 'ngx-bootstrap/modal';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class AddBrandingModalService {\n  constructor(private modal: BsModalService) {}\n\n  async openAddBrandingModal() {\n    let versionDetails: Awaited<AddBrandingModalComponent['result']>;\n    try {\n      const modalRef = this.modal.show(AddBrandingModalComponent, {\n        class: 'modal-sm',\n        ariaDescribedby: 'modal-body',\n        ariaLabelledBy: 'modal-title',\n        ignoreBackdropClick: true,\n        keyboard: false\n      });\n      versionDetails = await modalRef.content.result;\n    } catch (e) {\n      // modal closed\n      return;\n    }\n\n    return versionDetails;\n  }\n\n  async openDuplicateBrandingModal() {\n    let versionDetails: Awaited<AddBrandingModalComponent['result']>;\n    try {\n      const modalRef = this.modal.show(AddBrandingModalComponent, {\n        class: 'modal-sm',\n        ariaDescribedby: 'modal-body',\n        ariaLabelledBy: 'modal-title',\n        initialState: { duplicateBranding: true },\n        ignoreBackdropClick: true,\n        keyboard: false\n      });\n      versionDetails = await modalRef.content.result;\n    } catch (e) {\n      // modal closed\n      return;\n    }\n\n    return versionDetails;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1"],"mappings":"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"}

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

@@ -748,7 +748,7 @@ class BrandingFormComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: BrandingFormComponent, deps: [{ token: i2.FormBuilder }, { token: i3.MessageBannerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: BrandingFormComponent, isStandalone: true, selector: "c8y-branding-form", host: { classAttribute: "d-contents" }, ngImport: i0, template: "<c8y-help [src]=\"'/docs/enterprise-tenant/customization/#generic-tab'\"></c8y-help>\n\n<div\n  class=\"inner-scroll\"\n  [formGroup]=\"formGroup\"\n>\n  <!--  Title & Favicon-->\n  <div class=\"card-block\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4 class=\"text-normal text-right text-left-xs m-b-16\">\n          {{ 'Title & favicon' | translate }}\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div\n          class=\"row p-t-16 p-b-16\"\n          [formGroupName]=\"'genericApplicationOptions'\"\n        >\n          <div class=\"col-md-6\">\n            <c8y-form-group class=\"m-b-32\">\n              <label\n                for=\"globalTitle\"\n                translate\n              >\n                Title\n              </label>\n              <input\n                class=\"form-control\"\n                id=\"globalTitle\"\n                name=\"globalTitle\"\n                type=\"text\"\n                formControlName=\"globalTitle\"\n              />\n              <c8y-messages\n                [helpMessage]=\"'Title to display in the browser tab' | translate\"\n              ></c8y-messages>\n            </c8y-form-group>\n          </div>\n          <div class=\"col-md-6\">\n            <c8y-form-group>\n              <label translate>Favicon</label>\n              <c8y-static-assets-file-picker\n                name=\"faviconUrl\"\n                [supportedFileExtensions]=\"['ico']\"\n                [isCSSURL]=\"false\"\n                formControlName=\"faviconUrl\"\n              ></c8y-static-assets-file-picker>\n              <c8y-messages [helpMessage]=\"'Supported files: *.ico' | translate\"></c8y-messages>\n            </c8y-form-group>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"card-block separator-top\">\n    <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n      <h4\n        class=\"text-normal text-right text-left-xs m-b-16\"\n        translate\n      >\n        Dark theme\n      </h4>\n    </div>\n    <div class=\"col-xs-12 col-sm-9 col-md-10\">\n      <c8y-form-group class=\"m-b-32 p-t-8 m-t-4\">\n        <label class=\"c8y-switch\">\n          <input\n            class=\"form-control\"\n            name=\"darkThemeAvailable\"\n            type=\"checkbox\"\n            formControlName=\"darkThemeAvailable\"\n          />\n          <span></span>\n          <span translate>Enable dark theme support</span>\n        </label>\n      </c8y-form-group>\n    </div>\n  </div>\n  <!-- Typography -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n          translate\n        >\n          Typography\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <fieldset\n              class=\"c8y-fieldset p-24\"\n              [formGroupName]=\"'baseTypography'\"\n            >\n              <legend translate>Base typography</legend>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  for=\"font-url\"\n                  translate\n                >\n                  Fonts URL\n                </label>\n                <input\n                  class=\"form-control\"\n                  id=\"font-url\"\n                  placeholder=\"{{\n                    'e.g. {{ example }}' | translate : { example: 'https://fonts.googleapis.com/css?family=Roboto:400,500,700' }\n                  }}\"\n                  type=\"text\"\n                  formControlName=\"font-url\"\n                />\n                <c8y-messages [helpMessage]=\"'The Google fonts URL' | translate\"></c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"font-family-base\"\n                  for=\"font-family-base\"\n                  translate\n                >\n                  Base font stack\n                </label>\n                <input\n                  class=\"form-control\"\n                  id=\"font-family-base\"\n                  placeholder=\"{{ 'e.g. {{ example }}' | translate : {example: '&quot;Roboto&quot;, Arial, sans-serif'} }}\"\n                  name=\"font-family-base\"\n                  type=\"text\"\n                  formControlName=\"font-family-base\"\n                />\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n          <div class=\"col-md-6\">\n            <fieldset\n              class=\"c8y-fieldset p-24\"\n              [formGroupName]=\"'headingsAndNavigatorTypography'\"\n            >\n              <legend>{{ 'Headings & navigator' | translate }}</legend>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"font-family-headings\"\n                  for=\"font-family-headings\"\n                  translate\n                >\n                  Headings font stack\n                </label>\n                <input\n                  class=\"form-control\"\n                  id=\"font-family-headings\"\n                  placeholder=\"{{ 'e.g. {{ example }}' | translate : {example: '&quot;Roboto&quot;, Arial, sans-serif'} }}\"\n                  type=\"text\"\n                  formControlName=\"font-family-headings\"\n                />\n                <c8y-messages\n                  [helpMessage]=\"\n                    'Leave empty to use the same font as the base font stack' | translate\n                  \"\n                ></c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"navigator-font-family\"\n                  translate\n                >\n                  Navigator font stack\n                </label>\n                <div class=\"form-control-static\">\n                  <label class=\"c8y-radio radio-inline\">\n                    <input\n                      name=\"navigator-font-family\"\n                      type=\"radio\"\n                      formControlName=\"navigator-font-family\"\n                      [value]=\"'var(--font-family-base)'\"\n                    />\n                    <span></span>\n                    <span translate>Match base font stack</span>\n                  </label>\n                  <label\n                    class=\"c8y-radio radio-inline\"\n                    title=\"Radio Two\"\n                  >\n                    <input\n                      name=\"navigator-font-family\"\n                      type=\"radio\"\n                      formControlName=\"navigator-font-family\"\n                      [value]=\"'var(--font-family-headings)'\"\n                    />\n                    <span></span>\n                    <span translate>Match headings font stack</span>\n                  </label>\n                </div>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Cookie banner -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n          translate\n        >\n          Cookie banner\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <fieldset\n          class=\"c8y-fieldset p-24\"\n          [formGroupName]=\"'cookieBanner'\"\n        >\n          <legend translate>Cookie banner</legend>\n          <label class=\"c8y-switch\">\n            <input\n              class=\"form-control\"\n              name=\"cookieBannerEnabled\"\n              type=\"checkbox\"\n              [ngModelOptions]=\"{ standalone: true }\"\n              [ngModel]=\"!formGroup.value.cookieBanner.cookieBannerDisabled\"\n              (ngModelChange)=\"cockieBannerChange($event)\"\n            />\n            <span></span>\n            <span translate>Enable cookie banner</span>\n          </label>\n\n          <div\n            class=\"collapse\"\n            [collapse]=\"formGroup.value.cookieBanner.cookieBannerDisabled\"\n            [isAnimated]=\"true\"\n          >\n            <div\n              class=\"row\"\n              style=\"min-height: 227px\"\n            >\n              <ng-container *ngIf=\"formGroup.value.cookieBanner.cookieBannerDisabled !== true\">\n                <div class=\"col-md-6\">\n                  <c8y-form-group class=\"m-b-32\">\n                    <label\n                      for=\"cookieBannerTitle\"\n                      translate\n                    >\n                      Title\n                    </label>\n                    <input\n                      class=\"form-control\"\n                      id=\"cookieBannerTitle\"\n                      name=\"cookieBannerTitle\"\n                      type=\"text\"\n                      formControlName=\"cookieBannerTitle\"\n                    />\n                    <c8y-messages></c8y-messages>\n                  </c8y-form-group>\n                  <c8y-form-group class=\"m-b-32\">\n                    <label\n                      for=\"policyUrl\"\n                      translate\n                    >\n                      Link to privacy policy\n                    </label>\n                    <input\n                      class=\"form-control\"\n                      id=\"policyUrl\"\n                      name=\"policyUrl\"\n                      type=\"text\"\n                      formControlName=\"policyUrl\"\n                    />\n                    <c8y-messages></c8y-messages>\n                  </c8y-form-group>\n                  <c8y-form-group class=\"m-b-32\">\n                    <label\n                      for=\"policyVersion\"\n                      translate\n                    >\n                      Version of privacy policy\n                    </label>\n                    <input\n                      class=\"form-control\"\n                      id=\"policyVersion\"\n                      name=\"policyVersion\"\n                      type=\"text\"\n                      formControlName=\"policyVersion\"\n                    />\n                    <c8y-messages\n                      [helpMessage]=\"\n                        'Changing the version of the privacy policy invalidates already existing cookie consents.'\n                          | translate\n                      \"\n                    ></c8y-messages>\n                  </c8y-form-group>\n                </div>\n\n                <div class=\"col-md-6\">\n                  <c8y-form-group class=\"m-b-32\">\n                    <label\n                      for=\"cookieBannerText\"\n                      translate\n                    >\n                      Text\n                    </label>\n                    <textarea\n                      class=\"form-control\"\n                      id=\"cookieBannerText\"\n                      name=\"cookieBannerText\"\n                      rows=\"8\"\n                      formControlName=\"cookieBannerText\"\n                    ></textarea>\n                    <c8y-messages></c8y-messages>\n                  </c8y-form-group>\n                </div>\n              </ng-container>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n  </div>\n  <!-- Message banner -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n          translate\n        >\n          Message banner\n        </h4>\n      </div>\n\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <fieldset\n          class=\"c8y-fieldset p-24\"\n          [formGroupName]=\"'messageBanner'\"\n        >\n          <legend translate>Message banner</legend>\n\n          <label class=\"c8y-switch\">\n            <input\n              class=\"form-control\"\n              name=\"messageBannerEnabled\"\n              type=\"checkbox\"\n              formControlName=\"messageBannerEnabled\"\n            />\n            <span></span>\n            <span translate>Enable message banner</span>\n          </label>\n          <div\n            class=\"collapse\"\n            [collapse]=\"!formGroup.value.messageBanner.messageBannerEnabled\"\n            [isAnimated]=\"true\"\n          >\n            <div class=\"d-flex a-i-center gap-8 p-t-16 p-b-16\">\n              <fieldset class=\"c8y-fieldset p-16\">\n                <legend>{{ 'Message type' | translate }}</legend>\n                <label\n                  class=\"c8y-radio radio-inline\"\n                  title=\"{{ 'Info' | translate }}\"\n                >\n                  <input\n                    type=\"radio\"\n                    value=\"info\"\n                    formControlName=\"messageBannerType\"\n                  />\n                  <span></span>\n                  <span class=\"d-flex a-i-center\">\n                    <i\n                      class=\"text-info icon-16 m-r-4\"\n                      c8yIcon=\"info-circle\"\n                    ></i>\n                    Info\n                  </span>\n                </label>\n                <label\n                  class=\"c8y-radio radio-inline\"\n                  title=\"{{ 'Warning' | translate }}\"\n                >\n                  <input\n                    type=\"radio\"\n                    value=\"warning\"\n                    formControlName=\"messageBannerType\"\n                  />\n                  <span></span>\n                  <span class=\"d-flex a-i-center\">\n                    <i\n                      class=\"text-warning icon-16 m-r-4\"\n                      c8yIcon=\"warning\"\n                    ></i>\n                    {{ 'Warning' | translate }}\n                  </span>\n                </label>\n                <label\n                  class=\"c8y-radio radio-inline\"\n                  title=\"{{ 'Danger' | translate }}\"\n                >\n                  <input\n                    type=\"radio\"\n                    value=\"danger\"\n                    formControlName=\"messageBannerType\"\n                  />\n                  <span></span>\n                  <span class=\"d-flex a-i-center\">\n                    <i\n                      class=\"text-danger icon-16 m-r-4\"\n                      c8yIcon=\"exclamation-circle\"\n                    ></i>\n                    {{ 'Danger' | translate }}\n                  </span>\n                </label>\n                <label\n                  class=\"c8y-radio radio-inline\"\n                  title=\"{{ 'Success' | translate }}\"\n                >\n                  <input\n                    type=\"radio\"\n                    value=\"success\"\n                    formControlName=\"messageBannerType\"\n                  />\n                  <span></span>\n                  <span class=\"d-flex a-i-center\">\n                    <i\n                      class=\"text-success icon-16 m-r-4\"\n                      c8yIcon=\"check-circle\"\n                    ></i>\n                    {{ 'Success' | translate }}\n                  </span>\n                </label>\n                <label\n                  class=\"c8y-radio radio-inline\"\n                  title=\"{{ 'System' | translate }}\"\n                >\n                  <input\n                    type=\"radio\"\n                    value=\"system\"\n                    formControlName=\"messageBannerType\"\n                  />\n                  <span></span>\n                  <span>\n                    <i\n                      class=\"text-primary icon-16 m-r4\"\n                      c8yIcon=\"wrench\"\n                    ></i>\n                    {{ 'System' | translate }}\n                  </span>\n                </label>\n              </fieldset>\n            </div>\n\n            <c8y-form-group\n              class=\"m-b-32 p-b-32\"\n              [style]=\"{ height: '300px' }\"\n              *ngIf=\"formGroup.value.messageBanner.messageBannerEnabled\"\n            >\n              <label\n                for=\"messageBannerContent\"\n                translate\n              >\n                Message content\n              </label>\n              <c8y-editor\n                class=\"flex-grow form-control\"\n                style=\"height: 100%\"\n                formControlName=\"messageBannerContent\"\n                [editorOptions]=\"{language: 'markdown'}\"\n                monacoEditorMarkerValidator\n              ></c8y-editor>\n              <c8y-messages\n                [helpMessage]=\"messageBannerHelp | translate: messageBannerHelpParams\"\n              ></c8y-messages>\n              <c8y-messages></c8y-messages>\n            </c8y-form-group>\n\n            <button\n              class=\"btn btn-default\"\n              type=\"button\"\n              (click)=\"previewBanner()\"\n            >\n              <i\n                class=\"m-r-4\"\n                c8yIcon=\"eye\"\n              ></i>\n              <span translate>Preview banner</span>\n            </button>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i3.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i3.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i3.HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CollapseModule }, { kind: "directive", type: i4.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "component", type: StaticAssetsFilePickerComponent, selector: "c8y-static-assets-file-picker", inputs: ["isCSSURL", "staticAssetType", "supportedFileExtensions", "layout", "size"] }, { kind: "component", type: EditorComponent, selector: "c8y-editor", inputs: ["editorOptions", "theme"], outputs: ["editorInit"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: BrandingFormComponent, isStandalone: true, selector: "c8y-branding-form", host: { classAttribute: "d-contents" }, ngImport: i0, template: "<c8y-help [src]=\"'/docs/enterprise-tenant/customization/#generic-tab'\"></c8y-help>\n\n<div\n  class=\"inner-scroll\"\n  [formGroup]=\"formGroup\"\n>\n  <!--  Title & Favicon-->\n  <div class=\"card-block\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4 class=\"text-normal text-right text-left-xs m-b-16\">\n          {{ 'Title & favicon' | translate }}\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div\n          class=\"row p-t-16 p-b-16\"\n          [formGroupName]=\"'genericApplicationOptions'\"\n        >\n          <div class=\"col-md-6\">\n            <c8y-form-group class=\"m-b-32\">\n              <label\n                for=\"globalTitle\"\n                translate\n              >\n                Title\n              </label>\n              <input\n                class=\"form-control\"\n                id=\"globalTitle\"\n                name=\"globalTitle\"\n                type=\"text\"\n                formControlName=\"globalTitle\"\n              />\n              <c8y-messages\n                [helpMessage]=\"'Title to display in the browser tab' | translate\"\n              ></c8y-messages>\n            </c8y-form-group>\n          </div>\n          <div class=\"col-md-6\">\n            <c8y-form-group>\n              <label translate>Favicon</label>\n              <c8y-static-assets-file-picker\n                name=\"faviconUrl\"\n                [supportedFileExtensions]=\"['ico']\"\n                [isCSSURL]=\"false\"\n                formControlName=\"faviconUrl\"\n              ></c8y-static-assets-file-picker>\n              <c8y-messages [helpMessage]=\"'Supported files: *.ico' | translate\"></c8y-messages>\n            </c8y-form-group>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"card-block separator-top\">\n    <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n      <h4\n        class=\"text-normal text-right text-left-xs m-b-16\"\n        translate\n      >\n        Dark theme\n      </h4>\n    </div>\n    <div class=\"col-xs-12 col-sm-9 col-md-10\">\n      <c8y-form-group class=\"m-b-32 p-t-8 m-t-4\">\n        <label class=\"c8y-switch\">\n          <input\n            class=\"form-control\"\n            name=\"darkThemeAvailable\"\n            type=\"checkbox\"\n            formControlName=\"darkThemeAvailable\"\n          />\n          <span></span>\n          <span translate>Enable dark theme support</span>\n        </label>\n      </c8y-form-group>\n    </div>\n  </div>\n  <!-- Typography -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n          translate\n        >\n          Typography\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <fieldset\n              class=\"c8y-fieldset p-24\"\n              [formGroupName]=\"'baseTypography'\"\n            >\n              <legend translate>Base typography</legend>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  for=\"font-url\"\n                  translate\n                >\n                  Fonts URL\n                </label>\n                <input\n                  class=\"form-control\"\n                  id=\"font-url\"\n                  placeholder=\"{{\n                    'e.g. {{ example }}' | translate : { example: 'https://fonts.googleapis.com/css?family=Roboto:400,500,700' }\n                  }}\"\n                  type=\"text\"\n                  formControlName=\"font-url\"\n                />\n                <c8y-messages [helpMessage]=\"'The Google fonts URL' | translate\"></c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"font-family-base\"\n                  for=\"font-family-base\"\n                  translate\n                >\n                  Base font stack\n                </label>\n                <input\n                  class=\"form-control\"\n                  id=\"font-family-base\"\n                  placeholder=\"{{ 'e.g. {{ example }}' | translate : {example: '&quot;Roboto&quot;, Arial, sans-serif'} }}\"\n                  name=\"font-family-base\"\n                  type=\"text\"\n                  formControlName=\"font-family-base\"\n                />\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n          <div class=\"col-md-6\">\n            <fieldset\n              class=\"c8y-fieldset p-24\"\n              [formGroupName]=\"'headingsAndNavigatorTypography'\"\n            >\n              <legend>{{ 'Headings & navigator' | translate }}</legend>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"font-family-headings\"\n                  for=\"font-family-headings\"\n                  translate\n                >\n                  Headings font stack\n                </label>\n                <input\n                  class=\"form-control\"\n                  id=\"font-family-headings\"\n                  placeholder=\"{{ 'e.g. {{ example }}' | translate : {example: '&quot;Roboto&quot;, Arial, sans-serif'} }}\"\n                  type=\"text\"\n                  formControlName=\"font-family-headings\"\n                />\n                <c8y-messages\n                  [helpMessage]=\"\n                    'Leave empty to use the same font as the base font stack' | translate\n                  \"\n                ></c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"navigator-font-family\"\n                  translate\n                >\n                  Navigator font stack\n                </label>\n                <div class=\"form-control-static\">\n                  <label class=\"c8y-radio radio-inline\">\n                    <input\n                      name=\"navigator-font-family\"\n                      type=\"radio\"\n                      formControlName=\"navigator-font-family\"\n                      [value]=\"'var(--font-family-base)'\"\n                    />\n                    <span></span>\n                    <span translate>Match base font stack</span>\n                  </label>\n                  <label\n                    class=\"c8y-radio radio-inline\"\n                    title=\"Radio Two\"\n                  >\n                    <input\n                      name=\"navigator-font-family\"\n                      type=\"radio\"\n                      formControlName=\"navigator-font-family\"\n                      [value]=\"'var(--font-family-headings)'\"\n                    />\n                    <span></span>\n                    <span translate>Match headings font stack</span>\n                  </label>\n                </div>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Cookie banner -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n          translate\n        >\n          Cookie banner\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <fieldset\n          class=\"c8y-fieldset p-24\"\n          [formGroupName]=\"'cookieBanner'\"\n        >\n          <legend translate>Cookie banner</legend>\n          <label class=\"c8y-switch\">\n            <input\n              class=\"form-control\"\n              name=\"cookieBannerEnabled\"\n              type=\"checkbox\"\n              [ngModelOptions]=\"{ standalone: true }\"\n              [ngModel]=\"!formGroup.value.cookieBanner.cookieBannerDisabled\"\n              (ngModelChange)=\"cockieBannerChange($event)\"\n            />\n            <span></span>\n            <span translate>Enable cookie banner</span>\n          </label>\n\n          <div\n            class=\"collapse\"\n            [collapse]=\"formGroup.value.cookieBanner.cookieBannerDisabled\"\n            [isAnimated]=\"true\"\n          >\n            <div\n              class=\"row\"\n              style=\"min-height: 227px\"\n            >\n              <ng-container *ngIf=\"formGroup.value.cookieBanner.cookieBannerDisabled !== true\">\n                <div class=\"col-md-6\">\n                  <c8y-form-group class=\"m-b-32\">\n                    <label\n                      for=\"cookieBannerTitle\"\n                      translate\n                    >\n                      Title\n                    </label>\n                    <input\n                      class=\"form-control\"\n                      id=\"cookieBannerTitle\"\n                      name=\"cookieBannerTitle\"\n                      type=\"text\"\n                      formControlName=\"cookieBannerTitle\"\n                    />\n                    <c8y-messages></c8y-messages>\n                  </c8y-form-group>\n                  <c8y-form-group class=\"m-b-32\">\n                    <label\n                      for=\"policyUrl\"\n                      translate\n                    >\n                      Link to privacy policy\n                    </label>\n                    <input\n                      class=\"form-control\"\n                      id=\"policyUrl\"\n                      name=\"policyUrl\"\n                      type=\"text\"\n                      formControlName=\"policyUrl\"\n                    />\n                    <c8y-messages></c8y-messages>\n                  </c8y-form-group>\n                  <c8y-form-group class=\"m-b-32\">\n                    <label\n                      for=\"policyVersion\"\n                      translate\n                    >\n                      Version of privacy policy\n                    </label>\n                    <input\n                      class=\"form-control\"\n                      id=\"policyVersion\"\n                      name=\"policyVersion\"\n                      type=\"text\"\n                      formControlName=\"policyVersion\"\n                    />\n                    <c8y-messages\n                      [helpMessage]=\"\n                        'Changing the version of the privacy policy invalidates already existing cookie consents.'\n                          | translate\n                      \"\n                    ></c8y-messages>\n                  </c8y-form-group>\n                </div>\n\n                <div class=\"col-md-6\">\n                  <c8y-form-group class=\"m-b-32\">\n                    <label\n                      for=\"cookieBannerText\"\n                      translate\n                    >\n                      Text\n                    </label>\n                    <textarea\n                      class=\"form-control\"\n                      id=\"cookieBannerText\"\n                      name=\"cookieBannerText\"\n                      rows=\"8\"\n                      formControlName=\"cookieBannerText\"\n                    ></textarea>\n                    <c8y-messages></c8y-messages>\n                  </c8y-form-group>\n                </div>\n              </ng-container>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n  </div>\n  <!-- Message banner -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n          translate\n        >\n          Message banner\n        </h4>\n      </div>\n\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <fieldset\n          class=\"c8y-fieldset p-24\"\n          [formGroupName]=\"'messageBanner'\"\n        >\n          <legend translate>Message banner</legend>\n\n          <label class=\"c8y-switch\">\n            <input\n              class=\"form-control\"\n              name=\"messageBannerEnabled\"\n              type=\"checkbox\"\n              formControlName=\"messageBannerEnabled\"\n            />\n            <span></span>\n            <span translate>Enable message banner</span>\n          </label>\n          <div\n            class=\"collapse\"\n            [collapse]=\"!formGroup.value.messageBanner.messageBannerEnabled\"\n            [isAnimated]=\"true\"\n          >\n            <div class=\"d-flex a-i-center gap-8 p-t-16 p-b-16\">\n              <fieldset class=\"c8y-fieldset p-16\">\n                <legend>{{ 'Message type' | translate }}</legend>\n                <label\n                  class=\"c8y-radio radio-inline\"\n                  title=\"{{ 'Info' | translate }}\"\n                >\n                  <input\n                    type=\"radio\"\n                    value=\"info\"\n                    formControlName=\"messageBannerType\"\n                  />\n                  <span></span>\n                  <span class=\"d-flex a-i-center\">\n                    <i\n                      class=\"text-info icon-16 m-r-4\"\n                      c8yIcon=\"info-circle\"\n                    ></i>\n                    Info\n                  </span>\n                </label>\n                <label\n                  class=\"c8y-radio radio-inline\"\n                  title=\"{{ 'Warning' | translate }}\"\n                >\n                  <input\n                    type=\"radio\"\n                    value=\"warning\"\n                    formControlName=\"messageBannerType\"\n                  />\n                  <span></span>\n                  <span class=\"d-flex a-i-center\">\n                    <i\n                      class=\"text-warning icon-16 m-r-4\"\n                      c8yIcon=\"warning\"\n                    ></i>\n                    {{ 'Warning' | translate }}\n                  </span>\n                </label>\n                <label\n                  class=\"c8y-radio radio-inline\"\n                  title=\"{{ 'Danger' | translate }}\"\n                >\n                  <input\n                    type=\"radio\"\n                    value=\"danger\"\n                    formControlName=\"messageBannerType\"\n                  />\n                  <span></span>\n                  <span class=\"d-flex a-i-center\">\n                    <i\n                      class=\"text-danger icon-16 m-r-4\"\n                      c8yIcon=\"exclamation-circle\"\n                    ></i>\n                    {{ 'Danger' | translate }}\n                  </span>\n                </label>\n                <label\n                  class=\"c8y-radio radio-inline\"\n                  title=\"{{ 'Success' | translate }}\"\n                >\n                  <input\n                    type=\"radio\"\n                    value=\"success\"\n                    formControlName=\"messageBannerType\"\n                  />\n                  <span></span>\n                  <span class=\"d-flex a-i-center\">\n                    <i\n                      class=\"text-success icon-16 m-r-4\"\n                      c8yIcon=\"check-circle\"\n                    ></i>\n                    {{ 'Success' | translate }}\n                  </span>\n                </label>\n                <label\n                  class=\"c8y-radio radio-inline\"\n                  title=\"{{ 'System' | translate }}\"\n                >\n                  <input\n                    type=\"radio\"\n                    value=\"system\"\n                    formControlName=\"messageBannerType\"\n                  />\n                  <span></span>\n                  <span>\n                    <i\n                      class=\"text-primary icon-16 m-r4\"\n                      c8yIcon=\"wrench\"\n                    ></i>\n                    {{ 'System' | translate }}\n                  </span>\n                </label>\n              </fieldset>\n            </div>\n\n            <c8y-form-group\n              class=\"m-b-32 p-b-32\"\n              [style]=\"{ height: '300px' }\"\n              *ngIf=\"formGroup.value.messageBanner.messageBannerEnabled\"\n            >\n              <label\n                for=\"messageBannerContent\"\n                translate\n              >\n                Message content\n              </label>\n              <c8y-editor\n                class=\"flex-grow form-control\"\n                style=\"height: 100%\"\n                formControlName=\"messageBannerContent\"\n                [editorOptions]=\"{language: 'markdown'}\"\n                monacoEditorMarkerValidator\n              ></c8y-editor>\n              <c8y-messages\n                [helpMessage]=\"messageBannerHelp | translate: messageBannerHelpParams\"\n              ></c8y-messages>\n              <c8y-messages></c8y-messages>\n            </c8y-form-group>\n\n            <button\n              class=\"btn btn-default\"\n              type=\"button\"\n              (click)=\"previewBanner()\"\n            >\n              <i\n                class=\"m-r-4\"\n                c8yIcon=\"eye\"\n              ></i>\n              <span translate>Preview banner</span>\n            </button>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i3.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage", "additionalMessages"] }, { kind: "directive", type: i3.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i3.HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CollapseModule }, { kind: "directive", type: i4.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "component", type: StaticAssetsFilePickerComponent, selector: "c8y-static-assets-file-picker", inputs: ["isCSSURL", "staticAssetType", "supportedFileExtensions", "layout", "size"] }, { kind: "component", type: EditorComponent, selector: "c8y-editor", inputs: ["editorOptions", "theme"], outputs: ["editorInit"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: BrandingFormComponent, decorators: [{
             type: Component,
@@ -1169,7 +1169,7 @@ class BrandingThemeFormComponent {
         return this.addDarkThemePrefix ? 'dark-' : '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: BrandingThemeFormComponent, deps: [{ token: i2$1.ActivatedRoute }, { token: i2.FormBuilder }, { token: i3.FilesService }, { token: i1$2.BrandingShadesService }, { token: i3.ThemeSwitcherService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: BrandingThemeFormComponent, isStandalone: true, selector: "c8y-branding-theme-form", host: { classAttribute: "d-contents" }, ngImport: i0, template: "<c8y-help [src]=\"'/docs/enterprise-tenant/customization/#light-dark-theme-tab'\"></c8y-help>\n\n<div\n  class=\"inner-scroll\"\n  [formGroup]=\"formGroup\"\n>\n  <!--   Logos -->\n  <div class=\"card-block\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n          translate\n        >\n          Logos\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend translate>Brand logo</legend>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"brand-logo-img\"\n                  translate\n                >\n                  Brand logo file\n                </label>\n                <c8y-static-assets-file-picker\n                  name=\"brand-logo-img\"\n                  [supportedFileExtensions]=\"imageFileExtensions\"\n                  [isCSSURL]=\"true\"\n                  [size]=\"150\"\n                  formControlName=\"brand-logo-img\"\n                ></c8y-static-assets-file-picker>\n                <c8y-messages [helpMessage]=\"'Supported files: *.png, *.svg, *.jpg' | translate\"></c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"brand-logo-img-height\"\n                  for=\"brand-logo-img-height\"\n                  translate\n                >\n                  Brand logo height\n                </label>\n                <input\n                  class=\"form-control\"\n                  id=\"brand-logo-img-height\"\n                  placeholder=\"{{ 'e.g. {{ example }}' | translate: { example: '50' } }}\"\n                  name=\"brand-logo-img-height\"\n                  type=\"number\"\n                  formControlName=\"brand-logo-img-height\"\n                />\n                <c8y-messages [helpMessage]=\"'Value is applied in px' | translate\"></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n          <div class=\"col-md-6\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend translate>Navigator logo</legend>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"navigator-platform-logo\"\n                  translate\n                >\n                  Navigator logo file\n                </label>\n                <c8y-static-assets-file-picker\n                  name=\"navigator-platform-logo\"\n                  [supportedFileExtensions]=\"imageFileExtensions\"\n                  [isCSSURL]=\"true\"\n                  [size]=\"150\"\n                  formControlName=\"navigator-platform-logo\"\n                ></c8y-static-assets-file-picker>\n                <c8y-messages [helpMessage]=\"'Supported files: *.png, *.svg, *.jpg' | translate\"></c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"navigator-platform-logo-height\"\n                  for=\"navigator-platform-logo-height\"\n                  translate\n                >\n                  Navigator logo height\n                </label>\n                <input\n                  class=\"form-control\"\n                  id=\"navigator-platform-logo-height\"\n                  placeholder=\"{{ 'e.g. {{ example }}' | translate: { example: '50' } }}\"\n                  name=\"navigator-platform-logo-height\"\n                  type=\"number\"\n                  [min]=\"1\"\n                  formControlName=\"navigator-platform-logo-height\"\n                />\n                <c8y-messages [helpMessage]=\"'Value is applied in px' | translate\"></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n          <div class=\"col-md-6\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend translate>Login image</legend>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"login-platform-animation-img\"\n                  translate\n                >\n                  Login image file\n                </label>\n                <c8y-static-assets-file-picker\n                  name=\"login-platform-animation-img\"\n                  [supportedFileExtensions]=\"imageFileExtensions\"\n                  [isCSSURL]=\"false\"\n                  [size]=\"150\"\n                  formControlName=\"login-platform-animation-img\"\n                ></c8y-static-assets-file-picker>\n                <c8y-messages [helpMessage]=\"'Supported files: *.png, *.svg, *.jpg' | translate\"></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!--  Brand colors -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n        >\n          {{ formStructure.brandColors.label | translate}}\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div class=\"row\">\n          <div class=\"col-md-4\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend>{{ formStructure.brandColors.brandColors.label | translate}}</legend>\n              <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of formStructure.brandColors.brandColors.colors\">\n                <label\n                  [title]=\"color.formControlName\"\n                  [for]=\"color.formControlName\"\n                >\n                  {{ color.label | translate }}\n                </label>\n                <c8y-color-input\n                  [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                  [formControlName]=\"color.formControlName\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n          <div class=\"col-md-8\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend>{{ formStructure.brandColors.shades.label | translate }}</legend>\n              <div class=\"row\">\n                <div class=\"col-md-6\" *ngFor=\"let colorColumn of formStructure.brandColors.shades.colorColumn\">\n                  <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of colorColumn\">\n                    <label\n                      [title]=\"color.formControlName\"\n                      [for]=\"color.formControlName\"\n                    >\n                      {{ color.label | translate }}\n                    </label>\n                    <c8y-color-input\n                      [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                      [formControlName]=\"color.formControlName\"\n                    ></c8y-color-input>\n                    <c8y-messages></c8y-messages>\n                  </c8y-form-group>\n                </div>\n              </div>\n              <button\n                class=\"btn btn-default btn-sm\"\n                type=\"button\"\n                data-cy=\"branding-reset-shades-button\"\n                (click)=\"regenerateShadesBasedOnPrimaryColor()\"\n                [disabled]=\"!(resetShadesButtonEnabled$ | async)\"\n              >\n                <i [c8yIcon]=\"'reset'\"></i>\n                <span translate>Reset shades</span>\n              </button>\n            </fieldset>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Status colors -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n        >\n          {{ formStructure.statusColors.label | translate }}\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div class=\"row\">\n          <div class=\"col-md-6\" *ngFor=\"let subCategory of formStructure.statusColors.subCategories\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend>{{ subCategory.label | translate }}</legend>\n              <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of subCategory.colors\">\n                <label\n                  [title]=\"color.formControlName\"\n                  [for]=\"color.formControlName\"\n                >\n                  {{ color.label | translate }}\n                </label>\n                <c8y-color-input\n                  [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                  [formControlName]=\"color.formControlName\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Generic -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n          translate\n        >\n          Generic\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend translate>Generic colors</legend>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"body-background-color\"\n                  for=\"body-background-color\"\n                  translate\n                >\n                  Body background color\n                </label>\n                <c8y-color-input\n                  name=\"body-background-color\"\n                  formControlName=\"body-background-color\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"text-color\"\n                  for=\"text-color\"\n                  translate\n                >\n                  Text color\n                </label>\n                <c8y-color-input\n                  name=\"text-color\"\n                  formControlName=\"text-color\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"text-muted\"\n                  for=\"text-muted\"\n                  translate\n                >\n                  Text muted color\n                </label>\n                <c8y-color-input\n                  name=\"text-muted\"\n                  formControlName=\"text-muted\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n          <div class=\"col-md-6\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend translate>Interactive</legend>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"link-color\"\n                  for=\"link-color\"\n                  translate\n                >\n                  Link color\n                </label>\n                <c8y-color-input\n                  name=\"link-color\"\n                  formControlName=\"link-color\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"link-hover-color\"\n                  for=\"link-hover-color\"\n                  translate\n                >\n                  Link hover color\n                </label>\n                <c8y-color-input\n                  name=\"link-hover-color\"\n                  formControlName=\"link-hover-color\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"btn-border-radius-base\"\n                  for=\"btn-border-radius-base\"\n                  translate\n                >\n                  Button border-radius\n                </label>\n                <input\n                  class=\"form-control\"\n                  placeholder=\"{{ 'e.g. 4' | translate }}\"\n                  name=\"btn-border-radius-base\"\n                  type=\"number\"\n                  formControlName=\"btn-border-radius-base\"\n                />\n                <c8y-messages [helpMessage]=\"'Value is applied in px' | translate\"></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Action bar -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n        >\n          {{ formStructure.actionBar.label | translate }}\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <fieldset class=\"c8y-fieldset p-24\" *ngFor=\"let colorColumn of formStructure.actionBar.colorColumns\">\n          <legend>{{ colorColumn.label | translate }}</legend>\n          <div class=\"row\">\n            <div class=\"col-md-6\" *ngFor=\"let subColorColumn of colorColumn.colorColumns\">\n              <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of subColorColumn\">\n                <label\n                  [title]=\"color.formControlName\"\n                  [for]=\"color.formControlName\"\n                >\n                  {{ color.label | translate }}\n                </label>\n                <c8y-color-input\n                  [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                  [formControlName]=\"color.formControlName\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n  </div>\n  <!-- Main header -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n        >\n          {{ formStructure.mainHeader.label | translate }}\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <fieldset class=\"c8y-fieldset p-24\" *ngFor=\"let colorColumn of formStructure.mainHeader.colorColumns\">\n          <legend>{{ colorColumn.label | translate }}</legend>\n          <div class=\"row\">\n            <div class=\"col-md-6\" *ngFor=\"let subColorColumn of colorColumn.colorColumns\">\n              <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of subColorColumn\">\n                <label\n                  [title]=\"color.formControlName\"\n                  [for]=\"color.formControlName\"\n                >\n                  {{ color.label | translate }}\n                </label>\n                <c8y-color-input\n                  [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                  [formControlName]=\"color.formControlName\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n  </div>\n  <!-- Navigator -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n        >\n          {{ formStructure.navigator.label }}\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div class=\"row\">\n          <div class=\"col-md-4\" *ngFor=\"let colorColumn of formStructure.navigator.colorColumns\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend>{{ colorColumn.label | translate }}</legend>\n              <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of colorColumn.colors\">\n                <label\n                  [title]=\"color.formControlName\"\n                  [for]=\"color.formControlName\"\n                >\n                  {{ color.label | translate }}\n                </label>\n                <c8y-color-input\n                  [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                  [formControlName]=\"color.formControlName\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Right drawer -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n        >\n          {{ formStructure.rightDrawer.label | translate }}\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div class=\"row\">\n          <div class=\"col-md-6\" *ngFor=\"let colorColumn of formStructure.rightDrawer.colorColumns\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend>{{ colorColumn.label | translate }}</legend>\n              <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of colorColumn.colors\">\n                <label\n                  [title]=\"color.formControlName\"\n                  [for]=\"color.formControlName\"\n                >\n                  {{ color.label | translate }}\n                </label>\n                <c8y-color-input\n                  [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                  [formControlName]=\"color.formControlName\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.MinValidationDirective, selector: "[min]", inputs: ["min"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "component", type: i3.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i3.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i3.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i3.HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.ColorInputComponent, selector: "c8y-color-input" }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: StaticAssetsFilePickerComponent, selector: "c8y-static-assets-file-picker", inputs: ["isCSSURL", "staticAssetType", "supportedFileExtensions", "layout", "size"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: BrandingThemeFormComponent, isStandalone: true, selector: "c8y-branding-theme-form", host: { classAttribute: "d-contents" }, ngImport: i0, template: "<c8y-help [src]=\"'/docs/enterprise-tenant/customization/#light-dark-theme-tab'\"></c8y-help>\n\n<div\n  class=\"inner-scroll\"\n  [formGroup]=\"formGroup\"\n>\n  <!--   Logos -->\n  <div class=\"card-block\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n          translate\n        >\n          Logos\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend translate>Brand logo</legend>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"brand-logo-img\"\n                  translate\n                >\n                  Brand logo file\n                </label>\n                <c8y-static-assets-file-picker\n                  name=\"brand-logo-img\"\n                  [supportedFileExtensions]=\"imageFileExtensions\"\n                  [isCSSURL]=\"true\"\n                  [size]=\"150\"\n                  formControlName=\"brand-logo-img\"\n                ></c8y-static-assets-file-picker>\n                <c8y-messages [helpMessage]=\"'Supported files: *.png, *.svg, *.jpg' | translate\"></c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"brand-logo-img-height\"\n                  for=\"brand-logo-img-height\"\n                  translate\n                >\n                  Brand logo height\n                </label>\n                <input\n                  class=\"form-control\"\n                  id=\"brand-logo-img-height\"\n                  placeholder=\"{{ 'e.g. {{ example }}' | translate: { example: '50' } }}\"\n                  name=\"brand-logo-img-height\"\n                  type=\"number\"\n                  formControlName=\"brand-logo-img-height\"\n                />\n                <c8y-messages [helpMessage]=\"'Value is applied in px' | translate\"></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n          <div class=\"col-md-6\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend translate>Navigator logo</legend>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"navigator-platform-logo\"\n                  translate\n                >\n                  Navigator logo file\n                </label>\n                <c8y-static-assets-file-picker\n                  name=\"navigator-platform-logo\"\n                  [supportedFileExtensions]=\"imageFileExtensions\"\n                  [isCSSURL]=\"true\"\n                  [size]=\"150\"\n                  formControlName=\"navigator-platform-logo\"\n                ></c8y-static-assets-file-picker>\n                <c8y-messages [helpMessage]=\"'Supported files: *.png, *.svg, *.jpg' | translate\"></c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"navigator-platform-logo-height\"\n                  for=\"navigator-platform-logo-height\"\n                  translate\n                >\n                  Navigator logo height\n                </label>\n                <input\n                  class=\"form-control\"\n                  id=\"navigator-platform-logo-height\"\n                  placeholder=\"{{ 'e.g. {{ example }}' | translate: { example: '50' } }}\"\n                  name=\"navigator-platform-logo-height\"\n                  type=\"number\"\n                  [min]=\"1\"\n                  formControlName=\"navigator-platform-logo-height\"\n                />\n                <c8y-messages [helpMessage]=\"'Value is applied in px' | translate\"></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n          <div class=\"col-md-6\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend translate>Login image</legend>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"login-platform-animation-img\"\n                  translate\n                >\n                  Login image file\n                </label>\n                <c8y-static-assets-file-picker\n                  name=\"login-platform-animation-img\"\n                  [supportedFileExtensions]=\"imageFileExtensions\"\n                  [isCSSURL]=\"false\"\n                  [size]=\"150\"\n                  formControlName=\"login-platform-animation-img\"\n                ></c8y-static-assets-file-picker>\n                <c8y-messages [helpMessage]=\"'Supported files: *.png, *.svg, *.jpg' | translate\"></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!--  Brand colors -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n        >\n          {{ formStructure.brandColors.label | translate}}\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div class=\"row\">\n          <div class=\"col-md-4\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend>{{ formStructure.brandColors.brandColors.label | translate}}</legend>\n              <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of formStructure.brandColors.brandColors.colors\">\n                <label\n                  [title]=\"color.formControlName\"\n                  [for]=\"color.formControlName\"\n                >\n                  {{ color.label | translate }}\n                </label>\n                <c8y-color-input\n                  [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                  [formControlName]=\"color.formControlName\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n          <div class=\"col-md-8\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend>{{ formStructure.brandColors.shades.label | translate }}</legend>\n              <div class=\"row\">\n                <div class=\"col-md-6\" *ngFor=\"let colorColumn of formStructure.brandColors.shades.colorColumn\">\n                  <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of colorColumn\">\n                    <label\n                      [title]=\"color.formControlName\"\n                      [for]=\"color.formControlName\"\n                    >\n                      {{ color.label | translate }}\n                    </label>\n                    <c8y-color-input\n                      [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                      [formControlName]=\"color.formControlName\"\n                    ></c8y-color-input>\n                    <c8y-messages></c8y-messages>\n                  </c8y-form-group>\n                </div>\n              </div>\n              <button\n                class=\"btn btn-default btn-sm\"\n                type=\"button\"\n                data-cy=\"branding-reset-shades-button\"\n                (click)=\"regenerateShadesBasedOnPrimaryColor()\"\n                [disabled]=\"!(resetShadesButtonEnabled$ | async)\"\n              >\n                <i [c8yIcon]=\"'reset'\"></i>\n                <span translate>Reset shades</span>\n              </button>\n            </fieldset>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Status colors -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n        >\n          {{ formStructure.statusColors.label | translate }}\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div class=\"row\">\n          <div class=\"col-md-6\" *ngFor=\"let subCategory of formStructure.statusColors.subCategories\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend>{{ subCategory.label | translate }}</legend>\n              <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of subCategory.colors\">\n                <label\n                  [title]=\"color.formControlName\"\n                  [for]=\"color.formControlName\"\n                >\n                  {{ color.label | translate }}\n                </label>\n                <c8y-color-input\n                  [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                  [formControlName]=\"color.formControlName\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Generic -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n          translate\n        >\n          Generic\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend translate>Generic colors</legend>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"body-background-color\"\n                  for=\"body-background-color\"\n                  translate\n                >\n                  Body background color\n                </label>\n                <c8y-color-input\n                  name=\"body-background-color\"\n                  formControlName=\"body-background-color\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"text-color\"\n                  for=\"text-color\"\n                  translate\n                >\n                  Text color\n                </label>\n                <c8y-color-input\n                  name=\"text-color\"\n                  formControlName=\"text-color\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"text-muted\"\n                  for=\"text-muted\"\n                  translate\n                >\n                  Text muted color\n                </label>\n                <c8y-color-input\n                  name=\"text-muted\"\n                  formControlName=\"text-muted\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n          <div class=\"col-md-6\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend translate>Interactive</legend>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"link-color\"\n                  for=\"link-color\"\n                  translate\n                >\n                  Link color\n                </label>\n                <c8y-color-input\n                  name=\"link-color\"\n                  formControlName=\"link-color\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"link-hover-color\"\n                  for=\"link-hover-color\"\n                  translate\n                >\n                  Link hover color\n                </label>\n                <c8y-color-input\n                  name=\"link-hover-color\"\n                  formControlName=\"link-hover-color\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"btn-border-radius-base\"\n                  for=\"btn-border-radius-base\"\n                  translate\n                >\n                  Button border-radius\n                </label>\n                <input\n                  class=\"form-control\"\n                  placeholder=\"{{ 'e.g. 4' | translate }}\"\n                  name=\"btn-border-radius-base\"\n                  type=\"number\"\n                  formControlName=\"btn-border-radius-base\"\n                />\n                <c8y-messages [helpMessage]=\"'Value is applied in px' | translate\"></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Action bar -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n        >\n          {{ formStructure.actionBar.label | translate }}\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <fieldset class=\"c8y-fieldset p-24\" *ngFor=\"let colorColumn of formStructure.actionBar.colorColumns\">\n          <legend>{{ colorColumn.label | translate }}</legend>\n          <div class=\"row\">\n            <div class=\"col-md-6\" *ngFor=\"let subColorColumn of colorColumn.colorColumns\">\n              <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of subColorColumn\">\n                <label\n                  [title]=\"color.formControlName\"\n                  [for]=\"color.formControlName\"\n                >\n                  {{ color.label | translate }}\n                </label>\n                <c8y-color-input\n                  [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                  [formControlName]=\"color.formControlName\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n  </div>\n  <!-- Main header -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n        >\n          {{ formStructure.mainHeader.label | translate }}\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <fieldset class=\"c8y-fieldset p-24\" *ngFor=\"let colorColumn of formStructure.mainHeader.colorColumns\">\n          <legend>{{ colorColumn.label | translate }}</legend>\n          <div class=\"row\">\n            <div class=\"col-md-6\" *ngFor=\"let subColorColumn of colorColumn.colorColumns\">\n              <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of subColorColumn\">\n                <label\n                  [title]=\"color.formControlName\"\n                  [for]=\"color.formControlName\"\n                >\n                  {{ color.label | translate }}\n                </label>\n                <c8y-color-input\n                  [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                  [formControlName]=\"color.formControlName\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n  </div>\n  <!-- Navigator -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n        >\n          {{ formStructure.navigator.label }}\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div class=\"row\">\n          <div class=\"col-md-4\" *ngFor=\"let colorColumn of formStructure.navigator.colorColumns\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend>{{ colorColumn.label | translate }}</legend>\n              <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of colorColumn.colors\">\n                <label\n                  [title]=\"color.formControlName\"\n                  [for]=\"color.formControlName\"\n                >\n                  {{ color.label | translate }}\n                </label>\n                <c8y-color-input\n                  [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                  [formControlName]=\"color.formControlName\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Right drawer -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n        >\n          {{ formStructure.rightDrawer.label | translate }}\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div class=\"row\">\n          <div class=\"col-md-6\" *ngFor=\"let colorColumn of formStructure.rightDrawer.colorColumns\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend>{{ colorColumn.label | translate }}</legend>\n              <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of colorColumn.colors\">\n                <label\n                  [title]=\"color.formControlName\"\n                  [for]=\"color.formControlName\"\n                >\n                  {{ color.label | translate }}\n                </label>\n                <c8y-color-input\n                  [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                  [formControlName]=\"color.formControlName\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.MinValidationDirective, selector: "[min]", inputs: ["min"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "component", type: i3.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i3.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage", "additionalMessages"] }, { kind: "directive", type: i3.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i3.HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.ColorInputComponent, selector: "c8y-color-input" }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: StaticAssetsFilePickerComponent, selector: "c8y-static-assets-file-picker", inputs: ["isCSSURL", "staticAssetType", "supportedFileExtensions", "layout", "size"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: BrandingThemeFormComponent, decorators: [{
             type: Component,