cedar-embeddable-editor 0.9.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,35 @@
+import {Component, Input, OnInit, ViewEncapsulation} from '@angular/core';
+import {StaticFieldComponent} from '../../../shared/models/static/static-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';
+
+@Component({
+  selector: 'app-cedar-static-rich-text',
+  templateUrl: './cedar-static-rich-text.component.html',
+  styleUrls: ['./cedar-static-rich-text.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class CedarStaticRichTextComponent extends CedarUIComponent implements OnInit {
+
+  component: StaticFieldComponent;
+  @Input() handlerContext: HandlerContext;
+
+
+  constructor(private activeComponentRegistry: ActiveComponentRegistryService) {
+    super();
+  }
+
+  ngOnInit(): void {
+  }
+
+  @Input() set componentToRender(componentToRender: StaticFieldComponent) {
+    this.component = componentToRender;
+    this.activeComponentRegistry.registerComponent(this.component, this);
+  }
+
+  setCurrentValue(currentValue: any): void {
+    // not applicable to rich text component
+  }
+
+}

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

@@ -0,0 +1,8 @@
+<mat-card class="child-component-card section-break-component">
+  <div class="form-container">
+    <mat-card-header>
+      <h1>{{cds.getRenderingLabelForComponent(component)}}</h1>
+      <mat-icon matTooltip="{{component.labelInfo.description}}" class="icon-help">help</mat-icon>
+    </mat-card-header>
+  </div>
+</mat-card>

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

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

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

@@ -0,0 +1,39 @@
+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-section-break',
+  templateUrl: './cedar-static-section-break.component.html',
+  styleUrls: ['./cedar-static-section-break.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class CedarStaticSectionBreakComponent 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-youtube/cedar-static-youtube.component.html

@@ -0,0 +1,6 @@
+<mat-card class="child-component-card youtube-component">
+  <youtube-player [videoId]="component.contentInfo.content" [height]="videoHeight" [width]="videoWidth" aria-label="component.contentInfo.content"></youtube-player>
+  <mat-card-content>
+    {{component.labelInfo.description}}
+  </mat-card-content>
+</mat-card>

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

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