@colijnit/corecomponents_v12 255.1.1 → 255.1.2

package/projects/corecomponents/src/lib/components/image/image.component.ts

@@ -1,51 +0,0 @@
-import {Component, HostBinding, Input, OnInit, ViewEncapsulation} from '@angular/core';
-import {DomSanitizer, SafeHtml} from '@angular/platform-browser';
-
-@Component({
-    selector: "co-image",
-    template: `
-        <ng-container *ngIf="!error">
-            <img *ngIf="!!source" [src]="source" (error)="handleImageError($event)">
-        </ng-container>
-        <ng-container *ngIf="error || !source">
-            <div class="no-image-wrapper">
-                <co-icon [iconData]="innerPlaceHolder"></co-icon>
-                <span [textContent]="'geen afbeelding'"></span>
-            </div>
-        </ng-container>
-    `,
-    encapsulation: ViewEncapsulation.None
-})
-export class ImageComponent implements OnInit {
-    /**
-     * Source of the image, can be an URL or a base64 data string
-      */
-    @Input()
-    public source: string;
-
-    /**
-     * Placeholder svg source to show when there is no image
-     */
-    @Input()
-    public placeHolder: string;
-
-    @HostBinding("class.co-image")
-    public showClass: boolean = true;
-
-    public error: boolean = false;
-    public innerPlaceHolder: SafeHtml | undefined;
-
-    private _defaultPlaceholder: string = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path d="M35,18l-3-4H22l-3,4H16V36H40V18ZM24,16h6v2H24Zm2.5,18A6.5,6.5,0,1,1,33,27.5,6.51,6.51,0,0,1,26.5,34ZM38,22H36V20h2Z" fill="#484f60"/><rect x="10" y="18" width="5" height="18" fill="#484f60"/><rect x="11" y="15" width="3" height="2" fill="#484f60"/><path d="M26.5,32A4.5,4.5,0,1,1,31,27.5,4.51,4.51,0,0,1,26.5,32Z" fill="#484f60"/></svg>';
-
-    constructor(private _sanitizer: DomSanitizer) {
-
-    }
-
-    ngOnInit() {
-        this.innerPlaceHolder = this._sanitizer.bypassSecurityTrustHtml(this.placeHolder ? this.placeHolder : this._defaultPlaceholder);
-    }
-
-    public handleImageError(event: any): void {
-        this.error = true;
-    }
-}

package/projects/corecomponents/src/lib/components/image/image.module.ts

@@ -1,12 +0,0 @@
-import {NgModule} from "@angular/core";
-import {CommonModule} from "@angular/common";
-import {ImageComponent} from "./image.component";
-import {IconModule} from '../icon/icon.module';
-
-@NgModule({
-    imports: [CommonModule, IconModule],
-    declarations: [ImageComponent],
-    exports: [ImageComponent]
-})
-export class ImageModule {
-}

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

@@ -1,85 +0,0 @@
-import {
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    ComponentFactoryResolver,
-    ElementRef,
-    EventEmitter,
-    forwardRef,
-    HostBinding, HostListener,
-    Input,
-    Optional,
-    Output,
-    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 {IconCacheService} from '../icon/icon-cache.service';
-import {OverlayService} from '../../service/overlay.service';
-
-@Component({
-    selector: 'co-input-checkbox',
-    template: `
-        <div class="checkbox" (click)="handleModelChange($event)" [class.checked]="model">
-            <div class="checkmark" [class.show]="model"></div>
-        </div>
-        <div class="label" [class.clickable]="clickableLabel" *ngIf="label" [textContent]="label"
-             (click)="clickableLabel ? handleModelChange($event) : true"></div>
-        <input #input [ngModel]="model" [readonly]="readonly" [disabled]="disabled" type="hidden">
-    `,
-    providers: [
-        OverlayService,
-        {
-            provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
-            useExisting: forwardRef(() => InputCheckboxComponent)
-        }, {
-            provide: BaseInputComponent,
-            useExisting: InputCheckboxComponent
-        }],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    encapsulation: ViewEncapsulation.None
-})
-export class InputCheckboxComponent extends BaseInputComponent<boolean> {
-    @Input()
-    public cssClass: string;
-
-    @Input()
-    public clickableLabel: boolean = true;
-
-    @Output()
-    public modelChange: EventEmitter<boolean> = new EventEmitter<boolean>();
-
-    @HostBinding('class.co-input-checkbox')
-    public showClass() {
-        return true;
-    }
-
-    @HostListener('click', ['$event'])
-    public handleClick(event: MouseEvent) {
-        this.handleModelChange(event);
-    }
-
-    constructor(
-        @Optional() public formComponent: FormComponent,
-        public iconCacheService: IconCacheService,
-        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);
-    }
-
-    public handleModelChange(event: MouseEvent): void {
-        event.preventDefault();
-        event.stopPropagation();
-        if (!this.readonly && !this.disabled) {
-            this.setModel(!this.model);
-        }
-    }
-}

package/projects/corecomponents/src/lib/components/input-checkbox/input-checkbox.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 { InputCheckboxComponent } from './input-checkbox.component';
-
-@NgModule({
-    imports: [
-        BaseModule,
-        CommonModule,
-        FormsModule
-    ],
-    declarations: [InputCheckboxComponent],
-    exports: [InputCheckboxComponent]
-})
-export class InputCheckboxModule {
-}

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

@@ -1,103 +0,0 @@
-import {
-  Component,
-  ComponentRef,
-  forwardRef,
-  HostBinding,
-  ViewEncapsulation
-} from '@angular/core';
-import {SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME} from '../../interfaces/screen-config-adapter-component-interface-name';
-import {OverlayService} from '../../service/overlay.service';
-import {BaseInputDatePickerDirective} from "../base-input-date-picker/base-input-date-picker.directive";
-import {CalendarComponent} from "../calendar/calendar.component";
-
-@Component({
-    selector: 'co-input-date',
-    template: `
-      <co-input-text (clickOutside)="toggleCalendar(false)" overlayParent #parentForOverlay="overlayParent"
-                     [hidden]="hidden"
-                     [readonly]="readonly"
-                     [(model)]="modelAsString"
-                     [rightIcon]="rightIcon"
-                     [leftIcon]="leftIcon"
-                     [leftIconData]="leftIconData"
-                     [pattern]="'yyyy-MM-dd'"
-                     [type]="'date'"
-                     [placeholder]="placeholder"
-                     (leftIconClick)="leftIconClick.emit($event)"
-                     (rightIconClick)="toggleCalendar(true)"
-                     (blur)="handleDateChange(modelAsString)"
-                     (clearIconClick)="handleClearIconClicked()"
-      ></co-input-text>
-    `,
-    providers: [
-        OverlayService, {
-            provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME, useExisting: forwardRef(() => InputDatePickerComponent)
-        }, {
-            provide: BaseInputDatePickerDirective,
-            useExisting: InputDatePickerComponent
-        }],
-    encapsulation: ViewEncapsulation.None
-})
-export class InputDatePickerComponent extends BaseInputDatePickerDirective {
-
-  public modelAsString: string;
-
-  private _calendarComponentRef: ComponentRef<CalendarComponent>;
-
-    @HostBinding('class.co-input-date')
-    public showClass() {
-        return true;
-    }
-
-  public handleDateSelected(date: Date): void {
-    this.setModel(date);
-    if (this.closeAfterDateSelection) {
-      this.toggleCalendar(false);
-    }
-  }
-
-  public toggleCalendar(show: boolean): void {
-    if (this.readonly) {
-      return;
-    }
-
-    this.showCalendar = show;
-
-    if (this.showCalendar) {
-      this._calendarComponentRef = this.overlayService.createComponent(CalendarComponent, {
-        parentForOverlay: this.parentForOverlay,
-        selectedDate: this.model
-      }, {
-        dateSelected: (event) => this.handleDateSelected(event),
-        clickedOutside: () => this.toggleCalendar(false)
-      });
-    } else {
-      this.overlayService.removeComponent(this._calendarComponentRef);
-    }
-  }
-
-  public handleDateChange(value: string): void {
-    if (value) {
-        this.setModel(new Date(value));
-    }
-  }
-
-  protected modelSet(): void {
-      this.setModelAsString();
-  }
-
-  private setModelAsString(): void {
-    if (this.model) {
-      const year = this.model.toLocaleString("default", { year: "numeric" });
-      const month = this.model.toLocaleString("default", { month: "2-digit" });
-      const day = this.model.toLocaleString("default", { day: "2-digit" });
-      this.modelAsString = `${year}-${month}-${day}`;
-    } else {
-      this.modelAsString = null;
-    }
-  }
-
-  public handleClearIconClicked() {
-      this.setModel(undefined);
-  }
-}

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

@@ -1,24 +0,0 @@
-import {NgModule, NO_ERRORS_SCHEMA} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { InputDatePickerComponent } from './input-date-picker.component';
-import {OverlayModule} from '../../directives/overlay/overlay.module';
-import {InputTextModule} from "../input-text/input-text.module";
-import {CalendarModule} from "../calendar/calendar.module";
-import {ClickoutsideModule} from "../../directives/clickoutside/clickoutside.module";
-
-@NgModule({
-    imports: [
-      CommonModule,
-      InputTextModule,
-      CalendarModule,
-      ClickoutsideModule,
-      OverlayModule
-    ],
-    schemas: [
-        NO_ERRORS_SCHEMA
-    ],
-    declarations: [InputDatePickerComponent],
-    exports: [InputDatePickerComponent]
-})
-export class InputDatePickerModule {
-}

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

@@ -1,155 +0,0 @@
-import {
-  Component,
-  ComponentRef, ElementRef,
-  EventEmitter,
-  forwardRef,
-  HostBinding,
-  Input,
-  Output,
-  ViewChild,
-  ViewEncapsulation
-} from '@angular/core';
-import {BaseInputComponent} from '../base/base-input.component';
-import {
-    SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME
-} from '../../interfaces/screen-config-adapter-component-interface-name';
-import {OverlayService} from '../../service/overlay.service';
-import {BaseInputDatePickerDirective} from "../base-input-date-picker/base-input-date-picker.directive";
-import {DoubleCalendarComponent} from "../double-calendar/double-calendar.component";
-
-@Component({
-    selector: 'co-input-date-range',
-    template: `
-      <div class="inputs-wrapper" overlayParent #parentForOverlay="overlayParent">
-        <co-input-text #firstInput class="no-focus-line custom-height"
-                       [(model)]="firstDateAsString"
-                       [noClickFocus]="true"
-                       [pattern]="'yyyy-MM-dd'"
-                       [type]="'date'"
-                       [leftIcon]="leftIcon"
-                       [leftIconData]="leftIconData"
-                       [placeholder]="placeholder"
-                       (blur)="handleFirstDateChanged(firstDateAsString)"
-                       (clearIconClick)="clearDate(0)"
-                       (click)="handleFirstInputClick($event)"
-        ></co-input-text>
-        <co-input-text #secondInput class="no-focus-line custom-height"
-                       [(model)]= "secondDateAsString"
-                       [noClickFocus]="true"
-                       [pattern]="'yyyy-MM-dd'"
-                       [type]="'date'"
-                       [rightIcon]="rightIcon"
-                       (rightIconClick)="toggleCalendar()"
-                       (blur)="handleSecondDateChanged(secondDateAsString)"
-                       (clearIconClick)="clearDate(1)"
-                       (click)="handleSecondInputClick($event)"
-        ></co-input-text>
-      </div>
-    `,
-    providers: [
-        OverlayService,
-        {
-            provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
-            useExisting: forwardRef(() => InputDateRangePickerComponent)
-        }, {
-            provide: BaseInputDatePickerDirective,
-            useExisting: InputDateRangePickerComponent
-        }],
-    encapsulation: ViewEncapsulation.None
-})
-export class InputDateRangePickerComponent extends BaseInputDatePickerDirective {
-
-  public firstDateAsString;
-  public secondDateAsString;
-
-  private _doubleCalendarComponentRef: ComponentRef<DoubleCalendarComponent>;
-
-  @ViewChild('firstInput') firstInput: ElementRef;
-  @ViewChild('secondInput') secondInput: ElementRef;
-    @HostBinding('class.co-input-date-range')
-    public showClass(): boolean {
-        return true;
-    }
-  handleFirstInputClick(event: Event): void {
-    event.stopPropagation();
-  }
-
-  handleSecondInputClick(event: Event): void {
-    event.stopPropagation();
-  }
-  public handleDatesSelected(dates: Date[]): void {
-    this.setModel(dates);
-  }
-
-  public handleSecondDateSelected(): void {
-    if (this.closeAfterDateSelection) {
-      this.toggleCalendar();
-    }
-  }
-
-  public clearDate(index: number): void {
-      this.model[index] = undefined;
-  }
-
-  public toggleCalendar(): void {
-    if (this.readonly) {
-      return;
-    }
-
-    this.showCalendar = !this.showCalendar;
-
-    if (this.showCalendar) {
-      this._doubleCalendarComponentRef = this.overlayService.createComponent(DoubleCalendarComponent, {
-        parentForOverlay: this.parentForOverlay,
-        selectedDates: this.model
-      }, {
-        datesSelected: (event) => this.handleDatesSelected(event),
-        secondDateSelected: () => this.handleSecondDateSelected(),
-        clickedOutside: () => this.toggleCalendar()
-      });
-    } else {
-      this.overlayService.removeComponent(this._doubleCalendarComponentRef);
-    }
-  }
-
-  public handleFirstDateChanged(value: string): void {
-    if (value) {
-      if (!this.model) {
-        this.setModel([]);
-      }
-      this.setModel([new Date(value), this.model[1] ? this.model[1] : null]);
-    }
-  }
-
-  public handleSecondDateChanged(value: string): void {
-    if (value) {
-      if (!this.model) {
-        this.setModel([]);
-      }
-      this.setModel([this.model[0] ? this.model[0] : null, new Date(value)]);
-    }
-  }
-
-  protected modelSet(): void {
-    this.setModelAsString();
-  }
-
-  private setModelAsString(): void {
-    if (this.model[0]) {
-      const year = this.model[0].toLocaleString("default", { year: "numeric" });
-      const month = this.model[0].toLocaleString("default", { month: "2-digit" });
-      const day = this.model[0].toLocaleString("default", { day: "2-digit" });
-      this.firstDateAsString = `${year}-${month}-${day}`;
-    } else {
-      this.firstDateAsString = ``;
-    }
-    if (this.model[1]) {
-      const year = this.model[1].toLocaleString("default", { year: "numeric" });
-      const month = this.model[1].toLocaleString("default", { month: "2-digit" });
-      const day = this.model[1].toLocaleString("default", { day: "2-digit" });
-      this.secondDateAsString = `${year}-${month}-${day}`;
-    } else {
-      this.secondDateAsString = ``;
-    }
-  }
-}

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

@@ -1,25 +0,0 @@
-import {NgModule} from "@angular/core";
-import {InputDateRangePickerComponent} from "./input-date-range-picker.component";
-import {OverlayModule} from '../../directives/overlay/overlay.module';
-import {CommonModule} from "@angular/common";
-import {InputTextModule} from "../input-text/input-text.module";
-import {ClickoutsideModule} from "../../directives/clickoutside/clickoutside.module";
-import {DoubleCalendarModule} from "../double-calendar/double-calendar.module";
-
-@NgModule({
-    imports: [
-      CommonModule,
-      InputTextModule,
-      ClickoutsideModule,
-      OverlayModule,
-      DoubleCalendarModule
-    ],
-    declarations: [
-      InputDateRangePickerComponent
-    ],
-    exports: [
-      InputDateRangePickerComponent
-    ]
-})
-export class InputDateRangePickerModule {
-}