@colijnit/corecomponents_v12 255.1.1 → 255.1.2

package/projects/corecomponents/src/lib/components/input-number-picker/input-number-picker.component.ts

@@ -1,378 +0,0 @@
-import {
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    ComponentFactoryResolver, ElementRef,
-    EventEmitter,
-    forwardRef,
-    HostBinding,
-    Inject,
-    Input,
-    NgZone,
-    OnDestroy,
-    OnInit,
-    Optional,
-    Output,
-    ViewChild,
-    ViewEncapsulation
-} from '@angular/core';
-import {BaseInputComponent} from '../base/base-input.component';
-import {InputBoolean} from '../../core/decorator/input-boolean.decorator';
-import {Subscription} from 'rxjs';
-import {BoundsConstrainedNumberValue} from '../../core/model/bounds-constrained-number-value';
-import {NUMBER_INPUTS_KEY_DOWN_WHITE_LIST} from '../../core/constant/number-inputs-key-down-white-list';
-import {KeyboardCode} from '../../core/enum/keyboard-code.enum';
-import {InputTextComponent} from '../input-text/input-text.component';
-import {FormInputUserModelChangeListenerService} from '../../core/service/form-input-user-change-listener.service';
-import {InputNumberPickerButtonShowMode} from '../../core/enum/input-number-picker-show-mode.enum';
-import {IconCacheService} from '../icon/icon-cache.service';
-import {CoreComponentsIcon} from '../../core/enum/core-components-icon.enum';
-import {SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME} from '../../interfaces/screen-config-adapter-component-interface-name';
-import {FormComponent} from '../form/form.component';
-import {OverlayService} from '../../service/overlay.service';
-import {SafeHtml} from '@angular/platform-browser';
-import {NgZoneWrapperService} from '../../core/service/ng-zone-wrapper.service';
-
-@Component({
-    selector: 'co-input-number-picker',
-    template: `
-        <div class="icon-wrapper" *ngIf="leftIconData">
-            <co-icon class="input-number-picker-icon" [iconData]="leftIconData" (click)="iconClick.emit($event)"></co-icon>
-            <div class="spacer"></div>
-        </div>
-        <div class="button-wrapper">
-            <co-button *ngIf="showButtons" class="minus-operator" [class.select]="minSelected" tabindex="-1"
-                       [disabled]="readonly"
-                       [iconData]="iconCacheService.getIcon(minusIcon)"
-                       (mousedown)="onMinusMouseDown($event)"
-                       (mouseup)="stopAutoCounting()" (mouseleave)="stopAutoCounting()"></co-button>
-        </div>
-        <input type="text"
-               [tabIndex]="readonly ? -1 : 0"
-               [ngModel]="model"
-               [readonly]="readonly"
-               [disabled]="disabled"
-               [required]="required"
-               (ngModelChange)="handleChangeModel($event)"
-               (keydown)="handleInputKeyDown($event)"
-               (blur)="handleBlur()"/>
-        <div class="button-wrapper">
-            <co-button *ngIf="showButtons" class="plus-operator" [class.select]="plusSelected" tabindex="-1"
-                       [disabled]="readonly"
-                       [iconData]="iconCacheService.getIcon(plusIcon)"
-                       (mousedown)="onPlusMouseDown($event)"
-                       (mouseup)="stopAutoCounting()" (mouseleave)="stopAutoCounting()"></co-button>
-        </div>
-    `,
-    providers: [
-        OverlayService, {
-            provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME, useExisting: forwardRef(() => InputNumberPickerComponent)
-        }, {
-            provide: BaseInputComponent,
-            useExisting: InputNumberPickerComponent
-        }],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    encapsulation: ViewEncapsulation.None,
-})
-// A component that lets users pick a number by increasing and decreasing it with buttons, or by typing.
-export class InputNumberPickerComponent extends BaseInputComponent<number> implements OnInit, OnDestroy {
-
-    // @override
-    @Input()
-    public set model(model: number) {
-        this.setValue(model, true);
-        super.model = model;
-    }
-
-    public get model(): number {
-        return super.model;
-    }
-
-    @Input()
-    public modelChangeOnEnter: boolean = true;
-
-    @HostBinding('class.has-icon')
-    @Input()
-    public leftIconData: SafeHtml | undefined;
-
-    @Input()
-    public set min(min: number) {
-        this.numberLogic.min = min;
-    }
-
-    @Input()
-    public set step(step: number) {
-        this.numberLogic.step = step;
-    }
-
-    @Input()
-    public set max(max: number) {
-        this.numberLogic.max = max;
-    }
-
-    @Input()
-    public ngModelOptions: any;
-
-    @Input()
-    public minusIcon: CoreComponentsIcon = CoreComponentsIcon.MinusSimple;
-
-    @Input()
-    public plusIcon: CoreComponentsIcon = CoreComponentsIcon.PlusSimple;
-
-    // Whether to show buttons 'always', 'onFocusOnly', or 'never'
-    @Input()
-    public buttonShowMode: InputNumberPickerButtonShowMode = InputNumberPickerButtonShowMode.Always;
-
-    // @override Default true for us.
-    @Input() @InputBoolean()
-    public noValidation: boolean = true;
-
-    @Input()
-    public set decimals(decimals: number) {
-        this.numberLogic.decimals = decimals;
-    }
-
-    // @override
-    @Output()
-    public readonly modelChange: EventEmitter<number> = new EventEmitter<number>();
-
-    @Output()
-    public readonly iconClick: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
-
-    @HostBinding('class.show-buttons-on-focus-only')
-    public get showButtonsOnFocusOnly(): boolean {
-        return this.buttonShowMode === InputNumberPickerButtonShowMode.OnFocusOnly;
-    }
-
-    @HostBinding('class.has-label')
-    public get hasLabel(): boolean {
-        return !!this.label;
-    }
-
-    @HostBinding('class.co-input-number-picker')
-    public showClass(): boolean {
-        return true;
-    }
-
-    public showButtons: boolean;
-
-    public readonly myKeyDownWhiteList: KeyboardCode[] = NUMBER_INPUTS_KEY_DOWN_WHITE_LIST;
-
-    public readonly numberLogic: BoundsConstrainedNumberValue = new BoundsConstrainedNumberValue();
-
-    public minSelected: boolean = false;
-    public plusSelected: boolean = false;
-
-    private _numberInputHasFocus: boolean = false;
-    private _changeFromButton: boolean = false;
-
-    private _numberLogicValueChangeSub: Subscription;
-    private readonly _delayBeforeStartAutoCountMs: number = 666;
-    // the 'speed gears' for auto counting
-    private readonly _stepFactors: number[] = [1, 10, 20];
-    // increase step size timing
-    private readonly _msChangeStepFactor: number = 1000;
-    // step speed
-    private readonly _msDoStep: number = 5;
-    // hold the mouse down and this increases for a faster auto increment
-    private _stepFactor: number = this._stepFactors[0];
-    private _mayAutoCount: boolean = false;
-
-    private _autoCountTimeout: number;
-    private _stepIncrementTimeout: number;
-    private _startAutocountTimeout: number;
-
-    constructor(
-        @Optional() public formComponent: FormComponent,
-        @Inject(IconCacheService) public iconCacheService: IconCacheService,
-        protected overlayService: OverlayService,
-        private _ngZone: NgZone,
-        protected componentFactoryResolver: ComponentFactoryResolver,
-        changeDetector: ChangeDetectorRef,
-        formUserChangeListener: FormInputUserModelChangeListenerService,
-        protected ngZoneWrapper?: NgZoneWrapperService,
-        public elementRef?: ElementRef,
-    ) {
-        super(changeDetector, componentFactoryResolver, overlayService, formUserChangeListener, ngZoneWrapper, elementRef);
-
-        this._numberLogicValueChangeSub = this.numberLogic.valueChange.subscribe((value: number) => {
-            if (!this._mayAutoCount) {
-                this.model = value;
-                if (!this.modelChangeOnEnter || this._changeFromButton) {
-                    this.modelChange.emit(value);
-                }
-                // custom form user chagne listener .next because we don't user super.updateModel() which normally does that for us
-                if (this._markedAsUserTouched) {
-                    this.formUserChangeListener.userModelChange.next(value);
-                    this.userModelChange.next(value);
-                }
-            }
-        });
-    }
-
-    ngOnInit(): void {
-        // this.numberLogic.setValue(this.model, true);
-        // this.numberLogic.init(true);
-        this._updateButtonsShowState();
-    }
-
-    ngOnDestroy(): void {
-        this._numberLogicValueChangeSub.unsubscribe();
-        clearTimeout(this._autoCountTimeout);
-        clearTimeout(this._stepIncrementTimeout);
-        clearTimeout(this._startAutocountTimeout);
-    }
-
-    // Note: recursive through setTimeout().
-    public doIncrementAuto(): void {
-        this._mayAutoCount = true;
-
-        this.increment(this._stepFactor);
-
-        this._ngZone.runOutsideAngular(() => {
-            this._autoCountTimeout = window.setTimeout(() => {
-                if (this._mayAutoCount) {
-                    this.doIncrementAuto();
-                    this.changeDetector.detectChanges();
-                }
-            }, this._msDoStep);
-        });
-    }
-
-    public handleInputKeyDown(event: KeyboardEvent): boolean {
-        // event.preventDefault();
-        if (event.code === 'Enter' || event.code === 'NumpadEnter') {
-            this.modelChange.next(this.model);
-            return false;
-        }
-        if (this.myKeyDownWhiteList.find((k) => k === event.keyCode) === undefined) {
-            return false;
-        }
-    }
-
-    public handleBlur(): void {
-        this.modelChange.next(this.model);
-    }
-
-    public handleChangeModel(value: number): void {
-        this._changeFromButton = false;
-        this.numberLogic.setValue(value);
-    }
-
-    // Note: recursive through setTimeout().
-    public doDecrementAuto(): void {
-        this._mayAutoCount = true;
-
-        this.decrement(this._stepFactor);
-
-        this._ngZone.runOutsideAngular(() => {
-            this._autoCountTimeout = window.setTimeout(() => {
-                if (this._mayAutoCount) {
-                    this.doDecrementAuto();
-                    this.changeDetector.detectChanges();
-                }
-            }, this._msDoStep);
-        });
-    }
-
-    public stopAutoCounting(): void {
-        this.minSelected = false;
-        this.plusSelected = false;
-        this._mayAutoCount = false;
-        this._stepFactor = this._stepFactors[0];
-    }
-
-    // Sets the current number value with given newValue, optionally silent (no valueChange event fired).
-    public setValue(newValue: number, silent: boolean = false): void {
-        this.numberLogic.setValue(newValue, silent);
-    }
-
-    public increment(steps: number = 1): void {
-        this._changeFromButton = true;
-        this.numberLogic.increment(steps);
-    }
-
-    public decrement(steps: number = 1): void {
-        this._changeFromButton = true;
-        this.numberLogic.decrement(steps);
-    }
-
-    public onPlusMouseDown(event: Event): void {
-        if (this.readonly) {
-            event.preventDefault();
-            return;
-        }
-        this.plusSelected = true;
-        this._markedAsUserTouched = true;
-
-        // keeps focus on input text instead of button
-        event.preventDefault();
-
-        this.increment();
-        this._mayAutoCount = true;
-
-        clearTimeout(this._startAutocountTimeout);
-        this._startAutocountTimeout = window.setTimeout(() => {
-            if (this._mayAutoCount) {
-                this.doIncrementAuto();
-                this._doIncreaseStepFactor();
-            }
-        }, this._delayBeforeStartAutoCountMs);
-    }
-
-    public onMinusMouseDown(event: Event): void {
-        if (this.readonly) {
-            event.preventDefault();
-            return;
-        }
-        this.minSelected = true;
-        this._markedAsUserTouched = true;
-        // keeps focus on input text instead of button
-        event.preventDefault();
-
-        this.decrement();
-        this._mayAutoCount = true;
-
-        clearTimeout(this._startAutocountTimeout);
-        this._startAutocountTimeout = window.setTimeout(() => {
-            if (this._mayAutoCount) {
-                this.doDecrementAuto();
-                this._doIncreaseStepFactor();
-            }
-        }, this._delayBeforeStartAutoCountMs);
-    }
-
-    // Note: recursive.
-    private _doIncreaseStepFactor(): void {
-        this._stepIncrementTimeout = window.setTimeout(() => {
-            if (this._mayAutoCount) {
-                this._stepFactor = this._getNextStepFactorMouseDown();
-                this._doIncreaseStepFactor();
-            }
-        }, this._msChangeStepFactor);
-    }
-
-    private _getNextStepFactorMouseDown(): number {
-        const curIdx: number = this._stepFactors.indexOf(this._stepFactor);
-        if (curIdx < this._stepFactors.length - 1) {
-            return this._stepFactors[curIdx + 1];
-        }
-        return this._stepFactor;
-    }
-
-    // Show or hide + and - buttons. Might hide buttons if number input lost focus and button show mode is on focus only.
-    private _updateButtonsShowState(): void {
-        switch (this.buttonShowMode) {
-            case InputNumberPickerButtonShowMode.Always:
-            default:
-                this.showButtons = true;
-                break;
-            case InputNumberPickerButtonShowMode.OnFocusOnly:
-                this.showButtons = this._numberInputHasFocus;
-                break;
-            case InputNumberPickerButtonShowMode.Never:
-                this.showButtons = false;
-                break;
-        }
-    }
-}

package/projects/corecomponents/src/lib/components/input-number-picker/input-number-picker.module.ts

@@ -1,20 +0,0 @@
-import {NgModule} from "@angular/core";
-import {CommonModule} from "@angular/common";
-import {InputNumberPickerComponent} from "./input-number-picker.component";
-import {ButtonModule} from "../button/button.module";
-import {InputTextModule} from "../input-text/input-text.module";
-import {FormsModule} from "@angular/forms";
-import {IconModule} from '../icon/icon.module';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        FormsModule,
-        ButtonModule,
-        InputTextModule,
-        IconModule
-    ],
-  declarations: [InputNumberPickerComponent],
-  exports: [InputNumberPickerComponent]
-})
-export class InputNumberPickerModule { }

package/projects/corecomponents/src/lib/components/input-radio-button/input-radio-button.component.ts

@@ -1,86 +0,0 @@
-import {
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    ComponentFactoryResolver,
-    ElementRef,
-    forwardRef,
-    HostBinding, HostListener,
-    Input,
-    Optional,
-    ViewEncapsulation
-} from '@angular/core';
-import {BaseInputComponent} from '../base/base-input.component';
-import {FormComponent} from '../form/form.component';
-import {FormInputUserModelChangeListenerService} from '../../core/service/form-input-user-change-listener.service';
-import {NgZoneWrapperService} from '../../core/service/ng-zone-wrapper.service';
-import {SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME} from '../../interfaces/screen-config-adapter-component-interface-name';
-import {animate, state, style, transition, trigger} from '@angular/animations';
-import {OverlayService} from '../../service/overlay.service';
-
-@Component({
-    selector: 'co-input-radio-button',
-    template: `
-        <div class="outer-circle" [class.selected]="model">
-            <div class="inner-circle" *ngIf="model" @showSelected></div>
-        </div>
-        <div class="label" *ngIf="label" [textContent]="label"></div>
-        <input #input [ngModel]="model" type="hidden">
-    `,
-    providers: [
-        OverlayService, {
-            provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME, useExisting: forwardRef(() => InputRadioButtonComponent)
-        }, {
-            provide: BaseInputComponent,
-            useExisting: InputRadioButtonComponent
-        }],
-    animations: [
-        trigger('showSelected', [
-            state('void', style({transform: 'scale(0)'})),
-            state('*', style({transform: 'scale(1)'})),
-            transition('void <=> *', animate('200ms ease-in-out')),
-        ])
-    ],
-    encapsulation: ViewEncapsulation.None
-})
-export class InputRadioButtonComponent extends BaseInputComponent<any> {
-
-    @HostBinding('class.selected')
-    public get isModelSelected(): boolean {
-        return this.model;
-    }
-
-    @HostBinding('class.co-radio-button')
-    public showClass() {
-        return true;
-    }
-
-    @HostListener('click', ['$event'])
-    public handleClick(event: MouseEvent): void {
-        event.preventDefault();
-        event.stopPropagation();
-        if (!this.readonly) {
-            this.model = true;
-            this.modelChange.next(this.model);
-            if (this.control) {
-                this.control.markAsDirty({onlySelf: true});
-            }
-            if (this.formComponent) {
-                this.formComponent.formGroup.markAsDirty({onlySelf: true});
-            }
-        }
-    }
-
-    constructor(
-        @Optional() public formComponent: FormComponent,
-        protected changeDetector: ChangeDetectorRef,
-        protected overlayService: OverlayService,
-        protected componentFactoryResolver: ComponentFactoryResolver,
-        protected formUserChangeListener?: FormInputUserModelChangeListenerService,
-        protected ngZoneWrapper?: NgZoneWrapperService,
-        public elementRef?: ElementRef,
-    ) {
-        super(changeDetector, componentFactoryResolver, overlayService, formUserChangeListener, ngZoneWrapper, elementRef);
-        super._markAsOnPush();
-    }
-}

package/projects/corecomponents/src/lib/components/input-radio-button/input-radio-button.module.ts

@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { BaseModule } from '../base/base.module';
-import { InputRadioButtonComponent } from './input-radio-button.component';
-
-@NgModule({
-    imports: [
-        BaseModule,
-        CommonModule,
-        FormsModule
-    ],
-    declarations: [InputRadioButtonComponent],
-    exports: [InputRadioButtonComponent]
-})
-export class InputRadioButtonModule {
-}

package/projects/corecomponents/src/lib/components/input-scanner/bar-code-scanner.ts

@@ -1,25 +0,0 @@
-export class BarCodeScanner {
-  private _buffer: string[] = [];
-
-  constructor() {
-    document.addEventListener('keypress', this._keyPress)
-  }
-
-  public close(): void {
-    document.removeEventListener('keypress', this._keyPress);
-  }
-
-  private _keyPress = (event: KeyboardEvent) => {
-    if (event.key === "Enter") {
-      document.dispatchEvent(this._createScanEvent());
-      this._buffer.length = 0;
-    } else {
-      const str: string = event.key;
-      this._buffer.push(str);
-    }
-  }
-
-  private _createScanEvent(): Event {
-    return new CustomEvent("barcodescanned", {detail: this._buffer.join("")});
-  }
-}

package/projects/corecomponents/src/lib/components/input-scanner/input-scanner.component.ts

@@ -1,89 +0,0 @@
-import {Component, EventEmitter, HostBinding, Input, Output, ViewEncapsulation} from '@angular/core';
-import {ScannerService} from './scanner.service';
-import {OverlayService} from '../../service/overlay.service';
-import {ScannerInput} from '../../interfaces/scanner-input.interface';
-import {SafeHtml} from '@angular/platform-browser';
-
-@Component({
-  selector: 'co-input-scanner',
-  template: `
-      <co-input-search
-              [(model)]="model"
-              [customCssClass]="customCssClass"
-              [placeholder]="placeholder"
-              [centerLabel]="centerLabel"
-              [useLeftIcon]="useLeftIcon"
-              [leftIconData]="leftIconData"
-              [useRightIcon]="useRightIcon"
-              [rightIconData]="rightIconData"
-              (leftIconClick)="leftIconClick.emit($event)"
-              (rightIconClick)="rightIconClick.emit($event)"
-              (search)="search.emit($event)"
-              (isFocused)="isFocused.emit($event)"
-      ></co-input-search>
-    `,
-  providers: [
-    ScannerService,
-    OverlayService
-  ],
-  encapsulation: ViewEncapsulation.None
-})
-export class InputScannerComponent implements ScannerInput {
-  @Input()
-  public model: string;
-
-  @Input()
-  public placeholder: string;
-
-  @Input()
-  public centerLabel: boolean = false;
-
-  @Input()
-  public useLeftIcon: boolean = false;
-
-  @Input()
-  public useRightIcon: boolean = false;
-
-  @Input()
-  public leftIconData: SafeHtml | undefined;
-
-  @Input()
-  public rightIconData: SafeHtml | undefined;
-
-  @Input()
-  public customCssClass: string;
-
-  @Output()
-  public modelChange: EventEmitter<string> = new EventEmitter<string>();
-
-  @Output()
-  public leftIconClick: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
-
-  @Output()
-  public rightIconClick: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
-
-  @Output()
-  public search: EventEmitter<string> = new EventEmitter<string>();
-
-  @Output()
-  public isFocused: EventEmitter<boolean> = new EventEmitter<boolean>();
-
-  @Output()
-  public barCodeScanned: EventEmitter<string> = new EventEmitter<string>();
-
-  @HostBinding('class.co-input-scanner')
-  public showClass() {
-    return true;
-  }
-
-  constructor(
-    private _scannerService: ScannerService,
-  ) {
-    this._scannerService.registerInput(this);
-  }
-
-  public triggerCodeScanned(code?: string): void {
-    this.model = code;
-    this.barCodeScanned.next(this.model);
-  }
-}

package/projects/corecomponents/src/lib/components/input-scanner/input-scanner.module.ts

@@ -1,19 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {InputScannerComponent} from './input-scanner.component';
-import {InputSearchModule} from '../input-search/input-search.module';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    InputSearchModule
-  ],
-  declarations: [
-    InputScannerComponent
-  ],
-  exports: [
-    InputScannerComponent
-  ]
-})
-export class InputScannerModule {
-}

package/projects/corecomponents/src/lib/components/input-scanner/scanner.service.ts

@@ -1,28 +0,0 @@
-import {Injectable, NgZone, OnDestroy} from '@angular/core';
-import {BarCodeScanner} from './bar-code-scanner';
-import {ScannerInput} from '../../interfaces/scanner-input.interface';
-
-@Injectable()
-export class ScannerService implements OnDestroy {
-    private _activeInput: ScannerInput;
-    private barCodeScanner: BarCodeScanner = new BarCodeScanner();
-
-    constructor(private _ngZone: NgZone) {
-        document.addEventListener("barcodescanned", this._barCodeScanned);
-    }
-
-    ngOnDestroy(): void {
-        document.removeEventListener("barcodescanned", this._barCodeScanned);
-        this.barCodeScanner.close();
-    }
-
-    public registerInput(input: ScannerInput): void {
-        this._activeInput = input;
-    }
-
-    private _barCodeScanned = (event: any) => {
-        if (this._activeInput) {
-            this._activeInput.triggerCodeScanned(event.detail);
-        }
-    }
-}