@colijnit/corecomponents_v12 12.2.23 → 12.2.25

package/projects/corecomponents/src/lib/components/calendar/calendar-template.component.ts

@@ -0,0 +1,392 @@
+import {Component, ElementRef, EventEmitter, HostBinding, Input, Output, ViewEncapsulation} from "@angular/core";
+import {CoreComponentsIcon} from "../../core/enum/core-components-icon.enum";
+
+@Component({
+  selector: "calendar-template",
+  template: `
+      <div class="calendar">
+        <div class="calendar-header" *ngIf="monthSelection || yearSelection">
+          <co-icon class="calendar-change-month-button" [icon]="icons.ArrowPointLeft" (click)="prevMonth()"></co-icon>
+
+          <div class="calendar-header-title-wrapper">
+            <span class="calendar-header-title" [textContent]="monthSelection ? monthHeader : yearHeader"
+                  (click)="monthSelection ? openMonthSelection() : openYearSelection()"
+            ></span>
+          </div>
+
+          <co-icon class="calendar-change-month-button" [icon]="icons.ArrowPointRight" (click)="nextMonth()"></co-icon>
+        </div>
+
+        <div class="selection-grid month" *ngIf="showMonthSelection">
+          <div *ngFor="let month of monthSelectionNames"
+               class="calendar-month-or-year"
+               (click)="selectMonth(month)">
+            <ng-container *ngIf="month">
+              <div class="month" [textContent]="month"></div>
+            </ng-container>
+          </div>
+        </div>
+
+        <div class="selection-grid year" *ngIf="showYearSelection">
+          <div *ngFor="let year of yearSelectionYears"
+               class="calendar-month-or-year"
+               (click)="selectYear(year)"
+               [textContent]="year">
+            <ng-container *ngIf="year">
+              <div class="year" [textContent]="year"></div>
+            </ng-container>
+          </div>
+        </div>
+        <div class="calendar-wrapper">
+          <div class="week-wrapper" *ngIf="showWeekNumbers && showCalendarBody">
+            <div class="week-number" [textContent]="'W'"></div>
+            <div class="week-number" *ngFor="let weekNumber of weekNumbers">
+              {{ weekNumber }}
+            </div>
+          </div>
+          <div class="calendar-body" *ngIf="showCalendarBody">
+            <div class="day-names">
+              <div class="weekday" *ngFor="let dayName of dayNames" [textContent]="dayName"></div>
+            </div>
+            <div *ngFor="let day of daysInMonth" class="calendar-day"
+                 [class.highlighted-day]="daysToHighlight.includes(day)"
+                 [class.selected-day]="selectedDate && (day && day.getTime() === selectedDate.getTime()) ||
+            secondSelectedDate && (day && day.getTime() === secondSelectedDate.getTime()) ||
+            temporarySelectedSecondaryDate && (day && day.getTime() === temporarySelectedSecondaryDate.getTime())"
+                 (click)="selectDate(day)"
+                 (mouseover)="handleMouseOverDay(day)">
+              <!-- Day number -->
+              <ng-container *ngIf="day">
+                <div class="day-number" [textContent]="day.getDate()"></div>
+              </ng-container>
+            </div>
+          </div>
+        </div>
+      </div>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class CalendarTemplateComponent {
+  public readonly icons: typeof CoreComponentsIcon = CoreComponentsIcon;
+
+  @Input()
+  public showWeekNumbers: boolean = true;
+
+  public weekNumbers: number[] = [];
+  @Input()
+  public locale: string = "nl-NL";
+
+  @Input()
+  public highlightDaysBetweenDates: boolean = false;
+
+  @Input()
+  public set selectedDate(date: Date) {
+    this._selectedDate = !!date ? new Date(date.getFullYear(), date.getMonth(), date.getDate()) : date;
+    if (this.secondSelectedDate && date && this.secondSelectedDate.getTime() < this.selectedDate.getTime() && this.temporarySelectedSecondaryDate) {
+      this.daysToHighlight = [];
+    }
+  }
+
+  public get selectedDate(): Date {
+    return this._selectedDate;
+  }
+
+  @Input()
+  public set secondSelectedDate(date: Date) {
+    this._secondSelectedDate = !!date ? new Date(date.getFullYear(), date.getMonth(), date.getDate()) : date;
+    if (!this.selectedDate) {
+      this.daysToHighlight = [];
+    } else {
+      this._fillDatesBetweenSelected();
+    }
+  }
+
+  public get secondSelectedDate(): Date {
+    return this._secondSelectedDate;
+  }
+
+  @Input()
+  public set secondHoveringDate(date : Date) {
+    this._secondHoveringDate = date;
+    if (!!date) {
+      this.temporarySelectedSecondaryDate = null;
+    }
+    if (this.selectedDate && !this.secondSelectedDate) {
+      this.temporarySelectedSecondaryDate = new Date(date);
+    }
+    this.handleMouseOverDay(date);
+  }
+
+  public get secondHoveringDate(): Date {
+    return this._secondHoveringDate;
+  }
+
+  @Output()
+  public dateSelected: EventEmitter<Date> = new EventEmitter<Date>();
+
+  @Output()
+  public hoveringDate: EventEmitter<Date> = new EventEmitter<Date>();
+
+  public showCalendarBody: boolean = true;
+  public showMonthSelection: boolean = false;
+  public showYearSelection: boolean = false;
+  public showSelectedMonth: string;
+
+  public workingDay: Date;
+  public workingYear: number;
+  public workingMonth: number;
+
+  public monthHeader: string = '';
+  public yearHeader: string = '';
+
+  public monthSelection: boolean = true;
+  public yearSelection: boolean = false;
+
+  public dayNames = [];
+  public monthNames = [];
+  public monthSelectionNames: string[] = [];
+  public yearSelectionYears: number[] = [];
+  public daysInMonth: Date[] = [];
+
+  public daysUnixTimestamps: number[] = [];
+  public daysToHighlight: Date[] = [];
+  public temporarySelectedSecondaryDate: Date;
+
+  private _secondHoveringDate: Date;
+  private _secondSelectedDate: Date;
+  private _selectedDate: Date;
+
+  @HostBinding("class.calendar-template")
+  public showClass() {
+    return true;
+  }
+
+  public ngOnInit(): void {
+    this._setInitialValues();
+    this.generateMonthNames();
+    this.generateCalendar();
+    this._fillDatesBetweenSelected();
+  }
+
+  public prevMonth(): void {
+    if (this.workingMonth === 0) {
+      this.workingMonth = 11;
+      this.workingYear--;
+    } else {
+      this.workingMonth--;
+    }
+    this.generateCalendar();
+    this._fillDatesBetweenSelected();
+    this.calculateWeekNumbers();
+  }
+
+  public nextMonth(): void {
+    if (this.workingMonth === 11) {
+      this.workingMonth = 0;
+      this.workingYear++;
+    } else {
+      this.workingMonth++;
+    }
+    this.generateCalendar();
+    this._fillDatesBetweenSelected();
+    this.calculateWeekNumbers();
+  }
+
+  public prevYear(): void {
+    this.workingYear--;
+    this.generateCalendar();
+  }
+
+  public nextYear(): void {
+    this.workingYear++;
+    this.generateCalendar();
+  }
+
+  public generateCalendar(): void {
+    this._setMonthDaysForDate(this.workingMonth);
+
+    // Update the displayed month
+    const month = this.monthNames[this.workingMonth];
+    const year = this.workingYear;
+
+    // Update headerText
+    this.monthHeader = `${month} ${year}`;
+    this.yearHeader = `${year}`;
+
+    this.generateYearSelectionYears();
+    this.calculateWeekNumbers();
+  }
+
+  private _setInitialValues(): void {
+    this.workingDay = this.selectedDate ? this.selectedDate : new Date();
+    this.workingYear = this.workingDay.getFullYear();
+    this.workingMonth = this.workingDay.getMonth();
+  }
+
+  private _setMonthDaysForDate(monthNumber: number): void {
+    this.daysInMonth = [];
+
+    const firstDayOfMonth = new Date(this.workingYear, monthNumber, 0).getDay();
+    const lastDayOfMonth = new Date(this.workingYear, monthNumber + 1, 0).getDate();
+
+    // Add null values to the beginning of the array to align the first day with the correct day of the week
+    for (let i = 0; i < firstDayOfMonth; i++) {
+      this.daysInMonth.push(null);
+    }
+
+    // Add the days of the current month to the array
+    for (let i = 1; i <= lastDayOfMonth; i++) {
+      const date = new Date(this.workingYear, this.workingMonth, i);
+      this.daysInMonth.push(date);
+    }
+
+    // Add null values to the end of the array to fill out the grid
+    // const remainingCells = 42 - this.daysInMonth.length;
+    // for (let i = 0; i < remainingCells; i++) {
+    //   this.daysInMonth.push(null);
+    // }
+
+    this.daysUnixTimestamps = this.daysInMonth.map(day => { return day ? day.getTime() : undefined });
+  }
+
+  public generateYearSelectionYears(): void {
+    const pastYears = 5;
+    const futureYears = 3;
+    const years = [];
+
+    for (let i = pastYears; i >= 1; i--) {
+
+      years.push(this.workingYear - i);
+    }
+
+    years.push(this.workingYear);
+
+    for (let i = 1; i <= futureYears; i++) {
+      years.push(this.workingYear + i);
+    }
+
+    this.yearSelectionYears = years.reverse();
+  }
+
+  public openMonthSelection(): void {
+    this.showCalendarBody = false;
+    this.monthSelection = false;
+    this.yearSelection = true;
+    this.showMonthSelection = true;
+  }
+
+  public openYearSelection(): void {
+    this.showMonthSelection = false;
+    this.showYearSelection = true;
+  }
+
+  public selectDate(day: Date): void {
+    this.selectedDate = day;
+    this._fillDatesBetweenSelected();
+    this.dateSelected.emit(new Date(this.selectedDate));
+  }
+
+  public selectMonth(month: string): void {
+    this.showSelectedMonth = month;
+    this.workingMonth = this.monthSelectionNames.indexOf(month);
+    this.showMonthSelection = false;
+    this.yearSelection = false;
+    this.monthSelection = true;
+    this.showCalendarBody = true;
+    this.generateCalendar();
+  }
+
+  public selectYear(year: number): void {
+    this.workingYear = year;
+    this.showYearSelection = false;
+    this.showMonthSelection = true;
+    this.generateCalendar();
+  }
+
+  public generateMonthNames(): void {
+    for (let i = 0; i < 12; i++) {
+      const date = new Date(2000, i, 1);
+      const monthNameShort = date.toLocaleString(this.locale, {month: 'short'});
+      const monthNameFull = date.toLocaleString(this.locale, {month: 'long'});
+      this.monthSelectionNames.push(this._capitalizeFirstLetter(monthNameShort));
+      this.monthNames.push(this._capitalizeFirstLetter(monthNameFull));
+    }
+
+    for (let i = 1; i <= 7; i++) {
+      const date = new Date(2018, 0, i);
+      const weekdayName = date.toLocaleString(this.locale, { weekday: 'short' });
+      this.dayNames.push(this._capitalizeFirstLetter(weekdayName));
+    }
+  }
+
+  public handleMouseOverDay(day: Date): void {
+    if (this.highlightDaysBetweenDates && day && (this.selectedDate || this.secondSelectedDate) && !(this.selectedDate && this.secondSelectedDate) && !(this.selectedDate && !this.temporarySelectedSecondaryDate && !this.secondSelectedDate)) {
+      this.daysToHighlight = [];
+      if (this.daysUnixTimestamps.includes(day.getTime())) {
+        this.daysToHighlight.push(...this.daysInMonth.map((dayInMonth: Date) => {
+          if (this.selectedDate) {
+            if (dayInMonth &&
+              // day in the month is after selected date and day in the month is before the hovering day
+              (dayInMonth.getTime() > this.selectedDate.getTime() && dayInMonth.getTime() < day.getTime()) ||
+              // second date is after selected date and day in the month is before hovering day and day in month is after selected date
+              (this._secondHoveringDate && this._secondHoveringDate.getTime() > this.selectedDate.getTime() && day && dayInMonth && dayInMonth.getTime() < day.getTime() && dayInMonth.getTime() > this.selectedDate.getTime())) {
+              return dayInMonth;
+            }
+          } else {
+            if (dayInMonth &&
+              // day in the month is after second date and day in the month is before the hovering day
+              (dayInMonth.getTime() > this.secondSelectedDate.getTime() && dayInMonth.getTime() < day.getTime())) {
+              return dayInMonth;
+            }
+          }
+        }));
+      } else {
+        this.daysToHighlight.push(...this.daysInMonth.map((day) => {
+          if (day > this.selectedDate) {
+            return day;
+          }
+        }));
+      }
+    }
+    this.hoveringDate.next(day);
+  }
+
+  private _fillDatesBetweenSelected(): void {
+    if (this.selectedDate && this.secondSelectedDate) {
+      this.daysToHighlight = [];
+      this.daysToHighlight.push(...this.daysInMonth.map((dayInMonth: Date) => {
+        if (dayInMonth && (dayInMonth > this.selectedDate && dayInMonth < this.secondSelectedDate) || (dayInMonth > this.secondSelectedDate && dayInMonth < this.selectedDate)) {
+          return dayInMonth;
+        }
+      }));
+    }
+  }
+
+  private _capitalizeFirstLetter(value: string): string {
+    return value.charAt(0).toUpperCase() + value.slice(1);
+  }
+  private calculateWeekNumbers(): void {
+    this.weekNumbers = [];
+    let weekNumber: number | null = null;
+    for (let i = 0; i < this.daysInMonth.length; i++) {
+      const day = this.daysInMonth[i];
+      if (day) {
+          // Start of a new week or first day of the month, calculate and set weekNumber
+          weekNumber = this.getISOWeek(day);
+          // Check if the weekNumber is not already in the array
+          if (!this.weekNumbers.includes(weekNumber)) {
+            this.weekNumbers.push(weekNumber);
+          }
+      }
+    }
+  }
+
+
+  public getISOWeek(date: Date): number {
+      const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
+      d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7));
+      const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
+      const weekNumber = Math.ceil(((d.valueOf() - yearStart.valueOf()) / 86400000 + 1) / 7);
+      return weekNumber;
+  }
+}

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

@@ -0,0 +1,54 @@
+import {Component, ElementRef, EventEmitter, HostBinding, Input, Output, ViewEncapsulation} from "@angular/core";
+
+@Component({
+  selector: "co-calendar",
+  template: `
+    <div class="date-picker-container" [overlay]="parentForOverlay" (clickOutside)="clickedOutside.next()">
+      <calendar-template
+        [locale]="locale"
+        [highlightDaysBetweenDates]="highlightDaysBetweenDates"
+        [selectedDate]="selectedDate"
+        [secondSelectedDate]="secondSelectedDate"
+        [secondHoveringDate]="secondHoveringDate"
+        (dateSelected)="dateSelected.next($event)"
+        (hoveringDate)="hoveringDate.next($event)"
+      ></calendar-template>
+    </div>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class CalendarComponent {
+
+  @Input()
+  public locale: string = "nl-NL";
+
+  @Input()
+  public parentForOverlay: ElementRef;
+
+  @Input()
+  public highlightDaysBetweenDates: boolean = false;
+
+  @Input()
+  public selectedDate: Date;
+
+  @Input()
+  public secondSelectedDate: Date;
+
+  @Input()
+  public secondHoveringDate: Date;
+
+  @Output()
+  public dateSelected: EventEmitter<Date> = new EventEmitter<Date>();
+
+  @Output()
+  public hoveringDate: EventEmitter<Date> = new EventEmitter<Date>();
+
+  @Output()
+  public clickedOutside: EventEmitter<void> = new EventEmitter<void>();
+
+  @HostBinding("class.co-calendar")
+  public showClass() {
+    return true;
+  }
+
+}

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

@@ -0,0 +1,26 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {CalendarComponent} from "./calendar.component";
+import {IconModule} from "../icon/icon.module";
+import {OverlayModule} from "../../directives/overlay/overlay.module";
+import {ClickoutsideModule} from "../../directives/clickoutside/clickoutside.module";
+import {CalendarTemplateComponent} from "./calendar-template.component";
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IconModule,
+    OverlayModule,
+    ClickoutsideModule
+  ],
+  declarations: [
+    CalendarComponent,
+    CalendarTemplateComponent
+  ],
+  exports: [
+    CalendarComponent,
+    CalendarTemplateComponent
+  ]
+})
+export class CalendarModule {
+}

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

@@ -0,0 +1,94 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  HostBinding,
+  HostListener,
+  Input,
+  Output,
+  ViewEncapsulation
+} from '@angular/core';
+
+import {IconCacheService} from '../icon/icon-cache.service';
+import {CoreComponentsIcon} from '../../core/enum/core-components-icon.enum';
+import {LevelIndicatorLevel} from '../level-indicator/level-indicator-level.enum';
+
+@Component({
+  selector: 'co-card',
+  template: `
+    <div class="co-card-wrapper">
+      <div class="content-wrapper">
+        <co-icon *ngIf="isSelected" [iconData]="icons.getIcon(Icons.Check)" class="check light circle"></co-icon>
+        <co-button *ngIf="hasMagnifierButton" [iconData]="icons.getIcon(Icons.MagnifierPlus)" class="magnify white small circle"
+                   [stopClick]="true" (click)="magnifierButtonClick.emit($event)"></co-button>
+        <div class="image">
+          <co-image [source]="imageData"></co-image>
+          <ng-content select="[over-image]"></ng-content>
+        </div>
+        <co-level-indicator class="co-level-indicator" *ngIf="!!level" [model]="level"></co-level-indicator>
+        <co-button *ngIf="hasInfoButton" [iconData]="icons.getIcon(Icons.Information)" class="info white small circle"
+                   [class.small]="!isSmallModus" [stopClick]="true" [class.mini]="isSmallModus"
+                   (click)="infoButtonClick.emit($event)"></co-button>
+      </div>
+      <div class="description-wrapper">
+        <span *ngIf="!!description" class="description" [innerText]="description"></span>
+        <span *ngIf="!!price" class="price" [innerText]="price | priceDisplay"></span>
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class CardComponent {
+  @Input()
+  public imageData: string;
+
+  @Input()
+  public description: string;
+
+  @Input()
+  public price: number | string;
+
+  @Input()
+  public level: LevelIndicatorLevel;
+
+  @Input()
+  public isSelected: boolean = false;
+
+  @Input() @HostBinding('class.small-modus')
+  public isSmallModus: boolean = false;
+
+  @Input()
+  public hasMagnifierButton: boolean = false;
+
+  @Input()
+  public hasInfoButton: boolean = false;
+
+  // does not emit when you click one of the predefined buttons, but emits on a click on any of our other content
+  @Output()
+  public readonly contentClick: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
+
+  @Output()
+  public readonly infoButtonClick: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
+
+  @Output()
+  public readonly magnifierButtonClick: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
+
+  @HostBinding('class.co-card')
+  public showClass: boolean = true;
+
+  @HostListener('click', ['$event'])
+  public onHostClick(event: MouseEvent): void {
+    this.contentClick.emit(event);
+  }
+
+  public readonly Icons: any = CoreComponentsIcon;
+
+  public heightCard: number = 150;
+
+  constructor(public icons: IconCacheService, private _changeDetector: ChangeDetectorRef) {
+  }
+
+}

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

@@ -0,0 +1,34 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {HttpClientModule} from "@angular/common/http";
+
+import {CardComponent} from "./card.component";
+import {IconModule} from "../icon/icon.module";
+import {ButtonModule} from "../button/button.module";
+import {ImageModule} from "../image/image.module";
+import {StopClickModule} from "../../directives/stopclick/stop-click.module";
+import {LevelIndicatorModule} from "../level-indicator/level-indicator.module";
+import {PriceDisplayPipeModule} from "../../pipes/price-display-pipe.module";
+import { TileModule } from '../tile/tile.module';
+import { IconCacheService } from '../icon/icon-cache.service';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        HttpClientModule,
+        IconModule,
+        ButtonModule,
+        ImageModule,
+        StopClickModule,
+        LevelIndicatorModule,
+        PriceDisplayPipeModule,
+        TileModule
+    ],
+    declarations: [CardComponent],
+    providers: [
+        IconCacheService
+    ],
+    exports: [CardComponent]
+})
+export class CardModule {
+}