@vgip/meta-ui 2.1.3 → 2.1.5

package/src/lib/field.scss

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

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

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

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

@@ -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-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

@@ -1,30 +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" [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>