@vgip/meta-ui 2.1.3 → 2.1.5

package/src/lib/fieldReference/style.scss

@@ -1,273 +0,0 @@
-.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

@@ -1,44 +0,0 @@
-/*
- * @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

@@ -1,163 +0,0 @@
-<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

@@ -1,98 +0,0 @@
-/*
- * @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

@@ -1,6 +0,0 @@
-@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

@@ -1,87 +0,0 @@
-.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;
-    }
-  }
-}