@vgip/meta-ui 2.1.3 → 2.1.5

package/src/lib/fieldInput/index.ts

@@ -1,477 +0,0 @@
-/*
- * @Author: Alexander.Vangelov@vonage.com
- * @Date: 2019-09-19 17:35:09
- * @Last Modified by: Alexander.Vangelov@vonage.com
- * @Last Modified time: 2020-05-12 17:45:46
- */
-
-import { Component, OnInit } from '@angular/core';
-import { ControlContainer, NgForm } from '@angular/forms';
-
-import { FieldAbstract } from '../fieldAbstract';
-// import { IMetaFieldInut } from '../definitions/fields/IMetaFieldInput';
-import { templateBuilder } from '../common/utils/templateBuilder';
-import { relativeTimeBuilder } from '../common/utils/relativeTimeBuilder';
-import { MetaContextService } from '../services/metaContext';
-
-// import { MetaValidations } from '../common/decorators/metaValidations.decorator';
-
-@Component({
-    templateUrl: './view.html',
-    styleUrls: ['./style.scss'],
-    viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],
-    standalone: false
-})
-export class FieldInput extends FieldAbstract implements OnInit {
-  input: any;
-  dropdown: any;
-  activeSuggestionIndex: number;
-  value: any;
-  multiple: boolean;
-  addText;
-  showClear: boolean;
-  asyncSuggestions: Array<any>;
-  isPhoneNumber: boolean;
-  logicalSubtype: string;
-
-  constructor( private metaContext: MetaContextService ) {
-    super();
-  }
-
-  get suggestions() {
-    return this.asyncSuggestions || this.meta.suggestions || [];
-  }
-
-  ngOnInit() {
-    this.multiple = (this.meta.type === 'multistring') || this.meta.multiple;
-    // console.log('FieldInput init', this.meta.name);
-    this.validationAttributes = ['pattern', 'required', 'minlength', 'maxlength', 'min', 'max', 'step'];
-    if (this.meta.picklist) { // just for test! all metadata should be transformed to v3 protocol
-      this.meta.suggestions = (this.meta.picklist || []).map((s) => s.label);
-    }
-    if (this.meta.type === 'number') {
-      this.logicalSubtype = 'number';
-    }
-    if (['date', 'time', 'datetime'].indexOf(this.meta.type) !== -1) {
-      this.logicalSubtype = this.meta.type;
-      if (this.meta.type === 'datetime') {
-        this.logicalSubtype = 'datetime-local';
-      }
-      delete this.multiple; // no multiple support for timestamps
-    }
-    this.showClear = !this.multiple && [
-      '', 'string', 'url', 'email', 'password', 'tel', 'date', 'datetime-local', 'time'
-    ].indexOf(this.meta.subtype || '') !== -1;
-    const origValue = this.parent[this.meta.name];
-    Object.defineProperty(this.parent, this.meta.name, {
-      set: (value) => {
-        if (this.multiple) {
-          if (typeof(value) !== 'undefined') {
-            const values = (value instanceof Array) ? value : [value];
-            this.model = [];
-            for (let v of values) {
-              if (!this.model) {
-                this.model = [];
-              }
-              if (typeof (v) === 'object' && v !== null) {
-                v = v.id || v.value;
-              }
-              this.model.push(v);
-            }
-            this.value = this.model;
-          }
-        } else {
-          if (typeof(value) !== 'undefined'
-            && !(value === null && ((typeof(this.meta.type) === 'undefined') || ['string', 'number'].indexOf(this.meta.type) !== -1))
-          ) {
-            if (this.meta.type === 'number' && typeof(value) === 'string') {
-              value = parseInt(value, 10);
-            } else if (typeof (value) === 'object' && value !== null) {
-              value = value.id || value.value;
-            }
-            if (['datetime', 'date', 'datetime-local'].indexOf(this.meta.subtype || this.meta.type) !== -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.subtype || this.meta.type)) {
-                    date = new Date(Date.parse(value));
-                  } else {
-                    date = new Date(Date.parse(`${value}Z`) + (new Date().getTimezoneOffset() * 60000));
-                  }
-                }
-                if (typeof (value) === 'number') {
-                  switch (this.meta.subtype || this.meta.type) {
-                    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 === 'string') {
-                  if ((this.meta.subtype || this.meta.type) === 'date') {
-                    this.value = date.toISOString().split('T')[0];
-                  } else {
-                    this.value = date.toISOString();
-                  }
-                } else {
-                  if ((this.meta.subtype || this.meta.type) === '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.subtype || this.meta.type)) {
-              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];
-                date.setFullYear(1970);
-                date.setMonth(0);
-                date.setDate(1);
-                date.setMilliseconds(0);
-                this.value = new Date(date.getTime() - (date.getTimezoneOffset() * 60000)).getTime();
-              } catch (e) {
-                console.error('Date parse error', e.message, `"${value}"`, `(${typeof (value)})`);
-              }
-            } else {
-              if (!value && (typeof(this.prevModel) === 'string') && this.isPersistedParent) {
-                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;
-        }
-      });
-    }
-    const d = this.meta.default || this.meta.defaultValue;
-    if (d && typeof(this.model) === 'undefined') {
-      if (this.multiple) {
-        this.parent[this.meta.name] = [];
-        if (d.length) {
-          for (const dv of this.default) { // TODO ???
-            const defaultValueItem = (typeof (dv) === 'string' || dv === null) ? dv : (dv.id || dv.value);
-            if (defaultValueItem || defaultValueItem === 0) {
-              this.parent[this.meta.name].push(defaultValueItem);
-            }
-          }
-        }
-      } else {
-        const defaultValue = (typeof (d) === 'string') ? d : (d.id || d.value);
-        if (defaultValue || defaultValue === 0) {
-          if (/^(date|time)/.test(this.meta.subtype) && typeof(defaultValue) === 'string') {
-            this.parent[this.meta.name] = relativeTimeBuilder(this.meta.subtype, defaultValue, this.validations.step);
-          } else {
-            if (this.meta.type === 'string' && defaultValue) {
-              this.parent[this.meta.name] = templateBuilder(this.metaContext, defaultValue);
-            } else {
-              this.parent[this.meta.name] = defaultValue;
-            }
-          }
-        }
-      }
-      this.lastAutoValue = this.model;
-    }
-    if (this.preview && this.metaContext.onClick2Dial && origValue) {
-      this.isPhoneNumber = /^(?:00|\+)?(([01]|44|61|48|33( )?\d|27|30|31|34|371|380|39|41|420|52|40|90|91)(\s)?)?[-./]?\(?\d?\d{1,3}\)?[-\s./]?\d?[-\s./]?\d{1,4}\)?[-\s./]?\d{1,4}[-./]?\d{1,4}(\s\d\d($|,))?(,[,\d]+#)?$/.test(origValue);
-    }
-  }
-
-  onActivated(ev) {
-    this.input = ev.srcElement;
-    if (!this.dropdown) {
-      this.dropdown = ev.srcElement.parentNode.parentNode;
-    }
-    this.showDropdown();
-  }
-
-  clear(ev?) {
-    delete this.model;
-    delete this.activeSuggestionIndex;
-    delete this.asyncSuggestions;
-    this.onModelChange(this.model);
-    if (ev) {
-      ev.preventDefault();
-      ev.stopPropagation();
-      this.focus();
-      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;
-    }
-  }
-
-  onAdd(ev) {
-    console.log('onAdd', this.addText);
-    if (this.addText) {
-      if ((this.model || []).indexOf(this.addText) === -1) {
-        this.onSuggestionSelect(ev, this.addText);
-        if (!this.meta.suggestions) {
-          this.meta.suggestions = [];
-        }
-        this.meta.suggestions.unshift(this.addText);
-      } else {
-        ev.preventDefault();
-        ev.stopPropagation();
-        this.focus();
-      }
-      delete this.addText;
-    }
-  }
-
-  remove(ev, item) {
-    ev.preventDefault();
-    ev.stopPropagation();
-    const optionIndex = this.model.indexOf(item);
-    if (optionIndex !== -1) {
-      this.model.splice(optionIndex, 1);
-      if (!this.model.length) {
-        delete this.model;
-        delete this.value;
-      }
-      this.onModelChange(this.model);
-    }
-  }
-
-  onSuggestionSelect(ev, suggestion) {
-    if (!suggestion) {
-      return;
-    }
-    ev.preventDefault();
-    ev.stopPropagation();
-    this.focus();
-    let suggestionValue = suggestion.id || suggestion.value || suggestion;
-    if (typeof(suggestionValue) === 'string') {
-      if (/^(date|time)/.test(this.meta.subtype)) {
-        suggestionValue = relativeTimeBuilder(this.meta.subtype, suggestionValue, this.validations.step);
-      } else if (this.meta.type === 'string') {
-        suggestionValue = templateBuilder(this.metaContext, suggestionValue);
-      } else {
-        suggestionValue = suggestion;
-      }
-    }
-    if (this.multiple) {
-      if (!this.model) {
-        this.model = [];
-      }
-      let existingItemIndex = this.model.indexOf(suggestionValue);
-      if (existingItemIndex === -1) {
-        this.model.push(suggestionValue);
-      } else {
-        this.model.splice(existingItemIndex, 1);
-        existingItemIndex = undefined;
-      }
-      this.onModelChange(this.model);
-    } else {
-      this.dismissDropdown();
-      this.model = suggestionValue;
-      this.onModelChange(suggestionValue);
-      this.activeSuggestionIndex = this.suggestions.indexOf(suggestion);
-    }
-  }
-
-  textToSpeech() { }
-
-  dismissDropdown(event?) {
-    if (event) {
-      this.focus();
-    }
-    if (this.dropdown) {
-      this.dropdown.classList.remove('Vlt-dropdown--expanded');
-    }
-  }
-
-  click2dial(ev) {
-    ev.preventDefault();
-    ev.stopPropagation();
-    this.metaContext.onClick2Dial(this.model, this.elementRef.nativeElement.closest('vgip-meta-layout[data-vrn]')?.dataset?.vrn);
-    return false;
-  }
-
-  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');
-        if (el) {
-          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 (typeof(this.activeSuggestionIndex) === 'undefined') {
-      if (this.model && this.suggestions.length) {
-        for (let suggestionIndex = 0; suggestionIndex < this.suggestions.length; suggestionIndex++) {
-          if (this.model === this.suggestions[suggestionIndex]) {
-            this.activeSuggestionIndex = suggestionIndex;
-            return;
-          }
-        }
-        delete this.activeSuggestionIndex;
-      }
-    }
-  }
-
-  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.subtype || this.meta.type) !== -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.subtype || this.meta.type) !== -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;
-      }
-      default: {
-        setTimeout(() => {
-          if (!this.model) {
-            delete this.activeSuggestionIndex;
-            delete this.asyncSuggestions;
-          } else if (typeof(this.model) === 'string') {
-            this.asyncSuggestions = (this.meta.suggestions || []).filter((s) => {
-              const suggestionText = (s.id || s.value || s || '').toLowerCase();
-              return suggestionText.indexOf(this.model.toLowerCase()) !== -1;
-            });
-          }
-        });
-      }
-    }
-  };
-
-}

package/src/lib/fieldInput/style.scss

@@ -1,128 +0,0 @@
-.Vlt-form__element--big {
-  .Vlt-input input {
-    padding-right: 40px;
-    text-overflow: ellipsis;
-    @media screen and (-webkit-min-device-pixel-ratio: 0) { // Safari iOS fix
-      line-height: 20px;
-    }
-    &:disabled {
-      cursor: not-allowed;
-    }
-  }
-  &:hover, &.active {
-    .items-container, .main, input {
-      border-color: var(--vgip-meta-input-active-border-color);
-    }
-  }
-  &.multiple {
-    .Vlt-composite.Vlt-dropdown {
-      margin-top: 3px;
-    }
-    &:hover:not(.Vlt-form__element--error), &.active:not(.Vlt-form__element--error) {
-      .items-container, .main, input {
-        border-color: var(--vgip-meta-input-active-border-color);
-      }
-    }
-    .items-container {
-      background-color: var(--vgip-meta-input-bg-color);
-      border: 1px solid var(--vgip-meta-input-border-color);
-      border-bottom: 0;
-      border-top-left-radius: 6px;
-      border-top-right-radius: 6px;
-      &.creatable {
-        margin-right: 62px;
-      }
-      .badges-container {
-        overflow: auto;
-        max-height: 140px;
-        padding: 6px 4px 0 6px;
-        .Vlt-badge {
-          margin-bottom: 3px;
-          margin-left: 0;
-          margin-right: 3px;
-          overflow: hidden;
-          max-width: 100%;
-        }
-      }
-    }
-    &:not(.has-value) .items-container {
-      border: 0;
-    }
-    &.has-value {
-      .main, input {
-        border-top: 0;
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-        box-shadow: none;
-      }
-    }
-  }
-  &.Vlt-form__element--error {
-    .items-container, .main, input {
-      border-color: #f25a6b;
-      background: var(--vgip-meta-input-bg-color);
-    }
-  }
-}
-// .Vlt-dropdown__link:focus {
-//   background: rgba(44, 45, 48, 0.1);
-// }
-label.Vlt-truncate {
-  padding-right: 42px;
-}
-
-.Vlt-dropdown__panel {
-  width: 100%;
-  .Vlt-dropdown__link--selected {
-    background: rgba(44, 45, 48, 0.05);
-  }
-  // .Vlt-dropdown__link > div {
-  //   overflow: hidden;
-  //   white-space: nowrap;
-  //   text-overflow: ellipsis;
-  // }
-  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;
-    // .Vlt-checkbox__icon {
-    //   background: initial;
-    //   // border: 2px solid #e7ebee;
-    // }
-    input {
-      height: 0;
-    }
-  }
-}
-
-.Vlt-composite__append.right-actions {
-  position: absolute;
-  top: 5px;
-  right: 10px;
-  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;
-}

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