cedar-embeddable-editor 0.9.0

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

@@ -0,0 +1,42 @@
+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-youtube',
+  templateUrl: './cedar-static-youtube.component.html',
+  styleUrls: ['./cedar-static-youtube.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class CedarStaticYoutubeComponent extends CedarUIComponent implements OnInit {
+
+  component: StaticFieldComponent;
+  @Input() handlerContext: HandlerContext;
+  videoHeight: number = null;
+  videoWidth: number = null;
+
+  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/input-types.module.ts

@@ -0,0 +1,139 @@
+import {NgModule} from '@angular/core';
+import {MAT_FORM_FIELD_DEFAULT_OPTIONS, MatFormFieldModule} from '@angular/material/form-field';
+import {BrowserModule} from '@angular/platform-browser';
+import {HttpClientModule} from '@angular/common/http';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {MatCardModule} from '@angular/material/card';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {MatInputModule} from '@angular/material/input';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatRadioModule} from '@angular/material/radio';
+import {MatIconModule} from '@angular/material/icon';
+import {MatExpansionModule} from '@angular/material/expansion';
+import {MatButtonModule} from '@angular/material/button';
+import {MatTooltipModule} from '@angular/material/tooltip';
+import {ClipboardModule} from '@angular/cdk/clipboard';
+import {MatToolbarModule} from '@angular/material/toolbar';
+import {MatRippleModule} from '@angular/material/core';
+import {MatPaginatorModule} from '@angular/material/paginator';
+import {MatChipsModule} from '@angular/material/chips';
+import {MatGridListModule} from '@angular/material/grid-list';
+import {MatDatepickerModule} from '@angular/material/datepicker';
+import {MatNativeDateModule} from '@angular/material/core';
+import {MatSelectModule} from '@angular/material/select';
+import {NgxMatDatetimePickerModule, NgxMatNativeDateModule, NgxMatTimepickerModule} from '@angular-material-components/datetime-picker';
+import {NgSelectModule} from '@ng-select/ng-select';
+import {CedarInputEmailComponent} from './components/cedar-input-email/cedar-input-email.component';
+import {CedarInputCheckboxComponent} from './components/cedar-input-checkbox/cedar-input-checkbox.component';
+import {CedarInputSelectComponent} from './components/cedar-input-select/cedar-input-select.component';
+import {CedarInputAttributeValueComponent} from './components/cedar-input-attribute-value/cedar-input-attribute-value.component';
+import {CedarInputMultipleChoiceComponent} from './components/cedar-input-multiple-choice/cedar-input-multiple-choice.component';
+import {CedarInputDatetimeComponent} from './components/cedar-input-datetime/cedar-input-datetime.component';
+import {CedarInputLinkComponent} from './components/cedar-input-link/cedar-input-link.component';
+import {CedarInputNumericComponent} from './components/cedar-input-numeric/cedar-input-numeric.component';
+import {CedarInputTextComponent} from './components/cedar-input-text/cedar-input-text.component';
+import {CedarInputPhoneComponent} from './components/cedar-input-phone/cedar-input-phone.component';
+import {CedarStaticRichTextComponent} from './components/cedar-static-rich-text/cedar-static-rich-text.component';
+import {CedarStaticSectionBreakComponent} from './components/cedar-static-section-break/cedar-static-section-break.component';
+import {CedarStaticPageBreakComponent} from './components/cedar-static-page-break/cedar-static-page-break.component';
+import {CedarStaticImageComponent} from './components/cedar-static-image/cedar-static-image.component';
+import {CedarStaticYoutubeComponent} from './components/cedar-static-youtube/cedar-static-youtube.component';
+import {YouTubePlayerModule} from '@angular/youtube-player';
+import {CedarFooBarComponent} from './components/cedar-foo-bar/cedar-foo-bar.component';
+import {CedarInputControlledComponent} from './components/cedar-input-controlled/cedar-input-controlled.component';
+import {MatAutocompleteModule} from '@angular/material/autocomplete';
+import {EscapeHtmlPipe} from '../shared/pipe/keep-html.pipe';
+import {DatePickerComponent} from '../shared/components/date-picker/date-picker.component';
+import {TimezonePickerComponent} from '../shared/components/timezone-picker/timezone-picker.component';
+import {MatFileUploadModule} from '../shared/components/file-uploader/mat-file-upload.module';
+import {FileUploaderComponent} from '../shared/components/file-uploader/file-uploader.component';
+import {TranslateModule} from '@ngx-translate/core';
+
+@NgModule({
+    imports: [
+        BrowserModule,
+        HttpClientModule,
+        BrowserAnimationsModule,
+        MatAutocompleteModule,
+        MatCardModule,
+        MatFormFieldModule,
+        ReactiveFormsModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatCheckboxModule,
+        MatRadioModule,
+        MatIconModule,
+        MatExpansionModule,
+        MatButtonModule,
+        MatTooltipModule,
+        ClipboardModule,
+        MatToolbarModule,
+        MatRippleModule,
+        MatPaginatorModule,
+        MatChipsModule,
+        MatGridListModule,
+        MatDatepickerModule,
+        MatNativeDateModule,
+        NgxMatDatetimePickerModule,
+        NgxMatTimepickerModule,
+        NgxMatNativeDateModule,
+        NgSelectModule,
+        MatFileUploadModule,
+        YouTubePlayerModule,
+        FormsModule,
+        MatSelectModule,
+        TranslateModule
+    ],
+  declarations: [
+    CedarFooBarComponent,
+    CedarInputTextComponent,
+    CedarInputPhoneComponent,
+    CedarInputControlledComponent,
+    CedarInputNumericComponent,
+    CedarInputEmailComponent,
+    CedarInputCheckboxComponent,
+    CedarInputSelectComponent,
+    CedarInputAttributeValueComponent,
+    CedarInputMultipleChoiceComponent,
+    CedarInputDatetimeComponent,
+    CedarInputLinkComponent,
+    CedarStaticRichTextComponent,
+    CedarStaticSectionBreakComponent,
+    CedarStaticPageBreakComponent,
+    CedarStaticImageComponent,
+    CedarStaticYoutubeComponent,
+    DatePickerComponent,
+    TimezonePickerComponent,
+    FileUploaderComponent,
+    EscapeHtmlPipe
+  ],
+  providers: [
+    MatDatepickerModule,
+    MatNativeDateModule,
+    {provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {appearance: 'outline'}}
+  ],
+  exports: [
+    // FooBar is needed because the first component gets exported without style otherwise
+    CedarFooBarComponent,
+    CedarInputTextComponent,
+    CedarInputPhoneComponent,
+    CedarInputControlledComponent,
+    CedarInputNumericComponent,
+    CedarInputEmailComponent,
+    CedarInputCheckboxComponent,
+    CedarInputSelectComponent,
+    CedarInputAttributeValueComponent,
+    CedarInputMultipleChoiceComponent,
+    CedarInputDatetimeComponent,
+    CedarInputLinkComponent,
+    CedarStaticRichTextComponent,
+    CedarStaticSectionBreakComponent,
+    CedarStaticPageBreakComponent,
+    CedarStaticImageComponent,
+    CedarStaticYoutubeComponent,
+    EscapeHtmlPipe,
+    FileUploaderComponent
+  ]
+})
+export class InputTypesModule {
+}

package/src/app/modules/shared/components/cedar-component-header/cedar-component-header.component.html

@@ -0,0 +1,13 @@
+<div class="flex-container">
+  <div *ngIf="shouldRenderRequiredMark">
+    {{cds.getRenderingLabelForComponent(component)}}
+    <sup style="font-size: medium; color: red" aria-label="required"><b>*</b></sup>
+  </div>
+  <div *ngIf="!shouldRenderRequiredMark">{{cds.getRenderingLabelForComponent(component)}}</div>
+  <div class="flex-child" *ngIf="component.isMultiPage()">
+    &nbsp;({{multiComponent.multiInfo.getSafeMinItems()}} .. <span *ngIf="multiComponent.multiInfo.maxItems">{{multiComponent.multiInfo.maxItems}}</span><span *ngIf="!multiComponent.multiInfo.maxItems" matTooltip="{{'Generic.Infinite' | translate}}">∞</span>)
+  </div>
+
+  <mat-icon *ngIf="component.labelInfo.description" matTooltip="{{component.labelInfo.description}}" matTooltipClass="tooltip" matTooltipPosition="right" aria-hidden="false" aria-labelledby="description" class="icon-help" role="tooltip" inline="false">help</mat-icon>
+  <span id="Description of {{cds.getRenderingLabelForComponent(component)}}" class="cdk-visually-hidden">{{component.labelInfo.description}}</span>
+</div>

package/src/app/modules/shared/components/cedar-component-header/cedar-component-header.component.scss

@@ -0,0 +1,12 @@
+
+.flex-container {
+  display: flex;
+}
+
+.flex-child {
+  flex: 1;
+}
+
+.flex-child:first-child {
+  margin-right: 10px;
+}

package/src/app/modules/shared/components/cedar-component-header/cedar-component-header.component.spec.ts

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

package/src/app/modules/shared/components/cedar-component-header/cedar-component-header.component.ts

@@ -0,0 +1,42 @@
+import {Component, Input, OnInit, ViewEncapsulation} from '@angular/core';
+import {CedarComponent} from '../../models/component/cedar-component.model';
+import {ComponentDataService} from '../../service/component-data.service';
+import {MultiComponent} from '../../models/component/multi-component.model';
+import {ComponentTypeHandler} from '../../handler/component-type.handler';
+import {SingleFieldComponent} from '../../models/field/single-field-component.model';
+import {FieldComponent} from '../../models/component/field-component.model';
+
+@Component({
+  selector: 'app-cedar-component-header',
+  templateUrl: './cedar-component-header.component.html',
+  styleUrls: ['./cedar-component-header.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class CedarComponentHeaderComponent implements OnInit {
+
+  component: CedarComponent;
+  multiComponent: MultiComponent;
+  shouldRenderRequiredMark = false;
+
+  constructor(public cds: ComponentDataService) {
+  }
+
+  ngOnInit(): void {
+  }
+
+  @Input() set componentToRender(componentToRender: CedarComponent) {
+    this.component = componentToRender;
+    if (ComponentTypeHandler.isMulti(componentToRender)) {
+      this.multiComponent = componentToRender as MultiComponent;
+    } else {
+      this.multiComponent = null;
+    }
+    if (this.component instanceof SingleFieldComponent){
+      const fieldComp = this.component as unknown as FieldComponent;
+      if (fieldComp.valueInfo.requiredValue){
+        this.shouldRenderRequiredMark = true;
+      }
+    }
+  }
+
+}

package/src/app/modules/shared/components/cedar-component-renderer/cedar-component-renderer.component.html

@@ -0,0 +1,117 @@
+<ng-container *ngIf="iterableComponent">
+  <mat-accordion multi>
+    <mat-expansion-panel (opened)="panelOpenState = true"
+                         (closed)="panelOpenState = false; allExpanded = false" [expanded]="panelOpenState">
+      <mat-expansion-panel-header>
+        <mat-panel-title>
+          <app-cedar-component-header *ngIf="!iterableComponent.linkedStaticFieldComponent"
+                                      [componentToRender]="iterableComponent"
+          ></app-cedar-component-header>
+        </mat-panel-title>
+      </mat-expansion-panel-header>
+      <app-cedar-multi-pager *ngIf="iterableComponent.isMulti()"
+                             [componentToRender]="iterableAsMultiComponent"
+                             [handlerContext]="handlerContext"
+                             [isAlignedUp]=true>
+      </app-cedar-multi-pager>
+      <mat-card-content *ngIf="shouldRenderContentOfIterable(iterableComponent)">
+        <ng-container *ngIf="iterableComponent.linkedStaticFieldComponent">
+          <!-- These are the collapsed static components before elements -->
+          <app-cedar-static-image *ngIf="iterableComponent.linkedStaticFieldComponent.basicInfo.inputType==InputType.image"
+                                  [componentToRender]="iterableComponent.linkedStaticFieldComponent"
+                                  [handlerContext]="handlerContext"></app-cedar-static-image>
+          <app-cedar-static-youtube *ngIf="iterableComponent.linkedStaticFieldComponent.basicInfo.inputType==InputType.youtube"
+                                    [componentToRender]="iterableComponent.linkedStaticFieldComponent"
+                                    [handlerContext]="handlerContext"></app-cedar-static-youtube>
+          <app-cedar-static-rich-text *ngIf="iterableComponent.linkedStaticFieldComponent.basicInfo.inputType==InputType.richText"
+                                      [componentToRender]="iterableComponent.linkedStaticFieldComponent"
+                                      [handlerContext]="handlerContext"></app-cedar-static-rich-text>
+        </ng-container>
+        <ng-container *ngFor="let childComponent of iterableComponent.children">
+          <app-cedar-component-renderer
+            [componentToRender]="childComponent"
+            [handlerContext]="handlerContext"
+            [allExpanded]="allExpanded"
+          ></app-cedar-component-renderer>
+        </ng-container>
+      </mat-card-content>
+    </mat-expansion-panel>
+  </mat-accordion>
+</ng-container>
+<ng-container *ngIf="nonIterableComponent">
+  <mat-card class="child-component-card non-iterable-component">
+    <mat-card-content *ngIf="shouldRenderContentOfNonIterable(nonIterableComponent)">
+      <app-cedar-component-header *ngIf="!nonIterableComponent.linkedStaticFieldComponent"
+                                  [componentToRender]="nonIterableComponent"
+      ></app-cedar-component-header>
+      <app-cedar-multi-pager *ngIf="nonIterableComponent.isMultiPage()"
+                             [componentToRender]="nonIterableComponent"
+                             [handlerContext]="handlerContext"
+                             [isAlignedUp]=false>
+        ></app-cedar-multi-pager>
+      <ng-container tabIndex="0" *ngIf="nonIterableComponent.linkedStaticFieldComponent && showStaticText">
+        <!-- These are the collapsed static components before fields-->
+        <app-cedar-static-image *ngIf="nonIterableComponent.linkedStaticFieldComponent.basicInfo.inputType==InputType.image"
+                                [componentToRender]="nonIterableComponent.linkedStaticFieldComponent"
+                                [handlerContext]="handlerContext"></app-cedar-static-image>
+        <app-cedar-static-youtube *ngIf="nonIterableComponent.linkedStaticFieldComponent.basicInfo.inputType==InputType.youtube"
+                                  [componentToRender]="nonIterableComponent.linkedStaticFieldComponent"
+                                  [handlerContext]="handlerContext"></app-cedar-static-youtube>
+        <app-cedar-static-rich-text *ngIf="nonIterableComponent.linkedStaticFieldComponent.basicInfo.inputType==InputType.richText"
+                                    [componentToRender]="nonIterableComponent.linkedStaticFieldComponent"
+                                    [handlerContext]="handlerContext"></app-cedar-static-rich-text>
+      </ng-container>
+      <!-- These are the regular components -->
+      <app-cedar-input-numeric *ngIf="nonIterableComponent.basicInfo.inputType==InputType.numeric"
+                               [componentToRender]="nonIterableComponent"
+                               [handlerContext]="handlerContext"></app-cedar-input-numeric>
+      <app-cedar-input-text *ngIf="nonIterableComponent.basicInfo.inputType==InputType.text ||
+                                    nonIterableComponent.basicInfo.inputType==InputType.textarea"
+                            [componentToRender]="nonIterableComponent"
+                            [handlerContext]="handlerContext"></app-cedar-input-text>
+      <app-cedar-input-controlled *ngIf="nonIterableComponent.basicInfo.inputType==InputType.controlled"
+                                  [componentToRender]="nonIterableComponent"
+                                  [handlerContext]="handlerContext"></app-cedar-input-controlled>
+      <app-cedar-input-email *ngIf="nonIterableComponent.basicInfo.inputType==InputType.email"
+                             [componentToRender]="nonIterableComponent"
+                             [handlerContext]="handlerContext"></app-cedar-input-email>
+      <app-cedar-input-checkbox *ngIf="nonIterableComponent.basicInfo.inputType==InputType.checkbox"
+                             [componentToRender]="nonIterableComponent"
+                             [handlerContext]="handlerContext"></app-cedar-input-checkbox>
+      <app-cedar-input-select *ngIf="nonIterableComponent.basicInfo.inputType==InputType.list"
+                                [componentToRender]="nonIterableComponent"
+                                [handlerContext]="handlerContext"></app-cedar-input-select>
+      <app-cedar-input-attribute-value *ngIf="nonIterableComponent.basicInfo.inputType==InputType.attributeValue"
+                              [componentToRender]="nonIterableComponent"
+                              [handlerContext]="handlerContext"></app-cedar-input-attribute-value>
+      <app-cedar-input-multiple-choice *ngIf="nonIterableComponent.basicInfo.inputType==InputType.radio"
+                                [componentToRender]="nonIterableComponent"
+                                [handlerContext]="handlerContext"></app-cedar-input-multiple-choice>
+      <app-cedar-input-datetime *ngIf="nonIterableComponent.basicInfo.inputType==InputType.temporal"
+                                       [componentToRender]="nonIterableComponent"
+                                       [handlerContext]="handlerContext"></app-cedar-input-datetime>
+      <app-cedar-input-link *ngIf="nonIterableComponent.basicInfo.inputType==InputType.link"
+                             [componentToRender]="nonIterableComponent"
+                             [handlerContext]="handlerContext"></app-cedar-input-link>
+      <app-cedar-input-phone *ngIf="nonIterableComponent.basicInfo.inputType==InputType.phoneNumber"
+                            [componentToRender]="nonIterableComponent"
+                            [handlerContext]="handlerContext"></app-cedar-input-phone>
+    </mat-card-content>
+  </mat-card>
+</ng-container>
+<ng-container *ngIf="staticComponent">
+  <!-- This is the normal section break -->
+  <app-cedar-static-section-break *ngIf="staticComponent.basicInfo.inputType==InputType.sectionBreak"
+                                  [componentToRender]="staticComponent"
+                                  [handlerContext]="handlerContext"></app-cedar-static-section-break>
+  <!-- These are the non-collapsed static components -->
+  <app-cedar-static-image *ngIf="staticComponent.basicInfo.inputType==InputType.image"
+                          [componentToRender]="staticComponent"
+                          [handlerContext]="handlerContext"></app-cedar-static-image>
+  <app-cedar-static-youtube *ngIf="staticComponent.basicInfo.inputType==InputType.youtube"
+                            [componentToRender]="staticComponent"
+                            [handlerContext]="handlerContext"></app-cedar-static-youtube>
+  <app-cedar-static-rich-text *ngIf="staticComponent.basicInfo.inputType==InputType.richText"
+                              [componentToRender]="staticComponent"
+                              [handlerContext]="handlerContext"></app-cedar-static-rich-text>
+</ng-container>

package/src/app/modules/shared/components/cedar-component-renderer/cedar-component-renderer.component.scss

@@ -0,0 +1,5 @@
+.mat-card {
+  padding: 5px;
+  margin-top: 5px;
+  background-color: white;
+}

package/src/app/modules/shared/components/cedar-component-renderer/cedar-component-renderer.component.spec.ts

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

package/src/app/modules/shared/components/cedar-component-renderer/cedar-component-renderer.component.ts

@@ -0,0 +1,101 @@
+import {Component, Input, OnInit, ViewEncapsulation} from '@angular/core';
+import {CedarComponent} from '../../models/component/cedar-component.model';
+import {ElementComponent} from '../../models/component/element-component.model';
+import {SingleElementComponent} from '../../models/element/single-element-component.model';
+import {MultiElementComponent} from '../../models/element/multi-element-component.model';
+import {CedarTemplate} from '../../models/template/cedar-template.model';
+import {FieldComponent} from '../../models/component/field-component.model';
+import {MultiFieldComponent} from '../../models/field/multi-field-component.model';
+import {SingleFieldComponent} from '../../models/field/single-field-component.model';
+import {MultiInfo} from '../../models/info/multi-info.model';
+import {HandlerContext} from '../../util/handler-context';
+import {StaticFieldComponent} from '../../models/static/static-field-component.model';
+import {InputType} from '../../models/input-type.model';
+import {MultiComponent} from '../../models/component/multi-component.model';
+
+@Component({
+    selector: 'app-cedar-component-renderer',
+    templateUrl: './cedar-component-renderer.component.html',
+    styleUrls: ['./cedar-component-renderer.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class CedarComponentRendererComponent implements OnInit {
+
+    protected readonly InputType = InputType;
+
+    private component: CedarComponent;
+    iterableComponent: ElementComponent;
+    nonIterableComponent: FieldComponent;
+    iterableAsMultiComponent: MultiComponent;
+    staticComponent: StaticFieldComponent;
+    multiInfo: MultiInfo;
+    panelOpenState: boolean;
+    @Input() handlerContext: HandlerContext;
+    @Input() showStaticText: boolean;
+    // tslint:disable-next-line:variable-name
+    private _allExpanded = false;
+    @Input()
+    get allExpanded(): boolean {
+        return this._allExpanded;
+    }
+
+    set allExpanded(allExpanded: boolean) {
+        this.panelOpenState = allExpanded;
+        this._allExpanded = allExpanded;
+    }
+
+    constructor() {
+    }
+
+    ngOnInit(): void {
+    }
+
+    @Input() set componentToRender(componentToRender: CedarComponent) {
+        this.component = componentToRender;
+        this.iterableComponent = null;
+        this.nonIterableComponent = null;
+        this.iterableAsMultiComponent = null;
+        if (componentToRender instanceof SingleElementComponent ||
+            componentToRender instanceof MultiElementComponent ||
+            componentToRender instanceof CedarTemplate) {
+            this.iterableComponent = componentToRender as ElementComponent;
+            if (componentToRender instanceof MultiElementComponent) {
+                this.multiInfo = (componentToRender as MultiElementComponent).multiInfo;
+            }
+        }
+        if (componentToRender instanceof SingleFieldComponent ||
+            componentToRender instanceof MultiFieldComponent) {
+            this.nonIterableComponent = componentToRender as FieldComponent;
+            if (componentToRender instanceof MultiFieldComponent) {
+                this.multiInfo = (componentToRender as MultiFieldComponent).multiInfo;
+            }
+        }
+        if (componentToRender instanceof StaticFieldComponent) {
+            this.staticComponent = componentToRender as StaticFieldComponent;
+        }
+        if (this.iterableComponent != null && this.iterableComponent.isMulti()) {
+            this.iterableAsMultiComponent = this.iterableComponent as unknown as MultiComponent;
+        }
+    }
+
+    shouldRenderContentOfIterable(iterableComponent: ElementComponent): boolean {
+        if (iterableComponent.isMulti()) {
+            const multiElement: MultiElementComponent = iterableComponent as MultiElementComponent;
+            if (!this.handlerContext.multiInstanceObjectService.hasMultiInstances(multiElement)) {
+                return false;
+            }
+        }
+        return true;
+    }
+
+    shouldRenderContentOfNonIterable(nonIterableComponent: FieldComponent): boolean {
+        if (nonIterableComponent.isMulti()) {
+            const multiField: MultiFieldComponent = nonIterableComponent as MultiFieldComponent;
+            if (!this.handlerContext.multiInstanceObjectService.hasMultiInstances(multiField)) {
+                return false;
+            }
+        }
+        return true;
+    }
+
+}

package/src/app/modules/shared/components/cedar-data-saver/cedar-data-saver.component.html

@@ -0,0 +1,22 @@
+<div class="flex-container-data-saver">
+  <div class="flex-child1" *ngIf="showProgress || showSuccess || showError">
+    <div *ngIf="showProgress" class="notify-progress"><mat-spinner [diameter]="16" class="notify-progress-icon"></mat-spinner>{{progressMessage}}</div>
+    <div *ngIf="showSuccess" class="notify-success">{{successMessage}}
+      <button type="button" class="close" (click)="clearSuccess()">
+        <span aria-hidden="true">&times;</span>
+      </button>
+    </div>
+    <div *ngIf="showError" class="notify-error">{{errorMessage}}
+      <button type="button" class="close" (click)="clearError()">
+        <span aria-hidden="true">&times;</span>
+      </button>
+    </div>
+  </div>
+  <div class="flex-child2">
+    <button mat-raised-button color="primary" class="metadata-save-button" (click)="saveTemplate($event)">{{'Generic.SAVE' | translate}}</button>
+  </div>
+</div>
+
+
+
+

package/src/app/modules/shared/components/cedar-data-saver/cedar-data-saver.component.scss

@@ -0,0 +1,23 @@
+.flex-container-data-saver {
+  display: flex;
+  align-items: center;
+  justify-content: right;
+  margin-bottom: 20px;
+
+  .flex-child1 {
+    flex: 1 100%;
+  }
+
+  .flex-child2 {
+    width: 170px;
+    text-align: right;
+    margin-right: 17px;
+  }
+}
+
+.metadata-save-button {
+  padding: 8px 50px !important;
+  font-size: 16px;
+  font-weight: 400;
+}
+

package/src/app/modules/shared/components/cedar-data-saver/cedar-data-saver.component.spec.ts

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