@vgip/meta-ui 2.1.3 → 2.1.5

package/src/lib/fieldSelect/style.scss

@@ -1,165 +0,0 @@
-.Vlt-form__element.no-x {
-  input.main {
-    padding-right: 40px;
-  }
-}
-
-.Vlt-form__element--big:not(.has-value) > .Vlt-input > .Vlt-select > label > label {
-  font-size: 1.6rem;
-  margin-top: -0.8rem;
-  top: 50%;
-}
-
-.Vlt-form__element--big {
-  input[readonly].main:not([disabled]) {
-    background: var(--vgip-meta-input-bg-color);
-    border: 1px solid var(--vgip-meta-input-border-color);
-  }
-  &:hover, &:focus, &.active {
-    input[readonly].main, .Vlt-composite__append button {
-      border-color: var(--vgip-meta-input-active-border-color);
-    }
-  }
-  &.Vlt-form__element--error {
-    input[readonly].main, .Vlt-composite__append button {
-      border-color: #f25a6b;
-      box-shadow: none;
-    }
-    // &:hover, &:focus, &.active {
-    //   input[readonly].main, .Vlt-composite__append button {
-    //     border-color: var(--vgip-meta-input-active-border-color);
-    //   }
-    // }
-  }
-  // .Vlt-select input.main {
-  //   &:hover, &:focus {
-  //     border-color: var(--vgip-meta-input-active-border-color);
-  //   }
-  // }
-  .Vlt-select:after {
-    background-image: var(--vgip-meta-dropdown-icon);
-    margin-right: 2px;
-  }
-  .Vlt-form__element__hint {
-    color: var(--vgip-meta-input-hint-color);
-  }
-}
-.Vlt-composite.has-append-button {
-  input[readonly].main {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    border-right: 0;
-  }
-  .Vlt-select:after {
-    margin-right: -10px;
-  }
-}
-
-.Vlt-composite__append {
-  z-index: initial;
-}
-
-.Vlt-composite__append button {
-  height: 48px;
-  background: var(--vgip-meta-input-bg-color);
-  border-color: var(--vgip-meta-input-border-color);
-  padding-right: 16px;
-  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);
-  }
-}
-
-.Vlt-dropdown__panel {
-  width: 100%;
-  .Vlt-dropdown__link {
-    padding: 0 20px 0 0;
-    &.Vlt-dropdown__link--selected {
-      background: rgba(44, 45, 48, 0.05);
-    }
-  }
-  label {
-    margin-top: 0;
-    padding: 12px 20px;
-    top: 0;
-    left: 0;
-    pointer-events: initial;
-    position: initial;
-    color: initial;
-    font-size: inherit;
-    transition: none;
-    cursor: pointer;
-    input {
-      height: 0;
-    }
-  }
-}
-input.main {
-  cursor: pointer;
-  &:disabled {
-    cursor: not-allowed;
-  }
-  padding-right: 76px;
-}
-
-.Vlt-input.has-append-button {
-  .Vlt-composite__append.right-actions {
-    right: 42px;
-  }
-}
-.Vlt-composite__append.right-actions {
-  position: absolute;
-  top: 5px;
-  right: 53px;
-  cursor: pointer;
-  .Vlt-composite__append--icon {
-    width: 36px;
-    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-search_wrap{
-  padding-top: 10px;
-  .vgip-search_input{
-    padding: 8px 36px 8px 38px;
-    width: 100%;
-    border: 1px solid var(--vgip-meta-input-border-color) !important;
-    border-radius: 6px !important;
-    &:focus, &:active, &:hover{
-      border-color: var(--vgip-meta-input-active-border-color) !important;
-    }
-  }
-  .Vlt-composite__append--icon{
-    cursor: pointer;
-    svg {
-      height: 14px;
-      width: 14px;
-    }
-    &:focus, &:active, &:hover{
-      svg {
-        fill: var(--vgip-meta-input-accent-color);
-      }
-    }
-  }
-}

package/src/lib/fieldSelect/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:34
- */
-
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-import { NgForm } from '@angular/forms';
-
-import { MetaModule } from '..';
-
-import { FieldSelect } from '../fieldSelect';
-
-describe('FieldSelect', () => {
-  let component: FieldSelect;
-  let fixture: ComponentFixture<FieldSelect>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [],
-      imports: [
-        MetaModule, RouterTestingModule
-      ],
-      providers: [
-        { provide: NgForm, useValue: new NgForm([], []) }
-      ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(FieldSelect);
-    component = fixture.componentInstance;
-    component.parent = {};
-    component.meta = { name: 'f1' };
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/fieldSelect/view.html

@@ -1,128 +0,0 @@
-<div class='vgip-meta-field-preview' *ngIf='preview && model'>
-  <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>
-  <div class='vgip-meta-field-value __gu'>
-    {{showText}}
-  </div>
-</div>
-<div *ngIf='!preview' class="Vlt-form__element"
-  [ngClass]="{ 'Vlt-form__element--big': !meta.small ,'has-value': f.value, active: keyListenerActive, 'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (ft | metaModel ).touched), 'no-x': meta.noX }">
-  <div class="Vlt-composite Vlt-dropdown Vlt-input" style='display: block;'
-    [ngClass]="{ 'has-append-button': isCreatable && !disabled }">
-    <div class="Vlt-select">
-      <label class='wrapper'>
-        <label class='Vlt-truncate'>{{meta.label || meta.name}}<span *ngIf='validations.required && options.length' class='Vlt-red'>*</span></label> <!-- eslint-disable-line -->
-        <input class='main' [required]='validations.required && !!options.length' readonly [ngModel]='showText'
-          #ft='ngModel' [ngModelOptions]="{standalone: true}" type="text"
-          [placeholder]="meta.placeholder || ' '" (click)='onActivated($event)' (focus)='onActivated($event)'
-          (blur)='onBlur($event)' [ngClass]="{ 'standalone': meta.standalone }"
-          [disabled]='disabled' [attr.aria-label]='meta.label' />
-      </label>
-      <select class='model' [required]='validations.required && !!options.length' style='display: none;'
-        [(ngModel)]='model' [ngModelOptions]="{standalone: meta.standalone}"
-        (ngModelChange)="onModelChange($event)" #f='ngModel' [name]='name'></select>
-      <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'>
-        <a href='#' *ngIf='model && !meta.noX && !disabled' class="Vlt-composite__append--icon"
-          (click)='clear($event)'>
-          <div class="Vlt-composite__icon">
-            <svg>
-              <use xlink:href="volta/volta-icons.svg#Vlt-icon-cross" />
-            </svg>
-          </div>
-        </a>
-      </div>
-    </div>
-    <div class='Vlt-dropdown__panel'>
-      <div class="Vlt-dropdown__panel__content Vlt-dropdown__panel__content--scroll-area">
-        <!-- <div class="Vlt-dropdown__title" style='padding-left: 15px;'>
-          Select ({{options.length}})
-          <div class="Vlt-dropdown__close Vlt-white" (click)='dismissDropdown($event)'>
-            <svg class='Vlt-icon Vlt-icon--small'><use xlink:href="volta/volta-icons.svg#Vlt-icon-cross"/></svg>
-          </div>
-        </div> -->
-        <div class="Vlt-dropdown__block Vlt-search_wrap">
-          <div *ngIf="optionsBackup.length > 12" class="Vlt-composite" [ngClass]="{'vgip-disable': disabled}">
-            <div class="Vlt-composite__prepend Vlt-composite__prepend--icon"
-              style="top: 0; padding-top: 15px;">
-              <div class="Vlt-composite__icon">
-                <svg class='Vlt-grey'>
-                  <use xlink:href="volta/volta-icons.svg#Vlt-icon-search"></use>
-                </svg>
-              </div>
-            </div>
-            <div class="Vlt-input">
-              <input type="text" class="vgip-search_input" [(ngModel)]="searchInputText" placeholder="Search" (input)="onSearchChange()" (blur)='onBlur($event)' [ngModelOptions]="{standalone: true}">
-            </div>
-            <a href='#' class="Vlt-composite__append--icon" style="top: 2px;" (click)="clearSearchField($event)" [hidden]="!searchInputText">
-              <div class="Vlt-composite__icon">
-                <svg class='Vlt-icon Vlt-icon--small'>
-                  <use xlink:href="volta/volta-icons.svg#Vlt-icon-cross"/>
-                </svg>
-              </div>
-            </a>
-          </div>
-        </div>
-        <div *ngIf='dropdown' class='Vlt-dropdown__scroll'>
-          <a href='#' [ngClass]="{ 'Vlt-dropdown__link--selected': activeSuggestionIndex === i }"
-            (click)='onOptionSelect($event, option)' *ngFor='let option of options; let i = index'
-            class="Vlt-dropdown__link">
-            <div *ngIf='multiple' class="Vlt-checkbox" style='width: 100%;'>
-              <label>
-                <span class="Vlt-checkbox__button">
-                  <input type="checkbox" [checked]='model && model.indexOf(option) !== -1' />
-                  <span class="Vlt-checkbox__icon"></span>
-                </span>
-                {{option.label || (option.id === '' ? '--empty--' : option)}}
-              </label>
-            </div>
-            <div *ngIf='!multiple' style='padding: 12px 20px;'>{{option.label || (option.id === '' ?
-              '--empty--' : option)}}</div>
-          </a>
-          <!-- No Option Found -->
-          <div class="Vlt-dropdown__link" *ngIf="options.length === 0">
-            <span style='padding: 12px 20px;'>
-              No Option Found
-            </span>
-            <button *ngIf='isCreatable && !disabled' type="button" class="Vlt-btn Vlt-btn--link" (click)='openResource($event)'>
-              <svg>
-                <use xlink:href="volta/volta-icons.svg#Vlt-icon-plus" />
-              </svg> Add new
-            </button>
-          </div>
-        </div>
-        <div *ngIf='!multiple' class="Vlt-dropdown__block"></div>
-        <div *ngIf='multiple' class="Vlt-dropdown__block Vlt-dropdown__block--nowrap"
-          style='padding: 8px 16px 16px;'>
-          <button (click)='clear($event)' type='button'
-            class="Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-btn--small Vlt-btn--outline"
-            style='margin-right: 8px;'>Clear all</button>
-          <button (click)='dismissDropdown($event)' type='button'
-            class="Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-btn--small">Done</button>
-        </div>
-      </div>
-    </div>
-    <!-- <span *ngIf='isCreatable'>
-      <button type='button' (click)='openResource($event)' 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>
-    </span> -->
-    <div *ngIf='isCreatable && !disabled' class="Vlt-composite__append">
-      <button (focus)='onActivated($event)' (blur)='onBlur($event)' type='button' (click)='openResource($event)'
-        class="Vlt-btn Vlt-btn--white Vlt-btn--icon add-button" aria-label='Add new'>
-        <svg>
-          <use attr.xlink:href="volta/volta-icons.svg#Vlt-icon-{{ (isUpdatable && model) ? 'edit' : 'plus'}}" />
-        </svg>
-      </button>
-    </div>
-  </div>
-  <small *ngIf='f.invalid && ((f | metaModel)._parent.submitted || ((ft | metaModel).touched))'
-    class="Vlt-form__element__error">
-    <span *ngIf="f.errors.required">Required.&nbsp;</span>
-    <span *ngIf="f.errors.custom">{{f.errors.custom}}&nbsp;</span>
-  </small>
-  <small *ngIf='meta.hint' class="Vlt-form__element__hint">{{meta.hint}}</small>
-</div>

package/src/lib/fieldText/index.ts

@@ -1,86 +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-02-26 20:00:33
- */
-
-import { Component, OnInit } from '@angular/core';
-import { ControlContainer, NgForm } from '@angular/forms';
-
-import { FieldAbstract } from '../fieldAbstract';
-// import { tMetaField } from '../../../metaTypes/tMetaField'
-import { templateBuilder } from '../common/utils/templateBuilder';
-import { MetaContextService } from '../services/metaContext';
-
-@Component({
-    templateUrl: './view.html',
-    styleUrls: ['./style.scss'],
-    viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],
-    standalone: false
-})
-export class FieldText extends FieldAbstract implements OnInit {
-  // @Input() meta: any;
-  value: string;
-
-  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]);
-    // }
-    const origValue = this.parent[this.meta.name];
-    Object.defineProperty(this.parent, this.meta.name, {
-      set: (value) => {
-        if (value) {
-          this.model = value;
-          this.value = value;
-        } else {
-          delete this.model;
-          delete this.value;
-        }
-        this.meta.$optional = this.isOptional;
-      },
-      get: () => this.value,
-      enumerable: this.sendToServer,
-      configurable: true
-    });
-    if (typeof(origValue) !== 'undefined') {
-      this.parent[this.meta.name] = origValue;
-    }
-    if (!this.isPersistedParent && typeof(this.meta.auto?.template) === 'string') {
-      this.metaContext.onContextChange.subscribe((context) => {
-        const autoValue = templateBuilder({ context }, this.meta.auto.template);
-        if (this.model === this.lastAutoValue && autoValue) {
-          this.lastAutoValue = autoValue;
-          this.parent[this.meta.name] = autoValue;
-        }
-      });
-    }
-  }
-
-  onModelChangeLocal(value) {
-    if (!value && this.prevModel && this.isPersistedParent) {
-      value = '';
-    }
-    this.onModelChange(value);
-  }
-
-  textToSpeech() {
-    this.focus();
-  }
-
-}

package/src/lib/fieldText/style.scss

@@ -1,24 +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--big .Vlt-textarea {
-  .Vlt-label {
-    right: 18px;
-    background: transparent;
-  }
-}
-
-.Vlt-form__element--error {
-  textarea {
-    border-color: #f25a6b;
-    background: var(--vgip-meta-input-bg-color);
-  }
-}

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

@@ -1,43 +0,0 @@
-/*
- * @Author: Alexander.Vangelov@vonage.com 
- * @Date: 2019-09-19 17:35:19 
- * @Last Modified by: Alexander.Vangelov@vonage.com
- * @Last Modified time: 2019-11-05 13:47:34
- */
-
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { NgForm } from '@angular/forms';
-
-import { MetaModule } from '..';
-
-import { FieldText } from '.';
-
-describe('FieldTextarea', () => {
-  let component: FieldText;
-  let fixture: ComponentFixture<FieldText>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [],
-      imports: [
-        MetaModule
-      ],
-      providers: [
-        { provide: NgForm, useValue: new NgForm([], []) }
-      ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(FieldText);
-    component = fixture.componentInstance;
-    component.parent = {};
-    component.meta = { name: 'f1' };
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/fieldText/view.html

@@ -1,23 +0,0 @@
-<div class='vgip-meta-field-preview' *ngIf='preview && model'>
-  <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>
-  <div class='vgip-meta-field-value __gu'>{{parent[meta.name]}}</div>
-</div>
-<div *ngIf='!preview' class="Vlt-form__element Vlt-form__element--big" [ngClass]="{ 'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (f | metaModel ).touched) }">
-  <label class='wrapper'>
-    <div class="Vlt-textarea">
-      <textarea class='main model' [required]='validations.required' [maxlength]='validations.maxlength' rows="{{ meta.rows || 4 }}" placeholder=' ' [(ngModel)]='model' (ngModelChange)="onModelChangeLocal($event)" #f='ngModel' [name]='name'></textarea>
-      <!-- <div class="Vlt-composite__append Vlt-composite__append--icon">
-        <div class="Vlt-composite__icon" (click)='textToSpeech()'>
-          <svg><use xlink:href="volta/volta-icons.svg#Vlt-icon-microphone"/></svg>
-        </div>
-      </div> -->
-      <label class="Vlt-label">{{meta.label || meta.name}}<span *ngIf='validations.required' class='Vlt-red'>*</span></label> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control -->
-    </div>
-  </label>
-  <small *ngIf='f.invalid && ((f | metaModel)._parent.submitted || ((f | metaModel ).touched))' class="Vlt-form__element__error">
-    <span *ngIf="f.errors.required">Required</span>
-    <span *ngIf="f.errors.maxlength">Length can not exceed {{validations.maxlength}} characters</span>
-    <span *ngIf="f.errors.custom">{{f.errors.custom}}&nbsp;</span>
-  </small>
-  <small *ngIf='meta.helpText' class="Vlt-form__element__hint">{{meta.helpText}}</small>
-</div>

package/src/lib/fieldUnknown/index.ts

@@ -1,15 +0,0 @@
-/*
- * @Author: Alexander.Vangelov@vonage.com
- * @Date: 2019-09-19 17:35:19
- * @Last Modified by: Alexander.Vangelov@vonage.com
- * @Last Modified time: 2019-11-15 13:04:01
- */
-
-import { Component } from '@angular/core';
-import { FieldAbstract } from '../fieldAbstract';
-
-@Component({
-    templateUrl: './view.html',
-    standalone: false
-})
-export class FieldUnknown extends FieldAbstract {}

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

@@ -1,34 +0,0 @@
-/*
- * @Author: Alexander.Vangelov@vonage.com 
- * @Date: 2019-09-19 17:35:19 
- * @Last Modified by: Alexander.Vangelov@vonage.com
- * @Last Modified time: 2019-11-15 11:05:28
- */
-
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
-import { FieldUnknown } from '.';
-
-describe('FieldUnknown', () => {
-  let component: FieldUnknown;
-  let fixture: ComponentFixture<FieldUnknown>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ FieldUnknown ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(FieldUnknown);
-    component = fixture.componentInstance;
-    component.parent = {};
-    component.meta = { type: 'dummy', name: 'dummy' };
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/fieldUnknown/view.html

@@ -1,9 +0,0 @@
-<div class="Vlt-form__element Vlt-form__element--big">
-  <div class="Vlt-input">
-    <label class='wrapper'>
-      <input class='main model' type="text" placeholder="" value="Unknown field type '{{meta.type}}'." disabled/>
-      <label class="Vlt-label Vlt-truncate" style='padding-right: 20px;'>{{meta.label || meta.name}}</label> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control -->
-    </label>
-  </div>
-  <small *ngIf='meta.hint' class="Vlt-form__element__hint">{{meta.hint}}</small>
-</div>