@colijnit/corecomponents_v12 254.1.9 → 255.1.1

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

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

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

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

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

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

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