@colijnit/sharedcomponents 1.0.56 → 1.0.58

package/projects/sharedcomponents/src/lib/components/send-method-dialog/send-method-dialog.component.ts

@@ -1,325 +0,0 @@
-import {
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  EventEmitter,
-  HostBinding,
-  Input,
-  OnDestroy,
-  OnInit,
-  Output,
-  ViewChild,
-  ViewEncapsulation
-} from '@angular/core';
-import {Icon} from '../../enum/icon.enum';
-import {IconCacheService} from '../../service/icon-cache.service';
-import {animate, state, style, transition, trigger} from '@angular/animations';
-import {Subscription} from 'rxjs';
-import {SharedService} from '../../service/shared.service';
-import {ReportLayoutSelectionEmail} from '@colijnit/mainapi/build/model/report-layout-selection-email.bo';
-import {ReportLayoutSelectionPrint} from '@colijnit/mainapi/build/model/report-layout-selection-print.bo';
-import {ReportingDocumentPdfBaseRequest} from '@colijnit/mainapi/build/model/reporting-document-pdf-base-request';
-import {SendMethodService} from './service/send-method.service';
-import {SendMethod} from '../../model/send-method';
-import {SendMethodType} from '@colijnit/mainapi/build/enum/send-method-type.enum';
-import {Printer} from '@colijnit/mainapi/build/model/printer.bo';
-import {
-  ReportingDocumentEmailSignDocBaseRequest
-} from '@colijnit/mainapi/build/model/reporting-document-email-sign-doc-base-request';
-import {
-  ReportingDocumentPrintSignDocBaseRequest
-} from "@colijnit/mainapi/build/model/reporting-document-print-sign-doc-base-request";
-
-export const sendMethodsWithIcon: SendMethod[] = [
-  new SendMethod(SendMethodType.Fax, "Fax", Icon.PrintRegular),
-  new SendMethod(SendMethodType.Print, "Print", Icon.PrintSolid),
-  new SendMethod(SendMethodType.Email, "Email", Icon.AtSolid),
-  new SendMethod(SendMethodType.Edi, "Edi", Icon.FileExportSolid),
-  new SendMethod(SendMethodType.EmailTemplate, "Email template", Icon.EnvelopeRegular),
-  new SendMethod(SendMethodType.Sms, "Sms", Icon.MessageSmsSolid),
-  new SendMethod(SendMethodType.WebService, "Webservice", Icon.PrintRegular),
-  new SendMethod(SendMethodType.Pdf, "Pdf", Icon.Pdf)
-]
-
-@Component({
-  selector: 'co-send-method-dialog',
-  template: `
-    <co-dialog id="sendOptionsDialog" [headerTemplate]="headerTemplate" [footerTemplate]="footerTemplate"
-               (closeClick)="closeClick.emit($event)">
-      <ng-template #headerTemplate>
-        <div class="co-dialog-header-title-wrapper">
-          <co-icon [iconData]="iconCacheService.getIcon(icons.EnvelopeRegular)"></co-icon>
-          <div class="co-dialog-header-title" [textContent]="headerTitle"></div>
-        </div>
-        <div class="dialog-navigation-wrapper">
-          <div class="send-button-wrapper" *ngFor="let sendMethod of sendMethods; let index = index"
-               [class.selected]="activeSendMethod ? sendMethod.code === activeSendMethod.code : index === 0"
-               (click)="handleSendMethodClick(sendMethod)">
-            <div class="custom-button-title" [textContent]="sendMethod.description"></div>
-          </div>
-        </div>
-      </ng-template>
-
-      <div class="dialog-content-wrapper">
-        <div class="send-methods-wrapper">
-
-        </div>
-        <div #navigationItems class="send-method-navigation-wrapper" [class.smooth-scrolling]="!startUp">
-          <div #faxItems class="send-method-navigation-content co-small-scrollbar">
-
-          </div>
-          <div #printItems class="send-method-navigation-content co-small-scrollbar" *ngIf="showPrint">
-            <co-send-method-printer
-              [printerList]="printerList"
-              [layouts]="printLayouts"
-            ></co-send-method-printer>
-          </div>
-          <div #emailItems class="send-method-navigation-content co-small-scrollbar" *ngIf="showEmail">
-            <co-send-method-email
-              [emailAddresses]="emailAddresses"
-              [layouts]="emailLayouts"
-            ></co-send-method-email>
-          </div>
-          <div #ediItems class="send-method-navigation-content co-small-scrollbar" *ngIf="showEdi">
-
-          </div>
-          <div #emailTemplateItems class="send-method-navigation-content co-small-scrollbar" *ngIf="showEmailTemplate">
-
-          </div>
-          <div #smsItems class="send-method-navigation-content co-small-scrollbar" *ngIf="showSms">
-
-          </div>
-          <div #webServiceItems class="send-method-navigation-content co-small-scrollbar" *ngIf="showWebservice">
-
-          </div>
-          <div #pdfItems class="send-method-navigation-content co-small-scrollbar" *ngIf="showPdf">
-              <co-send-method-pdf
-                      [layouts]="printLayouts"
-              ></co-send-method-pdf>
-          </div>
-        </div>
-      </div>
-      <ng-template #footerTemplate>
-        <div class="co-dialog-footer-button-wrapper">
-          <co-button class="save-button"
-                     [iconData]="iconCacheService.getIcon(icons.CheckDuotone)"
-                     (click)="okClick.emit(activeSendMethod ? activeSendMethod.code : '0')"></co-button>
-          <co-button class="close-button"
-                     [iconData]="iconCacheService.getIcon(icons.CrossSkinny)"
-                     (click)="closeClick.emit($event)"></co-button>
-        </div>
-      </ng-template>
-    </co-dialog>
-  `,
-  encapsulation: ViewEncapsulation.None,
-  animations: [
-    trigger('slideInOut', [
-      state('*', style({transform: 'translateX(0%)', width: '100%', opacity: '1'})),
-      state('void', style({transform: 'translateX(150%)', opacity: '0'})),
-      transition('void => *', animate(250))
-    ])
-  ]
-})
-
-export class SendMethodDialogComponent implements OnInit, OnDestroy {
-  public readonly icons: typeof Icon = Icon;
-
-  @ViewChild('navigationItems', {read: ElementRef})
-  public navigationItems: ElementRef;
-
-  @ViewChild('faxItems', {read: ElementRef})
-  public faxItems: ElementRef;
-
-  @ViewChild('printItems', {read: ElementRef})
-  public printItems: ElementRef;
-
-  @ViewChild('emailItems', {read: ElementRef})
-  public emailItems: ElementRef;
-
-  @ViewChild('ediItems', {read: ElementRef})
-  public ediItems: ElementRef;
-
-  @ViewChild('emailTemplateItems', {read: ElementRef})
-  public emailTemplateItems: ElementRef;
-
-  @ViewChild('smsItems', {read: ElementRef})
-  public smsItems: ElementRef;
-
-  @ViewChild('webServiceItems', {read: ElementRef})
-  public webServiceItems: ElementRef;
-
-  @ViewChild('pdfItems', {read: ElementRef})
-  public pdfItems: ElementRef;
-
-  @Input()
-  public printerList: Printer[] = [];
-
-  @Input()
-  public reportingDocumentPrintRequest: ReportingDocumentPrintSignDocBaseRequest;
-
-  @Input()
-  public reportingDocumentEmailRequest: ReportingDocumentEmailSignDocBaseRequest;
-
-  @Input()
-  public reportingDocumentPdfRequest: ReportingDocumentPdfBaseRequest;
-
-  @Input()
-  public emailLayouts: ReportLayoutSelectionEmail[] = [];
-
-  @Input()
-  public printLayouts: ReportLayoutSelectionPrint[] = [];
-
-  // @Input()
-  // public priceListCodeData: any;
-
-  @Input()
-  public headerTitle: string;
-
-  @Input()
-  public emailAddresses: string[] = [];
-
-  @Input()
-  public defaultSendMethod: string;
-
-  @Input()
-  public visibleMethods: SendMethodType[] | string[] = [];
-
-  @Input()
-  public isDocSignEnabled: boolean = false;
-
-  @Input()
-  public docSign: boolean = false;
-
-  @Output()
-  public reportingDocumentPrintRequestChange: EventEmitter<ReportingDocumentPrintSignDocBaseRequest> = new EventEmitter<ReportingDocumentPrintSignDocBaseRequest>();
-
-  @Output()
-  public reportingDocumentEmailRequestChange: EventEmitter<ReportingDocumentEmailSignDocBaseRequest> = new EventEmitter<ReportingDocumentEmailSignDocBaseRequest>();
-
-  @Output()
-  public reportingDocumentPdfRequestChange: EventEmitter<ReportingDocumentPdfBaseRequest> = new EventEmitter<ReportingDocumentPdfBaseRequest>();
-
-  @Output()
-  public startSignatureClicked: EventEmitter<any> = new EventEmitter<any>();
-
-  @Output()
-  public closeClick: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
-
-  @Output()
-  public okClick: EventEmitter<string> = new EventEmitter<string>();
-
-  @HostBinding('class.co-send-method-dialog')
-  public showClass(): boolean {
-    return true;
-  }
-
-  public sendMethods = sendMethodsWithIcon;
-  public activeSendMethod: SendMethod;
-  public upAndLoaded: boolean = false;
-  public startUp: boolean = true;
-
-  public showFax: boolean = true;
-  public showPrint: boolean = true;
-  public showEmail: boolean = true;
-  public showEdi: boolean = true;
-  public showSms: boolean = true;
-  public showEmailTemplate: boolean = true;
-  public showWebservice: boolean = true;
-  public showPdf: boolean = true;
-
-  private _subscriptions: Subscription[] = [];
-
-  constructor(
-    public iconCacheService: IconCacheService,
-    private _changeDetector: ChangeDetectorRef,
-    private _sharedService: SharedService,
-    private _sendMethodService: SendMethodService
-  ) {
-    this._subscriptions.push(
-      this._sendMethodService.reportingDocumentPrintSignDocBaseRequestChanged.subscribe((value: ReportingDocumentPrintSignDocBaseRequest) => this.reportingDocumentPrintRequestChange.next(value)),
-      this._sendMethodService.reportingDocumentEmailSignDocBaseRequestChanged.subscribe((value: ReportingDocumentEmailSignDocBaseRequest) => this.reportingDocumentEmailRequestChange.next(value)),
-      this._sendMethodService.reportingDocumentPdfBaseRequestChanged.subscribe((value: ReportingDocumentPdfBaseRequest) => this.reportingDocumentPdfRequestChange.next(value))
-    )
-  }
-
-  ngOnInit() {
-    if (this.reportingDocumentEmailRequest) {
-      this._sendMethodService.reportingDocumentEmailSignDocBaseRequest = this.reportingDocumentEmailRequest;
-    }
-    if (this.reportingDocumentPrintRequest) {
-      this._sendMethodService.reportingDocumentPrintSignDocBaseRequest = this.reportingDocumentPrintRequest;
-    }
-    if (this.reportingDocumentPdfRequest) {
-      this._sendMethodService.reportingDocumentPdfBaseRequest = this.reportingDocumentPdfRequest;
-    }
-    this._initDefaultSendMethod();
-    this._prepareVisibleMethods();
-  }
-
-  ngOnDestroy(): void {
-    this._subscriptions.forEach(subscription => subscription.unsubscribe());
-  }
-
-  public handleSignatureStart(): void {
-    this.docSign = !this.docSign;
-    this.startSignatureClicked.emit();
-  }
-
-  public handleSendMethodClick(sendMethod: SendMethod): void {
-    this.activeSendMethod = sendMethod;
-    if (sendMethod.code === SendMethodType.Fax && this.showFax) {
-      this.navigationItems.nativeElement.scrollLeft = this.faxItems.nativeElement.offsetLeft - this.navigationItems.nativeElement.offsetLeft;
-    } else if (sendMethod.code === SendMethodType.Print && this.showPrint) {
-      this.navigationItems.nativeElement.scrollLeft = this.printItems.nativeElement.offsetLeft - this.navigationItems.nativeElement.offsetLeft;
-    } else if (sendMethod.code === SendMethodType.Email && this.showEmail) {
-      this.navigationItems.nativeElement.scrollLeft = this.emailItems.nativeElement.offsetLeft - this.navigationItems.nativeElement.offsetLeft;
-    } else if (sendMethod.code === SendMethodType.Edi && this.showEdi) {
-      this.navigationItems.nativeElement.scrollLeft = this.ediItems.nativeElement.offsetLeft - this.navigationItems.nativeElement.offsetLeft;
-    } else if (sendMethod.code === SendMethodType.EmailTemplate && this.showEmailTemplate) {
-      this.navigationItems.nativeElement.scrollLeft = this.emailTemplateItems.nativeElement.offsetLeft - this.navigationItems.nativeElement.offsetLeft;
-    } else if (sendMethod.code === SendMethodType.Sms && this.showSms) {
-      this.navigationItems.nativeElement.scrollLeft = this.smsItems.nativeElement.offsetLeft - this.navigationItems.nativeElement.offsetLeft;
-    } else if (sendMethod.code === SendMethodType.WebService && this.showWebservice) {
-      this.navigationItems.nativeElement.scrollLeft = this.webServiceItems.nativeElement.offsetLeft - this.navigationItems.nativeElement.offsetLeft;
-    } else if (sendMethod.code === SendMethodType.Pdf && this.showPdf) {
-      this.navigationItems.nativeElement.scrollLeft = this.pdfItems.nativeElement.offsetLeft - this.navigationItems.nativeElement.offsetLeft;
-    }
-  }
-
-  private _initDefaultSendMethod(): void {
-    if (this.defaultSendMethod) {
-      this._selectDefaultSendMethod();
-    } else {
-      if (this.visibleMethods && this.visibleMethods.length === 1) {
-        this.defaultSendMethod = this.visibleMethods[0];
-        this._selectDefaultSendMethod();
-      }
-      this.startUp = false;
-    }
-  }
-
-  private _selectDefaultSendMethod(): void {
-    const sendMethod: SendMethod = this.sendMethods.find(sm => sm.code === this.defaultSendMethod);
-    if (sendMethod) {
-      setTimeout(() => {
-        this.handleSendMethodClick(sendMethod);
-        this.startUp = false;
-      });
-    }
-  }
-
-  private _prepareVisibleMethods(): void {
-    if (this.visibleMethods && this.visibleMethods.length > 0) {
-      this.sendMethods = this.sendMethods.filter(sm => this.visibleMethods.find(vm => vm === sm.code));
-    }
-    this.showFax = this.sendMethods.find(sm => sm.code === SendMethodType.Fax) !== undefined;
-    this.showPrint = this.sendMethods.find(sm => sm.code === SendMethodType.Print) !== undefined;
-    this.showEmail = this.sendMethods.find(sm => sm.code === SendMethodType.Email) !== undefined;
-    this.showEdi = this.sendMethods.find(sm => sm.code === SendMethodType.Edi) !== undefined;
-    this.showEmailTemplate = this.sendMethods.find(sm => sm.code === SendMethodType.EmailTemplate) !== undefined;
-    this.showSms = this.sendMethods.find(sm => sm.code === SendMethodType.Sms) !== undefined;
-    this.showWebservice = this.sendMethods.find(sm => sm.code === SendMethodType.WebService) !== undefined;
-    this.showPdf = this.sendMethods.find(sm => sm.code === SendMethodType.Pdf) !== undefined;
-
-  }
-}

package/projects/sharedcomponents/src/lib/components/send-method-dialog/send-method-dialog.module.ts

@@ -1,32 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {ButtonModule, CoDialogModule, IconModule} from '@colijnit/corecomponents_v12';
-import {SendMethodDialogComponent} from './send-method-dialog.component';
-import {StockService} from '../../service/stock.service';
-import {SendMethodService} from './service/send-method.service';
-import {SendMethodEmailModule} from './components/send-method-email/send-method-email.module';
-import {SendMethodPrinterModule} from './components/send-method-printer/send-method-printer.module';
-import {SendMethodPdfModule} from './components/send-method-pdf/send-method-pdf.module';
-
-@NgModule({
-  declarations: [
-    SendMethodDialogComponent
-  ],
-  imports: [
-    CommonModule,
-    CoDialogModule,
-    IconModule,
-    SendMethodEmailModule,
-    SendMethodPrinterModule,
-    ButtonModule,
-    SendMethodPdfModule
-  ],
-  exports: [
-    SendMethodDialogComponent
-  ],
-  providers: [
-    SendMethodService,
-    StockService
-  ]
-})
-export class SendMethodDialogModule { }

package/projects/sharedcomponents/src/lib/components/send-method-dialog/send-method-params.interface.ts

@@ -1,13 +0,0 @@
-export interface SendMethodParams {
-  goodId?: number;
-  warehouse?: number;
-  location?: string;
-  batch?: string;
-  serial?: string;
-  amount?: number;
-  reportId?: number;
-  printerName?: string;
-  priceListCode?: string;
-  goodIds?: number[];
-  name?: string;
-}

package/projects/sharedcomponents/src/lib/components/send-method-dialog/service/send-method.service.ts

@@ -1,63 +0,0 @@
-import {Injectable} from '@angular/core';
-import {ReportingDocumentEmailSignDocBaseRequest} from '@colijnit/mainapi/build/model/reporting-document-email-sign-doc-base-request';
-import {ReportingDocumentPdfBaseRequest} from '@colijnit/mainapi/build/model/reporting-document-pdf-base-request';
-import {ReportingDocumentPrintSignDocBaseRequest} from '@colijnit/mainapi/build/model/reporting-document-print-sign-doc-base-request';
-import {Subject} from 'rxjs';
-
-@Injectable()
-export class SendMethodService {
-  public reportingDocumentPrintSignDocBaseRequestChanged: Subject<ReportingDocumentPrintSignDocBaseRequest> = new Subject<ReportingDocumentPrintSignDocBaseRequest>();
-  public reportingDocumentEmailSignDocBaseRequestChanged: Subject<ReportingDocumentEmailSignDocBaseRequest> = new Subject<ReportingDocumentEmailSignDocBaseRequest>();
-  public reportingDocumentPdfBaseRequestChanged: Subject<ReportingDocumentPdfBaseRequest> = new Subject<ReportingDocumentPdfBaseRequest>();
-
-  public set reportingDocumentPrintSignDocBaseRequest(value: ReportingDocumentPrintSignDocBaseRequest) {
-    this._reportingDocumentPrintSignDocBaseRequest = value;
-    this.activePrinter = this._reportingDocumentPrintSignDocBaseRequest.printerName;
-    this.reportingDocumentPrintSignDocBaseRequestChanged.next(this._reportingDocumentPrintSignDocBaseRequest);
-  }
-  public get reportingDocumentPrintSignDocBaseRequest(): ReportingDocumentPrintSignDocBaseRequest {
-    return this._reportingDocumentPrintSignDocBaseRequest;
-  }
-  public set reportingDocumentEmailSignDocBaseRequest(value: ReportingDocumentEmailSignDocBaseRequest) {
-    this._reportingDocumentEmailSignDocBaseRequest = value;
-    this.selectedEmailAddresses = this._reportingDocumentEmailSignDocBaseRequest.toAddresses.split(';');
-    this.reportingDocumentEmailSignDocBaseRequestChanged.next(this._reportingDocumentEmailSignDocBaseRequest);
-  }
-  public get reportingDocumentEmailSignDocBaseRequest(): ReportingDocumentEmailSignDocBaseRequest {
-    return this._reportingDocumentEmailSignDocBaseRequest;
-  }
-  public set reportingDocumentPdfBaseRequest(value: ReportingDocumentPdfBaseRequest) {
-    this._reportingDocumentPdfBaseRequest = value;
-    this.reportingDocumentPdfBaseRequestChanged.next(this._reportingDocumentPdfBaseRequest);
-  }
-  public get reportingDocumentPdfBaseRequest(): ReportingDocumentPdfBaseRequest {
-    return this._reportingDocumentPdfBaseRequest;
-  }
-
-  public selectedEmailAddresses: string[] = [];
-  public activePrinter: string;
-
-  private _reportingDocumentPrintSignDocBaseRequest: ReportingDocumentPrintSignDocBaseRequest = new ReportingDocumentPrintSignDocBaseRequest();
-  private _reportingDocumentEmailSignDocBaseRequest: ReportingDocumentEmailSignDocBaseRequest = new ReportingDocumentEmailSignDocBaseRequest();
-  private _reportingDocumentPdfBaseRequest: ReportingDocumentPdfBaseRequest = new ReportingDocumentPdfBaseRequest();
-
-  public removeEmailAddress(address: string): void {
-    if (this.selectedEmailAddresses.indexOf(address) > -1) {
-      this.selectedEmailAddresses.splice(this.selectedEmailAddresses.indexOf(address), 1);
-      this._updateEmailAddresses();
-    }
-  }
-
-  public addEmailAddress(address: string): void {
-    if (this.selectedEmailAddresses.indexOf(address) < 0) {
-      this.selectedEmailAddresses.push(address);
-      this._updateEmailAddresses();
-    }
-  }
-
-  private _updateEmailAddresses(): void {
-    this._reportingDocumentEmailSignDocBaseRequest.toAddresses = this.selectedEmailAddresses.join(';');
-    this.reportingDocumentEmailSignDocBaseRequestChanged.next(this._reportingDocumentEmailSignDocBaseRequest);
-  }
-
-}

package/projects/sharedcomponents/src/lib/components/simple-tags/simple-tags.component.ts

@@ -1,243 +0,0 @@
-import {Component, EventEmitter, HostBinding, Input, Output, ViewEncapsulation} from "@angular/core";
-import {IconCacheService} from "../../service/icon-cache.service";
-import {Icon} from "../../enum/icon.enum";
-import {CdkDragDrop} from "@angular/cdk/drag-drop";
-import {SharedService} from "../../service/shared.service";
-import {TagTreeItem} from "@colijnit/mainapi/build/model/tag-tree-item.bo";
-
-@Component({
-  selector: "co-simple-tags",
-  template: `
-    <co-dialog
-      [headerTemplate]="headerTemplate"
-      [footerTemplate]="footerTemplate"
-      (closeClick)="closeClick.emit()"
-    >
-      <ng-template #headerTemplate>
-        <div class="header-wrapper">
-          <co-icon [iconData]="iconCacheService.getIcon(icon.TagRegular)"></co-icon>
-          <span class="co-dialog-header-title" [textContent]="'Tags'"></span>
-        </div>
-      </ng-template>
-
-      <div class="dialog-content-wrapper">
-        <div class="collection-navigation co-small-scrollbar">
-          <span class="title" [textContent]="'Beschikbare tags'"></span>
-          <co-input-search
-            [(model)]="searchString"
-            [placeholder]="'Search for tag name'"
-            (search)="searchCollection()"
-            (modelChange)="searchCollection()"
-            (rightIconClick)="searchCollection()"
-          ></co-input-search>
-          <div class="breadcrumbs">
-            <co-icon
-              [iconData]="iconCacheService.getIcon(icon.HouseBlankRegular)"
-              (click)="setRootDisplayTags()"
-            ></co-icon>
-            <div class="crumbs">
-              <span class="spacer" [textContent]="'|'"></span>
-              <div class="crumb" *ngFor="let crumb of breadCrumbs; let index = index" (click)="handleCrumbClicked(crumb, index)">
-                <span class="spacer" *ngIf="index !== 0" [textContent]="'/'"></span>
-                <span [textContent]="crumb.description"></span>
-              </div>
-            </div>
-          </div>
-          <div class="collection-view"
-               cdkDropList
-               cdkDropListSortingDisabled
-               #collectionList="cdkDropList"
-               [cdkDropListData]="displayTags"
-               [cdkDropListConnectedTo]="[linkedList]"
-          ><div class="collection-item"
-                *ngFor="let tag of displayTags"
-                cdkDrag
-                [cdkDragDisabled]="tag.tagType !== 'T' || linkedTags.includes(tag)"
-                [class.draggable]="tag.tagType === 'T' && !linkedTags.includes(tag)"
-                [class.disabled]="linkedTags.includes(tag)"
-                (click)="handleTagSelected(tag)">
-
-            <div class="collection-item" *cdkDragPlaceholder>
-              <co-icon *ngIf="tag.tagType === 'T'" [iconData]="iconCacheService.getIcon(icon.TagRegular)"></co-icon>
-              <span [textContent]="tag.description"></span>
-            </div>
-
-            <div *cdkDragPreview><co-icon [iconData]="iconCacheService.getIcon(icon.TagRegular)"></co-icon></div>
-
-            <co-icon *ngIf="tag.tagType === 'T'" [iconData]="iconCacheService.getIcon(icon.TagRegular)"></co-icon>
-            <span [textContent]="tag.description"></span>
-          </div>
-          </div>
-        </div>
-
-        <div class="linked-tags-view">
-          <span class="title" [textContent]="'Gekoppelde tags'"></span>
-          <div class="view-wrapper"
-               cdkDropList
-               #linkedList="cdkDropList"
-               [cdkDropListData]="linkedTags"
-               (cdkDropListDropped)="handleAddTag($event)">
-            <div class="tag-item" *ngFor="let tag of linkedTags" [cdkDragDisabled]="true" cdkDrag [style.background-color]="tag.color?.replace('0x', '#')">
-              <div class="placeholderLinked" *cdkDragPlaceholder></div>
-
-              <div class="thumbnail-description">
-                <co-icon *ngIf="!tag.image?.thumbnailBody" [iconData]="iconCacheService.getIcon(icon.TagRegular)"></co-icon>
-                <div *ngIf="tag.image" class="thumbnail-wrapper">
-                  <img [src]="tag.image.thumbnailBodyAsDataUri">
-                </div>
-
-                <div class="description-wrapper">
-                  <span [textContent]="tag.parentDescription"></span>
-                  <span class="description" [textContent]="tag.description"></span>
-                </div>
-              </div>
-              <co-icon class="delete-tag" (click)="deleteLinkedTag(tag)"
-                       [iconData]="iconCacheService.getIcon(icon.XSolid)"
-              ></co-icon>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <ng-template #footerTemplate>
-        <div class="co-dialog-footer-button-wrapper">
-          <co-button class="save-button"
-            [iconData]="iconCacheService.getIcon(icon.CheckDuotone)"
-            (click)="handleSaveTags()"
-          ></co-button>
-          <co-button
-            class="close-button"
-            [iconData]="iconCacheService.getIcon(icon.CrossSkinny)"
-            (click)="closeClick.next()"
-          ></co-button>
-        </div>
-      </ng-template>
-    </co-dialog>
-  `,
-  encapsulation: ViewEncapsulation.None
-})
-export class SimpleTagsComponent {
-  public readonly icon: typeof Icon = Icon;
-
-  @Input()
-  public set tags(tags: TagTreeItem[]) {
-    this._tags = tags;
-    this.setRootDisplayTags();
-  }
-
-  @Input()
-  public set linkedTags(tags: TagTreeItem[]) {
-    this._linkedTags = tags;
-    tags.forEach((tag) => this._loadThumbnail(tag));
-  }
-
-  public get linkedTags(): TagTreeItem[] {
-    return this._linkedTags;
-  }
-
-  @Output()
-  public closeClick: EventEmitter<void> = new EventEmitter<void>();
-
-  @Output()
-  public saveClick: EventEmitter<TagTreeItem[]> = new EventEmitter<TagTreeItem[]>();
-
-  public breadCrumbs: TagTreeItem[] = [];
-  public displayTags: TagTreeItem[] = [];
-  public searchString: string = '';
-
-  private _tags: TagTreeItem[] = [];
-  private _linkedTags: TagTreeItem[] = [];
-
-  @HostBinding("class.co-simple-tags")
-  public showClass() {
-    return true;
-  }
-
-  constructor(
-    public iconCacheService: IconCacheService,
-    public sharedService: SharedService,
-  ) { }
-
-  public setRootDisplayTags(): void {
-    this.displayTags = this._tags.filter((tag: TagTreeItem) => tag.treeLevel === 0);
-    this.breadCrumbs = [];
-    this.searchString = '';
-  }
-
-  public handleTagSelected(selectedTag: TagTreeItem): void {
-    if (selectedTag.tagType === 'TR' || selectedTag.tagType === 'TG') {
-      if (selectedTag !== this.breadCrumbs[0]) {
-        this.breadCrumbs.push(selectedTag);
-      }
-      this.displayTags = this._tags.filter((tag: TagTreeItem) => {
-        return tag.parentId === selectedTag.id && tag.treeLevel === selectedTag.treeLevel + 1
-      });
-    }
-  }
-
-  public handleCrumbClicked(tag: TagTreeItem, index: number): void {
-    if (tag !== this.breadCrumbs[this.breadCrumbs.length - 1]) {
-      this.breadCrumbs.splice(index + 1);
-      this.handleTagSelected(tag);
-    }
-  }
-
-  public handleAddTag(event: CdkDragDrop<TagTreeItem[], any>): void {
-    const draggedTag: TagTreeItem = this.displayTags[event.previousIndex];
-    if (!this._linkedTags.includes(draggedTag)) {
-      this._linkedTags.push(this.displayTags[event.previousIndex]);
-      this._loadThumbnail(draggedTag);
-    }
-  }
-
-  public deleteLinkedTag(tag: TagTreeItem): void {
-    this._linkedTags.splice(this._linkedTags.indexOf(tag), 1);
-  }
-
-  public searchCollection(): void {
-    if (!this.searchString) {
-      this.searchString = '';
-      this.setRootDisplayTags();
-      return;
-    }
-    if (this.searchString.length < 2) {
-      return;
-    }
-    if (this.searchString === '') {
-      this.setRootDisplayTags();
-      return;
-    }
-
-    const matchingObjects: TagTreeItem[] = [];
-
-    this._tags.filter((item) => item.tagType === 'T').forEach((obj) => {
-      Object.values(obj).forEach((value) => {
-        if (typeof value === 'string' || typeof value === 'number') {
-          const stringValue = String(value).toLowerCase();
-          if (stringValue.includes(this.searchString.toLowerCase())) {
-            matchingObjects.push(obj);
-          }
-        }
-      });
-    });
-
-    this.displayTags = matchingObjects;
-    this.breadCrumbs = [];
-  }
-
-  public handleSaveTags(): void {
-    this.saveClick.next(this._linkedTags);
-    this.closeClick.next();
-  }
-
-  private _loadThumbnail(tagTreeItem: TagTreeItem): void {
-    if (tagTreeItem.image && tagTreeItem.image.documentId && !tagTreeItem.image.thumbnailBody) {
-      this.sharedService.getDocumentContent(tagTreeItem.image.documentId, true)
-        .then((result) => {
-          if (result) {
-            tagTreeItem.image.thumbnailBody = result;
-          }
-        });
-    }
-  }
-}