@colijnit/corecomponents_v12 12.2.25 → 12.2.26

package/src/app/app.module.ts

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

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

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

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

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