@vgip/meta-ui 2.1.3 → 2.1.5

package/src/lib/fieldComposite/index.ts

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

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

package/src/lib/fieldComposite/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: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

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

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

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

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

@@ -1,26 +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}}</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

@@ -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 FieldHidden extends FieldAbstract {}