@vgip/meta-ui 2.1.1 → 2.1.3

package/src/lib/field.scss

@@ -0,0 +1,207 @@
+
+:host {
+  ::ng-deep label.wrapper {
+    padding: 0;
+    pointer-events: initial;
+    position: initial;
+    top: initial;
+    transition: none;
+  }
+
+  ::ng-deep .hidden-mobile {
+    @media only screen and (max-width: 575px) {
+      display: none;
+    }
+  }
+  ::ng-deep .hidden-desktop {
+    @media only screen and (min-width: 576px) {
+      display: none;
+    }
+  }
+
+  ::ng-deep .Vlt-form__element {
+    > .Vlt-label, > label > .Vlt-label {
+      margin-top: -6px;
+    }
+  }
+
+  ::ng-deep .Vlt-form__element {
+    .Vlt-form__element__hint {
+      color: var(--vgip-meta-input-hint-color);
+    }
+    .Vlt-input input, .Vlt-select select, .Vlt-textarea textarea {
+      color: var(--vgip-meta-input-color);
+      @media (hover:none) { // fix zooming on iOS
+        font-size: 16px;
+      }
+      &::placeholder {
+        color: var(--vgip-meta-input-placeholder-color);
+      }
+    }
+    label {
+      color: var(--vgip-meta-input-label-color);
+    }
+    &:not(.Vlt-form__element--error) {
+      .Vlt-form-error-style,
+      .Vlt-input input,
+      .Vlt-input input.ng-untouched:invalid,
+      .Vlt-select select.ng-untouched:invalid,
+      .Vlt-textarea textarea,
+      .Vlt-textarea textarea.ng-untouched:invalid,
+      .Vlt-custom-select__input:invalid,
+      .Vlt-radio input.ng-untouched:invalid + .Vlt-radio__icon,
+      .Vlt-radio input.ng-untouched:invalid + .Vlt-checkbox__icon,
+      .Vlt-checkbox input.ng-untouched:invalid + .Vlt-radio__icon,
+      .Vlt-checkbox input.ng-untouched:invalid + .Vlt-checkbox__icon {
+        background: var(--vgip-meta-input-bg-color);
+        border-color: var(--vgip-meta-input-border-color);
+        &:disabled {
+          background: var(--vgip-meta-input-disabled-bg-color);
+          border-color: var(--vgip-meta-input-disabled-border-color);
+        }
+        &:hover, &:focus, .active {
+          border-color: var(--vgip-meta-input-active-border-color);
+        }
+      }
+    }
+    &.Vlt-form__element--error {
+      .Vlt-input input:focus,
+      .Vlt-select select:focus,
+      .Vlt-textarea textarea:focus,
+      .Vlt-custom-select__input:focus {
+        border-color: #f25a6b;
+      }
+    }
+  }
+
+  ::ng-deep .Vlt-dropdown__link {
+    padding: 12px;
+    svg {
+      margin-left: 0;
+    }
+    small {
+      line-height: inherit;
+    }
+    &.Vlt-dropdown__link--selected:after {
+      width: 20px;
+      top: 14px;
+      background: var(--vgip-meta-dropdown-check-icon) no-repeat right center;
+      background-size: contain;
+    }
+  }
+  ::ng-deep .Vlt-dropdown__block {
+    padding: 2px 16px;
+  }
+  ::ng-deep .meta-field-reference .Vlt-dropdown__link.has-type.Vlt-dropdown__link--selected:after {
+    position: initial;
+  }
+  ::ng-deep .Vlt-dropdown__panel__content {
+    background: var(--vgip-meta-dropdown-bg-color);
+    box-shadow: var(--vgip-meta-dropdown-shadow);
+    .Vlt-dropdown__link, .Vlt-dropdown__block {
+      color: var(--vgip-meta-input-color);
+    }
+
+    .Vlt-dropdown__scroll::-webkit-scrollbar {
+      width: 8px;
+    }
+
+    .Vlt-dropdown__scroll::-webkit-scrollbar-thumb {
+      background-color: var(--vgip-meta-scrollbar-color);
+      border: 2px solid transparent;
+      border-radius: 6px;
+      background-clip: content-box;
+    }
+    &.suggestions {
+      background: var(--vgip-meta-suggestions-bg-color)
+    }
+  }
+
+  ::ng-deep .Vlt-dropdown__panel {
+    z-index: 999;
+  }
+  ::ng-deep .Vlt-dropdown__panel__content--scroll-area {
+    // box-shadow: 0 1px 20px rgba(44, 45, 48, 0.3);
+    padding: 0;
+  }
+  ::ng-deep .Vlt-composite__append--icon {
+    bottom: 0;
+    // background-color: #ffffff;
+    height: initial;
+  }
+
+  ::ng-deep .search-progress {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 3px;
+    margin-top: -3px;
+    padding-top: 0 !important;
+    margin-bottom: 0 !important;
+    .container {
+      display:block;
+      position: relative;
+      overflow: hidden;
+
+      width:100%;
+      height: 3px;
+
+      transform: translate(0, 0) scale(1, 1);
+
+      .bar {
+        position: absolute;
+
+        left: 0;
+        top: 0;
+        bottom: 0;
+
+        width: 100%;
+        height: 3px;
+
+        border-radius: 50%;
+        transition: all 0.3s linear;
+        animation: query 0.9s infinite cubic-bezier(0.3, 0.6, 0.6, 1.000);
+      }
+
+      @keyframes query {
+        0% {
+          opacity: 1;
+          transform: translateX(35%) scale(.3, 1);
+        }
+        100% {
+          opacity: 0;
+          transform: translateX(-50%) scale(0, 1);
+        }
+      }
+    }
+  }
+}
+
+::ng-deep vgip-meta-field.shown vgip-meta-field {
+  display: initial;
+}
+::ng-deep vgip-meta-field .vgip-meta-field-preview {
+  display: flex;
+  flex-direction: row;
+  padding-bottom: 5px;
+  padding-top: 5px;
+  margin-left: 10px;
+  border-bottom: 1px solid #e7ebee;
+  .vgip-meta-field-label {
+    flex: 1 1 100%;
+    max-width: 20%;
+    max-height: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    margin-right: 2px;
+  }
+  .vgip-meta-field-value {
+    min-width: 0;
+    width: 0;
+    box-sizing: border-box;
+    flex: 1;
+    font-weight: bold;
+  }
+}

package/src/lib/fieldAbstract.ts

@@ -0,0 +1,327 @@
+/*
+ * @Author: Alexander.Vangelov@vonage.com
+ * @Date: 2019-09-19 17:34:44
+ * @Last Modified by: Alexander.Vangelov@vonage.com
+ * @Last Modified time: 2020-04-18 21:18:08
+ */
+
+import { ElementRef, AfterViewInit, EventEmitter, Directive } from '@angular/core';
+// import { ControlValueAccessor } from '@angular/forms';
+import { BehaviorSubject } from 'rxjs';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { metaDark, metaLight } from './common/utils/colorThemes';
+import { extractValueBySmartProp, extractBooleanValueBySmartProp } from '../lib/common/utils/smartProp';
+
+// export interface IMetaField<T extends FieldAbstract> {
+//   meta: any;
+//   model: any;
+// }
+
+@Directive()
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
+export abstract class FieldAbstract implements AfterViewInit { // implements ControlValueAccessor {
+  model: any;
+  meta: any;
+  index: number;
+  scope = '';
+  parent: any;
+  integrationCode: string;
+  integrationIcon: string;
+  resourceType: string;
+  elementRef: ElementRef;
+  modelInput: HTMLInputElement;
+  modelControl: HTMLInputElement;
+  mainInput: HTMLInputElement;
+  keyListenerActive: boolean;
+  onChange: EventEmitter<any>;
+  onLeave: EventEmitter<any>;
+  validationAttributes = [];
+  preview: boolean;
+  prevModel: any;
+  changeEvent = document.createEvent('MouseEvents');
+  metaResourceService: any;
+  logicalDisabled = false;
+  theme: string;
+  flags: any = {};
+  overlayContainer: HTMLElement;
+  lastAutoValue: any;
+  delegate: any;
+
+  get parentChangeSubject() {
+    if (!Object.getOwnPropertyDescriptor(this.parent, '$changeSubject')) {
+      Object.defineProperty(this.parent, '$changeSubject', {
+        value: new BehaviorSubject({}).pipe(debounceTime(300), distinctUntilChanged()),
+        writable: false,
+        enumerable: false
+      });
+    }
+    return this.parent.$changeSubject;
+  }
+
+  get isPersistedParent() {
+    // eslint-disable-next-line no-underscore-dangle
+    return this.parent && this.parent._vgis && (this.parent._vgis.externalId || this.parent._vgis.id );
+  }
+
+  get validations() {
+    return !this.meta.$invisible ? (this.meta.validations || {}) : {};
+  }
+
+  get name() {
+    return (typeof (this.index) === 'undefined') ? `${this.scope}${this.meta.name}` : `${this.scope}${this.meta.name}[${this.index}]`;
+  }
+
+  get default() {
+    return this.meta.default || this.meta.defaultValue;
+  }
+
+  get disabled() {
+    // TODO conditions
+    return this.logicalDisabled || this.validations.disabled || this.meta.disabled === true || this.flags.disabled
+      || (this.flags.updatable === false && this.isPersistedParent);
+  }
+
+  get readonly() {
+    // TODO conditions
+    return !!(this.validations.readonly || this.meta.readonly || (this.flags.updatable === false));
+  }
+
+  get sendToServer() {
+    return this.isPersistedParent ? (this.flags.updatable !== false) : (this.flags.creatable !== false);
+  }
+
+  get uiInput() {
+    if (!this.mainInput) {
+      this.mainInput = this.elementRef.nativeElement.querySelector('.main:not([type="hidden"]):not(.standalone)');
+    }
+    return this.mainInput;
+  }
+
+  get isOptional() {
+    const baseOptional = this.preview || (!this.meta.unset && !this.validations.required && !this.meta.visible);
+    switch (this.meta.type) {
+      case 'composite': {
+        if (baseOptional) {
+          return !this.meta.fields.find((f) => !f.$optional);
+        }
+        return false;
+      }
+      case 'list': {
+        if (baseOptional) {
+          return !(this.parent[this.meta.name] instanceof Array && this.parent[this.meta.name].length) && !this.meta.min;
+        }
+        return false;
+      }
+      default: {
+        return baseOptional && typeof(this.parent[this.meta.name]) === 'undefined';
+      }
+    }
+  }
+
+  static setup(instance, parent, meta) { } // eslint-disable-line @typescript-eslint/no-unused-vars
+
+  ngAfterViewInit() {
+    if (this.elementRef) {
+      if (this.integrationCode === 'mocks') {
+        this.integrationIcon = 'Brand-icon-vonage';
+      } else {
+        switch (this.integrationCode) {
+          case 'office365':
+            this.integrationIcon = 'Brand-icon-office-color';
+            break;
+          case 'sugar':
+            this.integrationIcon = 'Brand-icon-sugarcrm-color';
+            break;
+          case 'msdynamics':
+            this.integrationIcon = 'Brand-icon-dynamics-color';
+            break;
+          default:
+            this.integrationIcon = `Brand-icon-${(this.integrationCode || '').toLowerCase()}-color`;
+        }
+      }
+      Object.defineProperty(this.meta, '$optional', {
+        value: (typeof(this.default) === 'undefined') && this.isOptional,
+        writable: true,
+        configurable: true,
+        enumerable: false
+      });
+      this.flags = this.meta.flags || {};
+      Object.defineProperty(this.meta, '$hidden', {
+        value: !this.isPersistedParent && this.flags.creatable === false,
+        writable: true,
+        configurable: true,
+        enumerable: false
+      });
+      if (typeof(this.meta.hidden) !== 'undefined') {
+        if (typeof(this.meta.hidden) === 'object') {
+          const setHiddenByPropertyConfig = (par) => {
+            if (typeof(this.meta.hidden[par]) === 'boolean') { // any value makes me hidden
+              this.meta.$hidden = !!this.parent[par];
+            } else {
+              const value = extractValueBySmartProp(this.parent, par);
+              const parValue = value ? (value.id || value.value || value) : value;
+              this.meta.$hidden = this.meta.hidden[par] === parValue;
+            }
+          };
+          for (const par of Object.keys(this.meta.hidden)) {
+            setHiddenByPropertyConfig(par);
+            this.parentChangeSubject.subscribe((value) => {
+              if (value && value.hasOwnProperty(par.split('.')[0])) {
+                setHiddenByPropertyConfig(par);
+                if (this.meta.$hidden) {
+                  delete this.parent[this.meta.name];
+                }
+              }
+            });
+          }
+        } else if (typeof(this.meta.hidden) === 'string') {
+          if (this.meta.hidden.toUpperCase() === 'CREATE') {
+            this.meta.$hidden = !this.isPersistedParent;
+          } else if (this.meta.hidden.toUpperCase() === 'UPDATE') {
+            this.meta.$hidden = this.isPersistedParent;
+          }
+        } else {
+          this.meta.$hidden= !!this.meta.hidden;
+        }
+      }
+
+      Object.defineProperty(this.meta, '$invisible', {
+        value: false,
+        writable: true,
+        configurable: true,
+        enumerable: false
+      });
+      if (typeof(this.meta.visible) !== 'undefined') {
+        if (typeof(this.meta.visible) === 'object') {
+          const setInvisibleByPropertyConfig = (par) => {
+            if (typeof(this.meta.visible[par]) === 'boolean') { // any value makes me hidden
+              this.meta.$invisible = extractBooleanValueBySmartProp(this.parent[par],this.meta.visible[par]);
+            } else {
+              const value = extractValueBySmartProp(this.parent, par);
+              const parValue = value ? (value.id || value.value || value) : value;
+              this.meta.$invisible = this.meta.visible[par] !== parValue;
+            }
+          };
+          for (const par of Object.keys(this.meta.visible)) {
+            setInvisibleByPropertyConfig(par);
+            this.parentChangeSubject.subscribe(() => {
+              // if (value && value.hasOwnProperty(par.split('.')[0])) {
+                setInvisibleByPropertyConfig(par);
+                if (this.meta.$invisible) {
+                  delete this.parent[this.meta.name];
+                }
+              // }
+            });
+          }
+        } else if (typeof(this.meta.visible) === 'string') {
+          if (this.meta.visible.toUpperCase() === 'CREATE') {
+            this.meta.$invisible = this.isPersistedParent;
+          } else if (this.meta.visible.toUpperCase() === 'UPDATE') {
+            this.meta.$invisible = !this.isPersistedParent;
+          }
+        }
+      }
+
+      if (this.theme !== 'inherit') {
+        const metaTheme = this.theme === 'dark' ? metaDark : metaLight;
+        for (const key of Object.keys(metaTheme.properties)) {
+          this.elementRef.nativeElement.style.setProperty(key, metaTheme.properties[key]);
+        }
+      }
+    }
+  }
+
+  focus() {
+    const input = this.uiInput;
+    if (input) {
+      input.focus();
+    }
+  }
+
+  modelToValue(m, valueType) {
+    if (typeof(m) !== 'undefined') {
+      switch (valueType) {
+        case 'object': {
+          return m ? { id: m.id, label: m.label, type: m.type } : m;
+        }
+        case 'number': {
+          if (m != null) {
+            const v = m.id || m;
+            try {
+              return parseInt(v, 10);
+            } catch(e) {
+              if ((window as any).scDebug) console.error(e);
+              return v;
+            }
+          }
+          break;
+        }
+        default: {
+          if (m != null) {
+            return m.id || m;
+          }
+        }
+      }
+    }
+  }
+
+  onSubjectChange(model) {
+    if (Object.getOwnPropertyDescriptor(this.parent, '$changeSubject')) {
+      const parentChange: any = {};
+      parentChange[this.meta.name] = model;
+      this.parentChangeSubject.next(parentChange);
+    }
+  }
+
+  onModelChange(model) {
+    // TODO add resource type logic
+    if (this.model instanceof Array) {
+      this.parent[this.meta.name] = this.model.map((m) => this.modelToValue(m, this.meta.valueType));
+    } else {
+      this.parent[this.meta.name] = this.modelToValue(model, this.meta.valueType);
+    }
+    this.onChange.emit(model);
+    this.onSubjectChange(model);
+    // console.log('onChange', model);
+    this.changeEvent.initMouseEvent('change', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
+    this.elementRef.nativeElement.dispatchEvent(this.changeEvent);
+    if (this.model) {
+      this.prevModel = this.model;
+    } else {
+      this.meta.unset = true;
+    }
+    this.meta.$optional = this.isOptional;
+  }
+
+  clear() {
+    delete this.model;
+    this.onModelChange(this.model);
+  }
+
+  private applyValidations() {
+    this.validationAttributes.forEach((attribute) => {
+      const validation = this.validations[attribute];
+      if (validation) {
+        this.modelInput.setAttribute(attribute, validation.value || validation);
+      }
+    });
+  }
+}
+
+
+export class MetaElem {
+  csselem: string;
+  meta: any;
+}
+
+export abstract class MetaElemDisableadble implements MetaElem {
+  cssmodifier: string;
+  abstract meta: any;
+  abstract csselem: string;
+  abstract elementRef: ElementRef;
+  disable() {
+    console.log(this.cssmodifier);
+    this.elementRef.nativeElement.classList.remove(this.cssmodifier);
+  }
+}
+

package/src/lib/fieldBoolean/index.ts

@@ -0,0 +1,55 @@
+/*
+ * @Author: Alexander.Vangelov@vonage.com
+ * @Date: 2019-09-19 17:34:49
+ * @Last Modified by: Alexander.Vangelov@vonage.com
+ * @Last Modified time: 2020-03-26 12:57:51
+ */
+
+import { Component, OnInit } from '@angular/core';
+import { ControlContainer, NgForm } from '@angular/forms';
+
+import { FieldAbstract } from '../fieldAbstract';
+// import { tMetaField } from '../../../metaTypes/tMetaField'
+
+@Component({
+    templateUrl: './view.html',
+    styleUrls: ['./style.scss'],
+    viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],
+    standalone: false
+})
+export class FieldBoolean extends FieldAbstract implements OnInit {
+  // @Input() meta: any;
+  value: boolean;
+
+  ngOnInit() {
+    const origValue = this.parent[this.meta.name];
+    Object.defineProperty(this.parent, this.meta.name, {
+      set: (value) => {
+        if (typeof (value) === 'object' && value !== null) {
+          value = value.value || value.id || false;
+        }
+        if (!value && (typeof(this.prevModel) === 'boolean') && this.isPersistedParent) {
+          value = false;
+        }
+        this.model = (value === true) || (value != null && (['true', '1'].indexOf(value.toString().toLowerCase()) !== -1));
+        this.value = this.model;
+        this.meta.$optional = this.isOptional;
+      },
+      get: () => this.value,
+      enumerable: this.sendToServer,
+      configurable: true
+    });
+    if (typeof(origValue) !== 'undefined') {
+      this.parent[this.meta.name] = origValue;
+    }
+    if (typeof(this.meta.default) !== 'undefined' && typeof(this.model) === 'undefined' && !(this.meta.default instanceof Array)) {
+      setTimeout(() => {
+        this.onModelChange(this.meta.default);
+      }, 0);
+    }
+  }
+
+  onOptionChange() {
+    this.onModelChange(this.model);
+  }
+}

package/src/lib/fieldBoolean/style.scss

@@ -0,0 +1,22 @@
+.Vlt-checkbox + .Vlt-form__element__hint {
+  margin-top: 4px;
+}
+.Vlt-checkbox__button {
+  input {
+    &:not(:checked) ~ .Vlt-checkbox__icon {
+      background-color: var(--vgip-meta-input-bg-color);
+      border-color: var(--vgip-meta-input-border-color);
+    }
+    &:checked ~ .Vlt-checkbox__icon {
+      border-color: var(--vgip-meta-input-border-color);
+    }
+  }
+  input:hover, input:focus, input:active  {
+    &:not(:checked) ~ .Vlt-checkbox__icon {
+      border-color: var(--vgip-meta-input-active-border-color);
+    }
+    &:checked ~ .Vlt-checkbox__icon {
+      border-color: var(--vgip-meta-input-accent-color);
+    }
+  }
+}

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

package/src/lib/fieldBoolean/view.html

@@ -0,0 +1,30 @@
+<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" [ngClass]="{ 'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (f | metaModel ).touched) }">
+	<input class='model' type='hidden' [required]='validations.required' [(ngModel)]='model' #f='ngModel' [name]='name' />
+	<div class="Vlt-switch" *ngIf="meta.subtype === 'switch'">
+		<label style='vertical-align: middle;'>
+			<input class='model' type="checkbox" [(ngModel)]='model' (change)='onOptionChange()' [name]='name'/>
+			<span class="Vlt-switch__slider"></span>
+			<span style='margin-left: 60px; line-height: 30px; white-space: nowrap;'>{{meta.label || meta.name}}</span>
+		</label>
+	</div>
+	<div class="Vlt-checkbox" *ngIf="meta.subtype !== 'switch'">
+		<label style='cursor: pointer;'>
+			<span class="Vlt-checkbox__button">
+				<input class='model' type="checkbox" [(ngModel)]='model' (change)='onOptionChange()' [name]='name'/>
+				<span class="Vlt-checkbox__icon"></span>
+			</span>
+			{{meta.label || meta.name}}
+		</label>
+	</div>
+	<small *ngIf='f.invalid && ((f | metaModel)._parent.submitted || ((f | metaModel ).touched))' class="Vlt-form__element__error">
+    <span *ngIf="f.errors.required">Required</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>