@vgip/meta-ui 2.1.1 → 2.1.3

package/src/lib/fieldSelect/style.scss

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

@@ -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: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

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

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

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

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

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

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

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

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