@colijnit/sharedcomponents 1.0.24 → 1.0.25

package/projects/sharedcomponents/src/lib/components/date-planning/component/agenda/style/_layout.scss

@@ -0,0 +1,443 @@
+@import "../../../../../style/mixin";
+
+@include export-module('sc-agenda') {
+  .sc-agenda {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    overflow: hidden;
+
+    .no-user-select {
+      user-select: none;
+    }
+
+    .agenda-header-wrapper {
+      display: flex;
+      width: inherit;
+      height: $agenda-week-view-header-height;
+      background: white;
+      z-index: 9001;
+    }
+
+    .week-day {
+      display: flex;
+      position: relative;
+      flex-basis: 100%;
+    }
+
+    .content-wrapper {
+      display: flex;
+      width: 100%;
+      height: 100%;
+      flex-wrap: wrap;
+    }
+
+    .hour-label-placeholder {
+      display: flex;
+      flex-basis: $agenda-hour-view-labels-width;
+      flex-shrink: 0;
+      border: 1px solid $color_border;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .week-day-label {
+      background: #f1f1f1;
+      pointer-events: none;
+      position: relative;
+      flex-basis: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      border: 1px solid $color_border;
+
+      &.selectable {
+        pointer-events: all;
+      }
+
+      &.selected {
+        background: white;
+
+        .weekday-description, .weekday-value {
+          color: $color-active-light;
+        }
+      }
+
+      &.selectable:not(.selected) {
+        cursor: pointer;
+        color: $color-label;
+
+        &:not(:hover) {
+          background: none;
+
+          .weekday-description, .weekday-value, .day-description {
+            color: $color-dark;
+          }
+        }
+      }
+
+      .add-unit-icon, .sub-unit-icon {
+        pointer-events: all;
+      }
+
+      &:hover {
+        background: $color_border;
+      }
+    }
+
+    .weekday-description {
+      color: $color-inactive-day;
+      font-size: 14px;
+      text-transform: uppercase;
+      margin-top: 7px;
+    }
+
+    .weekday-value {
+      color: $color-inactive-day;
+      font-size: $agenda-week-label-value-font-size;
+      font-weight: bold;
+    }
+
+    .sub-unit-icon {
+      position: absolute;
+      left: 7px;
+    }
+
+    .add-unit-icon {
+      position: absolute;
+      right: 7px;
+    }
+
+    .day-description {
+      color: $color-inactive-day;
+      font-size: $agenda-week-label-value-font-size;
+      font-weight: bold;
+    }
+
+    .month-description {
+      top: 1px;
+      left: 3px;
+      font-size: 11px;
+      text-transform: capitalize;
+      position: absolute;
+      width: 100px;
+    }
+
+    .view-wrapper {
+      display: flex;
+      width: 100%;
+      margin-top: -1px;
+    }
+
+    .week-select-view {
+      display: flex;
+      position: relative;
+      padding: 50px;
+      height: 100%;
+    }
+
+    .week-day {
+      display: flex;
+      position: relative;
+      flex-basis: 100%;
+    }
+
+    @media screen and (max-width: $xs-width) {
+      .popup-card-content {
+        padding: 0 0 15px !important;
+      }
+    }
+    @media screen and (min-width: $sm-width) {
+      .select-agenda-button {
+        left: 50px;
+        float: left;
+        position: absolute;
+        bottom: 0;
+      }
+    }
+
+    agenda {
+      position: relative;
+    }
+
+    .agenda-content-wrapper {
+      min-width: 0 !important;
+    }
+
+    agenda-header {
+      width: 100% !important;
+    }
+
+    .agenda-header-wrapper {
+      padding: 0 50px;
+      height: auto;
+
+      .week-day-label {
+
+        .sub-unit-icon {
+          height: 100%;
+          width: 50px;
+          left: -50px;
+        }
+
+        .add-unit-icon {
+          height: 100%;
+          width: 50px;
+          right: -50px;
+        }
+
+        @media screen and (max-width: $xs-width) {
+          .sub-unit-icon {
+            width: 25px;
+            left: -25px;
+          }
+
+          .add-unit-icon {
+            width: 25px;
+            right: -25px;
+          }
+        }
+
+        .weekday-description {
+          font-size: 14px;
+          line-height: 20px;
+        }
+
+        .weekday-value {
+          line-height: 30px;
+        }
+
+        @media screen and (min-width: $sm-width) {
+          .weekday-value {
+            font-size: 18px;
+          }
+        }
+        @media screen and (max-width: $xs-width) {
+          .weekday-value {
+            line-height: 20px;
+            font-size: 9px;
+          }
+        }
+      }
+    }
+
+    @media screen and (max-width: $xs-width) {
+      .agenda-header-wrapper {
+        padding: 0 25px;
+        height: 60px !important;
+      }
+    }
+
+      .view-wrapper {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+
+        .week-day {
+          display: flex;
+          width: 100%;
+          height: 100%;
+
+          .week-select-container {
+            display: flex;
+            width: 100%;
+
+            .week-select-left {
+              width: 40%;
+
+              .no-events-banner {
+                display: flex;
+                width: 100%;
+                padding: 15px;
+                border-radius: 4px;
+                justify-content: space-evenly;
+                border: 1px solid #f7f5f4;
+                box-shadow: 0 0 15px 0 rgba(72, 79, 96, .30);
+              }
+
+              .week-select-list {
+                height: 100%;
+                padding: 10px;
+                margin: -10px 0 0 -10px;
+
+                agenda-events {
+                  position: static;
+                  flex-direction: column;
+                  height: auto;
+
+                  agenda-select-event {
+                    position: static;
+                    width: 100%;
+                    display: flex;
+                    margin: 0 0 20px;
+                    height: auto;
+
+                    &:last-child {
+                      margin: 0;
+                    }
+
+                    &:hover .week-select-item {
+                      background: $color_border;
+                    }
+
+                    .week-select-item {
+                      display: flex;
+                      width: 100%;
+                      padding: 30px 25px 30px 100px;
+                      border-radius: 4px;
+                      justify-content: space-evenly;
+                      border: 1px solid #f7f5f4;
+                      list-style-type: none;
+                      position: relative;
+                      cursor: pointer;
+                      box-shadow: 0 0 15px 0 rgba(72, 79, 96, .30);
+
+                      &.selected {
+                        background: $color-active-light;
+                        border-color: $color-active-light;
+                        color: #fff;
+
+                        .select-icon {
+                          path {
+                            fill: #fff !important;
+                          }
+
+                          polygon {
+                            fill: #fff !important;
+                          }
+                        }
+                      }
+
+                      .select-icon {
+                        height: 50px;
+                        width: 100px;
+                        position: absolute;
+                        left: 0;
+                        top: 50%;
+                        margin: -25px 0 0;
+                        opacity: 1;
+                      }
+
+                      @media screen and (max-width: $xs-width) {
+                        .select-icon {
+                          height: 40px;
+                          width: 80px;
+                          margin: -20px 0 0;
+                        }
+                      }
+
+                      .moment-name {
+                        display: flex;
+                        align-items: flex-start;
+                        width: 100%;
+                        flex-direction: column;
+
+                        h2 {
+                          margin: 5px 0 0;
+                        }
+
+                      }
+
+                    }
+
+                    @media screen and (max-width: $xs-width) {
+                      .week-select-item {
+                        padding: 20px 25px 20px 80px;
+                      }
+                    }
+
+                  }
+                }
+
+              }
+            }
+
+            @media screen and (max-width: $md-width) {
+              .week-select-left {
+                width: 50%;
+              }
+            }
+            @media screen and (max-width: $sm-width) {
+              .week-select-left {
+                width: 100%;
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+                margin: 0 0 20px;
+              }
+            }
+            @media screen and (max-width: $xs-width) {
+              .week-select-left {
+                h3 {
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .week-select-right {
+              width: 50%;
+              padding: 0 0 0 50px;
+
+              li {
+                display: flex;
+                align-items: center;
+                margin: 10px 0;
+                line-height: 190%;
+                list-style-type: none;
+
+                .moment-icon {
+                  float: left;
+                  margin: 0 0 0 -50px;
+                  width: 30px;
+                  height: 35px;
+                }
+              }
+            }
+
+            @media screen and (max-width: $sm-width) {
+              .week-select-right {
+                display: flex;
+                flex-direction: column;
+                width: 100%;
+                padding: 0 0 40px;
+              }
+            }
+            @media screen and (max-width: $xs-width) {
+              .week-select-right {
+                font-size: 13px;
+
+                h3 {
+                  font-size: 14px;
+                }
+
+                li {
+                  margin: 10px 0;
+                }
+              }
+            }
+          }
+
+          @media screen and (max-width: $sm-width) {
+            .week-select-container {
+              flex-direction: column-reverse;
+            }
+          }
+        }
+      }
+
+    @media screen and (max-width: $sm-width) {
+      :host {
+        flex-direction: column;
+        padding: 50px 50px 0;
+      }
+    }
+
+    @media screen and (max-width: $xs-width) {
+      :host {
+        padding: 25px 25px 0;
+      }
+    }
+  }
+}

package/projects/sharedcomponents/src/lib/components/date-planning/component/agenda/style/_material-definition.scss

@@ -0,0 +1,11 @@
+$agenda-week-view-header-height: 100px;
+$agenda-hour-view-labels-width: 80px;
+$color-active-light: #74B77F;
+$color-label: #5B6875;
+$color-dark: #171721;
+$color-inactive-day: rgba($color-dark, 0.2);
+$agenda-week-label-value-font-size: 2vw;
+$xs-width: 600px;
+$sm-width: 960px;
+$md-width: 1280px;
+$lg-width: 1920px;

package/projects/sharedcomponents/src/lib/components/date-planning/component/agenda/style/_theme.scss

@@ -0,0 +1,7 @@
+@import "../../../../../style/mixin";
+
+@include export-module('sc-agenda-theme') {
+  .sc-agenda {
+
+  }
+}

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

@@ -0,0 +1,37 @@
+import {Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation} from "@angular/core";
+import {ALL_MONTHS} from "../../../../model/constant/all-months";
+
+@Component({
+  selector: "calendar-all-months",
+  template: `
+        <div *ngFor="let currentMonth of months; let index = index"
+             [class.selected-month]="month === index"
+             [textContent]="currentMonth"
+             class="pointer-hover"
+             (click)="month = index; monthChange.emit(month)"
+        ></div>
+    `,
+  encapsulation: ViewEncapsulation.None
+})
+
+export class CalendarAllMonthsComponent implements OnInit {
+
+  @Input()
+  public month: number;
+
+  @Input()
+  public shortDescriptions: boolean = false;
+
+  @Output()
+  public monthChange: EventEmitter<number> = new EventEmitter<number>();
+
+  public months: string[] = [];
+
+  constructor() {
+  }
+
+  ngOnInit(): void {
+    this.months.length = 0;
+    this.months = ALL_MONTHS;
+  }
+}

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

@@ -0,0 +1,52 @@
+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

@@ -0,0 +1,124 @@
+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);
+  }
+}