@vgip/meta-ui 2.1.1 → 2.1.3

package/src/lib/fieldInput/index.ts

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

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

@@ -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 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();
+  });
+});