@colijnit/sharedcomponents 1.0.25 → 1.0.27

package/projects/sharedcomponents/src/lib/components/date-planning/component/calendar/calendar-all-years.component.ts

@@ -1,52 +0,0 @@
-import {Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation} from "@angular/core";
-
-@Component({
-  selector: "calendar-all-years",
-  template: `
-        <div *ngFor="let currentYear of years"
-             [textContent]="currentYear"
-             [class.selected-year]="currentYear === year"
-             class="pointer-hover"
-             (click)="year = currentYear; yearChange.emit(year)"
-        ></div>
-    `,
-  encapsulation: ViewEncapsulation.None
-})
-
-export class CalendarAllYearsComponent implements OnInit {
-
-  @Input()
-  public year: number;
-
-  @Output()
-  public readonly yearChange: EventEmitter<number> = new EventEmitter<number>();
-
-  public years: number[] = [];
-
-  constructor() {
-  }
-
-  ngOnInit(): void {
-    this.years.length = 0;
-    let start: number = this._determineStart();
-    const end: number = start + 11;
-    while (start < end) {
-      this.years.push(start);
-      start++;
-    }
-  }
-
-  private _determineStart(): number {
-    if (this.year > 0) {
-      let thisYear: number = this.year;
-      let thisYearLastDigit: number = parseInt(thisYear.toString().split("").pop());
-      while (thisYearLastDigit > 0) {
-        thisYear--;
-        thisYearLastDigit = parseInt(thisYear.toString().split("").pop());
-      }
-      return thisYear;
-    }
-    return 0;
-  }
-
-}

package/projects/sharedcomponents/src/lib/components/date-planning/component/calendar/calendar-header.component.ts

@@ -1,124 +0,0 @@
-import {Component, DoCheck, EventEmitter, Input, Output, ViewEncapsulation} from "@angular/core";
-import {animate, state, style, transition, trigger} from "@angular/animations";
-import {ALL_MONTHS} from "../../../../model/constant/all-months";
-import {Icon} from "../../../../enum/icon.enum";
-import {IconCacheService} from "../../../../service/icon-cache.service";
-
-@Component({
-  selector: "calendar-header",
-  template: `
-        <div #monthYearSelect class="calendar-header-row">
-            <co-icon class="pointer-hover" [iconData]="iconCacheService.getIcon(icons.ArrowPointLeft)" (click)="subMonth()"></co-icon>
-            <div (click)="showMonthYearSelect = true">
-                <div class="month" [textContent]="currentMonth"></div>
-                <div class="year" [textContent]="currentYear"></div>
-            </div>
-            <co-icon class="pointer-hover" [iconData]="iconCacheService.getIcon(icons.ArrowPointRight)" (click)="addMonth()"></co-icon>
-        </div>
-        <ng-template #template [absoluteOverlayTemplate]="template">
-            <div *ngIf="showMonthYearSelect"
-                 (clickOutside)="hideMonthYearSelection()" [alignWith]="monthYearSelect"
-                 class="select-month-year-window" [class.expanded]="expanded" @showMonthYearSelect
-                 [alignTopOffsetPx]="20"
-            >
-                <div>
-                    <calendar-all-months [month]="currentMonth" (monthChange)="setNewMonth($event)" shortDescriptions></calendar-all-months>
-                    <div class="vertical-divider"></div>
-                    <calendar-all-years [year]="currentYear" (yearChange)="setNewYear($event)"></calendar-all-years>
-                </div>
-                <default-ok-cancel-buttons
-                        (okClick)="changeMonthYear()"
-                        (cancelClick)="showMonthYearSelect = false"
-                >
-                </default-ok-cancel-buttons>
-            </div>
-        </ng-template>
-    `,
-  encapsulation: ViewEncapsulation.None,
-  animations: [
-    trigger("showMonthYearSelect", [
-      state("void", style({
-        "transform-origin": "top center",
-        transform: "scaleY(0)"
-      })),
-      state("*", style({
-        "transform-origin": "top center",
-        transform: "scaleY(1)"
-      })),
-      transition(":enter, :leave", [
-        animate("200ms ease-in-out")
-      ])
-    ])
-  ]
-})
-
-export class CalendarHeaderComponent implements DoCheck {
-
-  @Input()
-  public selectedDate: Date = new Date();
-
-  @Output()
-  public readonly selectedDateChange: EventEmitter<Date> = new EventEmitter<Date>();
-
-  public readonly icons: typeof Icon = Icon;
-
-  public showMonthYearSelect: boolean = false;
-
-  public expanded: boolean = false;
-
-  public currentMonth: string;
-
-  public currentYear: number;
-
-  public selectedMonth: number;
-
-  public selectedYear: number;
-
-  constructor(
-    public iconCacheService: IconCacheService
-  ) {
-  }
-
-  ngDoCheck(): void {
-    if (this.selectedDate) {
-      this.currentMonth = ALL_MONTHS[this.selectedDate.getMonth()];
-      this.currentYear = this.selectedDate.getFullYear();
-    }
-  }
-
-  public subMonth(): void {
-    const newDate: Date = new Date(this.selectedDate);
-    newDate.setMonth(newDate.getMonth() - 1);
-    this.selectedDate = newDate;
-    this.selectedDateChange.emit(this.selectedDate);
-  }
-
-  public addMonth(): void {
-    const newDate: Date = new Date(this.selectedDate);
-    newDate.setMonth(newDate.getMonth() + 1);
-    this.selectedDate = newDate;
-    this.selectedDateChange.emit(this.selectedDate);
-  }
-
-  public hideMonthYearSelection(): void {
-    this.expanded = false;
-    this.showMonthYearSelect = false;
-  }
-
-  public setNewMonth(month: number): void {
-    this.selectedMonth = month;
-  }
-
-  public setNewYear(year: number): void {
-    this.selectedYear = year;
-  }
-
-  public changeMonthYear(): void {
-    this.hideMonthYearSelection();
-    const newDate: Date = new Date(this.selectedDate);
-    newDate.setMonth(this.selectedMonth);
-    newDate.setFullYear(this.selectedYear);
-    this.selectedDate = newDate;
-    this.selectedDateChange.emit(this.selectedDate);
-  }
-}

package/projects/sharedcomponents/src/lib/components/date-planning/component/calendar/calendar-view.component.ts

@@ -1,201 +0,0 @@
-import {Component, EventEmitter, Inject, Input, LOCALE_ID, Output, ViewEncapsulation} from "@angular/core";
-import {ArrayNumberPipe} from "../../../../pipe/array-number.pipe";
-import {DatePipe} from "@angular/common";
-import {DateUtils} from "../../../../utils/date-utils";
-import {CalendarView} from "../../../../enum/calendar-view.enum";
-import {LanguageCode} from "../../../../enum/language-code.enum";
-
-type DateStamp = { day: number, inMonth: boolean, timestamp: number, week: number, selected: boolean };
-
-@Component({
-  selector: "calendar-view",
-  template: `
-        <div class="calendar-content">
-            <div>
-                <div class="week-day-header week-row">
-                    <div class="week-acronym"></div>
-                    <div *ngFor="let weekDay of weekDayLabel" [textContent]="weekDay | ucfirst"
-                         class="week-day-label"></div>
-                </div>
-                <div class="week-row" *ngFor="let week of weeks;trackBy:trackByWeek">
-                    <div [textContent]="week[0].week" class="week-number"></div>
-                    <div *ngFor="let date of week;trackBy:trackByStamp" class="week-day"
-                         (click)="onDateClick(date)" [textContent]="date.day"
-                         [class.in-month]="date.inMonth" [class.is-selected]="date.selected"
-                         [class.is-today]="date.timestamp === todayDayStamp"></div>
-                </div>
-            </div>
-        </div>
-    `,
-  encapsulation: ViewEncapsulation.None
-})
-//fixme we don't have a todayDayStamp field but our template references it
-export class CalendarViewComponent {
-
-  @Input()
-  public set view(value: CalendarView) {
-    this._view = value;
-    this._selectDays();
-  }
-
-  public get view(): CalendarView {
-    return this._view;
-  }
-
-  @Input()
-  public set selectedDate(value: Date) {
-    this._selectedDate = value;
-    this._selectedDate.setHours(0, 0, 0, 0);
-    this._prepareWeeks();
-  }
-
-  public get selectedDate(): Date {
-    return this._selectedDate;
-  }
-
-  @Output()
-  public selectedDateChange: EventEmitter<Date> = new EventEmitter<Date>();
-
-  public trackByStamp: Function = (index: number, stamp: DateStamp): number => {
-    return stamp && stamp.timestamp || index;
-  }
-
-  public trackByWeek: Function = (index: number, week: DateStamp[]): number => {
-    return week && week[0].week || index;
-  }
-
-  public weekDayLabel: string[] = [];
-
-  public weeks: DateStamp[][] = [];
-
-  private _selectedDate: Date = new Date();
-
-  private _view: CalendarView = CalendarView.WeekView;
-
-  constructor(
-    @Inject(LOCALE_ID) private readonly _locale: LanguageCode,
-  ) {
-    this.selectedDate.setHours(0, 0, 0, 0);
-    this._setLabels();
-  }
-
-  public onDateClick(date: DateStamp): void {
-    this.selectedDate = new Date(date.timestamp);
-    this.selectedDateChange.emit(this.selectedDate);
-    this._selectDays();
-  }
-
-  private _setLabels(): void {
-    const datePipe: DatePipe = new DatePipe(this._locale);
-
-    const currentDay: number = this.selectedDate.getDay();
-    const startWeekDate: Date = new Date(this.selectedDate.getTime());
-    startWeekDate.setDate(startWeekDate.getDate() - currentDay - 1);
-
-    this.weekDayLabel = new ArrayNumberPipe().transform(7).map(() => {
-      startWeekDate.setDate(startWeekDate.getDate() + 1);
-      return datePipe.transform(startWeekDate, "E");
-    });
-    this.weekDayLabel.push(this.weekDayLabel.shift());
-  }
-
-  private _prepareWeeks(): void {
-    this.weeks.length = 0;
-
-    const date: Date = new Date(this.selectedDate.getTime());
-    date.setHours(0, 0, 0, 0);
-
-    // go to last day of month
-    date.setMonth(date.getMonth() + 1);
-    date.setDate(0);
-    const monthEndDay: number = date.getDay();
-    const monthEndDate: number = date.getDate();
-
-    // days after end of month
-    const daysAfter: number = !monthEndDay ? 0 : 7 - monthEndDay;
-
-    // go to first day of month
-    date.setDate(1);
-    const monthBeginDay: number = date.getDay();
-
-    // days before start of month
-    const daysBefore: number = !monthBeginDay ? 6 : monthBeginDay - 1;
-
-    // go to start of calendar view
-    date.setDate(-daysBefore + 1);
-
-    // amount of weeks to display
-    const weekCount: number = Math.ceil((daysBefore + daysAfter + monthEndDate) / 7);
-    const weekStart: number = DateUtils.GetWeekNumber(date);
-    const weekEnd: number = weekStart + weekCount - 1;
-
-    // iterate over week count
-    for (let i: number = weekStart; i <= weekEnd; i++) {
-      let week: number = i;
-
-      // only recalculate week when it's necessary
-      if (weekStart > 50) {
-        week = DateUtils.GetWeekNumber(date);
-      }
-      const days: DateStamp[] = [];
-
-      // iterate over 7 days
-      for (let ii: number = 1; ii <= 7; ii++) {
-        // check if we are in the current month
-        let inMonth: boolean = true;
-        if (i === weekStart) {
-          inMonth = ii > daysBefore;
-        } else if (i === weekEnd) {
-          inMonth = ii <= 7 - daysAfter;
-        }
-
-        const timestamp: number = date.getTime();
-        // add dateStamp to date array
-        days.push({
-          week: week,
-          inMonth: inMonth,
-          day: date.getDate(),
-          timestamp: timestamp,
-          selected: this.selectedDate.getTime() === timestamp
-        });
-        // go one day further
-        date.setDate(date.getDate() + 1);
-      }
-      this.weeks.push(days);
-    }
-    this._selectDays();
-  }
-
-  private _selectDays(): void {
-    this._resetSelection();
-    if (!this.selectedDate) {
-      return;
-    }
-    const weekNumber: number = DateUtils.GetWeekNumber(this.selectedDate);
-    const len: number = this.weeks.length;
-    for (let i: number = 0; i < len; i++) {
-      const leni: number = this.weeks[i].length;
-      for (let ii: number = 0; ii < leni; ii++) {
-        if (this.weeks[i][ii].inMonth && this.view === CalendarView.MonthView) {
-          this.weeks[i][ii].selected = true;
-        } else if (this.weeks[i][ii].week === weekNumber && this.view === CalendarView.WeekView) {
-          this.weeks[i][ii].selected = true;
-        } else if (this.weeks[i][ii].timestamp === this.selectedDate.getTime() && this.view === CalendarView.WeekSelectView) {
-          this.weeks[i][ii].selected = true;
-        } else if (this.weeks[i][ii].timestamp === this.selectedDate.getTime() && this.view === CalendarView.DayView) {
-          this.weeks[i][ii].selected = true;
-        }
-      }
-    }
-  }
-
-  private _resetSelection(): void {
-    const len: number = this.weeks.length;
-    for (let i: number = 0; i < len; i++) {
-      const leni: number = this.weeks[i].length;
-      for (let ii: number = 0; ii < leni; ii++) {
-        this.weeks[i][ii].selected = false;
-      }
-    }
-  }
-}

package/projects/sharedcomponents/src/lib/components/date-planning/component/calendar/calendar.component.ts

@@ -1,35 +0,0 @@
-import {Component, EventEmitter, Input, Output, ViewEncapsulation} from "@angular/core";
-import {CalendarView} from "../../../../enum/calendar-view.enum";
-
-@Component({
-  selector: "calendar",
-  template: `
-        <div class="sc-calendar">
-          <calendar-header [selectedDate]="selectedDate" (selectedDateChange)="changeSelectedDate($event)"></calendar-header>
-          <calendar-view [view]="view" [selectedDate]="selectedDate" (selectedDateChange)="changeSelectedDate($event)"></calendar-view>
-        </div>
-    `,
-  encapsulation: ViewEncapsulation.None
-})
-export class CalendarComponent {
-
-  @Input()
-  public view: CalendarView = CalendarView.WeekView;
-
-  @Input()
-  public selectedDate: Date = new Date();
-
-  @Input()
-  public days: Date[] = [];
-
-  @Output()
-  public selectedDateChange: EventEmitter<Date> = new EventEmitter<Date>();
-
-  constructor() {
-  }
-
-  public changeSelectedDate(date: Date): void {
-    this.selectedDate = date;
-    this.selectedDateChange.emit(this.selectedDate);
-  }
-}

package/projects/sharedcomponents/src/lib/components/date-planning/date-planning.component.ts

@@ -1,133 +0,0 @@
-import {
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  EventEmitter,
-  Input,
-  Output,
-  Renderer2,
-  ViewChild,
-  ViewEncapsulation
-} from "@angular/core";
-import {animate, state, style, transition, trigger} from "@angular/animations";
-import {CalendarView} from "@syncfusion/ej2-angular-calendars";
-
-@Component({
-  selector: "sc-date-planning",
-  template: `
-    <div class="sc-agenda">
-      <div class="content-wrapper">
-        <calendar *ngIf="calendarNavigation"
-                  [view]="view"
-                  [(days)]="days"
-                  [selectedDate]="selectedDate" (selectedDateChange)="doChangeSelectedDate($event)"></calendar>
-        <div class="agenda-content-wrapper mini-scrollbar">
-          <div class="agenda-content">
-            <agenda-header [view]="view" (viewChange)="doChangeView($event)"
-                           [firstAvailableDate]="firstAvailableDate"
-                           [eventsPerDay]="eventsPerDay"
-                           [selectedDate]="selectedDate"
-                           (selectedDateChange)="doChangeSelectedDate($event)"
-                           (rangeChange)="doChangeSelectedDate($event, true)"></agenda-header>
-            <agenda-view [view]="view"
-                         [selectedDate]="selectedDate"
-                         [eventsPerDay]="eventsPerDay"
-                         (eventChecked)="eventChecked.emit($event)"></agenda-view>
-          </div>
-        </div>
-      </div>
-    </div>
-    <button-colijn *ngIf="showButton && eventsPerDay.length > 0" class="text-only select-agenda-button"
-                   [label]="buttonLabel"
-                   (click)="buttonClick.emit($event)">
-    </button-colijn>
-    `,
-  animations: [
-    trigger("showHideWindow", [
-      state("void", style({transform: "scaleY(0)"})),
-      state("*", style({transform: "scaleY(1)"})),
-      transition(":enter, :leave", [
-        animate("200ms ease-in-out")
-      ])
-    ])
-  ],
-  encapsulation: ViewEncapsulation.None
-})
-
-export class DatePlanningComponent {
-
-  @Input()
-  public calendarNavigation: boolean = false;
-
-  @Input()
-  public showButton: boolean = false;
-
-  @Input()
-  public selectedDate: Date;
-
-  @Input()
-  public firstAvailableDate: Date;
-
-  @Input()
-  public buttonLabel: string = "";
-
-  @Input()
-  public eventsPerDay: any = [];
-
-  @Input()
-  public view: CalendarView;
-
-  @Output()
-  public readonly eventChecked: EventEmitter<any> = new EventEmitter<any>();
-
-  @Output()
-  public readonly selectedDateChange: EventEmitter<Date> = new EventEmitter<Date>();
-
-  @Output()
-  public readonly rangeChange: EventEmitter<Date> = new EventEmitter<Date>();
-
-  @Output()
-  public readonly viewChange: EventEmitter<CalendarView> = new EventEmitter<CalendarView>();
-
-  @Output()
-  public readonly buttonClick: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
-
-  @ViewChild("dayStart", { static: true })
-  public dayStart: ElementRef;
-
-  public days: Date[] = [];
-  private _selectedDate: Date = new Date();
-
-  constructor(
-    private _changeDetector: ChangeDetectorRef,
-    private renderer: Renderer2
-  ) {
-  }
-
-  public doChangeSelectedDate(date: Date, rangeChanged: boolean = false): void {
-    this.selectedDate = new Date(date);
-    if (rangeChanged) {
-      this.rangeChange.next(this.selectedDate);
-    } else {
-      this.selectedDateChange.next(this.selectedDate);
-    }
-    this._changeDetector.detectChanges();
-  }
-
-  public doChangeView(view: CalendarView): void {
-    this.view = view;
-    this.viewChange.next(this.view);
-  }
-
-  public scrollToDayStart(): void {
-    if (this.dayStart !== undefined) {
-      const dayStart: any = this.renderer.selectRootElement("#dayStart");
-      if (dayStart) {
-        setTimeout(() => {
-          dayStart.scrollIntoView({behavior: "instant", block: "center"});
-        });
-      }
-    }
-  }
-
-}

package/projects/sharedcomponents/src/lib/components/date-planning/date-planning.module.ts

@@ -1,56 +0,0 @@
-import { NgModule } from "@angular/core";
-import { CommonModule } from "@angular/common";
-import {DatePlanningComponent} from "./date-planning.component";
-import {IconModule, InputDatePickerModule} from "@colijnit/corecomponents_v12";
-import {CalendarAllYearsComponent} from "./component/calendar/calendar-all-years.component";
-import {CalendarAllMonthsComponent} from "./component/calendar/calendar-all-months.component";
-import {CalendarHeaderComponent} from "./component/calendar/calendar-header.component";
-import {CalendarComponent} from "./component/calendar/calendar.component";
-import {CalendarViewComponent} from "./component/calendar/calendar-view.component";
-import {AgendaHeaderComponent} from "./component/agenda/agenda-header.component";
-import {AgendaViewComponent} from "./component/agenda/agenda-view.component";
-import {AgendaMonthViewComponent} from "./component/agenda/agenda-month-view.component";
-import {AgendaDayViewComponent} from "./component/agenda/agenda-day-view.component";
-import {AgendaWeekViewComponent} from "./component/agenda/agenda-week-view.component";
-import {AgendaWeekSelectViewComponent} from "./component/agenda/agenda-week-select-view.component";
-import {AgendaHourViewComponent} from "./component/agenda/agenda-hour-view.component";
-import {AgendaHourCellComponent} from "./component/agenda/agenda-hour-cell.component";
-import {AgendaHourViewLabelsComponent} from "./component/agenda/agenda-hour-view-labels.component";
-import {AgendaHalfHourCellComponent} from "./component/agenda/agenda-half-hour-cell.component";
-import {AgendaEventsComponent} from "./component/agenda/agenda-events.component";
-import {AgendaEventComponent} from "./component/agenda/agenda-event.component";
-import {MASTER_PIPES} from "../../pipe/master-pipes";
-
-@NgModule({
-  imports: [
-    CommonModule,
-    InputDatePickerModule,
-    IconModule,
-  ],
-  declarations: [
-    DatePlanningComponent,
-    CalendarAllYearsComponent,
-    CalendarAllMonthsComponent,
-    CalendarHeaderComponent,
-    CalendarComponent,
-    CalendarViewComponent,
-    AgendaHeaderComponent,
-    AgendaViewComponent,
-    AgendaMonthViewComponent,
-    AgendaDayViewComponent,
-    AgendaWeekViewComponent,
-    AgendaWeekSelectViewComponent,
-    AgendaHourViewComponent,
-    AgendaHourCellComponent,
-    AgendaHourViewLabelsComponent,
-    AgendaHalfHourCellComponent,
-    AgendaEventsComponent,
-    AgendaEventComponent,
-    MASTER_PIPES
-  ],
-  exports: [
-    DatePlanningComponent
-  ]
-})
-export class DatePlanningModule {
-}

package/projects/sharedcomponents/src/lib/components/docsign/component/signature/signature.component.ts

@@ -1,82 +0,0 @@
-import {Component, ElementRef, EventEmitter, HostBinding, Input, OnInit, Output, ViewChild, ViewEncapsulation} from "@angular/core";
-import SignaturePad from "signature_pad";
-
-@Component({
-  selector: "ione-signature",
-  template: `
-    <div class="signature-wrapper">
-      <div class="signature-header">
-        <span *ngIf="title" class="title" [textContent]="title"></span>
-        <div class="button-wrapper">
-          <input type="button" (click)="handleSave($event)" [value]="saveButtonLabel"/>
-          <input type="button" (click)="handleClear($event)" [value]="clearButtonLabel">
-        </div>
-      </div>
-      <div class="canvas">
-        <canvas #signature></canvas>
-      </div>
-    </div>
-  `,
-  encapsulation: ViewEncapsulation.None
-})
-export class SignatureComponent {
-  @ViewChild("signature", {read: ElementRef}) set content(content: ElementRef) {
-    if (content) {
-      this.signatureCanvas = content;
-      this._initCanvas();
-    }
-  }
-
-  @Input()
-  public title: string;
-
-  @Input()
-  public saveButtonLabel: string = 'SAVE';
-
-  @Input()
-  public clearButtonLabel: string = 'CLEAR';
-
-  @Output()
-  public save: EventEmitter<string> = new EventEmitter<string>();
-
-  @HostBinding("class.ione-signature")
-  public showClass() {
-    return true;
-  }
-
-  public signature: SignaturePad;
-  public signatureCanvas: ElementRef;
-
-  public handleSave(event: MouseEvent): void {
-    // save canvas as svg
-    // const sig: string = this.signature.toDataURL("image/svg+xml");
-    const sig: string = this.signature.toDataURL("image/png");
-    // emit signature string
-    this.save.next(sig);
-  }
-
-  public handleClear(event: MouseEvent): void {
-    if (this.signature) {
-      this.signature.clear();
-    }
-  }
-
-  private _initCanvas(): void {
-    if (this.signatureCanvas && this.signatureCanvas.nativeElement) {
-      this.signature = new SignaturePad(this.signatureCanvas.nativeElement);
-      setTimeout(() => {
-        this._resizeSignatureCanvas(this.signature, this.signatureCanvas);
-      });
-    }
-  }
-
-  private _resizeSignatureCanvas(signature: SignaturePad, signatureCanvas: ElementRef): void {
-    const imageBeforeResize: string = signature.toDataURL();
-    const ratio: number = Math.max(window.devicePixelRatio || 1, 1);
-    signatureCanvas.nativeElement.width = signatureCanvas.nativeElement.offsetWidth * ratio;
-    signatureCanvas.nativeElement.height = signatureCanvas.nativeElement.offsetHeight * ratio;
-    signatureCanvas.nativeElement.getContext("2d").scale(ratio, ratio);
-    signature.fromDataURL(imageBeforeResize);
-  }
-
-}