import { Component } from '@angular/core';
import { FormBuilder, FormsModule } from '@angular/forms';
import { CollapseModule } from 'ngx-bootstrap/collapse';
import { CoreModule, gettext, MessageBannerService } from '@c8y/ngx-components';
import { cloneDeep } from 'lodash-es';
import { StaticAssetsFilePickerComponent } from '@c8y/ngx-components/static-assets';
import { brandingFormGroupTopLevelEntries, brandingFormGroupTopLevelEntriesToUnpack, createGenericBrandingForm } from '@c8y/ngx-components/branding/shared/data';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { EditorComponent } from '@c8y/ngx-components/editor';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
import * as i2 from "@c8y/ngx-components";
import * as i3 from "@angular/common";
import * as i4 from "ngx-bootstrap/collapse";
export class BrandingFormComponent {
    constructor(formBuilder, messageBannerService) {
        this.formBuilder = formBuilder;
        this.messageBannerService = messageBannerService;
        this.messageBannerHelp = gettext('Supports markdown. Use {{ headerMark }} for headers, {{ listMark }} for lists, {{ boldMark }} for bold, {{ italicMark }} for italic, and {{ linkMark }} for links.');
        this.messageBannerHelpParams = {
            headerMark: '`#`',
            listMark: '`*`',
            boldMark: '`**`',
            italicMark: '`_`',
            linkMark: '`[]()`'
        };
        this.externalValue = {};
        this.formGroup = this.initForm();
        this.formGroupValueChanges$ = this.formGroup.valueChanges.pipe(takeUntilDestroyed());
    }
    writeValue(obj) {
        try {
            const parsedObj = JSON.parse(obj);
            this.externalValue = parsedObj;
            this.applyStateToForm(parsedObj);
        }
        catch (e) {
            // failed to parse
        }
    }
    registerOnChange(fn) {
        this.formGroupValueChanges$.subscribe(value => fn(this.convertFormToState(value)));
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    cockieBannerChange(toggleState) {
        this.formGroup.controls.cookieBanner.patchValue({ cookieBannerDisabled: !toggleState });
    }
    onBlur() {
        this.onTouched();
    }
    initForm() {
        return createGenericBrandingForm(this.formBuilder);
    }
    applyStateToForm(branding) {
        if (!branding) {
            return;
        }
        let toBePatched = brandingFormGroupTopLevelEntries.reduceRight((prev, curr) => {
            if (brandingFormGroupTopLevelEntriesToUnpack.includes(curr)) {
                return Object.assign(prev, { [curr]: branding });
            }
            return Object.assign(prev, { [curr]: branding[curr] });
        }, {});
        toBePatched = Object.keys(this.formGroup.controls)
            .filter(key => !brandingFormGroupTopLevelEntries.includes(key))
            .reduceRight((prev, curr) => {
            return Object.assign(prev, { [curr]: branding.brandingCssVars || {} });
        }, toBePatched);
        this.formGroup.patchValue(toBePatched);
    }
    convertFormToState(value) {
        const topLevel = brandingFormGroupTopLevelEntries.reduceRight((prev, curr) => {
            if (brandingFormGroupTopLevelEntriesToUnpack.includes(curr)) {
                return Object.assign(prev, value[curr]);
            }
            return Object.assign(prev, { [curr]: value[curr] });
        }, {});
        const newBrandingCssVars = Object.entries(value).reduceRight((prev, [key, value]) => {
            if (brandingFormGroupTopLevelEntries.includes(key)) {
                return prev;
            }
            return Object.assign(prev, value);
        }, {});
        const externalValue = cloneDeep(this.externalValue || {});
        Object.assign(externalValue, topLevel);
        const currentCSSVars = externalValue['brandingCssVars'] || {};
        const assignedNewValues = Object.assign(currentCSSVars, newBrandingCssVars);
        externalValue['brandingCssVars'] = assignedNewValues;
        return JSON.stringify(externalValue, null, 2);
    }
    previewBanner() {
        this.messageBannerService.showBanner();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BrandingFormComponent, deps: [{ token: i1.FormBuilder }, { token: i2.MessageBannerService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BrandingFormComponent, isStandalone: true, selector: "c8y-branding-form", host: { classAttribute: "d-contents" }, ngImport: i0, template: "<div\n  class=\"inner-scroll\"\n  [formGroup]=\"formGroup\"\n>\n  <!--  Title & Favicon-->\n  <div class=\"card-block\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4 class=\"text-normal text-right text-left-xs m-b-16\">\n          {{ 'Title & favicon' | translate }}\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div\n          class=\"row p-t-16 p-b-16\"\n          [formGroupName]=\"'genericApplicationOptions'\"\n        >\n          <div class=\"col-md-6\">\n            <c8y-form-group class=\"m-b-32\">\n              <label\n                for=\"globalTitle\"\n                translate\n              >\n                Title\n              </label>\n              <input\n                class=\"form-control\"\n                id=\"globalTitle\"\n                name=\"globalTitle\"\n                type=\"text\"\n                formControlName=\"globalTitle\"\n              />\n              <c8y-messages\n                [helpMessage]=\"'Title to display in the browser tab' | translate\"\n              ></c8y-messages>\n            </c8y-form-group>\n          </div>\n          <div class=\"col-md-6\">\n            <c8y-form-group>\n              <label translate>Favicon</label>\n              <c8y-static-assets-file-picker\n                name=\"faviconUrl\"\n                [supportedFileExtensions]=\"['ico']\"\n                [isCSSURL]=\"false\"\n                formControlName=\"faviconUrl\"\n              ></c8y-static-assets-file-picker>\n              <c8y-messages [helpMessage]=\"'Supported files: *.ico'\"></c8y-messages>\n            </c8y-form-group>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"card-block separator-top\">\n    <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n      <h4\n        class=\"text-normal text-right text-left-xs m-b-16\"\n        translate\n      >\n        Dark theme\n      </h4>\n    </div>\n    <div class=\"col-xs-12 col-sm-9 col-md-10\">\n      <c8y-form-group class=\"m-b-32 p-t-8 m-t-4\">\n        <label class=\"c8y-switch\">\n          <input\n            class=\"form-control\"\n            name=\"darkThemeAvailable\"\n            type=\"checkbox\"\n            formControlName=\"darkThemeAvailable\"\n          />\n          <span></span>\n          <span translate>Enable dark theme support</span>\n        </label>\n      </c8y-form-group>\n    </div>\n  </div>\n  <!-- Typography -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n          translate\n        >\n          Typography\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <fieldset\n              class=\"c8y-fieldset p-24\"\n              [formGroupName]=\"'baseTypography'\"\n            >\n              <legend translate>Base typography</legend>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  for=\"font-url\"\n                  translate\n                >\n                  Fonts URL\n                </label>\n                <input\n                  class=\"form-control\"\n                  id=\"font-url\"\n                  placeholder=\"{{\n                    'e.g. {{ example }}' | translate : { example: 'https://fonts.googleapis.com/css?family=Roboto:400,500,700' }\n                  }}\"\n                  type=\"text\"\n                  formControlName=\"font-url\"\n                />\n                <c8y-messages [helpMessage]=\"'The Google fonts URL' | translate\"></c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"font-family-base\"\n                  for=\"font-family-base\"\n                  translate\n                >\n                  Base font stack\n                </label>\n                <input\n                  class=\"form-control\"\n                  id=\"font-family-base\"\n                  placeholder=\"{{ 'e.g. {{ example }}' | translate : {example: '&quot;Roboto&quot;, Arial, sans-serif'} }}\"\n                  name=\"font-family-base\"\n                  type=\"text\"\n                  formControlName=\"font-family-base\"\n                />\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n          <div class=\"col-md-6\">\n            <fieldset\n              class=\"c8y-fieldset p-24\"\n              [formGroupName]=\"'headingsAndNavigatorTypography'\"\n            >\n              <legend>{{ 'Headings & navigator' | translate }}</legend>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"font-family-headings\"\n                  for=\"font-family-headings\"\n                  translate\n                >\n                  Headings font stack\n                </label>\n                <input\n                  class=\"form-control\"\n                  id=\"font-family-headings\"\n                  placeholder=\"{{ 'e.g. {{ example }}' | translate : {example: '&quot;Roboto&quot;, Arial, sans-serif'} }}\"\n                  type=\"text\"\n                  formControlName=\"font-family-headings\"\n                />\n                <c8y-messages\n                  [helpMessage]=\"\n                    'Leave empty to use the same font as the base font stack' | translate\n                  \"\n                ></c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"navigator-font-family\"\n                  translate\n                >\n                  Navigator font stack\n                </label>\n                <div class=\"form-control-static\">\n                  <label class=\"c8y-radio radio-inline\">\n                    <input\n                      name=\"navigator-font-family\"\n                      type=\"radio\"\n                      formControlName=\"navigator-font-family\"\n                      [value]=\"'var(--font-family-base)'\"\n                    />\n                    <span></span>\n                    <span translate>Match base font stack</span>\n                  </label>\n                  <label\n                    class=\"c8y-radio radio-inline\"\n                    title=\"Radio Two\"\n                  >\n                    <input\n                      name=\"navigator-font-family\"\n                      type=\"radio\"\n                      formControlName=\"navigator-font-family\"\n                      [value]=\"'var(--font-family-headings)'\"\n                    />\n                    <span></span>\n                    <span translate>Match headings font stack</span>\n                  </label>\n                </div>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Cookie banner -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n          translate\n        >\n          Cookie banner\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <fieldset\n          class=\"c8y-fieldset p-24\"\n          [formGroupName]=\"'cookieBanner'\"\n        >\n          <legend translate>Cookie banner</legend>\n          <label class=\"c8y-switch\">\n            <input\n              class=\"form-control\"\n              name=\"cookieBannerEnabled\"\n              type=\"checkbox\"\n              [ngModelOptions]=\"{ standalone: true }\"\n              [ngModel]=\"!formGroup.value.cookieBanner.cookieBannerDisabled\"\n              (ngModelChange)=\"cockieBannerChange($event)\"\n            />\n            <span></span>\n            <span translate>Enable cookie banner</span>\n          </label>\n\n          <div\n            class=\"collapse\"\n            [collapse]=\"formGroup.value.cookieBanner.cookieBannerDisabled\"\n            [isAnimated]=\"true\"\n          >\n            <div\n              class=\"row\"\n              style=\"min-height: 227px\"\n            >\n              <ng-container *ngIf=\"formGroup.value.cookieBanner.cookieBannerDisabled !== true\">\n                <div class=\"col-md-6\">\n                  <c8y-form-group class=\"m-b-32\">\n                    <label\n                      for=\"cookieBannerTitle\"\n                      translate\n                    >\n                      Title\n                    </label>\n                    <input\n                      class=\"form-control\"\n                      id=\"cookieBannerTitle\"\n                      name=\"cookieBannerTitle\"\n                      type=\"text\"\n                      formControlName=\"cookieBannerTitle\"\n                    />\n                    <c8y-messages></c8y-messages>\n                  </c8y-form-group>\n                  <c8y-form-group class=\"m-b-32\">\n                    <label\n                      for=\"policyUrl\"\n                      translate\n                    >\n                      Link to privacy policy\n                    </label>\n                    <input\n                      class=\"form-control\"\n                      id=\"policyUrl\"\n                      name=\"policyUrl\"\n                      type=\"text\"\n                      formControlName=\"policyUrl\"\n                    />\n                    <c8y-messages></c8y-messages>\n                  </c8y-form-group>\n                  <c8y-form-group class=\"m-b-32\">\n                    <label\n                      for=\"policyVersion\"\n                      translate\n                    >\n                      Version of privacy policy\n                    </label>\n                    <input\n                      class=\"form-control\"\n                      id=\"policyVersion\"\n                      name=\"policyVersion\"\n                      type=\"text\"\n                      formControlName=\"policyVersion\"\n                    />\n                    <c8y-messages\n                      [helpMessage]=\"\n                        'Changing the version of the privacy policy invalidates already existing cookie consents.'\n                          | translate\n                      \"\n                    ></c8y-messages>\n                  </c8y-form-group>\n                </div>\n\n                <div class=\"col-md-6\">\n                  <c8y-form-group class=\"m-b-32\">\n                    <label\n                      for=\"cookieBannerText\"\n                      translate\n                    >\n                      Text\n                    </label>\n                    <textarea\n                      class=\"form-control\"\n                      id=\"cookieBannerText\"\n                      name=\"cookieBannerText\"\n                      rows=\"8\"\n                      formControlName=\"cookieBannerText\"\n                    ></textarea>\n                    <c8y-messages></c8y-messages>\n                  </c8y-form-group>\n                </div>\n              </ng-container>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n  </div>\n  <!-- Message banner -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n          translate\n        >\n          Message banner\n        </h4>\n      </div>\n\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <fieldset\n          class=\"c8y-fieldset p-24\"\n          [formGroupName]=\"'messageBanner'\"\n        >\n          <legend translate>Message banner</legend>\n\n          <label class=\"c8y-switch\">\n            <input\n              class=\"form-control\"\n              name=\"messageBannerEnabled\"\n              type=\"checkbox\"\n              formControlName=\"messageBannerEnabled\"\n            />\n            <span></span>\n            <span translate>Enable message banner</span>\n          </label>\n          <div\n            class=\"collapse\"\n            [collapse]=\"!formGroup.value.messageBanner.messageBannerEnabled\"\n            [isAnimated]=\"true\"\n          >\n            <div class=\"d-flex a-i-center gap-8 p-t-16 p-b-16\">\n              <fieldset class=\"c8y-fieldset p-16\">\n                <legend>{{ 'Message type' | translate }}</legend>\n                <label\n                  class=\"c8y-radio radio-inline\"\n                  title=\"{{ 'Info' | translate }}\"\n                >\n                  <input\n                    type=\"radio\"\n                    value=\"info\"\n                    formControlName=\"messageBannerType\"\n                  />\n                  <span></span>\n                  <span class=\"d-flex a-i-center\">\n                    <i\n                      class=\"text-info icon-16 m-r-4\"\n                      c8yIcon=\"info-circle\"\n                    ></i>\n                    Info\n                  </span>\n                </label>\n                <label\n                  class=\"c8y-radio radio-inline\"\n                  title=\"{{ 'Warning' | translate }}\"\n                >\n                  <input\n                    type=\"radio\"\n                    value=\"warning\"\n                    formControlName=\"messageBannerType\"\n                  />\n                  <span></span>\n                  <span class=\"d-flex a-i-center\">\n                    <i\n                      class=\"text-warning icon-16 m-r-4\"\n                      c8yIcon=\"warning\"\n                    ></i>\n                    {{ 'Warning' | translate }}\n                  </span>\n                </label>\n                <label\n                  class=\"c8y-radio radio-inline\"\n                  title=\"{{ 'Danger' | translate }}\"\n                >\n                  <input\n                    type=\"radio\"\n                    value=\"danger\"\n                    formControlName=\"messageBannerType\"\n                  />\n                  <span></span>\n                  <span class=\"d-flex a-i-center\">\n                    <i\n                      class=\"text-danger icon-16 m-r-4\"\n                      c8yIcon=\"exclamation-circle\"\n                    ></i>\n                    {{ 'Danger' | translate }}\n                  </span>\n                </label>\n                <label\n                  class=\"c8y-radio radio-inline\"\n                  title=\"{{ 'Success' | translate }}\"\n                >\n                  <input\n                    type=\"radio\"\n                    value=\"success\"\n                    formControlName=\"messageBannerType\"\n                  />\n                  <span></span>\n                  <span class=\"d-flex a-i-center\">\n                    <i\n                      class=\"text-success icon-16 m-r-4\"\n                      c8yIcon=\"check-circle\"\n                    ></i>\n                    {{ 'Success' | translate }}\n                  </span>\n                </label>\n                <label\n                  class=\"c8y-radio radio-inline\"\n                  title=\"{{ 'System' | translate }}\"\n                >\n                  <input\n                    type=\"radio\"\n                    value=\"system\"\n                    formControlName=\"messageBannerType\"\n                  />\n                  <span></span>\n                  <span>\n                    <i\n                      class=\"text-primary icon-16 m-r4\"\n                      c8yIcon=\"wrench\"\n                    ></i>\n                    {{ 'System' | translate }}\n                  </span>\n                </label>\n              </fieldset>\n            </div>\n\n            <c8y-form-group\n              class=\"m-b-32 p-b-32\"\n              [style]=\"{ height: '300px' }\"\n              *ngIf=\"formGroup.value.messageBanner.messageBannerEnabled\"\n            >\n              <label\n                for=\"messageBannerContent\"\n                translate\n              >\n                Message content\n              </label>\n              <c8y-editor\n                class=\"flex-grow form-control\"\n                style=\"height: 100%\"\n                formControlName=\"messageBannerContent\"\n                [editorOptions]=\"{language: 'markdown'}\"\n                monacoEditorMarkerValidator\n              ></c8y-editor>\n              <c8y-messages\n                [helpMessage]=\"messageBannerHelp | translate: messageBannerHelpParams\"\n              ></c8y-messages>\n              <c8y-messages></c8y-messages>\n            </c8y-form-group>\n\n            <button\n              class=\"btn btn-default\"\n              type=\"button\"\n              (click)=\"previewBanner()\"\n            >\n              <i\n                class=\"m-r-4\"\n                c8yIcon=\"eye\"\n              ></i>\n              <span translate>Preview banner</span>\n            </button>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.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: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i2.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.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"], outputs: ["editorInit"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BrandingFormComponent, decorators: [{
            type: Component,
            args: [{ selector: 'c8y-branding-form', standalone: true, host: { class: 'd-contents' }, imports: [
                        CoreModule,
                        FormsModule,
                        CollapseModule,
                        StaticAssetsFilePickerComponent,
                        EditorComponent
                    ], template: "<div\n  class=\"inner-scroll\"\n  [formGroup]=\"formGroup\"\n>\n  <!--  Title & Favicon-->\n  <div class=\"card-block\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4 class=\"text-normal text-right text-left-xs m-b-16\">\n          {{ 'Title & favicon' | translate }}\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div\n          class=\"row p-t-16 p-b-16\"\n          [formGroupName]=\"'genericApplicationOptions'\"\n        >\n          <div class=\"col-md-6\">\n            <c8y-form-group class=\"m-b-32\">\n              <label\n                for=\"globalTitle\"\n                translate\n              >\n                Title\n              </label>\n              <input\n                class=\"form-control\"\n                id=\"globalTitle\"\n                name=\"globalTitle\"\n                type=\"text\"\n                formControlName=\"globalTitle\"\n              />\n              <c8y-messages\n                [helpMessage]=\"'Title to display in the browser tab' | translate\"\n              ></c8y-messages>\n            </c8y-form-group>\n          </div>\n          <div class=\"col-md-6\">\n            <c8y-form-group>\n              <label translate>Favicon</label>\n              <c8y-static-assets-file-picker\n                name=\"faviconUrl\"\n                [supportedFileExtensions]=\"['ico']\"\n                [isCSSURL]=\"false\"\n                formControlName=\"faviconUrl\"\n              ></c8y-static-assets-file-picker>\n              <c8y-messages [helpMessage]=\"'Supported files: *.ico'\"></c8y-messages>\n            </c8y-form-group>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"card-block separator-top\">\n    <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n      <h4\n        class=\"text-normal text-right text-left-xs m-b-16\"\n        translate\n      >\n        Dark theme\n      </h4>\n    </div>\n    <div class=\"col-xs-12 col-sm-9 col-md-10\">\n      <c8y-form-group class=\"m-b-32 p-t-8 m-t-4\">\n        <label class=\"c8y-switch\">\n          <input\n            class=\"form-control\"\n            name=\"darkThemeAvailable\"\n            type=\"checkbox\"\n            formControlName=\"darkThemeAvailable\"\n          />\n          <span></span>\n          <span translate>Enable dark theme support</span>\n        </label>\n      </c8y-form-group>\n    </div>\n  </div>\n  <!-- Typography -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n          translate\n        >\n          Typography\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <fieldset\n              class=\"c8y-fieldset p-24\"\n              [formGroupName]=\"'baseTypography'\"\n            >\n              <legend translate>Base typography</legend>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  for=\"font-url\"\n                  translate\n                >\n                  Fonts URL\n                </label>\n                <input\n                  class=\"form-control\"\n                  id=\"font-url\"\n                  placeholder=\"{{\n                    'e.g. {{ example }}' | translate : { example: 'https://fonts.googleapis.com/css?family=Roboto:400,500,700' }\n                  }}\"\n                  type=\"text\"\n                  formControlName=\"font-url\"\n                />\n                <c8y-messages [helpMessage]=\"'The Google fonts URL' | translate\"></c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"font-family-base\"\n                  for=\"font-family-base\"\n                  translate\n                >\n                  Base font stack\n                </label>\n                <input\n                  class=\"form-control\"\n                  id=\"font-family-base\"\n                  placeholder=\"{{ 'e.g. {{ example }}' | translate : {example: '&quot;Roboto&quot;, Arial, sans-serif'} }}\"\n                  name=\"font-family-base\"\n                  type=\"text\"\n                  formControlName=\"font-family-base\"\n                />\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n          <div class=\"col-md-6\">\n            <fieldset\n              class=\"c8y-fieldset p-24\"\n              [formGroupName]=\"'headingsAndNavigatorTypography'\"\n            >\n              <legend>{{ 'Headings & navigator' | translate }}</legend>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"font-family-headings\"\n                  for=\"font-family-headings\"\n                  translate\n                >\n                  Headings font stack\n                </label>\n                <input\n                  class=\"form-control\"\n                  id=\"font-family-headings\"\n                  placeholder=\"{{ 'e.g. {{ example }}' | translate : {example: '&quot;Roboto&quot;, Arial, sans-serif'} }}\"\n                  type=\"text\"\n                  formControlName=\"font-family-headings\"\n                />\n                <c8y-messages\n                  [helpMessage]=\"\n                    'Leave empty to use the same font as the base font stack' | translate\n                  \"\n                ></c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"navigator-font-family\"\n                  translate\n                >\n                  Navigator font stack\n                </label>\n                <div class=\"form-control-static\">\n                  <label class=\"c8y-radio radio-inline\">\n                    <input\n                      name=\"navigator-font-family\"\n                      type=\"radio\"\n                      formControlName=\"navigator-font-family\"\n                      [value]=\"'var(--font-family-base)'\"\n                    />\n                    <span></span>\n                    <span translate>Match base font stack</span>\n                  </label>\n                  <label\n                    class=\"c8y-radio radio-inline\"\n                    title=\"Radio Two\"\n                  >\n                    <input\n                      name=\"navigator-font-family\"\n                      type=\"radio\"\n                      formControlName=\"navigator-font-family\"\n                      [value]=\"'var(--font-family-headings)'\"\n                    />\n                    <span></span>\n                    <span translate>Match headings font stack</span>\n                  </label>\n                </div>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Cookie banner -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n          translate\n        >\n          Cookie banner\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <fieldset\n          class=\"c8y-fieldset p-24\"\n          [formGroupName]=\"'cookieBanner'\"\n        >\n          <legend translate>Cookie banner</legend>\n          <label class=\"c8y-switch\">\n            <input\n              class=\"form-control\"\n              name=\"cookieBannerEnabled\"\n              type=\"checkbox\"\n              [ngModelOptions]=\"{ standalone: true }\"\n              [ngModel]=\"!formGroup.value.cookieBanner.cookieBannerDisabled\"\n              (ngModelChange)=\"cockieBannerChange($event)\"\n            />\n            <span></span>\n            <span translate>Enable cookie banner</span>\n          </label>\n\n          <div\n            class=\"collapse\"\n            [collapse]=\"formGroup.value.cookieBanner.cookieBannerDisabled\"\n            [isAnimated]=\"true\"\n          >\n            <div\n              class=\"row\"\n              style=\"min-height: 227px\"\n            >\n              <ng-container *ngIf=\"formGroup.value.cookieBanner.cookieBannerDisabled !== true\">\n                <div class=\"col-md-6\">\n                  <c8y-form-group class=\"m-b-32\">\n                    <label\n                      for=\"cookieBannerTitle\"\n                      translate\n                    >\n                      Title\n                    </label>\n                    <input\n                      class=\"form-control\"\n                      id=\"cookieBannerTitle\"\n                      name=\"cookieBannerTitle\"\n                      type=\"text\"\n                      formControlName=\"cookieBannerTitle\"\n                    />\n                    <c8y-messages></c8y-messages>\n                  </c8y-form-group>\n                  <c8y-form-group class=\"m-b-32\">\n                    <label\n                      for=\"policyUrl\"\n                      translate\n                    >\n                      Link to privacy policy\n                    </label>\n                    <input\n                      class=\"form-control\"\n                      id=\"policyUrl\"\n                      name=\"policyUrl\"\n                      type=\"text\"\n                      formControlName=\"policyUrl\"\n                    />\n                    <c8y-messages></c8y-messages>\n                  </c8y-form-group>\n                  <c8y-form-group class=\"m-b-32\">\n                    <label\n                      for=\"policyVersion\"\n                      translate\n                    >\n                      Version of privacy policy\n                    </label>\n                    <input\n                      class=\"form-control\"\n                      id=\"policyVersion\"\n                      name=\"policyVersion\"\n                      type=\"text\"\n                      formControlName=\"policyVersion\"\n                    />\n                    <c8y-messages\n                      [helpMessage]=\"\n                        'Changing the version of the privacy policy invalidates already existing cookie consents.'\n                          | translate\n                      \"\n                    ></c8y-messages>\n                  </c8y-form-group>\n                </div>\n\n                <div class=\"col-md-6\">\n                  <c8y-form-group class=\"m-b-32\">\n                    <label\n                      for=\"cookieBannerText\"\n                      translate\n                    >\n                      Text\n                    </label>\n                    <textarea\n                      class=\"form-control\"\n                      id=\"cookieBannerText\"\n                      name=\"cookieBannerText\"\n                      rows=\"8\"\n                      formControlName=\"cookieBannerText\"\n                    ></textarea>\n                    <c8y-messages></c8y-messages>\n                  </c8y-form-group>\n                </div>\n              </ng-container>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n  </div>\n  <!-- Message banner -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n          translate\n        >\n          Message banner\n        </h4>\n      </div>\n\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <fieldset\n          class=\"c8y-fieldset p-24\"\n          [formGroupName]=\"'messageBanner'\"\n        >\n          <legend translate>Message banner</legend>\n\n          <label class=\"c8y-switch\">\n            <input\n              class=\"form-control\"\n              name=\"messageBannerEnabled\"\n              type=\"checkbox\"\n              formControlName=\"messageBannerEnabled\"\n            />\n            <span></span>\n            <span translate>Enable message banner</span>\n          </label>\n          <div\n            class=\"collapse\"\n            [collapse]=\"!formGroup.value.messageBanner.messageBannerEnabled\"\n            [isAnimated]=\"true\"\n          >\n            <div class=\"d-flex a-i-center gap-8 p-t-16 p-b-16\">\n              <fieldset class=\"c8y-fieldset p-16\">\n                <legend>{{ 'Message type' | translate }}</legend>\n                <label\n                  class=\"c8y-radio radio-inline\"\n                  title=\"{{ 'Info' | translate }}\"\n                >\n                  <input\n                    type=\"radio\"\n                    value=\"info\"\n                    formControlName=\"messageBannerType\"\n                  />\n                  <span></span>\n                  <span class=\"d-flex a-i-center\">\n                    <i\n                      class=\"text-info icon-16 m-r-4\"\n                      c8yIcon=\"info-circle\"\n                    ></i>\n                    Info\n                  </span>\n                </label>\n                <label\n                  class=\"c8y-radio radio-inline\"\n                  title=\"{{ 'Warning' | translate }}\"\n                >\n                  <input\n                    type=\"radio\"\n                    value=\"warning\"\n                    formControlName=\"messageBannerType\"\n                  />\n                  <span></span>\n                  <span class=\"d-flex a-i-center\">\n                    <i\n                      class=\"text-warning icon-16 m-r-4\"\n                      c8yIcon=\"warning\"\n                    ></i>\n                    {{ 'Warning' | translate }}\n                  </span>\n                </label>\n                <label\n                  class=\"c8y-radio radio-inline\"\n                  title=\"{{ 'Danger' | translate }}\"\n                >\n                  <input\n                    type=\"radio\"\n                    value=\"danger\"\n                    formControlName=\"messageBannerType\"\n                  />\n                  <span></span>\n                  <span class=\"d-flex a-i-center\">\n                    <i\n                      class=\"text-danger icon-16 m-r-4\"\n                      c8yIcon=\"exclamation-circle\"\n                    ></i>\n                    {{ 'Danger' | translate }}\n                  </span>\n                </label>\n                <label\n                  class=\"c8y-radio radio-inline\"\n                  title=\"{{ 'Success' | translate }}\"\n                >\n                  <input\n                    type=\"radio\"\n                    value=\"success\"\n                    formControlName=\"messageBannerType\"\n                  />\n                  <span></span>\n                  <span class=\"d-flex a-i-center\">\n                    <i\n                      class=\"text-success icon-16 m-r-4\"\n                      c8yIcon=\"check-circle\"\n                    ></i>\n                    {{ 'Success' | translate }}\n                  </span>\n                </label>\n                <label\n                  class=\"c8y-radio radio-inline\"\n                  title=\"{{ 'System' | translate }}\"\n                >\n                  <input\n                    type=\"radio\"\n                    value=\"system\"\n                    formControlName=\"messageBannerType\"\n                  />\n                  <span></span>\n                  <span>\n                    <i\n                      class=\"text-primary icon-16 m-r4\"\n                      c8yIcon=\"wrench\"\n                    ></i>\n                    {{ 'System' | translate }}\n                  </span>\n                </label>\n              </fieldset>\n            </div>\n\n            <c8y-form-group\n              class=\"m-b-32 p-b-32\"\n              [style]=\"{ height: '300px' }\"\n              *ngIf=\"formGroup.value.messageBanner.messageBannerEnabled\"\n            >\n              <label\n                for=\"messageBannerContent\"\n                translate\n              >\n                Message content\n              </label>\n              <c8y-editor\n                class=\"flex-grow form-control\"\n                style=\"height: 100%\"\n                formControlName=\"messageBannerContent\"\n                [editorOptions]=\"{language: 'markdown'}\"\n                monacoEditorMarkerValidator\n              ></c8y-editor>\n              <c8y-messages\n                [helpMessage]=\"messageBannerHelp | translate: messageBannerHelpParams\"\n              ></c8y-messages>\n              <c8y-messages></c8y-messages>\n            </c8y-form-group>\n\n            <button\n              class=\"btn btn-default\"\n              type=\"button\"\n              (click)=\"previewBanner()\"\n            >\n              <i\n                class=\"m-r-4\"\n                c8yIcon=\"eye\"\n              ></i>\n              <span translate>Preview banner</span>\n            </button>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2.MessageBannerService }] });
//# sourceMappingURL=data:application/json;base64, 