@colijnit/corecomponents_v12 12.2.17 → 12.2.19

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,188 @@
+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 {CoreComponentsIcon, IconCacheService} from 'corecomponents';
+import {CoreDialogService} from '../../../projects/corecomponents/src/lib/components/core-dialog/core-dialog.service';
+
+@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);
+  }
+}

package/src/app/components/co-simple-grid-test.component.ts

@@ -0,0 +1,146 @@
+import {Component, ContentChildren, Input, OnInit, QueryList} from '@angular/core';
+import {SimpleGridColumnDirective, ColumnAlign} from '../../../projects/corecomponents/src/lib/components/simple-grid/simple-grid-column.directive';
+import {ShowcaseDataService} from '../service/showcase-data.service';
+
+@Component({
+  selector: "co-simple-grid-test",
+  template: `
+    <co-button [label]="'Update data column cell'" (click)="updateDataCell()"></co-button>
+
+    <co-simple-grid [data]="data" [dragDropEnabled]="true" [inlineEdit]="inlineEditGrid" [autoAddRow]="autoAddRow" [showToolbar]="true" [resizable]="resizable"
+                    [showEdit]="false"
+                    [showAdd]="true" [showDelete]="true" [rightToolbar]="true"
+                    [extraColumns]="extraColumns"
+                    [rowsPerPage]="5000"
+                    [rowDisabledFn]="isRowDisabled"
+                    [canRowBeEdittedFn]="canRowBeEditted"
+                    [editOnCellClick]="false"
+                    (selectRow)="handleSelectRow($event)"
+                    (dblClickRow)="handleDblClickRow($event)"
+                    (saveRow)="handleSaveRow($event)"
+                    (rowVisible)="handleRowVisible($event)"
+                    (deleteRow)="handleRowDelete($event)"
+        >
+            <co-simple-grid-column [field]="'Text'" [singleColumn]="true"></co-simple-grid-column>
+            <co-simple-grid-column [field]="'Geslacht'" [textAlign]="align.Center">
+              <ng-template #headerTemplate>
+                <co-input-checkbox [(model)]="headerCheckbox"></co-input-checkbox>
+              </ng-template>
+            </co-simple-grid-column>
+            <co-simple-grid-column [headerText]="'Geslacht'" [field]="'Geslacht'" [collection]="gender" [codeField]="'code'" [displayField]="'description'" [order]="10">
+              <ng-template #editTemplate let-row="row">
+                <co-list-of-values [(model)]="row['Geslacht']" [collection]="gender" [fields]="genderFields"></co-list-of-values>
+              </ng-template>
+            </co-simple-grid-column>
+            <co-simple-grid-column [headerText]="'FTE'" [field]="'FTE'" [required]="false" [order]="20">
+              <ng-template #editTemplate let-row="row">
+                <co-input-number-picker [model]="2"></co-input-number-picker>
+              </ng-template>
+            </co-simple-grid-column>
+            <co-simple-grid-column [headerText]="'Naam'" [field]="'Naam'" [autoFit]="true" [resizable]="true" [order]="30">
+            </co-simple-grid-column>
+            <co-simple-grid-column [headerText]="'Straat'" [field]="'Straat'" [order]="40" [width]="300">
+              <ng-template #editTemplate let-row="row">
+                <co-input-textarea [(model)]="row['Straat']"></co-input-textarea>
+              </ng-template>
+            </co-simple-grid-column>
+            <co-simple-grid-column [headerText]="'Postcode & plaats'" [field]="'PostcodePlaats'" [order]="50"></co-simple-grid-column>
+            <co-simple-grid-column [headerText]="'Land'" [field]="'countryId'" [order]="60"></co-simple-grid-column>
+      <co-simple-grid-column [headerText]="'DESCRIPTION'" [width]="300" [order]="10">
+        <ng-template #template let-row = "row">
+          <co-input-checkbox>
+          </co-input-checkbox>
+        </ng-template>
+      </co-simple-grid-column>
+        </co-simple-grid>
+  `,
+  styles: [
+  ]
+})
+export class CoSimpleGridTestComponent implements OnInit {
+  public readonly align: typeof ColumnAlign = ColumnAlign;
+
+  @ContentChildren(SimpleGridColumnDirective) set content(columnComponents: QueryList<SimpleGridColumnDirective>) {
+    this.extraColumns = columnComponents.toArray();
+  }
+
+  public data: any[] = [];
+
+  public gender: any[] = [
+    {code: 1, description: 'M'},
+    {code: 2, description: 'V'},
+    {code: 3, description: 'Unknown'},
+  ]
+
+  public genderFields: Object = { text: 'description', value: 'code' };
+
+  @Input()
+  public inlineEditGrid: boolean = false;
+
+  @Input()
+  public resizable: boolean = false;
+
+  @Input()
+  public autoAddRow: boolean = false;
+
+  public extraColumns: SimpleGridColumnDirective[] = [];
+  public headerCheckbox: boolean;
+
+  constructor(
+    private _dataService: ShowcaseDataService
+  ) {
+  }
+
+  ngOnInit(): void {
+    this.data.length = 0;
+    for (let i = 0; i < 10; i++) {
+      this.data.push(this._dataService.gridData[i]);
+    }
+    // this.data = this._dataService.gridData;
+  }
+
+  public isRowDisabled(row: any): Promise<boolean> {
+    return new Promise((resolve: Function) => {
+      setTimeout(() => {
+        const result = row.PostcodePlaats !== '';
+        resolve(result);
+      })
+    })
+    // return row.Geslacht === 'M';
+  }
+
+  public canRowBeEditted(row: any): Promise<boolean> {
+    return new Promise((resolve: Function) => {
+      setTimeout(() => {
+        resolve(true);
+      })
+    })
+  }
+
+  public handleSelectRow(row: any): void {
+    console.log(row);
+  }
+
+  public handleDblClickRow(row: any): void {
+    console.log(row);
+  }
+
+  public handleSaveRow(row: any): void {
+    console.log(row);
+  }
+
+  public handleRowVisible(row: any): void {
+    console.log(row);
+  }
+
+  public async handleRowDelete(row: any): Promise<void> {
+    console.log(row);
+  }
+
+  public updateDataCell(): void {
+    const data = this.data.slice();
+    this.data = undefined;
+    this.data = data.slice();
+    this.data[2]['Naam'] = 'Naam updated';
+  }
+}