@kirbydesign/designsystem 0.0.0

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

@@ -0,0 +1,513 @@
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  EventEmitter,
+  HostBinding,
+  Inject,
+  Input,
+  LOCALE_ID,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges,
+  ViewChild,
+} from '@angular/core';
+import {
+  add,
+  differenceInDays,
+  eachDayOfInterval,
+  endOfMonth,
+  endOfWeek,
+  format,
+  getYear,
+  isAfter,
+  isBefore,
+  isSameDay,
+  isSameMonth,
+  isWeekend,
+  Locale as LocaleDateFns,
+  startOfDay,
+  startOfMonth,
+  startOfWeek,
+} from 'date-fns';
+import { utcToZonedTime, zonedTimeToUtc } from 'date-fns-tz';
+import { da, enGB, enUS } from 'date-fns/locale';
+
+import { capitalizeFirstLetter } from '@kirbydesign/core';
+
+import { CalendarCell } from './helpers/calendar-cell.model';
+import { CalendarOptions } from './helpers/calendar-options.model';
+import { CalendarHelper } from './helpers/calendar.helper';
+import { CalendarYearNavigatorConfig } from './options/calendar-year-navigator-config';
+
+export type Locale = LocaleDateFns;
+interface CalendarDay {
+  isCurrentMonth: boolean;
+  isToday: boolean;
+  isWeekend: boolean;
+  isPast: boolean;
+  isFuture: boolean;
+  isDisabled: boolean;
+}
+
+enum TimeUnit {
+  years = 'years',
+  months = 'months',
+  weeks = 'weeks',
+  days = 'days',
+  hours = 'hours',
+  minutes = 'minutes',
+  seconds = 'seconds',
+  milliseconds = 'milliseconds',
+}
+
+@Component({
+  selector: 'kirby-calendar',
+  templateUrl: './calendar.component.html',
+  styleUrls: ['./calendar.component.scss'],
+  providers: [CalendarHelper],
+})
+export class CalendarComponent implements OnInit, AfterViewInit, OnChanges {
+  @ViewChild('calendarContainer', { static: false }) calendarContainer: ElementRef;
+  @Output() dateChange = new EventEmitter<Date>();
+  @Output() dateSelect = new EventEmitter<Date>();
+  @Output() yearSelect = new EventEmitter<number>();
+  @Input() timezone: 'local' | 'UTC' = 'local';
+  @Input() disableWeekends = false;
+  @Input() disablePastDates = false;
+  @Input() disableFutureDates = false;
+  @Input() alwaysEnableToday = false;
+  @Input() customLocales: { [key: string]: Locale } = {};
+  /* 
+    Experimental: Input property not documented on purpose. 
+    For context see: https://github.com/kirbydesign/designsystem/issues/2087
+  */
+  @Input() usePopover = false;
+  /**
+   * Configuration for the year navigator.
+   *
+   * Internally, calendar component:
+   * - bases yearNavigatorOptions.from and yearNavigatorOptions.to on todayDate if a number is provided
+   * - prioritizes minDate and maxDate over yearNavigatorOptions.from and yearNavigatorOptions.to
+   */
+  @Input() yearNavigatorOptions: CalendarYearNavigatorConfig;
+
+  _month: CalendarCell[][];
+  _weekDays: string[];
+  private selectedDay: CalendarCell;
+  // NOTE: Internally, all Dates
+  // are normalized to point to local timezone midnight, regardless of the timezone
+  // setting.
+  private activeMonth: Date;
+  private _selectedDate: Date;
+  private _disabledDates: Date[] = [];
+  private _todayDate: Date;
+  private _minDate: Date;
+  private _maxDate: Date;
+  private locale: Locale;
+  private timeZoneName: string;
+  private includedLocales = { da, enGB, enUS };
+
+  get selectedDate(): Date {
+    return this._selectedDate;
+  }
+
+  @Input() set selectedDate(valueLocalOrUTC: Date) {
+    const value = this.normalizeDate(valueLocalOrUTC);
+    this.setActiveMonth(value);
+
+    if (this.hasDateChanged(value, this._selectedDate)) {
+      this.onSelectedDateChange(value);
+      this._selectedDate = value;
+    }
+  }
+
+  get disabledDates(): Date[] {
+    return this._disabledDates;
+  }
+
+  @Input() set disabledDates(value: Date[]) {
+    this._disabledDates = (value || []).map((date) => this.normalizeDate(date));
+  }
+
+  get todayDate(): Date {
+    return this._todayDate;
+  }
+
+  @Input() set todayDate(value: Date) {
+    this._todayDate = this.normalizeDate(value);
+  }
+
+  get minDate(): Date {
+    return this._minDate;
+  }
+
+  @Input() set minDate(value: Date) {
+    if (value && this.activeMonth && isBefore(this.activeMonth, value)) {
+      this.setActiveMonth(value);
+    }
+    this._minDate = this.normalizeDate(value);
+  }
+
+  get maxDate(): Date {
+    return this._maxDate;
+  }
+
+  @Input() set maxDate(value: Date) {
+    if (value && this.activeMonth && isAfter(this.activeMonth, value)) {
+      this.setActiveMonth(value);
+    }
+    this._maxDate = this.normalizeDate(value);
+  }
+
+  get activeMonthName(): string {
+    return capitalizeFirstLetter(this.formatWithLocale(this.activeMonth, 'MMMM'));
+  }
+
+  get activeYear(): string {
+    return this.formatWithLocale(this.activeMonth, 'yyyy');
+  }
+
+  /**
+   * Gets navigable years for year navigator based on yearNavigatorOptions.
+   */
+  get navigableYears(): string[] {
+    const dateOfFirstNavigableYear =
+      this.minDate || this.getDateFromNavigableYear(this.yearNavigatorOptions.from);
+
+    const dateOfLastNavigableYear =
+      this.maxDate || this.getDateFromNavigableYear(this.yearNavigatorOptions.to);
+
+    return this.getYearsBetweenDates(dateOfFirstNavigableYear, dateOfLastNavigableYear);
+  }
+
+  get navigatedYear(): number {
+    return this.navigableYears.indexOf(this.activeYear);
+  }
+
+  @HostBinding('class.has-year-navigator')
+  get _hasYearNavigator() {
+    return !!this.yearNavigatorOptions;
+  }
+
+  constructor(private calendarHelper: CalendarHelper, @Inject(LOCALE_ID) locale: string) {
+    this.locale = this.mapLocale(locale);
+    this.timeZoneName = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  }
+
+  private formatWithLocale(date: Date, formatString: string): string {
+    return format(date, formatString, {
+      locale: this.locale,
+    });
+  }
+
+  private mapLocale(locale: string): Locale {
+    if (locale === 'en') {
+      locale = 'enGB'; // if english locale is provided without region, we default to GB
+    }
+    locale = locale.replace('-', '');
+    const availableLocales = { ...this.includedLocales, ...this.customLocales };
+
+    return availableLocales[locale] || this.includedLocales.enGB; // Default to enGB if injected locale doesnt exist
+  }
+
+  ngOnInit() {
+    this._weekDays = this.getWeekDays();
+    this.setActiveMonth(this.selectedDate);
+  }
+
+  ngAfterViewInit() {
+    this.calendarHelper.init(
+      this.calendarContainer,
+      this.getHelperOptions(),
+      this._onDateSelected.bind(this),
+      this.onChangeMonth.bind(this)
+    );
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (!this.activeMonth) return;
+    if (
+      changes.disableWeekends ||
+      changes.disablePastDates ||
+      changes.disableFutureDates ||
+      changes.disabledDates ||
+      changes.minDate ||
+      changes.maxDate ||
+      changes.todayDate ||
+      changes.timezone
+    ) {
+      this.refreshActiveMonth();
+      this.calendarHelper.update(this.getHelperOptions());
+    }
+  }
+
+  private setActiveMonth(date: Date = new Date()) {
+    if (!this.activeMonth || !isSameMonth(this.activeMonth, date)) {
+      this.activeMonth = startOfMonth(date);
+      this.refreshActiveMonth();
+      this.calendarHelper.update(this.getHelperOptions());
+    }
+  }
+
+  // For leniency, the component will accept any Date that points to either UTC midnight
+  // or to local timezone midnight although we will internally normalize the representation
+  // of all received dates to point to local timezone midnight.
+  // We currently log no warnings if the date doesn't match the timezone setting or
+  // if it doesn't point to midnight.
+  private normalizeDate(dateLocalOrUTC: Date) {
+    if (!dateLocalOrUTC) return;
+
+    if (startOfDay(dateLocalOrUTC).getTime() === dateLocalOrUTC.getTime()) {
+      // date is local timezone midnight
+      return dateLocalOrUTC;
+    }
+    if (
+      startOfDay(utcToZonedTime(dateLocalOrUTC, this.timeZoneName)).getTime() ===
+      utcToZonedTime(dateLocalOrUTC, this.timeZoneName).getTime()
+    ) {
+      // the date is a UTC midnight; create the equivalent local timezone midnight date
+      const normalizedUTCdate = utcToZonedTime(dateLocalOrUTC, this.timeZoneName);
+      return normalizedUTCdate;
+    }
+    // does not point to midnight so we make it
+    return startOfDay(dateLocalOrUTC);
+  }
+
+  private getWeekDays(): string[] {
+    const now = new Date();
+
+    const week = eachDayOfInterval({
+      start: startOfWeek(now, { locale: this.locale }),
+      end: endOfWeek(now, { locale: this.locale }),
+    });
+
+    return week.map((date) => this.getFirstLetterOfWeekDayCapitalized(date));
+  }
+
+  private getFirstLetterOfWeekDayCapitalized(date: Date) {
+    return this.formatWithLocale(date, 'EEEEE');
+  }
+
+  private hasDateChanged(newDate: Date, previousDate: Date): boolean {
+    if (!newDate && !previousDate) {
+      return false;
+    }
+    if (newDate instanceof Date && !previousDate) {
+      return true;
+    }
+    return !isSameDay(newDate, previousDate);
+  }
+
+  private isDisabledDate(date: Date): boolean {
+    return this.disabledDates.some((disabledDate) => {
+      return isSameDay(disabledDate, date);
+    });
+  }
+
+  refreshActiveMonth() {
+    if (!this.activeMonth) return;
+
+    const monthStart = startOfMonth(this.activeMonth);
+    const monthEnd = endOfMonth(this.activeMonth);
+    const startOfFirstWeek = startOfWeek(monthStart, { locale: this.locale });
+    const endOfLastWeek = endOfWeek(monthEnd, { locale: this.locale });
+    const totalDayCount = differenceInDays(endOfLastWeek, startOfFirstWeek) + 1;
+    const today = this.todayDate ? startOfDay(this.todayDate) : startOfDay(new Date());
+
+    const daysArray = Array.from(Array(totalDayCount).keys());
+
+    const days: CalendarCell[] = daysArray.map((number) => {
+      const cellDate = add(startOfFirstWeek, { [TimeUnit.days]: number });
+      const day = this.getCalendarDay(cellDate, today, monthStart);
+
+      const isSelectable = this.isSelectable(day, cellDate);
+      const isSelected = isSameDay(this.selectedDate, cellDate);
+      const cell = {
+        date: cellDate.getDate(),
+        isCurrentMonth: day.isCurrentMonth,
+        isSelectable,
+        isSelected,
+        cssClasses: this.getCssClasses(day, isSelectable, isSelected),
+      };
+      if (isSelected) {
+        this.selectedDay = cell;
+      }
+      return cell;
+    });
+    this._month = this.chunk(days, 7);
+  }
+
+  private getCalendarDay(date: Date, today: Date, monthStart: Date): CalendarDay {
+    return {
+      isToday: isSameDay(today, date),
+      isPast: isBefore(date, today),
+      isFuture: isAfter(date, today),
+      isWeekend: isWeekend(date),
+      isCurrentMonth: isSameMonth(date, monthStart),
+      isDisabled: this.isDisabledDate(date),
+    };
+  }
+
+  private isSelectable(day: CalendarDay, date: Date) {
+    return (
+      (this.alwaysEnableToday && day.isToday) ||
+      (!day.isDisabled &&
+        day.isCurrentMonth &&
+        !(this.disableWeekends && day.isWeekend) &&
+        !(this.disablePastDates && day.isPast) &&
+        !(this.disableFutureDates && day.isFuture) &&
+        !(this.minDate && isBefore(date, this.minDate)) &&
+        !(this.maxDate && isAfter(date, this.maxDate)))
+    );
+  }
+
+  private getCssClasses(day: CalendarDay, isSelectable: boolean, isSelected: boolean) {
+    const cssClasses = {
+      'current-month': day.isCurrentMonth,
+      weekend: day.isWeekend,
+      today: day.isToday,
+      selectable: isSelectable,
+      selected: isSelected,
+      past: day.isPast,
+      disabled: day.isDisabled,
+    };
+    let cssClassString = 'day';
+    for (const key in cssClasses) {
+      if (cssClasses[key]) {
+        cssClassString += ' ' + key;
+      }
+    }
+    return cssClassString;
+  }
+
+  private chunk(array: any[], size: number) {
+    const results = [];
+    while (array.length) {
+      results.push(array.splice(0, size));
+    }
+    return results;
+  }
+
+  private onSelectedDateChange(newDate: Date): void {
+    if (this.selectedDay) {
+      this.selectedDay.isSelected = false;
+    }
+
+    const newDay = this.getCell(newDate);
+    if (newDay) {
+      newDay.isSelected = true;
+      this.selectedDay = newDay;
+    }
+    this.calendarHelper.setSelectedDay(newDate.getDate());
+  }
+
+  _onDateSelected(newDay: CalendarCell) {
+    if (newDay.isSelectable && newDay.date) {
+      let newDate = new Date(this.activeMonth);
+      newDate.setDate(newDay.date);
+
+      if (this.timezone === 'UTC') {
+        newDate = zonedTimeToUtc(this.subtractTimezoneOffset(newDate), this.timeZoneName);
+      }
+
+      const dateToEmit = newDate;
+
+      if (this.hasDateChanged(newDate, this._selectedDate)) {
+        this.onSelectedDateChange(newDate);
+        this._selectedDate = newDate;
+        this.dateChange.emit(dateToEmit);
+      }
+      this.dateSelect.emit(dateToEmit);
+    }
+  }
+
+  private onChangeMonth(direction: number) {
+    this._changeMonth(direction);
+    this.calendarHelper.update(this.getHelperOptions());
+  }
+
+  _changeMonth(index: number) {
+    this.changeActiveView(index, TimeUnit.months);
+  }
+
+  _changeYear(year: string) {
+    const yearNumeric = Number(year);
+    this.changeActiveView(yearNumeric - getYear(this.activeMonth), TimeUnit.years);
+    this.yearSelect.emit(yearNumeric);
+  }
+
+  private changeActiveView(index: number, unit: TimeUnit) {
+    if (index === 0) return;
+    this.activeMonth = add(this.activeMonth, { [unit]: index });
+
+    this.refreshActiveMonth();
+  }
+
+  get _canNavigateBack(): boolean {
+    const reachedPastDatesLimit =
+      this.disablePastDates && isSameMonth(this.activeMonth, this.todayDate);
+
+    const reachedOrExceededMinDate =
+      this.minDate &&
+      (isSameMonth(this.activeMonth, this.minDate) || isBefore(this.activeMonth, this.minDate));
+
+    return !reachedPastDatesLimit && !reachedOrExceededMinDate;
+  }
+
+  get _canNavigateForward(): boolean {
+    const reachedFutureDatesLimit =
+      this.disableFutureDates && isSameMonth(this.activeMonth, this.todayDate);
+
+    const reachedOrExceededMaxDate =
+      this.maxDate &&
+      (isSameMonth(this.activeMonth, this.maxDate) || isAfter(this.activeMonth, this.maxDate));
+
+    return !reachedFutureDatesLimit && !reachedOrExceededMaxDate;
+  }
+
+  private getCell(date: Date) {
+    let foundDay = null;
+    if (date) {
+      for (let week of this._month) {
+        foundDay = week.find((day) => {
+          return day.isCurrentMonth && day.date === date.getDate();
+        });
+        if (foundDay) {
+          break;
+        }
+      }
+    }
+    return foundDay;
+  }
+
+  private getHelperOptions(): CalendarOptions {
+    return {
+      canNavigateBack: this._canNavigateBack,
+      canNavigateForward: this._canNavigateForward,
+      year: this.activeYear,
+      monthName: this.activeMonthName,
+      weekDays: this._weekDays,
+      month: this._month,
+    };
+  }
+
+  private subtractTimezoneOffset(date: Date): Date {
+    const timezoneOffsetInMs = date.getTimezoneOffset() * 60 * 1000;
+    return new Date(date.getTime() - timezoneOffsetInMs);
+  }
+
+  private getDateFromNavigableYear(navigableYear: number | Date): Date {
+    if (navigableYear instanceof Date) return navigableYear;
+    const today = this.todayDate || new Date();
+    return new Date(today.getFullYear() + navigableYear, 0, 1);
+  }
+
+  private getYearsBetweenDates(startDate: Date, endDate: Date): string[] {
+    // Ensure years are ordered correctly if parameters are switched:
+    const [startYear, endYear] = [startDate.getFullYear(), endDate.getFullYear()].sort();
+    const numberOfYears = endYear - startYear;
+    return Array.from({ length: numberOfYears + 1 }, (_, i) => (startYear + i).toString());
+  }
+}

package/src/lib/components/calendar/helpers/calendar-cell.model.ts

@@ -0,0 +1,7 @@
+export interface CalendarCell {
+  date: number;
+  isCurrentMonth: boolean;
+  isSelectable: boolean;
+  isSelected: boolean;
+  cssClasses: string;
+}

package/src/lib/components/calendar/helpers/calendar-options.model.ts

@@ -0,0 +1,10 @@
+import { CalendarCell } from './calendar-cell.model';
+
+export interface CalendarOptions {
+  canNavigateBack: boolean;
+  canNavigateForward: boolean;
+  year: string;
+  monthName: string;
+  weekDays: string[];
+  month: CalendarCell[][];
+}

package/src/lib/components/calendar/helpers/calendar.helper.ts

@@ -0,0 +1,108 @@
+import { ElementRef, Injectable } from '@angular/core';
+
+import { WindowRef } from '../../../types/window-ref';
+
+import { CalendarOptions } from './calendar-options.model';
+
+@Injectable()
+export class CalendarHelper {
+  private embeddedView: Window;
+  private embeddedViewReady = false;
+
+  constructor(private windowRef: WindowRef) {}
+
+  public init(
+    calendarContainer: ElementRef,
+    options: CalendarOptions,
+    onDaySelected: (cell: { isSelectable: boolean; date: number }) => void,
+    onChangeMonth: (index: number) => void
+  ) {
+    if (this.hasEmbeddedView(calendarContainer)) {
+      const iframe = <HTMLIFrameElement>calendarContainer.nativeElement;
+      iframe.onload = () => {
+        this.embeddedViewReady = true;
+        this.emitOptionsToEmbeddedView(options);
+      };
+      this.embeddedView = iframe.contentWindow;
+
+      this.windowRef.nativeWindow.addEventListener('message', (event: MessageEvent) =>
+        this.handleMessageEvent(event, onDaySelected, onChangeMonth)
+      );
+    }
+  }
+
+  public update(options: CalendarOptions) {
+    if (this.embeddedViewReady) {
+      this.emitOptionsToEmbeddedView(options);
+    }
+  }
+
+  public setSelectedDay(day: number) {
+    if (this.embeddedViewReady) {
+      this.embeddedView.postMessage(
+        {
+          type: 'kirbyCalendarSetSelectedDay',
+          selectedDay: day,
+        },
+        '*'
+      );
+    }
+  }
+
+  private hasEmbeddedView(calendarContainer: ElementRef) {
+    return (
+      calendarContainer &&
+      calendarContainer.nativeElement &&
+      calendarContainer.nativeElement instanceof HTMLIFrameElement &&
+      calendarContainer.nativeElement.contentWindow
+    );
+  }
+
+  private emitOptionsToEmbeddedView(options: CalendarOptions) {
+    this.embeddedView.postMessage(
+      {
+        type: 'kirbyCalendarInit',
+        ...options,
+      },
+      '*'
+    );
+  }
+
+  private handleMessageEvent(
+    event: MessageEvent,
+    onDaySelected: (cell: { isSelectable: boolean; date: number }) => void,
+    onChangeMonth: (index: number) => void
+  ) {
+    if (this.validateMessage(event)) {
+      switch (event.data.type) {
+        case 'kirbyCalendarDaySelected':
+          if (this.validateDateSelectedMessage(event)) {
+            onDaySelected({ isSelectable: true, date: event.data.day });
+          }
+          break;
+        case 'kirbyCalendarChangeMonth':
+          if (this.validateNavigateMonthMessage(event)) {
+            onChangeMonth(event.data.index);
+          }
+          break;
+      }
+    }
+  }
+
+  private validateMessage(event: MessageEvent) {
+    return (
+      this.embeddedView === event.source &&
+      event.type === 'message' &&
+      event.data &&
+      event.data.type
+    );
+  }
+
+  private validateDateSelectedMessage(event: MessageEvent) {
+    return event.data.type === 'kirbyCalendarDaySelected' && event.data.day;
+  }
+
+  private validateNavigateMonthMessage(event: MessageEvent) {
+    return event.data.type === 'kirbyCalendarChangeMonth' && typeof event.data.index === 'number';
+  }
+}

package/src/lib/components/calendar/index.ts

@@ -0,0 +1,2 @@
+export { CalendarComponent } from './calendar.component';
+export { CalendarYearNavigatorConfig } from './options/calendar-year-navigator-config';

package/src/lib/components/calendar/options/calendar-year-navigator-config.ts

@@ -0,0 +1,4 @@
+export type CalendarYearNavigatorConfig = {
+  from: number | Date;
+  to: number | Date;
+};

package/src/lib/components/card/card-footer/card-footer.component.html

@@ -0,0 +1,3 @@
+<footer>
+  <ng-content></ng-content>
+</footer>

package/src/lib/components/card/card-footer/card-footer.component.scss

@@ -0,0 +1,19 @@
+@use '~@kirbydesign/core/src/scss/utils';
+
+:host {
+  display: block;
+  padding: utils.size('s');
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
+  overflow: hidden;
+
+  // backface-visibility and transform, to fix clipping issue
+  // on Safari see https://stackoverflow.com/a/16681137
+  backface-visibility: hidden;
+  transform: translate3d(0, 0, 0);
+}
+
+footer {
+  display: inherit;
+  flex: inherit;
+}

package/src/lib/components/card/card-footer/card-footer.component.ts

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'kirby-card-footer',
+  templateUrl: './card-footer.component.html',
+  styleUrls: ['./card-footer.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CardFooterComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}

package/src/lib/components/card/card-header/card-header.component.html

@@ -0,0 +1,5 @@
+<header>
+  <h2 *ngIf="title" [class.bold]="isTitleBold">{{ title }}</h2>
+  <h4 *ngIf="subtitle">{{ subtitle }}</h4>
+  <ng-content></ng-content>
+</header>