@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
144 lines • 86.1 kB
JavaScript
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.13", 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.13", 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.13", 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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnJhbmRpbmctdGhlbWUtZm9ybS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9icmFuZGluZy9zaGFyZWQvbGF6eS9icmFuZGluZy10aGVtZS1mb3JtL2JyYW5kaW5nLXRoZW1lLWZvcm0uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vYnJhbmRpbmcvc2hhcmVkL2xhenkvYnJhbmRpbmctdGhlbWUtZm9ybS9icmFuZGluZy10aGVtZS1mb3JtLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQWEsTUFBTSxlQUFlLENBQUM7QUFDckQsT0FBTyxFQUF3QixXQUFXLEVBQUUsV0FBVyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDaEYsT0FBTyxFQUNMLEdBQUcsRUFDSCxvQkFBb0IsRUFDcEIsUUFBUSxFQUNSLEtBQUssRUFDTCxTQUFTLEVBQ1QsTUFBTSxFQUNOLFNBQVMsRUFDVCxJQUFJLEVBQ0wsTUFBTSxnQkFBZ0IsQ0FBQztBQUN4QixPQUFPLEVBQ0wsVUFBVSxFQUNWLFlBQVksRUFDWixpQkFBaUIsRUFDakIsb0JBQW9CLEVBQ3BCLG1CQUFtQixFQUNwQixNQUFNLHFCQUFxQixDQUFDO0FBQzdCLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxXQUFXLENBQUM7QUFDdEMsT0FBTyxFQUFFLCtCQUErQixFQUFFLE1BQU0sbUNBQW1DLENBQUM7QUFDcEYsT0FBTyxFQUVMLHFCQUFxQixFQUNyQixrQkFBa0IsRUFDbkIsTUFBTSwwQ0FBMEMsQ0FBQztBQUNsRCxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUNoRSxPQUFPLEVBQWMsS0FBSyxFQUFFLFFBQVEsRUFBRSxLQUFLLEVBQUUsRUFBRSxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQzlELE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxpQkFBaUIsQ0FB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