@colijnit/sharedcomponents 1.0.23 → 1.0.25

package/projects/sharedcomponents/src/lib/assets/icons/pdf.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
+  <path
+    d="M31.42,40.17H13.88c-2.16,0-2.72-.56-2.72-2.72V12.88c0-2.15.56-2.71,2.72-2.71h11.6l8.66,8.88v3.43H32.8V19.6l-7.88-8.09h-11c-1.38,0-1.38,0-1.38,1.37V37.45c0,1.37,0,1.37,1.38,1.37H31.42c1.38,0,1.38,0,1.38-1.37V35h1.34v2.43C34.14,39.61,33.58,40.17,31.42,40.17Z"
+    fill="#484f60"/>
+  <path
+    d="M27.83,26.63v4.24h1a3.57,3.57,0,0,0,.78-.06,1.22,1.22,0,0,0,.52-.26,1.44,1.44,0,0,0,.34-.62,4.13,4.13,0,0,0,.13-1.18,3.79,3.79,0,0,0-.13-1.14,1.51,1.51,0,0,0-.37-.62,1.14,1.14,0,0,0-.6-.3,5.93,5.93,0,0,0-1.06-.06Z"
+    fill="#484f60"/>
+  <path
+    d="M21.86,26.63v1.82h.71a3.57,3.57,0,0,0,1-.1A.88.88,0,0,0,24,28a.84.84,0,0,0,.14-.5.8.8,0,0,0-.2-.57.88.88,0,0,0-.52-.29,6.36,6.36,0,0,0-.93,0Z"
+    fill="#484f60"/>
+  <path
+    d="M19.14,24.27v9h19.7v-9Zm6.12,4.24a1.68,1.68,0,0,1-.54.63,1.9,1.9,0,0,1-.67.3,6.57,6.57,0,0,1-1.34.1h-.85V32H20.57V25.54h2.07a7.75,7.75,0,0,1,1.54.1,1.73,1.73,0,0,1,.93.63,2,2,0,0,1,.37,1.25A2,2,0,0,1,25.26,28.51Zm6.45,1.66A2.91,2.91,0,0,1,31,31.31a2.28,2.28,0,0,1-.91.51A4,4,0,0,1,29,32H26.54V25.54H28.9a4.21,4.21,0,0,1,1.22.13,2.08,2.08,0,0,1,1,.59,2.79,2.79,0,0,1,.61,1,4.76,4.76,0,0,1,.21,1.52A4.19,4.19,0,0,1,31.71,30.17Zm5.7-3.54h-3.1v1.52H37v1.08H34.31V32H33V25.54h4.39Z"
+    fill="#484f60"/>
+  <path d="M25.2,10.84v6.44c0,1.78.27,2,2,2h6.23Z" fill="#484f60"/>
+</svg>

package/projects/sharedcomponents/src/lib/assets/icons/print.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
+  <path
+    d="M38,16.5H12a2,2,0,0,0-2,2v9a2,2,0,0,0,2,2h2v-5H36v5h2a2,2,0,0,0,2-2v-9A2,2,0,0,0,38,16.5ZM37,21a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,37,21Z"
+    fill="#484f60"/>
+  <path d="M35,11.5v5H15v-5H35m1-1H14v7H36v-7Z" fill="#484f60"/>
+  <path d="M35,25.5v13H15v-13H35m1-1H14v15H36v-15Z" fill="#484f60"/>
+  <rect x="17" y="28.3" width="16" height="0.8" fill="#484f60"/>
+  <rect x="17" y="31.5" width="16" height="0.8" fill="#484f60"/>
+  <rect x="17" y="34.7" width="16" height="0.8" fill="#484f60"/>
+</svg>

package/projects/sharedcomponents/src/lib/assets/icons/signature_field.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
+  <path
+    d="M20.1,25.42a1.1,1.1,0,1,1,1.27,1.45l-3.3,9.07A63.13,63.13,0,0,1,28,28.3l1.26-12-8.26-3-6.77,10A62.4,62.4,0,0,1,17,35.54l3.3-9.07A1.12,1.12,0,0,1,20.1,25.42Z"
+    fill="#484f60"/>
+  <rect x="21.62" y="11.43" width="8.79" height="2.34" transform="translate(5.88 -8.14) rotate(20)" fill="#484f60"/>
+  <path
+    d="M18.11,37.48c1.44,2.65,4.58,2.94,7.23,2.1,1.41-.44,2.2-1.49,3.44-2.06,2.42-1.1,3.13,1.2,5.36,1.37.42,0,2-.65,1.54-.68-2.55-.19-2.93-3.13-5.51-2.65a4.9,4.9,0,0,0-1.64.71c-.77.49-1.31,1.62-2.07,2l-4.61.56A3.38,3.38,0,0,1,20,37c-.22-.41-2,.28-1.85.5Z"
+    fill="#484f60"/>
+</svg>

package/projects/sharedcomponents/src/lib/assets/icons/xml.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
+  <path
+    d="M31.42,40.17H13.87c-2.15,0-2.71-.56-2.71-2.72V12.88c0-2.15.56-2.71,2.71-2.71H25.48l8.66,8.88v3.43H32.8V19.6l-7.88-8.09H13.87c-1.37,0-1.37,0-1.37,1.37V37.45c0,1.37,0,1.37,1.37,1.37H31.42c1.38,0,1.38,0,1.38-1.37V35h1.34v2.43C34.14,39.61,33.58,40.17,31.42,40.17Z"
+    fill="#484f60"/>
+  <path d="M25.2,10.84v6.44c0,1.78.27,2,2,2h6.23Z" fill="#484f60"/>
+  <path
+    d="M19.14,24.27v9h19.7v-9Zm5.36,7.41-1.3-2-1.3,2H20.48l2-3.06-1.81-2.8h1.38l1.18,1.88,1.15-1.88h1.37l-1.83,2.85,2,3Zm7.67,0h-1.1V27.07l-1.16,4.61H28.77l-1.16-4.61v4.61H26.52V25.82h1.76l1.07,4,1-4h1.77Zm5.33,0H33.38V25.87h1.18v4.82H37.5Z"
+    fill="#484f60"/>
+</svg>

package/projects/sharedcomponents/src/lib/components/circular-gauge/co-circular-gauge.component.ts

@@ -0,0 +1,139 @@
+import { Component, HostBinding, Input, ViewChild, ViewEncapsulation } from "@angular/core";
+import {
+  AxisModel,
+  CircularGaugeComponent,
+} from "@syncfusion/ej2-angular-circulargauge";
+import { AnnotationModel } from "@syncfusion/ej2-circulargauge/src/circular-gauge/axes/axis-model";
+
+enum GaugeColor {
+  Low = '#E0E0E0',
+  Medium = '#F88952',
+  High = '#5FDCB3',
+}
+
+@Component({
+  selector: "co-circular-gauge",
+  template: `
+    <div class="circular-gauge-wrapper">
+      <ejs-circulargauge
+        class="circular-gauge"
+        [width]="'100%'"
+        [axes]="getAxes()">
+      </ejs-circulargauge>
+    </div>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class CoCircularGaugeComponent {
+
+  @ViewChild('circulargauge')
+  public circulargauge: CircularGaugeComponent;
+
+  @Input()
+  public set value(value: number) {
+    this._value = value;
+    this._setColor();
+  }
+
+  public get value(): number {
+    return this._value;
+  }
+
+  public get color(): string {
+    return this._color;
+  }
+
+  @HostBinding("class.co-circular-gauge")
+  public showClass() {
+    return true;
+  }
+
+  private _value: number;
+  private _color: GaugeColor = GaugeColor.Low;
+
+  public majorTicks: Object = {
+    height: 0,
+  };
+
+  public minorTicks: Object = {
+    height: 0
+  };
+
+  public labelStyle: Object = {
+    position: 'Inside', useRangeColor: true,
+    font: {size: '0px', fontFamily: 'inherit'}
+  };
+
+  public lineStyle: Object = {
+    width: 0
+  };
+
+  public ranges: Object[] = [
+    {
+      start: 1, end: 100,
+      radius: '13px',
+      startWidth: 3, endWidth: 3,
+      color: '#E0E0E0',
+      roundedCornerRadius: 0
+    },
+  ];
+
+  public getAxes(): AxisModel[] {
+    return [{
+      minimum: 0,
+      maximum: 100,
+      radius: '15px',
+      startAngle: 1,
+      endAngle: 360,
+      majorTicks: this.majorTicks,
+      minorTicks: this.minorTicks,
+      labelStyle: this.labelStyle,
+      lineStyle: this.lineStyle,
+      ranges: this.ranges,
+      pointers: this.getPointers(),
+      annotations: this.getAnnotations(),
+    }];
+  }
+
+  public getPointers(): Object[] {
+    if (this.value) {
+
+      return [{
+        roundedCornerRadius: 0,
+        value: this.value,
+        type: 'RangeBar',
+        radius: '13px',
+        color: this.color,
+        border: {
+          width: 0
+        },
+        animation: {
+          enable: false
+        },
+        pointerWidth: 3
+      }]
+    }
+  };
+
+  public getAnnotations(): AnnotationModel[] {
+    if (this.value) {
+      return [{
+        content: '<div class="annotation">' +
+          this.value + '%</div>',
+        angle: 90,
+        radius: '50%',
+        zIndex: '10',
+      }];
+    }
+  }
+
+  private _setColor(): void {
+    if (this.value == 0) {
+      this._color = GaugeColor.Low;
+    } else if (this.value >= 0 && this.value < 100) {
+      this._color = GaugeColor.Medium;
+    } else if (this.value == 100) {
+      this._color = GaugeColor.High;
+    }
+  }
+}

package/projects/sharedcomponents/src/lib/components/circular-gauge/co-circular-gauge.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { CircularGaugeModule } from "@syncfusion/ej2-angular-circulargauge";
+import { CoCircularGaugeComponent } from "./co-circular-gauge.component";
+
+@NgModule({
+  imports: [
+    CommonModule,
+    CircularGaugeModule
+  ],
+  declarations: [
+    CoCircularGaugeComponent
+  ],
+  exports: [
+    CoCircularGaugeComponent
+  ]
+})
+export class CoCircularGaugeModule {
+}

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

@@ -0,0 +1,68 @@
+import {Directive, EventEmitter, Inject, Input, LOCALE_ID, Output} from "@angular/core";
+import {LanguageCode} from "../../../../enum/language-code.enum";
+import {AgendaEvent} from "../../../../model/agenda-event.model";
+import {AgendaEventPerDay} from "../../../../model/agenda-event-per-day.model";
+import {DateUtils} from "../../../../utils/date-utils";
+import {IconCacheService} from "../../../../service/icon-cache.service";
+
+@Directive()
+export abstract class AgendaBaseViewComponent {
+
+    @Input()
+    public set selectedDate(value: Date) {
+        this._selectedDate = value;
+        this._dateIsSet();
+    }
+
+    @Input()
+    public set eventsPerDay(value: AgendaEventPerDay[]) {
+        this._eventsPerDay = value;
+        this._eventsAreSet();
+    }
+
+    @Output()
+    public eventChecked: EventEmitter<AgendaEvent> = new EventEmitter<AgendaEvent>();
+
+    public get selectedDate(): Date {
+        return this._selectedDate;
+    }
+
+    public get eventsPerDate(): AgendaEventPerDay[] {
+        return this._eventsPerDay;
+    }
+
+    private _selectedDate: Date;
+    private _eventsPerDay: AgendaEventPerDay[] = [];
+
+    constructor(
+        @Inject(LOCALE_ID) protected readonly locale: LanguageCode,
+        public iconCacheService: IconCacheService
+    ) {
+    }
+
+    //overridable by descendents
+    protected prepareViewData(): void {
+    }
+
+    protected getEventsFromDate(date: Date): AgendaEvent[] {
+        let events: AgendaEvent[] = [];
+        if (this.eventsPerDate) {
+            const len: number = this.eventsPerDate.length;
+            for (let i: number = 0; i < len; i++) {
+                if (DateUtils.DatesEqual(date, this.eventsPerDate[i].date)) {
+                    events = this.eventsPerDate[i].events;
+                    break;
+                }
+            }
+        }
+        return events;
+    }
+
+    private _dateIsSet(): void {
+        this.prepareViewData();
+    }
+
+    private _eventsAreSet(): void {
+        this.prepareViewData();
+    }
+}

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

@@ -0,0 +1,31 @@
+import {Component, ViewEncapsulation} from "@angular/core";
+import {AgendaEvent} from "../../../../model/agenda-event.model";
+import {AgendaBaseViewComponent} from "./agenda-base-view.component";
+
+
+@Component({
+    selector: "agenda-day-view",
+    template: `
+        <div class="view-wrapper">
+            <agenda-hour-view-labels [date]="selectedDate"></agenda-hour-view-labels>
+            <agenda-hour-view [date]="selectedDate">
+                <agenda-events
+                        [halfHourHeight]="40"
+                        [events]="events"
+                        (eventChecked)="eventChecked.emit($event)"
+                ></agenda-events>
+            </agenda-hour-view>
+        </div>
+    `,
+  encapsulation: ViewEncapsulation.None
+})
+export class AgendaDayViewComponent extends AgendaBaseViewComponent {
+
+    public events: AgendaEvent[] = [];
+
+    protected prepareViewData(): void {
+        if (this.eventsPerDate && this.eventsPerDate.length > 0) {
+            this.events = this.eventsPerDate[0].events;
+        }
+    }
+}

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

@@ -0,0 +1,67 @@
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+  Renderer2,
+  ViewEncapsulation
+} from "@angular/core";
+import {AgendaEvent} from "../../../../model/agenda-event.model";
+import {NULL_AGENDA_EVENT} from "../../../../model/agenda-null-objects";
+import {Icon} from "../../../../enum/icon.enum";
+
+
+@Component({
+    selector: "agenda-event",
+    template: `
+        <div class="agenda-event-wrapper" [class.checkable]="event.showCheckbox" [class.selected]="event.checked" (click)="checkEvent($event)">
+            <div [textContent]="event.fromToRepresentation" class="event-description"></div>
+            <icon *ngIf="event.showCheckbox" icon="check_round_open" [class.checked]="event.checked"></icon>
+        </div>
+    `,
+  encapsulation: ViewEncapsulation.None
+})
+export class AgendaEventComponent implements OnInit, OnDestroy {
+
+    public readonly icons: typeof Icon = Icon;
+
+    @Input()
+    public event: AgendaEvent = NULL_AGENDA_EVENT;
+
+    @Input()
+    public halfHourHeight: number;
+
+    @Output()
+    public eventChecked: EventEmitter<AgendaEvent> = new EventEmitter<AgendaEvent>();
+
+    constructor(
+        private _elementRef: ElementRef,
+        private _renderer: Renderer2
+    ) {
+    }
+
+    ngOnDestroy(): void {
+        this._elementRef = undefined;
+    }
+
+    ngOnInit(): void {
+        const hourTo: number = this.event.from.getHours();
+        const minutesTo: number = this.event.from.getMinutes();
+        const multiply: number = hourTo + (minutesTo / 60);
+        const top: number = multiply * (this.halfHourHeight * 2);
+        this._renderer.setStyle(this._elementRef.nativeElement, "top", top + "px");
+
+        const hours: number = Math.abs(this.event.to.getTime() - this.event.from.getTime()) / 3600000;
+        const height: number = hours * (this.halfHourHeight * 2) - 1;
+        this._renderer.setStyle(this._elementRef.nativeElement, "height", height + "px");
+    }
+
+    public checkEvent(event: MouseEvent): void {
+        this.event.checked = !this.event.checked;
+        this.eventChecked.emit(this.event);
+    }
+
+}

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

@@ -0,0 +1,48 @@
+import {Component, EventEmitter, Input, Output, ViewEncapsulation} from "@angular/core";
+import {CalendarView} from "../../../../enum/calendar-view.enum";
+import {AgendaEvent} from "../../../../model/agenda-event.model";
+
+
+@Component({
+    selector: "agenda-events",
+    template: `
+        <ng-container *ngIf="view !== viewTypes.WeekSelectView">
+            <agenda-event
+                    *ngFor="let event of events"
+                    [halfHourHeight]="halfHourHeight"
+                    [event]="event"
+                    (eventChecked)="eventChecked.emit($event)"
+            ></agenda-event>
+        </ng-container>
+        <ng-container *ngIf="view === viewTypes.WeekSelectView">
+            <agenda-select-event
+                    *ngFor="let event of events"
+                    [event]="event"
+                    (eventChecked)="eventChecked.emit($event)"
+            ></agenda-select-event>
+        </ng-container>
+    `,
+  encapsulation: ViewEncapsulation.None
+})
+export class AgendaEventsComponent {
+
+    public readonly viewTypes: typeof CalendarView = CalendarView;
+
+    @Input()
+    public view: CalendarView = CalendarView.WeekView;
+
+    @Input()
+    public type: string = "";
+
+    @Input()
+    public events: AgendaEvent[] = [];
+
+    @Input()
+    public halfHourHeight: number;
+
+    @Output()
+    public readonly eventChecked: EventEmitter<AgendaEvent> = new EventEmitter<AgendaEvent>();
+
+    constructor() {
+    }
+}

package/projects/sharedcomponents/src/lib/components/date-planning/component/agenda/agenda-half-hour-cell.component.ts

@@ -0,0 +1,81 @@
+import {Component, ElementRef, Input, OnDestroy, Renderer2, ViewChild, ViewEncapsulation} from "@angular/core";
+import {DateUtils} from "../../../../utils/date-utils";
+
+
+@Component({
+    selector: "agenda-half-hour-cell",
+    template: `
+        <div id="{{id}}" class="cell-wrapper">
+            <div *ngIf="showLabel" [class.show]="showLabel" class="half-hour-label">
+                <div [textContent]="date | date:'HH:mm'"></div>
+            </div>
+            <div *ngIf="showCurrentTime" id="currentTime" class="current-time" #currentTime></div>
+            <div class="content-wrapper">
+                <ng-content></ng-content>
+            </div>
+        </div>
+    `,
+  encapsulation: ViewEncapsulation.None
+})
+export class AgendaHalfHourCellComponent implements OnDestroy {
+
+    @ViewChild("currentTime")
+    public currentTimeElement: ElementRef;
+
+    @Input()
+    public set date(value: Date) {
+        this._date = value;
+        this._checkDate();
+        this._checkWorkingDayStart();
+    }
+
+    public get date(): Date {
+        return this._date;
+    }
+
+    @Input()
+    public showLabel: boolean = false;
+
+    public showCurrentTime: boolean = false;
+
+    public currentTimeTop: number = 0;
+
+    public id: string;
+
+    private _date: Date;
+    private _id: string;
+
+    constructor(
+        private _renderer: Renderer2
+    ) {
+    }
+
+    ngOnDestroy(): void {
+        this.currentTimeElement = undefined;
+    }
+
+    private _checkDate(): void {
+        const checkDate: Date = new Date();
+        const minutesFrom: number = this.date.getMinutes();
+        const minutesTo: number = minutesFrom + 30;
+
+        if (DateUtils.DatesEqual(this.date, checkDate)) {
+            if (checkDate.getHours() === this.date.getHours() && (checkDate.getMinutes() > minutesFrom && checkDate.getMinutes() < minutesTo)) {
+                this.currentTimeTop = (Math.max(checkDate.getMinutes(), .01) / 60) * 100;
+                this._positionCurrentTime();
+                this.showCurrentTime = true;
+            }
+        }
+    }
+
+    private _checkWorkingDayStart(): void {
+        this.id = (this._date.getHours() === 8 && this._date.getMinutes() === 30) ? "dayStart" : "";
+    }
+
+    private _positionCurrentTime(): void {
+        if (this.currentTimeElement) {
+            this._renderer.setStyle(this.currentTimeElement.nativeElement, "top", this.currentTimeTop + "%");
+            this.currentTimeElement.nativeElement.scrollIntoView();
+        }
+    }
+}