@colijnit/transaction 261.20.51 → 261.20.52

package/projects/transaction/src/lib/component/transaction-search/transaction-search-tile/transaction-search-sales-line-select-tile/transaction-search-sales-line-select-tile.component.ts

@@ -0,0 +1,196 @@
+import {ChangeDetectorRef, Component, EventEmitter, HostBinding, Input, Output, ViewEncapsulation} from '@angular/core';
+import {IconCacheService} from '../../../../service/icon-cache.service';
+import {TransactionSearchTileBaseComponent} from '../../../core/base/transaction-search-tile-base.component';
+import {TransactionService} from '../../../../service/transaction.service';
+import {TransactionLineSearchIndex} from '@colijnit/transactionapi/build/model/transaction-line-search-index.bo';
+import {TransactionSearchView} from "@colijnit/transactionapi/build/model/transaction-search-view.bo";
+import {PriorityType} from '@colijnit/mainapi/build/enum/priority-type.enum';
+import {TransactionKind} from "@colijnit/transactionapi/build/enum/transaction-kind.enum";
+
+@Component({
+    selector: 'co-transaction-search-sales-line-select-tile',
+    template: `
+      @if (customerPortal) {
+        <div class="co-transaction-search-sales-line-select-tile-wrapper " observeVisibility #observer=visibilityObserve
+             (visibilityChange)="handleVisibilityChange($event)">
+
+          <div class="order-lines-container co-small-scrollbar">
+            <div class="order-header">
+              <span class="trans-nr" [textContent]="transaction.transNr"></span>
+              <span class="trans-date" [textContent]="this.transaction.transDate | date:'dd-MM-yyyy'"></span>
+            </div>
+            <div class="order-lines">
+              @for (line of lines; track line) {
+                <div class="inner-line">
+                  <co-transaction-line-tile
+                    [line]="line"
+                    (click)="tileClicked(line)">
+                  </co-transaction-line-tile>
+                </div>
+              }
+            </div>
+          </div>
+        </div>
+      }
+
+      @if (!extendedTransactionSearch && !customerPortal) {
+        <div class="co-transaction-search-sales-line-select-tile-wrapper " observeVisibility #observer=visibilityObserve
+          (visibilityChange)="handleVisibilityChange($event)">
+          <co-transaction-order-tile [transaction]="transaction" [showAvatar]="true">
+          </co-transaction-order-tile>
+          <div class="order-lines-container co-small-scrollbar">
+            <div class="order-lines">
+              @for (line of lines; track line) {
+                <div class="inner-lines">
+                  <co-transaction-line-tile [line]="line" (click)="tileClicked(line)"></co-transaction-line-tile>
+                </div>
+              }
+            </div>
+          </div>
+        </div>
+      }
+      @if (extendedTransactionSearch && !customerPortal) {
+        <div class="co-transaction-search-sales-line-select-tile-wrapper " observeVisibility #observer=visibilityObserve
+          (visibilityChange)="handleVisibilityChange($event)">
+          <co-transaction-order-tile [transaction]="transaction" [showAvatar]="true">
+          </co-transaction-order-tile>
+          <div class="order-lines-container" (click)="onTransactionClick(transaction)">
+            @if(returnWizardLayout) {
+               <div class="order-lines-wizard">
+                  @for (line of lines; track line) {
+                    <div class="inner-lines">
+                      <co-transaction-line-tile [line]="line"  [showPriceAmount]="true" ></co-transaction-line-tile>
+                    </div>
+                  }
+                </div>
+            }
+
+            @if(!returnWizardLayout) {
+              @if (transaction.transactionKind !== 'S') {
+                <div class="order-lines">
+                  @for (line of lines; track line) {
+                    <div class="inner-lines">
+                      <co-transaction-line-tile [line]="line" [showPriceAmount]="transaction.transType === 'R'" ></co-transaction-line-tile>
+                    </div>
+                  }
+                </div>
+              }
+              @if (transaction.transactionKind === 'S') {
+                <div class="service-lines">
+                  <div class="service-line">
+                    <div class="service-status">
+                      <span class="service-label" [textContent]="'STATE' | localize"></span>
+                      <span [textContent]="transaction.workflowStatusDescription"></span>
+                    </div>
+                    <div class="service-message">
+                      <span class="service-label" [textContent]="'MESSAGE' | localize"></span>
+                      <span class="message" [textContent]="transaction.serviceMessage"></span>
+                    </div>
+                  </div>
+                  <div class="service-right-side">
+                    <div class="service-priority">
+                      <span class="service-label" [textContent]="'PRIORITY' | localize"></span>
+                      <span
+                        [ngClass]="getPriorityLabel(transaction.servicePriority).toLowerCase() | localize"
+                      [textContent]="getPriorityLabel(transaction.servicePriority).toUpperCase() | localize"></span>
+                    </div>
+                    <div class="service-modified">
+                      <span class="service-label" [textContent]="'MODIFIED' | localize"></span>
+                      <span [textContent]="transaction.dateModified"></span>
+                    </div>
+                    <div class="service-created">
+                      <span class="service-label" [textContent]="'CREATED_BY' | localize"></span>
+                      <span [textContent]="transaction.relationName"></span>
+                    </div>
+                  </div>
+                </div>
+              }
+            }
+            <div class="show-order-wrapper">
+              <div class="show-order">
+                <co-icon [iconData]="iconCacheService.getIcon(icons.ChevronRightRegular)"></co-icon>
+                <span [textContent]="showOrderLabel() | localize"></span>
+              </div>
+            </div>
+          </div>
+        </div>
+      }
+      `,
+    encapsulation: ViewEncapsulation.None,
+    standalone: false
+})
+export class TransactionSearchSalesLineSelectTileComponent extends TransactionSearchTileBaseComponent {
+
+  @HostBinding('class.co-transaction-search-sales-line-select-tile')
+  public showClass(): boolean {
+    return true;
+  }
+
+  @Input()
+  public extendedTransactionSearch: boolean = false;
+
+  @Input()
+  public returnWizardLayout: boolean = false;
+
+  @Input()
+  public customerPortal: boolean = false;
+
+  @Output()
+  lineClicked: EventEmitter<TransactionLineSearchIndex> = new EventEmitter<TransactionLineSearchIndex>();
+
+  @Output()
+  public transactionClick: EventEmitter<TransactionSearchView> = new EventEmitter<TransactionSearchView>();
+
+  public lines: TransactionLineSearchIndex[];
+  public PriorityType = PriorityType;
+
+  constructor(public iconCacheService: IconCacheService,
+    public transactionService: TransactionService,
+    public changeDetector: ChangeDetectorRef
+  ) {
+    super(iconCacheService, changeDetector);
+  }
+
+  public async handleVisibilityChange(visible: boolean): Promise<void> {
+    if (visible && (this.lines === null || this.lines === undefined)) {
+      this.lines = await this.transactionService.getLineIndicesByTransId(this.transaction.transId);
+    }
+  }
+
+  public tileClicked(line: TransactionLineSearchIndex): void {
+    this.lineClicked.emit(line);
+  }
+
+  public onTransactionClick(transaction: TransactionSearchView): void {
+    this.transactionClick.emit(transaction);
+  }
+
+  public getPriorityLabel(priority?: PriorityType): string {
+    switch (priority) {
+      case PriorityType.No:
+        return 'NO';
+      case PriorityType.Moderate:
+        return 'MODERATE';
+      case PriorityType.Average:
+        return 'AVERAGE';
+      case PriorityType.High:
+        return 'HIGH';
+      case PriorityType.VeryHigh:
+        return 'VERY_HIGH';
+      default:
+        return 'NO';
+    }
+  }
+
+  public showOrderLabel(): string {
+    if (this.transaction && this.transaction.transactionKind && this.transaction.transactionKind  === TransactionKind.ServiceOrder ) {
+      return 'SHOW_SERVICE';
+    } else {
+      if (this.transaction && this.transaction.transType && this.transaction.transType === 'R') {
+         return 'MORE_INFORMATION';
+      } else {
+        return 'SHOW_ORDER';
+      }
+    }
+  }
+}

package/projects/transaction/src/lib/component/transaction-search/transaction-search-tile/transaction-search-sales-line-select-tile/transaction-search-sales-line-select-tile.module.ts

@@ -0,0 +1,33 @@
+import {NgModule} from '@angular/core';
+import {TransactionSearchSalesLineSelectTileComponent} from './transaction-search-sales-line-select-tile.component';
+import {
+  TransactionSearchSalesOrderTileModule
+} from "../transaction-search-sales-order-tile/transaction-search-sales-order-tile.module";
+import {IconModule, ObserveVisibilityModule} from "@colijnit/corecomponents_v12";
+import {CommonModule} from "@angular/common";
+import {CoreModule} from "../../../core/core.module";
+import {TransactionLineStatusbarModule} from "../../../transaction-line-statusbar/transaction-line-statusbar.module";
+import {TransactionLineTileModule} from "./transaction-line-tile/transaction-line-tile.module";
+import {TransactionOrderTileModule} from "./transaction-order-tile/transaction-order-tile.module";
+import {PipeModule} from "../../../../pipe/pipe.module";
+@NgModule({
+  imports: [
+    TransactionSearchSalesOrderTileModule,
+    ObserveVisibilityModule,
+    CommonModule,
+    CoreModule,
+    TransactionLineStatusbarModule,
+    TransactionLineTileModule,
+    TransactionOrderTileModule,
+    PipeModule,
+    IconModule,
+  ],
+  declarations: [
+    TransactionSearchSalesLineSelectTileComponent
+  ],
+  exports: [
+    TransactionSearchSalesLineSelectTileComponent
+  ]
+})
+export class TransactionSearchSalesLineSelectTileModule {
+}

package/projects/transaction/src/lib/component/transaction-search/transaction-search-tile/transaction-search-sales-order-tile/transaction-search-sales-order-tile.component.ts

@@ -0,0 +1,121 @@
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, ViewEncapsulation} from '@angular/core';
+import {IconCacheService} from '../../../../service/icon-cache.service';
+import {TransactionSearchTileBaseComponent} from '../../../core/base/transaction-search-tile-base.component';
+import {StatusBarCfgNames} from '../../../../interface/status-bar-cfg-names.interface';
+
+@Component({
+    selector: "co-transaction-search-sales-order-tile",
+    template: `
+      <div class="transaction-tile-wrapper" (click)="onTransactionClick(transaction)">
+        <div [class]="'type-indicator color-' + transaction.transactionKind"></div>
+        <div class="tile">
+          <div class="tile-header">
+            <div class="tile-upper-left">
+              <div class="transaction-tile-avatar">
+                <co-avatar [image]="transaction.execImage" [relationId]="transaction.handledBy"></co-avatar>
+                <span [textContent]="transaction.transNr"></span>
+              </div>
+            </div>
+            <div class="tile-upper-middle">
+              <co-icon [iconData]="iconCacheService.getIcon(icons.StoreLight)" class="store-icon"></co-icon>
+              <div class="text"><span [textContent]="transaction.branchNr"></span></div>
+            </div>
+      
+            <div class="tile-upper-right">
+              <div class="status-bar-wrapper" (click)="$event.stopPropagation()">
+                <co-transaction-statusbar
+                  [screenConfigurationObject]="cfgNames.StatusBar"
+                  [configNames]="statusBarConfigNames"
+                  [transaction]="transaction">
+                </co-transaction-statusbar>
+              </div>
+            </div>
+          </div>
+          <div class="tile-body">
+            <div class="tile-middle-left">
+              @if (showCheckbox && !transaction.isInProgressForBatchJob) {
+                <co-input-checkbox
+                  [(model)]="transaction.selected"
+                  (modelChange)="onSelectedClick(transaction)">
+                </co-input-checkbox>
+              }
+              @if (showCheckbox && transaction.isInProgressForBatchJob) {
+                <co-icon
+                  class="batch-info-icon"
+                  [title]="'PART_OF_BATCH' | localize"
+                  [iconData]="iconCacheService.getIcon(icons.CircleInfoRegular)">
+                </co-icon>
+              }
+            </div>
+            <div class="tile-middle-middle">
+              <div class="text"><span [textContent]="transaction.relationName"></span></div>
+              <div class="text"><span [textContent]="transaction.getAdres()"></span></div>
+            </div>
+            <div class="tile-middle-right"></div>
+          </div>
+          <div class="tile-footer">
+            <div class="tile-bottom-left order-info-section">
+              <co-icon [iconData]="iconCacheService.getIcon(icons.RegularCartShoppingClock)" class="store-icon"></co-icon>
+              <div class="value">
+                <span [textContent]="transaction.getTransDate() | date:'dd-MM-yyyy'"></span>
+              </div>
+            </div>
+            <div class="tile-bottom-middle order-info-section">
+              @if (transaction.getDeliveryDate()) {
+                <div class="value">
+                  <co-icon [iconData]="iconCacheService.getIcon(icons.RegularTruckMovingClock)" class="store-icon"></co-icon>
+                  <span [textContent]="transaction.getDeliveryDate() | date:'dd-MM-yyyy'"></span>
+                  @if (transaction.deliveryDateDefinitive) {
+                    <co-icon
+                    [iconData]="iconCacheService.getIcon(icons.Lock)" class="lock-icon"></co-icon>
+                  } @else {
+                    <co-icon [iconData]="iconCacheService.getIcon(icons.Unlock)" class="unlock-icon"></co-icon>
+                  }
+                </div>
+              }
+            </div>
+            <div class="tile-bottom-right order-info-section">
+              <co-icon [iconData]="iconCacheService.getIcon(icons.RegularCartShoppingTag)" class="store-icon"></co-icon>
+              <div class="value"><span
+              [textContent]="transaction.totalPriceWithVat | currency:'EUR'"></span></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+    standalone: false
+})
+export class TransactionSearchSalesOrderTileComponent extends TransactionSearchTileBaseComponent {
+  public statusBarConfigNames: StatusBarCfgNames = {
+    statusBarBT: this.cfgNames.StatusBarBT,
+    statusBarTG: this.cfgNames.StatusBarTG,
+    statusBarPA: this.cfgNames.StatusBarPA,
+    statusBarPV: this.cfgNames.StatusBarPV,
+    statusBarTP: this.cfgNames.StatusBarTP,
+    statusBarGT: this.cfgNames.StatusBarGT,
+    statusBarGP: this.cfgNames.StatusBarGP,
+    statusBarGL: this.cfgNames.StatusBarGL,
+    statusBarGF: this.cfgNames.StatusBarGF
+  }
+
+  @Input()
+  public set showAvatar(value: boolean) {
+    this._showAvatar = value;
+    this.detectChanges();
+  }
+
+  public get showAvatar(): boolean {
+    return this._showAvatar;
+  }
+
+  private _showAvatar: boolean = true;
+
+  constructor(
+    public iconCacheService: IconCacheService,
+    public changeDetector: ChangeDetectorRef
+  ) {
+    super(iconCacheService, changeDetector)
+  }
+}

package/projects/transaction/src/lib/component/transaction-search/transaction-search-tile/transaction-search-sales-order-tile/transaction-search-sales-order-tile.module.ts

@@ -0,0 +1,32 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {ButtonModule, IconModule, InputCheckboxModule, ScreenConfigurationModule} from '@colijnit/corecomponents_v12';
+import {PipeModule} from '../../../../pipe/pipe.module';
+import {CoreModule} from '../../../core/core.module';
+import {AvatarModule} from '../../../avatar/avatar.module';
+import {StatusbarModule} from '@colijnit/sharedcomponents';
+import {TransactionStatusbarModule} from '../transaction-statusbar/transaction-statusbar.module';
+import {TransactionSearchSalesOrderTileComponent} from './transaction-search-sales-order-tile.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        CoreModule,
+        AvatarModule,
+        ButtonModule,
+        PipeModule,
+        IconModule,
+        StatusbarModule,
+        TransactionStatusbarModule,
+        InputCheckboxModule,
+        ScreenConfigurationModule,
+    ],
+  declarations: [
+    TransactionSearchSalesOrderTileComponent
+  ],
+  exports: [
+    TransactionSearchSalesOrderTileComponent
+  ]
+})
+export class TransactionSearchSalesOrderTileModule {
+}

package/projects/transaction/src/lib/component/transaction-search/transaction-search-tile/transaction-search-sales-quotation-tile/transaction-search-sales-quotation-tile.component.ts

@@ -0,0 +1,85 @@
+import {ChangeDetectorRef, Component, HostBinding, ViewEncapsulation} from '@angular/core';
+import {IconCacheService} from "../../../../service/icon-cache.service";
+import {TransactionSearchTileBaseComponent} from "../../../core/base/transaction-search-tile-base.component";
+
+@Component({
+    selector: "co-transaction-search-sales-quotation-tile",
+    template: `
+      <div class="transaction-tile-wrapper" (click)="onTransactionClick(transaction)">
+        <div [class]="'type-indicator color-' + transaction.transactionKind"></div>
+        <div class="tile">
+          <div class="tile-header">
+            <div class="tile-upper-left">
+              <div class="transaction-tile-avatar">
+                <co-avatar [image]="transaction.execImage" [relationId]="transaction.handledBy"></co-avatar>
+                <span [textContent]="transaction.transNr"></span>
+              </div>
+            </div>
+            <div class="tile-upper-middle">
+              <co-icon [iconData]="iconCacheService.getIcon(icons.StoreLight)" class="store-icon"></co-icon>
+              <div class="text"><span [textContent]="transaction.branchNr"></span></div>
+            </div>
+          </div>
+          <div class="tile-body">
+            <div class="tile-middle-left">
+              @if (showCheckbox) {
+                <co-input-checkbox
+                  [(model)]="transaction.selected"
+                  (modelChange)="onSelectedClick(transaction)"
+                ></co-input-checkbox>
+              }
+            </div>
+            <div class="tile-middle-middle">
+              <div class="text"><span [textContent]="transaction.relationName"></span></div>
+              <div class="text"><span [textContent]="transaction.getAdres()"></span></div>
+            </div>
+            <div class="tile-middle-right"></div>
+          </div>
+          <div class="tile-footer">
+            <div class="tile-bottom-left order-info-section">
+              <co-icon [iconData]="iconCacheService.getIcon(icons.RegularWarehouseClock)" class="store-icon"></co-icon>
+              <div class="value">
+                <span [textContent]="transaction.getTransDate() | date:'dd-MM-yyyy'"></span>
+              </div>
+            </div>
+            <div class="tile-bottom-middle order-info-section">
+              @if (transaction.getDeliveryDate()) {
+                <div class="value">
+                  <co-icon [iconData]="iconCacheService.getIcon(icons.RegularTruckMovingClock)" class="store-icon"></co-icon>
+                  <span [textContent]="transaction.getDeliveryDate() | date:'dd-MM-yyyy'"></span>
+                  @if (transaction.deliveryDateDefinitive) {
+                    <co-icon
+                    [iconData]="iconCacheService.getIcon(icons.Lock)" class="lock-icon"></co-icon>
+                  } @else {
+                    <co-icon [iconData]="iconCacheService.getIcon(icons.Unlock)" class="unlock-icon"></co-icon>
+                  }
+                </div>
+              }
+            </div>
+            <div class="tile-bottom-right order-info-section">
+              <co-icon [iconData]="iconCacheService.getIcon(icons.RegularCartShoppingTag)" class="store-icon"></co-icon>
+              <div class="value"><span
+              [textContent]="transaction.totalPriceWithVat | currency:'EUR'"></span></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      `,
+    encapsulation: ViewEncapsulation.None,
+    standalone: false
+})
+export class TransactionSearchSalesQuotationTileComponent extends TransactionSearchTileBaseComponent {
+
+  @HostBinding("class.co-transaction-search-sales-quotation-tile")
+  public showClass() {
+    return true;
+  }
+
+  constructor(
+    public iconCacheService: IconCacheService,
+    public changeDetector: ChangeDetectorRef
+  ) {
+    super(iconCacheService, changeDetector)
+  }
+
+}

package/projects/transaction/src/lib/component/transaction-search/transaction-search-tile/transaction-search-sales-quotation-tile/transaction-search-sales-quotation-tile.module.ts

@@ -0,0 +1,24 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {TransactionSearchSalesQuotationTileComponent} from "./transaction-search-sales-quotation-tile.component";
+import {AvatarModule} from "../../../avatar/avatar.module";
+import {IconModule, InputCheckboxModule} from "@colijnit/corecomponents_v12";
+import {PipeModule} from "../../../../pipe/pipe.module";
+
+@NgModule({
+  imports: [
+    CommonModule,
+    AvatarModule,
+    InputCheckboxModule,
+    IconModule,
+    PipeModule
+  ],
+    declarations: [
+        TransactionSearchSalesQuotationTileComponent
+    ],
+    exports: [
+        TransactionSearchSalesQuotationTileComponent
+    ]
+})
+export class TransactionSearchSalesQuotationTileModule {
+}

package/projects/transaction/src/lib/component/transaction-search/transaction-search-tile/transaction-search-tile/transaction-search-tile.component.ts

@@ -0,0 +1,120 @@
+import {ApplicationRef, ChangeDetectorRef, Component, EventEmitter, HostBinding, Input, OnChanges, OnDestroy, Output, Type, ViewChild, ViewContainerRef, ViewEncapsulation} from '@angular/core';
+import {TransactionSearchView} from '@colijnit/transactionapi/build/model/transaction-search-view.bo';
+import {TransactionMappingService} from '../../../../service/transaction-mapping.service';
+import {TransactionSearchTileBaseComponent} from '../../../core/base/transaction-search-tile-base.component';
+import {TransactionSearchService} from '../../service/transaction-search.service';
+
+@Component({
+  selector: 'co-transaction-search-tile',
+  template: `
+      <div #transactionSearchTile></div>
+  `,
+  providers: [
+    TransactionMappingService
+  ],
+  encapsulation: ViewEncapsulation.None,
+  standalone: false
+})
+export class TransactionSearchTileComponent implements OnChanges, OnDestroy {
+  @ViewChild('transactionSearchTile', {read: ViewContainerRef}) set container(content) {
+    if (content) {
+      this._transactionSearchTileContainer = content;
+      this._prepareContent();
+    }
+  }
+
+  @Input()
+  public showCheckbox: boolean;
+
+  @Input()
+  public selected: boolean;
+
+  @Input()
+  public set transaction(value: TransactionSearchView) {
+    this._transaction = value;
+    this._prepareContent();
+  }
+
+  public get transaction(): TransactionSearchView {
+    return this._transaction;
+  }
+
+  @Output()
+  public transactionClick: EventEmitter<TransactionSearchView> = new EventEmitter<TransactionSearchView>();
+
+  @Output()
+  public selectedClick: EventEmitter<TransactionSearchView> = new EventEmitter<TransactionSearchView>();
+
+  @HostBinding('class.co-transaction-search-tile')
+  public showClass() {
+    return true;
+  }
+
+  private _transactionSearchTileContainer: ViewContainerRef;
+  private _transaction: TransactionSearchView;
+  private _componentRef: any;
+
+  constructor(
+    private _mappingService: TransactionMappingService,
+    private _appRef: ApplicationRef,
+    private _changeDetector: ChangeDetectorRef,
+    public searchService: TransactionSearchService
+  ) {
+  }
+
+  public ngOnChanges(): void {
+    this._changeDetector.detectChanges();
+    this._componentRef.instance.showCheckbox = this.showCheckbox;
+    this._componentRef.instance.selected = this.selected;
+  }
+
+  ngOnDestroy() {
+    if (this._componentRef) {
+      this._componentRef.destroy();
+      this._componentRef = undefined;
+    }
+    this._transactionSearchTileContainer = undefined;
+  }
+
+  private _prepareContent(): void {
+    if (!this.searchService.transactionType || !this._transactionSearchTileContainer) {
+      return;
+    }
+    const componentClass: Type<TransactionSearchTileBaseComponent> = this._mappingService.getTransactionSearchTileComponent(this.searchService.transactionType);
+
+    if (this._componentRef) {
+      this._componentRef.destroy();
+      this._componentRef = undefined;
+    }
+    if (!componentClass) {
+      return;
+    }
+
+    if (!this._componentRef) {
+      this._transactionSearchTileContainer.clear();
+      this._componentRef = this._transactionSearchTileContainer.createComponent(componentClass);
+
+      this._componentRef.onDestroy(() => {
+        this._appRef.detachView(this._componentRef.hostView);
+      });
+    }
+
+    //inputs
+    this._componentRef.instance.transaction = this.transaction;
+    this._componentRef.instance.showCheckbox = this.showCheckbox;
+    this._componentRef.instance.selected = this.selected;
+
+    //outputs
+    this._componentRef.instance.transactionClick.subscribe(transaction => {
+      this.transactionClick.emit(transaction);
+    });
+
+    this._componentRef.instance.selectedClick.subscribe(transaction => {
+      this.selectedClick.emit(transaction);
+    });
+
+    this._componentRef.onDestroy(() => {
+      this._appRef.detachView(this._componentRef.hostView);
+    });
+  }
+}

package/projects/transaction/src/lib/component/transaction-search/transaction-search-tile/transaction-search-tile/transaction-search-tile.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { TransactionSearchTileComponent } from "./transaction-search-tile.component";
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  declarations: [
+    TransactionSearchTileComponent
+  ],
+  exports: [
+    TransactionSearchTileComponent
+  ]
+})
+export class TransactionSearchTileModule {
+}