File

branding/shared/lazy/branding-form/branding-form.component.ts

Implements

ControlValueAccessor

Metadata

Index

Properties
Methods

Constructor

constructor(formBuilder: FormBuilder, messageBannerService: MessageBannerService)
Parameters :
Name Type Optional
formBuilder FormBuilder No
messageBannerService MessageBannerService No

Methods

applyStateToForm
applyStateToForm(branding: BrandingOptionsJson)
Parameters :
Name Type Optional
branding BrandingOptionsJson No
Returns : void
cockieBannerChange
cockieBannerChange(toggleState: boolean)
Parameters :
Name Type Optional
toggleState boolean No
Returns : void
convertFormToState
convertFormToState(value)
Parameters :
Name Optional
value No
Returns : string
initForm
initForm()
Returns : any
onBlur
onBlur()
Returns : void
previewBanner
previewBanner()
Returns : void
registerOnChange
registerOnChange(fn: (value: string) => void)
Parameters :
Name Type Optional
fn function No
Returns : void
registerOnTouched
registerOnTouched(fn: () => void)
Parameters :
Name Type Optional
fn function No
Returns : void
writeValue
writeValue(obj: string)
Parameters :
Name Type Optional
obj string No
Returns : void

Properties

formGroup
Type : ReturnType<>
messageBannerHelp
Default value : gettext( 'Supports markdown. Use {{ headerMark }} for headers, {{ listMark }} for lists, {{ boldMark }} for bold, {{ italicMark }} for italic, and {{ linkMark }} for links.' )
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: '&quot;Roboto&quot;, 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: '&quot;Roboto&quot;, 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>

results matching ""

    No results matching ""