@ng-formworks/core 15.2.7

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

@@ -0,0 +1,54 @@
+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: 'button-widget',
+  template: `
+    <div
+      [class]="options?.htmlClass || ''">
+      <button
+        [attr.readonly]="options?.readonly ? 'readonly' : null"
+        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [class]="options?.fieldHtmlClass || ''"
+        [disabled]="controlDisabled"
+        [name]="controlName"
+        [type]="layoutNode?.type"
+        [value]="controlValue"
+        (click)="updateValue($event)">
+        <span *ngIf="options?.icon || options?.title"
+          [class]="options?.icon"
+          [innerHTML]="options?.title"></span>
+      </button>
+    </div>`,
+})
+export class ButtonComponent 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) {
+    if (typeof this.options.onClick === 'function') {
+      this.options.onClick(event);
+    } else {
+      this.jsf.updateValue(this, event.target.value);
+    }
+  }
+}

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

@@ -0,0 +1,74 @@
+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: 'checkbox-widget',
+  template: `
+    <label
+      [attr.for]="'control' + layoutNode?._id"
+      [class]="options?.itemLabelHtmlClass || ''">
+      <input *ngIf="boundControl"
+        [formControl]="formControl"
+        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [class]="(options?.fieldHtmlClass || '') + (isChecked ?
+          (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
+          (' ' + (options?.style?.unselected || '')))"
+        [id]="'control' + layoutNode?._id"
+        [name]="controlName"
+        [readonly]="options?.readonly ? 'readonly' : null"
+        type="checkbox">
+      <input *ngIf="!boundControl"
+        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [checked]="isChecked ? 'checked' : null"
+        [class]="(options?.fieldHtmlClass || '') + (isChecked ?
+          (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
+          (' ' + (options?.style?.unselected || '')))"
+        [disabled]="controlDisabled"
+        [id]="'control' + layoutNode?._id"
+        [name]="controlName"
+        [readonly]="options?.readonly ? 'readonly' : null"
+        [value]="controlValue"
+        type="checkbox"
+        (change)="updateValue($event)">
+      <span *ngIf="options?.title"
+        [style.display]="options?.notitle ? 'none' : ''"
+        [innerHTML]="options?.title"></span>
+    </label>`,
+})
+export class CheckboxComponent implements OnInit {
+  formControl: AbstractControl;
+  controlName: string;
+  controlValue: any;
+  controlDisabled = false;
+  boundControl = false;
+  options: any;
+  trueValue: any = true;
+  falseValue: any = false;
+  @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.controlValue === null || this.controlValue === undefined) {
+      this.controlValue = this.options.title;
+    }
+  }
+
+  updateValue(event) {
+    event.preventDefault();
+    this.jsf.updateValue(this, event.target.checked ? this.trueValue : this.falseValue);
+  }
+
+  get isChecked() {
+    return this.jsf.getFormControlValue(this) === this.trueValue;
+  }
+}

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

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

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

@@ -0,0 +1,39 @@
+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/index.ts

@@ -0,0 +1,56 @@
+import { AddReferenceComponent } from './add-reference.component';
+import { ButtonComponent } from './button.component';
+import { CheckboxComponent } from './checkbox.component';
+import { CheckboxesComponent } from './checkboxes.component';
+import { FileComponent } from './file.component';
+import { HiddenComponent } from './hidden.component';
+import { InputComponent } from './input.component';
+import { MessageComponent } from './message.component';
+import { NoneComponent } from './none.component';
+import { NumberComponent } from './number.component';
+import { OneOfComponent } from './one-of.component';
+import { RadiosComponent } from './radios.component';
+import { RootComponent } from './root.component';
+import { SectionComponent } from './section.component';
+import { SelectComponent } from './select.component';
+import { SelectFrameworkComponent } from './select-framework.component';
+import { SelectWidgetComponent } from './select-widget.component';
+import { SubmitComponent } from './submit.component';
+import { TabComponent } from './tab.component';
+import { TabsComponent } from './tabs.component';
+import { TemplateComponent } from './template.component';
+import { TextareaComponent } from './textarea.component';
+
+export const BASIC_WIDGETS = [
+  AddReferenceComponent, OneOfComponent, ButtonComponent, CheckboxComponent,
+  CheckboxesComponent, FileComponent, HiddenComponent, InputComponent,
+  MessageComponent, NoneComponent, NumberComponent, RadiosComponent,
+  RootComponent, SectionComponent, SelectComponent, SelectFrameworkComponent,
+  SelectWidgetComponent, SubmitComponent, TabComponent, TabsComponent,
+  TemplateComponent, TextareaComponent
+];
+
+export { AddReferenceComponent } from './add-reference.component';
+export { OneOfComponent } from './one-of.component';
+export { ButtonComponent } from './button.component';
+export { CheckboxComponent } from './checkbox.component';
+export { CheckboxesComponent } from './checkboxes.component';
+export { FileComponent } from './file.component';
+export { HiddenComponent } from './hidden.component';
+export { InputComponent } from './input.component';
+export { MessageComponent } from './message.component';
+export { NoneComponent } from './none.component';
+export { NumberComponent } from './number.component';
+export { OrderableDirective } from './orderable.directive';
+export { RadiosComponent } from './radios.component';
+export { RootComponent } from './root.component';
+export { SectionComponent } from './section.component';
+export { SelectComponent } from './select.component';
+export { SelectFrameworkComponent } from './select-framework.component';
+export { SelectWidgetComponent } from './select-widget.component';
+export { SubmitComponent } from './submit.component';
+export { TabComponent } from './tab.component';
+export { TabsComponent } from './tabs.component';
+export { TemplateComponent } from './template.component';
+export { TextareaComponent } from './textarea.component';
+export { WidgetLibraryService } from './widget-library.service';

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

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

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

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

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

@@ -0,0 +1,36 @@
+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);
+  }
+}