branding/shared/lazy/branding-form/branding-form.component.ts
host | { |
selector | c8y-branding-form |
standalone | true |
imports |
CoreModule
FormsModule
CollapseModule
StaticAssetsFilePickerComponent
EditorComponent
|
templateUrl | ./branding-form.component.html |
Properties |
Methods |
constructor(formBuilder: FormBuilder, messageBannerService: MessageBannerService)
|
|||||||||
Parameters :
|
applyStateToForm | ||||||
applyStateToForm(branding: BrandingOptionsJson)
|
||||||
Parameters :
Returns :
void
|
cockieBannerChange | ||||||
cockieBannerChange(toggleState: boolean)
|
||||||
Parameters :
Returns :
void
|
convertFormToState | ||||
convertFormToState(value)
|
||||
Parameters :
Returns :
string
|
initForm |
initForm()
|
Returns :
any
|
onBlur |
onBlur()
|
Returns :
void
|
previewBanner |
previewBanner()
|
Returns :
void
|
registerOnChange | ||||||
registerOnChange(fn: (value: string) => void)
|
||||||
Parameters :
Returns :
void
|
registerOnTouched | ||||||
registerOnTouched(fn: () => void)
|
||||||
Parameters :
Returns :
void
|
writeValue | ||||||
writeValue(obj: string)
|
||||||
Parameters :
Returns :
void
|
formGroup |
Type : ReturnType<>
|
messageBannerHelpParams |
Type : object
|
Default value : {
headerMark: '`#`',
listMark: '`*`',
boldMark: '`**`',
italicMark: '`_`',
linkMark: '`[]()`'
}
|
<div
class="inner-scroll"
[formGroup]="formGroup"
>
<!-- Title & Favicon-->
<div class="card-block">
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-2 p-t-16">
<h4 class="text-normal text-right text-left-xs m-b-16">
{{ 'Title & favicon' | translate }}
</h4>
</div>
<div class="col-xs-12 col-sm-9 col-md-10">
<div
class="row p-t-16 p-b-16"
[formGroupName]="'genericApplicationOptions'"
>
<div class="col-md-6">
<c8y-form-group class="m-b-32">
<label
for="globalTitle"
translate
>
Title
</label>
<input
class="form-control"
id="globalTitle"
name="globalTitle"
type="text"
formControlName="globalTitle"
/>
<c8y-messages
[helpMessage]="'Title to display in the browser tab' | translate"
></c8y-messages>
</c8y-form-group>
</div>
<div class="col-md-6">
<c8y-form-group>
<label translate>Favicon</label>
<c8y-static-assets-file-picker
name="faviconUrl"
[supportedFileExtensions]="['ico']"
[isCSSURL]="false"
formControlName="faviconUrl"
></c8y-static-assets-file-picker>
<c8y-messages [helpMessage]="'Supported files: *.ico'"></c8y-messages>
</c8y-form-group>
</div>
</div>
</div>
</div>
</div>
<div class="card-block separator-top">
<div class="col-xs-12 col-sm-3 col-md-2 p-t-16">
<h4
class="text-normal text-right text-left-xs m-b-16"
translate
>
Dark theme
</h4>
</div>
<div class="col-xs-12 col-sm-9 col-md-10">
<c8y-form-group class="m-b-32 p-t-8 m-t-4">
<label class="c8y-switch">
<input
class="form-control"
name="darkThemeAvailable"
type="checkbox"
formControlName="darkThemeAvailable"
/>
<span></span>
<span translate>Enable dark theme support</span>
</label>
</c8y-form-group>
</div>
</div>
<!-- Typography -->
<div class="card-block separator-top">
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-2 p-t-16">
<h4
class="text-normal text-right text-left-xs m-b-16"
translate
>
Typography
</h4>
</div>
<div class="col-xs-12 col-sm-9 col-md-10">
<div class="row">
<div class="col-md-6">
<fieldset
class="c8y-fieldset p-24"
[formGroupName]="'baseTypography'"
>
<legend translate>Base typography</legend>
<c8y-form-group class="m-b-32">
<label
for="font-url"
translate
>
Fonts URL
</label>
<input
class="form-control"
id="font-url"
placeholder="{{
'e.g. {{ example }}' | translate : { example: 'https://fonts.googleapis.com/css?family=Roboto:400,500,700' }
}}"
type="text"
formControlName="font-url"
/>
<c8y-messages [helpMessage]="'The Google fonts URL' | translate"></c8y-messages>
</c8y-form-group>
<c8y-form-group class="m-b-32">
<label
title="font-family-base"
for="font-family-base"
translate
>
Base font stack
</label>
<input
class="form-control"
id="font-family-base"
placeholder="{{ 'e.g. {{ example }}' | translate : {example: '"Roboto", Arial, sans-serif'} }}"
name="font-family-base"
type="text"
formControlName="font-family-base"
/>
<c8y-messages></c8y-messages>
</c8y-form-group>
</fieldset>
</div>
<div class="col-md-6">
<fieldset
class="c8y-fieldset p-24"
[formGroupName]="'headingsAndNavigatorTypography'"
>
<legend>{{ 'Headings & navigator' | translate }}</legend>
<c8y-form-group class="m-b-32">
<label
title="font-family-headings"
for="font-family-headings"
translate
>
Headings font stack
</label>
<input
class="form-control"
id="font-family-headings"
placeholder="{{ 'e.g. {{ example }}' | translate : {example: '"Roboto", Arial, sans-serif'} }}"
type="text"
formControlName="font-family-headings"
/>
<c8y-messages
[helpMessage]="
'Leave empty to use the same font as the base font stack' | translate
"
></c8y-messages>
</c8y-form-group>
<c8y-form-group class="m-b-32">
<label
title="navigator-font-family"
translate
>
Navigator font stack
</label>
<div class="form-control-static">
<label class="c8y-radio radio-inline">
<input
name="navigator-font-family"
type="radio"
formControlName="navigator-font-family"
[value]="'var(--font-family-base)'"
/>
<span></span>
<span translate>Match base font stack</span>
</label>
<label
class="c8y-radio radio-inline"
title="Radio Two"
>
<input
name="navigator-font-family"
type="radio"
formControlName="navigator-font-family"
[value]="'var(--font-family-headings)'"
/>
<span></span>
<span translate>Match headings font stack</span>
</label>
</div>
</c8y-form-group>
</fieldset>
</div>
</div>
</div>
</div>
</div>
<!-- Cookie banner -->
<div class="card-block separator-top">
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-2 p-t-16">
<h4
class="text-normal text-right text-left-xs m-b-16"
translate
>
Cookie banner
</h4>
</div>
<div class="col-xs-12 col-sm-9 col-md-10">
<fieldset
class="c8y-fieldset p-24"
[formGroupName]="'cookieBanner'"
>
<legend translate>Cookie banner</legend>
<label class="c8y-switch">
<input
class="form-control"
name="cookieBannerEnabled"
type="checkbox"
[ngModelOptions]="{ standalone: true }"
[ngModel]="!formGroup.value.cookieBanner.cookieBannerDisabled"
(ngModelChange)="cockieBannerChange($event)"
/>
<span></span>
<span translate>Enable cookie banner</span>
</label>
<div
class="collapse"
[collapse]="formGroup.value.cookieBanner.cookieBannerDisabled"
[isAnimated]="true"
>
<div
class="row"
style="min-height: 227px"
>
<ng-container *ngIf="formGroup.value.cookieBanner.cookieBannerDisabled !== true">
<div class="col-md-6">
<c8y-form-group class="m-b-32">
<label
for="cookieBannerTitle"
translate
>
Title
</label>
<input
class="form-control"
id="cookieBannerTitle"
name="cookieBannerTitle"
type="text"
formControlName="cookieBannerTitle"
/>
<c8y-messages></c8y-messages>
</c8y-form-group>
<c8y-form-group class="m-b-32">
<label
for="policyUrl"
translate
>
Link to privacy policy
</label>
<input
class="form-control"
id="policyUrl"
name="policyUrl"
type="text"
formControlName="policyUrl"
/>
<c8y-messages></c8y-messages>
</c8y-form-group>
<c8y-form-group class="m-b-32">
<label
for="policyVersion"
translate
>
Version of privacy policy
</label>
<input
class="form-control"
id="policyVersion"
name="policyVersion"
type="text"
formControlName="policyVersion"
/>
<c8y-messages
[helpMessage]="
'Changing the version of the privacy policy invalidates already existing cookie consents.'
| translate
"
></c8y-messages>
</c8y-form-group>
</div>
<div class="col-md-6">
<c8y-form-group class="m-b-32">
<label
for="cookieBannerText"
translate
>
Text
</label>
<textarea
class="form-control"
id="cookieBannerText"
name="cookieBannerText"
rows="8"
formControlName="cookieBannerText"
></textarea>
<c8y-messages></c8y-messages>
</c8y-form-group>
</div>
</ng-container>
</div>
</div>
</fieldset>
</div>
</div>
</div>
<!-- Message banner -->
<div class="card-block separator-top">
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-2 p-t-16">
<h4
class="text-normal text-right text-left-xs m-b-16"
translate
>
Message banner
</h4>
</div>
<div class="col-xs-12 col-sm-9 col-md-10">
<fieldset
class="c8y-fieldset p-24"
[formGroupName]="'messageBanner'"
>
<legend translate>Message banner</legend>
<label class="c8y-switch">
<input
class="form-control"
name="messageBannerEnabled"
type="checkbox"
formControlName="messageBannerEnabled"
/>
<span></span>
<span translate>Enable message banner</span>
</label>
<div
class="collapse"
[collapse]="!formGroup.value.messageBanner.messageBannerEnabled"
[isAnimated]="true"
>
<div class="d-flex a-i-center gap-8 p-t-16 p-b-16">
<fieldset class="c8y-fieldset p-16">
<legend>{{ 'Message type' | translate }}</legend>
<label
class="c8y-radio radio-inline"
title="{{ 'Info' | translate }}"
>
<input
type="radio"
value="info"
formControlName="messageBannerType"
/>
<span></span>
<span class="d-flex a-i-center">
<i
class="text-info icon-16 m-r-4"
c8yIcon="info-circle"
></i>
Info
</span>
</label>
<label
class="c8y-radio radio-inline"
title="{{ 'Warning' | translate }}"
>
<input
type="radio"
value="warning"
formControlName="messageBannerType"
/>
<span></span>
<span class="d-flex a-i-center">
<i
class="text-warning icon-16 m-r-4"
c8yIcon="warning"
></i>
{{ 'Warning' | translate }}
</span>
</label>
<label
class="c8y-radio radio-inline"
title="{{ 'Danger' | translate }}"
>
<input
type="radio"
value="danger"
formControlName="messageBannerType"
/>
<span></span>
<span class="d-flex a-i-center">
<i
class="text-danger icon-16 m-r-4"
c8yIcon="exclamation-circle"
></i>
{{ 'Danger' | translate }}
</span>
</label>
<label
class="c8y-radio radio-inline"
title="{{ 'Success' | translate }}"
>
<input
type="radio"
value="success"
formControlName="messageBannerType"
/>
<span></span>
<span class="d-flex a-i-center">
<i
class="text-success icon-16 m-r-4"
c8yIcon="check-circle"
></i>
{{ 'Success' | translate }}
</span>
</label>
<label
class="c8y-radio radio-inline"
title="{{ 'System' | translate }}"
>
<input
type="radio"
value="system"
formControlName="messageBannerType"
/>
<span></span>
<span>
<i
class="text-primary icon-16 m-r4"
c8yIcon="wrench"
></i>
{{ 'System' | translate }}
</span>
</label>
</fieldset>
</div>
<c8y-form-group
class="m-b-32 p-b-32"
[style]="{ height: '300px' }"
*ngIf="formGroup.value.messageBanner.messageBannerEnabled"
>
<label
for="messageBannerContent"
translate
>
Message content
</label>
<c8y-editor
class="flex-grow form-control"
style="height: 100%"
formControlName="messageBannerContent"
monacoEditorMarkerValidator
></c8y-editor>
<c8y-messages
[helpMessage]="messageBannerHelp | translate: messageBannerHelpParams"
></c8y-messages>
<c8y-messages></c8y-messages>
</c8y-form-group>
<button
class="btn btn-default"
type="button"
(click)="previewBanner()"
>
<i
class="m-r-4"
c8yIcon="eye"
></i>
<span translate>Preview banner</span>
</button>
</div>
</fieldset>
</div>
</div>
</div>
</div>