@ng-formworks/core 17.2.7 → 17.3.0

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

@@ -1,104 +0,0 @@
-import { AbstractControl } from '@angular/forms';
-import { buildTitleMap } from '../shared';
-import { Component, Input, OnInit } from '@angular/core';
-import { JsonSchemaFormService, TitleMapItem } from '../json-schema-form.service';
-
-
-@Component({
-  // tslint:disable-next-line:component-selector
-  selector: 'checkboxes-widget',
-  template: `
-    <label *ngIf="options?.title"
-      [class]="options?.labelHtmlClass || ''"
-      [style.display]="options?.notitle ? 'none' : ''"
-      [innerHTML]="options?.title"></label>
-
-    <!-- 'horizontal' = checkboxes-inline or checkboxbuttons -->
-    <div *ngIf="layoutOrientation === 'horizontal'" [class]="options?.htmlClass || ''">
-      <label *ngFor="let checkboxItem of checkboxList"
-        [attr.for]="'control' + layoutNode?._id + '/' + checkboxItem.value"
-        [class]="(options?.itemLabelHtmlClass || '') + (checkboxItem.checked ?
-          (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
-          (' ' + (options?.style?.unselected || '')))">
-        <input type="checkbox"
-          [attr.required]="options?.required"
-          [checked]="checkboxItem.checked"
-          [class]="options?.fieldHtmlClass || ''"
-          [disabled]="controlDisabled"
-          [id]="'control' + layoutNode?._id + '/' + checkboxItem.value"
-          [name]="checkboxItem?.name"
-          [readonly]="options?.readonly ? 'readonly' : null"
-          [value]="checkboxItem.value"
-          (change)="updateValue($event)">
-        <span [innerHTML]="checkboxItem.name"></span>
-      </label>
-    </div>
-
-    <!-- 'vertical' = regular checkboxes -->
-    <div *ngIf="layoutOrientation === 'vertical'">
-      <div *ngFor="let checkboxItem of checkboxList" [class]="options?.htmlClass || ''">
-        <label
-          [attr.for]="'control' + layoutNode?._id + '/' + checkboxItem.value"
-          [class]="(options?.itemLabelHtmlClass || '') + (checkboxItem.checked ?
-            (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
-            (' ' + (options?.style?.unselected || '')))">
-          <input type="checkbox"
-            [attr.required]="options?.required"
-            [checked]="checkboxItem.checked"
-            [class]="options?.fieldHtmlClass || ''"
-            [disabled]="controlDisabled"
-            [id]="options?.name + '/' + checkboxItem.value"
-            [name]="checkboxItem?.name"
-            [readonly]="options?.readonly ? 'readonly' : null"
-            [value]="checkboxItem.value"
-            (change)="updateValue($event)">
-          <span [innerHTML]="checkboxItem?.name"></span>
-        </label>
-      </div>
-    </div>`,
-})
-export class CheckboxesComponent implements OnInit {
-  formControl: AbstractControl;
-  controlName: string;
-  controlValue: any;
-  controlDisabled = false;
-  boundControl = false;
-  options: any;
-  layoutOrientation: string;
-  formArray: AbstractControl;
-  checkboxList: TitleMapItem[] = [];
-  @Input() layoutNode: any;
-  @Input() layoutIndex: number[];
-  @Input() dataIndex: number[];
-
-  constructor(
-    private jsf: JsonSchemaFormService
-  ) { }
-
-  ngOnInit() {
-    this.options = this.layoutNode.options || {};
-    this.layoutOrientation = (this.layoutNode.type === 'checkboxes-inline' ||
-      this.layoutNode.type === 'checkboxbuttons') ? 'horizontal' : 'vertical';
-    this.jsf.initializeControl(this);
-    this.checkboxList = buildTitleMap(
-      this.options.titleMap || this.options.enumNames, this.options.enum, true
-    );
-    if (this.boundControl) {
-      const formArray = this.jsf.getFormControl(this);
-      this.checkboxList.forEach(checkboxItem =>
-        checkboxItem.checked = formArray.value.includes(checkboxItem.value)
-      );
-    }
-  }
-
-  updateValue(event) {
-    for (const checkboxItem of this.checkboxList) {
-      if (event.target.value === checkboxItem.value) {
-        checkboxItem.checked = event.target.checked;
-      }
-    }
-    if (this.boundControl) {
-      this.jsf.updateArrayCheckboxList(this, this.checkboxList);
-    }
-  }
-}

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

@@ -1,36 +0,0 @@
-import { AbstractControl } from '@angular/forms';
-import { Component, Input, OnInit } from '@angular/core';
-import { JsonSchemaFormService } from '../json-schema-form.service';
-
-
-// TODO: Add this control
-
-@Component({
-  // tslint:disable-next-line:component-selector
-  selector: 'file-widget',
-  template: ``,
-})
-export class FileComponent implements OnInit {
-  formControl: AbstractControl;
-  controlName: string;
-  controlValue: any;
-  controlDisabled = false;
-  boundControl = false;
-  options: any;
-  @Input() layoutNode: any;
-  @Input() layoutIndex: number[];
-  @Input() dataIndex: number[];
-
-  constructor(
-    private jsf: JsonSchemaFormService
-  ) { }
-
-  ngOnInit() {
-    this.options = this.layoutNode.options || {};
-    this.jsf.initializeControl(this);
-  }
-
-  updateValue(event) {
-    this.jsf.updateValue(this, event.target.value);
-  }
-}

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

@@ -1,39 +0,0 @@
-import { AbstractControl } from '@angular/forms';
-import { Component, Input, OnInit } from '@angular/core';
-import { JsonSchemaFormService } from '../json-schema-form.service';
-
-
-@Component({
-  // tslint:disable-next-line:component-selector
-  selector: 'hidden-widget',
-  template: `
-    <input *ngIf="boundControl"
-      [formControl]="formControl"
-      [id]="'control' + layoutNode?._id"
-      [name]="controlName"
-      type="hidden">
-    <input *ngIf="!boundControl"
-      [disabled]="controlDisabled"
-      [name]="controlName"
-      [id]="'control' + layoutNode?._id"
-      type="hidden"
-      [value]="controlValue">`,
-})
-export class HiddenComponent implements OnInit {
-  formControl: AbstractControl;
-  controlName: string;
-  controlValue: any;
-  controlDisabled = false;
-  boundControl = false;
-  @Input() layoutNode: any;
-  @Input() layoutIndex: number[];
-  @Input() dataIndex: number[];
-
-  constructor(
-    private jsf: JsonSchemaFormService
-  ) { }
-
-  ngOnInit() {
-    this.jsf.initializeControl(this);
-  }
-}

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

@@ -1,76 +0,0 @@
-import { AbstractControl } from '@angular/forms';
-import { Component, Input, OnInit } from '@angular/core';
-import { JsonSchemaFormService } from '../json-schema-form.service';
-
-
-@Component({
-  // tslint:disable-next-line:component-selector
-  selector: 'input-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>
-      <input *ngIf="boundControl"
-        [formControl]="formControl"
-        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
-        [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
-        [attr.maxlength]="options?.maxLength"
-        [attr.minlength]="options?.minLength"
-        [attr.pattern]="options?.pattern"
-        [attr.placeholder]="options?.placeholder"
-        [attr.required]="options?.required"
-        [class]="options?.fieldHtmlClass || ''"
-        [id]="'control' + layoutNode?._id"
-        [name]="controlName"
-        [readonly]="options?.readonly ? 'readonly' : null"
-        [type]="layoutNode?.type">
-      <input *ngIf="!boundControl"
-        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
-        [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
-        [attr.maxlength]="options?.maxLength"
-        [attr.minlength]="options?.minLength"
-        [attr.pattern]="options?.pattern"
-        [attr.placeholder]="options?.placeholder"
-        [attr.required]="options?.required"
-        [class]="options?.fieldHtmlClass || ''"
-        [disabled]="controlDisabled"
-        [id]="'control' + layoutNode?._id"
-        [name]="controlName"
-        [readonly]="options?.readonly ? 'readonly' : null"
-        [type]="layoutNode?.type"
-        [value]="controlValue"
-        (input)="updateValue($event)">
-        <datalist *ngIf="options?.typeahead?.source"
-          [id]="'control' + layoutNode?._id + 'Autocomplete'">
-          <option *ngFor="let word of options?.typeahead?.source" [value]="word">
-        </datalist>
-    </div>`,
-})
-export class InputComponent implements OnInit {
-  formControl: AbstractControl;
-  controlName: string;
-  controlValue: string;
-  controlDisabled = false;
-  boundControl = false;
-  options: any;
-  autoCompleteList: string[] = [];
-  @Input() layoutNode: any;
-  @Input() layoutIndex: number[];
-  @Input() dataIndex: number[];
-
-  constructor(
-    private jsf: JsonSchemaFormService
-  ) { }
-
-  ngOnInit() {
-    this.options = this.layoutNode.options || {};
-    this.jsf.initializeControl(this);
-  }
-
-  updateValue(event) {
-    this.jsf.updateValue(this, event.target.value);
-  }
-}

package/src/lib/widget-library/message.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: 'message-widget',
-  template: `
-    <span *ngIf="message"
-      [class]="options?.labelHtmlClass || ''"
-      [innerHTML]="message"></span>`,
-})
-export class MessageComponent implements OnInit {
-  options: any;
-  message: string = null;
-  @Input() layoutNode: any;
-  @Input() layoutIndex: number[];
-  @Input() dataIndex: number[];
-
-  constructor(
-    private jsf: JsonSchemaFormService
-  ) { }
-
-  ngOnInit() {
-    this.options = this.layoutNode.options || {};
-    this.message = this.options.help || this.options.helpvalue ||
-      this.options.msg || this.options.message;
-  }
-}

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

@@ -1,12 +0,0 @@
-import { Component, Input } from '@angular/core';
-
-@Component({
-  // tslint:disable-next-line:component-selector
-  selector: 'none-widget',
-  template: ``,
-})
-export class NoneComponent {
-  @Input() layoutNode: any;
-  @Input() layoutIndex: number[];
-  @Input() dataIndex: number[];
-}

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

@@ -1,79 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { AbstractControl } from '@angular/forms';
-
-import { JsonSchemaFormService } from '../json-schema-form.service';
-
-@Component({
-  // tslint:disable-next-line:component-selector
-  selector: 'number-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>
-      <input *ngIf="boundControl"
-        [formControl]="formControl"
-        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
-        [attr.max]="options?.maximum"
-        [attr.min]="options?.minimum"
-        [attr.placeholder]="options?.placeholder"
-        [attr.required]="options?.required"
-        [attr.readonly]="options?.readonly ? 'readonly' : null"
-        [attr.step]="options?.multipleOf || options?.step || 'any'"
-        [class]="options?.fieldHtmlClass || ''"
-        [id]="'control' + layoutNode?._id"
-        [name]="controlName"
-        [readonly]="options?.readonly ? 'readonly' : null"
-        [title]="lastValidNumber"
-        [type]="layoutNode?.type === 'range' ? 'range' : 'number'">
-      <input *ngIf="!boundControl"
-        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
-        [attr.max]="options?.maximum"
-        [attr.min]="options?.minimum"
-        [attr.placeholder]="options?.placeholder"
-        [attr.required]="options?.required"
-        [attr.readonly]="options?.readonly ? 'readonly' : null"
-        [attr.step]="options?.multipleOf || options?.step || 'any'"
-        [class]="options?.fieldHtmlClass || ''"
-        [disabled]="controlDisabled"
-        [id]="'control' + layoutNode?._id"
-        [name]="controlName"
-        [readonly]="options?.readonly ? 'readonly' : null"
-        [title]="lastValidNumber"
-        [type]="layoutNode?.type === 'range' ? 'range' : 'number'"
-        [value]="controlValue"
-        (input)="updateValue($event)">
-      <span *ngIf="layoutNode?.type === 'range'" [innerHTML]="controlValue"></span>
-    </div>`,
-})
-export class NumberComponent implements OnInit {
-  formControl: AbstractControl;
-  controlName: string;
-  controlValue: any;
-  controlDisabled = false;
-  boundControl = false;
-  options: any;
-  allowNegative = true;
-  allowDecimal = true;
-  allowExponents = false;
-  lastValidNumber = '';
-  @Input() layoutNode: any;
-  @Input() layoutIndex: number[];
-  @Input() dataIndex: number[];
-
-  constructor(
-    private jsf: JsonSchemaFormService
-  ) { }
-
-  ngOnInit() {
-    this.options = this.layoutNode.options || {};
-    this.jsf.initializeControl(this);
-    if (this.layoutNode.dataType === 'integer') { this.allowDecimal = false; }
-  }
-
-  updateValue(event) {
-    this.jsf.updateValue(this, event.target.value);
-  }
-}

package/src/lib/widget-library/one-of.component.ts

@@ -1,36 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { AbstractControl } from '@angular/forms';
-
-import { JsonSchemaFormService } from '../json-schema-form.service';
-
-// TODO: Add this control
-
-@Component({
-  // tslint:disable-next-line:component-selector
-  selector: 'one-of-widget',
-  template: ``,
-})
-export class OneOfComponent implements OnInit {
-  formControl: AbstractControl;
-  controlName: string;
-  controlValue: any;
-  controlDisabled = false;
-  boundControl = false;
-  options: any;
-  @Input() layoutNode: any;
-  @Input() layoutIndex: number[];
-  @Input() dataIndex: number[];
-
-  constructor(
-    private jsf: JsonSchemaFormService
-  ) { }
-
-  ngOnInit() {
-    this.options = this.layoutNode.options || {};
-    this.jsf.initializeControl(this);
-  }
-
-  updateValue(event) {
-    this.jsf.updateValue(this, event.target.value);
-  }
-}

package/src/lib/widget-library/orderable.directive.ts

@@ -1,130 +0,0 @@
-import {
-  Directive,
-  ElementRef,
-  Input,
-  NgZone,
-  OnInit
-  } from '@angular/core';
-import { JsonSchemaFormService } from '../json-schema-form.service';
-
-
-/**
- * OrderableDirective
- *
- * Enables array elements to be reordered by dragging and dropping.
- *
- * Only works for arrays that have at least two elements.
- *
- * Also detects arrays-within-arrays, and correctly moves either
- * the child array element or the parent array element,
- * depending on the drop targert.
- *
- * Listeners for movable element being dragged:
- * - dragstart: add 'dragging' class to element, set effectAllowed = 'move'
- * - dragover: set dropEffect = 'move'
- * - dragend: remove 'dragging' class from element
- *
- * Listeners for stationary items being dragged over:
- * - dragenter: add 'drag-target-...' classes to element
- * - dragleave: remove 'drag-target-...' classes from element
- * - drop: remove 'drag-target-...' classes from element, move dropped array item
- */
-@Directive({
-  // tslint:disable-next-line:directive-selector
-  selector: '[orderable]',
-})
-export class OrderableDirective implements OnInit {
-  arrayLayoutIndex: string;
-  element: any;
-  overParentElement = false;
-  overChildElement = false;
-  @Input() orderable: boolean;
-  @Input() layoutNode: any;
-  @Input() layoutIndex: number[];
-  @Input() dataIndex: number[];
-
-  constructor(
-    private elementRef: ElementRef,
-    private jsf: JsonSchemaFormService,
-    private ngZone: NgZone
-  ) { }
-
-  ngOnInit() {
-    if (this.orderable && this.layoutNode && this.layoutIndex && this.dataIndex) {
-      this.element = this.elementRef.nativeElement;
-      this.element.draggable = true;
-      this.arrayLayoutIndex = 'move:' + this.layoutIndex.slice(0, -1).toString();
-
-      this.ngZone.runOutsideAngular(() => {
-
-        // Listeners for movable element being dragged:
-
-        this.element.addEventListener('dragstart', (event) => {
-          event.dataTransfer.effectAllowed = 'move';
-          event.dataTransfer.setData('text', '');
-          // Hack to bypass stupid HTML drag-and-drop dataTransfer protection
-          // so drag source info will be available on dragenter
-          const sourceArrayIndex = this.dataIndex[this.dataIndex.length - 1];
-          sessionStorage.setItem(this.arrayLayoutIndex, sourceArrayIndex + '');
-        });
-
-        this.element.addEventListener('dragover', (event) => {
-          if (event.preventDefault) { event.preventDefault(); }
-          event.dataTransfer.dropEffect = 'move';
-          return false;
-        });
-
-        // Listeners for stationary items being dragged over:
-
-        this.element.addEventListener('dragenter', (event) => {
-          // Part 1 of a hack, inspired by Dragster, to simulate mouseover and mouseout
-          // behavior while dragging items - http://bensmithett.github.io/dragster/
-          if (this.overParentElement) {
-            return this.overChildElement = true;
-          } else {
-            this.overParentElement = true;
-          }
-
-          const sourceArrayIndex = sessionStorage.getItem(this.arrayLayoutIndex);
-          if (sourceArrayIndex !== null) {
-            if (this.dataIndex[this.dataIndex.length - 1] < +sourceArrayIndex) {
-              this.element.classList.add('drag-target-top');
-            } else if (this.dataIndex[this.dataIndex.length - 1] > +sourceArrayIndex) {
-              this.element.classList.add('drag-target-bottom');
-            }
-          }
-        });
-
-        this.element.addEventListener('dragleave', (event) => {
-          // Part 2 of the Dragster hack
-          if (this.overChildElement) {
-            this.overChildElement = false;
-          } else if (this.overParentElement) {
-            this.overParentElement = false;
-          }
-
-          const sourceArrayIndex = sessionStorage.getItem(this.arrayLayoutIndex);
-          if (!this.overParentElement && !this.overChildElement && sourceArrayIndex !== null) {
-            this.element.classList.remove('drag-target-top');
-            this.element.classList.remove('drag-target-bottom');
-          }
-        });
-
-        this.element.addEventListener('drop', (event) => {
-          this.element.classList.remove('drag-target-top');
-          this.element.classList.remove('drag-target-bottom');
-          // Confirm that drop target is another item in the same array as source item
-          const sourceArrayIndex = sessionStorage.getItem(this.arrayLayoutIndex);
-          const destArrayIndex = this.dataIndex[this.dataIndex.length - 1];
-          if (sourceArrayIndex !== null && +sourceArrayIndex !== destArrayIndex) {
-            // Move array item
-            this.jsf.moveArrayItem(this, +sourceArrayIndex, destArrayIndex);
-          }
-          sessionStorage.removeItem(this.arrayLayoutIndex);
-          return false;
-        });
-
-      });
-    }
-  }
-}

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

@@ -1,101 +0,0 @@
-import { AbstractControl } from '@angular/forms';
-import { buildTitleMap } from '../shared';
-import { Component, Input, OnInit } from '@angular/core';
-import { JsonSchemaFormService } from '../json-schema-form.service';
-
-
-@Component({
-  // tslint:disable-next-line:component-selector
-  selector: 'radios-widget',
-  template: `
-    <label *ngIf="options?.title"
-      [attr.for]="'control' + layoutNode?._id"
-      [class]="options?.labelHtmlClass || ''"
-      [style.display]="options?.notitle ? 'none' : ''"
-      [innerHTML]="options?.title"></label>
-
-    <!-- 'horizontal' = radios-inline or radiobuttons -->
-    <div *ngIf="layoutOrientation === 'horizontal'"
-      [class]="options?.htmlClass || ''">
-      <label *ngFor="let radioItem of radiosList"
-        [attr.for]="'control' + layoutNode?._id + '/' + radioItem?.value"
-        [class]="(options?.itemLabelHtmlClass || '') +
-          ((controlValue + '' === radioItem?.value + '') ?
-          (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
-          (' ' + (options?.style?.unselected || '')))">
-        <input type="radio"
-          [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
-          [attr.readonly]="options?.readonly ? 'readonly' : null"
-          [attr.required]="options?.required"
-          [checked]="radioItem?.value === controlValue"
-          [class]="options?.fieldHtmlClass || ''"
-          [disabled]="controlDisabled"
-          [id]="'control' + layoutNode?._id + '/' + radioItem?.value"
-          [name]="controlName"
-          [value]="radioItem?.value"
-          (change)="updateValue($event)">
-        <span [innerHTML]="radioItem?.name"></span>
-      </label>
-    </div>
-
-    <!-- 'vertical' = regular radios -->
-    <div *ngIf="layoutOrientation !== 'horizontal'">
-      <div *ngFor="let radioItem of radiosList"
-        [class]="options?.htmlClass || ''">
-        <label
-          [attr.for]="'control' + layoutNode?._id + '/' + radioItem?.value"
-          [class]="(options?.itemLabelHtmlClass || '') +
-            ((controlValue + '' === radioItem?.value + '') ?
-            (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
-            (' ' + (options?.style?.unselected || '')))">
-          <input type="radio"
-            [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
-            [attr.readonly]="options?.readonly ? 'readonly' : null"
-            [attr.required]="options?.required"
-            [checked]="radioItem?.value === controlValue"
-            [class]="options?.fieldHtmlClass || ''"
-            [disabled]="controlDisabled"
-            [id]="'control' + layoutNode?._id + '/' + radioItem?.value"
-            [name]="controlName"
-            [value]="radioItem?.value"
-            (change)="updateValue($event)">
-          <span [innerHTML]="radioItem?.name"></span>
-        </label>
-      </div>
-    </div>`,
-})
-export class RadiosComponent implements OnInit {
-  formControl: AbstractControl;
-  controlName: string;
-  controlValue: any;
-  controlDisabled = false;
-  boundControl = false;
-  options: any;
-  layoutOrientation = 'vertical';
-  radiosList: any[] = [];
-  @Input() layoutNode: any;
-  @Input() layoutIndex: number[];
-  @Input() dataIndex: number[];
-
-  constructor(
-    private jsf: JsonSchemaFormService
-  ) { }
-
-  ngOnInit() {
-    this.options = this.layoutNode.options || {};
-    if (this.layoutNode.type === 'radios-inline' ||
-      this.layoutNode.type === 'radiobuttons'
-    ) {
-      this.layoutOrientation = 'horizontal';
-    }
-    this.radiosList = buildTitleMap(
-      this.options.titleMap || this.options.enumNames,
-      this.options.enum, true
-    );
-    this.jsf.initializeControl(this);
-  }
-
-  updateValue(event) {
-    this.jsf.updateValue(this, event.target.value);
-  }
-}