import { Component } from '@angular/core';
import { FormBuilder, FormsModule } from '@angular/forms';
import { map, distinctUntilChanged, pairwise, delay, switchMap, filter, startWith, take } from 'rxjs/operators';
import { CoreModule, FilesService, GENERIC_FILE_TYPE, ThemeSwitcherService, ColorInputComponent } from '@c8y/ngx-components';
import { cloneDeep } from 'lodash-es';
import { StaticAssetsFilePickerComponent } from '@c8y/ngx-components/static-assets';
import { BrandingShadesService, createBrandingForm } from '@c8y/ngx-components/branding/shared/data';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { defer, interval, merge, of } from 'rxjs';
import { ActivatedRoute } from '@angular/router';
import { formStructure } from './branding-theme-form-structure';
import * as i0 from "@angular/core";
import * as i1 from "@angular/router";
import * as i2 from "@angular/forms";
import * as i3 from "@c8y/ngx-components";
import * as i4 from "@c8y/ngx-components/branding/shared/data";
import * as i5 from "@angular/common";
export class BrandingThemeFormComponent {
    constructor(activatedRoute, formBuilder, filesService, brandingShades, themeSwitcher) {
        this.activatedRoute = activatedRoute;
        this.formBuilder = formBuilder;
        this.filesService = filesService;
        this.brandingShades = brandingShades;
        this.themeSwitcher = themeSwitcher;
        this.formStructure = formStructure;
        this.externalValue = {};
        this.addDarkThemePrefix = false;
        this.varsToConvertToHeight = [
            'navigator-platform-logo-height',
            'dark-navigator-platform-logo-height'
        ];
        this.addDarkThemePrefix = !!this.activatedRoute.snapshot.data.dark;
        this.themeSwitcher.temporaryChangeTheme(this.addDarkThemePrefix ? 'dark' : 'light');
        this.formGroup = this.initForm();
        this.formGroupValueChanges$ = this.formGroup.valueChanges.pipe(takeUntilDestroyed());
        this.imageFileExtensions = this.filesService
            .mapGenericFileTypesToExtensions([GENERIC_FILE_TYPE.IMAGE])
            .filter(ext => ext !== 'ico');
        const hasCustomShades$ = merge(this.formGroup.valueChanges, defer(() => of(this.formGroup.value))).pipe(takeUntilDestroyed(), map(tmp => this.brandingShades.hasCustomShadesSet(tmp['brand-primary'], tmp)), distinctUntilChanged());
        this.resetShadesButtonEnabled$ = merge(defer(() => of(this.formGroup.controls['brand-primary'].status)), this.formGroup.controls['brand-primary'].statusChanges).pipe(
        // statusChanges emits 'PENDING' when the form control is async validating
        // https://github.com/angular/angular/issues/41519
        switchMap(status => {
            if (status === 'PENDING') {
                return interval(200).pipe(map(() => this.formGroup.controls['brand-primary'].status), filter(stat => stat !== 'PENDING'), take(1), startWith(status));
            }
            return of(status);
        }), switchMap(status => {
            if (status !== 'VALID') {
                return of(false);
            }
            return hasCustomShades$;
        }));
        const brandPrimaryFormControl = this.formGroup.controls['brand-primary'];
        brandPrimaryFormControl.valueChanges
            .pipe(filter(color => this.brandingShades.isValidShadeColor(color)), takeUntilDestroyed(), distinctUntilChanged(), pairwise(), delay(5))
            .subscribe(([prev, curr]) => {
            try {
                if (!this.brandingShades.hasCustomShadesSet(prev, this.formGroup.value)) {
                    this.regenerateShadesBasedOnPrimaryColor(curr);
                }
            }
            catch (e) {
                console.log(e);
            }
        });
    }
    ngOnDestroy() {
        this.themeSwitcher.resetTemporaryTheme();
    }
    regenerateShadesBasedOnPrimaryColor(color) {
        const newShades = this.brandingShades.getShadeColorBrandingCssVars(color || this.formGroup.value['brand-primary']);
        this.formGroup.patchValue(newShades);
    }
    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;
    }
    onBlur() {
        this.onTouched();
    }
    initForm() {
        return createBrandingForm(this.formBuilder);
    }
    applyStateToForm(branding) {
        if (!branding) {
            return;
        }
        const toBePatched = {};
        const prefix = this.getPrefix();
        Object.entries(branding.brandingCssVars || {}).forEach(([key, value]) => {
            if (prefix && !key.startsWith(prefix)) {
                return;
            }
            const keyInForm = key.replace(prefix, '');
            if (this.varsToConvertToHeight.includes(keyInForm) && typeof value === 'string') {
                toBePatched[keyInForm] = Number.parseInt(value.replace(/[a-zA-Z%]/, '') || '0');
                return;
            }
            toBePatched[keyInForm] = value;
        });
        this.formGroup.patchValue(toBePatched);
    }
    convertFormToState(value) {
        const prefixedBrandingCssVars = {};
        const prefix = this.getPrefix();
        Object.entries(value).forEach(([key, value]) => {
            prefixedBrandingCssVars[`${prefix}${key}`] = value;
        });
        const externalValue = cloneDeep(this.externalValue || {});
        const currentCSSVars = externalValue['brandingCssVars'] || {};
        const assignedNewValues = Object.assign(currentCSSVars, prefixedBrandingCssVars);
        for (const key of this.varsToConvertToHeight) {
            const value = assignedNewValues[key];
            if (typeof value === 'number') {
                assignedNewValues[key] += 'px';
            }
        }
        externalValue['brandingCssVars'] = assignedNewValues;
        return JSON.stringify(externalValue, null, 2);
    }
    getPrefix() {
        return this.addDarkThemePrefix ? 'dark-' : '';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BrandingThemeFormComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2.FormBuilder }, { token: i3.FilesService }, { token: i4.BrandingShadesService }, { token: i3.ThemeSwitcherService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: BrandingThemeFormComponent, isStandalone: true, selector: "c8y-branding-theme-form", host: { classAttribute: "d-contents" }, ngImport: i0, template: "<div\n  class=\"inner-scroll\"\n  [formGroup]=\"formGroup\"\n>\n  <!--   Logos -->\n  <div class=\"card-block\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n          translate\n        >\n          Logos\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend translate>Brand logo</legend>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"brand-logo-img\"\n                  translate\n                >\n                  Brand logo file\n                </label>\n                <c8y-static-assets-file-picker\n                  name=\"brand-logo-img\"\n                  [supportedFileExtensions]=\"imageFileExtensions\"\n                  [isCSSURL]=\"true\"\n                  size=\"150\"\n                  formControlName=\"brand-logo-img\"\n                ></c8y-static-assets-file-picker>\n                <c8y-messages [helpMessage]=\"'Supported files: *.png, *.svg, *.jpg'\"></c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"brand-logo-img-height\"\n                  for=\"brand-logo-img-height\"\n                  translate\n                >\n                  Brand logo height\n                </label>\n                <input\n                  class=\"form-control\"\n                  id=\"brand-logo-img-height\"\n                  placeholder=\"{{ 'e.g. {{ example }}' | translate: { example: '50' } }}\"\n                  name=\"brand-logo-img-height\"\n                  type=\"number\"\n                  formControlName=\"brand-logo-img-height\"\n                />\n                <c8y-messages [helpMessage]=\"'Value is applied in px'\"></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n          <div class=\"col-md-6\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend translate>Navigator logo</legend>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"navigator-platform-logo\"\n                  translate\n                >\n                  Navigator logo file\n                </label>\n                <c8y-static-assets-file-picker\n                  name=\"navigator-platform-logo\"\n                  [supportedFileExtensions]=\"imageFileExtensions\"\n                  [isCSSURL]=\"true\"\n                  size=\"150\"\n                  formControlName=\"navigator-platform-logo\"\n                ></c8y-static-assets-file-picker>\n                <c8y-messages [helpMessage]=\"'Supported files: *.png, *.svg, *.jpg'\"></c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"navigator-platform-logo-height\"\n                  for=\"navigator-platform-logo-height\"\n                  translate\n                >\n                  Navigator logo height\n                </label>\n                <input\n                  class=\"form-control\"\n                  id=\"navigator-platform-logo-height\"\n                  placeholder=\"{{ 'e.g. {{ example }}' | translate: { example: '50' } }}\"\n                  name=\"navigator-platform-logo-height\"\n                  type=\"number\"\n                  formControlName=\"navigator-platform-logo-height\"\n                />\n                <c8y-messages [helpMessage]=\"'Value is applied in px'\"></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!--  Brand colors -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n        >\n          {{ formStructure.brandColors.label | translate}}\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div class=\"row\">\n          <div class=\"col-md-4\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend>{{ formStructure.brandColors.brandColors.label | translate}}</legend>\n              <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of formStructure.brandColors.brandColors.colors\">\n                <label\n                  [title]=\"color.formControlName\"\n                  [for]=\"color.formControlName\"\n                >\n                  {{ color.label | translate }}\n                </label>\n                <c8y-color-input\n                  [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                  [formControlName]=\"color.formControlName\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n          <div class=\"col-md-8\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend>{{ formStructure.brandColors.shades.label | translate }}</legend>\n              <div class=\"row\">\n                <div class=\"col-md-6\" *ngFor=\"let colorColumn of formStructure.brandColors.shades.colorColumn\">\n                  <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of colorColumn\">\n                    <label\n                      [title]=\"color.formControlName\"\n                      [for]=\"color.formControlName\"\n                    >\n                      {{ color.label | translate }}\n                    </label>\n                    <c8y-color-input\n                      [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                      [formControlName]=\"color.formControlName\"\n                    ></c8y-color-input>\n                    <c8y-messages></c8y-messages>\n                  </c8y-form-group>\n                </div>\n              </div>\n              <button\n                class=\"btn btn-default btn-sm\"\n                type=\"button\"\n                data-cy=\"branding-reset-shades-button\"\n                (click)=\"regenerateShadesBasedOnPrimaryColor()\"\n                [disabled]=\"!(resetShadesButtonEnabled$ | async)\"\n              >\n                <i [c8yIcon]=\"'reset'\"></i>\n                <span translate>Reset shades</span>\n              </button>\n            </fieldset>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Status colors -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n        >\n          {{ formStructure.statusColors.label | translate }}\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div class=\"row\">\n          <div class=\"col-md-6\" *ngFor=\"let subCategory of formStructure.statusColors.subCategories\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend>{{ subCategory.label | translate }}</legend>\n              <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of subCategory.colors\">\n                <label\n                  [title]=\"color.formControlName\"\n                  [for]=\"color.formControlName\"\n                >\n                  {{ color.label | translate }}\n                </label>\n                <c8y-color-input\n                  [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                  [formControlName]=\"color.formControlName\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Generic -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n          translate\n        >\n          Generic\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend translate>Generic colors</legend>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"body-background-color\"\n                  for=\"body-background-color\"\n                  translate\n                >\n                  Body background color\n                </label>\n                <c8y-color-input\n                  name=\"body-background-color\"\n                  formControlName=\"body-background-color\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"text-color\"\n                  for=\"text-color\"\n                  translate\n                >\n                  Text color\n                </label>\n                <c8y-color-input\n                  name=\"text-color\"\n                  formControlName=\"text-color\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"text-muted\"\n                  for=\"text-muted\"\n                  translate\n                >\n                  Text muted color\n                </label>\n                <c8y-color-input\n                  name=\"text-muted\"\n                  formControlName=\"text-muted\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n          <div class=\"col-md-6\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend translate>Interactive</legend>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"link-color\"\n                  for=\"link-color\"\n                  translate\n                >\n                  Link color\n                </label>\n                <c8y-color-input\n                  name=\"link-color\"\n                  formControlName=\"link-color\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"link-hover-color\"\n                  for=\"link-hover-color\"\n                  translate\n                >\n                  Link hover color\n                </label>\n                <c8y-color-input\n                  name=\"link-hover-color\"\n                  formControlName=\"link-hover-color\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"btn-border-radius-base\"\n                  for=\"btn-border-radius-base\"\n                  translate\n                >\n                  Button border-radius\n                </label>\n                <input\n                  class=\"form-control\"\n                  placeholder=\"{{ 'e.g. 4' | translate }}\"\n                  name=\"btn-border-radius-base\"\n                  type=\"number\"\n                  formControlName=\"btn-border-radius-base\"\n                />\n                <c8y-messages [helpMessage]=\"'Value is applied in px'\"></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Action bar -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n        >\n          {{ formStructure.actionBar.label | translate }}\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <fieldset class=\"c8y-fieldset p-24\" *ngFor=\"let colorColumn of formStructure.actionBar.colorColumns\">\n          <legend>{{ colorColumn.label | translate }}</legend>\n          <div class=\"row\">\n            <div class=\"col-md-6\" *ngFor=\"let subColorColumn of colorColumn.colorColumns\">\n              <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of subColorColumn\">\n                <label\n                  [title]=\"color.formControlName\"\n                  [for]=\"color.formControlName\"\n                >\n                  {{ color.label | translate }}\n                </label>\n                <c8y-color-input\n                  [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                  [formControlName]=\"color.formControlName\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n  </div>\n  <!-- Main header -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n        >\n          {{ formStructure.mainHeader.label | translate }}\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <fieldset class=\"c8y-fieldset p-24\" *ngFor=\"let colorColumn of formStructure.mainHeader.colorColumns\">\n          <legend>{{ colorColumn.label | translate }}</legend>\n          <div class=\"row\">\n            <div class=\"col-md-6\" *ngFor=\"let subColorColumn of colorColumn.colorColumns\">\n              <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of subColorColumn\">\n                <label\n                  [title]=\"color.formControlName\"\n                  [for]=\"color.formControlName\"\n                >\n                  {{ color.label | translate }}\n                </label>\n                <c8y-color-input\n                  [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                  [formControlName]=\"color.formControlName\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n  </div>\n  <!-- Navigator -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n        >\n          {{ formStructure.navigator.label }}\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div class=\"row\">\n          <div class=\"col-md-4\" *ngFor=\"let colorColumn of formStructure.navigator.colorColumns\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend>{{ colorColumn.label | translate }}</legend>\n              <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of colorColumn.colors\">\n                <label\n                  [title]=\"color.formControlName\"\n                  [for]=\"color.formControlName\"\n                >\n                  {{ color.label | translate }}\n                </label>\n                <c8y-color-input\n                  [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                  [formControlName]=\"color.formControlName\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Right drawer -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n        >\n          {{ formStructure.rightDrawer.label | translate }}\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div class=\"row\">\n          <div class=\"col-md-6\" *ngFor=\"let colorColumn of formStructure.rightDrawer.colorColumns\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend>{{ colorColumn.label | translate }}</legend>\n              <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of colorColumn.colors\">\n                <label\n                  [title]=\"color.formControlName\"\n                  [for]=\"color.formControlName\"\n                >\n                  {{ color.label | translate }}\n                </label>\n                <c8y-color-input\n                  [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                  [formControlName]=\"color.formControlName\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { 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: "component", type: i3.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i3.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i3.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.ColorInputComponent, selector: "c8y-color-input" }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: StaticAssetsFilePickerComponent, selector: "c8y-static-assets-file-picker", inputs: ["isCSSURL", "staticAssetType", "supportedFileExtensions", "layout", "size"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BrandingThemeFormComponent, decorators: [{
            type: Component,
            args: [{ selector: 'c8y-branding-theme-form', standalone: true, host: { class: 'd-contents' }, imports: [CoreModule, FormsModule, StaticAssetsFilePickerComponent, ColorInputComponent], template: "<div\n  class=\"inner-scroll\"\n  [formGroup]=\"formGroup\"\n>\n  <!--   Logos -->\n  <div class=\"card-block\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n          translate\n        >\n          Logos\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend translate>Brand logo</legend>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"brand-logo-img\"\n                  translate\n                >\n                  Brand logo file\n                </label>\n                <c8y-static-assets-file-picker\n                  name=\"brand-logo-img\"\n                  [supportedFileExtensions]=\"imageFileExtensions\"\n                  [isCSSURL]=\"true\"\n                  size=\"150\"\n                  formControlName=\"brand-logo-img\"\n                ></c8y-static-assets-file-picker>\n                <c8y-messages [helpMessage]=\"'Supported files: *.png, *.svg, *.jpg'\"></c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"brand-logo-img-height\"\n                  for=\"brand-logo-img-height\"\n                  translate\n                >\n                  Brand logo height\n                </label>\n                <input\n                  class=\"form-control\"\n                  id=\"brand-logo-img-height\"\n                  placeholder=\"{{ 'e.g. {{ example }}' | translate: { example: '50' } }}\"\n                  name=\"brand-logo-img-height\"\n                  type=\"number\"\n                  formControlName=\"brand-logo-img-height\"\n                />\n                <c8y-messages [helpMessage]=\"'Value is applied in px'\"></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n          <div class=\"col-md-6\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend translate>Navigator logo</legend>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"navigator-platform-logo\"\n                  translate\n                >\n                  Navigator logo file\n                </label>\n                <c8y-static-assets-file-picker\n                  name=\"navigator-platform-logo\"\n                  [supportedFileExtensions]=\"imageFileExtensions\"\n                  [isCSSURL]=\"true\"\n                  size=\"150\"\n                  formControlName=\"navigator-platform-logo\"\n                ></c8y-static-assets-file-picker>\n                <c8y-messages [helpMessage]=\"'Supported files: *.png, *.svg, *.jpg'\"></c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"navigator-platform-logo-height\"\n                  for=\"navigator-platform-logo-height\"\n                  translate\n                >\n                  Navigator logo height\n                </label>\n                <input\n                  class=\"form-control\"\n                  id=\"navigator-platform-logo-height\"\n                  placeholder=\"{{ 'e.g. {{ example }}' | translate: { example: '50' } }}\"\n                  name=\"navigator-platform-logo-height\"\n                  type=\"number\"\n                  formControlName=\"navigator-platform-logo-height\"\n                />\n                <c8y-messages [helpMessage]=\"'Value is applied in px'\"></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!--  Brand colors -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n        >\n          {{ formStructure.brandColors.label | translate}}\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div class=\"row\">\n          <div class=\"col-md-4\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend>{{ formStructure.brandColors.brandColors.label | translate}}</legend>\n              <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of formStructure.brandColors.brandColors.colors\">\n                <label\n                  [title]=\"color.formControlName\"\n                  [for]=\"color.formControlName\"\n                >\n                  {{ color.label | translate }}\n                </label>\n                <c8y-color-input\n                  [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                  [formControlName]=\"color.formControlName\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n          <div class=\"col-md-8\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend>{{ formStructure.brandColors.shades.label | translate }}</legend>\n              <div class=\"row\">\n                <div class=\"col-md-6\" *ngFor=\"let colorColumn of formStructure.brandColors.shades.colorColumn\">\n                  <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of colorColumn\">\n                    <label\n                      [title]=\"color.formControlName\"\n                      [for]=\"color.formControlName\"\n                    >\n                      {{ color.label | translate }}\n                    </label>\n                    <c8y-color-input\n                      [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                      [formControlName]=\"color.formControlName\"\n                    ></c8y-color-input>\n                    <c8y-messages></c8y-messages>\n                  </c8y-form-group>\n                </div>\n              </div>\n              <button\n                class=\"btn btn-default btn-sm\"\n                type=\"button\"\n                data-cy=\"branding-reset-shades-button\"\n                (click)=\"regenerateShadesBasedOnPrimaryColor()\"\n                [disabled]=\"!(resetShadesButtonEnabled$ | async)\"\n              >\n                <i [c8yIcon]=\"'reset'\"></i>\n                <span translate>Reset shades</span>\n              </button>\n            </fieldset>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Status colors -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n        >\n          {{ formStructure.statusColors.label | translate }}\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div class=\"row\">\n          <div class=\"col-md-6\" *ngFor=\"let subCategory of formStructure.statusColors.subCategories\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend>{{ subCategory.label | translate }}</legend>\n              <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of subCategory.colors\">\n                <label\n                  [title]=\"color.formControlName\"\n                  [for]=\"color.formControlName\"\n                >\n                  {{ color.label | translate }}\n                </label>\n                <c8y-color-input\n                  [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                  [formControlName]=\"color.formControlName\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Generic -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n          translate\n        >\n          Generic\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend translate>Generic colors</legend>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"body-background-color\"\n                  for=\"body-background-color\"\n                  translate\n                >\n                  Body background color\n                </label>\n                <c8y-color-input\n                  name=\"body-background-color\"\n                  formControlName=\"body-background-color\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"text-color\"\n                  for=\"text-color\"\n                  translate\n                >\n                  Text color\n                </label>\n                <c8y-color-input\n                  name=\"text-color\"\n                  formControlName=\"text-color\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"text-muted\"\n                  for=\"text-muted\"\n                  translate\n                >\n                  Text muted color\n                </label>\n                <c8y-color-input\n                  name=\"text-muted\"\n                  formControlName=\"text-muted\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n          <div class=\"col-md-6\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend translate>Interactive</legend>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"link-color\"\n                  for=\"link-color\"\n                  translate\n                >\n                  Link color\n                </label>\n                <c8y-color-input\n                  name=\"link-color\"\n                  formControlName=\"link-color\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"link-hover-color\"\n                  for=\"link-hover-color\"\n                  translate\n                >\n                  Link hover color\n                </label>\n                <c8y-color-input\n                  name=\"link-hover-color\"\n                  formControlName=\"link-hover-color\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n              <c8y-form-group class=\"m-b-32\">\n                <label\n                  title=\"btn-border-radius-base\"\n                  for=\"btn-border-radius-base\"\n                  translate\n                >\n                  Button border-radius\n                </label>\n                <input\n                  class=\"form-control\"\n                  placeholder=\"{{ 'e.g. 4' | translate }}\"\n                  name=\"btn-border-radius-base\"\n                  type=\"number\"\n                  formControlName=\"btn-border-radius-base\"\n                />\n                <c8y-messages [helpMessage]=\"'Value is applied in px'\"></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Action bar -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n        >\n          {{ formStructure.actionBar.label | translate }}\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <fieldset class=\"c8y-fieldset p-24\" *ngFor=\"let colorColumn of formStructure.actionBar.colorColumns\">\n          <legend>{{ colorColumn.label | translate }}</legend>\n          <div class=\"row\">\n            <div class=\"col-md-6\" *ngFor=\"let subColorColumn of colorColumn.colorColumns\">\n              <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of subColorColumn\">\n                <label\n                  [title]=\"color.formControlName\"\n                  [for]=\"color.formControlName\"\n                >\n                  {{ color.label | translate }}\n                </label>\n                <c8y-color-input\n                  [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                  [formControlName]=\"color.formControlName\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n  </div>\n  <!-- Main header -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n        >\n          {{ formStructure.mainHeader.label | translate }}\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <fieldset class=\"c8y-fieldset p-24\" *ngFor=\"let colorColumn of formStructure.mainHeader.colorColumns\">\n          <legend>{{ colorColumn.label | translate }}</legend>\n          <div class=\"row\">\n            <div class=\"col-md-6\" *ngFor=\"let subColorColumn of colorColumn.colorColumns\">\n              <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of subColorColumn\">\n                <label\n                  [title]=\"color.formControlName\"\n                  [for]=\"color.formControlName\"\n                >\n                  {{ color.label | translate }}\n                </label>\n                <c8y-color-input\n                  [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                  [formControlName]=\"color.formControlName\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n  </div>\n  <!-- Navigator -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n        >\n          {{ formStructure.navigator.label }}\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div class=\"row\">\n          <div class=\"col-md-4\" *ngFor=\"let colorColumn of formStructure.navigator.colorColumns\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend>{{ colorColumn.label | translate }}</legend>\n              <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of colorColumn.colors\">\n                <label\n                  [title]=\"color.formControlName\"\n                  [for]=\"color.formControlName\"\n                >\n                  {{ color.label | translate }}\n                </label>\n                <c8y-color-input\n                  [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                  [formControlName]=\"color.formControlName\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Right drawer -->\n  <div class=\"card-block separator-top\">\n    <div class=\"row\">\n      <div class=\"col-xs-12 col-sm-3 col-md-2 p-t-16\">\n        <h4\n          class=\"text-normal text-right text-left-xs m-b-16\"\n        >\n          {{ formStructure.rightDrawer.label | translate }}\n        </h4>\n      </div>\n      <div class=\"col-xs-12 col-sm-9 col-md-10\">\n        <div class=\"row\">\n          <div class=\"col-md-6\" *ngFor=\"let colorColumn of formStructure.rightDrawer.colorColumns\">\n            <fieldset class=\"c8y-fieldset p-24\">\n              <legend>{{ colorColumn.label | translate }}</legend>\n              <c8y-form-group class=\"m-b-32\" *ngFor=\"let color of colorColumn.colors\">\n                <label\n                  [title]=\"color.formControlName\"\n                  [for]=\"color.formControlName\"\n                >\n                  {{ color.label | translate }}\n                </label>\n                <c8y-color-input\n                  [attr.data-cy]=\"'branding-theme-form-color-input-' + color.formControlName\"\n                  [formControlName]=\"color.formControlName\"\n                ></c8y-color-input>\n                <c8y-messages></c8y-messages>\n              </c8y-form-group>\n            </fieldset>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
        }], ctorParameters: () => [{ type: i1.ActivatedRoute }, { type: i2.FormBuilder }, { type: i3.FilesService }, { type: i4.BrandingShadesService }, { type: i3.ThemeSwitcherService }] });
//# sourceMappingURL=data:application/json;base64, 