cedar-embeddable-editor 0.9.0 → 0.9.2

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

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

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

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

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

@@ -1,108 +0,0 @@
-import {Component, Input, OnInit, ViewEncapsulation, ViewChild} from '@angular/core';
-import {FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators} from '@angular/forms';
-import {ErrorStateMatcher} from '@angular/material/core';
-import {FieldComponent} from '../../../shared/models/component/field-component.model';
-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 {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-select',
-  templateUrl: './cedar-input-select.component.html',
-  styleUrls: ['./cedar-input-select.component.scss'],
-  encapsulation: ViewEncapsulation.None
-})
-export class CedarInputSelectComponent extends CedarUIComponent implements OnInit {
-  @ViewChild('inputSelect') selectElement;
-  readonly ITEM_ID_FIELD = 'id';
-  readonly ITEM_TEXT_FIELD = 'label';
-
-  component: FieldComponent;
-  dropdownList = [];
-  selectedItems: any;
-  options: FormGroup;
-  inputValueControl = new FormControl(null, null);
-  errorStateMatcher = new TextFieldErrorStateMatcher();
-  selections: string[];
-  maxSelections: number;
-  @Input() handlerContext: HandlerContext;
-
-  constructor(private activeComponentRegistry: ActiveComponentRegistryService, public cds: ComponentDataService, fb: FormBuilder) {
-    super();
-    this.options = fb.group({
-      inputValue: this.inputValueControl,
-    });
-  }
-  ngOnInit(): void {
-    this.populateItemsOnLoad();
-    const validators: any[] = [];
-
-    if (this.component.valueInfo.requiredValue) {
-      validators.push(Validators.required);
-    }
-    this.inputValueControl = new FormControl(null, validators);
-  }
-
-  @Input() set componentToRender(componentToRender: FieldComponent) {
-    this.component = componentToRender;
-    this.activeComponentRegistry.registerComponent(this.component, this);
-    this.maxSelections = this.component.multiInfo.maxItems;
-  }
-
-  inputChanged(): void {
-    const values = this.inputValueControl.value || [];
-    if ( this.maxSelections === undefined || (values && values.length <= this.maxSelections) ){
-      this.selections = values;
-    } else {
-      this.inputValueControl.setValue(this.selections);
-    }
-    // close dropdown if max selections reached
-    if (this.selectElement && this.maxSelections !== undefined && (values && values.length === this.maxSelections)){
-      this.selectElement.close();
-    }
-    this.changeValue(this.selections);
-  }
-
-  setCurrentValue(currentValue: any): void {
-    this.inputValueControl.setValue(currentValue);
-  }
-  private populateItemsOnLoad(): void {
-    const multi = this.component.choiceInfo.multipleChoice;
-    if (multi) {
-      this.selectedItems = [];
-    }
-    for (const choice of this.component.choiceInfo.choices) {
-      const entry = {};
-      entry[this.ITEM_ID_FIELD] = choice.label;
-      entry[this.ITEM_TEXT_FIELD] = choice.label;
-      this.dropdownList.push(entry);
-
-      if (choice.selectedByDefault) {
-        if (multi) {
-          this.selectedItems.push(entry);
-        } else {
-          this.selectedItems = entry;
-        }
-      }
-    }
-    this.inputChanged();
-  }
-  clearValue($event): void {
-    $event.stopPropagation();
-    this.inputValueControl.setValue([]);
-    this.changeValue([]);
-  }
-  changeValue(values): void{
-    const multi = this.component.choiceInfo.multipleChoice;
-    if (multi) {
-      this.handlerContext.changeListValue(this.component, values);
-    } else {
-      this.handlerContext.changeValue(this.component, values[0]);
-    }
-  }
-}

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

@@ -1,25 +0,0 @@
-<form class="form-container" [formGroup]="options">
-  <mat-form-field class="full-width">
-<!--    <mat-label>{{cds.getRenderingLabelForComponent(component)}}</mat-label>-->
-    <input matInput type="text" *ngIf="component.basicInfo.inputType==inputText"
-           [formControl]="inputValueControl"
-           [errorStateMatcher]="errorStateMatcher"
-           (input)="inputChanged($event)"
-           attr.aria-label="{{cds.getRenderingLabelForComponent(component)}}">
-    <textarea matInput type="text" *ngIf="component.basicInfo.inputType==inputTextarea"
-              cdkTextareaAutosize
-              cdkAutosizeMinRows="6"
-              [formControl]="inputValueControl"
-              [errorStateMatcher]="errorStateMatcher"
-              (input)="inputChanged($event)"
-              attr.aria-label="{{cds.getRenderingLabelForComponent(component)}}"></textarea>
-    <button type="button" tabindex="0" 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 *ngIf="inputValueControl.getError('minlength')">{{'Validation.Text.MinLength' | translate: {constraintMinLength} }}</mat-error>
-    <mat-error *ngIf="inputValueControl.getError('maxlength')">{{'Validation.Text.MaxLength' | translate: {constraintMaxLength} }}</mat-error>
-    <mat-error *ngIf="inputValueControl.hasError('required')">{{'Validation.Required' | translate}}</mat-error>
-    <mat-hint align="end">{{getCharCountHint()}}</mat-hint>
-  </mat-form-field>
-</form>
-

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

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

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

@@ -1,125 +0,0 @@
-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 {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 {ErrorStateMatcher} from '@angular/material/core';
-import {InputType} from '../../../shared/models/input-type.model';
-
-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-text',
-  templateUrl: './cedar-input-text.component.html',
-  styleUrls: ['./cedar-input-text.component.scss'],
-  encapsulation: ViewEncapsulation.None
-})
-export class CedarInputTextComponent extends CedarUIComponent implements OnInit {
-
-  component: FieldComponent;
-  options: FormGroup;
-  inputValueControl = new FormControl(null, null);
-  errorStateMatcher = new TextFieldErrorStateMatcher();
-  constraintMinLength = null;
-  constraintMaxLength = null;
-  @Input() handlerContext: HandlerContext;
-  inputText = InputType.text;
-  inputTextarea = InputType.textarea;
-
-  constructor(
-    fb: FormBuilder,
-    public cds: ComponentDataService,
-    private activeComponentRegistry: ActiveComponentRegistryService
-  ) {
-    super();
-    this.options = fb.group({
-      inputValue: this.inputValueControl,
-    });
-  }
-
-  ngOnInit(): void {
-    const validators: any[] = [];
-
-    this.constraintMinLength = this.component.valueInfo.minLength;
-
-    if (this.constraintMinLength != null) {
-      validators.push(Validators.minLength(this.constraintMinLength));
-    }
-    this.constraintMaxLength = this.component.valueInfo.maxLength;
-
-    if (this.constraintMaxLength != null) {
-      validators.push(Validators.maxLength(this.constraintMaxLength));
-    }
-
-    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;
-    }
-    let s = '' + len;
-    let min = null;
-    let max = null;
-    if (this.component.valueInfo.minLength != null) {
-      min = this.component.valueInfo.minLength;
-    }
-    if (this.component.valueInfo.maxLength != null) {
-      max = this.component.valueInfo.maxLength;
-    }
-    if (min != null || max != null) {
-      s += ' / ';
-      if (min != null) {
-        s += min + ' ';
-      }
-      s += ' - ';
-      if (max != null) {
-        s += max;
-      }
-    }
-    return s;
-  }
-
-}

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

@@ -1,8 +0,0 @@
-<mat-card class="child-component-card image-component">
-  <div role="img" attr.aria-label="{{component.labelInfo.description}}">
-    <img mat-card-image src="{{component.contentInfo.content}}" alt="{{component.labelInfo.description}}" />
-  </div>
-  <mat-card-content>
-    {{component.labelInfo.description}}
-  </mat-card-content>
-</mat-card>

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

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

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

@@ -1,40 +0,0 @@
-import {Component, Input, OnInit, ViewEncapsulation} from '@angular/core';
-import {FormBuilder} 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 {StaticFieldComponent} from '../../../shared/models/static/static-field-component.model';
-
-@Component({
-  selector: 'app-cedar-static-image',
-  templateUrl: './cedar-static-image.component.html',
-  styleUrls: ['./cedar-static-image.component.scss'],
-  encapsulation: ViewEncapsulation.None
-})
-export class CedarStaticImageComponent extends CedarUIComponent implements OnInit {
-
-  component: StaticFieldComponent;
-  @Input() handlerContext: HandlerContext;
-
-  constructor(
-    fb: FormBuilder,
-    public cds: ComponentDataService,
-    private activeComponentRegistry: ActiveComponentRegistryService
-  ) {
-    super();
-  }
-
-  ngOnInit(): void {
-  }
-
-  @Input() set componentToRender(componentToRender: StaticFieldComponent) {
-    this.component = componentToRender;
-    this.activeComponentRegistry.registerComponent(this.component, this);
-  }
-
-  setCurrentValue(currentValue: any): void {
-    // DO NOTHING
-  }
-
-}

package/src/app/modules/input-types/components/cedar-static-page-break/cedar-static-page-break.component.html

@@ -1,20 +0,0 @@
-<div class="pager-container page-break-paginator-container">
-  <span class="page-break-label">{{'Generic.Page' | translate}}:</span>
-  <div class="pager-chips">
-    <mat-chip-list>
-      <mat-chip *ngFor="let pageNumber of pageBreakPaginatorService.allPageIndices()"
-                [selected]="pageNumber == pageBreakPaginatorService.currentPageBreakIndex"
-                (click)="pageBreakPaginatorService.page(pageNumber)"
-                selectable="true"
-      >{{pageNumber + 1}}</mat-chip>
-    </mat-chip-list>
-  </div>
-  <div class="page-break-pager">
-    <mat-paginator [length]="pageBreakPaginatorService.numPages()"
-                   [hidePageSize]="true"
-                   [pageSize]="1"
-                   [pageIndex]="pageBreakPaginatorService.currentPageBreakIndex"
-                   (page)="paginatorChanged($event)">
-    </mat-paginator>
-  </div>
-</div>

package/src/app/modules/input-types/components/cedar-static-page-break/cedar-static-page-break.component.scss

@@ -1,24 +0,0 @@
-.page-break-paginator-container {
-  margin-top: 0;
-  margin-bottom: 0;
-
-  .pager-chips {
-    margin-right: 0;
-  }
-}
-
-.page-break-pager {
-  .mat-paginator {
-    background-color: transparent;
-  }
-
-  .mat-paginator-range-label {
-    display: none;
-  }
-}
-
-.page-break-label {
-  font-size: 16px;
-  font-weight: bold;
-  margin-right: 20px;
-}

package/src/app/modules/input-types/components/cedar-static-page-break/cedar-static-page-break.component.spec.ts

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

package/src/app/modules/input-types/components/cedar-static-page-break/cedar-static-page-break.component.ts

@@ -1,36 +0,0 @@
-import {Component, Injectable, Input, OnInit, ViewEncapsulation} from '@angular/core';
-import {DataContext} from '../../../shared/util/data-context';
-import {MatPaginatorIntl} from '@angular/material/paginator';
-import {PageBreakPaginatorService} from '../../../shared/service/page-break-paginator.service';
-
-@Injectable()
-export class CustomMatPaginatorIntl extends MatPaginatorIntl {
-  getRangeLabel = (page: number, pageSize: number, length: number) => {
-    return '';
-  }
-}
-
-@Component({
-  selector: 'app-cedar-static-page-break',
-  templateUrl: './cedar-static-page-break.component.html',
-  styleUrls: ['./cedar-static-page-break.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-  providers: [{provide: MatPaginatorIntl, useClass: CustomMatPaginatorIntl}]
-})
-export class CedarStaticPageBreakComponent implements OnInit {
-
-  @Input() dataContext: DataContext;
-  @Input() pageBreakPaginatorService: PageBreakPaginatorService;
-
-
-  constructor() {
-  }
-
-  ngOnInit(): void {
-  }
-
-  paginatorChanged(event): void {
-    this.pageBreakPaginatorService.page(event.pageIndex);
-  }
-
-}

package/src/app/modules/input-types/components/cedar-static-rich-text/cedar-static-rich-text.component.html

@@ -1,2 +0,0 @@
-<p [innerHTML]="(component.contentInfo.content || '') | keepHtml"></p>
-

package/src/app/modules/input-types/components/cedar-static-rich-text/cedar-static-rich-text.component.spec.ts

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