@colijnit/transaction 12.1.21 → 12.1.24

package/lib/component/transaction-tile/style/_layout.scss

@@ -0,0 +1,162 @@
+@import "../../../style/mixin";
+
+@include export-module('co-transaction-tile-layout') {
+  .co-transaction-tile {
+
+    .transaction-tile-wrapper {
+      //max-width: 500px;
+      background: white;
+      border-radius: 11px;
+      border: 1px solid #5fdbb2;
+      padding: 12px 12px 12px 19px;
+    }
+
+    .header-row {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 10px;
+
+      .header-transport-container {
+        display: flex;
+        flex-direction: row;
+
+        .transport-method-icon {
+          width: 40px;
+          height: 40px;
+          margin: -10px 5px -10px 0;
+        }
+
+        .transport-method-text {
+          font-family: $tp-font-family;
+          font-size: 12px;
+        }
+      }
+
+      .header-date {
+        font-family: $tp-font-family;
+        font-size: 12px;
+        color: #5fdbb2;
+      }
+
+      .header-side-panel-button {
+        cursor: pointer;
+      }
+    }
+
+    .transaction-details-row {
+      display: flex;
+      height: 60px;
+      justify-content: space-between;
+
+      .transaction-details-container {
+        display: flex;
+        flex-direction: column;
+        width: 75%;
+
+        .transaction-tile-title {
+          font-family: $tp-font-family;
+          font-size: 12px;
+          margin-bottom: 5px;
+          overflow-x: clip;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+
+        .transaction-tile-description {
+          font-family: $tp-font-family;
+          font-size: 12px;
+          overflow-y: hidden;
+          color: #7d81a1;
+        }
+      }
+
+      .tile-image {
+        margin-right: 5px;
+        width: 60px;
+        height: 60px;
+      }
+    }
+
+    .transaction-order-status-row {
+      display: flex;
+      width: 100%;
+      padding: 10px;
+      justify-content: flex-end;
+
+      .indicators-wrapper {
+        display: flex;
+        min-width: 70px;
+
+        .transaction-order-status-indicator {
+          width: 12px;
+          height: 8px;
+          margin: 1px;
+        }
+      }
+    }
+
+    .transaction-data-row {
+      display: flex;
+      width: 100%;
+
+      .transaction-data-header {
+        width: inherit;
+        display: flex;
+        justify-content: space-between;
+      }
+
+      .transaction-data-header-label {
+        font-family: $tp-font-family;
+        font-size: 10px;
+        color: #7d81a1;
+      }
+
+      .transaction-data-header-field {
+        font-family: $tp-font-family;
+        font-size: 12px;
+        overflow-x: clip;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      .transaction-data-header-divider {
+        display: flex;
+        border-right: 2px solid #ebebeb;
+        margin: 5px;
+      }
+
+      .transaction-data-header-item {
+        display: flex;
+        flex-direction: column;
+        row-gap: 10px;
+
+        input::-webkit-outer-spin-button,
+        input::-webkit-inner-spin-button {
+          -webkit-appearance: none;
+          margin: 0;
+        }
+      }
+    }
+
+    .center {
+      align-items: center;
+    }
+
+    .bold {
+      font-weight: bold;
+    }
+
+    .amount-input {
+      width: 26px;
+      text-align: center;
+    }
+
+    .mutable {
+      padding: 4px 11px;
+      border-radius: 9px;
+      background: #f5f5fa;
+      margin-left: 3%;
+    }
+  }
+}

package/lib/component/transaction-tile/style/_theme.scss

@@ -0,0 +1,7 @@
+@import "../../../style/mixin";
+
+@include export-module('co-transaction-tile') {
+  .co-transaction-tile {
+
+  }
+}

package/lib/component/transaction-tile/style/material.scss

@@ -0,0 +1,3 @@
+@import "./material-definition";
+@import "./layout";
+@import "./theme";

package/lib/component/transaction-tile/transaction-tile.component.d.ts

@@ -0,0 +1,23 @@
+import { EventEmitter } from "@angular/core";
+import { TransactionLineInfo } from "@colijnit/transactionapi/build/model/transaction-line-info.bo";
+import { IconCacheService } from "../../service/icon-cache.service";
+import { Icon } from "../../enum/icon.enum";
+import { TransactionImageService } from "../../service/transaction-image.service";
+import { TransactionKind } from "@colijnit/transactionapi/build/enum/transaction-kind.enum";
+export declare class TransactionTileComponent {
+    iconCacheService: IconCacheService;
+    private _imageService;
+    readonly icon: typeof Icon;
+    readonly transactionTypes: typeof TransactionKind;
+    transactionType: TransactionKind;
+    set transactionLine(value: TransactionLineInfo);
+    get transactionLine(): TransactionLineInfo;
+    showSidePanelClicked: EventEmitter<TransactionLineInfo>;
+    image: string;
+    private _transactionLine;
+    showClass(): boolean;
+    constructor(iconCacheService: IconCacheService, _imageService: TransactionImageService);
+    handleSidePanelButtonClicked(): void;
+    getStatusColor(n: number): string;
+    private _loadLineImage;
+}

package/lib/component/transaction-tile/transaction-tile.module.d.ts

@@ -0,0 +1,2 @@
+export declare class TransactionTileModule {
+}

package/lib/enum/icon.enum.d.ts

@@ -14,6 +14,7 @@ export declare enum Icon {
     CartShoppingSolid = "cart_shopping_solid",
     CashRegister = "cash_register",
     CreditCardSolid = "credit_card_solid",
+    DeliveryStatusUncheck = "delivery_status_uncheck",
     DeliveryTruck = "delivery_truck",
     EditPencil = "edit_pencil",
     IdealLogo = "ideal_logo",
@@ -33,6 +34,8 @@ export declare enum Icon {
     ShelvesSolid = "shelves_solid",
     SidePanel = "side_panel",
     SlideIn = "slide_in",
+    SquareFull = "square_full",
+    SquareFullSolid = "square_full_solid",
     SyncAlt = "sync_alt",
     Tag = "tag",
     ThickLines = "thick_lines",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colijnit/transaction",
-  "version": "12.1.21",
+  "version": "12.1.24",
   "description": "Colijn IT transaction module for Angular 12",
   "private": false,
   "peerDependencies": {