@ng-formworks/core 17.2.7 → 18.0.0

package/src/lib/widget-library/root.component.ts

@@ -1,78 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { JsonSchemaFormService } from '../json-schema-form.service';
-
-
-@Component({
-  // tslint:disable-next-line:component-selector
-  selector: 'root-widget',
-  template: `
-    <div *ngFor="let layoutItem of layout; let i = index"
-      [class.form-flex-item]="isFlexItem"
-      [style.align-self]="(layoutItem.options || {})['align-self']"
-      [style.flex-basis]="getFlexAttribute(layoutItem, 'flex-basis')"
-      [style.flex-grow]="getFlexAttribute(layoutItem, 'flex-grow')"
-      [style.flex-shrink]="getFlexAttribute(layoutItem, 'flex-shrink')"
-      [style.order]="(layoutItem.options || {}).order">
-      <div
-        [dataIndex]="layoutItem?.arrayItem ? (dataIndex || []).concat(i) : (dataIndex || [])"
-        [layoutIndex]="(layoutIndex || []).concat(i)"
-        [layoutNode]="layoutItem"
-        [orderable]="isDraggable(layoutItem)">
-        <select-framework-widget *ngIf="showWidget(layoutItem)"
-          [dataIndex]="layoutItem?.arrayItem ? (dataIndex || []).concat(i) : (dataIndex || [])"
-          [layoutIndex]="(layoutIndex || []).concat(i)"
-          [layoutNode]="layoutItem"></select-framework-widget>
-      </div>
-    </div>`,
-  styles: [`
-    [draggable=true] {
-      transition: all 150ms cubic-bezier(.4, 0, .2, 1);
-    }
-    [draggable=true]:hover {
-      cursor: move;
-      box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
-      position: relative; z-index: 10;
-      margin-top: -1px;
-      margin-left: -1px;
-      margin-right: 1px;
-      margin-bottom: 1px;
-    }
-    [draggable=true].drag-target-top {
-      box-shadow: 0 -2px 0 #000;
-      position: relative; z-index: 20;
-    }
-    [draggable=true].drag-target-bottom {
-      box-shadow: 0 2px 0 #000;
-      position: relative; z-index: 20;
-    }
-  `],
-})
-export class RootComponent {
-  options: any;
-  @Input() dataIndex: number[];
-  @Input() layoutIndex: number[];
-  @Input() layout: any[];
-  @Input() isOrderable: boolean;
-  @Input() isFlexItem = false;
-
-  constructor(
-    private jsf: JsonSchemaFormService
-  ) { }
-
-  isDraggable(node: any): boolean {
-    return node.arrayItem && node.type !== '$ref' &&
-      node.arrayItemType === 'list' && this.isOrderable !== false;
-  }
-
-  // Set attributes for flexbox child
-  // (container attributes are set in section.component)
-  getFlexAttribute(node: any, attribute: string) {
-    const index = ['flex-grow', 'flex-shrink', 'flex-basis'].indexOf(attribute);
-    return ((node.options || {}).flex || '').split(/\s+/)[index] ||
-      (node.options || {})[attribute] || ['1', '1', 'auto'][index];
-  }
-
-  showWidget(layoutNode: any): boolean {
-    return this.jsf.evaluateCondition(layoutNode, this.dataIndex);
-  }
-}

package/src/lib/widget-library/section.component.ts

@@ -1,133 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { JsonSchemaFormService } from '../json-schema-form.service';
-
-
-@Component({
-  // tslint:disable-next-line:component-selector
-  selector: 'section-widget',
-  template: `
-    <div *ngIf="containerType === 'div'"
-      [class]="options?.htmlClass || ''"
-      [class.expandable]="options?.expandable && !expanded"
-      [class.expanded]="options?.expandable && expanded">
-      <label *ngIf="sectionTitle"
-        class="legend"
-        [class]="options?.labelHtmlClass || ''"
-        [innerHTML]="sectionTitle"
-        (click)="toggleExpanded()"></label>
-      <root-widget *ngIf="expanded"
-        [dataIndex]="dataIndex"
-        [layout]="layoutNode.items"
-        [layoutIndex]="layoutIndex"
-        [isFlexItem]="getFlexAttribute('is-flex')"
-        [isOrderable]="options?.orderable"
-        [class.form-flex-column]="getFlexAttribute('flex-direction') === 'column'"
-        [class.form-flex-row]="getFlexAttribute('flex-direction') === 'row'"
-        [style.align-content]="getFlexAttribute('align-content')"
-        [style.align-items]="getFlexAttribute('align-items')"
-        [style.display]="getFlexAttribute('display')"
-        [style.flex-direction]="getFlexAttribute('flex-direction')"
-        [style.flex-wrap]="getFlexAttribute('flex-wrap')"
-        [style.justify-content]="getFlexAttribute('justify-content')"></root-widget>
-    </div>
-    <fieldset *ngIf="containerType === 'fieldset'"
-      [class]="options?.htmlClass || ''"
-      [class.expandable]="options?.expandable && !expanded"
-      [class.expanded]="options?.expandable && expanded"
-      [disabled]="options?.readonly">
-      <legend *ngIf="sectionTitle"
-        class="legend"
-        [class]="options?.labelHtmlClass || ''"
-        [innerHTML]="sectionTitle"
-        (click)="toggleExpanded()"></legend>
-      <div *ngIf="options?.messageLocation !== 'bottom'">
-        <p *ngIf="options?.description"
-        class="help-block"
-        [class]="options?.labelHelpBlockClass || ''"
-        [innerHTML]="options?.description"></p>
-      </div>
-      <root-widget *ngIf="expanded"
-        [dataIndex]="dataIndex"
-        [layout]="layoutNode.items"
-        [layoutIndex]="layoutIndex"
-        [isFlexItem]="getFlexAttribute('is-flex')"
-        [isOrderable]="options?.orderable"
-        [class.form-flex-column]="getFlexAttribute('flex-direction') === 'column'"
-        [class.form-flex-row]="getFlexAttribute('flex-direction') === 'row'"
-        [style.align-content]="getFlexAttribute('align-content')"
-        [style.align-items]="getFlexAttribute('align-items')"
-        [style.display]="getFlexAttribute('display')"
-        [style.flex-direction]="getFlexAttribute('flex-direction')"
-        [style.flex-wrap]="getFlexAttribute('flex-wrap')"
-        [style.justify-content]="getFlexAttribute('justify-content')"></root-widget>
-      <div *ngIf="options?.messageLocation === 'bottom'">
-        <p *ngIf="options?.description"
-        class="help-block"
-        [class]="options?.labelHelpBlockClass || ''"
-        [innerHTML]="options?.description"></p>
-      </div>
-    </fieldset>`,
-  styles: [`
-    .legend { font-weight: bold; }
-    .expandable > legend:before, .expandable > label:before  { content: '▶'; padding-right: .3em; }
-    .expanded > legend:before, .expanded > label:before  { content: '▼'; padding-right: .2em; }
-  `],
-})
-export class SectionComponent implements OnInit {
-  options: any;
-  expanded = true;
-  containerType: string;
-  @Input() layoutNode: any;
-  @Input() layoutIndex: number[];
-  @Input() dataIndex: number[];
-
-  constructor(
-    private jsf: JsonSchemaFormService
-  ) { }
-
-  get sectionTitle() {
-    return this.options.notitle ? null : this.jsf.setItemTitle(this);
-  }
-
-  ngOnInit() {
-    this.jsf.initializeControl(this);
-    this.options = this.layoutNode.options || {};
-    this.expanded = typeof this.options.expanded === 'boolean' ?
-      this.options.expanded : !this.options.expandable;
-    switch (this.layoutNode.type) {
-      case 'fieldset': case 'array': case 'tab': case 'advancedfieldset':
-      case 'authfieldset': case 'optionfieldset': case 'selectfieldset':
-        this.containerType = 'fieldset';
-      break;
-      default: // 'div', 'flex', 'section', 'conditional', 'actions', 'tagsinput'
-        this.containerType = 'div';
-      break;
-    }
-  }
-
-  toggleExpanded() {
-    if (this.options.expandable) { this.expanded = !this.expanded; }
-  }
-
-  // Set attributes for flexbox container
-  // (child attributes are set in root.component)
-  getFlexAttribute(attribute: string) {
-    const flexActive: boolean =
-      this.layoutNode.type === 'flex' ||
-      !!this.options.displayFlex ||
-      this.options.display === 'flex';
-    if (attribute !== 'flex' && !flexActive) { return null; }
-    switch (attribute) {
-      case 'is-flex':
-        return flexActive;
-      case 'display':
-        return flexActive ? 'flex' : 'initial';
-      case 'flex-direction': case 'flex-wrap':
-        const index = ['flex-direction', 'flex-wrap'].indexOf(attribute);
-        return (this.options['flex-flow'] || '').split(/\s+/)[index] ||
-          this.options[attribute] || ['column', 'nowrap'][index];
-      case 'justify-content': case 'align-items': case 'align-content':
-        return this.options[attribute];
-    }
-  }
-}

package/src/lib/widget-library/select-framework.component.ts

@@ -1,50 +0,0 @@
-import {
-  Component, ComponentFactoryResolver, ComponentRef, Input,
-  OnChanges, OnInit, ViewChild, ViewContainerRef
-} from '@angular/core';
-
-import { JsonSchemaFormService } from '../json-schema-form.service';
-
-@Component({
-  // tslint:disable-next-line:component-selector
-  selector: 'select-framework-widget',
-  template: `<div #widgetContainer></div>`,
-})
-export class SelectFrameworkComponent implements OnChanges, OnInit {
-  newComponent: ComponentRef<any> = null;
-  @Input() layoutNode: any;
-  @Input() layoutIndex: number[];
-  @Input() dataIndex: number[];
-  @ViewChild('widgetContainer', {
-      read: ViewContainerRef,
-      static: true })
-    widgetContainer: ViewContainerRef;
-
-  constructor(
-    private componentFactory: ComponentFactoryResolver,
-    private jsf: JsonSchemaFormService
-  ) { }
-
-  ngOnInit() {
-    this.updateComponent();
-  }
-
-  ngOnChanges() {
-    this.updateComponent();
-  }
-
-  updateComponent() {
-    if (this.widgetContainer && !this.newComponent && this.jsf.framework) {
-      this.newComponent = this.widgetContainer.createComponent(
-        this.componentFactory.resolveComponentFactory(this.jsf.framework)
-      );
-      //TODO fix all deprecated calls and test 
-      //this.widgetContainer.createComponent<any>(this.jsf.framework)
-    }
-    if (this.newComponent) {
-      for (const input of ['layoutNode', 'layoutIndex', 'dataIndex']) {
-        this.newComponent.instance[input] = this[input];
-      }
-    }
-  }
-}

package/src/lib/widget-library/select-widget.component.ts

@@ -1,46 +0,0 @@
-import {
-  Component, ComponentFactoryResolver, ComponentRef, Input,
-  OnChanges, OnInit, ViewChild, ViewContainerRef
-} from '@angular/core';
-
-import { JsonSchemaFormService } from '../json-schema-form.service';
-
-@Component({
-  // tslint:disable-next-line:component-selector
-  selector: 'select-widget-widget',
-  template: `<div #widgetContainer></div>`,
-})
-export class SelectWidgetComponent implements OnChanges, OnInit {
-  newComponent: ComponentRef<any> = null;
-  @Input() layoutNode: any;
-  @Input() layoutIndex: number[];
-  @Input() dataIndex: number[];
-  @ViewChild('widgetContainer', { read: ViewContainerRef, static: true })
-    widgetContainer: ViewContainerRef;
-
-  constructor(
-    private componentFactory: ComponentFactoryResolver,
-    private jsf: JsonSchemaFormService
-  ) { }
-
-  ngOnInit() {
-    this.updateComponent();
-  }
-
-  ngOnChanges() {
-    this.updateComponent();
-  }
-
-  updateComponent() {
-    if (this.widgetContainer && !this.newComponent && (this.layoutNode || {}).widget) {
-      this.newComponent = this.widgetContainer.createComponent(
-        this.componentFactory.resolveComponentFactory(this.layoutNode.widget)
-      );
-    }
-    if (this.newComponent) {
-      for (const input of ['layoutNode', 'layoutIndex', 'dataIndex']) {
-        this.newComponent.instance[input] = this[input];
-      }
-    }
-  }
-}

package/src/lib/widget-library/select.component.ts

@@ -1,96 +0,0 @@
-import { AbstractControl } from '@angular/forms';
-import { buildTitleMap, isArray } from '../shared';
-import { Component, Input, OnInit } from '@angular/core';
-import { JsonSchemaFormService } from '../json-schema-form.service';
-
-
-@Component({
-  // tslint:disable-next-line:component-selector
-  selector: 'select-widget',
-  template: `
-    <div
-      [class]="options?.htmlClass || ''">
-      <label *ngIf="options?.title"
-        [attr.for]="'control' + layoutNode?._id"
-        [class]="options?.labelHtmlClass || ''"
-        [style.display]="options?.notitle ? 'none' : ''"
-        [innerHTML]="options?.title"></label>
-      <select *ngIf="boundControl"
-        [formControl]="formControl"
-        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
-        [attr.readonly]="options?.readonly ? 'readonly' : null"
-        [attr.required]="options?.required"
-        [class]="options?.fieldHtmlClass || ''"
-        [id]="'control' + layoutNode?._id"
-        [name]="controlName">
-        <ng-template ngFor let-selectItem [ngForOf]="selectList">
-          <option *ngIf="!isArray(selectItem?.items)"
-            [value]="selectItem?.value">
-            <span [innerHTML]="selectItem?.name"></span>
-          </option>
-          <optgroup *ngIf="isArray(selectItem?.items)"
-            [label]="selectItem?.group">
-            <option *ngFor="let subItem of selectItem.items"
-              [value]="subItem?.value">
-              <span [innerHTML]="subItem?.name"></span>
-            </option>
-          </optgroup>
-        </ng-template>
-      </select>
-      <select *ngIf="!boundControl"
-        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
-        [attr.readonly]="options?.readonly ? 'readonly' : null"
-        [attr.required]="options?.required"
-        [class]="options?.fieldHtmlClass || ''"
-        [disabled]="controlDisabled"
-        [id]="'control' + layoutNode?._id"
-        [name]="controlName"
-        (change)="updateValue($event)">
-        <ng-template ngFor let-selectItem [ngForOf]="selectList">
-          <option *ngIf="!isArray(selectItem?.items)"
-            [selected]="selectItem?.value === controlValue"
-            [value]="selectItem?.value">
-            <span [innerHTML]="selectItem?.name"></span>
-          </option>
-          <optgroup *ngIf="isArray(selectItem?.items)"
-            [label]="selectItem?.group">
-            <option *ngFor="let subItem of selectItem.items"
-              [attr.selected]="subItem?.value === controlValue"
-              [value]="subItem?.value">
-              <span [innerHTML]="subItem?.name"></span>
-            </option>
-          </optgroup>
-        </ng-template>
-      </select>
-    </div>`,
-})
-export class SelectComponent implements OnInit {
-  formControl: AbstractControl;
-  controlName: string;
-  controlValue: any;
-  controlDisabled = false;
-  boundControl = false;
-  options: any;
-  selectList: any[] = [];
-  isArray = isArray;
-  @Input() layoutNode: any;
-  @Input() layoutIndex: number[];
-  @Input() dataIndex: number[];
-
-  constructor(
-    private jsf: JsonSchemaFormService
-  ) { }
-
-  ngOnInit() {
-    this.options = this.layoutNode.options || {};
-    this.selectList = buildTitleMap(
-      this.options.titleMap || this.options.enumNames,
-      this.options.enum, !!this.options.required, !!this.options.flatList
-    );
-    this.jsf.initializeControl(this);
-  }
-
-  updateValue(event) {
-    this.jsf.updateValue(this, event.target.value);
-  }
-}

package/src/lib/widget-library/submit.component.ts

@@ -1,68 +0,0 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { AbstractControl } from '@angular/forms';
-import { Subscription } from 'rxjs';
-import { JsonSchemaFormService } from '../json-schema-form.service';
-import { hasOwn } from '../shared/utility.functions';
-
-
-@Component({
-  // tslint:disable-next-line:component-selector
-  selector: 'submit-widget',
-  template: `
-    <div
-      [class]="options?.htmlClass || ''">
-      <input
-        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
-        [attr.readonly]="options?.readonly ? 'readonly' : null"
-        [attr.required]="options?.required"
-        [class]="options?.fieldHtmlClass || ''"
-        [disabled]="controlDisabled"
-        [id]="'control' + layoutNode?._id"
-        [name]="controlName"
-        [type]="layoutNode?.type"
-        [value]="controlValue"
-        (click)="updateValue($event)">
-    </div>`,
-})
-export class SubmitComponent implements OnInit,OnDestroy {
-  formControl: AbstractControl;
-  controlName: string;
-  controlValue: any;
-  controlDisabled = false;
-  boundControl = false;
-  options: any;
-  @Input() layoutNode: any;
-  @Input() layoutIndex: number[];
-  @Input() dataIndex: number[];
-
-  isValidChangesSubs:Subscription;
-  constructor(
-    private jsf: JsonSchemaFormService
-  ) { }
-  ngOnDestroy(): void {
-    this.isValidChangesSubs?.unsubscribe();
-    this.isValidChangesSubs=null;
-  }
-
-  ngOnInit() {
-    this.options = this.layoutNode.options || {};
-    this.jsf.initializeControl(this);
-    if (hasOwn(this.options, 'disabled')) {
-      this.controlDisabled = this.options.disabled;
-    } else if (this.jsf.formOptions.disableInvalidSubmit) {
-      this.controlDisabled = !this.jsf.isValid;
-      this.isValidChangesSubs=this.jsf.isValidChanges.subscribe(isValid => this.controlDisabled = !isValid);
-    }
-    if (this.controlValue === null || this.controlValue === undefined) {
-      this.controlValue = this.options.title;
-    }
-  }
-
-  updateValue(event) {
-    if (typeof this.options.onClick === 'function') {
-      this.options.onClick(event);
-    } else {
-      this.jsf.updateValue(this, event.target.value);
-    }
-  }
-}

package/src/lib/widget-library/tab.component.ts

@@ -1,29 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { JsonSchemaFormService } from '../json-schema-form.service';
-
-
-@Component({
-  // tslint:disable-next-line:component-selector
-  selector: 'tab-widget',
-  template: `
-    <div [class]="options?.htmlClass || ''">
-      <root-widget
-        [dataIndex]="dataIndex"
-        [layoutIndex]="layoutIndex"
-        [layout]="layoutNode.items"></root-widget>
-    </div>`,
-})
-export class TabComponent implements OnInit {
-  options: any;
-  @Input() layoutNode: any;
-  @Input() layoutIndex: number[];
-  @Input() dataIndex: number[];
-
-  constructor(
-    private jsf: JsonSchemaFormService
-  ) { }
-
-  ngOnInit() {
-    this.options = this.layoutNode.options || {};
-  }
-}

package/src/lib/widget-library/tabs.component.ts

@@ -1,83 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { JsonSchemaFormService } from '../json-schema-form.service';
-
-
-@Component({
-  // tslint:disable-next-line:component-selector
-  selector: 'tabs-widget',
-  template: `
-    <ul
-      [class]="options?.labelHtmlClass || ''">
-      <li *ngFor="let item of layoutNode?.items; let i = index"
-        [class]="(options?.itemLabelHtmlClass || '') + (selectedItem === i ?
-          (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
-          (' ' + options?.style?.unselected))"
-        role="presentation"
-        data-tabs>
-        <a *ngIf="showAddTab || item.type !== '$ref'"
-           [class]="'nav-link' + (selectedItem === i ? (' ' + options?.activeClass + ' ' + options?.style?.selected) :
-            (' ' + options?.style?.unselected))"
-          [innerHTML]="setTabTitle(item, i)"
-          (click)="select(i)"></a>
-      </li>
-    </ul>
-
-    <div *ngFor="let layoutItem of layoutNode?.items; let i = index"
-      [class]="options?.htmlClass || ''">
-
-      <select-framework-widget *ngIf="selectedItem === i"
-        [class]="(options?.fieldHtmlClass || '') +
-          ' ' + (options?.activeClass || '') +
-          ' ' + (options?.style?.selected || '')"
-        [dataIndex]="layoutNode?.dataType === 'array' ? (dataIndex || []).concat(i) : dataIndex"
-        [layoutIndex]="(layoutIndex || []).concat(i)"
-        [layoutNode]="layoutItem"></select-framework-widget>
-
-    </div>`,
-  styles: [` a { cursor: pointer; } `],
-})
-export class TabsComponent implements OnInit {
-  options: any;
-  itemCount: number;
-  selectedItem = 0;
-  showAddTab = true;
-  @Input() layoutNode: any;
-  @Input() layoutIndex: number[];
-  @Input() dataIndex: number[];
-
-  constructor(
-    private jsf: JsonSchemaFormService
-  ) { }
-
-  ngOnInit() {
-    this.options = this.layoutNode.options || {};
-    this.itemCount = this.layoutNode.items.length - 1;
-    this.updateControl();
-  }
-
-  select(index) {
-    if (this.layoutNode.items[index].type === '$ref') {
-      this.itemCount = this.layoutNode.items.length;
-      this.jsf.addItem({
-        layoutNode: this.layoutNode.items[index],
-        layoutIndex: this.layoutIndex.concat(index),
-        dataIndex: this.dataIndex.concat(index)
-      });
-      this.updateControl();
-    }
-    this.selectedItem = index;
-  }
-
-  updateControl() {
-    const lastItem = this.layoutNode.items[this.layoutNode.items.length - 1];
-    if (lastItem.type === '$ref' &&
-      this.itemCount >= (lastItem.options.maxItems || 1000)
-    ) {
-      this.showAddTab = false;
-    }
-  }
-
-  setTabTitle(item: any, index: number): string {
-    return this.jsf.setArrayItemTitle(this, item, index);
-  }
-}

package/src/lib/widget-library/template.component.ts

@@ -1,52 +0,0 @@
-import {
-  Component,
-  ComponentFactoryResolver,
-  ComponentRef,
-  Input,
-  OnChanges,
-  OnInit,
-  ViewChild,
-  ViewContainerRef
-  } from '@angular/core';
-import { JsonSchemaFormService } from '../json-schema-form.service';
-
-
-@Component({
-  // tslint:disable-next-line:component-selector
-  selector: 'template-widget',
-  template: `<div #widgetContainer></div>`,
-})
-export class TemplateComponent implements OnInit, OnChanges {
-  newComponent: ComponentRef<any> = null;
-  @Input() layoutNode: any;
-  @Input() layoutIndex: number[];
-  @Input() dataIndex: number[];
-  @ViewChild('widgetContainer', { read: ViewContainerRef , static: true})
-    widgetContainer: ViewContainerRef;
-
-  constructor(
-    private componentFactory: ComponentFactoryResolver,
-    private jsf: JsonSchemaFormService
-  ) { }
-
-  ngOnInit() {
-    this.updateComponent();
-  }
-
-  ngOnChanges() {
-    this.updateComponent();
-  }
-
-  updateComponent() {
-    if (this.widgetContainer && !this.newComponent && this.layoutNode.options.template) {
-      this.newComponent = this.widgetContainer.createComponent(
-        this.componentFactory.resolveComponentFactory(this.layoutNode.options.template)
-      );
-    }
-    if (this.newComponent) {
-      for (const input of ['layoutNode', 'layoutIndex', 'dataIndex']) {
-        this.newComponent.instance[input] = this[input];
-      }
-    }
-  }
-}