@colijnit/corecomponents_v12 12.2.23 → 12.2.25

package/src/app/app.module.ts

@@ -0,0 +1,145 @@
+import {NgModule, NO_ERRORS_SCHEMA} from '@angular/core';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {FilterItemModule} from '../../projects/corecomponents/src/lib/components/filter-item/filter-item.module';
+import {IconCollapseHandleModule} from '../../projects/corecomponents/src/lib/components/icon-collapse-handle/icon-collapse-handle.module';
+import {InputTextModule} from '../../projects/corecomponents/src/lib/components/input-text/input-text.module';
+import {ViewModeButtonsModule} from '../../projects/corecomponents/src/lib/components/view-mode-buttons/view-mode-buttons.module';
+import {PaginationModule} from '../../projects/corecomponents/src/lib/modules/pagination/pagination.module';
+import {IconModule} from '../../projects/corecomponents/src/lib/components/icon/icon.module';
+import {ButtonModule} from '../../projects/corecomponents/src/lib/components/button/button.module';
+import {InputCheckboxModule} from '../../projects/corecomponents/src/lib/components/input-checkbox/input-checkbox.module';
+import {FormModule} from '../../projects/corecomponents/src/lib/components/form/form.module';
+import {InputDatePickerModule} from '../../projects/corecomponents/src/lib/components/input-date-picker/input-date-picker.module';
+import {InputTimeModule} from '../../projects/corecomponents/src/lib/components/input-time/input-time.module';
+import {InputNumberPickerModule} from '../../projects/corecomponents/src/lib/components/input-number-picker/input-number-picker.module';
+import {InputRadioButtonModule} from '../../projects/corecomponents/src/lib/components/input-radio-button/input-radio-button.module';
+import {FormsModule} from '@angular/forms';
+import {CoDialogModule} from '../../projects/corecomponents/src/lib/components/co-dialog/co-dialog.module';
+import {PopupModule} from '../../projects/corecomponents/src/lib/components/popup/popup.module';
+import {FilterItemShowcaseComponent} from './components/filter-item-showcase.component';
+import {ShowcaseDataService} from './service/showcase-data.service';
+import {PromptService} from '../../projects/corecomponents/src/lib/components/popup/service/prompt.service';
+import {AppComponent} from './app.component';
+import {ButtonShowcaseComponent} from './components/button-showcase.component';
+import {IconShowcaseComponent} from './components/icon-showcase.component';
+import {InputTextShowcaseComponent} from './components/input-text-showcase.component';
+import {InputCheckboxShowcaseComponent} from './components/input-checkbox-showcase.component';
+import {InputDatePickerShowcaseComponent} from './components/input-date-picker-showcase.component';
+import {InputRadioButtonShowcaseComponent} from './components/input-radio-button-showcase.component';
+import {CoDialogShowcaseComponent} from './components/co-dialog-showcase.component';
+import {InputNumberPickerShowcaseComponent} from './components/input-number-picker-showcase.component';
+import {CollapsibleModule} from '../../projects/corecomponents/src/lib/components/collapsible/collapsible.module';
+import {InputSearchModule} from '../../projects/corecomponents/src/lib/components/input-search/input-search.module';
+import {SimpleGridShowcaseComponent} from './components/simple-grid-showcase.component';
+import {SimpleGridModule} from '../../projects/corecomponents/src/lib/components/simple-grid/simple-grid.module';
+import {FormsShowcaseComponent} from './components/forms-showcase.component';
+import {Carousel3dModule} from '../../projects/corecomponents/src/lib/components/carousel-3d/carousel-3d.module';
+import {Carousel3dShowcaseComponent} from './components/carousel-3d-showcase.component';
+import {ArticleTileModule} from '../../projects/corecomponents/src/lib/components/article-tile/article-tile.module';
+import {InputTextareaModule} from '../../projects/corecomponents/src/lib/components/input-textarea/input-textarea.module';
+import {CoDialogWizardModule} from '../../projects/corecomponents/src/lib/components/co-dialog-wizard/co-dialog-wizard.module';
+import {CoSimpleGridTestComponent} from './components/co-simple-grid-test.component';
+import {
+    InputDateRangePickerModule
+} from '../../projects/corecomponents/src/lib/components/input-date-range-picker/input-date-range-picker.module';
+import {CarouselModule} from '../../projects/corecomponents/src/lib/components/carousel/carousel.module';
+import {CheckmarkOverlayModule} from '../../projects/corecomponents/src/lib/components/checkmark-overlay/checkmark-overlay.module';
+import {PaginationBarModule} from '../../projects/corecomponents/src/lib/components/pagination-bar/pagination-bar.module';
+import {ScreenConfigurationModule} from '../../projects/corecomponents/src/lib/directives/screen-configuration/screen-configuration.module';
+import {ListOfValuesModule} from '../../projects/corecomponents/src/lib/components/list-of-values/list-of-values.module';
+import {TooltipDirectiveModule} from '../../projects/corecomponents/src/lib/directives/tooltip/tooltip-directive.module';
+import {ImageModule} from '../../projects/corecomponents/src/lib/components/image/image.module';
+import {IconCacheService} from '../../projects/corecomponents/src/lib/components/icon/icon-cache.service';
+import {CalendarModule} from '../../projects/corecomponents/src/lib/components/calendar/calendar.module';
+import {DoubleCalendarModule} from '../../projects/corecomponents/src/lib/components/double-calendar/double-calendar.module';
+import {CheckboxShowcaseComponent} from './components/checkbox-showcase.component';
+import {CoreComponentsTranslationModule} from '../../projects/corecomponents/src/lib/translation/core-components-translation.module';
+import {ColorPickerModule} from "../../projects/corecomponents/src/lib/components/color-picker/color-picker.module";
+import {DragDropModule} from '@angular/cdk/drag-drop';
+import {CoreDialogModule} from '../../projects/corecomponents/src/lib/components/core-dialog/core-dialog.module';
+import {InputScannerShowcaseComponent} from './components/input-scanner-showcase.component';
+import {InputScannerModule} from '../../projects/corecomponents/src/lib/components/input-scanner/input-scanner.module';
+import {LoaderModule} from '../../projects/corecomponents/src/lib/components/loader/loader.module';
+import {InputTimeShowcaseComponent} from "./components/input-time-showcase.component";
+
+@NgModule({
+  imports: [
+    BrowserAnimationsModule,
+    ButtonModule,
+    IconModule,
+    InputTextModule,
+    PaginationModule,
+    DragDropModule,
+    InputCheckboxModule,
+    FormModule,
+    InputDatePickerModule,
+    InputTimeModule,
+    InputNumberPickerModule,
+    InputRadioButtonModule,
+    FormsModule,
+    CoDialogModule,
+    PopupModule.forRoot(),
+    CollapsibleModule,
+    InputSearchModule,
+    SimpleGridModule,
+    Carousel3dModule,
+    ArticleTileModule,
+    InputTextareaModule,
+    CoDialogWizardModule,
+    InputDateRangePickerModule,
+    FilterItemModule,
+    InputTextModule,
+    IconCollapseHandleModule,
+    CarouselModule,
+    CheckmarkOverlayModule,
+    PaginationBarModule,
+    ViewModeButtonsModule,
+    ScreenConfigurationModule,
+    ListOfValuesModule,
+    TooltipDirectiveModule,
+    ImageModule,
+    CalendarModule,
+    DoubleCalendarModule,
+    ButtonModule,
+    CoreComponentsTranslationModule.forRoot(),
+    ColorPickerModule,
+    CoDialogModule,
+    DragDropModule,
+    CoreDialogModule.forRoot(),
+    InputScannerModule,
+    ListOfValuesModule,
+    LoaderModule
+  ],
+  schemas: [
+    NO_ERRORS_SCHEMA
+  ],
+  providers: [
+    ShowcaseDataService,
+      PromptService,
+      IconCacheService
+  ],
+  declarations: [
+    AppComponent,
+    ButtonShowcaseComponent,
+    IconShowcaseComponent,
+    InputTextShowcaseComponent,
+    InputCheckboxShowcaseComponent,
+    InputDatePickerShowcaseComponent,
+    InputTimeShowcaseComponent,
+    InputRadioButtonShowcaseComponent,
+    CoDialogShowcaseComponent,
+    InputNumberPickerShowcaseComponent,
+    SimpleGridShowcaseComponent,
+    CoSimpleGridTestComponent,
+    FormsShowcaseComponent,
+    Carousel3dShowcaseComponent,
+    FilterItemShowcaseComponent,
+    CheckboxShowcaseComponent,
+    InputScannerShowcaseComponent
+  ],
+  bootstrap: [
+    AppComponent
+  ]
+})
+export class AppModule {
+}

package/src/app/components/button-showcase.component.ts

@@ -0,0 +1,82 @@
+import {Component} from "@angular/core";
+import {CoreComponentsIcon} from "../../../projects/corecomponents/src/lib/core/enum/core-components-icon.enum";
+import {IconCacheService} from "../../../projects/corecomponents/src/lib/components/icon/icon-cache.service";
+
+@Component({
+  selector: "button-showcase",
+  template: `
+    <h1>co-image</h1>
+    <co-image [source]="'https://thumbs.dreamstime.com/z/het-gelukkige-gezicht-van-smiley-emoticon-27613930.jpg'"></co-image>
+    <h4>Source waar wachtwoord op zit</h4>
+    <co-image [source]="'https://cdn.colijn-it.nl/cdn/dev11g/up_dba/680368/tmb_11111111111.png'"></co-image>
+    <h4>Source waar wachtwoord op zit met custom placeholder</h4>
+    <co-image [source]="'https://cdn.colijn-it.nl/cdn/dev11g/up_dba/680368/tmb_11111111111.png'" [placeHolder]="customPlaceHolder"></co-image>
+    <h1>co-button</h1>
+    <co-button label="normal button"></co-button>
+    <div class="button-loader-wrapper" (click)="fakeLoading()">
+      <co-checkmark-overlay [successful]="commitSuccessful" [visible]="loading"></co-checkmark-overlay>
+      <co-button label="with loader" class="white"></co-button>
+    </div>
+    <co-button label="disabled button" [disabled]="true"></co-button>
+    <co-button label="button with img" [iconData]="icons.getIcon(Icon.SaveDisk)"></co-button>
+    <co-button label="hidden button" [hidden]="true"></co-button>
+    <co-button label="button with two icons" [iconData]="icons.getIcon(Icon.SaveDisk)" [iconDataRight]="icons.getIcon(Icon.SaveDisk)"></co-button>
+    <co-button label="button with right icon" [iconDataRight]="icons.getIcon(Icon.SaveDisk)"></co-button>
+    <co-button [iconData]="icons.getIcon(Icon.SaveDisk)" class="white"
+               label="class: white"></co-button>
+    <co-button [iconData]="icons.getIcon(Icon.SaveDisk)" class="white circle"
+               title="class: white circle"></co-button>
+    <co-button [iconData]="icons.getIcon(Icon.SaveDisk)" class="white circle smaller"
+               title="class: white circle smaller"></co-button>
+    <co-button [iconData]="icons.getIcon(Icon.SaveDisk)" class="white circle small"
+               title="class: white circle small"></co-button>
+    <co-button [iconData]="icons.getIcon(Icon.SaveDisk)" class="white circle mini"
+               title="class: white circle mini"></co-button>
+    <co-button [iconData]="icons.getIcon(Icon.SaveDisk)"></co-button>
+    <co-button [iconData]="icons.getIcon(Icon.SaveDisk)" label="isToggleButton = true" [isToggleButton]="true"
+               [(isToggled)]="isToggled"></co-button>
+    <co-button [iconData]="icons.getIcon(Icon.SaveDisk)" label="isToggleButton = true, class = white" [isToggleButton]="true"
+               class="white"></co-button>
+    <co-button [iconData]="icons.getIcon(Icon.SaveDisk)" title="isToggleButton = true, class = circle white" [isToggleButton]="true"
+               class="circle white"></co-button>
+    <co-button [iconData]="icons.getIcon(Icon.SaveDisk)" title="isToggleButton = true, class = small circle white" [isToggleButton]="true"
+               class="small circle white"></co-button>
+    <co-view-mode-buttons></co-view-mode-buttons>
+  `,
+  styles: [`
+    :host {
+      display: inline-block;
+    }
+
+    co-button {
+      margin-bottom: 10px;
+    }
+
+    .button-loader-wrapper {
+      position: relative;
+    }
+  `]
+})
+export class ButtonShowcaseComponent {
+  public readonly Icon: any = CoreComponentsIcon;
+
+  public isToggled: boolean = true;
+  public loading: boolean = false;
+  public commitSuccessful: boolean = false;
+  public customPlaceHolder: string = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M64 464H284.5c12 18.4 27.4 34.5 45.3 47.3c-3.2 .5-6.4 .7-9.7 .7H64c-35.3 0-64-28.7-64-64V64C0 28.7 28.7 0 64 0H229.5c17 0 33.3 6.7 45.3 18.7l90.5 90.5c12 12 18.7 28.3 18.7 45.3v44.1c-17.2 4.9-33.4 12.3-48 21.8V160H256c-17.7 0-32-14.3-32-32V48H64c-8.8 0-16 7.2-16 16V448c0 8.8 7.2 16 16 16zM432 224a144 144 0 1 1 0 288 144 144 0 1 1 0-288zm0 96a24 24 0 1 0 0-48 24 24 0 1 0 0 48zm-32 48c0 8.8 7.2 16 16 16h0v48h0c-8.8 0-16 7.2-16 16s7.2 16 16 16h16 16c8.8 0 16-7.2 16-16s-7.2-16-16-16V368c0-8.8-7.2-16-16-16H416c-8.8 0-16 7.2-16 16z"/></svg>'
+
+  constructor(public icons: IconCacheService) {
+  }
+
+  public fakeLoading(): void {
+    this.loading = true;
+    setTimeout(() => {
+      this.commitSuccessful = true;
+      this.loading = false;
+    }, 240000)
+  }
+
+  public handleDateSelected(date: Date): void {
+    // console.log(date);
+  }
+}

package/src/app/components/carousel-3d-showcase.component.ts

@@ -0,0 +1,70 @@
+import {Component} from "@angular/core";
+
+@Component({
+  selector: "carousel-3d-showcase",
+  template: `
+    <co-button [label]="'item toevoegen'" (click)="addItem()"></co-button>
+    <co-carousel>
+      <div #carouselItem class="tile" *ngFor="let tile of tiles">
+        <div class="title" [textContent]="tile.title"></div>
+        <div class="description" [textContent]="tile.description"></div>
+      </div>
+    </co-carousel>
+    <co-carousel-3d [tileWidth]="200" [tileHeight]="100" [shadow]="true" [selectedIndex]="1" (indexSelected)="handleIndexSelected($event)">
+<!--
+      <co-article-tile #carouselItem class="tile" [description]="'test1'" [price]="100"></co-article-tile>
+      <co-article-tile #carouselItem class="tile" [description]="'test2'" [price]="100"></co-article-tile>
+      <co-article-tile #carouselItem class="tile" [description]="'test3'" [price]="100"></co-article-tile>
+      <co-article-tile #carouselItem class="tile" [description]="'test4'" [price]="100"></co-article-tile>
+      <co-article-tile #carouselItem class="tile" [description]="'test5'" [price]="100"></co-article-tile>
+      <co-article-tile #carouselItem class="tile" [description]="'test6'" [price]="100"></co-article-tile>
+      <co-article-tile #carouselItem class="tile" [description]="'test7'" [price]="100"></co-article-tile>
+      <co-article-tile #carouselItem class="tile" [description]="'test8'" [price]="100"></co-article-tile>
+-->
+      <div #carouselItem class="tile" *ngFor="let tile of tiles">
+        <div class="title" [textContent]="tile.title"></div>
+        <div class="description" [textContent]="tile.description"></div>
+      </div>
+    </co-carousel-3d>
+  `,
+  styles: [`
+    :host {
+      display: block;
+      //width: 500px;
+      height: 175px;
+    }
+    .tile {
+      width: 200px;
+      height: 100px;
+      background-color: #00b0ff;
+      box-shadow: 0px 0px 12px rgba(255, 0, 0, 0.5);
+      border: 1px solid rgba(255, 0, 0, 0.25);
+    }
+  `]
+})
+export class Carousel3dShowcaseComponent {
+
+  private _numTiles: number = 2;
+  private _currentItem: number;
+
+  public tiles: {title: string, description: string}[] = [];
+
+  constructor() {
+    for (let i = 0; i < this._numTiles; i++) {
+      this._currentItem = i + 1;
+      this.addItem(this._currentItem);
+    }
+  }
+
+  public handleIndexSelected(idx: number): void {
+    console.log(idx);
+  }
+
+  public addItem(index?: number): void {
+    if (index === undefined) {
+      this._currentItem++;
+      index = this._currentItem;
+    }
+    this.tiles.push({title: `tegel ${index}`, description: `Dit is tegel ${index}`});
+  }
+}

package/src/app/components/checkbox-showcase.component.ts

@@ -0,0 +1,56 @@
+import {Component, OnDestroy, ViewChild} from '@angular/core';
+import {CoreComponentsIcon} from "../../../projects/corecomponents/src/lib/core/enum/core-components-icon.enum";
+import {IconCacheService} from "../../../projects/corecomponents/src/lib/components/icon/icon-cache.service";
+import {FormComponent} from "../../../projects/corecomponents/src/lib/components/form/form.component";
+import {FormControl} from '@angular/forms';
+import {Subscription} from 'rxjs';
+
+@Component({
+    selector: "checkbox-showcase",
+    template: `
+        <co-form #form>
+            <co-input-checkbox [(model)]="model" [label]="'Test checkbox'"></co-input-checkbox>
+        </co-form>
+  `,
+    styles: [`
+    :host {
+      display: inline-block;
+    }
+
+    co-button {
+      margin-bottom: 10px;
+    }
+
+    .button-loader-wrapper {
+      position: relative;
+    }
+  `]
+})
+export class CheckboxShowcaseComponent implements OnDestroy {
+    @ViewChild("form") set content(form: FormComponent) {
+        this.form = form;
+        if (this.form) {
+            this._subs.push(
+                this.form.onChange.subscribe((value: FormControl) => {
+                    if (this.form.formGroup.dirty) {
+                        console.log('form is dirty');
+                    }
+                })
+            )
+        }
+    }
+
+    public readonly Icon: any = CoreComponentsIcon;
+    public form: FormComponent;
+
+    public model: boolean = false;
+
+    private _subs: Subscription[] = [];
+
+    constructor(public icons: IconCacheService) {
+    }
+
+    ngOnDestroy() {
+        this._subs.forEach(s => s.unsubscribe());
+    }
+}

package/src/app/components/co-dialog-showcase.component.ts

@@ -0,0 +1,189 @@
+import {Component, ViewChild} from '@angular/core';
+import {CoDialogComponent} from '../../../projects/corecomponents/src/lib/components/co-dialog/co-dialog.component';
+import {PromptService} from '../../../projects/corecomponents/src/lib/components/popup/service/prompt.service';
+import {CoreDialogService} from '../../../projects/corecomponents/src/lib/components/core-dialog/core-dialog.service';
+import {IconCacheService} from "../../../projects/corecomponents/src/lib/components/icon/icon-cache.service";
+import {CoreComponentsIcon} from "../../../projects/corecomponents/src/lib/core/enum/core-components-icon.enum";
+
+@Component({
+  selector: "co-dialog-showcase",
+  template: `
+      <h1>co-dialog</h1>
+      <co-button [label]="'Show borderless dialog'" (click)="openBorderlessDialog()"></co-button>
+      <co-button [label]="'Open dialog'" (click)="openDialogClick()"></co-button>
+      <co-button [label]="'Close dialog'" (click)="closeDialogClick()"></co-button>
+      <co-button [label]="'Open yes no prompt'" (click)="openYesNoPrompt()"></co-button>
+      <co-button [label]="'Open dialog wizard'" (click)="openDialogWizardClick()"></co-button>
+      <co-button [label]="'Show information dialog'" (click)="showInformationDialogClick()"></co-button>
+      <co-button [label]="'Show error dialog'" (click)="showErrorDialogClick()"></co-button>
+      <co-button [label]="'Show warning dialog'" (click)="showWarningDialogClick()"></co-button>
+
+      <div #dropList cdkDropList cdkDropListOrientation="vertical"
+           [cdkDropListData]="lines"
+      >
+          <div class="draggable-line" *ngFor="let line of lines" cdkDrag>
+              <co-icon cdkDragHandle [iconData]="iconCacheService.getIcon(icons.Icon3d)"></co-icon>
+              <div [textContent]="line.aantal"></div>
+              <div [textContent]="line.omschrijving"></div>
+          </div>
+      </div>
+
+
+      <co-dialog *ngIf="showDialog"
+                 [headerTemplate]="coDialogHeader"
+                 [footerTemplate]="coDialogFooter"
+                 (closeClick)="closeDialogClick()">
+          <div class="section">
+              What is Lorem Ipsum?
+              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
+              text
+              ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
+              survived
+              not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in
+              the
+              1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
+              like
+              Aldus PageMaker including versions of Lorem Ipsum.
+          </div>
+          <div class="section">
+              Why do we use it?
+              It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
+              The
+              point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here,
+              content
+              here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
+              their
+              default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have
+              evolved
+              over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
+          </div>
+          <div class="section">
+              Where does it come from?
+              Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from
+              45 BC,
+              making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of
+              the
+              more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical
+              literature,
+              discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The
+              Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during
+              the
+              Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
+          </div>
+          <div class="section">
+              The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33
+              from
+              "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions
+              from the
+              1914 translation by H. Rackham.
+
+              Where can I get some?
+              There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by
+              injected
+              humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you
+              need to
+              be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to
+              repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200
+              Latin
+              words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated
+              Lorem
+              Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
+              <ng-container footer>Footer here.</ng-container>
+          </div>
+      </co-dialog>
+      <ng-template #coDialogHeader>
+          <div class="header" [textContent]="'Dit is de header van de dialog'"></div>
+      </ng-template>
+      <ng-template #coDialogFooter>
+          <div class="footer" [textContent]="'Dit is de footer van de dialog'"></div>
+      </ng-template>
+
+      <co-dialog *ngIf="showBorderlessDialog" [borderless]="true">
+          <co-button [label]="'Hier kan je op klikken'" (click)="closeDialogClick()"></co-button>
+      </co-dialog>
+
+      <co-dialog-wizard *ngIf="showDialogWizard" (closeClick)="closeDialogWizardClick()">
+          <ng-container header>Header here.</ng-container>
+          Content here
+      </co-dialog-wizard>
+  `,
+  styles: [`
+    :host {
+      display: flex;
+      flex-direction: column;
+      width: 320px;
+      .draggable-line {
+        display: flex;
+      }
+    }
+  `],
+  providers: [
+    IconCacheService
+  ]
+})
+export class CoDialogShowcaseComponent {
+  public readonly icons: typeof CoreComponentsIcon = CoreComponentsIcon;
+  @ViewChild("coDlg")
+  public coDlg: CoDialogComponent;
+
+  public showDialog: boolean = false;
+  public showBorderlessDialog: boolean = false;
+  public showDialogWizard: boolean = false;
+  public documentBody: HTMLElement = document.body;
+
+  public lines: any[] = [
+    {aantal: 1, omschrijving: 'dit is test'},
+    {aantal: 2, omschrijving: 'dit is test'},
+    {aantal: 3, omschrijving: 'dit is test'},
+    {aantal: 4, omschrijving: 'dit is test'},
+    {aantal: 5, omschrijving: 'dit is test'},
+    {aantal: 6, omschrijving: 'dit is test'}
+  ]
+
+  constructor(
+    private _promptService: PromptService,
+    public iconCacheService: IconCacheService,
+    public coreDialogService: CoreDialogService
+  ) {
+  }
+
+  public openDialogClick(): void {
+    this.showDialog = true;
+  }
+
+  public openBorderlessDialog(): void {
+    this.showBorderlessDialog = true;
+  }
+
+  public openDialogWizardClick(): void {
+    this.showDialogWizard = true;
+  }
+
+  public closeDialogClick(): void {
+    this.showDialog = false;
+  }
+
+  public closeDialogWizardClick(): void {
+    this.showDialogWizard = false;
+  }
+
+  public async openYesNoPrompt(): Promise<void> {
+    const response = await this.coreDialogService.showYesNo("Hallo", "Informatie");
+    console.log(response);
+  }
+
+  public async showInformationDialogClick(): Promise<void> {
+    const response = await this.coreDialogService.showInformation("Dit is een informatie popup");
+    console.log(response);
+  }
+
+  public async showErrorDialogClick(): Promise<void> {
+    const response = await this.coreDialogService.showError("Dit is een error popup", "Details van de error");
+    console.log(response);
+  }
+
+  public async showWarningDialogClick(): Promise<void> {
+    const response = await this.coreDialogService.showWarning("Dit is een warning popup");
+    console.log(response);
+  }
+}