@vgip/meta-ui 2.1.2 → 2.1.3

package/src/lib/fieldComposite/index.ts

@@ -0,0 +1,86 @@
+import { Component, OnInit, DoCheck } from '@angular/core';
+import { FieldAbstract } from '../fieldAbstract';
+
+@Component({
+    templateUrl: './view.html',
+    styleUrls: ['./style.scss'],
+    standalone: false
+})
+export class FieldComposite extends FieldAbstract implements OnInit, DoCheck {
+  // @Input() meta: any;
+  // @Input() parent: any;
+  value: any;
+  private invisible;
+
+  get isRow() {
+    return this.meta.subtype !== 'column';
+  }
+
+  get fields() {
+    return (this.meta.fields || []).map((f) => {
+      if (f.type === 'textarea') { // no textareas inside composite (use string)
+        delete f.type;
+      }
+      return f;
+    });
+  }
+
+  ngOnInit() {
+    // super.ngOnInit()
+    let nestedFieldsRegex: RegExp;
+    if (this.meta.name) {
+      this.scope += `${this.meta.name}_`;
+      this.value = this.parent[this.meta.name] || {};
+      nestedFieldsRegex = new RegExp(`^${this.meta.name}\\.(.*)`);
+      Object.defineProperty(this.parent, this.meta.name, {
+        set: (value) => {
+          if (value) {
+            for (const v of Object.keys(value)) {
+              this.value[v] = value[v];
+            }
+          }
+        },
+        get: () => {
+          if (JSON.stringify(this.value) !== '{}') {
+            return this.value;
+          }
+        },
+        enumerable: this.sendToServer,
+        configurable: true
+      });
+      for (const f of this.meta.fields) {
+        if (this.isRow) {
+          if (f.type === 'text') {
+            f.type = 'string';
+          }
+        }
+        const nestedFieldMatch = (f.name || '').match(nestedFieldsRegex);
+        if (nestedFieldMatch) {
+          f.name = nestedFieldMatch[1]; // for VGIS V2 backward compatibility normalize name with dotted syntax
+        }
+      }
+    } else {
+      this.value = this.parent;
+    }
+  }
+
+  ngDoCheck(): void {
+    if (typeof (this.invisible) !== 'undefined') {
+      if (this.invisible !== this.meta.$invisible) {
+        if (this.meta.$invisible === false) {
+          if (typeof (this.meta.name) !== 'undefined') {
+            this.parent[this.meta.name] = this.value;
+          }
+        }
+        this.invisible = this.meta.$invisible;
+      }
+    } else {
+      this.invisible = this.meta.$invisible;
+    }
+  }
+
+  onValueChange(): void {
+    this.onChange.emit(this.value);
+  }
+
+}

package/src/lib/fieldComposite/style.scss

@@ -0,0 +1,6 @@
+div > vgip-meta-field {
+  display: none;
+  &.shown {
+    display: initial;
+  }
+}

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

package/src/lib/fieldComposite/view.html

@@ -0,0 +1,9 @@
+<div [ngClass]="{ 'Vlt-grid Vlt-grid--narrow': isRow }">
+  <ng-container *ngFor='let field of fields'>
+    <div style='margin: 0;' [ngClass]="{ 'Vlt-col': isRow, 'Vlt-col--1of3': isRow && fields.length > 3 }" *ngIf="!field.$invisible">
+      <vgip-meta-field *ngIf='!meta.$invisible' [ngClass]="{ shown: !field.$invisible}" [index]='index' [scope]='scope' [meta]='field'
+        [parent]='value' [integrationCode]='integrationCode' [resourceType]='resourceType' [preview]='preview' (onChange)='onValueChange()'
+        theme='inherit'></vgip-meta-field>
+    </div>
+  </ng-container>
+</div>

package/src/lib/fieldDatetime/index.ts

@@ -0,0 +1,359 @@
+/*
+* @Author: Alexander.Vangelov@vonage.com
+* @Date: 2020-04-18 18:05:46
+ * @Last Modified by: Alexander.Vangelov@vonage.com
+ * @Last Modified time: 2020-04-18 21:09:16
+*/
+
+import { Component, OnInit } from '@angular/core';
+import { ControlContainer, NgForm } from '@angular/forms';
+
+import { FieldAbstract } from '../fieldAbstract';
+import { relativeTimeBuilder } from '../common/utils/relativeTimeBuilder';
+
+@Component({
+    templateUrl: './view.html',
+    styleUrls: ['./style.scss'],
+    viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],
+    standalone: false
+})
+export class FieldDatetime extends FieldAbstract implements OnInit {
+  input: any;
+  dropdown: any;
+  activeSuggestionIndex: number;
+  value: any;
+  type: string;
+  placeholder = 'dd/mm/yyyy';
+
+  get suggestions() {
+    return this.meta.suggestions || [];
+  }
+
+  ngOnInit() {
+    this.validationAttributes = ['required', 'min', 'max', 'step'];
+    this.type = this.meta.type;
+    if (this.meta.type === 'datetime') {
+      this.type = 'datetime-local';
+      this.placeholder += ' --:-- --';
+    } else if (this.meta.type === 'time') {
+      this.placeholder = '--:-- --';
+    }
+    const origValue = this.parent[this.meta.name];
+    Object.defineProperty(this.parent, this.meta.name, {
+      set: (value) => {
+        if (value) {
+          if (['datetime', 'date', 'datetime-local'].indexOf(this.meta.type || this.meta.subtype) !== -1 && value) {
+            try {
+              let date: Date;
+              if ((typeof (value) === 'number')) {
+                date = new Date(parseInt(value as any, 10));
+                if ('date' === (this.meta.type || this.meta.subtype)) {
+                  date = new Date(date.getTime() + (date.getTimezoneOffset() * 60000));
+                }
+              } else {
+                if ('date' === (this.meta.type || this.meta.subtype)) {
+                  date = new Date(Date.parse(value));
+                } else {
+                  date = new Date(Date.parse(`${value}Z`) + (new Date().getTimezoneOffset() * 60000));
+                }
+              }
+              switch (this.meta.type || this.meta.subtype) {
+                case 'datetime-local':
+                case 'datetime': {
+                  this.model = `${date.getFullYear()}-${('00' + (date.getMonth() + 1)).slice(-2)}-${('00' + date.getDate()).slice(-2)}`;
+                  this.model += `T${('00' + date.getHours()).slice(-2)}:${('00' + date.getMinutes()).slice(-2)}`;
+                  break;
+                }
+                case 'date': {
+                  this.model = date.toISOString().split('T')[0];
+                  break;
+                }
+              }
+              if (this.meta.valueType === 'isostring') {
+                this.value = date.toISOString();
+              } else if (this.meta.valueType === 'string') {
+                if ((this.meta.type || this.meta.subtype) === 'date') {
+                  this.value = date.toISOString().split('T')[0];
+                } else {
+                  this.value = date.toISOString();
+                }
+              } else {
+                if ((this.meta.type || this.meta.subtype) === 'date') {
+                  date.setFullYear(date.getUTCFullYear());
+                  date.setMonth(date.getUTCMonth());
+                  date.setDate(date.getUTCDate());
+                  date.setMinutes(0);
+                  date.setHours(0);
+                  date.setSeconds(0);
+                  date.setMilliseconds(0);
+                  this.value = new Date(date.getTime() - (date.getTimezoneOffset() * 60000)).getTime();
+                } else {
+                  this.value = date.getTime();
+                }
+              }
+            } catch (e) {
+              console.error('Date parse error', e.message, `"${value}"`, `(${typeof (value)})`);
+            }
+          } else if ('time' === (this.meta.type || this.meta.subtype)) {
+            try {
+              let date: Date;
+              if (typeof (value) === 'number') {
+                date = new Date(parseInt(value as any, 10));
+                if (value < 86400000) {
+                  date = new Date(date.getTime() + (date.getTimezoneOffset() * 60000));
+                }
+              } else {
+                date = new Date(
+                  Date.parse(new Date().toISOString().replace(/T.*Z/, `T${value}Z`)) + (new Date().getTimezoneOffset() * 60000)
+                );
+              }
+              this.model = date.toTimeString().split(' ')[0];
+              if (this.meta.valueType === 'isostring') {
+                this.value = date.toISOString();
+              } else {
+                date.setFullYear(1970);
+                date.setMonth(0);
+                date.setDate(1);
+                date.setMilliseconds(0);
+                if (this.meta.valueType === 'string') {
+                  this.value = new Date(date.getTime() - (date.getTimezoneOffset() * 60000)).toISOString().split('T')[1].substring(0,8);
+                } else {
+                  this.value = new Date(date.getTime() - (date.getTimezoneOffset() * 60000)).getTime();
+                }
+              }
+            } catch (e) {
+              console.error('Date parse error', e.message, `"${value}"`, `(${typeof (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;
+    }
+    const d = this.meta.default || this.meta.defaultValue;
+    if (d && typeof(this.model) === 'undefined') {
+      const defaultValue = ((typeof (d) === 'string') || (typeof (d) === 'number')) ? d : (d.id || d.value);
+      if (defaultValue || defaultValue === 0) {
+        if (/^(date|time)/.test(this.meta.type || this.meta.subtype) && typeof(defaultValue) === 'string') {
+          this.parent[this.meta.name] = relativeTimeBuilder(this.meta.type || this.meta.subtype, defaultValue, this.validations.step);
+        } else {
+          this.parent[this.meta.name] = defaultValue;
+        }
+      }
+    }
+    if (typeof(this.meta.auto) === 'object') {
+      Object.keys(this.meta.auto || {}).filter(n => ['gt', 'lt'].indexOf(n) !== -1).map(v => this.setupLogicalValidation(v));
+    }
+  }
+
+  onActivated(ev) {
+    this.input = ev.srcElement;
+    if (!this.dropdown) {
+      this.dropdown = ev.srcElement.parentNode.parentNode;
+    }
+    this.showDropdown();
+  }
+
+  clear(ev?) {
+    delete this.model;
+    this.onModelChange(this.model);
+    if (ev) {
+      ev.preventDefault();
+      ev.stopPropagation();
+      return false;
+    }
+  }
+
+  onBlur(ev) {
+    let internalControl = false;
+    if (ev.relatedTarget) {
+      if (!this.elementRef.nativeElement.contains(ev.relatedTarget)) {
+        this.dismissDropdown();
+      } else {
+        internalControl = true;
+      }
+    }
+    if (this.keyListenerActive && !internalControl) {
+      this.input.removeEventListener('keydown', this.keydown);
+      setTimeout(() => {
+        if (!this.keyListenerActive) {
+          document.removeEventListener('click', this.clickout);
+        }
+      }, 400);
+      delete this.keyListenerActive;
+    }
+  }
+
+  onSuggestionSelect(ev, suggestion) {
+    if (!suggestion) {
+      return;
+    }
+    ev.preventDefault();
+    ev.stopPropagation();
+    this.focus();
+    this.dismissDropdown();
+    this.model = suggestion;
+    this.onModelChange(suggestion);
+  }
+
+  dismissDropdown(event?) {
+    if (event) {
+      this.focus();
+    }
+    if (this.dropdown) {
+      this.dropdown.classList.remove('Vlt-dropdown--expanded');
+    }
+  }
+
+  private ensureDropdownIsVisible() {
+    setTimeout(() => {
+      const holder = this.dropdown.closest('.Vlt-card__content, .Vlt-modal__content');
+      if (holder) {
+        const el = this.elementRef.nativeElement.querySelector('.Vlt-dropdown__panel');
+        const elRect = el.getBoundingClientRect();
+        const holderRect = holder.getBoundingClientRect();
+        if (holderRect.top + holderRect.height < elRect.top + elRect.height) {
+          el.scrollIntoView({ block: 'end' });
+        }
+      }
+    }, 400);
+  }
+
+  private showDropdown() {
+    if (this.meta.suggestions?.length) {
+      this.dropdown.classList.add('Vlt-dropdown--expanded');
+      this.ensureDropdownIsVisible();
+    }
+    if (!this.keyListenerActive) {
+      this.input.addEventListener('keydown', this.keydown);
+      setTimeout(() => {
+        document.addEventListener('click', this.clickout);
+      }, 200);
+      this.keyListenerActive = true;
+      if (this.parent[this.meta.name]) {
+        for (let suggestionIndex = 0; suggestionIndex < (this.meta.suggestions || []).length; suggestionIndex++) {
+          if (this.meta.suggestions[suggestionIndex] === this.parent[this.meta.name]) {
+            this.activeSuggestionIndex = suggestionIndex;
+          }
+        }
+      }
+    }
+  }
+
+  private clickout = (event) => {
+    if (event.target.className === 'Vlt-dropdown__link' && this.elementRef.nativeElement.contains(event.target)) {
+      this.focus();
+      // this.dismissDropdown();
+      // this.parent[this.meta.name] = event.target.textContent;
+
+    } else if (event.target !== this.input && event.target.className !== 'Vlt-dropdown__title') {
+      this.dismissDropdown();
+    } else {
+      this.focus();
+    }
+  };
+
+  private keydown = (event) => {
+    switch (event.key) {
+      case 'ArrowDown': {
+        if (['datetime', 'time', 'date', 'datetime-local'].indexOf(this.meta.type || this.meta.subtype) !== -1) {
+          break;
+        }
+        this.showDropdown();
+        event.preventDefault();
+        if (typeof (this.activeSuggestionIndex) === 'undefined') {
+          this.activeSuggestionIndex = 0;
+        } else {
+          this.activeSuggestionIndex++;
+          if (this.activeSuggestionIndex >= this.suggestions.length) {
+            this.activeSuggestionIndex = 0;
+          }
+        }
+        break;
+      }
+      case 'ArrowUp': {
+        if (['datetime', 'time', 'date', 'datetime-local'].indexOf(this.meta.type || this.meta.subtype) !== -1) {
+          break;
+        }
+        this.showDropdown();
+        event.preventDefault();
+        if (typeof (this.activeSuggestionIndex) === 'undefined') {
+          this.activeSuggestionIndex = this.suggestions.length - 1;
+        } else {
+          this.activeSuggestionIndex--;
+          if (this.activeSuggestionIndex < 0) {
+            this.activeSuggestionIndex = this.suggestions.length - 1;
+          }
+        }
+        break;
+      }
+      case 'Space':
+      case 'Enter': {
+        if (typeof (this.activeSuggestionIndex) !== 'undefined') {
+          event.preventDefault();
+          event.stopPropagation();
+          this.onSuggestionSelect(event, this.suggestions[this.activeSuggestionIndex]);
+          delete this.activeSuggestionIndex;
+        }
+        break;
+      }
+      case 'Escape': {
+        event.preventDefault();
+        event.stopPropagation();
+        this.dismissDropdown();
+        break;
+      }
+    }
+  };
+
+
+  private autoSetValue(againstTimestamp, v, cfg) {
+    const compareValue = relativeTimeBuilder(this.meta.type, cfg.offset, this.validations.step, againstTimestamp);
+    if (this.model) {
+      const currentValue = new Date(this.model).getTime();
+      let isInvalid: boolean;
+      if (v === 'gt') {
+        isInvalid = compareValue > currentValue;
+      } else if (v === 'lt') {
+        isInvalid = currentValue > compareValue;
+      }
+      if (isInvalid) {
+        this.parent[this.meta.name] = compareValue;
+      }
+    } else {
+      this.parent[this.meta.name] = compareValue;
+    }
+  }
+
+  private setupLogicalValidation(v: string) {
+    const cfg = this.meta.auto[v];
+    if (typeof(cfg.against) === 'string') {
+      let againstValue = this.parent[cfg.against];
+      try {
+        let againstTimestamp = Date.parse(`${againstValue}Z`) + (new Date().getTimezoneOffset() * 60000);
+        if (againstValue) {
+          this.autoSetValue(againstTimestamp, v, cfg);
+        }
+        this.parentChangeSubject.subscribe((value) => {
+          if (value && value.hasOwnProperty(cfg.against)) {
+            againstValue = value[cfg.against];
+            if (againstValue) {
+              againstTimestamp = Date.parse(`${againstValue}Z`) + (new Date().getTimezoneOffset() * 60000);
+              this.autoSetValue(againstTimestamp, v, cfg);
+            }
+          }
+        });
+      } catch (e) {
+        if ((window as any).scDebug) console.error(e);
+      }
+    }
+  }
+}

package/src/lib/fieldDatetime/style.scss

@@ -0,0 +1,81 @@
+.Vlt-form__element--big {
+  &.Vlt-form__element--error {
+    input.main, .Vlt-composite__append button {
+      background: var(--vgip-meta-input-bg-color);
+      border-color: #f25a6b;
+      box-shadow: none;
+    }
+  }
+}
+
+@-moz-document url-prefix() {
+  .Vlt-composite__append.right-actions {
+    right: 10px !important;
+  }
+}
+
+.Vlt-composite__append.right-actions {
+  position: absolute;
+  top: 5px;
+  right: 10px;
+  cursor: pointer;
+  @media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
+    right: 53px;
+  }
+  .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: #2c2d30;
+  }
+}
+
+.vgip-disable .Vlt-composite__append{
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+:host-context {
+  ::ng-deep {
+    input::-webkit-calendar-picker-indicator {
+      height: 48px;
+      width: 51px;
+      margin-top: -15px;
+      margin-right: -15px;
+      padding: 0 2px 0 0;
+      cursor: pointer;
+      color: transparent;
+      background-origin: content-box;
+      background-size: initial;
+      background-repeat: no-repeat;
+      background-position: center;
+      opacity: 1;
+      visibility: visible;
+      background-image: var(--vgip-meta-date-icon)
+    }
+    input::-webkit-calendar-picker-indicator:hover {
+      background-color: var(--vgip-meta-input-action-hover-bg-color);
+    }
+    input[type='time']::-webkit-calendar-picker-indicator {
+      background-image: var(--vgip-meta-time-icon)
+    }
+    input[readonly]::-webkit-calendar-picker-indicator {
+      visibility: visible;
+    }
+    input:enabled:read-write:-webkit-any(:focus,:hover)::-webkit-clear-button {
+      opacity: 0;
+      pointer-events: none;
+    }
+    input:enabled:read-write:-webkit-any(:focus,:hover)::-webkit-inner-spin-button {
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+}

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

@@ -0,0 +1,43 @@
+/*
+* @Author: Alexander.Vangelov@vonage.com
+* @Date: 2020-04-18 18:10:03
+* @Last Modified by: Alexander.Vangelov@vonage.com
+* @Last Modified time: 2020-04-18 18:10:03
+*/
+
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { NgForm } from '@angular/forms';
+
+import { MetaModule } from '..';
+
+import { FieldDatetime } from '.';
+
+describe('FieldDatetime', () => {
+  let component: FieldDatetime;
+  let fixture: ComponentFixture<FieldDatetime>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [],
+      imports: [
+        MetaModule
+      ],
+      providers: [
+        { provide: NgForm, useValue: new NgForm([], []) }
+      ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FieldDatetime);
+    component = fixture.componentInstance;
+    component.parent = {};
+    component.meta = { name: 'f1' };
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/fieldDatetime/view.html

@@ -0,0 +1,26 @@
+<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}}</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), 'has-value': f.value, active: keyListenerActive }">
+  <div class="Vlt-input" [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]="type" [placeholder]="placeholder" (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></label> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control -->
+    </label>
+    <div class='Vlt-composite__append right-actions'>
+      <a href='#' *ngIf='model' class="Vlt-composite__append--icon" (click)='clear($event)' tabindex='0'>
+        <div class="Vlt-composite__icon">
+          <svg><use xlink:href="volta/volta-icons.svg#Vlt-icon-cross"/></svg>
+        </div>
+      </a>
+    </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.min">Must be later than {{validations.min}}.&nbsp;</span>
+    <span *ngIf="f.errors.max">Must be no later than {{validations}}.&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/fieldHidden/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 FieldHidden extends FieldAbstract {}