@colijnit/transaction 12.1.25 → 12.1.26

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

@@ -8,9 +8,6 @@
 
     .transaction-search-wrapper {
       display: flex;
-      //border-right: $cc-co-transaction-search-border-style;
-      //height: $cc-co-transaction-search-screen-height;
-      //overflow: hidden;
 
       &.fullscreen {
         width: 100%;
@@ -18,18 +15,22 @@
       }
 
       &.sidebar {
-        width:$cc-co-transaction-searchbar-width;
-        transition: width 0.2s ease-in-out;
+        width: $cc-co-transaction-searchbar-width;
+        transition: all 0.2s ease-in-out;
+
+        &.collapsed {
+          transform: translate(-$cc-co-transaction-searchbar-width);
+        }
+
+        &.expanded {
+          transform: translate(0);
+        }
       }
     }
 
     .transaction-filter-wrapper {
       display: flex;
-      //flex-basis: 350px;
-      //overflow-y: auto;
-      //overflow-x: hidden;
       min-width: $tp-co-transaction-filter-wrapper-min-width;
-      //height: $cc-co-transaction-search-screen-height;
 
       &.sidebar {
         position: absolute;
@@ -37,7 +38,7 @@
         transition: left 0.2s ease-in-out;
       }
 
-      &.fullscreen{
+      &.fullscreen {
         position: relative;
         left: 0;
         transition: left 0.2s ease-in-out;
@@ -46,11 +47,55 @@
 
     .transaction-search-result-wrapper {
       display: flex;
-      //height: $cc-co-transaction-search-screen-height;
       overflow-y: auto;
       flex-basis: 100%;
       justify-content: flex-start;
       padding: $tp-co-transaction-search-result-wrapper-padding;
     }
+
+    .transaction-search-content-wrapper {
+      &.fullscreen {
+        display: none;
+      }
+
+      &.sidebar {
+        transition: all 0.2s ease-in-out;
+
+        &.expanded {
+          min-height: 100vh;
+          transform: translate(10px);
+        }
+
+        &.collapsed {
+          transform: translate(-$cc-co-transaction-searchbar-width + 10px);
+        }
+      }
+    }
+
+    & > co-icon-collapse-handle {
+      position: absolute !important;
+      flex-shrink: 0;
+      top: 50vh;
+
+      &.fullscreen {
+        opacity: 0;
+      }
+
+      &.sidebar {
+        transition: all 0.2s ease-in-out;
+
+        &.collapsed {
+          opacity: 0;
+          transform: translate(0) rotate(90deg);
+        }
+
+        &.expanded {
+          opacity: 1;
+          transition-delay: 0.2s;
+          transition-property: opacity;
+          transform: translate($cc-co-transaction-searchbar-width - 17px) rotate(90deg);
+        }
+      }
+    }
   }
 }

package/lib/component/transaction-search/style/_material-definition.scss

@@ -3,9 +3,8 @@ $tp-co-transaction-search-font-size: $tp-font-size !default;
 $cc-co-transaction-search-background-color: $cc-color-light !default;
 $cc-co-transaction-search-border-color: $tp-color-border !default;
 $cc-co-transaction-search-border-style: solid 1px !default;
-//$cc-co-transaction-search-screen-height: 95vh !default;
 
-$cc-co-transaction-searchbar-width:370px !default;
+$cc-co-transaction-searchbar-width: 370px !default;
 
 $tp-co-transaction-filter-wrapper-min-width: 360px !default;
 $tp-co-transaction-filter-button-color: $cc-color-light !default;

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

@@ -4,7 +4,10 @@
   .co-transaction-search {
     .transaction-search-wrapper {
       background-color: $cc-co-transaction-search-background-color;
-      //border-right-color: $cc-co-transaction-search-border-color;
+
+      .transaction-search-result-wrapper.sidebar.expanded {
+        border-right: 1px solid $cc-co-transaction-search-border-color;
+      }
     }
   }
 }

package/lib/component/transaction-search/transaction-search-grid/transaction-search-sales-order-grid/transaction-search-sales-order-grid.component.d.ts

@@ -4,5 +4,4 @@ export declare class TransactionSearchSalesOrderGridComponent extends Transactio
     searchService: TransactionSearchService;
     showClass(): boolean;
     constructor(searchService: TransactionSearchService);
-    onTransactionClick(event: any): void;
 }

package/lib/component/transaction-search/transaction-search-result/style/_layout.scss

@@ -20,5 +20,9 @@
         justify-content: center;
       }
     }
+
+    .pagination {
+      padding: 0 25px;
+    }
   }
 }

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

@@ -1,25 +1,39 @@
 import { EventEmitter } from "@angular/core";
+import { CoDirection, CoOrientation } from "@colijnit/corecomponents_v12";
 import { TransactionKind } from "@colijnit/transactionapi/build/enum/transaction-kind.enum";
 import { TransactionSearchView } from "@colijnit/transactionapi/build/model/transaction-search-view.bo";
 import { SearchViewMode } from "../../enum/search-view-mode.enum";
 import { TransactionSearchService } from "./service/transaction-search.service";
+export declare enum SearchBarViewMode {
+    Expanded = 0,
+    Collapsed = 1
+}
 export declare class TransactionSearchComponent {
     private _transactionSearchService;
     readonly searchViewModes: typeof SearchViewMode;
+    readonly orientations: typeof CoOrientation;
+    readonly directionRight: CoDirection;
     activeSearchViewMode: SearchViewMode;
-    closeClick: EventEmitter<void>;
+    activeSearchBarViewMode: SearchBarViewMode;
+    showFilterSidebar: boolean;
+    private _transactionType;
     set transactionType(value: TransactionKind);
     get transactionType(): TransactionKind;
     transactionClick: EventEmitter<TransactionSearchView>;
     searchViewModeChange: EventEmitter<SearchViewMode>;
     showClass(): boolean;
-    showFilterSidebar: boolean;
-    private _transactionType;
     constructor(_transactionSearchService: TransactionSearchService);
     get fullscreen(): boolean;
+    get collapsed(): boolean;
     toggleFilter(): void;
     handleHideFilter(): void;
     handleResetFilter(): void;
     onTransactionClick(transaction: TransactionSearchView): void;
-    onResizeClick(): void;
+    onSearchViewResizeClick(): void;
+    onSideCollapseHandleClick(): void;
+    toggleSearchBar(): void;
+    collapseSearchBar(): void;
+    expandSearchBar(): void;
+    calculateClasses(): any;
+    private _scrollToTop;
 }

package/package.json

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