@colijnit/corecomponents_v12 12.2.19 → 12.2.20

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

@@ -1,72 +0,0 @@
-import {Component} from '@angular/core';
-import {CoDirection} from '../../../projects/corecomponents/src/lib/core/enum/co-direction';
-import {CoOrientation} from '../../../projects/corecomponents/src/lib/core/enum/co-orientation';
-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: "icon-showcase",
-  template: `
-    <h1>co-icon</h1>
-    <co-button [label]="'Change icon'" (click)="changeIcon()"></co-button>
-    <co-icon [iconData]="icons.getIcon(dynamicIcon)"></co-icon>
-    <br>
-    <co-icon [iconData]="icons.getIcon(Icon.SaveDisk)"></co-icon>
-    <co-icon [iconData]="icons.getIcon(Icon.Wrench)"></co-icon>
-    <co-icon [iconData]="icons.getIcon(Icon.Order)"></co-icon>
-    <co-icon [iconData]="icons.getIcon(Icon.SaveDisk)" class="light"></co-icon>
-    <co-icon [iconData]="icons.getIcon(Icon.SaveDisk)" class="dark"></co-icon>
-    <co-icon [iconData]="icons.getIcon(Icon.Calendar)" class="dark"></co-icon>
-    <co-icon [iconData]="icons.getIcon(Icon.CalendarEmpty)" class="co-icon-calendar-empty"></co-icon>
-
-    <div class="showcase-icon-collapse-handle">
-      <h1>co-icon-collapse-handle</h1>
-      <co-icon-collapse-handle></co-icon-collapse-handle>
-      <co-icon-collapse-handle [arrowDirection]="directionRight"></co-icon-collapse-handle>
-      <co-icon-collapse-handle [arrowDirection]="directionDown"></co-icon-collapse-handle>
-      <co-icon-collapse-handle [orientation]="orientations.Vertical"></co-icon-collapse-handle>
-      <co-icon-collapse-handle [orientation]="orientations.Vertical"
-                               [arrowDirection]="directionRight"></co-icon-collapse-handle>
-      <co-icon-collapse-handle [orientation]="orientations.Vertical"
-                               [arrowDirection]="directionLeft"></co-icon-collapse-handle>
-      <co-icon-collapse-handle
-        [orientation]="orientations.Vertical"
-        [arrowDirection]="directionRight"
-        [twoArrows]="true"
-        (click)="onSideCollapseHandleClick()"></co-icon-collapse-handle>
-    </div>
-  `,
-  styles: [`
-    co-icon {
-      background-color: #c9c5ca;
-    }
-
-    .co-icon-calendar-empty {
-      background-color: white;
-    }
-
-    .co-icon-collapse-handle {
-      margin: 10px 0;
-    }
-  `]
-})
-export class IconShowcaseComponent {
-  public readonly Icon: any = CoreComponentsIcon;
-  public readonly orientations: typeof CoOrientation = CoOrientation;
-  public readonly directionRight: CoDirection = CoDirection.Right;
-  public readonly directionLeft: CoDirection = CoDirection.Left;
-  public readonly directionDown: CoDirection = CoDirection.Down;
-
-  public dynamicIcon: CoreComponentsIcon = CoreComponentsIcon.Icon3d;
-
-  constructor(public icons: IconCacheService) {
-  }
-
-  public changeIcon(): void {
-    this.dynamicIcon = CoreComponentsIcon.ChevronUpRegular;
-  }
-
-  public onSideCollapseHandleClick(): void {
-    console.log('on side collapse handle clicked');
-  }
-}

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

@@ -1,87 +0,0 @@
-import {Component, ViewChild} from "@angular/core";
-import {FormComponent} from "../../../projects/corecomponents/src/lib/components/form/form.component";
-
-@Component({
-    selector: "input-checkbox-showcase",
-    template: `
-        <h1>co-input-checkbox</h1>
-        <co-form (validSubmit)="validSubmit()">
-            <div>
-                <co-input-checkbox
-                    [name]="'groupName0'"
-                    [(model)]="models[0]"
-                    [label]="'style e-primary'"
-                    [cssClass]="'e-primary'"
-                    [disabled]="true"
-                ></co-input-checkbox>
-            </div>
-            <div>
-                <co-input-checkbox
-                    [name]="'groupName1'"
-                    [(model)]="models[1]"
-                    [label]="'style e-success'"
-                    [cssClass]="'e-success'"
-                    [disabled]="true"
-                ></co-input-checkbox>
-            </div>
-            <div>
-                <co-input-checkbox
-                    [name]="'groupName2'"
-                    [(model)]="models[2]"
-                    [label]="'style e-info'"
-                    [cssClass]="'e-info'"
-                ></co-input-checkbox>
-            </div>
-            <div>
-                <co-input-checkbox
-                    [name]="'groupName3'"
-                    [(model)]="models[3]"
-                    [label]="'style e-warning'"
-                    [cssClass]="'e-warning'"
-                ></co-input-checkbox>
-            </div>
-            <div>
-                <co-input-checkbox
-                    [name]="'groupName4'"
-                    [(model)]="models[4]"
-                    [label]="'style e-danger'"
-                    [cssClass]="'e-danger'"
-                ></co-input-checkbox>
-            </div>
-          <div>
-            <co-input-checkbox
-              [name]="'groupName5'"
-              [(model)]="models[5]"
-              [label]="'readonly'"
-              [readonly]="true"
-            ></co-input-checkbox>
-          </div>
-            <co-button [label]="'test form'" (click)="submitForm()"></co-button>
-        </co-form>
-    `,
-    styles: [`
-        :host {
-            display: flex;
-            flex-direction: column;
-            width: 320px;
-        }`
-    ]
-})
-export class InputCheckboxShowcaseComponent {
-    @ViewChild(FormComponent, { static: false })
-    public formComponent: FormComponent;
-
-    public models: boolean[] = [ false, true, true, false, false ];
-
-    public submitForm(): void {
-        if (this.formComponent) {
-            this.formComponent.submit();
-        }
-    }
-
-    public validSubmit(): void {
-        this.models.forEach( function(value: boolean) {
-            console.log('model: ' + value);
-        });
-    }
-}

package/src/app/components/input-date-picker-showcase.component.ts

@@ -1,90 +0,0 @@
-import {Component, OnInit, ViewChild} from "@angular/core";
-import {InputDatePickerComponent} from "../../../projects/corecomponents/src/lib/components/input-date-picker/input-date-picker.component";
-import {FormComponent} from "../../../projects/corecomponents/src/lib/components/form/form.component";
-import {CoreComponentsIcon} from "../../../projects/corecomponents/src/lib/core/enum/core-components-icon.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';
-
-@Component({
-  selector: "input-date-picker-showcase",
-  template: `
-    <h1>co-input-date</h1>
-    <co-form #f (validSubmit)="validSubmit(f)">
-      <co-input-date #coInputDate1
-                     [(model)]="model1"
-                     placeholder="datum"
-                     [showSaveCancel]="true"
-                     [required]="true"></co-input-date>
-      <co-input-date #coInputDate2
-                     [(model)]="model2"
-                     placeholder="datum"
-                     [required]="true"
-                     iconHeight="64px"
-                     [calendarIconName]="icon.Check"
-      ></co-input-date>
-
-      <co-input-date #coInputDate1
-                     [(model)]="model1"
-                     placeholder="datum"
-                     [showSaveCancel]="true"
-                     [required]="true"
-                     [isMinimal]="true"
-      ></co-input-date>
-
-
-      <co-button [label]="'test form'" (click)="submitForm()"></co-button>
-    </co-form>
-    <co-input-date-picker
-      [placeholder]="'Leverdatum'"
-      [selectedDate]="model1"
-    ></co-input-date-picker>
-    <co-input-date-range-picker
-      [placeholder]="'Leverdatum periode'"
-      [selectedDates]="testDates"
-      [closeAfterDateSelection]="false"
-    ></co-input-date-range-picker>
-  `,
-  styles: [`
-    :host {
-      display: flex;
-      flex-direction: column;
-      width: 320px;
-    }`
-  ],
-  providers: [
-    FormMasterService
-  ]
-})
-export class InputDatePickerShowcaseComponent implements OnInit {
-  public readonly icon: typeof CoreComponentsIcon = CoreComponentsIcon;
-
-  @ViewChild(FormComponent, {static: false})
-  public formComponent: FormComponent;
-
-  @ViewChild("coInputDate1")
-  public coInputDate1: InputDatePickerComponent;
-
-  public model1: Date = new Date();
-  public model2: Date = new Date();
-
-  public testDates: Date[] = [new Date(), new Date(this.model1.getFullYear(), this.model1.getMonth(), this.model1.getDate() + 3)];
-
-  ngOnInit(): void {
-  }
-
-  constructor(
-    public iconService: IconCacheService,
-    private _formMasterService: FormMasterService) {
-  }
-
-  public submitForm(): void {
-    this._formMasterService.submitSlaves();
-  }
-
-  public validSubmit(f: FormComponent): void {
-    console.log("valid submit");
-    console.log(this.coInputDate1.model);
-    console.log(f);
-    console.log(this.model1);
-  }
-}

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

@@ -1,125 +0,0 @@
-import {Component, OnInit, ViewChild} from '@angular/core';
-import {FormComponent} from '../../../projects/corecomponents/src/lib/components/form/form.component';
-import {
-    InputNumberPickerComponent
-} from '../../../projects/corecomponents/src/lib/components/input-number-picker/input-number-picker.component';
-import {InputNumberPickerButtonShowMode} from '../../../projects/corecomponents/src/lib/core/enum/input-number-picker-show-mode.enum';
-import {FloatLabelTypeEnum} from '../../../projects/corecomponents/src/lib/core/enum/float-label-type.enum';
-import {SafeHtml} from '@angular/platform-browser';
-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: "input-number-picker-showcase",
-    template: `
-        <h1>co-input-number-picker</h1>
-        <co-form #f (validSubmit)="validSubmit(f)">
-            <div>
-                <co-input-number-picker class="horizontal" [step]="step1" [(model)]="amount1" [min]="0" [decimals]="precision1" [leftIconData]="icon"
-                [buttonShowMode]="showMode.Always" [ngModelOptions]="{debounce: 1}" (modelChange)="handleNumberPickerModelChange($event)"></co-input-number-picker>
-            </div>
-            <div>
-                <co-input-number-picker class="horizontal" [step]="step1" [(model)]="amount1" [min]="0" [decimals]="precision1"
-                [buttonShowMode]="showMode.Always" [readonly]="true" [ngModelOptions]="{debounce: 1}"></co-input-number-picker>
-            </div>
-            <div>
-                <co-input-number-picker class="horizontal" [step]="step2" [(model)]="amount2" [min]="0" [decimals]="precision1"
-                                        [buttonShowMode]="showMode.Always" [readonly]="true" [ngModelOptions]="{debounce: 1}"></co-input-number-picker>
-            </div>
-            <div>
-                <co-input-number-picker class="horizontal" [step]="step3" [(model)]="amount3" [min]="-10" [decimals]="precision3"
-                                        [buttonShowMode]="showMode.Always" [readonly]="false" [ngModelOptions]="{debounce: 1}"></co-input-number-picker>
-            </div>
-            <div>
-                <co-input-number-picker class="horizontal" [step]="step4" [(model)]="amount4" [min]="0" [decimals]="precision4" cssClass=""
-                                        [floatLabelType]="floatLabelType.Auto"
-                                        [buttonShowMode]="showMode.Always" [readonly]="true" [ngModelOptions]="{debounce: 1}"></co-input-number-picker>
-            </div>
-            <div>
-                <co-input-number-picker class="horizontal" [(model)]="amount5" [min]="0" [floatLabelType]="floatLabelType.Auto"
-                                        [buttonShowMode]="showMode.Always" [readonly]="false" [ngModelOptions]="{debounce: 1}"></co-input-number-picker>
-            </div>
-            <div>
-                <co-input-number-picker class="horizontal" [(model)]="amount6" [max]="-1" [floatLabelType]="floatLabelType.Auto"
-                                        [buttonShowMode]="showMode.Always" [readonly]="false" [ngModelOptions]="{debounce: 1}"></co-input-number-picker>
-            </div>
-            <div>
-                <co-input-number-picker class="horizontal" [(model)]="amount7" [max]="1" [floatLabelType]="floatLabelType.Auto"
-                                        [buttonShowMode]="showMode.Always" [readonly]="false" [ngModelOptions]="{debounce: 1}"></co-input-number-picker>
-            </div>
-        </co-form>
-    `,
-    styles: [`
-        :host {
-            display: flex;
-            flex-direction: column;
-            width: 320px;
-        }`
-    ]
-})
-export class InputNumberPickerShowcaseComponent implements OnInit {
-  public readonly showMode: typeof InputNumberPickerButtonShowMode = InputNumberPickerButtonShowMode;
-  public readonly floatLabelType: typeof FloatLabelTypeEnum = FloatLabelTypeEnum;
-
-    @ViewChild(FormComponent, { static: false })
-    public formComponent: FormComponent;
-
-    @ViewChild(InputNumberPickerComponent)
-    public coInputNumber: InputNumberPickerComponent;
-
-    public amount1: number = 1.99;
-    public amount2: number = 1.1;
-    public amount3: number = 1;
-    public amount4: number = 1;
-    public amount5: number = 3;
-    public amount6: number = -3;
-    public amount7: number = 0;
-
-    public precision1: number = 2;
-    public precision2: number = 1;
-    public precision3: number = 1;
-    public precision4: number = 0;
-
-    public step1: number = 1;
-    public step2: number = 2;
-    public step3: number = 0.1;
-    public step4: number = 1;
-
-    public icon: SafeHtml;
-
-  public options = [
-    { value: 'option1', label: 'Option 1' },
-    { value: 'option2', label: 'Option 2' },
-    { value: 'option3', label: 'Option 3' },
-    { value: 'option4', label: 'Option 4' },
-    { value: 'option5', label: 'Option 5' },
-    { value: 'option6', label: 'Option 6' },
-    { value: 'option7', label: 'Option 7' },
-    { value: 'option8', label: 'Option 8' },
-    { value: 'option9', label: 'Option 9' },
-    { value: 'option10', label: 'Option 10' },
-  ];
-
-  constructor(private _iconService: IconCacheService) {
-  }
-
-    ngOnInit(): void {
-      this.icon = this._iconService.getIcon(CoreComponentsIcon.Activities);
-    }
-
-    public submitForm(): void {
-        if (this.formComponent) {
-            this.formComponent.submit();
-        }
-    }
-
-    public handleNumberPickerModelChange(value): void {
-      console.log(value);
-    }
-
-    public validSubmit(f: FormComponent): void {
-        console.log('valid submit');
-        console.log(this.coInputNumber.model);
-        console.log(f);
-    }
-}

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

@@ -1,87 +0,0 @@
-import {Component, ViewChild} from "@angular/core";
-import {FormComponent} from "../../../projects/corecomponents/src/lib/components/form/form.component";
-
-@Component({
-    selector: "input-radio-button-showcase",
-    template: `
-        <h1>co-input-radio-button</h1>
-        <co-form #f (validSubmit)="validSubmit(f)">
-          <div class="form-wrapper">
-              <co-input-radio-button
-                      [name]="'group'"
-                      [value]="'primary'"
-                      [label]="'style e-primary'"
-                      [checked]="model === 'primary'"
-                      [(model)]="model"
-                      (modelChange)="handleModelChange($event)"
-              ></co-input-radio-button>
-              <co-input-radio-button
-                      [name]="'group'"
-                      [value]="'success'"
-                      [label]="'style e-success'"
-                      [checked]="model === 'success'"
-                      [(model)]="model"
-                      (modelChange)="handleModelChange($event)"
-              ></co-input-radio-button>
-              <co-input-radio-button
-                      [name]="'group'"
-                      [value]="'info'"
-                      [label]="'style e-info'"
-                      [checked]="model === 'info'"
-                      [(model)]="model"
-                      (modelChange)="handleModelChange($event)"
-              ></co-input-radio-button>
-              <co-input-radio-button
-                      [name]="'group'"
-                      [value]="'warning'"
-                      [label]="'style e-warning'"
-                      [checked]="model === 'warning'"
-                      [(model)]="model"
-                      (modelChange)="handleModelChange($event)"
-              ></co-input-radio-button>
-              <co-input-radio-button
-                      [name]="'group'"
-                      [value]="'danger'"
-                      [label]="'style e-danger'"
-                      [checked]="model === 'danger'"
-                      [(model)]="model"
-                      (modelChange)="handleModelChange($event)"
-              ></co-input-radio-button>
-            <co-button [label]="'test form'" (click)="submitForm()"></co-button>
-          </div>
-        </co-form>
-    `,
-    styles: [`
-        :host {
-            display: flex;
-            flex-direction: column;
-            width: 320px;
-          .form-wrapper {
-            display: flex;
-            flex-direction: column;
-            row-gap: 5px;
-          }
-        }`
-    ]
-})
-export class InputRadioButtonShowcaseComponent {
-    @ViewChild(FormComponent, { static: false })
-    public formComponent: FormComponent;
-
-    public model: string = 'danger';
-
-    public submitForm(): void {
-        if (this.formComponent) {
-            this.formComponent.submit();
-        }
-    }
-
-    public validSubmit(f: FormComponent): void {
-        console.log('form: ' + f);
-    }
-
-    public handleModelChange(value: string): void {
-        console.log('value: ' + value);
-        console.log('model: ' + this.model);
-    }
-}

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

@@ -1,35 +0,0 @@
-import {ChangeDetectorRef, Component} from '@angular/core';
-
-@Component({
-  selector: "input-scanner-showcase",
-  template: `
-    <h1>co-input-scanner</h1>
-    <co-input-scanner
-            [model]="model"
-            (barCodeScanned)="handleBarCodeScanned($event)"
-    ></co-input-scanner>
-  `,
-  styles: [`
-    :host {
-      display: flex;
-      flex-direction: column;
-      width: 320px;
-    }`
-  ]
-})
-export class InputScannerShowcaseComponent {
-
-  public model: string;
-
-  constructor(private _changeDetector: ChangeDetectorRef) {
-  }
-
-
-  public handleBarCodeScanned(code: string): void {
-    // this.model = code;
-    // this._changeDetector.detectChanges();
-    this.model = "";
-    // this._changeDetector.detectChanges();
-  }
-
-}