@vgip/meta-ui 2.1.1 → 2.1.3

package/src/lib/fieldReference/style.scss

@@ -0,0 +1,273 @@
+.Vlt-form__element--big .Vlt-input input:placeholder-shown:not(:focus) ~ label.Vlt-truncate {
+  font-size: 1.6rem;
+  margin-top: -0.8rem;
+  top: 50%;
+}
+
+.Vlt-form__element--big {
+  ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone {
+    border-right: 0;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+  &:hover, &.active {
+    .items-container, .main, .Vlt-composite__append button, ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone {
+      border-color: var(--vgip-meta-input-active-border-color);
+    }
+  }
+  &.Vlt-form__element--error {
+    .items-container, .main, .Vlt-composite__append button, ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone {
+      border-color: #f25a6b;
+    }
+  }
+  &.multiple {
+    .Vlt-composite.Vlt-dropdown {
+      margin-top: 3px;
+    }
+    &:hover:not(.Vlt-form__element--error), &.active:not(.Vlt-form__element--error) {
+      .items-container, .main, .Vlt-composite__append button, ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone {
+        border-color: var(--vgip-meta-input-active-border-color);
+      }
+    }
+    .items-container {
+      background-color: var(--vgip-meta-input-bg-color);
+      border: 1px solid var(--vgip-meta-input-border-color);
+      border-bottom: 0;
+      border-top-left-radius: 6px;
+      border-top-right-radius: 6px;
+      // &.creatable {
+      //   margin-right: 62px;
+      // }
+      .badges-container {
+        overflow: auto;
+        // max-height: 140px;
+        padding: 6px 4px 3px 6px;
+        .Vlt-badge {
+          margin-bottom: 3px;
+          margin-left: 0;
+          margin-right: 3px;
+          overflow: hidden;
+          max-width: 100%;
+          position: relative;
+          padding-right: 30px;
+          &.grid {
+            display: grid;
+          }
+        }
+      }
+    }
+    &:not(.has-value) .items-container {
+      border: 0;
+    }
+    &.has-value {
+      .main, .Vlt-composite__append button, ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone {
+        &:not(.Vlt-btn--icon) {
+          border-top: 0;
+        }
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+        height: 48px;
+      }
+      .Vlt-composite__prepend ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone {
+        border-top-right-radius: 6px;
+      }
+      .Vlt-composite__append button {
+        border-top-left-radius: 6px;
+        border-top: 0;
+      }
+    }
+  }
+}
+
+.Vlt-composite__prepend {
+  z-index: initial;
+}
+.Vlt-composite__prepend--icon {
+  top: 0;
+  padding-top: 15px;
+  left: 3px;
+}
+.Vlt-input.has-append-button {
+  .Vlt-composite__append.right-actions {
+    right: 0;
+    .Vlt-composite__append--icon:last-child {
+      width: 36px;
+    }
+  }
+}
+.Vlt-composite__append.right-actions {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  cursor: pointer;
+  .Vlt-composite__append--icon {
+    outline: none;
+    position: initial;
+    display: inline-block;
+    svg {
+      height: 14px;
+      width: 14px;
+    }
+  }
+  .Vlt-composite__append--icon:hover svg, .Vlt-composite__append--icon:focus svg {
+    fill: var(--vgip-meta-input-accent-color);
+  }
+}
+
+.vgip-disable .Vlt-composite__append{
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.Vlt-composite__append--icon.preview {
+  bottom: initial;
+  padding: 0 2px;
+}
+.Vlt-composite__append button {
+  height: 48px;
+  padding-right: 16px;
+  background: var(--vgip-meta-input-bg-color);
+  border-color: var(--vgip-meta-input-border-color);
+  padding-left: 16px;
+  border-left: 0;
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
+  &:hover {
+    background: var(--vgip-meta-input-action-hover-bg-color);
+  }
+  svg {
+    margin: -2px 0 0 0;
+    fill: var(--vgip-meta-input-accent-color);
+  }
+  &:disabled {
+    opacity: 0.2;
+  }
+}
+
+.Vlt-input input {
+  padding-left: 38px;
+  text-overflow: ellipsis;
+  padding-right: 36px;
+  &.ext {
+    padding-right: 72px;
+  }
+}
+.Vlt-composite__wrapper.has-append-button {
+  input.main {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-right: 0;
+  }
+}
+.Vlt-input input {
+  background: var(--vgip-meta-input-bg-color);
+  border-color: var(--vgip-meta-input-border-color);
+  font-weight: bold;
+  // &:hover, &:focus {
+  //   border-color: #2c2d30;
+  // }
+}
+
+.Vlt-dropdown__panel {
+  max-width: 100%;
+  width: 100%;
+  min-width: 280px;
+  .Vlt-dropdown__link.smart {
+    font-weight: bold;
+    background: var(--vgip-meta-dropdown-bg-color);
+    &.hidden {
+      display: none;
+    }
+  }
+  .Vlt-dropdown__link.bold:after {
+    background-color: #e1e2e6;
+    content: '';
+    height: 1px;
+    left: 0;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+  }
+  .Vlt-dropdown__link--selected {
+    background: rgba(44, 45, 48, 0.05);
+  }
+  .Vlt-dropdown__link > div {
+    flex: 1;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .Vlt-dropdown__link > svg {
+    // margin-left: -8px;
+    margin-right: 8px;
+  }
+}
+
+.vgip-meta-field-preview .Vlt-badge {
+  margin: 1px 3px 1px 0;
+  overflow: hidden;
+  max-width: 100%;
+}
+
+:host .search-scope {
+  width: 130px;
+  ::ng-deep .Vlt-form__element {
+    &.has-value .Vlt-select:after {
+      display: none;
+    }
+    .right-actions {
+      right: 12px;
+    }
+    label.Vlt-truncate {
+      padding-right: 48px;
+    }
+  }
+  .mobile-icon {
+    display: none;
+  }
+  @media only screen and (max-width: 575px) {
+    width: 60px;
+    &:not(.has-value) .mobile-icon {
+      display: block;
+    }
+    &.has-value {
+      .mobile-label {
+        display: block;
+      }
+    }
+    ::ng-deep .Vlt-form__element.Vlt-form__element--big {
+      .Vlt-composite__append {
+        display: none;
+      }
+      // &.has-value .Vlt-select:after {
+      //   right: -7px;
+      // }
+      .Vlt-select:after {
+        margin-right: -7px;
+      }
+      // &:not(.has-value) label {
+      //   display: none;
+      // }
+      label.Vlt-truncate {
+        visibility: hidden;
+      }
+    }
+  }
+  ::ng-deep vgip-meta-field {
+    .Vlt-input input.main.standalone {
+      padding-right: initial;
+      background: var(--vgip-meta-input-accent-bg-color);
+      border-color: var(--vgip-meta-input-border-color);
+    }
+    .Vlt-form__element {
+      padding: 0;
+      .Vlt-dropdown__panel {
+        width: initial;
+      }
+      // &:not(.has-value) > .Vlt-input > .Vlt-select > label {
+      //   margin-left: 26px;
+      // }
+    }
+  }
+}

package/src/lib/fieldReference/test.spec.ts

@@ -0,0 +1,44 @@
+/*
+ * @Author: Alexander.Vangelov@vonage.com 
+ * @Date: 2019-09-19 17:35:19 
+ * @Last Modified by: Alexander.Vangelov@vonage.com
+ * @Last Modified time: 2022-01-19 08:53:45
+ */
+
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { NgForm } from '@angular/forms';
+
+import { MetaModule } from '..';
+
+import { FieldReference } from '../fieldReference';
+
+describe('FieldReference', () => {
+  let component: FieldReference;
+  let fixture: ComponentFixture<FieldReference>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [],
+      imports: [
+        MetaModule, RouterTestingModule
+      ],
+      providers: [
+        { provide: NgForm, useValue: new NgForm([], []) }
+      ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FieldReference);
+    component = fixture.componentInstance;
+    component.parent = {};
+    component.meta = { name: 'f1', reference: { type: 'Test' } };
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/fieldReference/view.html

@@ -0,0 +1,163 @@
+<div class='vgip-meta-field-preview' *ngIf='preview && model && (!multiple || (multiple && model.length))'>
+  <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>
+  <div *ngIf='!multiple' class='vgip-meta-field-value __gu' [ngClass]="{ 'has-external-link': externalLink || model.externalLink }">
+    <svg class="Vlt-icon Vlt-icon--smaller" style='margin-top: -3px;'>
+      <use attr.xlink:href="volta/volta-brand-icons.svg#{{integrationIcon}}" />
+    </svg>
+    {{model.label || model.id}} <span class='Vlt-grey'>({{model.type}})</span>
+  </div>
+  <div *ngIf='multiple' class='vgip-meta-field-value __gu'>
+    <span *ngFor='let m of (model || [])' class='Vlt-badge Vlt-badge--app'>
+      {{m.label || m.id || m}} <span class='Vlt-grey-dark' *ngIf='isPolymorphic'>({{m.type}})</span>
+    </span>
+  </div>
+  <a [href]='externalLink || model.externalLink' target='_blank' rel='noopener'
+    *ngIf='externalLink && (model && !multiple)' class="Vlt-composite__append--icon preview" aria-label='Open external'>
+    <div class="Vlt-composite__icon">
+      <svg>
+        <use xlink:href="volta/volta-icons.svg#Vlt-icon-open" />
+      </svg>
+    </div>
+  </a>
+</div>
+<div *ngIf='!preview' class="meta-field-reference Vlt-form__element Vlt-form__element--big"
+  [ngClass]="{ 'Vlt-form__element--error': (searchError && keyListenerActive) || (f.invalid && ((f | metaModel)._parent.submitted || (ft | metaModel ).touched)), 'multiple': multiple, 'has-value': model, active: keyListenerActive }">
+  <div *ngIf='multiple' class='items-container' [ngClass]='{ creatable: isCreatable }'>
+    <div *ngIf='model' class='badges-container keep-focus' (click)='focus()' style='width: 100%;'> <!-- eslint-disable-line -->
+      <div *ngFor='let item of model' class="Vlt-badge Vlt-badge--transparent Vlt-badge--app Vlt-badge--large keep-focus" [ngClass]="{ grid: (item.label || item.id || '').length > 56}">
+        <span class='Vlt-truncate'>{{item.label || item.id || item }} <span *ngIf='isPolymorphic' class='Vlt-grey-darker' style='font-weight: normal;'>({{item.type}})</span></span>
+        <button class="Vlt-badge__dismiss keep-focus" (click)='remove($event, item)' style='position: absolute; right: 12px; top: 8px;' aria-label='Remove'></button>
+      </div>
+    </div>
+  </div>
+  <div class="Vlt-composite">
+    <div class='dropdown-wrapper Vlt-dropdown' style='width: 100%; position: absolute; top: 48px;'>
+      <div class="Vlt-dropdown__panel">
+        <div *ngIf='searchError'>
+          <div class="Vlt-callout Vlt-callout--critical keep-focus">
+            <i></i>
+            <div class="Vlt-callout__content">{{searchError}}</div>
+          </div>
+        </div>
+        <div *ngIf='!searchError && (suggestions.length || searchResults)' [ngClass]="{ suggestions: !searchResults}"
+          class="Vlt-dropdown__panel__content Vlt-dropdown__panel__content--scroll-area" style='padding: 0;'>
+          <div class="Vlt-dropdown__block"></div>
+          <div *ngIf='!searchResults' class="Vlt-dropdown__scroll">
+            <a href='#' [ngClass]="{ 'Vlt-dropdown__link--selected': activeSuggestionIndex === i, smart: suggestion.smart }" (click)='onSuggestionSelect($event, suggestion)' *ngFor='let suggestion of suggestions; let i = index'  class="Vlt-dropdown__link has-type">
+              <svg class='Vlt-icon  Vlt-icon--small'><use attr.xlink:href="volta/volta-brand-icons.svg#{{integrationIcon}}"/></svg>
+              <div class='__gu' [title]='suggestion.label'>{{ suggestion.label }}</div>
+              <small class='Vlt-grey-dark' style='text-transform: capitalize;'>{{suggestion.type}}</small>
+            </a>
+          </div>
+          <div *ngIf='searchResults' class="Vlt-dropdown__scroll">
+            <div *ngIf='!searchResults.length' class='Vlt-dropdown__block'> No records matching '<b style='pointer-events: none;'>{{searchText}}</b>' were found.</div>
+            <a href='#' [ngClass]="{ 'Vlt-dropdown__link--selected': activeSuggestionIndex === i }" (click)='onSuggestionSelect($event, suggestion)' *ngFor='let suggestion of searchResults; let i = index'  class="Vlt-dropdown__link has-type">
+              <svg class='Vlt-icon Vlt-icon--small'><use attr.xlink:href="volta/volta-brand-icons.svg#{{integrationIcon}}"/></svg>
+              <div class='__gu' [title]='suggestion.label'>{{ suggestion.label }}</div>
+              <small class='Vlt-grey-dark' style='text-transform: capitalize;'>{{suggestion.type}}</small>
+            </a>
+          </div>
+          <!-- <div *ngIf='searchResults' class="Vlt-dropdown__block" style='text-align: right; padding-top: 0;'>
+            <small>
+              {{ searchResults ? searchResults.length+' results' : 'Suggestions' }} <span style='font-style: italic; font-weight: normal;' *ngIf='searchResults'>~{{ model ? 'last search' : searchText}}</span>
+            </small>
+          </div> -->
+          <div class="Vlt-dropdown__block"></div>
+        </div>
+      </div>
+    </div>
+    <div class="Vlt-composite__prepend"
+      *ngIf='isPolymorphic && showTypes && (multiple || !model || (dropdownVisible && ((suggestions || searchResults || []).length || searchResourceType.resourceType)))'>
+      <div class="search-scope" [ngClass]="{ 'has-value': searchResourceType.resourceType }">
+        <vgip-meta-field class='shown' [meta]='searchResourceTypeMeta' [parent]='searchResourceType'
+          (onChange)='onSearchResourceTypeChanged($event)' (onLeave)='onBlur($event)'
+          [integrationCode]='integrationCode' theme='inherit'></vgip-meta-field>
+        <svg class='Vlt-icon Vlt-grey Vlt-icon--smaller visible-mobile mobile-icon'
+          style='position: absolute; top: 15px; left: 14px; pointer-events: none;'>
+          <use xlink:href="volta/volta-icons.svg#Vlt-icon-menu" />
+        </svg>
+      </div>
+    </div>
+    <div *ngIf='!(isPolymorphic && showTypes && (multiple || !model || dropdownVisible))'>
+      <!-- required by css -->
+    </div>
+    <div class="Vlt-composite__wrapper Vlt-input" style='overflow: hidden;'
+      [ngClass]="{ 'has-append-button': hasAppendButton && !disabled, 'vgip-disable': disabled }">
+      <label class='wrapper'>
+        <div class="Vlt-composite__prepend Vlt-composite__prepend--icon" style='top: 0; padding-top: 15px;'>
+          <div class="Vlt-composite__icon">
+            <svg *ngIf='isSearchable && (!model || multiple)' class='Vlt-grey'>
+              <use attr.xlink:href="volta/volta-icons.svg#Vlt-icon-{{ multiple ? 'stack' : 'search'}}" />
+            </svg>
+            <svg *ngIf='!isSearchable || (model && !multiple)'
+              [ngStyle]="{fill: integrationIcon === 'Brand-icon-vonage' ? 'var(--vgip-meta-input-color)' : ''}">
+              <use attr.xlink:href="volta/volta-brand-icons.svg#{{integrationIcon}}" />
+            </svg>
+          </div>
+          <div *ngIf='suggestions.length' class="Vlt-badge Vlt-badge--small Vlt-badge--purple"
+            style='padding: 0px 4px; position: absolute; top: 26px; left: 4px; pointer-events: none; min-width: 14px;'>
+            {{suggestions.length}}</div>
+        </div>
+        <input class='model' type='hidden' [required]='validations.required' [(ngModel)]='model' #f='ngModel' [name]='name' />
+        <input class='main' [readonly]='!isSearchable || (model && !multiple)' [ngModel]='searchText' #ft='ngModel' (ngModelChange)='onSearchTextChanged($event)' [ngModelOptions]="{standalone: true}" type="text" placeholder="{{ placeHolderLabel || ' ' }}" [ngClass]='{ ext: externalLink }' (click)='onActivated($event)' (focus)='onActivated($event)' (blur)='onBlur($event)' [disabled]='disabled' [title]="model ? model.label : ''"/>
+        <label class='Vlt-truncate hidden-mobile' style='padding-left: 25px; padding-right: 42px;'>{{ (multiple && isPolymorphic) ? '+Add ' : ((model || !isPolymorphic) ? meta.label : ( meta.searchLabel || 'Search')) }}<span *ngIf='validations.required' class='Vlt-red'>*</span>&nbsp;<span style='color: var(--vgip-meta-input-color); text-transform: capitalize;' *ngIf='model'>({{model.type || model.resourceType || model.length}})</span></label> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control-->
+        <label class='Vlt-truncate hidden-desktop' style='padding-left: 25px; padding-right: 42px;'>{{meta.label || meta.name}}<span *ngIf='validations.required' class='Vlt-red'>*</span>&nbsp;<span style='color: var(--vgip-meta-input-color); text-transform: capitalize;' *ngIf='model'>({{model.type || model.resourceType || model.length}})</span></label> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control-->
+      </label>
+      <div *ngIf='searching' class='search-progress'>
+        <div class="container">
+          <div class="bar Vlt-bg-purple"></div>
+        </div>
+      </div>
+      <div class='Vlt-composite__append right-actions'>
+        <!-- <div *ngIf='prevModel && !model' class="Vlt-composite__append--icon" (click)='revert()'>
+          <div class="Vlt-composite__icon">
+            <svg><use xlink:href="volta/volta-icons.svg#Vlt-icon-reply"/></svg>
+          </div>
+        </div> -->
+        <a href='#' *ngIf='model && !multiple' class="Vlt-composite__append--icon" (click)='removeSelection($event)'>
+          <div class="Vlt-composite__icon">
+            <svg>
+              <use xlink:href="volta/volta-icons.svg#Vlt-icon-cross" />
+            </svg>
+          </div>
+        </a>
+        <a [href]='externalLink || model.externalLink' target='_blank' rel='noopener' *ngIf='externalLink && (model && !multiple)' class="Vlt-composite__append--icon" aria-label='Open external'>
+          <div class="Vlt-composite__icon">
+            <svg>
+              <use xlink:href="volta/volta-icons.svg#Vlt-icon-open" />
+            </svg>
+          </div>
+        </a>
+      </div>
+    </div>
+    <!-- <span *ngIf='hasCreatables'>
+      <button type='button' *ngIf='!model || multiple' (click)='openResource()' class="Vlt-btn Vlt-btn--secondary Vlt-btn--icon Vlt-btn--large" style='margin-left: 12px;'>
+        <svg><use xlink:href="volta/volta-icons.svg#Vlt-icon-plus"/></svg>
+      </button>
+      <button type='button' *ngIf='model && !multiple' (click)='openResource(model)' class="Vlt-btn Vlt-btn--primary Vlt-btn--icon Vlt-btn--large" style='margin-left: 12px;'>
+        <svg><use xlink:href="volta/volta-icons.svg#Vlt-icon-edit"/></svg>
+      </button>
+    </span> -->
+    <div *ngIf='hasAppendButton && !disabled' class="Vlt-composite__append">
+      <button (focus)='onActivated($event)' (blur)='onBlur($event)' type='button' *ngIf='!model || multiple'
+        (click)='openResource()' class="Vlt-btn Vlt-btn--white Vlt-btn--icon" aria-label='Add new' [disabled]='delegate'>
+        <svg>
+          <use xlink:href="volta/volta-icons.svg#Vlt-icon-plus" />
+        </svg>
+      </button>
+      <button (focus)='onActivated($event)' (blur)='onBlur($event)' type='button' *ngIf='model && !multiple'
+        (click)='openResource(model)' class="Vlt-btn Vlt-btn--white Vlt-btn--icon" aria-label='Edit' [disabled]='delegate'>
+        <svg>
+          <use xlink:href="volta/volta-icons.svg#Vlt-icon-edit" />
+        </svg>
+      </button>
+    </div>
+  </div>
+  <small *ngIf='f.invalid && ((f | metaModel)._parent.submitted || ((ft | metaModel).touched && keyListenerActive))'
+    class="Vlt-form__element__error">
+    <span *ngIf="f.errors.required">Required</span>
+    <span *ngIf="f.errors.pattern">Should match '{{validations.pattern}}' pattern</span>
+    <span *ngIf="f.errors.custom">{{f.errors.custom}}&nbsp;</span>
+  </small>
+  <small *ngIf='meta.helpText || meta.hint' class="Vlt-form__element__hint">{{meta.helpText || meta.hint}}</small>
+</div>

package/src/lib/fieldRichtext/index.ts

@@ -0,0 +1,98 @@
+/*
+ * @Author: Alexander.Vangelov@vonage.com
+ * @Date: 2019-09-19 17:35:13
+ * @Last Modified by: Alexander.Vangelov@vonage.com
+ * @Last Modified time: 2020-03-26 17:15:50
+ */
+
+import { Component, OnInit } from '@angular/core';
+import { ControlContainer, NgForm } from '@angular/forms';
+
+// import { QUILL_CONFIG_TOKEN, QuillConfig } from 'ngx-quill';
+
+import { FieldAbstract } from '../fieldAbstract';
+// import { tMetaField } from '../../../metaTypes/tMetaField'
+import { templateBuilder } from '../common/utils/templateBuilder';
+import { MetaContextService } from '../services/metaContext';
+
+// export const quillConfig = {
+//   modules: {
+//     syntax: false,
+//     toolbar: [
+//       ['bold', 'italic', 'underline'],
+//       [{ list: 'bullet' }],
+//       [{ header: [1, 2, 3, 4, 5, 6, false] }],
+//       [{ font: [] }],
+//       [{ align: [] }]
+//     ]
+//   }
+// };
+
+@Component({
+    templateUrl: './view.html',
+    styleUrls: [
+        './style.scss',
+        './quill.scss'
+    ],
+    viewProviders: [
+        { provide: ControlContainer, useExisting: NgForm },
+        // { provide: QUILL_CONFIG_TOKEN, useValue: quillConfig }
+    ],
+    standalone: false
+})
+export class FieldRichtext extends FieldAbstract implements OnInit {
+  // @Input() meta: any;
+  active: boolean;
+  quillConfigModules = {
+    syntax: false,
+    toolbar: [
+      ['bold', 'italic', 'underline'],
+      [{ list: 'bullet' }],
+      [{ header: [1, 2, 3, 4, 5, 6, false] }],
+      [{ font: [] }],
+      [{ align: [] }]
+    ]
+  };
+
+  constructor( private metaContext: MetaContextService ) {
+    super();
+  }
+
+  static setup(instance, parent, meta) {
+    const d = meta.default || meta.defaultValue;
+    if (d && !parent[meta.name]) {
+      if (typeof(d) === 'string') {
+        parent[meta.name] = d;
+      } else {
+        parent[meta.name] = d.id || d.value;
+      }
+    }
+  }
+
+  ngOnInit() {
+    if (typeof(this.parent[this.meta.name]) === 'string') {
+      this.parent[this.meta.name] = templateBuilder(this.metaContext, this.parent[this.meta.name]);
+    }
+    // if (this.default && !this.model) {
+    //   setTimeout(()=>{
+    //     if (typeof(this.default) == 'string') {
+    //       this.parent[this.meta.name] = this.default;
+    //     } else {
+    //       this.parent[this.meta.name] = this.default.id || this.default.value;
+    //     }
+    //   }, 0);
+    // }
+  }
+
+  onModelChangeLocal(value) {
+    if (!value && this.prevModel && this.isPersistedParent) {
+      value = '';
+    }
+    this.onModelChange(value);
+  }
+
+  textToSpeech() {
+    this.focus();
+  }
+
+}

package/src/lib/fieldRichtext/quill.scss

@@ -0,0 +1,6 @@
+@use "sass:meta";
+:host ::ng-deep {
+  @include meta.load-css('quill/dist/quill.core');
+  @include meta.load-css('quill/dist/quill.bubble');
+  @include meta.load-css('quill/dist/quill.snow');
+}

package/src/lib/fieldRichtext/style.scss

@@ -0,0 +1,87 @@
+.Vlt-composite__append--icon {
+  bottom: 7px;
+  right: 16px;
+  padding: 3px;
+  width: initial;
+  height: initial;
+  cursor: pointer;
+  &:hover svg {
+    fill: #2c2d30;
+  }
+}
+
+.Vlt-form__element {
+  &.Vlt-form__element--error {
+    ::ng-deep .Vlt-textarea {
+      .ql-toolbar.ql-snow {
+        border-color: #f25a6b;
+      }
+      .ql-container.ql-snow  {
+        // background: #fde8eb;
+        border-color: #f25a6b;
+      }
+    }
+  }
+  ::ng-deep quill-editor {
+    display: initial;
+  }
+  ::ng-deep .Vlt-textarea {
+    em {
+      font-style: italic;
+    }
+    .ql-toolbar.ql-snow {
+      border: 1px solid var(--vgip-meta-input-border-color);
+      border-top-left-radius: 5px;
+      border-top-right-radius: 5px;
+      border-bottom: 0;
+      background: var(--vgip-meta-input-accent-bg-color);
+      padding: 11px 8px;
+      @media only screen and (max-width: 575px) {
+        .ql-formats {
+          margin-right: 8px;
+          zoom: 84%;
+        }
+      }
+      button, .ql-picker-label {
+        color: var(--vgip-meta-input-label-color);
+        .ql-stroke {
+          stroke: var(--vgip-meta-input-label-color);
+        }
+        &:hover {
+          color: var(--vgip-meta-input-accent-color);
+          stroke: var(--vgip-meta-input-accent-color);
+          .ql-stroke {
+            stroke: var(--vgip-meta-input-accent-color);
+          }
+        }
+      }
+    }
+    .ql-container.ql-snow {
+      border-bottom-left-radius: 5px;
+      border-bottom-right-radius: 5px;
+      min-height: 48px;
+      background: var(--vgip-meta-input-bg-color);
+      border-color: var(--vgip-meta-input-border-color);
+      .ql-editor {
+        color: var(--vgip-meta-input-color) !important;
+        h1, h2, h3, h4, h5, h6 {
+          color: inherit;
+        }
+        p {
+          color: inherit;
+        }
+        @media (hover:none) { // fix zooming on iOS
+          font-size: 16px;
+        }
+      }
+    }
+    &:hover, &:focus, &.active {
+      .ql-toolbar, .ql-container  {
+        border-color: var(--vgip-meta-input-active-border-color);
+      }
+    }
+    .ql-editor:focus {
+      border-color: var(--vgip-meta-input-active-border-color) !important;
+    }
+  }
+}