@colijnit/corecomponents_v12 254.1.9 → 255.1.1

package/src/app/components/input-text-showcase.component.ts

@@ -0,0 +1,217 @@
+import {Component, OnInit, ViewChild} from '@angular/core';
+import {FormComponent} from '../../../projects/corecomponents/src/lib/components/form/form.component';
+import {KeyboardCode} from '../../../projects/corecomponents/src/lib/core/enum/keyboard-code.enum';
+import {FormMasterService} from '../../../projects/corecomponents/src/lib/core/service/form-master.service';
+import {IconCacheService} from '../../../projects/corecomponents/src/lib/components/icon/icon-cache.service';
+import {SafeHtml} from '@angular/platform-browser';
+import {CoreComponentsIcon} from '../../../projects/corecomponents/src/lib/core/enum/core-components-icon.enum';
+import {InputTextComponent} from '../../../projects/corecomponents/src/lib/components/input-text/input-text.component';
+
+@Component({
+  selector: "input-text-showcase",
+  template: `
+    <h1>co-input-text</h1>
+    <co-form #f (validSubmit)="validSubmit(f)">
+      <div class="form-wrapper">
+        <div class="row">
+          <co-input-text [(model)]="model1"
+                         [placeholder]="'Input no style'"
+                         [type]="'number'"
+                         [hideArrowButtons]="true"
+                         [noStyle]="true"
+                         [showClearButton]="false"
+          ></co-input-text>
+          <co-input-text [(model)]="model1"
+                         [placeholder]="'Voorbeeld-1'"
+                         [required]="true"
+                         [maxLength]="10"
+                         [align]="'right'"
+                         [leftIconData]="iconService.getIcon(icon.Icon3d)"
+                         [showClearButton]="false"
+                         (focus)="handleFocus()"
+                         (blur)="handleBlur()"
+          ></co-input-text>
+          <co-input-text [placeholder]="'E-mailaddress'"
+                         [model]="'address@mail.com'"
+                         [type]="'email'"
+                         maxlength="20"
+                         [required]="true"
+          ></co-input-text>
+          <co-input-text #inputPassword [placeholder]="'Password'"
+                         [keyDownWhiteList]="keyDownWhitelist"
+                         [type]="'password'"
+                         [showClearButton]="true"
+                         [required]="true"
+                         [rightIconData]="iconService.getIcon(icon.Account)"
+                         (rightIconMouseDown)="handleShowPassword($event)"
+                         (rightIconMouseUp)="handleHidePassword($event)"
+          ></co-input-text>
+          <co-input-text [placeholder]="'Numbers only'"
+                         [type]="'number'"
+                         [hideArrowButtons]="false"
+                         [max]="numberModel"
+                         [(model)]="numberModel"
+          ></co-input-text>
+          <co-input-text [(model)]="model1"
+                         [placeholder]="'Mouse events'"
+                         [required]="true"
+                         [maxLength]="10"
+                         [leftIconData]="iconService.getIcon(icon.Icon3d)"
+                         [rightIconData]="iconService.getIcon(icon.Account)"
+                         (rightIconMouseDown)="handleRightIconMouseDown($event)"
+                         (rightIconMouseUp)="handleRightIconMouseUp($event)"
+          ></co-input-text>
+          <co-input-text
+                        [(model)]="model1"
+                        [placeholder]="'Select on focus'"
+                        [selectOnFocus]="true"
+          ></co-input-text>
+          <co-input-search [customCssClass]="'no-focus-line'"
+                           [placeholder]="'Waar ben je naar op zoek?'"
+                           [customHeight]="true"
+                           [(model)]="searchModel"
+                           (search)="handleSearchModelChange($event)"
+                           (modelChange)="handleSearchModelChange($event)"
+          ></co-input-search>
+          <co-input-search
+              [placeholder]="'Waar ben je naar op zoek?'"
+              [useRightIcon]="true"
+              [(model)]="searchModel"
+              (search)="handleSearchModelChange($event)"
+          ></co-input-search>
+        </div>
+        <div class="row">
+          <co-input-search
+              [placeholder]="'Waar ben je naar op zoek?'"
+              [useLeftIcon]="true"
+              [(model)]="searchModel"
+              (search)="handleSearchModelChange($event)"
+          ></co-input-search>
+          <co-input-search
+              [placeholder]="'Waar ben je naar op zoek?'"
+              [centerLabel]="true"
+              [(model)]="searchModel"
+              (search)="handleSearchModelChange($event)"
+          ></co-input-search>
+          <co-input-search
+              [useLeftIcon]="true"
+              [useRightIcon]="true"
+              [leftIconData]="customIconData"
+              [placeholder]="'Waar ben je naar op zoek?'"
+              [centerLabel]="false"
+              [(model)]="searchModel"
+              (search)="handleSearchModelChange($event)"
+              (leftIconClick)="handleLeftIconClick($event)"
+              (rightIconClick)="handleRightIconClick($event)"
+          ></co-input-search>
+
+          <co-input-scanner
+            [useLeftIcon]="true"
+            [useRightIcon]="true"
+            [leftIconData]="customIconData"
+            [placeholder]="'Waar ben je naar op zoek?'"
+            [centerLabel]="false"
+            [(model)]="searchModel"
+            (search)="handleSearchModelChange($event)"
+            (leftIconClick)="handleLeftIconClick($event)"
+            (rightIconClick)="handleRightIconClick($event)"
+          ></co-input-scanner>
+        </div>
+      </div>
+      <co-button [label]="'test input'" (click)="testModel()"></co-button>
+      <co-button [label]="'test form'" (click)="submitForm()"></co-button>
+    </co-form>
+  `,
+  providers: [
+    FormMasterService
+  ],
+  styles: [`
+    :host {
+      display: flex;
+      flex-direction: column;
+      width: 320px;
+    }`
+  ]
+})
+export class InputTextShowcaseComponent implements OnInit {
+  public readonly icon: typeof CoreComponentsIcon = CoreComponentsIcon;
+  @ViewChild('inputPassword', {static: false})
+  public inputPassword: InputTextComponent;
+
+  @ViewChild(FormComponent, {static: false})
+  public formComponent: FormComponent;
+  // tslint:disable-next-line:no-unused-expression
+  public model1: string = "abc";
+  public searchModel: string;
+  public numberModel: number = 1;
+  public customIconData: SafeHtml | undefined;
+
+  public readonly keyDownWhitelist: KeyboardCode[] = [
+    KeyboardCode.Five,
+    KeyboardCode.Backspace
+  ];
+
+  constructor(
+    private _formMaster: FormMasterService,
+    public iconService: IconCacheService
+  ) {
+  }
+
+  ngOnInit(): void {
+    this.customIconData = this.iconService.getIcon(this.icon.Cart);
+  }
+
+  public submitForm(): void {
+    this._formMaster.submitSlaves();
+  }
+
+  public validSubmit(f: FormComponent): void {
+    console.log(f);
+    console.log(this.model1);
+  }
+
+  public testModel(): void {
+    this.numberModel = 3;
+  }
+
+  public handleFocus(): void {
+    console.log('focus!');
+  }
+
+  public handleBlur(): void {
+    console.log('blur!');
+  }
+
+  public handleLeftIconClick(event: MouseEvent): void {
+    console.log('left icon clicked');
+  }
+
+  public handleRightIconClick(event: MouseEvent): void {
+    console.log('right icon clicked');
+  }
+
+  public handleRightIconMouseDown(event: MouseEvent): void {
+    console.log('right icon mouse down');
+  }
+
+  public handleRightIconMouseUp(event: MouseEvent): void {
+    console.log('right icon mouse up');
+  }
+
+  public handleSearchModelChange(text: string): void {
+    console.log(text, this.searchModel);
+  }
+
+  public handleShowPassword(event: MouseEvent): void {
+    if (this.inputPassword) {
+      this.inputPassword.type = undefined;
+    }
+  }
+
+  public handleHidePassword(event: MouseEvent): void {
+    if (this.inputPassword) {
+      this.inputPassword.type = 'password';
+    }
+  }
+
+}

package/src/app/components/input-time-showcase.component.ts

@@ -0,0 +1,104 @@
+import {Component, OnInit, ViewChild} from '@angular/core';
+import {FormComponent} from '../../../projects/corecomponents/src/lib/components/form/form.component';
+import {KeyboardCode} from '../../../projects/corecomponents/src/lib/core/enum/keyboard-code.enum';
+import {FormMasterService} from '../../../projects/corecomponents/src/lib/core/service/form-master.service';
+import {IconCacheService} from '../../../projects/corecomponents/src/lib/components/icon/icon-cache.service';
+import {SafeHtml} from '@angular/platform-browser';
+import {CoreComponentsIcon} from '../../../projects/corecomponents/src/lib/core/enum/core-components-icon.enum';
+import {InputTimeComponent} from '../../../projects/corecomponents/src/lib/components/input-time/input-time.component';
+
+@Component({
+  selector: "input-time-showcase",
+  template: `
+    <h1>co-input-time</h1>
+    <co-form #f (validSubmit)="validSubmit(f)">
+      <div class="form-wrapper">
+        <div class="row">
+          <co-input-time [(model)]="model1"
+                         [placeholder]="'Resterend'"
+                         [type]="'test'"
+                         [hideArrowButtons]="true"
+                         [noStyle]="true"
+                         [showClearButton]="false"
+          ></co-input-time>
+        </div>
+      </div>
+    </co-form>
+  `,
+  providers: [
+    FormMasterService
+  ],
+  styles: [`
+    :host {
+      display: flex;
+      flex-direction: column;
+      width: 320px;
+    }`
+  ]
+})
+export class InputTimeShowcaseComponent implements OnInit {
+  public readonly icon: typeof CoreComponentsIcon = CoreComponentsIcon;
+  @ViewChild('inputPassword', {static: false})
+  public inputPassword: InputTimeComponent;
+
+  @ViewChild(FormComponent, {static: false})
+  public formComponent: FormComponent;
+  // tslint:disable-next-line:no-unused-expression
+  public model1: number = 1;
+  public searchModel: string;
+  public numberModel: number = 1;
+  public customIconData: SafeHtml | undefined;
+
+  public readonly keyDownWhitelist: KeyboardCode[] = [
+    KeyboardCode.Five,
+    KeyboardCode.Backspace
+  ];
+
+  constructor(
+    private _formMaster: FormMasterService,
+    public iconService: IconCacheService
+  ) {
+  }
+
+  ngOnInit(): void {
+    this.customIconData = this.iconService.getIcon(this.icon.Cart);
+  }
+
+  public submitForm(): void {
+    this._formMaster.submitSlaves();
+  }
+
+  public validSubmit(f: FormComponent): void {
+    console.log(f);
+    console.log(this.model1);
+  }
+
+  public testModel(): void {
+    this.numberModel = 3;
+  }
+
+  public handleFocus(): void {
+    console.log('focus!');
+  }
+
+  public handleBlur(): void {
+    console.log('blur!');
+  }
+
+  public handleLeftIconClick(event: MouseEvent): void {
+    console.log('left icon clicked');
+  }
+
+  public handleRightIconClick(event: MouseEvent): void {
+    console.log('right icon clicked');
+  }
+
+  public handleRightIconMouseDown(event: MouseEvent): void {
+    console.log('right icon mouse down');
+  }
+
+  public handleRightIconMouseUp(event: MouseEvent): void {
+    console.log('right icon mouse up');
+  }
+
+}

package/src/app/components/number-picker-showcase.component.ts

@@ -0,0 +1,17 @@
+import {Component} from "@angular/core";
+
+@Component({
+    selector: "number-picker-showcase",
+    template: `
+        <h1>co-number-picker</h1>
+        <co-number-picker label="Amount" [min]="1.3" [max]="10" [step]="0.25"></co-number-picker>
+        <co-number-picker label="Amount" [min]="1.3" [max]="10" [step]="0.25" horizontal></co-number-picker>
+    `,
+    styles: [`
+        :host {
+            display: inline-block;
+        }
+    `]
+})
+export class NumberPickerShowcaseComponent {
+}

package/src/app/components/simple-grid-showcase.component.ts

@@ -0,0 +1,60 @@
+import {Component, OnInit} from "@angular/core";
+import {ShowcaseDataService} from "../service/showcase-data.service";
+
+@Component({
+  selector: "co-simple-grid-showcase",
+  template: `
+        <h1>co-simple-grid</h1>
+        <co-input-checkbox [(model)]="inlineEditGrid" [label]="'inline edit'"></co-input-checkbox>
+        <co-input-checkbox [(model)]="resizeGrid" [label]="'resize'"></co-input-checkbox>
+        <co-input-checkbox [(model)]="autoAddRowGrid" [label]="'autoAddRow'"></co-input-checkbox>
+        <co-simple-grid-test [inlineEditGrid]="inlineEditGrid" [resizable]="resizeGrid" [autoAddRow]="autoAddRowGrid">
+          <co-simple-grid-column [headerText]="'Nieuwe kolom'" [field]="'FTE'" [required]="true" [order]="25"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'Nieuwe kolom1'" [field]="'Naam'" [width]="100" [resizable]="false" [order]="45"></co-simple-grid-column>
+        </co-simple-grid-test>
+    `,
+  styles: [
+  ]
+})
+export class SimpleGridShowcaseComponent implements OnInit {
+
+  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' };
+
+  public inlineEditGrid: boolean = false;
+  public resizeGrid: boolean = false;
+  public autoAddRowGrid: boolean = false;
+
+  constructor(
+    private _dataService: ShowcaseDataService
+  ) {
+  }
+
+  ngOnInit(): void {
+    this.data.length = 0;
+    for (let i = 0; i < 5; i++) {
+      this.data.push(this._dataService.gridData[i]);
+    }
+    // this.data = this._dataService.gridData;
+  }
+
+  public handleSelectRow(row: any): void {
+    console.log(row);
+  }
+
+  public handleDblClickRow(row: any): void {
+    console.log(row);
+  }
+
+  public handleSaveRow(row: any): void {
+    console.log(row);
+  }
+
+}

package/src/app/model/data-item.ts

@@ -0,0 +1,9 @@
+// for use in showcase component arrays
+export interface DataItem {
+    id?: number;
+    title?: string,
+    description?: string;
+    price?: number;
+    imageData?: string;
+    isActive?: boolean
+}

package/src/app/model/enum/currency-code.enum.ts

@@ -0,0 +1,7 @@
+// Currency codes in accordance to ISO 4217
+export enum CurrencyCode {
+  Euro = "EUR",
+  Dollar = "USD",
+  Ruble = "RUB",
+  BritishPoundSterling = "GBP"
+}

package/src/app/model/enum/language-code.enum.ts

@@ -0,0 +1,8 @@
+// Follows notation for LCID locale https://docs.microsoft.com/en-us/openspecs/office_standards/ms-oe376/6c085406-a698-4e12-9d4d-c3b0ee3dbc4a
+export enum LanguageCode {
+  Dutch= "nl-NL",
+  German = "de-DE",
+  French = "fr-FR",
+  English = "en-GB",
+  Russian = "ru-RU"
+}

package/src/app/model/map/currencies.map.ts

@@ -0,0 +1,6 @@
+export enum CurrencyCodeToCharacter {
+  EUR = "€",
+  USD = "$",
+  RUB = "R",
+  GBP = "£"
+}