@ng-formworks/core 15.2.7

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

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

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

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

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

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

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

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

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