@vgip/meta-ui 2.1.2 → 2.1.3

package/src/lib/fieldInput/view.html

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

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

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

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

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

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

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

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

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