@vgip/meta-ui 2.1.3 → 2.1.5

package/src/lib/fieldInput/view.html

@@ -1,81 +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'>
-    <a *ngIf="isPhoneNumber; else elseBlock" href='#' (click)="click2dial($event)" class="Vlt-text-link" aria-label='Dial'>
-      <svg class="Vlt-icon Vlt-icon--smaller" style="margin-top: -3px;">
-        <use xlink:href="volta/volta-icons.svg#Vlt-icon-phone-full" />
-      </svg>
-      {{model}}
-    </a>
-    <ng-template #elseBlock>{{model}}</ng-template>
-  </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), 'multiple': multiple, 'has-value': f.value, active: keyListenerActive }">
-  <div *ngIf='multiple' class='items-container'>
-    <div *ngIf='model' class='badges-container keep-focus' (click)='focus()'> <!-- eslint-disable-line -->
-      <div *ngFor='let item of model' class="Vlt-badge Vlt-badge--transparent Vlt-badge--app Vlt-badge--large keep-focus">
-        {{item}}
-        <button class="Vlt-badge__dismiss keep-focus" (click)='remove($event, item)'></button> <!-- eslint-disable-line @angular-eslint/template/elements-content -->
-      </div>
-    </div>
-  </div>
-  <div class="Vlt-input Vlt-dropdown" style='display: block;' [ngClass]="{'vgip-disable': disabled}">
-    <label class='wrapper'>
-      <input class='main model' [pattern]="validations.pattern ? validations.pattern.value || validations.pattern : null" [required]='validations.required' [minlength]='validations.minlength' [maxlength]='validations.maxlength' [min]='validations.min' [max]='validations.max' [step]='validations.step' [disabled]='disabled' [readonly]="readonly" [(ngModel)]='model' (ngModelChange)="onModelChange($event)" #f='ngModel' [name]='name' [type]="multiple ? 'hidden' : (logicalSubtype || meta.subtype || 'text')" placeholder=" " (click)='onActivated($event)' (focus)='onActivated($event)' (blur)='onBlur($event)'/>
-      <input *ngIf='multiple' class='main' [pattern]="validations.pattern ? validations.pattern.value || validations.pattern : null" [minlength]='validations.minlength' [maxlength]='validations.maxlength' [min]='validations.min' [max]='validations.max' [(ngModel)]='addText' [ngModelOptions]="{ standalone: true }" [type]="logicalSubtype || meta.subtype || 'text'" [disabled]='disabled' [readonly]='readonly' placeholder="+Add" (keydown.enter)='onAdd($event)' (click)='onActivated($event)' (focus)='onActivated($event)' (blur)='onBlur($event)'/>
-      <label class='Vlt-truncate'>{{meta.label || meta.name}}<span *ngIf='validations.required' class='Vlt-red'>*</span>&nbsp;<span class='Vlt-black' *ngIf='model && multiple'>({{model.length}})</span></label> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control -->
-    </label>
-    <div class='Vlt-composite__append right-actions'>
-      <a href='#' *ngIf='model && showClear' 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 *ngIf="!meta.subtype || meta.subtype == 'text'" class="Vlt-composite__append Vlt-composite__append--icon" style='bottom: 7px; right: 10px; padding: 3px; width: initial; height: initial; cursor: pointer;'>
-      <div *ngIf="!meta.type || meta.type === 'string'" class="Vlt-composite__icon" (click)='textToSpeech()'>
-        <svg><use xlink:href="volta/volta-icons.svg#Vlt-icon-microphone"/></svg>
-      </div>
-    </div> -->
-    <div *ngIf="suggestions.length" class="Vlt-dropdown__panel">
-      <div class="Vlt-dropdown__panel__content Vlt-dropdown__panel__content--scroll-area suggestions">
-        <!-- <div class="Vlt-dropdown__title" style='padding-left: 13px;'>
-          Suggestions
-          <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"></div>
-        <div *ngIf='dropdown' class="Vlt-dropdown__scroll">
-          <a href='#' [ngClass]="{ 'Vlt-dropdown__link--selected': (activeSuggestionIndex === i) }" (click)='onSuggestionSelect($event, suggestion)' *ngFor='let suggestion of suggestions; let i = index' class="Vlt-dropdown__link" style='padding: 0;'>
-            <div *ngIf='multiple' class="Vlt-checkbox" style='width: 100%;'>
-              <label [title]='suggestion.label || suggestion'>
-                <span class="Vlt-checkbox__button">
-                  <input type="checkbox" [checked]='model && model.indexOf(suggestion) !== -1'/>
-                  <span class="Vlt-checkbox__icon"></span>
-                </span>
-                {{suggestion.label || suggestion}}
-              </label>
-            </div>
-            <div *ngIf='!multiple' style='padding: 12px 20px;'>
-              {{suggestion.label || suggestion}}
-            </div>
-          </a>
-        </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">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>
-  </div>
-  <small *ngIf='f.invalid && ((f | metaModel)._parent.submitted || ((f | metaModel ).touched && keyListenerActive))' class="Vlt-form__element__error">
-    <span *ngIf="f.errors.required">Required.&nbsp;</span>
-    <span *ngIf="f.errors.minlength">Must be longer than {{validations.minlength}} characters.&nbsp;</span>
-    <span *ngIf="f.errors.maxlength">Must be lest than {{validations.maxlength}} characters.&nbsp;</span>
-    <span *ngIf="f.errors.pattern">{{ validations.pattern.text || "Should match '"+validations.pattern+"' pattern." }}.&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/fieldList/index.ts

@@ -1,73 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { FieldAbstract } from '../fieldAbstract';
-import { ControlContainer, NgForm } from '@angular/forms';
-
-@Component({
-    templateUrl: './view.html',
-    styleUrls: ['./style.scss'],
-    viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],
-    standalone: false
-})
-export class FieldList extends FieldAbstract implements OnInit {
-  items: Array<any> = [];
-  value: any;
-
-  get list() {
-    return this.meta.list || this.meta.reference;
-  }
-
-  get cloneList() {
-    return JSON.parse(JSON.stringify(this.list));
-  }
-
-  ngOnInit() {
-    this.scope += (typeof(this.index) === 'undefined') ? `${this.meta.name}_` : `${this.meta.name}[${this.index}]_`;
-    const origValue = this.parent[this.meta.name];
-    Object.defineProperty(this.parent, this.meta.name, {
-      set: (value) => {
-        this.model = [];
-        if (value && value.length) {
-          for (const i of value) {
-            if (this.model.indexOf(i) === -1) {
-              this.model.push(i);
-            }
-          }
-        }
-        this.value = this.model;
-        this.meta.$optional = this.isOptional;
-      },
-      get: () => this.value,
-      enumerable: true,
-      configurable: true
-    });
-    if (origValue) {
-      this.parent[this.meta.name] = origValue;
-    }
-    if (!this.model && this.validations.min) {
-      for (let i = 0; i < this.validations.min; i++) {
-        this.add();
-      }
-    }
-  }
-
-  add() {
-    if (!this.model) {
-      this.model = [];
-    }
-    if (!this.validations.max || (this.validations.max > this.model.length)) {
-      this.model.push({});
-      this.value = this.model;
-    }
-    this.onChange.emit(this.model);
-  }
-
-  remove(itemIndex) {
-    this.model.splice(itemIndex, 1);
-    this.value = this.model;
-    this.onChange.emit(this.model);
-  }
-
-  onChildChange() {
-    this.onChange.emit(this.model);
-  }
-}

package/src/lib/fieldList/style.scss

@@ -1,26 +0,0 @@
-.Vlt-btn--link:not([disabled]) {
-  svg {
-    fill: #e84545;
-  }
-  &:hover svg {
-    fill: #de1c1c;
-  }
-}
-.item-add-button {
-  background-color: var(--vgip-meta-input-action-hover-bg-color);
-  color: var(--vgip-meta-input-color);
-  svg {
-    fill: var(--vgip-meta-input-color);
-  }
-  &:hover {
-    transform: scale(1.02);
-    box-shadow: inset 0 0 0 1px var(--vgip-meta-input-active-border-color);
-  }
-}
-
-.item-remove-button {
-  border: 0;
-  &:disabled {
-    cursor: not-allowed;
-  }
-}

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

package/src/lib/fieldList/view.html

@@ -1,25 +0,0 @@
-<div *ngIf='true' class="Vlt-form__element" [ngClass]="{ 'Vlt-form__element--error': (f | metaModel)._parent.submitted && f.invalid }">
-  <label class="Vlt-label">{{meta.label || meta.name}} ({{(model || []).length}})<span *ngIf='validations.required' class='Vlt-red'>*</span></label> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control -->
-  <small style='margin-bottom: 4px;' *ngIf='meta.hint' class="Vlt-form__element__hint">{{meta.hint}}</small>
-  <input class='model' type='hidden' [required]='validations.required' [(ngModel)]='model' #f='ngModel' [name]='name' />
-  <ng-container *ngIf='model'>
-    <div *ngFor='let item of model; let i = index;' style='display: flex; border-bottom: 1px solid var(--vgip-meta-separator-color);'>
-      <vgip-meta-field style='flex: 1;' [index]='i' [scope]='scope' [meta]='cloneList' [parent]='item' [integrationCode]='integrationCode' [resourceType]='meta.resourceType || resourceType' theme='inherit' [preview]='preview' (onChange)='onChildChange()'></vgip-meta-field>
-      <vgip-meta-field *ngIf='meta.selectable' [meta]="{ name: meta.selectable.name, label: ' ', type: 'radio', options: [ { id: meta.selectable.value, label: meta.selectable.label } ] }" [parent]='item' [integrationCode]='integrationCode' theme='inherit' style='margin-left: 12px; margin-top: 12px; margin-right: -12px;' (onChange)='onChildChange()'></vgip-meta-field>
-      <div *ngIf='!preview' style='padding-left: 12px; margin-top: 3px;'>
-        <button type='button' (click)='remove(i)' class="Vlt-btn Vlt-btn--link item-remove-button" [disabled]='model.length === (validations.min || 0)' aria-label='Remove'>
-          <svg><use xlink:href="volta/volta-icons.svg#Vlt-icon-bin"/></svg>
-        </button>
-      </div>
-    </div>
-  </ng-container>
-  <button *ngIf='!preview && (!validations.max || !model || model.length < validations.max)' style='width: 100%;' type='button' (click)='add()' class="Vlt-btn Vlt-btn--small Vlt-btn--tertiary Vlt-btn--app Vlt-btn--no-focus item-add-button" [disabled]='validations.max && model && model.length === validations.max'>
-    <svg><use xlink:href="volta/volta-icons.svg#Vlt-icon-plus"/></svg>{{list.label}}
-  </button>
-  <small *ngIf='(f | metaModel)._parent.submitted && f.invalid' 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/fieldRadio/index.ts

@@ -1,93 +0,0 @@
-/*
- * @Author: Alexander.Vangelov@vonage.com
- * @Date: 2019-09-19 17:35:19
- * @Last Modified by: Alexander.Vangelov@vonage.com
- * @Last Modified time: 2020-03-26 12:56:38
- */
-
-import { Component, OnInit } from '@angular/core';
-import { ControlContainer, NgForm } from '@angular/forms';
-
-import { FieldAbstract } from '../fieldAbstract';
-
-@Component({
-    templateUrl: './view.html',
-    styleUrls: ['./style.scss'],
-    viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],
-    standalone: false
-})
-
-export class FieldRadio extends FieldAbstract implements OnInit {
-  // @Input() meta: any;
-  value: any;
-
-  get options() {
-    return this.meta.options || this.meta.picklist;
-  }
-
-  ngOnInit() {
-    this.validationAttributes = ['required'];
-    const origValue = this.parent[this.meta.name];
-    Object.defineProperty(this.parent, this.meta.name, {
-      set: (value) => {
-        if (value) {
-          for (const o of this.options) {
-            if ((value.id || value) === (o.id || o.value || o.name || o)) {
-              this.model = o;
-              this.value = this.modelToValue(o, this.meta.valueType);
-              break;
-            }
-          }
-        } else {
-          delete this.model;
-          delete this.value;
-        }
-        this.meta.$optional = this.isOptional;
-      },
-      get: () => this.value,
-      enumerable: this.sendToServer,
-      configurable: true
-    });
-
-    if (origValue) {
-      this.parent[this.meta.name] = origValue;
-    }
-
-    if (this.default && !this.model) {
-      setTimeout(() => {
-        this.parent[this.meta.name] = this.meta.valueType === 'object' ? this.default : (this.default.id || this.default);
-        setTimeout(() => {
-          this.onModelChange(this.model);
-        }, 0);
-      }, 0);
-    }
-  }
-
-  onOptionChange(model) {
-    this.model = model;
-    this.onModelChange(this.model);
-  }
-
-  onActivated(ev) {
-    if (!this.keyListenerActive) {
-      ev.srcElement.addEventListener('keydown', this.keydown);
-    }
-  }
-
-  onBlur(ev) {
-    if (this.keyListenerActive) {
-      ev.srcElement.removeEventListener('keydown', this.keydown);
-    }
-  }
-
-  private keydown = (event) => {
-    switch (event.key) {
-      case 'Backspace': {
-        event.preventDefault();
-        event.stopPropagation();
-        this.clear();
-        break;
-      }
-    }
-  };
-}

package/src/lib/fieldRadio/style.scss

@@ -1,32 +0,0 @@
-.Vlt-form__element {
-  padding-bottom: 4px;
-}
-.Vlt-form__element__hint {
-  margin-top: 4px;
-}
-.Vlt-form__element__error {
-  margin-top: 4px;
-}
-.Vlt-radio--inline {
-  margin-bottom: 4px;
-}
-
-.Vlt-radio {
-  .Vlt-radio__icon {
-    border-color: var(--vgip-meta-input-border-color);
-  }
-  &:hover {
-    .Vlt-radio__icon {
-      border-color: var(--vgip-meta-input-active-border-color);
-    }
-  }
-  input:checked ~ .Vlt-radio__icon {
-    border-color: var(--vgip-meta-input-active-border-color);
-    &:after {
-      background: var(--vgip-meta-input-active-border-color);
-    }
-  }
-  input:focus + .Vlt-radio__icon, input:active + .Vlt-radio__icon {
-    background: var(--vgip-meta-input-bg-color)
-  }
-}

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

package/src/lib/fieldRadio/view.html

@@ -1,24 +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'>
-    {{ model.label || model }}
-  </div>
-</div>
-<div *ngIf='!preview' class="Vlt-form__element" [ngClass]="{ 'Vlt-form__element--error': f && f.invalid && ((f | metaModel)._parent.submitted || (f | metaModel ).touched) }">
-	<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 -->
-	<input class='model' type='hidden' [required]='validations.required' [(ngModel)]='model' #f='ngModel' [name]='name' />
-	<fieldset *ngFor='let option of options' class="Vlt-radio Vlt-radio--inline">
-		<label style='cursor: pointer;'>
-			<span class="Vlt-radio__button">
-        <input class='main' (change)='onOptionChange(option)' type="radio" [checked]='option === model' [value]='option' [name]='name' (focus)='onActivated($event)' (blur)='onBlur($event)'/>
-        <span class="Vlt-radio__icon"></span>
-      </span>
-			<span style='white-space: nowrap;'>{{option.label || option}}</span>
-		</label>
-	</fieldset>
-	<small *ngIf='f && f.invalid && ((f | metaModel)._parent.submitted || (f | 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>