@kirbydesign/designsystem 0.0.0

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

@@ -0,0 +1,96 @@
+import {
+  AfterContentInit,
+  ChangeDetectionStrategy,
+  Component,
+  ContentChild,
+  ElementRef,
+  HostBinding,
+  Input,
+} from '@angular/core';
+
+import { NotificationColor } from '@kirbydesign/core';
+
+import { IconComponent } from '../icon/icon.component';
+
+export enum ButtonSize {
+  SM = 'sm',
+  MD = 'md',
+  LG = 'lg',
+}
+
+@Component({
+  // tslint:disable-next-line:component-selector
+  selector: 'button[kirby-button],Button[kirby-button]',
+  templateUrl: './button.component.html',
+  styleUrls: ['./button.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ButtonComponent implements AfterContentInit {
+  @HostBinding('class.attention-level1')
+  isAttentionLevel1: boolean = true; // Default
+  @HostBinding('class.attention-level2')
+  isAttentionLevel2: boolean;
+  @HostBinding('class.attention-level3')
+  isAttentionLevel3: boolean;
+  @HostBinding('class.attention-level4')
+  isAttentionLevel4: boolean;
+  @HostBinding('class.destructive')
+  destructive: boolean = false; // Default
+
+  @HostBinding('class.floating')
+  public get isButtonFloating(): boolean {
+    return this.isFloating;
+  }
+
+  @HostBinding('class.icon-only')
+  public get isIconOnly(): boolean {
+    return !!this.icon && !this.hasText;
+  }
+  private _isIconLeft = false;
+  @HostBinding('class.icon-left')
+  public get isIconLeft() {
+    return this._isIconLeft;
+  }
+  private _isIconRight = false;
+  @HostBinding('class.icon-right')
+  public get isIconRight() {
+    return this._isIconRight;
+  }
+
+  @HostBinding('class')
+  get _cssClass() {
+    return [this.themeColor, this.size].filter((cssClass) => !!cssClass);
+  }
+
+  @Input() set attentionLevel(level: '1' | '2' | '3' | '4') {
+    this.isAttentionLevel1 = level === '1';
+    this.isAttentionLevel2 = level === '2';
+    this.isAttentionLevel3 = level === '3';
+    this.isAttentionLevel4 = level === '4';
+  }
+  @Input() set isDestructive(state: boolean) {
+    this.destructive = state;
+  }
+  @Input()
+  themeColor: NotificationColor;
+  @Input() expand: 'full' | 'block';
+  @Input() isFloating: boolean = false;
+  @Input()
+  size: ButtonSize | `${ButtonSize}` = ButtonSize.MD;
+
+  @ContentChild(IconComponent) icon: IconComponent;
+  @ContentChild(IconComponent, { read: ElementRef })
+  iconElementRef: ElementRef<HTMLElement>;
+  private hasText = false;
+
+  constructor(private elementRef: ElementRef<HTMLElement>) {}
+
+  ngAfterContentInit(): void {
+    this.hasText = !!this.elementRef.nativeElement.textContent;
+    if (this.iconElementRef !== undefined && this.hasText) {
+      this._isIconLeft =
+        this.elementRef.nativeElement.firstChild === this.iconElementRef.nativeElement;
+      this._isIconRight = !this._isIconLeft;
+    }
+  }
+}

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

@@ -0,0 +1,49 @@
+<div class="header">
+  <div class="month-navigator">
+    <button [disabled]="!_canNavigateBack" (click)="_changeMonth(-1)">
+      <kirby-icon name="arrow-back"></kirby-icon>
+    </button>
+
+    <div class="month-and-year">
+      <span class="month">{{ activeMonthName }}</span
+      ><span *ngIf="!_hasYearNavigator" class="year">{{ activeYear }}</span>
+    </div>
+
+    <button [disabled]="!_canNavigateForward" (click)="_changeMonth(1)">
+      <kirby-icon name="arrow-more"></kirby-icon>
+    </button>
+  </div>
+  <kirby-dropdown
+    *ngIf="_hasYearNavigator"
+    [usePopover]="usePopover"
+    [selectedIndex]="navigatedYear"
+    [items]="navigableYears"
+    popout="left"
+    (change)="_changeYear($event)"
+  >
+  </kirby-dropdown>
+</div>
+
+<table>
+  <thead>
+    <tr>
+      <th *ngFor="let weekDay of _weekDays">{{ weekDay }}</th>
+    </tr>
+  </thead>
+
+  <tbody>
+    <tr *ngFor="let week of _month">
+      <td *ngFor="let day of week">
+        <div
+          (click)="_onDateSelected(day)"
+          class="{{ day.cssClasses }}"
+          [class.selected]="day.isSelected"
+        >
+          {{ day.date }}
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+<!-- <iframe src="kirby/components/calendar/calendar.webview.html" #calendarContainer style="width: 320px; height: 304px; border: 0"> -->

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

@@ -0,0 +1,93 @@
+import { LOCALE_ID } from '@angular/core';
+import { createHostFactory, SpectatorHost } from '@ngneat/spectator';
+import { MockComponent } from 'ng-mocks';
+
+import {
+  CalendarComponent,
+  CardComponent,
+  DropdownComponent,
+  IconComponent,
+  RadioComponent,
+} from '..';
+import { WindowRef } from '../../types/window-ref';
+import { ItemComponent } from '../item';
+
+describe('CalendarComponent', () => {
+  let spectator: SpectatorHost<CalendarComponent>;
+
+  const createHost = createHostFactory({
+    component: CalendarComponent,
+    declarations: [
+      CalendarComponent,
+      MockComponent(IconComponent),
+      DropdownComponent,
+      RadioComponent,
+      CardComponent,
+      ItemComponent,
+    ],
+    providers: [
+      {
+        provide: LOCALE_ID,
+        // i.e. en-US. The week should start on Monday regardlessly
+        useValue: 'en',
+      },
+      {
+        provide: WindowRef,
+        useValue: <WindowRef>{ nativeWindow: window },
+      },
+    ],
+  });
+
+  type calendarProps = keyof CalendarComponent;
+  const testScenarios: { property: calendarProps; value: any }[] = [
+    { property: 'alwaysEnableToday', value: true },
+    { property: 'disableWeekends', value: true },
+    { property: 'disablePastDates', value: true },
+    { property: 'disableFutureDates', value: true },
+    {
+      property: 'disabledDates',
+      value: [new Date(2005, 6, 3), new Date(2007, 9, 29), new Date(2012, 0, 17)],
+    },
+    { property: 'minDate', value: new Date(2017, 0, 1) },
+    { property: 'maxDate', value: new Date(2025, 11, 31) },
+    { property: 'todayDate', value: new Date(2021, 3, 10) },
+    { property: 'timezone', value: 'UTC' },
+  ];
+
+  testScenarios.forEach((scenario) => {
+    describe(`when configured with ${scenario.property}`, () => {
+      describe('through input properties', () => {
+        beforeEach(() => {
+          spectator = createHost(`<kirby-calendar></kirby-calendar>`, {
+            props: {
+              [scenario.property]: scenario.value,
+            },
+          });
+        });
+
+        it(`should create component with '${scenario.property}' set`, () => {
+          expect(spectator.component).toBeTruthy();
+          expect(spectator.component[scenario.property]).toEqual(scenario.value);
+        });
+      });
+
+      describe('through template property binding', () => {
+        beforeEach(() => {
+          spectator = createHost(
+            `<kirby-calendar [${scenario.property}]="${scenario.property}"></kirby-calendar>`,
+            {
+              hostProps: {
+                [scenario.property]: scenario.value,
+              },
+            }
+          );
+        });
+
+        it(`should create component with '${scenario.property}' set`, () => {
+          expect(spectator.component).toBeTruthy();
+          expect(spectator.component[scenario.property]).toEqual(scenario.value);
+        });
+      });
+    });
+  });
+});

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

@@ -0,0 +1,132 @@
+@use '~@kirbydesign/core/src/scss/utils';
+
+$month-navigator-width: 80px;
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  user-select: none;
+  margin-bottom: utils.size('xxs');
+}
+
+th,
+td {
+  text-align: center;
+  padding: 0;
+
+  &:first-child {
+    padding-left: utils.size('xxs');
+  }
+
+  &:last-child {
+    padding-right: utils.size('xxs');
+  }
+}
+
+th {
+  height: 50px;
+  border-bottom: 1px solid utils.get-color('background-color');
+}
+
+.header,
+th,
+td {
+  background-color: transparent;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  margin: utils.size('xxs');
+  margin-bottom: 0;
+}
+
+.month-navigator {
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  justify-content: space-between;
+
+  button {
+    background-color: transparent;
+    outline: none;
+    border: none;
+    color: inherit;
+    cursor: pointer;
+    height: utils.size('xl');
+    width: utils.size('xl');
+    padding: 0;
+  }
+
+  button:disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+}
+
+.month-and-year {
+  user-select: none;
+
+  .month {
+    font-weight: utils.font-weight('bold');
+    margin-right: utils.size('xxs');
+  }
+}
+
+:host(.has-year-navigator) {
+  .month-navigator {
+    flex-grow: 0;
+  }
+
+  .month-and-year {
+    width: $month-navigator-width;
+    margin: 0 utils.size('xxs');
+    text-align: center;
+  }
+
+  .month {
+    margin-right: 0;
+  }
+}
+
+.day {
+  $day-width: utils.size('xl');
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: $day-width * 0.5;
+  width: $day-width;
+  height: $day-width;
+  margin: utils.size('xxxs') 0;
+}
+
+.day.selectable,
+.day.selected {
+  cursor: pointer;
+}
+
+.day.disabled,
+.day:not(.selectable) {
+  color: utils.get-text-color('semi-dark');
+}
+
+.day.today {
+  color: utils.get-color('medium-contrast');
+  background-color: utils.get-color('medium');
+}
+
+.day.selected {
+  color: utils.get-color('black-contrast');
+  background-color: utils.get-color('black');
+}
+
+.day:not(.current-month) {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.day.selectable:not(.selected):hover {
+  color: utils.get-color('light-contrast');
+  background-color: utils.get-color('light');
+}