cedar-embeddable-editor 0.9.0

package/src/app/modules/input-types/components/cedar-input-link/cedar-input-link.component.ts

@@ -0,0 +1,92 @@
+import {Component, Input, OnInit, ViewEncapsulation} from '@angular/core';
+import {FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators} from '@angular/forms';
+import {ErrorStateMatcher} from '@angular/material/core';
+import {CedarUIComponent} from '../../../shared/models/ui/cedar-ui-component.model';
+import {FieldComponent} from '../../../shared/models/component/field-component.model';
+import {ActiveComponentRegistryService} from '../../../shared/service/active-component-registry.service';
+import {HandlerContext} from '../../../shared/util/handler-context';
+import {ComponentDataService} from '../../../shared/service/component-data.service';
+
+export class TextFieldErrorStateMatcher implements ErrorStateMatcher {
+  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+    return !!(control && control.invalid && (control.dirty || control.touched));
+  }
+}
+
+@Component({
+  selector: 'app-cedar-input-link',
+  templateUrl: './cedar-input-link.component.html',
+  styleUrls: ['./cedar-input-link.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class CedarInputLinkComponent extends CedarUIComponent implements OnInit {
+
+  component: FieldComponent;
+  options: FormGroup;
+  inputValueControl = new FormControl(null, null);
+  errorStateMatcher = new TextFieldErrorStateMatcher();
+  @Input() handlerContext: HandlerContext;
+
+  constructor(
+    fb: FormBuilder,
+    public cds: ComponentDataService,
+    private activeComponentRegistry: ActiveComponentRegistryService
+  ) {
+    super();
+    this.options = fb.group({
+      inputValue: this.inputValueControl,
+    });
+  }
+
+  ngOnInit(): void {
+    const validators: any[] = [];
+
+    const reg = '(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?';
+    validators.push(Validators.pattern(reg));
+
+    if (this.component.valueInfo.requiredValue) {
+      validators.push(Validators.required);
+    }
+
+    this.inputValueControl = new FormControl(null, validators);
+    if (this.component.valueInfo.defaultValue != null) {
+      this.setValueUIAndModel(this.component.valueInfo.defaultValue);
+    }
+  }
+
+  @Input() set componentToRender(componentToRender: FieldComponent) {
+    this.component = componentToRender;
+    this.activeComponentRegistry.registerComponent(this.component, this);
+  }
+
+  inputChanged($event: Event): void {
+    let val = ($event.target as HTMLTextAreaElement).value;
+
+    if (val.length === 0) {
+      val = null;
+    }
+    this.handlerContext.changeValue(this.component, val);
+  }
+
+  setCurrentValue(currentValue: any): void {
+    this.inputValueControl.setValue(currentValue);
+  }
+
+  clearValue(): void {
+    this.setValueUIAndModel(null);
+  }
+
+  private setValueUIAndModel(value: string): void {
+    this.inputValueControl.setValue(value);
+    this.handlerContext.changeValue(this.component, value);
+  }
+
+  getCharCountHint(): string {
+    let len = 0;
+    if (this.inputValueControl.value != null) {
+      len = this.inputValueControl.value.length;
+    }
+    const s = '' + len;
+    return s;
+  }
+}

package/src/app/modules/input-types/components/cedar-input-multiple-choice/cedar-input-multiple-choice.component.html

@@ -0,0 +1,18 @@
+<form class="form-container" [formGroup]="options">
+  <mat-form-field class="full-width">
+    <input matInput [formControl]="selectedChoiceInputControl" style="display:none">
+    <mat-radio-group [formControl]="selectedChoiceInputControl">
+      <div *ngFor="let choice of component.choiceInfo.choices" class="col-md-2">
+        <mat-radio-button
+          [checked]="choice.selectedByDefault"
+          [value]="choice.label"
+          (change)="inputChanged($event)"
+        >{{choice.label}}</mat-radio-button>
+      </div>
+      <button type="button" tabindex="0" mat-button *ngIf="selectedChoiceInputControl.value" matSuffix mat-icon-button attr.aria-label="{{'Generic.Clear' | translate}}" (click)="clearValue()">
+        <mat-icon>close</mat-icon>
+      </button>
+    </mat-radio-group>
+    <mat-error align="start" *ngIf="selectedChoiceInputControl.getError('required')" class="mat-error">{{'Validation.Required' | translate}}</mat-error>
+  </mat-form-field>
+</form>

package/src/app/modules/input-types/components/cedar-input-multiple-choice/cedar-input-multiple-choice.component.scss

@@ -0,0 +1,5 @@
+.aligned-with-icon{
+  position: absolute;
+  margin-top: 5px;
+  margin-left: 5px;
+}

package/src/app/modules/input-types/components/cedar-input-multiple-choice/cedar-input-multiple-choice.component.spec.ts

@@ -0,0 +1,25 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {CedarInputMultipleChoiceComponent} from './cedar-input-multiple-choice.component';
+
+describe('CedarInputMultipleChoiceComponent', () => {
+  let component: CedarInputMultipleChoiceComponent;
+  let fixture: ComponentFixture<CedarInputMultipleChoiceComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [CedarInputMultipleChoiceComponent]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CedarInputMultipleChoiceComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/app/modules/input-types/components/cedar-input-multiple-choice/cedar-input-multiple-choice.component.ts

@@ -0,0 +1,78 @@
+import {Component, Input, OnInit, ViewEncapsulation} from '@angular/core';
+import {FieldComponent} from '../../../shared/models/component/field-component.model';
+import {FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators} from '@angular/forms';
+import {CedarUIComponent} from '../../../shared/models/ui/cedar-ui-component.model';
+import {ActiveComponentRegistryService} from '../../../shared/service/active-component-registry.service';
+import {HandlerContext} from '../../../shared/util/handler-context';
+import {ErrorStateMatcher} from '@angular/material/core';
+import {TextFieldErrorStateMatcher} from '../cedar-input-text/cedar-input-text.component';
+
+export class MultipleChoiceErrorStateMatcher implements ErrorStateMatcher {
+  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+    return !!(control && control.invalid && (control.dirty || control.touched));
+  }
+}
+@Component({
+  selector: 'app-cedar-input-multiple-choice',
+  templateUrl: './cedar-input-multiple-choice.component.html',
+  styleUrls: ['./cedar-input-multiple-choice.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class CedarInputMultipleChoiceComponent extends CedarUIComponent implements OnInit {
+  component: FieldComponent;
+  options: FormGroup;
+  selectedChoiceInputControl = new FormControl(null, null);
+  errorStateMatcher = new MultipleChoiceErrorStateMatcher();
+  @Input() handlerContext: HandlerContext;
+
+  constructor(
+    fb: FormBuilder,
+    private activeComponentRegistry: ActiveComponentRegistryService
+  ) {
+    super();
+    this.options = fb.group({
+      selectedChoiceValue: this.selectedChoiceInputControl
+    });
+  }
+
+  ngOnInit(): void {
+    this.populateItemsOnLoad();
+    const validators: any[] = [];
+    if (this.component.valueInfo.requiredValue) {
+      validators.push(Validators.required);
+    }
+    this.selectedChoiceInputControl = new FormControl(null, validators);
+  }
+
+  @Input() set componentToRender(componentToRender: FieldComponent) {
+    this.component = componentToRender;
+    this.activeComponentRegistry.registerComponent(this.component, this);
+  }
+
+  inputChanged(event): void {
+    this.handlerContext.changeValue(this.component, event.value);
+  }
+  clearValue(): void {
+    this.setValueUIAndModel(null);
+  }
+
+  private setValueUIAndModel(value: string): void {
+    this.selectedChoiceInputControl.setValue(value);
+    this.handlerContext.changeValue(this.component, value);
+  }
+
+  setCurrentValue(currentValue: any): void {
+    this.selectedChoiceInputControl.setValue(currentValue);
+  }
+
+  private populateItemsOnLoad(): void {
+    for (const choice of this.component.choiceInfo.choices) {
+      if (choice.selectedByDefault) {
+        this.handlerContext.changeValue(this.component, choice.label);
+        return;
+      }
+    }
+    this.handlerContext.changeValue(this.component, null);
+  }
+
+}

package/src/app/modules/input-types/components/cedar-input-numeric/cedar-input-numeric.component.html

@@ -0,0 +1,15 @@
+<form class="form-container" [formGroup]="options">
+  <mat-form-field class="full-width">
+<!--    <mat-label>{{cds.getRenderingLabelForComponent(component)}}</mat-label>-->
+    <input matInput type="number" placeholder="{{'Generic.NumberOnly' | translate}}"
+           [formControl]="inputValueControl"
+           (input)="inputChanged($event)"
+           attr.aria-label="{{cds.getRenderingLabelForComponent(component)}}">
+    <span matSuffix>{{unitOfMeasure}}</span>
+    <mat-error align="start" *ngIf="inputValueControl.getError('min')" class="mat-error">{{'Validation.Numeric.MinValue' | translate: {constraintMinValue} }}</mat-error>
+    <mat-error align="start" *ngIf="inputValueControl.getError('max')" class="mat-error">{{'Validation.Numeric.MaxValue' | translate: {constraintMaxValue} }}</mat-error>
+    <mat-error align="start" *ngIf="inputValueControl.getError('pattern')" class="mat-error">{{patternErrorMessage}}.</mat-error>
+    <mat-error align="start" *ngIf="inputValueControl.getError('required')" class="mat-error">{{'Validation.Required' | translate}}</mat-error>
+    <mat-hint align="end">{{getMinMaxValueHint()}}</mat-hint>
+  </mat-form-field>
+</form>

package/src/app/modules/input-types/components/cedar-input-numeric/cedar-input-numeric.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CedarInputNumericComponent } from './cedar-input-numeric.component';
+
+describe('CedarInputNumericComponent', () => {
+  let component: CedarInputNumericComponent;
+  let fixture: ComponentFixture<CedarInputNumericComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CedarInputNumericComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CedarInputNumericComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/app/modules/input-types/components/cedar-input-numeric/cedar-input-numeric.component.ts

@@ -0,0 +1,169 @@
+import {Component, Input, OnInit, ViewEncapsulation} from '@angular/core';
+import {FieldComponent} from '../../../shared/models/component/field-component.model';
+import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
+import {ComponentDataService} from '../../../shared/service/component-data.service';
+import {CedarUIComponent} from '../../../shared/models/ui/cedar-ui-component.model';
+import {ActiveComponentRegistryService} from '../../../shared/service/active-component-registry.service';
+import {HandlerContext} from '../../../shared/util/handler-context';
+import {Numbers} from '../../../shared/models/numbers.model';
+import {Xsd} from '../../../shared/models/xsd.model';
+
+@Component({
+  selector: 'app-cedar-input-numeric',
+  templateUrl: './cedar-input-numeric.component.html',
+  styleUrls: ['./cedar-input-numeric.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class CedarInputNumericComponent extends CedarUIComponent implements OnInit {
+
+  component: FieldComponent;
+  options: FormGroup;
+  inputValueControl = new FormControl(null, Validators.min(10));
+  unitOfMeasure: string = null;
+  constraintMinValue = null;
+  constraintMaxValue = null;
+  patternErrorMessage = null;
+  @Input() handlerContext: HandlerContext;
+
+
+  constructor(
+    fb: FormBuilder,
+    public cds: ComponentDataService,
+    private activeComponentRegistry: ActiveComponentRegistryService
+  ) {
+    super();
+    this.options = fb.group({
+      inputValue: this.inputValueControl,
+    });
+  }
+
+  ngOnInit(): void {
+    this.unitOfMeasure = this.component.numberInfo.unitOfMeasure;
+
+    const validators: any[] = [];
+
+    this.constraintMinValue = this.component.numberInfo.minValue;
+    this.constraintMaxValue = this.component.numberInfo.maxValue;
+
+    if (this.component.valueInfo.requiredValue) {
+      validators.push(Validators.required);
+    }
+
+    const numberType = this.component.numberInfo.numberType;
+    const decimalPlace = this.component.numberInfo.decimalPlace;
+    let maxDecimalError = '';
+
+    if (numberType === Xsd.int) {
+      validators.push(Validators.pattern(Numbers.PATTERN_XSD_INT_AND_LONG));
+      this.patternErrorMessage = ' The value should be an integer.';
+
+      if (this.constraintMinValue == null) {
+        this.constraintMinValue = Numbers.NUMBER_INT_MIN;
+      }
+
+      if (this.constraintMaxValue == null) {
+        this.constraintMaxValue = Numbers.NUMBER_INT_MAX;
+      }
+    }
+
+    if (numberType === Xsd.long) {
+      validators.push(Validators.pattern(Numbers.PATTERN_XSD_INT_AND_LONG));
+      this.patternErrorMessage = ' The value should be a long integer.';
+
+      if (this.constraintMinValue == null) {
+        this.constraintMinValue = Numbers.NUMBER_LONG_MIN;
+      }
+
+      if (this.constraintMaxValue == null) {
+        this.constraintMaxValue = Numbers.NUMBER_LONG_MAX;
+      }
+    }
+
+    if (numberType === Xsd.float || numberType === Xsd.double) {
+      let pattern: string = Numbers.PATTERN_XSD_FLOAT_AND_DOUBLE;
+      let maxDig = '';
+
+      if (decimalPlace != null) {
+        maxDig = '' + decimalPlace;
+        maxDecimalError = ' maximum ' + decimalPlace + ' decimals.';
+      }
+      pattern = pattern.replace(new RegExp('maxDig', 'g'), maxDig);
+      validators.push(Validators.pattern(pattern));
+    }
+
+    if (numberType === Xsd.float) {
+      this.patternErrorMessage = ' The value should be a float,' + maxDecimalError;
+    }
+
+    if (numberType === Xsd.double) {
+      this.patternErrorMessage = ' The value should be a double,' + maxDecimalError;
+    }
+
+    if (this.constraintMinValue != null) {
+      validators.push(Validators.min(this.constraintMinValue));
+    }
+
+    if (this.constraintMaxValue != null) {
+      validators.push(Validators.max(this.constraintMaxValue));
+    }
+    this.inputValueControl = new FormControl(null, validators);
+  }
+
+  @Input() set componentToRender(componentToRender: FieldComponent) {
+    this.component = componentToRender;
+    this.activeComponentRegistry.registerComponent(this.component, this);
+  }
+
+  inputChanged($event: Event): void {
+    let val = ($event.target as HTMLTextAreaElement).value;
+
+    if (val.length === 0) {
+      val = null;
+    }
+    this.handlerContext.changeValue(this.component, val);
+  }
+
+  setCurrentValue(currentValue: any): void {
+    this.inputValueControl.setValue(currentValue);
+  }
+
+  clearValue(): void {
+    this.setValueUIAndModel(null);
+  }
+
+  private setValueUIAndModel(value: string): void {
+    this.inputValueControl.setValue(value);
+    this.handlerContext.changeValue(this.component, value);
+  }
+
+  getMinMaxValueHint(): string {
+    let s = '';
+    let min = null;
+    let max = null;
+
+    if (this.component.numberInfo.minValue != null) {
+      min = this.component.numberInfo.minValue;
+    }
+
+    if (this.component.numberInfo.maxValue != null) {
+      max = this.component.numberInfo.maxValue;
+    }
+
+    if (min != null || max != null) {
+      if (min != null) {
+        s += 'min: ' + min + '; ';
+      }
+
+      if (max != null) {
+        s += 'max: ' + max + ';';
+      }
+    }
+    const decimalPlace = this.component.numberInfo.decimalPlace;
+
+    if (decimalPlace != null) {
+      s += ' max ' + decimalPlace + ' decimals;';
+    }
+    return s;
+  }
+
+}

package/src/app/modules/input-types/components/cedar-input-phone/cedar-input-phone.component.html

@@ -0,0 +1,15 @@
+<form class="form-container" [formGroup]="options">
+  <mat-form-field class="full-width">
+<!--    <mat-label>{{cds.getRenderingLabelForComponent(component)}}</mat-label>-->
+    <input matInput type="text"
+           [formControl]="inputValueControl"
+           [errorStateMatcher]="errorStateMatcher"
+           (input)="inputChanged($event)"
+           attr.aria-label="{{cds.getRenderingLabelForComponent(component)}}">
+    <button type="button" mat-button *ngIf="inputValueControl.value" matSuffix mat-icon-button attr.aria-label="{{'Generic.Clear' | translate}}" (click)="clearValue()">
+      <mat-icon>close</mat-icon>
+    </button>
+    <mat-error align="start" *ngIf="inputValueControl.getError('required')" class="mat-error">{{'Validation.Required' | translate}}</mat-error>
+  </mat-form-field>
+</form>
+

package/src/app/modules/input-types/components/cedar-input-phone/cedar-input-phone.component.spec.ts

@@ -0,0 +1,25 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {CedarInputPhoneComponent} from './cedar-input-phone.component';
+
+describe('CedarInputPhoneComponent', () => {
+  let component: CedarInputPhoneComponent;
+  let fixture: ComponentFixture<CedarInputPhoneComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [CedarInputPhoneComponent]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CedarInputPhoneComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/app/modules/input-types/components/cedar-input-phone/cedar-input-phone.component.ts

@@ -0,0 +1,94 @@
+import {Component, Input, OnInit, ViewEncapsulation} from '@angular/core';
+import {FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators} from '@angular/forms';
+import {ErrorStateMatcher} from '@angular/material/core';
+import {CedarUIComponent} from '../../../shared/models/ui/cedar-ui-component.model';
+import {FieldComponent} from '../../../shared/models/component/field-component.model';
+import {ActiveComponentRegistryService} from '../../../shared/service/active-component-registry.service';
+import {HandlerContext} from '../../../shared/util/handler-context';
+import {ComponentDataService} from '../../../shared/service/component-data.service';
+
+export class TextFieldErrorStateMatcher implements ErrorStateMatcher {
+  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+    return !!(control && control.invalid && (control.dirty || control.touched));
+  }
+}
+
+@Component({
+  selector: 'app-cedar-input-phone',
+  templateUrl: './cedar-input-phone.component.html',
+  styleUrls: ['./cedar-input-phone.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class CedarInputPhoneComponent extends CedarUIComponent implements OnInit {
+
+  component: FieldComponent;
+  options: FormGroup;
+  inputValueControl = new FormControl(null, null);
+  errorStateMatcher = new TextFieldErrorStateMatcher();
+  @Input() handlerContext: HandlerContext;
+
+  constructor(
+    fb: FormBuilder,
+    public cds: ComponentDataService,
+    private activeComponentRegistry: ActiveComponentRegistryService
+  ) {
+    super();
+    this.options = fb.group({
+      inputValue: this.inputValueControl,
+    });
+  }
+
+  ngOnInit(): void {
+    const validators: any[] = [];
+
+    const reg = /^[\+0-9\s\-\(\)]+$/im;
+    validators.push(Validators.pattern(reg));
+
+    if (this.component.valueInfo.requiredValue) {
+      validators.push(Validators.required);
+    }
+
+    this.inputValueControl = new FormControl(null, validators);
+
+    if (this.component.valueInfo.defaultValue != null) {
+      this.setValueUIAndModel(this.component.valueInfo.defaultValue);
+    }
+  }
+
+  @Input() set componentToRender(componentToRender: FieldComponent) {
+    this.component = componentToRender;
+    this.activeComponentRegistry.registerComponent(this.component, this);
+  }
+
+  inputChanged($event: Event): void {
+    let val = ($event.target as HTMLTextAreaElement).value;
+
+    if (val.length === 0) {
+      val = null;
+    }
+
+    this.handlerContext.changeValue(this.component, val);
+  }
+
+  setCurrentValue(currentValue: any): void {
+    this.inputValueControl.setValue(currentValue);
+  }
+
+  clearValue(): void {
+    this.setValueUIAndModel(null);
+  }
+
+  private setValueUIAndModel(value: string): void {
+    this.inputValueControl.setValue(value);
+    this.handlerContext.changeValue(this.component, value);
+  }
+
+  getCharCountHint(): string {
+    let len = 0;
+    if (this.inputValueControl.value != null) {
+      len = this.inputValueControl.value.length;
+    }
+    const s = '' + len;
+    return s;
+  }
+}

package/src/app/modules/input-types/components/cedar-input-select/cedar-input-select.component.html

@@ -0,0 +1,19 @@
+<form class="form-container" [formGroup]="options">
+  <mat-form-field class="full-width">
+<!--    <mat-label>{{cds.getRenderingLabelForComponent(component)}}</mat-label>-->
+    <mat-select #inputSelect
+                [formControl]="inputValueControl"
+                [errorStateMatcher]="errorStateMatcher"
+                multiple="{{component.choiceInfo.multipleChoice}}"
+                (selectionChange)="inputChanged()"
+                [aria-label]=cds.getRenderingLabelForComponent(component)>
+      <mat-option *ngFor="let option of dropdownList" [value]="option.id"
+        >{{option.label}}</mat-option>
+      </mat-select>
+      <button type="button" tabindex="0" mat-button *ngIf="inputValueControl.value" matSuffix mat-icon-button attr.aria-label="{{'Generic.Clear' | translate}}" (click)="clearValue($event)">
+        <mat-icon>close</mat-icon>
+      </button>
+      <mat-error tabindex="0" align="start" *ngIf="inputValueControl.hasError('required')" class="mat-error">{{'Validation.Required' | translate}}</mat-error>
+      <mat-hint *ngIf=maxSelections!==undefined>{{'Validation.Select.MaxSelection' | translate: {maxSelections} }}</mat-hint>
+  </mat-form-field>
+</form>

package/src/app/modules/input-types/components/cedar-input-select/cedar-input-select.component.spec.ts

@@ -0,0 +1,25 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {CedarInputSelectComponent} from './cedar-input-select.component';
+
+describe('CedarInputSelectComponent', () => {
+  let component: CedarInputSelectComponent;
+  let fixture: ComponentFixture<CedarInputSelectComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [CedarInputSelectComponent]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CedarInputSelectComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});