@colijnit/sharedcomponents 261.1.2 → 261.20.0

package/projects/sharedcomponents/src/lib/components/custom-pdf/custom-pdf-dialog.component.ts

@@ -1,299 +0,0 @@
-import {AfterViewInit, Component, ElementRef, EventEmitter, HostBinding, Input, OnInit, Output, ViewChild, ViewEncapsulation} from '@angular/core';
-import {jsPDF} from 'jspdf';
-import {IconCacheService} from '../../service/icon-cache.service';
-import {DomSanitizer} from '@angular/platform-browser';
-import SignaturePad from 'signature_pad';
-import {toJpeg} from 'html-to-image';
-import {CoDocument} from '@colijnit/mainapi/build/model/co-document.bo';
-import {FileUtils} from '@colijnit/mainapi/build/utils/file-utils';
-
-import {FileType} from '@colijnit/mainapi/build/enum/file-type.enum';
-import {Icon} from '../../enum/icon.enum';
-
-@Component({
-  selector: 'co-custom-pdf-dialog',
-  template: `
-    <co-dialog
-      [footerTemplate]="footerTemplate"
-      id="custom-pdf-dialog"
-      (closeClick)="closePDFDialog.emit()">
-      <!-- create a nice container for loader so it is not random in the corner somewhere -->
-      <div *ngIf="showLoader" class="loader-container">
-        <co-loader *ngIf="showLoader"></co-loader>
-      </div>
-
-      <div #pdfBody id="pdfBody">
-        <div [innerHTML]="fileBody"></div>
-      </div>
-      <ng-template #footerTemplate>
-        <div class="co-dialog-footer-button-wrapper">
-          <co-button class="save-button"
-                     [iconData]="iconCacheService.getIcon(icons.CheckDuotone)"
-                     (click)="handleSaveClicked()"></co-button>
-          <co-button class="close-button"
-                     [iconData]="iconCacheService.getIcon(icons.CrossSkinny)"
-                     (click)="closePDFDialog.emit()"></co-button>
-        </div>
-      </ng-template>
-    </co-dialog>
-  `,
-  encapsulation: ViewEncapsulation.None
-})
-export class CustomPdfDialogComponent implements OnInit, AfterViewInit {
-  public readonly icons: typeof Icon = Icon;
-
-  @HostBinding('class.co-custom-pdf-dialog')
-  public showClass() {
-    return true;
-  }
-
-  @ViewChild('pdfBody')
-  public pdfBody: ElementRef;
-
-  @Input()
-  public additionalFileContents: any;
-
-  @Input()
-  public additionalFileName: string = '';
-
-  @Output()
-  public closePDFDialog: EventEmitter<any> = new EventEmitter<any>();
-
-  @Output()
-  public additionalFileChangeEvent: EventEmitter<CoDocument> = new EventEmitter<CoDocument>();
-
-  public canvas: HTMLCanvasElement;
-  public context: CanvasRenderingContext2D;
-  public signaturePads: { [key: string]: SignaturePad } = {};
-  public signatureCanvases: { [key: string]: ElementRef } = {};
-  public fileBody: any = '';
-  public fileStyle: string = '';
-
-  public showLoader: boolean = false;
-
-  // set to true if you want to skip email for debug purposes
-  private enableLocalPreview = false;
-
-  constructor(
-    public iconCacheService: IconCacheService,
-    private _sanitizer: DomSanitizer
-  ) {
-  }
-
-  ngOnInit(): void {
-    this._processAdditionalFileContents();
-  }
-
-  ngAfterViewInit(): void {
-    ['signatureCanvas', 'signatureCanvas2'].forEach(id => {
-      const canvasElement = document.getElementById(id);
-      if (canvasElement) {
-        const canvasRef = new ElementRef(canvasElement);
-        const signaturePad = new SignaturePad(<HTMLCanvasElement>canvasRef.nativeElement);
-        this.signatureCanvases[id] = canvasRef;
-        this.signaturePads[id] = signaturePad;
-
-        setTimeout(() => {
-          this._resizeSignatureCanvas(signaturePad, canvasRef);
-        });
-      }
-    });
-    const clearButton = document.getElementById('clearButton');
-    clearButton?.addEventListener('click', () => this.handleClear());
-
-    // Due to a bug or known issue with html-to-image we need a bit of JS the fill in the checked value when selecting a checkbox.
-    // Handling the checkboxes and radiobuttons
-    const container: HTMLElement = this.pdfBody.nativeElement as HTMLElement;
-    container.addEventListener('change', (event: Event) => {
-      const target = event.target as HTMLElement;
-      if (target.tagName === 'INPUT' && (target as HTMLInputElement).type === 'checkbox') {
-        const checkbox: HTMLInputElement = target as HTMLInputElement;
-        if (checkbox.checked) {
-          checkbox.setAttribute('checked', 'true');
-        } else {
-          checkbox.removeAttribute('checked');
-        }
-      } else if (target.tagName === 'INPUT' && (target as HTMLInputElement).type === 'radio') {
-        const radio: HTMLInputElement = target as HTMLInputElement;
-        const groupName: string = radio.name;
-        const radios: NodeListOf<Element> = container.querySelectorAll(`input[type="radio"][name="${groupName}"]`);
-        radios.forEach((radio) => radio.removeAttribute('checked'));
-        if (radio.checked) {
-          radio.setAttribute('checked', 'true');
-        }
-      }
-    });
-  }
-
-  private _processAdditionalFileContents(): void {
-    if (!this.additionalFileContents) return;
-
-    const styles = this.extractStyleParts(this.additionalFileContents);
-    this.fileStyle = styles.join('\n').trim();
-    if (this.fileStyle) {
-      const head = document.getElementsByTagName('head')[0];
-      const styleEl = document.createElement('style');
-      styleEl.appendChild(document.createTextNode(this.fileStyle));
-      head.appendChild(styleEl);
-    }
-
-    const bodyParts = this.extractBodyContents(this.additionalFileContents);
-    const bodyHtml = (bodyParts[0] ?? this.removeStyleAndScriptTags(this.additionalFileContents)).trim();
-    this.fileBody = this._sanitizer.bypassSecurityTrustHtml(bodyHtml);
-  }
-
-  public extractStyleParts(html: string): string[] {
-    const stylePattern = /<style[^>]*>([\s\S]*?)<\/style>/gi;
-    const matches: string[] = [];
-    let match: RegExpExecArray | null;
-    while ((match = stylePattern.exec(html)) !== null) {
-      matches.push((match[1] ?? '').trim());
-    }
-    return matches;
-  }
-
-  public removeStyleAndScriptTags(html: string): string {
-    const styleTagPattern = /<style[^>]*>[\s\S]*?<\/style>/gi;
-    const scriptTagPattern = /<script[^>]*>[\s\S]*?<\/script>/gi;
-    return (html || '').replace(styleTagPattern, '').replace(scriptTagPattern, '');
-  }
-
-  public extractBodyContents(html: string): string[] {
-    html = this.removeStyleAndScriptTags(html);
-    const bodyPattern = /<body[^>]*>([\s\S]*?)<\/body>/gi;
-    const matches: string[] = [];
-    let match: RegExpExecArray | null;
-    while ((match = bodyPattern.exec(html)) !== null) {
-      matches.push((match[1] ?? '').trim());
-    }
-    return matches;
-  }
-
-  private _isLocalhost(): boolean {
-    return ['localhost', '127.0.0.1', '::1'].includes(location.hostname);
-  }
-
-  public async handleSaveClicked(): Promise<void> {
-    this.showLoader = true;
-
-    const clearButton = document.getElementById('clearButton');
-    if (clearButton) clearButton.hidden = true;
-
-    const doc = new jsPDF({ unit: 'mm', format: 'a4' });
-
-    let createdTemp = false;
-    let root: HTMLElement | null =
-      (this.pdfBody?.nativeElement as HTMLElement) ||
-      (document.querySelector('#pdfBody') as HTMLElement);
-
-    if (!root) {
-      root = document.createElement('div');
-      root.id = 'pdfBody';
-      root.style.position = 'fixed';
-      root.style.left = '-99999px';
-      root.style.top = '0';
-      root.style.width = '794px';
-      root.style.pointerEvents = 'none';
-      document.body.appendChild(root);
-      createdTemp = true;
-    }
-
-    if (this.additionalFileContents && !root.hasChildNodes()) {
-      const html = String(this.additionalFileContents);
-      if (html.includes('<html')) {
-        const parsed = new DOMParser().parseFromString(html, 'text/html');
-        root.innerHTML = parsed.body?.innerHTML || html;
-      } else {
-        root.innerHTML = html;
-      }
-    }
-
-    const allSections = Array.from(root.querySelectorAll('section'));
-    const leafSections = allSections.filter(s => !s.querySelector('section'));
-    const nodesToRender: HTMLElement[] =
-      leafSections.length ? leafSections : (allSections.length ? allSections : [root]);
-
-    const pageWidth = doc.internal.pageSize.getWidth();
-    const pageHeight = doc.internal.pageSize.getHeight();
-
-    for (let i = 0; i < nodesToRender.length; i++) {
-      const el = nodesToRender[i];
-      try {
-        const dataUrl = await toJpeg(el, { quality: 1, backgroundColor: 'white' });
-        await new Promise<void>((resolve) => {
-          const img = new Image();
-          img.onload = () => {
-            const w = img.width;
-            const h = img.height;
-            const scale = Math.min(pageWidth / w, pageHeight / h);
-            const renderW = w * scale;
-            const renderH = h * scale;
-
-            doc.addImage(dataUrl, 'JPG', 0, 0, renderW, renderH);
-            if (i < nodesToRender.length - 1) doc.addPage();
-            resolve();
-          };
-          img.src = dataUrl;
-        });
-      } catch (err) {
-        console.error('Error generating image:', err);
-      }
-    }
-
-    if (createdTemp && root && root.parentNode) {
-      root.parentNode.removeChild(root);
-    }
-
-    // enableLocalPreview can be enabled to see the output without sending email
-    if (this.enableLocalPreview && this._isLocalhost()) {
-      const blob = doc.output('blob');
-      const url = URL.createObjectURL(blob);
-      window.open(url as unknown as string, '_blank');
-      this.showLoader = false;
-      if (clearButton) clearButton.hidden = false;
-      return;
-    }
-
-    try {
-      const tempFile = doc.output('datauristring');
-      const file = this.dataURItoBlob(tempFile);
-      const fileAsCoDocument = await FileUtils.ReadFileAsNewCoDocument(file);
-      fileAsCoDocument.fileType = FileUtils.IsImageFile(file) ? FileType.Image : FileType.Document;
-      fileAsCoDocument.creationDate = new Date();
-      fileAsCoDocument.modifiedDate = new Date();
-      fileAsCoDocument.reports = 1;
-      this.additionalFileChangeEvent.emit(fileAsCoDocument);
-    } catch (e) {
-      console.error('PDF packaging failed:', e);
-    } finally {
-      this.showLoader = false;
-      this.closePDFDialog.emit();
-      if (clearButton) clearButton.hidden = false;
-    }
-  }
-
-  public dataURItoBlob(dataURI): File {
-    const byteString: string = atob(dataURI.split(',')[1]);
-    const ab: ArrayBuffer = new ArrayBuffer(byteString.length);
-    const ia: Uint8Array = new Uint8Array(ab);
-    for (let i: number = 0; i < byteString.length; i++) {
-      ia[i] = byteString.charCodeAt(i);
-    }
-    return new File([ab], this.additionalFileName + '.pdf');
-  }
-
-  public handleClear(): void {
-    Object.values(this.signaturePads).forEach(signaturePad => {
-      signaturePad?.clear();
-    });
-  }
-
-  private _resizeSignatureCanvas(signature: SignaturePad, signatureCanvas: ElementRef): void {
-    const imageBeforeResize: string = signature.toDataURL();
-    const ratio: number = Math.max(window.devicePixelRatio || 1, 1);
-    signatureCanvas.nativeElement.width = signatureCanvas.nativeElement.offsetWidth * ratio;
-    signatureCanvas.nativeElement.height = signatureCanvas.nativeElement.offsetHeight * ratio;
-    signatureCanvas.nativeElement.getContext("2d").scale(ratio, ratio);
-    signature.fromDataURL(imageBeforeResize);
-  }
-}

package/projects/sharedcomponents/src/lib/components/custom-pdf/custom-pdf-dialog.module.ts

@@ -1,28 +0,0 @@
-import {NgModule} from "@angular/core";
-import {ButtonModule, CoDialogModule, IconModule, LoaderModule} from '@colijnit/corecomponents_v12';
-import {CustomPdfDialogComponent} from "./custom-pdf-dialog.component";
-import {CommonModule} from "@angular/common";
-import {SharedComponentsTranslationModule} from "../../translation/shared-components-translation.module";
-
-
-@NgModule({
-  imports: [
-    IconModule,
-    CoDialogModule,
-    CommonModule,
-    ButtonModule,
-    SharedComponentsTranslationModule,
-    LoaderModule
-  ],
-  declarations: [
-    CustomPdfDialogComponent
-  ],
-  exports: [
-    CustomPdfDialogComponent
-  ],
-  providers: [
-  ]
-})
-export class CustomPdfDialogModule {
-
-}

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

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

@@ -1,35 +0,0 @@
-import {Component, Input, 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)"
-                        [customEventObject]="customEventObject"
-                ></agenda-events>
-            </agenda-hour-view>
-        </div>
-    `,
-  encapsulation: ViewEncapsulation.None
-})
-export class AgendaDayViewComponent extends AgendaBaseViewComponent {
-
-    public events: AgendaEvent[] = [];
-
-    @Input()
-    public customEventObject: boolean;
-
-    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

@@ -1,73 +0,0 @@
-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";
-import {IconCacheService} from "../../../../service/icon-cache.service";
-
-
-@Component({
-    selector: "agenda-event",
-    template: `
-        <div class="agenda-event-wrapper" [class.checkable]="event.showCheckbox" [class.selected]="event.checked" (click)="checkEvent($event)">
-            <div [textContent]="event.description" class="event-description"></div>
-            <co-icon *ngIf="event.showCheckbox" [iconData]="iconCacheService.getIcon(icons.ArrowPointRight)" [class.checked]="event.checked"></co-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 customEventObject: boolean;
-
-    @Input()
-    public halfHourHeight: number;
-
-    @Output()
-    public eventChecked: EventEmitter<AgendaEvent> = new EventEmitter<AgendaEvent>();
-
-    constructor(
-        private _elementRef: ElementRef,
-        private _renderer: Renderer2,
-        public iconCacheService: IconCacheService
-    ) {
-    }
-
-    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

@@ -1,53 +0,0 @@
-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)"
-                    [customEventObject]="customEventObject"
-            >
-
-            </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 customEventObject: boolean;
-
-    @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

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